/* ============================================================
   Lafa · deljeni animirani moduli (staged pilula, AI, agent, dashboard)
   Reused od strane svih pravaca (local/clean/studio). Vodjeno temom
   preko --accent/--surface/--text-* varijabli koje pravac definise.
   Hardkodovane tamne boje (.dwin, .dpill) pravac sme da override-uje.
   ============================================================ */

/* ---- atoms: ichip, reveal, stagger ---- */
/* ---------- ichip: tinted square + outline ikonica (kao SF Symbol) ---------- */
.ichip {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
}
.ichip .ic { width: 23px; height: 23px; stroke-width: 1.7; }
.ichip.sm { width: 32px; height: 32px; border-radius: 9px; }
.ichip.sm .ic { width: 17px; height: 17px; }
.ichip.lg { width: 52px; height: 52px; border-radius: 15px; }
.ichip.lg .ic { width: 27px; height: 27px; }
.ichip.agent { color: var(--agent-soft); background: rgba(var(--agent-rgb), 0.14); border-color: rgba(var(--agent-rgb), 0.3); }

/* ---------- Reveal (gated by .js) ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.js .stagger.is-in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ---- staged pill demo ---- */
/* ---------- Staged pill demo ---------- */
.stage { position: relative; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); border: 1px solid var(--stroke); box-shadow: 0 30px 80px rgba(0,0,0,0.5), var(--glow); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); padding: 20px 20px 22px; overflow: hidden; }
.stage-top { display: flex; align-items: center; justify-content: center; min-height: 64px; margin-bottom: 6px; }

/* Pill · FIKSNA velicina kao u app-u (272x50, frame fiksiran) */
.dpill { display: flex; align-items: center; gap: 12px; width: 272px; min-height: 50px; height: auto; padding: 7px 16px; border-radius: var(--r-btn); background: rgba(0,0,0,0.74); border: 1px solid var(--p-color, var(--accent)); box-shadow: 0 0 26px color-mix(in srgb, var(--p-color, var(--accent)) 38%, transparent); transition: border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease, transform 0.35s ease; box-sizing: border-box; }
.dpill.mini { width: 210px; min-height: 40px; padding: 5px 13px; gap: 10px; }
.dpill[data-phase="idle"] { opacity: 0; transform: translateY(-6px); }
.dpill[data-phase="listening"] { --p-color: var(--accent); }
.dpill[data-phase="transcribing"] { --p-color: var(--transcribe); }
.dpill[data-phase="pasting"] { --p-color: var(--transcribe); }
.dpill[data-phase="done"] { --p-color: var(--done); }
/* Agent: ljubicast kroz SVE faze (kao app glowColor za agenta) */
.dpill.agent[data-phase="listening"],
.dpill.agent[data-phase="transcribing"],
.dpill.agent[data-phase="pasting"],
.dpill.agent[data-phase="done"] { --p-color: var(--agent); }

