/* ============================================================
   ALGOMARK · Mentor — May 2026
   Active-mentor product mode. Sibling of /chat.
   Extends chat.css; only adds Mentor-specific surfaces.
   No new color tokens introduced — everything reuses the
   --paper / --ink / --accent system from /vault/style-v2.css.
   ============================================================ */

[x-cloak] { display: none !important; }

/* ============================================================
   SHELL — same grid as /chat but with an optional right rail
   on desktop. Profile rail collapses to a status bar on tablet
   and below.
   ============================================================ */
.mentor-shell {
  display: grid;
  grid-template-columns: 296px 1fr;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

@media (min-width: 1280px) {
  .mentor-shell {
    grid-template-columns: 296px 1fr 320px;
  }
  .mentor-shell .mentor-profile-rail {
    display: flex;
  }
}

@media (max-width: 800px) {
  .mentor-shell { grid-template-columns: 1fr; }
  .mentor-shell .chat-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(86vw, 320px);
    transform: translateX(-100%);
    transition: transform var(--t-norm) var(--ease);
    z-index: 100;
    box-shadow: var(--shadow-md);
  }
  .mentor-shell.sidebar-open .chat-sidebar { transform: translateX(0); }
  .mentor-shell.sidebar-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(22, 22, 26, 0.32);
    z-index: 50;
  }
}

/* ============================================================
   PROFILE RAIL — right sidebar (desktop, >=1280px)
   "Memory" surface: trader name, current focus, last session,
   model document link. Subtle, persistent, never loud.
   ============================================================ */
.mentor-profile-rail {
  display: none;
  flex-direction: column;
  background: var(--paper-sunk);
  border-left: 1px solid var(--line);
  height: 100dvh;
  overflow-y: auto;
  scrollbar-width: thin;
  padding: var(--space-5) var(--space-5) var(--space-7);
  gap: var(--space-4);
}

.mentor-profile-rail-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-2);
}
.mentor-profile-rail-head-label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.mentor-profile-rail-head-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(123, 31, 31, 0.45);
  animation: pulse-dot 2.4s var(--ease) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mentor-profile-rail-head-dot { animation: none; }
}

.mentor-profile-rail-trader {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.mentor-profile-rail-trader-meta {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-top: 4px;
  display: block;
}

/* Card style used for current focus, last summary, model link */
.mentor-profile-rail-card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-4);
  position: relative;
  box-shadow: var(--shadow-hairline);
  transition: border-color var(--t-fast) var(--ease);
}
.mentor-profile-rail-card.is-focus {
  border-color: var(--accent-line);
  background:
    linear-gradient(180deg, rgba(251, 240, 240, 0.55), rgba(255, 255, 255, 1) 60%);
}
.mentor-profile-rail-card-label {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-2);
}
.mentor-profile-rail-card.is-focus .mentor-profile-rail-card-label {
  color: var(--accent);
}
.mentor-profile-rail-card-label-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.mentor-profile-rail-card-body {
  font-family: var(--serif);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: -0.003em;
}
.mentor-profile-rail-card-body em {
  color: var(--ink-muted);
  font-style: italic;
}
.mentor-profile-rail-card-empty {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  line-height: 1.5;
}

.mentor-profile-rail-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  margin-top: var(--space-3);
  padding: 6px 10px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--paper-raised);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mentor-profile-rail-link:hover {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.mentor-profile-rail-link-arrow {
  font-family: var(--mono);
  transition: transform var(--t-fast) var(--ease);
}
.mentor-profile-rail-link:hover .mentor-profile-rail-link-arrow {
  transform: translateX(2px);
}

/* Foot of rail — quiet meta */
.mentor-profile-rail-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================
   PROFILE STATUS BAR — mobile/tablet collapse of the rail
   Compact horizontal strip above the message thread.
   ============================================================ */
.mentor-status-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) clamp(var(--space-4), 4vw, var(--space-5));
  border-bottom: 1px solid var(--line);
  background: var(--paper-sunk);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.mentor-status-bar::-webkit-scrollbar { display: none; }

@media (min-width: 1280px) {
  .mentor-status-bar { display: none; }
}

.mentor-status-bar-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 10px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.mentor-status-bar-pill.is-focus {
  background: var(--accent-tint);
  border-color: var(--accent-line);
  color: var(--accent);
}
.mentor-status-bar-pill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.mentor-status-bar-pill-value {
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-sm);
  margin-left: 4px;
}
.mentor-status-bar-pill.is-focus .mentor-status-bar-pill-value {
  color: var(--ink);
}

/* ============================================================
   MENTOR BUBBLE — assistant rendering with hairline accent
   border and slightly raised paper. This is the visible cue:
   the conversation has weight.
   ============================================================ */
.message-row.role-assistant .mentor-bubble {
  padding: var(--space-4) var(--space-5);
  background: var(--paper-raised);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  box-shadow:
    0 1px 0 rgba(123, 31, 31, 0.04),
    0 4px 16px -8px rgba(123, 31, 31, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  /* Override default assistant padding from chat.css */
  padding-left: calc(28px + var(--space-3) + var(--space-4));
}
.message-row.role-assistant .mentor-bubble .message-head {
  margin-left: calc(-1 * (28px + var(--space-3)));
  margin-bottom: var(--space-3);
}

/* Subtle left edge that whispers "this is mentor". */
.message-row.role-assistant .mentor-bubble::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-4);
  bottom: var(--space-4);
  width: 2px;
  background: var(--accent);
  border-radius: 0 1px 1px 0;
  opacity: 0.55;
}

/* User bubble in mentor mode stays clean — same as /chat. */
.message-row.role-user .message-bubble {
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  margin-left: clamp(0px, 12vw, 96px);
}

/* ============================================================
   ONBOARDING — seven-question diagnostic flow
   Quiet visual cue when the Mentor is walking through questions.
   ============================================================ */
.mentor-onboarding-stage {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  margin-bottom: var(--space-3);
}
.mentor-onboarding-stage-progress {
  font-family: var(--mono);
  letter-spacing: 0.04em;
  color: var(--accent);
  opacity: 0.75;
}

/* The Mentor's onboarding-question bubble gets a marginally
   stronger left edge — three-question-deep visual rhythm. */
.message-row.role-assistant.is-onboarding .mentor-bubble::before {
  opacity: 1;
  background: var(--accent);
}

/* Onboarding progress dots — sits under the composer */
.mentor-onboarding-progress {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: auto;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.mentor-onboarding-progress-track {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
}
.mentor-onboarding-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background var(--t-fast) var(--ease);
}
.mentor-onboarding-progress-dot.is-done {
  background: var(--accent);
}
.mentor-onboarding-progress-dot.is-current {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(123, 31, 31, 0.18);
}

/* ============================================================
   MODE TOGGLE — composer-top switch: Mentor | Q&A
   Used on /mentor (active: Mentor) and /chat (active: Q&A).
   ============================================================ */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
}
.mode-toggle-btn {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.mode-toggle-btn:hover {
  color: var(--ink);
}
.mode-toggle-btn.is-active {
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(22, 22, 26, 0.08);
  cursor: default;
}
.mode-toggle-btn.is-active .mode-toggle-dot {
  background: var(--accent);
  animation: pulse-dot 2.4s var(--ease) infinite;
}
.mode-toggle-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .mode-toggle-btn.is-active .mode-toggle-dot { animation: none; }
}

/* ============================================================
   MODE PILL — small persistent label inside the composer area
   "Mentor mode" with dot indicator. Sits inline with mode toggle.
   ============================================================ */
.mentor-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-right: auto;
}
.mentor-mode-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(123, 31, 31, 0.45);
  animation: pulse-dot 2.4s var(--ease) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .mentor-mode-pill-dot { animation: none; }
}

/* ============================================================
   COMPOSER — adapted layout for mode toggle at the top
   Mentor and Q&A composers share the same shell, just with
   the toggle row added above the input.
   ============================================================ */
.composer-mode-row {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(var(--space-4), 4vw, var(--space-7)) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  .composer-mode-row {
    gap: var(--space-2);
  }
  .mentor-mode-pill {
    display: none;
  }
}

/* ============================================================
   MENTOR EMPTY / LOADING STATE — when /api/mentor-status is in
   flight, before we know if this is a first session or a return.
   ============================================================ */
.mentor-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
  position: relative;
}
.mentor-loading-inner {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--ink-muted);
  line-height: 1.5;
}
.mentor-loading-dots {
  display: inline-flex;
  gap: 6px;
}
.mentor-loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: thinking-pulse 1.2s ease-in-out infinite;
}
.mentor-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.mentor-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .mentor-loading-dot { animation: none; opacity: 0.6; }
}

/* ============================================================
   CHAT TITLE OVERRIDE — Mentor surface title styling
   ============================================================ */
.chat-bar-title .chat-title-edition {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-left: var(--space-2);
  letter-spacing: 0;
}

