/* =========================================================
   GUIDE ASSIST — STYLES (mobile-first)
   Sections: RESET · BASE · LANDING · MENU · CHAT · MODALS ·
             DOCUMENT · (MEDIA QUERIES in-place) · SAFE OVERRIDES
   ========================================================= */

/* -----------------------------------------------------------------
   RESET
   ----------------------------------------------------------------- */
*,
*::before,
*::after{
  box-sizing: border-box;
}

/* -----------------------------------------------------------------
   BASE — document defaults + design tokens
   ----------------------------------------------------------------- */
html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  font-family: "Manrope", sans-serif;
  background: #e9f3f0;
  color: #073b72;
}

/* ---------- Layout Tuning Knobs ---------- */
:root{
  --card-gap: clamp(6px, 1.8vw, 10px);
  --card-pad-x: clamp(12px, 3.6vw, 18px);
  --card-pad-top: clamp(10px, 3vw, 16px);
  --card-pad-bottom: clamp(10px, 3vw, 16px);

  --bot-size: clamp(200px, 50vw, 320px);

  --intro-width: min(92%, 360px);
  --intro-font: clamp(15px, 3.6vw, 20px);

  --assistant-size: clamp(72px, 20vw, 84px);
  --assistant-icon: clamp(68%, 72%, 76%);

  /* =========================
     MENU CONTROL KNOBS
     ========================= */
  --menu-top: clamp(50px, 13vw, 58px);
  --menu-right: clamp(8px, 2.5vw, 12px);
  --menu-width: clamp(176px, 56vw, 196px);
  --menu-pad: clamp(8px, 2.2vw, 10px) clamp(8px, 2.2vw, 10px) clamp(10px, 2.8vw, 12px);
  --menu-radius: clamp(12px, 3vw, 14px);
  --menu-shadow: 0 14px 32px rgba(0,0,0,.22);
  --menu-z: 99999;

  --menu-link-pad: clamp(9px, 2.6vw, 10px) clamp(9px, 2.6vw, 10px);
  --menu-link-font: clamp(13px, 3.5vw, 14px);

  --lang-panel-width: min(260px, 86vw);
  --lang-panel-maxh: 70vh;
  --lang-row-pad: clamp(10px, 3vw, 12px) clamp(10px, 3vw, 12px);
  --lang-row-font: clamp(13px, 3.5vw, 14px);
  --lang-flag: clamp(20px, 6vw, 22px);

  /* =========================
     ENQUIRIES CONTROL KNOBS
     ========================= */
  --enq-border-w: clamp(2px, 0.7vw, 3px);
  --enq-border-color: #2d5196;
  --enq-shadow: 0 18px 40px rgba(0,0,0,0.22);

  --enq-header-pad: clamp(7px, 2vw, 8px) clamp(9px, 2.6vw, 10px) clamp(8px, 2.4vw, 10px);
  --enq-title-font: clamp(15px, 4vw, 16px);
  --enq-hint-font: clamp(11px, 3.1vw, 11.5px);

  --enq-bubble-font: clamp(13px, 3.8vw, 14px);
  --enq-bubble-pad: clamp(10px, 3vw, 12px) clamp(10px, 3vw, 12px);

  --enq-input-h: clamp(42px, 12vw, 44px);
  --enq-input-font: clamp(13px, 3.8vw, 14px);
  --enq-send-minw: clamp(70px, 20vw, 74px);

  --enq-tts-btn-h: clamp(36px, 9vw, 42px);
  --enq-tts-btn-font: clamp(13px, 3.5vw, 15px);
  --enq-tts-btn-pad-x: clamp(12px, 4vw, 18px);

  --enq-speed-w: clamp(44px, 12vw, 46px);
  --enq-speed-h: clamp(30px, 8.5vw, 32px);
  --enq-speed-font: clamp(11px, 3.2vw, 12px);
}

/* Shared responsive tokens */
:root{
  /* Landing page */
  --ga-logo-w: clamp(112px, 12vw, 170px);
  --ga-bot-w: clamp(185px, 24vw, 320px);
  --ga-intro-w: min(92%, 860px);
  --ga-intro-font: clamp(14px, 1.9vw, 28px);
  --ga-cta-font: clamp(16px, 2vw, 30px);
  --ga-cta-minh: clamp(44px, 4vw, 56px);
  --ga-assist-size: clamp(68px, 6vw, 102px);
  --ga-footer-font: clamp(10px, 1vw, 16px);

  /* Document page */
  --ga-banner-h: clamp(78px, 6vw, 110px);
  --ga-doc-font: clamp(16px, 1.15vw, 18px);
  --ga-doc-h1: clamp(28px, 2vw, 34px);
  --ga-doc-h2: clamp(22px, 1.5vw, 26px);

  /* Enquiries controls */
  --ga-tts-label-font: clamp(13px, 1.2vw, 18px);
  --ga-tts-info-size: clamp(28px, 2.4vw, 50px);
  --ga-tts-btn-h-desktop: clamp(36px, 3vw, 50px);
  --ga-speed-h-desktop: clamp(34px, 3vw, 50px);
}

/* -----------------------------------------------------------------
   LANDING — main card grid (shell)
   ----------------------------------------------------------------- */
.card{
  width: 100%;
  min-height: 100svh;     /* prevents mobile clipping */
  position: relative;

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows:
    auto   /* top row */
    auto   /* bot */
    auto   /* intro */
    auto   /* CTA */
    auto   /* assistant */
    auto;  /* footer */

  gap: var(--card-gap);
  padding: var(--card-pad-top) var(--card-pad-x) var(--card-pad-bottom);

  align-items: start;
  justify-items: center;
}

/* ---------- Background Wallpaper ---------- */
.card .bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

.card > *{
  position: relative;
  z-index: 1;
}


/* LANDING — fit viewport + lock scroll (hero) */
html,
body{
  height: 100%;
  overflow: hidden !important;
}

.card{
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  border-radius: 24px !important;

  /* tighter vertical layout so footer fits */
  gap: clamp(4px, 1.2vw, 8px) !important;
  padding-top: clamp(8px, 2vw, 12px) !important;
  padding-bottom: clamp(8px, 2vw, 12px) !important;
}

.card .bg{
  border-radius: inherit !important;
}

/* footer more compact so disclaimer fits */
.site-footer{
  width: min(340px, 96%) !important;
  padding: clamp(8px, 2.2vw, 10px) clamp(10px, 3vw, 12px) !important;
  gap: 4px !important;
  font-size: clamp(9px, 2.6vw, 10px) !important;
  line-height: 1.18 !important;
}


/* LANDING — logo/menu scale + hero spacing (tuned) */
.brand-top-left{
  margin-top: 6px !important;
  margin-left: 10px !important;
}

.brand-top-left img{
  width: clamp(90px, 36vw, 110px) !important;

  height: auto;
  display: block;

  filter: brightness(0.85) contrast(1.1);
}

.menu-toggle{
  margin-top: 6px !important;
  margin-right: 10px !important;
  font-size: clamp(40px, 12vw, 48px) !important;
}

.menu-toggle::before{
  font-size: clamp(15px, 3.4vw, 14px) !important;
  margin-bottom: 0 !important;
}

/* Move large robot upward a little */
.bot-large{
  width: clamp(185px, 40vw, 245px) !important;
  margin-top: clamp(-28px, -6vw, -18px) !important;
}

/* Intro gets a little breathing room */
#introBlock{
  width: min(90%, 330px) !important;
  font-size: clamp(14px, 3.1vw, 18px) !important;
  line-height: 1.24 !important;
  margin-top: clamp(-8px, -2vw, -2px) !important;
  margin-bottom: 6px !important;
}

/* Space between intro and CTA buttons */
#ctaGroup{
  max-width: clamp(280px, 90vw, 340px) !important;
  gap: clamp(14px, 4vw, 18px) !important;
  margin-top: 4px !important;
}

#ctaGroup .btn{
  padding: clamp(9px, 2.6vw, 11px) clamp(12px, 4vw, 14px) !important;
  font-size: clamp(18px, 4.6vw, 20px) !important;
}

/* More room before assistant buttons */
.assistant{
  gap: clamp(14px, 4vw, 18px) !important;
  margin-top: 8px !important;
}

.bot-fab,
.mic{
  width: clamp(68px, 18vw, 80px) !important;
  height: clamp(68px, 18vw, 80px) !important;
}


/* LANDING — top row grid placement */
.brand-top-left{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin-top: clamp(10px, 3.5vw, 14px);
  margin-left: clamp(10px, 4vw, 16px);
}

.brand-top-left img{
  width: clamp(112px, 44vw, 140px);
  height: auto;
  display: block;
}

.brand-top-left .brand-tagline {
  display: block;
  margin-top: 6px !important;
  padding: 0;
  max-width: 180px !important;
  font-family: "Manrope", sans-serif;
  font-size: clamp(9px, 1.8vw, 12px) !important;
  font-weight: 600;
  line-height: 1.2 !important;
  letter-spacing: 0.01em;
  color: #073b72;
  text-align: center !important;
}

@media (max-width: 360px) {
  .brand-top-left .brand-tagline {
    display: none;
  }
}

@media (max-width: 932px) and (orientation: landscape) {
  .brand-top-left .brand-tagline {
    display: none;
  }
}

.menu-toggle{
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: clamp(48px, 15vw, 58px);
  line-height: 1;
  cursor: pointer;
  color: #073b72;
  margin-top: clamp(10px, 3.5vw, 14px);
  margin-right: clamp(10px, 4vw, 16px);
}

.menu-toggle::before{
  content: var(--ga-menu-label, "Menu");
  display: block;
  font-size: clamp(14px, 4vw, 16px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 2px;
  color: #2f3e46;
}

/* LANDING — large bot */
.bot-large{
  grid-column: 1 / -1;
  grid-row: 2;
  width: var(--bot-size);
  height: auto;
  margin-top: clamp(-24px, -5vw, -20px);
}

/* LANDING — intro */
#introBlock{
  grid-column: 1 / -1;
  grid-row: 3;
  width: var(--intro-width);
  max-width: 400px;
  font-size: var(--intro-font);
  line-height: clamp(1.3, 1.35, 1.4);
  text-align: center;
  overflow-wrap: anywhere;
  margin-top: clamp(-34px, -7vw, -24px);
}

/* LANDING — CTA buttons */
#ctaGroup{
  grid-column: 1 / -1;
  grid-row: 4;
  width: 100%;
  max-width: clamp(300px, 92vw, 360px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 5vw, 18px);
}

#ctaGroup .btn{
  width: 100%;
  padding: clamp(10px, 3vw, 12px) clamp(12px, 4vw, 14px);
  border-radius: clamp(14px, 4.5vw, 16px);
  text-decoration: none;
  text-align: center;
  font-size: clamp(16px, 5vw, 18px);
  font-weight: 800;
  color: #fff;
  box-shadow: 0 6px 0 rgba(0,0,0,0.22);
  transition: transform .1s ease, box-shadow .1s ease;
}

#ctaGroup .btn:active{
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(0,0,0,0.22);
}

#ctaGroup .btn.participant{
  background: linear-gradient(to bottom, #2a63b3, #1d4d99);
  box-shadow: 0 6px 0 #123366;
}

#ctaGroup .btn.provider{
  background: linear-gradient(to bottom, #55c89a, #3cab80);
  box-shadow: 0 6px 0 #2f8767;
}

/* LANDING — assistant (bot + mic) */
.assistant{
  grid-column: 1 / -1;
  grid-row: 5;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 4.5vw, 16px);
  margin-top: clamp(4px, 1.8vw, 6px);

  /* Label column uses this — MUST match whichever .bot-fab/.mic width wins (see earlier !important block ~L250) */
  --ga-fab-col-w: clamp(68px, 18vw, 80px);
}

/* Landing FAB — static labels: column width mirrors circle; .card wins cascade ties on index landing */
.card .assistant .ga-landing-fab-col{
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(8px, 2vw, 11px);
  width: var(--ga-fab-col-w);
  max-width: min(100%, var(--ga-fab-col-w));
  min-width: 0;
}

.card .assistant .ga-landing-fab-col > .bot-fab,
.card .assistant .ga-landing-fab-col > .mic{
  align-self: center;
  flex-shrink: 0;
}

.card .assistant .mic-wrap.ga-landing-fab-col{
  position: relative;
}

.card .assistant .ga-landing-fab-label{
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.12;
  color: #073b72;
  text-align: center;
  letter-spacing: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 520px){
  .card .assistant .ga-landing-fab-col{
    gap: clamp(6px, 2.5vw, 9px);
  }

  .card .assistant .ga-landing-fab-label{
    font-size: 12px;
    line-height: 1.14;
  }
}

.bot-fab,
.mic{
  width: var(--assistant-size);
  height: var(--assistant-size);
  border-radius: 50%;
  border: none;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bot-fab img,
.mic img{
  width: var(--assistant-icon);
  height: var(--assistant-icon);
  object-fit: contain;
}

#micBtn{
  background: #0E5F6E;
}

#micBtn img{
  filter: none;
}

/* LANDING — site footer */
.site-footer{
  grid-column: 1 / -1;
  grid-row: 6;
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;
  border-radius: clamp(12px, 4vw, 14px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  padding: clamp(10px, 3vw, 12px) clamp(12px, 4vw, 14px);
  gap: clamp(4px, 2vw, 6px);
  text-align: center;
  font-size: clamp(10px, 3vw, 10.5px);
  line-height: 1.25;
}

  /* TOOLTIP — SCALE + MOVE RIGHT (SAFE) */
  .bot-wrap .bot-help-tooltip{
    transform: scale(1) translate(-130px, 60px);  /*moves right - moves up*/
    transform-origin: top left !important;
  }
 

/* -----------------------------------------------------------------
   CHAT — Enquiries panel (#chatBox / #chatPanel), 320px base
   ----------------------------------------------------------------- */

/* Panel shell */
#chatBox{ position: fixed; inset: 0; pointer-events: none; z-index: 999999; }
#chatPanel.chat{ pointer-events: auto; }

/* Header: title + tip + close */
#chatPanel .chat-header{
  position: relative;
  background: #f3f5f7;
  padding: var(--enq-header-pad);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

#chatPanel .chat-title{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  font-size: var(--enq-title-font);
  color:#0b3f7a;
}

#chatPanel .chat-title img{
  width: clamp(20px, 6vw, 22px);
  height: clamp(20px, 6vw, 22px);
}

#chatPanel .lang-hint{
  margin-top: 6px;
  background: #eef2f6;
  border-radius: clamp(8px, 3vw, 10px);
  padding: clamp(7px, 2.4vw, 8px) clamp(9px, 3vw, 10px);
  font-size: var(--enq-hint-font);
  line-height: 1.25;
  color:#1f2a37;
}

#chatPanel .chat-close{
  position:absolute;
  top: clamp(6px, 2vw, 8px);
  right: clamp(6px, 2vw, 8px);
  width: clamp(24px, 9vw, 34px);
  height: clamp(24px, 9vw, 34px);
  border-radius: clamp(8px, 3vw, 10px);
  font-size: clamp(16px, 4.5vw, 18px);
}

/* Chat body + bubbles */
#chatPanel .chat-body{
  padding: 10px 12px 6px;
  background:#fff;
}

#chatPanel .msg{ display:flex; margin: 0 0 10px 0; }
#chatPanel .msg.bot{ justify-content:flex-start; }
#chatPanel .msg.user{ justify-content:flex-end; }

#chatPanel .bubble{
  max-width: 100%;
  border-radius: clamp(14px, 5vw, 16px);
  padding: var(--enq-bubble-pad);
  font-size: var(--enq-bubble-font);
  line-height: 1.25;
}

/* Bot bubble (blue framed card look) */
#chatPanel .msg.bot .bubble{
  background: #e7f0ff;
  border: 2px solid #2d5196;
  color:#0b2f5a;
}

/* User bubble (simple) */
#chatPanel .msg.user .bubble{
  background: #e8f7ef;
  border: 2px solid #1f7a4d;
  color:#0b3b27;
}

/* CTA inside bubble (Find Providers / List my services) */
#chatPanel .msg.bot .bubble a.ns-intake-cta{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  margin: 0 0 10px 0 !important;
}

/* Input row: exact inline layout (text + send) */
#chatPanel .chat-input{
  padding: clamp(8px, 2.8vw, 10px) clamp(10px, 3.5vw, 12px);
  gap: clamp(8px, 3vw, 10px);
}

#chatPanel #chatText{
  height: var(--enq-input-h);
  padding: 0 clamp(10px, 3vw, 12px);
  font-size: var(--enq-input-font);
  border: 2px solid #2d5196;
  border-radius: clamp(12px, 4vw, 14px);
  outline: none;
}

#chatPanel .send{
  height: var(--enq-input-h);
  min-width: var(--enq-send-minw);
  padding: 0 clamp(12px, 4vw, 16px);
  font-size: var(--enq-input-font);
  font-weight: 900;
  border-radius: clamp(12px, 4vw, 14px);
  background: #2d5196;
  color:#fff;
  border: none;
  box-shadow: 0 6px 0 rgba(0,0,0,0.22);
}

#chatPanel .suggestions-toggle{
  max-width: clamp(160px, 50vw, 220px) !important;
  padding: 6px clamp(10px,3vw,14px) !important;
}

/* TTS bar + speed badge */
#chatPanel .tts-bar{
  padding: 8px 12px 10px;
  gap: 10px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

#chatPanel #ttsBar .tts-btn{
  height: var(--enq-tts-btn-h) !important;
  padding: 0 var(--enq-tts-btn-pad-x) !important;
  font-size: var(--enq-tts-btn-font) !important;
  border-radius: clamp(12px, 4vw, 14px) !important;
}

/* Speed button (injected by app.js) */
#chatPanel #nsSpeedBtn{
  margin-left: auto;
  height: 36px;
  padding: 0;
  background: transparent;
  border: none;
}

#chatPanel #nsSpeedBadge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--enq-speed-w) !important;
  height: var(--enq-speed-h) !important;
  border-radius: 999px !important;
  border: 2px solid #2d5196 !important;
  background: #ffffff !important;
  font-weight: 900 !important;
  font-size: var(--enq-speed-font) !important;
  color: #2d5196 !important;
}

/* Notes + disclaimer */
#chatPanel .tts-notes{
  padding: 0 clamp(10px, 3.5vw, 12px) clamp(6px, 2.6vw, 8px);
  text-align: center;
  font-size: clamp(10px, 3.2vw, 11px);
  line-height: 1.25;
}

#chatPanel .chat-disclaimer{
  padding: 0 clamp(10px, 3.5vw, 12px) clamp(5px, 2vw, 6px);
  text-align: center;
  font-size: clamp(10px, 3vw, 10.5px);
  line-height: 1.25;
}

#chatPanel .ga-chat-translation-footer-notice{
  padding: clamp(6px, 2vw, 8px) clamp(10px, 3.5vw, 12px);
  margin: 0;
  text-align: center;
  font-size: clamp(10px, 3vw, 10.5px);
  line-height: 1.35;
  color: rgba(11, 47, 90, 0.88);
  border-top: 1px solid rgba(0,0,0,0.06);
  box-sizing: border-box;
}

#chatPanel #chatBody .msg.bot .bubble .ns-bot-translated-notice{
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px 0;
  padding: clamp(8px, 2.2vw, 10px) clamp(10px, 3vw, 12px);
  border-radius: 10px;
  border: 1px solid rgba(45, 81, 150, 0.2);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
  font-size: clamp(9.5px, 2.9vw, 10.5px);
  line-height: 1.35;
  font-weight: 500;
  color: rgba(11, 47, 90, 0.9);
}

#chatPanel .msg.bot .bubble .ns-cta-group ~ .ns-bot-translated-notice{
  margin-top: 2px;
}

#chatPanel #chatBody .msg.bot .bubble .ns-bot-translated-notice strong{
  font-weight: 700;
}

#chatPanel #chatBody .msg.bot .bubble .ns-bot-translated-notice__main{
  font-weight: 500;
}

#chatPanel #chatBody .msg.bot .bubble .ns-bot-translated-notice__en-full{
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(45, 81, 150, 0.14);
  font-size: clamp(8px, 2.4vw, 9.25px);
  line-height: 1.32;
  color: rgba(11, 47, 90, 0.7);
  font-weight: 500;
  letter-spacing: 0.01em;
}

#chatPanel #chatBody .msg.bot .bubble .ns-bot-translated-notice__en-body{
  font-weight: 500;
}

/* Reset Chat area (already inline-styled in HTML; just ensure it fits) */
#chatPanel #resetChat{
  font-size: 14px !important;
}


/* =====================================================
   ENQUIRIES — ONE WHOLE SECTION
   Makes the whole Enquiries panel read as ONE card,
   not 3 separate sections.
   Paste at VERY END of styles.css
   ===================================================== */

/* 1) The OUTER panel becomes the single card */
#chatPanel.chat{
  background: #ffffff !important;
  border: 3px solid var(--ns-accent, #2d5196) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.18) !important;
  overflow: hidden !important;
}

/* 2) Header stays part of same card */
#chatPanel .chat-header{
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 0 !important;
}

/* 3) Main body becomes transparent to outer card */
#chatPanel .chat-body,
#chatBody{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 4) Bubble area should not create another card look */
#chatPanel .msg,
#chatPanel .bubble{
  box-shadow: none !important;
}

/* 5) Input row becomes part of same card */
#chatPanel #chatForm,
#chatPanel .chat-input{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* 6) TTS bar becomes part of same card, not its own card */
#chatPanel #ttsBar,
#chatPanel #ttsBar.tts-bar,
#chatPanel .tts-bar{
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* 7) Guided Questions button stays inside the same section */
#chatPanel .suggestions-toggle{
  margin: 8px 12px 10px !important;
}

/* 8) Notes + disclaimer also merge into same outer card */
#chatPanel .tts-notes,
#chatPanel .chat-disclaimer{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* 9) Remove any extra framed/card look inside the bot message area */
#chatPanel .msg.bot .bubble{
  box-shadow: none !important;
}

/* 10) Slightly cleaner continuous spacing */
#chatPanel .chat-body{
  padding-bottom: 8px !important;
}

#chatPanel .chat-input{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

#chatPanel #ttsBar{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}


/* ----------- REMOVE READING SPEED SLIDER COMPLETELY ----------- */

/* Hide any old slider container if still present */
#chatPanel .tts-speed-wrap,
#chatPanel .tts-slider,
#chatPanel input[type="range"],
#chatPanel #nsSpeedSlider{
  display: none !important;
}


/* =========================================================
   ENQUIRIES (320px) — RESTORE TTS BUTTON COLOURS + CLICK FEEL
   Fix: your HTML uses .tts-replay / .tts-stop / .tts-resume
        (not .play / .stop / .resume), so colours were not applying.
   ========================================================= */

#chatPanel #ttsBar{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: nowrap;
}

/* Base button feel */
#chatPanel #ttsBar .tts-btn{
  height: 40px;
  padding: 0 16px;
  border-radius: 14px;
  border: none;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  line-height: 40px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ✅ Map YOUR real classes to the original colours */
#chatPanel #ttsBar .tts-btn.tts-replay{
  background: #22c55e; /* Play = green */
  box-shadow: 0 6px 0 rgba(0,0,0,0.25);
}

#chatPanel #ttsBar .tts-btn.tts-stop{
  background: #ef4444; /* Stop = red */
  box-shadow: 0 6px 0 rgba(0,0,0,0.25);
}

#chatPanel #ttsBar .tts-btn.tts-resume{
  background: #f97316; /* Resume = orange */
  box-shadow: 0 6px 0 rgba(0,0,0,0.25);
}

/* Press feedback */
#chatPanel #ttsBar .tts-btn:active{
  transform: translateY(2px);
  box-shadow: 0 4px 0 rgba(0,0,0,0.22);
}

/* Keep them readable if a browser ever disables them */
#chatPanel #ttsBar .tts-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* =========================================================
   ENQUIRIES (320px) — ENABLE SCROLL + KEEP INPUT + TTS BAR VISIBLE
   Goal:
   - Panel scrolls
   - Chat messages scroll
   - chat input + 4 buttons remain visible (sticky)
   ========================================================= */

/* Use full viewport safely on mobile (address bar) */
#chatPanel.chat{
  /* keep your existing look, just add sizing + scroll behavior */
  height: calc(var(--vh, 1vh) * 100 - 16px);
  max-height: calc(var(--vh, 1vh) * 100 - 16px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* make sticky children behave predictably */
  display: flex;
  flex-direction: column;
}

/* Header stays at top naturally */
#chatPanel .chat-header{
  flex: 0 0 auto;
}

/* Chat body becomes the main scroller area */
#chatPanel .chat-body{
  flex: 1 1 auto;
  min-height: 0;                 /* IMPORTANT for flex scrolling */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* keep content from hiding behind sticky input/tts */
  padding-bottom: 140px;
}

/* --- Sticky INPUT row (always visible) --- */
/* It sits ABOVE the sticky TTS bar */
#chatPanel #chatForm.chat-input{
  position: sticky;
  bottom: 56px;                  /* space reserved for the TTS bar */
  z-index: 30;
  background: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* --- Sticky TTS BAR (always visible) --- */
#chatPanel #ttsBar.tts-bar{
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: #ffffff;

  /* nice separation line */
  border-top: 1px solid rgba(0,0,0,0.08);

  /* keep your spacing */
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Optional: keep the notes + disclaimer readable but scrollable */
#chatPanel .tts-notes,
#chatPanel .chat-disclaimer{
  flex: 0 0 auto;
}

/* Reset link stays part of scrollable content (below) */
#chatPanel #resetChat{
  position: relative;
}


/* =========================================================
   320px MOBILE — RESTORE SCROLL + TTS VISIBILITY + HIGHLIGHT
   Paste at the VERY END of your base 320px section
   ========================================================= */

/* Make the Enquiries panel a flex column so ONLY chatBody scrolls */
#chatPanel{
  display: flex !important;
  flex-direction: column !important;
  max-height: 92vh !important;      /* keeps panel inside screen */
}

/* This is the scrolling area (where replies appear) */
#chatBody{
  flex: 1 1 auto !important;
  min-height: 0 !important;         /* IMPORTANT for flex scrolling */
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth;
}

/* Keep input + TTS bar always visible */
#chatForm,
#ttsBar,
.tts-notes,
.chat-disclaimer{
  flex: 0 0 auto !important;
}

/* --- Restore highlight visuals --- */
#chatBody .highlight,
#chatBody .highlight-sent{
  background: #ffeb3b !important;   /* yellow highlight */
  border-radius: 6px !important;
  padding: 0 2px !important;
}

/* --- Guided Questions sheet MUST be scrollable --- */
.suggestions-sheet,
.sugg-sheet{
  max-height: 70vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.sugg-chip-wrap{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 10px !important;
}


/* ===== Speed badge (0.70x) — size + tap comfort ===== */
#nsSpeedBtn{
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: transparent;
}

#nsSpeedBadge{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* knobs */
  min-width: 56px;     /* make bigger */
  height: 34px;        /* make bigger */
  padding: 0 10px;
  font-size: 14px;     /* bigger text */
  font-weight: 900;

  border-radius: 999px;
  border: 2px solid #2d5196;
  background: #fff;
  color: #2d5196;
}

/* ===== Guided Questions sheet scroll reliability ===== */
.suggestions-sheet,
.sugg-chip-wrap{
  pointer-events: auto !important;
}

.sugg-chip-wrap{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  min-height: 0; /* required for flex scrolling */
}


/* =========================================================
   320px — Guided Questions sheet OVERLAY ON TOP
   (Paste at VERY END of your 320px base section)
   ========================================================= */

.suggestions-sheet{
  z-index: 1000005 !important;   /* must beat chatBox/chatPanel */
  position: fixed !important;
}

.suggestions-sheet.open{
  z-index: 1000006 !important;
}

/* Ensure the scroll area is actually scrollable */
.sugg-chip-wrap{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}


/* -----------------------------------------------------------------
   MENU — dropdown + language submenu (320px base)
   ----------------------------------------------------------------- */

/* Main dropdown menu panel */
#dropdownMenu.dropdown-menu{
  position: absolute;           /* anchored inside the .card */
  top: var(--menu-top);                    /* drops below hamburger */
  right: var(--menu-right);
  width: var(--menu-width);
  padding: var(--menu-pad);
  background: #fff;
  border-radius: var(--menu-radius);
  box-shadow: var(--menu-shadow);
  z-index: var(--menu-z);

  /* JS uses display block/none */
  display: none;
}

/* Menu links */
#dropdownMenu a{
  display: block;
  padding: var(--menu-link-pad);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: var(--menu-link-font);
  color: #143a66;
  -webkit-tap-highlight-color: transparent;
}

#dropdownMenu a:active{
  transform: translateY(1px);
}

/* Close X inside main menu */
#dropdownMenu .close-main-menu{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 0;
  background: rgba(0,0,0,0.06);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* The "Language" row (shows ◀ 🌐 Language) */
#menuLanguageToggle{
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------------------------------------------------------
   LANGUAGE PANEL (the scrolling flag list)
   Note: app.js may move this element to <body> when opened.
   --------------------------------------------------------- */

/* Default hidden state */
#languageSubmenu.submenu-options{
  display: block;               /* keep layout stable; hide via opacity/visibility */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
  z-index: 999999;              /* ABOVE enquiries / modals */
  overflow: hidden;             /* keeps rounded corners clean */
}

/* Visible/open */
#languageSubmenu.submenu-options.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* When language submenu is appended directly to <body>, ensure it stays above */
body > #languageSubmenu.submenu-options{
  z-index: 999999 !important;
}

/* Close X inside language panel */
#languageSubmenu .close-language{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 0;
  background: rgba(0,0,0,0.06);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

/* Make the list scroll (the panel itself can scroll too, but this helps) */
#languageSubmenu{
  max-height: var(--lang-panel-maxh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 44px 10px 10px;      /* top padding leaves room for the close X */
}

/* Each language row */
#languageSubmenu a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--lang-row-pad);
  border-radius: 12px;
  text-decoration: none;
  font-size: var(--lang-row-font);
  font-weight: 700;
  color: #143a66;
  -webkit-tap-highlight-color: transparent;
}

/* Slight hover/press feedback (mobile safe) */
#languageSubmenu a:active{
  background: rgba(20,58,102,0.06);
}

/* Flag images */
#languageSubmenu img{
  width: var(--lang-flag);
  height: var(--lang-flag);
  border-radius: 6px;
  flex: 0 0 auto;
}


/* ----- MEDIA: max-width 520px, portrait — menu dropdown height ----- */
@media (max-width: 520px) and (orientation: portrait){

  /* Default stays controlled by JS (display:none / display:block) */
  html body #dropdownMenu.dropdown-menu{
    height: auto !important;
    max-height: 26vh !important;     /* your “short” size */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 12px !important;
  }

  /* ONLY when JS opens it (display: block), we can make it flex if you want */
  html body #dropdownMenu.dropdown-menu[style*="display: block"],
  html body #dropdownMenu.dropdown-menu[style*="display:block"]{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Wrapper should not add empty height */
  html body #dropdownMenu .submenu-wrapper{
    display: contents !important;
    height: auto !important;
    min-height: 0 !important;
  }
}


/* MENU — slimmer language panel (follows portrait block above) */
/* 2) Language submenu: make it SLIMMER (JS sets inline width, so we override with !important) */
#languageSubmenu.submenu-options,
body > #languageSubmenu.submenu-options{
  width: min(260px, 86vw) !important;   /* 👈 slimmer than your current min(380px, 88vw) */
  max-height: 70vh !important;
}

/* Optional: tighten rows slightly so more languages fit before scrolling */
#languageSubmenu a{
  padding: 10px 10px !important;
  font-size: 13.5px !important;
}

/* MODALS — About / Contact / Help: on top, centered */
.modal-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.35) !important;
  z-index: 1000008 !important; /* higher than menus + enquiries */
  display: none;               /* hidden by default */
  align-items: center !important;
  justify-content: center !important;
  padding: 14px !important;
}

/* Your JS sets style="display: block" → force FLEX so it centers */
.modal-overlay[style*="display: block"],
.modal-overlay[style*="display:block"],
.modal-overlay[style*="display: flex"],
.modal-overlay[style*="display:flex"]{
  display: flex !important;
}

/* ✅ The missing piece: solid white readable card */
.modal-content{
  width: min(320px, 92vw) !important;
  max-height: 78vh !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;

  background: #ffffff !important;          /* ✅ WHITE background */
  color: #0f3550 !important;               /* readable text */
  border-radius: 18px !important;
  padding: 18px 16px 16px !important;

  box-shadow: 0 18px 44px rgba(0,0,0,0.22) !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
}

/* Make headings readable + consistent */
.modal-content h2{
  margin: 6px 0 10px !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
}

.modal-content p{
  margin: 10px 0 !important;
  line-height: 1.5 !important;
}

/* Keep the close button visible on the white card */
.modal-content .close-modal{
  position: sticky !important;
  top: 0 !important;
  float: right !important;
  margin-left: 10px !important;

  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  background: rgba(0,0,0,0.05) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}


/* =========================================================
   320px — Modal Header Centering Fix (About / Contact / Help)
   ========================================================= */

/* Create a proper header layout */
.modal-content{
  position: relative; /* anchor for absolute X */
}

/* Center the heading */
.modal-content h2{
  text-align: center !important;
  width: 100%;
  margin: 0 0 16px 0 !important;
  padding: 0 40px; /* prevents text from overlapping the X */
}

/* Center the X vertically and align to right */
.modal-content .close-modal{
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  transform: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
}


/* =========================================================
   DOCUMENT PAGE — Full-width top banner layout
   ========================================================= */

/* Remove container top padding so banner touches top */
body.document-page .policy-page{
  padding-top: 0 !important;
}

/* Make banner stretch edge-to-edge */
body.document-page .policy-banner{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; /* break out of centered container */
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;              /* full edge look */
}

/* Optional: control banner height */
body.document-page .policy-banner{
  height: 100px !important;   /* adjust 70–90px to taste */
}

/* Make image fill perfectly */
body.document-page .policy-banner img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* Optional: tighten Back to Home spacing so it feels balanced */
body.document-page .policy-container a{
  display: inline-block;
  margin-top: 14px !important;  /* adjust 16–24px to taste */
}


/* -----------------------------------------------------------------
   DOCUMENT — policy / legal pages (body.document-page)
   ----------------------------------------------------------------- */

body.document-page .policy-banner{
  margin-top: 0px !important;   /* increase to 20px or 24px if needed */
}


body.document-page .policy-banner img{
  object-position: left center !important;

}










/* ----- MEDIA: max-width 520px, portrait — CHAT panel (master base) ----- */
@media (max-width: 520px) and (orientation: portrait){

  /* -----------------------------------------
     PANEL SHELL
     One layout model only
     ----------------------------------------- */
  #chatPanel.chat{
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;

    height: calc(var(--vh, 1vh) * 100 - 16px) !important;
    max-height: calc(var(--vh, 1vh) * 100 - 16px) !important;

    overflow: hidden !important;

    background: #ffffff !important;
    border: 3px solid var(--ns-accent, #2d5196) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18) !important;
  }

  /* -----------------------------------------
     HEADER
     ----------------------------------------- */
  #chatPanel .chat-header{
    position: relative !important;
    flex: 0 0 auto !important;

    background: #ffffff !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 0 !important;

    padding: clamp(7px, 2vw, 8px) clamp(9px, 2.6vw, 10px) clamp(8px, 2.4vw, 10px) !important;
  }

  #chatPanel .chat-title{
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    font-weight: 900 !important;
    font-size: var(--enq-title-font) !important;
    color: #0b3f7a !important;
  }

  #chatPanel .chat-title img{
    width: clamp(20px, 6vw, 22px) !important;
    height: clamp(20px, 6vw, 22px) !important;
  }

  #chatPanel .lang-hint{
    margin-top: 6px !important;
    background: #eef2f6 !important;
    border-radius: clamp(8px, 3vw, 10px) !important;
    padding: clamp(7px, 2.4vw, 8px) clamp(9px, 3vw, 10px) !important;

    font-size: var(--enq-hint-font) !important;
    line-height: 1.25 !important;
    color: #1f2a37 !important;
  }

  /* -----------------------------------------
     CLOSE BUTTON
     ----------------------------------------- */
  #chatClose,
  #chatPanel #chatClose,
  #chatPanel button.chat-close.close-modal{
    position: absolute !important;
    top: clamp(18px, 5vw, 24px) !important;
    right: clamp(6px, 2vw, 10px) !important;

    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;

    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 14px !important;
    line-height: 1 !important;

    border-radius: 8px !important;
    overflow: hidden !important;
  }

  /* -----------------------------------------
     CHAT BODY
     One scroller only
     ----------------------------------------- */
  #chatPanel .chat-body,
  #chatBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    padding: 10px 12px 8px !important;
  }

  #chatPanel .msg{
    display: flex !important;
    margin: 0 0 10px 0 !important;
  }

  #chatPanel .msg.bot{
    justify-content: flex-start !important;
  }

  #chatPanel .msg.user{
    justify-content: flex-end !important;
  }

  #chatPanel .bubble{
    max-width: 100% !important;
    border-radius: clamp(14px, 5vw, 16px) !important;
    padding: var(--enq-bubble-pad) !important;
    font-size: var(--enq-bubble-font) !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
  }

  #chatPanel .msg.bot .bubble{
    background: rgba(var(--ns-accent-rgb, 45,81,150), 0.08) !important;
    border: 2px solid var(--ns-accent, #2d5196) !important;
    color: #0b2f5a !important;
  }

  #chatPanel .msg.user .bubble{
    background: #e8f7ef !important;
    border: 2px solid #1f7a4d !important;
    color: #0b3b27 !important;
  }

  /* -----------------------------------------
     INPUT ROW
     ----------------------------------------- */
  #chatPanel #chatForm,
  #chatPanel .chat-input{
    flex: 0 0 auto !important;

    display: flex !important;
    align-items: center !important;
    gap: clamp(8px, 3vw, 10px) !important;

    background: #ffffff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    padding: 8px 12px !important;
    margin: 0 !important;
  }

  #chatPanel #chatText{
    flex: 1 1 auto !important;
    min-width: 0 !important;

    height: var(--enq-input-h) !important;
    padding: 0 clamp(10px, 3vw, 12px) !important;

    font-size: var(--enq-input-font) !important;
    border: 2px solid var(--ns-accent, #2d5196) !important;
    border-radius: clamp(12px, 4vw, 14px) !important;
    outline: none !important;
  }

  #chatPanel .send{
    flex: 0 0 auto !important;

    height: var(--enq-input-h) !important;
    min-width: var(--enq-send-minw) !important;
    padding: 0 clamp(12px, 4vw, 16px) !important;

    font-size: var(--enq-input-font) !important;
    font-weight: 900 !important;

    border-radius: clamp(12px, 4vw, 14px) !important;
    border: none !important;

    background: var(--ns-accent, #2d5196) !important;
    color: #fff !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.22) !important;
  }

  /* -----------------------------------------
     RESET CHAT
     ----------------------------------------- */
  #chatPanel #resetChat{
    flex: 0 0 auto !important;
    font-size: 14px !important;
    margin-top: 0 !important;
  }

  /* -----------------------------------------
     GUIDED QUESTIONS BUTTON
     ----------------------------------------- */
  #chatPanel .suggestions-toggle{
    flex: 1 1 100% !important;
    flex-basis: 100% !important;

    max-width: 100% !important;
    width: 100% !important;
    padding: 6px clamp(10px, 3vw, 14px) !important;
    margin: 4px 0 0 !important;

    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
    height: auto !important;
    min-height: 34px !important;

    position: relative !important;
    bottom: auto !important;
  }

#chatPanel .suggestions-toggle{

 background: linear-gradient(
    to bottom,
    #e6f7ef,
    #cfeee0
  );

  border:2px solid #6bbf9c;

  color:#124734;

  font-weight:900;

  border-radius:22px;

  box-shadow:0 8px 0 rgba(0,0,0,0.15);
}


  /* -----------------------------------------
     TTS BAR
     ----------------------------------------- */
  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    flex: 0 0 auto !important;

    display: block !important;
    position: relative !important;
    bottom: auto !important;

    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    margin: 0 !important;
    padding: 8px 12px 8px !important;
  }

  #chatPanel #ttsBar .tts-bar-head{
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #chatPanel #ttsBar .tts-label{
    font-weight: 900 !important;
    font-size: 13px !important;
  }

  /* -----------------------------------------
     INFO ICON
     ----------------------------------------- */
  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    padding: 0 !important;
    margin: 0 !important;
    flex: 0 0 32px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 18px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  /* -----------------------------------------
     TTS CONTROLS ROW
     ----------------------------------------- */
  #chatPanel #ttsBar .tts-controls-row{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    width: 100% !important;

    margin-top: 8px !important;
  }

  #chatPanel #ttsBar .tts-btn{
    height: 28px !important;
    padding: 0 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 13px !important;
    line-height: normal !important;
    border-radius: 14px !important;
  }

  /* -----------------------------------------
     SPEED BADGE
     Keep simple in portrait base
     ----------------------------------------- */
  #chatPanel #nsSpeedBtn{
    margin-left: 8px !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;

    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  #chatPanel #nsSpeedBadge{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 50px !important;
    min-width: 50px !important;
    height: 28px !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    border-radius: 999px !important;
    border: 2px solid var(--ns-accent, #2d5196) !important;
    background: #ffffff !important;
    color: var(--ns-accent, #2d5196) !important;

    transform: none !important;
  }

  /* -----------------------------------------
     NOTES + DISCLAIMER
     ----------------------------------------- */
  #chatPanel .tts-notes,
  #chatPanel .chat-disclaimer{
    flex: 0 0 auto !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;

    text-align: center !important;
  }

  #chatPanel .tts-notes{
    padding: 0 12px 8px !important;
    font-size: clamp(10px, 3.2vw, 11px) !important;
    line-height: 1.25 !important;
  }

  #chatPanel .chat-disclaimer{
    padding: 0 12px 10px !important;
    font-size: clamp(10px, 3vw, 10.5px) !important;
    line-height: 1.25 !important;
    margin-top: 0 !important;
  }

  /* -----------------------------------------
     INFO POPUP
     ----------------------------------------- */
  #chatPanel #ttsInfoPopup{
    position: absolute !important;
    top: clamp(30px, 8vw, 38px) !important;
    left: 0 !important;
    max-width: min(260px, 78vw) !important;

    background: #ffffff !important;
    border: 2px solid var(--ns-accent, #2d5196) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;

    font-size: clamp(11px, 3.2vw, 12.5px) !important;
    line-height: 1.3 !important;
    color: #073b72 !important;

    box-shadow: 0 12px 24px rgba(0,0,0,0.18) !important;
    z-index: 100 !important;
  }

  #chatPanel #ttsInfoPopup::before{
    content: "" !important;
    position: absolute !important;
    top: -8px !important;
    left: 108px !important;

    width: 14px !important;
    height: 14px !important;

    background: #ffffff !important;
    border-left: 2px solid var(--ns-accent, #2d5196) !important;
    border-top: 2px solid var(--ns-accent, #2d5196) !important;

    transform: rotate(45deg) !important;
  }


  #chatClose,
#chatPanel #chatClose,
#chatPanel button.chat-close.close-modal{

  top: 6px !important;
  right: 6px !important;

  width: 22px !important;
  height: 22px !important;

  font-size: 13px !important;

  border-radius: 6px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;

    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    border-radius: 999px !important;
    flex: 0 0 38px !important;
  }

  /* SPEED BADGE — keep stable in portrait */
#chatPanel #nsSpeedBtn{
  margin-left: 8px !important;
  position: static !important;
  transform: none !important;
  left: auto !important;
  top: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

#chatPanel #nsSpeedBadge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 50px !important;
  min-width: 50px !important;
  height: 28px !important;

  font-size: 12px !important;
  font-weight: 900 !important;

  border-radius: 999px !important;
  border: 2px solid var(--ns-accent, #2d5196) !important;
  background: #ffffff !important;
  color: var(--ns-accent, #2d5196) !important;

  transform: none !important;

  }
}



/* =====================================================
   MOBILE PORTRAIT (BASE 320px) — ENQUIRIES MODE COLOURS
   Participant = blue | Provider = green | General = brown
   ===================================================== */
@media (max-width: 480px) and (orientation: portrait){

  /* ---------- DEFAULT / PARTICIPANT ---------- */
  #chatPanel.mode-participant{
    --ns-accent: #2d5196;
    --ns-accent-rgb: 45, 81, 150;
    --ns-accent-dark: #123366;
    --ns-bubble-bg: #e7f0ff;
    --ns-bubble-text: #0b2f5a;
  }

  /* ---------- PROVIDER (DARKER GREEN) ---------- */
#chatPanel.mode-provider{
  --ns-accent: #1f7a5a;        /* darker, richer green */
  --ns-accent-rgb: 31, 122, 90;
  --ns-accent-dark: #155a42;   /* deeper shadow green */

  --ns-bubble-bg: #e3f3ec;     /* still light but slightly richer */
  --ns-bubble-text: #082f22;   /* darker readable text */
  }

  /* ---------- GENERAL ---------- */
  #chatPanel.mode-general{
    --ns-accent: #8b5e3c;
    --ns-accent-rgb: 139, 94, 60;
    --ns-accent-dark: #6f472b;
    --ns-bubble-bg: #f5ede6;
    --ns-bubble-text: #4f3422;
  }

  /* ---------- PANEL BORDER ---------- */
  #chatPanel.mode-participant,
  #chatPanel.mode-provider,
  #chatPanel.mode-general{
    border-color: var(--ns-accent) !important;
  }

  /* ---------- TITLE ---------- */
  #chatPanel.mode-participant .chat-title,
  #chatPanel.mode-provider .chat-title,
  #chatPanel.mode-general .chat-title{
    color: var(--ns-accent) !important;
  }

  /* ---------- MAIN BOT BUBBLE ---------- */
  #chatPanel.mode-participant .msg.bot .bubble,
  #chatPanel.mode-provider .msg.bot .bubble,
  #chatPanel.mode-general .msg.bot .bubble{
    background: var(--ns-bubble-bg) !important;
    border: 2px solid var(--ns-accent) !important;
    color: var(--ns-bubble-text) !important;
  }

  /* ---------- INPUT BORDER ---------- */
  #chatPanel.mode-participant #chatText,
  #chatPanel.mode-provider #chatText,
  #chatPanel.mode-general #chatText{
    border-color: var(--ns-accent) !important;
  }

  /* ---------- SEND BUTTON (ALWAYS BLUE — ALL MODES) ---------- */
  #chatPanel .send{
  background: #2d5196 !important;          /* fixed blue */
  color: #fff !important;
  }

  /* ---------- SPEED BADGE ---------- */
  #chatPanel.mode-participant #nsSpeedBadge,
  #chatPanel.mode-provider #nsSpeedBadge,
  #chatPanel.mode-general #nsSpeedBadge{
    border-color: var(--ns-accent) !important;
    color: var(--ns-accent) !important;
  }

  /* ---------- FIND PROVIDERS BUTTON ---------- */
  #chatPanel.mode-participant .ns-intake-cta,
  #chatPanel.mode-provider .ns-intake-cta,
  #chatPanel.mode-general .ns-intake-cta{
    color: var(--ns-accent) !important;
    border-color: var(--ns-accent) !important;
    background: #ffffff !important;
  }

  /* ---------- INFO POPUP ---------- */
  #chatPanel.mode-participant #ttsInfoPopup,
  #chatPanel.mode-provider #ttsInfoPopup,
  #chatPanel.mode-general #ttsInfoPopup,
  #chatPanel.mode-participant .tts-info-popup,
  #chatPanel.mode-provider .tts-info-popup,
  #chatPanel.mode-general .tts-info-popup{
    border-color: var(--ns-accent) !important;
  }

  #chatPanel.mode-participant #ttsInfoPopup::after,
  #chatPanel.mode-provider #ttsInfoPopup::after,
  #chatPanel.mode-general #ttsInfoPopup::after,
  #chatPanel.mode-participant .tts-info-popup::after,
  #chatPanel.mode-provider .tts-info-popup::after,
  #chatPanel.mode-general .tts-info-popup::after{
    background: #ffffff !important;
  }

  /* ---------- RESET CHAT (portrait look stays consistent) */
  #chatPanel.mode-participant #resetChat,
  #chatPanel.mode-provider #resetChat,
  #chatPanel.mode-general #resetChat{
    border-color: color-mix(in srgb, var(--ns-accent) 35%, #8f8f8f) !important;

  }

}


















/* ===========*************************************************==============
   MOBILE LANDSCAPE — LANDING PAGE RESET
   Goal: return to old good layout from image 2,
   but keep the NEW bot-wrap / Need help area
   Paste at VERY END of styles.css
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){

  /* ===== MAIN GRID ===== */
  .card{
    grid-template-columns: 180px minmax(0, 1fr) 180px !important;
    grid-template-rows: auto auto auto auto !important;
    padding: 8px 14px 8px !important;
    gap: 6px !important;
    column-gap: 12px !important;
    align-items: start !important;
    justify-items: stretch !important;
  }

  /* ===== LOGO ===== */
  .brand-top-left{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    margin: 0 !important;
  }

  .brand-top-left img{
    width: clamp(100px, 14vw, 150px) !important;
    height: auto !important;
    display: block !important;
  }

  /* ===== MENU ===== */
  .menu-toggle{
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    margin: 0 !important;
    font-size: clamp(38px, 5vw, 56px) !important;
  }

  .menu-toggle::before{
    font-size: clamp(14px, 1.6vw, 8px) !important;
    margin-bottom: 0 !important;
  }

  /* ===== LEFT BOT AREA (NEW bot-wrap kept) ===== */
  .bot-wrap{
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    justify-self: start !important;
    align-self: center !important;
    position: relative !important;
    width: 100% !important;
  }

  .bot-large{
  width: clamp(195px, 18vw, 205px) !important;
  height: auto !important;
  margin: 26px 0 0 0 !important;
  justify-self: start !important;
  align-self: end !important;

  transform: translateX(-32px) scaleX(1.15) !important;
}

  /* ===== NEED HELP LABEL + I ICON with new bot-wrap ===== */
  .bot-wrap .bot-help{
    position: absolute !important;
    left: 50% !important;
    top: 0px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2px !important;
    z-index: 3 !important;
  }

  .bot-wrap .bot-help-label{
    font-size: clamp(14px, 2vw, 18px) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    transform: translateX(-25px) !important;
  }

  .bot-wrap .bot-help-icon{
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateX(-25px) !important;
  }

  /* ===== INTRO ===== */
  #introBlock{
  grid-column: 2 / 4 !important;
  grid-row: 2 !important;

  justify-self: center !important;
  align-self: start !important;

  width: 100% !important;
  max-width: none !important;

  padding: 0 16px !important;
  margin: -2px auto 2px !important;

  transform: translateX(-90px) !important;  /* exact correction */

  text-align: center !important;
  font-size: clamp(16px, 2vw, 26px) !important;
  line-height: 1.18 !important;
}

#introBlock p,
#introBlock div{
  margin: 0 auto !important;
  text-align: center !important;
  max-width: none !important;
}

  /* ===== CTA BUTTONS ===== */
  #ctaGroup{
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-self: start !important;

    width: min(100%, 760px) !important;
    max-width: 760px !important;

    margin-top: 0 !important;
    gap: 15px !important;
  }

  #ctaGroup .btn{
    min-height: 30px !important;
    padding: 8px 12px !important;
    font-size: clamp(20px, 2.1vw, 28px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ===== ASSISTANT BUTTONS ===== */
  .assistant{
    grid-column: 3 !important;
    grid-row: 2 / 4 !important;
    justify-self: end !important;
    align-self: center !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 10px !important;
    margin: 0 !important;

    --ga-fab-col-w: clamp(72px, 7.5vw, 92px);
  }

  .bot-fab,
  .mic{
    width: clamp(72px, 7.5vw, 92px) !important;
    height: clamp(72px, 7.5vw, 92px) !important;
  }

  .bot-fab img,
  .mic img{
    width: 72% !important;
    height: 72% !important;
  }

  /* ===== FOOTER ===== */
  .site-footer{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    justify-self: center !important;
    align-self: start !important;

    width: min(100%, 1120px) !important;
    margin-top: -6px !important;

    padding: 6px 10px !important;
    gap: 4px !important;

    font-size: clamp(9px, 1vw, 12px) !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  /* TOOLTIP — SCALE + MOVE RIGHT (SAFE) */
  .bot-wrap .bot-help-tooltip{
    transform: scale(1) translate(20px, -90px);  /*moves right - moves up*/
    transform-origin: top left !important;
  }


  /* ===== GLOBAL COMPRESSION ===== */
.card{
  padding: 4px 12px 4px !important;
  gap: 4px !important;
}

/* ===== INTRO ===== */
#introBlock{
  margin-top: -46px !important;
}

/* ===== BOT ===== */
.bot-large{
  margin-top: 16px !important;
}

/* ===== CTA ===== */
#ctaGroup{
  margin-top: -36px !important;
}

/* ===== ASSISTANT BUTTONS ===== */
.assistant{
  transform: translateY(-14px) !important;
}

/* ===== FOOTER ===== */
.site-footer{
  margin-top: -30px !important;
  }
}



/* =====================================================
   MOBILE LANDSCAPE — ENQUIRIES SCROLLABLE
   Keep header + hint + input + reset + tts + disclaimer visible
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){

  /* PANEL */
  #chatPanel.chat{
    width: calc(100vw - 10px) !important;
    height: calc(100dvh - 10px) !important;
    max-height: calc(100dvh - 10px) !important;
    inset: 5px !important;
    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;

    border-radius: 24px !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  /* HEADER ALWAYS VISIBLE */
  #chatPanel .chat-header{
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;

    padding: 6px 12px 4px !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  }

  #chatPanel .chat-title{
    font-size: 16px !important;
    line-height: 1.1 !important;
    gap: 8px !important;
  }

  #chatPanel .chat-title img{
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
  }

  #chatPanel .lang-hint{
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
    line-height: 1.14 !important;
    border-radius: 10px !important;
    background: #eef2f6 !important;
  }

  /* SMALLER X */
  #chatPanel .chat-close{
    top: 8px !important;
    right: 8px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    border-radius: 12px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ONLY THE MESSAGE AREA SCROLLS */
  #chatPanel .chat-body,
  #chatBody{
  flex: 1 1 auto !important;
  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  padding: 6px 10px 210px !important; /* room for sticky bottom stack */
  margin: 0 !important;
  box-sizing: border-box !important;

  background: transparent !important;
}

  #chatPanel .msg{
    margin: 0 0 8px 0 !important;
  }

  #chatPanel .bubble{
    font-size: 13px !important;
    line-height: 1.28 !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #chatPanel .msg.bot .bubble{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* FIND PROVIDERS BUTTON — SMALLER */
#chatPanel .ns-intake-cta{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 6px 12px !important;
  margin: 0 0 6px 0 !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  border-radius: 12px !important;

  white-space: nowrap !important;
}

  /* INPUT ROW STICKY */
  #chatPanel #chatForm,
  #chatPanel .chat-input{
  flex: 0 0 auto !important;
  position: sticky !important;
  bottom: 85px !important;
  z-index: 50 !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 6px 10px 4px !important;
  margin: 0 !important;

  background: #fff !important;
  box-sizing: border-box !important;
  border-top: 1px solid rgba(0,0,0,0.05) !important;
}
  #chatPanel #chatText{
    min-width: 0 !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;

    padding: 0 12px !important;
    font-size: 13px !important;
    line-height: normal !important;

    border-radius: 16px !important;
    box-sizing: border-box !important;

    display: block !important;
    margin: 0 !important;
  }

  #chatPanel .send{
    height: 30px !important;
    min-width: 86px !important;

    padding: 0 12px !important;
    font-size: 13px !important;
    line-height: normal !important;

    border-radius: 16px !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* RESET CHAT STICKY */
  #chatPanel #resetChat{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: sticky !important;
  bottom: 66px !important;
  z-index: 56 !important;

  width: auto !important;
  min-height: 22px !important;
  margin: 0 10px 2px !important;
  padding: 3px 0 !important;

  text-align: center !important;
  font-size: 11.5px !important;
  line-height: 1.15 !important;

  border-top: 1px solid rgba(0,0,0,0.16) !important;
  border-bottom: 1px solid rgba(0,0,0,0.16) !important;
  background: #fff !important;

  flex: 0 0 auto !important;
}


  /* TTS BAR STICKY */
  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    flex: 0 0 auto !important;

    position: sticky !important;
    bottom: 24px !important;
    z-index: 55 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;

    padding: 2px 10px 4px !important;
    margin: 0 !important;

    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,0.08) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  #chatPanel #ttsBar .tts-bar-head{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #chatPanel #ttsBar .tts-label{
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;

    font-size: 15px !important;
    line-height: 26px !important;

    flex: 0 0 26px !important;
    padding: 0 !important;
  }

  #chatPanel .suggestions-toggle{
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 12px !important;

    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
    height: auto !important;
    min-height: 32px !important;

    border-radius: 18px !important;
  }

  #chatPanel #ttsBar .tts-controls-row{
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
    width: 100% !important;

    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  #chatPanel #ttsBar .tts-btn{
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    line-height: 32px !important;
    border-radius: 12px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  #chatPanel #nsSpeedBtn{
    margin-left: 0 !important;
    position: static !important;
    transform: none !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  #chatPanel #nsSpeedBadge{
    width: 52px !important;
    min-width: 52px !important;
    height: 30px !important;
    min-height: 30px !important;

    font-size: 11px !important;
    line-height: 30px !important;

    transform: none !important;
    box-sizing: border-box !important;
  }

  /* HIDE DUPLICATE NOTES */
  #chatPanel .tts-notes{
    display: none !important;
  }

  /* DISCLAIMER STICKY TOO */
  #chatPanel .chat-disclaimer{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: sticky !important;
    bottom: 0 !important;
    z-index: 54 !important;

    padding: 1px 10px 6px !important;
    margin: 0 !important;

    font-size: 9px !important;
    line-height: 1.08 !important;
    text-align: center !important;

    background: #fff !important;
    flex: 0 0 auto !important;
  }
}



/* =====================================================
   MOBILE LANDSCAPE — TTS INFO POPUP ABOVE BUTTON
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){

   #chatPanel #ttsBar,
  #chatPanel #ttsBar .tts-bar-head{
    overflow: visible !important;
  }

  #chatPanel #ttsInfoPopup{
    position: absolute !important;

    top: -82px !important;

    left: 50% !important;
    transform: translateX(-50%) !important;

    width: min(400px, 92vw) !important;
    max-width: min(400px, 92vw) !important;

    border-radius: 18px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;

  }


/* =========================================
   MOBILE LANDSCAPE — TTS INFO POPUP ARROW
   ========================================= */
  #chatPanel #ttsInfoPopup{
    overflow: visible !important;
    isolation: isolate !important;
  }

  /* blue outline triangle */
  #chatPanel #ttsInfoPopup::after{
    content: "" !important;
    position: absolute !important;

    bottom: -12px !important;
    left: 74px !important;              /* move this left/right to line up with ⓘ */

    width: 0 !important;
    height: 0 !important;

    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* speech-bubble pointer */
  #chatPanel #ttsInfoPopup::before{
    content: "" !important;
    position: absolute !important;
    left: 110px !important;
    bottom: -10px !important;

    width: 18px !important;
    height: 18px !important;

    background: #ffffff; !important;
    border-left: 1px solid #2d5196; !important;
    border-bottom: 1px solid #2d5196; !important;

    transform: rotate(-45deg) !important;
  }
}



/* =====================================================
   FIX TTS INFO POPUP VISIBILITY
   Solid readable popup bubble
   ===================================================== */
#chatPanel #ttsInfoPopup,
#chatPanel .tts-info-popup{
  background: #ffffff !important;
  color: #222 !important;

  border: 1px solid rgba(0,0,0,0.15) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25) !important;

  opacity: 1 !important;
  backdrop-filter: none !important;
}

/* arrow under popup */
#chatPanel #ttsInfoPopup::after,
#chatPanel .tts-info-popup::after{
  background: #ffffff !important;
}



/* =====================================================
   MOBILE LANDSCAPE — MATCH PORTRAIT BUTTON STYLE
   suggestions + info + reset
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){

  /* INFO ICON — same as portrait */
  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    border-radius: 999px !important;

    background: #ffffff !important;
    border: 2px solid #7a7a7a !important;
    color: #222 !important;

    box-shadow: 0 6px 0 rgba(0,0,0,0.15) !important;
  }

  /* GUIDED QUESTIONS — same as portrait */
  #chatPanel .suggestions-toggle{
    padding: 6px 14px !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    border-radius: 22px !important;

    background: linear-gradient(to bottom, #e6f7ef, #cfeee0) !important;
    border: 2px solid #6bbf9c !important;
    color: #124734 !important;

    box-shadow: 0 8px 0 rgba(0,0,0,0.15) !important;
  }

 /* =====================================================
   RESET CHAT — FULL WIDTH BAR (PORTRAIT STYLE)
   ===================================================== */
