:root{color-scheme:light;--q-bg:#e7e7e7;--q-surface:#f4f4f4c9;--q-solid:#f0f0f0;--q-ink:#222222;--q-muted:#616161;--q-line:#25252516;--q-soft:#25252506;--q-active:#fff9;--q-button:#252525;--q-on:#efefef;--q-bubble:#ffffffa6;--q-mine:#dedede;--q-shadow:#2525250e;--client-accent:#dedede!important;--client-background:#ebebeb!important}
:root[data-theme=dark]{color-scheme:dark;--q-bg:#0a0a0a;--q-surface:#181818cc;--q-solid:#161616;--q-ink:#e1e1e1;--q-muted:#a6a6a6;--q-line:#e1e1e118;--q-soft:#ffffff07;--q-active:#ffffff0e;--q-button:#d7d7d7;--q-on:#1b1b1b;--q-bubble:#252525;--q-mine:#d1d1d1;--q-shadow:#0005;--client-accent:#d1d1d1!important;--client-background:#121212!important}
html,body{background:var(--q-bg)!important;color:var(--q-ink)!important}body{font:15px/1.5 'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif!important;background:radial-gradient(ellipse at 30% 0,var(--q-active),transparent 65%),var(--q-bg)!important}.stars{display:none}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--q-muted)!important;outline-offset:3px}::selection{background:var(--q-button);color:var(--q-on)}small{color:var(--q-muted)}
body #app{width:calc(100% - 80px);max-width:1480px;height:calc(100dvh - 108px);margin:76px auto 32px;display:grid;grid-template-columns:326px minmax(0,1fr);border:1px solid var(--q-line);border-top-color:#ffffff55;border-radius:28px;overflow:hidden;background:var(--q-surface);box-shadow:0 20px 70px var(--q-shadow)}.quiet-brand{position:fixed;top:22px;left:max(40px,calc((100vw - 1480px)/2));display:flex;align-items:center;gap:24px;pointer-events:none}.quiet-brand strong{font:600 26px Georgia,serif;letter-spacing:-1px}.quiet-brand span{font-size:12px;color:var(--q-muted);border-left:1px solid var(--q-line);padding-left:24px}.theme-toggle{position:fixed;right:max(40px,calc((100vw - 1480px)/2));top:18px;z-index:25;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--q-line);background:var(--q-active);border-radius:50%;color:var(--q-ink);backdrop-filter:blur(16px)}
#app>aside{background:transparent!important;border-right:1px solid var(--q-line)}#app aside header{height:84px;padding:20px 24px;background:transparent;border:0;box-shadow:none;color:var(--q-ink)}#app aside header b{font:600 21px Georgia,serif;letter-spacing:-.5px}aside header small{font-size:12px;color:var(--q-muted)}aside .logo.small{width:36px;height:36px;border-radius:12px;box-shadow:none}.search{padding:4px 20px 20px}#search{background:var(--q-soft);border:1px solid var(--q-line);border-radius:14px;height:44px;padding:10px 14px;color:var(--q-ink);font-size:13px}input::placeholder,textarea::placeholder{color:var(--q-muted)!important}.users{padding:0 12px 16px}.user{min-height:82px;gap:13px;padding:13px 12px;border-radius:17px;margin:2px 0;background:transparent;color:var(--q-ink)}.user:hover{background:var(--q-soft)}.user.active{background:var(--q-active)!important;box-shadow:inset 0 1px 0 #ffffff20,0 4px 18px var(--q-shadow)}.usertext b{font-weight:600;font-size:14px}.usertext span{font-size:12px;color:var(--q-muted)!important;margin-top:4px}.avatar{width:44px;height:44px;border-radius:50%!important;background:linear-gradient(145deg,var(--q-active),var(--q-soft))!important;color:var(--q-ink)!important;border:1px solid var(--q-line);font-size:16px;font-weight:500}.avatar.online:after{background:var(--q-muted);border-color:var(--q-solid)}.unread,.unread-badge{background:var(--q-button)!important;color:var(--q-on)!important}
#app>.chat{background:radial-gradient(ellipse at 85% 0,var(--q-active),transparent 70%),var(--q-surface)!important}#conversation{grid-template-rows:84px minmax(0,1fr) auto auto}.chathead{padding:18px 26px;background:transparent!important;border:0;box-shadow:none;color:var(--q-ink)}#peerName{font-weight:600;font-size:15px}#peerStatus{color:var(--q-muted);font-size:12px}.actions{gap:8px}.actions button,#back{width:44px;height:44px;border-radius:50%;background:transparent!important;border:1px solid transparent!important;color:var(--q-muted)!important}.actions button:hover,#back:hover{background:var(--q-active)!important}.messages{padding:24px clamp(18px,4vw,64px);gap:8px;scrollbar-gutter:stable}.bubble{max-width:min(78%,540px);background:var(--q-bubble)!important;color:var(--q-ink)!important;border:1px solid var(--q-line);border-radius:19px 19px 19px 5px;padding:11px 15px;box-shadow:0 2px 9px var(--q-shadow)}#messages .bubble.mine{background:var(--q-mine)!important;color:#282828!important;border-radius:19px 19px 5px 19px}.bubble time{font-size:11px;color:var(--q-muted)!important}.bubble.mine time{color:#555555!important}.typing{font-size:12px;color:var(--q-muted)}
#messageForm{margin:6px 24px 22px;padding:8px 10px;border:1px solid var(--q-line);border-top-color:#ffffff40;border-radius:23px;gap:8px;background:var(--q-active)!important;backdrop-filter:blur(22px);box-shadow:inset 0 1px 0 #ffffff20,0 8px 30px var(--q-shadow)}#messageForm textarea{background:transparent!important;border:0!important;color:var(--q-ink);font-size:16px;padding:11px 7px;min-height:44px}#messageForm button,#messageForm .attachment-picker{border:0!important;border-radius:15px!important;background:transparent!important;color:var(--q-muted)!important;box-shadow:none}#messageForm .send{background:var(--q-button)!important;color:var(--q-on)!important;box-shadow:0 3px 10px var(--q-shadow)}#messageForm .recording{background:var(--q-soft)!important;color:var(--q-ink)!important;box-shadow:0 0 0 5px var(--q-soft)!important}
#messages .bubble.audio-bubble,#messages .bubble.audio-bubble.mine,#messages .bubble.document-bubble,#messages .bubble.document-bubble.mine{background:var(--q-mine)!important;color:#2a2a2a!important}.voice-player,.document-name{color:#2a2a2a}.voice-player .voice-play,.document-icon{background:#4c4c4c!important;color:#f1f1f1!important}.voice-wave i{background:#7b7b7b}.voice-wave i.played{background:#363636}.voice-meta,.document-size,#messages .audio-bubble>time,.document-bubble>time{color:#4f4f4f!important}.voice-speed{color:#3b3b3b}.media-status>.voice-player{background:var(--q-mine);border-color:var(--q-line)}.media-status{color:var(--q-muted)}.media-status .voice-delete{color:var(--q-ink)}.media-status .voice-send{background:var(--q-button);color:var(--q-on)}.media-load{background:var(--q-solid);color:var(--q-muted)}#messages .bubble.round-bubble,#messages .bubble.round-bubble.mine{background:transparent!important;border:0;box-shadow:none}.round-ring circle{stroke:#ebebeb}.round-duration,#messages .round-bubble>time{background:#252525bb;color:#efefef!important}#messages .bubble.media-bubble{background:var(--q-solid)!important}
#conversation .round-record-bar{background:var(--q-surface)!important;border-color:var(--q-line);color:var(--q-ink);backdrop-filter:blur(22px)}#conversation .round-record-bar .round-discard{color:var(--q-muted)}#conversation .round-record-bar .round-stop,#conversation .round-record-bar .round-send{background:var(--q-button);color:var(--q-on);box-shadow:0 0 0 5px var(--q-soft)}.round-record-bar .round-lock{background:var(--q-solid);border-color:var(--q-line);color:var(--q-ink)}.round-record-overlay>video{border-color:#d9d9d9}.round-record-overlay.locked .round-lock{background:var(--q-button);color:var(--q-on)}
#auth{color:var(--q-ink);min-height:100dvh;height:auto!important;overflow:auto!important;align-content:safe center;padding:32px 16px!important;gap:24px}.auth .brand h1{font:600 34px Georgia,serif;letter-spacing:-1px}.auth .brand p{color:var(--q-muted);font-size:13px}.auth .logo{width:64px;height:64px;box-shadow:none;border-radius:20px}form#authForm{width:min(390px,calc(100vw - 32px));background:var(--q-surface)!important;border:1px solid var(--q-line);border-radius:26px;box-shadow:0 16px 60px var(--q-shadow);padding:26px}#authForm label{color:var(--q-muted);font-size:13px}#authForm input{margin-top:6px;border:1px solid var(--q-line);background:var(--q-soft);color:var(--q-ink);min-height:48px;border-radius:13px}#authForm .tabs{background:var(--q-soft);border-radius:15px}#authForm .tabs button{min-height:44px;border-radius:12px;color:var(--q-muted)}#authForm .tabs button.active{background:var(--q-active);color:var(--q-ink);box-shadow:0 1px 8px var(--q-shadow)}#authForm .primary{background:var(--q-button)!important;color:var(--q-on)!important;min-height:48px;border-radius:14px}#authForm .error:empty{margin:0;min-height:0}#sessionBoot{background:var(--q-bg)!important;color:var(--q-muted)!important}#sessionBoot strong{color:var(--q-ink)!important}
dialog:not(.media-viewer){background:var(--q-solid)!important;color:var(--q-ink)!important;border:1px solid var(--q-line)!important;border-radius:26px!important;box-shadow:0 24px 80px #0003!important;backdrop-filter:blur(24px)}dialog::backdrop{background:#1818184a;backdrop-filter:blur(7px)}dialog h2{font:600 25px Georgia,serif;letter-spacing:-.5px;color:var(--q-ink)}dialog input,dialog textarea{background:var(--q-soft)!important;color:var(--q-ink)!important;border:1px solid var(--q-line)!important;border-radius:12px!important}dialog label,dialog p,dialog small{color:var(--q-muted)}dialog button{min-height:44px;color:var(--q-ink)}dialog button[type=submit],.public-chat{background:var(--q-button)!important;color:var(--q-on)!important}.polished-profile #closeProfile,.polished-profile .choose-avatar{background:var(--q-soft)!important;color:var(--q-ink)!important}.polished-profile #logout,.polished-profile .profile-button{color:var(--q-muted)!important;border-color:var(--q-line)!important}dialog .public-block{background:var(--q-soft);color:var(--q-ink);border-color:var(--q-line)}.theme-settings{display:none}.quiet-theme-settings{margin:20px 0}.quiet-theme-settings button{width:100%;padding:12px 16px;border:1px solid var(--q-line);border-radius:14px;background:var(--q-soft);text-align:left;color:var(--q-ink)}.empty{color:var(--q-muted)}.empty h2{color:var(--q-ink);font:500 24px Georgia,serif}.empty p{font-size:13px}.empty .planet{color:var(--q-muted);font-size:50px;filter:none}.chat-load-status{background:var(--q-solid);color:var(--q-muted);border-color:var(--q-line)}
@media(max-width:1000px){body #app{width:calc(100% - 32px);grid-template-columns:290px minmax(0,1fr)}.quiet-brand{left:20px}.theme-toggle{right:20px}.quiet-brand span{display:none}.messages{padding-inline:18px}}
@media(max-width:700px){body #app{width:100%;height:100dvh;margin:0;border:0;border-radius:0;grid-template-columns:1fr}.quiet-brand{display:none}.theme-toggle{top:18px;right:64px;width:44px;height:44px}.theme-toggle.in-chat{display:none}#app aside header{height:84px;padding:20px 16px}aside header b{font-size:18px!important}#app>.chat{background:var(--q-solid)!important}#app>aside{background:var(--q-solid)!important}.chathead{padding:12px 10px;gap:8px}.chathead .avatar{width:38px;height:38px}.actions{gap:2px}#conversation{grid-template-rows:74px minmax(0,1fr) auto auto}#messageForm{margin:4px 10px calc(10px + env(safe-area-inset-bottom));padding:7px;gap:6px}.messages{padding:16px 12px}.bubble{max-width:86%}.users{padding-inline:10px}dialog:not(.media-viewer){max-height:calc(100dvh - 24px);overflow:auto}.auth .brand{margin-top:28px}}
@media(max-width:360px){#authForm{padding:22px 12px!important}.chathead .avatar{width:32px;height:32px}.chathead{gap:5px}#peerName{font-size:14px}}
@media(prefers-reduced-motion:no-preference){.user,button,input,textarea{transition:background .18s,color .18s,border-color .18s,box-shadow .18s}dialog[open]:not(.media-viewer){animation:quiet-open .24s cubic-bezier(.22,1,.36,1)}.theme-toggle:active{transform:scale(.94)}@keyframes quiet-open{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}