/* ============================================================
   GINEXYS — WORKSPACE SKIN (VS CODE / CREATIVE CLOUD DESKTOP)
   Theme & Layout Architecture for Modular Developer Workspace
   ============================================================ */

/* ── WORKSPACE ROOT LAYOUT ── */
:root {
  /* One source of truth for the activity bar width. The mobile side panel is
     absolutely positioned and used to hardcode left:52px, so when the bar
     narrowed to 44px at <=600px the panel floated 8px clear of it and the tab
     strip ran underneath. */
  --ws-activity-bar-w: 52px;
}

.os-workspace {
  position: fixed;
  top: 48px;
  /* Sys-bar height */
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-ground);
  color: var(--text-primary);
  font-family: var(--font-fallback, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
  overflow: hidden;
  z-index: 100;
}

/* Hide desktop elements when workspace skin is active.
   NOT .os-window-layer: the tool windows live there permanently and the
   workspace positions them over its panes. See the docking block below. */
[data-skin="workspace"] .desktop-wallpaper,
[data-skin="workspace"] .desktop-icons,
[data-skin="workspace"] .dock,
[data-skin="workspace"] .os-legal-btn {
  display: none !important;
}

/* ── WINDOW DOCKING ──────────────────────────────────────────────────────────
   A tool window is never moved between the desktop layer and a workspace pane,
   because re-parenting an element containing an iframe reloads that iframe and
   destroys everything the tool was holding. Instead every window stays in
   #window-layer for its whole life and the workspace fixed-positions the
   visible ones over its pane rectangles (shell/workspace.js syncDocks).

   That means the layer, and the desktop shell it lives in, must stay rendered
   in this skin. They become a transparent pass-through surface above the
   workspace: no background, no pointer capture, only the docked windows are
   interactive. */
[data-skin="workspace"] .os-desktop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: visible;
  pointer-events: none;
  z-index: 140;
  /* above .os-workspace (100), below the legal menu (1000) */
}

[data-skin="workspace"] .os-window-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Only docked windows render in this skin. A window that belongs to a tab
   nobody is looking at stays in the DOM, alive, and simply is not painted. */
[data-skin="workspace"] .os-window-layer>.os-window {
  display: none;
}

[data-skin="workspace"] .os-window-layer>.os-window.is-docked {
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-ground);
  /* No transition: these follow a pane being dragged, and easing a fixed box
     toward a moving target reads as lag. */
  transition: none;
}

/* Chrome that belongs to a floating window, not to a pane. */
[data-skin="workspace"] .os-window.is-docked::before,
[data-skin="workspace"] .os-window.is-docked::after,
[data-skin="workspace"] .os-window.is-docked .os-window-titlebar,
[data-skin="workspace"] .os-window.is-docked .resize-handle {
  display: none !important;
}

[data-skin="workspace"] .os-window.is-docked .window-viewport {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  background: var(--surface-ground);
}

[data-skin="workspace"] .os-window.is-docked .window-viewport iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* In workspace skin, position the global os-legal-menu right above the status bar legal trigger */
[data-skin="workspace"] .os-legal-menu {
  position: fixed;
  bottom: 32px;
  right: 12px;
  z-index: 1000;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 4px;
  min-width: 160px;
}

[data-skin="workspace"] .os-legal-menu.is-open {
  display: block;
}

[data-skin="workspace"] .os-legal-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-size: 11.5px;
  font-family: var(--font-body, 'DM Mono', monospace);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: all var(--transition-fast, 150ms);
}

[data-skin="workspace"] .os-legal-item:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* Hide workspace when desktop skin is active */
[data-skin="desktop"] .os-workspace {
  display: none !important;
}

/* ── MAIN WORKSPACE CONTAINER (Body of Workspace) ── */
.workspace-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* ── 1. ACTIVITY BAR (Far Left Icon Bar) ── */
.workspace-activity-bar {
  width: var(--ws-activity-bar-w);
  min-width: var(--ws-activity-bar-w);
  background: var(--surface-base);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  user-select: none;
  z-index: 20;
}

