/* ============================================================
   INCOMING CALL BAR — global fixed overlay (outside .cl-app)
   ============================================================ */
/* The app is pushed down by the height of the visible slim bars (the controller
   keeps --callbar-h in sync); open panels overlay the content below. */
.cl-app { top: var(--callbar-h, 0px); transition: top .28s cubic-bezier(.22, .61, .36, 1); }
/* On first paint / Turbo navigation the offset is applied instantly, so an
   already-open bar doesn't re-slide the whole page down. */
body.callbar-anim-off .cl-app { transition: none; }

/* Fixed column holding the stack of bars, newest on top. */
.call-bar-stack {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; flex-direction: column;
}

.callbar {
  position: relative;
  animation: cbSlideIn .34s cubic-bezier(.22, .61, .36, 1);
}
/* An open panel lifts its card above the neighbouring bars it overlays. */
.callbar:has(.callbar-panel.open) { z-index: 5; }
@keyframes cbSlideIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
/* Ring → answered: the slim bar is already in place, so don't re-slide the whole
   bar; only the foldout panel animates open. */
.callbar.callbar--no-slide { animation: none; }

.callbar-slim {
  display: flex; align-items: center; gap: var(--sp-6); height: 60px; padding: 0 22px;
  background: var(--accent); color: var(--white); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .5);
}
.callbar--ringing .callbar-slim { background: var(--accent-2); }
.callbar--active .callbar-slim { background: var(--green); }

.cb-icon {
  width: 34px; height: 34px; border-radius: 6px; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, .2); color: var(--white);
}
.cb-icon svg { width: 17px; height: 17px; }
.callbar--ringing .cb-icon { animation: cbring 1s infinite; }
@keyframes cbring {
  0%, 100% { transform: rotate(0); } 20% { transform: rotate(-13deg); }
  40% { transform: rotate(11deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); }
}

