/*
 * Mobile shell
 * This file is intentionally loaded after style.css so small-screen behavior
 * lives in one predictable cascade layer instead of being spread through
 * desktop component rules.
 */

.mobile-action-disclosure {
  display: none;
}

@media (max-width: 768px) {
  #businessPool { padding-bottom: 10px; }
  .business-pool-toolbar { padding: 10px; align-items: stretch; flex-direction: column; }
  .business-pool-create { width: 100%; }
  .business-pool-toolbar-actions { justify-content: flex-end; }
  .business-pool-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-pool-summary > div { min-height: 56px; padding: 9px 11px; border-bottom: 1px solid var(--border); }
  .business-pool-summary > div:nth-child(2n) { border-right: 0; }
  .business-pool-summary > div:last-child { grid-column: auto; }
  .business-procurement-strip { grid-template-columns: 1fr auto; }
  .business-pool-workspace { display: block; min-height: 0; overflow: visible; }
  .business-pool-list-pane { border-right: 0; border-bottom: 1px solid var(--border); }
  .business-pool-list { display: flex; max-height: none; padding: 8px; gap: 7px; overflow-x: auto; }
  .business-pool-list-item { width: min(210px, 72vw); flex: 0 0 min(210px, 72vw); border: 1px solid var(--border); border-radius: 6px; }
  .business-pool-list-item.active { box-shadow: inset 0 3px #0284c7; }
  .business-detail-header { padding: 12px; align-items: flex-start; }
  .business-detail-actions { flex-wrap: wrap; justify-content: flex-end; }
  .business-capacity-row { padding: 12px; grid-template-columns: 1fr 1fr; }
  .business-capacity-row > .btn { grid-column: 1 / -1; width: 100%; }
  .business-account-columns { grid-template-columns: 1fr; }
  .business-account-column { padding: 12px; }
  .business-account-column + .business-account-column { border-left: 0; border-top: 1px solid var(--border); }
  .business-standby-head { align-items: flex-start; flex-direction: column; }
  .business-section-tools { width: 100%; justify-content: stretch; }
  .business-section-tools span { flex: 0 0 auto; }
  .business-section-tools input[type="search"] { width: auto; min-width: 0; flex: 1 1 auto; }
  .business-account-detail-modal { width: calc(100vw - 16px); }
  .business-account-detail-grid { grid-template-columns: 1fr; padding-inline: 12px; }
  .business-template-band { padding: 13px 12px; grid-template-columns: 1fr; }
  .business-template-actions { justify-content: stretch; }
  .business-template-actions .btn { flex: 1 1 auto; }
  .business-settings-disclosure > summary { min-height: 54px; padding-inline: 12px; }
  .business-security-controls { width: 100%; grid-template-columns: 1fr; }
  .business-security-controls .btn { width: 100%; }
  .business-task-binding-controls { width: 100%; grid-template-columns: minmax(0, 1fr) auto; }
  .business-task-binding-controls select { grid-column: 1 / -1; }
  .business-task-binding-controls .btn { width: 100%; }
  .business-task-binding-controls > .btn:only-of-type { grid-column: 1 / -1; }
  .group-child-modal .group-edit-modal.business-onboarding-modal { width: calc(100vw - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .business-setup-steps { display: flex; overflow-x: auto; scrollbar-width: none; }
  .business-setup-steps::-webkit-scrollbar { display: none; }
  .business-setup-steps button { flex: 1 0 82px; height: 50px; padding-inline: 6px; gap: 5px; font-size: 11px; }
  .business-setup-steps button span { width: 20px; height: 20px; }
  .business-onboarding-grid { grid-template-columns: 1fr; }
  .business-onboarding-wide,
  .business-onboarding-full { grid-column: auto; }
  .business-onboarding-options { gap: 10px 16px; }
  .business-advanced-disclosure { margin-top: 14px; }
  .business-advanced-disclosure > summary { min-height: 46px; }
  .business-onboarding-review #businessOnboardingReview > div { grid-template-columns: 86px minmax(0, 1fr); gap: 10px; }
  .modal-footer.business-onboarding-footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .business-onboarding-footer .business-step-count { grid-column: 1 / -1; grid-row: 1; width: auto; margin: 0 0 2px; text-align: center; }
  .business-onboarding-footer .btn { min-width: 0; grid-row: 2; }
  .business-onboarding-footer [data-close] { grid-column: 1; }
  .business-onboarding-footer [data-prev] { grid-column: 2; }
  .business-onboarding-footer [data-next],
  .business-onboarding-footer [data-save] { grid-column: 3; }
  .business-pool-footer-actions { padding: 12px; }
  .business-pool-footer-actions .btn { flex: 1 1 calc(50% - 8px); }

  #groups .group-library-wrap { border-radius: 7px; }
  #groups .group-library-list .gtg-header {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    min-height: 46px;
    padding-inline: 8px;
  }
  #groups .gtg-toggle { min-height: 44px; font-size: 13px; }
  #groups .gtg-selection-count { min-width: 34px; font-size: 10px; }
  #groups .group-library-list .gtg-row {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding: 10px 8px;
  }
  #groups .group-row-selection { grid-row: 1; width: 26px; }
  #groups .group-library-copy { grid-column: 2; grid-row: 1; }
  #groups .group-library-title { font-size: 12px; }
  #groups .group-library-list .group-link { font-size: 10.5px; }
  #groups .group-row-actions {
    grid-column: 3;
    grid-row: 1;
    gap: 2px;
  }
  #groups .group-row-actions .btn-icon-sm { width: 32px; height: 32px; }

  #scraper .scraper-results-list .result-item-detailed {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }
  #scraper .scraper-results-list .result-link { grid-column: 3; grid-row: 1; }
  #scraper .scraper-results-list .result-quality { grid-column: 3; grid-row: 2; }

  #warmupCenter { padding-bottom: 10px; }
  .warmup-center-toolbar { min-height: 0; padding: 10px; align-items: stretch; flex-direction: column; }
  .warmup-center-actions { display: grid; grid-template-columns: 40px minmax(0, 1fr); }
  .warmup-center-actions .btn { width: 100%; min-width: 0; }
  .warmup-center-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .warmup-center-summary > div { min-height: 60px; padding: 9px 11px; border-bottom: 1px solid var(--border); }
  .warmup-center-summary > div:nth-child(2n) { border-right: 0; }
  .warmup-center-summary > div:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
  .warmup-failure-summary { padding: 7px 11px; gap: 6px 12px; }
  .warmup-center-band-head { min-height: 50px; padding: 9px 11px; flex-wrap: wrap; }
  .warmup-account-band-head { align-items: stretch; flex-direction: column; }
  .warmup-account-filters { width: 100%; grid-template-columns: 120px minmax(0, 1fr); }
  .warmup-plan-row { min-height: 0; padding: 12px; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .warmup-plan-accounts strong { white-space: normal; overflow-wrap: anywhere; }
  .warmup-plan-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .warmup-plan-actions .btn { width: 100%; min-width: 0; }
  .wizard-warmup-preview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wizard-warmup-preview-metrics > div:nth-child(2n) { border-right: 0; }
  .wizard-warmup-preview-metrics > div:nth-child(-n + 2) { border-bottom: 1px solid var(--border); }
  .warmup-business-row { min-height: 0; padding: 12px; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; }
  .warmup-business-name,
  .warmup-business-metrics,
  .warmup-business-schedule { grid-column: 1 / -1; }
  .warmup-business-row > .btn { grid-column: 2; grid-row: 1; }
  .warmup-account-table-head { display: none; }
  .warmup-account-row { min-height: 0; padding: 11px 12px; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; }
  .warmup-account-name { grid-column: 1; grid-row: 1; }
  .warmup-account-status { grid-column: 2; grid-row: 1; justify-items: end; }
  .warmup-account-status small { max-width: 42vw; }
  .warmup-account-source { grid-column: 1; grid-row: 2; }
  .warmup-account-cycles { grid-column: 2; grid-row: 2; color: var(--text-secondary); font-size: 11px; }
  .warmup-account-cycles::before { content: "周期 "; color: var(--text-muted); font-weight: 400; }
  .warmup-account-last { grid-column: 1 / -1; grid-row: 3; padding-top: 6px; border-top: 1px solid var(--border); }
  .warmup-account-last::before { content: "最近完成 "; color: var(--text-muted); }

  :root {
    --mobile-nav-height: calc(68px + env(safe-area-inset-bottom));
    --mobile-page-gutter: 10px;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
    background: #f4f7f9;
    overscroll-behavior: none;
  }

  body {
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: 100%;
  }

  .app-container {
    height: var(--mobile-visual-height, 100dvh);
    min-height: 100svh;
    grid-template-columns: minmax(0, 1fr);
  }

  .main-content {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    height: 100%;
    min-height: 0;
  }

  .content-area {
    min-height: 0;
    padding: 12px var(--mobile-page-gutter) 16px;
    overflow-y: auto;
    overflow-x: clip;
    overscroll-behavior-y: contain;
    scroll-padding-top: 12px;
    scroll-padding-bottom: 24px;
    -webkit-overflow-scrolling: touch;
  }

  .content-area > .panel.active {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  .panel,
  .panel > .card,
  .card,
  .form-group,
  .card-title {
    min-width: 0;
  }

  .topbar {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .mobile-bottom-nav {
    min-height: var(--mobile-nav-height);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .mobile-bottom-nav button,
  .topbar button,
  .card-actions button,
  .modal-footer .btn {
    touch-action: manipulation;
  }

  .content-area button:active,
  .mobile-bottom-nav button:active,
  .modal-footer .btn:active {
    transform: scale(0.98);
  }

  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card-actions {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    overflow: visible;
  }

  .card-actions .btn {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    white-space: normal;
  }

  .card-actions .btn-icon {
    flex: 0 0 38px;
  }

  .table-wrapper::-webkit-scrollbar,
  .group-table-wrap::-webkit-scrollbar {
    display: none;
  }

  .table-wrapper,
  .group-table-wrap {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  /*
   * Touch screens should never require horizontal scrolling just to reach an
   * action.  Compact control groups wrap or use a disclosure sheet instead.
   */
  .mobile-action-disclosure {
    display: inline-flex;
    min-height: 40px;
    padding: 7px 11px;
    align-items: center;
    justify-content: center;
    border: 1px solid #b9ddea;
    border-radius: 8px;
    background: #eaf7fb;
    color: #087eae;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
  }

  #accounts .toolbar-right {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 7px;
  }

  #accounts .batch-actions-bar {
    display: none;
    width: 100%;
    overflow: visible;
  }

  #accounts .batch-actions-bar.mobile-expanded {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
    border: 1px solid #dce8ed;
    border-radius: 10px;
    background: #fff;
  }

  #accounts .batch-actions-bar .batch-sep {
    display: none;
  }

  #accounts .batch-actions-bar .btn-batch,
  #accounts .batch-actions-bar .mobile-page-select-all {
    min-width: 0;
    min-height: 42px;
    margin: 0;
    white-space: normal;
  }

  #accounts .batch-actions-bar .mobile-page-select-all {
    justify-content: center;
  }

  #accounts .stats-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    padding-bottom: 0;
  }

  #accounts .stats-tab {
    min-width: 0;
    min-height: 36px;
    padding: 5px 4px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  #accounts .account-stats-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 7px;
  }

  #accounts .stats-tabs {
    width: 100%;
  }

  #accounts .stats-extras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
    padding-top: 7px;
    gap: 6px;
  }

  #accounts .stat-extra {
    min-width: 0;
    text-align: center;
  }

  #accounts .console-table td:nth-child(5) {
    grid-column: 1 / -1;
    align-items: flex-start;
  }

  #accounts .console-table .account-state-stack {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 6px;
  }

  #accounts .console-table .account-device-state {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #accounts .console-table .note-cell {
    max-width: none;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #accounts .console-table .action-cell {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
  }

  #accounts .console-table .action-cell .btn-icon-sm {
    width: 100%;
    min-width: 0;
    height: 38px;
    margin: 0;
    border: 1px solid #e2e8ec;
    border-radius: 7px;
    background: #f8fafb;
    color: #40515b;
    opacity: 1;
  }

  #groups .group-cat-tabs,
  .picker-group-tabs,
  .wiz-acct-groups {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
  }

  #groups .group-cat-tabs > *,
  .picker-group-tabs > *,
  .wiz-acct-groups > * {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    white-space: normal;
  }

  .wizard-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
  }

  .wizard-step {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #scraper > .action-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding: 8px var(--mobile-page-gutter);
  }

  #scraper > .action-bar .btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  /* All dialogs use a consistent bottom-sheet layout on touch devices. */
  .ag-overlay {
    align-items: flex-end;
    padding: 0;
    overflow: hidden;
  }

  .ag-modal {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    padding: 16px;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
  }

  .ag-style-tags {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .ag-style-tag {
    width: 100%;
    min-width: 0;
  }

  .ad-gen-row {
    width: 100%;
  }

  .ad-gen-row select {
    flex: 1 1 130px !important;
    min-height: 42px;
  }

  .modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal-overlay {
    align-items: flex-end;
    padding: 0;
    overflow: hidden;
  }

  .modal-content,
  .modal-overlay > .modal-content,
  .voice-clip-manager-modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(92dvh, var(--mobile-visual-height, 100dvh)) !important;
    margin: 0;
    border-radius: 16px 16px 0 0 !important;
  }

  .voice-clip-manager-modal {
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }

  #loginCodeModal .login-code-popup {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    box-sizing: border-box;
  }

  #loginCodeModal .lcp-code {
    font-size: 32px;
    letter-spacing: 6px;
  }

  .modal-body {
    padding: 14px;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .modal-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .modal-footer .btn {
    width: 100%;
    min-height: 44px;
    margin: 0;
  }

  .modal-footer .btn:only-child {
    grid-column: 1 / -1;
  }

  /* The virtual keyboard gets the whole lower viewport instead of covering
     the last form fields with the bottom navigation. */
  body.mobile-keyboard-open .mobile-bottom-nav {
    display: none;
  }

  body.mobile-keyboard-open .content-area {
    scroll-padding-bottom: 36px;
  }

  body.mobile-keyboard-open .modal-content {
    max-height: min(96dvh, var(--mobile-visual-height, 100dvh)) !important;
  }

  body.mobile-keyboard-open .log-footer {
    display: none !important;
  }
}

@media (max-width: 520px) {
  :root {
    --mobile-page-gutter: 8px;
  }

  .form-row,
  #config .form-row,
  #member .form-row,
  #scraper .form-row,
  #channelMover .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-header {
    align-items: flex-start;
  }

  .card-actions {
    width: 100%;
    margin-left: 0;
  }

  .card-actions .btn,
  .card-actions .btn-icon {
    flex: 0 0 auto;
  }

  .mobile-bottom-nav button {
    min-height: 58px;
    font-size: 10px;
  }

  .mobile-nav-icon {
    width: 38px;
  }

  #accounts .stats-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wizard-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile interaction pass: every primary control remains reachable through
   vertical scrolling and tapping. No feature row depends on a sideways drag. */
@media (max-width: 768px) {
  html,
  body,
  .app-container,
  .main-content,
  .content-area {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    overscroll-behavior-x: none;
  }

  .panel,
  .panel > *,
  .card,
  .card > *,
  .modal-content,
  .modal-body {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .card-header {
    flex-wrap: wrap;
  }

  .card-title,
  .hint,
  .task-entry-copy,
  .task-entry-copy strong,
  .task-entry-copy small,
  .task-card,
  .template-card,
  .group-link,
  .proxy-card,
  .modal-header h3 {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px !important;
  }

  button,
  [role="button"],
  .settings-tab,
  .login-tab,
  .stats-tab,
  .picker-tab,
  .cat-tab {
    touch-action: manipulation;
  }

  /* Segment controls become visible grids instead of swipeable strips. */
  .settings-tabs,
  .login-tabs,
  .broadcast-tabs,
  .log-view-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    overflow: visible;
    white-space: normal;
  }

  .settings-tab,
  .login-tab,
  .broadcast-tabs .tab,
  .log-view-tab {
    min-width: 0;
    min-height: 42px;
    padding: 7px 6px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .settings-tabs {
    top: -12px;
    padding: 7px;
    border: 1px solid #e1e8ec;
  }

  .settings-actions {
    position: sticky;
    bottom: -16px;
    z-index: 18;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(244, 247, 249, 0), #f4f7f9 18%);
  }

  .settings-actions .btn {
    width: 100%;
    min-height: 46px;
  }

  .toolbar-row,
  .group-toolbar,
  .picker-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 8px;
    align-items: stretch;
  }

  .toolbar-left,
  .toolbar-right,
  .picker-toolbar > *,
  .group-toolbar > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .picker-select-all {
    min-height: 42px;
    padding: 0 12px;
    justify-content: center;
    border: 1px solid #dce5e9;
    border-radius: 8px;
    background: #f8fafb;
  }

  .action-bar,
  #scraper > .action-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .action-bar .btn,
  #scraper > .action-bar .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    white-space: normal;
  }

  .task-card-actions,
  .template-card-actions,
  .proxy-card-actions,
  .modal-actions,
  .group-batch-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .task-card-actions > *,
  .template-card-actions > *,
  .proxy-card-actions > *,
  .modal-actions > *,
  .group-batch-bar > button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    white-space: normal;
  }

  .group-batch-bar > span {
    grid-column: 1 / -1;
  }

  .table-pagination,
  #groups .table-pagination,
  .picker-pagination {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 44px;
    gap: 8px;
    overflow: visible;
    align-items: center;
  }

  .table-pagination > span,
  #groups .table-pagination > span {
    min-width: 0;
    padding-top: 0;
    overflow-wrap: anywhere;
  }

  .pagination-actions,
  #groups .pagination-actions {
    position: static;
    display: grid;
    grid-template-columns: 40px minmax(54px, auto) 40px;
    gap: 4px;
  }

  .pagination-actions .btn-icon-sm {
    width: 40px;
    height: 40px;
  }

  /* Compact status information stays readable without becoming a carousel. */
  .global-status-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 38px;
    max-height: none;
    gap: 8px;
    overflow: hidden;
  }

  .status-bar-left,
  .status-bar-tasks,
  .status-bar-right {
    min-width: 0;
  }

  .status-bar-tasks {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status-bar-right {
    display: none;
  }

  /* The log inspector uses a vertical control layout on a narrow viewport. */
  body.mobile-console-open .log-footer {
    overflow-x: hidden;
  }

  .log-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .log-view-tabs {
    grid-column: 1;
  }

  .log-close-btn {
    grid-column: 2;
    grid-row: 1;
  }

  .log-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
    gap: 6px;
    overflow: visible;
  }

  .log-actions > *,
  .log-compact-select,
  .log-account-filter,
  .terminal-log-search,
  .backend-log-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .terminal-log-stream,
  .backend-log-content,
  .terminal-log-line,
  .backend-log-line {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
  }

.modal-content {
    overflow-x: hidden;
  }

  .modal-body {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .modal-header {
    gap: 8px;
  }

  .modal-header h3 {
    flex: 1;
  }

  .modal-close,
  .mobile-more-close,
  .btn-icon,
  .btn-icon-sm {
    touch-action: manipulation;
  }

}

@media (max-width: 420px) {
  .task-card-actions,
  .template-card-actions,
  .proxy-card-actions,
  .modal-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #newtask .template-primary-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 360px) {
  #accounts .console-table .action-cell {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ag-style-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Task center: template cards remain operable without horizontal scrolling. */
@media (max-width: 768px) {
  #newtask .nt-templates-card {
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  #newtask .nt-templates-card > .card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 0 2px 8px;
  }

  #newtask .nt-templates-card > .card-header .card-actions {
    display: inline-flex;
    width: auto;
    min-width: 0;
    margin-left: 0;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
  }

  #newtask .template-sync-status {
    max-width: 132px;
    min-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #newtask .template-refresh-btn {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  #newtask .template-card {
    width: 100%;
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
    content-visibility: auto;
    contain-intrinsic-size: auto 248px;
  }

  #newtask .template-card-header {
    align-items: flex-start;
    gap: 7px;
  }

  #newtask .template-card-name {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  #newtask .template-card-type {
    min-width: 0;
    max-width: 46%;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #newtask .template-card-meta {
    margin-bottom: 8px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  #newtask .template-card-accounts {
    margin-bottom: 8px;
  }

  #newtask .tpl-acct-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  #newtask .tpl-acct-chip {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #newtask .template-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    width: 100%;
  }

  #newtask .template-primary-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
  }

  #newtask .template-primary-actions .tpl-launch-btn,
  #newtask .template-primary-actions .tpl-atc-btn {
    grid-column: 1 / -1;
  }

  #newtask .template-utility-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
  }

  #newtask .template-card-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0;
    padding: 7px 8px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  #newtask .template-card-actions .template-quick-icon {
    width: 100%;
    min-width: 0;
  }

  #newtask .tpl-running-section,
  #newtask .tpl-queued-section {
    margin: 8px 0;
    padding: 8px;
    border-radius: 6px;
  }

  #newtask .tpl-running-progress {
    height: 24px;
    margin-bottom: 8px;
  }

  #newtask .tpl-running-text {
    min-width: 0;
    padding: 0 6px;
    font-size: 10.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #newtask .tpl-running-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #newtask .tpl-running-controls > .btn,
  #newtask .tpl-runtime-utility .btn {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 6px;
  }

  #newtask .tpl-runtime-utility {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
    gap: 6px;
  }

  #newtask .tpl-queued-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #newtask .tpl-queued-summary {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #newtask .tpl-queued-section .tpl-runtime-utility {
    grid-template-columns: 40px 40px minmax(0, 1fr);
  }

  #newtask .task-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  #newtask .task-overview > span {
    min-width: 0;
    padding: 7px 4px;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #newtask .task-card {
    min-width: 0;
    padding: 10px;
  }

  #newtask .task-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #newtask .task-card-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    margin: 0;
  }
}

@media (max-width: 360px) {
  #newtask .template-sync-status {
    max-width: 96px;
  }

  #newtask .tpl-acct-chips {
    grid-template-columns: minmax(0, 1fr);
  }
}