/* Nawra chat (/bantu/) -- refreshed 26 Sep 2026 to the redesign look (deep violet, gold,
   Bricolage headings) used by the homepage, dealer pages and /app. Mobile-first at 390px,
   every tappable >=44px, composer docked to the bottom once the chat starts.
   site.css supplies the tokens (--gold, --gold2, --line, --card, --muted, --wa) and the drawer. */
.nw-body{background:#0B0416;padding-bottom:0}
.nw-frame{max-width:640px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:radial-gradient(120% 60% at 50% -10%,rgba(124,58,237,.35),transparent 60%)}
.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}
[hidden]{display:none !important}

.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px;background:rgba(11,4,22,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brandmark{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;min-height:44px;color:inherit;text-decoration:none}
.brandmark .sub{font-weight:600;font-size:12px;color:var(--muted)}

.nw-main{padding:18px 16px 24px;flex:1;display:flex;flex-direction:column;gap:14px}
.nw-body.chatting .nw-main{padding-bottom:150px}

/* identity */
.nw-head{display:flex;align-items:center;gap:14px}
.nw-av{display:block;width:64px;height:64px;border-radius:50%;flex:none;
  box-shadow:0 0 0 3px rgba(243,210,122,.55),0 16px 36px -12px rgba(124,58,237,.8)}
.nw-name{font-family:"Bricolage Grotesque","Plus Jakarta Sans",sans-serif;font-size:26px;font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.1}
.nw-role{font-size:13.5px;color:var(--muted);margin-top:3px;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.nw-live{display:inline-flex;align-items:center;gap:6px;color:#8EF0B5;font-weight:600}
.nw-live i{width:8px;height:8px;border-radius:50%;background:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.2)}

.nw-invite{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:6px 6px 6px 14px;
  border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#E6DAFF;font-size:13.5px;text-decoration:none}
.nw-invite b{color:#fff}
.nw-invite-wa{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;background:#25D366;color:#062b14;font-weight:800;font-size:13px}
.nw-invite-wa svg{width:16px;height:16px}

.nw-h2{font-family:"Bricolage Grotesque","Plus Jakarta Sans",sans-serif;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em;margin:6px 0 0}
.nw-gold{background:linear-gradient(90deg,var(--gold),#FFE7A8,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nw-lede{color:var(--muted);font-size:14.5px;margin:8px 0 0;line-height:1.5}

/* quick questions */
.nw-chips{display:flex;flex-wrap:wrap;gap:8px}
.nw-chip{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(243,210,122,.45);background:rgba(243,210,122,.08);
  color:#FFE7A8;font:inherit;font-size:14px;font-weight:700;cursor:pointer;text-align:left}
.nw-chip:hover,.nw-chip:focus-visible{background:rgba(243,210,122,.18);outline:none}
.nw-body.chatting .nw-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.nw-body.chatting .nw-chips::-webkit-scrollbar{display:none}
.nw-body.chatting .nw-chip{flex:none;min-height:44px;font-size:13px}
.nw-dock .nw-chips{margin-bottom:8px}

/* name + phone gate */
.nw-gatewrap{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:18px 16px}
.nw-gate-note{margin:0 0 12px;font-weight:700;font-size:14.5px}
.nw-gate-note.ask{color:var(--gold)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field span{font-size:13px;font-weight:600;color:var(--muted)}
.field input{min-height:50px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.06);
  color:#fff;padding:0 14px;font-size:16px;width:100%;box-sizing:border-box;font-family:inherit}
.field input:focus{outline:2px solid var(--gold);outline-offset:1px}
.nw-gate .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.nw-cta{width:100%;min-height:54px;border:0;border-radius:999px;cursor:pointer;font:inherit;font-weight:800;font-size:16.5px;color:#1A0B33;
  background:linear-gradient(100deg,var(--gold),#FFF1C4 50%,var(--gold2));box-shadow:0 14px 34px -14px rgba(243,210,122,.7)}
.nw-cta[disabled]{opacity:.6;cursor:progress}
.hint{margin:10px 0 0;font-size:12px;color:var(--muted);line-height:1.45;text-align:center}

/* chat */
.nw-chat{display:flex;flex-direction:column;gap:10px}
.nw-msg{max-width:86%;padding:11px 14px;border-radius:18px;font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.nw-msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#1A0B33;font-weight:600;border-bottom-right-radius:6px}
.nw-msg.assistant{align-self:flex-start;position:relative;margin-left:36px;max-width:calc(86% - 36px);
  background:#1C0D3A;border:1px solid rgba(255,255,255,.1);color:#fff;border-bottom-left-radius:6px}
.nw-msg.assistant::before{content:"";position:absolute;left:-36px;bottom:0;width:28px;height:28px;border-radius:50%;background:url(/assets/nawra-avatar.svg) center/cover}
.nw-msg a{color:var(--gold);text-decoration:underline;word-break:break-all}
.nw-msg.pending{color:var(--muted)}
.nw-msg.pending::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:nw-dots 1.2s steps(4) infinite}
@keyframes nw-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* action cards Nawra's reply can surface (order / WhatsApp) */
.nw-act{align-self:flex-start;margin-left:36px;display:flex;flex-wrap:wrap;gap:8px}
.nw-act a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;font-weight:800;font-size:14px;text-decoration:none}
.nw-act .order{background:linear-gradient(100deg,var(--gold),var(--gold2));color:#1A0B33}
.nw-act .wa{background:#25D366;color:#062b14}

.nw-handoff{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.nw-wa-line{min-height:44px;box-sizing:border-box;display:block;text-align:center;line-height:1.4;padding-top:12px !important;padding-bottom:12px !important;color:#8EF0B5;text-decoration:none;font-size:14px;
  border:1px solid rgba(37,211,102,.4);border-radius:14px;padding:0 14px;background:rgba(37,211,102,.08)}
.nw-link{min-height:44px;background:none;border:0;color:var(--muted);font:inherit;font-size:13.5px;text-decoration:underline;cursor:pointer}

/* docked composer */
.nw-dock{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,4,22,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.nw-dock>*{max-width:608px;margin-left:auto;margin-right:auto}
.nw-msg-form{display:flex;gap:8px;align-items:flex-end}
.nw-msg-form textarea{flex:1;resize:none;min-height:48px;max-height:120px;box-sizing:border-box;padding:13px 16px;border-radius:24px;
  border:1px solid var(--line);background:rgba(255,255,255,.07);color:#fff;font:inherit;font-size:16px}
.nw-msg-form textarea:focus{outline:2px solid var(--gold);outline-offset:1px}
.nw-send{flex:none;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#1A0B33;
  background:linear-gradient(135deg,var(--gold),var(--gold2))}
.nw-send svg{width:22px;height:22px}
.nw-send[disabled]{opacity:.5}
.nw-fine{margin:6px auto 0;font-size:11px;color:var(--muted);text-align:center}

.err{color:#ff8a8a;font-size:13.5px;margin:0 0 6px}
.err:empty{display:none}
.credibility{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.credibility p{margin:0;font-size:11.5px;color:var(--muted);line-height:1.5}
.credibility p+p{margin-top:6px}

@media(min-width:700px){.nw-h2{font-size:30px}.nw-name{font-size:30px}}
@media(prefers-reduced-motion:reduce){.nw-msg.pending::after{animation:none;content:"..."}}