/* Mobile responsive styles — preserving cottagecore aesthetic while adapting for small screens */

/* Safe area for notched phones */
:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Base mobile adjustments (all devices) ── */
@media screen and (max-width: 768px) {
    /* Reduce outer padding on small screens */
    .app-container {
        padding: 0 12px;
        max-width: 100%;
    }

    /* More compact header */
    .app-header {
        padding: 9px 10px;
        margin-top: 8px;
        border-radius: 20px;
    }

    .app-title {
        font-size: 1.55rem;
    }

    .header-left {
        gap: 8px;
    }

    .header-controls {
        gap: 6px;
        padding: 3px;
    }

    .night-toggle {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .new-convo-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    /* Identity bar — horizontal scroll on mobile */
    .identity-bar {
        gap: 6px;
        padding: 6px 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .identity-bar::-webkit-scrollbar {
        display: none;
    }

    /* Scroll fade hint — shows content continues off-screen */
    .identity-bar::after {
        content: '';
        position: sticky;
        right: 0;
        flex-shrink: 0;
        width: 24px;
        min-height: 100%;
        background: linear-gradient(to right, transparent, var(--bg-page));
        pointer-events: none;
    }

    /* Smaller identity buttons */
    .identity-btn {
        padding: 8px 14px;
        font-size: 0.8rem;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Pack Hall + Stories buttons — compact on mobile */
    .pack-hall-btn,
    .stories-btn {
        padding: 8px 14px;
        font-size: 0.8rem;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Sanctuary viewer — reduced height */
    .sanctuary-viewer {
        height: 160px;
    }

    /* Smaller portrait */
    .sanctuary-portrait {
        height: 150px;
        max-width: 140px;
        right: 12px;
    }

    /* Adjust sanctuary content spacing */
    .sanctuary-content {
        padding: 12px 14px;
        right: 150px;
        left: 0;
        bottom: 0;
    }

    .sanctuary-identity-name {
        font-size: 1.3rem;
    }

    .sanctuary-location {
        font-size: 0.8rem;
    }

    .sanctuary-mood {
        font-size: 0.75rem;
        max-width: 200px;
    }

    /* Chat area adjustments */
    .chat-area {
        padding: 13px;
    }

    .continuity-card {
        padding: 9px 10px;
    }

    .continuity-header {
        align-items: center;
    }

    .continuity-title {
        font-size: 0.88rem;
    }

    .continuity-identity {
        font-size: 0.7rem;
    }

    .continuity-toggle {
        padding: 4px 8px;
        font-size: 0.68rem;
    }

    .continuity-headline {
        font-size: 0.84rem;
        line-height: 1.28;
    }

    .continuity-pill {
        font-size: 0.7rem;
        padding: 4px 7px;
    }

    .messages-container {
        padding: 6px 0;
        gap: 10px;
    }

    /* Chat bubbles take more width on mobile */
    .message-row {
        max-width: 95%;
    }

    .message-bubble {
        padding: 10px 14px;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    /* Adjust empty state */
    .empty-chat {
        padding: 30px 16px;
    }

    .empty-chat-title {
        font-size: 1.5rem;
    }

    .empty-chat-subtitle {
        font-size: 0.85rem;
    }

    /* Input area */
    .input-area {
        padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .input-wrapper {
        padding: 8px 10px 8px 8px;
        border-radius: 18px;
    }

    #message-input {
        font-size: 0.9rem;
        max-height: 100px;
    }

    .send-btn {
        width: 42px;
        height: 42px;
        font-size: 0.9rem;
    }

    /* Expanded sanctuary overlay — single column grid */
    .sanctuary-expanded {
        padding: 24px 16px;
    }

    .sanctuary-expanded-close {
        top: 12px;
        right: 12px;
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .sanctuary-expanded-title {
        font-size: 1.6rem;
        margin-top: 12px;
    }

    .sanctuary-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 100%;
    }

    .sanctuary-room-card {
        max-width: 400px;
        margin: 0 auto;
        width: 100%;
    }

    .sanctuary-room-bg {
        height: 160px;
    }

    .sanctuary-room-portrait {
        height: 140px;
        right: 12px;
    }

    /* Tool cards */
    .tool-card {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .tool-card-body {
        font-size: 0.75rem;
        max-height: 100px;
    }

    /* Thinking cards */
    .thinking-card {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .thinking-card-body {
        font-size: 0.75rem;
        max-height: 200px;
    }

    /* Reduce main content gap */
    .main-content {
        gap: 10px;
    }

    /* Card styling */
    .card {
        border-radius: 16px;
    }
}

/* ── Tablet adjustments (481px-768px) ── */
@media screen and (min-width: 481px) and (max-width: 768px) {
    /* Slightly larger on tablets */
    .app-title {
        font-size: 1.4rem;
    }

    .sanctuary-viewer {
        height: 180px;
    }

    .sanctuary-portrait {
        height: 170px;
        max-width: 160px;
    }

    .sanctuary-content {
        right: 180px;
    }

    .sanctuary-identity-name {
        font-size: 1.4rem;
    }

    .message-row {
        max-width: 90%;
    }

    /* Two-column grid for tablets */
    .sanctuary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sanctuary-room-card {
        max-width: none;
    }
}

/* ── Phone-specific (320px-480px) ── */
@media screen and (max-width: 480px) {
    /* Extra compact header on phones */
    .app-title {
        font-size: 1.2rem;
    }

    .current-identity-label {
        font-size: 0.95rem;
        padding: 3px 7px;
    }

    .header-controls {
        gap: 4px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .night-toggle {
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }

    .new-convo-btn {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    /* Even smaller identity buttons on phones */
    .identity-btn {
        padding: 7px 12px;
        font-size: 0.75rem;
        border-radius: 10px;
    }

    .pack-hall-btn,
    .stories-btn {
        padding: 7px 12px;
        font-size: 0.75rem;
        border-radius: 10px;
    }

    /* Compact sanctuary viewer */
    .sanctuary-viewer {
        height: 140px;
    }

    .sanctuary-portrait {
        height: 130px;
        max-width: 120px;
        right: 8px;
    }

    .sanctuary-content {
        padding: 10px 12px;
        right: 140px;
    }

    .sanctuary-identity-name {
        font-size: 1.1rem;
    }

    .sanctuary-location {
        font-size: 0.75rem;
    }

    .sanctuary-mood {
        font-size: 0.7rem;
        max-width: 160px;
    }

    /* Tighter chat spacing */
    .chat-area {
        padding: 10px;
    }

    .messages-container {
        gap: 8px;
    }

    .message-bubble {
        padding: 9px 12px;
        font-size: 0.88rem;
    }

    .message-time {
        font-size: 0.65rem;
    }

    /* Input area touch-friendly */
    .input-wrapper {
        padding: 6px 9px;
    }

    #message-input {
        font-size: 0.88rem;
        min-height: 22px;
    }

    .send-btn {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
    }

    /* Empty state compact */
    .empty-chat {
        padding: 24px 12px;
    }

    .empty-chat-title {
        font-size: 1.3rem;
    }

    .empty-chat-subtitle {
        font-size: 0.8rem;
        max-width: 240px;
    }

    /* Expanded sanctuary overlay */
    .sanctuary-expanded {
        padding: 20px 12px;
    }

    .sanctuary-expanded-title {
        font-size: 1.4rem;
    }

    .sanctuary-room-bg {
        height: 140px;
    }

    .sanctuary-room-portrait {
        height: 120px;
    }

    .sanctuary-room-info {
        padding: 10px 12px;
    }

    .sanctuary-room-name {
        font-size: 1rem;
    }

    /* Slightly reduce message content formatting */
    .message-content code {
        font-size: 0.85em;
        padding: 1px 5px;
    }

    .message-content pre {
        padding: 10px;
        font-size: 0.8rem;
    }

    .message-content ul,
    .message-content ol {
        padding-left: 1.3em;
    }
}

/* ── Very small phones (max 360px) ── */
@media screen and (max-width: 360px) {
    .app-container {
        padding: 0 8px;
    }

    .app-title {
        font-size: 1.1rem;
    }

    .current-identity-label {
        font-size: 0.85rem;
        padding: 2px 5px;
    }

    .sanctuary-viewer {
        height: 120px;
    }

    .sanctuary-portrait {
        height: 110px;
        max-width: 100px;
    }

    .sanctuary-content {
        right: 120px;
        padding: 8px 10px;
    }

    .sanctuary-identity-name {
        font-size: 1rem;
    }

    .sanctuary-location {
        font-size: 0.7rem;
    }

    .sanctuary-mood {
        font-size: 0.65rem;
        max-width: 140px;
    }

    .message-bubble {
        padding: 8px 11px;
        font-size: 0.85rem;
    }

    .identity-btn {
        padding: 6px 10px;
        font-size: 0.7rem;
    }
}

/* ── Landscape orientation on phones ── */
@media screen and (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical height usage in landscape */
    .sanctuary-viewer {
        height: 120px;
    }

    .sanctuary-portrait {
        height: 110px;
        max-width: 100px;
    }

    .sanctuary-content {
        right: 120px;
    }

    .sanctuary-identity-name {
        font-size: 1.1rem;
    }

    .sanctuary-location {
        font-size: 0.75rem;
    }

    .sanctuary-mood {
        font-size: 0.7rem;
    }

    #message-input {
        max-height: 80px;
    }

    .empty-chat {
        padding: 20px 16px;
    }

    .empty-chat-title {
        font-size: 1.3rem;
    }

    /* Expanded sanctuary uses more columns in landscape */
    .sanctuary-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ── Sidebar mobile overrides ── */
@media screen and (max-width: 480px) {
    .sidebar {
        width: 280px;
    }

    .sidebar-toggle-btn {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .sidebar-title {
        font-size: 1.15rem;
    }

    .sidebar-convo-title {
        font-size: 0.82rem;
    }

    .sidebar-convo-preview {
        font-size: 0.72rem;
    }
}

@media screen and (max-width: 360px) {
    .sidebar {
        width: 260px;
    }
}

/* ── Image adjustments for mobile ── */
@media screen and (max-width: 480px) {
    .image-preview-thumb {
        width: 48px;
        height: 48px;
    }

    .image-preview {
        padding: 6px 10px;
    }

    .attach-btn {
        min-width: 40px;
        min-height: 40px;
        font-size: 1rem;
    }
}

/* ── Wellness modal mobile ── */
@media screen and (max-width: 480px) {
    .modal-card {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 80vh;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    .modal-overlay {
        align-items: flex-end;
    }

    .wellness-form {
        grid-template-columns: 1fr;
    }

    .hub-btn {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
    }

    /* Hub overlay — bottom sheet on mobile */
    .hub-overlay {
        align-items: flex-end;
    }

    .hub-panel {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        max-height: 85vh;
        overflow-y: auto;
    }

    .hub-grid {
        gap: 10px;
    }

    .hub-card {
        padding: 16px 10px;
        min-height: 44px;
    }

    .hub-card-icon {
        font-size: 1.5rem;
    }

    .hub-card-label {
        font-size: 0.8rem;
    }

    .hub-spaces-link {
        padding: 14px 20px;
        min-height: 44px;
    }
}

/* ── Copy button always visible on touch devices ── */
@media (hover: none) and (pointer: coarse) {
    .copy-msg-btn {
        opacity: 0.45;
        min-width: 32px;
        min-height: 32px;
    }

    .copy-msg-btn:active {
        opacity: 1;
        background: rgba(var(--identity-accent-rgb), 0.2);
    }

    /* Reactions always visible on touch */
    .reaction-btn {
        opacity: 0.55;
        min-width: 32px;
        min-height: 32px;
        justify-content: center;
    }

    .reaction-btn.active {
        opacity: 1;
    }

    /* Bookmark always visible on touch */
    .bookmark-btn {
        opacity: 0.4;
        min-width: 32px;
        min-height: 32px;
    }

    .bookmark-btn.active {
        opacity: 1;
    }
}

/* ── Touch-friendly improvements ── */
@media (hover: none) and (pointer: coarse) {
    /* Ensure buttons are touch-friendly (min 44x44px target) */
    .identity-btn {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .send-btn,
    .night-toggle,
    .settings-btn,
    .hub-btn,
    .hub-card,
    .hub-close-btn,
    .attach-btn,
    .modal-close-btn,
    .pack-hall-btn {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    .message-image,
    .message-image:hover {
        /* Disable hover zoom on touch */
        transform: none;
    }

    /* Remove hover effects on touch devices */
    .identity-btn:hover {
        transform: none;
    }

    .send-btn:hover {
        transform: none;
    }

    .night-toggle:hover,
    .hub-btn:hover {
        transform: none;
    }

    /* Keep active states for touch */
    .identity-btn:active {
        transform: scale(0.95);
    }

    .send-btn:active {
        transform: scale(0.95);
    }

    .night-toggle:active {
        transform: scale(0.95);
    }
}