:root{--color-primary:#5865f2;--color-primary-hover:#4752c4;--color-accent:#faa61a;--color-success:#23a55a;--color-danger:#ed4245;--surface-chat:#313338;--surface-panel:#2b2d31;--surface-sidebar:#1e1f22;--surface-hover:#35373c;--surface-active:#404249;--surface-input:#383a40;--text-normal:#dbdee1;--text-muted:#949ba4;--text-faint:#6d6f78;--border:#232428}*{box-sizing:border-box}body,html{margin:0;height:100%;background:var(--surface-chat);color:var(--text-normal);font-family:gg sans,Segoe UI,system-ui,-apple-system,sans-serif;font-size:15px}button{cursor:pointer}button,input,textarea{font-family:inherit}.app{display:grid;grid-template-columns:320px 1fr;height:100vh}.center{align-items:center;justify-content:center;height:100vh;gap:12px}.center,.sidebar{display:flex;flex-direction:column}.sidebar{background:var(--surface-sidebar);border-right:1px solid var(--border);min-height:0}.sidebar__head{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.sidebar__title{font-weight:700;font-size:18px}.sidebar__actions{display:flex;gap:8px;padding:12px 12px 4px}.sidebar__list{overflow-y:auto;flex:1 1;padding:8px;min-height:0}.sidebar__foot{padding:10px 14px;border-top:1px solid var(--border);font-size:13px}.convo,.sidebar__foot{display:flex;align-items:center;gap:10px}.convo{padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--text-muted);width:100%;border:none;background:transparent;text-align:left}.convo:hover{background:var(--surface-hover);color:var(--text-normal)}.convo--active{background:var(--surface-active);color:#fff}.convo__body{flex:1 1;min-width:0}.convo__name{font-weight:600}.convo__name,.convo__preview{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.convo__preview{font-size:13px;color:var(--text-faint)}.badge{background:var(--color-danger);color:#fff;border-radius:10px;font-size:12px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center}.avatar{width:38px;height:38px;border-radius:50%;background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex-shrink:0;position:relative}.avatar--sm{width:30px;height:30px;font-size:13px}.dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--surface-sidebar);position:absolute;bottom:-1px;right:-1px;background:var(--text-faint)}.dot--online{background:var(--color-success)}.chat{display:flex;flex-direction:column;min-width:0;background:var(--surface-chat)}.chat__head{padding:14px 18px;border-bottom:1px solid var(--border);font-weight:700;display:flex;align-items:center;gap:10px;box-shadow:0 1px 0 rgba(0,0,0,.2)}.chat__head-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat__head-actions{display:flex;align-items:center;gap:4px}.chat__sub{font-size:12px;font-weight:400;color:var(--text-muted)}.chat__banner{background:var(--color-accent);color:#1e1f22;text-align:center;font-size:12px;font-weight:600;padding:4px}.chat__msgs{flex:1 1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:2px;min-height:0}.chat__empty{margin:auto;color:var(--text-faint)}.chat__empty--hero{text-align:center}.chat__empty--hero h2{color:var(--text-normal)}.msg{display:flex;gap:12px;padding:6px 8px;border-radius:6px;position:relative}.msg:hover{background:rgba(0,0,0,.06)}.msg__gutter{width:38px;flex-shrink:0}.msg__actions{position:absolute;top:-10px;right:10px;display:none;gap:2px;background:var(--surface-panel);border:1px solid var(--border);border-radius:8px;padding:2px;box-shadow:0 2px 8px rgba(0,0,0,.3)}.msg:hover .msg__actions{display:flex}.msg__action{background:none;border:none;border-radius:6px;padding:4px 6px;font-size:14px;line-height:1}.msg__action:hover{background:var(--surface-hover)}.msg__action--danger:hover{background:rgba(237,66,69,.18)}.msg__reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.rxn-glyph{justify-content:center}.rxn-glyph,.rxn-pill{display:inline-flex;align-items:center}.rxn-pill{gap:4px;background:var(--surface-input);border:1px solid var(--border);border-radius:10px;padding:2px 8px;line-height:1;color:var(--text-normal)}.rxn-pill:hover{border-color:var(--text-faint)}.rxn-pill--mine{background:rgba(88,101,242,.18);border-color:var(--color-primary)}.rxn-count{font-size:12px;font-weight:600;color:var(--text-muted)}.rxn-pill--mine .rxn-count{color:#c5cbff}.rxn-anchor{position:relative;display:inline-flex}.rxn-picker{position:absolute;bottom:100%;right:0;margin-bottom:6px;display:grid;grid-template-columns:repeat(7,1fr);grid-gap:2px;gap:2px;background:var(--surface-sidebar);border:1px solid var(--border);border-radius:10px;padding:6px;width:268px;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:30}.rxn-option{background:none;border:none;border-radius:6px;padding:4px;display:inline-flex;align-items:center;justify-content:center}.rxn-option:hover{background:var(--surface-active)}.msg__edit{margin:2px 0}.msg__edit-box{width:100%;background:var(--surface-input);border:1px solid var(--color-primary);border-radius:8px;padding:8px 12px;color:var(--text-normal);resize:none;outline:none;line-height:1.4;max-height:200px}.msg__edit-hint{font-size:11px;color:var(--text-faint);margin-top:4px}.day-divider{display:flex;align-items:center;text-align:center;margin:16px 0 8px;color:var(--text-faint);font-size:12px;font-weight:600}.day-divider:after,.day-divider:before{content:"";flex:1 1;border-top:1px solid var(--border)}.day-divider span{padding:0 12px}.msg__head{display:flex;align-items:baseline;gap:8px}.msg__author{font-weight:600;color:#fff}.msg__time{font-size:11px;color:var(--text-faint)}.msg__body-row{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}.msg__body{white-space:pre-wrap;word-break:break-word}.msg__body--deleted{color:var(--text-faint);font-style:italic}.msg__meta{display:inline-flex;align-items:center;gap:6px;margin-left:6px;font-size:11px}.tick{font-size:12px}.tick--sending{color:var(--text-faint)}.tick--sent{color:var(--text-muted)}.tick--read{color:var(--color-accent)}.retry,.tick--failed{color:var(--color-danger)}.retry{background:none;border:none;text-decoration:underline;font-size:11px;padding:0}.edited{font-size:10px;color:var(--text-faint);margin-left:4px}.msg__attachments{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0}.msg__image{max-width:320px;max-height:240px;border-radius:8px;display:block}.msg__file{display:inline-flex;align-items:center;gap:4px;background:var(--surface-input);padding:8px 12px;border-radius:8px;color:var(--text-normal);text-decoration:none}.msg__file:hover{background:var(--surface-active)}.composer{padding:12px 18px 18px}.composer__chip{display:inline-flex;align-items:center;border-radius:6px;padding:6px 10px;margin-bottom:8px;font-size:13px}.composer__box,.composer__chip{gap:10px;background:var(--surface-input)}.composer__box{border-radius:8px;padding:10px 14px;display:flex;align-items:flex-end}.composer textarea{flex:1 1;background:transparent;border:none;color:var(--text-normal);resize:none;outline:none;max-height:160px;line-height:1.4}.btn{background:var(--color-primary);color:#fff;border:none;border-radius:6px;padding:9px 16px;font-weight:600;transition:background .15s}.btn:hover{background:var(--color-primary-hover)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--ghost{background:var(--surface-hover)}.btn--ghost:hover{background:var(--surface-active)}.btn--block,.field{width:100%}.field{background:var(--surface-input);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text-normal);outline:none;margin-top:6px}.field:focus{border-color:var(--color-primary)}.label{display:block;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-top:14px}.card{background:var(--surface-panel);padding:28px;border-radius:10px;width:100%;max-width:420px;box-shadow:0 8px 24px rgba(0,0,0,.4)}.error{color:var(--color-danger);font-size:13px;margin-top:10px}.link{color:var(--color-primary);background:none;border:none;text-decoration:underline;padding:0}.muted{color:var(--text-muted)}.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50}.modal{background:var(--surface-panel);border-radius:10px;padding:24px;width:100%;max-width:460px;max-height:80vh;overflow-y:auto}.pick{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;cursor:pointer}.pick:hover{background:var(--surface-hover)}.icon-btn{background:none;border:none;color:var(--text-muted);border-radius:6px;padding:6px 8px;font-size:16px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.icon-btn:hover{background:var(--surface-hover);color:var(--text-normal)}.icon-btn--active{color:var(--color-accent)}.menu{position:absolute;top:100%;right:0;margin-top:4px;background:var(--surface-sidebar);border:1px solid var(--border);border-radius:8px;padding:4px;min-width:200px;box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:40}.menu__label{font-size:11px;color:var(--text-faint);padding:6px 10px}.menu__item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text-normal);padding:8px 10px;border-radius:6px;font-size:14px}.menu__item:hover{background:var(--color-primary);color:#fff}.modal__head{margin-bottom:8px}.modal__head,.modal__section-head{display:flex;align-items:center;justify-content:space-between}.modal__section-head{margin-top:18px}.rule{border:none;border-top:1px solid var(--border);margin:18px 0}.member-add{margin:8px 0;max-height:180px;overflow-y:auto;background:var(--surface-sidebar);border-radius:8px;padding:4px}.member-list{margin-top:8px;display:flex;flex-direction:column;gap:2px}.member-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:8px}.member-row:hover{background:var(--surface-hover)}.member-row__actions{display:flex;gap:10px;flex-shrink:0}.role-badge{font-size:10px;font-weight:700;color:var(--color-primary);background:rgba(88,101,242,.15);padding:2px 6px;border-radius:4px;letter-spacing:.04em}.link--danger{color:var(--color-danger)}.btn--danger{background:var(--color-danger)}.btn--danger:hover{background:#c93b3e}.settings-profile{margin:4px 0 8px}.settings-profile,.settings-row{display:flex;align-items:center;gap:12px}.settings-row{justify-content:space-between;margin:12px 0}.badge-ok{font-size:12px;font-weight:700;color:var(--color-success);background:rgba(35,165,90,.15);padding:4px 10px;border-radius:6px}.toggle{width:44px;height:26px;border-radius:13px;background:var(--surface-active);border:none;position:relative;flex-shrink:0;transition:background .15s}.toggle--on{background:var(--color-success)}.toggle__knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}.toggle--on .toggle__knob{transform:translateX(18px)}.preset-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;margin-top:8px}.preset{background:var(--surface-input);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text-normal);text-align:left;font-size:14px}.preset:hover{border-color:var(--text-faint)}.preset--active{border-color:var(--color-primary);background:rgba(88,101,242,.12)}.convo__muted{font-size:12px;opacity:.7}.badge--muted{background:var(--surface-active);color:var(--text-muted)}.chat__msgs::-webkit-scrollbar,.member-add::-webkit-scrollbar,.modal::-webkit-scrollbar,.sidebar__list::-webkit-scrollbar{width:8px}.chat__msgs::-webkit-scrollbar-thumb,.member-add::-webkit-scrollbar-thumb,.modal::-webkit-scrollbar-thumb,.sidebar__list::-webkit-scrollbar-thumb{background:var(--surface-active);border-radius:4px}.chat__msgs::-webkit-scrollbar-track,.member-add::-webkit-scrollbar-track,.modal::-webkit-scrollbar-track,.sidebar__list::-webkit-scrollbar-track{background:transparent}.chat__back{display:none;font-size:26px;padding:2px 6px;margin-left:-4px}@media (max-width:768px){body,html{font-size:16px}.app{grid-template-columns:1fr}.app,.center{height:100dvh}.center{padding:0 16px}.app>.sidebar{display:flex}.app--detail>.sidebar,.app>.chat{display:none}.app--detail>.chat{display:flex}.sidebar{border-right:none}.chat__back{display:inline-flex}.convo{padding:12px}.icon-btn{padding:10px 12px;font-size:18px}.chat__head,.sidebar__head{padding:12px 14px}.chat__msgs{padding:12px}.composer{padding:10px 12px calc(12px + env(safe-area-inset-bottom))}.composer textarea,.field{font-size:16px}.overlay{align-items:flex-end}.modal{max-width:100%;max-height:92vh;border-radius:16px 16px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom))}}