/* ================================================================
   CHAT256 — CLEAN PRODUCTION THEME
   Production theme
   One stylesheet. No cascade patch stack.
   ================================================================ */

:root{
  --c-bg:#050b13;
  --c-bg-2:#07111b;
  --c-surface:#0b1723;
  --c-surface-2:#0f1d2b;
  --c-surface-3:#132536;
  --c-glass:rgba(9,22,35,.94);
  --c-line:rgba(148,185,211,.16);
  --c-line-strong:rgba(103,232,249,.28);
  --c-text:#edf7ff;
  --c-muted:#8ea5ba;
  --c-dim:#657d93;
  --c-accent:#58dfff;
  --c-accent-2:#26c8ed;
  --c-good:#45d6a0;
  --c-danger:#ff7185;
  --c-radius:18px;
  --c-shadow:0 24px 80px rgba(0,0,0,.42);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --font:Inter,"SF Pro Display","Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  min-height:100%;
  background:var(--c-bg);
  color-scheme:dark;
}

body{
  min-width:0;
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
  background:
    radial-gradient(900px 520px at 50% -15%,rgba(71,202,247,.09),transparent 62%),
    radial-gradient(700px 500px at 100% 100%,rgba(25,140,190,.045),transparent 70%),
    var(--c-bg);
  color:var(--c-text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.45;
  letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

button,input,textarea,select{font:inherit;color:inherit}
button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed;opacity:.55}
img,video{max-width:100%}
svg{display:block}
.hide,[hidden]{display:none!important}
.modal.hide,.modal[hidden]{display:none!important}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid rgba(88,223,255,.72);
  outline-offset:2px;
}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(143,178,202,.22);border-radius:999px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- Buttons ---------- */
.primary,
.secondary,
.send,
.text-btn{
  -webkit-appearance:none;
  appearance:none;
}

.primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  width:100%;
  padding:0 18px;
  border:1px solid transparent;
  border-radius:14px;
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2));
  color:#031018;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(34,196,235,.16);
  transition:transform .14s ease,filter .14s ease,box-shadow .14s ease;
}
.primary:hover{filter:brightness(1.05);box-shadow:0 14px 34px rgba(34,196,235,.22)}
.primary:active{transform:translateY(1px) scale(.99)}
.primary.sm{width:auto;min-height:40px;padding:0 15px;font-size:13px}

.secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  width:100%;
  padding:0 16px;
  border:1px solid var(--c-line);
  border-radius:13px;
  background:rgba(255,255,255,.025);
  color:var(--c-text);
  font-weight:750;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,transform .14s ease;
}
.secondary:hover{background:rgba(88,223,255,.075);border-color:var(--c-line-strong)}
.secondary:active{transform:scale(.99)}
.secondary.sm{width:auto;min-height:38px;padding:0 13px;font-size:12px}

.send{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  min-height:46px;
  padding:0 18px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,var(--c-accent),#35cbe9);
  color:#031018;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(36,202,238,.16);
}

.text-btn{
  border:0;
  background:transparent;
  color:var(--c-accent);
  font-weight:800;
  cursor:pointer;
  padding:7px 5px;
}

/* ---------- Landing ---------- */
.modal{
  position:fixed;
  inset:0;
  z-index:4000;
  display:grid;
  place-items:center;
  min-height:100dvh;
  padding:calc(24px + var(--safe-top)) 16px calc(28px + var(--safe-bottom));
  background:rgba(2,7,13,.78);
  backdrop-filter:blur(16px);
}
.card{
  width:min(430px,100%);
  padding:28px 24px 24px;
  border:1px solid var(--c-line);
  border-radius:24px;
  background:linear-gradient(155deg,rgba(13,28,43,.97),rgba(7,17,28,.97));
  box-shadow:var(--c-shadow);
}
.card.center{text-align:center}
.card.glow{box-shadow:0 0 0 1px rgba(88,223,255,.07),var(--c-shadow)}
.badge{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(88,223,255,.09);
  color:var(--c-accent);
  font-size:11px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.logo{font-weight:900;font-size:24px}
.logo.sm{font-size:18px;margin:8px 0}
.hero{margin:8px 0 12px;font-size:29px;line-height:1.12;letter-spacing:-.035em}
.lead{margin:8px 0;color:var(--c-muted);font-size:14px;line-height:1.55}
.perks{margin:18px 0;padding:0;list-style:none;text-align:left}
.perks li{display:flex;gap:10px;padding:7px 0;font-size:14px;font-weight:650}
.perks li span{color:var(--c-good);font-weight:900}
.join-box{margin-top:8px}
label{display:block;margin:12px 0 6px;color:var(--c-muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
input,textarea,select{
  border:1px solid var(--c-line);
  border-radius:13px;
  background:rgba(255,255,255,.035);
}
input,select{width:100%;min-height:46px;padding:0 13px}
textarea{resize:none}
input:focus,textarea:focus,select:focus{
  border-color:rgba(88,223,255,.55);
  box-shadow:0 0 0 3px rgba(88,223,255,.09);
  outline:0;
}
.mark{
  display:grid;
  place-items:center;
  width:48px;height:48px;
  border-radius:16px;
  color:#04121b;
  background:linear-gradient(145deg,#72e6ff,#2dbbe4);
}
.mark.lg{width:64px;height:64px;margin:0 auto 14px;border-radius:20px}
.mark.sm{width:38px;height:38px;border-radius:13px}
.pulse{animation:c256-pulse 2.5s ease-in-out infinite}
@keyframes c256-pulse{
  0%,100%{box-shadow:0 10px 30px rgba(34,196,235,.16)}
  50%{box-shadow:0 0 0 9px rgba(34,196,235,0)}
}

/* ---------- App shell ---------- */
#app{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  height:100dvh;
  overflow:hidden;
  background:
    radial-gradient(900px 500px at 55% 0,rgba(73,195,237,.045),transparent 68%),
    var(--c-bg);
}
#app.hide,#app.landing,#app.prejoin{display:none!important}

.net{
  flex:0 0 auto;
  padding:7px 12px;
  background:#7c2d12;
  color:#ffedd5;
  text-align:center;
  font-size:12px;
  font-weight:800;
}

/* ---------- Header ---------- */
.bar{
  position:relative;
  z-index:8000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:58px;
  padding:9px 12px;
  padding-top:max(9px,var(--safe-top));
  border-bottom:1px solid var(--c-line);
  background:rgba(5,11,19,.92);
  backdrop-filter:blur(18px);
  overflow:visible;
}
.bar-left,.bar-right{display:flex;align-items:center;min-width:0;overflow:visible}
.bar-left{gap:10px}
.bar-right{gap:7px;margin-left:auto}
.room-name{font-weight:900;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-meta{display:flex;align-items:center;gap:5px;color:var(--c-muted);font-size:12px}
.room-meta #online{color:var(--c-accent);font-weight:850}
.icon-btn{
  display:grid;
  place-items:center;
  width:40px;height:40px;
  padding:0;
  border:1px solid var(--c-line);
  border-radius:13px;
  background:rgba(16,31,47,.82);
  color:var(--c-text);
  cursor:pointer;
  transition:background .14s,border-color .14s,transform .14s;
}
.icon-btn:hover{background:rgba(88,223,255,.075);border-color:var(--c-line-strong)}
.icon-btn:active{transform:scale(.96)}
.header-action-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.header-action-badge{display:none!important}
.header-notification-slot{display:inline-flex;align-items:center}

/* ---------- Menu ---------- */
.chat256-room-menu{position:relative;z-index:5100;overflow:visible}
.chat256-menu-button{font-size:18px;letter-spacing:2px}
.chat256-room-menu-panel{
  position:fixed;
  top:calc(58px + var(--safe-top) + 6px);
  right:12px;
  width:250px;
  z-index:5200;
  padding:8px;
  border:1px solid var(--c-line-strong);
  border-radius:16px;
  background:rgba(8,19,30,.98);
  box-shadow:0 24px 70px rgba(0,0,0,.48);
  backdrop-filter:blur(20px);
}
#chat256-room-menu[hidden]{display:none!important}
.chat256-menu-title{
  padding:8px 10px 7px;
  color:var(--c-dim);
  font-size:10px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.chat256-menu-item{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:9px;
  width:100%;
  min-height:44px;
  padding:7px 9px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:var(--c-text);
  text-align:left;
  font-weight:750;
  cursor:pointer;
}
.chat256-menu-item:hover{background:rgba(88,223,255,.075)}
.chat256-menu-item:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
.chat256-menu-item{-webkit-user-select:none;user-select:none}
.chat256-menu-icon{
  display:grid;
  place-items:center;
  width:30px;height:30px;
  border:1px solid var(--c-line);
  border-radius:9px;
  background:rgba(255,255,255,.025);
  color:var(--c-accent);
}
.chat256-menu-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chat256-menu-divider{height:1px;margin:6px 4px;background:var(--c-line)}
.chat256-menu-danger{color:#ff9aaa}

/* ---------- Invite banner ---------- */
.key-banner{
  position:relative;
  z-index:80;
  flex:0 0 auto;
  padding:13px 14px 14px;
  border-bottom:1px solid var(--c-line);
  background:linear-gradient(180deg,rgba(20,34,54,.92),rgba(15,28,45,.86));
}
.key-label{
  color:#9bb0c6;
  font-size:11px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.invite-note{margin:4px 0 8px;color:var(--c-muted);font-size:12px}
.key-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.key-row code{
  color:var(--c-accent);
  font:800 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.06em;
}

/* ---------- People / contacts sheets ---------- */
.sheet{
  position:absolute;
  top:calc(58px + var(--safe-top) + 82px);
  left:0;
  z-index:300;
  right:0;
  width:100%;
  max-width:none;
  max-height:min(62dvh,520px);
  padding:0;
  border:1px solid var(--c-line-strong);
  border-radius:0 0 18px 0;
  background:rgba(9,19,31,.97);
  box-shadow:0 24px 70px rgba(0,0,0,.4);
  overflow:auto;
  backdrop-filter:blur(18px);
}
.sheet-close{
  flex:0 0 auto;
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  font-size:18px!important;
  line-height:1!important;
}
.sheet-h{
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--c-line);
  background:rgba(9,19,31,.98);
  color:#9fb3c7;
  font-size:11px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}
#user-list{padding:7px}
.user-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:9px 10px;
  border-bottom:1px solid rgba(148,185,211,.08);
}
.user-row:last-child{border-bottom:0}
.user-row-main{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.user-row .dot,.contact-dot{
  width:8px;height:8px;flex:0 0 auto;border-radius:50%;
  background:var(--c-good);
  box-shadow:0 0 0 4px rgba(69,214,160,.07);
}
.user-row-actions{display:none;gap:6px;margin-left:auto}.user-row-actions.c256-actions-open{display:flex}
.user-row-actions .secondary{width:auto}
.user-you{color:var(--c-muted);font-size:12px}
#contacts-panel{padding-bottom:12px}
.contacts-empty{padding:28px 16px;color:var(--c-muted);text-align:center}
.contacts-list{padding:6px 10px}
.contact-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 4px;
  border-bottom:1px solid rgba(148,185,211,.08);
}
.contact-details{min-width:0;flex:1}
.contact-title{display:flex;align-items:center;gap:8px;font-weight:800}
.contact-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contact-id,.contact-sub{color:var(--c-dim);font-size:11px}
.contact-actions{display:flex;gap:6px;flex:0 0 auto}
.contact-actions button{width:auto}
.contact-status{min-height:20px;padding:6px 14px;color:var(--c-accent);font-size:12px}
.contacts-hint{padding:8px 14px;color:var(--c-dim);font-size:11px;line-height:1.5}

/* ---------- Main message stream ---------- */
.msgs{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  overflow-y:auto;
  overflow-x:hidden;
  padding:22px 20px 20px;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.msg{
  display:flex;
  align-items:flex-end;
  gap:10px;
  width:100%;
  max-width:100%;
  margin:0 0 12px;
  min-width:0;
}
.msg .av{
  flex:0 0 36px;
  display:grid;
  place-items:center;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(88,223,255,.10);
  border:1px solid rgba(88,223,255,.18);
  color:var(--c-accent);
  font-size:13px;
  font-weight:900;
}
.msg .bubble{
  min-width:0;
  max-width:min(980px,88vw);
  padding:11px 14px;
  border:1px solid var(--c-line);
  border-radius:16px;
  background:linear-gradient(155deg,#0f1e2d,#0c1825);
  color:var(--c-text);
  box-shadow:0 10px 28px rgba(0,0,0,.13);
  overflow:visible;
}
.msg.mine{justify-content:flex-end}
.msg.mine .av{order:2}
.msg.mine .bubble{
  order:1;
  background:linear-gradient(155deg,#0f1e2d,#0c1825);
  border-color:var(--c-line);
}
.msg.sys .bubble{background:#0d1927}
.meta{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-bottom:4px;
  color:var(--c-dim);
  font-size:11px;
}
.who{color:var(--c-accent);font-weight:850}
.msg.sys .who{color:#65e2ca}
.c256-clickable-user{cursor:pointer;text-decoration:underline;text-decoration-color:rgba(88,223,255,.22);text-underline-offset:2px}
.txt{
  min-width:0;
  color:var(--c-text);
  font-size:15px;
  line-height:1.48;
  overflow-wrap:anywhere;
  word-break:break-word;
}
.txt.gone{color:var(--c-dim);font-style:italic}
.reacts{min-height:0;margin-top:6px;color:#b6c8d7;font-size:14px}
.ticks{margin-top:3px;color:#7e97aa;font-size:11px;text-align:right}
.c256-row-muted{opacity:.6}
.c256-row-faded{opacity:.35}
.empty{display:grid;place-items:center;min-height:100%;padding:50px 20px;color:var(--c-muted);text-align:center}
.empty-ico{font-size:38px;margin-bottom:10px}
.empty-t{margin-bottom:5px;color:var(--c-text);font-size:18px;font-weight:850}
.empty-d{max-width:440px;font-size:13px;line-height:1.55}
.invite-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ---------- Attachments: natural geometry, never crop the image ---------- */
.c256-attachment-row{min-width:0}
.c256-attachment-card,
.c256-photo-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(100%,920px);
  max-width:100%;
  min-width:0;
  padding:10px;
  border:1px solid rgba(112,188,220,.18);
  border-radius:15px;
  background:rgba(20,44,64,.72);
  overflow:hidden;
}
.c256-photo-stage{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  padding:0;
  border:0;
  border-radius:11px;
  background:#06101a;
  overflow:hidden;
  cursor:pointer;
}
.c256-photo-thumb{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:min(620px,72vh)!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:10px;
}
.c256-photo-stage:not(.is-ready) .c256-photo-thumb{min-height:70px}
.c256-photo-stage.is-failed{padding:20px;text-align:center}
.c256-photo-state{position:absolute;left:10px;right:10px;bottom:8px;color:#d8ebf5;font-size:11px;text-align:center;text-shadow:0 2px 8px #000}
.c256-photo-state.is-error{color:#ff9aaa}
.c256-attachment-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  color:var(--c-muted);
  font-size:11px;
}
.c256-attachment-info strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--c-text);font-size:12px}
.c256-attachment-info small{flex:0 0 auto}
.c256-attachment-icon{display:none}
.c256-attachment-image{display:block;max-width:100%;height:auto}
.c256-photo-preview-failed{display:none!important}
.c256-media-viewer{
  position:fixed;
  inset:0;
  z-index:9000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(0,4,9,.92);
  backdrop-filter:blur(14px);
}
.c256-media-viewer-frame{
  position:relative;
  max-width:min(1100px,96vw);
  max-height:92dvh;
  overflow:auto;
  padding:10px;
  border:1px solid var(--c-line-strong);
  border-radius:18px;
  background:#07131f;
}
.c256-media-viewer img,.c256-media-viewer video{display:block;max-width:100%;max-height:82dvh;object-fit:contain}

/* ---------- Composer ---------- */
.composer{
  position:relative;
  z-index:100;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px 52px;
  align-items:end;
  gap:8px;
  flex:0 0 auto;
  width:100%;
  padding:9px 10px;
  padding-bottom:max(9px,var(--safe-bottom));
  border-top:1px solid var(--c-line);
  background:rgba(9,19,31,.97);
  backdrop-filter:blur(18px);
}
.composer textarea#input{
  width:100%;
  min-width:0;
  min-height:46px;
  max-height:150px;
  padding:11px 14px;
  border:1px solid var(--c-line);
  border-radius:14px;
  background:#111d2c;
  color:var(--c-text);
  font-size:16px;
  line-height:1.35;
}
.composer textarea#input::placeholder{color:#8097ac}
.composer .c256-attach-button,
.composer [data-c256-room-attach]{
  width:48px;
  min-width:48px;
  height:48px;
  min-height:48px;
  margin:0;
  padding:0;
  font-size:21px;
}
.composer > .send{width:52px;min-width:52px;height:46px;margin:0}
.composer > .c256-attach-button,.composer > [data-c256-room-attach],.composer > textarea#input,.composer > .composer-voice,.composer > .send{min-width:0;grid-row:1}
.composer > input[type=file],
.c256-private-composer > input[type=file]{display:none!important}
.trust-bar{
  flex:0 0 auto;
  padding:7px 10px calc(7px + var(--safe-bottom));
  background:#0b1522;
  color:#8298ad;
  text-align:center;
  font-size:11px;
}

/* ---------- Reply/reactions ---------- */
.reply-bar{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:8px 12px;
  border-top:1px solid var(--c-line);
  background:#0b1623;
  color:var(--c-muted);
  font-size:12px;
}
.reply-bar #reply-preview{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.react-bar{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:8px;
  border-top:1px solid var(--c-line);
  background:#0a1420;
}
.react-bar button{
  width:42px;height:38px;
  border:1px solid var(--c-line);
  border-radius:12px;
  background:#111e2d;
  cursor:pointer;
}

/* ---------- User popover ---------- */
.c256-user-popover{
  position:fixed;
  z-index:5000;
  left:var(--c256-pop-x,8px);
  top:var(--c256-pop-y,8px);
  width:210px;
  display:grid;
  gap:7px;
  padding:10px;
  border:1px solid var(--c-line-strong);
  border-radius:16px;
  background:rgba(8,19,30,.98);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.c256-user-popover strong{font-size:13px}
.c256-user-popover small{color:var(--c-dim)}

/* ---------- Share panel ---------- */
body.share-open{overflow:hidden}
.share-panel{
  position:fixed;
  inset:0;
  z-index:8000;
  display:grid;
  place-items:center;
  padding:20px;
}
.share-panel.hide{display:none!important}
.share-backdrop{position:absolute;inset:0;background:rgba(1,5,12,.84);backdrop-filter:blur(15px)}
.share-card{
  position:relative;
  z-index:1;
  width:min(520px,100%);
  max-height:min(92dvh,780px);
  overflow:auto;
  padding:26px;
  border:1px solid var(--c-line-strong);
  border-radius:20px;
  background:linear-gradient(155deg,rgba(11,29,45,.98),rgba(6,17,28,.98));
  box-shadow:var(--c-shadow);
}
.share-close{
  position:absolute;
  top:12px;right:12px;
  width:38px;height:38px;
  border:1px solid var(--c-line);
  border-radius:11px;
  background:rgba(255,255,255,.035);
  color:var(--c-text);
  font-size:23px;
  cursor:pointer;
}
.share-head{padding-right:44px;text-align:center}
.share-kicker{color:var(--c-accent);font-size:11px;font-weight:900;letter-spacing:.12em}
.share-head h2{margin:7px 0;font-size:23px}
.share-head p,.share-note{color:var(--c-muted);font-size:12px;line-height:1.55}
.qr-wrap{
  width:min(300px,76vw);
  margin:20px auto;
  padding:14px;
  border-radius:17px;
  background:#fff;
}
.qr-code{display:grid;place-items:center;width:100%;aspect-ratio:1;overflow:hidden}
.qr-code img{display:block;width:100%;height:auto;max-width:100%;background:#fff}
.qr-caption{margin-top:8px;color:#26374a;font-size:10px;font-weight:850;text-align:center}
.share-link-box{
  padding:11px 13px;
  border:1px solid var(--c-line);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.share-url{
  display:block;
  color:#a9bed0;
  font:600 11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow-wrap:anywhere;
  word-break:break-all;
  user-select:all;
}
.share-actions{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;margin-top:10px}
.share-actions button{min-height:44px;margin:0}
.share-note{margin:12px 0 0;text-align:center}

/* ---------- Notifications: one centered presentation owner ---------- */
#chat256-toast-host.chat256-toast-stack{
  position:fixed!important;
  top:max(10px,var(--safe-top) + 10px)!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  z-index:2147483000!important;
  width:min(430px,calc(100vw - 20px))!important;
  max-width:430px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  pointer-events:none!important;
}
#chat256-toast-host .chat256-toast{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 34px!important;
  align-items:center!important;
  gap:9px!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:10px!important;
  border:1px solid rgba(103,232,249,.25)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(10,29,45,.98),rgba(5,16,27,.98))!important;
  color:var(--c-text)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.42)!important;
  opacity:0!important;
  transform:translateY(-7px)!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  transition:opacity .18s ease,transform .18s ease!important;
}
#chat256-toast-host .chat256-toast.is-visible{opacity:1!important;transform:none!important}
#chat256-toast-host .chat256-toast-icon{
  display:grid!important;
  place-items:center!important;
  width:42px!important;height:42px!important;
  margin:0!important;
  border:1px solid rgba(103,232,249,.18)!important;
  border-radius:12px!important;
  background:rgba(88,223,255,.08)!important;
  color:var(--c-accent)!important;
}
#chat256-toast-host .chat256-toast-icon svg{
  width:22px!important;height:22px!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
#chat256-toast-host .chat256-toast-content{
  min-width:0!important;
  max-width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:hidden!important;
  text-align:left!important;
}
#chat256-toast-host .chat256-toast-content strong,
#chat256-toast-host .chat256-toast-content span{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-align:left!important;
}
#chat256-toast-host .chat256-toast-content strong{font-size:13px!important;font-weight:900!important}
#chat256-toast-host .chat256-toast-content span{margin-top:2px;color:#9eb4c7!important;font-size:12px!important}
#chat256-toast-host .chat256-toast-close{
  display:grid!important;
  place-items:center!important;
  width:34px!important;height:34px!important;
  margin:0!important;padding:0!important;
  border:1px solid var(--c-line)!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.035)!important;
  color:#a9bfd0!important;
  font-size:18px!important;
  line-height:1!important;
  cursor:pointer!important;
}
#chat256-toast-host .chat256-toast-close:hover{color:#fff!important;background:rgba(255,255,255,.08)!important}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .sheet{top:calc(58px + var(--safe-top) + 84px);max-height:58dvh}
  .msg .bubble{max-width:min(980px,88vw)}
}

@media (max-width:640px){
  .bar{min-height:54px;padding:7px 8px;padding-top:max(7px,var(--safe-top))}
  .bar-right{gap:5px}
  .icon-btn{width:38px;height:38px}
  .room-name{font-size:14px}
  #ttl-live{
    width:78px;min-width:78px;height:40px;
    padding:0 10px;
    border:1px solid var(--c-line);
    border-radius:13px;
    background:#050b13!important;
    color:var(--c-text);
    color-scheme:dark;
    -webkit-appearance:auto;
    appearance:auto;
  }
  #ttl-live option{background:#050b13;color:#edf7ff}
  .key-banner{padding:11px 10px 12px}
  .key-row{gap:7px}
  .msgs{padding:15px 9px 16px}
  .msg{gap:7px;margin-bottom:9px}
  .msg .av{width:32px;height:32px;flex-basis:32px}
  .msg .bubble{max-width:calc(100vw - 66px);padding:10px 12px}
  .composer{
    grid-template-columns:44px minmax(0,1fr) 44px 46px;
    gap:6px;
    padding:7px 7px;
    padding-bottom:max(7px,var(--safe-bottom));
    align-items:end;
  }
  .composer .c256-attach-button,
  .composer [data-c256-room-attach]{width:46px;min-width:46px;height:46px;min-height:46px}
  .composer > .send{width:46px;min-width:46px;height:46px}
  .share-panel{padding:10px;align-items:end}
  .share-card{width:100%;max-height:94dvh;padding:22px 16px 18px;border-radius:18px 18px 12px 12px}
  .share-actions{grid-template-columns:1fr}
  .share-actions button{width:100%}
  .qr-wrap{width:min(270px,78vw);margin:16px auto}
  .chat256-room-menu-panel{
    position:fixed;
    top:calc(54px + var(--safe-top) + 6px);
    right:8px;
    width:min(300px,calc(100vw - 16px));
  }
  #chat256-toast-host.chat256-toast-stack{
    top:max(8px,var(--safe-top) + 8px)!important;
    width:calc(100vw - 16px)!important;
    max-width:none!important;
  }
  #chat256-toast-host .chat256-toast{
    grid-template-columns:38px minmax(0,1fr) 32px!important;
    gap:8px!important;
    padding:8px!important;
  }
  #chat256-toast-host .chat256-toast-icon{width:38px!important;height:38px!important}
  #chat256-toast-host .chat256-toast-close{width:32px!important;height:32px!important}
  .sheet{
    top:calc(54px + var(--safe-top) + 88px);
    left:0;right:0;width:100%;max-width:none;
    border-radius:0 0 16px 16px;
  }
}

@media (hover:hover){
  .c256-private-message:hover{border-color:rgba(103,232,249,.22);box-shadow:0 10px 28px rgba(0,0,0,.16)}
  .c256-private-conversation:hover{transform:translateY(-1px)}
}

.c256-private-head .c256-private-back,
.c256-private-head .c256-private-desktop-close,
.c256-private-inbox-close{
  flex:0 0 auto;
  border-color:rgba(148,185,211,.18);
  background:rgba(15,29,43,.82);
}
.c256-private-head .c256-private-back:hover,
.c256-private-head .c256-private-desktop-close:hover,
.c256-private-inbox-close:hover{
  border-color:rgba(88,223,255,.42);
  background:#10283a;
}
.c256-private-composer #c256-private-input::placeholder{color:#71879a}
.c256-private-composer #c256-private-input:focus{
  border-color:rgba(88,223,255,.52);
  box-shadow:0 0 0 3px rgba(88,223,255,.08);
}
.c256-private-ttl:focus{border-color:rgba(88,223,255,.52);box-shadow:0 0 0 3px rgba(88,223,255,.08)}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .primary,.chat256-toast-host .chat256-toast{transition:none!important;animation:none!important}
}


/* ================================================================
   PRIVATE CHAT — SINGLE AUTHORITATIVE LAYER
   Mobile-safe: no backdrop-filter, no transform on the scrolling tree,
   stable viewport geometry, and animations limited to newly inserted rows.
   ================================================================ */
body.c256-private-open{overflow:hidden}

#c256-private-backdrop[hidden]{display:none!important}
#c256-private-backdrop{
  position:fixed;
  inset:0;
  z-index:6999;
  background:rgba(1,5,11,.76);
  pointer-events:auto;
}

#c256-private-panel{
  position:fixed;
  inset:0;
  z-index:7000;
  display:grid;
  place-items:start center;
  padding:calc(70px + var(--safe-top)) 18px 18px;
  background:rgba(1,5,11,.76);
  overflow:hidden;
  isolation:isolate;
}
#c256-private-panel[hidden]{display:none!important}
#c256-private-panel[inert]{pointer-events:none}

.c256-private-shell{
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  width:min(1040px,calc(100vw - 36px));
  height:min(720px,calc(100vh - 106px - var(--safe-top)));
  max-height:calc(100vh - 106px - var(--safe-top));
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(103,232,249,.22);
  border-radius:20px;
  background:#08131f;
  box-shadow:0 28px 90px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.025) inset;
}
@supports (height:100dvh){
  .c256-private-shell{
    height:min(720px,calc(100dvh - 106px - var(--safe-top)));
    max-height:calc(100dvh - 106px - var(--safe-top));
  }
}

.c256-private-inbox,
.c256-private-conversation-panel{
  min-width:0;
  min-height:0;
}
.c256-private-inbox{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-right:1px solid var(--c-line);
  background:#091722;
}
.c256-private-inbox-head,
.c256-private-head{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--c-line);
  background:#0a1724;
}
.c256-private-inbox-head{
  justify-content:space-between;
  min-height:76px;
  padding:14px;
}
.c256-private-inbox-head strong{display:block;font-size:16px;font-weight:900}
.c256-private-inbox-head span{display:block;margin-top:2px;color:var(--c-muted);font-size:11px}
.c256-private-inbox-close,
.c256-private-desktop-close,
.c256-private-back{width:40px!important;min-width:40px!important;height:40px!important;min-height:40px!important;padding:0!important}

