.elementor-9356 .elementor-element.elementor-element-90c4399{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:16px 16px;--row-gap:16px;--column-gap:16px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:24px;--padding-bottom:24px;--padding-left:016px;--padding-right:016px;}.elementor-9356 .elementor-element.elementor-element-90c4399.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-9356 .elementor-element.elementor-element-a330181{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 20px;--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-9356 .elementor-element.elementor-element-a330181.elementor-element{--align-self:flex-start;}.elementor-9356 .elementor-element.elementor-element-a330181 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-9356 .elementor-element.elementor-element-a330181 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-9356 .elementor-element.elementor-element-a330181 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-9356 .elementor-element.elementor-element-a330181 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:23px;font-weight:600;line-height:1.2em;}.elementor-9356 .elementor-element.elementor-element-a330181 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-9356 .elementor-element.elementor-element-6cb5891{margin:-11px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 20px;--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-9356 .elementor-element.elementor-element-6cb5891.elementor-element{--align-self:flex-start;}.elementor-9356 .elementor-element.elementor-element-6cb5891 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-9356 .elementor-element.elementor-element-6cb5891 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-9356 .elementor-element.elementor-element-6cb5891 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-9356 .elementor-element.elementor-element-6cb5891 .elementor-icon-list-item > a{font-family:"Poppins", Sans-serif;font-size:19px;font-weight:500;line-height:1.2em;}.elementor-9356 .elementor-element.elementor-element-6cb5891 .elementor-icon-list-text{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-9356 .elementor-element.elementor-element-cf7833f{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-9356 .elementor-element.elementor-element-cf7833f.elementor-element{--align-self:flex-start;--flex-grow:1;--flex-shrink:0;}.elementor-9356 .elementor-element.elementor-element-be6382d{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-9356 .elementor-element.elementor-element-aaeee30{width:100%;max-width:100%;padding:0px 0px 0px 0px;}.elementor-9356 .elementor-element.elementor-element-aaeee30.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-9356 .elementor-element.elementor-element-aaeee30 .elementor-wrapper{--video-aspect-ratio:1.77777;filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-9356 .elementor-element.elementor-element-3b2e4af{--display:flex;}@media(min-width:768px){.elementor-9356 .elementor-element.elementor-element-90c4399{--content-width:900px;}}@media(max-width:1024px){.elementor-9356 .elementor-element.elementor-element-90c4399{--min-height:1vh;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-9356 .elementor-element.elementor-element-a330181 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-9356 .elementor-element.elementor-element-a330181 .elementor-icon-list-item > a{font-size:19px;}.elementor-9356 .elementor-element.elementor-element-6cb5891 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-9356 .elementor-element.elementor-element-6cb5891 .elementor-icon-list-item > a{font-size:19px;}.elementor-9356 .elementor-element.elementor-element-be6382d{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-9356 .elementor-element.elementor-element-90c4399{--min-height:0vh;}.elementor-9356 .elementor-element.elementor-element-a330181{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 20px;}.elementor-9356 .elementor-element.elementor-element-a330181 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-9356 .elementor-element.elementor-element-a330181 .elementor-icon-list-item > a{font-size:19px;letter-spacing:0px;}.elementor-9356 .elementor-element.elementor-element-6cb5891{margin:-14px 0px calc(var(--kit-widget-spacing, 0px) + 16px) 20px;}.elementor-9356 .elementor-element.elementor-element-6cb5891 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-9356 .elementor-element.elementor-element-6cb5891 .elementor-icon-list-item > a{font-size:13px;letter-spacing:0px;}.elementor-9356 .elementor-element.elementor-element-be6382d{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for html, class: .elementor-element-cf7833f */<!-- Paulina – Bubbly Chat (REST, Persona+Pods) -->
<div id="paulina-chat" class="pg-shell" aria-label="Paulina Chat">
  <div class="pg-frame">
    <!-- Chat log -->
    <div id="pg-log" class="pg-log" role="log" aria-live="polite" aria-relevant="additions text"></div>

    <!-- Composer -->
    <form id="pg-form" class="pg-composer" autocomplete="off">
      <input id="pg-file" type="file" hidden accept=".pdf,.docx,.pptx,.xlsx,.txt" />
      <button id="pg-clip" type="button" class="pg-pill pg-circle" title="Add file" aria-label="Add file">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 5v14M5 12h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </button>

      <textarea id="pg-input" rows="1" class="pg-input" placeholder="Ask something …" aria-label="Message to Paulina"></textarea>

      <button id="pg-send" type="submit" class="pg-pill pg-circle" aria-label="Send">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M5 12h12M13 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
    </form>

    <div class="pg-underbar">
      <button id="pg-reset" type="button" class="pg-pill pg-wide" aria-label="New question">
        <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" style="margin-right:.4em">
          <path d="M3 12a9 9 0 1 0 3-6.7M3 3v6h6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        New question
      </button>
      <span id="pg-status" class="pg-status" aria-live="polite"></span>
    </div>
  </div>
</div>

<style>
/* ===== Base look & theme ===== */
#paulina-chat.pg-shell{
  --ink:#0d2b52;
  --text:#0b0c0f;
  --muted:#7b7c85;
  --border:#e7eaf0;
  --shadow:0 1px 3px rgba(0,0,0,.05), 0 12px 28px rgba(0,0,0,.05);
  --bg:#ffffff;
  --bot:#eef4ff;   /* bot bubble */
  --user:#eaf6ee;  /* user bubble */
  --bubble-border:#e6eaf6;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,Arial,sans-serif;
}

#paulina-chat .pg-frame{
  width:100%;
  max-width:860px;
  margin:0 auto;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:18px 18px 10px;
  box-sizing:border-box;
}

#paulina-chat .pg-log{
  min-height:260px;
  max-height:56vh;
  overflow:auto;
  padding:6px 4px 8px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Bubbles */
#paulina-chat .pg-bubble{
  max-width:78%;
  white-space:pre-wrap;
  word-break:break-word;
  border-radius:18px;
  border:1px solid var(--bubble-border);
  padding:12px 14px;
  line-height:1.45;
  font-size:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}

#paulina-chat .pg-bot{
  background:var(--bot);
  border-top-left-radius:8px;
}
#paulina-chat .pg-user{
  background:var(--user);
  border-top-right-radius:8px;
  margin-left:auto;
}

/* Download bubble */
#paulina-chat .pg-download{
  background:#fff8dc;
  border:1px solid #e6dca5;
  padding:10px 12px;
  border-radius:12px;
  font-size:16px;
  margin-top:6px;
}

/* Links inside bubbles */
#paulina-chat .pg-bubble a{
  display:inline-block;
  margin-top:6px;
  color:#0056b3;
  font-weight:500;
  text-decoration:none;
}
#paulina-chat .pg-bubble a:hover{
  text-decoration:underline;
}

/* Row alignment */
#paulina-chat .pg-row{ display:flex; }
#paulina-chat .pg-row.pg-left{ justify-content:flex-start; }
#paulina-chat .pg-row.pg-right{ justify-content:flex-end; }

/* Composer */
#paulina-chat .pg-composer{
  margin-top:8px;
  display:grid;
  grid-template-columns:52px 1fr 52px;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  box-sizing:border-box;
}

