/* Shared conversation styles for floating and embedded Dot, with a vector brand launcher. */
.dot-chat { --dot-accent: #b52b35; --dot-link: #96212b; --dot-link-hover: #64151c; --dot-card-accent: #b52335; --dot-price: #a51f30; --dot-card-hover-bg: #fffafb; --dot-hover-bg: #fcf6f6; --dot-hover-border: #ce9a9e; --dot-focus-border: #a76a73; --dot-focus-ring: #b52b350c; --dot-disabled-bg: #f0e9eb; --dot-disabled-ink: #bba9ae; --dot-ink: #29292e; --dot-bottom: calc(var(--promo-footer-offset, 0px) + max(125px, env(safe-area-inset-bottom))); position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: var(--dot-bottom); z-index: 1040; font: 14px/1.5 Arial, sans-serif; color: var(--dot-ink); }
.dot-chat[data-chat-site="NT"] { --dot-accent: #080d5b; --dot-link: #080d5b; --dot-link-hover: #151d87; --dot-card-accent: #080d5b; --dot-price: #080d5b; --dot-card-hover-bg: #f7f5e9; --dot-hover-bg: #f7f5e9; --dot-hover-border: #cfbe73; --dot-focus-border: #080d5b; --dot-focus-ring: #080d5b18; --dot-disabled-bg: #f0eff5; --dot-disabled-ink: #9697ad; }
.dot-chat *, .dot-chat *::before, .dot-chat *::after { box-sizing: border-box; }
.dot-chat [hidden] { display: none !important; }
.dot-chat button, .dot-chat textarea { font: inherit; }
.dot-chat button { cursor: pointer; }
.dot-chat button:focus-visible { outline: 3px solid #2c6fc0; outline-offset: 4px; }
.dot-launcher { border: 0; border-radius: 18px; background: transparent; color: var(--dot-ink); padding: 8px; display: block; }
.dot-launcher:hover { background: transparent; box-shadow: none; }
.dot-launcher .dot-brand { display: block; width: 152px; height: auto; overflow: visible; }
.dot-chat[data-chat-site="NT"]:not(.dot-embed *) .dot-launcher .dot-brand--star { width: 121.6px; }
.dot-brand-bot, .dot-brand-eyes { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
    .dot-brand-bot { animation: dot-greet 7s ease-in-out infinite; }
    .dot-brand-eyes { animation: dot-blink 5s ease-in-out infinite; }
    .dot-brand-dots circle { animation: dot-bounce 1.5s ease-in-out infinite; }
    .dot-brand-dots circle:nth-child(2) { animation-delay: .16s; }
    .dot-brand-dots circle:nth-child(3) { animation-delay: .32s; }
    @keyframes dot-bounce { 0%, 40%, 100% { transform: translateY(0); } 20% { transform: translateY(-4px); } }
    @keyframes dot-greet { 0%, 12%, 100% { transform: rotate(0); } 4% { transform: rotate(-7deg); } 8% { transform: rotate(5deg); } }
    @keyframes dot-blink { 0%, 42%, 48%, 100% { transform: scaleY(1); } 45% { transform: scaleY(.12); } }
}
.dot-panel { width: 390px; height: 620px; max-height: calc(100dvh - var(--dot-bottom) - 24px); display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e0e0; border-radius: 20px; overflow: hidden; box-shadow: 0 16px 70px #28232d26, 0 3px 12px #28232d0d; }
.dot-header { display: flex; align-items: center; gap: 12px; padding: 21px 20px; border-bottom: 1px solid #eee; flex-shrink: 0; }
.dot-avatar { width: 42px; height: 42px; border-radius: 15px 15px 15px 4px; background: var(--dot-accent); display: flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; }.dot-avatar span { width: 5px; height: 7px; border-radius: 5px; background: #fff; }
.dot-heading { flex: 1; }.dot-heading h2 { font-size: 17px; margin: 0; letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; }.dot-heading p { font-size: 11px; color: #77747b; margin: 2px 0 0; }
.dot-icon-button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: #f5f4f4; border-radius: 50%; color: #55515b; }.dot-icon-button svg, .dot-send svg { width: 22px; height: 22px; }
.dot-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px 22px 18px; scrollbar-width: thin; }
.dot-welcome h3 { font-size: 30px; font-weight: bold; letter-spacing: -.06em; margin: 0 0 9px; }.dot-welcome h3 span { color: var(--dot-accent); }.dot-welcome > p:last-child { font-size: 13px; color: #6f6b74; margin: 0; line-height: 1.7; }
.dot-suggestions { display: grid; gap: 8px; margin: 23px 0 10px; }.dot-suggestions button { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1px solid #e6e2e3; border-radius: 11px; padding: 11px 13px; color: #4e4750; font-size: 12px; }.dot-suggestions button:hover { background: var(--dot-hover-bg); border-color: var(--dot-hover-border); }.dot-suggestions button span:first-child { color: var(--dot-accent); font-size: 18px; width: 20px; line-height: 1; }.dot-suggestions button span:last-child { margin-left: auto; color: #a29aa0; }
.dot-messages { display: flex; flex-direction: column; gap: 17px; }.dot-messages:not(:empty) { margin-top: 22px; }.dot-message { max-width: 92%; }.dot-message-label { display: block; color: #847d85; font-size: 10px; margin: 0 0 5px 3px; }.dot-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; padding: 13px 15px; background: #f3f2f3; border-radius: 3px 14px 14px; font-size: 13px; line-height: 1.65; }.dot-message--user { align-self: flex-end; }.dot-message--user p { background: var(--dot-accent); color: white; border-radius: 14px 3px 14px 14px; }.dot-message--user .dot-message-label { text-align: right; margin-right: 3px; }
.dot-typing { font-size: 11px; color: #847d85; margin: 17px 0 0; }.dot-typing span { color: var(--dot-accent); }
.dot-footer { padding: 12px 18px 13px; border-top: 1px solid #eeebed; background: white; flex-shrink: 0; }.dot-composer { display: flex; align-items: flex-end; gap: 8px; padding: 7px; border: 1px solid #dcd6de; border-radius: 14px; }.dot-composer:focus-within { border-color: var(--dot-focus-border); box-shadow: 0 0 0 2px var(--dot-focus-ring); }.dot-composer textarea { width: 100%; min-width: 0; padding: 8px 6px; height: 38px; max-height: 110px; resize: none; border: 0; background: transparent; color: var(--dot-ink); font-size: 13px; line-height: 22px; }.dot-composer textarea:focus-visible { outline: none; }.dot-send { width: 36px; height: 36px; display: grid; place-items: center; flex-shrink: 0; border: 0; background: var(--dot-accent); color: white; border-radius: 10px; }.dot-send:disabled { cursor: default; background: var(--dot-disabled-bg); color: var(--dot-disabled-ink); }.dot-footer-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: #857e87; font-size: 9px; letter-spacing: .02em; }.dot-footer-meta button { background: none; border: 0; color: #706671; padding: 3px; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.dot-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; }
@media(max-width: 480px) { .dot-chat { right: 12px; }.dot-panel { width: calc(100vw - 24px); height: min(660px, calc(100dvh - var(--dot-bottom) - 12px)); max-height: calc(100dvh - var(--dot-bottom) - 12px); border-radius: 17px; }.dot-scroll { padding: 22px 20px 16px; }.dot-header { padding: 17px; }.dot-composer textarea { font-size: 16px; } }
@media(prefers-reduced-motion: no-preference) { .dot-panel { animation: dot-enter .18s ease-out; } @keyframes dot-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } }
.dot-message strong { font-weight: 700; }
.dot-message a { color: var(--dot-link); text-decoration: underline; text-underline-offset: 2px; }
.dot-message a:hover { color: var(--dot-link-hover); }
.dot-message a:focus-visible { outline: 2px solid var(--dot-link); outline-offset: 3px; }
.dot-message code { font-size: .95em; background: #e8e5e8; padding: 1px 3px; border-radius: 3px; }

/* Catalogue cards use their own layout beneath the answer bubble. */
.dot-products { display: grid; min-width: 0; gap: 8px; margin-top: 8px; }
.dot-message a.dot-product { display: flex; min-width: 0; gap: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 12px; background: #fff; color: #29272c; text-decoration: none; }
.dot-message a.dot-product:hover { border-color: var(--dot-card-accent); background: var(--dot-card-hover-bg); }
.dot-product:focus-visible { outline: 2px solid var(--dot-card-accent); outline-offset: 2px; }
.dot-product-thumb { flex: 0 0 64px; height: 72px; display: grid; place-items: center; font-size: 10px; color: #777; background: #f7f7f8; border-radius: 6px; overflow: hidden; }
.dot-product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.dot-product-details { display: grid; align-content: center; flex: 1; gap: 4px; min-width: 0; font-size: 13px; }
.dot-product-price { color: var(--dot-price); font-weight: 600; }
.dot-product-details strong { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.dot-launcher .dot-brand--star, .star-avatar { display: none; }
.dot-chat[data-chat-site="NT"] .dot-brand--dot, .dot-chat[data-chat-site="NT"] .dot-avatar { display: none; }
.dot-chat[data-chat-site="NT"] .dot-brand--star { display: block; }
/* Keep Star's tagline and animated dots readable over the navy footer. */
.dot-brand--star > text, .dot-brand--star > .dot-brand-dots circle { stroke: #fff; stroke-width: 2px; stroke-linejoin: round; paint-order: stroke fill; }
.dot-chat[data-chat-site="NT"] .star-avatar { display: block; width: 46px; height: 44px; flex-shrink: 0; }
.dot-chat[data-chat-site="NT"] .dot-heading h2, .dot-chat[data-chat-site="NT"] .dot-welcome h3 { color: #080d5b; }
.star-character, .star-eyes { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
    .star-character { animation: dot-greet 7s ease-in-out infinite; }
    .star-eyes { animation: dot-blink 5s ease-in-out infinite; }
}

/* Embedded chat uses the page width; floating chat keeps its compact panel. */
.dot-reopen-label, .dot-close-dismiss { display: none; }
.dot-product-assistance { width: min(100% - 2rem, var(--shell-max-width, 1440px)); margin: 0 auto; }
.dot-embed { width: 100%; min-width: 0; margin: 28px auto; }
.dot-embed .dot-chat { position: static; min-width: 0; font-size: 14px; }
.dot-embed .dot-panel { width: 100%; height: auto; max-height: none; min-height: 0; border-radius: 16px; box-shadow: none; }
.dot-embed .dot-header { padding: 12px 20px; gap: 10px; }
.dot-embed .dot-chat .dot-avatar, .dot-embed .dot-chat .star-avatar { display: none; }
.dot-embed .dot-inline-brand { width: 220px; max-width: calc(100% - 46px); height: auto; margin-right: auto; overflow: visible; }
.dot-embed .dot-heading h2 { font-size: 16px; }
.dot-embed .dot-heading p { display: none; }
.dot-embed .dot-close-minimise { display: none; }
.dot-embed .dot-close-dismiss { display: block; }
.dot-embed .dot-scroll { flex: 0 1 auto; max-height: min(380px, 45dvh); padding: 12px 20px; }
.dot-embed .dot-welcome { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 12px 16px; background: #f7f7f8; border: 1px solid #e6e2e3; border-radius: 12px; }
.dot-embed .dot-welcome h3 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.dot-embed .dot-welcome p { margin: 0; }
.dot-embed .dot-welcome br { display: none; }
.dot-embed .dot-footer { padding: 12px 20px; }
.dot-embed .dot-footer-meta { gap: 12px; margin-top: 8px; }
.dot-embed [data-dot-reference] { margin: 0 0 0 auto; }
.dot-embed .dot-suggestions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0 0 12px; }
.dot-embed .dot-suggestions button { flex: 0 1 auto; max-width: 100%; padding: 7px 12px; gap: 7px; border-radius: 24px; }
.dot-embed .dot-suggestions button span:first-child { width: auto; font-size: 16px; }
.dot-embed .dot-suggestions button span:last-child { display: none; }
.dot-embed .dot-message { width: fit-content; max-width: 88%; }
.dot-embed .dot-message--user { margin-left: auto; }
.dot-embed .dot-message:has(.dot-products) { width: 100%; }
.dot-embed .dot-products { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.dot-embed .dot-launcher { margin: 0; padding: 0; border: 0; border-radius: 0; max-width: 100%; }
.dot-embed .dot-launcher .dot-brand { width: 220px; max-width: 100%; }
@media (max-width: 600px) {
    .dot-embed { margin: 20px auto; }
    .dot-embed .dot-header, .dot-embed .dot-footer { padding: 12px; }
    .dot-embed .dot-scroll { padding: 12px; }
    .dot-embed .dot-suggestions { justify-content: flex-start; gap: 6px; }
    .dot-embed .dot-suggestions button { padding: 7px 9px; font-size: 11px; }
    .dot-embed .dot-message { max-width: 96%; }
    .dot-embed .dot-welcome { padding: 10px 12px; }
}
@media (max-width: 480px) { .dot-launcher .dot-brand { width: 128px; } }