/* ============================================================================
   Nova chat widget — the ONE canonical chat UI (Aaron 2026-10-21: "should there be a canonical template to build chat widgets?").
   Extracted from the order-confirmation chat (approved mockup order-page-chat-mockup.html v8) and extended with the support page
   pieces (approved support-page-mockup.html v6): header action, attach button inside the field, info card, ticket receipt.
   Used by: Platform/go/order-confirmation (order-page chat), Platform/support (support page). Behaviour: nova-chat.js.
   Pages may redefine the tokens below on :root; these are the defaults (the order page's palette).
   ============================================================================ */
:root{--ink:#0A0A0B;--ink2:#3D3D40;--ink3:#6B6B70;--green:#00B67A;--green-d:#00875C;--green-t:#E8F8F1;--card:#FFFFFF;--line:rgba(10,10,11,.10);--soft:#FAFAF8;--bot:#F1F1EE;--on-dark:#FFFFFF}
.nv{max-width:760px;margin:clamp(26px,4vw,36px) auto 0;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 2px 5px rgba(10,10,11,.05),0 18px 40px -22px rgba(10,10,11,.25);overflow:hidden;text-align:left}
.nv[hidden]{display:none}
.nv-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.nv-av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--green)}
.nv-t{font-weight:800;font-size:16px;line-height:1.2}
.nv-s{font-size:13px;color:var(--ink3)}
.nv-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:1px}
.nv-steps{margin-left:auto;display:flex;gap:6px}
.nv-steps i{width:22px;height:5px;border-radius:5px;background:var(--line)}
.nv-steps i.on{background:var(--green)}
.nv-log{padding:18px 20px 6px;display:flex;flex-direction:column;gap:10px;min-height:200px;max-height:520px;overflow-y:auto}
.nv-m{max-width:85%;font-size:16px;line-height:1.5;padding:11px 15px;border-radius:16px;animation:nvin .25s ease}
.nv-m.bot{background:#F1F1EE;color:var(--ink);border-bottom-left-radius:5px;align-self:flex-start}
.nv-m.me{background:var(--green);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.nv-m b{font-weight:700}
.nv-m a{color:inherit;text-decoration:underline;word-break:break-all}
.nv-m a.nv-link{display:table;margin:8px 0;padding:8px 14px;border-radius:100px;background:var(--green);color:#fff;font-weight:600;font-size:15px;text-decoration:none;word-break:normal;line-height:1.3}
.nv-m a.nv-link:hover{background:var(--green-d)}
.nv-typing{align-self:flex-start;background:#F1F1EE;border-radius:16px;padding:13px 16px;display:flex;gap:4px}
.nv-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink3);animation:nvdot 1s infinite}
.nv-typing i:nth-child(2){animation-delay:.15s}.nv-typing i:nth-child(3){animation-delay:.3s}
@keyframes nvdot{0%,60%,100%{opacity:.25}30%{opacity:1}}
@keyframes nvin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.nv-link{align-self:flex-start;font:inherit;font-size:14px;color:var(--ink3);background:none;border:0;text-decoration:underline;cursor:pointer;padding:2px 4px}
.nv-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 20px 14px}
.nv-chip{font:inherit;font-size:15px;font-weight:600;color:var(--green-d);background:#fff;border:1.5px solid rgba(0,135,92,.35);border-radius:100px;padding:9px 16px;cursor:pointer;text-align:left}
.nv-chip:hover{background:var(--green-t);border-color:var(--green)}
.nv-ask{display:flex;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--line)}
.nv-ask input{flex:1;min-width:0;font:inherit;font-size:16px;border:1px solid var(--line);border-radius:100px;padding:11px 16px;outline:none;background:#FAFAF8}
.nv-ask input:focus{border-color:var(--green)}
.nv-ask>button{font:inherit;font-weight:700;font-size:15px;color:#fff;background:var(--ink);border:0;border-radius:100px;padding:0 18px;cursor:pointer}
.nv-ask input:disabled,.nv-ask>button:disabled{opacity:.45;cursor:default}
@media (max-width:620px){.nv-m{max-width:92%}.nv-steps{display:none}.nv-h{padding:14px 16px}.nv-log{padding:16px 14px 6px}.nv-chips{padding:4px 14px 14px}}
/* support page additions */
.nv-hp{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--green-d);background:var(--card);border:1.5px solid rgba(0,135,92,.35);border-radius:100px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.nv-hp:hover{background:var(--green-t)}
.nv-ask .field{flex:1;min-width:0;display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:100px;background:var(--soft);padding-left:6px}
.nv-ask .field:focus-within{border-color:var(--green)}
.nv-ask .field input{border:0;background:transparent;padding-left:4px}
.clip{flex:none;width:34px;height:34px;border:0;background:none;color:var(--ink3);border-radius:8px;display:grid;place-items:center;cursor:pointer}
.clip:hover{background:var(--bot);color:var(--ink2)}
.nv-card{align-self:flex-start;max-width:85%;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14.5px;line-height:1.45;background:var(--card)}
.nv-card small{display:block;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.nv-card .ok{color:var(--green-d);font-weight:700}
.receipt{align-self:stretch;border:1.5px solid var(--green);border-radius:14px;background:var(--card);overflow:hidden}
.receipt .top{display:flex;align-items:center;gap:10px;background:var(--green-t);padding:10px 14px;font-size:15px;font-weight:800;color:var(--green-d)}
.receipt .top i{width:22px;height:22px;border-radius:50%;background:var(--green);color:var(--on-dark);display:grid;place-items:center;font-style:normal;font-size:13px}
.receipt .top span{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.06em}
.receipt dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding:12px 14px 4px;font-size:14.5px}
.receipt dt{color:var(--ink3)}.receipt dd{color:var(--ink)}
.receipt .act{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:10px 14px 14px;font-size:13.5px;color:var(--ink3)}
.btn-g{border:0;background:var(--green);color:var(--on-dark);font-weight:700;font-size:14.5px;border-radius:100px;padding:8px 16px;cursor:pointer}
.btn-g:hover{background:var(--green-d)}