:root {
  --wphc-primary: #4f46e5;
  --wphc-primary-dark: #3730a3;
  --wphc-gradient: linear-gradient(135deg, #6366f1, #4338ca);
  --wphc-ink: #111827;
  --wphc-paper: #ffffff;
  --wphc-surface: #f5f6fb;
  --wphc-border: #e5e7eb;
  --wphc-muted: #6b7280;
  --wphc-radius: 24px;
  --wphc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wpht-chat { font-family: var(--wphc-font); color: var(--wphc-ink); }
.wpht-chat *, .wpht-chat *:before, .wpht-chat *:after { box-sizing: border-box; }

.wpht-chat__launcher { position: fixed; z-index: 9998; right: 24px; bottom: 24px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wpht-chat.is-open .wpht-chat__launcher { opacity: 0; pointer-events: none; }

.wpht-chat__teaser, .wpht-chat__dock {
  position: relative; z-index: 9998; display: inline-flex; align-items: center;
  border: 0; border-radius: 999px; background: var(--wphc-gradient); color: #fff;
  box-shadow: 0 10px 30px rgba(67, 56, 202, .35); cursor: pointer;
  font: 600 14px/1.2 var(--wphc-font); transition: transform .15s ease, box-shadow .15s ease, padding .2s ease;
}
.wpht-chat__teaser:hover, .wpht-chat__dock:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(67, 56, 202, .4); }
.wpht-chat__teaser {
  width: 60px; height: 60px; padding: 0; justify-content: center;
  animation: wphc-pulse 2.8s ease-in-out infinite;
}
.wpht-chat__teaser:hover { width: auto; padding: 0 22px 0 18px; gap: 9px; animation: none; }
.wpht-chat__teaser-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .2s ease .05s, opacity .15s ease; }
.wpht-chat__teaser:hover .wpht-chat__teaser-label { max-width: 160px; opacity: 1; }
@keyframes wphc-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(67, 56, 202, .35), 0 0 0 0 rgba(99, 102, 241, .35); }
  50% { box-shadow: 0 10px 30px rgba(67, 56, 202, .35), 0 0 0 10px rgba(99, 102, 241, 0); }
}
.wpht-chat__teaser svg, .wpht-chat__dock svg { width: 22px; height: 22px; flex: 0 0 auto; }
.wpht-chat__dock { padding: 13px 20px 13px 16px; gap: 8px; display: none; }

.wpht-chat__greeting {
  display: flex; align-items: flex-start; gap: 8px; max-width: 240px; padding: 14px 14px 14px 16px;
  background: #fff; color: var(--wphc-ink); border-radius: 16px; border-bottom-right-radius: 4px;
  border: 1px solid var(--wphc-border); box-shadow: 0 10px 30px rgba(17, 24, 39, .12);
  animation: wphc-pop .25s ease;
}
.wpht-chat__greeting p { margin: 0; font-size: 13.5px; line-height: 1.45; }
.wpht-chat__greeting-close {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: 0; border-radius: 50%; background: var(--wphc-surface); color: var(--wphc-muted); cursor: pointer; margin-top: 1px;
}
.wpht-chat__greeting-close svg { width: 11px; height: 11px; }
@keyframes wphc-pop { from { transform: translateY(8px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

.wpht-chat__panel {
  position: fixed; z-index: 10000; right: 24px; bottom: 24px; display: flex; flex-direction: column;
  width: min(400px, calc(100vw - 32px)); height: min(650px, calc(100vh - 48px));
  background: var(--wphc-paper); border-radius: var(--wphc-radius); overflow: hidden;
  box-shadow: 0 24px 64px rgba(17, 24, 39, .22); border: 1px solid var(--wphc-border);
  transform: translateY(18px) scale(.98); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.wpht-chat.is-open .wpht-chat__panel { transform: none; opacity: 1; pointer-events: auto; }
.wpht-chat.is-open .wpht-chat__teaser { opacity: 0; pointer-events: none; }
.wpht-chat__backdrop { display: none; }

.wpht-chat__head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 18px 18px 18px 20px; background: var(--wphc-gradient); color: #fff; flex: 0 0 auto;
}
.wpht-chat__head-brand { display: flex; align-items: center; gap: 10px; }
.wpht-chat__head-avatar {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: rgba(255, 255, 255, .18); flex: 0 0 auto;
}
.wpht-chat__head-avatar svg { width: 18px; height: 18px; }
.wpht-chat__head strong { display: block; font-size: 15px; line-height: 1.3; }
.wpht-chat__head-status { display: flex; align-items: center; gap: 5px; margin-top: 2px; font: 500 11px/1.2 var(--wphc-font); color: rgba(255, 255, 255, .85); }
.wpht-chat__head-status:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 2px rgba(74, 222, 128, .3); }
.wpht-chat__close {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: inherit;
  cursor: pointer; flex: 0 0 auto; transition: background .15s ease;
}
.wpht-chat__close:hover { background: rgba(255, 255, 255, .24); }
.wpht-chat__close svg { width: 16px; height: 16px; }

.wpht-chat__messages { flex: 1; overflow-y: auto; padding: 18px; background: var(--wphc-surface); display: flex; flex-direction: column; }
.wpht-chat__message {
  max-width: 84%; margin: 0 0 10px; padding: 10px 14px; font-size: 14.5px; line-height: 1.5;
  border-radius: 16px; word-wrap: break-word;
}
.wpht-chat__message--user {
  align-self: flex-end; background: var(--wphc-gradient); color: #fff; border-bottom-right-radius: 4px;
}
.wpht-chat__message--assistant {
  align-self: flex-start; background: #fff; color: var(--wphc-ink); border: 1px solid var(--wphc-border);
  border-bottom-left-radius: 4px;
}
.wpht-chat__message a { color: inherit; text-decoration: underline; }
.wpht-chat__message--user a { color: #fff; }

.wpht-chat__message--typing { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; padding: 13px 16px; }
.wpht-chat__message--typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--wphc-muted); opacity: .5; animation: wphc-bounce 1.1s infinite ease-in-out; }
.wpht-chat__message--typing span:nth-child(2) { animation-delay: .15s; }
.wpht-chat__message--typing span:nth-child(3) { animation-delay: .3s; }
@keyframes wphc-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

.wpht-chat__prompts { display: flex; gap: 7px; overflow-x: auto; padding: 0 16px 12px; flex: 0 0 auto; background: var(--wphc-surface); }
.wpht-chat__prompts button, .wpht-chat__skip {
  display: inline-flex; align-items: center; gap: 5px;
  flex: 0 0 auto; border: 1px solid var(--wphc-border); border-radius: 999px; padding: 7px 13px;
  background: #fff; color: var(--wphc-ink); cursor: pointer; font: 500 12.5px/1.2 var(--wphc-font);
  transition: border-color .15s ease, color .15s ease;
}
.wpht-chat__prompts button svg { width: 12px; height: 12px; color: var(--wphc-primary); flex: 0 0 auto; }
.wpht-chat__prompts button:hover { border-color: var(--wphc-primary); color: var(--wphc-primary); }

.wpht-chat__form {
  display: flex; gap: 6px; align-items: center; margin: 0 14px 14px; padding: 6px 6px 6px 18px;
  border: 1px solid var(--wphc-border); border-radius: 999px; background: #fff; flex: 0 0 auto;
  box-shadow: 0 2px 12px rgba(17, 24, 39, .06);
}
.wpht-chat__input {
  box-sizing: border-box; flex: 1; min-width: 0; border: 0; border-radius: 999px;
  padding: 8px 0; background: transparent; color: var(--wphc-ink); font: 14px/1.3 var(--wphc-font);
  transition: border-color .15s ease, background .15s ease;
}
.wpht-chat__input:focus { outline: none; }
.wpht-chat__form:focus-within { border-color: var(--wphc-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, .15); }
.wpht-chat__form button {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: var(--wphc-gradient); color: #fff; cursor: pointer;
  transition: transform .12s ease, opacity .15s ease;
}
.wpht-chat__form button svg { width: 17px; height: 17px; }
.wpht-chat__form button:hover:not(:disabled) { transform: scale(1.06); }
.wpht-chat__form button:disabled { opacity: .5; cursor: default; }

.wpht-chat__feedback-form input, .wpht-chat__feedback-form textarea {
  box-sizing: border-box; width: 100%; border: 1px solid var(--wphc-border); border-radius: 10px;
  padding: 10px 12px; background: #fff; color: var(--wphc-ink); font: 14px/1.4 var(--wphc-font);
}
.wpht-chat__feedback-form input:focus, .wpht-chat__feedback-form textarea:focus { outline: none; border-color: var(--wphc-primary); }
.wpht-chat__feedback-form button {
  border: 0; border-radius: 999px; padding: 0 16px; min-height: 42px; background: var(--wphc-gradient);
  color: #fff; cursor: pointer; font: 600 13.5px var(--wphc-font); transition: opacity .15s ease;
}
.wpht-chat__feedback-form button:hover:not(:disabled) { opacity: .92; }
.wpht-chat__feedback-form button:disabled { opacity: .55; cursor: default; }

.wpht-chat__hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.wpht-chat__feedback {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 22px;
  background: rgba(255, 255, 255, .98); backdrop-filter: blur(2px);
}
.wpht-chat__feedback-inner { width: 100%; }
.wpht-chat__feedback h2 { margin: 0 0 5px; font-size: 21px; color: var(--wphc-ink); }
.wpht-chat__feedback p { margin: 0 0 16px; color: var(--wphc-muted); font: 13px/1.5 var(--wphc-font); }
.wpht-chat__feedback-form { display: grid; gap: 10px; }

.wpht-chat__rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 12.5px var(--wphc-font); }
.wpht-chat__rating > span { width: 100%; color: var(--wphc-muted); }
.wpht-chat__stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.wpht-chat__stars input { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; }
.wpht-chat__stars label { cursor: pointer; font-size: 26px; line-height: 1; color: #d8dee5; transition: color .12s ease; }
.wpht-chat__stars input:checked ~ label,
.wpht-chat__stars label:hover,
.wpht-chat__stars label:hover ~ label { color: #f4b400; }
.wpht-chat__stars input:focus-visible + label { outline: 2px solid var(--wphc-primary); outline-offset: 2px; border-radius: 4px; }

.wpht-chat__skip { margin-top: 8px; width: 100%; }
.wpht-chat__thanks {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 30px; background: var(--wphc-paper); text-align: center;
}
.wpht-chat__thanks svg { width: 40px; height: 40px; color: var(--wphc-primary); }
.wpht-chat__thanks span { font-size: 17px; font-weight: 600; color: var(--wphc-ink); }

.wpht-chat__greeting[hidden],
.wpht-chat__feedback[hidden],
.wpht-chat__thanks[hidden] { display: none; }

@media (max-width: 600px) {
  .wpht-chat__launcher { display: none; }
  .wpht-chat__dock { position: fixed; z-index: 9998; right: 16px; bottom: 16px; display: inline-flex; padding: 13px 18px 13px 14px; }
  .wpht-chat.is-open .wpht-chat__dock { opacity: 0; pointer-events: none; }
  .wpht-chat__panel { right: 0; bottom: 0; width: 100%; height: 100%; max-height: 100dvh; border-radius: 0; border: 0; }
  .wpht-chat__backdrop { position: fixed; inset: 0; z-index: 9999; background: rgba(17, 24, 39, .4); }
  .wpht-chat.is-open .wpht-chat__backdrop { display: block; }
}