:root{
  --wpchat-header:#4a73a6;
  --wpchat-primary:#4a73a6;
  --wpchat-bg:#f3f5f7;
  --wpchat-bubble:#ffffff;
  --wpchat-muted:#7a7f87;
  --wpchat-vh: 1vh;
}

 #wpadminbar{display:none!important;}
 html{margin-top:0!important;}
 body.admin-bar{margin-top:0!important; padding-top:0!important;}

 html, body{max-width: 100%; overflow-x: hidden;}

 *, *:before, *:after{box-sizing: border-box;}

/* remove red-box icon */
.wpchat-icon{display:none;}

.wpchat-app{
  height: 100vh;
  height: calc(var(--wpchat-vh, 1vh) * 100);
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  display:flex;
  flex-direction:column;
  background: var(--wpchat-bg);
  border-radius: 10px;
  overflow:hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
}

.wpchat-header{
  height: calc(64px + env(safe-area-inset-top, 0px));
  background: var(--wpchat-header);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  padding-top: env(safe-area-inset-top, 0px);
  position: relative;
}

.wpchat-header-left{display:flex; align-items:center; gap:10px;}

.wpchat-me-btn{
  width:36px;
  height:36px;
  padding:0;
  border:0;
  border-radius: 8px;
  background: transparent;
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position: relative;
}

.wpchat-me-btn:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:22px;
  height:22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 12c2.761 0 5-2.239 5-5S14.761 2 12 2 7 4.239 7 7s2.239 5 5 5Zm0 2c-4.418 0-8 2.239-8 5v3h16v-3c0-2.761-3.582-5-8-5Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: .95;
}

.wpchat-me-btn:hover{background: rgba(255,255,255,.16);}

.wpchat-me-btn:active{transform: translateY(1px);}

.wpchat-me-btn:focus{outline: 2px solid rgba(255,255,255,.55); outline-offset: 2px;}

.wpchat-sidebar-toggle{
  width:36px;
  height:36px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 8px;
  position: relative;
}

.wpchat-sidebar-toggle:active{transform: translateY(1px);}

.wpchat-sidebar-toggle:focus{outline: 2px solid rgba(255,255,255,.55); outline-offset: 2px;}

.wpchat-sidebar-toggle:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:20px;
  height:2px;
  display:block;
  background: rgba(255,255,255,.95);
  border-radius: 2px;
  box-shadow: 0 -6px 0 rgba(255,255,255,.95), 0 6px 0 rgba(255,255,255,.95);
}

.wpchat-icon{
  width:32px;
  height:32px;
  position: relative;
  background:
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) right 6px top 10px/10px 2px no-repeat,
    linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,.95)) right 10px top 6px/2px 10px no-repeat;
}

.wpchat-icon:before{
  content:"";
  position:absolute;
  left:2px;
  top:7px;
  width:21px;
  height:14px;
  border:2px solid rgba(255,255,255,.95);
  border-radius:8px;
}

.wpchat-icon:after{
  content:"";
  position:absolute;
  left:12px;
  top:18px;
  width:8px;
  height:8px;
  border-left:2px solid rgba(255,255,255,.95);
  border-bottom:2px solid rgba(255,255,255,.95);
  transform: rotate(-45deg);
}

.wpchat-title{font-size:18px; font-weight:700;}
.wpchat-status{
  position:absolute;
  right:56px;
  top: calc(50% - env(safe-area-inset-top, 0px) / 2);
  transform:translateY(-50%);
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.95);
  pointer-events:none;
  white-space:nowrap;
}

.wpchat-title{
  position:absolute;
  left:50%;
  top: calc(50% - env(safe-area-inset-top, 0px) / 2);
  transform:translate(calc(-50% + var(--wpchat-title-shift, 0px)),-50%);
  max-width: 62%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
}

