@font-face {
    font-family: "Montauk";
    src: url("../Montauk.woff2") format("woff2"), url("../Montauk.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary: #edf3fa;
    --accent: #ddc69f;
    --link: #83afd1;
    --background: #01040b;
    --text: #edf3fa;
    --body-font: "D-DIN", "Helvetica Neue", Arial, sans-serif;
    --heading-font: "D-DIN", "Helvetica Neue", Arial, sans-serif;
    --skyyware-muted: #bdc6d3;
    --skyyware-line: #667383;
    --skyyware-surface: #030b18;
    --skyyware-surface-raised: #0a1c30;
    --skyyware-gold: #ddc69f;
    --skyyware-ink: #071321;
    --skyyware-input: #ffffff;
    --skyyware-input-muted: #536174;
    --skyyware-phi: 1.618034;
    --skyyware-space-1: 8px;
    --skyyware-space-2: 13px;
    --skyyware-space-3: 21px;
    --skyyware-space-4: 34px;
    --skyyware-space-5: 55px;
    --skyyware-space-6: 89px;
    --skyyware-measure: 800px;
    --skyyware-radius: 4px;
    --skyyware-control: 44px;
    --action-background: var(--skyyware-gold);
    --action-hover-background: var(--text);
    --action-color: var(--skyyware-ink);
    --action-radius: var(--skyyware-radius);
}

html {
    color-scheme: dark;
    background: var(--background);
    scroll-padding-top: var(--skyyware-space-4);
}

body {
    position: relative;
    isolation: isolate;
    background: transparent;
    color: var(--text);
    font-size: 18px;
    line-height: var(--skyyware-phi);
    text-rendering: optimizeLegibility;
}

body::before, body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

body::before {
    background: radial-gradient(ellipse at 72% 80%, #0a1c30 0%, #030b18 43%, #01040b 100%);
}

body::after {
    background-image:
        radial-gradient(circle at 5% 8%, var(--text) 0.7px, transparent 1.2px),
        radial-gradient(circle at 12% 37%, var(--link) 0.8px, transparent 1.3px),
        radial-gradient(circle at 3% 69%, var(--text) 0.6px, transparent 1.1px),
        radial-gradient(circle at 17% 82%, var(--link) 0.7px, transparent 1.2px),
        radial-gradient(circle at 28% 12%, var(--text) 0.5px, transparent 1px),
        radial-gradient(circle at 36% 94%, var(--link) 0.7px, transparent 1.2px),
        radial-gradient(circle at 55% 3%, var(--text) 0.5px, transparent 1px),
        radial-gradient(circle at 76% 92%, var(--link) 0.8px, transparent 1.3px),
        radial-gradient(circle at 88% 18%, var(--text) 0.6px, transparent 1.1px),
        radial-gradient(circle at 96% 43%, var(--link) 0.7px, transparent 1.2px),
        radial-gradient(circle at 84% 71%, var(--text) 0.8px, transparent 1.3px),
        radial-gradient(circle at 98% 91%, var(--link) 0.5px, transparent 1px);
    background-size: 377px 610px;
    mask-image: linear-gradient(90deg, #fff, transparent 28%, transparent 72%, #fff);
    opacity: 0.55;
}

a {
    color: var(--link);
    text-underline-offset: 0.18em;
}

a:is(:hover, :focus-visible) { color: var(--accent); }

a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 5px;
    filter: none;
}

button:focus-visible, select:focus-visible, summary:focus-visible { text-decoration: none; }

.site-header, .chat-shell, .document, .legal-nav {
    width: min(var(--skyyware-measure), calc(100% - 68px));
    margin-inline: auto;
}

.site-header {
    position: relative;
    padding-block: var(--skyyware-space-4);
    background: transparent;
    gap: var(--skyyware-space-3);
}

.site-header::after { content: none; }
.brand, .brand:is(:visited, :hover, :focus-visible) { color: var(--text); }

.wordmark {
    font-family: "Montauk", "ITC Benguiat", Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: none;
}

.header-actions { gap: var(--skyyware-space-3); }

.language-form select, .reset, .header-link {
    color: var(--text);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.language-form select, .reset {
    min-height: var(--skyyware-control);
    border: 1px solid var(--skyyware-line);
    border-radius: var(--skyyware-radius);
    background: var(--skyyware-surface);
    box-shadow: none;
}

.language-form::after { border-color: var(--skyyware-muted); }

.language-form select:hover, .reset:hover {
    background: var(--skyyware-surface-raised);
    border-color: var(--link);
    color: var(--accent);
}

.chat-shell { padding-block: var(--skyyware-space-5) var(--skyyware-space-4); }

body:not(.has-conversation) .chat-shell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--skyyware-space-4);
}

body:not(.has-conversation) .suggestions { margin-bottom: 0; }

.welcome, .conversation, .composer-wrap, .suggestions, .actions, .project, .storage-notice, .error {
    max-width: var(--skyyware-measure);
}

.welcome {
    margin: 0 auto var(--skyyware-space-3);
    text-align: center;
}

.welcome .description { margin-inline: auto; }
.welcome .eyebrow { display: none; }

h1 {
    margin-bottom: var(--skyyware-space-4);
    color: var(--text);
    font-size: clamp(34px, 4.3vw, 55px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0;
    text-wrap: balance;
}

.welcome h1 { margin-bottom: var(--skyyware-space-2); }

.description {
    max-width: 754px;
    margin: 0;
    color: var(--skyyware-muted);
    font-size: 21px;
    line-height: var(--skyyware-phi);
}

.composer, .composer:focus-within {
    gap: var(--skyyware-space-2);
    padding-block: var(--skyyware-space-1);
    padding-inline: var(--skyyware-space-3) var(--skyyware-space-1);
    border: 1px solid var(--skyyware-line);
    border-radius: var(--skyyware-radius);
    background: var(--skyyware-input);
    color-scheme: light;
    box-shadow: none;
}

.composer:focus-within { border-color: var(--skyyware-gold); }

.composer textarea {
    color: var(--skyyware-ink);
    caret-color: var(--skyyware-ink);
    font-size: 21px;
    line-height: var(--skyyware-phi);
}

textarea::placeholder {
    color: var(--skyyware-input-muted);
    opacity: 1;
}

.send {
    width: var(--skyyware-space-5);
    height: var(--skyyware-space-5);
    border-radius: var(--skyyware-radius);
    background: var(--skyyware-gold);
    color: var(--skyyware-ink);
}

.send:hover, .send:focus-visible {
    background: var(--text);
    color: var(--skyyware-ink);
}

.suggestions, .suggestions[data-count="4"] {
    flex-wrap: wrap;
    max-width: var(--skyyware-measure);
    justify-content: center;
    gap: var(--skyyware-space-1) var(--skyyware-space-2);
    margin-inline: auto;
    margin-block: var(--skyyware-space-3) var(--skyyware-space-4);
}

.actions {
    margin-inline: auto;
    margin-block: 0 var(--skyyware-space-4);
}

.action-choices {
    gap: var(--skyyware-space-1) var(--skyyware-space-2);
    margin-block: 0;
}

.action-button {
    min-height: var(--skyyware-control);
    gap: var(--skyyware-space-1);
    padding: var(--skyyware-space-1) var(--skyyware-space-3);
    font-size: 16px;
    font-weight: 400;
    line-height: var(--skyyware-phi);
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

.action-button:focus-visible {
    outline: none;
    background: var(--action-hover-background);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.suggestions button, .retry {
    min-height: var(--skyyware-control);
    padding: var(--skyyware-space-1) var(--skyyware-space-2);
    border: 1px solid var(--skyyware-line);
    border-radius: var(--skyyware-radius);
    background: var(--skyyware-surface);
    color: var(--text);
    font-size: 16px;
    line-height: var(--skyyware-phi);
}

.suggestions button:hover, .retry:hover {
    border-color: var(--link);
    background: var(--skyyware-surface-raised);
}

.suggestions button, .suggestions button:hover, .suggestions button:active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.suggestions button:hover { color: var(--accent); }

.language-form select:active, .reset:active {
    background: var(--skyyware-surface-raised);
    color: var(--accent);
}

.suggestions span, .answer-label, .status, .turn-notice { color: var(--skyyware-muted); }
.answer-label { font-size: 13px; letter-spacing: 0; }
.conversation { gap: var(--skyyware-space-4); }
.message.assistant { padding: 0; }

.message.user {
    padding: var(--skyyware-space-2) var(--skyyware-space-3);
    border-radius: var(--skyyware-radius);
    background: var(--skyyware-surface-raised);
    color: var(--text);
    font-size: 18px;
}

.answer-intro {
    margin-block: var(--skyyware-space-2) var(--skyyware-space-3);
    font-size: 21px;
    line-height: var(--skyyware-phi);
}

.answer-step { padding-inline-start: var(--skyyware-space-4); }
.answer-step p { font-size: 18px; line-height: var(--skyyware-phi); }
.answer-step::before { background: transparent; color: var(--skyyware-gold); }
.source-link, .back { font-size: inherit; }
.source-link { border-bottom: 1px solid var(--skyyware-line); }

.follow-up {
    margin-top: var(--skyyware-space-3);
    padding: var(--skyyware-space-1) var(--skyyware-space-3);
    border-inline-start: 2px solid var(--skyyware-gold);
    font-size: 21px;
    line-height: var(--skyyware-phi);
}

.composer-wrap, .has-conversation .composer-wrap {
    background: transparent;
    box-shadow: none;
}

.has-conversation .composer-wrap {
    position: relative;
    margin-top: var(--skyyware-space-4);
    padding: 0;
}

.status {
    min-height: 73px;
    gap: var(--skyyware-space-2);
    padding: var(--skyyware-space-3);
    font-size: 16px;
}

.dots { color: var(--skyyware-gold); }

.project {
    gap: var(--skyyware-space-2);
    margin-block: var(--skyyware-space-4) var(--skyyware-space-3);
    background: transparent;
}

.asset-unit {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: var(--skyyware-space-1) var(--skyyware-space-3);
    padding: var(--skyyware-space-3);
    border: 1px solid var(--skyyware-line);
    border-radius: var(--skyyware-radius);
    background: var(--skyyware-surface);
}

.asset-symbol {
    width: 34px;
    height: 34px;
    color: var(--skyyware-gold);
    stroke: currentColor;
}

.asset-unit h2, .asset-unit h3 {
    color: var(--text);
    font-size: 18px;
    line-height: var(--skyyware-phi);
}

.asset-unit > p {
    color: var(--skyyware-muted);
    font-size: 16px;
    line-height: var(--skyyware-phi);
    opacity: 1;
}

.asset-details > summary { color: var(--link); }
.asset-details { font-size: 16px; }
.asset-description { color: var(--text); border-inline-start: 2px solid var(--skyyware-gold); }

.project button, .project .asset-button {
    min-height: var(--skyyware-control);
    padding: var(--skyyware-space-1) var(--skyyware-space-2);
    border: 1px solid var(--skyyware-gold);
    border-radius: var(--skyyware-radius);
    background: var(--skyyware-surface);
    color: var(--skyyware-gold);
    font-size: 16px;
    line-height: var(--skyyware-phi);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.project button:hover, .project .asset-button:hover {
    background: var(--skyyware-gold);
    color: var(--skyyware-ink);
}

.error, .storage-notice, .asset-notice {
    margin-block: var(--skyyware-space-3);
    padding: var(--skyyware-space-2) var(--skyyware-space-3);
    border: 1px solid var(--skyyware-gold);
    border-radius: var(--skyyware-radius);
    background: var(--skyyware-surface);
    color: var(--text);
    font-size: 16px;
}

.document { margin-block: var(--skyyware-space-5) var(--skyyware-space-6); }
.document h1 { margin-block: var(--skyyware-space-4); font-size: clamp(34px, 4.3vw, 55px); }
.document h2 { color: var(--text); font-size: 34px; line-height: 1.23; }

.document h3 {
    margin-block: var(--skyyware-space-4) var(--skyyware-space-2);
    color: var(--text);
    font-size: 21px;
}

.legal-body { max-width: none; }
.legal-body section + section { margin-top: var(--skyyware-space-5); }

.document p, .legal-body p, .legal-body li {
    color: var(--skyyware-muted);
    line-height: var(--skyyware-phi);
}

.legal-body p { margin-bottom: var(--skyyware-space-3); }

.legal-nav {
    margin-block: var(--skyyware-space-4);
    color: var(--skyyware-muted);
    font-size: 13px;
    text-transform: none;
}

.legal-nav a { min-height: var(--skyyware-control); color: inherit; }
.skip { background: var(--text); color: var(--background); }

@media (min-width: 481px) {
    .suggestions[data-count="4"] { grid-template-columns: repeat(2, minmax(0, max-content)); }
}

@media (max-width: 620px) {
    .site-header, .chat-shell, .document, .legal-nav { width: calc(100% - 42px); }
    .site-header { padding-block: var(--skyyware-space-3); flex-wrap: wrap; }
    .brand { flex-shrink: 0; }
    .wordmark { font-size: 21px; }
    .header-actions { flex-wrap: nowrap; gap: var(--skyyware-space-1); }
    .language-form select { width: 110px; padding-inline: var(--skyyware-space-2) 30px; }
    .language-form::after { inset-inline-end: var(--skyyware-space-2); }
    .chat-shell { padding-top: var(--skyyware-space-4); }
    .welcome h1 { font-size: 34px; }
    .description { max-width: none; font-size: 18px; }
    .composer textarea { font-size: 16px; }
    .composer { padding-inline-start: var(--skyyware-space-2); }
    .send { width: var(--skyyware-control); height: var(--skyyware-control); }
    .status { min-height: 62px; padding-inline: var(--skyyware-space-2); }
    .message.user { font-size: 16px; }
    .answer-intro, .follow-up { font-size: 18px; }
    .asset-unit { grid-template-columns: 21px minmax(0, 1fr); gap: var(--skyyware-space-1) var(--skyyware-space-2); }
    .contact-action { grid-template-columns: 21px minmax(0, 1fr) auto; padding: var(--skyyware-space-2); }
    .asset-symbol { width: 21px; height: 21px; }
    .project-actions { grid-column: 2; grid-row: 3; justify-content: flex-start; margin-top: var(--skyyware-space-1); }
    .asset-details { grid-column: 2; }
    .document h2 { font-size: 26px; }
    body::after { opacity: 0.34; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .composer, .asset-details > summary::after { transition: none; }
}
