/**





 * GlomaxGPT — Premium UI v2.0





 * SADECE görsel/dekoratif stiller — layout kuralları YOK





 * app.css mevcut layout'una dokunmaz, üstüne görsel katman ekler





 *





 * KAPSAMLI OVERRIDE — tüm CSS dosyalarındaki çakışmaları çözer





 */











/* ═══════════════════════════════════════════════════════════════





   GLOBAL GRADIENT RESET — tüm dosyalardaki şeffaf başlık sorununu çöz





═══════════════════════════════════════════════════════════════ */





#welcome-greeting,





.welcome-title,





.welcome-screen h1,





.welcome-screen h1.welcome-title {





  background: linear-gradient(135deg, #3A3A3A 0%, #050816 100%) !important;





  -webkit-background-clip: text !important;





  -webkit-text-fill-color: transparent !important;





  background-clip: text !important;





  color: transparent !important;





  font-size: clamp(28px, 4vw, 48px) !important;





  font-weight: 800 !important;





  letter-spacing: -0.02em !important;





  line-height: 1.15 !important;





  text-align: center !important;





}





[data-theme="light"] #welcome-greeting,





[data-theme="light"] .welcome-title,





[data-theme="light"] .welcome-screen h1 {





  background: linear-gradient(135deg, #3A3A3A 0%, #050816 100%) !important;





  -webkit-background-clip: text !important;





  -webkit-text-fill-color: transparent !important;





  background-clip: text !important;





}











/* ═══════════════════════════════════════════════════════════════





   CHAT-MAIN LAYOUT — flex: 1, tam yükseklik





═══════════════════════════════════════════════════════════════ */





.chat-main {





  flex: 1 !important;





  min-width: 0 !important;





  height: 100vh !important;





  display: flex !important;





  flex-direction: column !important;





  overflow: hidden !important;





  background: transparent !important;





}











/* ═══════════════════════════════════════════════════════════════





   INPUT AREA — Tam genişlik, ortalanmış, 760px max





═══════════════════════════════════════════════════════════════ */





.input-wrapper {





  flex-shrink: 0 !important;





  width: 100% !important;





  padding: 12px 20px 16px !important;





  box-sizing: border-box !important;





  background: transparent !important;





}











.input-area {





  max-width: 760px !important;





  width: 100% !important;





  margin-left: auto !important;





  margin-right: auto !important;





  box-sizing: border-box !important;





  padding: 0 !important;





}











.input-box {





  width: 100% !important;





  box-sizing: border-box !important;





  border-radius: 20px !important;





}











/* ═══════════════════════════════════════════════════════════════





   MESSAGES CONTAINER — flex: 1, scroll





═══════════════════════════════════════════════════════════════ */





.messages-container {





  flex: 1 !important;





  overflow-y: auto !important;





  overflow-x: hidden !important;





  width: 100% !important;





  box-sizing: border-box !important;





  min-height: 0 !important;





}











.message-inner {





  max-width: 760px !important;





  margin-left: auto !important;





  margin-right: auto !important;





  width: 100% !important;





  box-sizing: border-box !important;





}











/* ═══════════════════════════════════════════════════════════════





   WELCOME SCREEN — Ortalanmış, tam görünür





═══════════════════════════════════════════════════════════════ */





.welcome-screen {





  max-width: 760px !important;





  margin-left: auto !important;





  margin-right: auto !important;





  width: 100% !important;





  box-sizing: border-box !important;





  padding: 40px 24px 32px !important;





  display: flex !important;





  flex-direction: column !important;





  align-items: center !important;





  justify-content: center !important;





  text-align: center !important;





  min-height: calc(100vh - 64px - 180px) !important;





  gap: 20px !important;





  margin-bottom: 0 !important;





}

















/* ═══════════════════════════════════════════════════════════════





   CSS CUSTOM PROPERTIES





═══════════════════════════════════════════════════════════════ */





:root {





  --premium-topbar-height:     64px;





  --premium-input-max-width:   760px;





  --premium-chat-max-width:    760px;





  --premium-radius-input:      20px;





  --premium-radius-chip:       100px;





  --premium-transition:        cubic-bezier(0.4, 0, 0.2, 1);





  --topbar-height:             64px;





  --ease-smooth:               cubic-bezier(0.4, 0, 0.2, 1);





}











/* ═══════════════════════════════════════════════════════════════





   GLOBAL BASE





═══════════════════════════════════════════════════════════════ */





html, body {





  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;





  -webkit-font-smoothing: antialiased !important;





  -moz-osx-font-smoothing: grayscale !important;





}











/* ═══════════════════════════════════════════════════════════════





   SIDEBAR — Sadece görsel stiller





═══════════════════════════════════════════════════════════════ */











/* Logo favicon — her zaman görünür */





.sidebar-logo-favicon {





  display: flex !important;





  align-items: center !important;





  justify-content: center !important;





  width: 28px !important;





  height: 28px !important;





  border-radius: 8px !important;





  background: var(--text) !important;





  flex-shrink: 0 !important;





  overflow: hidden !important;





}











.sidebar-logo-favicon img {





  width: 18px !important;





  height: 18px !important;





  filter: invert(1) !important;





  opacity: 0.9 !important;





}











.sidebar-logo-text {





  font-size: 1.1rem !important;





  font-weight: 100 !important;





  letter-spacing: 0.09em !important;





}











/* Collapsed: favicon göster, text gizle */





.sidebar.collapsed .sidebar-logo-favicon {





  display: flex !important;





}





.sidebar.collapsed .sidebar-logo-text {





  display: none !important;





}











/* Nav items */





.sidebar-nav-item {





  border-radius: 10px !important;





  font-size: 0.875rem !important;





  font-weight: 400 !important;





  transition: background 0.12s, color 0.12s !important;





}





.sidebar-nav-item:hover {





  background: var(--sidebar-hover) !important;





  color: var(--text) !important;





  text-decoration: none !important;





}





.sidebar-nav-item.active {





  background: var(--sidebar-active) !important;





  color: var(--text) !important;





  font-weight: 600 !important;





}











/* Guest CTA kart */





.sidebar-guest-cta {





  margin: 0px !important;





  padding: 14px !important;





  background: var(--surface2) !important;





  border: 0px solid var(--border) !important;





  border-radius: 14px !important;





  font-size: 0.62rem !important;





  color: var(--text3) !important;





  display: flex !important;





  flex-direction: column !important;





  gap: 0px !important;





}





.sidebar-guest-cta strong {





  display: block !important;





  color: var(--text) !important;





  font-weight: 700 !important;





  font-size: 0.875rem !important;





}











.btn-sidebar-login {





  display: inline-flex !important;





  align-items: center !important;





  justify-content: center !important;





  padding: 9px 16px !important;





  border-radius: 10px !important;





  background: var(--text) !important;





  color: var(--bg) !important;





  font-size: 0.82rem !important;





  font-weight: 700 !important;





  text-decoration: none !important;





  transition: opacity 0.15s !important;





  width: 100% !important;





}





.btn-sidebar-login:hover {





  opacity: 0.85 !important;





  text-decoration: none !important;





}











.btn-sidebar-register-sm {





  background: var(--text) !important;





  color: var(--bg) !important;





  border: 1px solid transparent !important;





  border-radius: 10px !important;





}





.btn-sidebar-register-sm:hover {





  opacity: 0.85 !important;





  text-decoration: none !important;





}











.btn-sidebar-login-sm {





  background: var(--surface2) !important;





  border: 1px solid var(--border) !important;





  color: var(--text2) !important;





  border-radius: 10px !important;





}





.btn-sidebar-login-sm:hover {





  background: var(--surface3) !important;





  color: var(--text) !important;





  text-decoration: none !important;





}











/* ═══════════════════════════════════════════════════════════════





   TOPBAR — 64px yükseklik





═══════════════════════════════════════════════════════════════ */





.topbar {





  height: 64px !important;





  min-height: 64px !important;





  padding: 0 20px !important;





  gap: 12px !important;





  backdrop-filter: none;





  -webkit-backdrop-filter: none;





}











[data-theme="dark"] .topbar {





  background: rgba(23, 23, 23, 0.94) !important;

#111625



}





[data-theme="light"] .topbar {





  background: rgba(255, 255, 255, 0.94) !important;





}











.topbar.scrolled {





  box-shadow: 0 1px 16px rgba(0,0,0,0.08) !important;





}





[data-theme="dark"] .topbar.scrolled {





  box-shadow: 0 1px 20px rgba(0,0,0,0.35) !important;





}











/* Model seçici */





.tb-model-btn {





  padding: 7px 12px !important;





  border-radius: 10px !important;





  font-size: 0.9rem !important;





  font-weight: 600 !important;





  font-family: inherit !important;





}





.tb-model-btn:hover {





  background: var(--surface2) !important;





  border-color: var(--border) !important;





}





.tb-model-btn.open {





  background: var(--surface2) !important;





  border-color: var(--border2) !important;





}











/* Topbar icon butonları */





.btn-icon {





  width: 36px !important;





  height: 36px !important;





  border-radius: 10px !important;





}





.btn-icon:hover {





  background: var(--surface2) !important;





  color: var(--text) !important;





  text-decoration: none !important;





}











/* Giriş / Kayıt butonları */





.btn-topbar-login {





  padding: 7px 14px !important;





  border-radius: 10px !important;





  font-size: 0.875rem !important;





  font-weight: 600 !important;





  font-family: inherit !important;





}





.btn-topbar-login:hover {





  background: var(--surface2) !important;





  color: var(--text) !important;





  text-decoration: none !important;





}











.btn-topbar-register {





  padding: 8px 16px !important;





  border-radius: 10px !important;





  font-size: 0.875rem !important;





  font-weight: 700 !important;





  font-family: inherit !important;





}





.btn-topbar-register:hover {





  opacity: 0.85 !important;





  transform: translateY(-1px) !important;





  text-decoration: none !important;





}











/* ═══════════════════════════════════════════════════════════════





   WELCOME SCREEN — Premium ortalanmış





═══════════════════════════════════════════════════════════════ */





.welcome-screen {





  display: flex !important;





  flex-direction: column !important;





  align-items: center !important;





  justify-content: center !important;





  text-align: center !important;





  padding: 40px 24px 24px !important;





  animation: premiumFadeUp 0.5s var(--premium-transition) both !important;





}











@keyframes premiumFadeUp {





  from { opacity: 0; transform: translateY(16px); }





  to   { opacity: 1; transform: translateY(0); }





}











/* Welcome badge */





.welcome-badge {





  display: inline-flex !important;





  align-items: center !important;





  gap: 6px !important;





  padding: 5px 14px !important;





  border-radius: 100px !important;





  background: var(--surface2) !important;





  border: 1px solid var(--border) !important;





  font-size: 0.72rem !important;





  font-weight: 700 !important;





  color: var(--text3) !important;





  letter-spacing: 0.08em !important;





  text-transform: uppercase !important;





  margin-bottom: 24px !important;





}











.welcome-badge-dot {





  width: 6px !important;





  height: 6px !important;





  border-radius: 50% !important;





  background: var(--text3) !important;





  flex-shrink: 0 !important;





}











/* Welcome başlık */





.welcome-title,





#welcome-greeting {





  font-size: clamp(26px, 4vw, 25px) !important;





  font-weight: 400 !important;





  color: var(--text) !important;





  line-height: 1.15 !important;





  letter-spacing: -0.02em !important;





  margin: 0 0 16px !important;





  max-width: 640px !important;





  background: none !important;





  -webkit-background-clip: unset !important;





  -webkit-text-fill-color: var(--text) !important;





  background-clip: unset !important;





  text-align: center !important;





}











/* Welcome alt açıklama */





.welcome-subtitle {





  font-size: 1rem !important;





  color: var(--text3) !important;





  line-height: 1.65 !important;





  max-width: 520px !important;





  margin: 0 0 #3e73e61cmportant;





  font-weight: 400 !important;





}











/* Suggestion pills */





.suggestion-pills {





  display: flex !important;





  flex-wrap: wrap !important;





  gap: 8px !important;





  justify-content: center !important;





  max-width: 640px !important;





  margin: 0 auto !important;





}











/* Suggestion chip butonları */





.suggestion-chip {





  display: inline-flex !important;





  align-items: center !important;





  gap: 6px !important;





  padding: 9px 16px !important;





  border-radius: var(--premium-radius-chip) !important;





  background: var(--surface) !important;





  border: 1px solid var(--border) !important;





  color: var(--text2) !important;





  font-size: 0.875rem !important;





  font-weight: 500 !important;





  cursor: pointer !important;





  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s !important;





  white-space: nowrap !important;





  font-family: inherit !important;





  text-decoration: none !important;





  animation: premiumFadeUp 0.4s var(--premium-transition) both !important;





}





.suggestion-chip:hover {





  background: var(--surface2) !important;





  border-color: var(--border2) !important;





  color: var(--text) !important;





  transform: translateY(-1px) !important;





}





.suggestion-chip svg {





  flex-shrink: 0 !important;





  color: var(--text4) !important;





}











/* ═══════════════════════════════════════════════════════════════





   INPUT ALANI — Premium görünüm





═══════════════════════════════════════════════════════════════ */





.input-wrapper {





  padding: 12px 20px 16px !important;





}











.input-area {





  max-width: var(--premium-input-max-width) !important;





  margin: 0 auto !important;





}











.input-box {





  border-radius: 20px !important;





  box-shadow: 0 2px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04) !important;





  transition: border-color 0.15s, box-shadow 0.15s !important;





}