/* Signal slot · fiksno 70px, barovi i check se smenjuju u istom prostoru */
.dpill-signal { position: relative; width: 70px; height: 24px; flex: none; }
.dpill.mini .dpill-signal { width: 54px; height: 20px; }
.dpill-bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2.3px; justify-content: center; }
.dpill.mini .dpill-bars { gap: 1.8px; }
.dpill-bars i { width: 3px; border-radius: 2px; background: var(--p-color, var(--accent)); height: 5px; }
.dpill[data-phase="listening"] .dpill-bars i { animation: bar-listen 0.9s ease-in-out infinite; }
.dpill[data-phase="transcribing"] .dpill-bars i,
.dpill[data-phase="pasting"] .dpill-bars i { animation: bar-scan 1.1s ease-in-out infinite; }
.dpill[data-phase="done"] .dpill-bars { opacity: 0; }
.dpill-bars i:nth-child(1){--h:7px;animation-delay:-.92s}.dpill-bars i:nth-child(2){--h:12px;animation-delay:-.41s}.dpill-bars i:nth-child(3){--h:16px;animation-delay:-.74s}.dpill-bars i:nth-child(4){--h:20px;animation-delay:-.18s}.dpill-bars i:nth-child(5){--h:23px;animation-delay:-.63s}.dpill-bars i:nth-child(6){--h:24px;animation-delay:-.29s}.dpill-bars i:nth-child(7){--h:23px;animation-delay:-.55s}.dpill-bars i:nth-child(8){--h:24px;animation-delay:-.08s}.dpill-bars i:nth-child(9){--h:23px;animation-delay:-.49s}.dpill-bars i:nth-child(10){--h:20px;animation-delay:-.85s}.dpill-bars i:nth-child(11){--h:16px;animation-delay:-.22s}.dpill-bars i:nth-child(12){--h:12px;animation-delay:-.67s}.dpill-bars i:nth-child(13){--h:9px;animation-delay:-.34s}.dpill-bars i:nth-child(14){--h:6px;animation-delay:-.78s}
@keyframes bar-listen { 0%,100%{height:calc(var(--h)*0.32);opacity:.65} 50%{height:var(--h);opacity:1} }
@keyframes bar-scan { 0%,100%{height:5px;opacity:.4} 50%{height:14px;opacity:.95} }
.dpill-check { position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(0.6); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--p-color, var(--done)); color: var(--on-accent); opacity: 0; transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.dpill-check svg { width: 14px; height: 14px; }
.dpill[data-phase="done"] .dpill-check { opacity: 1; transform: translateY(-50%) scale(1); }
.dpill.agent[data-phase="done"] .dpill-check { color: #150a26; }
.dpill-label { font-family: var(--font-display); font-weight: 600; font-size: 14px; line-height: 1.18; color: #fff; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1 1 auto; min-width: 0; }
.dpill.mini .dpill-label { font-size: 12.5px; }
.dpill-time { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; flex: none; }
.dpill[data-phase="done"] .dpill-time { opacity: 0; }

.dwin { border-radius: var(--r-md); overflow: hidden; background: var(--win-bg, #0e1916); border: 1px solid var(--stroke); }
.dwin-bar { display: flex; align-items: center; gap: 7px; padding: 10px 13px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--stroke-soft); }
.dwin-bar .tl { width: 11px; height: 11px; border-radius: 50%; }
.tl.r{background:#ff5f57}.tl.y{background:#febc2e}.tl.g{background:#28c840}
.dwin-app { margin-left: 7px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; }
.dwin-app .lglyph { width: 13px; filter: none; }
.dwin-body { padding: 18px; min-height: 132px; }
.dwin-context { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-bottom: 12px; }
.dfield { border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--stroke-soft); padding: 14px 16px; min-height: 76px; font-size: 16px; color: var(--text-bright); line-height: 1.5; position: relative; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.dfield.focus { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.1); }
.dfield .placeholder { color: var(--text-faint); }
.dfield .dtext.flash { animation: paste-flash 0.7s ease; border-radius: 4px; }
@keyframes paste-flash { 0%{background:rgba(var(--accent-rgb),0.28)} 100%{background:transparent} }
.dfield .dcaret { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); margin-left: 1px; vertical-align: text-bottom; animation: caret 1s step-end infinite; }
.dfield.done .dcaret { display: none; }
@keyframes caret { 0%,100%{opacity:1} 50%{opacity:0} }
.stage-say { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14.5px; color: var(--text-secondary); min-height: 24px; }
.stage-say .mic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); flex: none; }
.stage-say .mic .ic { width: 14px; height: 14px; }
.stage-say .quote:not(:empty)::before { content: "„"; }
.stage-say .quote:not(:empty)::after { content: "\""; }
.stage-say .quote { font-style: italic; }
.stage-steps { display: flex; gap: 6px; margin-top: 14px; }
.stage-steps span { flex: 1; height: 3px; border-radius: 2px; background: var(--stroke); overflow: hidden; transition: background 0.3s ease; }
.stage-steps span.on { background: var(--accent); }

/* ---- AI demo ---- */
/* ============================================================
   AI SEKCIJA
   ============================================================ */
