/* Vibestr - OLED dark + purple */
:root{
  --bg:#000000;
  --fg:#e5e7eb; /* gray-200 */
  --muted:#9ca3af; /* gray-400 */
  --card:#0b0b0b;
  --border:#1f2937; /* gray-800 */
  --purple:#7c3aed; /* violet-600 */
  --purple-700:#6d28d9; /* violet-700 */
  --ok:#22c55e;
  --danger:#ef4444;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--fg); font: 20px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Always honor [hidden] regardless of other display styles */
[hidden]{ display:none !important; }

/* Mobile: hide topbar fetch button; it lives in the bottom sheet */
#refreshBtn{ display:none; }

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem;
  background:#000; border-bottom:1px solid var(--border); padding:.5rem .75rem; min-height:48px;
}
.brand{ font-size:2rem; margin:0; color:var(--purple); justify-self:center; }
.spacer{ flex:1; }
.icon-btn{ background:transparent; border:1px solid var(--border); color:var(--fg); border-radius:.5rem; padding:.4rem .6rem; cursor:pointer; }
.icon-btn:hover{ border-color:var(--purple); }
.topbar #burgerBtn{ justify-self:start; width:auto; min-width:auto; padding:.3rem .5rem; }
.chip{ background:var(--purple); color:white; border:none; border-radius:999px; padding:.4rem .8rem; cursor:pointer; }
.chip:hover{ background:var(--purple-700); }

.content{ width:100%; max-width:none; margin:0; padding: 64px .75rem 1.5rem; }
.empty{ text-align:center; padding:2rem 1rem; color:var(--muted); }