#paulina-chat .pg-input{
  border:0; outline:0; resize:none;
  height:44px; max-height:120px;
  padding:10px 6px; font-size:16px;
  color:var(--text); background:transparent;
}

/* Pills & buttons */
#paulina-chat .pg-pill{
  background:#fff; color:var(--ink);
  border:1px solid #e6e7eb;
  box-shadow:0 2px 10px rgba(0,0,0,.06), inset 0 -2px 0 rgba(0,0,0,.02);
  cursor:pointer; transition:transform .05s ease, box-shadow .15s ease, background .15s;
}
#paulina-chat .pg-pill:hover{ background:#fafbff; box-shadow:0 4px 14px rgba(0,0,0,.08), inset 0 -2px 0 rgba(0,0,0,.03); }
#paulina-chat .pg-pill:active{ transform:translateY(1px); }

#paulina-chat .pg-circle{
  width:52px; height:52px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0;
}
#paulina-chat .pg-circle svg{ width:20px; height:20px; stroke-width:2.5; color:var(--ink); }

#paulina-chat .pg-circle:hover{ background:#f0f4ff; box-shadow:0 6px 14px rgba(0,0,0,.12); }
#paulina-chat .pg-circle:active{ transform:scale(0.96); }

/* Wide button (reset) */
#paulina-chat .pg-wide{ border-radius:999px; padding:10px 14px; display:inline-flex; align-items:center; font-weight:600; }

/* Underbar */
#paulina-chat .pg-underbar{ margin-top:10px; display:flex; align-items:center; gap:10px; }
#paulina-chat .pg-status{ font-size:13px; color:#7b7c85; }

