/* ============================================================
   AI CHAT PANEL — COMPLETE
   Every line related to the AI chat panel functionality
   Extracted from claude-style.css
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   AI CHAT PANEL — Full Claude.ai chat interface restyle
   ═══════════════════════════════════════════════════════════════ */

/* ── Panel background ── */

/* ============================================================
   AI CHAT PANEL — COMPLETE
   Every line related to the AI chat panel functionality
   Extracted from claude-style.css
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   AI CHAT PANEL — Full Claude.ai chat interface restyle
   ═══════════════════════════════════════════════════════════════ */

/* ── Panel background ── */
/* [migrated to overlay.css] */
/* [panel CSS migrated to overlay.css] */


/* ── Chat log — Claude's spacious message feed ── */

/* ── Chat log — Claude's spacious message feed ── */
.ai-log {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 24px 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
  background-image: none !important;
  scrollbar-width: thin !important;
}

/* ── Message row ── */

/* ── Message row ── */
.ai-msg {
  display: flex !important;
  gap: 12px !important;
  padding: 8px 0 !important;
  animation: claudeMsgIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
  max-width: 100% !important;
  align-items: flex-start !important;
}


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

/* ── User message — right-aligned bubble ── */

/* ── User message — right-aligned bubble ── */
.ai-msg.user {
  flex-direction: row-reverse !important;
  justify-content: flex-start !important;
  padding: 6px 0 !important;
}


.ai-msg.user .ai-avatar {
  display: none !important; /* Claude hides user avatar, shows name inline */
}

/* User bubble — Claude style */
.ai-msg.user .ai-plain-msg,
.ai-msg.user [class*="bubble"],

/* User bubble — Claude style */
.ai-msg.user .ai-plain-msg,
.ai-msg.user [class*="bubble"],
.ai-msg.user > div:not(.ai-avatar) {
  background: var(--card, #2f2f2f) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 10px 16px !important;
  max-width: 72% !important;
  font-family: var(--ff-base, "Inter", sans-serif) !important;
  font-size: 3px !important;
  line-height: 1.6 !important;
  color: var(--text-muted-tier) !important;
  font-weight: 400 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

/* ── Agent/assistant message — full width, no bubble ── */

/* ── Agent/assistant message — full width, no bubble ── */
.ai-msg:not(.user) {
  padding: 8px 0 4px !important;
}


.ai-msg:not(.user) .ai-plain-msg {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  max-width: 100% !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: var(--text-muted-tier) !important;
  font-weight: 400 !important;
}

/* ── Avatar — agent side only ── */

/* ── Avatar — agent side only ── */
.ai-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

/* ── Plain message text styling (Claude output) ── */

/* ── Plain message text styling (Claude output) ── */
.ai-plain-msg {
  font-family: var(--ff-base) !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  color: var(--text-muted-tier) !important;
  letter-spacing: -0.01em !important;
}


.ai-plain-msg p {
  margin: 0 0 12px !important;
}


.ai-plain-msg p:last-child {
  margin-bottom: 0 !important;
}


.ai-plain-msg strong {
  font-weight: 600 !important;
  color: var(--gold) !important;
}


.ai-plain-msg em {
  font-style: italic !important;
  color: var(--text-white-a85) !important;
}


.ai-plain-msg a {
  color: var(--link-blue-light) !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}


.ai-plain-msg a:hover {
  color: #6cb6ff !important;
}

/* Code inline */

/* Code inline */
.ai-plain-msg code {
  font-family: var(--ff-mono) !important;
  font-size: 13px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
  color: var(--text-white-a85) !important;
}

/* Code block */

/* Code block */
.ai-plain-msg pre {
  background: rgba(0,0,0,0.35) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  overflow-x: auto !important;
  margin: 12px 0 !important;
}


.ai-plain-msg pre code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* Lists */
.ai-plain-msg ul,

/* Lists */
.ai-plain-msg ul,
.ai-plain-msg ol {
  padding-left: 20px !important;
  margin: 8px 0 !important;
}


.ai-plain-msg li {
  margin-bottom: 4px !important;
  line-height: 1.65 !important;
}

/* Headings inside agent response */

/* Headings inside agent response */
.ai-plain-msg h1, .ai-plain-msg h2, .ai-plain-msg h3 {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  margin: 16px 0 6px !important;
  color: var(--gold) !important;
}

.ai-plain-msg h2 { font-size: 16px !important; }
.ai-plain-msg h3 { font-size: 14px !important; }

/* Tables inside agent response */


/* Tables inside agent response */
.ai-plain-msg table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  margin: 12px 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}


.ai-plain-msg th {
  background: rgba(255,255,255,0.06) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--bb-border) !important;
  color: var(--text-white-a85) !important;
}


.ai-plain-msg td {
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--bb-border) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}


.ai-plain-msg tr:last-child td {
  border-bottom: none !important;
}

/* ── In-chat action buttons ── */
.ai-plain-msg button,

/* ── In-chat action buttons ── */
.ai-plain-msg button,
.ai-inline-btn {
  font-family: var(--ff-base) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--text-white-a85) !important;
  letter-spacing: -0.01em !important;
  transition:
    background 120ms ease,
    border-color 120ms ease !important;
}

.ai-plain-msg button:hover,

.ai-plain-msg button:hover,
.ai-inline-btn:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: var(--bb-border) !important;
}

/* ── In-chat inputs ── */
.ai-plain-msg input[type="text"],
.ai-plain-msg input[type="password"],
.ai-plain-msg input[type="number"],

/* ── In-chat inputs ── */
.ai-plain-msg input[type="text"],
.ai-plain-msg input[type="password"],
.ai-plain-msg input[type="number"],
.ai-chat-input {
  font-family: var(--ff-base) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  border-radius: 10px !important;
  padding: 11px 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--text) !important;
  outline: none !important;
}

.ai-plain-msg input:focus,

.ai-plain-msg input:focus,
.ai-chat-input:focus {
  border-color: var(--bb-border) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bb-border)!important;
}

/* ── Thinking dots ── */

/* ── Thinking dots ── */
.ai-dots {
  display: inline-flex !important;
  gap: 4px !important;
  align-items: center !important;
  padding: 14px 0 !important;
}


.ai-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.35) !important;
}

/* ── Header ── */

/* ── Header ── */
.ai-header {
  padding: 14px 20px 12px !important;
  border-bottom: 1px solid var(--bb-border) !important;
  background: transparent !important;
}


.ai-title {
  font-family: var(--ff-base) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
}


.ai-orb {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #D97706 !important;
  box-shadow: none !important;
  /* Claude icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23D97706'/%3E%3Cg fill='%23fff'%3E%3Crect x='9' y='8' width='3.2' height='12' rx='1.6' transform='rotate(-25 9 8)'/%3E%3Crect x='14' y='6' width='3.2' height='16' rx='1.6'/%3E%3Crect x='19' y='8' width='3.2' height='12' rx='1.6' transform='rotate(25 19 8)'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: cover !important;
  font-size: 0 !important;
  color: transparent !important;
}


.ai-status {
  font-family: var(--ff-base) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: var(--radius-full) !important;
  padding: 2px 8px !important;
}

/* ══════════════════════════════════════════════════════════════════
   COMPOSER TEXTAREA — consolidated (was duplicated ~46x across this file).
   background/border/box-shadow/outline for these are intentionally NOT set
   here — css/overlay.css (loaded last) owns those for good.
   ══════════════════════════════════════════════════════════════════ */
.ai-input-wrap {
  padding: 0 !important;
  gap: 10px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0;
  margin: 0 !important;
}
.ai-input-row {
  padding: 4px 0 4px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  transition: none !important;
  flex-wrap: wrap !important;
  position: relative !important;
}
.ai-inp {
  flex: 0 0 100% !important;
  padding: 0 !important;
  font-family: var(--ff-base, 'Inter', sans-serif) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--text-white-a90) !important;
  line-height: 1.55 !important;
  letter-spacing: -0.01em !important;
  resize: none !important;
  min-height: 52px !important;
  max-height: 140px !important;
  caret-color: rgba(255,255,255,0.8) !important;
  transition: none;
  order: 0 !important;
  margin: 0 0 8px 0 !important;
  width: 100% !important;
}
.ai-inp::placeholder {
  color: rgba(255,255,255,0.38) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
html[data-theme="light"] .ai-inp,
body.theme-light .ai-inp {
  color: var(--text-muted-tier) !important;
  caret-color: #000000 !important;
}
html[data-theme="light"] .ai-inp::placeholder,
body.theme-light .ai-inp::placeholder {
  color: rgba(0,0,0,0.35) !important;
  opacity: 1 !important;
}


/* ── Send button — Claude's upward-arrow circle ── */

/* ── Send button — Claude's upward-arrow circle ── */
.ai-send {
  background: var(--text-sky) !important;
  border: none !important;
  border-radius: 10px !important;
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-on-accent) !important;
  cursor: pointer !important;
  position: static !important;
  margin-bottom: 3px !important;
  transition:
    background 120ms ease,
    transform 120ms ease,
    box-shadow 120ms ease !important;
  border: 1px solid var(--bb-border)!important;
}


.ai-send:hover:not(:disabled) {
  background: var(--text-sky) !important;
  transform: scale(1.05) !important;
  border: 1px solid var(--bb-border)!important;
}


.ai-send:active:not(:disabled) {
  transform: scale(0.96) !important;
}


.ai-send:disabled {
  background: rgba(var(--accent-sky-rgb),0.15) !important;
  color: var(--text-white-a50) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ── Quick actions row — all buttons same height ── */

/* ── Quick actions row — all buttons same height ── */
.ai-quick-wrap {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 6px !important;
  height: 36px !important;
}

/* ══════════════════════════════════════════════════════════════════
   QUICK-ACTION BAR — unified token set (dark mode base)
   All four buttons share identical bg / border / radius / font.
   ══════════════════════════════════════════════════════════════════ */

/* shared base */
/* [panel CSS migrated to overlay.css] */


/* shared hover */
/* [panel CSS migrated to overlay.css] */


/* Quick Actions — flex-grow + padding + gap */

/* Quick Actions — flex-grow + padding + gap */
.ai-quick-btn {
  flex: 1 !important;
  width: auto !important;
  padding: 0 12px !important;
  gap: 8px !important;
}


.ai-quick-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--ff-base) !important;
  color: inherit !important;
}


@keyframes ai-dot-pulse {
  0%, 100% { border: 1px solid var(--bb-border); }
  50%       { border: 1px solid var(--bb-border); }
}


@keyframes ai-dot-blink {
  0%, 100% { opacity: 1; transform: scale(1); border: 1px solid var(--bb-border); }
  50%       { opacity: 0.25; transform: scale(0.75); border: 1px solid var(--bb-border); }
}

/* ── Quick actions menu ── */

/* ── Quick actions menu ── */
.ai-quick-menu {
  background: #131412 !important;
  border-radius: 14px !important;
  border: 1px solid var(--bb-border)!important;
}


.aq-section-label {
  font-family: var(--ff-base) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--text-white-a85) !important;
  border-left: 2px solid var(--bb-border) !important;
}

/* Grid chips */

/* Grid chips */
.ai-quick-menu .ai-chip {
  font-family: var(--ff-base) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 7px 10px !important;
  background: linear-gradient(135deg,rgba(208,208,208,.055),rgba(8,8,12,.9)) !important;
  border: 1px solid rgba(208,208,208,.14) !important;
  color: var(--text-white-a80) !important;
  letter-spacing: -0.01em !important;
}


.ai-quick-menu .ai-chip:hover {
  background: rgba(255,255,255,0.09) !important;
  border-color: var(--bb-border) !important;
  color: var(--text-white-a90) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Inline chips */

/* Inline chips */
.ai-chip {
  font-family: var(--ff-base) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--radius-full) !important;
  padding: 5px 12px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--text-white-a85) !important;
  letter-spacing: -0.01em !important;
  transition: background 120ms, border-color 120ms, color 120ms !important;
}


.ai-chip:hover {
  background: rgba(255,255,255,0.09) !important;
  border-color: var(--bb-border) !important;
  color: var(--text) !important;
}

/* ── Settings dropdown — matches quick actions claude style ── */

/* ── Settings dropdown — matches quick actions claude style ── */
body.theme-dark .ai-settings-menu {
  background: #000000 !important;
  border: none !important;
  border-radius: 14px !important;
  border: 1px solid var(--bb-border)!important;
}


body.theme-light .ai-settings-menu {
  background: #ffffff !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 14px !important;
  border: 1px solid var(--bb-border)!important;
}

/* Kill any late --bb-surface override from style.css on the settings menu */
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */


/* Section headers — identical to .aq-section-label */

/* Section headers — identical to .aq-section-label */
.ai-s-section-hdr {
  font-family: var(--ff-base) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  color: var(--text-sky) !important;
  text-transform: uppercase !important;
  border-left: none !important;
  border-top: none !important;
  padding: 0 4px 0 6px !important;
  margin: 6px 0 4px !important;
}

.ai-s-section-hdr:first-of-type { padding-top: 4px !important; }

/* Row hint text */


/* Row hint text */
.ai-s-hint {
  font-family: var(--ff-base) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-white-a85) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 1 !important;
}

/* Provider name rows */

/* Provider name rows */
.ai-s-row {
  padding: 6px 4px !important;
  border-bottom: none !important;
  gap: 6px !important;
}

/* Row label (AI, Model) */

/* Row label (AI, Model) */
.ai-s-lbl {
  font-family: var(--ff-base) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--text-white-a85) !important;
  text-transform: uppercase !important;
  min-width: 48px !important;
}

/* Select dropdowns */

/* Select dropdowns */
.ai-s-sel {
  font-family: var(--ff-base) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 8px 28px 8px 10px !important;
  background: linear-gradient(135deg,rgba(208,208,208,.055),rgba(8,8,12,.9)) !important;
  border: 1px solid rgba(208,208,208,.14) !important;
  color: var(--text-white-a80) !important;
  letter-spacing: -0.01em !important;
  outline: none !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}


.ai-s-sel:focus {
  border-color: var(--text-sky) !important;
  background-color: rgba(var(--accent-sky-rgb),0.08) !important;
}

/* ── API key grid row: [input flex] [Save] [×] ── */

/* ── API key grid row: [input flex] [Save] [×] ── */
.ai-s-key-row {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: 6px !important;
  align-items: center !important;
  padding: 2px 4px 4px !important;
}

/* API key input — fills available column */

/* API key input — fills available column */
.ai-s-input {
  font-family: var(--ff-base) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  border-radius: 8px !important;
  height: 30px !important;
  padding: 0 10px !important;
  background: linear-gradient(135deg,rgba(208,208,208,.055),rgba(8,8,12,.9)) !important;
  border: 1px solid rgba(208,208,208,.14) !important;
  color: var(--text-white-a80) !important;
  letter-spacing: -0.01em !important;
  outline: none !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}


.ai-s-input::placeholder {
  color: var(--text-white-a85) !important;
  font-size: 11.5px !important;
}


.ai-s-input:focus {
  border-color: var(--text-sky) !important;
  background: rgba(var(--accent-sky-rgb),0.07) !important;
}

/* Save + Clear — shared square icon button base */
.ai-s-save,

/* Save + Clear — shared square icon button base */
.ai-s-save,
.ai-s-clear {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: background 120ms ease, border-color 120ms ease !important;
}

.ai-s-save svg,

.ai-s-save svg,
.ai-s-clear svg {
  pointer-events: none !important;
}

