/* ==========================================================================
   Experience Studio — hero omnichannel journey, device frames, conversation surface, studio shell and channels.
   Uses only the tokens from style.css (single light theme).
   ========================================================================== */
:root { --dev-frame: var(--footer-bg); --call-green: #027A38; }

.is-spin { animation: exp-spin 1s linear infinite; }
@keyframes exp-spin { to { transform: rotate(360deg); } }

/* ── Hero omnichannel hub ─────────────────────────────────────────────────
   One diagram: the customer in the middle, six channel photos around her, and a small bubble that opens on the diagram itself. */
.jr.card { font-size: 14px; padding: 0; gap: 10px; background: transparent; border: 0; box-shadow: none; }
.jr .badge { padding: .25rem .65rem; font-size: 12px; }               /* compact pills inside the small bubble */
@media (max-width: 359.98px) { .jr-pop-head { gap: 6px; padding: 6px 6px 6px 8px; } .jr-pop-img { width: 30px; height: 30px; } .jr-tag { display: none; } }   /* the tag left ~46px for the name; the ring colour and legend already say agent vs self-service */
.jr-canvas { position: relative; height: 580px; overflow: hidden; background: radial-gradient(circle at 50% 50%, var(--primary-transparent), transparent 62%), var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }

/* wires: dashed circuit lines from the customer to each channel; green = a person answers, accent = self-service */
.jr-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.jr-line { fill: none; stroke: rgba(var(--primary-rgb), .5); stroke-width: 1.25; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; animation: jr-flow 1.6s linear infinite; }
.jr-line.is-agent { stroke: var(--tint-success-fg); opacity: .7; }
.jr-line.is-faint { stroke: var(--border-strong); stroke-dasharray: 2 4; opacity: .7; animation: none; }
.jr-line.is-done { stroke-dasharray: none; opacity: .55; animation: none; }
.jr-line.is-next, .jr-line.is-active { stroke-width: 2.2; opacity: 1; }
.jr-line.is-active { animation-duration: .7s; }
@keyframes jr-flow { to { stroke-dashoffset: -18; } }

/* customer core */
.jr-center { position: absolute; left: 50%; top: 50%; z-index: 1; width: 0; height: 0; }
.jr-core { position: absolute; left: 0; top: 0; width: 84px; height: 84px; transform: translate(-50%, -50%); object-fit: cover; border: 4px solid var(--bg-surface); border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .6), 0 10px 28px rgba(var(--primary-rgb), .3); }
.jr-ring { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border: 1.5px dashed rgba(var(--primary-rgb), .5); border-radius: 50%; animation: jr-spin 26s linear infinite; }
.jr-ring.is-b { width: 154px; height: 154px; opacity: .6; animation-direction: reverse; animation-duration: 38s; }
@keyframes jr-spin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.jr-clabel { position: absolute; left: 0; top: 52px; transform: translateX(-50%); padding: 1px 9px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--text-title); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; }
.jr-avatar { position: absolute; z-index: 1; width: 34px; height: 34px; transform: translate(-50%, -50%); object-fit: cover; border: 2px solid var(--bg-surface); border-radius: 50%; box-shadow: var(--shadow-sm); }

/* channel nodes: a photo or brand image in a ring (green = live agent, accent = self-service) */
.jr-node { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; transform: translate(-50%, -50%); background: none; border: 0; transition: opacity .25s; }
.jr-node-img { position: relative; width: 62px; height: 62px; border: 3px solid var(--bg-surface); border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .6), var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.jr-node.is-agent .jr-node-img { box-shadow: 0 0 0 2px var(--tint-success-fg), var(--shadow-sm); }
.jr-node-img > img { width: 100%; height: 100%; display: block; object-fit: cover; background: var(--bg-subtle); border-radius: 50%; }
.jr-node:hover .jr-node-img, .jr-node:focus-visible .jr-node-img { transform: scale(1.1); }
.jr-node-badge, .jr-node-ck { position: absolute; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; border: 2px solid var(--bg-surface); border-radius: 50%; }
.jr-node-badge { right: -5px; bottom: -3px; background: var(--color-primary-aa); }
.jr-node.is-agent .jr-node-badge { background: var(--tint-success-fg); }
.jr-node-ck { left: -5px; top: -3px; display: none; background: var(--tint-success-fg); }
.jr-node.is-done .jr-node-ck { display: flex; }
.jr-node-lbl { padding: 1px 8px; font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; color: var(--text-title); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 4px; }
.jr-node.is-next .jr-node-img { animation: si-hint 1.4s ease-out infinite; }
.jr-node.is-open { z-index: 6; }
.jr-node.is-open .jr-node-img { transform: scale(1.12); box-shadow: 0 0 0 3px var(--color-primary-aa), var(--shadow-md); }
.jr-node.is-agent.is-open .jr-node-img { box-shadow: 0 0 0 3px var(--tint-success-fg), var(--shadow-md); }
.jr-token { position: absolute; z-index: 4; width: 30px; height: 30px; transform: translate(-50%, -50%); object-fit: cover; pointer-events: none; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.jr-token[hidden] { display: none; }
.jr-legend { position: absolute; left: 12px; bottom: 8px; z-index: 2; display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--text-nav); }
.jr-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }
.jr-legend .is-agent { background: var(--tint-success-fg); }
.jr-legend .is-self { background: var(--color-primary-aa); }
.jr-tools { position: absolute; top: 10px; right: 10px; z-index: 7; display: flex; gap: 6px; }
.jr-ibtn { width: 38px; height: 38px; font-size: 17px; }
.jr-ibtn.is-hint { border-color: var(--color-primary-aa); }
@media (max-width: 575.98px) {
  .jr-canvas { height: 570px; }
  .jr-pop { height: 376px; }
  .jr-node-img { width: 48px; height: 48px; }
  .jr-node-badge, .jr-node-ck { width: 18px; height: 18px; font-size: 10px; }
  .jr-node-lbl { padding: 1px 6px; font-size: 10px; }
  .jr-core { width: 68px; height: 68px; }
  .jr-ring { width: 98px; height: 98px; } .jr-ring.is-b { width: 124px; height: 124px; }
  .jr-clabel { top: 44px; font-size: 10px; }
  .jr-avatar { width: 28px; height: 28px; }
}

