/* =====================================================================
   CURIOUS LLM — DeepSeek 2.0 Style UI Layer (v28)
   ---------------------------------------------------------------------
   Purpose  : Clean, modern, DeepSeek-inspired look. Monochrome black &
              white palette. Only visuals change — no feature removed,
              no class/ID renamed, no JS touched.
   Load     : AFTER ui-pro.css so these rules win.
   ===================================================================== */

/* ---------- 1. Design tokens (monochrome, DeepSeek-like) ---------- */
:root {
  /* Monochrome palette */
  --ds-bg:              #ffffff;
  --ds-bg-soft:         #fafafa;
  --ds-sidebar:         #f7f7f8;
  --ds-surface:         #ffffff;
  --ds-surface-2:       #f4f4f5;
  --ds-surface-3:       #ececee;

  --ds-border:          #e5e5e7;
  --ds-border-soft:     #ececee;
  --ds-border-strong:   #d4d4d8;

  --ds-text:            #0d0d0d;
  --ds-text-soft:       #52525b;
  --ds-text-mute:       #8a8a94;

  --ds-accent:          #0d0d0d;      /* pure black accent */
  --ds-accent-soft:     #f0f0f2;
  --ds-accent-ring:     rgba(0, 0, 0, .08);

  --ds-danger:          #dc2626;

  --ds-shadow-xs:       0 1px 2px rgba(0, 0, 0, .04);
  --ds-shadow-sm:       0 2px 6px rgba(0, 0, 0, .05);
  --ds-shadow-md:       0 4px 14px rgba(0, 0, 0, .06),
                        0 1px 3px rgba(0, 0, 0, .04);
  --ds-shadow-lg:       0 12px 32px rgba(0, 0, 0, .09),
                        0 2px 6px rgba(0, 0, 0, .04);
  --ds-shadow-pop:      0 20px 48px rgba(0, 0, 0, .14),
                        0 4px 12px rgba(0, 0, 0, .06);

  --ds-radius-sm:       8px;
  --ds-radius-md:       12px;
  --ds-radius-lg:       16px;
  --ds-radius-xl:       22px;
  --ds-radius-pill:     999px;

  --ds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 2. Base ---------- */
html, body {
  font-family: var(--ds-font) !important;
  background: var(--ds-bg) !important;
  color: var(--ds-text) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.dark-mode { color: var(--ds-text) !important; }

/* ---------- 3. Layout ---------- */
.chat-app {
  background: var(--ds-bg) !important;
}
.chat-main {
  background: var(--ds-bg) !important;
}

/* ---------- 4. Sidebar ---------- */
.chat-sidebar {
  background: var(--ds-sidebar) !important;
  border-right: 1px solid var(--ds-border-soft) !important;
  padding: 12px 10px !important;
  width: 260px !important;
  box-shadow: none !important;
}

.chat-sidebar .sidebar-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 8px 14px !important;
  border-bottom: none !important;
  margin-bottom: 6px !important;
}
.chat-sidebar .sidebar-header .sidebar-brand-word,
.chat-sidebar .sidebar-brand-word {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  color: var(--ds-text) !important;
  flex: 1 !important;
}
.chat-sidebar .sidebar-header img,
.chat-sidebar .sidebar-header svg {
  border-radius: 8px !important;
}

.sidebar-inner-toggle {
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ds-text-soft) !important;
  transition: background .15s ease, color .15s ease !important;
}
.sidebar-inner-toggle:hover {
  background: var(--ds-surface-2) !important;
  color: var(--ds-text) !important;
}

/* New chat button */
.chat-sidebar .new-chat-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: var(--ds-radius-md) !important;
  border: 1px solid var(--ds-border) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  box-shadow: var(--ds-shadow-xs) !important;
  transition: all .18s ease !important;
  margin: 0 4px 8px !important;
  width: calc(100% - 8px) !important;
}
.chat-sidebar .new-chat-btn i {
  font-size: 15px !important;
  color: var(--ds-text) !important;
}
.chat-sidebar .new-chat-btn:hover {
  background: var(--ds-surface-2) !important;
  border-color: var(--ds-border-strong) !important;
  transform: none !important;
}

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

