/* Authentication and responsive composition. Component styles live in their own files. */
.auth-shell { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); align-items: center; gap: clamp(40px, 7vw, 120px); padding: 64px max(40px, calc((100vw - 1200px)/2)); background: var(--space-bg); }
.auth-story { max-width: 570px; }
.auth-story .story-wordmark { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 700; letter-spacing: -.04em; margin-bottom: 72px; }
.auth-story h2 { font-size: clamp(42px, 4.5vw, 64px); line-height: 1.08; letter-spacing: -.055em; margin: 20px 0 24px; font-weight: 650; }
.auth-story h2 > span { color: var(--space-accent); }
.auth-story > p { color: var(--space-muted); font-size: 17px; line-height: 1.8; max-width: 420px; }
.story-features { display: grid; gap: 12px; margin-top: 36px; }
.story-feature { display: flex; align-items: center; gap: 16px; padding: 16px 0; }
.story-feature > span { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border: 1px solid var(--space-border); border-radius: 16px; background: var(--space-surface); color: var(--space-accent); }
.story-feature strong { display: block; font-size: 14px; font-weight: 600; }
.story-feature small { display: block; color: var(--space-muted); margin-top: 3px; }
.auth-card { background: var(--space-surface); padding: 40px; border: 1px solid var(--space-border); border-radius: var(--radius-xl); box-shadow: var(--space-shadow); min-width: 0; }
.auth-brand-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.auth-card .eyebrow { margin: 0 0 10px; }
.auth-card h1 { font-size: 30px; letter-spacing: -.04em; margin: 0 0 12px; }
.auth-card .subtle { font-size: 14px; margin-bottom: 24px; }
.auth-options { display: flex; padding: 4px; gap: 4px; background: var(--space-secondary); border-radius: var(--radius); margin: 24px 0; }
.auth-options button { flex: 1; border: 0; background: transparent; color: var(--space-muted); font-size: 13px; min-height: 44px; padding: 8px; }
.auth-options button.selected { background: var(--space-surface); color: var(--space-accent-dark); box-shadow: var(--space-shadow); }
.auth-fields { margin: 0; padding: 0; min-width: 0; border: 0; }
.auth-fields input { font-size: 16px; }
.auth-fields .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.auth-footnote { font-size: 12px; color: var(--space-muted); text-align: center; margin: 24px 0 0; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 52px; }
.password-field button { position: absolute; right: 4px; bottom: 2px; width: 44px; border: 0; background: transparent; color: var(--space-muted); padding: 10px; }
.chat-loading { min-height: 100svh; display: grid; place-items: center; }
@media (min-width: 741px) and (max-width: 1200px) {
    .member-panel { width: 82px; flex-basis: 82px; padding: 24px 12px; align-items: stretch; }
    .brand { justify-content: center; padding-bottom: 28px; }
    .brand div, .member-heading > span, .member-name, .member-call-actions, .assistant-button > span, .member-panel > .theme-control > .app-icon { display: none; }
    .assistant-button { justify-content: center; padding: 12px; }
    .member-panel .theme-picker { width: 100%; padding: 10px 0; font-size: 11px; }
    .member-heading, .member-open { justify-content: center; padding: 8px 0; }
    .account-button { font-size: 0; justify-content: center; }
    .account-button span { font-size: 20px; }
    .conversation-sidebar { width: 280px; flex-basis: 280px; }
    .presence { left: 37px; }
    .auth-shell { gap: 40px; padding: 48px 32px; }
}
@media (max-width: 900px) {
    .auth-shell { display: flex; flex-direction: column; padding: 40px 24px; gap: 32px; }
    .auth-story { display: none; }
    .auth-card { width: min(100%, 480px); }
}
@media (max-width: 740px) {
    input, select, textarea { font-size: 16px; }
    .auth-shell { align-items: start; padding: max(40px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom)); }
    .auth-card { padding: 30px 24px; border-radius: 26px; margin: auto 0; }
    .auth-card h1 { font-size: clamp(30px, 8vw, 36px); }
    .mobile-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
        border-top: 1px solid var(--space-border);
        background: var(--space-surface);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 10;
    }
    .mobile-nav a, .mobile-nav button {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        padding: 8px 2px;
        min-height: 56px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        color: var(--space-muted);
        text-decoration: none;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
    }
    .mobile-nav .active { color: var(--space-accent-dark); background: var(--space-soft); }
    .mobile-nav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .chat-shell { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-height, 100dvh); flex-direction: column; }
    .chat-shell > .mobile-nav { position: static; flex-shrink: 0; }
    .mobile-chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left)); border-bottom: 1px solid var(--space-border); flex-shrink: 0; background: var(--space-surface); }
    .mobile-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--space-ink); font-family: inherit; font-size: 18px; }
    .mobile-brand > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--space-accent); color: var(--space-on-accent); }
    .members-toggle { min-height: 44px; border: 1px solid var(--space-border); background: var(--space-bg); color: var(--space-accent-dark); padding: 8px 12px; font-size: 13px; }
    .members-toggle span { margin-left: 4px; }
    .chat-shell > .member-panel { display: none; }
    .chat-shell > .member-panel.members-open { display: flex; position: fixed; inset: 0 auto 0 0; width: min(340px, calc(100% - 32px)); height: var(--app-height, 100dvh); padding: max(26px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom)); z-index: 21; }
    .members-backdrop { display: block; position: fixed; inset: 0; z-index: 20; border: 0; border-radius: 0; background: var(--space-overlay); backdrop-filter: blur(4px); }
    .members-close { display: block; position: absolute; top: max(12px, env(safe-area-inset-top)); right: 10px; width: 44px; height: 44px; border: 0; background: var(--space-secondary); color: var(--space-ink); font-size: 26px; }
    .members-open .brand { justify-content: start; padding: 0 42px 26px 0; }
    .members-open .brand div, .members-open .member-heading span, .members-open .member-name { display: block; }
    .members-open .member-heading { justify-content: space-between; align-items: center; }
    .members-open .icon-button { width: 44px; height: 44px; }
    .members-open .member-open { justify-content: start; min-height: 56px; padding: 9px 10px; }
    .members-open .member-call-actions { display: flex; }
    .members-open .member-call { width: 44px; height: 44px; }
    .members-open .assistant-button { justify-content: start; padding: 12px; margin-bottom: 8px; }
    .members-open .assistant-button span { display: inline; font-size: 14px; }
    .chat-shell .members-open .account-button { display: flex; font-size: 14px; justify-content: space-between; margin-top: auto; flex-shrink: 0; }
    .members-open .member-list { padding-bottom: 20px; }
    .advanced-messaging { height: auto; width: 100%; flex: 1; min-height: 0; }
    .conversation-sidebar { width: 100%; flex: 1; padding: 26px max(20px, env(safe-area-inset-right)) 20px max(20px, env(safe-area-inset-left)); border: 0; }
    .conversation-sidebar .eyebrow { margin-top: 0; font-size: 10px; }
    .conversation-sidebar h2 { font-size: 28px; margin: 8px 0 22px; }
    .conversation-tools button { padding: 10px 16px; font-size: 14px; }
    .archive-toggle { font-size: 13px; padding-left: 0; background: transparent; }
    .conversation-row { padding: 16px 12px; gap: 12px; }
    .conversation-row strong { font-size: 16px; }
    .conversation-row small { font-size: 13px; }
    .conversation-time { font-size: 11px; }
    .advanced-conversation { display: none; }
    .conversation-open .conversation-sidebar { display: none; }
    .conversation-open .advanced-conversation { display: flex; }
    .advanced-conversation header { padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); min-height: 76px; flex-wrap: nowrap; gap: 10px; }
    .advanced-conversation h1 { font-size: 18px; }
    .advanced-conversation header small { font-size: 12px; line-height: 1.5; display: block; }
    .advanced-conversation header > button { min-width: 44px; padding: 8px; }
    .mobile-back { display: block; }
    .mobile-search-toggle { display: block; }
    .message-search { display: none; padding: 8px 16px; flex-wrap: wrap; gap: 6px; }
    .message-search.search-open { display: flex; }
    .message-search input:not([type=checkbox]) { flex: 1 0 100%; min-height: 44px; }
    .message-search label { font-size: 12px; margin-right: auto; }
    .message-search button { font-size: 12px; padding: 8px 12px; }
    .advanced-message-list { padding: 12px 16px; }
    .advanced-message .avatar { display: none; }
    .message-bubble { max-width: 92%; min-width: 0; }
    .message-bubble p { font-size: 16px; line-height: 1.5; }
    .message-bubble .message-meta strong { font-size: 13px; }
    .message-bubble time, .message-bubble small { font-size: 11px; }
    .empty-chat h2 { font-size: 26px; text-wrap: balance; }
    .empty-chat p { font-size: 14px; line-height: 1.6; }
    .typing-status { padding: 0 16px; min-height: 18px; }
    .advanced-composer { margin: 4px 12px 12px; gap: 3px; padding: 6px; }
    .advanced-composer textarea { min-height: 46px; padding: 12px 8px; font-size: 16px; }
    .advanced-composer button { min-width: 44px; }
    .upload-tray, .recording-tray { padding: 2px 16px; }
    .upload-tray button, .recording-tray button { font-size: 12px; }
    .assistant-heading { padding-top: max(20px, env(safe-area-inset-top)); }
    .assistant-composer { padding-bottom: 8px; }
    .assistant-composer textarea, .assistant-model-picker select { font-size: 16px; }
    .assistant-privacy { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
    .keyboard-open .chat-shell > .mobile-nav, .keyboard-open .mobile-chat-heading { display: none; }
    .keyboard-open .pt-app > .mobile-nav { display: none; }
    .keyboard-open .advanced-composer { margin-bottom: max(8px, env(safe-area-inset-bottom)); }
    .keyboard-open .assistant-tools, .keyboard-open .assistant-model-picker, .keyboard-open .assistant-privacy, .keyboard-open .assistant-provider { display: none; }
}
@media (max-width: 374px) {
    .mobile-brand { font-size: 16px; }
    .mobile-chat-heading, .conversation-sidebar, .pt-content, .pt-topbar, .pt-map-panel { padding-left: 14px; padding-right: 14px; }
    .pt-tabs > button { font-size: 11px; padding-left: 3px; padding-right: 3px; }
    .pt-planner { padding: 20px 14px; }
    .pt-preferences { gap: 4px 8px; }
    .pt-preferences label { font-size: 12px; }
    .advanced-composer { margin-left: 8px; margin-right: 8px; }
}
@media (max-width: 960px) and (orientation: landscape) and (max-height: 500px) {
    .mobile-chat-heading { display: none; }
    .assistant-heading { padding-top: 12px; padding-bottom: 10px; }
    .assistant-heading h2 { font-size: 24px; }
}

