/* ==========================================================================
   ai.css — AI Personal Finance модулінің компоненттері
   (auth, advisor, quick input, expenses, events, chat)
   ========================================================================== */

/* ---------------- AUTH ---------------- */
body.is-auth{ background:
  radial-gradient(120% 100% at 80% -10%, color-mix(in srgb,var(--accent) 16%, transparent) 0%, transparent 55%),
  var(--bg); }
.auth{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth__card{
  width:min(420px,100%); background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:28px; box-shadow:var(--shadow-lg);
}
.auth__brand{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.auth__title{ font-size:18px; font-weight:800; letter-spacing:-.02em; }
.auth__sub{ font-size:12px; color:var(--accent); font-weight:600; letter-spacing:.01em; }
.auth__tabs{ display:flex; gap:4px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:12px; padding:4px; margin-bottom:20px; }
.auth__tab{ flex:1; border:0; background:transparent; color:var(--muted); cursor:pointer;
  padding:9px; border-radius:9px; font-weight:600; font-size:13.5px; transition:all .15s; }
.auth__tab.is-active{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.auth__status{ font-size:12.5px; margin-top:12px; text-align:center; color:var(--muted); min-height:18px; }
.auth__status--error{ color:var(--danger); }
.auth__status--warn{ color:var(--warn); }
.auth__divider{ display:flex; align-items:center; gap:12px; margin:20px 0 14px; color:var(--muted-2); font-size:12px; }
.auth__divider::before,.auth__divider::after{ content:''; flex:1; height:1px; background:var(--border); }
.auth__note{ font-size:11.5px; color:var(--muted-2); text-align:center; margin-top:14px; line-height:1.55; }

/* ---------------- User chip ---------------- */
.user-chip{ display:flex; align-items:center; gap:9px; padding:9px 10px; margin-top:10px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); }
.user-chip__ava{ width:28px; height:28px; flex:0 0 28px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:var(--accent-ink); font-weight:800; font-size:13px; }
.user-chip__name{ font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }

/* ---------------- AI Advisor ---------------- */
.card--ai{
  background:
    radial-gradient(130% 150% at 0% 0%, color-mix(in srgb,var(--info) 14%, transparent) 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 0%, var(--accent-soft) 0%, transparent 50%),
    var(--surface);
  border-color:color-mix(in srgb,var(--accent) 24%, var(--border));
}
.advisor__principle{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:20px;
  background:var(--accent-soft); color:var(--accent); font-size:12px; font-weight:700;
  letter-spacing:.01em; margin-bottom:12px;
}
.advisor__principle-icon{ font-size:14px; }
.advisor__headline{ font-size:17px; line-height:1.5; font-weight:600; letter-spacing:-.01em; margin-bottom:14px; }
.advisor__insights{ display:flex; flex-direction:column; gap:8px; }
.insight{ display:flex; gap:10px; align-items:flex-start; font-size:13px; padding:10px 13px;
  border-radius:var(--r); background:var(--surface-2); border:1px solid var(--border); }
.insight__icon{ flex:0 0 auto; }
.insight--warn{ background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 22%,transparent); color:var(--warn); }
.insight--ok{ background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 22%,transparent); color:var(--ok); }
.insight--danger{ background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 22%,transparent); color:var(--danger); }
.advisor__actions{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

/* ---------------- Quick expense form ---------------- */
.card--quick{ padding:18px 20px; }
.quick-form__label{ display:block; font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:8px; }
.quick-form__row{ display:flex; gap:10px; }
.quick-form__row .input{ flex:1; }
.input--lg{ font-size:16px; padding:13px 15px; }
.quick-form__icon{ flex:0 0 auto; gap:6px; }
.quick-form__hints{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.quick-form__hints span{ font-size:11.5px; color:var(--muted-2); background:var(--surface-2);
  border:1px solid var(--border); padding:3px 9px; border-radius:7px; }
.btn.is-busy{ opacity:.6; pointer-events:none; }

/* ---------------- Recommendations ---------------- */
.recs{ display:grid; gap:12px; }
.rec{ display:flex; gap:14px; padding:15px 16px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r); align-items:flex-start; }
.rec__num{ width:26px; height:26px; flex:0 0 26px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:var(--accent-ink);
  font-weight:800; font-size:13px; }
.rec__body{ flex:1; min-width:0; }
.rec__title{ font-weight:700; font-size:14px; margin-bottom:4px; letter-spacing:-.01em; }
.rec__text{ font-size:12.8px; color:var(--muted); line-height:1.55; }
.rec__body .btn{ margin-top:10px; }

/* ---------------- Month / unexpected / goal ---------------- */
.unexp-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:6px; }
.goal-next{ display:flex; flex-direction:column; gap:8px; }
.goal-next__step{ font-size:11.5px; color:var(--accent); font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.goal-next__label{ font-size:15.5px; font-weight:700; letter-spacing:-.01em; }
.goal-next__values{ display:flex; align-items:baseline; gap:10px; font-size:20px; font-weight:800; }
.goal-next__values span{ color:var(--muted-2); font-size:16px; }
.goal-next .btn{ align-self:flex-start; margin-top:4px; }
.report-head{ font-size:12.5px; color:var(--muted); margin-bottom:14px; }

/* ---------------- Quick options sheet ---------------- */
.quick-options{ display:flex; flex-direction:column; gap:10px; }
.quick-option{ display:flex; align-items:center; gap:14px; padding:14px 16px; text-align:left;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r);
  cursor:pointer; transition:all .15s; width:100%; }
