/* =====================================================================
   CURIOUS LLM — Professional UI Refinement Layer (v1.0)
   ---------------------------------------------------------------------
   Purpose  : Modernize the visual language of the app WITHOUT changing
              any feature, class name, id, or JavaScript behavior.
   Scope    : Pure CSS — safe drop-in file, loaded AFTER style.css so
              every rule here wins with the same specificity.
   Guarantee: No selectors are renamed, no elements are hidden, no
              behavior changes. All existing IDs / classes still work.
   ===================================================================== */

/* ---------- 1. Refined design tokens ---------- */
:root {
  /* Cool, modern neutral palette + a subtle indigo/violet accent */
  --pro-accent:        #6366f1;      /* indigo-500 */
  --pro-accent-strong: #4f46e5;      /* indigo-600 */
  --pro-accent-soft:   #eef2ff;      /* indigo-50  */
  --pro-accent-ring:   rgba(99,102,241,.18);

  --pro-bg:            #ffffff;
  --pro-bg-alt:        #fafafa;
  --pro-sidebar-bg:    #f7f7f8;
  --pro-surface:       #ffffff;
  --pro-surface-2:     #f4f4f5;

  --pro-border:        #e5e7eb;
  --pro-border-soft:   #eef0f3;

  --pro-text:          #0f172a;
  --pro-text-muted:    #64748b;
  --pro-text-soft:     #94a3b8;

  --pro-shadow-sm:     0 1px 2px rgba(15, 23, 42, .04);
  --pro-shadow-md:     0 4px 14px rgba(15, 23, 42, .06),
                       0 1px 3px rgba(15, 23, 42, .04);
  --pro-shadow-lg:     0 12px 32px rgba(15, 23, 42, .10),
                       0 3px 8px  rgba(15, 23, 42, .05);
  --pro-shadow-pop:    0 20px 48px rgba(15, 23, 42, .16),
                       0 4px 12px  rgba(15, 23, 42, .08);

  --pro-radius-sm:     8px;
  --pro-radius-md:     12px;
  --pro-radius-lg:     16px;
  --pro-radius-xl:     20px;

  --pro-ease:          cubic-bezier(.2, .8, .2, 1);
}

body.dark-mode {
  --pro-accent:        #818cf8;      /* indigo-400 */
  --pro-accent-strong: #6366f1;
  --pro-accent-soft:   #1e1b4b;
  --pro-accent-ring:   rgba(129, 140, 248, .22);

  --pro-bg:            #0f1013;
  --pro-bg-alt:        #131418;
  --pro-sidebar-bg:    #17181c;
  --pro-surface:       #1a1b1f;
  --pro-surface-2:     #212227;

  --pro-border:        #2a2b32;
  --pro-border-soft:   #23242a;

  --pro-text:          #ececec;
  --pro-text-muted:    #a1a1aa;
  --pro-text-soft:     #71717a;

  --pro-shadow-sm:     0 1px 2px rgba(0, 0, 0, .30);
  --pro-shadow-md:     0 4px 14px rgba(0, 0, 0, .35),
                       0 1px 3px rgba(0, 0, 0, .28);
  --pro-shadow-lg:     0 12px 32px rgba(0, 0, 0, .45),
                       0 3px 8px  rgba(0, 0, 0, .30);
  --pro-shadow-pop:    0 20px 48px rgba(0, 0, 0, .55),
                       0 4px 12px  rgba(0, 0, 0, .35);
}

/* Font family upgrade — Inter for a sharper, more professional look. */
body,
.chat-app,
.chat-sidebar,
.chat-main {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  letter-spacing: -0.005em;
}

/* Global background polish */
.chat-app { background: var(--pro-bg); }
body.dark-mode .chat-app { background: var(--pro-bg); }

/* ===================================================================
   2. SIDEBAR — cleaner, more spacious, subtle depth
   =================================================================== */
.chat-sidebar {
  background: var(--pro-sidebar-bg);
  border-right: 1px solid var(--pro-border-soft);
  padding: 12px 10px 10px !important;
}

.chat-sidebar .sidebar-header {
  padding: 6px 8px 14px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-sidebar .sidebar-brand-word {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--pro-text);
  text-transform: uppercase;
}

.chat-sidebar .sidebar-inner-toggle {
  color: var(--pro-text-muted);
  border-radius: var(--pro-radius-sm);
  transition: background .18s var(--pro-ease), color .18s var(--pro-ease);
}
.chat-sidebar .sidebar-inner-toggle:hover {
  background: var(--pro-surface-2);
  color: var(--pro-text);
}

/* New chat button — primary action feel, but not loud */
.chat-sidebar .new-chat-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 4px);
  margin: 4px 2px 6px;
  padding: 10px 12px !important;
  background: var(--pro-surface);
  color: var(--pro-text);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius-md);
  font-weight: 600;
  font-size: 13.5px;
  box-shadow: var(--pro-shadow-sm);
  transition: transform .12s var(--pro-ease),
              border-color .18s var(--pro-ease),
              box-shadow .18s var(--pro-ease),
              background .18s var(--pro-ease);
}
.chat-sidebar .new-chat-btn:hover {
  background: var(--pro-surface);
  border-color: var(--pro-accent);
  box-shadow: 0 4px 14px var(--pro-accent-ring);
  color: var(--pro-text);
  transform: translateY(-1px);
}
.chat-sidebar .new-chat-btn i { font-size: 14px; color: var(--pro-accent); }

