/* Shared chat surface. Keep this isolated from storefront theme/form rules. */
.chat-page, .storefront-chat-widget { font-family: Inter, "Noto Sans Bengali", system-ui, sans-serif; color: #302b27; font-size: 14px; line-height: 1.5; }
.chat-page *, .storefront-chat-widget * { box-sizing: border-box; }
.chat-page [hidden], .storefront-chat-widget [hidden] { display: none !important; }
.chat-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.chat-page { max-width: 1080px; margin: 24px auto; }
.chat-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; }
.chat-sidebar { align-self: start; padding: 16px; border: 1px solid #e8e1da; border-radius: 16px; background: white; }
.chat-sidebar h2 { font-size: 16px; margin: 0; }
.chat-history-link { display: grid; gap: 3px; padding: 12px; margin-top: 6px; border-radius: 10px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.chat-history-link.active, .chat-history-link:hover { background: #fff1e7; }
.chat-history-link small { color: #776e65; }
.chat-panel { display: flex; flex-direction: column; min-width: 0; height: min(760px, 85dvh); min-height: 420px; border: 1px solid #e8e1da; border-radius: 20px; overflow: hidden; background: #faf8f5; }
.chat-panel-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #ece5de; background: #fff; }
.chat-head-main, .chat-head-tools, .chat-actions { display: flex; align-items: center; gap: 8px; }
.chat-head-main, .chat-head-copy { min-width: 0; }
.chat-head-mark, .chat-head-kicker { display: none; }
.chat-panel-head h1 { margin: 0; color: #302b27; font-size: 16px; }
.chat-head-copy h1 { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-copy p { display: flex; align-items: center; gap: 5px; margin: 3px 0 0; color: #776e65; font-size: 11px; }
.chat-agent-dot { flex: none; width: 7px; height: 7px; background: #9c948b; border-radius: 50%; }
.chat-agent-dot.online { background: #18a768; }
.chat-agent-dot.away { background: #d99a19; }
.chat-head-tools { flex: none; }
.chat-head-tools .chat-status { display: none; }
.chat-status, .chat-connection { font-size: 11px; color: #776e65; }
.chat-connection.offline, .chat-connection.reconnecting { color: #ad4818; }
.chat-header-menu { position: relative; }
.chat-header-menu summary { display: grid; place-items: center; width: 36px; height: 36px; cursor: pointer; border: 1px solid #e8e1da; border-radius: 50%; list-style: none; }
.chat-header-menu summary::-webkit-details-marker { display: none; }
.chat-header-menu svg { width: 18px; height: 18px; }
.chat-header-menu > div { position: absolute; top: 42px; right: 0; z-index: 5; width: 165px; padding: 6px; background: #fff; border: 1px solid #e8e1da; border-radius: 12px; box-shadow: 0 8px 25px #302b2720; }
.chat-header-menu button { width: 100%; border: 0; padding: 12px 8px; background: #fff; color: #ba2525; cursor: pointer; }
.chat-queue-card { flex: none; display: flex; gap: 8px; align-items: center; padding: 9px 14px; background: #fff7e9; color: #795827; font-size: 11px; }
.chat-queue-card svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; }
.chat-queue-card strong, .chat-queue-card span { display: block; }
.chat-thread { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; scrollbar-width: thin; }
.chat-message { width: fit-content; max-width: 85%; margin: 0 0 12px; padding: 12px 14px; border: 1px solid #eae3dc; border-radius: 18px 18px 18px 3px; background: white; box-shadow: 0 3px 12px #33261a05; overflow-wrap: anywhere; }
.chat-message.customer { margin-left: auto; background: #fff0e4; border-color: #ffd7bb; border-radius: 18px 18px 3px 18px; }
.chat-message.system { margin-inline: auto; border-radius: 12px; background: #fff9e8; font-size: 12px; }
.chat-message b, .chat-message small { font-size: 10px; color: #81786e; }
.chat-message p { margin: 5px 0 0; white-space: pre-wrap; font-size: 14px; line-height: 1.6; }
.chat-message a { display: block; margin-top: 8px; color: #92511e; font-size: 12px; }
.chat-start { display: grid; gap: 12px; padding: 18px; overflow: auto; }
.chat-start label, .chat-feedback label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; }
.chat-start input, .chat-start select, .chat-start textarea, .chat-feedback select, .chat-feedback textarea { display: block; width: 100%; min-width: 0; border: 1px solid #ded5cb; border-radius: 10px; padding: 10px 12px; font: inherit; background: #fff; color: #302b27; }
.chat-page input:focus-visible, .chat-page textarea:focus-visible, .chat-page button:focus-visible, .chat-page summary:focus-visible, .storefront-chat-widget button:focus-visible { outline: 3px solid #ffb174; outline-offset: 2px; }
.chat-start-compact { display: flex; flex: 1; flex-direction: column; gap: 0; padding: 0; min-height: 0; overflow: hidden; }
.chat-start-scroll { flex: 1; min-height: 0; padding: 16px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.chat-start-welcome { width: min(100%, 320px); border: 1px solid #ebe3db; border-radius: 20px 20px 20px 2px; padding: 15px 17px; background: #fff; box-shadow: 0 3px 14px #41322106; }
.chat-start-welcome p { margin: 0; font-size: 14px; line-height: 1.6; }
.chat-intents { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; max-width: 340px; }
.chat-intents button { display: inline-flex; align-items: center; min-height: 32px; width: auto; max-width: 100%; padding: 5px 11px; border: 1px solid #e5d9cb; border-radius: 999px; background: #fff; color: #bd4a0d; box-shadow: 0 2px 5px #35271c06; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.4; cursor: pointer; text-align: left; }
.chat-intents button:hover { background: #fff1e6; border-color: #ed9e61; }
.chat-start-time { display: block; margin: 7px 3px 0; font-size: 10px; color: #928578; }
.chat-start-identity { min-width: 0; margin: 18px 0 0; padding: 14px; border: 1px solid #eadccc; border-radius: 16px; background: #fff; }
.chat-start-identity legend { padding: 0 5px; font-weight: 700; font-size: 14px; }
.chat-start-identity p { margin: 0 0 12px; font-size: 12px; color: #72695e; }
.chat-start-identity label + label { margin-top: 10px; }
.chat-start-identity input { min-height: 44px; font-size: 16px; }
.chat-start-identity small { display: block; margin-top: 8px; color: #817568; font-size: 11px; }
.chat-start-scroll.is-identifying .chat-start-welcome, .chat-start-scroll.is-identifying .chat-intents, .chat-start-scroll.is-identifying .chat-start-time { display: none; }
.chat-start-scroll.is-identifying .chat-start-identity { margin-top: 10px; }
.chat-identity-back { border: 0; padding: 8px 0; background: transparent; color: #a04416; font: inherit; font-size: 12px; cursor: pointer; }
.chat-composer { flex: none; margin: 0; padding: 12px 14px; border-top: 1px solid #eee5dc; background: #fff; }
.chat-compose-row { display: flex; align-items: flex-end; gap: 8px; min-width: 0; }
.chat-compose-row label.chat-start-message, .chat-compose-row label.chat-reply-field { display: block; flex: 1; min-width: 0; margin: 0; padding: 0; }
.chat-compose-row textarea { display: block; box-sizing: border-box; width: 100%; min-height: 44px; height: 44px; max-height: 100px; padding: 11px 14px; resize: none; border: 1px solid #e1d6c9; border-radius: 24px; background: #faf8f5; color: #302b27; font: 400 16px/22px Inter, "Noto Sans Bengali", system-ui, sans-serif; }
.chat-compose-row textarea::placeholder { color: #8a837c; font-size: 13px; }
.chat-page .chat-send-button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; min-width: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #fa650b; color: #fff; box-shadow: 0 4px 12px #f2642233; cursor: pointer; }
.chat-page .chat-send-button:hover { background: #df5100; }
.chat-send-button svg, .chat-attachment-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-page button:disabled { opacity: .55; cursor: wait; }
.chat-attachment-button { position: relative; display: grid; place-items: center; flex: 0 0 32px; height: 44px; color: #807568; cursor: pointer; overflow: hidden; }
.chat-attachment-button input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.chat-attachment-button:focus-within { outline: 2px solid #f58232; border-radius: 8px; }
.chat-attachment-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chat-attachment-chip { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; padding: 4px 8px; border: 1px solid #eee2d6; border-radius: 8px; font-size: 11px; }
.chat-attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-attachment-chip button { flex: none; min-width: 28px; min-height: 28px; border: 0; border-radius: 50%; background: #fff0e4; color: #9a471a; cursor: pointer; }
.chat-form-error { color: #b42318 !important; font-size: 12px; margin: 6px 0 0; }
.chat-alert { flex: none; padding: 8px 14px; background: #fff5e8; font-size: 12px; color: #795827; }
.chat-closed { max-height: 50%; overflow: auto; padding: 16px; background: white; border-top: 1px solid #e8e1da; }
.chat-closed .chat-actions { flex-wrap: wrap; }
.chat-feedback { display: grid; gap: 10px; margin-top: 14px; }
.chat-page .button { display: inline-flex; justify-content: center; align-items: center; padding: 10px 14px; border: 0; border-radius: 10px; background: #e8570e; color: #fff; text-decoration: none; cursor: pointer; }
.chat-page.is-embed { display: flex; flex-direction: column; width: 100%; height: 100dvh; max-width: none; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
.chat-page.is-embed > .section-head, .is-embed .chat-start-heading { display: none; }
.chat-page.is-embed .chat-layout { display: flex; flex: 1; min-height: 0; }
.chat-page.is-embed .chat-panel { flex: 1; height: 100%; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
.is-embed .chat-head-copy h1 { display: none; }
.is-embed .chat-head-copy p { font-size: 11px; }
.is-embed .chat-panel-head { padding: 7px 14px; }
.is-embed .chat-connection { display: none; }
.is-embed .chat-thread { padding-right: 66px; }

/* Outer popup deliberately matches the supplied red / cream reference. */
.storefront-chat-widget { position: fixed; right: 20px; bottom: 22px; z-index: 90; }
.storefront-chat-launcher { position: relative; display: grid; place-items: center; width: 58px; height: 58px; min-width: 58px; padding: 0; border: 0; border-radius: 50%; background: #ef0c10; color: white; box-shadow: 0 10px 28px #ed101033; cursor: pointer; }
.storefront-chat-launcher svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.storefront-chat-launcher b { position: absolute; right: -3px; top: -4px; padding: 2px 5px; border-radius: 20px; background: #33108c; font-size: 10px; }
.storefront-chat-popover { display: flex; flex-direction: column; position: absolute; right: 0; bottom: 74px; width: 410px; height: min(620px, calc(100dvh - 118px)); min-height: 0; overflow: hidden; border: 1px solid #e4dad0; border-radius: 24px; background: #faf8f5; box-shadow: 0 14px 50px #1b172a30; }
.storefront-chat-popover .storefront-chat-header { display: flex; flex: none; align-items: center; gap: 12px; min-height: 80px; padding: 15px 18px; background: #ee090d; }
.storefront-chat-avatar { display: grid; place-items: center; position: relative; flex: 0 0 42px; height: 42px; border: 1px solid #ffb1b1; border-radius: 50%; background: #ffffff22; color: white; }
.storefront-chat-avatar svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.storefront-chat-avatar i { position: absolute; bottom: -1px; right: -1px; width: 10px; height: 10px; border: 2px solid white; border-radius: 50%; background: #bdb4ad; }
.storefront-chat-widget[data-presence="online"] .storefront-chat-avatar i { background: #23be6b; }
.storefront-chat-brand { flex: 1; min-width: 0; }
.storefront-chat-brand strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 750; color: #181313; }
.storefront-chat-brand small { display: block; margin-top: 3px; color: white; font-size: 11px; line-height: 1.4; }
.storefront-chat-close { display: grid; place-items: center; flex: 0 0 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #ffffff33; color: white; cursor: pointer; }
.storefront-chat-close:hover { background: #ffffff50; }
.storefront-chat-close svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.storefront-chat-frame-shell { position: relative; flex: 1; min-height: 0; }
.storefront-chat-frame-shell iframe { display: block; width: 100%; height: 100%; border: 0; background: #faf8f5; }
.storefront-chat-loading, .storefront-chat-load-error { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: #faf8f5; }
.storefront-chat-loading strong { font-size: 13px; font-weight: 500; }
.storefront-chat-loading span { width: 26px; height: 26px; border: 3px solid #eadccc; border-top-color: #ef0c10; border-radius: 50%; animation: chat-spin 1s linear infinite; }
.storefront-chat-load-error button { padding: 10px 16px; border: 0; border-radius: 10px; color: white; background: #ef0c10; cursor: pointer; }
.storefront-chat-load-error a { color: #9a471a; }
.cart-drawer.is-open { z-index: 110; }
.storefront-floating-cart > .ui-inline-icon { display: none; }
body.chat-overlay-open .storefront-floating-cart { top: auto; bottom: var(--chat-cart-bottom, 206px); transform: none; z-index: 91; }
body.chat-overlay-open .storefront-floating-cart:hover { transform: translateX(-3px); }
body.cart-overlay-open .storefront-floating-cart, body.cart-overlay-open .storefront-chat-widget { visibility: hidden; }
body.chat-overlay-open .mobile-nav { pointer-events: none; }
@keyframes chat-spin { to { transform: rotate(360deg); } }
@media (max-width: 850px) {
    .storefront-chat-widget { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); }
    .chat-layout { grid-template-columns: 1fr; }
    .chat-sidebar { order: 2; }
}
@media (max-width: 560px) {
    body.chat-overlay-open { overflow: hidden; }
    .storefront-chat-widget.is-open { inset: 0; pointer-events: none; }
    .storefront-chat-widget.is-open .storefront-chat-launcher { display: none; }
    .storefront-chat-popover { position: fixed; left: 12px; right: 12px; bottom: var(--chat-bottom, max(16px, env(safe-area-inset-bottom))); width: auto; height: min(680px, calc(var(--chat-viewport-height, 100dvh) - 32px)); border-radius: 24px; pointer-events: auto; }
    .storefront-chat-popover .storefront-chat-header { padding: 14px 16px; gap: 10px; }
    .chat-start-scroll { padding: 16px; }
    .chat-composer { padding: 11px 14px; }
    .chat-panel { min-height: 400px; }
    body.chat-overlay-open .storefront-floating-cart { width: 56px; min-height: 72px; }
}
@media (max-height: 520px) {
    .storefront-chat-popover { height: calc(var(--chat-viewport-height, 100dvh) - 16px); bottom: var(--chat-bottom, 8px); }
    .storefront-chat-popover .storefront-chat-header { min-height: 60px; padding-block: 9px; }
    body.chat-overlay-open .storefront-floating-cart { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .storefront-chat-loading span { animation: none; } }