.wpchat-status.is-error{color:#ff4d4f;}

.wpchat-header-right{display:flex; align-items:center; gap:10px;}
.wpchat-indicator{width:10px; height:10px; border-radius:50%; background:#f6c343;}
.wpchat-indicator.is-ok{background:#36d399;}
.wpchat-indicator.is-bad{background:#f87171;}

.wpchat-body{flex:1; display:flex; flex-direction:column; min-height:0;}
.wpchat-toolbar{padding:10px 14px;}
.wpchat-messages{flex:1; overflow:auto; padding: 6px 12px 12px; min-height:0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;}

 .wpchat-scrolldown-wrap{
   position: sticky;
   bottom: 10px;
   display:flex;
   justify-content:flex-end;
   pointer-events:none;
   z-index: 5;
 }

 .wpchat-scrolldown{
   pointer-events:auto;
   display:inline-flex;
   align-items:center;
   gap:10px;
   border:none;
   cursor:pointer;
   border-radius: 999px;
   padding: 8px 12px;
   background: rgba(74,115,166,.95);
   color:#fff;
   font-weight:800;
   box-shadow: 0 8px 20px rgba(0,0,0,.18);
 }

 .wpchat-scrolldown-count{
   display:inline-flex;
   align-items:center;
   justify-content:center;
   min-width: 20px;
   height: 20px;
   padding: 0 6px;
   border-radius: 999px;
   background: rgba(255,255,255,.22);
   color:#fff;
   font-size: 12px;
   font-weight: 900;
 }

 .wpchat-scrolldown:active{transform: translateY(1px);}

.wpchat-shell{flex:1; min-height:0; display:flex; position:relative; overflow:hidden;}
.wpchat-main{flex:1; min-width:0; display:flex; flex-direction:column; min-height:0;}

.wpchat-sidebar{
  width: 280px;
  max-width: 72vw;
  background: #fff;
  border-right: 1px solid rgba(0,0,0,.08);
  display:none;
  flex-direction:column;
  min-height:0;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
}

.wpchat-sidebar-head{padding: 12px 12px 10px; border-bottom: 1px solid rgba(0,0,0,.06);}
.wpchat-sidebar-title{font-weight:900; color: rgba(0,0,0,.8);}
.wpchat-sidebar-list{flex:1; overflow:auto; min-height:0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;}

.wpchat-app.has-dm-sidebar .wpchat-sidebar{display:flex;}

.wpchat-app.has-dm-sidebar .wpchat-sidebar{
  transform: translateX(-100%);
  transition: transform .22s ease;
}

.wpchat-sidebar-swipe-hint{display:none;}

.wpchat-app.has-dm-sidebar.is-sidebar-open .wpchat-sidebar{transform: translateX(0);}

.wpchat-app.has-dm-sidebar .wpchat-main{
  transition: margin-left .22s ease;
}

.wpchat-app.has-dm-sidebar.is-sidebar-open .wpchat-main{
  margin-left: min(280px, 72vw);
}

@media (max-width: 560px){
  .wpchat-app.has-dm-sidebar.is-sidebar-open .wpchat-main{margin-left: 0;}
  .wpchat-sidebar{width:260px;}

  .wpchat-app.has-dm-sidebar.is-sidebar-open .wpchat-shell:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,.12);
    z-index: 9;
  }

  .wpchat-sidebar-swipe-hint{
    position:absolute;
    top:50%;
    right: 8px;
    transform: translateY(-50%);
    width: 28px;
    height: 72px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    display: none;
    align-items:center;
    justify-content:center;
    padding: 0;
    cursor: pointer;
    z-index: 12;
  }

  .wpchat-app.has-dm-sidebar.is-sidebar-open .wpchat-sidebar .wpchat-sidebar-swipe-hint{display:flex;}

  .wpchat-sidebar-swipe-hint:before{
    content: "\2039";
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    color: rgba(74,115,166,.95);
  }
}

.wpchat-fab{
  position: fixed;
  right: 14px;
  top: 120px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 4px;
  z-index: 99996;
  user-select: none;
  touch-action: none;
}

.wpchat-fab-count{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,77,79,.45);
  color: #ff4d4f;
  font-weight: 900;
  font-size: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.wpchat-fab-arrow{
  width: 22px;
  height: 22px;
  font-size: 0;
  line-height: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235a606a' d='M12 22a2.2 2.2 0 0 0 2.2-2.2h-4.4A2.2 2.2 0 0 0 12 22zm7-6V11a7 7 0 1 0-14 0v5L3 18v1h18v-1l-2-2z'/%3E%3C/svg%3E");
  position: relative;
  top: -4px;
}

.wpchat-fab.is-unread .wpchat-fab-arrow{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff4d4f' d='M12 22a2.2 2.2 0 0 0 2.2-2.2h-4.4A2.2 2.2 0 0 0 12 22zm7-6V11a7 7 0 1 0-14 0v5L3 18v1h18v-1l-2-2z'/%3E%3C/svg%3E");
}

.wpchat-fab.is-dragging{opacity: .92;}

 .wpchat-maint{
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   bottom: 0;
   display:flex;
   align-items:center;
   justify-content:center;
   background: rgba(10, 12, 16, .75);
   padding: 18px;
   z-index: 100000;
 }

 .wpchat-maint-card{
   width: min(520px, 100%);
   background: #fff;
   border-radius: 14px;
   padding: 16px 16px 14px;
   box-shadow: 0 18px 48px rgba(0,0,0,.25);
 }

 .wpchat-maint-title{font-size: 18px; font-weight: 900; color: rgba(0,0,0,.85);}
 .wpchat-maint-content{margin-top: 10px; font-size: 13px; line-height: 1.45; color: rgba(0,0,0,.72); white-space: pre-wrap; word-break: break-word;}

.wpchat-sysnotice{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 99999;
}

.wpchat-sysnotice.is-open{display:flex;}

.wpchat-sysnotice-card{
  width: min(520px, 100%);
  background: #fff;
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.08);
  position: relative;
}

.wpchat-sysnotice-close{
  position: absolute;
  right: 10px;
  top: 8px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 30px;
}

.wpchat-sysnotice-title{font-size: 18px; font-weight: 900; color: rgba(0,0,0,.85); padding-right: 40px;}
.wpchat-sysnotice-content{margin-top: 10px; font-size: 13px; line-height: 1.45; color: rgba(0,0,0,.72); white-space: pre-wrap; word-break: break-word;}

.wpchat-thread{
  display:flex;
  gap: 10px;
  padding: 10px 44px 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  cursor:pointer;
  position: relative;
}

.wpchat-thread:hover{background: rgba(0,0,0,.03);}
.wpchat-thread.is-active{background: rgba(74,115,166,.10);}

.wpchat-thread-avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #7a8796;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 17px;
  flex: 0 0 auto;
}

.wpchat-thread-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display:block;
}

.wpchat-thread-main{flex:1; min-width:0;}
.wpchat-thread-top{display:flex; align-items:center; justify-content:flex-start; gap: 8px;}
.wpchat-thread-name{font-weight: 900; font-size: 13px; color: rgba(0,0,0,.82); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wpchat-thread-time{font-size: 12px; color: rgba(0,0,0,.45); white-space:nowrap; margin-left:auto;}

.wpchat-thread-flags{display:flex; align-items:center; gap: 6px; flex: 0 0 auto;}
.wpchat-thread-flag{display:inline-block; width: 14px; height: 14px; opacity: .75;}

.wpchat-thread-more{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(0,0,0,.55);
  font-size: 18px;
  line-height: 28px;
  cursor: pointer;
  opacity: .0;
}

.wpchat-thread:hover .wpchat-thread-more{opacity: 1;}
.wpchat-thread-more:hover{background: rgba(0,0,0,.06); color: rgba(0,0,0,.75);}

@media (hover: none){
  .wpchat-thread-more{opacity: 1;}
}

.wpchat-thread.is-muted .wpchat-thread-name{color: rgba(0,0,0,.62);}
.wpchat-thread.is-blocked{opacity: .65;}

.wpchat-thread-menu{
  position: fixed;
  width: 220px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
  padding: 8px;
  z-index: 99999;
}

.wpchat-thread-menu-item{
  width: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  color: rgba(0,0,0,.80);
}

.wpchat-thread-menu-item:hover{background: rgba(0,0,0,.05);}
.wpchat-thread-menu-item.is-danger{color: #ff4d4f;}
.wpchat-thread-menu-item.is-danger:hover{background: rgba(255,77,79,.10);}

.wpchat-thread-menu-icon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: .85;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

.wpchat-thread-menu-text{flex: 1 1 auto; text-align:left;}

.ico-pin{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235a606a' d='M14 3l7 7-2 2-2-2-4 4v6l-2 2v-8l-4-4-2 2-2-2 7-7z'/%3E%3C/svg%3E");}
.ico-belloff{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235a606a' d='M19 17H7.8l-2 2H4l2.2-2.2V10a5.8 5.8 0 018-5.5V3h2v1.7A5.8 5.8 0 0120 10v7h-1zm-6 5a2 2 0 01-2-2h4a2 2 0 01-2 2z'/%3E%3Cpath fill='%235a606a' d='M4 4l16 16-1.4 1.4L2.6 5.4z'/%3E%3C/svg%3E");}
.ico-unread{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235a606a' d='M4 4h16v12H7l-3 3V4zm4 4h8v2H8V8zm0 4h6v2H8v-2z'/%3E%3C/svg%3E");}
.ico-block{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235a606a' d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm6 10a5.9 5.9 0 01-.9 3.1L8.9 6.9A6 6 0 0118 12zM6 12a5.9 5.9 0 01.9-3.1l8.2 8.2A6 6 0 016 12z'/%3E%3C/svg%3E");}
.ico-broom{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235a606a' d='M15.5 2l6.5 6.5-1.4 1.4L14.1 3.4 15.5 2zM13.4 4.1l6.5 6.5-7.8 7.8H5.6l7.8-7.8zM4 20h10v2H4v-2z'/%3E%3C/svg%3E");}
.ico-trash{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff4d4f' d='M9 3h6l1 2h5v2H3V5h5l1-2zm1 6h2v10h-2V9zm4 0h2v10h-2V9zM7 9h2v10H7V9z'/%3E%3C/svg%3E");}

.wpchat-thread-bottom{display:flex; align-items:center; justify-content:space-between; gap: 8px; margin-top: 2px;}
.wpchat-thread-preview{font-size: 12px; color: rgba(0,0,0,.55); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wpchat-thread-preview-name{color: rgba(74,115,166,.95); font-weight: 800;}
.wpchat-thread-preview-text{color: inherit; font-weight: 500;}
.wpchat-thread-unread{min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(74,115,166,.90); color:#fff; font-weight:900; font-size: 12px; display:flex; align-items:center; justify-content:center;}

.wpchat-msg{display:flex; gap:6px; margin: 4px 0; align-items:flex-end; width:100%;}
.wpchat-msg.is-me{flex-direction: row-reverse; justify-content:flex-start;}
.wpchat-msg .wpchat-avatar{
  width:42px; height:42px;
  border-radius:50%;
  background:#7a8796;
  color:#fff;
  font-weight:700;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  box-shadow: 0 1px 6px rgba(0,0,0,.08);
}

.wpchat-msg .wpchat-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display:block;
}
.wpchat-msg .wpchat-avatar.is-clickable{cursor:pointer; user-select:none;}
.wpchat-msg .wpchat-avatar.is-clickable:hover{filter: brightness(1.06);}

.wpchat-msg.is-cont{margin-top: 1px;}
.wpchat-msg.is-cont .wpchat-avatar{visibility:hidden;}
.wpchat-msg.is-cont .wpchat-bubble-head{display:none;}
.wpchat-msg.is-cont:not(.is-me) .wpchat-bubble{border-top-left-radius: 10px;}
.wpchat-msg.is-cont.is-me .wpchat-bubble{border-top-right-radius: 10px;}

.wpchat-btn-back{padding: 6px 12px; border-radius:999px; font-weight:800;}

.wpchat-back-unread{
  margin-left: 8px;
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: rgba(0,0,0,.78);
  font-size: 12px;
  font-weight: 900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.wpchat-profile{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 99998;
}

.wpchat-profile.is-open{display:flex;}

.wpchat-profile-card{
  width: min(420px, 100%);
  background: #fff;
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.08);
  position: relative;
}

.wpchat-profile-close{
  position: absolute;
  right: 10px;
  top: 8px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  font-size: 20px;
  line-height: 30px;
}

.wpchat-profile-avatar{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  margin: 4px auto 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:#fff;
  font-weight: 900;
}

.wpchat-profile-avatar img{width:100%; height:100%; object-fit:cover;}
.wpchat-profile-avatar-text{font-size: 24px; line-height: 1;}

.wpchat-profile-name{font-size: 18px; font-weight: 900; color: rgba(0,0,0,.85); padding-right: 0; text-align:center;}
.wpchat-profile-meta{margin-top: 6px; font-size: 13px; color: rgba(0,0,0,.55); display:none;}
.wpchat-profile-send{margin-top: 14px; width: 100%;}

.wpchat-me{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 99998;
}

.wpchat-me.is-open{display:flex;}

.wpchat-me-card{
  width: min(520px, 100%);
  background: #f3f5f7;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.08);
  position: relative;
}

.wpchat-me-close{
  position: absolute;
  right: 10px;
  top: 8px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,.06);
  cursor: pointer;
  font-size: 20px;
  line-height: 34px;
}

.wpchat-me-title{
  font-size: 18px;
  font-weight: 900;
  color: rgba(0,0,0,.85);
  text-align: center;
  margin-bottom: 12px;
}

.wpchat-me-avatarwrap{
  position: relative;
  width: 86px;
  height: 86px;
  margin: 0 auto 12px;
  cursor: pointer;
}

.wpchat-me-avatar{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  object-fit: cover;
  background: transparent;
  border: 1px solid rgba(0,0,0,.12);
  display:block;
  cursor: pointer;
}

.wpchat-me-avatar.is-default{
  object-fit: contain;
}

 .wpchat-me-avatar-text{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 28px;
  pointer-events: none;
 }

.wpchat-me-avatar-pick{
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  display: none;
}

.wpchat-me-loading{
  text-align:center;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0,0,0,.55);
  margin-bottom: 10px;
}

.wpchat-me-group{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  overflow:hidden;
  margin-bottom: 12px;
}

.wpchat-me-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.wpchat-me-row:last-child{border-bottom:none;}

.wpchat-me-row-label{
  font-weight: 800;
  color: rgba(0,0,0,.80);
}

.wpchat-me-row-value{
  color: rgba(0,0,0,.55);
  font-weight: 700;
  max-width: 62%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.wpchat-me-row.is-editable{cursor:pointer;}
.wpchat-me-row.is-editable:active{background: rgba(0,0,0,.03);}
.wpchat-me-row.is-editable .wpchat-me-row-value::after{content: ' ›'; color: rgba(0,0,0,.35);}

.wpchat-avatarbg-swatch{
  display:inline-block;
  width: 14px;
  height: 14px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.12);
  vertical-align: middle;
  margin-right: 8px;
}

.wpchat-avatarbg-text{vertical-align: middle;}

.wpchat-me-edit-palette{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 36px);
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
  max-height: 46vh;
  overflow-y: auto;
  padding-right: 2px;
}

.wpchat-me-edit-color{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  cursor: pointer;
  background: transparent;
}

.wpchat-me-edit-color.is-none{
  grid-column: 1 / -1;
  width: 100%;
  height: 36px;
  border-radius: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.75);
  background: rgba(0,0,0,.04);
}

.wpchat-me-edit-color.is-active{
  box-shadow: 0 0 0 3px rgba(74,115,166,.35);
  border-color: rgba(74,115,166,.55);
}

.wpchat-me-edit{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 99999;
}

.wpchat-me-edit.is-open{display:flex;}

.wpchat-me-edit-card{
  width: min(460px, 100%);
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.08);
  max-height: 82vh;
  overflow-y: auto;
}

.wpchat-me-edit-title{
  font-size: 16px;
  font-weight: 900;
  color: rgba(0,0,0,.85);
  margin-bottom: 10px;
}

.wpchat-me-edit-input,
.wpchat-me-edit-textarea,
.wpchat-me-edit-select,
.wpchat-me-edit-date{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

.wpchat-me-edit-textarea{resize:none; min-height: 92px;}

.wpchat-me-edit-actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}

.wpchat-me-edit-btn{
  flex: 1;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
}

.wpchat-me-edit-btn.is-cancel{background: rgba(0,0,0,.06); color: rgba(0,0,0,.75);}
.wpchat-me-edit-btn.is-ok{background: var(--wpchat-primary); color:#fff;}

.wpchat-confirm{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 99999;
}

.wpchat-confirm-card{
  width: min(460px, 100%);
  background: #fff;
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.08);
}

.wpchat-confirm-head{display:flex; align-items:center; gap: 12px;}
.wpchat-confirm-avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(74,115,166,.92);
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  font-size: 19px;
  flex: 0 0 auto;
}

.wpchat-confirm-title{font-size: 18px; font-weight: 900; color: rgba(0,0,0,.85);}

.wpchat-confirm-msg{
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(0,0,0,.70);
  white-space: pre-line;
}

.wpchat-confirm-actions{margin-top: 16px; display:flex; justify-content:flex-end; gap: 14px;}

.wpchat-confirm-btn{
  border: none;
  background: transparent;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
}

.wpchat-confirm-btn.is-cancel{color: var(--wpchat-primary);}
.wpchat-confirm-btn.is-ok{color: var(--wpchat-primary);}
.wpchat-confirm-btn.is-ok.is-danger{color: #ff4d4f;}
.wpchat-confirm-btn:hover{background: rgba(0,0,0,.04);}
.wpchat-confirm-btn.is-ok.is-danger:hover{background: rgba(255,77,79,.10);}

.wpchat-bubble{
  background: var(--wpchat-bubble);
  border-radius: 16px;
  padding: 6px 8px;
  max-width: 64%;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.05);
}

.wpchat-bubble.wpchat-bubble-media{
  display: inline-block;
  width: auto;
  max-width: 100%;
}

.wpchat-bubble.wpchat-bubble-media .wpchat-bubble-head{justify-content:flex-start;}
.wpchat-bubble.wpchat-bubble-media .wpchat-bubble-time{margin-left:auto;}

.wpchat-msg.is-me .wpchat-bubble{background: rgba(74,115,166,.12);}

.wpchat-bubble-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:2px;}
.wpchat-bubble-name{font-size:12px; font-weight:800; color: var(--wpchat-primary);}
.wpchat-bubble-time{font-size:10px; color: #9aa3ad; white-space:nowrap;}

.wpchat-bubble-tailtime{
  font-size: 10px;
  color: #9aa3ad;
  white-space: nowrap;
  margin-top: 4px;
  text-align: right;
}

.wpchat-bubble .wpchat-text{white-space:pre-wrap; word-break:break-word; font-size:13px; line-height:1.25;}
.wpchat-bubble .wpchat-quote{
  margin: 6px 0 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  border-left: 4px solid rgba(74,115,166,.75);
  cursor: pointer;
}

.wpchat-quote-preview .wpchat-quote-right{font-size:12px; color:#666; line-height:1.2; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wpchat-quote-thumb-placeholder{background: rgba(0,0,0,.06);}
.wpchat-quote-preview.is-loading .wpchat-quote-thumb-placeholder{background: linear-gradient(90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.10) 37%, rgba(0,0,0,.06) 63%); background-size: 400% 100%; animation: wpchat-shimmer 1.2s ease infinite;}

@keyframes wpchat-shimmer{0%{background-position: 100% 0;}100%{background-position: 0 0;}}

.wpchat-bubble .wpchat-quote-user{font-size: 12px; font-weight: 900; color: rgba(0,0,0,.75);}
.wpchat-bubble .wpchat-quote-text{margin-top: 2px; font-size: 12px; color: rgba(0,0,0,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.wpchat-msg.is-quote-target .wpchat-bubble{box-shadow: 0 0 0 2px rgba(74,115,166,.28), 0 2px 12px rgba(0,0,0,.06);}
.wpchat-meta{font-size:12px; color: var(--wpchat-muted); margin-top:6px;}

.wpchat-composer{background:#fff; padding: 8px 14px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(0,0,0,.06);}
.wpchat-replybar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  margin: 2px 0 8px;
  border-radius: 12px;
  background: rgba(74,115,166,.10);
  border: 1px solid rgba(74,115,166,.18);
}

 .wpchat-draftbar{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  margin: 2px 0 8px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.10);
 }

 .wpchat-draftbar.is-open{display:flex;}

 .wpchat-draft-items{
  display:flex;
  flex:1;
  min-width:0;
  gap: 8px;
  overflow:auto;
 }

 .wpchat-draft-item{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  max-width: 240px;
 }

.wpchat-draft-thumb{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  overflow:hidden;
  background: rgba(0,0,0,.04);
  flex: 0 0 auto;
  position: relative;
}

.wpchat-draft-thumb.is-video:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width:16px;
  height:16px;
  background: rgba(0,0,0,.40);
  border-radius: 999px;
}

.wpchat-draft-thumb.is-video:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-40%, -50%);
  width:0;
  height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-left:7px solid rgba(255,255,255,.92);
  z-index: 1;
}

.wpchat-draft-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
 }

 .wpchat-draft-name{
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.72);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
 }

 .wpchat-draft-remove{
  border:none;
  background: transparent;
  cursor:pointer;
  width: 24px;
  height: 24px;
  border-radius: 10px;
  font-size: 18px;
  line-height: 22px;
  color: rgba(0,0,0,.55);
 }

 .wpchat-draft-remove:hover{background: rgba(0,0,0,.06); color: rgba(0,0,0,.75);}

 .wpchat-draft-clear{
  border:none;
  background: transparent;
  cursor:pointer;
  font-weight: 900;
  font-size: 12px;
  color: rgba(0,0,0,.62);
  padding: 6px 10px;
  border-radius: 10px;
 }

 .wpchat-draft-clear:hover{background: rgba(0,0,0,.06); color: rgba(0,0,0,.78);}

