/* ===========================================================================
   nGauge AI Assistant — SHARED widget stylesheet (single source of truth)
   Loaded by both ngauge-ai-assistant.html (public site embed) and
   admin.html (Admin Dashboard preview). Edit only this file.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600;700&family=Rubik:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

.ngw *{box-sizing:border-box;}
html,body{margin:0;padding:0;}
.ngw{
  --green:#4aab3d; --green-dk:#4aab3d; --green-lt:#e6f3e4; --green-xlt:#f4faf3;
  --ink:#000000; --ink-soft:#000000; --cream:#f7f8f2; --gold:#d9a441;
  --white:#ffffff; --gray:#7a8474; --line:#e3e7da;
  --header-navy:#0b2941; /* admin-panel navy — used for the HEADER ONLY. Quick-chip borders and the video/blog/client-profile icons now use the white/green palette below so they match the rest of the chat body instead of clashing with the header. */
  --radius:20px; --shadow:0 24px 60px -16px rgba(22,33,15,.28);
  font-family:'Rubik',sans-serif; color:var(--ink); position:relative;
  width:100%; min-height:600px; height:100%;
  background:var(--cream);
}
.ngw .demo-hint{position:absolute; top:18px; left:18px; right:18px; font-size:12px; color:var(--gray); font-family:'Rubik'; max-width:360px;}
.ngw[data-theme="dark"]{
  --cream:#101a0b; --ink:#eef2e6; --ink-soft:#c3ccb8; --white:#17250f;
  --green-lt:#123018; --green-xlt:#122818; --line:#26361d; --gray:#8a9480;
}
.ngw[data-theme="dark"] .stat-card, .ngw[data-theme="dark"] .prod-card, .ngw[data-theme="dark"] .quick-chip, .ngw[data-theme="dark"] .msg.bot .bubble, .ngw[data-theme="dark"] .lead-form, .ngw[data-theme="dark"] .handoff-card{
  background:var(--white); border-color:var(--line);
}

/* ---------- Launcher ---------- */
.launcher{
  position:fixed; bottom:24px; right:24px; width:64px; height:64px; border-radius:50%;
  background:var(--green); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:50;
  transition:transform .25s ease;
}
.launcher.hidden{display:none;}
.launcher:hover{transform:scale(1.06);}
.launcher svg{width:28px;height:28px;}
.launcher .ping{position:absolute; inset:0; border-radius:50%; border:2px solid var(--green); animation:ping 2.4s ease-out infinite;}
@keyframes ping{0%{transform:scale(.9);opacity:.7;}100%{transform:scale(1.5);opacity:0;}}
.launcher .dot{position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%; background:var(--gold); border:2px solid var(--cream);}

/* ---------- Launcher wave (hand-only, exact launcher size) ----------
   Sits directly on top of/behind the launcher (same position, size and
   shape, but a lower z-index so the launcher covers it completely at
   rest). On each cycle it slides out sideways from behind the launcher
   (lwEmerge), waves in place, then slides back behind it (lwRetract)
   before the text bubble takes over. */
.launcher-wave{
  position:fixed; bottom:24px; right:24px; width:64px; height:64px; border-radius:50%;
  background:var(--white); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; z-index:48;
  transform:translateX(0) scale(.5); opacity:0; pointer-events:none;
}
.launcher-wave .lw-hand{
  display:inline-block; font-size:30px; line-height:1; transform-origin:70% 70%;
}
.launcher-wave.emerge{ animation:lwEmerge .35s ease-out forwards; }
.launcher-wave.retract{ animation:lwRetract .3s ease-in forwards; }
@keyframes lwEmerge{
  0%{ transform:translateX(0) scale(.5); opacity:0; }
  100%{ transform:translateX(-82px) scale(1); opacity:1; }
}
@keyframes lwRetract{
  0%{ transform:translateX(-82px) scale(1); opacity:1; }
  100%{ transform:translateX(0) scale(.5); opacity:0; }
}
/* left-right-left wrist wave, played once the hand has fully emerged */
.launcher-wave .lw-hand.waving{ animation:lbHandWave 1.1s ease-in-out; }
@keyframes lbHandWave{
  0%{transform:rotate(0deg);}
  10%{transform:rotate(16deg);}
  20%{transform:rotate(-10deg);}
  30%{transform:rotate(16deg);}
  40%{transform:rotate(-10deg);}
  50%{transform:rotate(10deg);}
  60%{transform:rotate(0deg);}
  100%{transform:rotate(0deg);}
}

