/* ==========================================================================
   Field Harmonix UI — style.css
   - CSS custom properties (variables) at top.
   - Media queries grouped at bottom.
   ========================================================================== */


/* ==========================================================================
   1) THEME TOKENS / DESIGN VARIABLES — Field Harmonix palette
   Mirrors fieldharmonix.com/css/tokens.css. The legacy var names
   (--bg-dark, --accent, etc.) are retained so the rest of this stylesheet
   keeps working; the values are replaced with the FH palette.
   ========================================================================== */
:root {
  /* Single dark theme per FH brand brief. Declaring color-scheme: dark
     also tells Chromium/Brave's force-dark heuristic to leave our images
     alone — it was inverting the QuickScan/DeepScan icons in Brave. */
  color-scheme: dark;

  /* ── FH canonical palette (sourced from fieldharmonix.com/css/tokens.css) ── */
  --fh-bg:                 #000B1F;  /* deep navy near-black */
  --fh-surface:            #001A4A;  /* card / panel surface */
  --fh-text-primary:       #FFFFFF;
  --fh-text-secondary:     #A8C0E8;  /* muted blue-grey */
  --fh-accent-gold:        #B8960C;  /* primary accent */
  --fh-gold-bright:        #D4AF37;  /* hover / focus accent */
  --fh-highlight-teal:     #1A7A8A;  /* button border + fill */
  --fh-glow-green:         #00FF88;  /* status: ready / success */
  --fh-warmth-amber:       #FFB830;  /* status: warm warning */
  --fh-surface-alpha:      rgba(0, 26, 74, 0.6);
  --fh-overlay:            rgba(0, 11, 31, 0.85);
  --fh-gold-border:        rgba(184, 150, 12, 0.22);
  --fh-gold-border-strong: rgba(184, 150, 12, 0.45);

  /* ── Legacy aliases (mapped onto the FH palette so the existing CSS keeps working) ── */
  --bg-light: #F5F1E8;       /* warm cream — daylight variant */
  --bg-dark:  var(--fh-bg);
  --text-light: #0F1F3D;
  --text-dark:  var(--fh-text-primary);

  --font-heading: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono-ui: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --accent:       var(--fh-accent-gold);
  --accent-dark:  var(--fh-highlight-teal);

  --panel-light:        #FFFFFF;
  --panel-dark:         var(--fh-surface);
  --panel-muted-light:  #F9F4E8;
  --panel-muted-dark:   #00132E;

  --border-light: rgba(15, 31, 61, 0.16);
  --border-dark:  var(--fh-gold-border);

  --muted-light: #5C6B85;
  --muted-dark:  var(--fh-text-secondary);

  --bk-gray: #DFDEDC;
  --viola:   var(--fh-gold-bright);   /* "violet highlight" → FH bright gold */

  --hover: var(--fh-gold-bright);

  /* ── FH structural tokens ── */
  --fh-radius-sm: 8px;
  --fh-radius-lg: 16px;
  --fh-tracking-wide:  0.08em;
  --fh-tracking-wider: 0.15em;
  --fh-transition-fast:   200ms ease;
  --fh-transition-normal: 400ms ease;
}

/* Legacy "Computer Says No" font kept as a fallback registration so the
   --font-mono-ui token doesn't fail; if the asset is missing the browser
   falls through to the system mono stack. */
@font-face {
  font-family: "Computer Says No";
  src: url("/static/fonts/computer-says-no.otf.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

#violet-highlight {
  color: var(--viola);	
}
/* ==========================================================================
   2) BASE / RESET
   ========================================================================== */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  height: 100vh;
  background: var(--bg-dark);
  color: var(--text-dark);
}



a {
  color: inherit;
  text-decoration: none;
}

/* Headings / titles */
.brand-title,
.mobile-title,
.welcome-title,
.references-title,
.sidebar-section-title,
.modal-title,
.fb-title {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
}

.welcome-title {
  font-weight: 800;
}

.brand-title {
  font-weight: 700;
}

.brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;    
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Image fills the circle */
.brand-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;       
  display: block;
}



/* ==========================================================================
   3) APP LAYOUT
   ========================================================================== */
.app {
  display: flex;
  width: 100%;
  height: 100%;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-dark);
}



/* Main header (mobile) — currently unused (kept for compatibility) */
.main-header { display: none; }


/* ==========================================================================
   4) SIDEBAR
   ========================================================================== */

/* Default sidebar surface = dark mode */
.sidebar {
  background: #000;
  border-right: 1px solid rgba(148,163,184,0.35);
}

/* Light-mode sidebar surface */


/* Sidebar header row (brand + theme toggle) */
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

/* Brand block (legacy — kept for any other code paths that still
   render .brand markup; the sidebar header now uses .sidebar-brand-btn
   instead, see below). */
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 150, 105, 0.15);
  color: #bbf7d0;
}

/* Sidebar brand — plain (non-interactive) sonar intelligence image at
   the top of the sidebar. The source asset is on a cream background,
   so we apply the same dark-theme filter used in the welcome block
   (`invert + hue-rotate(180)`) so it sits naturally in the dark
   sidebar. */
.sidebar-brand {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 220px;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  /* The brand image is an <a> home link back to the welcome screen. */
  cursor: pointer;
  transition: opacity var(--fh-transition-fast);
}
.sidebar-brand:hover { opacity: 0.85; }
.sidebar-brand:focus-visible {
  outline: 2px solid var(--fh-accent-gold);
  outline-offset: 2px;
}

.sidebar-brand-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  filter: invert(1) hue-rotate(180deg) saturate(1.15);
}



.brand-title {
  font-weight: 600;
  font-size: 16px;
}

.brand-subtitle {
  font-size: 11px;
  color: var(--muted-dark);
}



/* Lock button*/
.lock-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(15,23,42,0.95);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.lock-icon {
  width: 64px;
  height: 64px;
  display: block;
}
.lock-icon-unlocked {
  display: none;
}
#lock-btn.unlocked .lock-icon-locked {
  display: none;
}
#lock-btn.unlocked .lock-icon-unlocked {
  display: block;
}



#lock-btn.unlocked {
  color: #16a34a; /* Tailwind green-600 */
}

#lock-btn:disabled {
  opacity: 0.85;
  cursor: default;
  pointer-events: none; 
}


.lock-btn:hover { background: var(--accent); color:#fff; }

.lock-modal { position: fixed; inset:0; z-index:9998; background: rgba(0,0,0,0.55);
  display:none; align-items:center; justify-content:center; padding:20px; }
.lock-modal.open { display:flex; }

.lock-card { width:min(420px,100%); border-radius:16px; border:1px solid rgba(148,163,184,0.45);
  background: rgba(15,23,42,0.96); color: var(--text-dark); padding:16px; position:relative; }


.lock-close { position:absolute; top:10px; right:10px; width:28px; height:28px;
  border-radius:999px; border:none; background:transparent; cursor:pointer; font-size:18px; color:inherit; }
.lock-label { display:block; font-size:13px; margin-bottom:8px; font-weight:650; }
.lock-row { display:flex; gap:8px; align-items:center; }
.lock-input { flex:1; height:36px; border-radius:10px; border:1px solid rgba(148,163,184,0.55);
  padding:0 10px; background: rgba(2,6,23,0.55); color: var(--text-dark); outline:none; }

.lock-enter { height:36px; border-radius:10px; border:none; padding:0 12px; cursor:pointer;
  background: var(--accent); color:#fff; font-weight:700; }
.lock-msg { margin-top:10px; font-size:12px; min-height:16px; }


/* Brand title as clickable button */
.brand-title-btn {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.brand-title-btn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* (Theme toggle CSS removed in 2026-05 visual rebuild — single dark theme.) */



/* Sidebar section titles */
.sidebar-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 6px 10px;
  color: var(--muted-dark);
  text-align: center;
}



/* Force dark-mode title links to accent */
body.dark .sidebar-section-title,
body.dark .sidebar-section-title a,
body.dark .sidebar-section-title a:link,
body.dark .sidebar-section-title a:visited {
  color: var(--accent) !important;
}

body.dark .sidebar-section-title a:hover,
body.dark .sidebar-section-title a:focus {
  color: var(--accent) !important;
}


/* Optional pill button style */
.pill-button {
  border-radius: 10px;
  padding: 8px 10px;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  background: rgba(5, 150, 105, 0.16);
  color: #a7f3d0;
}


/* "Recent" empty state item */
.recent-item {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--muted-dark);
  cursor: default;
}
.recent-item:hover { background: rgba(148,163,184,0.12); }



.sidebar a:hover {
  color: var(--viola);
}

/* Pin the sidebar itself so it doesn't scroll with the page */
#sidebar.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 260px;
  padding-left: 12px;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 4000;
}

/* Header stays at top */
#sidebar .sidebar-header { flex: 0 0 auto; }

/* Only this area scrolls */
#sidebar .sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

/* Sidebar footer */
.sidebar-footer {
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid rgba(148,163,184,0.35);
  border-right: 1px solid rgba(148,163,184,0.35);
}


/* Footer stays pinned at bottom */
#sidebar .sidebar-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

/* Collapse button (large screens) */
.sidebar-collapse-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
  color: inherit;
}
.sidebar-collapse-btn:hover { background: rgba(148,163,184,0.18); }

/* Position collapse button just above footer */
#sidebar .sidebar-collapse-btn {
  position: absolute;
  right: 12px;
  bottom: 16px; /* adjust: footer height + spacing */
  z-index: 10;
}

/* Collapsed state */
body.sidebar-collapsed #sidebar {
  transform: translateX(-100%);
}

/* Open button appears when collapsed */
.sidebar-open-btn {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 5000;
  display: none;
  background: rgba(15,23,42,0.95);
  color: var(--text-dark);
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

body.sidebar-collapsed .sidebar-open-btn { display: inline-flex; }

/* Sidebar user row */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  cursor: default;
}
.sidebar-user:hover { background: rgba(148,163,184,0.12); }

.sidebar-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;       
  background: linear-gradient(
    135deg,
    var(--accent),
    var(--accent-dark)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Image fills the avatar */
.sidebar-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;        
  display: block;
}


.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
}

.sidebar-user-sub {
  font-size: 11px;
  color: var(--muted-dark);
}


.sidebar-version-info {
  font-size: 11px;
  color: var(--muted-medium);
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Never allow horizontal scrollbars in the sidebar */
#sidebar.sidebar {
  overflow-x: hidden;
}

#sidebar .sidebar-scroll {
  overflow-x: hidden;
}

/* Prevent <pre> or long tokens from forcing sidebar overflow */
#sidebar pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: hidden;
}
/* ==========================================================================
   5) STATUS PANEL (SIDEBAR)
   ========================================================================== */
.status-panel {
  border-radius: 6px;
  padding: 10px;
  margin: 0 6px 10px;
  background: rgba(148,163,184,0.08);
}


.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.status-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #64748b; /* default gray */
  box-shadow: 0 0 0 3px rgba(100,116,139,0.18);
  flex-shrink: 0;
}

.status-label {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-chip {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.45);
  color: var(--muted-dark);
}


/* Dot states */
.status-dot.red {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.20);
}
.status-dot.yellow {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.22);
}
.status-dot.green {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.22);
}

.status-queue {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted-dark);
  margin-bottom: 10px;
}


.status-messages-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--muted-dark);
}


.status-messages-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow: auto;
  padding-right: 4px;
}

.status-message {
  font-size: 12px;
  line-height: 1.35;
  padding: 8px 8px;
  border-radius: 8px;
  background: rgba(15,23,42,0.65);
}


.status-message.muted { color: var(--muted-dark); }



/* ==========================================================================
   6) CHAT AREA
   ========================================================================== */
.chat-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.chat-inner {
  max-width: 880px;
  margin: 0 auto;
}

/* Welcome — now sits below the persistent logo + chat input, so the
   top padding is much smaller than the previous hero-style 60px. */
.welcome {
  text-align: center;
  padding: 18px 12px 40px;
}

/* Legacy hero logo styles — kept for compatibility with code paths that
   may still inject .welcome-icon inside .welcome. The persistent header
   logo styles in .main-hero .welcome-icon take precedence there. */
.welcome-icon {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.welcome-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;  
  display: block;
}




.welcome-title {
  /* Enlarged: the welcome title is the primary "Field Harmonix" headline
     in the chat area now that the small top-left wordmark is a
     persistent header. Use clamp() so it scales gracefully on mobile. */
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
  margin-bottom: 18px;
  line-height: 1.1;
}

/* Dolphin brand card — sits between the welcome title and the welcome
   sub-copy. The PNG already has a dark navy background that matches
   the page, so no inversion filter is applied. */
.welcome-dolphin {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto 22px;
  border-radius: 14px;
}

/* Bottom copyright on the opening view — lives inside #welcome-message
   so it disappears together with the rest of the welcome content as
   soon as the user sends a message. */
.welcome-copyright {
  margin-top: 36px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--fh-tracking-wide, 0.06em);
  text-transform: uppercase;
  color: var(--fh-text-secondary, var(--muted-dark));
}

/* FH gold diamond divider — the brand section break used as a
   standalone element. Built entirely in CSS per the brand spec:
   two horizontal gold lines flanking a centered diamond. */
.fh-divider {
  display: block;
  width: min(360px, 60%);
  height: 12px;
  margin: 6px auto 12px;
  background:
    linear-gradient(
      to right,
      transparent,
      var(--fh-accent-gold, #B8960C) 12%,
      var(--fh-accent-gold, #B8960C) 47%,
      transparent 49%,
      transparent 51%,
      var(--fh-accent-gold, #B8960C) 53%,
      var(--fh-accent-gold, #B8960C) 88%,
      transparent
    ) center/100% 1px no-repeat,
    radial-gradient(
      circle at 50% 50%,
      var(--fh-accent-gold, #B8960C) 0 4px,
      transparent 5px
    ) center / 12px 12px no-repeat;
}

.welcome-sub {
  font-size: 14px;
  text-align: left;
  max-width: 460px;
  margin: 0 auto;
  color: var(--muted-dark);
}


/* Messages */
.messages {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.message-row { width: 100%; }

.message-content {
  max-width: 880px;
  padding: 14px 0;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-left: 6px;
  overflow: hidden;       /* clips corners */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.message-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills + crops */
  display: block;
}

.message-avatar.user { background: var(--accent); }
.message-avatar.bot { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }

.message-text {
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Bot row background */
.message-row.bot { background: rgba(15,23,42,0.6); }



/* ==========================================================================
   7) REFERENCES
   ========================================================================== */
/* Wrapper / container */
.references-wrapper {
  background: rgba(0,0,0,0.8);
}


.references-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 10px 16px 12px;
}

.references-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.references-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-dark);
}


.references-count {
  font-size: 11px;
  color: var(--muted-dark);
}


/* Grid */
.references-grid,
#references-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

/* Individual card */
.ref-foundon {
  pointer-events: auto;
  cursor: pointer;
  display: inline-block;
  text-decoration: underline;
}

.ref-card {
  box-sizing: border-box;
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.5);
  background: rgba(15,23,42,0.95);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;

  /* Prevent visual spill, but do NOT disable clicks */
  overflow: hidden;
}


/* Header row (top of card) */
.ref-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

/* If title is still present in DOM, hide it (you said: no titles) */
.ref-title {
  display: none;
}

/* Right side cluster (URL + badge + comment icon) */
.ref-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

/* ✅ Green clickable URL (top-right). This is your new header link. */
.ref-url {
  color: #22c55e;
  text-decoration: none;
  font-size: 12px;
  font-family: var(--font-mono-ui, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  line-height: 1.2;

  /* Avoid layout break with long URLs */
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
.ref-url:hover {
  color: #4ade80;
  text-decoration: underline;
  text-underline-offset: 2px;
}



/* Source badge */
.ref-badge {
  padding: 8px;
  border-radius: 999px;
  background: rgba(138,115,175,0.2);
  color: #bbf7d0;
  font-size: 12px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  user-select: none;

  /* clickable feel */
  text-decoration: none;  /* important if it becomes <a> */
  cursor: default;
}

.ref-badge[href] {
  cursor: pointer;        /* only when it's an <a> */
}

.ref-badge[href]:hover {
  background: rgba(5,150,105,0.32);
  filter: brightness(1.05);
}






/* Comment icon alignment safety */
.comment-btn {
  flex-shrink: 0;
}

/* Snippet text (inside card) */
.ref-snippet {
  color: var(--muted-dark);
  font-size: 13px;
  line-height: 1.45;

  /* Make sure long tokens don't create horizontal scroll */
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* Links inside snippets (from linkifyPlainUrls + sanitizer) */
.ref-snippet a {
  color: #a7f3d0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.ref-snippet a:hover {
  opacity: 0.9;
}


/* Empty state */
.references-empty {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted-dark);
}


/* Chat container — fills remaining flex space below the top-anchored
   logo + input bar. We deliberately do NOT set min-height: 80vh here:
   the input bar is no longer pinned to the bottom of the viewport, so
   forcing chat-container tall would push the welcome content past the
   fold for no reason. */
/* ==========================================================================
   8) INPUT AREA
   ========================================================================== */
.input-wrapper {
  background: linear-gradient(
    to top,
    rgba(138, 115, 175, 0.85),
    rgba(138, 115, 175, 0.0)
  );
}

/* When the input bar sits at the top of the main column (immediately
   below the persistent header), the gradient should fade DOWN into the
   page content rather than UP from the page bottom. Padding is kept
   tight so the chat bar pulls up close to the brand row. The input
   wrapper is also lifted above the absolutely-positioned dolphin logo
   so the textarea is never visually obscured if the dolphin extends
   downward into this row. */
.input-wrapper--top {
  background: linear-gradient(
    to bottom,
    rgba(138, 115, 175, 0.85),
    rgba(138, 115, 175, 0.0)
  );
  padding-top: 2px;
  padding-bottom: 8px;
  position: relative;
  z-index: 3;
}

/* ─ Main hero (persistent header strip above the input bar) ──────────────
   Layout:
     [ small FH-monogram + "Field Harmonix" wordmark ]    [ dolphin logo ]
   The dolphin is absolutely positioned in the top-right corner so its
   extra visual height does not push the chat input down. The hero strip
   itself is short — just tall enough to hold the brand row — which
   pulls the chat bar high up the viewport. */
.main-hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 16px 4px;
  min-height: 56px;
}

.main-hero-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Above the dolphin in stacking order, in case they ever overlap. */
  position: relative;
  z-index: 2;
  /* The lockup is an <a> home link back to the welcome screen. */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity var(--fh-transition-fast);
}
.main-hero-brand:hover { opacity: 0.78; }
.main-hero-brand:focus-visible {
  outline: 2px solid var(--fh-accent-gold);
  outline-offset: 3px;
  border-radius: var(--fh-radius-sm);
}

/* Active-mode indicator at the right edge of the header strip. The brand
   lockup on the left sits behind the fixed sidebar when it's open, so
   the mode label lives on the right where it's always visible — a small
   gold FH diamond followed by the mode name in serif italic. */
.main-hero-mode {
  margin-left: auto;
  margin-right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 12px;
  border: 1px solid var(--fh-gold-border);
  border-radius: 999px;
  background: rgba(184, 150, 12, 0.06);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--fh-accent-gold);
  white-space: nowrap;
}
.main-hero-mode-mark {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--fh-accent-gold);
  transform: rotate(45deg);
}

/* Mobile header active-mode badge — tracked small caps under the brand. */
.mobile-title-mode {
  display: inline-block;
  margin-left: 6px;
  padding-left: 8px;
  border-left: 1px solid var(--fh-gold-border-strong);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  color: var(--fh-accent-gold);
}

.main-hero-brand-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fh-gold-border-strong);
}

.main-hero-brand-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.main-hero-brand-text {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  color: var(--fh-text-primary);
  letter-spacing: -0.005em;
  line-height: 1;
}

/* (Removed: .main-hero-logo. The dolphin brand card is now displayed
   inside the welcome block; nothing sits in the top-right corner of
   the main-hero anymore.) */

@media (max-width: 767px) {
  .main-hero {
    padding: 8px 12px 4px;
    min-height: 48px;
  }
  .main-hero-brand-icon {
    width: 32px;
    height: 32px;
  }
  .main-hero-brand-text {
    font-size: 16px;
  }
}




.input-inner {
  max-width: 880px;
  margin: 0 auto;
}

/* On very wide screens, cap to 50% of viewport width */
@media (min-width: 1280px) {
  .input-inner {
    max-width: min(880px, 56vw);
  }
}

.input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.input-area-wrap {
  position: relative;
  flex: 1;
}

/* Tools button (inset inside textarea) */
.tools-button {
  border-radius: 48px;
  background: rgba(15,23,42,0.95);
  color: var(--text-dark);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}


/* Make tools button behave like an inset control */
.tools-button--inset {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  z-index: 4;
}
/* Unified hover behavior (dark + light) */
.tools-button--inset:hover {
  background: var(--accent);
  color: #fff;
}

/* Explicit light-mode override (same result, higher specificity) */


/* Normalize tools button visuals */
.tools-button,
.tools-button--inset {
  border: none;
  outline: none;
  box-shadow: none;
  background-clip: padding-box;
}

