<!-- Sektion: YouTube Live Chat -->
    <section>
      <h2>YouTube Live Chat</h2>
      <p style="font-size:.85rem;color:#555;margin-bottom:.75rem">Visas automatiskt som overlay när en YouTube-liveström spelas upp. Döljs automatiskt för vanliga (inspelade) YouTube-videor.</p>

      <div class="prop-grid">
        <label>Position</label>
        <select id="yt-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="yt-chat-width" min="5" max="60" step="1" value="25"
                 oninput="document.getElementById('yt-chat-width-val').textContent=this.value+'%'">
          <span id="yt-chat-width-val" style="color:#aaa;min-width:3rem">25%</span>
        </div>

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

      <h3>Bakgrund</h3>
      <div class="prop-grid">
        <label>Färg</label>
        <input type="color" id="yt-chat-bg-color" value="#000000">

        <label>Transparens</label>
        <div class="row">
          <input type="range" id="yt-chat-bg-opacity" min="0" max="100" step="5" value="70"
                 oninput="document.getElementById('yt-chat-bg-opacity-val').textContent=this.value+'%'">
          <span id="yt-chat-bg-opacity-val" style="color:#aaa;min-width:3rem">70%</span>
        </div>
      </div>

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