@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&family=IBM+Plex+Mono:wght@400;600&display=swap');

/* --- Theme (Dark mode default) --- */
:root {
  --bg: #0B0C10;
  --panel: #111318;
  --panel-alt: #161922;
  --text: #E8EDF2;
  --muted: #A6B0BD;
  --border: #1F2937;

  /* Brand colors */
  --brand: #0B5FA5;             /* primary blue */
  --brand-primary: #0B5FA5;     /* deep blue */
  --brand-secondary: #0B7A75;   /* blue-green */
  --brand-accent: #14B8A6;      /* teal accent */
  --brand-success: #22C55E;     /* green */
  --brand-warn: #FACC15;        /* yellow */
  --brand-error: #EF4444;       /* red */

  --brand-text-primary: #E0E0E0;
  --brand-text-secondary: #B0BEC5;
  --brand-surface: #1E1E1E;
  --brand-surface-alt: #242424;
  --brand-border: #2C2C2C;

  --assistant-fab-size: 56px;
  --assistant-z: 9000;
  --assistant-panel-w: 540px;
  --assistant-panel-h: 720px;
  --assistant-radius: 12px;
  --assistant-shadow: 0 6px 28px rgba(0,0,0,.4);
  --assistant-header-h: 42px;
  --assistant-font-size: 13px;
  --form-max-width: 720px;
  --form-label-width: 160px;
  --mobile-divider: rgba(255,255,255,0.06);
  --header-height: 64px;
  --code-bg: #0E1016;
  --shadow: 0 8px 20px rgba(0,0,0,.35);
}

/* --- Light mode overrides --- */
.light-mode {
  --bg: #F9FAFB;
  --panel: #FFFFFF;
  --panel-alt: #F5F7FA;
  --text: #0B1020;
  --muted: #5A6570;
  --border: #E5E7EB;

  --brand-primary: #0B5FA5;   /* deep blue */
  --brand-secondary: #0B7A75; /* blue-green */
  --brand-accent: #0F766E;    /* teal */
  --brand-success: #16A34A;
  --brand-warn: #CA8A04;
  --brand-error: #B91C1C;

  --brand-text-primary: #212121;
  --brand-text-secondary: #424242;
  --brand-surface: #FFFFFF;
  --brand-surface-alt: #F5F7FA;
  --brand-border: #E0E0E0;

  --code-bg: #F4F6F8;
  --shadow: 0 6px 18px rgba(10,15,20,0.06);
  --mobile-divider: rgba(0,0,0,0.06);
}

/* --- Global Reset --- */
* {box-sizing: border-box;}
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
main.site-main > .container.page-shell.page-shell-app {
    width: auto !important;
    margin: 10px;
    box-sizing: border-box;
}
.small .error{
  display: none;
}
.phase2-init-meta.small.muted {
    display: none;
}

.phase2-init-card-list {
 flex-grow: 1;        /* Take up all available space in the card */
  overflow-y: auto;    /* Enable the scrollbar here */
  min-height: 0;       /* Critical for flex-child scrolling */
  display: block;
}
.sim-workspace-grid {
    display: grid !important;
    /* grid-template-columns: 200px 1fr !important; */
    gap: 18px;
    width: 100% !important;
    box-sizing: border-box;
}

.sim-support-panel {
    min-width: 200px !important;
    width: auto !important;
}

.sim-main-panel {
    min-width: 0 !important;
    width: auto !important;
}
/* In light mode use the variable background so the page turns bright */
.light-mode body {
  background: var(--bg);
  color: var(--text);
  max-width: 100%;
}
/* Typography */
h1, h2, h3, .banner-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
code, .mono {
  font-family: 'IBM Plex Mono', monospace;
}
/* --- Layout --- */
.container .banner {
  width: 100% !important; /* override max 1100px */
  margin: 0 !important;
  padding: 0 !important; /* override container padding */
}
.container {
  width: 100%; /* min(1100px, 96vw); */
  margin: 0 auto;
  padding: 40px;
}

.site-header, .site-footer {
  border-bottom: 1px solid var(--border);
  background: rgba(11,12,16,.7);
  backdrop-filter: blur(6px);
  position: relative;
  z-index: 100;
  transition: transform .3s cubic-bezier(.2, .9, .2, 1);
}
.site-header.hide-header {
  transform: translateY(-100%);
}

/* light mode header/footer */
.light-mode .site-header,
.light-mode .site-footer {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  backdrop-filter: none;
}
.site-footer { border-top: 1px solid var(--border); border-bottom: 0; }

.research-disclaimer {
  margin: 20px 0 10px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.header-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px;
  position: relative;
}

.brand { display: flex; align-items: center; gap: 10px; }
.logo {
  width: 125px; height: 45px; border-radius: 10px; background: none;
  color: #0b0c10; display: grid; place-items: center; font-weight: 800;
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
.logo-img { width: 100%; height: 100%; object-fit: contain; }
/* Future logo sizing for new asset (drop-in replacement) */
.logo.large { width: 52px; height: 52px; }
.logo.large .logo-img { width: 100%; height: 100%; }
/* larger logo variant when requested */
.logo.wide { width: 72px; }
/* .brand-text { display: grid; } */
.small { font-size: 12px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.nav { display: flex; align-items: center; gap: 14px; }
.nav-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.nav-link { color: var(--text); opacity: .85; text-decoration: none; }
.nav-link:hover { opacity: 1; }
.badge {
  background: var(--panel-alt); color: var(--brand); border: 1px solid var(--border);
  padding: 3px 8px; border-radius: 10px; font-size: 12px;
}
a, .nav-link { color: var(--brand-accent); text-decoration: none; }
a:hover, .nav-link:hover { opacity: 0.9; }
/* Theme toggle pill in header */
#theme-toggle { cursor: pointer; background: transparent; border: 1px solid var(--border); padding: 6px 10px; border-radius: 10px; display:inline-grid; place-items:center; font-size:14px; line-height:1; transition: background .15s ease, color .15s ease, transform .08s ease, box-shadow .12s ease; }
#theme-toggle:hover { transform: translateY(-2px); }
#theme-toggle:focus { outline: none; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }

/* light-mode specific toggle styling for good contrast */
.light-mode #theme-toggle {
  background: rgba(15,29,22,0.06); /* subtle greenish tint */
  border-color: rgba(0,0,0,0.06);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(20,30,20,0.06);
}

/* make the emoji/icon slightly larger and centered */
#theme-toggle { 
  font-size: 16px; padding: 6px 12px;
display:none;
}

/* Mobile header/menu */
#nav-toggle { display: none; }
#mobile-menu { display: none; }
@media (max-width: 760px) {
  /* keep the nav container visible so the toggle button is accessible,
    but hide the desktop inline links under small screens */
  .nav { display: flex; align-items: center; gap: 8px; }
  /* hide inline links in the desktop nav only; leave mobile-menu links visible */
  #main-nav > .nav-link { display: none; }
  #nav-toggle { display: inline-grid; width: 36px; height: 36px; font-size: 20px; border: 2px solid var(--border); padding: 8px 8px; }
  /* ensure selector requested by user is present */
  button#nav-toggle { padding: 8px 8px; }
  /* full-page overlay menu */
  /* mobile overlay slides down from the top (uses --header-height) */
  #mobile-menu { position: fixed; inset: 0 0 0 0; z-index: 140; display: block; visibility: hidden; opacity: 0; transform: translateY(calc(-1 * var(--header-height))); transition: opacity .22s ease, transform .28s cubic-bezier(.2,.9,.2,1), visibility .01s ease .22s; }
  /* place mobile menu content starting below the header instead of centered */
  #mobile-menu .container { height: 100%; display: flex; align-items: flex-start; justify-content: flex-start; padding-top: var(--header-height); }
  #mobile-menu .mobile-nav { background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%); width: 100%; max-width: 420px; margin: 0 auto; border-radius: 12px; box-shadow: var(--shadow); }
  #mobile-menu.open { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }
  /* keep the close button visible and fixed above the overlay so it's always reachable */
  #mobile-menu .close-btn { display: none; }
  #mobile-menu.open .close-btn {
    display: inline-grid;
    position: fixed; /* fixed so it stays visible when panel scrolls */
    right: 12px; top: calc(max(8px, var(--header-height) / 6)); z-index: 400;
    width: 48px; height: 48px; display: inline-grid; place-items: center;
    border-radius: 10px; background: var(--panel-alt); border: 2px solid var(--border);
    color: var(--text); font-size: 20px; cursor: pointer;
  }
  /* Mobile menu items: left-aligned, transparent background, no border; subtle off-white divider between items */
  @media (max-width: 760px) {
    #mobile-menu .mobile-nav {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 12px 6px;
        align-items: stretch;
    }
    #mobile-menu .mobile-nav .nav-link {
      display: block;
      width: 100%;
      text-align: left;
      padding: 12px 10px;
      background: transparent;
      border: none;
      color: var(--text);
      opacity: 1;
      border-bottom: 1px solid var(--mobile-divider); /* divider via variable for light/dark */
    }
    /* hover and focus styles for mobile links (subtle background + focus ring) */
    #mobile-menu .mobile-nav .nav-link:hover,
    #mobile-menu .mobile-nav .nav-link:focus {
      background: rgba(255,255,255,0.02);
      outline: none;
    }
    #mobile-menu .mobile-nav .nav-link:focus-visible {
      box-shadow: 0 0 0 3px rgba(123,216,143,0.08);
    }
    /* light-mode adjustments for hover/focus contrast */
    .light-mode #mobile-menu .mobile-nav .nav-link:hover,
    .light-mode #mobile-menu .mobile-nav .nav-link:focus {
      background: rgba(0,0,0,0.04);
    }
    /* Remove divider on last item for cleaner finish */
    #mobile-menu .mobile-nav .nav-link:last-child { border-bottom: none; }
  }
  /* backdrop dim and ensure overlay captures pointer events only when open */
  #mobile-menu { background: rgba(0,0,0,0); pointer-events: none; }
  #mobile-menu.open { background: rgba(0,0,0,0.38); pointer-events: auto; }
  /* keep the page covered until user closes menu; allow menu content to scroll independently */
  #mobile-menu .mobile-nav {
    max-height: calc(100vh - var(--header-height) - 20px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 0 12px 12px;
    width: 100%;
  }
  /* animated icon swap for the hamburger toggle */
  #nav-toggle .nav-icon { display: inline-grid; width: 18px; height: 18px; position: relative; }
  #nav-toggle .nav-icon svg { position: absolute; inset: 0; width: 18px; height: 18px; transition: transform .22s ease, opacity .2s ease; }
  #nav-toggle .nav-icon .icon-close { transform: rotate(90deg) scale(.8); opacity: 0; }
  #nav-toggle.open .nav-icon .icon-close { transform: rotate(0deg) scale(1); opacity: 1; }
  #nav-toggle.open .nav-icon .icon-hamburger { transform: rotate(-90deg) scale(.8); opacity: 0; }
  #nav-toggle .nav-icon .icon-hamburger { transform: rotate(0deg) scale(1); opacity: 1; }
}
@media (min-width: 761px) {
  /* ensure mobile menu hidden on desktop */
  #mobile-menu { display: none !important; }
}

/* --- Page titles --- */
.page-title { margin: 8px 0 16px; font-size: 24px; font-weight: 700; line-height: 1.3; }

/* --- Cards --- */
.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.card-header h2 { 
  margin: 0 0 6px; 
  font-size: 20px; 
  line-height: 1.35; 
  font-weight: 700;
  word-wrap: break-word; 
}
.card-header p { margin: 0; font-size: 13px; line-height: 1.5; }

.grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;
}
/* .grid-3 definition moved; consolidated later */
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* --- Forms --- */
.stack { display: grid; }
.gap { gap: 10px; }
.actions { display: flex; gap: 10px; align-items: center; }
.actions.between { justify-content: space-between; }
.inline { display: inline-flex; align-items: center; gap: 8px; }
.pill {
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 40px;
  padding: 4px 10px; font-size: 12px; color: var(--muted);
}

input[type="file"], textarea, button {
  font-family: inherit; font-size: 14px; color: var(--text);
}
textarea.code-area {
  width: 100%;
  background: var(--code-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 12px 12px 16px;
  outline: none;
  resize: vertical;
  min-height: 420px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  line-height: 1.35;
}

/* File drop */
.file-drop {
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  padding: 18px;
  background: var(--panel);
  display: grid; gap: 6px; text-align: center;
}
.file-drop input[type="file"] { display: none; }
.file-cta {
  display: inline-flex; align-items: center; gap: 8px;
  justify-self: center; cursor: pointer; user-select: none;
  padding: 8px 12px; background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 10px;
}
.file-cta svg { width: 18px; height: 18px; fill: var(--brand); }
.file-hint { font-size: 12px; color: var(--muted); }

/* Buttons */
/* .btn {
  appearance: none; border: 1px solid var(--border);
  background: var(--panel); color: var(--text);
  padding: 8px 12px; border-radius: 10px; cursor: pointer;
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--panel-alt); }
.btn.primary { background: var(--brand); color: #ffffff; border-color: #5cc277; }
.btn.primary[disabled] { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; } */
.btn {
  appearance: none;
  border: 1px solid var(--brand-border);
  background: var(--panel);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); background: var(--panel-alt); }
.btn.primary {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
}
.btn.primary:hover { background: var(--brand-secondary); }
.btn.primary[disabled] { opacity: .5; cursor: not-allowed; }
.btn.ghost {
  background: transparent;
  border: 2px solid var(--brand-primary);
  color: var(--brand-primary);
}
.btn.ghost:hover { background: rgba(255,255,255,0.08); }


.btn:active { transform: translateY(0); }

/* Callouts & Toasts */
.callout {
  border-radius: 12px; padding: 10px 12px; border: 1px solid var(--border);
  background: var(--panel);
}
.callout.warn { border-color: #6a5c22; background: var(--panel); color: #ffe9a8; }
.toasts { display: grid; gap: 8px; margin: 12px 0; }
.toast {
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel);
}
.toast.success { border-color: #1f3a28; background: var(--panel); color: var(--ok); }
.toast.error { border-color: #4b1f1f; background: var(--panel); color: var(--error); } */
/* --- Callouts & Toasts --- */
.toast.success { color: var(--brand-success); }
.toast.error { color: var(--brand-error); }


/* Results gallery */
.gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px;
}
.shot {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px;
}
.shot img {
  display: block; width: 100%; height: auto; border-radius: 6px;
  border: 1px solid var(--border); background: var(--panel);
}
.shot figcaption { margin-top: 6px; color: var(--muted); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
}
.site-footer .container {
  padding: 26px 40px 18px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 28px;
}
.footer-col h3,
.footer-col h4 {
  margin: 0 0 10px;
  color: var(--text);
}
.footer-col h3 {
  font-size: 18px;
}
.footer-col h4 {
  font-size: 14px;
  color: var(--muted);
  letter-spacing: .2px;
}
.footer-brand p {
  margin: 0;
  max-width: 520px;
  line-height: 1.55;
}
.footer-contact {
  margin-top: 10px !important;
  font-size: 13px;
}
.footer-contact a {
  color: var(--brand-accent);
  text-decoration: none;
}
.footer-contact a:hover,
.footer-contact a:focus-visible {
  text-decoration: underline;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.footer-links a {
  color: var(--text);
  opacity: .86;
  text-decoration: none;
}
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--brand-accent);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.light-mode .footer-links a {
  color: #1d3342;
}
.light-mode .footer-links a:hover,
.light-mode .footer-links a:focus-visible {
  color: #0B5FA5;
}
@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .site-footer .container {
    padding: 22px 20px 16px;
  }
}

/* Static info pages */
.static-page {
  max-width: 860px;
  margin: 8px auto 24px;
}
.policy-page {
  max-width: 900px;
  margin: 8px auto 24px;
  padding: 24px 26px;
}
.policy-meta {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
}
.policy-lead {
  margin: 0 0 18px;
  line-height: 1.65;
}
.policy-section {
  margin-top: 22px;
}
.policy-section h2 {
  margin: 0 0 10px;
  font-size: 20px;
}
.policy-section h3 {
  margin: 14px 0 8px;
  font-size: 16px;
}
.policy-section p {
  margin: 0 0 12px;
  line-height: 1.65;
}
.policy-list {
  margin: 0 0 12px 20px;
  padding: 0;
  line-height: 1.65;
}
.policy-list li {
  margin-bottom: 6px;
}
.policy-contact {
  margin-top: 16px;
}
.policy-contact strong {
  display: inline-block;
  min-width: 86px;
}
.policy-contact a {
  color: var(--brand-accent);
  text-decoration: none;
}
.policy-contact a:hover,
.policy-contact a:focus-visible {
  text-decoration: underline;
}
@media (max-width: 760px) {
  .policy-page {
    padding: 18px 16px;
  }
  .policy-section h2 {
    font-size: 18px;
  }
  .policy-section h3 {
    font-size: 15px;
  }
}
.dot { width: 4px; height: 4px; background: var(--muted); border-radius: 50%; display: inline-block; }