.quick-option:hover{ border-color:var(--accent); background:var(--surface-3); }
.quick-option__icon{ font-size:24px; flex:0 0 auto; }
.quick-option b{ display:block; font-size:14.5px; font-weight:650; }
.quick-option__sub{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }

/* ---------------- Detected (confirmation) ---------------- */
.detected{ text-align:center; padding:22px 16px; background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 26%, transparent); border-radius:var(--r-lg); margin-bottom:16px; }
.detected__amount{ font-size:34px; font-weight:800; letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums; }
.detected__cat{ font-size:16px; font-weight:650; margin-top:6px; }
.detected__meta{ font-size:12.5px; color:var(--muted); margin-top:8px; }
.detected__raw{ font-size:12px; color:var(--muted-2); margin-top:10px; font-style:italic; }
.confirm-form{ margin-top:14px; }
.confirm-form.is-collapsed{ display:none; }
.receipt-items{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r);
  padding:14px; margin-bottom:14px; }
.receipt-items__head{ font-size:12px; color:var(--muted); font-weight:600; margin-bottom:10px;
  text-transform:uppercase; letter-spacing:.04em; }
.receipt-item{ display:flex; justify-content:space-between; gap:12px; font-size:13px;
  padding:6px 0; border-bottom:1px solid var(--border); }
.receipt-item:last-of-type{ border-bottom:0; }

/* ---------------- OCR / voice ---------------- */
.ocr-loading{ text-align:center; padding:20px 0; }
.spinner{ width:38px; height:38px; margin:0 auto 16px; border-radius:50%;
  border:3px solid var(--surface-3); border-top-color:var(--accent); animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.voice-box{ text-align:center; padding:12px 0; }
.voice-pulse{ font-size:44px; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.12); opacity:1 } }
.voice-heard{ font-size:15px; font-weight:600; margin-top:10px; min-height:22px; }

/* ---------------- Expense list ---------------- */
.exp-list{ display:flex; flex-direction:column; }
.day-head{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 2px 8px;
  font-size:12px; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); margin-bottom:4px; }
.day-head strong{ color:var(--text); font-variant-numeric:tabular-nums; }
.exp-row{ display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:var(--r-sm);
  transition:background .15s; }
