/* PHP AIR website assistant. Sits above the star background (canvas) and page content. */
.chat-root { position: fixed; right: 20px; bottom: 20px; z-index: 60; font-family: "Space Grotesk", system-ui, sans-serif;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chat-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.chat-root button:focus-visible, .chat-root input:focus-visible, .chat-root a:focus-visible, .chat-log:focus-visible { outline: 3px solid #ffd65a; outline-offset: 2px; }
.chat-avatar { display: block; width: 40px; height: 40px; border-radius: 50%; background: #071526; object-fit: contain; flex: none; }

/* Launcher: gradient pill with the winged-elephant avatar. Dark text on the light gradient (contrast > 10:1). */
.chat-launcher { display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 22px 8px 9px; border-radius: 999px; border: 0;
  background: linear-gradient(115deg, #62f7e0, #79c5ff 52%, #ffd65a); color: #06111f; font-weight: 700; font-size: 17px; line-height: 1.1; font-family: inherit; letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 10px 30px rgba(0, 0, 0, .45), 0 0 26px rgba(98, 247, 224, .35); transition: transform .2s ease, box-shadow .2s ease; }
.chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 14px 34px rgba(0, 0, 0, .5), 0 0 34px rgba(98, 247, 224, .5); }
.chat-launcher .chat-avatar { width: 44px; height: 44px; box-shadow: 0 0 0 2px rgba(6, 17, 31, .55); }
.chat-root.is-open .chat-launcher { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .chat-launcher { animation: chat-pulse 1.6s ease-out .8s 2; }
}
@keyframes chat-pulse {
  0% { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 0 rgba(98, 247, 224, .55); }
  70% { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 18px rgba(98, 247, 224, 0); }
  100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 0 rgba(98, 247, 224, 0); }
}
/* Never sit on top of checkout controls: hidden (layout kept) while they would overlap. */
.chat-root.is-yielding .chat-launcher, .chat-root.is-yielding .chat-greet { visibility: hidden; pointer-events: none; }

/* Greeting bubble */
.chat-greet { position: relative; display: flex; align-items: flex-start; gap: 4px; max-width: min(290px, calc(100vw - 40px)); padding: 12px 8px 12px 14px;
  background: #f4fbff; color: #0a1a2c; border-radius: 16px 16px 4px 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); }
.chat-greet[hidden] { display: none; }
.chat-greet-text { flex: 1; margin: 0; padding: 0; border: 0; background: none; color: inherit; font-weight: 500; font-size: 14.5px; line-height: 1.45; font-family: inherit; text-align: left; cursor: pointer; }
.chat-greet-close { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: rgba(10, 26, 44, .08); color: #0a1a2c; font-size: 18px; line-height: 1; cursor: pointer; }
.chat-greet-close:hover { background: rgba(10, 26, 44, .16); }
.chat-root .chat-greet button:focus-visible { outline-color: #0b6e99; }
@media (prefers-reduced-motion: no-preference) { .chat-greet:not([hidden]) { animation: chat-in .3s ease-out; } }
@keyframes chat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Panel */
.chat-panel { width: min(400px, calc(100vw - 24px)); height: min(600px, calc(100vh - 40px)); display: flex; flex-direction: column;
  background: #08182a; color: #e8edf2; border: 1px solid rgba(98, 247, 224, .35); border-radius: 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(98, 247, 224, .12); overflow: hidden; }
.chat-panel[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; background: linear-gradient(115deg, rgba(98, 247, 224, .16), rgba(121, 197, 255, .1) 55%, rgba(255, 214, 90, .14)); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.chat-titles { flex: 1; min-width: 0; }
.chat-head h2 { margin: 0; font-size: 17px; letter-spacing: .01em; color: #f2f7fb; }
.chat-status { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 12.5px; color: #c3cedb; }
.chat-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #8796a8; }
.chat-root[data-status="online"] .chat-status-dot { background: #3ee08f; box-shadow: 0 0 8px #3ee08f; }
.chat-close { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .04); color: #f2f7fb; font-size: 24px; line-height: 1; cursor: pointer; }
.chat-close:hover { background: rgba(255, 255, 255, .12); }
.chat-note { margin: 10px 16px 4px; font-size: 12.5px; line-height: 1.45; color: #c3cedb; }
.chat-log { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 9px; overscroll-behavior: contain; }
.chat-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.chat-msg p { margin: 0 0 6px; } .chat-msg p:last-of-type { margin-bottom: 0; }
.chat-bot { align-self: flex-start; background: #11263f; border: 1px solid rgba(255, 255, 255, .07); border-bottom-left-radius: 4px; }
.chat-user { align-self: flex-end; background: #1d4a5c; color: #ffffff; border-bottom-right-radius: 4px; }
.chat-wait { color: #c3cedb; font-style: italic; }
.chat-msg a, .chat-note a { color: #62f7e0; text-decoration: underline; text-underline-offset: 2px; }
.chat-links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chat-links a { display: inline-block; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(98, 247, 224, .45); text-decoration: none; font-size: 13px; }
.chat-suggest { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 14px 10px; }
.chat-suggest[hidden] { display: none; }
.chat-suggest button { padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(98, 247, 224, .55); background: rgba(98, 247, 224, .08); color: #e6fffb; font-weight: 600; font-size: 13.5px; line-height: 1.3; font-family: inherit; cursor: pointer; }
.chat-suggest button:hover { background: rgba(98, 247, 224, .18); }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.chat-form input { flex: 1 1 auto; min-width: 0; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .22); background: #050f1c; color: #f2f7fb; font-size: 16px; line-height: 1.3; font-family: inherit; }
.chat-form input::placeholder { color: #93a3b8; }
.chat-send { padding: 10px 18px; border-radius: 12px; border: 0; background: linear-gradient(115deg, #62f7e0, #ffd65a); color: #06111f; font-weight: 700; font-size: 15px; line-height: 1; font-family: inherit; cursor: pointer; }
.chat-send:disabled { opacity: .6; cursor: wait; }
.chat-count { display: block; padding: 0 14px 8px; font-size: 12px; color: #c3cedb; min-height: 0; }
.chat-count:empty { display: none; }
html.chat-lock, html.chat-lock body { overflow: hidden; }
@media (max-width: 560px) {
  .chat-root { right: 12px; bottom: 12px; }
  .chat-launcher { min-height: 56px; font-size: 16px; padding-right: 18px; }
  .chat-launcher .chat-avatar { width: 40px; height: 40px; }
  .chat-root.is-open { inset: 0; gap: 0; }
  .chat-root.is-open .chat-panel { width: 100%; height: 100%; height: 100dvh; border-radius: 0; border: 0; }
}
@media print { .chat-root { display: none; } }