/* Admin bar */
.admin-bar { background: var(--brand); color: #003f37; }
.admin-bar .admin-link { color: #071209; font-weight: 700; text-decoration: none; padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,0.85); }
.admin-bar .admin-link:hover { opacity: .95; transform: translateY(-1px); }
.light-mode .admin-bar {background: var(--brand);max-width: 100%;}


/* Details */
details { margin-top: 8px; }
summary { cursor: pointer; color: var(--text); }
summary:hover { opacity: .9; }
ul.bullets { margin: 8px 0 0 18px; }
code { background: var(--code-bg); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); }

/* --- Assistant Component --- */
.assistant-fab {
  position: fixed;
  inset: auto 1.5rem 1.5rem auto;
  width: var(--assistant-fab-size);
  height: var(--assistant-fab-size);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  z-index: var(--assistant-z);
  user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, background .25s ease;
}
.assistant-fab:hover { transform: translateY(-4px); box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.assistant-fab:active { transform: translateY(-1px); }

.assistant-panel {
  position: fixed;
  bottom: calc(1.5rem + var(--assistant-fab-size));
  right: 1.5rem;
  width: var(--assistant-panel-w);
  max-width: min(90vw, var(--assistant-panel-w));
  height: var(--assistant-panel-h);
  max-height: 86vh;
  background: var(--brand-surface);
  color: var(--brand-text-primary);
  border: 1px solid var(--brand-border);
  border-radius: var(--assistant-radius);
  display: none;
  flex-direction: column;
  box-shadow: var(--assistant-shadow);
  z-index: calc(var(--assistant-z) + 1);
  backdrop-filter: blur(6px);
  font-size: var(--assistant-font-size);
  overflow: hidden;
  min-width: 420px;
  min-height: 500px;
}
/* removed redundant light-mode override (semantic vars already adjust) */

.assistant-panel.open { display: flex; }
.assistant-header {
  min-height: 72px;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: .6rem .8rem;
  background: linear-gradient(180deg, rgba(11,25,45,0.6), rgba(11,20,35,0.5));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  flex-wrap: nowrap;
  overflow: hidden;
  cursor: move;
}
.light-mode .assistant-header {
  background: linear-gradient(180deg, #F0F5FA, #FAFBFC);
  color: var(--text);
}
.assistant-header-actions { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; justify-content: flex-end; }
.assistant-title { font-size: 15px; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }
.assistant-subtitle { font-size: 11px; opacity: .88; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 250px; }
.assistant-close {
  background: rgb(233 235 238);
  border: 1px solid rgb(215 218 220);
  color: #242937;
  cursor: pointer; font-size: 22px; line-height: 1;
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .18s ease, transform .18s ease;
}
.assistant-close:hover { background: rgb(233 235 238); transform: translateY(-2px); }
.assistant-close:active { transform: translateY(0); }

.assistant-window-btn,
.assistant-download {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 500;
  letter-spacing: .3px;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
}
.assistant-window-btn:hover,
.assistant-download:hover { background: rgba(255,255,255,0.22); transform: translateY(-2px); }
.assistant-window-btn:active,
.assistant-download:active { transform: translateY(0); }
.light-mode .assistant-window-btn,
.light-mode .assistant-download { color: var(--text); border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.05); }

.assistant-messages {
  flex: 1; overflow: auto; padding: .6rem .75rem .65rem; line-height: 1.35;
  display: flex; flex-direction: column; gap: .65rem;
  scrollbar-width: thin;
}
.assistant-messages::-webkit-scrollbar { width: 8px; }
.assistant-messages::-webkit-scrollbar-track { background: transparent; }
.assistant-messages::-webkit-scrollbar-thumb { background: var(--brand-border); border-radius: 4px; }

.assistant-msg { animation: fadeIn .25s ease; }
.assistant-msg.you > strong { color: var(--brand-secondary); }
.assistant-msg.assistant > strong { color: var(--brand-primary); }
.assistant-msg.assistant-typing { font-style: italic; }
.assistant-tip { opacity: .7; font-size: 12px; }

.assistant-form {
  border-top: 1px solid var(--brand-border);
  padding: .55rem .6rem .55rem .65rem;
  display: flex; gap: .55rem; align-items: flex-end;
  background: var(--brand-surface-alt);
}
.assistant-input {
  flex: 1;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  padding: .5rem .65rem;
  color: var(--brand-text-primary);
  font-size: 13px;
  line-height: 1.3;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.assistant-input:focus { outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 2px rgba(66,165,245,0.25); }
.light-mode .assistant-input:focus { box-shadow: 0 0 0 2px rgba(30,136,229,0.30); }

.assistant-send {
  background: var(--brand-primary);
  color: #fff;
  border: 1px solid var(--brand-primary);
  padding: .55rem .95rem;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
  letter-spacing: .2px;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.assistant-send:hover { background: var(--brand-secondary); box-shadow: 0 4px 14px rgba(0,0,0,.35); transform: translateY(-2px); }
.assistant-send:active { transform: translateY(0); }

@media (max-width: 640px) {
  .assistant-panel { right: .75rem; bottom: calc(1rem + var(--assistant-fab-size)); width: min(94vw, 380px); height: min(72vh, 560px); min-width: 0; min-height: 0; max-width: min(94vw, 380px); }
  .assistant-fab { right: .75rem; bottom: 1rem; }
  .assistant-header { cursor: default; }
  .assistant-resize-handle { display: none; }
}
.assistant-panel.is-maximized { max-width: none; max-height: none; }
.assistant-context {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--brand-border);
  background: rgba(11,95,165,0.08);
  color: var(--brand-text-secondary);
  font-size: 12px;
}
.assistant-resize-handle {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  opacity: .6;
}
.assistant-resize-handle::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-right: 2px solid var(--brand-border);
  border-bottom: 2px solid var(--brand-border);
}
.assistant-dragging {
  user-select: none;
  cursor: move;
}
.assistant-context.has-selection { color: var(--brand-text-primary); }
.assistant-msg {
  animation: fadeIn .25s ease;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.assistant-msg-label {
  font-size: 11px;
  opacity: .72;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.assistant-msg.you .assistant-msg-label { color: var(--brand-secondary); }
.assistant-msg.assistant .assistant-msg-label { color: var(--brand-primary); }
.assistant-msg-body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.assistant-block {
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  padding: .7rem .75rem;
}
.light-mode .assistant-block { background: rgba(11,95,165,0.03); }
.assistant-block h2,
.assistant-block h3,
.assistant-block h4 {
  margin: 0 0 .45rem;
  font-size: 14px;
  line-height: 1.35;
}
.assistant-block p { margin: 0; }
.assistant-block p + p { margin-top: .45rem; }
.assistant-block ul { margin: 0; padding-left: 1rem; }
.assistant-block li + li { margin-top: .25rem; }
.assistant-block-title {
  margin-bottom: .5rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-text-secondary);
}
.assistant-block-notice.is-warning {
  border-color: rgba(250,204,21,0.45);
  background: rgba(250,204,21,0.08);
}
.assistant-block-notice.is-info {
  border-color: rgba(20,184,166,0.35);
  background: rgba(20,184,166,0.08);
}
.assistant-inline-image {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--brand-border);
  background: rgba(0,0,0,0.2);
}
.assistant-image-caption,
.assistant-table-note,
.assistant-artifact-path,
.assistant-empty {
  margin-top: .45rem;
  font-size: 12px;
  color: var(--brand-text-secondary);
}
.assistant-table-wrap {
  overflow: auto;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
}
.assistant-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.assistant-table th,
.assistant-table td {
  padding: .45rem .5rem;
  border-bottom: 1px solid var(--brand-border);
  text-align: left;
  vertical-align: top;
}
.assistant-table th {
  position: sticky;
  top: 0;
  background: var(--brand-surface-alt);
}
.assistant-iframe {
  width: 100%;
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  background: #fff;
}
.assistant-artifact-link {
  color: var(--brand-accent);
  font-weight: 600;
}
.assistant-equation {
  overflow: auto;
  padding: .2rem 0;
}
figure.shot.is-selected {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(20,184,166,0.12);
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }


/* --- Wizard --- */
/* Wizard progress bar container */
.wizard-progress {
  background-color: #e0e0e0;
  border-radius: 4px;
  height: 10px;
  width: 100%;
  margin: 1rem 0;
  overflow: hidden;
}

/* Actual progress bar */
.wizard-progress-bar {
  background-color: #007bff;  /* or your brand color */
  height: 100%;
  transition: width 0.3s ease-in-out;
}

/* --- Auth pages (login / register / profile) --- */
.auth-wrapper {
  display: grid;
  place-items: center;
  padding: 48px 16px;
  min-height: 60vh;
}
.auth-card {
  width: 420px;
  max-width: 720px; /* avoid extremely wide auth cards on very large screens */
  border-radius: 12px;
  padding: 20px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(2,6,12,0.6);
}
.form-row { display: grid; gap: 6px; margin-bottom: 12px; align-items: center; }
.form-label { font-size: 13px; color: var(--muted); margin-bottom: 4px; word-break: break-word; white-space: normal; }
.form-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

/* --- Banner --- */
/* .banner {
  width: 100%;
  padding: 150px 50px;
  background: linear-gradient(305deg, var(--brand-primary), var(--brand-secondary));
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
} */
.banner {
  width: 100%;
  padding: 150px 50px;
  background: linear-gradient(305deg, #0B5FA5, #0B7A75);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow);
}
.light-mode .banner {
  background: linear-gradient(305deg, #1084DD, #1B988E);
  color: #fff;
}

.banner-home {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(180deg, rgba(7, 25, 44, 0.28) 0%, rgba(8, 33, 54, 0.5) 100%),
    linear-gradient(90deg, rgba(8, 24, 41, 0.72) 0%, rgba(8, 24, 41, 0.5) 42%, rgba(8, 24, 41, 0.24) 100%),
    url('/static/images/banner.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.light-mode .banner-home {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(13, 72, 118, 0.22) 100%),
    linear-gradient(90deg, rgba(9, 45, 72, 0.62) 0%, rgba(9, 45, 72, 0.44) 42%, rgba(9, 45, 72, 0.16) 100%),
    url('/static/images/banner.png');
}

.banner-content {
  max-width: 900px;
  margin: 0 auto;
}

.banner-home .banner-content {
  position: relative;
  z-index: 1;
  max-width: 980px;
  padding: 0 10px;
}

.banner-title {
  font-size: 42px;
  font-weight: 800;
  margin: 0 0 16px;
  line-height: 1.2;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 900px) {
  .banner-title { font-size: 32px; }
}

.banner-subtitle {
  font-size: 18px;
  margin: 0 auto 28px;
  opacity: 0.9;
  max-width: 720px;
}

.banner-disclaimer {
  font-size: 14px;
  max-width: 860px;
  opacity: 0.96;
}

.banner-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* .banner .btn.primary {
  background: #fff;
  color: var(--brand-primary);
  border-color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  font-size: 16px;
} */

/* .banner .btn.ghost {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  font-size: 16px;
}

.banner .btn.ghost:hover {
  background: rgba(255,255,255,0.12);
} */

.banner .btn.primary {
  background: #fff;
  color: var(--brand-primary);
  border-color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  font-size: 16px;
}
.banner .btn.ghost {
  border: 2px solid #fff;
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  font-size: 16px;
}
.banner .btn.ghost:hover { background: rgba(255,255,255,0.12); }

@media (max-width: 600px) {
  .banner {
    padding: 112px 22px;
  }

  .banner-home {
    min-height: 460px;
    background-position: 62% center;
  }

  .banner-title { font-size: 28px; }
  .banner-subtitle { font-size: 16px; }
  .banner-disclaimer { font-size: 13px; }
}

/* About section */
.about-section {
  text-align: center;
  padding: 80px 16px;
}
.about-text {
  max-width: 720px;
  margin: 20px auto;
  font-size: 18px;
  color: var(--muted);
}
/* .about-actions .btn {
  margin: 10px;
} */

/* Features wrapper (if not already defined) */
.features {
  margin-top: 60px;
}

/* Call to Action */
.cta-section {
  margin: 80px auto;
  padding: 60px 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0B5FA5, #0B7A75);
  color: white;
  text-align: center;
}
.light-mode .cta-section {
  background: linear-gradient(135deg, #1084DD, #1B988E);
}
.cta-section h2 {
  font-size: 2rem;
  margin-bottom: 16px;
}
.cta-section p {
  max-width: 600px;
  margin: 0 auto 24px;
  font-size: 1.1rem;
}
.cta-section .btn.cta {
  background: white;
  color: #0B5FA5;
  font-weight: bold;
  padding: 14px 32px;
  font-size: 16px;
  border-radius: 8px;
  transition: 0.3s;
}
.cta-section .btn.cta:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #0B5FA5;
}

/* Alternating Section Layout */
.alt-section {
  padding: 80px 20px;
}
.alt-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.alt-section.reverse .alt-card {
  flex-direction: row-reverse;
}
.alt-text {
  flex: 1;
}
.alt-text h2 {
  font-size: 1.875rem;
  margin-bottom: 16px;
  color: var(--text);
  line-height: 1.3;
}
.alt-text p {
  font-size: 1.1rem;
  color: var(--brand-text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}
.alt-graphic {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 260px;
}
.alt-graphic img {
  max-width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}

/* Responsive: stack sections on mobile */
@media (max-width: 900px) {
  .alt-card { flex-direction: column !important; gap: 32px; }
  .alt-section.reverse .alt-card { flex-direction: column !important; }
  .alt-section { padding: 60px 20px; }
  .alt-text h2 { font-size: 1.5rem; }
}

/* For larger screens align label and input on one row for compact forms */
@media (min-width: 560px) {
  .form-row.horizontal {
  display: grid;
  grid-template-columns: var(--form-label-width) minmax(200px, 1fr); /* label column + input column */
  gap: 12px;
  align-items: center;
  }
  .form-row.horizontal .form-label { margin: 0; }
}

.form-input, input[type="text"], input[type="email"], input[type="password"], textarea, input[type="number"], select {
  background: var(--panel);
  border: 1px solid var(--border);
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease, transform .05s ease;
  width: 100%;
  max-width: var(--form-max-width);
  min-height: 38px;
}
.form-input.small { padding: 8px 10px; min-height: 34px; }
.form-input:focus, input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 8px 26px rgba(11,95,165,0.14); transform: translateY(-1px); }

/* Inline inputs (like remember me + checkbox) */
.form-inline { display: flex; gap: 10px; align-items: center; }
.form-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 8px; }
.btn.full { width: 100%; justify-content: center; }
.alert { padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; border: 1px solid var(--border); background: #0f1216; }
/* .alert.success { border-color: #1f3a28; background: #071209; color: var(--ok); }
.alert.error { border-color: #4b1f1f; background: #1a0e0e; color: var(--error); } */
/* --- Alerts --- */
.alert.success { border-color: var(--brand-success); color: var(--brand-success); }
.alert.error { border-color: var(--brand-error); color: var(--brand-error); }

.small-note { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* profile */
.profile .meta { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.profile .runs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.profile .runs li { padding: 8px 10px; border-radius: 8px; background: #0f131b; border: 1px solid var(--border); }

@media (max-width: 480px) {
  .auth-card { padding: 16px; }
}

.auth-page-shell {
  width: min(1120px, 96vw);
  margin: 18px auto 28px;
}

.auth-page-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items: stretch;
}

.auth-brand-panel {
  background: linear-gradient(155deg, rgba(11, 95, 165, 0.2), rgba(11, 122, 117, 0.14));
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 16px;
  padding: 28px 30px;
}

.auth-kicker {
  margin: 0 0 10px;
  color: var(--brand-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.auth-brand-panel h1 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 2vw, 2.2rem);
  line-height: 1.2;
}

.auth-lead {
  margin: 0;
  color: var(--brand-text-secondary);
  line-height: 1.65;
}

.auth-benefits {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.auth-benefits li {
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 10px;
  background: rgba(20, 184, 166, 0.08);
  padding: 10px 12px;
  line-height: 1.45;
}

.auth-enterprise-card {
  width: 100%;
  max-width: none;
  padding: 24px;
}

.auth-form-title {
  margin: 0 0 6px;
  font-size: 1.45rem;
}

.auth-form-stack { margin-top: 10px; }
.auth-callout-note { margin: 10px 0 14px; }

.auth-alt-link {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.auth-alt-link a {
  color: var(--brand-accent);
  font-weight: 600;
}

/* --- Docs Page --- */
.docs-page-shell {
  width: min(1120px, 96vw);
  margin: 16px auto 30px;
  display: grid;
  gap: 18px;
}

.docs-hero {
  padding: 24px 26px;
  background: linear-gradient(150deg, rgba(11, 95, 165, 0.18), rgba(11, 122, 117, 0.12));
  border: 1px solid rgba(20, 184, 166, 0.24);
}

.docs-kicker {
  margin: 0 0 10px;
  color: var(--brand-accent);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.docs-title { margin: 0 0 12px; }

.docs-lead {
  margin: 0;
  max-width: 78ch;
  line-height: 1.65;
  color: var(--brand-text-secondary);
}

.docs-callout { margin-top: 14px; }

.docs-section {
  padding: 20px 22px;
}

.docs-section h2 {
  margin: 0 0 14px;
  font-size: 1.25rem;
}

.docs-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.docs-link-card {
  display: block;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 15px;
  color: inherit;
  text-decoration: none;
  transition: transform .12s ease, border-color .16s ease, box-shadow .16s ease;
}

.docs-link-card:hover,
.docs-link-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(20, 184, 166, 0.48);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.docs-link-card h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--text);
}

.docs-link-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.light-mode .auth-brand-panel {
  background: linear-gradient(145deg, rgba(11, 95, 165, 0.12), rgba(11, 122, 117, 0.08));
  border-color: rgba(11, 95, 165, 0.22);
}

.light-mode .auth-benefits li {
  background: rgba(11, 95, 165, 0.08);
  border-color: rgba(11, 95, 165, 0.2);
}

.light-mode .docs-hero {
  background: linear-gradient(145deg, rgba(11, 95, 165, 0.12), rgba(11, 122, 117, 0.09));
  border-color: rgba(11, 95, 165, 0.24);
}

@media (max-width: 980px) {
  .auth-page-grid {
    grid-template-columns: 1fr;
  }

  .docs-link-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Admin layout --- */
.admin-layout { display: flex; gap: 20px; align-items: flex-start; }
.admin-sidebar { width: 200px; position: sticky; top: 16px; align-self: flex-start; }
.admin-main { flex: 1; }
.admin-nav { display: flex; flex-direction: column; gap: 8px; }
.admin-nav-link {
  display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none;
  color: var(--text); background: transparent; border: 1px solid transparent;
}
.admin-nav-link:hover { background: var(--panel); border-color: var(--border); }

/* duplicate .grid-3 removed; earlier consolidated definition exists */
.user-card, .run-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; width: 100%; }
.user-card .user-row, .run-card .run-main { display: flex; gap: 12px; align-items: center; }
.user-card .user-meta { color: var(--muted); font-size: 13px; display: grid; gap: 4px; }
.run-id { font-family: var(--mono); color: var(--brand); font-weight: 700; }
.run-actions { display: flex; gap: 8px; align-items: center; }
.list { display: grid; gap: 12px; }
.card.user-card, .card.run-card { padding: 12px; border-radius: 10px; }

@media (max-width: 900px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar { width: 100%; position: relative; top: 0; }
}

/* KPI row */
.kpi-row { display: flex; gap: 12px; margin-bottom: 12px; }
.kpi { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.kpi-title { color: var(--muted); font-size: 13px; }
.kpi-value { font-size: 22px; font-weight: 700; }

.card canvas { width: 100% !important; height: 160px !important; }



.hero-image {
  background-size: cover;
  background-position: center;
  min-height: 60vh;
  position: relative;
  display: flex;
  align-items: center;
}
.hero-image .overlay {
  background: rgba(0,0,0,0.55);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.hero-text {
  color: white;
  max-width: 720px;
  padding: 40px;
}

.about-section {
  padding: 80px 20px;
}
.about-row {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.about-row.reverse {
  flex-direction: row-reverse;
}
.about-text {
  flex: 1;
}
.about-text h2 {
  margin-bottom: 16px;
  font-size: 2rem;
  color: var(--text);
}
.about-text p {
  color: var(--brand-text-secondary);
  line-height: 1.6;
}
.about-image {
  flex: 1;
}
.about-image img {
  border-radius: 12px;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow);
}

.about-values {
  margin-top: 80px;
  text-align: center;
}
.about-values .grid-3 {
  margin-top: 40px;
}
.value-card {
  background: var(--panel);
  padding: 24px;
  border-radius: 12px;
  text-align: center;
  box-shadow: var(--shadow);
}
.value-card img {
  max-height: 64px;
  margin-bottom: 16px;
}

/* About page redesign */
.about-page {
  position: relative;
  padding: 22px 0 72px;
}

.about-shell {
  width: min(1100px, 94vw);
  margin: 0 auto;
}

.about-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-accent);
}

.about-hero {
  margin-top: 8px;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 34px;
  align-items: stretch;
}

.about-hero-copy {
  background: linear-gradient(150deg, rgba(11, 95, 165, 0.18), rgba(20, 184, 166, 0.08));
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 18px;
  padding: 28px 30px;
}

.about-hero-copy h1 {
  margin: 0 0 14px;
  font-size: clamp(2rem, 2.8vw, 2.8rem);
  line-height: 1.15;
}

.about-hero-copy p {
  margin: 0;
  max-width: 64ch;
  color: var(--brand-text-secondary);
  font-size: 1.02rem;
  line-height: 1.65;
}

.about-hero-copy p + p {
  margin-top: 14px;
}

.about-hero-visual {
  margin: 0;
  min-height: 420px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: linear-gradient(160deg, rgba(11, 95, 165, 0.18), rgba(11, 122, 117, 0.2));
}

.about-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.about-band {
  margin-top: 34px;
}

.about-band-alt .about-copy-block {
  background: var(--panel);
  border: 1px solid var(--border);
}

.about-copy-block {
  background: rgba(17, 19, 24, 0.82);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 30px;
}

.about-copy-block h2,
.about-principles-heading h2,
.about-closing h2 {
  margin: 0 0 12px;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
}

.about-copy-block p,
.about-principle-card p,
.about-closing p {
  margin: 0;
  max-width: 70ch;
  color: var(--brand-text-secondary);
  line-height: 1.68;
}

.about-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.about-list li {
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  background: rgba(20, 184, 166, 0.08);
  font-weight: 500;
}

.about-principles-heading {
  margin-bottom: 14px;
}

.about-principles-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.about-principle-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

.about-principle-card img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  display: block;
  margin: 0 0 14px;
}

.about-principle-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  line-height: 1.35;
}

.about-closing-wrap {
  margin-top: 28px;
}

.about-closing {
  border-radius: 16px;
  border: 1px solid rgba(11, 95, 165, 0.45);
  background: linear-gradient(140deg, rgba(11, 95, 165, 0.2), rgba(11, 122, 117, 0.12));
  padding: 26px 28px;
}

.light-mode .about-hero-copy {
  background: linear-gradient(145deg, rgba(11, 95, 165, 0.11), rgba(20, 184, 166, 0.08));
  border-color: rgba(11, 95, 165, 0.2);
}

.light-mode .about-copy-block {
  background: #FFFFFF;
}

.light-mode .about-list li {
  background: rgba(11, 95, 165, 0.08);
  border-color: rgba(11, 95, 165, 0.22);
}

.light-mode .about-closing {
  background: linear-gradient(140deg, rgba(11, 95, 165, 0.14), rgba(11, 122, 117, 0.1));
}

@media (max-width: 980px) {
  .about-page {
    padding-top: 8px;
  }

  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-hero-visual {
    min-height: 320px;
  }

  .about-principles-grid {
    grid-template-columns: 1fr;
  }

  .about-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .about-shell {
    width: min(1100px, 95vw);
  }

  .about-hero-copy,
  .about-copy-block,
  .about-closing {
    padding: 20px;
  }

  .about-hero-visual {
    min-height: 270px;
  }

  .about-principle-card {
    padding: 18px;
  }
}

/* --- Template Style Cleanup Utilities --- */
.inline-form { display: inline; }
.inline-form-gap-left { margin-left: 8px; }
.section-actions { margin-bottom: 12px; }
.section-actions-top { margin-top: 12px; }
.section-card-top { margin-top: 12px; }
.section-top-gap { margin-top: 12px; }
.card-pad-10 { padding: 10px; }
.panel-hidden { display: none; }
.panel-visible { display: block; }

.admin-bar-inner {
  display: flex;
  justify-content: center;
  padding: 8px 16px;
}

.history-run-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-category-title { margin-bottom: 6px; }

/* --- Phase 1+2 Shared Foundation Overrides --- */
:root {
  --bg: #F8FBFE;
  --panel: #FFFFFF;
  --panel-alt: #F3F7FB;
  --border: #E3EAF2;
  --text: #243145;
  --muted: #607086;

  --brand-primary: #1E5EFF;
  --brand-secondary: #1343C7;
  --brand-accent: #0FA7A0;
  --brand-success: #1E9E5A;
  --brand-warn: #B98107;
  --brand-error: #C33B3B;

  --surface-soft: #EEF3F8;
  --shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-hover: 0 16px 40px rgba(15, 23, 42, 0.1);

  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

.light-mode {
  --bg: #F8FBFE;
  --panel: #FFFFFF;
  --panel-alt: #F3F7FB;
  --border: #E3EAF2;
  --text: #243145;
  --muted: #607086;
}

body {
  background:
    radial-gradient(circle at 0% 0%, rgba(53, 200, 255, 0.08), rgba(53, 200, 255, 0) 36%),
    radial-gradient(circle at 100% 0%, rgba(30, 94, 255, 0.08), rgba(30, 94, 255, 0) 32%),
    var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
.banner-title,
.workspace-title,
.page-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  color: #172033;
}

code,
.mono,
.run-id {
  font-family: 'IBM Plex Mono', monospace;
}

.site-main {
  padding: var(--space-6) 0 var(--space-8);
}

.container {
  width: 100%;
  /* margin: 10px; */
  padding: 0;
}

.page-shell {
  display: grid;
  gap: var(--space-5);
}

.page-shell-public {
  width: min(1280px, 100%);
}

.page-shell-app,
.page-shell-admin {
  width: auto;
}

.site-header,
.site-footer {
  background: rgba(248, 251, 254, 0.92);
  border-color: var(--border);
  backdrop-filter: blur(10px);
}

.header-row {
  padding: 20px;
}

.brand {
  text-decoration: none;
  color: inherit;
  gap: var(--space-3);
}

 .brand-text {
  display: none;
  line-height: 1.15;
} 

.nav {
  gap: var(--space-4);
}

.nav-link {
  color: #314256;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 500;
}

.nav-link:hover,
.nav-link.is-active {
  color: #172033;
  background: var(--panel);
  border-color: var(--border);
}

.nav-link-workspace,
.nav-link-admin,
.nav-link-auth {
  font-weight: 600;
}

#theme-toggle {
  min-width: 62px;
  background: var(--panel);
  color: var(--text);
}

.admin-bar {
  background: linear-gradient(90deg, #EBF4FF, #EAF7F7);
  border-bottom: 1px solid var(--border);
}

.admin-bar .admin-link {
  color: #1b365a;
  background: #FFFFFF;
  border: 1px solid var(--border);
  text-align: center;
  margin: 10px;
}

.footer-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.ui-section-header {
  display: grid;
  gap: var(--space-2);
  max-width: 760px;
  margin-bottom: var(--space-5);
}

.ui-section-header h2 {
  margin: 0;
  font-size: clamp(1.7rem, 2.4vw, 2.4rem);
  line-height: 1.15;
}

.ui-section-header p {
  margin: 0;
  color: var(--muted);
}

.ui-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.ui-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.ui-badge-neutral {
  background: var(--panel);
  color: #354860;
}

 .ui-badge-primary {
  display:none;
  background: #E9F0FF;
  border-color: #C9D9FF;
  color: #1744C8;
} 

.ui-callout,
.callout {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #F5F9FD;
  color: #32445C;
}

.card,
.content-panel,
.sim-panel,
.policy-page,
.static-page {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.card:hover,
.content-panel:hover {
  box-shadow: var(--shadow-hover);
}

.content-panel {
  padding: var(--space-5);
}

.panel-surface {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.panel-subtle {
  background: #F3F8FD;
  border: 1px solid #DDE8F4;
  border-radius: var(--radius-lg);
}

.btn {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: #FFFFFF;
  color: #213047;
  font-weight: 600;
  padding: 5px 7px;
}

.btn:hover {
  background: #F4F8FD;
  border-color: #CFDBE8;
}

.btn.primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #FFFFFF;
}

.btn.primary:hover {
  background: var(--brand-secondary);
  border-color: var(--brand-secondary);
}

.btn.success {
  background: #1E9E5A;
  border-color: #1E9E5A;
  color: #FFFFFF;
}

.btn.ghost {
  border-color: #C8D8F4;
  color: #1F50CF;
  background: #F4F8FF;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="file"],
textarea,
select,
.form-input {
  border: 1px solid #D4DFEB;
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: #1F2C3D;
}

input:focus,
textarea:focus,
select:focus,
.form-input:focus {
  border-color: #96B4F8;
  box-shadow: 0 0 0 4px rgba(30, 94, 255, 0.12);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #FFFFFF;
}

thead th {
  position: sticky;
  top: 0;
  background: #F4F8FD;
  font-size: 13px;
  color: #465C75;
  border-bottom: 1px solid var(--border);
}

tbody tr:hover {
  background: #F8FBFF;
}

.ui-stat-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow);
}

.ui-stat-label {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.ui-stat-value {
  margin: 4px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.25rem, 1.7vw, 1.8rem);
  line-height: 1.1;
}

.ui-stat-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.home-hero {
  padding: var(--space-7);
}

.home-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-6);
  align-items: center;
}

.hero-video-placeholder {
  border: 1px solid #D7E4F3;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #F4F9FF, #EEF6FF);
  padding: var(--space-4);
}

.hero-video-ratio {
  aspect-ratio: 16 / 9;
  border: 1px dashed #BFD4EE;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
}

.hero-video-player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

.home-trust-strip {
  padding: var(--space-4);
}

.home-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.home-card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.home-card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.home-steps ol {
  margin: 0 0 var(--space-4);
  padding-left: 1.1rem;
  display: grid;
  gap: var(--space-2);
}

.home-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.workspace-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #FFFFFF, #F2F8FF);
  border: 1px solid var(--border);
}

.workspace-title,
.results-page-title {
  margin: var(--space-2) 0 0;
}

.sim-shell {
  display: grid;
  gap: var(--space-5);
}

.sim-workspace {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-4);
  align-items: start;
}

.workspace-flow-rail {
  position: sticky;
  top: 90px;
  padding: var(--space-4);
}

.workspace-flow-rail h2 {
  margin-top: 0;
  margin-bottom: var(--space-3);
  font-size: 1.1rem;
}

.workspace-flow-rail ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.2rem;
  display: grid;
  gap: 6px;
}

.results-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--space-4);
  max-width: 100%;
}