.search-chats-box {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 4px 10px !important;
  padding: 8px 12px !important;
  border-radius: var(--ds-radius-md) !important;
  border: 1px solid var(--ds-border) !important;
  background: var(--ds-surface) !important;
}
.search-chats-box input {
  flex: 1 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  font-size: 13.5px !important;
  color: var(--ds-text) !important;
}
.search-chats-box i { color: var(--ds-text-mute) !important; font-size: 14px !important; }

/* History label */
.chat-sidebar .history-label {
  padding: 12px 14px 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ds-text-mute) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-top: none !important;
}
.chat-sidebar .history-label i { font-size: 12px !important; }

/* History list */
.chat-sidebar .history-list { padding: 0 4px !important; }

.chat-sidebar .history-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  margin: 2px 0 !important;
  border-radius: var(--ds-radius-sm) !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ds-text-soft) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background .15s ease, color .15s ease !important;
  position: relative !important;
}
.chat-sidebar .history-item .text-truncate,
.chat-sidebar .history-item .chat-title-text {
  font-size: 13px !important;
  color: inherit !important;
  font-weight: 500 !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.chat-sidebar .history-item:hover {
  background: var(--ds-surface-2) !important;
  color: var(--ds-text) !important;
}
.chat-sidebar .history-item.active {
  background: var(--ds-surface-3) !important;
  color: var(--ds-text) !important;
  font-weight: 600 !important;
}
.chat-sidebar .history-item .chat-pin-icon {
  color: var(--ds-text-mute) !important;
  font-size: 12px !important;
}
.chat-sidebar .history-item .chat-menu-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ds-text-mute) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity .15s ease, background .15s ease !important;
}
.chat-sidebar .history-item:hover .chat-menu-btn,
.chat-sidebar .history-item.active .chat-menu-btn { opacity: 1 !important; }
.chat-sidebar .history-item .chat-menu-btn:hover {
  background: var(--ds-surface-3) !important;
  color: var(--ds-text) !important;
}

/* Archived toggle */
.archived-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  margin: 8px 0 2px !important;
  border-radius: var(--ds-radius-sm) !important;
  color: var(--ds-text-mute) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background .15s ease !important;
}
.archived-toggle:hover { background: var(--ds-surface-2) !important; color: var(--ds-text) !important; }
.archived-toggle .archived-chev { transition: transform .2s ease !important; }
.archived-toggle.is-open .archived-chev { transform: rotate(90deg) !important; }

/* Sidebar footer / user menu */
.sidebar-footer {
  border-top: 1px solid var(--ds-border-soft) !important;
  padding: 8px 4px !important;
  margin-top: auto !important;
}
.user-menu-trigger {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border-radius: var(--ds-radius-md) !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ds-text) !important;
  transition: background .15s ease !important;
}
.user-menu-trigger:hover { background: var(--ds-surface-2) !important; }
.user-avatar-circle {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--ds-accent) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.user-menu-trigger .uname {
  flex: 1 !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ds-text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.user-menu-trigger .udots {
  color: var(--ds-text-mute) !important;
  font-size: 14px !important;
}

.user-popup-menu {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-md) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  padding: 6px !important;
}
.user-popup-menu .menu-email {
  padding: 8px 10px !important;
  color: var(--ds-text-mute) !important;
  font-size: 11.5px !important;
  border-bottom: 1px solid var(--ds-border-soft) !important;
  margin-bottom: 4px !important;
}
.user-popup-menu .menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: var(--ds-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background .12s ease !important;
}
.user-popup-menu .menu-item:hover { background: var(--ds-surface-2) !important; }
.user-popup-menu .menu-item i { color: var(--ds-text-soft) !important; font-size: 14px !important; }

/* Sidebar re-open button */
.sidebar-reopen-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-text-soft) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}
.sidebar-reopen-btn:hover {
  color: var(--ds-text) !important;
  background: var(--ds-surface-2) !important;
}

/* ---------- 5. Top bar ---------- */
.chat-topbar {
  padding: 10px 20px !important;
  background: var(--ds-bg) !important;
  border-bottom: 1px solid var(--ds-border-soft) !important;
  min-height: 52px !important;
}

.hana-model-dd-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 7px 12px !important;
  border-radius: var(--ds-radius-pill) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--ds-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: background .15s ease !important;
}
.hana-model-dd-toggle:hover { background: var(--ds-surface-2) !important; }
.hana-model-dd-caret { font-size: 12px !important; color: var(--ds-text-soft) !important; }

