/* Wito ECO Designstandard 1.0. Generated from docs/ecosystem/design-system/design-tokens.json; Wito themes only. */
:root {
  color-scheme: light;
  --brand: #044654;
  --cyan: #5cc2ca;
  --canvas: #f3f7f8;
  --surface: #fff;
  --raised: #fff;
  --subtle: #eaf1f3;
  --soft: #f6f8fa;
  --ink: #182b34;
  --secondary: #536971;
  --muted: #5a6e78;
  --line: #dbe5e8;
  --line-strong: #bdcdd3;
  --action: #044654;
  --on-action: #fff;
  --glass: rgb(255 255 255 / 0.83);
  --glass-line: rgb(255 255 255 / 0.96);
  --shadow: 0 4px 18px rgb(4 42 53 / 0.035), 0 1px 2px rgb(4 42 53 / 0.04);
  --shadow-float: 0 24px 80px rgb(4 42 53 / 0.16), 0 2px 12px rgb(4 42 53 / 0.06);
  --focus: #087488;
  --accent-glow: rgb(92 194 202 / 0.19);
  --violet-bg: #f0eafb;
  --violet-ink: #683ab0;
  --blue-bg: #e7f2fc;
  --blue-ink: #08628f;
  --green-bg: #e4f5ee;
  --green-ink: #11744e;
  --amber-bg: #fff3d9;
  --amber-ink: #815400;
  --pink-bg: #fae9f7;
  --pink-ink: #9e248c;
  --red-bg: #ffebeb;
  --red-ink: #b13535;
  --teal-bg: #e1f0f1;
  --teal-ink: #044654;
  --radius: 20px;
  --sidebar: 232px;
  --font: Geist, system-ui, -apple-system, Arial, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #5cc2ca;
  --cyan: #5cc2ca;
  --canvas: #0b141a;
  --surface: #121f28;
  --raised: #192b35;
  --subtle: #203740;
  --soft: #162831;
  --ink: #edf5f7;
  --secondary: #afc2ca;
  --muted: #9bb1bb;
  --line: #2a414c;
  --line-strong: #3b5663;
  --action: #5cc2ca;
  --on-action: #10262b;
  --glass: rgb(18 31 40 / 0.85);
  --glass-line: rgb(132 188 207 / 0.13);
  --shadow: 0 4px 18px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.08);
  --shadow-float: 0 24px 80px rgb(0 0 0 / 0.4), 0 2px 12px rgb(0 0 0 / 0.15);
  --focus: #76d3db;
  --accent-glow: rgb(92 194 202 / 0.09);
  --violet-bg: #302543;
  --violet-ink: #d0b3fa;
  --blue-bg: #193346;
  --blue-ink: #9ad6f4;
  --green-bg: #16392f;
  --green-ink: #8ddaba;
  --amber-bg: #3c3019;
  --amber-ink: #f1ca82;
  --pink-bg: #3c2540;
  --pink-ink: #edb0e6;
  --red-bg: #42282e;
  --red-ink: #f6aaaa;
  --teal-bg: #1b3941;
  --teal-ink: #8bd3d9;
  --radius: 20px;
  --sidebar: 232px;
  --font: Geist, system-ui, -apple-system, Arial, sans-serif;
}

