:root{--brand:#f78b1e;--brand-dark:#b85f00;--brand-contrast:#1f1300;--app-bg:#d1d7db;--bg:#f0f2f5;--panel:#fff;--panel-hover:#f5f6f6;--panel-active:#f0f2f5;--rail:#f0f2f5;--border:#e9edef;--text:#111b21;--muted:#667781;--chat-bg:#efeae2;--doodle:#0b141a0b;--bubble-in:#fff;--bubble-out:#ffe7cc;--bar:#f0f2f5;--input:#fff;--search:#f0f2f5;--avatar-bg:#dfe5e7;--avatar-fg:#fff;--pill-bg:#f0f2f5;--pill-active-bg:#fde6cc;--pill-active-fg:var(--brand-dark);--tick-read:#53bdeb;--danger:#d93025;--shadow:0 1px .5px #0b141a21}@media (prefers-color-scheme:dark){:root{--brand-dark:#ffb25e;--app-bg:#0a1014;--bg:#0b141a;--panel:#111b21;--panel-hover:#202c33;--panel-active:#2a3942;--rail:#202c33;--border:#222d34;--text:#e9edef;--muted:#8696a0;--chat-bg:#0b141a;--doodle:#ffffff09;--bubble-in:#202c33;--bubble-out:#6b3c06;--bar:#202c33;--input:#2a3942;--search:#202c33;--avatar-bg:#6a7175;--avatar-fg:#cfd4d6;--pill-bg:#202c33;--pill-active-bg:#4a2e0c;--pill-active-fg:#ffb25e;--shadow:0 1px .5px #0006}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--app-bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,sans-serif}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}h1,h2{margin:0}.muted{color:var(--muted)}.grow{flex:1}.boot{height:100%;color:var(--brand);place-items:center;font-size:28px;font-weight:700;display:grid}.auth{background:linear-gradient(180deg, var(--brand) 0 220px, var(--bg) 220px);place-items:center;min-height:100%;padding:16px;display:grid}.auth-card{background:var(--panel);text-align:center;border-radius:3px;flex-direction:column;gap:14px;width:100%;max-width:380px;padding:32px 28px;display:flex;box-shadow:0 17px 50px #0b141a30,0 12px 15px #0b141a3d}.auth-card svg{align-self:center}.auth-card h1{font-size:26px;font-weight:400}.auth-card p{margin:-8px 0 4px}.auth-card label{text-align:left;color:var(--muted);flex-direction:column;gap:4px;font-size:13px;display:flex}.auth-card input{border:0;border-bottom:2px solid var(--border);background:0 0;outline:none;padding:10px 12px;font-size:15px}.auth-card input:focus{border-bottom-color:var(--brand)}.btn{border:0;border-radius:24px;padding:11px 24px;font-weight:500}.btn.primary{background:var(--brand);color:var(--brand-contrast)}.btn.primary:hover:not(:disabled){filter:brightness(1.06)}.btn:disabled{opacity:.5;cursor:default}.link{color:var(--brand-dark);background:0 0;border:0;padding:4px}.error{color:var(--danger);font-size:14px}.shell{background:var(--panel);grid-template-columns:64px minmax(340px,30%) 1fr;max-width:1600px;height:100%;margin:0 auto;display:grid;overflow:hidden}@media (width>=1441px){.shell{height:calc(100% - 38px);margin-top:19px;box-shadow:0 6px 18px #0b141a33}}.rail{background:var(--rail);border-right:1px solid var(--border);flex-direction:column;align-items:center;gap:6px;padding:12px 0;display:flex}.rail-btn{width:40px;height:40px;color:var(--muted);background:0 0;border:0;border-radius:50%;place-items:center;display:grid}.rail-btn:hover{background:var(--panel-active)}.rail-btn.active{background:var(--panel-active);color:var(--text)}.rail>div:last-child{margin-top:8px}.icon-btn{width:40px;height:40px;color:var(--muted);background:0 0;border:0;border-radius:50%;flex:none;place-items:center;display:grid}.icon-btn:hover:not(:disabled){background:var(--panel-active)}.icon-btn:disabled{cursor:default;opacity:.85}.icon-btn.send{color:var(--brand)}.avatar{background:var(--avatar-bg);color:var(--avatar-fg);-webkit-user-select:none;user-select:none;border-radius:50%;flex:none;place-items:center;display:grid;overflow:hidden}.sidebar{background:var(--panel);border-right:1px solid var(--border);flex-direction:column;min-height:0;display:flex}.side-head{align-items:center;gap:8px;padding:14px 12px 6px 16px;display:flex}.side-head h1{color:var(--brand);letter-spacing:-.2px;font-size:22px;font-weight:700}.status{color:var(--muted);flex:1;font-size:12px}.search{padding:6px 12px 4px}.search label{background:var(--search);height:35px;color:var(--muted);border-radius:8px;align-items:center;gap:14px;padding:0 14px;display:flex}.search label:focus-within{box-shadow:inset 0 -2px 0 var(--brand)}.search input{background:0 0;border:0;outline:none;flex:1;min-width:0;font-size:14px}.search input::placeholder{color:var(--muted)}.pills{gap:8px;padding:8px 12px 10px;display:flex}.pill{background:var(--pill-bg);color:var(--muted);border:0;border-radius:16px;padding:5px 12px;font-size:14px}.pill:hover{filter:brightness(.97)}.pill.active{background:var(--pill-active-bg);color:var(--pill-active-fg);font-weight:500}.conv-list,.contacts{flex:1;margin:0;padding:0;list-style:none;overflow-y:auto}.conv{text-align:left;background:0 0;border:0;align-items:center;gap:15px;width:100%;height:72px;padding:0 15px;display:flex}.conv:hover{background:var(--panel-hover)}.conv.active{background:var(--panel-active)}.conv-body{border-bottom:1px solid var(--border);flex-direction:column;flex:1;justify-content:center;gap:2px;min-width:0;height:100%;display:flex}.conv-row{justify-content:space-between;align-items:center;gap:8px;display:flex}.conv-name{white-space:nowrap;text-overflow:ellipsis;font-size:17px;overflow:hidden}.conv-time{color:var(--muted);flex:none;font-size:12px}.conv-time.unread{color:var(--brand);font-weight:500}.conv-preview{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:3px;font-size:14px;display:flex;overflow:hidden}.conv-preview .ticks{flex:none;margin-right:2px}.typing-text{color:var(--brand)}.badge{background:var(--brand);min-width:20px;height:20px;color:var(--brand-contrast);border-radius:10px;flex:none;place-items:center;padding:0 6px;font-size:12px;font-weight:600;display:grid}.empty-list{text-align:center;color:var(--muted);padding:28px 20px;font-size:14px}.ticks{color:var(--muted)}.ticks.read{color:var(--tick-read)}.chat{background:var(--chat-bg);flex-direction:column;min-width:0;min-height:0;display:flex}.chat-head{background:var(--bar);border-bottom:1px solid var(--border);flex:none;align-items:center;gap:14px;height:59px;padding:0 16px;display:flex}.bar-title{flex-direction:column;flex:1;min-width:0;line-height:1.25;display:flex}.bar-title strong{font-size:16px;font-weight:400}.bar-title strong,.bar-title span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.sub{color:var(--muted);font-size:13px}.back,.mobile-only{display:none}.empty-chat{text-align:center;background:var(--bg);border-bottom:6px solid var(--brand);justify-content:center;align-items:center}.empty-inner{max-width:460px;color:var(--muted);padding:24px}.empty-inner h2{color:var(--text);margin:18px 0 12px;font-size:32px;font-weight:300}.empty-inner p{margin:6px 0;font-size:14px;line-height:1.5}.messages{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%23808b92' stroke-opacity='.12' stroke-width='1.4'%3E%3Ccircle cx='20' cy='22' r='7'/%3E%3Cpath d='M70 14l10 10M80 14L70 24'/%3E%3Crect x='88' y='60' width='14' height='10' rx='3'/%3E%3Cpath d='M18 80q6-10 12 0t12 0'/%3E%3Ccircle cx='60' cy='96' r='3'/%3E%3Cpath d='M52 52l5 5 8-9'/%3E%3C/svg%3E");background-size:120px 120px;flex:1;padding:14px 7% 10px;overflow-y:auto}.system-note,.day-sep{text-align:center;margin:10px 0}.system-note{color:var(--muted);font-size:13px}.day-sep span{background:var(--panel);color:var(--muted);box-shadow:var(--shadow);border-radius:7.5px;padding:5px 12px 6px;font-size:12.5px;display:inline-block}.row{margin-top:2px;display:flex}.row.first{margin-top:10px}.row.mine{justify-content:flex-end}.bubble{background:var(--bubble-in);max-width:min(65%,600px);box-shadow:var(--shadow);overflow-wrap:anywhere;white-space:pre-wrap;border-radius:7.5px;padding:6px 7px 6px 9px;font-size:14.2px;line-height:19px;position:relative}.row.mine .bubble{background:var(--bubble-out)}.row.first .bubble:before{content:"";background:inherit;width:8px;height:13px;position:absolute;top:0}.row.first.theirs .bubble{border-top-left-radius:0}.row.first.theirs .bubble:before{clip-path:polygon(100% 0,0 0,100% 100%);left:-8px}.row.first.mine .bubble{border-top-right-radius:0}.row.first.mine .bubble:before{clip-path:polygon(0 0,100% 0,0 100%);right:-8px}.sender{margin-bottom:1px;font-size:12.8px;font-weight:500}.meta{float:right;color:var(--muted);-webkit-user-select:none;user-select:none;align-items:center;gap:3px;margin:8px 0 -5px 10px;font-size:11px;line-height:15px;display:inline-flex}.composer{background:var(--bar);flex:none;align-items:flex-end;gap:6px;padding:10px 16px;display:flex}.composer .icon-btn{height:42px}.composer textarea{resize:none;background:var(--input);field-sizing:content;border:0;border-radius:8px;outline:none;flex:1;max-height:130px;padding:10px 12px;font-size:15px;line-height:20px}.composer textarea::placeholder{color:var(--muted)}.banner{background:var(--bar);padding:6px 16px}.modal-backdrop{z-index:10;background:#0b141a80;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.modal{background:var(--panel);border-radius:3px;flex-direction:column;width:100%;max-width:440px;max-height:min(640px,90vh);display:flex;overflow:hidden;box-shadow:0 17px 50px #0b141a30,0 12px 15px #0b141a3d}.modal .bar{background:var(--bar);align-items:center;gap:12px;padding:12px 16px;display:flex}.tabs{border-bottom:1px solid var(--border);display:flex}.tabs button{color:var(--muted);background:0 0;border:0;border-bottom:3px solid #0000;flex:1;padding:11px;font-weight:500}.tabs button.active{color:var(--brand-dark);border-bottom-color:var(--brand)}.field{padding:10px 14px 0}.field input{background:var(--search);border:0;border-radius:8px;outline:none;width:100%;padding:9px 14px;font-size:14.5px}.chips{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.chip{background:var(--brand);color:var(--brand-contrast);border:0;border-radius:14px;padding:4px 10px;font-size:13px}.contacts{margin-top:8px}.contacts .conv{height:64px}.contacts .conv input{accent-color:var(--brand);width:18px;height:18px}.modal .error{padding:8px 16px}.modal-foot{border-top:1px solid var(--border);justify-content:flex-end;padding:12px 16px;display:flex}@media (width<=900px){.shell{grid-template-columns:1fr}.rail,.shell:not(.has-active) .chat,.shell.has-active .sidebar{display:none}.back,.mobile-only{display:grid}.messages{padding:12px 10px}.bubble{max-width:85%}}
