/* STAR+ Assistant v1.4. All presentation is scoped to this widget. */
#sp-assistant { --ai-blue: #0754a6; --ai-ink: #143457; font: 14px/1.5 Inter, Arial, sans-serif; color: var(--ai-ink); }
#sp-assistant [hidden] { display: none !important; }
#sp-assistant button, #sp-assistant textarea { font: inherit; }
#sp-assistant button { cursor: pointer; }
#sp-assistant button:disabled { cursor: not-allowed; opacity: .55; }
#sp-assistant :focus-visible { outline: 3px solid #ffb544; outline-offset: 3px; }
.sp-ai-launch { position: fixed; z-index: 85; right: 24px; bottom: 94px; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 9px 17px 9px 10px; border: 1px solid #367bb8; border-radius: 30px; color: #fff; background: linear-gradient(130deg, #063971, #0872cb); box-shadow: 0 8px 26px #06397138; }
.sp-ai-launch b { margin-left: 4px; padding: 3px 5px; background: #ffffff24; border-radius: 5px; font-size: 11px; letter-spacing: .06em; }
.sp-ai-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid #ffffff40; border-radius: 12px; color: #fff; background: #ffffff17; font-size: 25px; }
.sp-ai-panel { position: fixed; z-index: 1000; right: 24px; bottom: 24px; width: 410px; max-width: calc(100vw - 32px); height: min(710px, calc(100dvh - 48px)); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #dce5ef; border-radius: 22px; background: #fff; box-shadow: 0 18px 70px #06336638; animation: sp-ai-enter .18s ease-out; }
.sp-ai-header { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; padding: 20px 18px; color: #fff; background: linear-gradient(120deg, #063971, #0864b7); }
.sp-ai-header>div { flex: 1; min-width: 0; }
.sp-ai-header .sp-ai-brand { margin: 0 0 4px; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #c8e5ff; }
.sp-ai-header h2 { margin: 0; font-size: 17px; color: #fff; line-height: 1.3; }
#sp-ai-status { margin: 6px 0 0; color: #d4eaff; font-size: 12px; }
#sp-ai-close { flex-shrink: 0; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #ffffff14; color: #fff; font-size: 27px; }
.sp-ai-intro { padding: 10px 18px; background: #f4f8fc; border-bottom: 1px solid #e9eff5; font-size: 12px; color: #54718e; }
.sp-ai-messages { flex: 1; min-height: 0; padding: 18px; overflow-y: auto; overscroll-behavior: contain; scroll-behavior: smooth; }
.sp-ai-message { width: fit-content; max-width: 94%; margin: 0 0 14px; padding: 13px 15px; border: 1px solid #e3eaf1; border-radius: 4px 16px 16px; background: #f6f9fc; overflow-wrap: anywhere; }
.sp-ai-message p { margin: 5px 0 0; white-space: pre-wrap; }
.sp-ai-author { font-size: 11px; font-weight: 800; color: #0760ad; letter-spacing: .03em; }
.sp-ai-message--customer { margin-left: auto; background: #0754a6; color: #fff; border-color: #0754a6; border-radius: 16px 4px 16px 16px; }
.sp-ai-message--customer .sp-ai-author { color: #d4eaff; }
.sp-ai-message--human { border-left: 3px solid #ec9f26; background: #fffbf3; }
.sp-ai-products { display: grid; gap: 10px; margin-top: 12px; }
.sp-ai-product { padding: 12px; background: #fff; border: 1px solid #dde6f0; border-radius: 10px; }
.sp-ai-product strong { display: block; font-size: 14px; }
.sp-ai-product .sp-ai-price { margin: 5px 0; font-weight: 700; color: #0754a6; }
.sp-ai-product button, .sp-ai-link, .sp-ai-order { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 12px; margin-top: 8px; border: 1px solid #c9dcee; border-radius: 8px; background: #eff6fd; color: #064e99; font-weight: 600; text-decoration: none; }
.sp-ai-link { background: #076e43; color: #fff; border-color: #076e43; }
.sp-ai-suggestions { display: flex; flex: 0 0 auto; gap: 7px; padding: 8px 16px; overflow-x: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.sp-ai-suggestions button { flex: 0 0 auto; padding: 8px 11px; min-height: 40px; border: 1px solid #d5e3ef; border-radius: 20px; background: #fff; color: #0754a6; font-size: 12px !important; }
.sp-ai-feedback { flex: 0 0 auto; margin: 0; padding: 0 18px; color: #526c84; font-size: 12px; }
.sp-ai-feedback:not(:empty) { padding-block: 8px; }
.sp-ai-feedback.is-error { color: #a02921; }
.sp-ai-form { display: flex; flex: 0 0 auto; align-items: flex-end; gap: 9px; margin: 10px 14px 0; padding: 7px; border: 1px solid #cfdeec; border-radius: 13px; background: #fff; }
#sp-ai-input { flex: 1; width: 100%; min-width: 0; min-height: 44px; max-height: 108px; resize: none; padding: 10px 6px; border: 0; background: transparent; color: #173858; font-size: 16px; }
#sp-ai-send { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 9px; background: #0754a6; color: #fff; font-size: 26px !important; }
.sp-ai-disclaimer { flex: 0 0 auto; margin: 10px 17px 14px; font-size: 10px; line-height: 1.4; color: #63788d; text-align: center; }
@keyframes sp-ai-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .sp-ai-launch { right: 14px; bottom: 86px; min-height: 48px; }
  .sp-ai-panel { right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: calc(100vw - 16px); max-width: none; height: calc(100dvh - 16px - env(safe-area-inset-bottom)); border-radius: 18px; }
  .sp-ai-header { padding: 15px; }
  .sp-ai-messages { padding: 14px; }
  .sp-ai-message { max-width: 97%; }
}
@media (prefers-reduced-motion: reduce) { .sp-ai-panel { animation: none; } .sp-ai-messages { scroll-behavior: auto; } }