/* the bubble: opens on the diagram, stays out of the way of the outer channels */
.jr-pop { position: absolute; left: 50%; top: 51.5%; z-index: 5; width: min(340px, calc(100% - 20px)); height: 360px; display: flex; flex-direction: column; overflow: hidden; transform: translate(-50%, -50%); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: 0 18px 50px rgba(37, 35, 93, .24); animation: jr-pop-in .34s cubic-bezier(.2, .8, .2, 1) both; }
.jr-pop[hidden] { display: none; }
.jr-pop.is-auto { pointer-events: none; }                 /* Watch: a tap goes to the diagram, which takes over */
@keyframes jr-pop-in { from { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, 0)) scale(.4); } to { opacity: 1; transform: translate(-50%, -50%); } }
.jr-pop-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.jr-pop-img { flex: none; width: 36px; height: 36px; object-fit: cover; border-radius: 50%; }
.jr-pop-who { min-width: 0; flex: 1; }
.jr-pop-who strong { display: block; overflow: hidden; font-size: 14px; line-height: 1.25; color: var(--text-title); text-overflow: ellipsis; white-space: nowrap; }
.jr-pop-who small { display: block; overflow: hidden; font-size: 12px; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.jr-tag { flex: none; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 10px; }
.jr-tag[hidden] { display: none; }
.jr-tag.is-agent { color: var(--tint-success-fg); background: var(--tint-success-bg); }
.jr-tag.is-self { color: var(--tint-info-fg); background: var(--tint-info-bg); }
.jr-x { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-nav); background: none; border: 0; border-radius: 50%; transition: background var(--t-fast); }
.jr-x:hover { background: var(--bg-subtle); }
.jr-pop-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: flex-end; padding: 22px 12px 10px; background: linear-gradient(to top, var(--bg-surface) 55%, transparent); }
.jr-pop-foot[hidden] { display: none; }
.jr-screen { flex: 1; min-height: 0; container-type: inline-size; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-page); }
.jr-screen > * { animation: msg-in .35s var(--ease) both; }
.jr-screen .sf { border: 0; border-radius: 0; box-shadow: none; }
.jr-screen .sf-head, .jr-screen .sf-input { display: none; }
.jr-screen .sf-body { padding: 10px; }
.jr-screen .sf-msg { align-items: flex-end; gap: 6px; }
.jr-screen .sf-sys { max-width: 100%; }
.jr-screen .sf-sys .sf-card { min-width: min(240px, 100%); }
.sf-face { flex: none; width: 26px; height: 26px; object-fit: cover; border-radius: 50%; }
.jr .is-tapped { color: #fff; background: var(--color-primary-aa); border-color: var(--color-primary-aa); transform: scale(.96); }
.jr .is-tapped b { color: var(--text-title); }

/* shared: IVR caption box */
.jr-call, .jr-ivr, .jr-social { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.jr-callbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.jr-who { min-width: 0; flex: 1; }
.jr-who strong { display: block; overflow: hidden; font-size: 14px; line-height: 1.25; color: var(--text-title); text-overflow: ellipsis; white-space: nowrap; }
.jr-who small { font-size: 12px; color: var(--text-muted); }
.jr-timer { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text-nav); }
.jr-speak { display: flex; align-items: center; gap: 12px; margin: 12px; padding: 10px 12px; min-height: 84px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.jr-speak .wave { flex: none; height: 28px; }
.jr-speak:not(.is-speaking) .wave i { animation-play-state: paused; height: 22%; }
.jr-call .jr-speak { flex: 1; margin-bottom: 0; }
.jr-caption { margin: 0; flex: 1; font-size: 14px; line-height: 1.5; color: var(--text-title); }
.jr-caption.is-idle { color: var(--text-muted); }
.jr-keys { margin-top: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; padding: 12px; }
.jr-key { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-title); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--radius-md); transition: all .15s; }
.jr-key b { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: var(--text-title); background: var(--bg-subtle); border-radius: 50%; }
.jr-key:disabled { color: var(--text-body); background: var(--bg-page); }
.jr-key.is-hint { border-color: var(--color-primary-aa); }