/* ============================================================
   MENTOR-SPECIFIC EMPTY HOMEPAGE-LIKE STATE
   When profile loaded but no active session yet (return user
   before first message of new session). Quiet, no exclamation.
   ============================================================ */
.mentor-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 5vw, 5rem) clamp(1.25rem, 4vw, 2.5rem);
  position: relative;
  overflow-y: auto;
}
.mentor-empty::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px circle at var(--mx) var(--my),
      rgba(123, 31, 31, 0.06) 0%,
      rgba(123, 31, 31, 0.02) 30%,
      transparent 65%);
  pointer-events: none;
  transition: background 80ms linear;
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) { .mentor-empty::before { background: none; } }

.mentor-empty-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  width: 100%;
  text-align: center;
}
.mentor-empty-headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 1rem;
  font-feature-settings: 'ss01' 1;
}
.mentor-empty-headline-em {
  display: inline-block;
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}
.mentor-empty-sub {
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.92rem + 0.2vw, 1.0625rem);
  color: var(--ink-body);
  max-width: 52ch;
  margin: 0 auto;
  line-height: 1.7;
}

/* ============================================================
   PRINT — strip rail & status bar
   ============================================================ */
@media print {
  .mentor-profile-rail,
  .mentor-status-bar,
  .mode-toggle,
  .mentor-mode-pill,
  .composer-mode-row {
    display: none !important;
  }
  .mentor-shell {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   POLISH PASS — overnight additions
   ============================================================
   Targeted enhancements on top of the agent's baseline. Each rule
   adds a single visual moment, doesn't disturb existing layout. */

/* Soft glow on the active-commitment card — draws the eye to the
   one thing the trader actually committed to last session. */
.mentor-profile-rail-card.is-focus {
  box-shadow: 0 0 0 1px rgba(123, 31, 31, 0.06), 0 2px 8px rgba(123, 31, 31, 0.04);
  transition: box-shadow 280ms ease, transform 280ms ease;
}
.mentor-profile-rail-card.is-focus:hover {
  box-shadow: 0 0 0 1px rgba(123, 31, 31, 0.18), 0 4px 14px rgba(123, 31, 31, 0.08);
  transform: translateY(-1px);
}

/* Pulse on the CURRENT onboarding step dot so the trader knows
   which question they're answering. Earlier "done" dots get a
   solid fill; later "todo" dots stay outlined. Whatever the agent
   defined for these class hooks, this layers on cleanly. */
.mentor-onboarding-step.is-current,
.onboarding-step.current,
[class*="onboarding"][class*="current"] {
  animation: mentor-onboarding-pulse 1.6s ease-in-out infinite;
}
@keyframes mentor-onboarding-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [class*="onboarding"][class*="current"] { animation: none; opacity: 1; }
}

/* Mode toggle — softer pressed-state on the inactive button so
   it doesn't feel jagged when switching focus. */
.mode-toggle button,
.mode-toggle a {
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.mode-toggle button:active,
.mode-toggle a:active {
  transform: scale(0.98);
}

/* Subtle focus ring on the composer textarea — accent-tinted,
   matches the mentor-mode-pill dot color. */
.composer textarea:focus,
.composer-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(123, 31, 31, 0.10);
  border-color: var(--accent, #7B1F1F);
}

/* Tighten profile-rail link hover — subtle underline on links
   inside the rail, not on the cards themselves. */
.mentor-profile-rail a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms ease;
}
.mentor-profile-rail a:hover {
  border-bottom-color: var(--accent-line, #E8C9C9);
}

/* Mobile: the profile rail collapses but keep the most important
   piece (current focus) visible as a thin strip at the top. */
@media (max-width: 1023px) {
  .mentor-status-bar {
    /* Soft gradient backdrop so it doesn't visually merge with the page */
    background: linear-gradient(to right, var(--paper-raised, #fff) 0%, var(--paper-sunk, #F4F2EC) 100%);
    border-bottom: 1px solid var(--accent-line, #E8C9C9);
  }
}

/* Streaming message — same trailing-edge fade we shipped on /chat,
   applied to the Mentor's reply too so smoothness is consistent
   across both modes. */
.mentor-bubble.is-streaming,
.mentor-message.is-streaming .message-content {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) calc(100% - 1.8em),
    rgba(0, 0, 0, 0.35) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) calc(100% - 1.8em),
    rgba(0, 0, 0, 0.35) 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .mentor-bubble.is-streaming,
  .mentor-message.is-streaming .message-content {
    -webkit-mask-image: none;
    mask-image: none;
  }
}