/*
 * HYPATIA OS V5 — Apple-Level Chat UI/UX Redesign
 * Loaded LAST — wins every cascade battle.
 * Purely visual: zero JS logic, zero backend changes.
 * Reference: Apple Intelligence · ChatGPT · Arc · Raycast · Linear
 * 2026-07-06
 */

/* ─────────────────────────────────────────────────────────────
   § 0  DESIGN TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  --v5-bg:            #050507;
  --v5-bg2:           #09090c;
  --v5-glass:         rgba(255,255,255,0.04);
  --v5-glass-hover:   rgba(255,255,255,0.07);
  --v5-glass-active:  rgba(255,255,255,0.10);
  --v5-border:        rgba(255,255,255,0.07);
  --v5-border-hi:     rgba(255,255,255,0.13);
  --v5-text:          #ffffff;
  --v5-text2:         #C2C5CF;
  --v5-muted:         #7B808D;
  --v5-accent1:       #4D9FFF;
  --v5-accent2:       #6E5CFF;
  --v5-accent3:       #E76EFF;
  --v5-gradient:      linear-gradient(135deg, #4D9FFF 0%, #6E5CFF 50%, #E76EFF 100%);
  --v5-radius:        28px;
  --v5-radius-sm:     18px;
  --v5-blur:          40px;
  --v5-shadow:
    0 10px 40px rgba(0,0,0,0.50),
    0 0 20px rgba(110,92,255,0.08);
  --v5-sidebar-w:     290px;
}

/* ─────────────────────────────────────────────────────────────
   § 1  GLOBAL FOUNDATION
   ───────────────────────────────────────────────────────────── */
html, body {
  background: #050507 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
    'Inter', 'Helvetica Neue', system-ui, sans-serif !important;
}

/* Ambient background glow */
body::before {
  background:
    radial-gradient(ellipse 55% 45% at  2%  3%,  rgba(68,55,215,0.28) 0%, transparent 50%),
    radial-gradient(ellipse 50% 42% at 98% 97%,  rgba(48,38,195,0.22) 0%, transparent 50%),
    radial-gradient(ellipse 38% 34% at 50% 50%,  rgba(5,5,7,0.85)     0%, transparent 100%) !important;
}

/* Force nav bar to be transparent so dark body shows */
#hy-nav, nav.hy-nav {
  background: transparent !important;
  background-color: transparent !important;
}

/* Hidden scrollbars */
::-webkit-scrollbar { width: 0 !important; }
::-webkit-scrollbar-thumb { display: none !important; }
* { scrollbar-width: none !important; }

