/* ==========================================================================
   community-chat.css — Telegram-style full-screen chat for ?page=community_chat
   Visual is matched 1:1 to the clike-chat mockup (compact, Telegram-density).
   Font family follows the unified clike system (Apple SF Pro: Display for
   titles/names, Text for body/meta); SIZES are the mockup's compact scale
   (per owner: in the chat the mockup wins over the larger 17/16 type scale).
   Lives inside the site shell (.dc-shell-main); the site header stays above,
   no site bottom-nav on this surface (full-screen, own composer).
   ========================================================================== */

/* Lock the page; the chat is a fixed full-screen app below the site header. */
body.community-chat-open{ overflow:hidden !important; }
body.community-chat-open .wrap{ padding:0 !important; margin:0 !important; max-width:none !important; }
body.community-chat-open .dc-shell-main{ padding:0 !important; }

#cchat{
  /* type family — Apple system fonts (SF Pro Display / SF Pro Text) */
  --ff-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --ff-text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  /* sizes — matched to the mockup (compact) */
  --fs-h1:18px;        /* chat title / sidebar title */
  --fs-name:13.5px;    /* in-bubble author name, nav labels */
  --fs-body:14.5px;    /* messages, DM, composer */
  --lh-body:1.45;
  --fs-sec:13px;       /* subtitle, online pill, status */
  --fs-meta:12px;      /* date dividers, previews */
  --fs-small:11px;     /* badges, dm-time, section labels */
  --fs-time:10.5px;    /* in-bubble timestamps */
  --fw-display:600; --fw-medium:500;
  /* text colours (mockup) */
  --text:#E6EAF0; --muted:#8B97A9; --faint:#5A6578;
  /* palette (dark-blue clike) */
  --bg:#070b12; --panel:#0c121c; --panel-2:#121b28; --panel-3:#1a2433; --line:#1f2a3a;
  --brand:#E8651C; --brand-2:#F5872E; --brand-soft:rgba(232,101,28,.16);
  --pm:#FF5A5F; --pm-soft:rgba(255,90,95,.16);
  --link:#5CA8E8; --link-soft:rgba(92,168,232,.14); --online:#4CC97A;

  position:fixed; left:0; right:0; bottom:0; top:var(--cc-top,56px); z-index:6;
  display:grid; grid-template-columns:280px 1fr; min-height:0;
  font-family:var(--ff-text); font-size:var(--fs-body); color:var(--text);
  background-color:#0b1119;
  background-image:radial-gradient(ellipse 85% 55% at 50% 18%,rgba(148,163,184,.05),transparent 62%),radial-gradient(ellipse 120% 80% at 50% 42%,#101827,#070b12 78%);
  -webkit-font-smoothing:antialiased;
}
#cchat *{ box-sizing:border-box; }
/* reset UA margins (otherwise <h1> default margin skews the topbar title block) */
#cchat h1,#cchat h2,#cchat h3,#cchat p{ margin:0; }
/* the [hidden] attribute must win over component display rules (display:flex etc.) */
#cchat [hidden]{ display:none !important; }