/* Wito ECO Designstandard 1.0. Host semantic tokens are inherited; one central runtime. */
.wito-assistant { color: var(--ink, inherit); font: 15px/1.6 var(--font, system-ui, sans-serif); display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; inline-size: 100%; container: workspace / inline-size; }
.wito-assistant *, .wito-assistant *::before, .wito-assistant *::after { box-sizing: border-box; }
.wito-assistant :is(button, select, textarea, input), .wa-action a { font: inherit; color: inherit; min-inline-size: 0; max-inline-size: 100%; border: 1px solid var(--line-strong, GrayText); border-radius: 12px; background: var(--surface, Canvas); padding: 10px 14px; }
.wito-assistant :is(button, select), .wa-action a { min-block-size: 44px; overflow-wrap: anywhere; }
.wito-assistant button, .wa-action a { cursor: pointer; min-inline-size: 44px; }
.wito-assistant :is(button, select, textarea, input, summary, a):focus-visible { outline: 3px solid var(--focus, Highlight); outline-offset: 3px; }
.wito-assistant button:disabled { opacity: .6; cursor: not-allowed; }
.wito-assistant button:not(:disabled):hover, .wa-action a:hover { background: var(--subtle, ButtonFace); }
.wa-toolbar, .wa-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wa-toolbar select { flex: 1 1 180px; }
.wa-messages { max-block-size: 55vh; min-block-size: 12rem; overflow: auto; overscroll-behavior: contain; overflow-wrap: anywhere; scrollbar-width: thin; padding: 4px; }
.wa-message { white-space: pre-wrap; margin: 16px 0; padding: 16px 20px; border-radius: 18px; background: var(--soft, Canvas); }
.wa-user { background: var(--teal-bg, ButtonFace); margin-inline-start: 12%; }
.wa-assistant { margin-inline-end: 4%; }
.wa-composer { border: 1px solid var(--line-strong, GrayText); border-radius: 18px; padding: 16px; background: var(--surface, Canvas); }
.wa-composer:focus-within { border-color: var(--focus, Highlight); }
.wito-assistant textarea { display: block; resize: vertical; inline-size: 100%; max-block-size: 30dvh; min-block-size: 72px; border: 0; padding: 0; background: transparent; }
.wa-context { display: flex; align-items: center; gap: 8px; min-block-size: 44px; margin-block: 4px; font-size: 12px; color: var(--secondary, GrayText); }
.wa-context input { flex: none; inline-size: 18px; block-size: 18px; padding: 0; accent-color: var(--action, Highlight); }
.wa-buttons { justify-content: flex-end; }
.wito-assistant button.wa-send { background: var(--action, #044654); border-color: var(--action, #044654); color: var(--on-action, #fff); }
.wito-assistant button.wa-send:not(:disabled):hover { filter: brightness(.94); background: var(--action, #044654); }
.wa-composer p { font-size: 12px; line-height: 1.5; color: var(--secondary, GrayText); margin: 8px 0 0; overflow-wrap: anywhere; }
.wa-action { border: 1px solid var(--line-strong, GrayText); border-radius: 18px; padding: 16px; margin-block: 12px; }
.wa-action a { display: inline-flex; align-items: center; margin: 4px 8px 4px 0; text-decoration: none; }
.wito-assistant details { font-size: 12px; color: var(--secondary, GrayText); }
.wito-assistant summary { padding: 10px 4px; min-block-size: 44px; cursor: pointer; }
.wito-assistant [hidden] { display: none !important; }

/* Workspace reuses the same history, messages, voice and composer as the embedded panel. */
.wa-layout-workspace { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 0; block-size: 100%; min-block-size: 30rem; background: var(--surface, Canvas); }
.wa-layout-workspace[data-navigation-collapsed="true"], .wa-layout-workspace[data-navigation="drawer"] { grid-template-columns: minmax(0, 1fr); }
.wa-history-nav { position: static; margin: 0; padding: 20px 16px; min-inline-size: 0; inline-size: 100%; max-inline-size: none; max-block-size: 100%; border: 0; border-inline-end: 1px solid var(--line, GrayText); color: inherit; background: var(--soft, Canvas); }
.wa-history-nav[open] { display: flex; flex-direction: column; gap: 16px; min-block-size: 0; }
.wa-history-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wa-history-heading h2 { margin: 0; font-size: 16px; font-weight: 600; }
.wa-history-heading button { max-inline-size: 110px; font-size: 12px; padding: 6px 10px; }
.wa-history-nav .wa-toolbar { flex: none; }
.wa-history-nav .wa-toolbar button { inline-size: 100%; text-align: start; font-weight: 550; }
.wito-assistant .wa-history-search { inline-size: 100%; min-block-size: 44px; font-size: 13px; }
.wa-history-list { flex: 1; display: flex; flex-direction: column; gap: 4px; min-block-size: 0; overflow-y: auto; scrollbar-width: thin; padding: 4px; margin: -4px; }
.wa-history-list button { text-align: start; flex: none; inline-size: 100%; background: transparent; border-color: transparent; font-size: 14px; }
.wa-history-list button[aria-current="page"] { background: var(--teal-bg, ButtonFace); border-color: var(--line-strong, GrayText); font-weight: 600; }
.wa-history-empty { font-size: 12px; color: var(--secondary, GrayText); margin: 0; }
.wa-conversation { min-inline-size: 0; min-block-size: 0; display: grid; grid-template-rows: auto minmax(6rem, 1fr) auto auto; padding: 0 clamp(12px, 3cqi, 32px) 16px; }
.wa-conversation-heading { min-inline-size: 0; display: flex; align-items: center; gap: 12px; padding-block: 16px; border-block-end: 1px solid var(--line, GrayText); }
.wa-conversation-heading > div { min-inline-size: 0; overflow-wrap: anywhere; }
.wa-conversation-heading strong { display: block; font-size: 16px; font-weight: 550; }
.wa-conversation-heading small { display: block; font-size: 12px; color: var(--secondary, GrayText); }
.wa-layout-workspace .wa-messages { max-block-size: none; min-block-size: 0; padding: 20px max(4px, calc((100% - 760px) / 2)); }
.wa-conversation > :is(.wa-composer, details) { inline-size: 100%; max-inline-size: 760px; justify-self: center; }
.wa-layout-workspace[data-navigation="drawer"] .wa-history-nav { position: fixed; inset: 12px auto 12px 12px; margin: 0; inline-size: min(320px, calc(100cqi - 24px)); max-inline-size: calc(100vw - 24px); max-block-size: calc(100dvh - 24px); border: 1px solid var(--line, GrayText); border-radius: 20px; box-shadow: var(--shadow-float, none); }
.wa-history-nav::backdrop { background: rgb(0 0 0 / .32); }
@container workspace (max-width: 500px) { .wa-toolbar { align-items: stretch; } .wa-message { margin-inline: 0; padding: 12px 14px; } .wa-composer { padding: 12px; } .wa-buttons button { flex: 1 1 100px; } .wa-conversation-heading { align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .wito-assistant *, .wito-assistant *::before, .wito-assistant *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .wa-history-list button[aria-current="page"] { border: 2px solid Highlight; } .wa-action { border: 1px solid CanvasText; } }

/* Native Chat shell; Wito ECO 1.0 tokens are prepended by the asset build. */
@font-face { font-family: Geist; src: url("./design/geist-latin.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; }
* { box-sizing: border-box; }
:root { background: var(--canvas); color: var(--ink); font-family: var(--font); --chat-header: 76px; }
body { margin: 0; font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; container: eco / inline-size; }
button, select, input, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button, select { min-block-size: 44px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); padding: 10px 14px; }
button { cursor: pointer; min-inline-size: 44px; }
button:disabled { cursor: not-allowed; opacity: .6; }
button:not(:disabled):hover, .account-links a:hover { background: var(--subtle); }
a { color: var(--action); }
:is(a, button, select, textarea, input, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip-link { position: fixed; inset: 8px auto auto 12px; z-index: 50; padding: 12px; background: var(--surface); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.chat-header { position: sticky; inset-block-start: 0; z-index: 20; display: flex; align-items: center; gap: 20px; min-block-size: calc(var(--chat-header) + env(safe-area-inset-top)); padding: calc(10px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 10px max(20px, env(safe-area-inset-left)); background: var(--glass); border-block-end: 1px solid var(--line); backdrop-filter: blur(16px); }
.chat-brand { display: inline-flex; flex: none; align-items: center; gap: 14px; min-block-size: 44px; color: var(--ink); text-decoration: none; }
.chat-brand img { inline-size: 96px; block-size: auto; object-fit: contain; }
.chat-brand strong { font-size: 14px; font-weight: 550; border-inline-start: 1px solid var(--line-strong); padding-inline-start: 14px; }
.chat-search { display: flex; align-items: center; gap: 10px; min-inline-size: 0; margin-inline-end: auto; color: var(--secondary); background: var(--soft); border-color: var(--line); font-size: 13px; }
.chat-search kbd { margin-inline-start: 20px; font: 11px var(--font); color: var(--secondary); white-space: nowrap; }
.chat-icon { display: inline-block; inline-size: 20px; block-size: 20px; flex: none; background: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; }
.icon-search { mask-image: url("./design/search.svg"); }
.icon-account { mask-image: url("./design/ui-user.svg"); }
.icon-close { mask-image: url("./design/ui-close.svg"); }
#wallet { display: inline-flex; min-inline-size: 0; flex: none; margin-inline-start: auto; --wito-wallet-surface: var(--surface); --wito-wallet-field: var(--soft); --wito-wallet-border: var(--line-strong); --wito-wallet-text: var(--ink); --wito-wallet-muted: var(--secondary); }
.account-trigger { display: inline-flex; align-items: center; gap: 8px; text-align: start; background: transparent; border-color: transparent; max-inline-size: 220px; }
.account-trigger > span:last-child { min-inline-size: 0; }
.account-trigger strong, .account-trigger small { display: block; overflow-wrap: anywhere; }
.account-trigger strong { font-size: 13px; font-weight: 550; }
.account-trigger small { font-size: 11px; color: var(--secondary); }
.chat-workspace { min-inline-size: 0; min-block-size: calc(100dvh - var(--chat-header)); display: flex; flex-direction: column; container: workspace / inline-size; }
#companion { min-inline-size: 0; block-size: calc(100dvh - var(--chat-header) - env(safe-area-inset-top)); }
#companion:empty { display: none; }
#welcome { inline-size: min(100%, 720px); margin: auto; padding: 64px 24px; }
#welcome h1 { font-size: clamp(30px, 5cqi, 48px); line-height: 1.2; letter-spacing: -.035em; font-weight: 550; margin: 12px 0 20px; }
#welcome p { max-inline-size: 60ch; color: var(--secondary); }
#welcome .eyebrow { color: var(--action); font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.welcome-login { display: inline-flex; align-items: center; min-block-size: 44px; padding: 12px 18px; border-radius: 12px; background: var(--action); color: var(--on-action); text-decoration: none; margin-block-start: 16px; }
body:has(#logout:not([hidden])) #welcome, body:has(#companion:not([hidden]) > *) #welcome { display: none; }
.chat-notice { color: var(--secondary); padding: 20px 24px; margin: 0; text-align: center; overflow-wrap: anywhere; }
.chat-notice:empty { display: none; }
.account-menu { position: fixed; inset: calc(var(--chat-header) + 8px + env(safe-area-inset-top)) 12px auto auto; margin: 0; padding: 24px; inline-size: min(380px, calc(100cqi - 24px)); max-inline-size: calc(100vw - 24px); max-block-size: calc(100dvh - var(--chat-header) - 32px - env(safe-area-inset-top)); overflow-y: auto; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-float); }
.account-menu::backdrop { background: rgb(0 0 0 / .18); }
.account-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-heading h2 { margin: 0; font-size: 20px; font-weight: 600; }
.account-heading button { display: grid; place-items: center; padding: 10px; }
.account-links { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.account-links a, .account-session a { display: inline-flex; align-items: center; min-block-size: 44px; padding: 10px 12px; border-radius: 12px; }
.account-section { display: block; border-block-start: 1px solid var(--line); padding-block: 16px; font-weight: 550; }
.account-section h3 { margin: 0 0 8px; font-size: 14px; font-weight: 550; }
.account-section p { font-weight: 400; font-size: 12px; color: var(--secondary); overflow-wrap: anywhere; }
.account-section select { display: block; inline-size: 100%; min-inline-size: 0; margin-block-start: 8px; }
#account-organizations { display: flex; flex-direction: column; gap: 8px; margin-block-start: 12px; }
#account-organizations button { text-align: start; white-space: normal; overflow-wrap: anywhere; }
#account-organizations button[aria-pressed="true"] { background: var(--teal-bg); border-color: var(--action); }
#account-context-retry { margin-block-start: 8px; }
#organisation { font-size: 13px; margin-block-start: 12px; }
.account-session { border-block-start: 1px solid var(--line); padding-block-start: 16px; }
.account-session button { inline-size: 100%; white-space: normal; }
.feedback-slot { position: fixed; inset: auto auto max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); z-index: 25; }
@container eco (max-width: 900px) { .chat-search kbd { display: none; } .account-trigger small { display: none; } }
@container eco (max-width: 640px) { .chat-header { gap: 8px; padding-inline: 12px; } .chat-brand { gap: 8px; } .chat-brand strong { padding-inline-start: 8px; } .chat-search { padding: 10px; } .chat-search > span:not(.chat-icon) { position: absolute; inline-size: 1px; block-size: 1px; clip-path: inset(50%); overflow: hidden; } .account-trigger { padding: 10px; } .account-trigger > span:last-child { position: absolute; inline-size: 1px; block-size: 1px; clip-path: inset(50%); overflow: hidden; } }
@media (max-width: 500px) { .chat-header > span:not(#wallet) { display: none; } .chat-header { gap: 4px; padding-inline: 8px; } .chat-brand { gap: 6px; } .chat-brand strong { padding-inline-start: 6px; font-size: 12px; } .account-menu { padding: 16px; } }
@media (prefers-reduced-transparency: reduce) { .chat-header { background: var(--surface); backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .chat-icon { background: ButtonText; } .chat-header, .account-menu { border: 1px solid CanvasText; } }
/* Embedded in the Wito shell: brand and account live in the host bar. */
:root[data-embed] { --chat-header: 56px; }
:root[data-embed] .chat-brand, :root[data-embed] .account-trigger { display: none; }
:root[data-embed] .chat-header { min-block-size: var(--chat-header); padding-block: 8px; }