/* ===== CSS VARIABLES & THEMES ===== */
:root{
  --bg:#f7f9fc;--surface:#fff;--ink:#0d1320;--ink-2:#3d4860;--ink-3:#7a869e;--ink-4:#aab4c8;
  --line:#e9edf4;--line-2:#f0f3f8;
  --blue:#2f6df0;--blue-2:#5b8df5;--blue-soft:#e8f0ff;--blue-tint:#f3f7ff;
  --pos:#1f9d6b;--pos-soft:#e6f6ef;--neg:#e0594f;--neg-soft:#fdeeec;--amber:#d99021;--amber-soft:#fbf2e1;
  --sh-sm:0 1px 2px rgba(13,19,32,.05),0 1px 3px rgba(13,19,32,.05);
  --sh-lg:0 -8px 30px rgba(13,19,32,.10);
  --r-sm:14px;
  --bg-glass: rgba(247,249,252,0.85);
}
:root[data-theme="midnight"]{
  --bg:#0e1118;--surface:#171b24;--ink:#eef2f8;--ink-2:#aab3c4;--ink-3:#6b748b;--ink-4:#454d5e;
  --line:#262c39;--line-2:#1e232e;
  --blue:#5b8df5;--blue-2:#6f9bf6;--blue-soft:#1b2436;--blue-tint:#161d2b;
  --pos:#3fc28d;--pos-soft:#15281f;--neg:#f0756b;--neg-soft:#2a1715;--amber:#e0a23a;--amber-soft:#2a2113;
  --sh-sm:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.3);
  --sh-lg:0 -8px 30px rgba(0,0,0,.45);
  --bg-glass: rgba(14,17,24,0.85);
}
:root[data-theme="linen"]{
  --bg:#f3ecdf;--surface:#fcf8f0;--ink:#2b2520;--ink-2:#5c5346;--ink-3:#9a8e7b;--ink-4:#b8ac96;
  --line:#e6dac6;--line-2:#efe6d7;
  --blue:#c2683b;--blue-2:#dd9468;--blue-soft:#f1e1d2;--blue-tint:#f7ede2;
  --pos:#5a8c4f;--pos-soft:#e9efde;--neg:#c0503f;--neg-soft:#f3e1dc;--amber:#b07d2a;--amber-soft:#f0e6cf;
 --bg-glass: rgba(243,236,223,0.85);
}
:root[data-theme="forest"]{
  --bg:#edf3ef;--surface:#fff;--ink:#142019;--ink-2:#3c4d44;--ink-3:#7c9087;--ink-4:#a3b3a9;
  --line:#dbe7df;--line-2:#e8f0eb;
  --blue:#1d9e75;--blue-2:#34b88c;--blue-soft:#d8f0e4;--blue-tint:#e7f5ee;
  --pos:#1d9e75;--pos-soft:#e1f5ee;--neg:#d0584c;--neg-soft:#f7e5e2;--amber:#c2832a;--amber-soft:#f0e6cf;
--bg-glass: rgba(237,243,239,0.85);}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
button{font-family:inherit;cursor:pointer;font-weight:600;transition:.15s;border:none;background:none}

.app{max-width:520px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);position:relative; opacity:1; transition:opacity 0.4s;}
.app.hidden{display:none; opacity:0;}

/* ===== TOP BAR & SEARCH ===== */
.top {
  position: sticky; top: 0; z-index: 20; 
  background: var(--bg-glass); 
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px); 
  border-bottom: 1px solid var(--line); 
  padding: 14px 18px 12px; display: flex; justify-content: space-between; align-items: center;
}
.brand{font-family:'Fraunces',serif;font-weight:500;font-size:22px;letter-spacing:-.3px; color:var(--ink);}
.brand .dim{color:var(--blue)}
.chip{font-size:12px;font-weight:700;padding:8px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2);box-shadow:var(--sh-sm);}
.chip:active{transform:scale(0.95);}

.search-wrap { padding: 12px 18px 0; background: var(--bg); position: relative; z-index: 10; }
.search-wrap input { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-family: inherit; font-size: 14px; font-weight: 500; box-shadow: var(--sh-sm); outline: none; transition: border-color 0.2s; color: var(--ink); }
.search-wrap input:focus { border-color: var(--blue); }

