/* ── ASANMOD Chat Mobile: single-breakpoint chat-specific mobile behavior ── */

@media (max-width: 980px) {
  /* ── Mobile conversation panel fill ── */
  body.tab-conversation [data-mobile-panel="conversation"] {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--mobile-chat-chrome-h));
    min-height: 0;
    overflow: hidden;
  }

  body.tab-conversation .conversation-panel {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--mobile-chat-chrome-h));
    min-height: 0;
    overflow: hidden;
    opacity: 1;
  }

  body.tab-plan [data-mobile-panel="conversation"],
  body.tab-evidence [data-mobile-panel="conversation"] {
    display: none !important;
  }

  .conversation-panel {
    display: flex;
    flex-direction: column;
    height: calc(100svh - 92px);
    min-height: 0;
    overflow: hidden;
  }

  /* ── Mobile conversation list: scrollable fill ── */
  .conversation-list {
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
    padding: 8px 14px 10px;
  }

  /* ── Mobile bubbles: no avatar, full readable width ── */
  .conversation-item {
    width: min(var(--chat-bubble-w-mobile), 560px);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .conversation-item.user {
    justify-self: end;
    width: min(78%, 520px);
    grid-template-columns: minmax(0, 1fr);
  }

  .conversation-item.asanmod {
    justify-self: start;
    width: min(82%, 560px);
  }

  .conversation-avatar {
    display: none;
  }

  .conversation-content {
    border-radius: 16px;
    padding: 9px 12px;
    min-width: 0;
    min-height: 38px;
  }

  .conversation-role,
  .conversation-time {
    font-size: 10px;
  }

  .conversation-text {
    margin-top: 3px;
    font-size: 15px;
    line-height: 1.42;
  }

  .conversation-item.asanmod[data-voice-chat-surface="commentary"] {
    width: min(76%, 520px);
  }

  .conversation-item.asanmod[data-voice-chat-surface="commentary"]
    .conversation-text {
    font-size: 14px;
    line-height: 1.4;
  }

  /* ── Mobile composer: always visible above fold ── */
  .codex-text-form {
    margin-top: 0;
    padding: 8px 10px 10px;
  }

  .codex-text-row {
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 8px;
  }

  .codex-text-row button {
    width: 48px;
    min-width: 48px;
    padding: 0;
    font-size: 0;
    border-radius: 16px;
  }

  .codex-text-row button::before {
    content: "↑";
    font-size: 20px;
    line-height: 1;
  }

  .codex-text-row input {
    padding: 0 14px;
  }

  /* ── Mobile chat session identity: wrap on narrow screens ── */
  .chat-session-identity {
    display: none !important;
  }

  /* ── Mobile signal stack: single column ── */
  .conversation-signal-stack {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 10px;
  }
}