/* ═══════════════════════════════════════
   AVA App Experience — companion workspace
   Loaded after chat.html's inline styles; scoped to body[data-mode].
   Visual only: no layout logic or behaviour changes.
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

@property --ava-ring {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

body[data-mode] {
  --serif: 'Instrument Serif', Georgia, serif;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --night: #070b16;
  --glass: color-mix(in srgb, var(--surface) 82%, transparent);
  --glass-line: color-mix(in srgb, var(--ink) 8%, transparent);
  --glow: 0 20px 50px -18px rgba(37,99,235,0.32);
  --card-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 8px 28px -12px rgba(15,23,42,0.12);
  --grad: linear-gradient(135deg,var(--teal),var(--blue));
}
[data-theme="dark"] body[data-mode] {
  --glass: color-mix(in srgb, var(--surface) 72%, transparent);
  --glass-line: rgba(255,255,255,0.07);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 10px 30px -12px rgba(0,0,0,0.55);
  --glow: 0 20px 50px -18px rgba(6,182,212,0.28);
}

/* ── Ambient backdrop ── */
body[data-mode]::before {
  content:''; position:fixed; inset:-20% -10% auto; height:80vh; z-index:-1; pointer-events:none;
  background:
    radial-gradient(30% 45% at 15% 20%, rgba(6,182,212,0.13), transparent 70%),
    radial-gradient(28% 40% at 85% 10%, rgba(37,99,235,0.12), transparent 70%),
    radial-gradient(25% 35% at 60% 60%, rgba(124,58,237,0.07), transparent 70%);
  filter:blur(10px);
  animation:appAurora 22s ease-in-out infinite alternate;
}
@keyframes appAurora {
  from { transform:translate3d(0,0,0) scale(1); }
  to   { transform:translate3d(-3%,2%,0) scale(1.06); }
}
body[data-mode] .top-nav-wrap { background:transparent; }
body[data-mode] .top-nav { box-shadow:0 10px 40px -14px rgba(15,23,42,0.18), 0 0 0 1px var(--line); }
body[data-mode] .nav-cta { background:var(--grad); box-shadow:0 8px 20px -8px rgba(37,99,235,0.6); }

/* ── Mode navigation: glass segmented bar with sliding indicator ── */
@media (min-width: 769px) {
  body[data-mode] .mode-nav {
    position:relative; width:max-content; max-width:calc(100% - 96px);
    margin:18px auto 6px; padding:6px; gap:2px;
    background:var(--glass); border:1px solid var(--glass-line); border-radius:100px;
    backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
    box-shadow:var(--card-shadow);
  }
  body[data-mode] .mode-button {
    position:relative; z-index:1; padding:10px 18px; border-radius:100px;
    font-size:13px; font-weight:500; transition:color .25s, background .25s;
  }
  body[data-mode] .mode-button:not(.active):hover { background:color-mix(in srgb, var(--ink) 5%, transparent); }
  body[data-mode] .mode-button.active { background:var(--grad); box-shadow:0 8px 20px -8px rgba(37,99,235,0.65); }
  body[data-mode] .mode-nav.has-indicator .mode-button.active { background:transparent; box-shadow:none; }
  body[data-mode] .mode-indicator {
    position:absolute; z-index:0; top:6px; bottom:6px; left:0; width:0; border-radius:100px;
    background:var(--grad); box-shadow:0 8px 22px -8px rgba(37,99,235,0.7);
    transition:transform .5s var(--ease-out), width .5s var(--ease-out);
  }
}

/* ── Panel entrance ── */
body[data-mode] .agent-workspace.app-enter { animation:appEnter .55s var(--ease-out) both; }
@keyframes appEnter { from { opacity:0; transform:translateY(12px); } }

/* ── Workspace headers: cinematic band ── */
body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .workspace-header {
  position:relative; overflow:hidden; isolation:isolate;
  padding:26px 32px; border-radius:24px; border:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(130deg,var(--night) 0%,#11204a 60%,#0b2a42 100%);
  box-shadow:0 24px 50px -28px rgba(7,11,22,0.8);
  color:#fff;
}
body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .workspace-header::before {
  display:block; content:''; position:absolute; inset:-60% -10%; z-index:-1;
  background:
    radial-gradient(30% 60% at 12% 40%, rgba(6,182,212,0.35), transparent 70%),
    radial-gradient(26% 60% at 88% 30%, rgba(124,58,237,0.28), transparent 70%);
  animation:appAurora 16s ease-in-out infinite alternate;
}
body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .workspace-header::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.2px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%); mask-image:linear-gradient(90deg,transparent,#000 60%);
}
body[data-mode] .agent-workspace .workspace-header-content { flex-direction:column; align-items:flex-start; gap:6px; }
body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .workspace-header h1 {
  display:flex; align-items:center; gap:14px; margin:0;
  font-size:clamp(24px,2.4vw,32px); font-weight:400; letter-spacing:-0.03em;
  color:#fff; -webkit-text-fill-color:#fff; background:none;
}
body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .workspace-header h1 .header-icon {
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex-shrink:0;
  background:var(--grad); color:#fff; box-shadow:0 10px 24px -8px rgba(6,182,212,0.7);
}
body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .workspace-header h1 .header-icon svg { width:20px; height:20px; }
@media (min-width: 900px) {
  body[data-mode] .agent-workspace .workspace-header-content p {
    display:block; margin:0 0 0 56px; max-width:640px;
    font-size:13.5px; line-height:1.6; color:rgba(255,255,255,0.62);
  }
  body[data-mode] .agent-workspace .workspace-header-content p strong { color:rgba(255,255,255,0.9); font-weight:600; }
}
body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .workspace-header .timer-chip {
  background:rgba(255,255,255,0.08); color:#a5f3fc; border:1px solid rgba(165,243,252,0.28);
  backdrop-filter:blur(8px); border-radius:100px; padding:8px 14px; font-weight:600; font-size:12px;
  font-variant-numeric:tabular-nums;
}
body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .workspace-header .settings-meta span {
  background:rgba(255,255,255,0.08); color:#a5f3fc; border:1px solid rgba(165,243,252,0.28); border-radius:100px; padding:8px 14px; font-weight:600;
}

/* Progress view filter inside dark header */
body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .progress-view-filter { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); border-radius:100px; padding:4px; gap:2px; }
body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .progress-view-filter button { color:rgba(255,255,255,0.7); border:none; background:transparent; border-radius:100px; transition:all .25s; }
body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .progress-view-filter button:hover:not(.active) { color:#fff; background:rgba(255,255,255,0.08); }
body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .progress-view-filter button.active { background:#fff; color:var(--night); }

/* ── Cards & surfaces ── */
body[data-mode] .sidebar-card,
body[data-mode] #planningPanel .sidebar-card,
body[data-mode] .coaching-sidebar .sidebar-card,
body[data-mode] .workspace-chat,
body[data-mode] .coaching-chat,
body[data-mode] .ai-suggestions-panel,
body[data-mode] .session-notes-card,
body[data-mode] .settings-card,
body[data-mode] .workshop-board-toolbar {
  border-radius:22px; border:1px solid var(--glass-line); border-left-width:1px;
  background:var(--glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:var(--card-shadow);
  transition:box-shadow .35s var(--ease-out), border-color .3s, transform .35s var(--ease-out);
}
body[data-mode] .sidebar-card:hover,
body[data-mode] .ai-suggestions-panel:hover,
body[data-mode] .session-notes-card:hover,
body[data-mode] .settings-card:hover { box-shadow:var(--glow), var(--card-shadow); border-color:color-mix(in srgb, var(--blue) 20%, var(--glass-line)); }
body[data-mode] #planningPanel .sidebar-title,
body[data-mode] .sidebar-title {
  font-size:15px; font-weight:600; letter-spacing:-0.01em; color:var(--ink); -webkit-text-fill-color:var(--ink);
}

/* Session setup steps */
body[data-mode] .setup-step-header { border-radius:14px; transition:background .2s, transform .25s var(--ease-out); }
body[data-mode] .setup-step-header:hover { transform:translateX(2px); }
body[data-mode] .setup-step-number { background:var(--grad); color:#fff; box-shadow:0 6px 14px -6px rgba(37,99,235,.6); }
body[data-mode] .setup-progress-dot { transition:all .4s var(--ease-out); }

/* Fix: Save and Complete phase buttons were crushed side by side */
body[data-mode] .sidebar-actions { flex-direction:column; align-items:stretch; gap:8px; }
body[data-mode] .sidebar-actions .primary-save-btn,
body[data-mode] .sidebar-actions .ghost-btn { width:100%; flex:none; justify-content:center; }
body[data-mode] .primary-save-btn {
  padding:12px 16px; border-radius:14px; letter-spacing:.04em;
  background:var(--grad); box-shadow:0 10px 24px -10px rgba(37,99,235,.65);
}
body[data-mode] .primary-save-btn:hover:not(:disabled) { opacity:1; transform:translateY(-1px); box-shadow:0 14px 28px -10px rgba(37,99,235,.75); }
body[data-mode] .sidebar-actions .ghost-btn { padding:11px 16px; border-radius:14px; }

/* ── Voice stage: Ava's avatar ── */
body[data-mode] .guided-voice-console,
body[data-mode] .coaching-voice-console {
  overflow:hidden; isolation:isolate;
  padding:22px 24px; gap:20px; border-radius:22px;
  border:1px solid color-mix(in srgb, var(--teal) 18%, transparent);
  background:
    radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 60%),
    var(--glass);
}
body[data-mode] .guided-voice-console.listening,
body[data-mode] .guided-voice-console.speaking { border-color:color-mix(in srgb, var(--teal) 40%, transparent); }

body[data-mode] .agent-avatar-bubble,
body[data-mode] #planningPanel .agent-avatar-bubble,
body[data-mode] #coachingPanel .agent-avatar-bubble {
  --ring-speed: 7s;
  --bubble: 104px;
  width:var(--bubble); height:var(--bubble); padding:0; border:none; overflow:visible; isolation:isolate;
  background:transparent;
  box-shadow:0 18px 40px -16px rgba(6,182,212,0.6);
  animation:avaBreath 5.5s ease-in-out infinite;
}
body[data-mode] .voice-console-avatar { --bubble: 104px; }
/* rotating gradient ring */
body[data-mode] .agent-avatar-bubble::before {
  content:''; position:absolute; inset:0; border-radius:50%; z-index:0;
  background:conic-gradient(from var(--ava-ring), var(--teal), var(--blue), #a78bfa, var(--teal));
  animation:avaRing var(--ring-speed) linear infinite;
}
/* soft halo */
body[data-mode] .agent-avatar-bubble::after {
  inset:-10px; border-radius:50%; z-index:-1; box-shadow:none;
  background:radial-gradient(closest-side, rgba(6,182,212,0.28), transparent);
  animation:avaHalo 5.5s ease-in-out infinite;
}
/* Video is enlarged and offset so Ava's face sits in the centre of the ring,
   then clipped to a circle exactly the size of the ring's inner area. */
body[data-mode] .agent-avatar-bubble .agent-avatar-video {
  --s: calc(var(--bubble) - 8px);
  --v: calc(var(--s) * 1.5);
  --fy: 0.37;
  position:absolute; inset:auto; z-index:1;
  width:var(--v); height:var(--v); max-width:none;
  left:calc(4px + (var(--s) - var(--v)) / 2);
  top:calc(4px + var(--s) / 2 - var(--v) * var(--fy));
  object-fit:cover; object-position:50% 0; border:none; border-radius:0;
  background:#0b1220;
  clip-path:circle(calc(var(--s) / 2) at 50% calc(var(--v) * var(--fy)));
  transition:filter .4s;
}
body[data-mode] .agent-avatar-bubble:hover { transform:none; }
body[data-mode] .agent-avatar-bubble:hover .agent-avatar-video { filter:brightness(1.06) saturate(1.08); }

body[data-mode] :is(#planningPanel,#coachingPanel) .agent-avatar-bubble.speaking,
body[data-mode] :is(#planningPanel,#coachingPanel) .agent-avatar-bubble.listening { --ring-speed: 2.2s; }
body[data-mode] :is(#planningPanel,#coachingPanel) .agent-avatar-bubble.speaking { animation:avaTalk 1.6s ease-out infinite; }
body[data-mode] :is(#planningPanel,#coachingPanel) .agent-avatar-bubble.listening { animation:avaListen 1.8s ease-out infinite; }

@keyframes avaRing { to { --ava-ring: 360deg; } }
@keyframes avaBreath { 0%,100% { transform:scale(1); } 50% { transform:scale(1.025); } }
@keyframes avaHalo { 0%,100% { opacity:.55; transform:scale(1); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes avaTalk {
  0%   { box-shadow:0 0 0 0 rgba(6,182,212,0.55), 0 0 0 0 rgba(6,182,212,0.25); }
  100% { box-shadow:0 0 0 14px rgba(6,182,212,0), 0 0 0 28px rgba(6,182,212,0); }
}
@keyframes avaListen {
  0%   { box-shadow:0 0 0 0 rgba(59,130,246,0.55), 0 0 0 0 rgba(59,130,246,0.25); }
  100% { box-shadow:0 0 0 14px rgba(59,130,246,0), 0 0 0 28px rgba(59,130,246,0); }
}

/* Mic button */
body[data-mode] .voice-circle-btn {
  width:56px; height:56px; background:var(--grad);
  box-shadow:0 12px 26px -10px rgba(37,99,235,0.75), 0 0 0 6px rgba(6,182,212,0.12);
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
body[data-mode] .voice-circle-btn:not(:disabled) { animation:micInvite 2.6s ease-out infinite; }
body[data-mode] .voice-circle-btn.listening,
body[data-mode] .voice-circle-btn.speaking,
body[data-mode] .voice-circle-btn[aria-pressed="true"] { animation:none; }
body[data-mode] .voice-circle-btn:disabled {
  animation:none; opacity:1; filter:none; cursor:not-allowed;
  background:color-mix(in srgb, var(--ink) 10%, var(--surface)); color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--glass-line);
}
body[data-mode] .voice-circle-btn:not(:disabled):hover { transform:scale(1.08); }
body[data-mode] .voice-circle-btn svg { width:22px; height:22px; }
@keyframes micInvite {
  0%   { box-shadow:0 12px 26px -10px rgba(37,99,235,0.75), 0 0 0 0 rgba(6,182,212,0.45); }
  70%,100% { box-shadow:0 12px 26px -10px rgba(37,99,235,0.75), 0 0 0 16px rgba(6,182,212,0); }
}
body[data-mode] .voice-mute-btn { border-radius:100px; transition:all .2s; }
body[data-mode] .voice-meta strong { font-size:15px; letter-spacing:-0.01em; }

/* ── Welcome / empty states ── */
body[data-mode] .guided-welcome { padding:44px 24px 32px; gap:10px; }
body[data-mode] .guided-welcome-icon {
  width:64px; height:64px; border-radius:20px; color:#fff;
  background:var(--grad); box-shadow:0 16px 34px -12px rgba(37,99,235,0.6);
  animation:floatY 5s ease-in-out infinite;
}
body[data-mode] .guided-welcome-icon svg { color:#fff; stroke:#fff; }
body[data-mode] .coaching-welcome .guided-welcome-icon {
  background:linear-gradient(135deg,#8b5cf6,var(--blue)) !important; box-shadow:0 16px 34px -12px rgba(124,58,237,0.6);
}
@keyframes floatY { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
body[data-mode] .guided-welcome-title { font-size:24px; font-weight:400; letter-spacing:-0.025em; }
body[data-mode] .guided-welcome-desc { font-size:14px; max-width:400px; line-height:1.6; }
body[data-mode] .guided-welcome-tips { max-width:420px; gap:10px; margin-top:18px; }
body[data-mode] .guided-welcome-tip {
  padding:12px 16px; border-radius:14px; font-size:13.5px; color:var(--ink-3);
  background:var(--surface); border:1px solid var(--glass-line); box-shadow:0 1px 2px rgba(15,23,42,0.04);
  transition:transform .35s var(--ease-out), border-color .3s, box-shadow .3s;
  animation:tipIn .6s var(--ease-out) both;
}
body[data-mode] .guided-welcome-tip:nth-child(2) { animation-delay:.08s; }
body[data-mode] .guided-welcome-tip:nth-child(3) { animation-delay:.16s; }
body[data-mode] .guided-welcome-tip:hover { transform:translateX(4px); border-color:color-mix(in srgb, var(--teal) 35%, transparent); box-shadow:var(--card-shadow); }
@keyframes tipIn { from { opacity:0; transform:translateY(8px); } }

/* Coaching starter cues */
body[data-mode] .prompt-chip {
  border-radius:16px; transition:transform .35s var(--ease-out), box-shadow .35s, border-color .3s, background .3s;
}
body[data-mode] .prompt-chip:hover { transform:translateY(-2px); box-shadow:var(--glow); border-color:color-mix(in srgb, var(--blue) 30%, transparent); }

/* ── Insight modules ── */
body[data-mode] .insight-card { transition:background .3s; }
body[data-mode] .insight-card[data-active="true"] { background:color-mix(in srgb, var(--teal) 6%, transparent); }
body[data-mode] .insight-toggle {
  position:relative; min-width:0; width:40px; height:22px; padding:0; border-radius:100px;
  font-size:0; letter-spacing:0; color:transparent; -webkit-text-fill-color:transparent;
  background:color-mix(in srgb, var(--ink) 14%, transparent); border:none;
  transition:background .3s;
}
body[data-mode] .insight-toggle::after {
  content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:transform .35s var(--ease-out);
}
body[data-mode] .insight-toggle[aria-pressed="true"] { background:var(--grad); border:none; }
body[data-mode] .insight-toggle[aria-pressed="true"]::after { transform:translateX(18px); }
body[data-mode] .insight-toggle:hover { background:color-mix(in srgb, var(--ink) 22%, transparent); }
body[data-mode] .insight-toggle[aria-pressed="true"]:hover { background:var(--grad); filter:brightness(1.05); }

/* Notes */
body[data-mode] .notes-input { border-radius:12px; }
body[data-mode] .notes-add-btn { border-radius:12px; background:var(--grad); border:none; }

/* ── Workshop board ── */
body[data-mode] .wb-btn { border-radius:12px; transition:transform .25s var(--ease-out), background .2s, box-shadow .25s, border-color .2s; }
body[data-mode] .wb-btn:hover { transform:translateY(-1px); }
body[data-mode] .wb-btn-primary { background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 10px 22px -10px rgba(37,99,235,.7); }
body[data-mode] .wb-btn-accent { border-radius:12px; }
body[data-mode] .wb-template-select { border-radius:12px; }
body[data-mode] .workshop-board {
  border-radius:24px; border:1px solid var(--glass-line);
  background-color:var(--surface);
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 14%, transparent) 1px, transparent 1.3px);
  background-size:22px 22px;
  box-shadow:inset 0 2px 12px rgba(15,23,42,0.04), var(--card-shadow);
}
body[data-mode] .workshop-empty-state {
  border-radius:20px; border:1.5px dashed color-mix(in srgb, var(--blue) 30%, transparent);
  background:var(--glass); backdrop-filter:blur(6px);
  animation:floatY 6s ease-in-out infinite;
}
body[data-mode] .workshop-empty-state svg { color:var(--blue); }

/* ── Progress ── */
body[data-mode] .progress-section-label {
  padding:14px 18px; border-radius:16px; border-left:none;
  background:var(--glass); border:1px solid var(--glass-line); box-shadow:var(--card-shadow);
  transition:transform .3s var(--ease-out), box-shadow .3s;
}
body[data-mode] .progress-section-label::before { background:var(--grad); }
body[data-mode] .progress-section-label:hover { transform:translateY(-1px); box-shadow:var(--glow), var(--card-shadow); }
body[data-mode] .progress-stat-highlight {
  position:relative; overflow:hidden; border-radius:20px; border:1px solid var(--glass-line);
  background:var(--glass); box-shadow:var(--card-shadow);
}
body[data-mode] .progress-stat-number {
  font-size:40px; font-weight:300; letter-spacing:-0.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
body[data-mode] .progress-card-enhanced { border-radius:20px; border:1px solid var(--glass-line); box-shadow:var(--card-shadow); transition:transform .35s var(--ease-out), box-shadow .35s; }
body[data-mode] .progress-card-enhanced:hover { transform:translateY(-3px); box-shadow:var(--glow), var(--card-shadow); }
body[data-mode] .progress-empty-state { border-radius:20px; }

/* ── Settings ── */
body[data-mode] .settings-card { padding:28px; }
body[data-mode] .settings-card header h3 svg {
  width:34px; height:34px; padding:8px; border-radius:11px; color:#fff; background:var(--grad);
  box-shadow:0 8px 18px -8px rgba(37,99,235,.6);
}
body[data-mode] .settings-card input,
body[data-mode] .settings-card .profile-value { border-radius:12px; }
body[data-mode] .settings-secondary,
body[data-mode] .settings-primary { border-radius:12px; transition:transform .25s var(--ease-out), box-shadow .25s; }
body[data-mode] .settings-secondary:hover,
body[data-mode] .settings-primary:hover { transform:translateY(-1px); }
body[data-mode] .settings-danger-disclosure h3 svg,
body[data-mode] .settings-danger-disclosure header h3 svg { background:linear-gradient(135deg,#f87171,#dc2626); box-shadow:0 8px 18px -8px rgba(220,38,38,.6); }

/* ── Footer ── */
body[data-mode] .site-footer { background:var(--night); position:relative; overflow:hidden; }
body[data-mode] .site-footer::before {
  content:''; position:absolute; top:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,var(--teal),var(--blue),transparent); opacity:.7;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .workspace-header { padding:18px 20px; border-radius:20px; }
  body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .workspace-header h1 { font-size:22px; }
  body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .workspace-header h1 .header-icon { width:34px; height:34px; border-radius:11px; }
  body[data-mode] .agent-avatar-bubble,
  body[data-mode] #planningPanel .agent-avatar-bubble,
  body[data-mode] #coachingPanel .agent-avatar-bubble,
  body[data-mode] .agent-workspace .guided-voice-console .voice-console-avatar { --bubble: 58px; }
  body[data-mode] .agent-avatar-bubble::after { inset:-6px; }
  body[data-mode] .voice-circle-btn { width:44px; height:44px; }
  body[data-mode] .voice-circle-btn svg { width:19px; height:19px; }
  body[data-mode] .guided-voice-console, body[data-mode] .coaching-voice-console { padding:10px 12px; gap:10px; border-radius:18px; min-width:0; }
  body[data-mode] .workspace-chat, body[data-mode] .coaching-chat { min-width:0; }
  body[data-mode] .mode-nav {
    left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); width:auto;
    padding:6px; border-radius:22px; border:1px solid var(--glass-line);
    background:var(--glass); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
    box-shadow:0 18px 40px -12px rgba(15,23,42,0.35);
  }
  body[data-mode] .mode-button { border-radius:16px; }
  body[data-mode] .mode-button.active { background:var(--grad); box-shadow:0 8px 18px -8px rgba(37,99,235,.7); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-mode]::before,
  body[data-mode] .agent-avatar-bubble,
  body[data-mode] .agent-avatar-bubble::before,
  body[data-mode] .agent-avatar-bubble::after,
  body[data-mode] .voice-circle-btn,
  body[data-mode] .guided-welcome-icon,
  body[data-mode] .guided-welcome-tip,
  body[data-mode] .workshop-empty-state,
  body[data-mode] :is(#planningPanel,#coachingPanel,#workshopPanel,#progressPanel,#settingsPanel) .workspace-header::before { animation:none !important; }
}

/* ═══════════════════════════════════════
   Workshop board: tactile sticky notes
═══════════════════════════════════════ */
body[data-mode] .workshop-board { gap:22px; padding:28px; }
body[data-mode] .sticky-note {
  --tilt: -1.2deg;
  border:none; border-radius:4px 4px 14px 4px;
  padding:22px 16px 12px;
  box-shadow:0 1px 1px rgba(0,0,0,0.06), 0 10px 20px -10px rgba(15,23,42,0.35), inset 0 -18px 30px -24px rgba(0,0,0,0.18);
  transform:rotate(var(--tilt));
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
  animation:notePop .55s var(--ease-out) both;
}
body[data-mode] .sticky-note:nth-child(3n+1) { --tilt: 1.4deg; }
body[data-mode] .sticky-note:nth-child(4n+2) { --tilt: -0.6deg; }
body[data-mode] .sticky-note:nth-child(5n+3) { --tilt: 2deg; }
/* tape */
body[data-mode] .sticky-note::before {
  content:''; position:absolute; top:-9px; left:50%; width:64px; height:20px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(255,255,255,0.55); border:1px solid rgba(255,255,255,0.7);
  box-shadow:0 1px 3px rgba(0,0,0,0.08); backdrop-filter:blur(2px);
}
body[data-mode] .sticky-note:hover {
  transform:rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow:0 2px 2px rgba(0,0,0,0.05), 0 22px 36px -14px rgba(15,23,42,0.45);
  z-index:2;
}
body[data-mode] .sticky-note:focus-within {
  transform:rotate(0deg) translateY(-6px) scale(1.04); z-index:3;
  box-shadow:0 0 0 3px rgba(37,99,235,0.35), 0 24px 40px -14px rgba(15,23,42,0.45);
}
body[data-mode] .sticky-note textarea,
body[data-mode] .sticky-note .sticky-note-input { font-size:14px; line-height:1.5; color:#1f2937; font-weight:500; }
body[data-mode] .sticky-note-actions { opacity:0; transform:translateY(4px); transition:opacity .25s, transform .3s var(--ease-out); }
body[data-mode] .sticky-note:hover .sticky-note-actions,
body[data-mode] .sticky-note:focus-within .sticky-note-actions { opacity:1; transform:none; }
body[data-mode] .sticky-note button { background:rgba(255,255,255,0.75); font-weight:600; padding:4px 10px; }
body[data-mode] .sticky-note-delete:hover { background:#fee2e2; }
@media (hover: none) {
  body[data-mode] .sticky-note-actions { opacity:1; transform:none; }
}
@keyframes notePop {
  0%   { opacity:0; transform:rotate(calc(var(--tilt) - 6deg)) scale(.7) translateY(14px); }
  70%  { opacity:1; transform:rotate(calc(var(--tilt) + 1deg)) scale(1.03); }
  100% { transform:rotate(var(--tilt)) scale(1); }
}
[data-theme="dark"] body[data-mode] .sticky-note { box-shadow:0 12px 26px -10px rgba(0,0,0,0.7), inset 0 -18px 30px -24px rgba(0,0,0,0.25); }

/* Structured templates (SWOT, impact/effort, sprint) */
body[data-mode] .workshop-lane {
  border-radius:20px; border:1px solid var(--glass-line); background:var(--glass);
  backdrop-filter:blur(8px); transition:border-color .3s, box-shadow .3s, transform .3s var(--ease-out);
}
body[data-mode] .workshop-lane:hover { box-shadow:var(--card-shadow); }
body[data-mode] .workshop-lane.drag-over {
  border-color:var(--teal); transform:scale(1.01);
  box-shadow:0 0 0 4px rgba(6,182,212,0.18), var(--glow);
  background:color-mix(in srgb, var(--teal) 8%, var(--glass));
}
body[data-mode] .workshop-lane-title { font-size:14px; font-weight:700; letter-spacing:-0.01em; }
body[data-mode] .workshop-lane-placeholder { border-radius:14px; border-color:color-mix(in srgb, var(--blue) 25%, transparent); }
body[data-mode] .workshop-board[data-template-mode="structured"] .sticky-note { --tilt: 0deg; }

/* Ava's board insights */
body[data-mode] .workshop-insights-panel {
  border-radius:22px; border:1px solid color-mix(in srgb, var(--teal) 25%, transparent);
  background:radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--teal) 10%, transparent), transparent 55%), var(--glass);
  box-shadow:var(--glow), var(--card-shadow); padding:22px 24px;
  animation:appEnter .6s var(--ease-out) both;
}
body[data-mode] .workshop-insights-list { counter-reset:wi; list-style:none; padding:0; display:grid; gap:10px; }
body[data-mode] .workshop-insights-list > li {
  counter-increment:wi; position:relative; padding:14px 16px 14px 52px; border-radius:16px;
  background:var(--surface); border:1px solid var(--glass-line); line-height:1.6;
  animation:insightIn .6s var(--ease-out) both;
}
body[data-mode] .workshop-insights-list > li::before {
  content:counter(wi); position:absolute; left:14px; top:13px; width:26px; height:26px; border-radius:9px;
  display:grid; place-items:center; font:600 12px 'Geist Mono',monospace; color:#fff; background:var(--grad);
}
body[data-mode] .workshop-insights-list > li:nth-child(2) { animation-delay:.1s; }
body[data-mode] .workshop-insights-list > li:nth-child(3) { animation-delay:.2s; }
body[data-mode] .workshop-insights-list > li:nth-child(4) { animation-delay:.3s; }
body[data-mode] .workshop-insights-list > li:nth-child(n+5) { animation-delay:.4s; }

/* ═══════════════════════════════════════
   Live insight modules
═══════════════════════════════════════ */
body[data-mode] .insight-card[data-active="true"] .insight-card-title::after {
  content:'Live'; display:inline-flex; align-items:center; gap:5px; margin-left:8px; padding:2px 8px 2px 18px;
  border-radius:100px; position:relative; vertical-align:middle;
  font:600 9.5px 'Geist Mono',monospace; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green); background:color-mix(in srgb, var(--green) 12%, transparent);
  background-image:radial-gradient(circle at 9px 50%, var(--green) 3px, transparent 3.5px);
  animation:livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse { 50% { background-color:color-mix(in srgb, var(--green) 22%, transparent); } }
/* waiting for the first insight */
body[data-mode] .insight-card[data-active="true"] .insight-stream p[role="status"] {
  background:linear-gradient(90deg, var(--muted) 0%, var(--ink) 40%, var(--muted) 60%) 0 0 / 220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 2.4s linear infinite;
}
@keyframes shimmer { to { background-position:-220% 0; } }
/* a fresh insight arrives */
body[data-mode] .insight-current-text {
  position:relative; padding:12px 14px; border-radius:14px; margin-top:6px;
  font-size:12.5px; line-height:1.6; color:var(--ink-3);
  background:var(--surface); border:1px solid color-mix(in srgb, var(--teal) 25%, transparent);
  box-shadow:0 8px 20px -14px rgba(6,182,212,0.6);
  animation:insightIn .7s var(--ease-out) both, insightFlash 1.6s ease-out .2s both;
}
body[data-mode] .insight-current-text::before {
  content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:var(--grad);
}
@keyframes insightIn { from { opacity:0; transform:translateY(10px) scale(.98); } }
@keyframes insightFlash {
  0%   { box-shadow:0 0 0 0 rgba(6,182,212,0.45), 0 8px 20px -14px rgba(6,182,212,0.6); }
  100% { box-shadow:0 0 0 10px rgba(6,182,212,0), 0 8px 20px -14px rgba(6,182,212,0.6); }
}
body[data-mode] .insight-actions button,
body[data-mode] .insight-copy-btn,
body[data-mode] .insight-refresh-btn { border-radius:100px; transition:transform .25s var(--ease-out), background .2s; }
body[data-mode] .insight-refresh-btn:hover svg { transform:rotate(180deg); transition:transform .5s var(--ease-out); }
body[data-mode] .suggestion-history summary { cursor:pointer; color:var(--blue); font-weight:600; font-size:11.5px; }

@media (prefers-reduced-motion: reduce) {
  body[data-mode] .sticky-note,
  body[data-mode] .workshop-insights-list > li,
  body[data-mode] .insight-current-text,
  body[data-mode] .insight-card-title::after,
  body[data-mode] .insight-stream p[role="status"] { animation:none !important; }
}

/* Structured lanes: compact notes, coloured quadrant markers */
body[data-mode] .workshop-board[data-template-mode="structured"] .sticky-note { min-height:92px; padding:18px 14px 10px; }
body[data-mode] .workshop-lane { --lane: var(--teal); }
body[data-mode] .workshop-lane:nth-child(4n+2) { --lane: #ef4444; }
body[data-mode] .workshop-lane:nth-child(4n+3) { --lane: var(--blue); }
body[data-mode] .workshop-lane:nth-child(4n+4) { --lane: #f59e0b; }
body[data-mode] .workshop-lane { border-top:3px solid var(--lane); }
body[data-mode] .workshop-lane-title::before { background:var(--lane) !important; border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb, var(--lane) 20%, transparent); }
body[data-mode] .workshop-board[data-template-mode="structured"] .sticky-note textarea { min-height:44px; }

/* ═══════════════════════════════════════
   Live voice meter (driven by js/app-experience.js)
═══════════════════════════════════════ */
/* Ava's ring glows and swells with her actual voice level */
body[data-mode] :is(#planningPanel,#coachingPanel) .guided-voice-console.is-live .agent-avatar-bubble {
  --lvl: 0;
  --ring-speed: 3s;
  animation:none;
  box-shadow:
    0 0 0 calc(var(--lvl) * 10px) rgba(6,182,212,0.22),
    0 0 0 calc(var(--lvl) * 22px) rgba(6,182,212,0.10),
    0 0 calc(18px + var(--lvl) * 42px) rgba(6,182,212,calc(0.25 + var(--lvl) * 0.5));
  transform:scale(calc(1 + var(--lvl) * 0.06));
  transition:transform .08s linear;
}
body[data-mode] .guided-voice-console.is-live .agent-avatar-bubble::after {
  animation:none; opacity:calc(0.45 + var(--lvl, 0) * 0.55); transform:scale(calc(1 + var(--lvl, 0) * 0.4));
}
/* Mic button pulses with your voice */
body[data-mode] :is(#planningPanel,#coachingPanel) .guided-voice-console.is-live .voice-circle-btn {
  --mic: 0;
  animation:none;
  box-shadow:0 12px 26px -10px rgba(37,99,235,0.75), 0 0 0 calc(5px + var(--mic) * 16px) rgba(59,130,246,calc(0.12 + var(--mic) * 0.25));
}
/* Consistent mic colours: blue while listening, teal while Ava speaks (replaces the old pink) */
body[data-mode] :is(#planningPanel,#coachingPanel) .voice-circle-btn.listening { background:linear-gradient(135deg,#3b82f6,#6366f1); animation:none; }
body[data-mode] :is(#planningPanel,#coachingPanel) .voice-circle-btn.speaking { background:var(--grad); animation:none; }

/* Sound wave */
body[data-mode] .voice-wave {
  display:flex; align-items:center; justify-content:center; gap:3px; height:34px; margin-top:12px;
  opacity:0; transform:translateY(4px); transition:opacity .4s, transform .4s var(--ease-out);
}
body[data-mode] .guided-voice-console.is-live .voice-wave { opacity:1; transform:none; }
body[data-mode] .voice-wave span {
  flex:1; max-width:5px; height:100%; border-radius:4px; transform:scaleY(.08);
  background:color-mix(in srgb, var(--ink) 18%, transparent);
  transition:transform .07s linear, background .3s;
}
body[data-mode] .guided-voice-console[data-voice="ava"] .voice-wave span { background:linear-gradient(var(--teal),var(--blue)); }
body[data-mode] .guided-voice-console[data-voice="you"] .voice-wave span { background:linear-gradient(#60a5fa,#6366f1); }
body[data-mode] .guided-voice-console .voice-meta { align-self:center; }

/* ═══════════════════════════════════════
   Live transcript
═══════════════════════════════════════ */
body[data-mode] .messages { background:transparent; padding:18px 8px 18px 4px; gap:14px; scroll-behavior:smooth; }
body[data-mode] .message {
  position:relative; max-width:78%; padding:12px 16px; border-radius:18px;
  font-size:14px; line-height:1.6; box-shadow:0 1px 2px rgba(15,23,42,0.05);
  animation:bubbleIn .45s var(--ease-out) both;
}
@keyframes bubbleIn { from { opacity:0; transform:translateY(10px) scale(.97); } }
body[data-mode] .message:hover { transform:none; }
body[data-mode] .message.user {
  margin-left:auto; border-bottom-right-radius:6px; color:#fff;
  background:linear-gradient(135deg,#3b82f6,#6366f1);
  box-shadow:0 10px 22px -12px rgba(79,70,229,0.6);
  transform-origin:right bottom;
}
body[data-mode] .message.agent {
  margin-left:46px; border-bottom-left-radius:6px; color:var(--ink);
  background:var(--glass); border:1px solid var(--glass-line);
  transform-origin:left bottom;
}
/* Ava's face beside each of her turns */
body[data-mode] .message.agent::before {
  content:''; position:absolute; left:-46px; bottom:0; width:34px; height:34px; border-radius:50%;
  background:url('../images/ava-presenter-poster.jpg') 50% 16% / 300% auto no-repeat, #0b1220;
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px color-mix(in srgb, var(--teal) 60%, transparent);
}
/* words still arriving */
body[data-mode] .message.streaming { opacity:1; }
body[data-mode] .message.streaming::after {
  content:''; display:inline-block; width:2px; height:1.05em; margin-left:3px; vertical-align:-3px;
  background:currentColor; border-radius:2px; animation:caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity:0; } }
body[data-mode] .message.agent.streaming { border-color:color-mix(in srgb, var(--teal) 40%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 12%, transparent); }
/* Ava is thinking: animated dots instead of "..." */
body[data-mode] .message.agent:is(#typing-guided,#typing-coaching) { color:transparent; width:72px; min-height:42px; }
body[data-mode] .message.agent:is(#typing-guided,#typing-coaching)::after {
  content:''; position:absolute; left:18px; top:50%; width:36px; height:8px; transform:translateY(-50%);
  background:
    radial-gradient(circle 4px, var(--teal) 98%, transparent) 0 50% / 12px 8px no-repeat,
    radial-gradient(circle 4px, var(--teal) 98%, transparent) 12px 50% / 12px 8px no-repeat,
    radial-gradient(circle 4px, var(--teal) 98%, transparent) 24px 50% / 12px 8px no-repeat;
  animation:dots 1.2s ease-in-out infinite;
}
@keyframes dots {
  0%,100% { opacity:.35; }
  50% { opacity:1; }
}
@media (max-width: 768px) {
  body[data-mode] .message { max-width:86%; font-size:14px; }
  body[data-mode] .message.agent { margin-left:38px; }
  body[data-mode] .message.agent::before { left:-38px; width:28px; height:28px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-mode] .message, body[data-mode] .message.streaming::after { animation:none !important; }
}