/* Phase 9B.2: native-inspired Bella conversation surface; functional DOM remains unchanged. */
:root {
  --bella-chatbot-ink: #020b1e;
  --bella-chatbot-navy: #071b3a;
  --bella-chatbot-blue: #1e73a8;
  --bella-chatbot-pearl: #eaf6ff;
  --bella-chatbot-line: rgb(174 225 255 / .19);
}

.bella-cinematic-chatbot {
  position: fixed; z-index: 180; right: clamp(16px, 2.2vw, 30px);
  bottom: max(18px, env(safe-area-inset-bottom, 0px)); color: var(--bella-chatbot-pearl);
  font-family: Alata, Arial, sans-serif; transition: opacity 260ms ease, visibility 0s linear;
}
html.bella-preloading .bella-cinematic-chatbot { visibility: hidden; opacity: 0; pointer-events: none; }

.bella-cinematic-chatbot .bella-chatbot-window {
  position: absolute; right: 0; bottom: 82px; display: flex; width: min(404px, calc(100vw - 32px));
  height: min(580px, calc(100dvh - 132px)); min-height: 372px; flex-direction: column; overflow: hidden;
  border: 1px solid var(--bella-chatbot-line); border-radius: 27px;
  background: radial-gradient(circle at 12% 0%, rgb(30 115 168 / .18), transparent 31%), linear-gradient(155deg, rgb(11 45 87 / .96), rgb(2 11 30 / .985) 74%);
  box-shadow: 0 28px 78px rgb(0 5 16 / .56), inset 0 1px 0 rgb(244 250 255 / .11); backdrop-filter: blur(22px) saturate(120%);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 18px, 0) scale(.975); transform-origin: right bottom;
  transition: opacity 240ms ease, transform 300ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 300ms;
}
.bella-cinematic-chatbot.open .bella-chatbot-window { visibility: visible; opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0) scale(1); transition-delay: 0s; }