/* Typing indicator */
#paulina-chat .pg-typing{ color:#7b7c85; display:inline-flex; gap:6px; align-items:center; }
#paulina-chat .pg-dots{ display:inline-grid; grid-auto-flow:column; gap:4px; }
#paulina-chat .pg-dots i{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.35; display:block; }
@media (prefers-reduced-motion:no-preference){
  #paulina-chat .pg-dots i{ animation:pg-pulse 1.2s infinite ease-in-out; }
  #paulina-chat .pg-dots i:nth-child(2){ animation-delay:.15s; }
  #paulina-chat .pg-dots i:nth-child(3){ animation-delay:.3s; }
  @keyframes pg-pulse{ 0%,80%,100%{opacity:.25;transform:translateY(0)} 40%{opacity:1;transform:translateY(-2px)} }
}

/* ===== Mobile tweaks ===== */
@media (max-width:600px){
  #paulina-chat .pg-frame{ border-radius:20px; padding:12px; box-shadow:0 4px 16px rgba(0,0,0,.08); }
  #paulina-chat .pg-log{ max-height:60vh; }
  #paulina-chat .pg-bubble{ max-width:88%; font-size:15px; }
  #paulina-chat .pg-composer{ grid-template-columns:46px 1fr 46px; padding:8px; }
  #paulina-chat .pg-circle{ width:46px; height:46px; }
}
</style>

<script>
(() => {
  const log      = document.getElementById('pg-log');
  const form     = document.getElementById('pg-form');
  const input    = document.getElementById('pg-input');
  const send     = document.getElementById('pg-send');
  const clip     = document.getElementById('pg-clip');
  const file     = document.getElementById('pg-file');
  const reset    = document.getElementById('pg-reset');
  const statusEl = document.getElementById('pg-status');

  const API_ROOT   = (window.wpApiSettings?.root || (location.origin + '/wp-json/')).replace(/\/$/, '');
  const CHAT_URL   = API_ROOT + '/paulina/v1/chat';
  const UPLOAD_URL = API_ROOT + '/paulina/v1/upload';

  const NONCE = (window.paulinaApi && window.paulinaApi.nonce)
    ? window.paulinaApi.nonce
    : (window.wpApiSettings && window.wpApiSettings.nonce)
    ? window.wpApiSettings.nonce
    : null;

  function restHeaders(extra = {}) {
    const h = { ...extra };
    if (NONCE) h['X-WP-Nonce'] = NONCE;
    return h;
  }

  // Row + bubble helpers
  function row(html, who = 'bot') {
    const r = document.createElement('div');
    r.className = 'pg-row ' + (who === 'user' ? 'pg-right' : 'pg-left');

    const b = document.createElement('div');
    b.className = 'pg-bubble ' + (who === 'user' ? 'pg-user' : 'pg-bot');
    b.innerHTML = html;

    r.appendChild(b);
    log.appendChild(r);
    log.scrollTop = log.scrollHeight;
    return r;
  }

  function textBubble(text, who = 'bot') {
    const t = (typeof text === 'string') ? text : String(text || '');
    return row(linkify(t), who);
  }

  function typing() {
    const r = document.createElement('div');
    r.className = 'pg-row pg-left';

    const b = document.createElement('div');
    b.className = 'pg-bubble pg-bot pg-typing';
    b.innerHTML = '<span>Paulina is typing</span> ' +
                  '<span class="pg-dots" aria-hidden="true"><i></i><i></i><i></i></span>';

    r.appendChild(b);
    log.appendChild(r);
    log.scrollTop = log.scrollHeight;
    return r;
  }

  function lock(on) {
    send.disabled  = on;
    clip.disabled  = on;
    input.disabled = on;
    statusEl.textContent = on ? 'working …' : '';
  }

  // Newline + linkify
  function linkify(text) {
    const escaped = (String(text) || '')
      .replace(/&/g,'&amp;')
      .replace(/</g,'&lt;')
      .replace(/>/g,'&gt;');

    const withLinks = escaped.replace(/https?:\/\/[^\s)]+/g, u =>
      `<a href="${u}" target="_blank" rel="noopener">${u}</a>`
    );

    return withLinks.replace(/\n/g,'<br>');
  }

  // Render bot answer & dedicated download bubble
  function renderAnswer(text, downloadUrl = null) {
    // 1) Dedicated download_url from the API → separate download bubble
    if (downloadUrl) {
      const clean = (text || '').replace(downloadUrl, '').trim();
      if (clean) row(linkify(clean), 'bot');

      const safe = downloadUrl.replace(/"/g,'&quot;');
      const dlHtml =
        `<div class="pg-download">
           📎 <a href="${safe}" target="_blank" rel="noopener" download>
             Download DOCX
           </a>
         </div>`;
      row(dlHtml, 'bot');
      return;
    }

    // 2) Fallback: detect "Download: URL" inside text
    if (typeof text === 'string') {
      const dlMatch = text.match(/(?:^|\n)\s*Download(?:\s+your\s+file)?\s*:\s*(https?:\/\/\S+)/i);
      if (dlMatch) {
        const link = dlMatch[1];
        const before = text.replace(dlMatch[0], '').trim();
        if (before) row(linkify(before), 'bot');

        const safe = link.replace(/"/g,'&quot;');
        const dlHtml =
          `<div class="pg-download">
             📎 <a href="${safe}" target="_blank" rel="noopener" download>
               Download DOCX
             </a>
           </div>`;
        row(dlHtml, 'bot');
        return;
      }
    }

    // 3) Normal answer
    if (text && String(text).trim() !== '') {
      row(linkify(String(text)), 'bot');
    }
  }

  let started = false;

  // External starter buttons: click to send prepared text to chat
  document.addEventListener('click', function (ev) {
    const el = ev.target.closest('[data-pg-utter]');
    if (!el) return;
    if (el.tagName === 'A') ev.preventDefault();
    if (send?.disabled || input?.disabled) return;

    const utter = (el.getAttribute('data-pg-utter') || '').trim();
    if (!utter) return;

    document.getElementById('paulina-chat')?.scrollIntoView({ behavior: 'smooth', block: 'center' });

    textBubble(utter, 'user');
    if (input) input.value = '';
    ask(utter, { starter: true });
  });

  // Upload button
  clip?.addEventListener('click', () => file?.click());

  // File upload handling
  file?.addEventListener('change', async () => {
    if (!file.files || !file.files[0]) return;

    const f = file.files[0];
    lock(true);
    statusEl.textContent = 'uploading file …';
    const info = textBubble(`📎 ${f.name} is being uploaded …`, 'bot');

    try {
      const fd = new FormData();
      fd.append('file', f);

      const res = await fetch(UPLOAD_URL, {
        method: 'POST',
        body: fd,
        credentials: 'omit',
        headers: {}
      });

      let data = {};
      try { data = await res.json(); } catch (_) {}

      if (!res.ok || data?.ok === false) {
        const msg = data?.error || data?.data?.error || data?.message || 'Upload failed.';
        info.textContent = '❌ ' + msg;
      } else {
        const title = (data.title || f.name);
        info.innerHTML = `📎 ${title} ready.`;
        await ask('Ich habe eine Datei hochgeladen: ' + title);
      }
    } catch (e) {
      console.error(e);
      info.textContent = '❌ Network / server problem during upload';
    } finally {
      lock(false);
      file.value = '';
    }
  });

  // Enter sends (Shift+Enter = newline)
  input?.addEventListener('keydown', (ev) => {
    if (ev.key === 'Enter' && !ev.shiftKey) {
      ev.preventDefault();
      form?.requestSubmit();
    }
  });

  // Form submit
  form?.addEventListener('submit', async (ev) => {
    ev.preventDefault();
    const q = (input.value || '').trim();
    if (!q) return;

    textBubble(q, 'user');
    input.value = '';
    await ask(q);
  });

  // Reset button: clear chat
  reset?.addEventListener('click', () => {
    log.innerHTML = '';
    input.focus();
    started = false;
  });

  // Chat handler (calls REST endpoint)
  async function ask(prompt, meta = {}) {
    lock(true);
    const wait = typing();

    try {
      const req = {
        utter: prompt,
        prompt,
        live: true,
        starter: !!meta.starter
      };
      if (!started) {
        req.reset = true;
        started = true;
      }

      const res = await fetch(CHAT_URL, {
        method: 'POST',
        credentials: 'include',
        headers: restHeaders({ 'Content-Type': 'application/json' }),
        body: JSON.stringify(req)
      });

      let json = {};
      try { json = await res.json(); } catch (_) {}

      // Accept both shapes: {success:true,data:{…}} or plain {answer:…}
      const env = (json && typeof json === 'object') ? json : {};
      const payload = (env.data && typeof env.data === 'object') ? env.data : env;

      const answer = (typeof payload.answer === 'string')
        ? payload.answer
        : (env.message || '');

      const downloadUrl = (typeof payload.download_url === 'string' && payload.download_url.length > 0)
        ? payload.download_url
        : null;

      renderAnswer(answer, downloadUrl);
    } catch (e) {
      console.error('Chat API call failed:', e);
      textBubble('⚠️ Network / server problem.', 'bot');
    } finally {
      if (wait && wait.remove) wait.remove();
      lock(false);
      input.focus();
    }
  }
})();
</script>/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3695ba7 */.elementor-9356 .elementor-element.elementor-element-3695ba7 {
  cursor: pointer;
}/* End custom CSS */
/* Start custom CSS *//* 1) Hero background + spacing (no overlay needed) */
#hero-paulina{
  background:
    radial-gradient(900px 320px at 10% 8%, rgba(1,45,90,.06) 0%, transparent 60%),
    radial-gradient(1100px 420px at 95% 92%, rgba(112,76,216,.09) 0%, transparent 70%),
    #fff;
  padding: clamp(48px,6vw,96px) 0;
}

