/* =====================================================================
   SkillLink — feature components (onboarding, employer verify, jobs,
   wallet, growth, and console management views). Loaded after styles.css
   on public pages and after admin.css in the console.
   ===================================================================== */

/* ---------- Voice-bot / conversational onboarding ---------- */
.chat { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: .7rem; }
.bubble { max-width: 82%; padding: .8rem 1.05rem; border-radius: 18px; font-size: 1rem; line-height: 1.5; position: relative; }
.bubble.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: var(--shadow-sm); }
.bubble.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; }
.bubble.me.audio { display: inline-flex; align-items: center; gap: .6rem; }
.bubble.audio .wave { display: inline-flex; gap: 3px; align-items: flex-end; height: 20px; }
.bubble.audio .wave i { width: 3px; background: currentColor; border-radius: 2px; animation: eq 1s ease-in-out infinite; }
.bubble.audio .wave i:nth-child(1){height:8px;animation-delay:0s}.bubble.audio .wave i:nth-child(2){height:16px;animation-delay:.15s}.bubble.audio .wave i:nth-child(3){height:11px;animation-delay:.3s}.bubble.audio .wave i:nth-child(4){height:18px;animation-delay:.45s}.bubble.audio .wave i:nth-child(5){height:7px;animation-delay:.6s}
@keyframes eq { 0%,100%{transform:scaleY(.5)} 50%{transform:scaleY(1)} }
.chat-input { display: flex; gap: .6rem; max-width: 620px; margin: 1.2rem auto 0; align-items: center; }
.chat-input input { flex: 1; font: inherit; padding: .9rem 1.1rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; }
.chat-mic { width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; box-shadow: var(--shadow-md); }
.chat-mic.rec { background: #e05555; animation: speakPulse 1s infinite; }
.chat-mic svg { width: 28px; height: 28px; }
.chat-progress { max-width: 620px; margin: 0 auto 1.4rem; }
.chat-progress .track { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.chat-progress .track span { display: block; height: 100%; background: linear-gradient(90deg,var(--brand),var(--verified)); border-radius: 999px; transition: width .5s var(--spring); }
.chat-progress .lbl { font-size: .85rem; color: var(--muted); font-weight: 600; margin-top: .4rem; }

/* ---------- Benefit / earnings hook ---------- */
.earn-hook { display: inline-flex; align-items: center; gap: .6rem; background: var(--verified-tint); color: #14532d; border-radius: 999px; padding: .5rem 1rem; font-weight: 700; }
.earn-hook svg { width: 20px; height: 20px; }

/* ---------- Skill micro-badges ---------- */
.badges-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.mbadge { display: inline-flex; align-items: center; gap: .45rem; border: 1.5px solid var(--line); border-radius: 999px; padding: .45rem .9rem; font-weight: 700; font-size: .9rem; background: #fff; color: var(--body); }
.mbadge.earned { border-color: var(--verified); background: var(--verified-tint); color: #14532d; }
.mbadge svg { width: 18px; height: 18px; }

/* ---------- Employer GST verify + trust ramp ---------- */
.trust-ramp { display: grid; gap: .8rem; }
@media (min-width: 640px){ .trust-ramp { grid-template-columns: repeat(3,1fr); } }
.ramp-step { border: 1.5px solid var(--line); border-radius: 16px; padding: 1.1rem; background: #fff; }
.ramp-step.on { border-color: var(--brand); background: var(--brand-tint); }
.ramp-step b { display:block; color: var(--ink); }
.ramp-step span { color: var(--muted); font-size: .88rem; }

/* ---------- Status badges (shared with console; needed on public pages
   like post-job.html that don't load admin.css) ---------- */
.badge2 { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .76rem; padding: .28rem .6rem; border-radius: var(--radius-pill); white-space: nowrap; }
.badge2 svg { width: 13px; height: 13px; }
.b-approved, .b-active { background: var(--verified-tint); color: #14532d; }

/* ---------- Candidate cards ("get 5 verified now") ---------- */
.cand-grid { display: grid; gap: 1rem; }
@media (min-width: 640px){ .cand-grid { grid-template-columns: 1fr 1fr; } }
.cand { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); }
.cand .av { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; }
.cand b { color: var(--ink); }
.cand .meta { color: var(--muted); font-size: .88rem; }
.match-pill { font-weight: 800; font-size: .8rem; color: var(--verified); background: var(--verified-tint); padding: .25rem .55rem; border-radius: 999px; }

/* ---------- Identity wallet + QR ---------- */
.wallet-card { max-width: 420px; margin: 0 auto; background: linear-gradient(150deg,var(--brand-darker),var(--brand)); color: #fff; border-radius: 22px; padding: 1.6rem; box-shadow: var(--shadow-lg); }
.wallet-card .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.wallet-card .top b { font-size: 1.1rem; }
.wallet-card .verified-chip { background: rgba(255,255,255,.2); border-radius: 999px; padding: .3rem .7rem; font-size: .78rem; font-weight: 800; display: inline-flex; gap: .35rem; align-items: center; }
.wallet-card .verified-chip svg { width: 14px; height: 14px; }
.wallet-card h3 { color: #fff; font-size: 1.5rem; margin: 0; }
.wallet-card .sub { color: #cfe0ff; font-size: .9rem; }
.wallet-qr { background: #fff; border-radius: 14px; padding: 12px; width: 150px; height: 150px; margin: 1rem auto; display: grid; place-items: center; }
.wallet-qr svg { width: 100%; height: 100%; }
.wallet-card .foot { display: flex; justify-content: space-between; font-size: .82rem; color: #cfe0ff; }
.dpi-row { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.2rem; }
.dpi-chip { font-size: .8rem; font-weight: 700; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; color: var(--body); background: #fff; }

/* ---------- Courses / financial offers / mitra ---------- */
.offer { display: grid; grid-template-columns: auto 1fr; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 1.3rem; box-shadow: var(--shadow-sm); }
.offer__ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; }
.offer__ic svg { width: 26px; height: 26px; }
.offer h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.offer p { margin: 0 0 .5rem; color: var(--muted); font-size: .93rem; }
.offer .tag { font-size: .78rem; font-weight: 800; color: var(--brand); }

/* ---------- Icon + colour legend ---------- */
.legend-grid { display: grid; gap: .7rem; }
@media (min-width:560px){ .legend-grid { grid-template-columns: 1fr 1fr; } }
.legend-item { display: flex; align-items: center; gap: .7rem; }
.legend-swatch { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.legend-swatch svg { width: 18px; height: 18px; }

/* ---------- Console: analytics / funnel ---------- */
.funnel { display: grid; gap: .5rem; }
.funnel .stage { display: grid; grid-template-columns: 160px 1fr auto; gap: .8rem; align-items: center; }
.funnel .stage .bar { height: 30px; border-radius: 8px; background: linear-gradient(90deg,var(--brand),#5aa0ff); min-width: 4px; }
.funnel .stage .lbl { font-weight: 600; color: var(--body); font-size: .9rem; }
.funnel .stage .val { font-weight: 800; color: var(--ink); }
.mini-bars { display: flex; align-items: stretch; gap: .5rem; height: 130px; }
.mini-bars .col { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: .4rem; justify-content: flex-end; }
.mini-bars .col i { min-height: 4px; }
.mini-bars .col i { width: 100%; max-width: 46px; background: var(--brand); border-radius: 6px 6px 0 0; display: block; }
.mini-bars .col span { font-size: .78rem; color: var(--muted); font-weight: 600; }

/* ---------- Console: risk score ---------- */
.risk-badge { display: inline-flex; align-items: center; gap: .3rem; font-weight: 800; font-size: .76rem; padding: .25rem .55rem; border-radius: 999px; }
.risk-low { background: var(--verified-tint); color: #14532d; }
.risk-med { background: #fef3dd; color: var(--accent-dark); }
.risk-high { background: #fdecec; color: #c02626; }
.flag-list { margin: 0; color: var(--muted); font-size: .85rem; }
.flag-list li { display: inline; }
.flag-list li::after { content: " · "; }
.flag-list li:last-child::after { content: ""; }