.cb-av { width: 34px; height: 34px; border-radius: 6px; flex: none; display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: var(--fs-4); }
.cb-caller { display: flex; flex-direction: column; min-width: 0; }
.cb-caller .nm { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-caller .nm .co { font-weight: 400; color: rgba(255, 255, 255, .62); margin-left: 9px; }
.cb-caller a.cb-colink { color: var(--white); text-decoration: none; }
/* Name + one-site external link on a single line; the name shrinks (ellipsis),
   the icon link stays put right after it. */
.cb-caller-row { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.cb-caller-row .cb-colink { min-width: 0; }
.cb-site-link {
  flex: none; display: inline-flex; align-items: center;
  color: rgba(255, 255, 255, .62); transition: color .15s ease;
}
.cb-site-link:hover { color: var(--white); }
/* "Last call answered by …" — who picked up this company's previous call,
   shown on the ringing bar (see prototype). */
.cb-last {
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  padding-left: 18px; margin-left: var(--sp-2); border-left: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .72); font-size: var(--fs-3);
}
.cb-last .mini {
  width: 22px; height: 22px; border-radius: 4px; flex: none;
  display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: var(--fs-1);
}
.cb-last b { color: var(--white); font-weight: 600; }
.cb-spacer { flex: 1; }
.cb-expand, .cb-close {
  width: 38px; height: 38px; border: 0; border-radius: 6px; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: var(--white); cursor: pointer;
}
.cb-expand:hover, .cb-close:hover { background: rgba(255, 255, 255, .22); }
.cb-expand svg, .cb-close svg { width: 17px; height: 17px; transition: transform .3s; }
.cb-expand.open svg { transform: rotate(180deg); }

/* RTCM hold / transfer pill buttons on the active bar. */
.cb-act {
  display: inline-flex; align-items: center; gap: var(--sp-3); height: 34px; padding: 0 var(--sp-5);
  border: 0; border-radius: 8px; flex: none; cursor: pointer;
  background: rgba(255, 255, 255, .14); color: var(--white); font-size: var(--fs-3); font-weight: 600;
}
.cb-act:hover { background: rgba(255, 255, 255, .26); }
.cb-act svg { flex: none; }
/* Hang up — a red button so it reads as ending the call. */
.cb-hangup { background: var(--red); }
.cb-hangup:hover { background: var(--accent-2); }
/* Hold button: pause icon by default, play + amber fill while the call is held. */
.cb-hold__play { display: none; }
.cb-hold.on { background: var(--amber); color: var(--white); }
.cb-hold.on .cb-hold__pause { display: none; }
.cb-hold.on .cb-hold__play { display: inline; }

.cb-xfer { position: relative; flex: none; }
.cb-xfer-menu {
  position: absolute; top: calc(100% + var(--sp-4)); right: 0; z-index: 320;
  width: 240px; max-height: 320px; overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .5); padding: var(--sp-3);
}
.cb-xfer-h { padding: var(--sp-3) var(--sp-4) var(--sp-4); font-size: var(--fs-2); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.cb-xfer-opt {
  display: flex; align-items: center; gap: var(--sp-4); width: 100%; padding: var(--sp-4);
  border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left;
  font-size: var(--fs-4); font-weight: 600; color: var(--ink);
}
.cb-xfer-opt:hover { background: var(--rail); }
.cb-xfer-opt .dot { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: var(--fs-1); }
.cb-xfer-opt .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Availability dot — the colleague's current presence colour. */
.cb-xfer-opt .cb-xfer-status { flex: none; width: 8px; height: 8px; border-radius: 50%; margin-left: var(--sp-3); }
.cb-xfer-empty { padding: var(--sp-5) var(--sp-4); text-align: center; font-size: var(--fs-3); color: var(--faint); }

/* Wrap-up: the call has ended and the bar lingers for the answerer's notes.
   A calmer ink bar distinguishes it from a live (orange) call. */
.callbar--wrapup .callbar-slim { background: var(--ink); }

/* expandable panel — folds out for the answerer. Absolutely anchored right below
   its own slim bar so it overlays the content (and any lower bars) instead of
   pushing the whole stack down. */
.callbar-panel {
  position: absolute; top: 60px; left: 0; right: 0;
  background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden;
  max-height: 0; transition: max-height .36s cubic-bezier(.22, .61, .36, 1);
  box-shadow: 0 22px 40px -26px rgba(0, 0, 0, .5);
}
.callbar-panel.open { max-height: 78vh; }
/* Two full-bleed columns: the note + history on paper (left), tasks on a light
   grey well (right), split by a hairline. Each column owns its padding so the
   grey reaches the panel edges. */
.cb-panel-in {
  display: grid; grid-template-columns: 1.5fr 1fr; align-items: stretch;
  max-height: 78vh; overflow-y: auto;
}
.cb-note { padding: var(--sp-7); min-width: 0; }
.cb-context {
  padding: var(--sp-7); min-width: 0;
  background: var(--rail); border-left: 1px solid var(--line);
}
@media (max-width: 900px) {
  .cb-panel-in { grid-template-columns: 1fr; }
  .cb-context { border-left: 0; border-top: 1px solid var(--line); }
}

.cb-cust { display: flex; align-items: center; gap: 13px; margin-bottom: var(--sp-6); }
.cb-cust .av { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: 18px; }
.cb-cust h3 { margin: 0; font-size: var(--fs-7); font-weight: 800; letter-spacing: -.02em; }
.cb-cust .co { font-size: var(--fs-3); color: var(--muted); margin-top: var(--sp-1); }

.cb-col-h { display: flex; align-items: center; gap: var(--sp-4); margin: 0 0 11px; font-size: var(--fs-2); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.cb-col-h--mt { margin-top: 20px; }
.cb-col-h .n { margin-left: auto; color: var(--faint); }

.cb-note-form textarea {
  width: 100%; min-height: 72px; resize: vertical; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 11px; padding: var(--sp-5) 14px;
  font-size: var(--fs-5); line-height: 1.55; color: var(--ink);
  outline: none; background: var(--panel);
}
.cb-note-form textarea:focus { border-color: var(--accent); }
.cb-note-form .acts { display: flex; align-items: center; gap: 9px; margin-top: 11px; }
/* Save button flips like a card on a successful save: the accent front face
   rotates away to reveal a green "Saved!" back, then flips back after 2s. */
.cb-note-form .save {
  position: relative; height: 36px; min-width: 92px; padding: 0; border: 0;
  background: none; cursor: pointer; perspective: 600px;
  font-size: var(--fs-4); font-weight: 600;
}
.cb-note-form .save__inner {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .5s ease;
}
.cb-note-form .save.saved .save__inner { transform: rotateX(180deg); }
.cb-note-form .save__face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  border-radius: 9px; color: var(--white); backface-visibility: hidden;
}
.cb-note-form .save__face--front { background: var(--accent); }
.cb-note-form .save__face--back { background: var(--green); transform: rotateX(180deg); }
.cb-note-form .save:hover .save__face--front { background: var(--accent-2); }
.cb-note-form .save:disabled { cursor: default; opacity: .45; }
.cb-note-form .save:disabled:hover .save__face--front { background: var(--accent); }

/* Borderless, threaded history: each call is a flat row (direction icon + caller
   + time) with its comments indented beneath, calls split by a hairline rather
   than boxed in cards. */
.cb-recent { display: flex; flex-direction: column; }
.cb-rcall { padding: var(--sp-5) 0; }
.cb-rcall:first-child { padding-top: var(--sp-2); }
.cb-rcall + .cb-rcall { border-top: 1px solid var(--line); }
.cb-rcall .top { display: flex; align-items: center; gap: var(--sp-4); }
/* Text column beside the direction icon: caller name line + transcript headline
   stacked as a two-line unit (the headline aligns under the name). The icon is
   tall enough to sit alongside both lines. */
.cb-rcall__main { flex: 1; min-width: 0; }
.cb-rcall__nameline { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.cb-rcall .dir { width: 40px; height: 40px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--rail); color: var(--muted); }
.cb-rcall .dir svg { width: 17px; height: 17px; }
.cb-rcall .dir--in { background: var(--green-soft); color: var(--green); }
.cb-rcall .dir--out { background: var(--rail); color: var(--ink-2); }
/* caller → answerer on one line */
.cb-rcall .who { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: var(--fs-4); font-weight: 700; letter-spacing: -.01em; }
.cb-rcall .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-rcall .who svg { flex: none; color: var(--faint); }
.cb-rcall .who .ans { font-weight: 600; color: var(--muted); white-space: nowrap; }
.cb-rcall .who .miss { font-weight: 400; color: var(--red); font-size: var(--fs-3); }
.cb-rcall .when { margin-left: auto; font-size: var(--fs-2); color: var(--muted); font-family: var(--read); flex: none; }

/* AI transcript headline — the row's second line, directly under the caller
   name (like the calls list). */
.cb-rcall__headline { margin-top: var(--sp-1); font-family: var(--read); font-size: var(--fs-3); line-height: 1.45; color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* compact comment thread preview — flush left under the call row */
.cb-rcall .cmts { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); padding-left: 0; }
.cb-rcall .cmt { display: flex; gap: var(--sp-4); align-items: flex-start; }
.cb-rcall .cmt .av { width: 19px; height: 19px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: var(--fs-1); margin-top: 1px; }
.cb-rcall .cmt .tx { font-size: var(--fs-3); line-height: 1.45; color: var(--ink-2); min-width: 0; }
.cb-rcall .cmt .tx b { color: var(--ink); font-weight: 700; }
.cb-nocall { font-size: var(--fs-4); color: var(--muted); padding: var(--sp-3) var(--sp-1); }

/* Foldout right column — the company's open tasks + quick-add. */
.cb-newtask { display: flex; align-items: center; gap: 10px; padding: 7px var(--sp-4); margin-bottom: var(--sp-4); border-radius: 9px; }
.cb-newtask__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: var(--fs-4); color: var(--ink); }
.cb-newtask__input::placeholder { color: var(--faint); }
.cb-tasks { display: flex; flex-direction: column; gap: var(--sp-1); }
.cb-task { display: flex; align-items: center; gap: 10px; padding: 7px var(--sp-3); border-radius: 8px; }
.cb-task:hover { background: rgba(0, 0, 0, .03); }
.cb-task__box { width: 17px; height: 17px; border-radius: 4px; border: 1.6px solid var(--line-2); flex: none; }
button.cb-task__box { background: none; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--green); }
button.cb-task__box svg { opacity: 0; }
button.cb-task__box:hover { border-color: var(--green); }
button.cb-task__box:hover svg { opacity: 1; }
.cb-task__tx {
  flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 6px;
  padding: 3px var(--sp-3); margin: -3px 0; background: none;
  font-family: var(--read); font-size: var(--fs-4); color: var(--ink-2);
}
.cb-task__tx:hover { box-shadow: inset 0 0 0 1px var(--line); }
.cb-task__tx:focus { border-color: var(--accent); outline: none; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .callbar { animation: none; }
  .callbar--ringing .cb-icon { animation: none; }
}