.results-rail {
  position: sticky;
  top: 10px;
  align-self: start;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-2);
}

.results-rail-title {
  margin: 0 0 var(--space-2);
  font-size: 1rem;
}

.results-rail-link {
  display: block;
  color: #365171;
  padding: 7px 9px;
  border-radius: 10px;
}

.results-rail-link:hover {
  background: #F2F7FD;
}

.results-header {
  /* position: sticky; */
  top: 72px;
  z-index: 30;
  background: rgba(248, 251, 254, 0.95);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.admin-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.admin-sidebar {
  width: auto;
  position: sticky;
  top: 86px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow);
}

.admin-nav {
  gap: 6px;
}

.admin-nav-group-title {
  margin: var(--space-3) 0 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B7F96;
}

.admin-nav-link {
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 9px 10px;
}

.admin-nav-link:hover,
.admin-nav-link.is-active {
  background: #F2F7FD;
  border-color: #D6E3F1;
  color: #1A385F;
}

.admin-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.admin-page-head h1 {
  margin: 8px 0 0;
  font-size: clamp(1.35rem, 1.9vw, 1.8rem);
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.results-empty,
.sim-empty-state,
.loading-state,
.empty-state {
  border: 1px dashed #C6D8EA;
  border-radius: 12px;
  padding: var(--space-4);
  background: #F6FAFF;
  color: #56708F;
}

@media (max-width: 1100px) {
  .home-hero-grid,
  .sim-workspace,
  .results-shell,
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .workspace-flow-rail,
  .results-rail,
  .admin-sidebar,
  .results-header {
    position: relative;
    top: 0;
  }

  .kpi-row,
  .home-card-grid-3,
  .home-card-grid-2,
  .home-faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-main {
    padding-top: var(--space-5);
  }

  .home-hero,
  .workspace-topbar,
  .admin-page-head {
    padding: var(--space-4);
  }

  .footer-topline {
    align-items: flex-start;
    flex-direction: column;
  }
}
.setting-input-fixed { width: 160px; }
.settings-description-cell {
  font-size: 12px;
  max-width: 320px;
}

.log-entry-pre {
  white-space: pre-wrap;
  margin: 0;
}

.acl-page-row {
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: start;
}

.acl-groups-wrap {
  gap: 12px;
}

.acl-group {
  padding: 10px 12px;
}

.acl-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.acl-group-title {
  margin: 0;
  font-size: 15px;
}

.acl-group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.acl-group-pages {
  gap: 8px;
}

.acl-page-check {
  margin-top: 2px;
}

.acl-page-main {
  display: grid;
  gap: 2px;
}

.acl-page-meta {
  margin-left: 0;
}
.wizard-review-code { min-height: 320px; }

/* --- Simulate Page (moved from template) --- */
.sim-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  min-height: 0;
}

.sim-left-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 320px;
  min-height: 0;
}

.sim-right-col {
  flex: 1;
  min-width: 360px;
  min-height: 0;
  padding: 4px 8px;
}

.sim-intro-note {
  margin-top: 0;
  margin-bottom: 8px;
}

.qn-form-hidden {
  display: none;
  margin-top: 10px;
}

.qn-progress { margin-bottom: 6px; }
.qn-question-wrap { margin-bottom: 8px; }
.qn-finish-hidden { display: none; }
.qn-complete-hidden { display: none; }

.session-info {
  margin: 6px 0;
  color: #444;
}

.sim-drop-area {
  border: 2px dashed var(--border);
  padding: 12px;
  border-radius: 6px;
  margin: 8px 0;
}

.sim-drop-text { margin-bottom: 8px; }
.sim-doc-file {
  display: none !important;
}

.file-upload-wrapper {
  margin-top: 10px;
  display: inline-block;
}

.file-upload-label {
  display: inline-block;
  padding: 10px 14px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(227, 234, 242);
  border-radius: 12px;
  color: rgb(33, 48, 71);
  font: 600 14px Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  text-align: center;
  transition: transform 0.05s, background 0.2s, border-color 0.2s;
}

.file-upload-label:hover {
  background-color: rgb(248, 250, 252);
  border-color: rgb(203, 213, 225);
}

.file-upload-label:active {
  transform: scale(0.98);
}

.file-name-display {
  margin-top: 8px;
  font-size: 12px;
  color: #64748b;
  display: block;
}

.sim-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.sim-panel-alt { background: var(--panel-alt); }
.sim-muted-bg { background: linear-gradient(90deg, var(--panel-alt), var(--panel)); }
.sim-input-bg {
  background: var(--panel-alt);
  border: 1px solid var(--border);
}

.sim-qa-area {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 980px;
  max-height: clamp(1100px, 132vh, 1800px);
  overflow: hidden;
}

.sim-chat-container {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  max-height: 100%;
}

.sim-chat-container > * {
  min-width: 0;
}

.sim-chat-header {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: var(--panel-alt);
}

.sim-chat-title {
  font-weight: 700;
  font-size: 16px;
  margin: 0;
}

.sim-chat-subtitle {
  font-size: 11px;
  margin-left: auto;
  color: var(--muted);
  font-weight: 500;
}

.sim-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--panel);
  min-height: 0;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.6;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: auto;
  scroll-padding-bottom: 16px;
  scrollbar-width: thin;
}

body.light-mode .sim-chat-messages {
  background: #FFFFFF;
}

.sim-chat-messages::-webkit-scrollbar {
  width: 10px;
}

.sim-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.sim-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(11, 95, 165, 0.24);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Message styling */
.msg {
  display: flex;
  gap: 10px;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg-assistant {
  align-items: flex-start;
}

.msg-user {
  justify-content: flex-end;
}

.msg-assistant .msg-content {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  max-width: 85%;
}

.msg-user .msg-content {
  background: var(--brand);
  color: white;
  border-radius: 12px;
  padding: 12px 14px;
  max-width: 85%;
}

/* Rich text in messages */
.msg-content h1 { font-size: 1.5em; margin: 12px 0 8px; }
.msg-content h2 { font-size: 1.3em; margin: 12px 0 8px; }
.msg-content h3 { font-size: 1.1em; margin: 10px 0 6px; }
.msg-content h4, .msg-content h5, .msg-content h6 { margin: 8px 0 4px; }
.msg-content p { margin: 8px 0; }
.msg-content ul, .msg-content ol { margin: 8px 0; padding-left: 20px; }
.msg-content li { margin: 4px 0; }
.msg-content strong { font-weight: 600; }
.msg-content em { font-style: italic; }
.msg-content code {
  background: rgba(0,0,0,0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9em;
}
.msg-content pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9em;
  line-height: 1.4;
}
.msg-content blockquote {
  border-left: 3px solid var(--brand);
  padding-left: 12px;
  margin: 8px 0;
  color: var(--muted);
  font-style: italic;
}
.msg-content a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid var(--brand);
  cursor: pointer;
}
.msg-content a:hover {
  opacity: 0.8;
}

/* KaTeX math rendering */
.katex-display {
  margin: 12px 0;
}
.katex {
  font-size: 1.1em;
}

/* Model options panel */
.sim-model-options-panel {
  padding: 16px;
  border-top: 2px solid var(--border);
  background: linear-gradient(180deg, var(--panel-alt) 0%, var(--panel) 100%);
  flex-shrink: 0;
}

.sim-model-options-panel.panel-hidden {
  display: none;
}

.model-options-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}

.model-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.model-option-card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.model-option-card:hover {
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(11, 95, 165, 0.15);
  transform: translateY(-2px);
}

.model-option-card.selected {
  border-color: var(--brand);
  background: linear-gradient(180deg, rgba(11, 95, 165, 0.1) 0%, rgba(11, 95, 165, 0.05) 100%);
}

.model-option-card.is-ready-now { border-color: rgba(47, 143, 91, 0.24); }
.model-option-card.is-ready-clarify { border-color: rgba(180, 122, 22, 0.28); }
.model-option-card.is-poor-fit {
  cursor: default;
  border-color: rgba(180, 40, 40, 0.22);
  background: linear-gradient(180deg, rgba(180, 40, 40, 0.08) 0%, rgba(180, 40, 40, 0.03) 100%);
}

.model-option-card.is-poor-fit:hover {
  border-color: rgba(180, 40, 40, 0.28);
  box-shadow: none;
  transform: none;
}

.model-card-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.model-card-desc {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}

.model-card-score {
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.model-card-score-badge {
  background: var(--brand);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.model-card-detail {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  font-size: 12px;
}

.model-card-detail span {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
}

.model-card-detail strong {
  color: var(--text);
  line-height: 1.4;
}

.model-card-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.model-card-status.is-ready-now {
  border-color: rgba(47, 143, 91, 0.3);
  color: #2f8f5b;
  background: rgba(47, 143, 91, 0.08);
}

.model-card-status.is-ready-clarify {
  border-color: rgba(180, 122, 22, 0.32);
  color: #9a6100;
  background: rgba(180, 122, 22, 0.1);
}

.model-card-status.is-poor-fit {
  border-color: rgba(180, 40, 40, 0.28);
  color: #8c1d1d;
  background: rgba(180, 40, 40, 0.08);
}

.model-card-warning,
.model-card-reason {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.model-card-button {
  align-self: flex-end;
  min-width: 100px;
}

.sim-artifact-card,
.sim-conversation-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  margin-bottom: 14px;
}

.sim-artifact-header,
.sim-conversation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.sim-artifact-card h3,
.sim-conversation-panel h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.sim-artifact-meta {
  color: var(--muted);
  font-size: 12px;
}

.sim-option-summary {
  display: grid;
  gap: 10px;
  font-size: 13px;
  line-height: 1.55;
}

.sim-conversation-summary {
  margin-top: 12px;
}

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

.sim-conversation-thread {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.sim-conversation-msg {
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}

.sim-conversation-msg strong {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sim-conversation-msg p {
  margin: 0;
  line-height: 1.5;
}

.sim-conversation-msg-user {
  background: rgba(11, 95, 165, 0.08);
}

.sim-conversation-msg-assistant {
  background: rgba(255,255,255,0.04);
}

.sim-chat-form {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  align-items: flex-end;
}

.sim-chat-input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
  min-height: 44px;
  resize: vertical;
}

.sim-answer-submit { min-width: 120px; }
.sim-run-btn {min-width: 160px;background: #6effa3;}

.sim-doc-text {
  width: 100%;
  height: clamp(320px, 72vh, 960px);
  max-height: 72vh;
  overflow-y: auto;
  white-space: pre-wrap;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
}

.sim-confirm-modal {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
}

body.sim-preview-modal-open {
  overflow: hidden;
}

.sim-preview-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sim-preview-modal.active {
  display: flex;
}

.sim-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 27, 0.58);
}

.sim-preview-dialog {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(8, 16, 27, 0.28);
}

.sim-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sim-preview-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sim-preview-heading h2 {
  margin: 0;
  font-size: 20px;
}

.sim-preview-close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}

.sim-preview-body {
  min-height: 0;
  overflow: hidden;
}

.sim-confirm-card {
  background: #fff;
  padding: 12px;
  border-radius: 6px;
  max-width: 480px;
  margin: 80px auto;
}

.sim-confirm-details {
  margin-top: 8px;
  max-height: 240px;
  overflow: auto;
  font-family: monospace;
  white-space: pre-wrap;
}

.sim-confirm-conflicts {
  margin-top: 8px;
  max-height: 240px;
  overflow: auto;
}

.sim-confirm-actions {
  margin-top: 8px;
  text-align: right;
}

body:not(.light-mode) #drop-area {
  background: var(--panel);
  border-color: var(--border);
}

body:not(.light-mode) #qa-area {
  background: var(--panel);
  border-color: var(--border);
}

body:not(.light-mode) #qa-area .chat-header {
  background: var(--panel-alt);
  border-color: var(--border);
}
.sim-workspace #chat-messages { background: var(--panel); }

.light-mode .sim-workspace #chat-messages { background: #FFFFFF; }

#chat-messages .chat-msg {
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 8px;
  line-height: 1.4;
  word-wrap: break-word;
}

#chat-messages .chat-msg.user {
  background: rgba(11, 95, 165, 0.12);
  border-left: 3px solid #0B5FA5;
  color: var(--text);
  margin-right: 20px;
}

#chat-messages .chat-msg.assistant {
  background: rgba(11, 122, 117, 0.08);
  border-left: 3px solid #0B7A75;
  color: var(--text);
  margin-left: 20px;
}

.light-mode #chat-messages .chat-msg.user {
  background: rgba(16, 132, 221, 0.1);
  border-left-color: #1084DD;
}

.light-mode #chat-messages .chat-msg.assistant {
  background: rgba(27, 152, 142, 0.08);
  border-left-color: #1B988E;
}

#chat-messages .chat-msg strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 12px;
  opacity: 0.8;
}

#chat-input {
  background: var(--panel-alt);
  color: var(--text);
  border: 1px solid var(--border);
  overflow: auto;
  min-height: 90px;
}

body:not(.light-mode) #progress-bar { background: var(--brand); }
button[disabled] { opacity: .55; cursor: not-allowed; }

.sim-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: calc(100vh - 180px);
}

.sim-intake-screen {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.sim-intake-copy h1 {
  margin: 6px 0 10px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
}

.sim-kicker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(11, 95, 165, 0.12);
  color: var(--text);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
}

.sim-intake-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sim-intake-card {
  padding: 18px 20px;
}

.sim-intake-files,
.sim-docs-column,
.sim-assistant-column {
  padding: 20px;
}

.sim-intake-card .muted.small {
  margin: 0 0 12px;
  line-height: 1.45;
}

.sim-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sim-section-head h2,
.sim-section-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  flex: 1;
}

.sim-role-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(11, 95, 165, 0.08);
  color: var(--text);
}

.sim-role-pill.primary {
  background: rgba(11, 95, 165, 0.18);
}

.sim-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
}

.sim-intake-upload-summary {
  margin: 6px 0 12px;
  line-height: 1.45;
}

.sim-intake-files .sim-section-head {
  align-items: center;
  margin-bottom: 8px;
}

#intake-status-badge {
  flex: 0 0 auto;
}

.sim-intake-files .sim-file-list {
  margin-top: 8px;
}

.sim-intake-files .sim-empty-state {
  min-height: 76px;
  display: flex;
  align-items: center;
}

.sim-intake-banner {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(180, 40, 40, 0.22);
  background: rgba(180, 40, 40, 0.08);
  color: #8c1d1d;
  font-size: 13px;
  line-height: 1.45;
}

.sim-intake-banner.warn {
  border-color: rgba(184, 124, 20, 0.25);
  background: rgba(184, 124, 20, 0.08);
  color: #7b520d;
}

.sim-intake-actions {
  display: flex;
  justify-content: flex-end;
}

.sim-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(440px, 1.25fr);
  gap: 20px;
  align-items: stretch;
}

.sim-docs-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 760px;
}

.sim-assistant-column {
  min-height: 760px;
}

.sim-docs-header,
.sim-docs-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sim-docs-meta {
  flex-direction: column;
  align-items: flex-end;
  font-size: 12px;
  color: var(--muted);
}

.sim-docs-list-wrap,
.sim-preview-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sim-file-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sim-file-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  text-align: left;
}

.sim-file-trigger {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.sim-file-row.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px rgba(11, 95, 165, 0.2);
}

.sim-file-row.pending {
  border-style: dashed;
}

.sim-file-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sim-file-main strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-file-meta {
  font-size: 12px;
  color: var(--muted);
}

.sim-file-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sim-file-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sim-file-state {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}

.sim-file-remove {
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.sim-file-remove:hover {
  border-color: rgba(180, 40, 40, 0.35);
  background: var(--panel-alt);
  color: var(--brand-error);
}

.sim-doc-preview-text,
.sim-doc-preview-frame,
.sim-doc-preview-empty {
  min-height: 420px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
}

.sim-doc-preview-text {
  margin: 0;
  padding: 16px;
  overflow: auto;
  white-space: pre-wrap;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  line-height: 1.55;
}

.sim-doc-preview-frame {
  width: 100%;
  height: 620px;
}

.sim-doc-preview-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.sim-preview-modal .sim-doc-preview-text,
.sim-preview-modal .sim-doc-preview-frame,
.sim-preview-modal .sim-doc-preview-empty {
  width: 100%;
  min-height: min(72vh, 680px);
  overflow: auto;
  height: 200px;
}
    
.sim-preview-modal .sim-doc-preview-frame {
  height: min(72vh, 680px);
}

.sim-qa-area {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 980px;
  max-height: clamp(1100px, 132vh, 1800px);
  overflow: hidden;
}

.sim-workflow-meta {
  padding: 12px 0 14px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sim-status-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sim-status-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
}

.sim-status-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sim-status-progress-head strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.sim-status-progress-percent {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

.sim-status-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 10px;
  background: rgba(11, 95, 165, 0.08);
  border: 1px solid rgba(11, 95, 165, 0.16);
  overflow: hidden;
}

.sim-status-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-accent) 100%);
  transition: width .22s ease, background .22s ease;
}

.sim-status-progress-track.is-complete .sim-status-progress-fill {
  background: linear-gradient(90deg, #2f8f5b 0%, #58b57e 100%);
}

.sim-status-progress-track.is-failed {
  border-color: rgba(180, 40, 40, 0.28);
  background: rgba(180, 40, 40, 0.08);
}

.sim-status-progress-track.is-failed .sim-status-progress-fill {
  background: linear-gradient(90deg, #b42828 0%, #d75b5b 100%);
}

.sim-chat-messages > .sim-model-options-panel,
.sim-chat-messages > .phase2-panel {
  width: 100%;
}

.sim-chat-form {
  flex-wrap: wrap;
}

.sim-chat-input {
  min-width: 220px;
}

.sim-empty-state {
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--panel-alt);
  color: var(--muted);
}

@media (max-width: 1080px) {
  .sim-intake-grid,
  .sim-workspace {
    grid-template-columns: 1fr;
  }

  .sim-docs-column,
  .sim-assistant-column,
  .sim-qa-area {
    min-height: 0;
  }

  .sim-doc-preview-frame {
    height: 520px;
  }
}

@media (max-width: 720px) {
  .sim-intake-screen {
    padding: 18px;
  }

  .sim-intake-card,
  .sim-intake-files,
  .sim-docs-column,
  .sim-assistant-column {
    padding: 16px;
  }

  .sim-docs-header,
  .sim-section-head,
  .sim-file-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .sim-file-trigger,
  .sim-file-actions {
    width: 100%;
  }

  .sim-chat-form {
    flex-direction: column;
  }

  .sim-run-btn,
  .sim-answer-submit {
    width: 100%;
  }
}

#toast-container {
  position: fixed;
  top: 14px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 4000;
}

.toast {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeInToast .35s ease;
}

@keyframes fadeInToast {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.toast.success { border-color: #15803d; }
.toast.info { border-color: #2563eb; }
.toast.complete { border-color: #a16207; }

.toast button.toast-close {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

#toast-log-panel {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 260px;
  max-height: 40vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 8px;
  box-shadow: 0 -4px 10px -4px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  overflow: hidden;
  z-index: 3900;
}

#toast-log-panel header {
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#toast-log {
  overflow: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* === PHASE 2: Model Draft & Refinement === */

.phase2-panel {
  margin: 20px 0;
  padding: 20px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}

.phase2-actions {
  position: static !important;
  flex-shrink: 0 !important;
}

.phase2-panel.hidden {
  display: none !important;
}

.phase2-section {
  display: none;
}

.phase2-section:not(.hidden) {
  display: block;
}

.phase2-section.hidden {
  display: none !important;
}

.phase2-section h3 {
  margin-top: 0;
  color: var(--brand-accent);
  font-size: 18px;
}

.phase2-section h5 {
  margin: 12px 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.phase2-textarea {
  width: 100%;
  min-height: 96px;
  padding: 8px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  resize: vertical;
}

.phase2-question {
  margin-top: 16px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 6px;
}

.phase2-question h4 {
  margin: 0 0 10px 0;
}

.draft-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  /* overflow-x: auto; */
  display: flex !important;
  flex-direction: column !important;
  max-height: 90vh !important; /* Limits card height to 90% of the screen */
  overflow: hidden !important; /* Prevent double scrollbars */
}

.draft-card .model-header h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
}

.draft-card .description {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.phase2-rationale {
  margin: 10px 0 0 0;
  color: var(--text);
  line-height: 1.5;
}

.parameters-section {
  flex: 1 1 auto !important;
  height: auto !important; /* Remove the fixed 400px height */
  min-height: 0 !important;
  overflow-y: auto !important;
}

.equations-section,
.parameters-section {
  margin-top: 16px;
}

.equations {
  background: var(--code-bg);
  padding: 12px;
  border-radius: 4px;
  /* border-left: 3px solid var(--brand-accent); */
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
}

.equation-block + .equation-block {
  margin-top: 10px;
}

.param-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}

.param-table thead {
  background: rgba(255,255,255,0.04);
}

.param-table th {
  padding: 8px 6px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}

.param-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
}

.param-table code {
  background: var(--code-bg);
  padding: 2px 4px;
  border-radius: 2px;
  font-size: 11px;
}

.refinement-info {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
  font-size: 12px;
  color: var(--muted);
}

.phase2-parameter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.param-entry-card {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
}

.param-entry-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.param-entry-desc {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 6px;
}
label.small.muted {
    display: none;
}
.param-entry-meta {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}

.phase2-param-input {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--code-bg);
  color: var(--text);
}

.phase2-param-errors {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 6px;
  background: rgba(220, 38, 38, 0.08);
  color: #fca5a5;
  font-size: 12px;
}

.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-form fieldset {
  border: none;
  padding: 12px;
  background: var(--panel);
  border-radius: 6px;
  border-left: 3px solid var(--brand-secondary);
}

.feedback-form legend {
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}

/* === SIMULATE WORKSPACE REDESIGN === */

.sim-shell {
  display: grid;
  gap: 20px;
  color: #142033;
}

.sim-shell .sim-panel,
.sim-shell .sim-support-card,
.sim-shell .sim-main-intro,
.sim-shell .sim-right-placeholder,
.sim-shell .sim-conversation-panel,
.sim-shell .phase2-panel,
.sim-shell .draft-card,
.sim-shell .summary-card,
.sim-shell .param-entry-card {
  background: #FFFFFF;
  border: 1px solid #D9E3EE;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(19, 39, 63, 0.06);
  color: #142033;
}

.sim-shell .muted,
.sim-shell .small,
.sim-shell .sim-chat-subtitle,
.sim-shell .sim-package-note,
.sim-shell .sim-progress-metric-label,
.sim-shell .sim-intro-label,
.sim-shell .param-entry-meta,
.sim-shell .param-entry-desc,
.sim-shell .phase2-rationale,
.sim-shell .sim-file-meta {
  color: #5E6E83;
}

.sim-shell .btn {
  border-radius: 12px;
  /* background: #6effa3; */
}

.sim-workspace-shell {
  display: grid;
  gap: 18px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}

.sim-shell {
  padding-inline: clamp(16px, 2.6vw, 32px);
}

.sim-breadcrumb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #667A91;
}

.sim-breadcrumb-row a {
  color: #496580;
  text-decoration: none;
}

.sim-breadcrumb-row a:hover {
  color: #284866;
}

.sim-progress-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 2px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sim-progress-strip-track {
  display: grid;
  gap: 6px;
}

.sim-progress-strip-labels {
  display: none;
}

.sim-progress-strip-kicker,
.sim-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #557189;
}

.sim-progress-stage-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.sim-progress-stage-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #DCE5EE;
  background: #FFFFFF;
  color: #5E6E83;
  font-size: 11px;
  font-weight: 600;
}

.sim-progress-stage-chip.is-active {
  border-color: #0B5FA5;
  background: #EAF3FC;
  color: #0B5FA5;
}

.sim-progress-stage-chip.is-complete {
  border-color: #B9D7C7;
  background: #EDF8F1;
  color: #2E6C49;
}

.sim-progress-strip-meta {
  display: none;
}

.sim-progress-metric {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sim-progress-metric-stage {
  padding: 0;
  border: 0;
  background: transparent;
}

.sim-progress-metric-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sim-progress-metric strong {
  font-size: 13px;
  line-height: 1.25;
  color: #142033;
}

.sim-status-progress-track {
  height: 8px;
  border-radius: 10px;
  background: #E9F0F7;
  overflow: hidden;
  width: 100%;
}

.sim-status-progress-detail {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: #5E6E83;
}

.sim-status-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #0B5FA5 0%, #6AA2D3 100%);
}

.sim-status-progress-track.is-complete .sim-status-progress-fill {
  background: linear-gradient(90deg, #2D7C58 0%, #65B58B 100%);
}

.sim-status-progress-track.is-failed .sim-status-progress-fill {
  background: linear-gradient(90deg, #B24747 0%, #D98787 100%);
}

.sim-workspace-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.sim-workspace-grid.sim-workspace-grid-parameterized {
  grid-template-columns: 200px minmax(0, 1fr) 292px;
}

.sim-support-panel,
.sim-main-panel,
.sim-side-panel {
  min-width: 200px;
}

.sim-support-panel {
  position: sticky;
  top: 84px;
  display: grid;
  gap: 12px;
  opacity: 0.94;
}

.sim-support-card {
  padding: 10px;
  box-shadow: 0 4px 12px rgba(19, 39, 63, 0.04);
}

.sim-support-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.sim-support-head h2,
.sim-main-intro h2,
.sim-right-placeholder h3,
.sim-recommendation-card h3,
.sim-alternatives-card h3,
.sim-conversation-panel h3 {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
}

.sim-workflow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

label.sim-report-model {
  margin: 10px;
  width: 200px;
  height: 25px;
}

.sim-workflow-list li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 6px 8px 6px 20px;
  border-radius: 10px;
  background: #FAFCFE;
  border: 1px solid transparent;
  /* font-size: 16px; */
}

.sim-workflow-list li small {
  display: none;
}

.sim-workflow-list li::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 10px;
  background: #B8C7D7;
}

.sim-workflow-list li span {
  font-weight: 600;
  font-size: 16px;
  color: #42586f;
}

.sim-workflow-list li small {
  color: #6A7A8D;
  font-size: 11px;
}

.sim-workflow-list li.is-current {
  border-color: #C7DAEC;
  background: #EEF5FC;
}

.sim-workflow-list li.is-current::before {
  background: #0B5FA5;
}

.sim-workflow-list li.is-complete {
  background: #F0F8F3;
}

.sim-workflow-list li.is-complete::before {
  background: #2D7C58;
}

.sim-docs-meta {
  display: grid;
  gap: 2px;
  font-size: 11px;
  text-align: right;
  color: #5E6E83;
}

.sim-package-file-list {
  display: grid;
  gap: 6px;
}

.sim-package-row {
  padding: 0;
  background: #F8FBFE;
  border: 1px solid #DCE6F0;
  border-radius: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.sim-package-row .sim-file-trigger {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
  text-align: left;
}

.sim-package-row .sim-file-main strong {
  display: block;
  color: #18314D;
  font-size: 12px;
  line-height: 1.3;
  word-break: break-word;
}

.sim-package-row.selected {
  border-color: #AFC9E2;
  background: #EEF5FC;
}

.sim-file-remove-inline {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #6A7F94;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sim-file-remove-inline:hover {
  background: #EAF1F8;
  color: #294762;
}

.sim-role-pill,
.sim-file-state,
.sim-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 7px;
  border-radius: 10px;
  border: 1px solid #D5E0EA;
  background: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #557189;
}

.sim-package-actions {
  margin-top: 10px;
}

.sim-package-note {
  margin: 8px 0 0;
  font-size: 11px;
}

.sim-main-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sim-main-intro {
  padding: 8px 12px;
  box-shadow: none;
}

.sim-main-intro-title {
  display: none;
}

.sim-main-intro-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

.sim-intro-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #63788f;
}

.sim-intro-copy {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #334a61;
}

.sim-main-intro-grid .sim-intro-copy:first-child {
  font-weight: 600;
  color: #17324D;
}

#sim-current-interpretation {
  display: none;
}

.sim-intro-next {
  display: none;
}

.sim-chat-container.hidden {
  display: none !important;
}

.sim-chat-container {
  padding: 0;
}

.sim-activity-feed {
  display: grid;
  gap: 8px;
  padding: 0;
  background: transparent;
}

.sim-activity-feed .msg,
.sim-activity-feed .sim-artifact-card {
  margin: 0;
}

.sim-activity-feed .msg-content,
.sim-activity-feed .sim-artifact-card {
  max-width: none !important;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid #D9E3EE;
  background: #FBFDFF;
  font-size: 12px;
  line-height: 1.35;
}

.sim-activity-feed .msg-user .msg-content {
  background: #EAF3FC;
  color: #163252;
}

.sim-model-options-panel {
  display: grid;
  gap: 12px;
}

.sim-recommendation-card,
.sim-alternatives-card,
.sim-conversation-panel,
.sim-next-action-card {
  padding: 12px 14px;
}

.sim-conversation-panel,
.sim-next-action-card {
  box-shadow: 0 8px 20px rgba(19, 39, 63, 0.05);
}

.sim-shell .model-card-title {
  font-size: 14px;
  line-height: 1.25;
}

.sim-recommendation-layout {
  display: block;
}

.sim-recommendation-card .sim-section-head,
.sim-alternatives-card .sim-section-head {
  margin-bottom: 6px;
  gap: 8px;
}

.sim-recommendation-card .sim-section-head h3,
.sim-alternatives-card .sim-section-head h3 {
  font-size: 13px;
}

.sim-recommendation-compact {
  display: grid;
  gap: 4px;
}

.sim-recommendation-title-row,
.sim-model-option-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sim-recommendation-rationale,
.sim-model-option-row p {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: #4F647B;
}

.sim-recommendation-inline-meta,
.sim-model-option-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
  color: #577089;
}

.sim-recommendation-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.model-options-grid {
  display: grid;
  gap: 6px;
}

.sim-model-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 12px;
  background: #F8FBFE;
  border: 1px solid #DCE6F0;
}

.sim-model-option-row.is-ready-now {
  background: #F1F9F4;
}

.sim-model-option-row.is-ready-clarify {
  background: #FBF7EF;
}

.sim-model-option-row.is-poor-fit {
  background: #FCF5F5;
}

.sim-model-option-main {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.sim-model-option-main strong {
  font-size: 12px;
  color: #17324D;
}

.sim-model-option-actions {
  display: flex;
  align-items: center;
}

.model-card-status {
  flex-shrink: 0;
  align-self: flex-start;
  border-radius: 10px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1px solid #D5E0EA;
}

.model-card-status.is-ready-now {
  color: #2E6C49;
  background: #EDF8F1;
  border-color: #B9D7C7;
}

.model-card-status.is-ready-clarify {
  color: #8A5A00;
  background: #FBF4E3;
  border-color: #E3CE9F;
}

.model-card-status.is-poor-fit {
  color: #8E2E2E;
  background: #FAECEC;
  border-color: #E7B8B8;
}

.sim-right-placeholder.hidden,
.sim-phase2-dock.hidden,
.sim-model-options-panel.panel-hidden,
.phase2-panel.hidden,
.hidden {
  display: none !important;
}

.sim-conversation-summary {
  display: none;
}

.sim-conversation-thread {
  display: grid;
  gap: 7px;
  margin-top: 6px;
  max-height: none;
  min-height: 0;
  height: 100%;
  overflow: auto;
  padding: 4px 4px 0 0;
}

.sim-conversation-panel {
  background: #F5FAFF;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 12px 14px 8px;
  min-height: 340px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 4px;
}

.sim-conversation-header {
  margin-bottom: 0;
}

.sim-conversation-header .sim-kicker {
  font-size: 10px;
}

.sim-conversation-header h3 {
  font-size: 13px;
}

.sim-conversation-header .muted.small {
  font-size: 10px;
}

.sim-conversation-msg {
  max-width: 78%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #DCE6F0;
  background: #FBFDFF;
}

.sim-conversation-msg strong {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #61748a;
}

.sim-conversation-msg p {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.38;
}

.sim-conversation-msg-user {
  background: #EAF3FC;
  margin-left: auto;
  border-color: #BFD5EA;
}

.sim-conversation-msg-assistant {
  margin-right: auto;
}

.sim-next-action-card {
  display: grid;
  gap: 0;
  margin-top: -2px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 0 14px 10px;
  background: #F5FAFF;
  border-top: 0;
  box-shadow: 0 8px 20px rgba(19, 39, 63, 0.05);
}

.sim-next-action-head {
  margin-bottom: 0;
}

.sim-chat-form {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}

.sim-chat-input {
  border: 1px solid #D2DDE8;
  border-radius: 10px;
  background: #FFFFFF;
  color: #142033;
  min-height: 38px;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 10px;
}

.sim-chat-form .btn {
  align-self: stretch;
  min-width: 78px;
}

.sim-conversation-panel {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.sim-side-panel {
  position: sticky;
  top: 84px;
  opacity: 0.92;
}

.sim-right-placeholder,
.sim-phase2-dock {
  padding: 16px;
}

.sim-phase2-dock {
  display: grid;
  gap: 12px;
  align-content: start;
  box-shadow: 0 6px 16px rgba(19, 39, 63, 0.04);
  padding: 14px;
}

.sim-phase2-mount {
  min-width: 0;
  overflow: hidden;
}

.sim-phase2-right-panel {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sim-phase2-right-panel .draft-card {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.phase2-content {
  display: grid;
  gap: 12px;
}

.phase2-section h3 {
  color: #17324D;
}

.draft-card,
.summary-card,
.phase2-section {
  overflow: visible;
}

.draft-card,
.summary-card,
.phase2-section:not(.hidden) {
  padding: 16px;
}

#phase2-approved-wrap .summary-card {
  max-height: 70vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.sim-phase2-right-panel .draft-card > h3,
.sim-phase2-right-panel .summary-card > h3 {
  display: none;
}

.sim-phase2-right-panel .draft-card > .muted,
.sim-phase2-right-panel .phase2-rationale {
  display: none;
}

.sim-phase2-right-panel .phase2-rationale {
  max-height: 96px;
  overflow: auto;
  padding-right: 4px;
}
.equations-section {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
}

.sim-phase2-right-panel .refinement-info,
.sim-phase2-right-panel .equations-section,
.sim-phase2-right-panel .summary-card > p,
.sim-phase2-right-panel .summary-status {
  display: none;
}

.sim-phase2-right-panel .param-entry-desc,
.sim-phase2-right-panel .param-entry-meta {
  display: none;
}

.sim-phase2-right-panel .param-table th:nth-child(2),
.sim-phase2-right-panel .param-table th:nth-child(3),
.sim-phase2-right-panel .param-table th:nth-child(5),
.sim-phase2-right-panel .param-table th:nth-child(6),
.sim-phase2-right-panel .param-table td:nth-child(2),
.sim-phase2-right-panel .param-table td:nth-child(3),
.sim-phase2-right-panel .param-table td:nth-child(5),
.sim-phase2-right-panel .param-table td:nth-child(6) {
  display: none;
}

.sim-phase2-right-panel .phase2-section h5 {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #63788f;
}

.sim-phase2-right-panel .parameters-section,
.sim-phase2-right-panel .phase2-parameter-grid,
.sim-phase2-right-panel .summary-card ul {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #E6EDF5;
}

.sim-phase2-right-panel .parameters-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  overflow-y: auto;
}
.sim-phase2-right-panel .phase2-parameter-grid {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sim-equations-details {
  border-radius: 12px;
  background: #F9FBFD;
  overflow: visible;
}

.sim-equations-details summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 10px;
  font-weight: 700;
  color: #17324D;
  font-size: 12px;
}

.sim-equations-details summary::-webkit-details-marker {
  display: none;
}

.equations {
  margin: 0 10px 10px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 10px;
  overflow: visible;
  font-size: 10px;
}

.phase2-parameter-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.param-entry-card {
  margin: 3px;
  padding: 5px;
  display: grid;
  gap: 4px;
}
.param-entry-card-draft {
  background: #FFFFFF;
  border: 1px solid #DCE6F0;
  border-radius: 12px;
}

.param-entry-label {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 12px;
}

.param-entry-desc,
.param-entry-meta {
  overflow: hidden;
  text-overflow: ellipsis;
}

.param-entry-desc {
  white-space: nowrap;
  font-size: 11px;
}

.param-entry-meta {
  white-space: nowrap;
  font-size: 10px;
}

.phase2-param-input {
  border-radius: 10px;
  border: 1px solid #D2DDE8;
  background: #FBFDFF;
  color: #142033;
  font-size: 12px;
  padding: 7px 9px;
  box-shadow: inset 0 1px 2px rgba(20, 32, 51, 0.04);
}

.phase2-panel .button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sim-phase2-right-panel .button-group {
  justify-content: stretch;
  margin-top: 10px;
}

.sim-phase2-right-panel .button-group .btn {
  flex: 1 1 120px;
}

.sim-phase2-right-panel #phase2-satisfied-yes {
  background: #2f8f5b;
  border-color: #2f8f5b;
}

.phase2-panel ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.sim-empty-state {
  border-radius: 14px;
  background: #F7FAFD;
  border: 1px dashed #C8D7E6;
  color: #5B738C;
}

@media (max-width: 1280px) {
  .sim-workspace-grid.sim-workspace-grid-parameterized {
    grid-template-columns: 196px minmax(0, 1fr) 280px;
  }
}

@media (max-width: 1100px) {
  .sim-progress-strip,
  .sim-workspace-grid,
  .sim-main-intro-grid,
  .sim-progress-strip-meta,
  .sim-recommendation-layout {
    grid-template-columns: 1fr;
  }

  .sim-main-intro-grid,
  .sim-recommendation-inline-meta,
  .sim-model-option-meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sim-chat-form {
    grid-template-columns: 1fr;
  }

  .sim-support-panel,
  .sim-side-panel {
    position: static;
  }
}

@media (max-width: 760px) {
  .sim-progress-strip,
  .sim-support-card,
  .sim-main-intro,
  .sim-recommendation-card,
  .sim-alternatives-card,
  .sim-conversation-panel,
  .sim-right-placeholder,
  .sim-phase2-dock,
  .sim-chat-form {
    padding: 14px;
  }

  .sim-next-action-card {
    padding: 0 14px 14px;
  }

  .sim-progress-strip-labels,
  .sim-support-head,
  .sim-main-intro-head,
  .sim-recommendation-title-row,
  .sim-model-option-row,
  .sim-model-option-head {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
  }

  .sim-package-row .sim-file-trigger,
  .sim-recommendation-actions,
  .phase2-panel .button-group {
    flex-direction: column;
    align-items: stretch;
  }
}

.feedback-form textarea {
  width: 100%;
  min-height: 80px;
  padding: 8px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  resize: vertical;
  margin-bottom: 8px;
}

.feedback-form textarea:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 2px rgba(20,184,166,0.1);
}

.param-adjustments-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.param-adjustment {
  background: var(--code-bg);
  padding: 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.param-adj-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.param-adj-row select,
.param-adj-row input {
  padding: 6px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
}

.param-adj-row select:focus,
.param-adj-row input:focus {
  outline: none;
  border-color: var(--brand-accent);
}

.param-adj-row textarea {
  min-height: 60px;
  margin: 0;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}

.radio-group input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.approval-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-success);
  border-radius: 6px;
  padding: 16px;
}

.approval-status {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.approval-status p {
  margin: 0;
  font-size: 13px;
}

.approval-status textarea {
  min-height: 100px;
  width: 100%;
  padding: 8px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  resize: vertical;
}

.summary-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px;
  text-align: left;
}

.summary-status {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 6px;
}

.summary-status.approved {
  background: rgba(34,197,94,0.1);
  color: var(--brand-success);
}

.summary-status.error {
  background: rgba(180, 40, 40, 0.1);
  color: #8c1d1d;
}

.summary-card h5 {
  margin-top: 0;
}

/* === SIMULATE HARD RESET WORKSPACE === */

body.sim-page-body .sim-progress-strip {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
body.sim-page-body .sim-progress-strip-labels { display: grid; gap: 6px; }
body.sim-page-body .sim-progress-strip-meta { display: none; }
body.sim-page-body .sim-status-progress-track { width: 100%; }

/* --- Status line --- */
body.sim-page-body .sim-status-line {
  margin: 0;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: #334a61;
  line-height: 1.4;
}

/* --- Layout: 2-col default, 3-col with .sim-has-selection --- */
body.sim-page-body .sim-workspace-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
body.sim-page-body .sim-workspace-grid.sim-has-selection {
  grid-template-columns: 200px minmax(0, 1fr) 280px;
}

/* --- Center: single scroll container --- */
body.sim-page-body .sim-center-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 150px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #b8c9db transparent;
}

body.sim-page-body .sim-center-scroll::-webkit-scrollbar {
  width: 10px;
}

body.sim-page-body .sim-center-scroll::-webkit-scrollbar-track {
  background: transparent;
}

body.sim-page-body .sim-center-scroll::-webkit-scrollbar-thumb {
  background: #b8c9db;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* Chat bubbles + conversation messages inside center scroll */
body.sim-page-body .sim-activity-feed {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  padding: 0;
}
body.sim-page-body .sim-chat-container {
  flex: 0 1 auto;
  padding: 0;
  min-height: 0;
  overflow: visible;
}
body.sim-page-body .sim-chat-container.hidden { display: none !important; }

body.sim-page-body .sim-chat-messages {
  flex: 0 0 auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
}

body.sim-page-body .sim-activity-feed .msg-content,
body.sim-page-body .sim-activity-feed .sim-artifact-card {
  font-size: 14px;
  line-height: 1.45;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid #D9E3EE;
  background: #FBFDFF;
  width: 100%;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}
body.sim-page-body .sim-activity-feed .msg-user .msg-content {
  background: #EAF3FC;
  color: #163252;
}

body.sim-page-body .sim-chat-history-card {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #D9E3EE;
  border-radius: 14px;
  background: #FBFDFF;
  box-shadow: 0 6px 18px rgba(19, 39, 63, 0.05);
}

body.sim-page-body .sim-chat-history-head {
  display: grid;
  gap: 4px;
}

body.sim-page-body .sim-chat-history-head h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  color: #17324D;
}

body.sim-page-body .sim-chat-history-head .muted.small {
  margin: 0;
  font-size: 13px;
}

body.sim-page-body .sim-chat-model-options-card {
  overflow: visible;
}

body.sim-page-body .sim-chat-model-options-stack,
body.sim-page-body .sim-chat-model-options-list {
  display: grid;
  gap: 10px;
}

body.sim-page-body .sim-chat-model-options-group {
  display: grid;
  gap: 8px;
}

body.sim-page-body .sim-chat-model-options-group-head,
body.sim-page-body .sim-chat-model-option-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5A738B;
}

body.sim-page-body .sim-chat-model-option-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #DCE6F0;
  background: #F8FBFE;
  overflow: visible;
}

body.sim-page-body .sim-chat-model-option-card.is-recommended {
  background: linear-gradient(180deg, #F7FBFF 0%, #EEF5FC 100%);
}

body.sim-page-body .sim-chat-model-option-card.is-ready-now {
  background: #F1F9F4;
}

body.sim-page-body .sim-chat-model-option-card.is-ready-clarify {
  background: #FBF7EF;
}

body.sim-page-body .sim-chat-model-option-card.is-poor-fit {
  background: #FCF5F5;
}

body.sim-page-body .sim-chat-model-option-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

body.sim-page-body .sim-chat-model-option-title-block {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body.sim-page-body .sim-chat-model-option-title-block .model-card-title {
  margin: 0;
}

body.sim-page-body .sim-chat-model-option-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
  color: #577089;
}

body.sim-page-body .sim-chat-model-option-reason {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4F647B;
}

body.sim-page-body .sim-option-summary {
  font-size: 15px;
  line-height: 1.5;
}

body.sim-page-body .sim-chat-model-option-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body.sim-page-body .sim-chat-model-options-empty {
  margin: 0;
}

body.sim-page-body .sim-model-options-panel {
  display: none !important;
}

/* Conversation messages rendered into activity feed */
body.sim-page-body .sim-conversation-msg {
  max-width: 80%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid #DCE6F0;
  background: #FBFDFF;
  font-size: 14px;
  line-height: 1.45;
}
body.sim-page-body .sim-conversation-msg strong {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #61748a;
}
body.sim-page-body .sim-conversation-msg p {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
}
body.sim-page-body .sim-conversation-msg-user {
  background: #EAF3FC;
  margin-left: auto;
  border-color: #BFD5EA;
}
body.sim-page-body .sim-conversation-msg-assistant {
  margin-right: auto;
}

/* --- Attached composer (outside scroll, flush under it) --- */
body.sim-page-body .sim-chat-form {
  padding: 10px;
  margin-top: 0;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: end;
  border-top: 1px solid #E0E8F0;
  overflow: auto;
  margin-top: 10px;
}
body.sim-page-body .sim-chat-input {
  border: 1px solid #D2DDE8;
  border-radius: 10px;
  background: #FFFFFF;
  color: #142033;
  min-height: 38px;
  font-size: 14px;
  line-height: 1.4;
  padding: 8px 10px;
}

/* --- Footer: reduced on this page --- */
/* --- Responsive: collapse 3-col below 1100px --- */
@media (max-width: 1100px) {
  body.sim-page-body .sim-workspace-grid,
  body.sim-page-body .sim-workspace-grid.sim-has-selection {
    grid-template-columns: 1fr;
  }
  body.sim-page-body .sim-support-panel,
  body.sim-page-body .sim-side-panel {
    position: static;
  }
  body.sim-page-body .sim-center-scroll {
    max-height: 550px;
  }

  body.sim-page-body .sim-chat-model-option-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.summary-card ul {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.summary-card li {
  padding: 8px;
  background: var(--panel-alt);
  border-radius: 4px;
}

.phase2-error-list {
  text-align: left;
  margin: 12px 0 0;
  padding-left: 18px;
}
#phase2-exogenous-source-extracellular_IL_2_concentration {
  width: 100%;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.2em; /* Control height per line */
  height: calc(2.4em + 14px); /* 1.2em * 2 lines + total vertical padding (7px + 7px) */
  resize: vertical; /* Allow users to manually adjust if needed */
  box-sizing: border-box;
}
.button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.btn.small {
  padding: 6px 12px;
  font-size: 12px;
}

.btn.danger {
  background: var(--brand-error);
  color: white;
}

.btn.danger:hover {
  opacity: 0.9;
}

.hidden {
  display: none !important;
}

#toast-log .log-item {
  line-height: 1.25;
  border-left: 3px solid var(--brand);
  padding: 2px 4px;
  background: var(--panel-alt);
  border-radius: 4px;
}

body.light-mode #toast-log .log-item { background: #f5f7fb; }
.q-badge.warn { background: #d97706; }
.q-badge.crit { background: #b91c1c; }

/* --- Results Page (moved from template) --- */
.results-page-title {
  margin-bottom: 4px;
  line-height: 1.3;
}

.results-header {
  width: 100%;
  margin: 0px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.results-header .btn {
  white-space: nowrap;
}

.results-report-model {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}

.results-report-model select {
  min-width: 140px;
}

.results-report-feedback {
  flex: 1 1 260px;
  min-width: 240px;
  text-align: right;
}

.results-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.results-status-pill[data-status="ready"] {
  color: #116149;
  background: rgba(17, 97, 73, 0.1);
}

.results-status-pill[data-status="generating"],
.results-status-pill[data-status="queued"] {
  color: #8a5a00;
  background: rgba(166, 113, 0, 0.1);
}

.results-status-pill[data-status="failed"] {
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.1);
}

.results-report-feedback.is-error {
  color: #b91c1c;
}

.results-callout {
  margin-bottom: 24px;
  padding: 12px 16px;
  color: #ff3f3f;
}

.results-main {
  max-width: 1800px;
  /* margin: 0 auto; */
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.results-summary-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.results-structured-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.results-summary-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.results-kpi-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.results-notes-row {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.results-structured-card {
    height: 400px;
    overflow: auto;
    width: auto;
}

.results-info-card,
.results-note-card,
.results-metric-card,
.results-structured-card,
.results-equation-card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.results-info-card-wide {
  grid-column: span 2;
}

.results-structured-card-wide {
  grid-column: span 2;
}

.results-info-card h3 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.results-info-card p,
.results-note-card p {
  margin: 0;
  line-height: 1.65;
  font-size: 14px;
}

.results-info-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 600;
}

.results-metric-value {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.results-equation-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.results-equation-stack {
  display: grid;
  gap: 12px;
}

.results-problem-context-wrap {
  width: 100%;
}

.results-context-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}

.results-context-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.results-context-header h3 {
  margin: 0;
  font-size: 20px;
}

.results-context-toggle {
  white-space: nowrap;
}

.results-context-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.results-context-text {
  position: relative;
  max-height: 180px;
  overflow: hidden;
  line-height: 1.65;
}

.results-context-text p {
  margin: 0 0 12px;
}

.results-context-text p:last-child {
  margin-bottom: 0;
}

.results-context-card[data-expanded="true"] .results-context-text {
  max-height: 340px;
  overflow: auto;
  padding-right: 6px;
}

.results-context-docs {
  display: none;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.results-context-card[data-expanded="true"] .results-context-docs {
  display: block;
}

.results-reference-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0;
}

.results-equation-math {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  overflow-x: auto;
  max-width: 100%;
  margin: 0;
}

.results-equation-source {
  display: none;
  padding: 12px;
  border-radius: 8px;
  background: rgba(11, 95, 165, 0.08);
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  font-size: 12px;
  line-height: 1.5;
}

.results-equation-debug {
  margin-top: -2px;
}

.results-equation-debug summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  user-select: none;
}

.results-equation-debug .results-equation-source {
  display: block;
  margin-top: 8px;
}

.results-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.results-chip-list-tight {
  margin-top: 10px;
}

.results-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
}

.results-kv-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.results-kv-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  line-height: 1.5;
}

.results-kv-key {
  color: var(--muted);
  font-weight: 600;
}

.results-kv-value {
  text-align: right;
  overflow-wrap: anywhere;
}

.results-pre,
.results-structured-value {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.results-artifact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.results-artifact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-alt);
  line-height: 1.5;
}