/* round dial pad: tap the phone, 12 keys fan out on a circle (30° apart), each plays a real DTMF tone and walks the IVR menu */
.jr-dial { --r: 72px; --k: 36px; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 12px; overflow: hidden; }
.jr-zone { position: relative; flex: none; width: calc(2 * var(--r) + var(--k)); height: calc(2 * var(--r) + var(--k)); }
.jr-guide { position: absolute; inset: calc(var(--k) / 2); border: 1px dashed var(--border-strong); border-radius: 50%; transition: opacity .3s; }
.jr-dial.is-live .jr-guide { opacity: 0; }
.jr-callbtn { position: absolute; inset: 0; z-index: 3; margin: auto; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--color-primary-aa), var(--color-primary-aa-hover)); border: 0; border-radius: 50%; box-shadow: 0 6px 18px rgba(var(--primary-rgb), .35); transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.jr-callbtn:hover { transform: scale(1.06); }
.jr-dial[data-state="idle"] .jr-callbtn, .jr-dial[data-state="ended"] .jr-callbtn { animation: si-hint 1.8s ease-out infinite; }
.jr-dial[data-state="ringing"] .jr-callbtn, .jr-dial.is-live .jr-callbtn { background: var(--color-danger); box-shadow: 0 6px 18px rgba(231, 13, 13, .35); }
.jr-rip { position: absolute; inset: 0; z-index: 1; margin: auto; width: 56px; height: 56px; border: 2px solid rgba(var(--primary-rgb), .5); border-radius: 50%; opacity: 0; pointer-events: none; }
.jr-dial[data-state="ringing"] .jr-rip { animation: jr-rip 1.8s ease-out infinite; }
.jr-rip.is-b { animation-delay: .9s !important; }
@keyframes jr-rip { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.3); opacity: 0; } }
.jr-keys-ring { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.jr-k { position: absolute; left: 50%; top: 50%; width: var(--k); height: var(--k); margin: calc(var(--k) / -2) 0 0 calc(var(--k) / -2); padding: 0; display: flex; align-items: center; justify-content: center; font: 600 16px/1 var(--font-sans); color: var(--text-title); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 50%; box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none; transform: rotate(var(--a)) translateX(0) rotate(calc(var(--a) * -1)) scale(.4); transition: transform .45s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 25ms), opacity .3s ease calc(var(--i) * 25ms), background .15s, color .15s, border-color .15s; }
.jr-dial.is-live .jr-k { opacity: 1; pointer-events: auto; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)) scale(1); }
.jr-k:hover:not(:disabled), .jr-k.is-hit, .jr-k.is-tapped { color: #fff; background: var(--color-primary-aa); border-color: var(--color-primary-aa); }
.jr-k.is-hint { border-color: var(--color-primary-aa); animation: si-hint 1.4s ease-out infinite; }
.jr-k.is-active { color: #fff; background: var(--color-danger); border-color: var(--color-danger); }
.jr-k:disabled { color: var(--text-body); }
.jr-k i { font-size: 17px; }
.jr-dinfo { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.jr-cstatus { font-size: 12px; color: var(--text-nav); text-align: center; }
.jr-dial.is-live .jr-cstatus { display: none; }        /* stacked layout is short on height: the timer and the caption already say the call is live */
.jr-dial .jr-speak { margin: 0; padding: 8px 10px; min-height: 58px; gap: 10px; }
.jr-dial .jr-speak .wave { display: none; }
.jr-dial .jr-caption { font-size: 13px; line-height: 1.4; }
.jr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 22px; }
.jr-meta i { font-size: 13px; color: var(--text-muted); }
@container (max-width: 359px) { .jr-meta > i, .jr-meta .badge-secondary-tint { display: none; } }   /* narrow: only the current menu + its action */
@container (max-width: 279px) { .jr-dial { --r: 68px; --k: 34px; } .jr-dial .jr-speak { min-height: 52px; padding: 6px 8px; } .jr-dial .jr-caption { font-size: 12.5px; line-height: 1.35; } }   /* very small phones */

/* spoken conversation (live agent / voice bot): the face with audio bars on both sides, transcript, what-you-would-say choices */
.jr-vb { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.jr-vstage { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 12px 6px; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.jr-vrow { display: flex; align-items: center; justify-content: center; gap: 10px; }
.jr-vorb { display: inline-flex; border-radius: 50%; transition: box-shadow .2s; }
.jr-vface { width: 52px; height: 52px; object-fit: cover; border-radius: 50%; }
.jr-vb[data-who="ai"] .jr-vorb { box-shadow: 0 0 0 5px rgba(var(--primary-rgb), .22); }
.jr-vb[data-who="you"] .jr-vorb { box-shadow: 0 0 0 5px var(--tint-info-bg); }
.jr-vbars { width: 64px; height: 30px; display: flex; align-items: center; gap: 3px; }
.jr-vbars.is-l { justify-content: flex-end; }
.jr-vbars i { width: 4px; height: 26%; border-radius: 2px; background: linear-gradient(45deg, var(--color-primary), var(--chart-2)); opacity: .4; transition: opacity .3s; }
.jr-vbars i:nth-child(1) { height: 30%; } .jr-vbars i:nth-child(2) { height: 55%; } .jr-vbars i:nth-child(3) { height: 85%; } .jr-vbars i:nth-child(4) { height: 100%; } .jr-vbars i:nth-child(5) { height: 75%; } .jr-vbars i:nth-child(6) { height: 55%; } .jr-vbars i:nth-child(7) { height: 35%; }
.jr-vb:not([data-who=""]) .jr-vbars i { opacity: 1; animation: va-bar .8s ease-in-out infinite alternate; }
.jr-vb:not([data-who=""]) .jr-vbars i:nth-child(2n) { animation-duration: .65s; } .jr-vb:not([data-who=""]) .jr-vbars i:nth-child(3n) { animation-duration: 1s; }
.jr-vmeta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-nav); }
.jr-vtime { font-variant-numeric: tabular-nums; }
.jr-vb .jr-lines { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; overflow-y: auto; }
.jr-vb .va-line.is-ai { margin-right: 8%; }
.jr-vb .va-line.is-user { margin-left: 8%; }
.jr-vb .va-text { color: var(--text-title); }
.jr-choices { flex: none; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 10px; background: var(--bg-surface); border-top: 1px solid var(--border); }
.jr-choices-label { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-nav); }
.jr-choice { min-height: 34px; display: flex; align-items: center; padding: 5px 14px; text-align: left; font-size: 13px; font-weight: 500; color: var(--text-accent-strong); background: var(--bg-surface); border: 1px solid rgba(var(--primary-rgb), .45); border-radius: 18px; transition: background var(--t-fast), border-color var(--t-fast); }
.jr-choice:hover:not(:disabled) { background: var(--primary-transparent); }
.jr-choice:disabled { color: var(--text-muted); border-color: var(--border); }
.jr-choice.is-hint:disabled, .jr-choice.is-picked:disabled { color: var(--text-accent-strong); border-color: rgba(var(--primary-rgb), .45); }
.jr-choice.is-picked:disabled { background: var(--primary-transparent); }
.jr-choice.is-tapped { color: #fff; background: var(--color-primary-aa); }

/* social */
.jr-post { display: flex; gap: 10px; padding: 10px 12px; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.jr-post-img { flex: none; width: 40px; height: 40px; object-fit: cover; border-radius: 10px; }
.jr-post-body { min-width: 0; font-size: 13px; line-height: 1.4; color: var(--text-title); }
.jr-post-body strong { display: block; }
.jr-post-body small { display: block; font-size: 12px; color: var(--text-muted); }
.jr-post-acts { display: flex; gap: 6px; margin-top: 4px; }
.jr-thread-head { margin: 0; font-size: 12px; font-weight: 600; color: var(--text-nav); }
.jr-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; overflow-y: auto; }
.jr-comment { display: flex; align-items: flex-end; gap: 6px; animation: msg-in .3s var(--ease) both; }
.jr-comment.is-reply { margin-left: 20px; }
.jr-comment .sf-bubble { min-width: 0; font-size: 13px; }
.jr-cname { display: block; font-size: 12px; color: var(--text-title); }
.jr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 32px; }
.jr-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 0; font-size: 12px; text-align: center; color: var(--text-muted); animation: msg-in .3s var(--ease) both; }
.jr-compose { display: flex; gap: 8px; padding: 8px 12px; background: var(--bg-surface); border-top: 1px solid var(--border); }
.jr-compose .sf-field { height: 36px; }

/* smart IVR */
.jr-ivr-view { flex: 1; min-height: 0; width: 100%; max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 12px; }
.jr-ivr-tag { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-nav); }
.jr-tl-list { margin: 0; padding: 0; list-style: none; }
.jr-tl { position: relative; display: flex; align-items: flex-start; gap: 10px; padding-bottom: 12px; }
.jr-tl::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--tint-success-bg); }
.jr-tl:last-child { padding-bottom: 0; }
.jr-tl:last-child::before { display: none; }
.jr-tl-dot { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--tint-success-fg); background: var(--tint-success-bg); border-radius: 50%; }
.jr-tl.is-now .jr-tl-dot { color: #fff; background: var(--color-primary-aa); }
.jr-tl strong { display: block; font-size: 13px; line-height: 1.3; color: var(--text-title); }
.jr-tl small { font-size: 12px; color: var(--text-muted); }
.jr-eta { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; color: var(--text-title); background: var(--primary-transparent); border-radius: var(--radius-md); }
.jr-solved { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tint-success-fg); }

/* result */
.jr-done { margin: auto; width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 16px; text-align: center; color: var(--text-title); }
.jr-done-ic { font-size: 38px; line-height: 1; color: var(--tint-success-fg); }
.jr-done-title { margin: 0; font-size: 17px; font-weight: 700; }
.jr-done-rows { width: 100%; margin: 4px 0; padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.jr-done-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }

/* omnichannel summary: the running story on top, what every channel remembers below, one card */
.jr-notes { display: flex; flex-direction: column; padding: 10px 14px 8px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.jr-cap { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 12px; }
.jr-cap-text { flex: 1 1 260px; min-width: 0; }
.jr-status { min-height: 38px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-title); }
.jr-hint { min-height: 18px; margin: 2px 0 0; font-size: 12px; font-weight: 500; color: var(--text-accent-strong); }
.jr-ctx { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.jr-ctx-label { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 15px; background: var(--primary-transparent); border-radius: 50%; }
.jr-ctx-label i { color: var(--text-accent); }
.jr-facts { flex: 1; min-width: 0; min-height: 30px; display: flex; flex-wrap: wrap; align-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jr-fact { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; font-size: 12px; font-weight: 500; color: var(--text-title); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 14px; animation: msg-in .35s var(--ease) both; }
.jr-fact.no-anim { animation: none; }
.jr-fact i { font-size: 13px; color: var(--text-accent); }
.jr-empty { align-self: center; font-size: 12px; color: var(--text-muted); }
.jr-next { white-space: nowrap; }

/* ── Device frames ────────────────────────────────────────────────────── */
.dev-phone { position: relative; width: 284px; max-width: 100%; margin: 0 auto; padding: 10px; background: var(--dev-frame); border-radius: 36px; box-shadow: var(--shadow-md); }
.dev-notch { position: absolute; top: 10px; left: 50%; z-index: 3; width: 88px; height: 18px; transform: translateX(-50%); background: var(--dev-frame); border-radius: 0 0 12px 12px; }
.dev-screen { position: relative; height: 520px; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-surface); border-radius: 27px; }
.dev-phone.is-sm { width: 204px; padding: 8px; border-radius: 28px; }
.dev-phone.is-sm .dev-screen { height: 392px; border-radius: 21px; }
.dev-phone.is-sm .dev-notch { top: 8px; width: 64px; height: 14px; }

.dev-browser { border: 1px solid var(--border-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface); box-shadow: var(--shadow-sm); }
.dev-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
.dev-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.dev-url { flex: 1; margin-left: 10px; padding: 2px 10px; font-size: 12px; color: var(--text-muted); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); }
.dev-page { position: relative; height: 520px; overflow: hidden; background: var(--bg-page); }
.dev-skel { position: absolute; top: 16px; bottom: 16px; left: 16px; width: 34%; display: flex; flex-direction: column; gap: 10px; }
.dev-skel b { height: 26px; width: 60%; background: var(--border); border-radius: var(--radius); }
.dev-skel i { height: 10px; background: var(--border); border-radius: var(--radius); }
.dev-skel i.short { width: 60%; }
.dev-skel em { height: 90px; background: var(--border); border-radius: var(--radius-md); }
.dev-widget { position: absolute; top: 16px; right: 16px; bottom: 16px; width: min(350px, calc(100% - 32px)); display: flex; }

/* ── Conversation surface (chat / WhatsApp / chatbot) ─────────────────── */
.sf { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-menu); }
.dev-screen .sf { border: 0; border-radius: 0; box-shadow: none; }
.sf-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.dev-screen .sf-head { padding-top: 32px; }
.sf-avatar { background: var(--primary-transparent); color: var(--text-accent-strong); }
.sf-who strong { display: block; font-size: 14px; line-height: 1.2; color: var(--text-title); }
.sf-who small { display: flex; align-items: center; font-size: 12px; color: var(--text-muted); }
.sf-dot { width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--color-success); flex: none; }
.sf-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-page); }
.sf-msg { display: flex; max-width: 90%; animation: msg-in .3s var(--ease) both; }
.sf-user { align-self: flex-end; }
.sf-sys { align-self: center; max-width: 100%; }
.sf-bubble { padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; color: var(--text-title); background: var(--bg-surface); border: 1px solid var(--border); }
.sf-user .sf-bubble { background: var(--primary-transparent); border-color: rgba(var(--primary-rgb), .25); }
.sf-sys .sf-bubble { padding: 2px; font-size: 12px; color: var(--text-muted); background: transparent; border: 0; }
.sf-meta { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.sf-ticks { display: inline-flex; margin-left: 6px; vertical-align: middle; font-size: 15px; color: var(--text-muted); }
.sf-ticks.is-read { color: var(--tint-info-fg); }
.sf-typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.sf-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-disabled); animation: pulse 1s ease-in-out infinite; }
.sf-typing i:nth-child(2) { animation-delay: .2s; } .sf-typing i:nth-child(3) { animation-delay: .4s; }