/* Search chats button */
.search-chats-btn {
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 4px);
  margin: 0 2px 6px;
  padding: 9px 12px !important;
  background: transparent;
  color: var(--pro-text-muted);
  border: 1px solid transparent;
  border-radius: var(--pro-radius-md);
  font-size: 13px;
  font-weight: 500;
  transition: background .18s var(--pro-ease), color .18s var(--pro-ease);
}
.search-chats-btn:hover {
  background: var(--pro-surface-2);
  color: var(--pro-text);
}
.search-chats-btn i { font-size: 14px; }

.search-chats-box {
  margin: 0 2px 8px;
  padding: 8px 10px;
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius-md);
  display: flex; align-items: center; gap: 8px;
}
.search-chats-box input {
  border: 0; background: transparent; outline: none;
  color: var(--pro-text); font-size: 13px; flex: 1;
}
.search-chats-box i { color: var(--pro-text-muted); font-size: 13px; }

/* History label */
.chat-sidebar .history-label {
  padding: 12px 12px 6px !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--pro-text-soft);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}

/* History items — cleaner list */
.chat-sidebar .history-item {
  margin: 1px 2px;
  padding: 8px 10px !important;
  border-radius: var(--pro-radius-sm);
  border: 1px solid transparent;
  color: var(--pro-text);
  font-size: 13px;
  transition: background .14s var(--pro-ease), color .14s var(--pro-ease);
}
.chat-sidebar .history-item:hover {
  background: var(--pro-surface-2);
  color: var(--pro-text);
}
.chat-sidebar .history-item.active {
  background: var(--pro-accent-soft);
  color: var(--pro-text);
  font-weight: 600;
  border-color: transparent;
}
.chat-sidebar .history-item .text-truncate,
.chat-sidebar .history-item .chat-title-text {
  color: inherit;
  font-size: 13px;
}
body.dark-mode .chat-sidebar .history-item.active {
  background: rgba(129, 140, 248, .12);
}

.chat-menu-btn {
  color: var(--pro-text-muted);
  border-radius: 6px;
}
.chat-menu-btn:hover { background: var(--pro-surface); color: var(--pro-text); }

/* Sidebar footer / user trigger */
.chat-sidebar .sidebar-footer {
  border-top: 1px solid var(--pro-border-soft);
  padding: 8px 2px 2px;
  margin-top: 6px;
}

.user-menu-trigger {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--pro-radius-md);
  color: var(--pro-text);
  transition: background .18s var(--pro-ease);
}
.user-menu-trigger:hover { background: var(--pro-surface-2); }
.user-avatar-circle {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pro-accent) 0%, var(--pro-accent-strong) 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 2px 6px var(--pro-accent-ring);
}
.uname { font-size: 13.5px; font-weight: 600; }
.udots { color: var(--pro-text-muted); font-size: 14px; margin-left: auto; }

/* ===================================================================
   3. TOP BAR — refined model dropdown
   =================================================================== */
.chat-topbar {
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--pro-border-soft);
  background: var(--pro-bg);
  min-height: 56px;
}

.hana-model-dd-toggle {
  padding: 7px 12px !important;
  border-radius: 10px;
  background: transparent;
  color: var(--pro-text);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: background .18s var(--pro-ease), border-color .18s var(--pro-ease);
}
.hana-model-dd-toggle:hover {
  background: var(--pro-surface-2);
  border-color: var(--pro-border);
}
.hana-model-dd-caret { color: var(--pro-text-muted); font-size: 12px; }

.hana-model-dd-menu {
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius-lg);
  box-shadow: var(--pro-shadow-pop);
  padding: 6px;
  min-width: 280px;
}
.hana-model-dd-item {
  border-radius: 10px;
  padding: 10px 12px;
  transition: background .14s var(--pro-ease);
}
.hana-model-dd-item:hover { background: var(--pro-surface-2); }
.hana-model-dd-item-title { font-weight: 600; font-size: 13.5px; color: var(--pro-text); }
.hana-model-dd-item-sub   { font-size: 12px; color: var(--pro-text-muted); margin-top: 2px; }
.hana-model-dd-check {
  color: var(--pro-accent);
  font-size: 16px;
  opacity: 0;
  transition: opacity .14s ease;
}
.hana-model-dd-item[aria-checked="true"] .hana-model-dd-check { opacity: 1; }

/* ===================================================================
   4. EMPTY STATE — welcoming, centered, professional
   =================================================================== */
.chat-empty h2 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--pro-text);
  margin-bottom: 8px;
}
.chat-empty p {
  color: var(--pro-text-muted);
  font-size: 15px;
  margin-bottom: 28px;
}

