:root {
  --bg:            #040712;
  --surface:       rgba(10, 13, 30, 0.88);
  --card:          rgba(14, 18, 42, 0.92);
  --border:        rgba(99, 102, 241, 0.28);
  --border-bright: rgba(165, 180, 252, 0.48);
  --text:          #f1f5f9;
  --muted:         #8292b4;
  --accent:        #6366f1;
  --accent-rgb:    99, 102, 241;
  --accent2:       #a5b4fc;
  --accent3:       #ec4899;
  --accent3-rgb:   236, 72, 153;
  --cyan:          #06b6d4;
  --cyan-rgb:      6, 182, 212;
  --emerald:       #10b981;
  --glass:         rgba(10, 13, 30, 0.78);
  --user-bg:       linear-gradient(135deg, rgba(30, 42, 90, 0.95) 0%, rgba(17, 26, 61, 0.95) 100%);
  --bot-bg:        linear-gradient(180deg, rgba(20, 26, 58, 0.90) 0%, rgba(10, 17, 41, 0.98) 100%);
  --code-bg:       #030614;
  --green:         #10b981;
  --amber:         #f59e0b;
  --rose:          #ef4444;

  /* ---------- Motion, Gloss & Gemini Vibrant Gradients ---------- */
  --ease-smooth: cubic-bezier(.22, 1, .36, 1);
  --ease-snap:   cubic-bezier(.34, 1.56, .64, 1);
  --shine:       linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.28) 45%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.28) 55%, transparent 80%);
  --gloss-grad:  linear-gradient(135deg, rgb(var(--accent-rgb)) 0%, #8b5cf6 30%, rgb(var(--accent3-rgb)) 65%, rgb(var(--cyan-rgb)) 100%);
  --gemini-grad: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #3b82f6, #10b981, #f59e0b, #6366f1);
  --glow-ring:   0 0 0 1px rgba(var(--accent-rgb), 0.5), 0 8px 25px rgba(var(--accent-rgb), 0.35);
  --gloss-inset: inset 0 1px 1px 0 rgba(255, 255, 255, 0.22);
}

/* ---------- App-shell Safe Area (Mobile/PWA) ---------- */
body { 
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#top-bar { padding-top: calc(8px + env(safe-area-inset-top)); }
#input-area { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
#sidebar { padding-top: env(safe-area-inset-top); }

* { -webkit-tap-highlight-color: transparent; }

::selection {
  background: rgba(var(--accent-rgb), 0.48);
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255,255,255,0.5);
}

*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

html, body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  overflow: hidden;
  height: 100%;
  width: 100%;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

html { overscroll-behavior: none; }

/* ---------- Ambient Background Drift & Gloss Floor ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 12% 15%, rgba(var(--accent-rgb), 0.2) 0%, transparent 55%),
    radial-gradient(circle at 88% 85%, rgba(168, 85, 247, 0.2) 0%, transparent 55%),
    radial-gradient(circle at 50% 100%, rgba(var(--accent3-rgb), 0.14) 0%, transparent 50%),
    radial-gradient(circle at 50% 0%, rgba(var(--cyan-rgb), 0.12) 0%, transparent 60%);
  background-size: 140% 140%, 140% 140%, 160% 160%, 150% 150%;
  animation: bg-drift 20s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

@keyframes bg-drift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 100%, 50% 0%; }
  50%  { background-position: 30% 20%, 70% 80%, 40% 90%, 60% 10%; }
  100% { background-position: 10% 30%, 90% 70%, 60% 80%, 40% 20%; }
}

#app {
  display: flex;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

/* ---------- Glossy Glass Panels (Sidebar, Headers, Containers) ---------- */
.glass-panel, #sidebar, #top-bar, #control-bar, #input-area, .modal-box, .learning-card, .panel {
  background: var(--surface) !important;
  backdrop-filter: blur(28px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(210%) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 35px 0 rgba(0, 0, 0, 0.55), var(--gloss-inset) !important;
  position: relative;
}

/* Glass Reflection Highlight Overlay */
#sidebar::before, #top-bar::before, .modal-box::before, .panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; 
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.45) 50%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

#sidebar {
  width: 280px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform 0.32s var(--ease-smooth);
  z-index: 40;
  position: relative;
}

@media (max-width: 767px) {
  #sidebar { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); }
  #sidebar.open { transform: translateX(0); }
}

#sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#sidebar-scroll::-webkit-scrollbar { width: 4px; }
#sidebar-scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--accent3)); border-radius: 4px; }

#main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

#top-bar {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  z-index: 20;
}