/* Prevent “tan arc” blobs from tools popup */
.tools-popup {
  overflow: hidden;
  isolation: isolate; /* keeps child z-index stacking contained */
}

/* If a decorative pseudo-element exists, kill it */
.tools-popup::before,
.tools-popup::after {
  content: none !important;
  display: none !important;
}

/* If it’s a drop-shadow creating a huge colored arc */
.tools-popup {
  filter: none !important;
}

/* ----- Tools row layout (label + control) ----- */
.tools-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.tools-row-text {
  min-width: 0;
}

.tools-row--stack {
  display: block;
  gap: 14px;
}

.tools-row--stack .tools-row-text {
  margin-bottom: 8px;
}

.tools-select--full {
  display: block;
  width: 100%;
  min-width: 0;
}

.tools-row-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}


/* ----- Tools select (dropdown) ----- */
.tools-select {
  flex: 0 0 auto;
  min-width: 96%;
  height: 32px;
  padding: 0 34px 0 12px; /* room for caret */
  border-radius: 999px;

  background: rgba(15,23,42,0.95);
  color: rgba(148,163,184,0.9);

  border: 1px solid rgba(148,163,184,0.25);
  outline: none;

  font-size: 13px;
  font-weight: 600;
  line-height: 32px;

  cursor: pointer;

  /* Remove native styling differences where possible */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Custom caret */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 13px,
    calc(100% - 13px) 13px,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;

  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tools-select option {color: var(--accent)} 

/* Hover */
.tools-select:hover {
  border-color: rgba(148,163,184,0.45);
}

/* Focus ring */
.tools-select:focus-visible {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.35);
  border-color: rgba(99,102,241,0.8);
}

/* Light mode */




/* ----- Toggle switch ----- */
.toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

/* Hide the checkbox but keep it accessible */
.toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The pill */
.toggle-track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: rgba(148,163,184,0.25); /* slate-ish in dark */
  border: 1px solid rgba(148,163,184,0.25);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The knob */
.toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  transition: transform 0.15s ease;
}

/* ON state */
.toggle-input:checked + .toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.toggle-input:checked + .toggle-track::after {
  transform: translateX(18px);
}

/* Focus ring (keyboard) */
.toggle-input:focus-visible + .toggle-track {
  box-shadow: 0 0 0 3px rgba(99,102,241,0.35);
}

/* Hobbit knob-row: two tiny numeric dials for retrieval/prompt experiments */
.tools-compact-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.tools-mini-field {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px;

  padding: 4px;

  border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
  border-radius: 12px;
  background: var(--surface-soft, rgba(148, 163, 184, 0.08));
  overflow: hidden;
}

.tools-mini-field span {
  min-width: 0;
  max-width: 100%;

  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-muted, #64748b);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tools-number {
  box-sizing: border-box;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 30px;

  padding: 2px 4px;

  border: 1px solid var(--border, rgba(148, 163, 184, 0.4));
  border-radius: 9px;
  background: var(--surface, #fff);
  color: var(--text, #0f172a);

  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.tools-number:focus {
  outline: none;
  border-color: var(--violet-main, #8a73af);
  box-shadow: 0 0 0 3px rgba(138, 115, 175, 0.18);
}

.tools-help--tight {
  margin-top: 7px;
}

@media (max-width: 420px) {
  .tools-compact-pair {
    gap: 8px;
  }

  .tools-mini-field {
    padding: 7px 8px;
  }

  .tools-mini-field span {
    font-size: 0.72rem;
  }

  .tools-number {
    width: 42px;
  }
}

/* Light mode tuning */



.chat-input {
  width: 100%;
  overflow-y: hidden;
  border-radius: 48px;
  border: 1px solid rgba(148,163,184,0.7);
  padding: 18px 40px 18px 50px; /* ✅ left padding makes room for tools button */
  font-size: 24px;
  font-family: var(--font-mono-ui);
  letter-spacing: 0.04em;
  background: rgba(15,23,42,0.95);
  color: var(--text-dark);
  resize: none;
  max-height: 140px;
  outline: none;
}


/* Send button inside the textarea */
.send-button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  font-weight: bold;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
}
.send-button:disabled {
  background: var(--hover);
  cursor: not-allowed;
}
.send-button:hover { background: var(--panel-muted-dark); }

/* Input note row: keep helper text centered and actions on right */
.input-note {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted-dark);
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  gap: 10px;
}


/* --- Status-enhanced note text (additive, non-breaking) --- */

.note-text {
  display: inline-flex;          /* replaces implicit inline text flow */
  align-items: center;
  justify-content: center;       /* preserves centered appearance */
  gap: 8px;                      /* space between spinner + text */
}

/* Spinner (hidden by default) */
.note-spinner {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  opacity: 0;
  flex: 0 0 auto;                /* never stretch */
  visibility: hidden;
  animation: fh-spin 0.8s linear infinite;
  transition: opacity 120ms ease, visibility 0s linear 120ms;
  color: #555;
}

/* Show spinner only when busy */
.note-text.is-busy .note-spinner {
  opacity: 0.9;
  visibility: visible;
  transition-delay: 0s;
}

/* Text wrapper (no visual change) */
.note-message {
  white-space: nowrap;           /* prevents reflow jitter */
}

/* Spinner animation */
@keyframes fh-spin {
  to { transform: rotate(360deg); }
}


.note-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Blinking typing cursor inside bot message */
.typing-cursor {
  display:inline-block;
  width:0.6ch;
  margin-left:2px;
  animation:fh-blink 1s steps(1,end) infinite;
  opacity:1;
  transform: translateY(1px);
}

@keyframes fh-blink {
  50%{ opacity:0; }
}

/* Optional: smoother mono-ish feel for streaming */
.msg-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.msg-actions,
.ab-actions {
  display: flex;
  align-items: center;
  gap: 0px;  
}

/* ==========================================================================
   9) TOOLS POPUP
   ========================================================================== */
.tools-popup {
  position: absolute;
  /* Opens DOWNWARD from just below the input bar. The chat bar now
     sits near the top of the viewport (after the layout refresh that
     moved the input above the chat content), so the previous upward
     anchor (`bottom: 50px`) would clip off the top of the screen. */
  top: calc(100% + 6px);
  left: 0;
  width: 260px;
  background: rgba(15,23,42,0.96);
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,0.6);
  padding: 8px;
  font-size: 12px;
  display: none;
  z-index: 20;

  /* Cap height + allow internal scroll, so a tall popup never runs
     past the bottom of the chat area on short viewports. */
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

.tools-popup.visible { display: block; }

.tools-popup-item {
  padding: 6px;
  border-radius: 8px;
  cursor: default;
}
.tools-popup-item:hover { background: rgba(148,163,184,0.2); }

.tools-popup-item-title {
  font-weight: 600;
  margin-bottom: 2px;
}
.tools-popup-item-sub {
  color: var(--muted-dark);
  font-size: 11px;
}


/* Tools panel sections */
.tools-section { padding: 6px; }
.tools-section-title { font-weight: 700; font-size: 12px; margin-bottom: 6px; }

.tools-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.tools-value {
  font-size: 12px;
  color: var(--muted-dark);
}


.tools-range { width: 100%; }

.tools-help {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted-dark);
  line-height: 1.35;
}


.tools-divider {
  height: 1px;
  margin: 6px 6px;
  background: rgba(148,163,184,0.35);
}


/* Tools-popup ACTIONS section — text buttons that replaced the old
   save / trash icons. Two stacked, full-width menu-item-style buttons:
   "Save chat" (primary) and "New chat" (--quiet variant for the
   destructive action). Styled in the FH register: uppercase, tracked,
   thin gold border on the primary, subtler treatment on the quiet one. */
.tools-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tools-action-btn {
  display: block;
  width: 100%;
  padding: 9px 12px;

  background: transparent;
  color: var(--fh-text-primary, #FFFFFF);
  border: 1px solid var(--fh-gold-border-strong, rgba(184, 150, 12, 0.55));
  border-radius: 8px;

  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--fh-tracking-wide, 0.06em);
  text-transform: uppercase;
  text-align: left;

  cursor: pointer;
  transition:
    background var(--fh-transition-fast, 150ms ease),
    border-color var(--fh-transition-fast, 150ms ease),
    color var(--fh-transition-fast, 150ms ease);
}

.tools-action-btn:hover {
  background: rgba(184, 150, 12, 0.08);
  border-color: var(--fh-gold-bright, #D4B441);
  color: var(--fh-gold-bright, #D4B441);
}

.tools-action-btn:focus-visible {
  outline: 2px solid var(--fh-accent-gold, #B8960C);
  outline-offset: 2px;
}

/* Quieter variant — used for "New chat" (the clear-chat action).
   No border by default, so the destructive option doesn't compete with
   the primary save action. The hover state matches the primary button
   so it's still discoverable. */
.tools-action-btn--quiet {
  border-color: transparent;
  color: var(--fh-text-secondary, #A8C0E8);
}


/* Segmented control */
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.segmented input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.segmented label {
  border: 1px solid rgba(148,163,184,0.6);   /* add a real border */
  border-radius: 10px;
  position: relative;
  padding: 8px 8px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  background: rgba(148,163,184,0.12);
  color: inherit;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* selected */
.segmented input:checked + label {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* hover */
.segmented label:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* UI bump */
.segmented input:focus-visible + label {
  outline: 2px solid rgba(5,150,105,0.35);
  outline-offset: 2px;
}


/* Slider customize */
/* Slider customize (safe in Chrome/Safari/Firefox) */
.tools-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 16px;       /* gives room for thumb */
  background: transparent;
  outline: none;
  padding: 0;
  margin: 0;
}

/* Track */
.tools-range::-webkit-slider-runnable-track {
  height: 6px;
  background: rgba(148,163,184,0.4);
  border-radius: 999px;
}
.tools-range::-moz-range-track {
  height: 6px;
  background: rgba(148,163,184,0.4);
  border-radius: 999px;
}

/* Filled portion (Firefox supports this directly) */
.tools-range::-moz-range-progress {
  height: 6px;
  background: var(--accent);
  border-radius: 999px;
}

/* Thumb */
.tools-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  box-shadow: none;     /* ✅ important: removes the giant blob */
  cursor: pointer;
  margin-top: -5px;     /* centers thumb on 6px track */
}
.tools-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

.tools-range:focus { outline: none; }

/* WebKit fill using background gradient on the range element */
.tools-range {
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--fill, 0%),
    rgba(148,163,184,0.4) var(--fill, 0%),
    rgba(148,163,184,0.4) 100%
  );
  border-radius: 999px;
  height: 6px;
}


/* Tools "+" glyph */
.tools-plus {
  font-size: 24px;
  color: var(--accent);
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px); /* optical centering */
}
.tools-plus:hover { color: #ffffff; }


/* ==========================================================================
   10) RECENT CONVERSATIONS LIST
   ========================================================================== */
.recent-item.muted { opacity: 0.8; }

.recent-preview {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
}
.recent-preview:hover {
  background: rgba(148,163,184,0.12);
  border-color: rgba(148,163,184,0.35);
}


.recent-preview-title {
  font-weight: 650;
  font-size: 13px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-preview-sub {
  font-size: 11px;
  color: var(--muted-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.recent-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.recent-preview-content {
  min-width: 0;
  flex: 1;
}

.recent-delete {
  border: none;
  background: transparent;
  color: #6b7280; /* dark gray */
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.recent-delete:hover {
  background: rgba(148,163,184,0.25);
  color: #374151;
}




/* ==========================================================================
   11) INPUT NOTE + ICON BUTTONS + TOOLTIP
   ========================================================================== */
/* Input note layout */
.input-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted-dark);
}



/* Center the note text visually across the full row */
.note-text {
  flex: 1;                 /* takes remaining space */
  text-align: center;
  padding-left: 44px;      /* reserve space so text stays centered despite right icons */
  padding-right: 44px;     /* symmetrical reserve */
}

/* Keep icons pinned to the far right */
.note-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}


.note-spacer {
  justify-self: start;
}

/* Shared icon button */
.icon-btn {
  position: relative; /* required for tooltip positioning */
  border: none;
  background: transparent;
  padding: 0;
  line-height: 1;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-dark);
}


.icon-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Save button stroke weight tweak */
.icon-btn--ghost svg { stroke-width: 2.6; }
.icon-btn--ghost svg { transform: translateY(1px); }

/* SAVE: transparent background always, but highlight on hover */
.icon-btn--ghost:hover {
  background: rgba(148,163,184,0.20);
  color: #111827;
}


/* TRASH: red accent */
.icon-btn--danger { color: #ef4444; }
.icon-btn--danger:hover {
  background: rgba(239,68,68,0.14);
  color: #dc2626;
}


/* Tooltip (uses data-tooltip) */
.has-tooltip {
  position: relative; /* required for positioning */
}

/* Tooltip bubble */
.has-tooltip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 650;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(15,23,42,0.96);
  color: var(--text-dark);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 200;
}


/* Tooltip caret */
.has-tooltip[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, 0) rotate(225deg);
  background: rgba(15,23,42,0.96);
  border-left: 1px solid rgba(148,163,184,0.55);
  border-top: 1px solid rgba(148,163,184,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 199;
}


/* Show on hover + keyboard focus */
.has-tooltip:hover::after,
.has-tooltip:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.has-tooltip:hover::before,
.has-tooltip:focus-visible::before {
  opacity: 1;
}

/* Accessible focus ring */
.has-tooltip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(5,150,105,0.25);
}

/* (Legacy) trash button style — kept as-is */
.trash-chat-btn {
  border: none;
  background: transparent;
  margin-left: auto;
  color: #ef4444; /* red */
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
  display: inline-flex;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.trash-chat-btn:hover {
  background: rgba(239,68,68,0.12);
  color: #dc2626;
}



/* ==========================================================================
   12) MODALS (CONFIRM/ALERT)
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.55);
  z-index: 10000;
}
.modal-overlay.show { display: flex; }

.modal {
  width: min(520px, 100%);
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(15,23,42,0.98);
  color: var(--text-dark);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}


.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148,163,184,0.35);
}

.modal-title {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.modal-close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 8px;
}
.modal-close:hover { background: rgba(148,163,184,0.18); }

.modal-message {
  padding: 14px;
  font-size: 24px;
  font-family: var(--font-mono-ui);
  letter-spacing: 0.03em;
  line-height: 1.15;
  color: var(--muted-dark);
}


.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px 14px;
}

.modal-btn {
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(148,163,184,0.12);
  color: inherit;
}

.modal-btn:hover { background: rgba(148,163,184,0.22); }

.modal-btn.primary {
  border-color: rgba(5,150,105,0.75);
  background: rgba(5,150,105,0.18);
}
.modal-btn.primary:hover { background: rgba(5,150,105,0.26); }

.modal-btn.danger {
  border-color: rgba(239,68,68,0.75);
  background: rgba(239,68,68,0.14);
}
.modal-btn.danger:hover { background: rgba(239,68,68,0.22); }

/* ==========================================================================
   ABOUT MODAL
   ========================================================================== */
.about-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.55);
  z-index: 11000;
}
.about-overlay.show { display: flex; }

.about-modal {
  width: min(860px, 96vw);
  max-height: 90vh;
  border: 1px solid rgba(148,163,184,0.55);
  border-radius: 16px;
  background: rgba(15,23,42,0.98);
  color: var(--text-dark);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}



.about-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  z-index: 5;              /* ensure above content */
  pointer-events: auto;
}
.about-close:hover { background: rgba(148,163,184,0.18); }

