/* ============================================================
   VIZSURGE LIVE CHAT — PREMIUM REDESIGN
   Loaded after style.css and crooms-chat-overhaul.css so it wins
   the cascade. Visual + structural layer only — existing element
   IDs, socket events and onclick handlers are all preserved;
   croom.js was extended (avatars, mentions, presence pill) but no
   existing behaviour was removed.
   ============================================================ */

body.crooms-chat-page{
  --sc-1:#60a5fa; /* blue    */
  --sc-2:#f472b6; /* pink    */
  --sc-3:#34d399; /* emerald */
  --sc-4:#fb923c; /* orange  */
  --sc-5:#a78bfa; /* violet  */
  --sc-6:#fbbf24; /* gold    */
  --mine:#8b5cf6;
  --mine-2:#6366f1;
  --gold:#e8c887;
}

/* Day divider — WhatsApp-style centered pill inserted whenever the
   calendar day changes between consecutive messages. */
body.crooms-chat-page .chat-day-divider,
#fs-chat-messages-clone .chat-day-divider,
#fs-side-messages-clone .chat-day-divider{
  display:flex; align-items:center; justify-content:center;
  margin:16px auto 10px; padding:4px 12px; width:fit-content;
  border-radius:999px; font-size:10.5px; font-weight:700;
  letter-spacing:.03em; color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
}

body.crooms-chat-page .chat-time,
#fs-chat-messages-clone .chat-time,
#fs-side-messages-clone .chat-time{
  /* style.css hides this by default (.crooms-chat-page .chat-time {
     display:none }) since it was originally only ever shown inside the
     tap-to-open action sheet -- WhatsApp-style always-visible timestamps
     need display turned back on, not just re-colored. Now lives inside
     .chat-bubble-col (below the bubble/reactions) rather than as a
     sibling of the avatar in the row -- as a row sibling it got flipped
     to the wrong side by .mine's flex-direction:row-reverse instead of
     following the bubble it belongs to. */
  display:block !important;
  font-size:9.5px !important; color:rgba(255,255,255,.32) !important;
  margin-top:2px; padding:0 2px;
}
body.crooms-chat-page .chat-msg.mine .chat-time,
#fs-chat-messages-clone .chat-msg.mine .chat-time,
#fs-side-messages-clone .chat-msg.mine .chat-time{
  align-self:flex-end;
}

/* =========================================================
   REACTION "WHO REACTED" POPOVER
   ========================================================= */
.vs-reactors-pop{
  position:absolute; z-index:610; display:none;
  padding:8px 10px; border-radius:11px; max-width:220px;
  background:rgba(13,16,36,.99); border:1px solid rgba(151,170,255,.18);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  font-size:11.5px; color:#f5f7ff; line-height:1.5;
}
.vs-reactors-pop.open{ display:block; }
.vs-reactors-pop .row{ display:flex; gap:6px; align-items:baseline; }
.vs-reactors-pop .row + .row{ margin-top:3px; }
.vs-reactors-pop .emoji{ flex-shrink:0; }
.vs-reactors-pop .names{ color:rgba(255,255,255,.75); }
.vs-reactors-pop .loading{ color:rgba(255,255,255,.4); }

/* =========================================================
   IN-APP BROWSER BANNER (Instagram/Facebook in-app WebView notice)
   ========================================================= */
#vs-inapp-banner{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:linear-gradient(135deg, rgba(232,200,135,.16), rgba(232,200,135,.06));
  border-bottom:1px solid rgba(232,200,135,.3);
  font-family:Manrope,system-ui,sans-serif;
  color:#f5f7ff;
}
#vs-inapp-banner .vs-inapp-banner-text{
  flex:1; font-size:11.5px; line-height:1.55;
}
#vs-inapp-banner .vs-inapp-banner-text b{ color:#f0dfb0; font-weight:800; }
#vs-inapp-banner .vs-inapp-banner-close{
  flex-shrink:0; width:24px; height:24px; border-radius:8px; border:none;
  background:rgba(255,255,255,.08); color:rgba(255,255,255,.65); cursor:pointer; font-size:12px;
}
#vs-inapp-banner .vs-inapp-banner-close:hover{ background:rgba(255,255,255,.15); color:#fff; }

/* =========================================================
   PROFILE PANEL — display name editor, same slide-over treatment
   as the participants panel
   ========================================================= */