.exp-row:hover{ background:var(--surface-2); }
.exp-row--unexp{ border-left:2px solid var(--warn); }
.exp-row__icon{ font-size:19px; flex:0 0 26px; text-align:center; }
.exp-row__main{ flex:1; min-width:0; }
.exp-row__title{ font-size:14px; font-weight:600; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exp-row__meta{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; font-size:11.5px; color:var(--muted); margin-top:3px; }
.exp-row__amount{ font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.exp-row__actions{ display:flex; gap:5px; opacity:0; transition:opacity .15s; }
.exp-row:hover .exp-row__actions{ opacity:1; }
.tag--unexp{ background:var(--warn-soft); color:var(--warn); }
.tag--src{ background:transparent; color:var(--muted-2); border:1px solid var(--border); }
.cat-emoji{ margin-right:9px; }

/* ---------------- Recurring ---------------- */
.rec-summary{ font-size:13px; color:var(--muted); margin-bottom:12px; }
.rec-row{ display:flex; align-items:center; gap:12px; padding:11px 10px; border-radius:var(--r-sm);
  border-bottom:1px solid var(--border); }
.rec-row:last-child{ border-bottom:0; }
.rec-row.is-muted{ opacity:.45; }
.switch{ position:relative; display:inline-block; width:38px; height:22px; flex:0 0 38px; cursor:pointer; }
.switch input{ opacity:0; width:0; height:0; position:absolute; }
.switch__track{ position:absolute; inset:0; background:var(--surface-3); border-radius:20px; transition:.2s; }
.switch__track::before{ content:''; position:absolute; width:16px; height:16px; left:3px; top:3px;
  background:var(--muted); border-radius:50%; transition:.2s; }
.switch input:checked + .switch__track{ background:var(--accent-soft); }
.switch input:checked + .switch__track::before{ transform:translateX(16px); background:var(--accent); }

/* ---------------- Events / fund ---------------- */
.fund__stats{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:12px; flex-wrap:wrap; }
.fund__label{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:2px; }
.fund__value{ font-size:30px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.fund__side{ display:flex; gap:22px; }
.fund__side strong{ font-size:15px; font-variant-numeric:tabular-nums; }
.fund__form{ margin-top:18px; padding-top:18px; border-top:1px solid var(--border);
  display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.fund__form .form-actions{ grid-column:1 / -1; margin-top:0; }
.events-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:var(--gap); }
.event{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r);
  padding:16px; display:flex; flex-direction:column; gap:12px; }
.event--over{ border-color:color-mix(in srgb,var(--danger) 35%, var(--border)); }
.event__head{ display:flex; gap:12px; align-items:flex-start; }
.event__emoji{ font-size:26px; flex:0 0 auto; }
.event__title{ font-size:15px; font-weight:700; }
.event__date{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.event__actions{ margin-left:auto; display:flex; gap:6px; }
.event__rows{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.event .btn{ align-self:flex-start; }
.emoji-picker{ display:flex; flex-wrap:wrap; gap:6px; }
.emoji-pick{ width:38px; height:38px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface-2); font-size:19px; cursor:pointer; transition:all .15s; }
.emoji-pick:hover{ border-color:var(--accent); }
.emoji-pick.is-active{ background:var(--accent-soft); border-color:var(--accent); }

/* ---------------- Chat ---------------- */
.view--chat{ height:100%; }
.card--chat{ display:flex; flex-direction:column; min-height:min(72vh,720px); }
.chat-messages{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:14px;
  padding:6px 2px 14px; min-height:220px; }
.chat-intro{ text-align:center; padding:36px 20px; color:var(--muted); }
.chat-intro__icon{ font-size:40px; margin-bottom:12px; }
.chat-intro h3{ font-size:16px; color:var(--text); margin-bottom:8px; }
.chat-intro p{ font-size:13px; max-width:420px; margin:0 auto; line-height:1.6; }
.chat-msg{ display:flex; gap:10px; max-width:88%; }
.chat-msg--user{ align-self:flex-end; }
.chat-msg--ai{ align-self:flex-start; }
.chat-msg__ava{ width:30px; height:30px; flex:0 0 30px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); font-size:15px; }
.chat-msg__body{ padding:12px 15px; border-radius:16px; font-size:13.5px; line-height:1.6; }
.chat-msg--user .chat-msg__body{ background:linear-gradient(140deg,var(--accent),var(--accent-2));
  color:var(--accent-ink); border-bottom-right-radius:5px; font-weight:500; }
.chat-msg--ai .chat-msg__body{ background:var(--surface-2); border:1px solid var(--border);
  border-bottom-left-radius:5px; }
.chat-msg__body b{ font-weight:700; }
.chat-msg__body code{ background:var(--surface-3); padding:1px 6px; border-radius:5px; font-size:12px; }
.chat-li{ padding-left:4px; }
.chat-gap{ height:8px; }
.chat-suggestions{ display:flex; gap:8px; overflow-x:auto; padding:12px 0; border-top:1px solid var(--border);
  scrollbar-width:thin; }
.chip{ white-space:nowrap; padding:7px 13px; border-radius:20px; border:1px solid var(--border);
  background:var(--surface-2); color:var(--muted); font-size:12.5px; cursor:pointer; transition:all .15s; }
.chip:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.chat-form{ display:flex; gap:10px; padding-top:12px; }
.chat-form .input{ flex:1; }
.chat-form .btn{ padding:11px 16px; }
.typing{ display:inline-flex; gap:4px; align-items:center; height:18px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:blink 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.2s } .typing i:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }

/* ---------------- Budget over ---------------- */
.table tbody tr.is-over td{ background:color-mix(in srgb,var(--danger) 6%, transparent); }
.budget-usage{ display:flex; flex-direction:column; gap:4px; align-items:flex-end; min-width:110px; }
.budget-usage .bar{ width:100%; margin:0; }
.budget-usage__label{ font-size:11px; color:var(--muted); white-space:nowrap; }

/* ---------------- FAB (mobile) ---------------- */
.fab{ display:none; position:fixed; right:16px; z-index:52;
  bottom:calc(78px + env(safe-area-inset-bottom));
  width:54px; height:54px; border-radius:18px; border:0; cursor:pointer;
  background:linear-gradient(140deg,var(--accent),var(--accent-2)); color:var(--accent-ink);
  box-shadow:0 12px 28px -10px var(--accent), var(--shadow-lg); }
.fab svg{ width:26px; height:26px; margin:0 auto; }

/* Recurring топтары */
.rec-group{ display:flex; align-items:baseline; gap:8px; padding:14px 2px 8px;
  border-bottom:1px solid var(--border); margin-bottom:4px; flex-wrap:wrap; }
.rec-group__title{ font-size:12.5px; font-weight:700; }
.rec-group__hint{ font-size:11px; color:var(--muted-2); }
.rec-group:first-child{ padding-top:4px; }