@media (max-width: 740px) {
    .mobile-chat-heading { gap: 6px; }
    .mobile-brand { font-family: inherit; font-size: 14px; font-weight: 650; white-space: nowrap; gap: 8px; }
    .mobile-chat-heading .theme-control > .app-icon { display: none; }
    .mobile-chat-heading .theme-picker { max-width: 86px; font-size: 12px; padding: 8px 4px; }
    .mobile-chat-heading .members-toggle { font-size: 12px; padding: 8px; }
    .mobile-brand > span { width: 32px; height: 32px; border-radius: 10px; }
    .auth-shell { min-height: 100svh; justify-content: center; padding: 24px 16px; }
    .auth-card { padding: 28px 24px; }
    .auth-card h1 { font-size: 28px; }
    .auth-brand-row { margin-bottom: 28px; }
    .call-card { padding: 24px 16px; }
    .call-control { padding: 12px 16px; }
    .call-notice { bottom: 100px; }
    .mobile-nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .members-open .presence { left: 34px; }
    .members-open > .theme-control { display: flex; }
    .conversation-tools { margin-top: 16px; }
    .message-actions summary { min-height: 44px; }
}
@media (max-width: 374px) {
    .mobile-brand { font-size: 12px; gap: 6px; }
    .mobile-brand > span { width: 28px; height: 28px; }
    .mobile-chat-heading .members-toggle span { display: none; }
    .advanced-composer textarea { padding-left: 4px; padding-right: 4px; }
}

@media(max-width: 900px) { .auth-shell { align-items: center; } }

.auth-story > .eyebrow { font-size: 11px; line-height: 1.5; color: var(--space-accent-dark); }