/* chat-widget.css */
:root {
  --poas-bg: #ffffff;
  --poas-fg: #1f2937;         /* slate-800 */
  --poas-accent: #2c3e50;     /* brand */
  --poas-accent-2: #0ea5e9;   /* sky-500 */
  --poas-muted: #f3f4f6;      /* gray-100 */
  --poas-border: #e5e7eb;     /* gray-200 */
  --poas-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --poas-bg: #0b0f14;
    --poas-fg: #e5e7eb;
    --poas-accent: #2c3e50;
    --poas-accent-2: #38bdf8;
    --poas-muted: #0f1720;
    --poas-border: #111827;
    --poas-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Ubuntu, Arial,
    sans-serif;
  background: transparent;
}

/* Floating Button */
#chat-btn {
  position: fixed;
  inset: auto 20px 80px auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--poas-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  z-index: 9998;
  box-shadow: var(--poas-shadow);
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  transition: transform 0.15s ease;
}
#chat-btn:hover {
  transform: translateY(-2px);
}
#chat-btn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
  box-shadow: var(--poas-shadow);
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 139, 192, 0.6);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(46, 139, 192, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(46, 139, 192, 0);
  }
}
#chat-btn.pulse {
  animation: pulse 2s infinite;
}

/* Widget Shell */
#ai-chat-widget {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 340px;
  max-height: 70vh;
  height: 520px;
  background: var(--poas-bg);
  color: var(--poas-fg);
  border-radius: 14px;
  overflow: hidden;
  display: none;
  z-index: 9999;
  box-shadow: var(--poas-shadow);
  border: 1px solid var(--poas-border);
}
#ai-chat-widget[aria-hidden="false"] {
  display: block;
}
#ai-chat-widget.min {
  height: 56px;
}

/* Header */
.chat-header {
  background: linear-gradient(135deg, var(--poas-accent), #1a2530);
  color: #fff;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  cursor: grab;
}
.chat-header:active {
  cursor: grabbing;
}
.chat-title {
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
}
.chat-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.icon-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

/* Content */
#chat-content {
  display: flex;
  flex-direction: column;
  height: calc(100% - 48px);
}
#chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  background: var(--poas-muted);
}
.msg {
  max-width: 85%;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.msg.bot {
  align-self: flex-start;
  background: #ffffff;
  color: var(--poas-fg);
  border: 1px solid var(--poas-border);
}
.msg.user {
  align-self: flex-end;
  background: var(--poas-accent);
  color: #fff;
}
.msg time {
  display: block;
  font-size: 11px;
  opacity: 0.6;
  margin-top: 6px;
}

.typing {
  display: inline-flex;
  gap: 4px;
}
.typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  animation: b 1.2s infinite;
}
.typing span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes b {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Input Row */
#chat-input-container {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--poas-border);
  background: var(--poas-bg);
}
#chat-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--poas-border);
  border-radius: 10px;
  background: transparent;
  color: inherit;
}
#chat-send {
  flex: 0 0 auto;
  padding: 10px 14px;
  background: var(--poas-accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

/* Mobile */
@media (max-width: 480px) {
  #ai-chat-widget {
    width: calc(100vw - 20px);
    right: 10px;
    left: 10px;
    height: 65vh;
    bottom: 90px;
  }
  #chat-btn {
    right