:root {
  --tf-brand: #c5642b;
  --tf-brand-dark: #9d4d21;
  --tf-bg: #fffaf6;
  --tf-ink: #1f1f1f;
  --tf-muted: #6d655f;
  --tf-border: #eadfd6;
  --tf-shadow: 0 18px 60px rgba(34, 23, 15, .18);
}

#tf-chatbot * { box-sizing: border-box; }

#tf-chatbot {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999999;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--tf-ink);
}

.tf-launcher {
  width: 60px;
  height: 60px;
  border: 0;
  border-radius: 50%;
  background: var(--tf-brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(197, 100, 43, .35);
  display: grid;
  place-items: center;
  transition: transform .2s ease, background .2s ease;
}

.tf-launcher:hover { transform: translateY(-2px); background: var(--tf-brand-dark); }
.tf-launcher svg { width: 27px; height: 27px; }

.tf-panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  width: min(380px, calc(100vw - 28px));
  height: min(610px, calc(100vh - 120px));
  background: #fff;
  border: 1px solid var(--tf-border);
  border-radius: 22px;
  box-shadow: var(--tf-shadow);
  overflow: hidden;
  display: none;
  flex-direction: column;
}

.tf-panel.is-open { display: flex; animation: tfIn .18s ease-out; }

@keyframes tfIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tf-head {
  background: linear-gradient(135deg, #a94f20, #d7773f);
  color: #fff;
  padding: 18px 18px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.tf-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255,255,255,.17);
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: .02em;
}

.tf-head-text { flex: 1; min-width: 0; }
.tf-head strong { display: block; font-size: 15px; }
.tf-head small { display: block; opacity: .88; margin-top: 2px; }

.tf-close {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  padding: 4px;
}

.tf-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background:
    radial-gradient(circle at top right, rgba(197,100,43,.06), transparent 28%),
    #fff;
}

.tf-row { display: flex; margin: 9px 0; }
.tf-row.bot { justify-content: flex-start; }
.tf-row.user { justify-content: flex-end; }

.tf-bubble {
  max-width: 84%;
  padding: 11px 13px;
  border-radius: 15px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
}

.tf-row.bot .tf-bubble {
  background: var(--tf-bg);
  border: 1px solid var(--tf-border);
  border-bottom-left-radius: 5px;
}

.tf-row.user .tf-bubble {
  background: var(--tf-brand);
  color: #fff;
  border-bottom-right-radius: 5px;
}

.tf-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 16px 12px;
  background: #fff;
}

.tf-chip {
  border: 1px solid #dfc8b8;
  color: var(--tf-brand-dark);
  background: #fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12.5px;
  cursor: pointer;
}
.tf-chip:hover { background: #fff6ef; }

.tf-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--tf-border);
  background: #fff;
}

.tf-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #ddd2c9;
  border-radius: 12px;
  padding: 11px 12px;
  outline: none;
  font-size: 14px;
}
.tf-input:focus { border-color: var(--tf-brand); box-shadow: 0 0 0 3px rgba(197,100,43,.12); }

.tf-send {
  width: 42px;
  border: 0;
  border-radius: 12px;
  background: var(--tf-brand);
  color: white;
  cursor: pointer;
  font-size: 18px;
}

.tf-note {
  font-size: 10.5px;
  color: var(--tf-muted);
  text-align: center;
  padding: 0 12px 10px;
  background: #fff;
}

@media (max-width: 520px) {
  #tf-chatbot { right: 12px; bottom: 12px; }
  .tf-panel {
    position: fixed;
    inset: 12px;
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 18px;
  }
}