.wpchat-replybar-text{font-size: 12px; font-weight: 900; color: rgba(0,0,0,.72); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.wpchat-replybar-close{border:none; background:transparent; cursor:pointer; font-size:18px; line-height:18px; width:28px; height:28px; border-radius: 10px; color: rgba(0,0,0,.55);}
.wpchat-replybar-close:hover{background: rgba(0,0,0,.06); color: rgba(0,0,0,.75);}

.wpchat-input-row{display:flex; gap:10px; align-items:flex-end;}
.wpchat-input-wrap{flex:1 1 auto; min-width:0;}

#wpchat-input{
  width:100%;
  resize:none;
  border:1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  padding: 3px 8px;
  outline:none;
  font: inherit;
  line-height: 1.2;
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  overflow-y:hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#wpchat-input::-webkit-scrollbar{width:0; height:0;}
#wpchat-input::-webkit-scrollbar-button{width:0; height:0; display:none;}

.wpchat-actions{margin:5px 0 0; width:100%; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.wpchat-file{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}

.wpchat-actions{justify-content:space-between;}
.wpchat-actions-left{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.wpchat-actions-right{display:flex; gap:10px; align-items:center;}

.wpchat-composer .wpchat-actions-left .wpchat-btn-pill{padding: 4px 12px;}
.wpchat-composer .wpchat-actions-right .wpchat-btn-icon{width:32px; height:32px;}

.wpchat-btn{border:none; cursor:pointer; border-radius: 22px; padding: 10px 14px; font-weight:700;}
.wpchat-btn-primary{background: var(--wpchat-primary); color:#fff; padding: 12px 18px; min-height:52px;}
#wpchat-send{flex:0 0 auto; min-width:86px; padding: 0 18px; height:38px; min-height:38px; max-height:38px; border-radius:999px; box-sizing:border-box; border:1px solid transparent;}
.wpchat-btn-secondary{background: rgba(0,0,0,.06);}
.wpchat-btn-pill{background: var(--wpchat-primary); color: #fff; padding: 10px 18px;}

.wpchat-composer #wpchat-send{height:38px; min-height:38px; max-height:38px; padding: 0 12px;}

.wpchat-btn-emoji{
  width: 44px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
}

.wpchat-btn-plus{
  width: 44px;
  height: 38px;
  padding: 0;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  line-height: 1;
}

.wpchat-plus-panel{
  margin-top: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 12px;
}

.wpchat-plus-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.wpchat-plus-item{
  border: none;
  background: rgba(0,0,0,.05);
  border-radius: 14px;
  padding: 10px 8px;
  height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.80);
}

.wpchat-plus-item:hover{background: rgba(0,0,0,.10);}

.wpchat-plus-item::before{
  display: block;
  font-size: 22px;
  line-height: 1;
}

#wpchat-pick-image::before{content: '🖼️';}
#wpchat-pick-video::before{content: '🎬';}
#wpchat-record::before{content: '🎤';}
#wpchat-pick-file::before{content: '📄';}
#wpchat-home::before{content: '🏠';}

.wpchat-emoji-panel{
  position: fixed;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  border-radius: 12px;
  padding: 10px;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  z-index: 99997;
  max-height: 200px;
  overflow: auto;
}

.wpchat-emoji-item{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: rgba(0,0,0,.05);
  cursor: pointer;
  font-size: 18px;
  line-height: 36px;
}

.wpchat-emoji-item:hover{background: rgba(0,0,0,.10);}
.wpchat-btn-icon{
  width:42px;
  height:42px;
  padding:0;
  border-radius:999px;
  background: #fff;
  color: rgba(0,0,0,.75);
  border: 1px solid rgba(0,0,0,.12);
}
.wpchat-btn:disabled{opacity:.6; cursor:not-allowed;}

.wpchat-bubble img{max-width:100%; max-height:220px; height:auto; border-radius:10px; display:block; cursor: zoom-in;}
.wpchat-bubble video{max-width:100%; max-height:260px; height:auto; border-radius:10px; display:block; cursor: zoom-in;}
.wpchat-bubble video.wpchat-sticker-video{max-height:180px;}
.wpchat-bubble a{color: var(--wpchat-primary); text-decoration:none;}

 .wpchat-media-wrap{
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  border-radius: 10px;
 }

 .wpchat-media-wrap.is-block{
  display: block;
  width: 100%;
  height: 100%;
 }

 .wpchat-bubble:not(.wpchat-bubble-media) .wpchat-media-wrap.wpchat-media-loading{
  width: min(220px, 100%);
  aspect-ratio: 1 / 1;
 }

 .wpchat-bubble:not(.wpchat-bubble-media) .wpchat-video-thumb.wpchat-media-loading{
  width: min(220px, 100%);
  aspect-ratio: 1 / 1;
 }

 .wpchat-media-loading:before,
 .wpchat-media-loading:after{
  pointer-events: none;
 }

 .wpchat-media-loading:before{
  content: "正在加载...";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.48);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 12px;
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
 }

 .wpchat-media-loading:after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-left: 0;
  margin-top: 0;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.92);
  box-sizing: border-box;
  animation: wpchatSpinCenter 1s linear infinite;
 }

 @keyframes wpchatSpin{
  from{transform: rotate(0deg);}
  to{transform: rotate(360deg);}
 }

 @keyframes wpchatSpinCenter{
  from{transform: translate(-50%, -50%) rotate(0deg);}
  to{transform: translate(-50%, -50%) rotate(360deg);}
 }

 .wpchat-upload-ring{
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
 }

 .wpchat-video-thumb{
  position: relative;
  display: inline-block;
  max-width: 100%;
  cursor: pointer;
  overflow: hidden;
  border-radius: 10px;
 }

 .wpchat-video-thumb img{cursor: pointer;}

 .wpchat-video-play{opacity:0;}
 .wpchat-video-thumb.is-thumb-ready .wpchat-video-play{opacity:1;}
 .wpchat-video-thumb.is-playing .wpchat-video-play{opacity:0;}

 .wpchat-video-play{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 0;
  border: 0;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2234%22%20fill%3D%22black%22%20fill-opacity%3D%220.35%22%2F%3E%3Cpolygon%20points%3D%2248%2C46%2048%2C74%2072%2C60%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  pointer-events: none;
  transition: opacity .12s ease;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.22));
 }

