* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #070711;
  color: #f8fafc;
}

.hidden {
  display: none !important;
}

/* LOGIN */

.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(139, 92, 246, 0.35), transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.25), transparent 35%),
    linear-gradient(135deg, #070711, #111122);
  padding: 24px 24px 60px;
  position: relative;
  gap: 24px;
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.login-tagline {
  font-size: 14px;
  color: rgba(196, 181, 253, 0.65);
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0;
}

.login-footer {
  position: absolute;
  bottom: 20px;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11.5px;
  color: rgba(196, 181, 253, 0.35);
  user-select: none;
}
.login-footer-sep { color: rgba(196, 181, 253, 0.20); }

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  border-radius: 22px;
  background: rgba(16, 16, 32, 0.82);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 30px 90px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
}

.brand-orb,
.empty-orb,
.mini-orb,
.login-logo {
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.55);
}

.brand-orb {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-weight: 800;
  font-size: 28px;
  margin-bottom: 24px;
}

.login-card h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.04em;
}

.subtitle {
  color: #a1a1aa;
  margin: 10px 0 28px;
  line-height: 1.5;
}

.form-group {
  margin-bottom: 16px;
}

label {
  display: block;
  color: #c4b5fd;
  font-size: 13px;
  margin-bottom: 8px;
}

input,
textarea,
select {
  width: 100%;
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 14px 16px;
  outline: none;
  font-size: 15px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 4px rgba(167,139,250,0.12);
}

.primary-btn {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 14px 18px;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  box-shadow: 0 14px 34px rgba(124,58,237,0.35);
}

.primary-btn:hover {
  transform: translateY(-1px);
}

.otp-block {
  display: none;
  margin-top: 18px;
}

.status-msg {
  margin-top: 14px;
  color: #c4b5fd;
  font-size: 14px;
}

/* APP */

.app-shell {
  height: 100vh;
  display: flex;
  background: #09090f;
}

.sidebar {
  width: 315px;
  background: rgba(10,10,18,0.96);
  border-right: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  padding: 18px;
}

.app-logo {
  display: flex;
  gap: 12px;
  align-items: center;
  /* Match the chat-header's 82px height so the sidebar brand and the
     header heading share the same vertical center across the gap.
     Negative margins cancel the sidebar's 18px padding so the brand
     row reaches the very top + spans the full sidebar width. */
  height: 82px;
  margin: -18px -18px 0;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Square brand mark — only visible when sidebar is collapsed.
   In expanded state the wordmark itself carries the brand. */
.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #1a0d2e;
  border: 1px solid rgba(124, 58, 237, 0.25);
  flex: 0 0 auto;
  display: none;
  place-items: center;
}
.logo-mark svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Login screen wordmark. Same outlined SVG as the sidebar.
   Constrain HEIGHT only — the SVG viewBox is 444×200 but the glyphs
   only occupy y=50..130, so width-based sizing reserves dead vertical
   space below. height:42px makes it behave like a 42px-tall image. */
.login-wordmark {
  height: 52px;
  width: auto;
  display: block;
}

.login-logo {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  display: block;
  margin-bottom: 24px;
}

.mini-orb {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-weight: 800;
}

/* Sidebar wordmark — same height-only constraint as the login one.
   Sized for the sidebar context (~200px wide). The SVG viewBox is
   444×200 but glyphs only occupy ~40% vertical space, so height needs
   to be generous for the actual letters to read as a real wordmark.
   Negative bottom margin pulls the subtitle up against the bottom of
   the visible glyphs (the SVG has ~14px of dead vertical space below
   the letters at this size). Matches admin.html. */
.brand-wordmark {
  height: 44px;
  width: auto;
  display: block;
  margin-bottom: -14px;
}

.app-logo span {
  color: #8b8ba3;
  font-size: 11px;
  display: block;
  margin-top: 0;
  /* padding-left aligns with the visible "L" inside the SVG viewBox
     (L glyph starts at viewBox x=57, which at this render width
     translates to ~12px from the SVG's left edge). */
  padding-left: 12px;
}

.new-chat {
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  border: 1px solid rgba(167,139,250,0.3);
  background: rgba(139,92,246,0.14);
  color: #ede9fe;
  cursor: pointer;
  font-weight: 700;
}

.new-chat:hover {
  background: rgba(139,92,246,0.24);
}

.sidebar-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-btn-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  flex-shrink: 0;
}

.sidebar-btn-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.welcome-greeting {
  margin-top: 4px;
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.session-label {
  color: #71717a;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.12em;
  margin: 24px 0 10px;
}

.sessions-list {
  flex: 1;
  overflow-y: auto;
}

.empty-sessions {
  color: #71717a;
  font-size: 13px;
  padding: 12px;
}

.session-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px 11px 14px;
  border-radius: 14px;
  color: #d4d4d8;
  cursor: pointer;
  margin-bottom: 6px;
  font-size: 14px;
  position: relative;
}

.session-item:hover {
  background: rgba(255,255,255,0.06);
}

.session-item.active {
  background: linear-gradient(135deg, rgba(124,58,237,0.35), rgba(192,38,211,0.22));
  color: #fff;
}

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

.session-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.session-time {
  margin-top: 4px;
  color: #8b8ba3;
  font-size: 11px;
}

.session-delete {
  width: 26px;
  height: 26px;
  border-radius: 9px;
  border: none;
  color: #a1a1aa;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  opacity: 0;
  transition: 0.15s ease;
  font-size: 18px;
  line-height: 1;
}

.session-item:hover .session-delete {
  opacity: 1;
}

.session-delete:hover {
  background: rgba(239,68,68,0.22);
  color: #fecaca;
}

.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 14px;
}

.sidebar-footer button {
  background: transparent;
  color: #a1a1aa;
  border: none;
  cursor: pointer;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative; /* anchors the conversation minimap rail */
  background:
    radial-gradient(circle at 70% 10%, rgba(124,58,237,0.12), transparent 28%),
    #0d0d16;
}

.chat-header {
  height: 82px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
}

.chat-header h2 {
  margin: 0;
  font-size: 18px;
}

.chat-header p {
  margin: 5px 0 0;
  color: #8b8ba3;
  font-size: 13px;
}

.model-select {
  width: 230px;
  background: #171728;
}

.messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 30px 48px 30px 30px;   /* extra right room so chat bubbles never crowd the index rail */
}

.empty-state {
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  color: #a1a1aa;
}

.empty-state > div {
  max-width: 560px;
}

.empty-orb {
  width: 70px;
  height: 70px;
  margin: 0 auto 22px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: 30px;
}

.empty-state h3 {
  color: #fff;
  font-size: 30px;
  margin: 0 0 10px;
  letter-spacing: -0.04em;
}

.message-row {
  display: flex;
  margin-bottom: 22px;
}

.message-row.user {
  justify-content: flex-end;
  align-items: flex-end;
  gap: 6px;
}

/* Action buttons on user messages — Edit, Regenerate, Copy.
   Sit to the left of the right-aligned bubble, hover-revealed. */
.user-msg-actions {
  order: -1;
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: flex-end;
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.15s ease;
}

.message-row.user:hover .user-msg-actions,
.user-msg-actions:focus-within {
  opacity: 1;
}

