* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }

:root {
  --cream:      #F5F2ED;
  --cream2:     #EDE9E2;
  --cream3:     #E2DDD5;
  --sage:       #4A7B6F;
  --sage-light: #6B9E90;
  --sage-dim:   rgba(74,123,111,0.12);
  --sage-dim2:  rgba(74,123,111,0.06);
  --slate:      #2D3142;
  --slate2:     #404660;
  --slate3:     #6B7280;
  --slate4:     #9CA3AF;
  --mint:       #D4EBE4;
  --mint2:      #B8DDD4;
  --amber:      #D4845A;
  --rose:       #C4626A;
  --font: -apple-system, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
}

html { height:100%; }
body {
  min-height:100%;
  background: linear-gradient(150deg, #CDD5CC 0%, #D8D4CB 60%, #D0CCBE 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font); padding:20px;
}

.phone-wrap { display:flex; flex-direction:column; align-items:center; width:100%; max-width:390px; }
.phone-label { color:rgba(45,49,66,0.35); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:14px; font-weight:700; }

.phone {
  width:100%;
  height: min(844px, calc(100vh - 80px));
  background:var(--cream);
  border-radius:50px;
  border:1.5px solid rgba(45,49,66,0.09);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.8),
    0 40px 100px rgba(45,49,66,0.3),
    inset 0 1px 0 rgba(255,255,255,0.9);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}

.dynamic-island {
  width:126px; height:36px; background:#111; border-radius:20px;
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  z-index:100;
}

.status-bar {
  position:absolute; top:0; left:0; right:0; height:58px;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 28px 10px; z-index:50; pointer-events:none;
}
.status-time { font-size:15px; font-weight:700; color:var(--slate); letter-spacing:-0.3px; }
.status-icons { display:flex; gap:6px; align-items:center; }
.status-icons svg { width:16px; height:16px; fill:var(--slate); }

.screen {
  display:none; flex-direction:column; flex:1; min-height:0;
  padding-top:60px; background:var(--cream); overflow:hidden;
}
.screen.active { display:flex; }

#screens-container {
  display:flex; flex-direction:column; flex:1; min-height:0;
}

.scroll-content {
  flex:1; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.scroll-content::-webkit-scrollbar { display:none; }

/* TAB BAR */
.tab-bar {
  flex-shrink:0; height:83px;
  background:rgba(245,242,237,0.97);
  backdrop-filter:blur(30px);
  border-top:1px solid var(--cream3);
  display:flex; align-items:flex-start; justify-content:space-around;
  padding-top:10px; z-index:50;
}
.tab-item {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; padding:6px 18px; border-radius:14px;
  transition:all 0.2s; min-width:72px;
}
.tab-item:active { transform:scale(0.88); }
.tab-icon { width:24px; height:24px; }
.tab-icon svg { width:22px; height:22px; transition:all 0.25s; }
.tab-label { font-size:10px; font-weight:700; letter-spacing:0.02em; color:var(--slate3); transition:color 0.2s; }
.tab-item.active .tab-label { color:var(--sage); }
.tab-item.active .tab-icon svg { stroke:var(--sage); }
.tab-item:not(.active) .tab-icon svg { stroke:var(--slate3); }
.tab-icon-wrap { position:relative; }
.tab-badge {
  position:absolute; top:-4px; right:-6px;
  width:16px; height:16px; background:var(--amber); border-radius:50%;
  font-size:9px; font-weight:900; color:white;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--cream);
}

/* HOME */
.home-hdr {
  padding:10px 24px 0;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:6px;
}
.home-greet { font-size:13px; color:var(--slate3); font-weight:500; margin-bottom:2px; }
.home-name { font-size:30px; font-weight:900; color:var(--slate); letter-spacing:-0.9px; line-height:1; }

.avatar-btn {
  width:44px; height:44px; border-radius:50%; background:var(--mint);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; cursor:pointer; border:2.5px solid var(--mint2);
  transition:all 0.2s; position:relative;
  box-shadow:0 4px 16px rgba(74,123,111,0.15);
}
.avatar-btn:active { transform:scale(0.92); }
.avatar-notif {
  width:10px; height:10px; background:var(--amber); border-radius:50%;
  position:absolute; top:0; right:0; border:2px solid var(--cream);
}

