/* Standalone light/dark theme toggle. Does not modify application logic. */
.theme-toggle-btn{
  position:fixed;
  right:18px;
  bottom:72px;
  z-index:2600;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--bg-panel);
  color:var(--text);
  box-shadow:0 4px 14px rgba(15,23,42,.14);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.theme-toggle-btn:hover{ border-color:var(--accent); color:var(--accent); }
.theme-toggle-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.theme-toggle-btn .theme-toggle-label{ font-size:0; }

/* Dark-mode tokens for the main application. */
body[data-theme="dark"]{
  --bg:#11161c;
  --bg-panel:#1a2028;
  --bg-panel-2:#202731;
  --bg-raised:#28313b;
  --border:#3a4652;
  --border-soft:#303b47;
  --text:#e7edf3;
  --text-muted:#aab6c3;
  --text-faint:#7f8c99;
  --receptor:#56c7ee;
  --receptor-dim:#183746;
  --ligand:#f0a45b;
  --ligand-dim:#49321e;
  --accent:#42c5a4;
  --accent-dim:#193f37;
  --danger:#f06b6b;
}

body[data-theme="dark"] .theme-toggle-btn{
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
body[data-theme="dark"] .modal-overlay,
body[data-theme="dark"] .raw-pdb-modal{ background:rgba(0,0,0,.62); }
body[data-theme="dark"] .placeholder{ color:var(--text-faint); }
body[data-theme="dark"] .distance-readout{ background:rgba(26,32,40,.96); }
body[data-theme="dark"] .distance-readout .dr-title{ color:var(--accent); }
body[data-theme="dark"] .primary-btn:hover:not(:disabled),
body[data-theme="dark"] .pdb-fetch-row .chip-btn:hover{ background:rgba(66,197,164,.20); }
body[data-theme="dark"] .status-banner.error{ background:rgba(240,107,107,.12); }
body[data-theme="dark"] .status-banner.info{ background:rgba(86,199,238,.12); }
body[data-theme="dark"] .status-banner.success{ background:rgba(66,197,164,.12); }
body[data-theme="dark"] ::selection{ background:var(--accent-dim); }

/* Keep the mobile layout intact while making the theme control accessible. */
@media (max-width:560px){
  .theme-toggle-btn{
    display:flex;
    top:8px;
    right:8px;
    bottom:auto;
    width:34px;
    height:34px;
    font-size:16px;
    z-index:2700;
  }
}