/* ─────────────────────────────────────────────────────────────
   § 2  DESKTOP FLOATING LAYOUT
   On desktop the entire UI floats with 20px outer gaps.
   Fixed elements (sessions-drawer) get adjusted left/top/bottom.
   The chat-main panel gets margins + rounded corners.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 900px) {

  /* ── 2a. SIDEBAR DRAWER — floating glass panel ── */
  .sessions-drawer {
    left:   16px !important;
    top:    16px !important;
    bottom: 16px !important;
    width:  var(--v5-sidebar-w) !important;
    z-index: 7500 !important;
    pointer-events: auto !important;
    display: flex !important;
  }
  .sessions-drawer .sessions-panel {
    transform: translateX(0) !important;
    transition: none !important;
  }

  /* ── 2b. MAIN CHAT LAYOUT — offset right of sidebar ── */
  .chat-layout {
    padding-left: calc(var(--v5-sidebar-w) + 32px) !important;
    padding-right: 16px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    height: calc(100vh - 52px) !important; /* respect OS nav */
    max-width: 1600px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* ── 2c. MAIN CHAT PANEL — floating glass ── */
  .chat-main {
    border-radius: 20px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    background: rgba(13,13,22,0.99) !important;
    backdrop-filter: blur(60px) !important;
    -webkit-backdrop-filter: blur(60px) !important;
    box-shadow:
      0 24px 80px rgba(0,0,0,0.70),
      0 0 0 0.5px rgba(255,255,255,0.07) inset !important;
    height: 100% !important;
  }

  /* Messages centered max-width */
  .ch-messages {
    max-width: 840px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding: 28px 0 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   § 3  SIDEBAR — GLASS PANEL
   ───────────────────────────────────────────────────────────── */
.sessions-panel {
  background: rgba(16,16,28,0.98) !important;
  backdrop-filter: blur(60px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 20px !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.70),
    0 0 0 0.5px rgba(255,255,255,0.06) inset !important;
  overflow: hidden !important;
  width: var(--v5-sidebar-w) !important;
  height: 100% !important;
}

/* ── 3a. SIDEBAR HEADER ── */
.sessions-panel .side-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 18px 16px 14px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  color: rgba(255,255,255,0.88) !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 56px !important;
}

/* ── 3b. V5 NAV ITEMS — injected by JS ── */
#v5-sidebar-nav {
  padding: 12px 12px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.v5-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 12px !important;
  height: 44px !important;
  border-radius: var(--v5-radius-sm) !important;
  cursor: pointer !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  color: var(--v5-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s cubic-bezier(0.34,1.56,0.64,1) !important;
  -webkit-tap-highlight-color: transparent !important;
}

.v5-nav-item:hover {
  background: var(--v5-glass-hover) !important;
  color: var(--v5-text) !important;
  transform: translateX(2px) !important;
}

.v5-nav-item:hover .v5-nav-icon {
  transform: scale(1.08) !important;
}

.v5-nav-item.active {
  background: rgba(110,92,255,0.14) !important;
  border-color: rgba(110,92,255,0.22) !important;
  color: var(--v5-text) !important;
  box-shadow: 0 0 20px rgba(110,92,255,0.10) !important;
}

.v5-nav-icon {
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1) !important;
  line-height: 1 !important;
}

.v5-nav-label {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}

/* ── 3c. NEW CHAT BUTTON in sidebar ── */
#v5-new-chat-btn {
  margin: 12px 12px 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 14px !important;
  height: 44px !important;
  border-radius: var(--v5-radius-sm) !important;
  background: var(--v5-glass) !important;
  border: 1px solid var(--v5-border) !important;
  color: var(--v5-text2) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-align: left !important;
  font-family: inherit !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

#v5-new-chat-btn:hover {
  background: var(--v5-glass-hover) !important;
  color: var(--v5-text) !important;
}

#v5-new-chat-btn .v5-nc-plus {
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  background: var(--v5-glass-active) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
  color: var(--v5-text2) !important;
}

/* ── 3d. RECENT CHATS SECTION LABEL ── */
.v5-recents-label {
  padding: 14px 18px 6px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--v5-muted) !important;
}

/* ── 3e. SESSION ITEMS ── */
.session-list {
  padding: 4px 10px 12px !important;
}

.session-item {
  padding: 9px 10px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  color: var(--v5-muted) !important;
  border: 1px solid transparent !important;
  margin-bottom: 2px !important;
  transition:
    background 0.15s ease,
    color 0.15s ease !important;
}

.session-item:hover {
  background: var(--v5-glass-hover) !important;
  border-color: transparent !important;
  color: var(--v5-text2) !important;
}

.session-item.active {
  background: rgba(110,92,255,0.10) !important;
  border-color: rgba(110,92,255,0.18) !important;
  color: var(--v5-text) !important;
}

.sess-title {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: inherit !important;
}

.sess-time {
  font-size: 11px !important;
  color: var(--v5-muted) !important;
  font-weight: 400 !important;
}

.sess-group-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--v5-muted) !important;
  padding: 12px 10px 4px !important;
}

.sess-group-label::after {
  display: none !important;
}

/* ── 3f. SIDEBAR BOTTOM SPACER ── */
.session-list::after {
  content: '';
  display: block;
  height: 20px;
}

/* ─────────────────────────────────────────────────────────────
   § 4  HEADER — FLOATING GLASS BAR
   ───────────────────────────────────────────────────────────── */