.activity-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.activity-item {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md, 6px);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast, 150ms cubic-bezier(0.4, 0, 0.2, 1));
  padding: 0;
}

.activity-item:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.activity-item.is-active {
  color: var(--gold-base, #0088aa);
  background: var(--surface-raised);
  border-color: var(--gold-base, #0088aa);
  box-shadow: 0 0 0 1px var(--gold-glow, rgba(0, 136, 170, 0.15)), 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .activity-item.is-active {
  color: var(--gold-bright, #4dcce8);
  border-color: var(--gold-base, #00b4d8);
  box-shadow: 0 0 10px var(--gold-glow, rgba(0, 180, 216, 0.2));
}

.activity-item svg,
.activity-item img {
  width: 20px;
  height: 20px;
  pointer-events: none;
}

/* The tool icons are dark raster tiles while everything else in the bar is a
   line SVG that inherits currentColor. At 20px on a light bar they read as
   unlabelled dark holes. Give them a real tile treatment (slightly larger, own
   radius, hairline ring) so they look deliberate next to the line icons, and
   let the active/hover states reach them. */
.activity-item img {
  width: 30px;
  height: 30px;
  border-radius: 5px !important;
  /* border: 1px solid darkgoldenrod; */
  object-fit: cover;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  /* opacity: 0.78; */
  transition: opacity var(--transition-fast, 150ms), transform var(--transition-fast, 150ms);
}

.activity-item:hover img,
.activity-item.is-active img {
  opacity: 1;
}

.activity-item.is-active img {
  box-shadow: inset 0 0 0 1px var(--gold-base, #0088aa);
}

.activity-item .activity-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-base, #00b4d8);
  border: 1.5px solid var(--surface-base);
}

/* Tooltip on activity bar */
.activity-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-overlay);
  color: var(--text-primary);
  font-size: 11px;
  font-family: var(--font-fallback, 'Inter', sans-serif);
  font-weight: 500;
  padding: 4px 9px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border-default);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms, transform 120ms;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
}

.activity-item:hover[data-tooltip]::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(2px);
}

/* ── 2. SIDE PANEL (Secondary Collapsible Sidebar) ── */
.workspace-side-panel {
  width: 230px;
  min-width: 180px;
  max-width: 420px;
  background: var(--surface-ground);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--transition-base, 250ms cubic-bezier(0.4, 0, 0.2, 1)), transform var(--transition-base, 250ms cubic-bezier(0.4, 0, 0.2, 1));
  position: relative;
  user-select: none;
  z-index: 10;
}

.workspace-side-panel.is-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  border-right-color: transparent;
}

.side-panel-header {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-base);
}

.side-panel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.side-panel-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.side-panel-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm, 3px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast, 150ms);
}

.side-panel-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.side-panel-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Side Panel Section */
.panel-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.panel-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.panel-link-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel-link-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary);
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  transition: all var(--transition-fast, 150ms);
}

.panel-link-item:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.panel-link-item.is-active {
  color: var(--gold-base, #0088aa);
  background: var(--surface-raised);
  border-color: var(--border-subtle);
  font-weight: 500;
}

[data-theme="dark"] .panel-link-item.is-active {
  color: var(--gold-bright, #4dcce8);
}

/* Filter by Product Chips in Side Panel */
.product-filter-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.product-filter-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-body, 'DM Mono', monospace);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast, 150ms);
}

.product-filter-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.product-filter-btn.is-selected {
  background: var(--surface-raised);
  border-color: var(--border-default);
  color: var(--gold-base, #0088aa);
  font-weight: 600;
}

[data-theme="dark"] .product-filter-btn.is-selected {
  color: var(--gold-bright, #4dcce8);
}

.product-filter-btn .filter-count {
  font-size: 10.5px;
  color: var(--text-tertiary);
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--surface-sunken);
}

/* Side panel resizer */
.side-panel-resizer {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 15;
}

.side-panel-resizer:hover {
  background: var(--gold-base, #00b4d8);
  opacity: 0.5;
}

/* ── 3. MAIN CENTER WORKSPACE (Tabs + Editors) ── */
.workspace-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface-ground);
  position: relative;
  overflow: hidden;
}

/* ── TAB BAR ── */
.workspace-tabs-bar {
  height: 38px;
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  overflow: hidden;
  z-index: 10;
}

.workspace-tabs-list {
  flex: 1;
  display: flex;
  align-items: stretch;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.workspace-tabs-list::-webkit-scrollbar {
  display: none;
}

.workspace-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 100%;
  font-size: 12.5px;
  color: var(--text-secondary);
  border-right: 1px solid var(--border-subtle);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: background var(--transition-fast, 150ms), color var(--transition-fast, 150ms);
}

.workspace-tab:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.workspace-tab.is-active {
  color: var(--text-primary);
  background: var(--surface-ground);
  font-weight: 500;
}

/* is-active  = mounted in a pane (in split view, TWO tabs are).
   is-focused = the pane a tab click or keystroke will act on.
   Marking only the focused one, as this used to, made the other pane's tab
   look closed while its tool was plainly on screen. */
.workspace-tab.is-focused::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold-base, #0088aa);
}

[data-theme="dark"] .workspace-tab.is-focused::after {
  background: var(--gold-bright, #4dcce8);
}

/* Which pane a mounted tab lives in. Only meaningful while split, so it is
   scoped to .workspace-main.is-split. Without it the shared strip gives no
   clue why clicking a tab changed the right-hand pane and not the left: a
   half-width underline on the matching side. */
.workspace-main.is-split .workspace-tab[data-pane]::before {
  content: '';
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 50%;
  background: var(--gold-base, #0088aa);
  opacity: 0.45;
}

.workspace-main.is-split .workspace-tab[data-pane="primary"]::before {
  left: 0;
}

.workspace-main.is-split .workspace-tab[data-pane="secondary"]::before {
  right: 0;
}

.workspace-tab .tab-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-base, #0088aa);
}

/* App icons come from the registry, and the three tools ship 44px raster tiles
   (the same asset the dock and the desktop icons use). Unconstrained they
   painted at their natural size, overflowed the 15px slot and covered the
   first character of every tab label. Everything in this strip is 15px. */
.workspace-tab .tab-icon>* {
  width: 100%;
  height: 100%;
  display: block;
}

.workspace-tab .tab-icon img {
  object-fit: cover;
  border-radius: 3px;
}

[data-theme="dark"] .workspace-tab .tab-icon {
  color: var(--gold-bright, #4dcce8);
}

.workspace-tab .tab-close-btn {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm, 3px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  font-size: 11px;
  line-height: 1;
  transition: all var(--transition-fast, 150ms);
}

.workspace-tab .tab-close-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.workspace-tab:only-child .tab-close-btn {
  display: none;
}

/* Tabs Bar Right Controls (Split Editor, New Tab, Clock, Fullscreen) */
.workspace-tabs-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
}

.workspace-tabs-actions .sys-clock {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  letter-spacing: 0.05em;
  padding: 0 6px;
  user-select: none;
}

.tab-action-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast, 150ms);
}

.tab-action-btn:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
  border-color: var(--border-subtle);
}

