/*
 * CHAT256 — CANONICAL PRODUCTION CSS
 * Single stylesheet for Chat, Share, Calls and Private Chat.
 *
 * IMPORTANT:
 * WebRTC JavaScript is deliberately untouched.
 */

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


/* ================================================================
   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}

}
@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}
}

/* 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,.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 FINAL MOBILE LAUNCHER POLISH — 20260923-FINAL2
   Fixes the earlier desktop-first launcher constraints without
   touching room, identity, calls, crypto or transport code.
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden!important}
#modal{width:100%;max-width:100%;overflow-x:hidden!important}
#modal .landing-shell{width:100%;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
#modal .landing-main{display:block!important;width:100%!important;max-width:760px!important;min-height:0!important;margin:0 auto!important;padding:26px 0 42px!important}
#modal .landing-hero{width:100%!important;max-width:760px!important;margin:0 auto!important;text-align:center}
#modal .landing-hero h1{width:100%!important;max-width:100%!important;margin:0 auto 16px!important;font-size:clamp(42px,5.2vw,72px)!important;line-height:.9!important;letter-spacing:-.065em!important;overflow-wrap:normal!important;word-break:normal!important;text-wrap:balance!important}
#modal .landing-hero .landing-lead{max-width:620px!important;margin:0 auto!important;font-size:14px!important;line-height:1.55!important}
#modal .landing-actions{width:100%!important;max-width:620px!important;margin:20px auto 0!important;display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr)!important;gap:9px!important}
#modal .landing-actions button{width:100%!important;min-width:0!important;min-height:52px!important;margin:0!important}
#modal .c256-quick-actions{width:100%!important;max-width:620px!important;margin:18px auto 0!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
#modal .c256-quick-card{width:100%!important;min-width:0!important;min-height:104px!important;margin:0!important;padding:16px!important;box-sizing:border-box!important;align-items:center!important}
#modal .c256-quick-card>span:last-child{min-width:0!important}
#modal .c256-quick-card strong{font-size:14px!important;line-height:1.25!important}
#modal .c256-quick-card small{font-size:10px!important;line-height:1.45!important}
#modal .c256-quick-icon{width:40px!important;height:40px!important;min-width:40px!important;border-radius:12px!important;display:grid!important;place-items:center!important}
#modal .c256-quick-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#modal .landing-trust-row{max-width:620px!important;margin:16px auto 0!important;font-size:8px!important;line-height:1.4!important}
#modal .landing-services-link{display:block;max-width:620px;margin:12px auto 0;text-align:center;overflow-wrap:anywhere}
#modal .landing-join{width:100%!important;max-width:620px!important;margin:12px auto 0!important;box-sizing:border-box!important}
@media(max-width:700px){
  #modal .landing-shell{padding:14px 16px 28px!important}
  #modal .landing-main{padding:24px 0 36px!important}
  #modal .landing-hero h1{font-size:clamp(39px,11.8vw,54px)!important;line-height:.92!important;letter-spacing:-.055em!important;margin-bottom:15px!important}
  #modal .landing-hero .landing-lead{font-size:12px!important;line-height:1.55!important;max-width:360px!important}
  #modal .landing-actions{grid-template-columns:1fr!important;max-width:560px!important;margin-top:18px!important}
  #modal .landing-actions button{min-height:54px!important}
  #modal .c256-quick-actions{grid-template-columns:1fr!important;max-width:560px!important;margin-top:12px!important}
  #modal .c256-quick-card{min-height:94px!important;padding:15px!important;border-radius:18px!important}
  #modal .landing-trust-row{display:none!important}
}
@media(max-width:390px){
  #modal .landing-shell{padding-left:12px!important;padding-right:12px!important}
  #modal .landing-main{padding-top:20px!important}
  #modal .landing-hero h1{font-size:42px!important}
  #modal .landing-hero .landing-lead{font-size:11.5px!important}
  #modal .c256-quick-card{min-height:88px!important}
}
@media(prefers-reduced-motion:reduce){#modal .c256-quick-card{transition:none!important}}

/* Chat256 standalone encrypted group-call surface */

/* Chat256 standalone group-call surface */
.c256-group-call{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;background:rgba(3,7,14,.78);backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%)}
.c256-group-call[hidden]{display:none}
.c256-group-card{width:min(1080px,100%);max-height:min(92vh,900px);overflow:auto;border:1px solid rgba(122,218,255,.22);border-radius:30px;background:linear-gradient(145deg,rgba(18,27,42,.94),rgba(5,10,19,.96));box-shadow:0 35px 120px rgba(0,0,0,.62),0 0 80px rgba(31,188,255,.10);color:#eaf7ff;padding:22px}
.c256-group-card header,.c256-group-card footer{display:flex;align-items:center;justify-content:space-between;gap:18px}.c256-group-card header span{font-size:10px;letter-spacing:.22em;font-weight:900;color:#63d8ff}.c256-group-card h2{margin:4px 0;font-size:clamp(24px,4vw,42px);letter-spacing:-.04em}.c256-group-card header p{margin:0;color:#91a8ba;font-size:13px}.c256-group-close{width:42px;height:42px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(255,255,255,.05);color:#fff;font-size:24px}
.c256-group-wait{text-align:center;padding:18px 0}.c256-group-orb{width:82px;height:82px;margin:4px auto 18px;display:grid;place-items:center;border-radius:28px;background:radial-gradient(circle at 35% 30%,#67e7ff,rgba(56,104,255,.35) 42%,rgba(255,255,255,.04) 70%);box-shadow:0 0 55px rgba(50,203,255,.22);font-size:38px}.c256-group-wait h3{margin:0;font-size:20px}.c256-group-wait p{color:#8da5b6}.c256-group-share{display:grid;grid-template-columns:210px 1fr;gap:24px;align-items:center;margin:24px auto;padding:20px;max-width:820px;text-align:left;border:1px solid rgba(255,255,255,.08);border-radius:24px;background:rgba(255,255,255,.035)}.c256-group-qr{width:190px;height:190px;padding:10px;background:#fff;border-radius:18px}.c256-group-qr img{width:100%;height:100%;display:block;image-rendering:pixelated}.c256-group-share strong{font-size:18px}.c256-group-share p{font-size:12px;line-height:1.6}.c256-group-share code{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:11px;border-radius:12px;background:rgba(0,0,0,.35);color:#aeeeff;font-size:11px}.c256-group-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.c256-group-actions button{min-height:44px;padding:0 17px;border-radius:14px}.c256-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.c256-group-tile{position:relative;min-height:220px;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:#070c15}.c256-group-tile video{width:100%;height:100%;min-height:220px;object-fit:cover;background:#05080e}.c256-group-tile audio{position:absolute;opacity:0}.c256-group-placeholder{position:absolute;inset:0;display:grid;place-items:center;font-size:48px;font-weight:900;color:#9eeeff;background:radial-gradient(circle,rgba(40,185,255,.16),transparent 55%)}.c256-group-tile .c256-group-name{position:absolute;left:12px;bottom:10px;padding:6px 9px;border-radius:10px;background:rgba(0,0,0,.52);font-size:11px;font-weight:800}.c256-group-tile.waiting video{display:none}.c256-group-card footer{padding-top:12px;border-top:1px solid rgba(255,255,255,.07);color:#86a0b2;font-size:11px}.c256-group-card footer>div{display:flex;gap:8px}.c256-group-card footer button{min-height:42px;border-radius:13px}
@media(max-width:700px){.c256-group-call{padding:0}.c256-group-card{height:100%;max-height:none;border-radius:0;padding:15px}.c256-group-share{grid-template-columns:1fr;text-align:center}.c256-group-qr{margin:auto;width:min(190px,60vw);height:auto;aspect-ratio:1}.c256-group-grid{grid-template-columns:1fr 1fr}.c256-group-tile,.c256-group-tile video{min-height:150px}.c256-group-card footer{display:block}.c256-group-card footer>div{margin-top:10px}.c256-group-card footer button{flex:1}}
@media(prefers-reduced-motion:no-preference){.c256-group-orb{animation:c256GroupPulse 2.6s ease-in-out infinite}@keyframes c256GroupPulse{50%{transform:translateY(-3px) scale(1.025);filter:brightness(1.08)}}}


/* CHAT256 GLASS SYSTEM — account/settings surfaces */
#c256-account-centre,
#c256-settings-panel{
  -webkit-backdrop-filter:blur(28px) saturate(145%);
  backdrop-filter:blur(28px) saturate(145%);
}
#c256-account-centre .c256-account-backdrop{
  background:
    radial-gradient(circle at 20% 10%,rgba(90,215,255,.12),transparent 36%),
    radial-gradient(circle at 85% 90%,rgba(115,90,255,.10),transparent 40%),
    rgba(1,7,13,.68);
  -webkit-backdrop-filter:blur(26px) saturate(145%);
  backdrop-filter:blur(26px) saturate(145%);
}
#c256-account-centre .c256-account-dialog{
  border-color:rgba(255,255,255,.13);
  background:
    linear-gradient(145deg,rgba(18,30,47,.82),rgba(5,12,21,.91));
  -webkit-backdrop-filter:blur(34px) saturate(150%);
  backdrop-filter:blur(34px) saturate(150%);
  box-shadow:
    0 40px 140px rgba(0,0,0,.62),
    inset 0 1px rgba(255,255,255,.10);
}
#c256-account-centre .c256-account-card{
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.038);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
}
@media(max-width:600px){
  #c256-account-centre{
    padding:0;
    align-items:stretch;
  }
  #c256-account-centre .c256-account-dialog{
    width:100%;
    max-height:none;
    height:100dvh;
    border-radius:0;
    padding:
      max(22px,env(safe-area-inset-top))
      16px
      max(18px,env(safe-area-inset-bottom));
    box-sizing:border-box;
  }
}

/* CHAT256 FRONTEND STABILITY LAYER BEGIN */

/*
 * Room shell:
 * The application is a single-page room. Workspace content may scroll,
 * but it must not redefine the document's room/navigation geometry.
 */
html,
body {
  min-height: 100%;
  min-width: 0;
}

body {
  overflow-x: hidden;
}

#app {
  min-height: 100dvh;
  min-width: 0;
}

/*
 * Workspace:
 * Keep scrolling inside the workspace rather than allowing its contents
 * to push the room shell around.
 */
#c256-workspace-panel {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#c256-workspace-panel .c256-workspace,
#c256-workspace-panel .workspace,
#c256-workspace-panel .workspace-content,
#c256-workspace-panel .workspace-main {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * Prevent wide file/media content from creating horizontal page overflow.
 */
#c256-workspace-panel img,
#c256-workspace-panel video,
#c256-workspace-panel canvas,
#c256-workspace-panel iframe {
  max-width: 100%;
}

/*
 * Share is a modal, never normal document content.
 * !important is intentional here: this layer must win over legacy
 * presentation rules which previously allowed the panel into page flow.
 */
#share-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: clamp(16px, 4vw, 32px) !important;
  box-sizing: border-box !important;
  z-index: 2147483000 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;

  background: rgb(2 7 14 / 76%) !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%) !important;
}

#share-panel.hide,
#share-panel[hidden],
#share-panel[aria-hidden="true"] {
  display: none !important;
}

#share-panel > section {
  position: relative !important;
  width: min(100%, 560px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow: auto !important;
  box-sizing: border-box !important;
  margin: auto !important;
  flex: 0 1 auto !important;
  overscroll-behavior: contain !important;
}

/*
 * Backdrop is part of the modal, not the page.
 */
#share-panel .share-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

#share-panel > section {
  z-index: 1 !important;
}

/*
 * While Share is open, the underlying room remains exactly where it is
 * and cannot acquire page-level scroll.
 */
body.share-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/*
 * Don't let a hidden landing surface retain interaction.
 */
#modal.hide,
#modal[hidden],
#modal[aria-hidden="true"] {
  pointer-events: none;
}

#modal:not(.hide):not([hidden])[aria-hidden="false"] {
  pointer-events: auto;
}

/*
 * Mobile:
 * Keep the QR/share card usable without making the whole room move.
 */
@media (max-width: 700px) {
  #share-panel {
    align-items: flex-start !important;
    padding: 12px !important;
  }

  #share-panel > section {
    width: 100% !important;
    max-height: calc(100dvh - 24px) !important;
  }
}

/* CHAT256 FRONTEND STABILITY LAYER END */

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

.landing-services-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:#78d7ff;font-size:10px;font-weight:800;letter-spacing:.02em;text-decoration:none;opacity:.78;transition:opacity .2s,transform .2s}.landing-services-link:hover{opacity:1;transform:translateX(2px)}
.c256-account-centre .c256-account-dialog{background:radial-gradient(circle at 90% 0,rgba(121,215,255,.08),transparent 32%),linear-gradient(180deg,rgba(10,22,35,.99),rgba(6,13,22,.99))}.c256-account-centre .c256-account-card{transition:transform .2s,border-color .2s,background .2s}.c256-account-centre .c256-account-card:hover{transform:translateY(-2px);border-color:rgba(121,215,255,.2);background:rgba(121,215,255,.025)}.c256-account-centre .c256-account-stat{border:1px solid rgba(121,215,255,.05)}.c256-account-centre .c256-account-service{transition:transform .18s,border-color .18s}.c256-account-centre .c256-account-service:hover{transform:translateX(3px);border-color:rgba(121,215,255,.18)}

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

