/* group.css — styles for group.html.
 *
 * Same defensive var(--token, fallback) approach as profile.css: this
 * file is additive and self-contained, doesn't redefine anything from
 * base.css/buttons.css/feed.css/threads.css, only genuinely new pieces
 * for the join card, the fixed bottom composer, and the message feed.
 */

/* ---------- topbar spacing on this page ----------
   The who-pill (shorter box) sits centered against the taller Bulletin
   pill in the same row, so it visually reads as flush against the top
   with no room above it — nudging it down a touch fixes that. Also,
   base.css's shared `main{padding-top:26px}` was sized for pages with
   a composer directly under the topbar; here it just leaves too much
   air above the room's own header, so this page tightens it. */
.who-pill{ margin-top:6px; }
main{ padding-top:10px; }

/* ---------- join card ---------- */
.join-card:not([hidden]){
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  padding:32px 28px;
  position:relative; overflow:hidden;
  /* .glass already sets a background — this just adds a soft glow behind
     the icon on top of it, so it still reads as the same card family. */
  background:
    radial-gradient(360px 200px at 8% -12%, rgba(75,132,255,.20), transparent 62%),
    linear-gradient(155deg, var(--glass-fill-strong), var(--glass-fill));
}
.join-card .join-ic{
  width:52px; height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  background:linear-gradient(135deg, var(--blue-500,#4B84FF), var(--blue-600,#2F6FED));
  box-shadow:0 12px 26px -8px rgba(47,111,237,.6);
}
.join-card h2{ font-size:1.25rem; font-weight:700; color:var(--ink-0, #F5F8FF); margin:0; }
.join-card p{ font-size:.9rem; color:var(--ink-300, #A9BAE0); line-height:1.6; margin:0; max-width:48ch; }
.join-member-count{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600; color:var(--blue-300, #8FB4FF);
  background:rgba(75,132,255,.12); padding:5px 12px; border-radius:999px;
}

/* ---------- header above the feed (name + live member count) ---------- */
.group-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex:none; padding:2px 14px 12px;
}
.group-header-title{
  font-family:var(--font-display, inherit); font-weight:700; font-size:1rem; color:var(--ink-0, #F5F8FF);
}
.group-header-count{
  display:inline-flex; align-items:center; gap:5px; flex:none;
  font-size:.74rem; font-weight:600; color:var(--ink-300, #A9BAE0);
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border, rgba(255,255,255,.12));
  padding:4px 10px; border-radius:999px;
}
.group-header-count svg{ opacity:.8; }

/* ---------- the group feed panel ----------
 * Turned into its own scrolling pane (rather than the whole page
 * scrolling) so the fixed composer at the bottom behaves like a real
 * chat: new messages arrive and the pane auto-scrolls to reveal them.
 * The 220px allowance below is an estimate for topbar + floating
 * composer clearance — nudge it if it doesn't match your header height. */
#groupView{
  display:flex; flex-direction:column;
  height:calc(100vh - 220px);
  min-height:320px;
}
.group-messages{
  flex:1; min-width:0; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:12px;
  padding-bottom:6px;
  padding-left:14px; padding-right:14px;
}

/* ---------- "checking membership" loader ----------
 * A small chat-style typing-dots bubble instead of a generic spinner —
 * it's the one moment on this page with no content shape to preview,
 * so it borrows the visual language of a chat "..." indicator instead. */
.group-loading:not([hidden]){
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:64px 20px; text-align:center;
}
.group-loading-bubble{
  display:flex; align-items:center; gap:6px;
  padding:14px 18px; border-radius:20px;
  background:var(--glass-fill, rgba(255,255,255,.06));
  border:1px solid var(--glass-border, rgba(255,255,255,.14));
  box-shadow:0 14px 30px -12px rgba(5,10,30,.5);
}
.group-loading-dot{
  width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg, var(--blue-500,#4B84FF), var(--blue-600,#2F6FED));
  animation:groupDotBounce 1.2s ease-in-out infinite;
}
.group-loading-dot:nth-child(2){ animation-delay:.15s; }
.group-loading-dot:nth-child(3){ animation-delay:.3s; }
@keyframes groupDotBounce{
  0%, 60%, 100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-7px); opacity:1; }
}
.group-loading-text{
  margin:0; font-size:.85rem; color:var(--ink-300, #A9BAE0); letter-spacing:.02em;
  animation:groupTextPulse 2s ease-in-out infinite;
}
@keyframes groupTextPulse{
  0%, 100%{ opacity:.55; } 50%{ opacity:1; }
}

/* ---------- message-feed skeleton ----------
 * Shown once, before the first Firestore snapshot arrives. Shaped like
 * real .group-msg rows so the swap-in feels seamless, with a soft
 * shimmer sweeping across each bar instead of a spinner. Removed
 * automatically the moment renderMessages() replaces this markup. */
.group-skeleton{ display:flex; flex-direction:column; gap:12px; }
.skeleton-msg{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 38px 12px 14px; border-radius:14px;
  background:var(--glass-fill, rgba(255,255,255,.05));
  border:1px solid var(--glass-border, rgba(255,255,255,.12));
}
.skeleton-msg:nth-child(2){ opacity:.8; }
.skeleton-msg:nth-child(3){ opacity:.6; }
.skeleton-avatar{ flex:none; width:34px; height:34px; border-radius:50%; }
.skeleton-lines{ flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.skeleton-lines .line{ height:10px; border-radius:6px; }
.line.w40{ width:40%; } .line.w50{ width:50%; } .line.w60{ width:60%; }
.line.w75{ width:75%; } .line.w90{ width:90%; }

.shimmer{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.07);
}
.shimmer::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform:translateX(-100%);
  animation:groupShimmerSweep 1.6s ease-in-out infinite;
}
@keyframes groupShimmerSweep{
  100%{ transform:translateX(100%); }
}
@media (prefers-reduced-motion:reduce){
  .group-loading-dot, .group-loading-text, .shimmer::after{ animation:none; }
}

/* ---------- individual messages ---------- */
.group-msg{
  position:relative;
  display:flex; gap:10px; align-items:flex-start;
  padding:12px 38px 12px 14px; border-radius:14px;
  background:var(--glass-fill, rgba(255,255,255,.05));
  border:1px solid var(--glass-border, rgba(255,255,255,.12));
}
.group-msg .avatar.sm{ flex:none; }
.group-msg-body{ flex:1; min-width:0; }
.group-msg-head{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.group-msg-name{ font-family:var(--font-display, inherit); font-weight:600; font-size:.86rem; color:var(--ink-0, #F5F8FF); }
.group-msg-time{ font-family:var(--font-mono, monospace); font-size:.68rem; color:var(--ink-500, #7C8FC2); }
.group-msg-text{
  font-size:.9rem; color:var(--ink-200, #C9D6F5); line-height:1.55; margin-top:3px;
  white-space:pre-wrap; word-break:break-word;
}

/* @mentions rendered inside a message body */
.mention{
  color:var(--blue-300, #8FB4FF); font-weight:600;
  background:rgba(75,132,255,.14); padding:0 4px; border-radius:6px;
}

/* ============================================================
   CONFIRM DIALOG (replaces window.confirm for destructive actions)
   ============================================================ */
.confirm-modal:not([hidden]){
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.confirm-veil{
  position:absolute; inset:0;
  background:rgba(5,8,20,.62);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.confirm-card{
  position:relative;
  width:100%; max-width:340px;
  padding:26px 24px 22px;
  border-radius:20px;
  text-align:center;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  animation:confirmPopIn .18s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes confirmPopIn{
  from{ opacity:0; transform:translateY(6px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.confirm-ic{
  width:46px; height:46px; margin:0 auto 14px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  color:#FF9C9C;
  background:rgba(255,90,90,.14);
  border:1px solid rgba(255,90,90,.25);
}
.confirm-card h2{ margin:0 0 6px; font-size:1.08rem; font-weight:700; color:var(--ink-0, #F5F8FF); }
.confirm-card p{ margin:0; font-size:.85rem; color:var(--ink-300, #A9BAE0); line-height:1.5; }
.confirm-actions{ display:flex; gap:10px; margin-top:22px; }
.confirm-btn-cancel, .confirm-btn-danger{
  flex:1; border:none; cursor:pointer; padding:11px 0; border-radius:14px;
  font-size:.88rem; font-weight:700; transition:filter .15s ease, background .15s ease;
}
.confirm-btn-cancel{ background:rgba(255,255,255,.08); color:var(--ink-200, #C9D6F5); }
.confirm-btn-cancel:hover{ background:rgba(255,255,255,.14); }
.confirm-btn-danger{
  background:linear-gradient(135deg, #FF6B6B, #E33D3D);
  color:#fff;
  box-shadow:0 10px 22px -8px rgba(227,61,61,.55);
}
.confirm-btn-danger:hover{ filter:brightness(1.07); }
@media (prefers-reduced-motion:reduce){
  .confirm-card{ animation:none; }
}

/* the small "edited" tag next to the timestamp */
.group-msg-edited{ font-size:.66rem; font-style:italic; color:var(--ink-500, #7C8FC2); }

/* the "⋮" button that opens the shared Reply / Edit / Delete menu */
.group-msg-more-btn{
  position:absolute; top:10px; right:10px;
  width:26px; height:26px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); color:var(--ink-500, #7C8FC2);
  opacity:.55; transition:opacity .15s ease, background .15s ease, color .15s ease;
}
.group-msg:hover .group-msg-more-btn,
.group-msg-more-btn:focus-visible,
.group-msg-more-btn[aria-expanded="true"]{
  opacity:1; background:rgba(75,132,255,.18); color:var(--ink-0, #F5F8FF);
}

/* the shared floating menu itself — positioned by JS via inline top/left,
   so this only needs display + visuals. Guarded the same way the join
   card, emoji picker and mention menu are: an author display rule always
   beats the browser's own [hidden] rule, so it must be scoped. */
.msg-action-menu:not([hidden]){
  position:fixed; z-index:60; min-width:150px;
  background:var(--surface-1, #131A32);
  border:1px solid var(--glass-border, rgba(255,255,255,.14));
  border-radius:14px; padding:6px;
  box-shadow:0 18px 36px -14px rgba(5,10,30,.6);
  display:flex; flex-direction:column; gap:2px;
}
.msg-action-item{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 10px; border-radius:10px; border:none; background:none; cursor:pointer;
  text-align:left; color:var(--ink-200, #C9D6F5); font-size:.85rem;
}
.msg-action-item svg{ flex:none; }
.msg-action-item:hover{ background:rgba(75,132,255,.14); color:var(--ink-0, #F5F8FF); }
.msg-action-item.danger{ color:#FF9C9C; }
.msg-action-item.danger:hover{ background:rgba(255,90,90,.14); color:#FFC4C4; }

/* inline edit form, shown in place of .group-msg-text while editing */
.group-msg-edit{ margin-top:6px; display:flex; flex-direction:column; gap:8px; }
.group-msg-edit-input{
  width:100%; resize:none; overflow:hidden;
  min-height:60px; max-height:200px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--blue-400, #6FA0FF);
  border-radius:12px; padding:9px 11px;
  color:var(--ink-0, #F5F8FF); font-size:.9rem; line-height:1.5;
  font-family:var(--font-body, inherit); outline:none;
}
.group-msg-edit-actions{ display:flex; justify-content:flex-end; gap:8px; }
.group-msg-edit-cancel, .group-msg-edit-save{
  border:none; cursor:pointer; padding:6px 14px; border-radius:999px;
  font-size:.78rem; font-weight:600;
}
.group-msg-edit-cancel{ background:rgba(255,255,255,.06); color:var(--ink-300, #A9BAE0); }
.group-msg-edit-cancel:hover{ background:rgba(255,255,255,.12); color:var(--ink-0, #F5F8FF); }
.group-msg-edit-save{
  background:linear-gradient(135deg, var(--blue-500,#4B84FF), var(--blue-600,#2F6FED));
  color:#fff;
}
.group-msg-edit-save:hover{ filter:brightness(1.08); }

/* the quoted strip shown inside a message that is itself a reply */
.group-msg-reply{
  display:block; width:100%; text-align:left; font:inherit;
  margin-top:6px; padding:6px 10px;
  border:none; border-left:3px solid var(--blue-400, #6FA0FF);
  background:rgba(255,255,255,.04);
  border-radius:0 10px 10px 0;
  cursor:pointer;
}
.group-msg-reply .reply-name{
  display:block; font-size:.72rem; font-weight:600; color:var(--blue-300, #8FB4FF);
}
.group-msg-reply .reply-snippet{
  display:block; font-size:.78rem; color:var(--ink-500, #7C8FC2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* brief flash when jumping to a message via its reply quote */
@keyframes groupMsgFlash{
  0%,100%{ background:var(--glass-fill, rgba(255,255,255,.05)); }
  30%{ background:rgba(75,132,255,.22); }
}
.group-msg.flash-highlight{ animation:groupMsgFlash 1.1s ease; }

/* ============================================================
   FIXED BOTTOM COMPOSER
   ============================================================ */

.group-composer-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; justify-content:center;
  /* the wrapper spans the full width but only the pill inside is
     interactive, so clicks outside it still reach the page beneath */
  pointer-events:none;
  padding:10px clamp(12px,4vw,24px) calc(10px + env(safe-area-inset-bottom, 0px));
}
.group-composer-bar[hidden]{ display:none; }

.group-composer-inner{
  pointer-events:auto;
  position:relative;
  width:100%; max-width:var(--content-max, 640px);
  padding:10px 12px 8px;
  border-radius:26px;
  box-shadow:0 18px 40px -14px rgba(5,10,30,.55);
}

.group-composer-row{ display:flex; align-items:flex-end; gap:6px; }

.composer-icon-btn{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
  color:var(--ink-300, #A9BAE0);
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.composer-icon-btn:hover{ background:rgba(255,255,255,.08); color:var(--ink-0, #F5F8FF); }
.composer-icon-btn:active{ transform:scale(.92); }

.composer-input-wrap{
  flex:1; min-width:0; display:flex;
  background:rgba(255,255,255,.05);
  border:1px solid var(--glass-border, rgba(255,255,255,.16));
  border-radius:20px;
  padding:2px 4px;
  transition:border-color .2s ease, background .2s ease;
}
.composer-input-wrap:focus-within{
  border-color:var(--blue-400, #6FA0FF); background:rgba(255,255,255,.08);
}

.group-composer-bar textarea{
  flex:1; min-width:0; width:100%; resize:none; overflow:hidden;
  min-height:36px; max-height:160px;
  background:transparent; border:none; outline:none;
  padding:8px 10px; color:var(--ink-0, #F5F8FF);
  font-size:.92rem; line-height:1.45; font-family:var(--font-body, inherit);
}
.group-composer-bar textarea::placeholder{ color:var(--ink-500, #7C8FC2); }

.composer-send-btn{
  flex:none; width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--blue-500,#4B84FF), var(--blue-600,#2F6FED));
  color:#fff;
  box-shadow:0 10px 22px -8px rgba(47,111,237,.65);
  transition:transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.composer-send-btn svg{ margin-left:-1px; } /* optical centering of the arrow glyph */
.composer-send-btn:hover:not(:disabled){ transform:translateY(-1px); }
.composer-send-btn:active:not(:disabled){ transform:scale(.94); }
.composer-send-btn:disabled{
  opacity:.4; cursor:not-allowed; box-shadow:none;
  background:rgba(255,255,255,.12);
}

.composer-footer-row{ display:flex; justify-content:flex-end; padding:2px 10px 0; }
.composer-footer-row .char-count{ font-size:.66rem; }

/* ---------- reply-to preview strip ---------- */
.reply-preview{
  margin:0 4px 8px; padding:8px 12px;
  border-left:3px solid var(--blue-400, #6FA0FF);
  background:rgba(255,255,255,.05);
  border-radius:0 12px 12px 0;
}
.reply-preview-line{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.reply-preview-label{ font-size:.76rem; color:var(--ink-300, #A9BAE0); }
.reply-preview-label strong{ color:var(--ink-0, #F5F8FF); font-weight:600; }
.reply-preview-close{
  background:none; border:none; color:var(--ink-500, #7C8FC2); font-size:1.1rem;
  line-height:1; cursor:pointer; padding:2px 6px; border-radius:8px;
}
.reply-preview-close:hover{ background:rgba(255,255,255,.08); color:var(--ink-0, #F5F8FF); }
.reply-preview-text{
  margin-top:2px; font-size:.78rem; color:var(--ink-500, #7C8FC2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- @mention suggestion menu ---------- */
.mention-menu:not([hidden]){
  position:absolute; left:4px; right:4px; bottom:calc(100% + 8px);
  box-sizing:border-box;
  max-height:min(220px, 45vh); overflow-y:auto;
  background:var(--surface-1, #131A32);
  border:1px solid var(--glass-border, rgba(255,255,255,.14));
  border-radius:16px; padding:6px;
  box-shadow:0 18px 36px -14px rgba(5,10,30,.6);
  display:flex; flex-direction:column; gap:2px;
}
.mention-item{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:7px 9px; border-radius:10px; border:none; background:none; cursor:pointer;
  text-align:left; color:var(--ink-200, #C9D6F5); font-size:.85rem;
}
.mention-item:hover, .mention-item.active{
  background:rgba(75,132,255,.16); color:var(--ink-0, #F5F8FF);
}
.mention-item-avatar{ flex:none; width:24px; height:24px; }
.mention-item-name{ font-weight:600; }

/* ---------- emoji picker ---------- */
.emoji-picker:not([hidden]){
  position:absolute; left:4px; bottom:calc(100% + 8px);
  width:min(280px, 90vw);
  box-sizing:border-box;
  background:var(--surface-1, #131A32);
  border:1px solid var(--glass-border, rgba(255,255,255,.14));
  border-radius:16px; padding:10px;
  box-shadow:0 18px 36px -14px rgba(5,10,30,.6);
  display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
  align-content:start;
  /* Tall enough to fit the full emoji grid without clipping the last
     row; still capped + scrollable so it never overflows a short
     viewport or a longer emoji set later. */
  max-height:min(248px, 45vh); overflow-y:auto;
}
.emoji-item{
  background:none; border:none; cursor:pointer; font-size:1.3rem; line-height:1;
  border-radius:8px; padding:6px 0;
  transition:transform .12s ease, background .12s ease;
}
.emoji-item:hover{ background:rgba(255,255,255,.08); transform:scale(1.15); }

/* Themed scrollbars for the floating panels, in place of the browser
   default (which renders as a jarring solid-blue bar on dark UI). */
.emoji-picker,
.mention-menu{
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.25) transparent;
}
.emoji-picker::-webkit-scrollbar,
.mention-menu::-webkit-scrollbar{ width:6px; }
.emoji-picker::-webkit-scrollbar-track,
.mention-menu::-webkit-scrollbar-track{ background:transparent; }
.emoji-picker::-webkit-scrollbar-thumb,
.mention-menu::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22); border-radius:10px;
}
.emoji-picker::-webkit-scrollbar-thumb:hover,
.mention-menu::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.35); }

@media (max-width:480px){
  .join-card{ padding:26px 22px; }
  #groupView{ height:calc(100vh - 200px); }
  .group-composer-inner{ padding:8px 10px 6px; border-radius:22px; }
  .composer-icon-btn{ width:34px; height:34px; }
  .composer-send-btn{ width:36px; height:36px; }
}
/* the room's own header already says where you are, and the generic
   "Beyond Borders" footer just sits behind the fixed composer bar (and
   the tab bar, on phones) once it's shown — leaving a stray sliver of
   text peeking out from underneath. Simplest fix: this page doesn't
   need that footer at all. */
.page-footer{ display:none; }