/* AI Maestro — Mobile-Optimized Layout */
/* Handles everything under 768px for phones and small tablets */

/* ── Phone (< 768px) ────────────────────────────────────── */
@media (max-width: 768px) {

  /* Full-screen layout — no sidebars */
  .dashboard {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    grid-template-areas:
      "header"
      "center"
      "input" !important;
    gap: 0;
    padding: 0;
    height: 100vh;
    height: 100dvh; /* dynamic viewport height for mobile browsers */
  }

  /* Hide sidebars on mobile */
  .sidebar-skills,
  .sidebar-timeline { display: none !important; }

  /* ── Header: compact mobile bar ── */
  .header {
    padding: 6px 10px;
    gap: 6px;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    min-height: 40px;
  }
  .header img { height: 22px !important; margin-right: 4px !important; }
  .header-title { font-size: 0.85rem; }
  /* Hide non-essential header buttons on phone */
  #admin-link, #settings-btn, #history-btn, #files-btn,
  #workspace-select, #new-session-btn, #session-tabs,
  #n8n-btn { display: none !important; }
  #health-dot { margin-right: 4px; }
  #status-bar { font-size: 0.7rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  #logout-btn { font-size: 0.7rem; padding: 2px 6px; }

  /* ── Center: full width response ── */
  .center-area {
    border-radius: 0;
    overflow: hidden;
  }

  /* Agent tabs: horizontal scroll */
  .agent-tabs {
    gap: 2px;
    padding: 4px 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .agent-tabs::-webkit-scrollbar { display: none; }
  .tab-btn {
    padding: 4px 12px;
    font-size: 0.75rem;
    flex-shrink: 0;
  }
  .routing-badge { font-size: 0.6rem; }

  /* Response pane: full height, touchable scroll */
  .response-pane {
    padding: 8px 12px;
    font-size: 0.85rem;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
  }
  .response-pane pre {
    font-size: 0.75rem;
    overflow-x: auto;
    max-width: calc(100vw - 24px);
  }
  .response-pane img,
  .response-pane video {
    max-width: 100% !important;
  }

  /* Review buttons */
  .review-btn {
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  /* ── Input bar: mobile chat style ── */
  .input-bar {
    border-radius: 0;
    border-top: 1px solid var(--color-border);
    padding: 6px 8px;
    gap: 6px;
    align-items: center;
    position: sticky;
    bottom: 0;
    background: var(--color-panel);
    z-index: 100;
  }

  #prompt-input {
    font-size: 16px; /* Prevents iOS zoom on focus */
    padding: 10px 14px;
    min-height: 80px; /* Bigger — can read what you type */
    max-height: 150px;
    border-radius: 12px;
    line-height: 1.4;
  }

  #mode-badge { display: none; } /* Hide mode badge on mobile — save space */
  #routing-override {
    font-size: 0.7rem;
    padding: 4px 6px;
    max-width: 70px;
  }
  #attach-btn { font-size: 0.8rem; padding: 4px 6px; }
  #submit-btn {
    padding: 6px 14px;
    font-size: 0.8rem;
    border-radius: 18px;
    height: 36px;
  }

  /* Attach preview: horizontal scroll */
  #attach-preview {
    max-height: 60px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  /* ── Slash command dropdown: bottom sheet ── */
  .slash-dropdown {
    bottom: 100%;
    left: 0;
    right: 0;
    max-height: 50vh;
    border-radius: 12px 12px 0 0;
  }
  .slash-item { padding: 10px 12px; }
  .slash-cmd { min-width: 90px; font-size: 0.8rem; }

  /* ── Token bar: compact ── */
  .token-bar {
    font-size: 0.65rem;
    padding: 2px 8px;
    gap: 8px;
  }
  .export-btn { font-size: 0.6rem; padding: 1px 6px; }

  /* ── Media cards: full width ── */
  .media-card { max-width: 100%; }
  .media-preview { max-height: 300px; }

  /* ── Welcome screen: mobile ── */
  .welcome-screen {
    padding: 20px;
  }
  .welcome-screen h2 { font-size: 1.2rem; }
  .welcome-modes { gap: 4px; }
  .mode-badge { font-size: 0.65rem; padding: 3px 8px; }

  /* ── Lightbox: fullscreen on mobile ── */
  .media-lightbox img {
    max-width: 95vw;
    max-height: 85vh;
  }

  /* ── Tool status: compact ── */
  .tool-status { font-size: 0.7rem; }

  /* ── Thinking block: compact ── */
  .thinking-block { font-size: 0.7rem; padding: 6px 8px; }

  /* ── Copy button: always visible on mobile (no hover) ── */
  .copy-btn { opacity: 1; font-size: 0.65rem; }
}

/* ── iOS Portrait specific fixes ── */

  /* Prevent iOS rubber-band bounce */
  html, body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  /* Full height including iOS Safari toolbar area */
  .dashboard {
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    overflow: hidden;
  }

  /* Response pane: fills all available space, scrollable */
  .center-area {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .response-pane {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: 12px;
  }

  /* Input bar: fixed to bottom, above iOS keyboard */
  .input-bar {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--color-panel);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
  }

  /* When iOS keyboard is open, adjust layout */
  .dashboard:has(#prompt-input:focus) .response-pane {
    padding-bottom: 60px;
  }

  /* Token bar: hide on mobile to save space */
  .token-bar { display: none; }

  /* Settings/History/Files panels: full screen overlay on mobile */
  .settings-panel, .history-panel, .files-panel {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100% !important; height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    z-index: 300;
  }

  /* n8n panel: bottom sheet on mobile */
  #n8n-panel {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: 70vh;
    border-radius: 12px 12px 0 0 !important;
  }

}

/* ── Small phone (< 380px) ── */
@media (max-width: 380px) {
  .header-title { display: none; } /* Just show logo */
  #routing-override { display: none; } /* Hide dropdown — use slash commands */
  #submit-btn { padding: 6px 10px; }
  .tab-btn { padding: 3px 8px; font-size: 0.7rem; }
}

/* ── Landscape phone ── */
@media (max-height: 500px) and (max-width: 900px) {
  .dashboard {
    grid-template-rows: auto 1fr auto !important;
  }
  .header { padding: 3px 8px; min-height: 30px; }
  .response-pane { font-size: 0.8rem; }
  #prompt-input { min-height: 30px; font-size: 14px; }
}

/* ── Safe area for notched phones (iPhone X+) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .input-bar {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
}

/* ── Pull-to-Refresh indicator ── */
#pull-refresh-indicator {
  position: fixed;
  top: 48px; /* below header */
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-panel, #161b22);
  border: 2px solid var(--color-border, #30363d);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.1s ease;
  pointer-events: none;
}

/* Arrow icon via CSS */
#pull-refresh-indicator::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-accent, #58a6ff);
  border-top-color: transparent;
  border-radius: 50%;
}

/* Ready state: pulsing ring */
#pull-refresh-indicator.ptr-ready {
  border-color: var(--color-accent, #58a6ff);
}
#pull-refresh-indicator.ptr-ready::before {
  border-color: var(--color-accent, #58a6ff);
  border-top-color: transparent;
}

/* Loading state: spinning */
#pull-refresh-indicator.ptr-loading::before {
  animation: ptr-spin 0.6s linear infinite;
}

@keyframes ptr-spin {
  to { transform: rotate(360deg); }
}