:root {
  color-scheme: light;
  --ink: #172529;
  --ink-soft: #344448;
  --muted: #849296;
  --line: #e3eaec;
  --paper: #fbfcfc;
  --panel: #ffffff;
  --soft: #eef7f8;
  --blue: #6fd0f2;
  --blue-strong: #22aedd;
  --mint: #66c9a7;
  --danger: #e66b5e;
  --shadow: 0 18px 55px rgba(25, 48, 54, .12);
  --dur-instant: 120ms;
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 480ms;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-bounce: cubic-bezier(.3, 1.7, .5, 1);
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --filing-bar-height: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: #edf2f3; color: var(--ink); }
body { min-height: 100vh; min-height: 100dvh; }
button, textarea, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(34, 174, 221, .28);
  outline-offset: 2px;
}

.auth-gate {
  position: fixed;
  z-index: 300;
  inset: 0;
  display: grid;
  overflow-y: auto;
  place-items: center;
  padding: max(28px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 15%, rgba(118, 216, 240, .18), transparent 34%),
    #f4f8f8;
}
.auth-card { width: min(100%, 430px); padding: 34px; border: 1px solid #dfe8ea; border-radius: 25px; background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(28,52,58,.12); }
.auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }
.auth-brand .welcome-mark { width: 50px; height: 50px; margin: 0; border-radius: 14px; font-size: 21px; }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font-family: Georgia, "Songti SC", serif; font-size: 22px; font-weight: 500; }
.auth-brand small { margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.auth-loading { display: grid; min-height: 260px; place-content: center; justify-items: center; }
.auth-loading p { margin: 17px 0 0; color: var(--muted); font-size: 12px; }
.auth-panel h1 { margin: 7px 0 7px; font-family: Georgia, "Songti SC", serif; font-size: 31px; font-weight: 500; }
.auth-panel > p { margin: 0 0 25px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.auth-form { display: grid; gap: 16px; }
.auth-form label, .invite-result label { display: grid; gap: 7px; }
.auth-form label > span, .invite-result label > span { color: #627276; font-size: 11px; }
.auth-form input, .invite-result input { width: 100%; height: 49px; padding: 0 14px; border: 1px solid #dce5e7; border-radius: 13px; background: #fbfcfc; font-size: 16px; }
.auth-form input:focus, .invite-result input:focus { border-color: #8bd8ef; background: white; }
.auth-submit { width: 100%; min-height: 49px; border: 0; border-radius: 13px; background: var(--ink); color: white; font-size: 13px; font-weight: 650; }
.auth-submit:hover { background: #263a3f; }
.auth-submit:disabled { opacity: .5; cursor: wait; }
.auth-switch { display: block; margin: 22px auto 0; border: 0; background: transparent; color: #168db5; font-size: 12px; }
.auth-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff1ef; color: #a24940; font-size: 11px; line-height: 1.5; }
.auth-notice { margin: 0; padding: 10px 12px; border-radius: 10px; background: #eaf8f3; color: #32806b; font-size: 11px; line-height: 1.5; }
.auth-switch + .auth-switch { margin-top: 9px; }
.auth-foot { position: fixed; bottom: calc(var(--filing-bar-height) + max(12px, env(safe-area-inset-bottom))); color: #9aa7aa; font-size: 9px; }

.onboarding-gate {
  position: fixed;
  z-index: 290;
  inset: 0;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  background:
    radial-gradient(circle at 12% 10%, rgba(111, 208, 242, .16), transparent 28%),
    radial-gradient(circle at 88% 86%, rgba(102, 201, 167, .1), transparent 27%),
    #f5f9f9;
}
.onboarding-topbar { display: flex; width: min(100%, 1120px); min-height: calc(76px + env(safe-area-inset-top)); align-items: center; justify-content: space-between; margin: 0 auto; padding: env(safe-area-inset-top) 24px 0; }
.onboarding-brand { display: flex; align-items: center; gap: 11px; }
.onboarding-brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #91def6, #d9f4f4); font-family: Georgia, "Songti SC", serif; font-size: 16px; box-shadow: 0 8px 24px rgba(34,174,221,.13); }
.onboarding-brand strong, .onboarding-brand small { display: block; }
.onboarding-brand strong { font-family: Georgia, "Songti SC", serif; font-size: 17px; font-weight: 500; }
.onboarding-brand small { margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .04em; }
.onboarding-account { display: flex; align-items: center; gap: 13px; color: #657578; font-size: 11px; }
.onboarding-account > span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-account button { min-height: 34px; padding: 0 12px; border: 1px solid #dce5e7; border-radius: 10px; background: rgba(255,255,255,.7); color: #718084; font-size: 10px; }
.onboarding-account button:hover { border-color: #c4dde4; background: white; color: var(--ink); }
.onboarding-main { display: grid; width: min(100% - 32px, 680px); flex: 1; place-items: center; margin: 20px auto 28px; }
.onboarding-main > section { width: 100%; }
.onboarding-loading { display: grid; min-height: 420px; place-content: center; justify-items: center; }
.onboarding-loading p { margin: 18px 0 0; color: var(--muted); font-size: 12px; }
.onboarding-intro, .onboarding-flow, .onboarding-processing { padding: clamp(30px, 5vw, 52px); border: 1px solid #dfe8ea; border-radius: 28px; background: rgba(255,255,255,.96); box-shadow: 0 24px 75px rgba(28,52,58,.11); }
.onboarding-intro { text-align: center; }
.onboarding-hero-mark { display: grid; width: 66px; height: 66px; place-items: center; margin: 0 auto 25px; border-radius: 20px; background: linear-gradient(145deg, #8fddf5, #dff6f5); color: #173337; font-family: Georgia, "Songti SC", serif; font-size: 27px; box-shadow: 0 14px 37px rgba(34,174,221,.17); }
.onboarding-gate .eyebrow { color: #168fb7; font-size: 10px; font-weight: 700; letter-spacing: .13em; }
.onboarding-intro h1, .onboarding-step-heading h1, .onboarding-processing h1 { margin: 9px 0 10px; font-family: Georgia, "Songti SC", serif; font-weight: 500; line-height: 1.25; }
.onboarding-intro h1 { font-size: clamp(30px, 6vw, 39px); }
.onboarding-intro > p { max-width: 510px; margin: 0 auto; color: #6f7f82; font-size: 13px; line-height: 1.85; }
.onboarding-promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 30px 0 27px; text-align: left; }
.onboarding-promises div { min-height: 112px; padding: 15px; border: 1px solid #e3ebed; border-radius: 15px; background: #f9fbfb; }
.onboarding-promises i, .onboarding-promises strong, .onboarding-promises span { display: block; }
.onboarding-promises i { margin-bottom: 12px; color: #35afd6; font-family: Georgia, serif; font-size: 11px; font-style: normal; }
.onboarding-promises strong { margin-bottom: 6px; font-size: 11px; }
.onboarding-promises span { color: #8a9799; font-size: 9px; line-height: 1.55; }
.onboarding-primary, .onboarding-back { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; border-radius: 13px; font-size: 12px; font-weight: 650; }
.onboarding-primary { padding: 0 21px; border: 0; background: var(--ink); color: white; }
.onboarding-primary:hover { background: #273b40; }
.onboarding-primary:disabled, .onboarding-back:disabled { opacity: .47; cursor: wait; }
.onboarding-primary svg, .onboarding-back svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.onboarding-start { min-width: 190px; }
.onboarding-intro > small { display: block; margin-top: 14px; color: #9ba7a9; font-size: 9px; }
.onboarding-progress-copy { display: flex; justify-content: space-between; margin-bottom: 9px; color: #879497; font-size: 9px; }
.onboarding-progress { height: 4px; overflow: hidden; border-radius: 999px; background: #e9eff0; }
.onboarding-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #79d6f2, #65caaa); transition: width .28s ease; }
.onboarding-step-heading { margin: 34px 0 25px; }
.onboarding-step-heading h1 { font-size: clamp(27px, 5vw, 34px); }
.onboarding-step-heading p { margin: 0; color: #7d8b8e; font-size: 12px; line-height: 1.7; }
.onboarding-form { display: grid; gap: 24px; }
.onboarding-questions { display: grid; gap: 18px; }
.onboarding-question { display: grid; gap: 10px; padding: 18px; border: 1px solid #e1e9eb; border-radius: 17px; background: #fbfcfc; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.onboarding-question:focus-within { border-color: #acddec; background: white; box-shadow: 0 0 0 4px rgba(34,174,221,.06); }
.onboarding-question.has-error { border-color: #e9a29a; background: #fffafa; }
.onboarding-question.is-skipped { border-style: dashed; background: #f5f8f8; }
.onboarding-question-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.onboarding-question-title strong { display: block; font-size: 13px; line-height: 1.5; }
.onboarding-question-title p { margin: 5px 0 0; color: #899699; font-size: 10px; line-height: 1.6; }
.onboarding-required { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: #e9f7fb; color: #2186a7; font-size: 8px; }
.onboarding-skip { flex: 0 0 auto; padding: 4px 2px; border: 0; border-bottom: 1px solid #b9c4c6; background: transparent; color: #7f8d90; font-size: 9px; }
.onboarding-skip:hover { color: #258bad; }
.onboarding-question textarea { width: 100%; min-height: 86px; resize: vertical; padding: 12px 13px; border: 1px solid #dce5e7; border-radius: 12px; outline: 0; background: white; font-size: 16px; line-height: 1.6; }
.onboarding-question textarea::placeholder { color: #a1abad; }
.onboarding-question textarea:focus { border-color: #86d3ea; }
.onboarding-question textarea:disabled { resize: none; border-color: transparent; background: transparent; color: #8d999b; }
.onboarding-skip-copy { margin: 8px 0; color: #829093; font-size: 11px; text-align: center; }
.onboarding-suggestions { display: flex; flex-wrap: wrap; gap: 7px; }
.onboarding-suggestions button { padding: 6px 10px; border: 1px solid #dfe8ea; border-radius: 999px; background: white; color: #667679; font-size: 9px; line-height: 1.35; }
.onboarding-suggestions button:hover { border-color: #a9ddec; background: #edf9fc; color: #177d9f; }
.onboarding-suggestions button.is-selected { border-color: #95d8e9; background: #e7f7fb; color: #147b9d; }
.onboarding-question.is-skipped .onboarding-suggestions { display: none; }
.onboarding-error { margin: 0; padding: 11px 13px; border-radius: 11px; background: #fff1ef; color: #a24940; font-size: 10px; line-height: 1.55; }
.onboarding-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.onboarding-back { padding: 0 13px; border: 0; background: transparent; color: #718083; }
.onboarding-back:hover { background: #f0f5f5; color: var(--ink); }
.onboarding-processing { text-align: center; }
.onboarding-orbit { position: relative; display: grid; width: 92px; height: 92px; place-items: center; margin: 3px auto 31px; }
.onboarding-orbit::before, .onboarding-orbit::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(34,174,221,.22); border-top-color: #2bb0db; border-radius: 50%; animation: onboarding-orbit 1.4s linear infinite; }
.onboarding-orbit::after { inset: 9px; border-color: rgba(102,201,167,.2); border-bottom-color: #62c4a3; animation-direction: reverse; animation-duration: 1.8s; }
.onboarding-orbit > span { display: grid; width: 54px; height: 54px; z-index: 1; place-items: center; border-radius: 17px; background: linear-gradient(145deg, #9be2f6, #e0f6f4); font-family: Georgia, "Songti SC", serif; font-size: 21px; }
.onboarding-orbit.is-failed::before, .onboarding-orbit.is-failed::after { animation: none; border-color: #efc2bd; }
@keyframes onboarding-orbit { to { transform: rotate(360deg); } }
.onboarding-processing h1 { font-size: clamp(28px, 5vw, 35px); }
.onboarding-processing > p:not(.onboarding-error) { max-width: 475px; margin: 0 auto; color: #778689; font-size: 12px; line-height: 1.75; }
.onboarding-processing-steps { display: flex; max-width: 500px; align-items: center; justify-content: center; margin: 30px auto; color: #a0abad; font-size: 9px; }
.onboarding-processing-steps span { display: flex; flex: 1; align-items: center; gap: 8px; white-space: nowrap; }
.onboarding-processing-steps span::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #d5dddf; }
.onboarding-processing-steps span:not(:last-child)::after { content: ""; height: 1px; flex: 1; background: #dfe6e8; }
.onboarding-processing-steps span.is-active { color: #208aad; }
.onboarding-processing-steps span.is-active::before { background: #54c2e5; box-shadow: 0 0 0 5px rgba(84,194,229,.12); }
.onboarding-processing-steps span.is-complete { color: #579e86; }
.onboarding-processing-steps span.is-complete::before { background: #66c9a7; }
.onboarding-processing .onboarding-error { margin: 24px auto 0; text-align: left; }
.onboarding-processing-actions { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 18px; }
.onboarding-processing-actions .onboarding-back { border: 1px solid #e0e7e9; }
.onboarding-foot { display: block; width: min(100%, 1120px); margin: 0 auto; padding: 0 24px calc(var(--filing-bar-height) + max(14px, env(safe-area-inset-bottom))); color: #9ba7a9; font-size: 8px; text-align: center; }

.app-shell {
  position: relative;
  width: min(100%, 1280px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow-x: clip;
  background: var(--paper);
  box-shadow: 0 0 60px rgba(31, 54, 60, .1);
}

.loading-screen {
  position: fixed;
  z-index: 200;
  inset: 0 0 var(--filing-bar-height);
  display: grid;
  place-content: center;
  justify-items: center;
  background: var(--paper);
}
.loading-screen.is-hidden { display: none; }
.loading-screen p { margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.loading-mark { display: flex; align-items: end; gap: 5px; height: 25px; }
.loading-mark span { width: 5px; border-radius: 8px; background: var(--blue-strong); animation: ledger-wave .85s ease-in-out infinite alternate; }
.loading-mark span:nth-child(1) { height: 11px; }
.loading-mark span:nth-child(2) { height: 24px; animation-delay: .16s; }
.loading-mark span:nth-child(3) { height: 16px; animation-delay: .32s; }
@keyframes ledger-wave { to { height: 7px; opacity: .4; } }

.topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(88px, auto);
  align-items: center;
  min-height: calc(72px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  border-bottom: 1px solid rgba(224, 232, 234, .82);
  background: var(--paper);
}
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; }
.icon-button:hover { background: var(--soft); }
.icon-button svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.topbar-center, .title-lockup { grid-column: 2; grid-row: 1; justify-self: center; }
.topbar-center { position: relative; }
.chat-date-button { display: grid; grid-template-columns: auto 14px; align-items: center; justify-items: center; padding: 6px 11px; border: 0; border-radius: 12px; background: transparent; text-align: center; }
.chat-date-button:hover { background: var(--soft); }
.chat-date-button strong { grid-column: 1; display: block; font-size: 17px; font-weight: 680; }
.chat-date-button small { grid-column: 1; display: block; margin-top: 2px; color: var(--muted); font-size: 9px; letter-spacing: .04em; }
.chat-date-button svg { grid-column: 2; grid-row: 1 / 3; width: 14px; fill: none; stroke: #8b989a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chat-date-button:disabled { opacity: .52; cursor: wait; }
.chat-date-picker { position: absolute; width: 1px; height: 1px; inset: 50% auto auto 50%; opacity: .01; pointer-events: none; }
.title-lockup { text-align: center; }
.title-lockup strong { display: block; font-size: 17px; font-weight: 680; letter-spacing: .02em; }
.title-lockup small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: .07em; }
.topbar-actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-self: end; gap: 2px; }
.back-chat-button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; }
.back-chat-button:hover { background: var(--soft); }
.back-chat-button svg { width: 20px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bag-anchor { position: relative; }
.bag-button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; background: transparent; }
.bag-button:hover { background: var(--soft); }
.bag-icon { width: 28px; height: 28px; filter: grayscale(.85); opacity: .62; transition: transform var(--dur-slow) var(--ease-bounce), filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.bag-button.is-lit .bag-icon { filter: saturate(1.3) drop-shadow(0 0 7px rgba(245, 183, 62, .9)); opacity: 1; }
.bag-button.is-open .bag-icon { transform: rotate(180deg); filter: none; opacity: 1; }
.bag-icon.is-shaking { animation: bag-shake .6s var(--ease-out); }
@keyframes bag-shake {
  20% { transform: rotate(-16deg); }
  45% { transform: rotate(12deg); }
  70% { transform: rotate(-7deg); }
  100% { transform: rotate(0); }
}
.bag-popover { position: absolute; top: calc(100% + 10px); right: 0; z-index: 70; width: 238px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); transform-origin: top right; animation: bag-pop .3s var(--ease-bounce); }
@keyframes bag-pop { from { opacity: 0; transform: translateY(-8px) scale(.92); } }
.bag-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bag-total { padding: 11px 12px; border-radius: 12px; background: var(--soft); }
.bag-total span, .bag-total strong { display: block; }
.bag-total span { color: var(--muted); font-size: 10px; }
.bag-total strong { margin-top: 5px; font-family: Georgia, serif; font-size: 17px; }
.bag-links { display: grid; gap: 2px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.bag-link { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; min-height: 40px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft); text-align: left; font-size: 13px; }
.bag-link:hover { background: var(--soft); color: var(--ink); }
.bag-link svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bag-link-badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--blue); color: #15272b; font-size: 10px; }

.main-content { min-height: calc(100vh - 72px); min-height: calc(100dvh - 72px); }
.view { display: none; }
.view.is-active { display: block; animation: view-in .18s ease both; }
@keyframes view-in { from { opacity: 0; transform: translateY(3px); } }

.chat-view { position: relative; height: calc(100vh - 72px); height: calc(100dvh - 72px); overflow: hidden; }
.chat-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 24px 18px calc(154px + var(--filing-bar-height) + env(safe-area-inset-bottom)); }
.conversation-list, .chat-welcome { width: min(100%, 780px); margin: 0 auto; }
.history-notice { width: min(100%, 780px); margin: 0 auto 22px; padding: 12px 14px; border: 1px solid #dce8ea; border-radius: 13px; background: #f5fafb; color: #708084; font-size: 10px; }
.history-notice span { margin-right: 7px; }
.history-notice strong { color: #526468; }
.history-notice button { float: right; padding: 2px 4px; border: 0; border-bottom: 1px solid #6dbbd3; background: transparent; color: #1886aa; font-size: 10px; }
.chat-history-empty { display: grid; width: min(100%, 780px); min-height: calc(100dvh - 300px); place-content: center; justify-items: center; margin: 0 auto; color: #839195; text-align: center; }
.chat-history-empty > span { display: grid; width: 48px; height: 48px; place-items: center; margin-bottom: 13px; border-radius: 50%; background: var(--soft); color: #2497bd; font-family: Georgia, serif; }
.chat-history-empty strong { color: var(--ink); font-size: 14px; }
.chat-history-empty p { margin: 7px 0 0; font-size: 11px; }
.history-loading { width: min(100%, 780px); margin: 70px auto; color: var(--muted); font-size: 11px; text-align: center; }
.chat-welcome { display: grid; min-height: calc(100dvh - 280px); place-content: center; justify-items: center; padding: 40px 6px; text-align: center; }
.welcome-mark, .brand-mark { display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg, #95e1f8, #d7f4f7); color: #143035; font-family: Georgia, "Songti SC", serif; }
.welcome-mark { width: 58px; height: 58px; margin-bottom: 20px; font-size: 25px; box-shadow: 0 12px 35px rgba(38, 175, 219, .17); }
.chat-welcome h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(25px, 6vw, 34px); font-weight: 500; }
.chat-welcome > p { max-width: 520px; margin: 12px 0 28px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.suggestion-grid { display: grid; width: min(100%, 540px); grid-template-columns: 1fr 1fr; gap: 10px; }
.suggestion-grid button { min-height: 50px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.78); color: #56676b; font-size: 12px; text-align: left; }
.suggestion-grid button:hover { border-color: #bce8f5; background: var(--soft); color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(28,48,54,.08); }

.conversation-list { display: flex; flex-direction: column; gap: 26px; }
.chat-entry { width: 100%; animation: message-in .2s ease both; }
@keyframes message-in { from { opacity: 0; transform: translateY(5px); } }
.chat-entry.is-user { display: flex; justify-content: flex-end; }
.user-bubble { max-width: min(84%, 620px); padding: 12px 16px; border-radius: 20px 20px 5px 20px; background: #eef1f2; color: #202c2f; font-size: 15px; line-height: 1.62; white-space: pre-wrap; word-break: break-word; }
.assistant-turn { display: flex; width: 100%; gap: 13px; align-items: flex-start; }
.assistant-avatar { flex: 0 0 auto; display: grid; width: 30px; height: 30px; place-items: center; margin-top: 1px; border-radius: 9px; background: #fff; }
.assistant-body { min-width: 0; flex: 1; padding-top: 2px; }
.assistant-segment { font-size: 15px; line-height: 1.78; word-break: break-word; }
.assistant-segment + .assistant-segment { margin-top: 17px; }
.assistant-segment.is-error { padding: 12px 14px; border: 1px solid #f1d1cc; border-radius: 12px; background: #fff8f7; color: #9f493f; }
.assistant-segment p { margin: 0 0 12px; }
.assistant-segment p:last-child { margin-bottom: 0; }
.assistant-segment h1, .assistant-segment h2, .assistant-segment h3 { margin: 21px 0 10px; line-height: 1.35; }
.assistant-segment h1 { font-size: 22px; }
.assistant-segment h2 { font-size: 19px; }
.assistant-segment h3 { font-size: 16px; }
.assistant-segment ul, .assistant-segment ol { margin: 10px 0 14px; padding-left: 25px; }
.assistant-segment li { margin: 5px 0; }
.assistant-segment blockquote { margin: 13px 0; padding: 2px 0 2px 14px; border-left: 3px solid #b6dfe9; color: #66777a; }
.assistant-segment code { padding: 2px 5px; border-radius: 5px; background: #eef2f3; font-family: "SFMono-Regular", Consolas, monospace; font-size: .88em; }
.assistant-segment pre { margin: 14px 0; overflow-x: auto; padding: 15px; border-radius: 13px; background: #182326; color: #eef7f8; }
.assistant-segment pre code { padding: 0; background: none; color: inherit; font-size: 12px; line-height: 1.65; }
.assistant-segment a { color: #087fa8; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.markdown-table-wrap { max-width: 100%; margin: 13px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.assistant-segment table { width: min(100%, 400px); min-width: 0; border-collapse: collapse; border-top: 2px dashed #cfdddf; border-bottom: 2px dashed #cfdddf; background: #fff; box-shadow: 0 10px 26px rgba(35,57,62,.07); font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; animation: receipt-print var(--dur-slow) var(--ease-out) both; }
.assistant-segment th, .assistant-segment td { padding: 9px 13px; border-bottom: 1px dashed #e5edee; text-align: left; white-space: nowrap; }
.assistant-segment th { font-weight: 650; letter-spacing: .05em; }
.assistant-segment tr:last-child td { border-bottom: 0; }
@keyframes receipt-print { from { clip-path: inset(0 0 100% 0); } }
.typing-cursor { display: inline-block; width: 6px; height: 17px; margin-left: 2px; vertical-align: -3px; background: var(--ink); animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.process-card { width: fit-content; max-width: 100%; margin: 4px 0 13px; color: #68777a; font-size: 12px; }
.process-card summary, .process-card .process-summary { display: flex; min-height: 32px; align-items: center; gap: 8px; padding: 4px 2px; list-style: none; user-select: none; }
.process-card summary { cursor: pointer; }
.process-card summary::-webkit-details-marker { display: none; }
.process-card summary::after { content: "⌄"; margin-left: 2px; color: #a0abad; transition: transform .18s ease; }
.process-card[open] summary::after { transform: rotate(180deg); }

.context-status { display: flex; min-height: 34px; align-items: center; gap: 9px; margin: 3px 0 10px; color: #68777a; font-size: 12px; font-weight: 600; }
.context-status-icon { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; align-items: center; justify-content: center; border-radius: 50%; background: #e8f6f1; color: #61a98f; font-size: 12px; font-weight: 800; }
.context-status.is-active .context-status-icon { width: 16px; height: 16px; flex-basis: 16px; border: 2px solid #d8ece6; border-top-color: #61a98f; background: transparent; animation: spin .75s linear infinite; }
.context-explanation { max-width: 520px; margin: 2px 0 14px; overflow: hidden; border: 1px solid #dde8e8; border-radius: 14px; background: #eef4f3; color: #172629; }
.context-explanation summary { display: flex; min-height: 46px; align-items: center; gap: 9px; padding: 0 13px; list-style: none; cursor: pointer; user-select: none; }
.context-explanation summary::-webkit-details-marker { display: none; }
.context-explanation summary::after { content: "⌄"; margin-left: auto; color: #93a2a4; transition: transform .18s ease; }
.context-explanation[open] summary::after { transform: rotate(180deg); }
.context-explanation-spark { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: #e8f6f1; color: #61a98f; font-size: 13px; }
.context-explanation-title { font-size: 13px; font-weight: 700; }
.context-explanation-body { padding: 11px 13px 13px; border-top: 1px solid #dde8e8; }
.context-explanation-lead, .context-explanation-privacy { margin: 0; color: #65777a; font-size: 12px; line-height: 1.65; }
.context-explanation-privacy { margin-top: 9px; color: #93a2a4; font-size: 11px; }
.context-source-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.context-source-chip { padding: 5px 9px; border: 1px solid #dde8e8; border-radius: 999px; background: #fff; font-size: 11px; line-height: 1.4; }
.sensitive-action-card { max-width: 560px; overflow: hidden; padding: 16px; border: 1px solid #ead7d7; border-radius: 18px; background: #fffcfa; }
.sensitive-action-heading { display: flex; align-items: center; gap: 11px; }
.sensitive-action-mark { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border-radius: 50%; background: #fff0f0; color: var(--danger); font-size: 16px; font-weight: 800; }
.sensitive-action-copy { display: grid; gap: 2px; }
.sensitive-action-copy small { color: var(--danger); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.sensitive-action-copy strong { font-size: 15px; }
.sensitive-action-reason, .sensitive-action-notice { margin: 12px 0 0; color: #65777a; font-size: 11px; line-height: 1.65; }
.sensitive-action-records { margin-top: 12px; border-top: 1px solid var(--line); }
.sensitive-action-record { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.sensitive-action-record div { min-width: 0; }
.sensitive-action-record strong, .sensitive-action-record span { display: block; }
.sensitive-action-record strong { font-size: 12px; }
.sensitive-action-record span { margin-top: 3px; color: #93a2a4; font-size: 9px; }
.sensitive-action-record b { flex: 0 0 auto; font-size: 12px; }
.sensitive-action-controls { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; margin-top: 14px; }
.sensitive-action-controls button { height: 40px; border: 0; border-radius: 11px; font-size: 11px; font-weight: 700; }
.sensitive-action-controls button:disabled { opacity: .48; cursor: wait; }
.sensitive-action-approve { background: var(--danger); color: #fff; }
.sensitive-action-status { display: grid; min-height: 39px; margin-top: 14px; place-items: center; border-radius: 11px; background: #eff3f4; color: #65777a; font-size: 11px; font-weight: 700; }
.sensitive-action-status.is-approved { background: #e8f6f1; }
.sensitive-action-status.is-expired, .sensitive-action-status.is-stale { background: #fff7e8; }
.ui-block-card, .ui-query-card { max-width: 620px; overflow: hidden; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fffefa; }
.ui-block-card.is-danger { border-color: #ead7d7; background: #fffcfa; }
.ui-block-eyebrow { display: block; color: #63a98f; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.ui-block-title { display: block; margin-top: 4px; color: var(--ink); font-size: 15px; }
.ui-block-copy { margin: 10px 0 0; color: #65777a; font-size: 11px; line-height: 1.65; }
.ui-block-records { margin-top: 13px; border-top: 1px solid var(--line); }
.ui-block-record, .ui-query-row { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.ui-block-record div, .ui-query-row div { min-width: 0; }
.ui-block-record strong, .ui-block-record span, .ui-query-row strong, .ui-query-row span { display: block; }
.ui-block-record strong, .ui-query-row strong { font-size: 12px; }
.ui-block-record span, .ui-query-row span { margin-top: 3px; color: #93a2a4; font-size: 9px; }
.ui-block-record b, .ui-query-row b { flex: 0 0 auto; font-size: 12px; }
.ui-block-record b.is-income, .draft-amount.is-income { color: var(--mint); }
.ui-block-record b.is-refund, .draft-amount.is-refund { color: #2998ba; }
.ui-block-record b.is-transfer, .ui-block-record b.is-unknown,
.draft-amount.is-transfer, .draft-amount.is-unknown { color: var(--muted); }
.ui-block-status { display: grid; min-height: 39px; margin-top: 14px; place-items: center; border-radius: 11px; background: #e8f6f1; color: #65777a; font-size: 11px; font-weight: 700; }
.ui-block-status.is-rejected, .ui-block-status.is-expired, .ui-block-status.is-stale { background: #eff3f4; }
.ui-query-card { background: #fff; }
.ui-query-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.ui-query-count { flex: 0 0 auto; color: #65777a; font-size: 11px; }
.ui-query-changed { margin: 9px 0 0; color: #a97726; font-size: 10px; }
.ui-query-content { margin-top: 9px; }
.ui-query-content.is-loading { opacity: .55; }
.ui-query-table { overflow: hidden; border-top: 2px dashed #cfdddf; border-bottom: 2px dashed #cfdddf; background: #fffefa; font-family: "SFMono-Regular", Consolas, monospace; }
.ui-query-table-viewport { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.ui-query-table-canvas { width: max(100%, var(--ui-query-table-min-width, 100%)); }
.ui-query-table-header, .ui-query-table-row { display: flex; min-width: 0; align-items: center; }
.ui-query-table-header { min-height: 34px; border-bottom: 1px dashed #cfdddf; background: #f5f8f7; color: #65777a; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.ui-query-table-body { max-height: 278px; overflow-y: auto; overscroll-behavior-y: contain; }
.ui-query-table-row { min-height: 48px; border-bottom: 1px solid #e5edee; font-size: 11px; }
.ui-query-table-row:last-child { border-bottom: 0; }
.ui-query-cell { min-width: 0; overflow: hidden; padding: 7px; text-overflow: ellipsis; white-space: nowrap; }
.ui-query-cell.is-right { text-align: right; }
.ui-query-table-footer { display: grid; min-height: 29px; place-items: center; color: #93a2a4; font-size: 9px; }
.ui-query-empty { padding: 22px 0 12px; color: #93a2a4; font-size: 11px; text-align: center; }
.ui-query-retry { width: 100%; min-height: 50px; border: 0; background: transparent; color: var(--danger); font-size: 11px; }
.ui-query-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.ui-query-pager button { min-width: 74px; min-height: 36px; border: 0; border-radius: 10px; background: #eff3f4; font-size: 10px; font-weight: 700; }
.ui-query-pager button:disabled { opacity: .4; }
.ui-query-pager span { color: #65777a; font-size: 10px; }
.process-icon { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #aab6b8; border-top-color: var(--blue-strong); border-radius: 50%; }
.process-card.is-active .process-icon { animation: spin .75s linear infinite; }
.process-card.is-complete .process-icon { border: 0; border-radius: 0; }
.process-card.is-complete .process-icon::before { content: "✓"; color: #63a98f; font-size: 13px; font-weight: 700; }
.process-card.is-failed .process-icon { border: 0; }
.process-card.is-failed .process-icon::before { content: "!"; color: var(--danger); font-weight: 700; }
.process-content { max-width: 690px; max-height: 220px; margin: 2px 0 7px 22px; overflow: auto; padding: 10px 12px; border-left: 2px solid #dce7e9; color: #7a888b; font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.process-meta { margin-left: 22px; color: #9aa5a7; font-size: 11px; }
@keyframes spin { to { transform: rotate(360deg); } }

.chat-end-anchor { height: 1px; }
.scroll-bottom { position: absolute; z-index: 12; right: max(18px, calc(50% - 390px)); bottom: calc(135px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 8px 22px rgba(28,48,54,.12); }
.scroll-bottom svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.interaction-dock { position: fixed; z-index: 27; right: 50%; bottom: var(--filing-bar-height); width: min(100%, 1280px); padding: 20px 18px calc(10px + env(safe-area-inset-bottom)); transform: translateX(50%); background: linear-gradient(180deg, rgba(251,252,252,0), rgba(251,252,252,.96) 24%, var(--paper) 50%); }
.interaction-dock-shell { width: min(100%, 780px); margin: 0 auto; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 9px 30px rgba(28,48,54,.12); }
.interaction-dock-shell > span { display: block; color: #63a98f; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.interaction-dock-shell > strong { display: block; margin-top: 4px; font-size: 14px; }
.interaction-dock-actions { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; margin-top: 12px; }
.interaction-dock-actions button { min-height: 40px; border: 0; border-radius: 12px; font-size: 11px; font-weight: 750; }
.interaction-dock-actions button:disabled { opacity: .45; cursor: wait; }
.interaction-reject { background: #fff0f0; color: var(--danger); }
.interaction-redirect { background: #eff3f4; color: #65777a; }
.interaction-approve { background: var(--ink); color: #fff; }
.subscription-dock { position: fixed; z-index: 26; right: 50%; bottom: var(--filing-bar-height); width: min(100%, 1280px); padding: 20px 18px calc(10px + env(safe-area-inset-bottom)); transform: translateX(50%); background: linear-gradient(180deg, rgba(251,252,252,0), rgba(251,252,252,.96) 25%, var(--paper) 54%); }
.subscription-dock > div { display: flex; width: min(100%, 780px); min-height: 74px; align-items: center; gap: 16px; margin: 0 auto; padding: 13px 14px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 9px 30px rgba(28,48,54,.12); }
.subscription-dock > div > div { min-width: 0; flex: 1; }
.subscription-dock strong, .subscription-dock small { display: block; }
.subscription-dock strong { font-size: 13px; }
.subscription-dock small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.subscription-dock button { flex: 0 0 auto; min-height: 42px; padding: 0 16px; border: 0; border-radius: 13px; background: var(--ink); color: white; font-size: 10px; font-weight: 750; }
.chat-composer { position: fixed; z-index: 25; right: 50%; bottom: var(--filing-bar-height); width: min(100%, 1280px); padding: 20px 18px calc(10px + env(safe-area-inset-bottom)); transform: translateX(50%); background: linear-gradient(180deg, rgba(251,252,252,0), rgba(251,252,252,.95) 27%, var(--paper) 55%); }
.interaction-redirect-banner { display: flex; width: min(100%, 780px); align-items: center; gap: 12px; margin: 0 auto 7px; padding: 9px 12px; border-radius: 13px; background: #e8f6f1; }
.interaction-redirect-banner span { min-width: 0; flex: 1; }
.interaction-redirect-banner strong, .interaction-redirect-banner small { display: block; }
.interaction-redirect-banner strong { font-size: 10px; }
.interaction-redirect-banner small { margin-top: 2px; color: #65777a; font-size: 8px; }
.interaction-redirect-banner button { flex: 0 0 auto; border: 0; background: transparent; color: #499a83; font-size: 9px; font-weight: 750; }
.composer-shell { width: min(100%, 780px); margin: 0 auto; padding: 9px 10px 8px 14px; border: 1px solid #dfe6e8; border-radius: 24px; background: #fff; box-shadow: 0 9px 30px rgba(28, 48, 54, .12); }
.composer-shell textarea { display: block; width: 100%; min-height: 28px; max-height: 160px; resize: none; padding: 5px 5px 4px; border: 0; outline: 0; background: transparent; font-size: 15px; line-height: 1.55; }
.composer-shell textarea::placeholder { color: #9ba5a7; }
.composer-actions { display: flex; min-height: 38px; align-items: center; gap: 8px; }
.composer-icon, .send-button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; }
.composer-icon:hover { background: var(--soft); }
.composer-icon svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.composer-icon.is-listening { background: #fff0ed; color: var(--danger); }
.composer-hint { flex: 1; color: #a0aaac; font-size: 10px; text-align: right; }
.send-button { background: #a8e3f6; }
.send-button:disabled { opacity: .42; cursor: default; }
.send-button svg { width: 21px; fill: none; stroke: #102429; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stop-icon { display: none; fill: #102429 !important; stroke: none !important; }
.chat-composer.is-busy .send-icon { display: none; }
.chat-composer.is-busy .stop-icon { display: block; }
.chat-composer > small { display: block; width: min(100%, 780px); margin: 6px auto 0; color: #a0abad; font-size: 9px; text-align: center; }

.page-wrap { width: min(100%, 1050px); margin: 0 auto; padding: 42px 24px 70px; }
.page-heading .eyebrow { color: var(--blue-strong); font-size: 11px; font-weight: 650; letter-spacing: .12em; }
.page-heading h1 { margin: 7px 0 7px; font-family: Georgia, "Songti SC", serif; font-size: 34px; font-weight: 500; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.ledger-summary { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1px; margin: 28px 0 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
.ledger-summary div { padding: 16px 17px; background: #fff; }
.ledger-summary span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; }
.ledger-summary strong { display: block; overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }

.filter-panel { margin-bottom: 19px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.search-box { display: flex; height: 46px; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid var(--line); border-radius: 13px; background: #f8fafb; }
.search-box:focus-within { border-color: #a9dceb; box-shadow: 0 0 0 3px rgba(34,174,221,.08); }
.search-box svg { width: 19px; flex: 0 0 auto; fill: none; stroke: #819094; stroke-width: 1.8; stroke-linecap: round; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 13px; }
.quick-filters { display: flex; gap: 7px; margin: 13px 0; overflow-x: auto; scrollbar-width: none; }
.quick-filters::-webkit-scrollbar { display: none; }
.quick-filters button { min-width: max-content; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: #6f7d80; font-size: 11px; }
.quick-filters button.is-active { border-color: #b8e4f0; background: #eaf7fb; color: #117da1; }
.filter-grid { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)) auto; gap: 10px; align-items: end; }
.filter-grid label { display: grid; gap: 5px; }
.filter-grid label > span { color: var(--muted); font-size: 9px; }
.filter-grid input, .filter-grid select { width: 100%; height: 39px; padding: 0 9px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: #fff; font-size: 11px; }
.reset-filters { height: 39px; padding: 0 12px; border: 0; border-radius: 10px; background: #eff3f4; color: #69777a; font-size: 11px; }
.filter-status { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; color: #8b989a; font-size: 10px; }
.filter-status i { width: 14px; height: 14px; border: 1.5px solid #b5c2c5; border-top-color: var(--blue-strong); border-radius: 50%; animation: spin .7s linear infinite; }

.ledger-list { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.ledger-list-header, .ledger-row { display: grid; grid-template-columns: 132px minmax(150px, 1.3fr) minmax(100px, .8fr) minmax(150px, 1.2fr) 110px; gap: 14px; align-items: center; }
.ledger-list-header { padding: 11px 17px; border-bottom: 1px solid var(--line); background: #f5f8f9; color: var(--muted); font-size: 10px; }
.ledger-row { position: relative; min-height: 75px; padding: 13px 17px; border-bottom: 1px solid #edf1f2; transition: background .15s ease; touch-action: pan-y; }
.ledger-row:last-child { border-bottom: 0; }
.ledger-row:hover { background: #f8fbfb; }
.ledger-row.is-pressing { background: #edf8fb; }
.ledger-date strong, .ledger-merchant strong { display: block; font-size: 13px; }
.ledger-date span, .ledger-merchant span, .ledger-note { display: block; overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ledger-category { width: fit-content; max-width: 100%; overflow: hidden; padding: 5px 8px; border-radius: 999px; background: #eef7f8; color: #577277; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ledger-amount { justify-self: end; font-size: 15px; font-weight: 700; white-space: nowrap; }
.ledger-amount.is-income { color: var(--mint); }
.ledger-amount.is-refund { color: #2998ba; }
.ledger-amount.is-transfer { color: var(--muted); }
.ledger-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.ledger-pagination button { min-width: 88px; height: 40px; padding: 0 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #536569; font-size: 11px; transition: border-color .16s ease, background .16s ease, transform var(--dur-instant) var(--ease-out); }
.ledger-pagination button:hover:not(:disabled) { border-color: #a9dceb; background: #f3fafb; color: #167f9f; }
.ledger-pagination button:active:not(:disabled) { transform: scale(.96); }
.ledger-pagination button:disabled { opacity: .38; cursor: default; }
.ledger-pagination > span { display: grid; min-width: 92px; justify-items: center; gap: 3px; }
.ledger-pagination strong { font-size: 12px; }
.ledger-pagination small { color: var(--muted); font-size: 9px; }

.card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; margin-top: 27px; }
.draft-card { padding: 18px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 8px 25px rgba(35,57,62,.04); }
.draft-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.draft-top strong { display: block; margin-bottom: 5px; font-size: 15px; }
.draft-top span { color: var(--muted); font-size: 10px; }
.draft-amount { font-family: "SFMono-Regular", Consolas, monospace; font-size: 19px; white-space: nowrap; }
.draft-note { min-height: 20px; margin: 13px 0 15px; color: #68777a; font-size: 11px; line-height: 1.55; }
.draft-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; padding-top: 12px; border-top: 1px dashed #e0e9ea; }
.draft-actions button { height: 39px; border: 0; border-radius: 11px; font-size: 11px; }
.reject-button { background: #eff3f4; color: #69777a; }
.approve-button { background: var(--ink); color: white; }
.draft-actions button:disabled { opacity: .45; cursor: wait; }

.simple-empty { display: grid; place-items: center; padding: 75px 20px; text-align: center; }
.simple-empty > span { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 14px; border-radius: 50%; background: var(--soft); color: var(--blue-strong); font-size: 20px; }
.simple-empty strong { font-size: 14px; }
.simple-empty p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }

.drawer-scrim { position: fixed; z-index: 79; inset: 0; background: rgba(8,19,22,.27); backdrop-filter: blur(3px); }
.drawer { position: fixed; z-index: 80; top: 0; bottom: 0; left: max(0px, calc(50% - 640px)); display: flex; width: min(84vw, 310px); flex-direction: column; padding: calc(28px + env(safe-area-inset-top)) 21px 22px; transform: translateX(-105%); background: #17282c; color: white; transition: transform .25s cubic-bezier(.2,.8,.2,1); box-shadow: 18px 0 50px rgba(10,25,29,.24); }
.drawer.is-open { transform: translateX(0); }
.drawer-brand { display: flex; gap: 12px; align-items: center; padding: 3px 5px 28px; }
.brand-mark { width: 37px; height: 37px; border-radius: 11px; font-size: 16px; }
.drawer-brand strong, .drawer-brand small { display: block; }
.drawer-brand strong { font-size: 17px; }
.drawer-brand small { margin-top: 2px; color: #8fa2a5; font-size: 9px; }
.drawer-account { display: grid; grid-template-columns: 37px minmax(0,1fr) auto auto; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }
.account-avatar { display: grid; width: 37px; height: 37px; place-items: center; border-radius: 50%; background: #9ce0f4; color: #183036; font-size: 15px; font-weight: 700; }
.account-copy { min-width: 0; }
.account-copy strong, .account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { font-size: 12px; }
.account-copy small { margin-top: 3px; color: #8ea0a4; font-size: 9px; }
.membership-badge { padding: 4px 7px; border: 1px solid rgba(117,221,185,.18); border-radius: 999px; background: rgba(102,201,167,.12); color: #8fe0c3; font-size: 8px; font-weight: 750; white-space: nowrap; }
.membership-badge.is-expired { border-color: rgba(238,148,136,.18); background: rgba(230,107,94,.12); color: #f0a095; }
.admin-badge { padding: 4px 6px; border-radius: 999px; background: rgba(131,214,242,.14); color: #9ce3f7; font-size: 8px; }
.account-action { grid-column: 1 / -1; min-height: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.06); color: #dce5e6; font-size: 10px; }
.account-action.is-quiet { margin-top: -4px; border-color: transparent; background: transparent; color: #8ea0a4; }
.account-action:hover { background: rgba(255,255,255,.11); color: white; }
.drawer-foot { margin: 12px 5px 0; color: #71878b; font-size: 8px; line-height: 1.5; }

.invite-dialog { width: min(calc(100% - 30px), 430px); padding: 30px; border: 0; border-radius: 22px; color: var(--ink); box-shadow: 0 30px 90px rgba(10,29,34,.25); }
.invite-dialog::backdrop, .upload-dialog::backdrop, .review-dialog::backdrop { background: rgba(15,31,35,.38); backdrop-filter: blur(4px); }
.dialog-close-row { position: absolute; top: 12px; right: 12px; }
.dialog-close-row button { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; background: #f0f4f5; color: #6f7e81; font-size: 22px; }
.invite-dialog h2 { margin: 7px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 25px; font-weight: 500; }
.invite-dialog > p:not(.auth-error) { margin: 0 0 23px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.subscription-dialog { max-height: min(88vh, 760px); overflow: auto; }
.subscription-current { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; margin: 18px 0; padding: 16px; border-radius: 16px; background: linear-gradient(135deg, #edf9f6, #f2f9fb); }
.subscription-current strong { font-family: Georgia, "Songti SC", serif; font-size: 23px; font-weight: 500; }
.subscription-current span { align-self: center; color: #4c9b82; font-size: 10px; font-weight: 750; }
.subscription-current span.is-expired { color: var(--danger); }
.subscription-current small { grid-column: 1 / -1; color: #78888b; font-size: 9px; }
.subscription-plans { display: grid; gap: 8px; }
.subscription-plan { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 13px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 15px; background: #fff; text-align: left; }
.subscription-plan.is-selected { border-color: #76cab0; background: #f1faf7; box-shadow: inset 0 0 0 1px rgba(102,201,167,.2); }
.subscription-plan-heading, .subscription-plan-price { display: grid; gap: 3px; }
.subscription-plan-heading strong { font-size: 12px; }
.subscription-plan-heading small { color: var(--muted); font-size: 8px; }
.subscription-plan-price { justify-items: end; }
.subscription-plan-price strong { font-size: 15px; }
.subscription-plan-price del { color: #9aa6a8; font-size: 8px; }
.subscription-plan-price i { padding: 2px 5px; border-radius: 999px; background: #fff0e5; color: #b66531; font-size: 7px; font-style: normal; font-weight: 750; }
.subscription-plan-empty { margin: 8px 0 !important; padding: 18px; border-radius: 14px; background: #f5f8f8; text-align: center; }
.subscription-checkout { margin-top: 12px; }
.paywall-dialog { text-align: center; }
.paywall-dialog .eyebrow { color: #4ca389; }
.paywall-dialog .regenerate-invite { width: 100%; margin-top: 8px; }
.upload-dialog, .review-dialog { width: min(calc(100% - 30px), 560px); max-height: min(86vh, 760px); overflow: auto; padding: 32px; border: 0; border-radius: 24px; color: var(--ink); box-shadow: 0 30px 90px rgba(10,29,34,.25); }
.review-dialog { width: min(calc(100% - 30px), 680px); }
.dialog-x { position: absolute; top: 12px; right: 12px; display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; background: #f0f4f5; color: #6f7e81; font-size: 22px; }
.dialog-x:disabled { opacity: .4; cursor: wait; }
.upload-selection h2, .upload-processing h2, .review-heading h2 { margin: 7px 0 8px; font-family: Georgia, "Songti SC", serif; font-size: 27px; font-weight: 500; }
.upload-selection > p:not(.auth-error), .upload-processing > p { margin: 0 0 20px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.upload-dropzone { display: grid; min-height: 160px; place-content: center; justify-items: center; padding: 20px; border: 1.5px dashed #bddce4; border-radius: 17px; background: #f7fbfc; text-align: center; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.upload-dropzone:hover, .upload-dropzone.is-dragging { border-color: #54b9d9; background: #edf9fc; }
.upload-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-plus { display: grid; width: 43px; height: 43px; place-items: center; margin-bottom: 10px; border-radius: 50%; background: #dff4fa; color: #168eb5; font-size: 24px; }
.upload-dropzone strong { font-size: 12px; }
.upload-dropzone small { margin-top: 6px; color: #8b999c; font-size: 9px; }
.upload-file-list { display: grid; gap: 7px; margin-top: 13px; }
.upload-file-item { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 46px; padding: 7px 10px; border: 1px solid #e3eaec; border-radius: 11px; background: white; }
.upload-file-item i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: #edf7f9; color: #338ead; font-size: 8px; font-style: normal; text-transform: uppercase; }
.upload-file-item strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.upload-file-item span { color: #879598; font-size: 9px; }
.upload-status { margin: 13px 0 0 !important; color: #768689 !important; }
.upload-status.is-ready { color: #4d957d !important; }
.upload-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.upload-processing { min-height: 420px; padding: 35px 0 16px; text-align: center; }
.upload-processing .onboarding-orbit { margin-top: 0; }
.upload-processing-steps { display: flex; margin-top: 28px; color: #9ba7a9; font-size: 9px; }
.upload-processing-steps span { position: relative; flex: 1; padding-top: 17px; }
.upload-processing-steps span::before { content: ""; position: absolute; top: 0; left: 50%; width: 7px; height: 7px; transform: translateX(-50%); border-radius: 50%; background: #d4dddf; }
.upload-processing-steps span.is-complete { color: #579e86; }
.upload-processing-steps span.is-complete::before { background: #66c9a7; }
.upload-processing-steps span.is-active { color: #208aad; }
.upload-processing-steps span.is-active::before { background: #54c2e5; box-shadow: 0 0 0 5px rgba(84,194,229,.12); }
.review-heading { display: grid; grid-template-columns: minmax(0,1fr) 180px; align-items: end; gap: 10px 20px; padding-right: 36px; }
.review-heading .eyebrow { grid-column: 1 / -1; }
.review-heading h2 { margin: 0; }
.review-heading label { display: grid; gap: 5px; }
.review-heading label span { color: var(--muted); font-size: 9px; }
.review-heading select { width: 100%; height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: 11px; }
.review-loading { display: grid; min-height: 300px; place-content: center; justify-items: center; gap: 12px; color: var(--muted); font-size: 10px; }
.review-loading i { width: 22px; height: 22px; border: 2px solid #d8e1e3; border-top-color: var(--blue-strong); border-radius: 50%; animation: spin .75s linear infinite; }
.review-empty { min-height: 280px; padding: 90px 20px; color: var(--muted); text-align: center; }
.review-empty strong { color: var(--ink); font-size: 14px; }
.review-empty p { margin: 7px 0 0; font-size: 10px; }
.review-content { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.review-meta { margin-bottom: 15px; color: #829093; font-size: 9px; }
.review-content .assistant-segment { font-size: 14px; }
.invite-result { display: grid; gap: 12px; }
.invite-result input { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; }
.copy-invite, .regenerate-invite { min-height: 43px; border-radius: 11px; font-size: 11px; }
.copy-invite { border: 0; background: #dff5fb; color: #126f8c; }
.regenerate-invite { border: 1px solid var(--line); background: white; color: #667679; }
.invite-result strong { margin-top: 3px; font-size: 11px; }
.invite-result small { color: var(--muted); font-size: 10px; }

.emotion-layer { position: fixed; z-index: 100; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 25vh 22px 24px; background: rgba(248,251,251,.78); backdrop-filter: blur(14px); }
.transaction-peek { width: min(100%, 530px); padding: 17px; border-radius: 14px; background: white; box-shadow: var(--shadow); font-size: 13px; line-height: 1.6; }
.transaction-peek small { display: block; margin-bottom: 5px; color: var(--muted); }
.emotion-menu { width: 210px; margin: 17px 0 7px 100px; overflow: hidden; border-radius: 12px; background: rgba(28,34,36,.86); color: white; box-shadow: 0 18px 35px rgba(20,28,31,.25); }
.emotion-menu button { display: flex; width: 100%; height: 50px; align-items: center; justify-content: space-between; padding: 0 17px; border: 0; border-bottom: 1px solid rgba(255,255,255,.18); background: transparent; color: white; }
.emotion-menu button:last-child { border-bottom: 0; }
.emotion-menu button:hover { background: rgba(255,255,255,.1); }
.emotion-menu i { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid white; border-radius: 50%; font-style: normal; }
.emotion-layer > small { width: min(100%, 530px); color: #9ca7a9; text-align: right; font-size: 9px; }
.emotion-close { position: absolute; bottom: calc(35px + var(--filing-bar-height) + env(safe-area-inset-bottom)); left: 50%; width: 48px; height: 48px; transform: translateX(-50%); border: 0; border-radius: 50%; background: rgba(255,255,255,.8); font-size: 28px; }

.toast { position: fixed; z-index: 150; top: calc(82px + env(safe-area-inset-top)); left: 50%; max-width: min(88vw, 460px); padding: 10px 15px; transform: translateX(-50%); border-radius: 999px; background: #17272b; color: white; box-shadow: 0 8px 25px rgba(20,35,38,.2); font-size: 11px; text-align: center; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; }
[hidden] { display: none !important; }

.site-filing-bar { position: fixed; z-index: 320; right: 0; bottom: 0; left: 0; display: flex; min-height: var(--filing-bar-height); align-items: center; justify-content: center; border-top: 1px solid rgba(218, 228, 230, .82); background: rgba(247, 251, 250, .96); backdrop-filter: blur(9px); }
.site-filing-bar a { display: inline-flex; align-items: center; padding: 4px 8px; color: #8b989a; font-size: 9px; line-height: 15px; text-decoration: none; white-space: nowrap; }
.site-filing-bar .police-filing-link { gap: 4px; }
.site-filing-bar .police-filing-link img { width: 13px; height: 14px; object-fit: contain; }
.site-filing-bar a:hover { color: #168db5; text-decoration: underline; text-underline-offset: 2px; }
.site-filing-bar a:focus-visible { outline: 2px solid rgba(34, 174, 221, .35); outline-offset: -2px; }

@media (max-width: 760px) {
  html, body { background: var(--paper); }
  .onboarding-gate { background: #f8fbfb; }
  .onboarding-topbar { min-height: calc(65px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; }
  .onboarding-brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
  .onboarding-brand small, .onboarding-account > span { display: none; }
  .onboarding-account button { padding: 0 8px; border: 0; background: transparent; }
  .onboarding-main { width: 100%; margin: 0 auto; place-items: stretch; }
  .onboarding-loading { min-height: calc(100dvh - 110px); }
  .onboarding-intro, .onboarding-flow, .onboarding-processing { min-height: calc(100dvh - 86px - env(safe-area-inset-top)); padding: 30px 20px calc(26px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .onboarding-intro { display: flex; flex-direction: column; justify-content: center; }
  .onboarding-hero-mark { width: 60px; height: 60px; margin-bottom: 22px; border-radius: 18px; font-size: 24px; }
  .onboarding-intro > p { max-width: 440px; }
  .onboarding-promises { grid-template-columns: 1fr; gap: 7px; margin: 25px 0 23px; }
  .onboarding-promises div { display: grid; min-height: 0; grid-template-columns: 30px 1fr; padding: 12px 13px; }
  .onboarding-promises i { grid-row: 1 / 3; margin: 2px 0 0; }
  .onboarding-promises strong { margin-bottom: 3px; }
  .onboarding-start { width: 100%; }
  .onboarding-flow { display: flex; flex-direction: column; }
  .onboarding-step-heading { margin: 29px 0 22px; }
  .onboarding-form { flex: 1; }
  .onboarding-question { padding: 15px; }
  .onboarding-question-head { gap: 9px; }
  .onboarding-actions { position: sticky; bottom: 0; margin: 1px -20px calc(-26px - env(safe-area-inset-bottom)); padding: 13px 20px calc(13px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(248,251,251,.7), #f8fbfb 25%); }
  .onboarding-actions .onboarding-primary { min-width: 148px; }
  .onboarding-processing { display: flex; flex-direction: column; justify-content: center; }
  .onboarding-processing-steps { width: 100%; }
  .onboarding-processing-steps span { flex-direction: column; gap: 6px; }
  .onboarding-processing-steps span:not(:last-child)::after { position: absolute; display: none; }
  .onboarding-foot { display: none; }
  .app-shell { box-shadow: none; }
  .drawer { left: 0; }
  .chat-scroll { padding-right: 14px; padding-left: 14px; }
  .assistant-turn { gap: 10px; }
  .assistant-avatar { width: 27px; height: 27px; }
  .user-bubble, .assistant-segment { font-size: 14px; }
  .composer-hint { display: none; }
  .suggestion-grid { grid-template-columns: 1fr; }
  .page-wrap { padding: 30px 16px 52px; }
  .page-heading h1 { font-size: 29px; }
  .filter-grid { grid-template-columns: 1fr 1fr; }
  .sort-field { grid-column: 1 / 2; }
  .reset-filters { grid-column: 2 / 3; }
  .ledger-list { border: 0; border-radius: 0; background: transparent; }
  .ledger-list-header { display: none; }
  .ledger-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 13px; min-height: 94px; margin-bottom: 9px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
  .ledger-date { grid-column: 1 / -1; display: flex; gap: 7px; align-items: baseline; }
  .ledger-date strong, .ledger-date span { display: inline; margin: 0; }
  .ledger-merchant { min-width: 0; }
  .ledger-category { justify-self: end; align-self: start; }
  .ledger-note { grid-column: 1 / 2; }
  .ledger-amount { grid-column: 2 / 3; grid-row: 2 / 3; }
  .ledger-pagination { gap: 10px; margin-top: 17px; }
  .ledger-pagination button { min-width: 82px; }
  .card-list { grid-template-columns: 1fr; }
  .auth-gate { place-items: start center; padding-top: max(22px, env(safe-area-inset-top)); }
  .auth-card { padding: 27px 22px; border-radius: 21px; }
  .auth-brand { margin-bottom: 28px; }
  .invite-dialog { width: 100%; max-width: none; margin: auto 0 0; padding: 28px 22px calc(24px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .paywall-dialog { width: min(calc(100% - 30px), 430px); margin: auto; padding: 28px 22px; border-radius: 22px; }
  .upload-dialog, .review-dialog { width: 100%; max-width: none; max-height: 92vh; margin: auto 0 0; padding: 28px 20px calc(22px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
  .review-heading { grid-template-columns: 1fr; }
  .review-heading .eyebrow { grid-column: auto; }
  .review-heading select { height: 43px; }
}

@media (min-width: 960px) {
  .drawer { transform: none; width: 260px; box-shadow: none; }
  .drawer-scrim { display: none !important; }
  .topbar, .main-content { margin-left: 260px; }
  #menuButton { visibility: hidden; pointer-events: none; }
  .chat-composer, .interaction-dock, .subscription-dock { width: min(calc(100% - 260px), 1020px); right: calc(50% - 130px); }
  .chat-scroll { padding-top: 38px; }
}

/* ---------- motion & liveliness ---------- */
@keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes backdrop-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes row-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.55); } }
@keyframes menu-pop { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@keyframes face-in { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes float-soft { 50% { transform: translateY(-5px); } }
@keyframes dot-hop { 30% { transform: translateY(-4px); } }
@keyframes press-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -12px) scale(.94); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, -10px) scale(.95); } }

dialog[open] { animation: dialog-in var(--dur-base) var(--ease-spring) both; }
dialog.is-closing { animation: dialog-out var(--dur-fast) var(--ease-in-out) both; }
dialog::backdrop { animation: backdrop-in var(--dur-base) ease both; }

.view.is-active { animation: view-in var(--dur-base) var(--ease-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }

.chat-entry { animation: message-in var(--dur-base) var(--ease-spring) both; }
@keyframes message-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.chat-entry:nth-of-type(2) { animation-delay: 55ms; }
.chat-entry:nth-of-type(3) { animation-delay: 110ms; }
.chat-entry:nth-of-type(4) { animation-delay: 165ms; }
.chat-entry:nth-of-type(5) { animation-delay: 220ms; }
.chat-entry:nth-of-type(6) { animation-delay: 275ms; }
.chat-entry:nth-of-type(7) { animation-delay: 330ms; }
.chat-entry:nth-of-type(8) { animation-delay: 385ms; }
.chat-entry.is-static { animation: none; }

.welcome-face { width: 84px; height: 84px; margin-bottom: 18px; border-radius: 24px; filter: drop-shadow(0 10px 22px rgba(28,48,54,.13)); animation: face-in var(--dur-slow) var(--ease-spring) both, float-soft 4.6s ease-in-out .6s infinite; }
.chat-welcome h1 { animation: rise-in var(--dur-base) var(--ease-out) .1s both; }
.chat-welcome > p { animation: rise-in var(--dur-base) var(--ease-out) .18s both; }
.suggestion-grid button { animation: rise-in var(--dur-base) var(--ease-out) both; }
.suggestion-grid button:nth-child(2) { animation-delay: 75ms; }
.suggestion-grid button:nth-child(3) { animation-delay: 150ms; }
.suggestion-grid button:nth-child(4) { animation-delay: 225ms; }

.process-icon { display: inline-flex; width: auto; align-items: center; gap: 3px; border: 0; }
.process-icon span { width: 4px; height: 4px; border-radius: 50%; background: #b7c3c6; }
.process-card.is-active .process-icon span { background: var(--blue-strong); animation: dot-hop 1.05s ease-in-out infinite; }
.process-card.is-active .process-icon span:nth-child(2) { animation-delay: .14s; }
.process-card.is-active .process-icon span:nth-child(3) { animation-delay: .28s; }
.process-card.is-complete .process-icon span, .process-card.is-failed .process-icon span { display: none; }

.composer-shell { transition: border-color .18s ease, box-shadow var(--dur-base) ease, transform var(--dur-base) var(--ease-out); }
.composer-shell:focus-within { border-color: #a5dcec; box-shadow: 0 16px 42px rgba(28,48,54,.17); transform: translateY(-2px); }
.send-button { transition: transform var(--dur-instant) var(--ease-out), background .2s ease, opacity .2s ease; }
.send-button:not(:disabled) { animation: pop-in var(--dur-base) var(--ease-bounce); }
.scroll-bottom { animation: pop-in var(--dur-base) var(--ease-bounce) both; }

.bag-button, .bag-link, .back-chat-button, .suggestion-grid button, .quick-filters button, .auth-submit, .onboarding-primary, .onboarding-back, .account-action, .composer-icon, .send-button, .icon-button, .chat-date-button, .reset-filters, .history-notice button, .draft-actions button, .copy-invite, .regenerate-invite, .auth-switch, .emotion-menu button, .scroll-bottom, .dialog-x, .dialog-close-row button { transition: transform var(--dur-instant) var(--ease-out); }
.bag-button:active, .bag-link:active, .back-chat-button:active, .suggestion-grid button:active, .quick-filters button:active, .auth-submit:active, .onboarding-primary:active, .onboarding-back:active, .account-action:active, .composer-icon:active, .send-button:active, .icon-button:active, .chat-date-button:active, .reset-filters:active, .history-notice button:active, .draft-actions button:active, .copy-invite:active, .regenerate-invite:active, .auth-switch:active, .emotion-menu button:active, .scroll-bottom:active, .dialog-x:active, .dialog-close-row button:active { transform: scale(.92); }

.toast { animation: toast-in var(--dur-base) var(--ease-bounce) both; }
.toast.is-leaving { animation: toast-out var(--dur-fast) ease both; }

.drawer { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease; }
.drawer-scrim { animation: backdrop-in var(--dur-fast) ease both; }

.emotion-layer { animation: backdrop-in var(--dur-fast) ease both; }
.emotion-layer.is-leaving { animation: fade-out var(--dur-fast) ease both; }
.emotion-layer .transaction-peek { animation: dialog-in var(--dur-base) var(--ease-spring) both; }
.emotion-menu { animation: menu-pop var(--dur-base) var(--ease-bounce) .06s both; transform-origin: 90% 0; }
.emotion-menu img { width: 23px; height: 23px; border-radius: 50%; }
.emotion-close { transition: transform var(--dur-instant) var(--ease-out); }
.emotion-close:active { transform: translateX(-50%) scale(.92); }

.ledger-list { transition: opacity var(--dur-fast) ease; }
.ledger-list.is-fetching { opacity: .45; }
.ledger-row { transition: background .15s ease, transform var(--dur-instant) var(--ease-out); animation: row-in var(--dur-base) var(--ease-out) both; }
.ledger-row.is-static { animation: none; }
.ledger-row:nth-of-type(2) { animation-delay: 55ms; }
.ledger-row:nth-of-type(3) { animation-delay: 110ms; }
.ledger-row:nth-of-type(4) { animation-delay: 165ms; }
.ledger-row:nth-of-type(5) { animation-delay: 220ms; }
.ledger-row:nth-of-type(6) { animation-delay: 275ms; }
.ledger-row:nth-of-type(7) { animation-delay: 330ms; }
.ledger-row:nth-of-type(8) { animation-delay: 385ms; }
.ledger-row:active { transform: scale(.995); }
.ledger-row.is-pressing::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--blue), var(--mint)); animation: press-fill .52s linear both; transform-origin: left; }

.draft-card { animation: row-in var(--dur-base) var(--ease-out) both; }
.draft-card:nth-child(2) { animation-delay: 50ms; }
.draft-card:nth-child(3) { animation-delay: 100ms; }
.draft-card:nth-child(4) { animation-delay: 150ms; }

.simple-empty > span, .chat-history-empty > span { animation: float-soft 4s ease-in-out infinite; }

.skeleton-lines { display: grid; width: min(100%, 420px); gap: 10px; margin: 0 auto 18px; }
.skeleton-lines span { height: 12px; border-radius: 6px; background: linear-gradient(90deg, #edf2f3 25%, #f7fafb 50%, #edf2f3 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skeleton-lines span:nth-child(2) { width: 82%; }
.skeleton-lines span:nth-child(3) { width: 64%; }
.review-content .assistant-segment > * { animation: rise-in var(--dur-base) var(--ease-out) both; }
.review-content .assistant-segment > *:nth-child(2) { animation-delay: 50ms; }
.review-content .assistant-segment > *:nth-child(3) { animation-delay: 100ms; }
.review-content .assistant-segment > *:nth-child(4) { animation-delay: 150ms; }
.review-content .assistant-segment > *:nth-child(5) { animation-delay: 200ms; }

/* mascot: 常驻品牌形象 */
.zhiji-frame { position: relative; overflow: hidden; background: #fff; isolation: isolate; }
.zhiji-frame > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.menu-face { display: block; width: 34px; height: 34px; border-radius: 10px; animation: float-soft 4.2s ease-in-out infinite; }
@keyframes wiggle { 25% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } }
.drawer-brand:hover .brand-mark img, .auth-brand:hover .welcome-mark img, .onboarding-brand:hover .onboarding-brand-mark img { animation: wiggle .45s var(--ease-out); }

/* coin-drop: 确认入账的飞币闭环 */
.coin-fly { position: fixed; z-index: 90; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: linear-gradient(145deg, #ffd66e, #f5b73e); color: #7a5410; font-size: 16px; font-weight: 700; box-shadow: 0 6px 16px rgba(245,183,62,.45); animation: coin-fly .68s var(--ease-in-out) forwards; pointer-events: none; }
@keyframes coin-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(.7); }
  18% { opacity: 1; transform: translate(calc(var(--dx) * .12), calc(var(--dy) * .12 - 46px)) scale(1.05); }
  100% { opacity: .15; transform: translate(var(--dx), var(--dy)) scale(.35); }
}

@media (max-width: 760px) {
  dialog[open] { animation-name: sheet-in; }
  @keyframes sheet-in { from { opacity: 0; transform: translateY(48px); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}