@font-face{font-family:Mersad;src:url('./assets/fonts/Mersad-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Mersad;src:url('./assets/fonts/Mersad-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Mersad;src:url('./assets/fonts/Mersad-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
:root{color-scheme:light;font-family:Mersad,'Helvetica Neue',Arial,sans-serif;color:#494949;background:#e7e7e7;--device-width:440px;--device-height:956px;--card-width:360px;--card-height:521px;--ink:#494949;--muted:#d9d9d9}
*{box-sizing:border-box}html,body{margin:0;min-width:0;min-height:100%;width:100%}body{display:flex;justify-content:center;align-items:flex-start;overscroll-behavior:none}button,input{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible{outline:2px solid #5143ed;outline-offset:3px}[hidden]{display:none!important}
#experience{position:relative;width:min(100%,var(--device-width));height:var(--device-height);flex:none;overflow:hidden;background:#d4d2d2;isolation:isolate}#scene{display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:grab}#scene:active{cursor:grabbing}#scene:focus-visible{outline:2px solid #5143ed;outline-offset:-4px}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;padding:0;border-radius:50%;flex:none}.icon-button img{display:block;flex:none;pointer-events:none}.icon-button:hover{background:#ffffff26}.icon-button:active{background:#ffffff44}.app-header{position:absolute;top:59px;left:40px;width:365px;height:42px;display:flex;align-items:center;justify-content:space-between;z-index:3}.app-header h1{font-size:16px;font-weight:600;line-height:24px;letter-spacing:0;margin:0;color:#111214}.qr-button{margin-right:-9px}.header-divider{position:absolute;top:104px;left:40px;display:block;pointer-events:none}
.bottom-nav{position:absolute;left:39px;bottom:32px;width:362px;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-radius:100px;background:#ffffff03;box-shadow:inset 0 1px #ffffffd9,inset 0 -1px #ffffffb3;backdrop-filter:blur(7px);z-index:4}.home-indicator{position:absolute;bottom:8px;left:153px;width:134px;height:5px;border-radius:100px;background:#fff;z-index:4}
.loading{position:absolute;inset:0;display:grid;place-items:center;background:#d4d2d2;transition:opacity .6s;pointer-events:none;z-index:8}.loading i{width:9px;height:9px;border-radius:50%;background:#1800ff}.loading.done{opacity:0}.error{position:absolute;inset:35% 12%;text-align:center;font-size:14px;line-height:2;z-index:10}
/* Conversation measurements from Figma 145:4299; responsive overrides below. */
.bubble-message{position:absolute;left:40px;top:217px;width:360px;height:521px;max-width:none;max-height:none;margin:0;padding:0;overflow:visible;border-radius:19px;border:1px solid #d9d9d9;color:var(--ink);background:linear-gradient(140deg,#ffffff13,#30342e03 52%,#ffffff28);box-shadow:inset 0 1px 1px #ffffff50;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);outline:none;isolation:isolate;z-index:3;font-family:Mersad,'Helvetica Neue',sans-serif}
.bubble-message::backdrop{background:transparent}.conversation-header{position:absolute;left:24px;top:14px;width:312px;height:72px}.conversation-header h2{font-size:26px;font-weight:800;line-height:36px;margin:0;letter-spacing:0}.member-meta{position:absolute;left:0;top:34px;display:flex;align-items:center;gap:2px;font-size:10px;line-height:12px;font-weight:400}.member-meta .door-slot{width:11px;height:12px;display:grid;place-items:center}.activity-meta{position:absolute;left:0;top:51px;display:flex;align-items:center;gap:4px;font-size:10px;line-height:12px}.message-close{position:absolute;top:23px;right:12px}.conversation-divider{position:absolute;left:7px;top:91px;pointer-events:none}
.chat-thread{position:absolute;left:4px;top:97px;width:347px;height:350px;overflow:auto;scrollbar-width:none;overscroll-behavior:contain}.chat-thread::-webkit-scrollbar{display:none}.received-row{display:flex;gap:10px;align-items:flex-start;padding:5px 0 0 5px}.avatar-slot{position:relative;width:34px;height:34px;flex:none}.avatar-image{position:absolute;left:0;top:0;width:33.643px;height:33.643px;object-fit:cover;mask-image:url('./assets/figma/imgUnsplashDItYlc26ZVi.svg');mask-size:33.308px 33.307px;mask-position:.269px .29px;mask-repeat:no-repeat}
.message-bubble{position:relative;width:215px;min-height:282px;flex:none;padding:8px 8px 27px;border:1px dashed #7a8176cc;border-radius:14px;background:#494949b3;color:#d9d9d9;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}.message-body{font-size:12px;line-height:14.1px;font-weight:300;letter-spacing:-.08px;margin:0}.message-body p{margin:0}.message-body p+p{margin-top:2px}.message-body[data-visibility="blurred"]{filter:blur(4px);user-select:none}.message-body[data-visibility="hidden"]{visibility:hidden}.message-footer{position:absolute;left:9px;right:9px;bottom:8px;display:flex;align-items:center;justify-content:space-between;height:10px;font-family:Mersad,sans-serif;font-size:8px;line-height:10px}.visibility-toggle{display:flex;align-items:center;justify-content:space-between;gap:3px;width:36px;height:20px;margin:0;padding:0;border:0;background:transparent}.visibility-slot{width:10px;height:10px;display:grid;place-items:center}.time-meta{display:flex;align-items:center;gap:11px}.lifetime{display:flex;align-items:center;gap:3px}
.composer{position:absolute;left:12px;bottom:14px;width:334px;height:37px;display:flex;gap:3px;align-items:center}.composer-field{position:relative;display:flex;align-items:center;width:294px;height:37px;border-radius:70px;background:#494949b3;border:1px dashed #7a817699}.composer input[type="text"]{display:block;min-width:0;width:224px;height:35px;padding:0 10px 0 17px;background:transparent;border:0;color:#f3f3f3;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:10px;line-height:14px;outline-offset:-2px}.composer input::placeholder{font-size:8px;color:#d9d9d9;opacity:1}.composer-tool{display:grid;place-items:center;position:absolute;top:0;width:26px;height:35px;border:0;border-radius:12px;padding:0;background:transparent}.attach-button{right:33px}.record-button{right:7px}.record-button[data-recording="true"]{background:#a8343455}.buzz-button{position:relative;width:37px;height:37px;padding:0;border:0;border-radius:50%;background:transparent;display:grid;place-items:center}.buzz-background{position:absolute;inset:0;width:37px;height:37px}.buzz-icon{position:relative;z-index:1}.buzz-button.buzzing{animation:buzz .32s linear}.sent-message{margin:12px 7px 0 54px;padding:10px 12px;border:1px solid #ffffff50;border-radius:14px;background:#ffffff59;font-family:'Helvetica Neue',Arial,sans-serif;font-size:12px;line-height:16px;overflow-wrap:anywhere}.sent-message img{max-width:100%;height:auto;border-radius:8px}.sent-message audio{width:100%;height:34px}.sent-message a{color:#494949}
.utility-panel{position:absolute;left:40px;bottom:92px;width:360px;padding:20px;background:#efedf1e6;border:1px solid #ffffffcc;border-radius:19px;backdrop-filter:blur(22px);box-shadow:0 12px 36px #49494914;z-index:7}.utility-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.utility-heading h2{font-size:18px;font-weight:600;margin:0}.utility-heading button{font-size:11px;background:transparent;border:0;padding:8px;color:#494949}.connection-row,.setting-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;background:transparent;border:0;border-bottom:1px solid #49494916;padding:7px 0;color:#494949;font-size:13px}.connection-row span{font-size:10px;color:#777}.setting-row svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.code-value{font-size:24px;letter-spacing:3px;margin:16px 0;text-align:center}.copy-code{width:100%;height:38px;border-radius:20px;border:1px solid #fff;background:#ffffff70;color:#494949}.notice{position:absolute;bottom:96px;left:40px;width:360px;text-align:center;padding:10px 14px;border-radius:18px;background:#efedf1de;backdrop-filter:blur(10px);font-size:12px;opacity:0;pointer-events:none;z-index:9;transition:opacity .15s}.notice.visible{opacity:1}@keyframes buzz{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-14deg)}40%,80%{transform:rotate(14deg)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.message-body{letter-spacing:normal;line-height:14.1px}
/* Match Figma's dark difference-blended navigation on this live canvas. */
.bottom-nav .icon-button:not(:first-child){mix-blend-mode:normal}
.bottom-nav .icon-button:not(:first-child) img{filter:invert(1);opacity:.8}

/* Keep the 440 × 956 art direction while fitting smaller screens and keyboards. */
#experience{--side:max(20px,calc((100% - 360px)/2));--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
.app-header{left:var(--side);width:calc(100% - 2 * var(--side) + 5px);top:max(24px,calc(var(--safe-top) + 12px))}
.header-divider{left:var(--side);width:calc(100% - 2 * var(--side));top:max(69px,calc(var(--safe-top) + 57px))}
.bottom-nav{left:50%;transform:translateX(-50%);width:min(362px,calc(100% - 40px));bottom:max(24px,var(--safe-bottom));padding:0 20px;-webkit-backdrop-filter:blur(7px)}
.home-indicator{left:50%;transform:translateX(-50%);bottom:8px}
.bubble-message{left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,calc(100% - 40px));height:min(521px,calc(100% - 194px - var(--safe-top) - var(--safe-bottom)))}
.conversation-header{width:calc(100% - 48px)}
.conversation-header h2{font-size:clamp(21px,6vw,26px)}
.conversation-divider{width:calc(100% - 16px)}
.chat-thread{width:calc(100% - 12px);height:auto;bottom:74px}
.message-bubble{max-width:calc(100% - 54px)}
.composer{width:calc(100% - 26px)}
.composer-field{width:auto;flex:1;min-width:0}
.composer input[type="text"]{width:calc(100% - 66px);font-size:16px}
.composer input::placeholder{font-size:10px}
.buzz-button{flex:none}
.utility-panel,.notice{left:50%;transform:translateX(-50%);width:min(360px,calc(100% - 40px));bottom:calc(max(24px,var(--safe-bottom)) + 60px);max-height:calc(100% - 170px);overflow:auto}
@media(min-width:481px){.app-header{top:59px}.header-divider{top:104px}.bottom-nav{bottom:32px}}
@media(max-width:480px){#experience{height:100svh;height:100dvh;min-height:480px}body{overflow-x:hidden}.home-indicator{display:none}}