.tab-action-btn.is-active {
  color: var(--gold-base, #0088aa);
  background: var(--surface-raised);
  border-color: var(--border-default);
}

[data-theme="dark"] .tab-action-btn.is-active {
  color: var(--gold-bright, #4dcce8);
}

/* ── 4. EDITOR VIEWPORT & SPLIT PANES (VS Code / vd-panel style) ── */
.workspace-editor-viewport {
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.workspace-pane {
  flex: 1;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-ground);
  min-width: 150px;
  transition: box-shadow var(--transition-fast, 150ms);
}

.workspace-pane.is-secondary {
  border-left: 1px solid var(--border-default);
  display: none;
}

.workspace-editor-viewport.is-split .workspace-pane.is-secondary {
  display: flex;
}

/* Active Pane Indicator */
.workspace-editor-viewport.is-split .workspace-pane.is-active-pane {
  box-shadow: inset 0 0 0 1px var(--gold-base, #0088aa);
}

[data-theme="dark"] .workspace-editor-viewport.is-split .workspace-pane.is-active-pane {
  box-shadow: inset 0 0 0 1px var(--gold-bright, #4dcce8);
}

/* Split Pane Resizer */
.workspace-split-resizer {
  width: 10px;
  margin-left: -5px;
  margin-right: -5px;
  cursor: col-resize;
  z-index: 50;
  display: none;
  background: transparent;
  position: relative;
  user-select: none;
  touch-action: none;
}

.workspace-editor-viewport.is-split .workspace-split-resizer {
  display: block;
}

.workspace-split-resizer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  background: var(--border-default);
  transition: background 150ms;
}

.workspace-split-resizer:hover::after,
.workspace-editor-viewport.is-resizing .workspace-split-resizer::after {
  background: var(--gold-base, #00b4d8);
}

.workspace-editor-viewport.is-resizing iframe {
  pointer-events: none !important;
}

.pane-content-container {
  flex: 1;
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Host existing OS Window instances directly inside workspace panes */
.pane-content-container .os-window {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  display: none !important;
  z-index: 1 !important;
  background: var(--surface-ground) !important;
}

.pane-content-container .os-window.is-active-view {
  display: flex !important;
  flex-direction: column !important;
}

.pane-content-container .os-window .os-window-titlebar,
.pane-content-container .os-window .resize-handle {
  display: none !important;
}

.pane-content-container .os-window .window-viewport {
  flex: 1 !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  display: flex !important;
  background: var(--surface-ground) !important;
}

.pane-content-container .os-window .window-viewport iframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  display: block !important;
}

.workspace-tab-view {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.workspace-tab-view.is-active-view {
  display: block;
}

.pane-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: var(--surface-ground);
}

/* ── 5. ENGINEERING CHANGELOG VIEW (Exact Screenshot Recreation) ── */
.workspace-changelog-view {
  padding: 32px 48px 60px 48px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .workspace-changelog-view {
    padding: 20px 18px 40px 18px;
  }
}

.changelog-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.changelog-title-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.changelog-main-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.15;
}

.changelog-main-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.active-release-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1a73e8;
  color: #ffffff;
  padding: 6px 14px;
  border-radius: var(--radius-md, 6px);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(26, 115, 232, 0.3);
  text-decoration: none;
  white-space: nowrap;
}

.active-release-badge .badge-label {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.9;
}

.active-release-badge .badge-version {
  font-family: var(--font-body, 'DM Mono', monospace);
  font-weight: 700;
}

/* Timeline Group Header */
.changelog-timeline-section {
  margin-bottom: 38px;
}

.timeline-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.timeline-date-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.timeline-tag-pill {
  font-size: 11px;
  font-family: var(--font-body, 'DM Mono', monospace);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm, 4px);
  background: rgba(0, 136, 170, 0.12);
  color: var(--gold-base, #0088aa);
  border: 1px solid rgba(0, 136, 170, 0.25);
}

[data-theme="dark"] .timeline-tag-pill {
  background: rgba(0, 180, 216, 0.15);
  color: var(--gold-bright, #4dcce8);
  border-color: rgba(0, 180, 216, 0.3);
}

/* 2-Column Cards Grid */
.changelog-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 28px;
}

@media (max-width: 768px) {
  .changelog-cards-grid {
    grid-template-columns: 1fr;
  }
}

/* Single Changelog Card */
.changelog-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 4px 0;
  transition: transform var(--transition-fast, 150ms);
}

.card-icon-circle {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  color: var(--gold-base, #0088aa);
  margin-top: 2px;
}

.card-icon-circle svg {
  width: 18px;
  height: 18px;
}

/* Specific icon color variants */
.card-icon-circle.icon-cyan {
  background: rgba(0, 136, 170, 0.12);
  color: #0088aa;
  border-color: rgba(0, 136, 170, 0.2);
}

.card-icon-circle.icon-orange {
  background: rgba(230, 120, 23, 0.12);
  color: #d97706;
  border-color: rgba(230, 120, 23, 0.2);
}

.card-icon-circle.icon-blue {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.2);
}

.card-icon-circle.icon-purple {
  background: rgba(147, 51, 234, 0.12);
  color: #9333ea;
  border-color: rgba(147, 51, 234, 0.2);
}

[data-theme="dark"] .card-icon-circle.icon-cyan {
  background: rgba(0, 180, 216, 0.18);
  color: #38bdf8;
  border-color: rgba(0, 180, 216, 0.3);
}

[data-theme="dark"] .card-icon-circle.icon-orange {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .card-icon-circle.icon-blue {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.3);
}

[data-theme="dark"] .card-icon-circle.icon-purple {
  background: rgba(168, 85, 247, 0.18);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.3);
}

.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.card-product-tag {
  font-size: 11px;
  font-family: var(--font-body, 'DM Mono', monospace);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--surface-raised);
  padding: 2px 6px;
  border-radius: var(--radius-sm, 3px);
  border: 1px solid var(--border-subtle);
}

.card-type-badge {
  font-size: 10px;
  font-family: var(--font-body, 'DM Mono', monospace);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: var(--radius-sm, 3px);
}

.card-type-badge.type-feature {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.card-type-badge.type-improvement {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.card-type-badge.type-fix {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

[data-theme="dark"] .card-type-badge.type-feature {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

[data-theme="dark"] .card-type-badge.type-improvement {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

[data-theme="dark"] .card-type-badge.type-fix {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.card-desc {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-primary);
  margin: 0;
}

.card-desc strong {
  font-weight: 600;
}

/* ── 6. BOTTOM STATUS BAR ── */
.workspace-status-bar {
  height: 26px;
  min-height: 26px;
  background: var(--surface-base);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 11px;
  font-family: var(--font-body, 'DM Mono', monospace);
  color: var(--text-secondary);
  user-select: none;
  z-index: 25;
}

.status-bar-left,
.status-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  background: transparent;
  border: none;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm, 2px);
  transition: all var(--transition-fast, 150ms);
}

.status-item:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* Status Indicator Dots (Real-time Kernel & IPC Watcher) */
.status-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background-color: var(--text-tertiary, #64748b);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

.status-indicator-dot.is-green {
  background-color: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
}

.status-indicator-dot.is-amber {
  background-color: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.85);
  animation: pulse-ipc-amber 0.5s infinite alternate;
}

.status-indicator-dot.is-red {
  background-color: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
}

.status-indicator-dot.is-idle {
  background-color: var(--text-tertiary, #64748b);
  opacity: 0.7;
}

@keyframes pulse-ipc-amber {
  0% {
    transform: scale(0.85);
    opacity: 0.6;
  }

  100% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.workspace-legal-trigger {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.workspace-legal-trigger svg {
  color: var(--gold-base, #0088aa);
}

[data-theme="dark"] .workspace-legal-trigger svg {
  color: var(--gold-bright, #4dcce8);
}

.status-badge-active {
  color: var(--gold-base, #0088aa);
  font-weight: 500;
}

[data-theme="dark"] .status-badge-active {
  color: var(--gold-bright, #4dcce8);
}

.status-skin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gold-base, #0088aa);
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  padding: 1px 7px;
  border-radius: var(--radius-sm, 3px);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

[data-theme="dark"] .status-skin-toggle {
  color: var(--gold-bright, #4dcce8);
  border-color: var(--border-default);
}

.status-skin-toggle:hover {
  background: var(--surface-hover);
}

/* Top sys-bar skin toggle button */
.skin-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 6px);
  color: var(--text-secondary);
  font-size: 11px;
  font-family: var(--font-body, 'DM Mono', monospace);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms);
}

.skin-toggle-btn:hover {
  color: var(--text-primary);
  border-color: var(--gold-base, #00b4d8);
  background: var(--surface-hover);
}

.skin-toggle-btn svg {
  width: 14px;
  height: 14px;
  color: var(--gold-base, #0088aa);
}

[data-theme="dark"] .skin-toggle-btn svg {
  color: var(--gold-bright, #4dcce8);
}

/* ── WORKSPACE LEGAL MENU IN STATUS BAR ── */
.workspace-legal-container {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.workspace-legal-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  padding: 4px;
  min-width: 160px;
  display: none;
  z-index: 100;
}

.workspace-legal-menu.is-open {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.workspace-legal-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  font-size: 11.5px;
  font-family: var(--font-body, 'DM Mono', monospace);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: all var(--transition-fast, 150ms);
}

.workspace-legal-menu-item:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

/* ── AUTH GATE CARD (For Gated Apps & Settings) ── */
.workspace-auth-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  max-width: 440px;
  margin: 60px auto;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.workspace-auth-gate-card .gate-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-base, #0088aa);
  margin-bottom: 16px;
}

[data-theme="dark"] .workspace-auth-gate-card .gate-icon {
  color: var(--gold-bright, #4dcce8);
}

.workspace-auth-gate-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-primary);
}

.workspace-auth-gate-card p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 20px;
}

.workspace-auth-gate-card .gate-signin-btn {
  padding: 8px 20px;
  background: var(--gold-base, #0088aa);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 6px);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--transition-fast, 150ms);
}

.workspace-auth-gate-card .gate-signin-btn:hover {
  opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .workspace-editor-viewport.is-split {
    flex-direction: column !important;
  }

  .workspace-editor-viewport.is-split .workspace-pane {
    flex: 1 1 50% !important;
    max-width: 100% !important;
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid var(--border-default);
  }

  .workspace-editor-viewport.is-split .workspace-pane:first-child {
    border-top: none;
  }

  .workspace-split-resizer {
    display: none !important;
  }
}

@media (max-width: 600px) {
  :root {
    --ws-activity-bar-w: 44px;
  }

  .activity-item {
    width: 32px;
    height: 32px;
  }

  .workspace-side-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ws-activity-bar-w);
    z-index: 50;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
  }

  /* Collapsed, it is a zero-width strip: its shadow must not paint over the
     tab bar sitting beside it. */
  .workspace-side-panel.is-collapsed {
    box-shadow: none;
  }

  .skin-toggle-label {
    display: none;
  }

  /* In mobile view, hide everything in footer except legal */
  .workspace-status-bar .status-bar-left,
  .workspace-status-bar .status-skin-toggle {
    display: none !important;
  }

  .workspace-status-bar .status-bar-right {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ── MOBILE: the desktop OS shell owns this breakpoint ──
   shell/workspace.js forces data-skin="desktop" below 768px and the anti-FOUC
   script in index.html does the same before first paint. This rule is the
   belt-and-braces: if anything ever sets the workspace skin at phone width,
   it still must not render, and the skin toggle must not offer a skin the
   viewport will refuse. */
@media (max-width: 768px) {
  .os-workspace {
    display: none !important;
  }

  #sys-skin-toggle,
  #tray-skin-btn,
  .status-skin-toggle,
  [data-action="toggle-skin"] {
    display: none !important;
  }
}