/*
 * ANI website-only responsive layer.
 *
 * This file is injected only into the Cloudflare Pages bundle by
 * scripts/prepare-encyclopedia-website.js. It must not be registered in the
 * canonical app shell, native/www, Android public assets, or an APK.
 */

html[data-ani-surface="website"],
html[data-ani-surface="website"] body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html[data-ani-surface="website"] {
  --pharm-clinical-sign: #365f68;
  --pharm-clinical-sign-dark: #24464d;
  --pharm-clinical-sign-soft: #edf5f5;
}

html[data-ani-surface="website"] :where(
  .app-shell,
  .instructor-stage,
  .learning-workspace,
  .tool-pane,
  .chat-manager,
  .chat-pane,
  .chat-log,
  .composer,
  .pharm-database-shell,
  .pharm-database-header,
  .pharm-search-panel,
  .pharm-layout,
  .pharm-labs-card,
  .pharm-results-card,
  .pharm-detail-card,
  .pharm-detail-toolbar,
  .pharm-detail-text,
  .offline-visual-bubble
) {
  min-width: 0;
  max-width: 100%;
}

html[data-ani-surface="website"] :where(
  button,
  input,
  select,
  textarea,
  .pharm-result-button,
  .pharm-related-concept-link,
  .pharm-class-example-link
) {
  max-width: 100%;
}

html[data-ani-surface="website"] :where(
  .pharm-database-header,
  .pharm-search-panel,
  .pharm-layout,
  .pharm-detail-card,
  .pharm-result-button,
  .chat-manager button
) :where(strong, span, p, small) {
  overflow-wrap: anywhere;
}

html[data-ani-surface="website"] .pharm-detail-card :where(img, video, canvas, svg) {
  max-width: 100%;
}

html[data-ani-surface="website"] .pharm-detail-card :where(
  .offline-comparison-table-wrap,
  .pharm-table-wrap,
  .pharm-visual-table-wrap,
  pre
) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/*
 * The encyclopedia launch hides the upload control but preserves its code.
 * Explicitly collapse that hidden grid track so the text field, rather than
 * the Send button, remains the primary composer control.
 */
@media (min-width: 761px) {
  html[data-ani-surface="website"] .composer:has(.upload-button[hidden]) {
    grid-template-columns: 54px minmax(0, 1fr) minmax(92px, 116px);
  }

  html[data-ani-surface="website"] .composer:has(.upload-button[hidden]) .send-button {
    grid-column: auto;
    width: 100%;
    min-width: 92px;
    max-width: 116px;
    padding-inline: 18px;
  }

  /*
   * Once a card is open, its built-in Search control returns to the index.
   * Reclaim the category/search rows for the clinical content instead of
   * leaving the card compressed below controls the learner is not using.
   */
  html[data-ani-surface="website"] .pharm-database-screen.pharm-detail-open .pharm-search-panel {
    display: none;
  }

  html[data-ani-surface="website"] .pharm-database-screen.pharm-detail-open .pharm-database-shell {
    grid-template-rows: auto minmax(0, 1fr);
  }

  html[data-ani-surface="website"] .pharm-database-screen.pharm-detail-open .pharm-layout {
    grid-row: 2;
  }
}

html[data-ani-surface="website"] .pharm-database-screen[data-index-mode="clinical-signs"] {
  --pharm-current: var(--pharm-clinical-sign);
  --pharm-current-dark: var(--pharm-clinical-sign-dark);
  --pharm-current-soft: var(--pharm-clinical-sign-soft);
}

html[data-ani-surface="website"] .pharm-index-toggle button[data-pharm-index-mode="clinical-signs"] {
  --button-category-color: var(--pharm-clinical-sign);
  --button-category-soft: var(--pharm-clinical-sign-soft);
}

html[data-ani-surface="website"] .pharm-detail-card {
  scroll-padding-top: 58px;
}

html[data-ani-surface="website"] .pharm-detail-card > section {
  content-visibility: visible;
  contain-intrinsic-size: auto;
  scroll-margin-top: 58px;
}

html[data-ani-surface="website"] .pharm-detail-card .learner-language-support {
  content-visibility: visible;
  contain-intrinsic-size: auto;
  overflow: visible;
  scroll-margin-top: 58px;
}

html[data-ani-surface="website"] .learner-language-support > strong {
  display: block;
  min-height: 1.3em;
  line-height: 1.3;
}

/*
 * A phone browser with "Desktop site" enabled commonly exposes a viewport
 * between 761 and 1120 CSS pixels. ANI's base desktop encyclopedia has three
 * minimum-width columns in that range, so this website layer intentionally
 * moves the detail card onto its own full-width row.
 */
@media (min-width: 761px) and (max-width: 1120px) {
  html[data-ani-surface="website"] .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-ani-surface="website"] .instructor-stage {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
    gap: clamp(14px, 2vw, 22px);
    padding: clamp(20px, 3vw, 30px);
  }

  html[data-ani-surface="website"] .avatar-scene {
    min-height: 270px;
  }

  html[data-ani-surface="website"] .avatar {
    width: min(250px, 100%, 30vh);
    height: min(250px, 100%, 30vh);
  }

  html[data-ani-surface="website"] .learning-workspace {
    min-height: 680px;
  }

  html[data-ani-surface="website"] .tool-pane {
    padding: 12px clamp(14px, 2.5vw, 24px);
  }

  html[data-ani-surface="website"] .chat-manager {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "new history clinical lecture"
      "encyclopedia encyclopedia encyclopedia encyclopedia";
    gap: 8px;
  }

  html[data-ani-surface="website"] .chat-manager > button:not([hidden]) {
    min-height: 50px;
    height: 100%;
  }

  html[data-ani-surface="website"] .pharm-database-screen {
    overflow: hidden;
    padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }

  html[data-ani-surface="website"] .pharm-database-shell {
    width: 100%;
    height: calc(100dvh - 24px);
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  html[data-ani-surface="website"] .pharm-database-header {
    padding: 20px 20px 8px;
  }

  html[data-ani-surface="website"] .pharm-search-panel {
    margin-inline: 20px;
    padding: 14px;
    grid-template-columns: minmax(240px, 0.76fr) minmax(0, 1.24fr);
    grid-template-areas:
      "search-label categories"
      "search-input categories"
      "browse categories"
      "summary categories";
    gap: 7px 12px;
  }

  html[data-ani-surface="website"] .pharm-search-panel > label {
    grid-area: search-label;
  }

  html[data-ani-surface="website"] .pharm-search-panel > input {
    grid-area: search-input;
  }

  html[data-ani-surface="website"] .pharm-search-panel > .pharm-index-toggle {
    grid-area: categories;
    align-self: stretch;
  }

  html[data-ani-surface="website"] .pharm-search-panel > .clinical-sign-browse-controls {
    grid-area: browse;
  }

  html[data-ani-surface="website"] .pharm-search-panel > p {
    grid-area: summary;
  }

  html[data-ani-surface="website"] .pharm-search-panel .pharm-index-toggle {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html[data-ani-surface="website"] .clinical-sign-browse-controls {
    grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  }

  html[data-ani-surface="website"] .clinical-sign-browse-controls > span {
    grid-column: 1 / -1;
  }

  html[data-ani-surface="website"] .pharm-layout {
    min-height: 0;
    height: 100%;
    grid-template-columns: minmax(230px, 0.58fr) minmax(0, 1.62fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas:
      "results detail";
    gap: 12px;
    padding: 0 20px 20px;
  }

  html[data-ani-surface="website"] .pharm-labs-card {
    display: none;
  }

  html[data-ani-surface="website"] .pharm-results-card {
    grid-area: results;
    grid-column: auto;
    grid-row: auto;
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  html[data-ani-surface="website"] .pharm-detail-card {
    grid-area: detail;
    grid-column: auto;
    grid-row: auto;
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  html[data-ani-surface="website"] .pharm-detail-toolbar {
    flex-wrap: wrap;
  }

  html[data-ani-surface="website"] .pharm-detail-toolbar .pharm-voice-controls {
    flex: 1 1 420px;
    width: min(100%, 430px);
  }
}

/* Wide desktop website: keep a thin modal gutter and devote most space to the card. */
@media (min-width: 1121px) {
  html[data-ani-surface="website"] .pharm-database-screen {
    overflow: hidden;
    padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  }

  html[data-ani-surface="website"] .pharm-database-shell {
    width: 100%;
    max-width: none;
    height: calc(100dvh - 28px);
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
  }

  html[data-ani-surface="website"] .pharm-database-header {
    padding: 14px 18px 4px;
  }

  html[data-ani-surface="website"] .pharm-database-header strong {
    font-size: clamp(1.8rem, 2.4vw, 2.45rem);
  }

  html[data-ani-surface="website"] .pharm-database-header p {
    max-width: 920px;
    margin-top: 6px;
    font-size: 0.9rem;
  }

  html[data-ani-surface="website"] .pharm-search-panel {
    margin: 0 18px;
    padding: 11px 12px;
    grid-template-columns: minmax(310px, 0.76fr) minmax(0, 1.24fr);
    grid-template-areas:
      "search-label categories"
      "search-input categories"
      "browse categories"
      "summary categories";
    gap: 6px 12px;
  }

  html[data-ani-surface="website"] .pharm-search-panel > label {
    grid-area: search-label;
  }

  html[data-ani-surface="website"] .pharm-search-panel > input {
    grid-area: search-input;
  }

  html[data-ani-surface="website"] .pharm-search-panel > .pharm-index-toggle {
    grid-area: categories;
    align-self: stretch;
  }

  html[data-ani-surface="website"] .pharm-search-panel > .clinical-sign-browse-controls {
    grid-area: browse;
  }

  html[data-ani-surface="website"] .pharm-search-panel > p {
    grid-area: summary;
  }

  html[data-ani-surface="website"] .clinical-sign-browse-controls {
    grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1.3fr);
    padding: 7px 8px;
  }

  html[data-ani-surface="website"] .clinical-sign-browse-controls > span {
    grid-column: 1 / -1;
  }

  html[data-ani-surface="website"] .pharm-layout {
    min-height: 0;
    height: 100%;
    grid-template-columns: minmax(150px, 0.38fr) minmax(250px, 0.68fr) minmax(0, 2.25fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
    padding: 0 18px 16px;
  }

  html[data-ani-surface="website"] .pharm-labs-card,
  html[data-ani-surface="website"] .pharm-results-card,
  html[data-ani-surface="website"] .pharm-detail-card {
    height: 100%;
    min-height: 0;
    max-height: none;
  }
}

/* Normal mobile browser view, including browsers that do not expose coarse-pointer media. */
@media (max-width: 760px) {
  html[data-ani-surface="website"] .app-shell {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-ani-surface="website"] .learning-workspace,
  html[data-ani-surface="website"] .tool-pane,
  html[data-ani-surface="website"] .chat-pane {
    width: 100%;
  }

  html[data-ani-surface="website"] .tool-pane {
    padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
  }

  html[data-ani-surface="website"] .chat-manager,
  html[data-ani-surface="website"][data-device-mode="phone"] .chat-manager {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "new history"
      "clinical lecture"
      "encyclopedia encyclopedia";
    gap: 7px;
    min-width: 0;
  }

  html[data-ani-surface="website"] .chat-manager > button:not([hidden]) {
    min-width: 0;
    min-height: 48px;
    height: 100%;
    margin: 0;
    padding: 8px;
    line-height: 1.18;
  }

  html[data-ani-surface="website"] .composer {
    width: 100%;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 7px;
  }

  html[data-ani-surface="website"] .composer .icon-button:not([hidden]) {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  html[data-ani-surface="website"] .composer textarea {
    width: 100%;
    min-width: 0;
  }

  html[data-ani-surface="website"] .composer .send-button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 46px;
  }

  html[data-ani-surface="website"] .pharm-database-screen {
    width: 100%;
    overflow-x: clip;
  }

  html[data-ani-surface="website"] .pharm-database-shell {
    width: 100%;
  }

  html[data-ani-surface="website"] .pharm-database-header,
  html[data-ani-surface="website"] .pharm-search-panel,
  html[data-ani-surface="website"] .pharm-layout {
    width: auto;
  }

  html[data-ani-surface="website"] .pharm-database-header {
    gap: 12px;
    padding-inline: 14px;
  }

  html[data-ani-surface="website"] .pharm-database-header > div {
    min-width: 0;
  }

  html[data-ani-surface="website"] .pharm-database-header strong {
    font-size: clamp(1.55rem, 8vw, 2.15rem);
    line-height: 1.02;
  }

  html[data-ani-surface="website"] .pharm-search-panel {
    margin-inline: 14px;
    padding: 13px;
  }

  html[data-ani-surface="website"] .pharm-search-panel label,
  html[data-ani-surface="website"] .pharm-search-panel p {
    line-height: 1.35;
  }

  html[data-ani-surface="website"] .pharm-search-panel .pharm-index-toggle,
  html[data-ani-surface="website"][data-device-mode="phone"] .pharm-search-panel .pharm-index-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  html[data-ani-surface="website"] .pharm-search-panel .pharm-index-toggle button {
    min-width: 0;
    min-height: 52px;
    height: 100%;
    padding: 8px 6px;
  }

  html[data-ani-surface="website"] .clinical-sign-browse-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-ani-surface="website"] .pharm-layout,
  html[data-ani-surface="website"][data-device-mode="phone"] .pharm-layout {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 14px;
  }

  html[data-ani-surface="website"] .pharm-result-button {
    width: 100%;
    min-width: 0;
  }

  html[data-ani-surface="website"] .pharm-detail-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  html[data-ani-surface="website"] .pharm-detail-nav {
    width: 100%;
    flex-wrap: wrap;
  }

  html[data-ani-surface="website"] .pharm-detail-toolbar .pharm-voice-controls,
  html[data-ani-surface="website"][data-device-mode="phone"] .pharm-database-screen.pharm-detail-open .pharm-detail-toolbar .pharm-voice-controls {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-ani-surface="website"] .pharm-detail-card :where(h1, h2, h3, h4, p, li, td, th) {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 420px) {
  html[data-ani-surface="website"] .pharm-database-screen {
    padding-inline: max(6px, env(safe-area-inset-left, 0px)) max(6px, env(safe-area-inset-right, 0px));
  }

  html[data-ani-surface="website"] .pharm-database-header,
  html[data-ani-surface="website"] .pharm-search-panel,
  html[data-ani-surface="website"] .pharm-layout {
    margin-inline: 0;
    padding-inline: 10px;
  }

  html[data-ani-surface="website"] .pharm-search-panel .pharm-index-toggle button {
    font-size: max(0.76rem, 12px);
  }
}

@media (min-width: 761px) and (max-width: 1120px) and (max-height: 640px) {
  html[data-ani-surface="website"] .instructor-stage {
    grid-template-columns: minmax(0, 1fr) 170px;
    padding-block: 16px;
  }

  html[data-ani-surface="website"] .avatar-scene {
    min-height: 180px;
  }

  html[data-ani-surface="website"] .avatar {
    width: 170px;
    height: 170px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-ani-surface="website"] *,
  html[data-ani-surface="website"] *::before,
  html[data-ani-surface="website"] *::after {
    scroll-behavior: auto !important;
  }
}