/* Suggestion chips */
.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}
.suggestion-chips .chip {
  padding: 8px 14px;
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--pro-text-muted);
  cursor: pointer;
  transition: all .18s var(--pro-ease);
}
.suggestion-chips .chip:hover {
  background: var(--pro-accent-soft);
  border-color: var(--pro-accent);
  color: var(--pro-accent-strong);
  transform: translateY(-1px);
  box-shadow: var(--pro-shadow-sm);
}
body.dark-mode .suggestion-chips .chip:hover {
  color: var(--pro-accent);
  background: rgba(129, 140, 248, .10);
}

/* ===================================================================
   5. COMPOSER — the centerpiece. Elevated card, refined controls.
   =================================================================== */
.composer-card,
.chat-composer-bottom {
  padding: 0 !important;
}

.composer-inner {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--pro-shadow-md);
  padding: 8px 8px 8px 12px !important;
  transition: border-color .18s var(--pro-ease), box-shadow .18s var(--pro-ease);
}
.composer-inner:focus-within {
  border-color: var(--pro-accent) !important;
  box-shadow: 0 0 0 4px var(--pro-accent-ring), var(--pro-shadow-md);
}

body.dark-mode .composer-inner {
  background: var(--pro-surface) !important;
  border-color: var(--pro-border) !important;
}

.composer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

.message-input {
  border: 0 !important;
  background: transparent !important;
  color: var(--pro-text) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  padding: 10px 6px !important;
  resize: none;
  outline: none;
  flex: 1;
}
.message-input::placeholder { color: var(--pro-text-soft); }

/* Composer buttons — round, minimal, hover feedback */
.composer-btn {
  width: 36px; height: 36px;
  min-width: 36px;
  padding: 0 !important;
  border: 0;
  background: transparent;
  color: var(--pro-text-muted);
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .16s var(--pro-ease),
              color .16s var(--pro-ease),
              transform .12s var(--pro-ease);
}
.composer-btn:hover {
  background: var(--pro-surface-2);
  color: var(--pro-text);
}
.composer-btn:active { transform: scale(.94); }

.composer-btn.send {
  background: var(--pro-text) !important;
  color: var(--pro-bg) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .18);
}
.composer-btn.send:hover {
  background: var(--pro-accent-strong) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px var(--pro-accent-ring);
}
.composer-btn.send:disabled {
  background: var(--pro-surface-2) !important;
  color: var(--pro-text-soft) !important;
  box-shadow: none;
  cursor: not-allowed;
}
body.dark-mode .composer-btn.send {
  background: #ececec !important;
  color: #0f1013 !important;
}
body.dark-mode .composer-btn.send:hover {
  background: var(--pro-accent) !important;
  color: #fff !important;
}

/* Plus button — subtle circle */
.composer-btn.plus-btn {
  color: var(--pro-text-muted);
}
.composer-btn.plus-btn[aria-expanded="true"] {
  background: var(--pro-surface-2);
  color: var(--pro-text);
}

/* Mic button */
.composer-btn.mic-btn i { font-size: 16px; }

/* Enhance button (magic wand) — accent tint */
.composer-btn.enhance-btn { color: var(--pro-accent); }
.composer-btn.enhance-btn:hover {
  background: var(--pro-accent-soft);
  color: var(--pro-accent-strong);
}
body.dark-mode .composer-btn.enhance-btn:hover {
  background: rgba(129,140,248,.14);
}

.composer-help {
  text-align: center;
  color: var(--pro-text-soft);
  font-size: 11.5px;
  margin-top: 10px;
}

/* ===================================================================
   6. PLUS MENU — polished popover with pill toggles
   =================================================================== */
.plus-menu {
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius-lg);
  box-shadow: var(--pro-shadow-pop);
  padding: 6px;
  min-width: 240px;
}