/* ===== FEED & BUDGET ===== */
.feed{flex:1;padding:12px 18px 150px;overflow-y:auto}
.empty{text-align:center;padding:60px 24px;color:var(--ink-3)}
.empty h2{font-family:'Fraunces',serif;font-weight:500;font-size:24px;color:var(--ink);margin-bottom:10px}
.empty p{font-size:14px;line-height:1.65;max-width:340px;margin:0 auto 18px}

.budget-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px; box-shadow: var(--sh-sm); margin-bottom: 24px; }
.fin-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center; }
.fin-col { display: flex; flex-direction: column; background: var(--bg); padding: 8px; border-radius: 10px; border: 1px solid var(--line); }
.fin-lbl { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ink-3); margin-bottom: 4px; }
.fin-val { font-size: 14px; font-weight: 700; color: var(--ink); }
.fin-val.pos { color: var(--pos); }
.fin-val.neg { color: var(--neg); }
.fin-val.ink { color: var(--ink); }
.budget-card .blab { font-size: 12px; font-weight: 700; color: var(--ink-2); display: flex; justify-content: space-between; margin-top: 14px; margin-bottom: 6px; }
.budget-card .bbar { height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; }
.budget-card .bbar i { display: block; height: 100%; border-radius: 4px; background: var(--blue-2); transition: width 0.4s; }
.budget-card.over .bbar i { background: var(--neg); }

/* ===== SPINE & NODES ===== */
.spine{position:relative; margin-top:10px;}
.spine:before{content:"";position:absolute;left:21px;top:0;bottom:30px;width:2px;background:var(--line)}

.month-cap { position:relative; padding: 16px 0 16px 52px; font-family:'Fraunces',serif; font-size:18px; font-weight:500; color:var(--ink); z-index:2; }
.month-cap:before { content:""; position:absolute; left:16px; top:24px; width:12px; height:2px; background:var(--ink-4); border-radius:2px; }

.nowmark{position:relative;padding:16px 0 16px 52px; z-index:2;}
.nowmark .nd{position:absolute;left:13px;top:10px;width:18px;height:18px;border-radius:5px;background:var(--blue); box-shadow: 0 0 0 4px var(--bg);}
.nowmark .nl{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--blue);text-transform:uppercase; line-height:18px;}

.srow{position:relative;padding:0 0 16px 52px;min-height:30px}
.node-dot{position:absolute;left:13px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--surface);border:3px solid var(--blue-2);z-index:2}
.node-dot.pos{border-color:var(--pos)}.node-dot.neg{border-color:var(--neg)}.node-dot.open{border-color:var(--ink-4);border-style:dashed}
.node-dot.sugg{border-color:var(--blue);border-style:dotted; opacity:0.6;}
.node-dot.past{border-color:var(--ink-4); background:var(--bg);}

