:root{
  --chat-navy:#123E68;
  --chat-navy-2:#347FAF;
  --chat-gold:#F4C84B;
  --chat-page:#EAF5FC;
  --chat-card:#FBFDFF;
  --chat-line:#BBD3E4;
  --chat-muted:#678197;
  --chat-danger:#B84052;
  --chat-cool:#DCEEF9;
  --chat-cool-2:#CDE6F5;
}
#htnsChatHandle{
  position:fixed;
  right:calc(-16px + env(safe-area-inset-right));
  top:var(--htns-chat-handle-top,50%);
  bottom:auto;
  z-index:1180;
  width:60px;
  height:76px;
  display:none;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.9);
  border-right:0;
  border-radius:18px 0 0 18px;
  background:linear-gradient(150deg,#4A9BC7 0%,#2E7CAA 52%,#174D78 100%);
  color:#fff;
  box-shadow:0 13px 30px rgba(7,35,68,.28);
  cursor:grab;
  touch-action:none;
  overscroll-behavior:contain;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  will-change:top,transform;
  -webkit-tap-highlight-color:transparent;
  transform:translate3d(0,-50%,0);
  transition:right .2s ease,transform .18s ease,box-shadow .18s ease,opacity .18s ease;
}
#htnsChatHandle.chat-visible{display:flex;}
#htnsChatHandle:hover,#htnsChatHandle:focus-visible{right:max(0px,env(safe-area-inset-right));}
#htnsChatHandle:active{transform:translate3d(0,-50%,0) scale(.94);}
#htnsChatHandle.chat-handle-pressed{
  box-shadow:0 14px 32px rgba(18,62,104,.34);
}
#htnsChatHandle.chat-handle-dragging{
  right:calc(-8px + env(safe-area-inset-right)) !important;
  cursor:grabbing !important;
  transform:translate3d(-4px,-50%,0) scale(1.02) !important;
  transition:none !important;
  animation:none !important;
  box-shadow:0 15px 34px rgba(18,62,104,.36) !important;
}
#htnsChatHandle svg{width:23px;height:23px;margin-left:-12px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
#htnsChatHandle .chat-handle-arrow{
  position:absolute;
  left:4px;
  top:50%;
  width:19px;
  height:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  font-size:16px;
  font-weight:1000;
  line-height:1;
  transform:translateY(-50%);
}
#htnsChatBadge{
  position:absolute;
  right:27px;
  top:5px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  display:none;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
  border-radius:999px;
  background:#E05267;
  color:#fff;
  font-size:8px;
  font-weight:950;
  line-height:1;
}
#htnsChatBadge.on{display:flex;}
#htnsChatHandle.chat-pulse{animation:htnsChatPulseV147 .62s ease;}
@keyframes htnsChatPulseV147{0%,100%{transform:translate3d(0,-50%,0) scale(1)}45%{transform:translate3d(-4px,-50%,0) scale(1.08)}}

#htnsChatBackdrop{
  position:fixed;
  inset:0;
  z-index:1250;
  display:none;
  background:rgba(4,20,38,.42);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .22s ease;
}
#htnsChatBackdrop.open{display:block;opacity:1;}
#htnsChatDrawer{
  position:fixed;
  right:0;
  bottom:0;
  z-index:1260;
  width:min(430px,calc(100vw - 14px));
  height:min(82dvh,720px);
  min-height:430px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(17,56,102,.16);
  border-right:0;
  border-bottom:0;
  border-radius:26px 0 0 0;
  background:linear-gradient(180deg,#F4FAFE 0%,#EAF5FC 48%,#E5F1F9 100%);
  box-shadow:-18px -6px 46px rgba(25,79,119,.25);
  transform:translate3d(105%,0,0);
  transition:transform .26s cubic-bezier(.2,.8,.2,1);
  visibility:hidden;
  touch-action:pan-y;
}
#htnsChatDrawer.open{transform:translate3d(0,0,0);visibility:visible;}
.chat-drawer-grip{
  width:42px;
  height:4px;
  flex:0 0 auto;
  margin:8px auto 0;
  border-radius:99px;
  background:#BCC9D5;
}
.chat-drawer-head{
  min-height:62px;
  padding:10px 14px 8px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  align-items:center;
  gap:8px;
}
.chat-drawer-head{background:rgba(242,249,253,.78);}
.chat-head-icon,.chat-close{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--chat-line);
  border-radius:13px;
  background:#fff;
  color:var(--chat-navy);
}
.chat-head-icon svg,.chat-close svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.chat-close{cursor:pointer;touch-action:manipulation;}
.chat-head-copy{min-width:0;text-align:center;}
.chat-head-copy h2{margin:0;color:var(--chat-navy);font-size:17px;line-height:1.1;font-weight:950;letter-spacing:.01em;}
.chat-head-copy p{margin:4px 0 0;color:var(--chat-muted);font-size:10px;line-height:1.2;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

#htnsChatTabs{
  padding:0 12px 10px;
  display:grid;
  grid-template-columns:repeat(var(--chat-tab-count,1),minmax(0,1fr));
  gap:7px;
  border-bottom:1px solid var(--chat-line);
  background:rgba(224,241,251,.72);
}
.chat-tab{
  position:relative;
  min-width:0;
  min-height:42px;
  padding:6px 5px;
  border:1px solid var(--chat-line);
  border-radius:13px;
  background:#F9FCFF;
  color:#345A78;
  font-size:10px;
  line-height:1.05;
  font-weight:900;
  cursor:pointer;
  touch-action:manipulation;
}
.chat-tab.on{border-color:#2F7EAD;background:linear-gradient(180deg,#E0F1FB 0%,#CDE7F6 100%);color:#123E68;box-shadow:0 6px 14px rgba(47,126,173,.14);}
.chat-tab-count{
  position:absolute;
  right:4px;
  top:3px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:99px;
  background:#E05267;
  color:#fff;
  font-size:8px;
  font-weight:950;
}
.chat-tab-count.on{display:flex;}

.chat-room-note{
  min-height:35px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid rgba(217,227,236,.8);
  background:#E1F0F9;
  color:#244F70;
  font-size:9.5px;
  line-height:1.25;
  font-weight:800;
}
#htnsChatStatus{flex:0 0 auto;white-space:nowrap;color:var(--chat-muted);font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;}
#htnsChatStatus.live{color:#237451;}
#htnsChatStatus.offline{color:var(--chat-danger);}

#htnsChatMessages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:10px 12px 16px;
  background:linear-gradient(180deg,#F8FCFF 0%,#EFF7FC 100%);
  scroll-behavior:smooth;
}
.chat-load-older{
  width:100%;
  min-height:32px;
  margin:0 0 9px;
  border:1px solid var(--chat-line);
  border-radius:11px;
  background:#fff;
  color:#526B81;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}
.chat-empty{padding:50px 22px;text-align:center;color:var(--chat-muted);}
.chat-empty svg{width:34px;height:34px;margin-bottom:10px;stroke:#9AAFC1;fill:none;stroke-width:1.6;}
.chat-empty b{display:block;color:#46627A;font-size:12px;}
.chat-empty span{display:block;margin-top:5px;font-size:10px;line-height:1.4;}
.chat-date-separator{margin:12px 0 9px;display:flex;align-items:center;gap:8px;color:#8799A9;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;}
.chat-date-separator:before,.chat-date-separator:after{content:"";height:1px;flex:1;background:#DDE5EC;}
.chat-message{margin:0 0 9px;display:flex;flex-direction:column;align-items:flex-start;}
.chat-message.mine{align-items:flex-end;}
.chat-message-name{max-width:82%;margin:0 7px 3px;color:#647A8F;font-size:8.5px;line-height:1.1;font-weight:850;}
.chat-bubble{
  max-width:82%;
  padding:9px 11px 7px;
  border:1px solid var(--chat-line);
  border-radius:5px 17px 17px 17px;
  background:#FBFDFF;
  color:#173958;
  box-shadow:0 3px 8px rgba(22,54,82,.05);
}
.chat-message.mine .chat-bubble{border-color:#2F78A5;border-radius:17px 5px 17px 17px;background:linear-gradient(145deg,#3E8BB7 0%,#2F7AA8 100%);color:#fff;}
.chat-message.sending .chat-bubble{opacity:.62;}
.chat-message.failed .chat-bubble{border-color:#E8A8B2;background:#FFF0F2;color:#8F3040;}
.chat-message.deleting .chat-bubble{opacity:.62;}
.chat-message.deleted .chat-bubble,.chat-message.mine.deleted .chat-bubble{border-color:#D9E3EC;border-radius:14px;background:#F2F5F7;color:#7A8C9B;box-shadow:none;}
.chat-message.deleted .chat-message-body{font-style:italic;font-weight:750;}
.chat-message.deleted .chat-message-meta,.chat-message.mine.deleted .chat-message-meta{color:#8A9AAA;}
.chat-message.mine:not(.deleted):not(.sending):not(.failed){touch-action:pan-y;}
.chat-message.mine:not(.deleted):not(.sending):not(.failed) .chat-bubble{cursor:context-menu;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.chat-message.mine.holding-delete .chat-bubble{filter:brightness(1.08);transform:scale(.995);}
.chat-message-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.38;}
.chat-message-meta{margin-top:4px;display:flex;align-items:center;justify-content:flex-end;gap:5px;color:#8A9AAA;font-size:7.5px;font-weight:750;}
.chat-message.mine .chat-message-meta{color:rgba(255,255,255,.7);}

.chat-composer{
  flex:0 0 auto;
  padding:9px 10px calc(10px + env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:minmax(0,1fr) 46px;
  align-items:end;
  gap:8px;
  border-top:1px solid var(--chat-line);
  background:rgba(227,242,250,.97);
}
#htnsChatInput{
  width:100%;
  min-height:44px;
  max-height:112px;
  resize:none;
  overflow-y:auto;
  padding:12px 13px;
  border:1px solid #9FC4DC;
  border-radius:15px;
  outline:none;
  background:#FBFDFF;
  color:#173958;
  font-size:12px;
  line-height:1.35;
  font-weight:650;
}
#htnsChatInput:focus{border-color:#4F98C2;box-shadow:0 0 0 3px rgba(63,143,188,.13);}
#htnsChatInput:disabled{background:#EEF2F5;color:#7D8D9C;}
#htnsChatSend{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:15px;
  background:var(--chat-gold);
  color:var(--chat-navy);
  box-shadow:0 6px 14px rgba(157,116,5,.18);
  cursor:pointer;
  touch-action:manipulation;
}
#htnsChatSend:disabled{opacity:.45;box-shadow:none;cursor:default;}
#htnsChatSend svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

[data-theme="dark"] #htnsChatDrawer{background:#0B223B;border-color:#315777;}
[data-theme="dark"] .chat-head-icon,[data-theme="dark"] .chat-close,[data-theme="dark"] .chat-tab,[data-theme="dark"] .chat-bubble,[data-theme="dark"] .chat-load-older{background:#102F50;border-color:#315777;color:#EAF3FA;}
[data-theme="dark"] .chat-head-copy h2{color:#EEF6FD;}
[data-theme="dark"] .chat-head-copy p,[data-theme="dark"] .chat-message-name{color:#AFC0D0;}
[data-theme="dark"] .chat-message.deleted .chat-bubble,[data-theme="dark"] .chat-message.mine.deleted .chat-bubble{border-color:#315777;background:#173652;color:#B9C9D7;}
[data-theme="dark"] .chat-room-note{background:#263A3F;border-color:#405667;color:#F6D87C;}
[data-theme="dark"] #htnsChatTabs,[data-theme="dark"] .chat-room-note,[data-theme="dark"] .chat-composer{border-color:#315777;}
[data-theme="dark"] .chat-composer{background:#0D2744;}
[data-theme="dark"] #htnsChatInput{background:#102F50;border-color:#315777;color:#EEF6FD;}
[data-theme="dark"] .chat-date-separator:before,[data-theme="dark"] .chat-date-separator:after{background:#315777;}

@media (min-width:720px){
  #htnsChatDrawer{right:16px;bottom:16px;height:min(76dvh,700px);border:1px solid rgba(17,56,102,.16);border-radius:24px;}
  #htnsChatBackdrop{background:rgba(4,20,38,.24);}
  #htnsChatHandle{right:-16px;top:var(--htns-chat-handle-top,50%);bottom:auto;}
}
@media (max-height:600px) and (orientation:landscape){
  #htnsChatDrawer{height:96dvh;min-height:0;}
  .chat-drawer-head{min-height:52px;padding-top:5px;padding-bottom:5px;}
  .chat-head-icon,.chat-close{width:36px;height:36px;}
}
@media (prefers-reduced-motion:reduce){
  #htnsChatDrawer,#htnsChatBackdrop,#htnsChatHandle{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}