/* AI Course Advisor (Explore Courses page only). Uses the tokens from site.css.
   Two areas: the Advisor stage and the results; full details open in a drawer. */
.advisor { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 48px) 0 clamp(32px, 5vw, 56px); }
.advisor::before { content: ""; position: absolute; right: -15%; top: -40%; width: 70vw; height: 70vw; max-width: 820px; max-height: 820px; background: radial-gradient(closest-side, rgba(122, 92, 250, .16), transparent 70%); pointer-events: none; }
.advisor .wrap { position: relative; }
/* Our display rules (flex/grid) must never override the hidden attribute. */
.advisor [hidden] { display: none !important; }
.advisor-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 24px; }
.advisor-head h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 8px; }
.advisor-head .lead { margin: 0; }
.advisor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(18px, 3vw, 32px); align-items: start; }
@media (max-width: 960px) { .advisor-layout { grid-template-columns: 1fr; } }

/* ---------- Stage */
.stage { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-lg); padding: clamp(18px, 3vw, 26px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.stage-top { display: flex; align-items: center; gap: 16px; }
.stage-id { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.stage-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.advisor-avatar { width: 104px; height: 104px; flex: none; }
.advisor-avatar .avatar-svg { width: 100%; height: 100%; }
@media (max-width: 520px) { .advisor-avatar { width: 80px; height: 80px; } }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: .82rem; font-weight: 800; background: var(--bg); color: var(--ink-2); border: 1px solid var(--line); }
.status-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #B9BCD6; }
.status-pill[data-state="listening"] { color: var(--teal-ink); border-color: #BFE9E4; background: var(--teal-50); }
.status-pill[data-state="listening"]::before { background: var(--teal); }
.status-pill[data-state="thinking"] { color: var(--indigo-700); background: var(--indigo-50); border-color: #D5D6F5; }
.status-pill[data-state="thinking"]::before { background: var(--indigo); }
.status-pill[data-state="speaking"] { color: #fff; background: var(--indigo); border-color: var(--indigo); }
.status-pill[data-state="speaking"]::before { background: #A9F0E8; }
.status-pill[data-state="error"] { color: #7A4A00; background: var(--amber-50); border-color: #F6DDB3; }
.status-pill[data-state="error"]::before { background: var(--amber); }

/* The one current prompt (no chat history) */
.prompt { background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.prompt-indicator { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-ink); }
.prompt-text { margin: 0; font-size: 1.12rem; font-weight: 600; color: var(--ink); line-height: 1.5; }
.you-said { margin: 0; font-size: .88rem; color: var(--ink-3); }
.you-said::before { content: "Aapne kaha: "; font-weight: 700; }
.prompt-options, .choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.answer-text { border-top: 1px dashed #C9CBE3; padding-top: 10px; display: grid; gap: 8px; }
.answer-text p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.answer-text p.answer { color: var(--ink); background: var(--teal-50); border: 1px solid #BFE9E4; border-radius: 12px; padding: 8px 12px; }
.answer-text p.note { color: #7A4A00; background: var(--amber-50); border: 1px solid #F6DDB3; border-radius: 12px; padding: 8px 12px; }
.advisor-choices { display: grid; gap: 6px; }

.choice, .opt { min-height: 42px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid #D5D6F5; background: var(--surface); color: var(--indigo-700); font: inherit; font-size: .92rem; font-weight: 700; cursor: pointer; }
.choice:hover, .opt:hover { background: var(--indigo-50); }
.opt.opt-skip { border-style: dashed; color: var(--ink-2); border-color: #C9CBE3; }
.choice:disabled, .opt:disabled { opacity: .5; cursor: not-allowed; }

.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.seg button { border: 0; background: transparent; font: inherit; font-size: .85rem; font-weight: 700; color: var(--ink-2); padding: 6px 12px; min-height: 34px; border-radius: 999px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--indigo-700); box-shadow: 0 1px 3px rgba(14, 16, 51, .12); }
.tool-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: .85rem; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.tool-btn svg { width: 18px; height: 18px; }
.tool-btn[aria-pressed="true"] { border-color: var(--indigo); color: var(--indigo-700); background: var(--indigo-50); }
.mini { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink-2); cursor: pointer; text-decoration: none; }
.mini:hover { border-color: var(--indigo); color: var(--indigo); }
.mini svg { width: 16px; height: 16px; }
.mini.primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.mini.primary:hover { background: var(--indigo-700); color: #fff; }
.mini[aria-expanded="true"] { border-color: var(--indigo); color: var(--indigo-700); background: var(--indigo-50); }
.flip { transform: scaleX(-1); }

.advisor-compose { display: flex; gap: 8px; align-items: center; }
.advisor-compose input { flex: 1; min-width: 0; min-height: 48px; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); font: inherit; background: var(--bg); color: var(--ink); }
.advisor-compose input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(61, 59, 200, .25); background: #fff; }
.icon-round { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.icon-round svg { width: 22px; height: 22px; }
.icon-round.send { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.icon-round.mic { width: 56px; height: 56px; background: var(--teal-50); border-color: #BFE9E4; color: var(--teal-ink); }
.icon-round.mic[aria-pressed="true"] { background: var(--teal-ink); border-color: var(--teal-ink); color: #fff; box-shadow: 0 0 0 6px rgba(18, 181, 168, .25); }
.icon-round:disabled { opacity: .55; cursor: not-allowed; }
.advisor-hint { margin: 0; font-size: .88rem; color: var(--ink-2); }
.advisor-hint:empty { display: none; }
.advisor-privacy { margin: 0; font-size: .78rem; color: var(--ink-3); }

/* ---------- Results */
.results { background: var(--surface); border: 1px solid var(--line); border-radius: 26px; padding: clamp(18px, 3vw, 26px); min-width: 0; }
.results-head h2 { font-size: 1.3rem; margin: 0 0 4px; }
.results-head p { margin: 0 0 14px; }
.rcards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rcard { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; background: var(--surface); display: grid; gap: 6px; }
.rcard.recommended { border-color: #D5D6F5; box-shadow: var(--shadow); }
.rcard h3 { font-size: 1.05rem; margin: 0; }
.rcard p { margin: 0; color: var(--ink-2); font-size: .94rem; }
.rcard .meta { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--teal-ink); }
.rcard .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rcard .chips li { padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.rcard .row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.role-badge { justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; background: var(--indigo-50); color: var(--indigo-700); }
.role-badge.alt { background: var(--bg); color: var(--ink-3); border: 1px solid var(--line); }
.results-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.compare-slot { margin-top: 12px; }
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.compare { border-collapse: collapse; width: 100%; min-width: 420px; font-size: .9rem; background: var(--surface); }
.compare th, .compare td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--bg); font-size: .85rem; }
.compare tbody th { color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

/* ---------- Drawer */
.drawer-scrim { position: fixed; inset: 0; background: rgba(14, 16, 51, .45); z-index: 70; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--surface); z-index: 71; display: flex; flex-direction: column; box-shadow: -20px 0 60px -20px rgba(14, 16, 51, .4); }
.drawer:focus { outline: none; }
.drawer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.drawer-body { overflow-y: auto; overscroll-behavior: contain; padding: 18px 20px 28px; }
.drawer-body h2 { font-size: 1.45rem; margin: 0 0 6px; }
.drawer-body h3 { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 6px; }
.drawer-body ul { margin: 0; padding-left: 20px; color: var(--ink-2); }
.drawer-body li { margin: 3px 0; }
.drawer-body p { color: var(--ink-2); margin: 0 0 8px; }
.drawer-body .verified-box { border: 1px solid #BFE9E4; background: var(--teal-50); border-radius: 14px; padding: 10px 12px; color: var(--ink); }
.drawer-body .unverified { color: #7A4A00; font-size: .92rem; }
.drawer-body details { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.drawer-body summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
body.drawer-open { overflow: hidden; }

/* ---------- Avatar states: idle | listening | thinking | speaking | error */
.av-ring { stroke: #D9D8FA; transition: stroke .2s; }
.av-brows, .av-dots, .av-waves { opacity: 0; transition: opacity .2s; }
.av-mic { opacity: .45; }
.av-eyes { transform-box: fill-box; transform-origin: center; animation: av-blink 5.5s infinite; }
.av-mouth { transform-box: fill-box; transform-origin: center; }
@keyframes av-blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
.advisor-avatar[data-state="listening"] .av-ring { stroke: var(--teal); animation: av-pulse 1.2s ease-in-out infinite; }
.advisor-avatar[data-state="listening"] .av-mic { opacity: 1; }
.advisor-avatar[data-state="thinking"] .av-dots { opacity: 1; }
.advisor-avatar[data-state="thinking"] .av-dots circle { transform-box: fill-box; animation: av-dot 1s ease-in-out infinite; }
.advisor-avatar[data-state="thinking"] .av-dots circle:nth-child(2) { animation-delay: .15s; }
.advisor-avatar[data-state="thinking"] .av-dots circle:nth-child(3) { animation-delay: .3s; }
.advisor-avatar[data-state="speaking"] .av-ring { stroke: var(--indigo); }
.advisor-avatar[data-state="speaking"] .av-waves { opacity: 1; }
.advisor-avatar[data-state="speaking"] .av-mouth { animation: av-talk .22s ease-in-out infinite alternate; }
.advisor-avatar[data-state="error"] .av-ring { stroke: var(--amber); }
.advisor-avatar[data-state="error"] .av-brows { opacity: 1; }
.advisor-avatar[data-state="error"] .av-eyes { animation: none; transform: scaleY(.7); }
@keyframes av-pulse { 50% { stroke-width: 6; } }
@keyframes av-dot { 50% { transform: translateY(-3px); } }
@keyframes av-talk { from { transform: scaleY(1); } to { transform: scaleY(2.4); } }

@media (prefers-reduced-motion: reduce) {
    .av-eyes, .advisor-avatar[data-state] .av-ring, .advisor-avatar[data-state] .av-mouth, .advisor-avatar[data-state] .av-dots circle { animation: none !important; }
    .advisor-avatar[data-state="speaking"] .av-mouth { transform: scaleY(1.8); }
    .advisor-avatar[data-state="listening"] .av-ring { stroke-width: 5; }
    .drawer-body { scroll-behavior: auto; }
}

/* ---------- Opt-in review */
.review-consent { border: 1px solid #D5D6F5; background: var(--surface); border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; }
.review-title { margin: 0; font-weight: 800; color: var(--ink); }
.review-consent p { margin: 0; color: var(--ink-2); }
.review-preview { margin: 0; padding: 8px 12px; border-left: 3px solid var(--indigo); background: var(--bg); border-radius: 8px; color: var(--ink); font-size: .95rem; overflow-wrap: anywhere; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.role-badge.related { background: var(--teal-50); color: var(--teal-ink); }

/* ---------------------------------------------------------------- Advisor duo (saved male + female illustrations)
   Right side of the Advisor's top row (name + status on the left); the prompt below keeps its full width.
   The figures are shown whole (contain) on a soft light backdrop and follow the Advisor's state through
   data-state (idle | listening | thinking | speaking | error) set by the same code as the status pill.
   No mouth frames exist, so there is no lip-sync: speaking shows a small sound-bar badge and a gentle bob of
   the figure matching the device voice (data-voice). Movement is translate-only — the artwork is never warped. */
.stage-top.has-duo .advisor-avatar { display: none; }            /* the duo replaces the small avatar (fallback if both images fail) */
.stage-top.has-duo .stage-id { flex: 1 1 auto; min-width: 0; }
.advisor-duo { position: relative; flex: none; display: flex; align-items: flex-end; justify-content: center; height: 168px; margin-left: auto; padding: 0 6px; isolation: isolate; user-select: none; pointer-events: none; }
.advisor-duo[hidden] { display: none; }
.advisor-duo::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 72%; border-radius: 999px 999px 22px 22px;
    background: radial-gradient(ellipse at 50% 100%, rgba(18, 181, 168, .16), rgba(61, 59, 200, .07) 55%, transparent 75%); transition: background .3s; }
.duo-figure { display: block; height: 100%; width: auto; max-width: 96px; object-fit: contain; transform-origin: 50% 100%; will-change: transform; }
.duo-figure[hidden] { display: none; }
.duo-female { margin-right: -10px; z-index: 1; animation: duo-float 5.2s ease-in-out infinite; }
.duo-male { animation: duo-float 6.1s ease-in-out -1.4s infinite; }
@keyframes duo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes duo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* State badge (top centre): mic when listening, sound bars when speaking, dots while thinking. */
.duo-badge { position: absolute; z-index: 2; top: 4px; left: 50%; transform: translate(-50%, 0) scale(.6); opacity: 0; display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 16px -10px rgba(14, 16, 51, .45);
    transition: opacity .2s, transform .2s; }
.duo-badge > * { display: none; }
.b-listen { width: 16px; height: 16px; color: var(--teal-ink); }
.b-speak, .b-think { gap: 3px; align-items: center; }
.b-speak i { display: block; width: 3px; height: 12px; border-radius: 2px; background: var(--indigo); transform-origin: 50% 50%; animation: duo-bars .9s ease-in-out infinite; }
.b-speak i:nth-child(2) { animation-delay: -.25s; } .b-speak i:nth-child(3) { animation-delay: -.5s; } .b-speak i:nth-child(4) { animation-delay: -.7s; }
.b-think i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--indigo); animation: duo-dot 1s ease-in-out infinite; }
.b-think i:nth-child(2) { animation-delay: .15s; } .b-think i:nth-child(3) { animation-delay: .3s; }
@keyframes duo-bars { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes duo-dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.advisor-duo:is([data-state="listening"], [data-state="speaking"], [data-state="thinking"]) .duo-badge { opacity: 1; transform: translate(-50%, 0) scale(1); }
.advisor-duo[data-state="listening"] .b-listen { display: block; }
.advisor-duo[data-state="listening"] .duo-badge { border-color: #BFE9E4; animation: duo-ping 1.4s ease-out infinite; }
.advisor-duo[data-state="listening"]::before { background: radial-gradient(ellipse at 50% 100%, rgba(18, 181, 168, .32), rgba(18, 181, 168, .08) 60%, transparent 78%); }
.advisor-duo[data-state="speaking"] .b-speak { display: inline-flex; }
.advisor-duo[data-state="speaking"]::before { background: radial-gradient(ellipse at 50% 100%, rgba(61, 59, 200, .22), rgba(61, 59, 200, .07) 60%, transparent 78%); }
.advisor-duo[data-state="thinking"] .b-think { display: inline-flex; }
@keyframes duo-ping { 0% { box-shadow: 0 0 0 0 rgba(18, 181, 168, .35); } 100% { box-shadow: 0 0 0 10px rgba(18, 181, 168, 0); } }
/* Speaking: the figure matching the device voice bobs gently (both when the voice is unknown). */
.advisor-duo[data-state="speaking"][data-voice="female"] .duo-female,
.advisor-duo[data-state="speaking"][data-voice="male"] .duo-male,
.advisor-duo[data-state="speaking"][data-voice="neutral"] .duo-figure { animation: duo-bob .9s ease-in-out infinite; }

/* Off screen or tab hidden: pause (no work for nothing). */
.advisor-duo.is-paused, .advisor-duo.is-paused * { animation-play-state: paused !important; }

@media (max-width: 960px) { .advisor-duo { height: 140px; } .duo-figure { max-width: 80px; } }
@media (max-width: 520px) {
    .stage-top.has-duo { align-items: flex-start; }
    .advisor-duo { height: 112px; padding: 0; }
    .duo-figure { max-width: 64px; }
    .duo-female { margin-right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
    .advisor-duo *, .advisor-duo .duo-badge { animation: none !important; transition: none !important; }
    .b-speak i { transform: scaleY(.7); }
    .b-think i { opacity: .8; }
}