/* Black/white materials and a single sport-orange accent; stock effect layers stay upstream. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, 'HarmonyOS Sans SC', 'PingFang SC', sans-serif;
  font-synthesis: none;
  font-optical-sizing: auto;
  color: #1c1c1e;
  background: #f5f5f4;
  --viewport-height: 100dvh;
  --safe-top: max(env(safe-area-inset-top, 0px), var(--native-safe-top, 0px));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--native-safe-right, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--native-safe-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--native-safe-left, 0px));
  --ink: #1c1c1e;
  --secondary: #5f5f63;
  --muted: #6e6e72;
  --accent: #cf5018;
  --accent-ink: #9e3d12;
  --action: #f77928;
  --success: #347757;
  --danger: #a93724;
  --zw-hub-accent: var(--accent);
  --edge: rgba(255, 255, 255, .92);
  --line: #dededb;
  --glass: rgba(255, 255, 255, .25);
  --rb-accent: var(--action);
  --rb-accent-fg: var(--ink);
  --shadow: 0 8px 24px -14px #20202026, inset 0 1px 0 #fff;
  --dsw-alias-label-primary: #1c1c1e;
  --dsw-alias-label-secondary: #5f5f63;
  --dsw-alias-label-tertiary: #6e6e72;
  --dsw-alias-label-caption: #69696d;
  --dsw-alias-label-primary-bluish: #cf5018;
  --dsw-alias-border-main: #dfdfdc;
  --dsw-alias-border-l1: #dededb;
  --dsw-alias-border-l2: #e8e8e5;
  --dsw-alias-surface-main: #fff;
  --dsw-alias-surface-secondary: #f2f2f0;
  --dsw-alias-bg-base: #f3f3f1;
  --dsw-alias-bg-layer-2: #f7f7f5;
  --dsw-alias-state-error-primary: #a93724;
  --dsw-static-amber-500: #d86c23;
  --dsw-static-green-500: #347757;
  --dsw-alias-state-business-tertiary: #fff0e5;
}
* { box-sizing: border-box; }
body { margin: 0; }
:root[data-native-keyboard='true'] { --safe-bottom: 0px; }
button, textarea { font: inherit; }
button, textarea, summary, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; border: 0; color: inherit; background: none; touch-action: manipulation; }
button:disabled { cursor: default; }
.connection, .steps-toggle, .history, .latest, .account-panel button, .steps-panel button { min-height: 44px; }
.connection:focus-visible, .steps-toggle:focus-visible, .health-feature:focus-visible, .topic-button:focus-visible, .history:focus-visible, .latest:focus-visible, .account-panel button:focus-visible, .panel-title button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { color: inherit; text-decoration: none; }
svg { flex-shrink: 0; }

.course-recommendations { display: grid; gap: 8px; margin: 12px 0 18px; min-width: 0; }
.course-recommendations > h3 { margin: 0 0 2px; font-size: 14px; font-weight: 650; }
.course-recommendations .course-card, .course-search-list .course-card { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 0; border: 1px solid #e7e7e2; border-radius: 16px; background: #fff; box-shadow: none; min-width: 0; }
.course-cover { display: grid; place-items: center; width: 64px; height: 64px; flex: 0 0 64px; border-radius: 10px; overflow: hidden; background: #f0f2ef; color: #768078; font-size: 22px; }
.course-cover img { width: 100%; height: 100%; object-fit: cover; }
.course-copy { min-width: 0; }
.course-copy h4 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 14px; line-height: 1.5; }
.course-copy p { margin: 4px 0 0; color: var(--secondary); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.course-search-view { min-height: 100%; padding-bottom: max(24px, var(--safe-bottom)); }
.course-search-body { max-width: 820px; margin: 0 auto; padding: 20px max(18px, var(--safe-right)) 24px max(18px, var(--safe-left)); }
.course-search-form { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--line); border-radius: 16px; background: white; color: var(--muted); }
.course-search-form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 14px; padding: 8px 0; outline: none; }
.course-search-form:focus-within { border-color: var(--accent); }
.course-search-form button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 12px; background: var(--accent-ink); color: white; flex-shrink: 0; }
.course-search-form button:disabled { opacity: .45; }
.course-search-form .course-clear { background: transparent; color: var(--muted); padding: 0 4px; }
.course-reset-row { display: flex; justify-content: flex-end; margin-top: 4px; }
.course-reset-row button { min-height: 36px; padding: 4px 2px 4px 12px; border: 0; background: transparent; color: var(--accent-ink); font-size: 12px; }
.course-themes, .course-recent { margin: 24px 0; }
.course-search-view h2 { font-size: 14px; margin: 0 0 12px; }
.course-themes > div, .course-recent > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }
.course-themes button, .course-recent button { background: white; border: 1px solid var(--line); border-radius: 999px; min-height: 40px; padding: 8px 14px; color: var(--secondary); font-size: 13px; max-width: 100%; overflow-wrap: anywhere; }
.course-themes button[aria-pressed=true] { border-color: var(--accent); color: var(--accent-ink); background: #fff3e9; }
.course-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.course-section-heading h2 { margin: 0; overflow-wrap: anywhere; }
.course-section-heading > span { flex-shrink: 0; font-size: 11px; color: var(--muted); }
.course-recent .course-section-heading button { min-height: 32px; border: 0; padding: 0; background: transparent; color: var(--muted); }
.course-search-list { list-style: none; display: grid; gap: 10px; padding: 0; margin: 0; }
.course-search-list li { min-width: 0; }
.course-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 16px; border: 1px solid var(--line); background: white; border-radius: 14px; color: var(--accent-ink); }
.course-empty { text-align: center; padding: 40px 12px; color: var(--muted); }
.course-empty h3 { font-size: 15px; color: var(--ink); margin: 12px 0 8px; }
.course-empty p, .course-note, .course-error { font-size: 12px; line-height: 1.7; }
.course-note { color: var(--muted); }
.course-error { padding: 12px; margin-bottom: 16px; background: #fff0e9; border-radius: 12px; color: var(--danger); }
.course-error button { border: 0; background: transparent; color: var(--accent-ink); text-decoration: underline; padding: 4px 0; }
.course-end { text-align: center; }
.course-search-view button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mobile-shell {
  height: var(--viewport-height); max-width: 780px; margin: auto;
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 12% 0%, #ffffffeb, transparent 60%), linear-gradient(145deg, #fbfbfa, #f3f3f1 55%, #fafaf9);
}
.mobile-panel { display: flex; flex: 1; min-height: 0; min-width: 0; }
.mobile-panel[hidden] { display: none; }
.conversation-view { display: flex; flex: 1; min-height: 0; min-width: 0; flex-direction: column; overflow: hidden; position: relative; }
.drawer-toggle { position: absolute; z-index: 12; top: calc(8px + var(--safe-top)); left: max(14px, var(--safe-left)); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--ink); }
.drawer-toggle:focus-visible, .navigation-drawer button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.navigation-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; visibility: hidden; }
.navigation-layer[data-open='true'] { pointer-events: auto; visibility: visible; }
.navigation-scrim { position: absolute; inset: 0; width: 100%; height: 100%; background: #18181747; opacity: 0; transition: opacity 180ms ease; }
.navigation-layer[data-open='true'] .navigation-scrim { opacity: 1; }
.navigation-drawer { position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; width: min(86vw, 340px); padding: calc(14px + var(--safe-top)) 16px max(18px, var(--safe-bottom)); overflow: hidden; background: #f9f9f7; box-shadow: 18px 0 44px #19191924; transform: translateX(-102%); transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.navigation-layer[data-open='true'] .navigation-drawer { transform: translateX(0); }
.drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px 22px; border-bottom: 1px solid var(--line); }
.drawer-heading > div { display: flex; flex-direction: column; gap: 3px; }
.drawer-heading strong { font-size: 22px; letter-spacing: -.8px; }
.drawer-heading span { color: var(--secondary); font-size: 10px; }
.drawer-heading button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; }
.drawer-history h2 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--secondary); font-size: 11px; font-weight: 600; letter-spacing: .2px; }
.navigation-drawer nav { display: grid; gap: 6px; padding: 9px 0 14px; }
.navigation-drawer nav > button { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 10px 14px; border-radius: 18px; text-align: left; color: var(--secondary); }
.navigation-drawer nav > button[aria-current='page'] { color: var(--accent-ink); background: #ffe9d9; }
.navigation-drawer nav > button > span { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.navigation-drawer nav strong { color: var(--ink); font-size: 14px; }
.navigation-drawer nav small { font-size: 10px; line-height: 1.5; }
.drawer-primary { flex-shrink: 0; padding-top: 16px; }
.navigation-drawer .drawer-primary > button { min-height: 56px; }
.drawer-harness-state { display: grid; gap: 7px; padding: 9px 2px 14px; color: var(--secondary); font-size: 10px; line-height: 1.55; }
.drawer-harness-state p { margin: 0; }
.drawer-harness-state p[role='alert'] { color: var(--danger); }
.drawer-harness-state button { display: inline-flex; width: fit-content; min-height: 40px; align-items: center; gap: 6px; padding: 0 10px; border-radius: 12px; }
.drawer-history { display: flex; flex: 1; min-height: 0; flex-direction: column; padding-top: 14px; border-top: 1px solid var(--line); }
.drawer-history > header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 7px; }
.drawer-history > header > div { display: flex; align-items: center; gap: 2px; }
.drawer-history > header button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--secondary); }
.drawer-history > header button:disabled { opacity: .45; }
.drawer-history-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1px 0 8px; scrollbar-width: thin; scrollbar-color: #b8b8b366 transparent; }
.drawer-history-scroll > button { display: flex; width: 100%; min-height: 58px; flex-direction: column; justify-content: center; gap: 5px; padding: 9px 12px; border-radius: 15px; text-align: left; }
.drawer-history-scroll > button[aria-current='page'] { background: #eeeeea; }
.drawer-history-scroll > button strong { max-width: 100%; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 550; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.drawer-history-scroll > button span { max-width: 100%; overflow: hidden; color: var(--secondary); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.drawer-history-scroll > p { margin: 9px 10px; color: var(--secondary); font-size: 10px; line-height: 1.65; }
.drawer-history-scroll > p[role='alert'] { color: var(--danger); }
.feature-panel { overflow: auto; padding: 0; }
.a2ui-showcase-view { width: 100%; min-width: 0; min-height: 100%; padding-bottom: max(28px, var(--safe-bottom)); }
.a2ui-showcase-view .feature-header { position: sticky; top: 0; z-index: 3; border-bottom: 1px solid #e6e6e2; }
.a2ui-showcase-content { max-width: 720px; margin: auto; padding: 18px max(18px, var(--safe-right)) 0 max(18px, var(--safe-left)); }
.a2ui-readonly-notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid #d8e7de; border-radius: 17px; background: #f2f8f4; color: var(--secondary); font-size: 11px; line-height: 1.65; }
.a2ui-readonly-notice svg { margin-top: 1px; color: var(--success); }
.a2ui-readonly-notice strong { display: block; color: var(--ink); font-size: 12px; }
.zero-a2ui-surface { min-width: 0; }
.zero-a2ui-column { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.zero-a2ui-row { display: flex; min-width: 0; flex-wrap: wrap; gap: 9px; }
.zero-a2ui-card { min-width: 0; padding: 17px; border: 1px solid #ffffffeb; border-radius: 23px; background: linear-gradient(145deg, #ffffffe8, #ffffffa8); box-shadow: 0 10px 22px -18px #2224, inset 0 1px 0 #fff; }
.zero-a2ui-text { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.zero-a2ui-text[data-variant='h1'] { font-size: 24px; line-height: 1.35; letter-spacing: -.5px; }
.zero-a2ui-text[data-variant='h2'] { font-size: 17px; line-height: 1.45; }
.zero-a2ui-text[data-variant='body'] { color: var(--secondary); font-size: 12px; line-height: 1.75; }
.zero-a2ui-text[data-variant='caption'] { color: var(--accent-ink); font-size: 10px; line-height: 1.55; }
.zero-a2ui-row .zero-a2ui-text[data-variant='caption'] { padding: 5px 9px; border-radius: 999px; background: #f0efeb; }
.zero-a2ui-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 0 13px; border-radius: 13px; background: var(--action); }
.zero-a2ui-button:disabled { opacity: .52; filter: saturate(.45); }
.zero-a2ui-button > .zero-a2ui-text { padding: 0; background: transparent; color: var(--ink); }
.zero-a2ui-widget { min-width: 0; padding-top: 4px; }
.a2ui-showcase-view .zw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a2ui-showcase-view .zw-stat { border-color: #ece8e2; background: #fbfaf7; }
.a2ui-showcase-view .zw-stat-value { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
.a2ui-showcase-view .zw-chart { width: 100%; }
.a2ui-showcase-view .zw-table-wrap { max-width: 100%; overflow-x: auto; }
.a2ui-showcase-view .zw-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.a2ui-showcase-view .zw-table th, .a2ui-showcase-view .zw-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.zero-a2ui-notice { display: flex; flex-direction: column; gap: 4px; padding: 13px 14px; border: 1px solid #dce4df; border-radius: 17px; background: #f5f8f6; color: var(--secondary); font-size: 11px; line-height: 1.65; }
.zero-a2ui-notice strong { color: var(--ink); font-size: 12px; }
.zero-a2ui-notice[data-tone='warning'] { border-color: #efd8c4; background: #fff5ec; }
.zero-a2ui-notice[data-tone='error'] { border-color: #e8b8ae; background: #fff7f5; color: var(--danger); }
.zero-a2ui-camera { display: flex; min-width: 0; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-top: 3px; }
.zero-a2ui-camera-trigger { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 0; border-radius: 15px; background: var(--action); color: var(--ink); font: inherit; font-size: 12px; font-weight: 650; box-shadow: inset 0 1px 0 #fff7, 0 8px 18px -14px #1118; }
.zero-a2ui-camera-trigger:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 2px #1112; }
.zero-a2ui-camera-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.zero-a2ui-camera-trigger:disabled { opacity: .5; }
.zero-a2ui-camera-status { color: var(--secondary); font-size: 10px; line-height: 1.5; }
.active-health-view { width: 100%; min-width: 0; min-height: 100%; padding-bottom: max(28px, var(--safe-bottom)); }
.feature-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(9px + var(--safe-top)) max(18px, var(--safe-right)) 11px max(64px, var(--safe-left)); background: #ffffff66; }
.feature-header > div { min-width: 0; }
.feature-header span { display: block; color: var(--accent-ink); font-size: 10px; letter-spacing: .4px; }
.feature-header h1 { margin: 1px 0 0; font-size: 20px; line-height: 1.3; }
.feature-header p { margin: 1px 0 0; color: var(--secondary); font-size: 10px; }
.feature-header > button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--secondary); }
.health-tabs { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px max(14px, var(--safe-right)) 10px max(14px, var(--safe-left)); background: #f7f7f5ee; border-bottom: 1px solid #e6e6e2; }
.health-tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0 8px; border-radius: 15px; color: var(--secondary); font-size: 11px; }
.health-tabs button[aria-current='page'] { color: var(--accent-ink); background: #ffe8d7; }
.health-tabs button:focus-visible, .feature-header button:focus-visible, .health-actions button:focus-visible, .health-primary:focus-visible, .health-dialog button:focus-visible, .health-dialog input:focus-visible, .health-dialog select:focus-visible, .health-dialog textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.health-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px max(18px, var(--safe-right)) 0 max(18px, var(--safe-left)); padding: 11px 14px; border: 1px solid #f1d8c5; border-radius: 16px; background: #fff3e9; color: var(--accent-ink); font-size: 11px; line-height: 1.6; }
.health-notice span { min-width: 0; overflow-wrap: anywhere; }
.health-notice button { min-width: 44px; min-height: 44px; }
.health-content { max-width: 720px; margin: auto; padding: 22px max(18px, var(--safe-right)) 0 max(18px, var(--safe-left)); }
.health-section-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.health-section-title h2 { margin: 0; font-size: 20px; }
.health-section-title p { margin: 5px 0 0; color: var(--secondary); font-size: 11px; line-height: 1.6; }
.health-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 15px; border-radius: 16px; background: var(--action); color: var(--ink); font-size: 12px; white-space: nowrap; }
.health-state { padding: 24px 16px; border: 1px dashed var(--line); border-radius: 18px; color: var(--secondary); font-size: 12px; line-height: 1.7; text-align: center; }
.health-error { color: var(--danger); border-color: #e8b8ae; background: #fff7f5; }
.health-card-list { display: grid; gap: 12px; }
.health-card-list.compact { margin-top: 12px; }
.health-card { min-width: 0; padding: 16px; border: 1px solid #ffffffeb; border-radius: 22px; background: linear-gradient(145deg, #ffffffe8, #ffffffa8); box-shadow: 0 10px 22px -18px #2224, inset 0 1px 0 #fff; }
.health-card.featured { border-color: #f7d9c3; background: linear-gradient(145deg, #fffdfa, #fff1e6c7); }
.health-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.health-card-head strong { min-width: 0; font-size: 14px; line-height: 1.5; }
.health-card-head > span { flex-shrink: 0; padding: 4px 8px; border-radius: 10px; background: #eeeeeb; color: var(--secondary); font-size: 10px; }
.health-card-head > span[data-status='active'] { background: #e4f1e9; color: var(--success); }
.health-card-head > span[data-status='paused'] { background: #ffeadb; color: var(--accent-ink); }
.health-card h3 { margin: 13px 0 7px; font-size: 17px; }
.health-card p { margin: 9px 0; color: var(--secondary); font-size: 12px; line-height: 1.75; overflow-wrap: anywhere; }
.health-card > small, .health-card-head > small { color: var(--secondary); font-size: 10px; }
.health-card details { margin: 10px 0; color: var(--secondary); font-size: 11px; }
.health-card summary, .health-jobs summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.health-card dl { display: grid; gap: 8px; margin: 14px 0; }
.health-card dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; }
.health-card dt { color: var(--secondary); }
.health-card dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.health-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.health-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 1px solid #e0e0dc; border-radius: 14px; background: #ffffffad; color: var(--accent-ink); font-size: 11px; }
.health-actions button:disabled { opacity: .5; }
.health-subheading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 8px; }
.health-subheading h3 { margin: 0; font-size: 15px; }
.health-subheading button { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--accent-ink); font-size: 11px; }
.worker-state { margin: 0 0 10px; color: var(--secondary); font-size: 11px; }
.health-jobs { margin-top: 16px; color: var(--secondary); font-size: 11px; }
.health-jobs p { padding: 8px 0; border-top: 1px solid var(--line); }
.health-dialog-layer { position: absolute; inset: 0; z-index: 30; display: grid; align-items: end; }
.health-dialog-scrim { position: absolute; inset: 0; width: 100%; height: 100%; background: #15151452; }
.health-dialog { position: relative; max-height: calc(var(--viewport-height) - var(--safe-top) - 24px); overflow: auto; padding: 22px max(20px, var(--safe-right)) max(20px, var(--safe-bottom)) max(20px, var(--safe-left)); border-radius: 26px 26px 0 0; background: #fafaf8; box-shadow: 0 -14px 42px #2223; }
.health-dialog h2 { margin: 0 0 18px; font-size: 20px; }
.health-dialog label { display: grid; gap: 8px; margin: 14px 0; color: var(--secondary); font-size: 11px; }
.health-dialog input, .health-dialog select, .health-dialog textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); font: inherit; font-size: 14px; }
.health-dialog textarea { min-height: 112px; resize: vertical; }
.health-dialog > div { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.health-dialog > div button { min-height: 44px; padding: 0 16px; border-radius: 15px; }
.ambient-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient-scene span { position: absolute; display: block; width: 270px; height: 270px; border-radius: 50%; }
.ambient-scene span:first-child { top: 20%; right: -135px; background: radial-gradient(closest-side, #f5a26929, #f5a26914 46%, transparent 100%); }
.ambient-scene span:last-child { top: 46%; left: -150px; background: radial-gradient(closest-side, #ffffffb3, #ffffff59 46%, transparent 100%); }
.app-header { display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-top)) max(18px, var(--safe-right)) 4px max(64px, var(--safe-left)); flex-shrink: 0; }
.brand-symbol { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; color: var(--accent); background: #ffffffb3; border: 1px solid #e8e8e4; }
.brand-copy { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.wordmark { font-size: 22px; font-weight: 700; letter-spacing: -.9px; line-height: 1.1; }
.brand-copy > span:last-child { font-size: 10px; color: var(--secondary); letter-spacing: .4px; }
.connection { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: var(--secondary); white-space: nowrap; padding: 0 8px; }
.connection i { width: 5px; height: 5px; border-radius: 50%; background: #bc6b33; }
.connection[data-connected='true'] i { background: var(--success); }
.app-navigation { display: flex; gap: 4px; flex-shrink: 0; align-self: flex-start; padding: 3px; margin: 8px max(18px, var(--safe-right)) 0 max(18px, var(--safe-left)); border: 1px solid #e8e8e4; border-radius: 17px; background: #ffffff7a; }
.app-navigation button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 88px; min-height: 44px; padding: 0 16px; border-radius: 13px; color: var(--secondary); font-size: 12px; }
.app-navigation button[aria-pressed='true'] { background: #fff; color: var(--accent-ink); box-shadow: 0 2px 8px -5px #20202026; }
.app-navigation button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.conversation-empty { text-align: center; margin: 24px 0; }
.conversation { flex: 1; min-height: 0; overflow: auto; padding: 16px max(22px, var(--safe-right)) 16px max(22px, var(--safe-left)); overscroll-behavior: contain; overflow-anchor: none; scrollbar-width: thin; scrollbar-color: #b8b8b366 transparent; }
.conversation-flow { display: flow-root; }
.conversation-view[data-view='conversation'] .app-header { padding-top: calc(4px + var(--safe-top)); padding-bottom: 4px; }
.conversation-view[data-view='conversation'] .brand-copy > span:last-child { display: none; }
.conversation-view[data-view='conversation'] .conversation { padding-top: 8px; padding-bottom: 12px; }
.welcome { max-width: 600px; margin: auto; }
.welcome-heading { margin: 8px 0 23px; }
.eyebrow { color: var(--secondary); font-size: 10px; letter-spacing: .4px; }
.welcome h1 { margin: 10px 0 9px; font-size: 24px; line-height: 1.45; font-weight: 650; letter-spacing: -.5px; }
.welcome-heading p { margin: 0; color: var(--secondary); font-size: 12px; line-height: 1.8; }
/* Static white edges keep reading layers clear without resampling every card's backdrop. */
.generated { background: linear-gradient(140deg, #ffffffe8, #ffffffb3); border: 1px solid #ffffffeb; box-shadow: 0 10px 20px -16px #27272724, inset 0 1px 0 #ffffff; }
.health-feature { box-shadow: 0 18px 35px -25px #27272728; transition: transform 140ms cubic-bezier(.2,.8,.2,1); }
.health-feature:active { transform: scale(.985); }
.feature-layout { display: flex; align-items: center; gap: 16px; text-align: left; min-height: 104px; }
.feature-copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1; }
.feature-label { display: inline-flex; align-items: center; gap: 5px; color: var(--secondary); font-size: 10px; }
.health-feature strong { font-size: 21px; font-weight: 600; line-height: 1.4; letter-spacing: -.4px; }
.feature-description { font-size: 11px; line-height: 1.6; color: var(--secondary); }
.feature-cta { display: flex; align-items: center; gap: 10px; color: var(--accent-ink); font-size: 11px; margin-top: 7px; }
.energy-mark { flex-shrink: 0; display: grid; place-items: center; width: 64px; height: 64px; color: var(--accent); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0 16px; }
.section-heading h2 { font-size: 13px; font-weight: 600; margin: 0; }
.section-heading > span { color: var(--muted); font-size: 10px; }
.health-topics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.topic-button { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; min-height: 118px; padding: 9px 0; border-radius: 18px; transition: transform 140ms cubic-bezier(.2,.8,.2,1), background-color 140ms ease-out; }
.topic-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 3px; border-radius: 18px; border: 1px solid #ffffffce; background: linear-gradient(145deg, #ffffffde, #ffe7d56b); color: var(--accent-ink); box-shadow: inset 0 1px 0 #ffffffa8, 0 5px 14px -10px #2424242b; }
.topic-button strong { font-size: 12px; font-weight: 550; }
.topic-button small { font-size: 9px; color: var(--secondary); white-space: nowrap; }
.topic-button:active { transform: scale(.96); background: #ffffff59; }
.question-heading { margin-top: 28px; margin-bottom: 12px; }
/* Conversation text and generated content share one continuous reading flow. */
.message { margin: 14px 0 22px; min-width: 0; }
.message-text { font-size: 15px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.assistant .message-text { white-space: normal; }
.speaker { display: block; font-size: 12px; font-weight: 600; color: var(--accent-ink); margin-bottom: 8px; }
.message.user { margin-left: 13%; padding: 12px 16px; background: #fff0e3a6; border: 1px solid #f2e1d3; border-radius: 20px 20px 6px 20px; }
.message.user .speaker { display: none; }
.message-text p { margin: 0 0 12px; }
.message-text h1, .message-text h2, .message-text h3 { line-height: 1.6; margin: 22px 0 10px; font-weight: 650; }
.message-text h1 { font-size: 20px; margin-top: 24px; }
.message-text h2 { font-size: 18px; }
.message-text h3 { font-size: 16px; margin-top: 18px; }
.message-text ul, .message-text ol { padding-left: 22px; }
.message-text li { margin: 7px 0; }
.message-text blockquote { margin: 16px 0; padding: 8px 12px; border-inline-start: 3px solid var(--line); background: #f2f2f0; color: var(--secondary); }
.message-text blockquote > :last-child { margin-bottom: 0; }
.message-text :not(pre) > code { padding: .1em .3em; border: 1px solid var(--line); border-radius: 4px; background: #f2f2f0; font: .9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: break-spaces; overflow-wrap: anywhere; }
.message-text pre { max-width: 100%; overflow: auto; border: 1px solid var(--line); background: #f2f2f0; padding: 13px; border-radius: 13px; font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; white-space: pre; overflow-wrap: normal; }
.message-text pre code { font: inherit; white-space: pre; overflow-wrap: normal; }
.message-text table { display: block; overflow: auto; border-collapse: collapse; font-size: 12px; }
.message-text td, .message-text th { padding: 8px; border: 1px solid var(--line); }
.generated { margin: 18px 0 24px; min-width: 0; border-radius: 26px; }
.generated-content { width: 100%; min-width: 0; }
.generated:focus { outline: 2px solid var(--accent); outline-offset: 4px; }
.conversation-view .generated .zw-card { --zw-accent: var(--accent); padding: 18px 16px; border: 0; box-shadow: none; background: transparent; gap: 15px; min-width: 0; }
.generated .zw-card-title { font-size: 18px; font-weight: 650; white-space: normal; line-height: 1.5; }
.generated .zw-card-subtitle { font-size: 12px; white-space: normal; line-height: 1.7; }
.generated .zw-section { min-width: 0; }
.generated .zw-section-title { font-size: 14px; }
.generated .zw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.conversation-view .generated .zw-stat { padding: 13px 12px; border-radius: 17px; border: 1px solid #ffffff8f; background: #ffffff3d; box-shadow: inset 0 1px 0 #ffffff80, 0 6px 15px -12px #24242420; }
.conversation-view .generated .zw-stat-value { font-size: 26px; line-height: 1.4; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink); background: none; -webkit-text-fill-color: currentColor; overflow-wrap: anywhere; }
.mobile-shell .generated .zw-stat-value-long { font-size: 18px; line-height: 1.6; }
.generated .zw-stat-unit { font-size: 11px; margin-left: 4px; font-weight: 400; color: var(--secondary); }
.generated .zw-stat-label { font-size: 11px; line-height: 1.6; white-space: normal; }
.generated svg { max-width: 100%; }
.generated .zw-chart { width: 100%; height: auto; overflow: visible; }
.generated .zw-gauge svg { width: auto; max-width: 128px; }
.generated .zw-head { flex-wrap: wrap; }
.generated .zw-title { white-space: normal; }
.generated .zw-table-wrap { overflow: auto; }
.generated table { font-size: 12px; }
.zw-dashboard-sections { display: flex; gap: 6px; overflow: auto; padding-bottom: 4px; scrollbar-width: none; }
.zw-dashboard-sections button { flex-shrink: 0; border-radius: 18px; background: #efefec; padding: 0 14px; font-size: 12px; min-height: 44px; }
.zw-dashboard-sections button[aria-pressed='true'] { background: #ffe3ce; color: var(--accent-ink); }
.zw-chart-data { font-size: 12px; margin: 8px 0 12px; color: var(--secondary); }
.zw-chart-data summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.zw-chart-data table { width: 100%; border-collapse: collapse; color: var(--ink); }
.zw-chart-data th, .zw-chart-data td { padding: 8px; text-align: left; border-bottom: 1px solid var(--line); font-weight: 400; }
/* Quiet disclosures keep detailed agent activity attached to the answer. */
.activity-row { color: #6b6b70; font-size: 12px; min-width: 0; margin: 0; }
.activity-row > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; cursor: pointer; list-style: none; border-radius: 6px; }
.activity-row > summary::-webkit-details-marker { display: none; }
.activity-icon { display: grid; width: 16px; flex-shrink: 0; color: #828286; }
.activity-icon svg { grid-area: 1 / 1; }
.activity-chevron { opacity: 0; transition: transform 160ms ease, opacity 160ms ease; }
.activity-row[open] .activity-icon > svg:first-child { opacity: 0; }
.activity-row[open] .activity-chevron { opacity: 1; transform: rotate(90deg); }
.activity-line { display: flex; align-items: baseline; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; line-height: 1.65; }
.activity-title, .activity-separator { flex-shrink: 0; }
.activity-title { color: #5f5f64; font-weight: 500; }
.activity-separator { padding: 0 3px; color: #97979a; }
.activity-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.activity-line code { flex-shrink: 0; max-width: 32%; overflow: hidden; text-overflow: ellipsis; font: 10px ui-monospace, SFMono-Regular, monospace; }
.activity-state { display: inline-flex; align-items: center; flex-shrink: 0; }
.activity-row[data-state='running'] .activity-title, .activity-row[data-state='running'] .activity-state { color: var(--accent-ink); }
.activity-row[data-state='error'] .activity-state, .activity-row[data-state='interrupted'] .activity-state { color: var(--danger); }
.activity-spinner { animation: activity-spin 1.4s linear infinite; }
.activity-body { margin: 1px 0 10px 7px; padding: 7px 0 8px 17px; border-left: 1px solid #d9d9d5; color: #5f5f63; line-height: 1.7; }
.activity-meta { display: flex; gap: 12px; color: #6e6e72; font-size: 10px; font-variant-numeric: tabular-nums; }
.activity-body p { margin: 8px 0; overflow-wrap: anywhere; }
.activity-tool-name { font: 11px ui-monospace, SFMono-Regular, monospace; }
.activity-payload { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid #dededb; font-size: 11px; }
.activity-payload > span { color: #727277; font-size: 10px; }
.activity-payload small { display: block; font-size: 10px; }
.activity-payload pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 190px; overflow: auto; font: 11px/1.7 ui-monospace, SFMono-Regular, monospace; }
.activity-result-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-ink); padding: 0; font-size: 12px; }
.activity-row + .message.assistant { margin-top: 12px; }
.message.user + .activity-row { margin-top: -6px; }
/* Floating composer owns its height, including multiline drafts and voice feedback. */
.composer-area { flex-shrink: 0; padding: 8px max(14px, var(--safe-right)) max(8px, var(--safe-bottom)) max(14px, var(--safe-left)); background: linear-gradient(#f5f5f400, #f5f5f4cc 16px); }
/* ArkWeb can shrink only its visual viewport. Bound drafts by the same height as the shell. */
.conversation-view .composer-area .rb-prompt[data-layout='inline'] textarea { max-height: clamp(44px, calc(var(--viewport-height) - 450px), 144px); }
.voice-mode { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; color: var(--secondary); }
.voice-mode:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.composer-area .dictation { display: flex; align-items: center; gap: 7px; min-width: 0; }
.composer-area .dictation > button { height: 44px; min-height: 44px; min-width: 44px; padding: 0; display: grid; place-items: center; border: 1px solid #ffffffde; background: #f1f1ee7a; border-radius: 50%; color: var(--secondary); box-shadow: inset 0 1px 1px #fff; }
.composer-area .rb-prompt[data-layout='inline'] .dictation > button:first-child { border-color: transparent; background: transparent; box-shadow: none; }
.composer-area .dictation > span { font-size: 11px; color: var(--secondary); line-height: 1.5; min-width: 0; }
.composer-area .dictation[data-activation='toggle'] > button[aria-pressed='true'] { background: #ffeadb; color: var(--accent-ink); }
.composer-area .rb-prompt-tools:has(.dictation[data-active='true']) { border-top: 1px solid #e0e0dd; margin-top: 4px; }
.composer-area .dictation[data-active='true'] > span { flex: 1; overflow-wrap: anywhere; }
.composer-area .dictation[data-active='true'] > button:not(:first-child) { background: none; box-shadow: none; border: 0; }
.composer-area .dictation button.dictation-refresh { width: auto; font-size: 11px; padding-inline: 10px; border-radius: 12px; }
.dictation-wave { color: var(--accent); }
.latest { flex-shrink: 0; align-self: center; display: flex; align-items: center; gap: 7px; min-height: 44px; margin: 0 0 2px; padding: 0 14px; border: 1px solid #fff; border-radius: 22px; background: #ffffffe3; color: var(--accent-ink); font-size: 11px; box-shadow: 0 4px 16px -8px #26262622; }
.working { font-size: 12px; color: var(--secondary); display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.working i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: breathe 1.5s ease-in-out infinite; }
.history { display: block; margin: 0 auto 14px; font-size: 12px; color: var(--secondary); }
.error { color: var(--danger); font-size: 12px; line-height: 1.6; margin: 0 8px 9px; }
.login { display: block; text-align: center; background: var(--action); color: var(--ink); padding: 14px; border-radius: 23px; font-size: 14px; }
/* Parallel panels have clear boundaries and never alter the inline tool timeline. */
.account-panel, .steps-panel { flex-shrink: 0; margin: 6px 18px 0; border-radius: 21px; padding: 10px 16px 14px; background: linear-gradient(140deg, #ffffffd6, #ffffffa6); border: 1px solid #ffffffda; box-shadow: 0 8px 18px -14px #20202022, inset 0 1px 0 #ffffff; }
/* Account actions remain scrollable without pushing the composer out of a short visual viewport. */
.account-panel { max-height: calc(var(--viewport-height) * .2); overflow-y: auto; }
.account-panel p { display: flex; align-items: center; gap: 6px; color: var(--secondary); font-size: 11px; overflow-wrap: anywhere; }
.account-panel > button { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-ink); font-size: 12px; margin-right: 12px; padding: 0 5px; }
.steps-panel { max-height: 43%; overflow: auto; }
.panel-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.panel-title h2 { font-size: 14px; font-weight: 600; margin: 0; }
.panel-title button { display: grid; place-items: center; width: 44px; padding: 0; color: var(--secondary); }
.step { padding: 8px 0; border-top: 1px solid #e1e1de; }
.step summary { display: flex; align-items: center; gap: 8px; font-size: 11px; min-height: 44px; cursor: pointer; list-style: none; }
.step summary strong { flex: 1; font-weight: 500; }
.state-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #a0a09d; flex-shrink: 0; }
.state-dot[data-state='complete'] { background: var(--success); }
.state-dot[data-state='running'] { background: var(--accent); }
.state-dot[data-state='error'] { background: var(--danger); }
.step-meta { font-size: 10px; color: #6b6b70; line-height: 1.9; }
.tool { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 8px 0; font-size: 10px; }
.tool code { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.tool > span:last-child { color: var(--secondary); }
.muted { font-size: 12px; color: var(--secondary); line-height: 1.7; }
@keyframes activity-spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: .35; } }
/* One bounded toolbar blur; the footer and scrolling reading surfaces stay static. */
@supports (backdrop-filter: blur(8px)) {
  .app-header { background: #ffffff59; backdrop-filter: blur(8px); }
}
@media (hover: hover) {
  .history:hover, .activity-result-link:hover { color: #963a13; }
}
@media (min-width: 600px) {
  .app-header { padding-left: max(72px, var(--safe-left)); padding-right: max(34px, var(--safe-right)); }
  .conversation { padding-left: max(42px, var(--safe-left)); padding-right: max(42px, var(--safe-right)); }
  .composer-area { padding-left: max(38px, var(--safe-left)); padding-right: max(38px, var(--safe-right)); }
  .welcome-heading { margin-top: 24px; margin-bottom: 28px; }
  .welcome h1 { font-size: 29px; }
  .feature-layout { min-height: 124px; }
  .health-feature strong { font-size: 22px; }
  .energy-mark { width: 84px; height: 84px; margin-right: 8px; }
  .account-panel, .steps-panel { margin-inline: 34px; }
  .feature-header { padding-left: max(72px, var(--safe-left)); padding-right: max(34px, var(--safe-right)); }
  .health-content { padding-left: max(34px, var(--safe-left)); padding-right: max(34px, var(--safe-right)); }
  .a2ui-showcase-content { padding-left: max(34px, var(--safe-left)); padding-right: max(34px, var(--safe-right)); }
  .health-dialog { width: min(560px, calc(100% - 32px)); margin: auto auto 18px; border-radius: 26px; }
}
@media (max-width: 359px) {
  .app-header { padding-left: max(60px, var(--safe-left)); padding-right: max(16px, var(--safe-right)); gap: 7px; }
  .conversation { padding-left: max(17px, var(--safe-left)); padding-right: max(17px, var(--safe-right)); }
  .welcome h1 { font-size: 22px; }
  .feature-layout { gap: 10px; }
  .energy-mark { width: 58px; height: 58px; }
  .feature-description { font-size: 10px; }
  .health-topics { gap: 5px; }
  .connection { padding-inline: 3px; }
  .health-tabs { gap: 2px; padding-inline: 8px; }
  .health-tabs button { gap: 4px; padding-inline: 3px; font-size: 10px; }
  .health-content { padding-inline: max(14px, var(--safe-left)); }
  .a2ui-showcase-content { padding-inline: max(14px, var(--safe-left)); }
  .health-actions button { padding-inline: 10px; }
}
@media (max-height: 590px) {
  .app-header { padding-top: calc(4px + var(--safe-top)); padding-bottom: 4px; }
  .conversation { padding-top: 12px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .app-header, .brand-symbol, .account-panel, .steps-panel, .message.user, .health-feature, .generated { background: #fdfdfb; backdrop-filter: none; border-color: #d7d7d2; }
  .health-feature .inner-content, .topic-icon { background: #fdfdfb !important; border-color: #81817e !important; }
  .ambient-scene { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .health-feature:active, .topic-button:active { transform: none; }
  .health-feature .border-gradient-top, .health-feature .border-gradient-bottom { display: none; }
  .navigation-scrim, .navigation-drawer { transition: none; }
}

.history-divider { color: var(--muted); font-size: 12px; text-align: center; padding: 20px 0 8px; border-top: 1px solid var(--line); margin-top: 20px; }

.execution-status { flex-shrink: 0; height: 30px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; color: var(--secondary); font-size: 12px; }
.execution-status button { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: var(--accent-ink); min-height: 30px; }

.execution-notices { flex-shrink: 0; padding: 0 20px; }
.execution-notices .error { margin: 0 0 8px; font-size: 12px; }

.voice-feedback { flex-shrink: 0; padding: 0 20px; font-size: 12px; color: var(--secondary); }
.dictation-feedback { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.dictation-feedback .dictation-note, .dictation-feedback .dictation-status { flex: 1; }
.dictation-feedback button { border: 0; background: transparent; color: var(--accent-ink); min-width: 36px; min-height: 36px; }

.mobile-proactive { margin-top: 30px; padding-bottom: 14px; }
.mobile-proactive-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mobile-proactive-kicker { display: flex; gap: 6px; align-items: center; color: var(--secondary); font-size: 12px; }
.mobile-proactive-heading h2 { margin: 5px 0 0; font-size: 23px; line-height: 1.25; letter-spacing: -.4px; }
.mobile-proactive-refresh { min-width: 44px; min-height: 44px; border: 1px solid var(--line); border-radius: 50%; background: #fff9; color: var(--secondary); display: grid; place-items: center; padding: 0; }
.mobile-proactive-refresh:disabled { opacity: .4; }
.mobile-proactive-card { margin-top: 12px; padding: 21px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 4px 18px #2d210505; overflow: hidden; }
.mobile-proactive-card-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.mobile-proactive-badge { display: inline-flex; padding: 5px 8px; border-radius: 6px; background: #fbebe2; color: var(--accent-ink); font-size: 11px; line-height: 1.25; font-weight: 600; }
.mobile-proactive-card[data-preview='true'] .mobile-proactive-badge { background: #f0eeeb; color: var(--secondary); }
.mobile-proactive-card-head time { color: var(--muted); font-size: 11px; }
.mobile-proactive-card h3 { flex-basis: 100%; margin: 1px 0 0; color: var(--ink); font-size: 18px; line-height: 1.5; font-weight: 650; overflow-wrap: anywhere; }
.mobile-proactive-message { margin: 10px 0 16px; color: var(--secondary); font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.mobile-proactive-validity { margin: -8px 0 16px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.mobile-proactive-surface { margin: 14px -7px; }
.mobile-proactive-surface .zw-card { margin: 0; padding: 14px; border-radius: 16px; background: #faf8f5; border-color: #eee8e1; box-shadow: none; }
.mobile-proactive-surface .zw-generated-card-title { font-size: 16px; }
.mobile-proactive-evidence { padding: 12px 0 0; border-top: 1px solid #eeece9; font-size: 12px; line-height: 1.65; color: var(--secondary); }
.mobile-proactive-evidence summary { min-height: 44px; padding-top: 9px; box-sizing: border-box; cursor: pointer; }
.mobile-proactive-evidence p { margin: 8px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.mobile-proactive-evidence ul { list-style: none; margin: 10px 0; padding: 0; }
.mobile-proactive-evidence li { display: flex; gap: 10px; margin: 5px 0; }
.mobile-proactive-evidence li span:first-child { flex-shrink: 0; color: var(--ink); }
.mobile-proactive-evidence li span:last-child { overflow-wrap: anywhere; }
.mobile-proactive-discuss { display: flex; gap: 6px; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: 15px; border: 1px solid #ecd8cb; border-radius: 12px; background: #fff8f2; color: var(--accent-ink); font-size: 13px; font-weight: 600; }
.mobile-proactive-empty { padding: 23px 20px; border: 1px solid var(--line); border-radius: 24px; background: #fff8; text-align: center; }
.mobile-proactive-empty h3 { margin: 0; color: var(--ink); font-size: 16px; }
.mobile-proactive-empty p { max-width: 310px; margin: 8px auto 0; font-size: 13px; line-height: 1.7; color: var(--secondary); }
.mobile-proactive-empty-actions { display: flex; justify-content: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.mobile-proactive-empty-actions button { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 2px 5px; border: 0; background: none; color: var(--accent-ink); font-size: 12px; }
.mobile-proactive-note { margin: 10px 0; font-size: 12px; line-height: 1.65; color: var(--secondary); overflow-wrap: anywhere; }
.mobile-proactive button:focus-visible, .mobile-proactive summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 360px) { .mobile-proactive-card { padding: 17px; } }