.user-msg-action,
.user-msg-copy {
  background: transparent;
  border: 1px solid transparent;
  color: #a1a1aa;
  cursor: pointer;
  font-size: 16px;
  padding: 7px 10px;
  border-radius: 8px;
  line-height: 1;
  min-width: 34px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.user-msg-action:hover,
.user-msg-copy:hover {
  color: #f4f4f5;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.user-msg-action:active,
.user-msg-copy:active {
  transform: translateY(0);
}

.user-msg-copy.copied {
  color: #c4b5fd;
}

/* On touch devices keep them always visible — no hover state. */
@media (hover: none) {
  .user-msg-actions { opacity: 0.6; }
}

.message {
  max-width: 780px;
  padding: 16px 18px;
  border-radius: 20px;
  line-height: 1.6;
  font-size: 15px;
}

.message.user {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: white;
  border-bottom-right-radius: 6px;
}

.message.assistant {
  background: rgba(255,255,255,0.065);
  border: 1px solid rgba(255,255,255,0.08);
  color: #f4f4f5;
  border-bottom-left-radius: 6px;
}

.message.streaming {
  white-space: pre-wrap;
  /* Cap the streaming bubble so a long reply doesn't push the page miles
     down while it's still arriving. The bubble scrolls internally; once
     streaming finalizes, code blocks get their own contained scroll
     and this cap is removed. */
  max-height: 540px;
  overflow-y: auto;
  overflow-x: auto;
}

/* Subtle scrollbar inside the streaming bubble. */
.message.streaming::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.message.streaming::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 6px;
}
.message.streaming::-webkit-scrollbar-track {
  background: transparent;
}

.message table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
}

/* Wrapper around tables — adds a copy button that appears on hover. */
.table-wrap {
  position: relative;
  margin: 14px 0;
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}

.table-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: rgba(20, 20, 30, 0.92);
  border: 1px solid rgba(255,255,255,0.14);
  color: #d4d4d8;
  cursor: pointer;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  line-height: 1;
  opacity: 1;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  backdrop-filter: blur(4px);
}

.table-copy-btn:hover {
  color: #fff;
  background: rgba(40, 40, 56, 0.95);
  border-color: rgba(255,255,255,0.22);
}

.table-copy-btn.copied {
  color: #c4b5fd;
  border-color: rgba(196,181,253,0.4);
}

.table-copy-label {
  font-size: 12px;
}

@media (max-width: 560px) {
  .table-copy-label { display: none; }
  .table-copy-btn { padding: 6px 8px; }
}

.message th,
.message td {
  border: 1px solid rgba(255,255,255,0.14);
  padding: 10px;
}

.message th {
  background: rgba(255,255,255,0.08);
}

.message pre {
  background: #050508;
  padding: 14px;
  border-radius: 14px;
  overflow-x: auto;
}

.composer-wrap {
  position: relative;
  padding: 14px 28px 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.drop-zone {
  position: absolute;
  inset: 12px 28px 92px;
  z-index: 12;
  display: grid;
  place-items: center;
  border-radius: 24px;
  border: 1.5px dashed rgba(196,181,253,0.72);
  background: rgba(12, 12, 24, 0.82);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 22px 70px rgba(0,0,0,0.38);
}

.drop-zone-card {
  text-align: center;
  padding: 26px;
  border-radius: 24px;
  background: rgba(139,92,246,0.14);
  border: 1px solid rgba(167,139,250,0.24);
  max-width: 420px;
}

.drop-zone-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  box-shadow: 0 18px 45px rgba(124,58,237,0.36);
  font-size: 26px;
}

.drop-zone-card strong {
  display: block;
  color: #fff;
  font-size: 18px;
  margin-bottom: 6px;
}

.drop-zone-card span {
  color: #c4b5fd;
  font-size: 13px;
  line-height: 1.5;
}

body.drag-active .composer {
  border-color: rgba(196,181,253,0.75);
  box-shadow: 0 0 0 4px rgba(167,139,250,0.12);
}


.attachment-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.attachment-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 280px;
  padding: 8px 9px;
  border-radius: 14px;
  background: rgba(139,92,246,0.16);
  border: 1px solid rgba(167,139,250,0.22);
  color: #ede9fe;
}

.attachment-chip strong {
  display: block;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 190px;
}

.attachment-chip small {
  display: block;
  color: #a1a1aa;
  font-size: 11px;
}

.attachment-chip button {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.09);
  color: #fff;
  cursor: pointer;
}

.composer {
  display: flex;
  gap: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 10px;
  border-radius: 22px;
}

.attach-btn {
  width: 48px !important;
  min-width: 48px;
  border: none;
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,0.08) !important;
  cursor: pointer;
  font-size: 18px;
}

.attach-btn:hover {
  background: rgba(139,92,246,0.28) !important;
}

.composer textarea {
  resize: none;
  border: none;
  background: transparent;
  min-height: 48px;
  max-height: 160px;
}

.composer textarea:focus {
  box-shadow: none;
}

.composer button#sendBtn {
  width: 92px;
  border: none;
  border-radius: 16px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  cursor: pointer;
}

.composer button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hint {
  color: #71717a;
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}

.loading {
  color: #c4b5fd;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  50% { opacity: 0.5; }
}

@media (max-width: 800px) {
  .app-shell {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: 210px;
  }

  .sessions-list {
    display: flex;
    overflow-x: auto;
    gap: 8px;
  }

  .session-item {
    min-width: 180px;
  }

  .session-delete {
    opacity: 1;
  }

  .chat-header {
    padding: 16px;
    height: auto;
    gap: 12px;
    flex-direction: column;
    align-items: flex-start;
  }

  /* At this breakpoint sidebar stacks above main and chat-header is
     auto-height, so the 82px brand row no longer needs to mirror it. */
  .app-logo {
    height: auto;
    margin: 0 0 14px;
    padding: 0;
    border-bottom: none;
  }

  .model-select {
    width: 100%;
  }

  .messages-area {
    padding: 18px;
  }

  .composer-wrap {
    padding: 14px;
  }
}

/* In-app toast + confirm modal. No browser alert/confirm.

   Design notes:
   - No emoji glyphs — a thin colored accent bar communicates type without
     "happy face / sad face" energy. Premium SaaS (Linear, Vercel, Stripe)
     all do this.
   - Toasts STACK rather than replace, with a small gap. Rapid actions
     (save 3 prices in a row) feel responsive instead of stomping each other.
   - A timing bar at the bottom counts down so the user knows when it'll
     vanish. Makes auto-dismiss feel intentional, not arbitrary.
   - Soft entrance from the right with a subtle scale; spring easing.
   - Hover pauses dismissal so users can re-read. */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  max-width: min(420px, calc(100vw - 32px));
  display: flex;
  flex-direction: column-reverse; /* newest on top of the stack */
  gap: 10px;
  pointer-events: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px 13px 22px;
  border-radius: 12px;
  background: rgba(18, 18, 30, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #f3f4f6;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.45;
  pointer-events: auto;
  overflow: hidden;
  /* Crisp shadow — single deep one + a subtle inner highlight on top edge.
     Avoids the "stacked drop shadow" look that screams 2018 web. */
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, 0.65),
    0 4px 12px -4px rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(255, 255, 255, 0.03) inset;
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  transform-origin: 100% 50%;
  animation: toastSlideIn 0.45s cubic-bezier(0.22, 1.2, 0.36, 1) forwards;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.toast:hover {
  transform: translateY(-1px);
  box-shadow:
    0 22px 50px -12px rgba(0, 0, 0, 0.75),
    0 6px 16px -4px rgba(0, 0, 0, 0.55),
    0 0 0 0.5px rgba(255, 255, 255, 0.06) inset;
}

/* The accent bar — left edge, full height, type-colored.
   Uses currentColor so the type modifier sets it via `color`. */
.toast::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
  opacity: 0.95;
}

/* Bottom progress bar — counts down the toast's lifetime so the dismiss
   feels deliberate. Animation duration is set inline by JS (--toast-life). */
.toast::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: currentColor;
  opacity: 0.35;
  transform-origin: left center;
  animation: toastProgress var(--toast-life, 2800ms) linear forwards;
}

.toast:hover::after {
  animation-play-state: paused;
}

.toast-msg {
  flex: 1;
  color: #f4f4f5;
  /* Reset color inheritance — the toast's `color` is the accent, but the
     message itself should be plain white-ish for readability. */
}

/* Optional close affordance, hidden by default. JS adds it for sticky toasts. */
.toast-close {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.toast-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}

/* Type variants — set the accent color only. The message body stays neutral.
   Colors chosen to read well against the dark glass background. */
.toast-success { color: #34d399; }
.toast-error   { color: #f87171; }
.toast-info    { color: #a78bfa; }
.toast-warn    { color: #fbbf24; }

/* Spring-y entrance: comes in from the right, slight scale, lands at rest. */
@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(28px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.toast-leaving {
  animation: toastSlideOut 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}

@keyframes toastSlideOut {
  to {
    opacity: 0;
    transform: translateX(40px) scale(0.92);
  }
}

@keyframes toastProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@media (max-width: 560px) {
  .toast-container {
    bottom: 16px;
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 3, 10, 0.66);
  backdrop-filter: blur(10px);
}

.confirm-card {
  width: min(430px, 100%);
  border-radius: 26px;
  padding: 26px;
  background: rgba(18, 18, 32, 0.96);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 28px 90px rgba(0,0,0,0.58);
  color: #f8fafc;
}

.confirm-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  margin-bottom: 14px;
  background: rgba(239,68,68,0.15);
  color: #fecaca;
  font-weight: 900;
}

.confirm-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.confirm-card p {
  margin: 0;
  color: #a1a1aa;
  line-height: 1.5;
  font-size: 14px;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.confirm-actions button {
  border: none;
  border-radius: 14px;
  padding: 11px 15px;
  cursor: pointer;
  font-weight: 800;
}

.confirm-cancel {
  background: rgba(255,255,255,0.08);
  color: #e4e4e7;
}

.confirm-ok {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #fff;
}

.confirm-ok.danger {
  background: linear-gradient(135deg, #dc2626, #f97316);
}

@media (max-width: 560px) {
  .login-card {
    padding: 26px;
    border-radius: 24px;
  }

  .login-card h1 {
    font-size: 29px;
  }

  .app-shell {
    height: 100dvh;
  }

  .sidebar {
    height: 180px;
    padding: 14px;
  }

  .app-logo {
    height: auto;
    margin: 0 0 12px;
    padding: 0;
    border-bottom: none;
  }

  .new-chat {
    padding: 11px;
  }

  .session-label {
    margin: 14px 0 8px;
  }

  .session-item {
    min-width: 165px;
    padding: 10px;
  }

  .session-delete {
    opacity: 1;
  }

  .chat-header h2 {
    font-size: 16px;
  }

  .chat-header p {
    display: none;
  }

  .welcome-greeting {
    font-size: 12px;
    margin-top: 2px;
  }

  .empty-state h3 {
    font-size: 24px;
  }

  .message {
    max-width: 94vw;
    font-size: 14px;
    padding: 14px 15px;
  }

  .composer {
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
  }

  .attach-btn {
    width: 42px !important;
    min-width: 42px;
  }

  .composer button#sendBtn {
    width: 74px;
  }

  .hint {
    font-size: 11px;
  }

  .attachment-chip {
    max-width: 100%;
  }

  .toast-container {
    left: 14px;
    right: 14px;
    top: 14px;
  }

  .confirm-card {
    border-radius: 22px;
    padding: 22px;
  }

  .confirm-actions {
    flex-direction: column-reverse;
  }

  .confirm-actions button {
    width: 100%;
  }
}

@media (max-width: 920px) {
  .sidebar {
    width: 275px;
  }

  .message {
    max-width: min(760px, 86vw);
  }
}

@media (max-width: 720px) {
  body {
    overflow: hidden;
  }

  .app-shell {
    height: 100dvh;
  }

  .sidebar {
    height: 178px;
    min-height: 178px;
  }

  .chat-main {
    min-height: 0;
  }

  .messages-area {
    min-height: 0;
  }

  .drop-zone {
    inset: 8px 14px 86px;
    border-radius: 20px;
  }

  .drop-zone-card {
    padding: 20px;
    max-width: calc(100vw - 52px);
  }
}

@media (max-width: 420px) {
  .login-page {
    padding: 14px;
  }

  .login-card {
    padding: 22px;
  }

  .login-logo {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
  }

  .sidebar {
    height: 168px;
    min-height: 168px;
  }

  .app-logo span {
    max-width: 220px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .attachment-tray {
    max-height: 94px;
    overflow-y: auto;
  }

  .composer textarea {
    font-size: 16px;
  }
}
.code-wrap {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 12px;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255,255,255,0.06);
  padding: 6px 10px;
  font-size: 12px;
  color: #a1a1aa;
}

.code-label {
  text-transform: lowercase;
}

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

.code-action-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #a1a1aa;
  cursor: pointer;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.code-action-btn:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
}

.code-action-btn:active {
  background: rgba(255,255,255,0.12);
}

.code-action-label {
  font-size: 12px;
}

/* On very narrow screens drop the labels and keep just the icons. */
@media (max-width: 560px) {
  .code-action-label { display: none; }
  .code-action-btn { padding: 4px 6px; }
}

/* Legacy class kept for back-compat — the JS now also adds .code-action-btn,
   so this just inherits everything cleanly. */
.copy-btn {
  background: transparent;
  border: none;
  color: #a1a1aa;
  cursor: pointer;
  font-size: 14px;
}

.copy-btn:hover {
  color: #fff;
}

/* Highlight.js theme override — keep our padding/scroll behavior but
   let the atom-one-dark theme own the code coloring. */
.code-wrap pre code.hljs {
  padding: 0;
  background: transparent;
  font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.55;
}

.code-wrap pre {
  margin: 0;
  padding: 14px;
  background: #050508;
  /* Cap visible height — long files scroll inside the box instead of
     making the page itself miles long. ChatGPT/Claude.ai do the same. */
  max-height: 480px;
  overflow: auto;
}

/* Subtle scrollbar inside code blocks so it blends with the dark theme. */
.code-wrap pre::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.code-wrap pre::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 8px;
}
.code-wrap pre::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.22);
}
.code-wrap pre::-webkit-scrollbar-track {
  background: transparent;
}

/* Line count chip next to the language label, e.g. "javascript • 247 lines" */
.code-line-count {
  margin-left: 8px;
  color: #71717a;
  font-variant-numeric: tabular-nums;
}

/* Streaming should stay solid, no fading/pulse */
.message.streaming {
  white-space: pre-wrap;
  animation: none !important;
  opacity: 1 !important;
  color: #f4f4f5 !important;
}

/* Send button becomes Stop while streaming */
.composer button#sendBtn.stop-mode {
  background: linear-gradient(135deg, #dc2626, #f97316);
  box-shadow: 0 12px 28px rgba(220,38,38,0.25);
}

.composer button#sendBtn.stop-mode:hover {
  filter: brightness(1.08);
}

.message.assistant {
  max-width: min(980px, calc(100vw - 360px));
  overflow-x: auto;
}

.message.assistant table {
  min-width: 720px;
  width: max-content;
  max-width: none;
}

.message.assistant th,
.message.assistant td {
  white-space: nowrap;
}

@media (max-width: 800px) {
  .message.assistant {
    max-width: 94vw;
  }

  .message.assistant table {
    min-width: 680px;
  }
}
/* Smooth dark scrollbar (Chrome, Edge, Safari) */
.message.assistant::-webkit-scrollbar {
  height: 8px;
}

