/* ============================================================
   CALL TABLE — the calls component, styled wherever it is used
   (Calls page, Dashboard, Customer detail). Keyed on its own
   classes so it never depends on the page container.
   ============================================================ */
.kb-calls { width: 100%; border-collapse: collapse; }
.kb-calls thead { display: none; }
/* Date headers use the same divider treatment as the dashboard section labels
   (label · count · rule); .cl-divider inside the cell provides the styling.
   They stick to the top of the .cl-scroll viewport so the day being read stays
   visible while its calls scroll past. The containing block for a sticky cell is
   the whole table (not the header's own <tbody>), so a single day header stays
   pinned across all the per-call <tbody>s below it until the next day's header
   rides up and covers it. The paper background masks calls sliding underneath. */
.kb-calls__date-row td {
  padding: 0;
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--paper);
}
.kb-calls__date-row .cl-divider { padding: 18px 0 10px; }
.kb-call td { padding: 13px var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.kb-call td:first-child { padding-left: 0; }
/* The swipe-to-delete cell is a 0-width anchor at the row's right edge; keep it
   padding-free so the overlay it hosts can sit flush against that edge. The
   height:1px is the classic table-cell trick: a cell stretches to the row
   height, so its host child's height:100% resolves to that full row height. */
.kb-call td.kb-call__swipe-cell {
  width: 0; height: 1px; padding: 0; border: none;
}
/* Only drop the row's own divider while its comments/transcript panel is
   actually open — then the panel below supplies the block's bottom border. A
   collapsed call keeps its divider so every call stays separated. */
.kb-calls tbody:has(.kb-call__comments-row:not([hidden])) .kb-call td {
  border-bottom: none;
}
/* The last call of a section — the one right before the next day header, or the
   very last in the list — drops its divider (data row and open panel alike). */
.kb-calls tbody:last-child td,
.kb-calls tbody:has(+ tbody .kb-calls__date-row) td {
  border-bottom: none;
}

.kb-call__dir-icon {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: filter .12s;
}
/* Call-back assignee, tucked into the status icon's bottom-right corner. The
   ring lifts it clear of the coloured disc behind it. */
.kb-call__callback-badge {
  position: absolute; right: -3px; bottom: -3px;
  box-shadow: 0 0 0 2px var(--paper);
}
.kb-call__dir-icon:hover { filter: brightness(.95); }
.kb-call__dir-icon--answered { background: var(--green-soft); color: var(--green); }
.kb-call__dir-icon--live { background: var(--green-soft); color: var(--green); --pulse: var(--green); animation: dashpulse 1.8s infinite; }
.kb-call__dir-icon--missed { background: var(--red-soft); color: var(--red); }
.kb-call__dir-icon--call_back { background: var(--amber-soft); color: var(--amber); }
.kb-call__dir-icon--solved { background: var(--rail); color: var(--faint); }

/* generated neon avatar disc on each call row */
.kb-call__avatar-cell { width: 34px; padding-right: 0; }
.cl-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: var(--fs-4); flex: none; }

/*.kb-call--solved .kb-call__contact-name { color: var(--muted); }*/

