.ai-page {
padding-block: var(--space-lg);
}
.ai-layout {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}
.ai-header {
display: flex;
flex-direction: column;
gap: var(--space-xs);
margin-bottom: var(--space-md);
}
.ai-page-title {
font-family: var(--font-serif, "Merriweather", serif);
font-size: clamp(1.5rem, 2.4vw, 2rem);
margin: 0;
color: var(--color-text);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-sm);
}
.ai-beta-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-solid));
border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
border-radius: 999px;
padding: 2px 10px;
line-height: 1.4;
}
.ai-beta-pill i { font-size: 0.7rem; }
.ai-page-sub {
color: var(--color-text-muted);
margin: 0;
font-size: 0.95rem;
}
.ai-header-meta {
margin: 6px 0 0;
font-size: 0.8rem;
}
.ai-header-meta-link {
color: var(--color-text-muted);
text-decoration: none;
border-bottom: 1px dotted color-mix(in srgb, var(--color-text-muted) 50%, transparent);
transition: color var(--transition-fast), border-color var(--transition-fast);
}
.ai-header-meta-link:hover,
.ai-header-meta-link:focus-visible {
color: var(--color-text);
border-bottom-color: color-mix(in srgb, var(--color-text) 50%, transparent);
text-decoration: none;
}
.ai-destination-lang-picker {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 2px 22px 2px 8px;
color: var(--color-text);
font-size: 0.8rem;
font-family: inherit;
cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
background-position: right 9px center, right 4px center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
transition: border-color var(--transition-fast);
}
.ai-destination-lang-picker:hover,
.ai-destination-lang-picker:focus-visible {
border-color: var(--color-text-muted);
outline: none;
}
.ai-destination-lang-nudge {
display: block;
margin: var(--space-xs) auto 0;
padding: 2px 8px;
background: transparent;
border: 0;
color: var(--color-danger);
font-family: inherit;
font-size: 0.95rem;
font-weight: 400;
text-align: center;
cursor: pointer;
animation: ai-lang-nudge-pulse 1.4s ease-in-out 5 both;
}
.ai-destination-lang-nudge::before {
content: '↑';
display: block;
margin: 0 auto 2px;
font-weight: 600;
line-height: 1;
}
.ai-destination-lang-nudge:hover,
.ai-destination-lang-nudge:focus-visible {
text-decoration: underline;
outline: none;
}
.ai-destination-lang-nudge[hidden] {
display: none;
}
@keyframes ai-lang-nudge-pulse {
0%, 100% { opacity: 0.55; }
50%      { opacity: 1;    }
}
@media (prefers-reduced-motion: reduce) {
.ai-destination-lang-nudge {
animation: none;
opacity: 1;
}
}
.ai-feedback-cta {
margin: var(--space-md) 0 0;
font-size: 0.85rem;
color: var(--color-text-muted);
text-align: center;
}
.ai-feedback-cta a,
.ai-feedback-link {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
font-family: inherit;
font-size: inherit;
}
.ai-feedback-cta a:hover,
.ai-feedback-link:hover { text-decoration: underline; }
.ai-grid {
display: grid;
grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
gap: var(--space-lg);
align-items: start;
}
@media (width <= 967px) {
.ai-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.ai-sources {
position: sticky;
top: calc(var(--header-height, 64px) + var(--space-md));
}
@media (width > 967px) {
.ai-sources {
max-height: calc(100vh - var(--header-height, 64px) - var(--space-lg));
overflow-y: auto;
}
}
@media (715px < width <= 967px) {
.ai-sources {
max-height: 42vh;
overflow-y: auto;
}
}
.ai-sources-card {
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-md);
}
.ai-sources-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-xs);
}
.ai-sources-min-btn,
.ai-sources-restore {
appearance: none;
background: transparent;
border: 0;
border-radius: var(--radius-sm);
padding: 4px 6px;
cursor: pointer;
color: var(--color-text-muted);
font-size: 0.85rem;
line-height: 1;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.ai-sources-min-btn:hover,
.ai-sources-restore:hover {
background: var(--color-surface-hover);
color: var(--color-text);
}
.ai-sources-min-btn {
margin: -2px -4px 0 0;
}
.ai-sources-restore {
display: none;
margin-left: 2px;
}
.ai-grid.is-reader-mode .ai-sources {
display: none;
}
.ai-grid.is-reader-mode .ai-turn-sources {
display: block;
}
.ai-grid.is-reader-mode .ai-message,
.ai-grid.is-reader-mode .ai-next-turn {
border: 0;
}
.ai-message-assistant > .ai-turn-sources {
border: 0;
border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: 0;
background: transparent;
margin-top: var(--space-md);
}
.ai-message-assistant > .ai-turn-sources > .ai-turn-sources-summary {
padding-left: 0;
padding-right: 0;
}
.ai-message-assistant > .ai-turn-sources > .ai-turn-sources-body {
padding-left: 0;
padding-right: 0;
border-top: 0;
}
@media (width > 715px) {
.ai-grid.is-reader-mode .ai-turn-sources-summary .ai-sources-restore {
display: inline-flex;
align-items: center;
}
}
@media (width > 967px) {
.ai-grid.is-reader-mode {
grid-template-columns: minmax(0, 1fr);
}
.ai-grid.is-reader-mode .ai-conversation {
max-width: calc(100% - 280px - var(--space-lg));
margin-inline: auto;
}
}
.ai-sources-title {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 4px;
display: flex;
align-items: center;
gap: 8px;
letter-spacing: -0.005em;
color: var(--color-text);
}
.ai-sources-title .fas {
color: color-mix(in srgb, var(--color-primary) 75%, var(--color-text-muted));
font-size: 0.85rem;
}
.ai-sources-sub {
font-size: 0.78rem;
line-height: 1.45;
color: var(--color-text-muted);
margin: 0 0 var(--space-md);
}
.ai-tools-list {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.ai-citations-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap;
gap: var(--space-xs);
}
.ai-citations-list li {
margin: 0;
padding: 0;
}
.ai-tools-empty {
color: var(--color-text-muted);
font-style: italic;
margin: 0;
padding: var(--space-sm);
border: 1px dashed var(--color-border);
border-radius: var(--radius-sm, 4px);
font-size: 0.85rem;
}
.ai-tools-turn {
border: 0;
background: transparent;
border-radius: 0;
overflow: visible;
}
.ai-tools-turn + .ai-tools-turn {
padding-top: var(--space-md);
border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.ai-tools-turn-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: 0 0 var(--space-sm);
cursor: pointer;
list-style: none;
user-select: none;
}
.ai-tools-turn-summary::-webkit-details-marker {
display: none;
}
.ai-tools-turn-summary::before {
content: "\25BE";
font-size: 0.75rem;
color: var(--color-text-muted);
display: inline-block;
transform: rotate(-90deg);
transition: transform 120ms ease;
margin-right: 4px;
}
.ai-tools-turn[open] > .ai-tools-turn-summary::before {
transform: rotate(0);
}
.ai-tools-turn-label {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text);
flex: 1;
min-width: 0;
}
.ai-tools-turn-label [data-ai-turn-current] {
font-weight: 500;
color: var(--color-text-muted);
text-transform: none;
letter-spacing: 0;
}
.ai-tools-turn-count {
display: none;
}
.ai-turn-tier {
padding: 0;
}
.ai-turn-tier-label {
font-size: 0.66rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--color-text-muted);
margin: 0 0 6px;
}
.ai-turn-tier--trail {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
}
.ai-turn-tier-label--trail {
font-weight: 600;
color: color-mix(in srgb, var(--color-text-muted) 82%, transparent);
}
.ai-tools-trail-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.ai-tools-trail-list > li {
margin: 0;
padding: 0;
}
.ai-tool-entry {
display: flex;
flex-direction: column;
gap: 1px;
padding: 6px 8px;
border-radius: var(--radius-sm, 6px);
background: transparent;
border: 0;
color: var(--color-text);
text-decoration: none;
width: 100%;
text-align: start;
cursor: pointer;
transition: background 120ms ease;
appearance: none;
font-family: inherit;
}
button.ai-tool-entry,
a.ai-tool-entry { cursor: pointer; }
.ai-tool-entry:hover,
.ai-tool-entry:focus-visible {
background: color-mix(in srgb, var(--color-text) 5%, var(--color-surface-solid));
text-decoration: none;
}
.ai-tool-entry:focus-visible {
outline: 2px solid color-mix(in srgb, var(--color-primary) 50%, transparent);
outline-offset: 1px;
}
.ai-tool-name {
font-weight: 600;
color: var(--color-text);
font-size: 0.83rem;
line-height: 1.35;
}
.ai-tool-summary {
color: var(--color-text-muted);
font-size: 0.76rem;
line-height: 1.4;
}
.ai-turn-tier--cited .ai-citations-section + .ai-citations-section:not([hidden]) {
margin-top: var(--space-sm);
}
.ai-conversation {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.ai-turn-pair {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.ai-turn-pair + .ai-turn-pair {
padding-top: var(--space-xs);
}
.ai-turn-marker {
display: flex;
align-items: center;
gap: var(--space-sm);
margin: 0 var(--space-xs);
user-select: none;
pointer-events: none;
}
.ai-turn-marker::before,
.ai-turn-marker::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border);
}
.ai-turn-marker-num {
color: var(--color-text-muted);
font-size: 0.72rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
padding: 0 2px;
}
.ai-turn-pair:first-child .ai-turn-marker {
display: none;
}
.ai-message {
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-md) var(--space-lg);
}
.ai-message-user {
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface-solid));
border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border));
}
.ai-message-user .ai-message-body {
white-space: pre-wrap;
}
.trv-redacted-prompt {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
color: var(--color-text-muted);
letter-spacing: 0.15em;
user-select: none;
}
.ai-message-role {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
color: var(--color-text-muted);
margin-bottom: var(--space-xs);
display: block;
}
.ai-message-assistant {
position: relative;
padding-bottom: calc(var(--space-md) + 28px);
}
.ai-message-copy {
appearance: none;
position: absolute;
right: var(--space-sm);
bottom: var(--space-sm);
background: transparent;
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-text-muted);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ai-message-copy:hover {
color: var(--color-text);
background: var(--color-surface-soft);
border-color: color-mix(in srgb, var(--color-text) 30%, var(--color-border));
}
.ai-message-copy .fas {
font-size: 0.85rem;
}
.ai-message-body {
color: var(--color-text);
font-family: var(--font-ai);
font-size: 1.0625rem;
line-height: 1.65;
letter-spacing: -0.003em;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
text-rendering: optimizelegibility;
}
.ai-message-body > :first-child { margin-top: 0; }
.ai-message-body > :last-child { margin-bottom: 0; }
.ai-message-body p {
margin: 0 0 1em;
}
.ai-message-body p:last-child {
margin-bottom: 0;
}
.ai-message-body strong {
font-weight: 700;
color: color-mix(in srgb, var(--color-text) 96%, #000);
}
.ai-message-body h2 {
font-family: var(--font-ai);
font-size: 1.375rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--color-text);
margin: 1.75em 0 0.4em;
padding-bottom: var(--space-xs);
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
}
.ai-message-body h3 {
font-family: var(--font-ai);
font-size: 1.125rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.005em;
color: var(--color-text);
margin: 1.5em 0 0.25em;
}
.ai-message-body h4 {
font-family: var(--font-ai);
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
color: var(--color-text);
margin: 1.25em 0 0.25em;
}
.ai-message-body h2 + p,
.ai-message-body h3 + p,
.ai-message-body h4 + p { margin-top: 0; }
.trv-translit {
font-family: Inter, system-ui, sans-serif;
font-style: italic;
font-weight: 600;
letter-spacing: 0.005em;
}
.trv-translit strong,
.trv-translit b {
font-weight: 700;
}
.ai-message-body ul,
.ai-message-body ol {
margin: 0 0 1em;
padding-left: 1.6rem;
}
.ai-message-body li {
margin-bottom: 0.4em;
padding-left: 0.15rem;
}
.ai-message-body li::marker {
color: var(--color-text-muted);
}
.ai-message-body li:last-child {
margin-bottom: 0;
}
.ai-message-body li > p {
margin: 0;
}
.ai-message-body li > p + p {
margin-top: 0.5em;
}
.ai-message-body blockquote {
margin: var(--space-md) 0;
padding: var(--space-2xs) var(--space-md);
border-left: 3px solid color-mix(in srgb, var(--color-primary) 70%, transparent);
color: var(--color-text-muted);
font-style: italic;
background: color-mix(in srgb, var(--color-primary) 4%, transparent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ai-message-body blockquote p {
margin: 0 0 0.5em;
}
.ai-message-body blockquote p:last-child {
margin-bottom: 0;
}
.ai-message-body a[data-trv-ref] {
color: var(--color-primary);
text-decoration: none;
border-bottom: 1px dotted currentcolor;
transition: color 120ms ease, border-bottom-style 120ms ease;
}
.ai-message-body a[data-trv-ref]:hover {
color: var(--color-primary-hover);
border-bottom-style: solid;
}
.ai-message-body a[data-trv-ref].trv-link-leaves {
border-bottom-style: solid;
}
.ai-message-body a[data-trv-ref]:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
border-radius: 2px;
border-bottom-style: solid;
}
.ai-message-body code {
font-family: var(--font-mono, ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", "Courier New", monospace);
background: color-mix(in srgb, var(--color-text) 6%, transparent);
padding: 0.1em 0.35em;
border-radius: 4px;
font-size: 0.88em;
}
.ai-message-body pre {
margin: var(--space-md) 0;
padding: var(--space-md);
background: var(--color-surface-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
overflow-x: auto;
font-size: 0.9rem;
line-height: 1.55;
}
.ai-message-body pre code {
background: transparent;
padding: 0;
border-radius: 0;
font-size: inherit;
}
.ai-message-body hr {
margin: var(--space-lg) 0;
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}
.ai-md {
display: block;
}
.ai-cursor {
display: inline-block;
width: 2px;
height: 1.05em;
margin-left: 2px;
vertical-align: -0.15em;
background: var(--color-text);
opacity: 0.85;
animation: ai-cursor-blink 900ms steps(2, start) infinite;
}
@keyframes ai-cursor-blink {
50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ai-cursor {
animation: none;
}
}
.ai-tool-entry.ai-tool-pending {
border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface-soft));
animation: ai-tool-pulse 1.4s ease-in-out infinite;
}
.ai-tool-entry.ai-tool-pending .ai-tool-summary::after {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin-left: 6px;
border-radius: 50%;
background: var(--color-primary);
animation: ai-tool-dot 0.9s ease-in-out infinite alternate;
vertical-align: middle;
}
@keyframes ai-tool-pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 25%, transparent); }
50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 0%, transparent); }
}
@keyframes ai-tool-dot {
from { opacity: 0.35; transform: scale(0.85); }
to   { opacity: 1;    transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
.ai-tool-entry.ai-tool-pending,
.ai-tool-entry.ai-tool-pending .ai-tool-summary::after {
animation: none;
}
}
.ai-skeleton {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.ai-skeleton-line {
height: 14px;
border-radius: 7px;
background: linear-gradient(
90deg,
var(--color-surface-soft) 0%,
color-mix(in srgb, var(--color-text) 5%, var(--color-surface-soft)) 50%,
var(--color-surface-soft) 100%
);
background-size: 200% 100%;
animation: ai-skeleton-shimmer 1.5s ease-in-out infinite;
}
.ai-skeleton-line-w90 { width: 90%; }
.ai-skeleton-line-w85 { width: 85%; }
.ai-skeleton-line-w70 { width: 70%; }
.ai-skeleton-line-w60 { width: 60%; }
@keyframes ai-skeleton-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.ai-skeleton-line {
animation: none;
}
}
.ai-status {
color: var(--color-text-muted);
font-size: 0.9rem;
font-style: italic;
margin: var(--space-sm) 0 0;
}
.ai-status-live::after {
content: "…";
display: inline-block;
width: 0;
overflow: hidden;
white-space: nowrap;
vertical-align: bottom;
animation: ai-status-dots 1.6s steps(4, jump-none) infinite;
}
@keyframes ai-status-dots {
from { width: 0; }
to   { width: 1.1em; }
}
@media (prefers-reduced-motion: reduce) {
.ai-status-live::after {
animation: none;
width: auto;
}
}
.ai-next-turn {
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
margin-top: var(--space-md);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
overflow: hidden;
}
.ai-next-turn[hidden] { display: none; }
.ai-next-turn:focus-within {
border-color: var(--color-text);
box-shadow: 0 0 0 3px var(--color-surface-hover);
}
.ai-next-turn-sources {
border-bottom: 1px solid var(--color-border);
}
.ai-next-turn-sources-summary {
list-style: none;
cursor: pointer;
padding: var(--space-xs) var(--space-md);
font-size: 0.8rem;
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 6px;
user-select: none;
}
.ai-next-turn-sources-summary::-webkit-details-marker { display: none; }
.ai-next-turn-sources-summary::after {
content: "\25BE";
margin-left: auto;
font-size: 0.85rem;
transition: transform 150ms ease;
color: var(--color-text-muted);
}
.ai-next-turn-sources[open] > .ai-next-turn-sources-summary::after {
transform: rotate(180deg);
}
.ai-next-turn-sources-summary-label {
font-weight: 500;
}
.ai-next-turn-sources-summary-state {
color: var(--color-text);
font-weight: 500;
}
.ai-next-turn-sources-body {
padding: var(--space-xs) var(--space-md) var(--space-sm);
border-top: 1px dashed var(--color-border);
}
.ai-next-turn-sources-help {
margin: 0 0 var(--space-xs);
font-size: 0.78rem;
color: var(--color-text-muted);
line-height: 1.4;
}
.ai-next-turn-sources-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-md);
}
.ai-next-turn-sources-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.875rem;
color: var(--color-text);
}
.ai-next-turn-sources-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--color-text);
margin: 0;
}
.ai-next-turn .ai-reply-form,
.ai-next-turn .ai-destination-form {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: var(--space-md);
}
.ai-next-turn .ai-reply-form:focus-within,
.ai-next-turn .ai-destination-form:focus-within {
background: transparent;
border: 0;
box-shadow: none;
}
.ai-followups {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 2px;
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
.ai-followup-chip {
appearance: none;
display: flex;
align-items: baseline;
gap: var(--space-sm);
width: 100%;
background: transparent;
border: none;
border-radius: var(--radius-sm);
padding: 7px var(--space-sm);
color: var(--color-text);
font-size: var(--font-size-md);
line-height: 1.4;
text-align: left;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.ai-followup-chip::before {
content: "\21B3";
flex: 0 0 auto;
color: var(--color-text-muted);
transition: color 120ms ease;
}
.ai-followup-chip:hover,
.ai-followup-chip:focus-visible {
background: var(--color-surface-hover);
color: var(--color-text);
}
.ai-followup-chip:hover::before,
.ai-followup-chip:focus-visible::before {
color: var(--color-primary);
}
.ai-followup-chip[disabled] {
cursor: default;
opacity: 0.7;
}
.ai-reply-form {
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-sm);
display: flex;
flex-direction: column;
gap: var(--space-sm);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ai-reply-form:focus-within {
border-color: var(--color-text);
box-shadow: 0 0 0 3px var(--color-surface-hover);
}
.ai-reply-form[hidden] {
display: none;
}
.ai-reply-input {
appearance: none;
border: 0;
background: transparent;
resize: none;
color: var(--color-text);
font: inherit;
max-height: calc(7lh + var(--space-sm) * 2);
padding: var(--space-sm);
line-height: 1.5;
outline: none;
overflow-y: auto;
}
.ai-reply-input:focus,
.ai-reply-input:focus-visible {
outline: none;
box-shadow: none;
}
.ai-reply-input:disabled {
color: var(--color-text-muted);
cursor: not-allowed;
}
.ai-reply-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: 0 var(--space-sm) var(--space-xs);
}
.ai-turn-counter {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.ai-turn-counter[hidden] { display: none; }
.ai-reply-actions {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
margin-inline-start: auto;
}
.ai-reply-send {
appearance: none;
background: var(--color-text);
color: var(--color-surface-solid);
border: 0;
border-radius: var(--radius-full);
padding: var(--space-xs) var(--space-md);
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
font-size: 0.875rem;
}
.ai-reply-send:disabled {
background: var(--color-text-muted);
cursor: not-allowed;
opacity: 0.6;
}
.ai-reply-form.is-rate-limited .ai-reply-input,
.ai-reply-form.is-rate-limited .ai-reply-send {
cursor: not-allowed;
}
.ai-rate-limit-popover {
position: absolute;
z-index: 1000;
background: var(--color-surface-solid);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm, 6px);
padding: 8px 12px;
font-size: 0.875rem;
box-shadow: var(--shadow-md, 0 4px 12px hsl(0deg 0% 0% / 12%));
display: inline-flex;
align-items: center;
gap: 8px;
pointer-events: none;
max-width: 280px;
}
.ai-rate-limit-popover[hidden] { display: none; }
.ai-rate-limit-popover i { color: var(--color-text-muted); }
.ai-empty-state {
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-left-width: 4px;
border-radius: var(--radius-lg);
padding: var(--space-xl, 32px) var(--space-lg);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
text-align: center;
}
.ai-empty-state[hidden] {
display: none;
}
.ai-empty-state .fas {
font-size: 1.75rem;
margin-bottom: var(--space-xs);
}
.ai-empty-info {
border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
border-left-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface-solid));
}
.ai-empty-info .fas {
color: var(--color-primary);
}
.ai-empty-inline {
padding: var(--space-md) var(--space-lg);
}
.ai-empty-title {
font-family: var(--font-serif, "Merriweather", serif);
margin: 0;
font-size: 1.15rem;
color: var(--color-text);
}
.ai-empty-message {
margin: 0;
color: var(--color-text);
font-size: 0.95rem;
line-height: 1.5;
max-width: 50ch;
}
.ai-empty-ctas {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
margin-top: var(--space-xs);
}
.ai-empty-cta,
a.ai-empty-cta:any-link {
appearance: none;
background: transparent;
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
padding: var(--space-xs) var(--space-md);
font-weight: 600;
cursor: pointer;
text-decoration: none;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: var(--space-xs);
transition: background 120ms ease, border-color 120ms ease;
}
.ai-empty-cta:hover {
background: var(--color-surface-soft);
}
.ai-empty-cta-primary,
a.ai-empty-cta-primary:any-link {
background: var(--color-text);
color: var(--color-surface-solid);
border-color: var(--color-text);
}
.ai-empty-cta-primary:hover {
background: color-mix(in srgb, var(--color-text) 88%, transparent);
border-color: var(--color-text);
}
.ai-inline-warning {
margin-top: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
border-left: 3px solid #d97706;
background: color-mix(in srgb, #f59e0b 6%, var(--color-surface-soft));
color: var(--color-text);
font-size: 0.85rem;
border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}
.ai-inline-warning .fas {
color: #d97706;
margin-right: 4px;
}
.ai-turn-sources {
display: none;
margin-top: var(--space-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-md, 8px);
background: transparent;
overflow: hidden;
}
.ai-turn-sources-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
cursor: pointer;
list-style: none;
user-select: none;
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text);
}
.ai-turn-sources-summary::-webkit-details-marker {
display: none;
}
.ai-turn-sources-summary-label {
display: flex;
align-items: center;
gap: var(--space-xs);
}
.ai-turn-sources-summary-label .fa-book-open {
color: var(--color-text-muted);
}
.ai-turn-sources-summary::after {
content: "▸";
font-size: 0.75rem;
color: var(--color-text-muted);
transition: transform 120ms ease;
}
.ai-turn-sources[open] > .ai-turn-sources-summary::after {
transform: rotate(90deg);
}
.ai-turn-sources-count {
margin-left: auto;
margin-right: var(--space-xs);
font-size: 0.78rem;
font-weight: 500;
color: var(--color-text-muted);
}
.ai-turn-sources-body {
padding: var(--space-xs) var(--space-sm) var(--space-sm);
border-top: 1px solid var(--color-border);
}
.ai-turn-sources-body .ai-turn-tier:first-child {
padding-top: var(--space-xs);
}
.ai-turn-sources-body .ai-turn-tier--cited .ai-citations-section + .ai-citations-section:not([hidden]) {
margin-top: var(--space-sm);
}
.ai-turn-sources-empty {
color: var(--color-text-muted);
font-style: italic;
font-size: 0.8rem;
margin: 0;
}
@media (width <= 715px) {
.ai-grid {
grid-template-columns: minmax(0, 1fr);
}
.ai-sources {
display: none;
}
.ai-turn-sources {
display: block;
}
}
@media (width <= 600px) {
.ai-grid {
margin-inline: calc(-1 * var(--space-mobile-md));
}
.ai-grid .ai-message,
.ai-grid .ai-next-turn,
.ai-grid .ai-empty-state {
border-inline: 0;
border-radius: 0;
}
}
.ai-gate {
display: flex;
flex-direction: column;
gap: var(--space-xl, 32px);
max-width: 760px;
margin: var(--space-lg) auto;
padding: 0 var(--space-md);
}
.ai-gate-hero {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
}
.ai-gate-hero-title {
font-family: var(--font-serif, "Merriweather", serif);
margin: 0;
font-size: clamp(1.5rem, 5vw, 2rem);
line-height: 1.2;
color: var(--color-text);
display: inline-flex;
align-items: center;
gap: 0.4em;
flex-wrap: wrap;
justify-content: center;
}
.ai-gate-hero-sub {
margin: 0;
color: var(--color-text-muted);
line-height: 1.5;
font-size: 1rem;
max-width: 56ch;
}
.ai-gate-signin {
appearance: none;
background: var(--color-text);
color: var(--color-surface-solid);
border: 0;
border-radius: var(--radius-full);
padding: var(--space-sm) var(--space-lg);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--space-sm);
min-height: 44px;
transition: background-color var(--transition-fast);
}
@media (hover: hover) {
.ai-gate-signin:hover {
background: var(--color-text-strong, var(--color-text));
opacity: 0.92;
}
}
.ai-gate-signin:focus-visible {
outline: 2px solid var(--color-accent, var(--color-text));
outline-offset: 3px;
}
.ai-gate-signin .fa-google {
color: #ea4335;
background: white;
border-radius: 50%;
padding: 4px;
font-size: 0.85em;
}
.ai-gate-trust {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
justify-content: center;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.ai-gate-trust li {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ai-gate-trust .fa-check {
color: var(--color-success, #16a34a);
font-size: 0.75rem;
}
.ai-gate-pledge {
list-style: none;
margin: 0;
padding: 6px 14px;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-full, 999px);
background: color-mix(in srgb, var(--color-text) 3%, var(--color-surface-solid));
}
.ai-gate-pledge-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 0.95rem;
color: var(--color-text);
line-height: 1.2;
}
.ai-gate-pledge-item + .ai-gate-pledge-item {
border-left: 1px solid var(--color-border);
padding-left: var(--space-md);
}
.ai-gate-pledge-glyph {
display: inline-flex;
width: 22px;
height: 22px;
flex-shrink: 0;
}
.ai-gate-pledge-glyph svg {
width: 100%;
height: 100%;
display: block;
}
@media (width <= 480px) {
.ai-gate-pledge {
flex-direction: column;
gap: var(--space-xs, 6px);
padding: 10px 18px;
}
.ai-gate-pledge-item + .ai-gate-pledge-item {
border-left: 0;
padding-left: 0;
}
}
.ai-gate-pending-q {
margin: var(--space-md) auto 0;
padding: var(--space-md) var(--space-lg);
background: color-mix(in srgb, var(--color-primary) 7%, transparent);
border: 1px solid color-mix(in srgb, var(--color-primary) 32%, transparent);
border-left: 4px solid var(--color-primary);
border-radius: var(--radius-md);
font-size: 0.92rem;
color: var(--color-text);
max-width: 56ch;
text-align: left;
line-height: 1.5;
}
.ai-gate-pending-q::before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
vertical-align: -3px;
background-color: var(--color-primary);
-webkit-mask: var(--trv-ai-sparkle-svg) center / contain no-repeat;
mask: var(--trv-ai-sparkle-svg) center / contain no-repeat;
}
.ai-gate-pending-q strong {
display: block;
margin-top: 6px;
font-family: var(--font-serif, "Merriweather", serif);
font-style: italic;
font-weight: 500;
font-size: 1.05rem;
color: var(--color-primary);
overflow-wrap: anywhere;
line-height: 1.4;
}
.ai-gate-demo {
margin: 0;
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-md);
box-shadow: var(--shadow-md, 0 4px 16px hsl(0deg 0% 0% / 6%));
position: relative;
overflow: hidden;
}
.ai-gate-demo-cap {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
margin-bottom: var(--space-sm);
}
.ai-gate-demo-cap .fa-eye { font-size: 0.85em; }
.ai-gate-demo-frame {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.ai-gate-demo-answer .ai-message-body em { color: var(--color-text); }
.ai-gate-demo-answer .ai-message-body p:last-child { margin-bottom: 0; }
.ai-gate-demo-answer .ai-message-body a[data-trv-ref] {
cursor: default;
}
.ai-gate-demo-answer .ai-message-body a[data-trv-ref]:hover {
border-bottom-style: dotted;
color: var(--color-primary);
}
.ai-gate-demo-sources {
display: block;
margin-top: var(--space-sm);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.ai-gate-moat {
text-align: center;
max-width: 60ch;
margin: 0 auto;
}
.ai-gate-moat-title {
font-family: var(--font-serif, "Merriweather", serif);
margin: 0 0 var(--space-sm);
font-size: 1.25rem;
color: var(--color-text);
}
.ai-gate-moat-body {
margin: 0;
color: var(--color-text-muted);
line-height: 1.6;
}
.ai-gate-features { margin: 0; }
.ai-gate-feature-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
.ai-gate-feature {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-md);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.ai-gate-feature > i {
font-size: 1.5rem;
color: var(--color-accent, var(--color-text));
margin-bottom: 4px;
}
.ai-gate-feature-title {
font-family: var(--font-serif, "Merriweather", serif);
margin: 0;
font-size: 1rem;
color: var(--color-text);
}
.ai-gate-feature-body {
margin: 0;
font-size: 0.88rem;
line-height: 1.45;
color: var(--color-text-muted);
}
.ai-gate-examples { margin: 0; }
.ai-gate-footer {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border);
}
.ai-gate-signin-secondary {
background: transparent;
color: var(--color-text);
border: 1px solid var(--color-border);
}
@media (hover: hover) {
.ai-gate-signin-secondary:hover {
background: var(--color-surface-hover);
border-color: var(--color-text);
opacity: 1;
}
}
.ai-gate-disclosure {
margin: 0;
font-size: 0.78rem;
color: var(--color-text-muted);
line-height: 1.5;
max-width: 56ch;
display: inline-flex;
align-items: flex-start;
gap: 8px;
}
.ai-gate-disclosure .fa-shield-halved {
flex-shrink: 0;
margin-top: 3px;
color: var(--color-text-muted);
}
@media (width >= 720px) {
.ai-gate { padding: 0; }
.ai-gate-feature-list {
grid-template-columns: repeat(3, 1fr);
}
.ai-gate-feature {
padding: var(--space-lg) var(--space-md);
}
.ai-gate-demo {
padding: var(--space-lg);
}
}
.ai-tool-entry.ai-tool-static {
cursor: default;
opacity: 0.95;
}
.ai-tool-entry.ai-tool-static:hover {
background: inherit;
border-color: inherit;
transform: none;
}
.ai-source-modal-dialog {
max-width: 720px;
}
.ai-source-modal-header {
margin-right: var(--space-xl);
margin-bottom: var(--space-md);
}
.ai-source-modal-title {
font-family: var(--font-serif, "Merriweather", serif);
font-size: 1.25rem;
margin: 0 0 4px;
color: var(--color-text);
}
.ai-source-modal-subtitle {
font-size: 0.9rem;
color: var(--color-text-muted);
margin: 0;
}
.ai-source-modal-subtitle[hidden] { display: none; }
.ai-source-modal-body {
margin: 0 0 var(--space-lg);
color: var(--color-text);
font-size: 0.95rem;
line-height: 1.6;
}
.ai-source-modal-body h3,
.ai-source-modal-body h4,
.ai-source-modal-body h5 {
font-family: var(--font-serif, "Merriweather", serif);
margin: 1em 0 0.4em;
line-height: 1.3;
color: var(--color-text);
}
.ai-source-modal-body h3 { font-size: 1.05rem; }
.ai-source-modal-body h4 { font-size: 1rem; }
.ai-source-modal-body h5 { font-size: 0.95rem; }
.ai-source-modal-body p { margin: 0 0 0.8em; }
.ai-source-modal-body p:last-child { margin-bottom: 0; }
.ai-source-modal-body ul,
.ai-source-modal-body ol {
margin: 0 0 0.8em;
padding-left: 1.5em;
}
.ai-source-modal-body li { margin-bottom: 0.3em; }
.ai-source-modal-body .red-letter {
color: var(--color-red-letter, hsl(350deg 80% 50%));
}
.ai-source-modal-body .paragraph-marker {
color: var(--color-text-muted);
margin-right: 4px;
}
.ai-source-loading {
color: var(--color-text-muted);
font-size: 0.9rem;
text-align: center;
padding: var(--space-xl) var(--space-md);
}
.ai-source-empty {
color: var(--color-text-muted);
font-style: italic;
margin: 0;
}
.ai-source-verses {
margin: 0;
padding: 0;
list-style: none;
}
.ai-source-verses li {
display: grid;
grid-template-columns: 28px 1fr;
gap: var(--space-sm);
padding: 6px 0;
border-bottom: 1px solid var(--color-border-soft, var(--color-border));
}
.ai-source-verses li:last-child { border-bottom: 0; }
.ai-source-verse-num {
font-weight: 700;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
text-align: right;
}
.ai-source-verse-text {
color: var(--color-text);
}
.ai-source-compare {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.ai-source-compare-version h4 {
margin: 0 0 6px;
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text);
}
.ai-source-compare-note {
margin: 0 0 6px;
font-size: 0.8rem;
color: var(--color-text-muted);
font-style: italic;
}
.ai-source-refs {
margin: 0;
padding: 0;
list-style: none;
}
.ai-source-refs li {
padding: 8px 0;
border-bottom: 1px solid var(--color-border-soft, var(--color-border));
}
.ai-source-refs li:last-child { border-bottom: 0; }
.ai-source-tag {
display: inline-block;
padding: 2px 8px;
background: var(--color-surface-hover);
border-radius: var(--radius-full, 999px);
font-size: 0.75rem;
color: var(--color-text-muted);
margin-right: 6px;
}
.ai-source-quotes {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.ai-source-quote-meta {
font-size: 0.9rem;
}
.ai-source-quote-year {
color: var(--color-text-muted);
font-weight: normal;
font-size: 0.85rem;
}
.ai-source-quote-text {
margin: 4px 0;
padding: 8px 12px;
border-left: 3px solid var(--color-border-strong, var(--color-border));
background: var(--color-surface-hover);
border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
font-style: italic;
color: var(--color-text);
}
.ai-source-quote-src {
font-size: 0.8rem;
color: var(--color-text-muted);
}
.ai-source-modal-footer {
margin-top: var(--space-md);
padding-top: var(--space-md);
border-top: 1px solid var(--color-border);
text-align: right;
}
.ai-source-modal-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-accent, var(--color-text));
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
}
.ai-source-modal-link:hover { text-decoration: underline; }
.ai-source-modal-link[hidden] { display: none; }
.ai-source-strongs {
margin: 0 0 var(--space-md);
display: grid;
grid-template-columns: max-content 1fr;
gap: 4px var(--space-md);
}
.ai-source-strongs dt {
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted);
align-self: center;
}
.ai-source-strongs dd { margin: 0; align-self: center; }
.ai-source-strongs-lemma {
font-family: var(--font-serif, "Merriweather", serif);
font-size: 1.2rem;
}
.ai-source-strongs-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.ai-source-strongs-list li {
padding: 8px 0;
border-bottom: 1px solid var(--color-border-soft, var(--color-border));
}
.ai-source-strongs-list li:last-child { border-bottom: 0; }
.ai-source-strongs-head { font-size: 0.95rem; }
.ai-source-strongs-gloss {
font-size: 0.85rem;
color: var(--color-text-muted);
margin-top: 2px;
}
.ai-citation-bubble {
appearance: none;
background: color-mix(in srgb, var(--color-text) 4%, var(--color-surface-solid));
border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
border-radius: var(--radius-full, 999px);
padding: 3px 9px;
font-size: 0.78rem;
line-height: 1.3;
color: var(--color-text);
cursor: pointer;
font-family: inherit;
text-decoration: none;
display: inline-block;
transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
a.ai-citation-bubble:hover,
a.ai-citation-bubble:focus-visible,
button.ai-citation-bubble:hover,
button.ai-citation-bubble:focus-visible {
background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface-solid));
border-color: color-mix(in srgb, var(--color-text) 35%, var(--color-border));
outline: none;
}
.ai-citation-bubble.ai-citation-static {
cursor: default;
background: transparent;
border-color: transparent;
padding: 2px 0;
margin-inline-end: var(--space-xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.ai-citation-bubble.ai-citation-static:hover {
background: transparent;
border-color: transparent;
}
.ai-citation-bubble.strongs-word-link {
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
cursor: pointer;
font-variant-numeric: tabular-nums;
}
.ai-citation-bubble.strongs-word-link:hover,
.ai-citation-bubble.strongs-word-link:focus-visible,
.ai-citation-bubble.strongs-word-link.active {
background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface-solid));
border-color: color-mix(in srgb, var(--color-text) 35%, var(--color-border));
border-bottom-color: color-mix(in srgb, var(--color-text) 35%, var(--color-border));
}
.ai-citation-bubble--chapter::after {
content: "\2197\FE0E";
font-variant-emoji: text;
display: inline-block;
margin-inline-start: 0.2em;
font-size: 0.75em;
line-height: 1;
color: var(--color-text-muted);
}
.ai-citation-xlit {
color: var(--color-text);
font-style: italic;
}
.ai-destination {
max-width: 720px;
margin: 0 auto var(--space-xl);
}
.ai-destination-header {
text-align: center;
margin-bottom: var(--space-lg);
}
.ai-destination-title {
font-family: var(--font-serif, "Merriweather", serif);
font-size: clamp(1.9rem, 4vw, 2.7rem);
font-weight: 900;
margin: 0 0 var(--space-sm);
color: var(--color-text);
line-height: 1.1;
letter-spacing: -0.01em;
}
.ai-destination-sub {
color: var(--color-text-muted);
font-size: var(--font-size-base);
line-height: 1.5;
margin: 0 auto;
max-width: 52ch;
}
.ai-destination {
--ai-control-h: 36px;
}
@media (pointer: coarse), (width <= 640px) {
.ai-destination {
--ai-control-h: 44px;
}
}
.ai-destination .ai-destination-input {
display: block;
min-height: 96px;
font-size: var(--font-size-lg);
background: color-mix(in srgb, var(--color-text) 3%, var(--color-surface-solid));
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.ai-destination .ai-destination-input:focus,
.ai-destination .ai-destination-input:focus-visible {
border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
background: var(--color-surface-solid);
}
.ai-destination-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin-top: var(--space-sm);
}
.ai-destination-toolbar-left,
.ai-destination-toolbar-right {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.ai-destination-toolbar-left { flex: 1 1 auto; min-width: 0; }
.ai-destination-toolbar-right { flex: 0 0 auto; margin-inline-start: auto; }
.ai-destination-toolbar [data-ai-account-sources] { flex: 0 1 auto; min-width: 0; }
.ai-destination-toolbar [data-ai-account-sources] .ai-composer-pill-trigger { max-width: 100%; }
.ai-destination-toolbar [data-ai-account-sources] .ai-composer-pill-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ai-composer-pill {
position: relative;
}
.ai-composer-pill-trigger {
list-style: none;
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: var(--ai-control-h);
font-size: var(--font-size-sm);
font-weight: 500;
color: var(--color-text-muted);
background: var(--color-surface-hover);
border: 1px solid var(--color-border);
border-radius: var(--radius-full, 999px);
padding: 0 12px;
transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}
.ai-composer-pill-trigger::-webkit-details-marker { display: none; }
.ai-composer-pill-trigger:hover {
color: var(--color-text);
border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
}
.ai-composer-pill[open] > .ai-composer-pill-trigger {
color: var(--color-text);
border-color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface-hover));
}
.ai-composer-pill-text {
white-space: nowrap;
max-width: 42vw;
overflow: hidden;
text-overflow: ellipsis;
}
.ai-composer-pill-caret {
font-size: 0.66em;
opacity: 0.6;
transition: transform var(--transition-fast);
}
.ai-composer-pill[open] > .ai-composer-pill-trigger .ai-composer-pill-caret {
transform: rotate(180deg);
}
.ai-composer-pop {
position: absolute;
z-index: var(--z-dropdown, 100);
bottom: calc(100% + 8px);
left: 0;
min-width: 248px;
max-width: min(320px, calc(100vw - 2 * var(--space-md)));
padding: var(--space-md);
text-align: start;
background: var(--color-surface-solid);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
backdrop-filter: var(--glass-blur);
}
.ai-composer-pop-help {
margin: 0 0 var(--space-sm);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
line-height: 1.4;
}
.ai-composer-pop-toggle {
display: flex;
align-items: center;
gap: 9px;
min-height: var(--ai-control-h);
padding: 4px;
border-radius: var(--radius-sm, 8px);
font-size: var(--font-size-md);
color: var(--color-text);
cursor: pointer;
}
.ai-composer-pop-toggle:hover { background: var(--color-surface-hover); }
.ai-composer-pop-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
accent-color: var(--color-primary);
}
.ai-composer-pop--lang {
display: flex;
flex-direction: column;
gap: var(--space-sm);
align-items: flex-start;
}
.ai-composer-pop--lang .ai-destination-lang-picker {
width: 100%;
min-height: var(--ai-control-h);
font-size: var(--font-size-md);
padding-block: 7px;
}
.ai-composer-pop-link {
display: inline-flex;
align-items: center;
min-height: var(--ai-control-h);
font-size: var(--font-size-xs);
color: var(--color-primary);
text-decoration: none;
}
.ai-composer-pop-link:hover { text-decoration: underline; }
.ai-destination-random-btn {
appearance: none;
background: transparent;
border: 0;
border-radius: var(--radius-full, 999px);
min-height: var(--ai-control-h);
padding: 0 10px;
font-family: inherit;
font-size: var(--font-size-sm);
font-weight: 600;
color: var(--color-text-muted);
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
transition: color var(--transition-fast);
}
.ai-destination-random-btn:hover,
.ai-destination-random-btn:focus-visible {
color: var(--color-primary);
outline: none;
}
.ai-destination-random-btn[disabled] {
cursor: progress;
opacity: 0.65;
}
.ai-destination-random-btn .fa-shuffle {
font-size: 0.85em;
}
.ai-destination-random-btn[data-ai-random-loading] .fa-shuffle {
animation: ai-destination-shuffle-spin 0.9s linear infinite;
}
@keyframes ai-destination-shuffle-spin {
to { transform: rotate(360deg); }
}
.ai-voice-btn {
appearance: none;
background: transparent;
border: 0;
border-radius: var(--radius-full, 999px);
width: var(--ai-control-h, 34px);
height: var(--ai-control-h, 34px);
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
color: var(--color-text-muted);
cursor: pointer;
transition: color var(--transition-fast), background-color var(--transition-fast);
}
.ai-voice-btn:hover,
.ai-voice-btn:focus-visible {
color: var(--color-primary);
}
.ai-voice-btn[hidden] { display: none; }
.ai-voice-btn[data-listening] {
color: var(--color-danger);
background: color-mix(in srgb, var(--color-danger) 12%, transparent);
animation: ai-voice-pulse 1.4s ease-out infinite;
}
@keyframes ai-voice-pulse {
from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 35%, transparent); }
to   { box-shadow: 0 0 0 9px transparent; }
}
@media (prefers-reduced-motion: reduce) {
.ai-voice-btn[data-listening] { animation: none; }
}
.ai-destination .ai-destination-send {
min-height: var(--ai-control-h);
}
.ai-destination-send[data-ai-sending] {
cursor: progress;
opacity: 0.75;
}
.ai-destination-send[data-ai-sending] .fa-circle-notch {
animation: ai-destination-shuffle-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.ai-destination-send[data-ai-sending] .fa-circle-notch,
.ai-destination-random-btn[data-ai-random-loading] .fa-shuffle {
animation: none;
}
}
.ai-composer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.ai-composer-head .ai-composer-pop {
bottom: auto;
top: calc(100% + 8px);
left: auto;
right: 0;
}
.ai-destination-quota {
margin: 0;
min-width: 0;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
display: flex;
align-items: center;
gap: 6px;
}
.ai-destination-quota[data-ai-quota-low] {
color: var(--color-text);
font-weight: 600;
}
.ai-destination-section-label {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin: 0 0 var(--space-md);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
.ai-destination-chips {
margin: var(--space-xl) 0 0;
text-align: left;
}
.ai-destination-chip-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
@media (width > 560px) {
.ai-destination-chips .ai-destination-chip-list {
grid-template-columns: 1fr 1fr;
}
.ai-destination-chips .ai-destination-chip-list > li:first-child {
grid-column: 1 / -1;
}
}
.ai-destination-chip {
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
height: 100%;
padding: 13px 38px 13px 15px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
font-family: inherit;
line-height: 1.35;
text-align: left;
text-decoration: none;
cursor: pointer;
backdrop-filter: var(--glass-blur);
transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
button.ai-destination-chip {
appearance: none;
}
.ai-destination-chip::after {
content: "\2192";
position: absolute;
right: 14px;
top: 50%;
margin-top: -0.55em;
color: var(--color-text-muted);
opacity: 0.4;
transition: color var(--transition-fast), opacity var(--transition-fast);
}
.ai-destination-chip:hover,
.ai-destination-chip:focus-visible {
border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
background: var(--color-surface-hover);
outline: none;
}
.ai-destination-chip:hover::after,
.ai-destination-chip:focus-visible::after {
opacity: 1;
color: var(--color-primary);
}
.ai-chip-featured {
background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
}
.ai-chip-featured:hover,
.ai-chip-featured:focus-visible {
background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}
.ai-chip-featured .ai-chip-text {
font-size: var(--font-size-base);
}
.ai-chip-tag {
font-size: var(--font-size-2xs);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
}
.ai-chip-text {
font-size: var(--font-size-md);
color: var(--color-text);
}
.ai-chip-capability .ai-chip-tag { order: 0; }
.ai-chip-capability .ai-chip-text { order: 1; }
.ai-chip-recent .ai-chip-text { order: 0; font-weight: 600; }
.ai-chip-recent .ai-chip-tag {
order: 1;
color: var(--color-text-muted);
text-transform: none;
letter-spacing: 0;
font-weight: 500;
font-size: var(--font-size-xs);
}
.ai-destination-recent {
min-width: 0;
margin: var(--space-xl) 0 0;
text-align: left;
}
.ai-destination-recent .ai-destination-chip-list {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.ai-destination-refs {
min-width: 0;
margin: var(--space-sm) 0 0;
padding-top: var(--space-sm);
text-align: left;
}
.ai-destination-refs-hint {
margin: 0;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.ai-destination-refs .ai-destination-section-label {
margin-bottom: var(--space-xs);
}
.ai-destination-refs .ai-destination-chip-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-xs);
}
.ai-chip-ref {
flex-direction: row;
align-items: center;
gap: 7px;
width: auto;
height: auto;
padding: 6px 12px;
border-radius: var(--radius-full);
}
.ai-chip-ref::after { content: none; }
.ai-chip-ref i {
font-size: 0.75em;
color: var(--color-primary);
opacity: 0.75;
}
.ai-chip-ref .ai-chip-text {
font-size: var(--font-size-sm);
font-weight: 600;
}
.ai-destination-footer {
margin: var(--space-xl) 0 0;
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border);
text-align: center;
}
.ai-destination-secondary {
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: 600;
text-decoration: none;
min-height: var(--ai-control-h);
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
font-family: inherit;
}
.ai-destination-secondary:hover {
color: var(--color-primary-hover);
text-decoration: underline;
}
@media (width <= 640px) {
.ai-destination { margin: 0 auto var(--space-lg); }
.ai-destination-header { margin-bottom: var(--space-md); }
.ai-destination-toolbar { flex-wrap: wrap; }
.ai-destination-toolbar-right {
width: 100%;
justify-content: space-between;
}
.ai-composer-pill-text { max-width: 50vw; }
}
.ai-feedback-modal-dialog {
max-width: 520px;
width: min(520px, calc(100vw - 2 * var(--space-md)));
padding: var(--space-lg);
}
.ai-feedback-modal-title {
margin: 0 0 var(--space-xs);
font-size: 1.25rem;
color: var(--color-text);
}
.ai-feedback-modal-sub {
margin: 0 0 var(--space-md);
font-size: 0.9rem;
color: var(--color-text-muted);
}
.ai-feedback-form {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.ai-feedback-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.ai-feedback-label {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ai-feedback-form select,
.ai-feedback-form textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm, 6px);
background: var(--color-surface-solid);
color: var(--color-text);
font-family: inherit;
font-size: 0.95rem;
}
.ai-feedback-form textarea {
resize: vertical;
min-height: 110px;
line-height: 1.5;
}
.ai-feedback-form select:focus,
.ai-feedback-form textarea:focus {
outline: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
outline-offset: 1px;
border-color: var(--color-primary);
}
.ai-feedback-form-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
}
.ai-feedback-btn {
padding: 8px 18px;
border-radius: var(--radius-sm, 6px);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
border: 1px solid var(--color-border);
font-family: inherit;
}
.ai-feedback-btn-secondary {
background: var(--color-surface-solid);
color: var(--color-text-muted);
}
.ai-feedback-btn-secondary:hover {
color: var(--color-text);
border-color: var(--color-text-muted);
}
.ai-feedback-btn-primary {
background: var(--color-primary);
color: var(--color-primary-contrast);
border-color: var(--color-primary);
}
.ai-feedback-btn-primary:hover {
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
}
.ai-feedback-btn-primary:disabled {
opacity: 0.6;
cursor: progress;
}
.ai-feedback-form-error {
margin: 0;
font-size: 0.85rem;
color: #b91c1c;
}
.ai-content[dir="rtl"] .ai-page-title,
.ai-content[dir="rtl"] .ai-page-sub,
.ai-content[dir="rtl"] .ai-message-body,
.ai-content[dir="rtl"] .ai-message-user .ai-message-body,
.ai-content[dir="rtl"] .ai-feedback-cta {
direction: rtl;
text-align: right;
}
.ai-content[dir="rtl"] .ai-message-body h2,
.ai-content[dir="rtl"] .ai-message-body h3 {
text-align: right;
}
.ai-content[dir="rtl"] .ai-message-body ul,
.ai-content[dir="rtl"] .ai-message-body ol {
padding-right: 1.5rem;
padding-left: 0;
}
.ai-content[dir="rtl"] .ai-reply-input {
direction: rtl;
text-align: right;
}
.ai-content[dir="rtl"] .ai-reply-meta {
direction: rtl;
text-align: right;
}
.ai-content[dir="rtl"] a[data-trv-ref] {
unicode-bidi: isolate;
direction: ltr;
}
.ai-content[dir="rtl"] .ai-sources,
.ai-content[dir="rtl"] .ai-tools-list,
.ai-content[dir="rtl"] .ai-citations-list,
.ai-content[dir="rtl"] .ai-followups,
.ai-content[dir="rtl"] .ai-followup-chip,
.ai-content[dir="rtl"] .ai-reply-send,
.ai-content[dir="rtl"] .ai-empty-state,
.ai-content[dir="rtl"] .ai-source-modal-dialog {
direction: ltr;
}
.ai-content[dir="rtl"] .ai-page-title {
flex-direction: row-reverse;
}
.ai-content[dir="rtl"] .ai-destination-moat {
direction: rtl;
text-align: right;
}
.ai-content[dir="rtl"] .ai-destination-moat-summary::before {
transform: rotate(135deg);
margin-right: 0;
margin-left: 6px;
}
.ai-content[dir="rtl"] .ai-destination-moat[open] > .ai-destination-moat-summary::before {
transform: rotate(45deg);
}
.ai-content[dir="rtl"] .ai-destination-moat-body {
padding: 0 18px 0 0;
}
.ai-care-note {
display: flex;
align-items: flex-start;
gap: var(--space-sm);
margin: var(--space-xl) 0 var(--space-sm);
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface-soft);
color: var(--color-text-muted);
font-style: italic;
font-size: 0.95em;
line-height: 1.6;
}
.ai-care-note::before {
content: "\f05a";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-style: normal;
flex-shrink: 0;
margin-top: 0.15em;
color: var(--color-primary);
}
.ai-care-note--acute {
border-color: var(--color-primary);
color: var(--color-text);
}
.ai-header {
position: relative;
}
.ai-share-btn {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
display: inline-flex;
align-items: center;
gap: 6px;
appearance: none;
background: var(--color-surface-solid);
color: var(--color-text);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
padding: 6px 14px;
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ai-share-btn:hover,
.ai-share-btn:focus-visible {
border-color: var(--color-text-muted);
}
@media (width <= 715px) {
.ai-share-btn {
position: static;
align-self: flex-start;
order: 1;
}
}
.ai-header-meta-static {
color: var(--color-text-muted);
}
.ai-shared-banner {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-md);
background: var(--color-surface-soft);
border: 1px solid var(--color-border);
border-radius: var(--radius-md, 8px);
}
.ai-shared-banner > .fas {
color: var(--color-primary);
font-size: 1rem;
}
.ai-shared-banner-text {
flex: 1;
min-width: 0;
}
.ai-shared-banner-title {
margin: 0;
font-weight: 700;
font-size: 0.95rem;
color: var(--color-text);
}
.ai-shared-banner-sub {
margin: 2px 0 0;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.ai-shared-banner-cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: var(--color-text);
color: var(--color-surface-solid);
border-radius: var(--radius-full);
font-weight: 600;
font-size: 0.85rem;
text-decoration: none;
}
.ai-shared-banner-cta:hover,
.ai-shared-banner-cta:focus-visible {
background: color-mix(in srgb, var(--color-text) 88%, transparent);
color: var(--color-surface-solid);
text-decoration: none;
}
@media (width <= 640px) {
.ai-shared-banner {
flex-wrap: wrap;
}
.ai-shared-banner-cta {
width: 100%;
justify-content: center;
}
}
.ai-share-modal-dialog {
max-width: 520px;
width: min(520px, calc(100vw - 2 * var(--space-md)));
padding: var(--space-lg);
}
.ai-share-modal-title {
margin: 0 0 var(--space-xs);
font-size: 1.25rem;
color: var(--color-text);
}
.ai-share-modal-sub {
margin: 0 0 var(--space-md);
font-size: 0.9rem;
color: var(--color-text-muted);
}
.ai-share-linkrow {
display: flex;
gap: var(--space-sm);
}
.ai-share-url {
flex: 1;
min-width: 0;
padding: 10px 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm, 6px);
background: var(--color-surface-soft);
color: var(--color-text);
font-family: inherit;
font-size: 0.85rem;
}
.ai-share-upto {
margin: var(--space-xs) 0 0;
font-size: 0.85rem;
color: var(--color-text-muted);
}
.ai-share-actions {
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
margin-top: var(--space-md);
flex-wrap: wrap;
}
.ai-share-revoke:hover,
.ai-share-revoke:focus-visible {
color: #b91c1c;
border-color: #b91c1c;
}
.ai-share-error {
margin: var(--space-sm) 0 0;
font-size: 0.85rem;
color: #b91c1c;
}
.ai-stopped-note {
margin-top: var(--space-sm);
padding: var(--space-xs) var(--space-sm);
border-inline-start: 3px solid var(--color-border);
background: var(--color-surface-soft);
color: var(--color-text-muted);
font-size: 0.85rem;
border-radius: var(--radius-sm, 4px);
}
.ai-stopped-note .fas {
margin-inline-end: 4px;
}
.ai-turn-pair--stopped .ai-turn-marker-num {
color: var(--color-text-muted);
}