/*
 * International conversation layout.
 *
 * This sheet loads after the shared conversation styles.  Keep every rule
 * region-scoped: the domestic web, desktop shell, and iOS views retain their
 * existing layout.
 */

html[data-site-region="intl"] .international-chat-page {
  --intl-panel-gap: 16px;
}

/* The shared stylesheet has a 360px body floor; international chat is also
 * required to remain usable on 320px devices. */
html[data-site-region="intl"] body {
  min-width: 320px;
}

html[data-site-region="intl"] .international-chat-page .profile-identity h1,
html[data-site-region="intl"] .international-chat-page .profile-scene,
html[data-site-region="intl"] .international-chat-page .profile-prompts > button,
html[data-site-region="intl"] .international-chat-page .chat-transcript .message p,
html[data-site-region="intl"] .international-chat-page .chat-empty p,
html[data-site-region="intl"] .international-chat-page .conversation-text-form textarea {
  overflow-wrap: break-word;
}

html[data-site-region="intl"] .international-chat-page .profile-identity h1 {
  line-height: 1.35;
  word-break: normal;
}

html[data-site-region="intl"] .international-chat-page .profile-scene,
html[data-site-region="intl"] .international-chat-page .profile-prompts > button,
html[data-site-region="intl"] .international-chat-page .chat-transcript .message p,
html[data-site-region="intl"] .international-chat-page .chat-empty p {
  font-size: 14px;
  line-height: 1.7;
}

html[data-site-region="intl"] .international-chat-page .profile-tags span,
html[data-site-region="intl"] .international-chat-page .profile-state,
html[data-site-region="intl"] .international-chat-page .profile-prompts > p,
html[data-site-region="intl"] .international-chat-page .profile-disclosure,
html[data-site-region="intl"] .international-chat-page .chat-transcript .message small,
html[data-site-region="intl"] .international-chat-page .chat-transcript .transcript-status,
html[data-site-region="intl"] .international-chat-page .chat-privacy-note,
html[data-site-region="intl"] .international-chat-page .conversation-video-control,
html[data-site-region="intl"] .international-chat-page .conversation-text-form small {
  font-size: 12px;
  line-height: 1.65;
}

/* Medium widths use the same readable document flow as phones.  This avoids
 * deriving the side-card width from the portrait/canvas width. */
