.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.chat-page { min-height: 100dvh; overflow: hidden; background: var(--forest); color: white; }
.chat-shell { min-height: 100dvh; padding: 0 24px calc(var(--nav-height) + env(safe-area-inset-bottom) + 24px); }
.chat-header { width: min(1180px, 100%); margin: 0 auto; padding: calc(18px + env(safe-area-inset-top)) 0 16px; display: flex; align-items: center; justify-content: space-between; }
.chat-header .brand-mark { background: var(--lime); color: var(--forest); }
.ai-badge { padding: 9px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: rgba(255,255,255,.62); font-size: .75rem; font-weight: 750; }
.ai-badge span { color: var(--lime); }
.chat-main { width: min(1180px, 100%); height: calc(100dvh - var(--nav-height) - env(safe-area-inset-bottom) - 92px); margin: 0 auto; display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(35px, 7vw, 100px); align-items: center; }
.chat-intro .eyebrow { color: var(--lime); }
.chat-intro h1 { margin: 0; font-size: clamp(3.5rem, 7.4vw, 7rem); line-height: .82; letter-spacing: -.075em; }
.chat-intro h1 em { color: var(--lime); font-family: Georgia, serif; font-weight: 400; }
.chat-intro > p:nth-of-type(2) { max-width: 470px; margin: 25px 0; color: rgba(255,255,255,.58); line-height: 1.6; }
.prompt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.prompt-list button { padding: 9px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); font-size: .72rem; cursor: pointer; }
.chat-panel { height: min(650px, calc(100dvh - 150px)); display: grid; grid-template-rows: 1fr auto auto; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 28px; background: #102522; box-shadow: 0 35px 90px rgba(0,0,0,.3); }
.messages { min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px; overflow-y: auto; }
.message { max-width: 82%; display: grid; gap: 6px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.78); line-height: 1.5; white-space: pre-wrap; }
.message strong { color: var(--lime); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.user-message { align-self: flex-end; background: var(--lime); color: var(--forest); }
.user-message strong { color: var(--teal); }
.error-message { border: 1px solid rgba(255,140,90,.45); }
.chat-form { display: grid; grid-template-columns: 1fr auto; gap: 9px; padding: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.chat-form textarea { min-width: 0; min-height: 60px; max-height: 120px; padding: 18px; resize: none; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; outline: 0; background: rgba(255,255,255,.08); color: white; }
.chat-form textarea::placeholder { color: rgba(255,255,255,.38); }
.chat-form button { align-self: end; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--lime); color: var(--forest); font-size: 1.5rem; font-weight: 900; cursor: pointer; }
.chat-form button:disabled { cursor: wait; opacity: .6; }
.ai-note { margin: 0; padding: 0 18px 12px; color: rgba(255,255,255,.3); font-size: .62rem; text-align: center; }
@media (max-width: 800px) {
    .chat-page { overflow: auto; }
    .chat-shell { padding: 0 14px calc(var(--nav-height) + env(safe-area-inset-bottom) + 12px); }
    .chat-main { height: auto; min-height: calc(100dvh - 170px); grid-template-columns: 1fr; gap: 24px; align-items: start; padding: 22px 0; }
    .chat-intro h1 { font-size: clamp(3.5rem, 17vw, 5.5rem); }
    .chat-intro > p:nth-of-type(2), .prompt-list { display: none; }
    .chat-panel { height: 54dvh; min-height: 400px; border-radius: 22px; }
    .messages { padding: 16px; }
    .message { max-width: 90%; }
}