/* comments.css — floating "Comment" button + live comment panel for the throwback reel */
.cm-fab{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:80;
  display:inline-flex; align-items:center; gap:10px; padding:13px 18px 13px 15px;
  border:0; border-bottom:5px solid #161616; border-radius:999px; cursor:pointer;
  background:var(--danfo,#FFC72C); color:#161616; font:800 1rem 'Figtree',system-ui,sans-serif;
  box-shadow:0 18px 32px -10px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(90px) scale(.9);
  transition:opacity .35s ease, transform .5s cubic-bezier(.2,.9,.3,1.25), visibility 0s .5s;
}
.cm-fab.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .35s ease, transform .5s cubic-bezier(.2,.9,.3,1.25); animation:cmRing 1.6s ease-out 1s 3; }
.cm-fab.is-on.is-hidden{ opacity:0; visibility:hidden; transform:translateY(90px) scale(.9); animation:none; }
.cm-fab:hover{ transform:translateY(-2px); }
.cm-fab:active{ transform:scale(.96); }
.cm-fab svg{ flex-shrink:0; }
.cm-badge{ min-width:24px; height:24px; padding:0 7px; border-radius:12px; display:none; place-items:center; background:var(--board,#0B3B2A); color:#fff; font:800 .8rem 'Figtree',sans-serif; }
.cm-badge.has{ display:grid; }
.cm-badge.pop{ animation:cmPop .45s cubic-bezier(.2,.9,.3,1.6); }
@keyframes cmRing{ 0%{ box-shadow:0 18px 32px -10px rgba(0,0,0,.5), 0 0 0 0 rgba(255,199,44,.75); } 100%{ box-shadow:0 18px 32px -10px rgba(0,0,0,.5), 0 0 0 20px rgba(255,199,44,0); } }
@keyframes cmPop{ from{ transform:scale(.4); } }

.cm-scrim{ display:none; position:fixed; inset:0; z-index:90; background:rgba(6,30,20,.55); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s .3s; }
.cm-scrim.is-open{ opacity:1; visibility:visible; transition:opacity .3s ease; }

.cm-panel{
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:100;
  width:min(410px, calc(100% - 24px)); height:min(640px, calc(100dvh - 40px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; color:var(--ink,#10261C); border-radius:24px; box-shadow:0 40px 90px rgba(0,0,0,.45);
  font-family:'Figtree',system-ui,sans-serif;
  opacity:0; visibility:hidden; transform:translateY(40px) scale(.97); transform-origin:bottom right;
  transition:opacity .25s ease, transform .4s cubic-bezier(.2,.9,.3,1.15), visibility 0s .4s;
}
.cm-panel.is-open{ opacity:1; visibility:visible; transform:none; transition:opacity .25s ease, transform .4s cubic-bezier(.2,.9,.3,1.15); }

.cm-head{ display:flex; align-items:center; gap:12px; padding:14px 14px 12px 16px; background:var(--board,#0B3B2A); color:#fff; }
.cm-thumb{ width:46px; height:46px; border-radius:10px; object-fit:cover; background:rgba(255,255,255,.15); flex-shrink:0; }
.cm-title{ flex:1; min-width:0; }
.cm-title strong{ display:block; font:800 1.05rem/1.2 'Bricolage Grotesque','Figtree',sans-serif; }
.cm-sub{ display:block; font-size:.82rem; color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-x{ width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:1.4rem; line-height:1; cursor:pointer; flex-shrink:0; }
.cm-x:hover{ background:rgba(255,255,255,.28); }
.cm-step{ width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; cursor:pointer; flex-shrink:0; display:grid; place-items:center; }
.cm-step:hover{ background:rgba(255,255,255,.28); }
.cm-steps{ display:flex; gap:6px; }

.cm-list{ flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:12px; background:var(--mint,#EAF7F0); overscroll-behavior:contain; }
.cm-note{ margin:auto; text-align:center; color:var(--muted,#51645A); max-width:28ch; }
.cm-note b{ display:block; font:800 1.1rem 'Bricolage Grotesque','Figtree',sans-serif; color:var(--board,#0B3B2A); margin-bottom:6px; }
.cm-note .cm-actions{ display:flex; gap:10px; justify-content:center; margin-top:14px; }

.cm-msg{ display:flex; gap:9px; align-items:flex-end; max-width:92%; animation:cmIn .35s cubic-bezier(.2,.9,.3,1.2); }
.cm-msg.mine{ align-self:flex-end; flex-direction:row-reverse; }
@keyframes cmIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } }
.cm-av{ width:32px; height:32px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:var(--board,#0B3B2A); color:#fff; font:800 .78rem 'Figtree',sans-serif; }
.cm-msg.mine .cm-av{ background:var(--naija,#00B875); }
.cm-bub{ min-width:0; padding:9px 13px 10px; border-radius:18px 18px 18px 5px; background:#fff; border:1px solid rgba(11,59,42,.1); }
.cm-msg.mine .cm-bub{ border-radius:18px 18px 5px 18px; background:var(--naija,#00B875); border-color:transparent; color:#fff; }
.cm-msg.pending{ opacity:.6; }
.cm-meta{ display:flex; gap:8px; align-items:baseline; margin-bottom:2px; font-size:.78rem; }
.cm-meta b{ font-weight:800; color:var(--board,#0B3B2A); }
.cm-meta time{ color:var(--muted,#51645A); }
.cm-msg.mine .cm-meta b, .cm-msg.mine .cm-meta time{ color:rgba(255,255,255,.88); }
.cm-bub p{ margin:0; font-size:.98rem; line-height:1.4; white-space:pre-wrap; overflow-wrap:anywhere; }
.cm-del{ display:block; margin-top:4px; padding:0; border:0; background:none; color:rgba(255,255,255,.85); font:600 .75rem 'Figtree',sans-serif; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.cm-del.sure{ color:#FFE08A; font-weight:800; }

.cm-compose{ padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px)); border-top:1px solid rgba(11,59,42,.1); background:#fff; }
.cm-chips{ display:flex; gap:6px; margin-bottom:8px; overflow-x:auto; scrollbar-width:none; }
.cm-chips::-webkit-scrollbar{ display:none; }
.cm-chip{ flex-shrink:0; width:38px; height:34px; border:1px solid rgba(11,59,42,.14); border-radius:999px; background:var(--mint,#EAF7F0); font-size:1.15rem; line-height:1; cursor:pointer; transition:transform .12s ease; }
.cm-chip:hover{ transform:scale(1.12); }
.cm-chip:active{ transform:scale(.9); }
.cm-row{ display:flex; gap:8px; align-items:flex-end; }
.cm-input{ flex:1; resize:none; max-height:110px; padding:11px 14px; border:1px solid rgba(11,59,42,.18); border-radius:20px; font:400 1rem/1.35 'Figtree',system-ui,sans-serif; color:inherit; background:#fff; }
.cm-input:focus{ outline:3px solid rgba(0,184,117,.35); border-color:var(--naija,#00B875); }
.cm-send{ width:46px; height:46px; flex-shrink:0; border:0; border-radius:50%; display:grid; place-items:center; background:var(--naija,#00B875); color:#fff; cursor:pointer; transition:transform .12s ease, background .2s ease; }
.cm-send:hover{ background:var(--naija-d,#008F5A); }
.cm-send:active{ transform:scale(.9); }
.cm-send[disabled]{ background:#b9cfc4; cursor:not-allowed; }
.cm-foot{ display:flex; justify-content:space-between; gap:8px; margin-top:6px; font-size:.78rem; color:var(--muted,#51645A); min-height:1.2em; }
.cm-foot .cm-err{ color:#B3261E; font-weight:600; }

.cm-btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border-radius:999px; font:700 .95rem 'Figtree',sans-serif; text-decoration:none; border:2px solid transparent; cursor:pointer; }
.cm-btn-main{ background:var(--naija,#00B875); color:#fff; }
.cm-btn-ghost{ border-color:rgba(11,59,42,.2); color:var(--board,#0B3B2A); background:#fff; }

@media (max-width:640px){
  .cm-scrim{ display:block; }
  .cm-fab{ right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px)); padding:12px 16px 12px 13px; }
  .cm-panel{ right:0; left:0; bottom:0; width:100%; height:min(82dvh,680px); border-radius:24px 24px 0 0; transform-origin:bottom center; transform:translateY(100%); }
  .cm-panel.is-open{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .cm-fab, .cm-panel, .cm-scrim{ transition:none !important; }
  .cm-fab.is-on, .cm-msg, .cm-badge.pop{ animation:none !important; }
}