#chatPanel #resetChat{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: sticky !important;
  bottom: 65px !important; /* sits just above TTS */

  width: calc(100% - 20px) !important;
  margin: 0 10px 4px !important;
  padding: 2px 0 !important;

  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  border-radius: 6px !important;

  background: #e9e9e9 !important;
  border: 1px solid #9a9a9a !important;
  color: #222 !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important;

  z-index: 56 !important;

  }


/* =====================================================
   ENQUIRIES — MODE COLOURS
   Participant = blue
   Provider = green
   General = brown
   Paste at VERY END of styles.css
   ===================================================== */

/* ---------- DEFAULT / PARTICIPANT ---------- */
#chatPanel.mode-participant{
  --ns-accent: #2d5196;
  --ns-accent-rgb: 45, 81, 150;
  --ns-accent-dark: #123366;
  --ns-bubble-bg: #e7f0ff;
  --ns-bubble-text: #0b2f5a;
}

/* ---------- PROVIDER (DARKER GREEN) ---------- */
#chatPanel.mode-provider{
  --ns-accent: #1f7a5a;        /* darker, richer green */
  --ns-accent-rgb: 31, 122, 90;
  --ns-accent-dark: #155a42;   /* deeper shadow green */

  --ns-bubble-bg: #e3f3ec;     /* still light but slightly richer */
  --ns-bubble-text: #082f22;   /* darker readable text */
}

/* ---------- GENERAL ---------- */
#chatPanel.mode-general{
  --ns-accent: #8b5e3c;
  --ns-accent-rgb: 139, 94, 60;
  --ns-accent-dark: #6f472b;
  --ns-bubble-bg: #f5ede6;
  --ns-bubble-text: #4f3422;
}

/* ---------- PANEL BORDER ---------- */
#chatPanel.mode-participant,
#chatPanel.mode-provider,
#chatPanel.mode-general{
  border-color: var(--ns-accent) !important;
}

/* ---------- TITLE ---------- */
#chatPanel.mode-participant .chat-title,
#chatPanel.mode-provider .chat-title,
#chatPanel.mode-general .chat-title{
  color: var(--ns-accent) !important;
}

/* ---------- MAIN BOT BUBBLE ---------- */
#chatPanel.mode-participant .msg.bot .bubble,
#chatPanel.mode-provider .msg.bot .bubble,
#chatPanel.mode-general .msg.bot .bubble{
  background: var(--ns-bubble-bg) !important;
  border: 2px solid var(--ns-accent) !important;
  color: var(--ns-bubble-text) !important;
}

/* ---------- INPUT BORDER ---------- */
#chatPanel.mode-participant #chatText,
#chatPanel.mode-provider #chatText,
#chatPanel.mode-general #chatText{
  border-color: var(--ns-accent) !important;
}


/* ---------- SPEED BADGE ---------- */
#chatPanel.mode-participant #nsSpeedBadge,
#chatPanel.mode-provider #nsSpeedBadge,
#chatPanel.mode-general #nsSpeedBadge{
  border-color: var(--ns-accent) !important;
  color: var(--ns-accent) !important;
}

/* ---------- FIND PROVIDERS / CTA INSIDE BUBBLE ---------- */
#chatPanel.mode-participant .ns-intake-cta,
#chatPanel.mode-provider .ns-intake-cta,
#chatPanel.mode-general .ns-intake-cta{
  color: var(--ns-accent) !important;
  border-color: var(--ns-accent) !important;
  background: #ffffff !important;
}

/* ---------- INFO POPUP ---------- */
#chatPanel.mode-participant #ttsInfoPopup,
#chatPanel.mode-provider #ttsInfoPopup,
#chatPanel.mode-general #ttsInfoPopup,
#chatPanel.mode-participant .tts-info-popup,
#chatPanel.mode-provider .tts-info-popup,
#chatPanel.mode-general .tts-info-popup{
  border-color: var(--ns-accent) !important;
}

#chatPanel.mode-participant #ttsInfoPopup::after,
#chatPanel.mode-provider #ttsInfoPopup::after,
#chatPanel.mode-general #ttsInfoPopup::after,
#chatPanel.mode-participant .tts-info-popup::after,
#chatPanel.mode-provider .tts-info-popup::after,
#chatPanel.mode-general .tts-info-popup::after{
  background: #ffffff !important;
}

/* ---------- OPTIONAL: RESET CHAT BORDER SLIGHTLY TINTED ---------- */
#chatPanel.mode-participant #resetChat,
#chatPanel.mode-provider #resetChat,
#chatPanel.mode-general #resetChat{
  border-color: color-mix(in srgb, var(--ns-accent) 35%, #8f8f8f) !important;

  }



/* =====================================================
   MOBILE LANDSCAPE — TTS INFO POPUP ABOVE RESET CHAT
   ===================================================== */

  /* make the TTS row a higher stacking context */
  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    z-index: 120 !important;
    isolation: isolate !important;
  }

  /* anchor area for popup */
  #chatPanel #ttsBar .tts-bar-head{
    position: relative !important;
    z-index: 121 !important;
  }

  #chatPanel #ttsBar #ttsInfo{
    position: relative !important;
    z-index: 122 !important;
  }

  /* popup itself always above reset/input */
  #chatPanel #ttsInfoPopup,
  #chatPanel .tts-info-popup{
    z-index: 9999 !important;
  }

  /* lower reset chat below popup */
  #chatPanel #resetChat{
    z-index: 56 !important;
  }

  /* keep input row below popup too */
  #chatPanel #chatForm,
  #chatPanel .chat-input{
    z-index: 50 !important;
  }
}















/* ===========*************************************************==============
   iPAD / LENOVO TABLET PORTRAIT
   Clean tablet portrait layer
   Reuses old portrait sizing style safely
   Paste at VERY END of styles.css
   ===================================================== */
@media (min-width: 680px) and (max-width: 1024px) and (orientation: portrait){

  :root{
    --ipadP-logo-w: 190px;
    --ipadP-menu-font: 20px;
    --ipadP-hamburger-size: 68px;

    --ipadP-bot-w: 310px;
    --ipadP-bot-mt: -8px;

    --ipadP-intro-w: min(82%, 700px);
    --ipadP-intro-font: 28px;
    --ipadP-intro-mt: -12px;

    --ipadP-cta-width: 680px;
    --ipadP-cta-gap: 18px;
    --ipadP-cta-font: 30px;
    --ipadP-cta-minh: 68px;

    --ipadP-assist-size: 105px;
    --ipadP-assist-gap: 20px;
    --ipadP-assist-mt: 12px;

    --ipadP-footer-width: 760px;
    --ipadP-footer-font: 16px;
    --ipadP-footer-mt: 8px;

    --ipadP-menu-width: 240px;
    --ipadP-lang-width: min(320px, 62vw);

    --ipadP-chat-w: min(92vw, 760px);
    --ipadP-chat-title: 24px;
    --ipadP-chat-text: 18px;
    --ipadP-input-h: 58px;
    --ipadP-input-font: 20px;
    --ipadP-send-minw: 120px;

    --ipadP-tts-btn-h: 44px;
    --ipadP-tts-btn-font: 18px;
    --ipadP-speed-w: 72px;
    --ipadP-speed-h: 40px;
    --ipadP-speed-font: 18px;
  }

  /* =========================
     LANDING PAGE
     ========================= */
  .card{
    gap: 14px !important;
    padding: 18px 22px 18px !important;
    min-height: 100dvh !important;
  }

  .brand-top-left{
    margin-top: 10px !important;
    margin-left: 14px !important;
  }

  .brand-top-left img{
    width: var(--ipadP-logo-w) !important;
  }

  .menu-toggle{
    font-size: var(--ipadP-hamburger-size) !important;
    margin-top: 10px !important;
    margin-right: 14px !important;
  }

  .menu-toggle::before{
    font-size: var(--ipadP-menu-font) !important;
  }

  .bot-large{
    width: var(--ipadP-bot-w) !important;
    margin-top: var(--ipadP-bot-mt) !important;
  }

  #introBlock{
    width: var(--ipadP-intro-w) !important;
    max-width: 700px !important;
    font-size: var(--ipadP-intro-font) !important;
    line-height: 1.24 !important;
    margin-top: var(--ipadP-intro-mt) !important;
    text-align: center !important;
  }

  #ctaGroup{
    width: min(86%, var(--ipadP-cta-width)) !important;
    max-width: var(--ipadP-cta-width) !important;
    gap: var(--ipadP-cta-gap) !important;
    margin-top: 8px !important;
  }

  #ctaGroup .btn{
    min-height: var(--ipadP-cta-minh) !important;
    font-size: var(--ipadP-cta-font) !important;
    padding: 14px 18px !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .assistant{
    gap: var(--ipadP-assist-gap) !important;
    margin-top: var(--ipadP-assist-mt) !important;

    --ga-fab-col-w: var(--ipadP-assist-size);
  }

  .bot-fab,
  .mic{
    width: var(--ipadP-assist-size) !important;
    height: var(--ipadP-assist-size) !important;
  }

  .site-footer{
    width: min(88%, var(--ipadP-footer-width)) !important;
    font-size: var(--ipadP-footer-font) !important;
    padding: 14px 18px !important;
    border-radius: 18px !important;
    margin-top: var(--ipadP-footer-mt) !important;
  }

   /* TOOLTIP — SCALE + MOVE RIGHT (SAFE) */
  .bot-wrap .bot-help-tooltip{
    transform: scale(1.3) translate(-150px, 90px);  /*moves right - moves up*/
    transform-origin: top left !important;
  }


  /* =========================
     MENU / LANGUAGE
     ========================= */
  #dropdownMenu.dropdown-menu{
    top: 84px !important;
    right: 16px !important;
    width: var(--ipadP-menu-width) !important;
    border-radius: 16px !important;
  }

  #dropdownMenu a{
    font-size: 17px !important;
    padding: 12px 12px !important;
  }

  #languageSubmenu.submenu-options,
  body > #languageSubmenu.submenu-options{
    width: var(--ipadP-lang-width) !important;
    max-height: 72vh !important;
  }

  #languageSubmenu a{
    font-size: 16px !important;
    padding: 12px 12px !important;
  }

  /* =========================
     ENQUIRIES — TABLET PORTRAIT
     ========================= */
  #chatPanel.chat{
    width: var(--ipadP-chat-w) !important;
    max-width: 760px !important;
    max-height: calc(100dvh - 30px) !important;
    border-radius: 28px !important;
  }

  #chatPanel .chat-header{
    padding: 14px 16px 12px !important;
  }

  #chatPanel .chat-title{
    font-size: var(--ipadP-chat-title) !important;
    gap: 10px !important;
  }

  #chatPanel .chat-title img{
    width: 28px !important;
    height: 28px !important;
  }

  #chatPanel .lang-hint{
    font-size: 17px !important;
    line-height: 1.35 !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
  }

  #chatPanel .chat-body,
  #chatBody{
    font-size: var(--ipadP-chat-text) !important;
  }

  #chatPanel .bubble{
    font-size: var(--ipadP-chat-text) !important;
    line-height: 1.4 !important;
    padding: 16px 18px !important;
    border-radius: 20px !important;
  }

  #chatPanel #chatText{
    height: var(--ipadP-input-h) !important;
    font-size: var(--ipadP-input-font) !important;
    padding: 0 16px !important;
    border-radius: 18px !important;
  }

  #chatPanel .send{
    height: var(--ipadP-input-h) !important;
    min-width: var(--ipadP-send-minw) !important;
    font-size: var(--ipadP-input-font) !important;
    border-radius: 18px !important;
    padding: 0 20px !important;
  }

  #chatPanel .tts-btn{
    height: var(--ipadP-tts-btn-h) !important;
    font-size: var(--ipadP-tts-btn-font) !important;
    padding: 0 18px !important;
    border-radius: 18px !important;
  }

  #chatPanel #nsSpeedBadge{
    min-width: var(--ipadP-speed-w) !important;
    height: var(--ipadP-speed-h) !important;
    font-size: var(--ipadP-speed-font) !important;
    border-radius: 999px !important;
  }

  #chatPanel .chat-disclaimer,
  #chatPanel .tts-notes{
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  .suggestions-sheet{
    width: min(92vw, 760px) !important;
    max-height: 78vh !important;
    border-radius: 22px !important;
  }
}


/* =====================================================
   TABLET PORTRAIT — MOVE FRONTEND CONTENT UP
   Lenovo / iPad portrait
   ===================================================== */
@media (min-width: 680px) and (max-width: 1024px) and (orientation: portrait){

  .card{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: 10px !important;

    /* tighten the vertical stack */
    grid-template-rows:
      auto   /* top row */
      auto   /* bot */
      auto   /* intro */
      auto   /* CTA */
      auto   /* assistant */
      auto !important;
  }

  .brand-top-left{
    margin-top: 4px !important;
  }

  .menu-toggle{
    margin-top: 4px !important;
  }

  .bot-large{
    width: 440px !important;
    margin-top: -70px !important;
  }

  #introBlock{
    width: min(84%, 560px) !important;
    max-width: 560px !important;
    font-size: 28px !important;
    line-height: 1.22 !important;
    margin-top: -46px !important;
    margin-bottom: 2px !important;
  }

  #ctaGroup{
    width: min(84%, 560px) !important;
    max-width: 560px !important;
    gap: 20px !important;
    margin-top: -2px !important;
  }

  #ctaGroup .btn{
    min-height: 62px !important;
    font-size: 28px !important;
    padding: 10px 18px !important;
    border-radius: 18px !important;
  }

  .assistant{
    gap: 18px !important;
    margin-top: 2px !important;

    --ga-fab-col-w: 110px;
  }

  .bot-fab,
  .mic{
    width: 110px !important;
    height: 110px !important;
  }

  .site-footer{
    width: min(95%, 560px) !important;
    max-width: 560px !important;
    margin-top: 2px !important;
    padding: 6px 10px !important;
    font-size: 15px !important;
    line-height: 1.22 !important;
    border-radius: 16px !important;
  }
}



/* =====================================================
   TABLET PORTRAIT — MENU ONLY
   Lenovo / iPad portrait
   Keep menu compact and anchored near hamburger
   ===================================================== */
@media (min-width: 680px) and (max-width: 1024px) and (orientation: portrait){

  /* main dropdown */
  #dropdownMenu.dropdown-menu{
    top: 76px !important;
    right: 14px !important;

    width: 210px !important;
    max-width: 210px !important;
    min-width: 210px !important;

    height: auto !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 14px 12px 12px !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.20) !important;
    z-index: 1000000 !important;
  }

  /* links inside main menu */
  #dropdownMenu a{
    font-size: 20px !important;
    line-height: 1.2 !important;
    padding: 10px 8px !important;
  }

  /* the close X in the main menu */
  #dropdownMenu .close-main-menu{
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  /* keep the language row neat */
  #menuLanguageToggle{
    gap: 8px !important;
    align-items: center !important;
  }

  /* language panel */
  #languageSubmenu.submenu-options,
  body > #languageSubmenu.submenu-options{
    width: 240px !important;
    max-width: 240px !important;
    min-width: 240px !important;

    max-height: 62vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    border-radius: 18px !important;
    padding: 42px 10px 10px !important;
    z-index: 1000001 !important;
  }

  #languageSubmenu a{
    font-size: 20px !important;
    padding: 10px 10px !important;
    gap: 10px !important;
  }

  #languageSubmenu img{
    width: 20px !important;
    height: 20px !important;
  }

  #languageSubmenu .close-language{
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }
}



/* =====================================================
   TABLET PORTRAIT — MODALS (About / Contact / Help)
   Make content larger + wider bubble
   ===================================================== */
@media (min-width: 680px) and (max-width: 1024px) and (orientation: portrait){

  /* modal container (the white box) */
  .modal-content{
    width: min(88%, 620px) !important;
    max-width: 620px !important;

    padding: 22px 20px 18px !important;
    border-radius: 20px !important;

    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  /* headings inside modal */
  .modal-content h2,
  .modal-content h3{
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  /* paragraph text */
  .modal-content p{
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }

  /* links */
  .modal-content a{
    font-size: 16px !important;
  }

  /* close button (top right X) */
  .modal-content .close-modal{
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    top: 10px !important;
    right: 10px !important;
  }

  /* overlay centering (extra polish) */
  .modal-overlay{
    padding: 20px !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* =====================================================
   LENOVO / TABLET PORTRAIT — ENQUIRIES
   Match the mobile portrait layout more closely
   ===================================================== */
@media (min-width: 680px) and (max-width: 1024px) and (orientation: portrait){

  /* PANEL */
  #chatPanel.chat{
    width: min(96vw, 740px) !important;
    max-width: 740px !important;
    height: calc(100dvh - 18px) !important;
    max-height: calc(100dvh - 18px) !important;
    border-radius: 26px !important;

    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* HEADER */
  #chatPanel .chat-header{
    flex: 0 0 auto !important;
    padding: 12px 14px 10px !important;
  }

  #chatPanel .chat-title{
    font-size: 22px !important;
    gap: 8px !important;
  }

  #chatPanel .chat-title img{
    width: 24px !important;
    height: 24px !important;
  }

  #chatPanel .lang-hint{
    margin-top: 8px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    border-radius: 14px !important;
  }

  #chatClose,
  #chatPanel #chatClose,
  #chatPanel button.chat-close.close-modal{
    top: 10px !important;
    right: 10px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 20px !important;
    border-radius: 10px !important;
  }

  /* CHAT BODY */
  #chatPanel .chat-body,
  #chatBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 12px 14px 8px !important;
  }

  #chatPanel .msg{
    margin: 0 0 12px 0 !important;
  }

  #chatPanel .bubble{
    border-radius: 20px !important;
    padding: 16px 18px !important;
    font-size: 18px !important;
    line-height: 1.4 !important;
  }

  #chatPanel .msg.bot .bubble{
    max-width: 100% !important;
  }

  #chatPanel .msg.bot .bubble a.ns-intake-cta{
    font-size: 16px !important;
    padding: 10px 18px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
  }

  /* INPUT ROW */
  #chatPanel #chatForm,
  #chatPanel .chat-input{
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px 8px !important;
  }

  #chatPanel #chatText{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 56px !important;
    padding: 0 16px !important;
    font-size: 18px !important;
    border-radius: 18px !important;
  }

  /* keep SEND button blue and mobile-like */
  #chatPanel .send{
    flex: 0 0 auto !important;
    height: 56px !important;
    min-width: 128px !important;
    padding: 0 20px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    border-radius: 18px !important;
    background: #2d5196 !important;
    color: #fff !important;
  }

  /* RESET CHAT */
  #chatPanel #resetChat{
    flex: 0 0 auto !important;
    font-size: 16px !important;
    margin: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* TTS BAR */
  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    flex: 0 0 auto !important;
    padding: 8px 14px 10px !important;
  }

  /* top row inside TTS area: Audio Controls + info + Guided Questions */
  #chatPanel #ttsBar .tts-bar-head{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
  }

  #chatPanel #ttsBar .tts-label{
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 26px !important;
    border-radius: 999px !important;
    flex: 0 0 48px !important;
  }

    /* =========================
     GUIDED QUESTIONS (match image 1)
     ========================= */
  #chatPanel .suggestions-toggle{
    height: 40px !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    font-weight: 900 !important;

    border-radius: 999px !important;

    background: #d9efe4 !important;              /* soft green fill */
    color: #2e6f5b !important;

    border: 2px solid #5aa889 !important;

    box-shadow: 
      0 3px 0 rgba(0,0,0,0.12),                  /* subtle bottom depth */
      inset 0 1px 0 rgba(255,255,255,0.6) !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: normal !important;
    line-height: 1.2 !important;
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
  }

  /* second row: Play / Stop / Resume / 0.70x */
  #chatPanel #ttsBar .tts-controls-row{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  #chatPanel #ttsBar .tts-btn{
    height: 44px !important;
    padding: 0 18px !important;
    font-size: 16px !important;
    border-radius: 18px !important;
    line-height: normal !important;
  }


  #chatPanel #nsSpeedBadge{
    width: 76px !important;
    min-width: 76px !important;
    height: 42px !important;
    font-size: 16px !important;
    border-radius: 999px !important;
  }

  /* NOTES + DISCLAIMER */
  #chatPanel .tts-notes{
    padding: 0 14px 6px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
  }

  #chatPanel .chat-disclaimer{
    padding: 0 14px 10px !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
  }

  /* INFO POPUP */
  #chatPanel #ttsInfoPopup{
    max-width: min(390px, 62vw) !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    border-radius: 16px !important;
  }
}




/* =====================================================
   LENOVO / TABLET PORTRAIT — ENQUIRIES FINAL TIGHTENING
   Center panel + make bottom controls fit like mobile portrait
   ===================================================== */
@media (min-width: 680px) and (max-width: 1024px) and (orientation: portrait){

  /* =========================
     CENTER THE PANEL
     ========================= */
  #chatBox{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
  }

  #chatPanel.chat{
    width: min(96vw, 720px) !important;
    max-width: 720px !important;
    margin: 0 auto !important;
    left: auto !important;
    right: auto !important;
  }

  /* =========================
     HEADER / BODY BALANCE
     ========================= */
  #chatPanel .chat-body,
  #chatBody{
    padding: 12px 12px 6px !important;
  }

  #chatPanel .bubble{
    font-size: 17px !important;
    line-height: 1.35 !important;
    padding: 14px 16px !important;
  }

  /* =========================
     INPUT ROW
     ========================= */
  #chatPanel #chatForm,
  #chatPanel .chat-input{
    padding: 8px 12px 6px !important;
    gap: 10px !important;
  }

  #chatPanel #chatText{
    height: 54px !important;
    font-size: 17px !important;
    border-radius: 18px !important;
    padding: 0 16px !important;
  }

  #chatPanel .send{
    height: 54px !important;
    min-width: 120px !important;
    font-size: 17px !important;
    border-radius: 18px !important;
    padding: 0 18px !important;
    background: #2d5196 !important;
    color: #fff !important;
  }

  #chatPanel #resetChat{
    font-size: 20px !important;
    line-height: 1.15 !important;
    padding: 6px 0 !important;
    margin: 0 !important;
  }

  /* =========================
     TTS BAR — MATCH MOBILE FEEL
     ========================= */
  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    padding: 8px 10px 8px !important;
  }

  /* first row: Audio Controls + info; Guided Questions on its own row */
  #chatPanel #ttsBar .tts-bar-head{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
  }

  #chatPanel #ttsBar .tts-label{
    font-size: 14px !important;
    line-height: 1.05 !important;
    white-space: normal !important;
  }

  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    font-size: 22px !important;
    flex: 0 0 42px !important;
  }

  #chatPanel .suggestions-toggle{
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    border-radius: 23px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* second row: Play Stop Resume 0.70x */
  #chatPanel #ttsBar .tts-controls-row{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    margin-top: 0 !important;
    width: 100% !important;
  }

  #chatPanel #ttsBar .tts-btn{
    height: 40px !important;          /* ⬆️ taller */
    padding: 0 16px !important;       /* ⬆️ wider */
    font-size: 16px !important;       /* ⬆️ clearer text */
    border-radius: 999px !important;
  }


  /* =========================
     DISCLAIMER
     ========================= */
  #chatPanel .tts-notes{
    padding: 0 12px 4px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  #chatPanel .chat-disclaimer{
    padding: 0 12px 8px !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
}



/* =====================================================
   LENOVO PORTRAIT — GUIDED QUESTIONS BIGGER TEXT
   MUST BE AT VERY END OF styles.css
   ===================================================== */
@media (min-width: 680px) and (max-width: 1024px) and (orientation: portrait){

  html body .suggestions-sheet .suggestions-sheet-title{
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
  }

  html body .suggestions-sheet .sq-scroll-note{
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  html body .suggestions-sheet .sugg-tab{
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    padding: 12px 10px !important;
  }

  html body .suggestions-sheet .chip{
    font-size: 17px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    padding: 16px 16px !important;
  }
}



/* =====================================================
   ENQUIRIES — MODE COLOURS
   Participant = blue | Provider = green | General = brown
   ALL DEVICES
   Paste OUTSIDE any media query, near end of styles.css
   ===================================================== */

/* ---------- DEFAULT / PARTICIPANT ---------- */
#chatPanel.mode-participant{
  --ns-accent: #2d5196;
  --ns-accent-rgb: 45, 81, 150;
  --ns-accent-dark: #123366;
  --ns-bubble-bg: #e7f0ff;
  --ns-bubble-text: #0b2f5a;
}



/* ---------- PROVIDER (DARKER GREEN) ---------- */
#chatPanel.mode-provider{
  --ns-accent: #1f7a5a;
  --ns-accent-rgb: 31, 122, 90;
  --ns-accent-dark: #155a42;
  --ns-bubble-bg: #e3f3ec;
  --ns-bubble-text: #082f22;
}

/* ---------- GENERAL ---------- */
#chatPanel.mode-general{
  --ns-accent: #8b5e3c;
  --ns-accent-rgb: 139, 94, 60;
  --ns-accent-dark: #6f472b;
  --ns-bubble-bg: #f5ede6;
  --ns-bubble-text: #4f3422;
}

/* ---------- PANEL BORDER ---------- */
#chatPanel.mode-participant,
#chatPanel.mode-provider,
#chatPanel.mode-general{
  border-color: var(--ns-accent) !important;
}

/* ---------- TITLE ---------- */
#chatPanel.mode-participant .chat-title,
#chatPanel.mode-provider .chat-title,
#chatPanel.mode-general .chat-title{
  color: var(--ns-accent) !important;
}

/* ---------- MAIN BOT BUBBLE ---------- */
#chatPanel.mode-participant .msg.bot .bubble,
#chatPanel.mode-provider .msg.bot .bubble,
#chatPanel.mode-general .msg.bot .bubble{
  background: var(--ns-bubble-bg) !important;
  border: 2px solid var(--ns-accent) !important;
  color: var(--ns-bubble-text) !important;
}

/* ---------- INPUT BORDER ---------- */
#chatPanel.mode-participant #chatText,
#chatPanel.mode-provider #chatText,
#chatPanel.mode-general #chatText{
  border-color: var(--ns-accent) !important;
}

/* ---------- SEND BUTTON stays blue ---------- */
#chatPanel .send{
  background: #2d5196 !important;
  color: #fff !important;
}

/* ---------- SPEED BADGE ---------- */
#chatPanel.mode-participant #nsSpeedBadge,
#chatPanel.mode-provider #nsSpeedBadge,
#chatPanel.mode-general #nsSpeedBadge{
  border-color: var(--ns-accent) !important;
  color: var(--ns-accent) !important;
}

/* ---------- CTA INSIDE BUBBLE ---------- */
#chatPanel.mode-participant .ns-intake-cta,
#chatPanel.mode-provider .ns-intake-cta,
#chatPanel.mode-general .ns-intake-cta{
  color: var(--ns-accent) !important;
  border-color: var(--ns-accent) !important;
  background: #ffffff !important;
}

/* ---------- INFO POPUP ---------- */
#chatPanel.mode-participant #ttsInfoPopup,
#chatPanel.mode-provider #ttsInfoPopup,
#chatPanel.mode-general #ttsInfoPopup,
#chatPanel.mode-participant .tts-info-popup,
#chatPanel.mode-provider .tts-info-popup,
#chatPanel.mode-general .tts-info-popup{
  border-color: var(--ns-accent) !important;
}

#chatPanel.mode-participant #resetChat,
#chatPanel.mode-provider #resetChat,
#chatPanel.mode-general #resetChat{
  border-color: color-mix(in srgb, var(--ns-accent) 35%, #8f8f8f) !important;

  }
}


/* =====================================================
   LENOVO PORTRAIT — LOCK ENQUIRIES HEIGHT
   Keep bottom controls always visible
   ===================================================== */
@media (min-width: 680px) and (max-width: 1024px) and (orientation: portrait){

  /* lock the whole enquiries card */
  #chatPanel.chat{
    display: flex !important;
    flex-direction: column !important;

    height: 64vh !important;
    max-height: 64vh !important;
    min-height: 64vh !important;

    overflow: hidden !important;
  }

  /* header stays visible */
  #chatPanel .chat-header{
    flex: 0 0 auto !important;
  }

  /* only the messages area scrolls */
  #chatPanel .chat-body,
  #chatBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    padding-bottom: 8px !important;
  }

  /* input row always visible */
  #chatPanel #chatForm,
  #chatPanel .chat-input{
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 2 !important;
  }

  /* reset chat always visible */
  #chatPanel #resetChat{
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* tts bar always visible */
  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 2 !important;
  }

  /* disclaimer always visible */
  #chatPanel .chat-disclaimer,
  #chatPanel .tts-notes{
    flex: 0 0 auto !important;
  }
}


/* =====================================================
   LENOVO PORTRAIT — INFO POPUP
   ===================================================== */
@media (min-width: 680px) and (max-width: 1024px) and (orientation: portrait){

  /* anchor point for the popup */
  #chatPanel #ttsBar .tts-bar-head{
    position: relative !important;
  }

  /* popup bubble */
  #chatPanel #ttsInfoPopup{
  position: absolute !important;

  top: -158px !important;                 /* move bubble above the info button */
  left: 0 !important;

  width: min(660px, 90vw) !important;   /* make it wider */
  max-width: min(660px, 90vw) !important;

  background: #ffffff !important;
  border: 2px solid var(--ns-accent, #2d5196) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;

  font-size: clamp(20px, 3.2vw, 12.5px) !important;
  line-height: 1.35 !important;
  color: #073b72 !important;

  box-shadow: 0 12px 24px rgba(0,0,0,0.18) !important;
  z-index: 100 !important;
}

  /* speech-bubble pointer */
  #chatPanel #ttsInfoPopup::before{
    content: "" !important;
    position: absolute !important;
    left: 120px !important;
    bottom: -10px !important;

    width: 18px !important;
    height: 18px !important;

    background: #f2f2f2 !important;
    border-left: 2px solid var(--ns-accent, #2d5196) !important;
    border-bottom: 2px solid var(--ns-accent, #2d5196) !important;

    transform: rotate(-45deg) !important;
  }
}





/* =====================================================
   DOCUMENT PAGES — TOP BANNER LIKE REFERENCE IMAGE
   ===================================================== */
body.document-page{
  background: #e9f3f0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.document-page .policy-banner{
  width: 100vw !important;
  height: 155px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

body.document-page .policy-banner img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: left center !important;
  display: block !important;
}

body.document-page .policy-page{
  padding: 10px 16px 40px !important;
  background: transparent !important;
}