.about-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  flex: 1 1 auto;            /* fill modal vertically */
  overflow-y: auto;
}

.about-left {
  background: var(--bk-gray);
  display: flex;
  align-items: center;   /* vertical center */
  justify-content: center;
  padding: 22px;
}

.about-image {
  max-width: 100%;
  height: auto;
  display: block;
}

.about-right {
  padding-left: 22px;
  padding-right: 6px;
  display: flex;
  flex-direction: column;
  min-height: 0; /* critical for scroll containers */
}

.about-title {
  margin: 0 0 10px 0;
  font-family: "Stack Sans Notch", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  position: sticky;
  top: 0;
  z-index: 2;

  /* visual polish */
  background: inherit;
  padding-top: 22px;
}

.about-body {
  font-family: "Computer Says No", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 24px;
  line-height: 1.05;
  color: var(--muted-dark);
  flex: 1 1 auto;          /* fills remaining height */
  overflow-y: auto;        /* only this scrolls */
  padding-right: 8px;
  mask-image: linear-gradient(to bottom, black 85%, transparent 100%);  
}



/* Mobile: stack columns */
@media (max-width: 720px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-left { padding: 18px; }
  .about-right { padding: 18px; }
  .about-title { font-size: 26px; }
}

/* ==========================================================================
   13) FEEDBACK UI (COMMENT ICON + FEEDBACK MODAL + TOAST)
   ========================================================================== */
/* Comment icon button (per message / reference) */
.comment-btn {
  border: none;
  background: transparent;
  padding: 4px 6px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}
.comment-btn:hover {
  background: rgba(148,163,184,0.18);
  color: #111827;
}

.comment-btn svg { display: block; }

/* Place comment icon in bot message rows */
.msg-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0px;
  flex-shrink: 0;
}

/* Feedback modal overlay */
.fb-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0.55);
  z-index: 12000;
}
.fb-overlay.show { display: flex; }

.fb-modal {
  width: min(560px, 100%);
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(15,23,42,0.98);
  color: var(--text-dark);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}


.fb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148,163,184,0.35);
}
.fb-title { font-weight: 800; font-size: 14px; }

.fb-close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 8px;
}
.fb-close:hover { background: rgba(148,163,184,0.18); }

.fb-body { padding: 14px; }

.fb-meta {
  font-size: 11px;
  color: var(--muted-dark);
  margin-bottom: 10px;
  line-height: 1.35;
}


.fb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.fb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
}
.fb-field span { font-weight: 700; }

.fb-field input,
.fb-field textarea {
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(148,163,184,0.10);
  color: inherit;
  padding: 10px 10px;
  font-size: 13px;
  outline: none;
}


.fb-field input:focus,
.fb-field textarea:focus {
  border-color: rgba(5,150,105,0.75);
  box-shadow: 0 0 0 2px rgba(5,150,105,0.20);
}

.fb-field-full { grid-column: 1 / -1; }
.fb-field textarea { resize: vertical; }

.fb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(148,163,184,0.35);
}

.fb-btn {
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(148,163,184,0.12);
  color: inherit;
}


.fb-btn.primary {
  border-color: rgba(5,150,105,0.75);
  background: rgba(5,150,105,0.18);
}
.fb-btn.primary:hover { background: rgba(5,150,105,0.26); }

/* Thanks toast */
.fb-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(255,255,255,0.92);
  color: #020617;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 13000;
}
.fb-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}
.fb-check {
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ==========================================================================
   14) AB TEST LAYOUT 
   ========================================================================== */


/* Forces refs to start below first screen */
#chat-container { min-height: 80vh; }

.comment-btn { flex-shrink: 0; }

#references-container {
  display: grid;
  grid-template-columns: 1fr;
}

/* Sidebar open button (duplicated in your original; kept) */
.sidebar-open-btn {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 99999; /* very high so it’s clickable */
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(15,23,42,0.95);
  color: var(--text-dark);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

body.sidebar-collapsed .sidebar-open-btn {
  display: inline-flex;
}

/* A/B response layout */
.ab-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
}

.ab-panel {
  border: 1px solid rgba(148,163,184,0.45);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(148,163,184,0.08);
}

.ab-label {
  font-size: 11px;
  font-weight: 800;
  opacity: 0.85;
  margin-bottom: 6px;
}

/* A/B panel header/footer rows */
.ab-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ab-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ab-footer {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* Select button (match your UI vibe) */
.ab-select-btn {
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid rgba(148,163,184,0.55);
  background: rgba(148,163,184,0.12);
  color: inherit;
}

.ab-select-btn { background: rgba(148,163,184,0.18); }

/* hover */
.ab-select-btn:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Selected state */
.ab-panel.selected {
  border-color: rgba(5,150,105,0.85);
  background: rgba(5,150,105,0.12);
}
.ab-panel.selected .ab-select-btn {
  border-color: rgba(5,150,105,0.85);
  background: rgba(5,150,105,0.18);
}
.ab-panel.selected .ab-select-btn:hover {
  background: rgba(5,150,105,0.24);
}

/* Fullscreen overlay, does not capture clicks */
#click-distort {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* The circular "lens" we spawn */
.click-lens {
  position: absolute;
  width: 180px;
  height: 180px;
  margin-left: -90px;
  margin-top: -90px;
  border-radius: 999px;
  overflow: hidden;

  /* Frosted lens look (optional but helps sell distortion) */
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);

  /* The actual distortion */
  filter: url(#fh-displace);

  /* Fade + scale */
  transform: scale(0.95);
  opacity: 0;
  transition: opacity 160ms ease, transform 220ms ease;
}

/* Visible state */
.click-lens.on {
  opacity: 1;
  transform: scale(1);
}

/* Shockwave ring */
.click-ring {
  position: absolute;
  width: 180px;
  height: 180px;
  margin-left: -90px;
  margin-top: -90px;
  border-radius: 999px;
  border: 2px solid currentColor;
  opacity: 0.05;
  transform: scale(0.6);
  transition: transform 420ms ease, opacity 420ms ease;
}

/* Expand ring */
.click-ring.on {
  transform: scale(1.25);
  opacity: 0;
}


/* ==========================================================================
   15) MOBILE HEADER + OVERLAY BASE (NON-MEDIA-QUERY PARTS)
   ========================================================================== */
/* Mobile */
.mobile-header { display: none; }


/* ==========================================================================
   16) MEDIA QUERIES (ALL GROUPED HERE)
   ========================================================================== */

/* Sidebar collapse button hidden below this width */
@media (max-width: 900px) {
  #sidebar .sidebar-collapse-btn { display: none; }
  .sidebar-collapse-btn { display:none; }
}

/* Feedback grid single column */
@media (max-width: 520px) {
  .fb-grid { grid-template-columns: 1fr; }
}


/* A/B wrap becomes 2 columns on wider screens */
@media (min-width: 860px) {
  .ab-wrap { grid-template-columns: 1fr 1fr; }

  #references-container {
    grid-template-columns: 1fr; 
  }
}

