/* ── VerbaSave Theme Overrides ────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════ */
/* DARK theme  bg: #08051b                                                     */
/* ═══════════════════════════════════════════════════════════════════════════ */
html.theme-dark,
body.theme-dark {
  --bg:        #08051b;
  --surface:   #0f0c28;
  --surface-2: #181534;
  --border:    rgba(255,255,255,0.07);
  --border-hi: rgba(255,255,255,0.13);
  --text-1:    #ffffff;
  --text-2:    #8888a8;
  --text-3:    #4a4a68;
  --accent-1:  #4F8EF7;
  --accent-2:  #0D9488;
  --danger:    #F05A5A;
  --card:      rgba(255,255,255,0.05);
  --input-bg:  rgba(255,255,255,0.05);
}
html.theme-dark body,
body.theme-dark {
  background: #08051b !important;
  color: #8888a8;
}
html.theme-dark .sidebar-left,
html.theme-dark .sidebar-right,
html.theme-dark .feed-col,
html.theme-dark .profile-tabs,
html.theme-dark .feed-header {
  background: #08051b;
  border-color: rgba(255,255,255,0.07);
}
html.theme-dark .widget,
html.theme-dark .user-chip {
  background: #0f0c28;
  border-color: rgba(255,255,255,0.07);
}
html.theme-dark .post-card:hover { background: rgba(255,255,255,0.015); }
html.theme-dark .nav-item.active { background: rgba(79,142,247,0.12); color: #4F8EF7; }
html.theme-dark .tab-btn.active  { border-bottom-color: #4F8EF7; color: #fff; }
html.theme-dark .composer-inner  { background: transparent; }
html.theme-dark #composer-textarea { background: transparent; color: #fff; }
html.theme-dark .modal-card      { background: #0f0c28; border-color: rgba(255,255,255,0.13); }
html.theme-dark .post-menu       { background: #181534; border-color: rgba(255,255,255,0.13); }
html.theme-dark .comment-input,
html.theme-dark .modal-input,
html.theme-dark .modal-textarea  { background: #181534; border-color: rgba(255,255,255,0.07); color: #fff; }
html.theme-dark .logo img,
html.theme-dark .bib-logo img    { filter: none; }  /* white logo ok on dark */


/* ═══════════════════════════════════════════════════════════════════════════ */
/* WARM theme  bg: #f2f0e3  (cream / parchment — light mode)                  */
/* ═══════════════════════════════════════════════════════════════════════════ */
html.theme-warm,
body.theme-warm {
  --bg:        #f2f0e3;
  --surface:   #faf9f3;
  --surface-2: #e8e5d6;
  --border:    rgba(80,60,20,0.12);
  --border-hi: rgba(80,60,20,0.22);
  --text-1:    #1c1a0e;
  --text-2:    #4a4535;
  --text-3:    #8a8270;
  --accent-1:  #5070d0;
  --accent-2:  #0D7A6E;
  --danger:    #c03030;
  --card:      rgba(80,60,20,0.04);
  --input-bg:  rgba(80,60,20,0.04);
}
html.theme-warm body,
body.theme-warm {
  background: #f2f0e3 !important;
  color: #4a4535;
}
html.theme-warm .sidebar-left,
html.theme-warm .sidebar-right,
html.theme-warm .feed-col,
html.theme-warm .profile-tabs,
html.theme-warm .feed-header {
  background: #f2f0e3;
  border-color: rgba(80,60,20,0.12);
}
html.theme-warm .widget,
html.theme-warm .user-chip {
  background: #faf9f3;
  border-color: rgba(80,60,20,0.12);
  box-shadow: 0 1px 4px rgba(80,60,20,0.06);
}
html.theme-warm .post-card:hover  { background: rgba(80,60,20,0.03); }
html.theme-warm .nav-item         { color: #4a4535; }
html.theme-warm .nav-item:hover   { background: rgba(80,60,20,0.07); color: #1c1a0e; }
html.theme-warm .nav-item.active  { background: rgba(80,112,208,0.10); color: #5070d0; }
html.theme-warm .nav-item svg     { opacity: 0.65; }
html.theme-warm .tab-btn          { color: #8a8270; }
html.theme-warm .tab-btn:hover    { color: #4a4535; }
html.theme-warm .tab-btn.active   { border-bottom-color: #5070d0; color: #1c1a0e; }
html.theme-warm .composer-inner   { background: transparent; }
html.theme-warm #composer-textarea { background: transparent; color: #1c1a0e; }
html.theme-warm #composer-textarea::placeholder { color: #8a8270; }
html.theme-warm .modal-card       { background: #faf9f3; border-color: rgba(80,60,20,0.22); }
html.theme-warm .modal-overlay    { background: rgba(30,25,10,0.5); }
html.theme-warm .modal-title,
html.theme-warm .modal-label      { color: #1c1a0e; }
html.theme-warm .post-menu        { background: #faf9f3; border-color: rgba(80,60,20,0.22); box-shadow: 0 4px 16px rgba(80,60,20,0.12); }
html.theme-warm .post-menu-item   { color: #4a4535; }
html.theme-warm .post-menu-item:hover { background: rgba(80,60,20,0.06); }
html.theme-warm .comment-input,
html.theme-warm .modal-input,
html.theme-warm .modal-textarea   { background: #e8e5d6; border-color: rgba(80,60,20,0.12); color: #1c1a0e; }
html.theme-warm .comment-input::placeholder,
html.theme-warm .modal-input::placeholder,
html.theme-warm .modal-textarea::placeholder { color: #8a8270; }
html.theme-warm .post-text        { color: rgba(28,26,14,0.85); }
html.theme-warm .post-username    { color: #1c1a0e; }
html.theme-warm .post-time        { color: #8a8270; }
html.theme-warm .feed-empty,
html.theme-warm .feed-loading     { color: #8a8270; }
html.theme-warm .load-more-btn    { border-color: rgba(80,60,20,0.22); color: #4a4535; }
html.theme-warm .load-more-btn:hover { background: rgba(80,60,20,0.06); color: #1c1a0e; }
/* Warm: white logo → dark logo */
html.theme-warm .logo img,
html.theme-warm .bib-logo img     { filter: brightness(0); }
html.theme-warm .logo             { -webkit-text-fill-color: #5070d0; }


/* ═══════════════════════════════════════════════════════════════════════════ */
/* LIGHT theme  bg: #ffffff  (pure white)                                      */
/* ═══════════════════════════════════════════════════════════════════════════ */
html.theme-light,
body.theme-light {
  --bg:        #ffffff;
  --surface:   #f5f5f5;
  --surface-2: #ebebeb;
  --border:    rgba(0,0,0,0.10);
  --border-hi: rgba(0,0,0,0.20);
  --text-1:    #0d0d0d;
  --text-2:    #3a3a3a;
  --text-3:    #7a7a7a;
  --accent-1:  #3060d0;
  --accent-2:  #0A7A70;
  --danger:    #cc2222;
  --card:      rgba(0,0,0,0.04);
  --input-bg:  rgba(0,0,0,0.04);
}
html.theme-light body,
body.theme-light {
  background: #ffffff !important;
  color: #3a3a3a;
}
html.theme-light .sidebar-left,
html.theme-light .sidebar-right,
html.theme-light .feed-col,
html.theme-light .profile-tabs,
html.theme-light .feed-header {
  background: #ffffff;
  border-color: rgba(0,0,0,0.10);
}
html.theme-light .widget,
html.theme-light .user-chip {
  background: #f5f5f5;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
html.theme-light .post-card:hover  { background: rgba(0,0,0,0.02); }
html.theme-light .nav-item         { color: #3a3a3a; }
html.theme-light .nav-item:hover   { background: rgba(0,0,0,0.06); color: #0d0d0d; }
html.theme-light .nav-item.active  { background: rgba(48,96,208,0.10); color: #3060d0; }
html.theme-light .nav-item svg     { opacity: 0.6; }
html.theme-light .nav-item.active svg { opacity: 1; }
html.theme-light .tab-btn          { color: #7a7a7a; }
html.theme-light .tab-btn:hover    { color: #3a3a3a; }
html.theme-light .tab-btn.active   { border-bottom-color: #3060d0; color: #0d0d0d; }
html.theme-light .composer-inner   { background: transparent; }
html.theme-light #composer-textarea { background: transparent; color: #0d0d0d; }
html.theme-light #composer-textarea::placeholder { color: #7a7a7a; }
html.theme-light .modal-card       { background: #ffffff; border-color: rgba(0,0,0,0.20); box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
html.theme-light .modal-overlay    { background: rgba(0,0,0,0.4); }
html.theme-light .modal-title      { color: #0d0d0d; }
html.theme-light .modal-label      { color: #3a3a3a; }
html.theme-light .modal-char       { color: #7a7a7a; }
html.theme-light .post-menu        { background: #ffffff; border-color: rgba(0,0,0,0.15); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
html.theme-light .post-menu-item   { color: #3a3a3a; }
html.theme-light .post-menu-item:hover { background: rgba(0,0,0,0.05); }
html.theme-light .comment-input,
html.theme-light .modal-input,
html.theme-light .modal-textarea   { background: #ebebeb; border-color: rgba(0,0,0,0.12); color: #0d0d0d; }
html.theme-light .comment-input::placeholder,
html.theme-light .modal-input::placeholder,
html.theme-light .modal-textarea::placeholder { color: #7a7a7a; }
html.theme-light .post-text        { color: rgba(13,13,13,0.85); }
html.theme-light .post-username    { color: #0d0d0d; }
html.theme-light .post-time        { color: #7a7a7a; }
html.theme-light .post-action-btn  { color: #7a7a7a; }
html.theme-light .widget-title     { color: #0d0d0d; }
html.theme-light .widget-user-name { color: #0d0d0d; }
html.theme-light .widget-user-sub  { color: #7a7a7a; }
html.theme-light .feed-empty,
html.theme-light .feed-loading     { color: #7a7a7a; }
html.theme-light .load-more-btn    { border-color: rgba(0,0,0,0.18); color: #3a3a3a; }
html.theme-light .load-more-btn:hover { background: rgba(0,0,0,0.05); color: #0d0d0d; }
html.theme-light .user-chip-name   { color: #0d0d0d; }
html.theme-light .user-chip-plan   { color: #7a7a7a; }
html.theme-light .vsc-msg.assistant .vsc-msg-body { background: rgba(0,0,0,0.06); color: #0d0d0d; }
/* Light: white logo → dark logo */
html.theme-light .logo img,
html.theme-light .bib-logo img     { filter: brightness(0); }
html.theme-light .logo             { -webkit-text-fill-color: #3060d0; }
/* Light: sidebar gradient logo text readable */
html.theme-light .logo             { background: linear-gradient(135deg, #3060d0, #7040cc); -webkit-background-clip: text; background-clip: text; }


/* ═══════════════════════════════════════════════════════════════════════════ */
/* Theme toggle button strip (shared across all pages)                         */
/* ═══════════════════════════════════════════════════════════════════════════ */
.vs-theme-toggle {
  display: flex;
  gap: 3px;
  padding: 0 8px;
  margin-top: 12px;
  margin-bottom: 12px;
}
.vs-theme-btn {
  flex: 1;
  padding: 5px 0;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(255,255,255,.08));
  background: transparent;
  color: var(--text-3, rgba(255,255,255,.4));
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background .15s, border-color .15s;
}
.vs-theme-btn:hover     { background: rgba(128,128,128,.10); }
.vs-theme-btn.active    { background: rgba(79,142,247,.14); border-color: rgba(79,142,247,.35); }
html.theme-warm .vs-theme-btn.active { background: rgba(80,112,208,.12); border-color: rgba(80,112,208,.3); }
html.theme-light .vs-theme-btn.active { background: rgba(48,96,208,.10); border-color: rgba(48,96,208,.3); }


/* ═══════════════════════════════════════════════════════════════════════════ */
/* Auth-cache optimistic UI — show auth-gated elements before JS boots        */
/* ═══════════════════════════════════════════════════════════════════════════ */
html.vs-authed #fab-compose,
html.vs-authed .new-post-btn { display: flex !important; }
html.vs-authed #nav-notif    { display: flex !important; }



/* ═══════════════════════════════════════════════════════════════════════════ */
/* Global search bar (sidebar)                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */
.vs-search-wrap { position: relative; margin-bottom: 16px; }
.vs-search-input-wrap { position: relative; }
.vs-search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none;
  display: flex; align-items: center;
}
.vs-search-input {
  width: 100%; padding: 8px 10px 8px 34px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text-1);
  font-size: 13px; font-family: inherit; outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.vs-search-input:focus { border-color: rgba(79,142,247,0.4); background: var(--surface-2); }
.vs-search-input::placeholder { color: var(--text-3); }
.vs-search-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface-2, #16161E);
  border: 1px solid var(--border-hi, rgba(255,255,255,0.13));
  border-radius: 14px; padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  z-index: 600; display: none; max-height: 340px; overflow-y: auto;
}
.vs-search-dropdown.open { display: block; }
.vs-search-dropdown::-webkit-scrollbar { width: 3px; }
.vs-search-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.vs-search-section-label {
  font-size: 10px; font-weight: 800; color: var(--text-3, #4A4A60);
  text-transform: uppercase; letter-spacing: 0.6px; padding: 6px 10px 4px;
}
.vs-search-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 10px; cursor: pointer; transition: background 0.12s;
  text-decoration: none; color: inherit;
}
.vs-search-row:hover { background: rgba(255,255,255,0.06); }
.vs-search-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.vs-search-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vs-search-name {
  font-size: 13px; font-weight: 700; color: var(--text-1, #fff);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.vs-search-sub { font-size: 11px; color: var(--text-3, #4A4A60); }
.vs-search-empty,
.vs-search-loading { padding: 14px 10px; text-align: center; font-size: 12px; color: var(--text-3, #4A4A60); }
.vs-search-divider { height: 1px; background: var(--border, rgba(255,255,255,0.07)); margin: 4px 2px; }
.vs-search-footer {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 10px; font-size: 13px; font-weight: 700;
  color: var(--accent-1, #4F8EF7); text-decoration: none;
  transition: background 0.12s;
  border-top: 1px solid var(--border, rgba(255,255,255,0.07)); margin-top: 4px;
}
.vs-search-footer:hover { background: rgba(79,142,247,0.08); }