/**

 * GlomaxGPT Next — Unified Component & Layout System

 * Version: 3.0.0

 * Modern, responsive UI components inspired by ChatGPT, Claude & Gemini.

 */



/* ==========================================================

   1. GLOBAL RESET & BASE RULES

   ========================================================== */

*, *::before, *::after {

  box-sizing: border-box;

}



body {

  margin: 0;

  padding: 0;

  background-color: var(--bg-main);

  color: var(--text-primary);

  font-family: var(--font-sans);

  font-size: 15px;

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;

  transition: background-color var(--transition-fast), color var(--transition-fast);

}



a {

  color: inherit;

  text-decoration: none;

  transition: color var(--transition-fast), opacity var(--transition-fast);

}



button {

  font-family: inherit;

}



/* Scrollbars */

::-webkit-scrollbar {

  width: 6px;

  height: 6px;

}

::-webkit-scrollbar-track {

  background: transparent;

}

::-webkit-scrollbar-thumb {

  background: var(--scrollbar-thumb);

  border-radius: var(--radius-pill);

}

::-webkit-scrollbar-thumb:hover {

  background: var(--scrollbar-thumb-hover);

}



/* ==========================================================

   2. BUTTONS & INTERACTIVE ELEMENTS

   ========================================================== */

.gx-btn,

.btn-primary,

.btn-secondary {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 9px 18px;

  font-size: 0.88rem;

  font-weight: 600;

  border-radius: var(--radius-md);

  border: 1px solid transparent;

  cursor: pointer;

  user-select: none;

  white-space: nowrap;

  transition: all var(--transition-fast);

  text-decoration: none;

}



.gx-btn:focus-visible,

.btn-primary:focus-visible {

  outline: 2px solid var(--accent);

  outline-offset: 2px;

}



/* Primary Button */

.gx-btn-primary,

.btn-primary {

  background: var(--accent) !important;

  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.15) !important;

  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);

}

.gx-btn-primary:hover,

.btn-primary:hover {

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

  transform: translateY(-1px);

  box-shadow: var(--accent-glow);

  opacity: 1 !important;

}

.gx-btn-primary:active,

.btn-primary:active {

  transform: translateY(0);

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

}



/* Secondary & Outline Buttons */

.gx-btn-secondary,

.btn-secondary,

.btn-ghost {

  background: var(--bg-surface) !important;

  color: var(--text-primary) !important;

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

}

.gx-btn-secondary:hover,

.btn-secondary:hover {

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

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

}



/* Danger Button */

.gx-btn-danger,

.btn-danger {

  background: var(--status-error-soft) !important;

  color: var(--status-error) !important;

  border: 1px solid rgba(239, 68, 68, 0.25) !important;

}

.gx-btn-danger:hover,

.btn-danger:hover {

  background: var(--status-error) !important;

  color: #ffffff !important;

}



/* Sizes */

.gx-btn-sm { padding: 6px 12px; font-size: 0.80rem; border-radius: var(--radius-sm); }

.gx-btn-lg { padding: 13px 26px; font-size: 0.98rem; border-radius: var(--radius-lg); }

.gx-btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--radius-sm); }



/* ==========================================================

   3. CARDS, PANELS & SURFACES

   ========================================================== */

.gx-card,

.panel,

.form-card {

  background: var(--bg-surface);

  border: 1px solid var(--border-default);

  border-radius: var(--radius-lg);

  padding: 24px;

  box-shadow: var(--shadow-sm);

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

}



.gx-card-hover:hover {

  border-color: var(--border-strong);

  box-shadow: var(--shadow-md);

  transform: translateY(-2px);

}



/* Glassmorphism Panel */

.gx-glass-card {

  background: var(--glass-bg);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-xl);

}



/* ==========================================================

   4. FORM CONTROLS & INPUTS

   ========================================================== */

.gx-input,

.gx-select,

.gx-textarea,

.form-group input,

.form-group select,

.form-group textarea {

  width: 100%;

  padding: 10px 14px;

  background: var(--bg-input) !important;

  color: var(--text-primary) !important;

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

  border-radius: var(--radius-md) !important;

  font-family: inherit;

  font-size: 0.92rem;

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

}



.gx-input:focus,

.gx-select:focus,

.gx-textarea:focus,

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  outline: none !important;

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

  box-shadow: 0 0 0 3px var(--accent-soft) !important;

}



.gx-input::placeholder,

.gx-textarea::placeholder,

.form-group input::placeholder,

.form-group textarea::placeholder {

  color: var(--text-muted) !important;

}



/* ==========================================================

   5. BADGES & PILLS

   ========================================================== */

.gx-badge {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding: 3px 9px;

  font-size: 0.72rem;

  font-weight: 700;

  border-radius: var(--radius-pill);

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



.gx-badge-primary { background: var(--accent-soft); color: var(--accent-light); border: 1px solid rgba(99, 102, 241, 0.25); }

.gx-badge-success { background: var(--status-success-soft); color: var(--status-success); border: 1px solid rgba(16, 185, 129, 0.25); }

.gx-badge-warning { background: var(--status-warning-soft); color: var(--status-warning); border: 1px solid rgba(245, 158, 11, 0.25); }

.gx-badge-danger  { background: var(--status-error-soft); color: var(--status-error); border: 1px solid rgba(239, 68, 68, 0.25); }



/* Model / Tool Selection Pills */

.gx-pill {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 12px;

  background: var(--bg-surface);

  border: 1px solid var(--border-default);

  border-radius: var(--radius-pill);

  font-size: 0.82rem;

  font-weight: 600;

  color: var(--text-secondary);

  cursor: pointer;

  transition: all var(--transition-fast);

}

.gx-pill:hover,

.gx-pill.active {

  background: var(--accent-soft);

  color: var(--accent-light);

  border-color: var(--accent);

}



/* ==========================================================

   6. UNIFIED APP LAYOUT & SIDEBAR

   ========================================================== */

.app-with-sidebar {

  display: flex;

  min-height: 100vh;

  width: 100%;

  position: relative;

}



.main-content {

  flex: 1 1 0;

  min-width: 0;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  background-color: var(--bg-main);

  position: relative;

}



/* Unified Collapsible Sidebar */

.glomax-sidebar,

#sidebar,

aside.sidebar {

  width: var(--sidebar-width);

  background: var(--bg-sidebar);

  border-right: 1px solid var(--border-subtle);

  display: flex;

  flex-direction: column;

  flex-shrink: 0;

  height: 100vh;

  position: sticky;

  top: 0;

  z-index: var(--z-sidebar);

  transition: width var(--transition-smooth), transform var(--transition-smooth);

}



/* Collapsed Sidebar Mode */

body.sidebar-collapsed .glomax-sidebar,

body.sidebar-collapsed #sidebar {

  width: var(--sidebar-collapsed);

}

body.sidebar-collapsed .sb-label,

body.sidebar-collapsed .sidebar-nav-label,

body.sidebar-collapsed .sb-user-info,

body.sidebar-collapsed .sidebar-title,

body.sidebar-collapsed .sb-search-wrap {

  display: none !important;

}

body.sidebar-collapsed .sb-nav-item,

body.sidebar-collapsed .sidebar-nav-item {

  justify-content: center !important;

  padding: 10px 0 !important;

}



/* ==========================================================

   7. CHAT COMPOSER (Input Area)

   ========================================================== */

.gx-composer-wrap {

  width: 100%;

  max-width: var(--composer-max-w);

  margin: 0 auto;

  padding: 0 16px 16px;

  position: sticky;

  bottom: 0;

  z-index: 20;

}



.gx-composer {

  background: var(--bg-surface);

  border: 1px solid var(--border-default);

  border-radius: var(--radius-xl);

  padding: 10px 14px 10px 16px;

  box-shadow: var(--shadow-popup);

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.gx-composer:focus-within {

  border-color: rgba(99, 102, 241, 0.45);

  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 0 2px var(--accent-soft);

}



.gx-composer-textarea {

  width: 100%;

  background: transparent !important;

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

  color: var(--text-primary) !important;

  font-family: inherit;

  font-size: 0.96rem;

  line-height: 1.5;

  resize: none;

  min-height: 36px;

  max-height: 200px;

  padding: 4px 0;

}



.gx-composer-toolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

}

.gx-composer-tools {

  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;

}

.gx-composer-actions {

  display: flex;

  align-items: center;

  gap: 8px;

}



/* ==========================================================

   8. MARKDOWN, CODE & CHAT MESSAGES

   ========================================================== */

.gx-msg-row {

  display: flex;

  width: 100%;

  max-width: 820px;

  margin: 0 auto;

  padding: 18px 20px;

  gap: 16px;

}

.gx-msg-user {

  justify-content: flex-end;

}

.gx-msg-user .gx-bubble {

  background: var(--bubble-user-bg);

  color: var(--bubble-user-text);

  border: 1px solid var(--bubble-user-border);

  border-radius: var(--radius-lg);

  padding: 12px 18px;

  max-width: 85%;

}

.gx-msg-ai {

  justify-content: flex-start;

}

.gx-msg-ai .gx-bubble {

  background: transparent;

  color: var(--bubble-ai-text);

  width: 100%;

  max-width: 100%;

}



/* Code Highlight Block */

.gx-code-block {

  border-radius: var(--radius-md);

  overflow: hidden;

  margin: 12px 0;

  border: 1px solid var(--border-default);

  background: #0d1117;

}

