/* responsive: shared styles; retain order with the other component sheets. */
@layer components {
/* ---------- 21. 減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .cursor {
    animation: none;
  }

  .toast,
  .toast.show {
    animation: none;
    transition: none;
  }
}

/* ---------- 22. 響應式：堆疊版面 ---------- */
@media (max-width: 899.98px), (orientation: portrait) and (max-width: 1099.98px) {
  .layout {
    flex-direction: column;
  }

  .viewer-pane {
    flex: 0 0 auto;
    height: 55%;
    min-height: 120px;
  }

  .chat-pane {
    flex: 1 1 auto;
    min-height: 0;
  }

  .pane-splitter.vertical {
    display: none;
  }
}

@media (min-width: 900px) and (orientation: landscape) {
  .pane-splitter.horizontal {
    display: none;
  }
}

/* 手機寬度：維持全幅 */
@media (max-width: 767.98px) {
  .viewer-pane,
  .chat-pane {
    margin: 0;
    border-radius: 0;
  }
}

/* ---------- 23. 響應式：窄螢幕折行 ---------- */
@media (max-width: 899.98px) {
  .library-row,
  .memory-row,
  .memory-add,
  .chat-head,
  .ask-actions,
  .row,
  .memory-filters {
    flex-wrap: wrap;
  }

  .library-info,
  .library-name,
  .library-meta,
  .msg,
  .msg-text.markdown,
  .mistake-summary {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .library-name,
  .library-meta {
    white-space: normal;
  }

  .msg-text.markdown pre,
  .msg-text.markdown code {
    max-width: 100%;
    overflow-x: auto;
  }

  .messages,
  .ask-form {
    overflow-x: hidden;
  }

  .mistake-thumb {
    width: 56px;
    height: 74px;
  }

  .chat-head .field.grow {
    flex: 1 1 100%;
  }
}

/* ---------- 24. 響應式：手機全螢幕彈窗 ---------- */
@media (max-width: 639.98px) {
  .ask-form {
    flex-shrink: 0;
    max-height: min(260px, max(120px, calc(100% - 190px)));
    overflow-y: auto;
  }

  .math-chat-editor, .math-input-help, .math-editor-status, .ask-actions { flex-shrink: 0; }
  .ask-actions {
    position: sticky;
    bottom: -10px;
    background: var(--panel);
    padding: 6px 0;
    justify-content: flex-end;
  }
  .ask-actions > .muted { display: none; }
  .math-chat-editor { max-height: 120px; font-size: 16px; }
  .settings,
  .library,
  .admin-dialog {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .settings-form,
  .library-panel,
  .admin-panel,
  #profile-dialog .library-panel {
    height: 100dvh;
    max-height: 100dvh;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .topbar {
    padding: 8px 12px;
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-right: calc(12px + env(safe-area-inset-right));
    padding-left: calc(12px + env(safe-area-inset-left));
  }

  .brand-name {
    font-size: 15px;
  }

  .topbar-actions > #pick-btn > .btn-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .admin-user-card {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* ---------- 25. 響應式：頂部列按鈕只留圖示 ---------- */
@media (max-width: 1099.98px) {
  .topbar-actions > .btn > .btn-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #more-menu .btn-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

/* ---------- 26. 響應式：觸控目標 ---------- */
@media (pointer: coarse) {
  .btn,
  .zoom button,
  .picker-trigger,
  .pane-splitter,
  select,
  .star-btn,
  .link-btn,
  .memory-add .btn,
  .library-actions .btn {
    min-height: 44px;
  }

  .btn,
  .zoom button,
  .picker-trigger,
  select,
  button,
  input,
  textarea,
  .pane-splitter {
    touch-action: manipulation;
  }

  .pane-splitter {
    touch-action: none;
    --splitter-size: 10px;
    --splitter-hot-x: 18px;
    --splitter-hot-y: 18px;
  }

  .star-btn,
  .library-actions .btn,
  .memory-add .btn {
    min-width: 44px;
  }

  #send-btn {
    width: 44px;
    height: 44px;
  }

  .field select,
  .field input,
  .field textarea,
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .chat-model,
  .small,
  .qtag {
    font-size: 12px;
  }
}

}