:root{color-scheme:light;font-family:system-ui,sans-serif;color:#133b34;background:#e9f0eb}*{box-sizing:border-box}body{margin:0}[hidden]{display:none!important}main{max-width:720px;margin:auto;min-height:100dvh;background:#f8faf6}button,input{font:inherit}button,.attach{border:0;border-radius:12px;background:#1b6554;color:white;padding:10px 14px;cursor:pointer;min-height:44px}button:disabled{opacity:.55}input{width:100%;border:1px solid #b7cfc3;border-radius:12px;padding:12px;background:white;color:#133b34}h1,h2,p{margin:0}#intro{position:fixed;inset:0;z-index:2;background:#123b34;display:grid;place-content:center;justify-items:center;gap:16px;color:white;font-size:2rem;animation:reveal 1s ease forwards}#intro img,#join>img{width:104px;border-radius:25px}@keyframes reveal{0%,70%{opacity:1}100%{opacity:0;visibility:hidden}}@media(prefers-reduced-motion:reduce){#intro{display:none}}#join{width:min(100%,420px);padding:12vh 26px 24px;margin:auto}#join h1{margin-top:14px}#join p{margin:8px 0 26px}#join form,#join label{display:grid;gap:8px}#join form{gap:16px}#chat{height:100dvh;display:flex;flex-direction:column}header,#send{display:flex;align-items:center;gap:12px;padding:12px;background:white}header img{width:48px;border-radius:13px}header h1{font-size:1.22rem}#invite{margin-left:auto}button.sub{color:#52695e;background:none;padding:0;min-height:26px;font-size:.88rem}#feed{flex:1;overflow:auto;padding:16px 12px}#older{display:block;margin:0 auto 12px}#messages{display:grid;gap:10px}.message{justify-self:start;max-width:min(85%,390px);background:white;border-radius:4px 16px 16px;padding:9px 12px;box-shadow:0 1px 3px #133b3412;overflow-wrap:anywhere}.mine{justify-self:end;background:#d4eddf;border-radius:16px 4px 16px 16px}.name{display:block;color:#1b6554;font-size:.83rem;margin-bottom:4px}.message p{white-space:pre-wrap}.message img,.message video{max-width:100%;max-height:360px;display:block;border-radius:8px}time{display:block;text-align:right;color:#51665c;font-size:.75rem;margin-top:4px}#send{padding-bottom:max(12px,env(safe-area-inset-bottom))}#send input{min-width:0}.attach{position:relative;display:grid;place-items:center;padding:0;width:44px;flex:none;font-size:1.5rem}.attach input{position:absolute;inset:0;opacity:0;cursor:pointer}.attach:focus-within{outline:2px solid #1b6554;outline-offset:2px}#status{position:fixed;bottom:82px;left:50%;transform:translateX(-50%);width:max-content;max-width:90vw;background:#123b34;color:white;padding:10px 14px;border-radius:10px;pointer-events:none}dialog{width:min(90vw,400px);border:0;border-radius:16px;padding:20px;color:#133b34}dialog::backdrop{background:#133b3466}#dialogBody{margin:15px 0;display:grid;gap:10px}