:root{--green:#00a884;--dark:#0b141a;--side:#fff;--head:#f0f2f5;--ink:#111b21;--muted:#667781;--line:#e5e7e9;--paper:#efeae2;--sent:#d9fdd3}*{box-sizing:border-box}body{margin:0;font:14px Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--green) 0 125px,#e8edf0 125px)}button,input,textarea{font:inherit}button{border:0;cursor:pointer}.app{width:min(1380px,calc(100% - 42px));height:min(92vh,930px);min-height:620px;margin:19px auto;display:grid;grid-template-columns:350px 1fr;overflow:hidden;border-radius:10px;box-shadow:0 8px 35px #0002;background:var(--side)}.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--line);background:var(--side)}.sidebar header,.chat-header{height:66px;padding:0 17px;display:flex;align-items:center;gap:11px;background:var(--head)}.sidebar header{justify-content:space-between}.me{display:flex;align-items:center;gap:10px;font-size:16px}.me b,.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#6256a5;color:#fff}.sidebar header button,.info,.mobile-button{background:transparent;color:var(--muted);padding:8px}.private{margin:16px 14px;padding:13px;display:grid;gap:3px;border-radius:10px;background:#e9f7f3;color:#285248}.private span,.sidebar-foot{font-size:11px;color:var(--muted)}.list-title{display:flex;justify-content:space-between;margin:0 17px 7px;color:var(--muted);font-size:10px;font-weight:bold;letter-spacing:.4px}.list-title button{background:transparent;color:#008069;font-size:11px;font-weight:bold}.chat-list{overflow:auto}.empty-list{text-align:center;color:var(--muted);font-size:12px;padding:20px}.conversation{width:100%;min-height:70px;padding:10px 15px;display:flex;align-items:center;gap:10px;text-align:left;background:var(--side);border-bottom:1px solid #f0f2f5;color:var(--ink)}.conversation:hover,.conversation.active{background:#f0f2f5}.conversation .avatar{flex:0 0 40px;width:40px;height:40px}.conversation span{display:grid;gap:4px;min-width:0}.conversation small{color:var(--muted);font-size:11px}.sidebar-foot{margin:auto 16px 15px;text-align:center}.chat{display:flex;min-width:0;min-height:0;flex-direction:column;background-color:var(--paper);background-image:radial-gradient(#57706b18 1px,transparent 1px);background-size:19px 19px}.chat-header>div{display:grid;gap:2px}.chat-header small{color:var(--muted);font-size:11px}.info{margin-left:auto;font-weight:bold}.mobile-button{display:none}.messages{flex:1;overflow:auto;padding:28px 8%;display:flex;flex-direction:column;gap:8px}.welcome{align-self:center;margin:auto;max-width:290px;padding:22px;text-align:center;border-radius:12px;background:#fff;color:var(--muted)}.welcome strong{display:block;color:var(--ink);margin-bottom:6px}.message{max-width:75%;padding:8px 10px 5px;border-radius:8px;box-shadow:0 1px 1px #0002;white-space:pre-wrap;word-break:break-word}.message.out{align-self:flex-end;background:var(--sent)}.message.in{align-self:flex-start;background:#fff}.message time{display:block;text-align:right;margin-top:2px;color:var(--muted);font-size:10px}.day{align-self:center;padding:5px 10px;border-radius:7px;background:#fff;color:var(--muted);font-size:10px}.composer{display:flex;gap:8px;padding:10px 15px;background:var(--head)}.composer textarea{flex:1;max-height:120px;resize:none;border:0;border-radius:8px;padding:10px;outline-color:var(--green)}.composer button,.primary{border-radius:8px;padding:10px 15px;background:var(--green);color:white;font-weight:bold}.auth-dialog{width:min(760px,calc(100% - 30px));padding:0;border:0;border-radius:16px;overflow:hidden;display:grid;grid-template-columns:1fr 1.2fr}.auth-dialog::backdrop{background:#0b141acc}.auth-intro{padding:44px 36px;background:linear-gradient(145deg,#00a884,#007b68);color:#fff}.auth-symbol{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff3;font-size:25px}.auth-intro h1{margin:25px 0 8px}.auth-intro p{color:#d7fbf2}.auth-content{padding:34px;background:#fff}.tabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:22px}.tabs button{padding:0 0 10px;background:transparent;color:var(--muted);font-weight:bold}.tabs button.active{color:#008069;border-bottom:2px solid var(--green)}label{display:grid;gap:6px;margin:12px 0;color:#54656f;font-size:12px;font-weight:bold}input{border:1px solid #d7dce0;border-radius:7px;padding:11px;outline-color:var(--green);color:var(--ink)}label+small{display:block;margin-top:-8px;color:var(--muted);font-size:10px}.primary{width:100%;margin-top:8px}.form-message{min-height:16px;color:#c42b23;font-size:11px}.form-message.success{color:#008069}.config-hint{padding:10px;border-radius:7px;background:#fff1bf;color:#705d12;font-size:11px}.small-dialog{width:min(380px,calc(100% - 30px));padding:30px;border:0;border-radius:14px;color:var(--ink)}.small-dialog p{color:var(--muted);font-size:12px}.close{position:absolute;right:11px;top:9px;background:transparent;color:var(--muted);font-size:22px}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,100px);opacity:0;padding:10px 15px;border-radius:8px;background:#1f2c33;color:#fff;font-size:12px;transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}body.dark{--side:#111b21;--head:#202c33;--ink:#e9edef;--muted:#8696a0;--line:#2a3942;--paper:#0b141a;--sent:#005c4b;background:#0b141a}body.dark .auth-content,body.dark .small-dialog,body.dark .welcome,body.dark .message.in{background:#202c33}body.dark input,body.dark .composer textarea{background:#111b21;color:#e9edef;border-color:#40505a}body.dark .conversation:hover,body.dark .conversation.active{background:#202c33}@media(max-width:700px){body{background:var(--paper)}.app{width:100%;height:100dvh;min-height:0;margin:0;border-radius:0;display:block}.sidebar{position:absolute;z-index:2;width:86%;height:100%;transform:translateX(-103%);transition:.2s;box-shadow:5px 0 25px #0004}.app.open .sidebar{transform:none}.chat{height:100%}.mobile-button{display:block}.messages{padding:18px 12px}.message{max-width:88%}.auth-dialog{grid-template-columns:1fr}.auth-intro{padding:25px}.auth-intro h1{margin:12px 0 6px}.auth-symbol{width:38px;height:38px}.auth-content{padding:25px}}