.ai-demo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; align-items: stretch; }
.ai-window { border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)); border: 1px solid var(--stroke); box-shadow: 0 24px 60px rgba(0,0,0,0.4), var(--glow); overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); display: flex; flex-direction: column; }
.ai-window .dwin-bar { position: relative; }
.ai-app-ic { width: 14px; height: 14px; color: var(--agent-soft); }
.ai-pill-slot { margin-left: auto; }
.ai-chat { padding: 20px; display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 230px; }
.ai-prompt, .ai-answer { display: flex; gap: 12px; align-items: flex-start; }
.ai-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding-top: 8px; flex: none; width: 30px; }
.ai-role.assistant { width: 30px; height: 30px; padding: 0; border-radius: 9px; display: grid; place-items: center; color: var(--agent-soft); background: rgba(var(--agent-rgb),0.14); border: 1px solid rgba(var(--agent-rgb),0.3); }
.ai-role.assistant .ic { width: 17px; height: 17px; }
.ai-bubble { background: var(--surface-2); border: 1px solid var(--stroke); border-radius: 14px; border-top-left-radius: 4px; padding: 13px 16px; font-size: 15.5px; color: var(--text-bright); line-height: 1.5; flex: 1; min-height: 20px; }
.ai-bubble.assistant { background: rgba(var(--agent-rgb),0.07); border-color: rgba(var(--agent-rgb),0.18); }
.ai-prompt .dcaret { display: inline-block; width: 2px; height: 1.05em; background: var(--accent); margin-left: 1px; vertical-align: text-bottom; animation: caret 1s step-end infinite; }
.ai-prompt.done .dcaret { display: none; }
.ai-answer { opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.ai-answer.show { opacity: 1; transform: none; }
.ai-typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--agent-soft); opacity: 0.5; animation: type-dot 1.2s ease-in-out infinite; }
.ai-typing i:nth-child(2){animation-delay:0.2s} .ai-typing i:nth-child(3){animation-delay:0.4s}
@keyframes type-dot { 0%,100%{opacity:0.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-3px)} }
.ai-answer.answered .ai-typing { display: none; }
.ai-resp { margin: 0; }
.ai-apps { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--stroke-soft); flex-wrap: wrap; }
.ai-apps .chip { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); padding: 6px 12px; border-radius: var(--r-btn); background: var(--surface); border: 1px solid var(--stroke-soft); transition: all 0.25s ease; }
.ai-apps .chip.on { color: var(--on-accent); background: var(--accent-grad); border-color: transparent; }

.ai-compare { display: flex; flex-direction: column; gap: 12px; }
.cmp { padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); }
.cmp.spoken { background: linear-gradient(160deg, rgba(var(--accent-rgb),0.1), var(--surface)); border-color: rgba(var(--accent-rgb),0.28); }
.cmp-head { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.cmp-head .ic { width: 16px; height: 16px; }
.cmp-head.accent { color: var(--accent); }
.cmp-prompt { font-size: 15px; color: var(--text-primary); line-height: 1.5; min-height: 3em; }
.cmp.spoken .cmp-prompt { color: var(--text-bright); }
.cmp-meter { height: 6px; border-radius: 999px; background: var(--stroke); overflow: hidden; margin: 12px 0 8px; }
.cmp-meter span { display: block; height: 100%; border-radius: 999px; background: var(--text-faint); }
.cmp-meter.accent span { background: var(--accent-grad); }
.cmp-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.cmp-arrow { display: grid; place-items: center; color: var(--accent); }
.cmp-arrow .ic { width: 22px; height: 22px; }
.ai-foot { margin-top: 22px; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--stroke-soft); font-size: 14.5px; color: var(--text-secondary); }
.ai-foot-ic { color: var(--success); flex: none; }
.ai-foot-ic .ic { width: 22px; height: 22px; }

/* ---- agent demo ---- */
/* ============================================================
   AGENT DEMO
   ============================================================ */
.agent-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.agent-stage { display: flex; flex-direction: column; }
.agent-card { padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); height: 100%; display: flex; flex-direction: column; gap: 14px; }
.agent-card.tall { gap: 12px; }
.agent-h { font-family: var(--font-display); font-weight: 700; font-size: 21px; color: var(--text-bright); }
.agent-p { color: var(--text-secondary); font-size: 15px; }
.agent-instr { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.agent-instr .label { font-size: 14.5px; color: var(--text-secondary); }
.agent-instr .label b { color: var(--text-bright); }
.agent-text { border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid var(--stroke-soft); padding: 16px; font-size: 16px; line-height: 1.55; color: var(--text-primary); min-height: 96px; }
.agent-text .sel { background: color-mix(in srgb, var(--agent) 30%, transparent); border-radius: 3px; padding: 0 2px; transition: background 0.4s ease; }
.agent-text.transformed .sel { background: color-mix(in srgb, var(--accent) 26%, transparent); }
.agent-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.agent-chips .chip { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); padding: 7px 13px; border-radius: var(--r-btn); background: var(--surface-2); border: 1px solid var(--stroke); transition: all 0.2s ease; }
.agent-chips .chip.on { color: var(--on-accent); background: var(--agent); border-color: transparent; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.mini { padding: 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--stroke-soft); }
.mini .ichip { margin-bottom: 10px; }
.mini h4 { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-bright); margin-bottom: 4px; }
.mini p { font-size: 13.5px; color: var(--text-secondary); }