.c256-private-conversations{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:10px;
  overscroll-behavior:contain;
}
.c256-private-conversation{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:68px;
  margin:0 0 7px;
  padding:9px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:var(--c-text);
  text-align:left;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.c256-private-conversation:hover{background:rgba(88,223,255,.055)}
.c256-private-conversation:active{transform:scale(.995)}
.c256-private-conversation[aria-selected="true"]{border-color:rgba(88,223,255,.23);background:rgba(88,223,255,.075)}
.c256-private-avatar{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(88,223,255,.17);background:#102b3e;color:#c5f5ff;font-weight:900;
}
.c256-private-conversation-body{min-width:0}
.c256-private-conversation-top{display:flex;align-items:center;gap:7px;min-width:0}
.c256-private-conversation-top strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.c256-private-online-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--c-good);box-shadow:0 0 0 4px rgba(69,214,160,.05)}
.c256-private-conversation-preview{display:block;margin-top:3px;color:var(--c-dim);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c256-private-conversation-time{color:var(--c-dim);font-size:10px;white-space:nowrap}
.c256-private-inbox-empty{margin:auto 14px 14px;padding:14px;border:1px dashed rgba(148,185,211,.13);border-radius:13px;color:var(--c-dim);font-size:11px;line-height:1.5;text-align:center}

.c256-private-conversation-panel{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  overflow:hidden;
  background:#08131f;
}
.c256-private-head{min-height:70px;padding:10px 12px}
.c256-private-peer{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.c256-private-peer-avatar{width:42px;height:42px}
.c256-private-peer strong{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.c256-private-secure{display:flex;align-items:center;gap:5px;margin-top:2px;color:var(--c-dim);font-size:10px}
.c256-private-secure span{width:6px;height:6px;border-radius:50%;background:var(--c-good)}

.c256-private-messages{
  min-width:0;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:9px;
  overscroll-behavior:contain;
  overflow-anchor:auto;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}
.c256-private-empty{margin:auto;color:var(--c-dim);font-size:12px;text-align:center}

.c256-private-message{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  align-self:flex-start;
  width:fit-content;
  max-width:min(78%,720px);
  min-width:0;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--c-line);
  border-radius:15px;
  background:linear-gradient(155deg,#0f1e2d,#0c1825);
  color:var(--c-text);
  overflow-wrap:anywhere;
  word-break:break-word;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.c256-private-message.is-incoming{margin-right:auto}
.c256-private-message.is-outgoing{align-self:flex-end;margin-left:auto}
.c256-private-message.is-new{animation:c256-private-message-in .18s ease-out both}
@keyframes c256-private-message-in{from{opacity:.01;transform:translateY(5px)}to{opacity:1;transform:none}}
.c256-private-text{min-width:0;max-width:100%;overflow-wrap:anywhere}
.c256-private-meta{margin-top:4px;color:var(--c-dim);font-size:10px}
.c256-private-message-actions{display:flex;justify-content:flex-end;width:100%;min-height:0;margin-top:6px}
.c256-private-message-delete{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:68px!important;min-height:30px!important;padding:0 11px!important;border:1px solid rgba(103,232,249,.22)!important;border-radius:9px!important;background:#0a1724!important;color:#b8cfdf!important;font-size:11px!important;font-weight:800!important;line-height:1!important;opacity:1!important;cursor:pointer!important}
.c256-private-message-delete:hover,.c256-private-message-delete:focus-visible{background:#10283a!important;border-color:rgba(103,232,249,.5)!important;color:var(--c-accent)!important}

.c256-private-attachment-card{width:min(760px,100%);max-width:100%}
.c256-private-attachment-card .c256-photo-thumb{display:block!important;width:100%!important;height:auto!important;min-height:0!important;max-height:min(560px,68vh)!important;aspect-ratio:auto!important;object-fit:contain!important}

.c256-private-composer{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto 76px;
  align-items:end;
  gap:8px;
  min-width:0;
  padding:9px;
  border-top:1px solid var(--c-line);
  background:#0a1724;
}
.c256-private-composer #c256-private-input{width:100%;min-width:0;min-height:46px;max-height:150px;padding:11px 13px;resize:none;border:1px solid var(--c-line);border-radius:13px;background:#111d2c;color:var(--c-text);font-size:16px;line-height:1.35}
.c256-private-composer [data-c256-attach]{width:48px!important;min-width:48px!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0!important}
.c256-private-composer .c256-private-emoji{display:none!important}
.c256-private-ttl{width:72px;min-width:72px;height:46px;padding:0 8px;border:1px solid var(--c-line);border-radius:12px;background:#111d2c;color:var(--c-text);color-scheme:dark;font-size:11px;font-weight:800}
.c256-private-composer>.send{width:76px;min-width:76px;height:46px;margin:0}
.c256-private-hint{min-height:25px;padding:3px 12px 7px;color:var(--c-dim);font-size:10px;text-align:right}

@media (max-width:900px){
  #c256-private-panel{
    place-items:start center;
    padding:calc(62px + var(--safe-top)) var(--safe-right) var(--safe-bottom) var(--safe-left);
  }
  .c256-private-shell{
    width:100%;
    height:calc(100vh - 62px - var(--safe-top) - var(--safe-bottom));
    max-height:calc(100vh - 62px - var(--safe-top) - var(--safe-bottom));
    border:0;
    border-radius:18px 18px 0 0;
    grid-template-columns:1fr;
    box-shadow:0 -14px 48px rgba(0,0,0,.28);
  }
  @supports (height:100dvh){
    .c256-private-shell{
      height:calc(100dvh - 62px - var(--safe-top) - var(--safe-bottom));
      max-height:calc(100dvh - 62px - var(--safe-top) - var(--safe-bottom));
    }
  }
  .c256-private-inbox{display:none}
  .c256-private-conversation-panel{display:grid;min-height:0}
  #c256-private-panel.c256-private-show-inbox .c256-private-inbox{display:flex}
  #c256-private-panel.c256-private-show-inbox .c256-private-conversation-panel{display:none}
  .c256-private-message{max-width:90%}
}

@media (max-width:640px){
  #c256-private-panel{
    background:rgba(5,11,19,.92);
    padding:calc(62px + var(--safe-top)) 0 var(--safe-bottom);
  }
  .c256-private-shell{
    width:100%;
    height:calc(100svh - 62px - var(--safe-top) - var(--safe-bottom));
    max-height:calc(100svh - 62px - var(--safe-top) - var(--safe-bottom));
    min-height:0;
    border-radius:16px 16px 0 0;
    box-shadow:0 -12px 40px rgba(0,0,0,.32);
  }
  @supports (height:100dvh){
    .c256-private-shell{
      height:calc(100dvh - 62px - var(--safe-top) - var(--safe-bottom));
      max-height:calc(100dvh - 62px - var(--safe-top) - var(--safe-bottom));
    }
  }
  .c256-private-head{min-height:60px;padding:8px 9px}
  .c256-private-head .c256-private-desktop-close{
    width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;
  }
  .c256-private-messages{padding:10px 9px 12px;gap:8px}
  .c256-private-message{max-width:min(92%,760px);padding:9px 11px}
  .c256-private-composer{
    grid-template-columns:48px minmax(0,1fr) 68px 68px;
    gap:6px;
    padding:7px;
    padding-bottom:max(7px,var(--safe-bottom));
    background:linear-gradient(180deg,#0a1724,#091520);
  }
  .c256-private-composer [data-c256-attach]{display:inline-flex!important;width:48px!important;min-width:48px!important;height:44px!important;min-height:44px!important}
  .c256-private-composer #c256-private-input{min-height:44px;max-height:120px}
  .c256-private-ttl{width:68px;min-width:68px;height:44px}
  .c256-private-composer>.send{width:68px;min-width:68px;height:44px}
  .c256-private-hint{display:none}
  .c256-private-attachment-card{width:100%}
  .c256-private-attachment-card .c256-photo-thumb{max-height:55svh!important}
}

@media (prefers-reduced-motion:reduce){
  .c256-private-message.is-new{animation:none}
  .c256-private-conversation{transition:none}
}

@media (max-width:640px){
  #c256-private-panel{isolation:isolate;}
  .c256-private-shell{isolation:isolate;}
  .c256-private-messages{scrollbar-gutter:auto;}
  .c256-private-message{box-shadow:none;}
}

/* People sheet: explicit interaction layer. Keep it above room content, below the room menu. */
#people-sheet{z-index:5300;pointer-events:auto}
#people-sheet[hidden]{display:none!important}
#people-sheet[inert]{pointer-events:none}
#people-sheet .user-row-actions button,
#people-sheet .user-row-menu-button{pointer-events:auto}

#chat256-room-menu{z-index:8100!important}

/* ================================================================
   CHAT256 LIGHT THEME — V4
   Muted blue/slate surfaces; high text contrast; dark identity
   retained in the top bar, invite banner and menu.
   ================================================================ */
:root[data-c256-theme="light"]{
  color-scheme:light;
  --c-bg:#e9eff4;
  --c-bg-2:#f1f5f8;
  --c-surface:#ffffff;
  --c-surface-2:#f6f9fb;
  --c-surface-3:#e8eef3;
  --c-text:#0f1c2d;
  --c-muted:#536579;
  --c-dim:#718194;
  --c-accent:#0d8caf;
  --c-accent-2:#1fb6d8;
  --c-line:#cbd7e1;
  --c-shadow:0 24px 70px rgba(12,30,48,.17);
}
:root[data-c256-theme="light"] body{
  background:linear-gradient(180deg,#f4f7f9 0%,#e7edf2 100%);
  color:#0f1c2d;
}
:root[data-c256-theme="light"] #app{
  background:linear-gradient(180deg,#edf3f7 0%,#e6edf2 100%);
}
:root[data-c256-theme="light"] .bar{
  background:#09121d;
  color:#f5f9fc;
  border-bottom-color:#1e3041;
}
:root[data-c256-theme="light"] .bar .room-meta{color:#a9bac9}
:root[data-c256-theme="light"] .icon-btn{
  background:#132334;
  border-color:#2a4054;
  color:#edf7fc;
}
:root[data-c256-theme="light"] .icon-btn:hover{background:#183449;border-color:#3e7187}
:root[data-c256-theme="light"] .chat256-room-menu-panel{
  background:#101d2b;
  color:#edf7fc;
  border-color:#2c5268;
}
:root[data-c256-theme="light"] .key-banner{
  background:#16283a;
  color:#edf6fb;
  border-bottom-color:#294154;
}
:root[data-c256-theme="light"] .msgs{
  background:#e8eef3;
  color:#132236;
}
:root[data-c256-theme="light"] .msgs *{color:inherit}
:root[data-c256-theme="light"] .empty{color:#162438}
:root[data-c256-theme="light"] .empty-d{color:#617286}
:root[data-c256-theme="light"] .composer{
  background:#f8fafc;
  border-top-color:#cbd7e1;
}
:root[data-c256-theme="light"] .composer textarea{
  background:#fff;
  color:#102033;
  border-color:#c7d4df;
}
:root[data-c256-theme="light"] .composer textarea::placeholder{color:#718196}
:root[data-c256-theme="light"] .primary,
:root[data-c256-theme="light"] .send{
  background:#0f9cbd;
  color:#fff;
}
:root[data-c256-theme="light"] .secondary{
  background:#fff;
  color:#142338;
  border-color:#c4d1dc;
}
:root[data-c256-theme="light"] input,
:root[data-c256-theme="light"] textarea,
:root[data-c256-theme="light"] select{
  background:#fff;
  color:#112136;
  border-color:#c6d3de;
  color-scheme:light;
}
:root[data-c256-theme="light"] .card{
  background:#fff;
  color:#102033;
  border-color:#cbd7e1;
  box-shadow:0 24px 70px rgba(12,30,48,.19);
}
:root[data-c256-theme="light"] .lead,
:root[data-c256-theme="light"] label{color:#5e7185}
:root[data-c256-theme="light"] .sheet{
  background:#fff;
  color:#102033;
  border-color:#cbd7e1;
}
:root[data-c256-theme="light"] .sheet-h{
  background:#f5f8fa;
  border-bottom-color:#d6e0e7;
}

/* Main chat bubbles — explicit contrast */
:root[data-c256-theme="light"] .msg,
:root[data-c256-theme="light"] .message,
:root[data-c256-theme="light"] .bubble{
  color:#102033;
}
:root[data-c256-theme="light"] .msg.in,
:root[data-c256-theme="light"] .message.in,
:root[data-c256-theme="light"] .bubble.incoming{
  background:#fff;
  color:#102033;
  border-color:#d0dbe4;
}
:root[data-c256-theme="light"] .msg.out,
:root[data-c256-theme="light"] .message.out,
:root[data-c256-theme="light"] .bubble.outgoing{
  background:#118faf;
  color:#fff;
  border-color:#118faf;
}
:root[data-c256-theme="light"] .msg .meta,
:root[data-c256-theme="light"] .message .meta{color:#728397}
:root[data-c256-theme="light"] .msg.out .meta,
:root[data-c256-theme="light"] .message.out .meta{color:rgba(255,255,255,.76)}

/* Private Messages */
:root[data-c256-theme="light"] #c256-private-panel{background:rgba(8,19,30,.46)}
:root[data-c256-theme="light"] .c256-private-shell{background:#fff;color:#102033;border-color:#c8d5df;box-shadow:0 30px 90px rgba(8,26,43,.22)}
:root[data-c256-theme="light"] .c256-private-inbox{background:#f3f7f9;border-right-color:#d3dee6}
:root[data-c256-theme="light"] .c256-private-inbox-head,
:root[data-c256-theme="light"] .c256-private-head{background:#fff;border-bottom-color:#d6e0e7;color:#102033}
:root[data-c256-theme="light"] .c256-private-inbox-head strong,
:root[data-c256-theme="light"] .c256-private-peer strong{color:#102033}
:root[data-c256-theme="light"] .c256-private-inbox-head span,
:root[data-c256-theme="light"] .c256-private-secure,
:root[data-c256-theme="light"] .c256-private-conversation-preview,
:root[data-c256-theme="light"] .c256-private-conversation-time{color:#687b8e}
:root[data-c256-theme="light"] .c256-private-conversation{color:#132337}
:root[data-c256-theme="light"] .c256-private-conversation:hover{background:#eaf4f7}
:root[data-c256-theme="light"] .c256-private-conversation[aria-selected="true"]{background:#dff1f5;border-color:#a4d3df}
:root[data-c256-theme="light"] .c256-private-avatar{background:#e2f3f7;color:#087f9f;border-color:#b6d9e2}
:root[data-c256-theme="light"] .c256-private-conversation-panel{background:#fff}
:root[data-c256-theme="light"] .c256-private-messages{background:#eaf0f4;color:#132337}
:root[data-c256-theme="light"] .c256-private-empty{color:#718295}
:root[data-c256-theme="light"] .c256-private-message{background:#fff;color:#102033;border-color:#d0dbe4;box-shadow:0 5px 18px rgba(16,36,55,.07)}
:root[data-c256-theme="light"] .c256-private-message.is-outgoing{background:#118faf;color:#fff;border-color:#118faf}
:root[data-c256-theme="light"] .c256-private-message.is-incoming{background:#fff;color:#102033}
:root[data-c256-theme="light"] .c256-private-message.is-outgoing .c256-private-meta{color:rgba(255,255,255,.76)}
:root[data-c256-theme="light"] .c256-private-message.is-incoming .c256-private-meta{color:#718295}
:root[data-c256-theme="light"] .c256-private-composer{background:#fff;border-top-color:#d5dfe7}
:root[data-c256-theme="light"] .c256-private-composer #c256-private-input{background:#f7f9fb;color:#102033;border-color:#cbd7e1}
:root[data-c256-theme="light"] .c256-private-composer #c256-private-input::placeholder{color:#75869a}
:root[data-c256-theme="light"] .c256-private-ttl{background:#fff;color:#102033;border-color:#cbd7e1;color-scheme:light}
:root[data-c256-theme="light"] .c256-private-hint,
:root[data-c256-theme="light"] .c256-private-status{color:#708195}
:root[data-c256-theme="light"] .c256-private-message-delete{background:#f5f8fa!important;color:#526578!important;border-color:#cad6df!important}

/* ================================================================
   CHAT256 LIGHT THEME — PRODUCTION POLISH
   Fully light application surface. The dark screenshot bug came
   from hard-coded original bubble/menu colours overriding tokens.
   ================================================================ */
:root[data-c256-theme="light"] .bar{
  background:#f8fbfd !important;
  color:#102033 !important;
  border-bottom:1px solid #d5e0e8 !important;
  box-shadow:0 1px 0 rgba(12,36,55,.03);
}
:root[data-c256-theme="light"] .bar .room-meta{color:#63788c !important}
:root[data-c256-theme="light"] .bar .room-meta #online{color:#159b78 !important}
:root[data-c256-theme="light"] .icon-btn{
  background:#ffffff !important;
  border:1px solid #cbd8e2 !important;
  color:#173047 !important;
  box-shadow:0 2px 8px rgba(18,43,61,.06);
}
:root[data-c256-theme="light"] .icon-btn:hover{
  background:#edf8fb !important;
  border-color:#8fcbd9 !important;
  color:#087f9f !important;
}

/* Light menu: readable, calm, and consistent with the light app. */
:root[data-c256-theme="light"] .chat256-room-menu-panel{
  background:#ffffff !important;
  color:#102033 !important;
  border:1px solid #cbd8e2 !important;
  box-shadow:0 20px 55px rgba(12,31,48,.18) !important;
}
:root[data-c256-theme="light"] .chat256-menu-title{color:#75879a !important}
:root[data-c256-theme="light"] .chat256-menu-item{
  color:#173047 !important;
  background:transparent !important;
}
:root[data-c256-theme="light"] .chat256-menu-item:hover,
:root[data-c256-theme="light"] .chat256-menu-item:focus-visible{
  background:#edf8fb !important;
  color:#087f9f !important;
}
:root[data-c256-theme="light"] .chat256-menu-icon{
  background:#f3f8fa !important;
  border-color:#cbd8e2 !important;
  color:#0b89aa !important;
}
:root[data-c256-theme="light"] .chat256-menu-separator{border-color:#dbe4ea !important}

/* Invite/key banner stays slightly blue for visual separation. */
:root[data-c256-theme="light"] .key-banner{
  background:#e7f0f6 !important;
  color:#173047 !important;
  border-bottom:1px solid #cad8e2 !important;
}
:root[data-c256-theme="light"] .key-label{color:#526b80 !important}
:root[data-c256-theme="light"] .invite-note{color:#60778b !important}
:root[data-c256-theme="light"] .key-row code{color:#0b7896 !important}

/* Main chat — remove all inherited dark bubble colours. */
:root[data-c256-theme="light"] .msgs{
  background:#edf3f7 !important;
  color:#102033 !important;
}
:root[data-c256-theme="light"] .msg .bubble{
  background:#ffffff !important;
  color:#102033 !important;
  border:1px solid #d2dde5 !important;
  box-shadow:0 7px 22px rgba(22,46,65,.08) !important;
}
:root[data-c256-theme="light"] .msg .bubble .txt{
  color:#102033 !important;
}
:root[data-c256-theme="light"] .msg .bubble .meta{color:#728497 !important}
:root[data-c256-theme="light"] .msg .bubble .who{color:#087f9f !important}
:root[data-c256-theme="light"] .msg.mine .bubble{
  background:#118faf !important;
  color:#ffffff !important;
  border-color:#118faf !important;
}
:root[data-c256-theme="light"] .msg.mine .bubble .txt{color:#ffffff !important}
:root[data-c256-theme="light"] .msg.mine .bubble .meta{color:rgba(255,255,255,.78) !important}
:root[data-c256-theme="light"] .msg.mine .bubble .who{color:#ffffff !important}
:root[data-c256-theme="light"] .msg.sys .bubble{
  background:#e1edf3 !important;
  color:#29445a !important;
  border-color:#c7d8e2 !important;
}
:root[data-c256-theme="light"] .msg.sys .bubble .txt{color:#29445a !important}
:root[data-c256-theme="light"] .msg.sys .bubble .who{color:#0b8a69 !important}

:root[data-c256-theme="light"] .msg .av{
  background:#e0f3f7 !important;
  border-color:#b9dce5 !important;
  color:#0a83a3 !important;
}

/* Composer */
:root[data-c256-theme="light"] .composer{
  background:#f8fbfd !important;
  border-top:1px solid #d2dde5 !important;
}
:root[data-c256-theme="light"] .composer textarea#input{
  background:#ffffff !important;
  color:#102033 !important;
  border-color:#cbd8e2 !important;
  box-shadow:inset 0 1px 2px rgba(18,40,56,.025);
}
:root[data-c256-theme="light"] .composer textarea#input::placeholder{color:#7b8d9e !important}
:root[data-c256-theme="light"] .composer .c256-attach-button,
:root[data-c256-theme="light"] .composer [data-c256-room-attach]{
  background:#ffffff !important;
  border-color:#cbd8e2 !important;
  color:#234158 !important;
}
:root[data-c256-theme="light"] .composer > .send{
  background:#19a5c5 !important;
  color:#ffffff !important;
  border-color:#19a5c5 !important;
  box-shadow:0 8px 22px rgba(25,165,197,.18);
}

/* Private Messages — complete light treatment. */
:root[data-c256-theme="light"] #c256-private-panel{background:rgba(12,31,48,.34) !important}
:root[data-c256-theme="light"] .c256-private-shell{
  background:#ffffff !important;
  color:#102033 !important;
  border-color:#cbd8e2 !important;
  box-shadow:0 28px 80px rgba(10,31,49,.20) !important;
}
:root[data-c256-theme="light"] .c256-private-inbox{
  background:#f3f7f9 !important;
  border-right-color:#d5e0e7 !important;
}
:root[data-c256-theme="light"] .c256-private-inbox-head,
:root[data-c256-theme="light"] .c256-private-head{
  background:#ffffff !important;
  color:#102033 !important;
  border-bottom-color:#d5e0e7 !important;
}
:root[data-c256-theme="light"] .c256-private-inbox-head strong,
:root[data-c256-theme="light"] .c256-private-peer strong{color:#102033 !important}
:root[data-c256-theme="light"] .c256-private-inbox-head span,
:root[data-c256-theme="light"] .c256-private-secure,
:root[data-c256-theme="light"] .c256-private-conversation-preview,
:root[data-c256-theme="light"] .c256-private-conversation-time{color:#687d90 !important}
:root[data-c256-theme="light"] .c256-private-conversation{color:#102033 !important}
:root[data-c256-theme="light"] .c256-private-conversation:hover{background:#edf8fb !important}
:root[data-c256-theme="light"] .c256-private-conversation[aria-selected="true"]{background:#e0f3f7 !important;border-color:#a8d6e0 !important}
:root[data-c256-theme="light"] .c256-private-avatar{background:#e0f3f7 !important;color:#087f9f !important;border-color:#b8dbe4 !important}
:root[data-c256-theme="light"] .c256-private-conversation-panel{background:#ffffff !important}
:root[data-c256-theme="light"] .c256-private-messages{background:#edf3f7 !important;color:#102033 !important}
:root[data-c256-theme="light"] .c256-private-empty{color:#718397 !important}
:root[data-c256-theme="light"] .c256-private-message{
  background:#ffffff !important;
  color:#102033 !important;
  border-color:#d2dde5 !important;
  box-shadow:0 5px 18px rgba(16,36,55,.07) !important;
}
:root[data-c256-theme="light"] .c256-private-message *{color:inherit}
:root[data-c256-theme="light"] .c256-private-message.is-incoming{background:#ffffff !important;color:#102033 !important}
:root[data-c256-theme="light"] .c256-private-message.is-outgoing{background:#118faf !important;color:#ffffff !important;border-color:#118faf !important}
:root[data-c256-theme="light"] .c256-private-message.is-outgoing *{color:#ffffff !important}
:root[data-c256-theme="light"] .c256-private-message.is-incoming .c256-private-meta{color:#718397 !important}
:root[data-c256-theme="light"] .c256-private-composer{background:#ffffff !important;border-top-color:#d5e0e7 !important}
:root[data-c256-theme="light"] .c256-private-composer #c256-private-input{background:#f8fafb !important;color:#102033 !important;border-color:#cbd8e2 !important}
:root[data-c256-theme="light"] .c256-private-composer #c256-private-input::placeholder{color:#7b8d9e !important}
:root[data-c256-theme="light"] .c256-private-ttl{background:#ffffff !important;color:#102033 !important;border-color:#cbd8e2 !important}
:root[data-c256-theme="light"] .c256-private-hint,
:root[data-c256-theme="light"] .c256-private-status{color:#718397 !important}
:root[data-c256-theme="light"] .c256-private-message-delete{background:#f3f7f9 !important;color:#4f6578 !important;border-color:#cbd8e2 !important}

/* Light buttons in sheets/dialogs. */
:root[data-c256-theme="light"] .sheet,
:root[data-c256-theme="light"] .card,
:root[data-c256-theme="light"] .dialog,
:root[data-c256-theme="light"] .panel,
:root[data-c256-theme="light"] .c256-panel{
  background:#ffffff !important;
  color:#102033 !important;
  border-color:#cbd8e2 !important;
}

/* ================================================================
   PRIVATE CHAT MODAL — V6 PRESENTATION FIX
   The private window is a modal. Never allow the underlying room
   history/composer to bleed through it in light mode. Those rows are
   the existing room DOM, not private-message history.
   ================================================================ */
:root[data-c256-theme="light"] #c256-private-panel{
  background:#e7edf2 !important;
}
:root[data-c256-theme="light"] #c256-private-backdrop{
  background:rgba(11,25,39,.52) !important;
}
:root[data-c256-theme="light"] .c256-private-shell{
  background:#ffffff !important;
}

/* Keep the modal visually self-contained even when the browser has
   retained older room DOM underneath it. */
body.c256-private-open #msgs,
body.c256-private-open .composer,
body.c256-private-open .trust-bar{
  visibility:hidden;
}

/* ================================================================
   CHAT256 LIVE APP — PRESENTATION SYSTEM
   Visual layer only. Existing IDs, events, crypto, storage and
   module ownership remain unchanged.
   ================================================================ */
:root{
  --c-bg:#04080f;
  --c-bg-2:#050a12;
  --c-surface:#07111c;
  --c-surface-2:#0b1724;
  --c-surface-3:#0d1b2a;
  --c-input:#08131f;
  --c-line:rgba(90,180,220,.16);
  --c-line-strong:rgba(90,180,220,.27);
  --c-text:#f5f9fc;
  --c-muted:#7f93a6;
  --c-dim:#5f7386;
  --c-secondary:#a9b7c4;
  --c-accent:#16bfff;
  --c-accent-2:#22d3ff;
  --c-bright:#2fd7ff;
  --c-good:#5de0a0;
  --c-radius:24px;
  --c-shadow:0 30px 90px rgba(0,0,0,.48);
}

html,body{background:#04080f}
body{
  background:
    radial-gradient(900px 540px at 50% -18%,rgba(22,191,255,.065),transparent 64%),
    radial-gradient(700px 520px at 100% 100%,rgba(21,153,255,.035),transparent 70%),
    #04080f;
}

/* ---------- Shared brand ---------- */
.brand-lockup{display:inline-flex;align-items:center;gap:10px;min-width:0}
.brand-mark{display:block;width:38px;height:38px;flex:0 0 auto}
.brand-wordmark{display:inline-flex;align-items:baseline;font-size:17px;font-weight:900;letter-spacing:.045em;line-height:1;color:#f5f9fc}
.brand-wordmark b{color:#22d3ff;font-weight:900}
.brand-lockup-small .brand-mark{width:28px;height:28px}
.brand-lockup-small .brand-wordmark{font-size:15px}
.brand-lockup-center{justify-content:center;gap:12px}
.brand-lockup-center .brand-mark{width:56px;height:56px}
.brand-lockup-center .brand-wordmark{font-size:27px}

/* ---------- Landing / boot ---------- */
.modal{padding:calc(28px + var(--safe-top)) 18px calc(30px + var(--safe-bottom));background:rgba(1,5,11,.82)}
.card{
  width:min(440px,100%);
  padding:30px;
  border:1px solid rgba(90,180,220,.18);
  border-radius:26px;
  background:
    radial-gradient(520px 220px at 50% 0,rgba(22,191,255,.055),transparent 70%),
    linear-gradient(150deg,rgba(11,23,36,.98),rgba(5,12,20,.985));
  box-shadow:0 36px 110px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.025);
}
.card.glow{box-shadow:0 36px 110px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.025)}
.boot-card{display:grid;gap:16px;justify-items:center;padding:28px}
.boot-status{display:flex;align-items:center;gap:8px;color:var(--c-muted);font-size:12px}
.status-dot,.trust-dot{width:6px;height:6px;border-radius:50%;background:var(--c-good);box-shadow:0 0 0 4px rgba(93,224,160,.07)}
.badge{border:1px solid rgba(22,191,255,.16);background:rgba(22,191,255,.06);color:#5fe0ff}
.hero{font-size:clamp(30px,7vw,40px);letter-spacing:-.045em}
.lead.sell{max-width:370px}
.perks{margin:22px 0}
.perks li{padding:8px 0;color:#dbe7ee}
.primary{min-height:48px;border-radius:14px;background:linear-gradient(135deg,#22d3ff,#169eea);color:#031018;box-shadow:0 12px 34px rgba(22,191,255,.13)}
.primary:hover{box-shadow:0 16px 40px rgba(22,191,255,.19)}
.secondary{min-height:46px;border-radius:14px;background:rgba(255,255,255,.018);border-color:rgba(90,180,220,.16)}
.secondary:hover{background:rgba(22,191,255,.055);border-color:rgba(90,180,220,.29)}
input,textarea,select{background:var(--c-input);border-color:rgba(90,180,220,.16)}

/* ---------- Application shell ---------- */
#app{
  width:min(1360px,calc(100vw - 28px));
  height:calc(100dvh - 28px);
  min-height:0;
  margin:14px auto;
  border:1px solid rgba(90,180,220,.19);
  border-radius:28px;
  overflow:hidden;
  background:#050a12;
  box-shadow:0 35px 120px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.025);
  isolation:isolate;
}
#app.hide{display:none!important}
.app-body{display:flex;min-width:0;min-height:0;height:100%;flex:1 1 auto}
.chat-main{display:flex;flex:1 1 auto;min-width:0;min-height:0;flex-direction:column;background:linear-gradient(180deg,#07111c,#050b13)}

/* ---------- Sidebar system ---------- */
.sidebar{
  position:relative;
  display:flex;
  flex:0 0 244px;
  flex-direction:column;
  min-width:0;
  padding:22px 14px 16px;
  border-right:1px solid rgba(90,180,220,.12);
  background:
    radial-gradient(260px 240px at 0 0,rgba(22,191,255,.055),transparent 70%),
    linear-gradient(180deg,#06101a,#050c14);
}
.sidebar-brand{padding:0 9px 24px}
.sidebar-brand .brand-mark{width:34px;height:34px}
.sidebar-brand .brand-wordmark{font-size:16px}
.sidebar-section-label{padding:0 10px 8px;color:#506679;font-size:9px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.sidebar-nav{display:grid;gap:4px}
.sidebar-nav-item{
  position:relative;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  width:100%;
  min-height:44px;
  padding:6px 9px;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  color:#8fa2b2;
  text-align:left;
  font-size:13px;
  font-weight:750;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.sidebar-nav-item:hover{background:rgba(22,191,255,.045);border-color:rgba(90,180,220,.10);color:#e5f2f7}
.sidebar-nav-item.is-active{background:linear-gradient(90deg,rgba(22,191,255,.105),rgba(22,191,255,.035));border-color:rgba(90,180,220,.15);color:#f3f8fb}
.sidebar-nav-item.is-active:before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:2px;border-radius:99px;background:#22d3ff;box-shadow:0 0 12px rgba(34,211,255,.45)}
.sidebar-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(90,180,220,.10);border-radius:9px;background:rgba(255,255,255,.015);color:#71889a}
.sidebar-nav-item.is-active .sidebar-icon{border-color:rgba(34,211,255,.17);background:rgba(22,191,255,.055);color:#22d3ff}
.sidebar-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.sidebar-nav-badge{width:7px;height:7px;border-radius:50%;background:#22d3ff;box-shadow:0 0 0 4px rgba(34,211,255,.07)}
.sidebar-spacer{flex:1}
.sidebar-security{display:flex;align-items:center;gap:10px;margin:12px 4px 10px;padding:11px;border:1px solid rgba(93,224,160,.11);border-radius:13px;background:rgba(93,224,160,.025)}
.sidebar-security.is-warning{border-color:rgba(255,174,100,.15);background:rgba(255,174,100,.025)}
.sidebar-security-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:rgba(93,224,160,.06);color:#5de0a0}
.sidebar-security.is-warning .sidebar-security-icon{color:#ffb46c;background:rgba(255,174,100,.06)}
.sidebar-security-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sidebar-security strong{display:block;color:#c7d7e0;font-size:11px;font-weight:800}
.sidebar-security small{display:block;margin-top:2px;color:#587082;font-size:9px}
.sidebar-foot{padding:0 8px;color:#405568;font-size:9px;letter-spacing:.03em}

/* ---------- Header ---------- */
.bar{min-height:72px;padding:11px 18px;border-bottom:1px solid rgba(90,180,220,.12);background:rgba(5,12,20,.78);backdrop-filter:blur(20px)}
.bar-left{gap:12px}
.mobile-brand{display:none}
.room-name{font-size:16px;letter-spacing:-.015em}
.room-meta{gap:6px;color:#6f8496;font-size:11px}
.room-meta #online{color:#22d3ff}
.connection-pill{display:inline-flex;align-items:center;gap:5px;margin-left:5px;padding-left:7px;border-left:1px solid rgba(90,180,220,.13);color:#7d95a5;font-size:10px;font-weight:700}
.connection-pill i{width:5px;height:5px;border-radius:50%;background:#5de0a0;box-shadow:0 0 0 3px rgba(93,224,160,.06)}
.connection-pill.is-warning{color:#c99a6b}.connection-pill.is-warning i{background:#ffb46c;box-shadow:0 0 0 3px rgba(255,180,108,.06)}
.bar-right{gap:7px}
.icon-btn{width:38px;height:38px;border-radius:11px;background:rgba(10,23,36,.78);border-color:rgba(90,180,220,.13)}
.header-action-icon svg{width:19px;height:19px}

/* Compact TTL control */
.ttl-control{display:flex;align-items:center;gap:6px;width:auto;min-height:38px;margin:0;padding:0 5px 0 8px;border:1px solid rgba(90,180,220,.13);border-radius:11px;background:rgba(8,19,31,.75);color:#7f93a6;cursor:pointer}
.ttl-icon{display:grid;place-items:center;color:#16bfff}
.ttl-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ttl-label{font-size:10px;font-weight:750;white-space:nowrap}
.ttl-control select{width:auto;min-height:30px;padding:0 19px 0 5px;border:0;background:transparent;color:#c1ced7;font-size:11px;font-weight:750;outline:0}
.ttl-control select:focus{box-shadow:none}

/* ---------- Menu ---------- */
.chat256-room-menu-panel{top:calc(72px + var(--safe-top) + 7px);right:max(12px,calc((100vw - min(1360px,100vw - 28px))/2 + 12px));width:256px;padding:8px;border-radius:16px;border-color:rgba(90,180,220,.20);background:rgba(7,17,28,.97);box-shadow:0 28px 80px rgba(0,0,0,.54),inset 0 1px 0 rgba(255,255,255,.02)}
.chat256-menu-item{min-height:42px;border-radius:10px;color:#d8e5eb;font-size:12px}
.chat256-menu-item:hover{background:rgba(22,191,255,.055)}
.chat256-menu-icon{width:29px;height:29px;border-radius:8px;border-color:rgba(90,180,220,.11);background:rgba(255,255,255,.012)}
.chat256-menu-icon svg{width:16px;height:16px;stroke-width:1.6}

/* ---------- Invite banner ---------- */
.key-banner{padding:10px 18px 11px;border-bottom:1px solid rgba(90,180,220,.10);background:linear-gradient(180deg,rgba(9,21,34,.88),rgba(7,16,27,.78))}
.key-label{color:#63798b;font-size:9px}
.invite-note{margin:3px 0 7px;color:#657b8d;font-size:10px}
.key-row code{font-size:12px;color:#21d2ff}

/* ---------- Sheets ---------- */
.sheet{top:calc(72px + var(--safe-top) + 78px);max-height:min(64dvh,560px);border-radius:0 0 18px 0;border-color:rgba(90,180,220,.18);background:rgba(7,17,28,.97);box-shadow:0 28px 80px rgba(0,0,0,.45)}
.sheet-h{padding:13px 16px;background:rgba(7,17,28,.98);color:#8195a5;font-size:10px}

/* ---------- Message stream ---------- */
.msgs{padding:26px clamp(18px,4vw,52px) 22px;background:radial-gradient(720px 460px at 52% 0,rgba(22,191,255,.025),transparent 68%)}
.msg{gap:9px;margin-bottom:14px;animation:c256-message-in .18s ease-out both}
@keyframes c256-message-in{from{opacity:.01;transform:translateY(4px)}to{opacity:1;transform:none}}
.msg .av{width:32px;height:32px;flex-basis:32px;border-color:rgba(90,180,220,.14);background:#0a1a28;color:#28cfff;font-size:11px}
.msg .bubble{max-width:min(760px,82%);padding:12px 14px;border-radius:17px;border-color:rgba(90,180,220,.12);background:linear-gradient(145deg,#0c1927,#091521);box-shadow:0 12px 30px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.015)}
.msg.mine .bubble{background:linear-gradient(145deg,#0d2b3c,#0a2232);border-color:rgba(34,211,255,.17)}
.meta{margin-bottom:5px;color:#5f7587;font-size:10px}
.who{color:#25cfff}
.txt{font-size:15px;line-height:1.5}
.ticks{color:#6d8798}
.reacts{margin-top:7px}
.empty{min-height:100%;padding:60px 24px}
.empty-ico{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 13px;border:1px solid rgba(90,180,220,.14);border-radius:16px;background:rgba(22,191,255,.035);color:#22d3ff}
.empty-ico svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.empty-t{font-size:17px}.empty-d{color:#6e8496}

/* ---------- Real attachment cards ---------- */
.c256-attachment-card,.c256-photo-card{gap:9px;padding:9px;border-radius:15px;border-color:rgba(90,180,220,.15);background:linear-gradient(145deg,#0c1b29,#091520);box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.c256-photo-stage{border-radius:10px;background:#050c13}
.c256-attachment-info{padding:2px 2px 0;color:#71879a}
.c256-attachment-info strong{font-size:12px}.c256-attachment-info small{font-size:10px;color:#5e7487}
.c256-photo-state{color:#c7dbe5}

/* ---------- Composer ---------- */
.composer{grid-template-columns:46px minmax(0,1fr) 50px;gap:9px;padding:10px 14px;padding-bottom:max(10px,var(--safe-bottom));border-top:1px solid rgba(90,180,220,.12);background:rgba(5,12,20,.88);backdrop-filter:blur(20px)}
.composer textarea#input{min-height:46px;max-height:132px;padding:11px 14px;border-radius:15px;background:#08131f;border-color:rgba(90,180,220,.14);font-size:15px}
.composer textarea#input:focus{border-color:rgba(34,211,255,.34);box-shadow:0 0 0 3px rgba(34,211,255,.055),inset 0 1px 0 rgba(255,255,255,.02)}
.composer .c256-attach-button,.composer [data-c256-room-attach]{width:46px;min-width:46px;height:46px;min-height:46px;padding:0;border-radius:14px}
.composer .c256-attach-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.composer > .send{width:50px;min-width:50px;height:46px;padding:0;border-radius:14px;background:linear-gradient(145deg,#20cfff,#139ee9);box-shadow:0 10px 28px rgba(22,191,255,.15)}
.composer > .send svg{width:20px;height:20px;fill:none;stroke:#031018;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reply-bar{min-height:40px;padding:7px 14px;background:#08131f;border-top-color:rgba(90,180,220,.10)}
.react-bar{padding:7px;background:#07111c;border-top-color:rgba(90,180,220,.08)}
.react-bar button{width:38px;height:34px;border-radius:10px;background:#0b1927;border-color:rgba(90,180,220,.12)}
.trust-bar{display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px calc(7px + var(--safe-bottom));background:#050c14;color:#4f6677;font-size:9px;letter-spacing:.03em}

/* ---------- Share / QR ---------- */
.share-panel{padding:22px}
.share-backdrop{background:rgba(1,5,11,.86);backdrop-filter:blur(18px)}
.share-card{width:min(540px,100%);padding:28px;border-radius:24px;border-color:rgba(90,180,220,.20);background:radial-gradient(480px 220px at 50% 0,rgba(22,191,255,.05),transparent 70%),linear-gradient(155deg,#0b1927,#050d16);box-shadow:0 40px 120px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.02)}
.share-close{width:36px;height:36px;top:13px;right:13px;border-radius:10px;color:#9db0bf}
.share-head h2{font-size:24px;letter-spacing:-.025em}.share-head p,.share-note{color:#72889a}
.qr-wrap{width:min(300px,76vw);margin:20px auto;padding:15px;border:1px solid rgba(22,191,255,.18);border-radius:19px;background:#f5f9fc;box-shadow:0 18px 50px rgba(0,0,0,.24),0 0 40px rgba(22,191,255,.045)}
.qr-code img{image-rendering:pixelated}.qr-caption{color:#1d3041;font-size:10px;letter-spacing:.02em}
.share-link-box{border-color:rgba(90,180,220,.13);background:rgba(255,255,255,.018)}
.share-url{color:#9bb1c1}
.share-actions{gap:8px}.share-actions button{border-radius:12px}

/* ---------- Private chat ---------- */
#c256-private-panel{background:rgba(1,5,11,.80);backdrop-filter:blur(10px)}
.c256-private-shell{width:min(1080px,calc(100vw - 36px));height:min(730px,calc(100dvh - 88px));border-radius:24px;border-color:rgba(90,180,220,.19);background:#07111c;box-shadow:0 35px 110px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.02)}
.c256-private-inbox{background:#06101a;border-right-color:rgba(90,180,220,.11)}
.c256-private-inbox-head,.c256-private-head{background:#07131f;border-bottom-color:rgba(90,180,220,.11)}
.c256-private-conversation{border-color:transparent}.c256-private-conversation:hover{background:rgba(22,191,255,.045)}
.c256-private-conversation[aria-selected="true"]{background:rgba(22,191,255,.07);border-color:rgba(90,180,220,.15)}
.c256-private-avatar{background:#0a1e2c;border-color:rgba(90,180,220,.14);color:#72e5ff}
.c256-private-conversation-panel{background:#07111c}
.c256-private-messages{padding:20px;background:radial-gradient(520px 420px at 60% 0,rgba(22,191,255,.022),transparent 72%)}
.c256-private-message{padding:11px 13px;border-radius:16px;background:linear-gradient(145deg,#0c1927,#091520);border-color:rgba(90,180,220,.12)}
.c256-private-message.is-outgoing{background:linear-gradient(145deg,#0d2b3c,#0a2232);border-color:rgba(34,211,255,.16)}
.c256-private-composer{padding:10px 12px;background:#06101a;border-top-color:rgba(90,180,220,.11)}
.c256-private-composer #c256-private-input{border-radius:14px;background:#08131f;border-color:rgba(90,180,220,.14)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  #app{width:100vw;height:100dvh;margin:0;border-radius:0;border-left:0;border-right:0}
  .sidebar{display:none}
  .mobile-brand{display:inline-flex}
  .bar{min-height:62px;padding:9px 12px}
  .bar-left{flex:1;min-width:0}
  .mobile-brand .brand-mark{width:29px;height:29px}.mobile-brand .brand-wordmark{font-size:13px}
  .bar-left>.room-name,.bar-left>.room-meta{min-width:0}
  .bar-left>div:last-child{min-width:0}
  .room-name{max-width:34vw}
  .ttl-label{display:none}
  .chat256-room-menu-panel{top:calc(62px + var(--safe-top) + 6px);right:8px}
  .sheet{top:calc(62px + var(--safe-top) + 80px)}
  .msgs{padding-left:16px;padding-right:16px}
}
@media (max-width:640px){
  .card{padding:25px 20px;border-radius:22px}
  .brand-lockup-small .brand-mark{width:27px;height:27px}
  .hero{font-size:30px}
  .key-banner{padding:9px 12px 10px}
  .invite-note{max-width:90vw}
  .key-row{gap:6px}.key-row code{font-size:11px}
  .msgs{padding:16px 10px 14px}
  .msg{gap:7px;margin-bottom:10px}
  .msg .av{width:28px;height:28px;flex-basis:28px}
  .msg .bubble{max-width:calc(100vw - 52px);padding:10px 12px;border-radius:15px}
  .txt{font-size:15px}
  .composer{grid-template-columns:44px minmax(0,1fr) 46px;gap:6px;padding:7px 7px;padding-bottom:max(7px,var(--safe-bottom))}
  .composer .c256-attach-button,.composer [data-c256-room-attach]{width:44px;min-width:44px;height:44px;min-height:44px}
  .composer textarea#input{min-height:44px;padding:10px 12px;border-radius:14px}
  .composer > .send{width:46px;min-width:46px;height:44px}
  .trust-bar{padding-bottom:max(7px,var(--safe-bottom))}
  .connection-pill{display:none}
  .share-panel{padding:10px;align-items:end}
  .share-card{width:100%;max-height:94dvh;padding:23px 16px 18px;border-radius:20px 20px 12px 12px}
  .qr-wrap{width:min(270px,78vw);margin:16px auto}
  .share-actions{grid-template-columns:1fr}
  .share-actions button{width:100%}
  .c256-private-shell{width:100%;height:100%;max-height:none;border-radius:20px}
}
@media (max-width:430px){
  .header-action-btn{display:none}
  .bar{gap:4px;padding-left:7px;padding-right:7px}
  .bar-left{gap:7px;flex:1;min-width:0}
  .mobile-brand{flex:0 0 30px;width:30px;gap:0;overflow:hidden}
  .mobile-brand .brand-mark{width:30px;height:30px}
  .mobile-brand .brand-wordmark{display:none}
  .bar-left>div:last-child{flex:1;min-width:0}
  .room-name{max-width:none;width:100%;font-size:13px;overflow:hidden;text-overflow:ellipsis}
  .room-meta{font-size:10px;white-space:nowrap}
  .bar-right{gap:4px;flex:0 0 auto}
  .icon-btn{width:34px;height:34px;min-width:34px;border-radius:10px}
  .workspace-launch svg,.quick-share-btn svg{width:16px;height:16px}
  .ttl-control{width:66px;min-width:66px;min-height:34px;height:34px;padding-left:6px;border-radius:10px}
  #ttl-live{width:56px;min-width:56px;height:32px;padding-left:7px;padding-right:6px;border-radius:9px;font-size:10px}
  .chat256-menu-button{width:34px;height:34px}
  #chat256-room-menu{z-index:8100!important}
  .workspace-panel{z-index:7000!important}
}
@media (max-width:375px){
  .bar{padding-left:6px;padding-right:6px}
  .mobile-brand{flex-basis:28px;width:28px}
  .mobile-brand .brand-mark{width:28px;height:28px}
  .bar-right{gap:3px}
  .icon-btn{width:32px;height:32px;min-width:32px}
  .ttl-control{width:60px;min-width:60px}
  #ttl-live{width:50px;min-width:50px;font-size:9px}
  .key-row code{max-width:65vw;overflow:hidden;text-overflow:ellipsis}
  .empty{padding-left:12px;padding-right:12px}
}
@media (prefers-reduced-motion:reduce){
  .msg,.c256-private-message{animation:none!important}
  .sidebar-nav-item,.primary,.secondary,.icon-btn{transition:none!important}
}
.pulse{animation:none}

.sidebar-current{margin-top:18px;padding:0 5px}
.sidebar-current-label{padding:0 5px 7px;color:#40586a;font-size:8px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.sidebar-current-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 8px;border:1px solid rgba(90,180,220,.09);border-radius:11px;background:rgba(255,255,255,.014)}
.sidebar-current-dot{width:7px;height:7px;border-radius:50%;background:#22d3ff;box-shadow:0 0 0 4px rgba(34,211,255,.055)}
.sidebar-current-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b6c7d2;font-size:11px;font-weight:750}
.sidebar-current-count{color:#5e7587;font-size:9px;font-variant-numeric:tabular-nums}
.c256-attachment-info{position:relative}
.c256-attachment-info::after{content:"✓  Encrypted";display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:4px 7px;border:1px solid rgba(93,224,160,.12);border-radius:999px;background:rgba(93,224,160,.035);color:#79d8af;font-size:9px;font-weight:800;letter-spacing:.02em}
@media (max-width:520px){.c256-attachment-info::after{padding:3px 6px;font-size:8px}}

/* ==========================================================
   CHAT256 WORKSPACE — PRESENTATION SYSTEM
   ========================================================== */
.workspace-launch svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.workspace-panel{position:absolute;z-index:30;inset:72px 0 0 0;display:flex;flex-direction:column;min-width:0;min-height:0;padding:26px clamp(18px,4vw,46px) 30px;background:radial-gradient(720px 420px at 62% 0,rgba(22,191,255,.055),transparent 70%),linear-gradient(180deg,#07111c,#050b13);overflow:auto}
.workspace-panel.hide{display:none!important}
.workspace-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;padding-bottom:20px;border-bottom:1px solid rgba(90,180,220,.10)}
.workspace-kicker{display:block;color:#4f7185;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.workspace-top h2{margin:5px 0 4px;color:#eef7fb;font-size:24px;letter-spacing:-.035em}
.workspace-top p,.workspace-hero-row p,.workspace-product-card p,.workspace-market>p{margin:0;color:#70889a;font-size:11px;line-height:1.55;max-width:640px}
.workspace-close{flex:0 0 38px;font-size:21px}
.workspace-tabs{display:flex;gap:6px;padding:14px 0 16px;border-bottom:1px solid rgba(90,180,220,.08)}
.workspace-tab{min-height:34px;padding:0 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:#71889a;font-size:11px;font-weight:800;cursor:pointer}
.workspace-tab:hover{background:rgba(22,191,255,.045);color:#dbeaf0}
.workspace-tab.is-active{border-color:rgba(34,211,255,.15);background:rgba(22,191,255,.065);color:#dff7ff}
.workspace-view{min-width:0}
.workspace-hero-row{display:flex;justify-content:space-between;gap:20px;padding:24px 0 16px}
.workspace-hero-row h3,.workspace-section-head h3{margin:4px 0 4px;color:#e9f4f8;font-size:17px;letter-spacing:-.02em}
.workspace-actions{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;justify-content:flex-end}
.workspace-upload,.workspace-voice{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 13px;border-radius:11px;font-size:11px}
.workspace-upload svg,.workspace-voice svg,.workspace-drop-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.workspace-voice.is-recording{border-color:rgba(255,120,120,.35);background:rgba(255,90,90,.08);color:#ffb0b0}
.voice-note-timer{font-variant-numeric:tabular-nums;color:#ffb0b0}
.workspace-drop{display:flex;align-items:center;gap:13px;min-height:92px;padding:16px 18px;border:1px dashed rgba(90,180,220,.19);border-radius:17px;background:rgba(255,255,255,.012);transition:border-color .16s ease,background .16s ease,transform .16s ease}
.workspace-drop:hover,.workspace-drop:focus-visible,.workspace-drop.is-dragging{border-color:rgba(34,211,255,.40);background:rgba(22,191,255,.035);outline:none}
.workspace-drop-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:1px solid rgba(34,211,255,.15);border-radius:12px;background:rgba(22,191,255,.05);color:#2bd5ff}
.workspace-drop strong{display:block;color:#dceaf0;font-size:12px}.workspace-drop small{display:block;margin-top:4px;color:#60788a;font-size:10px}
.workspace-section-head{display:flex;justify-content:space-between;align-items:end;gap:12px;padding:26px 0 11px}
.workspace-count{color:#4f6c7d;font-size:10px;font-variant-numeric:tabular-nums}
.workspace-file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:9px}
.workspace-file-grid.hide{display:none}
.workspace-file-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:11px;border:1px solid rgba(90,180,220,.12);border-radius:14px;background:linear-gradient(145deg,rgba(12,27,41,.90),rgba(7,17,28,.92));text-align:left;cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.workspace-file-item:hover{transform:translateY(-1px);border-color:rgba(34,211,255,.25);background:linear-gradient(145deg,rgba(13,34,49,.95),rgba(7,18,29,.95))}
.workspace-file-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:rgba(22,191,255,.07);border:1px solid rgba(22,191,255,.13);color:#46d9ff;font-size:8px;font-weight:900;letter-spacing:.04em}
.workspace-file-copy{min-width:0}.workspace-file-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#dce9ef;font-size:11px}.workspace-file-copy small{display:block;margin-top:3px;color:#5d7486;font-size:9px}
.workspace-file-state{padding:4px 6px;border:1px solid rgba(93,224,160,.12);border-radius:999px;background:rgba(93,224,160,.025);color:#73d8ad;font-size:8px;font-weight:800;white-space:nowrap}
.workspace-empty{display:grid;justify-items:center;gap:5px;padding:48px 20px;border:1px solid rgba(90,180,220,.08);border-radius:17px;background:rgba(255,255,255,.008);text-align:center}.workspace-empty.hide{display:none}
.workspace-empty-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(34,211,255,.13);border-radius:12px;color:#27d2ff;font-size:20px}.workspace-empty strong{color:#cddde5;font-size:12px}.workspace-empty span{max-width:420px;color:#5e7486;font-size:10px;line-height:1.5}
.workspace-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:26px}.workspace-product-card{padding:22px;border:1px solid rgba(90,180,220,.11);border-radius:18px;background:linear-gradient(145deg,rgba(11,27,41,.9),rgba(6,15,24,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.018)}
.workspace-product-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:17px;border:1px solid rgba(34,211,255,.14);border-radius:12px;background:rgba(22,191,255,.05);color:#2dd5ff}.workspace-product-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.workspace-product-card h3{margin:6px 0 7px;color:#e8f4f8;font-size:17px}.workspace-product-card .secondary{margin-top:18px;min-height:38px;font-size:10px}
.workspace-market{max-width:900px;padding:28px 0}.workspace-market h3{margin:5px 0 8px;color:#edf7fa;font-size:24px;letter-spacing:-.03em}.market-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:24px}.market-grid>div{display:grid;gap:5px;padding:14px;border:1px solid rgba(90,180,220,.10);border-radius:13px;background:rgba(255,255,255,.012)}.market-grid strong{color:#cfe0e8;font-size:10px}.market-grid span{color:#587082;font-size:9px;line-height:1.45}
.composer-voice{width:42px;min-width:42px;height:46px;padding:0;border-radius:13px}.composer-voice svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.composer-voice.is-recording{border-color:rgba(255,120,120,.35);color:#ffb0b0;background:rgba(255,90,90,.08)}
#app.is-workspace-view .key-banner,#app.is-workspace-view .msgs,#app.is-workspace-view .composer,#app.is-workspace-view .trust-bar{visibility:hidden}
#app.is-workspace-view .workspace-panel{display:flex}
@media (max-width:900px){.workspace-panel{inset:62px 0 0;padding:18px 14px 24px}.workspace-hero-row{display:grid;grid-template-columns:1fr}.workspace-actions{justify-content:flex-start}.workspace-product-grid{grid-template-columns:1fr}.market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.workspace-file-grid{grid-template-columns:1fr}}
@media (max-width:520px){.workspace-top h2{font-size:20px}.workspace-tabs{overflow:auto}.workspace-tab{flex:0 0 auto}.workspace-drop{align-items:flex-start}.workspace-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.workspace-upload,.workspace-voice{width:100%}.market-grid{grid-template-columns:1fr}.composer-voice{width:42px;min-width:42px}}
@media (max-width:430px){.workspace-launch{display:grid!important}.workspace-launch+ .header-action-btn{display:none}}
@media (prefers-reduced-motion:reduce){.workspace-file-item,.workspace-drop{transition:none}}

/* ============================================================
   V8 — native product landing + media/file workspace polish
   ============================================================ */
.modal{align-items:stretch;overflow:auto;padding:0;background:radial-gradient(900px 620px at 14% 16%,rgba(22,191,255,.075),transparent 68%),radial-gradient(900px 600px at 88% 76%,rgba(21,153,255,.055),transparent 70%),#03070c;backdrop-filter:none}
.landing-shell{position:relative;width:min(1480px,100%);min-height:100dvh;margin:0 auto;padding:22px clamp(18px,4vw,58px) 24px;overflow:hidden}.landing-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.32),transparent 72%)}
.landing-topline,.landing-grid,.landing-bottom{position:relative;z-index:1}.landing-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1360px;margin:0 auto;padding-bottom:18px;border-bottom:1px solid rgba(90,180,220,.10)}.landing-brand .brand-mark{width:40px;height:40px}.landing-brand .brand-wordmark{font-size:18px;letter-spacing:.06em}.landing-security{display:flex;align-items:center;gap:8px;color:#668094;font-size:9px;font-weight:900;letter-spacing:.16em}.landing-security-dot{width:6px;height:6px;border-radius:50%;background:#5de0a0;box-shadow:0 0 0 4px rgba(93,224,160,.07),0 0 14px rgba(93,224,160,.18)}
.landing-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(500px,1.16fr);gap:clamp(28px,5vw,82px);align-items:center;max-width:1360px;margin:0 auto;padding:clamp(48px,7vh,88px) 0 34px}.landing-copy{min-width:0;padding-left:clamp(0px,1vw,14px)}.landing-eyebrow{display:block;color:#4f7185;font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.landing-copy h1{margin:14px 0 20px;font-size:clamp(54px,6.4vw,92px);line-height:.88;letter-spacing:-.075em;font-weight:900;color:#f7fafc}.landing-copy h1 em{font-style:normal;color:#20caff;text-shadow:0 0 30px rgba(32,202,255,.10)}.landing-lead{max-width:620px;margin:0;color:#8496a7;font-size:14px;line-height:1.7}.landing-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.landing-actions button{min-width:190px}.landing-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px}.landing-primary span{font-size:16px}.landing-secondary{min-width:145px!important}.landing-proof{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:22px;color:#91a2af;font-size:8px;font-weight:900;letter-spacing:.11em}.landing-proof i{width:3px;height:3px;border-radius:50%;background:#244253}
.landing-join{max-width:560px;margin-top:18px;padding:17px;border:1px solid rgba(34,211,255,.15);border-radius:16px;background:linear-gradient(145deg,rgba(10,24,36,.96),rgba(5,12,20,.98));box-shadow:0 22px 70px rgba(0,0,0,.30)}.landing-join-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.landing-join-head strong{display:block;margin-top:4px;color:#dfeef4;font-size:13px}.landing-join-lock{display:grid;place-items:center;width:38px;height:38px;border:1px solid rgba(34,211,255,.16);border-radius:11px;color:#2bd4ff;font:900 9px ui-monospace,monospace;background:rgba(22,191,255,.045)}.landing-join label{margin-top:15px}.landing-join input{min-height:48px}.landing-join button{width:100%;margin-top:10px}.landing-join small{display:block;margin-top:9px;color:#5c7283;font-size:9px}
.landing-stage{position:relative;min-width:0;padding:17px;border:1px solid rgba(90,180,220,.15);border-radius:26px;background:linear-gradient(145deg,rgba(7,17,27,.94),rgba(3,9,15,.98));box-shadow:0 40px 120px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.025);overflow:hidden}.landing-stage:after{content:"";position:absolute;inset:auto 8% -32% 8%;height:45%;background:radial-gradient(ellipse,rgba(21,153,255,.11),transparent 70%);pointer-events:none}.landing-stage-glow{position:absolute;width:420px;height:420px;right:-160px;top:-190px;border-radius:50%;background:radial-gradient(circle,rgba(34,211,255,.10),transparent 66%);pointer-events:none}.landing-stage-head{display:flex;justify-content:space-between;gap:12px;padding:4px 7px 15px;color:#4c697b;font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.13em}.landing-stage-head b{color:#6b8a98;font-size:8px}.landing-stage-head b i{display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:#5de0a0;box-shadow:0 0 9px rgba(93,224,160,.35)}
.landing-cap-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:10px}.landing-cap{position:relative;min-width:0;min-height:164px;padding:18px;border:1px solid rgba(90,180,220,.10);border-radius:17px;background:linear-gradient(145deg,rgba(10,24,36,.82),rgba(5,13,21,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.015);overflow:hidden}.landing-cap-large{grid-row:span 2;min-height:340px}.landing-cap-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:20px;border:1px solid rgba(34,211,255,.14);border-radius:12px;background:rgba(22,191,255,.045);color:#2bd4ff}.landing-cap-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.landing-cap-kicker{display:block;color:#4d7082;font-size:8px;font-weight:900;letter-spacing:.14em}.landing-cap h2{margin:6px 0 7px;color:#e8f4f8;font-size:16px;letter-spacing:-.025em}.landing-cap p{max-width:360px;margin:0;color:#687f90;font-size:10px;line-height:1.55}.landing-mini-status{display:flex;align-items:center;gap:7px;margin-top:27px;padding-top:12px;border-top:1px solid rgba(90,180,220,.08);color:#6d8796;font-size:9px}.landing-mini-status span{width:5px;height:5px;border-radius:50%;background:#5de0a0;box-shadow:0 0 10px rgba(93,224,160,.28)}
.landing-qr-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:10px;padding:13px;border:1px solid rgba(90,180,220,.09);border-radius:15px;background:rgba(255,255,255,.012)}.landing-qr-copy{min-width:0}.landing-qr-copy strong{display:block;margin-top:5px;color:#dceaf0;font-size:11px}.landing-qr-copy small{display:block;margin-top:4px;color:#5e7485;font-size:9px}.landing-qr{width:76px;height:76px;flex:0 0 76px;padding:6px;border-radius:11px;background:#f4f8fa;box-shadow:0 8px 30px rgba(0,0,0,.24)}.landing-qr img{display:block;width:100%;height:100%;image-rendering:pixelated}
.landing-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px;max-width:1360px;margin:0 auto;padding-top:10px}.landing-bottom>div{min-height:55px;padding:12px 14px;border:1px solid rgba(90,180,220,.08);border-radius:13px;background:rgba(255,255,255,.008)}.landing-bottom strong{display:block;color:#b9cbd5;font-size:8px;letter-spacing:.12em}.landing-bottom span{display:block;margin-top:4px;color:#526b7b;font-size:8px}.landing-bottom-brand{display:flex!important;align-items:center;gap:7px;border-color:transparent!important;background:transparent!important;color:#c5d6de;font-size:10px;white-space:nowrap}.landing-bottom-brand span{display:inline;margin:0;color:#587082;font-size:9px}
/* Compact invite strip + integrated people/contacts surfaces */
.key-banner{padding:9px 18px 10px;background:linear-gradient(180deg,rgba(8,19,30,.96),rgba(6,14,23,.92));border-bottom:1px solid rgba(90,180,220,.09)}.key-label{font-size:9px;letter-spacing:.14em}.invite-note{display:inline;margin:0 8px 0 0;font-size:9px}.key-row{display:inline-flex;gap:7px;vertical-align:middle}.key-row code{font-size:11px}.sheet{top:calc(58px + var(--safe-top) + 58px);bottom:0;max-height:none;border-radius:0;background:linear-gradient(180deg,#07111c,#050b13);box-shadow:none;border-left:0;border-right:0;border-bottom:0}.sheet-h{background:rgba(7,17,28,.98);padding:14px 18px}.user-row,.contact-row{border-color:rgba(90,180,220,.08)}
.c256-file-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;padding:11px 12px!important;border-radius:14px!important;background:linear-gradient(145deg,#0c1b29,#091520)!important}.c256-file-icon{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(34,211,255,.14);border-radius:11px;background:rgba(22,191,255,.055);color:#42d7ff;font-size:7px;font-weight:900;letter-spacing:.04em;text-align:center}.c256-file-actions{display:flex;align-items:center;gap:7px}.c256-file-secure-state{padding:4px 6px;border:1px solid rgba(93,224,160,.12);border-radius:999px;background:rgba(93,224,160,.025);color:#73d8ad;font-size:8px;font-weight:800;white-space:nowrap}.c256-file-card .c256-attachment-info{min-width:0}.c256-file-card .c256-attachment-info strong{font-size:12px}.c256-file-card .c256-attachment-info small{font-size:10px;color:#60788a}.workspace-photo{display:inline-flex;align-items:center;justify-content:center;gap:7px}.workspace-photo svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1050px){.landing-grid{grid-template-columns:1fr;max-width:900px}.landing-copy{text-align:center;padding:0}.landing-lead{margin:0 auto}.landing-actions,.landing-proof{justify-content:center}.landing-join{margin-left:auto;margin-right:auto}.landing-stage{max-width:860px;margin:0 auto;width:100%}.landing-bottom{max-width:900px;grid-template-columns:repeat(3,1fr)}.landing-bottom-brand{grid-column:1/-1;justify-content:center}}
@media(max-width:650px){.landing-shell{padding:15px 14px 20px}.landing-topline{padding-bottom:13px}.landing-security{display:none}.landing-grid{padding:38px 0 20px;gap:22px}.landing-copy h1{font-size:clamp(49px,14vw,70px)}.landing-lead{font-size:12px;line-height:1.6}.landing-actions{display:grid;grid-template-columns:1fr;width:100%;margin-top:22px}.landing-actions button{width:100%;min-width:0}.landing-proof{font-size:7px;gap:7px}.landing-stage{padding:10px;border-radius:20px}.landing-stage-head{padding:3px 4px 11px}.landing-cap-grid{grid-template-columns:1fr 1fr}.landing-cap-large{grid-row:auto;grid-column:1/-1;min-height:190px}.landing-cap{min-height:164px;padding:14px}.landing-cap-icon{width:36px;height:36px;margin-bottom:13px}.landing-cap h2{font-size:14px}.landing-cap p{font-size:9px}.landing-mini-status{margin-top:16px}.landing-qr-row{padding:10px}.landing-qr{width:64px;height:64px;flex-basis:64px}.landing-bottom{grid-template-columns:1fr 1fr}.landing-bottom>div:nth-child(3){grid-column:1/-1}.landing-bottom-brand{grid-column:1/-1}.landing-bottom-brand span{display:none}.key-banner{padding:8px 10px}.invite-note{display:block;margin:3px 0 6px}.key-row{display:flex}.composer{grid-template-columns:44px minmax(0,1fr) 44px 46px}.composer-voice{width:44px;min-width:44px;height:44px;padding:0}.composer-voice svg{width:18px;height:18px}.c256-file-card{grid-template-columns:38px minmax(0,1fr)}.c256-file-actions{grid-column:2;justify-content:flex-start}.c256-file-icon{width:36px;height:36px}.workspace-actions{grid-template-columns:1fr 1fr 1fr!important}.workspace-actions button{min-width:0;padding-left:8px;padding-right:8px}}
@media(max-width:390px){.landing-cap-grid{grid-template-columns:1fr}.landing-cap-large{grid-column:auto}.landing-cap{min-height:145px}.landing-cap-large{min-height:175px}.landing-proof i{display:none}.landing-proof{display:grid;grid-template-columns:1fr 1fr;justify-items:center}}
@media(prefers-reduced-motion:reduce){.landing-cap{transition:none}}

/* Composer v9 — single authoritative four-control layout. */
.composer{
  grid-template-columns:48px minmax(0,1fr) 48px 52px;
  grid-template-areas:"attach input voice send";
}
.composer > .c256-attach-button,.composer > [data-c256-room-attach]{grid-area:attach}
.composer > textarea#input{grid-area:input}
.composer > .composer-voice{grid-area:voice}
.composer > .send{grid-area:send}
@media(max-width:650px){
  .composer{
    grid-template-columns:44px minmax(0,1fr) 44px 46px;
    grid-template-areas:"attach input voice send";
    gap:6px;
  }
}
@media(max-width:390px){
  .composer{grid-template-columns:42px minmax(0,1fr) 42px 44px;gap:5px;padding-left:6px;padding-right:6px}
  .composer .c256-attach-button,.composer [data-c256-room-attach],.composer .composer-voice{width:42px;min-width:42px;height:44px;min-height:44px}
  .composer > .send{width:44px;min-width:44px;height:44px}
}
.workspace-filters{display:flex;gap:6px;overflow:auto;padding:0 0 10px}.workspace-filter{flex:0 0 auto;min-height:30px;padding:0 10px;border:1px solid rgba(90,180,220,.08);border-radius:9px;background:rgba(255,255,255,.008);color:#5f7788;font-size:9px;font-weight:800;cursor:pointer}.workspace-filter:hover{color:#cfe0e8;border-color:rgba(34,211,255,.18)}.workspace-filter.is-active{color:#ddf8ff;background:rgba(22,191,255,.06);border-color:rgba(34,211,255,.18)}

/* ============================================================
   Launcher, navigation-state + voice UX
   ============================================================ */

/* The live room keeps the timer control; the verbose TTL label does not. */
.ttl-control .ttl-label{display:none!important}
.ttl-control{gap:7px!important}
.ttl-control select{min-width:54px}

/* Native-feeling landing screen: all primary entry actions stay above the fold. */
.modal{overflow:auto!important;align-items:flex-start!important}
.landing-shell{min-height:100dvh;max-width:1600px;padding:18px clamp(18px,4vw,64px) 20px!important}
.landing-main{position:relative;z-index:1;display:grid;gap:22px;max-width:1420px;margin:0 auto;padding:28px 0 18px}
.landing-hero{text-align:center;max-width:980px;margin:0 auto}
.landing-hero .landing-eyebrow{margin-bottom:10px}
.landing-hero h1{margin:0 0 15px!important;font-size:clamp(52px,6.2vw,88px)!important;line-height:.86!important;letter-spacing:-.075em!important}
.landing-hero .landing-lead{max-width:760px;margin:0 auto!important;font-size:13px!important;line-height:1.55!important}
.landing-actions{justify-content:center!important;margin-top:20px!important;gap:9px!important}
.landing-actions button{min-height:48px!important}
.landing-primary{min-width:220px!important}
.landing-secondary{min-width:150px!important}
.landing-qr-launch{min-width:120px!important}
.landing-join{margin:12px auto 0!important;max-width:620px!important;text-align:left}
.landing-proof{justify-content:center!important;margin-top:13px!important;font-size:8px!important}

.landing-stage{width:100%;padding:13px!important;border-radius:24px!important}
.landing-stage-head{padding:3px 7px 11px!important}
.landing-device-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:9px}
.landing-device{min-width:0;border:1px solid rgba(90,180,220,.11);border-radius:18px;background:linear-gradient(145deg,rgba(9,22,34,.92),rgba(4,11,18,.97));overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.landing-device-top{display:flex;align-items:center;gap:7px;padding:10px 11px;color:#4e7183;font:900 8px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}
.landing-device-top i{margin-left:auto;width:5px;height:5px;border-radius:50%;background:#5de0a0;box-shadow:0 0 9px rgba(93,224,160,.28)}
.landing-device-screen{min-height:142px;margin:0 9px;border:1px solid rgba(90,180,220,.09);border-radius:14px;background:linear-gradient(180deg,#07131f,#050c14);overflow:hidden}
.landing-screen-header{display:flex;align-items:center;gap:8px;padding:10px;border-bottom:1px solid rgba(90,180,220,.08)}
.landing-mini-logo{display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(34,211,255,.35);border-radius:8px;color:#2bd4ff;font-weight:900;font-size:10px}
.landing-screen-header div{min-width:0;display:grid;gap:2px}.landing-screen-header strong{color:#dcecf3;font-size:10px}.landing-screen-header small{color:#587183;font-size:8px}.landing-online-dot{margin-left:auto;width:5px;height:5px;border-radius:50%;background:#5de0a0}
.landing-screen-empty{display:grid;place-items:center;text-align:center;padding:14px 14px 10px}.landing-screen-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(22,191,255,.06);border:1px solid rgba(34,211,255,.13);color:#2bd4ff;font-size:16px}.landing-screen-empty strong{margin-top:7px;color:#e3f0f5;font-size:10px}.landing-screen-empty small{max-width:230px;margin-top:4px;color:#5d7484;font-size:8px;line-height:1.45}
.landing-screen-composer{display:flex;align-items:center;justify-content:space-between;margin:0 9px 9px;padding:7px 8px;border:1px solid rgba(90,180,220,.08);border-radius:9px;color:#506879;font-size:8px}.landing-screen-composer b{display:grid;place-items:center;width:19px;height:19px;border-radius:6px;background:#17bdf5;color:#03111a;font-size:10px}
.landing-device-foot{display:grid;gap:3px;padding:10px 11px 11px}.landing-device-foot strong{color:#dceaf0;font-size:10px}.landing-device-foot span{color:#597181;font-size:8px}
.landing-invite-screen{display:grid;place-items:center;text-align:center;padding:14px}.landing-invite-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(34,211,255,.16);border-radius:12px;background:rgba(22,191,255,.045);color:#2bd4ff}.landing-invite-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}.landing-invite-screen>strong{margin-top:8px;color:#e3f0f5;font-size:12px}.landing-invite-screen>small{margin-top:4px;color:#5e7485;font-size:8px;line-height:1.4}.landing-invite-links{display:flex;gap:5px;margin-top:12px}.landing-invite-links span{padding:5px 7px;border:1px solid rgba(34,211,255,.12);border-radius:999px;color:#68cde8;font-size:7px;font-weight:900}
.landing-files-screen{padding:8px}.landing-file-row{display:grid;grid-template-columns:30px minmax(0,1fr) 16px;align-items:center;gap:7px;padding:8px 5px;border-bottom:1px solid rgba(90,180,220,.06)}.landing-file-row:last-child{border-bottom:0}.landing-file-row>span{display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:rgba(22,191,255,.05);border:1px solid rgba(34,211,255,.12);color:#42d7ff;font-size:6px;font-weight:900}.landing-file-row div{min-width:0;display:grid;gap:2px}.landing-file-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d8e8ee;font-size:8px}.landing-file-row small{color:#597181;font-size:7px}.landing-file-row>b{color:#5de0a0;font-size:11px}
.landing-control-screen{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;padding:12px}.landing-control-ring{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;border:1px solid rgba(34,211,255,.45);box-shadow:0 0 30px rgba(22,191,255,.05);color:#5d8293}.landing-control-ring span{font-size:7px;letter-spacing:.16em}.landing-control-ring strong{color:#31d2ff;font-size:14px}.landing-control-list{display:grid;gap:5px}.landing-control-list span{padding:5px 6px;border-radius:6px;color:#647d8d;font-size:7px}.landing-control-list .is-active{background:rgba(22,191,255,.08);border:1px solid rgba(34,211,255,.11);color:#70dfff}
.landing-utility-row{display:grid;grid-template-columns:minmax(0,1fr) 76px auto;align-items:center;gap:13px;margin-top:9px;padding:10px 12px;border:1px solid rgba(90,180,220,.09);border-radius:14px;background:rgba(255,255,255,.01)}
.landing-utility-copy{display:grid;gap:3px}.landing-utility-copy strong{color:#dceaf0;font-size:10px}.landing-utility-copy small{color:#5d7484;font-size:8px}.landing-utility-security{display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:center;min-width:180px}.landing-utility-security .landing-security-dot{grid-row:span 2}.landing-utility-security strong{color:#8ea5b2;font-size:8px;letter-spacing:.1em;text-transform:uppercase}.landing-utility-security small{color:#4f6979;font-size:8px}
.landing-bottom{padding-top:4px!important}

/* Keep the landing screen compact enough to be a true product launcher. */
@media (max-height:860px) and (min-width:901px){
  .landing-shell{padding-top:13px!important;padding-bottom:13px!important}
  .landing-main{gap:15px;padding-top:18px;padding-bottom:8px}
  .landing-hero h1{font-size:clamp(48px,5.4vw,76px)!important;margin-bottom:10px!important}
  .landing-hero .landing-lead{font-size:11px!important;max-width:700px}
  .landing-actions{margin-top:13px!important}
  .landing-actions button{min-height:42px!important}
  .landing-proof{margin-top:9px!important}
  .landing-device-screen{min-height:116px}
  .landing-device-foot{padding:7px 10px 8px}
  .landing-stage{padding:10px!important}
  .landing-utility-row{padding:8px 10px}
  .landing-qr{width:62px;height:62px;flex-basis:62px}
  .landing-bottom>div{min-height:45px;padding:8px 11px}
}

/* Navigation is stateful: when a sheet/workspace closes, Chats owns the highlight. */
.sidebar-nav-item.is-active{position:relative}
.sidebar-nav-item.is-active::after{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:2px;border-radius:999px;background:#20caff;box-shadow:0 0 12px rgba(32,202,255,.35)}
.sidebar-nav-item:focus-visible{outline:2px solid rgba(32,202,255,.55);outline-offset:2px}

/* Microphone status: recording is visually obvious but restrained. */
.composer-voice{position:relative}
.composer-voice.is-recording{color:#ffb9b9!important;border-color:rgba(255,120,120,.35)!important;background:rgba(255,90,90,.09)!important}
.composer-voice.is-recording::after{content:"";position:absolute;right:5px;top:5px;width:5px;height:5px;border-radius:50%;background:#ff7777;box-shadow:0 0 8px rgba(255,80,80,.35)}

@media(max-width:900px){
  .landing-device-grid{grid-template-columns:1fr 1fr}
  .landing-device-chat{grid-column:1/-1}
  .landing-device-screen{min-height:132px}
  .landing-utility-row{grid-template-columns:minmax(0,1fr) 68px}
  .landing-utility-security{grid-column:1/-1}
}
@media(max-width:650px){
  .landing-shell{padding:12px 12px 16px!important}
  .landing-main{padding-top:22px;gap:16px}
  .landing-hero h1{font-size:clamp(45px,14vw,68px)!important}
  .landing-hero .landing-lead{font-size:11px!important}
  .landing-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:7px!important}
  .landing-primary{grid-column:1/-1;width:100%;min-width:0!important}
  .landing-secondary,.landing-qr-launch{width:100%;min-width:0!important}
  .landing-device-grid{grid-template-columns:1fr}
  .landing-device-chat{grid-column:auto}
  .landing-device-screen{min-height:142px}
  .landing-utility-row{grid-template-columns:minmax(0,1fr) 62px}
  .landing-utility-security{display:none}
  .landing-bottom{grid-template-columns:1fr!important}
  .landing-bottom-brand{grid-column:auto!important}
}


/* V9 production file transfer surface */
.workspace-upload-status{margin-top:10px;padding:10px 12px;border:1px solid rgba(90,180,220,.15);border-radius:12px;background:rgba(7,17,28,.72);color:#9fb3c2;font-size:11px}
.workspace-upload-status[data-state="uploading"]{color:#cfeaf3;border-color:rgba(34,211,255,.22);background:rgba(22,191,255,.035)}
.workspace-upload-status[data-state="success"]{color:#8ce6b4;border-color:rgba(93,224,160,.20);background:rgba(93,224,160,.035)}
.workspace-upload-status[data-state="error"]{color:#ffb4b4;border-color:rgba(255,110,110,.20);background:rgba(255,110,110,.035)}
.workspace-upload-progress{height:3px;margin-top:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.workspace-upload-progress>span{display:block;height:100%;width:0;border-radius:inherit;background:#22d3ff;transition:width .18s ease}
.workspace-drop{cursor:pointer}
.workspace-drop:focus-visible{box-shadow:0 0 0 3px rgba(34,211,255,.10)}
@media (prefers-reduced-motion:reduce){.workspace-upload-progress>span{transition:none}}


.landing-shell{min-height:100dvh!important;max-width:100%!important;padding:24px clamp(22px,6vw,96px) 40px!important}
.landing-main{max-width:1180px!important;min-height:calc(100dvh - 110px);display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important}
.landing-hero{max-width:920px!important;width:100%!important}
.landing-hero h1{font-size:clamp(58px,8.4vw,124px)!important;line-height:.86!important;letter-spacing:-.08em!important;margin-bottom:22px!important}
.landing-hero .landing-lead{max-width:720px!important;font-size:15px!important;line-height:1.6!important}
.landing-actions{display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr)!important;max-width:760px!important;margin:28px auto 0!important;gap:10px!important}
.landing-actions button{min-height:58px!important;font-size:15px!important}
.landing-primary{min-width:0!important}
.landing-secondary{min-width:0!important}
.landing-proof{justify-content:center!important;margin-top:17px!important}
.landing-stage,.landing-utility-row,.landing-bottom{display:none!important}
.landing-join{max-width:760px!important;margin:14px auto 0!important}
.workspace-file-item{display:grid!important;grid-template-columns:42px minmax(0,1fr) auto auto!important;align-items:center;gap:12px!important;min-height:72px!important;padding:12px 14px!important;border:1px solid rgba(90,180,220,.12)!important;border-radius:14px!important;background:linear-gradient(145deg,rgba(8,20,31,.92),rgba(5,12,20,.96))!important}
.workspace-file-actions{display:flex;gap:7px;align-items:center}
.workspace-file-state{white-space:nowrap}
@media(max-width:650px){.landing-shell{padding:18px 16px 28px!important}.landing-main{min-height:calc(100dvh - 92px)}.landing-hero h1{font-size:clamp(46px,15vw,78px)!important}.landing-hero .landing-lead{font-size:13px!important}.landing-actions{grid-template-columns:1fr!important;max-width:520px!important}.landing-actions button{min-height:54px!important}.workspace-file-item{grid-template-columns:38px minmax(0,1fr);}.workspace-file-state{grid-column:2;justify-self:start}.workspace-file-actions{grid-column:2;justify-self:start}}

.workspace-file-actions .secondary{white-space:nowrap}.workspace-file-item:hover{border-color:rgba(34,211,255,.24)!important;transform:translateY(-1px)}.workspace-file-item{transition:transform .16s ease,border-color .16s ease,background .16s ease}.workspace-file-copy small{display:block}.workspace-empty strong:empty,.workspace-empty span:empty{display:none}
@media(prefers-reduced-motion:reduce){.workspace-file-item{transition:none}}



.quick-share-btn{position:relative}
.quick-share-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.quick-share-btn:hover{color:#dff9ff;border-color:rgba(34,211,255,.24);background:rgba(22,191,255,.055)}
.workspace-section-head{align-items:end}
.workspace-section-note{margin:5px 0 0;color:#587082;font-size:10px;line-height:1.45}
.workspace-section-tools{display:flex;align-items:center;gap:8px}
.workspace-refresh{min-height:30px;padding:0 10px}
.workspace-empty[data-loading="1"]{opacity:.7}
.workspace-empty[data-loading="1"] .workspace-empty-icon{animation:c256-spin 1.2s linear infinite}
@keyframes c256-spin{to{transform:rotate(360deg)}}
.c256-inline-audio{grid-column:1/-1;width:min(100%,360px);height:34px;margin-top:3px;accent-color:#22d3ff}
.c256-file-card .c256-file-actions{flex-wrap:wrap}
@media(max-width:650px){.quick-share-btn{display:inline-grid}.workspace-section-head{align-items:flex-start}.workspace-section-tools{flex-direction:column;align-items:flex-end}.c256-inline-audio{width:100%}}
@media(prefers-reduced-motion:reduce){.workspace-empty[data-loading="1"] .workspace-empty-icon{animation:none}}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.c256-inline-audio[data-loading="1"]{opacity:.58}
.ttl-control{min-width:54px}
@media(max-width:650px){.ttl-control{min-width:48px}.ttl-control .ttl-icon{margin:0}}



@media (max-width:900px){
  .workspace-panel{
    position:absolute!important;
    z-index:7000!important;
    top:calc(62px + var(--safe-top))!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    max-height:calc(100dvh - 62px - var(--safe-top))!important;
    box-sizing:border-box!important;
    padding:20px 16px calc(28px + var(--safe-bottom))!important;
    border-top:1px solid rgba(90,180,220,.12)!important;
    border-radius:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  .workspace-top{
    position:relative;
    padding-right:52px!important;
  }
  .workspace-close{
    position:absolute!important;
    top:-2px!important;
    right:0!important;
    z-index:2!important;
    width:40px!important;
    height:40px!important;
  }
  .workspace-tabs{
    position:sticky;
    top:0;
    z-index:3;
    margin:0 -16px;
    padding:12px 16px!important;
    background:rgba(5,11,19,.96);
    backdrop-filter:blur(16px);
  }
  .workspace-hero-row{padding-top:20px!important}
  .workspace-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important}
  .workspace-actions button{width:100%!important;min-width:0!important}
}
@media (max-width:520px){
  .workspace-panel{padding-left:14px!important;padding-right:14px!important}
  .workspace-tabs{margin-left:-14px;margin-right:-14px;padding-left:14px!important;padding-right:14px!important}
  .workspace-actions{grid-template-columns:1fr 1fr!important}
  .workspace-actions .workspace-upload{grid-column:1/-1}
  .workspace-top h2{font-size:24px!important}
  .workspace-top p{font-size:12px!important;line-height:1.55!important}
  .workspace-section-head{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  .workspace-section-tools{flex-direction:row!important;justify-content:space-between!important;align-items:center!important}
  .workspace-filters{padding-bottom:12px!important}
}
@media (max-width:390px){
  .workspace-actions{grid-template-columns:1fr!important}
  .workspace-actions .workspace-upload{grid-column:auto}
  .workspace-actions button{min-height:46px!important}
}

/* V10 mobile header + inline media polish */
.workspace-empty-upload{display:grid;justify-items:center;gap:7px;width:100%;min-height:210px;padding:36px 20px;border:0;background:transparent;color:inherit;cursor:pointer}
.workspace-empty-upload:focus-visible{outline:2px solid rgba(34,211,255,.55);outline-offset:-3px;border-radius:16px}
.workspace-empty-upload .workspace-empty-icon{margin:0}
.workspace-empty-upload strong,.workspace-empty-upload span{display:block}
.c256-voice-player{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;min-width:0;width:min(100%,360px);padding:9px 10px;margin-top:6px;border:1px solid rgba(90,180,220,.13);border-radius:14px;background:rgba(4,13,21,.55)}
.c256-voice-play{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(34,211,255,.24);border-radius:50%;background:rgba(22,191,255,.07);color:#7fe5ff;cursor:pointer}
.c256-voice-play:disabled{opacity:.55;cursor:wait}
.c256-voice-play svg{width:16px;height:16px;fill:currentColor;stroke:none}
.c256-voice-track{position:relative;min-width:0;height:32px;display:flex;align-items:center;gap:2px;overflow:hidden}
.c256-voice-track::before{content:"";position:absolute;left:0;right:0;bottom:3px;height:2px;border-radius:99px;background:rgba(90,180,220,.12)}
.c256-voice-progress{position:absolute;left:0;bottom:3px;width:0;height:2px;border-radius:99px;background:#22d3ff}
.c256-voice-bars{display:flex;align-items:center;gap:2px;width:100%;height:25px;opacity:.65}
.c256-voice-bars i{display:block;width:3px;min-height:4px;height:var(--h);border-radius:99px;background:#5c7e91}
.c256-voice-player.is-playing .c256-voice-bars i{background:#52d8f6}
.c256-voice-time{min-width:38px;text-align:right;color:#8ba2b1;font-size:9px;font-variant-numeric:tabular-nums}
.c256-video-inline{display:block;width:min(100%,380px);max-height:52svh;margin-top:7px;border-radius:13px;background:#040a10;border:1px solid rgba(90,180,220,.12)}
.c256-media-load-card{display:flex;align-items:center;gap:9px;width:min(100%,360px);margin-top:6px;padding:10px 11px;border:1px solid rgba(90,180,220,.12);border-radius:13px;background:rgba(4,13,21,.48);color:#7892a2;font-size:10px}
@media(max-width:520px){.workspace-empty-upload{min-height:180px}.c256-voice-player{width:100%}.c256-video-inline{width:100%}}

/* ================================================================

   Presentation-only. No crypto, transport, storage, or menu action
   ownership is changed here.
   ================================================================ */

/* Empty state: only the descriptive span gets text constraints.
   The icon span must never inherit the copy width/font rules. */
.workspace-empty-upload{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  align-content:center;
  gap:9px;
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  min-height:210px;
  padding:34px 20px;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  text-align:center;
}
.workspace-empty-upload .workspace-empty-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  min-width:46px;
  margin:0 0 2px;
  border:1px solid rgba(34,211,255,.18);
  border-radius:14px;
  color:#27d2ff;
  font-size:25px;
  line-height:1;
  font-weight:500;
}
.workspace-empty-upload > strong{
  display:block;
  justify-self:center;
  min-width:0;
  width:auto;
  max-width:100%;
  margin:0;
  color:#cddde5;
  font-size:16px;
  line-height:1.3;
  font-weight:850;
}
.workspace-empty-upload > span:not(.workspace-empty-icon){
  display:block;
  justify-self:center;
  min-width:0;
  width:min(460px,100%);
  max-width:460px;
  margin:0;
  color:#5e7486;
  font-size:11px;
  line-height:1.55;
}
.workspace-empty-upload:hover .workspace-empty-icon,
.workspace-empty-upload:focus-visible .workspace-empty-icon{
  border-color:rgba(34,211,255,.42);
  background:rgba(22,191,255,.045);
}
.workspace-empty-upload:focus-visible{
  outline:2px solid rgba(34,211,255,.55);
  outline-offset:-3px;
  border-radius:16px;
}

/* Workspace tabs stay available after scrolling on phones. */
.workspace-tabs{
  position:sticky;
  top:0;
  z-index:20;
  background:linear-gradient(180deg,#07111c 78%,rgba(7,17,28,.96));
}

/* The room menu must always sit above the workspace on touch devices. */
@media (max-width:640px){
  .chat256-room-menu{position:static;z-index:2147483000}
  .chat256-menu-button{
    position:relative;
    z-index:2147483001;
    flex:0 0 auto;
    display:grid!important;
    place-items:center;
  }
  .chat256-room-menu-panel{
    position:fixed!important;
    top:calc(62px + var(--safe-top) + 8px)!important;
    right:8px!important;
    left:auto!important;
    width:min(292px,calc(100vw - 16px))!important;
    max-height:calc(100dvh - 82px)!important;
    overflow:auto!important;
    z-index:2147483002!important;
    pointer-events:auto!important;
  }
  .workspace-panel{z-index:7000!important}
  .workspace-tabs{
    top:0;
    margin-top:0;
    padding-top:10px;
    padding-bottom:10px;
  }
}


@media (max-width:900px){
  .workspace-panel{
    isolation:isolate;
  }
  .workspace-tabs{
    flex:0 0 auto;
    min-height:54px;
    box-sizing:border-box;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  .workspace-tabs::-webkit-scrollbar{display:none}
}
@media (max-width:520px){
  .workspace-empty{
    min-width:0;
  }
  .workspace-empty-upload{
    align-self:stretch;
    min-width:0;
  }
  .workspace-empty-upload > span:not(.workspace-empty-icon){
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

/* ================================================================
   WORKSPACE LIGHT THEME
   The workspace had hard-coded dark surfaces, so changing the global
   theme previously left this surface dark. Keep real controls/actions
   intact and change presentation only.
   ================================================================ */
:root[data-c256-theme="light"] .workspace-panel{
  background:radial-gradient(760px 430px at 62% 0,rgba(25,166,196,.055),transparent 70%),linear-gradient(180deg,#f5f9fb,#edf3f6)!important;
  color:#102033!important;
  border-color:#d3dfe6;
}
:root[data-c256-theme="light"] .workspace-top{
  border-bottom-color:#d8e2e8!important;
}
:root[data-c256-theme="light"] .workspace-kicker{color:#557589!important}
:root[data-c256-theme="light"] .workspace-top h2,
:root[data-c256-theme="light"] .workspace-hero-row h3,
:root[data-c256-theme="light"] .workspace-section-head h3,
:root[data-c256-theme="light"] .workspace-product-card h3,
:root[data-c256-theme="light"] .workspace-market h3{
  color:#102033!important;
}
:root[data-c256-theme="light"] .workspace-top p,
:root[data-c256-theme="light"] .workspace-hero-row p,
:root[data-c256-theme="light"] .workspace-product-card p,
:root[data-c256-theme="light"] .workspace-market>p,
:root[data-c256-theme="light"] .workspace-section-note{
  color:#607487!important;
}
:root[data-c256-theme="light"] .workspace-close{
  background:#fff!important;
  color:#102033!important;
  border-color:#cbd8e2!important;
}
:root[data-c256-theme="light"] .workspace-tabs{
  background:linear-gradient(180deg,#f5f9fb 82%,rgba(245,249,251,.96))!important;
  border-bottom-color:#d8e2e8!important;
}
:root[data-c256-theme="light"] .workspace-tab{
  color:#657b8d!important;
}
:root[data-c256-theme="light"] .workspace-tab:hover{
  background:#eaf6f9!important;
  color:#087f9f!important;
}
:root[data-c256-theme="light"] .workspace-tab.is-active{
  background:#e0f3f7!important;
  border-color:#a8d6e0!important;
  color:#087f9f!important;
}
:root[data-c256-theme="light"] .workspace-upload{
  background:linear-gradient(135deg,#20b9dc,#159dc0)!important;
  color:#fff!important;
  border-color:#159dc0!important;
}
:root[data-c256-theme="light"] .workspace-photo,
:root[data-c256-theme="light"] .workspace-voice{
  background:#fff!important;
  color:#173047!important;
  border-color:#cbd8e2!important;
}
:root[data-c256-theme="light"] .workspace-photo:hover,
:root[data-c256-theme="light"] .workspace-voice:hover{
  background:#edf8fb!important;
  border-color:#8fcbd9!important;
  color:#087f9f!important;
}
:root[data-c256-theme="light"] .workspace-drop{
  background:rgba(255,255,255,.58)!important;
  border-color:#b9cbd6!important;
}
:root[data-c256-theme="light"] .workspace-drop:hover,
:root[data-c256-theme="light"] .workspace-drop:focus-visible,
:root[data-c256-theme="light"] .workspace-drop.is-dragging{
  background:#eef9fb!important;
  border-color:#72bfd1!important;
}
:root[data-c256-theme="light"] .workspace-drop-icon{
  background:#eef8fa!important;
  border-color:#b8dce4!important;
  color:#0b9abf!important;
}
:root[data-c256-theme="light"] .workspace-drop strong{color:#21394d!important}
:root[data-c256-theme="light"] .workspace-drop small{color:#687d8e!important}
:root[data-c256-theme="light"] .workspace-count{color:#61778a!important}
:root[data-c256-theme="light"] .workspace-file-item{
  background:linear-gradient(145deg,#fff,#f6f9fb)!important;
  border-color:#d2dfe6!important;
  box-shadow:0 7px 20px rgba(20,45,62,.06)!important;
}
:root[data-c256-theme="light"] .workspace-file-item:hover{
  background:#fff!important;
  border-color:#9dcbd7!important;
}
:root[data-c256-theme="light"] .workspace-file-icon{
  background:#edf8fa!important;
  border-color:#c0dfe6!important;
  color:#078bab!important;
}
:root[data-c256-theme="light"] .workspace-file-copy strong{color:#172e42!important}
:root[data-c256-theme="light"] .workspace-file-copy small{color:#6b7f90!important}
:root[data-c256-theme="light"] .workspace-file-state{
  background:#effaf5!important;
  border-color:#bfe6d3!important;
  color:#20835b!important;
}
:root[data-c256-theme="light"] .workspace-empty{
  background:rgba(255,255,255,.62)!important;
  border-color:#d4e0e6!important;
}
:root[data-c256-theme="light"] .workspace-empty-upload .workspace-empty-icon{
  background:#f2f9fa!important;
  border-color:#b9dce4!important;
  color:#0799bc!important;
}
:root[data-c256-theme="light"] .workspace-empty-upload > strong{color:#173047!important}
:root[data-c256-theme="light"] .workspace-empty-upload > span:not(.workspace-empty-icon){color:#657a8c!important}
:root[data-c256-theme="light"] .workspace-product-card,
:root[data-c256-theme="light"] .market-grid>div{
  background:linear-gradient(145deg,#fff,#f5f9fb)!important;
  border-color:#d3dfe6!important;
  box-shadow:0 7px 22px rgba(20,45,62,.05)!important;
}
:root[data-c256-theme="light"] .workspace-product-icon{
  background:#eef8fa!important;
  border-color:#bddce4!important;
  color:#0799bc!important;
}
:root[data-c256-theme="light"] .market-grid strong{color:#233c50!important}
:root[data-c256-theme="light"] .market-grid span{color:#6a7e90!important}
:root[data-c256-theme="light"] .workspace-file-actions .secondary{
  background:#fff!important;
  color:#173047!important;
  border-color:#cbd8e2!important;
}

@media(max-width:520px){
  .workspace-empty-upload{min-height:180px;padding:30px 18px}
  .workspace-empty-upload > strong{font-size:15px}
  .workspace-empty-upload > span:not(.workspace-empty-icon){font-size:10px}
}



@media (max-width:900px){
  .workspace-panel{
    display:flex!important;
    flex-direction:column!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  .workspace-top{flex:0 0 auto!important;z-index:auto!important;}
  .workspace-tabs{
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    z-index:40!important;
    display:flex!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    min-height:54px!important;
    box-sizing:border-box!important;
    margin:0 -14px!important;
    padding:10px 14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    background:#07111c!important;
    border-top:1px solid rgba(90,180,220,.08)!important;
    border-bottom:1px solid rgba(90,180,220,.12)!important;
    isolation:isolate;
  }
  .workspace-tab{
    position:relative!important;
    z-index:41!important;
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:max-content!important;
    min-height:36px!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .workspace-view{flex:0 0 auto!important;min-width:0!important;width:100%!important;}
}

/* The empty-state icon is a div rather than a span so legacy .workspace-empty
   typography cannot ever capture the icon as copy. */
.workspace-empty-upload .workspace-empty-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 46px!important;
  width:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
.workspace-empty-upload > .workspace-empty-copy{
  display:block!important;
  width:min(460px,100%)!important;
  max-width:460px!important;
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
}
.workspace-empty-upload > strong{
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
}

/* ================================================================

   Keep workspace navigation pinned in the workspace frame while its
   selected view owns the scrollport. Keep the room menu in the header
   stacking context above the workspace. This avoids iOS Safari clipping
   and sibling-overlay paint-order failures without changing behavior.
   ================================================================ */
@media (max-width:900px){
  .bar{
    position:relative!important;
    z-index:9000!important;
    isolation:isolate;
  }
  .chat256-room-menu{
    position:relative!important;
    z-index:9001!important;
    isolation:isolate;
  }
  #chat256-menu-button{
    position:relative!important;
    z-index:9002!important;
  }
  #chat256-room-menu{
    position:fixed!important;
    z-index:9003!important;
  }

  .workspace-panel{
    position:absolute!important;
    z-index:7000!important;
    display:grid!important;
    grid-template-rows:auto auto minmax(0,1fr)!important;
    overflow:hidden!important;
    min-height:0!important;
    max-height:none!important;
    isolation:isolate;
  }
  .workspace-top{
    min-width:0!important;
    flex:none!important;
  }
  .workspace-tabs{
    position:relative!important;
    inset:auto!important;
    z-index:2!important;
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    min-width:0!important;
    min-height:54px!important;
    width:auto!important;
    margin:0 -14px!important;
    padding:9px 14px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    background:#07111c!important;
    border-top:1px solid rgba(90,180,220,.08)!important;
    border-bottom:1px solid rgba(90,180,220,.12)!important;
  }
  .workspace-tabs::-webkit-scrollbar{display:none}
  .workspace-tab{
    flex:0 0 auto!important;
    min-width:max-content!important;
    min-height:36px!important;
    visibility:visible!important;
    opacity:1!important;
  }
  .workspace-view{
    min-width:0!important;
    width:100%!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding-bottom:max(24px,var(--safe-bottom))!important;
  }

  .workspace-empty{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .workspace-empty-upload{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:190px!important;
    box-sizing:border-box!important;
    padding:30px 18px!important;
    margin:0!important;
    white-space:normal!important;
  }
  .workspace-empty-upload > .workspace-empty-icon{
    display:grid!important;
    flex:0 0 46px!important;
    width:46px!important;
    min-width:46px!important;
    max-width:46px!important;
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    margin:0 0 4px!important;
  }
  .workspace-empty-upload > strong{
    display:block!important;
    flex:0 0 auto!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    writing-mode:horizontal-tb!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .workspace-empty-upload > .workspace-empty-copy{
    display:block!important;
    flex:0 0 auto!important;
    width:min(460px,100%)!important;
    max-width:460px!important;
    min-width:0!important;
    margin:0!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
    line-height:1.55!important;
  }
}

@media (max-width:520px){
  .workspace-panel{padding-left:14px!important;padding-right:14px!important}
  .workspace-tabs{margin-left:-14px!important;margin-right:-14px!important;padding-left:14px!important;padding-right:14px!important}
  .workspace-empty-upload{min-height:180px!important;padding:28px 16px!important}
  .workspace-empty-upload > strong{font-size:15px!important}
  .workspace-empty-upload > .workspace-empty-copy{font-size:10px!important}
}

:root[data-c256-theme="light"] .workspace-tabs{
  background:linear-gradient(180deg,#f5f9fb,#eef4f7)!important;
  border-top-color:#d8e2e8!important;
  border-bottom-color:#d0dce3!important;
}


.c256-call-root{display:grid;gap:14px;min-height:100%;align-content:start}
.c256-call-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:2px 2px 0}
.c256-call-head h3{margin:4px 0 4px;font-size:22px;letter-spacing:-.02em}
.c256-call-head p{margin:0;color:var(--c-muted);font-size:12px}
.c256-call-status{padding:7px 10px;border:1px solid rgba(90,180,220,.14);border-radius:999px;color:#9bb2bf;font-size:10px;white-space:nowrap}
.c256-call-status[data-state="connected"]{color:#75e8d0;border-color:rgba(90,230,200,.24);background:rgba(50,210,180,.06)}
.c256-call-status[data-state="incoming"]{color:#9feaff;border-color:rgba(34,211,255,.25);background:rgba(34,211,255,.06)}
.c256-call-stage{position:relative;min-height:min(58svh,520px);border:1px solid rgba(90,180,220,.12);border-radius:20px;overflow:hidden;background:radial-gradient(circle at 50% 20%,rgba(34,211,255,.05),transparent 42%),#040a10;display:grid;place-items:center}
.c256-call-stage-empty{max-width:420px;padding:24px;text-align:center;color:#718996;font-size:12px;line-height:1.7}
.c256-call-remote{width:100%;height:100%;max-height:min(58svh,520px);object-fit:contain;background:#02070b}
.c256-call-local{position:absolute;right:14px;bottom:14px;width:min(28%,180px);aspect-ratio:16/10;object-fit:cover;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:#02070b;box-shadow:0 12px 35px rgba(0,0,0,.4)}
.c256-call-incoming,.c256-call-outgoing{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid rgba(34,211,255,.16);border-radius:16px;background:rgba(8,21,30,.7)}
.c256-call-incoming>span,.c256-call-incoming strong{display:block}.c256-call-incoming>span{color:var(--c-muted);font-size:11px;margin-top:3px}.c256-call-incoming>div{display:flex;gap:8px}
.c256-call-controls,.c256-call-start{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.c256-call-start small{width:100%;text-align:center;color:#6f8794;font-size:9px}
.c256-private-call-actions{display:flex;gap:6px;margin-left:auto}
@media(max-width:650px){.c256-call-head{gap:8px}.c256-call-head h3{font-size:19px}.c256-call-stage{min-height:54svh;border-radius:16px}.c256-call-incoming,.c256-call-outgoing{align-items:flex-start;flex-direction:column}.c256-call-incoming>div{width:100%}.c256-call-incoming button{flex:1}.c256-call-local{width:34%;right:9px;bottom:9px}.c256-private-call-actions button{padding-left:8px;padding-right:8px}}



.c256-call-detail{min-height:18px;text-align:center;color:var(--c-muted);font-size:11px;line-height:1.5}
.c256-call-status[data-state="error"]{color:#ff9b9b;border-color:rgba(255,100,100,.28);background:rgba(255,80,80,.06)}
#c256-call-audio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ================================================================

   ================================================================ */
.workspace-storage-card{
  display:grid;
  gap:12px;
  margin:20px 0 2px;
  padding:16px 17px;
  border:1px solid rgba(90,180,220,.13);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(10,25,39,.88),rgba(5,14,23,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.workspace-storage-card[data-state="notice"]{border-color:rgba(244,190,80,.22)}
.workspace-storage-card[data-state="warn"]{border-color:rgba(255,150,80,.28)}
.workspace-storage-card[data-state="full"]{border-color:rgba(255,90,110,.34)}
.workspace-storage-main{display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0}
.workspace-storage-copyblock{display:grid;gap:4px;min-width:0}
.workspace-storage-copyblock strong{color:#e8f5f9;font-size:14px;letter-spacing:-.01em}
.workspace-storage-copyblock span:last-child{color:#6e8797;font-size:10px;line-height:1.45}
.workspace-storage-meta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.workspace-plan-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 8px;border:1px solid rgba(34,211,255,.16);border-radius:999px;background:rgba(22,191,255,.045);color:#8fe5f8;font-size:9px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.workspace-storage-value{color:#dff8ff;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.workspace-storage-track{height:5px;overflow:hidden;border-radius:999px;background:rgba(90,180,220,.09)}
.workspace-storage-track>span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#1ebee4,#62e2f4);transition:width .25s ease}
.workspace-storage-card[data-state="notice"] .workspace-storage-track>span{background:linear-gradient(90deg,#d6b54d,#f1d66b)}
.workspace-storage-card[data-state="warn"] .workspace-storage-track>span{background:linear-gradient(90deg,#db8249,#f2b05e)}
.workspace-storage-card[data-state="full"] .workspace-storage-track>span{background:linear-gradient(90deg,#d65b68,#ff8995)}
.workspace-storage-actions{display:flex;align-items:center;gap:10px;min-width:0}
.workspace-storage-note{margin-right:auto;color:#506b7c;font-size:9px}
.workspace-warning{color:#f1bd77;font-size:9px;line-height:1.4}
.workspace-storage-card[data-state="full"] .workspace-warning{color:#ff9b9b}
.c256-settings-body{display:grid;gap:20px;padding:18px;overflow:auto}
.c256-setting-group{display:grid;gap:8px}
.c256-setting-group>.workspace-kicker{margin-bottom:2px}
.c256-setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid rgba(90,180,220,.08);cursor:pointer}
.c256-setting-row:last-child{border-bottom:0}
.c256-setting-row>span{display:grid;gap:4px;min-width:0}
.c256-setting-row strong{color:#dbeaf0;font-size:11px}
.c256-setting-row small{color:#637c8d;font-size:9px;line-height:1.45}
.c256-setting-row input[type="checkbox"]{flex:0 0 auto;width:18px;height:18px;accent-color:#22d3ff}
.c256-setting-select{min-width:112px;height:36px;padding:0 9px;border:1px solid rgba(90,180,220,.15);border-radius:10px;background:#07131e;color:#dcecf2;font:inherit;font-size:10px}
.c256-settings-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px 16px}
#c256-settings-status{color:#6fe0bd;font-size:9px}
.c256-settings-note{margin:0 18px 18px;padding:12px;border:1px solid rgba(90,180,220,.08);border-radius:12px;background:rgba(255,255,255,.012);color:#597384;font-size:9px;line-height:1.6}
.c256-call-root{min-width:0}
.c256-call-stage{min-height:min(52svh,480px)}
@media(max-width:650px){
  .workspace-storage-main{align-items:flex-start}
  .workspace-storage-meta{flex-direction:column;align-items:flex-end;gap:6px}
  .workspace-storage-actions{flex-wrap:wrap}
  .workspace-storage-note{width:100%;margin-right:0;order:3}
  .workspace-storage-actions .secondary{margin-left:auto}
  .c256-settings-body{padding:14px}
  .c256-settings-actions{padding:0 14px 14px}
  .c256-settings-note{margin:0 14px 14px}
}
@media(max-width:390px){
  .workspace-storage-main{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .workspace-storage-meta{flex-direction:row;justify-content:space-between;align-items:center}
  .workspace-storage-actions .secondary{margin-left:0}
}
:root[data-c256-theme="light"] .workspace-storage-card{background:linear-gradient(145deg,#fff,#f0f6f8);border-color:#cfdee5;box-shadow:inset 0 1px 0 #fff}
:root[data-c256-theme="light"] .workspace-storage-copyblock strong{color:#102033}
:root[data-c256-theme="light"] .workspace-storage-copyblock span:last-child{color:#607487}
:root[data-c256-theme="light"] .workspace-storage-value{color:#183245}
:root[data-c256-theme="light"] .workspace-plan-badge{background:#eef9fb;border-color:#b8dfe7;color:#087f9f}
:root[data-c256-theme="light"] .workspace-storage-track{background:#dce8ed}
:root[data-c256-theme="light"] .c256-setting-row{border-bottom-color:#dbe4e9}
:root[data-c256-theme="light"] .c256-setting-row strong{color:#102033}
:root[data-c256-theme="light"] .c256-setting-row small{color:#607487}
:root[data-c256-theme="light"] .c256-setting-select{background:#fff;color:#102033;border-color:#cbd9e1}
:root[data-c256-theme="light"] .c256-settings-note{background:#fff;border-color:#d5e1e7;color:#607487}

/* ================================================================

   The workspace is a full-screen product surface on touch devices;
   chat chrome is never allowed to compete with it or leak underneath.
   ================================================================ */
@media (max-width:900px){
  html,body{width:100%;min-width:0;overflow:hidden;-webkit-text-size-adjust:100%;}
  body{overscroll-behavior:none;}
  #app{width:100%;height:100dvh;min-height:100dvh;margin:0;border:0;border-radius:0;overflow:hidden;}
  .app-body{height:100%;min-height:0;overflow:hidden;}
  .chat-main{width:100%;height:100%;min-height:0;overflow:hidden;}
  .bar{flex:0 0 auto;min-height:60px;height:auto;padding-top:max(7px,var(--safe-top));padding-bottom:7px;}
  .bar-left{min-width:0;overflow:hidden;}
  .bar-left>div:last-child{min-width:0;max-width:100%;}
  .room-name{max-width:34vw;overflow:hidden;text-overflow:ellipsis;}
  .bar-right{flex:0 0 auto;min-width:0;}
  .key-banner{flex:0 0 auto;min-width:0;overflow:hidden;}
  .key-row{min-width:0;max-width:100%;overflow:hidden;}
  .key-row code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* Touch surfaces: no hover-dependent interaction and no horizontal bleed. */
  button,input,textarea,select{font-size:16px;}
  button,.icon-btn,.workspace-tab,.text-btn{touch-action:manipulation;}
  .workspace-panel{
    position:fixed!important;
    inset:0!important;
    z-index:7000!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    padding:max(12px,var(--safe-top)) 12px max(14px,var(--safe-bottom))!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,#06111c 0%,#040a11 100%)!important;
    box-shadow:none!important;
  }
  .workspace-top{
    flex:0 0 auto!important;
    min-height:52px;
    padding:3px 2px 12px!important;
    align-items:center!important;
  }
  .workspace-top h2{font-size:21px;line-height:1.05;}
  .workspace-top p{max-width:72vw;font-size:10px;line-height:1.4;}
  .workspace-close{width:38px!important;height:38px!important;min-width:38px!important;}
  .workspace-tabs{
    flex:0 0 auto!important;
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    margin:0!important;
    padding:7px 2px!important;
    gap:5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    border-top:1px solid rgba(90,180,220,.07)!important;
    border-bottom:1px solid rgba(90,180,220,.10)!important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .workspace-tabs::-webkit-scrollbar{display:none;}
  .workspace-tab{flex:1 1 0;min-width:0;min-height:38px;padding:0 10px;font-size:11px;white-space:nowrap;}
  .workspace-view{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain;
    padding-bottom:8px;
  }
  .workspace-view.hide{display:none!important;}

  /* Files is the only place where account storage exists. */
  .workspace-storage-card{margin:14px 0 0!important;padding:13px!important;border-radius:15px!important;gap:10px!important;}
  .workspace-storage-main{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;gap:8px!important;}
  .workspace-storage-copyblock strong{font-size:13px!important;}
  .workspace-storage-copyblock span:last-child{font-size:9px!important;}
  .workspace-storage-meta{flex-direction:column!important;align-items:flex-end!important;gap:5px!important;}
  .workspace-storage-value{font-size:10px!important;}
  .workspace-storage-actions{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important;}
  .workspace-storage-note{grid-column:1/-1;order:2;width:auto!important;margin:0!important;font-size:8px!important;}
  .workspace-storage-actions .secondary{margin:0!important;}
  .workspace-hero-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;padding:16px 0 12px!important;}
  .workspace-hero-row h3{font-size:16px!important;}
  .workspace-hero-row p{font-size:10px!important;}
  .workspace-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;width:100%!important;gap:6px!important;}
  .workspace-actions button{width:100%!important;min-width:0!important;padding-left:7px!important;padding-right:7px!important;}
  .workspace-actions svg{display:none!important;}
  .workspace-drop{min-height:76px!important;padding:12px!important;border-radius:14px!important;}
  .workspace-drop-icon{width:36px!important;height:36px!important;flex-basis:36px!important;}
  .workspace-drop strong{font-size:11px!important;}
  .workspace-drop small{font-size:9px!important;line-height:1.4!important;}
  .workspace-section-head{align-items:flex-start!important;padding:18px 0 9px!important;}
  .workspace-section-head h3{font-size:15px!important;}
  .workspace-section-note{font-size:9px!important;}
  .workspace-section-tools{flex:0 0 auto!important;}
  .workspace-filters{display:flex!important;max-width:100%;overflow-x:auto!important;scrollbar-width:none;}
  .workspace-filters::-webkit-scrollbar{display:none;}
  .workspace-filter{flex:0 0 auto!important;min-height:32px!important;padding:0 9px!important;font-size:9px!important;}
  .workspace-file-grid{grid-template-columns:1fr!important;gap:7px!important;}

  /* Calls: compact, media-first, no giant empty desktop canvas. */
  .c256-call-root{gap:10px!important;padding:12px 0 6px!important;}
  .c256-call-head{gap:8px!important;align-items:center!important;padding:0 1px!important;}
  .c256-call-head h3{font-size:18px!important;margin:3px 0!important;}
  .c256-call-head p{font-size:10px!important;}
  .c256-call-status{max-width:46vw;overflow:hidden;text-overflow:ellipsis;padding:6px 8px!important;font-size:9px!important;}
  .c256-call-stage{
    width:100%!important;
    min-height:42svh!important;
    height:42svh!important;
    max-height:430px!important;
    border-radius:16px!important;
  }
  .c256-call-remote{width:100%!important;height:100%!important;object-fit:contain!important;}
  .c256-call-local{width:30%!important;max-width:128px!important;right:8px!important;bottom:8px!important;border-radius:11px!important;}
  .c256-call-stage-empty{max-width:300px!important;padding:18px!important;font-size:10px!important;line-height:1.55!important;}
  .c256-call-incoming,.c256-call-outgoing{padding:11px 12px!important;border-radius:13px!important;gap:9px!important;}
  .c256-call-incoming strong{font-size:12px!important;}
  .c256-call-incoming>span{font-size:9px!important;}
  .c256-call-incoming>div{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:6px!important;}
  .c256-call-incoming button{min-height:42px!important;}
  .c256-call-detail{font-size:9px!important;min-height:16px!important;}
  .c256-call-controls{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:6px!important;}
  .c256-call-controls .danger{grid-column:1/-1;min-height:44px!important;}
  .c256-call-controls button{min-height:42px!important;}
  .c256-call-start{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:6px!important;}
  .c256-call-start button{min-height:44px!important;}
  .c256-call-start small{grid-column:1/-1;font-size:8px!important;line-height:1.45!important;}

  /* Sheets/settings are full-screen on touch; never sit underneath the header. */
  .sheet{
    position:fixed!important;
    inset:0!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    z-index:8500!important;
    width:100vw!important;
    max-width:none!important;
    max-height:none!important;
    height:100dvh!important;
    border:0!important;
    border-radius:0!important;
    padding-top:var(--safe-top)!important;
  }
  .sheet-h{padding:12px 14px!important;min-height:54px!important;}
  .c256-settings-body{min-height:0!important;padding:12px 14px!important;gap:15px!important;}
  .c256-setting-row{padding:12px 0!important;gap:12px!important;}
  .c256-setting-row strong{font-size:11px!important;}
  .c256-setting-row small{font-size:9px!important;}
  .c256-setting-select{width:auto!important;min-width:106px!important;min-height:40px!important;font-size:16px!important;}
  .c256-settings-actions{padding:0 14px 12px!important;flex-wrap:wrap!important;}
  .c256-settings-actions button{min-height:42px!important;}
  .c256-settings-note{margin:0 14px 12px!important;font-size:9px!important;}
}

@media (max-width:390px){
  .mobile-brand .brand-wordmark{display:none!important;}
  .mobile-brand{flex:0 0 30px!important;width:30px!important;}
  .mobile-brand .brand-mark{width:29px!important;height:29px!important;}
  .room-name{max-width:29vw!important;font-size:14px!important;}
  .room-meta{font-size:9px!important;}
  .bar-right{gap:3px!important;}
  .icon-btn{width:34px!important;height:34px!important;min-width:34px!important;}
  .ttl-control{width:58px!important;min-width:58px!important;}
  #ttl-live{width:49px!important;min-width:49px!important;font-size:10px!important;}
  .workspace-panel{padding-left:9px!important;padding-right:9px!important;}
  .workspace-tabs{margin-left:-9px!important;margin-right:-9px!important;width:calc(100% + 18px)!important;padding-left:9px!important;padding-right:9px!important;}
  .workspace-storage-main{grid-template-columns:1fr!important;}
  .workspace-storage-meta{flex-direction:row!important;justify-content:space-between!important;align-items:center!important;}
  .workspace-actions{grid-template-columns:1fr 1fr!important;}
  .workspace-actions .workspace-voice{grid-column:1/-1;}
  .c256-call-stage{min-height:38svh!important;height:38svh!important;}
  .c256-call-start{grid-template-columns:1fr!important;}
  .c256-call-start small{margin-top:1px;}
}

@media (max-width:350px){
  .quick-share-btn{display:none!important;}
  .room-name{max-width:25vw!important;}
  .ttl-control{display:none!important;}
  .c256-call-head{align-items:flex-start!important;}
  .c256-call-status{max-width:42vw!important;}
}

@media (prefers-reduced-motion:reduce){
  .workspace-panel,.workspace-tab,.c256-call-stage,.workspace-file-item{scroll-behavior:auto!important;transition:none!important;}
}
.c256-plans-group{gap:12px}
.c256-plans-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.c256-plans-head>div{display:grid;gap:4px;min-width:0}
.c256-plans-head strong{font-size:13px;color:#e8f5f9}
.c256-plans-head small{font-size:10px;line-height:1.5;color:#688091}
.c256-plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.c256-plan-card{display:grid;gap:7px;min-width:0;padding:13px;border:1px solid rgba(92,177,211,.12);border-radius:15px;background:linear-gradient(145deg,rgba(10,24,34,.88),rgba(4,12,18,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.c256-plan-card[data-current="true"]{border-color:rgba(38,202,231,.34);box-shadow:0 0 0 1px rgba(38,202,231,.06) inset}
.c256-plan-card strong{color:#e8f5f9;font-size:13px}
.c256-plan-price{color:#63dced;font-size:15px;font-weight:700;letter-spacing:-.02em}
.c256-plan-card small{color:#6d8797;font-size:9px;line-height:1.45;min-height:27px}
.c256-plan-card button{width:100%;margin-top:3px}
.c256-plan-loading{grid-column:1/-1;padding:16px;border:1px dashed rgba(92,177,211,.15);border-radius:14px;color:#6d8797;font-size:11px}
.c256-payment-note{font-size:9px;line-height:1.55;color:#597181;padding-top:2px}
:root[data-c256-theme="light"] .c256-plan-card{background:linear-gradient(145deg,#fff,#f2f7f9);border-color:#d2e0e6}
:root[data-c256-theme="light"] .c256-plan-card strong,.c256-plans-head strong{color:#102033}
:root[data-c256-theme="light"] .c256-plan-card small,.c256-plans-head small,.c256-payment-note{color:#617687}
@media (max-width:760px){.c256-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.c256-plans-head{align-items:flex-start;flex-direction:column;gap:8px}.c256-payment-note{font-size:9px}}
@media (max-width:430px){.c256-plan-grid{grid-template-columns:1fr}.c256-plan-card{padding:12px}.c256-plan-card small{min-height:0}}


.workspace-close-label{display:none}
.c256-plan-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.c256-call-target{min-height:38px;display:flex;align-items:center;padding:0 11px;border:1px solid rgba(90,180,220,.09);border-radius:10px;background:rgba(255,255,255,.018);color:#a6bdc9;font-size:11px}
.c256-call-start-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.c256-call-debug{margin-top:10px;border:1px solid rgba(90,180,220,.07);border-radius:10px;background:rgba(255,255,255,.012);color:#6e8797}
.c256-call-debug summary{padding:8px 10px;cursor:pointer;font-size:10px}
.c256-call-debug pre{max-height:180px;overflow:auto;margin:0;padding:8px 10px;white-space:pre-wrap;word-break:break-word;font:9px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7f9baa}
@media(max-width:650px){
  html,body{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
  #app{width:100%;max-width:100%;min-width:0;overflow:hidden}
  .room-header{min-width:0;padding-left:10px!important;padding-right:10px!important}
  .room-header>*{min-width:0}
  .room-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chat256-room-menu{position:relative!important;z-index:2147483000!important}
  #chat256-room-menu{position:absolute!important;top:calc(100% + 6px)!important;right:0!important;left:auto!important;width:min(260px,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important;z-index:2147483001!important}
  .workspace-panel{position:absolute!important;z-index:7000!important;inset:58px 0 0!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;padding:12px 10px calc(20px + var(--safe-bottom))!important;overflow-x:hidden!important;overflow-y:auto!important}
  .workspace-top{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding-bottom:10px!important}
  .workspace-top h2{font-size:19px!important;line-height:1.1!important}
  .workspace-top p{font-size:10px!important;line-height:1.4!important}
  .workspace-close{display:flex!important;align-items:center;justify-content:center;gap:4px;width:auto!important;min-width:42px!important;height:38px!important;padding:0 9px!important}
  .workspace-close-label{display:inline;font-size:10px;font-weight:800}
  .workspace-tabs{position:sticky!important;top:0!important;z-index:4!important;display:flex!important;overflow-x:auto!important;gap:5px!important;margin:0 -10px!important;padding:8px 10px!important;background:rgba(5,12,19,.97)!important;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .workspace-tab{flex:1 0 0!important;min-width:0!important;min-height:38px!important;padding:0 8px!important;font-size:10px!important}
  .workspace-view{width:100%!important;min-width:0!important}
  .workspace-storage-card{margin-top:10px!important;padding:12px!important}
  .workspace-storage-actions{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important}
  .workspace-storage-note{grid-column:1/-1!important}
  .workspace-storage-actions button{min-height:40px!important;white-space:nowrap!important}
  .workspace-hero-row{padding:16px 0 10px!important}
  .workspace-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important;gap:7px!important}
  .workspace-actions .workspace-upload{grid-column:1/-1!important}
  .workspace-actions button{min-width:0!important;min-height:42px!important;font-size:10px!important}
  .workspace-section-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;align-items:center!important}
  .workspace-section-tools{display:flex!important;flex-direction:row!important;align-items:center!important;gap:6px!important}
  .workspace-refresh{min-height:34px!important}
  .workspace-filters{max-width:100%!important;overflow-x:auto!important;padding-bottom:8px!important}
  .workspace-file-grid{grid-template-columns:1fr!important;min-width:0!important}
  .workspace-file-item{min-width:0!important;grid-template-columns:38px minmax(0,1fr) auto!important}
  .workspace-file-copy{min-width:0!important}
  .workspace-file-copy strong,.workspace-file-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .c256-call-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important}
  .c256-call-stage{min-height:220px!important;max-height:48dvh!important;border-radius:14px!important}
  .c256-call-remote,.c256-call-local{max-width:100%!important;max-height:48dvh!important;object-fit:contain!important}
  .c256-call-start-actions,.c256-call-controls{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  .c256-call-controls [data-c256-call-action="hangup"]{grid-column:1/-1}
  .c256-call-start-actions button,.c256-call-controls button{min-height:44px!important}
  .c256-call-target{font-size:10px!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sheet{top:58px!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:100%!important;max-height:none!important;border-radius:0!important;z-index:12000!important;overflow:auto!important;padding-bottom:var(--safe-bottom)!important}
  #people-sheet .sheet-h,#contacts-panel .sheet-h{position:sticky;top:0;z-index:2}
  #people-sheet .user-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding:12px!important}
  #people-sheet .user-row-actions{display:none!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;margin-left:0!important}#people-sheet .user-row-actions.c256-actions-open{display:grid!important}
  #people-sheet .user-row-actions button{min-height:40px!important;font-size:10px!important}
  .c256-plans-head{display:grid!important;gap:8px!important}
  .c256-plan-grid{grid-template-columns:1fr!important}
  .c256-plan-card{min-width:0!important;padding:12px!important}
  .c256-plan-actions{display:grid!important;grid-template-columns:1fr!important}
  .c256-plan-actions button{width:100%!important;min-height:42px!important}
  #c256-settings-panel{z-index:13000!important}
}
@media(max-width:360px){
  .workspace-top h2{font-size:17px!important}
  .workspace-tabs .workspace-tab{font-size:9px!important;padding:0 5px!important}
  .workspace-storage-actions{grid-template-columns:1fr!important}
  .workspace-storage-actions button{width:100%!important}
  .workspace-section-head{grid-template-columns:1fr!important}
  .workspace-section-tools{justify-content:space-between!important}
}

/* ---------- Mobile viewport hardening ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
@media (max-width:900px){
  html,body,#app{max-width:100%;}
  body{touch-action:pan-y;}
  input,textarea,select,button{font-size:16px;}
  input,textarea,select{max-width:100%;}
  .composer textarea#input,
  .c256-private-composer #c256-private-input{font-size:16px!important;}
  .workspace-panel,.workspace-panel *{min-width:0;}
  .workspace-panel img,.workspace-panel video{max-width:100%;height:auto;}
}

/* Mobile viewport stability: prevent browser text inflation and unintended
   layout expansion while preserving user-controlled page zoom. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
@media (max-width:900px){
  html,body,#app{max-width:100%;}
  input,textarea,select,button{font-size:16px;}
  input,textarea,select{max-width:100%;}
  .composer textarea#input,
  .c256-private-composer #c256-private-input{font-size:16px!important;}
  .workspace-panel,.workspace-panel *{min-width:0;}
  .workspace-panel img,.workspace-panel video{max-width:100%;}
}

/* CHAT256 FINAL PRODUCTION POLISH — call surface + notifications */
.chat256-notification-bell{
  position:relative!important;
}
.chat256-notification-count{
  position:absolute;
  top:2px;
  right:2px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font:700 9px/1 system-ui,sans-serif;
  background:#ef4444;
  color:#fff;
  box-shadow:0 0 0 2px var(--app-bg,#07111c);
}
.chat256-notification-count[hidden]{display:none!important}

#chat256-toast-host[data-open="0"]{
  display:none!important;
}

#c256-call-root[data-call-surface="active"]{
  position:fixed!important;
  inset:0!important;
  z-index:2147483000!important;
  width:100vw!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:none!important;
  margin:0!important;
  padding:
    max(12px,var(--safe-top,env(safe-area-inset-top)))
    max(12px,var(--safe-right,env(safe-area-inset-right)))
    max(12px,var(--safe-bottom,env(safe-area-inset-bottom)))
    max(12px,var(--safe-left,env(safe-area-inset-left)))!important;
  box-sizing:border-box!important;
  background:
    radial-gradient(900px 600px at 50% 0,rgba(25,185,255,.12),transparent 65%),
    linear-gradient(180deg,#050b12,#020407)!important;
  overflow:hidden!important;
}

#c256-call-root[data-call-surface="active"] .c256-call-stage{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  position:relative!important;
  overflow:hidden!important;
  border-radius:0!important;
}

#c256-call-root[data-call-surface="active"] video{
  max-width:100%!important;
}

#c256-call-root[data-call-surface="active"] .c256-call-remote,
#c256-call-root[data-call-surface="active"] .c256-call-video,
#c256-call-root[data-call-surface="active"] .c256-call-media{
  flex:1 1 auto!important;
  min-height:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}

#c256-call-root[data-call-surface="active"] .c256-call-local,
#c256-call-root[data-call-surface="active"] .c256-call-preview{
  position:absolute!important;
  z-index:20!important;
  right:16px!important;
  top:max(16px,var(--safe-top,env(safe-area-inset-top)))!important;
  width:min(30vw,180px)!important;
  aspect-ratio:3/4!important;
  height:auto!important;
  object-fit:cover!important;
  border-radius:18px!important;
  overflow:hidden!important;
  box-shadow:0 12px 40px rgba(0,0,0,.55)!important;
}

#c256-call-root[data-call-surface="active"] .c256-call-controls{
  position:absolute!important;
  z-index:30!important;
  left:12px!important;
  right:12px!important;
  bottom:max(12px,var(--safe-bottom,env(safe-area-inset-bottom)))!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:12px!important;
  padding:14px!important;
  border-radius:24px!important;
  background:rgba(4,9,15,.72)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

@media(max-width:700px){
  #c256-call-root[data-call-surface="active"]{
    padding:0!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-local,
  #c256-call-root[data-call-surface="active"] .c256-call-preview{
    right:12px!important;
    top:max(12px,var(--safe-top,env(safe-area-inset-top)))!important;
    width:112px!important;
    border-radius:16px!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-controls{
    left:10px!important;
    right:10px!important;
    bottom:max(10px,var(--safe-bottom,env(safe-area-inset-bottom)))!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    padding:10px!important;
    border-radius:20px!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-controls button{
    min-height:48px!important;
  }
}


/* ================================================================
   CHAT256 FINAL MOBILE / IPHONE LAYOUT
   Authoritative final layer. Intentionally comes after legacy
   mobile generations so the application has one deterministic
   touch layout.
   ================================================================ */

@media (max-width:900px){

  html,
  body{
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
    -webkit-text-size-adjust:100%!important;
  }

  body{
    position:fixed!important;
    inset:0!important;
  }

  #app{
    position:relative!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }

  .app-body{
    display:flex!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .sidebar{
    display:none!important;
  }

  .chat-main{
    display:flex!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .bar{
    position:relative!important;
    z-index:100!important;
    display:flex!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    box-sizing:border-box!important;
    padding:
      max(7px,var(--safe-top,env(safe-area-inset-top)))
      7px
      7px!important;
  }

  .bar-left{
    flex:1 1 auto!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  .bar-right{
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:2px!important;
    min-width:0!important;
  }

  .bar-right>.ttl-control{
    display:none!important;
  }

  .bar-right>.icon-btn,
  .header-notification-slot{
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
  }

  .header-notification-slot{
    display:grid!important;
    place-items:center!important;
  }

  .room-name{
    max-width:42vw!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .msgs{
    position:relative!important;
    z-index:1!important;
    display:block!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:12px 9px 14px!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-gutter:auto!important;
  }

  .composer{
    position:relative!important;
    z-index:100!important;
    display:grid!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-height:58px!important;
    box-sizing:border-box!important;
    grid-template-columns:42px minmax(0,1fr) 42px 46px!important;
    grid-template-areas:"attach input voice send"!important;
    gap:6px!important;
    margin:0!important;
    padding:
      7px
      7px
      max(7px,var(--safe-bottom,env(safe-area-inset-bottom)))!important;
  }

  .composer > .c256-attach-button,.composer > [data-c256-room-attach]{grid-area:attach!important;grid-column:1!important;grid-row:1!important}
  .composer > textarea#input{grid-area:input!important;grid-column:2!important;grid-row:1!important}
  .composer > .composer-voice{grid-area:voice!important;grid-column:3!important;grid-row:1!important}
  .composer > .send{grid-area:send!important;grid-column:4!important;grid-row:1!important;width:46px!important;min-width:46px!important;height:44px!important}

  .composer textarea#input{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    max-height:120px!important;
    box-sizing:border-box!important;
    font-size:16px!important;
  }

  .composer .c256-attach-button,
  .composer [data-c256-room-attach]{
    width:42px!important;
    min-width:42px!important;
    height:44px!important;
    min-height:44px!important;
  }

  .composer>.send{
    width:46px!important;
    min-width:46px!important;
    height:44px!important;
  }

  .trust-bar{
    display:none!important;
  }

  /* Workspace is a genuine mobile page, not an offset desktop panel. */
  .workspace-panel{
    position:fixed!important;
    inset:0!important;
    z-index:7000!important;
    display:flex!important;
    flex-direction:column!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:
      max(8px,var(--safe-top,env(safe-area-inset-top)))
      10px
      max(10px,var(--safe-bottom,env(safe-area-inset-bottom)))!important;
    box-sizing:border-box!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }

  .workspace-panel.hide{
    display:none!important;
  }

  .workspace-top{
    display:flex!important;
    flex:0 0 auto!important;
    min-height:48px!important;
    padding:2px 2px 8px!important;
  }

  .workspace-tabs{
    display:flex!important;
    flex:0 0 auto!important;
    width:100%!important;
    min-height:44px!important;
    margin:0!important;
    padding:5px 0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .workspace-tabs::-webkit-scrollbar{
    display:none!important;
  }

  .workspace-tab{
    flex:0 0 auto!important;
    min-width:max-content!important;
    min-height:36px!important;
    padding:0 12px!important;
    touch-action:manipulation!important;
  }

  .workspace-view{
    display:block!important;
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding:8px 0!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .workspace-view.hide{
    display:none!important;
  }

  /* ============================================================
     Full-screen call experience
     ============================================================ */

  #c256-call-root[data-call-surface="active"]{
    position:fixed!important;
    inset:0!important;
    z-index:2147483000!important;
    display:flex!important;
    flex-direction:column!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:
      max(12px,var(--safe-top,env(safe-area-inset-top)))
      10px
      max(10px,var(--safe-bottom,env(safe-area-inset-bottom)))!important;
    gap:8px!important;
    overflow:hidden!important;
    border-radius:0!important;
    background:
      radial-gradient(1000px 600px at 50% -10%,rgba(34,211,255,.14),transparent 58%),
      linear-gradient(180deg,#02070d,#000205)!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-head{
    display:flex!important;
    flex:0 0 auto!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:50px!important;
    padding:0 4px!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-stage{
    position:relative!important;
    display:flex!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background:#020508!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-remote{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    background:#020508!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-local{
    position:absolute!important;
    z-index:25!important;
    display:block!important;
    width:30vw!important;
    max-width:120px!important;
    height:auto!important;
    aspect-ratio:3/4!important;
    right:10px!important;
    bottom:10px!important;
    object-fit:cover!important;
    border-radius:14px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:0 12px 35px rgba(0,0,0,.65)!important;
  }

  /* Incoming call behaves like a native mobile call sheet. */
  #c256-call-root[data-call-surface="active"] .c256-call-incoming{
    position:absolute!important;
    inset:0!important;
    z-index:100!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    padding:28px 20px!important;
    border:0!important;
    border-radius:0!important;
    background:
      radial-gradient(500px 400px at 50% 35%,rgba(34,211,255,.10),transparent 65%),
      linear-gradient(180deg,rgba(2,8,14,.82),rgba(0,2,5,.97))!important;
    backdrop-filter:blur(28px)!important;
    -webkit-backdrop-filter:blur(28px)!important;
    text-align:center!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-incoming-avatar{
    display:grid!important;
    place-items:center!important;
    width:92px!important;
    height:92px!important;
    margin-bottom:8px!important;
    border-radius:50%!important;
    background:linear-gradient(145deg,#17394b,#091721)!important;
    border:1px solid rgba(69,211,255,.38)!important;
    color:#8eeaff!important;
    font-size:34px!important;
    font-weight:800!important;
    box-shadow:
      0 0 0 10px rgba(34,211,255,.045),
      0 22px 65px rgba(0,0,0,.55)!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-incoming strong{
    color:#f2f8fb!important;
    font-size:24px!important;
    line-height:1.15!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-incoming span{
    color:#a7bcc8!important;
    font-size:14px!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-incoming small{
    color:#607987!important;
    font-size:10px!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-incoming>div{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:min(430px,100%)!important;
    gap:10px!important;
    margin-top:18px!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-incoming button{
    min-height:56px!important;
    border-radius:18px!important;
    font-size:15px!important;
    font-weight:800!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-controls{
    position:relative!important;
    z-index:40!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    flex:0 0 auto!important;
    width:100%!important;
    gap:7px!important;
    padding:8px!important;
    border-radius:20px!important;
    background:rgba(7,14,21,.84)!important;
    backdrop-filter:blur(20px)!important;
    -webkit-backdrop-filter:blur(20px)!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-controls .danger{
    grid-column:1/-1!important;
    min-height:48px!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-controls button{
    min-height:46px!important;
    touch-action:manipulation!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-detail,
  #c256-call-root[data-call-surface="active"] .c256-call-outgoing{
    flex:0 0 auto!important;
    margin:0!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-debug{
    display:none!important;
  }
}

@media(max-width:390px){
  .bar-right>.icon-btn,
  .header-notification-slot,
  .header-notification-slot .chat256-notification-bell{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-incoming-avatar{
    width:78px!important;
    height:78px!important;
    font-size:29px!important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-incoming strong{
    font-size:21px!important;
  }
}


/* ============================================================
   CHAT256 FINAL MOBILE CALL SURFACE
   This layer intentionally comes last.
   ============================================================ */
@media (max-width:900px) {
  html,body,#app {
    width:100%;
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    overscroll-behavior:none;
  }

  .app-body {
    width:100%;
    height:100%;
    min-height:0;
    display:flex;
    flex:1 1 auto;
    overflow:hidden;
  }

  .workspace-panel {
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    z-index:2147482000 !important;
  }

  .workspace-view {
    width:100%;
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  #c256-call-root[data-call-surface="active"] {
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:
      max(8px,env(safe-area-inset-top))
      max(8px,env(safe-area-inset-right))
      max(8px,env(safe-area-inset-bottom))
      max(8px,env(safe-area-inset-left)) !important;
    box-sizing:border-box !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    background:#050505;
    z-index:2147483000 !important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-head {
    flex:0 0 auto;
    min-height:52px;
    padding:6px 4px;
    position:relative;
    z-index:4;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-stage {
    position:relative !important;
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 !important;
    overflow:hidden !important;
    border-radius:16px;
    background:#000;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-remote {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    display:block !important;
    background:#000;
    z-index:1;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-local {
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    width:30vw !important;
    max-width:150px !important;
    min-width:88px !important;
    height:auto !important;
    aspect-ratio:3/4 !important;
    object-fit:cover !important;
    border-radius:14px !important;
    background:#111;
    z-index:3 !important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-audio {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    opacity:.001 !important;
    pointer-events:none !important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-controls {
    flex:0 0 auto;
    width:100%;
    min-height:76px;
    padding:8px 4px max(8px,env(safe-area-inset-bottom));
    box-sizing:border-box;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    position:relative;
    z-index:5;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-controls button {
    min-width:50px;
    min-height:50px;
    border-radius:50%;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-incoming {
    position:absolute !important;
    inset:0 !important;
    z-index:10 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:14px !important;
    padding:28px !important;
    box-sizing:border-box !important;
    text-align:center !important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-incoming-avatar {
    width:88px !important;
    height:88px !important;
    border-radius:50% !important;
    display:grid !important;
    place-items:center !important;
    font-size:34px !important;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-incoming button {
    min-width:125px !important;
    min-height:50px !important;
    margin:4px !important;
    touch-action:manipulation;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-remote.hide,
  #c256-call-root[data-call-surface="active"] .c256-call-local.hide {
    display:none !important;
  }
}

@media (max-width:390px) {
  #c256-call-root[data-call-surface="active"] .c256-call-controls {
    min-height:70px;
  }

  #c256-call-root[data-call-surface="active"] .c256-call-controls button {
    min-width:46px;
    min-height:46px;
  }
}
/* CHAT256 MOBILE IPHONE CALL SURFACE FINAL */
@media (max-width:900px){
body:has(#c256-call-root[data-call-surface="active"]){overflow:hidden!important}
#c256-call-root[data-call-surface="active"]{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;margin:0!important;padding:0!important;z-index:2147483647!important;display:block!important;overflow:hidden!important;background:#000!important;isolation:isolate!important}
.workspace-panel:has(#c256-call-root[data-call-surface="active"]){position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:0!important;overflow:hidden!important;z-index:2147483646!important}
.workspace-panel:has(#c256-call-root[data-call-surface="active"]) .workspace-view{width:100%!important;height:100%!important;min-height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important}
#c256-call-root[data-call-surface="active"] .c256-call-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:100%!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#000!important;z-index:0!important}
#c256-call-root[data-call-surface="active"] .c256-call-remote{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;background:#000!important;z-index:0!important}
#c256-call-root[data-call-surface="active"] .c256-call-local{position:absolute!important;top:max(16px,calc(env(safe-area-inset-top) + 10px))!important;right:14px!important;width:29vw!important;max-width:145px!important;min-width:88px!important;height:auto!important;aspect-ratio:3/4!important;object-fit:cover!important;border-radius:16px!important;z-index:20!important}
#c256-call-root[data-call-surface="active"] .c256-call-head{position:absolute!important;top:0!important;left:0!important;right:0!important;margin:0!important;padding:max(14px,calc(env(safe-area-inset-top) + 8px)) 16px 18px!important;box-sizing:border-box!important;display:flex!important;justify-content:space-between!important;align-items:flex-start!important;background:linear-gradient(to bottom,rgba(0,0,0,.7),transparent)!important;pointer-events:none!important;z-index:30!important}
#c256-call-root[data-call-surface="active"] .c256-call-head h3{margin:2px 0!important;font-size:21px!important;line-height:1.15!important;max-width:65vw!important;overflow-wrap:anywhere!important;text-shadow:0 2px 8px #000!important}
#c256-call-root[data-call-surface="active"] .c256-call-head p{margin:0!important;font-size:12px!important;text-shadow:0 2px 8px #000!important}
#c256-call-root[data-call-surface="active"] .c256-call-controls{position:absolute!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;min-height:0!important;padding:14px 14px max(18px,calc(env(safe-area-inset-bottom) + 8px))!important;box-sizing:border-box!important;display:flex!important;justify-content:center!important;gap:10px!important;background:linear-gradient(to top,rgba(0,0,0,.78),transparent)!important;z-index:40!important}
#c256-call-root[data-call-surface="active"] .c256-call-controls button{min-width:54px!important;min-height:54px!important;border-radius:50%!important;touch-action:manipulation!important}
#c256-call-root[data-call-surface="active"] .c256-call-start,#c256-call-root[data-call-surface="active"] .c256-call-outgoing,#c256-call-root[data-call-surface="active"] .c256-call-detail,#c256-call-root[data-call-surface="active"] .c256-call-debug{display:none!important}
#c256-call-root[data-call-surface="active"] .c256-call-audio{position:absolute!important;width:1px!important;height:1px!important;opacity:.001!important;pointer-events:none!important}
#c256-call-root[data-call-mode="incoming"] .c256-call-incoming{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:flex!important;flex-direction:column!important;justify-content:space-between!important;align-items:center!important;box-sizing:border-box!important;padding:max(28px,calc(env(safe-area-inset-top) + 18px)) 22px max(28px,calc(env(safe-area-inset-bottom) + 18px))!important;background:radial-gradient(circle at 50% 38%,rgba(55,55,55,.34),rgba(0,0,0,.98) 62%)!important;color:#fff!important;z-index:100!important;overflow:hidden!important}
#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-top{width:100%!important;display:flex!important;justify-content:space-between!important;align-items:center!important}
#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-center{width:100%!important;flex:1 1 auto!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;text-align:center!important;gap:12px!important}
#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-avatar{width:112px!important;height:112px!important;border-radius:50%!important;display:grid!important;place-items:center!important;font-size:42px!important;font-weight:700!important}
#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-center strong{max-width:94vw!important;font-size:27px!important;line-height:1.12!important}
#c256-call-root[data-call-mode="incoming"] #c256-call-incoming-name{max-width:94vw!important;font-size:21px!important;line-height:1.25!important;overflow-wrap:anywhere!important}
#c256-call-root[data-call-mode="incoming"] #c256-call-incoming-type{font-size:13px!important;opacity:.7!important}
#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-actions{width:100%!important;display:flex!important;justify-content:center!important;gap:30px!important}
#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-actions button{width:78px!important;height:78px!important;min-width:78px!important;min-height:78px!important;border-radius:50%!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:4px!important;touch-action:manipulation!important}
}
@media(max-width:390px){
#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-center strong{font-size:24px!important}
#c256-call-root[data-call-mode="incoming"] #c256-call-incoming-name{font-size:18px!important}
#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-actions{gap:22px!important}
#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-actions button{width:70px!important;height:70px!important;min-width:70px!important;min-height:70px!important}
}
/* Chat256 call surface: single authoritative mobile layer. */
html.c256-call-open, body.c256-call-open{overflow:hidden!important;overscroll-behavior:none!important}
body.c256-call-open #c256-private-panel{display:none!important;visibility:hidden!important;pointer-events:none!important}
body.c256-call-open #c256-private-backdrop{display:none!important;visibility:hidden!important;pointer-events:none!important}
@media(max-width:900px){
  body.c256-call-open #c256-workspace-panel{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;overflow:hidden!important;z-index:2147483000!important}
  body.c256-call-open #c256-workspace-panel .workspace-top,
  body.c256-call-open #c256-workspace-panel .workspace-tabs{display:none!important}
  body.c256-call-open #c256-workspace-panel .workspace-view{width:100%!important;height:100%!important;min-height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important}
  #c256-call-root[data-call-surface="incoming"]{position:fixed!important;left:10px!important;right:10px!important;bottom:max(12px,calc(env(safe-area-inset-bottom) + 10px))!important;width:auto!important;height:auto!important;min-height:0!important;max-height:55dvh!important;margin:0!important;padding:18px!important;z-index:2147483647!important;display:block!important;overflow:hidden!important;background:rgba(5,12,19,.98)!important;border:1px solid rgba(120,220,240,.22)!important;border-radius:22px!important;box-shadow:0 22px 70px rgba(0,0,0,.65)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-stage{display:none!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-head{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 0 14px!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-head h3{font-size:20px!important;margin:0!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-head p{font-size:11px!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-status{font-size:10px!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-incoming{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;padding:8px 0 2px!important;background:none!important;border:0!important;border-radius:0!important;box-sizing:border-box!important;text-align:center!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-incoming-avatar{width:64px!important;height:64px!important;border-radius:50%!important;display:grid!important;place-items:center!important;font-size:25px!important;margin-bottom:2px!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-incoming strong{font-size:12px!important}
  #c256-call-root[data-call-surface="incoming"] #c256-call-incoming-name{font-size:18px!important;line-height:1.2!important;overflow-wrap:anywhere!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-incoming small{font-size:10px!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-incoming>div{display:flex!important;width:100%!important;gap:10px!important;margin-top:8px!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-incoming button{flex:1!important;min-height:52px!important;border-radius:14px!important;touch-action:manipulation!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-controls{display:none!important}
  #c256-call-root[data-call-surface="incoming"] .c256-call-start,
  #c256-call-root[data-call-surface="incoming"] .c256-call-outgoing,
  #c256-call-root[data-call-surface="incoming"] .c256-call-detail,
  #c256-call-root[data-call-surface="incoming"] .c256-call-debug{display:none!important}

  #c256-call-root[data-call-surface="active"]{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;z-index:2147483647!important;display:block!important;overflow:hidden!important;background:#000!important;isolation:isolate!important}
  #c256-call-root[data-call-surface="active"] .c256-call-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;overflow:hidden!important;background:#000!important;display:block!important;z-index:0!important}
  #c256-call-root[data-call-surface="active"] .c256-call-stage-empty{display:none!important}
  #c256-call-root[data-call-surface="active"] .c256-call-remote{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;background:#000!important;z-index:1!important}
  #c256-call-root[data-call-surface="active"] .c256-call-local{position:absolute!important;top:max(14px,calc(env(safe-area-inset-top) + 10px))!important;right:12px!important;width:29vw!important;max-width:145px!important;min-width:88px!important;height:auto!important;aspect-ratio:3/4!important;object-fit:cover!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.2)!important;z-index:20!important;background:#111!important;box-shadow:0 10px 35px rgba(0,0,0,.5)!important}
  #c256-call-root[data-call-surface="active"] .c256-call-head{position:absolute!important;top:0!important;left:0!important;right:0!important;margin:0!important;padding:max(14px,calc(env(safe-area-inset-top) + 8px)) 16px 22px!important;box-sizing:border-box!important;display:flex!important;justify-content:space-between!important;align-items:flex-start!important;background:linear-gradient(to bottom,rgba(0,0,0,.72),transparent)!important;pointer-events:none!important;z-index:30!important}
  #c256-call-root[data-call-surface="active"] .c256-call-head h3{margin:2px 0!important;font-size:21px!important;line-height:1.15!important;max-width:65vw!important;overflow-wrap:anywhere!important;text-shadow:0 2px 8px #000!important}
  #c256-call-root[data-call-surface="active"] .c256-call-head p{margin:0!important;font-size:12px!important;text-shadow:0 2px 8px #000!important}
  #c256-call-root[data-call-surface="active"] .c256-call-controls{position:absolute!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;min-height:0!important;padding:14px 14px max(18px,calc(env(safe-area-inset-bottom) + 8px))!important;box-sizing:border-box!important;display:flex!important;justify-content:center!important;gap:10px!important;background:linear-gradient(to top,rgba(0,0,0,.82),transparent)!important;z-index:40!important}
  #c256-call-root[data-call-surface="active"] .c256-call-controls button{min-width:54px!important;min-height:54px!important;border-radius:50%!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent!important}
  #c256-call-root[data-call-surface="active"] .c256-call-start,
  #c256-call-root[data-call-surface="active"] .c256-call-outgoing,
  #c256-call-root[data-call-surface="active"] .c256-call-detail,
  #c256-call-root[data-call-surface="active"] .c256-call-debug{display:none!important}
  #c256-call-root[data-call-surface="active"] .c256-call-incoming{display:none!important}
  #c256-call-root[data-call-surface="active"] .c256-call-audio{position:absolute!important;width:1px!important;height:1px!important;opacity:.001!important;pointer-events:none!important}
  #c256-call-root[data-call-surface="active"] .c256-call-remote.hide,
  #c256-call-root[data-call-surface="active"] .c256-call-local.hide{display:none!important}
}


/* Chat256 Vault premium surface — additive, scoped, call UI untouched. */
.c256-recovery-card{
  margin-top:18px;padding:18px 20px;border:1px solid color-mix(in srgb,currentColor 12%,transparent);
  border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow:0 14px 42px rgba(0,0,0,.14);display:grid;gap:14px
}
.c256-recovery-card strong{display:block;font-size:15px;letter-spacing:-.01em}
.c256-recovery-card small{display:block;margin-top:5px;opacity:.68;line-height:1.5}
.c256-recovery-actions{display:flex;flex-wrap:wrap;gap:8px}
.c256-recovery-output{
  margin:0;padding:14px;border-radius:12px;white-space:pre-wrap;overflow:auto;
  font:600 12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);user-select:text
}
#c256-vault-toggle{min-width:118px;transition:transform .18s ease,box-shadow .18s ease}
#c256-vault-toggle.is-active{box-shadow:0 8px 24px rgba(90,180,255,.18);transform:translateY(-1px)}
.workspace-storage-card{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.workspace-file-state{opacity:.72}
@media (max-width:700px){
  .c256-recovery-card{padding:15px;border-radius:15px}
  .c256-recovery-actions{display:grid;grid-template-columns:1fr}
  .c256-recovery-actions button{width:100%}
  #c256-vault-toggle{width:100%}
}

/* ============================================================
   Chat256 Premium Finish — production-safe additive layer
   Scoped to application/Workspace surfaces; call rendering is
   intentionally left under its existing authoritative rules.
   ============================================================ */
:root{
  --c256-premium-line:rgba(121,205,235,.16);
  --c256-premium-line-strong:rgba(67,211,255,.28);
  --c256-premium-glass:rgba(8,20,31,.78);
  --c256-premium-glow:rgba(34,211,255,.12);
}

#app{
  border-color:var(--c256-premium-line);
  box-shadow:0 34px 120px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.018),inset 0 1px 0 rgba(255,255,255,.035);
}

button,input,textarea,select{font:inherit}
button{transition:transform .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(55,214,255,.72);
  outline-offset:2px;
}

.primary{
  box-shadow:0 12px 30px rgba(22,191,255,.14),inset 0 1px 0 rgba(255,255,255,.18);
}
.primary:hover{transform:translateY(-1px);box-shadow:0 16px 38px rgba(22,191,255,.19),inset 0 1px 0 rgba(255,255,255,.2)}
.secondary:hover{transform:translateY(-1px)}

.workspace-panel{
  background:
    radial-gradient(900px 460px at 72% -4%,rgba(34,211,255,.075),transparent 62%),
    radial-gradient(650px 420px at 4% 80%,rgba(71,119,255,.045),transparent 68%),
    linear-gradient(180deg,#07111c,#050b13);
}
.workspace-top{
  position:sticky;top:0;z-index:4;
  padding-top:4px;
  background:linear-gradient(180deg,rgba(7,17,28,.96),rgba(7,17,28,.78) 72%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.workspace-tabs{
  position:sticky;top:70px;z-index:3;
  padding:8px 0;
  background:linear-gradient(180deg,rgba(7,17,28,.92),rgba(7,17,28,.72));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.workspace-tab{
  border-color:transparent!important;
  border-radius:11px!important;
  min-height:38px!important;
  padding-inline:14px!important;
  font-weight:800!important;
}
.workspace-tab.is-active{
  box-shadow:0 8px 24px rgba(34,211,255,.08),inset 0 1px 0 rgba(255,255,255,.045);
}

.workspace-storage-card,
.workspace-product-card,
.workspace-file-item,
.workspace-empty,
.workspace-drop{
  border-color:var(--c256-premium-line)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.025);
}
.workspace-storage-card{
  background:linear-gradient(145deg,rgba(10,27,41,.82),rgba(5,14,23,.88))!important;
}
.workspace-drop{
  border-style:dashed!important;
  background:linear-gradient(145deg,rgba(22,191,255,.035),rgba(255,255,255,.008))!important;
}
.workspace-drop:hover,.workspace-drop:focus-visible{
  border-color:var(--c256-premium-line-strong)!important;
  background:linear-gradient(145deg,rgba(22,191,255,.065),rgba(255,255,255,.012))!important;
  box-shadow:0 18px 46px rgba(0,0,0,.16),0 0 0 1px rgba(34,211,255,.035);
}
.workspace-file-item{
  min-height:78px!important;
  background:linear-gradient(145deg,rgba(10,25,38,.94),rgba(5,13,22,.97))!important;
}
.workspace-file-item:hover{
  transform:translateY(-2px)!important;
  border-color:var(--c256-premium-line-strong)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.2),0 0 26px rgba(34,211,255,.045);
}
.workspace-file-icon{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 22px rgba(0,0,0,.12);
}
.workspace-file-actions .secondary{
  min-height:34px!important;
  padding-inline:11px!important;
  font-size:10px!important;
}
.workspace-file-state{letter-spacing:.01em}
.workspace-count{font-weight:750}

.workspace-upload-status{box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.workspace-upload-progress{box-shadow:inset 0 1px 2px rgba(0,0,0,.28)}
.workspace-upload-progress>span{box-shadow:0 0 14px rgba(34,211,255,.24)}

@media(max-width:700px){
  #app{width:100vw;height:100dvh;margin:0;border-radius:0;border-left:0;border-right:0}
  .workspace-panel{inset:60px 0 0!important;padding:18px 14px 24px!important}
  .workspace-top{padding-bottom:14px}
  .workspace-tabs{top:60px;overflow-x:auto;scrollbar-width:none}
  .workspace-tabs::-webkit-scrollbar{display:none}
  .workspace-hero-row{display:grid!important;gap:14px!important}
  .workspace-actions{display:grid!important;grid-template-columns:1fr 1fr!important}
  .workspace-actions #c256-vault-toggle{grid-column:1/-1}
  .workspace-file-grid{grid-template-columns:1fr!important}
  .workspace-file-item{grid-template-columns:40px minmax(0,1fr)!important}
  .workspace-file-state{grid-column:2!important;justify-self:start}
  .workspace-file-actions{grid-column:2!important;flex-wrap:wrap}
  .workspace-section-head{align-items:flex-start!important;flex-direction:column!important}
  .workspace-section-tools{width:100%;justify-content:space-between}
}

@media(prefers-reduced-motion:reduce){
  button,.workspace-file-item{transition:none!important}
  .workspace-file-item:hover,.primary:hover,.secondary:hover{transform:none!important}
}

:root[data-c256-theme="light"] #app{
  box-shadow:0 24px 70px rgba(24,59,78,.14),0 0 0 1px rgba(31,111,140,.045),inset 0 1px 0 rgba(255,255,255,.8);
}
:root[data-c256-theme="light"] .workspace-panel{
  background:linear-gradient(180deg,#f5fafc,#edf4f7)!important;
}
:root[data-c256-theme="light"] .workspace-top,
:root[data-c256-theme="light"] .workspace-tabs{
  background:linear-gradient(180deg,rgba(245,250,252,.97),rgba(245,250,252,.82) 72%,transparent);
}
:root[data-c256-theme="light"] .workspace-storage-card,
:root[data-c256-theme="light"] .workspace-product-card,
:root[data-c256-theme="light"] .workspace-file-item,
:root[data-c256-theme="light"] .workspace-empty{
  box-shadow:0 12px 34px rgba(30,66,84,.08),inset 0 1px 0 rgba(255,255,255,.9);
}

/* ================================================================
   V9 — PREMIUM PRODUCT SURFACE
   Final cascade layer: responsive, touch-first and intentionally
   scoped to the Workspace/product experience.
   ================================================================ */
:root{
  --c-surface-glow:rgba(88,223,255,.10);
  --c-surface-border:rgba(148,185,211,.14);
  --c-surface-border-strong:rgba(88,223,255,.28);
  --c-panel-shadow:0 28px 90px rgba(0,0,0,.34);
}

.workspace-panel{
  background:
    radial-gradient(900px 520px at 8% -8%,rgba(88,223,255,.10),transparent 62%),
    radial-gradient(760px 520px at 96% 8%,rgba(45,123,255,.07),transparent 68%),
    linear-gradient(180deg,#07121e 0%,#050b13 100%);
}
.workspace-top{padding-bottom:22px;border-bottom-color:rgba(148,185,211,.12)}
.workspace-top h2{font-size:clamp(24px,2.2vw,32px);line-height:1.05}
.workspace-top p{font-size:12px;max-width:720px}
.workspace-tabs{gap:7px;padding:15px 0 17px}
.workspace-tab{min-height:40px;padding:0 15px;border-radius:12px;font-size:12px}
.workspace-tab.is-active{background:linear-gradient(180deg,rgba(88,223,255,.13),rgba(88,223,255,.055));border-color:rgba(88,223,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.workspace-storage-card,
.workspace-packages,
.workspace-drop,
.workspace-file-item{
  border-color:var(--c-surface-border);
  box-shadow:var(--c-panel-shadow),inset 0 1px 0 rgba(255,255,255,.025);
}
.workspace-storage-card{margin-top:18px;padding:18px;border-radius:20px;background:linear-gradient(145deg,rgba(13,30,46,.94),rgba(6,15,25,.97))}
.workspace-storage-main{gap:24px}
.workspace-storage-copyblock strong{font-size:15px}
.workspace-storage-copyblock span:last-child{font-size:11px}
.workspace-storage-track{height:7px;background:rgba(148,185,211,.10)}
.workspace-storage-track>span{background:linear-gradient(90deg,#26c8ed,#58dfff,#7ee8ff);box-shadow:0 0 16px rgba(88,223,255,.22)}
.workspace-storage-actions{padding-top:2px}
.workspace-storage-note{font-size:10px}
.workspace-plan-badge{min-height:28px;padding:0 10px;font-size:9px}

.workspace-hero-row{padding:28px 0 18px;align-items:end}
.workspace-hero-row h3,.workspace-section-head h3{font-size:19px}
.workspace-hero-row p{font-size:12px;max-width:700px}
.workspace-actions{gap:9px}
.workspace-upload,.workspace-photo,.workspace-voice{min-height:42px;border-radius:12px;font-size:12px}
.workspace-upload{box-shadow:0 12px 32px rgba(34,196,235,.16)}

.workspace-drop{min-height:112px;padding:20px 22px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.008))}
.workspace-drop:hover,.workspace-drop:focus-visible,.workspace-drop.is-dragging{transform:translateY(-1px);border-color:rgba(88,223,255,.42);background:rgba(88,223,255,.035)}
.workspace-drop-icon{width:48px;height:48px;flex-basis:48px;border-radius:14px;background:linear-gradient(145deg,rgba(88,223,255,.12),rgba(88,223,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.workspace-drop strong{font-size:13px}.workspace-drop small{font-size:11px}
.workspace-section-head{padding:30px 0 13px}
.workspace-section-note{font-size:11px!important}
.workspace-count{padding:6px 9px;border:1px solid rgba(148,185,211,.11);border-radius:999px;background:rgba(255,255,255,.018);font-size:9px}
.workspace-filters{gap:7px}
.workspace-filter{min-height:34px;padding:0 12px;border-radius:999px}
.workspace-file-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.workspace-file-item{grid-template-columns:46px minmax(0,1fr) auto auto!important;min-height:82px!important;padding:14px!important;border-radius:17px!important;background:linear-gradient(145deg,rgba(13,29,44,.95),rgba(6,15,24,.98))!important}
.workspace-file-item:hover{transform:translateY(-2px)!important;border-color:rgba(88,223,255,.30)!important;box-shadow:0 20px 45px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)!important}
.workspace-file-icon{width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,rgba(88,223,255,.11),rgba(88,223,255,.025));font-size:8px}
.workspace-file-copy strong{font-size:12px}.workspace-file-copy small{font-size:10px}
.workspace-file-state{font-size:8px;padding:5px 7px}
.workspace-file-actions{gap:6px}
.workspace-file-actions .secondary{min-height:36px;padding:0 11px}
.workspace-empty{min-height:190px;align-content:center;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.018),rgba(255,255,255,.006))}

/* Package storefront lives inside Files, not Settings. */
.workspace-packages{margin-top:22px;padding:22px;border:1px solid var(--c-surface-border);border-radius:22px;background:linear-gradient(145deg,rgba(12,28,44,.92),rgba(6,15,25,.97))}
.workspace-packages-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:17px}
.workspace-packages-head h3{margin:5px 0 5px;color:#edf7fb;font-size:20px;letter-spacing:-.025em}
.workspace-packages-head p{margin:0;color:#7890a2;font-size:11px;line-height:1.55;max-width:680px}
.workspace-billing-state{flex:0 0 auto;padding:7px 10px;border:1px solid rgba(93,224,160,.15);border-radius:999px;background:rgba(93,224,160,.035);color:#78d9b0;font-size:9px;font-weight:850;white-space:nowrap}
.workspace-plan-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.c256-plan-card{position:relative;min-height:100%;padding:17px!important;border-radius:18px!important;border-color:rgba(148,185,211,.13)!important;background:linear-gradient(145deg,rgba(14,31,47,.96),rgba(6,15,24,.98))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 18px 45px rgba(0,0,0,.16)!important}
.c256-plan-card[data-current="true"]{border-color:rgba(88,223,255,.38)!important;box-shadow:0 0 0 1px rgba(88,223,255,.07) inset,0 20px 55px rgba(0,0,0,.20)!important}
.c256-plan-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.c256-plan-top strong{font-size:14px!important}
.c256-plan-state{padding:4px 7px;border:1px solid rgba(148,185,211,.11);border-radius:999px;color:#7590a2;font-size:8px;font-weight:850;white-space:nowrap}
.c256-plan-card[data-current="true"] .c256-plan-state{border-color:rgba(93,224,160,.17);background:rgba(93,224,160,.035);color:#78d9b0}
.c256-plan-price{margin-top:7px;color:#7be8fa!important;font-size:22px!important;font-weight:850!important;letter-spacing:-.035em!important}
.c256-plan-features{display:grid;gap:7px;margin:12px 0 2px;padding:0;list-style:none}
.c256-plan-features li{position:relative;padding-left:16px;color:#7890a2;font-size:10px;line-height:1.35}
.c256-plan-features li::before{content:"";position:absolute;left:0;top:.43em;width:6px;height:6px;border-radius:50%;background:#4fdbf5;box-shadow:0 0 0 3px rgba(79,219,245,.07)}
.c256-plan-actions{margin-top:auto;padding-top:13px}
.c256-plan-actions button{min-height:40px!important}
.c256-payment-note{margin-top:13px;padding-top:12px;border-top:1px solid rgba(148,185,211,.08);font-size:9px;line-height:1.55;color:#668093}

/* Keep Settings focused on preferences. */
.c256-settings-body{gap:24px}

@media (max-width:900px){
  .workspace-panel{padding:18px 16px calc(28px + var(--safe-bottom))!important}
  .workspace-packages-head{align-items:flex-start;flex-direction:column;gap:10px}
  .workspace-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .workspace-file-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .workspace-panel{padding-left:12px!important;padding-right:12px!important}
  .workspace-top{gap:12px}
  .workspace-top h2{font-size:23px}
  .workspace-top p{font-size:11px}
  .workspace-tabs{overflow-x:auto;scrollbar-width:none;margin-inline:-2px;padding-inline:2px}
  .workspace-tabs::-webkit-scrollbar{display:none}
  .workspace-tab{flex:0 0 auto}
  .workspace-storage-card{padding:15px;border-radius:17px}
  .workspace-storage-main{display:grid;grid-template-columns:1fr;gap:10px}
  .workspace-storage-meta{flex-direction:row;justify-content:space-between;align-items:center}
  .workspace-storage-actions{display:grid;grid-template-columns:1fr auto;gap:8px}
  .workspace-storage-note{grid-column:1/-1;order:2}
  .workspace-storage-actions .secondary{margin:0}
  .workspace-hero-row{gap:14px;padding-top:20px}
  .workspace-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .workspace-upload,.workspace-photo,.workspace-voice{width:100%}
  .workspace-drop{min-height:104px;padding:17px}
  .workspace-section-head{align-items:flex-start;flex-direction:column;gap:10px}
  .workspace-section-tools{width:100%;justify-content:space-between;align-items:center;flex-direction:row}
  .workspace-filters{max-width:100%;overflow-x:auto;padding-bottom:5px;scrollbar-width:none}
  .workspace-filters::-webkit-scrollbar{display:none}
  .workspace-filter{flex:0 0 auto}
  .workspace-file-item{grid-template-columns:42px minmax(0,1fr)!important;gap:10px!important}
  .workspace-file-icon{width:42px;height:42px}
  .workspace-file-state{grid-column:2;justify-self:start}
  .workspace-file-actions{grid-column:2;justify-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .workspace-file-actions .secondary{width:100%;min-height:40px!important}
  .workspace-packages{padding:16px;border-radius:18px}
  .workspace-packages-head h3{font-size:18px}
  .workspace-plan-grid{grid-template-columns:1fr}
  .c256-plan-card{padding:16px!important}
}
@media (max-width:390px){
  .workspace-actions{grid-template-columns:1fr}
  .workspace-storage-actions{grid-template-columns:1fr}
  .workspace-file-actions{grid-template-columns:1fr 1fr}
  .workspace-file-actions .workspace-delete{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .workspace-drop,.workspace-file-item,.primary,.secondary{transition:none!important}
}
:root[data-c256-theme="light"] .workspace-panel{background:linear-gradient(180deg,#f6fbfd 0%,#eef4f7 100%)}
:root[data-c256-theme="light"] .workspace-packages{background:linear-gradient(145deg,#fff,#eef5f8);border-color:#cfdee5}
:root[data-c256-theme="light"] .workspace-packages-head h3{color:#102033}
:root[data-c256-theme="light"] .workspace-packages-head p{color:#607487}
:root[data-c256-theme="light"] .workspace-billing-state{background:#f1faf6;border-color:#bfe2d2;color:#17825e}
:root[data-c256-theme="light"] .c256-plan-card{background:linear-gradient(145deg,#fff,#f3f7f9)!important;border-color:#d0dee5!important;box-shadow:0 14px 35px rgba(16,36,55,.08)!important}
:root[data-c256-theme="light"] .c256-plan-card[data-current="true"]{border-color:#82c8d8!important}
:root[data-c256-theme="light"] .c256-plan-top strong{color:#102033!important}
:root[data-c256-theme="light"] .c256-plan-price{color:#087f9f!important}
:root[data-c256-theme="light"] .c256-plan-features li{color:#607487}
:root[data-c256-theme="light"] .c256-payment-note{color:#687d8f}

.c256-document-viewer{width:min(1100px,94vw);height:min(86vh,900px);display:flex;flex-direction:column;gap:12px}.c256-document-frame{display:block;flex:1;width:100%;min-height:0;border:0;border-radius:12px;background:#fff}.c256-document-text{flex:1;min-height:0;margin:0;overflow:auto;padding:18px;border:1px solid rgba(90,180,220,.12);border-radius:12px;background:rgba(0,0,0,.18);color:#dce9ef;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}

/* FINAL CHAT/WORKSPACE GEOMETRY — authoritative layout correction */
#app{position:relative;display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden}
.app-body{position:relative;display:flex;flex:1 1 auto;width:100%;min-width:0;min-height:0;height:auto;overflow:hidden}
.chat-main{position:relative;display:flex;flex:1 1 auto;width:100%;min-width:0;min-height:0;height:100%;flex-direction:column;overflow:hidden}
.chat-main>.msgs{flex:1 1 auto;min-height:0;overflow:auto}
.chat-main>.composer{flex:0 0 auto}
#app.is-workspace-view .key-banner,#app.is-workspace-view .msgs,#app.is-workspace-view .composer,#app.is-workspace-view .trust-bar{display:none!important}
#app.is-workspace-view .workspace-panel{position:absolute!important;inset:0!important;z-index:7000!important;display:flex!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;box-sizing:border-box!important;overflow:hidden!important}
#app.is-workspace-view .workspace-panel.hide{display:none!important}
#app.is-workspace-view .workspace-panel>.workspace-view{min-width:0;min-height:0;overflow:auto}
#app.is-workspace-view .workspace-panel .workspace-view[data-c256-workspace-view="files"]{overflow-y:auto;overflow-x:hidden;padding-bottom:34px}
.workspace-packages{order:99!important;margin-top:30px;margin-bottom:4px}
@media(max-width:900px){#app.is-workspace-view .workspace-panel{inset:0!important;width:100%!important;height:100%!important}}
@media(min-width:901px){#app.is-workspace-view .workspace-panel{padding:24px clamp(22px,3vw,44px) 30px!important}}

.workspace-billing-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.c256-billing-interval{display:flex;align-items:center;gap:6px;font-size:12px}.c256-billing-interval select{font:inherit}

.workspace-admin-module{display:grid;gap:16px}.workspace-admin-head{padding-bottom:4px}.workspace-admin-frame{width:100%;min-height:720px;border:1px solid var(--c-border);border-radius:18px;background:var(--c-panel)}.workspace-billing-module{margin-top:0}

/* Native room-flow feedback. */
.landing-room-status{margin:1rem auto 0;max-width:38rem;text-align:center;font-size:.9rem;line-height:1.45;min-height:1.3rem}
.landing-room-status[data-state="working"]{opacity:.78}
.landing-room-status[data-state="error"]{opacity:1}


/* Chat256 native administrator control plane */
.admin-native-root{width:100%}
.admin-native-card{display:grid;gap:16px;padding:18px;border:1px solid var(--c-border);border-radius:18px;background:var(--c-surface);box-shadow:0 14px 45px rgba(0,0,0,.16)}
.admin-native-login{max-width:560px;margin:0 auto}
.admin-native-eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.72}
.admin-native-head,.admin-native-section-head,.admin-native-account-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.admin-native-head h3,.admin-native-section-head h4{margin:2px 0 4px}
.admin-native-message{padding:10px 12px;border-radius:10px;background:var(--c-surface-2);font-size:13px}
.admin-native-message.is-error{border:1px solid rgba(220,80,80,.45)}
.admin-native-message[data-state="ok"]{border:1px solid rgba(70,190,120,.35)}
.admin-native-tabs{display:flex;gap:7px;overflow:auto;padding:3px;border-bottom:1px solid var(--c-border)}
.admin-native-tabs button{border:0;background:transparent;color:inherit;padding:9px 12px;border-radius:9px;white-space:nowrap;cursor:pointer}
.admin-native-tabs button.is-active{background:var(--c-surface-2);font-weight:700}
.admin-native-panel{display:none;gap:14px}
.admin-native-panel.is-active{display:grid}
.admin-native-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.admin-native-stats.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.admin-native-stats>div{padding:13px;border:1px solid var(--c-border);border-radius:12px;background:var(--c-surface-2)}
.admin-native-stats span{display:block;font-size:11px;opacity:.7}
.admin-native-stats strong{display:block;font-size:20px;margin-top:5px}
.admin-native-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.admin-native-subcard,.admin-native-provider{padding:14px;border:1px solid var(--c-border);border-radius:14px;background:var(--c-surface-2)}
.admin-native-subcard h4,.admin-native-provider h4{margin:0 0 6px}
.admin-native-badges,.admin-native-provider-summary{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.admin-native-badge{display:inline-flex;align-items:center;padding:5px 8px;border:1px solid var(--c-border);border-radius:999px;font-size:11px;white-space:nowrap}
.admin-native-badge.is-ok{border-color:rgba(70,190,120,.5)}
.admin-native-badge.is-warn{border-color:rgba(220,170,70,.5)}
.admin-native-plan-list,.admin-native-account-list{display:grid;gap:12px}
.admin-native-plan{display:grid;gap:12px;padding:14px;border:1px solid var(--c-border);border-radius:14px;background:var(--c-surface-2)}
.admin-native-plan-head{display:flex;justify-content:space-between;gap:10px}
.admin-native-code{margin-left:8px;font-size:10px;opacity:.6;text-transform:uppercase}
.admin-native-check{font-size:12px;display:flex;gap:6px;align-items:center}
.admin-native-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.admin-native-fields label,.admin-native-provider-grid label,.admin-native-subcard>label,.admin-native-subcard form>label,.admin-native-login label{display:grid;gap:5px;font-size:11px}
.admin-native-fields input,.admin-native-provider-grid input,.admin-native-subcard input,.admin-native-subcard textarea,.admin-native-login input{width:100%;box-sizing:border-box}
.admin-native-plan-meta{display:grid;gap:4px;font-size:10px;opacity:.7;overflow:auto}
.admin-native-plan-meta code{word-break:break-all}
.admin-native-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.admin-native-account{display:grid;gap:8px;padding:13px;border:1px solid var(--c-border);border-radius:13px;background:var(--c-surface-2)}
.admin-native-account-top>div{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.admin-native-status{font-size:11px;text-transform:uppercase}
.admin-native-status.is-ok{color:inherit}
.admin-native-status.is-warn{opacity:.7}
.admin-native-account-meta{font-size:11px;opacity:.65}
.admin-native-provider-grid{display:grid;grid-template-columns:1fr;gap:10px}
.admin-native-secret-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px}
.admin-native-table-wrap{overflow:auto;border:1px solid var(--c-border);border-radius:12px}
.admin-native-table{width:100%;border-collapse:collapse;font-size:11px}
.admin-native-table th,.admin-native-table td{padding:9px;border-bottom:1px solid var(--c-border);text-align:left;vertical-align:top}
.admin-native-table th{font-size:10px;text-transform:uppercase;opacity:.65}
.admin-native-table tr:last-child td{border-bottom:0}
.admin-native-health{max-height:260px;overflow:auto;white-space:pre-wrap;font-size:10px}
.admin-native-empty{padding:18px;text-align:center;opacity:.65}
.admin-native-login form{display:grid;gap:10px}
.admin-native-login form button{width:100%}
@media(max-width:900px){
  .admin-native-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .admin-native-grid-2{grid-template-columns:1fr}
  .admin-native-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .admin-native-card{padding:12px}
  .admin-native-stats,.admin-native-stats.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-native-fields{grid-template-columns:1fr}
  .admin-native-secret-row{grid-template-columns:1fr 1fr}
  .admin-native-secret-row input{grid-column:1/-1}
}

/* Forum + Marketplace workspace blend */
#app.is-workspace-view .workspace-view[data-c256-workspace-view="forum"],
#app.is-workspace-view .workspace-view[data-c256-workspace-view="marketplace"]{min-height:0;overflow:auto;padding-bottom:28px}
.workspace-view[data-c256-workspace-view="forum"] .forum-embed-shell,
.workspace-view[data-c256-workspace-view="marketplace"] .forum-embed-shell{padding-top:4px}


/* CHAT256 FINAL15 GLOBAL INCOMING CALL */
#c256-call-incoming.c256-call-global-incoming[aria-hidden="false"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: rgba(3,8,14,.98) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 2147483647 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

#c256-call-incoming.c256-call-global-incoming[aria-hidden="false"] .c256-call-incoming-top {
  width: min(760px,100%) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

#c256-call-incoming.c256-call-global-incoming[aria-hidden="false"] .c256-call-incoming-center {
  width: min(760px,100%) !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 12px !important;
}

#c256-call-incoming.c256-call-global-incoming[aria-hidden="false"] .c256-call-incoming-avatar {
  width: 120px !important;
  height: 120px !important;
  min-width: 120px !important;
  min-height: 120px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-size: 44px !important;
  font-weight: 800 !important;
}

#c256-call-incoming.c256-call-global-incoming[aria-hidden="false"] strong {
  font-size: 30px !important;
}

#c256-call-incoming.c256-call-global-incoming[aria-hidden="false"] #c256-call-incoming-name {
  font-size: 22px !important;
}

#c256-call-incoming.c256-call-global-incoming[aria-hidden="false"] #c256-call-incoming-type {
  font-size: 15px !important;
  opacity: .8 !important;
}

#c256-call-incoming.c256-call-global-incoming[aria-hidden="false"] .c256-call-incoming-actions {
  width: min(520px,100%) !important;
  display: flex !important;
  justify-content: center !important;
  gap: 36px !important;
}

#c256-call-incoming.c256-call-global-incoming[aria-hidden="false"] .c256-call-incoming-actions button {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  touch-action: manipulation !important;
}

@media (max-width:600px) {
  #c256-call-incoming.c256-call-global-incoming[aria-hidden="false"] {
    padding: 20px 16px !important;
  }
  #c256-call-incoming.c256-call-global-incoming[aria-hidden="false"] .c256-call-incoming-avatar {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
  }
}


/* CHAT256 FINAL18 — call notification must not block unrelated UI. */
#c256-call-root{position:relative;z-index:1200}
#c256-call-incoming{pointer-events:none!important}
#c256-call-incoming[aria-hidden="false"]{position:fixed!important;top:calc(70px + env(safe-area-inset-top))!important;right:18px!important;left:auto!important;bottom:auto!important;width:min(420px,calc(100vw - 36px))!important;max-height:none!important;box-sizing:border-box!important;z-index:14000!important;pointer-events:none!important;display:flex!important;flex-direction:column!important;gap:14px!important;padding:18px!important;border-radius:18px!important;background:rgba(5,13,22,.97)!important;box-shadow:0 18px 55px rgba(0,0,0,.45)!important}
#c256-call-incoming[aria-hidden="false"] .c256-call-incoming-actions,
#c256-call-incoming[aria-hidden="false"] button{pointer-events:auto!important}
#c256-call-incoming[aria-hidden="false"] .c256-call-incoming-top,
#c256-call-incoming[aria-hidden="false"] .c256-call-incoming-center{width:100%!important}
#c256-call-incoming[aria-hidden="false"] .c256-call-incoming-center{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:6px!important}
#c256-call-incoming[aria-hidden="false"] .c256-call-incoming-avatar{width:64px!important;height:64px!important;min-width:64px!important;min-height:64px!important}
#c256-call-incoming[aria-hidden="false"] .c256-call-incoming-actions{display:flex!important;justify-content:flex-end!important;gap:10px!important}
#c256-call-incoming[aria-hidden="false"] .c256-call-incoming-actions button{min-width:110px!important;min-height:46px!important}
@media(max-width:600px){#c256-call-incoming[aria-hidden="false"]{top:calc(62px + env(safe-area-inset-top))!important;right:10px!important;width:calc(100vw - 20px)!important;padding:14px!important}}

/* ============================================================
   CHAT256 PREMIUM UI LAYER
   Unified menus, call surfaces and interaction polish.
   Functional behaviour remains owned by the existing modules.
   ============================================================ */

/* ---------- Global menu system ---------- */

:where(
  .menu,
  .dropdown-menu,
  .context-menu,
  .room-menu,
  .workspace-menu,
  .c256-menu,
  .c256-popover,
  [role="menu"]
){
  position:relative;
  isolation:isolate;
  border:1px solid rgba(150,220,245,.14)!important;
  border-radius:16px!important;
  background:
    linear-gradient(145deg,rgba(15,29,40,.98),rgba(5,13,20,.985))!important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.52),
    0 2px 12px rgba(34,211,255,.06),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
  backdrop-filter:blur(24px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(145%)!important;
  overflow:hidden;
}

:where(
  .menu,
  .dropdown-menu,
  .context-menu,
  .room-menu,
  .workspace-menu,
  .c256-menu,
  .c256-popover,
  [role="menu"]
) :where(
  button,
  a,
  [role="menuitem"],
  .menu-item
){
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  min-height:42px;
  gap:10px;
  padding:10px 13px;
  border:0!important;
  border-radius:10px;
  background:transparent!important;
  color:#d7e8ef!important;
  font:inherit;
  font-size:12px;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease;
}

:where(
  .menu,
  .dropdown-menu,
  .context-menu,
  .room-menu,
  .workspace-menu,
  .c256-menu,
  .c256-popover,
  [role="menu"]
) :where(
  button,
  a,
  [role="menuitem"],
  .menu-item
):hover{
  background:rgba(60,205,240,.075)!important;
  color:#fff!important;
}

:where(
  .menu,
  .dropdown-menu,
  .context-menu,
  .room-menu,
  .workspace-menu,
  .c256-menu,
  .c256-popover,
  [role="menu"]
) :where(
  button,
  a,
  [role="menuitem"],
  .menu-item
):active{
  transform:scale(.985);
  background:rgba(60,205,240,.12)!important;
}

:where(
  .menu,
  .dropdown-menu,
  .context-menu,
  .room-menu,
  .workspace-menu,
  .c256-menu,
  .c256-popover,
  [role="menu"]
) :where(
  .danger,
  [data-danger="true"],
  [aria-label*="Delete"],
  [aria-label*="Remove"]
){
  color:#ffb0b0!important;
}

:where(
  .menu,
  .dropdown-menu,
  .context-menu,
  .room-menu,
  .workspace-menu,
  .c256-menu,
  .c256-popover,
  [role="menu"]
) :where(
  .separator,
  hr,
  [role="separator"]
){
  height:1px;
  margin:6px 9px;
  border:0;
  background:rgba(150,220,245,.09);
}

/* ---------- Light theme menus ---------- */

:root[data-c256-theme="light"] :where(
  .menu,
  .dropdown-menu,
  .context-menu,
  .room-menu,
  .workspace-menu,
  .c256-menu,
  .c256-popover,
  [role="menu"]
){
  background:rgba(255,255,255,.97)!important;
  border-color:rgba(20,70,95,.12)!important;
  box-shadow:
    0 24px 60px rgba(25,50,65,.18),
    inset 0 1px 0 rgba(255,255,255,.8)!important;
}

:root[data-c256-theme="light"] :where(
  .menu,
  .dropdown-menu,
  .context-menu,
  .room-menu,
  .workspace-menu,
  .c256-menu,
  .c256-popover,
  [role="menu"]
) :where(
  button,
  a,
  [role="menuitem"],
  .menu-item
){
  color:#19303d!important;
}

:root[data-c256-theme="light"] :where(
  .menu,
  .dropdown-menu,
  .context-menu,
  .room-menu,
  .workspace-menu,
  .c256-menu,
  .c256-popover,
  [role="menu"]
) :where(
  button,
  a,
  [role="menuitem"],
  .menu-item
):hover{
  background:rgba(20,150,190,.075)!important;
  color:#071d28!important;
}

/* ---------- Incoming call: true app-level overlay ---------- */

html.c256-call-open,
body.c256-call-open{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

#c256-call-root[data-call-surface="incoming"]{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  overflow:hidden!important;
  z-index:2147483647!important;
  isolation:isolate!important;
  pointer-events:auto!important;
  background:#03080d!important;
}

#c256-call-root[data-call-mode="incoming"] .c256-call-stage{
  display:none!important;
}

#c256-call-root[data-call-mode="incoming"] .c256-call-incoming{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  box-sizing:border-box!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  align-items:center!important;
  padding:
    max(30px,calc(env(safe-area-inset-top) + 22px))
    24px
    max(30px,calc(env(safe-area-inset-bottom) + 24px))!important;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(28,145,180,.13),
      rgba(2,8,13,.94) 46%,
      #010407 100%
    )!important;
  color:#fff!important;
  z-index:2147483647!important;
  pointer-events:auto!important;
}

#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-top{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  color:#8daab7!important;
  font-size:10px!important;
  letter-spacing:.12em!important;
}

#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-center{
  flex:1 1 auto!important;
  width:min(680px,94vw)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:13px!important;
  text-align:center!important;
}

#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-avatar{
  width:116px!important;
  height:116px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  font-size:42px!important;
  font-weight:750!important;
  color:#e8fbff!important;
  background:
    radial-gradient(circle at 35% 28%,rgba(100,235,255,.28),rgba(15,48,62,.9) 58%,rgba(4,15,21,.98))!important;
  border:1px solid rgba(110,225,245,.28)!important;
  box-shadow:
    0 0 0 10px rgba(40,200,230,.035),
    0 0 70px rgba(30,200,240,.12),
    0 24px 70px rgba(0,0,0,.5)!important;
}

#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-center strong{
  max-width:94vw!important;
  font-size:clamp(25px,4vw,34px)!important;
  line-height:1.08!important;
  letter-spacing:-.025em!important;
}

#c256-call-root[data-call-mode="incoming"] #c256-call-incoming-name{
  max-width:94vw!important;
  font-size:clamp(17px,2.6vw,22px)!important;
  line-height:1.25!important;
  color:#d8eaf0!important;
}

#c256-call-root[data-call-mode="incoming"] #c256-call-incoming-type{
  color:#8ca8b5!important;
  font-size:13px!important;
}

#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-center small{
  color:#607b88!important;
  font-size:10px!important;
}

#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-actions{
  width:min(420px,100%)!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:34px!important;
  pointer-events:auto!important;
}

#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-actions button{
  width:82px!important;
  height:82px!important;
  min-width:82px!important;
  min-height:82px!important;
  padding:0!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
  box-shadow:0 18px 50px rgba(0,0,0,.42)!important;
}

#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-actions
[data-c256-call-action="accept"]{
  background:linear-gradient(145deg,#36d9a1,#129b78)!important;
  border:1px solid rgba(150,255,225,.3)!important;
  color:#fff!important;
}

#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-actions
[data-c256-call-action="reject"]{
  background:linear-gradient(145deg,#e75d68,#ad2938)!important;
  border:1px solid rgba(255,180,185,.24)!important;
  color:#fff!important;
}

#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-actions button:hover{
  transform:translateY(-2px) scale(1.035);
  filter:brightness(1.08);
}

#c256-call-root[data-call-mode="incoming"] .c256-call-incoming-actions button:active{
  transform:scale(.95);
}

@media(max-width:600px){
  #c256-call-root[data-call-mode="incoming"]
  .c256-call-incoming-actions{
    gap:26px!important;
  }

  #c256-call-root[data-call-mode="incoming"]
  .c256-call-incoming-actions button{
    width:76px!important;
    height:76px!important;
    min-width:76px!important;
    min-height:76px!important;
  }
}

/* Never let common workspace drawers/popovers establish a higher
   stacking context than the call surface. */
body.c256-call-open :where(
  .workspace-panel,
  .workspace-drawer,
  .modal,
  .dialog,
  .popover,
  .dropdown,
  .context-menu
){
  z-index:auto;
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  :where(
    .menu,
    .dropdown-menu,
    .context-menu,
    .room-menu,
    .workspace-menu,
    .c256-menu
  ) :where(button,a,[role="menuitem"],.menu-item),
  #c256-call-root[data-call-mode="incoming"]
  .c256-call-incoming-actions button{
    transition:none!important;
  }
}

/* Chat256 Billing v2 — premium responsive surface */
.workspace-billing-module{position:relative;overflow:hidden}
.workspace-billing-module::before{content:"";position:absolute;inset:-25% 35% auto -10%;height:220px;background:radial-gradient(circle,rgba(88,223,255,.08),transparent 68%);pointer-events:none}
.workspace-billing-module .workspace-packages-head{position:relative;z-index:1}
.workspace-billing-actions{align-items:center}
.workspace-billing-actions .c256-billing-interval{padding:6px 8px;border:1px solid var(--c-border);border-radius:11px;background:var(--c-surface-2)}
.workspace-billing-actions select{border:0;background:transparent;color:inherit;outline:0;padding:2px 18px 2px 4px}
.workspace-billing-actions button{min-height:38px}
.c256-plan-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.c256-plan-card:hover{transform:translateY(-2px)}
.c256-plan-card[data-current="true"]::after{content:"ACTIVE";position:absolute;top:12px;right:12px;font-size:8px;font-weight:850;letter-spacing:.12em;color:#79ddb7}
.c256-plan-features li{min-height:14px}
.workspace-billing-state{min-height:18px}
.c256-payment-note{line-height:1.55}
@media(max-width:760px){.workspace-billing-actions{width:100%;justify-content:stretch}.workspace-billing-actions .c256-billing-interval,.workspace-billing-actions button{flex:1}.workspace-billing-actions select{width:100%}}

/* Chat256 Admin v4 — responsive control plane */
.admin-native-root{max-width:1500px;margin:0 auto}
.admin-native-card{border-radius:22px;padding:22px;background:linear-gradient(145deg,rgba(14,29,43,.96),rgba(5,13,21,.98));box-shadow:0 24px 80px rgba(0,0,0,.25)}
.admin-native-head{padding-bottom:4px}
.admin-native-eyebrow{letter-spacing:.18em;font-size:9px;color:var(--c-accent);font-weight:850}
.admin-native-head h3{font-size:25px;letter-spacing:-.03em}
.admin-native-tabs{position:sticky;top:0;z-index:5;padding:5px;border:1px solid var(--c-border);border-radius:13px;background:rgba(5,13,21,.9);backdrop-filter:blur(16px)}
.admin-native-tabs button{font-weight:650}
.admin-native-tabs button.is-active{box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.admin-native-stats>div{min-height:70px;display:flex;flex-direction:column;justify-content:center}
.admin-native-stats strong{font-size:23px;letter-spacing:-.03em}
.admin-native-subcard,.admin-native-provider,.admin-native-plan,.admin-native-account{box-shadow:0 8px 24px rgba(0,0,0,.08)}
.admin-native-plan{background:linear-gradient(145deg,rgba(18,36,52,.8),rgba(9,20,31,.8))}
.admin-native-plan-head strong{font-size:15px}
.admin-native-fields input,.admin-native-provider-grid input,.admin-native-subcard input,.admin-native-subcard textarea,.admin-native-login input{min-height:40px;border-radius:10px}
.admin-native-actions .primary,.admin-native-actions .secondary{min-height:38px}
.admin-native-table-wrap{background:rgba(0,0,0,.08)}
.admin-native-table th{white-space:nowrap}
@media(max-width:900px){.admin-native-stats{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-native-grid-2{grid-template-columns:1fr}.admin-native-fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.admin-native-card{padding:14px;border-radius:17px}.admin-native-head{display:grid}.admin-native-tabs{overflow-x:auto}.admin-native-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-native-fields{grid-template-columns:1fr}.admin-native-secret-row{grid-template-columns:1fr}.admin-native-secret-row button{width:100%}.admin-native-plan-head,.admin-native-account-top{display:grid}.admin-native-actions{display:grid;grid-template-columns:1fr}.admin-native-actions button{width:100%}}


/* Chat256 Premium Surface Layer — additive polish, no protocol dependency. */
:root{
  --c256-glass:rgba(9,18,29,.78);
  --c256-glass-strong:rgba(8,16,27,.94);
  --c256-shadow:0 24px 70px rgba(0,0,0,.28);
  --c256-focus:rgba(34,211,255,.34);
}
.primary,.secondary,.icon-btn,.workspace-tab,.sidebar-nav-item{
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.primary:hover,.secondary:hover,.icon-btn:hover{transform:translateY(-1px);}
.primary:focus-visible,.secondary:focus-visible,.icon-btn:focus-visible,.workspace-tab:focus-visible,.sidebar-nav-item:focus-visible,textarea:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--c256-focus);outline-offset:2px;
}
.workspace-panel{
  background:radial-gradient(900px 500px at 72% -8%,rgba(34,211,255,.09),transparent 68%),radial-gradient(700px 500px at 5% 100%,rgba(96,165,250,.045),transparent 70%),linear-gradient(180deg,#07111c,#050a12);
}
.workspace-storage-card,.workspace-file-card,.workspace-product-card,.forum-card,.c256-call-root,.c256-plan-card{
  box-shadow:var(--c256-shadow);
  backdrop-filter:blur(16px);
}
.chat256-menu-item{min-height:44px;}
@media (prefers-reduced-motion:reduce){.primary,.secondary,.icon-btn,.workspace-tab,.sidebar-nav-item{transition:none!important}.primary:hover,.secondary:hover,.icon-btn:hover{transform:none!important}}
:root[data-c256-theme="light"]{--c256-glass:rgba(255,255,255,.84);--c256-glass-strong:rgba(255,255,255,.96);--c256-shadow:0 18px 55px rgba(18,38,54,.10);--c256-focus:rgba(14,139,190,.32);}

.c256-security-centre{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px}.c256-security-centre.hide{display:none!important}.c256-security-backdrop{position:absolute;inset:0;background:rgba(1,7,13,.72);backdrop-filter:blur(12px)}.c256-security-card{position:relative;width:min(560px,100%);padding:26px;border:1px solid rgba(90,180,220,.18);border-radius:24px;background:linear-gradient(180deg,rgba(10,22,35,.98),rgba(6,13,22,.98));box-shadow:0 40px 120px rgba(0,0,0,.52)}.c256-security-card h2{margin:5px 0 7px;color:#f0f8fb;font-size:26px;letter-spacing:-.04em}.c256-security-lead{margin:0 0 18px;color:#71899a;font-size:12px;line-height:1.65}.c256-security-close{position:absolute;top:16px;right:16px}.c256-security-checks{display:grid;gap:8px}.c256-security-check{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid rgba(90,180,220,.09);border-radius:13px;background:rgba(255,255,255,.018)}.c256-security-check>span{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;font-size:12px;font-weight:900}.c256-security-check .is-ok{color:#6fe4aa;background:rgba(80,220,150,.08)}.c256-security-check .is-warn{color:#ffc078;background:rgba(255,170,80,.08)}.c256-security-check strong,.c256-security-check small{display:block}.c256-security-check strong{color:#dceaf0;font-size:11px}.c256-security-check small{margin-top:2px;color:#587082;font-size:9px}.c256-security-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(90,180,220,.08);color:#60798a;font-size:10px}.c256-call-debug-actions{display:flex;gap:6px;margin:8px 0}.c256-call-debug-actions .sm{min-height:30px}.c256-call-debug pre{max-height:220px;overflow:auto}.sidebar-security{cursor:pointer}.sidebar-security:focus-visible{outline:2px solid var(--c256-focus);outline-offset:2px}
@media (max-width:600px){.c256-security-card{padding:21px;border-radius:20px}.c256-security-foot{align-items:flex-start;flex-direction:column}}

.c256-diagnostics-main{max-width:900px;margin:40px auto;padding:24px}
.c256-diagnostics-output{white-space:pre-wrap;margin-top:20px}

/* Chat256 protected account credentials gate. The gate is presentation-only;
 * credential cryptography and authorization remain server-side. */
.c256-credentials-gate{position:fixed;inset:0;z-index:15000;display:grid;place-items:center;padding:20px}
.c256-credentials-gate .c256-credentials-backdrop{position:absolute;inset:0;background:rgba(1,7,13,.78);backdrop-filter:blur(15px)}
.c256-credentials-card{position:relative;width:min(560px,100%);padding:30px;border:1px solid rgba(90,180,220,.18);border-radius:26px;background:linear-gradient(180deg,rgba(10,22,35,.99),rgba(6,13,22,.99));box-shadow:0 40px 140px rgba(0,0,0,.56)}
.c256-credentials-eyebrow{font-size:9px;letter-spacing:.2em;font-weight:850;color:var(--c-accent);margin-bottom:7px}
.c256-credentials-card h2{margin:0 45px 8px 0;font-size:27px;line-height:1.08;letter-spacing:-.045em;color:#eef8fb}
.c256-credentials-lead,.c256-credentials-note{color:#71899a;font-size:11px;line-height:1.65}
.c256-credentials-fields{display:grid;gap:11px;margin:20px 0 9px}
.c256-credentials-field{display:grid;gap:6px;color:#9ab0bd;font-size:10px;font-weight:700}
.c256-credentials-field input{width:100%;box-sizing:border-box;min-height:45px;border:1px solid rgba(100,180,220,.14);border-radius:12px;background:rgba(255,255,255,.035);color:#eff9fc;padding:0 13px;outline:0}
.c256-credentials-field input:focus{border-color:rgba(34,211,255,.46);box-shadow:0 0 0 3px rgba(34,211,255,.08)}
.c256-credentials-hint{display:block;color:#536d7d;font-size:9px;line-height:1.5}
.c256-credentials-status{min-height:20px;margin:10px 0;color:#78dcae;font-size:10px;line-height:1.5}
.c256-credentials-status[data-state="error"]{color:#ff9f9f}
.c256-credentials-actions{display:flex;justify-content:flex-end;margin:4px 0 13px}
.c256-credentials-submit{min-height:43px}
.c256-credentials-note{margin:0;padding-top:13px;border-top:1px solid rgba(90,180,220,.08);font-size:9px}
@media(max-width:600px){.c256-credentials-gate{padding:12px}.c256-credentials-card{padding:22px;border-radius:21px}.c256-credentials-card h2{font-size:24px}.c256-credentials-actions .primary{width:100%}}
.c256-password-change{margin-top:16px;padding-top:16px;border-top:1px solid rgba(90,180,220,.08)}
.c256-password-change h3{margin:0 0 5px;color:#dceaf0;font-size:15px}
.c256-password-change-lead{margin:0;color:#60798a;font-size:9px;line-height:1.55}
.c256-password-change-status{min-height:18px;margin:8px 0;color:#78dcae;font-size:9px}
.c256-password-change-status[data-state="error"]{color:#ff9f9f}

/* Optional Account Centre */
.sidebar-account{display:flex;align-items:center;gap:10px;margin:0 4px 8px;padding:11px;border:1px solid rgba(113,171,255,.12);border-radius:13px;background:rgba(113,171,255,.025);cursor:pointer}
.sidebar-account:focus-visible{outline:2px solid var(--c256-focus);outline-offset:2px}
.sidebar-account-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:rgba(113,171,255,.07);color:#83b8ff;font-size:16px}
.sidebar-account strong{display:block;color:#c7d7e0;font-size:11px;font-weight:800}
.sidebar-account small{display:block;margin-top:2px;color:#587082;font-size:9px}
.c256-account-centre{position:fixed;inset:0;z-index:12100;display:grid;place-items:center;padding:20px}.c256-account-centre.hide{display:none!important}.c256-account-backdrop{position:absolute;inset:0;background:rgba(1,7,13,.76);backdrop-filter:blur(14px)}.c256-account-dialog{position:relative;width:min(760px,100%);max-height:min(88vh,900px);overflow:auto;padding:28px;border:1px solid rgba(113,171,255,.18);border-radius:26px;background:linear-gradient(180deg,rgba(10,22,35,.99),rgba(6,13,22,.99));box-shadow:0 40px 140px rgba(0,0,0,.58)}.c256-account-close{position:absolute;top:16px;right:16px}.c256-account-head{padding-right:38px}.c256-account-title{margin:5px 0 7px;color:#f0f8fb;font-size:30px;letter-spacing:-.045em}.c256-account-lead{margin:0;color:#71899a;font-size:12px;line-height:1.7}.c256-account-grid{display:grid;gap:12px;margin-top:22px}.c256-account-card{padding:17px;border:1px solid rgba(90,180,220,.10);border-radius:17px;background:rgba(255,255,255,.018)}.c256-account-card-title{color:#e4f0f5;font-size:13px;font-weight:850}.c256-account-card-lead{margin:6px 0 13px;color:#6f8798;font-size:11px;line-height:1.65}.c256-account-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.c256-account-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}.c256-account-field{display:grid;gap:5px}.c256-account-field span{color:#78909f;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.c256-account-field input{width:100%;box-sizing:border-box}.c256-account-status{grid-column:1/-1;margin:0;color:#6f8798;font-size:10px;line-height:1.55}.c256-account-status[data-state=error]{color:#ff9d9d}.c256-account-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0}.c256-account-stat{padding:10px;border-radius:11px;background:rgba(255,255,255,.025);color:#9bb0bc;font-size:10px}.c256-account-badge{display:inline-flex;width:max-content;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.04);color:#708695;font-size:9px}.c256-account-recovery-code{display:grid;gap:7px;margin-top:13px;padding:12px;border:1px solid rgba(255,190,90,.15);border-radius:12px;background:rgba(255,190,90,.035)}.c256-account-recovery-code strong{color:#ffd38b;font-size:9px;letter-spacing:.08em}.c256-account-recovery-code code{display:block;overflow:auto;padding:9px;border-radius:8px;background:rgba(0,0,0,.25);color:#f3f8fb;font-size:11px;user-select:all}.c256-account-recovery-code small{color:#8d9eaa;font-size:9px;line-height:1.55}@media(max-width:600px){.c256-account-dialog{padding:21px}.c256-account-title{font-size:25px}.c256-account-fields,.c256-account-stats{grid-template-columns:1fr}.c256-account-actions button{width:100%}}

.c256-account-service-list{display:grid;gap:7px;margin-top:10px}.c256-account-service{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid rgba(90,180,220,.07);border-radius:11px;background:rgba(255,255,255,.014)}.c256-account-service-copy{display:grid;gap:2px}.c256-account-service-copy strong{color:#dceaf0;font-size:10px}.c256-account-service-copy small{color:#647d8c;font-size:9px}

/*
 * CHAT256_FEATURE_DISABLED_FORUM_MARKETPLACE
 *
 * Retained for future reactivation, but intentionally absent from
 * the current production product surface.
 */
.c256-feature-disabled {
    display:none !important;
}

.workspace-view[data-c256-workspace-view="forum"],
.workspace-view[data-c256-workspace-view="marketplace"] {
    display:none !important;
}

#c256-forum-modal {
    display:none !important;
}