:root {
  --assistant-ink: #172026;
  --assistant-muted: #52616b;
  --assistant-surface: #ffffff;
  --assistant-soft: #f3f7f8;
  --assistant-accent: #087f8c;
  --assistant-accent-dark: #075f69;
  --assistant-border: #cfdbde;
}

.assistant-page { color: var(--assistant-ink); background: var(--assistant-soft); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; padding: .75rem; background: #fff; }
.site-header { background: #fff; border-bottom: 1px solid var(--assistant-border); }
.header-inner { min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { color: var(--assistant-ink); font-weight: 700; text-decoration: none; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-header nav a { color: var(--assistant-ink); }
.assistant-hero { padding: clamp(3rem, 8vw, 6rem) 0; color: #fff; background: linear-gradient(135deg, #102d35, #075f69); }
.assistant-hero-inner { max-width: 56rem; }
.assistant-hero h1 { margin: .4rem 0 1rem; font-size: clamp(2.4rem, 7vw, 4.8rem); line-height: 1.05; }
.assistant-introduction { max-width: 48rem; font-size: clamp(1.15rem, 2vw, 1.4rem); }
.assistant-privacy-notice { max-width: 48rem; }
.assistant-privacy-notice a { color: #fff; font-weight: 700; }
.eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.assistant-section { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.assistant-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr); gap: 1.5rem; align-items: start; }
.assistant-card, .assistant-examples { padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--assistant-border); border-radius: 1rem; background: var(--assistant-surface); box-shadow: 0 1rem 2.5rem rgba(23, 32, 38, .08); }
.assistant-card h2, .assistant-examples h2 { margin-top: 0; }
.assistant-card label { display: block; margin-bottom: .5rem; font-weight: 700; }
.assistant-card textarea { box-sizing: border-box; width: 100%; min-height: 8rem; resize: vertical; padding: .85rem; border: 1px solid #82969b; border-radius: .5rem; font: inherit; color: inherit; }
.assistant-card textarea:focus, .assistant-actions button:focus-visible, .assistant-sources a:focus-visible { outline: 3px solid #f1b24a; outline-offset: 3px; }
.field-guidance { margin: .4rem 0 1rem; color: var(--assistant-muted); font-size: .95rem; }
.assistant-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.assistant-actions button { min-height: 2.75rem; padding: .7rem 1.2rem; border-radius: .45rem; font: inherit; font-weight: 700; cursor: pointer; }
.assistant-actions button:disabled { cursor: wait; opacity: .65; }
.assistant-actions .btn-primary { border: 1px solid var(--assistant-accent); color: #fff; background: var(--assistant-accent); }
.assistant-actions .btn-secondary { border: 1px solid var(--assistant-accent-dark); color: var(--assistant-accent-dark); background: #fff; }
.assistant-status { min-height: 1.5rem; margin-bottom: 0; }
.assistant-status.error { color: #9f2424; font-weight: 700; }
.assistant-result { grid-column: 1; }
.grounding-state { display: inline-block; padding: .4rem .65rem; border-radius: 999px; color: var(--assistant-accent-dark); background: #e1f3f3; font-weight: 700; }
.assistant-answer { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.assistant-sources { padding-left: 1.25rem; }
.assistant-sources li { margin-block: .5rem; overflow-wrap: anywhere; }
.assistant-sources a { color: var(--assistant-accent-dark); }
.assistant-examples { grid-column: 2; grid-row: 1 / span 2; }
.assistant-examples li { margin-block: .75rem; }

@media (max-width: 700px) {
  .header-inner { align-items: flex-start; flex-direction: column; padding-block: 1rem; }
  .assistant-layout { grid-template-columns: minmax(0, 1fr); }
  .assistant-result, .assistant-examples { grid-column: 1; grid-row: auto; }
  .assistant-actions { flex-direction: column; }
  .assistant-actions button { width: 100%; }
}