/* ---- Disposition chips (light + dark) — neutral chip like duration, colored dot only ---- */
.cl-disp-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border:1px solid #E4E7EC;border-radius:6px;background:#F9FAFB;color:#344054;font:500 12px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.cl-disp-dot{width:6px;height:6px;border-radius:999px;background:#98A2B3;flex:0 0 6px}
.cl-disp-hot .cl-disp-dot{background:#F04438}
.cl-disp-demo .cl-disp-dot{background:#12B76A}
.cl-disp-renew .cl-disp-dot{background:#2E90FA}
.cl-disp-support .cl-disp-dot{background:#667085}
.cl-disp-mem .cl-disp-dot{background:#06AED4}
.cl-disp-reactivate .cl-disp-dot{background:#7A5AF8}
.cl-disp-survey .cl-disp-dot{background:#15B79E}
.cl-disp-after .cl-disp-dot{background:#F79009}
.cl-disp-retry .cl-disp-dot{background:#EF6820}
.cl-disp-order .cl-disp-dot{background:#16B364}
.cl-disp-noans .cl-disp-dot{background:#D92D20}
.cl-disp-vm .cl-disp-dot{background:#9E77ED}
.cl-disp-callback .cl-disp-dot{background:#2E90FA}
.cl-disp-follow .cl-disp-dot{background:#7A5AF8}
.cl-disp-default .cl-disp-dot{background:#98A2B3}

/* Dark mode: neutral chip matches duration chip */
body.theme-dark .cl-disp-chip{background:#23262C !important;border-color:#2F333A !important;color:#D4D4D8 !important}
body.theme-dark table.ct-table[data-table="calllogs"] tbody td .cl-disp-chip{background:#27272A !important;border-color:#3F3F46 !important;color:#D4D4D8 !important}

/* ---- Play button on row hover ----
   Restored. It was hidden with display:none !important and its styles left
   behind under a -legacy name, so re-enabling it needed the reveal rule
   rewriting — only the resting state had survived.

   Same shape and behaviour as .jc-quick-btn in Contacts and the two campaign
   tables: invisible at rest, slides in on row hover, and stays visible while
   the row is actually playing so you can find the thing making noise. */
.cl-play-btn{display:inline-grid;place-items:center;flex:0 0 auto;width:26px;height:26px;
  margin-left:8px;padding:0;border:1px solid #E4E7EC;background:#FFFFFF;border-radius:8px;
  color:#475467;cursor:pointer;opacity:0;pointer-events:none;
  transform:translateX(-4px) scale(.92);vertical-align:middle;position:relative;z-index:3;
  transition:opacity .15s ease,transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.cl-play-btn svg{width:11px;height:11px;display:block;transform:translateX(.5px)}
.ct-table tbody tr:hover .cl-play-btn,
.cv-customer-cell:focus-within .cl-play-btn,
.cl-play-btn.is-active{opacity:1;pointer-events:auto;transform:none}
.cl-play-btn:hover{background:#EFF4FF;border-color:#D1E0FF;color:#004CE6}
.cl-play-btn.is-active{background:#EFF4FF;border-color:#B2DDFF;color:#004CE6}

tr.ct-row-in:hover .cl-play-btn,.cl-play-btn:focus-visible,.cl-play-btn.is-active{pointer-events:auto !important}
.cl-play-btn svg{width:11px;height:11px;display:block;transform:translateX(.5px)}
tr.ct-row-in:hover .cl-play-btn,.cl-play-btn:focus-visible{opacity:1;transform:none}
.cl-play-btn:hover{background:#EFF8FF;border-color:#B2DDFF;color:#004CE6;box-shadow:none}
.cl-play-btn.is-active{opacity:1;transform:none;background:#EFF8FF;border-color:#B2DDFF;color:#004CE6}
.cl-play-btn.is-active::after{content:"";position:absolute;inset:-3px;border-radius:11px;border:2px solid rgba(0,76,230,.30);pointer-events:none;animation:clPlayPulse 1.8s ease-out infinite}
@keyframes clPlayPulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

body.theme-dark .cl-play-btn{background:#1F2023;border-color:#2F333A;color:#D1D5DB}
body.theme-dark .cl-play-btn:hover{background:rgba(25,106,255,.16);border-color:rgba(25,106,255,.45);color:#93C5FD;box-shadow:none}
body.theme-dark .cl-play-btn.is-active{background:rgba(25,106,255,.18);border-color:rgba(25,106,255,.50);color:#93C5FD}
body.theme-dark .cl-play-btn.is-active::after{border-color:rgba(25,106,255,.40)}

/* ---- Player widget ---- */
/* Anchored to the body content area, not the viewport: --clpl-cx and
   --clpl-maxw are set from .main's box by call-player.js, so the player
   sits over the table it belongs to rather than straddling the sidebar.
   Falls back to viewport centring if the script has not run. */
.cl-player{container-type:inline-size;container-name:clpl;position:fixed;left:var(--clpl-cx,50%);bottom:24px;transform:translate(-50%,16px);width:min(820px,var(--clpl-maxw,calc(100vw - 48px)));z-index:9200;background:#0F1115;color:#F4F4F5;border-radius:14px;box-shadow:0 24px 60px -12px rgba(0,0,0,.55),0 8px 24px -8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);font-family:'Inter',sans-serif;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s cubic-bezier(.2,.7,.2,1);will-change:transform,opacity;display:flex;flex-direction:column-reverse}
.cl-player.is-open{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.cl-player.is-dragging{transition:none;cursor:grabbing}

.cl-pl-main{display:flex;align-items:center;gap:8px;padding:10px 12px 10px 8px;min-height:54px}

.cl-pl-grip{display:inline-grid;place-items:center;width:18px;height:34px;color:#52525B;cursor:grab;flex:0 0 auto;border-radius:6px;transition:color .15s ease,background .15s ease}
.cl-pl-grip:hover{color:#A1A1AA;background:rgba(255,255,255,.04)}
.cl-pl-grip:active{cursor:grabbing}

.cl-pl-meta{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:0;max-width:180px;padding-right:10px;border-right:1px solid rgba(255,255,255,.08);margin-right:2px}
.cl-pl-ava{flex:0 0 auto;width:30px;height:30px;border-radius:999px;display:inline-grid;place-items:center;font:600 11px/1 'Inter',sans-serif;letter-spacing:.02em;color:#FFFFFF;background:#2563EB;text-transform:uppercase}
.cl-pl-meta-text{min-width:0;display:flex;flex-direction:column;gap:1px}
.cl-pl-meta-name{font:600 12.5px/1.2 'Inter',sans-serif;color:#F4F4F5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-pl-meta-sub{font:400 11px/1.25 'Inter',sans-serif;color:#9CA3AF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}

.cl-pl-skip{appearance:none;background:transparent;border:0;width:32px;height:32px;border-radius:999px;color:#D4D4D8;cursor:pointer;display:inline-grid;place-items:center;flex:0 0 auto;position:relative;transition:background .15s ease,color .15s ease}
.cl-pl-skip:hover{background:rgba(255,255,255,.08);color:#FFFFFF}
/* 22px, not 20: at 20 the ring's clear interior is ~12.7px and the numeral
   renders wider than that, so the arc cut straight through the digits. */
.cl-pl-skip svg{width:22px;height:22px;display:block}
.cl-pl-skip .cl-pl-skip-n{position:absolute;inset:0;display:grid;place-items:center;font:700 7.5px/1 'Inter',system-ui,sans-serif;color:inherit;letter-spacing:-.02em;pointer-events:none;font-variant-numeric:tabular-nums}

.cl-pl-play{appearance:none;border:0;width:38px;height:38px;border-radius:999px;background:#FFFFFF;color:#0F1115;cursor:pointer;display:inline-grid;place-items:center;flex:0 0 auto;transition:transform .12s ease,background .15s ease,box-shadow .15s ease;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.cl-pl-play:hover{transform:scale(1.06);background:#F4F4F5}
.cl-pl-play:active{transform:scale(.96)}
.cl-pl-play svg{width:16px;height:16px}
.cl-pl-play .cl-pl-play-icon{margin-left:2px}
.cl-pl-play.is-playing .cl-pl-play-icon{display:none}
.cl-pl-play:not(.is-playing) .cl-pl-pause-icon{display:none}

.cl-pl-times{font:500 12px/1 'Inter',sans-serif;color:#D4D4D8;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;min-width:68px;justify-content:flex-end}
.cl-pl-times .cl-pl-cur{color:#FFFFFF;font-weight:600}
.cl-pl-times .cl-pl-sep{color:#52525B}
.cl-pl-times .cl-pl-tot{color:#9CA3AF}

.cl-pl-wave-wrap{flex:1 1 0;display:flex;align-items:center;height:34px;position:relative;cursor:pointer;padding:0 4px;min-width:90px}
.cl-pl-wave{display:flex;align-items:center;gap:1.5px;width:100%;min-width:0;height:100%;position:relative;overflow:hidden}
.cl-pl-wave-bar{flex:1 1 0;background:#71717A;border-radius:2px;min-width:1.5px;min-height:4px;transition:background .12s ease,transform .12s ease}
.cl-pl-wave-bar.played{background:#FFFFFF}
.cl-pl-wave-bar.current{background:#FFFFFF;transform:scaleY(1.15)}
.cl-pl-wave-wrap:hover .cl-pl-wave-bar:not(.played){background:#9CA3AF}
.cl-pl-wave-cursor{position:absolute;top:50%;width:2px;height:24px;background:#FFFFFF;border-radius:1px;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 8px rgba(255,255,255,.5);opacity:0;transition:opacity .15s ease}
.cl-pl-wave-wrap:hover .cl-pl-wave-cursor{opacity:.4}

.cl-pl-tip{position:absolute;bottom:calc(100% + 6px);transform:translateX(-50%);background:#1F2023;color:#F4F4F5;font:500 11px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums;padding:4px 7px;border-radius:5px;pointer-events:none;opacity:0;transition:opacity .12s ease;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.4);z-index:9300}
.cl-pl-wave-wrap.is-hover .cl-pl-tip{opacity:1}

.cl-pl-speed-wrap{position:relative;flex:0 0 auto}
.cl-pl-speed{appearance:none;background:transparent;border:0;height:28px;min-width:42px;padding:0 8px;border-radius:6px;color:#D4D4D8;cursor:pointer;font:600 12px/1 'Inter',sans-serif;font-variant-numeric:tabular-nums;transition:background .15s ease,color .15s ease}
.cl-pl-speed:hover,.cl-pl-speed.is-open{background:rgba(255,255,255,.08);color:#FFFFFF}
.cl-pl-speed-menu{position:absolute;bottom:calc(100% + 8px);right:0;background:#18181B;border:1px solid #27272A;border-radius:8px;padding:4px;box-shadow:0 12px 32px rgba(0,0,0,.5);display:none;flex-direction:column;gap:2px;min-width:64px;z-index:9300}
.cl-pl-speed-wrap.is-open .cl-pl-speed-menu{display:flex}
.cl-pl-speed-menu button{appearance:none;background:transparent;border:0;text-align:left;padding:6px 10px;border-radius:5px;color:#D4D4D8;cursor:pointer;font:500 12px/1.1 'Inter',sans-serif;font-variant-numeric:tabular-nums;transition:background .12s ease,color .12s ease}
.cl-pl-speed-menu button:hover{background:rgba(255,255,255,.08);color:#FFFFFF}
.cl-pl-speed-menu button.active{background:rgba(0,76,230,.18);color:#93C5FD}

.cl-pl-vol-wrap{position:relative;flex:0 0 auto}
.cl-pl-vol{appearance:none;background:transparent;border:0;width:30px;height:30px;border-radius:999px;color:#D4D4D8;cursor:pointer;display:inline-grid;place-items:center;transition:background .15s ease,color .15s ease}
.cl-pl-vol:hover{background:rgba(255,255,255,.08);color:#FFFFFF}
.cl-pl-vol svg{width:16px;height:16px}
.cl-pl-vol-popover{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#18181B;border:1px solid #27272A;border-radius:8px;padding:10px 8px;box-shadow:0 12px 32px rgba(0,0,0,.5);display:none;z-index:9300}
.cl-pl-vol-wrap:hover .cl-pl-vol-popover,.cl-pl-vol-wrap:focus-within .cl-pl-vol-popover{display:block}
.cl-pl-vol-slider{appearance:none;-webkit-appearance:none;writing-mode:vertical-lr;direction:rtl;width:4px;height:80px;background:#3F3F46;border-radius:2px;outline:none;cursor:pointer}
.cl-pl-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#FFFFFF;border:0;cursor:pointer}
.cl-pl-vol-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#FFFFFF;border:0;cursor:pointer}

.cl-pl-divider{flex:0 0 auto;width:1px;height:20px;background:rgba(255,255,255,.08);margin:0 2px}

.cl-pl-trans{appearance:none;background:transparent;border:0;height:30px;padding:0 8px;border-radius:6px;color:#D4D4D8;cursor:pointer;font:500 12px/1 'Inter',sans-serif;display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;transition:background .15s ease,color .15s ease;white-space:nowrap}
.cl-pl-trans:hover,.cl-pl-trans.is-on{background:rgba(255,255,255,.08);color:#FFFFFF}
.cl-pl-trans.is-on{color:#93C5FD}
.cl-pl-trans svg{width:14px;height:14px;flex:0 0 auto}

.cl-pl-icon-btn{appearance:none;background:transparent;border:0;width:28px;height:28px;border-radius:999px;color:#9CA3AF;cursor:pointer;display:inline-grid;place-items:center;flex:0 0 auto;transition:background .15s ease,color .15s ease}
.cl-pl-icon-btn:hover{background:rgba(255,255,255,.08);color:#FFFFFF}
.cl-pl-icon-btn svg{width:16px;height:16px}

/* ---- Transcript drawer (renders ABOVE controls via column-reverse on .cl-player) ---- */
.cl-pl-transcript{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.2,.7,.2,1);border-bottom:1px solid transparent}
.cl-player.show-trans .cl-pl-transcript{max-height:min(260px,42vh);border-bottom-color:rgba(255,255,255,.08)}
.cl-pl-transcript-inner{padding:14px 18px 12px;max-height:min(260px,42vh);overflow-y:auto;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:#3F3F46 transparent}
.cl-pl-transcript-inner::-webkit-scrollbar{width:6px}
.cl-pl-transcript-inner::-webkit-scrollbar-thumb{background:#3F3F46;border-radius:3px}
.cl-pl-trow{display:flex;gap:10px;align-items:flex-start;padding:6px 8px;border-radius:6px;cursor:pointer;transition:background .15s ease}
.cl-pl-trow:hover{background:rgba(255,255,255,.04)}
.cl-pl-trow.active{background:rgba(0,76,230,.16)}
.cl-pl-trow.active .cl-pl-tspeak{color:#FFFFFF}
.cl-pl-trow.active .cl-pl-ttxt{color:#F4F4F5}
.cl-pl-tts{flex:0 0 38px;font:500 11px/1.4 'Inter',sans-serif;font-variant-numeric:tabular-nums;color:#71717A;padding-top:1px}
.cl-pl-tspeak{font:600 11px/1.4 'Inter',sans-serif;color:#A1A1AA;flex:0 0 auto;text-transform:uppercase;letter-spacing:.04em}
.cl-pl-tspeak.agent{color:#93C5FD}
.cl-pl-tspeak.customer{color:#FCD34D}
.cl-pl-ttxt{flex:1 1 auto;font:400 12.5px/1.5 'Inter',sans-serif;color:#D4D4D8}

/* ---- Status pill (live waveform anim while playing) ---- */
.cl-player.is-playing .cl-pl-wave-bar.current{animation:clPlBarPulse 1s ease-in-out infinite}
@keyframes clPlBarPulse{0%,100%{transform:scaleY(1.15)}50%{transform:scaleY(.8)}}

/* ── Player at narrow widths ──────────────────────────────────────────────────
   The bar is one row of fixed-width controls, so past a point they collide
   rather than wrap. Two things matter about where that point is:

   The player is sized to .main, not to the window — width:min(820px,
   --clpl-maxw). With the sidebar open the content area is ~250px narrower
   than the viewport, so keying this to @media meant the bar overflowed at a
   1054px viewport with every breakpoint still unfired (measured: it starts
   overflowing at a player width of 620px). @container asks the player how
   wide *it* is, which is the number that decides whether things fit.

   Order is how little each is missed: download, then speed, then volume and
   the avatar, then the caller block and the Transcript label. Transport,
   position and the waveform never go — without those it is not a player. */
@container clpl (max-width:780px){
  .cl-pl-icon-btn#clPlDownload{display:none}
}
@container clpl (max-width:700px){
  .cl-pl-speed-wrap{display:none}
  .cl-pl-meta-sub{display:none}
  .cl-pl-meta{max-width:132px}
}
@container clpl (max-width:620px){
  .cl-pl-vol-wrap{display:none}
  .cl-pl-ava{display:none}
}
@container clpl (max-width:540px){
  .cl-pl-meta{display:none}
  .cl-pl-trans span{display:none}
  .cl-pl-divider{display:none}
  .cl-pl-times{min-width:60px}
}
@container clpl (max-width:420px){
  .cl-pl-main{gap:5px;padding:8px 8px 8px 4px;min-height:48px}
  .cl-pl-skip{width:28px;height:28px}
  .cl-pl-skip svg{width:19px;height:19px}
  .cl-pl-skip .cl-pl-skip-n{font-size:6.5px}
  .cl-pl-play{width:34px;height:34px}
  .cl-pl-grip{display:none}
  .cl-pl-transcript-inner{padding:12px 12px 10px}
  .cl-pl-tts{flex:0 0 34px}
  /* Last things to give: the waveform's floor and the tabular clock. Below
     this the bar is transport + position + wave + Transcript and nothing else
     is left to drop, so it stops shrinking rather than overflowing. */
  .cl-pl-wave-wrap{min-width:60px;padding:0 2px}
  .cl-pl-times{min-width:50px;font-size:11px}
  .cl-pl-trans{padding:0 6px}
}

/* Browsers without container queries keep the old viewport-keyed shedding.
   The player is never wider than the viewport, so these only ever fire late,
   never early. */
@supports not (container-type:inline-size){
  @media (max-width:900px){ .cl-pl-icon-btn#clPlDownload{display:none} }
  @media (max-width:760px){ .cl-pl-speed-wrap{display:none} .cl-pl-meta-sub{display:none} }
  @media (max-width:620px){ .cl-pl-vol-wrap{display:none} .cl-pl-ava{display:none} }
  @media (max-width:520px){
    .cl-pl-meta{display:none}
    .cl-pl-trans span{display:none}
    .cl-pl-divider{display:none}
    .cl-pl-skip{width:28px;height:28px}
    .cl-pl-skip svg{width:19px;height:19px}
  }
}

/* Short windows: sit closer to the edge so the transcript still fits. */
@media (max-height:620px){ .cl-player{bottom:12px} }

/* ---- Light-mode handling: keep player dark; just adjust shadows ---- */
body:not(.theme-dark) .cl-player{box-shadow:0 24px 60px -12px rgba(15,17,21,.4),0 8px 24px -8px rgba(15,17,21,.25)}