/* The chat launcher is the only floating control; it keeps clear of the safe area. */
.chat-widget {
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    left: auto;
}

html { scroll-padding-bottom: 96px; }

.chat-launcher {
    min-height: 48px;
    gap: 8px;
    padding: 8px 16px;
}

.chat-panel {
    right: 0;
    bottom: 64px;
    left: auto;
    width: min(384px, calc(100vw - 32px));
    height: min(560px, calc(100vh - 144px));
    border-radius: 16px;
}

.chat-header { padding: 16px 24px; }
.chat-messages { gap: 8px; padding: 16px; }
.chat-suggestions { gap: 8px; padding: 8px 16px 0; }
.chat-form { grid-template-columns: 1fr 48px; padding: 16px 16px 8px; }
.chat-note { padding: 0 16px 16px; }

@media (max-width: 640px) {
    .chat-widget { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); left: auto; }
    .chat-launcher { padding: 8px 16px; }
    .chat-panel {
        position: fixed;
        right: 16px;
        bottom: calc(80px + env(safe-area-inset-bottom));
        left: 16px;
        width: auto;
        height: min(560px, calc(100dvh - 160px));
    }
}

/* On the narrowest phones the launcher collapses to a 48px circle; aria-label keeps its name. */
@media (max-width: 359px) {
    .chat-launcher { width: 48px; padding: 0; justify-content: center; }
    .chat-launcher span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}