/* Three equally sized destinations, including narrow phones. */
@media (max-width: 1100px) {
  .workspace-page .site-header { grid-template-columns: 1fr auto; gap: 16px 8px; padding: 18px 0; }
  .workspace-page .section-nav { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-page .section-nav a { justify-content: center; padding: 10px 5px; gap: 5px; }
}
@media (max-width: 420px) {
  .workspace-page .section-nav a { font-size: 11px; }
  .workspace-page .section-nav .nav-index { display: none; }
}
.conversation-page .conversation-toolbar { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 0 0 20px; }
.conversation-toolbar label { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.conversation-page select { min-width: 0; border: 1px solid var(--control-line); border-radius: 12px; background: var(--surface); color: var(--ink); padding: 10px 12px; font: inherit; }
:root[data-theme] .conversation-page .conversation-toolbar #face-mode { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-left: auto; padding: 12px 18px; border: 1px solid var(--audio-accent,var(--accent)); border-radius: 14px; min-height: 48px; background: var(--audio-accent,var(--accent)); color: var(--on-accent); font-size: 14px; font-weight: 700; line-height: 1.5; box-shadow: 0 5px 16px var(--shadow); }
.conversation-toolbar #face-mode svg { width: 24px; height: 24px; flex: none; }
:root[data-theme] .conversation-page .conversation-toolbar #face-mode:hover:not(:disabled) { background: var(--audio-hover,var(--accent-hover)); }
:root[data-theme] .conversation-page .site-shell .conversation-studio { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.speaker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.speaker-card { padding: 28px; min-width: 0; background: radial-gradient(ellipse at top right, var(--panel), transparent 70%); }
.speaker-main { display: contents; }
.speaker-settings-title { display: none; }
:root[data-theme] .conversation-page .speaker-grid .speaker-card { border: 2px solid var(--control-line); border-radius: var(--skin-radius, 24px); box-shadow: 0 3px 8px var(--shadow); }
:root[data-theme] .conversation-page .speaker-grid .speaker-card:has(.talk-button[aria-pressed="true"]) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--panel), 0 3px 8px var(--shadow); }
.speaker-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.speaker-badge { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px; background: var(--panel); font-size: 12px; font-weight: 700; }
.conversation-page #speaker-right .speaker-badge { color: var(--accent); background: var(--surface); border: 2px solid var(--accent); box-shadow: none; }
.speaker-heading h2 { font-size: 16px; margin: 0; }
.speaker-greeting { margin-left: auto; font-size: 26px; font-weight: 650; line-height: 1.2; letter-spacing: -1px; color: var(--accent); }
.speaker-message { --speaker-line-height: 34px; position: relative; display: grid; grid-template-rows: minmax(0, 1fr); height: 160px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-soft); }
/* Keep the source/translation distinction available to screen readers, without a visible caption row. */
.speaker-message-caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.speaker-message-text { align-self: center; height: calc(3 * var(--speaker-line-height)); max-height: 100%; min-height: 0; margin: 0; padding: 0 3px 0 0; overflow-y: auto; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--ink); font-size: 22px; line-height: var(--speaker-line-height); scrollbar-width: thin; }
.speaker-message[data-kind="translated"] { border-color: var(--control-line); }
.speaker-message[data-empty="true"] .speaker-message-text { color: var(--muted); font-size: 18px; }
.speaker-message-text:focus-visible { outline-offset: -3px; border-radius: 4px; }
.conversation-field { display: grid; grid-template-columns: 135px minmax(0, 1fr); align-items: center; gap: 12px; margin: 12px 0; font-size: 12px; }
.conversation-field span { color: var(--muted); }
.conversation-field select { width: 100%; font-size: 14px; min-height: 44px; }
.speaker-settings { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: end; gap: 12px; margin-top: 16px; }
.conversation-page .speaker-settings .conversation-field { position: relative; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; min-width: 0; }
/* Keep native pickers, with equal 44px touch targets in Safari and Chrome. */
.conversation-page .speaker-settings select { appearance: none; -webkit-appearance: none; height: 44px; max-width: 100%; padding: 8px 28px 8px 12px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.speaker-settings .conversation-field::after { content: ""; position: absolute; right: 13px; bottom: 19px; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.conversation-page .speaker-card .talk-button { margin-top: 0; min-height: 100px; }
.conversation-page .talk-button { width: 100%; min-height: 122px; border-radius: 22px; display: grid; grid-template-columns: 32px auto; justify-content: center; align-content: center; gap: 6px 12px; margin-top: 24px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.talk-button svg { width: 28px; height: 28px; grid-row: span 2; align-self: center; fill: none; stroke: currentColor; stroke-width: 1.7; }
.talk-label { font-size: 17px; font-weight: 650; }
.talk-hint { font-size: 11px; font-weight: 400; }
.talk-button[aria-pressed="true"] { outline: 4px solid var(--control-line); outline-offset: 4px; }
.conversation-status-bar { display: flex; gap: 10px; align-items: center; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--panel-soft); min-height: 70px; }
.conversation-page .conversation-studio .conversation-status-bar { margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.conversation-status-bar p { margin: 0; color: var(--muted); font-size: 13px; flex: 1; line-height: 1.65; }
.conversation-status-bar p.is-error { color: var(--error); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.conversation-page[data-state="recording"] .live-dot { background: var(--coral); animation: recording-pulse 1s ease-in-out infinite; }
#recording-time { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); white-space: nowrap; }
.conversation-result-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.conversation-result-actions .quiet-button { border: 1px solid var(--line); min-height: 44px; }
#conversation-actions[hidden], #retry-conversation[hidden], #conversation-translated[hidden] { display: none !important; }
.conversation-editor { width: min(580px,calc(100% - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 24px; border: 1px solid var(--line); border-radius: 24px; color: var(--ink); background: var(--surface); box-shadow: 0 24px 80px var(--shadow); }
.conversation-editor::backdrop { background: #0006; backdrop-filter: blur(5px); }
.conversation-editor header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.conversation-editor h2 { margin: 0; font-size: 20px; }
.conversation-editor .quiet-button { min-height: 44px; border: 1px solid var(--line); }
.conversation-editor label { display: grid; gap: 10px; color: var(--muted); font-size: 13px; }
.conversation-page .conversation-editor #conversation-original { width: 100%; min-height: 140px; max-height: 40dvh; box-sizing: border-box; padding: 14px; border: 1px solid var(--control-line); border-radius: 14px; color: var(--ink); background: var(--paper); font: inherit; font-size: 17px; line-height: 1.8; resize: vertical; }
.conversation-editor .primary-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 20px; }
#conversation-audio { height: 36px; width: min(100%, 340px); margin-left: auto; }
.conversation-privacy { color: var(--muted); font-size: 11px; line-height: 1.85; margin: 18px 4px; }
.conversation-page .quiet-button:disabled { opacity: .5; cursor: not-allowed; }
.conversation-page :focus-visible { outline: 3px solid var(--control-line); outline-offset: 3px; }
@keyframes recording-pulse { 50% { opacity: .35; } }
@media (max-width: 760px) {
  .conversation-page .conversation-toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .conversation-toolbar label { min-width: 0; flex-wrap: wrap; }
  :root[data-theme] .conversation-page .conversation-toolbar #face-mode { grid-column: 1 / -1; margin-left: 0; width: 100%; }
  .conversation-toolbar label { font-size: 11px; gap: 6px; }
  .conversation-toolbar select { padding: 8px; }
  .speaker-grid { --speaker-viewport: calc(100vh - 24px); --speaker-main-height: max(222px, calc((var(--speaker-viewport) - 12px) / 2)); --speaker-padding: 10px; --speaker-gap: 8px; --speaker-text-height: 108px; --speaker-button-height: clamp(96px, calc(var(--speaker-viewport) / 5 - 48px), 112px); grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 12px; min-height: var(--speaker-viewport); }
  .conversation-page .speaker-grid .speaker-card { display: flex; flex-direction: column; padding: var(--speaker-padding) 12px; min-height: 0; }
  .speaker-main { display: grid; grid-template-rows: auto minmax(var(--speaker-text-height), 1fr) var(--speaker-button-height); gap: var(--speaker-gap); flex: 1; min-width: 0; }
  .conversation-page .speaker-card .speaker-heading { margin-bottom: 0; gap: 8px; }
  .conversation-page .speaker-card .speaker-badge { width: 24px; height: 24px; border-radius: 8px; font-size: 12px; font-weight: 750; }
  .conversation-page .speaker-card .speaker-heading h2 { font-size: 14px; }
  .conversation-page .speaker-card .speaker-greeting { font-size: 18px; }
  .speaker-message { --speaker-line-height: 30px; height: auto; min-height: 0; margin-bottom: 0; padding: 8px 12px; border-radius: 12px; }
  .speaker-message-text { font-size: 20px; }
  .conversation-field { grid-template-columns: 100px minmax(0, 1fr); }
  .speaker-settings { gap: 8px; margin-top: 8px; }
  .conversation-page .speaker-settings .conversation-field { gap: 4px; font-size: 11px; }
  .conversation-page .speaker-settings select { padding-left: 10px; }
  .conversation-page .speaker-card .talk-button { min-height: var(--speaker-button-height); padding: 12px; gap: 5px 10px; grid-template-columns: 28px minmax(0, auto); }
  .conversation-page .talk-button svg { width: 28px; height: 28px; }
  .conversation-page .talk-label { font-size: 17px; line-height: 1.25; }
  .conversation-page .talk-hint { font-size: 11px; line-height: 1.3; }
  .conversation-page .speaker-card .talk-button[aria-pressed="true"] { outline-width: 2px; outline-offset: 2px; }
  .conversation-studio { scroll-margin-top: 0; }
  .conversation-status-bar { padding: 14px 18px; gap: 7px; flex-wrap: wrap; }
  .conversation-editor { padding: 18px; }
  .conversation-page.face-mode #speaker-right { grid-row: 1; transform: rotate(180deg); }
}
@supports (height: 100svh) {
  @media (max-width: 760px) { .speaker-grid { --speaker-viewport: calc(100svh - 24px); } }
}
/* Short screens reserve the first screen for speaking; labeled settings follow both cards. */
@media (max-width: 760px) and (max-height: 720px) {
  .conversation-page .speaker-grid { min-height: 0; grid-auto-rows: auto; grid-template-areas: "a" "b" "a-settings" "b-settings"; grid-template-rows: repeat(2, var(--speaker-main-height)) auto auto; }
  .conversation-page.face-mode .speaker-grid { grid-template-areas: "b" "a" "a-settings" "b-settings"; }
  :root[data-theme] .conversation-page .speaker-grid .speaker-card { display: contents; }
  :root[data-theme] .conversation-page .speaker-grid .speaker-main { min-height: 0; padding: var(--speaker-padding) 12px; border: 2px solid var(--control-line); border-radius: var(--skin-radius, 24px); box-shadow: 0 3px 8px var(--shadow); background: var(--skin-panel-fill); }
  :root[data-theme] .conversation-page .speaker-grid .speaker-main:has(.talk-button[aria-pressed="true"]) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--panel), 0 3px 8px var(--shadow); }
  .conversation-page #speaker-main-left { grid-area: a; }
  .conversation-page #speaker-main-right { grid-area: b; background: var(--surface); }
  .conversation-page #speaker-settings-left { grid-area: a-settings; }
  .conversation-page #speaker-settings-right { grid-area: b-settings; }
  .conversation-page.face-mode #speaker-right { transform: none; }
  .conversation-page.face-mode #speaker-main-right { transform: rotate(180deg); }
  .conversation-page .speaker-settings { align-self: start; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  .speaker-settings-title { display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; margin: 0 0 2px; color: var(--ink); font-size: 13px; font-weight: 650; }
}
@media (max-width: 760px) and (max-height: 600px) {
  .speaker-grid { --speaker-padding: 4px; --speaker-gap: 4px; --speaker-text-height: 98px; --speaker-button-height: clamp(76px, calc(var(--speaker-main-height) - 146px), 96px); }
  .speaker-message { --speaker-line-height: 28px; padding: 6px 10px; }
  .conversation-page .talk-label { font-size: 16px; }
}
@media (max-width: 760px) and (min-width: 520px) and (max-height: 500px) {
  .conversation-page .speaker-grid, .conversation-page.face-mode .speaker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a b" "a-settings b-settings"; grid-template-rows: var(--speaker-viewport) auto; }
}
@media (min-width: 761px) { .conversation-page.face-mode #speaker-right { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .conversation-page[data-state="recording"] .live-dot { animation: none; } }