/* WEB PANEL PROXY public CSS */
:root{--bg:#212123;--side:#171718;--user:#2f2f31;--acc:#10a37f;--txt:#ececec;--dim:#9b9b9e;--line:#38383b}
*{box-sizing:border-box;margin:0;padding:0}
body{font:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--txt);height:100vh;display:flex;overflow:hidden}
aside{width:240px;background:var(--side);display:flex;flex-direction:column;padding:12px;gap:8px}
.logo{display:flex;align-items:center;gap:8px;font-weight:600;padding:6px}
.logo i{width:26px;height:26px;border-radius:50%;background:var(--acc);display:inline-block;position:relative}
.logo i:after{content:'';position:absolute;inset:6px;background:var(--side);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.new{background:var(--acc);color:#fff;border:0;border-radius:8px;padding:10px;font-weight:600;cursor:pointer}
.hist{flex:1;overflow-y:auto;font-size:13.5px;color:var(--dim)}
.hist div{padding:9px 10px;border-radius:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist div:hover{background:#212123}
main{flex:1;display:flex;flex-direction:column}
.top{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;font-size:14px;color:var(--dim)}
.top select{background:var(--user);color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:13px}
#feed{flex:1;overflow-y:auto;padding:24px 8%;display:flex;flex-direction:column;gap:18px}
.hero{margin:auto;text-align:center;color:var(--dim)}
.hero h1{color:var(--txt);font-size:24px;margin-bottom:10px}
.msg{max-width:720px;line-height:1.55;font-size:15px}
.msg.u{align-self:flex-end;background:var(--user);padding:10px 14px;border-radius:14px}
.msg.b{align-self:flex-start}
.msg.b .tag{font-size:12px;color:var(--acc);font-weight:600;margin-bottom:4px}
.err{color:#e57373}
.dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--dim);margin-right:4px;animation:bl 1.2s infinite}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,80%,100%{opacity:.2}40%{opacity:1}}
.bar{padding:14px 8%;border-top:1px solid var(--line)}
.inwrap{display:flex;gap:10px;background:var(--user);border:1px solid var(--line);border-radius:14px;padding:10px 12px;max-width:780px}
#inp{flex:1;background:0;border:0;color:var(--txt);font-size:15px;outline:0}
#send{background:var(--acc);border:0;border-radius:8px;color:#fff;width:34px;height:34px;cursor:pointer;font-size:16px}
.note{text-align:center;font-size:11.5px;color:var(--dim);padding:8px}
@media(max-width:760px){aside{display:none}}