.scard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;box-shadow:var(--sh-sm);transition:.12s;cursor:pointer;}
.scard:active{transform:scale(.985)}
.scard .ti{font-size:15px;font-weight:700;letter-spacing:-.15px;line-height:1.3; color:var(--ink);}
.scard .meta{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
.dchip{font-size:10px;font-weight:800;padding:3px 9px;border-radius:11px;color:#fff; text-transform: uppercase; letter-spacing: 0.3px;}
.dt{font-size:11px;color:var(--ink-4);font-weight:600}

/* Compact / Past Styling */
.scard.past { padding: 12px 14px; background:var(--bg); border-color:transparent; box-shadow:none; opacity: 0.85; }
.scard.past .ti { font-size:14px; font-weight:600; color:var(--ink-2); }
/* Overdue / Left Behind styling */
.scard.overdue { background: var(--bg); box-shadow: none; opacity: 0.65; border-style: dashed; }
.node-dot.overdue { opacity: 0.5; }
/* Phantom / Suggested styling */
.scard.suggested { border: 1.5px dashed var(--blue-2); background: var(--blue-tint); }
.sugg-actions { display:flex; gap:8px; margin-top:12px; }
.sugg-btn { flex:1; padding:8px; border-radius:8px; font-size:12px; font-weight:700; text-align:center; }
.sugg-btn.acc { background:var(--blue); color:#fff; }
.sugg-btn.rej { background:var(--surface); border:1px solid var(--line); color:var(--ink-2); }

/* Resolved Notes */
.res-note { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface); padding: 8px 12px; border-radius: 8px; margin-top: 10px; border-left: 3px solid var(--pos); line-height: 1.4; border:1px solid var(--line); box-shadow:var(--sh-sm);}

/* Branch Options UI for feed */
/* Branch zone — fork options as sprouting branches */
.node-dot.fork{border-color:var(--blue);border-style:solid;}
.scard.forkcard{border-color:var(--blue-2);}
.branchzone{margin-top:10px;display:flex;flex-direction:column;gap:7px;}
.br-row{display:flex;align-items:center;gap:0;}
.br-stub{width:14px;height:14px;border-left:2px solid var(--blue-2);border-bottom:2px solid var(--blue-2);border-bottom-left-radius:7px;flex:none;margin-left:2px;margin-right:6px;align-self:flex-start;margin-top:2px;}
.br-stub.ghost{border-color:var(--line);border-style:dashed;}
.br-pill{font-size:12px;font-weight:600;padding:7px 12px;border-radius:9px;line-height:1.3;}
.br-pill.live{background:var(--blue-tint);border:1px solid var(--blue-2);color:var(--blue);}
.br-pill.chosen{background:var(--blue-soft);border:1px solid var(--blue);color:var(--blue);font-weight:700;}
.br-pill.ghost{background:transparent;border:1px dashed var(--line);color:var(--ink-4);text-decoration:line-through;}

/* ===== COMPOSER DOCK ===== */
.dock{position:fixed;bottom:0;left:0;right:0;z-index:30;max-width:520px;margin:0 auto;background:var(--surface);border-top:1px solid var(--line);box-shadow:var(--sh-lg);padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0}
.dock .composer{display:flex;gap:9px;align-items:flex-end}
.dock textarea{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);resize:none;line-height:1.4;max-height:120px}
.dock textarea:focus{outline:none;border-color:var(--blue);background:var(--surface)}
.dockhint{font-size:11px;color:var(--ink-4);font-weight:600;margin:0 0 8px 4px;}
.sendbtn{width:46px;height:46px;border-radius:14px;background:var(--blue);color:#fff;font-size:19px;flex:none;display:flex;align-items:center;justify-content:center}

/* ===== BOTTOM SHEET & DETAILS ===== */
.scrim{position:fixed;inset:0;background:rgba(13,19,32,.4);backdrop-filter:blur(3px);z-index:40;opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:45;max-width:520px;margin:0 auto;background:var(--surface);border-radius:22px 22px 0 0;box-shadow:var(--sh-lg);transform:translateY(100%);transition:transform .3s cubic-bezier(.32,.72,0,1);max-height:92vh;display:flex;flex-direction:column}
.sheet.on{transform:translateY(0)}
.grab{width:38px;height:4px;border-radius:3px;background:var(--line);margin:10px auto 4px}
.sheet h3{font-family:'Fraunces',serif;font-weight:500;font-size:22px;padding:8px 22px 3px;color:var(--ink)}
.sheet .hint{padding:0 22px 14px;color:var(--ink-3);font-size:13px;line-height:1.5;font-weight:500}
.sheet .body{overflow-y:auto;padding:2px 22px 20px;flex:1}
.sheet .foot{padding:13px 22px calc(13px + env(safe-area-inset-bottom));border-top:1px solid var(--line);display:flex;gap:10px}

.btn{border-radius:13px;padding:13px;font-size:14px;font-weight:700;text-align:center;flex:1;}
.btn.primary{background:var(--blue);color:#fff}
.btn.sec{background:var(--bg);color:var(--ink-2);border:1px solid var(--line)}
.btn.danger{background:var(--neg-soft);color:var(--neg); border:none;}

label.f{display:block;font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);margin:20px 0 8px;font-weight:700}
input.txt,textarea.txt{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:15px;font-weight:600;padding:12px 13px;border-radius:11px}
input.txt:focus,textarea.txt:focus{outline:none;border-color:var(--blue);background:var(--surface)}
input.seamless { border:none; background:transparent; width:100%; font-family:inherit; font-size:15px; font-weight:700; color:var(--ink); padding:4px 0; border-bottom:1px dashed transparent; border-radius:0; margin-bottom:4px;}
input.seamless:focus { outline:none; border-bottom-color:var(--blue); }

.resolve-box { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; margin-top:16px; box-shadow:var(--sh-sm);}
.insight{margin-top:11px;padding:14px;border-radius:12px;font-size:13px;line-height:1.5;font-weight:500; background:var(--blue-tint);border:1px solid var(--blue-soft);color:var(--ink-2)}
.insight .hh{font-size:10px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;display:block;margin-bottom:6px;opacity:.8; color:var(--blue)}

.step-detail { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; overflow: hidden; }
.step-detail summary { font-weight: 600; font-size: 14px; padding: 14px; cursor: pointer; color: var(--ink); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.step-detail summary::-webkit-details-marker { display: none; }
.step-detail summary::after { content: '▾'; color: var(--ink-3); }
.step-detail[open] summary::after { content: '▴'; }
.step-content { padding: 0 14px 14px 14px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; border-top:1px solid var(--line); margin-top:4px; padding-top:10px; }

/* Custom Round Checkboxes - ENHANCED VISIBILITY */
.step-chk {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; 
  height: 22px;
  border: 2.5px solid var(--ink-4); 
  border-radius: 50%;
  background: var(--surface); 
  cursor: pointer;
  position: relative;
  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
  flex: none; 
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.step-chk:checked {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 2px 6px rgba(47, 109, 240, 0.3);
}
.step-chk:checked::after {
  content: '✓';
  position: absolute;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -48%);
}
/* ===== CHAT / ASSISTANT ===== */
.loading{display:flex;align-items:center;gap:11px;padding:30px 20px;color:var(--ink-3);font-size:14px;font-weight:600;justify-content:center}
.spin{width:18px;height:18px;border:2.5px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.thread{display:flex;flex-direction:column;gap:8px;margin-top:6px; overflow-y:auto; padding-bottom:8px; max-height:400px;}
.msg{font-size:14.5px;line-height:1.5;padding:12px 14px;border-radius:16px;font-weight:500;max-width:88%}
.msg.user{background:var(--bg); border:1px solid var(--line); color:var(--ink);align-self:flex-end;border-bottom-right-radius:4px}
.msg.agent{background:var(--blue-soft);color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px}

.chatbar{display:flex;gap:8px;margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.chatbar input{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:14px;font-family:inherit;font-size:15px;font-weight:500;color:var(--ink)}
.chatbar button{background:var(--blue);color:#fff;border-radius:11px;padding:0 20px;font-size:18px;font-weight:700;}

/* ===== WIZARD UI ===== */
.wizard { position:fixed; inset:0; z-index:100; background:var(--bg); display:none; flex-direction:column; justify-content:center; align-items:center; padding:24px; opacity:0; transition:opacity 0.4s; }
.wizard.on { display:flex; opacity:1; }
.wiz-content { max-width:400px; width:100%; display:flex; flex-direction:column; gap:20px; }
.wiz-step { display:none; flex-direction:column; gap:16px; animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.wiz-step.active { display:flex; }
@keyframes slideUp { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:translateY(0); } }
.wiz-step h2 { font-family:'Fraunces',serif; font-size:32px; color:var(--ink); line-height:1.15; letter-spacing:-0.5px; }
.wiz-step p { font-size:15.5px; line-height:1.6; color:var(--ink-2); font-weight:500; }
.wiz-step textarea { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px; font-family:inherit; font-size:16px; font-weight:500; color:var(--ink); resize:none; min-height:130px; box-shadow:var(--sh-sm); line-height:1.5; }
.wiz-btn { 
  background: var(--ink); color: var(--surface); 
  font-size: 16px; font-weight: 700; padding: 16px; border-radius: 14px; margin-top: 8px; text-align: center; box-shadow: var(--sh-sm); 
}
.wiz-btn.primary {
  background: var(--blue); color: #fff; border: none;
}
.wiz-dots { display:flex; gap:6px; margin-top:20px; justify-content:center; }
.wiz-dot { width:8px; height:8px; border-radius:50%; background:var(--line); transition:0.3s; }
.wiz-dot.active { background:var(--blue); transform:scale(1.2); }