/* screens/conversations.css — Conversations screen. ALL classes prefixed .cv-
   Two-pane: list (search · filter chips · rows) | detail (head · transcript).
   Built on the shared layer: .card .card-head .ava .btn .chip .empty .hint .vh
   The ONE aurora element on this screen: the caller avatar in the detail head. */

/* --- page head -------------------------------------------------------------- */
/* wraps at 320: a nowrap row with a min-width:auto pill pushed the count
   clean off the screen and made the whole document 104px too wide */
.cv-ttl{display:flex;align-items:center;gap:var(--sp-12);flex-wrap:wrap;min-width:0}
.cv-ttl h1{min-width:0}
.cv-ttl .pill{transform:translateY(-3px);max-width:100%}

/* --- split card ------------------------------------------------------------- */
.cv-split{
  display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);
  overflow:hidden;
  height:clamp(480px,calc(100dvh - 236px),860px);
}

/* --- list pane -------------------------------------------------------------- */
.cv-list{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line)}
.cv-tools{
  display:flex;flex-direction:column;gap:var(--sp-10);
  padding:var(--sp-16) var(--sp-14) var(--sp-12);border-bottom:1px solid var(--line);
}
.cv-search{position:relative}
.cv-search .sh-ic{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--muted-2);pointer-events:none;
}
.cv-search input{height:40px;padding-left:38px;border-radius:var(--r-lg);font-size:var(--fs-md)}
.cv-chips{display:flex;flex-wrap:wrap;gap:var(--sp-6)}
.cv-chip{height:var(--seg-h-sm);padding:0 var(--sp-12);font-size:var(--fs-fine)}

.cv-rows{flex:1;min-height:0;overflow-y:auto;padding:var(--sp-8)}
.cv-rows::-webkit-scrollbar,.cv-det__body::-webkit-scrollbar{width:9px}
.cv-rows::-webkit-scrollbar-thumb,.cv-det__body::-webkit-scrollbar-thumb{
  background:var(--tint-3);border-radius:var(--r-full);border:3px solid transparent;background-clip:content-box;
}
.cv-rows::-webkit-scrollbar-thumb:hover,.cv-det__body::-webkit-scrollbar-thumb:hover{background-color:var(--tint-4)}