.feed{ display:grid; grid-template-columns: minmax(0,1fr); gap:.75rem; }
.post{ background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:.75rem; }
.post-h{ display:flex; align-items:center; gap:.6rem; }
.avatar{ width:36px; height:36px; border-radius:999px; background:#111; display:grid; place-items:center; }
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:999px; display:block; }
.meta{ display:flex; flex-direction:column; font-size:.95rem; }
.meta-line{ display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.time{ color:var(--muted); font-size:.9rem; }
.muted{ color:var(--muted); }
/* Post body content */
.post-content{ white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere; margin-top:.5rem; }
.post-content img{ max-width:100%; height:auto; display:block; border-radius:.5rem; margin:.25rem 0; }
.actions{ margin-left:auto; display:flex; gap:.25rem; }
.fav{ color:#ffd166; }
.post .content{ white-space:pre-wrap; word-wrap:break-word; margin-top:.5rem; }
.post .content img{ max-width:100%; height:auto; border-radius:.5rem; display:block; margin-top:.25rem; }

.drawer{ position:fixed; top:0; left:0; bottom:0; width:280px; background:#060606; border-right:1px solid var(--border); transform:translateX(-100%); transition:transform .25s ease; z-index:30; padding: .5rem; }
.drawer.open{ transform:none; }
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:25; }
.drawer-header{ display:flex; align-items:center; justify-content:center; padding:.25rem .5rem; position:relative; }
.drawer-title{ font-style: italic; }
.drawer-title{ font-size:1.5rem; font-weight:700; color:var(--purple); margin:0; letter-spacing:.3px; text-align:center; width:100%; }
.drawer-nav{ display:flex; flex-direction:column; gap:.35rem; padding:.5rem; }
.drawer-build{ position:absolute; left:0; right:0; bottom:.5rem; text-align:center; }
.drawer-build .muted{ opacity:.6; font-size:.9rem; }
.nav-item{ text-align:center; background:transparent; border:1px solid var(--border); color:var(--fg); border-radius:.5rem; padding:.6rem .8rem; cursor:pointer; font-size:1.15rem; }
.nav-item:hover{ border-color:var(--purple); }
.nav-item.danger{ border-color:#3b0b0b; color:#ffabab; }
/* Selected/disabled state for current view */
.nav-item[aria-current="page"], .nav-item:disabled{
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
  cursor: default;
}

.bottom-toggle{ position:fixed; right:.75rem; bottom:1rem; z-index:20; background:#0b0b0b; color:var(--fg); border:1px solid var(--border); border-radius:999px; padding:.4rem .7rem; }
.bottom-sheet{ position:fixed; left:0; right:0; bottom:0; background:#060606; border-top:1px solid var(--border); border-top-left-radius:1rem; border-top-right-radius:1rem; transform:translateY(100%); transition: transform .25s ease; z-index:35; padding:.5rem 1rem 1rem; }
.bottom-sheet.open{ transform:none; }
.bottom-sheet .handle{ width:44px; height:4px; background:#333; border-radius:2px; margin:.4rem auto 1rem; }
.sheet-actions{ display:flex; gap:.5rem; justify-content:center; }
.sheet-btn{ background:var(--purple); color:#fff; border:none; border-radius:.75rem; padding:.5rem .8rem; }

.dialog{ border:none; background:#0c0c0c; color:var(--fg); border:1px solid var(--border); border-radius:.75rem; }
.dialog::backdrop{ background:rgba(0,0,0,.6); }
.dialog-body{ min-width:min(92vw, 520px); padding:1rem; }
.dialog-actions{ display:flex; justify-content:flex-end; gap:.5rem; padding-top:.5rem; }
/* Settings groups inside storage dialog */
.settings-group{ display:flex; flex-direction:column; gap:.5rem; margin:.75rem 0; }
.settings-group .group-title{ margin:.25rem 0; font-size:1.05rem; color:var(--fg); }
.btn-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.btn-row > button{ flex:0 0 auto; }
.section-sep{ border:0; border-top:1px solid var(--border); margin:1rem 0; opacity:.7; }
.dialog input{ width:100%; padding:.6rem .7rem; border-radius:.5rem; border:1px solid var(--border); background:#050505; color:var(--fg); }
.primary{ background:var(--purple); color:#fff; border:none; border-radius:.6rem; padding:.5rem .9rem; }
.danger{ background:transparent; color:#ffabab; border:1px solid #3b0b0b; border-radius:.6rem; padding:.5rem .9rem; }
.danger:hover{ border-color:#5a1616; }
.danger.confirm{ background:var(--danger); color:#fff; border-color:var(--danger); }

.ptr{ position:fixed; top:0; left:0; right:0; display:grid; place-items:center; height:56px; background:linear-gradient(180deg, rgba(124,58,237,.2), rgba(124,58,237,0)); pointer-events:none; z-index:10; }
.ptr-indicator{ color:var(--muted); }

.kv{ display:flex; justify-content:space-between; gap:1rem; padding:.4rem 0; border-bottom:1px dashed #222; }
.muted{ color:var(--muted); font-size:1rem; }

/* Archive toolbar */
.archive-bar{ display:flex; align-items:center; gap:1rem; padding:.25rem .25rem 0; color:var(--muted); }
.toggle-btn{ background:transparent; border:1px solid var(--border); color:var(--fg); border-radius:.6rem; padding:.3rem .6rem; cursor:pointer; }
.toggle-btn[aria-pressed="true"]{ background:var(--purple); color:#fff; border-color:var(--purple); }

/* Sentinel to detect bottom-of-feed on desktop */
.sentinel{ height:1px; }

@media (min-width: 900px){
  .bottom-toggle, .bottom-sheet{ display:none; }
  /* Desktop: show fetch button in topbar */
  #refreshBtn{ display:inline-block; opacity:1; pointer-events:auto; }
  /* Desktop: persistent sidebar */
  /* Keep burger in layout so the title stays perfectly centered */
  #burgerBtn{ visibility:hidden; }
  #closeDrawerBtn{ display:none; }
  .scrim{ display:none !important; }
  .drawer{ transform:none; z-index:40; }
  /* Align title perfectly centered by making side columns symmetric */
  .topbar{ left: 280px; right: 0; grid-template-columns: minmax(44px,1fr) auto minmax(44px,1fr); }
  .content{ max-width:none; width:auto; margin-left: 280px; margin-right: 1rem; }
}

/* Place close button at far right while keeping title centered */
#closeDrawerBtn{ position:absolute; right:8px; }

/* Generic card container (used by Settings) */
.card{ background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:.75rem; }
.card h3{ margin:.25rem 0 .5rem; }

/* Inline follow add form at top of Following */
.follow-add{ background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:.6rem; margin-bottom:.5rem; }
.follow-add .row{ display:flex; gap:.5rem; }
.follow-add input{ flex:1; padding:.6rem .7rem; border-radius:.5rem; border:1px solid var(--border); background:#050505; color:var(--fg); }
/* Larger Unfollow button for Following cards */
.unfollow-btn{ font-size:1.05rem; padding:.55rem 1rem; border-radius:.7rem; min-height:40px; }
/* Refresh-all button spacing */
#followRefreshAllBtn{ margin-top:.5rem; }
/* Following cards: use grid so the description spans full width (no left gutter) */
.follow-card{ display:grid; grid-template-columns: 36px 1fr auto; gap:.6rem; align-items:start; }
.follow-card .post-h{ display:contents; }
.follow-card .avatar{ grid-column:1; }
.follow-card .meta{ grid-column:2; flex:1 1 auto; }
.follow-card .actions{ grid-column:3; justify-self:end; margin-left:0; position:relative; display:flex; flex-direction:column; gap:.35rem; align-items:flex-end; }
/* Default action buttons style (kept for potential reuse) */
.follow-card .actions > button{ font-size:1.05rem; padding:.55rem 1rem; border-radius:.7rem; min-height:40px; width:100%; }
/* Overflow menu trigger */
.follow-card .actions > .menu-btn{ width:auto; min-width:36px; height:36px; padding:0 .6rem; border-radius:.7rem; font-size:1.25rem; line-height:1; width:auto; }
/* Bubble menu */
.menu-bubble{ position:absolute; top:42px; right:0; background:#080808; border:1px solid var(--border); border-radius:.75rem; box-shadow:0 10px 24px rgba(0,0,0,.45); padding:.4rem; display:none; z-index:30; min-width:160px; }
.menu-bubble.open{ display:flex; flex-direction:column; gap:.35rem; }
.menu-bubble > button{ width:100%; text-align:left; font-size:1rem; padding:.5rem .75rem; border-radius:.6rem; }
.follow-card .post-content{ grid-column:1 / -1; margin-top:.25rem; }

/* Copyable npub (short display) */
.time.copyable{ cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; user-select:none; }
.time.copyable .copy-icon{ opacity:.6; font-size:.95em; }
.time.copyable:hover .copy-icon{ opacity:1; }

/* NIP-05 badge */
.nip05{ font-size:.9rem; color:var(--muted); }
.nip05-ok{ color: var(--ok); }
.nip05-bad{ color: #f59e0b; } /* amber for unverified */
.nip05-none{ color: var(--muted); opacity:.85; }
.nip05-pending{ color: var(--muted); font-style: italic; }

/* Quote styles */
.quote{ border:1px solid var(--border); background:#080808; border-radius:.75rem; padding:.5rem; margin-top:.5rem; }
.quote-h{ display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; }
/* Ensure embedded note body doesn't inherit page .content layout; wrap long strings */
.quote .content{
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  padding:0;
  margin:0;
  width:auto;
  max-width:100%;
}
.quote .content img{ max-width:100%; height:auto; border-radius:.5rem; display:block; margin-top:.25rem; }