#profile-overlay{
  position:fixed; inset:0; z-index:99998;
  background:rgba(0,0,0,.4);
  display:flex; align-items:stretch; justify-content:flex-end;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
#profile-overlay.open{ opacity:1; pointer-events:auto; }
#profile-sheet{
  width:320px; max-width:88vw; height:100%;
  background:linear-gradient(180deg, rgba(13,16,36,.99), rgba(5,7,17,.99));
  border-left:1px solid rgba(151,170,255,.16);
  padding:16px 16px 18px;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  overflow-y:auto;
  box-shadow:-24px 0 60px rgba(0,0,0,.45);
  color:#f5f7ff; font-family:inherit;
}
#profile-overlay.open #profile-sheet{ transform:translateX(0); }

.vs-part-edit-btn{
  width:22px; height:22px; border-radius:7px; border:none; flex-shrink:0;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.6); cursor:pointer;
  font-size:11px; display:flex; align-items:center; justify-content:center;
}
.vs-part-edit-btn:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* =========================================================
   MESSAGE ROW — avatar + grouped bubbles
   ========================================================= */
body.crooms-chat-page .chat-msg,
#fs-chat-messages-clone .chat-msg,
#fs-side-messages-clone .chat-msg{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-end;
  gap:8px;
  max-width:100%;
}
body.crooms-chat-page .chat-msg.mine,
#fs-chat-messages-clone .chat-msg.mine,
#fs-side-messages-clone .chat-msg.mine{
  flex-direction:row-reverse !important;
}

/* Avatar — injected by croom.js as .chat-avatar, one per group-start row.
   Stacked (non-group-start) rows get an invisible spacer of the same
   width so bubbles still line up under the named/avatar'd first line. */
body.crooms-chat-page .chat-avatar,
#fs-chat-messages-clone .chat-avatar,
#fs-side-messages-clone .chat-avatar{
  width:26px; height:26px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#0b0d1a;
  margin-bottom:2px;
}
body.crooms-chat-page .chat-avatar.spacer,
#fs-chat-messages-clone .chat-avatar.spacer,
#fs-side-messages-clone .chat-avatar.spacer{
  visibility:hidden;
}
body.crooms-chat-page .chat-msg.mine .chat-avatar,
#fs-chat-messages-clone .chat-msg.mine .chat-avatar,
#fs-side-messages-clone .chat-msg.mine .chat-avatar{
  background:linear-gradient(135deg, var(--mine-2), var(--mine)) !important;
  color:#fff !important;
}
body.crooms-chat-page .chat-msg[data-color="1"] .chat-avatar{ background:var(--sc-1) !important; }
body.crooms-chat-page .chat-msg[data-color="2"] .chat-avatar{ background:var(--sc-2) !important; }
body.crooms-chat-page .chat-msg[data-color="3"] .chat-avatar{ background:var(--sc-3) !important; }
body.crooms-chat-page .chat-msg[data-color="4"] .chat-avatar{ background:var(--sc-4) !important; }
body.crooms-chat-page .chat-msg[data-color="5"] .chat-avatar{ background:var(--sc-5) !important; }
body.crooms-chat-page .chat-msg[data-color="6"] .chat-avatar{ background:var(--sc-6) !important; }
#fs-chat-messages-clone .chat-msg[data-color="1"] .chat-avatar,
#fs-side-messages-clone .chat-msg[data-color="1"] .chat-avatar{ background:var(--sc-1) !important; }
#fs-chat-messages-clone .chat-msg[data-color="2"] .chat-avatar,
#fs-side-messages-clone .chat-msg[data-color="2"] .chat-avatar{ background:var(--sc-2) !important; }
#fs-chat-messages-clone .chat-msg[data-color="3"] .chat-avatar,
#fs-side-messages-clone .chat-msg[data-color="3"] .chat-avatar{ background:var(--sc-3) !important; }
#fs-chat-messages-clone .chat-msg[data-color="4"] .chat-avatar,
#fs-side-messages-clone .chat-msg[data-color="4"] .chat-avatar{ background:var(--sc-4) !important; }
#fs-chat-messages-clone .chat-msg[data-color="5"] .chat-avatar,
#fs-side-messages-clone .chat-msg[data-color="5"] .chat-avatar{ background:var(--sc-5) !important; }
#fs-chat-messages-clone .chat-msg[data-color="6"] .chat-avatar,
#fs-side-messages-clone .chat-msg[data-color="6"] .chat-avatar{ background:var(--sc-6) !important; }

