/*
 * Call captions must remain identical in Safari and in the installed iOS PWA.
 * This file intentionally loads after every generic glass/theme fallback.
 */
html .app-shell .page.call-page .call-caption.glass{
  position:relative;
  z-index:2;
  display:grid;
  flex:0 1 auto;
  grid-template-rows:minmax(82px,1.6fr) minmax(52px,1fr);
  width:100%;
  min-height:134px;
  max-height:210px;
  margin-top:auto;
  padding:0!important;
  overflow:auto;
  border:1px solid color-mix(in srgb,var(--theme-b) 42%,transparent)!important;
  border-radius:25px;
  background:
    radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--theme-a) 26%,transparent),transparent 42%),
    linear-gradient(145deg,
      color-mix(in srgb,var(--theme-c) 54%,#111b26),
      color-mix(in srgb,var(--theme-a) 20%,#0b1620)
    )!important;
  color:color-mix(in srgb,var(--theme-b) 72%,#c8d8e3)!important;
  box-shadow:
    0 18px 50px color-mix(in srgb,var(--theme-c) 30%,rgba(0,0,0,.42)),
    inset 0 1px color-mix(in srgb,var(--theme-b) 28%,transparent)!important;
  -webkit-backdrop-filter:blur(24px) saturate(125%)!important;
  backdrop-filter:blur(24px) saturate(125%)!important;
  -webkit-overflow-scrolling:touch;
}
html .app-shell .page.call-page .call-caption>div{
  position:relative;
  min-width:0;
  min-height:0;
  padding:13px 16px;
  background:transparent!important;
}
html .app-shell .page.call-page .call-caption>div+div{
  border-top:1px solid color-mix(in srgb,var(--theme-b) 22%,transparent);
  background:color-mix(in srgb,var(--theme-a) 10%,transparent)!important;
}
html .app-shell .page.call-page .call-caption small{
  display:block;
  margin-bottom:5px;
  color:color-mix(in srgb,var(--theme-a) 74%,#aebdca)!important;
  opacity:1!important;
}
html .app-shell .page.call-page .call-caption p,
html .app-shell .page.call-page .call-caption #call-translation,
html .app-shell .page.call-page .call-caption #call-spoken{
  display:block!important;
  margin:0!important;
  overflow-wrap:anywhere;
  color:color-mix(in srgb,var(--theme-b) 78%,#cbd9e2)!important;
  opacity:1!important;
  visibility:visible!important;
  -webkit-text-fill-color:color-mix(in srgb,var(--theme-b) 78%,#cbd9e2)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
html .app-shell .page.call-page .call-caption #call-translation{
  font-size:15px;
  line-height:1.55;
}
html .app-shell .page.call-page .call-caption #call-spoken{
  color:color-mix(in srgb,var(--theme-a) 68%,#b8c8d2)!important;
  -webkit-text-fill-color:color-mix(in srgb,var(--theme-a) 68%,#b8c8d2)!important;
  font-size:12px;
  line-height:1.45;
  display:-webkit-box!important;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
}
.call-caption-nav{display:flex;align-items:center;justify-content:center;gap:6px;height:24px;margin-top:5px;color:color-mix(in srgb,var(--theme-a) 72%,#b9c9d5)}
.call-caption-nav[hidden]{display:none}
.call-caption-nav button{min-width:24px;height:24px;padding:0 6px;border:0;border-radius:12px;background:color-mix(in srgb,var(--theme-b) 10%,transparent);color:inherit;font:inherit;line-height:24px}
.call-caption-nav>span{min-width:38px;text-align:center;font-size:9px;letter-spacing:.08em;opacity:.72}
.call-caption-nav .call-caption-expand{margin-left:4px;padding:0 9px;font-size:9px}
html .app-shell .page.call-page .call-caption.caption-expanded{max-height:min(56vh,430px);overflow:auto}
html .app-shell .page.call-page .call-caption.caption-expanded #call-translation{white-space:pre-wrap}
@media(max-height:740px){
  html .app-shell .page.call-page .call-caption.glass{
    grid-template-rows:minmax(66px,1.4fr) minmax(44px,1fr);
    min-height:110px;
    max-height:150px;
  }
  html .app-shell .page.call-page .call-caption>div{padding:8px 12px}
  html .app-shell .page.call-page .call-caption #call-translation{font-size:14px;line-height:1.4}
}