.wpchat-gallery{
  width: 360px;
  max-width: 100%;
  gap: 4px;
  border-radius: 12px;
  overflow: hidden;
}

.wpchat-gallery img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  max-height: none;
}

 .wpchat-gallery .wpchat-video-thumb{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
 }

 .wpchat-gallery .wpchat-media-wrap{
  border-radius: 0;
 }

 .wpchat-gallery .wpchat-video-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  max-height: none;
 }

.wpchat-gallery video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  max-height: none;
}

.wpchat-gallery-n2{aspect-ratio: 2 / 1;}
.wpchat-gallery-n3{aspect-ratio: 2 / 2;}
.wpchat-gallery-n4{aspect-ratio: 2 / 3;}
.wpchat-gallery-n5{aspect-ratio: 2 / 3;}
.wpchat-gallery-n6{aspect-ratio: 3 / 2;}
.wpchat-gallery-n7,.wpchat-gallery-n8{aspect-ratio: 6 / 5;}
.wpchat-gallery-n9{aspect-ratio: 1 / 1;}

.wpchat-img-preview{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.75);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: hidden;
  overscroll-behavior: contain;
  z-index: 99999;
}

.wpchat-img-preview.is-open{display:flex;}

.wpchat-preview-wrap{position:relative; display:flex; align-items:center; justify-content:center; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;}

