/* ArcShare chat content. Shared tokens and primitives: workspace-ui.css. */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { min-height:100%; margin:0; }
body { background:var(--bg); color:var(--t0); font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; margin:0; padding:0; min-height:100dvh; justify-content:flex-start; align-items:stretch; }
button,input { font:inherit; }
button { appearance:none; }
[data-theme="dark"] .nav-logo .logo-dark { display:block; }
[data-theme="light"] .nav-logo .logo-light { display:block; }
.page { position:relative; isolation:isolate; min-height:calc(100vh - 80px); }
.page::before { content:""; position:absolute; z-index:-1; width:720px; height:720px; border-radius:50%; left:50%; top:-330px; transform:translateX(-50%); background:var(--s1); pointer-events:none; display:none; }
.wrap { width:min(var(--workspace-max),calc(100% - var(--arc-page-gutter) - var(--arc-page-gutter))); margin:0 auto; padding:32px 0 56px; }
.hero { text-align:left; max-width:none; margin:0 0 24px; }
.eyebrow { display:none; align-items:center; gap:8px; border:1px solid var(--b2); background:var(--b1); border-radius:var(--arc-radius-md); padding:7px 11px; font-family:var(--mono); font-size:var(--text-xs); font-weight:600; color:var(--t2); letter-spacing:.06em; text-transform:uppercase; margin-bottom:18px; }
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--go); box-shadow:none; }
.hero h1 { font-size:var(--text-title); line-height:1.2; letter-spacing:-.6px; font-weight:650; margin-bottom:8px; }
.hero h1 span { background:none; -webkit-background-clip:text; background-clip:text; color:inherit; }
.hero p { font-size:14px; line-height:1.5; color:var(--t2); max-width:720px; margin:0; }
.feature-row { display:flex; align-items:center; justify-content:flex-start; gap:12px; flex-wrap:wrap; margin-top:16px; }
.feature { display:flex; align-items:center; gap:7px; border-radius:var(--arc-radius-md); color:var(--t2); border:0; background:transparent; padding:0; font-family:var(--sans); font-size:12px; }
.feature svg { width:13px; height:13px; stroke:var(--acc2); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mode-tabs { display:none; margin:0 auto 14px; width:min(100%,520px); padding:4px; background:var(--s1); border:1px solid var(--b2); border-radius:var(--arc-radius-md); }
.mode-tab { flex:1; height:38px; border:0; border-radius:8px; background:transparent; color:var(--t2); cursor:pointer; font-weight:600; }
.mode-tab.on { background:var(--s3); color:var(--t0); box-shadow:none; }
.workspace { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
.panel { background:var(--s1); border:1px solid var(--b2); border-radius:var(--arc-radius-md); box-shadow:none; overflow:hidden; }
.panel-head { padding:20px; border-bottom:1px solid var(--b1); display:flex; align-items:flex-start; gap:12px; }
.panel-icon { width:42px; height:42px; border-radius:var(--arc-radius-md); background:var(--acb); border:1px solid var(--acr); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.panel-icon svg { width:20px; height:20px; stroke:var(--acc2); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.panel-title { font-size:16px; font-weight:700; letter-spacing:-.2px; margin-bottom:3px; }
.panel-sub { font-size:12px; color:var(--t3); line-height:1.5; }
.panel-body { padding:20px; display:flex; flex-direction:column; gap:16px; }
.field { display:flex; flex-direction:column; gap:7px; }
.label-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.lbl { font-family:var(--sans); font-size:12px; font-weight:600; color:var(--t3); text-transform:none; letter-spacing:0; }
.hint { font-family:var(--mono); font-size:var(--text-xs); color:var(--t4); }
.input-row { display:flex; gap:8px; }
.inp { width:100%; height:46px; padding:0 13px; background:var(--s2); border:1px solid var(--b2); border-radius:var(--arc-radius-sm); color:var(--t0); outline:none; transition:border-color .13s,box-shadow .13s,background .13s; }
.inp:focus { border-color:var(--acc2); box-shadow:none; background:var(--s1); }
.inp::placeholder { color:var(--t4); }
.mono { font-family:var(--mono); }
.icon-btn { width:46px; height:46px; border-radius:var(--arc-radius-sm); border:1px solid var(--b2); background:var(--s2); color:var(--t2); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.13s; flex-shrink:0; }
.icon-btn:hover { border-color:var(--acr); color:var(--acc2); background:var(--acb); }
.icon-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.expiry-row { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.exp-btn { height:var(--control-action-h); border-radius:var(--arc-radius-sm); border:1px solid var(--b2); background:var(--s2); color:var(--t2); font-family:var(--mono); font-size:var(--text-xs); cursor:pointer; transition:.13s; }
.exp-btn:hover { border-color:var(--b3); color:var(--t0); }
.exp-btn.on { background:var(--acc); border-color:var(--acc); color:#fff; box-shadow:none; }
.security-note { display:flex; gap:10px; padding:11px 12px; background:var(--gob); border:1px solid var(--gor); border-radius:var(--arc-radius-md); color:var(--t2); font-size:var(--text-xs); line-height:1.5; }
.security-note svg { width:16px; height:16px; stroke:var(--go); fill:none; stroke-width:2; flex-shrink:0; margin-top:1px; }
.btn-primary { width:100%; height:var(--control-action-h); border:0; border-radius:var(--arc-radius-sm); background:var(--acc); color:#fff; font-size:14px; font-weight:600; cursor:pointer; box-shadow:none; transition:transform .13s,opacity .13s,box-shadow .13s; }
.btn-primary:hover { transform:none; box-shadow:none; }
.btn-primary:disabled { opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.create-foot { display:flex; align-items:center; justify-content:center; gap:8px; color:var(--t3); font-family:var(--mono); font-size:var(--text-xs); }
.create-foot svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; }
.result { display:none; padding:15px; background:var(--gob); border:1px solid var(--gor); border-radius:var(--arc-radius-md); gap:12px; }
.result.on { display:grid; }
.result-top { display:flex; align-items:flex-start; gap:10px; }
.result-check { width:28px; height:28px; border-radius:4px; display:flex; align-items:center; justify-content:center; background:var(--go); color:var(--bg); font-weight:800; flex-shrink:0; }
.result-title { font-size:13px; font-weight:700; color:var(--t0); }
.result-sub { font-size:var(--text-xs); font-family:var(--mono); color:var(--t3); margin-top:2px; }
.result-url { padding:10px 11px; border-radius:var(--arc-radius-md); background:var(--s1); border:1px solid var(--b2); font-family:var(--mono); font-size:var(--text-xs); color:var(--go); overflow-wrap:anywhere; }
.result-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.btn-secondary,.btn-go { height:var(--control-action-h); border-radius:var(--arc-radius-sm); font-size:12px; font-weight:650; display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; text-decoration:none; }
.btn-secondary { background:var(--s1); border:1px solid var(--b2); color:var(--t1); }
.btn-secondary:hover { border-color:var(--b3); }
.btn-go { background:var(--acc); border:1px solid var(--go); color:#fff; border-color:var(--acc); }
.btn-go:hover { filter:brightness(.95); }
.join-hero { padding:15px; border-radius:var(--arc-radius-md); background:var(--s1); border:1px solid var(--acr); }
.join-hero-title { font-size:13px; font-weight:700; margin-bottom:4px; }
.join-hero-sub { font-size:var(--text-xs); color:var(--t2); line-height:1.55; }
.direct-row { display:flex; gap:8px; }
.btn-join { height:46px; padding:0 18px; border:0; border-radius:var(--arc-radius-sm); background:var(--acc); color:#fff; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; }
.btn-join:hover { opacity:.86; }
.err { display:none; color:var(--red); font-family:var(--mono); font-size:var(--text-xs); }
.err.on { display:block; }
.room-section { border-top:1px solid var(--b1); padding-top:18px; }
.room-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.room-section-title { font-size:12px; font-weight:700; }
.room-count { font-family:var(--mono); font-size:var(--text-xs); color:var(--t3); padding:3px 7px; border-radius:var(--arc-radius-md); background:var(--s2); border:1px solid var(--b2); }
.rooms { display:flex; flex-direction:column; gap:7px; max-height:300px; overflow:auto; padding-right:2px; }
.rooms::-webkit-scrollbar { width:4px; }
.rooms::-webkit-scrollbar-thumb { background:var(--b3); border-radius:var(--arc-radius-md); }
.room-item { display:flex; align-items:center; gap:11px; padding:11px 12px; background:var(--s2); border:1px solid var(--b1); border-radius:var(--arc-radius-md); cursor:pointer; transition:.13s; }
.room-item:hover { border-color:var(--acr); background:var(--acb); transform:none; }
.room-glyph { width:34px; height:34px; border-radius:var(--arc-radius-md); background:var(--s3); border:1px solid var(--b2); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.room-glyph svg { width:16px; height:16px; stroke:var(--t2); fill:none; stroke-width:1.9; }
.room-main { min-width:0; flex:1; }
.room-name { font-size:12px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.room-meta { font-family:var(--mono); font-size:var(--text-xs); color:var(--t3); margin-top:3px; }
.room-arrow { font-family:var(--mono); font-size:14px; color:var(--acc2); }
.empty { padding:20px 14px; text-align:center; border:1px dashed var(--b2); border-radius:var(--arc-radius-md); color:var(--t3); font-size:var(--text-xs); line-height:1.55; }
.empty strong { display:block; color:var(--t1); font-size:12px; margin-bottom:3px; }
.toast { position:fixed; bottom:24px; left:50%; z-index:999; transform:translateX(-50%) translateY(8px); background:var(--t0); color:var(--bg); font-family:var(--mono); font-size:var(--text-xs); font-weight:600; padding:9px 15px; border-radius:var(--arc-radius-md); box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width:820px) {.workspace { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wrap { padding-top:42px; width:min(var(--workspace-max),calc(100% - var(--arc-page-gutter) - var(--arc-page-gutter))); padding:32px 0 56px; }
.hero { margin-bottom:28px; max-width:none; margin:0 0 24px; text-align:left; }
.hero h1 { letter-spacing:-.6px; font-size:var(--text-title); line-height:1.2; font-weight:650; margin-bottom:8px; }
.mode-tabs { display:flex; }
.panel.mobile-hidden { display:none; }
.feature-row { margin-top:16px; justify-content:flex-start; gap:12px; }}
@media (max-width:640px) {.wrap { width:min(var(--workspace-max),calc(100% - var(--arc-page-gutter) - var(--arc-page-gutter))); padding:32px 0 56px; }
.hero h1 { font-size:var(--text-title); line-height:1.2; font-weight:650; letter-spacing:-.6px; margin-bottom:8px; }
.hero p { font-size:14px; line-height:1.5; margin:0; max-width:720px; }
.feature-row { gap:12px; justify-content:flex-start; margin-top:16px; }
.feature { font-size:12px; border:0; background:transparent; padding:0; font-family:var(--sans); }
.panel { border-radius:var(--arc-radius-md); }
.panel-head,.panel-body { padding:17px; }
.expiry-row { grid-template-columns:repeat(5,minmax(0,1fr)); }
.exp-btn { font-size:var(--text-xs); padding:0; }
.direct-row { flex-direction:column; }
.btn-join { width:100%; background:var(--acc); color:#fff; }
.result-actions { grid-template-columns:1fr; }}
#create-panel { border-color:var(--acr); box-shadow:none; position:relative; }
#create-panel::before { content:""; position:absolute; inset:0 0 auto; height:2px; background:var(--s1); opacity:.8; }
#join-panel { box-shadow:none; }
.panel,.room-item,.feature,.btn-primary,.btn-secondary,.btn-go,.icon-btn,.exp-btn { will-change:auto; }
.panel { transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.btn-primary,.btn-secondary,.btn-go,.icon-btn,.exp-btn,.btn-join { transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease,opacity .14s ease; }
.btn-primary:active,.btn-secondary:active,.btn-go:active,.icon-btn:active,.exp-btn:active,.btn-join:active { transform:none; }
.feature { transition:transform .16s ease,border-color .16s ease; border:0; background:transparent; padding:0; font-family:var(--sans); font-size:12px; }
.feature:hover { transform:none; border-color:var(--b3); }
.result { overflow:hidden; }
.result.on { animation:resultIn .28s cubic-bezier(.2,.8,.2,1); }
.result.on .result-check { animation:checkPop .38s cubic-bezier(.34,1.56,.64,1); }
@keyframes resultIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes checkPop{0%{transform:scale(.4) rotate(-15deg)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.share-grid { display:grid; grid-template-columns:minmax(0,1fr) 116px; gap:12px; align-items:stretch; }
.share-main { min-width:0; display:flex; flex-direction:column; gap:7px; }
.share-label { font:600 var(--text-xs) var(--mono); color:var(--t3); text-transform:uppercase; letter-spacing:.07em; }
.room-code-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; padding:8px 9px; border:1px solid var(--b2); border-radius:var(--arc-radius-md); background:var(--s1); font:var(--text-xs) var(--mono); color:var(--t3); }
.room-code-row code { font:600 var(--text-xs) var(--mono); color:var(--t0); letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; }
.room-code-row button { border:0; background:transparent; color:var(--acc2); font:600 var(--text-xs) var(--mono); cursor:pointer; }
.qr-wrap { padding:8px; border-radius:var(--arc-radius-md); background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; box-shadow:none; }
.qr-wrap img { width:88px; height:88px; display:block; }
.qr-wrap span { color:#5b6476; font:600 var(--text-xs) var(--mono); text-transform:uppercase; letter-spacing:.04em; }
.owner-note { display:flex; gap:7px; align-items:flex-start; padding-top:2px; color:var(--t3); font:var(--text-xs)/1.5 var(--mono); }
.room-skeleton { height:58px; border-radius:var(--arc-radius-md); border:1px solid var(--b1); background:var(--s1); background-size:220% 100%; animation:skeleton 1.2s ease-in-out infinite; }
@keyframes skeleton{to{background-position:-120% 0}}
.room-item { animation:roomIn .18s ease both; }
@keyframes roomIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (max-width:640px) {.share-grid { grid-template-columns:1fr; }
.qr-wrap { display:none; }
.result-actions { grid-template-columns:1fr; }
.owner-note { font-size:var(--text-xs); }}
@media (prefers-reduced-motion:reduce) {*,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }}