Changeset 0.25.0 (#160)

src/css/pane-container.css

@@ -0,0 +1,167 @@
+/* ==========================================
+   Chat Switchboard — Pane Container
+   ==========================================
+   v0.25.0: Styles for the multi-pane layout system.
+   Covers: pane container, leaf panes, tabbed panes,
+   drag handles, and tab bars.
+   ========================================== */
+
+/* ── Container ─────────────────────────────── */
+
+.pane-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+/* ── Split ─────────────────────────────────── */
+
+.pane-split--horizontal {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    overflow: hidden;
+}
+
+.pane-split--vertical {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow: hidden;
+}
+
+/* ── Leaf Pane ─────────────────────────────── */
+
+.pane-leaf {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.pane-minimized {
+    max-width: 0 !important;
+    max-height: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    overflow: hidden !important;
+}
+
+/* ── Tabbed Pane ───────────────────────────── */
+
+.pane-tabbed {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+/* Tab Bar */
+.pane-tab-bar {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    background: var(--bg-secondary, #1a1a1e);
+    border-bottom: 1px solid var(--border, #2a2a2e);
+    flex-shrink: 0;
+    height: 32px;
+    padding: 0 4px;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.pane-tab-bar::-webkit-scrollbar { height: 0; }
+
+.pane-tab-btn {
+    background: none;
+    border: none;
+    color: var(--text-3, #777);
+    font-size: 11px;
+    font-weight: 600;
+    font-family: inherit;
+    padding: 6px 12px;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: color 0.15s, border-color 0.15s;
+    white-space: nowrap;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.pane-tab-btn:hover {
+    color: var(--text, #eee);
+}
+
+.pane-tab-btn--active {
+    color: var(--accent, #b38a4e);
+    border-bottom-color: var(--accent, #b38a4e);
+}
+
+/* Tab Content */
+.pane-tab-content {
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+    position: relative;
+}
+
+.pane-tab-panel {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+}
+
+/* When panel is hidden (inactive tab), override absolute positioning */
+.pane-tab-panel[style*="display: none"] {
+    position: absolute;
+}
+
+/* ── Drag Handle ───────────────────────────── */
+
+.pane-handle {
+    flex-shrink: 0;
+    background: var(--border, #2a2a2e);
+    transition: background 0.15s;
+    z-index: 10;
+}
+
+.pane-handle--horizontal {
+    width: 4px;
+    cursor: col-resize;
+}
+
+.pane-handle--vertical {
+    height: 4px;
+    cursor: row-resize;
+}
+
+.pane-handle:hover,
+.pane-handle--active {
+    background: var(--accent, #b38a4e);
+}
+
+/* ── Responsive ────────────────────────────── */
+
+@media (max-width: 768px) {
+    /* On mobile, splits collapse to vertical stack */
+    .pane-split--horizontal {
+        flex-direction: column;
+    }
+
+    .pane-handle--horizontal {
+        width: 100%;
+        height: 4px;
+        cursor: row-resize;
+    }
+
+    /* Hide non-primary panes on mobile */
+    .pane-split--horizontal > .pane:not(:first-child) {
+        display: none;
+    }
+    .pane-split--horizontal > .pane-handle {
+        display: none;
+    }
+}