/* Mobile sidebar + overlay behavior */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
    z-index: 30;
  }

  .sidebar.visible { transform: translateX(0); }

  .main { position: relative; }

  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(0,0,0,0.9);
    border-bottom: 1px solid rgba(148,163,184,0.4);
  }

  

  .mobile-title {
    font-size: 14px;
    font-weight: 600;
  }

  .mobile-menu-btn {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
  }

  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 25;
    display: none;
  }

  .overlay.visible { display: block; }
}


/* ==========================================================================
   FH THEME OVERRIDES — Field Harmonix design language
   --------------------------------------------------------------------------
   Loaded last so it wins specificity ties against the legacy theme rules
   above. Adds the FH signature touches: navy surfaces with gold accents,
   Cormorant Garamond for headings, diamond markers, teal-bordered buttons,
   and refined hover states.
   ========================================================================== */

/* ── Typography refinements ────────────────────────────────────────────── */
body {
  background: var(--fh-bg);
  color: var(--fh-text-primary);
}



.brand-title,
.welcome-title,
.references-title,
.modal-title,
.fb-title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.brand-subtitle,
.sidebar-section-title,
.status-label,
.welcome-sub {
  font-family: var(--font-body);
  letter-spacing: var(--fh-tracking-wide);
}

.sidebar-section-title {
  text-transform: uppercase;
  font-size: 11px;
  color: var(--fh-accent-gold);
  letter-spacing: var(--fh-tracking-wider);
}



/* ── Surfaces ──────────────────────────────────────────────────────────── */
.sidebar {
  background: linear-gradient(180deg, #00050F 0%, var(--fh-bg) 100%);
  border-right: 1px solid var(--fh-gold-border);
}



.main {
  background: var(--fh-bg);
}



/* ── Brand mark ────────────────────────────────────────────────────────── */
.brand-icon {
  border: 1px solid var(--fh-gold-border-strong);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset, 0 6px 18px rgba(184, 150, 12, 0.18);
}

.brand-title,
.brand-title-btn {
  color: var(--fh-text-primary);
}



.brand-subtitle {
  color: var(--fh-text-secondary);
  text-transform: uppercase;
  font-size: 10.5px;
}



/* ── Status row (sidebar) ──────────────────────────────────────────────── */
.status-panel {
  border: 1px solid var(--fh-gold-border);
  background: var(--fh-surface-alpha);
  border-radius: var(--fh-radius-sm);
  padding: 10px 12px;
}



.status-dot {
  box-shadow: 0 0 8px currentColor;
}

.status-chip {
  font-family: var(--font-body);
  letter-spacing: var(--fh-tracking-wide);
  text-transform: uppercase;
  font-size: 10px;
  border: 1px solid var(--fh-gold-border-strong);
  border-radius: 999px;
  padding: 2px 8px;
}

/* ── "Recent" + sidebar pills ──────────────────────────────────────────── */
.pill-button {
  background: rgba(26, 122, 138, 0.18);
  color: #BFEFF7;
  border: 1px solid rgba(26, 122, 138, 0.40);
  border-radius: var(--fh-radius-sm);
  font-family: var(--font-body);
  letter-spacing: var(--fh-tracking-wide);
}

.pill-button:hover {
  background: var(--fh-highlight-teal);
  color: var(--fh-text-primary);
}



.recent-item {
  border: 1px solid transparent;
  transition: background var(--fh-transition-fast), border-color var(--fh-transition-fast), color var(--fh-transition-fast);
}

.recent-item:hover {
  background: rgba(184, 150, 12, 0.08);
  border-color: var(--fh-gold-border);
  color: var(--fh-gold-bright);
}

/* Sidebar links: gold hover (was viola) */
.sidebar a:hover {
  color: var(--fh-gold-bright);
}

/* "violet-highlight" spans → FH bright gold */
#violet-highlight {
  color: var(--fh-gold-bright);
}

/* ── Welcome screen ───────────────────────────────────────────────────── */
.welcome-title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  background: linear-gradient(180deg, #FFFFFF 0%, #E0D5A8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}



.welcome-sub {
  color: var(--fh-text-secondary);
}



/* Diamond divider directly under the welcome title */
.welcome::after {
  content: "";
  display: block;
  margin: 18px auto 0;
  width: 220px;
  height: 12px;
  background:
    linear-gradient(to right, transparent, var(--fh-accent-gold) 12%, var(--fh-accent-gold) 47%, transparent 49%, transparent 51%, var(--fh-accent-gold) 53%, var(--fh-accent-gold) 88%, transparent) center/100% 1px no-repeat,
    radial-gradient(circle at 50% 50%, var(--fh-accent-gold) 0 4px, transparent 5px) center / 12px 12px no-repeat;
}

/* ── Messages / chat bubbles ──────────────────────────────────────────── */
.message-text {
  font-family: var(--font-body);
}

.message-row .message-text {
  border: 1px solid transparent;
}

.message-row.user .message-text {
  background: linear-gradient(180deg, rgba(184, 150, 12, 0.10) 0%, rgba(184, 150, 12, 0.04) 100%);
  border-color: var(--fh-gold-border);
  border-radius: var(--fh-radius-lg);
  padding: 14px 18px;
}

.message-row.assistant .message-text {
  background: var(--fh-surface);
  border-color: var(--fh-gold-border);
  border-radius: var(--fh-radius-lg);
  padding: 14px 18px;
}





/* ── References panel ─────────────────────────────────────────────────── */
.references-title {
  color: var(--fh-text-primary);
  text-transform: none;
  letter-spacing: 0;
}



.ref-card {
  background: var(--fh-surface);
  border: 1px solid var(--fh-gold-border);
  border-radius: var(--fh-radius-lg);
  transition: border-color var(--fh-transition-fast), transform var(--fh-transition-fast);
}

.ref-card:hover {
  border-color: var(--fh-gold-border-strong);
  transform: translateY(-1px);
}



.ref-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--fh-text-primary);
}



.ref-url {
  color: var(--fh-text-secondary);
  font-size: 12px;
  letter-spacing: var(--fh-tracking-wide);
}

.ref-url:hover { color: var(--fh-gold-bright); }

.ref-badge {
  background: rgba(26, 122, 138, 0.20);
  color: #BFEFF7;
  border: 1px solid rgba(26, 122, 138, 0.40);
  text-transform: uppercase;
  letter-spacing: var(--fh-tracking-wide);
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 8px;
}



/* ── Composer / send button ───────────────────────────────────────────── */
.input-wrapper,
.input-inner,
.composer,
.composer-row {
  background: transparent;
}

.input-inner textarea,
.composer textarea,
textarea[id*="input"],
textarea[id*="message"] {
  background: var(--fh-surface);
  color: var(--fh-text-primary);
  border: 1px solid var(--fh-gold-border-strong);
  border-radius: var(--fh-radius-lg);
  font-family: var(--font-body);
  transition: border-color var(--fh-transition-fast), box-shadow var(--fh-transition-fast);
}

.input-inner textarea:focus,
.composer textarea:focus,
textarea[id*="input"]:focus,
textarea[id*="message"]:focus {
  outline: none;
  border-color: var(--fh-gold-bright);
  box-shadow: 0 0 0 3px rgba(184, 150, 12, 0.18);
}

/* The legacy .chat-input rule sets font-size:24px + tight padding +
   overflow-y:hidden, which clips descenders ("y" in "Harmonix") on the
   first rendered line. Override here with FH-aligned scale and breathing
   room so the placeholder reads cleanly and the input looks intentional
   rather than cramped. The autosize JS still grows the textarea up to
   max-height as the user types longer prompts. */
#chat-input.chat-input {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: 0;
  padding: 18px 56px 18px 56px;
  min-height: 60px;
  max-height: 200px;
  border-radius: 28px;
}



/* Primary buttons (send, ask, etc.) — FH outline style */
.send-btn,
.btn-send,
.ask-btn,
.primary-btn,
button.btn-primary,
button.send {
  background: transparent;
  color: var(--fh-text-primary);
  border: 2px solid var(--fh-highlight-teal);
  border-radius: var(--fh-radius-sm);
  padding: 10px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--fh-tracking-wide);
  text-transform: uppercase;
  transition: background var(--fh-transition-fast), border-color var(--fh-transition-fast), color var(--fh-transition-fast);
  cursor: pointer;
}

.send-btn:hover,
.btn-send:hover,
.ask-btn:hover,
.primary-btn:hover,
button.btn-primary:hover,
button.send:hover {
  background: var(--fh-highlight-teal);
  border-color: var(--fh-highlight-teal);
  color: var(--fh-text-primary);
}

/* Lock / unlock button gets FH gold */
.lock-btn {
  border: 1px solid var(--fh-gold-border-strong);
  background: rgba(184, 150, 12, 0.08);
  color: var(--fh-accent-gold);
  border-radius: var(--fh-radius-sm);
  transition: background var(--fh-transition-fast), color var(--fh-transition-fast);
}

.lock-btn:hover {
  background: var(--fh-accent-gold);
  color: var(--fh-bg);
}

.lock-icon-unlocked { color: var(--fh-glow-green); }

/* ── Modals (about, lock, feedback) ───────────────────────────────────── */
.lock-card,
.modal-card,
.about-modal,
.feedback-modal {
  background: var(--fh-surface);
  border: 1px solid var(--fh-gold-border-strong);
  border-radius: var(--fh-radius-lg);
}



