.chat-composer:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 16px 40px rgba(0, 0, 0, 0.07);
}

.chat-composer textarea:focus-visible {
  outline: none;
}

/* Mobile corrections. Preserve the exact desktop ARCHEMADA background
   treatment; only the layout adapts to the narrow viewport. */
@media (max-width: 640px) {
  .interview-page {
    background:
      radial-gradient(circle at 50% 23%, rgba(196, 154, 24, 0.055), transparent 34rem),
      #fff;
  }

  .interview-header {
    top: 0;
    right: 0;
    padding: 0.75rem 0.85rem;
  }

  .header-controls {
    gap: 0.55rem;
  }

  .interview-main {
    min-height: 100svh;
    padding: 0 0.9rem;
  }

  .interview-shell,
  body.workspace .interview-shell {
    height: auto;
    min-height: 100svh;
    padding-top: 6.5rem;
    padding-bottom: 1.5rem;
  }

  .interview-logo,
  body.workspace .interview-logo {
    width: min(500px, 84vw);
    margin: 0 auto 1.5rem;
  }

  /* The conversation must size to its content on mobile. If the grid/flex
     item stretches to the remaining viewport height, the assistant mark's
     intentional flex-end alignment drops the star to the bottom of that
     oversized row and creates the large dead zone seen on-device. */
  .conversation,
  body.workspace .conversation {
    flex: 0 0 auto;
    align-content: start;
    grid-auto-rows: max-content;
    overflow-y: visible;
    overflow-x: hidden;
    min-height: 0;
    max-height: none;
  }

  .message {
    align-self: start;
    min-height: 0;
  }

  .assistant-message .message-column {
    min-width: 0;
  }

  .assistant-message .message-body {
    max-width: 100%;
  }

  .chat-composer {
    flex: 0 0 auto;
  }
}