.message.assistant::-webkit-scrollbar-track {
  background: transparent;
}

.message.assistant::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  transition: background 0.2s ease;
}

.message.assistant::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Firefox */
.message.assistant {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}

/* Mobile hamburger + drawer layout */
.mobile-menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  flex: 0 0 auto;
}

.mobile-menu-btn:hover {
  background: rgba(139,92,246,0.22);
}

.chat-heading {
  min-width: 0;
}

.mobile-sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0,0,0,0.56);
  backdrop-filter: blur(5px);
}

@media (max-width: 800px) {
  .app-shell {
    flex-direction: row;
    height: 100dvh;
    overflow: hidden;
  }

  .mobile-menu-btn {
    display: grid;
    place-items: center;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(86vw, 340px);
    height: 100dvh;
    min-height: 100dvh;
    z-index: 90;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 24px 0 80px rgba(0,0,0,0.55);
  }

  .app-shell.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sessions-list {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 0;
  }

  .session-item {
    min-width: 0;
    width: 100%;
  }

  .chat-main {
    width: 100%;
    min-width: 0;
  }

  .chat-header {
    flex-direction: row;
    align-items: center;
    padding: 14px 16px;
    gap: 12px;
  }

  .chat-header .chat-heading {
    flex: 1;
  }

  .model-select {
    width: min(42vw, 190px);
    padding: 11px 12px;
  }

  .messages-area {
    padding: 18px 14px;
  }

  .message.assistant {
    max-width: 94vw;
  }
}

@media (max-width: 560px) {
  .chat-header {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
  }

  .model-select {
    grid-column: 1 / -1;
    width: 100%;
  }

  .composer-wrap {
    padding: 12px 12px 16px;
  }

  .composer {
    border-radius: 20px;
  }

  .composer button#sendBtn {
    width: 78px;
  }

  .empty-state {
    padding: 0 18px;
  }

  .empty-state h3 {
    font-size: 27px;
  }

  .empty-state p {
    font-size: 16px;
    line-height: 1.45;
  }
}


/* Premium OTP modal */
.otp-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 20%, rgba(168,85,247,0.28), transparent 32%),
    rgba(3, 3, 10, 0.72);
  backdrop-filter: blur(16px);
}

.otp-modal-card {
  position: relative;
  width: min(430px, 100%);
  padding: 30px;
  border-radius: 30px;
  background: rgba(18, 18, 34, 0.96);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 34px 100px rgba(0,0,0,0.64);
  text-align: center;
  overflow: hidden;
}

.otp-modal-card::before {
  content: "";
  position: absolute;
  inset: -80px -80px auto auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(217,70,239,0.34), transparent 68%);
  pointer-events: none;
}

.otp-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: #c4b5fd;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.otp-close:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.otp-glow-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: linear-gradient(135deg, #7c3aed, #d946ef);
  box-shadow: 0 20px 58px rgba(168,85,247,0.42);
  font-size: 28px;
}

.otp-modal-card h2 {
  margin: 0;
  font-size: 27px;
  letter-spacing: -0.04em;
}

.otp-subtext {
  margin: 10px 0 22px;
  color: #a1a1aa;
  line-height: 1.45;
}

.otp-subtext strong {
  color: #ddd6fe;
}

.otp-boxes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  margin: 20px 0 16px;
}

.otp-digit {
  height: 54px;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  border-radius: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
}

.otp-digit:focus {
  border-color: #c084fc;
  box-shadow: 0 0 0 4px rgba(192,132,252,0.13);
}

.otp-timer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0 18px;
  color: #a1a1aa;
  font-size: 13px;
}

.otp-resend {
  border: none;
  background: transparent;
  color: #c4b5fd;
  font-weight: 800;
  cursor: pointer;
}

.otp-resend:disabled {
  color: #71717a;
  cursor: not-allowed;
}

.otp-verify-btn {
  margin-top: 4px;
}

.otp-modal-msg {
  min-height: 20px;
  margin-top: 12px;
  font-size: 13px;
  color: #a1a1aa;
}

.otp-modal-msg.error {
  color: #fca5a5;
}

.otp-modal-msg.success {
  color: #86efac;
}

@media (max-width: 460px) {
  .otp-modal-card {
    padding: 26px 20px;
    border-radius: 26px;
  }

  .otp-boxes {
    gap: 7px;
  }

  .otp-digit {
    height: 48px;
    font-size: 21px;
    border-radius: 14px;
  }

  .otp-timer-row {
    flex-direction: column;
    gap: 8px;
  }
}

/* ===== GLOBAL DARK SCROLLBAR (FIX OUTER + SIDEBAR) ===== */

/* Apply to entire app */
html, body, .sidebar, .sessions-list, .messages-area {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}

/* Chrome / Edge / Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.sessions-list::-webkit-scrollbar,
.messages-area::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track,
.sessions-list::-webkit-scrollbar-track,
.messages-area::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb,
.sessions-list::-webkit-scrollbar-thumb,
.messages-area::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.sessions-list::-webkit-scrollbar-thumb:hover,
.messages-area::-webkit-scrollbar-thumb:hover {
  background: rgba(196,181,253,0.35); /* subtle purple */
}
/* Prevent outer scroll — only internal panels scroll */
body:has(.app-shell:not(.hidden)) {
  overflow: hidden;
}
/* ===== PROJECTS V1 ===== */
.sidebar-actions {
  margin-top: 10px;
}

.new-project {
  width: 100%;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
  color: #ddd6fe;
  cursor: pointer;
  font-weight: 800;
}

.new-project:hover {
  background: rgba(139,92,246,0.20);
  border-color: rgba(167,139,250,0.28);
}

.project-create-card {
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(167,139,250,0.16);
}

.project-create-card input,
.project-create-card textarea {
  padding: 11px 12px;
  border-radius: 13px;
  font-size: 13px;
  margin-bottom: 8px;
}

.project-create-card textarea {
  resize: vertical;
  min-height: 74px;
  max-height: 130px;
}

.project-create-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.project-create-actions button {
  border: none;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  font-weight: 800;
}

#cancelProjectBtn {
  background: rgba(255,255,255,0.08);
  color: #d4d4d8;
}

#saveProjectBtn {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #fff;
}

#saveProjectBtn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.project-msg {
  min-height: 16px;
  margin-top: 8px;
  color: #a1a1aa;
  font-size: 12px;
}

.project-msg.error {
  color: #fca5a5;
}

.sidebar-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
}

.sidebar-section-row .session-label {
  margin: 0;
}

.projects-section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Inline "+ new" link in the Projects section header — Project creation
   is rare, so the action lives here as a quiet link, not a chunky button. */
.project-create-link {
  border: none;
  background: transparent;
  color: #c4b5fd;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 6px;
  border-radius: 6px;
  letter-spacing: 0.01em;
  transition: color 0.15s ease, background 0.15s ease;
}
.project-create-link:hover {
  color: #fff;
  background: rgba(196,181,253,0.10);
}

.project-more-btn {
  border: none;
  background: transparent;
  color: #c4b5fd;
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 0;
}

.project-more-btn:hover {
  color: #fff;
}

.projects-list {
  margin-top: 8px;
  /* Cap so 4+ projects don't push Chats below the fold. ~52px per row × ~3 rows
     + padding ≈ 168px. Scrolls inside on overflow. */
  max-height: 168px;
  overflow-y: auto;
  padding-right: 2px;
}

/* Compressed project row — projects are mostly navigation, smaller is fine. */
.project-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 11px;
  color: #d4d4d8;
  cursor: pointer;
  margin-bottom: 4px;
  border: 1px solid transparent;
}

