fix: Lock thumbnails and timeline when UX is locked for calls (#2487)

src/scss/drawer.scss

@@ -1,3 +1,5 @@
+@use 'locked.scss';
+
 $drawer-icon-size: 20px;
 $drawer-padding-extend: 20px;
 
@@ -47,6 +49,12 @@ advanced-camera-card-icon.control {
   transition: opacity 0.5s ease;
 }
 
+// While locked, the control is dimmed and non-interactive. Applied to the
+// control rather than `:host` so the drawer's slotted content is unaffected.
+:host([locked]) advanced-camera-card-icon.control {
+  @include locked.style;
+}
+
 :host([location='left']) advanced-camera-card-icon.control {
   border-top-right-radius: $drawer-icon-size;
   border-bottom-right-radius: $drawer-icon-size;

src/scss/locked.scss

@@ -1,8 +1,7 @@
-// Shared styling for components that reflect a `locked` host attribute (set by
-// Lit when the consumer-facing `locked` property is true). Dims the host and
-// disables pointer interaction without removing it from layout, so the element
-// stays in place during mic mute/unmute transitions.
-:host([locked]) {
+// The shared definition of the "locked" appearance: dimmed and
+// non-interactive, without removing the element from layout (so it holds its
+// place during lock/unlock transitions).
+@mixin style {
   opacity: 0.4;
   pointer-events: none;
 }

src/scss/next-previous-control.scss

@@ -1,4 +1,5 @@
 @use './button.scss';
+@use './locked.scss';
 
 :host {
   --advanced-camera-card-next-prev-size: 48px;
@@ -23,15 +24,14 @@
   right: var(--advanced-camera-card-right-position);
 }
 
-// Dim while locked. Deliberately applied to `.controls` rather than `:host`
-// (as the shared `locked.scss` does): `opacity` on the host would create a
-// stacking context that traps `.controls`'s `z-index`, dropping the control
-// behind the media whenever it is DOM-ordered before it (the left control).
-// `.controls` is already positioned and z-indexed, so dimming it here leaves
-// its stacking context intact.
+// Dim while locked. Deliberately applied to `.controls` rather than `:host`:
+// `opacity` on the host would create a stacking context that traps
+// `.controls`'s `z-index`, dropping the control behind the media whenever it
+// is DOM-ordered before it (the left control). `.controls` is already
+// positioned and z-indexed, so dimming it here leaves its stacking context
+// intact.
 :host([locked]) .controls {
-  opacity: 0.4;
-  pointer-events: none;
+  @include locked.style;
 }
 
 .controls.icons {

src/scss/thumbnail-carousel.scss

@@ -1,6 +1,10 @@
 @use 'const.scss';
 @use 'locked.scss';
 
+:host([locked]) {
+  @include locked.style;
+}
+
 :host {
   display: block;
   width: 100%;

src/scss/timeline-core.scss

@@ -3,6 +3,10 @@
 @use 'const.scss';
 @use 'locked.scss';
 
+:host([locked]) {
+  @include locked.style;
+}
+
 :host {
   width: 100%;
   // Share the screen space with thumbnails that may be above/below.