/* Full-screen room workspace. The left panel describes the one active room. */
body.in-room{overflow:hidden;background:#0c1013}
body.in-room main{max-width:none;width:100%;padding:0;margin:0}
#chat{display:block;width:100%;height:100dvh;min-height:0;gap:0}
.chat-shell{display:grid;grid-template-columns:minmax(290px,350px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100%;min-height:0;max-width:1800px;margin:auto;background:#151a1d;box-shadow:0 0 90px #0006}
.room-sidebar{display:flex;flex-direction:column;min-width:0;min-height:0;background:#171c1f;border-right:1px solid #303a3d}
.sidebar-brand{height:72px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;background:#20272a}
.sidebar-heading{display:flex;align-items:baseline;justify-content:space-between;padding:26px 22px 14px}
.sidebar-heading h2{margin:0;font-size:26px;letter-spacing:-.04em}
.sidebar-heading span,.sidebar-label{font-size:11px;color:#9daaa8}
.sidebar-label{margin:0 0 13px;font-weight:800;letter-spacing:.13em}
.room-tile{display:flex;align-items:center;gap:13px;width:100%;padding:15px 20px;border:0;border-left:3px solid #caf56d;background:#27302e;color:#f1f6ef;text-align:left}
.room-avatar{width:43px;height:43px;flex:none;display:grid;place-items:center;border-radius:50%;background:#caf56d;color:#203017;font-weight:900;font-size:23px;letter-spacing:-.1em}
.room-tile-text{min-width:0;display:flex;flex-direction:column;gap:1px}
.room-tile-text strong{font-size:15px}
.room-tile-text small{font-size:12px;margin:0;color:#b9c8bf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-tile-live{margin-left:auto;color:#caf56d;font-size:11px;font-weight:700}
.room-tile-live::before{content:'';display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:currentColor}
.sidebar-scroll{min-height:0;overflow:auto;padding:6px 20px 16px}
.sidebar-section{padding:18px 0 20px;border-bottom:1px solid #303a3d}
.sidebar-section .room-info{margin:0;padding:0;border:0;display:flex;align-items:center}
.sidebar-section .room-info>div{display:flex;flex-direction:column}
.sidebar-section .room-info span{font-size:13px;color:#b8c5bd}
.sidebar-section #clock{font-size:35px;font-weight:650;line-height:1.2;color:#f0f6ea}
.timer-icon{font-size:30px!important;color:#caf56d!important}
.sidebar-section .invite-hint{font-size:12px;margin:8px 0 0;color:#9eaca5}
.sidebar-section .invite-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;max-width:none}
.sidebar-section .invite-actions #copy{grid-column:1/-1;width:100%;min-height:46px;font-size:14px;color:#17210c}
.sidebar-section .invite-actions .outline{min-height:43px;padding:8px 12px;width:100%}
.sidebar-section .external-shares{display:flex;gap:8px 14px;margin-top:17px}
.sidebar-section .external-shares a,.sidebar-section .external-shares button{font-size:12px;text-decoration:none;color:#caf56d}
.share-caution{color:#8d9b94;font-size:11px;line-height:1.45;margin:9px 0 0}
.sidebar-privacy{display:grid;gap:12px}
.sidebar-privacy .sidebar-label{margin-bottom:1px}
.sidebar-privacy .check{font-size:13px;color:#d4ddd3}
.sidebar-privacy #inspect-toggle,.sidebar-privacy .danger-link{text-align:left;width:max-content;padding:4px 0;font-size:12px}
.sidebar-privacy #inspect-toggle{color:#caf56d}
.sidebar-foot{margin-top:auto;display:flex;align-items:flex-start;gap:10px;padding:14px 20px;border-top:1px solid #303a3d;color:#9caaa4}
.sidebar-foot .lock-symbol{font-size:23px;color:#caf56d;line-height:1}
.sidebar-foot p{font-size:11px;line-height:1.45;margin:0}
.icon-button.mobile-only{display:none}
.conversation-pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:#111819}
.chat-head{height:72px;flex:none;justify-content:flex-start;gap:14px;padding:0 23px;background:#20272a;border-bottom:1px solid #303a3d}
.chat-avatar{width:41px;height:41px}
.chat-heading{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.chat-heading strong{font-size:16px}
.chat-heading .presence,.chat-heading .typing{font-size:11px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#a8b7ae}
.chat-heading .typing{color:#caf56d}
.chat-head-actions{margin-left:auto;gap:12px}
.icon-button{display:grid;place-items:center;flex:none;width:42px;height:42px;border:0;border-radius:50%;background:transparent;color:#cad5ce;font-size:25px;line-height:1}
.icon-button:hover,.icon-button:focus-visible{background:#ffffff18}
.chat-head .quiet{color:#d5dfd6;white-space:nowrap}
.chat-notice{align-self:center;max-width:calc(100% - 32px);margin:19px 16px 7px;padding:8px 14px;border:1px solid #4c5444;border-radius:8px;background:#242d28;color:#c7d6c2;text-align:center;font-size:11px;line-height:1.4}
.chat-notice span{color:#caf56d;font-size:15px;margin-right:4px}
#messages{min-height:0;padding:17px clamp(22px,7vw,100px) 24px;gap:6px;background-color:#111819;background-image:radial-gradient(#c0d6bd0b .8px,transparent .8px);background-size:28px 28px}
.bubble{max-width:min(74%,560px);padding:8px 11px 6px;border-radius:9px 9px 9px 3px;background:#273139;border-color:#36434a;box-shadow:0 2px 4px #0003}
.bubble.mine{border-radius:9px 9px 3px 9px;background:#344d37;color:#f4faef;border-color:#45644a}
.bubble.mine .sender-badge{color:#caf56d}
.bubble.mine .bubble-body a{color:#b1dbff}
.bubble time{font-size:10px;margin-top:2px;color:#b7c5bc}
.bubble-actions{gap:10px;margin-top:3px;opacity:.7}
.bubble-actions button{font-size:10px}
.bubble:hover .bubble-actions,.bubble:focus-within .bubble-actions{opacity:1}
#empty{max-width:380px;padding:30px 26px;border:1px solid #3b4d45;border-radius:16px;background:#202a28;color:#c1ccc3;box-shadow:0 14px 40px #0003}
#empty h2{margin:5px 0 8px;color:#f3f9f0;font-size:23px;font-weight:700}
#empty p{font-size:13px;line-height:1.5}
#empty .primary{display:inline-flex;min-height:43px;margin:12px auto 0;padding:9px 16px}
#empty .empty-symbol{font-size:32px}
.conversation-footer{flex:none;padding:6px clamp(14px,3vw,38px) max(12px,env(safe-area-inset-bottom));background:#20272a;border-top:1px solid #303a3d}
.conversation-footer #status{min-height:0;margin:0 0 3px;color:#a9b8ab;font-size:10px}
.conversation-footer #chat-error:empty,.conversation-footer .attachment-row #image-name:not(.selected-image){display:none}
.conversation-footer .attachment-row{padding:0 0 6px}
.conversation-footer form{display:flex;align-items:center;gap:7px;padding:0;border:0}
.conversation-footer textarea{resize:none;min-height:44px;max-height:160px;border:0;border-radius:9px;background:#343d3f;color:#f8fbf7;padding:10px 13px;line-height:1.5}
.conversation-footer textarea::placeholder{color:#bac5c0}
.conversation-footer form .icon-button{width:40px;height:40px;font-size:25px}
.conversation-footer form .send-button{width:43px;height:43px;min-height:43px;padding:0;border-radius:50%;font-size:19px}
.conversation-footer .reply-draft{margin:4px 0 7px}
.emoji-picker{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;padding:9px 4px 0}
.emoji-picker button{border:0;background:transparent;border-radius:8px;padding:5px;font-size:22px}
.emoji-picker button:hover{background:#ffffff18}
.room-search{margin:8px 20px 0;flex:none}
.growth{margin:4px 0 9px}
@media(max-width:760px){
 body.in-room main{padding:0}#chat{height:100dvh}.chat-shell{display:block}
 .room-sidebar{position:fixed;z-index:20;inset:0 auto 0 0;width:min(340px,calc(100vw - 46px));height:100dvh;box-shadow:20px 0 60px #0009;transform:translateX(-110%);visibility:hidden;transition:transform .2s ease,visibility .2s}
 .sidebar-open .room-sidebar{transform:translateX(0);visibility:visible}
 .sidebar-open::before{content:'';position:fixed;inset:0;z-index:19;background:#0009}
 .icon-button.mobile-only{display:grid}.conversation-pane{height:100dvh}.chat-head{height:62px;padding:0 10px;gap:8px}
 .chat-head .chat-avatar{width:36px;height:36px;font-size:19px}.chat-head-actions{gap:2px}.chat-head .quiet{font-size:12px;padding:8px}.chat-head .icon-button{width:35px;height:35px}
 .chat-notice{margin:10px 12px 2px;padding:6px 10px;font-size:10px}#messages{padding:12px 13px 20px}
 .bubble{max-width:88%;font-size:14px}.bubble-actions{opacity:1}
 .conversation-footer{padding:4px 7px max(8px,env(safe-area-inset-bottom))}.conversation-footer form{gap:3px}.conversation-footer form .icon-button{width:35px;height:35px}.conversation-footer textarea{min-height:42px;padding:9px}.conversation-footer form .send-button{width:38px;height:38px;min-height:38px;font-size:16px}.room-search{margin:5px 8px 0}.room-search input{width:100%}
}
@media(prefers-reduced-motion:reduce){.room-sidebar{transition:none}}
@media(prefers-color-scheme:light){
 body.in-room{background:#d8e4d6}.chat-shell{background:#fff}.room-sidebar{background:#f7faf5;border-color:#d4e2d1}.sidebar-brand,.chat-head,.conversation-footer{background:#edf3ea;border-color:#d3dfd1}
 .sidebar-heading span,.sidebar-label,.sidebar-section .room-info span,.sidebar-section .invite-hint,.sidebar-foot,.share-caution{color:#5d705e}.room-tile{background:#e1efd9;color:#1d3220}.room-tile-text small{color:#4c6650}.room-tile-live{color:#446d21}.sidebar-section,.sidebar-foot{border-color:#d3dfd1}.sidebar-section #clock,.chat-heading strong{color:#1b3020}.sidebar-foot p{color:#526851}.sidebar-privacy .check{color:#2a432e}
 .conversation-pane{background:#e8f1e6}.chat-heading .presence{color:#4b6551}.chat-head .quiet,.icon-button{color:#304c35}.chat-notice{background:#e8f2df;border-color:#c7d9bd;color:#486248}#messages{background-color:#e8f1e6;background-image:radial-gradient(#395e3316 .8px,transparent .8px)}.bubble{background:#fff;border-color:#d5ded5;color:#1e3123}.bubble.mine{background:#d5edbd;border-color:#bed8a3;color:#203621}.bubble.mine .sender-badge{color:#315823}.bubble.mine .bubble-body a{color:#165e8b}.bubble time{color:#536755}#empty{background:#fff;border-color:#d2e1cb;color:#4f6752}#empty h2{color:#203721}.conversation-footer #status{color:#526a55}.conversation-footer textarea{background:#fff;color:#18301d}.conversation-footer textarea::placeholder{color:#647a68}.emoji-picker button:hover,.icon-button:hover{background:#1b5b1b14}
}

/* The landing screen shows the actual room layout before someone creates one. */
main:has(#home:not([hidden])){max-width:1160px}
#home .site-head{padding-bottom:18px;border-bottom:1px solid #303a3d}
#home .hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,1.05fr);gap:30px;align-items:center;padding-top:54px}
#home .hero-copy h1{font-size:clamp(48px,5.3vw,72px)}
#home .hero-copy .lede{font-size:18px;max-width:520px}
#home .hero-points{max-width:520px}
#home .setup{max-width:720px;margin:58px auto 0}
.hero-preview{height:420px;display:grid;grid-template-columns:175px minmax(0,1fr);overflow:hidden;border:1px solid #455347;border-radius:17px;background:#101819;color:#f4f4f1;box-shadow:0 25px 70px #0007;transform:rotate(1deg)}
.preview-sidebar{background:#1b2325;border-right:1px solid #34413a;padding:0 10px}
.preview-brand{height:55px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #38433d;font-size:10px;letter-spacing:.13em}
.preview-brand .mark{width:25px;height:25px;font-size:17px}
.preview-label{display:block;margin:19px 8px 12px;color:#aab6ad;font-size:9px;font-weight:800;letter-spacing:.14em}
.preview-room{display:flex;gap:8px;align-items:center;margin:0 -4px;padding:10px 6px;border-left:2px solid #caf56d;background:#2b3631}
.preview-room .room-avatar,.preview-top .room-avatar{width:29px;height:29px;font-size:16px}
.preview-room span:nth-child(2),.preview-top span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.preview-room strong{font-size:10px;white-space:nowrap}.preview-room small,.preview-top small{font-size:9px;color:#aebeb3;margin:0}
.preview-room i{width:5px;height:5px;border-radius:50%;background:#caf56d;margin-left:auto}
.preview-side-note{display:flex;flex-direction:column;gap:2px;padding:22px 8px;color:#a9b8aa}
.preview-side-note span{font-size:20px;color:#caf56d}.preview-side-note strong{font-size:20px;color:#f4f8f0}.preview-side-note small{font-size:9px}
.preview-chat{display:flex;flex-direction:column;min-width:0}
.preview-top{height:55px;flex:none;display:flex;align-items:center;gap:9px;padding:0 12px;background:#222b2d}
.preview-top strong{font-size:11px}
.preview-messages{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:10px;padding:22px 13px;background-color:#11191a;background-image:radial-gradient(#c0d6bd0b .8px,transparent .8px);background-size:22px 22px}
.preview-info{align-self:center;padding:4px 8px;border-radius:6px;background:#324038;color:#cbdac8;font-size:9px}
.preview-bubble{max-width:83%;padding:9px 10px 5px;border:1px solid #40504b;border-radius:9px 9px 9px 2px;background:#29373a;color:#f2f7ef;font-size:10px;line-height:1.35}
.preview-bubble.preview-mine{align-self:flex-end;background:#3c593c;border-color:#4e704e;border-radius:9px 9px 2px 9px}
.preview-bubble small{display:block;text-align:right;color:#c1d1c2;font-size:8px;margin:4px 0 0}
.preview-compose{height:49px;display:flex;align-items:center;gap:9px;padding:0 12px;background:#222b2d;color:#b7c5bc;font-size:10px}
.preview-compose span:first-child{font-size:20px}.preview-compose span:nth-child(2){flex:1;padding:9px;background:#364140;border-radius:6px}.preview-compose b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#caf56d;color:#263a20}
@media(max-width:880px){#home .hero-grid{grid-template-columns:1fr;gap:32px}.hero-preview{width:min(100%,600px);transform:none}#home .setup{margin-top:44px}}
@media(max-width:540px){#home .hero-grid{padding-top:38px}.hero-preview{height:320px;grid-template-columns:120px minmax(0,1fr)}.preview-brand{font-size:8px}.preview-label{margin:14px 4px 8px}.preview-room{gap:4px}.preview-room .room-avatar{width:24px;height:24px;font-size:13px}.preview-room strong{font-size:8px}.preview-room small{font-size:7px}.preview-side-note strong{font-size:15px}.preview-top{height:48px}.preview-messages{padding:12px 9px;gap:6px}.preview-bubble{font-size:8px}.preview-compose{height:42px;padding:0 7px}.preview-compose span:nth-child(2){padding:6px}}
@media(prefers-color-scheme:light){#home .site-head{border-color:#cbd5c8}.hero-preview{border-color:#b7ceb2;box-shadow:0 20px 55px #2b532b24}}