.plus-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--pro-text);
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .14s var(--pro-ease);
}
.plus-menu-item:hover { background: var(--pro-surface-2); }
.plus-menu-item i {
  font-size: 16px;
  color: var(--pro-text-muted);
  width: 20px;
  text-align: center;
}
.plus-menu-item.plus-menu-createimage i { color: #ec4899; }
.plus-menu-item.plus-menu-websearch i   { color: #10b981; }
.plus-menu-item.plus-menu-enhance i     { color: var(--pro-accent); }
.plus-menu-item.plus-menu-file i        { color: #f59e0b; }

/* Toggle pill (Web Search / Prompt Enhance) — modern switch */
.plus-menu-toggle {
  margin-left: auto;
  width: 32px;
  height: 18px;
  background: #d1d5db;
  border-radius: 999px;
  position: relative;
  transition: background .18s var(--pro-ease);
  flex-shrink: 0;
}
.plus-menu-toggle-dot {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: left .18s var(--pro-ease);
}
.plus-menu-item[aria-checked="true"] .plus-menu-toggle {
  background: var(--pro-accent);
}
.plus-menu-item[aria-checked="true"] .plus-menu-toggle-dot {
  left: 16px;
}
body.dark-mode .plus-menu-toggle { background: #3f3f46; }

/* ===================================================================
   7. FILE ATTACHMENT PREVIEW STRIP
   =================================================================== */
.file-preview-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 4px 8px;
}
.file-preview-strip:empty { display: none; }

/* ===================================================================
   8. CHAT MESSAGES — better typography and spacing
   =================================================================== */
.chat-messages {
  padding: 32px 20px 24px;
}

.message {
  margin-bottom: 20px;
}

.message .bubble {
  font-size: 15px;
  line-height: 1.65;
}

.message.user .bubble {
  background: var(--pro-surface-2);
  border-radius: 18px 18px 4px 18px;
  padding: 12px 16px;
}
body.dark-mode .message.user .bubble {
  background: #2a2b32;
}

.message.assistant .bubble {
  background: transparent;
}

.message .bubble .content {
  color: var(--pro-text);
}

/* Assistant / user bubble headings look nicer */
.message .bubble h1,
.message .bubble h2,
.message .bubble h3,
.message .bubble h4 {
  color: var(--pro-text);
  letter-spacing: -0.01em;
}

/* Code block subtle polish */
.message .bubble pre {
  border-radius: var(--pro-radius-md) !important;
  border: 1px solid var(--pro-border) !important;
  box-shadow: var(--pro-shadow-sm);
}

/* Download-link chip */
.download-link a {
  color: var(--pro-accent-strong);
  font-weight: 600;
}
.download-link a:hover { color: var(--pro-accent); }

/* Generated image card */
.gen-image-card {
  border-radius: var(--pro-radius-lg);
  overflow: hidden;
  box-shadow: var(--pro-shadow-md);
  border: 1px solid var(--pro-border);
  max-width: 480px;
  position: relative;
}
.gen-image-card img { display: block; width: 100%; }
.gen-image-actions {
  position: absolute;
  top: 10px; right: 10px;
  display: flex; gap: 6px;
}
.gen-image-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .72);
  color: #fff;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  text-decoration: none;
  transition: background .16s var(--pro-ease), transform .12s var(--pro-ease);
}
.gen-image-btn:hover { background: rgba(15, 23, 42, .92); transform: scale(1.05); color: #fff; }

/* ===================================================================
   9. USER POPUP MENU (theme switcher, credits, profile, etc.)
   =================================================================== */
.user-popup-menu {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-radius-lg) !important;
  box-shadow: var(--pro-shadow-pop) !important;
  padding: 6px !important;
}
.user-popup-menu .menu-item {
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--pro-text);
  transition: background .14s var(--pro-ease);
}
.user-popup-menu .menu-item:hover { background: var(--pro-surface-2); }
.user-popup-menu .menu-item i {
  color: var(--pro-text-muted);
  font-size: 15px;
  margin-right: 8px;
}
.user-popup-menu .menu-email {
  padding: 10px 12px 6px;
  font-size: 12px;
  color: var(--pro-text-muted);
}
.user-popup-menu .menu-divider {
  height: 1px;
  background: var(--pro-border-soft);
  margin: 4px 0;
}
.plan-badge-row {
  color: var(--pro-accent-strong) !important;
  font-weight: 600;
}
body.dark-mode .plan-badge-row { color: var(--pro-accent) !important; }

/* Theme segmented control */
.theme-switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--pro-text);
}
.theme-switch-row i { color: var(--pro-text-muted); }
.theme-segs {
  margin-left: auto;
  display: inline-flex;
  background: var(--pro-surface-2);
  border-radius: 999px;
  padding: 2px;
}
.theme-seg {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border: 0;
  background: transparent;
  color: var(--pro-text-muted);
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  transition: background .16s var(--pro-ease), color .16s var(--pro-ease);
}
.theme-seg.active,
.theme-seg[aria-checked="true"] {
  background: var(--pro-surface);
  color: var(--pro-text);
  box-shadow: var(--pro-shadow-sm);
}

/* ===================================================================
   10. CONTEXT MENU (chat right-click / more) — polished
   =================================================================== */
