/* Scale the conversation against CSS viewport space, not physical pixel density.
   A 4K desktop at 100% grows to 2x; OS/browser zoom already enlarges CSS pixels. */
body.cast-focus {
  --conversation-unit: clamp(1px, min(.052083333vw, .092592593dvh), 2px);
}

@media (max-width: 640px) {
  .cast-focus .reply-content:has(.latest-speech-replay:not([hidden])) {
    min-height: 44px;
    padding-top: 52px;
    padding-right: 17px;
  }
  .cast-focus .reply-content:has(.latest-speech-replay:not([hidden])) .reply-mark { top: 42px; }
  .cast-focus .latest-speech-replay { top: 0; bottom: auto; }
  .cast-focus .composer-input-row > #sound-toggle {
    position: fixed;
    left: max(20px, env(safe-area-inset-left));
    bottom: max(20px, env(safe-area-inset-bottom));
  }
}

@media (min-width: 1181px) and (min-height: 700px) {
  .cast-focus .conversation-dock {
    width: min(calc(760 * var(--conversation-unit)), calc(100% - 48px));
    bottom: calc(22 * var(--conversation-unit));
  }
  .cast-focus .reply-content {
    margin-bottom: calc(16 * var(--conversation-unit));
    padding-inline: calc(22 * var(--conversation-unit));
  }
  .cast-focus .reply-content:has(.latest-speech-replay:not([hidden])) { padding-right: calc(54 * var(--conversation-unit)); }
  .cast-focus #current-reply,
  .cast-focus .caption,
  .cast-focus .setting-row .reply-text-size-preview {
    font-size: calc(20 * var(--conversation-unit) * var(--reply-text-scale, 1));
  }
  .cast-focus #current-reply,
  .cast-focus .caption {
    max-height: min(30dvh, calc(148 * var(--conversation-unit) * max(1, var(--reply-text-scale, 1))));
  }
  .cast-focus .reply-content:has(#current-reply[hidden]):has(#caption[hidden]) { min-height: calc(44 * var(--conversation-unit)); }
  .cast-focus .reply-mark { top: calc(-15 * var(--conversation-unit)); font-size: calc(43 * var(--conversation-unit)); }
  .cast-focus .latest-speech-replay { width: calc(44 * var(--conversation-unit)); height: calc(44 * var(--conversation-unit)); }
  .cast-focus .latest-speech-replay svg { width: calc(20 * var(--conversation-unit)); height: calc(20 * var(--conversation-unit)); }

  .cast-focus .reply-suggestions { margin-bottom: calc(11 * var(--conversation-unit)); }
  .cast-focus .reply-suggestions-list { gap: calc(8 * var(--conversation-unit)); min-height: calc(64 * var(--conversation-unit)); }
  .cast-focus .reply-suggestion {
    min-height: calc(64 * var(--conversation-unit));
    padding: calc(7 * var(--conversation-unit)) calc(12 * var(--conversation-unit));
    border-radius: calc(24 * var(--conversation-unit));
    font-size: calc(14 * var(--conversation-unit));
    line-height: 1.55;
  }
  .cast-focus .composer-input-row { gap: calc(10 * var(--conversation-unit)); }
  .cast-focus .composer-input-row #chat-form {
    padding: calc(8 * var(--conversation-unit)) calc(11 * var(--conversation-unit)) calc(6 * var(--conversation-unit)) calc(17 * var(--conversation-unit));
    gap: calc(2 * var(--conversation-unit)) calc(8 * var(--conversation-unit));
    border-radius: calc(26 * var(--conversation-unit));
  }
  .cast-focus .composer-input-row #message {
    font-size: calc(18 * var(--conversation-unit));
    min-height: calc(44 * var(--conversation-unit));
    max-height: calc(120 * var(--conversation-unit));
    padding-block: calc(5 * var(--conversation-unit)) calc(2 * var(--conversation-unit));
  }
  .cast-focus .composer-input-row > #sound-toggle {
    flex-basis: calc(44 * var(--conversation-unit));
    width: calc(44 * var(--conversation-unit)); height: calc(44 * var(--conversation-unit));
  }
  .cast-focus .composer-input-row > #sound-toggle svg,
  .cast-focus .composer-input-row > #sound-toggle[aria-pressed="false"] svg { width: calc(22 * var(--conversation-unit)); height: calc(22 * var(--conversation-unit)); }
  .cast-focus .composer-input-row .composer-bottom { gap: calc(3 * var(--conversation-unit)); }
  .cast-focus .composer-input-row .composer-bottom .icon-button { width: calc(34 * var(--conversation-unit)); height: calc(38 * var(--conversation-unit)); }
  .cast-focus .composer-input-row .send-button { width: calc(38 * var(--conversation-unit)); height: calc(38 * var(--conversation-unit)); }
  .cast-focus .composer-input-row .composer-bottom svg { width: calc(19 * var(--conversation-unit)); height: calc(19 * var(--conversation-unit)); }
  .cast-focus .composer-input-row .message-feedback { padding-right: calc(4 * var(--conversation-unit)); }
  .cast-focus .composer-input-row #message-count { font-size: calc(11 * var(--conversation-unit)); }
  .cast-focus .message-length-error,
  .cast-focus .chat-error,
  .cast-focus .thinking,
  .cast-focus .speech-error p,
  .cast-focus .speech-error button { font-size: calc(12 * var(--conversation-unit)); }

  .cast-focus .lounge-header { height: calc(82 * var(--conversation-unit)); padding-inline: calc(32 * var(--conversation-unit)); }
  .cast-focus .lounge-header .brand { font-size: calc(48 * var(--conversation-unit)); }
  .cast-focus .lounge-header-actions { gap: calc(8 * var(--conversation-unit)); }
  .cast-focus #lounge-menu-toggle,
  .cast-focus .lounge-background-button {
    flex-basis: calc(44 * var(--conversation-unit)); width: calc(44 * var(--conversation-unit)); height: calc(44 * var(--conversation-unit));
  }
  .cast-focus #lounge-menu-toggle svg,
  .cast-focus .lounge-background-button svg { width: calc(22 * var(--conversation-unit)); height: calc(22 * var(--conversation-unit)); }
  .cast-focus #lounge-menu { right: calc(32 * var(--conversation-unit)); width: calc(246 * var(--conversation-unit)); max-height: calc(100dvh - 108 * var(--conversation-unit)); }
  .cast-focus #lounge-menu .nav-item { min-height: calc(44 * var(--conversation-unit)); font-size: calc(12 * var(--conversation-unit)); }

  .cast-focus .chat-panel { top: calc(94 * var(--conversation-unit)); right: calc(24 * var(--conversation-unit)); bottom: calc(100 * var(--conversation-unit)); width: min(calc(390 * var(--conversation-unit)), calc(100% - 32px)); }
  .cast-focus .chat-header { padding: calc(17 * var(--conversation-unit)); }
  .cast-focus .chat-header h2 { font-size: calc(14 * var(--conversation-unit)); }
  .cast-focus .chat-log { padding: calc(18 * var(--conversation-unit)); }
  .cast-focus .message-bubble { font-size: calc(16 * var(--conversation-unit)); }
  .cast-focus .message-meta,
  .cast-focus .message-tools button { font-size: calc(11 * var(--conversation-unit)); }
}