/* TTQ WebChat Bot - Polished Tawk-like + wiggle & ripple */
:root{
  --ttq-color:#00a67e;        /* màu chủ đạo (inject từ admin) */
  --ttq-bot:#ffffff;          /* màu bubble của bot */
  --ttq-radius:18px;          /* bo góc panel */
  --ttq-shadow: 0 18px 50px rgba(0,0,0,.22);
  --ttq-soft: 0 1px 0 rgba(0,0,0,.06);
  --ttq-gap: 12px;            /* khoảng đệm bên trong panel */
}

#ttq-bubble, #ttq-panel { z-index: 2147483000 !important; }

/* Trigger bubble (tròn) + wiggle + ripple */
#ttq-bubble{
  position: fixed; bottom: 20px; right: 20px;
  width: 60px; height: 60px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, var(--ttq-color), color-mix(in oklab, var(--ttq-color) 80%, black));
  color:#fff; border:none; cursor:pointer;
  box-shadow: 0 16px 36px rgba(0,0,0,.25);
  font-size:22px; user-select:none;
  position: fixed;
  isolation: isolate;                 /* tạo stacking context cho ::before/after */
  animation: ttq-wiggle 3.8s ease-in-out infinite 2.2s; /* lắc nhẹ định kỳ */
}
#ttq-bubble::before,
#ttq-bubble::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid var(--ttq-color); opacity:.35;
  pointer-events: none;
  animation: ttq-ripple 2.6s ease-out infinite;
}
#ttq-bubble::after{ animation-delay: 1.3s; }

/* Tắt motion cho người dùng prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  #ttq-bubble{ animation:none }
  #ttq-bubble::before, #ttq-bubble::after{ animation:none }
}

@keyframes ttq-wiggle{
  0%,10%,100% { transform: rotate(0) }
  2% { transform: rotate(6deg) }
  4% { transform: rotate(-6deg) }
  6% { transform: rotate(4deg) }
  8% { transform: rotate(-4deg) }
}
@keyframes ttq-ripple{
  from { transform: scale(1); opacity:.35; }
  to   { transform: scale(2.2); opacity:0; }
}

/* Panel container (flex column + inner gap) */
#ttq-panel{
  position: fixed; bottom: 92px; right: 20px;
  width: 392px; max-width: 92vw; max-height: 80vh;
  background:#fff; border-radius: var(--ttq-radius); overflow:hidden;
  box-shadow: var(--ttq-shadow);
  display: flex;                      /* flex để body chiếm phần còn lại */
  flex-direction: column;
  opacity:0; transform: translateY(14px) scale(.98);
  visibility: hidden; pointer-events: none;
  transition: .22s cubic-bezier(.22,.61,.36,1);
  font-family: system-ui,Segoe UI,Roboto,Arial;
  border:1px solid #e8ecef;
}
#ttq-panel[aria-hidden="false"]{
  opacity:1; transform: translateY(0) scale(1);
  visibility: visible; pointer-events: auto;
}

/* Header */
#ttq-head{
  position: relative; /* để đặt nút X tuyệt đối */
  background: linear-gradient(180deg, var(--ttq-color), color-mix(in oklab, var(--ttq-color) 85%, black));
  color:#fff; padding: 12px 16px;
  display:flex; align-items:center; justify-content:flex-start; gap:12px;
  min-height: 56px;
  margin: var(--ttq-gap);
  border-radius: 14px;
	padding: 12px 16px;
  padding-right: 56px; 
}
.ttq-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.ttq-avatar{
  position:relative; width:36px; height:36px; border-radius:50%;
  background:#fff; overflow:hidden; flex:0 0 36px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.ttq-avatar img{ width:100%; height:100%; object-fit:cover; }
.ttq-online{
  position:absolute; right:-1px; bottom:-1px; width:11px; height:11px;
  background:#22c55e; border:2px solid transparent; border-radius:50%;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ttq-color) 90%, black);
}
.ttq-title-wrap{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.ttq-title{ font-weight:800; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.2px; }
.ttq-sub{ opacity:.95; font-size:12px; }

/* Nút X: mép phải, giữa chiều cao header */
#ttq-close{
  position:absolute;
  right: 0px;                 /* <-- trước là 12px, giờ sát hơn. Có thể chỉnh 4px/2px tùy mắt */
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;  /* hit area lớn, dễ bấm */
  display:flex; align-items:center; justify-content:center;
  background: transparent;
  color:#fff; border:none; font-size:22px; line-height:1; cursor:pointer;
  border-radius: 50%;
}
#ttq-close:hover{ background: rgba(255,255,255,.15); }

/* Body (chiếm phần còn lại, có đệm 2 bên) */
#ttq-body{
  background: #f6f7f9;
  flex: 1;
  margin: 0 var(--ttq-gap);
  border-radius: 14px;
  overflow:auto; padding:16px 16px 6px;
  scrollbar-width: thin;
  scrollbar-color: #c7ccd2 transparent;
}
#ttq-body::-webkit-scrollbar{ width:10px }
#ttq-body::-webkit-scrollbar-thumb{ background:#c7ccd2; border-radius:8px }
#ttq-body::-webkit-scrollbar-track{ background:transparent }