.wpchat-preview-spinner{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 5px solid rgba(255,255,255,.22);
  border-top-color: rgba(255,255,255,.92);
  animation: wpchatSpin 0.9s linear infinite;
  display:flex;
  align-items:center;
  justify-content:center;
}

.wpchat-preview-loading-text{
  position:absolute;
  left: 50%;
  top: calc(50% + 46px);
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  white-space: nowrap;
}

.wpchat-preview-error{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  font-size: 13px;
}

@keyframes wpchatSpin{from{transform: translate(-50%, -50%) rotate(0deg);}to{transform: translate(-50%, -50%) rotate(360deg);}}

.wpchat-img-preview-img{
  max-width: 80vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
}

.wpchat-img-preview-img.is-zoomed{cursor: grab;}
.wpchat-img-preview-img.is-zoomed:active{cursor: grabbing;}

.wpchat-img-preview-video{
  max-width: 80vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  cursor: zoom-out;
}

@media (min-width: 1024px){
  .wpchat-img-preview-img{max-width: 60vw; max-height: 60vh;}
  .wpchat-img-preview-video{max-width: 60vw; max-height: 60vh;}
}

.wpchat-need-login{padding:16px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:10px;}

.wpchat-login-wrap{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px 14px;
  background: #ffffff;
}

