Updateees

static/css/layout.css

@@ -18,23 +18,112 @@
     left: 0;
     right: 0;
     z-index: 50;
-    padding: 0.45rem 0.55rem;
+    padding: 0.25rem 0.45rem;
 }
 
-.ui-controls {
+.taskbar-shell {
     display: flex;
     align-items: center;
-    gap: 0.4rem;
+    width: 100%;
+    min-height: 2.15rem;
 }
 
-.theme-picker {
-    min-width: 9rem;
+.taskbar-program-list {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.taskbar-program-btn {
+    min-height: 1.8rem;
+    max-width: min(14rem, 42vw);
+    padding: 0.18rem 0.5rem 0.18rem 0.34rem;
+    border: var(--control-border-width) solid var(--border-outer);
+    background: var(--surface-control);
+    color: var(--text-primary);
+    box-shadow: var(--button-shadow);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.38rem;
+    cursor: pointer;
+    overflow: hidden;
+}
+
+.taskbar-program-btn.is-active {
+    box-shadow: var(--button-shadow-active);
+    transform: translateY(1px);
+}
+
+.taskbar-program-btn span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.taskbar-icon {
+    width: 1rem;
+    height: 1rem;
+    flex: 0 0 auto;
+    image-rendering: pixelated;
 }
 
 .desktop-taskbar {
     display: none;
 }
 
+.ui-tool-window {
+    position: fixed;
+    z-index: 80;
+    top: 6.2rem;
+    left: 1rem;
+    width: min(24rem, calc(100vw - 2rem));
+    height: 14rem;
+    min-width: 16.25rem;
+    min-height: 10rem;
+    resize: both;
+    overflow: auto;
+    max-width: calc(100vw - 1rem);
+    max-height: calc(100vh - 1rem);
+}
+
+.ui-tool-title-bar {
+    cursor: grab;
+}
+
+.ui-tool-window .title-bar-controls button {
+    cursor: pointer;
+}
+
+.tool-copy {
+    margin-bottom: 0.45rem;
+}
+
+.theme-option-list {
+    display: grid;
+    gap: 0.35rem;
+}
+
+.theme-option-btn,
+.mode-toggle-btn {
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.4rem;
+    width: 100%;
+}
+
+.theme-option-btn.is-selected {
+    outline: var(--selected-outline);
+    outline-offset: -0.28rem;
+}
+
+body.is-dragging-window {
+    user-select: none;
+}
+
+body.is-dragging-window .ui-tool-title-bar {
+    cursor: grabbing;
+}
+
 .config-window {
     width: min(78rem, 100%);
 }
@@ -262,11 +351,25 @@
     grid-template-columns: 2fr 1fr;
 }
 
-.room-main-window,
-.side-panel-window {
+.room-main-window {
     min-height: 40rem;
 }
 
+.side-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    min-width: 0;
+}
+
+.participants-window {
+    min-height: 24rem;
+}
+
+.admin-window {
+    min-height: 15rem;
+}
+
 .room-meta {
     display: flex;
     justify-content: space-between;
@@ -327,6 +430,14 @@
     overflow-y: auto;
 }
 
+.participants-footer {
+    margin-top: 0.5rem;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.35rem;
+    align-items: center;
+}
+
 .participant-item {
     display: flex;
     justify-content: space-between;
@@ -365,7 +476,8 @@
     min-width: 0;
 }
 
-#room-status {
+#votes-counter,
+#room-message {
     min-width: 0;
     overflow-wrap: anywhere;
     word-break: break-word;
@@ -449,6 +561,16 @@
         padding: 0.3rem 0.55rem;
     }
 
+    .desktop-taskbar .taskbar-program-btn {
+        min-width: 11.2rem;
+        max-width: 15rem;
+    }
+
+    .ui-tool-window {
+        top: 4.25rem;
+        left: 1rem;
+    }
+
     #desktop {
         padding: 1rem 1rem 3.4rem;
     }
@@ -461,7 +583,8 @@
     }
 
     .room-main-window,
-    .side-panel-window {
+    .participants-window,
+    .admin-window {
         min-height: unset;
     }
 }
@@ -472,6 +595,17 @@
         padding-top: 3.65rem;
     }
 
+    .taskbar-program-btn span {
+        display: none;
+    }
+
+    .taskbar-program-btn {
+        max-width: none;
+        width: 2rem;
+        justify-content: center;
+        padding: 0.2rem;
+    }
+
     .field-row {
         grid-template-columns: 1fr;
     }

static/css/main.css

@@ -18,9 +18,22 @@ body {
 
 .mobile-control-strip,
 .taskbar {
-    background: var(--surface-window);
+    background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--surface-window) 87%, #ffffff 13%) 0%,
+        color-mix(in srgb, var(--surface-window) 92%, #000000 8%) 100%
+    );
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.45),
+        0 -1px 0 rgba(0, 0, 0, 0.35);
+}
+
+.mobile-control-strip {
+    border-bottom: var(--window-border-width) solid var(--border-outer);
+}
+
+.taskbar {
     border-top: var(--window-border-width) solid var(--border-outer);
-    box-shadow: var(--window-shadow);
 }
 
 .taskbar {