.hana-model-dd-menu {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-md) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  padding: 6px !important;
  min-width: 280px !important;
}
.hana-model-dd-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background .12s ease !important;
}
.hana-model-dd-item:hover { background: var(--ds-surface-2) !important; }
.hana-model-dd-item-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--ds-text) !important;
}
.hana-model-dd-item-sub {
  font-size: 12px !important;
  color: var(--ds-text-mute) !important;
  margin-top: 2px !important;
}
.hana-model-dd-check {
  color: var(--ds-text) !important;
  opacity: 0 !important;
  font-size: 16px !important;
}
.hana-model-dd-item[aria-checked="true"] .hana-model-dd-check { opacity: 1 !important; }

/* ---------- 6. Empty state ---------- */
.chat-empty {
  padding-top: 80px !important;
  text-align: center !important;
}
.chat-empty h2 {
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--ds-text) !important;
  letter-spacing: -.02em !important;
  margin-bottom: 8px !important;
}
.chat-empty p {
  color: var(--ds-text-soft) !important;
  font-size: 14px !important;
  margin-bottom: 28px !important;
}

/* ---------- 7. Composer (DeepSeek style) ---------- */
.composer-card {
  max-width: 760px !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding: 0 20px !important;
}

.composer-inner {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 22px !important;
  padding: 12px 14px !important;
  box-shadow: var(--ds-shadow-md) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
.composer-inner:focus-within {
  border-color: var(--ds-border-strong) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08),
              0 0 0 3px var(--ds-accent-ring) !important;
}
.composer-inner.is-dragover {
  border-color: var(--ds-text) !important;
  background: var(--ds-surface-2) !important;
}

.composer-inner .composer-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 6px !important;
  width: 100% !important;
}

.composer-inner textarea.message-input {
  flex: 1 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  resize: none !important;
  padding: 8px 6px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--ds-text) !important;
  font-family: var(--ds-font) !important;
  max-height: 200px !important;
  min-height: 28px !important;
}
.composer-inner textarea.message-input::placeholder {
  color: var(--ds-text-mute) !important;
  font-size: 15px !important;
}

/* All composer buttons */
.composer-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ds-text-soft) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s ease, color .15s ease !important;
  flex-shrink: 0 !important;
}
.composer-btn:hover {
  background: var(--ds-surface-2) !important;
  color: var(--ds-text) !important;
}
.composer-btn i { font-size: 17px !important; }

/* Plus button (add) */
.composer-btn.plus-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  color: var(--ds-text-soft) !important;
}
.composer-btn.plus-btn:hover { color: var(--ds-text) !important; background: var(--ds-surface-2) !important; }
.composer-btn.plus-btn[aria-expanded="true"] {
  background: var(--ds-surface-3) !important;
  color: var(--ds-text) !important;
}

/* Send button */
.composer-btn.send {
  background: var(--ds-accent) !important;
  color: #ffffff !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}
.composer-btn.send:hover {
  background: #1a1a1a !important;
  color: #ffffff !important;
  transform: none !important;
}
.composer-btn.send:disabled,
.composer-btn.send.is-disabled {
  background: var(--ds-surface-3) !important;
  color: var(--ds-text-mute) !important;
  cursor: not-allowed !important;
}

/* Mic + enhance flat */
.composer-btn.mic-btn,
.composer-btn.enhance-btn-flat {
  color: var(--ds-text-soft) !important;
}
.composer-btn.mic-btn:hover,
.composer-btn.enhance-btn-flat:hover { color: var(--ds-text) !important; }

/* Composer help text */
.composer-help {
  text-align: center !important;
  font-size: 12px !important;
  color: var(--ds-text-mute) !important;
  margin: 12px 0 6px !important;
}

/* ---------- 8. Plus menu (Add: File / Image / Web / Enhance) ---------- */
.plus-menu {
  position: absolute !important;
  bottom: calc(100% + 10px) !important;
  left: 0 !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-md) !important;
  box-shadow: var(--ds-shadow-pop) !important;
  padding: 6px !important;
  min-width: 240px !important;
  z-index: 60 !important;
}

.plus-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ds-text) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: background .12s ease !important;
}
.plus-menu-item:hover { background: var(--ds-surface-2) !important; }