/* Chat256 Premium UI — additive visual layer. No transport/crypto selectors. */
:root{
 --p-bg:#040711;--p-panel:rgba(10,16,29,.72);--p-panel2:rgba(16,24,42,.78);--p-line:rgba(255,255,255,.10);--p-line2:rgba(117,224,255,.24);--p-text:#f6fbff;--p-muted:#9eafc4;--p-cyan:#67e8ff;--p-blue:#6f8cff;--p-violet:#b36cff;--p-green:#53e5ad;--p-shadow:0 30px 100px rgba(0,0,0,.48)
}
html{background:var(--p-bg)}
body{background:radial-gradient(900px 520px at 15% -10%,rgba(103,232,255,.12),transparent 62%),radial-gradient(900px 620px at 95% 15%,rgba(139,92,246,.10),transparent 62%),radial-gradient(800px 600px at 50% 115%,rgba(52,211,153,.055),transparent 68%),#040711}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.018),transparent 35%,rgba(255,255,255,.012) 70%,transparent);mix-blend-mode:screen;z-index:0}
.app,.modal,.boot,.c256-group-call,.share-panel{position:relative;z-index:1}
.card,.panel,.sheet,.landing-shell,.sidebar,.bar,.workspace-panel,.c256-private-panel{backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%)}
.sidebar{background:linear-gradient(180deg,rgba(9,15,27,.92),rgba(5,10,20,.88));border-right:1px solid rgba(255,255,255,.08);box-shadow:20px 0 80px rgba(0,0,0,.20)}
.sidebar-brand,.mobile-brand{filter:drop-shadow(0 12px 30px rgba(103,232,255,.08))}
.brand-wordmark b{background:linear-gradient(135deg,#67e8ff,#8b9cff 55%,#c27aff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sidebar-nav-item{border:1px solid transparent;transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.sidebar-nav-item:hover{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.07);transform:translateX(2px)}
.sidebar-nav-item.is-active{background:linear-gradient(135deg,rgba(103,232,255,.11),rgba(139,92,246,.09));border-color:rgba(103,232,255,.17);box-shadow:inset 0 0 30px rgba(103,232,255,.035),0 10px 30px rgba(0,0,0,.12)}
.sidebar-nav-random{position:relative}.sidebar-nav-new{margin-left:auto;padding:3px 6px;border-radius:999px;background:linear-gradient(135deg,#67e8ff,#9c7cff);color:#031018;font-size:8px;font-weight:950;letter-spacing:.08em}
.bar{background:rgba(4,9,18,.72)!important;border-bottom-color:rgba(255,255,255,.08)!important}
.primary{background:linear-gradient(135deg,#67e8ff 0%,#7c9cff 52%,#b36cff 100%);box-shadow:0 12px 36px rgba(103,232,255,.14),inset 0 1px rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.16);text-shadow:0 1px rgba(255,255,255,.25)}
.primary:hover{filter:saturate(1.12) brightness(1.06);box-shadow:0 16px 44px rgba(103,232,255,.22),0 0 0 1px rgba(179,108,255,.10)}
.secondary{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-color:rgba(255,255,255,.11);box-shadow:inset 0 1px rgba(255,255,255,.06)}
.icon-btn{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px rgba(255,255,255,.05)}
.icon-btn:hover{background:rgba(103,232,255,.08);border-color:rgba(103,232,255,.22);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.chat-main{background:radial-gradient(600px 300px at 65% 0%,rgba(103,232,255,.035),transparent 70%)}
.landing-shell{background:linear-gradient(145deg,rgba(7,13,24,.94),rgba(5,9,18,.90));border:1px solid rgba(255,255,255,.08);box-shadow:var(--p-shadow)}
.landing-hero h1{letter-spacing:-.055em;text-shadow:0 12px 60px rgba(103,232,255,.10)}
.landing-hero h1 em{background:linear-gradient(100deg,#67e8ff,#8b9cff 48%,#bd75ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.landing-eyebrow,.landing-security{color:#83eaff!important}
.landing-actions .landing-primary{min-height:56px;border-radius:18px;font-size:15px}
.c256-quick-actions{gap:12px}
.c256-quick-card{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.09);box-shadow:0 16px 50px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.055);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.c256-quick-card:hover{transform:translateY(-3px);border-color:rgba(103,232,255,.25);box-shadow:0 22px 60px rgba(0,0,0,.24),0 0 40px rgba(103,232,255,.045)}
.c256-quick-icon{background:linear-gradient(145deg,rgba(103,232,255,.18),rgba(179,108,255,.14));border-color:rgba(103,232,255,.18);color:#baf5ff}
.landing-trust-row span{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.022)}
.landing-services-link{color:#8deaff}
.c256-group-card{background:linear-gradient(145deg,rgba(7,13,24,.94),rgba(6,10,20,.88));border-color:rgba(255,255,255,.10);box-shadow:0 40px 120px rgba(0,0,0,.60),0 0 80px rgba(103,232,255,.05)}
.c256-group-header,.c256-group-topbar{border-color:rgba(255,255,255,.08)}
.c256-group-lock{border-color:rgba(103,232,255,.20);background:rgba(103,232,255,.055);color:#a9f1ff}
.c256-group-tile{border-color:rgba(255,255,255,.10);box-shadow:0 18px 60px rgba(0,0,0,.28);background:linear-gradient(145deg,#0c1321,#060b15)}
.c256-group-tile:hover{border-color:rgba(103,232,255,.25);box-shadow:0 24px 70px rgba(0,0,0,.38),0 0 40px rgba(103,232,255,.05)}
.c256-group-tile.self{box-shadow:0 0 0 1px rgba(103,232,255,.15),0 24px 70px rgba(0,0,0,.38)}
.c256-group-controls button{border-radius:14px}
.random-shell{min-height:100dvh;max-width:1180px;margin:auto;padding:26px clamp(18px,4vw,48px)}
.random-nav{display:flex;align-items:center;justify-content:space-between;gap:16px}.random-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.random-brand img{width:34px;height:34px}.random-brand strong{font-size:20px;letter-spacing:-.04em}.random-brand strong span{color:#67e8ff}.random-secure,.random-badge{font-size:10px;font-weight:900;letter-spacing:.16em;color:#86eaff}.random-hero{max-width:820px;margin:clamp(70px,12vh,130px) auto 0;text-align:center}.random-hero h1{font-size:clamp(48px,8vw,88px);line-height:.94;letter-spacing:-.07em;margin:18px 0 24px}.random-hero h1 em{font-style:normal;background:linear-gradient(100deg,#67e8ff,#8e9cff,#bf78ff);-webkit-background-clip:text;background-clip:text;color:transparent}.random-hero>p{max-width:680px;margin:0 auto;color:var(--p-muted);font-size:17px;line-height:1.65}.random-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:34px 0}.random-actions button{width:auto;min-width:160px}.random-card,.random-chat{margin:18px auto;padding:18px;border:1px solid rgba(255,255,255,.10);border-radius:24px;background:linear-gradient(145deg,rgba(12,20,35,.80),rgba(7,12,22,.72));box-shadow:var(--p-shadow);text-align:left;backdrop-filter:blur(24px)}.random-card{display:flex;align-items:center;gap:14px}.random-card>div:nth-child(2){display:grid;gap:3px;flex:1}.random-card strong{font-size:15px}.random-card small{color:var(--p-muted)}.random-status-dot{width:11px;height:11px;border-radius:50%;background:#53e5ad;box-shadow:0 0 0 6px rgba(83,229,173,.08),0 0 24px rgba(83,229,173,.55)}.random-chat{padding:14px}.random-peer{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:800}.random-peer span:last-child{font-size:10px;color:#67e8ff;letter-spacing:.12em}.random-messages{height:330px;overflow:auto;padding:14px;display:grid;align-content:start;gap:8px}.random-msg{max-width:78%;padding:10px 13px;border-radius:15px 15px 15px 5px;background:rgba(255,255,255,.055);color:#edf7ff}.random-msg.mine{justify-self:end;border-radius:15px 15px 5px 15px;background:linear-gradient(135deg,rgba(103,232,255,.16),rgba(179,108,255,.16));border:1px solid rgba(103,232,255,.10)}.random-composer{display:grid;grid-template-columns:1fr auto;gap:8px}.random-composer input{min-height:48px;border:1px solid rgba(255,255,255,.10);border-radius:15px;background:rgba(255,255,255,.035);padding:0 14px;outline:none}.random-composer input:focus{border-color:rgba(103,232,255,.35);box-shadow:0 0 0 3px rgba(103,232,255,.07)}.random-composer .primary{width:auto}.random-chat>#random-video{width:100%;margin-top:10px}.random-foot{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px;color:#71859d;font-size:12px}.c256-light{--p-bg:#f4f8fc;--p-text:#102032}
@media(max-width:700px){.random-shell{padding:18px}.random-secure{display:none}.random-hero{margin-top:70px}.random-hero h1{font-size:48px}.random-actions{display:grid;grid-template-columns:1fr}.random-actions button{width:100%}.random-card{border-radius:18px}.random-foot{justify-content:flex-start}.random-messages{height:260px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.landing-value-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 10px}.landing-value-strip span{padding:10px 11px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(255,255,255,.018);font-size:11px;color:#a9b9ca;text-align:left}.landing-value-strip b{display:block;color:#67e8ff;font-size:9px;letter-spacing:.12em;margin-bottom:3px}@media(max-width:700px){.landing-value-strip{grid-template-columns:repeat(2,1fr)}}
/* Viral brand polish — visual only; protected transport modules remain untouched. */
.sidebar-brand .brand-mark,.mobile-brand .brand-mark{animation:c256WorkspaceLogo 4.5s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(31,220,255,.18))}
@keyframes c256WorkspaceLogo{0%,100%{filter:drop-shadow(0 0 13px rgba(31,220,255,.14))}50%{filter:drop-shadow(0 0 23px rgba(168,77,255,.25))}}
@media(prefers-reduced-motion:reduce){.sidebar-brand .brand-mark,.mobile-brand .brand-mark{animation:none}}

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


:root{color-scheme:dark;--bg:#050912;--surface:rgba(17,27,42,.78);--line:rgba(170,205,230,.14);--text:#eef7ff;--muted:#8ea4b7;--accent:#8ee7ff;--accent2:#c7a8ff}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 50% -10%,rgba(107,179,255,.14),transparent 40%),var(--bg);color:var(--text)}
body{min-height:100vh}
button{font:inherit}
.share-page{width:min(680px,calc(100% - 32px));min-height:100vh;margin:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px 0}
.share-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px;letter-spacing:.08em;font-size:15px}.share-brand img{width:30px;height:30px}.share-brand strong span{opacity:.7}
.share-surface{width:100%;padding:42px 34px;border:1px solid var(--line);border-radius:30px;background:var(--surface);backdrop-filter:blur(26px);box-shadow:0 30px 90px rgba(0,0,0,.38);text-align:center}
.share-icon{width:58px;height:58px;display:grid;place-items:center;margin:0 auto 20px;border-radius:18px;background:linear-gradient(145deg,rgba(142,231,255,.18),rgba(199,168,255,.14));border:1px solid rgba(142,231,255,.22);font-size:27px}
.share-kicker{font-size:10px;letter-spacing:.2em;color:var(--accent);font-weight:800}
.share-surface h1{margin:10px 0 8px;font-size:clamp(28px,6vw,44px);letter-spacing:-.04em}
.share-surface p{color:var(--muted);line-height:1.65}
.share-meta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px 0}.share-meta span{padding:8px 11px;border:1px solid var(--line);border-radius:999px;font-size:12px;color:#c9d7e3}
.share-button{width:100%;margin-top:18px;padding:15px 20px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--accent),#b6d9ff);color:#06111a;font-weight:850;cursor:pointer;box-shadow:0 12px 30px rgba(99,204,255,.16)}
.share-button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.share-progress{height:5px;margin-top:22px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.share-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .2s ease}
.share-status{min-height:24px;font-size:13px}.share-back{display:inline-block;margin-top:15px;color:#b8d9ec;text-decoration:none;font-size:13px}.share-back:hover{text-decoration:underline}
.share-foot{max-width:520px;margin:17px 0 0;text-align:center;color:#61768a;font-size:11px;line-height:1.6}
.c256-quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0 8px}
.c256-quick-card{display:flex;align-items:flex-start;gap:14px;text-align:left;padding:18px;border:1px solid rgba(180,214,235,.13);border-radius:20px;background:rgba(255,255,255,.045);color:inherit;cursor:pointer;transition:transform .2s ease,border-color .2s ease,background .2s ease}
.c256-quick-card:hover{transform:translateY(-2px);border-color:rgba(142,231,255,.3);background:rgba(255,255,255,.07)}
.c256-quick-icon{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;background:rgba(142,231,255,.1);color:var(--accent);font-size:18px}
.c256-quick-card strong{display:block;font-size:14px}.c256-quick-card small{display:block;margin-top:4px;color:var(--muted);line-height:1.45}
.landing-trust-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin:20px 0 4px;color:#71889a;font-size:10px;letter-spacing:.04em}.landing-trust-row span{padding-left:10px;border-left:1px solid rgba(255,255,255,.1)}
@media(max-width:640px){.share-page{width:min(100% - 20px,680px);padding:20px 0}.share-surface{padding:32px 22px;border-radius:24px}.c256-quick-actions{grid-template-columns:1fr}.landing-trust-row{display:none}}
@media(prefers-reduced-motion:reduce){.c256-quick-card,.share-progress span{transition:none}}

.share-result-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(2,7,13,.76);backdrop-filter:blur(18px)}
.share-result-card{position:relative;width:min(520px,100%);padding:30px;border:1px solid var(--line);border-radius:26px;background:rgba(14,24,38,.96);box-shadow:0 35px 100px rgba(0,0,0,.55);text-align:center}
.share-result-close{position:absolute;right:14px;top:12px;border:0;background:transparent;color:#a8bac8;font-size:27px;cursor:pointer}
.share-result-card h2{margin:9px 0}.share-result-card p{color:var(--muted);line-height:1.55;font-size:13px}
.share-result-qr{display:grid;place-items:center;margin:18px auto;width:190px;height:190px;padding:10px;background:#fff;border-radius:15px}.share-result-qr img{width:100%;height:100%;display:block}
.share-result-url{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:12px;border:1px solid var(--line);border-radius:12px;color:#a9d6e8;font-size:11px}
.share-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.share-result-actions button{min-height:44px;border-radius:12px}
.share-result-card small{display:block;margin-top:14px;color:#6e8292}


/* Final responsive result surface */
.share-result-overlay{overflow:auto!important;align-items:center!important}
.share-result-card{max-height:calc(100dvh - 32px);overflow:auto!important;padding:28px 24px!important}
.share-result-card p{max-width:430px;margin-left:auto;margin-right:auto}
.share-result-url{overflow-wrap:anywhere;white-space:normal!important;word-break:break-word!important;max-height:72px;overflow:auto}
@media(max-width:640px){
  .share-result-overlay{padding:12px!important;align-items:flex-end!important}
  .share-result-card{width:100%!important;max-width:560px!important;border-radius:24px 24px 16px 16px!important;padding:24px 18px 20px!important}
  .share-result-qr{width:min(180px,52vw)!important;height:min(180px,52vw)!important;margin:14px auto!important}
  .share-result-actions{grid-template-columns:1fr!important}
  .share-result-card h2{font-size:25px}
}

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


/* CHAT256 — standalone private call surface */
.c256-call-only #modal,
.c256-call-only #app,
.c256-call-only #boot{
  display:none!important;
}

.c256-group-call{
  position:fixed;
  inset:0;
  z-index:10050;
  display:grid;
  place-items:center;
  padding:20px;
  background:
    radial-gradient(circle at 50% -10%,rgba(72,210,255,.13),transparent 38%),
    rgba(2,6,13,.84);
  backdrop-filter:blur(30px) saturate(145%);
  -webkit-backdrop-filter:blur(30px) saturate(145%);
  color:#eef9ff;
}
.c256-group-call[hidden]{display:none!important}

.c256-group-card{
  width:min(1180px,100%);
  max-height:min(94vh,940px);
  overflow:auto;
  border:1px solid rgba(151,226,255,.18);
  border-radius:30px;
  background:
    linear-gradient(145deg,rgba(17,28,45,.97),rgba(4,9,17,.985));
  box-shadow:
    0 40px 140px rgba(0,0,0,.62),
    0 0 90px rgba(28,193,255,.08),
    inset 0 1px rgba(255,255,255,.06);
  padding:22px;
  scrollbar-width:thin;
}

.c256-group-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.c256-group-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.2em;
  color:#73ddff;
}
.c256-group-live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6eeaff;
  box-shadow:0 0 16px rgba(76,225,255,.9);
}
.c256-group-header h2{
  margin:6px 0 3px;
  font-size:clamp(25px,4vw,38px);
  line-height:1.05;
  letter-spacing:-.045em;
}
.c256-group-header p{
  margin:0;
  color:#91a8ba;
  font-size:13px;
}
.c256-group-close{
  width:42px;
  height:42px;
  flex:none;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:rgba(255,255,255,.045);
  color:#fff;
  font-size:23px;
  cursor:pointer;
}

.c256-group-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:18px 0 12px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:rgba(255,255,255,.028);
}
.c256-group-topbar>div{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.c256-group-topbar strong{
  font-size:13px;
  white-space:nowrap;
}
.c256-group-topbar #c256-group-status{
  color:#8fa8bb;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.c256-group-topbar #c256-group-status[data-state="connected"]{
  color:#8df5c1;
}
.c256-group-topbar #c256-group-status[data-state="error"]{
  color:#ff9b9b;
}
.c256-group-lock{
  flex:none;
  color:#76dfff;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
}

.c256-group-setup{
  text-align:center;
  padding:20px 0 8px;
}
.c256-group-setup[hidden],
.c256-group-grid[hidden]{
  display:none!important;
}
.c256-group-setup-icon{
  width:68px;
  height:68px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border:1px solid rgba(107,223,255,.18);
  border-radius:22px;
  background:
    radial-gradient(circle at 35% 25%,rgba(103,231,255,.28),rgba(64,104,255,.08) 52%,rgba(255,255,255,.025));
  box-shadow:0 0 50px rgba(53,204,255,.11);
  font-size:30px;
}
.c256-group-setup h3{
  margin:0;
  font-size:21px;
  letter-spacing:-.025em;
}
.c256-group-setup>p{
  max-width:620px;
  margin:8px auto 18px;
  color:#91a8ba;
  font-size:13px;
  line-height:1.55;
}

.c256-group-invite{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:20px;
  align-items:center;
  max-width:900px;
  margin:0 auto 16px;
  padding:18px;
  text-align:left;
  border:1px solid rgba(115,220,255,.11);
  border-radius:22px;
  background:rgba(255,255,255,.032);
}
.c256-group-qr-wrap{
  width:150px;
  aspect-ratio:1;
  padding:9px;
  margin:auto;
  border-radius:17px;
  background:#fff;
  box-shadow:0 14px 35px rgba(0,0,0,.28);
}
.c256-group-qr-wrap img{
  width:100%;
  height:100%;
  display:block;
  image-rendering:pixelated;
}
.c256-group-invite-body{
  min-width:0;
}
.c256-group-label{
  display:block;
  margin-bottom:6px;
  color:#73ddff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
}
.c256-group-invite-body strong{
  display:block;
  font-size:17px;
}
.c256-group-invite-body code{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin-top:10px;
  padding:10px 12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.07);
  border-radius:11px;
  background:rgba(0,0,0,.3);
  color:#b5efff;
  font-size:10px;
}
.c256-group-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.c256-group-actions button,
.c256-group-start,
.c256-group-controls button{
  min-height:44px;
  border-radius:13px;
  touch-action:manipulation;
  font-weight:800;
}
.c256-group-start{
  min-width:210px;
}

.c256-group-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:14px 0;
}
.c256-group-tile{
  position:relative;
  min-height:280px;
  overflow:hidden;
  border:1px solid rgba(132,222,255,.11);
  border-radius:22px;
  background:#050a12;
  box-shadow:
    0 18px 55px rgba(0,0,0,.3),
    inset 0 1px rgba(255,255,255,.045);
}
.c256-group-tile video{
  width:100%;
  height:100%;
  min-height:280px;
  display:block;
  object-fit:cover;
  background:#03070d;
}
.c256-group-tile.self video{
  transform:scaleX(-1);
}
.c256-group-tile audio{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.c256-group-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#a4edff;
  font-size:clamp(48px,7vw,82px);
  font-weight:900;
  background:
    radial-gradient(circle at 50% 42%,rgba(45,202,255,.17),transparent 29%),
    linear-gradient(145deg,#071321,#050a12);
}
.c256-group-placeholder[hidden]{display:none}
.c256-group-name{
  position:absolute;
  left:13px;
  bottom:13px;
  z-index:4;
  max-width:calc(100% - 90px);
  padding:7px 10px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(2,7,14,.7);
  backdrop-filter:blur(12px);
  color:#fff;
  font-size:11px;
  font-weight:800;
}
.c256-group-live{
  position:absolute;
  top:12px;
  right:12px;
  z-index:4;
  padding:5px 7px;
  border:1px solid rgba(116,233,255,.13);
  border-radius:8px;
  background:rgba(2,7,14,.58);
  color:#8beaff;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
}
.c256-group-tile.waiting .c256-group-live{
  color:#8fa6b8;
}
.c256-group-tile.connected{
  border-color:rgba(105,238,188,.2);
}

.c256-group-invite-mini{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  margin:12px 0;
  padding:9px;
  border:1px solid rgba(255,255,255,.07);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}
.c256-group-invite-mini>span{
  flex:none;
  color:#8da5b7;
  font-size:11px;
  font-weight:800;
}
.c256-group-invite-mini code{
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#9deaff;
  font-size:9px;
}
.c256-group-invite-mini button{
  flex:none;
  min-height:36px;
  padding:0 11px;
  border-radius:10px;
}

.c256-group-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.065);
}
.c256-group-security{
  color:#7891a3;
  font-size:10px;
}
.c256-group-controls{
  display:flex;
  gap:8px;
}
.c256-group-controls button{
  min-width:84px;
}
.c256-group-controls .danger{
  min-width:100px;
}

@media(max-width:760px){
  .c256-group-call{
    padding:0;
    align-items:stretch;
  }
  .c256-group-card{
    width:100%;
    max-height:none;
    height:100%;
    border-radius:0;
    padding:
      max(14px,env(safe-area-inset-top))
      13px
      max(12px,env(safe-area-inset-bottom));
  }
  .c256-group-header h2{
    font-size:25px;
  }
  .c256-group-topbar{
    margin-top:13px;
  }
  .c256-group-topbar>div{
    align-items:flex-start;
    flex-direction:column;
    gap:2px;
  }
  .c256-group-invite{
    grid-template-columns:1fr;
    text-align:center;
  }
  .c256-group-qr-wrap{
    width:min(150px,48vw);
  }
  .c256-group-actions{
    justify-content:center;
  }
  .c256-group-grid{
    grid-template-columns:1fr;
    gap:9px;
  }
  .c256-group-tile,
  .c256-group-tile video{
    min-height:230px;
  }
  .c256-group-invite-mini{
    flex-wrap:wrap;
  }
  .c256-group-invite-mini code{
    flex-basis:100%;
    order:-1;
  }
  .c256-group-footer{
    position:sticky;
    bottom:0;
    z-index:20;
    margin:0 -13px;
    padding:
      10px 13px
      max(8px,env(safe-area-inset-bottom));
    background:linear-gradient(
      to bottom,
      rgba(4,9,17,.25),
      rgba(4,9,17,.97) 30%
    );
    backdrop-filter:blur(18px);
  }
  .c256-group-security{
    display:none;
  }
  .c256-group-controls{
    width:100%;
  }
  .c256-group-controls button{
    flex:1;
    min-width:0;
    min-height:50px;
  }
}
@media(min-width:1100px){
  .c256-group-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .c256-group-tile,
  .c256-group-tile video{
    min-height:320px;
  }
}
@media(min-width:900px) and (max-width:1100px){
  .c256-group-tile,
  .c256-group-tile video{
    min-height:270px;
  }
}
@media(prefers-reduced-motion:no-preference){
  .c256-group-setup-icon{
    animation:c256CallFloat 3s ease-in-out infinite;
  }
  @keyframes c256CallFloat{
    50%{transform:translateY(-3px)}
  }
}
@media(prefers-reduced-motion:reduce){
  .c256-group-call *{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}


/* ============================================================
   CHAT256 CALL QR ROBUST FINAL
   ============================================================ */

.c256-group-qr-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.c256-group-qr-frame{
  width:188px;
  height:188px;
  padding:10px;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  background:#fff;
  border-radius:20px;
  box-shadow:
    0 18px 55px rgba(0,0,0,.34),
    0 0 36px rgba(80,210,255,.10);
}

.c256-group-qr-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated;
}

.c256-group-qr-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  align-content:center;
  gap:5px;
  color:#596b78;
  text-align:center;
}

.c256-group-qr-placeholder strong{
  font-size:32px;
  line-height:1;
  letter-spacing:.08em;
}

.c256-group-qr-placeholder span{
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.c256-group-qr-label{
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.18em;
  color:#718999;
}

.c256-group-qr-status{
  min-height:14px;
  max-width:220px;
  text-align:center;
  font-size:10px;
  line-height:1.4;
  color:#8196a4;
}

@media(max-width:700px){
  .c256-group-qr-frame{
    width:min(178px,55vw);
    height:auto;
    aspect-ratio:1;
  }
}


/* ============================================================
   CHAT256_CALL_INVITE_PERSISTENT_FINAL
   ============================================================ */

.c256-group-call.is-live .c256-group-setup{
  display:block!important;
  padding:10px 0 0;
}

.c256-group-call.is-live .c256-group-setup-icon,
.c256-group-call.is-live .c256-group-setup>h3,
.c256-group-call.is-live .c256-group-setup>p{
  display:none;
}

.c256-group-call.is-live .c256-group-invite{
  max-width:none;
  margin:0 0 12px;
  padding:12px;
  grid-template-columns:112px minmax(0,1fr);
  gap:14px;
  border-radius:18px;
}

.c256-group-call.is-live .c256-group-qr-wrap{
  width:96px;
  padding:7px;
  border-radius:14px;
}

.c256-group-call.is-live .c256-group-invite-body strong{
  font-size:14px;
}

.c256-group-call.is-live .c256-group-invite-body code{
  margin-top:7px;
  padding:8px 10px;
  font-size:9px;
}

.c256-group-call.is-live .c256-group-actions{
  margin-top:7px;
}

.c256-group-call.is-live .c256-group-actions button{
  min-height:38px;
}

/* ============================================================
   CHAT256 IPHONE GLASS CALL SURFACE
   ============================================================ */
.c256-group-call{
  isolation:isolate;
  background:
    radial-gradient(circle at 15% 10%,rgba(94,214,255,.14),transparent 34%),
    radial-gradient(circle at 88% 88%,rgba(119,93,255,.12),transparent 38%),
    rgba(2,6,13,.72);
  -webkit-backdrop-filter:blur(32px) saturate(150%);
  backdrop-filter:blur(32px) saturate(150%);
}
.c256-group-card{
  border-color:rgba(255,255,255,.12);
  background:
    linear-gradient(145deg,rgba(20,28,43,.78),rgba(4,9,17,.88));
  -webkit-backdrop-filter:blur(36px) saturate(145%);
  backdrop-filter:blur(36px) saturate(145%);
  box-shadow:
    0 34px 120px rgba(0,0,0,.58),
    inset 0 1px rgba(255,255,255,.10),
    inset 0 -1px rgba(255,255,255,.025);
}
.c256-group-topbar,
.c256-group-invite,
.c256-group-invite-mini,
.c256-group-footer{
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  backdrop-filter:blur(22px) saturate(140%);
}
.c256-group-tile{
  border-color:rgba(255,255,255,.12);
  box-shadow:
    0 20px 70px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.08);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.c256-group-tile:hover{
  transform:translateY(-1px);
  border-color:rgba(140,225,255,.22);
}
.c256-group-tile.is-theatre{
  position:fixed;
  inset:14px;
  z-index:2147483000;
  width:auto;
  height:auto;
  min-height:0;
  border-radius:28px;
  box-shadow:0 30px 120px rgba(0,0,0,.8);
}
.c256-group-tile.is-theatre video{
  min-height:0;
  height:100%;
  object-fit:contain;
  background:#000;
}
.c256-group-tile-actions{
  position:absolute;
  top:12px;
  left:12px;
  z-index:8;
  display:flex;
  gap:7px;
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .18s ease,transform .18s ease;
}
.c256-group-tile:hover .c256-group-tile-actions,
.c256-group-tile:focus-within .c256-group-tile-actions,
.c256-group-tile.is-theatre .c256-group-tile-actions{
  opacity:1;
  transform:none;
}
.c256-group-tile-btn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  background:rgba(8,14,24,.58);
  color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  cursor:pointer;
  touch-action:manipulation;
}
.c256-group-tile-btn:hover,
.c256-group-tile-btn:focus-visible{
  background:rgba(255,255,255,.12);
  border-color:rgba(145,228,255,.3);
  outline:none;
}
.c256-group-controls button[data-active="on"]{
  border-color:rgba(111,224,255,.28);
  background:rgba(76,192,255,.11);
}
@media(max-width:760px){
  .c256-group-tile-actions{
    opacity:1;
    transform:none;
    top:9px;
    left:9px;
  }
  .c256-group-tile-btn{
    width:42px;
    height:42px;
    border-radius:14px;
  }
  .c256-group-tile.is-theatre{
    inset:0;
    border-radius:0;
  }
  .c256-group-tile.is-theatre video{
    object-fit:contain;
  }
}
@media(prefers-reduced-motion:reduce){
  .c256-group-tile{transition:none}
  .c256-group-tile-actions{transition:none}
}

@media(max-width:700px){
  .c256-group-call.is-live .c256-group-invite{
    grid-template-columns:92px minmax(0,1fr);
    gap:10px;
    padding:9px;
  }

  .c256-group-call.is-live .c256-group-qr-wrap{
    width:78px;
    padding:6px;
  }

  .c256-group-call.is-live .c256-group-invite-body strong{
    font-size:13px;
  }
}

@media(max-width:760px){
  .c256-group-controls{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
  }
  .c256-group-controls .danger{
    grid-column:1 / -1;
  }
  .c256-group-controls button{
    width:100%;
    min-height:48px;
    padding-inline:8px;
    font-size:11px;
  }
}

/* ============================================================
   CHAT256 CALL SURFACE — STABLE FACE-TO-FACE GLASS UI
   Rendering is intentionally transform/opacity based. Participant
   tiles are persistent DOM nodes; media updates must not rebuild them.
   ============================================================ */
.c256-group-call{
  padding:0;
  background:
    radial-gradient(circle at 50% -12%,rgba(91,220,255,.16),transparent 36%),
    radial-gradient(circle at 8% 90%,rgba(99,80,255,.09),transparent 34%),
    rgba(1,4,10,.94);
}
.c256-group-card{
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  box-sizing:border-box;
  overflow:hidden;
  border:0;
  border-radius:0;
  padding:0;
  background:linear-gradient(180deg,rgba(7,13,23,.96),rgba(2,5,10,.98));
  box-shadow:none;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
}
.c256-group-header{
  padding:calc(14px + env(safe-area-inset-top)) 18px 10px;
  align-items:center;
  background:linear-gradient(180deg,rgba(6,11,20,.96),rgba(6,11,20,.72));
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
}
.c256-group-header h2{font-size:20px;margin:3px 0 2px;letter-spacing:-.035em}
.c256-group-header p{font-size:11px}
.c256-group-close{
  width:40px;height:40px;
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.12);
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.c256-group-topbar{
  margin:0;
  padding:8px 18px;
  min-height:38px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  border-radius:0;
  background:rgba(4,8,15,.76);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.c256-group-lock{font-size:9px}
.c256-group-grid{
  min-height:0;
  margin:0;
  padding:10px;
  overflow:auto;
  align-content:center;
  grid-auto-rows:minmax(0,1fr);
  gap:8px;
  background:#02050a;
}
.c256-group-grid:has(.c256-group-tile:nth-child(1):last-child){
  grid-template-columns:minmax(0,1fr);
}
.c256-group-grid:has(.c256-group-tile:nth-child(3)),
.c256-group-grid:has(.c256-group-tile:nth-child(4)){
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.c256-group-grid:has(.c256-group-tile:nth-child(5)){
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.c256-group-tile{
  min-height:0;
  height:100%;
  aspect-ratio:16/10;
  border:1px solid rgba(255,255,255,.075);
  border-radius:18px;
  box-shadow:0 14px 50px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.055);
  contain:layout paint style;
  isolation:isolate;
  transform:translateZ(0);
  backface-visibility:hidden;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.c256-group-tile.connected{border-color:rgba(116,232,203,.20)}
.c256-group-tile:hover{transform:translateZ(0)}
.c256-group-tile video{
  min-height:0;
  height:100%;
  object-fit:cover;
  background:#03060b;
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:auto;
}
.c256-group-tile.self video{transform:translateZ(0) scaleX(-1)}
.c256-group-tile.screen-share video{object-fit:contain;background:#000}
.c256-group-placeholder{
  transition:opacity .16s ease;
}
.c256-group-name{
  left:10px;bottom:10px;
  padding:6px 9px;
  border-radius:10px;
  background:rgba(5,9,16,.62);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.c256-group-live{
  top:10px;right:10px;
  border-radius:999px;
  background:rgba(4,9,16,.58);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.c256-group-state{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:4;
  max-width:46%;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(4,8,14,.56);
  color:rgba(235,247,255,.74);
  font-size:8px;
  font-weight:800;
  letter-spacing:.04em;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  pointer-events:none;
}
.c256-group-tile-actions{
  position:absolute;
  top:10px;
  left:10px;
  z-index:8;
  display:flex;
  gap:6px;
  opacity:0;
  transform:translateY(-3px);
  transition:opacity .16s ease,transform .16s ease;
}
.c256-group-tile:hover .c256-group-tile-actions,
.c256-group-tile:focus-within .c256-group-tile-actions,
.c256-group-tile:active .c256-group-tile-actions{
  opacity:1;
  transform:translateY(0);
}
.c256-group-tile-btn{
  width:34px;height:34px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:50%;
  background:rgba(7,12,20,.58);
  color:#fff;
  box-shadow:0 7px 22px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  cursor:pointer;
  touch-action:manipulation;
}
.c256-group-tile-btn:hover{background:rgba(255,255,255,.14)}
.c256-group-footer{
  padding:9px 14px max(9px,env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(4,8,15,.80);
  backdrop-filter:blur(28px) saturate(160%);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
}
.c256-group-controls{gap:7px;justify-content:center}
.c256-group-controls button{
  min-width:72px;
  min-height:42px;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.065);
  box-shadow:inset 0 1px rgba(255,255,255,.07);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.c256-group-controls button[data-active="off"]{
  background:rgba(255,85,98,.15);
  border-color:rgba(255,100,110,.24);
}
.c256-group-controls .danger{
  min-width:84px;
  background:rgba(255,70,83,.16);
  border-color:rgba(255,90,100,.23);
}
.c256-group-invite-mini{
  margin:0;
  padding:7px 14px;
  border:0;
  border-top:1px solid rgba(255,255,255,.045);
  border-radius:0;
  background:rgba(3,7,13,.82);
}
.c256-group-call:not(.is-live) .c256-group-grid{display:none!important}
.c256-group-call.is-live .c256-group-grid{display:grid!important}

@media(max-width:760px){
  .c256-group-header{padding-left:14px;padding-right:14px}
  .c256-group-heading .c256-group-kicker{font-size:8px}
  .c256-group-topbar{padding-left:14px;padding-right:14px}
  .c256-group-grid{
    padding:7px;
    gap:7px;
    align-content:stretch;
    grid-template-columns:1fr!important;
    grid-auto-rows:minmax(150px,1fr);
  }
  .c256-group-tile{aspect-ratio:auto;min-height:0;border-radius:15px}
  .c256-group-tile-actions{opacity:1;transform:none}
  .c256-group-tile-btn{width:32px;height:32px}
  .c256-group-state{font-size:7px}
  .c256-group-invite-mini{display:none}
  .c256-group-footer{padding-left:8px;padding-right:8px}
  .c256-group-security{display:none}
  .c256-group-controls button{min-width:0;flex:1;padding:0 8px;font-size:11px}
}
@media(min-width:761px){
  .c256-group-grid:has(.c256-group-tile:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))}
  .c256-group-grid:has(.c256-group-tile:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .c256-group-tile,.c256-group-tile-actions,.c256-group-placeholder{transition:none!important}
}


/* ============================================================
   CHAT256 CALL SURFACE — GLASS4 MEDIA/10-PERSON PATCH
   The previous Face UI hid the live grid because it relied on
   .is-live without the controller setting that state. These
   rules also make media visibility explicit and keep tiles stable.
   ============================================================ */
.c256-group-call.is-live .c256-group-grid{
  display:grid!important;
}
.c256-group-call:not(.is-live) .c256-group-grid{
  display:none!important;
}
.c256-group-tile{
  contain:layout style;
  min-width:0;
  min-height:0;
}
.c256-group-tile video{
  display:block!important;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.c256-group-tile video:not(.has-media){
  visibility:hidden;
}
.c256-group-tile.has-video video{
  visibility:visible;
}
.c256-group-tile.video-off video{
  visibility:hidden;
}
.c256-group-tile.is-enlarged{
  position:fixed;
  left:clamp(8px,5vw,80px);
  top:clamp(8px,8vh,80px);
  width:calc(100vw - clamp(16px,10vw,160px));
  height:calc(100vh - clamp(16px,16vh,160px));
  max-width:none;
  max-height:none;
  z-index:10070;
  aspect-ratio:auto;
  box-shadow:0 30px 100px rgba(0,0,0,.72),0 0 0 1px rgba(116,229,255,.18);
}
.c256-group-tile.is-enlarged video{
  object-fit:contain;
}
.c256-group-tile.is-dragged{
  z-index:60;
}
.c256-group-grid{
  position:relative;
}
.c256-group-grid:has(.c256-group-tile:nth-child(6)){
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.c256-group-grid:has(.c256-group-tile:nth-child(9)),
.c256-group-grid:has(.c256-group-tile:nth-child(10)){
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.c256-group-tile[data-drag-enabled="1"]{
  cursor:grab;
  touch-action:none;
}
.c256-group-tile[data-drag-enabled="1"]:active{
  cursor:grabbing;
}
@media(max-width:1100px){
  .c256-group-grid:has(.c256-group-tile:nth-child(7)),
  .c256-group-grid:has(.c256-group-tile:nth-child(8)),
  .c256-group-grid:has(.c256-group-tile:nth-child(9)),
  .c256-group-grid:has(.c256-group-tile:nth-child(10)){
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:760px){
  .c256-group-grid:has(.c256-group-tile:nth-child(2)),
  .c256-group-grid:has(.c256-group-tile:nth-child(3)),
  .c256-group-grid:has(.c256-group-tile:nth-child(4)),
  .c256-group-grid:has(.c256-group-tile:nth-child(5)),
  .c256-group-grid:has(.c256-group-tile:nth-child(6)),
  .c256-group-grid:has(.c256-group-tile:nth-child(7)),
  .c256-group-grid:has(.c256-group-tile:nth-child(8)),
  .c256-group-grid:has(.c256-group-tile:nth-child(9)),
  .c256-group-grid:has(.c256-group-tile:nth-child(10)){
    grid-template-columns:1fr!important;
  }
  .c256-group-tile.is-enlarged{
    left:7px;
    top:max(7px,env(safe-area-inset-top));
    width:calc(100vw - 14px);
    height:calc(100vh - max(14px,calc(env(safe-area-inset-top) + env(safe-area-inset-bottom))));
  }
}

/* ============================================================
   CHAT256 LIVE QR INVITE — PERSISTENT / MINIMISABLE
   ============================================================ */
.c256-group-call.is-live .c256-group-setup{
  position:fixed;
  top:max(18px,env(safe-area-inset-top));
  right:max(18px,env(safe-area-inset-right));
  z-index:2147482000;
  width:min(360px,calc(100vw - 36px));
  padding:0!important;
  margin:0!important;
  pointer-events:none;
  text-align:left;
}
.c256-group-call.is-live .c256-group-setup > :not(.c256-group-invite){
  display:none!important;
}
.c256-group-call.is-live .c256-group-invite{
  position:relative;
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr)!important;
  align-items:center;
  width:100%;
  box-sizing:border-box;
  margin:0!important;
  padding:12px!important;
  gap:14px!important;
  border:1px solid rgba(151,226,255,.18);
  border-radius:20px;
  background:rgba(7,14,24,.78);
  box-shadow:0 20px 70px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  backdrop-filter:blur(24px) saturate(145%);
  pointer-events:auto;
}
.c256-group-call.is-live .c256-group-qr-wrap{
  width:108px!important;
  padding:5px!important;
  margin:0!important;
  gap:5px;
  background:transparent;
  box-shadow:none;
}
.c256-group-call.is-live .c256-group-qr-frame{
  width:108px;
  height:108px;
  padding:7px;
  border-radius:14px;
  box-shadow:0 8px 28px rgba(0,0,0,.32);
}
.c256-group-call.is-live .c256-group-qr-label,
.c256-group-call.is-live .c256-group-qr-status{
  display:none;
}
.c256-group-call.is-live .c256-group-qr-min{
  position:absolute;
  top:7px;
  right:7px;
  z-index:4;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:9px;
  background:rgba(5,10,18,.72);
  color:#fff;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.c256-group-call.is-live .c256-group-invite-body strong{
  font-size:13px;
}
.c256-group-call.is-live .c256-group-invite-body code{
  font-size:8px;
}
.c256-group-call.is-live .c256-group-actions button{
  min-height:34px;
  padding-inline:10px;
  font-size:10px;
}
.c256-group-call.is-live .c256-group-setup.qr-collapsed .c256-group-invite{
  width:78px!important;
  min-width:78px;
  grid-template-columns:1fr!important;
  padding:6px!important;
  border-radius:17px;
  overflow:hidden;
}
.c256-group-call.is-live .c256-group-setup.qr-collapsed .c256-group-qr-wrap{
  width:66px!important;
}
.c256-group-call.is-live .c256-group-setup.qr-collapsed .c256-group-qr-frame{
  width:66px;
  height:66px;
  padding:4px;
  border-radius:11px;
}
.c256-group-call.is-live .c256-group-setup.qr-collapsed .c256-group-invite-body{
  display:none!important;
}
.c256-group-call.is-live .c256-group-setup.qr-collapsed .c256-group-qr-min{
  top:5px;
  right:5px;
  width:25px;
  height:25px;
}
@media(max-width:700px){
  .c256-group-call.is-live .c256-group-setup{
    top:auto;
    right:10px;
    bottom:calc(92px + env(safe-area-inset-bottom));
    width:min(330px,calc(100vw - 20px));
  }
}

/* Chat256 Call Experience 2026-09 — additive controls only. */
.c256-group-devices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 0;padding:12px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(5,12,22,.72);backdrop-filter:blur(18px)}
.c256-group-devices label{display:grid;gap:6px;color:rgba(235,246,255,.68);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.c256-group-devices select{width:100%;min-height:40px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.055);color:#f4fbff;padding:0 10px;outline:none}
.c256-group-devices select:focus{border-color:rgba(93,226,255,.65);box-shadow:0 0 0 3px rgba(93,226,255,.10)}
.c256-group-controls button[data-gc="devices"]{border-color:rgba(111,221,255,.28)}
.c256-group-controls button[data-active="on"],.c256-group-controls button[aria-pressed="true"]{box-shadow:0 0 0 1px rgba(92,226,255,.20),0 8px 28px rgba(25,195,240,.10)}
@media(max-width:700px){.c256-group-devices{grid-template-columns:1fr}.c256-group-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.c256-group-controls button:last-child{grid-column:1/-1}}

/* CHAT256 CALL POLISH 2026-09-24 — single invite surface + clearer live state. */
.c256-group-call.is-live .c256-group-invite-mini{display:none!important}
.c256-group-call.is-live .c256-group-topbar{padding-right:18px}
.c256-group-call.is-live .c256-group-topbar #c256-group-count{letter-spacing:-.01em}
.c256-group-call.is-live .c256-group-tile.waiting{border-color:rgba(255,255,255,.08);}
.c256-group-call.is-live .c256-group-tile.connected{border-color:rgba(105,238,188,.22);}
.c256-group-call.is-live .c256-group-tile .c256-group-state{transition:opacity .2s ease}
@media(max-width:700px){
  .c256-group-call.is-live .c256-group-setup{bottom:calc(92px + env(safe-area-inset-bottom));}
}

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

/* Chat256 Premium UI — single presentation layer. Functional core styles remain in /e2e/theme.css. */
:root{
  --c256-bg:#050811;
  --c256-panel:rgba(11,17,29,.82);
  --c256-panel-strong:rgba(13,21,35,.94);
  --c256-line:rgba(255,255,255,.085);
  --c256-line-soft:rgba(255,255,255,.055);
  --c256-text:#f4f8fc;
  --c256-muted:#91a2b4;
  --c256-dim:#647589;
  --c256-cyan:#68e3ff;
  --c256-blue:#7e9dff;
  --c256-violet:#b57aff;
  --c256-green:#57dfb1;
  --c256-shadow:0 28px 90px rgba(0,0,0,.34);
}

html,body{background:var(--c256-bg)!important}
body{color:var(--c256-text)!important;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(720px 430px at 12% -8%,rgba(104,227,255,.10),transparent 62%),radial-gradient(720px 480px at 92% 12%,rgba(181,122,255,.09),transparent 62%),linear-gradient(180deg,#050811,#04070d 70%,#050913);}

/* ---------- Landing: quiet, premium, mobile-first ---------- */
#modal{align-items:flex-start!important;overflow-y:auto!important;overflow-x:hidden!important;background:#050811!important}
#modal .landing-shell{width:100%!important;min-height:100dvh!important;height:auto!important;overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important;isolation:isolate!important}
#modal .landing-shell::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(600px 420px at 18% 18%,rgba(80,218,245,.075),transparent 68%),radial-gradient(620px 460px at 84% 28%,rgba(143,111,255,.075),transparent 70%)}
#modal .landing-shell::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,#000,transparent 72%)}
#modal .landing-topline{width:min(1180px,100%);margin:auto;padding:18px 24px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
#modal .landing-brand{gap:9px}
#modal .landing-brand .brand-mark{width:30px;height:30px}
#modal .landing-brand .brand-wordmark{font-size:18px;letter-spacing:-.045em}
#modal .landing-security{font-size:8px!important;letter-spacing:.17em!important;color:#73869a!important}
#modal .landing-security-dot{width:5px!important;height:5px!important;background:var(--c256-green)!important;box-shadow:0 0 12px rgba(87,223,177,.5)!important}
#modal .landing-main{width:min(1180px,100%);margin:auto;padding:0 24px 70px;min-height:calc(100dvh - 60px);display:flex;flex-direction:column}
#modal .landing-hero-v3{width:min(820px,100%);margin:auto;padding:clamp(52px,10vh,110px) 0 0;text-align:center}
#modal .landing-hero-v3 .landing-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#7e91a4!important;font-size:9px!important;letter-spacing:.18em!important;font-weight:800}
#modal .landing-hero-v3 .landing-eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c256-cyan);box-shadow:0 0 14px rgba(104,227,255,.6)}
#modal .landing-hero-v3 h1{margin:17px auto 16px;max-width:820px;font-size:clamp(48px,7vw,84px)!important;line-height:.94!important;letter-spacing:-.072em!important;font-weight:850!important;color:#f5f8fc!important;text-shadow:0 20px 80px rgba(104,227,255,.07)!important}
#modal .landing-hero-v3 h1 em{font-style:normal!important;background:linear-gradient(105deg,#67ddf6 0%,#88a0ff 48%,#bd7dff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
#modal .landing-hero-v3 .landing-lead{max-width:590px;margin:0 auto;color:#8fa1b2!important;font-size:14px!important;line-height:1.6!important}
#modal .c256-start-grid{width:min(760px,100%);margin:28px auto 0;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:9px}
#modal .c256-start-action{position:relative;min-height:78px;padding:13px 14px;border:1px solid rgba(255,255,255,.075)!important;border-radius:17px!important;background:linear-gradient(145deg,rgba(16,25,41,.88),rgba(8,13,23,.88))!important;display:grid;grid-template-columns:35px 1fr 15px;align-items:center;gap:10px;color:#edf6fb!important;text-align:left;box-shadow:0 14px 44px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.035);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
#modal .c256-start-action:hover,#modal .c256-start-action:focus-visible{transform:translateY(-2px);border-color:rgba(104,227,255,.28)!important;box-shadow:0 22px 55px rgba(0,0,0,.22),0 0 30px rgba(104,227,255,.04);outline:none}
#modal .c256-start-action.primary{background:linear-gradient(135deg,rgba(61,196,224,.18),rgba(105,119,255,.14),rgba(181,122,255,.10))!important;border-color:rgba(104,227,255,.24)!important}
#modal .c256-start-icon{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:rgba(104,227,255,.075);color:#8cecff;font-size:14px;border:1px solid rgba(104,227,255,.09)}
#modal .c256-start-action.primary .c256-start-icon{background:linear-gradient(145deg,rgba(104,227,255,.17),rgba(181,122,255,.12));color:#e5fbff}
#modal .c256-start-action strong{display:block;font-size:12px;font-weight:850;letter-spacing:-.01em}
#modal .c256-start-action small{display:block;margin-top:3px;color:#8194a6;font-size:9px;line-height:1.3}
#modal .c256-start-arrow{color:#667d90;font-size:13px}
#modal .c256-random-link{width:min(760px,100%);margin:9px auto 0;min-height:47px;padding:9px 13px;border:1px solid rgba(181,122,255,.12);border-radius:14px;background:rgba(181,122,255,.035);display:grid;grid-template-columns:29px 1fr 14px;align-items:center;gap:9px;color:#dfeaf2;text-decoration:none;transition:.18s ease}
#modal .c256-random-link:hover{transform:translateY(-1px);border-color:rgba(181,122,255,.25);background:rgba(181,122,255,.06)}
#modal .c256-random-spark{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:rgba(181,122,255,.09);color:#c49aff}
#modal .c256-random-link strong{display:block;font-size:10px}.c256-random-link small{display:block;margin-top:2px;color:#718397;font-size:8px}
#modal .c256-join-strip{width:min(760px,100%);margin:9px auto 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
#modal .c256-join-input{height:47px;min-width:0;border:1px solid rgba(255,255,255,.075)!important;border-radius:13px!important;background:rgba(255,255,255,.025)!important;color:#dce8f0!important;padding:0 14px!important;font-size:12px!important;outline:none}
#modal .c256-join-input:focus{border-color:rgba(104,227,255,.32)!important;box-shadow:0 0 0 3px rgba(104,227,255,.055)}
#modal .c256-join-button{height:47px;padding:0 17px;border:1px solid rgba(255,255,255,.18);border-radius:13px;background:#f0f8fb;color:#071019;font-size:11px;font-weight:900;cursor:pointer;transition:.18s ease}
#modal .c256-join-button:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(0,0,0,.22)}
#modal .c256-site-share{margin:9px auto 0;border:0;background:transparent;color:#70869a;font-size:9px;font-weight:750;cursor:pointer;padding:6px 10px}
#modal .c256-site-share:hover{color:#a5bbc9}
#modal .landing-proof-v3{display:flex;justify-content:center;flex-wrap:wrap;gap:7px 17px;margin:10px auto 0;color:#617587;font-size:8px}
#modal .landing-proof-v3 i{width:3px;height:3px;border-radius:50%;background:#31495a}
#modal .landing-secondary-content{width:min(930px,100%);margin:78px auto 0;padding-top:30px;border-top:1px solid rgba(255,255,255,.055)}
#modal .landing-secondary-content h2{text-align:center;margin:0;color:#e9f1f6;font-size:26px;line-height:1.1;letter-spacing:-.045em}
#modal .landing-secondary-content>p{max-width:590px;margin:9px auto 23px;text-align:center;color:#72879a;font-size:11px;line-height:1.6}
#modal .c256-seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
#modal .c256-seo-card{padding:18px;border:1px solid rgba(255,255,255,.06);border-radius:16px;background:rgba(255,255,255,.018);box-shadow:inset 0 1px rgba(255,255,255,.025);transition:.18s ease}
#modal .c256-seo-card:hover{transform:translateY(-2px);border-color:rgba(104,227,255,.14);background:rgba(104,227,255,.025)}
#modal .c256-seo-card b{display:block;color:#72dff7;font-size:8px;letter-spacing:.16em;text-transform:uppercase}
#modal .c256-seo-card strong{display:block;margin-top:8px;color:#e2edf3;font-size:13px}
#modal .c256-seo-card p{margin:6px 0 0;color:#718598;font-size:9px;line-height:1.55}
#modal .c256-seo-links{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:17px}
#modal .c256-seo-links a{padding:7px 10px;border:1px solid rgba(255,255,255,.06);border-radius:999px;background:rgba(255,255,255,.018);color:#8198aa;font-size:8px;text-decoration:none;transition:.18s ease}
#modal .c256-seo-links a:hover{color:#b9eefa;border-color:rgba(104,227,255,.16)}
#modal .c256-faq{display:grid;gap:7px;margin-top:18px}
#modal .c256-faq details{border:1px solid rgba(255,255,255,.055);border-radius:13px;background:rgba(255,255,255,.014);overflow:hidden}
#modal .c256-faq summary{padding:12px 14px;color:#cbd8e1;font-size:10px;font-weight:800;cursor:pointer;list-style:none}
#modal .c256-faq summary::-webkit-details-marker{display:none}
#modal .c256-faq summary::after{content:'+';float:right;color:#6e8497;font-size:13px}.c256-faq details[open] summary::after{content:'−'}
#modal .c256-faq p{margin:0;padding:0 14px 13px;color:#73889a;font-size:9px;line-height:1.6}
#modal .landing-services-link{display:flex;justify-content:center;margin:20px auto 0;color:#7990a2!important;font-size:9px!important;text-decoration:none!important}

/* ---------- App shell ---------- */
#app{background:radial-gradient(800px 420px at 55% -8%,rgba(104,227,255,.045),transparent 68%),#050811!important}
.bar{min-height:60px!important;background:rgba(5,9,17,.82)!important;border-bottom:1px solid rgba(255,255,255,.075)!important;backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important}
.icon-btn{border-color:rgba(255,255,255,.075)!important;background:rgba(255,255,255,.025)!important;border-radius:12px!important}
.icon-btn:hover{background:rgba(104,227,255,.07)!important;border-color:rgba(104,227,255,.20)!important}
.sidebar{background:linear-gradient(180deg,rgba(8,13,23,.97),rgba(5,9,16,.94))!important;border-right:1px solid rgba(255,255,255,.065)!important;box-shadow:20px 0 70px rgba(0,0,0,.18)!important}
.sidebar-brand{padding-top:2px!important}
.sidebar-section-label{color:#53687b!important;letter-spacing:.16em!important}
.sidebar-nav-item{min-height:42px!important;border:1px solid transparent!important;border-radius:12px!important;color:#8497a8!important;transition:.18s ease!important}
.sidebar-nav-item:hover{background:rgba(255,255,255,.035)!important;color:#dce9ef!important;border-color:rgba(255,255,255,.055)!important;transform:none!important}
.sidebar-nav-item.is-active{background:linear-gradient(135deg,rgba(104,227,255,.095),rgba(126,157,255,.055))!important;border-color:rgba(104,227,255,.12)!important;color:#edf8fb!important;box-shadow:inset 0 0 30px rgba(104,227,255,.025)!important}
.sidebar-nav-item.is-active::after{background:linear-gradient(180deg,#68e3ff,#9b83ff)!important;box-shadow:0 0 14px rgba(104,227,255,.35)!important}
.sidebar-current-row,.sidebar-account,.sidebar-security{border-color:rgba(255,255,255,.055)!important;background:rgba(255,255,255,.014)!important}
.sidebar-current-dot{background:#68e3ff!important;box-shadow:0 0 0 4px rgba(104,227,255,.055)!important}
.sidebar-foot{color:#3e5366!important}
.chat-main{background:radial-gradient(700px 360px at 60% 0,rgba(104,227,255,.035),transparent 70%),#050811!important}
.msgs{padding:24px clamp(14px,3vw,34px) 20px!important}
.msg .bubble{border-color:rgba(255,255,255,.07)!important;border-radius:17px!important;background:linear-gradient(145deg,#101a29,#0b1421)!important;box-shadow:0 12px 34px rgba(0,0,0,.12)!important}
.msg.mine .bubble{background:linear-gradient(145deg,rgba(65,166,204,.22),rgba(99,105,214,.18))!important;border-color:rgba(104,227,255,.13)!important}
.msg .av{background:rgba(104,227,255,.07)!important;border-color:rgba(104,227,255,.12)!important;color:#84e8fa!important}
.meta{color:#617588!important}.who{color:#7fe6fa!important}
.composer{padding:10px 12px max(10px,var(--safe-bottom))!important;background:rgba(6,11,19,.90)!important;border-top:1px solid rgba(255,255,255,.07)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}
.composer textarea#input{border-color:rgba(255,255,255,.075)!important;border-radius:15px!important;background:#0d1724!important;box-shadow:inset 0 1px rgba(255,255,255,.025)!important}
.composer textarea#input:focus{border-color:rgba(104,227,255,.25)!important;box-shadow:0 0 0 3px rgba(104,227,255,.045)!important}
.primary{background:linear-gradient(135deg,#68e3ff,#809cff 52%,#b57aff)!important;color:#061019!important;border:1px solid rgba(255,255,255,.20)!important;box-shadow:0 10px 30px rgba(104,227,255,.12),inset 0 1px rgba(255,255,255,.55)!important}
.secondary{background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.075)!important;color:#d7e4eb!important}
.primary:hover,.secondary:hover{transform:translateY(-1px)}

/* ---------- Workspace ---------- */
.workspace-panel{background:radial-gradient(700px 400px at 62% 0,rgba(104,227,255,.045),transparent 70%),linear-gradient(180deg,#07101a,#050a12)!important;padding:26px clamp(16px,3vw,44px) 34px!important}
.workspace-top h2{font-size:30px!important;letter-spacing:-.045em!important}
.workspace-kicker{color:#6a8a9e!important;letter-spacing:.16em!important}
.workspace-tabs{gap:6px!important;border-bottom-color:rgba(255,255,255,.06)!important}
.workspace-tab{min-height:38px!important;padding:0 14px!important;border:1px solid transparent!important;border-radius:11px!important;background:transparent!important;color:#708698!important;font-weight:800!important}
.workspace-tab:hover{color:#c9dbe4!important;background:rgba(255,255,255,.025)!important}
.workspace-tab.is-active{background:linear-gradient(135deg,rgba(104,227,255,.10),rgba(126,157,255,.06))!important;border-color:rgba(104,227,255,.14)!important;color:#eaf7fb!important}
.workspace-storage-card,.workspace-drop,.workspace-file-item,.workspace-packages,.workspace-section-head{border-color:rgba(255,255,255,.065)!important}
.workspace-storage-card{background:linear-gradient(145deg,rgba(15,25,41,.88),rgba(8,14,24,.88))!important;border-radius:20px!important;box-shadow:0 22px 65px rgba(0,0,0,.18)!important}
.workspace-drop{border-radius:18px!important;background:rgba(255,255,255,.016)!important;min-height:120px!important}
.workspace-drop:hover{background:rgba(104,227,255,.025)!important;border-color:rgba(104,227,255,.18)!important}
.workspace-file-grid{gap:10px!important}
.workspace-file-item{border-radius:16px!important;background:rgba(255,255,255,.018)!important;box-shadow:none!important;transition:.18s ease!important}
.workspace-file-item:hover{transform:translateY(-2px);border-color:rgba(104,227,255,.15)!important;background:rgba(104,227,255,.025)!important}
.workspace-empty{border-color:rgba(255,255,255,.055)!important;background:rgba(255,255,255,.012)!important;border-radius:18px!important}

/* ---------- Private messaging / sheets / dialogs ---------- */
.c256-private-shell,.c256-account-dialog,.c256-security-card,.sheet,.chat256-room-menu-panel{background:linear-gradient(180deg,rgba(12,20,34,.98),rgba(6,11,19,.98))!important;border-color:rgba(255,255,255,.08)!important;box-shadow:0 30px 100px rgba(0,0,0,.42)!important}
.c256-private-message{border-radius:15px!important;background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.06)!important}
.c256-private-message.is-outgoing{background:linear-gradient(135deg,rgba(73,184,218,.22),rgba(116,113,222,.19))!important;border-color:rgba(104,227,255,.12)!important}

/* ---------- Random / standalone pages ---------- */
.random-shell{background:radial-gradient(700px 480px at 15% 0,rgba(104,227,255,.08),transparent 65%),radial-gradient(650px 450px at 90% 20%,rgba(181,122,255,.08),transparent 65%),#050811!important}
.random-nav{background:rgba(5,9,17,.78)!important;border-bottom-color:rgba(255,255,255,.06)!important}
.random-hero h1{letter-spacing:-.07em!important}.random-hero h1 em{background:linear-gradient(105deg,#68e3ff,#8a9cff 50%,#b87dff)!important;-webkit-background-clip:text!important;background-clip:text!important}
.random-mode,.random-card,.random-chat{border-color:rgba(255,255,255,.07)!important;background:linear-gradient(145deg,rgba(15,24,40,.88),rgba(7,12,21,.88))!important;box-shadow:0 20px 65px rgba(0,0,0,.20)!important}

/* ---------- Mobile app feel ---------- */
@media(max-width:760px){
  #modal .landing-topline{padding:14px 15px 0}
  #modal .landing-security{display:none!important}
  #modal .landing-main{padding:0 15px calc(42px + env(safe-area-inset-bottom))}
  #modal .landing-hero-v3{padding-top:58px}
  #modal .landing-hero-v3 h1{font-size:clamp(42px,12.7vw,64px)!important;line-height:.94!important;margin-top:15px}
  #modal .landing-hero-v3 .landing-lead{font-size:12px!important;max-width:390px}
  #modal .c256-start-grid{grid-template-columns:1fr 1fr;gap:7px;margin-top:20px}
  #modal .c256-start-action{min-height:70px;padding:10px;border-radius:14px!important;grid-template-columns:31px 1fr 12px;gap:8px}
  #modal .c256-start-action.primary{grid-column:1/-1;min-height:58px}
  #modal .c256-start-icon{width:31px;height:31px;border-radius:9px}
  #modal .c256-start-action strong{font-size:11px}.c256-start-action small{font-size:8px}
  #modal .c256-random-link{margin-top:7px;min-height:43px}
  #modal .c256-join-strip{grid-template-columns:minmax(0,1fr) auto;margin-top:7px}
  #modal .c256-join-input,#modal .c256-join-button{height:43px}
  #modal .landing-proof-v3{font-size:7px;gap:5px 10px}
  #modal .landing-secondary-content{margin-top:58px;padding-top:24px}
  #modal .landing-secondary-content h2{font-size:22px}
  #modal .c256-seo-grid{grid-template-columns:1fr}
  #modal .c256-seo-card{padding:15px}
  .bar{min-height:56px!important;padding-inline:9px!important}
  .msgs{padding:16px 10px 12px!important}
  .msg .bubble{max-width:84vw!important;padding:10px 12px!important}
  .txt{font-size:14px!important}
  .composer{grid-template-columns:42px minmax(0,1fr) 42px 46px!important;gap:6px!important;padding-inline:8px!important}
  .composer textarea#input{min-height:44px!important;font-size:16px!important}
  .composer .c256-attach-button,.composer [data-c256-room-attach]{width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important}
  .composer>.send{width:46px!important;min-width:46px!important;height:44px!important}
  .workspace-panel{padding:14px 10px calc(24px + env(safe-bottom))!important}
  .workspace-top h2{font-size:23px!important}
  .workspace-actions{gap:6px!important}
  .workspace-tabs{margin-inline:-10px!important;padding-inline:10px!important}
}
@media(max-width:390px){
  #modal .landing-hero-v3{padding-top:45px}
  #modal .landing-hero-v3 h1{font-size:40px!important}
  #modal .landing-hero-v3 .landing-lead{font-size:11px!important}
  #modal .c256-start-action small{display:none}
  #modal .c256-join-input{font-size:10px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Chat256 — canonical landing presentation. Keep this file last in the landing cascade. */
:root{
  --c256-bg:#050812;
  --c256-bg-2:#070b18;
  --c256-text:#f7f9ff;
  --c256-muted:#9ca8bc;
  --c256-line:rgba(255,255,255,.10);
  --c256-line-strong:rgba(255,255,255,.17);
  --c256-cyan:#5fe7ff;
  --c256-blue:#7aa8ff;
  --c256-violet:#a98cff;
}

/* Landing shell */
#modal{background:var(--c256-bg);}
#modal .landing-shell{
  position:relative;
  isolation:isolate;
  width:min(1180px,100%);
  min-height:100svh;
  margin:0 auto;
  padding:clamp(22px,4vw,42px) clamp(18px,4vw,48px) 26px;
  overflow:hidden;
  color:var(--c256-text);
  background:
    radial-gradient(ellipse 55% 38% at 18% 8%,rgba(38,160,214,.13),transparent 68%),
    radial-gradient(ellipse 48% 36% at 84% 18%,rgba(120,88,240,.11),transparent 70%),
    radial-gradient(ellipse 65% 30% at 50% 100%,rgba(44,115,255,.10),transparent 72%),
    linear-gradient(180deg,#050914 0%,#050812 55%,#040711 100%);
}
#modal .landing-shell:before{
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.34),transparent 78%);
}
#modal .landing-topline{
  position:relative;z-index:4;
  width:100%;max-width:1060px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  min-height:46px;
}
#modal .landing-brand{gap:10px;}
#modal .landing-brand .brand-mark{width:32px;height:32px;filter:drop-shadow(0 0 14px rgba(78,222,255,.25));}
#modal .landing-brand .brand-wordmark{font-size:18px;letter-spacing:-.04em;font-weight:800;}
#modal .landing-security{
  display:flex;align-items:center;gap:8px;
  color:#aab6c9;font-size:10px;letter-spacing:.19em;font-weight:700;
}
#modal .landing-security-dot{width:6px;height:6px;border-radius:50%;background:var(--c256-cyan);box-shadow:0 0 14px rgba(95,231,255,.8);}

#modal .landing-main{position:relative;z-index:2;width:100%;}
#modal .landing-hero-final{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  width:100%;max-width:900px;margin:0 auto;
  min-height:calc(100svh - 100px);
  justify-content:center;
  padding:clamp(42px,8vh,84px) 0 28px;
}
.landing-hero-copy{position:relative;z-index:2;}
#modal .landing-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  color:#9eb0c7;font-size:10px;line-height:1;font-weight:800;letter-spacing:.28em;
  text-transform:uppercase;
}
#modal .landing-eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c256-cyan);box-shadow:0 0 16px rgba(95,231,255,.75);}
#modal .landing-hero-final h1{
  margin:25px auto 0;
  max-width:900px;
  font-size:clamp(48px,7.1vw,92px);
  line-height:.91;
  letter-spacing:-.065em;
  font-weight:850;
  color:#f8faff;
  text-wrap:balance;
}
#modal .landing-hero-final h1 em{
  display:inline-block;font-style:normal;
  color:transparent;
  background:linear-gradient(100deg,#56e4ff 0%,#70b6ff 38%,#a990ff 72%,#c17dff 100%);
  -webkit-background-clip:text;background-clip:text;
}
#modal .landing-hero-final .landing-lead{
  max-width:560px;margin:24px auto 0;
  color:#a8b3c4;font-size:clamp(15px,1.6vw,18px);line-height:1.5;letter-spacing:-.01em;
}
#modal .landing-primary-action{position:relative;z-index:4;margin-top:34px;}
#modal .landing-start-button{
  display:inline-flex;align-items:center;justify-content:space-between;gap:30px;
  min-width:min(430px,88vw);height:64px;padding:6px 8px 6px 26px;
  border:1px solid rgba(125,224,255,.65);border-radius:999px;
  color:#07101b;background:linear-gradient(100deg,#dffcff 0%,#aeefff 30%,#b9a5ff 100%);
  box-shadow:0 16px 55px rgba(78,195,255,.16),inset 0 1px 0 rgba(255,255,255,.8);
  font:800 16px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
#modal .landing-start-button b{
  display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:rgba(7,13,25,.9);color:#fff;font-size:23px;font-weight:500;
}
#modal .landing-start-button:hover{transform:translateY(-2px);filter:saturate(1.05);box-shadow:0 20px 65px rgba(78,195,255,.23),inset 0 1px 0 rgba(255,255,255,.85);}
#modal .landing-start-button:active{transform:translateY(0);}

#modal .landing-mode-switch{
  position:relative;z-index:4;
  display:flex;align-items:center;justify-content:center;
  width:min(520px,92vw);height:58px;margin-top:18px;padding:4px;
  border:1px solid rgba(130,155,190,.24);border-radius:999px;
  background:rgba(7,13,24,.66);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 14px 40px rgba(0,0,0,.16);
}
#modal .landing-mode{flex:1;height:48px;border:0;border-radius:999px;background:transparent;color:#9eabbe;display:flex;align-items:center;justify-content:center;gap:8px;font:700 13px system-ui,sans-serif;cursor:pointer;transition:.18s ease;}
#modal .landing-mode:hover{color:#e8eff9;}
#modal .landing-mode.is-active{color:#f6fbff;background:rgba(255,255,255,.065);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
#modal .landing-mode-icon{font-size:17px;color:#6edfff;line-height:1;}
#modal .landing-mode:nth-child(2) .landing-mode-icon{color:#9f91ff;}
#modal .landing-mode:nth-child(3) .landing-mode-icon{color:#bc7cff;}

#modal .landing-join-row{
  position:relative;z-index:4;display:flex;align-items:center;
  width:min(520px,92vw);height:56px;margin-top:16px;padding:5px;
  border:1px solid rgba(130,155,190,.20);border-radius:18px;background:rgba(6,11,20,.66);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
#modal .landing-join-input{min-width:0;flex:1;height:44px;padding:0 14px;border:0;outline:0;background:transparent;color:#eaf1fb;font:500 13px system-ui,sans-serif;}
#modal .landing-join-input::placeholder{color:#69778b;}
#modal .landing-join-button{height:44px;padding:0 17px;border:0;border-radius:13px;background:rgba(255,255,255,.08);color:#edf4ff;font:750 12px system-ui,sans-serif;white-space:nowrap;cursor:pointer;}
#modal .landing-join-button:hover{background:rgba(255,255,255,.13);}
#modal .landing-join-button span{color:#6de6ff;margin-left:5px;font-size:15px;}

#modal .landing-random{
  position:relative;z-index:4;display:inline-flex;align-items:center;gap:9px;margin-top:15px;
  color:#aab5c7;text-decoration:none;font-size:12px;
}
#modal .landing-random strong{color:#dfe8f4;font-weight:700;}
#modal .landing-random span:not(.landing-random-dot){color:#6f7e92;}
#modal .landing-random b{color:#8c9cff;font-size:15px;font-weight:500;margin-left:2px;transition:transform .18s ease;}
#modal .landing-random:hover b{transform:translateX(3px);}
#modal .landing-random-dot{width:6px;height:6px;border-radius:50%;background:#b88aff;box-shadow:0 0 12px rgba(184,138,255,.7);}

#modal .landing-proof{
  position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:22px;
  margin-top:34px;color:#77869b;font-size:10px;letter-spacing:.035em;
}
#modal .landing-proof span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
#modal .landing-proof i{font-style:normal;color:#7edfff;font-size:13px;}

/* Ambient arcs — decorative, no image dependency. */
#modal .landing-hero-orbit{position:absolute;border:1px solid rgba(77,193,255,.28);border-radius:50%;pointer-events:none;z-index:0;}
#modal .landing-hero-orbit-a{width:900px;height:900px;left:-520px;top:-400px;box-shadow:0 0 80px rgba(44,153,255,.05);transform:rotate(-18deg);}
#modal .landing-hero-orbit-b{width:1100px;height:480px;left:50%;bottom:-390px;transform:translateX(-50%) rotate(-4deg);border-color:rgba(159,112,255,.26);box-shadow:0 -10px 80px rgba(102,95,255,.07);}
#modal .landing-hero-glow{position:absolute;width:460px;height:460px;left:50%;top:43%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(73,168,255,.10),rgba(104,85,255,.04) 36%,transparent 70%);filter:blur(2px);pointer-events:none;z-index:0;}

/* Keep the deeper SEO content clean and intentionally below the hero. */
#modal .landing-secondary-content{max-width:1060px;margin:0 auto;padding:90px 0 70px;}
#modal .landing-secondary-content h2{font-size:clamp(32px,5vw,58px);letter-spacing:-.055em;line-height:.98;max-width:700px;color:#f5f7fb;}
#modal .landing-secondary-content>p{max-width:650px;color:#8997ab;font-size:16px;line-height:1.65;margin-top:16px;}
#modal .c256-seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;}
#modal .c256-seo-card{padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(255,255,255,.025);box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
#modal .c256-seo-card b{color:#71ddff;font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
#modal .c256-seo-card strong{display:block;color:#eef3fa;font-size:18px;margin-top:12px;}
#modal .c256-seo-card p{color:#8290a4;font-size:13px;line-height:1.55;margin-top:8px;}
#modal .c256-seo-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
#modal .c256-seo-links a{color:#a7b5c9;text-decoration:none;border:1px solid rgba(255,255,255,.07);padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.02);font-size:12px;}

@media (max-width:760px){
  #modal .landing-shell{padding:14px 16px 18px;min-height:100svh;}
  #modal .landing-topline{min-height:40px;}
  #modal .landing-brand .brand-mark{width:29px;height:29px;}
  #modal .landing-brand .brand-wordmark{font-size:16px;}
  #modal .landing-security{font-size:8px;letter-spacing:.15em;}
  #modal .landing-security-dot{width:5px;height:5px;}
  #modal .landing-hero-final{min-height:calc(100svh - 60px);padding:30px 0 14px;justify-content:center;}
  #modal .landing-eyebrow{font-size:8px;letter-spacing:.24em;}
  #modal .landing-hero-final h1{font-size:clamp(43px,13vw,66px);line-height:.91;margin-top:18px;letter-spacing:-.07em;}
  #modal .landing-hero-final .landing-lead{font-size:14px;line-height:1.45;max-width:330px;margin-top:16px;}
  #modal .landing-primary-action{margin-top:24px;width:100%;}
  #modal .landing-start-button{width:100%;min-width:0;height:58px;padding-left:20px;font-size:15px;gap:14px;}
  #modal .landing-start-button b{width:46px;height:46px;font-size:21px;}
  #modal .landing-mode-switch{width:100%;height:52px;margin-top:11px;}
  #modal .landing-mode{height:44px;font-size:12px;gap:6px;}
  #modal .landing-mode-icon{font-size:15px;}
  #modal .landing-join-row{width:100%;height:52px;margin-top:10px;border-radius:16px;}
  #modal .landing-join-input{height:42px;font-size:12px;padding:0 11px;}
  #modal .landing-join-button{height:42px;padding:0 13px;border-radius:11px;font-size:11px;}
  #modal .landing-random{margin-top:12px;font-size:11px;}
  #modal .landing-proof{width:100%;margin-top:23px;gap:9px;font-size:8px;letter-spacing:0;}
  #modal .landing-proof span{gap:4px;}
  #modal .landing-proof span:not(:last-child):after{content:"";width:1px;height:11px;background:rgba(255,255,255,.12);margin-left:7px;}
  #modal .landing-proof i{font-size:10px;}
  #modal .landing-hero-orbit-a{width:560px;height:560px;left:-340px;top:-180px;}
  #modal .landing-hero-orbit-b{width:680px;height:300px;bottom:-250px;}
  #modal .landing-hero-glow{width:320px;height:320px;top:45%;}
  #modal .landing-secondary-content{padding:65px 0 50px;}
  #modal .landing-secondary-content h2{font-size:36px;}
  #modal .c256-seo-grid{grid-template-columns:1fr;}
}

@media (max-height:720px) and (max-width:760px){
  #modal .landing-hero-final{padding-top:18px;}
  #modal .landing-hero-final h1{font-size:42px;margin-top:14px;}
  #modal .landing-hero-final .landing-lead{margin-top:11px;}
  #modal .landing-primary-action{margin-top:17px;}
  #modal .landing-mode-switch{margin-top:8px;}
  #modal .landing-join-row{margin-top:7px;}
  #modal .landing-random{margin-top:8px;}
  #modal .landing-proof{margin-top:15px;}
}

@media (prefers-reduced-motion:reduce){
  #modal .landing-start-button,#modal .landing-random b{transition:none;}
}

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


/* CHAT256 PRIVATE CHAT V1 — final visual layer
   Product language: private chat. Internal room/session IDs are unchanged.
   This layer intentionally sits last and is presentation-only. */
:root{
  --c256-bg:#05070b;
  --c256-panel:rgba(13,18,27,.78);
  --c256-line:rgba(255,255,255,.085);
  --c256-text:#f4f8fb;
  --c256-muted:#93a4b4;
  --c256-cyan:#72e6f6;
  --c256-cyan-soft:rgba(114,230,246,.12);
  --c256-violet:#a58bff;
}
#modal .landing-shell{
  background:
    radial-gradient(900px 520px at 50% 8%,rgba(71,185,219,.095),transparent 60%),
    radial-gradient(650px 500px at 84% 35%,rgba(132,99,255,.065),transparent 65%),
    #05070b!important;
  color:var(--c256-text)!important;
}
#modal .landing-topline{
  max-width:1180px!important;
  padding:22px 26px 0!important;
}
#modal .landing-brand .brand-wordmark{
  letter-spacing:.17em!important;
  font-weight:760!important;
}
#modal .landing-security{
  border:1px solid var(--c256-line);
  background:rgba(255,255,255,.025);
  border-radius:999px;
  padding:7px 11px;
  backdrop-filter:blur(18px);
}
#modal .landing-main{
  max-width:1180px!important;
  padding:clamp(35px,6vw,80px) 22px 80px!important;
}
#modal .landing-hero{
  position:relative;
  min-height:690px;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#modal .landing-hero-copy{
  position:relative;
  z-index:3;
  max-width:850px;
  text-align:center;
}
#modal .landing-eyebrow{
  color:#91a5b7!important;
  font-size:10px!important;
  letter-spacing:.22em!important;
  font-weight:700!important;
}
#modal .landing-hero-copy h1{
  font-size:clamp(56px,8.3vw,108px)!important;
  line-height:.91!important;
  letter-spacing:-.075em!important;
  font-weight:790!important;
  margin:22px 0 22px!important;
}
#modal .landing-hero-copy h1 em{
  background:linear-gradient(105deg,#f8fdff 10%,#72e6f6 50%,#a58bff 95%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
#modal .landing-lead{
  max-width:610px!important;
  color:#9eafbe!important;
  font-size:16px!important;
  line-height:1.65!important;
}
#modal .landing-hero::before{
  content:"";
  position:absolute;
  width:min(72vw,720px);
  height:min(72vw,720px);
  border-radius:50%;
  border:1px solid rgba(114,230,246,.09);
  box-shadow:
    0 0 90px rgba(114,230,246,.07),
    inset 0 0 100px rgba(114,230,246,.035);
  transform:translateY(8px);
  pointer-events:none;
}
#modal .landing-hero::after{
  content:"";
  position:absolute;
  width:2px;height:2px;
  background:#c9fbff;
  border-radius:50%;
  box-shadow:
    12vw -9vw 0 rgba(114,230,246,.8),
    -19vw 12vw 0 rgba(165,139,255,.65),
    24vw 16vw 0 rgba(114,230,246,.55),
    -27vw -13vw 0 rgba(255,255,255,.45),
    31vw -2vw 0 rgba(165,139,255,.5),
    -33vw 4vw 0 rgba(114,230,246,.4);
  opacity:.7;
  pointer-events:none;
}
#modal .landing-hero-orbit{
  opacity:.42!important;
  border-color:rgba(114,230,246,.16)!important;
}
#modal .landing-hero-glow{
  opacity:.18!important;
  background:radial-gradient(circle,rgba(114,230,246,.35),transparent 68%)!important;
}
#modal .landing-primary-action{
  position:relative;
  z-index:4;
  margin-top:34px!important;
}
#modal .landing-start-button{
  min-width:300px!important;
  min-height:62px!important;
  padding:0 22px 0 26px!important;
  border-radius:17px!important;
  border:1px solid rgba(255,255,255,.34)!important;
  background:linear-gradient(180deg,#f9fdff,#dceef3)!important;
  color:#071016!important;
  box-shadow:0 18px 55px rgba(0,0,0,.34),0 0 0 1px rgba(114,230,246,.08)!important;
  font-size:14px!important;
  font-weight:760!important;
  letter-spacing:.01em!important;
  transition:transform .2s ease,box-shadow .2s ease!important;
}
#modal .landing-start-button b{
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border-radius:11px;
  background:#07131a;
  color:#dffcff;
}
#modal .landing-start-button:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 25px 70px rgba(0,0,0,.42),0 0 30px rgba(114,230,246,.10)!important;
}
#modal .landing-mode-switch{
  position:relative;
  z-index:4;
  display:flex!important;
  gap:5px!important;
  margin-top:10px!important;
  padding:5px!important;
  border:1px solid var(--c256-line)!important;
  background:rgba(5,8,13,.68)!important;
  border-radius:15px!important;
  backdrop-filter:blur(18px);
}
#modal .landing-mode{
  min-width:90px!important;
  height:36px!important;
  border-radius:10px!important;
  color:#778b9d!important;
  background:transparent!important;
  border:0!important;
  font-size:11px!important;
}
#modal .landing-mode.is-active{
  color:#eafcff!important;
  background:var(--c256-cyan-soft)!important;
  box-shadow:inset 0 0 0 1px rgba(114,230,246,.10)!important;
}
#modal .landing-mode-icon{color:var(--c256-cyan)!important}
#modal .landing-join-row{
  position:relative;
  z-index:4;
  width:min(520px,100%)!important;
  margin-top:20px!important;
  padding:5px!important;
  border:1px solid var(--c256-line)!important;
  background:rgba(9,13,20,.72)!important;
  border-radius:14px!important;
  backdrop-filter:blur(18px);
}
#modal .landing-join-input{
  height:45px!important;
  background:transparent!important;
  border:0!important;
  color:#e9f7fb!important;
  font-size:12px!important;
}
#modal .landing-join-input:focus{outline:none!important}
#modal .landing-join-button{
  height:45px!important;
  border-radius:10px!important;
  background:#101a23!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:#dff7fb!important;
  font-size:11px!important;
  font-weight:700!important;
}
#modal .landing-random{
  position:relative;
  z-index:4;
  margin-top:18px!important;
  border-color:rgba(165,139,255,.13)!important;
  background:rgba(165,139,255,.035)!important;
}
#modal .landing-proof{
  position:relative;
  z-index:4;
  color:#718292!important;
  margin-top:25px!important;
}
#modal .landing-proof span{gap:7px!important}
#modal .landing-proof span:first-child{color:#8497a7}
#modal .landing-secondary-content{
  max-width:960px!important;
  margin:30px auto 0!important;
  padding:65px 0 0!important;
  border-top:1px solid var(--c256-line)!important;
}
#modal .landing-secondary-content h2{
  max-width:720px!important;
  margin:0!important;
  font-size:clamp(30px,4vw,50px)!important;
  line-height:1!important;
  letter-spacing:-.05em!important;
}
#modal .landing-secondary-content>p{
  max-width:650px!important;
  color:#899bab!important;
  margin-top:17px!important;
}
#modal .c256-seo-grid{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:10px!important;
  margin-top:28px!important;
}
#modal .c256-seo-card{
  padding:24px!important;
  border:1px solid var(--c256-line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012))!important;
}
#modal .c256-seo-card b{
  color:var(--c256-cyan)!important;
  font-size:9px!important;
  letter-spacing:.16em!important;
}
#modal .c256-seo-card strong{
  display:block!important;
  margin-top:10px!important;
  font-size:15px!important;
}
#modal .c256-seo-card p{
  font-size:11px!important;
  color:#7f90a0!important;
  line-height:1.6!important;
}
@media(max-width:720px){
  #modal .landing-topline{padding:16px 15px 0!important}
  #modal .landing-security{display:none}
  #modal .landing-main{padding:20px 15px 55px!important}
  #modal .landing-hero{min-height:650px!important}
  #modal .landing-hero-copy h1{font-size:clamp(48px,15vw,72px)!important}
  #modal .landing-lead{font-size:14px!important}
  #modal .landing-start-button{min-width:0!important;width:100%!important}
  #modal .landing-mode{min-width:0!important;flex:1}
  #modal .landing-join-row{display:flex!important}
  #modal .landing-join-input{min-width:0!important}
  #modal .landing-join-button{white-space:nowrap!important}
  #modal .c256-seo-grid{grid-template-columns:1fr!important}
  #modal .landing-secondary-content{padding-top:45px!important}
}

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

