:root {
  --viewer-background: #dedee3;
  background: var(--viewer-background);
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--viewer-background);
}
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
  background: var(--viewer-background);
}
.device-wrap {
  width: 410px;
  height: 864px;
  flex-shrink: 0;
  transform: scale(var(--device-scale));
  transform-origin: center;
}
.phone-case {
  width: 410px;
  height: 864px;
  padding: 10px;
  border-radius: 61px;
  background: #1c1c1e;
  box-shadow: 0 18px 42px #24242826;
}
.device {
  width: 390px;
  height: 844px;
  border-radius: 51px;
}
.side-key, .desktop-caption { display: none; }
.home-indicator { bottom: 0; }

/* Leave room below the status glyphs without changing the chosen icon set. */
.status-bar { height: 64px; overflow: visible; }
.status-time { top: 24px; line-height: 20px; }
.status-icons { top: 24px; height: 20px; overflow: visible; }
.status-icons > svg { display: block; flex-shrink: 0; overflow: visible; }
@media (hover: none) and (pointer: coarse) {
  .stage:has(#safariQuery:focus) { align-items: flex-start; }
}

.network-type { display:block; font-size:13px; font-weight:650; line-height:20px; letter-spacing:-.3px; }

/* Recent searches use the space above the physical device keyboard. */
.google-native-app.is-searching .google-history-section {
  bottom: auto;
  height: calc(var(--safari-visible-height, 844px) - 128px);
  max-height: calc(100% - 128px);
  min-height: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.google-native-app.is-searching .google-safari-chrome { display: none; }

/* Fixed vector artwork avoids OS-specific emoji rendering in comment tools. */
.hy-comment-tools > button { appearance: none; -webkit-appearance: none; padding: 0; }
.hy-comment-tools .hy-tool-icon { display: block; width: 21px; height: 14px; color: #fff; filter: drop-shadow(1px 1px 1px #555); }
/* Results tools belong to the scrolling header, not the phone viewport. */
.google-native-app .google-topbar { position: relative; }
.google-native-app.is-results .google-top-tools { top: 50%; right: 0; transform: translateY(-50%); }

/* Scripted Yoon calls remain inside the simulated phone. */
#yoonCall { position:absolute; z-index:120; color:#fff; font-family:inherit; box-sizing:border-box; }
#yoonCall[hidden] { display:none !important; }
#yoonCall button { font:inherit; border:0; color:inherit; cursor:pointer; }
#yoonCall svg { width:28px; height:28px; display:block; }
#yoonCall .avatar { border-radius:50%; overflow:hidden; flex-shrink:0; }
#yoonCall .avatar img { width:100%; height:100%; object-fit:cover; }
.yoon-incoming { top:66px; left:10px; right:10px; min-height:84px; padding:14px; display:flex; gap:10px; align-items:center; border-radius:44px; background:#050505; box-shadow:0 10px 24px #0004; animation:yoon-ring-in .3s ease-out; }
.yoon-incoming-person { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.yoon-incoming-person .avatar { width:50px; height:50px; }
.yoon-incoming-person strong { font-size:20px; font-weight:600; }
.yoon-incoming button { display:grid; place-items:center; width:50px; height:50px; border-radius:50%; flex-shrink:0; }
.yoon-call-red { background:#ff3b46; }.yoon-call-green { background:#2acc4e; }
#yoonCall.yoon-call-full { inset:0; padding:100px 23px 42px; background:radial-gradient(ellipse at 20% 25%,#573532 0%,#352526 48%,#211c22 100%); display:flex; flex-direction:column; }
.has-yoon-call:has(.yoon-call-full) .status-bar { z-index:121; color:white; }
.has-yoon-call:has(.yoon-call-full) #homeButton { pointer-events:none; z-index:121; }
.has-yoon-call:has(.yoon-call-full) #homeButton span { background:#fff; }
.yoon-call-heading { display:flex; align-items:center; gap:14px; flex-shrink:0; padding:0 0 24px; }
.yoon-call-heading .avatar { width:58px; height:58px; }
.yoon-call-heading h2 { margin:2px 0 0; font-size:30px; line-height:1.2; font-weight:600; }
.yoon-call-clock { color:#d5c9ca; font-size:17px; font-variant-numeric:tabular-nums; }
.yoon-call-transcript { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:6px 2px 16px; scrollbar-width:none; }
.yoon-transcript-line { max-width:88%; width:fit-content; margin:0 0 17px; padding:10px 14px; border:1px solid #ffffff55; border-radius:19px 19px 19px 4px; animation:yoon-line-in .25s ease-out; }
.yoon-transcript-line.mine { margin-left:auto; background:#ffffff13; border-color:transparent; border-radius:19px 19px 4px 19px; }
.yoon-transcript-line small { display:block; font-size:12px; color:#d2c5c6; margin-bottom:3px; }
.yoon-transcript-line p { font-size:17px; line-height:1.48; letter-spacing:-.3px; margin:0; overflow-wrap:anywhere; }
.yoon-call-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:20px 18px; flex-shrink:0; padding-top:15px; }
#yoonCall .yoon-call-controls button { background:transparent; padding:0; display:flex; flex-direction:column; align-items:center; gap:7px; }
#yoonCall .yoon-call-controls button:disabled { opacity:1; cursor:default; }
.yoon-call-controls button>span { display:grid; place-items:center; width:76px; height:76px; background:#ffffff13; border:1px solid #ffffff66; border-radius:50%; }
#yoonCall .yoon-call-controls svg { width:30px; height:30px; }
.yoon-call-controls button small { font-size:13px; }
.yoon-call-controls .is-audio>span { background:#f2edf5; color:#29222c; }
.yoon-call-controls .is-end>span { background:#ff3b30; border-color:#ff6059; }
@keyframes yoon-ring-in { from {opacity:0;transform:translateY(-30px) scale(.95)} to {opacity:1;transform:none} }
@keyframes yoon-line-in { from {opacity:0;transform:translateY(6px)} to {opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce) { #yoonCall,.yoon-transcript-line { animation:none; } }

/* Centered caller identity and evenly spaced controls, matching the supplied layout. */
#yoonCall.yoon-call-full { padding-top:110px; padding-bottom:48px; }
.yoon-call-heading { justify-content:center; text-align:center; padding-bottom:25px; }
.yoon-call-heading h2 { margin-top:4px; font-size:32px; line-height:1.3; }
.yoon-call-clock { font-size:21px; font-weight:600; line-height:1.3; }
.yoon-call-controls { gap:24px 18px; padding-top:18px; }
.yoon-call-controls button>span { width:78px; height:78px; }
.yoon-call-controls button small { font-size:14px; line-height:20px; }

#yoonCall .yoon-call-controls svg { width:36px; height:36px; }
#yoonCall .yoon-call-controls .is-end svg { width:39px; height:39px; }