body.document-page .policy-container{
  max-width: 900px !important;
  margin: 0 auto !important;
}

body.document-page .contact-buttons{
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}

body.document-page .back-home-btn{
  display: inline-block !important;
  font-size: 18px !important;
}



/* =====================================================
   DOCUMENT PAGES — RESTORE SCROLL
   ===================================================== */
html:has(body.document-page),
body.document-page{
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.document-page .policy-page,
body.document-page .policy-container{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}



/* =====================================================
   LENOVO PORTRAIT — Guided Questions fit nicely
   ===================================================== */
@media (min-width: 680px) and (max-width: 820px)
and (min-height: 900px) and (orientation: portrait){

  #chatPanel .suggestions-toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    margin-top: 6px !important;

    font-size: 15px !important;
    font-weight: 980 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
  }
}













/* =============********************************************************==============
   LENOVO TABLET LANDSCAPE (1113 x 573)
   Match mobile-landscape look, scaled up more
   Put AFTER broad landscape blocks
   and BEFORE desktop quarter/half rules
   ===================================================== */
@media (min-width: 1080px) and (max-width: 1145px)
and (min-height: 540px) and (max-height: 620px)
and (orientation: landscape)
and (hover: none)
and (pointer: coarse){

  /* =========================
     LANDING PAGE SHELL
     ========================= */
  .card{
    grid-template-columns: 170px minmax(0, 1fr) 170px !important;
    grid-template-rows: auto auto auto auto !important;
    column-gap: 18px !important;
    row-gap: 10px !important;

    padding: 8px 18px 10px !important;
    align-items: start !important;
    justify-items: stretch !important;
  }

  /* =========================
   TOP ROW
   ========================= */
.brand-top-left img{
  width: 170px !important;   /* increase this */
  height: auto !important;
}

.brand-top-left{
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  margin-top: 15px !important;
  margin-left: 8px !important;
}

.menu-toggle{
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;

  position: relative !important;
  top: 14px !important;          /* move DOWN */
  margin-top: 0 !important;      /* neutralise old margin rules */
  margin-right: 8px !important;

  font-size: 65px !important;
  line-height: 1 !important;
  transform: none !important;
}

.menu-toggle::before{
  font-size: 20px !important;
  margin-bottom: 0 !important;
}

  /* =========================
     INTRO
     ========================= */
  #introBlock{
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    justify-self: center !important;
    align-self: start !important;

    width: min(100%, 590px) !important;
    max-width: 590px !important;

    margin: 90px auto 0 !important;
    padding: 0 !important;

    text-align: center !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  /* keep inner text flowing nicely */
  #introBlock p,
  #introBlock div{
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #introBlock span,
  #introBlock strong,
  #introBlock b{
    display: inline !important;
    white-space: normal !important;
  }

  /* =========================
     LARGE BOT — LEFT
     ========================= */
  .bot-wrap{
  grid-column: 1 !important;
  grid-row: 2 / 4 !important;

  justify-self: start !important;
  align-self: center !important;

  margin-left: -20px !important;
  transform: translateY(50px) !important;
}

  .bot-wrap .bot-large{
  width: 320px !important;
}

  /* =========================
     CTA BUTTONS — CENTER
     ========================= */
  #ctaGroup{
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: center !important;

    width: min(100%, 700px) !important;
    max-width: 600px !important;

    gap: 20px !important;
    margin-top: -36px !important;
  }

  #ctaGroup .btn{
    width: 100% !important;
    min-height: 58px !important;
    padding: 10px 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 32px !important;
    font-weight: 800 !important;
    border-radius: 15px !important;
  }

  /* =========================
     ASSISTANT BUTTONS — SIDE BY SIDE
     ========================= */
  .assistant{
  grid-column: 3 !important;
  grid-row: 2 / 4 !important;
  justify-self: start !important;   /* was center */
  align-self: end !important;       /* was center */

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 10px !important;
  margin-top: 0 !important;
  margin-left: -35px !important;    /* move left */
  transform: translateY(-40px) !important;  /* move down */

  --ga-fab-col-w: 100px;
}

  /* =========================
   ASSISTANT BUTTON SIZE
   ========================= */
 .assistant .bot-fab,
 .assistant .mic{
  width: 100px !important;
  height: 100px !important;
}

 .assistant .bot-fab img,
 .assistant .mic img{
  width: 80% !important;
  height: 80% !important;
}

  /* =========================
     FOOTER
     ========================= */
  .site-footer{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
    justify-self: center !important;

    width: min(980px, 94%) !important;
    margin-top: 44px !important;

    padding: 10px 16px !important;
    gap: 3px !important;

    font-size: 15px !important;
    line-height: 1.2 !important;
    border-radius: 15px !important;
  }

  /* TOOLTIP — SCALE + MOVE RIGHT (SAFE) */
  .bot-wrap .bot-help-tooltip{
    transform: scale(1.2) translate(70px, -80px);  /*moves right - moves up*/
    transform-origin: top left !important;

  }

}



/* =====================================================
   LENOVO TABLET LANDSCAPE — MENU ONLY
   Lenovo / iPad landscape
   Keep menu compact and anchored near hamburger
   ===================================================== */
@media (min-width: 1080px) and (max-width: 1145px)
and (min-height: 540px) and (max-height: 620px)
and (orientation: landscape)
and (hover: none)
and (pointer: coarse){


  /* main dropdown */
  #dropdownMenu.dropdown-menu{
    top: 76px !important;
    right: 14px !important;

    width: 250px !important;
    max-width: 250px !important;
    min-width: 250px !important;

    height: auto !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 14px 12px 12px !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.20) !important;
    z-index: 1000000 !important;
  }

  /* links inside main menu */
  #dropdownMenu a{
    font-size: 20px !important;
    line-height: 1.2 !important;
    padding: 10px 8px !important;
  }

  /* the close X in the main menu */
  #dropdownMenu .close-main-menu{
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  /* keep the language row neat */
  #menuLanguageToggle{
    gap: 8px !important;
    align-items: center !important;
  }

  /* language panel */
  #languageSubmenu.submenu-options,
  body > #languageSubmenu.submenu-options{
    width: 240px !important;
    max-width: 240px !important;
    min-width: 240px !important;

    max-height: 62vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    border-radius: 18px !important;
    padding: 42px 10px 10px !important;
    z-index: 1000001 !important;
  }

  #languageSubmenu a{
    font-size: 20px !important;
    padding: 10px 10px !important;
    gap: 10px !important;
  }

  #languageSubmenu img{
    width: 20px !important;
    height: 20px !important;
  }

  #languageSubmenu .close-language{
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }
}



/* =====================================================
   LENOVO TABLET LANDSCAPE — MODALS (About / Contact / Help)
   Make content larger + wider bubble
   ===================================================== */
@media (min-width: 1080px) and (max-width: 1145px)
and (min-height: 540px) and (max-height: 620px)
and (orientation: landscape)
and (hover: none)
and (pointer: coarse){


  /* modal container (the white box) */
  .modal-content{
    width: min(88%, 620px) !important;
    max-width: 620px !important;

    padding: 22px 20px 18px !important;
    border-radius: 20px !important;

    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  /* headings inside modal */
  .modal-content h2,
  .modal-content h3{
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  /* paragraph text */
  .modal-content p{
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }

  /* links */
  .modal-content a{
    font-size: 16px !important;
  }

  /* close button (top right X) */
  .modal-content .close-modal{
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
    top: 10px !important;
    right: 10px !important;
  }

  /* overlay centering (extra polish) */
  .modal-overlay{
    padding: 20px !important;
    align-items: center !important;
    justify-content: center !important;
  }
}




/* =====================================================
   LENOVO TABLET LANDSCAPE — ENQUIRIES PAGE
   Match target compact floating card
   ===================================================== */
@media (min-width: 1080px) and (max-width: 1145px)
and (min-height: 540px) and (max-height: 620px)
and (orientation: landscape)
and (hover: none)
and (pointer: coarse){

  /* =========================
     PANEL
     ========================= */
  #chatPanel.chat{
    width: min(900px, calc(100vw - 40px)) !important;
    height: 550px !important;
    max-height: 550px !important;
    min-height: 550px !important;

    inset: auto !important;
    margin: -5px auto 0 !important;

    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;

    border-radius: 24 !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  /* place chat wrapper nicely instead of full-screen stretch */
  #chatBox{
    inset: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 18px !important;
    pointer-events: none !important;
  }

  #chatPanel.chat{
    pointer-events: auto !important;
  }

  /* =========================
     HEADER
     ========================= */
  #chatPanel .chat-header{
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    z-index: 10 !important;

    padding: 10px 16px 8px !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  }

  #chatPanel .chat-title{
    font-size: 20px !important;
    line-height: 1.1 !important;
    gap: 8px !important;
  }

  #chatPanel .chat-title{
    gap: 10px !important;
  }

  #chatPanel .chat-title img,
  #chatPanel .chat-header .chat-title img,
  #chatPanel.chat .chat-header .chat-title img{
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;

    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;

    flex: 0 0 32px !important;
    display: block !important;
    object-fit: contain !important;
  }

  #chatPanel .lang-hint{
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    padding: 8px 12px !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
    border-radius: 10px !important;
    background: #eef2f6 !important;
  }

  #chatPanel .chat-close{
    top: 10px !important;
    right: 10px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    border-radius: 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* =========================
     CHAT BODY
     ========================= */
  #chatPanel .chat-body,
  #chatBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    padding: 10px 14px 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    background: transparent !important;
  }

  #chatPanel .msg{
    margin: 0 0 10px 0 !important;
  }

  #chatPanel .bubble{
    font-size: 20px !important;
    line-height: 1.34 !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #chatPanel .msg.bot .bubble{
    width: 100% !important;
    max-width: 100% !important;
  }

  #chatPanel .ns-intake-cta{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 8px 16px !important;
    margin: 0 0 10px 0 !important;

    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    border-radius: 14px !important;
    white-space: nowrap !important;
  }

  /* =========================
     INPUT ROW
     ========================= */
  #chatPanel #chatForm,
  #chatPanel .chat-input{
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 10 !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 8px 14px 4px !important;
    margin: 0 !important;

    background: #fff !important;
    box-sizing: border-box !important;
    border-top: 0 !important;
  }

  #chatPanel #chatText{
    min-width: 0 !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;

    padding: 0 14px !important;
    font-size: 20px !important;
    line-height: normal !important;

    border-radius: 16px !important;
    box-sizing: border-box !important;

    display: block !important;
    margin: 0 !important;
  }

  #chatPanel .send{
    height: 44px !important;
    min-width: 110px !important;

    padding: 0 18px !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: normal !important;

    border-radius: 16px !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* =========================
     RESET CHAT
     ========================= */
#chatPanel #resetChat{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: sticky !important;
  bottom: 65px !important; /* sits just above TTS */

  width: calc(100% - 20px) !important;
  margin: -16px 10px 4px !important;
  padding: 2px 0 !important;

  text-align: center !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  border-radius: 6px !important;

  background: #e9e9e9 !important;
  border: 1px solid #9a9a9a !important;
  color: #222 !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6) !important;

  z-index: 56 !important;

  }

  /* =========================
     TTS BAR
     ========================= */
  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    flex: 0 0 auto !important;

    position: relative !important;
    bottom: auto !important;
    z-index: 12 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;

    padding: 8px 14px 4px !important;
    margin: 0 !important;

    background: #fff !important;
    border-top: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  #chatPanel #ttsBar .tts-bar-head{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
  }

  #chatPanel #ttsBar .tts-label{
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;

    font-size: 20px !important;
    line-height: 1 !important;

    flex: 0 0 38px !important;
    padding: 0 !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #ffffff !important;
    border: 2px solid #7a7a7a !important;
    color: #222 !important;
    box-shadow: 0 6px 0 rgba(0,0,0,0.15) !important;
  }

  #chatPanel .suggestions-toggle{
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    padding: 8px 16px !important;

    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    text-align: center !important;
    height: auto !important;
    min-height: 44px !important;

    border-radius: 22px !important;

    background: linear-gradient(to bottom, #e6f7ef, #cfeee0) !important;
    border: 2px solid #6bbf9c !important;
    color: #124734 !important;
    box-shadow: 0 8px 0 rgba(0,0,0,0.15) !important;
  }

  #chatPanel #ttsBar .tts-controls-row{
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  width: 100% !important;

  margin: 0 !important;
  flex: 0 0 auto !important;
}

  #chatPanel #ttsBar .tts-btn{
    height: 44px !important;
    padding: 0 18px !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 44px !important;
    border-radius: 16px !important;
    white-space: nowrap !important;
  }

/* TTS BAR LEFT ALIGN FIX */
#chatPanel #ttsBar,
#chatPanel .tts-bar{
  justify-content: flex-start !important;
  gap: 6px !important;
}

/* LEFT GROUP PULL */
#chatPanel #ttsBar .tts-bar-head{
  margin-left: 0px !important;
}

#chatPanel .suggestions-toggle{
  margin-left: 0 !important;
}

/* ENSURE BUTTON ROW DOES NOT PUSH RIGHT */
#chatPanel #ttsBar .tts-controls-row{
  margin-left: 0 !important;
}

  #chatPanel #nsSpeedBtn{
    margin-left: 0 !important;
    position: static !important;
    transform: none !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  #chatPanel #nsSpeedBadge{
    width: 68px !important;
    min-width: 68px !important;
    height: 44px !important;
    min-height: 44px !important;

    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 44px !important;

    transform: none !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
  }

  /* =========================
     NOTES / DISCLAIMER
     ========================= */
  #chatPanel .tts-notes{
    display: none !important;
  }

  #chatPanel .chat-disclaimer{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    bottom: auto !important;
    z-index: 10 !important;

    padding: 4px 14px 10px !important;
    margin: 0 !important;

    font-size: 15px !important;
    line-height: 1.18 !important;
    text-align: center !important;

    background: #fff !important;
    flex: 0 0 auto !important;
  }
}






/* =====================================================
   LENOVO LANDSCAPE — GUIDED QUESTIONS BIGGER TEXT
   MUST BE AT VERY END OF styles.css
   ===================================================== */
@media (min-width: 1080px) and (max-width: 1145px)
and (min-height: 540px) and (max-height: 620px)
and (orientation: landscape)
and (hover: none)
and (pointer: coarse){

  html body .suggestions-sheet .suggestions-sheet-title{
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
  }

  html body .suggestions-sheet .sq-scroll-note{
    font-size: 19px !important;
    line-height: 1.35 !important;
  }

  html body .suggestions-sheet .sugg-tab{
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    padding: 12px 10px !important;
  }

  html body .suggestions-sheet .chip{
    font-size: 20px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    padding: 16px 16px !important;
  }



/* =====================================================
   LENOVO TABLET LANDSCAPE - ENQUIRIES — MODE COLOURS
   Participant = blue | Provider = green | General = brown
   ALL DEVICES
   Paste OUTSIDE any media query, near end of styles.css
   ===================================================== */

/* ---------- DEFAULT / PARTICIPANT ---------- */
#chatPanel.mode-participant{
  --ns-accent: #2d5196;
  --ns-accent-rgb: 45, 81, 150;
  --ns-accent-dark: #123366;
  --ns-bubble-bg: #e7f0ff;
  --ns-bubble-text: #0b2f5a;
}



/* ---------- PROVIDER (DARKER GREEN) ---------- */
#chatPanel.mode-provider{
  --ns-accent: #1f7a5a;
  --ns-accent-rgb: 31, 122, 90;
  --ns-accent-dark: #155a42;
  --ns-bubble-bg: #e3f3ec;
  --ns-bubble-text: #082f22;
}

/* ---------- GENERAL ---------- */
#chatPanel.mode-general{
  --ns-accent: #8b5e3c;
  --ns-accent-rgb: 139, 94, 60;
  --ns-accent-dark: #6f472b;
  --ns-bubble-bg: #f5ede6;
  --ns-bubble-text: #4f3422;
}

/* ---------- PANEL BORDER ---------- */
#chatPanel.mode-participant,
#chatPanel.mode-provider,
#chatPanel.mode-general{
  border-color: var(--ns-accent) !important;
}

/* ---------- TITLE ---------- */
#chatPanel.mode-participant .chat-title,
#chatPanel.mode-provider .chat-title,
#chatPanel.mode-general .chat-title{
  color: var(--ns-accent) !important;
}

/* ---------- MAIN BOT BUBBLE ---------- */
#chatPanel.mode-participant .msg.bot .bubble,
#chatPanel.mode-provider .msg.bot .bubble,
#chatPanel.mode-general .msg.bot .bubble{
  background: var(--ns-bubble-bg) !important;
  border: 2px solid var(--ns-accent) !important;
  color: var(--ns-bubble-text) !important;
}

/* ---------- INPUT BORDER ---------- */
#chatPanel.mode-participant #chatText,
#chatPanel.mode-provider #chatText,
#chatPanel.mode-general #chatText{
  border-color: var(--ns-accent) !important;
}

/* ---------- SEND BUTTON stays blue ---------- */
#chatPanel .send{
  background: #2d5196 !important;
  color: #fff !important;
}

/* ---------- SPEED BADGE ---------- */
#chatPanel.mode-participant #nsSpeedBadge,
#chatPanel.mode-provider #nsSpeedBadge,
#chatPanel.mode-general #nsSpeedBadge{
  border-color: var(--ns-accent) !important;
  color: var(--ns-accent) !important;
}

/* ---------- CTA INSIDE BUBBLE ---------- */
#chatPanel.mode-participant .ns-intake-cta,
#chatPanel.mode-provider .ns-intake-cta,
#chatPanel.mode-general .ns-intake-cta{
  color: var(--ns-accent) !important;
  border-color: var(--ns-accent) !important;
  background: #ffffff !important;
}

/* ---------- INFO POPUP ---------- */
#chatPanel.mode-participant #ttsInfoPopup,
#chatPanel.mode-provider #ttsInfoPopup,
#chatPanel.mode-general #ttsInfoPopup,
#chatPanel.mode-participant .tts-info-popup,
#chatPanel.mode-provider .tts-info-popup,
#chatPanel.mode-general .tts-info-popup{
  border-color: var(--ns-accent) !important;
}

#chatPanel.mode-participant #resetChat,
#chatPanel.mode-provider #resetChat,
#chatPanel.mode-general #resetChat{
  border-color: color-mix(in srgb, var(--ns-accent) 35%, #8f8f8f) !important;

  }



/* =====================================================
   DOCUMENT PAGES — TOP BANNER LIKE REFERENCE IMAGE
   ===================================================== */
body.document-page{
  background: #e9f3f0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.document-page .policy-banner{
  width: 100vw !important;
  height: 255px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

body.document-page .policy-banner img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: left center !important;
  display: block !important;
}

body.document-page .policy-page{
  padding: 10px 16px 40px !important;
  background: transparent !important;
}

body.document-page .policy-container{
  max-width: 900px !important;
  margin: 0 auto !important;

  font-size: 20px !important;   /* 🔥 increase main content size */
  line-height: 1.6 !important;  /* improves readability */
}

body.document-page .contact-buttons{
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}

body.document-page .back-home-btn{
  display: inline-block !important;
  font-size: 22px !important;
}



/* =====================================================
   DOCUMENT PAGES — RESTORE SCROLL
   ===================================================== */
html:has(body.document-page),
body.document-page{
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.document-page .policy-page,
body.document-page .policy-container{
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


/* =====================================================
   LENOVO TABLET PORTRAIT (695 x 991 approx)
   Fix 2: make Guide Assist fit better with the green button
   ===================================================== */
@media (min-width: 680px) and (max-width: 820px)
and (min-height: 900px) and (orientation: portrait){

  /* logo/title area */
  .brand-top-left{
    margin-top: 10px !important;
    margin-left: 12px !important;
    justify-self: start !important;
  }

  .brand-top-left img{
    width: clamp(150px, 24vw, 190px) !important;
    max-width: 190px !important;
    height: auto !important;
    display: block !important;
  }

  /* give the CTA buttons a little more room below the title */
  #ctaGroup{
    max-width: min(460px, 92%) !important;
    margin-top: 10px !important;
    gap: 14px !important;
  }

  #ctaGroup .btn{
    min-height: 54px !important;
    font-size: clamp(20px, 3vw, 24px) !important;
  }
}


/* =====================================================
   LENOVO LANDSCAPE — keep Reset Chat behind info bubble
   ===================================================== */
@media (min-width: 1080px) and (max-width: 1145px)
and (min-height: 540px) and (max-height: 620px)
and (orientation: landscape)
and (hover: none)
and (pointer: coarse){

  /* create a clean stacking context */
  #chatPanel{
    isolation: isolate !important;
  }

  /* make popup anchor area sit above lower rows */
  #chatPanel #ttsBar,
  #chatPanel #ttsBar .tts-bar-head{
    position: relative !important;
    overflow: visible !important;
    z-index: 50 !important;
  }

  /* force popup above reset row */
  #chatPanel #ttsInfoPopup{
    position: absolute !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }

  /* keep reset row underneath */
  #chatPanel #resetChat{
    position: relative !important;
    z-index: 1 !important;
  }

  /* keep input row underneath too */
  #chatPanel #chatForm,
  #chatPanel .chat-input{
    position: relative !important;
    z-index: 1 !important;
  }
}












/* =================**************************************************================
   DESKTOP — SINGLE FLUID SYSTEM (SAFE)
   Applies ONLY to real desktop (no touch devices)
   ===================================================== */
@media (min-width: 900px) and (hover: hover) and (pointer: fine){

  /* MAIN LAYOUT */
  .card{
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 260px;
    align-items: center;
    gap: clamp(16px, 2vw, 28px);

    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 40px);
  }

  /* LARGE BOT */
  .bot-large{
    width: clamp(240px, 22vw, 340px);
    justify-self: start;
  }

  /* INTRO BLOCK */
  #introBlock{
    max-width: 640px;
    margin: 0 auto;
    transform: translateY(-10px); /* move UP */
  }

  /* CTA BUTTONS */
  .cta-buttons{
    gap: 14px;
    margin-top: 12px;
  }

  .cta-buttons button{
    font-size: clamp(14px, 1.1vw, 16px);
    padding: 12px 18px;
  }

  /* ASSISTANT BUTTONS (RIGHT SIDE) */
  .assistant{
    display: flex;
    flex-direction: row;
    gap: 10px;

    justify-self: end;
    align-self: center;
  }

  .assistant img{
    width: clamp(46px, 4vw, 60px);
  }

  /* FOOTER */
  .site-footer{
    max-width: 900px;
    margin: 12px auto 0;
  }

}



/* =================**************************************************================
   DESKTOP QUARTER/HALF + FULL SCREEN
   Matches the screenshot layout
   ===================================================== */
@media (min-width: 900px) and (max-width: 1100px)
and (hover: hover) and (pointer: fine){

  .card{
    display:grid !important;

    grid-template-columns: 220px 1fr 220px;
    grid-template-rows: auto auto auto auto;

    gap:18px;
    padding:24px 32px;

    max-width:1400px;
    margin:0 auto;

    align-items:start;
  }

  /* LOGO */

  .brand-top-left{
    grid-column:1;
    grid-row:1;
  }

  .brand-top-left img{
    width:220px;
  }

  /* MENU */

  .menu-toggle{
    grid-column:3;
    grid-row:1;
    justify-self:end;
    font-size:64px;
  }

  /* LEFT BOT */

  .bot-large{
    grid-column:1;
    grid-row:2 / span 2;

    width:260px;

    align-self:center;
    justify-self:start;

    margin-left:-10px;
  }

  /* INTRO TEXT */

  #introBlock{
    grid-column:2;
    grid-row:2;

    max-width:720px;
    width:90%;

    margin:0 auto;

    text-align:center;

    font-size:24px;
    line-height:1.35;
  }

  /* BUTTON GROUP */

  #ctaGroup{
    grid-column:2;
    grid-row:3;

    width:720px;
    max-width:90%;

    margin:0 auto;

    display:flex;
    flex-direction:column;
    gap:28px;
  }

  #ctaGroup .btn{
    min-height:72px;
    font-size:28px;
    border-radius:20px;
  }

  /* ASSISTANT BUTTONS — SIDE BY SIDE */

  .assistant{
    grid-column:3;
    grid-row:2 / span 2;

    display:flex;
    flex-direction:row;   /* THIS MAKES THEM SIDE BY SIDE */

    gap:18px;

    align-items:center;
    justify-content:center;

    --ga-fab-col-w: 110px;
  }

  .bot-fab,
  .mic{
    width:110px;
    height:110px;

    border-radius:50%;
  }

  /* FOOTER */

  .site-footer{
    grid-column:1 / -1;
    grid-row:4;

    max-width:1100px;
    margin:12px auto 0;

    font-size:16px;

    padding:16px 20px;
  }

}




/* =========================================================
   DESKTOP — Keep bottom controls + disclaimer ALWAYS visible
   Only messages scroll
   ========================================================= */
@media (min-width: 1367px){

  /* Panel becomes a flex column; hide panel scrolling */
  #chatPanel.chat{
    height: 78vh !important;        /* adjust 74–82vh */
    max-height: 78vh !important;
    overflow: hidden !important;    /* IMPORTANT: panel itself does NOT scroll */
    display: flex !important;
    flex-direction: column !important;
  }

  /* Header stays fixed at top */
  #chatPanel .chat-header{
    flex: 0 0 auto !important;
  }

  /* ONLY messages scroll */
  #chatPanel .chat-body,
  #chatBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 12px !important;
  }

  /* Everything below stays visible (no scrolling away) */
  #chatPanel .chat-input,
  #chatForm,
  #chatPanel .suggestions-toggle,
  #chatPanel #ttsBar,
  #ttsBar,
  #chatPanel .tts-notes,
  #chatPanel .chat-disclaimer,
  #chatPanel #resetChat{
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
  }

  /* Optional: keep the bottom area visually “docked” */
  #chatPanel .chat-input,
  #chatPanel #ttsBar,
  #chatPanel .chat-disclaimer{
    background: #fff !important;
  }
}


========================================================= 
   DESKTOP - DOCUMENT PAGE — BANNER CORRECTION
   Match the cleaner portrait look
   ========================================================= */
@media (min-width: 1367px){

  body.document-page .policy-banner{
    height: 245px !important;          /* shorter banner */
    overflow: hidden !important;
    margin-top: 0 !important;
  }

  body.document-page .policy-banner img{
    width: 100% !important;
    height: 90% !important;
    object-fit: cover !important;

    /* show more of the banner artwork like portrait */
    object-position: left top !important;

    /* remove extra enlargement */
    transform: scale(1) !important;
    transform-origin: left top !important;
  }

}



/* =========================================================
   DESKTOP - DOCUMENT PAGE
   Make banner image smaller and shift left
   ========================================================= */
@media (min-width: 1367px){

  body.document-page .policy-banner img{

    /* slightly smaller image */
    transform: scale(1.00) !important;

    /* move artwork more to the left */
    transform-origin: left center !important;

    /* show more of the left side */
    object-position: left center !important;

  }
}


/* =========================================================
   DESKTOP POLICY / DOCUMENT PAGES — TEXT SCALE
   ========================================================= */

body.document-page{

  /* overall readable text size */
  font-size: 18px;

}

body.document-page h1{
  font-size: 34px;
}

body.document-page h2{
  font-size: 26px;
}

body.document-page p{
  font-size: 18px;
  line-height: 1.7;
}

body.document-page li{
  font-size: 18px;
  line-height: 1.7;
  }
} 
 



/* =====================================================
   DESKTOP — ENQUIRIES LAYOUT SYSTEM (SAFE)
   Match the iPad / Lenovo landscape structure on desktop
   Replace the old "DESKTOP — ENQUIRIES" block with this
   ===================================================== */
@media (min-width: 900px) and (hover: hover) and (pointer: fine){

  /* Whole enquiries panel */
  #chatPanel.chat{
    display: flex !important;
    flex-direction: column !important;
    height: calc(var(--vh, 1vh) * 100 - 16px) !important;
    max-height: calc(var(--vh, 1vh) * 100 - 16px) !important;
    overflow: hidden !important;
  }

  /* Header */
  #chatPanel .chat-header{
    flex: 0 0 auto !important;
    background: #f3f5f7 !important;
    padding: 8px 12px 8px !important;
  }

  #chatPanel .chat-title{
    font-size: clamp(16px, 1.15vw, 20px) !important;
    gap: 8px !important;
  }

  #chatPanel .chat-title img{
    width: 22px !important;
    height: 22px !important;
  }

  #chatPanel .lang-hint{
    margin-top: 4px !important;
    padding: 7px 10px !important;
    font-size: clamp(11px, 0.78vw, 14px) !important;
    line-height: 1.2 !important;
  }

  #chatPanel .chat-close{
    width: 32px !important;
    height: 32px !important;
    top: 8px !important;
    right: 8px !important;
    font-size: 16px !important;
    border-radius: 12px !important;
  }

  /* Main scroll area */
  #chatPanel .chat-body,
  #chatBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 12px 8px !important;
  }

  /* Bubble spacing */
  #chatPanel .msg{
    margin-bottom: 10px !important;
  }

  #chatPanel .bubble{
    max-width: 100% !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
  }

  /* Input row */
  #chatPanel #chatForm,
  #chatPanel .chat-input{
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 8px 12px !important;
    background: transparent !important;
  }

  #chatPanel #chatText{
    min-width: 0 !important;
    height: 44px !important;
    font-size: clamp(15px, 1vw, 17px) !important;
  }

  #chatPanel .send{
    height: 44px !important;
    min-width: 84px !important;
    padding: 0 18px !important;
    font-size: clamp(15px, 1vw, 17px) !important;
  }

  /* Reset chat */
  #chatPanel #resetChat{
    flex: 0 0 auto !important;
    margin: 2px 12px 6px !important;
    min-height: 36px !important;
    font-size: clamp(16px, 1vw, 19px) !important;
  }

  /* TTS bar */
  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar{
    flex: 0 0 auto !important;
    padding: 8px 12px 10px !important;
    gap: 12px !important;
    background: transparent !important;
  }

  /* Header row inside TTS */
  #chatPanel #ttsBar .tts-bar-head{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  #chatPanel #ttsBar .tts-label{
    font-size: clamp(16px, 1.05vw, 20px) !important;
  }

  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 22px !important;
  }

  #chatPanel .suggestions-toggle{
    min-width: 190px !important;
    height: 42px !important;
    font-size: clamp(15px, 1vw, 17px) !important;
    margin: 0 !important;
  }

  /* Play / Stop / Resume / Speed */
  #chatPanel #ttsBar .tts-controls-row{
    display: grid !important;
    grid-template-columns: repeat(4, auto) !important;
    justify-content: start !important;
    align-items: center !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  #chatPanel #ttsBar .tts-btn{
    height: 42px !important;
    min-width: 82px !important;
    padding: 0 16px !important;
    font-size: clamp(15px, 0.95vw, 17px) !important;
    border-radius: 999px !important;
  }

  #chatPanel #nsSpeedBtn{
    margin-left: 0 !important;
    align-self: center !important;
  }

  #chatPanel #nsSpeedBadge{
    min-width: 92px !important;
    height: 42px !important;
    font-size: clamp(14px, 0.9vw, 16px) !important;
  }

  /* Notes + disclaimer */
  #chatPanel .tts-notes{
    padding: 0 12px 4px !important;
    font-size: clamp(13px, 0.82vw, 14px) !important;
    line-height: 1.25 !important;
  }

  #chatPanel .chat-disclaimer{
    padding: 0 12px 8px !important;
    font-size: clamp(13px, 0.82vw, 14px) !important;
    line-height: 1.25 !important;
  }
}










