/* ==========================================================================
   Companion panel — mobile-first advisor sheet (pricing + career).

   Desktop (>900px): none of this applies; the aside stays a sticky sidebar.
   Mobile (≤900px): the aside becomes a fixed bottom sheet. A slim tab stays
   visible at all times (peek state) with a live status line and a "new"
   badge; dragging / swiping / tapping expands the full panel over the page.
   ========================================================================== */

/* The tab and scroll wrapper exist on desktop too — neutralise them there. */
.companion-tab { display: none; }
.companion-scroll { display: contents; }

.companion-backdrop {
  position: fixed;
  inset: 0;
  z-index: 79;
  background: color-mix(in srgb, #06060a 55%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.companion-backdrop.show { opacity: 1; pointer-events: auto; }

html.companion-lock,
html.companion-lock body { overflow: hidden; }

@media (max-width: 900px) {
  /* Room so the peek bar never covers the assessment's own controls. */
  body.has-companion .assess-shell { padding-bottom: 84px; }
  body.has-companion .site-footer { padding-bottom: 96px; }

  .assess-aside.companion-mode {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    order: initial;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: min(78dvh, 640px);
    height: min(78dvh, 640px);
    border-radius: 20px 20px 0 0;
    border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--line));
    border-bottom: 0;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 30%),
      color-mix(in srgb, var(--surface) 92%, #000);
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.5);
    /* Peek: slide down until only the tab is visible. */
    transform: translateY(calc(100% - 58px));
    transition: transform 0.34s cubic-bezier(0.32, 0.72, 0.28, 1);
    will-change: transform;
    top: auto;
  }

  .assess-aside.companion-mode.companion-open { transform: translateY(0); }
  .assess-aside.companion-mode.companion-dragging { transition: none; }

  /* ---- the always-visible tab ------------------------------------------ */
  .companion-mode .companion-tab {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 58px;
    padding: 0.9rem 1rem 0.55rem;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: grab;
    touch-action: none;          /* we run the gesture ourselves */
    -webkit-tap-highlight-color: transparent;
    position: relative;
    flex: none;
  }
  .companion-mode .companion-tab:active { cursor: grabbing; }

  .companion-grip {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted-2) 55%, transparent);
  }

  .companion-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent);
    animation: companionPulse 2.4s infinite;
    flex: none;
  }
  .companion-dot.busy { animation: companionPulse 0.9s infinite; }

  @keyframes companionPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 45%, transparent); }
    70% { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  .companion-tab-text { min-width: 0; display: grid; line-height: 1.25; }
  .companion-tab-text b { font-size: 0.8rem; letter-spacing: 0.01em; }
  .companion-status {
    color: var(--muted);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .companion-badge {
    padding: 0.22rem 0.55rem;
    border-radius: var(--r-pill);
    background: var(--brand-gradient);
    color: #16120a;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex: none;
  }
  .companion-badge.pop { animation: companionPop 0.4s var(--ease-out); }
  @keyframes companionPop {
    0% { transform: scale(0.6); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
  }

  .companion-chev {
    color: var(--muted-2);
    font-size: 0.7rem;
    transition: transform 0.3s ease;
  }
  .companion-open .companion-chev { transform: rotate(180deg); }

  /* ---- scrollable panel body ------------------------------------------- */
  .companion-mode .companion-scroll {
    display: grid;
    gap: 0.8rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0.9rem calc(1rem + env(safe-area-inset-bottom, 0px));
    min-height: 0;
  }

  /* Compact density inside the sheet — small but readable. */
  .companion-mode .advisor { padding: 0.85rem 0.9rem; }
  .companion-mode .advisor-head { margin-bottom: 0.55rem; }
  .companion-mode .advisor-avatar { width: 1.8rem; height: 1.8rem; font-size: 0.85rem; }
  .companion-mode .ga-insight,
  .companion-mode .advisor-body { font-size: 0.86rem; line-height: 1.55; }
  .companion-mode .ga-section h5 { font-size: 0.62rem; }
  .companion-mode .ga-chip { font-size: 0.68rem; }
  .companion-mode .ga-opp { font-size: 0.74rem; }
  .companion-mode .badges-card { padding: 0.85rem 0.9rem; }
  .companion-mode .badges-card h4 { font-size: 0.72rem; }
  .companion-mode .badge { font-size: 0.68rem; }
  .companion-mode .advisor-log { max-height: none; }
  .companion-mode .chat-bubble { font-size: 0.85rem; }
}

/* Tighter assessment density on true phone widths — compact, not cramped. */
@media (max-width: 680px) {
  body.has-companion .assess-card { padding: 1.05rem 0.95rem; min-height: 0; }
  body.has-companion .assess-card h2 { font-size: 1.22rem; }
  body.has-companion .assess-q-sub { font-size: 0.84rem; }
  body.has-companion .assess-option { padding: 0.7rem 0.8rem; font-size: 0.85rem; }
  body.has-companion .assess-option .ico { font-size: 1.05rem; }
  body.has-companion .form-grid { gap: 0.65rem; }
  body.has-companion .field label { font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .assess-aside.companion-mode { transition: none; }
  .companion-dot { animation: none; }
  .companion-badge.pop { animation: none; }
  .companion-backdrop { transition: none; }
}