/* ------------------------------------------------------------------
   NudgeFlow base styles + palette
-------------------------------------------------------------------*/
:root {
  --nf-primary: #2A0E5C;
  --nf-primary-light: #5A3E9C;
  --nf-accent-pink: #FF0F6F;
  --nf-accent-pink-mid: #FF336E;
  --nf-accent-orange: #FF7A30;
  --nf-bg: #F7F8FA;
  --nf-surface: #FFFFFF;
  --nf-border: #E0E3E9;
  --nf-text: #1C1C28;
  --nf-text-muted: #515165;
  --nf-success: #2CC98F;
  --nf-warning: #FFB444;
  --nf-error: #E64A4A;
  --nf-info: #2D8CFF;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--nf-bg);
  color: var(--nf-text);
}

/* Bootstrap focus ring tweak */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #ffffff, 0 0 0 0.25rem var(--nf-accent-pink-mid);
}

/* ------------------------------------------------------------------
   Layout & header
-------------------------------------------------------------------*/
.nf-page {
  padding: 1.5rem;
}

@media (min-width: 992px) {
  .nf-page {
    padding: 2rem 3rem;
  }
}

.nf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.nf-header-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.nf-logo-circle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--nf-accent-pink), var(--nf-accent-orange));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1rem;
}

.nf-header-text {
  display: flex;
  flex-direction: column;
}

.nf-app-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--nf-primary);
}

.nf-app-tagline {
  font-size: 0.85rem;
  color: var(--nf-text-muted);
}

.nf-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nf-user-pill {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 999px;
  padding: 0.35rem 0.75rem 0.35rem 0.35rem;
  box-shadow: 0 4px 12px rgba(42, 14, 92, 0.08);
}

.nf-user-initials {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background-color: var(--nf-primary-light);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  margin-right: 0.5rem;
}

.nf-user-info {
  display: flex;
  flex-direction: column;
}

.nf-user-name {
  font-size: 0.9rem;
  font-weight: 600;
}

.nf-user-role {
  font-size: 0.75rem;
  color: var(--nf-text-muted);
}

/* ------------------------------------------------------------------
   Buttons
-------------------------------------------------------------------*/
.nf-btn-primary {
  background: linear-gradient(135deg, var(--nf-accent-pink), var(--nf-accent-orange));
  border: none;
  color: #ffffff;
  font-weight: 600;
  padding-inline: 1rem;
  border-radius: 999px;
}

  .nf-btn-primary:hover {
    filter: brightness(1.05);
  }

.nf-btn-secondary {
  background-color: var(--nf-primary);
  border: none;
  color: #ffffff;
  font-weight: 600;
  border-radius: 999px;
  padding-inline: 1rem;
}

  .nf-btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

.nf-btn-ghost {
  background: transparent;
  border-radius: 999px;
  border: 1px solid rgba(42, 14, 92, 0.1);
  color: var(--nf-primary);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
}

  .nf-btn-ghost span {
    font-size: 0.85rem;
  }

.nf-btn-icon {
  background: transparent;
  border: 1px solid var(--nf-border);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--nf-text-muted);
  font-size: 18px;
  font-weight: 600;
  transition: all 0.2s ease;
}

  .nf-btn-icon:hover {
    background-color: var(--nf-bg);
    color: var(--nf-primary);
    border-color: var(--nf-primary);
  }

/* Button group */
.nf-btn-group {
  display: flex;
  gap: 0;
  margin-bottom: 0.75rem;
}

.nf-btn-group-item {
  flex: 1;
  border-radius: 0;
}

.nf-btn-group-item:first-child {
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
}

.nf-btn-group-item:last-child {
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
}

.nf-btn-group-item:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}
#chatPanel{
  padding: 0rem;
}

/* ------------------------------------------------------------------
   Cards & form elements
-------------------------------------------------------------------*/
.nf-card {
  background-color: var(--nf-surface);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  border: 1px solid var(--nf-border);
  box-shadow: 0 8px 24px rgba(42, 14, 92, 0.06);
  margin-bottom: 1rem;
}

.nf-card-tight {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.nf-card-header {
  margin-bottom: 0.75rem;
}

.nf-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.nf-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nf-primary);
  margin: 0;
}

.nf-card-subtitle {
  font-size: 0.85rem;
  color: var(--nf-text-muted);
  margin: 0.25rem 0 0;
}

.nf-form-group {
  margin-bottom: 0.75rem;
}

.nf-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--nf-text-muted);
}

.nf-label-inline {
  font-size: 0.8rem;
  color: var(--nf-text-muted);
  margin-bottom: 0.2rem;
}

.nf-select {
  border-radius: 999px;
  border-color: var(--nf-border);
  font-size: 0.9rem;
  padding-inline: 0.8rem;
}

.nf-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.nf-session-meta {
  text-align: right;
}

.nf-session-label {
  font-size: 0.75rem;
  color: var(--nf-text-muted);
}

.nf-session-value {
  font-size: 0.9rem;
  font-weight: 600;
}

.nf-hint {
  font-size: 0.8rem;
  color: var(--nf-text-muted);
  margin-top: 0.5rem;
}

/* ------------------------------------------------------------------
   Main layout columns — v2: stage-col (left) + coach-col (right)
-------------------------------------------------------------------*/
.nf-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* Cap the content width and centre on wide screens — matches the
     v2 mock so the grid doesn't drift apart on ultrawide displays. */
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.nf-column {
  min-width: 0;
}

@media (min-width: 992px) {
  .nf-main {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
    align-items: flex-start;
    gap: 1.5rem;
  }
}

/* v2 column wrappers — stage on the left, coach on the right.
   Coexist with legacy .nf-column-conversation / .nf-column-coach
   so existing CSS hooks keep working through the port. */
.nf-stage-col,
.nf-coach-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nf-stage-col > *:first-child,
.nf-coach-col > *:first-child {
  margin-top: 0;
}

/* Column specifics */
.nf-column-conversation {
  display: flex;
  flex-direction: column;
  align-self: start;
}

.nf-column-conversation > *:first-child {
  margin-top: 0;
}

.nf-column-coach {
  display: flex;
  flex-direction: column;
  align-self: start;
}

.nf-column-coach > *:first-child {
  margin-top: 0;
}

/* Fallback for status panel hidden class from JS */
#statusPanelWrapper.hidden #statusPanel {
  display: none;
}

/* ------------------------------------------------------------------
   Conversation Controls Bar — Single row + collapsible drawer
-------------------------------------------------------------------*/
.nf-controls-bar {
  background: var(--nf-surface);
  border: 1px solid var(--nf-border);
  border-radius: 16px;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(42, 14, 92, 0.06);
}

/* --- Main row: never wraps --- */
.nf-controls-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  overflow: hidden;
}

.nf-controls-row .nf-status-pill {
  font-size: 1rem;
  padding: 0.35rem 1rem;
  text-align: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* VU + mute grouped together for silent-mode hide/show */
.nf-mic-group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 0%;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.nf-mic-group #vuContainer {
  flex: 1 1 0%;
  min-width: 0;
  height: 24px;
  margin: 0;
}

.nf-mic-group .nf-icon-btn {
  flex: 0 0 36px;
}

/* Voice / Text mode toggle — segmented pill in the controls bar.
   Replaces the old "Silent mode" launch button: users start in voice
   mode and can switch to text from here at any time. */
.nf-mode-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
}

.nf-mode-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

.nf-mode-toggle-track {
  display: inline-flex;
  align-items: stretch;
  background: var(--nf-bg);
  border: 1px solid var(--nf-border);
  border-radius: 999px;
  padding: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--nf-text-muted);
  transition: border-color 0.2s ease;
}

.nf-mode-toggle-option {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.nf-mode-toggle input:checked ~ .nf-mode-toggle-track .nf-mode-toggle-option--voice,
.nf-mode-toggle input:not(:checked) ~ .nf-mode-toggle-track .nf-mode-toggle-option--text {
  background: var(--nf-primary);
  color: #fff;
}

.nf-mode-toggle:hover .nf-mode-toggle-track {
  border-color: var(--nf-primary-light);
}

.nf-mode-toggle input:focus-visible ~ .nf-mode-toggle-track {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--nf-accent-pink-mid);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Icon buttons (mute, settings, report) */
.nf-icon-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  border: 1px solid var(--nf-border);
  background: var(--nf-surface);
  color: var(--nf-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
  flex: 0 0 36px;
}

.nf-icon-btn:hover {
  background: var(--nf-bg);
  color: var(--nf-text);
  border-color: var(--nf-text-muted);
}

.nf-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.nf-icon-btn--mute.nf-muted {
  background: var(--nf-error);
  border-color: var(--nf-error);
  color: #fff;
}

.nf-icon-btn--active {
  background: var(--nf-bg);
  color: var(--nf-text);
  border-color: var(--nf-accent-pink);
}

.nf-icon-btn--report:not(:disabled):hover {
  background: linear-gradient(135deg, var(--nf-accent-pink), var(--nf-accent-orange));
  border-color: transparent;
  color: #fff;
}

.nf-icon-btn--sm {
  width: 28px;
  height: 28px;
}

/* --- Settings drawer (collapsed by default) --- */
.nf-settings-drawer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--nf-border);
}

/* --- Session Controls Row (Pause / Restart / End) --- */
.nf-session-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.625rem;
  margin-top: 0.625rem;
  border-top: 1px solid var(--nf-border);
}

.nf-session-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  border: 1px solid var(--nf-border);
  background: var(--nf-surface);
  color: var(--nf-text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}

.nf-session-btn:hover {
  color: var(--nf-text);
  border-color: var(--nf-text-muted);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.nf-session-btn-icon {
  flex-shrink: 0;
}

/* Pause button — blue accent when paused (active) */
.nf-session-btn--pause.nf-paused {
  background: rgba(45, 140, 255, 0.12);
  color: var(--nf-info);
  border-color: rgba(45, 140, 255, 0.3);
}

/* Restart button */
.nf-session-btn--restart:hover {
  color: var(--nf-info);
  border-color: rgba(45, 140, 255, 0.3);
}

/* End button — red/destructive */
.nf-session-btn--end:hover {
  background: rgba(230, 74, 74, 0.08);
  color: var(--nf-error);
  border-color: rgba(230, 74, 74, 0.3);
}

/* Paused status pill */
.nf-status-pill-paused {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.18), rgba(255, 200, 50, 0.18));
  color: #b37400;
}

.nf-drawer-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--nf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   Suggestion Panel (Simple)
-------------------------------------------------------------------*/
.nf-suggestion-panel-simple {
  background-color: var(--nf-surface);
  border: 1px solid var(--nf-border);
}

.nf-suggestion-panel-simple .nf-suggestion-display {
  padding: 0.75rem 0;
}

.nf-suggestion-panel-simple .nf-suggested-reply-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--nf-text);
  font-style: italic;
}

/* ------------------------------------------------------------------
   Status / coach panel
-------------------------------------------------------------------*/
.status-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--nf-text-muted);
}

#statusPanel {
  font-size: 0.85rem;
}

/* Tabs */
.nf-tabs {
  display: inline-flex;
  border-radius: 999px;
  background-color: #f0f1f7;
  padding: 0.15rem;
  margin-bottom: 0.75rem;
}

.nf-tab {
  border: none;
  background: transparent;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--nf-text-muted);
  cursor: pointer;
}

.nf-tab-active {
  background: #ffffff;
  color: var(--nf-primary);
  box-shadow: 0 2px 6px rgba(42, 14, 92, 0.15);
}

/* Tab contents */
.nf-tab-content {
  display: none;
}

.nf-tab-content-active {
  display: block;
}

.nf-status-section {
  margin-bottom: 0.75rem;
}

.nf-status-heading {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--nf-primary-light);
}

.nf-status-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.nf-status-caption {
  font-size: 0.78rem;
  color: var(--nf-text-muted);
}

.nf-status-value {
  font-size: 0.85rem;
  font-weight: 500;
}

.nf-status-next {
  font-style: italic;
  font-size: 0.8rem;
  color: var(--nf-text-muted);
}

.nf-status-meta {
  border-top: 1px dashed var(--nf-border);
  padding-top: 0.5rem;
}

.nf-status-hint {
  font-size: 0.8rem;
  color: var(--nf-text-muted);
}

/* Objectives list */
#statusObjectives {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 0.5rem;
}

.status-objective {
  padding: 0.3rem 0.4rem;
  border-radius: 8px;
  margin-bottom: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background-color: #f5f3ff;
}

  .status-objective .meta {
    font-size: 0.75rem;
    opacity: 0.8;
  }

  .status-objective.required::before {
    content: "★ ";
    color: var(--nf-warning);
  }

  .status-objective.completed {
    opacity: 0.6;
    text-decoration: line-through;
  }

/* Current stage label */
.status-current-label {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background-color: #e3f2fd;
  margin-left: 0.3rem;
}

/* Pills for status/mood */
.nf-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.nf-status-pill-idle {
  background-color: #f0f1f7;
  color: var(--nf-text-muted);
}

.nf-status-pill-listening {
  background: linear-gradient(135deg, rgba(45, 140, 255, 0.15), rgba(138, 98, 255, 0.15));
  color: var(--nf-info);
  animation: pulse 2s ease-in-out infinite;
}

.nf-status-pill-processing {
  background: linear-gradient(135deg, rgba(255, 15, 111, 0.15), rgba(255, 122, 48, 0.15));
  color: var(--nf-accent-pink);
  animation: pulse 2s ease-in-out infinite;
}

.nf-status-pill-speaking {
  background: linear-gradient(135deg, rgba(255, 15, 111, 0.15), rgba(255, 122, 48, 0.15));
  color: var(--nf-accent-pink);
}

.nf-status-pill-ready {
  background-color: rgba(44, 201, 143, 0.15);
  color: var(--nf-success);
}

.nf-status-pill-neutral {
  background-color: #f0f1f7;
  color: var(--nf-text-muted);
}

.nf-status-pill-positive {
  background-color: rgba(44, 201, 143, 0.15);
  color: var(--nf-success);
}

.nf-status-pill-negative {
  background-color: rgba(230, 74, 74, 0.12);
  color: var(--nf-error);
}

.nf-status-pill-winding-down {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.15), rgba(255, 122, 48, 0.15));
  color: #b37400;
}

.nf-status-pill-completed {
  background: linear-gradient(135deg, rgba(44, 201, 143, 0.15), rgba(34, 160, 110, 0.15));
  color: var(--nf-success);
}

/* Winding Down / Completion Banners */
.nf-winding-down-banner,
.nf-session-complete-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  animation: bannerFadeIn 0.4s ease-out;
}

.nf-winding-down-banner {
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.10), rgba(255, 122, 48, 0.10));
  border: 1px solid rgba(255, 170, 0, 0.25);
  color: #b37400;
}

.nf-session-complete-banner {
  background: linear-gradient(135deg, rgba(44, 201, 143, 0.10), rgba(34, 160, 110, 0.10));
  border: 1px solid rgba(44, 201, 143, 0.25);
  color: var(--nf-success);
}

