Video over token, free-form video windows

templates/actor-mapping.hbs

@@ -0,0 +1,25 @@
+{{!-- Actor-Webcam Mapping Panel --}}
+<form class="sp-actor-mapping">
+  {{#if hasNoUsers}}
+  <p class="sp-actor-mapping__empty">{{localize "SCRYING_POOL.ActorMapping.noUsers"}}</p>
+  {{else}}
+  <p class="sp-actor-mapping__hint">{{localize "SCRYING_POOL.ActorMapping.description"}}</p>
+  <div class="sp-actor-mapping__table">
+    {{#each users}}
+    <div class="sp-actor-mapping__row">
+      <div class="sp-actor-mapping__user">
+        <img class="sp-actor-mapping__user-avatar" src="{{this.avatar}}" alt="">
+        <span class="sp-actor-mapping__user-name">{{this.name}}</span>
+        {{#if this.isGM}}<span class="sp-actor-mapping__badge">{{localize "SCRYING_POOL.ActorMapping.gmBadge"}}</span>{{/if}}
+      </div>
+      <select name="{{this.id}}" class="sp-actor-mapping__select">
+        <option value="">{{localize "SCRYING_POOL.ActorMapping.noneOption"}}</option>
+        {{#each this.actors}}
+        <option value="{{this.id}}" {{#if this.selected}}selected{{/if}}>{{this.name}}</option>
+        {{/each}}
+      </select>
+    </div>
+    {{/each}}
+  </div>
+  {{/if}}
+</form>

templates/freeform-camera.hbs

@@ -0,0 +1,23 @@
+{{!-- Freeform camera window body --}}
+<section class="freeform-camera__body" data-user-id="{{userId}}">
+  <div class="freeform-camera__video-container"></div>
+  <div class="freeform-camera__footer">
+    <div class="freeform-camera__footer-left">
+      <button type="button" class="freeform-camera__control-btn freeform-camera__mic-btn"
+              data-action="toggle-mic"
+              data-tooltip="{{localize 'SCRYING_POOL.Freeform.toggleMic'}}">
+        {{#if audioMuted}}
+        <i class="fas fa-microphone-slash"></i>
+        {{else}}
+        <i class="fas fa-microphone"></i>
+        {{/if}}
+      </button>
+      <span class="freeform-camera__name">{{userName}}</span>
+    </div>
+    <div class="freeform-camera__footer-right">
+      <input type="range" class="freeform-camera__volume" min="0" max="1" step="0.05" value="{{volume}}"
+             data-action="set-volume"
+             data-tooltip="{{localize 'SCRYING_POOL.Freeform.volume'}}">
+    </div>
+  </div>
+</section>

templates/settings.hbs

@@ -31,6 +31,25 @@
         {{/if}}
       </div>
     </div>
+
+    <!-- Layout selector -->
+    <div class="scrying-pool-settings__content">
+      <div class="scrying-pool-settings__status">
+        <label class="scrying-pool-settings__label">View Layout</label>
+        <div class="scrying-pool-settings__layout-group">
+          {{#each dockLayouts}}
+          <button type="button"
+                  class="scrying-pool-settings__layout-btn{{#if isActive}} is-active{{/if}}"
+                  data-action="set-dock-layout"
+                  data-layout="{{key}}"
+                  data-tooltip="{{label}}">
+            <i class="fas {{icon}}" aria-hidden="true"></i>
+            <span class="scrying-pool-settings__layout-size">{{size}}</span>
+          </button>
+          {{/each}}
+        </div>
+      </div>
+    </div>
   </div>
 
   <style>
@@ -206,5 +225,48 @@
         background: linear-gradient(175deg, hsl(0, 60%, 35%) 0%, hsl(0, 60%, 30%) 100%);
       }
     }
+
+    /* Layout selector */
+    .scrying-pool-settings__layout-group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      justify-content: center;
+    }
+
+    .scrying-pool-settings__layout-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 3px;
+      padding: 4px 7px;
+      font-size: 11px;
+      font-weight: 500;
+      background: rgba(255, 255, 255, 0.06);
+      color: var(--sp-text-primary, #dde2e8);
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background 0.15s, border-color 0.15s;
+
+      i {
+        font-size: 10px;
+        pointer-events: none;
+      }
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.12);
+        border-color: rgba(255, 255, 255, 0.2);
+      }
+
+      &.is-active {
+        background: hsl(200, 55%, 35%);
+        border-color: hsl(200, 55%, 50%);
+      }
+    }
+
+    .scrying-pool-settings__layout-size {
+      font-size: 9px;
+      opacity: 0.6;
+    }
   </style>
 </form>