/* =========================
   DESIGN TOKENS (Seamless UI)
   - Default: follows system (prefers-color-scheme)
   - Override: html[data-theme="dark"] or "light"
========================= */
:root{
  /* Typography */
  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --text: rgba(255,255,255,.92);
  --text-strong: rgba(255,255,255,.96);
  --muted: rgba(255,255,255,.68);
  --muted-2: rgba(255,255,255,.58);

  /* Surfaces */
  --bg: #0b1220;
  --surface-0: rgba(0,0,0,.00);
  --surface-1: rgba(255,255,255,.05);   /* cards */
  --surface-2: rgba(255,255,255,.08);   /* hover/raised */
  --surface-3: rgba(255,255,255,.10);   /* strong */

  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.16);

  /* Brand */
  --primary: #3b82f6;
  --primary-2: rgba(59,130,246,.18);
  --danger: #ef4444;
  --danger-2: rgba(239,68,68,.16);
  --success: #10b981;
  --success-2: rgba(16,185,129,.14);

  /* Shape + depth */
  --radius-sm: 12px;
  --radius: 14px;
  --radius-lg: 18px;

  --shadow-sm: 0 6px 18px rgba(0,0,0,.18);
  --shadow: 0 10px 30px rgba(0,0,0,.25);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --speed: 140ms;

  /* Focus ring */
  --ring: 0 0 0 3px rgba(59,130,246,.35);

  /* Sidebar widths (single source of truth) */
  --sidebar-expanded: 320px;
  --sidebar-collapsed: 76px;
}

/* System-based theme defaults */
@media (prefers-color-scheme: light){
  :root{
    --bg: #f6f8fc;

    --text: rgba(10,20,40,.92);
    --text-strong: rgba(10,20,40,.96);
    --muted: rgba(10,20,40,.62);
    --muted-2: rgba(10,20,40,.52);

    --surface-1: rgba(10,20,40,.05);
    --surface-2: rgba(10,20,40,.07);
    --surface-3: rgba(10,20,40,.10);

    --border: rgba(10,20,40,.10);
    --border-strong: rgba(10,20,40,.14);

    --shadow-sm: 0 6px 18px rgba(10,20,40,.10);
    --shadow: 0 10px 30px rgba(10,20,40,.12);

    --ring: 0 0 0 3px rgba(59,130,246,.25);
  }
}

/* Explicit overrides */
html[data-theme="dark"]{
  /* Dark matches base tokens; kept for explicit override support */
}
html[data-theme="light"]{
  --bg: #f6f8fc;

  --text: rgba(10,20,40,.92);
  --text-strong: rgba(10,20,40,.96);
  --muted: rgba(10,20,40,.62);
  --muted-2: rgba(10,20,40,.52);

  --surface-1: rgba(10,20,40,.05);
  --surface-2: rgba(10,20,40,.07);
  --surface-3: rgba(10,20,40,.10);

  --border: rgba(10,20,40,.10);
  --border-strong: rgba(10,20,40,.14);

  --shadow-sm: 0 6px 18px rgba(10,20,40,.10);
  --shadow: 0 10px 30px rgba(10,20,40,.12);

  --ring: 0 0 0 3px rgba(59,130,246,.25);
}

/* =========================
   Base / Reset
========================= */
*{ box-sizing:border-box; }
.hidden{ display:none !important; }

html, body{ height:100%; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 600px at 20% 0%, rgba(59,130,246,.14), transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(16,185,129,.08), transparent 55%),
    var(--bg);
  letter-spacing: -0.01em;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection{ background: rgba(59,130,246,.25); }
a{ color: inherit; }

/* =========================
   Layout (legacy container helpers)
========================= */
.container{
  max-width:980px;
  margin:0 auto;
  padding:22px;
}

.header{ margin-bottom:14px; }

/* Brand */
.brand{ display:flex; gap:12px; align-items:center; }
.logo{
  width:44px;height:44px;
  display:grid; place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(59,130,246,.55), rgba(16,185,129,.18));
  border:1px solid var(--border);
  font-weight:900;
  color: var(--text-strong);
}

h1{ margin:0; font-size:26px; letter-spacing:-0.02em; color: var(--text-strong); }
p{ margin:6px 0 0; color:var(--muted); }

/* =========================
   Cards (unified)
========================= */
.card{
  background: var(--surface-1);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:16px;
  margin-bottom:12px;
  box-shadow: var(--shadow);
}