.nf-session-complete-banner .nf-btn-banner-report {
  margin-left: auto;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(44, 201, 143, 0.35);
  border-radius: 0.35rem;
  background: rgba(44, 201, 143, 0.10);
  color: var(--nf-success);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.nf-session-complete-banner .nf-btn-banner-report:hover {
  background: rgba(44, 201, 143, 0.20);
}

@keyframes bannerFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Final Results badge in coach panel */
.nf-final-results-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, rgba(44, 201, 143, 0.15), rgba(34, 160, 110, 0.15));
  color: var(--nf-success);
  animation: bannerFadeIn 0.4s ease-out;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.nf-list-unstyled {
  list-style: none;
  padding-left: 0;
  margin: 0.25rem 0;
}
/* update landing page need to merge*/
/* ------------------------------------------------------------------
   VU meter (mic level)
-------------------------------------------------------------------*/
#vuContainer {
  width: 100%;
  height: 10px;
  background-color: #eceef5;
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 12px 0;
  position: relative;
}

#vuBar {
  height: 100%;
  width: 0%;
  background: linear-gradient( to right, var(--nf-success), var(--nf-accent-pink), var(--nf-accent-orange) );
  border-radius: 999px;
  transition: width 0.05s linear;
  opacity: 0.2;
}

#vuContainer.listening #vuBar {
  opacity: 1;
}

/* ------------------------------------------------------------------
   Mic sensitivity / calibration (inside settings drawer)
-------------------------------------------------------------------*/
.nf-device-select {
  flex: 0 1 auto;
  max-width: 180px;
  font-size: 0.72rem;
  padding: 2px 4px;
  border: 1px solid var(--nf-border);
  border-radius: 4px;
  background: var(--nf-bg);
  color: var(--nf-text);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nf-sensitivity-slider {
  flex: 1 1 0%;
  max-width: 200px;
  height: 4px;
  accent-color: var(--nf-accent-pink);
  cursor: pointer;
}

.nf-calibration-status {
  font-size: 0.68rem;
  color: var(--nf-text-muted);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Hidden audio element */
.nf-hidden-audio {
  display: none;
}

/* ------------------------------------------------------------------
   Live conversation + transcript
-------------------------------------------------------------------*/
.nf-live-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .nf-live-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.nf-live-item {
}

.nf-live-label {
  font-size: 0.8rem;
  color: var(--nf-text-muted);
  margin-bottom: 0.25rem;
}

.nf-live-bubble {
  border-radius: 12px;
  padding: 0.75rem 0.8rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.nf-live-bubble-user {
  background-color: #e7e9ff;
}

.nf-live-bubble-trainer {
  background-color: #ffeaf2;
}

/* Transcript container with auto-scroll */
.nf-transcript-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 250px);
  min-height: 400px;
}

#transcriptContainer {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column-reverse;
  scroll-behavior: smooth;
  padding: 0.5rem;
  gap: 0.75rem;
}

/* Transcript container scrollbar styling */
#transcriptContainer::-webkit-scrollbar {
  width: 8px;
}

#transcriptContainer::-webkit-scrollbar-track {
  background: var(--nf-bg);
  border-radius: 4px;
}

#transcriptContainer::-webkit-scrollbar-thumb {
  background: var(--nf-border);
  border-radius: 4px;
  transition: background 0.2s ease;
}

#transcriptContainer::-webkit-scrollbar-thumb:hover {
  background: var(--nf-text-muted);
}

#transcriptLog {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.transcript-message {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.transcript-message.user {
  align-items: flex-end;
}

.transcript-message.trainer {
  align-items: flex-start;
}

.transcript-message .label {
  font-size: 0.75rem;
  opacity: 0.7;
  padding: 0 0.25rem;
}

.transcript-message .bubble {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  max-width: 85%;
  word-wrap: break-word;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.transcript-message.user .bubble {
  background-color: #e7e9ff;
  border-bottom-right-radius: 4px;
}

.transcript-message.trainer .bubble {
  background-color: #ffeaf2;
  border-bottom-left-radius: 4px;
}

.transcript-message .meta {
  font-size: 0.7rem;
  opacity: 0.6;
}

/* Progressive STT display states */
.transcript-message.user .bubble.streaming-partial {
  opacity: 0.6;
  transition: opacity 0.2s ease-in-out;
}

.transcript-message.user .bubble.streaming-final {
  opacity: 0.8;
  transition: opacity 0.2s ease-in-out;
}

.transcript-message.user .bubble.finalized {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

/* Voice Tone Tags */
.voice-tone-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  margin-top: 0.2rem;
  background-color: color-mix(in srgb, var(--tone-color, #888) 15%, transparent);
  color: var(--tone-color, #888);
  border: 1px solid color-mix(in srgb, var(--tone-color, #888) 30%, transparent);
  cursor: default;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.transcript-message.user .voice-tone-tag {
  align-self: flex-end;
}

.voice-tone-tag.low-confidence {
  opacity: 0.55;
  border-style: dashed;
  font-weight: 500;
}

/* Achievement Cards (inline transcript notifications) */
.transcript-achievement {
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.625rem !important;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border-left: 3px solid transparent;
  animation: achievementSlideIn 0.4s ease-out;
  margin: 0.25rem 0;
}

.achievement-milestone {
  background: rgba(44, 201, 143, 0.08);
  border-left-color: var(--nf-success, #2CC98F);
}

.achievement-objective {
  background: rgba(45, 140, 255, 0.08);
  border-left-color: var(--nf-info, #2D8CFF);
}

.achievement-violation {
  background: rgba(230, 74, 74, 0.08);
  border-left-color: var(--nf-error, #E64A4A);
}

.achievement-milestone-partial {
  background: rgba(134, 134, 139, 0.08);
  border-left-color: #86868b;
}

.achievement-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.achievement-milestone .achievement-icon {
  background: var(--nf-success, #2CC98F);
  color: #fff;
}

.achievement-objective .achievement-icon {
  background: var(--nf-info, #2D8CFF);
  color: #fff;
}

.achievement-violation .achievement-icon {
  background: var(--nf-error, #E64A4A);
  color: #fff;
}

.achievement-milestone-partial .achievement-icon {
  background: #86868b;
  color: #fff;
}

.achievement-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.achievement-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.7;
}

.achievement-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--nf-text, #1C1C28);
}

@keyframes achievementSlideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Silent Mode Input */
.nf-silent-input-container {
  margin-bottom: 1rem;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.nf-silent-input-card {
  background-color: var(--nf-surface);
  border-radius: 16px;
  padding: 1rem 1.1rem;
  border: 2px solid var(--nf-accent-pink);
  box-shadow: 0 8px 24px rgba(255, 15, 111, 0.15);
  margin-bottom: 0;
}

.nf-silent-input {
  width: 100%;
  border: 1px solid var(--nf-border);
  border-radius: 8px;
  padding: 0.75rem;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.nf-silent-input:focus {
  outline: none;
  border-color: var(--nf-accent-pink);
  box-shadow: 0 0 0 3px rgba(255, 15, 111, 0.1);
}

.nf-silent-input::placeholder {
  color: var(--nf-text-muted);
  opacity: 0.6;
}

/* Client & scores header strip -------------------------------------------*/
.nf-client-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.1rem 0.3rem;
  border-bottom: 1px dashed var(--nf-border);
  margin-bottom: 0.35rem;
}

.nf-client-header-block {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.nf-client-header-score {
  flex: 1;
}

/* Satisfaction bar */
.nf-score-bar {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background-color: #eceef5;
  overflow: hidden;
}

.nf-score-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient( 90deg, var(--nf-success), var(--nf-accent-pink), var(--nf-accent-orange) );
  transition: width 0.25s ease-out;
}

.nf-score-bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

/* Visual milestone scores ------------------------------------------------*/
.nf-milestone-scores {
  list-style: none;
  padding-left: 0;
  margin: 0.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nf-milestone-score {
  border-radius: 10px;
  padding: 0.45rem 0.5rem;
  background-color: #f5f3ff;
}

.nf-ms-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
}

.nf-ms-name {
  font-size: 0.85rem;
  font-weight: 600;
}

.nf-ms-overall {
  font-size: 0.8rem;
  font-weight: 500;
  color: #5A3E9C; /* or your primary-light */
}

.nf-ms-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background-color: #e0e3f5;
  overflow: hidden;
  margin-bottom: 0.2rem;
}

.nf-ms-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FF0F6F, #FF7A30);
  transition: width 0.25s ease-out;
}

.nf-ms-metrics {
  font-size: 0.75rem;
  color: #515165;
}


/* Visual milestone scores */
.nf-milestone-scores {
  list-style: none;
  padding-left: 0;
  margin: 0.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nf-milestone-score {
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  background-color: #f5f5ff;
}

.nf-ms-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
}

.nf-ms-name {
  font-size: 0.9rem;
  font-weight: 600;
}

.nf-ms-overall {
  font-size: 0.8rem;
  font-weight: 500;
  color: #333;
}

/* Overall bar */
.nf-ms-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background-color: #e0e3f5;
  overflow: hidden;
  margin-bottom: 0.3rem;
}

.nf-ms-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4caf50, #ff9800);
  transition: width 0.25s ease-out;
}

/* Metric bars (clarity, confidence, etc.) */
.nf-ms-metric-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

.nf-ms-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nf-ms-metric-label {
  font-size: 0.75rem;
  color: #555;
}

.nf-ms-metric-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background-color: #e6e8f2;
  overflow: hidden;
}

.nf-ms-metric-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  background-color: #6574cd; /* tweak to match your brand */
  transition: width 0.25s ease-out;
}

/* Filler words footer */
.nf-ms-metrics-footer {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: #777;
}

/* Suggested next reply block --------------------------------------------*/
.nf-suggested-reply {
  margin-top: 0.75rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 15, 111, 0.35); /* fallback */
  background: linear-gradient( 135deg, rgba(255, 15, 111, 0.08), rgba(255, 122, 48, 0.03) );
}

.nf-suggested-reply-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #b01272; /* fallback brand-ish tone */
  margin-bottom: 0.25rem;
}

.nf-suggested-reply-text {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.4;
}

/* Optional: stronger state when an actual suggestion is present */
.nf-suggested-reply--active {
  border-width: 1.5px;
  box-shadow: 0 0 0 1px rgba(255, 15, 111, 0.25);
}

/* ------------------------------------------------------------------
   Progress Tracking Components
-------------------------------------------------------------------*/
.nf-progress-section {
  padding: 1rem;
  background: linear-gradient(135deg, rgba(42, 14, 92, 0.05), rgba(90, 62, 156, 0.03));
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid var(--nf-border);
}

.nf-progress-bar-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.nf-progress-bar {
  flex: 1;
  height: 24px;
  background-color: #E0E3E9;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nf-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--nf-accent-pink), var(--nf-accent-orange));
  transition: width 0.5s ease-out;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 2px 4px rgba(255, 15, 111, 0.3);
}

.nf-progress-label {
  font-weight: 700;
  color: var(--nf-primary);
  font-size: 0.95rem;
  min-width: 45px;
  text-align: right;
}

/* Active Milestones */
.nf-active-milestones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.nf-milestone-card {
  padding: 0.75rem;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.nf-milestone-card:hover {
  border-color: var(--nf-accent-pink);
  box-shadow: 0 2px 8px rgba(255, 15, 111, 0.15);
}

.nf-milestone-card.completed {
  background: linear-gradient(135deg, rgba(44, 201, 143, 0.08), rgba(44, 201, 143, 0.03));
  border-color: var(--nf-success);
}

.nf-milestone-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.nf-milestone-name {
  font-weight: 600;
  color: var(--nf-text);
  font-size: 0.9rem;
}

.nf-milestone-status {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-weight: 600;
}

.nf-milestone-status.active {
  background-color: var(--nf-info);
  color: white;
}

.nf-milestone-status.completed {
  background-color: var(--nf-success);
  color: white;
}

.nf-milestone-objectives {
  list-style: none;
  padding-left: 0;
  margin: 0.5rem 0 0 0;
}

.nf-milestone-objectives li {
  padding: 0.25rem 0;
  font-size: 0.85rem;
  color: var(--nf-text-muted);
  display: flex;
  align-items: flex-start;
}

.nf-milestone-objectives li:before {
  content: "•";
  color: var(--nf-accent-pink);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-right: 0.25rem;
}

.nf-milestone-objectives li.satisfied:before {
  content: "✓";
  color: var(--nf-success);
}

/* Global Objectives Highlight */
/* Global Objectives Section - Apple Style */
.nf-global-objectives-section {
  border: 1px solid rgba(0, 122, 255, 0.5);
  border-radius: 12px;
  background: #ffffff;
  padding: 20px;
  transition: all 0.3s ease;
}

.nf-global-icon {
  font-size: 1.2rem;
  vertical-align: middle;
  margin-right: 0.25rem;
}

/* Global Objectives Summary Container */
.nf-global-objectives-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nf-global-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #f5f5f7;
  border-radius: 8px;
}

.nf-global-summary-title {
  font-size: 15px;
  font-weight: 500;
  color: #1d1d1f;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nf-global-summary-count {
  font-size: 24px;
  font-weight: 600;
  color: #007AFF;
}

/* Global Stats Grid */
.nf-global-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.nf-global-stat-card {
  padding: 12px;
  background: #f5f5f7;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nf-global-stat-label {
  font-size: 13px;
  color: #86868b;
  font-weight: 400;
}

.nf-global-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #1d1d1f;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nf-global-stat-card.maintained .nf-global-stat-value {
  color: #34C759;
}

.nf-global-stat-card.violated .nf-global-stat-value {
  color: #FF3B30;
}

.nf-global-stat-card.critical .nf-global-stat-value {
  color: #FF9500;
}

/* Status Badge for Global Summary */
.nf-global-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
}

.nf-global-status-badge.all-good {
  background: rgba(52, 199, 89, 0.15);
  color: #0d7050;
}

.nf-global-status-badge.has-violations {
  background: rgba(255, 59, 48, 0.15);
  color: #d70015;
}

.nf-global-objectives-list li {
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
  background: var(--nf-surface);
  border: 1px solid var(--nf-border);
  transition: all 0.3s ease;
}

.nf-global-objectives-list li.satisfied {
  background: linear-gradient(135deg, rgba(44, 201, 143, 0.1), rgba(44, 201, 143, 0.05));
  border-color: var(--nf-success);
}

.nf-global-objectives-list li.violation {
  background: linear-gradient(135deg, rgba(230, 74, 74, 0.1), rgba(230, 74, 74, 0.05));
  border-color: var(--nf-error);
  border-width: 2px;
  animation: violation-pulse 2s infinite;
}

@keyframes violation-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 74, 74, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(230, 74, 74, 0); }
}

.nf-objective-violation-message {
  color: var(--nf-error);
  font-weight: 600;
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

/* Enhanced Suggested Reply Panel */
.nf-suggested-reply-panel {
  margin-top: 0.75rem;
}

.nf-suggested-reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.nf-btn-suggestion {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, var(--nf-accent-pink), var(--nf-accent-orange));
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nf-btn-suggestion:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 15, 111, 0.3);
}

.nf-btn-suggestion:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nf-btn-suggestion:active:not(:disabled) {
  transform: translateY(0);
}

.nf-suggestion-display {
  padding: 0.8rem;
  border-radius: 12px;
  border: 1.5px solid var(--nf-accent-pink);
  background: linear-gradient(135deg, rgba(255, 15, 111, 0.08), rgba(255, 122, 48, 0.03));
  margin-top: 0.5rem;
}

.nf-suggestion-content {
  margin-bottom: 0.75rem;
}

.nf-suggestion-meta {
  border-top: 1px solid rgba(255, 15, 111, 0.2);
  padding-top: 0.75rem;
}

.nf-suggestion-reasoning {
  margin-bottom: 0.75rem;
}

.nf-suggestion-reasoning strong {
  color: var(--nf-primary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nf-suggestion-reasoning-text {
  margin: 0.25rem 0 0 0;
  font-size: 0.85rem;
  color: var(--nf-text-muted);
  line-height: 1.4;
}

.nf-suggestion-effectiveness {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nf-effectiveness-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nf-text);
}

.nf-effectiveness-meter {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 20px;
  background-color: #E0E3E9;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.nf-effectiveness-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--nf-success), #4AE6A4);
  transition: width 0.5s ease-out;
  border-radius: 10px;
}

.nf-effectiveness-value {
  position: absolute;
  right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--nf-text);
}

.nf-legacy-suggestion {
  margin-top: 0.5rem;
}

/* Loading state for suggestions */
.nf-suggestion-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem;
  color: var(--nf-text-muted);
  font-size: 0.85rem;
}

.nf-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--nf-border);
  border-top-color: var(--nf-accent-pink);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------
   On-Demand Suggestion Panel (Coach Sidebar)
-------------------------------------------------------------------*/
.nf-suggestion-section {
  background: linear-gradient(135deg, rgba(255, 15, 111, 0.03), rgba(255, 122, 48, 0.02));
  border: 1px solid rgba(255, 15, 111, 0.15);
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
}

.nf-suggestion-section .nf-card-header {
  margin-bottom: 0.75rem;
}

.nf-suggestion-icon {
  font-size: 1.1rem;
}

.nf-suggestion-request {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.nf-suggestion-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--nf-text-muted);
  width: 100%;
}

.nf-suggestion-stats-divider {
  color: var(--nf-border);
}

.nf-suggestion-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.nf-btn-use-suggestion {
  background: var(--nf-success);
  color: white;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nf-btn-use-suggestion:hover {
  background: #28a745;
  transform: translateY(-1px);
}

.nf-btn-dismiss-suggestion {
  background: transparent;
  color: var(--nf-text-muted);
  border: 1px solid var(--nf-border);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nf-btn-dismiss-suggestion:hover {
  background: var(--nf-surface);
  color: var(--nf-text);
  border-color: var(--nf-text-muted);
}

.nf-suggestion-penalty-info {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--nf-warning);
  font-weight: 500;
}

.nf-suggestion-section .nf-suggestion-display {
  margin-top: 0.75rem;
}

.nf-suggestion-section .nf-suggestion-content {
  margin-bottom: 0;
}

.nf-suggestion-section .nf-suggested-reply-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--nf-text);
  font-style: italic;
  margin: 0;
}

/* ------------------------------------------------------------------
   Unified Milestone Panel Styles
-------------------------------------------------------------------*/
.nf-unified-milestones {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.75rem;
}

.nf-scenario-info {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--nf-border);
}

.nf-milestone-section {
  margin-bottom: 0.5rem;
}

.nf-milestone-section-header {
  font-size: 15px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 12px 0;
  padding: 8px 0;
  background: transparent;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
  cursor: pointer;
  user-select: none;
}

.nf-milestone-section-header:hover {
  color: #007AFF;
}

.nf-collapse-arrow {
  font-size: 12px;
  transition: transform 0.3s ease;
  color: #86868b;
}

.nf-milestone-section-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* Unified Milestone Card - Apple Inspired */
.nf-unified-milestone-card {
  background: #ffffff;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  animation: fadeIn 0.3s ease-in-out;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.nf-unified-milestone-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.nf-unified-milestone-card.active {
  border-color: rgba(0, 122, 255, 0.5);
  background: #ffffff;
}

.nf-unified-milestone-card.completed {
  border-color: #d2d2d7;
  background: #ffffff;
  opacity: 1;
}

/* Completed milestone where not all primary objectives were met — neutral grey */
.nf-unified-milestone-card.completed.completed-partial .nf-progress-bar-fill {
  background: #86868b;
}

.nf-unified-milestone-card.completed.completed-partial .nf-status-indicator {
  background: #d2d2d7;
}

.nf-unified-milestone-card.upcoming {
  border-color: #d2d2d7;
  background: #f5f5f7;
  opacity: 0.8;
}

/* Milestone Header */
.nf-unified-milestone-header {
  margin-bottom: 0.75rem;
}

.nf-milestone-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  gap: 0.75rem;
}

.nf-milestone-name {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  flex: 1;
  line-height: 1.3;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nf-milestone-score-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.nf-milestone-overall-score {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nf-accent-pink);
  line-height: 1;
}

.nf-milestone-score-max {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--nf-text-muted);
}

.nf-milestone-status-badge {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nf-milestone-status-badge.active {
  background-color: var(--nf-info);
  color: white;
}

.nf-milestone-status-badge.completed {
  background-color: var(--nf-success);
  color: white;
}

.nf-milestone-status-badge.upcoming {
  background-color: var(--nf-text-muted);
  color: white;
}

/* Progress Bar - Apple iOS Style */
.nf-milestone-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 12px;
}

.nf-progress-bar-small {
  flex: 1;
  height: 4px;
  background-color: #E5E5EA;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.nf-progress-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease-out;
}

.nf-unified-milestone-card.active .nf-progress-bar-fill {
  background: linear-gradient(90deg, #007AFF 0%, #0051D5 100%);
}

.nf-unified-milestone-card.completed .nf-progress-bar-fill {
  background: #34C759;
}

.nf-unified-milestone-card.upcoming .nf-progress-bar-fill {
  background: #d2d2d7;
}

.nf-progress-label-small {
  font-size: 14px;
  font-weight: 500;
  color: #1d1d1f;
  white-space: nowrap;
}

/* Current Stage Info */
.nf-current-stage-info {
  padding: 0.5rem;
  background: rgba(255, 122, 48, 0.08);
  border-left: 3px solid var(--nf-accent-orange);
  border-radius: 4px;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.nf-stage-label {
  color: var(--nf-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Objectives Summary - Apple Style */
.nf-objectives-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.nf-objectives-summary-line {
  font-size: 15px;
  font-weight: 400;
  color: #86868b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nf-objectives-stats-row {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 14px;
  color: #86868b;
  margin-top: 4px;
}

.nf-objective-stat-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nf-objective-stat-label {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nf-objective-stat-value {
  font-size: 13px;
  color: #a1a1a6;
  padding-left: 18px;
}

/* Penalties summary line in sidebar milestone cards */
.nf-penalties-summary-line {
  font-size: 14px;
  font-weight: 500;
  color: #ff453a;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(255, 69, 58, 0.08);
  border-radius: 6px;
}

.nf-status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nf-status-indicator.active {
  background: #34C759;
}

.nf-status-indicator.completed {
  background: #86868b;
}

.nf-status-indicator.upcoming {
  background: #d2d2d7;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
  .nf-unified-milestone-card {
    padding: 16px;
  }

  .nf-milestone-name {
    font-size: 16px;
  }

  .nf-objectives-stats-row {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .nf-objectives-summary-line {
    font-size: 14px;
  }

  .nf-objective-stat-group {
    width: 100%;
  }
}

/* Objectives Header */
.nf-objectives-header {
  margin: 0.5rem 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px dashed var(--nf-border);
}

.nf-objectives-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nf-primary);
}

/* Objectives List */
.nf-milestone-objectives-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.nf-objective-item-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.5rem;
  background: rgba(42, 14, 92, 0.03);
  border-radius: 6px;
  font-size: 0.85rem;
  gap: 0.5rem;
  position: relative;
  padding-left: 1.5rem;
}

.nf-objective-item-inline::before {
  content: "○";
  position: absolute;
  left: 0.5rem;
  color: var(--nf-text-muted);
  font-weight: bold;
}

.nf-objective-item-inline.satisfied {
  background: rgba(44, 201, 143, 0.1);
}

.nf-objective-item-inline.satisfied::before {
  content: "✓";
  color: var(--nf-success);
}

.nf-objective-item-inline.partial {
  background: rgba(255, 180, 68, 0.1);
}

.nf-objective-item-inline.partial::before {
  content: "◐";
  color: var(--nf-warning);
}

.nf-objective-text {
  flex: 1;
  line-height: 1.4;
}

.nf-objective-turn-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  background: var(--nf-primary);
  color: white;
  border-radius: 4px;
  font-weight: 600;
  flex-shrink: 0;
}

/* New Badge Styles */
.nf-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: 0.3rem;
  display: inline-block;
}

.nf-critical-badge {
  background: transparent;
  font-size: 0.85rem;
  padding: 0.1rem 0.3rem;
}

.nf-weight-badge {
  background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
  color: #663d00;
  font-weight: 700;
}

.nf-milestone-weight {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
}

/* Polarity Badge - DO vs AVOID */
.nf-polarity-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nf-polarity-badge.do {
  background: rgba(44, 201, 143, 0.15);
  color: #0d7050;
  border: 1px solid rgba(44, 201, 143, 0.3);
}

.nf-polarity-badge.avoid {
  background: rgba(255, 68, 68, 0.15);
  color: #991b1b;
  border: 1px solid rgba(255, 68, 68, 0.3);
}

/* Type Badges - Compliance, Coverage, Quality */
.nf-type-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: lowercase;
  border: 1px solid;
}

.nf-type-badge.compliance {
  background: rgba(245, 158, 11, 0.15);
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.3);
}

.nf-type-badge.coverage {
  background: rgba(59, 130, 246, 0.15);
  color: #1e40af;
  border-color: rgba(59, 130, 246, 0.3);
}

.nf-type-badge.quality {
  background: rgba(139, 92, 246, 0.15);
  color: #5b21b6;
  border-color: rgba(139, 92, 246, 0.3);
}

.nf-type-badge.accuracy {
  background: rgba(16, 185, 129, 0.15);
  color: #065f46;
  border-color: rgba(16, 185, 129, 0.3);
}

/* Turn Badge */
.nf-objective-turn-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.2);
  color: #475569;
  border: 1px solid rgba(148, 163, 184, 0.3);
}

.nf-objective-turn-badge.satisfied {
  background: rgba(44, 201, 143, 0.15);
  color: #0d7050;
  border-color: rgba(44, 201, 143, 0.3);
}

.nf-objective-turn-badge.violated {
  background: rgba(255, 68, 68, 0.15);
  color: #991b1b;
  border-color: rgba(255, 68, 68, 0.3);
}

.nf-objective-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.5rem;
}

.nf-global-objective-badges {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.5rem;
}

/* Objective content wrapper */
.nf-objective-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Critical objective styling */
.nf-objective-item-inline.critical {
  border: 2px solid #ff4444;
  border-left: 4px solid #ff4444;
  background: rgba(255, 68, 68, 0.05);
  box-shadow: 0 2px 4px rgba(255, 68, 68, 0.1);
}

.nf-global-objective-item.critical {
  border: 2px solid #ff4444;
  border-left: 4px solid #ff4444;
  background: rgba(255, 68, 68, 0.05);
  box-shadow: 0 2px 4px rgba(255, 68, 68, 0.1);
}

/* Objective Grouping Sections */
.nf-objectives-group {
  margin-bottom: 1rem;
}

.nf-objectives-group-header {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nf-text-muted);
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: rgba(42, 14, 92, 0.03);
  border-radius: 4px;
}

.nf-objectives-group-header.critical {
  color: #991b1b;
  background: rgba(255, 68, 68, 0.08);
  border-left: 3px solid #ff4444;
}

.nf-objectives-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Violated objective styling (for negative polarity) */
.nf-objective-item-inline.violated {
  background: rgba(255, 68, 68, 0.15);
  border-left-color: #ff4444;
}

.nf-objective-item-inline.violated::before {
  content: "✗";
  color: #ff4444;
}

.nf-objective-item-inline.partial-violation {
  background: rgba(255, 152, 0, 0.15);
  border-left-color: #ff9800;
}

.nf-objective-item-inline.partial-violation::before {
  content: "⚠";
  color: #ff9800;
}

/* Examples Section Styles */
.nf-examples-container {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: rgba(42, 14, 92, 0.02);
  border-radius: 6px;
  border: 1px solid var(--nf-border);
}

.nf-examples-section {
  margin-bottom: 0.75rem;
}

.nf-examples-section:last-child {
  margin-bottom: 0;
}

.nf-examples-met {
  background: rgba(44, 201, 143, 0.05);
  padding: 0.5rem;
  border-radius: 4px;
  border-left: 3px solid var(--nf-success);
}

.nf-examples-not-met {
  background: rgba(255, 68, 68, 0.05);
  padding: 0.5rem;
  border-radius: 4px;
  border-left: 3px solid #ff4444;
}

.nf-examples-title {
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--nf-text);
}

.nf-examples-met .nf-examples-title {
  color: var(--nf-success);
}

.nf-examples-not-met .nf-examples-title {
  color: #ff4444;
}

.nf-examples-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nf-examples-list li {
  font-size: 0.8rem;
  padding: 0.35rem 0;
  color: var(--nf-text-muted);
  line-height: 1.4;
  border-bottom: 1px dashed rgba(42, 14, 92, 0.1);
}

.nf-examples-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.nf-examples-list li::before {
  content: "•";
  margin-right: 0.5rem;
  color: var(--nf-primary);
  font-weight: 700;
}

.nf-examples-toggle {
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: var(--nf-primary);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nf-examples-toggle:hover {
  background: #5a2ea6;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(101, 46, 170, 0.3);
}

.nf-examples-toggle:active {
  transform: translateY(0);
}

/* Detailed Metrics Section */
.nf-milestone-detailed-metrics {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: rgba(42, 14, 92, 0.02);
  border-radius: 8px;
  border: 1px dashed var(--nf-border);
}

.nf-metric-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.nf-metric-row:last-child {
  margin-bottom: 0;
}

.nf-metric-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--nf-text);
  min-width: 100px;
}

.nf-metric-bar-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nf-metric-bar {
  flex: 1;
  height: 12px;
  background-color: #E0E3E9;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.nf-metric-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--nf-accent-pink), var(--nf-accent-orange));
  transition: width 0.3s ease;
  border-radius: 6px;
}

.nf-metric-score {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nf-primary);
  min-width: 30px;
  text-align: right;
}

.nf-metric-filler {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--nf-border);
  font-size: 0.8rem;
  color: var(--nf-text-muted);
}

.nf-metric-filler strong {
  color: var(--nf-text);
  font-weight: 600;
}

/* Toggle Metrics Button */
.nf-toggle-metrics-btn {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--nf-border);
  border-radius: 8px;
  color: var(--nf-primary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.nf-toggle-metrics-btn:hover {
  background: rgba(42, 14, 92, 0.05);
  border-color: var(--nf-primary);
}

.nf-toggle-metrics-btn.expanded {
  background: rgba(42, 14, 92, 0.08);
  border-color: var(--nf-primary);
}

/* ------------------------------------------------------------------
   Session Report Modal
-------------------------------------------------------------------*/
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-dialog {
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-dialog.modal-large {
  max-width: 1000px;
}

.modal-content {
  background: #f5f5f5;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-muted);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: var(--transition);
}

.modal-close:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* ============================================================
   ENHANCED PROFESSIONAL REPORT STYLES
   ============================================================ */

/* Report Modal Enhancements */
.modal-dialog.modal-report {
  max-width: 1200px;
}

.report-header {
  background: linear-gradient(135deg, var(--nf-primary) 0%, var(--nf-primary-light) 100%);
  color: white;
  padding: 2rem;
}

.report-header h3 {
  color: white;
  font-size: 1.5rem;
  margin: 0 0 0.25rem 0;
}

.report-header-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  margin: 0;
}

.report-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn-icon {
  margin-right: 0.25rem;
}

.report-body {
  background: var(--nf-bg);
  padding: 2rem;
}

/* Hero Section - Overall Performance */
.report-hero {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

.report-improvement-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  background: linear-gradient(135deg, rgba(255, 122, 48, 0.10), rgba(255, 15, 111, 0.10));
  border: 1px solid rgba(255, 122, 48, 0.35);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.report-improvement-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 122, 48, 0.20);
  text-decoration: none;
  color: inherit;
}
.report-improvement-cta-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}
.report-improvement-cta-content {
  flex: 1;
  min-width: 0;
}
.report-improvement-cta-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--nf-accent-orange);
  margin-bottom: 0.25rem;
}
.report-improvement-cta-subtitle {
  font-size: 0.9rem;
  color: var(--nf-text, #333);
}
.report-improvement-cta-btn {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--nf-accent-pink), var(--nf-accent-orange));
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .report-improvement-cta {
    flex-wrap: wrap;
  }
  .report-improvement-cta-btn {
    width: 100%;
    text-align: center;
  }
}

.report-grade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.report-grade-circle {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nf-accent-pink) 0%, var(--nf-accent-orange) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(255, 15, 111, 0.3);
}

.report-grade-letter {
  font-size: 3rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.report-grade-score {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  margin-top: 0.25rem;
}

.report-grade-text {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--nf-primary);
  margin-top: -0.25rem;
}

.report-grade-boundary {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--nf-accent-orange);
  margin-top: -0.25rem;
}

.report-grade-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-hero-metrics {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
}

.report-hero-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.report-hero-metric-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.report-hero-metric-label {
  font-size: 0.75rem;
  color: var(--nf-text-muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-hero-metric-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nf-primary);
}

/* Report Sections */
.report-section {
  background: white;
  border-radius: 12px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.report-section-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--nf-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.report-section-subtitle {
  font-size: 0.875rem;
  color: var(--nf-text-muted);
  margin: 0 0 1.25rem 0;
}

/* Session Overview Grid */
.report-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.report-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.report-info-label {
  font-size: 0.75rem;
  color: var(--nf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.report-info-value {
  font-size: 1rem;
  color: var(--nf-text);
  font-weight: 600;
}

.report-session-id {
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
}

/* Performance Insights */
.report-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.report-insight {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 8px;
  border-left: 4px solid;
}

.report-insight-strength {
  background: rgba(42, 197, 143, 0.08);
  border-left-color: var(--nf-success);
}

.report-insight-improvement {
  background: rgba(255, 180, 68, 0.08);
  border-left-color: var(--nf-warning);
}

.report-insight-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.report-insight-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nf-text);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-insight-body {
  flex: 1;
  min-width: 0;
}

.report-insight-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.report-insight-item {
  padding: 0.625rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.report-insight-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.report-insight-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.report-insight-dimension {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--nf-text);
}

.report-insight-score {
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.report-insight-score-good {
  background: rgba(42, 197, 143, 0.15);
  color: var(--nf-success);
}

.report-insight-score-needs-work {
  background: rgba(255, 180, 68, 0.15);
  color: var(--nf-warning);
}

.report-insight-description {
  font-size: 0.875rem;
  color: var(--nf-text-muted);
  line-height: 1.5;
  margin-top: 0.25rem;
}

.report-insight-recommendation {
  font-size: 0.875rem;
  color: var(--nf-text);
  line-height: 1.5;
  margin-top: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 180, 68, 0.06);
  border-radius: 6px;
  border-left: 3px solid var(--nf-warning);
}

.report-overall-feedback {
  font-size: 0.9375rem;
  color: var(--nf-text);
  line-height: 1.6;
  padding: 1rem 1.25rem;
  background: rgba(99, 102, 241, 0.06);
  border-radius: 8px;
  border-left: 4px solid var(--nf-primary);
  margin-bottom: 1.25rem;
}

/* Milestone Cards - Enhanced */
.report-milestones-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.report-milestone-card {
  background: var(--nf-bg);
  border: 2px solid var(--nf-border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  transition: all 0.2s ease;
}

.report-milestone-card:hover {
  border-color: var(--nf-primary-light);
  box-shadow: 0 4px 12px rgba(42, 14, 92, 0.1);
}

.report-milestone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: white;
  border-bottom: 1px solid var(--nf-border);
}

.report-milestone-title-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.report-milestone-name {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: var(--nf-primary);
}

.report-milestone-score {
  font-size: 1rem;
  color: var(--nf-accent-pink);
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  background: rgba(255, 15, 111, 0.1);
  border-radius: 6px;
}

.report-milestone-badges {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.report-milestone-progress-badge {
  background: var(--nf-success);
  color: white;
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

.report-milestone-progress-badge.incomplete {
  background: var(--nf-warning);
}

/* Performance Dimensions */
.report-milestone-body {
  padding: 1.5rem;
}

.report-performance-dimensions {
  margin-bottom: 1.5rem;
}

.report-dimensions-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nf-text);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-dimensions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.report-dimension {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.report-dimension-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--nf-text-muted);
}

.report-dimension-value {
  font-weight: 600;
  color: var(--nf-primary);
}

.report-dimension-bar {
  height: 8px;
  background: var(--nf-border);
  border-radius: 4px;
  overflow: hidden;
}

.report-dimension-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--nf-accent-pink) 0%, var(--nf-accent-orange) 100%);
  transition: width 0.3s ease;
}

/* Objectives List - Enhanced */
.report-milestone-objectives-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nf-text);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-objectives-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: rgba(42, 14, 92, 0.05);
  border-radius: 6px;
  font-size: 0.875rem;
}

.report-objectives-summary-icon {
  font-size: 1.25rem;
}

.report-objectives-summary-text {
  color: var(--nf-text-muted);
}

.report-objectives-summary-count {
  font-weight: 700;
  color: var(--nf-primary);
}

.report-objectives-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.report-objective-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: white;
  border-left: 4px solid transparent;
  border-radius: 6px;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.report-objective-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.report-objective-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.report-objective-status {
  font-size: 1.125rem;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
}

.report-status-satisfied {
  color: white;
  background: var(--nf-success);
}

.report-status-violated {
  color: white;
  background: var(--nf-error);
}

.report-status-pending {
  color: var(--nf-text-muted);
  background: var(--nf-border);
}

.report-objective-item.satisfied {
  border-left-color: var(--nf-success);
  background: rgba(42, 197, 143, 0.03);
}

.report-objective-item.violated {
  border-left-color: var(--nf-error);
  background: rgba(230, 74, 74, 0.03);
}

.report-objective-item.pending {
  border-left-color: var(--nf-border);
}

.report-objective-content {
  flex: 1;
}

.report-objective-text {
  font-size: 0.9375rem;
  color: var(--nf-text);
  line-height: 1.6;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.report-objective-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--nf-text-muted);
  margin-top: 0.5rem;
}

.report-objective-badge {
  padding: 0.125rem 0.5rem;
  background: var(--nf-border);
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.report-objective-badge.required {
  background: rgba(255, 15, 111, 0.1);
  color: var(--nf-accent-pink);
}

.report-objective-badge.polarity-badge {
  font-weight: 700;
  font-size: 0.7rem;
}

.report-objective-badge.polarity-badge.positive {
  background: rgba(42, 197, 143, 0.15);
  color: var(--nf-success);
}

.report-objective-badge.polarity-badge.negative {
  background: rgba(230, 74, 74, 0.15);
  color: var(--nf-error);
}

.report-objective-badge.grade-badge {
  background: rgba(106, 90, 205, 0.12);
  color: #6a5acd;
  text-transform: none;
}

.report-objective-badge.tier-badge {
  background: rgba(255, 180, 68, 0.12);
  color: var(--nf-accent-orange);
  text-transform: none;
}

.report-objective-turn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--nf-text-muted);
}

/* Polarity visual distinction on objective items */
.report-objective-item.polarity-negative {
  border-left-width: 4px;
}

.report-objective-item.polarity-negative.satisfied {
  /* Negative objective satisfied = good (avoided bad behavior) */
  border-left-color: var(--nf-success);
  background: rgba(42, 197, 143, 0.03);
}

.report-objective-item.polarity-negative.violated {
  /* Negative objective violated = bad (did the bad behavior) */
  border-left-color: var(--nf-error);
  background: rgba(230, 74, 74, 0.05);
}

.report-objective-item.polarity-positive.satisfied {
  /* Positive objective satisfied = good (did the good behavior) */
  border-left-color: var(--nf-success);
  background: rgba(42, 197, 143, 0.03);
}

.report-objective-item.polarity-positive.violated {
  /* Positive objective violated = bad (didn't do the good behavior) */
  border-left-color: var(--nf-error);
  background: rgba(230, 74, 74, 0.03);
}

/* Evidence/Justification Section */
.report-objective-evidence {
  margin-top: 0.75rem;
  padding: 0.875rem;
  background: rgba(42, 14, 92, 0.04);
  border-left: 3px solid var(--nf-primary-light);
  border-radius: 4px;
}

.report-evidence-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nf-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.report-evidence-text {
  font-size: 0.875rem;
  color: var(--nf-text);
  line-height: 1.6;
  font-style: italic;
}

/* Collapsible Evidence Toggle */
.report-evidence-toggle {
  background: none;
  border: none;
  color: var(--nf-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.report-evidence-toggle:hover {
  background: rgba(42, 14, 92, 0.08);
}

.report-evidence-toggle-icon {
  transition: transform 0.2s ease;
}

.report-evidence-toggle.expanded .report-evidence-toggle-icon {
  transform: rotate(180deg);
}

.report-evidence-toggle.always-expanded {
  cursor: default !important;
  padding-left: 0;
}

.report-evidence-toggle.always-expanded:hover {
  background: none !important;
}

/* Weight Badge Styles */
.report-objective-weight {
  padding: 0.125rem 0.5rem;
  background: rgba(152, 152, 157, 0.15);
  color: #86868B;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.report-objective-weight.important {
  background: rgba(0, 122, 255, 0.15);
  color: #007AFF;
}

.report-objective-weight.critical {
  background: rgba(175, 82, 222, 0.15);
  color: #AF52DE;
  font-weight: 700;
}

/* Evidence Section */
.report-evidence-section {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Evidence Count Badge */
.report-evidence-count {
  font-size: 0.8125rem;
  color: var(--nf-primary);
  font-weight: 600;
}

/* Evidence List */
.report-evidence-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.report-evidence-list.expanded {
  max-height: 1000px;
  opacity: 1;
  margin-top: 0.5rem;
}

/* Evidence List Items */
.report-evidence-item {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.375rem;
  background: rgba(255, 255, 255, 0.5);
  border-left: 2px solid var(--nf-primary-light);
  border-radius: 4px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--nf-text);
  position: relative;
  padding-left: 1.5rem;
}

.report-evidence-item::before {
  content: "•";
  position: absolute;
  left: 0.625rem;
  color: var(--nf-primary);
  font-weight: bold;
}

.report-evidence-item:last-child {
  margin-bottom: 0;
}

/* Scoring Notes */
.report-scoring-notes {
  margin-top: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: rgba(255, 204, 0, 0.08);
  border-left: 2px solid rgba(255, 204, 0, 0.5);
  border-radius: 4px;
  font-size: 0.8125rem;
  color: var(--nf-text-muted);
  line-height: 1.5;
}

.report-scoring-notes em {
  font-style: italic;
}

/* Loading Spinner Animation */
.report-loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid var(--nf-border);
  border-top-color: var(--nf-primary);
  border-radius: 50%;
  animation: report-spinner-spin 0.8s linear infinite;
}

@keyframes report-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Conversation Transcript Section */
.report-transcript-section {
  page-break-before: always;
}

.report-transcript-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.report-transcript-item {
  padding: 0.875rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--nf-border);
  background: var(--nf-card);
}

.report-transcript-user {
  border-left: 3px solid var(--nf-primary);
  background: rgba(0, 122, 255, 0.04);
}

.report-transcript-trainer {
  border-left: 3px solid #34C759;
  background: rgba(52, 199, 89, 0.04);
}

.report-transcript-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.report-transcript-turn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.375rem;
  background: var(--nf-border);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nf-text-muted);
}

.report-transcript-role {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--nf-text);
}

.report-transcript-user .report-transcript-role {
  color: var(--nf-primary);
}

.report-transcript-trainer .report-transcript-role {
  color: #34C759;
}

.report-transcript-content {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--nf-text);
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Report Achievement Cards (milestone/objective completions in transcript) */
.report-transcript-achievement {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-left: 3px solid transparent;
}

.report-achievement-objective {
  background: rgba(45, 140, 255, 0.08);
  border-left-color: var(--nf-info, #2D8CFF);
}

.report-achievement-milestone {
  background: rgba(44, 201, 143, 0.08);
  border-left-color: var(--nf-success, #2CC98F);
}

.report-achievement-milestone-partial {
  background: rgba(134, 134, 139, 0.08);
  border-left-color: #86868b;
}

.report-achievement-violation {
  background: rgba(230, 74, 74, 0.08);
  border-left-color: var(--nf-error, #E64A4A);
}

.report-achievement-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
}

.report-achievement-objective .report-achievement-icon {
  background: var(--nf-info, #2D8CFF);
}

.report-achievement-milestone .report-achievement-icon {
  background: var(--nf-success, #2CC98F);
}

.report-achievement-milestone-partial .report-achievement-icon {
  background: #86868b;
}

.report-achievement-violation .report-achievement-icon {
  background: var(--nf-error, #E64A4A);
}

.report-achievement-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.report-achievement-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.7;
}

.report-achievement-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--nf-text, #1C1C28);
}

/* Primary Focus Recommendation */
.report-focus-callout {
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(255, 180, 68, 0.08) 0%, rgba(255, 15, 111, 0.06) 100%);
  border: 1px solid rgba(255, 180, 68, 0.2);
  border-left: 4px solid var(--nf-accent-orange);
  border-radius: 8px;
}

.report-focus-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nf-text);
}

.report-focus-icon {
  font-size: 1.25rem;
}

.report-focus-body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--nf-text-muted);
}

/* Compliance Summary */
.report-compliance-summary {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--nf-border);
}

.report-compliance-summary.compliance-passed {
  background: rgba(42, 197, 143, 0.06);
  border-color: rgba(42, 197, 143, 0.2);
}

.report-compliance-summary.compliance-failed {
  background: rgba(230, 74, 74, 0.06);
  border-color: rgba(230, 74, 74, 0.2);
}

.report-compliance-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.report-compliance-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--nf-text-muted);
}

.report-compliance-notes {
  font-style: italic;
}

/* Print Styles for PDF */
@media print {
  /* Hide all page layout elements - only show the report modal */
  .nf-page,
  .main-nav,
  nav,
  footer,
  main > *:not(#sessionReportModal) {
    display: none !important;
  }

  /* Ensure body and container don't interfere with layout */
  body, .container, main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Hide modal UI elements but keep content */
  .modal-header,
  .modal-footer,
  .report-evidence-toggle,
  .modal-close,
  .report-loading-overlay,
  .report-error-overlay {
    display: none !important;
  }

  /* Force modal to be visible and take full page */
  #sessionReportModal {
    display: block !important;
    position: static !important;
    background: white !important;
    width: 100% !important;
    height: auto !important;
  }

  .modal-dialog {
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
  }

  .modal-content {
    box-shadow: none !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    background: white !important;
    display: block !important;
  }

  .modal-body {
    overflow: visible !important;
    max-height: none !important;
    padding: 0 !important;
    display: block !important;
  }

  .report-body {
    padding: 0.5rem !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    background: white !important;
    display: block !important;
  }

  /* Tighten spacing to reduce white space */
  .report-hero {
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    page-break-after: avoid;
  }

  .report-section {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    page-break-inside: avoid;
    box-shadow: none !important;
  }

  .report-section-title {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
    page-break-after: avoid;
  }

  .report-section-subtitle {
    margin-bottom: 0.5rem !important;
  }

  .report-grade-circle {
    width: 100px !important;
    height: 100px !important;
  }

  .report-grade-letter {
    font-size: 2rem !important;
  }

  .report-hero-metrics {
    gap: 0.75rem !important;
  }

  .report-info-grid {
    gap: 0.75rem !important;
  }

  .report-milestones-list {
    gap: 0.75rem !important;
  }

  .report-milestone-card {
    padding: 0 !important;
    margin-bottom: 0.5rem !important;
    page-break-inside: avoid;
    border: 1px solid #ddd !important;
  }

  .report-milestone-header {
    padding: 0.75rem !important;
  }

  .report-milestone-body {
    padding: 0.75rem !important;
  }

  .report-performance-dimensions {
    margin-bottom: 0.75rem !important;
  }

  .report-dimensions-grid {
    gap: 0.5rem !important;
  }

  .report-objectives-list {
    gap: 0.5rem !important;
  }

  .report-objective-item {
    padding: 0.5rem !important;
    margin-bottom: 0.25rem !important;
    page-break-inside: avoid;
  }

  .report-objective-evidence {
    display: block !important;
    padding: 0.5rem !important;
    margin-top: 0.5rem !important;
    page-break-inside: avoid;
  }

  /* Ensure all report content is visible */
  .report-hero,
  .report-section {
    display: block !important;
  }

  /* Prevent orphaned headers */
  h4, .report-section-title, .report-milestone-objectives-title, .report-dimensions-title {
    page-break-after: avoid;
  }

  /* Keep milestone header with body */
  .report-milestone-header {
    page-break-after: avoid;
  }

  /* Transcript Print Styles */
  .report-transcript-section {
    page-break-before: always;
  }

  .report-transcript-list {
    gap: 0.5rem !important;
  }

  .report-transcript-item {
    padding: 0.5rem 0.75rem !important;
    border-radius: 0 !important;
    background: white !important;
    border: 1px solid #ccc !important;
    page-break-inside: avoid;
  }

  .report-transcript-user {
    border-left: 3px solid #007AFF !important;
  }

  .report-transcript-trainer {
    border-left: 3px solid #34C759 !important;
  }

  .report-transcript-header {
    margin-bottom: 0.25rem !important;
  }

  .report-transcript-turn {
    background: #eee !important;
    color: #333 !important;
  }

  .report-transcript-role {
    font-size: 0.8125rem !important;
  }

  .report-transcript-user .report-transcript-role {
    color: #007AFF !important;
  }

  .report-transcript-trainer .report-transcript-role {
    color: #34C759 !important;
  }

  .report-transcript-content {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: #000 !important;
  }
}

/* ------------------------------------------------------------------
   Responsive tweaks
-------------------------------------------------------------------*/
@media (max-width: 767.98px) {
  .nf-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .nf-header-right {
    align-self: stretch;
    justify-content: space-between;
  }

  .nf-card {
    border-radius: 14px;
  }

  .nf-global-objectives-section {
    position: relative;
    top: 0;
    padding: 16px;
  }

  .nf-global-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------
   Internal Errors Section
-------------------------------------------------------------------*/
.nf-errors-section {
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.25);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 1rem;
}

.nf-errors-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.nf-error-icon {
  font-size: 1rem;
}

.nf-errors-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #dc3545;
  flex: 1;
}

.nf-errors-dismiss {
  background: transparent;
  border: none;
  color: #6c757d;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.125rem 0.375rem;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.nf-errors-dismiss:hover {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
}

.nf-errors-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}

.nf-error-item {
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  margin-bottom: 0.375rem;
}

.nf-error-item:last-child {
  margin-bottom: 0;
}

.nf-error-main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: baseline;
  margin-bottom: 0.25rem;
}

.nf-error-component {
  font-size: 0.75rem;
  font-weight: 600;
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
}

.nf-error-message {
  font-size: 0.8rem;
  color: #212529;
  word-break: break-word;
}

.nf-error-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.7rem;
  color: #6c757d;
}

.nf-error-time {
  color: #868e96;
}

/* ------------------------------------------------------------------
   Legal Pages
-------------------------------------------------------------------*/
.legal-page {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.legal-page h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--nf-primary);
  margin-bottom: 0.5rem;
}

.legal-effective-date,
.legal-updated-date {
  font-size: 0.9rem;
  color: var(--nf-text-muted);
  margin-bottom: 0.25rem;
}

.legal-content section {
  margin-bottom: 2rem;
}

.legal-content h2 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--nf-primary);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--nf-border);
}

.legal-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--nf-text);
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.legal-content p {
  line-height: 1.7;
  color: var(--nf-text);
  margin-bottom: 0.75rem;
}

.legal-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.legal-content ul li {
  line-height: 1.7;
  color: var(--nf-text);
  margin-bottom: 0.35rem;
}

.legal-content address {
  font-style: normal;
  line-height: 1.8;
  margin: 0.75rem 0;
  padding: 1rem;
  background: var(--nf-bg);
  border-radius: 8px;
  border: 1px solid var(--nf-border);
}

.legal-content a {
  color: var(--nf-accent-pink);
  text-decoration: none;
}