/* 2) Two-column layout for chat + image */
.hero-content{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:32px;
  align-items:center;
}

/* 3) Image behaviour */
.signature img{
  width:100%;
  max-width:520px;
  height:auto;
  object-fit:contain;
  margin-left:auto;
  filter: drop-shadow(0 16px 40px rgba(1,35,69,.10));
}

/* Desktop / tablet: two columns */
@media (min-width: 981px){
  .hero-container{
    display:grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap:32px;
    align-items:center;
  }
  .hero-container .elementor-widget-html{ order:1; }
  .hero-container .signature{ order:2; justify-self:end; }
}

/* Mobile: stack cleanly (text first, image second) */
@media (max-width: 980px){
  .hero-container{
    display:grid;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
    justify-items: stretch;
    align-items: start;
    gap:16px;
    width:100%;
  }
  .hero-container .elementor-widget-html{ order:1; align-self:start; }
  .hero-container .signature{ order:2; align-self:center; justify-self:center; }
  .hero-container .signature img{
    max-width:260px !important;
    height:auto;
    margin:12px auto 0 !important;
  }
}


@media (max-width: 980px){
  .hero-container .signature{ order:3; }          /* below text + chips */
  .hero-container .signature img{
    max-width:240px !important;
    margin:20px auto 0 !important;               /* space above image */
  }
}
.hero-container .chip,
.hero-container .btn,
.hero-container .elementor-widget-html a.button{
  border:2px solid #0E2337 !important;           /* navy */
  background:#0E2337 !important;
  color:#fff !important;
}
@media (max-width: 480px){
  h1{ font-size: clamp(34px, 8vw, 44px); line-height:1.05; }
}

html, body { height: 100%; }
body #page { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer.site-footer { margin-top: auto; width: 100%; }

/* ——— HERO GRID (desktop/tablet two columns, chat left) ——— */
.hero-container{
display:grid;
grid-template-columns: minmax(520px, 1.1fr) minmax(360px, 0.9fr);
gap: 32px;
align-items: start;
}

/* Ensure the chat and video don’t overflow */
#chat-area, #video-area{ min-width:0; }

/* Tighten the chat column look (does NOT change bubble internals) */
#chat-area{ margin-top: 6px; }
#video-area iframe, #video-area video{ width:100%; height:auto; display:block; }

/* ——— MOBILE / TABLET STACK ——— /
@media (max-width: 980px){
.hero-container{
grid-template-columns: 1fr !important;
grid-auto-rows: auto;
gap: 16px;
justify-items: stretch;
align-items: start;
}
/ Order: chat first, buttons second, video third /
#chat-area{ order:1; }
#starter-row{ order:2; }
#video-area{ order:3; }
/ Slightly smaller image on phones */
.hero-container .signature img{
max-width: 260px !important;
height:auto;
margin:12px auto 0 !important;
}
}

/* ——— EXTERNAL STARTER BUTTONS ROW (not chat CSS) ——— */
#starter-row{
display:flex; flex-wrap:wrap; gap:12px;
justify-content:center;
margin: 4px 0 14px 0;
}

/* Minimal, brand‑friendly chip style: ONLY affects external buttons with data‑pg‑utter /
#starter-row [data-pg-utter]{
-webkit-appearance:none; appearance:none;
background:#0E2337;                             / navy background to match site /
color:#fff; border:2px solid #0E2337;           / strong outline */
border-radius:999px;
padding:10px 14px; font-weight:700; letter-spacing:.2px;
box-shadow:0 6px 16px rgba(0,0,0,.12);
transition:transform .06s ease, filter .18s ease;
text-decoration:none;
}
#starter-row [data-pg-utter]:hover{ filter:brightness(.95); transform:translateY(-1px); }
#starter-row [data-pg-utter]:focus{ outline:2px solid rgba(112,76,216,.35); outline-offset:2px; }

/* Compact chips on phones */
@media (max-width: 480px){
#starter-row [data-pg-utter]{ padding:9px 12px; font-size:15px; }
}

/* ——— PREVENT BOTTOM BAR OVERLAP ——— */
html, body { height: 100%; }
body #page { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
footer.site-footer { margin-top: auto; width: 100%; }
body{ padding-bottom: max(16px, env(safe-area-inset-bottom)); }/* End custom CSS */