@layer components {
  /* AI Session — Active Conversation
   * Full-viewport conversation layout with transcript, mic button, and controls.
   * Pairs with ai_session_controller.js for LiveKit integration.
   */

  /* --- Layout --- */

  .session {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }

  /* --- Top bar --- */

  .session-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-canvas);
    flex-shrink: 0;
    min-height: 3rem;
  }

  .session-header__timer {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: var(--font-size-small);
    color: var(--color-text);
    min-width: 4ch;
  }

  .session-header__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15em 0.5em;
    font-size: var(--font-size-caption);
    font-weight: 500;
    border-radius: var(--radius);
    line-height: 1.4;
  }

  .session-header__badge--mode {
    color: var(--color-primary);
    background: color-mix(in oklch, var(--color-primary) 12%, transparent);
  }

  .session-header__badge--level {
    color: oklch(var(--lch-blue));
    background: color-mix(in oklch, oklch(var(--lch-blue)) 12%, transparent);
  }

  .session-header__status {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
  }

  .session-header__status--connected {
    background: oklch(var(--lch-green));
  }

  .session-header__status--connecting {
    background: var(--color-accent);
    animation: pulse-dot 1.2s ease-in-out infinite;
  }

  .session-header__status--reconnecting {
    background: var(--color-accent);
    animation: pulse-dot 1.2s ease-in-out infinite;
  }

  .session-header__status--disconnected {
    background: var(--color-error);
  }

  @keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .session-header__spacer { flex: 1; }

  .session-header__end {
    display: inline-flex;
    align-items: center;
    padding: 0.3em 0.75em;
    font: inherit;
    font-size: var(--font-size-small);
    font-weight: 500;
    color: var(--color-error);
    background: transparent;
    border: 1px solid color-mix(in oklch, var(--color-error) 40%, transparent);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition-fast);

    &:hover {
      background: color-mix(in oklch, var(--color-error) 8%, transparent);
    }
  }

  /* --- Join overlay --- */

  .session-join {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
  }

  .session-join__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-8);
    font: inherit;
    font-size: var(--font-size-large);
    font-weight: 600;
    color: white;
    background: var(--color-primary);
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: background var(--transition-fast), scale var(--transition-fast);

    & svg { fill: currentColor; }

    &:hover {
      background: color-mix(in oklch, var(--color-primary) 85%, white);
    }

    &:active { scale: 0.97; }

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 4px;
    }
  }

  .session-join__hint {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
  }

  /* Hide controls until joined */
  .session:has(.session-join:not([hidden])) .session-transcript,
  .session:has(.session-join:not([hidden])) .session-controls {
    display: none;
  }

  /* --- Transcript --- */

  .session-transcript {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    scroll-behavior: smooth;
  }

  .session-message {
    max-width: 85%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    font-size: 0.9375rem;
    line-height: 1.55;
    animation: message-in 200ms ease;
  }

  @keyframes message-in {
    from {
      opacity: 0;
      translate: 0 0.5rem;
    }
  }

  .session-message--user {
    align-self: flex-end;
    background: color-mix(in oklch, var(--color-primary) 10%, var(--color-canvas));
    border-end-end-radius: var(--space-1);
  }

  .session-message--ai {
    align-self: flex-start;
    background: var(--color-surface);
    border-end-start-radius: var(--space-1);
  }

  .session-message--partial {
    opacity: 0.7;
  }

  .session-message__role {
    display: block;
    font-size: var(--font-size-caption);
    font-weight: 500;
    color: var(--color-text-muted);
    margin-block-end: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .session-message--user .session-message__role {
    color: var(--color-primary);
  }

  /* Pronunciation-scored words */
  .session-word-weak {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    cursor: help;
  }

  /* Typing indicator */
  .session-typing {
    align-self: flex-start;
    background: var(--color-surface);
    border-radius: var(--radius-xl);
    border-end-start-radius: var(--space-1);
    padding: var(--space-3) var(--space-4);
  }

  .session-typing__dots {
    display: flex;
    gap: 0.3em;
    align-items: center;
    height: 1.2em;

    & span {
      width: 0.4em;
      height: 0.4em;
      border-radius: var(--radius-full);
      background: var(--color-text-muted);
      animation: typing-bounce 1.4s ease-in-out infinite;

      &:nth-child(2) { animation-delay: 0.15s; }
      &:nth-child(3) { animation-delay: 0.3s; }
    }
  }

  @keyframes typing-bounce {
    0%, 60%, 100% { opacity: 0.3; translate: 0 0; }
    30% { opacity: 1; translate: 0 -0.25em; }
  }

  /* Session ended banner */
  .session-ended {
    align-self: center;
    text-align: center;
    padding: var(--space-6);
    animation: message-in 300ms ease;
  }

  .session-ended__title {
    font-size: var(--font-size-large);
    font-weight: 600;
    color: var(--color-text);
    margin-block-end: var(--space-2);
  }

  .session-ended__hint {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
  }

  /* --- Bottom controls --- */

  .session-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-6);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-canvas);
    flex-shrink: 0;
  }

  /* Mic button */
  .session-mic {
    position: relative;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    border: none;
    color: white;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--transition-fast), scale var(--transition-fast);
    z-index: 1;

    &:hover {
      background: color-mix(in oklch, var(--color-primary) 85%, white);
    }

    &:active {
      scale: 0.95;
    }

    &:focus-visible {
      outline: 2px solid var(--color-primary);
      outline-offset: 4px;
    }

    & svg {
      width: 1.5rem;
      height: 1.5rem;
      fill: currentColor;
    }
  }

  /* Pulsing ring when active/listening */
  .session-mic--active::before,
  .session-mic--active::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-primary);
    opacity: 0;
    animation: mic-pulse 2s ease-out infinite;
  }

  .session-mic--active::after {
    animation-delay: 0.8s;
  }

  @keyframes mic-pulse {
    0% { inset: -4px; opacity: 0.6; }
    100% { inset: -20px; opacity: 0; }
  }

  /* Muted state */
  .session-mic--muted {
    background: var(--color-text-muted);

    &::before, &::after { display: none; }
  }

  /* Mode toggle */
  .session-controls__mode {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-caption);
    color: var(--color-text-muted);
  }

  .session-mode-toggle {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    background: var(--color-border);
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
    padding: 2px;

    &::after {
      content: "";
      display: block;
      width: 1rem;
      height: 1rem;
      border-radius: var(--radius-full);
      background: white;
      box-shadow: 0 1px 3px oklch(0% 0 0 / 0.15);
      transition: translate var(--transition-fast);
    }

    &[aria-pressed="true"] {
      background: var(--color-primary);

      &::after {
        translate: calc(2.5rem - 1rem - 4px) 0;
      }
    }
  }

  /* Connection banners */
  .session-connection {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-caption);
    font-weight: 500;
    animation: message-in 200ms ease;
  }

  .session-connection--reconnecting {
    color: oklch(55% 0.14 77);
    background: color-mix(in oklch, var(--color-accent) 12%, transparent);
  }

  .session-connection--disconnected {
    color: var(--color-error);
    background: color-mix(in oklch, var(--color-error) 8%, transparent);
  }

  /* --- Responsive --- */

  @media (min-width: 640px) {
    .session-transcript {
      padding-inline: 10%;
    }

    .session-message {
      max-width: 70%;
    }
  }

  @media (min-width: 1024px) {
    .session-transcript {
      padding-inline: 20%;
    }

    .session-message {
      max-width: 60%;
    }
  }
}