.legal-content a:hover {
  text-decoration: underline;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.legal-table th,
.legal-table td {
  padding: 0.75rem;
  text-align: left;
  border: 1px solid var(--nf-border);
}

.legal-table th {
  background: var(--nf-primary);
  color: #fff;
  font-weight: 600;
}

.legal-table td {
  background: var(--nf-surface);
}

.legal-table code {
  background: var(--nf-bg);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.85em;
}

@media (max-width: 600px) {
  .legal-page {
    margin: 1rem auto;
  }

  .legal-page h1 {
    font-size: 1.5rem;
  }

  .legal-table {
    font-size: 0.8rem;
  }

  .legal-table th,
  .legal-table td {
    padding: 0.5rem;
  }
}

/* ------------------------------------------------------------------
   Footer Legal Links
-------------------------------------------------------------------*/
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.footer-legal-links a {
  color: var(--nf-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-legal-links a:hover {
  color: var(--nf-accent-pink);
  text-decoration: underline;
}

.footer-legal-links a:not(:last-child)::after {
  content: '|';
  margin-left: 0.5rem;
  color: var(--nf-border);
}

@media (max-width: 600px) {
  .footer-legal {
    flex-direction: column;
    text-align: center;
  }
}

/* ------------------------------------------------------------------
   Cookie Consent Banner
-------------------------------------------------------------------*/
/* Full-screen cookie consent overlay */
.cookie-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: cookieFadeIn 0.3s ease;
}

@keyframes cookieFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cookieSlideUp {
  from { opacity: 0; transform: scale(0.95) translateY(16px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Centered modal card */
.cookie-modal {
  background: var(--nf-surface, #fff);
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.5rem 2rem 2rem;
  box-shadow: 0 24px 80px rgba(42, 14, 92, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);
  text-align: center;
  animation: cookieSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cookie-modal-header {
  margin-bottom: 1.25rem;
}

.cookie-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--nf-accent-pink, #e91e8c), var(--nf-accent-orange, #ff6b35));
  color: #fff;
  margin-bottom: 0.75rem;
}

.cookie-modal-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nf-text, #1a1a2e);
  margin: 0;
}

.cookie-modal-body {
  margin-bottom: 1.75rem;
}

.cookie-modal-body p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--nf-text-muted, #6c757d);
  margin: 0;
}

.cookie-modal-body a {
  color: var(--nf-accent-pink, #e91e8c);
  text-decoration: underline;
}

/* Vertically stacked buttons */
.cookie-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Cookie buttons */
.cookie-btn {
  width: 100%;
  padding: 0.875rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-align: center;
}

.cookie-btn-primary {
  background: linear-gradient(135deg, var(--nf-accent-pink, #e91e8c), var(--nf-accent-orange, #ff6b35));
  color: #fff;
}

.cookie-btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.cookie-btn-secondary {
  background: transparent;
  color: var(--nf-text-muted, #6c757d);
  font-weight: 500;
}

.cookie-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--nf-text, #1a1a2e);
}

.cookie-btn-outline {
  background: transparent;
  color: var(--nf-primary, #6c3baa);
  border: 1px solid var(--nf-primary, #6c3baa);
}

.cookie-btn-outline:hover {
  background: var(--nf-primary, #6c3baa);
  color: #fff;
}

/* Preferences panel */
.cookie-preferences {
  border-top: 1px solid var(--nf-border, #e9ecef);
  margin-top: 1.5rem;
  padding-top: 1rem;
  text-align: left;
}

.cookie-preferences-content {
  padding: 0;
}

.cookie-category {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--nf-border, #e9ecef);
}

.cookie-category:last-of-type {
  border-bottom: none;
}

.cookie-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.cookie-category-info h4 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--nf-text, #1a1a2e);
}

.cookie-category-info p {
  margin: 0;
  font-size: 0.825rem;
  color: var(--nf-text-muted, #6c757d);
  line-height: 1.4;
}

/* Toggle switch */
.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 24px;
  transition: background-color 0.25s ease;
}

.cookie-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.cookie-toggle input:checked + .cookie-toggle-slider {
  background-color: var(--nf-primary, #6c3baa);
}

.cookie-toggle input:checked + .cookie-toggle-slider::before {
  transform: translateX(20px);
}

.cookie-toggle-always-on {
  background-color: var(--nf-primary, #6c3baa);
  opacity: 0.6;
}

.cookie-toggle-always-on::before {
  transform: translateX(20px);
}

.cookie-toggle input:disabled + .cookie-toggle-slider {
  cursor: not-allowed;
}

.cookie-preferences-actions {
  padding-top: 0.75rem;
  text-align: right;
}

/* Visually hidden utility for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 600px) {
  .cookie-overlay {
    padding: 0.75rem;
  }

  .cookie-modal {
    padding: 1.75rem 1.25rem 1.5rem;
    border-radius: 16px;
    max-height: 95vh;
  }

  .cookie-modal-header h2 {
    font-size: 1.25rem;
  }

  .cookie-category-header {
    flex-direction: row;
  }
}

/* ==================================================================
   SESSION BRIEFING MODAL
   Apple-UX inspired pre-session briefing popup
   ================================================================== */

.sb-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sb-backdrop.sb-active {
  opacity: 1;
}

.sb-modal {
  background: var(--nf-surface, #fff);
  border-radius: 24px;
  width: 100%;
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  position: relative;
  box-shadow: 0 24px 80px rgba(42, 14, 92, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transform: scale(0.95) translateY(16px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sb-backdrop.sb-active .sb-modal {
  transform: scale(1) translateY(0);
}

/* Scrollbar */
.sb-modal::-webkit-scrollbar { width: 6px; }
.sb-modal::-webkit-scrollbar-track { background: transparent; }
.sb-modal::-webkit-scrollbar-thumb {
  background: rgba(42, 14, 92, 0.12);
  border-radius: 3px;
}

/* Close button */
.sb-close {
  position: sticky;
  top: 1rem;
  float: right;
  margin: 1rem 1rem 0 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--nf-text-muted, #515165);
  z-index: 10;
}

.sb-close:hover {
  background: var(--nf-accent-pink, #FF0F6F);
  color: #fff;
  transform: scale(1.1);
}

/* Hero section: avatar + client identity */
.sb-hero {
  text-align: center;
  padding: 2.5rem 2rem 1.5rem;
  background: linear-gradient(180deg, rgba(42, 14, 92, 0.04) 0%, transparent 100%);
}

.sb-avatar {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--nf-accent-pink, #FF0F6F), var(--nf-accent-orange, #FF7A30));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(255, 15, 111, 0.2);
}

.sb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-avatar-initials {
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

.sb-client-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--nf-primary, #2A0E5C);
  margin: 0 0 0.2rem;
  letter-spacing: -0.01em;
}

.sb-client-role {
  font-size: 0.9rem;
  color: var(--nf-text-muted, #515165);
  margin: 0;
}

/* Body */
.sb-body {
  padding: 0 2rem 1.5rem;
}

/* Section block */
.sb-section {
  background: var(--nf-bg, #F7F8FA);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.sb-section-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.sb-section-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
}

.sb-section-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nf-primary, #2A0E5C);
  margin: 0;
}

.sb-section-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--nf-text, #1C1C28);
  margin: 0;
}

.sb-summary-heading {
  font-weight: 600;
  margin: 0.75rem 0 0.15rem;
  color: var(--nf-primary, #2A0E5C);
}

.sb-summary-heading:first-child {
  margin-top: 0;
}

.sb-bullet-list {
  margin: 0.2rem 0 0.4rem 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.sb-bullet-list .sb-bullet-list {
  margin: 0.15rem 0 0.1rem 0;
  list-style: circle;
}

.sb-bullet-list .sb-bullet-list .sb-bullet-list {
  list-style: square;
}

.sb-bullet-list li {
  margin-bottom: 0.15rem;
  line-height: 1.55;
}

/* CTA Button */
.sb-cta {
  display: block;
  width: 100%;
  padding: 0.9rem 1.5rem;
  margin: 0.5rem 0 2rem;
  border: none;
  border-radius: 14px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--nf-accent-pink, #FF0F6F) 0%, var(--nf-accent-orange, #FF7A30) 100%);
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
}

.sb-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 15, 111, 0.35);
}

.sb-cta:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 640px) {
  .sb-modal {
    max-width: 100%;
    border-radius: 20px;
  }

  .sb-hero {
    padding: 2rem 1.25rem 1.25rem;
  }

  .sb-body {
    padding: 0 1.25rem 1.25rem;
  }

  .sb-avatar {
    width: 72px;
    height: 72px;
  }

  .sb-section {
    padding: 1rem 1.15rem;
  }
}

/* Loading state for session briefing modal */
.sb-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1.5rem;
}

.sb-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(42, 14, 92, 0.1);
  border-top-color: var(--nf-accent-pink, #FF0F6F);
  border-radius: 50%;
  animation: sb-spin 0.8s linear infinite;
}

@keyframes sb-spin {
  to { transform: rotate(360deg); }
}

.sb-loading-text {
  font-size: 1rem;
  color: var(--nf-text-muted, #515165);
  font-weight: 500;
  margin: 0;
}

.sb-error-icon {
  font-size: 2.5rem;
}

/* Fade-in animation for content swap (loading → briefing content) */
.sb-modal .sb-hero,
.sb-modal .sb-body {
  animation: sb-fade-in 0.3s ease;
}

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

/* ------------------------------------------------------------------
   Mute-during-TTS checkbox (settings drawer)
-------------------------------------------------------------------*/
.nf-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: var(--nf-text-muted, #666);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}

.nf-checkbox-label input[type="checkbox"] {
  accent-color: var(--nf-accent-pink, #FF0F6F);
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

/* ------------------------------------------------------------------
   Learning / User Guide Page
-------------------------------------------------------------------*/
.learning-page {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 20px 40px;
}

/* Two-column layout: sticky sidebar + scrolling content */
.learning-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* --- Sidebar TOC (desktop) --- */
.learning-toc {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 0.5rem;
}

.learning-toc nav {
  display: flex;
  flex-direction: column;
}

.learning-toc-heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nf-text-muted);
  margin-bottom: 0.75rem;
}

.learning-toc-link {
  position: relative;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--nf-text-muted);
  text-decoration: none;
  padding: 0.3rem 0 0.3rem 1rem;
  border-left: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.learning-toc-link:hover {
  color: var(--nf-primary);
  text-decoration: none;
}

.learning-toc-link.active {
  color: var(--nf-primary);
  font-weight: 600;
  border-left-color: var(--nf-accent-pink);
}

/* --- Mobile TOC dropdown (hidden on desktop) --- */
.learning-toc-mobile {
  display: none;
}

.learning-toc-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1px solid var(--nf-border);
  border-radius: 8px;
  background: var(--nf-surface);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nf-primary);
  cursor: pointer;
}

.learning-toc-chevron {
  transition: transform 0.25s;
}

.learning-toc-mobile-toggle[aria-expanded="true"] .learning-toc-chevron {
  transform: rotate(180deg);
}

.learning-toc-mobile-menu {
  display: none;
  flex-direction: column;
  border: 1px solid var(--nf-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--nf-surface);
  overflow: hidden;
}

.learning-toc-mobile-menu.open {
  display: flex;
}

.learning-toc-mobile-menu .learning-toc-link {
  padding: 0.6rem 1rem;
  border-left: 3px solid transparent;
  font-size: 0.9rem;
}

.learning-toc-mobile-menu .learning-toc-link.active {
  background: rgba(42, 14, 92, 0.04);
}

.learning-page h1 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--nf-primary);
  margin-bottom: 0.5rem;
}

.learning-intro {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--nf-text-muted);
  margin-bottom: 2.5rem;
  max-width: 720px;
}

.learning-content section {
  margin-bottom: 20px;
}

.learning-content h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--nf-primary);
  margin-top: 20px;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--nf-border);
}

.learning-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--nf-text);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.learning-content p {
  line-height: 1.7;
  color: var(--nf-text);
  margin-bottom: 0.75rem;
}

.learning-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.learning-content ul li {
  line-height: 1.7;
  color: var(--nf-text);
  margin-bottom: 0.4rem;
}

.learning-content a {
  color: var(--nf-accent-pink);
  text-decoration: none;
}

.learning-content a:hover {
  text-decoration: underline;
}

/* Screenshots */
.learning-screenshot {
  margin: 1.5rem 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--nf-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.learning-screenshot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Voice / Silent mode cards */
.learning-mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.25rem 0;
}

.learning-mode-card {
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  border: 1px solid var(--nf-border);
  background: var(--nf-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.learning-mode-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--nf-primary);
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.learning-mode-card p {
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* Tip callout box */
.learning-tip-box {
  padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  margin: 1rem 0;
  border-radius: 10px;
  border-left: 4px solid var(--nf-accent-pink);
  background: linear-gradient(135deg, rgba(255, 15, 111, 0.04) 0%, rgba(255, 122, 48, 0.04) 100%);
}

.learning-tip-box ul {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.learning-tip-box ul li {
  margin-bottom: 0.6rem;
}

.learning-tip-box ul li:last-child {
  margin-bottom: 0;
}

/* Tables */
.learning-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}

.learning-table th,
.learning-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border: 1px solid var(--nf-border);
}

.learning-table th {
  background: var(--nf-primary);
  color: #fff;
  font-weight: 600;
}

.learning-table td {
  background: var(--nf-surface);
}

.learning-table tbody tr:hover td {
  background: var(--nf-bg);
}

/* Responsive — sidebar collapses to dropdown on smaller screens */
@media (max-width: 960px) {
  .learning-page {
    max-width: 100%;
  }

  .learning-layout {
    display: block;
  }

  .learning-toc {
    display: none;
  }

  .learning-toc-mobile {
    display: block;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 768px) {
  .learning-page {
    margin: 1rem auto;
    padding: 20px 20px;
  }

  .learning-page h1 {
    font-size: 1.6rem;
  }

  .learning-intro {
    font-size: 1rem;
  }

  .learning-mode-cards {
    grid-template-columns: 1fr;
  }

  .learning-table {
    font-size: 0.85rem;
  }

  .learning-table th,
  .learning-table td {
    padding: 0.5rem 0.65rem;
  }

}

/* ═══════════════════════════════════════════════════════════════════════
   Gold Transcript Example Drawer
   ═══════════════════════════════════════════════════════════════════════ */

/* --- View Example Button --- */
.nf-btn-example {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1.5px solid var(--nf-primary-light, #5A3E9C);
  border-radius: 8px;
  background: transparent;
  color: var(--nf-primary-light, #5A3E9C);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.nf-btn-example:hover {
  background: var(--nf-primary-light, #5A3E9C);
  color: #fff;
}

.nf-btn-example:hover svg {
  stroke: #fff;
}

/* First-time pulse animation */
.nf-btn-example--pulse {
  animation: nf-example-pulse 2s ease-in-out 3;
}

@keyframes nf-example-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(90, 62, 156, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(90, 62, 156, 0); }
}

/* --- Backdrop --- */
.nf-example-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nf-example-backdrop.active {
  display: block;
  opacity: 1;
}

/* --- Drawer --- */
.nf-example-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 100vw;
  height: 100vh;
  z-index: 10002;
  background: var(--nf-surface, #fff);
  box-shadow: -8px 0 32px rgba(42, 14, 92, 0.15);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nf-example-drawer.active {
  transform: translateX(0);
}

.nf-example-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* --- Drawer Header --- */
.nf-example-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--nf-border, #E0E3E9);
  flex-shrink: 0;
}

.nf-example-drawer-header .nf-card-title {
  margin: 0;
  font-size: 1.1rem;
}

.nf-example-drawer-header .nf-card-subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
}

.nf-drawer-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--nf-text-muted, #515165);
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  border-radius: 6px;
  transition: background 0.15s;
}

.nf-drawer-close:hover {
  background: var(--nf-bg, #F7F8FA);
  color: var(--nf-text, #1C1C28);
}

/* --- Drawer Meta --- */
.nf-example-drawer-meta {
  padding: 0.75rem 1.25rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.nf-example-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
}

.nf-example-meta-badge--scenario {
  background: #F0EBFF;
  color: var(--nf-primary, #2A0E5C);
}

.nf-example-meta-badge--client {
  background: #FFE8F0;
  color: #B5004F;
}

.nf-example-meta-badge--score {
  background: #E8F5E9;
  color: #2E7D32;
}

/* --- Loading & Empty States --- */
.nf-example-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  color: var(--nf-text-muted, #515165);
  font-size: 0.9rem;
}

.nf-example-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--nf-text-muted, #515165);
  font-size: 0.9rem;
}

/* --- Turns Container --- */
.nf-example-turns {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem 2rem;
  scroll-behavior: smooth;
}

/* --- Individual Turn --- */
.nf-example-turn {
  display: flex;
  gap: 0.65rem;
  margin-bottom: 1rem;
  opacity: 0;
  animation: nf-turn-fade-in 0.4s ease forwards;
}

.nf-example-turn--advisor {
  flex-direction: row;
}

.nf-example-turn--client {
  flex-direction: row-reverse;
}

@keyframes nf-turn-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Speaker Icon --- */
.nf-example-turn-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.nf-example-turn--advisor .nf-example-turn-icon {
  background: #F0EBFF;
  color: var(--nf-primary, #2A0E5C);
}

.nf-example-turn--client .nf-example-turn-icon {
  background: #FFE8F0;
  color: #B5004F;
}

/* --- Turn Bubble --- */
.nf-example-turn-body {
  flex: 1;
  min-width: 0;
}

.nf-example-turn-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.nf-example-turn-speaker {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.nf-example-turn--advisor .nf-example-turn-speaker {
  color: var(--nf-primary, #2A0E5C);
}

.nf-example-turn--client .nf-example-turn-speaker {
  color: #B5004F;
}

.nf-example-turn-number {
  font-size: 0.65rem;
  color: var(--nf-text-muted, #515165);
  background: var(--nf-bg, #F7F8FA);
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
}

.nf-example-turn-bubble {
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--nf-text, #1C1C28);
}

.nf-example-turn--advisor .nf-example-turn-bubble {
  background: #F0EBFF;
  border-left: 3px solid var(--nf-primary-light, #5A3E9C);
}

.nf-example-turn--client .nf-example-turn-bubble {
  background: #FFF5F8;
  border-right: 3px solid #FF6B9D;
}

/* --- Technique Tags --- */
.nf-example-techniques {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.nf-technique-tag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Technique color mapping */
.nf-technique-tag--empathy {
  background: #E3F2FD;
  color: #1565C0;
}

.nf-technique-tag--compliance {
  background: #FFF3E0;
  color: #E65100;
}

.nf-technique-tag--planning {
  background: #E8F5E9;
  color: #2E7D32;
}

.nf-technique-tag--coaching {
  background: #F3E5F5;
  color: #7B1FA2;
}

.nf-technique-tag--default {
  background: var(--nf-bg, #F7F8FA);
  color: var(--nf-text-muted, #515165);
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .nf-example-drawer {
    width: 100vw;
  }
}

@media (max-width: 768px) {
  .nf-btn-example span {
    display: none;
  }
}

/* ==================================================================
   Conversation v2 — PR2: Stage section
   Portrait + confidence ring + central state pill. State-aware visuals
   are driven by [data-voice-state] on .nf-page (mirrors STT/TTS phase).
================================================================== */
@keyframes nfBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes nfDot     { 0%, 80%, 100% { transform: scale(0.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

.nf-stage {
  position: relative;
  background: var(--nf-gradient-brand, linear-gradient(135deg, #2A0E5C, #5A3E9C));
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(42, 14, 92, 0.08);
  overflow: hidden;
  color: #fff;
  padding: 2rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-height: 480px;
  margin-bottom: 1rem;
}
.nf-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.30) 100%);
  pointer-events: none;
}

.nf-portrait-frame {
  position: relative;
  width: 240px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.nf-confidence-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.nf-confidence-ring .track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 7;
}
.nf-confidence-ring .fill {
  fill: none;
  stroke: url(#nf-conf-grad);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nf-portrait-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  line-height: 1;
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  transition: transform 250ms ease;
}
.nf-page[data-voice-state="maria-speaking"] .nf-portrait-circle:not(.nf-portrait-circle--pulsating) {
  animation: nfBreathe 2.6s ease-in-out infinite;
}
.nf-portrait-circle.nf-portrait-circle--pulsating {
  animation: none;
  transform: scale(var(--nf-portrait-pulse, 1));
  transition: transform 60ms ease-out;
}

.nf-state-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.20);
  transition: background 200ms ease, border-color 200ms ease;
}
.nf-state-dots {
  display: inline-flex;
  gap: 4px;
}
.nf-state-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: nfDot 1.2s infinite ease-in-out;
}
.nf-state-dots span:nth-child(2) { animation-delay: 0.15s; }
.nf-state-dots span:nth-child(3) { animation-delay: 0.30s; }

/* State variants — mutually exclusive content blocks driven by data-voice-state */
.nf-state-default,
.nf-state-listening,
.nf-state-heard,
.nf-state-thinking,
.nf-state-speaking,
.nf-state-mode-text { display: none; }

.nf-page[data-voice-state="idle"]           .nf-state-default   { display: inline-flex; }
.nf-page[data-voice-state="user-speaking"]  .nf-state-listening { display: inline-flex; }
.nf-page[data-voice-state="coach-pulsing"]  .nf-state-listening { display: inline-flex; }
.nf-page[data-voice-state="heard"]          .nf-state-heard     { display: inline-flex; }
.nf-page[data-voice-state="maria-thinking"] .nf-state-thinking  { display: inline-flex; }
.nf-page[data-voice-state="maria-speaking"] .nf-state-speaking  { display: inline-flex; }

.nf-page[data-voice-state="user-speaking"] .nf-state-pill,
.nf-page[data-voice-state="coach-pulsing"] .nf-state-pill {
  background: rgba(45, 140, 255, 0.26);
  border-color: rgba(45, 140, 255, 0.40);
}
.nf-page[data-voice-state="heard"] .nf-state-pill {
  background: rgba(44, 201, 143, 0.30);
  border-color: rgba(44, 201, 143, 0.45);
}
.nf-page[data-voice-state="maria-thinking"] .nf-state-pill {
  background: rgba(255, 255, 255, 0.22);
}
.nf-page[data-voice-state="maria-speaking"] .nf-state-pill {
  background: rgba(255, 15, 111, 0.30);
  border-color: rgba(255, 15, 111, 0.45);
}

.nf-stage-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.nf-persona-name {
  font-size: 1.3rem;
  font-weight: 700;
}
.nf-persona-role {
  font-size: 0.82rem;
  opacity: 0.72;
}

/* Stage reply card — text-mode only. Sits below the persona meta on
   the stage gradient and shows the latest trainer bubble's text. */
.nf-stage-reply {
  display: none;
  width: 100%;
  max-width: 440px;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 0.6rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1.5;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
.nf-stage-reply::before {
  /* Driven by --nf-stage-reply-label set in JS once the client name
     resolves (e.g. "Maria says"). Falls back to a generic label until
     the name is available. */
  content: var(--nf-stage-reply-label, "Client says");
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.35rem;
}
.nf-page[data-input-mode="text"] .nf-stage-reply:not([hidden]) {
  display: block;
}

.nf-conf-trend {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(44, 201, 143, 0.18);
  color: #d6ffe8;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid rgba(44, 201, 143, 0.30);
}
.nf-conf-trend[hidden] { display: none; }
.nf-conf-trend.down {
  background: rgba(255, 15, 111, 0.18);
  color: #ffd6e2;
  border-color: rgba(255, 15, 111, 0.30);
}
.nf-conf-trend.flat {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.70);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Hide legacy header VU bar + status pill — replaced by central state pill.
   The DOM nodes stay so roleplayApp.js can keep writing to them; we just
   stop rendering them. Remove these rules once the JS is updated to drive
   data-voice-state directly. */
.nf-page #statusIndicator,
.nf-page #vuContainer {
  display: none !important;
}

/* ==================================================================
   Conversation v2 — PR3: Hide partial STT by default
   The live partial-STT bubble (.streaming-partial / .streaming-final)
   is hidden unless captions are explicitly enabled — keeps the user's
   eyes on the client, not on their own typed-out words. The captions
   toggle lands in the settings drawer (PR8); the flag is persisted in
   localStorage and applied via [data-captions] on .nf-page.
================================================================== */
.nf-page:not([data-captions="on"]) .transcript-message.user:has(.streaming-partial),
.nf-page:not([data-captions="on"]) .transcript-message.user:has(.streaming-final) {
  display: none;
}

/* ==================================================================
   Conversation v2 — PR4: Two-line transcript strip + slide-up drawer
================================================================== */
@keyframes nfDrawerUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.nf-page {
  /* Reserve room for the sticky strip at the bottom of the page. */
  padding-bottom: 6rem;
}

.nf-strip {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: calc(100% - 3rem);
  max-width: 1280px;
  background: #fff;
  border: 1px solid var(--nf-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(42, 14, 92, 0.08);
  padding: 0.5rem 0.85rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 0.85rem;
  align-items: center;
}
.nf-strip-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nf-strip-mode {
  flex-shrink: 0;
  background: rgba(42, 14, 92, 0.05);
  border: 1px solid transparent;
  color: var(--nf-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.nf-strip-mode:hover {
  background: linear-gradient(135deg, var(--nf-accent-pink), var(--nf-accent-orange));
  color: #fff;
  border-color: transparent;
}
.nf-strip-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nf-strip-line {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}
.nf-strip-speaker {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  width: 44px;
  text-align: right;
}
.nf-strip-line.maria .nf-strip-speaker { color: var(--nf-accent-pink); }
.nf-strip-line.you   .nf-strip-speaker { color: var(--nf-primary-light); }
.nf-strip-text {
  flex: 1;
  min-width: 0;
  font-size: 0.84rem;
  color: var(--nf-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nf-strip-line.you .nf-strip-text { color: var(--nf-text-muted); }
.nf-strip-toggle {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--nf-primary);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  align-self: stretch;
}
.nf-strip-toggle:hover {
  background: rgba(42, 14, 92, 0.05);
  color: var(--nf-accent-pink);
}

/* Drawer scrim + slide-up host. The existing transcript card is moved
   into .nf-drawer-host in the markup so existing JS keeps writing to
   the same #transcriptLog node. */
.nf-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 40, 0.45);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 30;
}
.nf-drawer-host {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 70vh;
  background: #fff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -16px 48px rgba(42, 14, 92, 0.18);
  z-index: 31;
  display: none;
  flex-direction: column;
  animation: nfDrawerUp 320ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.nf-page[data-drawer-open="true"] .nf-drawer-scrim { display: block; }
.nf-page[data-drawer-open="true"] .nf-drawer-host  { display: flex; }

.nf-drawer-grab {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--nf-border);
  margin: 8px auto 0;
}
.nf-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--nf-border);
}
.nf-drawer-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--nf-primary);
  margin: 0;
}
.nf-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.nf-drawer-body > .nf-transcript-card {
  border: none;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}

/* ==================================================================
   Conversation v2 — PR5: Coach card
   One state-aware coaching sentence + a Get-a-hint affordance that
   delegates to the existing #getSuggestionBtn. Glow when pulsing.
================================================================== */
@keyframes nfCoachPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.nf-coach {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border: 1px solid var(--nf-border);
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(42, 14, 92, 0.08);
  overflow: hidden;
  margin-bottom: 1rem;
}
.nf-coach-says {
  padding: 1.25rem 1.25rem 1.1rem;
  background: linear-gradient(135deg, rgba(255, 15, 111, 0.05), rgba(255, 122, 48, 0.05));
  border-bottom: 1px solid var(--nf-border);
}
.nf-coach-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--nf-accent-pink);
  margin-bottom: 0.6rem;
}
.nf-coach-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nf-accent-pink);
  box-shadow: 0 0 0 3px rgba(255, 15, 111, 0.18);
}
.nf-coach-text {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--nf-text);
  font-weight: 500;
  margin: 0;
}
.nf-coach-text strong {
  color: var(--nf-primary);
  font-weight: 700;
  background: linear-gradient(transparent 60%, rgba(255, 15, 111, 0.18) 60%);
  padding: 0 1px;
}

/* State-aware coaching copy — same data-voice-state gate as the pill. */
.nf-coach-line { display: none; }
.nf-page[data-voice-state="idle"]           .nf-coach-line.idle           { display: block; }
.nf-page[data-voice-state="user-speaking"]  .nf-coach-line.user-speaking  { display: block; }
.nf-page[data-voice-state="heard"]          .nf-coach-line.heard          { display: block; }
.nf-page[data-voice-state="maria-thinking"] .nf-coach-line.maria-thinking { display: block; }
.nf-page[data-voice-state="maria-speaking"] .nf-coach-line.maria-speaking { display: block; }
.nf-page[data-voice-state="coach-pulsing"]  .nf-coach-line.coach-pulsing  { display: block; }

.nf-coach-hint {
  padding: 0.95rem 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.nf-coach-hint-help {
  font-size: 0.78rem;
  color: var(--nf-text-muted);
}
.nf-hint-cta {
  width: 100%;
  padding: 0.55rem 1rem;
  border: 1px solid var(--nf-border);
  border-radius: 999px;
  background: #fff;
  color: var(--nf-primary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.nf-hint-cta:hover {
  background: linear-gradient(135deg, var(--nf-accent-pink), var(--nf-accent-orange));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(255, 15, 111, 0.30);
}
.nf-hint-cta:disabled,
.nf-hint-cta[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.nf-hint-penalty {
  font-size: 0.72rem;
  color: var(--nf-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nf-hint-stats {
  font-size: 0.72rem;
  color: var(--nf-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.nf-hint-stats[hidden] { display: none; }
.nf-hint-stats-divider {
  opacity: 0.5;
}

/* Wrong moment to ask: hint disabled while the user is mid-utterance. */
.nf-page[data-voice-state="user-speaking"] .nf-hint-cta {
  opacity: 0.45;
  pointer-events: none;
}

/* Coach-pulsing — gentle glow on the whole card to nudge the user. */
.nf-page[data-voice-state="coach-pulsing"] .nf-coach {
  box-shadow: 0 0 0 3px rgba(255, 15, 111, 0.22),
              0 8px 24px rgba(42, 14, 92, 0.08);
  animation: nfCoachPulse 1.6s ease-in-out infinite;
}

/* Suppress the legacy "Need Help?" header + request bar inside the
   #suggestionPanel — the new coach card is the visible affordance.
   The loading and display states stay visible so the suggestion text
   still surfaces in its panel below the coach card. */
#suggestionPanel > .nf-card-header,
#suggestionPanel > .nf-suggestion-request {
  display: none;
}

/* ==================================================================
   Conversation v2 — Coach extras: collapsible secondary lists.
   Hides the legacy progress / client-header / status-hint / status-
   meta blocks that the mock doesn't surface. The data nodes are
   either relocated into the new <details> bodies (milestones,
   objectives) or mirrored into the Live signals tile.
================================================================== */
.nf-coach-extras {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.85rem;
}
.nf-detail {
  background: #fff;
  border: 1px solid var(--nf-border);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(42, 14, 92, 0.04);
}
.nf-detail > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nf-text);
  border-radius: 12px;
}
.nf-detail > summary::-webkit-details-marker { display: none; }
.nf-detail > summary::before {
  content: "›";
  font-size: 1.05rem;
  color: var(--nf-text-muted);
  transition: transform 200ms ease;
  flex-shrink: 0;
  line-height: 1;
}
.nf-detail[open] > summary::before { transform: rotate(90deg); }
.nf-detail > summary:hover { background: rgba(42, 14, 92, 0.03); }
.nf-detail-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--nf-text-muted);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(42, 14, 92, 0.06);
}
.nf-detail-body {
  padding: 0 0.95rem 0.95rem;
}

/* Live signals tile — mirrored from legacy mood pill + score bars. */
.nf-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}
.nf-signal {
  background: rgba(42, 14, 92, 0.04);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.nf-signal-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nf-text-muted);
}
.nf-signal-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--nf-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nf-signal-bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(42, 14, 92, 0.1);
  overflow: hidden;
}
.nf-signal-bar-fill {
  height: 100%;
  width: 0%;
  transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nf-signal.satisfaction .nf-signal-bar-fill { background: var(--nf-info); }
.nf-signal.trust        .nf-signal-bar-fill { background: var(--nf-accent-pink); }

/* Slim down the relocated milestone container so it fits under the
   collapsible detail (it kept its legacy class for JS, but we don't
   need the panel-style padding anymore). */
#milestonesHost > .nf-unified-milestones {
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

/* The legacy milestone cards and global-objectives summary live inside
   the new details bodies (relocated so legacy JS keeps writing to the
   same nodes), but they don't render the mock's flat list shape. Hide
   them; the #msMirror / #objMirror siblings render the mock-style list
   from the same data. */
#milestonesHost > #unifiedMilestonesContainer,
#objectivesHost > #statusGlobalObjectives {
  display: none;
}

/* Mock-style milestone list. */
.nf-ms-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.nf-ms-list:empty::before {
  content: "Milestones will appear when the session starts.";
  display: block;
  font-size: 0.78rem;
  color: var(--nf-text-muted);
  padding: 4px 0;
}
.nf-ms-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(42, 14, 92, 0.03);
  font-size: 0.85rem;
}
.nf-ms-list li.done {
  background: rgba(44, 201, 143, 0.07);
  border: 1px solid rgba(44, 201, 143, 0.20);
  color: var(--nf-text-muted);
}
.nf-ms-list li.done .nf-ms-text { text-decoration: line-through; }
.nf-ms-list li.active {
  background: rgba(255, 15, 111, 0.05);
  border: 1px solid rgba(255, 15, 111, 0.18);
}
.nf-ms-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  background: transparent;
  color: var(--nf-text-muted);
  border: 1.5px solid var(--nf-border);
  flex-shrink: 0;
}
.nf-ms-list li.done .nf-ms-icon {
  background: var(--nf-success);
  color: #fff;
  border-color: transparent;
}
.nf-ms-list li.active .nf-ms-icon {
  background: var(--nf-accent-pink);
  color: #fff;
  border-color: transparent;
}
.nf-ms-text {
  flex: 1;
  min-width: 0;
}

/* Mock-style objective list. */
.nf-obj-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nf-obj-list:empty::before {
  content: "Objectives will appear when the session starts.";
  display: block;
  font-size: 0.78rem;
  color: var(--nf-text-muted);
  padding: 4px 0;
}
.nf-obj {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.84rem;
  line-height: 1.4;
}
.nf-obj-glyph {
  font-size: 1rem;
  line-height: 1;
  margin-top: 1px;
  flex-shrink: 0;
}
.nf-obj.met .nf-obj-glyph     { color: var(--nf-success); }
.nf-obj.partial .nf-obj-glyph { color: var(--nf-warning); }
.nf-obj.pending .nf-obj-glyph { color: var(--nf-text-muted); }
.nf-obj-text {
  flex: 1;
  min-width: 0;
  color: var(--nf-text);
}
.nf-obj.pending .nf-obj-text { color: var(--nf-text-muted); }
.nf-obj-badge {
  flex-shrink: 0;
  font-size: 0.6rem;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid;
  align-self: flex-start;
}
.nf-obj-badge.do    { color: #0d7050; background: rgba(44, 201, 143, 0.15); border-color: rgba(44, 201, 143, 0.3); }
.nf-obj-badge.avoid { color: #991b1b; background: rgba(230, 74, 74, 0.12); border-color: rgba(230, 74, 74, 0.3); }

/* Hide the legacy #statusPanel sections that the mock doesn't surface.
   The DOM nodes stay because legacy JS still writes to their inner
   ids (mood pill, score bars) — those updates feed the Live signals
   mirror. Errors and the suggestion loading/display stay visible. */
.nf-page #statusPanel > .nf-progress-section,
.nf-page #statusPanel > .nf-client-header,
.nf-page #statusPanel > .nf-status-hint,
.nf-page #statusPanel > .nf-status-meta,
.nf-page #statusPanel > .nf-global-objectives-section,
.nf-page #statusPanel > .nf-status-section:has(> #unifiedMilestonesContainer) {
  display: none;
}
/* When the milestone container has been relocated, the wrapper is
   empty — the rule above handles that via :has(). For browsers that
   skip :has on an empty subtree, also hide any empty status sections. */
.nf-page #statusPanel > .nf-status-section:empty {
  display: none;
}

/* ==================================================================
   Conversation v2 — PR6: Primary action row
   Big Pause, mic-mute peer, demoted ⋯ menu for Restart / End. The
   buttons proxy to their legacy peers so the wired handlers run as is.
================================================================== */
.nf-action-row {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  margin-top: 0.85rem;
  margin-bottom: 1rem;
}
.nf-pause-btn {
  flex: 1;
  height: 56px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--nf-accent-pink), var(--nf-accent-orange));
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px rgba(255, 15, 111, 0.30);
  cursor: pointer;
  font-family: inherit;
  transition: filter 180ms ease, transform 180ms ease;
}
.nf-pause-btn:hover { filter: brightness(1.06); }
.nf-pause-btn:active { transform: translateY(1px); }
.nf-pause-btn.is-paused {
  background: var(--nf-success);
  box-shadow: 0 4px 12px rgba(44, 201, 143, 0.30);
}
.nf-pause-btn .label-paused,
.nf-pause-btn.is-paused .label-default { display: none; }
.nf-pause-btn.is-paused .label-paused {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nf-mic-btn,
.nf-more-btn {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--nf-border);
  color: var(--nf-primary);
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(42, 14, 92, 0.06);
  font-family: inherit;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.nf-mic-btn:hover,
.nf-more-btn:hover { background: rgba(42, 14, 92, 0.04); }
.nf-mic-btn .icon-mic,
.nf-mic-btn.muted .icon-muted { display: inline; }
.nf-mic-btn.muted .icon-mic,
.nf-mic-btn .icon-muted { display: none; }
.nf-mic-btn.muted {
  background: var(--nf-error);
  color: #fff;
  border-color: var(--nf-error);
}
.nf-more-btn {
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.05em;
}

.nf-more-wrap { position: relative; }
.nf-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--nf-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(42, 14, 92, 0.08);
  min-width: 200px;
  z-index: 10;
  padding: 4px;
}
.nf-more-menu[hidden] { display: none; }
.nf-more-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--nf-text);
  cursor: pointer;
}
.nf-more-item:hover { background: rgba(42, 14, 92, 0.05); }
.nf-more-divider {
  height: 1px;
  background: var(--nf-border);
  margin: 4px 0;
}
.nf-more-item-danger { color: var(--nf-error); }
.nf-more-item-danger:hover { background: rgba(230, 74, 74, 0.08); }

/* Hide the legacy session controls row + the legacy mic-mute button —
   the new action row is the visible peer. The DOM nodes stay so the
   existing JS keeps writing to them. */
.nf-page #sessionControlsRow,
.nf-page #toggleListeningBtn {
  display: none !important;
}

/* ==================================================================
   Conversation v2 — PR7: Self-view PiP
   Small picture-in-picture on the stage card. <video> is shown when
   camera is granted; the face-emoji fallback pulses with #vuBar level
   so users still see live "we're hearing you" feedback when camera is
   off or denied.
================================================================== */
.nf-self-pip {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 3;
  width: 120px;
  height: 90px;
  border-radius: 8px;
  background: linear-gradient(160deg, #2A0E5C, #5A3E9C);
  box-shadow: 0 4px 12px rgba(42, 14, 92, 0.06),
              0 0 0 2px rgba(255, 255, 255, 0.16);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 200ms ease;
}
.nf-self-pip-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.nf-self-pip[data-camera="on"] .nf-self-pip-video { display: block; }
.nf-self-pip[data-camera="on"] .nf-self-pip-face  { display: none; }
.nf-self-pip-face {
  font-size: 2.2rem;
  line-height: 1;
  opacity: 0.92;
  transform: scale(var(--nf-pip-pulse, 1));
  transition: transform 90ms ease-out;
}
.nf-self-pip-label {
  position: absolute;
  left: 6px;
  bottom: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  padding: 1px 5px;
  border-radius: 3px;
  z-index: 1;
}
.nf-page[data-voice-state="user-speaking"] .nf-self-pip {
  box-shadow: 0 4px 12px rgba(42, 14, 92, 0.06),
              0 0 0 2px rgba(45, 140, 255, 0.55);
}
.nf-page[data-self-view="off"] .nf-self-pip { display: none; }
.nf-page[data-input-mode="text"] .nf-self-pip { display: none; }

/* In text mode the strip is redundant with the text-mode input bar,
   and the voice-only state pill copy doesn't apply — the "⌨ Typing
   reply" variant takes over while idle or listening. */
.nf-page[data-input-mode="text"] .nf-strip { display: none; }
.nf-page[data-input-mode="text"] .nf-state-default,
.nf-page[data-input-mode="text"] .nf-state-listening,
.nf-page[data-input-mode="text"] .nf-state-heard { display: none !important; }
.nf-page[data-input-mode="text"][data-voice-state="idle"] .nf-state-mode-text,
.nf-page[data-input-mode="text"][data-voice-state="user-speaking"] .nf-state-mode-text {
  display: inline-flex;
}

/* Slim conversation header — full-width strip with logo, scenario title,
   session time chip and settings button. Replaces the shared _Layout
   chrome on the conversation page only (hidden via inline page CSS). */
.nf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  background: var(--nf-gradient-brand, linear-gradient(135deg, #2A0E5C, #5A3E9C));
  color: #fff;
  box-shadow: 0 4px 12px rgba(42, 14, 92, 0.06);
}
.nf-header-left,
.nf-header-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.nf-header-logo img {
  height: 24px;
  display: block;
}
.nf-header-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.nf-eyebrow-w {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.nf-scenario-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  display: none; /* Hidden — falls back to scenario id when metadata is
                    sparse, which isn't useful to the user. */
}
.nf-icon-btn--header {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.nf-icon-btn--header:hover { background: rgba(255, 255, 255, 0.10); }

/* Session time chip — restyled inside the dark header gradient. */
.nf-time-elapsed-chip {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.nf-time-elapsed-chip[hidden] { display: none; }
.nf-time-elapsed-icon {
  font-size: 0.85rem;
  opacity: 0.7;
}
.nf-time-elapsed-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}
.nf-time-elapsed-value {
  font-variant-numeric: tabular-nums;
  color: #fff;
}

/* Stage portrait image (mirrored from briefing modal). Replaces the
   placeholder emoji once the client image URL is captured. */
.nf-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* The header now hosts settings — the legacy controls-bar settings
   button is redundant. The DOM node stays so the v2 drawer click
   proxy still has its target. */
.nf-page #micSettingsBtn {
  display: none !important;
}

/* Hide #statusPanel by default — it's been hollowed out by previous
   chunks and only re-appears when there's *active* content to show:
   a loading suggestion, a rendered suggestion, or a system alert.
   The .has-active-content class is toggled by JS based on the inline
   style of those children. When it does appear, strip the outer card
   chrome and let the inner sections own the space — each has its own
   styling (errors: red alert box; suggestion-display: pink gradient
   card) so the wrapper just adds dead padding. */
.nf-page #statusPanel { display: none; }
.nf-page #statusPanel.has-active-content {
  display: block;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Hide the strip and text-mode bar pre-session — neither is useful
   before the session has started. session-active is toggled by the
   action row's syncRowVisible() observer (mirrors #sessionControlsRow
   visibility, the same gate the action row uses). */
.nf-page:not(.session-active) .nf-strip,
.nf-page:not(.session-active) .nf-text-bar {
  display: none !important;
}

/* The legacy .nf-controls-bar at the top of #chatPanel has been
   hollowed out — every visible control inside it (mode toggle,
   settings, report) now has a v2 home (strip/settings drawer/
   completion card). Keep the bar in DOM so the JS proxies still
   resolve their targets, but hide the empty container. */
.nf-page .nf-controls-bar { display: none !important; }

/* Session completion lock state. When #sessionCompleteBanner becomes
   visible, JS sets [data-session-state="completed"] on .nf-page and
   the active-session UI surfaces are hidden. Stage card stays visible
   for closure context; the only interactive surface is the centered
   completion card with View Report + Start New Session. */
.nf-page[data-session-state="completed"] .nf-action-row,
.nf-page[data-session-state="completed"] .nf-strip,
.nf-page[data-session-state="completed"] .nf-text-bar,
.nf-page[data-session-state="completed"] .nf-coach,
.nf-page[data-session-state="completed"] .nf-coach-extras,
.nf-page[data-session-state="completed"] #statusPanel,
.nf-page[data-session-state="completed"] #silentModeInputContainer,
.nf-page[data-session-state="completed"] #windingDownBanner {
  display: none !important;
}

/* Centered completion card. Replaces the old inline banner styling
   when in the completed state. */
.nf-session-complete-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  max-width: 480px;
  margin: 2.5rem auto;
  padding: 2.25rem 2rem 2rem;
  background: #fff;
  border: 1px solid var(--nf-border);
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(42, 14, 92, 0.18);
}
.nf-session-complete-icon {
  font-size: 2.75rem;
  line-height: 1;
}
.nf-session-complete-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--nf-primary);
}
.nf-session-complete-subtitle {
  margin: 0;
  color: var(--nf-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
.nf-session-complete-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
  justify-content: center;
}
.nf-btn-banner-report,
.nf-btn-banner-new {
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  border: 1px solid transparent;
  transition: filter 180ms ease, background 180ms ease;
}
.nf-btn-banner-report {
  background: linear-gradient(135deg, var(--nf-accent-pink), var(--nf-accent-orange));
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(255, 15, 111, 0.30);
}
.nf-btn-banner-report:hover { filter: brightness(1.05); }
.nf-btn-banner-new {
  background: #fff;
  color: var(--nf-primary);
  border-color: var(--nf-border);
}
.nf-btn-banner-new:hover { background: rgba(42, 14, 92, 0.04); }

/* Text-mode input bar — pinned to the bottom like the strip, replaces
   the legacy silent-mode card while [data-input-mode="text"]. The
   legacy #silentModeInputContainer is hidden — this bar's input proxies
   to its textarea so the wired Enter handler still runs. */
.nf-text-bar {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: calc(100% - 3rem);
  max-width: 1280px;
  display: none;
  background: #fff;
  border: 1px solid var(--nf-border);
  border-radius: 999px;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  box-shadow: 0 8px 24px rgba(42, 14, 92, 0.08);
  align-items: center;
  gap: 0.6rem;
}
.nf-page[data-input-mode="text"] .nf-text-bar { display: flex; }
.nf-page[data-input-mode="text"] #silentModeInputContainer { display: none !important; }

.nf-text-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--nf-text);
  padding: 0.4rem 0;
}
.nf-text-input::placeholder { color: var(--nf-text-muted); }
.nf-text-send {
  flex-shrink: 0;
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--nf-accent-pink), var(--nf-accent-orange));
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(255, 15, 111, 0.30);
}
.nf-text-send:hover { filter: brightness(1.05); }
.nf-text-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==================================================================
   Conversation v2 — PR8: Settings side-drawer + onboarding toast
   Right-slide drawer with five sections, plus a one-shot onboarding
   toast that only appears on the first idle visit.
================================================================== */
@keyframes nfSideDrawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes nfBannerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.nf-side-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 40, 0.45);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 50;
}
.nf-side-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 90vw);
  background: #fff;
  box-shadow: -16px 0 48px rgba(42, 14, 92, 0.18);
  z-index: 51;
  display: none;
  flex-direction: column;
  animation: nfSideDrawerIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nf-page[data-settings-open="true"] .nf-side-drawer-scrim { display: block; }
.nf-page[data-settings-open="true"] .nf-side-drawer       { display: flex; }

.nf-side-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--nf-border);
}
.nf-side-drawer-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--nf-primary);
  margin: 0;
}
.nf-side-drawer-close {
  background: transparent;
  border: none;
  color: var(--nf-text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.nf-side-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.nf-side-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.nf-side-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nf-text-muted);
}
.nf-side-help {
  font-size: 0.78rem;
  color: var(--nf-text-muted);
  line-height: 1.4;
}
.nf-side-select {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--nf-border);
  background: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--nf-text);
  cursor: pointer;
}
.nf-side-select:focus {
  border-color: var(--nf-accent-pink);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 15, 111, 0.1);
}

.nf-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
}
.nf-switch-text { flex: 1; }
.nf-switch-text-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--nf-text);
}
.nf-switch-text-help {
  font-size: 0.78rem;
  color: var(--nf-text-muted);
  margin-top: 2px;
}
.nf-switch {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--nf-border);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 180ms ease;
  border: none;
  padding: 0;
}
.nf-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 180ms ease;
}
.nf-switch.on { background: var(--nf-accent-pink); }
.nf-switch.on::after { left: 20px; }

.nf-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(42, 14, 92, 0.06);
  border-radius: 999px;
}
.nf-seg button {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border: none;
  background: transparent;
  color: var(--nf-text-muted);
  font-weight: 600;
  font-size: 0.82rem;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.nf-seg button.active {
  background: #fff;
  color: var(--nf-primary);
  box-shadow: 0 1px 4px rgba(42, 14, 92, 0.04);
}

/* Microphone host: when the legacy controls are relocated here, soften
   the inherited drawer layout so they fit the new section. */
.nf-side-mic-host {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.nf-side-mic-host .nf-drawer-label {
  font-size: 0.75rem;
  color: var(--nf-text-muted);
}
.nf-side-mic-host .nf-device-select,
.nf-side-mic-host .nf-sensitivity-slider {
  flex: 1 1 100%;
}

/* Hide the legacy inline mic settings drawer — its children are
   relocated into the side-drawer's Microphone section on init. */
.nf-page #micSettingsDrawer { display: none !important; }

/* Onboarding toast — gated to idle and not yet dismissed. */
.nf-onboard {
  position: fixed;
  top: 92px;
  right: 24px;
  z-index: 40;
  max-width: 320px;
  background: #fff;
  border: 1px solid var(--nf-border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  box-shadow: 0 12px 28px rgba(42, 14, 92, 0.18);
  animation: nfBannerIn 320ms ease-out;
  display: none;
  gap: 0.6rem;
  align-items: flex-start;
}
.nf-page[data-voice-state="idle"]:not(.onboard-dismissed) .nf-onboard {
  display: flex;
}
.nf-onboard-arrow {
  font-size: 1.1rem;
  color: var(--nf-accent-pink);
}
.nf-onboard-body { flex: 1; }
.nf-onboard-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--nf-primary);
}
.nf-onboard-text {
  font-size: 0.8rem;
  color: var(--nf-text-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.nf-onboard-close {
  background: transparent;
  border: none;
  color: var(--nf-text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* ──────────────────────────────────────────────────────────────────
   Encouragement layer — chip near the stage, effort-moment overlay,
   warm header + score-delta pill on the report. All purely additive;
   the existing layout is unaffected when these surfaces are hidden.
   ────────────────────────────────────────────────────────────────── */

/* In-session encouragement chip — appears briefly near the confidence
   ring on milestone ticks, objective ticks, and confidence recoveries. */
.nf-encourage-chip {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 122, 48, 0.95), rgba(255, 15, 111, 0.95));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 20px rgba(255, 122, 48, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 4;
}
.nf-encourage-chip[hidden] { display: none; }
.nf-encourage-chip.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.nf-encourage-chip-glyph { font-size: 0.95rem; line-height: 1; }
.nf-encourage-chip-text { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .nf-encourage-chip { transition: opacity 160ms ease; }
  .nf-encourage-chip.is-on { transform: translateX(-50%); }
}

/* Effort-moment overlay — full-bleed warm beat held for ~2.8s after
   the session ends, before the report opens. Uses the same gate
   ([data-effort-moment] on .nf-page) to suppress the report modal. */
.nf-effort-moment {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center,
    rgba(42, 14, 92, 0.78) 0%,
    rgba(42, 14, 92, 0.94) 70%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1300; /* above the modal default */
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease;
}
body[data-effort-moment="active"] .nf-effort-moment {
  opacity: 1;
}
/* While the effort moment is held, suppress the auto-opened report
   modal so the user gets the warm beat first. The report modal sits
   outside .nf-page, so we key off the body attribute that the inline
   JS mirrors. */
body[data-effort-moment="active"] #sessionReportModal.active {
  visibility: hidden;
}
.nf-effort-moment-card {
  text-align: center;
  color: #fff;
  padding: 2rem 2.5rem;
  max-width: 420px;
  animation: nf-effort-rise 480ms ease-out 80ms both;
}
.nf-effort-moment-glyph {
  font-size: 2.4rem;
  line-height: 1;
  margin-bottom: 0.75rem;
  background: linear-gradient(135deg, #FF7A30, #FF0F6F);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nf-effort-moment-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.nf-effort-moment-text {
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.92;
  max-width: 36ch;
  margin: 0 auto;
}
@keyframes nf-effort-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nf-effort-moment-card { animation: none; }
}

/* Report-modal warm header (above the grade circle) and score-delta
   pill. Lives inside .modal-body.report-body, which already has its
   own padding; we just add a centered intro band. */
.report-warm-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  text-align: center;
}
.report-warm-line {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--nf-text, #2A0E5C);
  margin: 0;
  max-width: 50ch;
  line-height: 1.4;
}
.report-delta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(42, 14, 92, 0.06);
  border: 1px solid rgba(42, 14, 92, 0.12);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nf-text-muted, #555);
}
.report-delta-pill[hidden] { display: none; }
.report-delta-pill.up {
  background: rgba(34, 139, 80, 0.10);
  border-color: rgba(34, 139, 80, 0.30);
  color: #228B50;
}
.report-delta-pill.down {
  background: rgba(255, 122, 48, 0.10);
  border-color: rgba(255, 122, 48, 0.30);
  color: var(--nf-accent-orange, #FF7A30);
}
.report-delta-pill.flat {
  background: rgba(42, 14, 92, 0.08);
  border-color: rgba(42, 14, 92, 0.18);
}
.report-delta-arrow { font-weight: 700; line-height: 1; }
.report-delta-value { font-variant-numeric: tabular-nums; }
.report-delta-label { font-weight: 500; opacity: 0.85; }

/* SessionHistory streak / weekly-summary strip. Sits above the grid;
   the inline JS in SessionHistory.cshtml only reveals it when there
   are completed sessions in the current week. */
.nf-session-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: stretch;
  margin: 0.75rem 0 1.25rem;
}
.nf-session-summary-card {
  flex: 1 1 0;
  min-width: 160px;
  padding: 0.85rem 1rem;
  background: linear-gradient(135deg, rgba(255, 122, 48, 0.06), rgba(255, 15, 111, 0.05));
  border: 1px solid rgba(42, 14, 92, 0.10);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nf-session-summary-card-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nf-text-muted, #666);
  font-weight: 600;
}
.nf-session-summary-card-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--nf-text, #2A0E5C);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.nf-session-summary-card-sub {
  font-size: 0.82rem;
  color: var(--nf-text-muted, #666);
}

/* Encouragement toast variant on the prep page — slightly softer than
   the existing toast so it reads as affirmation, not alert. */
.toast.toast-encourage {
  background: linear-gradient(135deg, #2A0E5C, #4A1E8C);
  color: #fff;
  border-left: 3px solid var(--nf-accent-orange, #FF7A30);
}