.results-artifact-link {
  color: var(--link, #0b5fa5);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.results-artifact-link:hover {
  text-decoration: underline;
}

.results-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(11, 95, 165, 0.14);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.results-empty {
  color: var(--muted);
  font-style: italic;
  opacity: 0.8;
}

.results-main .gallery {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

@media (min-width: 1600px) {
  .results-main .gallery {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  }
}

@media (max-width: 820px) {
  .results-main .gallery {
    grid-template-columns: 1fr;
  }
}

.results-main .gallery .shot {
  position: relative;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  padding: 6px 6px 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.results-main .gallery .shot img {
  width: 100%;
  min-height: 320px;
  max-height: 560px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: zoom-in;
  background: linear-gradient(180deg, rgba(11, 95, 165, 0.05), rgba(11, 95, 165, 0.01));
}

.results-main .gallery .shot .thumb-download {
  position: absolute;
  right: 10px;
  bottom: 14px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 8px;
  cursor: pointer;
  opacity: .6;
  transition: opacity .18s, background .18s;
  backdrop-filter: blur(4px);
}

.results-telemetry-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.results-telemetry-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.results-telemetry-stat {
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
}

.results-telemetry-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.results-telemetry-value {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.results-telemetry-table-wrap {
  overflow-x: auto;
}

.results-telemetry-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-alt);
}

.results-telemetry-table th,
.results-telemetry-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.results-telemetry-table th {
  background: rgba(11, 95, 165, 0.08);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.results-telemetry-table tr:last-child td {
  border-bottom: none;
}

.results-telemetry-warnings {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.results-telemetry-warning {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(11, 95, 165, 0.06);
  border: 1px solid rgba(11, 95, 165, 0.12);
}

@media print {
  .results-topbar,
  .results-rail,
  .results-header,
  #card-usage-telemetry,
  .results-header .btn,
  .results-report-model,
  .results-report-feedback,
  .results-status-pill,
  .results-main .gallery .shot .thumb-download,
  .image-modal {
    display: none !important;
  }

  .results-shell,
  .results-main {
    display: block !important;
  }

  .results-main .card,
  .results-main .gallery .shot,
  .results-context-card,
  .results-info-card,
  .results-note-card,
  .results-metric-card,
  .results-structured-card,
  .results-equation-card,
  .results-artifact-row {
    break-inside: avoid;
    page-break-inside: avoid;
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #d0d7de !important;
    box-shadow: none !important;
  }

  .results-main .gallery .shot img,
  .results-main .gallery .shot figcaption,
  .results-equation-math,
  .results-pre,
  .results-structured-value,
  .results-kv-row,
  .results-chip,
  .results-pill {
    break-inside: avoid;
    page-break-inside: avoid;
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #d0d7de !important;
  }

  .results-main .gallery .shot figcaption,
  .results-empty,
  .results-info-label,
  .results-kv-key {
    color: #444444 !important;
  }
}

.results-main .gallery .shot .thumb-download:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.72);
}

.results-main .gallery .shot .thumb-download:active { transform: scale(.9); }

.results-series-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.results-series-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
}

.results-series-meta-row-summary {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0;
  border: none;
  background: transparent;
}

.results-series-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  white-space: nowrap;
}

.results-series-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.results-series-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: var(--panel);
}

.results-series-table th,
.results-series-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.results-series-table thead th {
  background: var(--panel-alt);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.results-series-table tbody tr:last-child td {
  border-bottom: none;
}

@media (max-width: 920px) {
  .results-info-card-wide {
    grid-column: span 1;
  }

  .results-structured-card-wide {
    grid-column: span 1;
  }

  .results-report-feedback {
    text-align: left;
  }

  .results-context-header {
    flex-direction: column;
  }
}

.image-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.image-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.image-modal .im-backdrop {
  position: absolute;
  inset: 0;
}

.image-modal .im-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: min(94vw, 1600px);
  max-height: 86vh;
  padding: 34px 90px;
  background: linear-gradient(145deg, rgba(26, 26, 30, .92), rgba(18, 18, 22, .94));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 60px -8px rgba(0, 0, 0, 0.7);
  border-radius: 22px;
  overflow: hidden;
}

.image-modal .im-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.image-modal .im-figure img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.65);
  user-select: none;
}

.image-modal .im-caption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-muted, #bbb);
  max-width: 960px;
  text-align: center;
}

.image-modal .im-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 58px;
  height: 96px;
  border: none;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, .15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  color: #fff;
  cursor: pointer;
  border-radius: 18px;
  transition: background .18s, transform .18s, color .18s;
}

.image-modal .im-nav:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.image-modal .im-nav:active { transform: translateY(-50%) scale(.94); }
.image-modal .im-prev { left: 16px; }
.image-modal .im-next { right: 16px; }

.image-modal .im-top-actions {
  position: absolute;
  top: 12px;
  right: 14px;
  display: flex;
  gap: 10px;
}

.image-modal .im-top-actions button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  height: 44px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  transition: background .18s, transform .18s;
  padding: 0 18px;
  font-weight: 500;
  letter-spacing: .3px;
}

.image-modal .im-top-actions button:hover { background: rgba(255, 255, 255, 0.18); }
.image-modal .im-top-actions button:active { transform: scale(.9); }
.image-modal .im-download { font-size: 15px; }
.image-modal .im-close { font-size: 22px; }

.axis-labels {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: .85;
  color: var(--text-muted, #999);
}

@media (max-width: 1100px) {
  .image-modal .im-stage { padding: 28px 70px; }
  .image-modal .im-nav {
    width: 50px;
    height: 84px;
    font-size: 36px;
  }
  .image-modal .im-figure img { max-height: 58vh; }
}

@media (max-width: 780px) {
  .image-modal .im-stage {
    padding: 24px 58px;
    gap: 18px;
  }
  .image-modal .im-nav {
    width: 44px;
    height: 74px;
    font-size: 30px;
  }
  .image-modal .im-figure img { max-height: 54vh; }
  .image-modal .im-caption { font-size: 13px; }
}

@media (max-width: 560px) {
  .image-modal .im-stage { padding: 20px 54px; }
  .image-modal .im-nav {
    width: 40px;
    height: 66px;
    font-size: 26px;
  }
  .image-modal .im-close {
    top: 10px;
    right: 12px;
    width: 38px;
    height: 38px;
  }
}

/* === PROFILE DROPDOWN (global) === */
.profile-dropdown {
  position: relative;
  display: inline-flex;
}
.profile-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
  padding: 4px;
  border-radius: 50%;
  transition: background 0.15s;
}
.profile-dropdown-toggle:hover,
.profile-dropdown-toggle:focus-visible {
  background: rgba(0,0,0,0.06);
}
.profile-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid #D9E3EE;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  z-index: 900;
  padding: 6px 0;
}
.profile-dropdown-menu.is-open {
  display: block;
}
.profile-dropdown-item {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: #1a2a3f;
  text-decoration: none;
  transition: background 0.12s;
}
.profile-dropdown-item:hover,
.profile-dropdown-item:focus-visible {
  background: #f0f4f8;
}
.profile-dropdown-divider {
  border: none;
  border-top: 1px solid #E8EDF2;
  margin: 4px 0;
}

/* === PROGRESS % LABEL (below track) === */
.sim-status-progress-track {
  position: relative;
}
.sim-status-progress-percent {
  display: block;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  color: #334a61;
  line-height: 1;
  text-align: left;
}

/* === CHATBOX SHELL (wraps scroll + form) === */
body.sim-page-body .sim-chatbox {
  border: 1px solid #D2DDE8;
  border-radius: 12px;
  padding: 12px;
  background: #FBFDFF;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  width: 100%;
  max-width: none;
  overflow: hidden;
}
body.sim-page-body .sim-chatbox .sim-center-scroll {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  flex: 1 1 auto;
  min-height: 300px;
}
body.sim-page-body .sim-chatbox-run-row {
  margin-top: 6px;
}
body.sim-page-body .sim-chatbox-run-row:empty,
body.sim-page-body .sim-chatbox-run-row .hidden {
  display: none;
}
body.sim-page-body .sim-chat-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* === STATUS UPSERT BUBBLE === */
body.sim-page-body .msg-status-upsert {
  border: 1px dashed #BFD5EA;
  border-radius: 12px;
  background: #F4F8FC;
  padding: 8px 12px;
  font-size: 12px;
  color: #3d5570;
  transition: opacity 0.2s;
}

