*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --brand: #00aeef;
    --brand-light: #0099d6;
    --brand-soft: rgba(0, 174, 239, 0.12);
    --brand-muted: rgba(0, 174, 239, 0.55);
    --brand-dark: #0f2744;
    --brand-deep: #1a4a72;
    --bg-app: #eef2f7;
    --bg-elevated: #ffffff;
    --bg-incoming: #ffffff;
    --bg-outgoing: #d6ebfa;
    --bg-input: #ffffff;
    --text-primary: #1e293b;
    --text-on-outgoing: #0f2744;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --accent: var(--brand);
    --accent-dim: var(--brand-soft);
    --border: #e2e8f0;
    --border-input: #cbd5e1;
    --overlay: rgba(15, 39, 68, 0.4);
    --sheet-bg: #ffffff;
    --desktop-bg: #dde4ee;
    --green: #16a34a;
    --green-bg: rgba(22, 163, 74, 0.12);
    --amber: #d97706;
    --amber-bg: rgba(217, 119, 6, 0.12);
    --red: #dc2626;
    --red-bg: rgba(220, 38, 38, 0.1);
    --warning-bg: rgba(217, 119, 6, 0.1);
    --warning-text: #b45309;
    --info-bg: var(--brand-soft);
    --info-text: var(--brand-deep);
    --header-height: 72px;
    --header-bg: var(--brand);
    --header-fg: #ffffff;
    --header-fg-muted: rgba(255, 255, 255, 0.88);
    --header-border: rgba(0, 0, 0, 0.12);
    --composer-min-height: 52px;
    --composer-block-height: calc(var(--composer-min-height) + 16px);
    --composer-bottom-offset: calc(var(--safe-bottom) + 6px);
    --banner-height: 0px;
    --notification-stack: 0px;
    --chat-footer-stack: calc(var(--composer-bottom-offset) + var(--composer-block-height));
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --vv-offset-top: 0px;
    --keyboard-inset: 0px;
    --app-max-width: 480px;
    --app-shell-max: 480px;
    --sidebar-width: 240px;
    --message-max: 320px;
    --attach-menu-bg: #ffffff;
    --attach-menu-hover: rgba(0, 0, 0, 0.05);
    --attach-menu-text: var(--text-primary);
    --attach-menu-shadow: 0 8px 32px rgba(15, 39, 68, 0.18), 0 2px 8px rgba(15, 39, 68, 0.08);
    color-scheme: light;
}

html {
    height: 100%;
    height: -webkit-fill-available;
}

body {
    min-height: 100%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg-app);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

.hidden {
    display: none !important;
}

.app {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--app-max-width);
    height: 100dvh;
    height: -webkit-fill-available;
    min-height: 100dvh;
    margin: 0 auto;
    background: var(--bg-app);
    position: relative;
    overflow: hidden;
}

/* ── Header ── */

.header {
    grid-area: header;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: var(--header-height);
    padding: 12px 16px;
    padding-top: calc(12px + var(--safe-top));
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    flex-shrink: 0;
    z-index: 10;
}

.header-center {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    align-self: center;
}

.header-avatar {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(15, 39, 68, 0.08);
    box-shadow: 0 1px 3px rgba(15, 39, 68, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    padding: 5px;
}

.header-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    display: block;
}

.header-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 2px 0;
}

.header h1 {
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--header-fg);
    line-height: 1.2;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.header-sub-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-sub {
    font-size: 0.8125rem;
    color: var(--header-fg-muted);
    line-height: 1.35;
    min-width: 0;
    margin: 0;
}

.header-sub-op {
    font-weight: 600;
    color: var(--header-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-sub-tagline {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.status-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.2;
}

.status-badge.connected {
    background: rgba(255, 255, 255, 0.95);
    color: var(--brand);
}

.status-badge.connecting {
    background: var(--amber-bg);
    color: var(--amber);
}

.status-badge.error {
    background: var(--red-bg);
    color: var(--red);
}

/* ── Banner ── */

.banner {
    grid-area: banner;
    padding: 10px 16px;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.banner.warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.banner.info {
    background: var(--info-bg);
    color: var(--info-text);
}

/* ── Main body ── */

.app-body {
    grid-area: content;
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.view {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}

/* ── Messages ── */

.messages {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--bg-app);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overflow-anchor: none;
}

.messages-scroll-anchor {
    overflow-anchor: auto;
    height: 1px;
    flex-shrink: 0;
    pointer-events: none;
}

.message-row {
    display: flex;
    flex-direction: column;
    max-width: min(82%, 320px);
    gap: 4px;
}

.message-row.user {
    align-self: flex-end;
    align-items: flex-end;
}

.message-row.bot {
    align-self: flex-start;
    align-items: flex-start;
}

.message-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.9375rem;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    line-height: 1.45;
    max-width: 100%;
}

.message-row.user .message-bubble {
    background: var(--bg-outgoing);
    color: var(--text-on-outgoing);
    border: 1px solid rgba(0, 174, 239, 0.22);
}

.message-row.bot .message-bubble {
    background: var(--bg-incoming);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.message-text {
    display: block;
}

.message-quote {
    display: flex;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: 8px;
    background: rgba(15, 39, 68, 0.05);
}

.message-row.user .message-quote {
    background: rgba(255, 255, 255, 0.35);
}

.message-row.operator .message-quote,
.message-row.bot .message-quote {
    background: rgba(15, 39, 68, 0.05);
}

.message-quote__bar {
    width: 3px;
    border-radius: 3px;
    flex-shrink: 0;
    align-self: stretch;
}

.message-quote--user .message-quote__bar {
    background: var(--brand);
}

.message-quote--operator .message-quote__bar {
    background: #c2410c;
}

.message-quote--bot .message-quote__bar {
    background: #0369a1;
}

.message-quote__body {
    min-width: 0;
    flex: 1;
}

.message-quote__author {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 2px;
}

.message-quote--user .message-quote__author {
    color: var(--brand);
}

.message-quote--operator .message-quote__author {
    color: #c2410c;
}

.message-quote--bot .message-quote__author {
    color: #0369a1;
}

.message-quote__text {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-row.user .message-quote__text {
    color: rgba(15, 39, 68, 0.72);
}

.message-attachment {
    display: block;
    max-width: 100%;
    margin-bottom: 6px;
}

.message-attachment--image {
    border-radius: 10px;
    max-height: 240px;
    object-fit: cover;
    width: auto;
}

.message-attachment--video {
    border-radius: 10px;
    max-height: 240px;
    width: 100%;
    background: #000;
}

.message-attachment--audio {
    display: none;
}

/* ── Voice message bubble (WhatsApp-style) ── */

.voice-message {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
    max-width: min(260px, 100%);
    padding: 2px 0;
}

.voice-message-play {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.22);
    color: inherit;
    transition: background 0.15s, transform 0.1s;
}

.message-row.bot .voice-message-play {
    background: var(--brand-soft);
    color: var(--brand);
}

.voice-message-play:active {
    transform: scale(0.94);
}

.voice-message-play svg {
    display: block;
}

.voice-message-play .voice-icon-pause {
    display: none;
}

.voice-message-play.is-playing .voice-icon-play {
    display: none;
}

.voice-message-play.is-playing .voice-icon-pause {
    display: block;
}

.voice-message-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.voice-message-wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 28px;
}

.voice-message-wave span {
    flex: 1;
    min-width: 2px;
    max-width: 4px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.35;
    height: 40%;
    transition: opacity 0.1s;
}

.voice-message-wave span.is-played {
    opacity: 0.9;
}

.voice-message-duration {
    font-size: 0.6875rem;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ── Voice recording bar ── */

.composer-wrap.is-voice-recording .composer {
    display: none;
}

.voice-recording-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    padding-left: calc(12px + var(--safe-left));
    padding-right: calc(12px + var(--safe-right));
    min-height: var(--composer-min-height);
    background: var(--bg-app);
}

.voice-recording-bar.hidden {
    display: none;
}

.voice-recording-bar:not(.hidden):not(.is-discarding) {
    animation: voice-rec-enter 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.voice-recording-bar.is-discarding {
    pointer-events: none;
    animation: voice-discard-bar 0.42s ease-in forwards;
}

.voice-recording-bar.is-discarding .voice-recording-center {
    animation: voice-discard-wave 0.42s ease-in forwards;
}

.voice-recording-bar.is-discarding .voice-recording-cancel {
    animation: voice-discard-trash 0.42s ease-in forwards;
}

.voice-recording-bar.is-discarding .voice-recording-send {
    animation: voice-discard-send 0.42s ease-in forwards;
}

.composer-wrap.voice-discard-pending .composer {
    animation: voice-composer-return 0.38s ease-out forwards;
}

@keyframes voice-rec-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes voice-discard-bar {
    to {
        opacity: 0;
        transform: translateY(6px);
    }
}

@keyframes voice-discard-wave {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    55% {
        transform: scale(0.9) translateX(16px);
        opacity: 0.45;
    }
    100% {
        transform: scale(0.72) translateX(28px);
        opacity: 0;
    }
}

@keyframes voice-discard-trash {
    0% {
        transform: scale(1) rotate(0deg);
        color: var(--text-secondary);
    }
    35% {
        transform: scale(1.18) rotate(-8deg);
        color: #ef4444;
    }
    100% {
        transform: scale(1) rotate(0deg);
        color: #ef4444;
        opacity: 0.5;
    }
}

@keyframes voice-discard-send {
    to {
        opacity: 0;
        transform: scale(0.85);
    }
}

@keyframes voice-composer-return {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Message notifications prompt ── */

.notification-prompt {
    margin: 0;
    padding: 0 calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left));
}

#notification-prompt:not(.hidden) {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--composer-bottom-offset) + var(--composer-block-height) + 4px);
    width: min(calc(100% - 24px), var(--app-max-width));
    z-index: 100;
    pointer-events: auto;
}

.notification-prompt.hidden {
    display: none;
}

.notification-prompt-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 39, 68, 0.06);
    animation: notify-prompt-in 0.35s ease-out;
}

