/* Mobile layout — overflow containment, scroll regions, touch targets */

@media (max-width: 860px) {
  #app,
  .app-shell,
  .app-main,
  .app-main-inner,
  .project-page,
  .admin-page,
  .dash-home {
    min-width: 0;
    max-width: 100%;
  }

  /* ─── Project tabs: Regeln, Memory, Secrets, Telegram ─── */
  .project-page-header {
    padding: 10px 12px;
    gap: 8px;
    min-height: 48px;
  }

  .project-page-header h1 {
    font-size: var(--fs-sm);
  }

  .project-page-body {
    padding: 14px 12px calc(14px + var(--safe-bottom));
  }

  .proj-settings-hint {
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.45;
  }

  .proj-settings-hint code {
    word-break: break-all;
  }

  .proj-secrets-board {
    grid-template-columns: 1fr;
  }

  .context-editor-input,
  .proj-settings-textarea {
    min-height: 180px;
  }

  .context-editor-preview {
    min-height: 160px;
    max-height: min(42vh, 360px);
  }

  /* Preview uses message-content — keep code blocks inside the pane */
  .context-editor-preview.message-content pre {
    margin: 12px 0;
    max-width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
  }

  .context-editor-preview.message-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .proj-settings-footer {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
  }

  .proj-settings-footer .btn {
    min-height: 44px;
    padding: 10px 16px;
  }

  .proj-secret-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .proj-secret-key {
    word-break: break-all;
  }

  #proj-tg-form,
  .project-page-body .admin-form {
    max-width: 100% !important;
  }

  .project-page-body .admin-input,
  .project-page-body .admin-select {
    width: 100%;
    max-width: 100%;
  }

  /* ─── Settings ─── */
  .settings-page-body {
    width: 100%;
    max-width: 100%;
  }

  .settings-select {
    width: 100%;
    max-width: 100%;
  }

  /* On narrow screens stack the row controls below their labels. */
  .settings-row {
    align-items: stretch;
  }

  .settings-row .seg-toggle,
  .settings-row .settings-status {
    align-self: flex-start;
  }

  .settings-select-inline {
    width: 100%;
    max-width: 100%;
  }

  /* ─── Chat ─── */
  .chat-messages {
    margin: 6px 8px 0;
  }

  .chat-input-area {
    padding: 6px 8px calc(4px + var(--safe-bottom));
  }

  .chat-composer {
    max-width: 100%;
  }

  .composer-toolbar {
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
  }

  .composer-toolbar-left {
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
  }

  .composer-mode {
    max-width: 100%;
  }

  .session-header #agent-selector-container {
    min-width: 0;
    flex: 1;
    /* visible: otherwise the model dropdown is clipped and looks "dead" on mobile */
    overflow: visible;
  }

  .agent-selector {
    max-width: 100%;
    overflow: visible;
  }

  .agent-selector-btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .agent-selector-dropdown {
    z-index: 5000;
  }

  /* ─── Admin ─── */
  #admin-view.active {
    overflow: hidden;
  }

  .admin-page {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .admin-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .admin-header {
    padding: 10px 12px;
  }

  .admin-tab {
    padding: 10px 12px;
    min-height: 44px;
  }

  .admin-user-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .admin-user-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .adm-secret-row {
    flex-direction: column;
    align-items: stretch;
  }

  .adm-secret-actions {
    justify-content: flex-end;
  }

  .admin-backend-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .admin-input,
  .admin-select {
    width: 100%;
    max-width: 100%;
  }

  .admin-btn-row {
    flex-wrap: wrap;
  }

  .admin-btn-row .btn {
    min-height: 44px;
  }

  /* ─── Navigation touch targets ─── */
  .sb-nav-item,
  .sb-project-toggle {
    min-height: 44px;
  }

  .sb-tab-link {
    min-height: 40px;
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .dash-activity-item {
    min-height: 48px;
    padding: 14px 12px;
  }

  .dash-home-header {
    padding: 14px 12px 10px;
  }
}

@media (max-width: 480px) {
  .proj-settings-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .proj-settings-footer .btn {
    width: 100%;
  }
}