/* OpenClaw Mobile Optimization */

/* Viewport fix for mobile browsers (address bar, keyboard) */
@supports (height: 100dvh) {
  .shell { height: 100dvh !important; }
}

/* Touch-friendly: prevent double-tap zoom delay */
* { touch-action: manipulation; }

/* ── Mobile (<768px) ── */
@media (max-width: 768px) {
  /* Grid: single column, no sidebar */
  .shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-areas: "topbar" "content" !important;
  }

  /* Hide nav completely on mobile */
  .nav {
    display: none !important;
  }

  /* Topbar: compact single row */
  .topbar {
    padding: 6px 12px !important;
    height: auto !important;
    min-height: 40px;
    gap: 6px !important;
  }

  /* Hide verbose status pills */
  .topbar-status .pill .mono,
  .topbar-status .pill span:nth-child(2) {
    display: none !important;
  }

  .topbar-status .pill {
    padding: 3px 6px !important;
    font-size: 10px !important;
  }

  /* Chat content: use full width, tighter padding */
  .chat-content, .chat-messages, .content {
    padding: 8px 10px !important;
  }

  /* Chat bubbles: full width */
  .chat-message, .message, [class*="message"] {
    max-width: 100% !important;
  }

  /* ── Compose area: the main fix ── */
  .chat-compose {
    position: sticky !important;
    bottom: 0 !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    background: var(--bg, #12141a) !important;
    border-top: 1px solid var(--border, #27272a);
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
  }

  /* Input field: full width row, no iOS zoom */
  .chat-compose__field {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    order: 1 !important;
  }

  .chat-compose__field textarea {
    min-height: 40px !important;
    max-height: 120px !important;
    font-size: 16px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
    line-height: 1.4 !important;
    resize: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Buttons row: compact, right-aligned */
  .chat-compose__actions,
  .chat-compose > :not(.chat-compose__field) {
    order: 2 !important;
  }

  /* Send button + New session: side by side, touch-friendly */
  .chat-compose button,
  .chat-compose [class*="send"],
  .chat-compose [class*="submit"],
  .chat-compose [class*="session"] {
    min-height: 40px !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
  }

  /* Session selector dropdown: full width */
  .chat-session-picker, .chat-session {
    min-width: unset !important;
    font-size: 13px !important;
  }

  /* Config page: single column */
  .config-layout {
    grid-template-columns: 1fr !important;
    padding: 8px !important;
  }

  /* Modals/dialogs: full width */
  .dialog, .modal, [class*="dialog"], [class*="modal"] {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 85dvh !important;
    margin: auto !important;
  }

  /* Tables: scroll horizontally */
  table, .table-container {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
  }

  /* Code blocks in messages: wrap, don't overflow */
  pre, code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    font-size: 13px !important;
  }

  /* Split pane: fullscreen overlay on mobile */
  .chat-split-container--open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
  }
}

/* ── Small phones (<400px) ── */
@media (max-width: 400px) {
  .topbar {
    padding: 4px 8px !important;
  }

  .chat-compose {
    padding: 4px 6px !important;
  }

  .chat-compose__field textarea {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 16px !important;
  }

  /* Hide brand text on tiny screens */
  .topbar-left .brand-text,
  .topbar-left > span:not(:first-child) {
    display: none !important;
  }
}

/* ── Landscape phone ── */
@media (max-width: 768px) and (max-height: 500px) {
  .topbar {
    min-height: 32px !important;
    padding: 2px 8px !important;
  }

  .chat-compose__field textarea {
    min-height: 32px !important;
  }
}

/* ── iOS safe areas (notch + home indicator) ── */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .chat-compose {
      padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    }
  }
}