.chat-context-menu {
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  border-radius: var(--pro-radius-lg);
  box-shadow: var(--pro-shadow-pop);
  padding: 6px;
  min-width: 180px;
}
.ccm-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--pro-text);
  border-radius: 8px;
  font-size: 13px;
  transition: background .14s var(--pro-ease);
}
.ccm-item:hover { background: var(--pro-surface-2); }
.ccm-item i { color: var(--pro-text-muted); font-size: 14px; }
.ccm-danger { color: #dc2626; }
.ccm-danger i { color: #dc2626; }
.ccm-danger:hover { background: #fef2f2; }
body.dark-mode .ccm-danger:hover { background: rgba(220,38,38,.10); }
.ccm-divider {
  height: 1px;
  background: var(--pro-border-soft);
  margin: 4px 0;
}

/* ===================================================================
   11. MODALS (rename / share / create image)
   =================================================================== */
.hana-modal,
.mfe-modal,
.cig-modal {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-radius-xl) !important;
  box-shadow: var(--pro-shadow-pop) !important;
}
.hana-modal-head,
.mfe-head,
.cig-head {
  border-bottom: 1px solid var(--pro-border-soft);
  padding: 16px 20px !important;
}
.hana-modal-head h3,
.cig-title { font-weight: 700; letter-spacing: -0.01em; }
.cig-subtitle { color: var(--pro-text-muted); font-size: 13px; margin-top: 2px; }

.cig-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pro-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.cig-upload-btn,
.cig-btn-ghost {
  background: var(--pro-surface);
  border: 1px solid var(--pro-border);
  color: var(--pro-text);
  border-radius: var(--pro-radius-md);
  padding: 9px 14px;
  font-weight: 600;
  font-size: 13px;
  transition: background .16s var(--pro-ease), border-color .16s var(--pro-ease);
}
.cig-upload-btn:hover,
.cig-btn-ghost:hover {
  background: var(--pro-surface-2);
  border-color: var(--pro-accent);
}
.cig-btn-primary {
  background: linear-gradient(135deg, var(--pro-accent) 0%, var(--pro-accent-strong) 100%);
  color: #fff;
  border: 0;
  border-radius: var(--pro-radius-md);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13.5px;
  box-shadow: 0 4px 14px var(--pro-accent-ring);
  transition: transform .12s var(--pro-ease), box-shadow .16s var(--pro-ease);
}
.cig-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px var(--pro-accent-ring);
}
.cig-prompt {
  border: 1px solid var(--pro-border) !important;
  border-radius: var(--pro-radius-md) !important;
  padding: 12px !important;
  font-size: 14px !important;
  background: var(--pro-surface) !important;
  color: var(--pro-text) !important;
  transition: border-color .18s var(--pro-ease), box-shadow .18s var(--pro-ease);
}
.cig-prompt:focus {
  outline: none;
  border-color: var(--pro-accent) !important;
  box-shadow: 0 0 0 4px var(--pro-accent-ring);
}

/* ===================================================================
   12. SCROLLBARS — thin, discreet
   =================================================================== */
.chat-sidebar .history-list,
.chat-messages,
.mfe-tree,
.mfe-preview {
  scrollbar-width: thin;
  scrollbar-color: var(--pro-border) transparent;
}
.chat-sidebar .history-list::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
  width: 8px;
}
.chat-sidebar .history-list::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
  background: var(--pro-border);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.chat-sidebar .history-list::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover {
  background: var(--pro-text-soft);
  background-clip: padding-box;
}

/* ===================================================================
   13. SIDEBAR REOPEN BUTTON (collapsed state)
   =================================================================== */
.sidebar-reopen-btn {
  background: var(--pro-surface) !important;
  border: 1px solid var(--pro-border) !important;
  color: var(--pro-text-muted) !important;
  border-radius: var(--pro-radius-md) !important;
  box-shadow: var(--pro-shadow-sm);
  transition: background .18s var(--pro-ease), color .18s var(--pro-ease);
}
.sidebar-reopen-btn:hover {
  background: var(--pro-surface-2) !important;
  color: var(--pro-text) !important;
}

/* ===================================================================
   14. ARCHIVED TOGGLE — subtle group header
   =================================================================== */
.archived-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  margin: 8px 2px 2px;
  color: var(--pro-text-muted);
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background .14s var(--pro-ease);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.archived-toggle:hover { background: var(--pro-surface-2); color: var(--pro-text); }
.archived-chev { transition: transform .18s var(--pro-ease); font-size: 11px; }
.archived-toggle[aria-expanded="true"] .archived-chev { transform: rotate(90deg); }

/* ===================================================================
   15. Guest login overlay — refined
   =================================================================== */
.guest-login-modal {
  border-radius: var(--pro-radius-xl) !important;
  box-shadow: var(--pro-shadow-pop) !important;
}
.guest-google-login {
  border-radius: var(--pro-radius-md) !important;
  font-weight: 600 !important;
  transition: all .18s var(--pro-ease) !important;
}
.guest-google-login:hover {
  border-color: var(--pro-accent) !important;
  box-shadow: 0 6px 18px var(--pro-accent-ring) !important;
}

/* ===================================================================
   16. RESPONSIVE POLISH
   =================================================================== */
@media (max-width: 768px) {
  .chat-empty h2 { font-size: 24px; }
  .composer-inner { border-radius: 20px !important; }
  .plus-menu, .hana-model-dd-menu { min-width: 220px; }
}

/* ===================================================================
   17. FOCUS-VISIBLE — a11y polish
   =================================================================== */
.composer-btn:focus-visible,
.new-chat-btn:focus-visible,
.hana-model-dd-toggle:focus-visible,
.plus-menu-item:focus-visible,
.ccm-item:focus-visible,
.menu-item:focus-visible {
  outline: 2px solid var(--pro-accent);
  outline-offset: 2px;
}

/* End of ui-pro.css */