/* Save — sky-blue checkmark, matches the app accent */

/* Save — sky-blue checkmark, matches the app accent */
.ai-s-save {
  background: rgba(var(--accent-sky-rgb),0.12) !important;
  border: 1px solid rgba(var(--accent-sky-rgb),0.30) !important;
  color: var(--accent-sky-a95) !important;
}


.ai-s-save:hover {
  background: var(--text-sky) !important;
  border-color: var(--text-sky) !important;
  color: var(--text-on-accent) !important;
}

/* Clear — red tint × */

/* Clear — red tint × */
.ai-s-clear {
  background: rgba(255,80,80,0.08) !important;
  border: 1px solid rgba(255,80,80,0.25) !important;
  color: var(--state-danger-soft-bg-text) !important;
}


.ai-s-clear:hover {
  background: rgba(255,80,80,0.18) !important;
  border-color: rgba(255,80,80,0.55) !important;
  color: var(--state-danger-clear-active) !important;
}

/* ── Action chips inside agent messages ── */

/* ── Action chips inside agent messages ── */
.ai-action {
  font-family: var(--ff-base) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  padding: 3px 9px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--text-white-a85) !important;
  letter-spacing: -0.01em !important;
}

/* ── Provider toggle ── */

/* ── Provider toggle ── */
.ai-tog {
  border-radius: var(--radius-full) !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid var(--bb-border) !important;
}


.ai-tog-btn {
  font-family: var(--ff-base) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: var(--radius-full) !important;
}

/* ── Close button ── */

/* ── Close button ── */
.ai-close-btn {
  font-family: var(--ff-base) !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--text-white-a85) !important;
  transition: background 120ms, color 120ms !important;
}


.ai-close-btn:hover {
  background: rgba(255,255,255,0.07) !important;
  color: var(--text-white-a85) !important;
  border-color: var(--bb-border) !important;
}

/* ── Wider layout on desktop ── */

/* ── Wider layout on desktop ── */@media (min-width: 768px) {

  .ai-log {
    padding: 24px 32px 16px !important;
  }

  .ai-input-wrap {
    padding: 8px 32px calc(env(safe-area-inset-bottom, 0px) + 16px) 32px !important;
  }
}

/* ── Settings wrap — must flex to same height as siblings ── */

/* ── Settings wrap — must flex to same height as siblings ── */
.ai-settings-wrap {
  position: relative !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  height: 36px !important;
}

/* ai-quick-wrap is the full-width bar — it becomes the positioning anchor */

/* ══════════════════════════════════════════════════════════════════
   SETTINGS PANEL DROPUP — cloned from Old build (position:absolute)
   Allow the dropup to escape overflow:hidden ancestors by making the
   entire input-wrap chain overflow:visible, then use absolute positioning
   exactly as the original codebase did.
   ══════════════════════════════════════════════════════════════════ */

/* Break overflow:hidden clip chain */

/* ai-quick-wrap is the full-width bar — it becomes the positioning anchor */
.ai-quick-wrap {
  position: relative !important;
  overflow: visible !important;
}

/* Gear wrap must be static so rz-cta-header stays the anchor */

/* Gear wrap must be static so rz-cta-header stays the anchor */
/* [panel CSS migrated to overlay.css] */


/* Actions container must not clip the dropup */
.ai-composer-header-actions {
  overflow: visible !important;
}

/* Dropup anchored to .rz-cta-header (position:relative) — spans full composer header width */

/* Dropup anchored to .rz-cta-header (position:relative) — spans full composer header width */
.ai-settings-dropup {
  position: absolute !important;
  bottom: calc(100% + 6px) !important;
  top: auto !important;
  left: 0 !important;
  right: 0 !important;
  min-width: unset !important;
  width: auto !important;
  max-height: 432px !important;
  overflow-y: auto !important;
  z-index: 9990 !important;
  border-radius: 14px !important;
  padding: 10px !important;
  animation: dropUp 0.2s cubic-bezier(0.2,0.8,0.4,1) !important;
  scrollbar-width: none !important;
  /* Match quick-menu / composer frame style */
  background: #000000 !important;
  border: none !important;
  border: 1px solid var(--bb-border)!important;
}


body.theme-dark .ai-settings-dropup {
  background: #000000 !important;
  border: none !important;
  border-radius: 14px !important;
  border: 1px solid var(--bb-border)!important;
  padding: 10px !important;
}


body.theme-light .ai-settings-dropup {
  background: #e8e8e8 !important;
  border: none !important;
  border: 1px solid var(--bb-border)!important;
}

/* Light mode — settings dropup */
html[data-theme="light"] .ai-settings-dropup,

/* Light mode — settings dropup */
html[data-theme="light"] .ai-settings-dropup,
body.theme-light .ai-settings-dropup {
  background: #e8e8e8 !important;
  border: none !important;
  border: 1px solid var(--bb-border)!important;
}

html[data-theme="light"] .ai-s-section-hdr,

html[data-theme="light"] .ai-s-section-hdr,
body.theme-light .ai-s-section-hdr {
  color: var(--text-black-a85) !important;
  border-left-color: var(--bb-border) !important;
}

html[data-theme="light"] .ai-s-hint,

html[data-theme="light"] .ai-s-hint,
body.theme-light .ai-s-hint {
  color: var(--text-black-a85) !important;
}

html[data-theme="light"] .ai-s-lbl,

html[data-theme="light"] .ai-s-lbl,
body.theme-light .ai-s-lbl {
  color: var(--text-black-a85) !important;
}

html[data-theme="light"] .ai-s-sel,

html[data-theme="light"] .ai-s-sel,
body.theme-light .ai-s-sel {
  background-color: rgba(0,0,0,0.04) !important;
  border-color: var(--bb-border) !important;
  color: var(--sdv5-accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(0,0,0,0.4)'/%3E%3C/svg%3E") !important;
}

html[data-theme="light"] .ai-s-input,

html[data-theme="light"] .ai-s-input,
body.theme-light .ai-s-input {
  background: #FFFFFF !important;
  border-color: var(--bb-border) !important;
  color: var(--sdv5-accent) !important;
}

html[data-theme="light"] .ai-s-input::placeholder,

html[data-theme="light"] .ai-s-input::placeholder,
body.theme-light .ai-s-input::placeholder {
  color: var(--text-black-a85) !important;
}

html[data-theme="light"] .ai-s-save,

html[data-theme="light"] .ai-s-save,
body.theme-light .ai-s-save {
  background: var(--text-sky) !important;
  border-color: var(--text-sky) !important;
  color: var(--text-on-accent) !important;
}

html[data-theme="light"] .ai-s-save:hover,

html[data-theme="light"] .ai-s-save:hover,
body.theme-light .ai-s-save:hover {
  background: var(--text-sky) !important;
  border-color: var(--text-sky) !important;
}

html[data-theme="light"] .ai-s-clear,

html[data-theme="light"] .ai-s-clear,
body.theme-light .ai-s-clear {
  background: rgba(220,38,38,0.07) !important;
  border-color: rgba(220,38,38,0.22) !important;
  color: var(--state-danger-clear) !important;
}

html[data-theme="light"] .ai-s-clear:hover,

html[data-theme="light"] .ai-s-clear:hover,
body.theme-light .ai-s-clear:hover {
  background: rgba(220,38,38,0.15) !important;
  border-color: rgba(220,38,38,0.45) !important;
}

html[data-theme="light"] .ai-settings-menu,

html[data-theme="light"] .ai-settings-menu,
body.theme-light .ai-settings-menu {
  background: #ffffff !important;
  border-color: var(--bb-border) !important;
  border: 1px solid var(--bb-border)!important;
}

/* ══ AI Provider/Model pick button (replaces native select) ══ */

/* ══ AI Provider/Model pick button (replaces native select) ══ */
.ai-s-row-pick {
  align-items: center !important;
}


.ai-s-pick-btn {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 8px !important;
  color: var(--text-white-a85) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-align: left !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transition: background .15s, border-color .15s !important;
  min-width: 0 !important;
}


.ai-s-pick-btn:hover {
  background: rgba(var(--accent-sky-rgb),0.10) !important;
  border-color: rgba(var(--accent-sky-rgb),0.35) !important;
  color: var(--gold) !important;
}


.ai-s-pick-ico {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  width: 18px !important;
  height: 18px !important;
}


.ai-s-pick-ico img {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  border-radius: 3px !important;
}


.ai-s-pick-lbl {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ══ AI Modal — dropup anchored inside .ai-quick-wrap, same as quick-actions menu ══ */

/* Kill the full-screen overlay behaviour inherited from .sdv5-select-modal */

/* ══ AI Modal — dropup anchored inside .ai-quick-wrap, same as quick-actions menu ══ */

/* Kill the full-screen overlay behaviour inherited from .sdv5-select-modal */
.sdv5-ai-modal {
  position: absolute !important;
  top: auto !important;
  bottom: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 9999 !important;
  display: block !important;
  animation: dropUp 0.2s cubic-bezier(0.2,0.8,0.4,1) !important;
}

/* Panel: same width/position as .ai-quick-menu dropup */

/* Panel: same width/position as .ai-quick-menu dropup */
.sdv5-ai-modal .panel {
  width: 100% !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  border-radius: 14px !important;
  border-top: none !important;
  animation: none !important;
  /* Dark mode — matches .ai-quick-menu / .ai-composer-frame.rz-frame exactly */
  background: #000000 !important;
  border: none !important;
  border: 1px solid var(--bb-border)!important;
}

/* Hide drag-handle pseudo-element (not needed in dropup) */

/* Hide drag-handle pseudo-element (not needed in dropup) */
.sdv5-ai-modal .panel::before {
  display: none !important;
}

/* Light mode — matches .ai-quick-menu light background */
html[data-theme="light"] .sdv5-ai-modal .panel,

/* Light mode — matches .ai-quick-menu light background */
html[data-theme="light"] .sdv5-ai-modal .panel,
body.theme-light .sdv5-ai-modal .panel {
  background: #FFFFFF !important;
  border: none !important;
  border: 1px solid var(--bb-border)!important;
}

/* ══ Rich AI modal rows — matches screenshot style ══ */

/* Head: title matches screenshot font weight */

/* ══ Rich AI modal rows — matches screenshot style ══ */

/* Head: title matches screenshot font weight */
.sdv5-ai-modal .head h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-white-a90) !important;
  letter-spacing: 0.02em !important;
}

/* List area: tighter scrollable list */

/* List area: tighter scrollable list */
.sdv5-ai-modal .list {
  padding: 4px 0 8px !important;
}

/* Each row */

/* Each row */
.sdv5-ai-modal .opt {
  padding: 13px 18px !important;
  border-bottom: 1px solid var(--bb-border) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  align-items: center !important;
  gap: 13px !important;
  color: var(--text-white-a90) !important;
  background: transparent !important;
}


.sdv5-ai-modal .opt:last-child {
  border-bottom: none !important;
}


.sdv5-ai-modal .opt:active {
  background: rgba(255,255,255,0.04) !important;
}


.sdv5-ai-modal .opt.selected {
  background: #131412 !important;
  color: var(--text-white-a90) !important;
}

/* Icon badge — dark rounded square like screenshot */

/* Icon badge — dark rounded square like screenshot */
.aim-opt-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,0.07) !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--bb-border) !important;
}


.sdv5-ai-modal .opt.selected .aim-opt-logo {
  background: rgba(255,255,255,0.10) !important;
  border-color: var(--bb-border) !important;
}


.aim-opt-img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
  border-radius: 5px !important;
}

/* Provider logo shown to the left of each API key row's label */
.ai-s-provider-logo {
  width: 16px !important;
  height: 16px !important;
  object-fit: contain !important;
  border-radius: 4px !important;
  flex-shrink: 0 !important;
}


.aim-opt-spark {
  font-size: 20px !important;
  line-height: 1 !important;
}

/* Text info column */

/* Text info column */
.aim-opt-info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}


.aim-opt-info .lbl {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text-white-a90) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: unset !important;
  min-width: unset !important;
}


.aim-opt-sub {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--text-white-a85) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

/* Radio circle — always show, filled blue when selected (matches screenshot) */

/* Radio circle — always show, filled blue when selected (matches screenshot) */
.sdv5-ai-modal .opt .check {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  border: 2px solid var(--bb-border) !important;
  background: transparent !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .15s, background .15s !important;
  position: relative !important;
}


.sdv5-ai-modal .opt.selected .check {
  border-color: #4f8fff !important;
  background: #4f8fff !important;
}

/* Inner dot for selected radio */

/* Inner dot for selected radio */
.sdv5-ai-modal .opt.selected .check::after {
  content: '' !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: none !important;
  transform: none !important;
  position: static !important;
}

/* Footer */

/* Footer */
.aim-footer {
  padding: 10px 18px 18px !important;
  font-size: 12px !important;
  color: var(--text-white-a85) !important;
  border-top: 1px solid var(--bb-border) !important;
  text-align: center !important;
  letter-spacing: 0.01em !important;
}

/* ══ AI Modal light-mode text overrides ══ */
html[data-theme="light"] .sdv5-ai-modal .head h3,

/* ══ AI Modal light-mode text overrides ══ */
html[data-theme="light"] .sdv5-ai-modal .head h3,
body.theme-light .sdv5-ai-modal .head h3 {
  color: var(--text-black-a90) !important;
}

html[data-theme="light"] .sdv5-ai-modal .opt,

html[data-theme="light"] .sdv5-ai-modal .opt,
body.theme-light .sdv5-ai-modal .opt {
  color: var(--text-black-a85) !important;
  border-bottom-color: var(--bb-border) !important;
}

html[data-theme="light"] .sdv5-ai-modal .opt:active,

html[data-theme="light"] .sdv5-ai-modal .opt:active,
body.theme-light .sdv5-ai-modal .opt:active {
  background: rgba(0,0,0,0.04) !important;
}

html[data-theme="light"] .sdv5-ai-modal .opt.selected,

html[data-theme="light"] .sdv5-ai-modal .opt.selected,
body.theme-light .sdv5-ai-modal .opt.selected {
  background: #FFFFFF !important;
  color: var(--text-black-a90) !important;
}

html[data-theme="light"] .aim-opt-logo,

html[data-theme="light"] .aim-opt-logo,
body.theme-light .aim-opt-logo {
  background: rgba(0,0,0,0.06) !important;
  border-color: var(--bb-border) !important;
}

html[data-theme="light"] .aim-opt-info .lbl,

html[data-theme="light"] .aim-opt-info .lbl,
body.theme-light .aim-opt-info .lbl {
  color: var(--text-black-a85) !important;
}

html[data-theme="light"] .aim-opt-sub,

html[data-theme="light"] .aim-opt-sub,
body.theme-light .aim-opt-sub {
  color: var(--text-black-a85) !important;
}

html[data-theme="light"] .aim-footer,

html[data-theme="light"] .aim-footer,
body.theme-light .aim-footer {
  color: var(--text-black-a85) !important;
  border-top-color: var(--bb-border) !important;
}

html[data-theme="light"] .sdv5-ai-modal .opt .check,

html[data-theme="light"] .sdv5-ai-modal .opt .check,
body.theme-light .sdv5-ai-modal .opt .check {
  border-color: var(--bb-border) !important;
}

/* ══ Provider subdomain hint (e.g. "console.groq.com") ══ */

