/* Shared side-by-side iPhone canvas. Never reflow the device to fit its stage. */
.focus-view .preview-stage,.collection-lab .preview-stage{height:calc(100svh - 190px);min-height:500px;padding:24px;background:#ededed;align-items:center;overflow:hidden}
.collection-lab #stage{display:contents}
.device-viewport{position:relative;flex:none;width:422px;height:894px;scroll-margin-block:170px 20px}
.iphone-frame{position:relative;width:422px;height:894px;padding:10px;border-radius:65px;background:#171819;transform:scale(var(--phone-scale,1));transform-origin:top left;box-shadow:inset 0 0 0 1px #80817f,inset 0 0 0 3px #dededb,inset 0 0 0 4px #666763,inset 0 0 0 6px #161718,0 22px 35px -19px #24232138,0 4px 9px #24232112}
.iphone-screen{width:402px;height:874px;border-radius:55px;overflow:hidden;position:relative;box-shadow:0 0 0 1px #000}
.device-button{position:absolute;left:-3px;width:3px;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#72736f,#dededb)}
.device-button.action{top:145px;height:27px}.device-button.volume-up{top:203px;height:58px}.device-button.volume-down{top:276px;height:58px}
.device-button.power{left:auto;right:-3px;top:230px;height:88px;border-radius:0 2px 2px 0;background:linear-gradient(90deg,#dededb,#72736f)}
.device-button.camera{left:auto;right:-2px;top:533px;height:55px;width:2px;border-radius:0 2px 2px 0;background:#aaa}
.iphone-status{position:absolute;inset:0 0 auto;height:58px;padding:0 30px 4px;display:flex;align-items:center;justify-content:space-between;color:#111;font:600 17px/22px -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;z-index:15;pointer-events:none;background:linear-gradient(#fff 65%,#fff0)}
.status-time{min-width:54px;text-align:center;letter-spacing:-.2px;font-variant-numeric:tabular-nums}
.dynamic-island{position:absolute;z-index:16;width:94px;height:28px;top:12px;left:50%;transform:translateX(-50%);border-radius:20px;background:#080809;pointer-events:none}
.dynamic-island::after{content:'';position:absolute;right:9px;top:9px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#182234,#06070b 70%);box-shadow:0 0 0 1px #121318}
.status-icons{display:flex;align-items:center;gap:6px;height:22px}
.wabi-chat .status-icons>svg{display:block;flex:none;height:13px;width:19px;fill:currentColor;stroke:none;overflow:visible}
.wabi-chat .status-icons>.status-wifi{width:18px;height:14px}.wabi-chat .status-icons>.status-battery{width:27px;height:13px}
.wabi-chat>.home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:134px;height:5px;background:#111;border-radius:4px;z-index:15;pointer-events:none}

/* Wabi's actual chat layout: avatar column, asymmetrical bubbles, floating chrome. */
.wabi-chat{--chat-inset:16px;--chat-message-inset:38.8px;background:#fff;color:#171717;font-family:Selecta,Arial,sans-serif}
.wabi-chat .phone-header{position:absolute;top:58px;left:0;right:0;height:70px;padding:6px var(--chat-inset) 20px;border:0;background:transparent;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;pointer-events:none}
.wabi-chat .header-control{position:relative;width:45px;height:45px;flex:none;display:flex;align-items:center;justify-content:center;border:1px solid #0000000d;border-radius:50%;background:#ffffffb3;box-shadow:0 2px 8px -3px #23282b17;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);color:#111}
.wabi-chat .header-control>svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.wabi-chat .wabi-back{width:36px;height:36px;margin-top:4.5px}
.wabi-chat .wabi-back>svg{width:20px;height:20px;stroke-width:2}
.wabi-chat .chat-title-pill{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:45px;max-width:260px;padding:4px 15px 4px 4px;border-radius:30px;border:1px solid #0000000d;background:#ffffffb3;box-shadow:0 2px 8px -3px #23282b17;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);font:500 16px/20px Selecta,Arial,sans-serif}
.wabi-chat .chat-title-pill img{width:36px;height:36px;object-fit:contain;flex:none}
.wabi-chat .chat-title-pill>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wabi-chat .add-person{margin-left:auto}
.wabi-chat .chat-flow{position:absolute;top:48px;bottom:30px;left:var(--chat-inset);right:var(--chat-inset);width:auto;max-height:none;margin:0;padding:112px 0 80px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-padding:112px 0 80px;scrollbar-width:none;overflow-anchor:none;mask-image:linear-gradient(transparent,#0000001f 24px,#0000008c 50px,#000000db 72px,#000 96px,#000 calc(100% - 8px),transparent)}
.wabi-chat .chat-flow:focus-visible{outline:2px solid #246bfe;outline-offset:3px}
.wabi-chat .wabi-thread-entry{position:relative;margin:0 0 15px}
.wabi-chat .chat-message-row{display:flex;align-items:flex-start;gap:8px;width:100%;min-width:0}
.wabi-chat .chat-message-row>.member-avatar{width:30.8px;height:30.8px;flex:0 0 30.8px;margin-top:20px}
.wabi-chat .member-avatar img{width:100%;height:100%;object-fit:contain;transform:scale(1.22093);transform-origin:center}
.wabi-chat .chat-message-content{min-width:0;max-width:calc(100% - var(--chat-message-inset))}
.wabi-chat .sender-name{display:block;margin:0 0 5px 13px;transform:translateY(2px);font:400 12px/15px Selecta,Arial,sans-serif;color:#777}
.wabi-chat .wabi-bubble{width:fit-content;max-width:100%;padding:12px 15px;border-radius:0 23px 23px 23px;margin:0;background:#f5f5f5;color:#111;font:400 17px/1.4 Selecta,Arial,sans-serif;white-space:pre-line}
.wabi-chat .chat-message-row.sent{justify-content:flex-end;padding-left:20px}
.wabi-chat .wabi-bubble.sent{border-radius:23px 0 23px 23px;background:#171717;color:#fff}
.wabi-chat .wabi-attachment{margin-left:var(--chat-message-inset);max-width:calc(100% - var(--chat-message-inset))}
.wabi-chat .chat-followup{margin-top:16px}
.wabi-chat .poll-snippet .module-head{margin-bottom:12px}
.wabi-chat .poll-snippet h3{margin-bottom:12px}
.wabi-chat .poll-options{margin-bottom:11px}
.wabi-chat .saved-list{margin:0 0 12px}
.wabi-chat .saved-row{padding-block:6px}
.chat-scroll-blur{position:absolute;top:48px;left:16px;right:16px;height:96px;z-index:5;pointer-events:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);mask-image:linear-gradient(#000,transparent)}
.wabi-chat .phone-footer{position:absolute;left:16px;right:16px;bottom:34px;width:auto;height:54px;display:flex;align-items:center;padding:7px;gap:10px;z-index:20;border:1px solid #0000000b;background:#ffffffcc;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);box-shadow:0 3px 10px -5px #11111124;border-radius:29px}
.wabi-chat .wabi-compose>.compose-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:linear-gradient(#ffffffd9,#eeeeefb0);border:1px solid #ffffffc0;box-shadow:inset 0 1px 1px #fff,0 1px 3px #00000008;color:#323438;padding:0}
.wabi-chat .compose-plus-control>.icon{width:21px;height:21px;stroke-width:1.65}
.wabi-chat .wabi-compose>.compose-placeholder{font:400 17px/1.2 Selecta,Arial,sans-serif;color:#96999f;padding:0}
.wabi-chat .compose-mic-control{margin-left:auto}
.wabi-chat .mic-icon{width:19px;height:19px;fill:none;stroke:#55595f;color:#55595f;stroke-width:1.65;stroke-linecap:round}
.wabi-chat:has(.browse-shell) .chat-scroll-blur{display:none}
.wabi-chat:has(.browse-shell) .phone-footer{visibility:hidden}
.wabi-chat .browse-shell{position:absolute;inset:58px 0 0;z-index:12;padding-bottom:26px;border-radius:0;background:#fff}
.wabi-chat .browse-scroll{padding-inline:20px;scroll-padding-block:12px}
.wabi-chat .browse-bottom{bottom:34px}
.wabi-chat .browse-filters{padding-inline:19px}.wabi-chat .browse-filters button{font-size:12px;min-height:37px}
.iphone-screen.device-dialog-open::after{content:'';position:absolute;inset:0;background:#1717172b;z-index:24;pointer-events:none}
dialog.device-dialog{position:fixed;inset:auto;left:var(--dialog-left);top:var(--dialog-top);margin:0;width:402px;max-width:none;max-height:782px;border-radius:28px;transform:translateY(0) scale(var(--dialog-scale,1));transform-origin:top left;box-shadow:0 -4px 24px #00000012;transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
dialog.device-dialog::backdrop{background:transparent;backdrop-filter:none}
@starting-style{dialog.device-dialog[open]{transform:translateY(8px) scale(var(--dialog-scale,1));opacity:0}}
dialog.device-dialog.closing{transform:translateY(8px) scale(var(--dialog-scale,1));opacity:0}
dialog.device-dialog .dialog-header{padding:22px 20px 18px;gap:12px}
dialog.device-dialog .dialog-header h2{font-size:27px}
dialog.device-dialog .dialog-content{padding:0 20px 24px}
dialog.device-dialog .comparison-table th,dialog.device-dialog .comparison-table td{min-width:130px;max-width:160px;padding:15px 12px;font-size:12px}
dialog.device-dialog .comparison-table th:first-child{min-width:77px;max-width:77px;width:77px;padding:15px 10px;font-size:10px}
dialog.device-dialog .comparison-choice{font-size:11px;min-height:35px;padding:7px 10px;gap:5px}
html.keyboard-input dialog.device-dialog[open],html.keyboard-input dialog.device-dialog.closing{transform:scale(var(--dialog-scale,1))}

/* Desktop mode keeps the same conversation, without simulated hardware. */
.desktop-chat{position:relative;width:100%;max-width:610px;height:100%;min-height:500px;border:1px solid #dedede;border-radius:28px;overflow:hidden;box-shadow:0 12px 22px -12px #0002}
.desktop-chat.wabi-chat .phone-header{top:18px}.desktop-chat.wabi-chat .chat-flow{top:8px}
.desktop-chat .chat-scroll-blur{top:8px}.desktop-chat.wabi-chat .phone-footer{bottom:18px}
.desktop-chat.wabi-chat .wabi-attachment{max-width:356px}
.desktop-chat.wabi-chat .browse-shell{inset:0}
html.browse-open,html.browse-open body{overflow:auto}
html.browse-open .site-header{position:sticky;inset:0 0 auto}
html.browse-open #app{padding-top:0}

@media(max-width:600px){
 .focus-view .preview-stage,.collection-lab .preview-stage{height:calc(100svh - 158px);min-height:440px;padding:20px 16px;background:#ededed}
 .collection-lab .preview-stage{height:calc(100svh - 198px)}
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active){
 .wabi-chat .chat-flow{mask-image:none}
 .chat-scroll-blur{display:none}
 .wabi-chat :is(.phone-footer,.header-control,.chat-title-pill){background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media(prefers-reduced-motion:reduce){dialog.device-dialog[open],dialog.device-dialog.closing{transform:scale(var(--dialog-scale,1))!important;transition:none}}
@media(forced-colors:active){
 .wabi-chat :is(.wabi-bubble,.header-control,.chat-title-pill,.phone-footer,.compose-icon){border:1px solid CanvasText}
}