/* ===================================================================
   18. UI FIXES v1.1  (surgical UI-only patches)
   -------------------------------------------------------------------
   Fixes three visible defects in the popup menus:
   A. User popup menu: Theme (Light|Dark) segmented control overflowed
      the popup on the right. Now it fits inside the seat, aligns with
      the other menu rows, and all rows share one consistent left edge
      (no more zig-zag between Profile / Theme / Support / Log out).
   B. Plus (+) menu: Web Search & Prompt Enhance toggles rendered as
      ugly blue squares / mismatched pill+check hybrid. They are now
      unified as one clean, compact iOS-style ON/OFF switch (grey OFF,
      brand-accent ON), consistent across both rows.
   C. Same rows: keep icons, labels and the toggle on a single tidy
      line inside the popup box.
   =================================================================== */

/* ---- A. USER POPUP MENU — keep every row on ONE aligned line ---- */
.user-popup-menu {
  padding: 6px !important;
  box-sizing: border-box;
  overflow: hidden;                 /* nothing may escape the seat */
}
.user-popup-menu .menu-item,
.user-popup-menu .theme-switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;                /* identical L/R padding on every row */
  margin: 0;                        /* remove any per-row drift */
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.2;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}
.user-popup-menu .menu-item i,
.user-popup-menu .theme-switch-row > i {
  width: 18px;                      /* fixed icon column = uniform left edge */
  margin-right: 0;
  font-size: 15px;
  text-align: center;
  color: var(--pro-text-muted);
  flex-shrink: 0;
}

/* Theme row: label + single on/off toggle, all on ONE straight line.
   The row is cursor-pointer because the whole row toggles the switch. */
.user-popup-menu .theme-switch-row {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;                /* keep 'Dark mode' on one straight line */
}
.user-popup-menu .theme-switch-row > span {
  flex: 1;
  min-width: 0;
  color: var(--pro-text);
  overflow: hidden;
  text-overflow: clip;                /* never truncate with ellipsis */
  white-space: nowrap;
}

/* Modern on/off toggle switch — matches the Web Search / Prompt Enhance
   toggle used in the plus (+) menu so the two look consistent. */
.user-popup-menu .theme-switch-row .theme-toggle-switch {
  margin-left: auto;
  position: relative;
  width: 32px;
  height: 18px;
  background: #d1d5db;
  border-radius: 999px;
  flex-shrink: 0;
  transition: background .18s var(--pro-ease);
  display: inline-block;
}
.user-popup-menu .theme-switch-row .theme-toggle-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: left .18s var(--pro-ease);
}
.user-popup-menu .theme-switch-row[aria-checked="true"] .theme-toggle-switch {
  background: var(--pro-accent);
}
.user-popup-menu .theme-switch-row[aria-checked="true"] .theme-toggle-dot {
  left: 16px;
}
body.dark-mode .user-popup-menu .theme-switch-row .theme-toggle-switch {
  background: #3f3f46;
}
body.dark-mode .user-popup-menu .theme-switch-row[aria-checked="true"] .theme-toggle-switch {
  background: var(--pro-accent);
}


/* ---- B. PLUS (+) MENU — unified clean toggle switch ---- */

/* Kill the old "check-mark" style for Web Search (was v50.8). We're going
   back to a single, clean pill switch matching Prompt Enhance so the two
   rows look consistent. */
.plus-menu-item.plus-menu-websearch .plus-menu-toggle,
.plus-menu-item.plus-menu-enhance   .plus-menu-toggle {
  position: relative !important;
  margin-left: auto !important;
  width: 34px !important;
  height: 20px !important;
  background: #d1d5db !important;       /* OFF */
  border-radius: 999px !important;
  box-shadow: none !important;
  border: 0 !important;
  flex-shrink: 0 !important;
  display: inline-block !important;     /* NOT flex — keeps dot positioned */
  transition: background .18s var(--pro-ease);
}
.plus-menu-item.plus-menu-websearch .plus-menu-toggle-dot,
.plus-menu-item.plus-menu-enhance   .plus-menu-toggle-dot {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.22) !important;
  transition: left .18s var(--pro-ease), transform .18s var(--pro-ease);
  opacity: 1 !important;
  transform: none !important;
  color: transparent !important;
  font-size: 0 !important;
}
/* Neutralise the old check-mark glyph injected by v50.8. */
.plus-menu-item.plus-menu-websearch .plus-menu-toggle-dot::before,
.plus-menu-item.plus-menu-enhance   .plus-menu-toggle-dot::before {
  content: "" !important;
  display: none !important;
}
/* ON state — brand accent + slide the knob right */
.plus-menu-item.plus-menu-websearch[aria-checked="true"] .plus-menu-toggle,
.plus-menu-item.plus-menu-enhance[aria-checked="true"]   .plus-menu-toggle {
  background: var(--pro-accent) !important;
}
.plus-menu-item.plus-menu-websearch[aria-checked="true"] .plus-menu-toggle-dot,
.plus-menu-item.plus-menu-enhance[aria-checked="true"]   .plus-menu-toggle-dot {
  left: 16px !important;
  transform: none !important;
  opacity: 1 !important;
}
/* OFF state — knob at left */
.plus-menu-item.plus-menu-websearch[aria-checked="false"] .plus-menu-toggle-dot,
.plus-menu-item.plus-menu-enhance[aria-checked="false"]   .plus-menu-toggle-dot {
  left: 2px !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Dark-mode track colours */
body.dark-mode .plus-menu-item.plus-menu-websearch .plus-menu-toggle,
body.dark-mode .plus-menu-item.plus-menu-enhance   .plus-menu-toggle {
  background: #3f3f46 !important;
}
body.dark-mode .plus-menu-item.plus-menu-websearch[aria-checked="true"] .plus-menu-toggle,
body.dark-mode .plus-menu-item.plus-menu-enhance[aria-checked="true"]   .plus-menu-toggle {
  background: var(--pro-accent) !important;
}

/* Keep the row layout consistent for both toggle items */
.plus-menu-item.plus-menu-websearch,
.plus-menu-item.plus-menu-enhance {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
}
.plus-menu-item.plus-menu-websearch .plus-menu-label,
.plus-menu-item.plus-menu-enhance   .plus-menu-label {
  flex: 1 !important;
  text-align: left !important;
}

/* End of UI FIXES v1.1 */

/* =====================================================================
   v53 — DARK-MODE TOGGLE POLISH
   Make the Dark-mode on/off switch in the user popup menu the SAME size
   and style as the Web Search / Prompt Enhance toggles, so all three
   look consistent and premium.
   ===================================================================== */
.user-popup-menu .theme-switch-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border-radius: 8px;
  transition: background .16s var(--pro-ease);
}
.user-popup-menu .theme-switch-row:hover {
  background: var(--pro-surface-2);
}
.user-popup-menu .theme-switch-row > i {
  color: var(--pro-text-muted);
  font-size: 15px;
  flex-shrink: 0;
}
.user-popup-menu .theme-switch-row > span:not(.theme-toggle-switch) {
  flex: 1;
  min-width: 0;
  color: var(--pro-text);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 14px;
}