/* ---------- Launcher attention bubble ---------- */
.launcher-bubble{
  position:fixed; bottom:38px; right:100px; z-index:49;
  width:max-content; max-width:calc(100vw - 40px); white-space:nowrap;
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; border:none; border-radius:14px;
  background:var(--white); color:var(--ink); box-shadow:var(--shadow);
  font-family:'Rubik',sans-serif; font-size:13px; font-weight:500; line-height:1.35;
  text-align:left; cursor:pointer;
  opacity:0; transform:translateY(6px) scale(.96); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.launcher-bubble.visible{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.launcher-bubble.hidden{display:none;}
.launcher-bubble:hover{transform:translateY(-2px) scale(1.02);}
.launcher-bubble::after{
  content:''; position:absolute; top:50%; right:-6px; width:12px; height:12px;
  background:var(--white); transform:translateY(-50%) rotate(45deg);
  box-shadow:2px -2px 4px -2px rgba(22,33,15,.12);
}
@media (max-width:480px){
  .launcher-bubble{ right:16px; bottom:96px; }
  .launcher-bubble::after{ top:auto; bottom:-6px; right:24px; transform:rotate(45deg); }
}
.launcher-bubble .lb-text{ white-space:nowrap; }

/* ---------- Panel ---------- */
.panel{
  position:fixed; bottom:24px; right:24px; z-index:50;
  width:min(412px, 92vw); height:min(720px, 88vh);
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow);
  display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line);
  transform-origin:bottom right; animation:pop .35s cubic-bezier(.2,.9,.25,1.2);
}
@keyframes pop{from{opacity:0; transform:scale(.9) translateY(16px);}to{opacity:1;transform:scale(1) translateY(0);}}
.panel.hidden{display:none;}

/* header */
.head{
  background:var(--header-navy);
  color:#fff; padding:16px 16px 12px; position:relative; flex-shrink:0;
}
.head-top{display:flex; align-items:center; gap:10px;}
.seal{
  width:38px;height:38px;border-radius:11px;flex-shrink:0;
  background:#ffffff;
  display:flex;align-items:center;justify-content:center; border:2px solid rgba(255,255,255,.5);
  box-shadow:0 0 0 3px rgba(255,255,255,.08); overflow:hidden; padding:4px;
}
.seal svg{width:18px;height:18px;}
.seal img{width:100%;height:100%;object-fit:contain;}
.head-title{flex:1; min-width:0;}
.head-title .name{font-family:'Manrope',sans-serif; font-weight:800; font-size:14.5px; letter-spacing:.2px;}
.head-title .name .sparkle{display:inline-block; font-size:12px; vertical-align:2px;}
.head-title .status{font-size:11px; color:#cfe3b8; display:flex; align-items:center; gap:5px; margin-top:1px;}
.head-title .status span.d{width:6px;height:6px;border-radius:50%;background:#8fe36a; display:inline-block; animation:blink 1.6s infinite;}
@keyframes blink{50%{opacity:.35;}}
.head-actions{display:flex; gap:6px;}
.icon-btn{width:28px;height:28px;border-radius:9px; background:rgba(255,255,255,.12); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; transition:background .2s;}
.icon-btn:hover{background:rgba(255,255,255,.22);}
.icon-btn svg{width:15px;height:15px;}
.ticker{margin-top:12px; overflow:hidden; white-space:nowrap; border-top:1px solid rgba(255,255,255,.18); padding-top:8px;}
.ticker-track{display:inline-flex; gap:34px; animation:scroll 42s linear infinite; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:#ffffff; letter-spacing:.3px;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker-track span{display:flex; align-items:center; gap:6px;}
.ticker-track b{color:var(--gold); font-weight:700;}

/* body — subtle WhatsApp-style chat wallpaper (faint repeating doodle, on-brand tint) */
.body{
  flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:3px;
  background-color:#ffffff;
}
.ngw[data-theme="dark"] .body{background-color:#ffffff;}
.body::-webkit-scrollbar{width:6px;}
.body::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;}

.msg{display:flex; gap:8px; max-width:100%; animation:rise .22s ease; margin-top:9px; flex-shrink:0;}
@keyframes rise{from{opacity:0; transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.msg.user{justify-content:flex-end;}
.msg.bot .avatar{width:26px;height:26px;border-radius:50%; flex-shrink:0; margin-top:2px;
  background:var(--green);
  display:flex;align-items:center;justify-content:center;}
.msg.bot .avatar svg{width:13px;height:13px;}

/* WhatsApp-style bubbles with a real pointed tail, timestamp + status ticks */
.bubble{position:relative; padding:7px 13px 6px; border-radius:9px; font-size:13.3px; line-height:1.5; max-width:82%; box-shadow:0 1px 1px rgba(0,0,0,.08);}
.msg.bot .bubble{background:var(--white); color:var(--ink); border:1.3px solid var(--line); border-top-left-radius:3px;}
.msg.user .bubble{background:var(--green); color:#fff; border-top-right-radius:3px;}
.msg.bot .bubble::before{
  /* outer layer — same triangle, in the bubble's border color, ~1.3px
     larger all round. Sits underneath the white triangle below, so only a
     thin rim of it peeks out — that rim is what reads as the tail's border. */
  content:''; position:absolute; top:-1.3px; left:-8.3px; width:13.3px; height:15.3px;
  background:var(--line); clip-path:polygon(100% 0, 0 0, 100% 70%);
}
.msg.bot .bubble::after{
  /* inner layer — the actual WhatsApp-style tail: flush against the
     bubble's top-left corner (overlapping it by a few px so it merges
     seamlessly, exactly like the bubble's own corner), painted on top of
     the border layer above so only its rim shows through. */
  content:''; position:absolute; top:0; left:-7px; width:12px; height:14px;
  background:var(--white); clip-path:polygon(100% 0, 0 0,100% 70%);
}
.msg.user .bubble::before{
  content:''; position:absolute; top:0; right:-7px; width:12px; height:14px;
  background:var(--green); clip-path:polygon(0 0, 100% 0, 0 70%);
}
.bubble p{margin:0 0 6px;} .bubble p:last-child{margin-bottom:0;}
.bubble ul{margin:4px 0; padding-left:18px;} .bubble li{margin-bottom:3px;}
.bubble b{color:var(--green-dk);} .ngw[data-theme="dark"] .bubble b{color:#b6dd82;}
.bubble a{color:var(--green-dk); font-weight:700; text-decoration:underline; text-underline-offset:2px;}
.ngw[data-theme="dark"] .bubble a{color:#b6dd82;}

/* meta row: timestamp + delivery ticks, WhatsApp-style but never blue (no read-receipt colour) */
.bubble .meta{display:flex; align-items:center; justify-content:flex-end; gap:3px; margin-top:3px; height:12px; user-select:none;}
.msg.bot .bubble .meta{color:var(--gray); font-size:10.5px;}
.msg.user .bubble .meta{color:rgba(255,255,255,.82); font-size:10.5px;}
.bubble .meta .ticks{display:inline-flex; align-items:center; line-height:0;}
.bubble .meta .ticks svg{width:15px;height:11px;}
.bubble .meta .ticks path{stroke:rgba(255,255,255,.82); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.video-link{display:flex; align-items:center; gap:8px; background:var(--green-xlt); border:1px solid var(--green-lt); border-radius:12px; padding:9px 11px; margin-top:6px; text-decoration:none !important; transition:.18s;}
.video-link:hover{border-color:var(--green); transform:translateY(-1px);}
.video-link .vi{width:26px;height:26px;border-radius:8px; background:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.video-link .vi svg{width:13px;height:13px; fill:#fff;}
.video-link .vt{font-size:12.5px; font-weight:700; color:var(--ink) !important; line-height:1.3;}
.video-link .vs{font-size:10.5px; color:var(--gray); font-weight:500;}
.ngw[data-theme="dark"] .video-link{background:var(--white);}

/* FEATURE: smart hyperlinks — reuses existing --green/--line theme vars only */
.nav-links{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.nav-link{
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700;
  color:var(--green-dk) !important; background:var(--green-xlt); border:1px solid var(--green-lt);
  border-radius:20px; padding:6px 11px; text-decoration:none !important; transition:.18s; cursor:pointer;
}
.nav-link:hover{background:var(--green); color:#fff !important; border-color:var(--green); transform:translateY(-1px);}
.ngw[data-theme="dark"] .nav-link{background:var(--white);}

.typing{display:flex; gap:8px; align-items:center;}
.typing .avatar{width:26px;height:26px;border-radius:50%;background:var(--green); flex-shrink:0;}
.typing .dots{background:var(--white); border:1px solid var(--line); padding:11px 14px; border-radius:16px; border-top-left-radius:4px; display:flex; gap:4px;}
.typing .dots i{width:6px;height:6px;border-radius:50%; background:var(--gray); display:inline-block; animation:bounce 1.2s infinite;}
.typing .dots i:nth-child(2){animation-delay:.15s;} .typing .dots i:nth-child(3){animation-delay:.3s;}
@keyframes bounce{0%,60%,100%{transform:translateY(0); opacity:.5;}30%{transform:translateY(-4px); opacity:1;}}

/* welcome message — greeting, quick questions and resource links are all
   injected as ONE bubble (see openWelcome() in the JS), so this bubble gets
   a bit more breathing room than a normal chat reply. */
.msg.welcome-msg .bubble{max-width:94%;}

/* quick-question links inside the welcome bubble — stacked rows with a
   trailing chevron, styled to sit comfortably inside a white bubble rather
   than as free-floating chips. */
.welcome-questions{display:flex; flex-direction:column; gap:7px; margin-top:11px;}
.welcome-link{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  text-align:left; background:var(--white); border:1.3px solid var(--line); color:var(--ink); font-weight:500;
  font-size:12px; line-height:1.35; padding:9px 11px; border-radius:10px; cursor:pointer; transition:.18s; font-family:'Rubik';
}
.welcome-link .wl-chev{width:14px; height:14px; flex-shrink:0; color:var(--gray); transition:.18s;}
.welcome-link:hover{background:var(--header-navy); border-color:var(--header-navy); color:#fff;}
.welcome-link:hover .wl-chev{color:#fff; transform:translateX(2px);}
.welcome-link:disabled{opacity:.45; cursor:default; transform:none;}

/* trailing arrow after "Start with quick questions" — kept as the same
   character, just sized up so it reads as a clear visual cue instead of
   blending into the body text. */
.start-arrow{font-size:17px; font-weight:700; line-height:1; display:inline-block; vertical-align:-2px; margin-left:1px;}

.welcome-divider{height:1px; background:var(--line); margin:13px 0 10px;}

/* "YOU MAY ALSO LIKE" row — same button component as the opening screen's
   quick-question links (.welcome-link), just laid out as an auto-width,
   wrapping row (clean spacing, no items touching) instead of a full-width
   stacked list, since this sits below a chat bubble rather than inside one. */
.related-links-row{display:flex; flex-flow:row wrap; gap:8px; margin-left:34px; margin-right:6px; margin-top:8px; flex-shrink:0;}
.welcome-link.related-link{width:auto; flex:0 0 auto;}

/* resource links — solid green pill buttons with a trailing arrow, sized to
   their own content and wrapping onto new rows as needed, sitting inside
   the same welcome bubble as the quick questions above. */
.welcome-resources{display:flex; flex-flow:row wrap; align-items:flex-start; gap:7px;}
.welcome-pill{
  flex:0 0 auto; min-width:0; display:inline-flex; align-items:center; justify-content:space-between; gap:6px;
  background:var(--green); color:#fff !important; font-weight:400 !important; font-size:11.5px; font-family:'Rubik',sans-serif;
  border-radius:999px; padding:8px 11px 8px 13px; text-decoration:none !important; transition:.18s; cursor:pointer;
  box-sizing:border-box; border:none;
  /* the "Contact Us" pill is a <button>, while Video Gallery/Blog are <a>
     tags — reset native button chrome so all three render at identical
     height/sizing instead of the browser's default button box model. */
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  line-height:1.35; margin:0; vertical-align:middle;
}
.welcome-pill .rp-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.welcome-pill .arrow{width:14px; height:14px; flex-shrink:0; color:#fff;}
.welcome-pill:hover{background:var(--green-dk); transform:translateY(-1px);}

/* stat cards row */
.stat-row{display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 4px 34px; flex-shrink:0;}
.stat-card{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:8px 11px; min-width:78px; text-align:center; box-shadow:0 1px 2px rgba(22,33,15,.05);}
.stat-card b{display:block; font-family:'JetBrains Mono',monospace; font-size:14px; color:var(--ink);}
.stat-card span{font-size:9.5px; color:var(--gray); text-transform:uppercase; letter-spacing:.4px;}

/* quick chips — a full-width stacked list of rounded-rect buttons (not a
   wrapped pill row): white/outline by default, filling the header's navy
   on hover so the interactive state echoes the header instead of green. */
.chip-row{display:flex; flex-direction:column; gap:8px; margin-left:34px; margin-right:6px; margin-top:8px; flex-shrink:0;}
.quick-chip{
  width:100%; text-align:left; background:var(--white); border:1.3px solid var(--line); color:var(--ink); font-weight:600;
  font-size:12.5px; padding:11px 14px; border-radius:12px; cursor:pointer; transition:.18s; font-family:'Rubik';
  box-shadow:0 1px 2px rgba(22,33,15,.05);
}
.quick-chip:hover{background:var(--header-navy); border-color:var(--header-navy); color:#fff; transform:translateY(-1px); box-shadow:0 6px 14px -6px rgba(11,41,65,.5);}
.quick-chip:disabled{opacity:.4; cursor:default; transform:none; box-shadow:none;}
/* question-style chips (e.g. "People also ask") — same white/bordered chip,
   just Medium weight instead of Semibold and a trailing chevron, to match
   the welcome-link starting questions above. */
.quick-chip.qc-question{display:flex; align-items:center; justify-content:space-between; gap:8px; font-weight:500;}
.quick-chip .qc-chev{width:14px; height:14px; flex-shrink:0; color:var(--gray); transition:.18s;}
.quick-chip:hover .qc-chev{color:#fff; transform:translateX(2px);}
.chip-row.pinned{flex-direction:row; flex-wrap:wrap; margin-left:0; margin-right:0; margin-top:0; padding:9px 14px; border-top:1px solid var(--line); background:var(--white); flex-shrink:0;}
.chip-row.pinned .quick-chip{width:auto; font-size:11.3px; padding:6px 10px; border-radius:20px;}

/* product cards */
.card-grid{display:flex; flex-direction:column; gap:9px; margin-left:34px; flex-shrink:0;}
.prod-card{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:12px 13px; transition:.2s; box-shadow:0 1px 2px rgba(22,33,15,.05);}
.prod-card:hover{border-color:var(--green); box-shadow:0 8px 20px -8px rgba(74,171,61,.35);}
.prod-card .pt{display:flex; align-items:center; gap:8px; font-family:'Manrope'; font-weight:800; font-size:13.5px; margin-bottom:4px;}
.prod-card .pt .ic{width:26px;height:26px;border-radius:8px;background:var(--green-lt); display:flex;align-items:center;justify-content:center; flex-shrink:0;}
.prod-card .pt .ic svg{width:14px;height:14px;}
.prod-card p{font-size:12px; color:var(--ink-soft); margin:0 0 8px;}
.prod-card .tags{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:9px;}
.prod-card .tags span{font-size:10px; background:var(--green-xlt); color:var(--green-dk); padding:3px 7px; border-radius:8px;}
.prod-card .actions{display:flex; gap:7px;}
.prod-card .actions button{flex:1; font-size:11.5px; font-weight:700; padding:7px; border-radius:9px; border:none; cursor:pointer; font-family:'Rubik';}
.prod-card .actions .primary{background:var(--green); color:#fff;}
.prod-card .actions .ghost{background:var(--green-xlt); color:var(--green-dk);}

/* lead form */
.lead-form{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:13px; margin-left:34px; display:flex; flex-direction:column; gap:8px; flex-shrink:0;}
.lead-form .lf-title{font-family:'Manrope'; font-weight:800; font-size:12.5px; margin-bottom:2px; display:flex; align-items:center; gap:6px;}
.lead-form input,.lead-form select,.lead-form textarea{border:1.3px solid var(--line); border-radius:9px; padding:8px 10px; font-size:12.5px; font-family:'Rubik'; background:var(--cream); color:var(--ink);}
.lead-form textarea{resize:vertical;}
.lead-form select{appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right 8px center; background-size:14px; padding-right:26px;}
.lead-form select:invalid{color:var(--gray);}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:none; border-color:var(--green);}
.lead-form button{background:var(--green); color:#fff; border:none; padding:9px; border-radius:9px; font-weight:700; font-size:12.5px; cursor:pointer; margin-top:2px;}
.lead-form .row2{display:flex; gap:7px;} .lead-form .row2 input{flex:1; min-width:0;}
.lf-callout{
  text-align:center; font-size:11px; line-height:1.5; color:var(--gray);
  margin-top:2px; padding-top:9px; border-top:1px solid var(--line);
}
.lf-callout a{color:var(--green-dk) !important; font-weight:700; text-decoration:none !important;}
.lf-callout a:hover{text-decoration:underline !important;}

/* success / handoff cards */
.handoff-card{background:var(--green-xlt); border:1px solid var(--green); border-radius:14px; padding:13px; margin-left:34px; flex-shrink:0;}
.handoff-card .htitle{font-family:'Manrope'; font-weight:800; font-size:13px; display:flex; gap:7px; align-items:center; margin-bottom:5px;}
.handoff-card p{font-size:12px; margin:3px 0; color:var(--ink-soft);}

/* progress */
.progress{margin-left:34px; height:5px; background:var(--line); border-radius:3px; overflow:hidden; width:70%; flex-shrink:0;}
.progress i{display:block; height:100%; background:var(--green); border-radius:3px; transition:width .4s ease;}

/* input bar */
.inputbar{display:flex; align-items:center; gap:8px; padding:11px 12px; border-top:1px solid var(--line); background:var(--white); flex-shrink:0;}
.inputbar input{flex:1; border:1.3px solid var(--line); background:var(--cream); border-radius:22px; padding:10px 15px; font-size:13px; font-family:'Rubik'; color:var(--ink);}
.inputbar input:focus{outline:none; border-color:var(--green);}
.inputbar button{width:38px;height:38px;border-radius:50%; background:var(--green); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:.2s;}
.inputbar button:hover{background:var(--green-dk);}
.inputbar button svg{width:16px;height:16px;}
.footnote{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:10.5px; color:var(--gray); font-family:'Rubik';
  padding:9px 14px; background:var(--white); border-top:1px solid var(--line); flex-shrink:0;
}
.footnote-brand b{color:var(--ink); font-weight:700;}
.footnote-phone{
  display:inline-flex; align-items:center; gap:5px; flex-shrink:0;
  color:var(--ink) !important; font-weight:700; font-size:11px; text-decoration:none !important; white-space:nowrap;
}
.footnote-phone svg{width:12px; height:12px; flex-shrink:0;}
.footnote-phone:hover{color:var(--green) !important;}