/* The generated body is the physical device; the live app sits in its alpha aperture. */
body{background:#06090f;background-image:none;min-height:100svh;overflow-x:hidden}main{display:flex;align-items:center;justify-content:center;max-width:none;margin:0;padding:0;min-height:100svh}.phone-shell{position:relative;justify-self:auto;width:min(640px,calc((100svh - 16px)*.6666667));max-width:none;aspect-ratio:2/3;margin:0 auto}.phone-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:5;pointer-events:none;image-rendering:pixelated}.phone{position:absolute;left:19.4%;top:11.65%;width:61.2%;height:75.25%;min-height:0;max-height:none;border:0;outline:0;box-shadow:none;clip-path:none;background:#080e16;border-radius:0;overflow:hidden}.statusbar{height:26px;font-size:7px;padding:0 10px;background:#0b141e;border:0}.statusbar .island{display:none}.status-icons{font-size:6px;gap:4px}.status-icons i{width:14px;height:7px}.status-icons i:after{width:9px;height:3px}.home-indicator{display:none}.call-screen{padding:49px 13px 24px;background:#080e16}.call-screen:before{display:none}.call-type{font-size:7px;margin:0 0 19px;line-height:1.5}.caller-name{font-size:clamp(19px,3.4svh,30px);line-height:1.4;letter-spacing:-.055em}.avatar{width:108px;height:108px;margin:auto 0;border:0;background:none;box-shadow:none;transform:none}.avatar:before,.avatar:after{display:none}.avatar svg{width:62px;height:62px;fill:#8fafc4;shape-rendering:crispEdges;animation:receiver 2.7s steps(2) infinite}.call-actions{margin-top:0;padding-top:10px;gap:3px;justify-content:space-between}.call-action{font-size:7px;padding:7px 2px;gap:10px}.round-button{width:59px;height:49px}.round-button svg{width:21px;height:21px}.phone-caption{position:absolute;right:0;left:0;bottom:-4px;display:flex;justify-content:center;margin:0;z-index:6;pointer-events:none}.phone-caption button{font-size:7px;padding:7px;color:#4c667d;pointer-events:auto}.about-minimal{position:fixed;right:20px;bottom:20px;z-index:12;border:1px solid #334355;background:#0a121b;color:#70899e;font:11px VCR,monospace;width:25px;height:25px;padding:0}.thread-screen{padding-top:26px}.thread-screen .thread-header{padding:8px 9px;gap:8px}.tiny-avatar{height:28px;width:25px}.tiny-avatar img{height:23px}.contact-name{font-size:8px}.contact-sub{font-size:6px;margin-top:5px}.back{height:25px;padding:0 6px;font-size:17px}.thread-menu{font-size:17px}.thread-body{padding:8px 10px}.thread-body .day{display:none}.system-event{font-size:7px;margin:9px 3px}.bubble{font-size:9px;padding:11px 10px 20px;line-height:1.6;margin:10px 0}.bubble small{font-size:5px}.reply-area{padding:9px 9px 13px}.reply-label{font-size:6px;margin-bottom:7px}.reply-choice{font-size:8px;line-height:1.6;padding:9px;margin-top:6px}.attachment{padding:10px}.attachment strong{font-size:8px}.attachment p{font-size:8px;line-height:1.65}.queue{padding:48px 16px 20px}.queue h2{font-size:22px}.queue>p{font-size:9px}.notification{padding:11px}.notification strong{font-size:9px}.notification p{font-size:8px}.notification small{font-size:5px}.queue .system-event{display:none}.queue .reply-choice{margin-bottom:0}.result{padding:44px 16px 20px}.result h2{font-size:24px;margin:14px 0 15px}.result .eyebrow{font-size:9px}.result p{font-size:9px;line-height:1.7}.result-art{height:78px;margin:5px 0 13px}.result-art img{height:67px}.result-quote{font-size:9px;padding:10px;margin-bottom:9px}.result-quote small{display:none}.result .result-btn{font-size:8px;padding:10px;margin-top:6px}.result .result-note{font-size:6px;padding-top:13px}.toast{font-size:8px;left:9px;right:9px;bottom:16px}@keyframes receiver{0%,80%,100%{transform:rotate(0)}83%,89%{transform:rotate(-13deg)}86%,92%{transform:rotate(13deg)}}
@media(max-width:720px){main{display:flex;max-width:none;padding:0;margin:0;min-height:100svh}.phone-shell{width:min(100vw,calc((100svh - 14px)*.6666667));max-width:none;margin:auto;aspect-ratio:2/3}.phone{height:75.25%;width:61.2%;min-height:0;max-height:none;border:0;box-shadow:none}.phone .statusbar{height:23px;padding:0 8px;font-size:6px}.caller-name{font-size:clamp(17px,5.3vw,25px)}.call-screen{padding:38px 10px 17px}.call-type{font-size:6px;margin-bottom:14px}.avatar{height:80px;width:80px;margin:auto 0}.avatar svg{width:48px;height:48px}.round-button{width:48px;height:43px}.round-button svg{width:18px;height:18px}.call-action{font-size:6px;gap:9px}.call-actions{gap:1px;padding-top:6px}.phone-caption{display:flex;bottom:0}.phone-caption button{font-size:6px}.thread-screen{padding-top:23px}.thread-screen .thread-header{padding:7px;gap:6px}.contact-name{font-size:7px}.contact-sub{font-size:5px}.bubble{font-size:8px;line-height:1.65;padding:10px 9px 18px}.reply-choice{font-size:7px;padding:8px;line-height:1.6}.reply-label{font-size:5px}.reply-area{padding:8px 8px 11px}.attachment strong{font-size:7px}.attachment p{font-size:7px}.thread-body{padding:7px 8px}.system-event{font-size:6px}.result{padding:35px 12px 15px}.result h2{font-size:20px;margin:12px 0}.result p{font-size:8px}.result .eyebrow{font-size:5px}.result-art{height:68px;margin:3px 0 10px}.result-art img{height:56px}.result-quote{font-size:8px;padding:9px}.result .result-btn{font-size:7px;padding:8px}.result .result-note{font-size:5px;line-height:1.6;padding-top:10px}.queue{padding:38px 12px 16px}.queue h2{font-size:19px}.queue>p{font-size:8px}.notification strong{font-size:8px}.notification p{font-size:7px}.notification small{font-size:5px}.about-minimal{right:12px;bottom:12px;width:22px;height:22px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.avatar svg{animation:none}}
/* Fit the illustrated housing, rather than the transparent canvas, to the viewport. */
.phone-shell{width:min(470px,calc((100svh - 14px)*.488));aspect-ratio:.488}.phone-frame{left:-18.25%;width:136.5%;height:100%;object-fit:fill}.phone{left:8.23%;width:83.54%}.phone-caption{bottom:-5px}.call-action{font-size:8px}.round-button{width:65px;height:53px}.call-screen{padding-top:48px}.caller-name{font-size:29px}
@media(max-width:720px){.phone-shell{width:min(100vw,calc((100svh - 14px)*.488));aspect-ratio:.488}.phone{left:8.23%;width:83.54%;height:75.25%}.call-screen{padding:43px 14px 22px}.caller-name{font-size:27px}.call-type{font-size:7px}.round-button{width:62px;height:53px}.call-action{font-size:8px}.avatar{width:100px;height:100px}.avatar svg{width:57px;height:57px}.thread-screen .thread-header{padding:9px}.contact-name{font-size:9px}.contact-sub{font-size:6px}.bubble{font-size:10px;line-height:1.7;padding:11px 11px 20px}.reply-choice{font-size:9px;padding:10px}.reply-label{font-size:6px}.attachment strong{font-size:8px}.attachment p{font-size:9px}.system-event{font-size:7px}.result h2{font-size:25px}.result p{font-size:10px}.result .result-btn{font-size:8px;padding:11px}.result .result-note{font-size:6px}.result .eyebrow{font-size:9px}.result-art{height:85px}.result-art img{height:75px}.result-quote{font-size:10px}.queue h2{font-size:25px}.queue>p{font-size:10px}.notification strong{font-size:10px}.notification p{font-size:9px}.notification small{font-size:6px}}

/* Generated portrait based on the user's reference, used only in the caller UI. */
.avatar.caller-portrait{width:180px;height:180px;max-width:83%;border:1px solid #3c5364;box-shadow:4px 4px 0 #02070c;margin:auto 0;overflow:hidden}
.avatar.caller-portrait>img:first-child{position:static;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;transform:none;animation:none;filter:none}
.tiny-avatar{overflow:hidden;flex-shrink:0}.tiny-avatar img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
@media(max-width:720px){.avatar.caller-portrait{width:180px;height:180px;max-width:83%}.avatar.caller-portrait>img:first-child{width:100%;height:100%;transform:none;animation:none;filter:none}.tiny-avatar img{width:100%;height:100%}}

/* Conversation text uses a UI font at normal chat sizes. */
.thread-screen {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.thread-screen .thread-header {
  gap: 9px;
  padding: 8px 10px;
}

.thread-screen .back,
.thread-screen .thread-menu {
  min-width: 36px;
  min-height: 40px;
}

.thread-screen .thread-menu {
  width: 36px;
  padding: 0;
  letter-spacing: 0;
}

.thread-screen .tiny-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.thread-screen .contact-name {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
  color: #edf3fa;
}

.thread-screen .thread-body {
  padding: 8px 10px 12px;
  scroll-behavior: auto;
}

.thread-screen .system-event {
  font-size: 12px;
  line-height: 1.35;
  color: #a5b7c8;
}

.thread-screen .bubble {
  width: fit-content;
  max-width: 90%;
  margin: 5px auto 5px 0;
  padding: 8px 11px 5px;
  border: 0;
  border-radius: 14px 14px 14px 4px;
  background: #182838;
  color: #edf3fa;
  box-shadow: none;
  font-size: 16px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.thread-screen .bubble::before {
  content: none;
}

.thread-screen .bubble.mine {
  margin-right: 0;
  margin-left: auto;
  border-radius: 14px 14px 4px 14px;
  background: #2f2a43;
}

.thread-screen .bubble small {
  position: static;
  display: block;
  color: #adbed1;
  text-align: right;
  font-size: 11px;
  line-height: 1.2;
  margin-top: 3px;
}

.thread-screen .attachment strong,
.thread-screen .attachment p {
  font-size: 14px;
  line-height: 1.4;
}

.thread-screen .reply-area {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 46%;
  overflow-y: auto;
  padding: 8px 10px 10px;
  background: #101b27;
}

.thread-screen .reply-label {
  font-size: 12px;
  color: #a5b7c8;
  margin-bottom: 6px;
}

.thread-screen #choices {
  display: grid;
  gap: 6px;
}

.thread-screen #choices .reply-choice {
  margin: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #40546a;
  border-radius: 10px;
  background: #1d2d3e;
  color: #edf3fa;
  font: 500 15px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: none;
}

.thread-screen #choices .reply-choice::before {
  content: none;
}

.thread-screen #choices .reply-choice:hover {
  background: #293d52;
  border-color: #5e7690;
}

.thread-screen #choices .reply-choice:focus-visible {
  outline: 2px solid #a9c2dc;
  outline-offset: -3px;
}

@media (prefers-reduced-motion: no-preference) {
  .phone-shell:has(.call-screen) {
    animation: incoming-call-vibration 3.8s ease-in-out infinite;
  }
}

@keyframes incoming-call-vibration {
  0%, 15%, 100% { transform: none; }
  3%, 9% { transform: translateX(-1px) rotate(-0.25deg); }
  6%, 12% { transform: translateX(1px) rotate(0.25deg); }
}

.phone-caption:has(#sound[data-autoplay-blocked]) {
  bottom: 3px;
}

.phone-caption #sound[data-autoplay-blocked] {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid #40546a;
  border-radius: 8px;
  background: #1d2d3e;
  color: #edf3fa;
  font: 600 13px/1.25 system-ui, sans-serif;
}

.caller-cat .caller-portrait > img:first-child {
  object-fit: contain;
}
.caller-server .caller-portrait > img:first-child,
.tiny-avatar.caller-server img {
  object-fit: cover;
  object-position: 76% center;
}
.chat-photo {
  width: min(92%, 370px);
  margin: 12px 0;
  border: 1px solid #3a536c;
}
.chat-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.concept-cat {
  display: block;
  width: 70px;
  margin-top: 12px;
}