/* Input bar (có đệm dưới) */
#ttq-input{
  padding:12px; border-top:1px solid #eef1f4; background:#fff;
  display:grid; grid-template-columns: 1fr 104px; gap:10px;
  margin: var(--ttq-gap);
  border-radius: 14px;
}
#ttq-text{
  height:50px; padding:12px 16px; border:1px solid #dee3e7; background:#fff;
  border-radius:999px; font-size:14px; outline:none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
#ttq-text:focus{
  border-color: color-mix(in oklab, var(--ttq-color) 45%, #cbd5e1);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ttq-color) 20%, transparent);
}
#ttq-send{
  height:50px; border:none; border-radius:999px;
  background: linear-gradient(180deg, var(--ttq-color), color-mix(in oklab, var(--ttq-color) 78%, black));
  color:#fff; font-weight:800; font-size:14px; letter-spacing:.3px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  gap:8px; box-shadow: 0 10px 22px rgba(0,0,0,.16);
  transition: transform .05s ease;
}
#ttq-send:before{ content:'✈️'; font-size:16px; }
#ttq-send:active{ transform: translateY(1px); }

/* Bubbles */
.ttq-row{ display:flex; margin:10px 0 }
.ttq-user{ justify-content:flex-end }
.ttq-bubble{
  max-width:78%; padding:12px 16px; border-radius:22px;
  box-shadow: var(--ttq-soft);
  line-height:1.55; font-size:15px; white-space:pre-wrap; word-wrap:break-word;
}
/* Bot bubble (card trắng) */
.ttq-bot{ background:#fff; border:1px solid #e8ecef; border-bottom-left-radius:10px; }
/* User bubble (brand color) */
.ttq-me {
  color:#fff; border-bottom-right-radius:10px;
  background: linear-gradient(180deg, var(--ttq-color), color-mix(in oklab, var(--ttq-color) 78%, black));
}

/* Bubble tails */
.ttq-bot { position:relative }
.ttq-bot:after{
  content:""; position:absolute; left:-6px; bottom:0;
  width:14px; height:14px; background:#fff; border-left:1px solid #e8ecef; border-bottom:1px solid #e8ecef;
  transform: translateY(2px) rotate(45deg); border-bottom-left-radius:2px;
}
.ttq-user .ttq-me{ position:relative }
.ttq-user .ttq-me:after{
  content:""; position:absolute; right:-6px; bottom:0;
  width:14px; height:14px; background: color-mix(in oklab, var(--ttq-color) 95%, black);
  transform: translateY(2px) rotate(45deg); border-bottom-right-radius:2px;
}

/* Typing bubble */
.ttq-typing-wrap{
  background:#fff; border:1px solid #e8ecef; border-radius:22px;
  padding:10px 14px; display:inline-flex; align-items:center;
  box-shadow: var(--ttq-soft);
}
.ttq-typing span{
  display:inline-block; width:7px; height:7px; margin:0 2px;
  background:#9ca3af; border-radius:50%;
  animation:ttq-bounce 1.4s infinite ease-in-out both;
}
.ttq-typing span:nth-child(2){ animation-delay:0.2s; }
.ttq-typing span:nth-child(3){ animation-delay:0.4s; }
@keyframes ttq-bounce { 0%,80%,100%{transform:scale(0)} 40%{transform:scale(1)} }