/* Echo: white surfaces, straight edges, and a restrained application UI.
   Component layout lives in style.css; workspace colors in workspace-theme.css. */
:root {
  color-scheme: light;
  --echo-bg: #ffffff;
  --echo-surface: #ffffff;
  --echo-raised: #f6f7f9;
  --echo-hover: #eceff3;
  --echo-line: #d8dde5;
  --echo-control-line: #8b95a4;
  --echo-text: #18212f;
  --echo-muted: #4d596b;
  --echo-subtle: #606c7e;
  --echo-blue: #2057b7;
  --echo-blue-hover: #174691;
  --echo-link: #174b9c;
  --echo-selected: #edf3fc;
  --echo-incoming: #f0f2f5;
  --bg: var(--echo-bg);
  --surface: var(--echo-surface);
  --surface-2: var(--echo-raised);
  --surface-3: var(--echo-hover);
  --line: var(--echo-line);
  --text: var(--echo-text);
  --muted: var(--echo-muted);
  --subtle: var(--echo-subtle);
  --accent-color: var(--echo-link);
  --accent-bright: var(--echo-link);
  --accent-dark: var(--echo-blue);
  --action: var(--echo-blue);
  --bubble-in: var(--echo-incoming);
  --bubble-out: var(--echo-blue);
  --success: #206440;
  --danger: #a32132;
  --radius: 0;
}