.plus-menu-item i {
  font-size: 16px !important;
  color: var(--ds-text) !important;
  width: 20px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.plus-menu-item .plus-menu-label { flex: 1 !important; }

/* Monochrome icon colors (override colored icons from earlier CSS) */
.plus-menu-item.plus-menu-file i,
.plus-menu-item.plus-menu-createimage i,
.plus-menu-item.plus-menu-websearch i,
.plus-menu-item.plus-menu-enhance i {
  color: var(--ds-text) !important;
}

/* Toggle switch inside menu items */
.plus-menu-toggle {
  width: 32px !important;
  height: 18px !important;
  background: var(--ds-surface-3) !important;
  border-radius: 999px !important;
  position: relative !important;
  transition: background .18s ease !important;
  flex-shrink: 0 !important;
}
.plus-menu-toggle-dot {
  width: 14px !important;
  height: 14px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  transition: transform .18s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18) !important;
}
.plus-menu-item[aria-checked="true"] .plus-menu-toggle {
  background: var(--ds-accent) !important;
}
.plus-menu-item[aria-checked="true"] .plus-menu-toggle-dot {
  transform: translateX(14px) !important;
}

/* ---------- 9. Bottom composer ---------- */
.chat-composer-bottom {
  background: linear-gradient(to top, var(--ds-bg) 60%, rgba(255,255,255,0)) !important;
  padding: 12px 20px 14px !important;
  border-top: 0 !important;
}
.chat-composer-bottom .composer-inner {
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* ---------- 10. Suggestion chips ---------- */
.suggestion-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 16px !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 20px !important;
}
.suggestion-chips .chip {
  padding: 8px 14px !important;
  border-radius: var(--ds-radius-pill) !important;
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-text-soft) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.suggestion-chips .chip:hover {
  background: var(--ds-surface-2) !important;
  color: var(--ds-text) !important;
  border-color: var(--ds-border-strong) !important;
}

/* ---------- 11. Messages ---------- */
.chat-messages {
  padding: 24px 20px 20px !important;
  background: var(--ds-bg) !important;
}
.message {
  max-width: 760px !important;
  margin: 0 auto 18px !important;
}
.message.user .bubble {
  background: var(--ds-surface-2) !important;
  color: var(--ds-text) !important;
  border-radius: 18px 18px 4px 18px !important;
  border: 1px solid var(--ds-border-soft) !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  max-width: 78% !important;
}
.message.assistant .bubble {
  background: transparent !important;
  color: var(--ds-text) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  box-shadow: none !important;
}
.message .content {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--ds-text) !important;
}

/* File attachment chips */
.file-attachment-chip,
.file-preview-strip .file-chip {
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  color: var(--ds-text) !important;
  box-shadow: var(--ds-shadow-xs) !important;
}
.file-thumb {
  background: var(--ds-surface-3) !important;
  color: var(--ds-text) !important;
  border-radius: 8px !important;
}

/* ---------- 12. Modals ---------- */
.hana-modal-backdrop {
  background: rgba(15, 15, 15, .38) !important;
  backdrop-filter: blur(4px) !important;
}
.hana-modal {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-pop) !important;
}
.hana-modal-head {
  border-bottom: 1px solid var(--ds-border-soft) !important;
  padding: 16px 20px !important;
}
.hana-modal-head h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--ds-text) !important;
  margin: 0 !important;
}
.hana-modal-close {
  border: 0 !important;
  background: transparent !important;
  color: var(--ds-text-soft) !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
}
.hana-modal-close:hover { background: var(--ds-surface-2) !important; color: var(--ds-text) !important; }

/* Chat context menu */
.chat-context-menu {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-md) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  padding: 6px !important;
  min-width: 180px !important;
}
.ccm-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ds-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
.ccm-item:hover { background: var(--ds-surface-2) !important; }
.ccm-item i { color: var(--ds-text-soft) !important; font-size: 14px !important; width: 18px !important; }
.ccm-item.ccm-danger { color: var(--ds-danger) !important; }
.ccm-item.ccm-danger i { color: var(--ds-danger) !important; }
.ccm-divider { height: 1px !important; background: var(--ds-border-soft) !important; margin: 4px 2px !important; }

