/* Neeb website chat widget (website/chat.js). Tokens from ../brand/neeb.css.
   Bottom-right in LTR, bottom-left in RTL (logical properties). Full-height sheet at ≤480px. */
.nc { --nc-paper: var(--paper); --nc-line: color-mix(in srgb, var(--ink) 14%, transparent); font: 15px/1.55 var(--f-sans); color: var(--ink); }
.nc[dir="rtl"] { font-family: var(--f-arabic); }
.nc *, .nc *::before, .nc *::after { box-sizing: border-box; }
/* zero specificity, so component colours below always win */
:where(.nc) :where(button, input, textarea, select) { font: inherit; color: inherit; letter-spacing: 0; text-transform: none; }
.nc .nc-sr, .nc .nc-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the button */
.nc-fab { position: fixed; z-index: 55; inset-block-end: max(20px, env(safe-area-inset-bottom)); inset-inline-end: 20px; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px 14px 16px; border: 0; border-radius: 999px; background: var(--olive-deep); color: var(--cream); cursor: pointer; box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--ink) 60%, transparent); transition: transform var(--t-ui) var(--ease-pour), background var(--t-ui); }
.nc[dir="rtl"] .nc-fab { padding: 14px 16px 14px 20px; }
.nc-fab:hover { transform: translateY(-2px); background: var(--olive); }
.nc-fab svg { width: 22px; height: 22px; flex: none; }
.nc-fab-label { font-weight: 600; font-size: 14px; letter-spacing: .03em; }
.nc[dir="rtl"] .nc-fab-label { letter-spacing: 0; font-size: 15px; }
.nc-open .nc-fab { display: none; }

/* the panel */
.nc-panel { position: fixed; z-index: 56; inset-block-end: max(20px, env(safe-area-inset-bottom)); inset-inline-end: 20px; width: min(392px, calc(100vw - 40px)); height: min(640px, calc(100dvh - 40px)); display: flex; flex-direction: column; background: var(--stone); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--ink) 55%, transparent), 0 0 0 1px var(--nc-line); animation: nc-in var(--t-ui) var(--ease-pour) both; }
@keyframes nc-in { from { opacity: 0; transform: translateY(14px); } }

.nc-head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 18px; background: var(--olive-deep); color: var(--cream); }
.nc[dir="rtl"] .nc-head { padding: 14px 18px 14px 12px; }
.nc-mark { width: 34px; flex: none; color: var(--cream); aspect-ratio: 1; display: grid; place-items: center; }
.nc-mark svg { width: 100%; height: auto; }
.nc-head-txt { flex: 1; min-width: 0; }
.nc-head h2 { margin: 0; font: 500 24px/1.05 var(--f-display); color: var(--cream); }
.nc[dir="rtl"] .nc-head h2 { font: 600 19px/1.3 var(--f-arabic); }
.nc-head p { margin: 2px 0 0; font-size: 12.5px; opacity: .82; }
.nc-icon { width: 36px; height: 36px; flex: none; border: 0; border-radius: 999px; background: transparent; color: var(--cream); cursor: pointer; font-size: 20px; line-height: 1; display: grid; place-items: center; transition: background var(--t-micro); }
.nc-icon:hover { background: color-mix(in srgb, var(--cream) 14%, transparent); }
.nc-restart { font-size: 17px; }
.nc :focus-visible { outline: 2px solid var(--olive); outline-offset: 2px; }
.nc-head :focus-visible { outline-color: var(--cream); }

/* messages */
.nc-log { flex: 1; overflow-y: auto; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.nc-msg { max-width: 88%; animation: nc-msg var(--t-ui) var(--ease-pour) both; }
@keyframes nc-msg { from { opacity: 0; transform: translateY(6px); } }
.nc-msg p { margin: 0; padding: 10px 14px; border-radius: 16px; overflow-wrap: anywhere; }
.nc-bot { align-self: flex-start; }
.nc-bot p { background: var(--nc-paper); border: 1px solid var(--nc-line); border-end-start-radius: 4px; }
.nc-me { align-self: flex-end; }
.nc-me p { background: var(--olive); color: var(--cream); border-end-end-radius: 4px; }

.nc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding: 10px 18px; border-radius: 999px; border: 0; background: var(--ink); color: var(--stone); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; transition: background var(--t-ui); }
.nc-btn:hover { background: var(--olive); color: var(--cream); } /* stone on olive is not in the contrast table; cream is (6.6) */
.nc-btn:disabled { opacity: .45; cursor: default; }
.nc-wa::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--leaf); }

/* quote card (AI replies) */
.nc-quote { margin: 8px 0 0; padding: 12px 14px; background: var(--nc-paper); border: 1px solid var(--nc-line); border-radius: 12px; display: grid; gap: 4px; }
.nc-quote .nc-quote-h { font: 500 18px/1.2 var(--f-display); margin-bottom: 4px; }
.nc[dir="rtl"] .nc-quote .nc-quote-h { font: 600 15px/1.4 var(--f-arabic); }
.nc-quote div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.nc-quote-note { margin: 4px 0 0; font-size: 12px; opacity: .8; }
.nc-quote dd { margin: 0; font: 400 13.5px var(--f-mono); font-variant-numeric: tabular-nums; }

