/*
 * HoganAgent — Botson Mobile Polish Layer
 * =======================================
 *
 * This is Jason's #1 surface: Botson Code on a phone, voice + text.
 * Everything below targets the Botson interior AND mobile viewports.
 * Layer loads after base.css + polish.css so these rules win without
 * !important hacks.
 *
 * Design goals:
 *   - Chat feels app-native, not desktop-miniaturized
 *   - Voice button is obvious, large, always one thumb away
 *   - Composer is safe-area aware and sticky
 *   - Messages slide in with subtle gradient bubbles in brand color
 *   - Sidebar/sessions panel is off-canvas with backdrop blur
 *   - Scroll feel is rubberband-smooth on iOS
 */

/* ================================================================
 * 1. Phone-first viewport fixes that apply everywhere on mobile
 * ================================================================ */

@media (max-width: 768px) {
    /* Stop the zoom-on-input jump iOS does when font-size < 16px */
    .botson-composer-inner textarea,
    input.ha-input,
    textarea.ha-input,
    select.ha-input { font-size: 16px; }

    /* Pull the agent SPA content below any notch / status bar */
    body { padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) 0 env(safe-area-inset-left, 0); }
}

/* ================================================================
 * 2. Botson chat: message bubbles with entry motion
 * ================================================================ */

.botson-message,
.botson-msg {
    animation: ha-msg-in 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ha-msg-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: none; }
}

/* User message bubbles pick up the brand gradient so the chat feels
   personal to whatever tenant branding is active. */
.botson-msg--user,
.botson-message.user,
.botson-msg-user {
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--ha-brand-from) 85%, transparent),
        color-mix(in srgb, var(--ha-brand-to) 90%, transparent)) !important;
    color: #fff !important;
    border: 1px solid color-mix(in srgb, var(--ha-brand-from) 55%, transparent) !important;
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--ha-brand-to) 55%, transparent);
}

/* Assistant message bubbles — quieter, but still with a brand tint */
.botson-msg--assistant,
.botson-message.assistant,
.botson-msg-assistant {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ha-brand-from) 3%, #ffffff),
        #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--ha-brand-from) 18%, var(--ha-border)) !important;
}
[data-theme="dark"] .botson-msg--assistant,
[data-theme="dark"] .botson-message.assistant,
[data-theme="dark"] .botson-msg-assistant {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ha-brand-from) 8%, #0f172a),
        #0b1220) !important;
}

/* Thinking dots — a subtle breathing pulse */
.botson-thinking,
.botson-typing {
    animation: ha-thinking 1200ms ease-in-out infinite;
}
@keyframes ha-thinking {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* ================================================================
 * 3. Composer bar — brand gradient border, floating glass look
 * ================================================================ */

.botson-composer {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(var(--ha-space-3, 12px) + env(safe-area-inset-bottom, 0)) !important;
    background:
        linear-gradient(to top, var(--ha-bg, #fff) 60%, transparent 100%);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    z-index: 5;
}
.botson-composer-inner {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--ha-brand-from) 22%, var(--ha-border)) !important;
    box-shadow: 0 12px 32px -16px color-mix(in srgb, var(--ha-brand-to) 40%, transparent);
    transition: border-color 220ms ease, box-shadow 260ms ease, transform 220ms ease;
}
.botson-composer-inner:focus-within {
    border-color: color-mix(in srgb, var(--ha-brand-from) 60%, transparent) !important;
    box-shadow: 0 16px 40px -14px color-mix(in srgb, var(--ha-brand-to) 60%, transparent),
                0 0 0 4px color-mix(in srgb, var(--ha-brand-from) 14%, transparent);
}

/* Send button — big, brand-gradient, glowing */
.botson-send-btn {
    background: linear-gradient(180deg, var(--ha-brand-from), var(--ha-brand-to)) !important;
    box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--ha-brand-to) 60%, transparent) !important;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), filter 180ms ease !important;
}
.botson-send-btn:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.botson-send-btn:active { filter: brightness(0.95); transform: translateY(0); }

/* Voice / mic button — add a listening pulse ring using the brand color */
.botson-mic-btn,
.ha-voice-btn,
[data-role="voice"] {
    position: relative;
    transition: transform 220ms ease, box-shadow 260ms ease;
}
.botson-mic-btn.listening,
.ha-voice-btn.listening,
[data-role="voice"].listening {
    color: #fff !important;
    background: linear-gradient(180deg, var(--ha-brand-from), var(--ha-brand-to)) !important;
    animation: ha-mic-ring 1500ms ease-in-out infinite;
}
@keyframes ha-mic-ring {
    0%, 100% {
        box-shadow:
            0 0 0 0 color-mix(in srgb, var(--ha-brand-from) 55%, transparent),
            0 6px 20px -6px color-mix(in srgb, var(--ha-brand-to) 60%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 18px transparent,
            0 6px 24px -6px color-mix(in srgb, var(--ha-brand-to) 80%, transparent);
    }
}

/* ================================================================
 * 4. Sessions list — mobile off-canvas treatment
 * ================================================================ */

@media (max-width: 900px) {
    /* Botson 3-column layout collapses to chat-only.
       Sessions panel slides in from the left when opened. */
    .botson-shell,
    .botson-layout {
        grid-template-columns: 1fr !important;
    }
    .botson-sessions-panel,
    .botson-sidebar {
        position: fixed !important;
        inset: 0 auto 0 0;
        width: min(320px, 86vw);
        z-index: 60;
        transform: translateX(-110%);
        transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 16px 0 40px -16px color-mix(in srgb, var(--ha-brand-to) 55%, rgba(15,23,42,0.6));
        background: var(--ha-bg, #fff);
        overflow-y: auto;
    }
    .botson-sessions-panel.open,
    .botson-sidebar.open {
        transform: translateX(0);
    }
    .botson-canvas,
    .botson-canvas-panel {
        display: none !important;
    }
}

/* ================================================================
 * 5. Tool-call accordion polish — colored left bar + hover
 * ================================================================ */

.botson-tool-pill,
.botson-tool-accordion {
    border-left: 3px solid color-mix(in srgb, var(--ha-brand-from) 55%, transparent) !important;
    transition: background 200ms ease, border-left-color 200ms ease;
}
.botson-tool-pill:hover,
.botson-tool-accordion:hover {
    background: color-mix(in srgb, var(--ha-brand-from) 8%, transparent);
    border-left-color: var(--ha-brand-from) !important;
}

/* ================================================================
 * 6. Quick-prompt pills — subtle scale-on-press
 * ================================================================ */

.botson-quick-prompt,
.botson-quick-prompts button {
    transition: transform 160ms ease, background 200ms ease, border-color 200ms ease;
}
.botson-quick-prompt:hover,
.botson-quick-prompts button:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ha-brand-from) 40%, var(--ha-border)) !important;
}
.botson-quick-prompt:active,
.botson-quick-prompts button:active {
    transform: translateY(0) scale(0.97);
}

/* ================================================================
 * 7. Pull-to-refresh + momentum scroll on iOS
 * ================================================================ */

.botson-scroll,
.botson-chat,
.botson-messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* ================================================================
 * 8. Mobile FAB polish — floating Botson button
 * ================================================================ */

#botson-fab {
    background: linear-gradient(180deg, var(--ha-brand-from), var(--ha-brand-to)) !important;
    box-shadow: 0 10px 32px -10px color-mix(in srgb, var(--ha-brand-to) 65%, transparent) !important;
    animation: ha-fab-pulse 3200ms ease-in-out infinite;
}
@keyframes ha-fab-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 color-mix(in srgb, var(--ha-brand-from) 40%, transparent),
            0 10px 32px -10px color-mix(in srgb, var(--ha-brand-to) 65%, transparent);
    }
    50% {
        box-shadow:
            0 0 0 10px transparent,
            0 10px 40px -8px color-mix(in srgb, var(--ha-brand-to) 80%, transparent);
    }
}
#botson-fab:hover {
    filter: brightness(1.08);
    transform: translateY(-2px) scale(1.03);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), filter 220ms ease;
}

/* ================================================================
 * 9. Reduced motion safety
 * ================================================================ */

@media (prefers-reduced-motion: reduce) {
    .botson-message, .botson-msg, #botson-fab,
    .botson-mic-btn, .ha-voice-btn, [data-role="voice"] {
        animation: none !important;
    }
}