/* ======= Theme: “Midnight Blue” (blue-only) ======= */
:root{
  --bg-0:#05070B;         /* page background (near black) */
  --bg-1:#0A0F18;         /* modal/panel backdrop */
  --card:#0E1422;         /* cards */
  --stroke:rgba(148,163,184,.12);
  --muted:rgba(226,232,240,.72);
  --txt:#E6ECF2;

  /* Blue palette */
  --acc-1:#4F7BFF;        /* primary blue */
  --acc-2:#67A0FF;        /* lighter blue */
  --acc-3:#22D3EE;        /* cyan pop (sparingly) */

  --shadow:0 20px 60px -20px rgba(0,0,0,.55), 0 12px 30px -22px rgba(79,123,255,.25);
}

/* Base */
html,body{height:100%}
body{
  background:var(--bg-0);
  color:var(--txt);
  font-family:Space Grotesk,ui-sans-serif,system-ui;
  position:relative;
}
/* Fixed gradient layer prevents tearing on scroll */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(79,123,255,.10), transparent 60%),
    radial-gradient(1100px 900px at 120% 30%, rgba(79,123,255,.08), transparent 55%);
  will-change:transform;
}

/* Cards / chrome */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)) , var(--card);
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
  overflow:hidden; /* clip inner glows */
}
.modal-bg{background:rgba(5,7,12,.85)}
.modal-card{background:var(--bg-1);border:1px solid var(--stroke)}
.shadow-soft{box-shadow:var(--shadow)}