/* Tighter grouped spacing now that avatars carry the "new person" cue */
body.crooms-chat-page .chat-msg:not(.group-start),
#fs-chat-messages-clone .chat-msg:not(.group-start),
#fs-side-messages-clone .chat-msg:not(.group-start){
  margin-top:2px !important;
}
body.crooms-chat-page .chat-msg.group-start,
#fs-chat-messages-clone .chat-msg.group-start,
#fs-side-messages-clone .chat-msg.group-start{
  margin-top:14px !important;
}

/* Sender name colour now driven by the same hash-based data-color used
   for the avatar, instead of a single flat blue for everyone. */
body.crooms-chat-page .chat-msg:not(.mine) .chat-sender,
#fs-chat-messages-clone .chat-msg:not(.mine) .chat-sender,
#fs-side-messages-clone .chat-msg:not(.mine) .chat-sender{ color:#72b7ff; }
body.crooms-chat-page .chat-msg[data-color="1"] .chat-sender{ color:var(--sc-1) !important; }
body.crooms-chat-page .chat-msg[data-color="2"] .chat-sender{ color:var(--sc-2) !important; }
body.crooms-chat-page .chat-msg[data-color="3"] .chat-sender{ color:var(--sc-3) !important; }
body.crooms-chat-page .chat-msg[data-color="4"] .chat-sender{ color:var(--sc-4) !important; }
body.crooms-chat-page .chat-msg[data-color="5"] .chat-sender{ color:var(--sc-5) !important; }
body.crooms-chat-page .chat-msg[data-color="6"] .chat-sender{ color:var(--sc-6) !important; }
#fs-chat-messages-clone .chat-msg[data-color="1"] .chat-sender,
#fs-side-messages-clone .chat-msg[data-color="1"] .chat-sender{ color:var(--sc-1) !important; }
#fs-chat-messages-clone .chat-msg[data-color="2"] .chat-sender,
#fs-side-messages-clone .chat-msg[data-color="2"] .chat-sender{ color:var(--sc-2) !important; }
#fs-chat-messages-clone .chat-msg[data-color="3"] .chat-sender,
#fs-side-messages-clone .chat-msg[data-color="3"] .chat-sender{ color:var(--sc-3) !important; }
#fs-chat-messages-clone .chat-msg[data-color="4"] .chat-sender,
#fs-side-messages-clone .chat-msg[data-color="4"] .chat-sender{ color:var(--sc-4) !important; }
#fs-chat-messages-clone .chat-msg[data-color="5"] .chat-sender,
#fs-side-messages-clone .chat-msg[data-color="5"] .chat-sender{ color:var(--sc-5) !important; }
#fs-chat-messages-clone .chat-msg[data-color="6"] .chat-sender,
#fs-side-messages-clone .chat-msg[data-color="6"] .chat-sender{ color:var(--sc-6) !important; }

body.crooms-chat-page .chat-sender{
  font-size:11.5px !important; font-weight:800 !important;
  display:flex; align-items:center; gap:5px;
}

/* Host badge — appended by croom.js next to the sender name */
body.crooms-chat-page .chat-host-badge{
  font-size:8px; font-weight:800; letter-spacing:.03em; color:#1a1206;
  background:linear-gradient(135deg,#f6d488,var(--gold));
  padding:1.5px 5px; border-radius:5px;
}

/* Bubbles — slightly tighter radius on the "joint" side per grouping,
   matching the mockup's grouped-conversation feel. */
body.crooms-chat-page .chat-msg:not(.mine) .chat-bubble,
#fs-chat-messages-clone .chat-msg:not(.mine) .chat-bubble,
#fs-side-messages-clone .chat-msg:not(.mine) .chat-bubble{
  border-radius:14px 14px 14px 4px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.07) !important;
}
body.crooms-chat-page .chat-msg.mine .chat-bubble,
#fs-chat-messages-clone .chat-msg.mine .chat-bubble,
#fs-side-messages-clone .chat-msg.mine .chat-bubble{
  border-radius:14px 14px 4px 14px !important;
  background:linear-gradient(135deg, rgba(99,102,241,.52), rgba(139,92,246,.44)) !important;
  border:1px solid rgba(165,180,252,.35) !important;
}