.kb-call__contact-name { font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.kb-call__contact-company,
.kb-call__contact-job-title,
.kb-call__peer-name,
.kb-call__answered-by { font-family: var(--read); color: var(--muted); }
.kb-call__time { font-family: var(--read); color: var(--ink-2); font-size: 15px; }

.kb-call__comments-btn:hover { background: var(--rail); }

/* row structure + cell widths */
.kb-call { position: relative; touch-action: pan-y; }
.kb-call__direction { width: 30px; cursor: grab; position: relative; }
.kb-call__direction:active { cursor: grabbing; }
.kb-call--dragging td { opacity: .4; }
.kb-call--merge-target td { background: var(--blue-soft); }
.kb-call__dir-icon { display: grid; }
.kb-call__contact { min-width: 200px; }
.kb-call__legacy-contact { color: var(--red); }
.kb-call__unknown { color: var(--red); }
.kb-call__unknown-number { color: var(--red); }
.kb-call__tr-headline { font-family: var(--read); font-size: var(--fs-4); color: var(--muted); }
/* "No calls today" placeholder under the live anchor (see TableComponent). */
.kb-calls__empty-note { margin: 0; color: var(--muted); font-family: var(--read); padding: var(--sp-2) 0; }
.kb-call__peer-name { white-space: nowrap; }
.kb-call__forward { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-family: var(--read); }
/* Fixed-route marker sitting just behind the routed-to name on an incoming call. */
.kb-call__route { display: inline-flex; align-items: center; margin-left: var(--sp-2); color: var(--blue); vertical-align: middle; }
.kb-call__import-btn {
  display: inline-flex; align-items: center; margin-left: var(--sp-2); padding: var(--sp-1) var(--sp-2);
  color: var(--muted); border-radius: 6px; vertical-align: top; margin-top: 3px;
}
.kb-call__import-btn:hover { background: var(--rail); color: var(--ink); }
.kb-call__time { width: 64px; white-space: nowrap; text-align: right; }
.kb-call__comments-cell { width: 40px; padding-right: 0 !important; text-align: right; }

/* comments trigger button */
.kb-call__comments-btn {
  background: none; border: 0; cursor: pointer; padding: var(--sp-3); border-radius: 8px;
  color: var(--muted); display: inline-flex; align-items: center; transition: background .12s, color .12s;
}
.kb-call__comments-btn--open { color: var(--ink); }
.kb-call__comments-btn--has-summary { color: var(--accent); }
/* Solid (filled) bubble — a call with comments — reads orange. */
.kb-call--has-comments .kb-call__comments-btn { color: var(--accent); }

/* resolution dropdown */
.kb-call__resolution-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 100;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .25); padding: var(--sp-2); min-width: 170px;
}
/* Opens from the leading status cell, so anchor it to the left edge. */
.kb-call__resolution-menu--left { right: auto; left: 0; }
.kb-call__resolution-option {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: var(--sp-4) 10px; border-radius: 7px; color: var(--ink-2);
  font-size: var(--fs-4); white-space: nowrap;
}
.kb-call__resolution-option:hover { background: var(--rail); }
.kb-call__resolution-option--active { font-weight: 700; }
.kb-call__resolution-option--unsolved svg { color: var(--faint); }
.kb-call__resolution-option--call_back svg { color: var(--amber); }
.kb-call__resolution-option--solved svg { color: var(--green); }

/* "Call back → [avatar] Name" rows. The label stays fixed-width; the arrow,
   avatar and name trail after it. */
.kb-call__resolution-cb-label { flex: none; }
.kb-call__resolution-cb-arrow { color: var(--faint); }
.kb-call__resolution-cb-avatar { flex: none; }
.kb-call__resolution-cb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Many-user variant: "Call back ›" opens a sub-menu of assignees on hover. */
.kb-call__resolution-sub { position: relative; }
.kb-call__resolution-option--sub { cursor: default; }
.kb-call__resolution-sub-chevron { margin-left: auto; }
.kb-call__resolution-sub-chevron svg { color: var(--faint); }
.kb-call__resolution-submenu {
  display: none; position: absolute; top: calc(-1 * var(--sp-2)); left: 100%; z-index: 101;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .25); padding: var(--sp-2);
  min-width: 180px; max-height: 320px; overflow-y: auto;
}
.kb-call__resolution-sub:hover .kb-call__resolution-submenu { display: block; }

/* swipe-to-delete. The host fills the row height (see .kb-call__swipe-cell) and
   is a reliable containing block for the overlay on every browser, including
   WebKit/Safari, which ignores position:relative on a <tr>/<td>. */