.wpchat-login-card{
  width: min(560px, 100%);
  background: #fff;
  border-radius: 12px;
  padding: 34px 26px 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
}

.wpchat-login-title{
  text-align:center;
  font-size: 28px;
  font-weight: 800;
  color: #2b2f36;
  margin-bottom: 20px;
}

.wpchat-login-title-strong{margin-left: 8px;}

.wpchat-login-tabs{
  display:flex;
  justify-content:center;
  gap: 18px;
  margin: 6px 0 18px;
}

.wpchat-login-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width: 220px;
  height: 54px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--wpchat-primary);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
}

.wpchat-login-form input{
  width:100%;
  height: 54px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.18);
  padding: 0 14px;
  font: inherit;
  margin: 14px 0 0;
  outline: none;
}

.wpchat-login-status{
  min-height: 18px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--wpchat-muted);
}

.wpchat-login-status.is-error{color:#ff4d4f;}

.wpchat-login-submit{
  width:100%;
  height: 56px;
  border-radius: 10px;
  border: none;
  margin-top: 14px;
  background: var(--wpchat-primary);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  cursor: pointer;
}

 .wpchat-login-submit.is-secondary{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  background: rgba(74,115,166,.12);
  color: var(--wpchat-primary);
  border: 1px solid rgba(74,115,166,.25);
 }

.wpchat-login-submit:disabled{opacity:.6; cursor:not-allowed;}

.wpchat-reg-form{margin-top: 6px;}
.wpchat-reg-row{display:flex; gap: 14px;}
.wpchat-reg-row .wpchat-field{flex:1;}

.wpchat-field{
  display:flex;
  align-items:stretch;
  width:100%;
  height: 54px;
  margin: 14px 0 0;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.18);
  overflow:hidden;
  background:#fff;
}

.wpchat-field-label{
  min-width: 92px;
  padding: 0 14px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  color: rgba(0,0,0,.65);
  background: rgba(74,115,166,.12);
  border-right: 1px solid rgba(0,0,0,.08);
  font-weight: 700;
  font-size: 14px;
  white-space:nowrap;
}

.wpchat-field input,
.wpchat-field select{
  flex:1;
  border:none;
  outline:none;
  font: inherit;
  padding: 0 14px;
  background: #fff;
  height: 100%;
}

.wpchat-field select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.55) 50%),
    linear-gradient(135deg, rgba(0,0,0,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 22px,
    calc(100% - 12px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.wpchat-login-links{
  display:flex;
  justify-content:center;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.wpchat-login-links a{
  color: var(--wpchat-primary);
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
}

.wpchat-reg-links{
  display:flex;
  justify-content:center;
  gap: 18px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.wpchat-reg-links-home{
  border-top: none;
  padding-top: 0;
}

.wpchat-reg-link{
  color: var(--wpchat-primary);
  text-decoration:none;
  font-weight: 700;
  font-size: 13px;
}

.wpchat-reg-link-login:before,
.wpchat-reg-link-home:before{
  display:inline-block;
  margin-right: 8px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  vertical-align: -1px;
}

.wpchat-reg-link-login:before{content:"\2192";}
.wpchat-reg-link-home:before{content:"\2302";}

@media (max-width: 640px){
  body:after{content:""; display:block; height: 1px;}
  .wpchat-app{border-radius: 0;}
  .wpchat-shell{max-width: 100vw; overflow-x: hidden;}
  .wpchat-messages{max-width: 100vw; overflow-x: hidden;}
  .wpchat-msg{max-width: 100%;}
  .wpchat-bubble.wpchat-bubble-media{display:block; width:100%; max-width:100%;}
  .wpchat-gallery{width: 100%; max-width: 100%;}
  .wpchat-bubble{max-width: 82%;}
  .wpchat-sidebar{width: 100vw; max-width: 100vw; left: 0; right: 0;}
  .wpchat-thread-preview{display:block !important;}
  .wpchat-header{padding:0 12px;}
  .wpchat-title{font-size:16px;}
  .wpchat-login-title{font-size: 22px;}
  .wpchat-login-tab{min-width: 100%;}
  .wpchat-reg-row{flex-direction:column; gap: 0;}
  .wpchat-field-label{min-width: 74px; padding: 0 10px; font-size: 13px;}
  .wpchat-input-row{width:100%;}
  .wpchat-actions{width:100%;}
}

@media (max-width: 420px){
  .wpchat-app:not(.is-dm) .wpchat-title{display:none;}
}

@media (max-width: 640px){
  .wpchat-thread-time{display:block;}
}