.bella-cinematic-chatbot .bella-chatbot-header {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 14px 15px 13px;
  border-bottom: 1px solid rgb(234 246 255 / .09); background: linear-gradient(100deg, rgb(18 76 124 / .38), rgb(7 27 58 / .2));
}
.bella-cinematic-chatbot .bella-chatbot-avatar {
  display: grid; width: 40px; height: 40px; flex: 0 0 auto; overflow: hidden; place-items: center;
  border: 1px solid rgb(234 246 255 / .36); border-radius: 50%; background: #0b2d57;
  box-shadow: 0 0 0 4px rgb(234 246 255 / .055), inset 0 1px 0 rgb(244 250 255 / .18);
}
.bella-cinematic-chatbot .bella-chatbot-avatar img { width: 100%; height: 100%; padding: 7px; object-fit: contain; }
.bella-cinematic-chatbot .bella-chatbot-header-info { min-width: 0; flex: 1; }
.bella-cinematic-chatbot .bella-chatbot-header-info strong { display: block; color: #f4faff; font-size: .94rem; font-weight: 400; letter-spacing: .01em; }
.bella-cinematic-chatbot .bella-chatbot-header-info span { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: rgb(234 246 255 / .65); font-size: .69rem; letter-spacing: .025em; }
.bella-cinematic-chatbot .bella-chatbot-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #83cfc5; box-shadow: 0 0 0 3px rgb(131 207 197 / .11); }

.bella-cinematic-chatbot button { font: inherit; }
.bella-cinematic-chatbot .bella-chatbot-close,
.bella-cinematic-chatbot .bella-chatbot-send {
  display: inline-grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid rgb(234 246 255 / .15);
  border-radius: 50%; color: var(--bella-chatbot-pearl); transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.bella-cinematic-chatbot .bella-chatbot-close { background: rgb(234 246 255 / .075); }
.bella-cinematic-chatbot .bella-chatbot-close svg,
.bella-cinematic-chatbot .bella-chatbot-send svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bella-cinematic-chatbot .bella-chatbot-close:hover,
.bella-cinematic-chatbot .bella-chatbot-close:focus-visible { border-color: rgb(234 246 255 / .44); background: rgb(234 246 255 / .15); transform: translateY(-1px); }

.bella-cinematic-chatbot .bella-chatbot-body {
  min-height: 0; flex: 1; padding: 17px 15px 14px; overflow-y: auto; overscroll-behavior: contain;
  background: radial-gradient(circle at 100% 0%, rgb(30 115 168 / .11), transparent 32%);
  scrollbar-color: rgb(106 174 214 / .48) rgb(2 11 30 / .25); scrollbar-width: thin;
}
.bella-cinematic-chatbot .bella-chatbot-body::-webkit-scrollbar { width: 5px; }
.bella-cinematic-chatbot .bella-chatbot-body::-webkit-scrollbar-track { background: rgb(2 11 30 / .22); }
.bella-cinematic-chatbot .bella-chatbot-body::-webkit-scrollbar-thumb { border-radius: 99px; background: rgb(106 174 214 / .48); }

.bella-cinematic-chatbot .chat-message { display: flex; margin: 0 0 12px; animation: bella-chat-message-in 220ms ease both; }
.bella-cinematic-chatbot .chat-message.user { justify-content: flex-end; }
.bella-cinematic-chatbot .chat-bubble {
  max-width: 82%; padding: 11px 13px; border: 1px solid rgb(234 246 255 / .1); border-radius: 18px;
  color: rgb(244 250 255 / .94); font-size: .82rem; font-weight: 400; line-height: 1.58; overflow-wrap: anywhere;
  box-shadow: 0 5px 15px rgb(0 5 16 / .1);
}
.bella-cinematic-chatbot .chat-message.bot .chat-bubble { border-bottom-left-radius: 6px; background: rgb(234 246 255 / .075); }
.bella-cinematic-chatbot .chat-message.user .chat-bubble { border-color: rgb(174 225 255 / .25); border-bottom-right-radius: 6px; background: linear-gradient(135deg, #1e73a8, #124c7c); color: #f8fcff; }
.bella-cinematic-chatbot .chat-bubble-text p { margin: 0 0 .75em; }
.bella-cinematic-chatbot .chat-bubble-text p:last-child { margin-bottom: 0; }
.bella-cinematic-chatbot .chat-bubble a { color: #b9e6ff; text-decoration-color: rgb(185 230 255 / .46); text-underline-offset: 3px; }

.bella-cinematic-chatbot .chat-options,
.bella-cinematic-chatbot .chat-quick-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.bella-cinematic-chatbot .chat-options { margin-top: 10px; }
.bella-cinematic-chatbot .chat-quick-actions { margin: 4px 0 15px; padding: 0 1px; }
.bella-cinematic-chatbot .chat-option-btn,
.bella-cinematic-chatbot .chat-quick-btn {
  min-height: 32px; padding: 6px 11px; border: 1px solid rgb(174 225 255 / .27); border-radius: 999px;
  color: rgb(234 246 255 / .9); background: rgb(18 76 124 / .24); font-size: .68rem; letter-spacing: .015em;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.bella-cinematic-chatbot .chat-option-btn:hover,
.bella-cinematic-chatbot .chat-quick-btn:hover,
.bella-cinematic-chatbot .chat-option-btn:focus-visible,
.bella-cinematic-chatbot .chat-quick-btn:focus-visible { border-color: rgb(185 230 255 / .65); background: rgb(30 115 168 / .5); transform: translateY(-1px); }
.bella-cinematic-chatbot .chat-option-btn:active,
.bella-cinematic-chatbot .chat-quick-btn:active { transform: translateY(0) scale(.97); }
.bella-cinematic-chatbot .chat-option-btn:disabled { opacity: .48; transform: none; }
.bella-cinematic-chatbot .chat-option-btn.selected { border-color: #b9e6ff; background: rgb(30 115 168 / .7); }

.bella-cinematic-chatbot .chat-typing { display: flex; min-width: 42px; min-height: 14px; align-items: center; gap: 4px; }
.bella-cinematic-chatbot .chat-typing span { width: 5px; height: 5px; border-radius: 50%; background: rgb(234 246 255 / .64); animation: bella-chat-typing 850ms ease-in-out infinite; }
.bella-cinematic-chatbot .chat-typing span:nth-child(2) { animation-delay: 120ms; }
.bella-cinematic-chatbot .chat-typing span:nth-child(3) { animation-delay: 240ms; }

.bella-cinematic-chatbot .bella-chatbot-footer { padding: 11px 12px 12px; border-top: 1px solid rgb(234 246 255 / .08); background: rgb(2 11 30 / .5); }
.bella-cinematic-chatbot .bella-chatbot-form {
  display: flex; min-height: 48px; align-items: center; gap: 8px; padding: 5px 6px 5px 14px; border: 1px solid rgb(174 225 255 / .22);
  border-radius: 999px; background: rgb(234 246 255 / .065); box-shadow: inset 0 1px 0 rgb(244 250 255 / .06);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.bella-cinematic-chatbot .bella-chatbot-form:focus-within { border-color: rgb(174 225 255 / .68); background: rgb(18 76 124 / .22); box-shadow: 0 0 0 3px rgb(30 115 168 / .16), inset 0 1px 0 rgb(244 250 255 / .08); }
.bella-cinematic-chatbot .bella-chatbot-input { width: 100%; min-width: 0; height: 36px; padding: 0; border: 0; outline: none; color: var(--bella-chatbot-pearl); background: transparent; font: inherit; font-size: .82rem; }
.bella-cinematic-chatbot .bella-chatbot-input::placeholder { color: rgb(234 246 255 / .47); }
.bella-cinematic-chatbot .bella-chatbot-send { width: 36px; height: 36px; border-color: rgb(185 230 255 / .36); background: #1e73a8; box-shadow: 0 4px 12px rgb(0 5 16 / .18); }
.bella-cinematic-chatbot .bella-chatbot-send:hover,
.bella-cinematic-chatbot .bella-chatbot-send:focus-visible { border-color: #eaf6ff; background: #267fb7; transform: translateY(-1px); }
.bella-cinematic-chatbot .bella-chatbot-send:disabled { opacity: .56; transform: none; }

/* Hidden compatibility launcher: revealed only if the character bundle fails. */
.bella-cinematic-chatbot .bella-chatbot-toggle { position: relative; display: grid; width: 61px; height: 61px; margin-left: auto; padding: 8px; place-items: center; overflow: visible; border: 1px solid rgb(234 246 255 / .5); border-radius: 50%; background: #0b2d57; box-shadow: 0 14px 35px rgb(0 5 16 / .42); }
.bella-cinematic-chatbot .bella-chatbot-toggle img { width: 100%; height: 100%; object-fit: contain; }
.bella-cinematic-chatbot .bella-chatbot-toggle__pulse { position: absolute; inset: -7px; border: 1px solid rgb(174 225 255 / .52); border-radius: 50%; animation: bella-chat-pulse 2.8s ease-out infinite; }
.bella-cinematic-chatbot.open .bella-chatbot-toggle__pulse { animation: none; opacity: 0; }
.bella-cinematic-chatbot :is(button, input):focus-visible { outline: 2px solid #eaf6ff; outline-offset: 3px; }

@media (max-width: 600px) {
  .bella-cinematic-chatbot { right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  .bella-cinematic-chatbot .bella-chatbot-window { width: calc(100vw - 48px); height: min(568px, calc(100dvh - 120px)); min-height: 352px; border-radius: 24px; }
  .bella-cinematic-chatbot .bella-chatbot-body { padding: 15px 13px 12px; }
  .bella-cinematic-chatbot .chat-bubble { max-width: 84%; font-size: .79rem; }
  .bella-cinematic-chatbot .chat-option-btn,
  .bella-cinematic-chatbot .chat-quick-btn { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .bella-cinematic-chatbot, .bella-cinematic-chatbot *, .bella-cinematic-chatbot *::before, .bella-cinematic-chatbot *::after { animation: none !important; transition-duration: 0ms !important; } }
@keyframes bella-chat-message-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bella-chat-pulse { 0% { opacity: .68; transform: scale(.84); } 72%, 100% { opacity: 0; transform: scale(1.25); } }
@keyframes bella-chat-typing { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }