:root {
  --brand-black: #000000;
  --brand-white: #ffffff;
  --brand-purple: #7300cd;
  --brand-dark-purple: #390066;
  --brand-blue: #0042ff;
  --brand-midnight: #151583;
  --brand-aqua: #00bbb4;
  --brand-red: #fb4b37;
  --brand-orange: #ff8204;
  --brand-mustard: #ffbd35;
  --brand-purple-tint: #f4e5ff;
  --brand-aqua-tint: #ecf9f5;
  --brand-blue-tint: #e8e8fc;
  --brand-red-tint: #ffe8e6;
  --navy: var(--brand-midnight);
  --purple: var(--brand-purple);
  --purple2: var(--brand-dark-purple);
  --green: var(--brand-aqua);
  --lime: var(--brand-mustard);
  --ink: #09091f;
  --soft: #f8f6fa;
}

html, body, button, input, textarea, select { font-family: "Inter", Arial, sans-serif; }
body { color: var(--ink); }
h1, h2, h3, h4, p, strong, small, span, button, input, textarea { letter-spacing: normal; }

.sidebar {
  background: linear-gradient(165deg, #08081f 0%, var(--brand-midnight) 58%, var(--brand-dark-purple) 130%);
}
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; text-decoration: none; }
.brand img { display: block; width: 112px; height: auto; }
.brand small { color: #bd78f2; font: 600 12px/1 "Inter", sans-serif; letter-spacing: .01em; }
.nav-item { font-family: "Inter", sans-serif; }
.nav-item.active { background: rgba(115, 0, 205, .34); box-shadow: inset 3px 0 0 #bd78f2; }

.cody-welcome h2,
.page-heading h2,
.learner-welcome h1,
.result-hero h2 { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; }
.cody-plan-wrap > h3,
.cody-active-action h3,
.panel-heading h3,
.form-section-title h3,
.cody-modern-metrics strong,
.rep-card h3,
.practice-brief h2,
.result-score strong { font-family: "Inter", Arial, sans-serif; }
.primary,
.cody-active-action .primary,
.practice-composer button { background: var(--brand-purple); color: #fff; box-shadow: none; }
.primary:hover,
.practice-composer button:hover { background: var(--brand-dark-purple); }
.cody-timeline { background: linear-gradient(120deg, #fff, var(--brand-purple-tint)); }
.cody-timeline:before { background: #dfbaf8; }
.cody-timeline:after,
.assignment-progress i,
.result-dimensions b { background: var(--brand-purple); }
.cody-timeline > div > span,
.cody-active-action > span,
.cody-modern-metrics article > span { background: var(--brand-purple-tint); color: var(--brand-purple); }
.cody-timeline .active > span { background: var(--brand-purple); color: #fff; box-shadow: 0 0 0 9px rgba(115,0,205,.1); }
.cody-timeline .active strong { color: var(--brand-purple); }
.cody-modern-metrics article > span.green { background: var(--brand-aqua-tint); color: #007c77; }
.cody-training-photo { border-radius: 84px 18px 18px 18px; }
.cody-training-photo figcaption { background: var(--brand-mustard); color: #211600; }
.invite-result { background: linear-gradient(125deg, var(--brand-midnight), var(--brand-dark-purple)); }
.invite-copy #email-invite { color: var(--brand-purple) !important; }
.persona-choice input:checked + span,
.assignment-card:focus-within { border-color: var(--brand-purple); }
.assignment-module{display:grid;gap:14px;margin:0 0 30px}
.assignment-module-title{padding:18px 22px;border-radius:16px;background:linear-gradient(110deg,#fff,var(--brand-purple-tint));border:1px solid #ead7f7}
.assignment-module-title span{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--brand-purple)}
.assignment-module-title h3{margin:4px 0 2px;font:400 28px/1.1 "DM Serif Display",Georgia,serif}
.assignment-module-title p{margin:0;color:#6b6575;font-size:11px}

.learner-header { background: linear-gradient(100deg, #08081f, var(--brand-midnight)); }
.learner-brand { margin: 0; flex-direction: row; align-items: center; gap: 15px; }
.learner-brand img { width: 100px; }
.learner-brand small { padding-left: 15px; border-left: 1px solid rgba(255,255,255,.28); color: #e8d1fa; font-size: 11px; }
.learner-welcome { background: linear-gradient(125deg, var(--brand-midnight), var(--brand-purple)); border-radius: 70px 20px 20px 20px; }
.learner-welcome h1 { font-size: 36px; }
.learner-welcome > div > p:last-child { color: #f0ddff; }
.rep-persona { background: var(--brand-purple) !important; }
.rep-card button { background: var(--brand-midnight); }
.rep-card.completed button { background: var(--brand-aqua-tint); color: #007c77; }
.pill.purple { background: var(--brand-purple-tint); color: var(--brand-dark-purple); }
.chat-message.agent .chat-bubble { background: var(--brand-purple); }
.practice-chat-head small i { background: var(--brand-aqua); }
.coach-tip { background: var(--brand-aqua-tint); }
.coach-tip strong { color: #007c77; }
.result-hero { background: linear-gradient(120deg, var(--brand-midnight), var(--brand-dark-purple)); border-radius: 70px 20px 20px 20px; }
.result-hero.failed { background: linear-gradient(120deg, #8f1717, var(--brand-red)); }
.result-score { border-color: var(--brand-mustard); }

.sidebar-bottom { margin-top:auto; }
.sidebar-bottom .trainer-card { margin-top:0; }
.sidebar { overflow-y:auto; scrollbar-width:none; }
.sidebar::-webkit-scrollbar { display:none; }
.sidebar-bottom { position:fixed; left:18px; bottom:18px; width:200px; margin:0; padding-top:14px; z-index:20; background:linear-gradient(180deg,transparent 0%,rgba(21,21,131,.96) 22%,rgba(57,0,102,.98) 100%); }
.account-level-switcher { margin:0 0 14px; padding:8px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(0,0,0,.2); box-shadow:0 10px 24px rgba(0,0,0,.18); }
.account-level-switcher > small { display:block; margin:0 4px 7px; color:rgba(255,255,255,.55); font:600 8px/1 "Inter",sans-serif; letter-spacing:.14em; }
.account-level-switcher > div { display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border:1px solid rgba(255,255,255,.12); border-radius:11px; background:rgba(0,0,0,.18); }
.account-level-switcher a { min-width:0; display:flex; align-items:center; justify-content:center; gap:5px; padding:8px 6px; border-radius:7px; color:rgba(255,255,255,.63); font:600 10px/1 "Inter",sans-serif; text-decoration:none; transition:.18s ease; }
.account-level-switcher a .material-symbols-rounded { font-size:15px; }
.account-level-switcher a:hover { color:#fff; background:rgba(255,255,255,.08); }
.account-level-switcher a.active { color:#fff; background:var(--brand-purple); box-shadow:0 4px 12px rgba(0,0,0,.2); }

@media (max-width: 1080px) and (min-width: 761px) {
  .sidebar-bottom { left:10px; bottom:12px; width:58px; padding-top:8px; }
  .sidebar-bottom .trainer-card { display:none; }
  .account-level-switcher > small { display:none; }
  .account-level-switcher > div { grid-template-columns:1fr; }
  .account-level-switcher a { display:flex; font-size:0; padding:8px; }
  .account-level-switcher a .material-symbols-rounded { font-size:19px; }
}

@media (max-width: 760px) {
  .sidebar-bottom { display:block; position:fixed; left:12px; bottom:76px; width:190px; margin:0; padding:0; z-index:30; background:transparent; }
  .sidebar-bottom .trainer-card { display:none; }
  .account-level-switcher { margin:0; background:linear-gradient(145deg,var(--brand-midnight),var(--brand-dark-purple)); border-color:rgba(255,255,255,.24); }
  .account-level-switcher > small { display:block; }
  .account-level-switcher > div { grid-template-columns:1fr 1fr; }
  .account-level-switcher a { display:flex; font-size:10px; padding:9px 7px; }
  .account-level-switcher a .material-symbols-rounded { font-size:17px; }
  .brand img { width: 74px; }
  .learner-brand small { display: none; }
}

/* Keep the full transcript reviewable without moving the reply box off screen. */
.practice-shell,
.practice-chat { min-height:0; }
.practice-chat { overflow:hidden; }
.practice-messages {
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scroll-behavior:smooth;
}
.practice-composer { position:relative; z-index:2; background:#fff; }

/* Compact enrollment categories reveal their sub-topics only when opened. */
.assignment-list { gap:10px; }
.assignment-module { border:1px solid var(--brand-line); border-radius:16px; overflow:hidden; background:#fff; transition:border-color .18s ease,box-shadow .18s ease; }
.assignment-module.expanded { border-color:rgba(115,0,205,.34); box-shadow:0 10px 25px rgba(21,21,131,.07); }
.assignment-module-toggle { width:100%; min-height:72px; padding:13px 17px; border:0; background:#fff; color:var(--brand-ink); display:flex; align-items:center; gap:13px; text-align:left; }
.assignment-module-toggle:hover { background:var(--brand-lavender-tint); }
.assignment-module-icon { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:none; background:var(--brand-lavender-tint); color:var(--brand-purple); }
.assignment-module-copy { min-width:0; flex:1; display:grid; grid-template-columns:1fr auto; align-items:center; gap:2px 14px; }
.assignment-module-copy small { grid-column:1/-1; color:var(--brand-ink-muted); font-size:8px; font-weight:700; letter-spacing:.12em; }
.assignment-module-copy strong { font:650 15px/1.2 Inter,sans-serif; }
.assignment-module-copy em { font-style:normal; color:var(--brand-ink-muted); font-size:10px; }
.assignment-module-chevron { color:var(--brand-purple); }
.assignment-module.empty .assignment-module-toggle { opacity:.64; }
.assignment-module-body { display:grid; gap:10px; padding:12px; border-top:1px solid var(--brand-line); background:#faf9fc; }
.assignment-module-body[hidden] { display:none; }
.assignment-module-body .assignment-card { background:#fff; }
.assignment-module-empty { padding:20px; border:1px dashed var(--brand-line); border-radius:12px; color:var(--brand-ink-muted); text-align:center; font-size:11px; }

/* Interaction polish and accessible keyboard states. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible { outline:3px solid rgba(115,0,205,.28); outline-offset:2px; }

/* Native command consoles use their own cursor and field treatment. */
input.sabre-command-input:focus,
input.sabre-command-input:focus-visible,
input.amadeus-command-input:focus,
input.amadeus-command-input:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
button:disabled,
textarea:disabled { cursor:not-allowed; opacity:.55; }
.practice-composer textarea:disabled { color:var(--brand-ink-muted); }
.typing-dots { display:flex; align-items:center; gap:5px; min-width:54px; }
.typing-dots i { width:6px; height:6px; border-radius:50%; background:#8f8999; animation:txTyping 1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay:.14s; }
.typing-dots i:nth-child(3) { animation-delay:.28s; }
@keyframes txTyping { 50% { transform:translateY(-4px); opacity:.55; } }
.page.active,
#assignment-view:not(.hidden),
#practice-view:not(.hidden),
#result-view:not(.hidden) { animation:navanEnter .18s ease-out; }
.persona-choice input:focus-visible + label { outline:3px solid rgba(115,0,205,.28); outline-offset:2px; }
@keyframes navanEnter { from { opacity:.45; transform:translateY(4px); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

@media (max-width:760px) {
  .assignment-module-copy { grid-template-columns:1fr; }
  .assignment-module-copy small { grid-column:auto; }
  .assignment-module-copy em { margin-top:3px; }
}

/* Persistent account-role dropdown. */
.persistent-role-switch{position:fixed;left:16px;bottom:16px;z-index:9999;width:210px;font-family:Inter,Arial,sans-serif}
.role-switch-trigger{width:100%;min-height:56px;border:1px solid rgba(255,255,255,.24);border-radius:14px;padding:9px 11px;display:grid;grid-template-columns:28px 1fr 22px;gap:9px;align-items:center;color:#fff;text-align:left;background:linear-gradient(145deg,#151583,#390066);box-shadow:0 14px 32px rgba(0,0,0,.34)}
.role-switch-trigger>span:nth-child(2){min-width:0}.role-switch-trigger small,.role-switch-trigger strong{display:block}.role-switch-trigger small{color:rgba(255,255,255,.67);font-size:8px;font-weight:700;letter-spacing:.14em}.role-switch-trigger strong{margin-top:2px;color:#fff;font-size:12px;font-weight:650}.role-switch-trigger>.material-symbols-rounded:first-child{font-size:21px;color:#dafa70}.role-switch-chevron{justify-self:end;font-size:19px;transition:transform .18s ease}.persistent-role-switch.open .role-switch-chevron{transform:rotate(180deg)}
.role-switch-menu{display:grid;gap:3px;margin-bottom:8px;padding:7px;border:1px solid #e7e1ec;border-radius:14px;background:#fff;box-shadow:0 16px 38px rgba(21,21,70,.22)}.role-switch-menu[hidden]{display:none}.role-switch-menu button{width:100%;min-height:40px;padding:9px 10px;border:0;border-radius:9px;display:flex;align-items:center;gap:9px;background:transparent;color:#201a32;text-align:left;font-size:11px;font-weight:600}.role-switch-menu button:hover,.role-switch-menu button:focus-visible{background:#f3ecfa}.role-switch-menu button[aria-current="page"]{background:#eee5f7;color:#7300cd}.role-switch-menu .material-symbols-rounded{font-size:18px;color:#7300cd}
.role-switch-status{position:absolute;left:0;bottom:64px;width:100%;padding:9px 11px;border-radius:10px;background:#fff5de;color:#765115;box-shadow:0 10px 24px rgba(21,21,70,.16);font-size:10px;line-height:1.4;opacity:0;transform:translateY(5px);pointer-events:none;transition:.18s ease}.role-switch-status.show{opacity:1;transform:none}
@media(max-width:1080px) and (min-width:761px){
  .persistent-role-switch{left:11px;bottom:12px;width:60px}
  .role-switch-trigger{min-height:54px;padding:8px;display:grid;grid-template-columns:1fr;place-items:center}
  .role-switch-trigger>span:nth-child(2),.role-switch-chevron{display:none}
  .role-switch-menu{position:absolute;left:0;bottom:62px;width:210px;margin:0}
  .role-switch-status{left:0;bottom:62px;width:210px}
}
@media(max-width:760px){
  .persistent-role-switch{left:8px;bottom:8px;width:50px}
  .role-switch-trigger{min-height:50px;padding:7px;display:grid;grid-template-columns:1fr;place-items:center}
  .role-switch-trigger>span:nth-child(2),.role-switch-chevron{display:none}
  .role-switch-menu{position:absolute;left:0;bottom:58px;width:210px;max-width:calc(100vw - 16px);margin:0}
  .role-switch-status{left:0;bottom:58px;width:210px;max-width:calc(100vw - 16px)}
  .sidebar nav{padding-left:58px}
}

.manager-recommendation-banner{margin:-4px 0 22px;padding:15px 17px;border:1px solid #e1cef1;border-radius:13px;display:flex;gap:11px;background:linear-gradient(135deg,#f6ecfd,#fff)}
.manager-recommendation-banner>.material-symbols-rounded{color:#7300cd}
.manager-recommendation-banner small,.manager-recommendation-banner strong{display:block}
.manager-recommendation-banner small{color:#8d6aa5;font-size:8px;font-weight:750;letter-spacing:.1em}
.manager-recommendation-banner strong{margin-top:4px;font-size:13px}
.manager-recommendation-banner p{margin:4px 0 0;color:#706d7e;font-size:9px}
.persistent-role-switch.switching{pointer-events:none}.persistent-role-switch.switching .role-switch-trigger{opacity:.72;transform:scale(.985)}
.role-switch-trigger>span:nth-child(2){min-width:0;overflow:hidden}.role-switch-trigger strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.role-switch-menu button{white-space:nowrap}.role-switch-trigger:hover{border-color:rgba(255,255,255,.4);box-shadow:0 16px 38px rgba(0,0,0,.28)}
@view-transition{navigation:auto}::view-transition-old(root){animation:role-view-out .08s ease both}::view-transition-new(root){animation:role-view-in .12s ease both}@keyframes role-view-out{to{opacity:.92}}@keyframes role-view-in{from{opacity:.92}to{opacity:1}}