.ch-header {
  border-radius: 0 !important;
  background: rgba(9,9,12,0.98) !important;
  backdrop-filter: blur(var(--v5-blur)) !important;
  -webkit-backdrop-filter: blur(var(--v5-blur)) !important;
  border-bottom: 0.5px solid var(--v5-border) !important;
}

/* Center the HYPATIA wordmark absolutely */
.cmb {
  position: relative !important;
}

.cmb-wordmark, .hy-wordmark.cmb-wordmark {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.22em !important;
  color: rgba(255,255,255,0.90) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: rgba(255,255,255,0.90) !important;
  animation: none !important;
  padding-left: 0.22em !important;
  white-space: nowrap !important;
}

/* Header button polish */
.cmb-btn {
  border-radius: 12px !important;
  width: 40px !important;
  height: 40px !important;
  color: rgba(255,255,255,0.45) !important;
  transition: background 0.15s, color 0.15s !important;
}

.cmb-btn:hover {
  background: var(--v5-glass-hover) !important;
  color: rgba(255,255,255,0.90) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 5  WELCOME CARD — Apple Intelligence Hero Card
   ───────────────────────────────────────────────────────────── */

/* The welcome message row should be full-width */
.msg-row:has(.welcome-glow),
.msg-row-assistant:has(.welcome-glow) {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  padding: 12px 16px !important;
}

/* Welcome bubble = floating glass card */
.welcome-glow,
#messages .msg-assistant.welcome-glow,
#messages .welcome-glow.msg-assistant {
  background: rgba(255,255,255,0.04) !important;
  background-color: rgba(16,16,30,0.60) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 24px !important;
  padding: 40px 48px !important;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.45),
    0 0 60px rgba(110,92,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  align-self: stretch !important;
  max-width: 100% !important;
  width: 100% !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* Welcome heading — BIG Apple Intelligence gradient */
.welcome-glow .msg-text h2 {
  font-family: -apple-system,'SF Pro Display','Inter',system-ui,sans-serif !important;
  font-size: 46px !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.12 !important;
  background: linear-gradient(135deg,
    #60B8FF  0%,
    #7B6EFF 35%,
    #E76EFF 70%,
    #FF8FAD 100%) !important;
  background-size: 300% 300% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: v5-gradient-shift 6s ease-in-out infinite alternate !important;
  border: none !important;
  padding-bottom: 0 !important;
  margin: 0 0 16px !important;
  display: block !important;
}

@keyframes v5-gradient-shift {
  0%   { background-position:   0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Hide typewriter cursor */
.welcome-glow .msg-text h2::after { display: none !important; }

/* Welcome body text — muted, 18px */
.welcome-glow .msg-text p,
.welcome-glow .msg-text .msg-lead,
.welcome-glow .msg-text > *:not(h1):not(h2):not(h3) {
  font-family: -apple-system,'SF Pro Text','Inter',system-ui,sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.50) !important;
  line-height: 1.6 !important;
  letter-spacing: -0.01em !important;
  margin-top: 0 !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

/* Remove sweep animation */
.welcome-glow .msg-text::before { display: none !important; }

/* Hide avatar/role/reactions on welcome */
.msg-row:has(.welcome-glow) .msg-avatar { display: none !important; }
.welcome-glow .msg-role,
.welcome-glow .msg-actions,
.welcome-glow .msg-react-bar { display: none !important; }

@media (max-width: 768px) {
  .welcome-glow,
  #messages .msg-assistant.welcome-glow {
    padding: 28px 24px !important;
    border-radius: 20px !important;
  }
  .welcome-glow .msg-text h2 {
    font-size: 28px !important;
    letter-spacing: -0.025em !important;
    margin-bottom: 12px !important;
  }
  .welcome-glow .msg-text p,
  .welcome-glow .msg-text .msg-lead {
    font-size: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   § 6  MESSAGE BUBBLES — V5 Refinement
   ───────────────────────────────────────────────────────────── */

/* Overall message spacing */
.msg-row {
  padding: 2px 16px !important;
  margin-bottom: 2px !important;
  animation: v5-msg-enter 260ms cubic-bezier(0.34,1.56,0.64,1) both !important;
}

@keyframes v5-msg-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)  scale(1);    }
}

/* Bubble base */
.msg {
  padding: 14px 18px 12px !important;
  max-width: min(76%, 580px) !important;
}

/* ── 6a. ASSISTANT BUBBLES ── */
.msg-assistant {
  background: rgba(28,28,45,0.55) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 4px 22px 22px 22px !important;
  box-shadow:
    0 4px 28px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.04) !important;
  color: rgba(255,255,255,0.92) !important;
}

.msg-assistant:hover {
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow:
    0 6px 36px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

.msg-assistant .msg-text {
  font-size: 15px !important;
  line-height: 1.56 !important;
  color: rgba(255,255,255,0.90) !important;
  font-weight: 400 !important;
  letter-spacing: -0.003em !important;
}

/* ── 6b. USER BUBBLES ── */
.msg-user {
  background: linear-gradient(155deg, #4E72FF 0%, #7048ED 100%) !important;
  border: none !important;
  border-radius: 22px 22px 4px 22px !important;
  box-shadow:
    0 4px 24px rgba(78,100,255,0.42),
    0 1px 6px rgba(78,100,255,0.24) !important;
  color: #ffffff !important;
}

.msg-user:hover {
  box-shadow:
    0 6px 32px rgba(78,100,255,0.54),
    0 2px 10px rgba(78,100,255,0.32) !important;
}

.msg-user .msg-text {
  font-size: 15px !important;
  line-height: 1.52 !important;
  color: rgba(255,255,255,0.97) !important;
  font-weight: 400 !important;
}

/* ── 6c. AVATARS ── */
.msg-avatar {
  width: 30px !important;
  height: 30px !important;
  border: none !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  align-self: flex-end !important;
  margin-bottom: 2px !important;
}

.msg-avatar-ai {
  background: linear-gradient(135deg,
    rgba(77,159,255,0.30) 0%,
    rgba(110,92,255,0.20) 100%) !important;
  border: 1px solid rgba(110,92,255,0.20) !important;
}

.msg-avatar-user {
  background: linear-gradient(135deg,
    rgba(78,112,255,0.30) 0%,
    rgba(100,80,240,0.20) 100%) !important;
  color: rgba(255,255,255,0.80) !important;
}

/* ── 6d. TIMESTAMPS ── */
.msg-ts {
  font-size: 10px !important;
  color: rgba(255,255,255,0.22) !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  margin-top: 5px !important;
}

.msg-user .msg-ts { color: rgba(255,255,255,0.42) !important; }

/* ── 6e. HIDE ROLE LABELS ── */
.msg-role { display: none !important; }

/* ── 6f. REACTION BUTTONS ── */
.msg-react-bar {
  display: flex !important;
  gap: 5px !important;
  margin-top: 7px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.msg-react-bar > button {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,0.38) !important;
  font-size: 13px !important;
  padding: 3px 9px !important;
  height: 28px !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  backdrop-filter: blur(8px) !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  font-family: -apple-system,'SF Pro Text','Inter',system-ui,sans-serif !important;
  line-height: 1 !important;
}

.msg-react-bar > button:hover {
  background: rgba(255,255,255,0.11) !important;
  color: rgba(255,255,255,0.78) !important;
}

/* Keep action buttons on assistant only */
.msg-row-user .msg-actions { display: none !important; }
.msg-row-assistant .msg-actions {
  opacity: 1 !important;
  display: flex !important;
  gap: 5px !important;
  margin-top: 6px !important;
  padding-left: 40px !important;
}

.msg-row-assistant .msg-act,
.msg-row-assistant .msg-tts {
  height: 28px !important;
  min-height: 28px !important;
  width: auto !important;
  min-width: 32px !important;
  border-radius: 999px !important;
  padding: 0 9px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: rgba(255,255,255,0.38) !important;
  font-size: 13px !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
}

.msg-row-assistant .msg-act:hover,
.msg-row-assistant .msg-tts:hover {
  background: rgba(255,255,255,0.11) !important;
  color: rgba(255,255,255,0.78) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 7  INPUT COMPOSER — floating dock
   ───────────────────────────────────────────────────────────── */
.ch-composer {
  background: rgba(9,9,12,0.99) !important;
  border-top: 0.5px solid var(--v5-border) !important;
  padding: 12px 16px 16px !important;
  gap: 10px !important;
  align-items: flex-end !important;
}

/* Input wrap — the glass pill */
.ch-input-wrap, .ch-composer .ch-input-wrap {
  background: rgba(28,28,45,0.70) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 26px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 4px 20px rgba(0,0,0,0.28) !important;
}

.ch-input-wrap:focus-within, .ch-composer .ch-input-wrap:focus-within {
  border-color: rgba(78,112,255,0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 4px 20px rgba(0,0,0,0.28),
    0 0 0 3px rgba(78,112,255,0.11) !important;
}

/* Textarea */
.ch-input, .ch-composer .ch-input {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  color: rgba(255,255,255,0.90) !important;
  min-height: 44px !important;
  max-height: 160px !important;
  padding: 11px 10px 11px 14px !important;
  line-height: 1.46 !important;
}

.ch-input::placeholder {
  color: rgba(255,255,255,0.24) !important;
  font-weight: 400 !important;
}

/* Attach + Mic */
.ci-attach, .ci-mic {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.36) !important;
  transition: color 0.15s !important;
}

.ci-attach:hover, .ci-mic:hover {
  color: rgba(255,255,255,0.70) !important;
}

/* Send button */
.ch-send, #send-btn {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(155deg, #4E72FF 0%, #7048ED 100%) !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(78,100,255,0.50), 0 1px 5px rgba(78,100,255,0.26) !important;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s !important;
}

.ch-send:hover, #send-btn:hover {
  transform: scale(1.07) !important;
  box-shadow: 0 5px 24px rgba(78,100,255,0.65), 0 2px 8px rgba(78,100,255,0.36) !important;
}

.ch-send:active, #send-btn:active {
  transform: scale(0.94) !important;
}

.ch-send:disabled, #send-btn:disabled {
  opacity: 0.28 !important;
  background: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Voice button */
.voice-fab, .ch-composer .voice-fab {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #4E72FF 0%, #9038D8 100%) !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(100,70,240,0.46) !important;
  animation: none !important;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.15s !important;
}

.voice-fab:hover, .ch-composer .voice-fab:hover {
  transform: scale(1.07) !important;
  box-shadow: 0 6px 28px rgba(100,70,240,0.62) !important;
}

.voice-fab:active { transform: scale(0.94) !important; }

/* ─────────────────────────────────────────────────────────────
   § 8  DOT-GRID IMAGE GENERATION CARD
   ───────────────────────────────────────────────────────────── */
.cgpt-gen-wrap {
  background: rgba(22,22,36,0.90) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 20px !important;
  padding: 22px 20px !important;
  width: 100% !important;
  backdrop-filter: blur(20px) !important;
}

.cgpt-gen-title {
  font-family: -apple-system,'SF Pro Display','Inter',system-ui,sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.70) !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.01em !important;
}

