.chat-hero{display:flex;justify-content:space-between;align-items:center;padding:24px 27px;border-radius:8px;background:linear-gradient(115deg,#113d48,#174c67 62%,#426487);color:#fff;margin-bottom:17px}.chat-hero .eyebrow{color:#b0d7ed}.chat-hero h2{font-size:20px;margin-top:5px}.chat-hero p{font-size:11px;color:#d0dde8}.chat-encryption{font:500 9px 'DM Mono';color:#b6e7dd}.chat-encryption:first-letter{color:#76d4bc}.chat-layout{display:grid;grid-template-columns:228px minmax(0,1fr);gap:17px;height:610px}.chat-sidebar{overflow:auto}.chat-sidebar-head{display:flex;justify-content:space-between;padding:15px 16px 10px;color:#71858a;font:500 9px 'DM Mono';letter-spacing:.8px}.chat-sidebar-head button{border:0;border-radius:4px;background:#e6f3f1;color:var(--teal);width:20px;height:20px;font-size:15px;cursor:pointer}.chat-channel{border:0;border-left:3px solid transparent;width:100%;background:#fff;padding:10px 13px;text-align:left;cursor:pointer;font:11px Manrope;color:#4d6871}.chat-channel.active{background:#e8f5f2;border-left-color:var(--teal);color:#126e69;font-weight:700}.chat-channel span{display:block;font:9px 'DM Mono';color:#819298;margin-top:2px}.people-head{margin-top:9px;border-top:1px solid var(--line)}.chat-person{display:flex;gap:8px;align-items:center;padding:7px 14px}.chat-avatar{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#5e9d99;color:#fff;font:700 8px 'DM Mono';position:relative}.chat-avatar:after{content:"";position:absolute;width:6px;height:6px;border:2px solid #fff;border-radius:50%;background:#71d4b1;right:-2px;bottom:-1px}.chat-person strong{display:block;font-size:10px}.chat-person span{font:9px 'DM Mono';color:#819298}.chat-main{display:flex;flex-direction:column;overflow:hidden}.chat-main-head{display:flex;justify-content:space-between;align-items:center;padding:17px 20px;border-bottom:1px solid var(--line)}.chat-main-head h2{font-size:15px}.chat-main-head p{font-size:10px}.channel-members{display:flex}.channel-members .chat-avatar{margin-left:-5px;border:2px solid #fff}.chat-messages{flex:1;overflow:auto;padding:18px 20px;background:linear-gradient(180deg,#fff,#f9fbfb)}.chat-message{display:flex;gap:10px;margin-bottom:16px;max-width:78%}.chat-message.self{margin-left:auto;flex-direction:row-reverse}.chat-message-body{background:#f0f4f4;border-radius:3px 10px 10px 10px;padding:9px 11px}.chat-message.self .chat-message-body{background:#dff1ed;border-radius:10px 3px 10px 10px}.chat-message-body strong{display:block;color:#426069;font-size:10px}.chat-message-body span{color:#829197;font:9px 'DM Mono';margin-left:5px}.chat-message-body p{font-size:11px;color:#274a54;margin:4px 0 0}.chat-compose{padding:10px 14px 13px;border-top:1px solid var(--line);background:#fff}.compose-top{display:flex;justify-content:space-between;margin-bottom:6px;color:#809197;font-size:9px}.compose-top select{border:0;background:transparent;color:#49636c;font:9px 'DM Mono';outline:0}.compose-row{display:flex;gap:8px}.compose-row input{flex:1;padding:10px 11px;border:1px solid #d8e1e1;border-radius:5px;font:11px Manrope}.compose-row .button{padding:9px 14px}@media(max-width:760px){.chat-hero{display:block}.chat-encryption{display:block;margin-top:12px}.chat-layout{grid-template-columns:1fr;height:650px}.chat-sidebar{display:none}.chat-message{max-width:90%}}