/* =============================================================
   CHAT — landing card, full-screen social app, conversation, sheets
   ============================================================= */
:root { --cx1:#6366f1; --cx2:#ec4899; --cx3:#f59e0b; }
.hidden-i { display:none !important; }
/* ---------- landing ---------- */
.cl-wrap { padding:22px 18px 100px; }
.cl-hero { position:relative; overflow:hidden; border-radius:30px; padding:34px 22px 26px; text-align:center; color:#fff; cursor:pointer; background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 45%,#ec4899 100%); box-shadow:0 26px 50px -22px rgba(124,58,237,.8); transition:transform .3s cubic-bezier(.34,1.56,.64,1); animation:clIn .6s cubic-bezier(.16,1,.3,1) both; }
.cl-hero:active { transform:scale(.97); } .cl-hero.go { animation:clGo .55s ease; }
@keyframes clIn { from{opacity:0;transform:translateY(28px) scale(.95)} to{opacity:1;transform:none} } @keyframes clGo { 50%{transform:scale(1.04)} }
.cl-b { position:absolute; border-radius:50%; background:rgba(255,255,255,.14); animation:clFloat 7s ease-in-out infinite; }
.cl-b.b1 { width:120px; height:120px; top:-30px; left:-30px; } .cl-b.b2 { width:70px; height:70px; bottom:20px; right:-14px; animation-delay:-2s; } .cl-b.b3 { width:36px; height:36px; top:40px; right:60px; animation-delay:-4s; }
@keyframes clFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-16px) scale(1.08)} }
.cl-emoji { font-size:3.4rem; line-height:1; margin-bottom:8px; display:inline-block; animation:clBounce 2.6s ease-in-out infinite; filter:drop-shadow(0 8px 14px rgba(0,0,0,.3)); }
@keyframes clBounce { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-8px) rotate(4deg)} }
.cl-name { font-size:1.65rem; font-weight:900; letter-spacing:.3px; } .cl-tag { font-size:.85rem; opacity:.9; margin:6px 0 18px; }
.cl-go { display:inline-flex; align-items:center; gap:10px; background:#fff; color:#4f46e5; font-weight:900; padding:11px 24px; border-radius:40px; box-shadow:0 10px 22px -8px rgba(0,0,0,.4); }
.cl-go i { animation:clArrow 1.4s ease-in-out infinite; } @keyframes clArrow { 50%{transform:translateX(5px)} }
.cl-dot { position:absolute; top:16px; right:18px; width:14px; height:14px; border-radius:50%; background:#ef4444; border:2px solid #fff; animation:clPulse 1.5s infinite; }
@keyframes clPulse { 0%{box-shadow:0 0 0 0 rgba(239,68,68,.7)} 100%{box-shadow:0 0 0 12px rgba(239,68,68,0)} }
.cl-chips { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.cl-chip { background:var(--bg-card,#fff); border:1px solid var(--border,#e5e7eb); border-radius:18px; padding:12px 6px; text-align:center; animation:clIn .5s .15s cubic-bezier(.16,1,.3,1) both; }
.cl-chip i { color:var(--primary); font-size:1.05rem; } .cl-chip b { display:block; font-size:1.05rem; margin-top:4px; } .cl-chip span { font-size:.68rem; color:var(--text-muted); font-weight:700; }
.cl-chip.hot { border-color:#fca5a5; background:#fef2f2; } .cl-chip.hot i, .cl-chip.hot b { color:#ef4444; }

/* ---------- full-screen app ---------- */
body.chat-full { overflow:hidden; }
.ca { position:fixed; inset:0; z-index:9500; background:var(--bg-body,#f8fafc); display:flex; flex-direction:column; transform:translateY(100%) scale(.96); opacity:0; pointer-events:none; transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .35s; border-radius:26px 26px 0 0; overflow:hidden; }
.ca.on { transform:none; opacity:1; pointer-events:all; border-radius:0; }
.ca-bar { display:flex; align-items:center; gap:12px; padding:calc(12px + env(safe-area-inset-top,0px)) 16px 14px; background:linear-gradient(135deg,#4f46e5,#7c3aed 55%,#ec4899); color:#fff; box-shadow:0 8px 24px -12px rgba(79,70,229,.8); position:relative; z-index:3; }
.ca-back { width:42px; height:42px; border-radius:14px; border:0; background:rgba(255,255,255,.2); color:#fff; font-size:1.05rem; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(6px); transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .2s; flex:none; }
.ca-back:active { transform:scale(.86) translateX(-3px); background:rgba(255,255,255,.35); } .ca-back i { transition:transform .25s; } .ca-back:hover i { transform:translateX(-3px); }
.ca-title { display:flex; align-items:center; gap:9px; font-size:1.1rem; flex:1; min-width:0; } .ca-title span { font-size:1.4rem; animation:clBounce 2.6s ease-in-out infinite; } .ca-title b { font-weight:900; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ca-body { position:relative; flex:1; overflow:hidden; }
.ca-pane { position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; opacity:0; pointer-events:none; transform:translateX(30px); transition:opacity .3s, transform .38s cubic-bezier(.16,1,.3,1); -webkit-overflow-scrolling:touch; }
.ca-pane.on { opacity:1; pointer-events:all; transform:none; } .ca-pane.from-l { animation:paneL .38s cubic-bezier(.16,1,.3,1); } .ca-pane.from-r { animation:paneR .38s cubic-bezier(.16,1,.3,1); }
@keyframes paneL { from{opacity:0;transform:translateX(-34px)} to{opacity:1;transform:none} } @keyframes paneR { from{opacity:0;transform:translateX(34px)} to{opacity:1;transform:none} }
.pane-pad { padding:16px 16px 40px; }
.ca-tabs { position:relative; display:grid; grid-template-columns:repeat(4,1fr); background:var(--bg-card,#fff); border-top:1px solid var(--border,#e5e7eb); padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px)); box-shadow:0 -10px 30px -18px rgba(0,0,0,.25); z-index:3; }
.ca-tabs button { position:relative; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0; color:var(--text-muted,#94a3b8); font-family:inherit; font-size:.68rem; font-weight:800; cursor:pointer; transition:color .25s; z-index:1; }
.ca-tabs button i { font-size:1.15rem; transition:transform .35s cubic-bezier(.34,1.56,.64,1); } .ca-tabs button.on { color:var(--primary,#4f46e5); } .ca-tabs button.on i { transform:translateY(-3px) scale(1.15); }
.ca-tabs button:active i { transform:scale(.8); }
.ca-tab-ind { position:absolute; top:6px; left:6px; width:calc((100% - 12px)/4); height:calc(100% - 14px - env(safe-area-inset-bottom,0px)); border-radius:16px; background:linear-gradient(135deg,rgba(99,102,241,.14),rgba(236,72,153,.12)); transition:transform .42s cubic-bezier(.34,1.3,.64,1); pointer-events:none; }
.ca-tabs em, .tb-b { position:absolute; top:2px; left:calc(50% + 6px); min-width:17px; height:17px; padding:0 4px; border-radius:20px; background:#ef4444; color:#fff; font-style:normal; font-size:.62rem; font-weight:900; display:flex; align-items:center; justify-content:center; animation:badgePop .4s cubic-bezier(.34,1.56,.64,1); }
.ca-tabs em.hidden { display:none; } @keyframes badgePop { from{transform:scale(0)} to{transform:scale(1)} }
.ca-fab { position:absolute; left:18px; bottom:calc(86px + env(safe-area-inset-bottom,0px)); width:58px; height:58px; border-radius:50%; border:0; background:linear-gradient(135deg,#6366f1,#ec4899); color:#fff; font-size:1.4rem; box-shadow:0 14px 28px -8px rgba(99,102,241,.8); cursor:pointer; z-index:4; animation:fabIn .5s cubic-bezier(.34,1.56,.64,1), fabPulse 2.4s 1s infinite; } .ca-fab.hidden { display:none; }
.ca-fab:active { transform:scale(.88); } @keyframes fabIn { from{transform:scale(0) rotate(-90deg)} to{transform:none} } @keyframes fabPulse { 0%{box-shadow:0 14px 28px -8px rgba(99,102,241,.8),0 0 0 0 rgba(99,102,241,.5)} 100%{box-shadow:0 14px 28px -8px rgba(99,102,241,.8),0 0 0 16px rgba(99,102,241,0)} }

/* ---------- shared bits ---------- */
.av { width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; } .av.big { width:92px; height:92px; border:4px solid var(--bg-card,#fff); box-shadow:0 10px 22px -8px rgba(0,0,0,.35); }
.av-t { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#6366f1,#ec4899); color:#fff; font-weight:900; font-size:1.1rem; } .av.big.av-t { font-size:2.2rem; } .av-e { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#e0e7ff,#fce7f3); font-size:1.4rem; }
.sec-h { display:flex; align-items:center; justify-content:space-between; margin:20px 2px 10px; font-weight:900; font-size:.8rem; color:var(--text-muted,#64748b); text-transform:uppercase; letter-spacing:.8px; }
.mini-btn { border:0; background:rgba(99,102,241,.12); color:var(--primary,#4f46e5); font-weight:800; font-size:.72rem; padding:7px 12px; border-radius:20px; cursor:pointer; font-family:inherit; text-transform:none; letter-spacing:0; } .mini-btn:active { transform:scale(.92); }
.wr-card { position:relative; display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:22px; color:#fff; cursor:pointer; background:linear-gradient(135deg,#f59e0b,#ef4444 60%,#ec4899); box-shadow:0 16px 30px -14px rgba(239,68,68,.8); animation:clIn .5s cubic-bezier(.16,1,.3,1) both; transition:transform .2s; } .wr-card:active { transform:scale(.97); }
.wr-em { font-size:2rem; width:52px; height:52px; border-radius:16px; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; animation:clBounce 2.6s ease-in-out infinite; } .wr-t b { display:block; font-size:1.02rem; font-weight:900; } .wr-t small { font-size:.72rem; opacity:.92; }
.wr-live { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:.62rem; font-weight:900; letter-spacing:.8px; background:rgba(0,0,0,.22); padding:5px 10px; border-radius:20px; } .wr-live i { width:8px; height:8px; border-radius:50%; background:#4ade80; animation:clPulse 1.5s infinite; }
.cv-row { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:18px; background:var(--bg-card,#fff); border:1px solid var(--border,#eef0f4); margin-bottom:8px; cursor:pointer; animation:rowIn .45s cubic-bezier(.16,1,.3,1) both; transition:transform .15s, box-shadow .2s; } .cv-row:active { transform:scale(.98); }
@keyframes rowIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.cv-av { position:relative; flex:none; } .cv-av .on { position:absolute; right:0; bottom:0; width:13px; height:13px; border-radius:50%; background:#22c55e; border:2px solid var(--bg-card,#fff); }
.cv-t { flex:1; min-width:0; } .cv-t b { display:flex; align-items:center; gap:6px; font-size:.92rem; } .cv-t small { display:block; font-size:.75rem; color:var(--text-muted,#94a3b8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.cv-t b em { font-style:normal; font-size:.62rem; background:#eef2ff; color:#4f46e5; border-radius:10px; padding:1px 7px; } .st { color:#f59e0b; font-size:.72rem; } .st2 { color:var(--text-muted); font-size:.7rem; }
.cv-r { display:flex; flex-direction:column; align-items:flex-end; gap:5px; font-size:.68rem; color:var(--text-muted,#94a3b8); } .bdg { font-style:normal; min-width:20px; height:20px; padding:0 6px; border-radius:20px; background:#6366f1; color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; animation:badgePop .4s cubic-bezier(.34,1.56,.64,1); }
.cv-act { display:flex; gap:6px; } .cv-act button { width:36px; height:36px; border-radius:12px; border:0; background:rgba(99,102,241,.12); color:#4f46e5; cursor:pointer; } .cv-act button.red { background:rgba(239,68,68,.12); color:#ef4444; } .cv-act button:active { transform:scale(.85); }
.empty { text-align:center; padding:40px 24px; color:var(--text-muted,#94a3b8); display:flex; flex-direction:column; align-items:center; gap:6px; animation:rowIn .5s ease both; } .empty i { font-size:2.6rem; color:#c7d2fe; margin-bottom:6px; animation:clBounce 3s ease-in-out infinite; } .empty b { color:var(--text-main,#0f172a); } .empty span { font-size:.8rem; line-height:1.5; } .empty.small { padding:22px 16px; } .empty.small i { font-size:1.8rem; }

/* ---------- profile ---------- */
.pf-card { position:relative; background:var(--bg-card,#fff); border:1px solid var(--border,#eef0f4); border-radius:28px; overflow:hidden; text-align:center; padding-bottom:20px; box-shadow:0 18px 40px -26px rgba(79,70,229,.6); animation:clIn .55s cubic-bezier(.16,1,.3,1) both; }
.pf-cover { height:110px; background:linear-gradient(135deg,#6366f1,#a855f7 55%,#ec4899); position:relative; overflow:hidden; } .pf-cover::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 120%,rgba(255,255,255,.35),transparent 55%); }
.pf-hist { position:absolute; top:12px; right:12px; z-index:2; border:0; background:rgba(255,255,255,.25); backdrop-filter:blur(8px); color:#fff; font-weight:800; font-size:.76rem; padding:8px 13px; border-radius:20px; cursor:pointer; display:flex; align-items:center; gap:7px; font-family:inherit; transition:transform .2s cubic-bezier(.34,1.56,.64,1); } .pf-hist:active { transform:scale(.9); } .pf-hist em { font-style:normal; background:#ef4444; border-radius:20px; min-width:17px; height:17px; display:flex; align-items:center; justify-content:center; font-size:.62rem; animation:badgePop .4s; }
.pf-av { position:relative; width:92px; margin:-50px auto 8px; } .pf-on { position:absolute; right:6px; bottom:8px; width:18px; height:18px; border-radius:50%; background:#22c55e; border:3px solid var(--bg-card,#fff); animation:clPulse 2s infinite; }
.pf-name { font-size:1.3rem; font-weight:900; } .pf-user { color:var(--primary,#4f46e5); font-weight:800; font-size:.86rem; margin-top:2px; }
.pf-bio { margin:10px 24px 0; font-size:.82rem; color:var(--text-muted,#64748b); cursor:pointer; line-height:1.5; } .pf-bio i { opacity:.5; font-size:.7rem; margin-left:3px; }
.pf-priv { position:relative; display:grid; grid-template-columns:1fr 1fr; width:230px; margin:16px auto 8px; background:var(--bg-input,#f1f5f9); border-radius:30px; padding:4px; }
.pf-priv button { position:relative; z-index:1; border:0; background:transparent; padding:9px 6px; font-weight:800; font-size:.8rem; color:var(--text-muted,#64748b); cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:6px; transition:color .25s; } .pf-priv button.on { color:#fff; }
.pf-thumb { position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:26px; background:linear-gradient(135deg,#10b981,#059669); transition:transform .4s cubic-bezier(.34,1.3,.64,1), background .3s; box-shadow:0 8px 16px -8px rgba(16,185,129,.9); } .pf-thumb.r { transform:translateX(100%); background:linear-gradient(135deg,#6366f1,#7c3aed); box-shadow:0 8px 16px -8px rgba(99,102,241,.9); }
.pf-note { font-size:.7rem; color:var(--text-muted,#94a3b8); margin:0 28px 14px; }
.pf-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 16px; } .pf-stats div { background:var(--bg-input,#f8fafc); border-radius:16px; padding:10px 4px; } .pf-stats b { display:block; font-size:1.1rem; } .pf-stats small { font-size:.7rem; color:var(--text-muted); } .pf-stats span { font-size:.66rem; color:var(--text-muted,#94a3b8); font-weight:800; text-transform:uppercase; }

/* ---------- game + search ---------- */
.gm { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:30px; color:var(--text-muted,#94a3b8); } .gm b { color:var(--text-main,#0f172a); font-size:1.15rem; } .gm span { font-size:.84rem; max-width:260px; line-height:1.55; }
.gm-ring { width:110px; height:110px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.8rem; color:#fff; background:linear-gradient(135deg,#6366f1,#ec4899); box-shadow:0 0 0 0 rgba(99,102,241,.5); animation:fabPulse 2s infinite, clBounce 3s ease-in-out infinite; margin-bottom:8px; }
.sr-box { display:flex; align-items:center; gap:10px; background:var(--bg-card,#fff); border:2px solid var(--border,#e5e7eb); border-radius:20px; padding:4px 16px; transition:border-color .25s, box-shadow .25s; } .sr-box:focus-within { border-color:var(--primary,#4f46e5); box-shadow:0 0 0 5px rgba(79,70,229,.12); }
.sr-box i { color:var(--primary,#4f46e5); } .sr-box input { flex:1; border:0; outline:0; background:transparent; padding:14px 0; font-size:1rem; color:var(--text-main); font-family:inherit; }
.sr-cap { font-size:.74rem; color:var(--text-muted); margin:10px 4px 12px; }
.sr-add { border:0; background:linear-gradient(135deg,#6366f1,#7c3aed); color:#fff; font-weight:800; font-size:.78rem; padding:9px 14px; border-radius:14px; cursor:pointer; font-family:inherit; box-shadow:0 8px 16px -8px rgba(99,102,241,.9); } .sr-add:active { transform:scale(.9); }
.sr-st { font-size:.74rem; font-weight:800; color:var(--text-muted); background:var(--bg-input,#f1f5f9); padding:7px 12px; border-radius:14px; } .sr-st.ok { color:#15803d; background:#dcfce7; }

/* ---------- conversation ---------- */
.ct { position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; background:var(--bg-body,#f8fafc); transform:translateX(100%); transition:transform .45s cubic-bezier(.16,1,.3,1); } .ct.on { transform:none; }
.ct-bar { display:flex; align-items:center; gap:11px; padding:calc(10px + env(safe-area-inset-top,0px)) 12px 11px; background:linear-gradient(135deg,#4f46e5,#7c3aed 60%,#ec4899); color:#fff; position:relative; z-index:2; }
.ct-av .av { width:42px; height:42px; border:2px solid rgba(255,255,255,.7); } .ct-who { flex:1; min-width:0; } .ct-who b { display:block; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ct-who small { font-size:.7rem; opacity:.9; } .ct-who small.on { color:#bbf7d0; font-weight:700; }
.ct-dots { width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.18); color:#fff; font-size:1.1rem; cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1); } .ct-dots:active { transform:scale(.85) rotate(90deg); }
.ct-menu { position:absolute; top:calc(60px + env(safe-area-inset-top,0px)); right:12px; z-index:9; min-width:190px; background:var(--bg-card,#fff); border-radius:18px; padding:6px; box-shadow:0 20px 44px -12px rgba(0,0,0,.4); transform-origin:top right; animation:menuIn .28s cubic-bezier(.34,1.56,.64,1); } .ct-menu.hidden { display:none; }
@keyframes menuIn { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:none} }
.ct-menu button { width:100%; border:0; background:transparent; display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; font-size:.88rem; font-weight:700; color:var(--text-main,#0f172a); cursor:pointer; font-family:inherit; text-align:left; animation:rowIn .3s ease both; } .ct-menu button:nth-child(2){animation-delay:.04s} .ct-menu button:nth-child(3){animation-delay:.08s} .ct-menu button:nth-child(4){animation-delay:.12s}
.ct-menu button:active { background:var(--bg-input,#f1f5f9); } .ct-menu button.red { color:#ef4444; } .ct-menu button i { width:18px; text-align:center; }
.ct-msgs { flex:1; overflow-y:auto; padding:14px 12px 8px; display:flex; flex-direction:column; gap:3px; background:radial-gradient(circle at 10% 0%,rgba(99,102,241,.06),transparent 40%),radial-gradient(circle at 100% 100%,rgba(236,72,153,.06),transparent 40%); -webkit-overflow-scrolling:touch; }
.mg-day { text-align:center; margin:10px 0 6px; } .mg-day span { font-size:.66rem; font-weight:800; color:var(--text-muted,#94a3b8); background:var(--bg-card,#fff); padding:4px 12px; border-radius:20px; border:1px solid var(--border,#eef0f4); }
.mg { display:flex; align-items:flex-end; gap:6px; max-width:100%; animation:mgIn .32s cubic-bezier(.34,1.4,.64,1) both; } .mg.me { justify-content:flex-end; } @keyframes mgIn { from{opacity:0;transform:translateY(10px) scale(.94)} to{opacity:1;transform:none} }
.mg-av { width:30px; flex:none; } .mg-av .av { width:30px; height:30px; font-size:.8rem; }
.mg-b { position:relative; max-width:78%; padding:9px 13px 6px; border-radius:20px; font-size:.92rem; line-height:1.42; word-break:break-word; background:var(--bg-card,#fff); border:1px solid var(--border,#eef0f4); box-shadow:0 4px 10px -8px rgba(0,0,0,.3); }
.mg.th .mg-b { border-bottom-left-radius:6px; } .mg.me .mg-b { background:linear-gradient(135deg,#6366f1,#7c3aed); color:#fff; border:0; border-bottom-right-radius:6px; box-shadow:0 10px 18px -10px rgba(99,102,241,.9); }
.mg-b.edit { cursor:pointer; } .mg-b.edit:active { transform:scale(.97); }
.mg-b small { display:block; text-align:right; font-size:.6rem; opacity:.7; margin-top:2px; } .mg-n { font-size:.7rem; font-weight:900; color:#6366f1; margin-bottom:2px; }
.mg.del .mg-b { background:transparent; border:1px dashed var(--border,#cbd5e1); color:var(--text-muted,#94a3b8); font-style:italic; box-shadow:none; } .mg.me.del .mg-b { background:transparent; color:var(--text-muted); }
.ct-empty { margin:auto; text-align:center; color:var(--text-muted,#94a3b8); display:flex; flex-direction:column; gap:6px; align-items:center; animation:rowIn .5s ease both; } .ct-empty i { font-size:2.6rem; color:#c7d2fe; animation:clBounce 3s ease-in-out infinite; } .ct-empty b { color:var(--text-main,#0f172a); }
.ct-load { display:flex; gap:7px; justify-content:center; padding:30px; } .ct-load i { width:11px; height:11px; border-radius:50%; background:#6366f1; animation:dots 1s infinite; } .ct-load i:nth-child(2){animation-delay:.15s} .ct-load i:nth-child(3){animation-delay:.3s} @keyframes dots { 0%,80%,100%{transform:scale(.5);opacity:.4} 40%{transform:scale(1);opacity:1} }
.ct-lock { padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px)); background:var(--bg-card,#fff); border-top:1px solid var(--border); text-align:center; font-size:.84rem; font-weight:700; color:var(--text-muted); } .ct-lock.hidden { display:none; } .ct-lock button { margin-left:8px; border:0; background:var(--primary,#4f46e5); color:#fff; font-weight:800; padding:7px 14px; border-radius:20px; cursor:pointer; font-family:inherit; }
.ct-in { background:var(--bg-card,#fff); border-top:1px solid var(--border,#eef0f4); padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px)); } .ct-in.hidden { display:none; }
.ct-edit { display:flex; align-items:center; gap:8px; font-size:.74rem; font-weight:800; color:#6366f1; padding:4px 8px 8px; animation:rowIn .25s ease both; } .ct-edit.hidden { display:none; } .ct-edit span { flex:1; } .ct-edit button { border:0; background:transparent; color:var(--text-muted); font-size:1rem; cursor:pointer; }
.ct-row { display:flex; align-items:flex-end; gap:8px; } .ct-row textarea { flex:1; resize:none; border:2px solid var(--border,#e5e7eb); background:var(--bg-input,#f8fafc); border-radius:22px; padding:11px 16px; font-size:.95rem; font-family:inherit; color:var(--text-main); outline:0; max-height:110px; transition:border-color .2s; line-height:1.35; } .ct-row textarea:focus { border-color:#6366f1; }
.ct-send { width:46px; height:46px; border-radius:50%; border:0; flex:none; background:var(--border,#cbd5e1); color:#fff; font-size:1.05rem; cursor:pointer; transition:background .25s, transform .25s cubic-bezier(.34,1.56,.64,1); } .ct-send.ready { background:linear-gradient(135deg,#6366f1,#ec4899); box-shadow:0 10px 18px -8px rgba(99,102,241,.9); } .ct-send:active, .ct-send.pop { transform:scale(.82) rotate(-12deg); }

/* ---------- bottom sheets (history / confirm / input) ---------- */
.cs-ov { position:absolute; inset:0; z-index:20; background:rgba(15,23,42,.55); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s; } .cs-ov.on { opacity:1; pointer-events:all; }
.cs { position:absolute; left:0; right:0; bottom:0; z-index:21; max-height:88%; overflow-y:auto; background:var(--bg-card,#fff); border-radius:28px 28px 0 0; padding:10px 18px calc(20px + env(safe-area-inset-bottom,0px)); transform:translateY(105%); transition:transform .45s cubic-bezier(.16,1,.3,1); } .cs.on { transform:none; }
.cs-h { display:block; width:42px; height:5px; border-radius:5px; background:var(--border,#e2e8f0); margin:0 auto 14px; }
.cs-sm { text-align:center; } .cs-ico { width:62px; height:62px; margin:4px auto 12px; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:#fff; background:linear-gradient(135deg,#6366f1,#7c3aed); box-shadow:0 14px 24px -10px rgba(99,102,241,.9); animation:badgePop .45s cubic-bezier(.34,1.56,.64,1); } .cs-ico.red { background:linear-gradient(135deg,#ef4444,#dc2626); box-shadow:0 14px 24px -10px rgba(239,68,68,.9); }
.cs-t { font-size:1.08rem; font-weight:900; margin-bottom:6px; } .cs-p { font-size:.84rem; color:var(--text-muted,#64748b); line-height:1.55; margin-bottom:14px; }
.cs-in { width:100%; box-sizing:border-box; border:2px solid var(--border,#e5e7eb); background:var(--bg-input,#f8fafc); border-radius:16px; padding:13px 15px; font-size:.95rem; font-family:inherit; color:var(--text-main); outline:0; margin-bottom:12px; transition:border-color .2s; } .cs-in:focus { border-color:#6366f1; } textarea.cs-in { resize:none; }
.cs-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:12px; } .cs-chip { border:2px solid var(--border,#e5e7eb); background:transparent; border-radius:20px; padding:8px 14px; font-weight:800; font-size:.78rem; color:var(--text-muted); cursor:pointer; font-family:inherit; transition:.2s; } .cs-chip.on { background:#6366f1; border-color:#6366f1; color:#fff; transform:scale(1.04); }
.cs-btns { display:flex; gap:10px; margin-top:4px; } .cs-b { flex:1; border:0; padding:14px; border-radius:16px; font-weight:900; font-size:.92rem; cursor:pointer; font-family:inherit; transition:transform .2s cubic-bezier(.34,1.56,.64,1); } .cs-b:active { transform:scale(.94); } .cs-b.no { background:var(--bg-input,#f1f5f9); color:var(--text-main); } .cs-b.yes { background:linear-gradient(135deg,#6366f1,#7c3aed); color:#fff; box-shadow:0 10px 18px -8px rgba(99,102,241,.9); } .cs-b.yes.red { background:linear-gradient(135deg,#ef4444,#dc2626); box-shadow:0 10px 18px -8px rgba(239,68,68,.9); } .cs-b:disabled { opacity:.6; }
.cs-quote { background:var(--bg-input,#f1f5f9); border-radius:14px; padding:12px; font-size:.86rem; margin-bottom:10px; max-height:90px; overflow:auto; text-align:left; } .cs-timer { font-size:.74rem; font-weight:800; color:#f59e0b; margin-bottom:12px; }
.cs-list { display:flex; flex-direction:column; gap:8px; text-align:left; } .cs-list > button { border:0; background:var(--bg-input,#f1f5f9); border-radius:16px; padding:14px 16px; font-weight:800; font-size:.9rem; display:flex; align-items:center; gap:12px; cursor:pointer; font-family:inherit; color:var(--text-main); } .cs-list > button.red { color:#ef4444; } .cs-list > button:active { transform:scale(.97); }
.cs-mem { display:flex; align-items:center; gap:12px; padding:8px 6px; border-radius:14px; } .cs-mem .av { width:38px; height:38px; } .cs-mem b { flex:1; font-size:.9rem; } .cs-mem em { font-style:normal; font-size:.62rem; background:#eef2ff; color:#4f46e5; padding:2px 8px; border-radius:10px; font-weight:800; }
.cs-pick { max-height:240px; overflow-y:auto; margin-bottom:12px; } .cs-mem.pick { cursor:pointer; border:2px solid transparent; transition:.2s; } .cs-mem.pick.on { border-color:#6366f1; background:rgba(99,102,241,.08); } .cs-mem.pick i { color:#cbd5e1; } .cs-mem.pick.on i { color:#6366f1; animation:badgePop .3s; }
.cs.hist { padding-top:6px; min-height:60%; text-align:left; } .hs-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .hs-top b { font-size:1.2rem; font-weight:900; } .hs-x { width:36px; height:36px; border-radius:50%; border:0; background:var(--bg-input,#f1f5f9); cursor:pointer; color:var(--text-muted); } .hs-x:active { transform:rotate(90deg) scale(.85); }
.hs-tabs { position:relative; display:grid; grid-template-columns:1fr 1fr; background:var(--bg-input,#f1f5f9); border-radius:16px; padding:4px; margin-bottom:14px; } .hs-tabs button { position:relative; z-index:1; border:0; background:transparent; padding:11px 4px; font-weight:800; font-size:.78rem; color:var(--text-muted); cursor:pointer; font-family:inherit; display:flex; align-items:center; justify-content:center; gap:7px; transition:color .25s; } .hs-tabs button.on { color:var(--primary,#4f46e5); } .hs-tabs em { font-style:normal; background:#ef4444; color:#fff; border-radius:20px; min-width:17px; height:17px; font-size:.62rem; display:flex; align-items:center; justify-content:center; }
.hs-ind { position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); background:var(--bg-card,#fff); border-radius:13px; box-shadow:0 4px 12px rgba(0,0,0,.1); transition:transform .38s cubic-bezier(.34,1.3,.64,1); } .hs-tabs[data-a="requests"] .hs-ind { transform:translateX(100%); }
.hs-body { animation:rowIn .35s ease both; } .rq-row { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:18px; background:var(--bg-input,#f8fafc); margin-bottom:8px; animation:rowIn .4s cubic-bezier(.16,1,.3,1) both; }
.rq-b { width:42px; height:42px; border-radius:14px; border:0; font-size:1rem; cursor:pointer; transition:transform .2s cubic-bezier(.34,1.56,.64,1); flex:none; } .rq-b:active { transform:scale(.8); } .rq-b.ok { background:#dcfce7; color:#15803d; } .rq-b.no { background:#fee2e2; color:#dc2626; }
body.dark .cl-chip.hot { background:rgba(239,68,68,.12); } body.dark .mg.me .mg-b { color:#fff; }