/* Shared component ownership: page files only compose these classes. */
.ui-root {
    font-family: var(--ui-font-sans);
    font-size: var(--ui-type-body);
    line-height: var(--ui-line-body);
    color: var(--ui-color-text-primary);
    background: var(--ui-background-page);
}

.ui-root *, .ui-dialog * { box-sizing: border-box; }
.ui-root--transparent { background: transparent; }
.ui-root [hidden], .ui-dialog [hidden] { display: none; }
.ui-stack { display: flex; flex-direction: column; gap: var(--ui-space-4); }
.ui-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
.ui-row--center { justify-content: center; }
.ui-link, .auth-legal-link, a[data-legal-target] { color: var(--ui-color-link); text-decoration: underline; text-underline-offset: var(--ui-space-1); }
.ui-page { width: 100%; max-width: var(--ui-content-width); margin-inline: auto; padding: var(--ui-page-gutter); }
.ui-page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); min-height: var(--ui-header-height); }
.ui-title { margin: var(--ui-space-0); font-size: var(--ui-type-page-title); line-height: var(--ui-line-heading); font-weight: var(--ui-weight-semibold); color: var(--ui-color-text-primary); }
.ui-display { font-size: var(--ui-type-display); line-height: var(--ui-line-heading); font-weight: var(--ui-weight-strong); }
.ui-section-title { margin: var(--ui-space-0); font-size: var(--ui-type-section-title); line-height: var(--ui-line-heading); font-weight: var(--ui-weight-semibold); }
.ui-body { font-size: var(--ui-type-body); line-height: var(--ui-line-body); }
.ui-support { font-size: var(--ui-type-support); line-height: var(--ui-line-support); color: var(--ui-color-text-secondary); }
.ui-rich-text { font-size: var(--ui-type-reading); line-height: var(--ui-line-reading); overflow-wrap: anywhere; }
.ui-rich-text :where(p, ul, ol, blockquote) { margin: var(--ui-space-0) var(--ui-space-0) var(--ui-space-3); font-size: inherit; line-height: inherit; }
.ui-rich-text :where(h2, h3) { margin-block: var(--ui-space-4) var(--ui-space-2); font-size: var(--ui-type-section-title); line-height: var(--ui-line-heading); font-weight: var(--ui-weight-semibold); }
.ui-rich-text :where(ul, ol) { padding-inline-start: var(--ui-space-6); }
.ui-rich-text :where(a) { color: var(--ui-color-action-secondary-text); }

