/* ZPlay support chat — tokens from docs/chat-design.md (c.1) */
:root{
  /* marca */
  --zp-bg:#0B0714;
  --zp-surface-1:#150C20;
  --zp-surface-2:#1A0F28;
  --zp-surface-3:#241238;
  --zp-bubble-bot:#30104F;
  --zp-violet:#7E1CDC;
  --zp-purple:#8B22E8;
  --zp-purple-deep:#550782;
  --zp-magenta:#EC4CEA;
  --zp-pink:#FC4A8E;
  --zp-orange:#FB502F;
  --zp-amber:#FFAD15;
  --zp-yellow:#FEDC5E;
  --zp-text:#FFFFFF;
  --zp-text-2:#B8A9C9;
  --zp-muted:#A394B8;
  --zp-danger:#FF8A8A;
  --zp-success:#4ADE80;
  --zp-focus:#FFC928;
  --zp-grad-header:linear-gradient(100deg,#550782 0%,#8B22E8 34%,#B3249B 62%,#FB562A 100%);
  --zp-grad-client:linear-gradient(120deg,#6A0FB3 0%,#9B1F73 55%,#C2410C 100%);
  --zp-grad-cta:linear-gradient(96deg,#7E1CDC 0%,#B3249B 58%,#FB502F 100%);
  --zp-radius-bubble:16px; --zp-radius-card:20px; --zp-radius-pill:999px;
  --zp-shadow:0 10px 30px rgb(0 0 0 / .35);
  --zp-ring:0 0 0 3px rgb(255 201 40 / .55);
  --zp-dur:.18s; --zp-ease:cubic-bezier(.2,.8,.2,1);
  --zp-header-h:64px;
  --zp-font:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--zp-bg);
  color:var(--zp-text);
  font-family:var(--zp-font);
  font-size:16px;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  overflow:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(60% 45% at 50% -5%,rgb(139 34 232 / .18),transparent 70%),
    radial-gradient(45% 35% at 90% 110%,rgb(251 80 47 / .12),transparent 70%);
  pointer-events:none;
  z-index:0;
}
button{font:inherit;color:inherit}
button,.composer__input{touch-action:manipulation}
a{color:var(--zp-yellow)}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:8px;top:-48px;z-index:40;
  background:var(--zp-surface-3);color:var(--zp-text);
  padding:10px 14px;border-radius:10px;text-decoration:none;
}
.skip-link:focus{top:8px;outline:none;box-shadow:var(--zp-ring)}

:focus-visible{outline:none;box-shadow:var(--zp-ring);border-radius:8px}

/* layout */
.shell{
  position:relative; z-index:1;
  height:100vh;
  height:100dvh;
  display:flex; align-items:stretch; justify-content:center;
  padding:0;
}
.panel{
  position:relative;
  display:flex; flex-direction:column;
  width:100%; max-width:100%;
  min-height:0;
  background:var(--zp-bg);
  overflow:hidden;
}

/* welcome (R7) */
.welcome{
  flex:1; min-height:0;
  display:flex; flex-direction:column; align-items:center;
  gap:18px;
  padding:32px calc(24px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  text-align:center;
  overflow-y:auto;
}
/* margin:auto centers while there is room and lets the top stay reachable when
   there is not; justify-content:center would clip it. */
.welcome > :first-child{margin-top:auto}
.welcome > :last-child{margin-bottom:auto}
.welcome__logo{display:block;max-width:min(78vw,320px)}
.welcome__logo img{display:block;width:100%;height:auto}
.welcome__title{
  margin:0;font-size:clamp(1.35rem,5.4vw,1.75rem);line-height:1.25;font-weight:700;
  letter-spacing:-.01em;
}
.welcome__text{
  margin:0;max-width:34ch;color:var(--zp-text-2);font-size:.975rem;
}
.welcome__cta{
  margin-top:6px;
  min-height:52px; padding:14px 30px;
  border:0; border-radius:var(--zp-radius-pill);
  background:var(--zp-grad-cta);
  color:var(--zp-text); font-weight:700; font-size:.95rem; letter-spacing:.06em;
  cursor:pointer; box-shadow:0 8px 24px rgb(85 7 130 / .5);
  transition:transform var(--zp-dur) var(--zp-ease),filter var(--zp-dur) var(--zp-ease);
}
.welcome__cta:active{transform:scale(.98)}
.welcome__cta[disabled]{cursor:progress;filter:grayscale(.25) brightness(.85)}
.welcome__note{margin:0;min-height:1.3em;color:var(--zp-muted);font-size:.85rem}

/* chat */
.chat{
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  position:relative;
}
.chat[hidden]{display:none}

/* header (R2) */
.topbar{
  position:sticky; top:0; z-index:3;
  display:flex; align-items:center; gap:10px;
  min-height:var(--zp-header-h);
  padding:8px calc(10px + env(safe-area-inset-right)) 8px calc(10px + env(safe-area-inset-left));
  padding-top:calc(8px + env(safe-area-inset-top));
  background:var(--zp-grad-header);
  background-color:var(--zp-purple-deep);
  box-shadow:inset 0 0 0 999px rgb(11 7 20 / .32);
  border-bottom:1px solid rgb(11 7 20 / .55);
}
.topbar__avatar{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--zp-bg);object-fit:contain;padding:3px;
  border:1px solid rgb(255 255 255 / .22);
}
.topbar__identity{flex:1;min-width:0}
.topbar__title{
  margin:0;font-size:1rem;line-height:1.2;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar__status{
  margin:1px 0 0;font-size:.775rem;line-height:1.3;color:rgb(255 255 255 / .92);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar__status[data-state="closed"]{color:rgb(255 255 255 / .78)}
.icon-button{
  flex:none;display:grid;place-items:center;
  width:44px;height:44px;
  border:0;border-radius:50%;
  background:rgb(11 7 20 / .18);
  color:var(--zp-text);
  cursor:pointer;
  transition:background var(--zp-dur) var(--zp-ease),transform var(--zp-dur) var(--zp-ease);
}
.icon-button svg{width:22px;height:22px}
.icon-button:active{transform:scale(.94)}

/* session banner */
.session-banner{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;
  padding:10px 14px;
  background:var(--zp-surface-3);
  border-bottom:1px solid rgb(255 255 255 / .06);
  color:var(--zp-text-2);font-size:.85rem;text-align:center;
}
.session-banner[hidden]{display:none}
.link-button{
  min-height:36px;padding:6px 14px;
  border:1px solid rgb(255 255 255 / .22);border-radius:var(--zp-radius-pill);
  background:transparent;color:var(--zp-text);font-size:.85rem;font-weight:600;cursor:pointer;
}

/* messages (R3) */
.messages{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:10px;
  padding:16px calc(14px + env(safe-area-inset-right)) 18px calc(14px + env(safe-area-inset-left));
  overflow-anchor:none;
}
.messages:focus-visible{box-shadow:inset 0 0 0 2px rgb(255 201 40 / .55)}

.msg{
  display:flex;flex-direction:column;max-width:min(86%,640px);
  animation:msg-in .2s var(--zp-ease) both;
}
.msg[data-role="bot"]{align-self:flex-start;align-items:flex-start}
.msg[data-role="user"]{align-self:flex-end;align-items:flex-end}
.msg__bubble{
  padding:10px 14px;
  border-radius:var(--zp-radius-bubble);
  font-size:.95rem;
  overflow-wrap:anywhere;
}
.msg[data-role="bot"] .msg__bubble{
  background:var(--zp-bubble-bot);
  border:1px solid rgb(255 255 255 / .06);
  color:var(--zp-text);
}
.msg[data-role="user"] .msg__bubble{
  background:var(--zp-grad-client);
  color:var(--zp-text);
}
.msg__bubble p{margin:0 0 .55em}
.msg__bubble p:last-child{margin-bottom:0}
.msg__bubble ul,.msg__bubble ol{margin:.35em 0;padding-left:1.2em}
.msg__bubble li{margin:.15em 0}
.msg__bubble a{color:var(--zp-yellow);text-decoration:underline;overflow-wrap:anywhere}
.msg__bubble code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:rgb(0 0 0 / .28);padding:1px 5px;border-radius:6px;
}
.msg__bubble pre{
  margin:.4em 0;padding:10px;border-radius:10px;background:rgb(0 0 0 / .3);
  overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em;
}
.msg__meta{
  margin-top:4px;padding:0 4px;
  font-size:.7rem;letter-spacing:.01em;
  color:var(--zp-muted);
}
.msg[data-role="user"] .msg__meta{color:var(--zp-text-2)}

/* live agent messages (docs/chat-live-kinbox.md) */
.msg[data-role="agent"]{align-self:flex-start;align-items:flex-start}
.msg[data-role="agent"] .msg__author{
  margin:0 0 4px 6px;
  font-size:.75rem;font-weight:700;letter-spacing:.01em;
  color:var(--zp-magenta);
}
.msg[data-role="agent"] .msg__bubble{
  background:var(--zp-bubble-bot);
  border:1px solid rgb(236 76 234 / .28);
  color:var(--zp-text);
}
.msg[data-role="user"][data-state="pending"] .msg__meta{color:var(--zp-text-2)}
.msg[data-role="user"][data-state="sent"] .msg__meta{color:var(--zp-text-2)}
.msg[data-role="user"][data-state="failed"] .msg__bubble{
  outline:1px solid var(--zp-danger);
  outline-offset:1px;
}
.msg[data-role="user"][data-state="failed"] .msg__meta{color:var(--zp-danger)}

/* system notes (R3.3) */
.msg[data-role="system"]{
  align-self:center;max-width:min(92%,520px);align-items:center;text-align:center;
}
.msg[data-role="system"] .msg__note{
  padding:5px 12px;
  border-radius:var(--zp-radius-pill);
  background:var(--zp-surface-2);
  border:1px solid rgb(255 255 255 / .07);
  color:var(--zp-text-2);
  font-size:.775rem;
}
.msg[data-role="system"] .msg__meta{margin-top:2px;font-size:.68rem}
.msg[data-state="error"] .msg__note{
  border-color:rgb(255 138 138 / .4);color:var(--zp-danger);
}

.msg[data-replayed]{animation:none}

@keyframes msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}


/* typing indicator (R3.4) */
.typing{display:flex;align-self:flex-start;padding:0 2px}
.typing[hidden]{display:none}
.typing__bubble{
  display:flex;align-items:center;gap:5px;
  padding:12px 16px;
  border-radius:var(--zp-radius-bubble);
  background:var(--zp-bubble-bot);
  border:1px solid rgb(255 255 255 / .06);
}
.typing__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--zp-text-2);
  animation:typing-bounce 1.15s infinite ease-in-out;
}
.typing__dot:nth-child(2){animation-delay:.14s}
.typing__dot:nth-child(3){animation-delay:.28s}
@keyframes typing-bounce{
  0%,60%,100%{opacity:.4;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}

/* jump to recent (R3.5) */
.jump{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--zp-composer-h,96px) + 10px);
  z-index:4;
}
.jump[hidden]{display:none}
.jump__button{
  min-height:38px;padding:8px 16px;
  border:1px solid rgb(255 255 255 / .18);
  border-radius:var(--zp-radius-pill);
  background:var(--zp-surface-3);color:var(--zp-text);
  font-size:.82rem;font-weight:600;cursor:pointer;
  box-shadow:var(--zp-shadow);
  animation:msg-in .16s var(--zp-ease) both;
}

/* composer (R4) */
.composer{
  position:relative;z-index:3;
  flex:none;
  background:var(--zp-surface-1);
  border-top:1px solid rgb(255 255 255 / .07);
  padding:10px calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));
}
.composer__form{display:flex;align-items:flex-end;gap:8px}
.composer__input{
  flex:1;min-width:0;
  margin:0;padding:12px 14px;
  max-height:158px;
  border:1px solid rgb(255 255 255 / .12);
  border-radius:var(--zp-radius-card);
  background:var(--zp-surface-2);
  color:var(--zp-text);
  font:inherit;font-size:1rem;line-height:1.4;
  resize:none;
  overflow-y:auto;
  transition:border-color var(--zp-dur) var(--zp-ease);
}
.composer__input::placeholder{color:var(--zp-muted)}
.composer__input:focus{border-color:var(--zp-purple);outline:none;box-shadow:var(--zp-ring)}
.composer__input[readonly]{opacity:.62;cursor:not-allowed}
.composer__send{
  flex:none;display:grid;place-items:center;
  width:48px;height:48px;
  border:0;border-radius:50%;
  background:var(--zp-grad-cta);
  color:var(--zp-text);cursor:pointer;
  transition:filter var(--zp-dur) var(--zp-ease),transform var(--zp-dur) var(--zp-ease),opacity var(--zp-dur) var(--zp-ease);
}
.composer__send svg{width:22px;height:22px}
.composer__send-label{display:none}
.composer__send:active:not(:disabled){transform:scale(.95)}
.composer__send:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.35)}
.composer__send[data-sending="true"]{width:auto;border-radius:var(--zp-radius-pill);padding:0 18px;gap:8px}
.composer__send[data-sending="true"] svg{display:none}
.composer__send[data-sending="true"] .composer__send-label{display:inline}
.composer__hint{
  margin:0 0 8px;padding:8px 12px;
  border-radius:12px;
  background:rgb(255 138 138 / .12);
  border:1px solid rgb(255 138 138 / .32);
  color:var(--zp-danger);font-size:.82rem;
}
.composer__hint[hidden]{display:none}
.composer__locked{
  padding:12px 14px;
  border:1px dashed rgb(255 255 255 / .16);
  border-radius:var(--zp-radius-card);
  background:var(--zp-surface-2);
  color:var(--zp-text-2);font-size:.88rem;text-align:center;
}
.composer__locked[hidden]{display:none}
.composer__count{
  position:absolute;right:calc(72px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));
  font-size:.7rem;color:var(--zp-muted);
  pointer-events:none;
}
.composer__count[hidden]{display:none}
.composer[data-mode="choice"] .composer__form{display:none}
.composer[data-mode="closed"] .composer__form{display:none}
.composer[data-mode="locked"] .composer__form{display:none}

