/* =========================================================================
   Mobile-app redesign — layers on top of style.css
   Liberate-inspired light theme, navy accent, iOS-style chat, phone frame
   on desktop, bottom-sheet claim form.
   ========================================================================= */

:root {
    --m-bg: #f3f4f7;
    --m-surface: #ffffff;
    --m-surface-2: #f7f8fa;
    --m-border: #e3e5eb;
    --m-text: #0f172a;
    --m-text-muted: #5b6478;
    --m-accent: #0b2856;
    --m-accent-soft: #e6ebf5;
    --m-user-bubble: #0b2856;
    --m-user-text: #ffffff;
    --m-bot-bubble: #eef0f4;
    --m-bot-text: #0f172a;
    --m-shadow-lg: 0 20px 60px rgba(8, 16, 40, 0.12);
    --m-shadow-md: 0 4px 14px rgba(8, 16, 40, 0.08);
    --m-radius-bubble: 20px;
    --m-radius-tight: 6px;
    --m-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body {
    background: var(--m-bg) !important;
    color: var(--m-text) !important;
    font-family: var(--m-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    margin: 0;
}

#app {
    background: var(--m-bg) !important;
    color: var(--m-text) !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------------------
   Phone-frame wrapper: on desktop, the app renders inside a phone-shaped
   container so screen-shared demos look like a mobile app. On real phones,
   it fills the viewport edge-to-edge.
   ------------------------------------------------------------------------ */

@media (min-width: 768px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
        gap: 24px;
        background:
            radial-gradient(1200px 600px at 50% -10%, rgba(11, 40, 86, 0.07), transparent 60%),
            var(--m-bg) !important;
    }
    #app {
        width: 380px;
        height: min(800px, calc(100vh - 64px));
        border-radius: 44px;
        background: var(--m-surface) !important;
        box-shadow: var(--m-shadow-lg), 0 0 0 8px #0f172a, 0 0 0 10px #1f2937;
        overflow: hidden;
        position: relative;
        flex-shrink: 0;
    }
    /* iPhone-style notch */
    #app::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 26px;
        background: #0f172a;
        border-radius: 18px;
        z-index: 100;
        pointer-events: none;
    }
}

/* ------------------------------------------------------------------------
   Header — compact, centered, Liberate-esque
   ------------------------------------------------------------------------ */

.app-header {
    background: var(--m-surface) !important;
    border-bottom: 1px solid var(--m-border);
    padding: 44px 20px 14px !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.app-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--m-text) !important;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-title::before {
    content: "●";
    color: #22c55e;
    font-size: 8px;
    margin-right: 2px;
}
.header-icon { display: none !important; }

.header-controls { gap: 8px; }
.icon-btn, .settings-btn, .theme-toggle {
    color: var(--m-text-muted) !important;
    background: transparent !important;
}
.theme-toggle { display: none !important; }

/* ------------------------------------------------------------------------
   Main / voice surface
   ------------------------------------------------------------------------ */

.main-content {
    background: var(--m-surface) !important;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    padding: 16px 16px 100px !important;
    gap: 12px;
    overflow-y: auto;
}

.voice-container {
    background: transparent !important;
    padding: 12px 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.voice-btn {
    width: 96px !important;
    height: 96px !important;
    border-radius: 50% !important;
    background: var(--m-accent) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 10px 30px rgba(11, 40, 86, 0.35), 0 0 0 0 rgba(11, 40, 86, 0.45);
    transition: transform 0.15s ease, box-shadow 0.25s ease;
}
.voice-btn:hover { transform: translateY(-1px); }
.voice-btn.recording, .voice-btn.active {
    background: #b91c1c !important;
    box-shadow: 0 10px 30px rgba(185, 28, 28, 0.4);
    animation: m-pulse 1.6s infinite;
}
@keyframes m-pulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(185, 28, 28, 0.4), 0 0 0 0 rgba(185, 28, 28, 0.4); }
    50% { box-shadow: 0 10px 30px rgba(185, 28, 28, 0.4), 0 0 0 24px rgba(185, 28, 28, 0); }
}
.mic-icon, .stop-icon { fill: white !important; }

.voice-hint { color: var(--m-text-muted) !important; font-size: 13px !important; }

/* ------------------------------------------------------------------------
   Chat bubbles — iOS style
   ------------------------------------------------------------------------ */

.chat-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    max-width: 100%;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-x: hidden;
    box-sizing: border-box;
}

.chat-message, .chat-bubble, .message {
    max-width: 82% !important;
    padding: 10px 14px !important;
    border-radius: var(--m-radius-bubble) !important;
    line-height: 1.35 !important;
    font-size: 15px !important;
    word-wrap: break-word;
    box-shadow: none !important;
}
/* User-sent: navy bubble, right-aligned */
.chat-message.user, .message.user, .user-message, .message-user {
    background: var(--m-user-bubble) !important;
    color: var(--m-user-text) !important;
    align-self: flex-end !important;
    margin-left: auto !important;
    border-bottom-right-radius: var(--m-radius-tight) !important;
}
/* Bot-sent: gray bubble, left-aligned */
.chat-message.assistant, .message.assistant, .assistant-message, .message-assistant,
.chat-message.bot, .message.bot {
    background: var(--m-bot-bubble) !important;
    color: var(--m-bot-text) !important;
    align-self: flex-start !important;
    margin-right: auto !important;
    border-bottom-left-radius: var(--m-radius-tight) !important;
}
.message-role, .message-sender, .avatar, .role-label { display: none !important; }

