/* AntiDDoS Chat Widget */

.adchat {
  position: fixed;
  bottom: 146px;
  z-index: 999999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
}

.adchat--right { right: 24px; }
.adchat--left  { left:  24px; }

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

/* ── Bubble button ── */

.adchat__bubble {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0057ff;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,87,255,.35);
  transition: transform .15s, box-shadow .15s;
}

.adchat__bubble:hover { transform: scale(1.07); box-shadow: 0 6px 20px rgba(0,87,255,.45); }
.adchat__bubble--open { background: #003fcc; }

.adchat__bubble svg {
  width: 32px;
  height: 32px;
  pointer-events: none;
}

/* ── Panel ── */

.adchat__panel {
  position: absolute;
  bottom: 68px;
  width: 397px;
  height: 633px;
  max-height: calc(100vh - 200px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.adchat--right .adchat__panel { right: 0; }
.adchat--left  .adchat__panel { left:  0; }

/* ── Header ── */

.adchat__header {
  background: #0057ff;
  color: #fff;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.adchat__title-wrap { display: flex; align-items: center; gap: 7px; }
.adchat__title { font-weight: 600; font-size: 15px; }
.adchat__ai-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  padding: 1px 6px;
  border-radius: 20px;
  letter-spacing: .5px;
}

.adchat__header-actions { display: flex; gap: 6px; align-items: center; }

.adchat__export,
.adchat__clear,
.adchat__close {
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color .1s, background .1s;
}

.adchat__clear:hover,
.adchat__close:hover { color: #fff; background: rgba(255,255,255,.15); }

.adchat__export svg,
.adchat__clear svg { width: 17px; height: 17px; }
.adchat__close { font-size: 16px; line-height: 1; }

/* ── Messages ── */

.adchat__messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f7f8fc;
}

.adchat__messages::-webkit-scrollbar { width: 4px; }
.adchat__messages::-webkit-scrollbar-thumb { background: #d0d4e0; border-radius: 2px; }

.adchat__msg {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}

.adchat__msg--user { align-self: flex-end; align-items: flex-end; }
.adchat__msg--bot  { align-self: flex-start; align-items: flex-start; }

.adchat__bubble-text {
  padding: 9px 13px;
  border-radius: 14px;
  word-break: break-word;
  white-space: pre-wrap;
}

.adchat__msg--user .adchat__bubble-text {
  background: #0057ff;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.adchat__msg--bot .adchat__bubble-text {
  background: #fff;
  color: #1a1a1a;
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.adchat__ts {
  font-size: 11px;
  color: #aaa;
  margin-top: 3px;
  padding: 0 4px;
}

/* Markdown trong bot bubble */
.adchat__msg--bot .adchat__bubble-text h1,
.adchat__msg--bot .adchat__bubble-text h2,
.adchat__msg--bot .adchat__bubble-text h3,
.adchat__msg--bot .adchat__bubble-text h4     { font-size: 14px; font-weight: 600; margin: 6px 0 4px; }
.adchat__msg--bot .adchat__bubble-text p      { margin: 0 0 6px; }
.adchat__msg--bot .adchat__bubble-text p:last-child { margin-bottom: 0; }
.adchat__msg--bot .adchat__bubble-text ul,
.adchat__msg--bot .adchat__bubble-text ol     { margin: 4px 0 4px 16px; padding: 0; }
.adchat__msg--bot .adchat__bubble-text li     { margin-bottom: 2px; }
.adchat__msg--bot .adchat__bubble-text code   { background: #f0f2f8; border-radius: 4px; padding: 1px 5px; font-size: 12px; }
.adchat__msg--bot .adchat__bubble-text pre    { background: #f0f2f8; border-radius: 6px; padding: 8px 10px; overflow-x: auto; font-size: 12px; }
.adchat__msg--bot .adchat__bubble-text strong { font-weight: 600; }
.adchat__msg--bot .adchat__bubble-text a      { color: #0057ff; }

/* ── Footer ── */

.adchat__footer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #eee;
  background: #fff;
  flex-shrink: 0;
}

.adchat__input {
  flex: 1;
  border: 1px solid #dde0ea;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 16px; /* 16px prevents iOS auto-zoom on focus */
  font-family: inherit;
  resize: none;
  outline: none;
  min-height: 38px;
  max-height: 120px;
  background: #f7f8fc;
  transition: border-color .15s;
}

.adchat__input:focus { border-color: #0057ff; background: #fff; }

.adchat__send {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #0057ff;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}

.adchat__send:hover    { background: #003fcc; }
.adchat__send:disabled { background: #a0b4e0; cursor: default; }

.adchat__send svg { width: 18px; height: 18px; }

/* ── Mobile ── */

@media (max-width: 480px) {
  .adchat { bottom: 130px; }
  .adchat--right { right: 16px; }
  .adchat--left  { left:  16px; }

  .adchat__panel {
    width: calc(100vw - 32px);
    /* Thu nhỏ khi bàn phím ảo iOS đẩy layout */
    max-height: 60vh;
  }

  .adchat__bubble {
    width: 50px;
    height: 50px;
  }
}