:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;--bg:#000;--surface:#1c1c1e;--raised:#2c2c2e;--text:#f5f5f7;--muted:#98989f;--line:#303034;--blue:#0a84ff;--pink:#f278a5;--app-height:100dvh;color:var(--text);background:var(--bg)}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--text)}
button,input,textarea{font:inherit;color:var(--text);-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:default}
button:focus-visible,summary:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
input,textarea{font-size:16px;outline:none}
input{width:100%;min-width:0;background:var(--raised);border:1px solid #3a3a3e;padding:12px 13px;border-radius:11px}
input:focus{border-color:var(--pink)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg use{pointer-events:none}
.icon-definitions{position:absolute;width:0;height:0;overflow:hidden}
.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app{position:fixed;top:var(--viewport-top,0px);left:0;right:0;display:grid;grid-template-columns:290px minmax(0,1fr);height:var(--app-height);overflow:hidden}
.icon,.icon-button svg{width:22px;height:22px;flex:none}
.icon-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:50%;color:var(--blue)}
.icon-button:hover{background:#ffffff0b}.icon-button:active{opacity:.6}
.icon-button.accent{color:var(--pink)}
.pink{color:var(--pink)}
.side{min-height:0;display:flex;flex-direction:column;background:#19191b;border-right:1px solid var(--line);padding:25px 14px 16px;gap:20px}
.list-header{display:flex;align-items:center;justify-content:space-between;padding:0 9px}
.list-header h1{font-size:27px;font-weight:750;letter-spacing:-.9px;margin:0}
.conversation-list{flex:1;min-height:0;overflow:auto}
.conversation{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:15px 12px;border-radius:11px;background:transparent;color:var(--text);margin-bottom:4px}.conversation.selected{background:#343035}.conversation:hover{background:#ffffff09}.conversation.selected:hover{background:#343035}
.person-avatar{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(#87878d,#63636a);color:#f1f1f5;overflow:hidden}
.person-avatar svg{width:28px;height:30px;fill:currentColor;stroke:none;margin-top:6px}
.person-avatar.small{width:34px;height:34px}.person-avatar.small svg{width:21px;height:25px}
.conversation-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.conversation-line{display:flex;align-items:center;gap:8px}
.conversation-line strong{font-size:15px;letter-spacing:-.2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-line time{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
.conversation-preview{font-size:13px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#acabb1}
.conversation-entry{position:relative;display:flex;align-items:center;border-radius:11px}.conversation-entry .conversation{padding-right:43px}.conversation-delete{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:40px;color:#ff5c65;opacity:0}.conversation-delete svg{width:18px;height:18px}.conversation-entry:hover .conversation-delete,.conversation-entry:focus-within .conversation-delete{opacity:1}.conversation-entry.closed .conversation-preview{color:#77777e}
.unread-badge{float:right;background:var(--blue);color:#fff;border-radius:20px;min-width:18px;text-align:center;padding:1px 5px;font-size:11px;margin-left:6px}
.list-empty{padding:65px 12px;text-align:center;color:var(--muted);font-size:15px;line-height:1.5}
.large-icon{width:45px;height:45px;stroke-width:1.2;margin:0 auto;color:#6c6c73}
.list-empty p{margin:17px 0}
.text-button{color:var(--blue);font-size:14px;font-weight:500;padding:6px 0}.text-button:hover{opacity:.8}.destructive{color:#ff5c65!important}
.device-footer{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 8px;border-top:1px solid var(--line);font-size:14px;font-weight:650}
.device-footer img{border-radius:7px;flex:none}.device-footer small{display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:3px}.device-footer>.icon{margin-left:auto;color:var(--muted);width:18px;height:18px}
.main{min-width:0;min-height:0;display:flex;flex-direction:column;background:#000}
.app.composing .main>.top,.app.composing .main>.connection-banner,.app.composing .main>.messages,.app.composing .main>.composer{display:none}
.new-message{display:flex;flex-direction:column;height:100%;min-height:0;overflow:auto;background:#000}.new-message-header{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;border-bottom:1px solid var(--line);background:#1c1c1e}.new-message-header h2{margin:0;font-size:22px;font-weight:650;letter-spacing:-.5px}.new-message-header .text-button{font-size:16px}.recipient-row{display:flex;align-items:center;gap:14px;padding:15px 28px;border-bottom:1px solid var(--line)}.recipient-row label{color:var(--muted);font-size:16px}.recipient-row input{flex:1;border:0;background:transparent;padding:5px 0;border-radius:0;color:var(--blue);letter-spacing:.06em}.recipient-row .text-button{font-size:16px}.recipient-row .text-button:disabled{color:#63636a}.recipient-status{margin:12px 28px;font-size:12px;line-height:1.4;color:var(--muted)}.new-message-empty{margin:auto;max-width:390px;text-align:center;padding:25px 24px 80px}.new-message-empty h3{color:#d5d5db;font-size:20px;letter-spacing:-.4px;margin:20px 0 10px}.new-message-empty p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 22px}
.top{position:relative;display:flex;align-items:center;justify-content:flex-end;flex:none;height:78px;padding:8px 22px;background:#1c1c1eea;border-bottom:1px solid var(--line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:2}
.back-button{display:none}
.chat-heading{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - 200px);text-align:left}
.chat-heading .person-avatar{width:37px;height:37px}.chat-heading .person-avatar svg{width:24px;height:27px}
.chat-heading h2{margin:0 0 4px;font-size:15px;font-weight:650;color:var(--text);letter-spacing:-.25px;white-space:nowrap}
.connection-line{display:flex;align-items:center;justify-content:flex-start;gap:5px;white-space:nowrap;font-size:11px;line-height:1.3;color:var(--muted)}
.dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:#63636a}.dot.online{background:#30d158}.dot.wait{background:#ffd60a}
.header-actions{display:flex;gap:5px}.header-actions .icon-button{color:#b1b1b8}
.header-actions .icon-button:last-child{color:var(--blue)}
.connection-banner{display:flex;justify-content:center;align-items:center;gap:12px;padding:9px 18px;background:#161619;color:#a6a6ae;font-size:12px;line-height:1.4;border-bottom:1px solid #242427;flex:none;text-align:center}
.connection-banner .text-button{font-size:12px;white-space:nowrap}
.messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#3b3b40 transparent;-webkit-overflow-scrolling:touch}
.thread{min-height:100%;display:flex;flex-direction:column;padding:24px max(32px,calc((100% - 860px)/2)) 22px;gap:12px}
.thread::before{content:"";flex:1;min-height:0}
.day-divider{align-self:center;font-size:11px;line-height:1.4;color:var(--muted);font-weight:600;margin:4px 0 10px;text-align:center}
.message-row{max-width:min(78%,550px);align-self:flex-start;min-width:0;flex-shrink:0;position:relative}
.message-row.me{align-self:flex-end}.message-row.stacked{margin-top:0}
.bubble{position:relative;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.4;font-size:16px;letter-spacing:-.15px;border-radius:19px;padding:9px 14px;background:#2c2c2e;color:#fff;--bubble:#2c2c2e;width:fit-content;max-width:100%}
.me .bubble{background:#0a84ff;--bubble:#0a84ff;margin-left:auto}
.bubble>span{position:relative;z-index:1}
.tail .bubble::before{content:"";position:absolute;bottom:0;left:-6px;width:18px;height:18px;background:var(--bubble);border-bottom-right-radius:15px}
.tail .bubble::after{content:"";position:absolute;bottom:-1px;left:-21px;width:21px;height:20px;background:#000;border-bottom-right-radius:11px}
.me.tail .bubble::before{left:auto;right:-6px;border-bottom-right-radius:0;border-bottom-left-radius:15px}
.me.tail .bubble::after{left:auto;right:-21px;border-bottom-right-radius:0;border-bottom-left-radius:11px}
.message-meta{display:flex;align-items:center;gap:7px;font-size:11px;line-height:1.4;color:#98989f;margin-top:5px;padding:0 3px}.me .message-meta{justify-content:flex-end}
.receipt{display:inline-flex;align-items:center;gap:4px}.receipt-check{font-size:12px;letter-spacing:-3px;margin-right:3px}.receipt[data-state="Read"] .receipt-check{color:var(--blue)}.receipt.pending .receipt-check{letter-spacing:0;margin-right:0;color:#98989f}
.verification{margin:18px 0 0}.alert-dialog .verification{margin:0 20px 20px}.person-avatar{font-size:20px;font-weight:600}
.bubble.emoji-only{background:transparent;font-size:36px;padding:2px}.tail .bubble.emoji-only::before,.tail .bubble.emoji-only::after{display:none}
.typing-indicator{align-self:flex-start;display:flex;gap:5px;padding:13px 16px;border-radius:20px;background:#2c2c2e;flex:none}
.typing-indicator span{width:7px;height:7px;border-radius:50%;background:#aaaab0;animation:bounce 1.3s infinite ease-in-out}.typing-indicator span:nth-child(2){animation-delay:.15s}.typing-indicator span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{opacity:.5;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
.empty{margin:auto;max-width:330px;padding:32px 12px;text-align:center;color:var(--muted)}
.empty h2{font-size:20px;font-weight:600;letter-spacing:-.5px;color:#d5d5db;margin:20px 0 8px}.empty p{font-size:14px;line-height:1.5;margin:0 0 12px}
.thread:has(.empty)::before{display:none}
.composer{position:relative;flex:none;display:flex;align-items:flex-end;gap:9px;padding:14px max(28px,calc((100% - 860px)/2)) calc(17px + env(safe-area-inset-bottom));background:#000}
.emoji-button{color:#a2a2aa;width:38px;height:40px}
.input-wrap{display:flex;align-items:flex-end;gap:6px;border:1px solid #3b3b40;border-radius:23px;min-width:0;flex:1;background:#111113;padding:5px 5px 5px 0}
.input-wrap:focus-within{border-color:#5a5a63}
.composer textarea{display:block;resize:none;border:0;background:transparent;flex:1;width:100%;min-width:0;padding:5px 10px 5px 15px;margin:0;min-height:30px;max-height:130px;line-height:20px;overflow-y:auto;color:#fff}
.send-button{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;flex:none}.send-button svg{width:21px;height:21px;stroke-width:2.5}
.send-button:disabled{background:#323235;color:#72727a}.send-button:active:not(:disabled){opacity:.7}
.emoji-picker{position:absolute;bottom:calc(100% + 4px);left:max(28px,calc((100% - 860px)/2));width:310px;max-width:calc(100vw - 20px);background:#242427;border:1px solid #3b3b40;border-radius:18px;padding:10px;box-shadow:0 14px 50px #0009;z-index:10}
.emoji-picker-top{display:flex;align-items:center;justify-content:space-between;padding:0 4px;color:#aaaab2;font-size:13px}.emoji-picker-top .icon-button{width:28px;height:28px;color:#aaaab2}.emoji-picker-top svg{width:16px;height:16px}
.emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:6px}.emoji-grid button{height:38px;border-radius:8px;font-size:24px}.emoji-grid button:hover{background:#414145}
.overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:#0008;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#settingsOverlay{z-index:90;justify-content:flex-end;padding:16px}
.settings-panel{width:360px;max-height:100%;overflow-y:auto;background:#1c1c1e;border:1px solid #36363b;border-radius:19px;padding:22px;box-shadow:0 22px 75px #000a;scrollbar-width:thin}
.panel-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px}.panel-top h2{font-size:20px;letter-spacing:-.5px;margin:0}.panel-top .icon-button{width:30px;height:30px;background:#333338;color:#aeafb7}.panel-top svg{width:16px;height:16px}
.sheet-handle{display:none}.settings-section+.settings-section{margin-top:25px;padding-top:22px;border-top:1px solid #36363a}
.settings-section h3{font-size:14px;font-weight:600;margin:0 0 10px}.settings-section p{font-size:13px;color:var(--muted);line-height:1.5;margin:0 0 15px}
.btn{padding:12px 14px;border-radius:11px;background:var(--pink);color:#25151f;font-weight:650;font-size:14px}.btn.alt{background:#333337;color:#eeeef4}.btn:disabled{opacity:.4}.btn.full{width:100%}.btn:hover:not(:disabled){filter:brightness(1.06)}
#setup>.btn{margin-top:12px}.actions{display:flex;gap:8px}.actions .btn{flex:1}.join-section{margin-top:25px}.join-row{display:flex;gap:8px}.join-row .btn{flex:none}
.invitation{padding:16px;margin-top:22px;background:#242428;border-radius:13px}.invitation p{font-size:11px;text-align:center}.invitation input{text-align:center;font-size:21px;letter-spacing:.2em;font-weight:700;background:#111114}
.share-invite{display:flex;align-items:center;justify-content:center;gap:8px}.share-invite svg{width:18px;height:18px}.invitation p.share-hint{margin:12px 0 16px;line-height:1.5}.conversation-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:20px}.conversation-actions #leaveRoom{margin-top:0}.conversation-actions #deleteRoom{display:flex;align-items:center;gap:8px}.conversation-actions .icon{width:17px;height:17px}#detailsNewMessage{margin-top:12px}
#qr{background:#fff;width:max-content;max-width:100%;margin:15px auto;padding:10px;border-radius:9px;color:#222}#qr img,#qr canvas{display:block;max-width:100%}
#leaveRoom{margin-top:22px}.device-line{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;margin-bottom:14px}summary{font-size:12px;color:#a7a7b0;cursor:pointer}.fingerprint{font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;background:#111114;padding:12px;border-radius:10px;color:#b2b2bd;margin:12px 0}
.alert-dialog{width:300px;border:1px solid #47474b;border-radius:15px;background:#28282c;overflow:hidden;text-align:center}.alert-dialog h2{font-size:17px;line-height:1.35;margin:22px 20px 9px;letter-spacing:-.3px}.alert-dialog p{font-size:13px;line-height:1.45;margin:0 20px 20px;color:#bdbdc6}.alert-dialog .fingerprint{margin:12px 16px 20px;font-size:10px}.alert-action{display:block;width:100%;padding:15px;border-top:1px solid #46464c;color:var(--blue);font-size:16px}
.notice{position:fixed;z-index:150;bottom:calc(85px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100% - 28px);padding:11px 10px 11px 16px;background:#303035;border:1px solid #494950;border-radius:14px;box-shadow:0 10px 35px #0008;font-size:13px;line-height:1.4}.notice>.icon-button{width:25px;height:25px;color:#aaaab3}.notice svg{width:15px;height:15px}
@media(max-width:760px){
 .new-message-header{padding:calc(18px + env(safe-area-inset-top)) 20px 18px}.new-message-header h2{font-size:20px}.recipient-row{padding:13px 20px;gap:12px}.recipient-status{margin:12px 20px}.conversation-delete{opacity:1;right:0}.conversation-entry .conversation{padding-right:38px}.conversation-entry{border-radius:0}.new-message-empty{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
 .conversation.selected,.conversation.selected:hover{background:transparent}.conversation{margin-bottom:0}
 .app{display:block}.side{height:100%;width:100%;padding:calc(18px + env(safe-area-inset-top)) 17px calc(15px + env(safe-area-inset-bottom));border:0;background:#000}.side .list-header{padding:0 0 5px}.list-header h1{font-size:32px}.conversation{border-radius:0;border-top:1px solid #242427;border-bottom:1px solid #242427;background:transparent;padding:16px 0}.conversation .person-avatar{width:48px;height:48px}.conversation-line strong{font-size:16px}.conversation-copy{gap:6px}.device-footer{margin-top:15px;padding:12px 0}.conversation-list{min-height:0}
 .app:not(.inbox-open) .side{display:none}.app.inbox-open .main{display:none}.main{height:100%;width:100%}
 .top{height:calc(83px + env(safe-area-inset-top));padding:calc(7px + env(safe-area-inset-top)) 8px 7px;justify-content:space-between}
 .back-button{display:flex;justify-content:flex-start;width:auto;gap:1px;border-radius:8px;font-size:14px}.back-button svg{width:22px;height:24px}.header-actions{gap:0}.header-actions .icon-button{width:33px;height:36px}.header-actions svg{width:19px;height:19px}
 .chat-heading{flex-direction:column;gap:4px;max-width:calc(100% - 190px);text-align:center;top:calc(6px + env(safe-area-inset-top))}.chat-heading .person-avatar{width:31px;height:31px}.chat-heading .person-avatar svg{width:20px;height:23px}.chat-heading h2{font-size:12px;margin:0 0 3px}.connection-line{font-size:9px;justify-content:center;gap:4px}.dot{width:5px;height:5px}
 .connection-banner{padding:7px 12px;font-size:11px;gap:8px}.thread{padding:16px 14px 12px;gap:11px}.thread::before{display:none}.message-row{max-width:83%}.bubble{font-size:16px;padding:8px 13px}.day-divider{font-size:11px;margin:1px 0 8px}.receipt{font-size:10px}.empty{margin:auto;padding-top:60px}.thread:has(.empty){justify-content:center}
 .composer{padding:7px 9px calc(8px + env(safe-area-inset-bottom));gap:4px}.emoji-button{width:33px;height:40px}.input-wrap{border-radius:22px}.composer textarea{padding-left:12px}.emoji-picker{left:10px;width:310px}
 #settingsOverlay{align-items:flex-end;justify-content:center;padding:0;background:#0009}.settings-panel{width:100%;max-height:88%;border-radius:22px 22px 0 0;border-bottom:0;padding:10px 22px calc(22px + env(safe-area-inset-bottom));background:#1c1c1e}.sheet-handle{display:block;width:35px;height:5px;border-radius:4px;background:#4a4a50;margin:0 auto 16px}.panel-top{margin-bottom:20px}.notice{bottom:calc(75px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