.project-item:hover {
  background: rgba(255,255,255,0.06);
}

.project-item.active {
  background: linear-gradient(135deg, rgba(124,58,237,0.36), rgba(192,38,211,0.20));
  border-color: rgba(196,181,253,0.18);
  color: #fff;
}

.project-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(139,92,246,0.20);
  border: 1px solid rgba(167,139,250,0.20);
  color: #ede9fe;
  font-size: 12px;
  font-weight: 900;
}

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

.project-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.25;
  font-size: 13px;
  font-weight: 700;
}

.project-meta {
  margin-top: 2px;
  color: #8b8ba3;
  font-size: 11px;
}

.project-delete {
  width: 26px;
  height: 26px;
  min-width: 26px;
  border: none;
  border-radius: 9px;
  background: rgba(255,255,255,0.06);
  color: #a1a1aa;
  cursor: pointer;
  opacity: 0;
  transition: 0.15s ease;
  font-size: 18px;
  line-height: 1;
}

.project-item:hover .project-delete {
  opacity: 1;
}

.project-delete:hover {
  background: rgba(239,68,68,0.22);
  color: #fecaca;
}

@media (max-width: 800px) {
  .project-delete {
    opacity: 1;
  }
}

.projects-list::-webkit-scrollbar {
  width: 8px;
}

.projects-list::-webkit-scrollbar-track {
  background: transparent;
}

.projects-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.projects-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}

@media (max-width: 800px) {
  .projects-list {
    max-height: 220px;
  }
}

/* Project name in chat header */
.project-header-label {
  color: #ddd6fe;
}

.project-header-label strong {
  color: #ffffff;
  font-weight: 800;
}

.project-create-card.hidden {
  display: none !important;
}

.project-create-card {
  position: relative;
  z-index: 2;
}

.project-delete {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: #a1a1aa;
  cursor: pointer;
  opacity: 0;
}

.project-item:hover .project-delete {
  opacity: 1;
}

.project-delete:hover {
  background: rgba(239,68,68,0.22);
  color: #fecaca;
}

@media (max-width: 800px) {
  .project-delete { opacity: 1; }
}


/* ===== RESTORED PREMIUM SIDEBAR COLLAPSE ===== */
.app-logo {
  position: relative;
  cursor: pointer;
  transition: background 0.18s ease;
}

.app-logo:hover {
  background: rgba(255,255,255,0.045);
}

.brand-text {
  min-width: 0;
}

.sidebar-collapse-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 31px;
  height: 31px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 11px;
  background: rgba(255,255,255,0.07);
  color: #ddd6fe;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.sidebar-collapse-btn:hover {
  background: rgba(139,92,246,0.24);
  color: #fff;
}

@media (min-width: 801px) {
  .sidebar {
    transition: width 0.22s ease, padding 0.22s ease;
  }

  .app-shell.sidebar-collapsed .sidebar {
    width: 78px;
    padding: 18px 12px;
    align-items: center;
  }

  .app-shell.sidebar-collapsed .app-logo {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
    margin: 0 0 18px;
    border-bottom: none;
  }

  /* Brand mark only appears when the sidebar is collapsed.
     In expanded state the wordmark IS the brand and the mark hides. */
  .app-shell.sidebar-collapsed .logo-mark {
    display: grid;
  }

  .app-shell.sidebar-collapsed .brand-text,
  .app-shell.sidebar-collapsed .project-create-card,
  .app-shell.sidebar-collapsed .sidebar-section-row,
  .app-shell.sidebar-collapsed .projects-list,
  .app-shell.sidebar-collapsed .session-label,
  .app-shell.sidebar-collapsed .sessions-list {
    display: none !important;
  }

  .app-shell.sidebar-collapsed .sidebar-top,
  .app-shell.sidebar-collapsed .sidebar-actions,
  .app-shell.sidebar-collapsed .sidebar-footer {
    width: 100%;
  }

  .app-shell.sidebar-collapsed .sidebar-actions {
    margin-top: 10px;
  }

  .app-shell.sidebar-collapsed .sidebar-footer {
    margin-top: auto;
    border-top: none;
    padding-top: 0;
  }

  .app-shell.sidebar-collapsed .new-chat,
  .app-shell.sidebar-collapsed .new-project,
  .app-shell.sidebar-collapsed .sidebar-footer button {
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0 auto;
    border-radius: 15px;
    display: grid !important;
    place-items: center;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    color: #ede9fe;
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  }

  .app-shell.sidebar-collapsed .new-chat {
    background: linear-gradient(135deg, rgba(124,58,237,0.34), rgba(192,38,211,0.22));
    border-color: rgba(196,181,253,0.24);
  }

  .app-shell.sidebar-collapsed .new-chat:hover,
  .app-shell.sidebar-collapsed .new-project:hover,
  .app-shell.sidebar-collapsed .sidebar-footer button:hover {
    background: rgba(139,92,246,0.25);
    color: #fff;
    transform: translateY(-1px);
  }

  .app-shell.sidebar-collapsed .sidebar-btn-label {
    display: none !important;
  }

  .app-shell.sidebar-collapsed .sidebar-btn-icon {
    width: auto;
    height: auto;
    font-size: 21px;
  }

  .app-shell.sidebar-collapsed .sidebar-collapse-btn {
    right: -8px;
    top: 58px;
    background: rgba(24,24,38,0.98);
    box-shadow: 0 12px 34px rgba(0,0,0,0.42);
  }

  .app-shell.sidebar-collapsed .message.assistant {
    max-width: min(900px, calc(100vw - 145px));
  }
}

@media (max-width: 800px) {
  .sidebar-collapse-btn {
    display: none;
  }

  .app-logo {
    cursor: default;
    padding: 0;
    margin-left: 0;
  }

  .app-logo:hover {
    background: transparent;
  }

  .app-shell.sidebar-collapsed .sidebar {
    transform: translateX(-105%);
  }
}

/* ===== Active file context restored ===== */
.attachment-section-title {
  width: 100%;
  color: #a78bfa;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 2px 2px;
}

.active-attachment-tray {
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(139,92,246,0.09);
  border: 1px solid rgba(167,139,250,0.18);
}

.active-context-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: #ddd6fe;
  font-size: 12px;
  font-weight: 800;
}

.active-context-header button {
  border: none;
  border-radius: 10px;
  padding: 6px 9px;
  background: rgba(255,255,255,0.08);
  color: #c4b5fd;
  cursor: pointer;
  font-weight: 800;
  font-size: 11px;
}

.active-context-header button:hover {
  background: rgba(239,68,68,0.18);
  color: #fecaca;
}

.active-context-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachment-chip.active-file {
  background: rgba(34,197,94,0.10);
  border-color: rgba(74,222,128,0.24);
}

.attachment-chip.active-file small {
  color: #a7f3d0;
}

@media (max-width: 560px) {
  .active-context-header {
    align-items: flex-start;
  }

  .active-context-list .attachment-chip {
    width: 100%;
  }
}

/* ===== GLOBAL SEARCH / COMMAND PALETTE ===== */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.global-search-btn {
  height: 44px;
  min-width: 150px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 15px;
  padding: 0 11px 0 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(139,92,246,0.12));
  color: #f8fafc;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.global-search-btn:hover {
  border-color: rgba(196,181,253,0.32);
  background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(192,38,211,0.12));
}

.global-search-btn strong {
  font-size: 13px;
  font-weight: 800;
}

.global-search-btn kbd {
  font: inherit;
  font-size: 11px;
  color: #c4b5fd;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 9px;
  padding: 4px 7px;
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: start center;
  padding: min(9vh, 80px) 18px 18px;
  background: rgba(3, 3, 10, 0.68);
  backdrop-filter: blur(16px);
}