@keyframes notify-prompt-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notification-prompt-icon {
    flex-shrink: 0;
    color: var(--brand);
    display: flex;
}

.notification-prompt-text {
    flex: 1;
    min-width: 180px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-primary);
}

.notification-prompt-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.notification-prompt-enable,
.notification-prompt-dismiss {
    border: none;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
}

.notification-prompt-enable {
    background: var(--brand);
    color: #fff;
}

.notification-prompt-dismiss {
    background: transparent;
    color: var(--text-secondary);
}

/* In-app toast when a message arrives while the tab is visible */
.incoming-message-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--composer-bottom-offset) + var(--composer-block-height) + 12px);
    width: min(calc(100% - 24px), 420px);
    max-width: var(--app-max-width);
    z-index: 110;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(15, 39, 68, 0.16);
    cursor: pointer;
    animation: incoming-toast-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.incoming-message-toast.hidden {
    display: none;
}

html.notify-prompt-open .incoming-message-toast:not(.hidden) {
    bottom: calc(var(--composer-bottom-offset) + var(--composer-block-height) + var(--notification-stack) + 12px);
}

.incoming-message-toast-icon {
    flex-shrink: 0;
    color: var(--brand);
    display: flex;
    margin-top: 1px;
}

.incoming-message-toast-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.incoming-message-toast-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.incoming-message-toast-text {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@keyframes incoming-toast-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (max-width: 767px) {
    html.notify-prompt-open .app {
        --notification-stack: 0px;
    }

    .incoming-message-toast {
        display: none !important;
    }

    #notification-prompt:not(.hidden) {
        top: calc(var(--header-height) + var(--safe-top) + var(--banner-height) + var(--vv-offset-top) + 8px);
        bottom: auto;
    }
}

@media (max-width: 480px) {
    .notification-prompt-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .notification-prompt-actions {
        width: 100%;
    }

    .notification-prompt-enable,
    .notification-prompt-dismiss {
        flex: 1;
        text-align: center;
    }
}

.voice-recording-cancel {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.voice-recording-cancel:active {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.voice-recording-center {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 24px;
}

.voice-recording-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
    animation: voice-rec-dot 1.2s ease-in-out infinite;
}

@keyframes voice-rec-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.voice-recording-time {
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    flex-shrink: 0;
    min-width: 2.5em;
}

.voice-recording-wave {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 28px;
    min-width: 0;
    overflow: hidden;
}

.voice-recording-wave span {
    width: 3px;
    border-radius: 2px;
    background: var(--brand);
    opacity: 0.55;
    animation: voice-rec-bar 0.9s ease-in-out infinite;
}

.voice-recording-wave span:nth-child(1) { animation-delay: 0s; height: 8px; }
.voice-recording-wave span:nth-child(2) { animation-delay: 0.08s; height: 14px; }
.voice-recording-wave span:nth-child(3) { animation-delay: 0.16s; height: 20px; }
.voice-recording-wave span:nth-child(4) { animation-delay: 0.24s; height: 12px; }
.voice-recording-wave span:nth-child(5) { animation-delay: 0.32s; height: 18px; }
.voice-recording-wave span:nth-child(6) { animation-delay: 0.4s; height: 10px; }
.voice-recording-wave span:nth-child(7) { animation-delay: 0.48s; height: 22px; }
.voice-recording-wave span:nth-child(8) { animation-delay: 0.56s; height: 14px; }
.voice-recording-wave span:nth-child(9) { animation-delay: 0.64s; height: 16px; }
.voice-recording-wave span:nth-child(10) { animation-delay: 0.72s; height: 11px; }
.voice-recording-wave span:nth-child(11) { animation-delay: 0.8s; height: 19px; }
.voice-recording-wave span:nth-child(12) { animation-delay: 0.88s; height: 13px; }
.voice-recording-wave span:nth-child(13) { animation-delay: 0.96s; height: 17px; }
.voice-recording-wave span:nth-child(14) { animation-delay: 1.04s; height: 9px; }
.voice-recording-wave span:nth-child(15) { animation-delay: 1.12s; height: 21px; }

@keyframes voice-rec-bar {
    0%, 100% { transform: scaleY(0.45); opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 0.95; }
}

.voice-recording-send {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 174, 239, 0.35);
    transition: transform 0.1s, background 0.15s;
}

.voice-recording-send:active {
    transform: scale(0.94);
    background: var(--brand-light);
}

.composer-icon.is-recording {
    color: #ef4444;
}

.message-attachment--document {
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
    word-break: break-all;
}

.message-row.user .message-attachment--document {
    color: var(--text-on-outgoing);
}

.message-time {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    padding: 0 2px;
    line-height: 1.2;
}

.message-row.user .message-time {
    text-align: right;
}

.message-row.bot .message-time {
    text-align: left;
}

/* ── Composer ── */

.composer-wrap {
    position: relative;
    flex-shrink: 0;
    background: var(--bg-app);
    border-top: 1px solid var(--border);
}

.composer-wrap.attach-open .attach-icon--clip {
    display: none;
}

.composer-wrap.attach-open .attach-icon--close {
    display: block;
}

.attach-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    padding-left: calc(12px + var(--safe-left));
    padding-right: calc(12px + var(--safe-right));
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.attach-preview-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.attach-preview-name {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.attach-preview-clear {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 15px 12px;
    padding-left: calc(12px + var(--safe-left));
    padding-right: calc(12px + var(--safe-right));
    background: transparent;
    flex-shrink: 0;
    min-height: var(--composer-min-height);
}

.composer.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.composer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, opacity 0.15s;
}

.composer-icon:active {
    color: var(--brand-light);
    opacity: 0.85;
}

.composer input,
.composer textarea {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 10px;
    font-size: 16px;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
    min-width: 0;
    width: 0;
    line-height: 1.4;
    resize: none;
    overflow-y: hidden;
    max-height: 120px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.composer textarea {
    min-height: 40px;
}

.composer input::placeholder,
.composer textarea::placeholder {
    color: var(--text-secondary);
}

.composer input:focus,
.composer textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px var(--brand-soft);
}

.composer-send {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--brand);
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.1s, color 0.15s;
}

.composer-send:active:not(:disabled) {
    transform: scale(0.92);
    color: var(--brand-light);
}

.composer-send:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Fixed chat footer — same layout on mobile and desktop (homogeneous voice UX) */
.app {
    padding-bottom: 0;
    --notification-stack: 0px;
    --chat-footer-stack: calc(var(--composer-bottom-offset) + var(--composer-block-height) + var(--notification-stack));
}

html.notify-prompt-open .app {
    --notification-stack: 84px;
}

@media (max-width: 480px) {
    html.notify-prompt-open .app {
        --notification-stack: 132px;
    }
}

.app:has(#banner:not(.hidden)) {
    --banner-height: 41px;
}

.app:has(#attach-preview:not(.hidden)) {
    --composer-block-height: calc(var(--composer-min-height) + 16px + 52px);
}

.app:has(.composer-wrap.is-voice-recording) {
    --composer-block-height: calc(var(--composer-min-height) + 16px);
}

.app-body {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}

#chat-main {
    flex: 1 1 0%;
    min-height: 0;
    overflow: hidden;
}

#chat-main .messages {
    position: fixed;
    top: calc(var(--header-height) + var(--safe-top) + var(--banner-height) + var(--vv-offset-top));
    bottom: calc(var(--chat-footer-stack) + var(--keyboard-inset));
    left: 0;
    right: 0;
    width: 100%;
    max-width: var(--app-max-width);
    margin: 0 auto;
    flex: none;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overflow-anchor: none;
    z-index: 1;
    padding-bottom: 16px;
}

#chat-main .composer-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--composer-bottom-offset) + var(--keyboard-inset));
    width: 100%;
    max-width: var(--app-max-width);
    margin: 0 auto;
    z-index: 25;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(15, 39, 68, 0.06);
}

@media (max-width: 767px) {
    #chat-main .messages {
        touch-action: pan-y;
    }
}

@media (min-width: 768px) {
    #chat-main .messages,
    #chat-main .composer-wrap {
        max-width: var(--app-shell-max);
    }

    #notification-prompt:not(.hidden),
    .incoming-message-toast:not(.hidden) {
        max-width: min(var(--app-shell-max), 480px);
    }
}

/* ── Loading / Error ── */

.loading-screen,
.error-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    text-align: center;
    gap: 16px;
    color: var(--text-secondary);
    background: var(--bg-app);
}

.loading-screen.hidden,
.error-screen.hidden {
    display: none;
}

