/* ── Reset / base ─────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; background: #f0f2f5; }

    /* ── Shell layout ────────────────────────────── */
    #shell {
      display: flex;
      height: 100vh;
      overflow: hidden;
    }

    /* ── Sidebar ─────────────────────────────────── */
    #sidebar {
      width: 220px;
      min-width: 220px;
      background: #1a1f2e;
      color: #c8cfe0;
      display: flex;
      flex-direction: column;
      transition: width .25s ease;
      z-index: 100;
    }
    #sidebar.collapsed { width: 58px; min-width: 58px; }
    #sidebar-logo {
      padding: 18px 16px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      border-bottom: 1px solid #2d3347;
      overflow: hidden;
      white-space: nowrap;
    }
    #sidebar-logo .logo-icon { font-size: 1.4rem; color: #6ea8fe; flex-shrink: 0; }
    #sidebar-logo .logo-text { font-weight: 700; font-size: .95rem; color: #e0e6f0; transition: opacity .2s; }
    #sidebar.collapsed .logo-text { opacity: 0; pointer-events: none; }

    #nav-items {
      flex: 1;
      overflow-y: auto;
      padding: 10px 0;
    }
    .nav-item-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      cursor: pointer;
      border: none;
      background: none;
      color: #9aa5be;
      width: 100%;
      text-align: left;
      font-size: .875rem;
      transition: background .15s, color .15s;
      white-space: nowrap;
      overflow: hidden;
      border-radius: 0;
    }
    .nav-item-btn i { font-size: 1.1rem; flex-shrink: 0; }
    .nav-item-btn .nav-label { transition: opacity .2s; }
    #sidebar.collapsed .nav-label { opacity: 0; pointer-events: none; }
    .nav-item-btn:hover { background: #2d3347; color: #e0e6f0; }
    .nav-item-btn.active { background: #2563eb22; color: #6ea8fe; border-left: 3px solid #6ea8fe; }

    #sidebar-footer {
      padding: 12px 10px;
      border-top: 1px solid #2d3347;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    #user-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .78rem;
      color: #9aa5be;
      overflow: hidden;
      white-space: nowrap;
    }
    #user-chip i { flex-shrink: 0; }
    #user-chip .user-name { transition: opacity .2s; }
    #sidebar.collapsed .user-name { opacity: 0; pointer-events: none; }
    #btn-sidebar-logout {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 6px;
      font-size: .78rem;
      color: #9aa5be;
      background: none;
      border: 1px solid #2d3347;
      cursor: pointer;
      transition: background .15s, color .15s;
      white-space: nowrap;
      overflow: hidden;
    }
    #btn-sidebar-logout:hover { background: #3b1f1f; color: #fc8181; border-color: #fc8181; }
    #btn-sidebar-logout .logout-label { transition: opacity .2s; }
    #sidebar.collapsed .logout-label { opacity: 0; pointer-events: none; }
    #btn-sidebar-collapse {
      align-self: flex-end;
      background: none;
      border: none;
      color: #9aa5be;
      cursor: pointer;
      font-size: 1rem;
      padding: 4px 6px;
      border-radius: 4px;
      transition: color .15s;
    }
    #btn-sidebar-collapse:hover { color: #e0e6f0; }

    /* ── Main area ───────────────────────────────── */
    #main-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ── Top bar ─────────────────────────────────── */
    #topbar {
      background: #fff;
      border-bottom: 1px solid #e2e8f0;
      padding: 0 20px;
      height: 54px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      z-index: 50;
    }
    #topbar-title {
      font-weight: 600;
      font-size: 1rem;
      color: #1e293b;
      flex: 1;
    }
    #topbar-breadcrumb {
      font-size: .8rem;
      color: #94a3b8;
      margin-left: 8px;
    }

    /* ── Content host ────────────────────────────── */
    #content-host {
      flex: 1;
      overflow: hidden;
      position: relative;
    }
    /* Each page pane fills the host; only active one is visible */
    .page-pane {
      position: absolute;
      inset: 0;
      overflow: auto;
      display: none;
    }
    .page-pane.active { display: block; }

    /* Iframe-based pages (upload, sim-admin) */
    .page-pane iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }

    /* ── Copilot drawer ──────────────────────────── */
    /*
      The Chainlit copilot widget mounts its own floating bubble via
      window.mountChainlitWidget(). We keep it alive inside #copilot-host
      which is always rendered in the DOM regardless of the active page,
      so the widget persists across navigation.
    */
    #copilot-host {
      position: fixed;
      bottom: 0;
      right: 0;
      z-index: 9999;
      pointer-events: none; /* let the widget handle its own events */
    }
    #copilot-host > * { pointer-events: auto; }

    /* ── Login overlay (shown before auth) ───────── */
    #shell-login-overlay {
      position: fixed;
      inset: 0;
      background: #0f172a;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
    }
    #shell-login-box {
      background: #1e2740;
      border-radius: 12px;
      padding: 36px 32px;
      width: 360px;
      box-shadow: 0 20px 60px #0008;
    }
    #shell-login-box h2 { color: #e0e6f0; font-size: 1.3rem; margin-bottom: 24px; }
    #shell-login-box .form-label { color: #9aa5be; font-size: .85rem; }
    #shell-login-box .form-control {
      background: #0f172a;
      border-color: #2d3347;
      color: #e0e6f0;
    }
    #shell-login-box .form-control:focus {
      background: #0f172a;
      border-color: #6ea8fe;
      color: #e0e6f0;
      box-shadow: 0 0 0 3px #6ea8fe33;
    }
    #shell-login-error { display: none; }

    /* ── Mobile: sidebar becomes bottom-sheet toggle ─ */
    @media (max-width: 768px) {
      #sidebar { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .25s; z-index: 200; width: 220px !important; }
      #sidebar.mobile-open { transform: translateX(0); }
      #topbar { padding-left: 12px; }
      #btn-mobile-menu { display: flex !important; }
    }
    #btn-mobile-menu { display: none; background: none; border: none; color: #64748b; font-size: 1.3rem; cursor: pointer; }

    /* ── Toasts ──────────────────────────────────── */
    #toast-container {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9998;
      display: flex;
      flex-direction: column;
      gap: 8px;
      pointer-events: none;
    }
    .shell-toast {
      background: #1e293b;
      color: #e0e6f0;
      padding: 10px 20px;
      border-radius: 8px;
      font-size: .85rem;
      box-shadow: 0 4px 20px #0005;
      animation: toast-in .25s ease;
      pointer-events: auto;
    }
    @keyframes toast-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }