/* Aipas live-chat widget — self-contained, matches storefront palette. */

.aipas-chat-btn {
  position: fixed; right: 20px; bottom: 20px; z-index: 9000;
  width: 58px; height: 58px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: #0ea05a; color: #fff; font-size: 26px;
  box-shadow: 0 8px 24px rgba(14, 160, 90, .45);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.aipas-chat-btn:hover { transform: scale(1.07); }
.aipas-chat-btn .aipas-chat-unread {
  position: absolute; top: -4px; right: -4px;
  background: #dc2626; color: #fff; border-radius: 99px;
  font-size: 12px; font-weight: 700; padding: 1px 6px; min-width: 18px;
}

/* The widget toggles visibility with the `hidden` attribute. An author
   `display` value overrides the browser's built-in [hidden] rule, so it must
   be restated here or the panel can never close. */
.aipas-chat-panel[hidden],
.aipas-chat-unread[hidden] { display: none !important; }

.aipas-chat-panel {
  position: fixed; right: 20px; bottom: 90px; z-index: 9001;
  width: min(360px, calc(100vw - 32px));
  height: min(480px, calc(100vh - 120px));
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
  display: flex; flex-direction: column;
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #16212e;
}
.aipas-chat-head {
  background: #101827; color: #fff; padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
}
.aipas-chat-head .t { font-weight: 800; }
.aipas-chat-head .s { font-size: 12px; opacity: .8; display: block; }
.aipas-chat-head .aipas-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; flex: none;
}
.aipas-chat-head .aipas-dot.on { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.aipas-chat-close {
  margin-left: auto; background: none; border: 0; color: #fff;
  font-size: 20px; cursor: pointer; opacity: .8;
}
.aipas-chat-close:hover { opacity: 1; }

.aipas-chat-body {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 8px; background: #f6f8fb;
}
.aipas-msg {
  max-width: 80%; padding: 8px 12px; border-radius: 12px;
  white-space: pre-wrap; word-break: break-word;
}
.aipas-msg.me { background: #0ea05a; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.aipas-msg.them { background: #fff; border: 1px solid #e2e8f0; align-self: flex-start; border-bottom-left-radius: 4px; }
.aipas-msg .m { display: block; font-size: 10px; opacity: .65; margin-top: 3px; }
.aipas-chat-note { font-size: 12px; color: #64748b; text-align: center; padding: 4px 10px; }

.aipas-chat-form { padding: 12px; border-top: 1px solid #e2e8f0; display: grid; gap: 8px; background: #fff; }
.aipas-chat-form input, .aipas-chat-form textarea {
  font: inherit; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 10px; width: 100%;
  box-sizing: border-box; resize: none;
}
.aipas-chat-form input:focus, .aipas-chat-form textarea:focus { outline: 2px solid #0ea05a; border-color: #0ea05a; }
.aipas-chat-send {
  border: 0; border-radius: 8px; background: #0ea05a; color: #fff;
  font-weight: 700; padding: 10px; cursor: pointer; font-size: 14px;
}
.aipas-chat-send:hover { background: #0b7d46; }
.aipas-chat-send[disabled] { opacity: .6; cursor: default; }
.aipas-chat-row { display: flex; gap: 8px; }
.aipas-chat-row textarea { flex: 1; height: 44px; }
.aipas-chat-err { color: #dc2626; font-size: 12px; min-height: 15px; }

@media (max-width: 480px) {
  .aipas-chat-panel { right: 8px; bottom: 84px; }
  .aipas-chat-btn { right: 12px; bottom: 12px; }
}