/* ================= Surf Chill Vibe · Messages ================= */
body.scv-chat-page .site-footer, body.scv-chat-page footer.footer, body.scv-chat-page .cta-band{ display:none; }
.ch-wrap{ padding-top:calc(78px + env(safe-area-inset-top,0px)); background:var(--bg); }
.ch-app{ --me1:#2CA698; --me2:#1F7E73; position:relative; display:grid; grid-template-columns:minmax(280px,360px) 1fr; max-width:1240px; margin:1rem auto 1.5rem; height:calc(100dvh - 78px - 2.5rem); min-height:520px; background:var(--surface); border:1px solid var(--line-soft); border-radius:28px; overflow:hidden; box-shadow:0 40px 80px -50px rgba(var(--shadow)/.7); animation:chIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes chIn{ from{ opacity:0; transform:translateY(14px) scale(.99); } }

/* ---- sidebar ---- */
.ch-side{ display:flex; flex-direction:column; border-right:1px solid var(--line-soft); min-height:0; background:linear-gradient(180deg,var(--surface),var(--bg)); }
.ch-side-h{ display:flex; align-items:center; gap:.6rem; padding:1.1rem 1.1rem .7rem; }
.ch-side-h h1{ flex:1; margin:0; font-size:1.55rem; }
.ch-home, .ch-new{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:0; background:var(--bg); color:var(--ink); text-decoration:none; font-size:1.1rem; cursor:pointer; transition:transform .2s, background .2s; }
.ch-new{ background:linear-gradient(135deg,var(--me1),var(--me2)); color:#fff; box-shadow:0 10px 20px -10px rgba(31,126,115,.8); }
.ch-new:hover, .ch-home:hover{ transform:scale(1.07); }
.ch-search{ display:flex; align-items:center; gap:.5rem; margin:0 1.1rem .7rem; padding:.2rem .8rem; border-radius:14px; background:var(--bg); border:1.5px solid var(--line-soft); transition:border-color .2s, box-shadow .2s; }
.ch-search:focus-within{ border-color:var(--me1); box-shadow:0 0 0 3px rgba(44,166,152,.15); }
.ch-search input{ flex:1; border:0; background:transparent; padding:.6rem 0; font:inherit; font-size:16px; color:var(--ink); outline:none; min-width:0; }
.ch-people{ margin:0 .6rem .6rem; padding:.4rem; border-radius:16px; background:var(--surface); border:1px solid var(--line-soft); box-shadow:0 18px 36px -24px rgba(0,0,0,.4); animation:chPop .25s ease; max-height:50%; overflow:auto; }
.ch-people-h{ margin:.3rem .5rem .4rem; font:800 .7rem 'Cairo',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.ch-people-none{ margin:.4rem .5rem .6rem; color:var(--ink-soft); font-size:.9rem; }
.ch-person{ display:flex; align-items:center; gap:.6rem; width:100%; padding:.5rem; border:0; background:none; border-radius:12px; cursor:pointer; text-align:left; font:inherit; color:var(--ink); }
.ch-person:hover{ background:var(--bg); }
.ch-person b{ display:block; font-size:.92rem; } .ch-person small{ color:var(--ink-faint); font-size:.76rem; }
.ch-convs{ flex:1; overflow-y:auto; padding:.2rem .6rem 1rem; overscroll-behavior:contain; }
.ch-conv{ position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:.7rem; align-items:center; width:100%; padding:.7rem; border:0; border-radius:18px; background:transparent; cursor:pointer; text-align:left; font:inherit; color:var(--ink); transition:background .2s, transform .2s; animation:chSlide .45s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0) * 35ms); }
@keyframes chSlide{ from{ opacity:0; transform:translateX(-10px); } }
.ch-conv:hover{ background:var(--bg); }
.ch-conv.active{ background:linear-gradient(120deg,rgba(44,166,152,.16),rgba(44,166,152,.05)); }
.ch-conv.active::before{ content:""; position:absolute; left:0; top:22%; bottom:22%; width:4px; border-radius:4px; background:var(--me1); }
.ch-conv-txt{ min-width:0; }
.ch-conv-txt b{ display:block; font-size:.97rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-conv-txt small{ display:block; color:var(--ink-faint); font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-conv.unread .ch-conv-txt b{ font-weight:800; } .ch-conv.unread .ch-conv-txt small{ color:var(--ink); font-weight:600; }
.ch-conv-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; }
.ch-conv-meta time{ font-size:.72rem; color:var(--ink-faint); }
.ch-conv-meta em{ font-style:normal; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#E0344F; color:#fff; font:800 .7rem/20px 'Cairo',sans-serif; text-align:center; animation:chBadge 1.6s ease infinite; }
@keyframes chBadge{ 0%,100%{ box-shadow:0 0 0 0 rgba(224,52,79,.5); } 60%{ box-shadow:0 0 0 7px rgba(224,52,79,0); } }
.ch-tick{ font-style:normal; font-size:.72rem; color:var(--ink-faint); letter-spacing:-.18em; }
.ch-tick.read{ color:#34B7F1; }
.ch-av-wrap{ position:relative; display:inline-block; flex:none; }
.ch-dot{ position:absolute; right:0; bottom:1px; width:12px; height:12px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 2.5px var(--surface); }
.ch-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#22C55E; animation:chPing 2s ease-out infinite; }
@keyframes chPing{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(2.4); opacity:0; } }
.ch-skel{ height:62px; margin:.35rem .2rem; border-radius:16px; background:linear-gradient(100deg,var(--bg) 30%,var(--surface) 50%,var(--bg) 70%) 0 0/250% 100%; animation:cmShimmer 1.2s linear infinite; }
.ch-none{ text-align:center; padding:2.5rem 1rem; color:var(--ink-soft); }
.ch-none span{ font-size:2.4rem; display:block; animation:cmBob 3s ease-in-out infinite; }

/* ---- main ---- */
.ch-main{ position:relative; display:flex; flex-direction:column; min-height:0; min-width:0;
  background-color:var(--bg); background-image:radial-gradient(circle at 20% 10%, rgba(44,166,152,.08), transparent 40%), radial-gradient(circle at 90% 90%, rgba(200,154,75,.08), transparent 45%); }
.ch-empty{ margin:auto; text-align:center; max-width:360px; padding:2rem; }
.ch-empty[hidden]{ display:none; }
.ch-empty h2{ margin:1.2rem 0 .4rem; }
.ch-empty p{ color:var(--ink-soft); margin:0 0 1.2rem; }
.ch-empty-art{ position:relative; width:120px; height:120px; margin:0 auto; border-radius:36px; display:grid; place-items:center; font-size:3rem; background:linear-gradient(135deg,var(--me1),var(--me2)); box-shadow:0 26px 50px -24px rgba(31,126,115,.9); animation:cmBob 4s ease-in-out infinite; }
.ch-empty-art i{ position:absolute; width:14px; height:14px; border-radius:50%; background:#FAC775; animation:chFloat 3.2s ease-in-out infinite; }
.ch-empty-art i:nth-child(2){ top:-10px; right:-14px; } .ch-empty-art i:nth-child(3){ bottom:4px; left:-18px; width:10px; height:10px; background:#7BDFCF; animation-delay:.6s; } .ch-empty-art i:nth-child(4){ top:30px; right:-26px; width:8px; height:8px; background:#F6A9BD; animation-delay:1.2s; }
@keyframes chFloat{ 50%{ transform:translateY(-10px); } }
.ch-thread{ flex:1; display:flex; flex-direction:column; min-height:0; position:relative; }
.ch-thread[hidden]{ display:none; }
.ch-head{ display:flex; align-items:center; gap:.6rem; padding:.75rem 1rem; background:color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); z-index:3; }
.ch-backbtn{ display:none; width:38px; height:38px; border:0; border-radius:50%; background:var(--bg); font-size:1.6rem; line-height:1; cursor:pointer; color:var(--ink); }
.ch-who{ flex:1; min-width:0; display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--ink); }
.ch-who b{ display:block; font-size:1.02rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-who small{ color:var(--ink-faint); font-size:.78rem; } .ch-who small.on{ color:#16A34A; font-weight:700; }
.ch-head-acts{ display:flex; align-items:center; gap:.4rem; }
.ch-follow{ border:1.5px solid var(--me1); background:transparent; color:var(--me2); border-radius:999px; padding:.4rem .85rem; font:700 .8rem 'Cairo',sans-serif; cursor:pointer; transition:all .2s; }
.ch-follow .f-on, .pf-follow .f-on{ display:none; }
.ch-follow.on, .pf-follow.on{ background:var(--me1); color:#fff; }
.ch-follow.on .f-on, .pf-follow.on .f-on{ display:inline; } .ch-follow.on .f-off, .pf-follow.on .f-off{ display:none; }
.ch-follow.pop, .pf-follow.pop{ animation:vxPop .45s cubic-bezier(.3,1.6,.5,1); }
.ch-more{ width:38px; height:38px; border:0; border-radius:50%; background:var(--bg); font-size:1.2rem; cursor:pointer; color:var(--ink); }
.ch-menu-wrap{ position:relative; }
.ch-menu{ position:absolute; right:0; top:calc(100% + 6px); min-width:180px; padding:.35rem; border-radius:16px; background:var(--surface); border:1px solid var(--line-soft); box-shadow:0 20px 40px -20px rgba(0,0,0,.45); z-index:9; animation:chPop .2s ease; }
.ch-menu[hidden]{ display:none; }
.ch-menu a, .ch-menu button{ display:block; width:100%; text-align:left; padding:.6rem .7rem; border:0; background:none; border-radius:10px; font:inherit; font-size:.92rem; color:var(--ink); text-decoration:none; cursor:pointer; }
.ch-menu a:hover, .ch-menu button:hover{ background:var(--bg); }
@keyframes chPop{ from{ opacity:0; transform:translateY(-4px) scale(.97); } }
.ch-scroll{ flex:1; overflow-y:auto; padding:1rem clamp(.8rem,3vw,1.6rem) .6rem; overscroll-behavior:contain; scroll-behavior:auto; }
.ch-msgs{ display:flex; flex-direction:column; gap:3px; }
.ch-day{ position:sticky; top:.2rem; z-index:2; text-align:center; margin:.9rem 0 .5rem; }
.ch-day span{ display:inline-block; padding:.28rem .8rem; border-radius:999px; background:color-mix(in srgb, var(--surface) 85%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--line-soft); font:700 .72rem 'Cairo',sans-serif; color:var(--ink-soft); }
.ch-msg{ display:flex; align-items:flex-end; gap:.45rem; max-width:min(78%,560px); margin-top:.45rem; }
.ch-msg.grouped{ margin-top:0; }
.ch-msg.me{ align-self:flex-end; flex-direction:row-reverse; }
.ch-msg.them.grouped{ padding-left:calc(28px + .45rem); }
.ch-mav .cm-av{ width:28px; height:28px; font-size:.62rem; }
.ch-bubble{ position:relative; padding:.55rem .8rem .4rem; border-radius:20px; font-size:.97rem; line-height:1.45; overflow-wrap:anywhere; box-shadow:0 2px 6px -3px rgba(0,0,0,.18); }
.ch-msg.them .ch-bubble{ background:var(--surface); color:var(--ink); border:1px solid var(--line-soft); border-bottom-left-radius:6px; }
.ch-msg.me .ch-bubble{ background:linear-gradient(135deg,var(--me1),var(--me2)); color:#fff; border-bottom-right-radius:6px; }
.ch-msg.me.has-next .ch-bubble{ border-bottom-right-radius:20px; } .ch-msg.them.has-next .ch-bubble{ border-bottom-left-radius:20px; }
.ch-msg.me.grouped .ch-bubble{ border-top-right-radius:6px; } .ch-msg.them.grouped .ch-bubble{ border-top-left-radius:6px; }
.ch-bubble a{ color:inherit; text-decoration:underline; }
.ch-meta{ float:right; margin:.35rem 0 -.1rem .7rem; font-size:.66rem; opacity:.75; white-space:nowrap; display:inline-flex; gap:.25rem; align-items:center; }
.ch-msg.me .ch-tick{ color:rgba(255,255,255,.8); } .ch-msg.me .ch-tick.read{ color:#BDF3FF; }
.ch-msg.pop{ animation:chBubble .38s cubic-bezier(.3,1.4,.5,1) both; }
.ch-msg.me.pop{ transform-origin:bottom right; } .ch-msg.them.pop{ transform-origin:bottom left; }
@keyframes chBubble{ from{ opacity:0; transform:translateY(12px) scale(.85); } }
.ch-msg.sending .ch-bubble{ opacity:.65; }
.ch-msg.failed .ch-bubble{ box-shadow:0 0 0 2px #E0344F; }
.ch-fail{ color:#FFD5DC; }
.ch-msg.big .ch-bubble{ background:none !important; border:0 !important; box-shadow:none; font-size:2.6rem; line-height:1.15; padding:0 .2rem; }
.ch-msg.big .ch-meta{ color:var(--ink-faint); } .ch-msg.me.big .ch-tick{ color:var(--ink-faint); }
.ch-hello{ margin:auto; padding:2rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center; animation:chIn .5s ease both; }
.ch-hello b{ font-family:'Fraunces',serif; font-size:1.3rem; margin-top:.5rem; }
.ch-hello small{ color:var(--ink-soft); }
.ch-quick{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin-top:1rem; }
.ch-quick button{ border:1.5px solid var(--line); background:var(--surface); border-radius:999px; padding:.45rem .9rem; font:inherit; font-size:.88rem; cursor:pointer; color:var(--ink); transition:all .2s; }
.ch-quick button:hover{ border-color:var(--me1); color:var(--me2); transform:translateY(-2px); }
.ch-loading, .ch-typing{ display:inline-flex; gap:4px; padding:.7rem .9rem; border-radius:20px; background:var(--surface); border:1px solid var(--line-soft); }
.ch-loading{ margin:2rem auto; }
.ch-typing{ margin:.5rem 0 .2rem calc(28px + .45rem); border-bottom-left-radius:6px; animation:chBubble .3s ease both; }
.ch-typing[hidden]{ display:none; }
.ch-loading span, .ch-typing span{ width:8px; height:8px; border-radius:50%; background:var(--ink-faint); animation:chDots 1.2s ease-in-out infinite; }
.ch-loading span:nth-child(2), .ch-typing span:nth-child(2){ animation-delay:.15s; } .ch-loading span:nth-child(3), .ch-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes chDots{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-6px); opacity:1; } }
.ch-jump{ position:absolute; left:50%; bottom:88px; transform:translateX(-50%); border:0; border-radius:999px; padding:.5rem 1rem; background:var(--ink); color:var(--bg); font:700 .82rem 'Cairo',sans-serif; box-shadow:0 12px 26px -12px rgba(0,0,0,.5); cursor:pointer; z-index:4; animation:chPop .25s ease; }
.ch-jump[hidden]{ display:none; }
.ch-blocked{ padding:.8rem 1rem; text-align:center; font-size:.9rem; color:var(--ink-soft); border-top:1px solid var(--line-soft); background:var(--surface); }
.ch-blocked[hidden]{ display:none; }
.ch-blocked button{ border:0; background:none; color:var(--me2); font-weight:700; text-decoration:underline; cursor:pointer; }
.ch-err{ text-align:center; color:#B32D2E; margin:2rem 0; }

/* ---- composer ---- */
.ch-compose{ position:relative; display:flex; align-items:flex-end; gap:.5rem; padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line-soft); background:color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.ch-compose[hidden]{ display:none; }
.ch-compose textarea{ flex:1; resize:none; max-height:140px; min-height:44px; border:1.5px solid var(--line-soft); background:var(--bg); border-radius:22px; padding:.62rem 1rem; font:inherit; font-size:16px; line-height:1.4; color:var(--ink); outline:none; transition:border-color .2s, box-shadow .2s; }
.ch-compose textarea:focus{ border-color:var(--me1); box-shadow:0 0 0 3px rgba(44,166,152,.15); }
.ch-emo-btn{ width:44px; height:44px; border:0; border-radius:50%; background:var(--bg); font-size:1.3rem; cursor:pointer; flex:none; transition:transform .2s; }
.ch-emo-btn:hover, .ch-emo-btn[aria-expanded="true"]{ transform:scale(1.1) rotate(-8deg); }
.ch-emo{ position:absolute; left:.8rem; bottom:calc(100% + 8px); width:min(330px,calc(100% - 1.6rem)); display:grid; grid-template-columns:repeat(8,1fr); gap:.15rem; padding:.5rem; border-radius:18px; background:var(--surface); border:1px solid var(--line-soft); box-shadow:0 20px 44px -20px rgba(0,0,0,.45); z-index:6; animation:chPop .2s ease; }
.ch-emo[hidden]{ display:none; }
.ch-emo button{ border:0; background:none; font-size:1.35rem; padding:.3rem 0; border-radius:10px; cursor:pointer; transition:transform .15s, background .15s; }
.ch-emo button:hover{ background:var(--bg); transform:scale(1.2); }
.ch-emo button.pop{ animation:cmLike .45s cubic-bezier(.3,1.6,.5,1); }
.ch-send{ width:46px; height:46px; flex:none; border:0; border-radius:50%; display:grid; place-items:center; background:var(--line); color:#fff; cursor:pointer; transition:background .25s, transform .25s, box-shadow .25s; }
.ch-send.ready{ background:linear-gradient(135deg,var(--me1),var(--me2)); box-shadow:0 10px 22px -10px rgba(31,126,115,.9); transform:scale(1.04); }
.ch-send:disabled{ cursor:default; }
.ch-send.fly svg{ animation:chFly .45s cubic-bezier(.4,0,.2,1); }
@keyframes chFly{ 40%{ transform:translate(14px,-10px) rotate(-18deg); opacity:0; } 41%{ transform:translate(-12px,8px); opacity:0; } 100%{ transform:none; opacity:1; } }

/* ---- gate ---- */
.ch-gate{ padding:3rem 0 5rem; }
.ch-gate-card{ max-width:520px; margin:0 auto; text-align:center; background:var(--surface); border:1px solid var(--line-soft); border-radius:28px; padding:2.4rem 1.6rem; box-shadow:0 30px 60px -40px rgba(var(--shadow)/.6); }
.ch-gate-ico{ font-size:3rem; animation:cmBob 3s ease-in-out infinite; }
.ch-gate-card h1{ font-size:1.8rem; margin:.6rem 0; }
.ch-gate-card p{ color:var(--ink-soft); }
.ch-gate-card .cm-join-btns{ justify-content:center; margin:1.2rem 0; }
.ch-back-link{ color:var(--me2); font-weight:700; text-decoration:none; }

/* ---- phones: one pane at a time, like an app ---- */
@media (max-width:820px){
  .ch-wrap{ padding-top:calc(66px + env(safe-area-inset-top,0px)); }
  .ch-app{ grid-template-columns:1fr; margin:0; border-radius:0; border:0; height:calc(100dvh - 66px - env(safe-area-inset-top,0px)); min-height:0; box-shadow:none; }
  .ch-app[data-state="list"] .ch-main{ display:none; }
  .ch-app[data-state="thread"] .ch-side{ display:none; }
  .ch-backbtn{ display:grid; place-items:center; }
  .ch-app[data-state="thread"] .ch-main{ animation:chSlideIn .35s cubic-bezier(.2,.8,.2,1); }
  @keyframes chSlideIn{ from{ transform:translateX(30px); opacity:0; } }
  .ch-msg{ max-width:84%; }
  .ch-follow{ padding:.35rem .65rem; font-size:.74rem; }
}
@media (prefers-reduced-motion: reduce){ .ch-app *, .ch-app{ animation:none !important; transition:none !important; } }

/* profile follow / message buttons */
.pf-follow-n{ margin:.7rem 0 0; color:var(--ink-soft); font-size:.9rem; }
.pf-follow-n b{ color:var(--ink); }
.pf-actions{ display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap; }
.pf-follow{ min-width:118px; justify-content:center; }
.pf-follow .f-on{ display:none; }
.pf-follow.on{ background:#1F7E73; }
.pf-follow.on .f-on{ display:inline; } .pf-follow.on .f-off{ display:none; }
.cm-dm-n{ min-width:22px; height:22px; padding:0 7px; border-radius:999px; background:#E0344F; color:#fff; font:800 .72rem/22px 'Cairo',sans-serif; text-align:center; margin-left:auto; }
.cm-dm-n[hidden]{ display:none; }
.cm-dm-row{ text-decoration:none; }
/* the chat page is an app screen: no footer, no floating pills */
body.scv-chat-page footer.ftz, body.scv-chat-page .ftz-band, body.scv-chat-page .a2hs{ display:none !important; }
@media (max-width:820px){ .ch-wrap{ padding-top:calc(58px + env(safe-area-inset-top,0px)); } .ch-app{ height:calc(100dvh - 58px - env(safe-area-inset-top,0px)); } }
.ch-wrap, body .ch-wrap{ padding-top:0 !important; }
@media (max-width:820px){ body.scv-chat-page .inner-main{ padding-bottom:0; } }

/* phones: the chat is a fixed app screen, the page itself never scrolls (like WhatsApp) */
@media (max-width:820px){
  html.ch-lock, html.ch-lock body{ overflow:hidden; height:100%; overscroll-behavior:none; }
  html.ch-lock body{ position:fixed; inset:0; width:100%; }
  html.ch-lock .inner-main{ padding:0; min-height:0; }
  .ch-app{ margin:0; z-index:40; border-radius:0; transition:height .18s ease, top .18s ease; }
  .ch-scroll{ -webkit-overflow-scrolling:touch; }
  .ch-app.kb .ch-compose{ padding-bottom:.55rem; }
  .ch-compose{ padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px)); }
  .ch-scroll::-webkit-scrollbar{ display:none; }
  .ch-scroll{ scrollbar-width:none; }
}

/* ================= Me in the header ================= */
.ch-me{ flex:1; min-width:0; display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); }
.ch-me-av{ position:relative; flex:none; border-radius:50%; padding:2px; background:conic-gradient(from 0deg, var(--me1), var(--acc), var(--me2), var(--me1)); animation:chRing 6s linear infinite; }
.ch-me-av .cm-av{ box-shadow:0 0 0 2px var(--surface); }
@keyframes chRing{ to{ filter:hue-rotate(360deg); } }
.ch-me-txt{ min-width:0; }
.ch-me-txt h1{ margin:0; font-size:1.35rem; line-height:1.05; }
.ch-me-txt small{ display:block; color:var(--ink-faint); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-me:hover .ch-me-txt small{ color:var(--me2); }

/* ================= Themes ================= */
.ch-app{ --acc:#FAC775; --them:var(--surface); --scene1:rgba(44,166,152,.14); --scene2:rgba(200,154,75,.10); --wave1:rgba(44,166,152,.12); --wave2:rgba(44,166,152,.08); --sidebar:linear-gradient(180deg,var(--surface),var(--bg)); transition:--me1 .6s; }
.ch-app[data-theme="surf"]{ --me1:#2CA698; --me2:#1F6F8B; --acc:#7BDFCF; --scene1:rgba(44,166,152,.16); --scene2:rgba(31,111,139,.12); --wave1:rgba(44,166,152,.16); --wave2:rgba(31,111,139,.10); }
.ch-app[data-theme="adventure"]{ --me1:#E0873A; --me2:#B5532B; --acc:#F6C35B; --scene1:rgba(224,135,58,.16); --scene2:rgba(181,83,43,.12); --wave1:rgba(214,164,96,.22); --wave2:rgba(181,83,43,.12); }
.ch-app[data-theme="yoga"]{ --me1:#8F83C9; --me2:#5E8C74; --acc:#C9B8F0; --scene1:rgba(143,131,201,.16); --scene2:rgba(94,140,116,.14); --wave1:rgba(143,131,201,.14); --wave2:rgba(94,140,116,.12); }
.ch-app .ch-conv.active{ background:linear-gradient(120deg, color-mix(in srgb, var(--me1) 18%, transparent), color-mix(in srgb, var(--me1) 5%, transparent)); }
.ch-app .ch-conv.active::before{ background:var(--me1); }
.ch-app .ch-new, .ch-app .ch-send.ready{ background:linear-gradient(135deg,var(--me1),var(--me2)); box-shadow:0 10px 22px -10px color-mix(in srgb, var(--me2) 90%, transparent); }
.ch-app .ch-follow{ border-color:var(--me1); color:var(--me2); } .ch-app .ch-follow.on{ background:var(--me1); color:#fff; }
.ch-app .ch-search:focus-within, .ch-app .ch-compose textarea:focus{ border-color:var(--me1); box-shadow:0 0 0 3px color-mix(in srgb, var(--me1) 18%, transparent); }
.ch-app .ch-empty-art{ background:linear-gradient(135deg,var(--me1),var(--me2)); box-shadow:0 26px 50px -24px var(--me2); }
.ch-app .ch-msg.me .ch-bubble{ background:linear-gradient(135deg,var(--me1),var(--me2)); box-shadow:0 8px 18px -12px var(--me2); }
.ch-app .ch-day span{ color:var(--me2); }
.ch-app .ch-who small.on{ color:var(--me2); }

/* animated scenery behind the conversation */
.ch-main{ isolation:isolate; }
.ch-scene{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:radial-gradient(circle at 18% 12%, var(--scene1), transparent 42%), radial-gradient(circle at 88% 88%, var(--scene2), transparent 48%), var(--bg); transition:background .8s ease; }
.ch-scene i{ position:absolute; border-radius:50%; filter:blur(38px); opacity:.55; animation:chOrb 16s ease-in-out infinite; }
.ch-scene .s1{ width:260px; height:260px; left:-60px; top:20%; background:var(--scene1); }
.ch-scene .s2{ width:220px; height:220px; right:-40px; top:8%; background:var(--scene2); animation-delay:-5s; }
.ch-scene .s3{ width:180px; height:180px; left:40%; bottom:10%; background:var(--scene1); animation-delay:-10s; }
@keyframes chOrb{ 0%,100%{ transform:translate(0,0) scale(1); } 33%{ transform:translate(30px,-20px) scale(1.1); } 66%{ transform:translate(-20px,24px) scale(.95); } }
.ch-wave{ position:absolute; left:0; bottom:0; width:200%; height:110px; transition:opacity .6s; }
.ch-wave path{ transition:fill .8s; }
.ch-wave.w1 path{ fill:var(--wave1); } .ch-wave.w2 path{ fill:var(--wave2); }
.ch-wave.w1{ animation:cmSea 18s linear infinite; bottom:40px; } .ch-wave.w2{ animation:cmSea 11s linear infinite reverse; }
/* adventure: dune shapes and a warm sun; yoga: slow breathing, no waves */
.ch-app[data-theme="adventure"] .ch-wave{ height:150px; }
.ch-app[data-theme="adventure"] .ch-wave.w1{ animation-duration:40s; }
.ch-app[data-theme="adventure"] .ch-wave.w2{ animation-duration:28s; }
.ch-app[data-theme="adventure"] .ch-scene .s2{ width:120px; height:120px; right:12%; top:10%; filter:blur(2px); opacity:.45; background:radial-gradient(circle, #F6C35B, rgba(246,195,91,0) 70%); animation:chSun 9s ease-in-out infinite; }
@keyframes chSun{ 50%{ transform:translateY(12px) scale(1.06); } }
.ch-app[data-theme="yoga"] .ch-wave{ opacity:.0; }
.ch-app[data-theme="yoga"] .ch-scene i{ animation:chBreathe 8s ease-in-out infinite; opacity:.6; }
.ch-app[data-theme="yoga"] .ch-scene .s2{ animation-delay:-2.6s; } .ch-app[data-theme="yoga"] .ch-scene .s3{ animation-delay:-5.2s; }
@keyframes chBreathe{ 0%,100%{ transform:scale(.85); opacity:.35; } 50%{ transform:scale(1.2); opacity:.7; } }
/* switching theme: a soft colour sweep */
.ch-app.theme-swap .ch-main::after{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none; background:radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--me1) 55%, transparent), transparent 60%); animation:chSweep .9s ease forwards; }
@keyframes chSweep{ from{ opacity:0; transform:scale(.4); transform-origin:top right; } 40%{ opacity:1; } to{ opacity:0; transform:scale(1.6); transform-origin:top right; } }
.ch-app.theme-swap .ch-msg.me .ch-bubble{ animation:chTint .8s ease; }
@keyframes chTint{ 50%{ transform:scale(1.03); } }

/* theme button + picker */
.ch-theme-btn{ width:38px; height:38px; border:0; border-radius:50%; background:var(--bg); font-size:1.05rem; cursor:pointer; transition:transform .25s; }
.ch-theme-btn:hover{ transform:rotate(-14deg) scale(1.08); }
.ch-theme-float{ position:absolute; top:14px; right:14px; z-index:4; box-shadow:0 8px 20px -12px rgba(0,0,0,.4); background:var(--surface); }
.ch-thread:not([hidden]) ~ .ch-theme-float, .ch-app[data-state="thread"] .ch-theme-float{ display:none; }
.ch-themes{ position:absolute; z-index:12; width:270px; padding:.5rem; border-radius:20px; background:var(--surface); border:1px solid var(--line-soft); box-shadow:0 26px 50px -22px rgba(0,0,0,.45); animation:chPop .22s ease; }
.ch-themes[hidden]{ display:none; }
.ch-themes-h{ margin:.35rem .6rem .5rem; font:800 .7rem 'Cairo',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.ch-themes button{ display:flex; align-items:center; gap:.7rem; width:100%; padding:.55rem; border:2px solid transparent; border-radius:14px; background:none; cursor:pointer; text-align:left; font:inherit; color:var(--ink); transition:background .2s, border-color .2s; }
.ch-themes button:hover{ background:var(--bg); }
.ch-themes button.on{ border-color:var(--me1); background:color-mix(in srgb, var(--me1) 8%, transparent); }
.ch-themes b{ display:block; font-size:.95rem; } .ch-themes small{ color:var(--ink-faint); font-size:.78rem; }
.ch-sw{ position:relative; width:46px; height:46px; border-radius:14px; flex:none; overflow:hidden; }
.ch-sw i{ position:absolute; right:6px; bottom:6px; width:20px; height:12px; border-radius:8px 8px 3px 8px; background:#fff; opacity:.9; }
.sw-surf{ background:linear-gradient(135deg,#2CA698,#1F6F8B); }
.sw-adventure{ background:linear-gradient(135deg,#F6C35B,#E0873A 50%,#B5532B); }
.sw-yoga{ background:linear-gradient(135deg,#C9B8F0,#8F83C9 50%,#5E8C74); }
@media (max-width:820px){ .ch-me-txt h1{ font-size:1.2rem; } }
.ch-app .ch-msg.big .ch-bubble{ background:none !important; box-shadow:none !important; border:0 !important; }
/* follow lives in the ⋯ menu now */
.ch-menu-follow .f-on{ display:none; } .ch-menu-follow.on .f-on{ display:inline; } .ch-menu-follow.on .f-off{ display:none; }
/* emoji icons in round buttons: full size on iPhone */
.ch-theme-btn, .ch-emo-btn, .ch-more{ font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif; line-height:1; padding:0; display:grid; place-items:center; -webkit-text-size-adjust:100%; }
.ch-theme-btn, .ch-emo-btn{ font-size:21px !important; }
.ch-more{ font-size:20px !important; font-weight:700; }
@media (max-width:820px){ .ch-head{ gap:.45rem; padding:.6rem .7rem; } .ch-who{ gap:.5rem; } .ch-who b{ font-size:.98rem; } }

/* header C: big title, ✎ and my small photo on the right */
.ch-side-c{ gap:.5rem; }
.ch-side-c h1{ flex:1; font-size:1.75rem; margin:0; }
.ch-me-mini{ flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; text-decoration:none; transition:transform .2s; }
.ch-me-mini:hover{ transform:scale(1.07); }
.ch-me-mini .cm-av{ width:36px !important; height:36px !important; min-width:36px; flex:none; aspect-ratio:1/1; font-size:.75rem; box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--me1); }
.ch-me-mini .cm-av img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.cm-av{ aspect-ratio:1/1; flex-shrink:0; }

/* ================= replies, voice, edit / delete ================= */
.ch-msg{ position:relative; --sw:0px; }
.ch-msg .ch-bubble{ transition:transform .25s cubic-bezier(.2,.8,.2,1); }
.ch-msg.swiping .ch-bubble, .ch-msg.swiping .ch-mav{ transform:translateX(var(--sw)); transition:none; }
.ch-swipe{ position:absolute; left:-4px; top:50%; transform:translate(-100%,-50%) scale(.6); opacity:0; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line-soft); color:var(--me2); font-size:1rem; transition:opacity .15s, transform .2s; pointer-events:none; }
.ch-msg.me .ch-swipe{ left:auto; right:calc(100% + 4px); transform:translate(0,-50%) scale(.6); }
.ch-msg.swiping .ch-swipe{ opacity:calc(var(--sw) / 60px); left:6px; transform:translate(0,-50%) scale(.85); }
.ch-msg.armed .ch-swipe{ transform:translate(0,-50%) scale(1.1); background:var(--me1); color:#fff; }
.ch-msg.flash .ch-bubble{ animation:chFlash 1s ease; }
@keyframes chFlash{ 0%,100%{ box-shadow:0 2px 6px -3px rgba(0,0,0,.18); } 30%{ box-shadow:0 0 0 4px color-mix(in srgb, var(--acc) 70%, transparent); transform:scale(1.02); } }
.ch-msg.picked .ch-bubble{ transform:scale(1.03); box-shadow:0 14px 30px -14px rgba(0,0,0,.5); }
/* hover actions (computers) */
.ch-acts{ position:absolute; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .15s; }
.ch-msg.them .ch-acts{ right:-40px; } .ch-msg.me .ch-acts{ left:-40px; }
.ch-msg:hover .ch-acts{ opacity:1; }
.ch-acts button{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line-soft); background:var(--surface); color:var(--me2); cursor:pointer; font-size:.95rem; }
@media (hover:none){ .ch-acts{ display:none; } }
/* quote inside a bubble */
.ch-quote{ display:block; width:100%; text-align:left; margin:-.1rem 0 .4rem; padding:.35rem .6rem; border:0; border-left:3px solid var(--acc); border-radius:10px; background:rgba(0,0,0,.08); color:inherit; font:inherit; cursor:pointer; }
.ch-msg.them .ch-quote{ background:color-mix(in srgb, var(--me1) 10%, transparent); border-left-color:var(--me1); }
.ch-quote b{ display:block; font-size:.74rem; opacity:.9; }
.ch-quote span{ display:block; font-size:.82rem; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:260px; }
.ch-msg.me .ch-quote{ background:rgba(255,255,255,.16); }
/* deleted / edited */
.ch-del{ font-style:italic; opacity:.75; }
.ch-msg.deleted .ch-bubble{ background:transparent !important; border:1px dashed var(--line) !important; color:var(--ink-soft) !important; box-shadow:none !important; }
.ch-meta em{ font-style:italic; opacity:.85; }
/* voice bubble */
.ch-voice{ display:flex; align-items:center; gap:.55rem; min-width:210px; padding:.1rem 0 .15rem; }
.ch-play{ width:36px; height:36px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; flex:none; background:rgba(255,255,255,.22); color:inherit; }
.ch-msg.them .ch-play{ background:var(--me1); color:#fff; }
.ch-play .i-pause{ display:none; } .ch-voice.playing .i-pause{ display:block; } .ch-voice.playing .i-play{ display:none; }
.ch-wave-bars{ flex:1; display:flex; align-items:center; gap:2px; height:30px; }
.ch-wave-bars i{ flex:1; min-width:2px; height:var(--v); border-radius:2px; background:currentColor; opacity:.35; transition:opacity .15s; }
.ch-wave-bars i.on{ opacity:1; }
.ch-voice.playing .ch-wave-bars i.on:last-of-type{ animation:none; }
.ch-vdur{ font-size:.74rem; opacity:.85; font-variant-numeric:tabular-nums; flex:none; }
.ch-msg.voice .ch-meta{ margin-top:.1rem; }
/* reply / edit bar */
.ch-rbar{ display:flex; align-items:center; gap:.6rem; margin:0 .9rem; padding:.5rem .7rem; border-radius:14px 14px 0 0; background:var(--surface); border:1px solid var(--line-soft); border-bottom:0; }
.ch-rbar[hidden]{ display:none; }
.ch-rbar.in{ animation:chRbar .25s cubic-bezier(.2,.8,.2,1); }
@keyframes chRbar{ from{ transform:translateY(10px); opacity:0; } }
.ch-rbar-ic{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--me1) 15%, transparent); color:var(--me2); flex:none; }
.ch-rbar-txt{ flex:1; min-width:0; border-left:3px solid var(--me1); padding-left:.55rem; }
.ch-rbar-txt b{ display:block; font-size:.8rem; color:var(--me2); }
.ch-rbar-txt small{ display:block; font-size:.84rem; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-rbar-x{ width:30px; height:30px; border:0; border-radius:50%; background:var(--bg); cursor:pointer; color:var(--ink); flex:none; }
.ch-send.edit{ background:linear-gradient(135deg,#E7B24A,#C98A1E) !important; }
/* message menu (long press) */
.ch-mmenu{ position:fixed; inset:0; z-index:9600; background:rgba(8,20,18,.35); display:flex; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .18s; }
.ch-mmenu[hidden]{ display:none; }
.ch-mmenu.in{ opacity:1; }
.ch-mmenu-card{ width:min(420px,100%); margin:0 .8rem calc(.8rem + env(safe-area-inset-bottom,0px)); padding:.4rem; border-radius:20px; background:var(--surface); box-shadow:0 20px 50px -20px rgba(0,0,0,.5); transform:translateY(20px); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.ch-mmenu.in .ch-mmenu-card{ transform:none; }
.ch-mmenu-card button{ display:block; width:100%; text-align:left; padding:.85rem 1rem; border:0; background:none; border-radius:14px; font:inherit; font-size:1rem; color:var(--ink); cursor:pointer; }
.ch-mmenu-card button:hover{ background:var(--bg); }
.ch-mmenu-card button.danger{ color:#D6334A; }
.ch-mmenu-card small{ display:block; padding:.3rem 1rem .6rem; color:var(--ink-faint); font-size:.78rem; }
@media (min-width:821px){ .ch-mmenu{ align-items:center; } }
/* mic + recording */
.ch-mic{ width:46px; height:46px; flex:none; border:0; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--me1),var(--me2)); color:#fff; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; transition:transform .2s; box-shadow:0 10px 22px -10px var(--me2); }
.ch-mic[hidden], .ch-send[hidden]{ display:none; }
.ch-mic.rec{ transform:scale(1.35); background:#E0344F; box-shadow:0 0 0 10px rgba(224,52,79,.18); }
.ch-rec{ position:absolute; left:.9rem; right:calc(46px + 1.6rem); top:50%; transform:translate(var(--sl,0px),-50%); display:flex; align-items:center; gap:.6rem; padding:.5rem .8rem; border-radius:22px; background:var(--surface); border:1px solid var(--line-soft); z-index:3; transition:opacity .2s; }
.ch-rec[hidden]{ display:none; }
.ch-rec-dot{ width:10px; height:10px; border-radius:50%; background:#E0344F; animation:chRecBlink 1s ease infinite; flex:none; }
@keyframes chRecBlink{ 50%{ opacity:.25; } }
.ch-rec-t{ font:700 .9rem 'Cairo',sans-serif; font-variant-numeric:tabular-nums; flex:none; }
.ch-rec-wave{ flex:1; min-width:0; height:30px; width:100%; }
.ch-rec-hint{ font-size:.78rem; color:var(--ink-faint); flex:none; animation:chHint 1.4s ease-in-out infinite; }
@keyframes chHint{ 50%{ transform:translateX(-5px); } }
.ch-rec.cancel{ opacity:.45; }
.ch-rec.cancel .ch-rec-hint{ color:#E0344F; }
.ch-compose.recording textarea, .ch-compose.recording .ch-emo-btn{ visibility:hidden; }
@media (max-width:480px){ .ch-rec-hint{ display:none; } }

/* ================= reactions on messages ================= */
.ch-rx{ position:absolute; bottom:-15px; display:flex; gap:3px; z-index:2; }
.ch-msg.me .ch-rx{ right:10px; } .ch-msg.them .ch-rx{ left:10px; }
.ch-msg:has(.ch-rx){ margin-bottom:14px; }
.ch-rx-c{ display:inline-flex; align-items:center; gap:2px; height:24px; padding:0 .4rem; border-radius:999px; border:1.5px solid var(--surface); background:var(--surface); color:var(--ink); font-size:.82rem; line-height:1; cursor:pointer; box-shadow:0 3px 10px -4px rgba(0,0,0,.35); animation:chRxIn .35s cubic-bezier(.3,1.6,.5,1); font-family:"Apple Color Emoji","Segoe UI Emoji",system-ui,sans-serif; }
.ch-rx-c b{ font:700 .7rem 'Cairo',sans-serif; color:var(--ink-soft); }
.ch-rx-c.mine{ border-color:var(--me1); background:color-mix(in srgb, var(--me1) 14%, var(--surface)); }
@keyframes chRxIn{ from{ transform:scale(.3); opacity:0; } }
.ch-heart{ position:absolute; left:50%; top:50%; font-size:2.6rem; transform:translate(-50%,-50%) scale(.2); pointer-events:none; animation:chHeart .85s cubic-bezier(.2,.9,.3,1.2) forwards; filter:drop-shadow(0 6px 12px rgba(0,0,0,.25)); z-index:4; }
@keyframes chHeart{ 30%{ transform:translate(-50%,-50%) scale(1.25); opacity:1; } 60%{ transform:translate(-50%,-60%) scale(1); } 100%{ transform:translate(-50%,-120%) scale(.8); opacity:0; } }
.ch-rx-row{ display:flex; justify-content:space-between; gap:.2rem; padding:.3rem .3rem .5rem; border-bottom:1px solid var(--line-soft); margin-bottom:.3rem; }
.ch-rx-row button{ width:44px; height:44px; border:0; border-radius:50%; background:none; font-size:1.55rem; cursor:pointer; transition:transform .15s, background .15s; animation:chRxIn .35s cubic-bezier(.3,1.6,.5,1) both; animation-delay:calc(var(--i) * 30ms); font-family:"Apple Color Emoji","Segoe UI Emoji",system-ui,sans-serif; }
.ch-rx-row button:hover{ transform:scale(1.25) translateY(-3px); background:var(--bg); }
.ch-rx-row button.on{ background:color-mix(in srgb, var(--me1) 18%, transparent); }
.ch-acts{ display:flex; gap:4px; }
.ch-msg.them .ch-acts{ right:-76px; } .ch-msg.me .ch-acts{ left:-76px; }
.ch-msg:has(.ch-rx){ margin-bottom:20px !important; } .ch-msg:has(.ch-rx) + .ch-msg{ margin-top:.2rem; }

/* swipe-to-reply: only the bubble moves, the chat and its background stay still */
.ch-scroll{ overflow-x:hidden !important; overscroll-behavior-x:none; touch-action:pan-y; }
.ch-msgs{ overflow-x:clip; }
.ch-msg{ touch-action:pan-y; }
.ch-main, .ch-thread{ overflow-x:hidden; }
html.ch-lock, html.ch-lock body{ overflow-x:hidden; touch-action:pan-y; }
.ch-msg.them .ch-swipe{ left:6px; transform:translate(-8px,-50%) scale(.6); }
.ch-msg.me .ch-swipe{ right:auto; left:6px; transform:translate(-8px,-50%) scale(.6); }

/* ================= photos in chat ================= */
.ch-photo-btn{ width:44px; height:44px; flex:none; border:0; border-radius:50%; display:grid; place-items:center; background:var(--bg); color:var(--me2); cursor:pointer; transition:transform .2s; }
.ch-photo-btn:hover{ transform:scale(1.08); }
.ch-compose.recording .ch-photo-btn{ visibility:hidden; }
.ch-msg.image .ch-bubble{ padding:4px; }
.ch-img{ position:relative; display:block; width:min(260px,62vw); max-height:360px; padding:0; border:0; border-radius:16px; overflow:hidden; cursor:zoom-in; background:rgba(0,0,0,.08); }
.ch-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ch-msg.image .ch-meta{ margin:.3rem .5rem .1rem; }
.ch-cap{ display:block; padding:.35rem .5rem 0; }
.ch-msg.image:not(:has(.ch-cap)) .ch-meta{ position:absolute; right:12px; bottom:10px; margin:0; padding:.1rem .45rem; border-radius:999px; background:rgba(0,0,0,.45); color:#fff; opacity:1; }
.ch-msg.image:not(:has(.ch-cap)) .ch-tick{ color:#fff !important; }
.ch-img-up{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.35); }
.ch-img-up i{ width:46px; height:46px; border-radius:50%; background:conic-gradient(#fff calc(var(--p,0) * 1%), rgba(255,255,255,.25) 0); -webkit-mask:radial-gradient(circle, transparent 15px, #000 16px); mask:radial-gradient(circle, transparent 15px, #000 16px); transition:background .2s; }
.ch-light{ position:fixed; inset:0; z-index:9700; background:rgba(0,0,0,.92); display:grid; place-items:center; opacity:0; transition:opacity .25s; padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px); }
.ch-light[hidden]{ display:none; }
.ch-light.in{ opacity:1; }
.ch-light img{ max-width:100vw; max-height:92vh; object-fit:contain; transform:scale(.94); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.ch-light.in img{ transform:none; }
.ch-light-x{ position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:14px; width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.15); color:#fff; font-size:1.1rem; cursor:pointer; }
@media (max-width:480px){ .ch-compose{ gap:.35rem; } .ch-photo-btn, .ch-emo-btn{ width:40px; height:40px; } }

/* ================= 🤘 Metal Rock theme ================= */
.ch-app[data-theme="metal"]{ --me1:#B3122E; --me2:#3A0710; --acc:#E4E4E7; --scene1:rgba(179,18,46,.22); --scene2:rgba(120,120,130,.18); }
.ch-app[data-theme="metal"] .ch-scene{ background:radial-gradient(120% 70% at 50% 120%, rgba(179,18,46,.35), transparent 60%), linear-gradient(180deg,#141416,#0B0B0D 60%,#1A0A0D); }
.ch-app[data-theme="metal"] .ch-wave{ opacity:0; }
.ch-app[data-theme="metal"] .ch-scene i{ filter:none; border-radius:50%; width:6px !important; height:6px !important; background:#FF5A3C !important; box-shadow:0 0 12px 3px rgba(255,90,60,.8); opacity:.9; animation:chEmber 5.5s linear infinite; bottom:-10px; top:auto !important; }
.ch-app[data-theme="metal"] .ch-scene .s1{ left:18% !important; animation-delay:0s; }
.ch-app[data-theme="metal"] .ch-scene .s2{ left:62% !important; right:auto !important; animation-delay:-2s; animation-duration:6.5s; }
.ch-app[data-theme="metal"] .ch-scene .s3{ left:84% !important; animation-delay:-4s; animation-duration:4.8s; }
@keyframes chEmber{ 0%{ transform:translate(0,0) scale(1); opacity:0; } 10%{ opacity:1; } 50%{ transform:translate(-18px,-45vh) scale(.8); } 100%{ transform:translate(12px,-95vh) scale(.3); opacity:0; } }
.ch-app[data-theme="metal"] .ch-scene::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 45%, rgba(255,255,255,.9) 47%, transparent 49%, transparent 60%, rgba(255,255,255,.6) 61%, transparent 62%); opacity:0; mix-blend-mode:screen; animation:chBolt 7s steps(1) infinite; }
@keyframes chBolt{ 0%,92%,96%,100%{ opacity:0; } 93%,95%{ opacity:.35; } 94%{ opacity:.08; } }
.ch-app[data-theme="metal"] .ch-scene::before{ content:""; position:absolute; inset:0; background:rgba(255,255,255,.0); animation:chFlash 7s steps(1) infinite; }
@keyframes chFlash{ 0%,92%,100%{ background:rgba(255,255,255,0); } 93%{ background:rgba(255,255,255,.07); } }
.ch-app[data-theme="metal"] .ch-msg.me .ch-bubble{ background:linear-gradient(135deg,#C8173A,#5A0B18) !important; border:1px solid rgba(228,228,231,.35); box-shadow:0 8px 20px -10px rgba(179,18,46,.9), inset 0 1px 0 rgba(255,255,255,.18) !important; }
.ch-app[data-theme="metal"] .ch-msg.them .ch-bubble{ background:linear-gradient(180deg,#2A2A2E,#1C1C1F); color:#EDEDED; border:1px solid #3F3F46; }
.ch-app[data-theme="metal"] .ch-msg.them .ch-meta{ color:#A1A1AA; }
.ch-app[data-theme="metal"] .ch-day span{ background:rgba(20,20,22,.8); color:#E4E4E7; border-color:#3F3F46; letter-spacing:.12em; text-transform:uppercase; }
.ch-app[data-theme="metal"] .ch-head, .ch-app[data-theme="metal"] .ch-compose{ background:rgba(12,12,14,.85); border-color:#27272A; }
.ch-app[data-theme="metal"] .ch-who b, .ch-app[data-theme="metal"] .ch-compose textarea{ color:#F4F4F5; }
.ch-app[data-theme="metal"] .ch-compose textarea{ background:#18181B; border-color:#3F3F46; }
.ch-app[data-theme="metal"] .ch-empty h2, .ch-app[data-theme="metal"] .ch-empty p{ color:#E4E4E7; }
.ch-app[data-theme="metal"] .ch-empty-art{ background:linear-gradient(135deg,#C8173A,#18181B); }
.ch-app[data-theme="metal"] .ch-quote{ border-left-color:#E4E4E7; }
.ch-app.theme-swap[data-theme="metal"] .ch-main::after{ background:radial-gradient(circle at 100% 0%, rgba(255,255,255,.7), rgba(179,18,46,.4) 30%, transparent 60%); }

/* ================= 🦁 Reggae theme ================= */
.ch-app[data-theme="reggae"]{ --me1:#1E9E4A; --me2:#0E6B2F; --acc:#F7C325; --scene1:rgba(247,195,37,.22); --scene2:rgba(214,40,40,.14); --wave1:rgba(214,40,40,.18); --wave2:rgba(30,158,74,.20); }
.ch-app[data-theme="reggae"] .ch-scene{ background:radial-gradient(90% 60% at 50% 115%, rgba(247,195,37,.35), transparent 60%), linear-gradient(180deg,#FFF8E6,#FFF1CC); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ch-app[data-theme="reggae"] .ch-scene{ background:radial-gradient(90% 60% at 50% 115%, rgba(247,195,37,.25), transparent 60%), linear-gradient(180deg,#1B160C,#221A08); } }
.ch-app[data-theme="reggae"] .ch-scene::before{ content:""; position:absolute; left:50%; bottom:-60vh; width:140vh; height:140vh; margin-left:-70vh; border-radius:50%; opacity:.22;
  background:repeating-conic-gradient(from 0deg, #F7C325 0deg 6deg, transparent 6deg 18deg); -webkit-mask:radial-gradient(circle, transparent 18%, #000 20%, #000 60%, transparent 70%); mask:radial-gradient(circle, transparent 18%, #000 20%, #000 60%, transparent 70%); animation:chRays 60s linear infinite; }
@keyframes chRays{ to{ transform:rotate(360deg); } }
.ch-app[data-theme="reggae"] .ch-scene::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:12px; background:linear-gradient(180deg,#D62828 0 33.3%,#F7C325 33.3% 66.6%,#1E9E4A 66.6%); opacity:.9; }
.ch-app[data-theme="reggae"] .ch-wave.w1{ bottom:12px; } .ch-app[data-theme="reggae"] .ch-wave.w2{ bottom:12px; }
.ch-app[data-theme="reggae"] .ch-scene i{ filter:blur(30px); animation:chVibe 6s ease-in-out infinite; }
.ch-app[data-theme="reggae"] .ch-scene .s1{ background:rgba(214,40,40,.25); } .ch-app[data-theme="reggae"] .ch-scene .s2{ background:rgba(247,195,37,.35); animation-delay:-2s; } .ch-app[data-theme="reggae"] .ch-scene .s3{ background:rgba(30,158,74,.28); animation-delay:-4s; }
@keyframes chVibe{ 0%,100%{ transform:translateY(0) scale(1); } 25%{ transform:translateY(-10px) scale(1.05); } 75%{ transform:translateY(8px) scale(.97); } }
.ch-app[data-theme="reggae"] .ch-msg.me .ch-bubble{ background:linear-gradient(135deg,#1E9E4A,#0E6B2F) !important; border-bottom:3px solid #F7C325; box-shadow:0 8px 18px -10px rgba(14,107,47,.8) !important; }
.ch-app[data-theme="reggae"] .ch-msg.them .ch-bubble{ border-left:3px solid #D62828; }
.ch-app[data-theme="reggae"] .ch-day span{ background:linear-gradient(90deg,rgba(214,40,40,.15),rgba(247,195,37,.2),rgba(30,158,74,.15)); color:#7A5A00; border-color:rgba(247,195,37,.5); }
.ch-app[data-theme="reggae"] .ch-new, .ch-app[data-theme="reggae"] .ch-send.ready, .ch-app[data-theme="reggae"] .ch-mic{ background:conic-gradient(from 200deg,#D62828,#F7C325,#1E9E4A,#D62828) !important; }
.ch-app[data-theme="reggae"] .ch-empty-art{ background:linear-gradient(135deg,#D62828,#F7C325 50%,#1E9E4A); }
.ch-app.theme-swap[data-theme="reggae"] .ch-main::after{ background:radial-gradient(circle at 100% 0%, rgba(247,195,37,.7), rgba(214,40,40,.35) 30%, rgba(30,158,74,.25) 45%, transparent 62%); }

/* swatches */
.sw-metal{ background:linear-gradient(135deg,#27272A,#0B0B0D 45%,#B3122E); }
.sw-metal::after{ content:""; position:absolute; left:12px; top:4px; width:10px; height:26px; background:#F4F4F5; clip-path:polygon(60% 0,0 55%,45% 55%,25% 100%,100% 40%,55% 40%); opacity:.85; }
.sw-reggae{ background:linear-gradient(180deg,#D62828 0 33.3%,#F7C325 33.3% 66.6%,#1E9E4A 66.6%); }