/* The pill switch — matched exactly to the plus-menu (Web Search /
   Prompt Enhance) toggles: 34x20 track, 16x16 knob. */
.user-popup-menu .theme-switch-row .theme-toggle-switch {
  margin-left: auto !important;
  position: relative !important;
  width: 34px !important;
  height: 20px !important;
  background: #d1d5db !important;      /* OFF track */
  border-radius: 999px !important;
  flex-shrink: 0 !important;
  transition: background .18s var(--pro-ease);
  display: inline-block !important;
  box-shadow: none !important;
  border: 0 !important;
}
.user-popup-menu .theme-switch-row .theme-toggle-dot {
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 16px !important;
  height: 16px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.22) !important;
  transition: left .18s var(--pro-ease);
}
.user-popup-menu .theme-switch-row[aria-checked="true"] .theme-toggle-switch {
  background: var(--pro-accent) !important;
}
.user-popup-menu .theme-switch-row[aria-checked="true"] .theme-toggle-dot {
  left: 16px !important;
}

/* Dark-mode track colour when OFF (dot moves; track stays neutral) */
body.dark-mode .user-popup-menu .theme-switch-row .theme-toggle-switch {
  background: #3f3f46 !important;
}
body.dark-mode .user-popup-menu .theme-switch-row[aria-checked="true"] .theme-toggle-switch {
  background: var(--pro-accent) !important;
}
body.dark-mode .user-popup-menu .theme-switch-row:hover {
  background: rgba(255,255,255,.04);
}

/* =====================================================================
   v53 — Clean bulleted-list styling in assistant messages
   The renderer now converts "* item" / "- item" lines into real
   <ul class="md-list"> lists, so we style them properly here.
   ===================================================================== */
.message.assistant .content ul.md-list,
.message.assistant .content ol.md-list {
  margin: 6px 0 10px 0;
  padding-left: 22px;
}
.message.assistant .content ul.md-list li,
.message.assistant .content ol.md-list li {
  margin: 3px 0;
  line-height: 1.55;
}
.message.assistant .content ul.md-list li::marker {
  color: var(--pro-accent, #6b7280);
}

/* =====================================================================
   v53.1 — Assistant message headings (### / ## / #)
   The renderer now converts ATX markdown headings into real <h1>..<h6>
   tags with the .md-h class. We style them so users see clean, bold
   headings inside the answer instead of literal '###' markers.
   ===================================================================== */
.message.assistant .content .md-h {
  font-weight: 700;
  line-height: 1.35;
  color: inherit;
  margin: 14px 0 6px 0;
}
.message.assistant .content .md-h1 { font-size: 1.35em; }
.message.assistant .content .md-h2 { font-size: 1.20em; }
.message.assistant .content .md-h3 { font-size: 1.08em; }
.message.assistant .content .md-h4 { font-size: 1.00em; }
.message.assistant .content .md-h5 { font-size: 0.95em; }
.message.assistant .content .md-h6 { font-size: 0.90em; color: var(--pro-accent, #6b7280); }
.message.assistant .content .md-h:first-child { margin-top: 2px; }

/* v53 — make the whole dark-mode row a big click target and stop inner
   icons/spans from stealing the click event visually. */
.user-popup-menu .theme-switch-row > * {
  pointer-events: none;
}
.user-popup-menu .theme-switch-row .theme-toggle-switch,
.user-popup-menu .theme-switch-row .theme-toggle-dot {
  pointer-events: none;
}

/* =====================================================================
   v54 — SEGMENTED THEME PICKER (Light | Dark)
   Replaces the on/off Dark-mode toggle in the user popup menu with a
   segmented Light | Dark control that matches the rest of the UI.
   ===================================================================== */
.user-popup-menu .theme-switch-row.theme-switch-segmented {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  cursor: default;
  border-radius: 8px;
  white-space: nowrap;
}
.user-popup-menu .theme-switch-row.theme-switch-segmented > i {
  color: var(--pro-text-muted);
  font-size: 15px;
  flex-shrink: 0;
}
.user-popup-menu .theme-switch-row.theme-switch-segmented > span:not(.theme-segs) {
  flex: 1;
  min-width: 0;
  color: var(--pro-text);
  font-size: 14px;
}
.user-popup-menu .theme-switch-row.theme-switch-segmented .theme-segs {
  margin-left: auto !important;
  display: inline-flex !important;
  background: var(--pro-surface-2, #f1f2f4) !important;
  border-radius: 999px !important;
  padding: 3px !important;
  gap: 2px;
}
.user-popup-menu .theme-switch-row.theme-switch-segmented .theme-seg {
  border: 0 !important;
  background: transparent !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  color: var(--pro-text-muted, #6b7280) !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1 !important;
  transition: background .16s var(--pro-ease), color .16s var(--pro-ease), box-shadow .16s var(--pro-ease);
  pointer-events: auto !important;
}
.user-popup-menu .theme-switch-row.theme-switch-segmented .theme-seg i {
  font-size: 12px;
}
.user-popup-menu .theme-switch-row.theme-switch-segmented .theme-seg:hover {
  color: var(--pro-text, #111827) !important;
}
.user-popup-menu .theme-switch-row.theme-switch-segmented .theme-seg.active {
  background: #ffffff !important;
  color: var(--pro-text, #111827) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.10);
}

/* Dark-mode appearance of the segmented control */
body.dark-mode .user-popup-menu .theme-switch-row.theme-switch-segmented .theme-segs {
  background: rgba(255,255,255,.06) !important;
}
body.dark-mode .user-popup-menu .theme-switch-row.theme-switch-segmented .theme-seg {
  color: rgba(255,255,255,.60) !important;
}
body.dark-mode .user-popup-menu .theme-switch-row.theme-switch-segmented .theme-seg:hover {
  color: #fff !important;
}
body.dark-mode .user-popup-menu .theme-switch-row.theme-switch-segmented .theme-seg.active {
  background: #2a2a2e !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.30);
}

/* ---------- Theme dropdown (Light / Dark) ---------- */
.user-popup-menu .theme-switch-row.theme-switch-dropdown {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: default;
  position: relative;
}
.user-popup-menu .theme-switch-row.theme-switch-dropdown > i {
  color: var(--pro-text-muted);
  font-size: 16px;
}
.user-popup-menu .theme-switch-row.theme-switch-dropdown > span {
  flex: 1;
  font-size: 14px;
  color: var(--pro-text);
}
.theme-dd-wrap {
  position: relative;
}
.theme-dd-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--pro-border, #e5e7eb);
  background: var(--pro-surface, #fff);
  color: var(--pro-text, #111);
  border-radius: 999px;
  font-size: 12.5px;
  cursor: pointer;
  min-width: 82px;
  justify-content: space-between;
  transition: background .15s, border-color .15s;
}
.theme-dd-toggle:hover {
  background: var(--pro-hover, #f5f5f7);
}
.theme-dd-toggle .theme-dd-icon {
  font-size: 13px;
  color: #f5a623;
}
.theme-dd-toggle .theme-dd-caret {
  font-size: 10px;
  opacity: .7;
  margin-left: 2px;
}
.theme-dd-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  min-width: 130px;
  background: var(--pro-surface, #fff);
  border: 1px solid var(--pro-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0,0,0,.12);
  padding: 4px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-dd-menu[hidden] { display: none; }
.theme-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: var(--pro-text, #111);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.theme-dd-item:hover {
  background: var(--pro-hover, #f2f3f5);
}
.theme-dd-item i {
  font-size: 13px;
  width: 14px;
  text-align: center;
}
.theme-dd-item[data-theme="light"] i { color: #f5a623; }
.theme-dd-item[data-theme="dark"] i  { color: #6b7280; }
.theme-dd-item.active {
  background: var(--pro-hover, #eef0f3);
  font-weight: 600;
}

/* Dark mode adjustments */
body.dark-mode .theme-dd-toggle {
  background: #26272b;
  border-color: #3a3b40;
  color: #ECECEC;
}
body.dark-mode .theme-dd-toggle:hover {
  background: #303138;
}
body.dark-mode .theme-dd-menu {
  background: #26272b;
  border-color: #3a3b40;
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
body.dark-mode .theme-dd-item {
  color: #ECECEC;
}
body.dark-mode .theme-dd-item:hover,
body.dark-mode .theme-dd-item.active {
  background: #34353b;
}