/* DelloBot geometry and typography, with the NS Discount palette. */
@font-face {
    font-family: 'NS Bot Sans'; font-style: normal; font-display: swap; font-weight: 400 700;
    src: url('/fonts/instrument-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: 'NS Bot Sans'; font-style: normal; font-display: swap; font-weight: 400 700;
    src: url('/fonts/instrument-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
.bot-launch, .bot-panel { --bot-font: 'NS Bot Sans',sans-serif; --bot-ink: #592735; --bot-border: #dec8ce; --bot-muted: #80636b; font-family: var(--bot-font); }
.bot-panel input, .bot-panel textarea, .bot-panel button { font-family: var(--bot-font); }
.bot-launch { position: fixed; inset: auto 24px 24px auto; z-index: 70; display: flex; align-items: center; gap: 10px; min-height: 62px; width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--bot-ink); }
.bot-launch > .bot-launch-label { display: block; background: #faf8f4; border: 1px solid var(--bot-border); border-radius: 7px; padding: 7px 12px; font-size: 12px; line-height: 1.6; box-shadow: 0 3px 12px #59273510; }
.bot-launch > .bot-launch-avatar { display: grid; place-items: center; height: 62px; width: 62px; border: 1px solid #d8bbc3; border-radius: 50%; background: #f5e9ec; box-shadow: 0 6px 18px #59273520; }
.bot-launch-avatar .ns-bot-icon { width: 52px; height: 52px; }
.bot-launch:hover .bot-launch-avatar { background: #ecd6de; }
.bot-launch[aria-expanded="true"] { visibility: hidden; }
.bot-panel, .bot-panel.bot-panel-intake { position: fixed; inset: auto 24px 24px auto; transform: none; margin: 0; width: 390px; max-width: calc(100vw - 32px); height: 580px; max-height: calc(100dvh - 45px); border-radius: 14px; border: 1px solid var(--bot-border); box-shadow: 0 15px 60px #59273530; z-index: 70; overflow: hidden; background: #faf8f4; color: var(--bot-ink); font-size: 16px; line-height: 1.6; }
.bot-header { display: flex; align-items: center; gap: 9px; background: #f2e6e9; color: var(--bot-ink); padding: 12px 12px 12px 13px; border-bottom: 1px solid #e4d3d8; min-height: 0; flex-shrink: 0; }
.bot-header .bot-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: #ead7dd; }
.bot-header .bot-avatar .ns-bot-icon { width: 40px; height: 40px; }
.bot-title { min-width: 0; flex: 1; }
.bot-header strong { display: block; font-size: 17px; font-weight: 550; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 3px; }
.bot-header .bot-title small { font-size: 10px; line-height: 1.6; color: var(--bot-muted); display: block; }
.bot-header button[data-bot-close] { flex-shrink: 0; width: 35px; height: 35px; min-height: 35px; padding: 0; margin: 0; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; color: var(--bot-ink); }
.bot-header button[data-bot-close] .icon { width: 17px; height: 17px; }
.bot-header button[data-bot-close]:hover { background: #ead7dd; }
.bot-header .bot-end { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; width: auto; height: auto; min-height: 34px; padding: 6px 9px; border: 1px solid #d0b2bc; background: #fff; border-radius: 6px; font-size: 12px; line-height: 1.2; color: var(--bot-ink); white-space: nowrap; }
.bot-header .bot-end .icon { width: 14px; height: 14px; }
.bot-header .bot-end:hover { background: #ead7dd; }
.bot-intake { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.bot-intake-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 22px 22px 10px; display: grid; gap: 14px; align-content: start; }
.bot-intake-intro h2, .bot-rating h2 { font-family: var(--bot-font); font-size: 24px; font-weight: 550; line-height: 1.25; letter-spacing: -.035em; margin: 0 0 8px; }
.bot-intake-intro p { font-size: 14px; line-height: 1.7; color: var(--bot-muted); margin: 0; }
.bot-intake .field { display: grid; gap: 6px; min-width: 0; margin: 0; }
.bot-intake .field > label { font-size: 13px; font-weight: 550; line-height: 1.6; color: var(--bot-ink); }
.bot-intake .field input { width: 100%; min-width: 0; padding: 10px 12px; min-height: 44px; font-size: 16px; line-height: 1.6; background: #fff; border: 1px solid var(--bot-border); border-radius: 6px; color: var(--bot-ink); }
.bot-contact-fields { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
.bot-contact-note { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bot-intake .checkline { display: flex; align-items: flex-start; font-size: 12px; gap: 9px; line-height: 1.6; min-height: 0; margin: 0; padding: 0; color: var(--bot-muted); }
.bot-intake .checkline input { flex-shrink: 0; min-height: 0; width: 16px; height: 16px; padding: 0; margin: 2px 0 0; accent-color: #702e3d; }
.bot-intake .checkline a { color: var(--bot-ink); text-decoration: underline; text-underline-offset: 2px; }
.bot-intake-actions { flex-shrink: 0; padding: 0 22px 10px; }
.bot-intake .btn, .bot-rating .btn { width: 100%; min-height: 44px; padding: 12px 18px; font-size: 14px; font-weight: 550; line-height: 1.2; letter-spacing: normal; gap: 27px; border-radius: 8px; }
.bot-intake .btn .icon, .bot-rating .btn .icon { width: 19px; height: 19px; }
.bot-intake .bot-error { font-size: 12px; line-height: 1.5; margin: 0; padding: 0; background: none; color: #9a3042; }
.bot-messages { flex: 1; min-height: 0; overflow: auto; padding: 20px 17px 10px; overscroll-behavior: contain; scroll-behavior: smooth; }
.bot-msg { max-width: 92%; padding: 12px 14px; border-radius: 3px 12px 12px 12px; background: #f0e4e8; margin-bottom: 14px; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; color: var(--bot-ink); }
.bot-msg.user { margin-left: auto; background: #702e3d; color: #fff; border-radius: 12px 3px 12px 12px; }
.bot-links { display: grid; gap: 5px; margin: 12px 0 14px; padding-top: 10px; border-top: 1px solid var(--bot-border); }
.bot-links a { font-size: 12px; color: var(--bot-ink); min-height: 34px; line-height: 1.7; }
.bot-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 12px; flex-shrink: 0; max-height: 150px; overflow: auto; }
.bot-quick button { font-size: 12px; line-height: 1.5; padding: 6px 9px; min-height: 31px; background: transparent; color: var(--bot-muted); border: 1px solid var(--bot-border); border-radius: 6px; }
.bot-quick button:hover { background: #f0e4e8; }
.bot-input { display: flex; align-items: center; gap: 8px; margin: 0 14px; background: #fff; border: 1px solid var(--bot-border); border-radius: 8px; padding: 5px 5px 5px 12px; flex-shrink: 0; }
.bot-input input { flex: 1; min-width: 0; padding: 7px 0; min-height: 35px; font-size: 16px; line-height: 1.6; color: var(--bot-ink); border: 0; background: none; outline: none; }
.bot-input input:focus-visible { outline: none; }
.bot-input:focus-within { outline: 2px solid #b77a89; outline-offset: 2px; }
.bot-input button { background: #702e3d; color: #fff; height: 34px; width: 34px; display: grid; place-items: center; border-radius: 6px; flex-shrink: 0; }
.bot-team { background: none; padding: 4px 14px 0; flex-shrink: 0; }
.bot-team button { color: var(--bot-muted); font-size: 11px; min-height: 28px; padding: 3px 0; }
.bot-bottom { text-align: center; font-size: 11px; color: var(--bot-muted); margin: 9px 12px 11px; padding: 0; min-height: 0; line-height: 1.5; flex-shrink: 0; background: none; }
.bot-bottom a { text-decoration: underline; text-underline-offset: 2px; color: var(--bot-muted); }
.bot-rating { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 38px 26px 24px; text-align: center; }
.bot-rating > p { font-size: 14px; line-height: 1.7; color: var(--bot-muted); }
.bot-rating .field > label { font-size: 13px; }
.bot-rating textarea { font-size: 16px; border-color: var(--bot-border); border-radius: 6px; }
.bot-stars { display: flex; justify-content: center; gap: 4px; margin: 25px 0 8px; }
.bot-stars button { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 6px; background: none; font-size: 36px; color: #a0808a; }
.bot-stars button svg { width: 33px; height: 33px; fill: transparent; stroke: #a0808a; stroke-width: 1.5; }
.bot-stars button.is-selected svg { fill: #b58b55; stroke: #8f693b; }
.bot-rating .btn { margin-top: 20px; }
.ns-bot-icon { display: block; flex-shrink: 0; overflow: visible; }
.ns-bot-head { transform-origin: 32px 40px; animation: ns-dello-nod 7s ease-in-out infinite; }
.ns-bot-eyes { transform-origin: 32px 34px; animation: ns-dello-blink 6s infinite; }
.ns-bot-antenna { transform-origin: 32px 20px; animation: ns-dello-antenna 7s ease-in-out infinite; }
@keyframes ns-dello-blink { 0%,42%,46%,100% { transform: scaleY(1); } 44% { transform: scaleY(.12); } }
@keyframes ns-dello-nod { 0%,75%,100% { transform: rotate(0); } 80%,90% { transform: rotate(-4deg); } 85%,95% { transform: rotate(3deg); } }
@keyframes ns-dello-antenna { 0%,75%,100% { transform: rotate(0); } 82%,92% { transform: rotate(8deg); } 87%,97% { transform: rotate(-6deg); } }
@media (max-width:1023px) {
    .bot-launch { right: 16px; bottom: calc(var(--app-bottom) + 14px); }
    .has-commerce-dock .bot-launch { bottom: calc(var(--app-bottom) + 78px + 14px); }
    .bot-panel, .bot-panel.bot-panel-intake { --bot-dock-offset: calc(var(--app-bottom) + 12px); inset: auto 24px auto auto; top: calc(var(--visual-viewport-top,0px) + var(--visual-viewport-height,100dvh) - var(--bot-dock-offset)); transform: translateY(-100%); height: 580px; max-height: calc(var(--visual-viewport-height,100dvh) - var(--bot-dock-offset) - 16px); }
    .has-commerce-dock .bot-panel { --bot-dock-offset: calc(var(--app-bottom) + 78px + 12px); }
}
@media (max-width:640px) {
    .bot-launch { min-height: 55px; gap: 7px; }
    .bot-launch > .bot-launch-avatar { height: 55px; width: 55px; }
    .bot-launch-avatar .ns-bot-icon { width: 47px; height: 47px; }
    .bot-launch > .bot-launch-label { font-size: 10px; padding: 6px 10px; }
    .bot-panel, .bot-panel.bot-panel-intake { --bot-dock-offset: var(--app-bottom); left: 0; right: 0; width: 100%; max-width: 100%; height: min(670px,88dvh); max-height: calc(var(--visual-viewport-height,100dvh) - var(--bot-dock-offset) - 96px); border-radius: 17px 17px 0 0; border-bottom: 0; }
    .has-commerce-dock .bot-panel { --bot-dock-offset: calc(var(--app-bottom) + 78px); }
    .bot-header { gap: 8px; padding: 14px 16px 12px; }
    .bot-header button[data-bot-close] { height: 44px; width: 35px; }
    .bot-header .bot-end { font-size: 12px; min-height: 36px; padding-inline: 8px; }
    .bot-intake-body { padding: 24px 23px 10px; gap: 17px; }
    .bot-intake .field > label { font-size: 14px; }
    .bot-intake .field input { min-height: 46px; }
    .bot-contact-fields { gap: 17px; }
    .bot-intake .checkline { font-size: 13px; }
    .bot-intake-actions { padding-inline: 23px; }
    .bot-messages { padding: 20px 19px 8px; }
    .bot-msg { max-width: 93%; padding: 13px 15px; }
    .bot-links a { font-size: 12px; padding: 6px 0; min-height: 34px; }
    .bot-quick { padding: 8px 18px 13px; gap: 7px; max-height: 144px; }
    .bot-quick button { min-height: 37px; font-size: 12px; padding: 7px 11px; }
    .bot-input { margin: 0 17px; padding-left: 13px; }
    .bot-input input { min-height: 41px; padding: 8px 0; }
    .bot-input button { width: 40px; height: 40px; }
    .bot-bottom { font-size: 11px; margin: 11px 10px 14px; }
    .bot-rating { padding-inline: 24px; }
}
@media (max-width:360px) {
    .bot-header .bot-avatar { width: 35px; height: 35px; }
    .bot-header .bot-avatar .ns-bot-icon { width: 33px; height: 33px; }
    .bot-header { padding-inline: 12px; gap: 6px; }
    .bot-header .bot-end { padding-inline: 6px; }
    .bot-stars button { width: 43px; height: 46px; }
}
@media (max-width:1023px) {
    .keyboard-open .bot-panel { --bot-dock-offset: 8px; max-height: calc(var(--visual-viewport-height,100dvh) - 16px); }
}
@media (prefers-reduced-motion:reduce) { .ns-bot-icon * { animation: none !important; } .bot-messages { scroll-behavior: auto; } }
