/* === AIBA: Custom Styles  === */
/* Load font first (spec requires @import at top) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* -------------------- Variables & Base -------------------- */
:root {
  --aiba-accent: #111827;       /* near Tailwind gray-900 */
  --aiba-bg-dark: #0b0f19;      /* app dark background */
  --aiba-fg-dark: #e5e7eb;      /* app dark text (gray-200) */
  --aiba-bot-bg-dark: #111827;  /* bot bubble dark bg */
  --aiba-bot-fg-dark: #e5e7eb;  /* bot bubble dark fg */
  --aiba-bot-bg-light: #f3f4f6; /* bot bubble light bg (gray-100) */
  --aiba-bot-fg-light: #111827; /* bot bubble light text */
  --aiba-danger: #dc2626;       /* red-600 */
}

body {
  font-family: 'Inter', sans-serif;
}

/* App theme (JS toggles body.light-mode / body.dark-mode) */
body.light-mode {
  background-color: #ffffff;
  color: #111827;
}

body.dark-mode {
  background-color: var(--aiba-bg-dark);
  color: var(--aiba-fg-dark);
}

/* -------------------- Layout & Common -------------------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-spacer { height: 64px; }   /* helps avoid overlap with sticky footers */
.modal-open { overflow: hidden; }  /* prevent body scroll when modal open */

/* -------------------- Chat -------------------- */
#chat-container {
  overflow-y: auto;
  scroll-behavior: smooth;
}

/* Scrollbar (WebKit) */
#chat-container::-webkit-scrollbar { width: 6px; }
#chat-container::-webkit-scrollbar-track { background: #f1f1f1; }
#chat-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

/* Message rows */
.message { display: flex; }
.message.user { justify-content: flex-end; }
.message.bot  { justify-content: flex-start; }

/* Bubbles */
.bubble {
  border-radius: 1rem;
  padding: 0.75rem 1rem;
  max-width: 42ch;
  word-wrap: break-word;
}

.bubble.user {
  background: #111827;
  color: #ffffff;
  border-top-right-radius: 0.25rem;
}

.bubble.bot {
  background: var(--aiba-bot-bg-light);
  color: var(--aiba-bot-fg-light);
  border-top-left-radius: 0.25rem;
}

/* Bot bubble in dark mode */
body.dark-mode .bubble.bot {
  background: var(--aiba-bot-bg-dark);
  color: var(--aiba-bot-fg-dark);
}

/* -------------------- Inputs / Buttons -------------------- */
.input {
  background: #f3f4f6;
  border: 0;
  border-radius: .5rem;
  padding: .5rem .75rem;
}

.input:focus { outline: 2px solid var(--aiba-accent); }

.btn-danger { color: var(--aiba-danger); }
.btn-danger:hover { text-decoration: underline; }

/* Lists */
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; align-items: center; justify-content: space-between; padding: .25rem 0; }

/* Badges */
.badge-upgrade {
  background: #fee2e2;    /* red-100 */
  color: #991b1b;         /* red-900 */
  border-radius: .375rem;
  padding: .125rem .375rem;
  font-size: .75rem;
}

/* Memory counter */
#memory-usage {
  font-size: .875rem;
  color: #6b7280; /* gray-500 */
}

/* -------------------- Components & States -------------------- */
/* Typing indicator (container hidden via .hidden) */
#typing-indicator.hidden { display: none; }

.typing-indicator { display: flex; align-items: center; }
.typing-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background-color: #6b7280; margin: 0 2px;
  animation: typing-dot 1.5s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* Pulse ring (e.g., for live mic) */
.pulse-ring { animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; }

/* Dropdowns */
.dropdown-menu {
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.dropdown-menu.open {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}

/* Camera modal */
.camera-modal video { max-height: 400px; }

/* Hover affordances */
.tool-icon { transition: transform 0.2s; }
.tool-icon:hover { transform: scale(1.1); }

.tool-card { transition: box-shadow 0.2s; }
.tool-card:hover {
  box-shadow: 0 10px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
}

/* Theme / profile / tabs */
.theme-card.selected { border-color: #000; }

.profile-pic { transition: transform 0.2s; }
.profile-pic:hover { transform: scale(1.05); }

.tab-button { transition: all 0.2s; }
.tab-button.active { background-color: #000; color: #fff; }

/* Expand/collapse API key section */
.api-key-section { transition: max-height 0.3s ease; max-height: 0; overflow: hidden; }
.api-key-section.open { max-height: 500px; }

/* -------------------- Dark-Mode Tailwind Overrides -------------------- */
/* Keep only necessary overrides; use sparingly with !important to trump utility classes */
.dark-mode .bg-white   { background-color: #1f2937 !important; } /* gray-800 */
.dark-mode .bg-gray-50 { background-color: #1f2937 !important; }
.dark-mode .bg-gray-100{ background-color: #374151 !important; } /* gray-700 */
.dark-mode .bg-gray-200{ background-color: #4b5563 !important; } /* gray-600 */
.dark-mode .bg-gray-300{ background-color: #6b7280 !important; } /* gray-500 */
.dark-mode .bg-gray-800{ background-color: #1f2937 !important; }

.dark-mode .text-gray-600,
.dark-mode .text-gray-700,
.dark-mode .text-gray-800 { color: #d1d5db !important; } /* gray-300 */

.dark-mode input,
.dark-mode textarea,
.dark-mode select {
  background-color: #4b5563 !important;  /* gray-600 */
  color: #ffffff !important;
  border-color: #4b5563 !important;
}

/* -------------------- Animations -------------------- */
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-10px); }
}

@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 1; }
  80%,100% { transform: scale(1.5); opacity: 0; }
}

/* -------------------- NEW: Active Mode Badge Styles -------------------- */
.active-mode-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: #dbeafe; /* blue-100 */
    color: #1e40af; /* blue-800 */
}

.active-mode-badge .close-badge {
    margin-left: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #3b82f6; /* blue-500 */
    font-weight: bold;
}
.active-mode-badge .close-badge:hover {
    color: #1e40af; /* blue-800 */
}

.dark-mode .active-mode-badge {
    background-color: #1e3a8a; /* blue-900 */
    color: #bfdbfe; /* blue-200 */
}
.dark-mode .active-mode-badge .close-badge {
    color: #60a5fa; /* blue-400 */
}
.dark-mode .active-mode-badge .close-badge:hover {
    color: #bfdbfe; /* blue-200 */
}


/* -------------------- Responsive -------------------- */
@media (max-width: 640px) {
  .header-actions { gap: 0.25rem; }
  .bubble { max-width: 90%; }
}
/* === End AIBA: Custom Styles  === */