/* bubsup occupies the viewport; only conversation content scrolls. */
:root{--app-height:100dvh;--nav-height:70px;--safe-bottom:env(safe-area-inset-bottom,0px)}
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{height:var(--app-height);display:flex;flex-direction:column;background:#fffef9}header{width:100%;max-width:none;height:64px;min-height:64px;padding:env(safe-area-inset-top,0px) 24px 0;background:#fffef9}main{width:100%;max-width:none;margin:0;padding:0;gap:0;flex:1;min-height:0;display:grid;grid-template-columns:340px minmax(0,1fr);overflow:hidden}.bottom{display:none}.chat{border:0;border-radius:0;box-shadow:none;height:100%;min-height:0;max-height:none}.inboxPanel{border:0;border-right:1px solid #e2e8de;border-radius:0;align-self:stretch;min-height:0;padding:24px 0 0;display:flex;flex-direction:column;overflow:hidden}.inboxPanel #roomList{flex:1;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}#inboxTools{padding:10px 16px;flex-shrink:0}#demoIncoming{display:none}.chathead{padding:14px 20px;flex-shrink:0}.chathead .quiet{min-height:44px}.stage{min-height:0;overscroll-behavior:contain}.composer{flex-shrink:0;padding:12px 18px max(12px,env(safe-area-inset-bottom))}.roomnav,.accountNotice,.session,.hint{display:none}.pooldeck{min-height:0;max-height:62px;flex-shrink:0}.chat:not(.is-pool) .pooldeck,.chat:not(.is-pool) .aimrow label{display:none}.bubblegrid{min-height:100%;align-content:center}.tools{margin-top:7px}.tools button{min-height:44px}.inputrow input{font-size:16px}.appNav{height:calc(var(--nav-height) + var(--safe-bottom));flex-shrink:0;padding:5px 12px calc(5px + var(--safe-bottom));display:flex;justify-content:space-around;align-items:center;border-top:1px solid #e2e8de;background:#fffef9;z-index:16}.appNav button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;min-height:52px;min-width:64px;background:transparent;color:#819084;font-size:11px}.appNav .navIcon{font-size:23px;line-height:28px;min-width:56px;border-radius:20px}.appNav button[aria-current=page]{color:#186b54;font-weight:700}.appNav button[aria-current=page] .navIcon{background:#dcf4d2}.mePanel{display:none;overflow:auto;padding:28px;grid-column:1/-1;background:#f3f6ed}.mePanel h1{font-family:Manrope;margin-top:0}.meActions{display:grid;gap:10px;max-width:600px;margin:0 auto 24px}.meActions button{background:#fffef9;border:1px solid #e0e8d9;min-height:58px;padding:16px;text-align:left;border-radius:16px;font-size:15px}.mePanel .right{display:block;max-width:600px;margin:auto}.mePanel .demo{display:block;width:100%;padding:20px}.mePanel .seatlabel{margin-top:16px}.mePanel .guide{display:block;padding:20px 0}.mePanel .step{display:none}.mePanel .mini{display:block;max-width:none}.mePanel .guide .eyebrow{display:none}.mePanel #installApp{margin-bottom:12px}.mePanel .demo p{display:block}.mePanel .guide .reset{min-height:48px}.mePanel .mini{font-size:12px}.mePanel .demo h3{font-size:16px}body[data-screen=me] .inboxPanel,body[data-screen=me] .chat{display:none}body[data-screen=me] .mePanel{display:block}.appDemoLabel{font-size:10px;color:#73836c;padding:4px 8px;background:#edf2e5;border-radius:8px;margin-left:12px;letter-spacing:0}.toast{bottom:calc(86px + var(--safe-bottom));z-index:50}.overlay{z-index:25}.accountForm select{font:inherit;width:100%;padding:12px;border:1px solid #cddbc7;border-radius:12px;background:white}.mePanel #demoStats{display:block}.topright #about,.topright #contactsBtn,.topright #accountBtn{display:none}
@media(max-width:760px){header{height:calc(62px + env(safe-area-inset-top));min-height:calc(62px + env(safe-area-inset-top));padding-inline:20px}.logo{font-size:26px}.topright #myProfile{display:none}.topright #notifyBtn{display:flex;min-height:44px;min-width:44px}.topright{gap:0}main{display:block;position:relative}.chat{display:none}.inboxPanel,.showInbox .inboxPanel{position:static;inset:auto;box-shadow:none;display:flex;height:100%;padding-top:16px;border:0;z-index:auto}.inboxTitle{padding:0 20px}.inboxTitle h1{font-size:29px}#inboxSummary{margin:8px 20px 14px}.inboxTabs,#closeInbox{display:none!important}#inboxSearch{font-size:16px;padding:14px;margin-top:10px}.chatFilters button{font-size:12px;min-height:36px}.convoRow{padding:18px 20px;min-height:88px}.convoAvatar{width:52px;height:52px;font-size:25px}.convoBody strong{font-size:16px}.convoBody small{font-size:12px}.convoMeta small{font-size:11px}.convoRow.selected{background:transparent}.convoRow:active{background:#eaf1e1}body[data-screen=chat] header,body[data-screen=chat] .appNav,body[data-screen=chat] .inboxPanel{display:none}body[data-screen=chat] .chat{display:flex}.chathead{padding:calc(8px + env(safe-area-inset-top)) 12px 8px;min-height:70px;gap:10px}.chathead strong{font-size:16px}.chathead .avatar{display:grid;width:40px;height:40px}.chathead small{font-size:10px}.chathead .quiet{font-size:0;min-width:44px;padding:8px}.chathead .quiet:after{content:'♫';font-size:23px}.chathead .quiet[aria-pressed=false]:after{content:'♩';opacity:.4}#openInbox{display:block;min-width:44px;min-height:44px;font-size:26px;padding:0}#mobileInboxCount{display:none}.stage{padding:14px 10px}.bubblegrid{grid-template-columns:repeat(2,minmax(0,132px));grid-auto-rows:145px;gap:12px 25px;padding:16px 0}.bubble,.bubble.voice,.bubble.photo,.bubble.video,.bubble.emoji,.bubble.gif{width:120px;height:120px}.composer{padding:10px 12px max(10px,env(safe-area-inset-bottom));}.aimrow{margin-bottom:8px}.tools button{font-size:12px;padding:8px}.tools .record{padding:10px 13px}.inputrow{border-radius:25px}.inputrow .send{border-radius:50%;width:40px;height:40px}.mePanel{height:100%;padding:22px 18px}.mePanel .guide{display:block}.viewer{border-radius:24px;width:100%;max-height:calc(var(--app-height) - 24px);padding:56px 20px 24px}.overlay{padding:12px}.viewer input,.viewer textarea,.viewer select{font-size:16px}.mePanel .demo{border-radius:18px}.mePanel .demo #demoStats{margin-top:12px}.mePanel .seatlabel select{min-height:44px}.appDemoLabel{font-size:9px;margin-left:6px}.pooldeck{padding:8px 12px}.toast{bottom:calc(80px + var(--safe-bottom))}body[data-screen=chat] .toast{bottom:calc(185px + var(--safe-bottom))}}
@media(max-height:550px){.bubblegrid{align-content:start}.chathead{min-height:52px}.pooldeck{display:none}.composer{padding-top:6px}.aimrow{margin-bottom:4px}}
/* Compact bubbles: three across on phones, with the full message on tap. */
.bubblegrid{grid-template-columns:repeat(auto-fit,96px);grid-auto-rows:112px;gap:16px 20px;align-content:center;padding:18px 4px}
.bubble,.bubble.voice,.bubble.photo,.bubble.video,.bubble.emoji,.bubble.gif{width:96px;height:96px;padding:9px 5px}
.bubble .symbol{font-size:24px;height:26px;line-height:26px;margin-bottom:5px}.bubble .waves{height:26px;margin-bottom:5px;gap:2px}.bubble .waves i{width:2px}.bubble strong{display:none}.bubble small{font-size:10px;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bubble small:last-child{display:none}.bubble:before{width:23px;height:8px;top:13px;left:15px}
@media(max-width:760px){.bubblegrid{grid-template-columns:repeat(3, minmax(0,96px));grid-auto-rows:108px;gap:14px 12px;padding:16px 0}.bubble,.bubble.voice,.bubble.photo,.bubble.video,.bubble.emoji,.bubble.gif{width:90px;height:90px}.bubble small{max-width:79px}}
@media(max-width:350px){.bubblegrid{gap:12px 6px}.bubble,.bubble.voice,.bubble.photo,.bubble.video,.bubble.emoji,.bubble.gif{width:84px;height:84px}.bubble small{font-size:9px;max-width:74px}}
@media(max-height:550px){.bubblegrid{align-content:start}}

.bubble small.unreadCue:last-child{display:block;font-size:8px;margin-top:3px;opacity:.85}

/* Keep the app at its intended scale while allowing one-finger scrolling. */
html,body{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-user-select:none;user-select:none}input,textarea{touch-action:manipulation;-webkit-user-select:text;user-select:text}
@media(max-width:760px){input,textarea,select{font-size:16px!important}}

#takePhoto{min-width:40px;font-size:20px;padding:6px}#cameraPreview{display:block;margin:16px auto;object-fit:contain;max-height:45dvh}#cameraError{color:#a64232}.tools{gap:2px}@media(max-width:350px){.tools button{font-size:10px;padding:6px}.tools .record{padding:10px 8px}#takePhoto{min-width:34px;font-size:18px}}

body[data-gate=boot] header,body[data-gate=boot] main,body[data-gate=boot] .appNav,body[data-gate=boot] .bottom{visibility:hidden}
body[data-gate=phone] header,body[data-gate=phone] main,body[data-gate=phone] .appNav,body[data-gate=phone] .bottom{display:none!important}
body[data-gate=phone]{background:#f4f1e8}
body[data-gate=phone] .overlay{z-index:40;background:#f4f1e8;backdrop-filter:none;padding:0;align-items:stretch}
body[data-gate=phone] .viewer{width:100%;max-width:480px;height:100%;max-height:none;margin:0 auto;border-radius:0;background:#f4f1e8;box-shadow:none;text-align:left;padding:max(28px,env(safe-area-inset-top)) 22px max(28px,env(safe-area-inset-bottom))}
html[data-layout=split] body[data-gate=phone] .overlay{align-items:center;padding:24px}
html[data-layout=split] body[data-gate=phone] .viewer{height:auto;border-radius:28px;background:#fffef9;box-shadow:0 24px 70px #20372d22;padding:40px 34px}
body[data-gate=phone] #accountClose{display:none!important}
body[data-gate=phone] .accountForm input,body[data-gate=phone] .accountForm select{font-size:16px;min-height:48px}

html[data-layout=stack] header{height:calc(62px + env(safe-area-inset-top));min-height:calc(62px + env(safe-area-inset-top));padding-inline:16px}
html[data-layout=stack] .logo{font-size:26px}
.logo img{width:34px;height:34px;border-radius:10px;display:block;flex:none}
.logo .logoWord{color:#24124f!important;letter-spacing:-.8px}
html[data-layout=stack] .logo img{width:30px;height:30px;border-radius:8px}
html[data-layout=stack] .topright #myProfile{display:none}
html[data-layout=stack] .topright #notifyBtn{display:flex;min-height:44px;min-width:44px}
html[data-layout=stack] main{display:block;position:relative}
html[data-layout=stack] .chat{display:none}
html[data-layout=stack] .inboxPanel{position:static;display:flex;height:100%;border:0;box-shadow:none}
html[data-layout=stack] body[data-screen=chat] header,html[data-layout=stack] body[data-screen=chat] .appNav,html[data-layout=stack] body[data-screen=chat] .inboxPanel{display:none}
html[data-layout=stack] body[data-screen=chat] .chat{display:flex}
html[data-layout=stack] .appNav{display:flex}
html[data-layout=stack] #openInbox{display:block;min-width:44px;min-height:44px}
html[data-layout=stack] input,html[data-layout=stack] textarea,html[data-layout=stack] select{font-size:16px!important}
html[data-layout=split] main{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr)}
html[data-layout=split] .inboxPanel,html[data-layout=split] .chat{display:flex}