/* Mention pill inside a bubble's text */
body.crooms-chat-page .chat-bubble .msg-mention{
  color:#7dd9ff; font-weight:800;
  background:rgba(34,211,238,.14);
  padding:0 5px; border-radius:6px;
}
/* A bubble that mentions the current viewer gets a soft highlight so it
   stands out while scrolling past, without shouting over the rest of
   the stream. */
body.crooms-chat-page .chat-bubble.mentions-me,
#fs-chat-messages-clone .chat-bubble.mentions-me,
#fs-side-messages-clone .chat-bubble.mentions-me{
  background:linear-gradient(135deg, rgba(236,72,153,.16), rgba(236,72,153,.05)) !important;
  border-color:rgba(236,72,153,.32) !important;
}

/* =========================================================
   REPLY BANNER (composer) — compact bar, not a takeover overlay
   ========================================================= */
#chat-reply-banner{
  display:none; align-items:center; gap:9px;
  margin:0 12px; padding:8px 10px; border-radius:12px 12px 0 0;
  background:rgba(99,102,241,.10) !important;
  border:1px solid rgba(129,140,248,.28) !important; border-bottom:none !important;
}
.reply-banner-inner{ display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.reply-banner-icon{ color:#7dd9ff; font-size:13px; flex-shrink:0; }
.reply-banner-text{ display:flex; flex-direction:column; min-width:0; gap:0; }
.reply-banner-to{ font-size:10.5px; font-weight:800; color:#7dd9ff; }
.reply-banner-preview{
  font-size:11.5px; color:rgba(255,255,255,.55);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px;
}
.reply-banner-cancel{
  width:22px; height:22px; border-radius:7px; border:none; flex-shrink:0;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.6); cursor:pointer;
}
.reply-banner-cancel:hover{ background:rgba(255,255,255,.12); color:#fff; }

/* Quoted reply preview embedded inside a sent/received bubble */
body.crooms-chat-page .chat-bubble .reply-preview{
  display:block; padding:5px 8px; margin-bottom:5px; border-radius:8px;
  background:rgba(0,0,0,.18) !important; border-left:2px solid #7dd9ff !important;
  font-size:11px; opacity:.92;
}

/* =========================================================
   REACTION PILLS
   ========================================================= */
body.crooms-chat-page .chat-reactions{
  display:flex !important; gap:4px; flex-wrap:wrap; margin-top:3px;
}
body.crooms-chat-page .reaction-pill{
  display:inline-flex !important; align-items:center; gap:3px;
  padding:1.5px 7px !important; border-radius:999px !important; font-size:11px !important;
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.09) !important;
  cursor:pointer;
}
body.crooms-chat-page .reaction-pill.mine{
  background:rgba(99,102,241,.24) !important; border-color:rgba(129,140,248,.5) !important;
}

/* =========================================================
   PRESENCE PILL — header (avatar stack + count), opens participants
   ========================================================= */
.vs-presence-pill{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  height:28px; padding:0 10px 0 6px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  transition:background .15s, border-color .15s;
  margin-left:8px; flex-shrink:0;
}
/* .fs-chat-header/.fs-side-header are justify-content:space-between with
   the close/collapse button as the only other child -- margin-right:auto
   keeps the pill snug next to "LIVE CHAT" instead of splitting evenly
   across the row now that there are three children instead of two. */
.fs-chat-header .vs-presence-pill,
.fs-side-header .vs-presence-pill{ margin-right:auto; }
.vs-presence-pill:hover{ background:rgba(255,255,255,.09); border-color:rgba(129,140,248,.4); }
.vs-presence-stack{ display:flex; }
.vs-presence-stack .vs-pav{
  width:18px; height:18px; border-radius:50%; border:1.5px solid #0a0d1d; margin-left:-6px;
  display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:800; color:#0b0d1a;
}
.vs-presence-stack .vs-pav:first-child{ margin-left:0; }
.vs-presence-count{ font-size:11px; font-weight:700; color:rgba(255,255,255,.68); white-space:nowrap; }

/* =========================================================
   PARTICIPANTS PANEL — slide-over from the right, not a centred modal
   ========================================================= */
#participants-overlay{
  position:fixed; inset:0; z-index:99997;
  background:rgba(0,0,0,.4);
  display:flex; align-items:stretch; justify-content:flex-end;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
#participants-overlay.open{ opacity:1; pointer-events:auto; }
#participants-sheet{
  width:320px; max-width:88vw; height:100%;
  background:linear-gradient(180deg, rgba(13,16,36,.99), rgba(5,7,17,.99));
  border-left:1px solid rgba(151,170,255,.16);
  border-radius:0; padding:max(16px, calc(8px + env(safe-area-inset-top))) 14px 14px;
  display:flex; flex-direction:column; gap:12px;
  transform:translateX(100%); opacity:1;
  transition:transform .26s cubic-bezier(.32,.72,0,1);
  overflow:hidden;
  box-shadow:-24px 0 60px rgba(0,0,0,.45);
}
#participants-overlay.open #participants-sheet{ transform:translateX(0); }
#participants-title{ font-size:14px !important; font-weight:800 !important; color:#f5f7ff; }
#participants-search{
  background:rgba(255,255,255,.05) !important; border:1px solid rgba(151,170,255,.16) !important;
  border-radius:11px !important; color:#f5f7ff !important;
}
#participants-list{ padding-right:2px; }
#participants-list > div{
  border-radius:11px !important; padding:8px 6px !important;
}
#participants-list > div:hover{ background:rgba(255,255,255,.045); }