.cgpt-dot-grid {
  gap: 5px !important;
}

.cgpt-dot {
  background: rgba(255,255,255,0.14) !important;
  border-radius: 50% !important;
}

/* ─────────────────────────────────────────────────────────────
   § 9  THINKING PILL
   ───────────────────────────────────────────────────────────── */
.thinking-pill {
  background: rgba(20,20,36,0.95) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,0.52) !important;
  font-family: -apple-system,'SF Pro Text','Inter',system-ui,sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  backdrop-filter: blur(16px) !important;
  padding: 6px 16px !important;
  gap: 8px !important;
}

/* ─────────────────────────────────────────────────────────────
   § 10  TOOL CALL CARDS — subtle glass
   ───────────────────────────────────────────────────────────── */
.tc-card {
  background: rgba(20,20,36,0.70) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(16px) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 11  CONTEXT MENU — Apple-style glass
   ───────────────────────────────────────────────────────────── */
.ctx-menu {
  background: rgba(28,28,45,0.96) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.60) !important;
}

.ctx-item {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.82) !important;
  padding: 9px 14px !important;
  border-radius: 10px !important;
  margin: 1px 3px !important;
}

.ctx-item:hover {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.96) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 12  TOAST — glass pill
   ───────────────────────────────────────────────────────────── */
