.bopi-widget { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.bopi-launcher { position: fixed; z-index: 340; right: max(16px, env(safe-area-inset-right)); bottom: max(78px, calc(env(safe-area-inset-bottom) + 64px)); display: inline-flex; align-items: center; gap: 8px; min-height: 64px; padding: 4px 15px 4px 5px; border: 1px solid #1a5177; border-radius: 999px; background: #163f68; color: white; box-shadow: 0 10px 28px #10233f52; font-size: 14px; font-weight: 850; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.bopi-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 30px #10233f66; }
.bopi-launcher[aria-expanded=true] { background: #123455; }
.bopi-avatar { display: block; flex: none; width: 54px; height: 54px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: #eaf8ff; }
.bopi-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bopi-launcher-spark { align-self: flex-start; margin: 5px -3px 0 0; color: #ffdc8a; font-size: 16px; }
.bopi-panel { position: fixed; z-index: 340; right: max(16px, env(safe-area-inset-right)); bottom: max(142px, calc(env(safe-area-inset-bottom) + 128px)); display: flex; flex-direction: column; width: min(400px, calc(100vw - 32px)); height: min(590px, calc(100dvh - 164px)); min-height: 280px; overflow: hidden; border: 1px solid #cbd8e4; border-radius: 22px; background: #fff; color: #18344f; box-shadow: 0 22px 70px #10233f50; }
.bopi-panel[hidden] { display: none; }
.bopi-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: linear-gradient(112deg, #123c64, #1d6683); color: #fff; }
.bopi-head-avatar { width: 54px; height: 54px; }
.bopi-head h2 { margin: 0; font-size: 18px; line-height: 1.2; letter-spacing: -.2px; }
.bopi-head p { margin: 2px 0 0; color: #e2f0f5; font-size: 12px; font-weight: 550; }
.bopi-close { display: grid; place-items: center; width: 35px; height: 35px; margin-left: auto; border: 1px solid #ffffff55; border-radius: 10px; background: #ffffff19; color: #fff; font-size: 23px; line-height: 1; cursor: pointer; }
.bopi-close:hover { background: #ffffff33; }
.bopi-messages { display: flex; flex: 1; flex-direction: column; gap: 11px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 15px 15px; background: linear-gradient(180deg, #f7fafd, #fff); }
.bopi-message { max-width: 90%; padding: 11px 13px; border-radius: 15px; font-size: 14px; line-height: 1.48; overflow-wrap: anywhere; }
.bopi-message p { margin: 0; }
.bopi-bot { align-self: flex-start; border: 1px solid #dce8ed; border-bottom-left-radius: 5px; background: #fff; color: #253f56; box-shadow: 0 2px 8px #10233f0a; }
.bopi-user { align-self: flex-end; border-bottom-right-radius: 5px; background: #185976; color: #fff; }
.bopi-choices { display: grid; gap: 6px; margin-top: 11px; }
.bopi-choices button, .bopi-view-results { min-height: 40px; padding: 8px 10px; border: 1px solid #b7d1dd; border-radius: 9px; background: #eef7fa; color: #164b67; font-family: inherit; font-size: 12px; font-weight: 750; line-height: 1.3; text-align: left; cursor: pointer; }
.bopi-choices button:hover, .bopi-view-results:hover { border-color: #4e91a5; background: #e0f0f5; }
.bopi-google-attribution { display: block; margin-top: 9px; color: #5e5e5e; font: 400 12px/1.3 Roboto, Arial, sans-serif; white-space: nowrap; }
.bopi-view-results { display: block; margin-top: 10px; font-size: 13px; }
.bopi-prompts { display: flex; gap: 6px; overflow-x: auto; padding: 9px 13px; border-top: 1px solid #edf1f4; background: #fff; scrollbar-width: thin; }
.bopi-prompts button { flex: none; min-height: 34px; padding: 6px 9px; border: 1px solid #d2e1e8; border-radius: 999px; background: #f7fbfc; color: #24556c; font-family: inherit; font-size: 11px; font-weight: 720; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.bopi-prompts button:hover { background: #e8f5f8; }
.bopi-form { display: grid; gap: 6px; padding: 9px 13px 0; background: #fff; }
.bopi-form label { color: #36556d; font-size: 12px; font-weight: 750; }
.bopi-compose { display: flex; gap: 7px; }
.bopi-compose input { flex: 1; min-width: 0; min-height: 46px; padding: 9px 12px; border: 1px solid #c9d9e2; border-radius: 10px; background: #fff; color: #1c394e; font: inherit; font-size: 14px; }
.bopi-send { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 86px; min-height: 46px; padding: 8px 11px; border: 0; border-radius: 10px; background: #174ea6; color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.bopi-send:hover { background: #123f87; }
.bopi-send:disabled { opacity: .6; cursor: wait; }
.bopi-note { margin: 0; padding: 7px 14px 11px; color: #647b8c; background: #fff; font-size: 10px; line-height: 1.35; }
.bopi-launcher:focus-visible, .bopi-panel button:focus-visible, .bopi-compose input:focus-visible { outline: 3px solid #f8984b; outline-offset: 2px; }
@media(max-width:620px) {
  .bopi-launcher { right: 12px; bottom: max(72px, calc(env(safe-area-inset-bottom) + 60px)); }
  .bopi-panel { right: 8px; bottom: max(136px, calc(env(safe-area-inset-bottom) + 124px)); width: calc(100vw - 16px); height: min(560px, calc(100dvh - 154px)); border-radius: 17px; }
  .bopi-messages { padding: 13px; }
}
@media(prefers-reduced-motion:reduce) { .bopi-launcher { transition: none; } }