/*
 * The AI extraction panel on a lead.
 *
 * Styled to read as a quotation rather than as CRM data. Everything a
 * salesperson sees elsewhere on this page was entered by a person or enforced
 * by a rule; this was guessed by a model reading chat messages, and it should
 * not look identical to the rest. Hence the left rule, the muted surface and
 * the standing disclaimer at the bottom.
 *
 * Logical properties throughout (border-inline-start, margin-inline) because
 * the product is Persian and renders RTL; a plain border-left would end up on
 * the wrong side of the panel.
 */

.ai-extraction-panel {
    margin-block-start: 1.5rem;
    padding: 1rem 1.25rem;
    border-inline-start: 3px solid #b9c6d4;
    background: #f7f9fb;
    border-radius: 4px;
}

.ai-extraction-panel h3 {
    margin-block-start: 0;
    margin-block-end: 0.75rem;
    font-size: 1rem;
    color: #4a5b6d;
}

.ai-extraction-panel h4 {
    margin-block-start: 1.25rem;
    margin-block-end: 0.5rem;
    font-size: 0.9rem;
    color: #4a5b6d;
}

.ai-extraction-summary {
    margin-block: 0 1rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #22303f;
}

/*
 * A conflict is a question for the reader, so it is the one element here
 * allowed to look urgent. It is placed and coloured to be seen before the
 * field list that follows it.
 */
.ai-extraction-conflicts {
    margin-block-end: 1rem;
    padding: 0.75rem 1rem;
    border-inline-start: 3px solid #d9534f;
    background: #fdf3f2;
    border-radius: 3px;
}

.ai-extraction-conflicts p {
    margin-block: 0.35rem 0.75rem;
    font-size: 0.9rem;
    color: #6b4a48;
}

.ai-extraction-warnings {
    margin-block-end: 1rem;
    padding: 0.6rem 1rem;
    background: #fdf8ec;
    border-inline-start: 3px solid #e0a800;
    border-radius: 3px;
    font-size: 0.9rem;
}

.ai-extraction-warnings ul {
    margin: 0;
    padding-inline-start: 1.1rem;
}

.ai-extraction-panel table {
    width: 100%;
    margin-block-end: 0.5rem;
    border-collapse: collapse;
}

.ai-extraction-panel th {
    text-align: start;
    font-weight: 600;
    font-size: 0.8rem;
    color: #7a8a9a;
    padding-block: 0.3rem;
    border-block-end: 1px solid #dde4ea;
}

.ai-extraction-panel td {
    padding-block: 0.4rem;
    border-block-end: 1px solid #eef2f5;
    vertical-align: top;
}

/*
 * Confidence is the model's opinion of itself, not a measurement, so it is
 * rendered as a quiet word rather than a number or a progress bar — both of
 * which would invite the reader to trust it more than it deserves.
 */
.ai-confidence-high { color: #2e7d4f; }
.ai-confidence-medium { color: #9a7b1f; }
.ai-confidence-low { color: #98a5b2; }

.ai-extraction-applied {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    background: #e4efe7;
    color: #2e7d4f;
    font-size: 0.72rem;
}

.ai-extraction-skipped {
    margin-block-start: 0.75rem;
    font-size: 0.85rem;
    color: #6c7a89;
}

.ai-extraction-skipped summary {
    cursor: pointer;
}

.ai-extraction-provenance,
.ai-extraction-disclaimer {
    margin-block-end: 0;
    font-size: 0.78rem;
    color: #8b97a3;
}

.ai-extraction-provenance {
    margin-block-start: 1rem;
}

.ai-extraction-disclaimer {
    margin-block-start: 0.35rem;
    font-style: italic;
}

@media (prefers-color-scheme: dark) {
    .ai-extraction-panel {
        border-inline-start-color: #3f4d5c;
        background: #1e252d;
    }

    .ai-extraction-panel h3,
    .ai-extraction-panel h4 { color: #a9b8c6; }
    .ai-extraction-summary { color: #dee6ed; }
    .ai-extraction-panel th { color: #8593a1; border-block-end-color: #333d48; }
    .ai-extraction-panel td { border-block-end-color: #2a323b; }
    .ai-extraction-conflicts { background: #33201f; border-inline-start-color: #b8433f; }
    .ai-extraction-conflicts p { color: #d8b3b0; }
    .ai-extraction-warnings { background: #2e2819; border-inline-start-color: #b08800; }
    .ai-extraction-applied { background: #1f3327; color: #7fc79b; }
}