/* ==========================================================================
   MINDOC AI — Hi-fi prototype styles. Builds on colors_and_type.css tokens
   and follows the support-portal kit grammar (cards, ask box, thread, dots,
   warm shadows, orange-ring focus). SAV technique console + onboarding flow.
   ========================================================================== */

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font-body); background:var(--page); color:var(--ink);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--mindoc-orange); color:#fff; }
button{ font-family:inherit; } a{ color:inherit; text-decoration:none; }
.ti{ line-height:1; display:inline-flex; }

/* ---- app root: device frame is handled by JS scaling-free fluid layout - */
#root{ min-height:100%; }

/* ---- logo ------------------------------------------------------------ */
.logo{ font-family:var(--font-display); font-style:italic; font-weight:700;
  letter-spacing:.01em; display:inline-flex; align-items:center; white-space:nowrap; line-height:1; cursor:pointer; }
.logo .ai{ color:var(--mindoc-orange); margin-left:.18em; }
.logo .dash{ color:var(--mindoc-orange); display:inline-flex; margin-left:.05em; transform:skewX(-12deg); align-items:center; }

/* ---- buttons --------------------------------------------------------- */
.btn{ font-family:var(--font-body); font-size:15px; font-weight:600; border:1px solid transparent;
  border-radius:var(--r-md); padding:12px 22px; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; gap:9px; transition:.16s ease; white-space:nowrap; }
.btn i{ font-size:18px; }
.btn-primary{ background:var(--mindoc-orange); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--mindoc-orange-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-primary:active{ background:var(--mindoc-orange-press); transform:translateY(0); }
.btn-soft{ background:var(--mindoc-tint); color:var(--mindoc-orange-press); }
.btn-soft:hover{ background:var(--mindoc-tint-2); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--faint); background:var(--surface); }
.btn-dark{ background:var(--ink); color:#fff; } .btn-dark:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-sm{ padding:8px 15px; font-size:13px; border-radius:var(--r-sm); } .btn-sm i{ font-size:16px; }
.btn-lg{ padding:15px 28px; font-size:16px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-link{ background:none; border:none; color:var(--mindoc-orange-press); font-weight:600; padding:0;
  cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:gap .16s; font-size:14px; }
.btn-link i{ font-size:16px; } .btn-link:hover{ gap:9px; }
.icon-btn{ width:38px; height:38px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--muted); transition:.14s; }
.icon-btn:hover{ color:var(--ink); border-color:var(--faint); }
.icon-btn i{ font-size:19px; }

/* ---- badges ---------------------------------------------------------- */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 12px; border-radius:var(--r-pill); white-space:nowrap; }
.badge i{ font-size:14px; }
.badge.sm{ font-size:11px; padding:3px 9px; } .badge.sm i{ font-size:12px; }
.b-open{ background:var(--mindoc-tint); color:var(--mindoc-orange-press); }
.b-ai{ background:var(--mindoc-tint); color:var(--mindoc-orange-press); }
.b-wait{ background:var(--danger-bg); color:var(--danger-ink); }
.b-done{ background:var(--success-bg); color:var(--success-ink); }
.b-info{ background:var(--info-bg); color:var(--info-ink); }
.b-warn{ background:var(--warning-bg); color:var(--warning-ink); }
.b-neutral{ background:var(--line-soft); color:var(--muted); }

/* ---- orbs ------------------------------------------------------------ */
.ai-orb{ width:32px; height:32px; border-radius:50%; background:var(--mindoc-orange); display:flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.ai-orb i{ font-size:18px; } .ai-orb.sm{ width:26px; height:26px; } .ai-orb.sm i{ font-size:14px; }
.ai-orb.lg{ width:46px; height:46px; } .ai-orb.lg i{ font-size:24px; }
.user-orb{ width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; font-size:12px; font-weight:600; }
.user-orb.sm{ width:26px; height:26px; font-size:10px; }

/* ---- icon chip ------------------------------------------------------- */
.icon-chip{ width:46px; height:46px; border-radius:13px; background:var(--mindoc-tint); display:flex; align-items:center; justify-content:center; color:var(--mindoc-orange); flex:none; }
.icon-chip i{ font-size:23px; } .icon-chip.sm{ width:36px; height:36px; border-radius:10px; } .icon-chip.sm i{ font-size:18px; }

/* ---- cards ----------------------------------------------------------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; transition:.18s ease; }
.card.pad-sm{ padding:16px 18px; } .card.pad-lg{ padding:28px 30px; }
.card.hoverable{ cursor:pointer; }
.card.hoverable:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-soft); }
.card.sel{ border-color:var(--mindoc-orange); box-shadow:var(--ring); }
.card.tint{ background:var(--mindoc-tint); border-color:transparent; }

/* ---- type roles ------------------------------------------------------ */
.display{ font-family:var(--font-display); font-style:italic; font-weight:700; letter-spacing:-.02em; line-height:1.04; }
.display .accent{ color:var(--mindoc-orange); }
.h1{ font-family:var(--font-display); font-style:italic; font-weight:700; font-size:34px; letter-spacing:-.02em; line-height:1.08; }
.h2{ font-family:var(--font-display); font-weight:600; font-size:24px; letter-spacing:-.015em; }
.h3{ font-family:var(--font-display); font-weight:600; font-size:18px; }
.h4{ font-family:var(--font-display); font-weight:600; font-size:15px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mindoc-orange-press); background:var(--mindoc-tint); padding:7px 14px; border-radius:var(--r-pill); }
.kicker{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.mut{ color:var(--muted); } .faint{ color:var(--faint); } .mono{ font-family:var(--font-mono); }
.lead{ font-size:17px; color:var(--muted); line-height:1.6; }
.t13{ font-size:13px; } .t14{ font-size:14px; } .t15{ font-size:15px; } .t12{ font-size:12px; }
.fw5{ font-weight:500; } .fw6{ font-weight:600; }

/* ---- fields ---------------------------------------------------------- */
.ask{ display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:13px 13px 13px 20px; transition:.16s; box-shadow:var(--shadow-sm); }
.ask:focus-within{ border-color:var(--mindoc-orange); box-shadow:var(--ring); }
.ask i{ color:var(--faint); font-size:20px; }
.ask input{ border:none; outline:none; flex:1; font-size:15px; font-family:var(--font-body); background:none; color:var(--ink); min-width:0; }
.ask input::placeholder{ color:var(--faint); }
.field{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); display:flex; align-items:center; gap:10px; padding:11px 14px; transition:.16s; }
.field:focus-within{ border-color:var(--mindoc-orange); box-shadow:var(--ring); }
.field i{ color:var(--faint); font-size:18px; } .field input{ border:none; outline:none; flex:1; font-size:14px; font-family:var(--font-body); background:none; color:var(--ink); min-width:0; }
.field input::placeholder{ color:var(--faint); }
.label{ font-size:13px; font-weight:600; color:var(--muted); margin-bottom:7px; display:block; }

/* ---- chips ----------------------------------------------------------- */
.chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 16px;
  font-size:14px; cursor:pointer; transition:.14s; color:var(--ink-2); display:inline-flex; align-items:center; gap:8px; }
.chip:hover{ border-color:var(--mindoc-orange); color:var(--mindoc-orange-press); }
.chip i{ color:var(--mindoc-orange); font-size:16px; }
.chip.on{ border-color:var(--mindoc-orange); color:var(--mindoc-orange-press); background:var(--mindoc-tint); }

/* ---- dots & list rows ----------------------------------------------- */
.dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.dot.o{ background:var(--mindoc-orange); } .dot.g{ background:var(--success); } .dot.b{ background:var(--info); }
.dot.r{ background:var(--danger); } .dot.a{ background:var(--warning); }

/* ---- stat tiles ------------------------------------------------------ */
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; }
.stat .lbl{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.stat .lbl i{ font-size:15px; color:var(--faint); }
.stat .val{ font-family:var(--font-display); font-weight:700; font-style:italic; font-size:28px; margin-top:5px; letter-spacing:-.01em; }
.stat .val.accent{ color:var(--mindoc-orange); }
.stat .val .u{ font-size:15px; font-style:normal; color:var(--muted); font-family:var(--font-body); margin-left:3px; }

/* ---- progress / bars ------------------------------------------------- */
.bar-track{ height:8px; background:var(--line); border-radius:999px; overflow:hidden; }
.bar-fill{ height:100%; background:var(--mindoc-orange); border-radius:999px; transition:width .5s ease; }
.bar-fill.g{ background:var(--success); }

/* ---- citation pill --------------------------------------------------- */
.cite{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px;
  background:var(--page-warm); border:1px solid var(--line); border-radius:var(--r-sm); padding:4px 9px; color:var(--muted); }
.cite i{ color:var(--mindoc-orange); font-size:14px; }

/* ---- score ring ------------------------------------------------------ */
.score{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; }
.score .ring{ width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; font-weight:600; }

/* ---- diff ------------------------------------------------------------ */
.diff{ font-size:14.5px; line-height:1.7; }
.diff .del{ background:var(--danger-bg); color:var(--danger-ink); text-decoration:line-through; padding:0 4px; border-radius:4px; }
.diff .ins{ background:var(--success-bg); color:var(--success-ink); padding:0 4px; border-radius:4px; }

/* ---- ai bubbles / thread -------------------------------------------- */
.msg{ display:flex; gap:12px; margin-bottom:18px; }
.msg.user{ flex-direction:row-reverse; }
.bubble{ border-radius:var(--r-lg); padding:13px 17px; font-size:14.5px; line-height:1.6; max-width:84%; }
.bubble.ai{ background:var(--surface); border:1px solid var(--line); color:var(--ink-2); }
.bubble.ai b{ color:var(--ink); }
.bubble.user{ background:var(--ink); color:#fff; }
.typing{ display:inline-flex; gap:4px; align-items:center; padding:4px 2px; }
.typing span{ width:7px; height:7px; border-radius:50%; background:var(--faint); animation:blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s; } .typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{opacity:.25;transform:translateY(0)} 30%{opacity:1;transform:translateY(-2px)} }

/* ---- flex helpers ---------------------------------------------------- */
.row{ display:flex; align-items:center; } .col{ display:flex; flex-direction:column; }
.wrap{ flex-wrap:wrap; } .between{ justify-content:space-between; } .center{ justify-content:center; }
.astart{ align-items:flex-start; } .aend{ align-items:flex-end; } .acenter{ align-items:center; }
.grow{ flex:1; min-width:0; } .mta{ margin-left:auto; } .none{ flex:none; }
.gap4{ gap:4px; } .gap6{ gap:6px; } .gap8{ gap:8px; } .gap10{ gap:10px; } .gap12{ gap:12px; }
.gap14{ gap:14px; } .gap16{ gap:16px; } .gap20{ gap:20px; } .gap24{ gap:24px; }
.grid{ display:grid; gap:16px; } .g2{ grid-template-columns:repeat(2,1fr); } .g3{ grid-template-columns:repeat(3,1fr); } .g4{ grid-template-columns:repeat(4,1fr); }
.hr{ height:1px; background:var(--line); border:0; }
.hr-soft{ height:1px; background:var(--line-soft); border:0; }

/* ---- entrance: content is visible by default. We deliberately avoid
   keyframe entrance animations because the preview pauses CSS animations
   (which would trap content at opacity:0). Hover/press motion is fine —
   it's user-triggered, not an auto-running entrance. --------------------- */
.rise, .rise-2, .rise-3, .rise-4, .rise-5{ opacity:1; transform:none; }