/* Call detail side sheet — opened by clicking a row in Call Logs.
 *
 * The shell (sheet, nav strip, header, tabs) and the Info/AI primitives are
 * defined alongside the rest of the Conversations styles; this file carries
 * the parts that only the call sheet uses — the dimming overlay, the row the
 * sheet is currently showing, and the Integration Logs and Journey panes.
 *
 * Both log and journey panes are timelines. They share one idea: a hairline
 * rail behind a column of step icons, so a sequence reads as a sequence
 * rather than as a stack of unrelated rows.
 */

/* ---------- Overlay ----------------------------------------------------- */

/* The sheet ships with a transparent backdrop. Calls are read one after
 * another, and dimming what's behind keeps the eye in the sheet while the
 * table stays legible enough to see which row you're on.
 *
 * Same scrim as the add-contact sheet (.ac-overlay) — one dim level across
 * every sheet that opens over a page. */
.cds-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(16, 24, 40, 0.32);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms ease;
}
.cds-backdrop.show { opacity: 1; pointer-events: auto; }

/* The row being shown. Reads through the overlay, so arrowing up and down the
 * table tells you where you are without closing the sheet. */
#cvClTbody tr.cl-row-active td { background: #E8EEFB !important; }

/* ---------- Info pane --------------------------------------------------- */