.gx-code-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 8px 14px;

  background: rgba(255, 255, 255, 0.05);

  font-size: 0.78rem;

  color: var(--text-secondary);

  font-family: var(--font-mono);

}

.gx-copy-btn {

  background: transparent;

  border: none;

  color: var(--text-muted);

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 5px;

  font-size: 0.75rem;

  padding: 3px 8px;

  border-radius: var(--radius-xs);

  transition: all var(--transition-fast);

}

.gx-copy-btn:hover {

  background: rgba(255, 255, 255, 0.1);

  color: var(--text-primary);

}



/* ==========================================================

   9. SIDE-BY-SIDE MODEL COMPARE (Feature 7)

   ========================================================== */

.gx-compare-container {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

  padding: 16px;

}

@media (max-width: 850px) {

  .gx-compare-container {

    grid-template-columns: 1fr;

  }

}

.gx-compare-panel {

  background: var(--bg-surface);

  border: 1px solid var(--border-default);

  border-radius: var(--radius-lg);

  display: flex;

  flex-direction: column;

  overflow: hidden;

  min-height: 500px;

}

.gx-compare-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 16px;

  background: var(--bg-hover);

  border-bottom: 1px solid var(--border-subtle);

}

.gx-compare-body {

  flex: 1;

  padding: 16px;

  overflow-y: auto;

}



/* ==========================================================

   10. WORKSPACE / CANVAS PANEL (Feature 24)

   ========================================================== */

.gx-workspace-split {

  display: flex;

  width: 100%;

  height: calc(100vh - var(--topbar-height));

  overflow: hidden;

}

.gx-workspace-chat {

  flex: 1 1 50%;

  overflow-y: auto;

  border-right: 1px solid var(--border-subtle);

}

.gx-workspace-canvas {

  flex: 1 1 50%;

  display: flex;

  flex-direction: column;

  background: var(--bg-surface);

  overflow: hidden;

}

.gx-canvas-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 16px;

  border-bottom: 1px solid var(--border-subtle);

  background: var(--bg-hover);

}

.gx-canvas-editor {

  flex: 1;

  width: 100%;

  border: none;

  background: var(--bg-main);

  color: var(--text-primary);

  font-family: var(--font-mono);

  font-size: 0.90rem;

  padding: 16px;

  outline: none;

  resize: none;

}

.gx-canvas-preview {

  flex: 1;

  width: 100%;

  border: none;

  background: #ffffff;

}



/* ==========================================================

   11. RESPONSIVE MOBILE TWEAKS

   ========================================================== */

@media (max-width: 768px) {

  :root {

    --sidebar-width: 100%;

    --topbar-height: 52px;

  }

  

  .glomax-sidebar,

  #sidebar,

  aside.sidebar {

    position: fixed;

    left: -100%;

    top: 0;

    width: 280px;

    z-index: var(--z-modal);

  }

  body.sidebar-open .glomax-sidebar,

  body.sidebar-open #sidebar {

    left: 0;

    box-shadow: var(--shadow-xl);

  }

  

  .gx-composer-wrap {

    padding: 0 10px 10px;

  }

  

  .gx-msg-row {

    padding: 12px 14px;

    gap: 10px;

  }

}



/* ==========================================================

   12. ACCENT COLOR PICKER & LANGUAGE GRIDS

   ========================================================== */

.gx-settings-section {

  background: var(--bg-surface);

  border: 1px solid var(--border-default);

  border-radius: var(--radius-lg);

  padding: 24px;

  margin-bottom: 20px;

  transition: border-color var(--transition-fast);

}

.gx-settings-section:focus-within {

  border-color: var(--border-strong);

}

.gx-settings-title {

  font-size: 1.05rem;

  font-weight: 700;

  color: var(--text-primary);

  margin-bottom: 6px;

  display: flex;

  align-items: center;

  gap: 8px;

}

.gx-settings-desc {

  font-size: 0.85rem;

  color: var(--text-muted);

  margin-bottom: 18px;

}



/* 9 Accent Colors Grid */

.gx-accent-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

  gap: 10px;

}

.gx-accent-btn {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 14px;

  background: var(--bg-hover);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-md);

  color: var(--text-primary);

  font-size: 0.84rem;

  font-weight: 600;

  cursor: pointer;

  transition: all var(--transition-fast);

  outline: none;

}

.gx-accent-btn:hover {

  background: var(--bg-active);

  border-color: var(--border-strong);

  transform: translateY(-1px);

}

.gx-accent-btn.active,

.gx-accent-btn.selected,

.gx-accent-btn[aria-pressed="true"] {

  border-color: var(--accent);

  background: var(--accent-soft);

  box-shadow: 0 0 0 1px var(--accent);

}

.gx-accent-swatch {

  width: 18px;

  height: 18px;

  border-radius: 50%;

  flex-shrink: 0;

  box-shadow: 0 2px 5px rgba(0,0,0,0.25);

  border: 2px solid rgba(255,255,255,0.2);

}



/* Language Cards Grid */

.gx-lang-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

}

@media (max-width: 600px) {

  .gx-lang-grid {

    grid-template-columns: 1fr;

  }

}

.gx-lang-btn {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 16px;

  background: var(--bg-hover);

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-md);

  color: var(--text-primary);

  font-size: 0.90rem;

  font-weight: 600;

  cursor: pointer;

  transition: all var(--transition-fast);

  outline: none;

}

.gx-lang-btn:hover {

  background: var(--bg-active);

  border-color: var(--border-strong);

  transform: translateY(-1px);

}

.gx-lang-btn.active,

.gx-lang-btn[aria-pressed="true"] {

  border-color: var(--accent);

  background: var(--accent-soft);

  box-shadow: 0 0 0 1px var(--accent);

  color: var(--accent);

}

.gx-lang-flag {

  font-size: 1.3rem;

  line-height: 1;

}



/* ==========================================================

   13. COLLAPSED SIDEBAR WITH HOVER TOOLTIPS

   ========================================================== */

#sidebar.collapsed {

  width: var(--sidebar-collapsed, 68px) !important;

  min-width: var(--sidebar-collapsed, 68px) !important;

}

#sidebar.collapsed .sidebar-header .logo-text,

#sidebar.collapsed .sidebar-nav-item span,

#sidebar.collapsed .sidebar-section-title,

#sidebar.collapsed .sidebar-user-info,

#sidebar.collapsed .sidebar-footer-text,

#sidebar.collapsed .new-chat-btn span,

#sidebar.collapsed .chat-history-list {

  display: none !important;

}

#sidebar.collapsed .sidebar-nav-item,

#sidebar.collapsed .new-chat-btn {

  justify-content: center !important;

  padding: 10px !important;

  position: relative;

}