/* ---- kbd ---- */
.kbd { font-family: var(--font-mono); font-size: 0.78em; color: var(--accent-soft); background: rgba(var(--accent-rgb),0.1); border: 1px solid rgba(var(--accent-rgb),0.25); border-radius: 6px; padding: 1px 7px; }
.kbd.agent { color: var(--agent-soft); background: rgba(var(--agent-rgb),0.12); border-color: rgba(var(--agent-rgb),0.3); }

/* ---- dashboard (stats / rank / achievements) ---- */
/* ============================================================
   IZNUTRA · Dashboard
   ============================================================ */
.dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.statcard { padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 10px; }
.statcard .sc-top { display: flex; align-items: center; justify-content: space-between; }
.statcard .sc-title { font-size: 13.5px; color: var(--text-secondary); }
.statcard .sc-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--t, var(--accent)) 16%, transparent); color: var(--t, var(--accent)); }
.statcard .sc-ic .ic { width: 16px; height: 16px; }
.statcard .sc-val { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3.4vw, 34px); color: var(--text-bright); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; }
.statcard .sc-delta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 5px; }
.statcard .sc-delta .flame { width: 13px; height: 13px; color: var(--streak); }
.sc-goal { height: 6px; border-radius: 999px; background: var(--stroke); overflow: hidden; }
.sc-goal span { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--t, var(--accent)) 90%, transparent); }
.sc-dots { display: flex; gap: 5px; }
.sc-dots i { width: 9px; height: 9px; border-radius: 3px; background: var(--stroke); }
.sc-dots i.on { background: var(--streak); }

.dash-second { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin-top: 14px; }
.rank { padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 14px; }
.rank-top { display: flex; align-items: center; gap: 14px; }
.rank-medal { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--success-rgb),0.16); border: 1px solid rgba(var(--success-rgb),0.4); color: var(--success); flex: none; }
.rank-medal .ic { width: 26px; height: 26px; }
.rank-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-bright); display: block; }
.rank-title { font-size: 13.5px; color: var(--text-secondary); }
.rank-lvl { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); align-self: flex-start; }
.rank-bar { height: 8px; border-radius: 999px; background: var(--stroke); overflow: hidden; }
.rank-bar span { display: block; height: 100%; width: 64%; border-radius: 999px; background: var(--accent-grad); }
.rank-foot { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }
.rank-foot b { color: var(--text-secondary); }
.rank-track { display: flex; gap: 8px; }
.rank-track .rk { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--stroke-soft); color: var(--text-faint); }
.rank-track .rk .ic { width: 20px; height: 20px; }
.rank-track .rk.done { color: var(--accent); background: rgba(var(--accent-rgb),0.1); border-color: rgba(var(--accent-rgb),0.25); }
.rank-track .rk.now { color: var(--on-accent); background: var(--accent-grad); border-color: transparent; box-shadow: var(--glow); }

.ach { padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--stroke); }
.ach h4 { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-bright); margin-bottom: 14px; }
.ach-list { display: flex; flex-direction: column; gap: 11px; }
.ach-row { display: flex; align-items: center; gap: 11px; }
.ach-row .at { font-size: 14px; color: var(--text-primary); flex: 1; }
.ach-row .atier { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; }
.atier.t2 { color: var(--t-srebro); background: color-mix(in srgb, var(--t-srebro) 14%, transparent); }
.atier.t3 { color: var(--t-zlato); background: color-mix(in srgb, var(--t-zlato) 16%, transparent); }
.atier.t4 { color: var(--t-platina); background: color-mix(in srgb, var(--t-platina) 16%, transparent); }
.atier.t5 { color: var(--t-dijamant); background: color-mix(in srgb, var(--t-dijamant) 16%, transparent); }
.ach-row .av { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); min-width: 76px; text-align: right; }
.dash-note { grid-column: 1 / -1; margin-top: 16px; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }