/* ═══════════════════════════════════════════
   TrustConsulting AI — Frontend Chat Styles
═══════════════════════════════════════════ */

:root {
  --tcai-color: #1D9E75;
  --tcai-color-dark: #0F6E56;
  --tcai-radius: 16px;
  --tcai-radius-sm: 8px;
  --tcai-shadow: 0 8px 40px rgba(0,0,0,.18);
  --tcai-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tcai-bg: #ffffff;
  --tcai-bg2: #f6f8fa;
  --tcai-border: rgba(0,0,0,.1);
  --tcai-text: #1a1a1a;
  --tcai-muted: #666;
  --tcai-position-side: right;
}

/* ── Shared widget base ── */
.tcai-inline-wrap,
#tcai-float-panel {
  font-family: var(--tcai-font);
  font-size: 14px;
  color: var(--tcai-text);
  background: var(--tcai-bg);
  border-radius: var(--tcai-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Inline widget ── */
.tcai-inline-wrap {
  border: 1px solid var(--tcai-border);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  max-width: 640px;
  margin: 0 auto 24px;
}

/* ── Header ── */
.tcai-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--tcai-color);
  color: #fff;
}
.tcai-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.tcai-name   { font-weight: 600; font-size: 14px; line-height: 1.3; }
.tcai-status { font-size: 11px; opacity: .85;     color: #e0b84a;}
.tcai-lang-btn {
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  border-radius: 14px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  margin-right: 6px;
  white-space: nowrap;
}
.tcai-lang-btn:hover { background: rgba(255,255,255,.3); }

.tcai-close-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: .8;
  transition: opacity .15s;
}
.tcai-close-btn:hover { opacity: 1; background: rgba(255,255,255,.15); }

/* ── Messages ── */
.tcai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
 /* min-height: 240px;
  max-height: 380px;*/
  background: var(--tcai-bg2);
  scroll-behavior: smooth;
}
.tcai-msg {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: flex-start;
  animation: tcai-fadein .2s ease;
}
.tcai-msg.user { flex-direction: row-reverse; }
@keyframes tcai-fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.tcai-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tcai-color);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.tcai-msg.user .tcai-msg-avatar { background: #ddd; color: #555; }

.tcai-msg-bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.tcai-msg.bot  .tcai-msg-bubble { 
    background: #fff; border: 1px solid var(--tcai-border); color: var(--tcai-text); border-bottom-left-radius: 4px; 
    background: var(--gold-ultra);
    border: .5px solid var(--gold-pale);
}
.tcai-msg.user .tcai-msg-bubble { background: var(--tcai-color); color: #fff; border-bottom-right-radius: 4px; }

.tcai-sources {
  margin-top: 6px;
  font-size: 11px;
  color: var(--tcai-muted);
}
.tcai-sources a { color: var(--tcai-color); text-decoration: none; }
.tcai-sources a:hover { text-decoration: underline; }

/* ── Chips ── */
.tcai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  background: var(--tcai-bg2);
  border-top: 1px solid var(--tcai-border);
}
.tcai-chip {
  font-size: 11px;
  padding: 0px 5px;
  border: 1px solid var(--tcai-color);
  border-radius: 20px;
  background: #fff;
  color: var(--tcai-color);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
      margin-right: 0;
}
.tcai-chip:hover { background: var(--tcai-color); color: #fff; }

/* ── Thinking dots ── */
.tcai-thinking {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 6px 14px 2px;
  font-size: 12px;
  color: var(--tcai-muted);
  background: var(--tcai-bg2);
}
.tcai-thinking.show { display: flex; }
.tcai-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tcai-color);
  animation: tcai-pulse 1s ease-in-out infinite;
}
.tcai-dot:nth-child(2) { animation-delay: .2s; }
.tcai-dot:nth-child(3) { animation-delay: .4s; }
@keyframes tcai-pulse { 0%,100%{opacity:.25} 50%{opacity:1} }

/* ── Input ── */
.tcai-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--tcai-border);
  background: var(--tcai-bg);
}
.tcai-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--tcai-border);
  border-radius: 22px;
  font-size: 13px;
  font-family: var(--tcai-font);
  outline: none;
  background: var(--tcai-bg2);
  color: var(--tcai-text);
  transition: border-color .15s;
}
.tcai-input:focus { border-color: var(--tcai-color); background: #fff; }
.tcai-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--tcai-color);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
  padding: 0 0em;
}
.tcai-send-btn:hover  { background: var(--tcai-color-dark); }
.tcai-send-btn:active { transform: scale(.93); }

/* ── Footer ── */
.tcai-footer {
  text-align: center;
  font-size: 11px;
  color: var(--tcai-muted);
  padding: 6px;
  border-top: 1px solid var(--tcai-border);
}
.tcai-footer a { color: var(--tcai-muted); }

.tcai-zalo-cta { margin: 4px 0 10px 34px; }
.tcai-zalo-btn {
  display: inline-block;
  background: #0068ff;
  color: #fff;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 18px;
  transition: opacity .15s;
}
.tcai-zalo-btn:hover { opacity: .88; color: #fff; }

/* ── Contact capture mini-form (sau báo giá tự động) ── */
.tcai-contact-form {
  background: #fff;
  border: 1px solid var(--tcai-color);
  border-radius: 12px;
  padding: 12px;
  margin: 4px 0 10px 34px;
  max-width: 78%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tcai-contact-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tcai-color-dark);
}
.tcai-contact-form .tcai-input {
  background: var(--tcai-bg2);
}
.tcai-cf-submit {
  border: none;
  background: var(--tcai-color);
  color: #fff;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}
.tcai-cf-submit:hover { background: var(--tcai-color-dark); }

/* ══════════════════════════════════════
   FLOATING WIDGET
══════════════════════════════════════ */
#tcai-float-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  font-family: var(--tcai-font);
}
#tcai-float-wrap[data-pos="bottom-left"] { right: auto; left: 24px; }

/* FAB */
#tcai-fab {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--tcai-color);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
  transition: transform .2s, background .15s;
  color: #fff;
      padding: 0 0em;
}
#tcai-fab:hover  { background: var(--tcai-color-dark); transform: scale(1.06); }
#tcai-fab:active { transform: scale(.96); }

.tcai-notif {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  background: #e53935;
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  animation: tcai-bounce .5s ease 2s 3;
}
@keyframes tcai-bounce { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }

/* Float panel */
#tcai-float-panel {
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 360px;
  max-height: 560px;
  box-shadow: var(--tcai-shadow);
  border: 1px solid var(--tcai-border);
  transform: scale(.92) translateY(10px);
  opacity: 0;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s ease;
  transform-origin: bottom right;
}
#tcai-float-panel.open {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}
#tcai-float-wrap[data-pos="bottom-left"] #tcai-float-panel {
  right: auto; left: 0;
  transform-origin: bottom left;
}
#tcai-float-panel .tcai-messages { max-height: 280px; }

/* Responsive */
@media (max-width: 420px) {
  #tcai-float-panel { width: calc(100vw - 24px); right: 0; }
  #tcai-float-wrap { bottom: 16px; right: 12px; }
}