#sidebar.collapsed .sidebar-nav-item[data-title]:hover::after {

  content: attr(data-title);

  position: absolute;

  left: 100%;

  top: 50%;

  transform: translateY(-50%);

  margin-left: 12px;

  background: var(--bg-surface-elevated, #202230);

  color: var(--text-primary, #fff);

  padding: 5px 10px;

  border-radius: var(--radius-sm, 8px);

  font-size: 0.78rem;

  font-weight: 600;

  white-space: nowrap;

  box-shadow: var(--shadow-popup, 0 8px 24px rgba(0,0,0,0.4));

  border: 1px solid var(--border-default, rgba(255,255,255,0.1));

  z-index: var(--z-popover, 500);

  pointer-events: none;

}



/* ==========================================================

   14. ABSOLUTE LIGHT THEME GUARANTEE & COMPREHENSIVE OVERRIDES

   Ensures 100% true light mode across every page and component.

   ========================================================== */

html[data-theme="light"],

body[data-theme="light"],

[data-theme="light"] {

  color-scheme: light !important;

}



html[data-theme="light"],

html[data-theme="light"] body,

html[data-theme="light"] .app-with-sidebar,

html[data-theme="light"] #main,

html[data-theme="light"] .main-content,

html[data-theme="light"] #main-content,

html[data-theme="light"] .page-main,

html[data-theme="light"] #chat-area,

html[data-theme="light"] .chat-messages,

html[data-theme="light"] #chat-messages,

html[data-theme="light"] #messages,

html[data-theme="light"] #welcome-screen,

html[data-theme="light"] .welcome-screen,

html[data-theme="light"] .chat-layout {

  background: var(--bg-main, #f8fafc) !important;

  color: var(--text-primary, #0f172a) !important;

}



/* Sidebar Light Enforcement */

html[data-theme="light"] #sidebar,

html[data-theme="light"] .sidebar,

html[data-theme="light"] aside#sidebar,

html[data-theme="light"] aside.sidebar,

html[data-theme="light"] .sidebar-top,

html[data-theme="light"] .sidebar-bottom,

html[data-theme="light"] .sidebar-footer {

  background: var(--bg-sidebar, #ffffff) !important;

  border-color: var(--border-subtle, rgba(0, 0, 0, 0.08)) !important;

  color: var(--text-primary, #0f172a) !important;

}



/* Topbar Light Enforcement */

html[data-theme="light"] #topbar,

html[data-theme="light"] header.topbar,

html[data-theme="light"] .topbar,

html[data-theme="light"] .inner-topbar,

html[data-theme="light"] .mobile-page-header,

html[data-theme="light"] .mobile-header {

  background: var(--topbar-bg, rgba(255, 255, 255, 0.95)) !important;

  border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06)) !important;

  color: var(--text-primary, #0f172a) !important;

  backdrop-filter: blur(14px) !important;

}



/* Input & Composer Light Enforcement */

html[data-theme="light"] #input-area,

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

html[data-theme="light"] .chat-input-area {

  background: var(--bg-main, #f8fafc) !important;

}



html[data-theme="light"] #chat-input-container,

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

html[data-theme="light"] .gx-gemini-bar,

html[data-theme="light"] .chat-input-container,

html[data-theme="light"] .gx-work-box {

  background: var(--bg-input, #ffffff) !important;

  border: 1px solid var(--border-default, rgba(0, 0, 0, 0.12)) !important;

  color: var(--text-primary, #0f172a) !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;

}



html[data-theme="light"] textarea,

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),

html[data-theme="light"] #message-input,

html[data-theme="light"] #work-message-input,

html[data-theme="light"] #gx-work-textarea {

  color: var(--text-primary, #0f172a) !important;

  -webkit-text-fill-color: var(--text-primary, #0f172a) !important;

}



html[data-theme="light"] textarea::placeholder,

html[data-theme="light"] input::placeholder {

  color: var(--text-muted, #94a3b8) !important;

  -webkit-text-fill-color: var(--text-muted, #94a3b8) !important;

}



/* Message Bubbles Light Enforcement */

html[data-theme="light"] .msg-wrapper.user .msg-bubble,

html[data-theme="light"] .message-wrapper.user .msg-bubble,

html[data-theme="light"] .user-message .msg-bubble,

html[data-theme="light"] .message.user .message-body,

html[data-theme="light"] .message.user .msg-bubble {

  background: var(--user-bubble-bg, #f1f5f9) !important;

  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06)) !important;

  color: var(--text-primary, #0f172a) !important;

}



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

html[data-theme="light"] .message-wrapper.ai .msg-bubble,

html[data-theme="light"] .message-wrapper.assistant .msg-bubble,

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

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

html[data-theme="light"] .message.assistant .message-body,

html[data-theme="light"] .message.ai .message-body {

  background: transparent !important;

  color: var(--text-primary, #0f172a) !important;

}



/* Cards & Panels Light Enforcement */

html[data-theme="light"] .card,

html[data-theme="light"] .gx-card,

html[data-theme="light"] .panel,

html[data-theme="light"] .box,

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

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

html[data-theme="light"] .pricing-card,

html[data-theme="light"] .profile-card,

html[data-theme="light"] .model-card,

html[data-theme="light"] .plugin-card,

html[data-theme="light"] .suggestion-card,

html[data-theme="light"] .prompt-suggestion,

html[data-theme="light"] .wsg-card,

html[data-theme="light"] .gx-setting-group,

html[data-theme="light"] .auth-card {

  background: var(--bg-card, #ffffff) !important;

  border-color: var(--border-default, rgba(0, 0, 0, 0.10)) !important;

  color: var(--text-primary, #0f172a) !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;

}



/* Nav & Interactive Items in Light Mode */

html[data-theme="light"] .sidebar-nav-item {

  color: var(--text-secondary, #475569) !important;

}

html[data-theme="light"] .sidebar-nav-item:hover {

  background: var(--bg-hover, rgba(0, 0, 0, 0.04)) !important;

  color: var(--text-primary, #0f172a) !important;

}

html[data-theme="light"] .sidebar-nav-item.active {

  background: var(--bg-active, rgba(0, 0, 0, 0.07)) !important;

  color: var(--accent, #6366f1) !important;

  font-weight: 600 !important;

}



/* Popups & Menus in Light Mode */

html[data-theme="light"] .modal-content,

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

html[data-theme="light"] .popup,

html[data-theme="light"] .sb-more-popup,

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

html[data-theme="light"] .model-popup,

html[data-theme="light"] .tb-more-dropdown,

html[data-theme="light"] .msg-more-dropdown,

html[data-theme="light"] .input-add-menu {

  background: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.12) !important;

  color: #0f172a !important;

  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;

}



html[data-theme="light"] .sb-more-item,

html[data-theme="light"] .user-menu-item,

html[data-theme="light"] .tb-more-item,

html[data-theme="light"] .msg-more-item {

  color: var(--text-secondary, #475569) !important;

}



html[data-theme="light"] .sb-more-item:hover,

html[data-theme="light"] .user-menu-item:hover,

html[data-theme="light"] .tb-more-item:hover,

html[data-theme="light"] .msg-more-item:hover {

  background: rgba(0, 0, 0, 0.04) !important;

  color: #0f172a !important;

}



/* Headings in Light Mode */

html[data-theme="light"] h1,

html[data-theme="light"] h2,

html[data-theme="light"] h3,

html[data-theme="light"] .sidebar-brand-text,

html[data-theme="light"] .tb-brand-name,

html[data-theme="light"] .sidebar-logo-name,

html[data-theme="light"] .welcome-title {

  color: #0f172a !important;

}



/* Buttons in Light Mode */

html[data-theme="light"] .btn-icon,

html[data-theme="light"] .tb-icon-btn {

  color: var(--text-secondary, #475569) !important;

}

html[data-theme="light"] .btn-icon:hover,

html[data-theme="light"] .tb-icon-btn:hover {

  background: rgba(0, 0, 0, 0.05) !important;

  color: #0f172a !important;

}



/* ============================================================

   15. SIDEBAR LIGHT THEME COMPLETE & ABSOLUTE ENFORCEMENT

   Kenar çubuğundaki tüm siyah/koyu alanları tamamen temizler.

   ============================================================ */



/* 15.1 Ana Sidebar Konteyneri */

html[data-theme="light"] #sidebar,

html[data-theme="light"] .sidebar,

html[data-theme="light"] aside#sidebar,

html[data-theme="light"] aside.sidebar,

html[data-theme="light"] .app-with-sidebar > aside,

html[data-theme="light"] .app-with-sidebar > .sidebar,

html[data-theme="light"] .sidebar.open,

html[data-theme="light"] body.sidebar-open .sidebar {

  background: #ffffff !important;

  background-color: #ffffff !important;

  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;

  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.03) !important;

  color: #0f172a !important;

}



/* 15.2 Sidebar Başlığı & Logo */

html[data-theme="light"] .sidebar-top {

  background: #ffffff !important;

  background-color: #ffffff !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;

}



html[data-theme="light"] .sidebar-logo {

  color: #0f172a !important;

}



html[data-theme="light"] .sidebar-logo-name,

html[data-theme="light"] .gx-brand-name,

html[data-theme="light"] .gx-brand-base,

html[data-theme="light"] .sidebar-logo-text,

html[data-theme="light"] .mobile-logo-text {

  color: #0f172a !important;

  -webkit-text-fill-color: #0f172a !important;

}



html[data-theme="light"] .gx-brand-gpt {

  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;

  -webkit-background-clip: text !important;

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

}



html[data-theme="light"] .sidebar-country-sup {

  color: #64748b !important;

  background: rgba(0, 0, 0, 0.05) !important;

  border-radius: 4px;

  padding: 0 4px;

}



/* 15.3 Butonlar & İkonlar */

html[data-theme="light"] .sidebar-expand-btn {

  background: transparent !important;

  color: #475569 !important;

}



html[data-theme="light"] .sidebar-expand-btn:hover {

  background: rgba(0, 0, 0, 0.05) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .sidebar-icon-btn,

html[data-theme="light"] #sidebar-collapse-btn,

html[data-theme="light"] #sidebar-close-btn,

html[data-theme="light"] #btn-new-chat,

html[data-theme="light"] .sb-new-chat-btn {

  background: transparent !important;

  color: #475569 !important;

}



html[data-theme="light"] .sidebar-icon-btn:hover,

html[data-theme="light"] #sidebar-collapse-btn:hover,

html[data-theme="light"] #sidebar-close-btn:hover,

html[data-theme="light"] #btn-new-chat:hover,

html[data-theme="light"] .sb-new-chat-btn:hover {

  background: rgba(0, 0, 0, 0.05) !important;

  color: #0f172a !important;

}



/* 15.4 Ana Navigasyon */

html[data-theme="light"] .sidebar-nav {

  background: #ffffff !important;

  background-color: #ffffff !important;

}



html[data-theme="light"] .sidebar-nav-item {

  color: #334155 !important;

  background: transparent !important;

}



html[data-theme="light"] .sidebar-nav-item svg {

  color: #64748b !important;

}



html[data-theme="light"] .sidebar-nav-item:hover {

  background: rgba(0, 0, 0, 0.04) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .sidebar-nav-item:hover svg {

  color: #0f172a !important;

}



html[data-theme="light"] .sidebar-nav-item.active {

  background: rgba(99, 102, 241, 0.08) !important;

  color: #4f46e5 !important;

  font-weight: 600 !important;

}



html[data-theme="light"] .sidebar-nav-item.active svg {

  color: #4f46e5 !important;

}



html[data-theme="light"] .sb-badge-beta {

  background: rgba(99, 102, 241, 0.12) !important;

  color: #4f46e5 !important;

}



/* 15.5 Daha Fazla Popup */

html[data-theme="light"] .sb-more-wrap {

  background: transparent !important;

}



html[data-theme="light"] .sb-more-btn {

  color: #334155 !important;

  background: transparent !important;

}



html[data-theme="light"] .sb-more-btn:hover {

  background: rgba(0, 0, 0, 0.04) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .sb-more-popup {

  background: #ffffff !important;

  background-color: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.12) !important;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .sb-more-section-label {

  color: #94a3b8 !important;

  background: transparent !important;

}



html[data-theme="light"] .sb-more-item {

  color: #334155 !important;

  background: transparent !important;

}



html[data-theme="light"] .sb-more-item svg {

  color: #64748b !important;

}



html[data-theme="light"] .sb-more-item:hover {

  background: rgba(0, 0, 0, 0.04) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .sb-more-item:hover svg {

  color: #0f172a !important;

}



html[data-theme="light"] .sb-more-item.active {

  background: rgba(99, 102, 241, 0.08) !important;

  color: #4f46e5 !important;

}



html[data-theme="light"] .sb-more-divider {

  background: rgba(0, 0, 0, 0.08) !important;

  height: 1px !important;

}



/* 15.6 Konuşma Listesi & Öğeleri */

html[data-theme="light"] .sidebar-conversations,

html[data-theme="light"] #conv-list,

html[data-theme="light"] #conv-groups-wrap,

html[data-theme="light"] .sidebar-history-list {

  background: #ffffff !important;

  background-color: #ffffff !important;

  color: #0f172a !important;

}



html[data-theme="light"] .conv-list-header {

  background: #ffffff !important;

  background-color: #ffffff !important;

  color: #64748b !important;

}



html[data-theme="light"] .conv-list-header a {

  color: #64748b !important;

}



html[data-theme="light"] .conv-list-header a:hover {

  color: #0f172a !important;

}



html[data-theme="light"] .conv-group-label {

  background: #ffffff !important;

  background-color: #ffffff !important;

  color: #64748b !important;

}



html[data-theme="light"] .conv-item,

html[data-theme="light"] .conv-item-btn,

html[data-theme="light"] .conversation-item,

html[data-theme="light"] [class*="conv-item"] {

  background: transparent !important;

  background-color: transparent !important;

  color: #334155 !important;

}



html[data-theme="light"] .conv-item-text,

html[data-theme="light"] .conv-title {

  color: #334155 !important;

}



html[data-theme="light"] .conv-item:hover,

html[data-theme="light"] .conv-item-btn:hover,

html[data-theme="light"] .conversation-item:hover {

  background: rgba(0, 0, 0, 0.04) !important;

  background-color: rgba(0, 0, 0, 0.04) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .conv-item:hover .conv-item-text,

html[data-theme="light"] .conv-item:hover .conv-title {

  color: #0f172a !important;

}



html[data-theme="light"] .conv-item.active,

html[data-theme="light"] .conv-item-btn.active,

html[data-theme="light"] .conversation-item.active {

  background: rgba(99, 102, 241, 0.08) !important;

  background-color: rgba(99, 102, 241, 0.08) !important;

  color: #4f46e5 !important;

  font-weight: 500 !important;

}



html[data-theme="light"] .conv-item.active .conv-item-text,

html[data-theme="light"] .conv-item.active .conv-title {

  color: #4f46e5 !important;

}



html[data-theme="light"] .conv-item-time {

  color: #94a3b8 !important;

}



html[data-theme="light"] .conv-item-actions {

  background: transparent !important;

  background-color: transparent !important;

}



html[data-theme="light"] .conv-action-btn {

  background: transparent !important;

  color: #64748b !important;

}



html[data-theme="light"] .conv-action-btn:hover {

  background: rgba(0, 0, 0, 0.08) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .conv-action-btn.danger:hover {

  background: rgba(239, 68, 68, 0.1) !important;

  color: #ef4444 !important;

}



html[data-theme="light"] .conv-loading {

  color: #94a3b8 !important;

  background: transparent !important;

}



/* 15.7 Arama Alanı */

html[data-theme="light"] .sb-search-wrap,

html[data-theme="light"] .conv-search-wrap {

  background: transparent !important;

}



html[data-theme="light"] .sb-search-box,

html[data-theme="light"] div:has(> #conv-search) {

  background: #f1f5f9 !important;

  background-color: #f1f5f9 !important;

  border: 1px solid rgba(0, 0, 0, 0.08) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .sb-search-box svg {

  color: #64748b !important;

}



html[data-theme="light"] .sb-search-box input,

html[data-theme="light"] #conv-search {

  background: transparent !important;

  background-color: transparent !important;

  color: #0f172a !important;

  border: none !important;

}



html[data-theme="light"] .sb-search-box input::placeholder,

html[data-theme="light"] #conv-search::placeholder {

  color: #94a3b8 !important;

}



/* 15.8 Klasörler */

html[data-theme="light"] .gx-folder-panel {

  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;

  background: transparent !important;

}



html[data-theme="light"] .gx-folder-header {

  color: #64748b !important;

  background: transparent !important;

}



html[data-theme="light"] .gx-folder-add-btn {

  border: 1px solid rgba(0, 0, 0, 0.12) !important;

  color: #64748b !important;

  background: transparent !important;

}



html[data-theme="light"] .gx-folder-add-btn:hover {

  background: rgba(0, 0, 0, 0.05) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .gx-folder-item {

  color: #334155 !important;

  background: transparent !important;

}



html[data-theme="light"] .gx-folder-item:hover {

  background: rgba(0, 0, 0, 0.04) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .gx-folder-item.open {

  color: #0f172a !important;

  font-weight: 500 !important;

}



html[data-theme="light"] .gx-folder-count {

  background: rgba(99, 102, 241, 0.1) !important;

  color: #4f46e5 !important;

}



html[data-theme="light"] .gx-folder-conv-item {

  color: #475569 !important;

  background: transparent !important;

}



html[data-theme="light"] .gx-folder-conv-item:hover {

  background: rgba(0, 0, 0, 0.04) !important;

  color: #0f172a !important;

}



/* 15.9 Sidebar Footer & Kullanım Alanı */

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

html[data-theme="light"] .sidebar-bottom {

  background: #ffffff !important;

  background-color: #ffffff !important;

  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;

}



html[data-theme="light"] .sb-usage-bar-wrap {

  background: #f8fafc !important;

  background-color: #f8fafc !important;

  border-radius: 8px !important;

  border: 1px solid rgba(0, 0, 0, 0.05) !important;

}



html[data-theme="light"] .sb-usage-bar-label {

  color: #64748b !important;

}



html[data-theme="light"] .sb-usage-bar-nums {

  color: #475569 !important;

}



html[data-theme="light"] .sb-usage-bar-track {

  background: #e2e8f0 !important;

  background-color: #e2e8f0 !important;

}



html[data-theme="light"] .sb-usage-bar-fill {

  background: linear-gradient(90deg, #6366f1, #818cf8) !important;

}



html[data-theme="light"] .sb-upgrade-btn {

  background: rgba(99, 102, 241, 0.08) !important;

  border: 1px solid rgba(99, 102, 241, 0.20) !important;

  color: #4f46e5 !important;

}



html[data-theme="light"] .sb-upgrade-btn:hover {

  background: rgba(99, 102, 241, 0.15) !important;

  color: #4338ca !important;

}



html[data-theme="light"] .sb-upgrade-btn svg {

  color: #4f46e5 !important;

}



html[data-theme="light"] .sb-renew-btn {

  background: rgba(245, 158, 11, 0.1) !important;

  border: 1px solid rgba(245, 158, 11, 0.25) !important;

  color: #b45309 !important;

}



/* 15.10 Kullanıcı Kartı & Menüsü */

html[data-theme="light"] .sidebar-user-item {

  background: transparent !important;

  background-color: transparent !important;

  color: #0f172a !important;

}



html[data-theme="light"] .sidebar-user-item:hover {

  background: rgba(0, 0, 0, 0.04) !important;

  background-color: rgba(0, 0, 0, 0.04) !important;

}



html[data-theme="light"] .user-name,

html[data-theme="light"] .sidebar-user-name {

  color: #0f172a !important;

}



html[data-theme="light"] .user-plan,

html[data-theme="light"] .sidebar-user-plan {

  color: #64748b !important;

}



html[data-theme="light"] .user-avatar {

  background: #e2e8f0 !important;

  background-color: #e2e8f0 !important;

  color: #0f172a !important;

}



html[data-theme="light"] .user-avatar-initials {

  background: linear-gradient(135deg, #6366f1, #818cf8) !important;

  color: #ffffff !important;

  -webkit-text-fill-color: #ffffff !important;

}



html[data-theme="light"] .user-menu {

  background: #ffffff !important;

  background-color: #ffffff !important;

  border: 1px solid rgba(0, 0, 0, 0.12) !important;

  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .user-menu-item {

  color: #334155 !important;

  background: transparent !important;

}



html[data-theme="light"] .user-menu-item svg {

  color: #64748b !important;

}



html[data-theme="light"] .user-menu-item:hover {

  background: rgba(0, 0, 0, 0.04) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .user-menu-item:hover svg {

  color: #0f172a !important;

}



html[data-theme="light"] .user-menu-divider {

  background: rgba(0, 0, 0, 0.08) !important;

  height: 1px !important;

}



html[data-theme="light"] .user-menu-danger {

  color: #ef4444 !important;

}



html[data-theme="light"] .user-menu-danger:hover {

  background: rgba(239, 68, 68, 0.08) !important;

  color: #dc2626 !important;

}



/* 15.11 Misafir CTA Alanı */

html[data-theme="light"] .sidebar-guest-auth {

  background: transparent !important;

}



html[data-theme="light"] .sgcta-card {

  background: rgba(99, 102, 241, 0.05) !important;

  background-color: rgba(99, 102, 241, 0.05) !important;

  border: 1px solid rgba(99, 102, 241, 0.15) !important;

}



html[data-theme="light"] .sgcta-text strong {

  color: #0f172a !important;

}



html[data-theme="light"] .sgcta-text span {

  color: #64748b !important;

}



html[data-theme="light"] .btn-sidebar-login-sm {

  background: #f1f5f9 !important;

  background-color: #f1f5f9 !important;

  border: 1px solid rgba(0, 0, 0, 0.10) !important;

  color: #334155 !important;

}



html[data-theme="light"] .btn-sidebar-login-sm:hover {

  background: #e2e8f0 !important;

  background-color: #e2e8f0 !important;

  color: #0f172a !important;

}



html[data-theme="light"] .btn-sidebar-register-sm {

  background: #6366f1 !important;

  background-color: #6366f1 !important;

  color: #ffffff !important;

  border: none !important;

}



html[data-theme="light"] .btn-sidebar-register-sm:hover {

  background: #4f46e5 !important;

  background-color: #4f46e5 !important;

}



/* 15.12 Image Studio Sidebar */

html[data-theme="light"] .ig-proj-item {

  background: transparent !important;

  color: #334155 !important;

}



html[data-theme="light"] .ig-proj-item:hover {

  background: rgba(0, 0, 0, 0.04) !important;

  color: #0f172a !important;

}



html[data-theme="light"] .ig-proj-item.active {

  background: rgba(99, 102, 241, 0.08) !important;

  color: #4f46e5 !important;

}



html[data-theme="light"] .ig-proj-del,

html[data-theme="light"] .ig-proj-rename {

  color: #64748b !important;

}



/* 15.13 Kaydırma Çubuğu */

html[data-theme="light"] .sidebar-conversations::-webkit-scrollbar-thumb {

  background: rgba(0, 0, 0, 0.15) !important;

}



html[data-theme="light"] .sidebar-conversations::-webkit-scrollbar-thumb:hover {

  background: rgba(0, 0, 0, 0.25) !important;

}



html[data-theme="light"] .sidebar-conversations::-webkit-scrollbar-track {

  background: transparent !important;

}









/* ==========================================================

   REASONING & THINKING PROCESS (DeepSeek R1, o1, o3, Claude)

   ========================================================== */

.gx-reasoning-block {

  margin: 12px 0 16px 0;

  width: 100%;

}

.gx-reasoning-details {

  background: var(--bg-surface, rgba(255, 255, 255, 0.03));

  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));

  border-radius: var(--radius-md, 12px);

  overflow: hidden;

  transition: border-color var(--transition-fast), background-color var(--transition-fast);

}

[data-theme="light"] .gx-reasoning-details {

  background: rgba(0, 0, 0, 0.02);

  border-color: rgba(0, 0, 0, 0.08);

}

.gx-reasoning-details[open] {

  background: var(--bg-surface, rgba(255, 255, 255, 0.04));

  border-color: var(--border-hover, rgba(255, 255, 255, 0.14));

}

.gx-reasoning-summary {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 10px 14px;

  cursor: pointer;

  user-select: none;

  font-size: 0.84rem;

  font-weight: 500;

  color: var(--text-secondary, #9ca3af);

  list-style: none;

  transition: color var(--transition-fast);

}

.gx-reasoning-summary::-webkit-details-marker {

  display: none;

}

.gx-reasoning-summary:hover {

  color: var(--text-primary, #f3f4f6);

}

.gx-reasoning-icon {

  flex-shrink: 0;

  color: var(--accent, #6366f1);

}

.gx-reasoning-chevron {

  margin-left: auto;

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

  color: var(--text-muted, #6b7280);

}

.gx-reasoning-details[open] .gx-reasoning-chevron {

  transform: rotate(180deg);

}

.gx-reasoning-content {

  padding: 8px 16px 14px 16px;

  font-size: 0.85rem;

  line-height: 1.6;

  color: var(--text-muted, #9ca3af);

  border-top: 1px dashed var(--border-subtle, rgba(255, 255, 255, 0.06));

}

[data-theme="light"] .gx-reasoning-content {

  border-top-color: rgba(0, 0, 0, 0.06);

  color: #4b5563;

}

@keyframes gxPulseGlow {

  0%, 100% { opacity: 0.6; transform: scale(0.96); }

  50% { opacity: 1; transform: scale(1.05); }

}

.gx-pulse-icon {

  animation: gxPulseGlow 1.8s ease-in-out infinite;

}





/* ==========================================================

   16. ULTRA MODERN 2026 UI DESIGN SYSTEM OVERHAUL

   Inspired by OpenAI ChatGPT o3/Canvas, Anthropic Claude 3.7 & Linear.

   Fully mobile & desktop responsive, 9 dynamic accents, true dark & light.

   ========================================================== */



/* ── 16.1 Glassmorphic Topbar (ChatGPT Clean Proportions) ── */

#topbar,

header.topbar,

.topbar,

.inner-topbar {

  height: 50px !important;

  min-height: 50px !important;

  background: var(--glass-bg, rgba(14, 15, 20, 0.88)) !important;

  backdrop-filter: blur(20px) !important;

  -webkit-backdrop-filter: blur(20px) !important;

  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.07)) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding: 0 14px !important;

  z-index: var(--z-topbar, 100) !important;

  transition: background-color var(--transition-fast), border-color var(--transition-fast) !important;

}



[data-theme="light"] #topbar,

[data-theme="light"] header.topbar,

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

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

  border-bottom-color: rgba(0, 0, 0, 0.08) !important;

}



/* Model Selector Dropdown Pill (ChatGPT Style) */

.tb-model-selector,

#tb-model-btn,

.tb-model-pill,

#input-model-pill {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  height: 32px !important;

  padding: 0 10px !important;

  background: transparent !important;

  border: 1px solid transparent !important;

  border-radius: 8px !important;

  color: var(--text-primary, #f3f4f6) !important;

  font-size: 0.84rem !important;

  font-weight: 550 !important;

  cursor: pointer !important;

  transition: all var(--transition-fast) !important;

  box-shadow: none !important;

}



.tb-model-selector:hover,

#tb-model-btn:hover,

.tb-model-pill:hover,

#input-model-pill:hover {

  background: var(--bg-hover, rgba(255, 255, 255, 0.06)) !important;

  border-color: var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;

  color: var(--text-primary, #f3f4f6) !important;

  transform: none !important;

}



[data-theme="light"] .tb-model-selector,

[data-theme="light"] #tb-model-btn,

[data-theme="light"] .tb-model-pill,

[data-theme="light"] #input-model-pill {

  color: #0f172a !important;

}



[data-theme="light"] .tb-model-selector:hover,

[data-theme="light"] #tb-model-btn:hover,

[data-theme="light"] .tb-model-pill:hover,

[data-theme="light"] #input-model-pill:hover {

  background: rgba(0, 0, 0, 0.05) !important;

  border-color: rgba(0, 0, 0, 0.08) !important;

}



/* Topbar Icon Buttons */

.tb-btn,

.tb-action-btn,

#btn-sidebar-toggle,

#btn-new-chat-top,

#tb-search-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 34px !important;

  height: 34px !important;

  min-width: 34px !important;

  min-height: 34px !important;

  border-radius: 8px !important;

  background: transparent !important;

  border: none !important;

  color: var(--text-secondary, #9ca3af) !important;

  cursor: pointer !important;

  transition: all var(--transition-fast) !important;

}



.tb-btn:hover,

.tb-action-btn:hover,

#btn-sidebar-toggle:hover,

#btn-new-chat-top:hover,

#tb-search-btn:hover {

  background: var(--bg-hover, rgba(255, 255, 255, 0.07)) !important;

  color: var(--text-primary, #f3f4f6) !important;

}



[data-theme="light"] .tb-btn,

[data-theme="light"] .tb-action-btn,

[data-theme="light"] #btn-sidebar-toggle,

[data-theme="light"] #btn-new-chat-top,

[data-theme="light"] #tb-search-btn {

  color: #475569 !important;

}



[data-theme="light"] .tb-btn:hover,

[data-theme="light"] .tb-action-btn:hover,

[data-theme="light"] #btn-sidebar-toggle:hover,

[data-theme="light"] #btn-new-chat-top:hover,

[data-theme="light"] #tb-search-btn:hover {

  background: rgba(0, 0, 0, 0.05) !important;

  color: #0f172a !important;

}



.tb-btn svg,

.tb-action-btn svg,

#btn-sidebar-toggle svg,

#btn-new-chat-top svg,

#tb-search-btn svg {

  width: 17px !important;

  height: 17px !important;

}



/* ── 16.2 Modern Chat Composer (ChatGPT Sizing & Floating Container) ── */

#input-area,

.input-area,

.chat-input-area {

  padding: 6px 14px max(14px, env(safe-area-inset-bottom, 14px)) !important;

  background: transparent !important;

  flex-shrink: 0 !important;

  z-index: 25 !important;

  position: relative !important;

}



.input-container,

#chat-input-container,

.gx-gemini-bar,

.gx-work-box {

  width: 100% !important;

  max-width: 740px !important;

  margin: 0 auto !important;

  background: var(--bg-surface-elevated, #212121) !important;

  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.09)) !important;

  border-radius: 26px !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22) !important;

  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;

  position: relative !important;

  box-sizing: border-box !important;

  overflow: visible !important;

}



.input-container:focus-within,

#chat-input-container:focus-within,

.gx-gemini-bar:focus-within,

.gx-work-box:focus-within {

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

  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.04), 0 6px 24px rgba(0, 0, 0, 0.28) !important;

}



[data-theme="light"] .input-container,

[data-theme="light"] #chat-input-container,

[data-theme="light"] .gx-gemini-bar,

[data-theme="light"] .gx-work-box {

  background: #ffffff !important;

  border-color: rgba(0, 0, 0, 0.10) !important;

  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05) !important;

}



[data-theme="light"] .input-container:focus-within,

[data-theme="light"] #chat-input-container:focus-within,

[data-theme="light"] .gx-gemini-bar:focus-within,

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

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

  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.03), 0 6px 20px rgba(0, 0, 0, 0.08) !important;

}



/* Textareas in composer */

#message-input,

#gx-work-textarea,

.gx-composer-textarea {

  width: 100% !important;

  background: transparent !important;

  border: none !important;

  outline: none !important;

  box-shadow: none !important;

  color: var(--text-primary, #f3f4f6) !important;

  font-family: var(--font-sans) !important;

  font-size: 0.94rem !important;

  line-height: 1.5 !important;

  padding: 8px 12px 6px !important;

  resize: none !important;

  min-height: 28px !important;

  max-height: 200px !important;

  box-sizing: border-box !important;

}



[data-theme="light"] #message-input,

[data-theme="light"] #gx-work-textarea,

[data-theme="light"] .gx-composer-textarea {

  color: #0f172a !important;

}



/* Add Button (+) */

.gx-plus-btn,

#input-add-btn,

.itb-add-btn,

#gx-work-add-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 32px !important;

  height: 32px !important;

  min-width: 32px !important;

  min-height: 32px !important;

  border-radius: 50% !important;

  background: var(--bg-hover, rgba(255, 255, 255, 0.06)) !important;

  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;

  color: var(--text-secondary, #9ca3af) !important;

  cursor: pointer !important;

  transition: all var(--transition-fast) !important;

}



.gx-plus-btn:hover,

#input-add-btn:hover,

.itb-add-btn:hover,

#gx-work-add-btn:hover {

  background: var(--bg-active, rgba(255, 255, 255, 0.12)) !important;

  color: var(--text-primary, #ffffff) !important;

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

  transform: scale(1.04) !important;

}



.gx-plus-btn svg,

#input-add-btn svg,

.itb-add-btn svg,

#gx-work-add-btn svg {

  width: 16px !important;

  height: 16px !important;

}



[data-theme="light"] .gx-plus-btn,

[data-theme="light"] #input-add-btn,

[data-theme="light"] .itb-add-btn,

[data-theme="light"] #gx-work-add-btn {

  background: #f1f5f9 !important;

  border-color: rgba(0, 0, 0, 0.08) !important;

  color: #475569 !important;

}



[data-theme="light"] .gx-plus-btn:hover,

[data-theme="light"] #input-add-btn:hover,

[data-theme="light"] .itb-add-btn:hover,

[data-theme="light"] #gx-work-add-btn:hover {

  background: #e2e8f0 !important;

  color: #0f172a !important;

}



/* Send Button (ChatGPT Modern Circular Button) */

#btn-send,

.input-send-btn,

#gx-work-send-btn,

.gx-work-send {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 32px !important;

  height: 32px !important;

  min-width: 32px !important;

  min-height: 32px !important;

  border-radius: 50% !important;

  background: #ffffff !important;

  border: none !important;

  color: #000000 !important;

  cursor: pointer !important;

  transition: all var(--transition-fast) !important;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;

}



#btn-send svg,

.input-send-btn svg,

#gx-work-send-btn svg,

.gx-work-send svg {

  width: 16px !important;

  height: 16px !important;

  stroke-width: 2.5 !important;

}



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

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

#gx-work-send-btn:hover:not(:disabled),

.gx-work-send:hover:not(:disabled) {

  opacity: 0.92 !important;

  transform: scale(1.05) !important;

}



#btn-send:disabled,

.input-send-btn:disabled,

#gx-work-send-btn:disabled,

.gx-work-send:disabled {

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

  color: rgba(255, 255, 255, 0.35) !important;

  opacity: 1 !important;

  cursor: not-allowed !important;

  transform: none !important;

  box-shadow: none !important;

}



[data-theme="light"] #btn-send,

[data-theme="light"] .input-send-btn,

[data-theme="light"] #gx-work-send-btn,

[data-theme="light"] .gx-work-send {

  background: #000000 !important;

  color: #ffffff !important;

}



[data-theme="light"] #btn-send:disabled,

[data-theme="light"] .input-send-btn:disabled,

[data-theme="light"] #gx-work-send-btn:disabled,

[data-theme="light"] .gx-work-send:disabled {

  background: rgba(0, 0, 0, 0.07) !important;

  color: rgba(0, 0, 0, 0.28) !important;

}



/* Mic Button */

#gx-work-mic-btn,

.gx-work-bar-icon,

.gx-mic-visible-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 32px !important;

  height: 32px !important;

  border-radius: 50% !important;

  background: transparent !important;

  border: none !important;

  color: var(--text-secondary, #9ca3af) !important;

  cursor: pointer !important;

  transition: all var(--transition-fast) !important;

}



#gx-work-mic-btn:hover,

.gx-work-bar-icon:hover,

.gx-mic-visible-btn:hover {

  background: var(--bg-hover, rgba(255, 255, 255, 0.08)) !important;

  color: var(--text-primary, #ffffff) !important;

}



#gx-work-mic-btn svg,

.gx-work-bar-icon svg,

.gx-mic-visible-btn svg {

  width: 16px !important;

  height: 16px !important;

}



/* Tool Pills in Composer (Search, Reason, Project, Files) */

.itb-tool-pill,

.gx-work-bar-pill {

  display: inline-flex !important;

  align-items: center !important;

  gap: 5px !important;

  height: 28px !important;

  padding: 0 10px !important;

  border-radius: 9999px !important;

  background: var(--bg-hover, rgba(255, 255, 255, 0.05)) !important;

  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.07)) !important;

  color: var(--text-secondary, #9ca3af) !important;

  font-size: 0.77rem !important;

  font-weight: 500 !important;

  cursor: pointer !important;

  transition: all var(--transition-fast) !important;

}



.itb-tool-pill:hover,

.gx-work-bar-pill:hover {

  background: var(--bg-active, rgba(255, 255, 255, 0.10)) !important;

  color: var(--text-primary, #f3f4f6) !important;

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

}



.itb-tool-pill svg,

.gx-work-bar-pill svg {

  width: 13px !important;

  height: 13px !important;

}



[data-theme="light"] .itb-tool-pill,

[data-theme="light"] .gx-work-bar-pill {

  background: #f1f5f9 !important;

  border-color: rgba(0, 0, 0, 0.08) !important;

  color: #475569 !important;

}



[data-theme="light"] .itb-tool-pill:hover,

[data-theme="light"] .gx-work-bar-pill:hover {

  background: #e2e8f0 !important;

  color: #0f172a !important;

}



/* ── 16.3 Modern Chat Messages & Bubbles ── */

.msg-wrapper,

.message-wrapper {

  padding: 12px 18px !important;

  gap: 12px !important;

  max-width: 740px !important;

  margin: 0 auto !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



.msg-wrapper.user .msg-bubble,

.user-message .msg-bubble {

  background: var(--bg-surface-elevated, #2f2f2f) !important;

  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06)) !important;

  border-radius: 20px !important;

  color: var(--text-primary, #f3f4f6) !important;

  padding: 10px 16px !important;

  font-size: 0.93rem !important;

  line-height: 1.52 !important;

  max-width: 72% !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;

}



[data-theme="light"] .msg-wrapper.user .msg-bubble,

[data-theme="light"] .user-message .msg-bubble {

  background: #f4f4f5 !important;

  border-color: rgba(0, 0, 0, 0.06) !important;

  color: #0f172a !important;

}



.msg-wrapper.bot,

.assistant-message {

  font-size: 0.94rem !important;

  line-height: 1.65 !important;

  color: var(--text-primary, #f3f4f6) !important;

}



/* ── 16.4 Modern Welcome Screen & Suggestion Cards (ChatGPT Pure Aesthetics) ── */

#welcome-screen,

.welcome-screen,

.gx-work-welcome {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  width: 100% !important;

  max-width: 740px !important;

  margin: 0 auto !important;

  padding: 24px 16px 16px !important;

  box-sizing: border-box !important;

}



.gx-hero-img-wrap {

  position: relative !important;

  margin-bottom: 12px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

}



.gx-hero-img-wrap::after {

  content: '' !important;

  position: absolute !important;

  inset: -15px !important;

  background: radial-gradient(circle, var(--accent-soft, rgba(99, 102, 241, 0.12)) 0%, transparent 70%) !important;

  border-radius: 50% !important;

  z-index: -1 !important;

  pointer-events: none !important;

}



.gx-hero-avatar {

  width: 38px !important;

  height: 38px !important;

  min-width: 38px !important;

  min-height: 38px !important;

  border-radius: 50% !important;

  overflow: hidden !important;

  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;

}



[data-theme="light"] .gx-hero-avatar {

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

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

}



.gx-hero-img {

  max-height: 36px !important;

  max-width: 120px !important;

  object-fit: contain !important;

}



/* Welcome Title (ChatGPT Size & Weight - Balanced & Responsive) */

.gx-work-title,

.welcome-title {

  font-size: clamp(1.22rem, 2.2vw, 1.55rem) !important;

  font-weight: 600 !important;

  color: var(--text-primary, #f3f4f6) !important;

  letter-spacing: -0.02em !important;

  line-height: 1.32 !important;

  margin: 0 0 6px !important;

  text-align: center !important;

  max-width: min(92vw, 640px) !important;

  text-wrap: balance !important;

}



.gx-work-subtitle,

.welcome-subtitle {

  font-size: clamp(0.82rem, 1.3vw, 0.90rem) !important;

  font-weight: 400 !important;

  color: var(--text-secondary, #94a3b8) !important;

  margin: 0 0 16px !important;

  text-align: center !important;

  max-width: min(90vw, 520px) !important;

  line-height: 1.45 !important;

  text-wrap: balance !important;

}



[data-theme="light"] .gx-work-title,

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

  color: #0f172a !important;

}



[data-theme="light"] .gx-work-subtitle,

[data-theme="light"] .welcome-subtitle {

  color: #64748b !important;

}



/* Suggestion Pills (ChatGPT Horizontal / Capsule Cards) */

.welcome-suggestions,

.wsg-grid,

.gx-work-suggs {

  display: flex !important;

  flex-wrap: wrap !important;

  justify-content: center !important;

  gap: 8px !important;

  width: 100% !important;

  max-width: 740px !important;

  margin: 14px auto 0 !important;

  padding: 0 4px !important;

  box-sizing: border-box !important;

}



.wsg-card,

.prompt-suggestion,

.gx-work-sugg {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 7px 14px !important;

  min-height: 36px !important;

  background: var(--bg-surface, rgba(255, 255, 255, 0.04)) !important;

  border: 1px solid var(--border-default, rgba(255, 255, 255, 0.08)) !important;

  border-radius: 9999px !important; /* sleek pill shape */

  color: var(--text-secondary, #9ca3af) !important;

  cursor: pointer !important;

  text-align: left !important;

  font-size: 0.80rem !important;

  font-weight: 500 !important;

  transition: all 0.15s ease !important;

  box-shadow: none !important;

  transform: none !important;

}



.wsg-card:hover,

.prompt-suggestion:hover,

.gx-work-sugg:hover {

  background: var(--bg-hover, rgba(255, 255, 255, 0.08)) !important;

  border-color: var(--accent, #6366f1) !important;

  color: var(--text-primary, #f3f4f6) !important;

  transform: translateY(-1px) !important;

}



[data-theme="light"] .wsg-card,

[data-theme="light"] .prompt-suggestion,

[data-theme="light"] .gx-work-sugg {

  background: #ffffff !important;

  border-color: rgba(0, 0, 0, 0.09) !important;

  color: #475569 !important;

}



[data-theme="light"] .wsg-card:hover,

[data-theme="light"] .prompt-suggestion:hover,

[data-theme="light"] .gx-work-sugg:hover {

  background: #f8fafc !important;

  border-color: var(--accent, #6366f1) !important;

  color: #0f172a !important;

}



.gx-work-sugg-ico {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 18px !important;

  height: 18px !important;

  min-width: 18px !important;

  min-height: 18px !important;

  background: transparent !important;

  border: none !important;

  padding: 0 !important;

}



.gx-work-sugg-ico img {

  width: 15px !important;

  height: 15px !important;

  border-radius: 3px !important;

}



.gx-work-sugg-txt {

  font-size: 0.80rem !important;

  font-weight: 500 !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  max-width: 250px !important;

}



/* ── 16.5 Modern Sidebar Architecture (ChatGPT Dimensions) ── */

#sidebar,

aside.sidebar,

.glomax-sidebar {

  width: 260px !important;

  background: var(--bg-sidebar, #171717) !important;

  border-right: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.07)) !important;

}



[data-theme="light"] #sidebar,

[data-theme="light"] aside.sidebar,

[data-theme="light"] .glomax-sidebar {

  background: #f9f9f9 !important;

  border-right-color: rgba(0, 0, 0, 0.08) !important;

}



/* New Chat Button */

#btn-new-chat,

.sb-new-chat-btn,

.btn-new-chat {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  height: 36px !important;

  padding: 0 12px !important;

  margin: 10px 10px 12px !important;

  background: transparent !important;

  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08)) !important;

  border-radius: 8px !important;

  color: var(--text-primary, #f3f4f6) !important;

  font-weight: 500 !important;

  font-size: 0.84rem !important;

  cursor: pointer !important;

  transition: all var(--transition-fast) !important;

  box-shadow: none !important;

}



#btn-new-chat:hover,

.sb-new-chat-btn:hover,

.btn-new-chat:hover {

  background: var(--bg-hover, rgba(255, 255, 255, 0.07)) !important;

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

  color: #ffffff !important;

  transform: none !important;

  box-shadow: none !important;

}



[data-theme="light"] #btn-new-chat,

[data-theme="light"] .sb-new-chat-btn,

[data-theme="light"] .btn-new-chat {

  background: transparent !important;

  border-color: rgba(0, 0, 0, 0.09) !important;

  color: #0f172a !important;

}



[data-theme="light"] #btn-new-chat:hover,

[data-theme="light"] .sb-new-chat-btn:hover,

[data-theme="light"] .btn-new-chat:hover {

  background: rgba(0, 0, 0, 0.05) !important;

  border-color: rgba(0, 0, 0, 0.14) !important;

}



/* Conversation Items */

.conv-item,

.conversation-item {

  height: 34px !important;

  border-radius: 8px !important;

  padding: 0 10px !important;

  margin: 1px 8px !important;

  color: var(--text-secondary, #9ca3af) !important;

  font-size: 0.84rem !important;

  font-weight: 450 !important;

  display: flex !important;

  align-items: center !important;

  transition: all var(--transition-fast) !important;

}



.conv-item:hover,

.conversation-item:hover {

  background: var(--bg-hover, rgba(255, 255, 255, 0.06)) !important;

  color: var(--text-primary, #f3f4f6) !important;

}



.conv-item.active,

.conversation-item.active {

  background: var(--bg-active, rgba(255, 255, 255, 0.10)) !important;

  color: var(--text-primary, #ffffff) !important;

  font-weight: 550 !important;

}



[data-theme="light"] .conv-item:hover,

[data-theme="light"] .conversation-item:hover {

  background: rgba(0, 0, 0, 0.05) !important;

  color: #0f172a !important;

}



[data-theme="light"] .conv-item.active,

[data-theme="light"] .conversation-item.active {

  background: rgba(0, 0, 0, 0.08) !important;

  color: #0f172a !important;

}



/* ── 16.6 Full Mobile Responsiveness Stack ── */

@media (max-width: 768px) {

  :root {

    --sidebar-width: 100%;

    --topbar-height: 48px;

  }



  html, body, #main, .main-content, #chat-area, #messages {

    max-width: 100vw !important;

    overflow-x: hidden !important;

  }



  /* Mobile Topbar */

  #topbar,

  header.topbar,

  .topbar {

    height: 48px !important;

    min-height: 48px !important;

    padding: 0 10px !important;

  }



  /* Mobile Drawer Sidebar */

  #sidebar,

  aside.sidebar,

  .app-with-sidebar > aside {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    width: min(85vw, 290px) !important;

    max-width: 290px !important;

    height: 100dvh !important;

    z-index: 10001 !important;

    transform: translateX(-100%) !important;

    visibility: hidden !important;

    transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.26s !important;

    box-shadow: none !important;

  }



  body.sidebar-open #sidebar,

  body.sidebar-open aside.sidebar,

  #sidebar.open {

    transform: translateX(0) !important;

    visibility: visible !important;

    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8) !important;

  }



  #sidebar-overlay,

  .sidebar-overlay {

    position: fixed !important;

    inset: 0 !important;

    background: rgba(0, 0, 0, 0.65) !important;

    backdrop-filter: blur(8px) !important;

    -webkit-backdrop-filter: blur(8px) !important;

    z-index: 10000 !important;

  }



  /* Mobile Welcome */

  #welcome-screen,

  .welcome-screen,

  .gx-work-welcome {

    padding: 16px 12px 12px !important;

  }



  .gx-work-title,

  .welcome-title {

    font-size: 1.20rem !important;

    margin-bottom: 3px !important;

  }



  .gx-work-subtitle,

  .welcome-subtitle {

    font-size: 0.78rem !important;

    margin-bottom: 12px !important;

  }



  .gx-hero-avatar {

    width: 34px !important;

    height: 34px !important;

    min-width: 34px !important;

    min-height: 34px !important;

  }



  .gx-hero-img {

    max-height: 30px !important;

    max-width: 100px !important;

  }



  /* Mobile Composer Pinned */

  #input-area,

  .input-area {

    padding: 6px 8px max(8px, env(safe-area-inset-bottom, 8px)) !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }



  .input-container,

  #chat-input-container,

  .gx-gemini-bar,

  .gx-work-box {

    border-radius: 22px !important;

    padding: 4px 6px !important;

    width: calc(100% - 8px) !important;

  }



  #message-input,

  #gx-work-textarea {

    padding: 6px 8px !important;

    font-size: 0.90rem !important;

  }



  /* Mobile Suggestion Pills */

  .welcome-suggestions,

  .wsg-grid,

  .gx-work-suggs {

    gap: 6px !important;

    padding: 0 4px !important;

  }



  .wsg-card,

  .prompt-suggestion,

  .gx-work-sugg {

    padding: 6px 12px !important;

    min-height: 32px !important;

    font-size: 0.76rem !important;

  }



  .gx-work-sugg-txt {

    max-width: 180px !important;

    font-size: 0.76rem !important;

  }



  /* Message Rows on Mobile */

  .msg-wrapper,

  .message-wrapper {

    padding: 8px 12px !important;

    gap: 8px !important;

  }



  .msg-wrapper.user .msg-bubble,

  .user-message .msg-bubble {

    max-width: 86% !important;

    padding: 8px 12px !important;

    font-size: 0.90rem !important;

  }



  /* Touch Targets */

  button,

  .btn-icon,

  .msg-act-btn,

  .gx-plus-btn,

  #btn-send,

  .input-send-btn {

    touch-action: manipulation;

  }

}





/* ── Central Button & Icon Contrast Standards (Desktop & Mobile) ── */

button svg,

.btn-icon svg,

.itb-tool-pill svg,

.gx-work-bar-pill svg,

.itb-add-btn svg,

.gx-plus-btn svg,

.gx-work-bar-btn svg,

.gx-work-bar-icon svg {

  stroke: currentColor;

  fill: none;

}



/* Send Buttons (Dark & Light Theme) */

#btn-send,

.input-send-btn,

.input-send-inline,

#gx-work-send-btn,

.gx-work-send {

  background: #ffffff !important;

  color: #0e0f14 !important;

  border: none !important;

  cursor: pointer !important;

}



#btn-send svg,

.input-send-btn svg,

.input-send-inline svg,

#gx-work-send-btn svg,

.gx-work-send svg {

  stroke: currentColor !important;

  fill: none !important;

}



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

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

#gx-work-send-btn:hover:not(:disabled),

.gx-work-send:hover:not(:disabled) {

  opacity: 0.92 !important;

  transform: scale(1.04) !important;

}



#btn-send:disabled,

.input-send-btn:disabled,

.input-send-inline:disabled,

#gx-work-send-btn:disabled,

.gx-work-send:disabled {

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

  color: rgba(255, 255, 255, 0.35) !important;

  opacity: 1 !important;

  cursor: not-allowed !important;

  transform: none !important;

}



[data-theme="light"] #btn-send,

[data-theme="light"] .input-send-btn,

[data-theme="light"] .input-send-inline,

[data-theme="light"] #gx-work-send-btn,

[data-theme="light"] .gx-work-send {

  background: #0f172a !important;

  color: #ffffff !important;

}



[data-theme="light"] #btn-send:disabled,

[data-theme="light"] .input-send-btn:disabled,

[data-theme="light"] .input-send-inline:disabled,

[data-theme="light"] #gx-work-send-btn:disabled,

[data-theme="light"] .gx-work-send:disabled {

  background: rgba(0, 0, 0, 0.07) !important;

  color: rgba(0, 0, 0, 0.28) !important;

}



/* Stop Button */

#stop-btn,

.input-stop-btn {

  background: rgba(239, 68, 68, 0.20) !important;

  color: #f87171 !important;

  border: 1px solid rgba(239, 68, 68, 0.35) !important;

}

#stop-btn svg,

.input-stop-btn svg {

  fill: currentColor !important;

  stroke: none !important;

}

[data-theme="light"] #stop-btn,

[data-theme="light"] .input-stop-btn {

  background: rgba(239, 68, 68, 0.12) !important;

  color: #dc2626 !important;

  border-color: rgba(239, 68, 68, 0.25) !important;

}



/* Plus / Add Buttons */

#input-add-btn,

.gx-plus-btn,

.itb-add-btn,

#gx-work-add-btn,

.gx-work-bar-btn {

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

  color: var(--text-primary, #f3f4f6) !important;

  border: 1px solid rgba(255, 255, 255, 0.12) !important;

}

#input-add-btn:hover,

.gx-plus-btn:hover,

#gx-work-add-btn:hover,

.gx-work-bar-btn:hover {

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

  color: #ffffff !important;

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

}

[data-theme="light"] #input-add-btn,

[data-theme="light"] .gx-plus-btn,

[data-theme="light"] .itb-add-btn,

[data-theme="light"] #gx-work-add-btn,

[data-theme="light"] .gx-work-bar-btn {

  background: #f1f5f9 !important;

  color: #0f172a !important;

  border-color: rgba(0, 0, 0, 0.08) !important;

}

[data-theme="light"] #input-add-btn:hover,

[data-theme="light"] .gx-plus-btn:hover,

[data-theme="light"] #gx-work-add-btn:hover,

[data-theme="light"] .gx-work-bar-btn:hover {

  background: #e2e8f0 !important;

  color: #0f172a !important;

  border-color: rgba(0, 0, 0, 0.15) !important;

}



/* Microphone Buttons */

#gx-main-mic-btn,

#gx-work-mic-btn,

.gx-mic-btn,

.input-mic-btn,

.gx-work-bar-icon,

.gx-mic-visible-btn {

  color: var(--text-secondary, #9ca3af) !important;

}

#gx-main-mic-btn:hover,

#gx-work-mic-btn:hover,

.gx-mic-btn:hover,

.gx-mic-visible-btn:hover {

  color: #ffffff !important;

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

}

[data-theme="light"] #gx-main-mic-btn,

[data-theme="light"] #gx-work-mic-btn,

[data-theme="light"] .gx-mic-btn,

[data-theme="light"] .input-mic-btn,

[data-theme="light"] .gx-work-bar-icon,

[data-theme="light"] .gx-mic-visible-btn {

  color: var(--text-secondary, #475569) !important;

}

[data-theme="light"] #gx-main-mic-btn:hover,

[data-theme="light"] #gx-work-mic-btn:hover,

[data-theme="light"] .gx-mic-btn:hover,

[data-theme="light"] .gx-mic-visible-btn:hover {

  color: #0f172a !important;

  background: #f1f5f9 !important;

}



/* Reasoning Trigger Button (Pro Accounts) */

#rl-trigger-btn,

.rl-trigger {

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

  color: var(--text-secondary, #9ca3af) !important;

  border: 1px solid rgba(255, 255, 255, 0.10) !important;

  border-radius: 10px !important;

  transition: all var(--transition-fast) !important;

}

#rl-trigger-btn:hover,

.rl-trigger:hover {

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

  color: #f3f4f6 !important;

}

[data-theme="light"] #rl-trigger-btn,

[data-theme="light"] .rl-trigger {

  background: #f1f5f9 !important;

  color: var(--text-secondary, #475569) !important;

  border-color: rgba(0, 0, 0, 0.08) !important;

}

[data-theme="light"] #rl-trigger-btn:hover,

[data-theme="light"] .rl-trigger:hover {

  background: #e2e8f0 !important;

  color: #0f172a !important;

}



/* Tool Pills in Composer */

.gx-work-bar-pill,

.itb-tool-pill {

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

  color: var(--text-secondary, #9ca3af) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

}

.gx-work-bar-pill:hover,

.itb-tool-pill:hover {

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

  color: #ffffff !important;

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

}

[data-theme="light"] .gx-work-bar-pill,

[data-theme="light"] .itb-tool-pill {

  background: #f1f5f9 !important;

  color: var(--text-secondary, #475569) !important;

  border-color: rgba(0, 0, 0, 0.08) !important;

}

[data-theme="light"] .gx-work-bar-pill:hover,

[data-theme="light"] .itb-tool-pill:hover {

  background: #e2e8f0 !important;

  color: #0f172a !important;

  border-color: rgba(0, 0, 0, 0.14) !important;

}





/* ── Unified Action Group (.gx-bar-right) ── */

.gx-bar-right {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  flex: 0 0 auto !important;

  min-width: 0 !important;

}



/* Never show duplicate injected mobile mic */

.gx-bar-right .gx-mobile-mic {

  display: none !important;

}



.gx-bar-right #gx-main-mic-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  border: none;

  background: transparent;

  color: var(--text-secondary, #94a3b8);

  cursor: pointer;

  transition: all .15s ease;

}



.gx-bar-right #gx-main-mic-btn:hover {

  color: var(--text-primary, #ffffff);

  background: var(--bg-surface-elevated, rgba(255, 255, 255, 0.08));

}



.gx-bar-right #gx-main-mic-btn.recording {

  color: #ef4444 !important;

  animation: gx-mic-pulse 1.2s ease-in-out infinite !important;

}



[data-theme="light"] .gx-bar-right #gx-main-mic-btn {

  color: var(--text-secondary, #64748b);

}



[data-theme="light"] .gx-bar-right #gx-main-mic-btn:hover {

  color: var(--text-primary, #0f172a);

  background: rgba(0, 0, 0, 0.06);

}



/* Message controls stay visible and usable on touch screens and keyboard focus. */

#messages .message-actions {

  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  opacity: 1 !important;

  pointer-events: auto !important;

}



#messages .message-actions .msg-act-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-width: 36px !important;

  min-height: 36px !important;

  color: var(--text-secondary, #94a3b8) !important;

  touch-action: manipulation;

}



#messages .message-actions .msg-act-btn:focus-visible {

  outline: 2px solid var(--accent, #818cf8) !important;

  outline-offset: 2px !important;

}



@media (pointer: coarse) {

  #messages .message-actions .msg-act-btn {

    min-width: 44px !important;

    min-height: 44px !important;

  }

}