.status-card {
  margin:14px 20px 0;
  border-radius:30px; padding:26px 22px 22px;
  position:relative; overflow:hidden;
}
.status-card.calm {
  background:linear-gradient(140deg, #E9F5F1 0%, #DFF0EA 100%);
  border:1.5px solid var(--mint2);
}
.status-card.needs-attention {
  background:linear-gradient(140deg, #FBF1EB 0%, #F5E8DE 100%);
  border:1.5px solid rgba(212,132,90,0.35);
}
.status-card-eyebrow {
  font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  margin-bottom:10px; display:flex; align-items:center; gap:6px;
}
.status-card.calm .status-card-eyebrow { color:var(--sage); }
.status-card.needs-attention .status-card-eyebrow { color:var(--amber); }
.status-card-msg {
  font-size:22px; font-weight:900; color:var(--slate);
  letter-spacing:-0.6px; line-height:1.3; margin-bottom:12px;
}
.status-card-sub {
  font-size:14px; color:var(--slate3); line-height:1.6; font-weight:500;
}
.status-card-sub strong { color:var(--slate); font-weight:700; }
.status-card-action {
  display:inline-flex; align-items:center; gap:7px;
  margin-top:16px; padding:11px 18px;
  border-radius:100px; font-size:14px; font-weight:800;
  cursor:pointer; transition:all 0.15s; border:none; font-family:var(--font);
}
.status-card.calm .status-card-action {
  background:var(--sage); color:white;
  box-shadow:0 6px 18px rgba(74,123,111,0.3);
}
.status-card.needs-attention .status-card-action {
  background:var(--amber); color:white;
  box-shadow:0 6px 18px rgba(212,132,90,0.3);
}
.status-card-action:active { transform:scale(0.95); opacity:0.9; }

.savings-row {
  display:flex; gap:10px; margin:14px 20px 0;
}
.saving-tile {
  flex:1; background:white; border:1px solid var(--cream3);
  border-radius:20px; padding:16px 14px;
  cursor:pointer; transition:all 0.15s;
  box-shadow:0 2px 8px rgba(45,49,66,0.05);
}
.saving-tile:active { transform:scale(0.96); background:var(--cream2); }
.saving-tile-val { font-size:20px; font-weight:900; color:var(--slate); letter-spacing:-0.5px; margin-bottom:3px; }
.saving-tile-lbl { font-size:12px; font-weight:600; color:var(--slate3); line-height:1.3; }
.saving-tile-badge {
  display:inline-flex; font-size:10px; font-weight:700;
  padding:3px 8px; border-radius:100px; margin-top:6px;
}
.saving-tile-badge.good { background:#7ECFBB22; color:var(--sage); }
.saving-tile-badge.warn { background:rgba(212,132,90,0.15); color:var(--amber); }

.section-label {
  font-size:13px; font-weight:800; color:var(--slate3);
  letter-spacing:0.07em; text-transform:uppercase;
  padding:22px 24px 12px;
}
.attn-item {
  margin:0 20px 10px;
  background:white; border:1px solid var(--cream3);
  border-radius:20px; padding:16px;
  display:flex; align-items:center; gap:13px;
  cursor:pointer; transition:all 0.15s;
  box-shadow:0 2px 8px rgba(45,49,66,0.05);
}
.attn-item:active { transform:scale(0.97); background:var(--cream2); }
.attn-item-ico {
  width:42px; height:42px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.attn-item-ico.warn { background:rgba(212,132,90,0.14); }
.attn-item-ico.info { background:var(--sage-dim); }
.attn-item-ico.good { background:#7ECFBB22; }
.attn-item-body { flex:1; }
.attn-item-title { font-size:14px; font-weight:800; color:var(--slate); line-height:1.3; margin-bottom:3px; }
.attn-item-sub { font-size:13px; color:var(--slate3); line-height:1.5; }
.attn-item-arrow { color:var(--slate4); font-size:18px; }

.pb-xl { padding-bottom:64px; }

/* ZENO CHAT */
.zeno-screen-hdr {
  padding:10px 20px 10px;
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.zeno-screen-ava {
  width:42px; height:42px;
  background:linear-gradient(135deg, var(--mint2), var(--sage));
  border-radius:14px; display:flex; align-items:center;
  justify-content:center; font-size:20px;
  box-shadow:0 4px 14px rgba(74,123,111,0.2);
}
.zeno-screen-name { font-size:17px; font-weight:900; color:var(--slate); letter-spacing:-0.4px; }
.zeno-screen-status {
  font-size:12px; color:var(--sage); font-weight:700;
  display:flex; align-items:center; gap:5px;
}
.zeno-dot { width:6px; height:6px; background:var(--sage); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:0.4}50%{opacity:1} }

.chat-body {
  flex:1; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:0 16px 8px;
  display:flex; flex-direction:column; gap:14px;
}
.chat-body::-webkit-scrollbar { display:none; }

.chat-suggested {
  display:flex; flex-direction:column; gap:0; padding-bottom:8px;
}
.chat-intro-bubble {
  background:white; border:1px solid var(--cream3);
  border-radius:6px 22px 22px 22px; padding:16px 18px;
  max-width:90%; margin-bottom:16px;
  box-shadow:0 2px 10px rgba(45,49,66,0.06);
}
.chat-intro-txt { font-size:15px; color:var(--slate); line-height:1.6; }
.chat-intro-txt strong { color:var(--sage); font-weight:800; }

.suggest-group-lbl {
  font-size:11px; font-weight:800; color:var(--slate3);
  letter-spacing:0.09em; text-transform:uppercase;
  margin:14px 0 8px 4px;
}
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip {
  display:inline-flex; align-items:center; gap:6px;
  background:white; border:1.5px solid var(--cream3);
  border-radius:100px; padding:9px 14px;
  font-size:13px; color:var(--slate2); font-weight:700;
  cursor:pointer; transition:all 0.15s; white-space:nowrap;
  box-shadow:0 2px 6px rgba(45,49,66,0.04);
}
.chip:active { background:var(--mint); border-color:var(--mint2); color:var(--sage); transform:scale(0.94); }

.msg-user {
  align-self:flex-end;
  background:var(--slate); color:var(--cream);
  border-radius:22px 22px 4px 22px;
  padding:13px 17px; font-size:15px; font-weight:600;
  max-width:77%; line-height:1.45;
  box-shadow:0 4px 14px rgba(45,49,66,0.18);
  animation:slideIn 0.28s cubic-bezier(0.4,0,0.2,1);
}
@keyframes slideIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.msg-zeno {
  align-self:flex-start; max-width:93%;
  display:flex; flex-direction:column; gap:8px;
  animation:slideIn 0.28s cubic-bezier(0.4,0,0.2,1);
}
.msg-zeno-hdr { display:flex; align-items:center; gap:8px; }
.msg-zeno-ava {
  width:26px; height:26px;
  background:linear-gradient(135deg, var(--mint2), var(--sage));
  border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-size:12px; flex-shrink:0;
}
.msg-zeno-name { font-size:12px; font-weight:800; color:var(--sage); }

.typing {
  background:white; border:1px solid var(--cream3);
  border-radius:4px 22px 22px 22px; padding:14px 18px;
  display:inline-flex; align-items:center; gap:5px;
  box-shadow:0 2px 8px rgba(45,49,66,0.05);
}
.t-dot { width:6px; height:6px; background:var(--slate3); border-radius:50%; animation:tdot 1.2s infinite; }
.t-dot:nth-child(2){animation-delay:0.2s} .t-dot:nth-child(3){animation-delay:0.4s}
@keyframes tdot { 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.1)} }

.answer {
  background:white; border:1px solid var(--cream3);
  border-radius:4px 22px 22px 22px; overflow:hidden;
  box-shadow:0 2px 12px rgba(45,49,66,0.07);
}
.answer-top { padding:18px; border-bottom:1px solid var(--cream2); }
.answer-direct { font-size:17px; font-weight:900; color:var(--slate); line-height:1.35; letter-spacing:-0.4px; margin-bottom:10px; }
.answer-ctx { font-size:13px; color:var(--slate3); line-height:1.65; }
.answer-ctx strong { color:var(--slate); font-weight:800; }
.answer-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.tag { font-size:11px; font-weight:800; padding:5px 11px; border-radius:100px; }
.tag.g { background:#7ECFBB22; color:var(--sage); }
.tag.r { background:#F0A99F22; color:var(--rose); }
.tag.a { background:rgba(212,132,90,0.18); color:var(--amber); }
.tag.s { background:var(--sage-dim); color:var(--sage); }
.achart { padding:18px; }
.achart-lbl { font-size:11px; font-weight:800; color:var(--slate3); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:15px; }
.bars { display:flex; flex-direction:column; gap:10px; }
.bar { display:flex; align-items:center; gap:10px; }
.bar-lbl { font-size:12px; color:var(--slate3); font-weight:700; width:75px; flex-shrink:0; text-align:right; }
.bar-track { flex:1; height:8px; background:var(--cream2); border-radius:100px; overflow:hidden; }
.bar-fill { height:100%; border-radius:100px; }
.bar-val { font-size:12px; font-weight:800; color:var(--slate); width:48px; text-align:right; flex-shrink:0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cell { background:var(--cream); border:1px solid var(--cream3); border-radius:16px; padding:13px; }
.cell-lbl { font-size:11px; color:var(--slate3); font-weight:600; margin-bottom:4px; }
.cell-val { font-size:21px; font-weight:900; color:var(--slate); letter-spacing:-0.6px; }
.cell-chg { font-size:12px; font-weight:800; margin-top:3px; }
.cell-chg.r { color:var(--rose); }
.msg-zeno-txt {
  background:white; border:1px solid var(--cream3);
  border-radius:4px 22px 22px 22px; padding:15px 18px;
  font-size:15px; color:var(--slate); line-height:1.6;
  box-shadow:0 2px 8px rgba(45,49,66,0.05);
}
.msg-zeno-txt strong { color:var(--sage); font-weight:800; }
.followups { display:flex; flex-wrap:wrap; gap:8px; align-self:flex-start; padding:4px 0; }

.input-wrap {
  flex-shrink:0; padding:8px 14px 12px;
  background:rgba(245,242,237,0.97); backdrop-filter:blur(20px);
  border-top:1px solid var(--cream3);
}
.input-row {
  display:flex; align-items:center; gap:10px;
  background:white; border:1.5px solid var(--cream3);
  border-radius:24px; padding:11px 10px 11px 16px;
  box-shadow:0 2px 10px rgba(45,49,66,0.07); transition:all 0.2s;
}
.input-row:focus-within { border-color:var(--sage); box-shadow:0 0 0 4px rgba(74,123,111,0.12); }
.input {
  flex:1; background:none; border:none; outline:none;
  font-size:15px; color:var(--slate); font-family:var(--font);
  caret-color:var(--sage);
}
.input::placeholder { color:var(--slate3); }
.send-btn {
  width:36px; height:36px; background:var(--sage); border:none;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.2s; flex-shrink:0;
  opacity:0; transform:scale(0.6);
}
.send-btn.show { opacity:1; transform:scale(1); }
.send-btn:active { transform:scale(0.86); }
.send-btn svg { width:15px; height:15px; stroke:white; }

/* TRANSACTIONS */
#state-syncing { flex:1; min-height:0; display:flex; flex-direction:column; }
#state-calm { flex:1; min-height:0; display:flex; flex-direction:column; }

.tx-top-bar {
  flex-shrink:0; padding:10px 24px 10px;
  display:flex; align-items:center; justify-content:space-between;
}
.tx-top-title { font-size:26px; font-weight:900; color:var(--slate); letter-spacing:-0.7px; }
.tx-top-sub { font-size:13px; color:var(--slate3); margin-top:3px; }
.sync-btn {
  background:var(--sage-dim); border:none; border-radius:12px;
  padding:8px 14px; font-size:12px; font-weight:700;
  color:var(--sage); cursor:pointer; font-family:var(--font);
}

.calm-scroll {
  flex:1; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.calm-scroll::-webkit-scrollbar { display:none; }

.sync-body {
  flex:1; min-height:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:40px 32px;
}
.sync-ring { width:80px; height:80px; position:relative; margin-bottom:24px; flex-shrink:0; }
.sync-ring svg { width:80px; height:80px; }
.sync-ring-track { fill:none; stroke:var(--cream2); stroke-width:5; }
.sync-ring-fill {
  fill:none; stroke:var(--sage); stroke-width:5; stroke-linecap:round;
  stroke-dasharray:226; stroke-dashoffset:226;
  transform:rotate(-90deg); transform-origin:center;
  animation:syncFill 2s cubic-bezier(0.4,0,0.2,1) forwards;
}
@keyframes syncFill { to{stroke-dashoffset:20;} }
.sync-icon {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:26px; animation:syncPulse 1s ease-in-out infinite alternate;
}
@keyframes syncPulse {
  from{opacity:0.5;transform:translate(-50%,-50%) scale(0.9)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.sync-title { font-size:20px; font-weight:900; color:var(--slate); letter-spacing:-0.5px; margin-bottom:8px; text-align:center; }
.sync-sub { font-size:14px; color:var(--slate3); text-align:center; line-height:1.6; max-width:260px; }
.sync-progress { width:100%; max-width:240px; height:4px; background:var(--cream2); border-radius:100px; overflow:hidden; margin-top:24px; }
.sync-bar { height:100%; border-radius:100px; background:linear-gradient(90deg, var(--sage), var(--sage-light)); animation:syncBar 2s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes syncBar { from{width:0%} to{width:100%} }

.calm-hero {
  margin:12px 20px 0;
  background:linear-gradient(140deg, #EEF8F4 0%, #E5F2ED 100%);
  border:1.5px solid var(--mint2); border-radius:26px;
  padding:22px 20px; position:relative; overflow:hidden;
}
.calm-hero::before {
  content:''; position:absolute; top:-20px; right:-20px;
  width:100px; height:100px;
  background:radial-gradient(circle, rgba(74,123,111,0.1), transparent);
}
.calm-check {
  width:44px; height:44px; background:var(--sage); border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:12px;
  box-shadow:0 6px 18px rgba(74,123,111,0.25);
}
.calm-title { font-size:19px; font-weight:900; color:var(--slate); letter-spacing:-0.5px; margin-bottom:8px; line-height:1.2; }
.calm-desc { font-size:14px; color:var(--slate3); line-height:1.6; font-weight:500; }
.calm-desc strong { color:var(--slate); font-weight:800; }
.calm-stats {
  display:flex; gap:0; width:100%;
  border-top:1px solid var(--mint2); margin-top:16px; padding-top:14px;
}
.calm-stat { flex:1; }
.calm-stat+.calm-stat { border-left:1px solid var(--mint2); padding-left:14px; }
.calm-stat-val { font-size:20px; font-weight:900; color:var(--sage); letter-spacing:-0.6px; }
.calm-stat-lbl { font-size:11px; color:var(--slate3); font-weight:600; margin-top:2px; }

.attention-sep {
  display:flex; align-items:center; gap:12px; padding:20px 24px 12px;
}
.attention-sep-line { flex:1; height:1px; background:var(--cream3); }
.attention-sep-label {
  font-size:11px; font-weight:800; color:var(--slate3);
  letter-spacing:0.09em; text-transform:uppercase; white-space:nowrap;
}

.attention-card {
  margin:0 20px 12px; background:white; border:1.5px solid var(--cream3);
  border-radius:22px; overflow:hidden;
  box-shadow:0 3px 12px rgba(45,49,66,0.07);
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.attn-top { padding:18px 18px 10px; display:flex; align-items:flex-start; gap:14px; }
.attn-ico {
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.attn-info { flex:1; min-width:0; }
.attn-name { font-size:16px; font-weight:900; color:var(--slate); letter-spacing:-0.3px; }
.attn-date { font-size:12px; color:var(--slate4); font-weight:600; margin-top:1px; }
.attn-amount { font-size:17px; font-weight:900; color:var(--slate); letter-spacing:-0.4px; white-space:nowrap; }
.attn-reason {
  display:flex; align-items:flex-start; gap:8px; padding:0 18px 14px;
}
.attn-reason-txt { font-size:13px; color:var(--slate3); line-height:1.5; font-weight:500; }
.attn-reason-txt strong { color:var(--amber); font-weight:700; }
.attn-actions { display:flex; border-top:1px solid var(--cream2); }
.attn-skip {
  flex:1; padding:14px; text-align:center; font-size:14px; font-weight:700;
  color:var(--slate3); cursor:pointer; transition:background 0.15s;
  border-right:1px solid var(--cream2);
}
.attn-skip:active { background:var(--cream2); }
.attn-review {
  flex:1; padding:14px; text-align:center; font-size:14px; font-weight:800;
  color:var(--sage); cursor:pointer; transition:background 0.15s;
}
.attn-review:active { background:var(--sage-dim); }

.all-good {
  margin:16px 20px 0; background:var(--sage-dim2);
  border:1.5px dashed var(--mint2); border-radius:22px;
  padding:28px; display:flex; flex-direction:column;
  align-items:center; text-align:center; gap:10px;
}
.all-good-ico { font-size:36px; }
.all-good-title { font-size:17px; font-weight:900; color:var(--sage); letter-spacing:-0.3px; }
.all-good-desc { font-size:13px; color:var(--slate3); line-height:1.55; }

/* CONVERSATIONAL REVIEW */
.review-hdr {
  flex-shrink:0; padding:10px 20px 12px;
  display:flex; align-items:center; gap:12px;
}
.review-back {
  width:36px; height:36px; background:white; border:1.5px solid var(--cream3);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.15s;
  box-shadow:0 2px 8px rgba(45,49,66,0.06);
}
.review-back:active { background:var(--cream2); transform:scale(0.92); }
.review-back svg { width:16px; height:16px; stroke:var(--slate); }
.review-hdr-title { font-size:16px; font-weight:800; color:var(--slate); letter-spacing:-0.3px; }
.review-counter { font-size:12px; color:var(--slate4); font-weight:600; margin-left:auto; }

.review-scroll {
  flex:1; min-height:0; overflow-y:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.review-scroll::-webkit-scrollbar { display:none; }

.review-context {
  margin:0 20px 16px; background:var(--slate);
  border-radius:22px; padding:20px; position:relative; overflow:hidden;
}
.review-context::before {
  content:''; position:absolute; top:-20px; right:-20px;
  width:90px; height:90px;
  background:radial-gradient(circle, rgba(212,235,228,0.1), transparent);
}
.review-ctx-merchant { font-size:22px; font-weight:900; color:var(--cream); letter-spacing:-0.6px; margin-bottom:4px; }
.review-ctx-amount { font-size:16px; font-weight:700; color:rgba(255,255,255,0.55); letter-spacing:-0.4px; }
.review-ctx-date { font-size:12px; color:rgba(255,255,255,0.35); margin-top:4px; font-weight:600; }

.review-chat {
  padding:0 16px; display:flex; flex-direction:column; gap:14px;
}

.review-question {
  background:white; border:1px solid var(--cream3);
  border-radius:6px 22px 22px 22px; padding:16px 18px;
  box-shadow:0 2px 10px rgba(45,49,66,0.06);
  animation:slideIn 0.28s cubic-bezier(0.4,0,0.2,1);
}
.review-q-hdr { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.review-q-ava {
  width:26px; height:26px;
  background:linear-gradient(135deg, var(--mint2), var(--sage));
  border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-size:12px; flex-shrink:0;
}
.review-q-name { font-size:12px; font-weight:800; color:var(--sage); }
.review-q-txt { font-size:15px; color:var(--slate); line-height:1.55; }
.review-q-txt strong { color:var(--slate); font-weight:800; }

.review-user-reply {
  align-self:flex-end; background:var(--slate); color:var(--cream);
  border-radius:22px 22px 4px 22px; padding:13px 17px;
  font-size:15px; font-weight:600; max-width:77%; line-height:1.45;
  box-shadow:0 4px 14px rgba(45,49,66,0.18);
  animation:slideIn 0.28s cubic-bezier(0.4,0,0.2,1);
}

.review-parsed {
  background:white; border:1px solid var(--cream3);
  border-radius:6px 22px 22px 22px; padding:16px 18px;
  box-shadow:0 2px 10px rgba(45,49,66,0.06);
  animation:slideIn 0.28s cubic-bezier(0.4,0,0.2,1);
}
.review-parsed-intro { font-size:14px; color:var(--slate3); line-height:1.5; margin-bottom:12px; }
.parsed-items { display:flex; flex-direction:column; gap:8px; }
.parsed-item {
  display:flex; align-items:center; gap:10px;
  background:var(--cream); border-radius:12px; padding:10px 12px;
}
.parsed-item-emoji { font-size:18px; flex-shrink:0; }
.parsed-item-label { flex:1; font-size:14px; font-weight:700; color:var(--slate); }
.parsed-item-amount { font-size:14px; font-weight:800; color:var(--sage); }

.review-input-wrap {
  flex-shrink:0; padding:8px 14px 12px;
  background:rgba(245,242,237,0.97); backdrop-filter:blur(20px);
  border-top:1px solid var(--cream3);
}
.review-input-hint {
  font-size:12px; color:var(--slate3); font-weight:600;
  padding:0 4px 8px; line-height:1.5;
}
.review-input-row {
  display:flex; align-items:center; gap:10px;
  background:white; border:1.5px solid var(--cream3);
  border-radius:24px; padding:11px 10px 11px 16px;
  box-shadow:0 2px 10px rgba(45,49,66,0.07); transition:all 0.2s;
}
.review-input-row:focus-within { border-color:var(--sage); box-shadow:0 0 0 4px rgba(74,123,111,0.12); }
.review-input {
  flex:1; background:none; border:none; outline:none;
  font-size:15px; color:var(--slate); font-family:var(--font);
  caret-color:var(--sage);
}
.review-input::placeholder { color:var(--slate3); }
.review-send-btn {
  width:36px; height:36px; background:var(--sage); border:none;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.2s; flex-shrink:0;
  opacity:0; transform:scale(0.6);
}
.review-send-btn.show { opacity:1; transform:scale(1); }
.review-send-btn:active { transform:scale(0.86); }
.review-send-btn svg { width:15px; height:15px; stroke:white; }

.review-confirm-wrap {
  flex-shrink:0; padding:8px 14px 12px;
  background:rgba(245,242,237,0.97); backdrop-filter:blur(20px);
  border-top:1px solid var(--cream3);
}
.review-confirm-row { display:flex; gap:10px; }
.btn-confirm {
  flex:1; background:var(--sage); color:white; border:none;
  border-radius:16px; padding:16px; font-size:15px; font-weight:800;
  cursor:pointer; font-family:var(--font); transition:all 0.2s;
  box-shadow:0 6px 18px rgba(74,123,111,0.25);
}
.btn-confirm:active { transform:scale(0.97); opacity:0.9; }
.btn-edit {
  background:white; color:var(--slate3); border:1.5px solid var(--cream3);
  border-radius:16px; padding:16px 18px; font-size:14px; font-weight:700;
  cursor:pointer; font-family:var(--font); transition:all 0.2s;
}
.btn-edit:active { background:var(--cream2); }

@keyframes toastIn {
  0%{opacity:0;transform:translateX(-50%) translateY(10px)}
  60%{transform:translateX(-50%) translateY(-2px)}
  100%{opacity:1;transform:translateX(-50%) translateY(0)}
}
.toast {
  position:absolute; bottom:100px; left:50%; transform:translateX(-50%);
  background:var(--slate); color:white; padding:12px 20px; border-radius:100px;
  font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px;
  box-shadow:0 8px 24px rgba(45,49,66,0.25);
  animation:toastIn 0.35s cubic-bezier(0.4,0,0.2,1) forwards;
  z-index:300; white-space:nowrap; pointer-events:none;
}