/* ============================================================
   浮光剧场 · Responsive
   ============================================================ */

/* === Focus Mode === */
.focus-mode .library-panel, .focus-mode .reader-header { display: none; }
.focus-mode .reader-shell { grid-rows: minmax(0, 1fr) auto; }
.focus-mode .exit-focus-btn { display: grid; place-items: center; }

/* === Tablet === */
@media (max-width: 1100px) {
  .library-panel { width: 250px; }
  .composer { width: min(720px, calc(100% - 28px)); }
}

/* === Mobile === */
@media (max-width: 760px) {
  .app-shell { display: block; isolation: auto; }
  .library-collapsed .library-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-105%);
  }

  .library-panel {
    position: fixed; z-index: 100; inset: 0 auto 0 0;
    width: min(88vw, 300px);
    margin: 8px;
    height: calc(100% - 16px);
    transform: translateX(-105%);
    transition: transform .35s var(--ease-fluid);
    box-shadow: var(--shadow-lg);
  }
  .library-panel.open { transform: none; }
  .controls-panel {
    top: 8px;
    right: 8px;
    bottom: 8px;
    height: auto;
    background: var(--bg-elevated);
  }

  .reader-shell { height: 100%; grid-template-rows: minmax(0, 1fr) auto; }
  .reader-header { inset-inline: 8px; }
  .header-bubble-left { max-width: calc(100vw - 154px); padding-left: 5px; }
  .reader-viewport {
    --segment-action-safe-space: 22px;
    --reader-bottom-space: calc(var(--composer-height, 200px) + 30px + var(--segment-action-safe-space));
    padding: 82px 20px var(--reader-bottom-space);
  }
  body.audio-panel-open .reader-viewport {
    --segment-action-safe-space: 44px;
    --reader-bottom-space: calc(var(--composer-height, 200px) + 112px + var(--segment-action-safe-space));
  }
  .story-content { font-size: 17px; line-height: 1.92; }
  .story-content,
  .story-content .speech-block {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
  }

  .audio-float-btn {
    top: calc(max(12px, env(safe-area-inset-top)) + 56px);
    right: 10px;
  }

  .player-bar {
    bottom: calc(var(--composer-height, 164px) + 20px);
    width: calc(100% - 16px);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    padding: 8px 12px;
  }
  .player-bar > .playback-controls { grid-column: 1; grid-row: 1; }
  .player-bar > .playback-status { grid-column: 2; grid-row: 1; min-width: 0; }
  .player-bar > .playback-status strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .player-bar > .audio-close-btn { display: none; }
  .player-bar > .compact-field { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); }
  .player-bar > .compact-field .cs-trigger { font-size: 11px; padding: 2px 6px; min-height: 26px; }
  .player-bar > .switch-label { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: flex-end; }

  .composer {
    left: 50%; right: auto;
    width: calc(100% - 16px);
    bottom: max(7px, env(safe-area-inset-bottom));
    padding: 10px;
    border-radius: 29px;
  }
  .composer-mode-row { min-width: 0; }
  .mode-tabs {
    min-width: 0;
    max-width: calc(100% - 104px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .quick-continue-btn { height: 40px; padding-inline: 12px; }
  .mode-tabs::-webkit-scrollbar { display: none; }
  .mode-tab {
    min-width: 0;
    padding-inline: 0;
  }
  .composer-tools { overflow: visible; }

  .segment-actions {
    position: absolute;
    width: max-content;
    margin: 0;
  }
  .segment.actions-fixed .segment-actions {
    position: fixed;
    top: calc(max(10px, env(safe-area-inset-top)) + 58px);
    right: 10px;
    bottom: auto;
    z-index: 80;
    transform: none;
  }
  .segment:not(.actions-open) .segment-actions {
    pointer-events: none;
  }

  .chapter-row-actions { opacity: 1; }
  .story-row-actions { opacity: 1; }
  .chip-btn { flex: 0 0 auto; }
  #statusText { min-height: auto; padding: 0 6px; margin-left: auto; }

  .mobile-backdrop {
    position: fixed; z-index: 90; inset: 0;
    display: block;
    background: rgba(0,0,0,.45);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .mobile-backdrop.show { opacity: 1; visibility: visible; }

  .two-columns, .three-columns { grid-template-columns: 1fr; }
  .rewrite-choice-actions { grid-template-columns: 1fr; }

  /* 欢迎页保留汉堡按钮 */
  .welcome-mode .reader-header {
    display: flex;
  }
  .welcome-mode .header-bubble-left {
    display: flex;
    padding: 4px;
  }
  .welcome-mode .title-block,
  .welcome-mode .header-actions {
    display: none;
  }
}