/* =====================================================================
   VISTA AI — DARK / LIGHT THEME
   Load this LAST in <head> (after css/app.css and after the inline
   <style> blocks) so its light-mode overrides win.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Toggle button
   --------------------------------------------------------------- */
.theme-toggle-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex-shrink:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.75);
  cursor:pointer;font:inherit;padding:0;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.theme-toggle-btn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);color:#fff;transform:translateY(-1px)}
.theme-toggle-btn:active{transform:translateY(0)}
.theme-toggle-btn:focus-visible{outline:2px solid #8b5cf6;outline-offset:2px}
.theme-toggle-btn svg{width:17px;height:17px;display:block}

/* icon swap: moon while dark, sun while light */
.theme-toggle-btn .icon-sun{display:none}
html[data-theme="light"] .theme-toggle-btn .icon-sun{display:block}
html[data-theme="light"] .theme-toggle-btn .icon-moon{display:none}

/* ---------------------------------------------------------------
   2. Light palette — overrides the :root variables in app.css
   --------------------------------------------------------------- */
html[data-theme="light"]{
  --bg:#ffffff;
  --sidebar-bg:#f7f7f8;
  --surface:#f1f1f3;
  --surface-hover:#e7e7ea;
  --border:#e3e3e7;
  --fg:#1d1f23;
  --fg-secondary:#54575e;
  --fg-tertiary:#8a8d95;
  --blue:#2563eb;
  --blue-hover:#1d4ed8;
  --green:#16a34a;
  --red:#dc2626;
  color-scheme:light;
}
html[data-theme="dark"]{color-scheme:dark}

/* ---------------------------------------------------------------
   3. Smooth cross-fade when switching
   --------------------------------------------------------------- */
html,body,#sidebar,#topbar,#tabbar,#main,
.chat-item,.new-chat-btn,.input-box,.model-select,
.serial-tag,.msg-row.user .msg-text,.tab-btn{
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
@media (prefers-reduced-motion:reduce){
  html,body,#sidebar,#topbar,#tabbar,#main,
  .chat-item,.new-chat-btn,.input-box,.model-select,
  .serial-tag,.msg-row.user .msg-text,.tab-btn,
  .theme-toggle-btn{transition:none}
}

/* ---------------------------------------------------------------
   4. Light-mode fixes for components with hard-coded dark values
   --------------------------------------------------------------- */

/* topbar controls (were white-on-translucent-white) */
html[data-theme="light"] .theme-toggle-btn,
html[data-theme="light"] .model-dropdown-btn,
html[data-theme="light"] .anon-toggle-btn{
  background:rgba(15,23,42,.05);
  border-color:rgba(15,23,42,.12);
  color:#374151;
}
html[data-theme="light"] .theme-toggle-btn:hover,
html[data-theme="light"] .model-dropdown-btn:hover,
html[data-theme="light"] .anon-toggle-btn:hover{
  background:rgba(15,23,42,.09);
  border-color:rgba(15,23,42,.2);
  color:#111827;
}
html[data-theme="light"] .model-dropdown-btn.locked:hover{
  background:rgba(15,23,42,.05);
  border-color:rgba(15,23,42,.12);
}
html[data-theme="light"] .anon-toggle-btn .dot{background:rgba(15,23,42,.25)}
html[data-theme="light"] .anon-toggle-btn.active{
  background:rgba(168,85,247,.14);
  border-color:rgba(168,85,247,.45);
  color:#7e22ce;
}
html[data-theme="light"] .anon-toggle-btn.active .dot{background:#a855f7;box-shadow:0 0 6px rgba(168,85,247,.7)}
html[data-theme="light"] .anon-banner{
  background:rgba(168,85,247,.10);
  border-color:rgba(168,85,247,.3);
  color:#7e22ce;
}

/* model picker menu (was background:#000!important with white text) */
html[data-theme="light"] .model-dropdown-menu{
  background:#fff!important;
  border-color:rgba(15,23,42,.10);
  box-shadow:0 18px 40px rgba(15,23,42,.14);
}
html[data-theme="light"] .model-option{color:#1d1f23}
html[data-theme="light"] .model-option:hover{background:rgba(99,102,241,.10)}
html[data-theme="light"] .model-option.active{background:#6366f1;color:#fff}
html[data-theme="light"] .model-group-label{color:#6b7280}

/* mode switch pills */
html[data-theme="light"] .vista-mode-btn{
  background:rgba(15,23,42,.05);
  border-color:rgba(99,102,241,.22);
  color:#374151;
}
html[data-theme="light"] .vista-mode-btn.std.active,
html[data-theme="light"] .vista-mode-btn.unc.active{color:#fff}

/* sidebar / chat surfaces */
html[data-theme="light"] .chat-item .del:hover{background:rgba(220,38,38,.12)}
html[data-theme="light"] .sidebar-backdrop{background:rgba(15,23,42,.35)}
html[data-theme="light"] .logout-btn{color:#54575e}

/* inline code + code header chrome read fine on both, but soften borders */
html[data-theme="light"] .inline-code{
  background:rgba(99,102,241,.08);
  border-color:rgba(99,102,241,.22);
  color:#9333ea;
}

/* image viewer stays dark in both themes (intentional) */
html[data-theme="light"] .img-viewer-overlay{background:rgba(8,10,18,.85)}

/* toast uses --fg / --bg, so it flips automatically; keep error red readable */
html[data-theme="light"] .toast.error{background:#dc2626;color:#fff}

/* ---------------------------------------------------------------
   5. Dark-mode fixes for components hard-coded as white cards
   (these blocks were authored light; make them fit the dark UI)
   --------------------------------------------------------------- */
html[data-theme="dark"] .image-card{
  background:linear-gradient(180deg,#242428 0%,#1e1e22 100%);
  border-color:rgba(255,255,255,.07);
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}
html[data-theme="dark"] .image-label{color:#ececec}
html[data-theme="dark"] .image-meta{background:rgba(99,102,241,.16);color:#c7c9ff}

html[data-theme="dark"] .md-table-wrap{background:#1f1f23;box-shadow:0 10px 28px rgba(0,0,0,.35)}
html[data-theme="dark"] .md-table tbody tr td{background:#1f1f23;color:#e6e6ea;border-bottom-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .md-table tbody tr:nth-child(even) td{background:#24242a}
html[data-theme="dark"] .md-table tbody tr:hover td{background:rgba(99,102,241,.16)}
html[data-theme="dark"] .table-dl-bar{background:#1a1a1e;border-top-color:rgba(255,255,255,.07)}

html[data-theme="dark"] .src-chip{
  background:rgba(255,255,255,.07);
  border-color:rgba(99,102,241,.28);
  color:#e6e6ea;
  box-shadow:none;
}
html[data-theme="dark"] .src-chip:hover{background:rgba(99,102,241,.18)}
html[data-theme="dark"] .src-link{color:#a5b4fc}
html[data-theme="dark"] .msg-action-btn,
html[data-theme="dark"] .chat-img-dl,
html[data-theme="dark"] .chat-img-edit,
html[data-theme="dark"] .dl-zip-btn{color:#c7c9ff!important}
html[data-theme="dark"] .coming-soon p{color:#9ca3af}
html[data-theme="dark"] .update-modal-body{color:#d4d4d8}

/* ---------------------------------------------------------------
   6. Small screens
   --------------------------------------------------------------- */
@media (max-width:680px){
  .theme-toggle-btn{width:34px;height:34px;position:relative;z-index:6;touch-action:manipulation}
}