/* =========================
   Controls (legacy bar)
========================= */
.controls{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.controls .left,
.controls .right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Pills */
.pill{
  padding:7px 10px;
  border-radius:999px;
  background: var(--surface-1);
  border:1px solid var(--border);
  font-size:13px;
  font-weight:800;
  color: var(--text-strong);
}
.pill.danger{
  background: var(--danger-2);
  border-color: rgba(239,68,68,.30);
}

/* Toggle */
.toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--surface-1);
  cursor:pointer;
  user-select:none;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.toggle:hover{
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.toggle input{ display:none; }

.toggleUi{
  width:42px;height:24px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.10);
  position:relative;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.toggleUi::after{
  content:"";
  width:18px;height:18px;
  border-radius:50%;
  position:absolute;
  top:50%;left:3px;
  transform:translateY(-50%);
  background: rgba(255,255,255,.92);
  transition: all 180ms var(--ease);
}

html[data-theme="light"] .toggleUi::after{
  background: rgba(10,20,40,.92);
}

.toggle input:checked + .toggleUi::after{
  left:21px;
  background: rgba(16,185,129,.95);
}

.toggleText{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

/* =========================
   Buttons (unified)
========================= */
.btn{
  padding:10px 12px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  font-weight: 800;
  cursor:pointer;
  background: var(--surface-1);
  color: var(--text-strong);
  transition: transform var(--speed) var(--ease),
              background var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              filter var(--speed) var(--ease);
}
.btn:hover{
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow: var(--ring); }

.btn.primary{
  background: var(--primary);
  color:#071024;
  border-color: rgba(59,130,246,.35);
}
.btn.primary:hover{ filter: brightness(1.03); }

.btn.secondary{
  background: var(--surface-1);
}

/* =========================
   Inputs (unified)
========================= */
.input{
  flex:1;
  min-width:min(520px, 100%);
  padding:10px 12px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-strong);
  outline:none;
  transition: box-shadow var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              background var(--speed) var(--ease);
}
.input::placeholder{ color: var(--muted-2); }

.input:focus{
  border-color: rgba(59,130,246,.35);
  box-shadow: var(--ring);
  background: var(--surface-2);
}

textarea.input{
  resize: vertical;
  min-height: 44px;
}
textarea.input.expanded{
  min-height: 220px;
}

/* =========================
   Presets (legacy chips)
========================= */
.presets{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.chip{
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-strong);
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  transition: background var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}

.chip:hover{
  background: var(--surface-2);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.chip:focus-visible{ outline:none; box-shadow: var(--ring); }

.hint{
  color:var(--muted);
  font-size:12px;
  margin-left:6px;
}

/* =========================
   Chat (base)
========================= */
.chatWrap{ padding:0; margin-bottom:12px; }

.chat{
  min-height:52vh;
  padding:14px;
  overflow:auto;
}

.bubble{
  max-width:88%;
  padding:11px 12px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  margin:10px 0;
  white-space:pre-wrap;
  line-height:1.55;
  background: var(--surface-1);
  color: var(--text-strong);
}

.bubble.user{
  margin-left:auto;
  background: var(--primary-2);
  border-color: rgba(59,130,246,.25);
}

.bubble.assistant{
  margin-right:auto;
}

/* =========================
   Composer (baseline + fixed)
========================= */
.composerDock{
  position: sticky;
  bottom: 14px;
  z-index: 20;
}

.composerWrap{
  /* unified: keep padding/radius and prevent clipping */
  padding: 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.composer{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:stretch;
}

/* In CSS grid, inputs can overflow unless you allow them to shrink */
.composer > *{ min-width: 0; }

.fileBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: var(--surface-1);
  cursor:pointer;
  font-weight:800;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.fileBtn:hover{
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.fileBtn input{ display:none; }

.footnote{
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
}

/* =========================
   Toast
========================= */
.toast{
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  padding:10px 12px;
  border-radius: var(--radius-sm);
  border:1px solid var(--border);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  max-width:min(720px, 92vw);
}
html[data-theme="light"] .toast{
  background: rgba(10,20,40,.65);
  color: rgba(255,255,255,.92);
}
.toast.show{ opacity:1; }

/* =========================
   Login screen
========================= */
.centerPage{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.loginShell{
  width:min(520px, 100%);
}

/* =========================
   Modal (baseline; app.js injects additional modal CSS)
========================= */
.modal{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  z-index:50;
}

.modalBackdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}

.modalCard{
  position:relative;
  width:min(680px, 92vw);
  background: rgba(20,28,48,.92);
  border:1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding:14px;
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  box-shadow: var(--shadow);
}

html[data-theme="light"] .modalCard{
  background: rgba(255,255,255,.92);
  color: rgba(10,20,40,.92);
  border:1px solid rgba(10,20,40,.12);
}

.modalHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

html[data-theme="light"] .modalHeader{
  border-bottom: 1px solid rgba(10,20,40,.10);
}

.modalTitle{
  font-weight:900;
  font-size:16px;
}

.modalSubtitle{
  color: var(--muted);
  font-size:12px;
  margin-top:4px;
}

.modalBody{
  padding-top:12px;
  display:grid;
  gap:12px;
}

.field{
  display:grid;
  gap:6px;
}

.fieldLabel{
  font-size:12px;
  color: var(--muted);
  font-weight:800;
}

.field.row{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,.10);
}

html[data-theme="light"] .field.row{
  border: 1px solid rgba(10,20,40,.10);
  background: rgba(10,20,40,.04);
}

.field.row input{
  width:18px;height:18px;
}

.modalActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:8px;
}

/* =========================
   ChatGPT-like Layout (authoritative)
========================= */
.appLayout{
  min-height:100vh;
  display:grid;
  grid-template-columns: var(--sidebar-expanded) minmax(0, 1fr);
  gap:0;
  transition: grid-template-columns 180ms var(--ease);
}

/* Sidebar */
.sidebar{
  grid-column: 1 / 2;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  border-right:1px solid var(--border);
  padding:14px 12px;
  background: rgba(0,0,0,.14);
  width: var(--sidebar-expanded);
}

html[data-theme="light"] .sidebar{
  background: rgba(255,255,255,.55);
  border-right:1px solid var(--border);
}

.sidebarHeader{
  padding:8px 6px 14px;
}

.sidebarTitle{
  font-weight:900;
  letter-spacing:-0.02em;
}

.sidebarSubtitle{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.sidebarSection{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0,0,0,.10);
  box-shadow: none;
}

html[data-theme="light"] .sidebarSection{
  background: rgba(255,255,255,.55);
}

.sidebarLabel{
  font-size:12px;
  font-weight:900;
  color:var(--muted);
  margin-bottom:10px;
}

.sidebarPresets{
  display:grid;
  gap:10px;
}

.sidebarActions{
  display:grid;
  gap:10px;
}

.sidebarFooter{
  margin-top:12px;
  padding:12px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(0,0,0,.10);
  box-shadow: none;
}

html[data-theme="light"] .sidebarFooter{
  background: rgba(255,255,255,.55);
}

/* Main panel (merged from both definitions; preserves latest "roomy" UX layer) */
.mainPanel{
  grid-column: 2 / 3;
  min-width: 0;
  padding: 18px 22px 110px; /* bottom space for sticky composer */
  max-width: 1160px;
  width:100%;
  margin:0 auto;
}

/* Top header */
.topHeader{ margin: 6px 0 14px; padding:0 2px; }

.topTitle{
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.topSubtitle{
  margin: 6px 0 0;
  color: var(--muted);
}

/* Chat height: resemble ChatGPT (kept as an override) */
.chat{
  min-height: calc(100vh - 260px);
}

/* =========================
   Collapsible Sidebar
========================= */
/* Toggle button styling */
.sidebarHeaderRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.iconBtn{
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-strong);
  cursor: pointer;
  display:grid;
  place-items:center;
  transition: transform var(--speed) var(--ease),
              background var(--speed) var(--ease),
              border-color var(--speed) var(--ease);
}
.iconBtn:hover{
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.iconBtn:focus-visible{ outline:none; box-shadow: var(--ring); }

.iconChevron{
  font-weight: 900;
  line-height: 1;
  transform: translateX(-1px);
}

/* Collapsed state */
html[data-sidebar="collapsed"] .appLayout{
  grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr);
}

html[data-sidebar="collapsed"] .sidebar{
  width: var(--sidebar-collapsed);
  padding: 14px 10px;
}

/* Hide text labels while collapsed (keep icons/controls) */
html[data-sidebar="collapsed"] .sidebar .sidebarBrandText,
html[data-sidebar="collapsed"] .sidebar .sidebarLabel,
html[data-sidebar="collapsed"] .sidebar .toggleText{
  display:none !important;
}

/* Tighten sections and center items */
html[data-sidebar="collapsed"] .sidebarSection{
  padding: 10px;
}

html[data-sidebar="collapsed"] .sidebarPresets{
  gap: 8px;
}
html[data-sidebar="collapsed"] .chip{
  width: 100%;
  text-align:center;
  padding: 10px 0;
}

/* Buttons stack nicely */
html[data-sidebar="collapsed"] .sidebarActions .btn,
html[data-sidebar="collapsed"] .sidebarFooter .btn{
  padding: 10px 0;
}

/* Rotate chevron to indicate expand */
html[data-sidebar="collapsed"] #sidebarToggle .iconChevron{
  transform: rotate(180deg);
}

/* =========================
   Screenshot-inspired UX layer
========================= */

/* Hero card */
.heroCard{
  padding: 22px;
  margin-bottom: 14px;
}

.heroTitle{
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.heroSubtitle{
  margin-top: 8px;
  color: var(--muted);
  max-width: 860px;
  line-height: 1.45;
}

/* Preset grid */
.presetGrid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 1100px){
  .presetGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .presetGrid{ grid-template-columns: 1fr; }
}

/* Preset card styling */
.presetCard{
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: calc(var(--radius) + 4px);
  padding: 16px;
  text-align: left;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 120ms var(--ease),
              border-color 120ms var(--ease),
              background 120ms var(--ease),
              filter 120ms var(--ease);
}

.presetCard:hover{
  transform: translateY(-1px);
  border-color: rgba(120,170,255,.35);
  background: var(--surface-2);
}

.presetCard:focus-visible{
  outline:none;
  box-shadow: var(--ring);
}

.presetHeader{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

html[data-theme="light"] .presetHeader{
  border-bottom: 1px solid rgba(10,20,40,.10);
}

.presetIcon{
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-weight: 900;
  color: var(--text-strong);
}

.presetName{
  font-weight: 900;
  font-size: 18px;
  color: var(--text-strong);
}

.presetDesc{
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.45;
  min-height: 60px;
}

.presetCta{
  margin-top: 14px;
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(70,120,220,.45);
  border: 1px solid rgba(120,170,255,.25);
  font-weight: 900;
  color: var(--text-strong);
}

/* Chat panel: keep it tall but not infinite (kept) */
.chat{
  min-height: 42vh;
}

/* Sticky composer dock (ChatGPT-style) */
.composer{
  display: grid;
  grid-template-columns: 56px 1fr 120px;
  gap: 12px;
  align-items: stretch;
}

/* Attachment button (+) */
.attachBtn{
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  cursor: pointer;
  user-select: none;
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
  height: 56px;          /* matches composerInput min-height */
  align-self: end;       /* aligns to bottom edge of the grid row */
}
.attachBtn:hover{
  background: var(--surface-2);
  border-color: var(--border-strong);
}
.attachBtn input{ display:none; }

.attachPlus{
  font-size: 26px;
  font-weight: 900;
  opacity: .85;
}

.composerInput{
  border-radius: var(--radius-sm);
  padding: 14px 14px;
  resize: none;
  min-height: 56px;
  width: 100%;
  min-width: 0;
}

.sendBtn{
  border-radius: var(--radius-sm);
  font-weight: 900;
  height: 56px;
  align-self: end;
}

.composerFootnote{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Small screens: composer stacks */
@media (max-width: 640px){
  .composer{
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
  }
  .sendBtn{
    grid-column: 1 / -1;
  }
}

/* =========================
   Optional: nicer scrollbars
========================= */
*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
html[data-theme="light"] *{ scrollbar-color: rgba(10,20,40,.22) transparent; }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html[data-theme="light"] ::-webkit-scrollbar-thumb{ background: rgba(10,20,40,.18); }
::-webkit-scrollbar-track{ background: transparent; }

/* =========================
   Responsive: collapse sidebar on small screens (single, merged)
========================= */
@media (max-width: 920px){
  .appLayout{ grid-template-columns: 1fr; }

  .sidebar{
    position:relative;
    height:auto;
    width: auto;
    border-right:none;
    border-bottom:1px solid var(--border);
  }

  .mainPanel{ padding:14px 14px 110px; }
  .chat{ min-height: 52vh; }

  /* On small screens, keep current responsive behavior (sidebar becomes top section) */
  html[data-sidebar="collapsed"] .appLayout{
    grid-template-columns: 1fr;
  }

  /* Don’t hide on mobile stacked layout */
  html[data-sidebar="collapsed"] .sidebar .sidebarBrandText,
  html[data-sidebar="collapsed"] .sidebar .sidebarLabel,
  html[data-sidebar="collapsed"] .sidebar .toggleText{
    display: initial !important;
  }
}

/* =========================
   FIX: Remediation toggle alignment / thumb drift
========================= */
.toggle{
  align-items: center;
}

.toggleUi{
  /* stable sizing */
  width: 44px;
  height: 24px;
  display: inline-block;
  position: relative;

  /* visual */
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.10);
}

/* Use computed positions instead of hard-coded px */
.toggleUi::after{
  content:"";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  background: rgba(255,255,255,.92);
  transition: left 180ms var(--ease), background 180ms var(--ease);
}

html[data-theme="light"] .toggleUi::after{
  background: rgba(10,20,40,.92);
}

.toggle input:checked + .toggleUi::after{
  /* 44 track - 18 thumb - 3px left padding = 23px */
  left: calc(100% - 18px - 3px);
  background: rgba(16,185,129,.95);
}

/* =========================
   FIX: Toggle overlap (label vs switch)
   Make it a 2-column row: text left, switch right
========================= */
.toggle{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;

  /* keep your pill-like look */
  padding: 10px 12px;
}

/* Let the label safely wrap instead of being overlapped */
.toggleText{
  min-width: 0;
  white-space: normal;
  line-height: 1.25;
}

/* Lock the right cluster to the end, no shrinking */
.toggle > span:last-child{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

/* Optional: if you want single-line label with ellipsis instead of wrapping */
.toggle.singleLine .toggleText{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ==========================================================
   FIX: Collapsed sidebar content bleeding / overlapping main
   - Lock sidebar width
   - Disable horizontal overflow
   - Force children to shrink within the rail
========================================================== */

/* Authoritative grid + widths (beats earlier duplicates) */
.appLayout{
  grid-template-columns: var(--sidebar-expanded) minmax(0, 1fr) !important;
}
.sidebar{
  width: var(--sidebar-expanded) !important;
  overflow-x: hidden !important;  /* key: no sideways bleed */
}
.mainPanel{
  min-width: 0 !important;
}

html[data-sidebar="collapsed"] .appLayout{
  grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr) !important;
}
html[data-sidebar="collapsed"] .sidebar{
  width: var(--sidebar-collapsed) !important;
  overflow-x: hidden !important;  /* key: no sideways bleed */
}

/* Force all sidebar descendants to respect the rail width */
.sidebar,
.sidebar *{
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Make buttons/blocks shrink instead of overflowing */
.sidebar .sidebarSection,
.sidebar .pill,
.sidebar .toggle,
.sidebar .chip,
.sidebar .btn{
  width: 100%;
}

/* In collapsed mode, prevent long text from pushing width.
   Option A: wrap aggressively (keeps text visible) */
html[data-sidebar="collapsed"] .sidebar .chip,
html[data-sidebar="collapsed"] .sidebar .btn{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
}

/* In collapsed mode, hide the Mode/Remediation block (prevents awkward clipped toggle).
   If you prefer to keep it, delete this section. */
html[data-sidebar="collapsed"] .sidebar .sidebarSection:first-of-type{
  display: none;
}
/* ==========================================================
   COLLAPSED SIDEBAR = ICON RAIL ONLY
   Show ONLY the expand button when collapsed
========================================================== */

/* Lock sidebar as a narrow rail */
html[data-sidebar="collapsed"] .sidebar{
  width: var(--sidebar-collapsed) !important;
  padding: 10px 6px !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Keep ONLY the header (logo + toggle) */
html[data-sidebar="collapsed"] .sidebar > :not(.sidebarHeader){
  display: none !important;
}

/* Center header content vertically */
html[data-sidebar="collapsed"] .sidebarHeader{
  padding: 0 !important;
  width: 100%;
}

/* Header row becomes vertical */
html[data-sidebar="collapsed"] .sidebarHeaderRow{
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* Hide brand text, keep logo */
html[data-sidebar="collapsed"] .sidebarBrandText{
  display: none !important;
}

/* Ensure toggle button is always visible & centered */
html[data-sidebar="collapsed"] #sidebarToggle{
  width: 40px;
  height: 40px;
}

/* Prevent ANY children from bleeding horizontally */
html[data-sidebar="collapsed"] .sidebar,
html[data-sidebar="collapsed"] .sidebar *{
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box;
}