/* =========================================================
   responsive — mobile/tablet adjustments
   ========================================================= */

@media (max-width: 768px) {
    /* ----- header: compact single row ----- */
    .header {
        padding: 0.5rem 0.75rem;
        flex-wrap: nowrap;
        gap: 0.5rem;
        min-height: 0;
    }

    .header-left {
        gap: 0.5rem;
        flex-shrink: 0;
        min-width: 0;
    }

    .header h1 {
        font-size: 1.05rem;
    }

    .header-right {
        gap: 0.4rem;
        flex-shrink: 0;
    }

    /* hide zoom/coordinates on mobile — canvas space priority */
    .stats {
        display: none;
    }

    /* shrink header icon buttons to circular icons */
    .header-icon-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .header-icon-btn span {
        display: none;
    }

    .header-icon-btn i {
        font-size: 0.95rem;
    }

    /* ----- toolbar: horizontal pill, icon-only buttons ----- */
    .toolbar {
        position: fixed !important;
        padding: 0.45rem !important;
        top: auto !important;
        bottom: calc(15px + env(safe-area-inset-bottom, 0px)) !important;
        left: 50%;
        transform: translateX(-50%) translateZ(0) !important;
        -webkit-transform: translateX(-50%) translateZ(0) !important;
        width: max-content !important;
        max-width: 96vw;
        border-radius: var(--radius-full);
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        gap: 0.4rem !important;
    }

    .floating-action-bar {
        bottom: calc(130px + env(safe-area-inset-bottom, 0px));
        right: 14px;
    }

    .tool-section {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 0.35rem !important;
    }

    .mode-toggle-container {
        width: auto;
    }

    .mode-toggle-btn span,
    .tool-btn span,
    .toolbar .action-btn span,
    .floating-action-bar .action-btn span {
        display: none !important;
    }

    .mode-toggle-btn i,
    .tool-btn i,
    .toolbar .action-btn i,
    .floating-action-bar .action-btn i {
        margin: 0;
        font-size: 1.05rem;
    }

    .mode-toggle-btn,
    .tool-btn,
    .toolbar .action-btn,
    .floating-action-bar .action-btn {
        padding: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        aspect-ratio: auto !important;
    }

    .edit-mode-actions {
        margin-left: 0.25rem !important;
        padding-left: 0.35rem !important;
        border-top: none !important;
        border-left: 1.5px dashed var(--border-medium) !important;
        padding-top: 0 !important;
        width: auto !important;
        flex-direction: row !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }

    .pending-changes-info {
        display: none !important;
    }

    .brush-size-picker {
        gap: 1px;
        padding: 2px;
        border-radius: var(--radius-full);
    }

    .size-btn {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 0.78rem;
    }

    .color-label {
        display: none;
    }

    .selected-color-display {
        padding: 0.25rem;
    }

    /* ----- chat ----- */
    .chat-widget {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
        right: 14px;
    }

    .chat-toggle {
        width: 48px;
        height: 48px;
    }

    .chat-toggle i {
        font-size: 1.15rem;
    }

    /* chat container as bottom sheet */
    .chat-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: min(360px, 55vh);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        border-bottom: none;
        box-shadow: 0 -10px 32px rgba(108, 124, 208, 0.18);
        flex-direction: column;
    }

    /* on mobile the header is the sheet handle — slightly taller, rounded top */
    .chat-header {
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding: 14px 16px;
    }

    /* messages list gets a little extra room on a sheet */
    .chat-messages {
        padding: 12px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    }

    /* input sits flush against the bottom of the sheet */
    .chat-input,
    .chat-login-hint {
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* ----- color picker / palette editor ----- */
    #color-picker-modal .modal-content {
        width: 90% !important;
        max-width: 320px;
    }

    .color-picker-mode {
        font-size: 0.82rem;
        padding: 8px 14px;
        top: 64px;
    }

    #color-wheel {
        height: 60px;
    }

    #palette-editor-modal .modal-content {
        width: 95% !important;
        max-width: 400px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .palette-colors-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 0.5rem !important;
    }

    #color-hex-input {
        padding: 0.6rem;
        font-size: 1rem;
    }

    #confirm-color-btn {
        padding: 0.55rem 1rem;
        font-size: 0.95rem;
    }

    /* ----- profile page ----- */
    .dashboard-stats {
        grid-template-columns: 1fr 1fr;
        gap: 0.875rem;
    }

    .stat-card {
        padding: 1rem 0.75rem;
    }

    .stat-value {
        font-size: 1.9rem;
    }

    .profile-page-header {
        padding: 0.875rem 1rem;
    }

    .profile-page-header h2 {
        font-size: 1.25rem;
    }

    .back-to-canvas-btn span {
        display: none;
    }

    .back-to-canvas-btn {
        width: auto;
        padding: 0.5rem 0.65rem;
    }

    .profile-page-content {
        padding: 1rem;
        gap: 1.25rem;
    }
}

@media (max-width: 480px) {
    .header {
        padding: 0.4rem 0.625rem;
    }

    .connection-status {
        font-size: 0.78rem;
    }

    .user-name-label {
        display: none;
    }

    .profile-info {
        padding: 0.25rem !important;
        gap: 0 !important;
    }

    .header-left {
        gap: 0.4rem !important;
    }

    .header-right {
        gap: 0.4rem !important;
    }
}

/* continuous-draw-btn used to be hidden on desktop via .mobile-only-tool;
   the drag-to-pan change made it useful on desktop too (toggle on,
   left-drag paints; toggle off, left-drag pans). Class kept in HTML but
   the hide rule is intentionally removed. */