/* Chat256 Random Final Candy UI — presentation only. */
:root{--rf-cyan:#35e7ff;--rf-violet:#a970ff;--rf-pink:#ff4acb;--rf-gold:#ffd45a}
body{background:radial-gradient(900px 560px at 8% 0%,rgba(53,231,255,.13),transparent 63%),radial-gradient(900px 620px at 96% 12%,rgba(169,112,255,.13),transparent 65%),radial-gradient(720px 520px at 55% 100%,rgba(255,74,203,.055),transparent 70%),#02050b!important}
.random-shell{max-width:1180px!important;padding:20px clamp(16px,4vw,46px)!important}
.random-nav{padding:6px 0 0!important}.random-brand img{filter:drop-shadow(0 0 18px rgba(53,231,255,.28))}.random-brand strong{font-size:21px!important}.random-secure{padding:7px 11px;border:1px solid rgba(53,231,255,.13);border-radius:999px;background:rgba(53,231,255,.035)}
.random-hero{max-width:980px!important;margin:clamp(50px,9vh,90px) auto 0!important}.random-badge{border-color:rgba(53,231,255,.20)!important;background:rgba(53,231,255,.055)!important;box-shadow:inset 0 1px rgba(255,255,255,.05)}
.random-hero h1{font-size:clamp(54px,8.5vw,100px)!important;line-height:.88!important}.random-hero h1 em{background:linear-gradient(100deg,#45eaff,#8f88ff 45%,#e16cff 72%,#ff83cf)!important;-webkit-background-clip:text!important;background-clip:text!important}
.random-hero>p{font-size:15px!important;color:#9bb0bf!important}
.random-actions{display:grid!important;grid-template-columns:1.25fr 1fr 1fr!important;max-width:900px!important;margin:28px auto 14px!important;gap:10px!important}.random-actions button{min-height:72px!important;border-radius:19px!important;border:1px solid rgba(255,255,255,.09)!important;box-shadow:0 16px 48px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.045)!important;font-weight:900!important}.random-actions .primary{background:linear-gradient(135deg,#35e7ff,#4c7dff 48%,#9b6cff)!important}.random-actions button:hover{transform:translateY(-3px)}
.random-card,.random-chat{max-width:900px!important;border-radius:20px!important;background:linear-gradient(145deg,rgba(12,23,39,.88),rgba(5,11,20,.92))!important;border-color:rgba(255,255,255,.08)!important;box-shadow:0 22px 70px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.03)!important}.random-status-dot{box-shadow:0 0 0 7px rgba(83,229,173,.07),0 0 28px rgba(83,229,173,.45)!important}
.random-controls{max-width:900px;margin:12px auto 0!important}.random-controls button{min-height:46px!important;border-radius:14px!important}.random-controls #random-report{border-color:rgba(255,200,61,.20)!important;color:#ffd66b!important;background:rgba(255,200,61,.045)!important}.random-controls #random-block{border-color:rgba(255,74,120,.22)!important;background:rgba(255,74,120,.055)!important}
.random-safety{max-width:900px!important;border-radius:16px!important;background:linear-gradient(100deg,rgba(83,229,173,.055),rgba(53,231,255,.025))!important;border-color:rgba(83,229,173,.17)!important}.random-safety:before{content:'✓';display:grid;place-items:center;width:25px;height:25px;border-radius:9px;background:rgba(83,229,173,.08);color:#72f0bd;font-weight:900}
.random-foot{font-size:10px!important}.random-foot a{color:#7feaff!important}
.random-age-gate{background:rgba(2,5,12,.88)!important}.random-age-card{border-color:rgba(53,231,255,.24)!important;box-shadow:0 35px 120px rgba(0,0,0,.62),0 0 70px rgba(53,231,255,.05)!important}.random-age-card h2{font-size:36px!important}.random-age-actions .primary{background:linear-gradient(135deg,#35e7ff,#4c7dff 52%,#9b6cff)!important}
@media(max-width:700px){.random-shell{padding:15px!important}.random-hero{margin-top:48px!important}.random-hero h1{font-size:clamp(46px,14vw,72px)!important}.random-actions{grid-template-columns:1fr!important;margin-top:22px!important}.random-actions button{min-height:64px!important}.random-age-card{padding:22px!important;border-radius:22px!important}.random-age-card h2{font-size:30px!important}}
@media(prefers-reduced-motion:reduce){.random-actions button:hover{transform:none!important}}

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

:root{color-scheme:dark;--c:#35e7ff;--v:#a970ff;--bg:#02050b;--p:#081321;--line:rgba(255,255,255,.09);--muted:#9ab0bf}*{box-sizing:border-box}body{margin:0;min-height:100dvh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#effaff;background:radial-gradient(800px 500px at 10% 0%,rgba(53,231,255,.11),transparent 65%),radial-gradient(800px 500px at 92% 18%,rgba(169,112,255,.10),transparent 65%),var(--bg)}main{width:min(900px,calc(100% - 28px));margin:0 auto;padding:28px 0 60px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:900;font-size:19px}.brand img{width:36px;height:36px;filter:drop-shadow(0 0 18px rgba(53,231,255,.25))}.eyebrow{margin-top:58px;color:#83edff;font-size:9px;font-weight:900;letter-spacing:.2em}.hero h1{font-size:clamp(42px,7vw,72px);line-height:.92;letter-spacing:-.075em;margin:14px 0}.hero h1 em{font-style:normal;background:linear-gradient(100deg,#45eaff,#9a82ff,#e06cff);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{max-width:720px;color:var(--muted);font-size:15px;line-height:1.65}.card{margin-top:22px;padding:22px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(9,22,37,.88),rgba(4,10,18,.94));box-shadow:0 24px 70px rgba(0,0,0,.28)}h2{font-size:20px;letter-spacing:-.025em;margin:0 0 9px}p,li{color:#a6b8c5;line-height:1.65;font-size:13px}ul{padding-left:20px}.back{display:inline-flex;margin-top:20px;padding:11px 14px;border:1px solid rgba(53,231,255,.2);border-radius:12px;color:#9ff2ff;text-decoration:none;background:rgba(53,231,255,.045)}small{color:#6f8798}@media(max-width:600px){main{padding-top:20px}.eyebrow{margin-top:42px}.card{padding:18px;border-radius:18px}}

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

body{margin:0;background:#060b14;color:#e8f1f5;font:16px/1.65 system-ui,-apple-system,Segoe UI,sans-serif}a{color:#7dd3fc}.wrap{max-width:1000px;margin:auto;padding:48px 22px}.brand{font-weight:800;letter-spacing:.08em;font-size:14px}.brand b{color:#7dd3fc}h1{font-size:clamp(38px,7vw,72px);line-height:1.02;margin:48px 0 20px;max-width:850px}h2{margin-top:48px}p,li{color:#aebfca}.hero{padding:40px 0 20px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}.card{border:1px solid #203140;background:#0b1320;border-radius:18px;padding:22px}.cta{display:inline-block;background:#e8f1f5;color:#06101a;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700;margin-top:14px}.nav{display:flex;gap:18px;flex-wrap:wrap}.small{font-size:13px;color:#718694}footer{margin-top:70px;padding-top:24px;border-top:1px solid #203140}

/* ============================================================
   CHAT256 — FINAL FRONT PAGE POLISH
   Mobile-safe hero typography + unified premium controls
   ============================================================ */

:root {
  --c256-ice: #f5fbff;
  --c256-ice-2: #dceff5;
  --c256-ink: #07131b;
  --c256-glass: rgba(10, 21, 30, .78);
  --c256-glass-2: rgba(17, 31, 42, .92);
  --c256-line: rgba(155, 226, 245, .18);
  --c256-line-strong: rgba(103, 226, 250, .48);
  --c256-cyan: #63e8ff;
}

/* Prevent the hero from ever creating horizontal page overflow. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Hero becomes a measured composition rather than a free-flowing
   oversized heading. */
.landing-hero-final {
  width: min(100%, 860px);
  max-width: calc(100% - 32px);
  margin-inline: auto;
  overflow: hidden;
  box-sizing: border-box;
}

/* The screenshot's clipping is caused by oversized heading geometry.
   Keep every line inside the actual content box. */
#landing-title {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;

  font-family:
    Inter,
    "SF Pro Display",
    "Segoe UI Variable",
    "Segoe UI",
    Roboto,
    ui-sans-serif,
    system-ui,
    -apple-system,
    sans-serif;

  font-weight: 850;
  letter-spacing: -.065em;
  line-height: .88;

  white-space: normal !important;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: balance;

  font-size: clamp(3.25rem, 8.5vw, 7.5rem);
}

/* Any decorative/title spans must inherit the safe geometry. */
#landing-title > *,
#landing-title span {
  max-width: 100%;
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   PRIMARY CTA
   ------------------------------------------------------------ */

.landing-start-button {
  position: relative;
  isolation: isolate;

  min-height: 72px;
  min-width: 44px;

  border: 1px solid rgba(255,255,255,.86);
  border-radius: 28px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f4fbfd 38%,
      #dff4f8 70%,
      #d3ecf4 100%
    );

  color: var(--c256-ink);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(118,170,188,.18),
    0 12px 34px rgba(0,0,0,.24),
    0 0 0 1px rgba(120,224,247,.08);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.landing-start-button::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.52),
      rgba(255,255,255,0) 34%
    );
}

.landing-start-button:hover {
  filter: brightness(1.025);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(118,170,188,.16),
    0 16px 40px rgba(0,0,0,.28),
    0 0 24px rgba(99,232,255,.10);
}

.landing-start-button:active {
  transform: translateY(1px) scale(.992);
}

/* ------------------------------------------------------------
   CHAT / CALL / SHARE MODE SWITCH
   One material system, with the active mode elevated.
   ------------------------------------------------------------ */

.landing-mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;

  padding: 7px;

  border: 1px solid rgba(150,205,224,.16);
  border-radius: 25px;

  background:
    linear-gradient(
      145deg,
      rgba(5,13,20,.88),
      rgba(10,21,30,.68)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 12px 32px rgba(0,0,0,.18);
}

.landing-mode-switch > * {
  min-width: 0;
  min-height: 54px;

  border: 1px solid var(--c256-line);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(26,42,53,.90),
      rgba(12,25,35,.90)
    );

  color: #b9cad5;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.28);

  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

/* Support the common active-state conventions already used by the app. */
.landing-mode-switch > .active,
.landing-mode-switch > [aria-selected="true"],
.landing-mode-switch > [aria-pressed="true"],
.landing-mode-switch > button:first-child {
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #eefaff 44%,
      #d5f2f7 100%
    );

  color: #07131b;

  border-color: rgba(255,255,255,.82);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(93,167,188,.18),
    0 5px 18px rgba(0,0,0,.20);
}

@media (hover: hover) and (pointer: fine) {
  .landing-mode-switch > *:hover {
    color: #effcff;
    border-color: var(--c256-line-strong);
    background:
      linear-gradient(
        145deg,
        rgba(30,53,66,.98),
        rgba(12,28,39,.98)
      );
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 7px 20px rgba(0,0,0,.18),
      0 0 18px rgba(99,232,255,.08);
  }

  .landing-mode-switch > .active:hover,
  .landing-mode-switch > [aria-selected="true"]:hover,
  .landing-mode-switch > [aria-pressed="true"]:hover,
  .landing-mode-switch > button:first-child:hover {
    color: #07131b;
    background:
      linear-gradient(
        135deg,
        #ffffff 0%,
        #f1fbff 48%,
        #d9f4f8 100%
      );
  }
}

.landing-mode-switch > *:active {
  transform: translateY(1px) scale(.985);
}

/* ------------------------------------------------------------
   JOIN CONTROL
   ------------------------------------------------------------ */

.landing-join-row {
  border: 1px solid rgba(150,205,224,.16);
  border-radius: 23px;

  background:
    linear-gradient(
      145deg,
      rgba(10,22,31,.86),
      rgba(8,17,25,.72)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 12px 30px rgba(0,0,0,.16);
}

.landing-join-row input {
  min-width: 0;
  color: #edfaff;
}

.landing-join-row input::placeholder {
  color: #91a6b5;
  opacity: 1;
}

.landing-join-row button,
.landing-join-row .landing-join-button {
  min-height: 52px;

  border: 1px solid rgba(116,208,230,.22);
  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(28,48,60,.98),
      rgba(14,29,39,.98)
    );

  color: #eafcff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -1px 0 rgba(0,0,0,.3);
}

@media (hover: hover) and (pointer: fine) {
  .landing-join-row button:hover,
  .landing-join-row .landing-join-button:hover {
    border-color: rgba(99,232,255,.48);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.09),
      0 0 20px rgba(99,232,255,.08);
  }
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 600px) {
  .landing-hero-final {
    width: 100%;
    max-width: calc(100% - 24px);
  }

  #landing-title {
    /*
     * Deliberately conservative.
     * At ~390px viewport width this keeps
     * "Communication" inside the hero rather than clipping it.
     */
    font-size: clamp(2.95rem, 11.9vw, 4.6rem);
    line-height: .89;
    letter-spacing: -.055em;
    max-width: 100%;
  }

  .landing-start-button {
    min-height: 68px;
    border-radius: 24px;
  }

  .landing-mode-switch {
    gap: 5px;
    padding: 6px;
    border-radius: 22px;
  }

  .landing-mode-switch > * {
    min-height: 50px;
    border-radius: 16px;
  }

  .landing-join-row {
    border-radius: 20px;
  }
}

@media (max-width: 360px) {
  #landing-title {
    font-size: clamp(2.72rem, 11.8vw, 4rem);
    letter-spacing: -.05em;
  }

  .landing-mode-switch > * {
    font-size: .9rem;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .landing-start-button,
  .landing-mode-switch > *,
  .landing-join-row button,
  .landing-join-row .landing-join-button {
    transition: none !important;
  }
}


/* ============================================================
   CHAT256 — LANDING MODE CONTROLS
   Unified tactile interaction layer
   ============================================================ */

.landing-mode-switch .landing-mode {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-width: 0;
  min-height: 52px;

  border: 1px solid rgba(145, 218, 238, .17);
  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(23, 42, 53, .90),
      rgba(9, 21, 30, .94)
    );

  color: #9db1be;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.34),
    0 3px 12px rgba(0,0,0,.12);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.landing-mode-switch .landing-mode::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,0) 42%
    );

  opacity: .8;
}

.landing-mode-switch .landing-mode::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 150%;
  left: -80%;
  top: -25%;

  pointer-events: none;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255,255,255,.12),
      transparent
    );

  transform: skewX(-18deg);
  opacity: 0;

  transition:
    left .55s ease,
    opacity .25s ease;
}