/* =========================********************************=======================
   DESKTOP QUARTER — SAFE
   Aim: same look as target image, scaled tighter
   Buttons on right stay SIDE BY SIDE
   Paste at VERY END of styles.css
   ===================================================== */
@media (min-width: 900px) and (max-width: 1365px)
and (max-height: 431px)
and (hover: hover) and (pointer: fine){

  .card{
    grid-template-columns: 135px minmax(0, 1fr) 150px !important;
    grid-template-rows: auto auto auto auto !important;
    justify-items: stretch !important;
    align-items: start !important;
    align-content: start !important;

    min-height: 100vh !important;
    padding: 10px 16px 12px !important;
    gap: 8px !important;
  }

  /* top row */
  .brand-top-left{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    margin-top: 20px !important;
    margin-left: 0 !important;
  }

  .brand-top-left img{
    width: 145px !important;
    height: auto !important;
  }

  .menu-toggle{
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    margin-top: 20 !important;
    margin-right: 0 !important;
    font-size: 56px !important;
    line-height: 1 !important;
  }

  .menu-toggle::before{
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }

  /* bot left */
  .bot-large{
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    justify-self: start !important;
    align-self: center !important;

    width: 325px !important;
    max-width: none !important;
    margin-top: 30px !important;
    margin-left: -90px !important;
  }

  /* intro */
  #introBlock{
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    align-self: start !important;

    width: min(100%, 620px) !important;
    max-width: 520px !important;
    margin-left: -45px !important;

    transform: translateY(-20px) !important; /* 🔥 move up */
    margin-bottom: 4px !important;

    font-size: 24px !important;
    line-height: 1.24 !important;
    text-align: center !important;
  }

  /* CTA */
  #ctaGroup{
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-self: start !important;

    width: min(100%, 700px) !important;
    max-width: 500px !important;
    margin-left: -45px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    transform: translateY(-30px) !important; /* 🔥 move up */

  }

  #ctaGroup .btn{
    width: 100% !important;
    min-height: 54px !important;
    padding: 8px 16px !important;
    border-radius: 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    font-size: 26px !important;
    font-weight: 800 !important;
  }

 .assistant{
  grid-column: 3 !important;
  grid-row: 2 / 4 !important;

  justify-self: end !important;
  align-self: center !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;

  margin-top: 22px !important;
  transform: translateX(-12px) !important;   /* move left */

  --ga-fab-col-w: 88px;
}

  .bot-fab,
  .mic{
    width: 88px !important;
    height: 88px !important;
    flex: 0 0 auto !important;
  }

  .site-footer{
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;

  width: min(900px, 100%) !important;
  max-width: 900px !important;

  justify-self: center !important;
  align-self: start !important;

  transform: translateY(-28px) !important; /* 🔥 move up */

  padding: 10px 14px !important;
  border-radius: 16px !important;

  font-size: 11px !important;
  line-height: 1.1 !important;
  text-align: center !important;
  }

      /* TOOLTIP — SCALE + MOVE RIGHT (SAFE) */
  .bot-wrap .bot-help-tooltip{
    transform: scale(1.1) translate(70px, -80px);  /*moves right - moves up*/
    transform-origin: top left !important;

   }

 }











/* =====================================================
   DESKTOP HALF — CLEAN SEPARATE LOOK
   Larger than quarter, not yet full desktop
   ===================================================== */
@media (min-width: 900px) and (max-width: 1366px)
and (min-height: 910px)
and (hover: hover) and (pointer: fine){

    /* Make the Enquiries window taller on quarter desktop */
  #chatPanel.chat{
    height: calc(100dvh - 0px) !important;
    max-height: calc(100dvh - 0px) !important;
  }

  /* Let the message area stretch further downward */
  #chatPanel .chat-body,
  #chatBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  .card{
    grid-template-columns: 190px minmax(0, 1fr) 190px !important;
    grid-template-rows: auto auto auto auto !important;

    justify-items: stretch !important;
    align-items: start !important;
    align-content: start !important;

    min-height: 100vh !important;
    max-width: 1380px !important;
    margin: 0 auto !important;

    padding: 16px 22px 16px !important;
    gap: 12px !important;
  }

  .brand-top-left{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: start !important;
    margin-top: 4px !important;
    margin-left: 0 !important;
  }

  .brand-top-left img{
    width: 185px !important;
    height: auto !important;
  }

  .menu-toggle{
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: start !important;
    margin-top: 4px !important;
    margin-right: 0 !important;
    font-size: 64px !important;
    line-height: 1 !important;
  }

  .menu-toggle::before{
    font-size: 18px !important;
    margin-bottom: 2px !important;
  }

  .bot-large{
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    justify-self: start !important;
    align-self: center !important;

    width: 445px !important;
    max-width: none !important;
    margin-top: 224px !important;
    margin-left: -134px !important;
  }

  #introBlock{
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    align-self: start !important;

    width: min(100%, 820px) !important;
    max-width: 820px !important;
    margin-left: -20px !important;

    margin-top: 50px !important;
    margin-bottom: 10px !important;

    font-size: 32px !important;
    line-height: 1.28 !important;
    text-align: center !important;
  }

  #ctaGroup{
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-self: start !important;

    width: min(100%, 880px) !important;
    max-width: 880px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-top: 0px !important;
    margin-left: -20px !important;
  }

  #ctaGroup .btn{
    width: 100% !important;
    min-height: 68px !important;
    padding: 10px 18px !important;
    border-radius: 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 30px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .assistant{
    grid-column: 3 !important;
    grid-row: 2 / 4 !important;

    justify-self: end !important;
    align-self: center !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;

    margin-top: 224px !important;
    margin-right: 0 !important;

    --ga-fab-col-w: 92px;
  }

  .bot-fab,
  .mic{
    width: 92px !important;
    height: 92px !important;
    flex: 0 0 auto !important;
  }

  .site-footer{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;

    width: min(1100px, 100%) !important;
    max-width: 1100px !important;

    justify-self: center !important;
    align-self: start !important;

    margin-top: 120px !important;
    padding: 14px 18px !important;
    border-radius: 18px !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

    /* TOOLTIP — SCALE + MOVE RIGHT (SAFE) */
  .bot-wrap .bot-help-tooltip{
    transform: scale(1.4) translate(-60px, -260px);  /*moves right - moves up*/
    transform-origin: top left !important;

  }

 }




/* =====================================================
   DESKTOP FULL — LANDING PAGE ONLY
   KEEP THIS AS THE ONLY full-screen landing block
   ===================================================== */
@media (min-width: 1367px) and (hover: hover) and (pointer: fine){

  .card{
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) 220px !important;
    grid-template-rows: auto auto auto auto !important;
    justify-items: stretch !important;
    align-items: start !important;
    align-content: start !important;

    width: 100% !important;
    max-width: 1540px !important;
    margin: 0 auto !important;

    padding: 14px 26px 14px !important;
    gap: 12px !important;

    border-radius: 22px !important;
    overflow: hidden !important;
  }

  .card .bg{
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .brand-top-left{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    margin-top: 50px !important;
    margin-left: 0 !important;
  }

  .brand-top-left img{
    width: 220px !important;
    height: auto !important;
  }

  .menu-toggle{
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    margin-top: 40px !important;
    margin-right: 0 !important;
    font-size: 72px !important;
    line-height: 1 !important;
  }

  .menu-toggle::before{
    font-size: 20px !important;
    margin-bottom: 2px !important;
  }

  .bot-large{
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    justify-self: start !important;
    align-self: center !important;

    width: 490px !important;
    max-width: none !important;
    margin-left: -130px !important;
    transform: translateY(115px) !important;
  }

  #introBlock{
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: center !important;
    align-self: start !important;

    width: min(100%, 860px) !important;
    max-width: 860px !important;
    margin-left: -60px !important;
    transform: translateY(-30px) !important;

    text-align: center !important;
    font-size: 32px !important;
    line-height: 1.28 !important;

  }

  #ctaGroup{
    grid-column: 2 !important;
    grid-row: 3 !important;
    justify-self: center !important;
    align-self: start !important;

    width: min(100%, 900px) !important;
    max-width: 900px !important;
    margin-left: -60px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    margin-top: 75px !important;
  }

  #ctaGroup .btn{
    width: 100% !important;
    min-height: 94px !important;
    padding: 12px 20px !important;
    border-radius: 22px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 38px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .assistant{
    grid-column: 3 !important;
    grid-row: 2 / 4 !important;
    justify-self: end !important;
    align-self: center !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px !important;

    margin-right: 0 !important;
    transform: translateY(95px) !important;

    --ga-fab-col-w: 124px;
  }

  .bot-fab,
  .mic{
    width: 124px !important;
    height: 124px !important;
    flex: 0 0 auto !important;
    border-radius: 50% !important;
  }

  .site-footer{
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;

    width: min(1320px, 100%) !important;
    max-width: 1320px !important;

    justify-self: center !important;
    align-self: start !important;

    margin-top: 90px !important;
    padding: 14px 18px !important;
    border-radius: 18px !important;

    font-size: 15px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  /* TOOLTIP — SCALE + MOVE RIGHT (SAFE) */
  .bot-wrap .bot-help-tooltip{
    transform: scale(1.4) translate(-60px, -260px);  /*moves right - moves up*/
    transform-origin: top left !important;

  }

  .bot-wrap .help-header{
    text-align: left !important;
    font-size: 13px !important;

    margin-bottom: 10px !important;
  }
}




/* =====================================================
   DESKTOP ENQUIRIES — AUDIO CONTROLS ROW MATCH TARGET
   Safe desktop-only alignment
   Replace the old desktop audio-controls-row block with this
   ===================================================== */
@media (min-width: 900px) and (hover: hover) and (pointer: fine){

  /* Reset Chat */
  #chatPanel #resetChat{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 24px) !important;
    margin: 8px 12px 8px !important;
    min-height: 34px !important;
    font-size: clamp(16px, 1.2vw, 20px) !important;
    border-radius: 10px !important;
  }

  /* Whole Audio Controls area = one horizontal row */
  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin: 4px 12px 6px !important;
    padding: 6px 12px 6px !important;
    background: #fff !important;
    border-top: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  /* LEFT GROUP = Audio Controls + ⓘ + Guided Questions */
  #chatPanel #ttsBar .tts-bar-head{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  #chatPanel #ttsBar .tts-label{
    margin: 0 !important;
    font-size: clamp(16px, 1.15vw, 21px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    flex: 0 0 36px !important;
  }

    /* Guided Questions — match target pill style */
  #chatPanel .suggestions-toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    margin: 0 0 0 6px !important;
    padding: 0 22px !important;

    font-size: clamp(15px, 0.98vw, 17px) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: normal !important;

    color: #124734 !important;
    background: linear-gradient(to bottom, #e6f7ef, #cfeee0) !important;
    border: 3px solid #6bbf9c !important;
    border-radius: 999px !important;

    box-shadow: 0 6px 0 rgba(0,0,0,0.18) !important;
  }

  #chatPanel .suggestions-toggle:active{
    transform: translateY(2px) !important;
    box-shadow: 0 4px 0 rgba(0,0,0,0.16) !important;
  }


  /* RIGHT GROUP = Play / Stop / Resume / Speed */
  #chatPanel #ttsBar .tts-controls-row{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    flex: 1 1 280px !important;
    gap: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #chatPanel #ttsBar .tts-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    height: 40px !important;
    min-width: 82px !important;
    padding: 0 16px !important;
    font-size: clamp(15px, 0.92vw, 17px) !important;
    line-height: 1 !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
  }

  #chatPanel #nsSpeedBtn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    position: relative !important;
    transform: none !important;
  }

  #chatPanel #nsSpeedBadge{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 84px !important;
    height: 40px !important;
    padding: 0 14px !important;
    font-size: clamp(14px, 0.88vw, 16px) !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
}




/* =====================================================
   DESKTOP QUARTER — tighter fit
   ===================================================== */
@media (min-width: 900px) and (max-width: 1365px)
and (max-height: 431px)
and (hover: hover) and (pointer: fine){

  #chatPanel #resetChat{
    min-height: 28px !important;
    font-size: 12px !important;
    margin: 4px auto 2px !important;
    padding: 1px 10px !important;
  }

  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar{
    gap: 10px !important;
    margin: 2px 10px 4px !important;
    padding: 6px 10px 8px !important;
  }

  #chatPanel #ttsBar .tts-bar-head{
    gap: 8px !important;
  }

  #chatPanel #ttsBar .tts-label{
    font-size: 11px !important;
  }

  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    font-size: 14px !important;
  }

  #chatPanel .suggestions-toggle{
    min-width: 0 !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
    white-space: normal !important;
  }

  #chatPanel #ttsBar .tts-controls-row{
    gap: 6px !important;
  }

  #chatPanel #ttsBar .tts-btn{
    height: 34px !important;
    min-width: 64px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    border-radius: 12px !important;
  }

  #chatPanel #nsSpeedBadge{
    min-width: 76px !important;
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    border-width: 2px !important;
  }
}


/* =====================================================
   DESKTOP HALF — balanced fit
   ===================================================== */
@media (min-width: 900px) and (max-width: 1366px)
and (min-height: 947px)
and (hover: hover) and (pointer: fine){

  #chatPanel #resetChat{
    min-height: 36px !important;
    font-size: 18px !important;
  }

  #chatPanel #ttsBar .tts-label{
    font-size: 20px !important;
  }

  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    font-size: 24px !important;
  }

  #chatPanel .suggestions-toggle{
    min-width: 0 !important;
    height: auto !important;
    min-height: 42px !important;
    font-size: 17px !important;
    white-space: normal !important;
  }

  #chatPanel #ttsBar .tts-btn{
    height: 46px !important;
    min-width: 82px !important;
    padding: 0 18px !important;
    font-size: 17px !important;
  }

  #chatPanel #nsSpeedBadge{
    min-width: 96px !important;
    height: 46px !important;
    font-size: 17px !important;
  }
}


/* =====================================================
   DESKTOP FULL — slightly roomier
   ===================================================== */
@media (min-width: 1367px) and (hover: hover) and (pointer: fine){

  #chatPanel #resetChat{
    min-height: 38px !important;
    font-size: 19px !important;
  }

  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar{
    gap: 16px !important;
    padding: 8px 16px 10px !important;
  }

  #chatPanel #ttsBar .tts-label{
    font-size: 21px !important;
  }

  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    font-size: 25px !important;
  }

  #chatPanel .suggestions-toggle{
    min-width: 0 !important;
    height: auto !important;
    min-height: 48px !important;
    font-size: 20px !important;
    white-space: normal !important;
  }

  #chatPanel #ttsBar .tts-btn{
    height: 48px !important;
    min-width: 86px !important;
    padding: 0 18px !important;
    font-size: 18px !important;
  }

  #chatPanel #nsSpeedBadge{
    min-width: 100px !important;
    height: 48px !important;
    font-size: 18px !important;
  }
}




/* =====================================================
   DESKTOP — GLOBAL ENQUIRIES FONT SCALE
   Safe upscale (no layout break)
   ===================================================== */
@media (min-width: 900px){

  /* Base text inside enquiries */
  #chatPanel{
    font-size: 1.08rem !important;   /* master scale */
  }

  /* Header */
  #chatPanel .chat-title{
    font-size: clamp(20px, 1.6vw, 26px) !important;
  }

  #chatPanel .lang-hint{
    font-size: clamp(14px, 1.1vw, 18px) !important;
  }

  /* Chat bubbles */
  #chatPanel .bubble{
    font-size: clamp(16px, 1.2vw, 20px) !important;
    line-height: 1.45 !important;
  }

  /* Input text */
  #chatPanel #chatText{
    font-size: clamp(16px, 1.2vw, 18px) !important;
  }

  /* Send button */
  #chatPanel .send{
    font-size: clamp(16px, 1.1vw, 18px) !important;
  }

  /* Reset Chat */
  #chatPanel #resetChat{
    font-size: clamp(18px, 1.4vw, 22px) !important;
  }

  /* Audio Controls label */
  #chatPanel .tts-label{
    font-size: clamp(18px, 1.3vw, 22px) !important;
  }

  /* Play / Stop / Resume */
  #chatPanel .tts-btn{
    font-size: clamp(15px, 1vw, 18px) !important;
  }

  /* Speed badge */
  #chatPanel #nsSpeedBadge{
    font-size: clamp(14px, 1vw, 17px) !important;
  }

  /* Notes + disclaimer */
  #chatPanel .tts-notes,
  #chatPanel .chat-disclaimer{
    font-size: clamp(14px, 0.9vw, 15px) !important;
  }
}



/* =====================================================
   DESKTOP — GUIDED QUESTIONS FONT SCALE
   ===================================================== */
@media (min-width: 900px){

  .suggestions-sheet{
    font-size: 1.05rem !important;
  }

  .suggestions-sheet h3{
    font-size: clamp(18px, 1.3vw, 22px) !important;
  }

  .sugg-chip-wrap{
    font-size: clamp(15px, 1.1vw, 18px) !important;
  }

  .sugg-chip-wrap button,
  .sugg-chip-wrap .chip{
    font-size: clamp(15px, 1.1vw, 18px) !important;
    padding: 10px 14px !important;
  }
}



/* =====================================================
   DESKTOP — TTS INFO POPUP AS SPEECH BUBBLE
   Match mobile landscape style
   ===================================================== */
@media (min-width: 900px){

  /* anchor point for the popup */
  #chatPanel #ttsBar .tts-bar-head{
    position: relative !important;
  }

  /* popup bubble */
  #chatPanel #ttsInfoPopup{
  position: absolute !important;

  top: -158px !important;                 /* move bubble above the info button */
  left: 0 !important;

  width: min(660px, 90vw) !important;   /* make it wider */
  max-width: min(660px, 90vw) !important;

  background: #ffffff !important;
  border: 2px solid var(--ns-accent, #2d5196) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;

  font-size: clamp(20px, 3.2vw, 12.5px) !important;
  line-height: 1.35 !important;
  color: #073b72 !important;

  box-shadow: 0 12px 24px rgba(0,0,0,0.18) !important;
  z-index: 100 !important;
}

  /* speech-bubble pointer */
  #chatPanel #ttsInfoPopup::before{
    content: "" !important;
    position: absolute !important;
    left: 194px !important;
    bottom: -10px !important;

    width: 18px !important;
    height: 18px !important;

    background: #f2f2f2 !important;
    border-left: 2px solid var(--ns-accent, #2d5196) !important;
    border-bottom: 2px solid var(--ns-accent, #2d5196) !important;

    transform: rotate(-45deg) !important;
  }
}


/* =====================================================
   DESKTOP — GUIDED QUESTIONS SHEET
   Bigger header + bigger tabs
   Use REAL classes from app.js
   ===================================================== */
@media (min-width: 900px){

  /* whole top bar */
  .suggestions-sheet .suggestions-sheet-header{
    padding: 14px 18px !important;
    min-height: 56px !important;
  }

  /* left title: Guided Questions */
  .suggestions-sheet .suggestions-sheet-title{
    font-size: clamp(22px, 1.45vw, 28px) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }

  /* middle note: Scroll down to view suggested questions */
  .suggestions-sheet .sq-scroll-note{
    font-size: clamp(16px, 1vw, 20px) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  /* close X button */
  .suggestions-sheet .suggestions-sheet-close,
  .suggestions-sheet .suggestions-sheet-close.close-modal{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    font-size: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* tabs row */
  .suggestions-sheet .sugg-tabs{
    gap: 12px !important;
    padding: 12px 16px !important;
  }

  /* Participant / Provider / General */
  .suggestions-sheet .sugg-tab{
    height: 46px !important;
    padding: 0 18px !important;
    font-size: clamp(18px, 1.1vw, 22px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  /* active tab a touch stronger */
  .suggestions-sheet .sugg-tab[aria-selected="true"]{
    font-weight: 900 !important;
  }
}



/* =====================================================
   DESKTOP — CHAT BUBBLE CTA BUTTON SCALE
   Participant / Provider / General
   ===================================================== */
@media (min-width: 900px){

  #chatPanel .msg .bubble .ns-intake-cta{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* SIZE */
    min-height: 44px !important;
    padding: 0 20px !important;
    margin-bottom: 12px !important;

    /* TEXT */
    font-size: clamp(18px, 1.1vw, 20px) !important;
    font-weight: 900 !important;

    /* SHAPE */
    border-radius: 14px !important;

    /* FEEL */
    box-shadow: 0 6px 0 rgba(0,0,0,0.18) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }

  /* CLICK FEEDBACK */
  #chatPanel .msg .bubble .ns-intake-cta:active{
    transform: translateY(2px) !important;
    box-shadow: 0 3px 0 rgba(0,0,0,0.18) !important;
  }

  /* Optional: slightly more spacing inside bubble */
  #chatPanel .msg .bubble{
    gap: 6px !important;
  }
}




/* =====================================================
   DESKTOP — INPUT + SEND (50% WIDTH)
   ===================================================== */
@media (min-width: 900px){

  /* Center the whole input row */
  #chatPanel .chat-input{
    display: flex !important;
    justify-content: left !important;
    align-items: left !important;
    gap: 10px !important;
  }

  /* Input = 50% width */
  #chatPanel #chatText{
    flex: 0 0 50% !important;
    max-width: 800px !important;   /* prevents it getting too huge on big screens */
    min-width: 280px !important;

    height: 48px !important;
    padding: 0 16px !important;

    font-size: clamp(18px, 1vw, 18px) !important;
  }

  /* Send button stays inline */
  #chatPanel .send{
    flex: 0 0 auto !important;

    height: 48px !important;
    padding: 0 18px !important;

    font-size: clamp(18px, 1vw, 18px) !important;

    white-space: nowrap !important;
  }
}

/* =====================================================
   Provider bot — NDIS item-search disclaimer / compliance
   (only inside catalogue search bubbles; avoids changing other bubbles)
   ===================================================== */
#chatPanel .ns-item-search-results .ns-item-search-warning {
  margin-top: 0.875rem;
  padding: 0;
  border: none;
  background: transparent;
  max-width: 100%;
  min-width: 0;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__inner {
  padding: 0.9375rem 1rem 1rem 1rem;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid rgba(217, 160, 8, 0.32);
  border-left: 4px solid #d97706;
  box-shadow: 0 1px 3px rgba(146, 64, 14, 0.07);
  color: #422006;
  font-size: 0.9375rem;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__heading {
  margin: 0 0 0.625rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  color: #713f12;
  letter-spacing: -0.015em;
  display: flex;
  align-items: flex-start;
  gap: 0.35em;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__icon {
  flex-shrink: 0;
  font-size: 1.05em;
  line-height: 1.2;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__lead {
  margin: 0 0 0.375rem;
  font-weight: 700;
  color: #5c4510;
  font-size: 0.9rem;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__list {
  margin: 0 0 0.5rem;
  padding-left: 1.35rem;
  color: #422006;
  font-weight: 600;
  font-size: 0.9rem;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__list li {
  margin: 0.25em 0;
  padding-left: 0.15em;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__catalogue-msg {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #4b3810;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__catalogue-msg:last-child {
  margin-bottom: 0;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__api-note {
  margin: 0 0 0.75rem;
  padding-top: 0.625rem;
  border-top: 1px solid rgba(180, 120, 20, 0.28);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #5c4818;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__api-note:last-child {
  margin-bottom: 0;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__source {
  margin: 0;
  padding-top: 0.625rem;
  border-top: 1px solid rgba(180, 120, 20, 0.24);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  font-weight: 500;
  color: #573c14;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__catalogue-wrap {
  flex-shrink: 0;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__catalogue-link {
  font-weight: 700;
  color: #1e3a5f;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__catalogue-link:hover,
#chatPanel .ns-item-search-results .ns-item-search-warning__catalogue-link:focus-visible {
  color: #0f2747;
}

#chatPanel .ns-item-search-results .ns-item-search-warning__catalogue-link:focus-visible {
  outline: 2px solid #1e3a5f;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 480px) {
  #chatPanel .ns-item-search-results .ns-item-search-warning__inner {
    padding: 0.8125rem 0.875rem 0.9375rem;
    border-radius: 10px;
  }

  #chatPanel .ns-item-search-results .ns-item-search-warning__heading {
    font-size: 0.95rem;
  }
}


/* Make ALL clickable elements show hand cursor */
button,
.btn,
a,
.suggestions-toggle,
.sugg-tab,
.chip,
#nsSpeedBtn,
#nsSpeedBadge,
.tts-btn,
.bot-fab,
.mic,
.menu-toggle,
.close-modal {
  cursor: pointer !important;
}





/* =====================================================
   DESKTOP QUARTER SCREEN ONLY — ENQUIRIES HEIGHT + BIGGER CONTROLS
   Paste at VERY END of styles.css
   ===================================================== */
@media (min-width: 900px) and (max-width: 1365px)
and (max-height: 431px)
and (hover: hover) and (pointer: fine){

  /* Make the Enquiries window taller on quarter desktop */
  #chatPanel.chat{
    height: calc(100dvh - 0px) !important;
    max-height: calc(100dvh - 0px) !important;
  }

  /* Let the message area stretch further downward */
  #chatPanel .chat-body,
  #chatBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }


/* Guided Questions — same visual size as SpeedBadge row */
  #chatPanel .suggestions-toggle{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 0 22px !important;
    margin: 0 0 0 16px !important;

    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    border-radius: 999px !important;
  }

  /* TTS row buttons — match SpeedBadge height */
  #chatPanel #ttsBar .tts-btn{
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 18px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 16px !important;
    line-height: 1 !important;
    border-radius: 14px !important;
  }

  /* Keep SpeedBadge same height and slightly roomier */
  #chatPanel #nsSpeedBtn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 8px !important;
  }

  #chatPanel #nsSpeedBadge{
    min-width: 88px !important;
    height: 44px !important;
    padding: 0 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 16px !important;
    font-weight: 900 !important;
    border-radius: 999px !important;
  }


  /* Keep the whole controls area aligned nicely */
  #chatPanel #ttsBar .tts-controls-row{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
}



/* =========================================================
   DESKTOP DOCUMENT PAGES — BANNER + TEXT
   Quarter / Half desktop only
   ========================================================= */
@media (min-width: 900px) and (hover: hover) and (pointer: fine){

  body.document-page .policy-page{
    padding-top: 0 !important;
  }

  body.document-page .policy-banner{
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    height: 230px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body.document-page .policy-banner img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: left top !important;
    transform: none !important;
  }

  body.document-page{
    font-size: 18px !important;
  }

  body.document-page h1{
    font-size: 34px !important;
  }

  body.document-page h2{
    font-size: 26px !important;
  }

  body.document-page p{
    font-size: 18px !important;
    line-height: 1.7 !important;
  }

  body.document-page li{
    font-size: 18px !important;
    line-height: 1.7 !important;
  }
}



/* =========================================================
   DESKTOP FULL SCREEN ONLY — DOCUMENT PAGE BANNER
   Keep quarter/half as they are, refine only full desktop
   ========================================================= */
@media (min-width: 1367px) and (hover: hover) and (pointer: fine){

    body.document-page .policy-page{
    padding-top: 0 !important;
  }

  body.document-page .policy-banner{
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    height: 420px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body.document-page{
    font-size: 18px !important;
  }

  body.document-page h1{
    font-size: 34px !important;
  }

  body.document-page h2{
    font-size: 26px !important;
  }

  body.document-page p{
    font-size: 18px !important;
    line-height: 1.7 !important;
  }

  body.document-page li{
    font-size: 18px !important;
    line-height: 1.7 !important;
  }
  
  body.document-page .policy-banner img{
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: left center !important;

  image-rendering: -webkit-optimize-contrast;

  filter: contrast(1.05) brightness(1.02);
  }

    body.document-page .policy-banner img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: left -15px !important;
    transform: none !important;
  }

}



/* =====================================================
   LENOVO LANDSCAPE — INFO POPUP
   ===================================================== */
@media (min-width: 1080px) and (max-width: 1145px)
and (min-height: 540px) and (max-height: 620px)
and (orientation: landscape)
and (hover: none)
and (pointer: coarse){

/* anchor point for the popup */
  #chatPanel #ttsBar .tts-bar-head{
    position: relative !important;
  }

  /* popup bubble */
  #chatPanel #ttsInfoPopup{
  position: absolute !important;
  top: -158px !important;
  left: 0 !important;
  transform: translateX(40px) !important;

  width: min(660px, 90vw) !important;   /* make it wider */
  max-width: min(660px, 90vw) !important;

  background: #ffffff !important;
  border: 2px solid var(--ns-accent, #2d5196) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;

  font-size: clamp(20px, 3.2vw, 12.5px) !important;
  line-height: 1.35 !important;
  color: #073b72 !important;

  box-shadow: 0 12px 24px rgba(0,0,0,0.18) !important;
  z-index: 100 !important;
}

  /* speech-bubble pointer */
  #chatPanel #ttsInfoPopup::before{
    content: "" !important;
    position: absolute !important;
    left: 125px !important;
    bottom: -10px !important;

    width: 18px !important;
    height: 18px !important;

    background: #f2f2f2 !important;
    border-left: 2px solid var(--ns-accent, #2d5196) !important;
    border-bottom: 2px solid var(--ns-accent, #2d5196) !important;

    transform: rotate(-45deg) !important;
  }
}



/* =====================================================
   STEP 6C — DESKTOP ENQUIRIES BOTTOM SPACING POLISH
   Safe desktop-only cleanup
   ===================================================== */
@media (min-width: 900px) and (hover: hover) and (pointer: fine){

  #chatPanel .chat-disclaimer{
    padding: 4px 12px 10px !important;
    margin-top: 2px !important;
    text-align: center !important;
    line-height: 1.25 !important;
  }

  #chatPanel .tts-notes{
    padding: 0 12px 6px !important;
    margin-top: 0 !important;
    line-height: 1.25 !important;
  }
}



