/* Call intelligence: diarized transcript + agent scorecard */

.ci-wrap { --ci-agent: #2563eb; --ci-customer: #0f766e; --ci-border: #e2e8f0; --ci-muted: #64748b; }

/* ---------- Scorecard header ---------- */
.ci-score-head {
    display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center;
    padding: 1.125rem 1.25rem; border: 1px solid var(--ci-border);
    border-radius: 0.75rem; background: linear-gradient(180deg,#fff,#f8fafc);
}
.ci-grade {
    flex: 0 0 auto; width: 4.5rem; height: 4.5rem; border-radius: 0.75rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; line-height: 1;
}
.ci-grade b { font-size: 1.85rem; font-weight: 700; }
.ci-grade span { font-size: 0.7rem; opacity: .9; margin-top: .15rem; }
.ci-grade-a { background: #15803d; } .ci-grade-b { background: #4d7c0f; }
.ci-grade-c { background: #b45309; } .ci-grade-d { background: #c2410c; }
.ci-grade-f { background: #b91c1c; } .ci-grade-na { background: #64748b; }

.ci-head-main { flex: 1 1 16rem; min-width: 0; }
.ci-head-main h4 { margin: 0 0 .3rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ci-muted); }
.ci-head-main p { margin: 0; font-size: .9rem; line-height: 1.5; color: #334155; }

.ci-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.ci-pill {
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem;
    border-radius: 999px; font-size: .74rem; font-weight: 500;
    background: #f1f5f9; color: #334155; border: 1px solid var(--ci-border);
}
.ci-pill-good { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.ci-pill-bad  { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.ci-pill-warn { background: #fffbeb; color: #92400e; border-color: #fde68a; }

/* ---------- Category bars ---------- */
.ci-cats { display: grid; gap: .55rem; margin-top: 1rem; }
.ci-cat { display: grid; grid-template-columns: 11.5rem 1fr 2.4rem; gap: .75rem; align-items: center; }
.ci-cat-name { font-size: .82rem; font-weight: 500; color: #334155; }
.ci-bar { height: .5rem; border-radius: 999px; background: #e9eef5; overflow: hidden; }
.ci-bar > i { display: block; height: 100%; border-radius: 999px; }
.ci-cat-val { font-size: .82rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.ci-cat-note { grid-column: 1 / -1; font-size: .78rem; line-height: 1.5; color: var(--ci-muted); margin: -.1rem 0 .35rem; }
.ci-s-hi > i { background: #16a34a; } .ci-s-mid > i { background: #d97706; } .ci-s-lo > i { background: #dc2626; }
.ci-s-hi .ci-cat-val { color: #15803d; } .ci-s-mid .ci-cat-val { color: #b45309; } .ci-s-lo .ci-cat-val { color: #b91c1b; }

@media (max-width: 640px) {
    .ci-cat { grid-template-columns: 1fr 2.4rem; }
    .ci-bar { grid-column: 1 / -1; }
}

/* ---------- Generic blocks ---------- */
.ci-block { margin-top: 1rem; }
.ci-block > h4 {
    margin: 0 0 .45rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ci-muted);
}
.ci-list { margin: 0; padding-left: 1.05rem; display: grid; gap: .3rem; }
.ci-list li { font-size: .85rem; line-height: 1.5; color: #334155; }
.ci-note { font-size: .85rem; line-height: 1.6; color: #334155; background: #f8fafc; border: 1px solid var(--ci-border); border-left: 3px solid var(--ci-agent); border-radius: .5rem; padding: .7rem .85rem; }

.ci-cards { display: grid; gap: .5rem; }
.ci-card { border: 1px solid var(--ci-border); border-radius: .5rem; padding: .65rem .8rem; background: #fff; }
.ci-card-top { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; justify-content: space-between; }
.ci-card-title { font-size: .85rem; font-weight: 600; color: #1e293b; }
.ci-card-body { font-size: .82rem; line-height: 1.55; color: #475569; margin-top: .25rem; }
.ci-quote { font-style: italic; color: #475569; border-left: 2px solid #cbd5e1; padding-left: .55rem; margin-top: .3rem; font-size: .82rem; }
.ci-flag-high { border-left: 3px solid #dc2626; } .ci-flag-medium { border-left: 3px solid #d97706; } .ci-flag-low { border-left: 3px solid #64748b; }

/* ---------- Talk time ---------- */
.ci-talk { display: flex; height: .6rem; border-radius: 999px; overflow: hidden; background: #e9eef5; }
.ci-talk i { display: block; height: 100%; }
.ci-talk-agent { background: var(--ci-agent); } .ci-talk-cust { background: var(--ci-customer); }
.ci-talk-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .45rem; font-size: .78rem; color: var(--ci-muted); }
.ci-talk-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.ci-dot { width: .55rem; height: .55rem; border-radius: 999px; display: inline-block; }

/* ---------- Transcript ---------- */
.ci-tx-bar {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between;
    margin-bottom: .6rem;
}
.ci-tx-filters { display: flex; gap: .3rem; }
.ci-tx-btn {
    font: inherit; font-size: .76rem; font-weight: 500; cursor: pointer;
    padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--ci-border);
    background: #fff; color: #475569;
}
.ci-tx-btn[aria-pressed="true"] { background: #1e293b; border-color: #1e293b; color: #fff; }

.ci-tx { display: grid; gap: .5rem; max-height: 34rem; overflow-y: auto; padding: .25rem .4rem .25rem .1rem; }
.ci-turn { display: grid; grid-template-columns: 2rem 1fr; gap: .6rem; }
.ci-turn.ci-hide { display: none; }
.ci-av {
    width: 2rem; height: 2rem; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; color: #fff; flex: 0 0 auto;
}
.ci-turn-agent .ci-av { background: var(--ci-agent); }
.ci-turn-customer .ci-av { background: var(--ci-customer); }
.ci-turn-other .ci-av { background: #64748b; }

.ci-bubble { border: 1px solid var(--ci-border); border-radius: .6rem; padding: .5rem .7rem; background: #fff; min-width: 0; }
.ci-turn-agent .ci-bubble { background: #eff6ff; border-color: #bfdbfe; }
.ci-turn-customer .ci-bubble { background: #f0fdfa; border-color: #99f6e4; }
.ci-meta { display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; margin-bottom: .15rem; }
.ci-who { font-size: .76rem; font-weight: 700; letter-spacing: .02em; }
.ci-turn-agent .ci-who { color: #1d4ed8; }
.ci-turn-customer .ci-who { color: #0f766e; }
.ci-turn-other .ci-who { color: #475569; }
.ci-time {
    font-size: .72rem; color: var(--ci-muted); font-variant-numeric: tabular-nums;
    background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.ci-time:hover { color: var(--ci-agent); text-decoration: underline; }
.ci-text { font-size: .86rem; line-height: 1.55; color: #1e293b; white-space: pre-wrap; overflow-wrap: anywhere; }

.ci-empty { font-size: .85rem; color: var(--ci-muted); font-style: italic; }

/* ---------- Dead Leads: transcript-imported rows ---------- */
/*
 * Leads opened automatically from a call transcript, tinted red so they are
 * distinguishable from agent-entered ones.
 *
 * Follows the same shape as the .call-missing-disposition rule in
 * retreaver.css: prefixed with .fi-ta-table for specificity, and repeating the
 * selector with :hover so it beats that file's `.fi-ta-table tr:hover` rule.
 */
.fi-ta-table tr.dead-lead-transcript,
.fi-ta-table tr.dead-lead-transcript:hover {
    background-color: #fee2e2 !important; /* red-100 */
}

.fi-ta-table tr.dead-lead-transcript td {
    background-color: transparent !important;
    border-bottom-color: #fecaca !important; /* red-200 */
}

/* Red marker down the left edge of the row. */
.fi-ta-table tr.dead-lead-transcript td:first-child {
    box-shadow: inset 4px 0 0 0 #dc2626 !important;
}

/* ---------- Transcripts in Progress page ---------- */
.tip-stats {
    display: grid; gap: .75rem; margin-bottom: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.tip-stat {
    border: 1px solid var(--ci-border); border-radius: .75rem; padding: .85rem 1rem;
    background: linear-gradient(180deg, #fff, #f8fafc); display: flex; flex-direction: column; gap: .1rem;
}
.tip-stat-num { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: #1e293b; }
.tip-stat-label { font-size: .8rem; font-weight: 600; color: #334155; }
.tip-stat-hint { font-size: .72rem; color: var(--ci-muted); }
.tip-stat-info { border-color: #bfdbfe; } .tip-stat-info .tip-stat-num { color: #1d4ed8; }
.tip-stat-warn { border-color: #fde68a; } .tip-stat-warn .tip-stat-num { color: #b45309; }
.tip-stat-bad  { border-color: #fecaca; } .tip-stat-bad  .tip-stat-num { color: #b91c1c; }
.tip-stat-good { border-color: #a7f3d0; } .tip-stat-good .tip-stat-num { color: #15803d; }

.tip-note {
    font-size: .8rem; line-height: 1.6; color: var(--ci-muted);
    background: #f8fafc; border: 1px solid var(--ci-border); border-left: 3px solid var(--ci-agent);
    border-radius: .5rem; padding: .7rem .85rem; margin: 0 0 1rem;
}

/* Rows whose run has stopped reporting back — same shape as the dead-lead
   rule so it survives retreaver.css's `.fi-ta-table tr:hover`. */
.fi-ta-table tr.transcript-stale,
.fi-ta-table tr.transcript-stale:hover {
    background-color: #fffbeb !important; /* amber-50 */
}
.fi-ta-table tr.transcript-stale td {
    background-color: transparent !important;
    border-bottom-color: #fde68a !important;
}
.fi-ta-table tr.transcript-stale td:first-child {
    box-shadow: inset 4px 0 0 0 #d97706 !important;
}

/* ---------- Agent Quality Control ---------- */
/*
 * A full review runs to ~1,350 words. Everything below keeps the default view
 * to a scannable page and folds the evidence into <details>, so nothing is
 * lost but nothing has to be read to get the picture.
 */
.aqr-head {
    display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
    border: 1px solid var(--ci-border); border-radius: .75rem;
    padding: 1rem 1.15rem; background: linear-gradient(180deg,#fff,#f8fafc);
}
.aqr-head-main { flex: 1 1 18rem; min-width: 0; }
.aqr-verdict { margin: 0 0 .5rem; font-size: .95rem; line-height: 1.45; font-weight: 600; color: #1e293b; }

.aqr-focus {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
    margin-top: .75rem; padding: .7rem .85rem; font-size: .86rem; line-height: 1.5;
    color: #1e293b; background: #fff7ed; border: 1px solid #fed7aa;
    border-left: 3px solid #ea580c; border-radius: .5rem;
}
.aqr-focus-tag {
    font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #c2410c; background: #ffedd5; padding: .15rem .4rem; border-radius: .25rem; flex: 0 0 auto;
}

/* Seven compact meters rather than seven full-width rows. */
.aqr-cats {
    display: grid; gap: .5rem .9rem; margin-top: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.aqr-cat { display: flex; flex-direction: column; gap: .2rem; }
.aqr-cat-top { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; }
.aqr-cat-name { font-size: .74rem; color: #475569; line-height: 1.2; }

.aqr-split { display: grid; gap: .9rem 1.25rem; margin-top: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.aqr-split h4, .aqr-block h4 {
    margin: 0 0 .45rem; font-size: .74rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ci-muted);
}
.aqr-block { margin-top: 1rem; }

/* Folded detail: the point is the headline, the evidence is one click away. */
.aqr-item {
    border: 1px solid var(--ci-border); border-radius: .5rem; background: #fff;
    margin-bottom: .4rem;
}
.aqr-item > summary {
    cursor: pointer; list-style: none; padding: .5rem .7rem;
    font-size: .84rem; line-height: 1.45; color: #1e293b;
    display: flex; gap: .45rem; align-items: flex-start;
}
.aqr-item > summary::-webkit-details-marker { display: none; }
.aqr-item > summary::before {
    content: "▸"; flex: 0 0 auto; color: #94a3b8; font-size: .7rem; line-height: 1.6;
    transition: transform .12s ease;
}
.aqr-item[open] > summary::before { transform: rotate(90deg); }
.aqr-item > summary:hover { background: #f8fafc; }
.aqr-item > p {
    margin: 0; padding: 0 .7rem .6rem 1.6rem;
    font-size: .8rem; line-height: 1.55; color: #475569;
}
.aqr-item > p + p { padding-top: .1rem; }

.aqr-item-good { border-left: 3px solid #16a34a; }
.aqr-item-high { border-left: 3px solid #dc2626; }
.aqr-item-medium { border-left: 3px solid #d97706; }
.aqr-item-low { border-left: 3px solid #94a3b8; }

.aqr-steps { margin: 0; padding-left: 1.4rem; }
.aqr-steps li { margin-bottom: .1rem; }
.aqr-steps li::marker { font-size: .78rem; font-weight: 700; color: var(--ci-muted); }

.aqr-more { margin-top: 1rem; }
.aqr-caveat { color: #b45309 !important; }
.aqr-foot { margin: .9rem 0 0; font-size: .7rem; color: var(--ci-muted); }

/* ---------- QA score table cell ---------- */
.qa-cell { display: inline-flex; flex-direction: column; gap: .2rem; min-width: 5.5rem; }
.qa-top { display: flex; align-items: baseline; gap: .15rem; }
.qa-num { font-size: 1.15rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.qa-den { font-size: .7rem; color: var(--ci-muted); margin-right: .25rem; }
.qa-grade {
    font-size: .68rem; font-weight: 700; line-height: 1; padding: .15rem .3rem;
    border-radius: .25rem; border: 1px solid currentColor;
}
.qa-bar { display: block; height: .3rem; width: 100%; border-radius: 999px; background: #e9eef5; overflow: hidden; }
.qa-bar > i { display: block; height: 100%; border-radius: 999px; }
.qa-none { font-size: .8rem; color: var(--ci-muted); font-style: italic; }

.qa-hi  .qa-num, .qa-hi  .qa-grade { color: #15803d; }
.qa-mid .qa-num, .qa-mid .qa-grade { color: #b45309; }
.qa-lo  .qa-num, .qa-lo  .qa-grade { color: #b91c1c; }
.qa-hi  .qa-bar > i { background: #16a34a; }
.qa-mid .qa-bar > i { background: #d97706; }
.qa-lo  .qa-bar > i { background: #dc2626; }

/* A call too short to count towards the agent's QA score. */
.qa-excluded {
    font-size: .65rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--ci-muted);
}
.qa-cell:has(.qa-excluded) .qa-num,
.qa-cell:has(.qa-excluded) .qa-grade { opacity: .55; }
.qa-cell:has(.qa-excluded) .qa-bar > i { opacity: .45; }

/* ---------- Per-row transcription progress ---------- */
.tr-prog { display: flex; flex-direction: column; gap: .2rem; min-width: 10rem; }
.tr-prog-top { display: flex; align-items: baseline; gap: .4rem; }
.tr-prog-pct { font-size: .95rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tr-prog-label { font-size: .7rem; color: var(--ci-muted); }
.tr-prog-bar { display: block; height: .35rem; border-radius: 999px; background: #e9eef5; overflow: hidden; }
.tr-prog-bar > i { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }

.tr-prog-running .tr-prog-pct { color: #1d4ed8; }
.tr-prog-running .tr-prog-bar > i { background: #2563eb; }
.tr-prog-queued  .tr-prog-pct { color: #94a3b8; }
.tr-prog-queued  .tr-prog-bar > i { background: #cbd5e1; }
.tr-prog-failed  .tr-prog-pct { color: #b91c1c; }
.tr-prog-failed  .tr-prog-bar > i { background: #dc2626; }

/* ---------- Dead lead: linked calls ---------- */
.lead-calls { display: grid; gap: .55rem; }
.lead-call {
    display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: flex-start;
    border: 1px solid var(--ci-border); border-left: 3px solid var(--ci-agent); border-radius: .6rem;
    padding: .7rem .85rem; background: #fff; text-decoration: none; transition: background .12s ease, border-color .12s ease;
}
.lead-call:hover { background: #f8fafc; border-color: #bfdbfe; }
.lead-call-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 18rem; }
.lead-call-id { font-size: .9rem; font-weight: 700; color: #1d4ed8; }
.lead-call-when { font-size: .78rem; color: #334155; }
.lead-call-meta { font-size: .74rem; color: var(--ci-muted); }
.lead-call-summary { font-size: .78rem; line-height: 1.5; color: #475569; margin-top: .2rem; }
.lead-call-side { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex: 0 0 auto; }
.lead-call-score { font-size: .78rem; font-weight: 700; padding: .15rem .4rem; border-radius: .3rem; border: 1px solid currentColor; }
.lead-call-score-a, .lead-call-score-b { color: #15803d; }
.lead-call-score-c, .lead-call-score-d { color: #b45309; }
.lead-call-score-f { color: #b91c1c; }
.lead-call-score-na { color: var(--ci-muted); }
.lead-call-outcome { font-size: .72rem; text-transform: capitalize; color: var(--ci-muted); }
.lead-call-open { font-size: .74rem; font-weight: 600; color: #2563eb; }

/* ---------- Generic table row states ---------- */
/*
 * Reusable row tints. Prefixed with .fi-ta-table and repeating the :hover
 * selector so they beat retreaver.css's `.fi-ta-table tr:hover` rule — a
 * plainer selector loses the cascade and the tint disappears on hover.
 */
.fi-ta-table tr.row-bad,
.fi-ta-table tr.row-bad:hover { background-color: #fee2e2 !important; }
.fi-ta-table tr.row-bad td { background-color: transparent !important; border-bottom-color: #fecaca !important; }
.fi-ta-table tr.row-bad td:first-child { box-shadow: inset 4px 0 0 0 #dc2626 !important; }

.fi-ta-table tr.row-warn,
.fi-ta-table tr.row-warn:hover { background-color: #fffbeb !important; }
.fi-ta-table tr.row-warn td { background-color: transparent !important; border-bottom-color: #fde68a !important; }
.fi-ta-table tr.row-warn td:first-child { box-shadow: inset 4px 0 0 0 #d97706 !important; }