/* Active state = same premium material as the primary CTA. */
.landing-mode-switch .landing-mode.is-active,
.landing-mode-switch .landing-mode[aria-pressed="true"] {
  color: #07131b;

  border-color: rgba(255,255,255,.88);

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f2fbfe 42%,
      #d9f3f7 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(90,160,181,.16),
    0 7px 22px rgba(0,0,0,.22),
    0 0 22px rgba(99,232,255,.08);
}

.landing-mode-switch .landing-mode.is-active::before,
.landing-mode-switch .landing-mode[aria-pressed="true"]::before {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.62),
      rgba(255,255,255,0) 48%
    );
}

.landing-mode-switch .landing-mode.is-active .landing-mode-icon,
.landing-mode-switch .landing-mode[aria-pressed="true"] .landing-mode-icon {
  color: #0c91b1;
  filter:
    drop-shadow(0 0 5px rgba(99,232,255,.28));
}

/* All three illuminate on interaction. */
.landing-mode-switch .landing-mode:focus-visible {
  outline: 2px solid rgba(99,232,255,.82);
  outline-offset: 2px;

  border-color: rgba(99,232,255,.60);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 4px rgba(99,232,255,.08),
    0 0 24px rgba(99,232,255,.14);
}

@media (hover: hover) and (pointer: fine) {
  .landing-mode-switch .landing-mode:hover {
    color: #f1fbff;

    transform: translateY(-2px);

    border-color: rgba(99,232,255,.48);

    background:
      linear-gradient(
        145deg,
        rgba(30,56,69,.98),
        rgba(11,28,39,.98)
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 9px 25px rgba(0,0,0,.20),
      0 0 25px rgba(99,232,255,.10);
  }

  .landing-mode-switch .landing-mode:hover::after {
    left: 115%;
    opacity: 1;
  }

  .landing-mode-switch .landing-mode.is-active:hover,
  .landing-mode-switch .landing-mode[aria-pressed="true"]:hover {
    color: #07131b;

    background:
      linear-gradient(
        135deg,
        #ffffff 0%,
        #f3fcff 45%,
        #d9f4f8 100%
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      0 10px 28px rgba(0,0,0,.22),
      0 0 26px rgba(99,232,255,.12);
  }
}

.landing-mode-switch .landing-mode:active {
  transform: translateY(1px) scale(.975);
  filter: brightness(.985);
}

/* Make the entire mode icon respond with the button. */
.landing-mode-switch .landing-mode-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 20px;
  min-height: 20px;

  transition:
    color .18s ease,
    filter .18s ease,
    transform .18s ease;
}

.landing-mode-switch .landing-mode:hover .landing-mode-icon,
.landing-mode-switch .landing-mode:focus-visible .landing-mode-icon {
  filter: drop-shadow(0 0 7px rgba(99,232,255,.30));
  transform: scale(1.08);
}

/* Join gets the same tactile treatment. */
.landing-join-button {
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.landing-join-button:focus-visible {
  outline: 2px solid rgba(99,232,255,.78);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .landing-join-button:hover {
    transform: translateY(-1px);

    border-color: rgba(99,232,255,.48);

    background:
      linear-gradient(
        145deg,
        rgba(35,62,75,1),
        rgba(15,32,43,1)
      );

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 8px 22px rgba(0,0,0,.18),
      0 0 20px rgba(99,232,255,.09);
  }
}

.landing-join-button:active {
  transform: translateY(1px) scale(.98);
}

/* Small screens: preserve comfortable touch targets. */
@media (max-width: 600px) {
  .landing-mode-switch .landing-mode {
    min-height: 50px;
    min-width: 0;
  }

  .landing-mode-switch .landing-mode-icon {
    min-width: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-mode-switch .landing-mode,
  .landing-mode-switch .landing-mode::after,
  .landing-mode-switch .landing-mode-icon,
  .landing-join-button {
    transition: none !important;
  }
}


/* ============================================================
   CHAT256 — PREMIUM SPECTRAL MATERIAL SYSTEM v1
   Visual-only layer. Do not modify transport, crypto or WebRTC.
   ============================================================ */

/* ============================================================
   CHAT256 — PREMIUM SPECTRAL MATERIAL SYSTEM v1
   Visual-only layer. Do not modify transport, crypto or WebRTC.
   ============================================================ */
:root{
  --c256-spectrum-a:#5fe7ff;
  --c256-spectrum-b:#8c8cff;
  --c256-spectrum-c:#c879ff;
  --c256-ink:#050812;
  --c256-glass:rgba(10,14,26,.68);
  --c256-glass-strong:rgba(8,12,23,.84);
  --c256-glass-line:rgba(255,255,255,.105);
  --c256-glass-highlight:rgba(255,255,255,.16);
  --c256-spectrum:linear-gradient(110deg,var(--c256-spectrum-a) 0%,#7ca7ff 46%,var(--c256-spectrum-c) 100%);
  --c256-spectrum-soft:linear-gradient(110deg,rgba(95,231,255,.20),rgba(124,167,255,.13) 46%,rgba(200,121,255,.16));
}

#modal{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(760px 520px at var(--c256-mx,50%) var(--c256-my,15%),rgba(95,231,255,.095),transparent 64%),
    radial-gradient(720px 520px at 86% 84%,rgba(200,121,255,.075),transparent 68%),
    linear-gradient(180deg,#03050b 0%,#050811 46%,#03050a 100%);
}
#modal::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1px 1px at 18% 24%,rgba(255,255,255,.34),transparent 60%),
    radial-gradient(1px 1px at 76% 18%,rgba(255,255,255,.22),transparent 60%),
    radial-gradient(1px 1px at 64% 72%,rgba(255,255,255,.17),transparent 60%),
    linear-gradient(120deg,rgba(255,255,255,.022),transparent 34%,rgba(255,255,255,.012) 67%,transparent);
  opacity:.55;
}
#modal .landing-shell{
  width:min(1380px,100%);
  padding:18px clamp(18px,4vw,52px) 30px;
}
#modal .landing-shell::before{
  background:
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.020) 1px,transparent 1px);
  background-size:92px 92px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.42),transparent 78%);
  opacity:.72;
}
#modal .landing-topline{
  max-width:1240px;padding:12px 0 17px;border-bottom-color:rgba(160,190,255,.095);
}
#modal .landing-brand .brand-mark{filter:drop-shadow(0 0 22px rgba(95,231,255,.18));}
#modal .landing-security{color:#7e8ea5;}
#modal .landing-security-dot{
  background:#6df0bc;
  box-shadow:0 0 0 4px rgba(109,240,188,.055),0 0 18px rgba(109,240,188,.30);
}
#modal .landing-hero-final{
  min-height:calc(100svh - 82px);
  padding:clamp(52px,8vh,96px) 0 30px;
  justify-content:center;
}
#modal .landing-hero-copy{max-width:860px;}
#modal .landing-eyebrow{
  color:#8798b0!important;
  letter-spacing:.24em!important;
}
#modal .landing-eyebrow::before{
  box-shadow:0 0 18px rgba(95,231,255,.72)!important;
}
#modal .landing-hero-final h1{
  max-width:880px!important;
  font-size:clamp(56px,7.2vw,104px)!important;
  line-height:.88!important;
  letter-spacing:-.082em!important;
  text-wrap:balance;
  text-shadow:0 22px 90px rgba(95,231,255,.055);
}
#modal .landing-hero-final h1 em{
  background:var(--c256-spectrum)!important;
  background-size:180% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  filter:drop-shadow(0 12px 34px rgba(125,148,255,.12));
}
#modal .landing-hero-final .landing-lead{
  max-width:570px!important;
  margin-top:19px!important;
  color:#9aa9bc!important;
  font-size:15px!important;
  line-height:1.55!important;
  white-space:pre-line;
}
#modal .landing-primary-action{margin-top:31px;}
#modal .landing-start-button{
  position:relative;overflow:hidden;
  width:min(520px,92vw)!important;height:66px!important;
  padding:7px 8px 7px 25px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:20px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.035)) padding-box,
    var(--c256-spectrum) border-box!important;
  box-shadow:
    0 18px 60px rgba(0,0,0,.34),
    0 0 48px rgba(95,231,255,.10),
    inset 0 1px 0 rgba(255,255,255,.24)!important;
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
#modal .landing-start-button::before{
  content:"";position:absolute;inset:1px 34% 1px 1px;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.18),transparent 72%);
  opacity:.72;
}
#modal .landing-start-button span{position:relative;z-index:1;font-size:15px!important;font-weight:760!important;letter-spacing:-.01em;}
#modal .landing-start-button b{
  position:relative;z-index:1;width:50px!important;height:50px!important;
  border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(135deg,rgba(95,231,255,.95),rgba(124,167,255,.92) 48%,rgba(200,121,255,.90));
  box-shadow:0 8px 26px rgba(95,130,255,.25),inset 0 1px rgba(255,255,255,.48);
}
#modal .landing-start-button:hover{
  transform:translateY(-3px)!important;
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 24px 72px rgba(0,0,0,.40),0 0 70px rgba(112,145,255,.18),inset 0 1px rgba(255,255,255,.30)!important;
}
#modal .landing-start-button:focus-visible{
  outline:2px solid rgba(112,226,255,.88);outline-offset:4px;
}
#modal .landing-mode-switch{
  width:min(520px,92vw)!important;height:60px!important;margin-top:14px!important;padding:5px!important;
  border:1px solid rgba(165,190,230,.16)!important;
  background:rgba(7,10,20,.56)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 16px 44px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(22px) saturate(130%);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
}
#modal .landing-mode{position:relative;height:50px!important;color:#8d9bb0!important;font-weight:720!important;}
#modal .landing-mode::before{
  content:"";position:absolute;inset:2px;border-radius:14px;opacity:0;
  background:var(--c256-spectrum-soft);box-shadow:inset 0 1px rgba(255,255,255,.12),0 0 28px rgba(116,145,255,.08);
  transition:opacity .18s ease;
}
#modal .landing-mode>*{position:relative;z-index:1;}
#modal .landing-mode:hover{color:#eef5ff!important;}
#modal .landing-mode.is-active{
  color:#f8fbff!important;
  background:transparent!important;
  box-shadow:none!important;
}
#modal .landing-mode.is-active::before{opacity:1;}
#modal .landing-mode-icon{display:grid;place-items:center;width:25px;height:25px;font-size:0;color:#72e8ff!important;}
#modal .landing-mode-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px currentColor);}
#modal .landing-mode:nth-child(2) .landing-mode-icon{color:#9fa7ff!important;}
#modal .landing-mode:nth-child(3) .landing-mode-icon{color:#d08aff!important;}
#modal .landing-join-row{
  width:min(520px,92vw)!important;height:58px!important;margin-top:12px!important;padding:5px!important;
  border:1px solid rgba(165,190,230,.13)!important;border-radius:18px!important;
  background:rgba(6,10,19,.60)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 14px 38px rgba(0,0,0,.20)!important;
  backdrop-filter:blur(20px) saturate(125%);-webkit-backdrop-filter:blur(20px) saturate(125%);
}
#modal .landing-join-row:focus-within{
  border-color:rgba(95,231,255,.36)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 0 0 3px rgba(95,231,255,.055),0 18px 46px rgba(0,0,0,.26)!important;
}
#modal .landing-join-input{font-size:13px!important;color:#eef5ff!important;}
#modal .landing-join-input::placeholder{color:#728197!important;}
#modal .landing-join-button{
  background:linear-gradient(135deg,rgba(255,255,255,.105),rgba(255,255,255,.045))!important;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px rgba(255,255,255,.07);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