/* ===================== SIDEBAR ===================== */
.cc-sidebar{ background:rgba(11,17,25,.66); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.cc-side-head{ padding:18px 20px 8px; }
.cc-side-title{ font-family:var(--ff-display); font-weight:700; font-size:var(--fs-h1); letter-spacing:-.2px; }
.cc-nav{ flex:1; min-height:0; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; }
.cc-nav::-webkit-scrollbar{ width:7px } .cc-nav::-webkit-scrollbar-thumb{ background:var(--panel-3); border-radius:8px }
.cc-group-label{ font-size:var(--fs-small); font-weight:600; text-transform:uppercase; letter-spacing:1.2px; color:var(--faint); padding:16px 12px 8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cc-dm-total{ background:var(--panel-3); color:var(--muted); border-radius:9px; padding:0 7px; font-size:var(--fs-small); }

.cc-feed-switch{ display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:11px; text-decoration:none; cursor:pointer; transition:.15s; background:var(--panel-2); border:1px solid var(--line); color:var(--text); }
.cc-feed-switch:hover{ background:var(--panel-3); border-color:rgba(232,101,28,.4) }
.cc-feed-switch .fs-ic{ display:grid; place-items:center; width:24px; height:24px; border-radius:7px; background:var(--brand-soft); color:var(--brand-2); flex:none }
.cc-feed-switch .fs-txt{ flex:1; font-size:var(--fs-name); font-weight:600 }
.cc-feed-switch .fs-go{ color:var(--faint); display:grid; place-items:center }
/* segmented chat/feed toggle */
.cc-viewseg{ display:flex; gap:3px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:3px }
.cc-viewseg-btn{ flex:1; border:none; background:transparent; color:var(--muted); font-family:var(--ff-text); font-size:var(--fs-name); font-weight:600; padding:8px 6px; border-radius:9px; cursor:pointer; transition:.15s; white-space:nowrap }
.cc-viewseg-btn:hover{ color:var(--text) }
.cc-viewseg-btn.is-active{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; box-shadow:0 4px 12px rgba(232,101,28,.32) }

/* in-shell publications feed (iframe) — covers the chat pane when active */
.cc-feedframe{ position:absolute; top:60px; left:0; width:100%; height:calc(100% - 60px); border:0; background:var(--bg); z-index:35; display:none }
.cc-main.feed-view .cc-feedframe{ display:block }
/* feed view: no subtitle / no online pill in the header */
.cc-main.feed-view .cc-sub,
.cc-main.feed-view .cc-online-pill{ display:none }

.cc-dm-empty{ color:var(--muted); font-size:var(--fs-sec); padding:14px 12px; line-height:1.4 }
.cc-dm-empty a{ color:var(--link) }
.cc-dm{ display:flex; align-items:center; gap:11px; padding:8px 12px; border-radius:12px; cursor:pointer; transition:.15s; }
.cc-dm:hover{ background:var(--panel-2) }
.cc-dm-body{ flex:1; min-width:0 }
.cc-dm-top{ display:flex; justify-content:space-between; align-items:center; gap:8px }
.cc-dm-name{ font-size:var(--fs-body); font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }   /* chat name */
.cc-dm-time{ font-size:var(--fs-small); color:var(--faint); flex:none }
.cc-dm-preview{ font-size:var(--fs-meta); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px }
.cc-dm.unread .cc-dm-name{ color:#fff } .cc-dm.unread .cc-dm-preview{ color:var(--text); font-weight:500 }

.cc-av{ width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; font-family:var(--ff-display); font-weight:600; font-size:14px; color:#fff; position:relative; overflow:visible }
.cc-av>img{ width:100%; height:100%; border-radius:50%; object-fit:cover }
.cc-av .presence{ position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; border:2.5px solid var(--panel); background:var(--faint) }
.cc-av .presence.on{ background:var(--online) }

.cc-badge{ min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--pm); color:#fff; font-size:var(--fs-small); font-weight:700; display:grid; place-items:center; flex:none; box-shadow:0 3px 10px rgba(255,90,95,.5) }
.cc-badge.pulse{ animation:cc-pmpulse 1.6s ease-out }
@keyframes cc-pmpulse{ 0%{ box-shadow:0 0 0 0 rgba(255,90,95,.55) } 100%{ box-shadow:0 0 0 14px rgba(255,90,95,0) } }

.cc-side-foot{ flex:none; padding:12px; border-top:1px solid var(--line) }
.cc-prem-note{ display:flex; gap:9px; align-items:flex-start; padding:10px 11px; border-radius:11px; background:var(--panel-2); border:1px solid var(--line); cursor:pointer; transition:.15s; text-decoration:none }
.cc-prem-note:hover{ border-color:rgba(232,101,28,.4) }
.cc-prem-note .pn-ic{ font-size:16px; line-height:1.3; flex:none }
.cc-prem-note .pn-txt{ font-size:var(--fs-meta); color:var(--muted); line-height:1.4 }
.cc-prem-note .pn-txt b{ color:var(--text); font-weight:600 }
.cc-prem-note .pn-cta{ color:var(--brand-2); font-weight:600; white-space:nowrap }
.cc-prem-note.urgent{ background:rgba(255,90,95,.09); border-color:rgba(255,90,95,.4) }
.cc-prem-note.urgent .pn-cta{ color:var(--pm) }

/* ===================== MAIN ===================== */
.cc-main{ display:flex; flex-direction:column; min-width:0; min-height:0; position:relative; isolation:isolate; }
/* Same channel texture as the publications feed, behind the chat content. */
.cc-main::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("/assets/feed-channel-texture.svg"),url("/assets/feed-channel-texture.svg");
  background-size:360px 360px,360px 360px; background-repeat:repeat,repeat; background-position:0 0,180px 180px;
  opacity:.42; }
.cc-topbar{ height:60px; flex:none; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 20px; background:rgba(9,14,22,.5); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); position:relative; z-index:1; }
.cc-title{ display:flex; align-items:center; gap:9px; min-width:0 }
.cc-title .hash{ color:var(--brand); font-weight:700; font-size:22px }
.cc-title-main{ min-width:0 }
.cc-title h1{ font-family:var(--ff-display); font-size:var(--fs-h1); font-weight:600 }
.cc-sub{ color:var(--muted); font-size:var(--fs-sec); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cc-right{ margin-left:auto; display:flex; align-items:center; gap:8px }
.cc-online-pill{ display:flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; background:var(--panel-2); font-size:var(--fs-sec); color:var(--muted); white-space:nowrap; flex:none }
.cc-online-pill .d{ width:8px; height:8px; border-radius:50%; background:var(--online); box-shadow:0 0 8px var(--online) }

.cc-navtoggle{ display:none; position:relative; width:40px; height:40px; flex:none; border:none; background:var(--panel-2); color:var(--text); border-radius:11px; cursor:pointer; align-items:center; justify-content:center }
.cc-nav-unread{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--pm); color:#fff; font-size:var(--fs-small); font-weight:700; display:grid; place-items:center; border:2px solid #0b1119 }

/* pinned banner */
.cc-pinbar{ position:absolute; top:72px; left:0; right:0; margin-inline:auto; width:max-content; max-width:calc(100% - 28px); z-index:8; display:inline-flex; align-items:center; gap:10px; padding:4px 5px 4px 14px; border-radius:999px; background:rgba(16,24,36,.92); border:1px solid rgba(232,101,28,.34) }
.cc-pinbar.hidden{ display:none }
.cc-pinbar.pin-in{ animation:cc-pinIn .45s cubic-bezier(.2,.8,.2,1) }
@keyframes cc-pinIn{ from{ transform:translateY(-12px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
.cc-pinbar .pin-title{ font-weight:600; font-size:var(--fs-meta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.cc-pinbar .pin-x{ flex:none; border:none; background:var(--panel-3); color:var(--muted); width:24px; height:24px; border-radius:50%; cursor:pointer }

/* ===================== FEED ===================== */
.cc-feed{ flex:1; overflow-y:auto; padding:52px 24px 8px; display:flex; flex-direction:column; gap:2px;
  background:transparent; position:relative; z-index:1; }
.cc-feed::-webkit-scrollbar{ width:9px } .cc-feed::-webkit-scrollbar-thumb{ background:var(--panel-3); border-radius:8px }
.cc-feed-loading,.cc-feed-empty{ margin:auto; color:var(--faint); font-size:var(--fs-sec) }
.cc-daydiv{ align-self:center; margin:16px 0 10px; padding:3px 14px; border:1px solid rgba(148,163,184,.26); border-radius:999px; background:rgba(16,24,36,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--muted); font-size:var(--fs-meta); white-space:nowrap }
.cc-daydiv::before,.cc-daydiv::after{ display:none }

/* messages — telegram-style bubbles */
.cc-msg{ display:flex; flex-direction:column; align-items:flex-start; margin-top:11px; position:relative }
.cc-msg.grouped{ margin-top:2px }
.cc-msg.mine{ align-items:flex-end }
.cc-brow{ display:flex; align-items:flex-end; gap:9px; max-width:72% }
.cc-brow .cc-av{ width:34px; height:34px; cursor:pointer }
.cc-msg.grouped .cc-av{ visibility:hidden }
.cc-msg.mine .cc-av{ display:none }
.cc-bubble{ position:relative; padding:7px 11px 6px; border-radius:15px 15px 15px 5px; background:rgba(18,26,36,.97); border:1px solid rgba(255,255,255,.07); min-width:0 }
.cc-msg.grouped:not(.mine) .cc-bubble{ border-top-left-radius:8px }
.cc-msg.mine .cc-bubble{ background:rgba(232,101,28,.15); border-color:rgba(232,101,28,.34); border-radius:15px 15px 5px 15px }
/* single-sided layout: my own messages stay on the left but keep the orange tint */
.cc-msg.self .cc-bubble{ background:rgba(232,101,28,.15); border-color:rgba(232,101,28,.34) }
.cc-name{ font-weight:700; font-size:var(--fs-name); cursor:pointer; display:inline-block; margin-bottom:2px }   /* author name */
.cc-name:hover{ text-decoration:underline }
.cc-text{ font-size:var(--fs-body); line-height:var(--lh-body); color:var(--text); word-wrap:break-word; overflow-wrap:anywhere; white-space:pre-wrap }
.cc-text .cc-ping,.cc-text .community-mention{ color:var(--link); background:var(--link-soft); border-radius:5px; padding:1px 4px; font-weight:600 }
.cc-text a,.cc-text .community-link{ color:var(--link) }
.cc-time{ font-size:var(--fs-time); color:var(--faint); float:right; margin:6px 0 -2px 10px }
.cc-msg.mine .cc-time{ color:rgba(255,255,255,.5) }
.cc-bubble::after{ content:""; display:block; clear:both }
.cc-edited{ font-size:var(--fs-time); color:var(--faint); margin-right:4px }
.cc-bubble-img{ display:block; margin-top:4px; max-width:300px; max-height:260px; width:auto; border-radius:10px; cursor:pointer }
.cc-bubble.media{ background:none !important; border:none !important; padding:0 !important }
.cc-bubble.media .cc-name{ margin-bottom:5px; margin-left:2px }
.cc-media-wrap{ position:relative; width:max-content; max-width:100%; border-radius:14px; overflow:hidden; line-height:0 }
.cc-media-wrap img{ display:block; max-width:260px; max-height:320px; width:auto; height:auto; border-radius:14px; cursor:pointer }
.cc-media-time{ position:absolute; right:6px; bottom:6px; font-size:var(--fs-time); color:#E6EAF0; background:rgba(60,68,82,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:1px 7px; border-radius:8px }

.cc-reply-quote{ display:block; border-left:2.5px solid var(--brand-2); background:rgba(255,255,255,.045); border-radius:6px; padding:4px 9px; margin-bottom:5px; cursor:pointer }
.cc-reply-quote .rq-name{ display:block; font-size:var(--fs-meta); font-weight:700; color:var(--brand-2); line-height:1.3 }
.cc-reply-quote .rq-text{ display:block; font-size:var(--fs-meta); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px }

/* hover actions */
.cc-msg-actions{ display:flex; gap:2px; align-self:flex-end; opacity:0; pointer-events:none; transition:.12s; margin-bottom:3px }
.cc-msg:hover .cc-msg-actions{ opacity:1; pointer-events:auto }
.cc-msg.mine .cc-msg-actions{ order:-1 }
.cc-act-btn{ width:25px; height:25px; border-radius:7px; background:var(--panel-2); border:1px solid var(--line); color:var(--muted); cursor:pointer; display:grid; place-items:center; font-size:12.5px; line-height:1; transition:.12s }
.cc-act-btn:hover{ background:var(--panel-3); color:var(--text) }

/* reactions */
.cc-reactions{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:7px }
.cc-msg:not(.mine) .cc-reactions{ margin-left:43px }
.cc-msg.media-msg .cc-reactions{ margin-top:4px }   /* sit tighter under image messages */
.cc-reaction{ display:inline-flex; align-items:center; gap:4px; height:23px; padding:0 7px; border-radius:999px; background:rgba(22,27,36,.72); border:1px solid rgba(148,163,184,.12); font-size:14px; line-height:1; cursor:pointer; transition:.12s; user-select:none }
.cc-reaction:hover{ background:rgba(34,40,52,.85) }
.cc-reaction.mine{ border-color:rgba(125,155,255,.95) }
.cc-reaction .c{ font-weight:700; font-size:11.5px; color:rgba(213,218,232,.85) }
.cc-add-react{ display:inline-flex; align-items:center; justify-content:center; height:23px; min-width:26px; padding:0 6px; border:1px solid rgba(148,163,184,.12); background:rgba(22,27,36,.72); border-radius:999px; cursor:pointer; font-size:14px; line-height:1; transition:.12s }
.cc-add-react:hover{ background:rgba(34,40,52,.85) }

/* emoji popover */
.cc-emoji-pop{ position:fixed; display:flex; gap:1px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:5px; box-shadow:0 12px 36px rgba(0,0,0,.5); z-index:120; opacity:0; transform:scale(.92); transform-origin:top right; pointer-events:none; transition:.12s; flex-wrap:wrap; max-width:300px }
.cc-emoji-pop.show{ opacity:1; transform:scale(1); pointer-events:auto }
.cc-emoji-pop button{ width:36px; height:36px; border:none; background:none; font-size:20px; cursor:pointer; border-radius:8px; transition:.1s }
.cc-emoji-pop button:hover{ background:var(--panel-3); transform:scale(1.15) }

/* ===================== COMPOSER ===================== */
.cc-composer{ flex:none; padding:8px 24px calc(14px + env(safe-area-inset-bottom,0px)) }
.cc-composer-locked{ flex:none; padding:14px 24px calc(16px + env(safe-area-inset-bottom,0px)); color:var(--muted); text-align:center; font-size:var(--fs-sec); border-top:1px solid var(--line) }
.cc-composer-locked a{ color:var(--brand-2) }
.cc-reply-chip{ display:flex; align-items:center; gap:11px; background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:11px; padding:8px 12px; margin-bottom:8px }
.cc-reply-chip .rc-body{ flex:1; min-width:0 }
.cc-reply-chip .rc-name{ font-size:var(--fs-meta); font-weight:700; color:var(--brand-2) }
.cc-reply-chip .rc-text{ font-size:var(--fs-meta); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cc-reply-chip .rc-x,.cc-attach-preview .rm{ width:28px; height:28px; border-radius:8px; border:none; background:var(--panel-3); color:var(--muted); cursor:pointer; display:grid; place-items:center; flex:none }
.cc-reply-chip .rc-x:hover,.cc-attach-preview .rm:hover{ color:var(--pm) }
.cc-attach-preview{ display:flex; align-items:center; gap:10px; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:8px 10px; margin-bottom:8px; width:max-content; max-width:100% }
.cc-attach-preview img{ width:54px; height:54px; object-fit:cover; border-radius:9px }
.cc-attach-preview .nm{ font-size:var(--fs-sec); color:var(--muted); max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.cc-box{ display:flex; align-items:center; gap:6px; background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:3px 4px; transition:border-color .15s, box-shadow .15s }
.cc-box:focus-within{ border-color:var(--brand) }
.cc-attach,.cc-mic{ width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; flex:none; background:transparent; color:var(--muted); display:grid; place-items:center; transition:.15s }
.cc-attach:hover,.cc-mic:hover{ background:var(--panel-3); color:var(--brand) }
.cc-box textarea{ flex:1; background:transparent; border:none; outline:none; resize:none; color:var(--text); font-family:var(--ff-text); font-size:var(--fs-body); line-height:1.35; max-height:120px; padding:6px }
.cc-box textarea::placeholder{ color:var(--faint) }
/* kill the site-wide textarea:focus orange ring (style.css) — the .cc-box border is the single outline */
#cchat .cc-box textarea:focus{ box-shadow:none; border-color:transparent }
.cc-send{ width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; flex:none; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; display:grid; place-items:center; transition:.15s; box-shadow:0 5px 14px rgba(232,101,28,.4) }
.cc-send:hover{ transform:translateY(-1px) }
.cc-send:disabled{ opacity:.4; cursor:default; transform:none; box-shadow:none }
.cc-mic.hidden,.cc-send.hidden{ display:none }
.cc-mic.recording{ color:var(--pm); animation:cc-recpulse 1s infinite }

/* voice record bar */
.cc-recbar{ display:flex; align-items:center; gap:9px; background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:3px 4px }
.cc-recbar[hidden]{ display:none }
.cc-recbar .rec-cancel{ width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; flex:none; background:transparent; color:var(--pm); display:grid; place-items:center }
.cc-recbar .rec-dot{ width:9px; height:9px; border-radius:50%; background:var(--pm); flex:none; margin-left:2px; animation:cc-recpulse 1s infinite }
@keyframes cc-recpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.2 } }
.cc-recbar .rec-time{ font-variant-numeric:tabular-nums; color:var(--text); font-size:var(--fs-sec); flex:none; min-width:48px }
.cc-recbar .rec-hint{ flex:1; color:var(--faint); font-size:var(--fs-meta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

.cc-recbar .rec-send{ width:32px; height:32px; border-radius:50%; border:none; cursor:pointer; flex:none; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; display:grid; place-items:center; box-shadow:0 5px 14px rgba(232,101,28,.4) }

/* voice message bubble */
.cc-voice{ display:flex; align-items:center; gap:10px; min-width:170px; margin-top:2px }
.cc-voice-play{ width:34px; height:34px; border-radius:50%; border:none; cursor:pointer; flex:none; background:var(--brand); color:#fff; display:grid; place-items:center }
.cc-msg.mine .cc-voice-play,.cc-pm-msg.out .cc-voice-play{ background:#fff; color:var(--brand) }
.cc-voice-wave{ flex:1; display:flex; align-items:center; gap:2px; height:26px }
.cc-voice-wave .vb{ flex:1; min-width:2px; max-width:3px; background:var(--faint); border-radius:2px }
.cc-voice-wave .vb.on{ background:var(--brand-2) }
.cc-msg.mine .cc-voice-wave .vb,.cc-pm-msg.out .cc-voice-wave .vb{ background:rgba(255,255,255,.45) }
.cc-msg.mine .cc-voice-wave .vb.on,.cc-pm-msg.out .cc-voice-wave .vb.on{ background:#fff }
.cc-voice-dur{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none }
.cc-msg.mine .cc-voice-dur,.cc-pm-msg.out .cc-voice-dur{ color:rgba(255,255,255,.7) }

/* ===================== PRIVATE PANEL ===================== */
.cc-pm-panel{ position:absolute; top:0; right:0; width:380px; height:100%; background:var(--panel); border-left:1px solid var(--line); display:flex; flex-direction:column; z-index:50; transform:translateX(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1); box-shadow:-20px 0 60px rgba(0,0,0,.45) }
.cc-pm-panel.open{ transform:translateX(0) }
.cc-pm-head{ height:60px; flex:none; display:flex; align-items:center; gap:11px; padding:0 14px; border-bottom:1px solid var(--line); background:var(--pm-soft) }
.cc-pm-back,.cc-pm-close{ border:none; background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; flex:none }
.cc-pm-back:hover,.cc-pm-close:hover{ background:var(--panel-3); color:var(--text) }
.cc-pm-head .cc-av{ width:36px; height:36px }
.cc-pm-head-main{ flex:1; min-width:0 }
.cc-pm-head .tag{ font-size:var(--fs-time); font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--pm) }
.cc-pm-head h3{ font-family:var(--ff-display); font-size:15.5px; font-weight:600; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }   /* interlocutor name */
.cc-pm-feed{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:10px }
.cc-pm-feed::-webkit-scrollbar{ width:7px } .cc-pm-feed::-webkit-scrollbar-thumb{ background:var(--panel-3); border-radius:8px }
.cc-pm-empty{ margin:auto; color:var(--faint); font-size:var(--fs-sec); text-align:center; line-height:1.6 }
.cc-pm-empty b{ color:var(--text); font-weight:600 }
.cc-pm-msg{ max-width:78%; padding:9px 13px; border-radius:16px; font-size:var(--fs-body); line-height:var(--lh-body); word-wrap:break-word; overflow-wrap:anywhere }
.cc-pm-msg.in{ align-self:flex-start; background:var(--panel-3); border-bottom-left-radius:5px }
.cc-pm-msg.out{ align-self:flex-end; background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border-bottom-right-radius:5px }
.cc-pm-msg .t{ display:block; font-size:var(--fs-time); opacity:.6; margin-top:3px; text-align:right }
.cc-pm-msg img.pm-img{ display:block; max-width:230px; width:100%; border-radius:11px; margin-bottom:3px }
.cc-pm-composer{ flex:none; padding:8px 14px calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line) }
.cc-pm-locked{ color:var(--muted); font-size:var(--fs-sec); text-align:center; padding:6px }
.cc-pm-locked a{ color:var(--brand-2) }
.cc-pm-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:.3s; z-index:45 }
.cc-pm-scrim.show{ opacity:1; pointer-events:auto }

/* ===================== TOASTS ===================== */
.cc-toasts{ position:absolute; top:72px; right:22px; display:flex; flex-direction:column; gap:10px; z-index:40 }
.cc-toast{ width:330px; max-width:78vw; background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--pm); border-radius:14px; padding:13px 14px; box-shadow:0 18px 50px rgba(0,0,0,.55); cursor:pointer; display:flex; gap:12px; align-items:flex-start; transform:translateX(120%); opacity:0; transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s }
.cc-toast.show{ transform:translateX(0); opacity:1 }
.cc-toast .label{ font-size:var(--fs-small); font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--pm); margin-bottom:3px }
.cc-toast .from{ font-family:var(--ff-display); font-weight:600; font-size:var(--fs-body) }
.cc-toast .prev{ font-size:var(--fs-sec); color:var(--muted); margin-top:2px; line-height:1.4 }
.cc-toast .x{ margin-left:auto; color:var(--faint); font-size:18px; line-height:1; background:none; border:none; cursor:pointer }

/* ===================== HYPE BUTTON (floating fire) ===================== */
.cc-fx{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:9 }
.cc-float-emoji{ position:absolute; font-size:26px; will-change:transform,opacity; animation:cc-floatUp 2.5s ease-out forwards }
.cc-float-emoji .fe-tag{ position:absolute; left:50%; top:-14px; transform:translateX(-50%); font-size:10px; font-weight:600; color:var(--muted); white-space:nowrap }
@keyframes cc-floatUp{ 0%{ transform:translate(0,0) scale(.5); opacity:0 } 12%{ opacity:1; transform:translate(0,-12px) scale(1) } 100%{ transform:translate(var(--dx,0),-460px) scale(1.15); opacity:0 } }
.cc-hype{ position:absolute; right:26px; bottom:96px; width:50px; height:50px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(135deg,#ff7a3d,#ff3d3d); font-size:23px; display:grid; place-items:center; box-shadow:0 8px 24px rgba(255,80,60,.5); z-index:22; transition:transform .1s }
.cc-hype:hover{ transform:scale(1.06) }
.cc-hype:active{ transform:scale(.88) }

/* mobile drawer scrim */
.cc-scrim{ display:none; position:absolute; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:.28s; z-index:55 }
.cc-scrim.show{ opacity:1; pointer-events:auto }

/* ===================== RESPONSIVE ===================== */
@media(max-width:820px){
  #cchat{ grid-template-columns:1fr }
  .cc-sidebar{ position:absolute; top:0; left:0; bottom:0; width:284px; max-width:86vw; z-index:60; transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); box-shadow:18px 0 50px rgba(0,0,0,.5) }
  .cc-sidebar.open{ transform:translateX(0) }
  .cc-navtoggle{ display:flex }
  .cc-scrim{ display:block }
  .cc-pm-panel{ width:100% }
  .cc-toasts{ right:12px; left:12px } .cc-toast{ width:auto }
  .cc-feed{ padding:50px 12px 8px }
  .cc-brow{ max-width:90% }
  .cc-composer{ padding-left:12px; padding-right:12px }
  .cc-topbar{ padding:0 12px; gap:10px }
  .cc-msg-actions{ opacity:0; pointer-events:none }
  .cc-msg.actions-open .cc-msg-actions{ opacity:1; pointer-events:auto }
}