.ui-button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2);
    min-height: var(--ui-control-height); min-width: var(--ui-control-height); padding: var(--ui-space-2) var(--ui-space-4);
    border: var(--ui-border-width) solid var(--ui-color-border); border-radius: var(--ui-radius-medium);
    font-family: var(--ui-font-sans); font-size: var(--ui-type-item); line-height: var(--ui-line-support); font-weight: var(--ui-weight-medium);
    color: var(--ui-color-text-primary); background: var(--ui-color-surface); cursor: pointer;
}
.ui-button--primary, .ui-button--home, .ui-button--primary-readable { background: var(--ui-gradient-action); border-color: transparent; color: var(--ui-color-on-action); box-shadow: var(--ui-shadow-action); text-shadow: var(--ui-shadow-action-text); }
.ui-button--primary-readable { color: var(--ui-color-action-ink); text-shadow: none; }
.ui-button--home { min-width: var(--ui-home-action-width); height: var(--ui-control-height); gap: var(--ui-home-action-gap); padding: var(--ui-space-0) var(--ui-home-action-inset-end) var(--ui-space-0) var(--ui-home-action-inset-start); border: 0; border-radius: var(--ui-radius-pill); font-size: var(--ui-type-home-action); font-weight: var(--ui-weight-heavy); line-height: normal; }
.ui-button--home::after { content: "\f105"; display: inline-flex; align-items: center; justify-content: center; width: var(--ui-home-action-icon-size); height: var(--ui-home-action-icon-size); margin-left: auto; transform: translateX(var(--ui-home-action-icon-offset)); border-radius: var(--ui-radius-pill); font-family: var(--ui-font-icons); font-size: var(--ui-type-home-action-icon); font-weight: var(--ui-weight-heavy); background: var(--ui-color-action-icon-surface); color: var(--ui-color-brand); }
.ui-button--secondary { color: var(--ui-color-action-secondary-text); background: var(--ui-color-surface-soft); }
.ui-button--text { border-color: transparent; background: transparent; color: var(--ui-color-action-secondary-text); }
.ui-button--large { min-height: var(--ui-control-height-large); font-size: var(--ui-type-input); font-weight: var(--ui-weight-semibold); }
.ui-button--icon { width: var(--ui-control-height); padding: var(--ui-space-0); flex-shrink: 0; }
.ui-provider-actions { display: flex; justify-content: center; gap: var(--ui-space-4); }
.ui-provider-actions--auth { margin-block-start: var(--ui-space-8); }
.ui-auth-brand-offset { margin-block-start: var(--ui-space-8); }
@media (max-height: 740px) {
    .ui-auth-brand-offset { margin-block-start: var(--ui-space-4); }
}
@media (max-height: 640px) {
    .ui-auth-brand-offset { margin-block-start: var(--ui-space-0); }
}
body.keyboard-visible .ui-auth-brand-offset { margin-block-start: var(--ui-space-0); }
.ui-button--google-icon { width: var(--ui-control-height); height: var(--ui-control-height); padding: var(--ui-space-0); border: 0; overflow: hidden; border-radius: var(--ui-radius-pill); background: transparent; }
.ui-button--apple-icon { position: relative; width: var(--ui-control-height); height: var(--ui-control-height); padding: var(--ui-space-0); overflow: hidden; border: 0; border-radius: var(--ui-radius-pill); background: var(--ui-color-apple-background); color: var(--ui-color-apple-foreground); }
.ui-button--apple-icon::after { content: ""; position: absolute; inset: var(--ui-space-0); border: var(--ui-border-width) solid var(--ui-color-apple-border); border-radius: inherit; pointer-events: none; }
.ui-provider-glyph { display: block; width: 100%; height: 100%; object-fit: contain; }
.ui-provider-glyph--dark, body.dark-mode .ui-provider-glyph--light { display: none; }
body.dark-mode .ui-provider-glyph--dark { display: block; }
.ui-button--voice { border-color: transparent; border-radius: var(--ui-radius-pill); background: transparent; color: var(--ui-color-text-secondary); font-size: var(--ui-type-control-icon); }
.ui-button--composer-toggle, .ui-button--composer-attachment, .ui-button--composer-action {
    width: var(--ui-control-height); height: var(--ui-control-height); min-width: var(--ui-control-height); min-height: var(--ui-control-height);
    padding: var(--ui-space-0); border: 0; border-radius: var(--ui-radius-pill); font-size: var(--ui-type-control-icon); flex-shrink: 0;
}
.ui-button--composer-toggle, .ui-button--composer-attachment { background: var(--ui-color-surface-soft); color: var(--ui-color-text-secondary); }
.ui-button--composer-toggle:hover, .ui-button--composer-attachment:hover, .ui-button--composer-action:hover { transform: none; }
.ui-button--voice-hold { width: 100%; min-width: 0; border-radius: var(--ui-radius-pill); background: var(--ui-color-surface-soft); color: var(--ui-color-text-primary); }
.ui-button--voice-hold[aria-pressed="true"] { background: var(--ui-gradient-brand-soft); border-color: var(--ui-color-action-secondary); }
.ui-button--voice-hold[data-state="cancel"] { color: var(--ui-color-danger-text); }
.ui-button--composer-action[data-state="stop"],
#chat-page[data-ui-scope="brand-soft-refresh"] .has-voice-input .ui-button--composer-action[data-state="stop"] {
    position: relative; isolation: isolate; overflow: visible; animation: none; transform: none; filter: none; will-change: auto;
}
.ui-button--composer-action[data-state="stop"]::after,
#chat-page[data-ui-scope="brand-soft-refresh"] .has-voice-input .ui-button--composer-action[data-state="stop"]::after {
    content: ""; position: absolute; z-index: 0; inset: calc(var(--ui-space-1) * -1);
    border: var(--ui-border-width) solid var(--ui-color-reply-halo); border-radius: inherit; box-shadow: var(--ui-shadow-reply-halo);
    pointer-events: none; animation: ui-reply-halo var(--ui-motion-reply-breathe) ease-in-out infinite;
}
.ui-button--composer-action[data-state="stop"] i { position: relative; z-index: 1; }
@keyframes ui-reply-halo {
    0%, 100% { opacity: .18; transform: scale(.9); }
    50% { opacity: .72; transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
    .ui-button--composer-action[data-state="stop"]::after { animation: none; opacity: .46; transform: none; }
}
.ui-button:disabled, .ui-button[aria-disabled="true"] { opacity: var(--ui-opacity-disabled); cursor: default; }
.ui-button:focus-visible, .ui-input:focus-visible, .ui-link:focus-visible, .auth-legal-link:focus-visible, a[data-legal-target]:focus-visible { outline: var(--ui-focus-width) solid var(--ui-color-focus); outline-offset: var(--ui-focus-offset); }

.ui-field { display: flex; flex-direction: column; gap: var(--ui-space-2); text-align: start; }
.ui-label { font-size: var(--ui-type-body); line-height: var(--ui-line-support); font-weight: var(--ui-weight-medium); }
.ui-input {
    width: 100%; min-width: 0; min-height: var(--ui-control-height); padding: var(--ui-space-3);
    border: var(--ui-border-width) solid var(--ui-color-border); border-radius: var(--ui-radius-medium);
    font-family: var(--ui-font-sans); font-size: var(--ui-type-input); line-height: var(--ui-line-body);
    background: var(--ui-color-surface-solid); color: var(--ui-color-text-primary); text-align: start;
}
textarea.ui-input { min-height: var(--ui-textarea-height); resize: vertical; line-height: var(--ui-line-reading); }
.ui-input::placeholder { color: var(--ui-color-text-secondary); opacity: 1; }
.ui-input-group { display: flex; align-items: center; min-width: 0; overflow: hidden; border: var(--ui-border-width) solid var(--ui-color-border); border-radius: var(--ui-radius-medium); background: var(--ui-color-surface-solid); }
.ui-input-group > .ui-input { flex: 1; border: 0; border-radius: 0; background: transparent; }
.ui-input-group:focus-within { outline: var(--ui-focus-width) solid var(--ui-color-focus); outline-offset: var(--ui-focus-offset); }
.ui-input-group > .ui-input:focus-visible { outline: none; }
.ui-input-prefix { flex: 0 0 auto; padding-inline: var(--ui-space-3); border-inline-end: var(--ui-border-width) solid var(--ui-color-border); font-size: var(--ui-type-input); line-height: var(--ui-line-body); color: var(--ui-color-text-primary); }
.ui-input-group > .ui-input-action { flex: 0 0 auto; border: 0; border-inline-start: var(--ui-border-width) solid var(--ui-color-border); border-radius: 0; background: transparent; white-space: nowrap; box-shadow: none; }
.ui-switcher { display: flex; gap: var(--ui-space-2); }
.ui-switcher > .ui-button { flex: 1; }
.ui-switcher > .ui-button[aria-pressed="true"] { border-color: var(--ui-color-border); background: var(--ui-color-surface-soft); font-weight: var(--ui-weight-semibold); }
.ui-choice { display: flex; align-items: start; gap: var(--ui-space-2); text-align: start; cursor: pointer; }
.ui-choice > input[type="checkbox"] { flex: 0 0 auto; width: var(--ui-type-input); height: var(--ui-type-input); margin: var(--ui-space-1) var(--ui-space-0) var(--ui-space-0); accent-color: var(--ui-color-action-secondary-text); }
.ui-message { margin: var(--ui-space-0); text-align: start; }
.ui-message:empty { display: none; }
.ui-card { padding: var(--ui-space-4); border: var(--ui-border-width) solid var(--ui-color-border); border-radius: var(--ui-radius-large); background: var(--ui-color-surface); }
.ui-card--compact { padding: var(--ui-space-3); border-radius: var(--ui-radius-medium); }
.ui-status { display: flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-3); border-radius: var(--ui-radius-medium); background: var(--ui-color-surface-soft); color: var(--ui-color-text-secondary); font-size: var(--ui-type-body); line-height: var(--ui-line-body); }
.ui-status--error { color: var(--ui-color-danger-text); }
.ui-empty { padding: var(--ui-space-6); text-align: center; }
.ui-dialog { width: min(calc(100% - var(--ui-space-8)), var(--ui-dialog-width)); max-height: calc(100dvh - var(--ui-space-8)); margin: auto; overflow-y: auto; padding: var(--ui-space-6); border: var(--ui-border-width) solid var(--ui-color-border); border-radius: var(--ui-radius-large); background: var(--ui-color-surface-solid); color: var(--ui-color-text-primary); font-family: var(--ui-font-sans); font-size: var(--ui-type-body); }
.ui-dialog::backdrop { background: var(--ui-color-scrim); }
.ui-busy-dialog { width: fit-content; min-width: calc(var(--ui-control-height) * 2); max-width: min(calc(100% - var(--ui-space-8)), calc(var(--ui-content-width) / 2)); margin: auto; padding: var(--ui-space-6); border: 0; border-radius: var(--ui-radius-large); background: var(--ui-color-surface-solid); color: var(--ui-color-text-primary); box-shadow: var(--ui-shadow-large); font-family: var(--ui-font-sans); }
.ui-busy-dialog[open] { display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-3); }
.ui-busy-dialog:focus-visible { outline: none; }
.ui-busy-dialog::backdrop { background: var(--ui-color-loading-scrim); }
.ui-busy-dialog > .ui-support { margin: var(--ui-space-0); text-align: center; }
.ui-spinner { display: block; flex-shrink: 0; width: var(--ui-spinner-size); height: var(--ui-spinner-size); border: var(--ui-spinner-stroke) solid var(--ui-color-border); border-top-color: var(--ui-color-action-secondary-text); border-radius: var(--ui-radius-pill); animation: ui-spinner-turn calc(var(--ui-motion-fast) * 4) linear infinite; }
@keyframes ui-spinner-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-spinner { animation: none; } }