/* =====================================================
   STEP 7 — DESKTOP ENQUIRIES FINAL LOCK
   Keeps the working desktop setup stable
   ===================================================== */
@media (min-width: 900px) and (hover: hover) and (pointer: fine){

  /* panel shell */
  #chatPanel.chat{
    display: flex !important;
    flex-direction: column !important;
    height: calc(var(--vh, 1vh) * 100 - 16px) !important;
    max-height: calc(var(--vh, 1vh) * 100 - 16px) !important;
    overflow: hidden !important;
  }

  /* only body scrolls */
  #chatBody,
  #chatPanel .chat-body{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* footer controls stay fixed in panel flow */
  #chatPanel #chatForm,
  #chatPanel #resetChat,
  #chatPanel #ttsBar,
  #chatPanel .tts-notes,
  #chatPanel .chat-disclaimer{
    flex: 0 0 auto !important;
  }

  /* keep the working desktop audio row layout */
  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }

  #chatPanel #ttsBar .tts-bar-head{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  #chatPanel #ttsBar .tts-controls-row{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  /* final button consistency */
  #chatPanel .suggestions-toggle,
  #chatPanel #ttsBar .tts-btn,
  #chatPanel #nsSpeedBadge{
    transform: none !important;
  }
}



/* =====================================================
   DESKTOP — MODALS (About / Contact / Help)
   Make content larger + wider bubble
   ===================================================== */
@media (min-width: 900px) and (hover: hover) and (pointer: fine){

  /* main dropdown */
  #dropdownMenu.dropdown-menu{
    top: 76px !important;
    right: 14px !important;

    width: 250px !important;
    max-width: 250px !important;
    min-width: 250px !important;

    height: auto !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding: 14px 12px 12px !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.20) !important;
    z-index: 1000000 !important;
  }

  /* links inside main menu */
  #dropdownMenu a{
    font-size: 16px !important;
    line-height: 1.2 !important;
    padding: 10px 8px !important;
  }

  /* the close X in the main menu */
  #dropdownMenu .close-main-menu{
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }

  /* keep the language row neat */
  #menuLanguageToggle{
    gap: 8px !important;
    align-items: center !important;
  }

  /* language panel */
  #languageSubmenu.submenu-options,
  body > #languageSubmenu.submenu-options{
    width: 240px !important;
    max-width: 240px !important;
    min-width: 240px !important;

    max-height: 62vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    border-radius: 18px !important;
    padding: 42px 10px 10px !important;
    z-index: 1000001 !important;
  }

  #languageSubmenu a{
    font-size: 16px !important;
    padding: 10px 10px !important;
    gap: 10px !important;
  }

  #languageSubmenu img{
    width: 20px !important;
    height: 20px !important;
  }

  #languageSubmenu .close-language{
    top: 8px !important;
    right: 8px !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }


  /* modal container (the white box) */
  .modal-content{
    width: min(88%, 620px) !important;
    max-width: 620px !important;

    padding: 22px 20px 18px !important;
    border-radius: 20px !important;

    font-size: 16px !important;
    line-height: 1.45 !important;
  }

  /* headings inside modal */
  .modal-content h2,
  .modal-content h3{
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  /* paragraph text */
  .modal-content p{
    font-size: 20px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }

  /* links */
  .modal-content a{
    font-size: 16px !important;
  }

  /* close button (top right X) */
  .modal-content .close-modal{
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
    top: 10px !important;
    right: 10px !important;
  }

  /* overlay centering (extra polish) */
  .modal-overlay{
    padding: 20px !important;
    align-items: center !important;
    justify-content: center !important;
  }
}



/* =====================================================
   BOT HELP — POLISHED ANTENNA VERSION
   Anchored to large bot with tiny breakpoint nudges
   Paste at VERY END of styles.css
   ===================================================== */

/* ---------- Base wrapper ---------- */
.bot-wrap{
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  align-self: start;
  position: relative;
  display: inline-block;
  z-index: 2;
  pointer-events: none; /* button re-enabled below */
}

.bot-wrap .bot-large{
  display: block;
  position: relative;
  z-index: 1;
}

/* ---------- Help cluster ---------- */
.bot-wrap .bot-help{
  position: absolute;
  z-index: 4;
  pointer-events: auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  /* Base mobile-first position: antenna tip */
  left: 50%;
  top: 6%;
  transform: translate(-50%, -100%);
}

.bot-help-label{
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: #073b72;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}

.bot-help-icon{
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #39ff14;
  color: #073b72;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;

  box-shadow:
    0 0 0 2px rgba(255,255,255,0.9),
    0 0 12px rgba(57,255,20,0.55),
    0 4px 10px rgba(0,0,0,0.22);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bot-help-icon:active{
  transform: translateY(1px);
}

.bot-help-tooltip{
  display: none;
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);

  width: min(220px, 72vw);
  padding: 10px 12px;

  background: #ffffff;
  color: #073b72;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.22);

  font-size: 13px;
  line-height: 1.4;
  text-align: left;
}

.bot-help.show .bot-help-tooltip{
  display: block;
}

/* =====================================================
   MOBILE PORTRAIT
   ===================================================== */
@media (max-width: 520px) and (orientation: portrait){
  .bot-wrap .bot-help{
    left: 50%;
    top: 5%;
    transform: translate(-50%, -102%);
  }

  .bot-help-label{
    font-size: 13px !important;
    margin-bottom: 3px !important;
  }

  .bot-help-icon{
    width: 24px !important;
    height: 24px !important;
    font-size: 22px !important;
  }

  .bot-help-tooltip{
    width: min(210px, 78vw) !important;
    top: 36px !important;
    font-size: 12px !important;
  }
}

/* =====================================================
   MOBILE LANDSCAPE
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){
  .bot-wrap{
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .bot-wrap .bot-help{
    left: 50%;
    top: 32%;
    transform: translate(-50%, -102%);
  }

  .bot-help-label{
    font-size: 13px !important;
  }

  .bot-help-icon{
    width: 24px !important;
    height: 24px !important;
    font-size: 22px !important;
  }

  .bot-help-tooltip{
    width: 200px !important;
    top: 36px !important;
    font-size: 12px !important;
  }
}

/* =====================================================
   TABLET PORTRAIT
   ===================================================== */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait){
  .bot-wrap .bot-help{
    left: 49.9%;
    top: -1%;
    transform: translate(-50%, -104%);
  }

  .bot-help-label{
    font-size: 24px !important;
  }

  .bot-help-icon{
    width: 32px !important;
    height: 32px !important;
    font-size: 28px !important;
  }
}

/* =====================================================
   TABLET LANDSCAPE
   ===================================================== */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape){
  .bot-wrap{
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .bot-wrap .bot-help{
    left: 50%;
    top: 9.5%;
    transform: translate(-50%, -104%);
  }

  .bot-help-label{
    font-size: 24px !important;
  }

  .bot-help-icon{
    width: 32px !important;
    height: 32px !important;
    font-size: 28px !important;
  }
}


/* =====================================================
   DESKTOP QUARTER — NEED HELP LABEL + I ICON
   Paste at VERY END of styles.css
   ===================================================== */
@media (min-width: 900px) and (max-width: 1365px)
and (max-height: 431px)
and (hover: hover) and (pointer: fine){

  .bot-wrap{
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .bot-wrap .bot-help{
    position: absolute !important;
    left: 30% !important;
    top: 29.5% !important;
    transform: translate(-50%, -104%) !important;
  }

  .bot-wrap .bot-help .bot-help-label{
    font-size: 16px !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
  }

  .bot-wrap .bot-help .bot-help-icon{
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    font-size: 24px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* =====================================================
   DESKTOP HALF
   ===================================================== */
@media (min-width: 900px) and (max-width: 1366px) and (hover: hover) and (pointer: fine){
  .bot-wrap{
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .bot-wrap .bot-help{
    left: 28%;
    top: 53%;
    transform: translate(-50%, -104%);
  }

  .bot-help-label{
    font-size: 24px !important;
    margin-bottom: 4px !important;
  }

  .bot-help-icon{
    width: 38px !important;
    height: 38px !important;
    font-size: 34px !important;
  }
}

/* =====================================================
   DESKTOP FULL
   ===================================================== */
@media (min-width: 1367px) and (hover: hover) and (pointer: fine){
  .bot-wrap{
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .bot-wrap .bot-help{
    left: 31.5%;
    top: 49%;
    transform: translate(-50%, -106%);
  }

  .bot-help-label{
    font-size: 24px !important;
    margin-bottom: 4px !important;
  }

  .bot-help-icon{
    width: 38px !important;
    height: 38px !important;
    font-size: 34px !important;
  }

  .bot-help-tooltip{
    width: 220px !important;
    top: 40px !important;
    font-size: 13px !important;
  }
}




/* =====================================================
   MIC — READY / LISTENING GLOW
   ===================================================== */

#micStatus{
  display: none !important;
}

#micBtn.listening{
  box-shadow:
    0 0 0 4px rgba(57, 255, 20, 0.95),
    0 0 18px 6px rgba(57, 255, 20, 0.55),
    0 10px 25px rgba(0,0,0,0.22) !important;
  animation: micPulse 1.4s ease-in-out infinite;
}

@keyframes micPulse{
  0%{
    box-shadow:
      0 0 0 3px rgba(57,255,20,0.85),
      0 0 10px rgba(57,255,20,0.35),
      0 10px 25px rgba(0,0,0,0.22);
  }
  50%{
    box-shadow:
      0 0 0 6px rgba(57,255,20,1),
      0 0 22px rgba(57,255,20,0.65),
      0 10px 25px rgba(0,0,0,0.22);
  }
  100%{
    box-shadow:
      0 0 0 3px rgba(57,255,20,0.85),
      0 0 10px rgba(57,255,20,0.35),
      0 10px 25px rgba(0,0,0,0.22);
  }
}



/* =====================================================
   MIC BUTTON — REMOVE SQUARE FLASH / TAP HIGHLIGHT
   Safe fix for mobile + tablet
   Paste at VERY END of styles.css
   ===================================================== */

.mic,
#micBtn{
  position: relative !important;
  overflow: hidden !important;              /* clips any square flash */
  border-radius: 999px !important;          /* force perfect circle */
  background-clip: padding-box !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  outline: none !important;
  user-select: none !important;
  touch-action: manipulation !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;      /* helps mobile paint flicker */
}

/* keep the icon itself clean and circular area clipped */
#micBtn .mic-img,
#micBtn img,
.mic img{
  display: block !important;
  border-radius: 999px !important;
  background: transparent !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  pointer-events: none !important;
}

/* remove browser focus/tap backgrounds that can appear like a square */
.mic:focus,
.mic:active,
#micBtn:focus,
#micBtn:active,
#micBtn:focus-visible{
  outline: none !important;
  background-color: #0E5F6E !important;     /* keep your mic colour steady */
}

/* prevent pseudo-elements or temporary layers from peeking outside */
#micBtn::before,
#micBtn::after,
.mic::before,
.mic::after{
  border-radius: 999px !important;
}

/* listening state also stays circular */
#micBtn.listening,
#micBtn.ready{
  overflow: hidden !important;
  border-radius: 999px !important;
}



/* =====================================================
   ENQUIRIES — INFO ICON MATCH LANDING PAGE bot-help-icon
   Paste at VERY END of styles.css
   ===================================================== */

/* Base style for the Enquiries ⓘ button */
#chatPanel #ttsBar #ttsInfo.tts-info{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;

  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 42px !important;

  border-radius: 999px !important;
  border: 2px solid #202020 !important;
  background: #f4efe7 !important;
  color: #111 !important;

  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  font-family: "Manrope", sans-serif !important;
  text-align: center !important;

  box-shadow: 0 2px 0 rgba(0,0,0,0.18) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  appearance: none !important;
}

/* Keep hover/focus/active looking clean */
#chatPanel #ttsBar #ttsInfo.tts-info:hover,
#chatPanel #ttsBar #ttsInfo.tts-info:focus,
#chatPanel #ttsBar #ttsInfo.tts-info:focus-visible,
#chatPanel #ttsBar #ttsInfo.tts-info:active{
  background: #f4efe7 !important;
  color: #111 !important;
  border-color: #202020 !important;
  outline: none !important;
}

/* Slightly smaller on mobile portrait */
@media (max-width: 520px) and (orientation: portrait){
  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;

    flex: 0 0 36px !important;
    font-size: 20px !important;
  }
}

/* Match your landscape Enquiries row a bit better */
@media (max-width: 932px) and (orientation: landscape){
  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;

    flex: 0 0 40px !important;
    font-size: 21px !important;
  }
}

/* Desktop / wider tablet */
@media (min-width: 933px){
  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;

    flex: 0 0 42px !important;
    font-size: 22px !important;
  }
}




/* =====================================================
   LANDING PAGE — BOT HELP TOOLTIP WITH ICONS
   ===================================================== */

#botHelpTooltip{
  width: min(350px, 78vw) !important;
  padding: 12px 14px !important;
}

#botHelpTooltip .help-row{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

#botHelpTooltip .help-row:last-child{
  margin-bottom: 0 !important;
}

#botHelpTooltip .help-row img{
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  flex: 0 0 28px !important;
  display: block !important;
}

#botHelpTooltip .help-row p{
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}




/* =====================================================
   BOT HELP — CIRCULAR ICON STYLE
   ===================================================== */

/* circle container */
#botHelpTooltip .help-icon-circle{
  width: 36px;
  height: 36px;
  min-width: 36px;

  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border: 2px solid #2d5196;

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* icon inside */
#botHelpTooltip .help-icon-circle img{
  width: 65%;
  height: 65%;
  object-fit: contain;
}

/* emoji fallback */
#botHelpTooltip .help-emoji{
  font-size: 16px;
  line-height: 1;
}

#botHelpTooltip .help-row img[src*="mic"]{
  filter: brightness(0.5);
}




/* MODALS — Contact modal (form layout) */
.contact-container{
  max-width: 520px;
  margin: 0 auto;
}

.contact-header h2{
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
}

.contact-intro{
  font-size: 14px;
  margin-bottom: 18px;
}

.contact-info-card,
.contact-support-note{
  background: #f4f7fb;
  padding: 14px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.contact-info-card h3,
.contact-support-note h3{
  margin-bottom: 6px;
  font-size: 16px;
}

.contact-note{
  margin-top: 8px;
  font-size: 13px;
}

/* FORM LAYOUT */
.contact-grid{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-group{
  display: flex;
  flex-direction: column;
}

.form-group label{
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* INPUTS */
.contact-form input,
.contact-form select,
.contact-form textarea{
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #d1d5db;
  font-size: 14px;
  font-family: "Manrope", sans-serif;
}

/* FOCUS STATE */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: #2d5196;
}

/* BUTTON */
.contact-btn{
  width: 100%;
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(to bottom, #2a63b3, #1d4d99);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 6px 0 #123366;
}

.contact-btn:active{
  transform: translateY(2px);
  box-shadow: 0 3px 0 #123366;
}

/* SUCCESS MESSAGE */
.contact-success{
  margin-top: 10px;
  background: #e6f7ec;
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
}

/* CALLBACK NOTE BOX */
.callback-note-box{
  background: #fff8e6;
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
}

/* CONSENT */
.checkbox-label{
  display: flex;
  gap: 8px;
  font-size: 12px;
  align-items: flex-start;
}

/* HIDE ELEMENT */
.hidden{
  display: none;
}




/* ==========================******************===========================
   LARGE DESKTOP — VERTICAL AUTO-BALANCE ONLY
   Safe isolated block
   Goal:
   - keep current width behaviour
   - improve vertical balance on tall large desktops
   - do NOT affect mobile / tablet / smaller desktop queries
   Paste at VERY END of styles.css
   ===================================================== */
@media (min-width: 1600px) and (min-height: 900px) and (hover: hover) and (pointer: fine){

  /* Keep the same framed landing page width behaviour */
  .card{
    min-height: calc(100vh - 12px) !important;

    /* vertical balance only */
    align-content: stretch !important;
    row-gap: clamp(14px, 2.4vh, 32px) !important;

    /* keep your framed card feel */
    padding-top: clamp(14px, 1.8vh, 22px) !important;
    padding-bottom: clamp(14px, 1.8vh, 22px) !important;
  }

  /* Top row breathes a little without widening anything */
  .brand-top-left{
    margin-top: 0 !important;
  }

  .menu-toggle{
    margin-top: 0 !important;
  }

  /* Main bot stays same width logic; only vertical placement is balanced */
  .bot-wrap,
  .bot-large{
    align-self: center !important;
  }

  /* Intro stays same width logic; just sits in a more balanced vertical position */
  #introBlock{
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* CTA stack stays same width; vertical spacing becomes more natural */
  #ctaGroup{
    align-self: start !important;
    margin-top: 0 !important;
  }

  /* Assistant buttons stay same size logic; center vertically */
  .assistant{
    align-self: center !important;
    margin-top: 0 !important;
  }

  /* Footer is allowed to sit lower for tall screens */
  .site-footer{
    align-self: end !important;
    margin-top: 0 !important;
  }

  /* TOOLTIP — SCALE + MOVE RIGHT (SAFE) */
  .bot-wrap .bot-help-tooltip{
    transform: scale(1.4) translate(-60px, -260px);  /*moves right - moves up*/
    transform-origin: top left !important;

  }

  #chatPanel .chat-input{
  display: flex !important;
  justify-content: flex-start !important;   /* 🔥 keeps everything left */
  align-items: center !important;
  gap: 10px !important;
}

/* STOP input from stretching full width */
#chatPanel #chatText{
  flex: 0 1 auto !important;   /* 🔥 was 1 1 auto (this is the problem) */
  width: 60% !important;     /* adjust this to taste */
  max-width: 60% !important;
}

/* keep send button next to it */
#chatPanel .send{
  flex: 0 0 auto !important;
  left: 1140%;
  transform: translateX(-1140%);
}


  /* ===== LARGE DESKTOP — TYPOGRAPHY BOOST ===== */

/* MENU ICON (☰) */
.menu-toggle{
  font-size: clamp(60px, 4vw, 90px) !important;  /* bigger icon */
}

/* MENU TEXT ("Menu") */
.menu-toggle::before{
  font-size: clamp(18px, 1.2vw, 26px) !important;
}

/* INTRO TEXT */
#introBlock{
  font-size: clamp(40px, 1.6vw, 40px) !important;
  line-height: 1.25 !important;

  }

/* Default stays controlled by JS (display:none / display:block) */
  html body #dropdownMenu.dropdown-menu{
    height: auto !important;
    max-height: 20vh !important;   /* make shorter here */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 12px !important;
  }

  /* ONLY when JS opens it */
  html body #dropdownMenu.dropdown-menu[style*="display: block"],
  html body #dropdownMenu.dropdown-menu[style*="display:block"]{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Wrapper should not add empty height */
  html body #dropdownMenu .submenu-wrapper{
    display: contents !important;
    height: auto !important;
    min-height: 0 !important;

  }
}




/* ==========================******************===========================
   ULTRA-WIDE DESKTOP — LANDING PAGE SCALE UP
   FIXED: keep large bot + "Need help?" marker in sync
   Goal:
   - make very large desktop screens look like your screen
   - keep all current mobile/tablet/desktop queries untouched
   - apply ONLY to very large non-touch desktops
   Paste at VERY END of styles.css
   ===================================================== */
@media (min-width: 2200px) and (min-height: 1200px) and (hover: hover) and (pointer: fine){

  /* Main landing card */
  .card{
    width: min(1912px, calc(100vw - 32px)) !important;
    max-width: 1912px !important;
    min-height: calc(100vh - 16px) !important;

    margin: 8px auto !important;
    padding: 18px 26px 18px !important;

    row-gap: 18px !important;
    column-gap: 24px !important;
  }

  /* Logo */
  .brand-top-left img{
    width: 350px !important;
    margin-left: 20px !important;
    margin-top: 20px !important;

  }

  /* Menu icon + label */
  .menu-toggle{
    font-size: 128px !important;
    margin-left: -20px !important;
    margin-top: 20px !important;
  }

  .menu-toggle::before{
    font-size: 38px !important;
    margin-bottom: 2px !important;
  }

  /* Large bot area */
  .bot-wrap{
    grid-column: 1 !important;
    grid-row: 2 / 5 !important;
    justify-self: start !important;
    align-self: center !important;
    position: relative !important;
    margin-left: 42px !important;
  }

  .bot-wrap{
  position: relative !important;

  /* MOVE LEFT / RIGHT */
  margin-left: 40px !important;   /* ← adjust this */

  /* MOVE UP / DOWN */
  margin-top: -100px !important;    /* ← adjust this */

  /* OPTIONAL fine tuning (more precise) */
  transform: translate(0px, 0px) !important;
}


  /* FIX: lock Need help marker to bot */
  .bot-wrap .bot-help{
    position: absolute !important;
    left: 40% !important;
    top: 11.5% !important;
    transform: translate(-50%, -104%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    z-index: 3 !important;
  }

  .bot-wrap .bot-help-label{
    font-size: 34px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .bot-wrap .bot-help-icon{
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    font-size: 50px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .bot-wrap{
  position: relative !important;
  left: -90px !important;
  margin-top: 120px !important;
}


.bot-large{
  width: 680px !important;
  left: 9.9px !important;
  top: -145px !important;
}

  /* Intro */
  #introBlock{
    width: min(100%, 1100px) !important;
    max-width: 1000px !important;
    font-size: 54px !important;
    line-height: 1.18 !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  #introBlock{
    position: relative !important;
    top: -30px !important;   /* ↑ move UP */
  }

  #introBlock p,
  #introBlock div{
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* CTA group */
  #ctaGroup{
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    gap: 36px !important;
    margin-top: 0 !important;
  }

  #ctaGroup .btn{
    min-height: 106px !important;
    padding: 28px 36px !important;
    font-size: 52px !important;
    line-height: 1.15 !important;
    border-radius: 24px !important;
  }

  /* Assistant buttons */
  .assistant{
    gap: 18px !important;
    align-self: center !important;
    margin-top: 80px !important;
    left: -20px !important;

    --ga-fab-col-w: 158px;
  }

  .bot-fab,
  .mic{
    width: 158px !important;
    height: 158px !important;
  }

  /* Footer */
  .site-footer{
    width: min(1800px, 96%) !important;
    padding: 16px 20px !important;
    font-size: 24px !important;
    line-height: 1.22 !important;
    align-self: end !important;
    margin-top: -10 !important;
  }

  /* Default stays controlled by JS (display:none / display:block) */
  html body #dropdownMenu.dropdown-menu{
    height: auto !important;
    max-height: 20vh !important;   /* make shorter here */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 12px !important;
  }

  /* ONLY when JS opens it */
  html body #dropdownMenu.dropdown-menu[style*="display: block"],
  html body #dropdownMenu.dropdown-menu[style*="display:block"]{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Wrapper should not add empty height */
  html body #dropdownMenu .submenu-wrapper{
    display: contents !important;
    height: auto !important;
    min-height: 0 !important;
  }


    /* TOOLTIP — SCALE + MOVE RIGHT (SAFE) */
  .bot-wrap .bot-help-tooltip{
    transform: scale(1.4) translate(-60px, -260px);  /*moves right - moves up*/
    transform-origin: top left !important;

  }
}












/* =====================================================
   DESKTOP — FIX SEND BUTTON POSITION (LEFT ALIGN)
   ===================================================== */
@media (min-width: 1367px) and (hover: hover) and (pointer: fine){

#chatPanel .chat-input{
  display: flex !important;
  justify-content: flex-start !important;   /* 🔥 keeps everything left */
  align-items: center !important;
  gap: 10px !important;
}

/* STOP input from stretching full width */
#chatPanel #chatText{
  flex: 0 1 auto !important;   /* 🔥 was 1 1 auto (this is the problem) */
  width: 60% !important;     /* adjust this to taste */
  max-width: 60% !important;
}

/* keep send button next to it */
#chatPanel .send{
  flex: 0 0 auto !important;
  left: 840%;
  transform: translateX(-840%);

  } 
}


#ttsInfo .info-i{
  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid currentColor;

  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}



/* -----------------------------------------------------------------
   SAFE OVERRIDES ONLY — scroll enable (landing + enquiries fallback)
   Only when content is taller than screen; keep last in cascade intent.
   ----------------------------------------------------------------- */

/* Allow page to grow naturally */
html,
body{
  height: auto !important;
  min-height: 100%;
  overflow-y: auto !important;
}

/* Let card expand if needed */
.card{
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible !important;
}




/* =====================================================
   DESKTOP — DROPDOWN SHORT BUT STILL CLOSES
   Full / half / quarter desktop
   ===================================================== */
@media (min-width: 900px){

  /* Default stays controlled by JS (display:none / display:block) */
  html body #dropdownMenu.dropdown-menu{
    height: auto !important;
    max-height: 20vh !important;   /* make shorter here */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 12px !important;
  }

  /* ONLY when JS opens it */
  html body #dropdownMenu.dropdown-menu[style*="display: block"],
  html body #dropdownMenu.dropdown-menu[style*="display:block"]{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Wrapper should not add empty height */
  html body #dropdownMenu .submenu-wrapper{
    display: contents !important;
    height: auto !important;
    min-height: 0 !important;

   }
}


/* =====================================================
   LANGUAGE SUBMENU — WIDER (DESKTOP)
   ===================================================== */
@media (min-width: 900px){

  #languageSubmenu.submenu-options,
  body > #languageSubmenu.submenu-options{
    width: 320px !important;       /* 👈 increase this */
    max-width: 320px !important;
    min-width: 320px !important;
  }
}



/* =====================================================
   DESKTOP QUARTER — WIDER MENU (SAFE)
   Matches your 950px × 431 screen
   ===================================================== */

@media (min-width: 900px) and (max-width: 1365px)
and (max-height: 431px)
and (hover: hover) and (pointer: fine){

  /* Default stays controlled by JS (display:none / display:block) */
  html body #dropdownMenu.dropdown-menu{
    height: auto !important;
    max-height: 42vh !important;   /* make shorter here */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 12px !important;
  }

  /* ONLY when JS opens it */
  html body #dropdownMenu.dropdown-menu[style*="display: block"],
  html body #dropdownMenu.dropdown-menu[style*="display:block"]{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Wrapper should not add empty height */
  html body #dropdownMenu .submenu-wrapper{
    display: contents !important;
    height: auto !important;
    min-height: 0 !important;

   }
}



/* =====================================================
   LENOVO LANDSCAPE — DROPDOWN SHORT BUT STILL CLOSES
   ===================================================== */

@media (min-width: 1080px) and (max-width: 1145px)
and (min-height: 540px) and (max-height: 620px)
and (orientation: landscape)
and (hover: none)
and (pointer: coarse){

 /* Default stays controlled by JS (display:none / display:block) */
  html body #dropdownMenu.dropdown-menu{
    height: auto !important;
    max-height: 32vh !important;   /* make shorter here */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 12px !important;
  }

  /* ONLY when JS opens it */
  html body #dropdownMenu.dropdown-menu[style*="display: block"],
  html body #dropdownMenu.dropdown-menu[style*="display:block"]{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Wrapper should not add empty height */
  html body #dropdownMenu .submenu-wrapper{
    display: contents !important;
    height: auto !important;
    min-height: 0 !important;

   }
}



/* =====================================================
   CONTACT FORM — FONT SIZE FIX
   ===================================================== */

/* Labels (Full Name, Email etc) */
.contact-form label{
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Required star */
.contact-form label span{
  font-size: 20px !important;
}

/* Inputs text */
.contact-form input,
.contact-form select,
.contact-form textarea{
  font-size: 18px !important;
}

/* Consent text (VERY important fix) */
.checkbox-label{
  font-size: 20px !important;
  line-height: 1.4 !important;
}

/* Optional: make headings slightly stronger balance */
.contact-info-card h3,
.contact-support-note h3{
  font-size: 18px !important;
}

/* =====================================================
   CONTACT FORM — REQUIRED ASTERISK (RED)
   ===================================================== */

.contact-form label span{
  color: #e11d48 !important;   /* clean red */
  font-weight: 500;
}


/* =====================================================
   CONTACT BUTTON — BIGGER FONT
   ===================================================== */

.contact-btn{
  font-size: 24px !important;   /* increase size */
  font-weight: 600 !important;  /* make it stand out */
  letter-spacing: 0.3px;        /* subtle polish */
}




/* =====================================================
   SOFT LAUNCH TESTING BANNER
   Paste at VERY END of styles.css
   ===================================================== */
.testing-banner{
  position: fixed;
  top: 170px;
  z-index: 9999;

  width: auto;                /* not full width */
  max-width: 90%;           /* controls how wide it can be */
  margin: 0 auto;
  box-sizing: border-box;

  padding:12px 16px;
  text-align: center;

  background: #fff4d6;
  color: #5c4300;
  border-bottom: 1px solid #e5c977;

  font-family: inherit;
  font-size: clamp(16px, 2vw, 26px);
  font-weight: 600;
  line-height: 1.4;

  box-shadow: 0 2px 8px rgba(0,0,0,0.06);

  transition: transform 0.5s ease, opacity 0.5s ease;
 }

/* Hidden state */
 .testing-banner.hide{
  transform: translateY(-100%);
  opacity: 0;
}




/* =====================================================
   ENQUIRIES — MIC BUTTON NEXT TO SEND
   Paste at VERY END of styles.css
   ===================================================== */

/* Keep input + send + mic on one row */
#chatPanel .chat-input{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Let text box take remaining room */
#chatPanel #chatText{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Send stays natural width */
#chatPanel .send{
  flex: 0 0 auto !important;
}

/* New enquiries mic wrapper */
#chatPanel .enq-mic-wrap{
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* New enquiries mic button */
#chatPanel #enqMicBtn.enq-mic{
  width: var(--enq-input-h) !important;
  height: var(--enq-input-h) !important;
  min-width: var(--enq-input-h) !important;
  border-radius: 14px !important;
  border: none !important;
  background: #0E5F6E !important;
  box-shadow: 0 6px 0 rgba(0,0,0,0.22) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  cursor: pointer !important;
}

/* mic icon inside enquiries mic */
#chatPanel #enqMicBtn img{
  width: 58% !important;
  height: 58% !important;
  object-fit: contain !important;
}

/* pressed feel */
#chatPanel #enqMicBtn:active{
  transform: translateY(2px);
  box-shadow: 0 4px 0 rgba(0,0,0,0.22) !important;
}

