.call-header-actions .icon-button { color: #087f68; }
.call-banner { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; padding: 9px 20px; background: #e1f4e9; border-bottom: 1px solid #bfe0cf; color: #146c52; }
.call-banner-copy { flex: 1; min-width: 0; }
.call-banner-copy strong, .call-banner-copy small { display: block; }
.call-banner-copy strong { font-size: 13px; }
.call-banner-copy small { font-size: 12px; margin-top: 1px; }
.call-banner-actions { display: flex; gap: 6px; }
.call-banner-actions button { min-height: 36px; font-size: 13px; padding: 6px 14px; }
.call-dialog { width: min(920px, calc(100vw - 24px)); background: #132c25; border-color: #345248; color: #e8f1ec; }
.call-dialog::backdrop { background: #0b1818cc; }
.call-dialog h2 { color: #f0f8f3; }
.call-dialog .eyebrow { color: #8bb7a8; }
.call-dialog .dialog-header p:not(.eyebrow) { color: #abd2c1; font-size: 13px; margin-top: 4px; }
.call-dialog .icon-button { color: #b7d6c8; }
.call-dialog .icon-button:hover { background: #28483c; color: white; }
.call-participants { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.call-tile { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 190px; overflow: hidden; border: 1px solid #38594b; border-radius: 14px; background: #213e32; }
.call-tile video { width: 100%; height: 260px; object-fit: cover; background: #10231c; }
.call-tile.self video { transform: scaleX(-1); }
.call-tile[data-state='failed'] { border-color: #a35a4a; }
.call-person { display: grid; place-items: center; flex: 1; min-height: 170px; background: radial-gradient(circle at 50% 40%, #305747, #203b30); }
.call-person .avatar { width: 76px; height: 76px; background: #638973; color: white; font-size: 30px; }
.call-tile-label { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 9px 12px; color: #d4e8dc; font-size: 13px; }
.call-tile-label strong { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; }
.call-tile-label small { flex-shrink: 0; color: #a3c4b1; font-size: 12px; }
.call-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; padding: 22px 0 6px; }
.call-control { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 74px; padding: 12px; border: 1px solid #426251; border-radius: 16px; color: #e9f3ed; background: #2a4a3c; font-size: 12px; }
.call-control svg { width: 24px; height: 24px; }
.call-control:hover { background: #3c6250; }
.call-control[aria-pressed='true'] { background: #eff4ed; color: #254232; }
.call-control.hangup { background: #d0473f; border-color: #d0473f; }
.call-control.hangup svg { transform: rotate(135deg); }
.call-control.hangup:hover { background: #b93a35; }
.call-error { margin-top: 12px; padding: 10px 12px; border: 1px solid #925a47; border-radius: 9px; background: #573c33; color: #ffe6d8; font-size: 13px; }
.call-dialog .call-footnote { margin-top: 12px; text-align: center; color: #8cad9c; font-size: 12px; }
#call-end-all { display: flex; margin: 8px auto 0; color: #f2b8aa; font-size: 13px; }
@media (max-width: 760px) {
  .call-banner { padding: 8px 12px; gap: 8px; }
  .call-banner > svg { width: 18px; height: 18px; }
  .call-dialog { display: flex; flex-direction: column; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); }
  .call-dialog:not([open]) { display: none; }
  .call-dialog h2 { font-size: 18px; }
  /* People share the screen evenly; the video shrinks so each name bar stays visible. */
  .call-participants { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; }
  .call-tile { flex: 1 1 0; min-height: 170px; }
  .call-tile video { flex: 1 1 0; height: auto; min-height: 120px; }
  .call-person { min-height: 120px; }
  .call-tile-label { flex: 0 0 auto; }
  .call-controls { gap: 10px; padding-top: 14px; }
  .call-control { min-width: 64px; padding: 10px 8px; }
}

/* Live translation: captions under the videos, and a note when someone else turned it on. */
.call-captions { margin-top: 12px; padding: 10px 12px; border: 1px solid #2f5244; border-radius: 14px; background: #0c1f19; }
.call-caption-lines { display: grid; gap: 6px; min-height: 42px; }
.caption-line { display: grid; gap: 2px; color: #f3fbf6; font-size: 18px; line-height: 1.35; }
.caption-line strong { color: #9fd0b7; font-size: 12px; font-weight: 650; }
.caption-line small { color: #9db8aa; font-size: 13px; }
.caption-empty { color: #9db8aa; font-size: 14px; }
.call-caption-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-top: 8px; color: #9db8aa; font-size: 12px; }
.caption-voice { display: inline-flex; align-items: center; gap: 6px; color: #d4e8dc; font-size: 13px; }
.call-translate-notice { margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: #2b3f1d; color: #e5f3cf; font-size: 13px; }
#call-translate[aria-pressed='true'] { border-color: #1e88e5; background: #1e88e5; color: white; }
@media (max-width: 760px) {
  .call-captions { flex: 0 0 auto; margin-top: 8px; max-height: 30dvh; overflow-y: auto; }
  .caption-line { font-size: 16px; }
}
.caption-original { color: #9db8aa; font-size: 13px; line-height: 1.4; }
/* 0.7: each person's own words, translated for the others. */
.call-translate-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.call-translate-notice > span { flex: 1 1 220px; }
.call-translate-notice .text-button { min-height: 38px; color: #e5f3cf; text-decoration: underline; }
.caption-line.mine { color: #9db8aa; font-size: 13px; line-height: 1.4; }
.caption-line.status-interim span, .caption-line.status-translating span { color: #c9dcd2; }
.caption-line.status-failed small { color: #f2b8aa; }
@media (max-width: 760px) {
  /* On phones the other person comes first; with subtitles on, your own picture shrinks to make room. */
  .call-tile.self { order: 2; }
  .call-dialog.captions-on:not(.video-stage) .call-tile.self { flex: 0 0 112px; min-height: 112px; }
  .call-dialog.captions-on:not(.video-stage) .call-tile.self video, .call-dialog.captions-on:not(.video-stage) .call-tile.self .call-person { min-height: 0; }
}
@media (max-width: 760px) { .call-dialog.captions-on:not(.video-stage) .call-tile.self .call-tile-label { display: none; } }
/* Each listener picks the language they read and hear. */
.call-caption-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; color: #d4e8dc; font-size: 13px; }
.call-caption-controls select { flex: 0 1 240px; min-width: 0; min-height: 34px !important; padding: 4px 28px 4px 10px !important; border: 1px solid #426251 !important; border-radius: 10px; background-color: #1d3a30 !important; color: #f3fbf6; font-size: 14px !important; }
.call-caption-controls .caption-voice { margin-left: auto; }
/* On a phone only the subtitle lines scroll; the language menu and "Hear" stay in view. */
@media (max-width: 760px) {
  .call-captions { display: flex; flex-direction: column; max-height: 34dvh; overflow: hidden; }
  .call-caption-lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
  .call-caption-controls, .call-caption-foot { flex: none; }
  .call-caption-controls select { flex: 1 1 0; }
}
/* The first time Translate is on: which language this person wants to hear. */
.call-language-ask { display: grid; gap: 8px; margin-bottom: 8px; padding: 10px 12px; border: 1px solid #3d7a5f; border-radius: 12px; background: #173a2e; color: #f3fbf6; }
.call-language-ask strong { font-size: 16px; font-weight: 650; }
.call-language-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.call-language-choices button { min-height: 44px; padding: 6px 16px; border-radius: 12px; font-size: 15px; }
.call-language-choices .text-button { color: #cfe8dc; text-decoration: underline; }
@media (max-width: 760px) { .call-language-ask { flex: none; } }

/* 0.14: video calls look like Messenger's. The others fill the screen and your own picture is a
   small frame in a corner: drag it to another corner, and with one other person tap it to swap the
   two pictures. Until someone answers, your own picture fills the screen. Voice calls keep the
   cards above. */
/* On a computer the picture takes the height left by the name, the buttons and the subtitles. */
.call-dialog.video-stage .call-participants { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); gap: 4px; height: clamp(200px, calc(100dvh / var(--ui-zoom) - 350px), 560px); overflow: hidden; border-radius: 16px; background: #08130f; }
.call-dialog.video-stage.captions-on .call-participants { height: clamp(200px, calc(100dvh / var(--ui-zoom) - 560px), 380px); }
.call-dialog.video-stage .call-participants[data-count='2'], .call-dialog.video-stage .call-participants[data-count='4'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.call-dialog.video-stage .call-participants[data-count='3'], .call-dialog.video-stage .call-participants[data-count='5'], .call-dialog.video-stage .call-participants[data-count='6'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.call-dialog.video-stage .call-tile { min-height: 0; border: 0; border-radius: 0; background: #10231c; }
.call-dialog.video-stage .call-tile video, .call-dialog.video-stage .call-person { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; }
.call-dialog.video-stage .call-tile video.whole { object-fit: contain; }
.call-dialog.video-stage .call-participants[data-count='1'] .call-tile:not(.pip) .avatar { width: 112px; height: 112px; font-size: 44px; }
.call-dialog.video-stage .call-tile-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 10px; background: linear-gradient(#0000, #000b); color: white; text-shadow: 0 1px 3px #000; }
.call-dialog.video-stage .call-tile-label small { color: #e2efe8; }
.call-dialog.video-stage .call-tile.pip { position: absolute; z-index: 2; top: 12px; right: 12px; width: 120px; aspect-ratio: var(--ratio, 3 / 4); max-height: calc(100% - 24px); border: 2px solid #ffffffd9; border-radius: 12px; box-shadow: 0 6px 22px #000b; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.call-dialog.video-stage .call-tile.pip.wide { width: 200px; }
/* In a bottom corner the small frame stays above the name of the person behind it. */
.call-dialog.video-stage .call-participants[data-corner^='bottom'] .call-tile.pip { top: auto; bottom: 58px; }
.call-dialog.video-stage .call-participants[data-corner$='left'] .call-tile.pip { right: auto; left: 12px; }
.call-dialog.video-stage .call-tile.pip .call-tile-label { display: none; }
.call-dialog.video-stage .call-tile.pip .avatar { width: 44px; height: 44px; font-size: 18px; }
.call-dialog.video-stage .call-tile.pip:focus-visible { outline: 3px solid #7ee2c3; outline-offset: 2px; }
/* With the subtitles on, the picture's space is smaller, and so is the small frame. */
.call-dialog.video-stage.captions-on .call-tile.pip { width: 84px; }
.call-dialog.video-stage.captions-on .call-tile.pip.wide { width: 150px; }
@media (max-width: 760px) {
  /* On a phone the picture reaches both edges of the screen, between the name and the buttons. */
  .call-dialog.video-stage { border: 0; }
  .call-dialog.video-stage .call-participants, .call-dialog.video-stage.captions-on .call-participants { flex: 1 1 0; height: auto; min-height: 160px; margin: 0 -12px; border-radius: 0; }
  .call-dialog.video-stage .call-participants[data-count='2'], .call-dialog.video-stage .call-participants[data-count='3'] { grid-template-columns: minmax(0, 1fr); }
  .call-dialog.video-stage .call-participants[data-count='4'], .call-dialog.video-stage .call-participants[data-count='5'], .call-dialog.video-stage .call-participants[data-count='6'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .call-dialog.video-stage .call-tile.pip { width: min(30%, 116px); }
  .call-dialog.video-stage .call-tile.pip.wide { width: min(46%, 176px); }
  .call-dialog.video-stage.captions-on .call-tile.pip { width: min(24%, 88px); }
  .call-dialog.video-stage.captions-on .call-tile.pip.wide { width: min(36%, 136px); }
  /* The buttons stay in one row, so the picture keeps more of the screen. */
  .call-dialog.video-stage .call-controls { flex-wrap: nowrap; gap: 6px; padding-top: 12px; }
  .call-dialog.video-stage .call-control { flex: 1 1 0; min-width: 0; padding: 10px 2px; text-align: center; }
}