/* ===========================
   THEME: SOLARIZED LIGHT (adaptado con colores de logo)
   =========================== */

/* Override CSS variables for dark theme */
:root {
  /* Colors - Solarized Light theme */
  --black-true: var(--bg-main);
  --panel: var(--bg-panel);
  --panel-elevated: var(--bg-panel);
  --chat-bg: var(--bg-alt);
  --surface-glass: rgba(131, 148, 150, 0.15); /* base0 */
  --muted: var(--text-muted);
  --text: var(--text-main);
  --text-soft: rgba(101, 123, 131, 0.72); /* base00 */
  --accent: var(--link-active);
  --accent-weak: rgba(181, 137, 0, 0.18); /* yellow */
  --glass-border: var(--border);
  --accent-secondary: var(--logo-purple);

  /* Controls */
  --input-field-bg: var(--bg-panel);
  --button-icon-color: var(--text-main);

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 18px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;

  /* Radii */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-round: 50%;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* Gradients - Solarized theme */
  --gradient-accent: var(--accent);
  --gradient-dark-panel: var(--bg-panel);
  --gradient-chat: var(--bg-main);
  --gradient-accent-weak: var(--accent-weak);
  --gradient-primary: var(--logo-gradient-indigo-purple);

  /* Elevations (shadows) - Solarized theme */
  --elevation-1: 0 4px 12px var(--shadow);
  --elevation-2: 0 8px 20px var(--shadow);
  --elevation-3: 0 16px 38px var(--shadow);
  /* Status bar height for mobile */
  --status-bar-height: 0px;
}

/* Reset + system font stack (no externals) */
{{ ... }}
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* App layout */
.app {
  height: 100vh;
  display: flex;
  gap: 0;
}

/* Override existing components with dark theme */

/* Chat list sidebar - Dark theme */
.chat-list-sidebar {
  background: var(--bg-panel) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: var(--elevation-3) !important;
}

.sidebar-top-bar {
  background: linear-gradient(180deg, rgba(108, 113, 196, 0.12), transparent) !important; /* violet */
  border-bottom: 1px solid var(--border) !important;
}

.sidebar-title {
  color: var(--link-active) !important;
}

/* Messages - Dark theme */
.msg {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--elevation-2) !important;
}

.msg--user {
  background: var(--logo-gradient-indigo-purple) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 28px rgba(108, 113, 196, 0.18) !important; /* violet */
}

.msg--assistant {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.06), var(--elevation-2) !important;
}

.msg-content pre {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
}

/* Main chat area - Dark theme */
.chat-wrap {
  background: var(--bg-main) !important;
}

/* Messages container */
.messages {
  padding: 20px !important;
  gap: 12px !important;
}

/* Custom scrollbar for dark theme */
.messages::-webkit-scrollbar {
  width: 8px;
}

.messages::-webkit-scrollbar-thumb {
  background: var(--ui-muted);
  border-radius: 6px;
}

/* Input tray - Dark theme */
.input-tray {
  border-top: 1px solid var(--border) !important;
  background: transparent !important;
  padding: 12px !important;
  gap: 10px !important;
}

.input-tray__textarea {
  background: var(--bg-panel) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius) !important;
  padding: 10px 14px !important;
  font-size: 0.97rem !important;
  line-height: 1.35 !important;
  resize: none !important;
  min-height: 44px !important;
  max-height: 140px !important;
}

.input-tray__textarea::placeholder {
  color: var(--text-muted) !important;
}

.input-tray__textarea::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.input-tray__textarea {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Tray buttons - Dark theme */
.tray-btn {
  background: var(--bg-panel) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-round) !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.06), 3px 6px 14px var(--shadow) !important;
}

.tray-btn:hover {
  color: var(--link-active) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 30px rgba(181, 137, 0, 0.22), inset -1px -1px 2px rgba(255, 255, 255, 0.1) !important; /* yellow */
}

.tray-btn:active {
  transform: translateY(0) !important;
}

.tray-btn--primary.send-enabled {
  background: var(--logo-gradient-indigo-purple) !important;
  color: #fff !important;
  box-shadow: 0 10px 28px rgba(108, 113, 196, 0.22) !important; /* violet */
  border: 1px solid var(--border) !important;
}

/* New chat button - Dark theme */
.new-chat-btn {
  background: var(--logo-gradient-indigo-purple) !important;
  box-shadow: 0 4px 16px rgba(108, 113, 196, 0.28) !important; /* violet */
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes msgIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.995);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes blink {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.18;
  }
  40% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* Typing indicator - Dark theme */
.typing {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: var(--bg-panel);
  border: 1px solid var(--border);
}

.typing .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: blink 1s infinite ease-in-out;
}

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

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

/* Tall screens (height > width) - specific fix for the reported issue */
@media (max-aspect-ratio: 1/1) and (orientation: portrait) {
  .chat-list-sidebar {
    width: min(80vw, 380px) !important;
    max-width: min(80vw, 380px) !important;
    max-height: 90vh !important;
  }

  .chat-list-container {
    max-height: calc(90vh - 100px) !important;
  }
}

/* Very tall screens (height much greater than width) */
@media (max-aspect-ratio: 3/5) {
  .chat-list-sidebar {
    width: min(75vw, 320px) !important;
    max-width: min(75vw, 320px) !important;
    max-height: 85vh !important;
  }

  .chat-list-container {
    max-height: calc(85vh - 100px) !important;
  }
}

/* Ensure proper visibility and scrolling */
.chat-list-sidebar {
  transform: translateX(-100%) !important;
  transition: transform 0.3s ease !important;
}

.chat-list-sidebar.open {
  transform: translateX(0) !important;
}

.chat-list-container {
  overflow-y: auto !important;
  max-height: calc(100vh - 120px) !important;
  padding: 16px 12px !important;
}

/* Small utilities for dark theme */
.hidden {
  display: none !important;
}

/* Final responsive fixes */
.chat-list-sidebar {
  min-width: 280px !important;
  max-width: min(85vw, 450px) !important;
}

@media (orientation: portrait) {
  .chat-list-sidebar {
    width: min(85vw, 420px) !important;
    max-width: min(85vw, 420px) !important;
  }
}

@media (orientation: landscape) {
  .chat-list-sidebar {
    width: min(50vw, 500px) !important;
    max-width: min(50vw, 500px) !important;
  }
}

/* Ensure proper display when open */
.chat-list-sidebar.open {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}