/* listening state */
#chatPanel #enqMicBtn.listening,
#chatPanel #enqMicBtn.ready{
  outline: 3px solid rgba(14,95,110,0.22);
  outline-offset: 2px;
}

/* status bubble above enquiries mic */
#chatPanel .enq-mic-status{
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: max-content;
  max-width: 180px;

  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(7,59,114,0.95);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}

#chatPanel .enq-mic-status.show{
  opacity: 1;
  transform: translateY(0);
}

/* Small phones */
@media (max-width: 520px){
  #chatPanel .chat-input{
    gap: 6px !important;
  }

  #chatPanel .send{
    min-width: auto !important;
    padding: 0 12px !important;
  }
}



/* =====================================================
   ENQUIRIES MIC — MATCH LANDING MIC EXACTLY
   Paste at VERY END of styles.css
   ===================================================== */

#chatPanel .chat-input{
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;              /* tighter spacing */
}

/* input takes remaining room */
#chatPanel #chatText{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* send button stays compact */
#chatPanel .send{
  flex: 0 0 auto !important;
  margin-right: 0 !important;
}

/* remove any extra wrapper spacing */
#chatPanel .enq-mic-wrap{
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* make enquiries mic same round style as landing mic */
#chatPanel #enqMicBtn.enq-mic{
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 50% !important;    /* perfectly round */
  border: none !important;
  background: #0E5F6E !important;   /* same dark teal */
  box-shadow: 0 6px 0 rgba(0,0,0,0.22) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

/* same icon sizing feel as landing mic */
#chatPanel #enqMicBtn.enq-mic img,
#chatPanel #enqMicBtn.enq-mic .mic-img{
  width: 56% !important;
  height: 56% !important;
  object-fit: contain !important;
  display: block !important;
}

/* pressed feel */
#chatPanel #enqMicBtn.enq-mic:active{
  transform: translateY(2px) !important;
  box-shadow: 0 4px 0 rgba(0,0,0,0.22) !important;
}

/* keep listening outline if active */
#chatPanel #enqMicBtn.enq-mic.listening,
#chatPanel #enqMicBtn.enq-mic.ready{
  outline: 3px solid rgba(14,95,110,0.22) !important;
  outline-offset: 2px !important;
}

/* mic status bubble stays above mic */
#chatPanel .enq-mic-status{
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  right: 0 !important;
}

#chatPanel #enqMicBtn.enq-mic{
  transform: translateX(0px) translateY(0px);
}



/* =====================================================
   ENQUIRIES MIC — MATCH LANDING MIC EXACTLY
   Paste at VERY END of styles.css
   ===================================================== */

/* Base mic button: same clean circular feel as landing mic */
#chatPanel #enqMicBtn.enq-mic{
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;

  border-radius: 999px !important;
  border: none !important;
  outline: none !important;
  background: #0E5F6E !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  position: relative !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  user-select: none !important;
  touch-action: manipulation !important;
  backface-visibility: hidden !important;

  /* same depth feel as landing mic */
  box-shadow: 0 10px 25px rgba(0,0,0,0.22) !important;
}

/* icon */
#chatPanel #enqMicBtn.enq-mic img,
#chatPanel #enqMicBtn.enq-mic .mic-img{
  width: 56% !important;
  height: 56% !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 999px !important;
  background: transparent !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  pointer-events: none !important;
  filter: none !important;
}

/* remove dull focus/tap flash */
#chatPanel #enqMicBtn.enq-mic:focus,
#chatPanel #enqMicBtn.enq-mic:active,
#chatPanel #enqMicBtn.enq-mic:focus-visible{
  outline: none !important;
  background-color: #0E5F6E !important;
}

/* IMPORTANT: kill any older fake ring systems */
#chatPanel #enqMicBtn.enq-mic::before,
#chatPanel #enqMicBtn.enq-mic::after{
  content: none !important;
  display: none !important;
}

/* exact landing-style listening glow */
#chatPanel #enqMicBtn.enq-mic.listening,
#chatPanel #enqMicBtn.enq-mic.ready{
  box-shadow:
    0 0 0 3px rgba(57, 255, 20, 0.95),   /* thinner ring */
    0 0 10px 2px rgba(57, 255, 20, 0.35), /* tighter glow */
    0 10px 25px rgba(0,0,0,0.22) !important;

  animation: micPulse 1.4s ease-in-out infinite !important;
}


#chatPanel #chatForm{
  position: relative !important;
}

#chatPanel .enq-mic-wrap{
  position: absolute !important;
  right: 108px !important;            /* to move mic (+)left or (-)right*/
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
}

#chatPanel #chatText{
  padding-right: 56px !important;
}

#chatPanel .send{
  position: relative !important;
  z-index: 2 !important;

}



/* =====================================================
   ENQUIRIES — TEXT SHORTER, MIC ON FAR RIGHT
   Paste at VERY END of styles.css
   ===================================================== */

/* main row */
#chatPanel #chatForm,
#chatPanel .chat-input{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* text box becomes shorter automatically */
#chatPanel #chatText{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

/* mic sits to the right of the text box */
#chatPanel .enq-mic-wrap{
  flex: 0 0 auto !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* mic button */
#chatPanel #enqMicBtn{
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;

  border-radius: 999px !important;
  border: none !important;
  background: #0E5F6E !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* mic icon */
#chatPanel #enqMicBtn img,
#chatPanel #enqMicBtn .mic-img{
  width: 60% !important;
  height: 60% !important;
  object-fit: contain !important;
  display: block !important;
}

/* send stays on far right */
#chatPanel .send{
  flex: 0 0 auto !important;
}




/* =====================================================
   DESKTOP FULL — FORCE INPUT + SEND + MIC TO SHOW
   Paste at VERY END of styles.css
   ===================================================== */

@media (min-width: 1367px) and (max-width: 1919px)
and (hover: hover) and (pointer: fine){

  /* force a 3-part row:
     input | send | mic */
  #chatPanel #chatForm,
  #chatPanel .chat-input{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 0 !important;
  }

  /* input */
  #chatPanel #chatText{
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* send button */
  #chatPanel .send{
    grid-column: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 88px !important;
    height: 44px !important;
    width: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* mic wrapper */
  #chatPanel .enq-mic-wrap{
    grid-column: 3 !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* mic button */
  #chatPanel #enqMicBtn{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  #chatPanel #enqMicBtn img,
  #chatPanel #enqMicBtn .mic-img{
    width: 60% !important;
    height: 60% !important;
  }
}



/* =====================================================
   GLOBAL SETTING
   Goal:
   - less white space
   - more compact bubble area
   - input row higher
   - reset + controls tighter
   ===================================================== */

#chatPanel #chatForm.chat-input{
  position: sticky;
  bottom: 0px;   /* smaller number = moves row DOWN */
  z-index: 30;
  background: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}



/* =====================================================
   MOBILE LANDSCAPE — FORCE chatText + Send + mic BACK
   Changes ONLY the input row visibility
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){

  #chatPanel #chatForm,
  #chatPanel .chat-input{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    column-gap: 8px !important;

    position: sticky !important;
    bottom: 70px !important;
    z-index: 200 !important;

    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;

    background: #ffffff !important;
    margin: 0 !important;
    padding: 6px 10px 4px !important;
  }

  #chatPanel #chatText{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    min-width: 0 !important;
    width: 100% !important;
    height: 35px !important;
  }

  #chatPanel .send{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;

    height: 35px !important;
    min-width: 82px !important;
  }

  #chatPanel #micBtn,
  #chatPanel .mic,
  #chatPanel .chat-input .mic{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    overflow: visible !important;
  }
}



/* =====================================================
   MOBILE LANDSCAPE — SLIM CHAT INPUT ROW
   ===================================================== */

  /* Reduce vertical padding of the whole row */
  #chatPanel #chatForm,
  #chatPanel .chat-input{
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    min-height: unset !important;
  }

  /* Make the input itself tighter */
  #chatPanel #chatText{
    height: 32px !important;       /* was ~40–46 */
    line-height: 32px !important;
  }

  /* Match button heights to input */
  #chatPanel .send{
    height: 36px !important;
  }

  #chatPanel #micBtn,
  #chatPanel .mic,
  #chatPanel .chat-input .mic{
    height: 36px !important;
    min-height: 36px !important;
  }

#chatPanel .chat-header{
  position: relative !important;
}

#chatPanel #resetChat{
  position: absolute !important;
  top: 10px !important;
  right: 58px !important;

  z-index: 200 !important;

  height: 25px !important;
  min-height: 25px !important;
  max-height: 25px !important;
  line-height: 25px !important;

  width: auto !important;
  min-width: 30px !important;
  max-width: max-content !important;

  padding: 0 4px !important;
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  align-self: auto !important;

  font-size: 13px !important;
  border-radius: 8px !important;
  border: none !important;

  background: #6b7280 !important;
  color: #fff !important;

  box-sizing: border-box !important;

  bottom: auto !important;
  left: auto !important;

  }
}


.testing-banner{
  pointer-events: none !important;
}

.testing-banner.hide{
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden !important;
}



#chatPanel #ttsInfoPopup{
  position: absolute !important;
  top: clamp(30px, -2vw, 34px) !important;   /* ⬅️ moved UP */
  left: 7px !important;

  transform: translateY(-100%) !important;  /* ⬅️ anchors above icon */

  max-width: min(320px,128vw) !important;

  background: #ffffff !important;
  border: 2px solid var(--ns-accent, #2d5196) !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;

  font-size: clamp(11px, 3.2vw, 12.5px) !important;
  line-height: 1.3 !important;
  color: #073b72 !important;

  box-shadow: 0 12px 24px rgba(0,0,0,0.18) !important;
  z-index: 100 !important;
}

#chatPanel #ttsInfoPopup::before{
  display: none !important;
  content: none !important;
}




/* =========================================
   TTS INFO POPUP — FORCE TO FRONT
   ========================================= */

#chatPanel #ttsInfoPopup{
  z-index: 9999 !important;          /* ⬅️ bring to front */
  position: absolute !important;
}

/* Make sure parent doesn't block it */
#chatPanel #ttsBar{
  position: relative !important;
  z-index: 100 !important;
}

/* LOWER the input row layer (important) */
#chatPanel #chatForm,
#chatPanel .chat-input{
  z-index: 10 !important;
  position: relative !important;
}

/* LOWER send + mic if needed */
#chatPanel .send,
#chatPanel #micBtn{
  position: relative !important;
  z-index: 10 !important;
}



/* =====================================================
   MOBILE LANDSCAPE — LOCK INPUT ROW TO BOTTOM
   (chat-text + send + mic fix)
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){

  /* Make panel a proper vertical layout */
  #chatPanel{
    display: flex !important;
    flex-direction: column !important;
  }

  /* Chat body takes available space */
  #chatBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;

    /* IMPORTANT: space for input + tts */
    padding-bottom: 140px !important;
  }

  /* 🔥 INPUT ROW — LOCKED POSITION */
  #chatPanel #chatForm,
  #chatPanel .chat-input{
    position: sticky !important;
    bottom: 70px !important;   /* sits ABOVE TTS/reset */

    z-index: 60 !important;

    margin: 0 !important;
    background: #ffffff !important;
  }

  /* Keep buttons aligned nicely */
  #chatPanel #chatText{
    height: 36px !important;
  }

  #chatPanel .send{
    height: 36px !important;
  }

  #chatPanel #micBtn,
  #chatPanel .mic{
    height: 36px !important;
  }

  /* TTS bar stays at bottom */
  #chatPanel #ttsBar{
    position: sticky !important;
    bottom: 0 !important;
    z-index: 70 !important;
    background: #ffffff !important;
  }

  /* Reset chat just above TTS */
  #chatPanel #resetChat{
    position: sticky !important;
    bottom: 45px !important;
    z-index: 65 !important;
  }
}


/* =====================================================
   DESKTOP FULL — TTS INFO POPUP FONT ENLARGE
   (safe, no overlap with tablet/mobile)
   ===================================================== */
@media (min-width: 900px){

  #chatPanel #ttsInfoPopup{
    font-size: clamp(16px, 1.2vw, 18px) !important;
    line-height: 1.45 !important;
    padding: 14px 16px !important;
    max-width: 420px !important;  /* optional: gives text room */
  }

}




/* =====================================================
   DESKTOP FULL SCREEN — RESTORE SEND BUTTON
   Fix hidden Send button pushed off-screen
   Paste at VERY END of styles.css
   ===================================================== */
@media (min-width: 900px){

  #chatPanel .chat-input{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  #chatPanel #chatText{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  #chatPanel .send{
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    visibility: visible !important;
    opacity: 1 !important;
  }
}




/* =========================================================
   CHATBOT — NEXT STEPS BLOCK
   Paste at VERY END of styles.css
   ========================================================= */

.ns-next-steps{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.ns-next-steps-title{
  font-weight: 800;
  margin-bottom: 6px;
  font-size: 14px;
  color: inherit;
}

.ns-next-steps-list{
  margin: 0;
  padding-left: 18px;
}

.ns-next-steps-list li{
  margin: 0 0 4px 0;
  line-height: 1.35;
}

.ns-links {
  margin-top: 10px;
}

.ns-links-title {
  font-weight: 800;
  margin-bottom: 5px;
  font-size: 14px;
}

.ns-links-list {
  margin: 0;
  padding-left: 18px;
}

.ns-links-list li {
  margin-bottom: 4px;
}

.ns-links a {
  color: #2d5196;
  text-decoration: underline;
}

.ns-next-steps a {
  color: #2d5196;
  text-decoration: underline;
  cursor: pointer;
}



/* =====================================================
   iPHONE / MOBILE PORTRAIT — STOP SAFARI INPUT ZOOM
   Paste at VERY END of styles.css
   ===================================================== */
@media (max-width: 520px) and (orientation: portrait) {
  #chatPanel #chatText,
  #chatPanel input,
  #chatPanel textarea,
  #chatPanel select {
    font-size: 16px !important;
  }
}

/* =====================================================
   MOBILE LANDSCAPE ONLY — RESET BESIDE CLOSE (X)
   Final override: cancel bottom-sticky reset placement.
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){
  #chatPanel{
    position: relative !important;
  }

  #chatPanel #resetChat{
    position: absolute !important;
    top: 8px !important;
    right: 48px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 200 !important;
  }
}




/* =====================================================
   MOBILE LANDSCAPE — INPUT ROW FINAL POLISH
   Fix actual Enquiries mic (#enqMicBtn), not landing .mic
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){

  #chatBody{
    padding-bottom: 112px !important;
  }

  #chatPanel #chatForm,
  #chatPanel .chat-input{
    bottom: 65px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  #chatPanel #chatText{
    height: 30px !important;
    min-height: 30px !important;
  }

  #chatPanel .send{
    height: 30px !important;
    min-height: 30px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* This is the real chat mic button */
  #chatPanel #enqMicBtn,
  #chatPanel #enqMicBtn.enq-mic{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    flex: 0 0 34px !important;
  }

  #chatPanel #enqMicBtn img,
  #chatPanel #enqMicBtn .mic-img{
    width: 66% !important;
    height: 66% !important;
  }
}



/* =========================================
   SEARCH PAGE — SAFE ISOLATED STYLES
   ========================================= */

.search-page {
  font-family: 'Manrope', sans-serif;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

/* HEADER */
.search-header {
  text-align: center;
  margin-bottom: 30px;
}

.search-header h1 {
  font-size: clamp(22px, 3vw, 32px);
  margin-bottom: 8px;
  color: #2d5196;
}

.search-header p {
  font-size: clamp(14px, 2vw, 16px);
  color: #555;
}

/* FILTERS */
.search-filters {
  background: #f7f9fc;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-bottom: 30px;
}

.filter-group {
  margin-bottom: 15px;
}

.filter-group label {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
  color: #333;
}

.filter-group input,
.filter-group select {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ddd;
  font-size: 14px;
}

/* SEARCH BUTTON */
.search-btn {
  width: 100%;
  padding: 12px;
  background: #2d5196;
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

.search-btn:hover {
  background: #1f3e7a;
}

/* RESULTS */
.search-results h2 {
  font-size: 20px;
  margin-bottom: 15px;
}

.results-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* RESULT CARD (for next steps) */
.result-card {
  padding: 15px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #eee;
  box-shadow: 0 3px 8px rgba(0,0,0,0.04);
}



/* =========================================
   SEARCH PAGE — PREMIUM CARD UPGRADE
   ========================================= */

.result-card {
  padding: 18px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #eee;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.result-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

/* HEADER */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.card-header h3 {
  font-size: 18px;
  color: #2d5196;
}

/* PROVIDER TYPE BADGE */
.provider-type {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.provider-type.registered {
  background: #e3f3ec;
  color: #1f7a5a;
}

.provider-type.unregistered {
  background: #f5ede6;
  color: #8b5e3c;
}

/* BODY */
.card-body p {
  font-size: 14px;
  margin: 4px 0;
}

/* FOOTER */
.card-footer {
  margin-top: 12px;
}

.view-btn {
  width: 100%;
  padding: 10px;
  border-radius: 999px;
  border: none;
  background: #2d5196;
  color: white;
  font-size: 14px;
  cursor: pointer;
}

.view-btn:hover {
  background: #1f3e7a;
}



/* =========================================
   SEARCH PAGE — LOGO + RATING UPGRADE
   ========================================= */

.provider-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.provider-logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #2d5196;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

.provider-info h3 {
  margin: 0 0 4px;
  font-size: 20px;
  color: #2d5196;
}

.provider-rating {
  font-size: 14px;
  color: #444;
}

.provider-rating span {
  color: #777;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.card-body {
  margin-top: 14px;
}



/* =========================================
   CHAT CTA UPGRADE — SEARCH + GUIDED HELP
   ========================================= */

#chatPanel .ns-cta-group{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px 0;
}

#chatPanel .ns-cta-group .ns-intake-cta{
  margin: 0 !important;
}

#chatPanel .ns-search-cta:hover,
#chatPanel .ns-guided-cta:hover,
#chatPanel .ns-provider-first-time-cta:hover{
  transform: translateY(-1px);
}

#chatPanel.mode-provider .ns-provider-first-time-cta,
#chatPanel .ns-cta-group[data-intake="provider"] .ns-provider-first-time-cta{
  background: #249b8f !important;
  border: 2px solid #1d7f75 !important;
  color: #ffffff !important;
}



/* =========================================
   SEARCH PAGE — CLEAN CARD ACTIONS
   ========================================= */

.search-page .card-actions{
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.search-page .card-actions .view-btn,
.search-page .card-actions .contact-provider-btn{
  flex: unset;          /* changed */
  width: auto;          /* added */
  min-width: 160px;     /* added */
  padding: 10px 18px;   /* added */

  min-height: 44px;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.search-page .card-actions .view-btn{
  background: #eef3fb;
  color: #2d5196;
  border: 2px solid #2d5196;
}

.search-page .card-actions .contact-provider-btn{
  background: #2d5196;
  color: #ffffff;
  border: 2px solid #2d5196;
}

.search-page .card-actions .view-btn:hover,
.search-page .card-actions .contact-provider-btn:hover{
  transform: translateY(-1px);
}

@media (max-width: 640px){
  .search-page .card-actions{
    flex-direction: column;
  }
}



/* ================================
   CONTACT PANEL (RIGHT SLIDE)
================================ */

.contact-panel{
  position: fixed;
  top: 50%;
  right: -420px;                 /* hidden position */
  transform: translateY(-50%);
  width: 360px;
  max-width: calc(100% - 32px);
  height: auto;
  max-height: 78vh;

  background: #f9fbff;
  box-shadow: -6px 0 25px rgba(0,0,0,0.15);
  transition: right 0.3s ease;
  z-index: 9999;

  border-radius: 18px;           /* rounds all corners, including left side */
  overflow: hidden;
}

.contact-panel.active{
  right: 18px;                   /* keeps it slightly indented from edge */
}

.contact-panel-content{
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 78vh;
  overflow-y: auto;   /* 👈 allows scrolling inside */
}

.contact-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.contact-header h3{
  font-size: 18px;
  font-weight: 800;
}

#closeContactPanel{
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

#contactForm{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#contactForm input,
#contactForm select,
#contactForm textarea{
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-family: inherit;
}

.send-btn{
  margin-top: 10px;
  padding: 12px;
  border-radius: 999px;
  border: none;
  background: #2d5196;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.contact-panel{
  background: #f9fbff;
}

.contact-header{
  border-bottom: 1px solid #e5eaf3;
  padding-bottom: 10px;
}

.contact-header h3{
  font-size: 16px;
  font-weight: 800;
  color: #2d5196;
}

#contactForm input,
#contactForm select,
#contactForm textarea{
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #d6dbe6;
}

.panel-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9998;
}

.panel-overlay.active{
  opacity: 1;
  pointer-events: all;
}




@media (max-width: 600px){
  .contact-panel{
    top: 0;
    right: -100%;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  .contact-panel.active{
    right: 0;
  }

  .contact-panel-content{
    max-height: 100vh;
  }
}

/* =====================================================
   EMBEDDED GOOGLE FORM MODALS — larger, cleaner display
   ===================================================== */

#participantFormModal,
#providerFormModal {
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
}

#participantFormModal .ga-form-modal-content,
#providerFormModal .ga-form-modal-content {
  width: min(96vw, 980px) !important;
  height: min(92vh, 900px) !important;
  max-width: none !important;
  max-height: none !important;
  padding: 12px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}

#participantFormFrame,
#providerFormFrame {
  width: 100% !important;
  height: calc(92vh - 50px) !important;
  min-height: 0 !important;
  border: 0 !important;
  display: block !important;
}

/* =====================================================
   GOOGLE FORM MODAL — spacing + usability fixes
   ===================================================== */

/* Move close button inward */
#participantFormModal .close-modal,
#providerFormModal .close-modal {
  top: 10px !important;
  right: 14px !important;
  z-index: 10 !important;
}

/* Give iframe full usable height (fix clipped Next button) */
#participantFormFrame,
#providerFormFrame {
  height: calc(100% - 20px) !important;
}

/* Ensure modal content uses full height properly */
#participantFormModal .ga-form-modal-content,
#providerFormModal .ga-form-modal-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* Ensure iframe expands correctly */
#participantFormFrame,
#providerFormFrame {
  flex: 1 !important;
  min-height: 0 !important;
}

/* =====================================================
   CUSTOM GUIDE ASSIST INTAKE FORMS
   ===================================================== */

.ga-form {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 20px;
  overflow-y: auto;
  font-family: "Manrope", sans-serif;
}

.ga-form h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 4vw, 34px);
  color: #073b72;
  text-align: center;
}

.ga-form p {
  margin: 0 0 22px;
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.5;
  text-align: center;
  color: #2f3e46;
}

.ga-form label {
  display: block;
  margin: 16px 0 6px;
  font-size: clamp(16px, 2.5vw, 19px);
  font-weight: 800;
  color: #073b72;
}

.ga-form input,
.ga-form select,
.ga-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid #b8d8d0;
  border-radius: 14px;
  font-size: clamp(16px, 2.5vw, 18px);
  font-family: "Manrope", sans-serif;
  color: #073b72;
  background: #ffffff;
}

.ga-form textarea {
  min-height: 110px;
  resize: vertical;
}

.ga-form input:focus,
.ga-form select:focus,
.ga-form textarea:focus {
  outline: 3px solid rgba(37, 99, 235, 0.25);
  border-color: #2563eb;
}

.ga-form button[type="submit"] {
  width: 100%;
  margin-top: 24px;
  min-height: 54px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(to bottom, #2a63b3, #1d4d99);
  color: #ffffff;
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 0 #123366;
}

.ga-form button[type="submit"]:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #123366;
}

#participantSuccess {
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: #e8f7ef;
  border: 2px solid #1f7a4d;
  color: #0b3b27;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

/* =====================================================
   CUSTOM PARTICIPANT FORM — BRAND BANNER + SUBMIT STATE
   ===================================================== */

.ga-form-banner {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(135deg, #e9f3f0, #ffffff);
  border: 2px solid #b8d8d0;
}

.ga-form-banner img {
  width: min(260px, 80%);
  height: auto;
  display: block;
}

.ga-form button[type="submit"]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* =====================================================
   PARTICIPANT FORM — BANNER, STICKY TITLE, TALLER MODAL
   ===================================================== */

#participantFormModal .ga-form-modal-content {
  height: min(96vh, 980px) !important;
}

#participantIntakeForm {
  max-height: calc(96vh - 40px) !important;
  overflow-y: auto !important;
  padding-bottom: 80px !important;
}

#participantIntakeForm .ga-form-banner {
  padding: 0 !important;
  overflow: hidden !important;
  background: #e9f3f0 !important;
}

#participantIntakeForm .ga-form-banner img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
}

.ga-form-sticky-title {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, 0.96);
  padding: 10px 0 12px;
  border-bottom: 1px solid rgba(184, 216, 208, 0.7);
}

.ga-form-sticky-title h2 {
  margin-top: 0 !important;
}

.ga-form-sticky-title p {
  margin-bottom: 0 !important;
}

/* =====================================================
   PARTICIPANT FORM — SLIMMER BANNER
   ===================================================== */

#participantIntakeForm .ga-form-banner {
  height: 110px !important;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

#participantIntakeForm .ga-form-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================
   FIX BANNER HEIGHT OVERRIDE
   ===================================================== */

#participantIntakeForm .ga-form-banner img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* =====================================================
   FIX BANNER FIT (NO CROPPING)
   ===================================================== */

#participantIntakeForm .ga-form-banner {
  height: auto !important;
  max-height: 140px;
  display: block;
}

#participantIntakeForm .ga-form-banner img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* =====================================================
   PARTICIPANT FORM — COMPACT BRAND HEADER
   ===================================================== */

#participantIntakeForm .ga-form-banner {
  display: none !important;
}

.ga-form-compact-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #e9f3f0, #ffffff);
  border: 2px solid #b8d8d0;
}

.ga-form-compact-brand img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.ga-form-compact-brand div {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.ga-form-compact-brand strong {
  font-size: clamp(24px, 4vw, 34px);
  color: #4f97a0;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.ga-form-compact-brand span {
  font-size: clamp(15px, 2.2vw, 18px);
  color: #073b72;
  font-weight: 800;
}

/* =====================================================
   RESTORE ORIGINAL BANNER PROPORTIONS
   ===================================================== */

#participantIntakeForm .ga-form-banner {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  margin-bottom: 16px;
  background: none !important;
  border: none !important;
}

#participantIntakeForm .ga-form-banner img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
  border-radius: 18px;
}

/* =====================================================
   APPLY BANNER FIX TO PROVIDER FORM
   ===================================================== */

#providerIntakeForm .ga-form-banner {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  margin-bottom: 16px;
  background: none !important;
  border: none !important;
}

#providerIntakeForm .ga-form-banner img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
  border-radius: 18px;
}

/* =====================================================
   PROVIDER FORM — SECTION + SUCCESS STYLING
   ===================================================== */

#providerSuccess {
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: #e8f7ef;
  border: 2px solid #1f7a4d;
  color: #0b3b27;
  font-size: 17px;
  font-weight: 800;
  text-align: center;
}

.ga-form-section-title {
  margin: 26px 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #e9f3f0;
  border-left: 6px solid #4f97a0;
  color: #073b72;
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 900;
}

.ga-checkbox-group {
  display: grid;
  gap: 10px;
  margin: 8px 0 14px;
  padding: 14px;
  border: 2px solid #b8d8d0;
  border-radius: 14px;
  background: #ffffff;
}

.ga-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: clamp(15px, 2.3vw, 17px);
  font-weight: 700;
  color: #073b72;
}

.ga-checkbox-group input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-height: 22px;
  flex: 0 0 auto;
}

/* =====================================================
   FIX RADIO BUTTON GROUP FORMATTING
   ===================================================== */

.ga-checkbox-group label {
  justify-content: flex-start !important;
  text-align: left !important;
}

.ga-checkbox-group input[type="radio"] {
  width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  flex: 0 0 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ga-checkbox-group input[type="radio"] + span,
.ga-checkbox-group label {
  line-height: 1.3 !important;
}

/* =====================================================
   FIX RADIO ALIGNMENT (INLINE TEXT)
   ===================================================== */

.ga-checkbox-group label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
}

.ga-checkbox-group {
  display: grid !important;
  grid-template-columns: 1fr !important;
}

/* =====================================================
   REDUCE SIDE WHITESPACE — WIDER FORMS
   ===================================================== */

/* Make modal content wider */
#participantFormModal .ga-form-modal-content,
#providerFormModal .ga-form-modal-content {
  max-width: 900px !important;
  width: 95% !important;
}

/* Reduce internal padding */
#participantIntakeForm,
#providerIntakeForm {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Let inputs stretch fully */
.ga-form input,
.ga-form textarea,
.ga-form select {
  width: 100% !important;
}

/* Improve section spacing */
.ga-form {
  max-width: 100% !important;
}

/* =====================================================
   FINAL INTAKE FORM LAYOUT FIXES
   ===================================================== */

/* Move close button away from modal scrollbar */
#participantFormModal .close-modal,
#providerFormModal .close-modal {
  top: 14px !important;
  right: 44px !important;
  z-index: 999999 !important;
}

/* Remove sticky header behaviour */
.ga-form-sticky-title {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
}

/* Fix checkbox/radio group layout */
.ga-checkbox-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 14px !important;
  overflow: visible !important;
}

/* Keep option rows aligned left */
.ga-checkbox-group label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: auto !important;
  max-width: 100% !important;
  text-align: left !important;
  white-space: normal !important;
}

/* Stop global input width rule from stretching checkboxes/radios */
.ga-checkbox-group input[type="checkbox"],
.ga-checkbox-group input[type="radio"] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  flex: 0 0 22px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make option text stay beside the checkbox/radio */
.ga-checkbox-group label,
.ga-checkbox-group label * {
  line-height: 1.35 !important;
}

/* =====================================================
   PARTICIPANT MATCH RESULTS
   ===================================================== */

.ga-match-results {
  margin-top: 18px;
}

.ga-match-results h3 {
  margin: 18px 0 12px;
  color: #073b72;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 900;
  text-align: center;
}

.ga-match-card {
  background: #ffffff;
  border: 2px solid #d7ebe6;
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.ga-match-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.ga-match-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #2a63b3;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  flex: 0 0 auto;
}

.ga-match-title-wrap {
  flex: 1;
}

.ga-match-title-wrap h4 {
  margin: 0 0 6px;
  color: #204f9f;
  font-size: 20px;
  font-weight: 900;
}

.ga-best-match {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f7ef;
  color: #047857;
  font-size: 13px;
  font-weight: 900;
}