.search-modal {
  width: min(760px, 100%);
  max-height: min(760px, 84vh);
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at 85% 0%, rgba(217,70,239,0.20), transparent 30%),
    radial-gradient(circle at 10% 10%, rgba(124,58,237,0.22), transparent 28%),
    rgba(18, 18, 34, 0.97);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 34px 110px rgba(0,0,0,0.66);
  color: #f8fafc;
  display: flex;
  flex-direction: column;
}

.search-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 14px;
}

.search-modal-head h3 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.04em;
}

.search-modal-head p {
  margin: 6px 0 0;
  color: #a1a1aa;
  font-size: 13px;
}

.search-close-btn {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  color: #c4b5fd;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.search-close-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.search-input-wrap {
  margin: 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  min-height: 58px;
  border-radius: 20px;
  background: rgba(255,255,255,0.075);
  border: 1px solid rgba(255,255,255,0.13);
}

.search-input-wrap:focus-within {
  border-color: rgba(196,181,253,0.55);
  box-shadow: 0 0 0 4px rgba(167,139,250,0.12);
}

.search-input-wrap input {
  padding: 0;
  border: none;
  box-shadow: none !important;
  background: transparent;
  min-height: 54px;
  font-size: 17px;
}

.search-scope-row {
  display: flex;
  gap: 9px;
  padding: 14px 24px 10px;
}

.search-scope {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.055);
  color: #a1a1aa;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
}

.search-scope.active {
  color: #fff;
  border-color: rgba(167,139,250,0.35);
  background: linear-gradient(135deg, rgba(124,58,237,0.35), rgba(192,38,211,0.18));
}

.search-results {
  padding: 8px 14px 16px;
  overflow-y: auto;
}

.search-empty {
  margin: 12px 10px 16px;
  padding: 28px;
  text-align: center;
  color: #a1a1aa;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
}

.search-error {
  color: #fca5a5;
}

.search-result {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 14px 15px;
  margin: 8px 0;
  color: #f8fafc;
  background: rgba(255,255,255,0.055);
  cursor: pointer;
}

.search-result:hover {
  border-color: rgba(196,181,253,0.32);
  background: linear-gradient(135deg, rgba(124,58,237,0.20), rgba(255,255,255,0.06));
  transform: translateY(-1px);
}

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

.search-project-pill {
  max-width: 72%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #ddd6fe;
  background: rgba(139,92,246,0.18);
  border: 1px solid rgba(167,139,250,0.22);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 900;
}

.search-role {
  color: #8b8ba3;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.search-result-title {
  font-weight: 900;
  font-size: 15px;
  margin-bottom: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-result-preview {
  color: #a1a1aa;
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 800px) {
  .header-actions {
    width: 100%;
    grid-column: 1 / -1;
  }

  .global-search-btn {
    min-width: 0;
    flex: 1;
  }

  .global-search-btn kbd {
    display: none;
  }

  .header-actions .model-select {
    flex: 1;
    width: auto;
  }
}

@media (max-width: 560px) {
  .search-overlay {
    padding: 12px;
    place-items: stretch;
  }

  .search-modal {
    max-height: calc(100dvh - 24px);
    border-radius: 24px;
  }

  .search-modal-head {
    padding: 20px 18px 12px;
  }

  .search-input-wrap {
    margin: 0 18px;
  }

  .search-scope-row {
    padding-left: 18px;
    padding-right: 18px;
  }
}


/* Search jump highlight */
.message-highlight .message {
  box-shadow:
    0 0 0 2px rgba(196,181,253,.9),
    0 0 42px rgba(139,92,246,.42);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.message-highlight .message.assistant {
  transform: translateY(-1px);
}


@keyframes messagePulseHighlight {
  0% {
    box-shadow: 0 0 0 0 rgba(139,92,246,0);
  }
  30% {
    box-shadow:
      0 0 0 2px rgba(196,181,253,0.9),
      0 0 40px rgba(139,92,246,0.55);
  }
  60% {
    box-shadow:
      0 0 0 2px rgba(196,181,253,0.9),
      0 0 40px rgba(139,92,246,0.55);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(139,92,246,0);
  }
}

.message-highlight .message {
  animation: messagePulseHighlight 1.2s ease-in-out 6;
}
/* Admin access button + drawer */
.welcome-greeting {
  display: none !important;
}

.welcome-center {
  font-size: 18px;
  color: #c4b5fd;
  margin-bottom: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sidebar-footer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0 4px;
}

/* All three buttons: Profile, Log out, Security — same height, same
   padding, same baseline. Each gets an icon + label aligned left. */
.sidebar-footer-actions .sidebar-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #a1a1aa;
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.sidebar-footer-actions .sidebar-action-btn:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* Profile takes available space, Log out and Security are icon+label fixed */
.sidebar-footer-actions #profileBtn {
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
}
.sidebar-footer-actions #logoutBtn {
  flex-shrink: 0;
  color: #6b7280;
}
.sidebar-footer-actions #logoutBtn:hover {
  background: rgba(248, 113, 113, 0.10);
  color: #f87171;
}
.sidebar-footer-actions #securityAdminBtn {
  flex-shrink: 0;
  color: #c4b5fd;
}
.sidebar-footer-actions #securityAdminBtn:hover {
  background: rgba(139, 92, 246, 0.15);
  color: #fff;
}

.sidebar-footer-actions .sidebar-btn-icon {
  font-size: 16px;
  line-height: 1;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-footer-actions .sidebar-btn-label {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-shell.sidebar-collapsed .sidebar-footer-actions {
  flex-direction: column;
  gap: 4px;
  padding: 0;
}
.app-shell.sidebar-collapsed .sidebar-footer-actions .sidebar-action-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
  flex: none;
}
.app-shell.sidebar-collapsed .sidebar-footer-actions .sidebar-btn-label {
  display: none;
}

.admin-icon-btn {
  width: 42px !important;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #c4b5fd !important;
  cursor: pointer;
  padding: 0 !important;
}

.admin-icon-btn:hover {
  background: rgba(139,92,246,0.25) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

.app-shell.sidebar-collapsed .sidebar-footer-actions {
  flex-direction: column;
  gap: 10px;
}

.app-shell.sidebar-collapsed .sidebar-footer-actions #logoutBtn,
.app-shell.sidebar-collapsed .sidebar-footer-actions #adminBtn {
  flex: 0 0 44px;
}

.admin-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(3, 3, 10, 0.52);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: flex-end;
}

.admin-drawer {
  width: min(440px, 100vw);
  height: 100%;
  background: rgba(15, 15, 28, 0.98);
  border-left: 1px solid rgba(255,255,255,0.10);
  box-shadow: -28px 0 90px rgba(0,0,0,0.55);
  padding: 22px;
  display: flex;
  flex-direction: column;
  color: #f8fafc;
}

.admin-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
}

.admin-drawer-head h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.admin-drawer-head p {
  margin: 6px 0 0;
  color: #8b8ba3;
  font-size: 13px;
  line-height: 1.45;
}

.admin-close-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: #c4b5fd;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.admin-close-btn:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.admin-add-card {
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
  margin-bottom: 18px;
}

.admin-add-card label {
  margin-bottom: 10px;
}

.admin-add-row {
  display: flex;
  gap: 8px;
}

.admin-add-row input {
  min-width: 0;
}

.admin-add-row button {
  width: 84px;
  border: none;
  border-radius: 14px;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
}

.admin-add-row button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-msg {
  min-height: 18px;
  margin-top: 10px;
  font-size: 13px;
  color: #a1a1aa;
}

.admin-msg.success {
  color: #86efac;
}

.admin-msg.error,
.admin-error {
  color: #fca5a5 !important;
}

.admin-users-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  margin: 4px 0 10px;
}

.admin-users-head small {
  color: #71717a;
  letter-spacing: normal;
  text-transform: none;
  font-size: 12px;
}

.admin-users-list {
  flex: 1;
  overflow-y: auto;
  padding-right: 2px;
}

.admin-empty {
  color: #71717a;
  font-size: 13px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
}

.admin-user-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.075);
  margin-bottom: 8px;
}

.admin-user-main {
  min-width: 0;
}

.admin-user-main strong {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
}

.admin-user-meta {
  display: block;
  margin-top: 4px;
  color: #71717a;
  font-size: 11px;
}

.admin-status {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.admin-status.active {
  color: #bbf7d0;
  background: rgba(34,197,94,0.13);
  border: 1px solid rgba(34,197,94,0.22);
}

.admin-status.inactive {
  color: #fecaca;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.22);
}

.admin-user-action,
.admin-locked {
  border: none;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.admin-user-action {
  cursor: pointer;
  color: #e9d5ff;
  background: rgba(139,92,246,0.16);
}

.admin-user-action:hover {
  background: rgba(139,92,246,0.26);
  color: #fff;
}

.admin-user-action.danger {
  color: #fecaca;
  background: rgba(239,68,68,0.13);
}

.admin-user-action.danger:hover {
  background: rgba(239,68,68,0.24);
}

.admin-locked {
  color: #71717a;
  background: rgba(255,255,255,0.05);
}

@media (max-width: 560px) {
  .admin-drawer {
    width: 100vw;
    padding: 18px;
  }

  .admin-user-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-user-action,
  .admin-locked {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* ============================================================
   Conversation index — right-edge rail + slide-in drawer
   ============================================================ */

/* The rail itself. Whole strip is one big click target — much
   bigger hit zone than the previous "click each tick" model. */
.convo-minimap {
  position: absolute;
  right: 8px;
  top: 100px;          /* below the chat-header */
  bottom: 120px;       /* above the composer */
  width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;            /* tight: ticks read as a unit, not isolated dots */
  padding: 14px 0;
  z-index: 6;
  background: transparent;
  border: none;
  cursor: pointer;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.convo-minimap::-webkit-scrollbar { display: none; }
.convo-minimap.hidden { display: none; }

/* When the drawer is open, the rail recedes — same role, just no
   longer the actor on stage. */
.convo-minimap.convo-minimap-dimmed {
  opacity: 0.35;
  transform: translateX(2px);
}

.convo-minimap:hover .convo-minimap-tick {
  /* Whole rail glows on hover so it's clearly one clickable unit. */
  background: rgba(196, 181, 253, 0.55);
}
.convo-minimap:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Individual ticks — purely visual, not interactive. */
.convo-minimap-tick {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 1px;
  flex-shrink: 0;
  transition: background 0.15s ease, width 0.15s ease;
}

/* ---- Slide-in drawer ---- */
.convo-index-drawer {
  position: absolute;
  right: 12px;
  top: 90px;
  bottom: 110px;
  width: 280px;
  background: linear-gradient(180deg, rgba(20, 9, 43, 0.96), rgba(15, 8, 32, 0.96));
  border: 1px solid rgba(124, 58, 237, 0.28);
  border-radius: 14px;
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9;
  transform-origin: right center;
  animation: convoDrawerIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.convo-index-drawer.hidden { display: none; }

@keyframes convoDrawerIn {
  from { opacity: 0; transform: translateX(8px) scale(0.985); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Drawer header — subtle gradient strip with title + count. */
.convo-index-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.convo-index-title {
  font-size: 10.5px;
  font-weight: 600;
  color: #c4b5fd;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.convo-index-count {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
  color: #6b6776;
}

/* Scrollable list of message rows. */
.convo-index-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
}
.convo-index-list::-webkit-scrollbar { width: 6px; }
.convo-index-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 3px;
}

/* Single row — one line per user message. */
.convo-index-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  border-radius: 7px;
  padding: 7px 10px 7px 8px;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  color: #e7e5ec;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.convo-index-row:hover {
  background: rgba(124, 58, 237, 0.10);
  color: #fff;
}
.convo-index-row:focus-visible {
  outline: none;
  background: rgba(124, 58, 237, 0.14);
  color: #fff;
}
.convo-index-row.active {
  background: rgba(124, 58, 237, 0.18);
  border-left-color: #7c3aed;
  color: #fff;
}

.convo-index-row-num {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  color: #6b6776;
  text-align: right;
  user-select: none;
}
.convo-index-row.active .convo-index-row-num,
.convo-index-row:hover .convo-index-row-num {
  color: #c4b5fd;
}
.convo-index-row-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* Hide on small screens — the drawer would crowd the chat too much.
   Mobile users scroll naturally. */
@media (max-width: 720px) {
  .convo-minimap,
  .convo-index-drawer { display: none !important; }
}
/* ============================================================
   Profile drawer — matches admin drawer pattern
   ============================================================ */
.profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(3, 3, 10, 0.52);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: flex-end;
}

.profile-overlay.hidden {
  display: none;
}

.profile-drawer {
  width: min(480px, 100vw);
  height: 100%;
  background: rgba(15, 15, 28, 0.98);
  border-left: 1px solid rgba(255,255,255,0.10);
  box-shadow: -28px 0 90px rgba(0,0,0,0.55);
  padding: 22px;
  display: flex;
  flex-direction: column;
  color: #f8fafc;
  overflow-y: auto;
}

.profile-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.profile-drawer-head h3 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.03em;
}

.profile-drawer-head p {
  margin: 6px 0 0;
  color: #8b8ba3;
  font-size: 13px;
  line-height: 1.45;
}

.profile-close-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: #f8fafc;
  cursor: pointer;
  font-size: 18px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.profile-close-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.22);
}

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

.profile-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-field label {
  font-size: 13px;
  font-weight: 600;
  color: #d4d4d8;
  letter-spacing: 0.01em;
}

.profile-hint-inline {
  font-weight: 400;
  color: #71717a;
  font-size: 12px;
  margin-left: 4px;
}

.profile-field input,
.profile-field textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9px;
  color: #f4f4f5;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  resize: vertical;
}

.profile-field input:focus,
.profile-field textarea:focus {
  border-color: rgba(196,181,253,0.6);
  background: rgba(255,255,255,0.06);
}

.profile-field textarea {
  min-height: 70px;
  line-height: 1.5;
}

.profile-char-count {
  text-align: right;
  font-size: 11px;
  color: #71717a;
  font-variant-numeric: tabular-nums;
}