.lock-overlay,
.modal-overlay,
.about-overlay,
.feedback-overlay {
  background: var(--fh-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lock-input {
  background: rgba(0, 0, 0, 0.30);
  color: var(--fh-text-primary);
  border: 1px solid var(--fh-gold-border-strong);
  border-radius: var(--fh-radius-sm);
}

.lock-input:focus {
  outline: none;
  border-color: var(--fh-gold-bright);
  box-shadow: 0 0 0 3px rgba(184, 150, 12, 0.18);
}



/* ── Diamond bullet list (used inside about modal & feature lists) ─── */
.diamond-list,
ul.fh-diamond {
  list-style: none;
  padding-left: 0;
}

.diamond-list li,
ul.fh-diamond li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-family: var(--font-body);
}

.diamond-list li::before,
ul.fh-diamond li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--fh-accent-gold);
  transform: rotate(45deg);
}

/* ── FH gold-and-diamond divider ──────────────────────────────────────── */
.fh-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 540px;
  margin: 24px auto;
}

.fh-divider::before,
.fh-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fh-accent-gold);
  opacity: 0.5;
}

.fh-divider .diamond {
  width: 10px;
  height: 10px;
  background: var(--fh-accent-gold);
  transform: rotate(45deg);
}

/* ── Scrollbars (subtle gold tint instead of generic grey) ───────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--fh-gold-border-strong) transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--fh-gold-border-strong);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--fh-accent-gold);
}

/* ── Selection ────────────────────────────────────────────────────────── */
::selection {
  background: rgba(184, 150, 12, 0.40);
  color: var(--fh-text-primary);
}



/* (Theme toggle override removed in 2026-05 visual rebuild — single dark theme.) */

/* ── About modal: typography refinements ─────────────────────────────── */
.about-title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fh-text-primary);
  margin-bottom: 18px;
}



.about-body p {
  font-family: var(--font-body);
  color: var(--fh-text-secondary);
  line-height: 1.65;
  max-width: 65ch;
}



/* ── Scan-mode buttons (sidebar) ──────────────────────────────────────── */
.scan-mode-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
}

.scan-mode-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 18px 14px;
  background: var(--fh-surface);
  border: 1px solid var(--fh-gold-border);
  border-radius: var(--fh-radius-sm);
  color: var(--fh-text-primary);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--fh-transition-fast),
    background var(--fh-transition-fast),
    color var(--fh-transition-fast),
    transform var(--fh-transition-fast);
}

/* Icon sits at the top, centered. */
.scan-mode-icon {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: transparent;
  /* Belt-and-suspenders: Brave's force-dark image heuristic invertes
     images it considers "mostly dark with thin bright details." These
     are brand assets — never auto-process them. */
  forced-color-adjust: none;
  -webkit-forced-color-adjust: none;
}

.scan-mode-btn:hover {
  border-color: var(--fh-gold-border-strong);
  background: var(--fh-surface-alpha);
}

.scan-mode-btn:focus-visible {
  outline: 2px solid var(--fh-gold-bright);
  outline-offset: 2px;
}

.scan-mode-btn.is-active {
  border-color: var(--fh-highlight-teal);
  box-shadow: 0 0 0 1px var(--fh-highlight-teal) inset;
}

.scan-mode-btn.is-active .scan-mode-title {
  color: var(--fh-accent-gold);
}

.scan-mode-title {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: var(--fh-tracking-wide);
  line-height: 1.2;
  text-align: center;
  color: var(--fh-text-primary);
}

.scan-mode-desc {
  font-family: var(--font-body);
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--fh-text-secondary);
  text-align: center;
  /* Descriptions are short phrases; allow up to 2 lines for the
     "Transformational Playbook" title to wrap without clipping. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}

/* The scan icons have a dark-navy background baked in. Wrap them in a
   matching chip so they read as a deliberate design element in either
   theme — a soft gold border in light mode, none in dark mode. */
.scan-mode-icon {
  border-radius: 4px;
}

/* Stack variant — used by the Run All button to show all three other
   scan icons together inside the standard icon slot. The slot widens
   to ~3× the single-icon width so each tile can match the 44px size
   used by the QuickScan / DeepScan / Playbook buttons. */
.scan-mode-icon--stack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  height: 44px;
  max-width: 100%;
  background: transparent;
}

.scan-mode-icon-tile {
  display: block;
  /* Match the 44px size of the single icon on the other scan-mode
     buttons so the Run All option reads as visually equivalent. */
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 4px;
  background: transparent;
  /* Same Brave force-dark guard as .scan-mode-icon — these are brand
     assets, never auto-process them. */
  forced-color-adjust: none;
  -webkit-forced-color-adjust: none;
}

/* ── Dark mode (default) tweaks ────────────────────────────────────────
   The sidebar background is #000, so the default --fh-surface (#001A4A)
   gives reasonable separation. Boost the active state's inset glow so
   selection reads clearly without enlarging the button. */
.scan-mode-btn.is-active {
  background: var(--fh-surface);
  box-shadow: 0 0 0 1px var(--fh-highlight-teal) inset, 0 0 12px rgba(26, 122, 138, 0.25);
}

/* ── Light mode overrides ──────────────────────────────────────────────
   Mirrors the .ref-card pattern: white surface, dark text, light borders.
   Gold and teal accents (active state, hover) carry over unchanged. */












/* In light mode the icons (dark-navy baked-in) become a small chip on
   white — give them a faint border so they don't read as a hard rectangle. */


/* ============================================================================
   FH visual rebuild — sidebar pass (iteration 1, 2026-05)
   Aligns the sidebar with fh_web/css/global.css component vocabulary:
     • Brand block reads like .nav-brand (Cormorant + tracking-wide)
     • Section titles use the small-caps gold treatment from .small-caps
     • Diamond dividers (.fh-divider) get sidebar-tuned spacing
     • Status panel becomes a card-like surface with gold border
   ============================================================================ */

/* Sidebar-tuned divider: tighter margins so it doesn't dominate a
   narrow sidebar, lower opacity so it reads as connective tissue
   rather than as a hard rule. */
.sidebar .fh-divider {
  margin: 12px 4px;
  max-width: none;
  gap: 8px;
}

.sidebar .fh-divider::before,
.sidebar .fh-divider::after {
  opacity: 0.35;
}

.sidebar .fh-divider .diamond {
  width: 7px;
  height: 7px;
}

/* Brand block — match .nav-brand from fh_web/global.css.
   Cormorant Garamond wordmark, gold subtitle in small-caps. */
.sidebar-header .brand-title,
.sidebar-header .brand-title-btn {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: var(--fh-tracking-wide);
  color: var(--fh-text-primary);
}

.sidebar-header .brand-subtitle {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--fh-tracking-wider);
  text-transform: uppercase;
  color: var(--fh-accent-gold);
  opacity: 0.85;
}

/* Section titles — small-caps gold, matches fh_web's .small-caps utility.
   Tighter top margin so the divider above feels like the section break,
   not the title. */
.sidebar .sidebar-section-title {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--fh-tracking-wider);
  text-transform: uppercase;
  color: var(--fh-accent-gold);
  margin: 4px 4px 10px;
  opacity: 0.92;
}

/* Section-title links (e.g. "Model v9, Dataset Gamma") — keep the
   gold, dial back the underline noise inherited from generic <a>. */
.sidebar .sidebar-section-title a {
  color: inherit;
  border-bottom: 1px dotted rgba(184, 150, 12, 0.4);
  padding-bottom: 1px;
}

.sidebar .sidebar-section-title a:hover {
  color: var(--fh-gold-bright);
  border-bottom-color: var(--fh-gold-bright);
}

/* Recent items list — tighter, gold-tinted hover. */
.sidebar #recent-list .recent-item {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fh-text-secondary);
  padding: 6px 8px;
  border-radius: var(--fh-radius-sm);
  transition: background var(--fh-transition-fast), color var(--fh-transition-fast);
}

.sidebar #recent-list .recent-item:hover {
  background: var(--fh-surface-alpha);
  color: var(--fh-gold-bright);
}

.sidebar #recent-list .recent-item.muted {
  color: var(--fh-text-secondary);
  opacity: 0.55;
  font-style: italic;
}

/* ── Login gate ────────────────────────────────────────────────────────────
   Full-viewport overlay that blocks the app until the user authenticates
   against /api/unlock. Rendered FH-style: deep navy bg, gold border card,
   teal CTA. The body class .auth-required toggles visibility; once the
   client confirms unlocked=true on /api/access (or after a successful
   /api/unlock POST) the class is removed and the app appears. */
.auth-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--fh-bg);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

body.auth-required .auth-screen { display: flex; }
body.auth-required .app          { display: none; }

.auth-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(380px, 100%);
  padding: 28px;
  background: var(--fh-surface);
  border: 1px solid var(--fh-gold-border-strong);
  border-radius: var(--fh-radius-lg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  text-align: center;
}

.auth-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--fh-gold-border-strong);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset, 0 6px 18px rgba(184, 150, 12, 0.18);
}

.auth-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: var(--fh-tracking-wide);
  color: var(--fh-text-primary);
  margin: 0;
}

.auth-subtitle {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--fh-tracking-wider);
  text-transform: uppercase;
  color: var(--fh-accent-gold);
  margin: 0;
  opacity: 0.85;
}

.auth-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--fh-tracking-wider);
  text-transform: uppercase;
  color: var(--fh-text-secondary);
  margin-top: 4px;
}

.auth-input {
  font-family: var(--font-body);
  font-size: 14px;
  width: 100%;
  height: 38px;
  padding: 0 12px;
  background: var(--fh-bg);
  border: 1px solid var(--fh-gold-border);
  border-radius: var(--fh-radius-sm);
  color: var(--fh-text-primary);
  outline: none;
  transition: border-color var(--fh-transition-fast);
}

.auth-input:focus {
  border-color: var(--fh-highlight-teal);
  box-shadow: 0 0 0 1px var(--fh-highlight-teal) inset;
}

.auth-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-submit {
  margin-top: 8px;
  height: 40px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: var(--fh-tracking-wide);
  text-transform: uppercase;
  color: var(--fh-text-primary);
  background: transparent;
  border: 2px solid var(--fh-highlight-teal);
  border-radius: var(--fh-radius-sm);
  cursor: pointer;
  transition: background var(--fh-transition-fast), border-color var(--fh-transition-fast);
}

.auth-submit:hover:not(:disabled) {
  background: var(--fh-highlight-teal);
}

.auth-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.auth-msg {
  min-height: 18px;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 12px;
  text-align: center;
  color: var(--fh-text-secondary);
}

