.chat-page{height:100dvh;overflow:hidden;background:#0b141a;padding:28px}.chat-layout{height:100%;max-width:1400px;margin:auto;display:grid;grid-template-columns:330px 1fr;border:1px solid #2b393e;border-radius:10px;overflow:hidden;box-shadow:0 15px 80px #0003}.chat-sidebar{background:#111b21;padding:30px 24px;position:relative;display:flex;flex-direction:column}.back-home{font-size:13px;color:#a4b3b6;margin:32px 0}.side-label{font-size:10px;letter-spacing:2px;color:#76898f;margin:10px 0 20px}.selected-chat{display:flex;gap:12px;background:#233039;padding:18px 13px;border-radius:8px;margin:0 -12px;align-items:center}.avatar{background:#c6f466;color:#17341b;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;font-size:32px;font-weight:700}.selected-chat strong{font-size:14px}.selected-chat p{color:#93a7af;font-size:11px;margin:6px 0 0}.side-bottom{margin-top:auto;padding-top:40px}.side-bottom>span{color:#c6f466;font-size:34px}.side-bottom h2{font-size:29px;margin-top:16px;color:#dae2de}.side-bottom p{font-size:14px;line-height:1.8;color:#94a5ab;margin:22px 0}.side-bottom small{display:block;border-top:1px solid #2b393e;padding-top:22px;font-size:12px;line-height:1.7;color:#788c95}.chat-main{min-width:0;display:flex;flex-direction:column;background-color:#0b141a;background-image:radial-gradient(#71807b18 1px,transparent 1px);background-size:22px 22px;height:100%;overflow:hidden}.chat-header{background:#202c33;display:flex;align-items:center;gap:12px;padding:15px 24px;flex-shrink:0}.chat-header strong{font-size:16px;display:block}.chat-header div>span{display:block;font-size:12px;color:#a8b8be;margin-top:5px}.info-btn{margin-left:auto;border:0;background:transparent;color:#b2c0c5;font-size:24px;cursor:pointer;padding:10px}.info-panel{padding:15px 25px;background:#283a3b;font-size:13px;color:#d0dbd6;line-height:1.7}.messages{flex:1;overflow-y:auto;padding:22px 7%;display:flex;flex-direction:column;align-items:flex-start;gap:12px;scroll-behavior:smooth}.day{align-self:center;background:#202c33;border-radius:6px;font-size:11px;color:#b8c6ca;padding:7px 13px}.chat-notice{align-self:center;background:#1e2b31;color:#bbc5ad;font-size:11px;line-height:1.7;border-radius:8px;padding:10px 16px;max-width:470px;text-align:center;margin:3px 0 16px}.bubble{background:#202c33;color:#e6ecec;border-radius:0 9px 9px 9px;padding:12px 14px 8px;max-width:82%;font-size:14px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 2px #0003}.bubble .sender{display:block;color:#c6f466;font-size:12px;margin-bottom:5px;font-weight:600}.bubble.outgoing{align-self:flex-end;background:#005c4b;border-radius:9px 0 9px 9px}.bubble time{display:block;text-align:right;color:#91a6aa;font-size:10px;margin-top:5px}.bubble.outgoing time{color:#9ac8c0}.composer-area{background:#202c33;padding:14px 24px 10px}.suggestions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.suggestions button{background:#18272b;border:1px solid #54766b;border-radius:18px;padding:9px 14px;color:#c1e1cc;font-size:12px;cursor:pointer}.suggestions button:hover{background:#345047}#chat-form{display:flex;gap:12px;align-items:center}#message-input{border:0;background:#2a3942;padding:15px 18px;color:#fff;border-radius:8px;min-width:0;flex:1;font-size:15px}#message-input::placeholder{color:#9aaeb5}.send{background:#00a884;border:0;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;color:#fff;cursor:pointer;flex-shrink:0}.send:hover{background:#06bc96}.composer-note{text-align:center;font-size:10px;color:#8da0a7;margin-top:10px}.mobile-back{display:none}@media(max-width:850px){.chat-page{padding:0}.chat-layout{grid-template-columns:1fr;border:0;border-radius:0}.chat-sidebar{display:none}.mobile-back{display:block;font-size:24px}.chat-header{padding:12px 16px}.messages{padding:18px 16px}.bubble{max-width:90%;font-size:15px}.composer-area{padding:12px}.suggestions{gap:6px}.suggestions button{font-size:11px;padding:8px 11px}.chat-notice{font-size:11px}.composer-note{font-size:10px}.chat-header div>span{font-size:11px}}
.avatar{background:#063d2e;overflow:hidden}.avatar img{width:40px;height:40px;object-fit:contain}.chat-sidebar .brand-image{width:235px;height:79px}.bubble .sender{color:#00dfa8}.side-bottom>span{color:#00dfa8}.chat-sidebar .back-home{margin-top:20px}.chat-main .avatar{background:#023526}
.chat-main .avatar,.selected-chat .avatar{background:#234038;width:48px;height:48px}.avatar img{width:100%;height:100%;object-fit:cover;object-position:center 30%}.chat-header strong{font-size:15px;line-height:1.4}.chat-header>div:nth-last-child(2){min-width:0}.selected-chat strong{font-size:12px;line-height:1.5}.chat-header .is-typing{color:#4bddb1}.typing-bubble{min-width:84px;padding-bottom:15px}.typing-dots{display:flex;gap:5px;align-items:center;height:15px;padding-top:3px}.typing-dots i{display:block;width:7px;height:7px;border-radius:50%;background:#b8c9c6;animation:typing 1.2s infinite ease-in-out}.typing-dots i:nth-child(2){animation-delay:.16s}.typing-dots i:nth-child(3){animation-delay:.32s}@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}@media(max-width:480px){.chat-header{gap:9px;padding:12px}.chat-header strong{font-size:13px;max-width:230px}.chat-header .avatar{width:42px;height:42px}.info-btn{padding:5px}.chat-header div>span{font-size:11px}}@media(prefers-reduced-motion:reduce){.typing-dots i{animation:none}}