/* API-down banner — fixed at top, shown via JS when API is unreachable */
.api-down-banner {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 10000;
  padding: var(--space-xs) var(--space-m);
  background-color: var(--color-warning-light);
  border-bottom: 2px solid var(--color-warning);
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-align: center;
}

/* Version reload banner — fixed at top, shown when server version changes */
.version-reload-banner {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 10000;
  padding: var(--space-xs) var(--space-m);
  background-color: var(--color-primary-light);
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
}

/* Suppress transitions during initial load to prevent layout flash */
.app-layout[data-loading],
.app-layout[data-loading] * {
  transition-duration: 0s !important;
}

/* State-based overrides */
[data-state="active"] {
  border-color: var(--color-success);
}

[data-state="cancelled"],
[data-state="expired"] {
  opacity: 0.7;
}

[data-state="paused"] {
  border-color: var(--color-warning);
}

/* HTMX loading indicator */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator {
  display: inline;
}

.htmx-request.htmx-indicator {
  display: inline;
}

/* Workspace pages: break out of center constraint, expand to fill viewport height */
#main-content:has(.workspace-layout) {
  max-width: 100%;
  padding-inline: 0;
  padding-block: 0;
  flex: 1;
  min-height: 0;
}

/* Cover layout fix: pin nav and main to the top so the cover composition's
   margin:auto doesn't insert variable gaps above the content. */
.cover > .nav {
  margin-top: 0;
  margin-bottom: 0;
}

.cover > #main-content {
  margin-top: 0;
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
}

/* Dark mode prep (variables only, toggle deferred) */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-bg: #0f172a;
    --color-bg-alt: #1e293b;
    --color-bg-muted: #334155;
    --color-border: #334155;
    --color-border-strong: #475569;
  }
}
*/

/* Hide section headings in app layout (title is in the topbar) */
.app-main .section-heading { display: none; }

/* App layout: main content fills remaining height, chat fills viewport */
.app-main > #main-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-m);
  max-width: var(--max-width);
  margin-inline: auto;
  width: 100%;
}

.app-main > #main-content:has(.workspace-panel) {
  padding: 0;
  overflow: hidden;
  max-width: none;
}

/* New-chat greeting: warm background matching sidenav family */
.app-main:has(#workspace-container[data-conversation-id=""]) {
  background-color: var(--color-bg);
}

.app-main:has(#workspace-container[data-conversation-id=""]) > .app-topbar {
  background-color: transparent;
}

/* Hide desktop collapse toggle on mobile (slide-in overlay handles it) */
@media (max-width: 640px) {
  .sidenav__collapse { display: none; }
}

/* Responsive: app layout collapse */
@media (max-width: 640px) {
  .app-layout {
    grid-template-columns: 1fr;
  }

  .sidenav {
    position: fixed;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    z-index: 300;
    width: var(--sidenav-width);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  [dir="rtl"] .sidenav {
    transform: translateX(100%);
  }

  .sidenav[data-open] {
    transform: translateX(0);
  }

  .sidenav-toggle {
    display: flex;
  }

  .app-topbar {
    justify-content: space-between;
  }

  .sidenav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 299;
    background: rgba(0,0,0,0.3);
  }

  .sidenav-overlay[data-open] {
    display: block;
  }

  .drawer {
    width: 100%;
    min-width: 0;
  }

  .drawer__nav {
    display: none;
  }
}

/* Responsive nav collapse */
@media (max-width: 640px) {
  .nav__inner {
    flex-wrap: wrap;
  }

  .nav__toggle {
    display: flex;
  }

  .nav__panel {
    display: none;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: var(--space-2xs);
    padding-top: var(--space-s);
  }

  .nav[data-open] .nav__panel {
    display: flex;
  }

  .nav__primary {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav__dropdown-panel {
    position: static;
    box-shadow: none;
    border: none;
    padding-inline-start: var(--space-s);
  }

  .nav__user {
    justify-content: flex-start;
  }

  .hero__title {
    font-size: var(--text-2xl);
  }

  .hero__subtitle {
    font-size: var(--text-base);
  }

  .grid {
    --grid-min: 100%;
  }
}