#callView {
  --call-ink: #f4f2ee;
  color: var(--call-ink);
  padding: max(8px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 25%, color-mix(in srgb, var(--accent) 21%, transparent), transparent 60%), linear-gradient(155deg, #202724, #111a1a 70%);
}
#callView [hidden] { display: none !important; }
#callView .call-topbar { flex-shrink: 0; color: #c7ceca; }
#callView .call-topbar > span { font-size: 11px; letter-spacing: .12em; }
#callView .call-back-button { width: 38px; height: 38px; border-radius: 50%; }
#callView .call-stage { padding-top: clamp(22px, 5vh, 46px); }
#callView .call-avatar-wrap { width: 140px; height: 140px; flex-shrink: 0; }
#callView .call-avatar, #callView .call-avatar-fallback {
  grid-area: 1 / 1;
  width: 124px;
  height: 124px;
  border: 1px solid #ffffff38;
  box-shadow: 0 14px 44px #0004, 0 0 0 7px #ffffff06;
}
#callView .call-pulse { inset: 0; pointer-events: none; }
#callView .call-stage h1 {
  margin: 22px 0 8px;
  font-family: inherit;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1.3;
  color: var(--call-ink);
}
#callView .call-status { color: #b8c7bf; font-size: 13px; }
#callView .call-timer { margin-top: 9px; font-size: 12px; color: #96a79e; font-variant-numeric: tabular-nums; letter-spacing: .1em; }
#callView .call-analysis { flex-shrink: 0; width: 100%; margin-top: 20px; padding: 10px 12px; border: 1px solid #ffffff0e; border-radius: 14px; background: #ffffff04; }
#callView .call-analysis-title { display: block; margin-bottom: 8px; font-size: 10px; letter-spacing: .04em; color: #9bafa3; }
#callView .call-analysis-result { display: flex; flex-wrap: wrap; gap: 6px; color: #aebfb4; font-size: 11px; }
#callView .call-voice-tag, #callView .call-caption .call-voice-tag { display: inline-block; font-size: 10px; line-height: 1.5; padding: 4px 7px; border-radius: 7px; color: #cbdacf; background: #b8d9c512; }
#callView .call-voice-tag[data-kind="emotion"] { color: #e7d0ba; background: #ddaa7b12; }
#callView .call-caption-analysis { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; font-size: 10px; color: #8ca396; }
#callView .call-captions {
  width: 100%;
  flex: 1;
  min-height: 60px;
  max-height: none;
  margin: 16px 0 14px;
  padding: 12px 4px;
  border: 0;
  background: transparent;
  mask-image: linear-gradient(transparent, black 12px, black);
}
#callView .call-caption { margin: 0 0 14px; padding: 10px 14px; border-radius: 16px; background: #ffffff07; border: 1px solid #ffffff09; }
#callView .call-caption strong { font-size: 10px; color: #a8bcb0; font-weight: 500; }
#callView .call-caption span { font-size: 14px; line-height: 1.65; color: #edf0eb; }
#callView .call-caption.user { background: #ffffff03; }
#callView .call-caption-hint { color: #8d9e95; font-size: 12px; }
#callView .call-controls { flex-shrink: 0; padding-top: 12px; gap: 26px; }
#callView .call-control { font-size: 11px; gap: 10px; color: #c8d1cb; }
#callView .call-control-icon { width: 54px; height: 54px; background: #ffffff0c; border: 1px solid #ffffff1a; box-shadow: none; }
#callView .call-hangup .call-control-icon { width: 62px; height: 62px; background: #bb5b5b; border-color: #e1959570; box-shadow: 0 8px 24px #982f2f30; }
#callView .call-control.active .call-control-icon { color: #21342c; background: #d4e2d9; }
#callView .call-control:disabled { opacity: .42; }
#callView .call-error { flex-shrink: 0; max-height: 60px; overflow: auto; font-size: 12px; }
.call-record-card {
  width: min(100%, 480px);
  align-self: center;
  margin: 14px auto;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 18px;
  color: inherit;
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.call-record-card > summary { display: flex; flex-direction: column; gap: 5px; cursor: pointer; list-style: none; }
.call-record-card > summary::-webkit-details-marker { display: none; }
.call-record-card > summary strong { font-size: 14px; font-weight: 500; }
.call-record-card > summary span { font-size: 11px; opacity: .62; }
.call-record-card[open] > summary { margin-bottom: 14px; }
.call-record-content { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.8; max-height: 45vh; overflow-y: auto; }
.call-record-retry { margin-top: 12px; padding: 8px 12px; border: 1px solid #8884; border-radius: 10px; font: inherit; color: inherit; background: transparent; }
@media (max-height: 660px) {
  #callView .call-stage { padding-top: 8px; }
  #callView .call-avatar-wrap { width: 100px; height: 100px; }
  #callView .call-avatar, #callView .call-avatar-fallback { width: 88px; height: 88px; }
  #callView .call-stage h1 { margin-top: 12px; font-size: 23px; }
  #callView .call-captions { margin-top: 12px; }
  #callView .call-analysis { margin-top: 10px; padding: 7px 10px; }
}
@media (prefers-reduced-motion: reduce) { #callView .call-pulse { animation: none !important; } }