#modal .landing-join-button:hover{background:var(--c256-spectrum-soft)!important;box-shadow:0 8px 28px rgba(110,137,255,.12);transform:translateY(-1px);}
#modal .landing-random{
  margin-top:14px!important;padding:8px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.018);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
#modal .landing-random:hover{transform:translateY(-1px);border-color:rgba(181,145,255,.22);background:rgba(181,145,255,.055);}
#modal .landing-proof{margin-top:25px!important;color:#73839a!important;}
#modal .landing-proof i{color:#78e9ff!important;text-shadow:0 0 12px rgba(95,231,255,.35);}
#modal .landing-hero-orbit{opacity:.72;mix-blend-mode:screen;}
#modal .landing-hero-orbit-a{border-color:rgba(95,231,255,.20);box-shadow:0 0 110px rgba(95,231,255,.06);}
#modal .landing-hero-orbit-b{border-color:rgba(200,121,255,.18);box-shadow:0 -12px 110px rgba(180,121,255,.06);}
#modal .landing-hero-glow{
  width:620px;height:620px;
  background:radial-gradient(circle,rgba(95,231,255,.12),rgba(124,167,255,.055) 34%,rgba(200,121,255,.035) 50%,transparent 72%);
  filter:blur(5px);
}
#modal .landing-secondary-content{max-width:1080px!important;padding-top:86px!important;}
#modal .landing-secondary-content h2{color:#f3f7ff!important;}
#modal .landing-secondary-content>p{color:#8998ad!important;}
#modal .c256-seo-card{
  position:relative;overflow:hidden;
  border-color:rgba(255,255,255,.075)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) padding-box,
    linear-gradient(135deg,rgba(95,231,255,.20),rgba(124,167,255,.04) 45%,rgba(200,121,255,.16)) border-box!important;
  box-shadow:inset 0 1px rgba(255,255,255,.055),0 22px 60px rgba(0,0,0,.18)!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#modal .c256-seo-card:hover{transform:translateY(-3px);border-color:rgba(135,170,255,.20)!important;box-shadow:inset 0 1px rgba(255,255,255,.07),0 28px 70px rgba(0,0,0,.25)!important;}
#modal .c256-seo-card b{background:var(--c256-spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;}
#modal .c256-seo-links a{transition:background .18s ease,border-color .18s ease,color .18s ease;}
#modal .c256-seo-links a:hover{background:rgba(95,231,255,.055);border-color:rgba(95,231,255,.18);color:#eaf5ff;}
@media(max-width:760px){
  #modal .landing-hero-final{min-height:calc(100svh - 58px);padding:38px 0 18px;}
  #modal .landing-hero-final h1{font-size:clamp(45px,13vw,68px)!important;line-height:.91!important;}
  #modal .landing-hero-final .landing-lead{font-size:13px!important;max-width:340px!important;}
  #modal .landing-start-button{height:60px!important;border-radius:18px!important;padding-left:18px!important;}
  #modal .landing-start-button b{width:46px!important;height:46px!important;}
  #modal .landing-mode-switch{height:54px!important;}
  #modal .landing-mode{height:44px!important;font-size:12px!important;}
  #modal .landing-join-row{height:54px!important;}
  #modal .landing-proof{gap:9px!important;}
}
@media(prefers-reduced-motion:reduce){
  #modal .landing-start-button,#modal .landing-mode,#modal .landing-mode::before,#modal .landing-join-button,#modal .landing-random,#modal .c256-seo-card{transition:none!important;}
}

/* ---------- Security Centre v2: stable premium layout ---------- */
.c256-security-card{
  width:min(680px,calc(100vw - 28px))!important;
  max-height:min(760px,calc(100vh - 28px));
  overflow:auto;
  padding:30px!important;
  border:1px solid rgba(132,214,255,.16)!important;
  background:
    radial-gradient(520px 260px at 12% 0,rgba(78,220,255,.075),transparent 68%),
    radial-gradient(460px 280px at 100% 100%,rgba(153,112,255,.07),transparent 68%),
    linear-gradient(165deg,rgba(12,24,40,.985),rgba(5,11,20,.985))!important;
  box-shadow:0 40px 120px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.018) inset!important;
}
.c256-security-card::-webkit-scrollbar{width:7px}.c256-security-card::-webkit-scrollbar-thumb{background:rgba(120,180,210,.18);border-radius:999px}
.c256-security-card .workspace-kicker{display:inline-flex;align-items:center;gap:7px;color:#7bdfff!important}
.c256-security-card .workspace-kicker:before{content:"";width:6px;height:6px;border-radius:50%;background:#63e8b0;box-shadow:0 0 14px rgba(99,232,176,.65)}
.c256-security-card h2{font-size:32px!important;line-height:1.02!important;margin:9px 48px 9px 0!important}
.c256-security-lead{max-width:590px;margin:0 0 20px!important;color:#8095a8!important;font-size:12px!important;line-height:1.65!important}
.c256-security-checks{display:grid;grid-template-columns:1fr 1fr;gap:9px!important}
.c256-security-check{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) auto!important;
  align-items:center!important;
  min-width:0;
  gap:11px!important;
  min-height:70px;
  padding:12px!important;
  border:1px solid rgba(130,190,220,.085)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.012))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
}
.c256-security-check:hover{border-color:rgba(105,224,255,.16)!important;background:linear-gradient(145deg,rgba(104,227,255,.045),rgba(255,255,255,.014))!important}
.c256-security-icon{
  display:grid!important;place-items:center!important;width:34px!important;height:34px!important;
  border-radius:11px!important;font-size:14px!important;font-weight:950!important;
}
.c256-security-icon.is-ok{color:#71e8b1!important;background:rgba(70,220,155,.09)!important;box-shadow:0 0 24px rgba(70,220,155,.07)}
.c256-security-icon.is-warn{color:#ffc578!important;background:rgba(255,177,87,.10)!important}
.c256-security-copy{display:grid!important;min-width:0!important;gap:3px!important}
.c256-security-copy strong{display:block!important;color:#e8f5fa!important;font-size:12px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.c256-security-copy small{display:block!important;margin:0!important;color:#6f8799!important;font-size:9px!important;line-height:1.45!important;white-space:normal!important}
.c256-security-badge{align-self:start;margin-top:1px;padding:4px 7px;border-radius:999px;font-size:7px;line-height:1;text-transform:uppercase;letter-spacing:.1em;font-weight:900;white-space:nowrap}
.c256-security-badge.is-ok{color:#75e6b0;background:rgba(70,220,155,.07);border:1px solid rgba(70,220,155,.12)}
.c256-security-badge.is-warn{color:#ffc578;background:rgba(255,177,87,.08);border:1px solid rgba(255,177,87,.14)}
.c256-security-foot{margin-top:16px!important;padding-top:15px!important;border-top:1px solid rgba(255,255,255,.065)!important}
.c256-security-foot span{display:flex;align-items:center;gap:7px;color:#668092!important;font-size:9px!important}
.c256-security-foot span:before{content:"";width:6px;height:6px;border-radius:50%;background:#63e8b0;box-shadow:0 0 10px rgba(99,232,176,.45)}
.c256-security-foot .secondary{min-height:36px!important}
@media(max-width:680px){
 .c256-security-centre{padding:10px!important}
 .c256-security-card{width:min(100%,680px)!important;max-height:calc(100vh - 20px);padding:21px!important;border-radius:22px!important}
 .c256-security-card h2{font-size:27px!important}
 .c256-security-checks{grid-template-columns:1fr!important}
 .c256-security-check{min-height:64px!important}
 .c256-security-foot{align-items:stretch!important;flex-direction:column!important}
 .c256-security-foot button{width:100%!important}
}

.c256-security-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.c256-security-principles>div{min-width:0;padding:11px 12px;border:1px solid rgba(255,255,255,.055);border-radius:13px;background:rgba(255,255,255,.014)}
.c256-security-principles strong{display:block;color:#dcebf1;font-size:9px;font-weight:850;letter-spacing:.01em}
.c256-security-principles span{display:block;margin-top:4px;color:#5f7687;font-size:8px;line-height:1.45}
@media(max-width:680px){.c256-security-principles{grid-template-columns:1fr}}

/* ---------- Landing hero refinement ---------- */
#modal .landing-hero-final{min-height:calc(100svh - 104px)!important;padding:34px 0 24px!important}
#modal .landing-hero-final h1{font-size:clamp(54px,6.7vw,94px)!important;line-height:.9!important}
#modal .landing-hero-final .landing-lead{margin-top:15px!important}
#modal .landing-primary-action{margin-top:26px!important}
#modal .landing-start-button{box-shadow:0 18px 58px rgba(0,0,0,.34),0 0 38px rgba(95,231,255,.075),inset 0 1px 0 rgba(255,255,255,.24)!important}
#modal .landing-mode-switch{box-shadow:0 18px 55px rgba(0,0,0,.20),inset 0 1px rgba(255,255,255,.03)!important}
#modal .landing-proof{opacity:.88}
@media(max-width:760px){#modal .landing-hero-final{min-height:calc(100svh - 78px)!important;padding:24px 0 18px!important}#modal .landing-hero-final h1{font-size:clamp(44px,12.4vw,72px)!important}}


/* ---------- Day-one polish: security + mobile landing stability ---------- */
.c256-security-card .c256-security-check > span.c256-security-copy{
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  place-items:stretch!important;
  font-size:inherit!important;
  font-weight:inherit!important;
}
.c256-security-card .c256-security-check > span.c256-security-icon{
  flex:none!important;
}
.c256-security-checks{align-items:stretch!important}
.c256-security-check{overflow:hidden!important}
.c256-security-copy strong{max-width:100%!important}
.c256-security-copy small{max-width:100%!important}
.c256-security-badge{justify-self:end!important}
.c256-security-note{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:12px;padding:12px 13px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:14px;
  background:rgba(255,255,255,.018);
  color:#708596;font-size:9px;line-height:1.55;
}
.c256-security-note strong{color:#cbdbe5;font-weight:800}
.c256-security-note .dot{flex:none;width:7px;height:7px;margin-top:4px;border-radius:50%;background:#72e3ff;box-shadow:0 0 12px rgba(114,227,255,.45)}
.c256-security-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.c256-security-meta span{padding:5px 8px;border:1px solid rgba(255,255,255,.05);border-radius:999px;background:rgba(255,255,255,.012);color:#718494;font-size:8px;font-weight:750;letter-spacing:.02em}
@media(max-width:680px){
  .c256-security-card{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 20px)!important;padding:19px!important}
  .c256-security-card h2{font-size:28px!important}
  .c256-security-lead{font-size:11px!important;line-height:1.55!important;margin-bottom:14px!important}
  .c256-security-check{grid-template-columns:32px minmax(0,1fr) auto!important;gap:9px!important;min-height:62px!important;padding:10px!important}
  .c256-security-icon{width:32px!important;height:32px!important}
  .c256-security-copy strong{font-size:11px!important}
  .c256-security-copy small{font-size:8.5px!important}
  .c256-security-badge{font-size:6.5px!important;padding:4px 6px!important}
  .c256-security-principles{gap:7px!important}
  .c256-security-principles>div{padding:10px!important}
}

#modal,
#modal .landing-shell,
#modal .landing-main{max-width:100vw!important;box-sizing:border-box}
#modal{overflow-x:clip!important}
#modal .landing-shell{overflow-x:clip!important}
@media(max-width:760px){
  #modal .landing-shell{width:100%!important;padding-left:max(16px,env(safe-area-inset-left))!important;padding-right:max(16px,env(safe-area-inset-right))!important;padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}
  #modal .landing-main{width:100%!important;min-width:0!important}
  #modal .landing-hero-final{width:100%!important;max-width:430px!important;min-height:auto!important;padding:22px 0 16px!important;justify-content:flex-start!important}
  #modal .landing-hero-final h1{width:100%!important;max-width:350px!important;font-size:clamp(45px,12.7vw,58px)!important;line-height:.92!important;margin-top:17px!important}
  #modal .landing-hero-final .landing-lead{width:100%!important;max-width:340px!important;font-size:13px!important;line-height:1.48!important;margin-top:15px!important}
  #modal .landing-primary-action{width:100%!important;margin-top:21px!important}
  #modal .landing-start-button{width:100%!important;max-width:100%!important;min-width:0!important;height:58px!important;padding:5px 7px 5px 18px!important;border-radius:18px!important;font-size:15px!important;box-sizing:border-box!important}
  #modal .landing-start-button b{width:46px!important;height:46px!important;flex:none!important}
  #modal .landing-mode-switch{width:100%!important;max-width:100%!important;height:54px!important;margin-top:10px!important;padding:4px!important;border-radius:17px!important;box-sizing:border-box!important}
  #modal .landing-mode{min-width:0!important;height:44px!important;border-radius:13px!important;font-size:11.5px!important}
  #modal .landing-mode-icon{width:21px!important;height:21px!important;flex:none!important}
  #modal .landing-join-row{width:100%!important;max-width:100%!important;height:54px!important;margin-top:10px!important;padding:4px!important;border-radius:16px!important;box-sizing:border-box!important}
  #modal .landing-join-input{min-width:0!important;width:auto!important;flex:1 1 auto!important;font-size:12px!important;padding:0 9px!important}
  #modal .landing-join-button{flex:0 0 auto!important;height:44px!important;padding:0 11px!important;font-size:10.5px!important;border-radius:11px!important}
  #modal .landing-random{max-width:100%!important;margin-top:12px!important;padding:8px 11px!important}
  #modal .landing-proof{max-width:100%!important;flex-wrap:wrap!important;justify-content:center!important;margin-top:20px!important}
  #modal .landing-hero-orbit-a{width:520px!important;height:520px!important;left:-300px!important;top:-160px!important;opacity:.42!important}
  #modal .landing-hero-orbit-b{width:600px!important;height:260px!important;bottom:-190px!important;opacity:.38!important}
  #modal .landing-hero-glow{width:300px!important;height:300px!important;top:42%!important;opacity:.65!important}
  #modal .landing-secondary-content{width:100%!important;max-width:430px!important;padding:54px 0 44px!important}
  #modal .landing-secondary-content h2{font-size:30px!important}
}
@media(max-width:360px){
  #modal .landing-shell{padding-left:13px!important;padding-right:13px!important}
  #modal .landing-hero-final h1{font-size:43px!important}
  #modal .landing-hero-final .landing-lead{font-size:12px!important}
  #modal .landing-mode{font-size:10.5px!important;gap:4px!important}
  #modal .landing-join-button{padding-inline:9px!important;font-size:10px!important}
}


/* ============================================================
   CHAT256 — FINAL FRONT-END POLISH V2
   Mobile-first composition, spectral atmosphere and tactile UI.
   Visual/UI only. No crypto, transport or WebRTC behavior.
   ============================================================ */

#modal{
  overflow-x:clip!important;
  overscroll-behavior-x:none;
  background:
    radial-gradient(900px 620px at 8% 8%,rgba(48,202,255,.105),transparent 66%),
    radial-gradient(820px 620px at 94% 28%,rgba(156,105,255,.095),transparent 68%),
    radial-gradient(760px 500px at 48% 100%,rgba(73,116,255,.065),transparent 72%),
    #03060d!important;
}

#modal::after{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:0;
  pointer-events:none;
  opacity:.42;
  background:
    conic-gradient(from 210deg at 50% 42%,
      transparent 0deg,
      rgba(74,214,255,.055) 55deg,
      transparent 105deg,
      rgba(177,113,255,.055) 190deg,
      transparent 250deg,
      rgba(74,214,255,.035) 310deg,
      transparent 360deg);
  filter:blur(42px);
  animation:c256Aurora 22s linear infinite;
}

#modal .landing-shell{
  position:relative;
  z-index:1;
  width:min(1380px,100%)!important;
  min-height:100svh;
  padding-top:14px!important;
  background:
    radial-gradient(520px 380px at 50% 38%,rgba(72,206,255,.055),transparent 70%),
    radial-gradient(480px 420px at 82% 74%,rgba(177,105,255,.045),transparent 72%),
    linear-gradient(180deg,rgba(3,7,14,.98),rgba(4,7,14,.96))!important;
}

#modal .landing-shell::before{
  background-image:
    linear-gradient(rgba(122,174,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(122,174,255,.022) 1px,transparent 1px);
  background-size:78px 78px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.50),transparent 74%);
  opacity:.62;
}

#modal .landing-topline{
  position:relative;
  z-index:8;
  min-height:44px!important;
  padding:9px 0 14px!important;
  border-bottom:1px solid rgba(145,190,235,.09)!important;
}

#modal .landing-brand{
  filter:drop-shadow(0 8px 28px rgba(67,213,255,.08));
}

#modal .landing-brand .brand-mark{
  width:31px!important;
  height:31px!important;
  filter:drop-shadow(0 0 19px rgba(95,231,255,.28))!important;
}

#modal .landing-brand .brand-wordmark{
  font-size:17px!important;
  letter-spacing:.18em!important;
}

#modal .landing-security{
  color:#8190a6!important;
  padding:7px 11px!important;
  border:1px solid rgba(147,185,224,.10)!important;
  background:rgba(8,15,26,.42)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035)!important;
}

#modal .landing-main{
  position:relative;
  z-index:2;
  padding-top:0!important;
}

#modal .landing-hero-final{
  position:relative;
  width:min(860px,100%)!important;
  min-height:0!important;
  height:auto!important;
  padding:clamp(36px,7vh,76px) 0 12px!important;
  justify-content:flex-start!important;
}

#modal .landing-hero-final::before{
  content:"";
  position:absolute;
  width:min(680px,92vw);
  height:min(680px,92vw);
  left:50%;
  top:40%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(95,231,255,.075);
  box-shadow:
    0 0 90px rgba(95,231,255,.045),
    inset 0 0 120px rgba(95,231,255,.025);
  pointer-events:none;
  z-index:0;
}

#modal .landing-hero-copy{
  position:relative;
  z-index:3;
}

#modal .landing-eyebrow{
  font-size:9px!important;
  letter-spacing:.27em!important;
  color:#91a4bc!important;
}

#modal .landing-eyebrow::before{
  width:6px!important;
  height:6px!important;
  box-shadow:
    0 0 8px rgba(95,231,255,.85),
    0 0 22px rgba(95,231,255,.35)!important;
}

#modal .landing-hero-final h1{
  max-width:900px!important;
  margin-top:19px!important;
  font-size:clamp(52px,7.25vw,100px)!important;
  line-height:.90!important;
  letter-spacing:-.078em!important;
  text-shadow:0 22px 80px rgba(70,180,255,.06);
}

#modal .landing-hero-final h1 em{
  background:
    linear-gradient(102deg,#5fe7ff 0%,#72b9ff 38%,#9b8dff 68%,#d078ff 100%)!important;
  background-size:180% 100%!important;
  animation:c256GradientShift 11s ease-in-out infinite alternate;
  filter:drop-shadow(0 13px 32px rgba(116,129,255,.11));
}

#modal .landing-hero-final .landing-lead{
  max-width:560px!important;
  margin-top:17px!important;
  font-size:15px!important;
  line-height:1.5!important;
  color:#9baabe!important;
}

#modal .landing-primary-action{
  position:relative;
  z-index:5;
  margin-top:24px!important;
}

#modal .landing-start-button{
  width:min(520px,92vw)!important;
  min-width:0!important;
  height:64px!important;
  padding:6px 7px 6px 23px!important;
  border-radius:19px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.115),rgba(255,255,255,.025)) padding-box,
    linear-gradient(105deg,#5fe7ff,#819cff 50%,#c879ff) border-box!important;
  border:1px solid transparent!important;
  box-shadow:
    0 20px 58px rgba(0,0,0,.36),
    0 0 52px rgba(95,231,255,.085),
    inset 0 1px rgba(255,255,255,.20)!important;
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
}

#modal .landing-start-button::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.17) 48%,transparent 70%);
  transform:translateX(-115%);
  pointer-events:none;
  animation:c256ButtonSweep 7s ease-in-out infinite;
}

#modal .landing-start-button span{
  position:relative;
  z-index:2;
  font-size:15px!important;
  font-weight:780!important;
}

#modal .landing-start-button b{
  position:relative;
  z-index:2;
  width:50px!important;
  height:50px!important;
  border-radius:15px!important;
  background:
    linear-gradient(135deg,#61e8ff,#829aff 50%,#bd7cff)!important;
  box-shadow:
    0 8px 28px rgba(104,125,255,.27),
    inset 0 1px rgba(255,255,255,.42)!important;
}

#modal .landing-start-button:hover{
  transform:translateY(-3px)!important;
  box-shadow:
    0 25px 76px rgba(0,0,0,.42),
    0 0 74px rgba(102,143,255,.18),
    inset 0 1px rgba(255,255,255,.27)!important;
}

#modal .landing-mode-switch{
  position:relative;
  z-index:5;
  width:min(520px,92vw)!important;
  height:57px!important;
  margin-top:10px!important;
  padding:5px!important;
  gap:5px!important;
  border-radius:19px!important;
  border:1px solid rgba(157,191,225,.14)!important;
  background:rgba(5,10,19,.68)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.055),
    0 15px 42px rgba(0,0,0,.23)!important;
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
}

#modal .landing-mode-switch .landing-mode{
  position:relative;
  height:47px!important;
  min-height:47px!important;
  border-radius:14px!important;
  color:#8493a8!important;
  background:transparent!important;
  border:1px solid transparent!important;
  font-size:12px!important;
}

#modal .landing-mode-switch .landing-mode.is-active{
  color:#f4fbff!important;
  background:
    linear-gradient(135deg,rgba(95,231,255,.13),rgba(124,167,255,.08) 50%,rgba(200,121,255,.10))!important;
  border-color:rgba(121,210,255,.13)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.10),
    0 5px 20px rgba(0,0,0,.15)!important;
}

#modal .landing-mode-switch .landing-mode:hover{
  color:#f2f8ff!important;
  background:rgba(255,255,255,.045)!important;
}

#modal .landing-mode-switch .landing-mode.is-active:hover{
  background:
    linear-gradient(135deg,rgba(95,231,255,.16),rgba(124,167,255,.10),rgba(200,121,255,.13))!important;
}

#modal .landing-mode-icon{
  width:22px!important;
  height:22px!important;
  filter:drop-shadow(0 0 7px currentColor);
}

#modal .landing-mode-icon svg{
  width:18px!important;
  height:18px!important;
}

#modal .landing-join-row{
  position:relative;
  z-index:5;
  width:min(520px,92vw)!important;
  height:55px!important;
  margin-top:9px!important;
  padding:4px!important;
  border-radius:17px!important;
  border:1px solid rgba(157,191,225,.12)!important;
  background:rgba(5,10,18,.70)!important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.05),
    0 13px 38px rgba(0,0,0,.20)!important;
}

#modal .landing-join-input{
  height:45px!important;
  font-size:12px!important;
}

#modal .landing-join-button{
  height:45px!important;
  min-height:45px!important;
  padding:0 15px!important;
  border-radius:13px!important;
  font-size:11px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important;
}

#modal .landing-random{
  z-index:5;
  margin-top:10px!important;
  min-height:32px;
  padding:7px 12px!important;
  border:1px solid rgba(181,145,255,.11)!important;
  border-radius:999px!important;
  background:rgba(147,107,255,.028)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025)!important;
}

#modal .landing-random strong{
  color:#dce8f4!important;
}

#modal .landing-random span:not(.landing-random-dot){
  color:#77879b!important;
}

#modal .landing-random:hover{
  background:rgba(157,113,255,.065)!important;
  border-color:rgba(181,145,255,.24)!important;
}

#modal .landing-proof{
  position:relative;
  z-index:5;
  width:min(520px,92vw);
  margin-top:16px!important;
  padding:8px 10px!important;
  border:1px solid rgba(151,190,225,.065);
  border-radius:999px;
  background:rgba(255,255,255,.012);
  gap:12px!important;
  color:#718399!important;
  font-size:8.5px!important;
}

#modal .landing-proof span{
  gap:5px!important;
}

#modal .landing-proof i{
  font-size:10px!important;
  color:#70e8ff!important;
  text-shadow:0 0 10px rgba(95,231,255,.3);
}

#modal .landing-secondary-content{
  position:relative;
  z-index:2;
  margin-top:34px!important;
  padding-top:70px!important;
  border-top:1px solid rgba(157,190,225,.08)!important;
}

/* Security Centre: make the new diagnostics language feel native. */
.c256-security-card .c256-security-copy strong{
  letter-spacing:-.01em!important;
}

.c256-security-card .c256-security-note{
  background:
    linear-gradient(135deg,rgba(95,231,255,.025),rgba(200,121,255,.018))!important;
}

@keyframes c256Aurora{
  0%,100%{transform:rotate(0deg) scale(1);}
  50%{transform:rotate(7deg) scale(1.035);}
}
@keyframes c256GradientShift{
  0%{background-position:0% 50%;}
  100%{background-position:100% 50%;}
}
@keyframes c256ButtonSweep{
  0%,55%,100%{transform:translateX(-115%);opacity:0;}
  64%{opacity:.75;}
  78%{transform:translateX(115%);opacity:0;}
}

@media(max-width:760px){
  #modal .landing-shell{
    min-height:100svh!important;
    padding:
      max(8px,env(safe-area-inset-top))
      max(13px,env(safe-area-inset-right))
      calc(12px + env(safe-area-inset-bottom))
      max(13px,env(safe-area-inset-left))!important;
  }

  #modal .landing-topline{
    min-height:39px!important;
    padding:7px 3px 10px!important;
  }

  #modal .landing-brand .brand-mark{
    width:28px!important;
    height:28px!important;
  }

  #modal .landing-brand .brand-wordmark{
    font-size:15px!important;
  }

  #modal .landing-security{display:none!important;}

  #modal .landing-hero-final{
    width:100%!important;
    max-width:430px!important;
    min-height:0!important;
    padding:23px 0 5px!important;
    justify-content:flex-start!important;
  }

  #modal .landing-hero-final::before{
    width:510px;
    height:510px;
    top:42%;
    opacity:.7;
  }

  #modal .landing-eyebrow{
    font-size:8px!important;
    letter-spacing:.23em!important;
  }

  #modal .landing-hero-final h1{
    width:100%!important;
    max-width:355px!important;
    margin-top:15px!important;
    font-size:clamp(43px,12.5vw,57px)!important;
    line-height:.91!important;
    letter-spacing:-.067em!important;
  }

  #modal .landing-hero-final .landing-lead{
    max-width:330px!important;
    margin-top:13px!important;
    font-size:12.5px!important;
    line-height:1.47!important;
  }

  #modal .landing-primary-action{
    width:100%!important;
    margin-top:18px!important;
  }

  #modal .landing-start-button{
    width:100%!important;
    height:58px!important;
    min-height:58px!important;
    padding-left:17px!important;
    border-radius:17px!important;
    font-size:14px!important;
  }

  #modal .landing-start-button b{
    width:46px!important;
    height:46px!important;
    border-radius:13px!important;
  }

  #modal .landing-mode-switch{
    width:100%!important;
    height:52px!important;
    margin-top:8px!important;
    padding:4px!important;
    border-radius:17px!important;
  }

  #modal .landing-mode-switch .landing-mode{
    height:44px!important;
    min-height:44px!important;
    border-radius:13px!important;
    font-size:11px!important;
    gap:5px!important;
  }

  #modal .landing-mode-icon{
    width:20px!important;
    height:20px!important;
  }

  #modal .landing-mode-icon svg{
    width:17px!important;
    height:17px!important;
  }

  #modal .landing-join-row{
    width:100%!important;
    height:52px!important;
    margin-top:7px!important;
    border-radius:15px!important;
  }

  #modal .landing-join-input{
    height:42px!important;
    padding:0 9px!important;
    font-size:11.5px!important;
  }

  #modal .landing-join-button{
    height:42px!important;
    min-height:42px!important;
    padding:0 10px!important;
    border-radius:11px!important;
    font-size:10px!important;
  }

  #modal .landing-random{
    max-width:100%!important;
    margin-top:8px!important;
    min-height:30px!important;
    padding:6px 10px!important;
    font-size:10.5px!important;
  }

  #modal .landing-proof{
    width:100%!important;
    max-width:430px!important;
    margin-top:12px!important;
    padding:7px 8px!important;
    gap:7px!important;
    font-size:7.6px!important;
    flex-wrap:wrap!important;
  }

  #modal .landing-proof span:not(:last-child)::after{
    content:"";
    width:1px;
    height:9px;
    margin-left:5px;
    background:rgba(255,255,255,.11);
  }

  #modal .landing-secondary-content{
    margin-top:26px!important;
    padding-top:52px!important;
  }

  #modal .landing-hero-orbit-a{
    width:540px!important;
    height:540px!important;
    left:-310px!important;
    top:-165px!important;
    opacity:.34!important;
  }

  #modal .landing-hero-orbit-b{
    width:650px!important;
    height:280px!important;
    bottom:-225px!important;
    opacity:.32!important;
  }

  #modal .landing-hero-glow{
    width:340px!important;
    height:340px!important;
    top:43%!important;
    opacity:.48!important;
  }
}

@media(max-width:390px){
  #modal .landing-hero-final h1{
    max-width:330px!important;
    font-size:clamp(41px,12.2vw,52px)!important;
  }

  #modal .landing-hero-final .landing-lead{
    max-width:310px!important;
    font-size:12px!important;
  }

  #modal .landing-start-button{
    height:56px!important;
    min-height:56px!important;
  }

  #modal .landing-start-button b{
    width:44px!important;
    height:44px!important;
  }

  #modal .landing-mode-switch{
    height:50px!important;
  }

  #modal .landing-mode-switch .landing-mode{
    height:42px!important;
    min-height:42px!important;
    font-size:10.5px!important;
  }

  #modal .landing-join-row{
    height:50px!important;
  }

  #modal .landing-join-input{
    height:40px!important;
    font-size:11px!important;
  }

  #modal .landing-join-button{
    height:40px!important;
    min-height:40px!important;
    padding:0 8px!important;
    font-size:9.5px!important;
  }

  #modal .landing-proof{
    font-size:7.2px!important;
  }
}

@media(max-height:720px) and (max-width:760px){
  #modal .landing-hero-final{padding-top:15px!important;}
  #modal .landing-hero-final h1{margin-top:12px!important;}
  #modal .landing-hero-final .landing-lead{margin-top:10px!important;}
  #modal .landing-primary-action{margin-top:14px!important;}
  #modal .landing-mode-switch{margin-top:6px!important;}
  #modal .landing-join-row{margin-top:5px!important;}
  #modal .landing-random{margin-top:6px!important;}
  #modal .landing-proof{margin-top:9px!important;}
}

@media(prefers-reduced-motion:reduce){
  #modal::after,
  #modal .landing-hero-final h1 em,
  #modal .landing-start-button::after{
    animation:none!important;
  }
}

/* ============================================================
   CHAT256 FINAL MOBILE LANDING CORRECTION
   ============================================================ */

/* Fix Safari/WebKit gradient headline rendering */
#modal .landing-hero-final h1 em{
  display:inline!important;
  background-image:linear-gradient(
    102deg,
    #5fe7ff 0%,
    #72b9ff 38%,
    #9b8dff 68%,
    #d078ff 100%
  )!important;
  background-size:180% 100%!important;
  background-position:0 50%!important;
  background-repeat:no-repeat!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  filter:drop-shadow(0 13px 32px rgba(116,129,255,.11));
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

#modal .landing-hero-final h1{
  overflow:visible!important;
  isolation:isolate;
}

/* Mobile first viewport */
@media (max-width:760px){

  #modal{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-x:none!important;
  }

  #modal .landing-shell{
    min-height:100svh!important;
    min-height:100dvh!important;
    height:auto!important;
    padding:
      calc(8px + env(safe-area-inset-top))
      16px
      calc(14px + env(safe-area-inset-bottom))
      !important;
    box-sizing:border-box!important;
  }

  #modal .landing-hero-final{
    width:100%!important;
    max-width:520px!important;
    min-height:calc(
      100svh
      - env(safe-area-inset-top)
      - env(safe-area-inset-bottom)
      - 50px
    )!important;
    margin:0 auto!important;
    padding:14px 0 10px!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }

  #modal .landing-hero-final h1{
    width:100%!important;
    max-width:355px!important;
    margin:12px auto 0!important;
    font-size:clamp(40px,11.5vw,56px)!important;
    line-height:.92!important;
    letter-spacing:-.065em!important;
    text-wrap:balance!important;
  }

  #modal .landing-hero-final .landing-lead{
    max-width:340px!important;
    margin:10px auto 0!important;
    font-size:12px!important;
    line-height:1.4!important;
  }

  #modal .landing-primary-action{
    width:100%!important;
    margin:14px 0 0!important;
  }

  #modal .landing-start-button{
    width:100%!important;
    height:54px!important;
    min-height:54px!important;
    padding:5px 6px 5px 17px!important;
    border-radius:17px!important;
    box-sizing:border-box!important;
  }

  #modal .landing-start-button b{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:13px!important;
  }

  #modal .landing-mode-switch{
    width:100%!important;
    height:48px!important;
    margin:7px 0 0!important;
    padding:4px!important;
    border-radius:17px!important;
    box-sizing:border-box!important;
  }

  #modal .landing-mode-switch .landing-mode{
    height:40px!important;
    min-height:40px!important;
    min-width:0!important;
    border-radius:13px!important;
    font-size:11px!important;
    gap:5px!important;
  }

  #modal .landing-join-row{
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    margin:6px 0 0!important;
    padding:4px!important;
    border-radius:16px!important;
    box-sizing:border-box!important;
  }

  #modal .landing-join-input{
    min-width:0!important;
    height:38px!important;
    font-size:10.5px!important;
    padding:0 10px!important;
  }

  #modal .landing-join-button{
    height:38px!important;
    min-height:38px!important;
    padding:0 9px!important;
    border-radius:12px!important;
    font-size:9.5px!important;
    white-space:nowrap!important;
  }

  #modal .landing-random{
    max-width:100%!important;
    min-height:36px!important;
    margin:5px auto 0!important;
    padding:6px 11px!important;
    border-radius:999px!important;
    font-size:10px!important;
  }

  #modal .landing-proof{
    width:100%!important;
    max-width:360px!important;
    margin:6px auto 0!important;
    padding-top:6px!important;
    gap:7px!important;
    font-size:6.7px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  #modal .landing-secondary-content{
    width:100%!important;
    max-width:520px!important;
    margin:0 auto!important;
    padding:
      22px
      0
      calc(18px + env(safe-area-inset-bottom))
      !important;
    box-sizing:border-box!important;
  }

  #modal .landing-secondary-content h2{
    font-size:clamp(28px,8vw,42px)!important;
    line-height:.97!important;
    letter-spacing:-.055em!important;
    margin-bottom:9px!important;
  }

  #modal .landing-secondary-content > p{
    font-size:11.5px!important;
    line-height:1.48!important;
    max-width:340px!important;
    margin-inline:auto!important;
  }

  #modal .c256-seo-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    margin-top:14px!important;
  }

  #modal .c256-seo-card{
    min-height:0!important;
    padding:14px!important;
    border-radius:16px!important;
  }

  #modal .c256-seo-card strong{
    font-size:13px!important;
  }

  #modal .c256-seo-card p{
    font-size:10px!important;
    line-height:1.42!important;
  }

  #modal .c256-seo-links{
    gap:5px!important;
    margin-top:9px!important;
  }

  #modal .c256-seo-links a{
    font-size:8.5px!important;
    padding:6px 8px!important;
  }

  #modal .c256-faq{
    margin-top:10px!important;
  }

  #modal .c256-faq summary{
    min-height:36px!important;
    font-size:9.5px!important;
  }

  #modal .landing-services-link{
    margin-top:10px!important;
    font-size:8.5px!important;
  }
}

/* Smaller phones */
@media (max-width:390px){

  #modal .landing-hero-final{
    padding-top:9px!important;
  }

  #modal .landing-hero-final h1{
    max-width:330px!important;
    font-size:clamp(38px,11.3vw,50px)!important;
  }

  #modal .landing-hero-final .landing-lead{
    max-width:315px!important;
    font-size:11.2px!important;
    margin-top:8px!important;
  }

  #modal .landing-primary-action{
    margin-top:11px!important;
  }

  #modal .landing-mode-switch{
    margin-top:5px!important;
  }

  #modal .landing-join-row{
    margin-top:5px!important;
  }

  #modal .landing-random{
    margin-top:4px!important;
  }

  #modal .landing-proof{
    margin-top:5px!important;
    font-size:6.4px!important;
  }
}

/* Short screens: compress instead of clipping */
@media (max-width:760px) and (max-height:720px){

  #modal .landing-hero-final{
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  #modal .landing-hero-final h1{
    margin-top:8px!important;
    font-size:clamp(37px,10.7vw,49px)!important;
  }

  #modal .landing-hero-final .landing-lead{
    margin-top:7px!important;
    font-size:10.8px!important;
  }

  #modal .landing-primary-action{
    margin-top:9px!important;
  }

  #modal .landing-mode-switch,
  #modal .landing-join-row{
    margin-top:4px!important;
  }

  #modal .landing-random{
    margin-top:3px!important;
  }

  #modal .landing-proof{
    margin-top:4px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #modal .landing-hero-final h1 em{
    animation:none!important;
  }
}


/* ============================================================
 CHAT256 FINAL LANDING MOBILE COMPOSITION FIX
 ============================================================ */

/* Restore natural document flow */
html,
body {
    min-height:100%;
    height:auto;
    overflow-x:hidden;
    overflow-y:auto!important;
}

/* Never trap the landing page */
body.c256-landing,
body:has(.landing-hero-final) {
    overflow-y:auto!important;
    height:auto!important;
}

/* Hero must breathe on mobile */
.landing-hero-final {
    min-height:100svh;
    height:auto!important;
    overflow:visible!important;
    display:flex;
    flex-direction:column;
}

/* Fix clipped gradient/text blocks */
.landing-hero-final h1,
.landing-hero-final h1 em {
    overflow:visible!important;
    max-width:100%;
}

.landing-hero-final h1 em {
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* Mobile first viewport */
@media(max-width:700px){

    .landing-hero-final {
        padding:
        clamp(28px,8vh,60px)
        18px
        40px;
    }

    .landing-hero-final h1 {
        font-size:clamp(2.1rem,10vw,3rem);
        line-height:1.04;
        margin-bottom:18px;
    }

    .landing-hero-final p {
        max-width:34rem;
        margin-left:auto;
        margin-right:auto;
    }

    .c256-quick-actions,
    .landing-actions,
    .landing-cta-row {
        width:100%;
    }

    .c256-quick-actions button,
    .landing-actions button {
        min-height:54px;
    }

}

/* Remove accidental fixed viewport locking */
section,
main {
    max-height:none!important;
}


/* ============================================================
   CHAT256 UI REPAIR
   2026-09-30
   Landing vertical flow + Account Centre mobile containment.
   No crypto, transport or WebRTC changes.
   ============================================================ */

/* ------------------------------------------------------------
   LANDING: restore document scrolling
   ------------------------------------------------------------ */

/*
 * The canonical landing layer previously set .landing-shell to
 * overflow:hidden. That clipped the secondary SEO/content area
 * even though #modal itself was scrollable.
 *
 * Horizontal clipping is retained; vertical flow is restored.
 */
#modal .landing-shell{
    overflow-x:clip!important;
    overflow-y:visible!important;
    height:auto!important;
    max-height:none!important;
}

/*
 * The modal is the single landing scroll surface.
 * Keep it above the background effects and allow touch scrolling.
 */
#modal{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    height:100dvh!important;
    min-height:100vh!important;
    max-height:none!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
}

/*
 * Never allow an inner landing container to become a competing
 * scroll/clip surface.
 */
#modal .landing-main,
#modal .landing-secondary-content{
    overflow:visible!important;
    max-height:none!important;
}

/*
 * Secondary content must remain part of normal document flow.
 */
#modal .landing-secondary-content{
    position:relative!important;
    height:auto!important;
}

/*
 * On mobile the page itself should grow beyond the first viewport.
 */
@media(max-width:760px){
    #modal .landing-shell{
        min-height:100dvh!important;
        height:auto!important;
        overflow-x:clip!important;
        overflow-y:visible!important;
    }

    #modal .landing-main{
        min-height:0!important;
        height:auto!important;
        overflow:visible!important;
    }

    #modal .landing-secondary-content{
        height:auto!important;
        min-height:0!important;
        overflow:visible!important;
        margin-bottom:0!important;
    }
}

/* ------------------------------------------------------------
   ACCOUNT CENTRE: reliable mobile close + contained scrolling
   ------------------------------------------------------------ */

#c256-account-centre{
    position:fixed!important;
    inset:0!important;
    z-index:12100!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100vh!important;
    max-height:none!important;
    display:grid!important;
    place-items:center!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    padding:20px!important;
    isolation:isolate!important;
}

#c256-account-centre.hide,
#c256-account-centre[hidden],
#c256-account-centre[aria-hidden="true"]{
    display:none!important;
}

#c256-account-centre .c256-account-backdrop{
    position:absolute!important;
    inset:0!important;
    z-index:0!important;
}

#c256-account-centre .c256-account-dialog{
    position:relative!important;
    z-index:1!important;
    width:min(760px,100%)!important;
    max-width:760px!important;
    max-height:min(88dvh,900px)!important;
    height:auto!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
    padding:28px!important;
}

/*
 * Make the close control an unmistakable, always-available
 * control rather than relying on surrounding content.
 */
#c256-account-centre .c256-account-close{
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    z-index:20!important;
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    margin:0!important;
    border-radius:12px!important;
    color:#eef8ff!important;
    background:rgba(255,255,255,.065)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    font-size:24px!important;
    line-height:1!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    cursor:pointer!important;
    flex:none!important;
}

#c256-account-centre .c256-account-close:hover,
#c256-account-centre .c256-account-close:focus-visible{
    color:#ffffff!important;
    background:rgba(95,231,255,.12)!important;
    border-color:rgba(95,231,255,.30)!important;
    box-shadow:0 8px 28px rgba(0,0,0,.24),0 0 20px rgba(95,231,255,.08)!important;
    outline:none!important;
}

#c256-account-centre .c256-account-head{
    padding-right:58px!important;
}

#c256-account-centre .c256-account-grid{
    min-width:0!important;
}

/* Mobile: full-height surface, but content remains scrollable. */
@media(max-width:600px){

    #c256-account-centre{
        padding:0!important;
        place-items:stretch!important;
        overflow:hidden!important;
        touch-action:none!important;
    }

    #c256-account-centre .c256-account-dialog{
        width:100%!important;
        max-width:none!important;
        height:100dvh!important;
        min-height:100vh!important;
        max-height:none!important;
        border-radius:0!important;
        border-left:0!important;
        border-right:0!important;
        border-top:0!important;
        border-bottom:0!important;
        padding:
            calc(76px + env(safe-area-inset-top))
            16px
            calc(28px + env(safe-area-inset-bottom))
            !important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        -webkit-overflow-scrolling:touch!important;
        overscroll-behavior-y:contain!important;
        touch-action:pan-y!important;
    }

    #c256-account-centre .c256-account-close{
        position:fixed!important;
        top:max(12px,env(safe-area-inset-top))!important;
        right:max(12px,env(safe-area-inset-right))!important;
        z-index:12120!important;
    }

    #c256-account-centre .c256-account-head{
        padding-right:0!important;
    }

    #c256-account-centre .c256-account-title{
        font-size:25px!important;
        line-height:1.05!important;
        padding-right:48px!important;
    }

    #c256-account-centre .c256-account-lead{
        font-size:11px!important;
        line-height:1.55!important;
    }

    #c256-account-centre .c256-account-grid{
        margin-top:18px!important;
    }

    #c256-account-centre .c256-account-actions{
        padding-bottom:4px!important;
    }
}

/* Very small phones */
@media(max-width:360px){
    #c256-account-centre .c256-account-dialog{
        padding-left:13px!important;
        padding-right:13px!important;
    }

    #c256-account-centre .c256-account-close{
        width:40px!important;
        min-width:40px!important;
        height:40px!important;
        min-height:40px!important;
    }
}

/* Respect reduced-motion preferences. */
@media(prefers-reduced-motion:reduce){
    #c256-account-centre *,
    #modal *{
        scroll-behavior:auto!important;
    }
}


/* ============================================================
   WORKSPACE V2 — SEARCH + UPLOAD QUEUE
   ============================================================ */
.workspace-file-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 14px;
}
.workspace-search{
  position:relative;
  display:block;
  width:min(100%,520px);
  flex:1 1 420px;
}
.workspace-search input{
  width:100%;
  min-height:46px;
  padding:0 44px 0 15px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(7,12,22,.72);
  color:inherit;
  outline:none;
  box-sizing:border-box;
}
.workspace-search input:focus{
  border-color:rgba(100,220,255,.42);
  box-shadow:0 0 0 3px rgba(100,220,255,.08);
}
.workspace-search-clear{
  position:absolute;
  top:50%;
  right:7px;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  min-width:34px;
  padding:0;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.07);
  color:inherit;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.workspace-upload-queue{
  display:grid;
  gap:7px;
  margin:10px 0 16px;
}
.workspace-upload-job{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}
.workspace-upload-job strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.workspace-upload-job > span{
  font-size:12px;
  opacity:.72;
  white-space:nowrap;
}
.workspace-upload-job[data-state="failed"]{
  border-color:rgba(255,110,110,.24);
}
.workspace-upload-job[data-state="done"]{
  border-color:rgba(100,230,180,.18);
}
@media(max-width:620px){
  .workspace-file-toolbar{margin-bottom:10px}
  .workspace-search{flex-basis:100%;width:100%}
  .workspace-upload-job{grid-template-columns:minmax(0,1fr) auto}
  .workspace-upload-job > span{grid-column:2;grid-row:1}
  .workspace-upload-job button{grid-column:1 / -1;width:100%}
}

/* Chat256 integrated Mail */
.c256-mail-panel{position:fixed;inset:0;z-index:12200;background:rgba(5,8,18,.96);padding:clamp(18px,4vw,48px);overflow:auto}
.c256-mail-panel.hide{display:none}
.c256-mail-head,.c256-mail-toolbar,.c256-mail-list{max-width:1100px;margin:0 auto}
.c256-mail-head{position:relative;padding:12px 0 24px;border-bottom:1px solid rgba(255,255,255,.08)}
.c256-mail-title{margin:.2rem 0;font-size:clamp(28px,4vw,44px)}
.c256-mail-lead{max-width:700px;color:rgba(235,240,250,.68)}
.c256-mail-close{position:absolute;right:0;top:0}
.c256-mail-toolbar{display:flex;gap:10px;padding:18px 0}
.c256-mail-status{max-width:1100px;margin:0 auto 12px;color:rgba(235,240,250,.62)}
.c256-mail-list{border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.025)}
.c256-mail-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;width:100%;gap:18px;text-align:left;padding:17px 20px;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.06);color:inherit;cursor:pointer}
.c256-mail-row:hover{background:rgba(255,255,255,.045)}
.c256-mail-row span,.c256-mail-row small{color:rgba(235,240,250,.58);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c256-mail-empty{padding:50px;text-align:center;color:rgba(235,240,250,.58)}
.c256-mail-message{padding:28px}.c256-mail-message h3{font-size:26px;margin:18px 0 8px}.c256-mail-message pre{white-space:pre-wrap;word-break:break-word;font:inherit;line-height:1.65;color:rgba(245,248,255,.86);margin:28px 0}
.c256-mail-compose{display:grid;gap:12px;padding:24px}.c256-mail-compose input,.c256-mail-compose textarea{width:100%;box-sizing:border-box;padding:13px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.18);color:inherit;font:inherit}.c256-mail-compose-actions{display:flex;gap:10px;justify-content:flex-end}
.c256-account-plan-list{display:grid;gap:10px;margin:14px 0}.c256-account-plan-row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:12px}.c256-account-plan-copy{display:grid;gap:4px}.c256-account-plan-copy small{color:rgba(235,240,250,.58)}
@media(max-width:700px){.c256-mail-row{grid-template-columns:1fr;gap:5px}.c256-mail-row small{display:block}.c256-mail-panel{padding:18px}.c256-account-plan-row{align-items:stretch;flex-direction:column}.c256-account-plan-row button{width:100%}}

.workspace-file-grid{display:block}.workspace-file-grid > *{border-radius:0!important}

/* Workspace directory view: files are rows, not tiles. */
.workspace-file-grid{display:block;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden}
.workspace-file-item{display:grid!important;grid-template-columns:minmax(240px,2.4fr) minmax(130px,.8fr) minmax(240px,1fr);align-items:center;gap:18px;padding:13px 16px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.06);border-radius:0!important;background:transparent!important;box-shadow:none!important}
.workspace-file-item:last-child{border-bottom:0}
.workspace-file-copy{min-width:0;display:grid;gap:4px}.workspace-file-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workspace-file-copy small{color:rgba(235,240,250,.55);font-variant-numeric:tabular-nums}
.workspace-file-state{color:rgba(235,240,250,.58);font-size:12px}.workspace-file-actions{display:flex;justify-content:flex-end;gap:7px;flex-wrap:wrap}
@media(max-width:800px){.workspace-file-item{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px}.workspace-file-state{grid-column:1}.workspace-file-actions{grid-column:2;grid-row:1 / span 2;align-self:center}.workspace-file-actions button{min-width:0}.workspace-file-icon{display:none}}
.workspace-mail-inline{padding:24px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.025)}

/* CHAT256 SETTINGS V2 — isolated modal surface. Do not inherit .sheet geometry. */
.c256-settings-panel{
  position:fixed!important;
  inset:0!important;
  z-index:2147481000!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.c256-settings-panel.hide,
.c256-settings-panel[hidden],
.c256-settings-panel[aria-hidden="true"]{
  display:none!important;
  pointer-events:none!important;
}
.c256-settings-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,6,12,.72);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  cursor:pointer;
}
.c256-settings-dialog{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  width:min(680px,calc(100vw - 32px));
  max-height:min(820px,calc(100dvh - 32px));
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(130,215,255,.16);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(16,29,45,.98),rgba(5,11,19,.985));
  box-shadow:0 40px 140px rgba(0,0,0,.68),0 0 80px rgba(44,185,255,.08),inset 0 1px rgba(255,255,255,.08);
  color:#eaf7ff;
}
.c256-settings-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex:0 0 auto;
  padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(8,17,28,.96);
}
.c256-settings-head strong{font-size:18px;letter-spacing:-.02em}
.c256-settings-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px;display:grid;gap:20px}
.c256-settings-footer{display:flex;justify-content:flex-start;flex:0 0 auto;padding:0 20px 20px}
.c256-settings-footer button{min-height:42px}
body.c256-settings-open{overflow:hidden!important;overscroll-behavior:none!important}
@media(max-width:600px){
  .c256-settings-panel{place-items:stretch!important}
  .c256-settings-dialog{width:100%;height:100dvh;max-height:none;border-radius:0;border-left:0;border-right:0}
  .c256-settings-head{padding:max(14px,env(safe-area-inset-top)) 14px 14px}
  .c256-settings-body{padding:14px;gap:16px}
  .c256-settings-footer{padding:0 14px max(14px,env(safe-area-inset-bottom))}
}

/* CHAT256 ACCOUNT SIGN-IN */
.c256-account-page{min-height:100vh;margin:0;background:radial-gradient(circle at 50% 0,rgba(74,144,255,.16),transparent 38%),#07090f;color:#f5f7fb}
.c256-account-login-page{min-height:100vh;display:grid;place-items:center;padding:28px;box-sizing:border-box}
.c256-account-login-shell{width:min(460px,100%);padding:34px;border:1px solid rgba(255,255,255,.10);border-radius:24px;background:rgba(15,18,28,.82);box-shadow:0 30px 100px rgba(0,0,0,.42);backdrop-filter:blur(20px)}
.c256-account-login-shell h1{margin:8px 0 10px;font-size:clamp(34px,7vw,54px);letter-spacing:-.045em}
.c256-account-login-shell>p{color:rgba(235,240,248,.68);line-height:1.6}
.c256-account-login-shell form{display:grid;gap:16px;margin-top:24px}
.c256-account-login-shell label{display:grid;gap:7px;font-size:13px;color:rgba(235,240,248,.78)}
.c256-account-login-shell input{width:100%;box-sizing:border-box;min-height:48px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.045);color:#fff;padding:0 14px;outline:none}
.c256-account-login-shell input:focus{border-color:rgba(116,190,255,.72);box-shadow:0 0 0 3px rgba(80,160,255,.13)}
.c256-account-login-shell button{min-height:50px}
#account-login-status{min-height:24px;font-size:13px}
.c256-account-login-links{margin-top:14px;font-size:13px}.c256-account-login-links a{color:#9ccfff}
@media(max-width:560px){.c256-account-login-page{padding:14px}.c256-account-login-shell{padding:24px 20px;border-radius:20px}}