*{box-sizing:border-box}body{margin:0;background:#e8ece9;color:#202824;font:15px -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}button,input{font:inherit}button{border:0;border-radius:7px;padding:10px 16px;background:#07a95a;color:white;cursor:pointer;white-space:nowrap}button:disabled{opacity:.4;cursor:default}input{border:1px solid #dce2dd;border-radius:8px;padding:12px;min-width:0;width:100%;background:white}label{display:block}small,.hint{color:#79867e}h1,p{margin:0 0 12px}h1{font-size:25px}.row{display:flex;gap:10px;align-items:center}.auth{max-width:400px;margin:10vh auto;padding:32px;background:white;border-radius:20px;box-shadow:0 12px 45px #183c1810}.auth label{margin:20px 0}.auth small{display:block;margin-top:24px;line-height:1.8}.brand{background:#07a95a;color:white;width:56px;height:56px;display:grid;place-items:center;border-radius:16px;font-size:28px;margin-bottom:24px}.secondary{background:#e6f5ec;color:#087c46}.workspace{display:none}.signed-in .auth{display:none}.signed-in .workspace{display:grid;grid-template-columns:320px 1fr;max-width:1180px;margin:24px auto;height:calc(100dvh - 48px);background:white;box-shadow:0 12px 60px #15331c16;border-radius:12px;overflow:hidden}.sidebar{display:flex;flex-direction:column;background:#f8faf8;border-right:1px solid #dce3dd;overflow:auto}.sidebar header{padding:24px 20px}.badge{font-size:12px;color:#07834b;background:#e3f5e9;padding:5px 8px;border-radius:20px}.add{padding:16px 20px;border-block:1px solid #e6ebe7}summary{cursor:pointer;margin-bottom:10px}.add .row{margin-top:10px}.list-heading{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;color:#718078}.list-heading button{background:transparent;color:#087c46;padding:5px}.friend{padding:18px 20px;border-bottom:1px solid #e8eee9;display:flex;gap:12px;align-items:center;justify-content:space-between;line-height:1.6;overflow-wrap:anywhere}.friend button{background:#e1f3e7;color:#07834b}.sidebar footer{margin-top:auto;padding:20px;font-size:13px;overflow-wrap:anywhere}footer button{margin:5px 4px 10px 0}pre{white-space:pre-wrap;font-size:11px;max-height:180px;overflow:auto}.chat{display:flex;flex-direction:column;min-width:0;min-height:0;background:#ededed}.chat-header{display:flex;gap:12px;align-items:center;padding:18px 24px;border-bottom:1px solid #ddd;background:#f7f7f7}.chat-header div{flex:1;min-width:0}.chat-header p{font-size:12px;color:#66776b;margin:6px 0 0;overflow-wrap:anywhere}.chat-header button,.callbar button{background:#e2e9e4;color:#365941}.callbar{display:flex;gap:8px;padding:10px 20px}.callbar button{font-size:13px}.legacy-media{display:none}.videos{display:flex;gap:8px;padding:0 20px}.videos video{width:50%;max-height:200px;border-radius:10px;background:#1d2921}.videos video:not([src]):not(:has(source)){min-height:0}.videos:has(video){height:auto}video{height:140px}video:not(.active){display:none}#messages{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-height:100px}.hint{font-size:12px;align-self:center;text-align:center}.bubble{background:white;max-width:85%;padding:12px 16px;border-radius:3px 12px 12px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap;margin:0;box-shadow:0 1px 2px #00000008}.mine{background:#95ec69;align-self:flex-end;border-radius:12px 3px 12px 12px}.composer{display:flex;gap:10px;align-items:center;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:#f7f7f7;border-top:1px solid #ddd}.composer input{flex:1}.attachment{font-size:28px;position:relative;overflow:hidden;cursor:pointer}.attachment input{position:absolute;inset:0;opacity:0;width:34px;cursor:pointer}#notice{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;z-index:9;background:#26382cec;color:white;border-radius:10px;max-width:90%;padding:10px 16px;font-size:13px;pointer-events:none}#notice:empty{display:none}#back{display:none}@media(max-width:700px){.signed-in .workspace{margin:0;border-radius:0;height:100dvh;display:block}.sidebar{height:100%}.chat{display:none;height:100%}.chat-open .sidebar{display:none}.chat-open .chat{display:flex}#back{display:block;padding:3px 9px;font-size:28px}.chat-header{padding:12px}.chat-header strong{font-size:17px}.callbar{padding:10px 12px}#messages{padding:16px}.auth{margin:6vh 16px;max-width:none}.composer{gap:8px}.sidebar header{padding-top:28px}}

.friend>div{flex:1;min-width:0}.friend strong,.friend small{display:block}.friend small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;font-size:12px;margin-top:5px}.unread{border-radius:20px;background:#ed4b51;color:white;padding:2px 6px;font-size:12px;min-width:20px;text-align:center}.unread[hidden],[hidden]{display:none!important}.message-time{display:block;font-size:10px;opacity:.65;margin-top:6px}.list-heading{flex-wrap:wrap;gap:4px}#unread-total{font-size:12px;color:#dc424c}#active-call{margin:8px 16px}.message-row{display:flex;flex-direction:column;align-items:flex-start;max-width:85%;min-width:80px}.message-row.mine{align-self:flex-end;align-items:flex-end;background:transparent}.message-row .bubble{max-width:100%;align-self:auto}.message-meta{font-size:11px;color:#86928b;margin-top:5px}.read-state{margin-left:7px}.send-error{color:#c84646}.sender{font-size:11px;color:#7a887f;margin-bottom:4px}.chat-image{display:block;max-width:220px;max-height:260px;width:auto;height:auto;border-radius:6px;margin-bottom:8px}#emoji-panel{padding:10px;background:#f8faf8;display:grid;grid-template-columns:repeat(8,1fr);gap:4px}#emoji-panel button{background:transparent;padding:6px;font-size:24px}#emoji-toggle{background:transparent;color:#3d5747;font-size:25px;padding:4px}.callbar{flex-wrap:wrap}.media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 16px;max-height:270px;overflow:auto}.media-grid:empty{display:none}.media-tile{background:#1e2924;color:white;border-radius:8px;min-height:70px;overflow:hidden}.media-tile video{display:block;width:100%;height:115px;object-fit:contain}.media-tile small{display:block;padding:5px 8px;color:#d4e6da}.invitation{margin:10px 16px;padding:12px;background:#e4f4e8;border-radius:10px;font-size:13px}.invitation button{margin:4px;padding:7px}#new-group{margin:10px 16px}#group-panel{padding:12px;background:#e6f2e9;font-size:13px}#group-panel select{padding:8px;max-width:150px}dialog{border:0;border-radius:14px;padding:24px;max-width:92vw;width:420px}dialog::backdrop{background:#0006}#group-members{max-height:300px;overflow:auto;margin:12px 0}#group-members label{display:flex;align-items:center;gap:10px;padding:8px}#group-members input{width:auto}.composer{flex-shrink:0}#group-form button{margin:6px 4px}#messages .bubble button{font-size:12px;padding:5px 8px}#group-panel button{margin:5px;font-size:12px}#media-grid video[hidden]{display:none}

#notifications{position:fixed;right:16px;top:12px;z-index:30;width:310px;max-height:45dvh;overflow:auto;pointer-events:none}#notifications .invitation{pointer-events:auto;border:1px solid #abd6b7;box-shadow:0 4px 22px #0002;margin:6px}#notifications:has(.invitation){background:#f5fff8e8;border-radius:12px}

.media-tile.audio-only{background:#e0efe5;color:#246a43}.media-tile.audio-only small{color:#246a43}.audio-avatar{font-size:30px;padding:12px 16px 4px;text-align:center}

.relay-choice{display:flex;align-items:center;gap:8px;padding:4px 16px;font-size:11px;color:#6c8172}.relay-choice input{width:auto}#relay-status{font-size:11px;color:#49815d;padding:0 16px;margin:4px 0}

.relay-choice[hidden]{display:none}.chat-image{cursor:zoom-in}#image-preview{background:#111;color:white;width:96vw;max-width:1200px;max-height:95dvh;padding:12px}#preview-close{display:block;margin:0 0 12px auto}.preview-scroll{overflow:auto;max-height:80dvh;touch-action:pan-x pan-y pinch-zoom}#preview-image{display:block;max-width:100%;height:auto;margin:auto}#image-preview::backdrop{background:#000c}

.group-entry-actions{display:grid;gap:8px;padding:12px 16px}.group-entry-actions #new-group,.group-entry-actions #join-group{margin:0;width:100%;min-height:42px}.member-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.member-heading h2{margin:0;font-size:20px}.member-heading button{padding:6px 12px;background:#e5eee8;color:#365941}.group-code-label{margin:8px 0;color:#6c8172}.group-tools{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:10px}.member-list{list-style:none;margin:0 0 12px;padding:0;background:white;border-radius:12px;overflow:hidden}.member-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid #edf1ee}.member-list li span{overflow-wrap:anywhere;min-width:0}.member-list li:last-child{border:0}.danger-secondary{background:#fbeaea;color:#bf4444}#group-panel{max-height:48dvh;overflow:auto;flex-shrink:0;border-bottom:1px solid #d3e4d8}#group-panel>small{display:block;margin:5px}#group-action-content label{margin:16px 0}#group-action-content select{width:100%;padding:12px;border:1px solid #dce2dd;border-radius:8px}#group-action-content button[type=submit]{width:100%;margin-top:8px}#group-action-dialog{max-height:85dvh;overflow:auto}.group-invite-card{margin:8px 16px;padding:12px;background:#e5f3e9;border:1px solid #cee4d5;border-radius:12px;font-size:13px}.group-invite-card button{padding:6px 16px;margin-right:8px}#notice{z-index:100}dialog #notice{z-index:100}

#join-dialog,#group-dialog{padding:26px;border-radius:20px;box-shadow:0 20px 70px #12271b33}#join-form h2,#group-form h2{margin:0 0 22px;font-size:24px}#join-form>label,#group-form>label{display:grid;gap:8px;margin:18px 0;color:#4b5f53;font-size:14px}#join-form input,#group-form input{padding:13px 14px;border-radius:10px}input:focus-visible{outline:2px solid #70d8a0;outline-offset:2px}.dialog-actions{display:flex;gap:12px;margin-top:24px}.dialog-actions button{flex:1;min-height:44px;margin:0!important;border-radius:10px}#friend-request-dialog{padding:24px;border-radius:20px;max-height:85dvh;overflow:auto}#friend-request-title{font-size:21px}.request-intro{font-size:13px;color:#7a897f;margin:12px 0 20px}.friend-request-card{padding:18px;background:#f3f8f5;border:1px solid #e2eee6;border-radius:14px;margin-top:12px}.request-person{display:flex;gap:12px;align-items:center}.request-person strong{font-size:17px;overflow-wrap:anywhere}.request-person p{font-size:13px;color:#7a897f;margin:5px 0 0}.request-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#d9efdf;color:#16834e;font-weight:700;font-size:22px;flex-shrink:0}#friend-request-later{font-size:12px}#friend-requests-open{width:100%;margin-top:12px}#requests{display:grid;gap:8px}

#group-invitation-dialog{padding:24px;border-radius:20px;max-height:85dvh;overflow:auto}#group-invitation-title{font-size:21px}#group-invitation-later{font-size:12px}#group-invitations-open{margin:4px 16px 12px;padding:12px}#group-invitations{display:grid;gap:8px}#group-invitations strong{overflow-wrap:anywhere;line-height:1.6}