/*
 * Desktop and mobile share one visual system. Desktop only changes information
 * architecture: the session rail stays visible and the study area expands.
 */
@media (min-width: 761px) {
  :root {
    --bg: #f8f6f2;
    --panel: #ffffff;
    --panel-soft: #f4f1ed;
    --text: #202321;
    --muted: #727773;
    --line: #e7e1db;
    --line-strong: #d6d0ca;
    --accent: #a63830;
    --accent-dark: #7d2723;
    --choice: #fbfaf8;
    --choice-line: #e5dfd9;
    --guide: #fbefec;
    --guide-line: #ecd5d0;
    --shadow: none;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--panel);
  }

  .app {
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: 0;
    gap: 0;
    grid-template-rows: 60px minmax(0, 1fr);
    background: var(--panel);
  }

  .topbar {
    min-height: 60px;
    padding: 0 22px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    backdrop-filter: blur(16px);
  }

  .topbar-brand {
    min-width: 0;
  }

  .brand-copy {
    display: flex;
    align-items: center;
  }

  .brand-copy h1 {
    display: flex;
    align-items: center;
    gap: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  .brand-mark,
  .brand-copy h1 small,
  .session-filter-chips,
  .usage-entry,
  .new-session-entry {
    display: none;
  }

  .session-entry {
    min-height: 36px;
    margin-right: 10px;
    padding: 0 10px 0 34px;
    border: 0;
    border-radius: 10px;
    background:
      linear-gradient(#343936, #343936) 10px 11px / 16px 1.5px no-repeat,
      linear-gradient(#343936, #343936) 10px 17px / 16px 1.5px no-repeat,
      linear-gradient(#343936, #343936) 10px 23px / 12px 1.5px no-repeat,
      transparent;
    color: var(--muted);
  }

  .session-entry span {
    display: none;
  }

  .session-entry strong {
    max-width: 220px;
    font-size: 11px;
    font-weight: 600;
  }

  .notes-entry {
    min-height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #555b57;
    font-size: 12px;
    font-weight: 650;
  }

  .notes-entry:hover,
  .session-entry:hover {
    border-color: transparent;
    background-color: var(--panel-soft);
  }

  .study-workspace {
    width: min(100%, 1440px);
    min-width: 0;
    min-height: 0;
    margin: 0 auto;
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.9fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
    background: var(--panel);
  }

  .question-stage {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: auto;
    border: 0;
    border-right: 1px solid var(--line);
    background: var(--panel);
  }

  .mobile-study-splitter {
    display: none;
  }

  .mobile-study-splitter i {
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: #bbb5ae;
  }

  .dialogue-panel {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto auto;
    border: 0;
    border-radius: 0;
    background: var(--panel);
    box-shadow: none;
  }

  .dialogue-head {
    display: none;
  }

  .chat {
    gap: 11px;
    padding: 18px 20px 14px;
    background: var(--panel);
  }

  .bubble {
    max-width: 96%;
    color: var(--text);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    line-height: 1.55;
  }

  .bubble.user {
    padding: 10px 13px;
    border-radius: 19px 19px 5px 19px;
    background: var(--panel-soft);
  }

  .bubble.assistant {
    padding: 4px 2px;
    background: transparent;
  }

  .question-round-archive {
    flex: 0 0 auto;
    border-radius: 10px;
    background: #faf9f7;
  }

  .question-round-archive > summary {
    min-height: 36px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 6px 10px;
  }

  .question-round-archive > summary > span {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .question-round-archive > summary small {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0;
  }

  .question-round-archive > summary strong {
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
  }

  .question-round-archive > summary b {
    font-size: 10.5px;
    font-weight: 500;
  }

  .question-card {
    min-height: 100%;
    padding: 20px clamp(22px, 3vw, 42px) 36px;
    border: 0;
    border-radius: 0;
    background: var(--panel);
    box-shadow: none;
  }

  .question-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding-bottom: 12px;
    border-bottom-color: var(--line);
  }

  .question-head h2 {
    margin-top: 3px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
  }

  .question-head .answer-status {
    display: none;
  }

  .question-head-actions {
    width: auto;
    gap: 5px;
  }

  .question-skip {
    min-height: 29px;
    padding: 4px 9px;
    border-color: var(--line);
    border-radius: 9px;
    background: var(--panel);
    font-size: 11px;
  }

  .material,
  .stem {
    margin-top: 13px;
    font-size: 15px;
    line-height: 1.72;
  }

  .material {
    padding: 12px;
    border-color: var(--line);
    border-radius: 12px;
    background: #f8f6f3;
  }

  .choice-grid {
    gap: 8px;
    margin-top: 13px;
  }

  .choice-card {
    min-height: 46px;
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 9px;
    padding: 9px 11px;
    border-color: var(--line);
    border-radius: 12px;
    background: var(--panel);
  }

  .choice-card:hover {
    background: #f8f6f3;
  }

  .choice-label {
    width: 27px;
    height: 27px;
    background: #343936;
    font-size: 12px;
  }

  .choice-body {
    font-size: 13.5px;
  }

  .guide-card,
  .learning-actions-card,
  .diagnosis-card {
    width: 100%;
    padding: 11px;
    border-radius: 12px;
    box-shadow: none;
  }

  .guide-card {
    border-color: var(--guide-line);
    background: var(--guide);
  }

  .guide-meta {
    display: none;
  }

  body.tool-debug-enabled .guide-meta {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    line-height: 1.4;
  }

  .guide-title {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
  }

  .guide-options {
    gap: 6px;
  }

  .guide-option {
    min-height: 36px;
    padding: 7px 9px;
    border-color: var(--guide-line);
    border-radius: 9px;
    background: var(--panel);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
  }

  .diagnosis-card h3 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
  }

  .diagnosis-card h4 {
    margin-top: 10px;
  }

  .diagnosis-summary {
    margin-top: 6px !important;
    font-size: 13px;
    line-height: 1.5;
  }

  .guide-quick-starts {
    gap: 5px;
    padding: 6px 18px 2px;
    overflow-x: auto;
    border: 0;
    background: var(--panel);
  }

  .guide-quick-starts > span {
    display: none;
  }

  .guide-quick-starts > div {
    flex-wrap: nowrap;
  }

  .guide-quick-starts button {
    min-height: 30px;
    flex: 0 0 auto;
    padding: 4px 9px;
    border-color: var(--line);
    border-radius: 999px;
    background: #f8f6f3;
    color: #555b57;
    font-size: 10.5px;
  }

  .composer,
  .composer:nth-child(n) {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    margin: 6px 16px 14px;
    padding: 5px;
    border: 1px solid #dfdcd7;
    border-radius: 26px;
    background: #f5f3f0;
    box-shadow: 0 2px 10px rgba(62, 45, 38, 0.05);
  }

  .composer textarea {
    height: 40px;
    min-height: 40px;
    max-height: 112px;
    padding: 10px 10px;
    resize: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    line-height: 1.45;
  }

  .composer textarea:focus {
    outline: none;
  }

  .composer #sendButton {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    align-self: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0;
  }

  .composer #sendButton::before {
    display: block;
    content: "↑";
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }

  .composer #sendButton.is-stop::before {
    content: "■";
    font-size: 12px;
  }

  .study-workspace:not(.has-question) {
    width: min(100%, 820px);
    grid-template-columns: minmax(0, 820px);
    grid-template-rows: minmax(0, 1fr) auto;
    justify-content: center;
    padding: 0 24px 20px;
  }

  .study-workspace:not(.has-question) .question-stage {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    border: 0;
  }

  .study-workspace:not(.has-question) .mobile-study-splitter {
    display: none;
  }

  .study-workspace:not(.has-question) .study-start-card {
    min-height: 100%;
    align-items: center;
    gap: 20px;
    padding: 36px 18px 18px;
    border: 0;
    border-radius: 0;
    background: var(--panel);
    box-shadow: none;
    text-align: center;
  }

  .study-workspace:not(.has-question) .study-start-copy {
    max-width: 580px;
  }

  .study-workspace:not(.has-question) .study-start-copy > span {
    display: none;
  }

  .study-workspace:not(.has-question) .study-start-copy h2 {
    font-size: clamp(30px, 3vw, 38px);
    font-weight: 700;
    letter-spacing: -0.035em;
  }

  .study-workspace:not(.has-question) .study-start-copy p {
    max-width: 520px;
    margin: 10px auto 0;
    font-size: 14px;
    line-height: 1.65;
  }

  .study-workspace:not(.has-question) .study-start-actions-grid,
  .study-workspace:not(.has-question) .study-start-capability {
    width: min(620px, 100%);
  }

  .study-workspace:not(.has-question) .study-start-actions-grid button {
    min-height: 50px;
    border-color: var(--line);
    border-radius: 15px;
    background: #faf8f5;
    color: #343936;
  }

  .study-workspace:not(.has-question) .dialogue-panel {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-height: min(42dvh, 420px);
    overflow: visible;
  }

  .study-workspace:not(.has-question):has(.chat:not(:empty)) {
    grid-template-rows: minmax(0, 1fr);
    padding-top: 16px;
  }

  .study-workspace:not(.has-question):has(.chat:not(:empty)) .question-stage {
    display: none;
  }

  .study-workspace:not(.has-question):has(.chat:not(:empty)) .dialogue-panel {
    grid-column: 1;
    grid-row: 1;
    height: 100%;
    max-height: none;
    min-height: 0;
    overflow: hidden;
  }

  .study-workspace:not(.has-question) .dialogue-panel .chat:empty {
    display: none;
  }

  .study-workspace:not(.has-question) .dialogue-panel:has(.chat:empty) {
    grid-template-rows: auto auto;
  }

  .study-workspace:not(.has-question) .composer {
    margin-right: 0;
    margin-left: 0;
  }

  .session-overlay {
    background: rgba(32, 34, 32, 0.28);
  }

  .session-drawer {
    top: 0;
    bottom: 0;
    left: 0;
    width: min(340px, 88vw);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    border-width: 0 1px 0 0;
    border-radius: 0 18px 18px 0;
    background: #fbfaf7;
    box-shadow: 16px 0 40px rgba(25, 35, 31, 0.18);
  }

  .session-drawer-head,
  .session-drawer-actions,
  .session-account-footer {
    background: #fbfaf7;
  }

  .session-card {
    min-height: 44px;
    border-color: transparent;
    background: transparent;
  }

  .session-card.current {
    background: #f8ece8;
  }

  .session-review-entry > span {
    border-radius: 0;
    background: transparent;
    color: #555a56;
  }

  .session-review-entry > span svg {
    width: 20px;
    height: 20px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

@media (min-width: 1100px) {
  .app {
    width: 100%;
    margin-left: 0;
    transition: width 180ms ease, margin-left 180ms ease;
  }

  .app.desktop-session-open {
    width: calc(100% - 264px);
    margin-left: 264px;
  }

  .session-drawer {
    width: 264px;
    border-radius: 0;
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform 180ms ease;
  }

  .session-drawer.open {
    transform: translateX(0);
  }

  .session-overlay {
    display: none !important;
  }

  .new-session-entry {
    display: none;
  }

  .session-entry {
    order: -1;
    display: block;
    flex: 0 0 36px;
    width: 36px;
    min-height: 36px;
    margin: 0 8px 0 0;
    padding: 0;
    border-radius: 10px;
  }

  .session-entry span,
  .session-entry strong {
    display: none;
  }

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

  .study-workspace {
    width: min(100%, 1440px);
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.9fr);
  }

  .study-workspace:not(.has-question) {
    width: min(100%, 820px);
    grid-template-columns: minmax(0, 820px);
  }
}

@media (min-width: 761px) and (max-width: 1099px) {
  .study-workspace {
    width: min(100%, 1100px);
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, 0.9fr);
  }

  .study-workspace:not(.has-question) {
    width: min(100%, 820px);
    grid-template-columns: minmax(0, 820px);
  }
}

/* Keep sidebar destinations compact; the divider replaces explanatory copy. */
.session-drawer-actions .session-review-entry {
  position: relative;
  min-height: 52px;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto;
  column-gap: 9px;
  margin-top: 7px;
  padding: 14px 10px 6px;
}

.session-drawer-actions .session-review-entry::before {
  position: absolute;
  top: 0;
  right: -10px;
  left: -10px;
  height: 1px;
  background: var(--line);
  content: "";
}

.session-drawer-actions .session-review-entry > span {
  width: 24px;
  height: 24px;
  grid-row: 1;
}

.session-drawer-actions .session-review-entry > strong {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}