.auth-msg.is-error  { color: #ff7f7f; }
.auth-msg.is-frozen { color: var(--fh-warmth-amber); font-weight: 600; }

/* ── Tools-popup scan-mode radios ─────────────────────────────────────────
   Mirror of the sidebar scan-mode buttons, kept compact for the popup.
   Selecting one updates toolState.promptType and the matching sidebar
   button via applyPromptType() in app.js. */
.scan-mode-radios {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scan-mode-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--fh-surface);
  border: 1px solid var(--fh-gold-border);
  border-radius: var(--fh-radius-sm);
  color: var(--fh-text-primary);
  cursor: pointer;
  transition: border-color var(--fh-transition-fast), background var(--fh-transition-fast);
}

.scan-mode-radio:hover {
  border-color: var(--fh-gold-border-strong);
  background: var(--fh-surface-alpha);
}

.scan-mode-radio input[type="radio"] {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--fh-gold-border-strong);
  border-radius: 50%;
  background: transparent;
  position: relative;
  cursor: pointer;
}

.scan-mode-radio input[type="radio"]:checked {
  border-color: var(--fh-highlight-teal);
}

.scan-mode-radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--fh-highlight-teal);
}

.scan-mode-radio:has(input[type="radio"]:checked) {
  border-color: var(--fh-highlight-teal);
  box-shadow: 0 0 0 1px var(--fh-highlight-teal) inset;
}

.scan-mode-radio:has(input[type="radio"]:checked) .scan-mode-radio-label {
  color: var(--fh-accent-gold);
}

.scan-mode-radio-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--fh-tracking-wide);
}

/* ── Rendered Markdown inside bot bubbles ─────────────────────────────────
   Scoped to .message-text.has-markdown so we don't accidentally re-style
   plain-text bubbles. Uses the FH palette: gold for headings/accents,
   teal for inline highlights, navy surfaces for code. */
.message-text.has-markdown {
  /* Reset margin collapsing so headings/lists don't crowd the bubble edges. */
  display: block;

  /* Override the bubble-default `white-space: pre-wrap` once marked has
     produced HTML. With pre-wrap, the literal newlines marked inserts
     between block elements (e.g. "</ol>\n\n<p>") render as visible blank
     lines, producing huge gaps between paragraphs, headings, and lists.
     The markdown engine owns line breaks via <p>/<br> now — let the
     normal whitespace algorithm collapse the formatting whitespace. */
  white-space: normal;
}

.message-text.has-markdown > *:first-child { margin-top: 0; }
.message-text.has-markdown > *:last-child  { margin-bottom: 0; }

/* Headings — Cormorant for the visual hook, slightly smaller than welcome */
.message-text.has-markdown h1,
.message-text.has-markdown h2,
.message-text.has-markdown h3,
.message-text.has-markdown h4,
.message-text.has-markdown h5,
.message-text.has-markdown h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fh-text-primary);
  margin: 1.1em 0 0.5em;
  line-height: 1.25;
}
.message-text.has-markdown h1 { font-size: 1.45rem; color: var(--fh-accent-gold); }
.message-text.has-markdown h2 { font-size: 1.25rem; color: var(--fh-accent-gold); }
.message-text.has-markdown h3 { font-size: 1.1rem;  color: var(--fh-text-primary); }
.message-text.has-markdown h4,
.message-text.has-markdown h5,
.message-text.has-markdown h6 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: var(--fh-tracking-wide);
  color: var(--fh-text-secondary);
}

/* Paragraphs — comfortable rhythm, no extra max-width clipping. */
.message-text.has-markdown p {
  margin: 0.6em 0;
  line-height: 1.55;
  max-width: none;
}

/* Inline emphasis */
.message-text.has-markdown strong { color: var(--fh-text-primary); font-weight: 600; }
.message-text.has-markdown em     { font-style: italic; color: var(--fh-text-secondary); }

/* Lists — adopt the FH gold-diamond bullet for unordered, gold numerals for ordered.
   Bottom margin is a touch wider than top so a list reads as a closed unit
   and the following paragraph gets breathing room instead of butting up
   against the last bullet. Top stays at 0.6em so the list still feels
   attached to the paragraph that introduces it. */
.message-text.has-markdown ul,
.message-text.has-markdown ol {
  margin: 0.6em 0 1.1em;
  padding-left: 1.5em;
}
.message-text.has-markdown ul { list-style: none; padding-left: 1.25em; }
.message-text.has-markdown ul li {
  position: relative;
  padding-left: 18px;
  margin: 0.25em 0;
}
.message-text.has-markdown ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--fh-accent-gold);
  transform: rotate(45deg);
}
.message-text.has-markdown ol li {
  margin: 0.25em 0;
}
.message-text.has-markdown ol li::marker {
  color: var(--fh-accent-gold);
  font-weight: 600;
}

/* Top-level ordered lists read as section markers (e.g. "1. Tier 1
   Ontological Orientation"), not as indented step lists. Pull them
   flush with the bubble's left edge by zeroing the padding and moving
   the marker inside the line box so it doesn't render off the edge.
   Nested <ol> inside an <li> keep the default indented look. */
.message-text.has-markdown > ol {
  padding-left: 0;
  list-style-position: inside;
}
.message-text.has-markdown > ol > li {
  padding-left: 0;
  /* Drop the per-item margin a hair — these are headings, not list rows. */
  margin: 0.4em 0 0.3em;
}

/* Nested lists — slightly smaller bullet */
.message-text.has-markdown ul ul li::before { width: 5px; height: 5px; top: 0.6em; }

/* Defang "loose lists". marked wraps each <li>'s content in <p> when the
   source markdown has blank lines between items. That <p> would otherwise
   inherit .has-markdown p { margin: 0.6em 0 } and produce big airy gaps
   between bullets. Server-side cleanup (rag.CleanLLMReply) tries to
   prevent loose source, but this rule is the visual backstop: regardless
   of what the model emits, lists render tight. */
.message-text.has-markdown li > p {
  margin: 0;
}
/* Restore a small gap only when one <li> intentionally has multiple
   paragraphs (rare but valid GFM). */
.message-text.has-markdown li > p + p {
  margin-top: 0.4em;
}

/* GFM task lists */
.message-text.has-markdown li > input[type="checkbox"] {
  margin-right: 0.5em;
  accent-color: var(--fh-highlight-teal);
}

/* Inline code */
.message-text.has-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(184, 150, 12, 0.10);
  border: 1px solid var(--fh-gold-border);
  color: var(--fh-gold-bright);
}

/* Code blocks */
.message-text.has-markdown pre {
  margin: 0.8em 0;
  padding: 12px 14px;
  border: 1px solid var(--fh-gold-border-strong);
  background: var(--fh-bg);
  border-radius: var(--fh-radius-sm);
  overflow-x: auto;
  font-size: 0.88rem;
  line-height: 1.45;
}
.message-text.has-markdown pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: var(--fh-text-primary);
  font-size: inherit;
}

/* Blockquotes */
.message-text.has-markdown blockquote {
  margin: 0.8em 0;
  padding: 4px 14px;
  border-left: 3px solid var(--fh-accent-gold);
  background: var(--fh-surface-alpha);
  color: var(--fh-text-secondary);
  font-style: italic;
}

/* Links */
.message-text.has-markdown a {
  color: var(--fh-gold-bright);
  text-decoration: underline;
  text-decoration-color: rgba(212, 175, 55, 0.45);
  text-underline-offset: 3px;
  transition: color var(--fh-transition-fast), text-decoration-color var(--fh-transition-fast);
}
.message-text.has-markdown a:hover {
  color: var(--fh-text-primary);
  text-decoration-color: var(--fh-gold-bright);
}

/* Horizontal rule */
.message-text.has-markdown hr {
  border: 0;
  height: 1px;
  background: var(--fh-gold-border-strong);
  margin: 1.2em 0;
}

/* Tables (GFM) */
.message-text.has-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8em 0;
  font-size: 0.92rem;
}
.message-text.has-markdown thead {
  background: var(--fh-surface);
  color: var(--fh-accent-gold);
  letter-spacing: var(--fh-tracking-wide);
}
.message-text.has-markdown th,
.message-text.has-markdown td {
  border: 1px solid var(--fh-gold-border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.message-text.has-markdown tbody tr:nth-child(even) {
  background: rgba(0, 26, 74, 0.25);
}

/* Images (LLMs sometimes emit them) — modest width cap to keep flow sane */
.message-text.has-markdown img {
  max-width: 100%;
  height: auto;
  border-radius: var(--fh-radius-sm);
  border: 1px solid var(--fh-gold-border);
}

/* ── Chat error bubbles ───────────────────────────────────────────────────
   Marks bot messages that carry a chat / search / network failure so they
   read distinctly from a real reply. Uses the FH amber accent so it's
   clearly an alert without looking like a "browser red error" box. */
.message-text.is-error {
  border: 1px solid rgba(255, 184, 48, 0.55);
  background: rgba(255, 184, 48, 0.08);
  padding: 12px 14px 12px 38px;
  border-radius: var(--fh-radius-sm);
  position: relative;
  color: var(--fh-text-primary);
}

.message-text.is-error::before {
  content: "!";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fh-warmth-amber);
  color: var(--fh-bg);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

/* ── References section: hidden for now ──────────────────────────────────
   The user has USE_RAG=false, so retrieval is disabled and reference cards
   never arrive. Hide the title row ("References" / "Search Results") and
   the empty-state copy so an empty panel doesn't dangle below the chat.
   To re-enable when RAG comes back: delete this block. The DOM nodes and
   JS that populate them are intentionally left in place. */
.references-header,
.references-empty {
  display: none;
}

/* Reduce-motion friendliness */
@media (prefers-reduced-motion: reduce) {
  .ref-card,
  .pill-button,
  .send-btn,
  .lock-btn,
  .scan-mode-btn,
  textarea {
    transition: none !important;
  }
}

/* ==========================================================================
   MODES — Field Sense vs. Corporate Sonar
   The login screen offers a mode chooser; Corporate Sonar replaces the
   free-text chat bar with a company autocomplete search bar. Both modes
   share the rest of the layout.
   ========================================================================== */

/* --- Corporate Sonar: hide the chat form, show the company search --- */
body.mode-corporate-sonar #chat-form {
  display: none;
}

.company-search {
  position: relative;
  width: 100%;
}
.company-search-input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 48px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  padding: 18px 48px 18px 50px;
  font-size: 24px;
  font-family: var(--font-mono-ui);
  letter-spacing: 0.04em;
  background: rgba(15, 23, 42, 0.95);
  color: var(--text-dark);
  outline: none;
}
.company-search-input::placeholder {
  color: var(--fh-text-secondary);
  opacity: 0.7;
}
.company-search-input:focus {
  border-color: var(--fh-gold-border-strong);
}
.company-search-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Autocomplete dropdown */
.company-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 360px;
  overflow-y: auto;
  background: var(--fh-surface);
  border: 1px solid var(--fh-gold-border-strong);
  border-radius: var(--fh-radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  z-index: 30;
}
.company-search-results[hidden] {
  display: none;
}
.company-search-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--fh-radius-sm);
  cursor: pointer;
  font-family: var(--font-body);
}
.company-search-item.is-active,
.company-search-item:hover {
  background: rgba(26, 122, 138, 0.22);
}
.cs-ticker {
  flex: 0 0 auto;
  min-width: 66px;
  font-family: var(--font-mono-ui);
  font-weight: 700;
  font-size: 15px;
  color: var(--fh-accent-gold);
}
.cs-name {
  flex: 1 1 auto;
  font-size: 15px;
  color: var(--fh-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-index {
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: var(--fh-tracking-wide);
  text-transform: uppercase;
  color: var(--fh-text-secondary);
}
.company-search-empty {
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fh-text-secondary);
}

@media (max-width: 480px) {
  .company-search-input {
    font-size: 18px;
    padding: 14px 44px 14px 46px;
  }
  .cs-name {
    font-size: 14px;
  }
}

/* ==========================================================================
   WELCOME / LANDING PAGE
   The public page at "/" — brand hero plus the Field Sense / Corporate
   Mirror mode chooser. Standalone page (templates/welcome.html); it loads
   this same stylesheet but has its own <body class="welcome-page">.
   ========================================================================== */

/* The welcome screen is a fixed full-viewport overlay inside index.html
   (position:fixed sidesteps the global `body { display:flex }`, so the
   centered column never hangs off the left edge). It is the first
   authenticated view on "/": shown once the login gate clears. */
.welcome-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  overflow-y: auto;
  box-sizing: border-box;
  padding: clamp(36px, 7vh, 84px) 24px;
  background:
    radial-gradient(ellipse 70% 48% at 50% 0%,
      rgba(26, 122, 138, 0.20), transparent 72%),
    var(--fh-bg);
  color: var(--fh-text-primary);
  font-family: var(--font-body);
}

body[data-mode="welcome"]:not(.auth-required) .welcome-screen { display: block; }
body[data-mode="welcome"] .app { display: none; }

.welcome-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.welcome-hero-logo {
  width: min(232px, 60vw);
  height: auto;
  border-radius: var(--fh-radius-lg);
  border: 1px solid var(--fh-gold-border);
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.6);
}

.welcome-eyebrow {
  margin: 28px 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--fh-tracking-wider);
  text-transform: uppercase;
  color: var(--fh-accent-gold);
}

.welcome-hero-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.16;
  margin: 12px 0 0;
  color: var(--fh-text-primary);
}

.welcome-hero-sub {
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.62;
  color: var(--fh-text-secondary);
  max-width: 560px;
  margin: 18px auto 0;
}

/* The shared .fh-divider already styles the gold-line + diamond mark. */
.welcome-hero-inner .fh-divider {
  margin: 30px auto;
}

.welcome-choose {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--fh-tracking-wider);
  text-transform: uppercase;
  color: var(--fh-text-secondary);
}

.welcome-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
  width: 100%;
}

.welcome-mode-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-sizing: border-box;
  padding: 26px 24px;
  text-align: left;
  text-decoration: none;
  background: var(--fh-surface);
  border: 1px solid var(--fh-highlight-teal);
  border-radius: var(--fh-radius-lg);
  transition:
    transform var(--fh-transition-fast),
    border-color var(--fh-transition-fast),
    box-shadow var(--fh-transition-fast);
}
.welcome-mode-card:hover {
  transform: translateY(-3px);
  border-color: var(--fh-accent-gold);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.welcome-mode-card:focus-visible {
  outline: 2px solid var(--fh-accent-gold);
  outline-offset: 3px;
}

.welcome-mode-name {
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 600;
  color: var(--fh-text-primary);
}

.welcome-mode-desc {
  font-size: 13px;
  line-height: 1.58;
  color: var(--fh-text-secondary);
}

.welcome-mode-cta {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--fh-tracking-wide);
  text-transform: uppercase;
  color: var(--fh-accent-gold);
}

.welcome-footer {
  margin: 32px 0 0;
  font-size: 11px;
  letter-spacing: var(--fh-tracking-wider);
  text-transform: uppercase;
  color: var(--fh-text-secondary);
  opacity: 0.65;
}

@media (max-width: 480px) {
  .welcome-hero-title { font-size: clamp(24px, 7vw, 32px); }
  .welcome-mode-card { padding: 22px 20px; }
}

/* ==========================================================================
   CHAT HISTORY PANEL (right side)
   A ChatGPT-style list of past conversations. Mirrors the left sidebar's
   fixed-overlay pattern but anchored to the right edge. Uses the FH navy /
   gold / teal palette tokens defined in :root.
   ========================================================================== */
.history-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  display: flex;
  flex-direction: column;
  background: #000;
  border-left: 1px solid var(--fh-gold-border);
  z-index: 4000;
  overflow: hidden;
  transition: transform var(--fh-transition-fast);
}

/* Slide off-screen when collapsed. visibility:hidden (applied after the
   slide transition) also removes the off-screen controls from the tab order
   and the accessibility tree, so keyboard users can't focus a panel they
   can't see. */
body.history-collapsed .history-panel {
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--fh-transition-fast), visibility 0s linear var(--fh-transition-fast);
}

/* Wide screens: dock the sidebar, chat, and history into a real 3-column
   grid so neither panel overlays the chat and the centered chat column stays
   true. Below 1100px both panels fall back to the fixed-overlay behaviour
   defined above (history) and in the base sidebar rules (left). */
@media (min-width: 1100px) {
  .app {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 280px;
    grid-template-rows: 100%;
  }
  body.sidebar-collapsed .app                   { grid-template-columns: 0 minmax(0, 1fr) 280px; }
  body.history-collapsed .app                   { grid-template-columns: 260px minmax(0, 1fr) 0; }
  body.sidebar-collapsed.history-collapsed .app { grid-template-columns: 0 minmax(0, 1fr) 0; }

  /* min-height:0 lets .main's internal scroll area shrink inside the grid row
     instead of overflowing it. */
  .main { min-height: 0; }

  /* Left sidebar becomes an in-flow grid column (position:relative keeps it
     as the anchor for its absolutely-positioned collapse button). */
  #sidebar.sidebar {
    position: relative;
    top: auto; bottom: auto; left: auto;
    width: auto;
    transform: none;
    z-index: auto;
  }
  body.sidebar-collapsed #sidebar.sidebar { display: none; }

  /* History panel becomes the third in-flow grid column. */
  .history-panel {
    position: relative;
    top: auto; right: auto; bottom: auto;
    width: auto;
    transform: none;
    visibility: visible;
    z-index: auto;
    transition: none;
  }
  body.history-collapsed .history-panel { display: none; }
}

.history-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 12px 12px 16px;
  border-bottom: 1px solid var(--fh-gold-border);
}

.history-title {
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: var(--fh-tracking-wide);
  color: var(--fh-text-primary);
}

.history-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.history-new-btn,
.history-collapse-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--fh-gold-border);
  background: transparent;
  color: var(--fh-text-secondary);
  border-radius: 10px;
  cursor: pointer;
  transition: color var(--fh-transition-fast), border-color var(--fh-transition-fast), background var(--fh-transition-fast);
}

.history-new-btn:hover,
.history-collapse-btn:hover {
  color: var(--fh-gold-bright);
  border-color: var(--fh-gold-border-strong);
  background: rgba(184, 150, 12, 0.08);
}

.history-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 8px 16px;
}

.history-empty {
  color: var(--fh-text-secondary);
  font-size: 13px;
  line-height: 1.5;
  padding: 14px 10px;
  opacity: 0.75;
}

.history-item {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-radius: 10px;
  margin-bottom: 2px;
  transition: background var(--fh-transition-fast);
}

.history-item:hover {
  background: rgba(168, 192, 232, 0.06);
}

.history-item.is-active {
  background: rgba(26, 122, 138, 0.18);
  box-shadow: inset 2px 0 0 var(--fh-highlight-teal);
}

.history-item-main {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 9px 8px 9px 10px;
  border-radius: 10px;
}

.history-item-title {
  font-size: 13.5px;
  color: var(--fh-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-sub {
  font-size: 11.5px;
  color: var(--fh-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 4px;
  opacity: 0;
  transition: opacity var(--fh-transition-fast);
}

.history-item:hover .history-item-actions,
.history-item.is-active .history-item-actions {
  opacity: 1;
}

.history-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--fh-text-secondary);
  border-radius: 8px;
  cursor: pointer;
}

.history-action:hover {
  color: var(--fh-gold-bright);
  background: rgba(184, 150, 12, 0.12);
}

/* Destructive action uses the app's established danger red (#ef4444),
   matching .icon-btn--danger / .modal-btn.danger. */
.history-action-danger:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.14);
}

/* Visible keyboard focus on every interactive control in the panel
   (brand brief requires visible focus states). */
.history-item-main:focus-visible,
.history-action:focus-visible,
.history-new-btn:focus-visible,
.history-collapse-btn:focus-visible,
.history-open-btn:focus-visible {
  outline: 2px solid var(--fh-highlight-teal);
  outline-offset: 2px;
}

/* Touch devices have no hover, so reveal the rename/delete actions
   permanently instead of on hover (otherwise they're unreachable). */
@media (hover: none) {
  .history-item-actions { opacity: 1; }
}

/* Open button — visible only while the panel is hidden. */
.history-open-btn {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 5000;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--fh-gold-border);
  border-radius: 12px;
  background: rgba(0, 11, 31, 0.95);
  color: var(--fh-text-secondary);
  cursor: pointer;
}

.history-open-btn:hover {
  color: var(--fh-gold-bright);
  border-color: var(--fh-gold-border-strong);
}

body.history-collapsed .history-open-btn {
  display: inline-flex;
}

/* Text input used by modalPrompt (rename). */
.modal-input {
  width: 100%;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--fh-gold-border);
  border-radius: 10px;
  background: var(--fh-surface);
  color: var(--fh-text-primary);
  font-family: var(--font-body);
  font-size: 14px;
}

.modal-input:focus {
  outline: none;
  border-color: var(--fh-highlight-teal);
  box-shadow: 0 0 0 2px rgba(26, 122, 138, 0.35);
}

/* On phones the panel becomes a near-full-width overlay. */
@media (max-width: 768px) {
  .history-panel {
    width: min(86vw, 320px);
    z-index: 6000;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.5);
  }
}