.cv-row{
  display:flex;align-items:flex-start;gap:var(--sp-12);width:100%;text-align:left;
  padding:var(--sp-12);border-radius:var(--r-lg);transition:background var(--t);
}
.cv-row:hover{background:var(--card-2)}
.cv-row.is-on{background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line)}
/* the rows scroll inside .cv-rows, which clips an outer ring → inset ring */
.cv-row:focus-visible{box-shadow:var(--focus-inset)}
.cv-row.is-on:focus-visible{box-shadow:var(--focus-inset)}
.cv-row__mk{width:18px;height:18px;flex:none;margin-top:var(--sp-2);color:var(--muted-2)}
.cv-row__mk svg{width:100%;height:100%}
.cv-row--telegram .cv-row__mk{color:#26A5E4}
.cv-row--messenger .cv-row__mk{color:#0866FF}
.cv-row--whatsapp .cv-row__mk{color:#25D366}
.cv-row--viber .cv-row__mk{color:#7360F2}
.cv-row__mid{flex:1;min-width:0}
.cv-row__name{display:block;font-size:var(--fs-sm);font-weight:700;letter-spacing:-.01em}
.cv-row__prev{
  display:block;margin-top:var(--sp-2);font-size:var(--fs-fine);font-weight:500;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cv-row__side{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-4);flex:none;padding-top:1px}
.cv-row__side > time{font-size:var(--fs-micro);font-weight:600;color:var(--muted-2)}
.cv-row__sub{display:inline-flex;align-items:center;gap:var(--sp-8);min-height:10px}
.cv-row__dur{font-size:var(--fs-micro);font-weight:600;color:var(--muted-2)}

/* .cv-flag — "this call produced a booking". It carries meaning, so it is --ok
   (5.4:1, not the 1.6:1 brand green) and it always ships a .vh name with it. */
.cv-flag{
  width:7px;height:7px;flex:none;border-radius:var(--r-circle);
  background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft);
}

.cv-none{padding:var(--sp-40) var(--sp-16)}

/* --- detail pane ------------------------------------------------------------ */
.cv-det{display:flex;flex-direction:column;min-width:0}
.cv-detin{display:flex;flex-direction:column;flex:1;min-height:0}
.cv-pick{margin:auto}

/* layers over the shared .card-head: wraps, and the meta line drops below */
.cv-det__head{
  flex-wrap:wrap;justify-content:flex-start;gap:var(--sp-8) var(--sp-12);
  padding:var(--sp-16) var(--sp-20) var(--sp-14);
}
.cv-back{display:none;color:var(--muted)}
.cv-back svg{width:18px;height:18px;transform:rotate(180deg)}
.cv-back:hover{background:var(--tint-2);color:var(--ink)}

/* the single aurora element on this screen — an .ava with the gradient fill */
.cv-ava{
  width:42px;height:42px;
  background:var(--grad-ink);border-color:transparent;color:var(--on-ink);
  font-size:var(--fs-lg);font-feature-settings:"case" 1;
}
.cv-who{flex:1 1 auto;min-width:0;max-width:100%}
.cv-who__name{display:block;font-size:var(--fs-lg);font-weight:700;letter-spacing:-.01em;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv-who__tel{display:block;margin-top:1px;font-size:var(--fs-fine);font-weight:600;color:var(--muted);white-space:nowrap}
.cv-cal{flex:none}
.cv-cal .sh-ic{width:15px;height:15px}
.cv-det__meta{
  flex-basis:100%;display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-4) var(--sp-16);
  font-size:var(--fs-fine);font-weight:600;color:var(--muted);margin-top:1px;
}
.cv-meta__it{display:inline-flex;align-items:center;gap:var(--sp-6);min-width:0}
.cv-meta__it .sh-ic{width:14px;height:14px;color:var(--muted-2)}

/* --- transcript ------------------------------------------------------------- */
.cv-det__body{
  flex:1;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--sp-10);
  padding:var(--sp-20) var(--sp-20) var(--sp-24);background:var(--ground);
}

/* audio row: play + plausible waveform + duration (recording itself — soon) */
.cv-audio{
  display:flex;align-items:center;gap:var(--sp-12);flex:none;
  padding:var(--sp-10) var(--sp-14);margin-bottom:var(--sp-6);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
}
.cv-audio__play{
  display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-circle);flex:none;
  background:var(--ink);color:var(--on-ink);transition:opacity var(--t),transform var(--t);
}
.cv-audio__play:hover{opacity:.82}
.cv-audio__play:active{transform:scale(.95)}
.cv-audio__play svg{width:15px;height:15px;margin-left:var(--sp-2)}
.cv-wave{flex:1;display:flex;align-items:center;gap:var(--sp-4);height:28px;min-width:0;overflow:hidden}
.cv-wave i{flex:1;min-width:2px;max-width:4px;border-radius:var(--r-xxs);background:var(--tint-4)}
.cv-audio__dur{font-size:var(--fs-fine);font-weight:700;color:var(--muted)}

/* bubbles: caller left on card-white, VOICEO right on --card-2 with the tiny mark */
.cv-bub{max-width:78%;border-radius:var(--r-xl);padding:11px var(--sp-14) var(--sp-12)}
.cv-bub--c{align-self:flex-start;background:var(--card);border:1px solid var(--line)}
.cv-bub--a{align-self:flex-end;background:var(--card-2);border:1px solid var(--line-2)}
.cv-bub__lab{display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-4)}
.cv-bub__mk{width:14px;height:13px;color:var(--ink);flex:none}
.cv-lab{
  font-style:normal;text-transform:uppercase;font-feature-settings:"case" 1;
  letter-spacing:.1em;font-size:var(--fs-micro);font-weight:600;color:var(--muted-2);
}
.cv-bub__lab time{margin-left:auto;padding-left:var(--sp-16);font-size:var(--fs-micro);font-weight:600;color:var(--muted-2)}
.cv-bub p{font-size:var(--fs-sm);line-height:var(--lh-body);font-weight:500}

/* the receipt — the landing's rcpt anatomy at product scale */
.cv-rcpt{
  display:flex;align-items:center;gap:var(--sp-12);flex:none;margin-top:var(--sp-8);
  padding:var(--sp-12) var(--sp-16);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.cv-rcpt > div{min-width:0}
.cv-rcpt b{display:block;font-size:var(--fs-md);font-weight:700;margin-top:var(--sp-2)}
/* green TEXT must be --ok, never --live */
.cv-rcpt time{margin-left:auto;padding-left:var(--sp-14);font-size:var(--fs-fine);font-weight:700;color:var(--ok);flex:none}

.cv-note{flex:none;margin-top:var(--sp-8);text-align:center}

/* --- mobile: list → detail push --------------------------------------------- */
@media (max-width:880px){
  .cv-split{grid-template-columns:1fr;height:clamp(420px,calc(100dvh - 268px),800px)}
  .cv-list{border-right:0}
  .cv-det{display:none}
  .cv-split.is-detail .cv-list{display:none}
  .cv-split.is-detail .cv-det{display:flex}
  .cv-back{display:inline-flex}
  .cv-det__head{padding:var(--sp-12) var(--sp-14)}
  .cv-det__body{padding:var(--sp-16) var(--sp-14) var(--sp-20)}
  .cv-bub{max-width:88%}
  .cv-rows{padding:var(--sp-6)}
}