/* Straight edges are intentional throughout, including on small screens. */
*, *::before, *::after { border-radius: 0 !important; box-shadow: none !important; }
body { background: var(--bg); color: var(--text); }
h1, h2, h3 { letter-spacing: -.025em; }
.brand { color: var(--text); font-weight: 700; letter-spacing: -.045em; }
.brand-mark, .studio-brand-icon, .orbital, .hero-art::before,
.avatar-spark, .tiny-star, .spark-mini, .empty-orbit, .rail-note { display: none !important; }
.brand-dot, .accent { color: var(--echo-link); }
.eyebrow { color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .07em; }
.fine-print, .muted { color: var(--muted); }
.button { font-size: 13px; font-weight: 600; gap: 12px; }
.button:hover { transform: none; }
.button.primary { background: var(--action); border-color: var(--action); color: #fff; }
.button.primary:hover { background: var(--echo-blue-hover); border-color: var(--echo-blue-hover); }
.button.subtle, .support-amounts .button {
  background: var(--surface); border-color: var(--echo-control-line); color: var(--text);
}
.button.subtle:hover { background: var(--surface-2); }
.button.danger-quiet { background: #fff; border-color: #be6670; color: var(--danger); }
.button.danger-quiet:hover { background: #fff2f3; }
input, select, textarea { background: #fff; border-color: var(--echo-control-line); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--subtle); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--echo-blue); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--echo-blue); outline-offset: 3px;
}
input[type=checkbox], progress { accent-color: var(--action); }
.checkbox-label a, .fine-print a, .prose a, .auth-links a { color: var(--echo-link); }
.stack-form > label, .form-grid > label, .calculator-grid > label { color: var(--text); font-size: 12px; }
.skip-link { background: var(--text); color: #fff; }
.demo-banner { background: var(--surface-2); color: var(--muted); border-bottom: 1px solid var(--line); }
.pill, .pill.lavender, .pill.neutral {
  background: var(--surface-2); border-color: var(--line); color: var(--muted); letter-spacing: .035em;
}
.status-dot { background: var(--echo-blue); }
.card, .auth-card, .demo-chat, .feature-grid article, .plan-card, .support-card {
  background: #fff; border-color: var(--line);
}
.toast, .small-dialog { background: #fff; border-color: var(--echo-control-line); color: var(--text); }
.alert, .inline-alert { background: #fff2f3; border-color: #d99aa3; color: #8d1e2b; }
.avatar, .avatar-maya, .user-avatar { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.icon-button { background: #fff; border-color: var(--echo-control-line); color: var(--muted); }
.icon-button:hover { background: var(--surface-2); color: var(--text); }

/* Public pages: aligned content, ordinary type sizes, no ornamental framing. */
.site-header { height: 80px; border-bottom: 1px solid var(--line); }
.site-header nav > a:not(.button) { color: var(--muted); font-size: 13px; }
.hero { min-height: 570px; gap: 64px; padding: 64px 0; }
.hero h1 { font-size: 56px; letter-spacing: -.04em; line-height: 1.12; font-weight: 650; }
.hero h1 span, .auth-aside h1 span { color: var(--text); }
.hero-description { font-size: 15px; line-height: 1.8; max-width: 440px; }
.hero .eyebrow { margin-bottom: 22px; }
.hero .fine-print { font-size: 11px; }
.hero-actions { gap: 24px; margin: 28px 0 16px; }
.hero-tags { color: var(--muted); font-size: 11px; margin-top: 28px; gap: 16px; }
.hero-art { padding: 0; }
.demo-chat { transform: none; padding: 24px; max-width: 430px; }
.demo-chat-label { color: var(--subtle); font-size: 9px; letter-spacing: .04em; margin: 20px 0; }
.demo-chat-head .small { color: var(--muted); font-size: 11px; }
.preview-bubble { font-size: 13px; line-height: 1.65; }
.preview-bubble.user { background: var(--action); color: #fff; }
.preview-bubble.assistant { background: var(--bubble-in); color: var(--text); }
.demo-composer { background: #fff; border-color: var(--echo-control-line); color: var(--subtle); font-size: 11px; }
.send-preview { background: var(--action); color: #fff; }
.art-caption { display: none; }
.section-intro { text-align: left; max-width: none; margin: 0 0 28px; }
.section-intro h2 { font-size: 28px; letter-spacing: -.025em; }
.section-intro > p { font-size: 14px; }
.feature-section, .plans-section { padding: 48px 0; }
.feature-grid { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-grid article { border: 0; border-right: 1px solid var(--line); padding: 26px; }
.feature-grid article:first-child { padding-left: 0; }
.feature-grid article:last-child { border-right: 0; }
.feature-grid .feature-icon, .honest-note > .feature-icon { display: none; }
.feature-number { color: var(--subtle); float: none; display: block; margin-bottom: 16px; font-size: 11px; }
.feature-grid h3 { font-size: 17px; }
.feature-grid p, .plan-card p { color: var(--muted); font-size: 13px; line-height: 1.75; }
.plan-grid { max-width: none; margin: 0; }
.plan-card { padding: 26px; }
.honest-note { padding: 30px 0; }
.honest-note .text-link { color: var(--echo-link); font-size: 12px; }
.honest-note h3 { font-size: 15px; }
.honest-note p { font-size: 12px; }
.site-footer { color: var(--muted); padding-top: 24px; padding-bottom: 24px; }
.site-footer > span, .site-footer nav { font-size: 11px; }
.auth-aside h1 { font-size: 46px; letter-spacing: -.035em; }
.auth-aside > p, .auth-character p { color: var(--muted); }
.auth-card { padding: 32px; }
.auth-links { font-size: 12px; }
.auth-fine { color: var(--subtle); font-size: 11px; }

/* Customer application. Keep the existing chat and album interactions. */
body[data-page="chat"] .messenger {
  --conversation-bg: #fff; --conversation-surface: var(--surface-2);
  --conversation-border: var(--line); --bubble-in: var(--echo-incoming); --bubble-out: var(--action);
}
body[data-page="chat"] .app-rail { background: var(--surface-2); border-color: var(--line); }
body[data-page="chat"] .conversation-panel, body[data-page="chat"] .conversation-header,
body[data-page="chat"] .conversation-tabs, body[data-page="chat"] .composer-zone,
body[data-page="chat"] .album-panel, body[data-page="chat"] .mobile-tabs { background: #fff; border-color: var(--line); }
body[data-page="chat"] .conversation-header { border-bottom: 1px solid var(--line); }
body[data-page="chat"] .header-character h1 { color: var(--text); font-size: 20px; }
body[data-page="chat"] .header-character p, body[data-page="chat"] .character-choice small,
body[data-page="chat"] .rail-label, body[data-page="chat"] .nav-item,
body[data-page="chat"] .nav-icon, body[data-page="chat"] .nav-item > span:first-child,
body[data-page="chat"] .profile-link small { color: var(--muted); }
body[data-page="chat"] .character-choice, body[data-page="chat"] .header-character .avatar,
body[data-page="chat"] .messages .message-avatar,
body[data-page="chat"] .header-actions .icon-button, body[data-page="chat"] .attachment-button {
  background: #fff; border-color: var(--echo-control-line); color: var(--text);
}
body[data-page="chat"] .character-choice { border-color: var(--line); }
body[data-page="chat"] .nav-item.selected, body[data-page="chat"] .nav-item:hover {
  background: var(--echo-selected); color: var(--echo-link);
}
body[data-page="chat"] .nav-item.selected > .nav-icon { color: var(--echo-link); }
body[data-page="chat"] .conversation-tabs { gap: 0; padding-top: 8px; padding-bottom: 0; border-bottom: 1px solid var(--line); }
body[data-page="chat"] .conversation-tabs button {
  border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted);
  max-width: 120px; padding: 11px 20px; min-height: 43px; font-size: 13px;
}
body[data-page="chat"] .conversation-tabs button.selected {
  background: transparent; border-color: var(--echo-blue); color: var(--echo-link);
}
body[data-page="chat"] .conversation-tabs button.selected:after { display: none; }
body[data-page="chat"] .message-bubble { background: var(--bubble-in); color: var(--text); }
body[data-page="chat"] .message-row.user .message-bubble { background: var(--bubble-out); color: #fff; }
body[data-page="chat"] .message-bubble::before, body[data-page="chat"] .message-bubble::after { display: none; }
body[data-page="chat"] .message-meta, body[data-page="chat"] .message-footer,
body[data-page="chat"] .message-bubble > .message-meta { color: var(--subtle); }
body[data-page="chat"] .message-row.user .message-bubble > .message-meta,
body[data-page="chat"] .message-row.user .message-receipt { color: #e6eeff; }
body[data-page="chat"] .message-retry { color: var(--echo-link); }
body[data-page="chat"] .generation-state { color: var(--muted); }
body[data-page="chat"] .generation-dots { background: var(--surface-2); }
body[data-page="chat"] .generation-dots i { background: var(--subtle); }
body[data-page="chat"] .composer-field { background: #fff; border-color: var(--echo-control-line); }
body[data-page="chat"] .composer-field:focus-within { outline: 2px solid var(--echo-blue); outline-offset: 2px; }
body[data-page="chat"] .composer textarea { background: transparent; border: 0; color: var(--text); }
body[data-page="chat"] .composer textarea::placeholder { color: var(--subtle); }
body[data-page="chat"] .send-button { background: var(--action); color: #fff; }
body[data-page="chat"] .send-button:hover { background: var(--echo-blue-hover); }
body[data-page="chat"] .upload-state { color: var(--echo-link); }
body[data-page="chat"] .panel-intro, body[data-page="chat"] .album-privacy { color: var(--muted); }
body[data-page="chat"] .filter-tabs { background: var(--surface-2); border-color: var(--line); }
body[data-page="chat"] .filter-tabs button { color: var(--muted); }
body[data-page="chat"] .filter-tabs button.active { background: #fff; color: var(--echo-link); }
body[data-page="chat"] .media-card { background: #fff; border-color: var(--line); }
body[data-page="chat"] .media-card-title { color: var(--text); }
body[data-page="chat"] .media-scope { color: var(--muted); }
body[data-page="chat"] .mobile-tabs button, body[data-page="chat"] .mobile-tabs a { color: var(--muted); }
body[data-page="chat"] .mobile-tabs button.selected { background: var(--echo-selected); color: var(--echo-link); }
body[data-page="chat"] .mobile-tabs button.selected > span:first-child { background: transparent; color: var(--echo-link); }
body[data-page="chat"] .album-view-tabs { background: transparent; margin-bottom: 20px; padding-top: 0; }
.empty-state h2 { color: var(--text); }
.empty-state p { color: var(--muted); }
.suggestion-button { background: #fff; border-color: var(--echo-control-line); color: var(--echo-link); }
.count, .mobile-unread-count { background: var(--action); color: #fff; }
.rail-label { letter-spacing: .07em; }
.media-viewer { background: #fff; border-color: var(--line); color: var(--text); }
.media-viewer::backdrop, .small-dialog::backdrop { background: #18212f66; backdrop-filter: none; }
.media-viewer p { color: var(--muted); }
.favorite-button, .favorite-button.saved { background: #fff; color: var(--echo-link); border: 1px solid var(--line); }
.utility-panel { background: #fff; }

/* Account, legal, installation and secondary controls. */
.account-nav, .usage-summary, .calculator-result { color: var(--muted); }
.record-row strong, .inbox-choice strong { color: var(--text); }
.switch-label strong { color: var(--text); }
.switch-label input { background: #8993a3; }
.switch-label input::before { background: #fff; }
.switch-label input:checked { background: var(--action); }
.switch-label input:checked::before { background: #fff; }
.mfa-secret, .drop-zone, .drop-zone.dragover, .suggestion-record {
  background: var(--surface-2); border-color: var(--echo-control-line); color: var(--text);
}
.suggestion-record p { color: var(--muted); }
.install-app-icon { background: var(--surface-2); border-color: var(--line); color: var(--echo-link); }
.install-intro h1 { font-size: 38px; letter-spacing: -.035em; }
.install-intro > p, .install-instructions ol { color: var(--muted); }
.install-status, .install-instructions strong { color: var(--text); }
.install-instructions .fine-print { color: var(--muted); }
.share-symbol { border-color: var(--subtle); }

@media (max-width: 700px) {
  .site-header { height: 72px; }
  .hero { padding: 38px 0; gap: 32px; min-height: 0; }
  .hero h1 { font-size: 40px; line-height: 1.15; }
  .hero-description { font-size: 14px; }
  .hero-tags { font-size: 10px; gap: 10px; flex-wrap: wrap; }
  .demo-chat { padding: 20px; }
  .section-intro h2 { font-size: 25px; }
  .feature-grid article, .feature-grid article:first-child {
    padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--line);
  }
  .feature-grid article:last-child { border-bottom: 0; }
  .feature-section, .plans-section { padding: 36px 0; }
  .auth-card { padding: 24px; }
  .install-intro h1 { font-size: 31px; }
  body[data-page="chat"] .conversation-tabs button { max-width: none; }
}