@velor/remote-mouse 6.4.8

package/public/styles.css

@@ -0,0 +1,1042 @@
+:root {
+  color-scheme: dark;
+  --bg: #101417;
+  --bg-2: #1a2228;
+  --fg: #f0f4f7;
+  --accent: #4bd4ff;
+  --menu-h: 58px;
+  --scroll-zone-width: 36px;
+  --scroll-zone-edge-gap: 10px;
+  --preview-gap-from-scroll: 8px;
+  --touch-ui-gap: 10px;
+  --remote-max-width: 320px;
+  --remote-cell-width: 63px;
+}
+
+html[data-theme="light"] {
+  color-scheme: light;
+  --bg: #eff5f8;
+  --bg-2: #dfe8ee;
+  --fg: #18232c;
+  --accent: #0a86b8;
+}
+
+* {
+  box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  background: radial-gradient(circle at 20% 10%, #1f2e3a, var(--bg));
+  color: var(--fg);
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+}
+
+#app {
+  height: 100%;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto var(--menu-h) auto;
+}
+
+#app.keyboard-remote-hidden {
+  grid-template-rows: minmax(0, 1fr) auto 0 auto;
+}
+
+#workspace {
+  grid-row: 1;
+  min-height: 0;
+  display: flex;
+}
+
+#left-menu {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 25;
+  width: 188px;
+  min-width: 188px;
+  padding: 8px 8px 10px;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: color-mix(in srgb, var(--bg-2) 85%, black);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  transform: translateX(-100%);
+  transition: transform 220ms ease;
+}
+
+html[data-theme="light"] #left-menu {
+  background: color-mix(in srgb, var(--bg-2) 92%, white);
+  border-right-color: rgba(24, 35, 44, 0.12);
+}
+
+#app.admin-drawer-open #left-menu {
+  transform: translateX(0);
+}
+
+.admin-group {
+  display: grid;
+  gap: 8px;
+}
+
+.admin-split-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.admin-separator {
+  width: 100%;
+  height: 1px;
+  margin: 2px 0;
+  border: none;
+  background: rgba(240, 244, 247, 0.18);
+}
+
+html[data-theme="light"] .admin-separator {
+  background: rgba(24, 35, 44, 0.14);
+}
+
+#left-menu button {
+  appearance: none;
+  border: none;
+  border-radius: 8px;
+  color: var(--fg);
+  background: #2c3943;
+  font-size: 0.9rem;
+  font-weight: 650;
+  width: 100%;
+  min-height: 42px;
+  height: auto;
+  padding: 8px 10px;
+  text-align: center;
+  line-height: 1.15;
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+
+#left-menu button:active {
+  transform: translateY(1px);
+  background: #384955;
+}
+
+html[data-theme="light"] #left-menu button {
+  color: var(--fg);
+  background: #c9d8e2;
+}
+
+html[data-theme="light"] #left-menu button:active {
+  background: #b7cad6;
+}
+
+.admin-group-updates button {
+  background: #21465b;
+}
+
+.admin-group-updates button:active {
+  background: #2c5871;
+}
+
+.admin-group-display button {
+  background: #41365e;
+}
+
+.admin-group-display button:active {
+  background: #514478;
+}
+
+.admin-group-access button {
+  background: #672732;
+}
+
+.admin-group-access button:active {
+  background: #7e3240;
+}
+
+#admin-app-version {
+  margin: 0;
+  padding: 0;
+  opacity: 0.72;
+  font-size: 0.78rem;
+  line-height: 1.2;
+  text-align: center;
+}
+
+.admin-version-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 6px 2px;
+}
+
+.admin-version-icon {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 18px;
+  border-radius: 5px;
+  opacity: 0.88;
+}
+
+.admin-drawer-footer {
+  margin-top: auto;
+  display: grid;
+  gap: 8px;
+}
+
+.admin-drawer-message {
+  margin: 0;
+  padding: 10px 8px 0;
+  color: rgba(255, 207, 127, 0.92);
+  font-size: 0.8rem;
+  line-height: 1.35;
+  text-align: center;
+}
+
+.admin-drawer-message.hidden {
+  display: none;
+}
+
+html[data-theme="light"] .admin-drawer-message {
+  color: #8d5a00;
+}
+
+#touch-area {
+  position: relative;
+  min-width: 0;
+  flex: 1;
+}
+
+#client-watermark {
+  position: absolute;
+  top: calc(env(safe-area-inset-top));
+  left: calc(env(safe-area-inset-left));
+  z-index: 23;
+  width: 34px;
+  height: 34px;
+  opacity: 0.9;
+  pointer-events: none;
+  user-select: none;
+  filter: saturate(0.54) brightness(0.9);
+}
+
+html[data-handedness="left"] #client-watermark {
+  left: auto;
+  right: calc(env(safe-area-inset-right) + 6px);
+}
+
+html[data-theme="light"] #client-watermark {
+  filter: saturate(0.45) brightness(0.82);
+}
+
+#touch-chrome {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--scroll-zone-width);
+  grid-template-rows: minmax(0, 1fr);
+  gap: var(--touch-ui-gap);
+  align-items: start;
+  padding:
+    calc(env(safe-area-inset-top) + 8px)
+    calc(env(safe-area-inset-right) + var(--scroll-zone-edge-gap))
+    calc(env(safe-area-inset-bottom) + 8px)
+    calc(env(safe-area-inset-left) + var(--scroll-zone-edge-gap));
+  pointer-events: none;
+}
+
+html[data-handedness="left"] #touch-chrome {
+  grid-template-columns: var(--scroll-zone-width) minmax(0, 1fr);
+}
+
+#admin-drawer-scrim {
+  position: absolute;
+  inset: 0;
+  z-index: 24;
+  background: rgba(8, 12, 16, 0.42);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 180ms ease;
+}
+
+#app.admin-drawer-open #admin-drawer-scrim {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+#remote-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: stretch;
+  width: 100%;
+  max-width: 100%;
+  justify-self: stretch;
+  align-self: start;
+  pointer-events: none;
+  transition: opacity 180ms ease, transform 220ms ease;
+}
+
+html[data-handedness="left"] #remote-stack {
+  grid-column: 2;
+}
+
+#remote-stack.is-hidden {
+  opacity: 0.16;
+  transform: none;
+  pointer-events: none;
+}
+
+#scroll-zone-indicator {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: stretch;
+  display: grid;
+  place-items: center;
+  width: var(--scroll-zone-width);
+  height: 100%;
+  min-width: 0;
+  border-radius: 16px;
+  background: rgba(75, 212, 255, 0.14);
+  border: 1px solid rgba(75, 212, 255, 0.34);
+  box-shadow: inset 0 0 0 1px rgba(75, 212, 255, 0.08);
+  transition: opacity 180ms ease;
+}
+
+#scroll-zone-indicator.is-hidden {
+  opacity: 0.16;
+  pointer-events: none;
+}
+
+html[data-handedness="left"] #scroll-zone-indicator {
+  grid-column: 1;
+}
+
+html[data-theme="light"] #scroll-zone-indicator {
+  background: rgba(10, 134, 184, 0.11);
+  border-color: rgba(10, 134, 184, 0.3);
+  box-shadow: inset 0 0 0 1px rgba(10, 134, 184, 0.06);
+}
+
+#scroll-zone-label {
+  color: rgba(75, 212, 255, 0.85);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-align: center;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  transform: rotate(180deg);
+  user-select: none;
+}
+
+html[data-theme="light"] #scroll-zone-label {
+  color: rgba(10, 134, 184, 0.92);
+}
+
+.remote-panel {
+  display: grid;
+  gap: 6px;
+  width: 100%;
+  padding: 8px;
+  border-radius: 16px;
+  background: rgba(10, 16, 20, 0.48);
+  backdrop-filter: blur(6px);
+  pointer-events: none;
+}
+
+.remote-panel-collapsible {
+  gap: 0;
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+
+#browser-shortcuts {
+  display: grid;
+  pointer-events: none;
+}
+
+#browser-shortcuts[hidden],
+#tv-controls[hidden],
+#vlc-controls[hidden],
+#cursor-preview[hidden],
+#menu[hidden],
+#keyboard-panel[hidden],
+#keyboard-shortcuts-bar[hidden] {
+  display: none !important;
+}
+
+html[data-theme="light"] .remote-panel {
+  background: rgba(248, 252, 255, 0.74);
+}
+
+.remote-panel-title {
+  margin: 0;
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-align: center;
+  opacity: 0.74;
+}
+
+.remote-panel-toggle {
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: inherit;
+  display: grid;
+  grid-template-columns: 10px minmax(0, 1fr) 10px;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 4px 4px 10px;
+  pointer-events: auto;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.remote-panel-toggle:active {
+  transform: none;
+}
+
+.remote-panel-toggle .remote-panel-title {
+  grid-column: 2;
+  text-align: center;
+}
+
+.remote-panel-chevron {
+  grid-column: 3;
+  width: 10px;
+  height: 10px;
+  border-right: 2px solid rgba(240, 244, 247, 0.68);
+  border-bottom: 2px solid rgba(240, 244, 247, 0.68);
+  transform: rotate(45deg);
+  transition: transform 220ms ease, opacity 180ms ease;
+  opacity: 0.72;
+}
+
+html[data-theme="light"] .remote-panel-chevron {
+  border-right-color: rgba(24, 35, 44, 0.52);
+  border-bottom-color: rgba(24, 35, 44, 0.52);
+}
+
+.remote-panel-toggle[aria-expanded="true"] .remote-panel-chevron {
+  transform: rotate(-135deg);
+  opacity: 0.88;
+}
+
+.remote-panel-content {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 240ms ease, opacity 180ms ease, padding-top 180ms ease;
+  opacity: 1;
+  padding-top: 2px;
+}
+
+.remote-panel-content.is-collapsed {
+  grid-template-rows: 0fr;
+  opacity: 0;
+  padding-top: 0;
+}
+
+.remote-panel-content-inner {
+  overflow: hidden;
+}
+
+.remote-panel-actions {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.tv-actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 6px;
+}
+
+.browser-actions button,
+.tv-actions button,
+#menu button,
+#keyboard-panel button {
+  appearance: none;
+  border: none;
+  border-radius: 10px;
+  color: var(--fg);
+  background: rgba(44, 57, 67, 0.92);
+  font-size: 0.76rem;
+  font-weight: 700;
+  min-height: 30px;
+  padding: 0 4px;
+  touch-action: none;
+  user-select: none;
+}
+
+#left-menu button:disabled,
+.browser-actions button:disabled,
+.tv-actions button:disabled,
+#menu button:disabled,
+#keyboard-panel button:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  filter: saturate(0.55);
+}
+
+.browser-actions button,
+.tv-actions button {
+  width: 100%;
+  min-width: 0;
+  height: 30px;
+}
+
+.browser-actions button:active,
+.tv-actions button:active {
+  transform: translateY(1px);
+  background: rgba(56, 73, 85, 0.96);
+}
+
+html[data-theme="light"] .browser-actions button,
+html[data-theme="light"] .tv-actions button,
+html[data-theme="light"] #menu button,
+html[data-theme="light"] #keyboard-panel button {
+  color: var(--fg);
+  background: rgba(216, 229, 237, 0.96);
+}
+
+html[data-theme="light"] .browser-actions button:active,
+html[data-theme="light"] .tv-actions button:active,
+html[data-theme="light"] #menu button:active,
+html[data-theme="light"] #keyboard-panel button:active {
+  background: rgba(198, 217, 228, 0.98);
+}
+
+#left-menu button:disabled:active,
+.browser-actions button:disabled:active,
+.tv-actions button:disabled:active,
+#menu button:disabled:active,
+#keyboard-panel button:disabled:active {
+  transform: none;
+}
+
+.browser-actions button {
+  pointer-events: auto;
+  line-height: 1;
+}
+
+.tv-actions button {
+  pointer-events: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.1;
+}
+
+.browser-actions {
+  width: 100%;
+  max-width: 272px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 6px;
+  margin-left: auto;
+  margin-right: 0;
+  pointer-events: none;
+}
+
+html[data-handedness="left"] .browser-actions {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+.tv-actions {
+  width: 100%;
+  max-width: 272px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 6px;
+  margin-left: auto;
+  margin-right: 0;
+  pointer-events: none;
+}
+
+html[data-handedness="left"] .tv-actions {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+.remote-grid-row {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: var(--remote-cell-width);
+  gap: 6px;
+  width: max-content;
+  justify-content: end;
+  pointer-events: none;
+}
+
+.browser-actions .remote-grid-row,
+.tv-actions .remote-grid-row {
+  margin-left: auto;
+}
+
+html[data-handedness="left"] .browser-actions .remote-grid-row,
+html[data-handedness="left"] .tv-actions .remote-grid-row {
+  margin-left: 0;
+  margin-right: auto;
+}
+
+.remote-browser-launchers {
+  grid-auto-columns: minmax(var(--remote-cell-width), max-content);
+}
+
+.remote-browser-launchers:empty {
+  display: none;
+}
+
+.remote-browser-launchers button {
+  min-width: var(--remote-cell-width);
+  padding-inline: 10px;
+}
+
+#touchpad {
+  width: 100%;
+  height: 100%;
+  touch-action: none;
+  background:
+    linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
+    linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%),
+    linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%);
+  background-size: 32px 32px;
+  background-position: 0 0, 0 16px, 16px -16px, -16px 0;
+}
+
+#touchpad-hint {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  max-width: 272px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 10px 8px 0;
+  pointer-events: none;
+}
+
+#touchpad-hint > * {
+  margin: 0;
+  text-align: center;
+}
+
+#touchpad-hint-title {
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 1.12rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+#touchpad-hint-subtitle {
+  margin-top: 10px;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 0.9rem;
+  font-weight: 500;
+  line-height: 1.3;
+  white-space: pre-line;
+}
+
+html[data-theme="light"] #touchpad-hint-title {
+  color: rgba(24, 35, 44, 0.74);
+}
+
+html[data-theme="light"] #touchpad-hint-subtitle {
+  color: rgba(24, 35, 44, 0.54);
+}
+
+#cursor-preview {
+  position: absolute;
+  bottom: 6px;
+  left: calc(env(safe-area-inset-left) + 6px);
+  right: auto;
+  z-index: 18;
+  display: grid;
+  gap: 4px;
+  justify-items: start;
+  opacity: 0;
+  transform: translateY(8px) scale(0.96);
+  transition: opacity 180ms ease, transform 220ms ease;
+  pointer-events: none;
+  overflow: hidden;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(7, 11, 14, 0.95);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+}
+
+html[data-handedness="left"] #cursor-preview {
+  right: calc(env(safe-area-inset-right) + 6px);
+  left: auto;
+  justify-items: end;
+}
+
+#cursor-preview.is-visible {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+#preview-canvas {
+  width: 128px;
+  height: 84px;
+  display: block;
+  border-radius: inherit;
+}
+
+html[data-theme="light"] #cursor-preview {
+  border-color: rgba(24, 35, 44, 0.16);
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 6px 18px rgba(40, 76, 97, 0.16);
+}
+
+#menu {
+  grid-row: 3;
+  height: var(--menu-h);
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  padding: 6px;
+  background: color-mix(in srgb, var(--bg-2) 85%, black);
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+#menu button:active,
+#keyboard-panel button:active,
+#keyboard-shortcuts-bar button:active {
+  transform: translateY(1px);
+  background: rgba(56, 73, 85, 0.96);
+}
+
+#keyboard-panel button[aria-pressed="true"],
+#keyboard-shortcuts-bar button[aria-pressed="true"] {
+  background: rgba(75, 212, 255, 0.32);
+  color: #f7fcff;
+  box-shadow:
+    inset 0 0 0 1px rgba(75, 212, 255, 0.9),
+    0 0 0 1px rgba(75, 212, 255, 0.22);
+}
+
+#keyboard-panel button[aria-pressed="true"]:active,
+#keyboard-shortcuts-bar button[aria-pressed="true"]:active {
+  background: rgba(75, 212, 255, 0.42);
+}
+
+#menu button.is-active {
+  background: rgba(75, 212, 255, 0.24);
+  box-shadow: inset 0 0 0 1px rgba(75, 212, 255, 0.28);
+}
+
+html[data-theme="light"] #menu button.is-active {
+  background: rgba(10, 134, 184, 0.16);
+  box-shadow: inset 0 0 0 1px rgba(10, 134, 184, 0.18);
+}
+
+html[data-theme="light"] #keyboard-panel button[aria-pressed="true"],
+html[data-theme="light"] #keyboard-shortcuts-bar button[aria-pressed="true"] {
+  background: rgba(10, 134, 184, 0.24);
+  color: #062231;
+  box-shadow:
+    inset 0 0 0 1px rgba(10, 134, 184, 0.7),
+    0 0 0 1px rgba(10, 134, 184, 0.12);
+}
+
+html[data-theme="light"] #keyboard-panel button[aria-pressed="true"]:active,
+html[data-theme="light"] #keyboard-shortcuts-bar button[aria-pressed="true"]:active {
+  background: rgba(10, 134, 184, 0.3);
+}
+
+#keyboard-panel {
+  grid-row: 4;
+  min-height: 0;
+  padding: 10px;
+  display: grid;
+  gap: 8px;
+  background: rgba(16, 20, 23, 0.96);
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+  padding-bottom: calc(10px + env(safe-area-inset-bottom));
+}
+
+#keyboard-panel.hidden {
+  display: none;
+}
+
+#keyboard-shortcuts-bar.hidden {
+  display: none;
+}
+
+#keyboard-shortcuts-bar {
+  grid-row: 2;
+  padding: 0 8px 8px;
+  background: color-mix(in srgb, var(--bg-2) 85%, black);
+  border-top: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+#keyboard-panel-preview {
+  min-height: 32px;
+  padding: 6px 4px 0;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 0.92rem;
+  font-weight: 500;
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+#keyboard-panel-preview.is-empty {
+  min-height: 0;
+  padding-top: 0;
+}
+
+.keyboard-mode {
+  display: grid;
+  gap: 8px;
+}
+
+.keyboard-controls {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.keyboard-mode.hidden {
+  display: none;
+}
+
+.keyboard-text-entry-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: end;
+}
+
+#text-input,
+#live-text-input {
+  width: 100%;
+  min-height: 44px;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: #11181d;
+  color: var(--fg);
+  resize: none;
+  font: inherit;
+}
+
+html[data-theme="light"] #text-input,
+html[data-theme="light"] #live-text-input {
+  border-color: rgba(24, 35, 44, 0.14);
+  background: #ffffff;
+}
+
+#live-text-input {
+  min-height: 44px;
+  height: 44px;
+}
+
+html[data-theme="light"] #keyboard-panel-preview {
+  color: rgba(24, 35, 44, 0.8);
+}
+
+#send-text {
+  width: 96px;
+  min-width: 96px;
+  height: 44px;
+  padding: 0 14px;
+  background: var(--accent);
+  color: #062231;
+  border-radius: 12px;
+  font-weight: 800;
+  box-shadow:
+    0 6px 16px rgba(75, 212, 255, 0.18),
+    inset 0 0 0 1px rgba(6, 34, 49, 0.08);
+}
+
+html[data-theme="light"] #send-text {
+  box-shadow:
+    0 6px 14px rgba(10, 134, 184, 0.16),
+    inset 0 0 0 1px rgba(6, 34, 49, 0.06);
+}
+
+@media (max-width: 640px) {
+  #remote-stack {
+    max-width: 100%;
+  }
+
+  .tv-actions {
+    width: 100%;
+    max-width: 272px;
+  }
+
+  .browser-actions {
+    width: 100%;
+    max-width: 272px;
+  }
+}
+
+@media (max-width: 640px) and (orientation: portrait) {
+  #touch-chrome {
+    grid-template-columns: minmax(0, 1fr) var(--scroll-zone-width);
+  }
+
+  html[data-handedness="left"] #touch-chrome {
+    grid-template-columns: var(--scroll-zone-width) minmax(0, 1fr);
+  }
+
+  #remote-stack {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  #scroll-zone-indicator {
+    min-height: 100%;
+  }
+}
+
+@media (orientation: landscape) {
+  #touch-chrome {
+    padding-top: calc(env(safe-area-inset-top) + 8px);
+    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
+  }
+
+  #remote-stack {
+    width: min(
+      calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - (var(--scroll-zone-width) + var(--touch-ui-gap) + (var(--scroll-zone-edge-gap) * 2))),
+      var(--remote-max-width)
+    );
+    justify-self: end;
+  }
+
+  html[data-handedness="left"] #remote-stack {
+    justify-self: start;
+  }
+}
+
+#connection-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  background: rgba(8, 12, 16, 0.55);
+  backdrop-filter: blur(3px) saturate(0.8);
+}
+
+#connection-overlay.hidden {
+  display: none;
+}
+
+.connection-card {
+  padding: 14px 18px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(19, 27, 33, 0.88);
+  text-align: center;
+}
+
+html[data-theme="light"] #connection-overlay {
+  background: rgba(234, 241, 245, 0.7);
+}
+
+#orientation-lock-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 45;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: rgba(8, 12, 16, 0.88);
+}
+
+html[data-theme="light"] #orientation-lock-overlay {
+  background: rgba(234, 241, 245, 0.92);
+}
+
+html[data-theme="light"] .connection-card {
+  border-color: rgba(24, 35, 44, 0.14);
+  background: rgba(255, 255, 255, 0.94);
+}
+
+.connection-card h2 {
+  margin: 0 0 6px;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.connection-card p {
+  margin: 0;
+  opacity: 0.85;
+  font-size: 0.9rem;
+}
+
+@media (orientation: landscape) {
+  #app {
+    display: none;
+  }
+
+  #orientation-lock-overlay {
+    display: flex;
+  }
+}
+
+#client-notifications {
+  position: fixed;
+  right: 10px;
+  top: calc(58px + env(safe-area-inset-top));
+  z-index: 50;
+  display: grid;
+  gap: 8px;
+  max-width: min(88vw, 360px);
+}
+
+.toast {
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(17, 24, 29, 0.92);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
+  font-size: 0.84rem;
+  line-height: 1.35;
+}
+
+.toast.warning {
+  border-color: rgba(255, 201, 107, 0.6);
+}
+
+.toast.error {
+  border-color: rgba(255, 111, 111, 0.65);
+}
+
+.toast .toast-title {
+  margin: 0 0 4px;
+  font-weight: 700;
+}
+
+.toast .toast-msg {
+  margin: 0;
+  opacity: 0.92;
+}
+
+@media (min-width: 820px) {
+  :root {
+    --menu-h: 72px;
+  }
+
+  #left-menu {
+    width: 204px;
+    min-width: 204px;
+  }
+}