@charset "UTF-8";.chat-app-wrapper{display:flex;flex-direction:column;background-color:var(--white);max-width:100%;height:100vh;margin:0 auto;overflow:hidden}.chat-app-wrapper .chat-app-header{height:64px;min-height:64px;width:100%;border-bottom:1px solid #eef2f4;display:flex;align-items:center;padding:0 20px}.chat-app-wrapper .chat-app-header .logo{width:38px;flex-shrink:0}.chat-app-wrapper .chat-app-header .search-bar{height:64px;flex-grow:2;z-index:3;position:relative;margin-inline-start:280px}.chat-app-wrapper .chat-app-header .search-bar .field,.chat-app-wrapper .chat-app-header .search-bar .field .control{height:100%;width:100%}.chat-app-wrapper .chat-app-header .search-bar .field .control .form-icon{height:64px;width:64px}.chat-app-wrapper .chat-app-header .search-bar .field .control .form-icon .iconify{height:20px;width:20px;font-size:20px;color:color-mix(in oklab,var(--light-text),black 5%)}.chat-app-wrapper .chat-app-header .search-bar .field .control .input{height:100%;width:100%;display:block;background-color:transparent;border:none;font-family:var(--font);font-weight:500;font-size:15px;padding-inline-start:64px;padding-inline-end:64px}.chat-app-wrapper .chat-app-header .search-bar .field .control .input:focus{box-shadow:none}.chat-app-wrapper .chat-app-header .user-settings{display:flex;align-items:center;cursor:pointer;margin-inline-start:auto;flex-shrink:0}.chat-app-wrapper .chat-app-header .user-settings>*+*{margin-inline-start:14px}.is-dark .chat-app-wrapper .chat-app-header{background:color-mix(in oklab,var(--dark-sidebar),black 2%);border-color:color-mix(in oklab,var(--dark-sidebar),white 2%)}.is-dark .chat-app-wrapper .chat-app-header .search-bar .field .control .input{color:var(--dark-dark-text)}.chat-app-wrapper .wrapper .conversation-area{border-inline-end:1px solid #eef2f4;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;position:relative;width:340px;flex-shrink:0;padding-bottom:80px}.chat-app-wrapper .wrapper .conversation-area .overlay{position:fixed;bottom:-2px;inset-inline-start:0;width:340px;flex-shrink:0;background:linear-gradient(to bottom,#fff0,#fff 65% 100%);height:80px;pointer-events:none}.chat-app-wrapper .wrapper .conversation-area .conversation{display:flex;align-items:center;max-width:100%;padding:20px;cursor:pointer;transition:.2s;position:relative}.chat-app-wrapper .wrapper .conversation-area .conversation:hover,.chat-app-wrapper .wrapper .conversation-area .conversation:focus{background-color:#eef2f466}.chat-app-wrapper .wrapper .conversation-area .conversation.active{background:linear-gradient(to right,#eef2f466,#eef2f400);border-inline-start:4px solid var(--primary)}.chat-app-wrapper .wrapper .conversation-area .conversation.active .conversation-detail .conversation-username{font-weight:600}.chat-app-wrapper .wrapper .conversation-area .conversation .v-avatar{margin-inline-end:12px}.chat-app-wrapper .wrapper .conversation-area .conversation .conversation-detail{overflow:hidden;font-family:var(--font)}.chat-app-wrapper .wrapper .conversation-area .conversation .conversation-detail .conversation-username{font-family:var(--font-alt);color:var(--dark-text);font-weight:500;font-size:.95rem}.chat-app-wrapper .wrapper .conversation-area .conversation .conversation-detail .conversation-content{font-weight:500;font-size:.9rem;display:flex}.chat-app-wrapper .wrapper .conversation-area .conversation .conversation-detail .conversation-content .conversation-message{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--light-text);max-width:170px}.chat-app-wrapper .wrapper .conversation-area .conversation .conversation-detail .conversation-content .conversation-date{font-size:.9rem;color:var(--light-text);margin-inline-start:4px}.chat-app-wrapper .wrapper .conversation-area .conversation .conversation-detail .conversation-content .conversation-date:before{content:"•";margin-inline-end:2px}.is-dark .chat-app-wrapper .wrapper .conversation-area{background:color-mix(in oklab,var(--dark-sidebar),white 4%);border-color:color-mix(in oklab,var(--dark-sidebar),white 12%)}.is-dark .chat-app-wrapper .wrapper .conversation-area .overlay{background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,var(--dark-sidebar) 65%,var(--dark-sidebar) 100%)}.is-dark .chat-app-wrapper .wrapper .conversation-area .conversation:hover{background:color-mix(in oklab,var(--dark-sidebar),white 6%)}.is-dark .chat-app-wrapper .wrapper .conversation-area .conversation.active{background:color-mix(in oklab,var(--dark-sidebar),white 1%);border-color:var(--primary)}.is-dark .chat-app-wrapper .wrapper .conversation-area .conversation .conversation-detail .conversation-username{color:var(--dark-dark-text)}.chat-app-wrapper .wrapper .chat-area{position:relative;display:flex;flex-direction:column;min-height:calc(100vh - 80px);overflow-y:auto;overflow-x:hidden!important;flex-grow:1;z-index:1}.chat-app-wrapper .wrapper .chat-area .overlay{position:absolute;top:0;inset-inline-start:0;width:100%;flex-shrink:0;background:linear-gradient(to bottom,#fff0,#fff 65% 100%);height:80px;z-index:10000}.chat-app-wrapper .wrapper .chat-area .chat-area-content{display:none;padding-bottom:80px;animation:fadeInLeft .5s}.chat-app-wrapper .wrapper .chat-area .chat-area-content.is-active{display:block}.chat-app-wrapper .wrapper .chat-area .chat-area-header{display:flex;position:sticky;top:0;inset-inline-start:0;z-index:2;width:100%;align-items:center;padding:20px;background:var(--white)}.chat-app-wrapper .wrapper .chat-area .chat-area-header .trigger{padding:8px;margin-inline-end:6px;border:none;background:none}.chat-app-wrapper .wrapper .chat-area .chat-area-header .trigger .iconify{height:20px;width:20px;font-size:20px}.chat-app-wrapper .wrapper .chat-area .chat-area-header .chat-area-group{flex-shrink:0;display:flex;margin-inline-start:auto}.chat-app-wrapper .wrapper .chat-area .chat-area-header .chat-area-group *{border:2px solid var(--white)}.chat-app-wrapper .wrapper .chat-area .chat-area-header .chat-area-group *+*{margin-inline-start:-5px}.chat-app-wrapper .wrapper .chat-area .chat-area-header .chat-area-group>span{width:32px;height:32px;background-color:color-mix(in oklab,var(--primary),white 48%);color:var(--primary);border-radius:var(--radius-rounded);display:flex;justify-content:center;align-items:center;font-size:.9rem;font-weight:500}.chat-app-wrapper .wrapper .chat-area .chat-area-header .chat-area-group>span span{position:relative;top:-1px;inset-inline-start:-1px;line-height:1;display:block;text-align:center;margin:0;border:none}.chat-app-wrapper .wrapper .chat-area .chat-area-header .chat-area-profile{width:32px;border-radius:var(--radius-rounded);object-fit:cover}.chat-app-wrapper .wrapper .chat-area .chat-area-header .chat-area-title{font-size:1.1rem;font-family:var(--font-alt);color:var(--dark-text);font-weight:700}.chat-app-wrapper .wrapper .chat-area .chat-area-main{flex-grow:1}.chat-app-wrapper .wrapper .chat-area .chat-area-main .chat-msg-img{height:40px;width:40px;border-radius:var(--radius-rounded);object-fit:cover}.chat-app-wrapper .wrapper .chat-area .chat-area-main .chat-msg-profile{flex-shrink:0;margin-top:auto;margin-bottom:-20px;position:relative}.chat-app-wrapper .wrapper .chat-area .chat-area-main .chat-msg-date{position:absolute;inset-inline-start:calc(100% + 12px);bottom:0;font-size:12px;font-family:var(--font);font-weight:500;color:#c0c7d2;white-space:nowrap}.chat-app-wrapper .wrapper .chat-area .chat-area-main .chat-msg{display:flex;padding:0 20px 45px}.chat-app-wrapper .wrapper .chat-area .chat-area-main .chat-msg .chat-msg-content{margin-inline-start:12px;max-width:50%;display:flex;flex-direction:column;align-items:flex-start}.chat-app-wrapper .wrapper .chat-area .chat-area-main .chat-msg .chat-msg-text{background-color:#f1f2f6;padding:15px;border-radius:20px;border-end-start-radius:0;line-height:1.5;font-family:var(--font);font-size:.95rem;font-weight:500}.chat-app-wrapper .wrapper .chat-area .chat-area-main .chat-msg .chat-msg-text+.chat-msg-text{margin-top:10px}.chat-app-wrapper .wrapper .chat-area .chat-area-main .chat-msg-text{color:var(--chat-text-color)}.chat-app-wrapper .wrapper .chat-area .chat-area-main .owner{flex-direction:row-reverse}.chat-app-wrapper .wrapper .chat-area .chat-area-main .owner .chat-msg-content{margin-inline-start:0;margin-inline-end:12px;align-items:flex-end}.chat-app-wrapper .wrapper .chat-area .chat-area-main .owner .chat-msg-text{background-color:var(--primary);color:var(--white);border-radius:20px;border-end-end-radius:0}.chat-app-wrapper .wrapper .chat-area .chat-area-main .owner .chat-msg-date{inset-inline-start:auto;inset-inline-end:calc(100% + 12px)}.chat-app-wrapper .wrapper .chat-area .chat-area-main .chat-msg-text img{max-width:300px;border-radius:10px;width:100%}.chat-app-wrapper .wrapper .chat-area .chat-area-footer{display:flex;border-top:1px solid #eef2f4;padding:10px 20px;align-items:center;background-color:var(--white);position:fixed;inset-inline-end:0;margin:0 auto;width:calc(100% - 680px);bottom:0;inset-inline-start:0}.chat-app-wrapper .wrapper .chat-area .chat-area-footer input{border:1px solid transparent;background-color:#f8f8fa;padding:12px;border-radius:var(--radius-large);font-size:15px;margin:0 12px;width:100%;transition:all .3s}.chat-app-wrapper .wrapper .chat-area .chat-area-footer input::placeholder{color:#a2a2a2}.chat-app-wrapper .wrapper .chat-area .chat-area-footer input:focus{background:var(--white);border-color:color-mix(in oklab,var(--fade-grey),black 3%);box-shadow:var(--light-box-shadow)}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content:hover>div .button{background:var(--fade-grey)}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content:hover>div .button .iconify{color:var(--primary)}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content>div{display:flex;justify-content:center;align-items:center;width:42px;height:42px}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content .button{width:28px;height:28px;border-radius:var(--radius-rounded);border:none;padding:0;display:flex;justify-content:center;align-items:center;transition:all .3s}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content .button .iconify{color:var(--placeholder);font-size:18px;height:18px;width:18px;transition:color .3s,background-color .3s,border-color .3s,height .3s,width .3s}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content .dropdown-content a{display:flex;align-items:center}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content .dropdown-content a .iconify{height:18px;width:18px;font-size:18px;color:var(--muted-grey)}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content .dropdown-content a .meta{margin-inline-start:12px}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content .dropdown-content a .meta span{display:block}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content .dropdown-content a .meta span:first-child{font-size:.9rem;font-weight:500;color:var(--dark-text)}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content .dropdown-content a .meta span:nth-child(2){font-size:.9rem;color:var(--muted-grey)}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-emoji{display:flex;justify-content:center;align-items:center;width:28px;height:42px}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-emoji:hover .button,.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-emoji:focus .button{background:var(--fade-grey)}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-emoji:hover .button .iconify,.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-emoji:focus .button .iconify{color:var(--primary)}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-emoji .button{width:28px;height:28px;border-radius:var(--radius-rounded);border:none;padding:0;display:flex;justify-content:center;align-items:center;transition:all .3s}.chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-emoji .button .iconify{color:var(--placeholder);font-size:18px;height:18px;width:18px;transition:color .3s,background-color .3s,border-color .3s,height .3s,width .3s}.is-dark .chat-app-wrapper .wrapper .chat-area{background:color-mix(in oklab,var(--dark-sidebar),white 10%);border-color:color-mix(in oklab,var(--dark-sidebar),white 12%)}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-header{background:color-mix(in oklab,var(--dark-sidebar),white 10%)}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-header .trigger .iconify,.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-header .chat-area-title{color:var(--dark-dark-text)}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-header .chat-area-group img{border-color:color-mix(in oklab,var(--dark-sidebar),white 10%)}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-header .chat-area-group>span{border-color:color-mix(in oklab,var(--dark-sidebar),white 10%);color:color-mix(in oklab,var(--primary),black 5%);background:color-mix(in oklab,var(--primary),white 20%)}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-main .chat-msg.owner .chat-msg-content .chat-msg-text{background:color-mix(in oklab,var(--primary),black 4%);color:var(--smoke-white)}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-main .chat-msg .chat-msg-content .chat-msg-text{background:color-mix(in oklab,var(--dark-sidebar),white 6%);color:var(--dark-dark-text)}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-footer{background:color-mix(in oklab,var(--dark-sidebar),white 10%);border-color:color-mix(in oklab,var(--dark-sidebar),white 12%)}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content .dropdown:hover>div>.button{background:color-mix(in oklab,var(--dark-sidebar),white 6%)!important}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content .dropdown:hover>div>.button .iconify{color:var(--primary)}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-content .dropdown .dropdown-menu .dropdown-content .dropdown-item .meta span:first-child{color:var(--dark-dark-text)}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-emoji:hover .button{background:color-mix(in oklab,var(--dark-sidebar),white 6%)!important}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-footer .add-emoji:hover .button .iconify{color:var(--primary)}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-footer input{background:color-mix(in oklab,var(--dark-sidebar),white 6%);color:var(--dark-dark-text)}.is-dark .chat-app-wrapper .wrapper .chat-area .chat-area-footer input:focus{border-color:color-mix(in oklab,var(--dark-sidebar),white 12%);background:color-mix(in oklab,var(--dark-sidebar),white 4%)}.chat-app-wrapper .wrapper{width:100%;display:flex;flex-grow:1;overflow:hidden}.chat-app-wrapper .wrapper .detail-area{width:340px;flex-shrink:0;border-inline-start:1px solid #eef2f4;margin-inline-start:auto;padding:30px 30px 0;display:flex;flex-direction:column;overflow:auto;overflow-x:hidden}.chat-app-wrapper .wrapper .detail-area .chat-side-content{text-align:center;transition:all .3s;padding:20px 10px}.chat-app-wrapper .wrapper .detail-area .chat-side-content .user-pic{position:relative;max-width:68px;margin:0 auto}.chat-app-wrapper .wrapper .detail-area .chat-side-content .user-name{margin-top:10px;font-family:var(--font-alt);font-size:1.2rem;font-weight:700;color:var(--dark-text)}.chat-app-wrapper .wrapper .detail-area .chat-side-content .user-job-title{font-family:var(--font);color:var(--light-text)}.chat-app-wrapper .wrapper .detail-area .chat-side-content .side-actions{padding:12px 0;display:flex;justify-content:center;gap:.5rem}.chat-app-wrapper .wrapper .detail-area .chat-side-content .side-actions .button{color:var(--light-text)}.chat-app-wrapper .wrapper .detail-area .chat-side-content .side-actions .button:hover,.chat-app-wrapper .wrapper .detail-area .chat-side-content .side-actions .button:focus{box-shadow:var(--light-box-shadow)}.chat-app-wrapper .wrapper .detail-area .chat-side-content .detail-photos{margin-top:30px;text-align:center;padding:0 12px}.chat-app-wrapper .wrapper .detail-area .chat-side-content .detail-photos .detail-photo-title{display:flex;align-items:center;font-weight:400;font-size:1rem;margin-bottom:20px;color:var(--light-text)}.chat-app-wrapper .wrapper .detail-area .chat-side-content .detail-photos .detail-photo-title .iconify{width:16px;font-size:16px;margin-inline-end:8px}.chat-app-wrapper .wrapper .detail-area .chat-side-content .detail-photos .detail-photo-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-column-gap:6px;grid-row-gap:6px;grid-template-rows:repeat(3,60px)}.chat-app-wrapper .wrapper .detail-area .chat-side-content .detail-photos .detail-photo-grid img{height:100%;width:100%;object-fit:cover;border-radius:8px;object-position:center}.chat-app-wrapper .wrapper .detail-area .chat-side-content .detail-photos .view-more{display:block;color:var(--primary);font-weight:600;font-size:15px;margin:25px 0}.is-dark .chat-app-wrapper .wrapper .detail-area{background:color-mix(in oklab,var(--dark-sidebar),white 4%);border-color:color-mix(in oklab,var(--dark-sidebar),white 12%)}.is-dark .chat-app-wrapper .wrapper .detail-area .chat-side-content .user-name{color:var(--dark-dark-text)}.is-dark .chat-app-wrapper .wrapper .detail-area .chat-side-content .detail-photos .view-more{color:var(--primary)}@media (width <= 767px){.chat-app-wrapper .chat-app-header .search-bar{display:none}.chat-app-wrapper .wrapper .conversation-area{position:fixed;top:0;inset-inline-start:0;height:100%;background:var(--white);z-index:10;transform:translate(calc(var(--transform-direction) * -100%));transition:all .3s}.chat-app-wrapper .wrapper .conversation-area.is-active{transform:translate(calc(var(--transform-direction) * 0))}.chat-app-wrapper .wrapper .chat-area .chat-area-main .chat-msg .chat-msg-content{max-width:100%}.chat-app-wrapper .wrapper .chat-area .chat-area-footer{width:100%;padding:10px}.chat-app-wrapper .wrapper .detail-area{display:none!important}}@media only screen and (device-width >= 768px) and (device-width <= 1024px) and (orientation: portrait){.chat-app-wrapper .chat-app-header .search-bar{display:none}.chat-app-wrapper .wrapper .conversation-area{position:fixed;top:0;inset-inline-start:0;height:100%;background:var(--white);z-index:10;transform:translate(calc(var(--transform-direction) * -100%));transition:all .3s}.chat-app-wrapper .wrapper .conversation-area.is-active{transform:translate(calc(var(--transform-direction) * 0))}.chat-app-wrapper .wrapper .chat-area .chat-area-footer{position:fixed;width:100%}.chat-app-wrapper .wrapper .detail-area{display:none!important}}@media only screen and (device-width >= 768px) and (device-width <= 1024px) and (orientation: landscape){.chat-app-wrapper .wrapper .detail-area{display:none!important}.chat-app-wrapper .wrapper .chat-area .chat-area-footer{width:calc(100% - 340px);margin-inline-start:340px}}