.ga-provider-status {
  padding: 5px 10px;
  border-radius: 999px;
  background: #e8f7ef;
  color: #047857;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.ga-match-card p {
  margin: 6px 0;
  color: #073b72;
  font-size: 15px;
  line-height: 1.4;
}

.ga-no-matches {
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  background: #fff7ed;
  border: 2px solid #f59e0b;
  color: #7c2d12;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 932px) and (orientation: landscape) {
  .bot-wrap .bot-help-tooltip {
    left: 50vw !important;
    top: 50dvh !important;
    right: auto !important;
    bottom: auto !important;

    transform: translate(-50%, -50%) !important;
    transform-origin: center center !important;

    width: min(92vw, 520px) !important;
    max-height: calc(100dvh - 20px) !important;

    margin: 0 !important;
    z-index: 100002 !important;
  }
}

/* =====================================================
   STICKY CLOSE — About / Help / Contact + Language submenu
   Scroll only the body; header + × stay visible.
   Scoped to #aboutModal, #helpModal, #contactModal, #languageSubmenu only.
   ===================================================== */

#aboutModal .modal-content.ga-modal-with-sticky-close,
#helpModal .modal-content.ga-modal-with-sticky-close,
#contactModal .modal-content.ga-modal-with-sticky-close{
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

#contactModal .modal-content.ga-modal-with-sticky-close > .contact-section{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
}

#contactModal .modal-content.ga-modal-with-sticky-close .contact-container{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#aboutModal .ga-modal-scroll-body,
#helpModal .ga-modal-scroll-body,
#contactModal .ga-modal-scroll-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

#aboutModal .ga-modal-sticky-header,
#helpModal .ga-modal-sticky-header,
#contactModal .ga-modal-sticky-header{
  flex: 0 0 auto !important;
  position: relative !important;
  width: 100% !important;
  padding-top: 4px !important;
  padding-bottom: 2px !important;
}

#contactModal .ga-modal-sticky-header h2{
  font-size: 22px !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}

/*
 * Sticky modal × — vertically centre on the header band.
 * Overrides .modal-content .close-modal { top:16px; transform:none !important }
 * which capped earlier small top tweaks; transform must win here (higher specificity).
 */
#aboutModal .ga-modal-sticky-header .close-modal,
#helpModal .ga-modal-sticky-header .close-modal,
#contactModal .ga-modal-sticky-header .close-modal{
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 16px !important;
}

@media (min-width: 680px) and (max-width: 1024px) and (orientation: portrait){
  #aboutModal .ga-modal-sticky-header .close-modal,
  #helpModal .ga-modal-sticky-header .close-modal,
  #contactModal .ga-modal-sticky-header .close-modal{
    right: 10px !important;
  }
}

@media (min-width: 1080px) and (max-width: 1145px)
  and (min-height: 540px) and (max-height: 620px)
  and (orientation: landscape)
  and (hover: none)
  and (pointer: coarse){
  #aboutModal .ga-modal-sticky-header .close-modal,
  #helpModal .ga-modal-sticky-header .close-modal,
  #contactModal .ga-modal-sticky-header .close-modal{
    right: 10px !important;
  }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine){
  #aboutModal .ga-modal-sticky-header .close-modal,
  #helpModal .ga-modal-sticky-header .close-modal,
  #contactModal .ga-modal-sticky-header .close-modal{
    right: 10px !important;
  }
}

/* Mobile: wider side padding on title so centred text clears the × (was .modal-content h2 40px) */
@media (max-width: 679px){
  #aboutModal .ga-modal-sticky-header h2,
  #helpModal .ga-modal-sticky-header h2,
  #contactModal .ga-modal-sticky-header h2{
    padding-left: 56px !important;
    padding-right: 56px !important;
  }
}

/* About + Contact only: compact QR in sticky header (balances ×); Help modal unchanged */
#aboutModal .ga-modal-sticky-header--with-qr,
#contactModal .ga-modal-sticky-header--with-qr{
  min-height: 44px !important;
}

#aboutModal .ga-modal-sticky-header--with-qr .ga-qr-header-slot,
#contactModal .ga-modal-sticky-header--with-qr .ga-qr-header-slot{
  position: absolute !important;
  left: clamp(6px, 2vw, 12px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
  line-height: 0 !important;
}

#aboutModal .ga-modal-sticky-header--with-qr .ga-qr-header-link,
#contactModal .ga-modal-sticky-header--with-qr .ga-qr-header-link{
  display: inline-block !important;
  line-height: 0 !important;
  border-radius: 4px !important;
}

#aboutModal .ga-modal-sticky-header--with-qr .ga-qr-header-link:focus-visible,
#contactModal .ga-modal-sticky-header--with-qr .ga-qr-header-link:focus-visible{
  outline: 2px solid #2d5196 !important;
  outline-offset: 2px !important;
}

#aboutModal .ga-modal-sticky-header--with-qr .ga-qr-header-img,
#contactModal .ga-modal-sticky-header--with-qr .ga-qr-header-img{
  display: block !important;
  width: clamp(50px, 12.5vw, 60px) !important;
  max-width: 60px !important;
  height: auto !important;
}

#aboutModal .ga-modal-sticky-header--with-qr h2,
#contactModal .ga-modal-sticky-header--with-qr h2{
  padding-left: clamp(52px, 13.5vw, 66px) !important;
  padding-right: clamp(46px, 12vw, 58px) !important;
  box-sizing: border-box !important;
}

@media (max-width: 679px){
  #aboutModal .ga-modal-sticky-header--with-qr h2,
  #contactModal .ga-modal-sticky-header--with-qr h2{
    padding-left: clamp(54px, 14vw, 68px) !important;
    padding-right: 56px !important;
  }
}

/* Phase 2 modals — safe wrap for long translated copy */
#aboutModal .ga-modal-scroll-body,
#contactModal .ga-modal-scroll-body,
#helpModal .ga-modal-scroll-body {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#aboutModal [data-i18n="aboutWhatInformationTitle"],
#aboutModal [data-i18n="aboutWhatDiscoveryTitle"],
#aboutModal [data-i18n="aboutWhatConnectionTitle"] {
  font-size: 1.08em !important;
  font-weight: 800;
  color: #2d5196;
}

#aboutModal .ga-about-pillar-action a {
  font-weight: 700;
  color: #2d5196;
}

#botHelpTooltip .ga-quick-guide-matching-link {
  display: inline-block;
  font-weight: 600;
  color: #2d5196;
  text-decoration: underline;
  font-size: 13px;
}

/* Quick Guide popup: Participant / Provider — badge above explanation (long translations) */
#botHelpTooltip .ga-help-row.ga-help-row--badge-below {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  grid-template-columns: none !important;
  row-gap: 4px !important;
}

#botHelpTooltip .ga-help-row.ga-help-row--badge-below .ga-help-visual {
  width: 100% !important;
  max-width: 100% !important;
}

#botHelpTooltip .ga-help-row.ga-help-row--badge-below .ga-help-copy {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 94px !important;
  box-sizing: border-box !important;
}

@media (max-width: 420px) {
  #botHelpTooltip .ga-help-row.ga-help-row--badge-below .ga-help-copy {
    padding-left: 0 !important;
  }
}

/* Quick Guide (#botHelpTooltip) + Quick Audio Guide: QR at bottom of scrollable body */
#botHelpTooltip .ga-popup-qr-wrap,
#chatPanel #ttsInfoPopup.ga-audio-guide-popup .ga-popup-qr-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 8px 0 2px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 58, 102, 0.08);
  box-sizing: border-box;
}

#botHelpTooltip .ga-popup-qr-wrap .ga-popup-qr-link,
#chatPanel #ttsInfoPopup.ga-audio-guide-popup .ga-popup-qr-wrap .ga-popup-qr-link{
  display: inline-block;
  line-height: 0;
  border-radius: 6px;
}

#botHelpTooltip .ga-popup-qr-wrap .ga-popup-qr-link:focus-visible,
#chatPanel #ttsInfoPopup.ga-audio-guide-popup .ga-popup-qr-wrap .ga-popup-qr-link:focus-visible{
  outline: 2px solid #2d5196;
  outline-offset: 2px;
}

#botHelpTooltip .ga-popup-qr-wrap .ga-popup-qr-img,
#chatPanel #ttsInfoPopup.ga-audio-guide-popup .ga-popup-qr-wrap .ga-popup-qr-img{
  display: block;
  width: min(92px, 30vw);
  max-width: 96px;
  height: auto;
}

/* Language submenu × — pinned near top-right of header */
#languageSubmenu .ga-lang-submenu-header .close-language{
  top: 6px !important;
  transform: none !important;
  right: 10px !important;
}

/* Language submenu: outer panel does not scroll; list area does */
#languageSubmenu.submenu-options,
body > #languageSubmenu.submenu-options{
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#languageSubmenu{
  max-height: var(--lang-panel-maxh) !important;
  overflow-y: hidden !important;
  padding: 0 !important;
}

#languageSubmenu .ga-lang-submenu-shell{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: inherit !important;
}

#languageSubmenu .ga-lang-submenu-header{
  flex: 0 0 auto !important;
  position: relative !important;
  min-height: 36px !important;
}

#languageSubmenu .ga-lang-submenu-body{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 6px 10px 10px !important;
}

#languageSubmenu .ga-language-global-notice{
  padding: 0 2px 10px !important;
  margin: 0 0 8px !important;
  border-bottom: 1px solid rgba(45, 81, 150, 0.12) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: rgba(11, 47, 90, 0.92) !important;
}

#languageSubmenu .ga-language-global-notice p{
  margin: 0 !important;
  padding: 0 !important;
}


/* =====================================================
   ENQUIRIES — TTS TOOLBAR (label row + single controls row)
   Row 1: Quick Audio Guide
   Row 2: ⓘ | Guided Questions | Play | Stop | Resume | Speed
   Mobile, tablet, and desktop (display:contents flattening).
   ===================================================== */

#chatPanel #ttsBar,
#chatPanel #ttsBar.tts-bar,
#chatPanel .tts-bar{
  display: grid !important;
  grid-template-columns: auto minmax(88px, 32vw) 1fr 1fr 1.15fr 0.9fr !important;
  grid-template-rows: auto auto !important;
  column-gap: 8px !important;
  row-gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  margin-left: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

#chatPanel #ttsBar .tts-bar-head,
#chatPanel #ttsBar .tts-controls-row{
  display: contents !important;
}

/* Row 1 — title only */
#chatPanel #ttsBar .tts-label{
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  min-width: 0 !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  align-self: center !important;
}

/* Row 2 — ⓘ far left */
#chatPanel #ttsBar #ttsInfo.tts-info{
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  align-self: center !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Row 2 — Guided Questions (shorter pill) */
#chatPanel #ttsBar .suggestions-toggle,
#chatPanel .suggestions-toggle{
  grid-column: 2 !important;
  grid-row: 2 !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 88px !important;
  max-width: min(32vw, 220px) !important;
  margin: 0 !important;
  transform: none !important;
  justify-self: start !important;
  align-self: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  text-align: center !important;
  line-height: 1.15 !important;
  height: auto !important;
  min-height: 34px !important;
}

/* Row 2 — audio controls */
#chatPanel #ttsReplay.tts-btn{
  grid-column: 3 !important;
  grid-row: 2 !important;
}

#chatPanel #ttsStop.tts-btn{
  grid-column: 4 !important;
  grid-row: 2 !important;
}

#chatPanel #ttsResume.tts-btn{
  grid-column: 5 !important;
  grid-row: 2 !important;
}

#chatPanel #ttsBar #nsSpeedBtn{
  grid-column: 6 !important;
  grid-row: 2 !important;
}

#chatPanel #ttsBar .tts-btn,
#chatPanel #ttsBar #nsSpeedBtn{
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  align-self: center !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  text-align: center !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  font-size: clamp(11px, 2.85vw, 15px) !important;
  margin: 0 !important;
}

#chatPanel #ttsBar #nsSpeedBadge{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Desktop — same layout, slightly more room for Guided Questions */
@media (min-width: 900px) and (hover: hover) and (pointer: fine){

  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    grid-template-columns: auto minmax(100px, min(280px, 28vw)) 1fr 1fr 1.15fr 0.9fr !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
  }

  #chatPanel #ttsBar .suggestions-toggle,
  #chatPanel .suggestions-toggle{
    max-width: min(280px, 28vw) !important;
    min-width: 100px !important;
    font-size: clamp(13px, 0.95vw, 16px) !important;
  }

  #chatPanel #ttsBar .tts-btn,
  #chatPanel #ttsBar #nsSpeedBtn{
    font-size: clamp(13px, 0.92vw, 16px) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* =====================================================
   MOBILE PORTRAIT — TTS toolbar (hide label, 2 rows)
   Row 1: ⓘ + Guided Questions
   Row 2: Listen | Stop | Restart | Speed
   ===================================================== */
@media (max-width: 520px) and (orientation: portrait){

  #chatPanel #ttsBar .tts-label{
    display: none !important;
  }

  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #chatPanel #ttsBar #ttsInfo.tts-info{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  #chatPanel #ttsBar .suggestions-toggle,
  #chatPanel .suggestions-toggle{
    grid-column: 2 / 5 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  #chatPanel #ttsReplay.tts-btn{
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #chatPanel #ttsStop.tts-btn{
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #chatPanel #ttsResume.tts-btn{
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  #chatPanel #ttsBar #nsSpeedBtn{
    grid-column: 4 !important;
    grid-row: 2 !important;
  }

  #chatPanel #ttsBar .tts-btn,
  #chatPanel #ttsBar #nsSpeedBtn{
    font-size: clamp(10px, 2.6vw, 12px) !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    min-height: 32px !important;
  }

  #chatPanel .ga-chat-translation-footer-notice{
    font-size: 7.5px !important;
    line-height: 1.05 !important;
    padding: 2px 8px 3px !important;
    margin: 0 !important;
  }

  #chatPanel .ga-chat-translation-footer-notice strong{
    font-weight: 700 !important;
    font-size: inherit !important;
  }

  #chatPanel .chat-disclaimer{
    font-size: 7.5px !important;
    line-height: 1.05 !important;
    padding: 0 8px 4px !important;
    margin: 0 !important;
  }
}


/* =====================================================
   MOBILE LANDSCAPE — TTS toolbar (hide label, 1 row)
   ⓘ Guided Questions Listen Stop Restart Speed
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){

  #chatPanel #ttsBar .tts-label{
    display: none !important;
  }

  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    grid-template-columns: auto minmax(64px, 20vw) 1fr 1fr 1.15fr 0.85fr !important;
    grid-template-rows: auto !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #chatPanel #ttsBar #ttsInfo.tts-info{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  #chatPanel #ttsBar .suggestions-toggle,
  #chatPanel .suggestions-toggle{
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 64px !important;
    max-width: min(20vw, 160px) !important;
    justify-self: start !important;
  }

  #chatPanel #ttsReplay.tts-btn{
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  #chatPanel #ttsStop.tts-btn{
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  #chatPanel #ttsResume.tts-btn{
    grid-column: 5 !important;
    grid-row: 1 !important;
  }

  #chatPanel #ttsBar #nsSpeedBtn{
    grid-column: 6 !important;
    grid-row: 1 !important;
  }

  #chatPanel #ttsBar .tts-btn,
  #chatPanel #ttsBar #nsSpeedBtn{
    font-size: clamp(10px, 2.2vh, 13px) !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    min-height: 32px !important;
  }

  #chatPanel .ga-chat-translation-footer-notice{
    font-size: 7.5px !important;
    line-height: 1.05 !important;
    padding: 2px 8px 3px !important;
    margin: 0 !important;
  }

  #chatPanel .ga-chat-translation-footer-notice strong{
    font-weight: 700 !important;
    font-size: inherit !important;
  }

  #chatPanel .chat-disclaimer{
    font-size: 7.5px !important;
    line-height: 1.05 !important;
    padding: 0 8px 4px !important;
    margin: 0 !important;
  }
}


/* =====================================================
   MOBILE LANDSCAPE — ENQUIRIES FOOTER STACK (final override)
   Disclaimer + Translation notice + TTS + input fully visible
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){

  /* Slightly tighter upper area — shift content up */
  #chatPanel .chat-header{
    padding: 4px 10px 2px !important;
  }

  #chatPanel .lang-hint{
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    padding: 4px 8px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  #chatPanel .chat-body,
  #chatBody{
    padding: 4px 10px 4px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 118px !important;
    box-sizing: border-box !important;
  }

  /* Bottom stack: disclaimer → notice → TTS → input */
  #chatPanel .chat-disclaimer{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    bottom: 0 !important;
    flex: 0 0 auto !important;
    z-index: 58 !important;
    margin: 0 !important;
    padding: 1px 8px 3px !important;
    font-size: 7.5px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  #chatPanel .ga-chat-translation-footer-notice{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    bottom: 13px !important;
    flex: 0 0 auto !important;
    z-index: 57 !important;
    margin: 0 !important;
    padding: 1px 8px 1px !important;
    font-size: 7.5px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    background: #fff !important;
    box-sizing: border-box !important;
    border-top: 0 !important;
  }

  #chatPanel .ga-chat-translation-footer-notice strong{
    font-weight: 700 !important;
    font-size: inherit !important;
  }

  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    position: sticky !important;
    bottom: 28px !important;
    flex: 0 0 auto !important;
    z-index: 56 !important;
    margin: 0 !important;
    padding: 2px 10px 2px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  #chatPanel #chatForm,
  #chatPanel .chat-input{
    position: sticky !important;
    bottom: 64px !important;
    flex: 0 0 auto !important;
    z-index: 55 !important;
    margin: 0 !important;
    padding: 4px 10px 2px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    overflow: visible !important;
  }
}


/* =====================================================
   MOBILE LANDSCAPE — ENQUIRIES PIXEL REFINEMENT (final)
   Match target spacing: header, intro card, footer stack
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){

  /* Coordinated footer stack heights */
  #chatPanel.chat{
    --ga-land-disclaimer-h: 17px;
    --ga-land-notice-h: 15px;
    --ga-land-tts-h: 34px;
    --ga-land-input-h: 34px;
    --ga-land-footer-gap: 6px;

    width: calc(100vw - 10px) !important;
    overflow-x: hidden !important;
  }

  /* D — opaque overlay: hide landing side bleed */
  #chatBox{
    background: #ffffff !important;
  }

  body:has(#chatBox[style*="display: block"]) .card .assistant,
  body:has(#chatBox[style*="display: block"]) .card .bot-wrap{
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* A — restore balanced top spacing (match main landscape enquiries block) */
  #chatPanel .chat-header{
    padding: 6px 12px 4px !important;
  }

  #chatPanel .lang-hint{
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding: 6px 10px !important;
    font-size: 10px !important;
    line-height: 1.14 !important;
    border-radius: 10px !important;
  }

  /* B — intro card: taller bubble, more breathing room */
  #chatPanel .chat-body,
  #chatBody{
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 10px 4px !important;
    padding-bottom: calc(
      var(--ga-land-disclaimer-h) +
      var(--ga-land-notice-h) +
      var(--ga-land-tts-h) +
      var(--ga-land-input-h) +
      var(--ga-land-footer-gap)
    ) !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  #chatPanel #chatBody > .msg.bot:first-child,
  #chatPanel .chat-body > .msg.bot:first-child{
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
    align-self: stretch !important;
  }

  #chatPanel #chatBody > .msg.bot:first-child .bubble,
  #chatPanel .chat-body > .msg.bot:first-child .bubble{
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(120px, 32dvh, 200px) !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
    box-sizing: border-box !important;
  }

  #chatPanel .ns-cta-group{
    margin: 0 0 12px 0 !important;
    gap: 8px !important;
  }

  #chatPanel .ns-cta-group .ns-intake-cta,
  #chatPanel .ns-intake-cta{
    padding: 8px 14px !important;
    margin: 0 !important;
    font-size: 13px !important;
  }

  /* C — footer stack recalibration */
  #chatPanel .chat-disclaimer{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    bottom: 0 !important;
    flex: 0 0 auto !important;
    z-index: 58 !important;
    margin: 0 !important;
    padding: 2px 8px 4px !important;
    font-size: 7.5px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  #chatPanel .ga-chat-translation-footer-notice{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: sticky !important;
    bottom: var(--ga-land-disclaimer-h) !important;
    flex: 0 0 auto !important;
    z-index: 57 !important;
    margin: 0 !important;
    padding: 2px 8px 2px !important;
    font-size: 7.5px !important;
    line-height: 1.05 !important;
    text-align: center !important;
    background: #fff !important;
    box-sizing: border-box !important;
    border-top: 0 !important;
  }

  #chatPanel .ga-chat-translation-footer-notice strong{
    font-weight: 700 !important;
    font-size: inherit !important;
  }

  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    position: sticky !important;
    bottom: calc(var(--ga-land-disclaimer-h) + var(--ga-land-notice-h)) !important;
    flex: 0 0 auto !important;
    z-index: 56 !important;
    margin: 0 !important;
    padding: 3px 10px 3px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  #chatPanel #chatForm,
  #chatPanel .chat-input{
    position: sticky !important;
    bottom: calc(
      var(--ga-land-disclaimer-h) +
      var(--ga-land-notice-h) +
      var(--ga-land-tts-h)
    ) !important;
    flex: 0 0 auto !important;
    z-index: 55 !important;
    margin: 0 !important;
    padding: 5px 10px 4px !important;
    background: #fff !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(0,0,0,0.06) !important;
    overflow: visible !important;
  }
}


/* =====================================================
   MOBILE LANDSCAPE — INPUT ROW CLIPPING FIX (final)
   Lift input row + slimmer field / send / mic heights
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){

  #chatPanel.chat{
    --ga-land-input-h: 30px !important;
    --ga-land-footer-gap: 8px !important;
  }

  #chatPanel #chatForm,
  #chatPanel .chat-input{
    bottom: calc(
      var(--ga-land-disclaimer-h) +
      var(--ga-land-notice-h) +
      var(--ga-land-tts-h) +
      6px
    ) !important;
    padding: 3px 10px 2px !important;
    align-items: center !important;
  }

  #chatPanel #chatText{
    height: 28px !important;
    min-height: 28px !important;
  }

  #chatPanel .send{
    height: 28px !important;
    min-height: 28px !important;
  }

  #chatPanel #enqMicBtn,
  #chatPanel #enqMicBtn.enq-mic{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    flex: 0 0 30px !important;
  }
}


/* =====================================================
   MOBILE LANDSCAPE — INPUT ROW TOP SECTION (final)
   Lift input row + tighten intro-to-input gap only
   ===================================================== */
@media (max-width: 932px) and (orientation: landscape){

  #chatPanel #chatForm,
  #chatPanel .chat-input{
    bottom: calc(
      var(--ga-land-disclaimer-h) +
      var(--ga-land-notice-h) +
      var(--ga-land-tts-h) +
      10px
    ) !important;
  }

  #chatPanel #chatBody > .msg.bot:first-child,
  #chatPanel .chat-body > .msg.bot:first-child{
    margin-bottom: 2px !important;
    flex: 0 0 auto !important;
  }
}


/* MOBILE LANDSCAPE — footer notice spacing + ⓘ / Guided Questions sizing */
@media (max-width: 932px) and (orientation: landscape){

  #chatPanel #ttsBar #ttsInfo.tts-info{
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    flex: 0 0 32px !important;
    font-size: 17px !important;
    line-height: 1 !important;
    padding: 0 !important;
  }

  #chatPanel #ttsBar .suggestions-toggle,
  #chatPanel .suggestions-toggle{
    min-width: 52px !important;
    max-width: min(17vw, 112px) !important;
    min-height: 28px !important;
    padding: 4px 6px !important;
    font-size: clamp(9px, 2vh, 11px) !important;
    line-height: 1.15 !important;
  }
}


/* MOBILE LANDSCAPE — FOOTER LAYOUT (reference match, consolidated) */
@media (max-width: 932px) and (orientation: landscape){

  #chatPanel.chat{
    --ga-land-disclaimer-h: 14px !important;
    --ga-land-notice-h: 0px !important;
    --ga-land-tts-h: 32px !important;
    --ga-land-footer-gap: 4px !important;
  }

  #chatPanel #chatForm,
  #chatPanel form#chatForm.chat-input{
    transform: translateY(-6px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 0 !important;
    bottom: calc(
      var(--ga-land-disclaimer-h) +
      var(--ga-land-notice-h) +
      var(--ga-land-tts-h) +
      0px
    ) !important;
  }

  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #chatPanel .chat-disclaimer{
    transform: translateY(-3px) !important;
    font-size: 8.5px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 2px !important;
    line-height: 1.02 !important;
  }
}


/* ENQUIRIES — footer translation notice removed (header banner only) */
#chatPanel .ga-chat-translation-footer-notice{
  display: none !important;
}


/* MOBILE LANDSCAPE — lift toolbar row for translated disclaimer room */
@media (max-width: 932px) and (orientation: landscape){
  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    transform: translateY(-8px) !important;
  }
}

/* =====================================================
   ENQUIRIES — header Reset + Download Transcript (top row)
   Overrides legacy full-width sticky #resetChat bar
   ===================================================== */
#chatPanel .chat-header-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

#chatPanel .chat-header-actions{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 1 auto;
  max-width: min(100%, 520px);
  margin-left: auto;
}

#chatPanel .chat-header-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 4px 10px !important;
  position: static !important;
  bottom: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  align-self: auto !important;
  font-size: clamp(11px, 2.8vw, 13px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 5 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

#chatPanel .chat-header-btn strong{
  font-weight: inherit;
}

#chatPanel .chat-header-btn--reset{
  background: #ffffff !important;
  border: 1.5px solid var(--ns-accent, #2d5196) !important;
  color: var(--ns-accent, #2d5196) !important;
}

#chatPanel .chat-header-btn--download{
  background: #ffffff !important;
  border: 1.5px solid #1f7a4d !important;
  color: #1f7a4d !important;
}

#chatPanel .chat-header-btn--download .chat-header-btn__icon{
  font-size: 1em;
  line-height: 1;
  font-weight: 700;
}

#chatPanel .chat-header-actions .chat-close{
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: clamp(28px, 8vw, 34px) !important;
  height: clamp(28px, 8vw, 34px) !important;
  min-width: clamp(28px, 8vw, 34px) !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

#chatPanel #resetChat.chat-header-btn,
#chatPanel #downloadTranscript.chat-header-btn{
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  position: static !important;
  bottom: auto !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
}

@media (max-width: 480px){
  #chatPanel .chat-header-actions{
    gap: 4px;
    max-width: 100%;
  }
  #chatPanel .chat-header-btn{
    padding: 3px 8px !important;
    font-size: 11px !important;
  }
}

/* =====================================================
   MOBILE — Enquiries header actions (portrait + landscape)
   ===================================================== */
@media (max-width: 932px){
  #chatPanel .chat-header-row{
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
  }

  #chatPanel .chat-title{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #chatPanel .chat-header-actions{
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    align-self: center !important;
    gap: 4px !important;
    max-width: min(58vw, 220px) !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    min-width: 0 !important;
  }

  #chatPanel .chat-header-actions .chat-header-btn,
  #chatPanel .chat-header-actions .chat-close{
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #chatClose,
  #chatPanel #chatClose,
  #chatPanel button.chat-close.close-modal,
  #chatPanel .chat-header-actions .chat-close{
    position: static !important;
    top: auto !important;
    right: auto !important;
    flex: 0 0 clamp(26px, 7vw, 32px) !important;
    width: clamp(26px, 7vw, 32px) !important;
    min-width: clamp(26px, 7vw, 32px) !important;
    height: clamp(26px, 7vw, 32px) !important;
    z-index: 10 !important;
    order: 3 !important;
  }

  #chatPanel #resetChat.chat-header-btn{
    order: 1 !important;
    flex-shrink: 1 !important;
    max-width: 38% !important;
  }

  #chatPanel #downloadTranscript.chat-header-btn{
    order: 2 !important;
    flex-shrink: 1 !important;
    max-width: 46% !important;
  }

  #chatPanel .chat-header-btn{
    padding: 2px 6px !important;
    font-size: 10px !important;
    gap: 2px !important;
    min-height: 24px !important;
    line-height: 1.1 !important;
  }

  #chatPanel .chat-header-btn--download .chat-header-btn__icon{
    font-size: 0.95em !important;
  }
}

/* Mobile portrait: more vertical fullscreen */
@media (max-width: 520px) and (orientation: portrait){
  #chatPanel.chat{
    height: calc(100dvh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    min-height: calc(100dvh - 8px) !important;
    width: min(100vw - 8px, 100%) !important;
    max-width: min(100vw - 8px, 100%) !important;
    margin: 4px auto !important;
  }

  #chatPanel .chat-body,
  #chatBody{
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
}

/* Mobile portrait — participant CTAs side-by-side (Search Providers + Get Guided Help) */
@media (max-width: 520px) and (orientation: portrait){
  #chatPanel .ns-cta-group[data-intake="participant"]{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #chatPanel .ns-cta-group[data-intake="participant"] .ns-intake-cta,
  #chatPanel .ns-cta-group[data-intake="participant"] .ns-search-cta,
  #chatPanel .ns-cta-group[data-intake="participant"] .ns-guided-cta{
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    font-size: clamp(10px, 2.8vw, 12px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* Provider — stacked full-width buttons */
  #chatPanel .ns-cta-group[data-intake="provider"]{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #chatPanel .ns-cta-group[data-intake="provider"] .ns-intake-cta,
  #chatPanel .ns-cta-group[data-intake="provider"] .ns-provider-first-time-cta{
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}

/* Mobile landscape only: lift input row (fix bottom clip) */
@media (max-width: 932px) and (orientation: landscape){
  #chatPanel.chat{
    --ga-land-tts-h: 48px !important;
    --ga-land-input-h: 40px !important;
    --ga-land-footer-gap: 8px !important;
  }

  #chatPanel #chatForm,
  #chatPanel .chat-input{
    bottom: calc(
      var(--ga-land-disclaimer-h, 17px) +
      var(--ga-land-notice-h, 15px) +
      var(--ga-land-tts-h, 34px) +
      var(--ga-land-footer-gap, 8px) +
      28px
    ) !important;
    transform: translateY(-14px) !important;
    padding-bottom: 6px !important;
    margin-bottom: 2px !important;
  }

  #chatPanel #ttsBar,
  #chatPanel #ttsBar.tts-bar,
  #chatPanel .tts-bar{
    bottom: calc(var(--ga-land-disclaimer-h, 17px) + var(--ga-land-notice-h, 15px) + 4px) !important;
  }
}