.sf-card { margin-top: 8px; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.sf-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 8px 10px; font-size: 13px; color: var(--text-title); background: var(--bg-page); border-bottom: 1px solid var(--border); }
.sf-rows { margin: 0; padding: 8px 10px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.sf-rows dt { font-weight: 500; color: var(--text-body); }
.sf-rows dd { margin: 0; font-weight: 500; text-align: right; color: var(--text-title); }

.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; background: var(--bg-surface); border-top: 1px solid var(--border); }
.sf-chips[hidden] { display: none; }
.sf-chip { min-height: 34px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text-accent-strong); background: var(--bg-surface); border: 1px solid rgba(var(--primary-rgb), .45); border-radius: 17px; transition: background var(--t-fast); }
.sf-chip:hover:not(:disabled) { background: var(--primary-transparent); }
.sf-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--bg-surface); }
.sf-field { flex: 1; min-width: 0; height: 40px; padding: 0 14px; font-size: 16px;   /* 16px: iOS Safari zooms the page on focus below that */ color: var(--text-title); background: var(--bg-page); border: 1px solid var(--border-strong); border-radius: 20px; }
.sf-field:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.sf-send { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #fff; background: var(--color-primary-aa); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.sf-send:disabled { background: var(--border-strong); }

/* skins */
.sf-wa .sf-head { background: var(--color-secondary); border-bottom: 0; }
.sf-wa .sf-head strong, .sf-wa .sf-head small { color: #fff; }
.sf-wa .sf-avatar { background: rgba(255, 255, 255, .18); color: #fff; }
.sf-wa .sf-user .sf-bubble { background: var(--tint-success-bg); border-color: transparent; color: var(--text-title); }
.sf-wa .sf-chip { border-radius: var(--radius); width: 100%; text-align: center; color: var(--tint-info-fg); border-color: var(--border); }
.sf-wa .sf-chips { flex-direction: column; }
.sf-bot .sf-head { background: var(--primary-transparent); }

/* ── Studio shell ─────────────────────────────────────────────────────── */
.exp { overflow: hidden; }
.exp-tabs { padding: 0 8px; border-bottom: 1px solid var(--border); }
.exp-tabs .nav-tabs { border-bottom: 0; }
.exp-tab-img { display: block; flex: none; width: 18px; height: 18px; border-radius: 5px; }
.exp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--bg-page); border-bottom: 1px solid var(--border); }
.exp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.exp-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text-title); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); transition: all var(--t-fast) var(--ease); }
.exp-chip:hover { color: var(--text-accent-strong); border-color: var(--color-primary-aa); }
.exp-chip.is-on { color: #fff; background: var(--color-primary-aa); border-color: var(--color-primary-aa); }
.exp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.exp-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--border-strong); border-radius: var(--radius); }
.exp-seg-btn { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--text-title); background: var(--bg-surface); border: 0; transition: all var(--t-fast) var(--ease); }
.exp-seg-btn + .exp-seg-btn { border-left: 1px solid var(--border-strong); }
.exp-seg-btn.is-on { color: #fff; background: var(--color-primary-aa); }
.exp-main { min-width: 0; padding: 20px; }
.exp-head { margin-bottom: 16px; }
.exp-title { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--text-title); }
.exp-desc { font-size: 14px; }
.exp-stage { min-height: 560px; }
.exp-stage:focus-visible { outline-offset: 4px; }
.exp-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; padding: 10px 12px; color: var(--text-title); background: var(--primary-transparent); border-radius: var(--radius); }
.exp-hint[hidden] { display: none; }
.link-btn { padding: 0; font-weight: 600; color: var(--text-accent-strong); text-decoration: underline; background: none; border: 0; }
.exp-side { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-left: 1px solid var(--border); }
.exp-side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.exp-log { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; max-height: 380px; overflow-y: auto; }
.exp-log li { display: flex; align-items: flex-start; gap: 10px; animation: msg-in .3s var(--ease) both; }
.exp-log strong { display: block; font-size: 13px; color: var(--text-title); }
.exp-log small { display: block; font-size: 12px; color: var(--text-muted); }
.exp-log time { margin-left: auto; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.exp-log .is-empty { display: block; font-size: 13px; color: var(--text-muted); }
.exp-outcome { padding: 12px 14px; background: var(--primary-linear-gradient), var(--bg-surface); border: 1px solid rgba(var(--primary-rgb), .3); border-radius: var(--radius-md); }
.exp-outcome[hidden] { display: none; }
.exp-out-title { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-weight: 600; color: var(--text-title); }
.exp-out-title i { color: var(--tint-success-fg); }
.exp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; color: var(--text-title); background: var(--bg-page); border-top: 1px solid var(--border); }
@media (max-width: 991.98px) { .exp-side { border-left: 0; border-top: 1px solid var(--border); } .exp-stage { min-height: 0; } }

/* ── Email ────────────────────────────────────────────────────────────── */
.mail { display: grid; grid-template-columns: 220px 1fr; height: 100%; }
.mail-list { display: flex; flex-direction: column; background: var(--bg-surface); border-right: 1px solid var(--border); overflow-y: auto; }
.mail-item { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border); }
.mail-item:disabled { color: var(--text-body); }
.mail-item.is-new { background: var(--primary-transparent); animation: mail-in .5s var(--ease); }
.mail-item.is-active { background: var(--primary-transparent); box-shadow: inset 3px 0 0 var(--color-primary-aa); }
@keyframes mail-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mail-from { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-title); }
.mail-subj { overflow: hidden; font-size: 13px; color: var(--text-nav); text-overflow: ellipsis; white-space: nowrap; }
.mail-item time { font-size: 11px; color: var(--text-nav); }
.mail-read { padding: 16px; overflow-y: auto; }
.mail-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--text-muted); }
.mail-empty i { font-size: 34px; }
.mail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mail-head small { color: var(--text-muted); }
.mail-text { color: var(--text-title); }
.mail-ai { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; min-height: 26px; }
.mail-draft { overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.mail-draft-label { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 12px; font-weight: 600; color: var(--text-accent-strong); background: var(--primary-transparent); }
.mail-draft-text { display: block; width: 100%; min-height: 124px; padding: 12px; resize: none; font-size: 14px; line-height: 1.5; color: var(--text-title); background: transparent; border: 0; }
.mail-draft-text:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.mail-actions { display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--border); }
.mail-actions .btn[hidden] { display: none; }
.mail-actions .is-pressed { transform: scale(.95); }
.mail-sent { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; color: var(--tint-success-fg); background: var(--tint-success-bg); border-radius: var(--radius-md); animation: msg-in .3s var(--ease) both; }
.mail-sent i { font-size: 22px; }
.mail-sent strong, .mail-sent small { display: block; color: inherit; }
@media (max-width: 575.98px) { .mail { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } .mail-list { border-right: 0; border-bottom: 1px solid var(--border); } }

/* ── AI voice agent ───────────────────────────────────────────────────── */
.va-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.va-card { padding: 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.va-card.is-selected { border-color: rgba(var(--primary-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12); }
.va-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.va-top small { font-size: 12px; color: var(--text-muted); }
.va-player { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; }
.va-bars { display: flex; align-items: center; gap: 3px; height: 100%; }
.va-bars.is-left { justify-content: flex-end; width: 0; overflow: hidden; transition: width .4s var(--ease); }
.va-card.is-playing .va-bars.is-left { width: 26px; }
.va-bars i { width: 4px; height: 40%; border-radius: 2px; background: linear-gradient(45deg, var(--color-primary), var(--chart-2)); opacity: .45; transition: opacity .3s; }
.va-bars i:nth-child(1) { height: 45%; } .va-bars i:nth-child(2) { height: 70%; } .va-bars i:nth-child(3) { height: 95%; } .va-bars i:nth-child(4) { height: 100%; } .va-bars i:nth-child(5) { height: 80%; }
.va-bars i:nth-child(6) { height: 60%; } .va-bars i:nth-child(7) { height: 70%; } .va-bars i:nth-child(8) { height: 45%; }
.va-card.is-playing .va-bars i { opacity: 1; animation: va-bar .8s ease-in-out infinite alternate; }
.va-card.is-playing .va-bars i:nth-child(2n) { animation-duration: .65s; } .va-card.is-playing .va-bars i:nth-child(3n) { animation-duration: 1s; }
@keyframes va-bar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.va-play { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; color: #fff; background: var(--color-primary-aa); transition: transform var(--t-fast), background var(--t-fast); }
.va-play:hover { transform: translateY(-2px); background: var(--color-primary-aa-hover); }
.va-icon { width: 0; height: 0; margin-left: 3px; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.va-play.is-playing .va-icon { width: 14px; height: 16px; margin: 0; border: 0; background: linear-gradient(90deg, #fff 0 35%, transparent 35% 65%, #fff 65% 100%); }
.va-meta { margin-top: 8px; }
.va-now { margin-top: 16px; padding: 14px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius-md); }
.va-now-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; color: var(--text-title); }
.va-progress { height: 4px; margin: 10px 0; overflow: hidden; background: var(--border-soft); border-radius: 2px; }
.va-progress i { display: block; width: 0; height: 100%; background: var(--color-primary-aa); transition: width .4s var(--ease); }
.va-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.va-line { display: flex; flex-direction: column; padding: 8px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color .3s, background .3s; }
.va-line.is-ai { margin-right: 18%; } .va-line.is-user { margin-left: 18%; }
.va-who { font-size: 12px; color: var(--text-nav); }
.va-text { color: var(--text-body); transition: color .3s; }
.va-line.is-shown .va-text { color: var(--text-title); }
.va-line.is-current { background: var(--primary-transparent); border-color: rgba(var(--primary-rgb), .55); }
.va-checks { margin-top: 12px; }
.va-checks[hidden] { display: none; }
@media (max-width: 767.98px) { .va-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .va-grid { grid-template-columns: 1fr; } .va-line.is-ai { margin-right: 6%; } .va-line.is-user { margin-left: 6%; } }

/* ── Call channel ─────────────────────────────────────────────────────── */
.call-grid { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 24px; }
.ph { align-items: center; gap: 8px; padding: 36px 16px 16px; text-align: center; }
.ph-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* live region for screen readers; the caption shows the same text */
.ph-number { margin-top: 4px; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-title); }
.ph-caption { width: 100%; min-height: 84px; margin: 0; padding: 8px 10px; font-size: 13px; line-height: 1.4; color: var(--text-title); background: var(--bg-page); border-radius: var(--radius-md); text-align: left; }
.ph-keys { display: grid; grid-template-columns: repeat(3, 58px); gap: 8px; margin: 6px 0; }
.ph-key { width: 58px; height: 44px; font-size: 18px; font-weight: 600; color: var(--text-title); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 22px; transition: all .15s; }
.ph-key:disabled { color: var(--text-body); background: var(--bg-page); }
.ph-key.is-hit, .ph-key:hover:not(:disabled) { color: #fff; background: var(--color-primary-aa); border-color: var(--color-primary-aa); }
.ph-call { width: 100%; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; color: #fff; background: var(--call-green); border: 0; border-radius: 23px; transition: transform .15s, background .2s; }
.ph-call.is-live { background: var(--color-danger); }
.ph-call.is-hit { transform: scale(.95); }
.ag { min-height: 520px; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.ag-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; color: var(--text-title); border-bottom: 1px solid var(--border); }
.ag-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.ag-idle { margin: auto; text-align: center; color: var(--text-muted); }
.ag-idle i { display: block; font-size: 38px; }
.ag-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); animation: msg-in .4s var(--ease) both; }
.ag-who { display: flex; align-items: center; gap: 12px; }
.ag-who small { color: var(--text-muted); }
.ag-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ag-rec { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--tint-danger-fg); }
.ag-rec i { animation: pulse 1.4s ease-in-out infinite; }
.ag-slot { display: flex; flex-direction: column; gap: 10px; }
.ag-nba, .ag-summary { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font-size: 13px; color: var(--text-title); border-radius: var(--radius-md); animation: msg-in .4s var(--ease) both; }
.ag-nba { background: var(--primary-transparent); }
.ag-nba strong { color: var(--text-accent-strong); }
.ag-summary { background: var(--tint-secondary-bg); }
.ag-summary strong { color: var(--tint-secondary-fg); }
.ag strong i { margin-right: 4px; }
@media (max-width: 767.98px) { .call-grid { grid-template-columns: 1fr; } .ag { min-height: 0; } }

/* ── Smart IVR ────────────────────────────────────────────────────────── */
.si-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.si-task { color: var(--text-title); }
.si-phones { display: flex; align-items: flex-start; justify-content: center; gap: 12px; }
.si-col { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.si-title { display: flex; align-items: center; gap: 8px; color: var(--text-title); }
.si-vs { align-self: center; padding: 0 4px; font-weight: 700; color: var(--text-muted); }
.si-counts { display: flex; gap: 16px; font-size: 13px; color: var(--text-body); }
.si-counts b { font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.si-voice { gap: 10px; padding: 32px 10px 10px; background: var(--bg-page); }
.si-speaker { display: flex; justify-content: center; }
.si-speaker .wave { height: 28px; }
.dev-phone:not(.is-speaking) .si-speaker .wave i { animation-play-state: paused; height: 22%; }
.si-caption { min-height: 132px; margin: 0; padding: 10px; font-size: 13px; line-height: 1.45; color: var(--text-title); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.si-caption.is-agent { border-color: var(--tint-danger-fg); }
.si-keys { display: flex; flex-wrap: wrap; gap: 4px; }
.si-key { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text-title); background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: 50%; animation: msg-in .2s var(--ease) both; }
.si-screen { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 32px 10px 10px; overflow: hidden; }
.si-call { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--text-title); }
.si-call i, .si-done i { font-size: 32px; color: var(--text-accent); }
.si-call small { font-size: 12px; color: var(--text-body); }
.si-sms small { display: block; margin-bottom: 4px; font-size: 11px; text-align: center; color: var(--text-muted); }
.si-sms-bubble { padding: 10px; font-size: 13px; color: var(--text-title); background: var(--bg-page); border: 1px solid var(--border); border-radius: 12px; }
.si-link { padding: 0; font-weight: 600; color: var(--tint-info-fg); text-decoration: underline; background: none; border: 0; }
.si-h { font-size: 15px; font-weight: 600; color: var(--text-heading); }
.si-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.si-tile { min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--text-title); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: all .2s; }
.si-tile i { font-size: 20px; color: var(--text-accent); }
.si-tile.is-agent { grid-column: 1 / -1; min-height: 38px; flex-direction: row; gap: 8px; background: var(--bg-page); }
.si-list { display: flex; flex-direction: column; gap: 8px; }
.si-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; text-align: left; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: all .2s; }
.si-item strong { display: block; font-size: 13px; color: var(--text-title); }
.si-item small { font-size: 12px; color: var(--text-muted); }
.si-item i { color: var(--text-muted); }
.si-done { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--text-title); }
.si-done i { color: var(--tint-success-fg); font-size: 38px; }
.si-context { padding: 8px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius-md); }
.si-context small { display: block; padding: 0 2px; color: var(--text-muted); }
.si-context .sf-rows { grid-template-columns: 1fr; gap: 0; padding: 4px 2px 0; font-size: 12px; }
.si-context .sf-rows dt { font-size: 11px; }
.si-context .sf-rows dd { margin-bottom: 4px; text-align: left; }
.si-note { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); }
.is-hint { animation: si-hint 1.4s ease-out infinite; }
@keyframes si-hint { 0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(var(--primary-rgb), 0); } }
.si-screen .is-tapped { background: var(--primary-transparent); border-color: var(--color-primary); transform: scale(.97); }
.dev-phone.is-auto .dev-screen { pointer-events: none; }
.si-steps { margin: 16px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.si-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; text-align: center; font-size: 12px; color: var(--text-body); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: all .3s; }
.si-n { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--text-title); background: var(--bg-subtle); border-radius: 50%; }
.si-steps .is-done .si-n { color: var(--tint-success-fg); background: var(--tint-success-bg); }
.si-steps .is-current { color: var(--text-title); background: var(--primary-transparent); border-color: var(--color-primary); }
.si-steps .is-current .si-n { color: #fff; background: var(--color-primary-aa); }
.si-result { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; padding: 14px; background: var(--bg-page); border: 1px solid var(--border); border-radius: var(--radius-md); }
.si-result[hidden] { display: none; }
.si-res-col { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; color: var(--text-title); }
.si-res-col small { color: var(--text-muted); }
.si-res-col.is-win strong { color: var(--tint-success-fg); }
@media (max-width: 767.98px) { .si-phones { flex-direction: column; align-items: center; } .si-steps { grid-template-columns: repeat(2, 1fr); } }