.toast {
  font-family: -apple-system,'SF Pro Text','Inter',system-ui,sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

.toast.ok {
  background: rgba(78,114,255,0.18) !important;
  border: 1px solid rgba(78,114,255,0.32) !important;
  color: rgba(160,190,255,0.95) !important;
  box-shadow: 0 8px 32px rgba(78,114,255,0.25) !important;
}

.toast.err {
  background: rgba(255,77,109,0.15) !important;
  border: 1px solid rgba(255,77,109,0.28) !important;
  color: rgba(255,150,170,0.95) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 13  LIGHTBOX — Apple-style dark overlay
   ───────────────────────────────────────────────────────────── */
.lightbox {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(60px) !important;
  -webkit-backdrop-filter: blur(60px) !important;
}

.lightbox-toolbar {
  background: rgba(28,28,45,0.95) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(40px) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 14  SESSION SEARCH INPUT
   ───────────────────────────────────────────────────────────── */
#sess-search {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,0.80) !important;
  font-family: -apple-system,'SF Pro Text','Inter',system-ui,sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 9px 12px !important;
  margin: 8px 10px !important;
  width: calc(100% - 20px) !important;
}

#sess-search::placeholder {
  color: rgba(255,255,255,0.28) !important;
}

#sess-search:focus {
  border-color: rgba(110,92,255,0.40) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(110,92,255,0.10) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 15  MOBILE ADJUSTMENTS
   ───────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  /* Mobile: sidebar is still a drawer, keep original behavior */
  .sessions-panel {
    border-radius: 0 20px 20px 0 !important;
    height: 100% !important;
  }

  /* Larger messages on mobile */
  .msg {
    max-width: min(88%, 480px) !important;
  }

  .ch-messages {
    padding: 16px 4px 8px !important;
  }

  .msg-row {
    padding: 2px 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   § 16  GLASS POPUP MENU (message 3-dots menu)
   ───────────────────────────────────────────────────────────── */
.gpt-glass-menu {
  background: rgba(28,28,45,0.96) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.60) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 17  GENERATED IMAGE CARD
   ───────────────────────────────────────────────────────────── */
.gpt-img-wrap img {
  border-radius: 16px !important;
}

/* ─────────────────────────────────────────────────────────────
   § 18  CODE BLOCKS
   ───────────────────────────────────────────────────────────── */
.msg-text pre {
  background: rgba(15,15,25,0.90) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}

.msg-text code:not(pre code) {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 5px !important;
  color: rgba(200,210,255,0.88) !important;
}

/* ─────────────────────────────────────────────────────────────
   § 19  REDUCE MOTION SUPPORT
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v5-nav-item,
  .msg-row,
  .ch-send,
  .voice-fab {
    transition: none !important;
    animation: none !important;
  }
  .welcome-glow .msg-text h2 {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   § 20  CRITICAL OVERRIDE FIXES
   These MUST be at the very end to beat hy-apple-final specificity.
   ───────────────────────────────────────────────────────────── */

/* Kill the hy-apple-final rule that wipes welcome card background.
   That block set background:none, backdrop-filter:none, border:none.
   This is the FINAL word on welcome-glow. */
#messages .msg-assistant.welcome-glow,
#messages .welcome-glow.msg-assistant,
.welcome-glow {
  background-color: rgba(14,14,26,0.80) !important;
  background: rgba(14,14,26,0.80) !important;
  backdrop-filter: blur(28px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(150%) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  box-shadow:
    0 8px 40px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.09) !important;
  border-radius: 24px !important;
  padding: 40px 44px !important;
  max-width: 100% !important;
  width: 100% !important;
  align-self: stretch !important;
}

/* Also kill the row::before that hy-apple-final removed */
#messages .msg-row:has(.welcome-glow)::before,
#messages .msg-row-assistant:has(.welcome-glow)::before {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* Fix: prevent inline hy-apple-final block overriding our welcome background */
#messages .msg-row:has(.welcome-glow),
#messages .msg-row-assistant:has(.welcome-glow) {
  background: none !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  padding: 10px 16px !important;
}

/* Welcome heading — FINAL high-specificity rule */
#messages .welcome-glow .msg-text h2,
.welcome-glow .msg-text h2 {
  font-size: 46px !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.12 !important;
  background: linear-gradient(135deg,
    #60B8FF  0%,
    #7B6EFF 35%,
    #E76EFF 70%,
    #FF8FAD 100%) !important;
  background-size: 300% 300% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: v5-gradient-shift 6s ease-in-out infinite alternate !important;
  display: block !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}

@media (max-width: 768px) {
  #messages .welcome-glow .msg-text h2,
  .welcome-glow .msg-text h2 {
    font-size: 28px !important;
  }
  #messages .msg-assistant.welcome-glow {
    padding: 28px 20px !important;
    border-radius: 18px !important;
  }
}

/* Welcome body text — FINAL rule */
#messages .welcome-glow .msg-text p,
#messages .welcome-glow .msg-text .msg-lead,
.welcome-glow .msg-text p,
.welcome-glow .msg-text .msg-lead {
  font-size: 18px !important;
  color: rgba(255,255,255,0.50) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

/* Fix: Settings nav item should NOT be active by default — clear it */
#v5-sidebar-nav .v5-nav-item.active {
  background: rgba(110,92,255,0.14) !important;
  border-color: rgba(110,92,255,0.22) !important;
}

/* Hide the existing sessions-panel ‘Recents’ group label —
   V5 injects its own 'Recent Chats' label */
.sessions-panel .sess-group-label[data-group="recent"],
.sessions-panel .sess-group-label:first-of-type {
  display: none !important;
}

/* Suppress the existing header button area clutter */
.sessions-panel .side-header .hdr-btn {
  display: none !important;
}

/* Sidebar header: show all children (JS replaces innerHTML) */
.sessions-panel .side-header > * { display: flex !important; }

/* Hide ALL old sess-group-label elements — V5 injects its own */
.sessions-panel .sess-group-label {
  display: none !important;
}

/* Hide the sess-icon bullet on session items */
.sessions-panel .sess-icon {
  display: none !important;
}

/* Hide the 'All Chats' collapsible group header row */
.sessions-panel .sess-all-chats,
.sessions-panel [data-group] {
  display: none !important;
}

/* Make sure ONLY the V5 active class applies the active look —
   unset any .session-item.active that may overlap visually */
.sessions-panel .session-item.active:not(#v5-sidebar-nav .v5-nav-item) {
  background: rgba(255,255,255,0.06) !important;
  border-color: transparent !important;
}

/* V5 nav active: Home only */
#v5-sidebar-nav .v5-nav-item:not(.active) {
  background: transparent !important;
  border-color: transparent !important;
}

/* Settings row: explicitly NOT active */
#v5-sidebar-nav .v5-nav-item:last-child:not(.active) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Sidebar panel background — FINAL override */
.sessions-panel {
  background: rgba(15,15,26,0.99) !important;
}

/* Chat-main background — FINAL override */
@media (min-width: 900px) {
  .chat-main {
    background: rgba(12,12,20,0.99) !important;
  }
}