@import "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap";:root{--bg:#111b21;--surface:#202c33;--surface-hover:#2a3942;--border:#313d45;--primary:#00a884;--message-out:#005c4b;--message-in:#202c33;--text:#e9edef;--muted:#8696a0}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);justify-content:center;align-items:center;height:100vh;font-family:Poppins,sans-serif;display:flex}.app-container{background:#0c1317;width:100vw;height:100vh;display:flex;overflow:hidden}@media (width>=1440px){.app-container{border-radius:12px;width:1400px;height:calc(100vh - 40px);margin:20px auto;box-shadow:0 6px 18px #0000004d}}.sidebar{background:var(--bg);border-right:1px solid var(--border);flex-direction:column;width:30%;min-width:300px;max-width:400px;display:flex}.header{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;height:60px;padding:10px 16px;display:flex}.avatar{object-fit:cover;background:var(--muted);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;font-weight:600;display:flex}.header-actions{color:#aebac1;gap:20px;display:flex}.search-bar{border-bottom:1px solid var(--border);background:var(--bg);padding:8px 12px}.search-input-wrapper{background:var(--surface);border-radius:8px;align-items:center;gap:12px;padding:6px 12px;display:flex}.search-input-wrapper input{color:var(--text);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:14px}.search-input-wrapper input::placeholder{color:var(--muted)}.chat-list{flex:1;overflow-y:auto}.chat-item{cursor:pointer;border-bottom:1px solid var(--bg);align-items:center;gap:14px;padding:12px 16px;transition:background .2s;display:flex}.chat-item:hover,.chat-item.active{background:var(--surface-hover)}.chat-info{flex:1;overflow:hidden}.chat-header-info{justify-content:space-between;align-items:baseline;margin-bottom:4px;display:flex}.chat-name{color:var(--text);font-size:16px;font-weight:500}.chat-time{color:var(--muted);font-size:12px}.chat-preview{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;justify-content:space-between;font-size:13px;display:flex;overflow:hidden}.unread{background:var(--primary);color:#111b21;border-radius:50%;padding:2px 6px;font-size:11px;font-weight:600}.chat-window{background:#0b141a;flex-direction:column;flex:1;display:flex;position:relative}.chat-bg{opacity:.05;z-index:0;background-image:url("data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M54.627 0l.83.83-5.59 5.59a20.06 20.06 0 0 1-5.748 3.51l-1.077 2.062a22.126 22.126 0 0 0 5.4 12.01L57.57 32.558l.642.643-6.533 6.532a22.1 22.1 0 0 0-4.004 5.378l-2.073-1.055a20.065 20.065 0 0 1 3.541-5.72L54.627 32.8l-8.528-8.53a20.066 20.066 0 0 1-5.72 3.542l-1.055-2.074a22.1 22.1 0 0 0 5.377-4.003L38.169 15.2l.643.642 8.558 8.557a22.126 22.126 0 0 0 12.01 5.4l2.06-1.076a20.06 20.06 0 0 1 3.51-5.749l5.59-5.59.83.83-5.59 5.59a20.06 20.06 0 0 1-3.51 5.75l-2.062-1.078a22.126 22.126 0 0 0-5.4-12.01L57.57 18.064l-.642-.643-8.557-8.558a22.126 22.126 0 0 0-12.01-5.4l-2.06 1.077a20.06 20.06 0 0 1-3.51 5.75l-5.59-5.59zM0 54.627l.83.83-5.59 5.59a20.06 20.06 0 0 1-5.748 3.51l-1.077 2.062a22.126 22.126 0 0 0 5.4 12.01l9.128-9.128.642.643-6.533 6.532a22.1 22.1 0 0 0-4.004 5.378l-2.073-1.055a20.065 20.065 0 0 1 3.541-5.72L5.427 60H0v-5.373zM0 0h5.373l8.528 8.528a20.066 20.066 0 0 1 5.72-3.542l1.055 2.073a22.1 22.1 0 0 0-5.377 4.004L21.83 17.6l-.643-.642-8.558-8.557a22.126 22.126 0 0 0-12.01-5.4l-2.06 1.076a20.06 20.06 0 0 1-3.51 5.749L0 4.237V0zm29.832 29.831l.642.643-6.533 6.532a22.1 22.1 0 0 0-4.004 5.378l-2.073-1.055a20.065 20.065 0 0 1 3.541-5.72l5.427-5.427h8.928v-8.928l-5.428-5.427a20.065 20.065 0 0 1-5.72-3.541l-1.055 2.073a22.1 22.1 0 0 0-4.003 5.377l6.532 6.532.643.642-9.128 9.128a22.126 22.126 0 0 0-12.01-5.4l-1.076-2.06a20.06 20.06 0 0 1 5.749-3.51l5.59-5.59-.83-.83-5.59 5.59a20.06 20.06 0 0 1 3.51-5.75l2.062 1.078a22.126 22.126 0 0 0 5.4 12.01l8.558 8.557.642.643 8.557 8.558z\" fill=\"%23e9edef\" fill-opacity=\"1\" fill-rule=\"evenodd\"/%3E%3C/svg%3E");background-size:400px;position:absolute;inset:0}.messages-container{z-index:1;flex-direction:column;flex:1;gap:8px;padding:20px 6%;display:flex;position:relative;overflow-y:auto}.message-row{display:flex}.message-row.out{justify-content:flex-end}.message{border-radius:8px;max-width:65%;padding:8px 12px;font-size:14px;line-height:1.4;position:relative;box-shadow:0 1px .5px #0b141a21}.message.in{background:var(--message-in);border-top-left-radius:0}.message.out{background:var(--message-out);border-top-right-radius:0}.msg-time{color:#fff9;float:right;margin:8px 0 -4px 12px;font-size:11px}.input-area{background:var(--surface);border-top:1px solid var(--border);z-index:1;align-items:center;gap:16px;padding:12px 20px;display:flex;position:relative}.input-box{background:var(--bg);border:1px solid var(--border);border-radius:8px;flex:1;align-items:center;gap:12px;padding:10px 16px;display:flex}.input-box input{color:var(--text);background:0 0;border:none;outline:none;flex:1;font-family:inherit;font-size:15px}.icon-btn{cursor:pointer;color:var(--muted);transition:color .2s;display:flex}.icon-btn:hover{color:var(--text)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}