.profile-tone-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.profile-tone {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #d4d4d8;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.profile-tone:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}

.profile-tone.active {
  background: linear-gradient(135deg, rgba(124,58,237,0.25), rgba(192,38,211,0.25));
  border-color: rgba(196,181,253,0.6);
  color: #fff;
}

.profile-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.profile-save-btn {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  border: none;
  color: white;
  cursor: pointer;
  padding: 10px 22px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.profile-save-btn:hover {
  filter: brightness(1.1);
}

.profile-save-btn:active {
  transform: scale(0.98);
}

.profile-reset-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: #a1a1aa;
  cursor: pointer;
  padding: 9px 16px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.profile-reset-btn:hover {
  color: #f4f4f5;
  border-color: rgba(255,255,255,0.22);
}

.profile-msg {
  font-size: 13px;
  color: #c4b5fd;
  min-height: 18px;
}

.profile-msg.error {
  color: #f87171;
}

/* Footer profile button for the simpler project.html footer. */
.profile-footer-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: #d4d4d8;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  margin-bottom: 8px;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.profile-footer-btn:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
}

@media (max-width: 560px) {
  .profile-drawer {
    width: 100vw;
    padding: 18px;
  }
}

/* ============================================================
   Chat row actions: ⋯ menu, pin badge, inline rename
   ============================================================ */

.session-item {
  position: relative;
}

.session-pin-icon {
  flex-shrink: 0;
  font-size: 11px;
  color: #c4b5fd;
  margin-right: 2px;
  opacity: 0.85;
}

.session-menu-btn {
  background: transparent;
  border: none;
  color: #71717a;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}

.session-item:hover .session-menu-btn,
.session-menu-btn.active,
.session-menu-btn:focus-visible {
  opacity: 1;
}

.session-menu-btn:hover,
.session-menu-btn.active {
  color: #f4f4f5;
  background: rgba(255,255,255,0.08);
}

.session-menu {
  position: absolute;
  top: 100%;
  right: 4px;
  margin-top: 4px;
  z-index: 30;
  min-width: 160px;
  background: rgba(20, 20, 32, 0.98);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.55);
  backdrop-filter: blur(18px);
  padding: 5px;
  animation: sessionMenuIn 0.14s ease-out;
}

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

.session-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: transparent;
  border: none;
  color: #f4f4f5;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s ease, color 0.12s ease;
}
.session-menu-item:hover {
  background: rgba(255,255,255,0.07);
}
.session-menu-item.danger {
  color: #f87171;
}
.session-menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.12);
}

.session-menu-icon {
  width: 14px;
  text-align: center;
  font-size: 12px;
  flex-shrink: 0;
  color: #a1a1aa;
}
.session-menu-item.danger .session-menu-icon {
  color: #f87171;
}

.session-rename-input {
  flex: 1;
  min-width: 0;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(196,181,253,0.4);
  border-radius: 7px;
  color: #f4f4f5;
  font-family: inherit;
  font-size: 13px;
  padding: 5px 8px;
  outline: none;
}
.session-rename-input:focus {
  border-color: rgba(196,181,253,0.7);
  background: rgba(255,255,255,0.14);
}

/* ============================================================
   Custom model dropdown — appears next to the (now hidden)
   native <select id="modelSelect">. Shows model name with a
   muted audience-tagged description on the second line.
   ============================================================ */

.model-select-hidden-native {
  display: none !important;
}

.model-dropdown-wrap {
  position: relative;
  width: 230px;
}

.model-dropdown-btn {
  width: 100%;
  background: #171728;
  color: #f3f4f6;
  border: 1px solid #2a2a40;
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.model-dropdown-btn:hover {
  border-color: #3b3b5a;
  background: #1c1c33;
}

.model-dropdown-btn[aria-expanded="true"] {
  border-color: #6366f1;
}

.model-dropdown-btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.model-dropdown-caret {
  font-size: 11px;
  color: #9ca3af;
  flex-shrink: 0;
}

.model-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 320px;
  max-width: 380px;
  max-height: 420px;
  overflow-y: auto;
  background: #171728;
  border: 1px solid #2a2a40;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  padding: 6px;
  z-index: 200;
}

.model-dropdown-panel.hidden {
  display: none;
}

.model-option {
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  outline: none;
  transition: background 0.12s ease;
}

.model-option:hover,
.model-option:focus {
  background: #232342;
}

.model-option.active {
  background: #2a2a55;
}

.model-option-name {
  font-size: 13px;
  font-weight: 600;
  color: #f3f4f6;
  margin-bottom: 2px;
}

.model-option-desc {
  font-size: 11.5px;
  color: #9ca3af;
  line-height: 1.35;
}

/* ============================================================
   Group separator inside the model dropdown.
   Splits the list into "Text · PDF · Docs · OCR" (above) and
   "Vision · drop screenshots & images" (below). The separator
   itself is non-interactive — keyboard arrow-nav uses
   .model-option which skips this element naturally.
   Visually: a horizontal hairline with a small uppercase label
   floating in the middle, like a section divider. */
.model-option-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 8px;
  user-select: none;
  pointer-events: none;
}
/* When the separator is the very first element in the panel, lose
   the top padding so it sits flush with the rounded panel edge. */
.model-option-separator:first-child {
  padding-top: 10px;
}
.model-option-separator::before,
.model-option-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.model-option-separator-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #9ca3af;
  white-space: nowrap;
}

/* Mobile: full-width dropdown so it's tappable */
@media (max-width: 760px) {
  .model-dropdown-wrap {
    width: 100%;
  }
  .model-dropdown-panel {
    right: auto;
    left: 0;
    min-width: 100%;
    max-width: none;
  }
}

/* ============================================================
   Acceptable Use Policy modal — shown on first login after
   each new policy version. Cannot be dismissed; the only ways
   out are "I acknowledge" or "Log out".
   ============================================================ */
.policy-ack-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 16, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.policy-ack-card {
  background: #14142b;
  border: 1px solid #2a2a40;
  border-radius: 14px;
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 580px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.55);
  color: #f3f4f6;
}

.policy-ack-icon {
  font-size: 28px;
  color: #818cf8;
  margin-bottom: 8px;
}

.policy-ack-card h2 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 600;
  color: #f8fafc;
}

.policy-ack-body {
  font-size: 14px;
  line-height: 1.6;
  color: #d1d5db;
}

.policy-ack-body p {
  margin: 0 0 12px;
}

.policy-ack-body strong {
  color: #f8fafc;
}

.policy-ack-body ul {
  padding-left: 22px;
  margin: 6px 0 12px;
}

.policy-ack-body li {
  margin: 4px 0;
}

.policy-ack-meta {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #2a2a40;
  font-size: 12px;
  color: #9ca3af;
}

.policy-ack-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.policy-ack-primary {
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.policy-ack-primary:hover:not(:disabled) {
  background: #4f46e5;
}

.policy-ack-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.policy-ack-secondary {
  background: transparent;
  color: #d1d5db;
  border: 1px solid #2a2a40;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.policy-ack-secondary:hover:not(:disabled) {
  background: #1f1f3a;
  border-color: #3b3b5a;
}

.policy-ack-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.policy-ack-msg {
  margin-top: 12px;
  font-size: 13px;
  color: #fca5a5;
  min-height: 18px;
}

@media (max-width: 540px) {
  .policy-ack-card {
    padding: 22px 20px;
    max-height: 92vh;
  }
  .policy-ack-actions {
    flex-direction: column-reverse;
  }
  .policy-ack-primary,
  .policy-ack-secondary {
    width: 100%;
  }
}
/* ---- Blocked access screen ---- */
.blocked-card {
  width: 100%;
  max-width: 420px;
  padding: 40px 36px;
  border-radius: 22px;
  background: rgba(16, 16, 32, 0.82);
  border: 1px solid rgba(248, 113, 113, 0.25);
  box-shadow: 0 30px 90px rgba(0,0,0,0.5);
  backdrop-filter: blur(20px);
  text-align: center;
}
.blocked-icon {
  font-size: 40px;
  margin-bottom: 16px;
}
.blocked-title {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
.blocked-body {
  font-size: 14px;
  color: #a1a1aa;
  line-height: 1.6;
  margin: 0 0 10px;
}
.blocked-ip {
  font-family: ui-monospace, "Geist Mono", "SF Mono", monospace;
  font-size: 13px;
  color: #f87171;
  background: rgba(248, 113, 113, 0.10);
  border: 1px solid rgba(248, 113, 113, 0.20);
  padding: 2px 8px;
  border-radius: 5px;
}
.blocked-sub {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}