.loading-screen p,
.error-screen p {
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.error-screen button {
    padding: 11px 28px;
    background: var(--brand-deep);
    color: var(--text-primary);
    border: 1px solid rgba(0, 174, 239, 0.3);
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.error-screen button:active {
    opacity: 0.85;
}

/* ── Responsive ── */

@media (max-width: 480px) {
    :root {
        --header-height: 76px;
    }

    .header {
        gap: 10px;
        padding: 12px 14px;
        padding-top: calc(12px + var(--safe-top));
        padding-left: calc(14px + var(--safe-left));
        padding-right: calc(14px + var(--safe-right));
    }

    .header-avatar {
        width: 48px;
        height: 48px;
        padding: 4px;
        border-radius: 10px;
    }

    .header-center {
        gap: 12px;
    }

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

    .header-sub {
        font-size: 0.75rem;
        line-height: 1.35;
    }

    .status-badge {
        font-size: 0.625rem;
        padding: 4px 7px;
    }
}

@media (max-width: 360px) {
    .header {
        gap: 8px;
        padding-left: calc(12px + var(--safe-left));
        padding-right: calc(12px + var(--safe-right));
    }

    .header-avatar {
        width: 44px;
        height: 44px;
    }

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

    .header-sub {
        font-size: 0.6875rem;
    }

    .messages {
        padding-left: 12px;
        padding-right: 12px;
    }

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

/* Tablet */
@media (min-width: 768px) {
    :root {
        --app-max-width: 100%;
        --app-shell-max: 920px;
        --sidebar-width: 220px;
        --message-max: 480px;
    }

    body {
        background: var(--bg-app);
        padding: 0;
        min-height: 100dvh;
    }

    .app {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
        grid-template-areas:
            "header"
            "banner"
            "content";
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .header {
        padding-top: 12px;
        padding-left: 20px;
        padding-right: 20px;
    }

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

    .header-sub {
        font-size: 0.875rem;
    }

    .app {
        padding-bottom: 0;
    }

    .messages {
        padding: 20px 28px 12px;
    }

    .message-row {
        max-width: min(72%, var(--message-max));
    }

    .composer-wrap .attach-preview,
    .composer-wrap .voice-recording-bar,
    .composer {
        padding-left: 28px;
        padding-right: 28px;
    }

    .composer-wrap .voice-recording-bar {
        padding-left: calc(28px + var(--safe-left));
        padding-right: calc(28px + var(--safe-right));
    }

    .attach-menu {
        left: 28px;
    }

    .composer-icon:hover,
    .composer-send:hover:not(:disabled),
    .attach-preview-clear:hover {
        opacity: 0.8;
    }

    .composer-icon:hover {
        color: var(--brand);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    :root {
        --sidebar-width: 260px;
        --message-max: 560px;
    }

    .app {
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    .header {
        padding: 14px 24px;
    }

    .header-avatar {
        width: 56px;
        height: 56px;
    }

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

    .messages {
        padding: 24px 48px 16px;
    }

    .message-row {
        max-width: min(68%, var(--message-max));
    }

    .message-bubble {
        padding: 12px 16px;
        font-size: 0.96875rem;
    }

    .composer-wrap .attach-preview,
    .composer-wrap .voice-recording-bar,
    .composer {
        padding-left: 48px;
        padding-right: 48px;
    }

    .composer-wrap .voice-recording-bar {
        padding-left: calc(48px + var(--safe-left));
        padding-right: calc(48px + var(--safe-right));
    }

    .composer input,
    .composer textarea {
        padding: 12px 18px;
    }

    .survey-card {
        max-width: 480px;
    }
}

/* Large desktop */
@media (min-width: 1440px) {
    .messages {
        padding-left: 64px;
        padding-right: 64px;
    }

    .composer-wrap .attach-preview,
    .composer-wrap .voice-recording-bar,
    .composer {
        padding-left: 64px;
        padding-right: 64px;
    }

    .composer-wrap .voice-recording-bar {
        padding-left: calc(64px + var(--safe-left));
        padding-right: calc(64px + var(--safe-right));
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    body {
        background: var(--desktop-bg);
    }

    #chat-main .messages,
    #chat-main .composer-wrap {
        max-width: 560px;
    }

    .app {
        max-width: 560px;
        border-left: 1px solid var(--border);
        border-right: 1px solid var(--border);
        box-shadow: 0 0 32px rgba(15, 39, 68, 0.1);
    }

    .messages {
        padding-left: 20px;
        padding-right: 20px;
    }

    .message-row {
        max-width: min(80%, 380px);
    }
}

/* ── Survey screen ── */

.survey-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    padding-top: calc(20px + var(--safe-top));
    padding-bottom: calc(20px + var(--safe-bottom));
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.survey-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}

.survey-badge {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-soft);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.survey-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}

.survey-intro {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.survey-context {
    display: grid;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-app);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.survey-context dt {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.survey-context dd {
    font-size: 0.875rem;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.survey-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.survey-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-app);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.survey-option:active:not(:disabled) {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.survey-option:disabled {
    opacity: 0.5;
    cursor: wait;
}

.survey-option-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-soft);
    border: 1px solid rgba(0, 174, 239, 0.25);
    color: var(--brand);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.survey-later,
.survey-back {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
}

.survey-back {
    margin-top: 8px;
    background: var(--brand-deep);
    color: var(--text-primary);
    border: 1px solid rgba(0, 174, 239, 0.3);
    border-radius: 10px;
    font-weight: 600;
}

.survey-error {
    font-size: 0.8125rem;
    color: var(--red);
    margin-bottom: 12px;
}

.survey-thanks-card {
    text-align: center;
}

.survey-thanks-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.75rem;
    line-height: 56px;
    font-weight: 700;
}

.survey-thanks-card p {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin-bottom: 8px;
}


/* ── Attach menu (WhatsApp style) ── */

.attach-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: transparent;
}

.attach-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 12px;
    z-index: 30;
    min-width: 240px;
    background: var(--attach-menu-bg);
    border-radius: 14px;
    padding: 6px 0;
    box-shadow: var(--attach-menu-shadow);
    transform-origin: bottom left;
    transform: scale(0.92);
    opacity: 0;
    transition: transform 0.18s ease, opacity 0.18s ease;
    pointer-events: none;
}

.attach-menu.open {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

.attach-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: var(--attach-menu-text);
    font-size: 0.9375rem;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
}

.attach-menu-item:hover,
.attach-menu-item:focus-visible {
    background: var(--attach-menu-hover);
    outline: none;
}

.attach-menu-item:active {
    opacity: 0.85;
}

.attach-menu-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}

.attach-menu-icon--photos { background: #7c3aed; }
.attach-menu-icon--video { background: #db2777; }
.attach-menu-icon--document { background: #2563eb; }

.attach-menu-label { white-space: nowrap; }