.chat-container,body{padding:0;margin:0}.bottom-area,.chat-box,.chat-container{max-width:min(90ch,95%)}#loginBtn,#logout{cursor:pointer;gap:10px;font-weight:500}#inputArea #infolog strong,#loginBtn,#logout{font-weight:500}#inputArea,#loginBtn,#logout{display:none}.bottom-area,.chat-item,.msg,.reply-preview{position:relative}body{background:#101010;color:#fff}h1{text-align:center;margin-top:15px}.chat-box{background:rgba(255,255,255,.02);width:100%;height:700px;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;border:1.5px solid #444;border-radius:15px;margin:0;scroll-behavior:smooth}.chat-item{display:flex;gap:8px;align-items:flex-start;animation:.3s ease-out zoomIn;transform-origin:top}.me{align-self:flex-end;flex-direction:row-reverse;transform-origin:top right}.them{transform-origin:top left}.bottom-area{width:100%;margin:25px 0 0;padding:0;box-sizing:border-box}.bottom-area .ket{margin:0;font-size:14px;color:#888;padding:20px 0;text-align:center}.msg{max-width:78%;padding:12px 16px;border-radius:14px;word-break:break-word;font-size:clamp(.9rem, 4vw, 1.1rem)}.avatar{width:38px;height:38px;border-radius:50%;background:#333;overflow:hidden;flex-shrink:0;display:flex;justify-content:center;align-items:center;font-weight:700;color:#fff;text-transform:uppercase}.avatar img{width:100%;height:100%;object-fit:cover}.me .msg{background:#2c4248;border-top-right-radius:4px}.them .msg{background:#2a2a2a;border-top-left-radius:4px}.sender-name{font-size:clamp(.9rem, 3vw, 1.1rem);opacity:.8;margin-bottom:4px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.4}.admin-badge,.pin-badge{border-radius:5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;line-height:1.2;display:inline-flex;gap:3px;padding:3px 6px;font-size:10px;white-space:nowrap}.them .sender-name{color:#d0cbba;justify-content:flex-start}.me .msg:has(.message-text:not(:empty)) .sender-name{flex-wrap:nowrap}.me .sender-name{color:#80cbc4;justify-content:flex-start}.admin-badge{background:#b1f9f5;color:#116794;align-items:center;flex-shrink:0}.admin-badge i,.pin-badge i{font-size:14px}.pin-badge{color:#70136e;background:#df84a3;align-items:center;flex-shrink:0}.message-text{margin:2px 0}.time{font-size:11px;opacity:.65;margin-top:4px;text-align:left;text-wrap:nowrap}.loading-dots{font-size:11px;opacity:.8;animation:1.4s infinite both blink}@keyframes zoomIn{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes blink{0%,100%{opacity:.2}20%{opacity:1}}#loginBtn{width:100%;padding:14px;border-radius:10px;background:#f0f0f0;border:none;color:#000;font-size:16px;align-items:center;justify-content:center;margin:0 auto}#loginBtn img{width:25px;vertical-align:middle}#logout{max-width:100px;padding:4px 10px;border-radius:10px;background:#450808;border:1.5px solid #a40f0f;color:#f67575;font-size:14px;align-items:center;justify-content:center;margin:0}#inputArea.show,#loginBtn.show,#logout.show,#sendBtn,.reply-info,.reply-preview{display:flex}#logout i{font-size:25px;vertical-align:middle}#inputArea{flex-direction:column;gap:10px}#inputArea .input{display:flex;align-items:center;gap:10px}#messageInput{flex:1;padding:14px 16px;background:#2a2a2a;border:1px solid transparent;border-radius:12px;color:#fff;font-size:clamp(.95rem, 2.8vw, 1.3rem);transition:border .2s}#sendBtn,.cancel-reply{transition:.2s;cursor:pointer}.sub{font-size:clamp(.8rem, 3vw, 1.2rem)}#sendBtn i,.reply-preview{font-size:20px}#messageInput:focus{outline:0;border-color:#1e90ff}#sendBtn{padding:14px 18px;background:#1e90ff;color:#fff;border-radius:12px;border:none;align-items:center;justify-content:center}#sendBtn:disabled{background:#555;cursor:not-allowed}#inputArea #infolog{margin-top:5px;font-size:clamp(.9rem, 3.2vw, 1.2rem);color:#888}#ket.show{display:block}.reply-preview{align-items:flex-start;background:rgba(255,255,255,.05);border-radius:10px;padding:10px;margin-bottom:10px;animation:.3s ease-out slideIn}.reply-line{width:3px;background:#1e90ff;margin-right:10px;border-radius:2px;align-self:stretch}.reply-content{flex:1;min-width:0}.reply-sender{font-size:clamp(.75rem, 2vw, .9rem);font-weight:600;color:#1e90ff;margin-bottom:2px}.reply-text{font-size:clamp(.75rem, 2vw, .85rem);color:#aaa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cancel-reply{background:0 0;border:none;color:#888;padding:5px;border-radius:5px;margin-left:10px}.cancel-reply:hover{background:rgba(255,255,255,.1);color:#fff}.reply-info,.reply-info:hover{background:rgba(255,255,255,.05)}.reply-info{align-items:flex-start;margin-bottom:8px;padding:8px;border-radius:8px;cursor:pointer;transition:background .2s}.msg{cursor:pointer;transition:.2s}.msg:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.2)}.msg.replying{border:2px solid #888!important;background:rgba(30,144,255,.1)!important;transform:scale(1.02)}.msg::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:14px;opacity:0;transition:opacity .2s}.msg:hover::after{opacity:1;background:linear-gradient(135deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.05) 100%)}@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.chat-item::before{content:'Klik untuk membalas';position:absolute;top:-25px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:4px 8px;border-radius:4px;font-size:10px;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;z-index:100}.chat-item:hover::before{opacity:1}@media (min-width:1024px){.bottom-area,.chat-box,.chat-container{max-width:min(100ch,95%)}.sub{font-size:clamp(.9rem, 3.2vw, 1.1rem)}.chat-box{height:600px;padding:25px}.msg{max-width:70%;padding:14px 18px;font-size:16px}.avatar{width:42px;height:42px}.sender-name{font-size:15px}#messageInput{padding:20px 16px}#sendBtn{padding:20px 17px}}@media (min-width:1440px){.bottom-area,.chat-box,.chat-container{max-width:min(120ch,90%)}.section-title{font-size:clamp(.9rem, 3.2vw, 1.5rem)}.sub{font-size:clamp(.9rem, 3.2vw, 1.3rem)}.chat-box{height:650px}.msg{max-width:65%}.avatar{width:48px;height:48px}#messageInput{padding:24px 16px}#sendBtn{padding:24px 17px}}@media (min-width:769px){#sendBtn{padding:18px}#messageInput{padding:18px 16px;margin:0}#loginBtn{max-width:min(120ch,90%);margin:0}}@media (max-width:768px){.reply-preview{padding:8px}.chat-item::before{font-size:10px;top:-20px}.bottom-area,.chat-box,.chat-container{max-width:100%}.chat-box{height:500px}}@media (max-width:480px){.chat-item::before{display:none}.msg:active{background:rgba(30,144,255,.1)!important;transform:scale(.98)}.chat-box{height:450px;padding:15px}.msg{cursor:default;max-width:85%;padding:10px 14px;font-size:14px}.avatar{width:34px;height:34px}}