/* ══ Provider subdomain hint (e.g. "console.groq.com") ══ */
.ai-s-prov-sub {
  color: var(--text-white-a85) !important;
  font-weight: 400 !important;
}

html[data-theme="light"] .ai-s-prov-sub,

html[data-theme="light"] .ai-s-prov-sub,
body.theme-light .ai-s-prov-sub {
  color: var(--text-black-a85) !important;
}

/* ══ Provider name rows with white color (SambaNova, OpenRouter, NVIDIA) ══ */

/* ══ Provider name rows with white color (SambaNova, OpenRouter, NVIDIA) ══ */
.ai-s-prov-name--white {
  color: var(--gold) !important;
}

html[data-theme="light"] .ai-s-prov-name--white,

html[data-theme="light"] .ai-s-prov-name--white,
body.theme-light .ai-s-prov-name--white {
  color: var(--sdv5-accent) !important;
}

/* ══ AI Settings panel — pick buttons (AI / Model selector) ══ */
html[data-theme="light"] .ai-s-pick-btn,

/* ══ AI Settings panel — pick buttons (AI / Model selector) ══ */
html[data-theme="light"] .ai-s-pick-btn,
body.theme-light .ai-s-pick-btn {
  background: rgba(0,0,0,0.04) !important;
  border-color: var(--bb-border) !important;
  color: var(--sdv5-accent) !important;
}

html[data-theme="light"] .ai-s-pick-btn:hover,

html[data-theme="light"] .ai-s-pick-btn:hover,
body.theme-light .ai-s-pick-btn:hover {
  background: rgba(0,0,0,0.07) !important;
  border-color: var(--bb-border) !important;
}

html[data-theme="light"] .ai-s-pick-btn svg,

html[data-theme="light"] .ai-s-pick-btn svg,
body.theme-light .ai-s-pick-btn svg {
  stroke: rgba(0,0,0,0.45) !important;
}

html[data-theme="light"] .ai-s-pick-lbl,

html[data-theme="light"] .ai-s-pick-lbl,
body.theme-light .ai-s-pick-lbl {
  color: var(--sdv5-accent) !important;
}

/* ══ Provider name rows — override hardcoded rgba(255,255,255,…) inline styles ══ */
/* Target the subdomain text spans inside provider rows */
html[data-theme="light"] .ai-s-row > span[style*="rgba(255,255,255"],

/* ══ Provider name rows — override hardcoded rgba(255,255,255,…) inline styles ══ */
/* Target the subdomain text spans inside provider rows */
html[data-theme="light"] .ai-s-row > span[style*="rgba(255,255,255"],
body.theme-light .ai-s-row > span[style*="rgba(255,255,255"] {
  color: var(--text-black-a85) !important;
}

/* Provider name row itself — the colored label text is inline so we force
   non-white fallback for any un-overridden white text in light mode */
html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color:var(--gold)"],
html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color: var(--gold)"],
body.theme-light .ai-settings-menu .ai-s-row[style*="color:var(--gold)"],

/* Provider name row itself — the colored label text is inline so we force
   non-white fallback for any un-overridden white text in light mode */
html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color:var(--gold)"],
html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color: var(--gold)"],
body.theme-light .ai-settings-menu .ai-s-row[style*="color:var(--gold)"],
body.theme-light .ai-settings-menu .ai-s-row[style*="color: var(--gold)"] {
  color: var(--sdv5-accent) !important;
}

/* Force all subdomain hint spans inside provider rows to dark text */
html[data-theme="light"] .ai-settings-menu .ai-s-row span,

/* Force all subdomain hint spans inside provider rows to dark text */
html[data-theme="light"] .ai-settings-menu .ai-s-row span,
body.theme-light .ai-settings-menu .ai-s-row span {
  color: var(--text-black-a85) !important;
}

/* But keep the colored provider name itself (Groq=blue, Gemini=pink, etc.)
   by re-applying those colors — they are readable on white */
html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color:var(--brand-groq)"],

/* But keep the colored provider name itself (Groq=blue, Gemini=pink, etc.)
   by re-applying those colors — they are readable on white */
html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color:var(--brand-groq)"],
body.theme-light .ai-settings-menu .ai-s-row[style*="color:var(--brand-groq)"] {
  color: var(--brand-groq-light) !important; /* Groq blue — darken for white bg */
}

html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color:var(--brand-gemini)"],

html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color:var(--brand-gemini)"],
body.theme-light .ai-settings-menu .ai-s-row[style*="color:var(--brand-gemini)"] {
  color: var(--brand-gemini-light) !important; /* Gemini purple — darken */
}

html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color:var(--brand-mistral)"],

html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color:var(--brand-mistral)"],
body.theme-light .ai-settings-menu .ai-s-row[style*="color:var(--brand-mistral)"] {
  color: var(--brand-mistral-light) !important; /* Mistral orange — darken */
}

html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color:var(--brand-cohere)"],

html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color:var(--brand-cohere)"],
body.theme-light .ai-settings-menu .ai-s-row[style*="color:var(--brand-cohere)"] {
  color: var(--brand-cohere-light) !important; /* Cohere coral — darken */
}

html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color:var(--brand-github)"],

html[data-theme="light"] .ai-settings-menu .ai-s-row[style*="color:var(--brand-github)"],
body.theme-light .ai-settings-menu .ai-s-row[style*="color:var(--brand-github)"] {
  color: var(--brand-github-light) !important; /* GitHub grey — darken */
}

/* ══ Settings gear / send button SVG icons in light mode ══ */
html[data-theme="light"] .ai-settings-btn svg,
body.theme-light .ai-settings-btn svg,
html[data-theme="light"] .ai-settings-icon svg,

/* ══ Settings gear / send button SVG icons in light mode ══ */
html[data-theme="light"] .ai-settings-btn svg,
body.theme-light .ai-settings-btn svg,
html[data-theme="light"] .ai-settings-icon svg,
body.theme-light .ai-settings-icon svg {
  stroke: rgba(0,0,0,0.55) !important;
}

/* ══════════════════════════════════════════════════════════════════
   QUICK-ACTION BAR — light mode unified overrides
   Mirrors the dark token set with light-appropriate values.
   ══════════════════════════════════════════════════════════════════ */
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */


/* SVG icon color in light mode — clear + settings */
html[data-theme="light"] .ai-clear-btn svg,

/* SVG icon color in light mode — clear + settings */
html[data-theme="light"] .ai-clear-btn svg,
body.theme-light .ai-clear-btn svg {
  stroke: rgba(0,0,0,0.55) !important;
}

/* ════════════════════════════════════════════════════════════════════
   API KEY PANEL — "YOUR KEY" user badge + user-key input glow
   ════════════════════════════════════════════════════════════════════ */

/* Override key-row grid to make room for the badge column */

/* ════════════════════════════════════════════════════════════════════
   API KEY PANEL — "YOUR KEY" user badge + user-key input glow
   ════════════════════════════════════════════════════════════════════ */

/* Override key-row grid to make room for the badge column */
.ai-s-key-row {
  grid-template-columns: 1fr auto auto auto !important;
}

/* "YOUR KEY" badge — visible only when user has their own key saved */

/* "YOUR KEY" badge — visible only when user has their own key saved */
.ai-s-user-badge {
  display: none; /* shown via JS */
}


.ai-s-user-badge[style*="inline-flex"] {
  align-items: center !important;
  gap: 3px !important;
  font-family: var(--ff-base, 'Inter', sans-serif) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 2px 6px !important;
  border-radius: 20px !important;
  background: rgba(250,204,21,0.13) !important;
  border: 1px solid rgba(250,204,21,0.40) !important;
  color: var(--rate-limit-badge) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: default !important;
  height: 22px !important;
  border: 1px solid var(--bb-border)!important;
}

/* Pop-in animation for badge */

/* Pop-in animation for badge */
@keyframes _badge-pop {
  from { transform: scale(0.75); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}


.ai-s-user-badge[style*="inline-flex"] {
  animation: _badge-pop 0.22s ease !important;
}

/* Input glow when user key is active */

/* Input glow when user key is active */
.ai-s-input--user-key {
  border-color: rgba(250,204,21,0.30) !important;
  background: rgba(250,204,21,0.03) !important;
}


.ai-s-input--user-key::placeholder {
  color: var(--rate-limit-warn-a50) !important;
}

/* Light theme */
html[data-theme="light"] .ai-s-user-badge[style*="inline-flex"],

/* Light theme */
html[data-theme="light"] .ai-s-user-badge[style*="inline-flex"],
body.theme-light .ai-s-user-badge[style*="inline-flex"] {
  background: rgba(202,138,4,0.12) !important;
  border-color: rgba(202,138,4,0.40) !important;
  color: var(--accent-amber-badge-light) !important;
  box-shadow: none !important;
}

/* Quick dropup — soften box-shadow in light mode */
html[data-theme="light"] .ai-quick-menu,

/* Quick dropup — soften box-shadow in light mode */
html[data-theme="light"] .ai-quick-menu,
body.theme-light .ai-quick-menu {
  background: #ffffff !important;
  border-color: var(--bb-border) !important;
  border: 1px solid var(--bb-border)!important;
}

html[data-theme="light"] .aq-section-label,

html[data-theme="light"] .aq-section-label,
body.theme-light .aq-section-label {
  color: var(--text-black-a85) !important;
  border-left-color: var(--bb-border) !important;
}

html[data-theme="light"] .ai-quick-menu .ai-chip,

html[data-theme="light"] .ai-quick-menu .ai-chip,
body.theme-light .ai-quick-menu .ai-chip {
  background: rgba(0,0,0,0.04) !important;
  border-color: var(--bb-border) !important;
  color: var(--text-black-a85) !important;
}

html[data-theme="light"] .ai-quick-menu .ai-chip:hover,

html[data-theme="light"] .ai-quick-menu .ai-chip:hover,
body.theme-light .ai-quick-menu .ai-chip:hover {
  background: rgba(0,0,0,0.08) !important;
  border-color: var(--bb-border) !important;
  color: var(--text-black-a90) !important;
}

/* ── Light mode overrides for claude-style chat UI ── */
html[data-theme="light"] .ai-chat-input,

/* ── Light mode overrides for claude-style chat UI ── */
html[data-theme="light"] .ai-chat-input,
body.theme-light .ai-chat-input {
  background: #ffffff !important;
  border-color: var(--bb-border) !important;
  color: var(--sdv5-accent) !important;
}

html[data-theme="light"] .ai-chat-input::placeholder,

html[data-theme="light"] .ai-chat-input::placeholder,
body.theme-light .ai-chat-input::placeholder {
  color: var(--text-gray-aa) !important;
}

html[data-theme="light"] .ai-chat-input:focus,

html[data-theme="light"] .ai-chat-input:focus,
body.theme-light .ai-chat-input:focus {
  border-color: var(--bb-border) !important;
  background: #ffffff !important;
  border: 1px solid var(--bb-border)!important;
}

html[data-theme="light"] .ai-msg.assistant,
html[data-theme="light"] .msg-bubble.assistant,
body.theme-light .ai-msg.assistant,

html[data-theme="light"] .ai-msg.assistant,
html[data-theme="light"] .msg-bubble.assistant,
body.theme-light .ai-msg.assistant,
body.theme-light .msg-bubble.assistant {
  background: rgba(0,0,0,0.05) !important;
  color: var(--sdv5-accent) !important;
}

html[data-theme="light"] .ai-plain-msg input,

html[data-theme="light"] .ai-plain-msg input,
body.theme-light .ai-plain-msg input {
  background: #ffffff !important;
  border-color: var(--bb-border) !important;
  color: var(--sdv5-accent) !important;
}

/* ── Re-assert explicit sizes that should stay above 11px ── */
.ai-plain-msg { font-size: 15px !important; }

/* ═══════════════════════════════════════════════════════════════
   CLAUDE ICON SVG — Anthropic's official logomark shape
   Used as the agent avatar. Pure CSS + inline SVG via data URI.
═══════════════════════════════════════════════════════════════ */

/* Force-reset any stray background-image on the settings selects and inputs */
.ai-s-sel,

/* ── Re-assert explicit sizes that should stay above 11px ── */

/* ═══════════════════════════════════════════════════════════════
   CLAUDE ICON SVG — Anthropic's official logomark shape
   Used as the agent avatar. Pure CSS + inline SVG via data URI.
═══════════════════════════════════════════════════════════════ */

/* Force-reset any stray background-image on the settings selects and inputs */
.ai-s-sel,
.ai-s-input {
  background-image: none !important;
}

/* Restore the dropdown arrow only */

/* Restore the dropdown arrow only */
.ai-s-sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(255,255,255,0.4)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

body.theme-light .ai-s-sel,

body.theme-light .ai-s-sel,
html[data-theme="light"] .ai-s-sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='rgba(0,0,0,0.4)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

/* The Claude logomark: the characteristic "radiating lines" shape */

/* The Claude logomark: the characteristic "radiating lines" shape */
.ai-avatar.agent {
  background: #d4762c !important; /* Claude's signature amber/orange */
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative;
  /* Use the Claude icon as background SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23D97706'/%3E%3C!-- Claude logomark: angled lines forming the characteristic C-shape --%3E%3Cg fill='%23fff'%3E%3Crect x='9' y='8' width='3.2' height='12' rx='1.6' transform='rotate(-25 9 8)'/%3E%3Crect x='14' y='6' width='3.2' height='16' rx='1.6'/%3E%3Crect x='19' y='8' width='3.2' height='12' rx='1.6' transform='rotate(25 19 8)'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: cover !important;
  color: transparent !important;
  font-size: 0 !important;
}
/* ============================================================
   AI AGENT STYLES — COMPLETE
   Every line related to the AI agent
   ============================================================ */

/* ── ENHANCED AI ORB — pulsing glow ring ─────────────────────────── */
/* ============================================================
   AI AGENT STYLES — COMPLETE
   Every line related to the AI agent
   ============================================================ */

/* ── ENHANCED AI ORB — pulsing glow ring ─────────────────────────── */
.ai-orb {
  animation: orbPulse 3s ease-in-out infinite;
  position: relative;
}
@keyframes orbPulse {
  0%, 100% { border: 1px solid var(--bb-border); }
  50% { border: 1px solid var(--bb-border); }
}

/* ── ENHANCED AI HEADER — glassmorphism ──────────────────────────── */

/* ── ENHANCED AI HEADER — glassmorphism ──────────────────────────── */
.ai-header {
  background: linear-gradient(135deg, rgba(208,208,208,.09) 0%, rgba(6,6,8,.85) 100%) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(208,208,208,.2) !important;
}

/* ── ENHANCED AI LOG — richer background ────────────────────────── */

/* ── ENHANCED AI LOG — richer background ────────────────────────── */
.ai-log {
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(208,208,208,.03) 0%, transparent 70%),
    linear-gradient(rgba(208,208,208,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(208,208,208,.012) 1px, transparent 1px) !important;
  background-size: 100% 100%, 40px 40px, 40px 40px !important;
}

/* ── MARKET OVERVIEW BADGE ───────────────────────────────────────── */

/* ── MARKET OVERVIEW BADGE ───────────────────────────────────────── */
.market-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(208,208,208,.08);
  border: 1px solid rgba(208,208,208,.2);
  border-radius: 8px;
  padding: 4px 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
.market-badge.green { background: rgba(255,255,255,.08); border-color: var(--bb-border); color: var(--gold); }
.market-badge.red   { background: rgba(255,64,64,.08);  border-color: rgba(255,64,64,.25);  color: var(--accent-red); }
.market-badge.blue  { background: rgba(var(--accent-sky-rgb),.08); border-color: rgba(var(--accent-sky-rgb),.25); color: var(--blue); }

/* ── FEAR & GREED PILL in ticker ─────────────────────────────────── */

/* ── FEAR & GREED PILL in ticker ─────────────────────────────────── */
#tick-fg {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid rgba(208,208,208,.3);
  background: rgba(208,208,208,.07);
  color: var(--gold);
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s;
}
#tick-fg:hover { background: rgba(208,208,208,.15); }

/* ── AI MESSAGE ENHANCEMENTS ─────────────────────────────────────── */
.ai-msg { position: relative; }

/* ── AI MESSAGE ENHANCEMENTS ─────────────────────────────────────── */
.ai-bubble {
  background: var(--card);
  border: 1px solid rgba(208,208,208,.1);
  border-radius: 12px 12px 12px 3px;
  padding: 10px 14px;
  max-width: 85%;
  min-width: 60px;
  line-height: 1.75;
  font-size: 15px;
  font-weight: 400;
  font-family: var(--ff-base, "Inter", sans-serif);
  -webkit-font-smoothing: antialiased;
  border: 1px solid var(--bb-border);
  transition: border-color .2s;
}
.ai-msg.user .ai-bubble {
  background: rgba(208,208,208,.08);
  border-color: rgba(208,208,208,.12);
  border-radius: 12px 12px 3px 12px;
  box-shadow: none;
}

/* ── Agent response action buttons (Deposit, Explorer, etc.) ── */

/* ── Agent response action buttons (Deposit, Explorer, etc.) ── */
.ai-bubble button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(208,208,208,.15);
  border-radius: 12px;
  padding: 5px 12px;
  margin: 4px 4px 2px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary-a70);
  cursor: pointer;
  letter-spacing: .01em;
  transition: border-color .15s, color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.ai-bubble button:hover,
.ai-bubble button:hover,
.ai-bubble button:active {
  border-color: rgba(208,208,208,.35);
  color: var(--text-primary-a90);
  background: rgba(208,208,208,.06);
}

/* ── SEND BUTTON — enhanced glow ────────────────────────────────── */

/* ── SEND BUTTON — enhanced glow ────────────────────────────────── */
.ai-send {
  background: linear-gradient(145deg, #D0D0D0, #E5E5E5) !important;
  border: 1px solid var(--bb-border)!important;
  transition: all .15s !important;
  position: absolute !important;
  right: 8px !important;
  bottom: 5px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}
.ai-send:hover:not(:disabled) {
  box-shadow: none !important;
  transform: scale(1.08) !important;
}

/* ── NEW — MARKET INTEL CHIP (live F&G shown in input bar) ───────── */

/* ── NEW — MARKET INTEL CHIP (live F&G shown in input bar) ───────── */
.ai-market-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
}
.ai-market-strip::-webkit-scrollbar { display: none; }
.ai-mkt-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(208,208,208,.05);
  border: 1px solid rgba(208,208,208,.12);
  border-radius: 6px;
  padding: 3px 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-white-a60);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all .12s;
}
.ai-mkt-item:hover { background: rgba(208,208,208,.12); color: var(--gold); }
.ai-mkt-item.up { color: var(--gold); border-color: var(--bb-border); background: rgba(255,255,255,.05); }
.ai-mkt-item.down { color: var(--accent-red); border-color: rgba(255,64,64,.2); background: rgba(255,64,64,.05); }
.ai-mkt-item.neutral { color: var(--gold); border-color: rgba(208,208,208,.2); background: rgba(208,208,208,.07); }

/* ── ENHANCED STATUS INDICATOR ──────────────────────────────────── */

/* ── ENHANCED STATUS INDICATOR ──────────────────────────────────── */
.ai-status {
  animation: none;
}
.ai-status.thinking {
  animation: statusPulse 1s ease-in-out infinite !important;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── THINKING DOTS — enhanced ────────────────────────────────────── */

/* ── THINKING DOTS — enhanced ────────────────────────────────────── */
.ai-dot {
  animation: dotPulse 1.2s infinite !important;
  border: 1px solid var(--bb-border);
}

/* ── SCROLLBAR STYLING ───────────────────────────────────────────── */
.ai-log { scrollbar-width: none !important; -ms-overflow-style: none !important; }
.ai-log::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; background: transparent !important; }

/* ── TOOL CALL LOADING SHIMMER ───────────────────────────────────── */

/* ── SCROLLBAR STYLING ───────────────────────────────────────────── */