/* Accent utilities */
.text-gradient{
  background:linear-gradient(90deg,var(--acc-1),var(--acc-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.ring-acc:focus{outline:0; box-shadow:0 0 0 2px rgba(79,123,255,.35), 0 0 0 4px rgba(79,123,255,.22)}

/* Buttons & chips */
.nav-btn{padding:.45rem .7rem;border-radius:.6rem}
.nav-btn.active{background:rgba(255,255,255,.06);border:1px solid var(--stroke)}
.list-btn{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .75rem;border-radius:.75rem}
.list-btn:hover{background:rgba(255,255,255,.06)}
.chip{border:1px solid var(--stroke);background:rgba(255,255,255,.06)}
.brand-mark{
  height:2.25rem;width:2.25rem;border-radius:.9rem;
  background:linear-gradient(135deg,var(--acc-1),var(--acc-2));
  display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.08)
}

/* Inputs */
textarea, input{
  background:rgba(255,255,255,.03);
  border:1px solid var(--stroke);
  color:var(--txt)
}
textarea:focus, input:focus{box-shadow:0 0 0 2px rgba(79,123,255,.30)}

/* Composer Post button */
#postBtn{
  background:linear-gradient(90deg,var(--acc-1),var(--acc-2));
  border:none;
}
#postBtn:hover{filter:brightness(1.05)}

/* Tag pill */
[data-tag]{
  border-color:var(--stroke)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

/* Author name = colored text (no box) — color set inline by JS */
[data-open-viewer].author-name{
  background:transparent!important;
  font-weight:600;
}

/* ===== Replies (feed inline container legacy) ===== */
.reply-inline{
  margin-top:.5rem;
  padding:.6rem;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px dashed var(--stroke);
  border-radius:12px;
}

/* ===== Reply UI (feed full-width row + modal input) ===== */
.btn-ghost{
  padding:.35rem .6rem;border:1px solid var(--stroke);
  background:rgba(255,255,255,.03); border-radius:.6rem;
  color:var(--muted); font-size:12px;
  transition:background .15s ease, color .15s ease, filter .15s ease;
}
.btn-ghost:hover{background:rgba(255,255,255,.06); color:var(--txt)}

.action-pill{transition:filter .15s ease, background .15s ease, color .15s ease;}
.action-pill.is-on{
  background:linear-gradient(90deg,var(--acc-1),var(--acc-1));
  color:#0b1220; border-color:transparent;
}

/* Feed reply row (input fills to the end) */
.reply-wrap{
  display:flex; align-items:center; gap:.5rem;
  margin-top:.6rem; padding:.5rem;
  border:1px solid var(--stroke); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.reply-input{
  flex:1; width:100%;
  background:rgba(255,255,255,.02); border:1px solid var(--stroke);
  padding:.65rem .8rem; border-radius:.7rem; color:var(--txt);
}
.reply-input:focus{ outline:0; box-shadow:0 0 0 2px rgba(79,123,255,.28); }
.reply-input::placeholder{color:rgba(226,232,240,.45)}
.reply-send{
  padding:.6rem 1rem; border-radius:.8rem; border:0; white-space:nowrap;
  background:linear-gradient(90deg,var(--acc-1),var(--acc-2));
  font-size:.85rem; font-weight:700; color:#0b1220;
}
.reply-send:hover{filter:brightness(1.05)}

/* ===== Replies (post modal list) ===== */
.reply-item{
  display:flex; gap:.6rem; align-items:flex-start;
  padding:.55rem .7rem;
  border-radius:12px;
  border:1px solid var(--stroke);
  background:
    linear-gradient(180deg, rgba(79,123,255,.06), rgba(255,255,255,.02));
}
.reply-item:hover{border-color:rgba(148,163,184,.18)}
.reply-item .meta{font-size:11px;color:rgba(226,232,240,.6)}

/* --- Modal reply spacing + button style --- */
#pmReplyInput{
  display:block;
  width:100%;
  margin-bottom:.6rem;              /* gap between input and button */
}

#pmReplyBtn{
  margin-top:.1rem;
  padding:.6rem 1rem;
  border:0;
  border-radius:.8rem;
  background:linear-gradient(90deg,var(--acc-1),var(--acc-2));
  font-weight:700;
  color:#0b1220;
}

.brand-mark{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0;
  width: auto; height: auto;
  display: inline-flex;
  align-items: center; justify-content: center;
}

/* size the actual icon */
.brand-mark svg,
.brand-mark img{
  width: 26px; height: 26px;
}

/* keep focus ring on the link, not the icon */
header a:focus-visible{ outline: 2px solid var(--acc-1); border-radius: 8px; }

.beta-badge{
  margin-left:.35rem;
  padding:.15rem .45rem;
  border-radius:9999px;
  font-size:10px; font-weight:700; letter-spacing:.06em;
  background:var(--acc-1);                 /* blue only */
  color:white;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 6px 18px -8px rgba(0,0,0,.45);
  user-select:none;
}

/* Post modal replies */
.pm-replies {
  max-height: 55vh;        /* keep input & header on screen */
  overflow-y: auto;
  padding-right: .25rem;   /* room for scrollbar */
  scroll-behavior: smooth; /* nicer jumps */
}
.pm-reply {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .5rem .75rem;
  border-radius: .5rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.pm-reply:hover { background: rgba(255,255,255,.08); }
.pm-reply .meta { font-size: 11px; color: #9eb894; margin-top: .25rem; }

/* ================== PROFILE (VIEWER) — FIXED ================== */
.v-card{
  position: relative;
  overflow: hidden;                 /* hide any overlap (removes scrollbar) */
  width: 100%;
  max-width: 560px;
  max-height: 82vh;                 /* keep card on screen */
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}

/* Header */
.v-header{
  display: grid; grid-template-columns: 64px 1fr; gap: 14px;
  padding: 20px 60px 12px 20px;     /* extra right pad for Close */
  background: linear-gradient(180deg, rgba(148,163,184,.10), transparent 70%);
}
.v-avatar{
  height:64px; width:64px; border-radius:9999px;
  display:grid; place-items:center; box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}
.v-head-main{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.v-title{ display:flex; align-items:center; gap:8px; }
.v-name{ font-weight:700; color:#e5e7eb; font-size:18px; }
.v-badge{
  font-size:11px; letter-spacing:.06em;
  padding:2px 8px; border-radius:9999px;
  background:rgba(244,63,94,.15); color:#fecaca; border:1px solid rgba(244,63,94,.35);
}
.v-sub{ display:flex; align-items:center; gap:8px; margin-top:4px; color:#cbd5e1; font-size:12px; }
.v-id{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity:.7; }
.v-nick{ opacity:.9; }
.v-dot{ width:4px; height:4px; border-radius:9999px; background:#64748b; opacity:.6; }

/* Stats */
.v-stats{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px; padding: 8px 20px 14px;
}
.v-stat{ border:1px solid rgba(255,255,255,.08); background:rgba(148,163,184,.05);
  border-radius:12px; padding:10px 12px; }
.v-stat-label{ font-size:11px; color:#94a3b8; }
.v-stat-value{ font-weight:700; color:#e5e7eb; margin-top:2px; }

/* Bio */
.v-section{ padding: 10px 20px 0; }
.v-section-label{ font-size:12px; color:#94a3b8; margin-bottom:6px; }
.v-section-body{ color:#e2e8f0; background:rgba(148,163,184,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px; min-height:40px; white-space:pre-wrap; }

/* Actions */
.v-actions{ display:flex; align-items:center; gap:10px; padding: 16px 20px 20px; }

/* Buttons */
.btn{ border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:8px 12px;
  background:rgba(148,163,184,.05); color:#cbd5e1; font-weight:600; }
.btn:hover{ background:rgba(148,163,184,.10); }
.btn-disabled{ opacity:.55; cursor:not-allowed; }

/* Close pill — inside corner (no overlap with ID) */
.v-close{
  position:absolute; top:8px; right:8px;
  height:36px; width:36px;
  display:grid; place-items:center;
  border-radius:9999px;
  background:rgba(15,23,42,.95);
  color:#cbd5e1;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  transition:transform .15s ease, background .15s ease;
}
.v-close:hover{ background:rgba(30,41,59,1); transform:translateY(-1px); }
.v-close:active{ transform:translateY(0); }

/* Overlay centering (works with your existing Tailwind or plain CSS) */
#viewerModal {
  position: fixed;       /* ensure it sits on the viewport */
  inset: 0;
  overflow: hidden;      /* no scrolling inside the overlay */
  overscroll-behavior: contain;
  touch-action: none;
}
#viewerModal:not(.hidden){
  display:flex; align-items:center; justify-content:center;
}

/* Mobile layout: stack stats 1-col so it breathes */
@media (max-width: 420px){
  .v-stats{ grid-template-columns: 1fr; }
}

/* Notification items */
#notifList li:hover{background:rgba(255,255,255,.06)}

.action-pill.is-on {
  filter: saturate(1.2);
  box-shadow: 0 0 0 1px rgba(79,123,255,.35), 0 6px 18px -8px rgba(79,123,255,.35);
}

/* Discord CTA button */
.btn-discord{
  padding: .55rem .9rem;
  font-weight: 800;
  border-radius: .8rem;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(90deg, #5865F2, #4F7BFF);
  color: #0b1220;
  box-shadow: 0 12px 32px -14px rgba(88,101,242,.55);
  transition: filter .15s ease, transform .06s ease;
}
.btn-discord:hover{ filter: brightness(1.05); }
.btn-discord:active{ transform: translateY(1px); }

/* Modal reply bar spacing tweaks (optional) */
#postModal .reply-wrap { margin-top: .25rem; }
#postModal .reply-send { padding: .6rem 1rem; font-weight: 800; }

.valid { color: #34d399; }   /* emerald-400 */
.invalid { color: #fca5a5; } /* red-300 */

body.modal-open { overflow: hidden; }