add responsive session sidebar

packages/ui/src/styles/messaging/message-section.css

@@ -9,6 +9,48 @@
   border-bottom: 1px solid var(--border-base);
 }
 
+.session-sidebar-menu-button {
+  @apply inline-flex items-center justify-center border rounded-md px-2 py-1 text-sm font-medium;
+  border-color: var(--border-base);
+  background-color: transparent;
+  color: var(--text-primary);
+  transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.session-sidebar-menu-button:hover {
+  background-color: var(--surface-hover);
+}
+
+.session-sidebar-menu-button:focus-visible {
+  @apply ring-2 ring-offset-1;
+  ring-color: var(--accent-primary);
+  ring-offset-color: var(--surface-secondary);
+}
+
+.session-sidebar-menu-icon {
+  font-size: var(--font-size-base);
+  line-height: 1;
+}
+
+.status-indicator {
+  @apply flex items-center gap-1.5 text-xs;
+  color: var(--text-muted);
+}
+
+.status-indicator .status-dot {
+  @apply w-2 h-2 rounded-full;
+}
+
+.status-indicator .status-text {
+  display: inline-block;
+}
+
+@media (max-width: 1024px) {
+  .status-indicator .status-text {
+    display: none;
+  }
+}
+
 .connection-status-info {
   justify-self: start;
 }

packages/ui/src/styles/panels/session-layout.css

@@ -17,10 +17,71 @@
   background-color: var(--surface-secondary);
 }
 
+.session-layout-compact {
+  position: relative;
+}
+
+.session-sidebar-overlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: min(90vw, 360px);
+  max-width: 360px;
+  border-right: 1px solid var(--border-base);
+  box-shadow: var(--folder-card-shadow);
+  transform: translateX(0);
+  transition: transform 0.25s ease, opacity 0.2s ease;
+  z-index: 40;
+}
+
+.session-sidebar-collapsed {
+  transform: translateX(-100%);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.session-sidebar-backdrop {
+  @apply absolute inset-0;
+  border: none;
+  padding: 0;
+  background-color: var(--overlay-scrim);
+  cursor: pointer;
+  z-index: 30;
+}
+
+.session-sidebar-menu-button--floating {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 20;
+}
+
 .session-sidebar-header {
   @apply flex flex-col gap-2 w-full;
 }
 
+.session-sidebar-header-row {
+  @apply flex items-center justify-between gap-2;
+}
+
+.session-sidebar-close {
+  @apply inline-flex items-center gap-1 text-xs font-medium px-2 py-1 rounded-md border transition-colors;
+  border-color: var(--border-base);
+  background-color: var(--surface-base);
+  color: var(--text-primary);
+}
+
+.session-sidebar-close:hover {
+  background-color: var(--surface-hover);
+}
+
+.session-sidebar-close:focus-visible {
+  @apply ring-2 ring-offset-1;
+  ring-color: var(--accent-primary);
+  ring-offset-color: var(--surface-secondary);
+}
+
 .session-sidebar-title {
   color: var(--text-primary);
 }