/* ==========================================================================
   Mobile Responsiveness
   ========================================================================== */

/* --- Safe area insets for notched devices (iPhone X+, etc.) -------------- */
@supports (padding: env(safe-area-inset-bottom)) {
    .focus-flow-header {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
}

/* --- Tablet + phone (max-width: 768px) ---------------------------------- */
@media (max-width: 768px) {
    /* Ensure dashboard fills exactly the viewport on mobile */
    .focus-flow-container {
        overflow: hidden;
    }

    /* ---- Header ---- */
    .focus-flow-header {
        padding: 0.5rem 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .focus-flow-header h1 {
        font-size: 0.95rem;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .focus-flow-header .header-actions {
        gap: 0.5rem;
    }

    .total-spend-badge,
    .waiting-badge {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    .focus-flow-header .new-session-button {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    /* ---- Session rail ---- */
    .session-rail {
        padding: 0.5rem;
        gap: 0.4rem;
    }

    .session-pill {
        padding: 0.4rem 0.6rem;
        gap: 0.35rem;
        border-radius: 16px;
    }

    .pill-name {
        max-width: 120px;
    }

    .pill-folder {
        font-size: 0.8rem;
    }

    .pill-hostname {
        font-size: 0.65rem;
    }

    .pill-branch {
        font-size: 0.6rem;
    }

    .pill-cost {
        font-size: 0.65rem;
        padding: 0.05rem 0.25rem;
    }

    .pill-status {
        font-size: 0.5rem;
    }

    .pill-stop,
    .pill-pause,
    .pill-leave,
    .pill-delete {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .pill-role-badge {
        font-size: 0.55rem;
        padding: 0.1rem 0.3rem;
    }

    .pill-paused-badge {
        font-size: 0.6rem;
    }

    .pill-version-badge {
        font-size: 0.55rem;
    }

    .pill-menu-toggle {
        padding: 0.35rem 0.45rem;
    }

    /* ---- Session view header ---- */
    .session-view-header {
        padding: 0.5rem 0.75rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .session-view-header .session-name {
        font-size: 0.9rem;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .session-view-header .session-hostname {
        display: none;
    }

    .session-view-header .session-path {
        display: none;
    }

    .session-view-header .status {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
    }

    .session-view-header .session-cost {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }

    /* ---- Messages area ---- */
    .session-view-messages {
        padding: 0.75rem;
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- Input area ---- */
    .session-view-input {
        padding: 0.75rem;
        gap: 0.5rem;
        flex-shrink: 0;
        align-items: flex-end;
    }

    .session-view-input .input-prompt {
        font-size: 1rem;
    }

    .session-view-input .message-input {
        flex: 1;
        min-width: 0;
        padding: 0.6rem 0.75rem;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    .session-view-input .send-button {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }

    .send-button-container .send-button {
        padding: 0.6rem 1rem;
    }

    .voice-button {
        width: 36px;
        height: 36px;
    }

    .voice-button svg {
        width: 18px;
        height: 18px;
    }

    /* ---- Dashboard page ---- */
    .dashboard-container {
        padding: 1rem;
    }

    .dashboard-header {
        margin-bottom: 1rem;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .header-button {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }

    .sessions-list {
        gap: 0.75rem;
    }

    .session-portal {
        border-radius: 6px;
    }

    /* Hover transform doesn't work well on touch */
    .session-portal:hover {
        transform: none;
    }

    .empty-state {
        padding: 2rem 1rem;
    }

    .onboarding-container {
        padding: 1rem;
    }

    .onboarding-content h2 {
        font-size: 1.2rem;
    }

    .onboarding-step {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .code-block {
        padding: 0.75rem;
        font-size: 0.85rem;
        overflow-x: auto;
    }

    /* Modals go near-fullscreen on mobile */
    .modal-content {
        width: 95%;
        max-width: none;
        padding: 1rem;
        max-height: 90dvh;
        overflow-y: auto;
    }

    /* ---- Messages ---- */
    .claude-message {
        margin-bottom: 0.75rem;
    }

    .claude-message .message-header {
        padding: 0.4rem 0.75rem;
        gap: 0.5rem;
    }

    .claude-message .message-body {
        padding: 0.75rem;
    }

    .message-type-badge {
        font-size: 0.65rem;
        padding: 0.2rem 0.5rem;
    }

    /* Init info stacks better on mobile */
    .init-row {
        flex-direction: column;
        gap: 0.25rem;
    }

    .init-label {
        min-width: unset;
        font-size: 0.75rem;
    }

    .init-value {
        font-size: 0.8rem;
        word-break: break-all;
    }

    .init-details {
        gap: 0.5rem;
    }

    .detail-group {
        padding: 0.25rem 0.4rem;
    }

    /* Usage badge wraps on small screens */
    .assistant-message .usage-badge {
        margin-left: 0;
    }

    /* ---- Markdown ---- */
    .md-code-block .md-code {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
    }

    .md-table-header,
    .md-table-cell {
        padding: 0.35rem 0.5rem;
        font-size: 0.8rem;
    }

    .md-h1 { font-size: 1.25rem; }
    .md-h2 { font-size: 1.1rem; }
    .md-h3 { font-size: 1rem; }

    /* ---- Tools ---- */
    .tool-use {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    .tool-use-header {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .bash-command-inline {
        max-width: 100%;
    }

    .bash-command {
        font-size: 0.8rem;
        padding: 0.4rem;
    }

    .tool-args {
        font-size: 0.75rem;
    }

    .tool-result {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    .tool-result-content {
        font-size: 0.75rem;
        max-height: 150px;
    }

    .diff-view {
        font-size: 0.75rem;
        max-height: 300px;
    }

    .write-content {
        font-size: 0.75rem;
        max-height: 200px;
    }

    /* Result stats bar wraps */
    .result-message .result-stats-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: 0.75rem;
    }

    /* ---- Permission prompts ---- */
    .permission-prompt {
        margin: 0.5rem 0.75rem;
        padding: 0.75rem;
    }

    .permission-title {
        font-size: 0.85rem;
    }

    .permission-input {
        padding: 0.5rem;
        max-height: 100px;
    }

    .permission-input pre {
        font-size: 0.75rem;
    }

    .permission-options {
        font-size: 0.85rem;
    }

    .permission-option {
        padding: 0.35rem 0.5rem;
    }

    /* AskUserQuestion - more compact */
    .ask-user-question .question-text {
        font-size: 0.9rem;
    }

    .ask-user-question .question-option {
        padding: 0.4rem 0.5rem;
    }

    .ask-user-question .option-label {
        font-size: 0.85rem;
    }

    .ask-user-question .option-description {
        font-size: 0.75rem;
    }

    /* ---- Reconnection banner ---- */
    .reconnection-banner {
        padding: 0.4rem 0.75rem;
    }

    .reconnection-banner .reconnection-text {
        font-size: 0.8rem;
    }

    /* ---- Server shutdown banner ---- */
    .server-shutdown-banner {
        padding: 0.5rem 0.75rem;
    }

    .server-shutdown-banner .shutdown-text {
        font-size: 0.8rem;
    }

    /* ---- Share dialog ---- */
    .share-dialog {
        max-width: 100%;
        max-height: 85dvh;
        border-radius: 8px;
    }

    .share-dialog-overlay {
        padding: 0.5rem;
        align-items: flex-end;
    }

    .share-dialog-add {
        flex-direction: column;
        gap: 0.4rem;
    }

    .share-dialog-add input,
    .share-dialog-add select,
    .share-dialog-add button {
        width: 100%;
    }

    .share-dialog-add input,
    .share-dialog-add select {
        font-size: 16px; /* Prevent iOS zoom */
    }

    .share-dialog-member {
        padding: 0.6rem 0.75rem;
        gap: 0.5rem;
    }

    /* ---- Launch dialog ---- */
    .launch-dialog {
        max-width: 100%;
        width: 95%;
        padding: 1.25rem;
        max-height: 85dvh;
        overflow-y: auto;
    }

    .launch-dialog h3 {
        font-size: 1.1rem;
    }

    .launch-field input {
        font-size: 16px; /* Prevent iOS zoom */
    }

    .dir-browser {
        max-height: 180px;
    }

    .launch-actions {
        flex-direction: column-reverse;
    }

    .launch-actions button {
        width: 100%;
    }

    /* ---- Image lightbox ---- */
    .image-lightbox {
        padding: 0.5rem;
    }

    .image-lightbox-content img {
        max-height: 75vh;
    }

    .image-lightbox-controls {
        gap: 0.5rem;
    }

    /* ---- Anthropic error messages ---- */
    .anthropic-error-content {
        flex-direction: column;
        gap: 0.5rem;
    }

    .anthropic-error-content .error-icon {
        font-size: 1.5rem;
    }
}

/* --- Phone-only (max-width: 480px) -------------------------------------- */
@media (max-width: 480px) {
    .focus-flow-header h1 {
        font-size: 0.85rem;
    }

    /* Hide some elements to save space */
    .total-spend-badge {
        display: none;
    }

    .session-pill {
        padding: 0.35rem 0.5rem;
    }

    .pill-name {
        max-width: 90px;
    }

    .pill-folder {
        font-size: 0.75rem;
    }

    .pill-cost {
        display: none;
    }

    .session-view-header .session-cost {
        font-size: 0.7rem;
    }

    .session-view-input {
        padding: 0.5rem;
    }

    .session-view-input .input-prompt {
        display: none;
    }

    /* Dashboard even tighter */
    .dashboard-container {
        padding: 0.75rem;
    }

    .dashboard-header {
        margin-bottom: 0.75rem;
    }

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

    .section-title {
        font-size: 1rem;
    }

    /* Messages even more compact */
    .session-view-messages {
        padding: 0.5rem;
    }

    .claude-message .message-body {
        padding: 0.5rem;
    }

    /* Tool renders ultra-compact */
    .tool-use,
    .tool-result {
        padding: 0.3rem 0.5rem;
    }

    .bash-command-inline,
    .glob-pattern-inline,
    .grep-pattern-inline {
        font-size: 0.8rem;
    }

    /* Dialogs go fullscreen */
    .launch-dialog-backdrop,
    .share-dialog-overlay {
        padding: 0;
        align-items: stretch;
    }

    .launch-dialog,
    .share-dialog {
        border-radius: 0;
        max-height: 100dvh;
        width: 100%;
    }

    .modal-content {
        border-radius: 0;
        width: 100%;
        max-height: 100dvh;
    }

    /* Overload/compaction messages */
    .overload-content,
    .compaction-content {
        flex-direction: column;
        gap: 0.5rem;
    }

    .overload-icon,
    .compaction-icon {
        font-size: 1.2rem;
    }
}

/* --- Keyboard-open behavior --------------------------------------------- *
 * When the virtual keyboard opens on mobile, the browser resizes the visual
 * viewport. We use 100dvh (dynamic viewport height) in session-layout.css
 * which automatically accounts for this. These rules ensure the input area
 * stays anchored to the bottom edge above the keyboard.
 *
 * Key behaviors:
 *  - .focus-flow-container uses height:100dvh -> shrinks when keyboard opens
 *  - .session-view-messages uses flex:1 -> absorbs the shrink
 *  - .session-view-input uses flex-shrink:0 -> stays full size
 *  - The send-mode-dropdown uses bottom:100% so it floats above input
 *  - iOS 16px font-size on inputs prevents auto-zoom
 */

/* Touch-friendly: enlarge interactive targets for coarse pointers */
@media (pointer: coarse) {
    .pill-menu-toggle {
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pill-menu-option {
        min-height: 44px;
        padding: 0.7rem 0.8rem;
        justify-content: center;
    }

    .permission-option {
        min-height: 44px;
        padding: 0.5rem 0.6rem;
    }

    .ask-user-question .question-option {
        min-height: 44px;
    }

    .ask-user-question .submit-all-answers {
        min-height: 44px;
    }

    .header-button {
        min-height: 40px;
    }

    .send-mode-toggle {
        min-width: 40px;
    }

    .dir-entry {
        min-height: 40px;
    }
}