.kb-call__swipe-host { position: relative; height: 100%; }
.kb-call__swipe-actions {
  position: absolute; top: 0; right: 0; bottom: 0; width: 0; overflow: hidden;
  transition: width .2s ease; z-index: 2;
}
.kb-call--swipe-open .kb-call__swipe-actions { width: 96px; }
.kb-call--swiping .kb-call__swipe-actions { transition: none; }
.kb-call__delete-btn {
  position: absolute; top: 0; right: 0; bottom: 0; width: 96px;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  border: 0; cursor: pointer; background: var(--red); color: var(--white);
  font-size: var(--fs-4); font-weight: 600; white-space: nowrap;
}
.kb-call__delete-btn:hover { background: var(--accent-2); }
.kb-call__restore-btn { background: var(--green); }
.kb-call__restore-btn:hover { background: var(--green); filter: brightness(0.92); }

/* pagination */
.kb-calls__pagination { display: flex; gap: var(--sp-4); margin-top: var(--sp-7); align-items: center; }

/* ============================================================
   COMMENT THREAD (expands under a call row) — pixel-perfect
   November: threaded list w/ guide line, AI transcript block.
   ============================================================ */
.kb-call__comments-row td { padding: 0; border-bottom: 1px solid var(--line); }
.kb-call__comments-panel { padding: 0; }

.cl-thread { margin: 0 0 0 30px; padding: 0px 0 var(--sp-2) 17px; position: relative; }

/* Text-selection → "Create task" popup, floating above the selection */
.sel-pop {
  position: absolute; z-index: 60; transform: translate(-50%, -100%); margin-top: -9px;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--ink); color: var(--white); border: 0; border-radius: 9px;
  padding: 7px var(--sp-5); font-size: var(--fs-3); font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5);
}
.sel-pop[hidden] { display: none; }
.sel-pop svg { width: 14px; height: 14px; }
.sel-pop::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ink);
}
.sel-pop:hover { background: var(--accent); }
.sel-pop:hover::after { border-top-color: var(--accent); }

/* Timeline: a single continuous vertical rule runs through the avatar centres
   (like the activity feed), no branch ticks — the discs sit above it. Each item
   draws its own full-height segment so stacked items form one unbroken line. */
.cl-cmt { display: flex; gap: 18px; padding: 0 0 var(--sp-4) 0; position: relative; }
.cl-cmt::before { content: ""; position: absolute; left: 12.5px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.cl-cmt .av, .cl-cmt .cl-cmt__av {
  position: relative; z-index: 1;
  width: 22px; height: 22px; border-radius: 50% !important; display: grid; place-items: center;
  color: var(--white); font-weight: 700; font-size: 10px; flex: none; margin-top: -1px; margin-left: 1.5px;
}
.cl-cmt .bd { flex: 1; min-width: 0; }
/* Marked-done comment: a green check leads the body text. */
.cl-cmt--done .bd { display: flex; align-items: flex-start; gap: var(--sp-3); }
.cl-cmt--done .bd .kb-call-comment__md { flex: 1; min-width: 0; }
.cl-cmt__done { flex: none; color: var(--green); margin-top: 1px; }
.cl-cmt .bd .top { display: flex; align-items: baseline; gap: var(--sp-4); margin-top: -1px; }
.cl-cmt .bd b { font-size: var(--fs-4); color: var(--ink); }

/* Timestamp is hidden — kept in the markup (avatar title still carries context)
   so it can be re-enabled without touching the component. */
.cl-cmt__time { display: none; }

/* Compact flagged view in the list: drop the timeline line — a lone flagged
   comment needs no thread — its avatar already centres on the caller-avatar
   column at the thread's indent. */
.cl-flagged .cl-cmt::before { display: none; }

/* Swipe-to-reveal action strip (touch). Sits inside the comment's bottom
   padding so it aligns with the visible bubble, not the gap below it. Each
   action carries its own colour; the active flag/highlight reads brighter. */
.cl-cmt .swipe-actions { top: 0; bottom: var(--sp-4); border-radius: 8px; }
.cl-cmt .swipe-actions__btn { color: var(--white); }
.cl-cmt .swipe-actions__btn--edit { background: var(--ink-2); }
.cl-cmt .swipe-actions__btn--flag { background: var(--amber); }
.cl-cmt .swipe-actions__btn--highlight { background: var(--lime); color: var(--ink); }
.cl-cmt .swipe-actions__btn--delete { background: var(--red); }
.cl-cmt .swipe-actions__btn--on { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }

/* rendered markdown body — no author line above it now, so it sits up on the
   avatar's line */
.cl-cmt .bd .kb-call-comment__md { margin: 0; font-family: var(--read); font-size: var(--fs-4); line-height: 1.5; color: var(--ink-2); }
.cl-cmt .bd .kb-call-comment__md > *:first-child { margin-top: 0; }
.cl-cmt .bd .kb-call-comment__md > *:last-child { margin-bottom: 0; }
.cl-cmt .bd .kb-call-comment__md p { margin: 0 0 var(--sp-3); }
/* Highlighted comment — slightly bolder text with a 2px lime underline. */
.cl-cmt--highlight .bd .kb-call-comment__md {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-decoration-thickness: 3px;
}
.cl-cmt .bd .kb-call-comment__md ul, .cl-cmt .bd .kb-call-comment__md ol { margin: var(--sp-2) 0; padding-left: 20px; }
.cl-cmt .bd .kb-call-comment__md a { text-decoration: underline; }
.cl-cmt .bd .kb-call-comment__md code { font-family: ui-monospace, monospace; font-size: .92em; background: var(--rail); padding: 1px var(--sp-2); border-radius: 4px; }
.kb-md-task { display: flex; align-items: flex-start; gap: 7px; margin: var(--sp-1) 0; }
.kb-md-task__box { margin-top: .2em; width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
.kb-md-task__label { flex: 1; }

/* AI transcript (Sipgate CI) */
.cl-cmt-ai .av.ai-av { width: 22px; height: 22px; border-radius: 5px !important; background: var(--lime); color: var(--ink); margin-top: -2px; }
.cl-cmt-ai .av.ai-av svg { width: 15px; height: 15px; }
.cl-cmt-ai .bd .ai-hl { font-weight: 700; line-height: 1.18; color: var(--ink); margin: 0 0 0; letter-spacing: -.01em; }
.cl-cmt-ai .bd .ai-topics { margin: var(--sp-5) 0 var(--sp-3) 0; }
.cl-cmt-ai .bd .ai-topics span { font-family: var(--read); border-radius: 999px; background: var(--lime); color: var(--ink); padding: var(--sp-1) 7px; text-transform: uppercase; font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em; }
.cl-cmt-ai .bd .ai-sum { font-family: var(--read); font-size: var(--fs-4); line-height: 1.6; color: var(--ink-2); margin-top: -1px; max-width: 560px; }
/* Owner-only notice: this transcript is pending their approval, hidden from others. */
.ai-pending {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3); padding: var(--sp-1) var(--sp-3); border-radius: 6px;
  background: var(--amber-soft); color: var(--amber);
  font-family: var(--sans); font-size: var(--fs-2); font-weight: 600;
}
.ai-toggle {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: var(--fs-3); font-weight: 700;
  color: var(--accent); cursor: pointer; background: none; border: 0; padding: 7px 0 var(--sp-1); list-style: none;
}
.ai-toggle::-webkit-details-marker { display: none; }
.ai-toggle svg { width: 14px; height: 14px; transition: transform .25s; }
details[open] > .ai-toggle svg { transform: rotate(180deg); }
.ai-toggle .when-open { display: none; }
details[open] > .ai-toggle .when-closed { display: none; }
details[open] > .ai-toggle .when-open { display: inline; }
.ai-meta { font-family: var(--sans); font-size: var(--fs-2); font-weight: 600; color: var(--faint); letter-spacing: .02em; }
.ai-tl { margin-top: var(--sp-5); }
.ai-row { display: flex; gap: 13px; position: relative; padding: 0 0 13px 10px; border-left: 1px solid var(--line); margin-left: var(--sp-2); }
.ai-row:last-child { border-left-color: transparent; padding-bottom: var(--sp-1); }
.ai-row::before { content: ""; position: absolute; left: -4.5px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.ai-row.cust::before { background: var(--blue); }
.ai-row.agent::before { background: var(--red); }
.ai-row .tm { flex: none; width: 34px; font-size: var(--fs-2); color: var(--faint); font-variant-numeric: tabular-nums; padding-top: var(--sp-1); display: none; }
.ai-row .ct { font-family: var(--read); font-size: var(--fs-4); line-height: 1.5; color: var(--ink-2); margin-top: -3px; }
.ai-row .ct .sp { font-family: var(--sans); font-weight: 700; font-size: var(--fs-2); color: var(--ink); text-transform: uppercase; letter-spacing: .03em; margin-right: 7px; }
.cl-tr-badge { display: inline-block; border: 0; cursor: pointer; font-family: inherit; font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--lime); padding: var(--sp-1) 7px; border-radius: 999px; margin-left: 9px; position: relative; top: -1px; }
.cl-tr-badge:hover { background: var(--lime); filter: brightness(.95); }
.cl-tr-badge__icon { display: none; }

/* AI summary headline — the key line, shown before the topics; normal text
   weight so it reads ahead of the muted topics. */
.cl-tr-headline { font-size: var(--fs-3); color: var(--muted); font-weight: 300; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
/*.kb-call:hover .cl-tr-headline { display: inline; }*/

/* AI topics — plain small gray text next to the transcript badge, no chrome. */
.cl-tr-topics { margin-left: var(--sp-4); color: var(--muted); }
/*.kb-call:hover .cl-tr-topics { display: inline; }
.kb-call:hover .cl-tr-badge { display: inline-block; }*/

/* add-comment composer */
.cl-addcmt { display: flex; align-items: center; gap: 10px; padding: 7px 0 var(--sp-2); position: relative; margin-bottom: 14px; }
/* Timeline rule continues up from the composer avatar into the last comment. */
.cl-addcmt::before { content: ""; position: absolute; left: 12.5px; top: 0; height: 20px; width: 1px; background: var(--line); }
.cl-addcmt .cl-addcmt__av { position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50% !important; flex: none; }
.cl-addcmt__form { flex: 1; display: flex; }
.cl-addcmt__input {
  flex: 1; font-family: var(--read); font-size: var(--fs-4); line-height: 1.4; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px var(--sp-5); outline: none;
  resize: none; overflow-y: auto; max-height: 120px;
}
.cl-addcmt__input:focus { border-color: var(--accent); }

/* editing an existing comment (call_comments/edit) — mirror the composer input */
.kb-call-comment-form { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-1); margin-bottom: var(--sp-4); }
.kb-call-comment-form__input {
  width: 100%; box-sizing: border-box;
  font-family: var(--read); font-size: var(--fs-4); line-height: 1.5; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px var(--sp-5); outline: none; resize: vertical; min-height: 76px;
}
.kb-call-comment-form__input:focus { border-color: var(--accent); }
.kb-call-comment-form__actions { display: flex; gap: var(--sp-3); }

/* comment context menu (right-click edit/delete on own comments) */
.kb-bubble-menu {
  position: absolute; z-index: 50; background: var(--white); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .25); padding: var(--sp-2); min-width: 132px;
}
.kb-bubble-menu form { margin: 0; }
.kb-bubble-menu__item {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%;
  padding: 7px 10px; border-radius: 6px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-4); color: var(--ink-2); text-align: left; text-decoration: none;
}
.kb-bubble-menu__item:hover { background: var(--rail); }
.kb-bubble-menu__item--danger { color: var(--red); }
/* Active toggle (e.g. the call-back flag) — coloured to its meaning. */
.kb-bubble-menu__item--on { color: var(--blue); }