/* ---------- 13. Create Image modal ---------- */
.cig-overlay { background: rgba(15, 15, 15, .42) !important; backdrop-filter: blur(4px) !important; }
.cig-modal {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-pop) !important;
}
.cig-head { border-bottom: 1px solid var(--ds-border-soft) !important; padding: 16px 20px !important; }
.cig-title { font-size: 16px !important; font-weight: 700 !important; color: var(--ds-text) !important; margin: 0 !important; }
.cig-subtitle { font-size: 12.5px !important; color: var(--ds-text-mute) !important; margin-top: 3px !important; }
.cig-close { border: 0 !important; background: transparent !important; color: var(--ds-text-soft) !important; width: 30px !important; height: 30px !important; border-radius: 8px !important; }
.cig-close:hover { background: var(--ds-surface-2) !important; color: var(--ds-text) !important; }
.cig-label { font-size: 12.5px !important; font-weight: 600 !important; color: var(--ds-text) !important; margin-bottom: 8px !important; display: block !important; }
.cig-label-hint { color: var(--ds-text-mute) !important; font-weight: 400 !important; }
.cig-prompt {
  width: 100% !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-md) !important;
  padding: 10px 12px !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  font-family: var(--ds-font) !important;
  font-size: 14px !important;
  resize: vertical !important;
}
.cig-prompt:focus { outline: 0 !important; border-color: var(--ds-text) !important; box-shadow: 0 0 0 3px var(--ds-accent-ring) !important; }
.cig-upload-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  border: 1px dashed var(--ds-border-strong) !important;
  background: var(--ds-surface) !important;
  color: var(--ds-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.cig-upload-btn:hover { background: var(--ds-surface-2) !important; }
.cig-btn {
  padding: 9px 18px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
}
.cig-btn-ghost {
  background: transparent !important;
  color: var(--ds-text-soft) !important;
  border-color: var(--ds-border) !important;
}
.cig-btn-ghost:hover { background: var(--ds-surface-2) !important; color: var(--ds-text) !important; }
.cig-btn-primary {
  background: var(--ds-accent) !important;
  color: #ffffff !important;
  border-color: var(--ds-accent) !important;
}
.cig-btn-primary:hover { background: #1a1a1a !important; }

/* ---------- 14. Guest login overlay tweaks ---------- */
.guest-login-modal { border-radius: var(--ds-radius-lg) !important; box-shadow: var(--ds-shadow-pop) !important; }
.guest-google-login { border-radius: 10px !important; }

/* ---------- 15. BETA badge (Builder 5.0) ---------- */
.hana-model-dd-badge-soon {
  color: var(--ds-text-soft) !important;
  background: var(--ds-surface-2) !important;
  border: 1px solid var(--ds-border) !important;
  padding: 1px 8px !important;
  font-weight: 600 !important;
}

/* ---------- 16. Multi-file explorer overlay (kept minimal) ---------- */
.mfe-modal {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-pop) !important;
}
.mfe-head { border-bottom: 1px solid var(--ds-border-soft) !important; }
.mfe-act-btn, .mfe-close-btn {
  border: 0 !important;
  background: transparent !important;
  color: var(--ds-text-soft) !important;
  border-radius: 8px !important;
}
.mfe-act-btn:hover, .mfe-close-btn:hover { background: var(--ds-surface-2) !important; color: var(--ds-text) !important; }

/* ---------- 17. Focus rings ---------- */
button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 2px solid var(--ds-accent-ring) !important;
  outline-offset: 2px !important;
}

/* ---------- 18. Scrollbars ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: #d4d4d8 transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }

/* ---------- 19. Small screens ---------- */
@media (max-width: 768px) {
  .chat-sidebar { width: 260px !important; }
  .composer-card, .chat-composer-bottom .composer-inner { max-width: 100% !important; }
  .chat-empty h2 { font-size: 24px !important; }
  .message { max-width: 100% !important; }
  .composer-btn.plus-btn { width: 32px !important; height: 32px !important; }
}

/* ---------- 20. Hide legacy accent color leaks (force monochrome) ---------- */
.new-chat-btn i,
.chat-sidebar .new-chat-btn i {
  color: var(--ds-text) !important;
}

/* Kill any leftover blue focus glow */
.composer-inner:focus-within {
  border-color: var(--ds-text) !important;
}