:root{
  --chat-panel-bg: rgba(15,20,32,.98);
  --chat-line: rgba(255,255,255,.08);
}

.kp-chat-bubble{
  position:fixed;
  right:16px;
  bottom:16px;
  width:58px;
  height:58px;
  border:none;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  line-height:1;
  background:linear-gradient(135deg, #7d5cff, #ff69b4);
  color:#fff;
  box-shadow:0 18px 34px rgba(0,0,0,.34);
  cursor:pointer;
  z-index:9999;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.kp-chat-bubble:active{
  transform:scale(.97);
}

.kp-chat-panel{
  position:fixed;
  right:16px;
  bottom:86px;
  width:min(380px, calc(100vw - 20px));
  height:min(520px, calc(100dvh - 120px));
  max-height:calc(100dvh - 120px);
  display:flex;
  flex-direction:column;
  border-radius:24px;
  background:var(--chat-panel-bg);
  border:1px solid var(--chat-line);
  box-shadow:0 20px 40px rgba(0,0,0,.38);
  overflow:hidden;
  z-index:9998;
}

.kp-chat-panel.is-hidden{
  display:none;
}

.kp-chat-header{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--chat-line);
  color:#fff;
}

.kp-chat-header-copy{
  min-width:0;
}

.kp-chat-header small{
  display:block;
  margin-top:3px;
  color:#aab4cb;
}

.kp-chat-close{
  width:34px;
  height:34px;
  border:none;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  flex:0 0 auto;
}

.kp-chat-messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  padding:14px;
  display:grid;
  gap:10px;
  align-content:start;
  background:linear-gradient(180deg, rgba(10,14,22,.96), rgba(15,20,32,.98));
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}

.kp-chat-empty{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  color:#aab4cb;
}

.kp-chat-item{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);
}

.kp-chat-item-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.kp-chat-item-head small{
  color:#92a0bc;
  white-space:nowrap;
  flex:0 0 auto;
}

.kp-chat-title-line{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}

.kp-chat-role{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.06);
}

.kp-chat-role.role-admin{
  background:linear-gradient(90deg, rgba(255,232,160,.18), rgba(215,171,60,.26));
  color:#ffe9a6;
}

.kp-chat-role.role-mademoiselle{
  background:linear-gradient(90deg, rgba(255,179,214,.18), rgba(217,140,175,.24));
  color:#ffd6ea;
}

.kp-chat-role.role-premium{
  background:linear-gradient(90deg, rgba(125,92,255,.20), rgba(176,109,255,.22));
  color:#dcc9ff;
}

.kp-chat-role.role-member{
  background:rgba(255,255,255,.06);
  color:#dfe7ff;
}

.kp-chat-message{
  margin-top:8px;
  color:#eef2ff;
  line-height:1.6;
  word-break:break-word;
}

.kp-chat-admin-delete{
  margin-top:10px;
  border:none;
  border-radius:10px;
  background:#482737;
  color:#ffd4ea;
  min-height:34px;
  padding:0 12px;
  font-weight:700;
  cursor:pointer;
}

.kp-chat-notice{
  flex:0 0 auto;
  min-height:0;
  padding:0 14px 10px;
  color:#aab4cb;
  font-size:13px;
}

.kp-chat-form{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  padding:14px;
  border-top:1px solid var(--chat-line);
}

.kp-chat-form textarea{
  width:100%;
  min-height:48px;
  max-height:120px;
  resize:none;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:#182235;
  color:#fff;
  padding:12px 14px;
  outline:none;
}

.kp-chat-form button{
  min-width:82px;
  border:none;
  border-radius:14px;
  background:linear-gradient(90deg,#7d5cff,#ff69b4);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.chat-name-admin-gold{
  background:linear-gradient(90deg,#fff3b8 0%, #d9ad35 24%, #f7f0c8 48%, #c78b17 72%, #fff0a6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:900;
}

.chat-name-mademoiselle{
  background:linear-gradient(90deg, #ffd7e8 0%, #ff9fc7 35%, #ffd8f2 60%, #d98caf 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:900;
}

.chat-name-vip{
  background:linear-gradient(90deg,#a48cff,#ff84c8,#9ad6ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:900;
}

.chat-name-member{
  color:#eef2ff;
  font-weight:800;
}

@media (max-width: 640px){
  .kp-chat-panel{
    left:10px;
    right:10px;
    bottom:80px;
    width:auto;
    height:min(68dvh, 560px);
    max-height:68dvh;
    border-radius:20px;
  }

  .kp-chat-bubble{
    right:14px;
    bottom:14px;
    width:56px;
    height:56px;
    font-size:25px;
  }

  .kp-chat-item-head{
    flex-direction:column;
  }

  .kp-chat-item-head small{
    white-space:normal;
  }

  .kp-chat-form{
    grid-template-columns:1fr;
  }

  .kp-chat-form button{
    min-height:46px;
  }
}

.kp-chat-user-block{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  width:100%;
}

.kp-chat-user-meta{
  min-width:0;
  display:grid;
  gap:4px;
}

.kp-chat-avatar{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

.kp-chat-avatar-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.kp-chat-avatar-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, #7d5cff, #ff69b4);
}

@media (max-width: 640px){
  .kp-chat-avatar{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
}