/* inline contact form */
.nc-lead { margin-top: 8px; padding: 12px 14px; background: var(--nc-paper); border: 1px solid var(--nc-line); border-radius: 12px; display: grid; gap: 8px; }
.nc-lead label { display: grid; gap: 3px; margin: 0; font: 600 12px var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--olive); }
.nc[dir="rtl"] .nc-lead label { font: 600 13px var(--f-arabic); letter-spacing: 0; }
.nc-lead input, .nc-lead select { width: 100%; padding: 9px 10px; background: var(--stone); border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 2px; font-size: 15px; }
.nc-lead input:focus, .nc-lead select:focus { outline: none; border-bottom-color: var(--olive); }
.nc-lead input:focus-visible, .nc-lead select:focus-visible { outline: 2px solid var(--olive); outline-offset: 1px; }
.nc-lead-err { margin: 0; min-height: 0; font-size: 13px; color: var(--roast); }
.nc-lead-err:empty { display: none; }
.nc-lead .nc-btn { justify-self: start; margin-top: 2px; }

/* typing indicator */
.nc-typing { margin: 0 16px 6px; align-self: flex-start; }
.nc-dots { display: inline-flex; gap: 4px; padding: 12px 14px; background: var(--nc-paper); border: 1px solid var(--nc-line); border-radius: 16px; border-end-start-radius: 4px; }
.nc-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--olive); opacity: .35; animation: nc-dot 1.1s var(--ease-steam) infinite; }
.nc-dots i:nth-child(2) { animation-delay: .15s; }
.nc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes nc-dot { 40% { opacity: 1; transform: translateY(-3px); } }

/* quick replies */
.nc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; }
.nc-chips:empty { display: none; }
.nc-chip { padding: 8px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: transparent; cursor: pointer; font-size: 13.5px; font-weight: 600; transition: background var(--t-micro), color var(--t-micro); }
.nc-chip:hover { background: var(--ink); color: var(--stone); border-color: var(--ink); }

/* compose */
.nc-compose { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 8px 8px 8px 14px; background: var(--nc-paper); border: 1px solid var(--nc-line); border-radius: 22px; }
.nc[dir="rtl"] .nc-compose { padding: 8px 14px 8px 8px; }
.nc-compose textarea { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; padding: 7px 0; max-height: 120px; font-size: 16px; line-height: 1.4; }
.nc-compose textarea:focus { outline: none; }
.nc-compose:focus-within { border-color: var(--olive); box-shadow: 0 0 0 1px var(--olive); }
.nc-send { width: 38px; height: 38px; flex: none; border: 0; border-radius: 999px; background: var(--ink); color: var(--stone); cursor: pointer; display: grid; place-items: center; transition: background var(--t-micro); }
.nc-send:hover { background: var(--olive); color: var(--cream); }
.nc-send svg { width: 20px; height: 20px; }
.nc[dir="rtl"] .nc-send svg { transform: scaleX(-1); }
.nc-note { margin: 0; padding: 8px 16px 12px; font-size: 12px; color: var(--ink); text-align: center; } /* ink on stone (14.9): the disclosure line (D-024) must read clearly; #5d6258 was off-palette */
/* Privacy link under the disclosure line and under each lead form (added by site.js, not chat.js). */
.nc-privacy { margin: -6px 0 0; padding: 0 16px 12px; font-size: 12px; text-align: center; color: var(--ink); }
.nc-privacy a { color: var(--ink); text-underline-offset: 3px; display: inline-block; padding-block: 4px; }
.nc-msg .nc-lead .nc-privacy { margin: 4px 0 0; padding: 0; text-align: start; background: none; border: 0; border-radius: 0; } /* not a bubble (.nc-msg p) */

/* phone: a full-height sheet */
/* Wholesale on phones: sit above the action bar (site.css .mbar, 60px) unless the bar has stepped aside. */
@media (max-width: 760px) {
  body[data-page="wholesale"]:not(.mbar-away) .nc-fab { inset-block-end: calc(72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .nc-fab { inset-block-end: max(16px, env(safe-area-inset-bottom)); inset-inline-end: 16px; padding: 14px; }
  .nc-fab-label { display: none; }
  .nc[dir="rtl"] .nc-fab { padding: 14px; }
  .nc-panel { inset: 0; width: 100%; height: 100dvh; border-radius: 0; padding-bottom: env(safe-area-inset-bottom); }
  .nc-msg { max-width: 92%; }
  html.nc-lock, html.nc-lock body { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .nc-panel, .nc-msg { animation: none; }
  .nc-dots i { animation: none; opacity: .7; }
  .nc-fab, .nc-fab:hover { transition: none; transform: none; }
}