/* ---------- Task cards ---------- */

.task {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: var(--surface-raised);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.task:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.task--due { border-left: 3px solid var(--warning); }
.task--overdue { border-left: 3px solid var(--danger); }
.task--done { opacity: .72; }

.task__icon {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
}

.task__icon svg { width: 20px; height: 20px; }
.task__body { min-width: 0; flex: 1; }
.task__title { font-size: var(--text-base); font-weight: 650; color: var(--text-strong); }
.task__meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- Live session ---------- */

.session {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-5);
    align-items: start;
}

@media (max-width: 1100px) {
    .session { grid-template-columns: minmax(0, 1fr); }
}

.stage {
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, #15182c 0%, #221a44 55%, #10222c 100%);
    color: #fff;
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
}

.stage::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -160px;
    top: -200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 184, 166, .35), transparent 65%);
}

.stage__top { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.stage__persona { display: flex; align-items: center; gap: var(--space-4); }
.stage__name { font-size: var(--text-md); font-weight: 650; color: #fff; }
.stage__role { font-size: var(--text-sm); color: rgba(255, 255, 255, .68); }

.stage__status {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.live-dot {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #fff;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .12);
}

.live-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f43f5e;
    animation: pulse 1.6s infinite;
}

.live-dot.is-idle::before { background: rgba(255, 255, 255, .5); animation: none; }

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(.75); }
}

.stage__timer {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.waveform {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 96px;
    margin: var(--space-6) 0;
}

.waveform i {
    display: block;
    width: 5px;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, #2dd4bf, #6366f1);
    height: 8px;
    opacity: .45;
    transition: height 90ms linear, opacity 90ms linear;
}

.waveform.is-active i { opacity: 1; }

.ptt-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-5); }

.ptt {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(140deg, #14b8a6, #6366f1);
    box-shadow: 0 12px 40px rgba(20, 184, 166, .45);
    transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.ptt svg { width: 34px; height: 34px; }
.ptt:hover { transform: scale(1.04); }
.ptt:active { transform: scale(.97); }

.ptt.is-recording {
    background: linear-gradient(140deg, #f43f5e, #8b5cf6);
    box-shadow: 0 12px 44px rgba(244, 63, 94, .55);
    animation: ptt-pulse 1.6s infinite;
}

@keyframes ptt-pulse {
    0%, 100% { box-shadow: 0 12px 44px rgba(244, 63, 94, .55); }
    50% { box-shadow: 0 12px 60px rgba(244, 63, 94, .8); }
}

.ptt-hint { position: relative; z-index: 1; text-align: center; font-size: var(--text-sm); color: rgba(255, 255, 255, .68); margin-top: var(--space-4); }

.stage__controls { position: relative; z-index: 1; display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }

.stage__control {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
    transition: background var(--duration) var(--ease);
}

.stage__control:hover { background: rgba(255, 255, 255, .2); }
.stage__control svg { width: 18px; height: 18px; }
.stage__control--end { background: rgba(244, 63, 94, .85); border-color: transparent; }
.stage__control--end:hover { background: #f43f5e; }

/* ---------- Transcript ---------- */

.transcript { display: flex; flex-direction: column; gap: var(--space-4); max-height: 460px; overflow-y: auto; padding-right: var(--space-2); }

.bubble-row { display: flex; gap: var(--space-3); animation: bubble-in 260ms var(--ease); }
.bubble-row--self { flex-direction: row-reverse; }

@keyframes bubble-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.bubble-msg {
    max-width: 76%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-inset);
    border: 1px solid var(--border-soft);
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--text-default);
}

.bubble-row--self .bubble-msg {
    background: var(--role-accent, var(--accent));
    border-color: transparent;
    color: #fff;
}

.bubble-meta { font-size: var(--text-xs); color: var(--text-subtle); margin-top: 4px; }
.bubble-row--self .bubble-meta { text-align: right; }

.typing { display: inline-flex; gap: 4px; align-items: center; height: 12px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-subtle); animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }

@keyframes typing {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* ---------- Live feedback ---------- */

.feedback-panel { position: sticky; top: calc(var(--topbar-height) + var(--space-5)); }

.feedback-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: var(--surface-raised);
    animation: bubble-in 300ms var(--ease);
}

.feedback-item__icon {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--radius-xs);
    display: grid;
    place-items: center;
}

.feedback-item__icon svg { width: 15px; height: 15px; }
.feedback-item--impulse .feedback-item__icon { background: var(--info-soft); color: var(--info); }
.feedback-item--chance .feedback-item__icon { background: var(--warning-soft); color: var(--warning); }
.feedback-item--deescalate .feedback-item__icon { background: var(--danger-soft); color: var(--danger); }
.feedback-item--good .feedback-item__icon { background: var(--success-soft); color: var(--success); }

.feedback-item__text strong { display: block; font-size: var(--text-sm); color: var(--text-strong); }
.feedback-item__text p { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.5; }
.feedback-item__time { font-size: 10px; color: var(--text-subtle); margin-top: 4px; }

/* ---------- SWOT ---------- */

.swot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }

@media (max-width: 780px) { .swot { grid-template-columns: minmax(0, 1fr); } }

.swot__quadrant {
    border-radius: var(--radius-md);
    padding: var(--space-4);
    border: 1px solid var(--border-soft);
    background: var(--surface-inset);
}

.swot__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.swot__head svg { width: 17px; height: 17px; }
.swot__head strong { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .07em; }

.swot__quadrant ul { display: flex; flex-direction: column; gap: var(--space-2); }
.swot__quadrant li { font-size: var(--text-sm); color: var(--text-muted); padding-left: var(--space-4); position: relative; line-height: 1.5; }
.swot__quadrant li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }

.swot--s { border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.swot--s .swot__head { color: var(--success); }
.swot--w { border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.swot--w .swot__head { color: var(--danger); }
.swot--o { border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.swot--o .swot__head { color: var(--info); }
.swot--t { border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.swot--t .swot__head { color: var(--warning); }

/* ---------- Script comparison ---------- */

.script-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-soft);
    align-items: start;
}

.script-row:last-child { border-bottom: 0; }
.script-row__mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.script-row__mark svg { width: 12px; height: 12px; }
.script-row__mark--ok { background: var(--success-soft); color: var(--success); }
.script-row__mark--partial { background: var(--warning-soft); color: var(--warning); }
.script-row__mark--miss { background: var(--danger-soft); color: var(--danger); }
.script-row__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-subtle); font-weight: 700; margin-bottom: 4px; }
.script-row__text { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; }
.script-row__text--actual { color: var(--text-default); }

@media (max-width: 780px) { .script-row { grid-template-columns: 26px minmax(0, 1fr); } }

/* ---------- Key moments ---------- */

.moment {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-soft);
}

.moment:last-child { border-bottom: 0; }
.moment__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); padding-top: 2px; }
.moment__title { font-size: var(--text-sm); font-weight: 650; color: var(--text-strong); }
.moment__text { font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- Gamification ---------- */

.level-card { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }

.level-badge {
    width: 84px;
    height: 84px;
    flex: none;
    border-radius: var(--radius-lg);
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1.1;
    color: #fff;
    background: linear-gradient(140deg, var(--color-teal-500), var(--color-accent-500));
    box-shadow: var(--shadow-accent);
}

.level-badge strong { display: block; font-size: var(--text-2xl); font-weight: 800; }
.level-badge span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .85; }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-4); }

.badge-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    padding: var(--space-4) var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: var(--surface-inset);
}

.badge-tile__medal {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(140deg, var(--color-amber-500), var(--color-rose-400));
}

.badge-tile__medal svg { width: 22px; height: 22px; }
.badge-tile strong { font-size: var(--text-xs); color: var(--text-strong); }
.badge-tile span { font-size: 10px; color: var(--text-muted); }
.badge-tile.is-locked { opacity: .48; }
.badge-tile.is-locked .badge-tile__medal { background: var(--border-default); color: var(--text-subtle); }

.leader-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); }
.leader-row:last-child { border-bottom: 0; }
.leader-row.is-self { background: var(--accent-soft); border-radius: var(--radius-sm); padding-left: var(--space-3); padding-right: var(--space-3); border-bottom-color: transparent; }
.leader-rank { width: 26px; font-weight: 700; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.leader-rank--1 { color: #d99b06; }
.leader-rank--2 { color: #8d92b3; }
.leader-rank--3 { color: #b06a3b; }

.challenge {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    padding: var(--space-4);
    background: var(--surface-raised);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.challenge__top { display: flex; align-items: flex-start; gap: var(--space-3); }
.challenge__icon { width: 36px; height: 36px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.challenge__icon svg { width: 18px; height: 18px; }
.challenge__title { font-size: var(--text-sm); font-weight: 650; color: var(--text-strong); }
.challenge__meta { font-size: var(--text-xs); color: var(--text-muted); }