/* ==========================================================================
   aicourse.css — visual refinements for aicourse.jianhenghu.com ONLY.
   Loaded AFTER the shared styles.css, so every rule here layers on top.
   This file is never served to party.jianhenghu.com, so it is safe to be
   opinionated. Do not change data structures or sync behaviour here — this is
   presentation only.
   ========================================================================== */

:root {
  --accent: #3a6ff7;
  --accent-strong: #2453d6;
  --radius-card: 16px;
  --radius-pill: 999px;
}

/* Slightly softer, more modern cards across the board. */
.question-panel,
.review-item,
.empty-state {
  border-radius: var(--radius-card);
}

/* Make the practice/review toggle feel like one solid control. */
.segmented {
  border-radius: 12px;
}
.segmented button {
  border-radius: 9px;
  font-weight: 700;
}

/* Subtle distinct tints for the secondary nav buttons. */
.nav-actions .undo-button {
  color: var(--muted);
}
/* The secondary right-side group stays deliberately low-key. */
.study-actions .next-todo-button {
  color: var(--muted);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.55);
}
.study-actions .reset-button {
  opacity: 0.78;
}

/* Transient toast shown when a question auto-leaves the 错题本. */
.auto-clear-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 60;
  max-width: min(90vw, 420px);
  padding: 11px 18px;
  border-radius: 999px;
  color: #fff;
  background: #0c6337;
  box-shadow: 0 12px 30px rgba(12, 99, 55, 0.32);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.auto-clear-toast.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

/* Contextual "连续答对移出" control (only visible in 错题本 scope). */
.auto-clear {
  color: var(--accent-strong);
}
.auto-clear select {
  border-color: rgba(58, 111, 247, 0.35);
}

/* ==========================================================================
   MOBILE  (the part the user called "messy")
   ========================================================================== */
@media (max-width: 760px) {
  /* Leave room for the taller, 2-row fixed action bar. */
  .app-shell {
    padding: 0 10px 168px;
    gap: 12px;
  }

  /* --- Question card -------------------------------------------------- */
  .question-panel {
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(42, 65, 94, 0.08);
    overflow: hidden;
  }

  .question-body {
    padding: 18px 14px 16px;
  }

  /* Pure刷题: drop the 题型 and 范围已做 chips, keep only 第几题 + status. */
  .pill-type,
  .pill-range {
    display: none;
  }
  /* A meta-row that has nothing left to show collapses away. */
  .question-head {
    gap: 6px;
    padding: 8px 14px;
    background: #f4f7fb;
  }
  .meta-row {
    gap: 6px;
  }
  .meta-row:empty {
    display: none;
  }

  /* --- Toolbar: one tidy stacked block ------------------------------- */
  .toolbar {
    gap: 10px;
    margin-top: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 6px 18px rgba(42, 65, 94, 0.05);
  }
  .segmented {
    padding: 5px;
  }
  .filters {
    gap: 10px;
  }
  .filters label {
    font-size: 0.78rem;
  }
  /* Random-practice toggle + contextual auto-clear span their own rows. */
  #randomToggle {
    grid-column: 1 / -1;
    width: 100%;
  }
  .auto-clear {
    grid-column: 1 / -1;
  }
  .auto-clear select {
    width: 100%;
  }
  .sync-control {
    border-top: 1px dashed var(--line);
    padding-top: 10px;
  }

  /* --- Stats: compact, evenly spaced chips --------------------------- */
  .stats-rail {
    margin-top: 0;
  }
  .stats {
    gap: 6px;
    justify-content: space-between;
  }
  .stats div {
    flex: 1 1 auto;
    justify-content: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.8);
    border-color: var(--line);
  }

  /* --- Fixed bottom action bar: the main cleanup --------------------- */
  .nav-action-row {
    padding: 10px;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -8px 28px rgba(42, 65, 94, 0.16);
  }

  /* Two clear rows:
       row 1 -> 上一题 | 下一题   (primary navigation)
       row 2 -> 显示答案 | 收藏 | 熟练掌握 | 撤销  (utilities) */
  .nav-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "prev   prev   next   next"
      "answer star   master undo";
    gap: 8px;
    width: 100%;
  }
  .nav-actions [data-action="prev"] {
    grid-area: prev;
  }
  .nav-actions [data-action="next"] {
    grid-area: next;
  }
  .nav-actions [data-action="toggleStar"] {
    grid-area: star;
  }
  .nav-actions [data-action="undo"] {
    grid-area: undo;
  }
  .nav-actions [data-action="markMastered"] {
    grid-area: master;
  }
  .nav-actions [data-action="showAnswer"] {
    grid-area: answer;
  }

  .nav-actions .nav-button {
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 700;
  }
  .nav-actions .side-button {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 6px;
    font-size: 0.82rem;
    line-height: 1.15;
    white-space: nowrap;
  }

  /* --- 更多操作 drawer: deliberately small and quiet --------------------
     Collapsed by default; the only thing on screen is a tiny text trigger,
     so刷题 stays clean. Expand it to reach 下一道未做 / 重置进度. */
  .more-actions {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .more-actions[open] {
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
  }
  .more-actions > summary {
    display: inline-flex;
    width: auto;
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    color: var(--muted);
    background: transparent;
    font-size: 0.74rem;
    font-weight: 600;
    opacity: 0.75;
  }
  .more-actions > summary::after {
    content: "▾";
    margin-left: 4px;
    font-size: 0.7rem;
  }
  .more-actions[open] > summary::after {
    content: "▴";
  }
  .study-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .study-actions .plain-button,
  .study-actions .danger-button {
    flex: none;
    width: 100%;
    min-height: 40px;
    margin: 0;
    font-size: 0.86rem;
  }
  .study-actions .next-todo-button {
    grid-column: 1 / -1;
  }
  .study-actions .reset-button {
    margin-left: 0;
    min-height: 40px;
    font-size: 0.86rem;
  }
}