/* ── TOOL CALL LOADING SHIMMER ───────────────────────────────────── */
.ai-loading-shimmer {
  background: linear-gradient(90deg, rgba(208,208,208,.05) 0%, rgba(208,208,208,.15) 50%, rgba(208,208,208,.05) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
  height: 14px;
  margin: 4px 0;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── VERSION BADGE ───────────────────────────────────────────────── */

/* ── VERSION BADGE ───────────────────────────────────────────────── */
.ai-v12-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  background: linear-gradient(135deg, rgba(167,139,250,.15), rgba(208,208,208,.1));
  border: 1px solid rgba(167,139,250,.3);
  color: var(--purple);
  letter-spacing: .04em;
}

/* ── QUICK CHIPS — see grid CSS above ─────────────────────────────────── */

/* ── CATEGORY SECTION HEADERS — see .aq-section-label above ─────────── */

/* ── ENHANCED ROUTE ITEMS ────────────────────────────────────────── */

/* ── QUICK CHIPS — see grid CSS above ─────────────────────────────────── */

/* ── CATEGORY SECTION HEADERS — see .aq-section-label above ─────────── */

/* ── ENHANCED ROUTE ITEMS ────────────────────────────────────────── */
.route-item:hover {
  background: linear-gradient(90deg, rgba(208,208,208,.04), transparent) !important;
  border-left: 2px solid rgba(208,208,208,.3);
}

/* ── CARD BORDER GLOW ON FOCUS ──────────────────────────────────── */

/* ── CARD BORDER GLOW ON FOCUS ──────────────────────────────────── */
.swap-box:focus-within {
  border-color: rgba(208,208,208,.45) !important;
  border: 1px solid var(--bb-border)!important;
}

/* ── PLAIN STREAMING AI REPLY ─────────────────────────────────── */

/* ── PLAIN STREAMING AI REPLY ─────────────────────────────────── */
.ai-plain-msg{
  padding:2px 0 12px 0;
  font-family: var(--ff-base, "Inter", sans-serif);
  font-size:15px;line-height:1.75;
  font-weight:400;
  color:var(--text-white-a90);
  white-space:pre-wrap;word-break:break-word;
  max-width:100%;box-sizing:border-box;
  animation:msgIn .18s ease;
  -webkit-font-smoothing:antialiased;
}
.ai-plain-msg a{color:var(--link-blue);text-decoration:none}
.ai-plain-msg a:hover{color:var(--link-blue-hover);text-decoration:none}
.ai-plain-msg strong{color:var(--text-white-a95);font-weight:600}
.ai-plain-msg em{color:var(--text-white-a60);font-style:italic}
.ai-plain-msg code{font-family: var(--ff-mono, "JetBrains Mono", monospace);font-size:13px;color:var(--text-white-a60);background:none;padding:0}

/* ── IN-CHAT BUTTONS ────────────────────────────────────────────── */
.ai-plain-msg button,

/* ── IN-CHAT BUTTONS ────────────────────────────────────────────── */
.ai-plain-msg button,
.ai-inline-btn{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(208,208,208,.1);
  border:1px solid rgba(208,208,208,.4);border-radius:7px;
  padding:6px 13px;margin:4px 5px 4px 0;
  font-family:"Montserrat", sans-serif;font-size:12px;font-weight:700;
  color:var(--primary);cursor:pointer;
  transition:background .12s,border-color .12s;
  white-space:nowrap;vertical-align:middle;line-height:1;
}
.ai-plain-msg button:hover,
.ai-plain-msg button:hover,
.ai-inline-btn:hover{
  background:rgba(208,208,208,.2);border-color:rgba(208,208,208,.7);
}
.ai-plain-msg button:active,
.ai-plain-msg button:active,
.ai-inline-btn:active{
  background:rgba(208,208,208,.28);transform:scale(.97);
}

/* ── IN-CHAT INPUT FIELDS ───────────────────────────────────────── */
.ai-plain-msg input[type="text"],
.ai-plain-msg input[type="password"],
.ai-plain-msg input[type="number"],

/* ── IN-CHAT INPUT FIELDS ───────────────────────────────────────── */
.ai-plain-msg input[type="text"],
.ai-plain-msg input[type="password"],
.ai-plain-msg input[type="number"],
.ai-chat-input{
  display:block;width:100%;box-sizing:border-box;
  background:var(--input,#131412);
  border:1px solid rgba(208,208,208,.3);
  border-radius:8px;
  padding:10px 13px;margin:6px 0 6px;
  font-family:"Montserrat", sans-serif;font-size:12.5px;
  color:var(--text-white-a90);
  outline:none;
  transition:border-color .15s;
  -webkit-appearance:none;
}
.ai-plain-msg input[type="text"]:focus,
.ai-plain-msg input[type="password"]:focus,
.ai-plain-msg input[type="number"]:focus,
.ai-plain-msg input[type="text"]:focus,
.ai-plain-msg input[type="password"]:focus,
.ai-plain-msg input[type="number"]:focus,
.ai-chat-input:focus{
  border-color:rgba(208,208,208,.75);
  background:var(--input,#131412);
}
.ai-plain-msg input::placeholder,
.ai-plain-msg input::placeholder,
.ai-chat-input::placeholder{
  color:var(--text-white-a30);
}

/* ── QR RECEIVE CARD ────────────────────────────────────────────── */

/* ── QR RECEIVE CARD ────────────────────────────────────────────── */
.ai-qr-card{
  background:rgba(0,0,0,.7);border:1px solid rgba(208,208,208,.25);
  border-radius:14px;padding:16px;margin:4px 0 10px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  max-width:100%;overflow:hidden;
}
.ai-qr-card-title{
  align-self:flex-start;font-size:12px;font-weight:700;
  color:var(--text-primary-a85);letter-spacing:.04em;
}
.ai-qr-wrap{
  position:relative;padding:12px;
  background:#fff;border-radius:12px;
  border: 1px solid var(--bb-border);
  display:inline-flex;align-items:center;justify-content:center;
}
.ai-qr-wrap canvas{display:block;border-radius:4px}
.ai-qr-logo{
  position:absolute;width:32px;height:32px;border-radius:7px;
  background:linear-gradient(145deg,#D0D0D0,#E5E5E5);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;border: 1px solid var(--bb-border);
  pointer-events:none;border:2px solid #fff;
}
.ai-qr-addr{
  font-family:"Montserrat", sans-serif;font-size:10px;
  color:var(--text-white-a55);word-break:break-all;text-align:center;
  padding:6px 10px;background:rgba(255,255,255,.04);
  border:1px solid rgba(208,208,208,.12);border-radius:8px;
  cursor:pointer;width:100%;transition:all .15s;letter-spacing:.02em;
}
.ai-qr-addr:hover{background:rgba(208,208,208,.06);color:var(--text-white-a80);border-color:rgba(208,208,208,.3)}
.ai-qr-copy-hint{font-size:9px;color:var(--text-white-a30);letter-spacing:.05em;text-transform:uppercase}

/* ── 4-LINK TOKEN BUTTONS ────────────────────────────────────────── */

/* ── 4-LINK TOKEN BUTTONS ────────────────────────────────────────── */
.ai-token-links{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;
  width:100%;margin:6px 0 2px;
  white-space:normal;
}
.ai-tok-link{
  display:flex;align-items:center;justify-content:center;gap:5px;
  padding:7px 6px;border-radius:8px;border:1px solid;
  font-family:"Montserrat", sans-serif;font-size:10px;font-weight:700;
  text-decoration:none;cursor:pointer;transition:all .15s;
  white-space:nowrap;line-height:1;
}
.ai-tok-link.ds{
  background:rgba(0,200,180,.08);border-color:rgba(0,200,180,.3);color:var(--brand-dexscreener);
}
.ai-tok-link.ds:hover{background:rgba(0,200,180,.18);border-color:rgba(0,200,180,.6);border: 1px solid var(--bb-border);border-color:rgba(138,92,246,.3);color:var(--purple);
}
.ai-tok-link.dp:hover{background:rgba(138,92,246,.2);border-color:rgba(138,92,246,.6);border: 1px solid var(--bb-border);border-color:rgba(79,140,247,.3);color:var(--brand-base-token);
}
.ai-tok-link.bs:hover{background:rgba(79,140,247,.18);border-color:rgba(79,140,247,.6);border: 1px solid var(--bb-border);border-color:var(--bb-border);color:var(--gold);
}
.ai-tok-link.gt:hover{background:rgba(255,255,255,.18);border-color:var(--bb-border);border: 1px solid var(--bb-border);border:1px solid rgba(208,208,208,.25);
  border-radius:14px;padding:14px;margin:4px 0 10px;
  display:flex;flex-direction:column;gap:10px;
  max-width:100%;overflow:hidden;
}
.ai-scanner-box > div:first-child{
  font-size:12px;font-weight:700;color:var(--text-primary-a85);letter-spacing:.04em;
}
.ai-scanner-video-wrap{
  position:relative;border-radius:10px;overflow:hidden;
  background:#000;aspect-ratio:1/1;max-height:260px;
  border:1px solid rgba(208,208,208,.15);
}
.ai-scanner-video-wrap video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.ai-scanner-video-wrap canvas{
  display:none;
}
.ai-scanner-video-wrap::before,.ai-scanner-video-wrap::after{
  content:'';position:absolute;width:24px;height:24px;z-index:3;
  border-color:rgba(208,208,208,.8);border-style:solid;
}
.ai-scanner-video-wrap::before{top:10px;left:10px;border-width:2px 0 0 2px;border-radius:4px 0 0 0}
.ai-scanner-video-wrap::after{top:10px;right:10px;border-width:2px 2px 0 0;border-radius:0 4px 0 0}
.ai-scanner-line{
  position:absolute;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(208,208,208,.8),transparent);
  animation:scanLine 2s ease-in-out infinite;z-index:2;top:50%;
}
@keyframes scanLine{0%,100%{top:20%;opacity:.5}50%{top:80%;opacity:1}}
.ai-scanner-status{
  font-size:11px;color:var(--text-primary-a70);text-align:center;
  padding:4px 0;font-family:"Montserrat", sans-serif;
}
.ai-scanner-btns{
  display:flex;gap:8px;
}
.ai-scanner-btns button{
  flex:1;padding:9px 0;font-size:11px;font-weight:700;
  border-radius:9px;border:1px solid rgba(208,208,208,.3);
  cursor:pointer;font-family:"Montserrat", sans-serif;
  transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:5px;
  text-align:center;line-height:1;
}
.ai-scanner-btns button:first-child{
  background:rgba(255,64,64,.1);border-color:rgba(255,64,64,.3);color:var(--state-danger);
}
.ai-scanner-btns button:first-child:hover{background:rgba(255,64,64,.18);border-color:rgba(255,64,64,.5)}
.ai-scanner-btns button:last-child{
  background:rgba(208,208,208,.08);border-color:rgba(208,208,208,.3);color:var(--gold);
}
.ai-scanner-btns button:last-child:hover{background:rgba(208,208,208,.16);border-color:rgba(208,208,208,.55)}

/* ── COLOR-CODED NUMBERS (entire site) ─────────────────────────── */
.val-up,.pct-up{color:var(--gold) !important}
.val-dn,.pct-dn{color:var(--accent-red) !important}
.val-usd,.usd-val{color:var(--primary) !important}

.ai-plain-msg span[data-chg]{font-family:"Montserrat", sans-serif;font-size:12px;font-weight:700}
.ai-plain-msg span[data-chg="up"]{color:var(--gold)}
.ai-plain-msg span[data-chg="dn"]{color:var(--accent-red)}
.ai-plain-msg span[data-chg="zero"]{color:var(--muted2)}
.ai-plain-msg span[data-usd]{color:var(--primary);font-family:"Montserrat", sans-serif;font-size:12px}


/* ── COLOR-CODED NUMBERS (entire site) ─────────────────────────── */


.ai-plain-msg .ai-num {
  color: var(--text-white-a85);
  font-family: "Montserrat", sans-serif;
  font-size: 0.91em;
  letter-spacing: 0.01em;
}
.ai-plain-msg .ai-sym {
  color: var(--text-white-a85);
}
.ai-cursor{
  display:inline-block;width:2px;height:1em;
  background:#D0D0D0;margin-left:2px;
  vertical-align:text-bottom;
  animation:cursorBlink .7s step-end infinite;
}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ── PRO SVG ICON SYSTEM (replaces emoji in AI chat output) ───────── */
.ai-ic{
  display:inline-block;
  width:14px;height:14px;
  vertical-align:-2px;
  margin:0 1px;
  flex-shrink:0;
  color: var(--text-white-a85, currentColor);
}
.ai-plain-msg .ai-ic{ color: var(--text-white-a85, currentColor); }
.ai-ic.ic-warn{ color: var(--gold, #E8B84B); }
.ai-ic.ic-danger{ color: var(--accent-red, #FF5050); }
.ai-ic.ic-up{ color: #3ECF7E; }
.ai-ic.ic-down{ color: var(--accent-red, #FF5050); }
.ai-ic.ic-red{ color: #FF5050; }
.ai-ic.ic-green{ color: #3ECF7E; }
.ai-ic.ic-blue{ color: #4C9AFF; }
.ai-ic.ic-yellow{ color: #E8C84B; }
.ai-ic.ic-orange{ color: #F0954D; }
.ai-ic.ic-purple{ color: #B589F0; }
.ai-ic.ic-gold{ color: #E8B84B; }
.ai-ic.ic-silver{ color: #C7CDD6; }
.ai-ic.ic-bronze{ color: #C08552; }
button .ai-ic, .ai-rz-btn .ai-ic{ vertical-align:-2px; margin-right:3px; }
.ai-thinking-dots{display:inline-flex;align-items:center;gap:3px}
.ai-thinking-dots span{display:inline-block;width:4px;height:4px;border-radius:50%;background:rgba(208,208,208,.6);animation:thinkDot 1.2s ease-in-out infinite}
.ai-thinking-dots span:nth-child(2){animation-delay:.2s}
.ai-thinking-dots span:nth-child(3){animation-delay:.4s}

/* ── Animated logo loader (replaces "thinking•••") ──────────────── */
.ai-thinking-wrapper{display:flex;align-items:center;padding:4px 0 8px}
.ai-logo-loader{width:42px;height:42px;display:block}
@keyframes aiLogoDraw {
  0% { stroke-dashoffset: 3000; }
  40% { stroke-dashoffset: 0; }
  60% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 3000; }
}
@keyframes aiLogoMorph {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  25% {
    transform: scale(0.95) rotate(-2deg);
    filter: brightness(1.1);
  }
  50% {
    transform: scale(1.05) rotate(2deg);
    filter: brightness(0.9);
  }
  75% {
    transform: scale(0.98) rotate(-1deg);
    filter: brightness(1.05);
  }
}
@keyframes aiLogoSkew {
  0%, 100% { transform: skewX(0deg) skewY(0deg); }
  50% { transform: skewX(3deg) skewY(2deg); }
}
.ai-logo-loader .ai-logo-group {
  animation: aiLogoMorph 6s ease-in-out infinite;
  transform-origin: center;
}
.ai-logo-loader .ai-logo-shape {
  animation: aiLogoSkew 4s ease-in-out infinite;
  transform-origin: center;
}
.ai-logo-loader .ai-logo-path {
  fill: none;
  stroke: var(--text-sky);
  stroke-width: 20;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 3000;
  animation: aiLogoDraw 4s ease-in-out infinite;
}
@keyframes thinkDot{0%,80%,100%{transform:scale(.5);opacity:.3}40%{transform:scale(1);opacity:1}}
.ai-user-msg{
  display:flex;flex-direction:column;align-items:flex-end;
  padding:2px 0 8px;animation:msgIn .15s ease;
}
.ai-user-bubble{
  max-width:82%;background:rgba(208,208,208,.08);
  border:1px solid rgba(208,208,208,.12);
  border-radius:12px 12px 3px 12px;padding:8px 13px;
  font-family: var(--ff-base, "Inter", sans-serif);
  font-size:15px;font-weight:400;line-height:1.6;color:var(--text-white-a85);
  word-break:break-word;overflow-wrap:anywhere;
}

/* ── Multi-Provider AI Settings ── */
.ai-settings-menu { max-height: 80vh; overflow-y: auto; scrollbar-width: none; overflow: -moz-scrollbars-none; -ms-overflow-style: none; }
.ai-settings-dropup.ai-settings-menu { max-height: 480px !important; }

/* ── Multi-Provider AI Settings ── */
.ai-s-section-hdr {
  font-size: 9px; font-weight: 800; letter-spacing: .06em;
  color: var(--muted2); text-transform: uppercase;
  padding: 8px 10px 3px; border-top: 1px solid rgba(208,208,208,.08);
  margin-top: 2px; display: flex; align-items: center; gap: 6px;
}
.ai-s-section-hdr:first-of-type { border-top: none; }
.ai-s-hint {
  font-size: 8px; font-weight: 500; color: var(--muted2);
  text-transform: none; letter-spacing: 0;
}
.ai-s-input-full { width: 100%; box-sizing: border-box; }
.ai-s-row { flex-wrap: wrap; }

/* ── CLICKABLE LINK PILLS ─────────────────────────────────────────── */

/* ── CLICKABLE LINK PILLS ─────────────────────────────────────────── */
.ai-link-pill {
  display:inline;
  color:var(--link-blue);text-decoration:underline;
  background:none;border:none;border-radius:0;padding:0;
  font-size:inherit;font-family:"Montserrat", sans-serif;
  word-break:break-all;vertical-align:baseline;
}
.ai-link-pill:hover{ color:var(--link-blue-hover);text-decoration:underline; }
.ai-plain-msg a.ai-link-pill{ color:var(--link-blue); }

/* ── MESSAGE ACTION ICONS (copy / retry / share) ─────────────────── */

/* ── MESSAGE ACTION ICONS (copy / retry / share) ─────────────────── */
.ai-msg-actions {
  display:flex;align-items:center;gap:5px;
  margin-top:7px;
  white-space:normal;
  flex-wrap:wrap;
}
.ai-msg-actions--agent { justify-content:flex-start; }
.ai-msg-actions--user  { justify-content:flex-end; }


.ai-msg-act-btn {
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 6px;
  border-radius:6px;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--text-primary-a50);
  font-family:"Montserrat", sans-serif;
  font-size:11px;
  font-weight:600;
  line-height:1;
  letter-spacing:.01em;
  transition:color .12s,transform .1s;
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
}
.ai-act-icon {
  font-size:13px;
  line-height:1;
  font-style:normal;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
}
.ai-act-label {
  font-size:10.5px;
  color:var(--text-primary-a85);
}
.ai-msg-act-btn:hover,
.ai-msg-act-btn:hover,
.ai-msg-act-btn:active {
  color:var(--text-primary-a90);
  transform:scale(1.08);
}
.ai-msg-act-btn--done {
  color:var(--gold);
}
.ai-msg-act-btn--done .ai-act-label { color:var(--text-white-a85); }

/* ── SEND RESULT CARD ─────────────────────────────────────────────── */

/* ── SEND RESULT CARD ─────────────────────────────────────────────── */
.ai-send-card {
  display:flex;flex-direction:column;gap:5px;
  white-space:normal;
}
.ai-send-card-row {
  display:block;
  line-height:1.45;
}
.ai-send-card-title {
  font-weight:700;font-size:14px;margin-bottom:2px;
}
.ai-send-card-link {
  display:inline-flex;align-items:center;gap:4px;
  color:var(--link-blue);text-decoration:none;font-size:12.5px;
  margin-top:4px;
}
.ai-send-card-link:hover { text-decoration:underline; color:var(--link-blue-hover); }

/* ── SWAP CTA — enhanced ─────────────────────────────────────────── */

/* ── SWAP CTA — enhanced ─────────────────────────────────────────── */
.swap-cta:not(:disabled) {
  border: 1px solid var(--bb-border)!important;
  transition: all .2s !important;
}
.swap-cta:not(:disabled):hover {
  border: 1px solid var(--bb-border)!important;
  transform: translateY(-2px) !important;
}

/* ── TOKEN PICK BUTTON — enhanced hover ─────────────────────────── */

/* ── TOKEN PICK BUTTON — enhanced hover ─────────────────────────── */
.tok-pick:hover {
  background: linear-gradient(135deg, rgba(208,208,208,.2), rgba(208,208,208,.1)) !important;
  border: 1px solid var(--bb-border)!important;
}

/* ── BOTTOM NAV — enhanced active state ─────────────────────────── */

/* ── BOTTOM NAV — enhanced active state ─────────────────────────── */
.nav-btn.active .nav-icon {
  filter: drop-shadow(0 0 8px rgba(208,208,208,.6));
}
.nav-btn.active span:last-of-type {
  color: var(--gold) !important;
  text-shadow: 0 0 12px rgba(208,208,208,.4);
}

/* ── AI panel: show settings in main header when panel open ── */
/* [migrated to overlay.css] */


/* Reposition settings menu so it drops down correctly from main header */

/* ── AI panel: show settings in main header when panel open ── */
/* [migrated to overlay.css] */



#hdr-ai-settings-wrap .ai-settings-menu::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
}


#settings-backdrop {
  display: none !important;
}
#settings-backdrop.open { display: none !important; }

#hdr-ai-settings-wrap.settings-open::after { display: none; }



#hdr-ai-settings-wrap {
  position: relative;
  z-index: 9996;
}


.ai-msg-act-btn {
  padding: 5px 7px;
  min-width: 30px;
  justify-content: center;
}
.ai-act-icon { font-size: 14px; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; }
.ai-act-label { display: none; }

.ai-inp,
.ai-quick-menu,
.ai-settings-menu,

.ai-inp,
.ai-quick-menu,
.ai-settings-menu,
.ai-settings-dropup {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  overflow: -moz-scrollbars-none !important;
}
.ai-inp::-webkit-scrollbar,
.ai-quick-menu::-webkit-scrollbar,
.ai-settings-menu::-webkit-scrollbar,
.ai-inp::-webkit-scrollbar,
.ai-quick-menu::-webkit-scrollbar,
.ai-settings-menu::-webkit-scrollbar,
.ai-settings-dropup::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
/* [panel CSS migrated to overlay.css] */


/* ── AI Settings dropup — bottom input bar ──────────────────────── */


/* ── AI Settings dropup — bottom input bar ──────────────────────── */
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

.ai-settings-dropup {
  bottom: calc(100% + 6px) !important;
  top: auto !important;
  right: 0 !important;
  left: 0 !important;
  position: absolute !important;
  min-width: unset;
  width: auto;
  max-height: 432px !important;
  overflow-y: auto !important;
}

/* ── Send button thinking animation ─────────────────────────────── */

/* ── Send button thinking animation ─────────────────────────────── */
@keyframes sendPulse {
  0%,100% { opacity: 1; transform: scale(1); border: 1px solid var(--bb-border); }
  50%      { opacity: .7; transform: scale(.93); border: 1px solid var(--bb-border); }
}
@keyframes sendSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ai-send.is-thinking {
  pointer-events: none;
  animation: sendPulse .9s ease-in-out infinite !important;
}
.ai-send.is-thinking::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid var(--bb-border);
  border-top-color: #000;
  animation: sendSpin .7s linear infinite;
}
.ai-send.is-thinking > * { opacity: 0; }

/* ── Deploy pending loader ───────────────────────────────────────── */

/* ── Deploy pending loader ───────────────────────────────────────── */
@keyframes deployDot {
  0%,80%,100% { transform: scale(0); opacity: .3; }
  40%         { transform: scale(1);  opacity: 1; }
}
#deploy-pending-loader {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
#deploy-pending-loader span {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(208,208,208,.7);
  animation: deployDot 1.4s ease-in-out infinite;
}
#deploy-pending-loader span:nth-child(2) { animation-delay: .2s; }
#deploy-pending-loader span:nth-child(3) { animation-delay: .4s; }

/* ── Clear chat button ───────────────────────────────────────────── */

/* ── Clear chat button ───────────────────────────────────────────── */
.ai-clear-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(208,208,208,.12);
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-primary-a50);
  transition: color .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.ai-clear-btn:hover {
  color: var(--state-danger-clear-hover);
  border-color: rgba(220,80,80,.35);
}
.ai-clear-btn:active { transform: scale(.93); }

/* ── AI POPUP OVERLAY ────────────────────────────────────────────── */

/* ── AI POPUP OVERLAY ────────────────────────────────────────────── */
/* [migrated to overlay.css] */

/* [migrated to overlay.css] */

@keyframes aiFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* [panel CSS migrated to overlay.css] */

.ai-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 6px 12px 6px;border-bottom:1px solid var(--gold-b);
  background:linear-gradient(135deg,rgba(208,208,208,.07) 0%,rgba(6,6,8,.6) 100%);
  gap:8px;flex-shrink:0
}
.ai-close-btn{
  background:transparent;border:1px solid var(--gold-b);border-radius:8px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--muted2);font-size:16px;cursor:pointer;flex-shrink:0;
  transition:color .15s,border-color .15s
}
.ai-close-btn:hover{color:var(--gold);border-color:var(--gold-bb)}

/* AI settings dropdown */
.ai-settings-wrap{position:relative;flex-shrink:0}

/* AI settings dropdown */
.ai-settings-btn{
  background:var(--card);border:1px solid rgba(208,208,208,.12);border-radius:8px;
  width:32px;height:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;cursor:pointer;transition:all .15s;position:relative
}
.ai-settings-btn:hover{background:transparent}
.ai-settings-icon{font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px}
.ai-settings-arr{font-size:7px;color:var(--muted2);line-height:1}
.ai-settings-menu{
  display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:999;
  background:var(--card);border:none;border-radius:11px;
  min-width:unset;
  padding:8px;animation:dropIn .18s cubic-bezier(.2,.8,.4,1);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain
}
.ai-settings-menu.open{display:block}
.ai-s-row{
  padding:8px 10px;display:flex;align-items:center;gap:8px;
  border-bottom:1px solid rgba(208,208,208,.07)
}
.ai-s-row:last-of-type{border-bottom:none}
.ai-s-lbl{
  font-size:10px;font-weight:700;color:var(--muted2);
  white-space:nowrap;flex-shrink:0;min-width:45px
}
.ai-s-sel{
  flex:1;background:var(--input);border:1px solid var(--gold-b);border-radius:7px;
  padding:5px 28px 5px 9px;color:var(--gold);font-family:"Montserrat", sans-serif;
  font-size:10px;font-weight:600;cursor:pointer;outline:none;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center
}
.ai-s-input{
  flex:1;background:var(--input);border:1px solid var(--gold-b);border-radius:7px;
  padding:5px 9px;font-family:"Montserrat", sans-serif;font-size:10px;
  color:var(--text);outline:none;min-width:0
}
.ai-s-input:focus{border-color:var(--gold-bb)}
.ai-s-btns{
  display:flex;gap:6px;padding:6px 10px 4px;justify-content:flex-end
}
.ai-s-save{
  background:var(--gold);border:none;border-radius:7px;padding:5px 12px;
  font-family:"Montserrat", sans-serif;font-size:10px;font-weight:700;
  color:var(--sdv5-bg-hero);cursor:pointer;flex-shrink:0;white-space:nowrap
}
.ai-s-clear{
  background:transparent;border:1px solid rgba(255,64,64,.3);border-radius:7px;
  padding:5px 8px;font-size:10px;color:var(--red);cursor:pointer;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s
}
.ai-s-clear:hover{background:rgba(255,64,64,.12);border-color:rgba(255,64,64,.6)}

.ai-title-wrap{display:flex;align-items:center;gap:8px}

.ai-orb{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(145deg,#D0D0D0,#E5E5E5);
  display:flex;align-items:center;justify-content:center;font-size:14px;
  border: 1px solid var(--bb-border);font-weight:800;color:var(--gold);letter-spacing:-.3px}
.ai-status{font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;border:1px solid;
  color:var(--green);border-color:var(--bb-border);background:rgba(255,255,255,.08)}
.ai-status.thinking{color:var(--gold);border-color:var(--bb-border);background:rgba(255,255,255,.08)}
.ai-status.error{color:var(--red);border-color:rgba(255,64,64,.3);background:rgba(255,64,64,.08)}
/* Provider toggle */
.ai-provider-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ai-provider-lbl{font-size:11px;font-weight:700;color:var(--muted2);text-transform:uppercase}
.ai-tog{display:flex;background:var(--input);border:1px solid var(--gold-b);border-radius:99px;overflow:hidden;padding:2px}
.ai-tog-btn{background:transparent;border:none;border-radius:99px;padding:3px 9px;font-family:"Montserrat", sans-serif;font-size:10px;font-weight:700;color:var(--muted2);cursor:pointer;transition:all .15s;white-space:nowrap}
.ai-tog-btn.on.groq{background:linear-gradient(135deg,#ff6b35,#ffffff);color:var(--sdv5-bg-hero)}
.ai-tog-btn.on.gemini{background:linear-gradient(135deg,#4285f4,#ffffff);color:var(--gold)}
/* Thought stream / chat history */
/* Provider toggle */
/* Thought stream / chat history */
.ai-log{
  flex:1;overflow-y:auto;padding:10px 6px 6px 6px;display:flex;flex-direction:column;gap:10px;
  overscroll-behavior:contain;
  background:
    linear-gradient(rgba(208,208,208,.015) 1px,transparent 1px),
    linear-gradient(90deg,rgba(208,208,208,.015) 1px,transparent 1px);
  background-size:40px 40px;
}
.ai-msg{display:flex;gap:8px;animation:msgIn .2s ease}
@keyframes msgIn{from{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}
.ai-msg.user{flex-direction:row-reverse}
.ai-avatar{width:22px;height:22px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.ai-avatar.agent{background:linear-gradient(145deg,#D0D0D0,#E5E5E5);color:var(--sdv5-bg-hero)}
.ai-avatar.user{background:var(--gold-dim);color:var(--gold);border:1px solid var(--gold-b)}

/* Action chips — what the agent did */

/* Action chips — what the agent did */
.ai-action{
  display:inline-flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.08);border:1px solid var(--bb-border);
  border-radius:6px;padding:3px 8px;font-size:10px;font-weight:700;color:var(--green);
  margin:2px 0
}
.ai-action.warn{background:rgba(255,255,255,.08);border-color:var(--bb-border);color:var(--gold)}
.ai-action.info{background:var(--gold-dim);border-color:var(--gold-b);color:var(--gold)}
/* Thinking dots */
.ai-dots{display:inline-flex;gap:3px;align-items:center}
.ai-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.5;animation:dotPulse 1.2s infinite}
.ai-dot:nth-child(2){animation-delay:.2s}
.ai-dot:nth-child(3){animation-delay:.4s}
@keyframes dotPulse{0%,80%,100%{transform:scale(.6);opacity:.3}40%{transform:scale(1);opacity:1}}
/* Quick actions dropdown */
/* ═══════════════════════════════════════════════════════════════════
   QUICK ACTIONS — GRID LAYOUT (v101)
   ═══════════════════════════════════════════════════════════════════ */
.ai-quick-wrap{position:relative;display:flex;align-items:center;gap:6px}
/* Quick actions dropdown */
/* ═══════════════════════════════════════════════════════════════════
   QUICK ACTIONS — GRID LAYOUT (v101)
   ═══════════════════════════════════════════════════════════════════ */
.ai-quick-btn{
  flex:1;width:auto;background:linear-gradient(135deg,rgba(208,208,208,.07),rgba(12,12,16,.95));
  border:1px solid rgba(208,208,208,.12);border-radius:9px;
  padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;
  transition:all .15s;font-family:"Montserrat", sans-serif}
.ai-quick-btn:hover{background:rgba(208,208,208,.1)}
.ai-quick-icon{font-size:14px;line-height:1}
.ai-quick-text{flex:1;font-size:11px;font-weight:700;color:var(--text-white-a50);text-align:left}
.ai-quick-btn:hover .ai-quick-text{color:var(--gold)}
.ai-quick-arr{display:inline-flex;align-items:center;justify-content:center;line-height:1}
.ai-quick-arr .qa-arrow{
  color:var(--text-white-a40);
  transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .2s;
  display:block;
}
.ai-quick-btn.open .ai-quick-arr .qa-arrow{
  transform:rotate(180deg);
  color:var(--text-white-a70);
}

/* ── Drop-up panel ────────────────────────────────────────────────── */

/* ── Drop-up panel ────────────────────────────────────────────────── */
.ai-quick-menu{
  display:none;position:absolute;bottom:calc(100% + 8px);left:0;right:0;z-index:999;
  background:rgba(10,10,14,.97);border:1px solid rgba(208,208,208,.18);border-radius:14px;
  max-height:432px;overflow-y:auto;overscroll-behavior:contain;
  border: 1px solid var(--bb-border);
  padding:10px 10px 12px;
  animation:dropUp .2s cubic-bezier(.2,.8,.4,1);
  scrollbar-width:none;overflow:-moz-scrollbars-none;-ms-overflow-style:none
}
.ai-quick-menu.open{display:block}
@keyframes dropUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── Section label ────────────────────────────────────────────────── */

/* ── Section label ────────────────────────────────────────────────── */
.aq-section-label{
  font-family:"Montserrat", sans-serif;font-size:8.5px;font-weight:800;
  color:var(--text-primary-a50);letter-spacing:.1em;text-transform:uppercase;
  padding:10px 4px 5px;margin-top:2px;
  background:linear-gradient(90deg,rgba(208,208,208,.06),transparent);
  border-radius:4px;border-left:2px solid rgba(208,208,208,.3);
  padding-left:8px
}
.aq-section-label:first-child{padding-top:4px}

/* ── Grid container ───────────────────────────────────────────────── */

/* ── Grid container ───────────────────────────────────────────────── */
.aq-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:5px;
  margin-bottom:2px
}
@media(max-width:280px){
  .aq-grid{grid-template-columns:1fr}
}

/* ── Chip inside grid ─────────────────────────────────────────────── */

/* ── Chip inside grid ─────────────────────────────────────────────── */
.ai-quick-menu .ai-chip{
  width:100%;justify-content:flex-start;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-radius:7px;padding:7px 10px;font-size:10px;
  display:flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,rgba(208,208,208,.055),rgba(8,8,12,.9));
  border:1px solid rgba(208,208,208,.14);
  color:var(--text-white-a55);font-weight:700;
  transition:all .13s;cursor:pointer;
  font-family:"Montserrat", sans-serif}
.ai-quick-menu .ai-chip:hover{
  background:linear-gradient(135deg,rgba(208,208,208,.15),rgba(208,208,208,.06));
  border-color:rgba(208,208,208,.42);color:var(--gold);
  transform:translateY(-1px);
  border: 1px solid var(--bb-border);flex-wrap:wrap;gap:5px}
.ai-send{
  background:var(--text-sky);border:none;border-radius:8px;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-size:15px;cursor:pointer;flex-shrink:0;transition:all .15s;color:var(--text-on-accent);
  position:absolute;right:8px;bottom:5px;z-index:2
}
.ai-send:hover:not(:disabled){transform:scale(1.06)}
.ai-send:disabled{opacity:.35;cursor:not-allowed}
/* ─── AI Rate-limit counter badge ─── */
/* ─── AI Rate-limit counter badge ─── */
.ai-rate-counter{
  position:absolute;top:6px;right:52px;
  font-size:9.5px;font-weight:700;font-family:'Space Grotesk','Inter',sans-serif;
  color:var(--text-white-a30);letter-spacing:.04em;
  pointer-events:none;user-select:none;line-height:1;
  transition:color .2s;
}
.ai-rate-counter--warn  { color:var(--rate-limit-warn-a70); }
.ai-rate-counter--limit { color:var(--rate-limit-danger-a85); }

.ai-chips{display:flex;flex-wrap:wrap;gap:5px}

/* Live data ticker inside agent */
/* Live data ticker inside agent */
.ai-ticker{
  display:flex;gap:10px;overflow-x:auto;padding:8px 16px;
  border-bottom:1px solid var(--gold-b);
  scrollbar-width:none
}
.ai-ticker::-webkit-scrollbar{display:none}
.ai-tick-item{display:flex;align-items:center;gap:5px;flex-shrink:0}
.ai-tick-sym{font-size:10px;font-weight:800;color:var(--text)}
.ai-tick-price{font-family:"Montserrat", sans-serif;font-size:10px;color:var(--gold)}
.ai-tick-chg{font-size:9px;font-weight:700}
.ai-tick-chg.up{color:var(--green)}.ai-tick-chg.dn{color:var(--red)}

/* ── AI Chat panel ── */

/* ── AI Chat panel ── */
/* [panel CSS migrated to overlay.css] */

.ai-log {
  background: var(--bb-bg) !important;
}


.ai-send {
  background: var(--text-sky) !important;
  border-radius: 8px !important;
  color: var(--text-on-accent) !important;
  border: 1px solid var(--bb-border)!important;
  position: absolute !important;
  right: 8px !important;
  bottom: 5px !important;
  width: 34px !important;
  height: 34px !important;
}


.ai-plain-msg {
  font-size: 13px !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
  font-family: var(--ff-base, "Inter", sans-serif) !important;
  color: var(--text-muted-tier) !important;
}
.ai-user-bubble {
  background: rgba(208,208,208,.1) !important;
  color: var(--text-white-a90) !important;
  border: 1px solid rgba(208,208,208,.12) !important;
  border-radius: var(--bb-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  font-family: var(--ff-base, "Inter", sans-serif) !important;
}

/* Quick actions */

/* Quick actions */
.ai-quick-btn {
  background: var(--bb-surface2) !important;
  border: 1px solid var(--bb-border)!important;
  border-radius: var(--bb-radius-xs) !important;
  color: var(--bb-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
.ai-quick-menu {
  background: var(--bb-surface) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--bb-radius) !important;
  border: 1px solid var(--bb-border)!important;
}
.ai-quick-menu .ai-chip {
  background: var(--bb-surface2) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--bb-radius-xs) !important;
  color: var(--bb-text2) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
}
.ai-quick-menu .ai-chip:hover {
  background: var(--bb-surface3) !important;
  border-color: var(--bb-accent) !important;
  color: var(--bb-text) !important;
}

/* ── Settings menu ── */

/* ── Settings menu ── */
.ai-settings-btn {
  background: var(--bb-surface2) !important;
  border: 1px solid rgba(208,208,208,.12) !important;
  border-radius: var(--bb-radius-xs) !important;
}
.ai-settings-btn:hover {
  background: transparent !important;
}
.ai-settings-icon { color: var(--bb-text2) !important; }
body.theme-dark .ai-settings-menu {
  background: var(--card,#131412) !important;
  border: none !important;
  border-radius: var(--bb-radius) !important;
  border: 1px solid var(--bb-border)!important;
}
body.theme-light .ai-settings-menu {
  background: #ffffff !important;
  border: none !important;
  border-radius: var(--bb-radius) !important;
  border: 1px solid var(--bb-border)!important;
}
.ai-s-sel {
  background-color: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--text-white-a85) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.ai-s-input {
  background-color: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--text-white-a85) !important;
  font-size: 12px !important;
}
.ai-s-save {
  background: var(--text-sky) !important;
  color: var(--text-on-accent) !important;
  border-radius: var(--bb-radius-xs) !important;
  font-weight: 700 !important;
}
.ai-s-lbl { color: var(--bb-text2) !important; font-size: 11px !important; font-weight: 600 !important; }

/* ── Message action buttons ── */

/* ── Message action buttons ── */
.ai-msg-act-btn {
  /* background handled by rz-frame override at end of file */
  border: none !important;
  color: var(--text-primary-a50) !important;
}
.ai-msg-act-btn:hover {
  /* background handled by rz-frame override at end of file */
  border: none !important;
  color: var(--text-primary-a90) !important;
}

/* ── Wallet popup ── */
/* [migrated to overlay.css] */


/* ── FIX: Settings popup single unified background ──────────────────────────
   The container (.ai-settings-menu) owns the background color.
   All inner rows, btns, and section headers must be transparent so the
   container background shows through uniformly — no split/two-tone effect.
   ─────────────────────────────────────────────────────────────────────────── */
.ai-settings-menu .ai-s-row,
.ai-settings-menu .ai-s-btns,

/* ── FIX: Settings popup single unified background ──────────────────────────
   The container (.ai-settings-menu) owns the background color.
   All inner rows, btns, and section headers must be transparent so the
   container background shows through uniformly — no split/two-tone effect.
   ─────────────────────────────────────────────────────────────────────────── */
.ai-settings-menu .ai-s-row,
.ai-settings-menu .ai-s-btns,
.ai-settings-menu .ai-s-section-hdr {
  background: transparent !important;
}

/* Ensure the menu container itself is always a single solid color */
body.theme-dark #ai-settings-menu,

/* Ensure the menu container itself is always a single solid color */
body.theme-dark #ai-settings-menu,
body.theme-dark #hdr-ai-settings-wrap .ai-settings-menu {
  background: #000000;
}

/* Light mode: white */
body.theme-light #ai-settings-menu,

/* Dark mode: dark surface */
body.theme-dark #ai-settings-menu,

/* Also prevent the old --card variable leaking in via base rule */

/* Light mode: white */
body.theme-light #ai-settings-menu {
  background: #FFFFFF !important;
}

/* Dark mode: dark surface */
body.theme-dark #ai-settings-menu,

/* Also prevent the old --card variable leaking in via base rule */
body.theme-dark .ai-settings-menu {
  background: #000000 !important;
}

/* ── Bridge panel light-theme overrides ──────────────────────────── */

/* ── Bridge panel light-theme overrides ──────────────────────────── */
/* [migrated to overlay.css] */

body.theme-light .bridge-chain-box,
body.theme-light .bridge-chain-box,
body.theme-light .bridge-asset-box {
  background: #ffffff !important;
  border-color: var(--bb-border) !important;
}
body.theme-light .bridge-chain-label,
body.theme-light .bridge-chain-label,
body.theme-light .bridge-asset-label {
  color: var(--state-warning-label-light) !important;
}
body.theme-light .bridge-chain-sel,
body.theme-light .bridge-token-sel,
body.theme-light .bridge-chain-sel,
body.theme-light .bridge-token-sel,
body.theme-light .bridge-amount-inp {
  color: var(--text-ink) !important;
}
body.theme-light .bridge-chain-sel option,
body.theme-light .bridge-chain-sel option,
body.theme-light .bridge-token-sel option {
  background: #ffffff !important;
  color: var(--text-ink) !important;
}
body.theme-light .bridge-chain-id,
body.theme-light .bridge-chain-id,
body.theme-light .bridge-bal-hint {
  color: var(--text-black-a85) !important;
}
body.theme-light .bnt-btn {
  background: rgba(0,0,0,0.04) !important;
  border-color: var(--bb-border) !important;
  color: var(--text-black-a85) !important;
}
body.theme-light .bnt-btn.active {
  background: rgba(208,208,208,0.14) !important;
  border-color: var(--bb-border) !important;
  color: var(--state-warning-active-light) !important;
}
body.theme-light .bridge-close-btn {
  background: rgba(0,0,0,0.05) !important;
  border-color: var(--bb-border) !important;
  color: var(--text-black-a85) !important;
}
body.theme-light .bridge-route-card {
  background: #ffffff !important;
  border-color: var(--bb-border) !important;
}
body.theme-light .bridge-route-card:hover {
  border-color: var(--bb-border) !important;
  background: rgba(208,208,208,0.04) !important;
}
body.theme-light .brc-bridge-name {
  color: var(--text-ink) !important;
}
body.theme-light .brc-meta-val {
  color: var(--text-ink) !important;
}
body.theme-light .bridge-routes-empty {
  color: var(--text-black-a85) !important;
}
body.theme-light .bridge-swap-chains {
  background: rgba(208,208,208,0.1) !important;
  border-color: var(--bb-border) !important;
}
/* Send button — keep white in light mode (already good contrast on white bg) */
html[data-theme="light"] .ai-send,
/* Send button — keep white in light mode (already good contrast on white bg) */
html[data-theme="light"] .ai-send,
body.theme-light .ai-send {
  background: linear-gradient(145deg, #222222, #333333) !important;
  color: var(--gold) !important;
  border: 1px solid var(--bb-border)!important;
}
html[data-theme="light"] .ai-send:hover:not(:disabled),
html[data-theme="light"] .ai-send:hover:not(:disabled),
body.theme-light .ai-send:hover:not(:disabled) {
  background: linear-gradient(145deg, #111111, #222222) !important;
  border: 1px solid var(--bb-border)!important;
}
/* Clear/delete button */
html[data-theme="light"] .ai-clear-btn,
/* Clear/delete button */
html[data-theme="light"] .ai-clear-btn,
body.theme-light .ai-clear-btn {
  background: transparent !important;
  border-color: var(--bb-border) !important;
  color: var(--text-black-a85) !important;
}
html[data-theme="light"] .ai-clear-btn:hover,
html[data-theme="light"] .ai-clear-btn:hover,
body.theme-light .ai-clear-btn:hover {
  color: var(--state-danger-clear-hover) !important;
  border-color: rgba(200,50,50,0.35) !important;
  background: rgba(200,50,50,0.06) !important;
}
/* Quick Actions button */
html[data-theme="light"] .ai-quick-btn,
/* Quick Actions button */
html[data-theme="light"] .ai-quick-btn,
body.theme-light .ai-quick-btn {
  background: rgba(0,0,0,0.06) !important;
  border-color: var(--bb-border) !important;
  color: var(--muted3) !important;
}
html[data-theme="light"] .ai-quick-btn:hover,
html[data-theme="light"] .ai-quick-btn:hover,
body.theme-light .ai-quick-btn:hover {
  background: rgba(0,0,0,0.10) !important;
}

html[data-theme="light"] .ai-plain-msg {
    color: var(--text-muted-tier);
}
html[data-theme="light"] .ai-quick-text,
html[data-theme="light"] .ai-quick-text,
body.theme-light .ai-quick-text {
  color: var(--muted3) !important;
}
/* Settings gear icon in input bar */
html[data-theme="light"] .ai-settings-btn,
/* Settings gear icon in input bar */
html[data-theme="light"] .ai-settings-btn,
body.theme-light .ai-settings-btn {
  color: var(--text-black-a85) !important;
  border: 1px solid var(--bb-border) !important;
  background: rgba(0,0,0,0.04) !important;
}
html[data-theme="light"] .ai-settings-btn:hover,
html[data-theme="light"] .ai-settings-btn:hover,
body.theme-light .ai-settings-btn:hover {
  color: var(--text-black-a85) !important;
  border-color: var(--bb-border) !important;
  background: rgba(0,0,0,0.08) !important;
}

/* ── 2. QUICK-ACTION ROW ── */

/* ── 2. QUICK-ACTION ROW ── */
.ai-quick-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 38px !important;
}

/* All four quick-bar buttons share this base */
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */


/* Quick Actions — grows to fill remaining space */

/* Quick Actions — grows to fill remaining space */
.ai-quick-btn {
  flex: 1 !important;
  padding: 0 14px !important;
  gap: 8px !important;
  justify-content: flex-start !important;
}


.ai-quick-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: inherit !important;
}

/* ── 5. RATE COUNTER — bottom-left, row 2 ── */

/* ── 5. RATE COUNTER — bottom-left, row 2 ── */
.ai-rate-counter {
  /* pull out of absolute, flow into flex row 2 */
  position: static !important;
  order: 1 !important;
  flex: 1 1 auto !important;
  align-self: center !important;
  font-family: var(--ff-base, 'Inter', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-white-a30) !important;
  letter-spacing: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  line-height: 1 !important;
  top: auto !important;
  right: auto !important;
}

.ai-rate-counter--warn  { color: var(--rate-limit-warn-a75) !important; }
.ai-rate-counter--limit { color: var(--rate-limit-danger-a90) !important; }

/* ── 6. SEND BUTTON — bottom-right, row 2 ── */


/* ── 6. SEND BUTTON — bottom-right, row 2 ── */
.ai-send {
  /* flow into flex — no absolute positioning */
  position: static !important;
  order: 2 !important;
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: var(--text-sky) !important;
  color: var(--text-on-accent) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  border: 1px solid var(--bb-border)!important;
  cursor: pointer !important;
  transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease !important;
}


.ai-send:hover:not(:disabled) {
  background: var(--text-sky) !important;
  transform: scale(1.04) !important;
  border: 1px solid var(--bb-border)!important;
}


.ai-send:active:not(:disabled) {
  transform: scale(0.97) !important;
}


.ai-send:disabled {
  background: rgba(var(--accent-sky-rgb),0.15) !important;
  color: var(--text-white-a35) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Counter */
html[data-theme="light"] .ai-rate-counter,

/* Counter */
html[data-theme="light"] .ai-rate-counter,
body.theme-light .ai-rate-counter {
  color: var(--text-black-a35) !important;
}

/* Send button */
html[data-theme="light"] .ai-send,

/* Send button */
html[data-theme="light"] .ai-send,
body.theme-light .ai-send {
  background: #000000 !important;
  color: var(--gold) !important;
  border: 1px solid var(--bb-border)!important;
}

html[data-theme="light"] .ai-send:hover:not(:disabled),

html[data-theme="light"] .ai-send:hover:not(:disabled),
body.theme-light .ai-send:hover:not(:disabled) {
  background: #333333 !important;
}

html[data-theme="light"] .ai-send:disabled,

html[data-theme="light"] .ai-send:disabled,
body.theme-light .ai-send:disabled {
  background: rgba(0,0,0,0.10) !important;
  color: var(--text-black-a35) !important;
}

/* ── 8. LIGHT MODE CHAT TEXT FIXES ── */
/* [migrated to overlay.css] */


html[data-theme="light"] .ai-plain-msg,

html[data-theme="light"] .ai-plain-msg,
body.theme-light .ai-plain-msg {
  color: var(--text-muted-tier) !important;
}

html[data-theme="light"] .ai-plain-msg strong,

html[data-theme="light"] .ai-plain-msg strong,
body.theme-light .ai-plain-msg strong {
  color: var(--sdv5-accent) !important;
}

html[data-theme="light"] .ai-plain-msg em,

html[data-theme="light"] .ai-plain-msg em,
body.theme-light .ai-plain-msg em {
  color: var(--text-muted-tier) !important;
}

html[data-theme="light"] .ai-plain-msg h1,
html[data-theme="light"] .ai-plain-msg h2,
html[data-theme="light"] .ai-plain-msg h3,
body.theme-light .ai-plain-msg h1,
body.theme-light .ai-plain-msg h2,

html[data-theme="light"] .ai-plain-msg h1,
html[data-theme="light"] .ai-plain-msg h2,
html[data-theme="light"] .ai-plain-msg h3,
body.theme-light .ai-plain-msg h1,
body.theme-light .ai-plain-msg h2,
body.theme-light .ai-plain-msg h3 {
  color: var(--sdv5-accent) !important;
}

html[data-theme="light"] .ai-plain-msg code,

html[data-theme="light"] .ai-plain-msg code,
body.theme-light .ai-plain-msg code {
  background: rgba(0,0,0,0.06) !important;
  border-color: var(--bb-border) !important;
  color: var(--bg) !important;
}

html[data-theme="light"] .ai-plain-msg pre,

html[data-theme="light"] .ai-plain-msg pre,
body.theme-light .ai-plain-msg pre {
  background: rgba(0,0,0,0.04) !important;
  border-color: var(--bb-border) !important;
}

html[data-theme="light"] .ai-plain-msg pre code,

html[data-theme="light"] .ai-plain-msg pre code,
body.theme-light .ai-plain-msg pre code {
  background: none !important;
  border: none !important;
  color: var(--text-sky) !important;
}

html[data-theme="light"] .ai-msg.user .ai-plain-msg,

html[data-theme="light"] .ai-msg.user .ai-plain-msg,
body.theme-light .ai-msg.user .ai-plain-msg {
  background: #ebebea !important;
  border-color: var(--bb-border) !important;
  color: var(--bg) !important;
}

/* ── Send button stays order: 2, right of Auto ── */

/* ── Send button stays order: 2, right of Auto ── */
.ai-send {
  order: 2 !important;
}

/* ── Rate counter: order 0, left ── */

/* ── Rate counter: order 0, left ── */
.ai-rate-counter {
  order: 0 !important;
  flex: 1 1 auto !important;
}
.ai-rate-counter { order: 1 !important; flex: 1 1 auto !important; align-self: center !important; }
.ai-send         { order: 3 !important; }

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR EXPANDED — hide trash button (same as Auto was hidden)
   ══════════════════════════════════════════════════════════════════ */
body.sidebar-is-expanded #ai-clear-btn,

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR EXPANDED — hide trash button (same as Auto was hidden)
   ══════════════════════════════════════════════════════════════════ */
body.sidebar-is-expanded #ai-clear-btn,
body.sidebar-is-expanded .ai-clear-btn {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   COMPOSER OUTER FRAME (.rz-frame.ai-composer-frame) — consolidated.
   Effective values only (all prior declarations here used !important,
   so they always beat the plain, non-!important .rz-frame base rule
   that used to live in pakixto-theme.css — that copy has been removed).
   ══════════════════════════════════════════════════════════════════ */
.ai-composer-frame.rz-frame {
  background: #131412 !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  margin: 0 8px 8px 8px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: visible !important;
}
body.theme-light .ai-composer-frame.rz-frame,
html[data-theme="light"] .ai-composer-frame.rz-frame {
  background: #F0F0F0 !important;
  border: 1px solid var(--bb-border) !important;
}
.ai-composer-frame.rz-frame > .rz-cta-panel {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
  overflow: visible !important;
}
/* ══════════════════════════════════════════════════════════════════
   COMPOSER HEADER ROW (QUICK / clear / settings) — consolidated.
   background/border are intentionally NOT set here — css/overlay.css
   (loaded last) owns those for good.
   ══════════════════════════════════════════════════════════════════ */
.ai-composer-frame .rz-cta-header.ai-composer-header {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0px !important;
  overflow: visible !important;
}


/* Quick Actions button fills col 1 naturally */

/* Quick Actions button fills col 1 naturally */
.ai-composer-frame .ai-quick-wrap {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
}
.ai-composer-frame .ai-quick-btn {
  flex: 1 !important;
  width: 100% !important;
}

/* Right-side actions — delete + settings */

/* Right-side actions — delete + settings */
.ai-composer-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

/* Dropup menu anchored to quick-menu-wrap */

/* Dropup menu anchored to quick-menu-wrap */
.ai-quick-menu-wrap {
  position: static !important;
}
.ai-composer-frame .ai-quick-menu {
  bottom: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-bottom: 6px !important;
}

/* Input wrap — no bg, no border, gap from header */

/* Input wrap — no bg, no border, gap from header */
/* [panel CSS migrated to overlay.css] */


/* Strip the textarea card — no bg, no border, no shadow inside composer frame */
/* [panel CSS migrated to overlay.css] */


/* Strip card styling from textarea itself inside composer frame */
/* [panel CSS migrated to overlay.css] */


/* Ensure settings dropup anchors correctly inside header */

/* Ensure settings dropup anchors correctly inside header */
.ai-composer-frame .ai-settings-wrap {
  position: static !important;
}
.ai-composer-frame .ai-settings-menu.ai-settings-dropup {
  bottom: calc(100% + 4px) !important;
  right: 0 !important;
  left: auto !important;
}

/* Settings-wrap inside composer header needs relative for dropup positioning */

/* Settings-wrap inside composer header needs relative for dropup positioning */
.ai-composer-header-actions .ai-settings-wrap {
  position: relative !important;
}

/* ══════════════════════════════════════════════════════════════════
   CLAUDE-STYLE COMPOSER RESTYLE
   - "QUICK" label (shortened from "Quick Actions")
   - Chevron / Clear / Settings icons restyled to match Claude.ai's
     minimal icon-button language (transparent ghost circle, thin
     stroke, subtle hover state)
   - Send button restyled to Claude.ai's up-arrow send button
   - Provider badge: hidden in Auto mode (no "Auto" text, no pill),
     shows ONLY the active provider's logo on a circular sky-blue
     (var(--text-sky)) badge when a specific provider is active
   ══════════════════════════════════════════════════════════════════ */

/* ── Quick label: "QUICK" — compact tag-style ── */
.ai-quick-btn .ai-quick-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text-white-a80) !important;
  flex: 0 0 auto !important;
}
.ai-quick-btn {
  justify-content: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  padding: 0 16px !important;
  min-width: 0 !important;
}
.ai-quick-wrap {
  justify-content: flex-start !important;
}

/* ── Claude-style ghost icon buttons (chevron / clear / settings) ── */
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

.claude-icon {
  display: block !important;
  stroke: currentColor !important;
}

/* Chevron — sits inside the quick button itself, no separate circle */
.ai-quick-arr {
  color: var(--text-white-a55) !important;
  transition: transform 220ms cubic-bezier(.4,0,.2,1), color 150ms ease !important;
}
.ai-quick-arr .qa-arrow {
  color: inherit !important;
}
.ai-quick-btn:hover .ai-quick-arr {
  color: var(--text-white-a85) !important;
}
.ai-quick-btn.open .ai-quick-arr {
  transform: rotate(180deg) !important;
  color: var(--text-white-a95) !important;
}

/* ── Send button — Claude.ai style: solid circular button, up-arrow glyph ── */
.ai-send.claude-send-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--text-sky) !important;
  color: var(--text-on-accent) !important;
  border: 0px solid var(--bb-border)!important;
}
.ai-send.claude-send-btn:hover:not(:disabled) {
  background: var(--text-sky) !important;
  transform: scale(1.05) !important;
  border: 0px solid var(--bb-border)!important;
}
.ai-send.claude-send-btn:active:not(:disabled) {
  transform: scale(0.95) !important;
}
.ai-send.claude-send-btn:disabled {
  background: rgba(var(--accent-sky-rgb),0.18) !important;
  color: var(--sdv5-accent-glow) !important;
}

/* ── Light mode overrides ── */
html[data-theme="light"] .ai-quick-btn .ai-quick-text,
body.theme-light .ai-quick-btn .ai-quick-text {
  color: var(--text-black-a70) !important;
}
html[data-theme="light"] .ai-quick-arr,
body.theme-light .ai-quick-arr {
  color: var(--text-black-a45) !important;
}
html[data-theme="light"] .ai-quick-btn:hover .ai-quick-arr,
body.theme-light .ai-quick-btn:hover .ai-quick-arr {
  color: var(--text-black-a75) !important;
}
html[data-theme="light"] .ai-quick-btn.open .ai-quick-arr,
body.theme-light .ai-quick-btn.open .ai-quick-arr {
  color: var(--text-black-a85) !important;
}
/* [panel CSS migrated to overlay.css] */

/* [panel CSS migrated to overlay.css] */

html[data-theme="light"] .ai-send.claude-send-btn,
body.theme-light .ai-send.claude-send-btn {
  background: var(--text-sky) !important;
  color: var(--text-on-accent) !important;
}
html[data-theme="light"] .ai-send.claude-send-btn:hover:not(:disabled),
body.theme-light .ai-send.claude-send-btn:hover:not(:disabled) {
  background: var(--text-sky) !important;
}
html[data-theme="light"] .ai-send.claude-send-btn:disabled,
body.theme-light .ai-send.claude-send-btn:disabled {
  background: rgba(var(--accent-sky-rgb),0.18) !important;
  color: var(--sdv5-accent-glow) !important;
}

/* ══════════════════════════════════════════════════════════════════
   CLAUDE.AI CHAT TYPOGRAPHY — final authoritative pass
   Matches Claude.ai's actual chat font system: Inter-led sans-serif
   stack, 15px / 400 weight body text, 1.6–1.75 line-height, for both
   the user's sent messages and the assistant's responses.
   ══════════════════════════════════════════════════════════════════ */
.ai-msg,
.ai-msg .ai-plain-msg,
.ai-msg.user .ai-plain-msg,
.ai-msg.user [class*="bubble"],
.ai-msg.user > div:not(.ai-avatar),
.ai-user-msg,
.ai-user-bubble,
.ai-bubble {
  font-family: var(--ff-base, "Inter", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
}

.ai-msg:not(.user) .ai-plain-msg,
.ai-msg:not(.user) .ai-bubble {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
}

.ai-msg.user .ai-plain-msg,
.ai-msg.user [class*="bubble"],
.ai-msg.user > div:not(.ai-avatar),
.ai-user-bubble {
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* Edit-mode textarea for sent user messages — same font as the bubble it replaces */
.ai-msg.user textarea,
.ai-msg.user ._edit-input {
  font-family: var(--ff-base, "Inter", sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* Bold/emphasis inherit the same family — only weight changes */
.ai-plain-msg strong,
.ai-user-bubble strong {
  font-family: inherit !important;
  font-weight: 500 !important;
}
.ai-plain-msg em,
.ai-user-bubble em {
  font-family: inherit !important;
}

/* ══════════════════════════════════════════════════════════════════
   QUICK POPUP MENU — rz-frame / ai-composer-frame neumorphic styling
   Gives the dropdown the same dark embossed outer-frame + raised
   gradient panel treatment used by the composer itself and the rest
   of the GIDO dashboard card system, instead of a flat dark sheet.
   ══════════════════════════════════════════════════════════════════ */

/* Outer embossed frame — matches .rz-frame exactly */
.ai-quick-menu {
  background: #000000 !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 10px !important;
  border: 1px solid var(--bb-border)!important;
}
body.theme-light .ai-quick-menu,
html[data-theme="light"] .ai-quick-menu {
  background: #FFFFFF !important;
  border: 1px solid var(--bb-border)!important;
}

/* Inner raised panel — wraps each section like a .rz-cta-panel card */
.ai-quick-menu .aq-grid {
  background: linear-gradient(145deg, #343434, #131412) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 14px !important;
  border: 1px solid var(--bb-border)!important;
  padding: 10px !important;
  margin: 6px 0 14px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
}
body.theme-light .ai-quick-menu .aq-grid,
html[data-theme="light"] .ai-quick-menu .aq-grid {
  background: #FFFFFF !important;
  border: 1px solid var(--bb-border) !important;
  border: 1px solid var(--bb-border)!important;
}

/* Section label — styled like .rz-cta-eyebrow */
.ai-quick-menu .aq-section-label {
  font-family: var(--ff-base, "Inter", sans-serif) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--text-sky) !important;
  border-left: none !important;
  padding: 0 4px 0 6px !important;
  margin: 4px 0 0 !important;
}
.ai-quick-menu .aq-section-label:first-of-type {
  margin-top: 0 !important;
}
body.theme-light .ai-quick-menu .aq-section-label,
html[data-theme="light"] .ai-quick-menu .aq-section-label {
  color: var(--rz-green-dim) !important;
}

/* Chips — raised mini-tiles consistent with the rest of the card system */
.ai-quick-menu .ai-chip {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: 10px !important;
  color: var(--text-white-a85) !important;
  font-family: var(--ff-base, "Inter", sans-serif) !important;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
}
.ai-quick-menu .ai-chip:hover {
  background: rgba(var(--accent-sky-rgb),0.10) !important;
  border-color: rgba(var(--accent-sky-rgb),0.35) !important;
  color: var(--gold) !important;
  transform: translateY(-1px) !important;
}
body.theme-light .ai-quick-menu .ai-chip,
html[data-theme="light"] .ai-quick-menu .ai-chip {
  background: rgba(0,0,0,0.04) !important;
  border: 1px solid var(--bb-border) !important;
  color: var(--text-black-a80) !important;
}
body.theme-light .ai-quick-menu .ai-chip:hover,
html[data-theme="light"] .ai-quick-menu .ai-chip:hover {
  background: rgba(14,165,233,0.08) !important;
  border-color: rgba(14,165,233,0.35) !important;
  color: var(--text-ink) !important;
}

/* Scrollbar stays hidden, frame padding accounted for in max-height */
.ai-quick-menu {
  max-height: 62vh !important;
}

/* ══════════════════════════════════════════════════════════════════
   AI SETTINGS POPUP — same rz-frame / aq-grid raised-card treatment
   as the Quick Actions popup, so both dropups feel like one family.
   ══════════════════════════════════════════════════════════════════ */

/* Raised inner panel — same recipe as .ai-quick-menu .aq-grid */
.ai-s-card {
  background: linear-gradient(145deg, #343434, #131412) !important;
  border: none !important;
  border-radius: 14px !important;
  border: 1px solid var(--bb-border)!important;
  padding: 10px !important;
  margin: 6px 0 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.ai-s-card:last-child { margin-bottom: 4px !important; }

body.theme-light .ai-s-card,
html[data-theme="light"] .ai-s-card {
  background: #FFFFFF !important;
  border: 1px solid var(--bb-border) !important;
  
}

/* Each provider block inside the keys card gets a hairline divider
   instead of its own card, so the group reads as one cohesive panel */
.ai-s-card-keys .ai-s-row {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--bb-border) !important;
}
.ai-s-card-keys .ai-s-row:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}
body.theme-light .ai-s-card-keys .ai-s-row,
html[data-theme="light"] .ai-s-card-keys .ai-s-row {
  border-top-color: var(--bb-border) !important;
}

/* First section header sits flush against the dropup top, like .aq-section-label */
.ai-settings-dropup .ai-s-card:first-child,
.ai-settings-menu .ai-s-card:first-child {
  margin-top: 0 !important;
}
.ai-composer-header-actions {
  overflow: visible !important;
  position: static !important;
}
/* [panel CSS migrated to overlay.css] */


/* ══ RZ-FRAME STYLE: user bubble, response chips, action buttons ══ */

/* User chat bubble */
.ai-user-bubble {
  background: #131412 !important;
  border: none !important;
  border-radius: 14px !important;
  border: 1px solid var(--bb-border)!important;
}
body.theme-light .ai-user-bubble {
  background: #F0F0F0 !important;
  border: none !important;
  color: var(--text-black-a85) !important;
}
body.theme-light .ai-user-bubble * {
  color: var(--text-black-a85) !important;
}

/* AI response nav chips (X4 Matrix, Dashboard, etc.) */
.ai-chips .ai-chip,
.ai-msg .ai-chip,
.ai-plain-msg .ai-chip,
.ai-bubble .ai-chip {
  background: #000000 !important;
  border: none !important;
  border-radius: 14px !important;
  border: 1px solid var(--bb-border)!important;
  color: var(--text-white-a85) !important;
}
.ai-chips .ai-chip:hover,
.ai-msg .ai-chip:hover,
.ai-plain-msg .ai-chip:hover,
.ai-bubble .ai-chip:hover {
  background: #222 !important;
  color: var(--gold, #f0c060) !important;
}
body.theme-light .ai-chips .ai-chip,
body.theme-light .ai-msg .ai-chip {
  background: #FFFFFF !important;
  border: none !important;
  border: 1px solid var(--bb-border)!important;
  color: var(--text-black-a75) !important;
}

/* ══ MESSAGE ACTION BUTTONS (copy / retry / share / edit) ══
   Dark mode (default): solid #000000 dark pill — unchanged
   Light mode agent buttons: light gray pill
   Light mode USER bubble buttons: keep dark pill (intentional contrast)
   ════════════════════════════════════════════════════════════ */

/* --- BASE (dark mode) --- */
.ai-msg-act-btn {
  background: #000000 !important;
  border: none !important;
  border-radius: 14px !important;
  border: 1px solid var(--bb-border)!important;
  padding: 6px 12px !important;
  color: var(--text-primary-a70) !important;
}
.ai-msg-act-btn:hover,
.ai-msg-act-btn:active {
  background: #222 !important;
  color: var(--text-white-a95) !important;
  transform: scale(1.05) !important;
}
.ai-msg-act-btn--done {
  color: var(--gold) !important;
}

/* --- LIGHT MODE: agent response action buttons (copy / retry) --- */
body.theme-light .ai-msg-actions--agent .ai-msg-act-btn,
html[data-theme="light"] .ai-msg-actions--agent .ai-msg-act-btn {
  background: #FFFFFF !important;
  border: none !important;
  border: 1px solid var(--bb-border)!important;
  color: var(--text-black-a55) !important;
}
body.theme-light .ai-msg-actions--agent .ai-msg-act-btn:hover,
body.theme-light .ai-msg-actions--agent .ai-msg-act-btn:active,
html[data-theme="light"] .ai-msg-actions--agent .ai-msg-act-btn:hover,
html[data-theme="light"] .ai-msg-actions--agent .ai-msg-act-btn:active {
  background: #d4d4d4 !important;
  color: var(--text-black-a80) !important;
}
body.theme-light .ai-msg-actions--agent .ai-act-label,
html[data-theme="light"] .ai-msg-actions--agent .ai-act-label {
  color: var(--text-black-a55) !important;
}

/* --- LIGHT MODE: user bubble action buttons (copy / edit) — KEEP DARK --- */
body.theme-light .ai-msg-actions--user .ai-msg-act-btn,
html[data-theme="light"] .ai-msg-actions--user .ai-msg-act-btn {
  background: #000000 !important;
  border: none !important;
  border: 1px solid var(--bb-border)!important;
  color: var(--text-primary-a70) !important;
}
body.theme-light .ai-msg-actions--user .ai-msg-act-btn:hover,
body.theme-light .ai-msg-actions--user .ai-msg-act-btn:active,
html[data-theme="light"] .ai-msg-actions--user .ai-msg-act-btn:hover,
html[data-theme="light"] .ai-msg-actions--user .ai-msg-act-btn:active {
  background: #2a2a2a !important;
  color: var(--text-white-a95) !important;
}

/* ══ LIGHT MODE FONT FIX — force Inter on all AI response content ══ */
body.theme-light .ai-plain-msg,
body.theme-light .ai-plain-msg *,
body.theme-light .ai-plain-msg code,
body.theme-light .ai-plain-msg pre,
body.theme-light .ai-plain-msg pre code,
body.theme-light .ai-bubble,
body.theme-light .ai-bubble *,
body.theme-light .ai-user-bubble,
body.theme-light .ai-user-bubble * {
  font-family: "Inter", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-variant-numeric: normal !important;
}
body.theme-light .ai-plain-msg code,
body.theme-light .ai-plain-msg pre,
body.theme-light .ai-plain-msg pre code {
  font-family: "Inter", "SF Mono", "Fira Code", monospace !important;
}

/* ══ RZ-FRAME: ai-chip in agent reply context (Deposit, Explorer, X4 Matrix etc) ══
   Must come after line 3384 which sets border-radius:8px + background globally */
.ai-chips .ai-chip,
.ai-plain-msg .ai-chip,
.ai-msg .ai-chip,
.ai-bubble .ai-chip,
.ai-rz-btn {
  background: #000000 !important;
  border: none !important;
  border-radius: 14px !important;
  border: 1px solid var(--bb-border)!important;
  color: var(--text-primary-a85) !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin: 3px 3px 3px 0 !important;
}
.ai-chips .ai-chip:hover,
.ai-plain-msg .ai-chip:hover,
.ai-msg .ai-chip:hover,
.ai-bubble .ai-chip:hover,
.ai-rz-btn:hover {
  background: #222 !important;
  color: var(--text-white-a95) !important;
  border-color: transparent !important;
  transform: scale(1.03) !important;
}
body.theme-light .ai-chips .ai-chip,
body.theme-light .ai-plain-msg .ai-chip,
body.theme-light .ai-msg .ai-chip,
body.theme-light .ai-bubble .ai-chip,
body.theme-light .ai-rz-btn {
  background: #FFFFFF !important;
  border: none !important;
  border: 1px solid var(--bb-border)!important;
  color: var(--text-black-a60) !important;
}
body.theme-light .ai-chips .ai-chip:hover,
body.theme-light .ai-plain-msg .ai-chip:hover,
body.theme-light .ai-msg .ai-chip:hover,
body.theme-light .ai-bubble .ai-chip:hover,
body.theme-light .ai-rz-btn:hover {
  background: #d0d0d0 !important;
  color: var(--text-black-a80) !important;
}