<!-- Sektion: Kiosk Livechat -->
    <section>
      <h2>Kiosk Livechat</h2>
      <p style="font-size:.85rem;color:#555;margin-bottom:.75rem">Inbyggd chat — besökare deltar via QR-kod på sin mobil. Kan visas som helskärm (schema-typ "Kiosk Livechat") eller som overlay ovanpå annat innehåll.</p>

      <div class="prop-grid">
        <label>Overlay</label>
        <label style="display:flex;align-items:center;gap:.5rem;font-size:.9rem">
          <input type="checkbox" id="kiosk-chat-enabled">
          Visa kiosk-chat som overlay ovanpå annat innehåll
        </label>

        <label>Position</label>
        <select id="kiosk-chat-position">
          <option value="right">Höger sida</option>
          <option value="left">Vänster sida</option>
        </select>

        <label>Bredd</label>
        <div class="row">
          <input type="range" id="kiosk-chat-width" min="10" max="60" step="1" value="30"
                 oninput="document.getElementById('kiosk-chat-width-val').textContent=this.value+'%'">
          <span id="kiosk-chat-width-val" style="color:#aaa;min-width:3rem">30%</span>
        </div>

        <label>Höjd</label>
        <div class="row">
          <input type="range" id="kiosk-chat-height" min="30" max="100" step="5" value="80"
                 oninput="document.getElementById('kiosk-chat-height-val').textContent=this.value+'%'">
          <span id="kiosk-chat-height-val" style="color:#aaa;min-width:3rem">80%</span>
        </div>
      </div>

      <div class="row" style="margin-bottom:1.25rem">
        <button onclick="aktiveraChatOverlay('kiosk')">Aktivera overlay</button>
        <button class="secondary" onclick="avaktiveraChatOverlay('kiosk')">Stäng av overlay</button>
        <span id="kiosk-chat-status" style="color:#aaa;font-size:.85rem;align-self:center"></span>
      </div>
    </section>