/* quick reply grid (R5) */
.msg--choices{width:100%;max-width:100%}
.quick{
  display:grid;gap:8px;grid-template-columns:1fr;
  padding:2px 0;width:100%;
}
.quick[data-retired="true"]{opacity:1}
.quick__button{
  display:flex;align-items:center;gap:10px;
  min-height:48px;padding:12px 16px;
  border:1px solid rgb(255 255 255 / .14);
  border-radius:var(--zp-radius-pill);
  background:var(--zp-surface-2);
  color:var(--zp-text);
  font-size:.9rem;font-weight:600;line-height:1.25;
  text-align:left;cursor:pointer;
  transition:background var(--zp-dur) var(--zp-ease),border-color var(--zp-dur) var(--zp-ease),transform var(--zp-dur) var(--zp-ease);
}
.quick__button:active:not(:disabled){transform:scale(.985)}
.quick__button:disabled{cursor:default;opacity:.55}
.quick__button[data-picked="true"]{
  opacity:1;border-color:rgb(236 76 234 / .7);
  background:linear-gradient(96deg,rgb(126 28 220 / .32),rgb(179 36 155 / .26));
}
.quick__text{flex:1;min-width:0;overflow-wrap:anywhere}
.quick__button--submit{
  justify-content:center;font-weight:700;
  background:var(--zp-grad-cta);border-color:transparent;
}
.quick__button--submit:disabled{opacity:.5;filter:grayscale(.3)}
.quick[data-multiple="true"] .quick__button[data-picked="true"]{
  border-color:rgb(236 76 234 / .8);
  background:linear-gradient(96deg,rgb(126 28 220 / .3),rgb(179 36 155 / .24));
}