/* =========================================================
   MESSAGE ACTION SHEET — restyled to match the premium palette
   ========================================================= */
#vs-msg-sheet{
  background:linear-gradient(180deg, rgba(13,16,36,.99), rgba(5,7,17,.99)) !important;
  border-top:1px solid rgba(151,170,255,.18) !important;
}
.vs-sheet-rxn-btn{
  border-radius:12px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  transition:transform .12s ease, background .12s ease;
}
.vs-sheet-rxn-btn:hover{ background:rgba(129,140,248,.16) !important; transform:translateY(-2px) scale(1.08); }
.vs-sheet-rxn-btn.mine{
  background:rgba(99,102,241,.26) !important;
  border-color:rgba(129,140,248,.55) !important;
}
.vs-sheet-action-btn{
  border-radius:11px !important;
}
.vs-sheet-action-btn:hover{ background:rgba(255,255,255,.06) !important; }

/* =========================================================
   @MENTION DROPDOWN
   ========================================================= */
.vs-mention-pop{
  display:none; position:absolute; left:8px; right:8px; bottom:100%;
  margin-bottom:8px; padding:6px; border-radius:14px; max-height:220px; overflow-y:auto;
  background:rgba(13,16,36,.99); border:1px solid rgba(151,170,255,.18);
  box-shadow:0 -14px 34px rgba(0,0,0,.42);
  z-index:600;
}
.vs-mention-pop.open{ display:block; }
.vs-mention-hdr{
  font-size:9.5px; font-weight:800; letter-spacing:.05em; color:rgba(255,255,255,.35);
  padding:5px 8px 4px;
}
.vs-mention-item{
  display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:9px; cursor:pointer;
}
.vs-mention-item:hover, .vs-mention-item.active{ background:rgba(99,102,241,.18); }
.vs-mention-item .vs-mav{
  width:23px; height:23px; border-radius:8px; font-size:9.5px; font-weight:800; color:#0b0d1a;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.vs-mention-item .vs-mname{ font-size:12.5px; font-weight:700; color:#f5f7ff; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-mention-item .vs-mtag{ font-size:9.5px; color:rgba(255,255,255,.35); flex-shrink:0; }
.vs-mention-item.all .vs-mav{ background:linear-gradient(135deg,#6366f1,#ec4899); color:#fff; }

/* Composer bars are position:relative anchors for the popup above */
.chat-input-bar, .fs-chat-input-bar{ position:relative; }

/* =========================================================
   JUMP-TO-BOTTOM PILL
   ========================================================= */
.vs-jump-pill{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:none; align-items:center; gap:6px;
  padding:6px 13px; border-radius:999px; font-size:11px; font-weight:700;
  background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 10px 24px rgba(99,102,241,.35); cursor:pointer; z-index:20;
}
.vs-jump-pill.visible{ display:flex; }