[data-theme="dark"] .input-box {





  box-shadow: 0 2px 20px rgba(0,0,0,0.25), 0 1px 6px rgba(0,0,0,0.15) !important;





}











.input-box:focus-within {





  box-shadow: 0 0 0 3px var(--accent-soft), 0 2px 16px rgba(0,0,0,0.08) !important;





}











[data-theme="dark"] .input-box:focus-within {





  box-shadow: 0 0 0 3px rgba(255,255,255,0.06), 0 2px 20px rgba(0,0,0,0.3) !important;





}











[data-theme="light"] .input-box {





  background: #ffffff !important;





  border-color: #e0e0e0 !important;





}





[data-theme="light"] .input-box:focus-within {





  border-color: #b0b0b0 !important;





  box-shadow: 0 0 0 3px rgba(0,0,0,0.05), 0 2px 12px rgba(0,0,0,0.08) !important;





}











#message-input {





  font-size: 0.9375rem !important;





  line-height: 1.6 !important;





}











/* Tool butonları */





.btn-tool {





  border-radius: 9px !important;





  transition: background 0.12s, color 0.12s !important;





}





.btn-tool:hover {





  background: var(--surface2) !important;





  color: var(--text) !important;





}











/* Gönder butonu */





.btn-send,





#btn-send {





  border-radius: 10px !important;





  transition: opacity 0.15s, transform 0.15s !important;





}





.btn-send:hover:not(:disabled),





#btn-send:hover:not(:disabled) {





  opacity: 0.85 !important;





  transform: scale(1.05) !important;





}





.btn-send:disabled,





#btn-send:disabled {





  opacity: 0.3 !important;





  cursor: not-allowed !important;





  transform: none !important;





}











/* Speed picker dropdown */





.speed-picker-dropdown {





  border-radius: 14px !important;





  box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08) !important;





}











.speed-picker-option {





  border-radius: 9px !important;





}





.speed-picker-option:hover { background: var(--surface2) !important; }





.speed-picker-option.active { background: var(--surface2) !important; }











.speed-option-icon {





  border-radius: 7px !important;





  background: var(--surface3) !important;





}











/* Input footer */





.input-footer {





  text-align: center !important;





  font-size: 0.72rem !important;





  color: var(--text4) !important;





  padding: 8px 16px 0 !important;





  line-height: 1.5 !important;





}











/* Char count */





.char-count.warn  { color: var(--warning) !important; }





.char-count.error { color: var(--error) !important; }











/* ═══════════════════════════════════════════════════════════════





   MESAJLAR — ChatGPT-style görünüm





═══════════════════════════════════════════════════════════════ */











/* Kullanıcı mesajı balonu */





.message.user .message-content-wrapper,