/* === GREEK PARAMETER ALIASES === */
.param-greek-alias {
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
  color: #2a6cb5;
  min-width: 16px;
  margin-right: 4px;
}
body.sim-page-body .param-entry-label {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* === COMPOSER ALWAYS VISIBLE (handled by .sim-chatbox shell) === */
body.sim-page-body .sim-chat-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Simulate workspace dark-mode overrides for the redesigned light-first layout */
html:not(.light-mode) body.sim-page-body .sim-shell {
  color: var(--text);
}

html:not(.light-mode) body.sim-page-body .sim-shell .sim-panel,
html:not(.light-mode) body.sim-page-body .sim-shell .sim-support-card,
html:not(.light-mode) body.sim-page-body .sim-shell .sim-main-intro,
html:not(.light-mode) body.sim-page-body .sim-shell .sim-right-placeholder,
html:not(.light-mode) body.sim-page-body .sim-shell .sim-conversation-panel,
html:not(.light-mode) body.sim-page-body .sim-shell .phase2-panel,
html:not(.light-mode) body.sim-page-body .sim-shell .draft-card,
html:not(.light-mode) body.sim-page-body .sim-shell .summary-card,
html:not(.light-mode) body.sim-page-body .sim-shell .param-entry-card,
html:not(.light-mode) body.sim-page-body .sim-chatbox,
html:not(.light-mode) body.sim-page-body .sim-chat-history-card,
html:not(.light-mode) body.sim-page-body .sim-chat-model-option-card,
html:not(.light-mode) body.sim-page-body .sim-preview-dialog {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  border-color: var(--border);
  color: var(--text);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

html:not(.light-mode) body.sim-page-body .sim-shell .muted,
html:not(.light-mode) body.sim-page-body .sim-shell .small,
html:not(.light-mode) body.sim-page-body .sim-shell .sim-chat-subtitle,
html:not(.light-mode) body.sim-page-body .sim-shell .sim-package-note,
html:not(.light-mode) body.sim-page-body .sim-shell .sim-progress-metric-label,
html:not(.light-mode) body.sim-page-body .sim-shell .sim-intro-label,
html:not(.light-mode) body.sim-page-body .sim-shell .param-entry-meta,
html:not(.light-mode) body.sim-page-body .sim-shell .param-entry-desc,
html:not(.light-mode) body.sim-page-body .sim-shell .phase2-rationale,
html:not(.light-mode) body.sim-page-body .sim-shell .sim-file-meta,
html:not(.light-mode) body.sim-page-body .sim-breadcrumb-row,
html:not(.light-mode) body.sim-page-body .sim-status-line,
html:not(.light-mode) body.sim-page-body .sim-status-progress-detail,
html:not(.light-mode) body.sim-page-body .sim-status-progress-percent,
html:not(.light-mode) body.sim-page-body .sim-chat-model-option-meta,
html:not(.light-mode) body.sim-page-body .sim-chat-model-option-reason,
html:not(.light-mode) body.sim-page-body .sim-conversation-msg strong,
html:not(.light-mode) body.sim-page-body .sim-conversation-msg p {
  color: var(--muted);
}

html:not(.light-mode) body.sim-page-body .sim-breadcrumb-row a,
html:not(.light-mode) body.sim-page-body .sim-package-row .sim-file-main strong,
html:not(.light-mode) body.sim-page-body .sim-main-intro-grid .sim-intro-copy:first-child,
html:not(.light-mode) body.sim-page-body .sim-chat-history-head h3,
html:not(.light-mode) body.sim-page-body .sim-shell .model-card-title {
  color: var(--text);
}

html:not(.light-mode) body.sim-page-body .sim-progress-stage-chip,
html:not(.light-mode) body.sim-page-body .sim-role-pill,
html:not(.light-mode) body.sim-page-body .sim-file-state,
html:not(.light-mode) body.sim-page-body .sim-status-chip,
html:not(.light-mode) body.sim-page-body .model-card-status {
  background: var(--panel);
  border-color: var(--border);
  color: var(--muted);
}

html:not(.light-mode) body.sim-page-body .sim-progress-stage-chip.is-active,
html:not(.light-mode) body.sim-page-body .sim-package-row.selected,
html:not(.light-mode) body.sim-page-body .sim-activity-feed .msg-user .msg-content,
html:not(.light-mode) body.sim-page-body .sim-conversation-msg-user,
html:not(.light-mode) body.sim-page-body .sim-chat-model-option-card.is-recommended {
  background: rgba(11, 95, 165, 0.16);
  border-color: rgba(20, 184, 166, 0.35);
  color: var(--text);
}

html:not(.light-mode) body.sim-page-body .sim-progress-stage-chip.is-complete,
html:not(.light-mode) body.sim-page-body .model-card-status.is-ready-now,
html:not(.light-mode) body.sim-page-body .sim-chat-model-option-card.is-ready-now {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: #b9f3ca;
}

html:not(.light-mode) body.sim-page-body .model-card-status.is-ready-clarify,
html:not(.light-mode) body.sim-page-body .sim-chat-model-option-card.is-ready-clarify {
  background: rgba(250, 204, 21, 0.12);
  border-color: rgba(250, 204, 21, 0.24);
  color: #f8e49a;
}

html:not(.light-mode) body.sim-page-body .model-card-status.is-poor-fit,
html:not(.light-mode) body.sim-page-body .sim-chat-model-option-card.is-poor-fit {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.24);
  color: #f5b3b3;
}

html:not(.light-mode) body.sim-page-body .sim-package-row,
html:not(.light-mode) body.sim-page-body .sim-model-option-row,
html:not(.light-mode) body.sim-page-body .sim-activity-feed .msg-content,
html:not(.light-mode) body.sim-page-body .sim-activity-feed .sim-artifact-card,
html:not(.light-mode) body.sim-page-body .sim-conversation-msg,
html:not(.light-mode) body.sim-page-body .msg-status-upsert {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}

html:not(.light-mode) body.sim-page-body .sim-workflow-list li,
html:not(.light-mode) body.sim-page-body .sim-chat-input,
html:not(.light-mode) body.sim-page-body .phase2-param-input,
html:not(.light-mode) body.sim-page-body .sim-doc-preview-text,
html:not(.light-mode) body.sim-page-body .sim-doc-preview-empty {
  background: var(--panel);
  border-color: var(--border);
  color: var(--text);
}

html:not(.light-mode) body.sim-page-body .sim-file-remove-inline:hover,
html:not(.light-mode) body.sim-page-body .profile-dropdown-toggle:hover,
html:not(.light-mode) body.sim-page-body .profile-dropdown-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

html:not(.light-mode) body.sim-page-body .sim-workflow-list li.is-current {
  background: rgba(11, 95, 165, 0.16);
  border-color: rgba(20, 184, 166, 0.35);
}

html:not(.light-mode) body.sim-page-body .sim-workflow-list li.is-complete {
  background: rgba(34, 197, 94, 0.12);
}

html:not(.light-mode) body.sim-page-body .sim-workflow-list li span,
html:not(.light-mode) body.sim-page-body .sim-progress-metric strong {
  color: var(--text);
}

html:not(.light-mode) body.sim-page-body .sim-workflow-list li::before {
  background: rgba(255, 255, 255, 0.28);
}

html:not(.light-mode) body.sim-page-body .sim-workflow-list li.is-current::before {
  background: var(--brand-accent);
}

html:not(.light-mode) body.sim-page-body .sim-workflow-list li.is-complete::before {
  background: var(--brand-success);
}

html:not(.light-mode) body.sim-page-body .sim-status-progress-track {
  background: rgba(255, 255, 255, 0.08);
}

html:not(.light-mode) body.sim-page-body .sim-status-progress-fill {
  background: linear-gradient(90deg, var(--brand-primary) 0%, var(--brand-accent) 100%);
}

/* Simulate UX cleanup */
body.sim-page-body {
  --sim-chat-size: 21px;
  --sim-meta-size: 14px;
  --sim-kicker-size: 12px;
  --sim-label-size: 16px;
  --sim-desc-size: 14.5px;
  --sim-input-size: 15.5px;
  --sim-equation-size: 15px;
  --sim-chat-equation-size: 19px;
}

body.sim-page-body .sim-center-scroll,
body.sim-page-body .sim-chatbox,
body.sim-page-body .sim-activity-feed .msg-content,
body.sim-page-body .sim-activity-feed .sim-artifact-card,
body.sim-page-body .sim-center-scroll .sim-artifact-body,
body.sim-page-body .sim-center-scroll .sim-option-summary,
body.sim-page-body .sim-center-scroll .sim-conversation-panel,
body.sim-page-body .sim-center-scroll .sim-chat-history-card,
body.sim-page-body .sim-conversation-msg,
body.sim-page-body .sim-conversation-msg p,
body.sim-page-body .sim-chat-input {
  font-size: var(--sim-chat-size) !important;
  line-height: 1.6;
}

body.sim-page-body .sim-status-line,
body.sim-page-body .sim-conversation-msg strong,
body.sim-page-body .sim-chat-form-actions,
body.sim-page-body .sim-chat-subtitle,
body.sim-page-body .sim-shell .muted,
body.sim-page-body .sim-shell .small {
  font-size: var(--sim-meta-size) !important;
  line-height: 1.5;
}

body.sim-page-body .sim-center-scroll .equation-readout,
body.sim-page-body .sim-center-scroll .equation-readout-plain,
body.sim-page-body .sim-center-scroll .equation-fallback-inline,
body.sim-page-body .sim-center-scroll .katex,
body.sim-page-body .sim-center-scroll .katex-display,
body.sim-page-body .sim-activity-feed .katex,
body.sim-page-body .sim-activity-feed .katex-display,
body.sim-page-body .sim-conversation-msg .katex,
body.sim-page-body .sim-conversation-msg .katex-display {
  font-size: var(--sim-chat-equation-size) !important;
  line-height: 1.45;
}

body.sim-page-body .sim-center-scroll .equation-readout-plain,
body.sim-page-body .sim-center-scroll .equation-fallback-inline {
  font-size: var(--sim-chat-equation-size) !important;
}

body.sim-page-body .sim-center-scroll .sim-artifact-card h3,
body.sim-page-body .sim-center-scroll .sim-artifact-card h4,
body.sim-page-body .sim-center-scroll .equation-group h4,
body.sim-page-body .sim-center-scroll .sim-equations-details > summary {
  font-size: 21px !important;
  line-height: 1.35;
}

body.sim-page-body .sim-center-scroll .equation-label {
  font-size: 18px !important;
  line-height: 1.4;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

body.sim-page-body .sim-phase2-right-panel .equation-label {
  font-size: 15px;
  margin-bottom: 10px;
}

body.sim-page-body .sim-center-scroll .equation-block,
body.sim-page-body .sim-center-scroll .equations,
body.sim-page-body .sim-center-scroll .equation-stack,
body.sim-page-body .sim-center-scroll .equation-readout,
body.sim-page-body .sim-center-scroll .equation-readout-plain {
  max-width: 100%;
}

body.sim-page-body .sim-center-scroll .equation-block,
body.sim-page-body .sim-center-scroll .equations,
body.sim-page-body .sim-center-scroll .equation-stack,
body.sim-page-body .sim-center-scroll .sim-equations-details,
body.sim-page-body .sim-phase2-right-panel .equation-block,
body.sim-page-body .sim-phase2-right-panel .equations,
body.sim-page-body .sim-phase2-right-panel .equation-stack,
body.sim-page-body .sim-phase2-right-panel .sim-equations-details {
  margin-left: 10px;
  margin-right: 10px;
}

body.sim-page-body .sim-center-scroll .equations,
body.sim-page-body .sim-center-scroll .equation-stack {
  font-size: var(--sim-chat-equation-size) !important;
  line-height: 1.45;
}

body.sim-page-body .sim-chat-messages,
body.sim-page-body .sim-activity-feed,
body.sim-page-body .sim-activity-feed > .msg,
body.sim-page-body .sim-activity-feed > .sim-artifact-card,
body.sim-page-body .sim-activity-feed .msg-content,
body.sim-page-body .sim-activity-feed .sim-artifact-card,
body.sim-page-body .sim-center-scroll .sim-artifact-card,
body.sim-page-body .sim-center-scroll .sim-conversation-panel,
body.sim-page-body .sim-center-scroll .sim-chat-history-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

body.sim-page-body .sim-activity-feed > .msg,
body.sim-page-body .sim-activity-feed > .sim-artifact-card,
body.sim-page-body .sim-center-scroll .sim-artifact-card,
body.sim-page-body .sim-center-scroll .sim-conversation-panel,
body.sim-page-body .sim-center-scroll .sim-chat-history-card {
  overflow-wrap: anywhere;
}

body.sim-page-body .sim-center-scroll .sim-artifact-header,
body.sim-page-body .sim-center-scroll .sim-artifact-body,
body.sim-page-body .sim-center-scroll .sim-option-summary,
body.sim-page-body .sim-center-scroll .sim-conversation-summary,
body.sim-page-body .sim-center-scroll .sim-chat-history-card,
body.sim-page-body .sim-center-scroll .msg-content {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.sim-page-body .sim-center-scroll .equation-readout,
body.sim-page-body .sim-center-scroll .equation-readout-plain,
body.sim-page-body .sim-center-scroll .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

body.sim-page-body .sim-center-scroll .equation-readout {
  padding-bottom: 4px;
}

body.sim-page-body .sim-center-scroll .equation-fallback-inline {
  display: inline-block;
  min-width: max-content;
  white-space: pre;
}

body.sim-page-body .sim-center-scroll .katex-display {
  max-width: 100%;
  margin: 0;
  padding-bottom: 4px;
}

body.sim-page-body .sim-phase2-dock {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

body.sim-page-body .sim-center-scroll .equations,
body.sim-page-body .sim-center-scroll .equation-stack,
body.sim-page-body .sim-center-scroll .equation-block,
body.sim-page-body .sim-center-scroll .equation-readout,
body.sim-page-body .sim-center-scroll .equation-readout-plain,
body.sim-page-body .sim-center-scroll .katex-display,
body.sim-page-body .sim-center-scroll figure,
body.sim-page-body .sim-phase2-right-panel .equations,
body.sim-page-body .sim-phase2-right-panel .equation-stack,
body.sim-page-body .sim-phase2-right-panel .equation-block,
body.sim-page-body .sim-phase2-right-panel .equation-readout,
body.sim-page-body .sim-phase2-right-panel .equation-readout-plain,
body.sim-page-body .sim-phase2-right-panel .katex-display,
body.sim-page-body .sim-phase2-right-panel figure {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.sim-page-body .sim-center-scroll .sim-equations-details:has(> .param-table),
body.sim-page-body .sim-center-scroll .sim-equations-details:has(> table),
body.sim-page-body .sim-phase2-right-panel .sim-equations-details:has(> .param-table),
body.sim-page-body .sim-phase2-right-panel .sim-equations-details:has(> table) {
  width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  margin-left: 10px !important;
  margin-right: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.sim-page-body .sim-center-scroll .sim-equations-details:has(> .param-table) > .param-table,
body.sim-page-body .sim-center-scroll .sim-equations-details:has(> table) > table,
body.sim-page-body .sim-phase2-right-panel .sim-equations-details:has(> .param-table) > .param-table,
body.sim-page-body .sim-phase2-right-panel .sim-equations-details:has(> table) > table {
  display: table !important;
  width: 100% !important;
  min-width: max-content !important;
  table-layout: auto !important;
  overflow: visible !important;
}

body.sim-page-body .sim-center-scroll .equation-readout,
body.sim-page-body .sim-center-scroll .equation-readout-plain,
body.sim-page-body .sim-phase2-right-panel .equation-readout,
body.sim-page-body .sim-phase2-right-panel .equation-readout-plain {
  white-space: nowrap !important;
}

body.sim-page-body .sim-center-scroll .equation-fallback-inline,
body.sim-page-body .sim-center-scroll .equation-readout .katex,
body.sim-page-body .sim-phase2-right-panel .equation-fallback-inline,
body.sim-page-body .sim-phase2-right-panel .equation-readout .katex {
  display: inline-block !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}

body.sim-page-body .sim-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

body.sim-page-body .sim-chat-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

body.sim-page-body .btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

body.sim-page-body .sim-side-panel,
body.sim-page-body .sim-phase2-right-panel,
body.sim-page-body .sim-phase2-right-panel .summary-card,
body.sim-page-body .sim-phase2-right-panel .draft-card {
  min-width: 0;
}

body.sim-page-body .sim-side-panel {
  align-self: stretch !important;
  min-height: calc(100vh - 150px);
  max-height: calc(100vh - 32px);
}

body.sim-page-body .sim-phase2-dock,
body.sim-page-body #phase2-panel {
  height: 100%;
  min-height: inherit;
}

body.sim-page-body .sim-phase2-right-panel {
  font-size: var(--sim-chat-size);
  height: 100%;
}

body.sim-page-body .sim-phase2-right-panel .summary-card,
body.sim-page-body .sim-phase2-right-panel .draft-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 18px 18px 20px;
  border-radius: 18px;
  gap: 16px;
}

body.sim-page-body .sim-phase2-right-panel .draft-card > h3,
body.sim-page-body .sim-phase2-right-panel .summary-card > h3,
body.sim-page-body .sim-phase2-right-panel .draft-card > .muted,
body.sim-page-body .sim-phase2-right-panel .phase2-rationale,
body.sim-page-body .sim-phase2-right-panel .equations-section,
body.sim-page-body .sim-phase2-right-panel .summary-card > p,
body.sim-page-body .sim-phase2-right-panel .summary-status,
body.sim-page-body .sim-phase2-right-panel .refinement-info {
  display: block !important;
}

body.sim-page-body .sim-phase2-right-panel .summary-status {
  display: inline-flex !important;
  align-items: center;
  width: fit-content;
  margin-bottom: 8px;
  font-size: 13px !important;
}

body.sim-page-body .sim-phase2-right-panel h4,
body.sim-page-body .sim-phase2-right-panel h5,
body.sim-page-body .sim-phase2-right-panel .equations-section > h5 {
  font-size: var(--sim-kicker-size) !important;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

body.sim-page-body .sim-phase2-right-panel .phase2-section-block {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.sim-page-body .sim-phase2-right-panel .phase2-parameter-grid,
body.sim-page-body .sim-phase2-right-panel .phase2-init-card-list,
body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card-list {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.sim-page-body .sim-phase2-right-panel .param-entry-card,
body.sim-page-body .sim-phase2-right-panel .phase2-init-card,
body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card {
  display: grid;
  gap: 10px;
  padding: 14px 15px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .param-entry-card,
html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .phase2-init-card,
html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card {
  background: rgba(15, 23, 42, 0.68);
  border-color: rgba(148, 163, 184, 0.18);
}

body.sim-page-body .sim-phase2-right-panel .param-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

body.sim-page-body .sim-phase2-right-panel .param-entry-kicker {
  font-size: var(--sim-kicker-size) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

body.sim-page-body .sim-phase2-right-panel .param-entry-symbol-pill {
  flex: 0 0 auto;
  max-width: 100%;
}

body.sim-page-body .sim-phase2-right-panel .param-entry-symbol-pill code {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 13px;
  background: rgba(15, 23, 42, 0.08);
  white-space: normal;
  overflow-wrap: anywhere;
}

html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .param-entry-symbol-pill code {
  background: rgba(148, 163, 184, 0.16);
}

body.sim-page-body .sim-phase2-right-panel .param-entry-label {
  display: grid !important;
  gap: 4px;
  font-size: var(--sim-label-size) !important;
  font-weight: 600;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.4;
}

body.sim-page-body .sim-phase2-right-panel .param-readable-title {
  font-size: var(--sim-label-size) !important;
  line-height: 1.35;
}

body.sim-page-body .sim-phase2-right-panel .param-canonical-symbol,
body.sim-page-body .sim-phase2-right-panel .param-greek-alias {
  font-size: 13px !important;
  color: var(--muted);
}

body.sim-page-body .sim-phase2-right-panel .param-entry-desc,
body.sim-page-body .sim-phase2-right-panel .param-entry-meta,
body.sim-page-body .sim-phase2-right-panel .param-entry-note {
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.sim-page-body .sim-phase2-right-panel .param-entry-desc {
  font-size: var(--sim-desc-size) !important;
  line-height: 1.55;
}

body.sim-page-body .sim-phase2-right-panel .param-entry-meta,
body.sim-page-body .sim-phase2-right-panel .param-entry-note,
body.sim-page-body .sim-phase2-right-panel .phase2-inline-note,
body.sim-page-body .sim-phase2-right-panel .phase2-param-errors {
  font-size: var(--sim-meta-size) !important;
  line-height: 1.5;
}

body.sim-page-body .sim-phase2-right-panel .phase2-field-block {
  display: grid;
  gap: 6px;
}

body.sim-page-body .sim-phase2-right-panel .phase2-field-label {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

body.sim-page-body .sim-phase2-right-panel .phase2-param-input {
  width: 100%;
  min-width: 0;
  font-size: var(--sim-input-size) !important;
  line-height: 1.4;
  padding: 11px 12px;
}

body.sim-page-body .sim-phase2-right-panel .param-entry-advanced {
  margin-top: 2px;
}

body.sim-page-body .sim-phase2-right-panel .param-entry-advanced summary {
  font-size: 13px;
  cursor: pointer;
}

body.sim-page-body .sim-phase2-right-panel .param-entry-advanced-grid {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

body.sim-page-body .sim-phase2-right-panel .button-group,
body.sim-page-body .sim-phase2-right-panel .phase2-actions {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.sim-page-body .sim-phase2-right-panel .button-group .btn,
body.sim-page-body .sim-phase2-right-panel .phase2-actions .btn {
  width: 100%;
  min-height: 50px;
  justify-content: center;
  font-size: 14.5px;
}

body.sim-page-body .sim-phase2-right-panel .equations,
body.sim-page-body .sim-phase2-right-panel .equation-stack {
  display: grid;
  gap: 12px;
}

body.sim-page-body .sim-phase2-right-panel .equation-block,
body.sim-page-body .sim-phase2-right-panel .equation-readout {
  min-width: 0;
}

body.sim-page-body .sim-phase2-right-panel .equation-label {
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

body.sim-page-body .sim-phase2-right-panel .equation-readout,
body.sim-page-body .sim-phase2-right-panel .equation-readout-plain,
body.sim-page-body .sim-phase2-right-panel .equation-fallback-inline,
body.sim-page-body .sim-phase2-right-panel .equations,
body.sim-page-body .sim-phase2-right-panel .katex,
body.sim-page-body .sim-phase2-right-panel .katex-display {
  font-size: var(--sim-equation-size) !important;
  line-height: 1.45;
}

body.sim-page-body .sim-phase2-right-panel .equation-readout,
body.sim-page-body .sim-phase2-right-panel .equation-readout-plain {
  overflow-x: auto;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.04);
}

html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .equation-readout,
html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .equation-readout-plain {
  background: rgba(148, 163, 184, 0.1);
}

body.sim-page-body .sim-phase2-right-panel .katex-display {
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

body.sim-page-body .sim-phase2-right-panel .param-table td,
body.sim-page-body .sim-phase2-right-panel .param-table th {
  white-space: normal;
}

body.sim-page-body .sim-param-list-scroll {
  flex: 1 1 auto;
  display: grid;
  gap: 16px;
  min-height: calc(100vh - 420px);
  max-height: calc(100vh - 250px);
  overflow: auto;
  padding-right: 4px;
}

@media (max-width: 1180px) {
  body.sim-page-body .sim-chat-form {
    grid-template-columns: 1fr;
  }

  body.sim-page-body .sim-chat-form-actions {
    justify-content: stretch;
  }

  body.sim-page-body .sim-chat-form-actions .btn {
    flex: 1 1 auto;
  }

  body.sim-page-body .sim-param-list-scroll {
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 900px) {
  body.sim-page-body .sim-phase2-right-panel .summary-card,
  body.sim-page-body .sim-phase2-right-panel .draft-card {
    padding: 16px;
  }

  body.sim-page-body .sim-phase2-right-panel .param-entry-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  body.sim-page-body .sim-chat-input,
  body.sim-page-body .sim-activity-feed .msg-content,
  body.sim-page-body .sim-conversation-msg,
  body.sim-page-body .sim-conversation-msg p {
    font-size: 16px !important;
  }

  body.sim-page-body .sim-chat-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.sim-page-body .sim-chat-form-actions .btn {
    width: 100%;
  }

  body.sim-page-body .sim-phase2-right-panel .param-entry-card,
  body.sim-page-body .sim-phase2-right-panel .phase2-init-card,
  body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card {
    padding: 13px;
  }
}

html:not(.light-mode) body.sim-page-body .sim-phase2-dock.sim-param-mode .sim-phase2-right-panel #phase2-params-wrap .button-group,
html:not(.light-mode) body.sim-page-body .sim-chat-form {
  border-top-color: var(--border);
}


/* --- Phase 2 right-panel stabilization overrides --- */
body.sim-page-body .sim-side-panel {
  position: sticky;
  top: 10px;
  align-self: start;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 20px);
  max-width: min(360px, 34vw);
  width: 100%;
}

body.sim-page-body .sim-phase2-dock {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  min-height: 0;
  max-height: calc(100vh - 20px);
  overflow: hidden;
}

body.sim-page-body .sim-phase2-mount {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}

body.sim-page-body .sim-phase2-right-panel,
body.sim-page-body .sim-phase2-right-panel .phase2-content,
body.sim-page-body .sim-phase2-right-panel #phase2-params-wrap,
body.sim-page-body .sim-phase2-right-panel #phase2-approved-wrap,
body.sim-page-body .sim-phase2-right-panel .phase2-section:not(.hidden) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.sim-page-body .sim-phase2-right-panel #phase2-params-wrap,
body.sim-page-body .sim-phase2-right-panel #phase2-approved-wrap {
  overflow-y: auto;
  overflow-x: hidden;
}

body.sim-page-body .sim-phase2-right-panel .summary-card {
  margin: 0;
  width: 100%;
  height: 400px;
  max-height: 500px;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 16px;
}

body.sim-page-body .sim-phase2-right-panel .sim-param-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: #b8c9db transparent;
}

body.sim-page-body .sim-phase2-right-panel .summary-card > .sim-param-list-scroll > * + * {
  margin-top: 12px;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-card-list,
body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card-list {
  display: grid;
  gap: 10px;
  overflow: visible;
  min-height: auto;
  flex: 0 0 auto;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-meta.small.muted {
  display: grid;
  gap: 4px;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-input-wrap .small.error,
body.sim-page-body .sim-phase2-right-panel .phase2-init-clarification {
  display: block;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-input-wrap textarea,
body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-input {
  width: 100%;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-input-wrap textarea {
  min-height: 72px;
  resize: vertical;
}

body.sim-page-body .sim-phase2-right-panel .button-group {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #E0E8F0;
  background: var(--panel);
}

body.sim-page-body .sim-phase2-right-panel .phase2-param-errors:not(.hidden) {
  margin-top: 12px;
}

@media (max-width: 1100px) {
  body.sim-page-body .sim-side-panel {
    position: static;
    max-height: none;
    max-width: 100%;
  }

  body.sim-page-body .sim-phase2-dock {
    max-height: none;
  }
}


/* ==========================================================================
   SIMULATE + PHASE 2 AUTHORITATIVE LAYOUT OVERRIDES
   Clean, final rules for the simulate workspace and right-side Phase 2 panel.
   These override older duplicate declarations above.
   ========================================================================== */

.hidden,
.panel-hidden,
.phase2-panel.hidden,
.phase2-section.hidden,
.sim-intake-screen.hidden,
.sim-workspace-shell.hidden,
.sim-phase2-dock.hidden,
.sim-chat-container.hidden {
  display: none !important;
}

body.sim-page-body .sim-workspace-grid {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.sim-page-body .sim-workspace-grid.sim-has-selection,
body.sim-page-body .sim-workspace-grid.sim-workspace-grid-parameterized {
  grid-template-columns: 200px minmax(0, 1fr) minmax(340px, 420px);
}

body.sim-page-body .sim-support-panel {
  position: sticky;
  top: 84px;
  align-self: start;
}

body.sim-page-body .sim-main-panel {
  min-width: 0;
}

body.sim-page-body .sim-side-panel {
  position: sticky;
  top: 10px;
  align-self: start;
  width: 100%;
  min-width: 340px;
  max-width: 420px;
  max-height: calc(100vh - 20px);
  display: flex;
  flex-direction: column;
}

body.sim-page-body .sim-phase2-dock {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 100%;
  min-height: 0;
  max-height: calc(100vh - 20px);
  padding: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #D9E3EE;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(19, 39, 63, 0.06);
}

body.sim-page-body .sim-phase2-mount {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

body.sim-page-body .sim-phase2-right-panel,
body.sim-page-body .sim-phase2-right-panel .phase2-content,
body.sim-page-body .sim-phase2-right-panel #phase2-draft-wrap,
body.sim-page-body .sim-phase2-right-panel #phase2-params-wrap,
body.sim-page-body .sim-phase2-right-panel #phase2-approved-wrap,
body.sim-page-body .sim-phase2-right-panel .phase2-section:not(.hidden) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
}

body.sim-page-body .sim-phase2-right-panel #phase2-params-wrap,
body.sim-page-body .sim-phase2-right-panel #phase2-approved-wrap {
  overflow: hidden !important;
}

body.sim-page-body .sim-phase2-right-panel .draft-card,
body.sim-page-body .sim-phase2-right-panel .summary-card {
  width: 100%;
  margin: 0;
  padding: 0px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  min-height: 0;
  overflow: hidden;
  flex: 1 1 auto;
  height: 100%;
}

body.sim-page-body .sim-phase2-right-panel .summary-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  max-height: none;
  overflow: hidden;
}

body.sim-page-body .sim-phase2-right-panel .sim-param-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding-right: 6px;
  padding-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: #b8c9db transparent;
}

body.sim-page-body .sim-phase2-right-panel .sim-param-list-scroll::-webkit-scrollbar {
  width: 10px;
}

body.sim-page-body .sim-phase2-right-panel .sim-param-list-scroll::-webkit-scrollbar-track {
  background: transparent;
}

body.sim-page-body .sim-phase2-right-panel .sim-param-list-scroll::-webkit-scrollbar-thumb {
  background: #b8c9db;
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

body.sim-page-body .sim-phase2-right-panel .phase2-section-block,
body.sim-page-body .sim-phase2-right-panel .parameters-section,
body.sim-page-body .sim-phase2-right-panel .equations-section,
body.sim-page-body .sim-phase2-right-panel .refinement-info {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

body.sim-page-body .sim-phase2-right-panel .phase2-section-block h4,
body.sim-page-body .sim-phase2-right-panel .phase2-section h5 {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #63788f;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-card-list,
body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card-list,
body.sim-page-body .sim-phase2-right-panel .phase2-parameter-grid {
  display: grid;
  gap: 10px;
  min-height: auto;
  overflow: visible;
}

body.sim-page-body .sim-phase2-right-panel .phase2-parameter-grid {
  grid-template-columns: 1fr;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-card,
body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card,
body.sim-page-body .sim-phase2-right-panel .param-entry-card {
  background: #FFFFFF;
  border: 1px solid #DCE6F0;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  gap: 6px;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-card-title,
body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card-title {
  font-weight: 700;
  color: #17324D;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-card-subtitle,
body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card-subtitle {
  font-size: 12px;
  color: #3f5369;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-card-meta,
body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card-meta,
body.sim-page-body .sim-phase2-right-panel .param-entry-meta,
body.sim-page-body .sim-phase2-right-panel .param-entry-desc {
  font-size: 11px;
  line-height: 1.4;
  color: #607086;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.sim-page-body .sim-phase2-right-panel .param-entry-label {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 12px;
  color: #17324D;
}

body.sim-page-body .sim-phase2-right-panel .phase2-param-input,
body.sim-page-body .sim-phase2-right-panel select.phase2-param-input,
body.sim-page-body .sim-phase2-right-panel textarea.phase2-param-input {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #D2DDE8;
  background: #FBFDFF;
  color: #142033;
  font-size: 12px;
  line-height: 1.4;
  padding: 8px 10px;
  margin-top: 0;
  min-height: 38px;
  max-width: none;
}

body.sim-page-body .sim-phase2-right-panel textarea.phase2-param-input {
  min-height: 72px;
  resize: vertical;
}

body.sim-page-body .sim-phase2-right-panel .phase2-inline-note,
body.sim-page-body .sim-phase2-right-panel .phase2-param-errors:not(.hidden) {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #DCE6F0;
  background: #F8FBFE;
  color: #42586f;
  font-size: 12px;
  line-height: 1.45;
}

body.sim-page-body .sim-phase2-right-panel .phase2-param-errors:not(.hidden) {
  border-color: rgba(195, 59, 59, 0.28);
  background: rgba(195, 59, 59, 0.08);
  color: #8c1d1d;
}

body.sim-page-body .sim-phase2-right-panel .qa-error-summary {
  white-space: pre-line;
}

body.sim-page-body .sim-phase2-right-panel .qa-row-error {
  border-color: rgba(195, 59, 59, 0.45);
  box-shadow: 0 0 0 1px rgba(195, 59, 59, 0.08);
}

body.sim-page-body .sim-phase2-right-panel .qa-field-error {
  border-color: #c33b3b;
  background: #fff7f7;
  box-shadow: 0 0 0 3px rgba(195, 59, 59, 0.12);
}

body.sim-page-body .sim-phase2-right-panel .button-group,
body.sim-page-body .sim-phase2-right-panel .phase2-actions {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #E0E8F0;
  background: #FFFFFF;
}

body.sim-page-body .sim-phase2-right-panel .button-group .btn,
body.sim-page-body .sim-phase2-right-panel .phase2-actions .btn {
  flex: 1 1 140px;
}

body.sim-page-body .sim-phase2-right-panel .equations {
  margin: 0;
  padding: 8px;
  font-size: 15px;
  line-height: 1.6;
  background: #F8FBFE;
  border: 1px solid #E1EAF3;
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
  height: auto;
}

body.sim-page-body .sim-phase2-right-panel .equation-block + .equation-block,
body.sim-page-body .sim-phase2-right-panel .equation-readout + .equation-readout {
  margin-top: 6px;
}

body.sim-page-body .equation-readout,
body.sim-page-body .equation-block {
  min-height: 0;
}

body.sim-page-body .equation-readout-plain {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #243145;
}

body.sim-page-body .sim-phase2-right-panel .equation-stack {
  display: grid;
  gap: 6px;
}

body.sim-page-body .sim-phase2-right-panel .equation-block {
  display: grid;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid #E1EAF3;
  border-radius: 10px;
  background: #FFFFFF;
}

body.sim-page-body .sim-phase2-right-panel .equation-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #63788f;
}

body.sim-page-body .sim-phase2-right-panel .equation-readout {
  margin: 0;
  min-height: 0;
  font-size: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

body.sim-page-body .sim-phase2-right-panel .equation-readout .katex {
  font-size: 15px;
}

body.sim-page-body .sim-phase2-right-panel .equation-readout .katex-display {
  margin: 0;
}

body.sim-page-body .sim-phase2-right-panel .equation-fallback-inline {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #243145;
}

body.sim-page-body .sim-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: end;
}

@media (max-width: 1180px) {
  body.sim-page-body .sim-workspace-grid.sim-has-selection,
  body.sim-page-body .sim-workspace-grid.sim-workspace-grid-parameterized {
    grid-template-columns: 200px minmax(0, 1fr) minmax(300px, 360px);
  }

  body.sim-page-body .sim-side-panel {
    min-width: 300px;
    max-width: 360px;
  }
}

@media (max-width: 1100px) {
  body.sim-page-body .sim-workspace-grid,
  body.sim-page-body .sim-workspace-grid.sim-has-selection,
  body.sim-page-body .sim-workspace-grid.sim-workspace-grid-parameterized {
    grid-template-columns: 1fr;
  }

  body.sim-page-body .sim-support-panel,
  body.sim-page-body .sim-side-panel {
    position: static;
    max-width: 100%;
    min-width: 0;
    max-height: none;
  }

  body.sim-page-body .sim-phase2-dock {
    max-height: none;
  }
}

@media (max-width: 760px) {
  body.sim-page-body .sim-chat-form {
    grid-template-columns: 1fr;
  }

  body.sim-page-body .sim-phase2-right-panel .button-group,
  body.sim-page-body .sim-phase2-right-panel .phase2-actions {
    position: static;
  }
}

html:not(.light-mode) body.sim-page-body .sim-phase2-dock {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-alt) 100%);
  border-color: var(--border);
}

html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .phase2-init-card,
html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card,
html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .param-entry-card,
html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .equations,
html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .button-group,
html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .phase2-actions {
  background: var(--panel);
  border-color: var(--border);
}

html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .phase2-inline-note {
  background: rgba(255,255,255,0.04);
  border-color: var(--border);
  color: var(--muted);
}



/* ==========================================================================
   PHASE 2 RIGHT-PANEL HOTFIX
   The current JS renders .summary-card directly (no .sim-param-list-scroll wrapper),
   so the card itself must scroll. These overrides intentionally defeat older
   fixed-height/overflow-hidden rules that are clipping runtime exogenous inputs.
   ========================================================================== */

body.sim-page-body .sim-workspace-grid.sim-has-selection,
body.sim-page-body .sim-workspace-grid.sim-workspace-grid-parameterized {
  grid-template-columns: 200px minmax(0, 1fr) minmax(300px, 300px) !important;
}

body.sim-page-body .sim-side-panel {
  min-width: 360px !important;
  max-width: 440px !important;
}

body.sim-page-body .sim-phase2-dock {
  max-height: calc(100vh - 20px) !important;
  overflow: hidden !important;
}

body.sim-page-body .sim-phase2-mount,
body.sim-page-body .sim-phase2-right-panel,
body.sim-page-body .sim-phase2-right-panel .phase2-content,
body.sim-page-body .sim-phase2-right-panel #phase2-draft-wrap,
body.sim-page-body .sim-phase2-right-panel #phase2-params-wrap,
body.sim-page-body .sim-phase2-right-panel #phase2-approved-wrap,
body.sim-page-body .sim-phase2-right-panel .phase2-section:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
}

body.sim-page-body .sim-phase2-right-panel,
body.sim-page-body .sim-phase2-right-panel .phase2-content,
body.sim-page-body .sim-phase2-right-panel #phase2-draft-wrap,
body.sim-page-body .sim-phase2-right-panel #phase2-params-wrap,
body.sim-page-body .sim-phase2-right-panel #phase2-approved-wrap {
  overflow: hidden !important;
}

body.sim-page-body .sim-phase2-right-panel .draft-card,
body.sim-page-body .sim-phase2-right-panel .summary-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
}

body.sim-page-body .sim-phase2-right-panel .sim-param-list-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.sim-page-body .sim-phase2-right-panel .button-group,
body.sim-page-body .sim-phase2-right-panel .phase2-actions {
  flex: 0 0 auto !important;
  position: static !important;
}

body.sim-page-body .sim-phase2-right-panel #phase2-draft-wrap.hidden,
body.sim-page-body .sim-phase2-right-panel #phase2-params-wrap.hidden,
body.sim-page-body .sim-phase2-right-panel #phase2-approved-wrap.hidden,
body.sim-page-body .sim-phase2-right-panel .phase2-section.hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

/* body.sim-page-body .sim-phase2-right-panel .summary-card {
  width: 100% !important;
  margin: 0 !important;
  max-height: none !important;
  height: auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
} */

/* body.sim-page-body .sim-phase2-right-panel .summary-card > * {
  flex: 0 0 auto;
} */
div#phase2-equation-sections {
    height: 260px;
    overflow: auto;
}
body.sim-page-body .sim-phase2-right-panel .phase2-section-block,
body.sim-page-body .sim-phase2-right-panel .parameters-section,
body.sim-page-body .sim-phase2-right-panel .equations-section,
body.sim-page-body .sim-phase2-right-panel .refinement-info {
  display: grid !important;
  gap: 8px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-card-list,
body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card-list,
body.sim-page-body .sim-phase2-right-panel .phase2-parameter-grid {
  display: grid !important;
  gap: 10px !important;
  overflow: visible !important;
  max-height: none !important;
}

body.sim-page-body .sim-phase2-right-panel .phase2-parameter-grid {
  grid-template-columns: 1fr !important;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-card,
body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card,
body.sim-page-body .sim-phase2-right-panel .param-entry-card {
  margin: 0 !important;
}

body.sim-page-body .sim-phase2-right-panel .phase2-init-card-meta,
body.sim-page-body .sim-phase2-right-panel .phase2-exogenous-card-meta,
body.sim-page-body .sim-phase2-right-panel .param-entry-desc,
body.sim-page-body .sim-phase2-right-panel .param-entry-meta,
body.sim-page-body .sim-phase2-right-panel .param-entry-label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

/* Middle chat-area width safety override.
   Keep cards and section wrappers inside the chat lane; only wide content scrolls locally. */
body.sim-page-body .sim-chat-messages,
body.sim-page-body .sim-activity-feed,
body.sim-page-body .sim-activity-feed > .msg,
body.sim-page-body .sim-activity-feed > .sim-artifact-card,
body.sim-page-body .sim-activity-feed .msg-content,
body.sim-page-body .sim-activity-feed .sim-artifact-card,
body.sim-page-body .sim-activity-feed .sim-artifact-body,
body.sim-page-body .sim-center-scroll .sim-artifact-card,
body.sim-page-body .sim-center-scroll .sim-artifact-body,
body.sim-page-body .sim-center-scroll .sim-conversation-panel,
body.sim-page-body .sim-center-scroll .sim-chat-history-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.sim-page-body .sim-activity-feed > .sim-artifact-card,
body.sim-page-body .sim-activity-feed .sim-artifact-body,
body.sim-page-body .sim-center-scroll .sim-artifact-card,
body.sim-page-body .sim-center-scroll .sim-artifact-body {
  overflow-x: hidden !important;
}

body.sim-page-body .sim-center-scroll .sim-equations-details,
body.sim-page-body .sim-center-scroll .equation-block,
body.sim-page-body .sim-center-scroll .equations,
body.sim-page-body .sim-center-scroll .equation-stack {
  width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.sim-page-body .sim-center-scroll .sim-equations-details,
body.sim-page-body .sim-center-scroll .equation-block {
  overflow-x: hidden !important;
}

body.sim-page-body .sim-center-scroll .equation-readout,
body.sim-page-body .sim-center-scroll .equation-readout-plain,
body.sim-page-body .sim-center-scroll .katex-display,
body.sim-page-body .sim-center-scroll figure {
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

body.sim-page-body .sim-center-scroll .sim-equations-details:has(> .param-table),
body.sim-page-body .sim-center-scroll .sim-equations-details:has(> table) {
  overflow-x: auto !important;
}

/* Final center-chat typography override.
   Keep chat-area headings, subheadings, and body copy on one consistent scale. */
body.sim-page-body .sim-center-scroll .equation-label,
body.sim-page-body .sim-activity-feed .equation-label,
body.sim-page-body .sim-center-scroll .sim-artifact-body .equation-label {
  display: block !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

body.sim-page-body .sim-center-scroll .equation-block,
body.sim-page-body .sim-activity-feed .equation-block {
  display: grid !important;
  gap: 10px !important;
}

body.sim-page-body .sim-center-scroll .sim-artifact-header,
body.sim-page-body .sim-activity-feed .sim-artifact-header,
body.sim-page-body .sim-center-scroll .sim-option-summary .small,
body.sim-page-body .sim-center-scroll .sim-option-summary .muted {
  font-size: var(--sim-meta-size) !important;
  line-height: 1.5 !important;
}

body.sim-page-body .sim-center-scroll .sim-artifact-card h3,
body.sim-page-body .sim-center-scroll .sim-artifact-card h4,
body.sim-page-body .sim-activity-feed .sim-artifact-card h3,
body.sim-page-body .sim-activity-feed .sim-artifact-card h4 {
  font-size: 21px !important;
  line-height: 1.35 !important;
}

body.sim-page-body .sim-center-scroll .sim-artifact-body,
body.sim-page-body .sim-center-scroll .sim-artifact-body > p,
body.sim-page-body .sim-center-scroll .sim-artifact-body > div,
body.sim-page-body .sim-center-scroll .sim-artifact-body li,
body.sim-page-body .sim-center-scroll .sim-option-summary,
body.sim-page-body .sim-center-scroll .sim-option-summary > div,
body.sim-page-body .sim-center-scroll .sim-chat-model-option-reason,
body.sim-page-body .sim-activity-feed .sim-artifact-body,
body.sim-page-body .sim-activity-feed .sim-artifact-body > p,
body.sim-page-body .sim-activity-feed .sim-artifact-body > div,
body.sim-page-body .sim-activity-feed .sim-artifact-body li,
body.sim-page-body .sim-activity-feed .sim-option-summary,
body.sim-page-body .sim-activity-feed .sim-option-summary > div {
  font-size: var(--sim-chat-size) !important;
  line-height: 1.6 !important;
}

body.sim-page-body .sim-phase2-right-panel .phase2-param-input,
body.sim-page-body .sim-phase2-right-panel select.phase2-param-input,
body.sim-page-body .sim-phase2-right-panel textarea.phase2-param-input {
  max-width: none !important;
  width: 100% !important;
}

body.sim-page-body .sim-phase2-right-panel .button-group,
body.sim-page-body .sim-phase2-right-panel .phase2-actions {
  position: static !important;
  flex: 0 0 auto;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid #E0E8F0 !important;
  background: transparent !important;
}

body.sim-page-body .sim-phase2-right-panel .button-group .btn,
body.sim-page-body .sim-phase2-right-panel .phase2-actions .btn {
  flex: 0 0 120px !important;
}

html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .button-group,
html:not(.light-mode) body.sim-page-body .sim-phase2-right-panel .phase2-actions {
  background: transparent !important;
}

@media (max-width: 1180px) {
  body.sim-page-body .sim-workspace-grid.sim-has-selection,
  body.sim-page-body .sim-workspace-grid.sim-workspace-grid-parameterized {
    grid-template-columns: 200px minmax(0, 1fr) minmax(320px, 380px) !important;
  }

  body.sim-page-body .sim-side-panel {
    min-width: 320px !important;
    max-width: 380px !important;
  }
}

@media (max-width: 1100px) {
  body.sim-page-body .sim-workspace-grid,
  body.sim-page-body .sim-workspace-grid.sim-has-selection,
  body.sim-page-body .sim-workspace-grid.sim-workspace-grid-parameterized {
    grid-template-columns: 1fr !important;
  }

  body.sim-page-body .sim-side-panel {
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
  }

  body.sim-page-body .sim-phase2-dock {
    max-height: none !important;
  }

  body.sim-page-body .sim-phase2-right-panel .button-group,
  body.sim-page-body .sim-phase2-right-panel .phase2-actions {
    position: static !important;
  }
}