/* info dialog */
.info-dialog{
  width:min(92vw,480px);max-height:min(84dvh,640px);
  padding:0;border:1px solid rgb(255 255 255 / .1);
  border-radius:var(--zp-radius-card);
  background:var(--zp-surface-1);color:var(--zp-text);
  box-shadow:0 18px 40px rgb(0 0 0 / .55);
}
.info-dialog::backdrop{background:rgb(4 2 8 / .68);backdrop-filter:blur(2px)}
.info-dialog__body{padding:20px;overflow-y:auto;overscroll-behavior:contain;font-size:.9rem;color:var(--zp-text-2)}
.info-dialog__title{margin:0 0 12px;font-size:1.1rem;color:var(--zp-text)}
.info-dialog__body h3{margin:16px 0 6px;font-size:.95rem;color:var(--zp-text)}
.info-dialog__body p{margin:0 0 10px}
.info-dialog__body ul{margin:0 0 10px;padding-left:1.2em}
.info-dialog__body li{margin:.2em 0}
.info-dialog__close{
  margin-top:8px;width:100%;min-height:44px;
  border:0;border-radius:var(--zp-radius-pill);
  background:var(--zp-grad-cta);color:var(--zp-text);
  font-weight:700;cursor:pointer;
}

/* hover (pointers that can hover) */
@media (hover:hover){
  .welcome__cta:hover{filter:brightness(1.08)}
  .icon-button:hover{background:rgb(11 7 20 / .34)}
  .link-button:hover{background:rgb(255 255 255 / .08)}
  .jump__button:hover{background:#2e1746}
  .composer__send:hover:not(:disabled){filter:brightness(1.1)}
  .quick__button:hover:not(:disabled){background:var(--zp-surface-3);border-color:rgb(236 76 234 / .5)}
  .composer__media:hover:not(:disabled){background:var(--zp-surface-3);color:var(--zp-text)}
  .recorder__action:hover{background:rgb(255 255 255 / .08)}
}

/* desktop (R6.2) */
@media (min-width:820px){
  .shell{align-items:center;padding:24px}
  .panel{
    max-width:600px;height:min(880px,calc(100dvh - 48px));
    border-radius:24px;
    border:1px solid rgb(255 255 255 / .08);
    box-shadow:0 18px 40px rgb(0 0 0 / .5);
  }
  .topbar{border-radius:24px 24px 0 0}
  .messages{padding:20px 18px}
  .composer{padding-bottom:14px}
  .quick{grid-template-columns:1fr 1fr}
  .quick__button{min-height:56px;font-size:.9rem}
}

@media (min-width:1024px){
  .panel{max-width:680px}
}

/* short screens: phone in landscape */
@media (max-height:520px){
  .welcome{gap:10px;padding-top:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .welcome__logo{max-width:150px}
  .welcome__cta{min-height:48px;padding:12px 26px}
}

/* reduced motion (R10.5) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .messages{scroll-behavior:auto}
  .typing__dot{animation:none;opacity:.7}
}

@media (forced-colors:active){
  .quick__button,.composer__input,.icon-button{border:1px solid ButtonBorder}
}

/* ---------- media in live attendance (R9.7–R9.9) ---------- */

.composer__media{
  flex:none;display:grid;place-items:center;
  width:44px;height:44px;
  border:0;border-radius:50%;
  background:var(--zp-surface-2);
  color:var(--zp-text-2);
  cursor:pointer;
  transition:background var(--zp-dur) var(--zp-ease),color var(--zp-dur) var(--zp-ease),transform var(--zp-dur) var(--zp-ease);
}
.composer__media svg{width:22px;height:22px}
.composer__media:active:not(:disabled){transform:scale(.94)}
.composer__media:disabled{opacity:.4;cursor:not-allowed}
.composer[data-live="false"] .composer__media{display:none}

/* recording bar */
.recorder{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 8px;padding:8px 12px;
  border:1px solid rgb(255 138 138 / .35);
  border-radius:14px;background:rgb(255 138 138 / .1);
}
.recorder[hidden]{display:none}
.recorder__dot{
  width:9px;height:9px;border-radius:50%;background:var(--zp-danger);
  animation:rec-pulse 1.1s infinite ease-in-out;
}
@keyframes rec-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.recorder__time{font-variant-numeric:tabular-nums;font-weight:700;font-size:.85rem}
.recorder__limit{font-size:.72rem;color:var(--zp-muted)}
.recorder__action{
  min-height:36px;padding:6px 14px;
  border:1px solid rgb(255 255 255 / .2);border-radius:var(--zp-radius-pill);
  background:transparent;color:var(--zp-text);font-size:.8rem;font-weight:600;cursor:pointer;
}
.recorder__send{border-color:transparent;background:var(--zp-grad-cta)}
.recorder__cancel{margin-left:auto}

/* upload status */
.media-status{
  margin:0 0 8px;padding:10px 12px;
  border:1px solid rgb(255 255 255 / .1);border-radius:14px;
  background:var(--zp-surface-2);
}
.media-status[hidden]{display:none}
.media-status__row{display:flex;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--zp-text-2)}
.media-status__pct{font-variant-numeric:tabular-nums;color:var(--zp-text)}
.media-status__bar{
  display:block;width:100%;height:6px;margin:8px 0 0;
  border:0;border-radius:99px;overflow:hidden;background:var(--zp-surface-3);
  appearance:none;
}
.media-status__bar::-webkit-progress-bar{background:var(--zp-surface-3);border-radius:99px}
.media-status__bar::-webkit-progress-value{background:var(--zp-grad-cta);border-radius:99px}
.media-status__bar::-moz-progress-bar{background:var(--zp-violet);border-radius:99px}
.media-status[data-state="error"]{border-color:rgb(255 138 138 / .4)}
.media-status[data-state="error"] .media-status__label{color:var(--zp-danger)}
.media-status__retry{
  margin-top:8px;min-height:36px;padding:6px 14px;
  border:1px solid rgb(255 255 255 / .2);border-radius:var(--zp-radius-pill);
  background:transparent;color:var(--zp-text);font-size:.8rem;font-weight:600;cursor:pointer;
}
.media-status__retry[hidden]{display:none}

/* media bubbles */
.msg__media{margin:0;max-width:100%}
.msg__media img{
  display:block;width:100%;max-width:280px;height:auto;
  border-radius:12px;background:var(--zp-surface-3);cursor:zoom-in;
}
.msg__media video{display:block;width:100%;max-width:280px;border-radius:12px;background:#000}
.msg__media audio{display:block;width:min(280px,72vw);height:40px}
.msg__media-fallback{
  display:inline-block;color:var(--zp-yellow);text-decoration:underline;overflow-wrap:anywhere;font-size:.9rem;
}
.msg__media-note{margin:0;font-size:.85rem;color:var(--zp-text-2);font-style:italic}
.msg[data-role="user"] .msg__media-note{color:rgb(255 255 255 / .92)}

/* lightbox */
.lightbox{
  width:min(96vw,900px);max-height:92dvh;padding:0;
  border:0;border-radius:16px;background:rgb(4 2 8 / .96);
  color:var(--zp-text);
}
.lightbox::backdrop{background:rgb(4 2 8 / .86)}
.lightbox__img{display:block;width:100%;height:auto;max-height:82dvh;object-fit:contain;border-radius:16px 16px 0 0}
.lightbox__close{
  display:block;width:100%;min-height:48px;
  border:0;background:var(--zp-surface-2);color:var(--zp-text);
  font-size:.9rem;font-weight:700;cursor:pointer;
}

@media (prefers-reduced-motion:reduce){
  .recorder__dot{animation:none;opacity:1}
}