/* Tool-call pills */
.tool-call, .tool-ribbon, [class*="tool-call"] {
    background: var(--m-accent-soft) !important;
    color: var(--m-accent) !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    border: 1px solid #d1d9ec !important;
}

/* ------------------------------------------------------------------------
   Upload pills — keep them but re-skin
   ------------------------------------------------------------------------ */

.damage-panel {
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-width: none !important;
    order: 5;
    padding: 6px 0 0;
}
.upload-btn-row { gap: 8px !important; }
.damage-upload-btn {
    font-size: 12px !important;
    padding: 8px 12px !important;
    background: var(--m-surface-2) !important;
    color: var(--m-text) !important;
    border: 1px solid var(--m-border) !important;
    box-shadow: var(--m-shadow-md);
}
.damage-upload-btn:hover {
    background: var(--m-accent-soft) !important;
    border-color: #c4cfe4 !important;
}
.damage-thumb {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 12px !important;
}
.damage-thumb-status { color: var(--m-text) !important; }
.damage-thumb-status-analysis { color: #15803d !important; font-weight: 500; }

/* ------------------------------------------------------------------------
   Claim-form panel — converted into a bottom-sheet drawer
   ------------------------------------------------------------------------ */

.claim-form-panel {
    display: none !important;
}

@media (min-width: 768px) {
    /* On desktop, dock it beside the phone frame using flex (set on body).
       left/right anchors were overlapping the phone on narrow viewports. */
    .claim-form-panel {
        display: block !important;
        position: static !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 320px !important;
        height: min(800px, calc(100vh - 64px)) !important;
        max-height: none !important;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-border) !important;
        border-radius: 18px !important;
        box-shadow: var(--m-shadow-md) !important;
        padding: 14px 18px !important;
        color: var(--m-text) !important;
        font-size: 12.5px !important;
        overflow-y: auto;
        align-self: center;
        flex-shrink: 0;
    }
    .claim-form-header {
        color: var(--m-text) !important;
        border-bottom-color: var(--m-border) !important;
    }
    .claim-form-header > span:first-child {
        font-size: 13px !important;
        font-weight: 600 !important;
    }
    .claim-form-status { color: var(--m-text-muted) !important; }
    .claim-form-section { color: var(--m-text-muted) !important; }
    .claim-form-row { border-bottom-color: #f0f1f4 !important; }
    .claim-form-label { color: var(--m-text-muted) !important; }
    .claim-form-value { color: var(--m-text) !important; }
}

/* Mobile bottom-sheet toggle */
@media (max-width: 767px) {
    /* Nothing — keeping the panel hidden entirely on mobile since the
       caller in a real demo won't look at it. Demoer switches to desktop
       view to show the form. */
}

/* ------------------------------------------------------------------------
   SMS toast — iMessage style, top of phone
   ------------------------------------------------------------------------ */

.sms-toast {
    top: 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 92% !important;
    max-width: 380px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: saturate(140%) blur(18px);
    -webkit-backdrop-filter: saturate(140%) blur(18px);
    color: var(--m-text) !important;
    border: 1px solid var(--m-border);
    border-radius: 16px !important;
    padding: 10px 12px !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
    font-family: var(--m-font) !important;
}
.sms-toast-header {
    color: var(--m-text-muted) !important;
    font-size: 11px !important;
    margin-bottom: 2px !important;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--m-border);
}
.sms-toast-from {
    color: var(--m-text) !important;
    font-weight: 600 !important;
}
.sms-toast-body {
    color: var(--m-text) !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
}
.sms-toast-body a { color: var(--m-accent) !important; }

/* ------------------------------------------------------------------------
   Keyboard toggle, typing window — restyle for light theme
   ------------------------------------------------------------------------ */

.keyboard-toggle {
    background: var(--m-surface) !important;
    color: var(--m-text-muted) !important;
    border: 1px solid var(--m-border) !important;
    box-shadow: var(--m-shadow-md) !important;
}
.keyboard-toggle:hover {
    background: var(--m-accent-soft) !important;
    color: var(--m-accent) !important;
}

.typing-window {
    background: var(--m-surface) !important;
    border-top: 1px solid var(--m-border);
    padding: 10px 12px !important;
}
.text-input {
    background: var(--m-surface-2) !important;
    color: var(--m-text) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 20px !important;
    font-family: var(--m-font) !important;
}
.send-text-btn, .hide-typing-btn {
    background: var(--m-accent) !important;
    color: white !important;
    border-radius: 50% !important;
}

/* ------------------------------------------------------------------------
   Settings panel — reuse the existing slide-over, just re-skin
   ------------------------------------------------------------------------ */

.settings-panel {
    background: var(--m-surface) !important;
    color: var(--m-text) !important;
}
.settings-header, .settings-content, .settings-accordion, .setting-item {
    color: var(--m-text) !important;
}
.settings-label { color: var(--m-text-muted) !important; font-size: 12px !important; }

/* ------------------------------------------------------------------------
   Waveform canvas — make it subtle in light theme
   ------------------------------------------------------------------------ */

.waveform-canvas, .ring-canvas {
    opacity: 0.6;
}