/* Very small phones: keep the utility row readable. */
@media (max-width: 360px) {
  .nav-actions .side-button {
    font-size: 0.76rem;
    padding: 0 3px;
  }
}

/* ==========================================================================
   DESKTOP — cleaner, calmer, properly aligned.
   ========================================================================== */
@media (min-width: 761px) {
  /* Softer page: dial back the heavy shadows/gradients for a flatter look. */
  .question-panel,
  .review-item,
  .empty-state {
    box-shadow: 0 8px 24px rgba(42, 65, 94, 0.07);
  }
  .question-head {
    background: #f4f8ff;
  }

  /* ---- Toolbar: bottom-align every control onto one clean baseline ---- */
  .toolbar {
    align-items: flex-end;
    gap: 16px;
    padding-bottom: 14px;
  }
  .filters {
    align-items: flex-end;
    gap: 14px;
  }
  .filters label {
    gap: 6px;
  }
  .filters select {
    min-width: 150px;
  }
  /* Make the standalone buttons exactly as tall as the selects so the row
     reads as a single aligned strip (was the main "misaligned icons" issue). */
  .filters .compact-button,
  .filters #randomToggle {
    min-height: 42px;
  }
  .sync-control {
    min-height: 42px;
    align-items: center;
    gap: 8px;
  }

  /* ---- Stats rail: tidy, vertically rhythmic cards ---- */
  .stats div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 64px;
  }

  /* ---- Action rows: consistent button heights, no ragged edges ---- */
  .actions {
    margin-top: 18px;
  }
  .nav-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .nav-actions .nav-button {
    min-width: 108px;
    min-height: 42px;
  }
  .nav-actions .side-button {
    min-height: 42px;
    font-size: 0.9rem;
  }
  /* Main-row order: 上一题 下一题 显示答案 收藏 熟练掌握 撤销 */
  .nav-actions [data-action="prev"] {
    order: 1;
  }
  .nav-actions [data-action="next"] {
    order: 2;
  }
  .nav-actions [data-action="showAnswer"] {
    order: 3;
  }
  .nav-actions [data-action="toggleStar"] {
    order: 4;
  }
  .nav-actions [data-action="markMastered"] {
    order: 5;
  }
  .nav-actions [data-action="undo"] {
    order: 6;
  }

  /* Secondary row sits on the right, kept visually quiet; 重置进度 at the
     far-right edge with 下一道未做 grouped alongside it. */
  .study-action-row {
    margin-top: 12px;
  }
  .study-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  .study-actions .plain-button,
  .study-actions .danger-button {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.82rem;
  }
  .study-actions .next-todo-button {
    order: 90;
  }
  .study-actions .reset-button {
    order: 99;
    margin-left: 4px;
  }
}