.cds-note {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 10px;
  font: 400 13px/1.5 'Inter', sans-serif; color: #667085;
}
.cds-note svg { flex: 0 0 auto; margin-top: 1px; color: #98A2B3; }

/* Disposition and rating sit on the same 150px key column as "About this
 * call" above them, so the two blocks share one optical left edge. */
.cds-field {
  display: grid; grid-template-columns: 150px 1fr;
  align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid #F2F4F7;
  font-size: 13px;
}
.cds-field-k { display: inline-flex; align-items: center; gap: 8px; color: #667085; }
.cds-field-k svg { flex: 0 0 auto; color: #98A2B3; }
.cds-field-v { color: #101828; font-weight: 500; word-break: break-word; }
.cds-field-v.mono { font-family: "SF Mono", Menlo, monospace; font-size: 12.5px; font-weight: 400; }

.cds-select {
  width: 100%; height: 36px; padding: 0 32px 0 12px;
  border: 1px solid #D0D5DD; border-radius: 8px; background: #fff;
  font: 400 13px/1 'Inter', sans-serif; color: #101828;
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.cds-select:hover { border-color: #98A2B3; }
.cds-select:focus { outline: none; border-color: #004CE6; box-shadow: 0 0 0 3px rgba(0, 76, 230, 0.12); }

.cds-stars { display: inline-flex; align-items: center; gap: 4px; }
.cds-star {
  padding: 0; border: 0; background: transparent; cursor: pointer;
  color: #D0D5DD; line-height: 0;
  transition: color 120ms ease, transform 120ms ease;
}
.cds-star svg { display: block; width: 20px; height: 20px; }
.cds-star:hover { transform: scale(1.08); }
.cds-stars:hover .cds-star { color: #D0D5DD; }
.cds-star.on, .cds-stars:hover .cds-star.hot { color: #F79009; }

/* ---------- Notes ------------------------------------------------------- */

.cds-notes {
  border: 1px solid #EAECF0; border-radius: 10px; overflow: hidden;
  background: #fff;
}
.cds-notes textarea {
  display: block; width: 100%; min-height: 116px; resize: vertical;
  padding: 12px 14px; border: 0; background: #FEFAF0;
  font: 400 13px/1.55 'Inter', sans-serif; color: #101828;
}
.cds-notes textarea::placeholder { color: #98A2B3; }
.cds-notes textarea:focus { outline: none; }
.cds-notes-foot {
  display: flex; justify-content: flex-end;
  padding: 10px 12px; border-top: 1px solid #F2F4F7; background: #fff;
}
.cds-notes-save {
  height: 34px; padding: 0 16px;
  border: 0; border-radius: 8px; background: #004CE6;
  font: 500 13px/1 'Inter', sans-serif; color: #fff; cursor: pointer;
  transition: background 120ms ease, opacity 120ms ease;
}
.cds-notes-save:hover { background: #0040C1; }
.cds-notes-save:disabled { opacity: .5; cursor: default; background: #004CE6; }

/* ---------- Call quality ------------------------------------------------ */

/* Values carry the verdict, not the label: green when the metric is inside
 * its healthy band, amber when it is drifting, red when it is not. */
.cds-metric {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 24px; padding: 0 10px;
  border-radius: 6px;
  font: 500 12.5px/1 'Inter', sans-serif;
}
.cds-metric.good { background: #ECFDF3; color: #067647; }
.cds-metric.warn { background: #FFFAEB; color: #B54708; }
.cds-metric.bad  { background: #FEF3F2; color: #B42318; }

.cds-quality-v { display: inline-flex; align-items: center; gap: 8px; }
.cds-quality-v .info { display: inline-flex; color: #98A2B3; cursor: help; }
.cds-quality-v .info svg { display: block; }

/* ---------- Integration Logs pane --------------------------------------- */

.cds-int { border: 1px solid #EAECF0; border-radius: 12px; background: #fff; margin-bottom: 12px; }
.cds-int + .cds-int { margin-top: 0; }

.cds-int-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 16px; border: 0; background: transparent;
  font-family: inherit; text-align: left; cursor: pointer;
}
.cds-int-logo { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; }
.cds-int-logo svg { display: block; width: 20px; height: 20px; }
.cds-int-name { flex: 1 1 auto; font: 600 14px/1.3 'Inter', sans-serif; color: #101828; }
.cds-int-count {
  flex: 0 0 auto; padding: 1px 8px; border-radius: 999px;
  background: #F2F4F7; color: #475467;
  font: 500 11.5px/1.6 'Inter', sans-serif;
}
.cds-int-chev { flex: 0 0 auto; color: #98A2B3; transition: transform 180ms ease, color 120ms ease; }
.cds-int[aria-expanded="true"] .cds-int-chev { transform: rotate(180deg); color: #475467; }

.cds-int-body { display: none; padding: 2px 16px 16px; }
.cds-int[aria-expanded="true"] .cds-int-body { display: block; }

/* The rail is drawn on the list, not on each row, so it stops cleanly at the
 * last step instead of trailing past it. */
.cds-int-steps { position: relative; padding-left: 30px; }
.cds-int-steps::before {
  content: ''; position: absolute; left: 9px; top: 10px; bottom: 10px;
  width: 0; border-left: 1.5px solid #EAECF0;
}
.cds-int-step { position: relative; padding: 8px 0; }
.cds-int-ic {
  position: absolute; left: -30px; top: 8px;
  width: 19px; height: 19px; border-radius: 999px;
  display: grid; place-items: center; background: #fff;
  color: #98A2B3;
}
.cds-int-ic svg { display: block; }
.cds-int-ic.done { color: #12B76A; }
.cds-int-ic.fail { color: #F04438; }
.cds-int-t { font: 500 13px/1.45 'Inter', sans-serif; color: #101828; }
.cds-int-sub { margin-top: 2px; font: 400 12.5px/1.45 'Inter', sans-serif; color: #667085; }
.cds-int-time { margin-top: 3px; font: 400 12px/1.4 'Inter', sans-serif; color: #98A2B3; }

/* ---------- Journey pane — participants ---------------------------------- */

/* Sits on the same centred dashed rail as the rest of .cds-journey. */
.cds-jn-kv { display: flex; align-items: center; gap: 12px; font: 400 13px/1.4 'Inter', sans-serif; color: #475467; }
.cds-jn-kv b { font-weight: 500; color: #101828; }
.cds-jn-kv .sep { width: 1px; height: 14px; background: #EAECF0; }

.cds-jp { width: 100%; background: #fff; border: 1px solid #EAECF0; border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.cds-jp-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 0; background: transparent;
  font-family: inherit; text-align: left; cursor: pointer;
}
.cds-jp-av {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; overflow: hidden;
  background: #F2F4F7; color: #475467;
  display: grid; place-items: center;
  font: 600 11.5px/1 'Inter', sans-serif;
}
.cds-jp-av svg { display: block; width: 100%; height: 100%; }
.cds-jp-name {
  flex: 1 1 auto; min-width: 0;
  font: 500 13.5px/1.35 'Inter', sans-serif; color: #101828;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cds-jp-status {
  flex: 0 0 auto; padding: 2px 10px; border-radius: 999px;
  font: 500 12px/1.5 'Inter', sans-serif;
}
.cds-jp-status.ok   { background: #ECFDF3; color: #067647; }
.cds-jp-status.miss { background: #FEF3F2; color: #B42318; }
.cds-jp-chev { flex: 0 0 auto; color: #98A2B3; transition: transform 180ms ease, color 120ms ease; }
.cds-jp[aria-expanded="true"] .cds-jp-chev { transform: rotate(180deg); color: #475467; }

.cds-jp-body { display: none; padding: 0 14px 14px; }
.cds-jp[aria-expanded="true"] .cds-jp-body { display: block; }

.cds-jp-steps { position: relative; padding-left: 42px; }
.cds-jp-steps::before {
  content: ''; position: absolute; left: 15px; top: 14px; bottom: 14px;
  width: 0; border-left: 1.5px solid #EAECF0;
}
.cds-jp-step { position: relative; padding: 7px 0; }
.cds-jp-ic {
  position: absolute; left: -42px; top: 3px;
  width: 31px; height: 31px; border-radius: 999px;
  display: grid; place-items: center;
  background: #F9FAFB; border: 1px solid #EAECF0; color: #475467;
}
.cds-jp-ic svg { display: block; }
.cds-jp-ic.ring { background: #EFF4FF; border-color: #D1E0FF; color: #004CE6; }
.cds-jp-ic.done { background: #ECFDF3; border-color: #DCFAE6; color: #067647; }
.cds-jp-t { font: 500 13px/1.45 'Inter', sans-serif; color: #101828; }
.cds-jp-time { margin-top: 1px; font: 400 12.5px/1.4 'Inter', sans-serif; color: #667085; }

/* ---------- Empty panes -------------------------------------------------- */

.cds-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 44px 16px; text-align: center;
}
.cds-empty svg { color: #98A2B3; }
.cds-empty-t { font: 500 13.5px/1.4 'Inter', sans-serif; color: #344054; }
.cds-empty-s { font: 400 13px/1.5 'Inter', sans-serif; color: #667085; }

/* ---------- Sheet header -------------------------------------------------- */

/* Named contacts lead with the name and carry the number underneath; unknown
 * numbers keep the number as the headline and offer "Add to contact" instead,
 * which is the only action worth taking on a stranger. */
.cds-who-sub { margin-top: 2px; font: 400 13px/1.45 'Inter', sans-serif; color: #667085; }
.cds-avatar.initials { background: #EFF4FF; color: #004CE6; font: 600 15px/1 'Inter', sans-serif; }
.cds-avatar > svg.jc-av { width: 100%; height: 100%; border-radius: 50%; }

/* ---------- Fixed head, scrolling panes ---------------------------------- */

/* Who the call was with, and which pane you're in, stay put; only the pane
 * content moves. The sheet is a flex column, so the head simply doesn't grow
 * and .cds-body takes the remaining height as the scroller — no stacked
 * sticky elements, and the scrollbar starts below the tabs where it belongs.
 *
 * Horizontal padding is duplicated from .cds-body so the header, the tabs and
 * the pane content stay on one left edge. */
.cds-top { flex: 0 0 auto; padding: 20px 24px 0; background: #fff; }

/* The 20px used to separate the tabs from the first pane. That gap is now the
 * scroller's own padding-top, so the tab underline can sit flush against the
 * boundary and act as the divider between the fixed and scrolling regions. */
.cds-top .cds-tabs { margin-bottom: 0; }

/* The identity block renders one of two shapes: a name over its number, or a
 * bare number over an "Add to contact" button. Those differ by ~17px, which
 * the head absorbed as a jump in the tab strip every time you arrowed from a
 * saved contact to an unknown one. Reserving the taller of the two keeps the
 * tabs on one line while you walk the table. */
.cds-top .cds-who { min-height: 60px; }

/* ---------- Call-type icons (Call Logs, column 2) ------------------------ */

/* The three original directions keep their colours (.ct-dir.in / .out / .miss
 * in call-logs-table.css). These are the types added alongside them, coloured
 * so the column can be read as a block: purple for anything an AI voice agent
 * handled, green in / blue out for conferences, amber for after-hours. */
.ct-dir.inAi       { color: #7F56D9; }
.ct-dir.confIn     { color: #12B76A; }
.ct-dir.confOut    { color: #1F5BFF; }
.ct-dir.afterHours { color: #F79009; }

/* The glyph is the tooltip's only trigger, so give it the whole cell to aim
 * at rather than the 15px path itself. */
.ct-td-icon .ct-dir { cursor: default; }

/* ======================================================================== */
/* Dark mode                                                                 */
/* ======================================================================== */

/* Surfaces move to the dark palette; the colours that carry a verdict — the
 * call-quality bands, the integration step icons, the journey leg statuses —
 * are restated rather than flipped, because a pale green tuned for a white
 * panel glows on a dark one. */

body.theme-dark .cds-backdrop { background: rgba(0, 0, 0, .55); }
body.theme-dark #cvClTbody tr.cl-row-active td { background: #1E2740 !important; }

/* ---- info pane ---- */
body.theme-dark .cds-note { color: var(--text-secondary); }
body.theme-dark .cds-note svg { color: var(--text-tertiary); }
body.theme-dark .cds-field { border-bottom-color: var(--border); }
body.theme-dark .cds-field-k { color: var(--text-secondary); }
body.theme-dark .cds-field-k svg { color: var(--text-tertiary); }
body.theme-dark .cds-field-v { color: var(--text-primary); }
body.theme-dark .cds-select {
  background: var(--surface-alt); border-color: var(--border-strong); color: var(--text-primary);
}
body.theme-dark .cds-select:hover { border-color: #4E5665; }
body.theme-dark .cds-star { color: #4A4F59; }
body.theme-dark .cds-stars:hover .cds-star { color: #4A4F59; }
body.theme-dark .cds-star.on, body.theme-dark .cds-stars:hover .cds-star.hot { color: #F5A524; }

/* ---- notes ---- */
body.theme-dark .cds-notes { background: var(--surface-alt); border-color: var(--border); }
body.theme-dark .cds-notes textarea { background: #2A2517; color: var(--text-primary); }
body.theme-dark .cds-notes-foot { background: var(--surface-alt); border-top-color: var(--border); }
body.theme-dark .cds-notes-save { background: var(--brand-blue); }
body.theme-dark .cds-count { color: var(--text-tertiary); }

/* ---- call quality: the pill is the verdict ---- */
body.theme-dark .cds-metric.good { background: #102A1C; color: #5EDDA0; }
body.theme-dark .cds-metric.warn { background: #2E2413; color: #E9A23B; }
body.theme-dark .cds-metric.bad  { background: #33191A; color: #FF8A80; }
body.theme-dark .cds-quality-v .info { color: var(--text-tertiary); }

/* ---- integration logs ---- */
body.theme-dark .cds-int { background: var(--surface-alt); border-color: var(--border); }
body.theme-dark .cds-int-name { color: var(--text-primary); }
body.theme-dark .cds-int-count { background: var(--surface-panel); color: var(--text-secondary); }
body.theme-dark .cds-int-chev { color: var(--text-tertiary); }
body.theme-dark .cds-int[aria-expanded="true"] .cds-int-chev { color: var(--text-secondary); }
body.theme-dark .cds-int-steps::before { border-left-color: var(--border); }
body.theme-dark .cds-int-ic { background: var(--surface-alt); color: var(--text-tertiary); }
body.theme-dark .cds-int-ic.done { color: #3DBF7F; }
body.theme-dark .cds-int-ic.fail { color: #F0645B; }
body.theme-dark .cds-int-t { color: var(--text-primary); }
body.theme-dark .cds-int-sub { color: var(--text-secondary); }
body.theme-dark .cds-int-time { color: var(--text-tertiary); }

/* ---- journey ---- */
body.theme-dark .cds-jn-kv { color: var(--text-secondary); }
body.theme-dark .cds-jn-kv b { color: var(--text-primary); }
body.theme-dark .cds-jn-kv .sep { background: var(--border); }
body.theme-dark .cds-jp { background: var(--surface-alt); border-color: var(--border); box-shadow: none; }
body.theme-dark .cds-jp-av { background: var(--surface-panel); color: var(--text-secondary); }
body.theme-dark .cds-jp-name { color: var(--text-primary); }
body.theme-dark .cds-jp-status.ok { background: #102A1C; color: #5EDDA0; }
body.theme-dark .cds-jp-status.miss { background: #33191A; color: #FF8A80; }
body.theme-dark .cds-jp-chev { color: var(--text-tertiary); }
body.theme-dark .cds-jp-steps::before { border-left-color: var(--border); }
body.theme-dark .cds-jp-ic { background: var(--surface-panel); border-color: var(--border); color: var(--text-secondary); }
body.theme-dark .cds-jp-ic.ring { background: var(--brand-blue-soft); border-color: #2C3E63; color: #7FA9FF; }
body.theme-dark .cds-jp-ic.done { background: #102A1C; border-color: #1C4230; color: #5EDDA0; }
body.theme-dark .cds-jp-t { color: var(--text-primary); }
body.theme-dark .cds-jp-time { color: var(--text-secondary); }

/* ---- header and empty ---- */
body.theme-dark .cds-who-sub { color: var(--text-secondary); }
body.theme-dark .cds-avatar.initials { background: var(--brand-blue-soft); color: #7FA9FF; }
body.theme-dark .cds-empty svg { color: var(--text-tertiary); }
body.theme-dark .cds-empty-t { color: var(--text-primary); }
body.theme-dark .cds-empty-s { color: var(--text-secondary); }

/* ---- call-type icons in the log ---- */
body.theme-dark .ct-dir.inAi       { color: #B9A0FA; }
body.theme-dark .ct-dir.confIn     { color: #5EDDA0; }
body.theme-dark .ct-dir.confOut    { color: #7FA9FF; }
body.theme-dark .ct-dir.afterHours { color: #E9A23B; }