#control-bar {
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

#messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  -webkit-overflow-scrolling: touch;
}
#messages::-webkit-scrollbar { width: 5px; }
#messages::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--accent), var(--cyan)); border-radius: 4px; }

/* ---------- FIX SELECT DROPDOWN WHITE BACKGROUND ISSUE ---------- */
select, 
select option, 
select optgroup {
  background-color: #080c1e !important;
  color: #f1f5f9 !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
}

select option {
  background: #080c1e !important;
  color: #f1f5f9 !important;
  padding: 8px 12px !important;
}

select optgroup {
  background: #040712 !important;
  color: #a5b4fc !important;
  font-weight: 800 !important;
}

/* ---------- 3D Glass Brand Mark ---------- */
.brand-mark-3d {
  position: relative;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 45%, #ec4899 100%) !important;
  background-size: 220% 220% !important;
  animation: brand-gradient-shift 6s ease-in-out infinite;
  box-shadow: 0 6px 18px rgba(99,102,241,0.5), inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -6px 10px rgba(0,0,0,0.3);
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease-smooth);
}
.brand-mark-3d:hover { transform: perspective(300px) rotateY(12deg) rotateX(-6deg) scale(1.06); }
@keyframes brand-gradient-shift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- Animated Moving Gradient Text ---------- */
.gradient-text {
  background: linear-gradient(90deg, #a5b4fc, #6366f1, #ec4899, #22d3ee, #a5b4fc);
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradient-flow 5s linear infinite;
  font-weight: 800;
}
@keyframes gradient-flow { to { background-position: 300% center; } }

/* ==========================================================================
   CHAT HEAD (AVATAR) & BALANCED MESSAGE BUBBLE ALIGNMENT
   ========================================================================== */

.msg-bot {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  animation: msg-rise 0.35s var(--ease-smooth);
}

.msg-user {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  animation: msg-rise 0.3s var(--ease-smooth);
}

@keyframes msg-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Balanced Chat Head Avatar */
.bot-avatar {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  background: var(--gloss-grad) !important;
  background-size: 220% 220% !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 14px !important;
  color: #ffffff !important;
  margin-top: 2px;
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.45) !important;
  transition: transform 0.3s var(--ease-snap), box-shadow 0.3s var(--ease-smooth);
}

/* ==========================================================================
   ANIMATED LOADING & TYPING BUBBLE (GLOSSY BOLDER MOVING GRADIENT)
   ========================================================================== */

.bubble-bot:has(#typing-status),
.bubble-bot.is-typing {
  position: relative;
  background: linear-gradient(135deg, rgba(24, 32, 70, 0.95), rgba(10, 17, 41, 0.98)) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 10px 32px rgba(var(--accent-rgb), 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25) !important;
}

.bubble-bot:has(#typing-status)::before,
.bubble-bot.is-typing::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 6px 20px 20px 20px;
  padding: 2px;
  background: var(--gemini-grad) !important;
  background-size: 300% 300% !important;
  animation: gemini-border-spin 2.2s linear infinite !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@keyframes gemini-border-spin {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.msg-bot:has(#typing-status) .bot-avatar,
.msg-bot.is-typing .bot-avatar {
  animation: avatar-pulse-glow 1.8s ease-in-out infinite alternate !important;
}
@keyframes avatar-pulse-glow {
  0%   { box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6), inset 0 1px 1px rgba(255,255,255,0.4); transform: scale(1); }
  100% { box-shadow: 0 0 25px rgba(var(--accent3-rgb), 0.85), 0 0 10px rgba(var(--cyan-rgb), 0.6), inset 0 1px 1px rgba(255,255,255,0.8); transform: scale(1.08); }
}

.typing-dot {
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6, #10b981, #ec4899) !important;
  background-size: 300% 100% !important;
  animation: dot-bounce 1.2s ease-in-out infinite, dot-gradient-move 2s linear infinite !important;
  box-shadow: 0 0 10px rgba(236, 72, 153, 0.75), 0 0 4px rgba(255, 255, 255, 0.6) !important;
}
.typing-dot:nth-child(1) { animation-delay: 0s, 0s !important; }
.typing-dot:nth-child(2) { animation-delay: 0.2s, 0.3s !important; }
.typing-dot:nth-child(3) { animation-delay: 0.4s, 0.6s !important; }

@keyframes dot-gradient-move {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes dot-bounce {
  0%, 60%, 100% { transform: translateY(0) scale(0.85); opacity: 0.6; }
  30% { transform: translateY(-7px) scale(1.25); opacity: 1; }
}

.typing-cursor {
  display: inline-block !important;
  width: 7px !important;
  height: 15px !important;
  background: linear-gradient(180deg, #818cf8, #c084fc, #f472b6) !important;
  background-size: 100% 300% !important;
  box-shadow: 0 0 12px rgba(192, 132, 252, 0.9) !important;
  animation: blink 0.8s infinite, dot-gradient-move-v 2s linear infinite !important;
  border-radius: 2px;
  vertical-align: middle;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes dot-gradient-move-v {
  0%   { background-position: 50% 0%; }
  100% { background-position: 50% 300%; }
}

#typing-status {
  background: linear-gradient(90deg, #a5b4fc, #ec4899, #22d3ee, #10b981, #a5b4fc) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  animation: gradient-flow 2.5s linear infinite !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.03em !important;
}

/* ==========================================================================
   INPUT EXPERIENCE & AUTO TEXT AREA STYLING
   ========================================================================== */

#input-area {
  padding: 9px 14px;
  gap: 8px;
  align-items: center;
  position: relative;
}

.input-wrap-animated {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.3), rgba(24, 32, 70, 0.6));
  transition: background 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.input-wrap-animated.gush-ai-busy,
.input-wrap-animated:focus-within {
  background: var(--gemini-grad);
  background-size: 300% 300%;
  animation: gemini-gradient-spin 2.5s linear infinite;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.45);
}

@keyframes gemini-gradient-spin {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#inp {
  flex: 1;
  resize: none;
  background: rgba(8, 12, 30, 0.94) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  max-height: 140px;
  min-height: 44px;
  height: auto;
  outline: none;
  transition: border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
  width: 100%;
  word-wrap: break-word;
  white-space: pre-wrap;
}
#inp:hover { border-color: rgba(165,180,252,0.5) !important; }
#inp:focus { border-color: var(--accent) !important; box-shadow: var(--glow-ring) !important; }
#inp::placeholder { color: var(--muted); }

/* ==========================================================================
   BUTTON SYSTEM (STRICT SIZE PRESERVATION + GLOSSY FINISH)
   ========================================================================== */

.btn {
  border: none; 
  cursor: pointer; 
  font-family: inherit; 
  font-weight: 700;
  transition: all 0.25s var(--ease-smooth);
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 6px; 
  border-radius: 10px;
  position: relative; 
  overflow: hidden;
  text-decoration: none;
}
.btn:active { transform: scale(0.96); }

.btn::before {
  content: "";
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: var(--shine);
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease-smooth);
  pointer-events: none;
}
.btn:hover::before { left: 180%; }

.btn-primary {
  background: var(--gloss-grad) !important;
  background-size: 260% 260% !important;
  background-position: 0% 50% !important;
  color: #ffffff !important;
  padding: 8px 16px;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb), 0.38), var(--gloss-inset) !important;
}
.btn-primary:hover {
  background-position: 100% 50% !important; 
  box-shadow: 0 6px 22px rgba(var(--accent3-rgb), 0.5), var(--gloss-inset) !important; 
  transform: translateY(-1px);
}

.btn-ghost { 
  background: rgba(255,255,255,0.03) !important; 
  color: var(--muted) !important; 
  border: 1px solid var(--border) !important; 
  padding: 6px 10px; 
  backdrop-filter: blur(10px) !important;
}
.btn-ghost:hover { 
  background: rgba(99,102,241,0.16) !important; 
  color: #ffffff !important; 
  border-color: rgba(165,180,252,0.45) !important; 
  transform: translateY(-1px);
}

.btn-danger { 
  background: rgba(239,68,68,0.12) !important; 
  color: var(--rose) !important; 
  border: 1px solid rgba(239,68,68,0.3) !important; 
}
.btn-danger:hover { 
  background: rgba(239,68,68,0.25) !important; 
  box-shadow: 0 4px 14px rgba(239,68,68,0.35) !important;
  transform: translateY(-1px);
}

/* Strict Preservation of Button Sizes */
.btn-sm { padding: 5px 10px !important; font-size: 11px !important; border-radius: 8px !important; }
.btn-xs { padding: 3px 8px !important; font-size: 10px !important; border-radius: 6px !important; }

.btn-icon { 
  padding: 8px !important; 
  border-radius: 10px !important; 
  background: rgba(10, 13, 30, 0.85) !important; 
  border: 1px solid var(--border) !important; 
  color: var(--muted) !important; 
}
.btn-icon:hover { 
  color: var(--accent2) !important; 
  border-color: rgba(165,180,252,0.5) !important; 
  background: rgba(99,102,241,0.16) !important; 
  transform: translateY(-1px);
}

/* Mode Tabs */
.mode-tab {
  padding: 5px 10px; 
  border-radius: 8px; 
  font-size: 11px; 
  font-weight: 700; 
  color: var(--muted);
  background: transparent; 
  border: 1px solid transparent; 
  cursor: pointer; 
  transition: all 0.25s var(--ease-smooth);
}
.mode-tab:hover { color: var(--text); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.mode-tab.active {
  background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(168,85,247,0.2)) !important;
  color: #ffffff !important; 
  border-color: rgba(165,180,252,0.45) !important;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.25), inset 0 1px 0 rgba(255,255,255,0.2) !important;
}

/* ==========================================================================
   MESSAGE BUBBLES & CONTENT TYPOGRAPHY
   ========================================================================== */

.bubble-user {
  background: var(--user-bg) !important;
  border: 1px solid rgba(165,180,252,0.28) !important;
  border-radius: 18px 18px 4px 18px;
  padding: 11px 15px;
  width: fit-content;
  max-width: 85%;
  word-break: break-word;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35), var(--gloss-inset);
  transition: all 0.3s var(--ease-smooth);
}
.bubble-user:hover {
  border-color: rgba(165,180,252,0.5) !important;
  box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.25), var(--gloss-inset);
}

.bubble-bot {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  background: var(--bot-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px 18px 18px 18px;
  padding: 12px 16px;
  word-break: break-word;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4), var(--gloss-inset);
  transition: all 0.3s var(--ease-smooth);
}
.bubble-bot:hover {
  border-color: rgba(165,180,252,0.4) !important;
  box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.18), var(--gloss-inset);
}

/* Code Blocks */
.code-wrap {
  margin: 12px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  transition: all 0.3s var(--ease-smooth);
}
.code-wrap:hover {
  border-color: rgba(165,180,252,0.45);
  box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.22);
}
.code-header {
  background: #030612;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

.inline-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  background: rgba(99,102,241,0.16);
  color: #f472b6;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid rgba(99,102,241,0.3);
}

/* Action Row Buttons */
.action-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(99,102,241,0.18);
  flex-wrap: wrap;
}
.act-btn {
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s var(--ease-smooth);
}
.act-btn:hover {
  background: rgba(99,102,241,0.15);
  color: #ffffff;
  border-color: rgba(165,180,252,0.3);
  transform: translateY(-1px);
}

/* Chips */
.chip {
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.3);
  color: var(--text);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s var(--ease-smooth);
}
.chip:hover {
  background: var(--gloss-grad);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(var(--accent-rgb), 0.45);
  transform: translateY(-1px);
}

/* Panels & Cards */
.panel {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35), var(--gloss-inset);
  transition: all 0.3s var(--ease-smooth);
}
.panel:hover {
  border-color: rgba(165,180,252,0.4) !important;
  box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.18), var(--gloss-inset);
}
.panel-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* Modals */
.modal-bg {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(2, 4, 10, 0.82);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-box {
  background: var(--card) !important;
  border: 1px solid var(--border-bright) !important;
  border-radius: 20px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 70px rgba(0,0,0,0.75), var(--gloss-inset);
  animation: modal-in 0.28s var(--ease-snap);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.deep-badge {
  background: rgba(99,102,241,0.18);
  color: #22d3ee;
  border: 1px solid rgba(34,211,238,0.35);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.3s var(--ease-smooth);
}
.deep-badge:hover {
  background: rgba(34,211,238,0.25);
  box-shadow: 0 0 16px rgba(34,211,238,0.45);
  transform: translateY(-1px);
}

/* ==========================================================================
   MOBILE & TABLET TUNING
   ========================================================================== */

@media (max-width: 640px) {
  .studio-tab { font-size: 10px !important; padding: 6px 10px !important; }
  .mode-tab { font-size: 11px !important; padding: 5px 8px !important; }
  #top-bar { padding: 6px 10px !important; }
  #current-model-label { font-size: 10px !important; max-width: 110px !important; }
  #header-model-select { font-size: 10px !important; padding: 3px 20px 3px 6px !important; }
  .deep-badge { font-size: 10px !important; padding: 3px 8px !important; }
  #input-area { padding: 8px !important; gap: 6px !important; }
  #inp { font-size: 16px !important; }
  .brand-mark-3d:hover { transform: none; }
  .msg-bot, .msg-user { animation-duration: 0.22s; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  #sidebar { width: 250px; min-width: 250px; }
}