.jbrwc-root { position: fixed; inset: auto 20px 20px auto; z-index: 10000; font: 15px/1.5 system-ui, sans-serif; color: #172b3a; color-scheme: light; }
.jbrwc-root .jbrwc-panel[hidden], .jbrwc-root .jbrwc-secondary[hidden] { display: none; }
.jbrwc-root .jbrwc-launcher, .jbrwc-root .jbrwc-send { border: 0; border-radius: 24px; padding: 13px 22px; background: #124c52; color: #fff; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.jbrwc-root .jbrwc-launcher { float: right; box-shadow: 0 6px 24px #12343d30; }
.jbrwc-root .jbrwc-panel { display: flex; flex-direction: column; width: min(390px, calc(100vw - 40px)); height: min(600px, calc(100vh - 110px)); height: min(600px, calc(100dvh - 110px)); margin-bottom: 12px; border: 1px solid #d0dcdf; border-radius: 20px; background: #fff; box-shadow: 0 12px 48px #12343d30; overflow: hidden; }
.jbrwc-root .jbrwc-header { display: flex; justify-content: space-between; gap: 12px; align-items: start; padding: 20px; background: #124c52; color: #fff; }
.jbrwc-root .jbrwc-title { font: 600 18px/1.3 system-ui, sans-serif; margin: 0; color: inherit; }
.jbrwc-root .jbrwc-subtitle { font: inherit; margin: 5px 0 0; color: #e0eeee; }
.jbrwc-root .jbrwc-close { background: transparent; color: #fff; border: 1px solid #b6d1d4; border-radius: 9px; font: 24px/1 system-ui, sans-serif; min-width: 44px; min-height: 44px; cursor: pointer; }
.jbrwc-root .jbrwc-status { margin: 0; padding: 10px 16px; font-size: 12px; background: #f1f6f6; color: #344c59; overflow-wrap: anywhere; }
.jbrwc-root .jbrwc-history { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.jbrwc-root .jbrwc-message { box-sizing: border-box; max-width: 88%; padding: 10px 13px; border-radius: 14px; margin: 0; overflow-wrap: anywhere; flex: none; }
.jbrwc-root .jbrwc-visitor { align-self: flex-end; background: #dff0ed; }
.jbrwc-root .jbrwc-other { align-self: flex-start; background: #f1f3f6; }
.jbrwc-root .jbrwc-sender { display: block; font-weight: 600; font-size: 12px; color: #3a535b; }
.jbrwc-root .jbrwc-text { white-space: pre-wrap; font: inherit; margin: 3px 0 0; color: inherit; }
.jbrwc-root .jbrwc-delivery { display: block; font-size: 12px; margin-top: 6px; }
.jbrwc-root .jbrwc-secondary { display: block; font: inherit; min-height: 44px; border: 1px solid #547579; border-radius: 8px; background: #fff; color: #124c52; padding: 6px 10px; cursor: pointer; }
.jbrwc-root .jbrwc-actions { padding: 0 16px; }
.jbrwc-root .jbrwc-compose { padding: 12px 16px 16px; border-top: 1px solid #e1e7e9; display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0; }
.jbrwc-root .jbrwc-label { grid-column: 1 / -1; font-size: 12px; font-weight: 600; }
.jbrwc-root .jbrwc-input { box-sizing: border-box; min-width: 0; width: 100%; resize: none; border: 1px solid #718990; border-radius: 10px; padding: 9px; background: #fff; color: #172b3a; font: 16px/1.4 system-ui, sans-serif; }
.jbrwc-root .jbrwc-send { align-self: end; border-radius: 10px; padding: 11px 14px; }
.jbrwc-root :disabled { opacity: .55; cursor: not-allowed; }
.jbrwc-root :focus-visible { outline: 3px solid #be671c; outline-offset: 3px; }
@media (max-width: 480px) {
    .jbrwc-root { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
    .jbrwc-root .jbrwc-panel { position: fixed; inset: max(8px, env(safe-area-inset-top)) 8px auto; width: auto; height: calc(100vh - 90px); height: calc(100dvh - 90px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-radius: 14px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .jbrwc-root .jbrwc-history { scroll-behavior: auto; } }