.message.user .message-bubble {





  background: var(--surface2) !important;





  border: 1px solid var(--border) !important;





  border-radius: 18px !important;





  padding: 12px 16px !important;





  max-width: 75% !important;





  font-size: 0.9375rem !important;





  line-height: 1.65 !important;





  color: var(--text) !important;





  word-break: break-word !important;





}











/* AI mesajı */





.message.assistant .message-content-wrapper,





.message.assistant .message-bubble {





  background: transparent !important;





  border: none !important;





  font-size: 0.9375rem !important;





  line-height: 1.75 !important;





}











/* Mesaj içeriği */





.message-content {





  line-height: 1.75 !important;





  font-size: 0.9375rem !important;





}





.message-content p { margin: 0 0 12px !important; }





.message-content p:last-child { margin-bottom: 0 !important; }





.message-content h1,





.message-content h2,





.message-content h3,





.message-content h4 {





  color: var(--text) !important;





  font-weight: 700 !important;





  margin: 20px 0 8px !important;





  line-height: 1.3 !important;





}





.message-content h1 { font-size: 1.4rem !important; }





.message-content h2 { font-size: 1.2rem !important; }





.message-content h3 { font-size: 1.05rem !important; }





.message-content strong, .message-content b { color: var(--text) !important; font-weight: 700 !important; }





.message-content ul, .message-content ol { padding-left: 20px !important; margin: 8px 0 12px !important; }





.message-content li { margin-bottom: 4px !important; line-height: 1.65 !important; }





.message-content a { color: var(--text) !important; text-decoration: underline !important; text-underline-offset: 2px !important; }





.message-content a:hover { opacity: 0.75 !important; }





.message-content blockquote {





  border-left: 3px solid var(--border2) !important;





  padding-left: 14px !important;





  margin: 12px 0 !important;





  color: var(--text3) !important;





}











/* Inline kod */





.message-content code:not(pre code) {





  background: var(--surface2) !important;





  color: var(--text) !important;





  border-radius: 5px !important;





  font-family: 'JetBrains Mono', 'Fira Code', monospace !important;





  font-size: 0.82em !important;





  padding: 2px 6px !important;





  border: 1px solid var(--border) !important;





}











/* ═══════════════════════════════════════════════════════════════





   KOD BLOKLARI





═══════════════════════════════════════════════════════════════ */





.code-block {





  border-radius: 12px !important;





  overflow: hidden !important;





  margin: 12px 0 !important;





}











.code-block-header {





  display: flex !important;





  align-items: center !important;





  justify-content: space-between !important;





  padding: 10px 14px !important;





  background: var(--code-header) !important;





  border-bottom: 1px solid var(--border) !important;





}











.code-block-lang {





  font-size: 0.75rem !important;





  font-weight: 700 !important;





  color: var(--text3) !important;





  text-transform: uppercase !important;





  letter-spacing: 0.06em !important;





}











.code-block-actions { display: flex !important; align-items: center !important; gap: 4px !important; }











.code-block-btn {





  display: flex !important;





  align-items: center !important;





  gap: 5px !important;





  padding: 4px 10px !important;





  border-radius: 7px !important;





  background: none !important;





  border: 1px solid var(--border) !important;





  color: var(--text3) !important;





  font-size: 0.72rem !important;





  font-weight: 600 !important;





  cursor: pointer !important;





  transition: background 0.12s, color 0.12s !important;





  font-family: inherit !important;





}





.code-block-btn:hover { background: var(--surface2) !important; color: var(--text) !important; }











.code-block pre {





  margin: 0 !important;





  padding: 14px 16px !important;





  overflow-x: auto !important;





  font-size: 0.84rem !important;





  line-height: 1.6 !important;





}











/* Typing indicator */





.typing-dot {





  width: 7px !important;





  height: 7px !important;





  border-radius: 50% !important;





  background: var(--text3) !important;





  animation: typingBounce 1.2s infinite ease-in-out !important;





}





.typing-dot:nth-child(2) { animation-delay: 0.2s !important; }





.typing-dot:nth-child(3) { animation-delay: 0.4s !important; }











@keyframes typingBounce {





  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }





  30%            { transform: translateY(-6px); opacity: 1; }





}











/* ═══════════════════════════════════════════════════════════════





   DUYURULAR





═══════════════════════════════════════════════════════════════ */





.announcement {





  display: flex !important;





  align-items: center !important;





  justify-content: space-between !important;





  gap: 12px !important;





  padding: 10px 20px !important;





  font-size: 0.84rem !important;





  border-bottom: 1px solid var(--border) !important;





}





.announcement-info    { background: rgba(80,80,80,0.08) !important; color: var(--info) !important; }





.announcement-warning { background: rgba(245,158,11,0.08) !important; color: var(--warning) !important; }





.announcement-error   { background: rgba(239,68,68,0.08) !important;  color: var(--error) !important; }





.announcement-success { background: rgba(16,185,129,0.08) !important; color: var(--success) !important; }





.announcement button {





  display: flex !important; align-items: center !important; justify-content: center !important;





  width: 24px !important; height: 24px !important; border-radius: 6px !important;





  background: none !important; border: none !important; cursor: pointer !important;





  color: inherit !important; opacity: 0.6 !important; flex-shrink: 0 !important;





}





.announcement button:hover { opacity: 1 !important; }











/* ═══════════════════════════════════════════════════════════════





   MODALLER — Premium görünüm





═══════════════════════════════════════════════════════════════ */





.modal-box {





  border-radius: 18px !important;





  box-shadow: 0 24px 64px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.12) !important;





  animation: modalSlideUp 0.25s var(--premium-transition) both !important;





}





.modal-box.modal-lg { max-width: 640px !important; }





.modal-box.modal-sm { max-width: 360px !important; }











@keyframes modalSlideUp {





  from { opacity: 0; transform: translateY(20px) scale(0.97); }





  to   { opacity: 1; transform: translateY(0) scale(1); }





}











.modal-overlay {





  backdrop-filter: none;





  -webkit-backdrop-filter: none;





}











.modal-header h3 {





  font-size: 1rem !important;





  font-weight: 700 !important;





}











.modal-header button {





  border-radius: 8px !important;





  transition: background 0.12s, color 0.12s !important;





}





.modal-header button:hover {





  background: var(--surface2) !important;





  color: var(--text) !important;





}











/* Form elemanları */





.form-group textarea,





.form-group input[type="text"],





.form-group input[type="email"],





.form-group input[type="password"],





.form-input {





  border-radius: 10px !important;





  font-family: inherit !important;





}











/* Butonlar */





.btn-primary {





  border-radius: 10px !important;





  font-weight: 700 !important;





  font-family: inherit !important;





  transition: opacity 0.15s, transform 0.15s !important;





}





.btn-primary:hover {





  opacity: 0.85 !important;





  transform: translateY(-1px) !important;





  text-decoration: none !important;





}











.btn-secondary {





  border-radius: 10px !important;





  font-weight: 600 !important;





  font-family: inherit !important;





  transition: background 0.12s, border-color 0.12s !important;





}





.btn-secondary:hover {





  background: var(--surface3) !important;





  border-color: var(--border2) !important;





  text-decoration: none !important;





}











/* ═══════════════════════════════════════════════════════════════





   TOAST BÄ°LDÄ°RÄ°MLERÄ°





═══════════════════════════════════════════════════════════════ */





.toast {





  border-radius: 12px !important;





  box-shadow: 0 8px 24px rgba(0,0,0,0.16) !important;





  animation: toastSlideIn 0.3s var(--premium-transition) both !important;





}











@keyframes toastSlideIn {





  from { opacity: 0; transform: translateX(20px); }





  to   { opacity: 1; transform: translateX(0); }





}











.toast.success { border-left: 3px solid var(--success) !important; }





.toast.error   { border-left: 3px solid var(--error) !important; }





.toast.warning { border-left: 3px solid var(--warning) !important; }











/* ═══════════════════════════════════════════════════════════════





   DARK MODE — Ek overrides





═══════════════════════════════════════════════════════════════ */





[data-theme="dark"] .suggestion-chip {





  background: #0b142d !important;





  border-color: rgba(255,255,255,0.1) !important;





}





[data-theme="dark"] .suggestion-chip:hover {





  background: #2f2f2f !important;





  border-color: rgba(255,255,255,0.18) !important;





}











[data-theme="dark"] .modal-box {





  background: #0b142d !important;





  border-color: rgba(255,255,255,0.12) !important;





}











[data-theme="dark"] .toast {





  background: #0b142d !important;





  border-color: rgba(255,255,255,0.12) !important;





}











[data-theme="dark"] .speed-picker-dropdown {





  background: #0b142d !important;





  border-color: rgba(255,255,255,0.12) !important;





}











/* ═══════════════════════════════════════════════════════════════





   RESPONSIVE — Mobile





═══════════════════════════════════════════════════════════════ */





@media (max-width: 768px) {





  .welcome-screen {





    padding: 24px 16px 16px !important;





  }





  .welcome-title, #welcome-greeting {





    font-size: clamp(22px, 6vw, 32px) !important;





  }





  .welcome-subtitle {





    font-size: 0.9rem !important;





  }





  .suggestion-pills {





    gap: 6px !important;





  }





  .suggestion-chip {





    font-size: 0.82rem !important;





    padding: 8px 14px !important;





  }





  .input-wrapper {





    padding: 8px 12px 12px !important;





  }





  .input-area {





    max-width: 100% !important;





  }





  .input-box {





    border-radius: 16px !important;





  }





  .message.user .message-content-wrapper,





  .message.user .message-bubble {





    max-width: 88% !important;





  }





  .modal-box {





    border-radius: 18px 18px 12px 12px !important;





  }





  .btn-tool-analyze,





  .btn-tool-camera {





    display: none !important;





  }





}











/* ═══════════════════════════════════════════════════════════════





   UTILITY





═══════════════════════════════════════════════════════════════ */





@keyframes corpFadeUp {





  from { opacity: 0; transform: translateY(10px); }





  to   { opacity: 1; transform: translateY(0); }





}











@keyframes spin {





  to { transform: rotate(360deg); }





}











.animate-spin {





  animation: spin 1s linear infinite !important;





}