/*
 * Canonical desktop layout overrides.
 *
 * This file is intentionally loaded after the legacy responsive layers. Keep
 * structural desktop fixes here so older broad selectors cannot silently
 * override component layouts again.
 */

:root {
  --desktop-sidebar-width: clamp(176px, 12vw, 208px);
  --reading-line-length: 78ch;
}

/* Native button defaults are white in Chromium. Sidebar buttons must always
   inherit the application theme, including before hover/active state. */
.sidebar-item {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  text-align: left;
}

.sidebar-item:not(.active):not(:hover) {
  background: transparent !important;
}

/* Tablet and small desktop widths intentionally use the bottom navigation.
   Keep the sidebar and its content offset disabled until the same breakpoint. */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .sidebar-nav {
    display: none !important;
  }

  .bottom-nav:not(.hidden) {
    display: flex !important;
  }
}

@media (min-width: 1024px) {
  /* Book detail has two vertical sections: the cover/info hero and the
     description card. A legacy desktop flex rule placed both in one row and
     squeezed the title down to a single character. */
  #detailScreen .detail-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start;
    gap: clamp(22px, 2vw, 32px) !important;
    width: min(100%, 1120px);
    max-width: 1120px;
    margin-inline: auto;
  }

  #detailScreen .detail-hero {
    display: grid !important;
    grid-template-columns: clamp(190px, 18vw, 267px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(24px, 2.4vw, 40px);
    width: 100%;
    min-width: 0;
  }

  #detailScreen .detail-cover {
    position: sticky;
    top: 16px;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 267 / 367;
  }

  #detailScreen .detail-info,
  #detailScreen .detail-description-section {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  #detailScreen .detail-title {
    max-width: 34ch;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  #detailScreen .detail-desc {
    max-width: var(--reading-line-length);
  }

  /* Keep the header controls and conversation on the same readable axis.
     Previously the toolbar spanned the viewport while messages were centred
     in a much narrower column. */
  #assistantScreen .top-header,
  #assistantScreen .assistant-body {
    width: min(100%, 960px) !important;
    max-width: 960px !important;
    margin-inline: auto !important;
  }

  #assistantScreen .top-header {
    padding-inline: clamp(12px, 1.8vw, 24px);
  }

  #assistantScreen .assistant-body {
    padding: 0 clamp(12px, 1.8vw, 24px) 18px !important;
  }

  #assistantScreen #assistantMessages {
    width: 100%;
    padding: 16px 0;
    scrollbar-gutter: stable;
  }

  #assistantScreen .ai-msg-wrap {
    width: 100%;
    min-width: 0;
  }

  #assistantScreen .ai-bubble {
    max-width: min(82%, var(--reading-line-length));
    overflow-wrap: break-word;
  }

  #assistantScreen #assistantInputBar {
    width: 100%;
  }
}

@media (min-width: 1280px) {
  .sidebar-nav {
    width: var(--desktop-sidebar-width) !important;
  }

  #app {
    width: auto !important;
    min-width: 0;
    margin-left: var(--desktop-sidebar-width) !important;
    padding-inline: clamp(20px, 2.1vw, 36px) !important;
  }

  body:has(#authScreen.active) #app,
  body:has(#onboardingScreen.active) #app,
  body.reader-active #app {
    margin-left: 0 !important;
  }
}

@media (min-width: 2000px) {
  #detailScreen .detail-content {
    max-width: 1200px;
  }
}