/* Touch layouts only. Desktop styles and business behavior stay in their original components. */
@media (max-width: 1180px) {
  :root body .workspace .content { padding: 20px; min-width: 0; }
  :root body .workspace .sidebar,
  :root body .workspace .sidebar.collapsed { width: 84px; padding: 12px 7px; }
  :root body .workspace .sidebar .side-item { flex-direction: column; justify-content: center; gap: 6px; padding: 11px 4px; min-height: 60px; }
  :root body .workspace .sidebar .side-name { display: block; max-width: 100%; font-size: 11px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; text-align: center; }
  :root body .workspace .sidebar .side-item::before { display: none; }
  :root body .workspace .profile-drawer,
  :root body .workspace.side-collapsed .profile-drawer { left: 96px; width: min(520px, calc(100vw - 112px)); }
  :root body .workspace .topbar { padding-inline: 16px; }
  :root body .workspace .brand-name { flex-direction: column; align-items: flex-start; gap: 4px; }
  :root body .workspace .brand-word { font-size: 19px !important; }
  :root body .workspace .brand-cn { font-size: 13px !important; }
  :root body .workspace .welcome { flex-wrap: wrap; gap: 16px; }
  :root body .workspace .welcome-stats { flex-wrap: wrap; margin-left: 0; }
  :root body .workspace .grid,
  :root body .workspace .hc-agent-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
  :root body .workspace .grid > *,
  :root body .workspace .profile-grid > *,
  :root body .admin .edit-grid > * { min-width: 0; }
  :root body .workspace .agent-detail .main-area { width: 100%; min-width: 0; }
  :root body .workspace .usage-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  :root body .workspace .usage-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  :root body .workspace .usage-bar p { overflow-wrap: anywhere; }
  :root body .workspace .ai-chat-page { height: auto; min-height: calc(100dvh - 110px); }
  :root body .workspace .mode-switcher { position: static; align-self: flex-start; margin-bottom: 16px; border-radius: 10px; max-width: 100%; flex-wrap: wrap; }
  :root body .workspace .mode-tab { min-height: 42px; padding-inline: 12px; }
  :root body .workspace .ai-chat-page .chat-shell { flex: 1 0 auto; min-height: 480px; }
  :root body .workspace .ai-chat-page .messages { max-height: 58dvh; min-height: 220px; }
  :root body .admin .admin-side { overflow-y: auto; }
  :root body .admin .admin-main { padding: 20px; }
  :root body .admin .admin-main > div > .between { flex-wrap: wrap; align-items: flex-start; }
  :root body .admin .admin-main > div > .between > .row { flex-wrap: wrap; max-width: 100%; }
  :root body .admin .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  :root body .admin .agent-filters { gap: 10px; }
  :root body .admin .agent-filters label { flex: 1 1 130px; min-width: 0; }
  :root body .admin .agent-filters .select { width: 100%; min-width: 0; }
  :root body .admin .filter-count { flex-basis: 100%; margin: 0; }
  :root body .table-wrap { -webkit-overflow-scrolling: touch; }
  :root body .modal { overscroll-behavior: contain; max-height: 90dvh; }
}

@media (max-width: 1024px) {
  :root body .admin { display: block; }
  :root body .admin .admin-side { width: 100%; height: auto; position: relative; padding: 14px 16px 8px; gap: 12px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--border); }
  :root body .admin .admin-brand { align-self: flex-start; max-width: calc(100% - 130px); gap: 9px; padding: 0; }
  :root body .admin .admin-nav { flex-direction: row; flex: none; width: 100%; min-width: 0; overflow-x: auto; padding-bottom: 6px; overscroll-behavior-x: contain; }
  :root body .admin .admin-item { width: auto; flex: 0 0 auto; min-height: 44px; padding: 10px 12px; white-space: nowrap; }
  :root body .admin .admin-side-bottom { position: absolute; right: 12px; top: 16px; }
  :root body .admin .admin-topbar { height: 52px; padding-inline: 16px; }
  :root body .admin .settings-layout { grid-template-columns: minmax(0, 1fr); }
  :root body .admin .settings-menu { position: static; flex-direction: row; overflow-x: auto; white-space: nowrap; }
  :root body .admin .settings-menu-item { width: auto; flex: 0 0 auto; min-height: 44px; }
  :root body .admin .menu-cols { grid-template-columns: minmax(0, 1fr); }
  :root body .admin .add-pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root body .home .nav-inner { padding-inline: 24px; }
}

@media (max-width: 700px) {
  :root body .workspace .topbar { height: 64px; padding-inline: max(12px, env(safe-area-inset-left)); gap: 10px; }
  :root body .workspace .topbar-left { flex: 1 1 auto; min-width: 0; }
  :root body .workspace .brand { gap: 7px; }
  :root body .workspace .brand-word { font-size: 15px !important; }
  :root body .workspace .brand-cn { font-size: 11px !important; }
  :root body .workspace .topbar-right { flex: 0 0 auto; max-width: none; gap: 5px; overflow: visible; }
  :root body .workspace .topbar-right .icon-btn { width: 36px; height: 40px; flex: 0 0 36px; display: grid; place-items: center; }
  :root body .workspace .points-chip { max-width: 72px; padding: 8px 7px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :root body .workspace .user-chip { min-height: 40px; }
  :root body .workspace .topbar-right > .btn { width: auto; flex: 0 0 auto; min-height: 40px; padding: 7px 10px; font-size: 12px; }
  :root body .workspace .workspace-body { display: flex; flex-direction: column; min-height: calc(100dvh - 64px); }
  :root body .workspace .sidebar,
  :root body .workspace .sidebar.collapsed { position: relative; top: auto; width: 100%; height: auto; padding: 8px 12px; flex-direction: row; align-items: stretch; gap: 8px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--border); overscroll-behavior-x: contain; }
  :root body .workspace .sidebar .side-section { flex-direction: row; flex: 0 0 auto; gap: 6px; }
  :root body .workspace .sidebar .side-item { flex: 0 0 auto; flex-direction: row; min-height: 44px; gap: 7px; padding: 10px 12px; border-radius: 10px; }
  :root body .workspace .sidebar .side-name { font-size: 12px; white-space: nowrap; }
  :root body .workspace .sidebar .side-head { display: none; }
  :root body .workspace .sidebar .side-bottom { padding: 0 0 0 8px; border-top: 0; border-left: 1px solid var(--border); }
  :root body .workspace .content { width: 100%; max-width: 100%; flex: 1 1 auto; padding: 16px 12px max(24px, env(safe-area-inset-bottom)); overflow: visible; }
  :root body .workspace .profile-drawer,
  :root body .workspace.side-collapsed .profile-drawer { top: max(12px, env(safe-area-inset-top)); left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: calc(100% - 24px); max-width: 520px; }
  :root body .workspace .profile-name-line { flex-wrap: wrap; gap: 4px; }
  :root body .workspace .profile-name-line strong { max-width: 100%; font-size: 16px; }
  :root body .workspace .profile-heading { gap: 10px; }
  :root body .workspace .profile-close { flex: 0 0 36px; height: 36px; }
  :root body .workspace .profile-quick-grid { gap: 8px; }
  :root body .workspace .profile-quick-card { grid-template-columns: 18px minmax(0, 1fr); padding: 11px 8px; }
  :root body .workspace .profile-quick-card > svg:last-child { display: none; }
  :root body .workspace .profile-grid { grid-template-columns: minmax(0, 1fr); }
  :root body .workspace .profile-page .sec { padding: 16px; }
  :root body .workspace .welcome { display: block; padding: 16px; }
  :root body .workspace .welcome-stats { width: 100%; margin-top: 14px; }
  :root body .workspace .filter-bar { flex-wrap: wrap; gap: 10px; }
  :root body .workspace .cat-scroll { width: 100%; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; }
  :root body .workspace .cat-chip { min-height: 40px; flex: 0 0 auto; white-space: nowrap; }
  :root body .workspace .search-input { width: 100%; min-width: 0; }
  :root body .workspace .grid,
  :root body .workspace .hc-agent-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  :root body .workspace .detail-top { align-items: flex-start; }
  :root body .workspace .detail-title { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
  :root body .workspace .detail-price { flex: 1 0 100%; padding-left: 0; }
  :root body .workspace .usage-bar { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  :root body .workspace .usage-item,
  :root body .workspace .usage-item:nth-child(odd) { padding: 13px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  :root body .workspace .agent-detail .chat-input .between { flex-wrap: wrap; }
  :root body .workspace .agent-detail .chat-input .between > .row { width: 100%; flex-wrap: wrap; justify-content: flex-end; }
  :root body .workspace .ai-chat-page { min-height: calc(100dvh - 165px); }
  :root body .workspace .ai-chat-page .chat-header { flex-direction: column; gap: 14px; }
  :root body .workspace .ai-chat-page .model-picker { width: 100%; }
  :root body .workspace .ai-chat-page .mode-switcher { width: 100%; margin-bottom: 14px; }
  :root body .workspace .ai-chat-page .mode-tab { flex: 1 1 60px; min-width: 0; }
  :root body .workspace .ai-chat-page .chat-shell { min-height: 420px; }
  :root body .workspace .ai-chat-page .messages { max-height: 52dvh; min-height: 180px; }
  :root body .workspace .ai-chat-page .message { flex-wrap: wrap; gap: 7px; }
  :root body .workspace .ai-chat-page .message-content { flex: 1 1 0; max-width: calc(100% - 42px); }
  :root body .workspace .ai-chat-page .message-time { flex-basis: 100%; margin-top: 0; padding: 0; background: none; border: 0; font-size: 10px; }
  :root body .workspace .ai-chat-page .message.user .message-content { max-width: calc(100% - 42px); }
  :root body .workspace .ai-chat-page .composer-footer { flex-wrap: wrap; }
  :root body .workspace .ai-chat-page .composer-footer-left { flex: 1 1 150px; flex-wrap: wrap; }
  :root body .workspace .ai-chat-page .image-params-trigger { max-width: 100%; }
  :root body .workspace .ai-chat-page .image-params-panel { width: min(340px, calc(100vw - 70px)); }
  :root body .workspace .ai-chat-page .composer-note { flex-wrap: wrap; text-align: center; }
  :root body .workspace .gallery-head,
  :root body .workspace .head-actions { flex-wrap: wrap; gap: 12px; }
  :root body .workspace .hc-detail { padding: 18px 16px; }
  :root body .workspace .hc-detail-meta { flex-wrap: wrap; }
  :root body .workspace .media-converter,
  :root body .workspace .sep-area,
  :root body .workspace .speaker-area,
  :root body .workspace .denoise-area { padding: 14px; }
  :root body .workspace .upload-zone,
  :root body .workspace .converter-upload { padding: 28px 14px; min-height: 240px; }
  :root body .workspace .format-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :root body .workspace .wave-grid { grid-template-columns: minmax(0, 1fr); }
  :root body .workspace .stem-row { grid-template-columns: 60px minmax(0, 1fr) 36px; gap: 8px; }
  :root body .workspace .stem-wave { grid-column: 1 / -1; }
  :root body .workspace .stem-ops { grid-column: 1 / -1; justify-content: flex-end; }
  :root body .workspace .player-controls,
  :root body .workspace .player-bar,
  :root body .workspace .file-row,
  :root body .workspace .result-actions { flex-wrap: wrap; }
  :root body .workspace .volume-control { width: 100%; margin: 6px 0 0; min-width: 0; }
  :root body .workspace .volume-range { flex: 1; width: auto; min-height: 32px; }
  :root body .workspace .result-summary p { overflow-wrap: anywhere; }
  :root body .workspace .privacy { flex-wrap: wrap; text-align: center; }
  :root body .workspace .sw-tab { bottom: max(24px, env(safe-area-inset-bottom)); }
  :root body .workspace .sw-panel { bottom: max(16px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 96px); overflow-y: auto; }
  :root body .admin .admin-main { padding: 16px 12px; }
  :root body .admin .admin-main h2 { font-size: 20px; }
  :root body .admin .admin-brand .brand-word { font-size: 16px !important; }
  :root body .admin .admin-brand .brand-cn { font-size: 12px !important; }
  :root body .admin .admin-main > div > .between > .row { width: 100%; gap: 8px; }
  :root body .admin .admin-main > div > .between > .row > .select,
  :root body .admin .admin-main > div > .between > .row > .input { flex: 1 1 140px; min-width: 0; max-width: 100%; }
  :root body .admin .agent-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  :root body .admin .agent-filters label { width: 100%; }
  :root body .admin .filter-count { grid-column: 1 / -1; }
  :root body .admin .table-wrap::before { content: '左右滑动查看完整表格'; display: block; padding: 8px 12px; font-size: 12px; color: var(--text-faint); }
  :root body .admin .edit-grid,
  :root body .admin .pay-grid,
  :root body .admin .add-pay-grid { grid-template-columns: minmax(0, 1fr); }
  :root body .admin .edit-grid > [style*="grid-column"] { grid-column: 1 / -1 !important; }
  :root body .admin .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :root body .admin .stat-card { padding: 14px; min-width: 0; }
  :root body .admin .modal-title-row { align-items: flex-start; gap: 10px; }
  :root body .admin .modal-title-row h3 { font-size: 16px; overflow-wrap: anywhere; }
  :root body .admin .modal-back { flex-shrink: 0; }
  :root body .admin .sec { padding: 16px; }
  :root body .admin .chart-row { grid-template-columns: minmax(0, 1fr); }
  :root body .admin .chart-panel { min-width: 0; padding: 16px; }
  :root body .admin .chart-panel h3 { flex-wrap: wrap; }
  :root body .admin .bar-col,
  :root body .admin .axis-day { min-width: 0; }
  :root body .admin .mono { overflow-wrap: anywhere; white-space: normal; }
  :root body .modal-mask { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
  :root body .modal { padding: 18px 16px; max-height: calc(100dvh - 32px); }
  :root body .modal .row,
  :root body .modal .between { flex-wrap: wrap; }
  :root body .modal-actions { flex-wrap: wrap; }
  :root body .modal-actions .btn { flex: 1 1 110px; }
  :root body .pager { flex-wrap: wrap; }
  :root body .input,
  :root body .select,
  :root body .textarea,
  :root body .composer-input { font-size: 16px; min-width: 0; }
  :root body .btn,
  :root body .link-btn,
  :root body .pager button { min-height: 44px; }
  :root body .table .row { flex-wrap: nowrap; }
  :root body .table .link-btn { white-space: nowrap; }
  :root body .home .nav-inner { padding: 12px; }
  :root body .auth-page { padding: 16px 12px; min-height: 100dvh; }
  :root body .auth-page .auth-card { padding: 26px 20px; }
}

@media (max-width: 360px) {
  :root body .workspace .topbar { gap: 5px; padding-inline: 8px; }
  :root body .workspace .brand .n-logo { width: 32px; height: 32px; }
  :root body .workspace .points-chip { max-width: 58px; }
  :root body .workspace .topbar-right { gap: 3px; }
  :root body .workspace .topbar-right .icon-btn { width: 32px; flex-basis: 32px; }
  :root body .workspace .profile-quick-grid { grid-template-columns: minmax(0, 1fr); }
  :root body .admin .admin-side-bottom { right: 8px; }
  :root body .admin .admin-side-bottom .admin-item { padding-inline: 7px; font-size: 12px; }
}