@media (max-width: 1279px) {
  html[data-site-region="intl"] .video-chat-page.glass-chat-page,
  html[data-site-region="intl"][data-desktop] #app > .video-chat-page.glass-chat-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    min-height: 0;
    max-width: 980px;
    padding: 16px;
    gap: 18px;
  }

  html[data-site-region="intl"] .international-chat-page .chat-center,
  html[data-site-region="intl"] .international-chat-page .chat-picker {
    width: 100%;
    min-width: 0;
  }

  html[data-site-region="intl"] .international-chat-page .chat-center {
    order: 0;
  }

  html[data-site-region="intl"] .international-chat-page .chat-picker {
    order: 1;
    max-height: none;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--intl-media-height) auto auto auto;
    gap: var(--intl-panel-gap);
    height: auto;
    min-height: 0;
    padding: 0 0 16px;
    overflow: visible;
    container-type: normal;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-runtime {
    position: relative !important;
    inset: auto !important;
    grid-row: 1;
    width: 100% !important;
    height: var(--intl-media-height) !important;
    min-height: 0 !important;
    border-radius: 20px;
    overflow: hidden;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .glass-panel {
    position: relative;
    inset: auto;
    grid-column: 1;
    width: 100%;
    min-height: 0;
    max-height: none;
    overflow: visible;
    border-radius: 18px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-profile {
    grid-row: 3;
    padding: 20px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-transcript {
    display: flex;
    grid-row: 4;
    min-height: 360px;
    max-height: none;
    overflow: hidden;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-transcript #transcripts {
    min-height: 190px;
    padding: 12px 18px 22px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-empty {
    min-height: 190px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-call-footer {
    position: relative;
    inset: auto;
    grid-row: 2;
    width: 100%;
    height: auto;
    padding: 16px;
    transform: none;
    border: 1px solid #d8f1ff40;
    border-radius: 18px;
    background: linear-gradient(135deg, #cdefff24, #41728d38);
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-call-footer .call-status {
    max-width: 100%;
    margin: 0 0 14px !important;
    font-size: 14px;
    line-height: 1.65;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-call-footer .call-bottom {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "connect connect connect"
      "mute speaker fullscreen";
    gap: 10px;
    width: 100%;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-call-footer .round-control {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 8px 10px;
    white-space: normal;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-call-footer [data-action="mute"] {
    grid-area: mute;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-call-footer [data-action="speaker"] {
    grid-area: speaker;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-call-footer .chat-connect {
    grid-area: connect;
    min-height: 54px;
    padding: 13px 18px;
    font-size: 15px;
    line-height: 1.35;
    white-space: normal;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-call-footer .chat-fullscreen {
    grid-area: fullscreen;
    justify-self: center;
    width: 100%;
    min-width: 0;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .conversation-video-control {
    order: 2;
    min-height: 42px;
    margin: 14px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #d8f1ff35;
    font-size: 13px;
    line-height: 1.55;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .conversation-video-control label {
    min-height: 28px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .conversation-text-form {
    margin: 12px 18px 18px;
    padding-top: 14px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .conversation-text-form textarea {
    min-height: 82px;
    font-size: 14px;
    line-height: 1.7;
  }
}

@media (min-width: 761px) and (max-width: 1279px) {
  html[data-site-region="intl"] .international-chat-page {
    --intl-media-height: clamp(360px, 58dvh, 580px);
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-profile,
  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-transcript {
    padding-inline: 24px;
  }
}

@media (max-width: 760px) {
  html[data-site-region="intl"] .international-chat-page {
    --intl-panel-gap: 12px;
    --intl-media-height: clamp(280px, 42dvh, 360px);
  }

  html[data-site-region="intl"] .video-chat-page.glass-chat-page,
  html[data-site-region="intl"][data-desktop] #app > .video-chat-page.glass-chat-page {
    padding: 12px;
    gap: 14px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-runtime {
    border-radius: 16px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .glass-panel,
  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-call-footer {
    border-radius: 16px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-profile {
    padding: 18px 16px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-transcript {
    min-height: 340px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-transcript #transcripts {
    padding-inline: 16px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .profile-identity h1 {
    font-size: 24px;
    line-height: 1.35;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .profile-scene,
  html[data-site-region="intl"] .international-chat-page .glass-stage .profile-prompts > button,
  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-transcript .message p {
    font-size: 14px;
    line-height: 1.72;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .profile-prompts > button {
    min-height: 50px;
    padding-block: 11px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-call-footer {
    padding: 14px 12px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .conversation-video-control {
    flex-wrap: wrap;
    gap: 8px 12px;
    text-align: center;
  }

  html[data-site-region="intl"] .international-chat-page .chat-picker {
    max-height: none;
  }
}

/* Wide desktops retain a three-column stage, with explicit room for both
 * language-heavy side panels and the live portrait/canvas in the middle. */
@media (min-width: 1280px) {
  html[data-site-region="intl"] .international-chat-page.glass-chat-page,
  html[data-site-region="intl"][data-desktop] #app > .international-chat-page.glass-chat-page {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 20px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage {
    --profile-width: clamp(200px, 18cqw, 250px);
    --portrait-width: min(44cqw, calc((100cqh - 40px) * .75));
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-profile {
    width: var(--profile-width);
    padding: 22px 18px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-transcript {
    width: calc(100% - var(--profile-width) - var(--portrait-width) - 56px);
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .realistic-media {
    left: calc(28px + var(--profile-width) + var(--portrait-width) / 2);
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .chat-call-footer {
    left: calc(28px + var(--profile-width) + var(--portrait-width) / 2);
    width: var(--portrait-width);
    transform: translateX(-50%);
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .profile-identity h1 {
    font-size: 25px;
  }

  html[data-site-region="intl"] .international-chat-page .glass-stage .profile-prompts > button {
    min-height: 58px;
  }
}

/* Fullscreen remains a true video mode: keep the media and usable controls,
 * hide only the duplicate side panels, and leave the exit control reachable. */
html[data-site-region="intl"] .international-chat-page .chat-video-shell:is(:fullscreen, .is-expanded) {
  display: block;
  padding: 0;
  overflow: hidden;
}

html[data-site-region="intl"] .international-chat-page .chat-video-shell:is(:fullscreen, .is-expanded) .chat-runtime {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0;
}

html[data-site-region="intl"] .international-chat-page .chat-video-shell:is(:fullscreen, .is-expanded) .chat-profile,
html[data-site-region="intl"] .international-chat-page .chat-video-shell:is(:fullscreen, .is-expanded) .chat-transcript {
  display: none !important;
}

html[data-site-region="intl"] .international-chat-page .chat-video-shell:is(:fullscreen, .is-expanded) .chat-call-footer {
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  width: auto;
  height: auto;
  padding: 48px 16px max(18px, env(safe-area-inset-bottom));
  transform: none;
  border: 0;
  border-radius: 0;
  background: linear-gradient(transparent, rgba(5, 17, 25, .84));
}

html[data-site-region="intl"] .international-chat-page .chat-video-shell:is(:fullscreen, .is-expanded) .chat-call-footer .call-bottom {
  display: flex;
  flex-wrap: wrap;
}

html[data-site-region="intl"] .international-chat-page .chat-video-shell:is(:fullscreen, .is-expanded) .chat-call-footer .chat-fullscreen {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 8px;
}