/*
 * CHANGE LOG
 * -----------------------------------------------------------------------------
 * SEQ                 | AUTHOR                      | DESCRIPTION
 * -----------------------------------------------------------------------------
 * 1 | maintainer@emeraldcoastsystemsgroup.com   | Rebalanced the cockpit header after removing the dead global search field during the header-audit pass
 * 2 | maintainer@emeraldcoastsystemsgroup.com   | Added cockpit workspace-focus layout rules so heavyweight header tools can temporarily take over the main stage
 * 3 | maintainer@emeraldcoastsystemsgroup.com   | Added a wider workspace-focus stage option so operators can choose between standard and expanded tool width
 * 4 | maintainer@emeraldcoastsystemsgroup.com   | Added draggable workspace-focus width handling so operators can fine-tune heavyweight tool width
 * 5 | maintainer@emeraldcoastsystemsgroup.com   | Disabled chat-panel width animation in workspace focus so heavy header tools open at full working width immediately
 * 6 | maintainer@emeraldcoastsystemsgroup.com   | Fixed haywire Main↔Chat drag-resize: kill the chat-panel width transition during drag (was chasing the cursor) and disable iframe pointer-events so the embedded app surface stops swallowing mousemove
 * 7 | maintainer@emeraldcoastsystemsgroup.com   | Zen (full-window focus) mode: body.zen-mode hides all cockpit chrome (header, ribbon, status bar, chat rail, per-surface title bar) so the active surface gets the whole window — the desktop analogue of the phone full-bleed rules below. Plus the floating semi-transparent exit button.
 * 8 | maintainer@emeraldcoastsystemsgroup.com   | :root[data-oshal-status-bar-hidden="true"] .status-bar {display:none} — the manifest-declared per-app hide of the status bar (ribbon.hideStatusBar, set on the root by app.js). Zen mode hides it for everyone in a session; this drops it permanently for one app.
 * 9 | maintainer@emeraldcoastsystemsgroup.com | Keep Home singular and group secondary actions in a theme-aware options disclosure.
 * 10 | maintainer@emeraldcoastsystemsgroup.com | Keep the sidebar utility disclosure opaque over application content.
 * 11 | maintainer@emeraldcoastsystemsgroup.com | Styled the status-bar durable-storage indicator (.status-persistence) for the degraded and unreadable states, matching the existing cost-indicator colours.
 * 12 | maintainer@emeraldcoastsystemsgroup.com   | Shell-lock doors: a header door (data-shell-door) with the hidden attribute is not displayed, whatever its own display rule — the Nexus and Simple entries carry an inline display:flex and .header-btn sets display, both of which beat the user-agent [hidden] rule, so a "hidden" door was still drawn.
 * 13 | maintainer@emeraldcoastsystemsgroup.com | Phones keep the application screen's bar as one slim row (name, icon-only Reload and Open tab) instead of hiding it: application links open in Today again (owner decision 2026-10-13) and a phone otherwise had no way to reload a screen or open it in its own tab.
 * 14 | maintainer@emeraldcoastsystemsgroup.com | The body is the visible height (100dvh after a 100vh fallback), and on a phone the application screen's bar (name, Concierge, Reload) is laid into the empty middle of the Today header by viewport-guard.js, with the logo mark hidden while an application is open, so the bars above an application are one row (Roger, trial.oswarm.ai, 2026-11-06, F3, F9 and F10).
 * 15 | maintainer@emeraldcoastsystemsgroup.com | The application's name reads in full in the phone's one header row (the trial check, 2026-11-06: the bar cut it to "PD…", "Sc…", "Vi…"): while an application bar is laid into the header, the Apps menu shows only its chevron (its name stays "Apps" for assistive technology), the bar's icon is not drawn (the codicon stylesheet's display beat the phone rule that meant to hide it), and the bar's Concierge button steps aside when the application's own bottom pane bar already offers Concierge (the shared editor sets data-ef-concierge-pane on this page).
 * 16 | maintainer@emeraldcoastsystemsgroup.com | The design standard (docs/ux/design-standard.md §2.1, §3.3; Roger, trial.oswarm.ai, 2026-11-06, F12: four stacked rows before content on a desktop). Desktop gets the phone's one bar: viewport-guard.js lays the application screen's bar (name, Concierge, Reload, Open tab) into the Today header's empty middle at every width (html[data-app-bar]), the body loses its top gutter so the application starts right under that one bar, and the brand text steps aside when it repeats the bar's name (html[data-app-bar-named]). The shell is crisp: the header is the one glass bar (--ds-bar, --ds-bar-filter, an opaque hairline, no gradient highlight line), header buttons change their fill on hover instead of growing, and the main content panel is opaque (D1) with no blur and no shadow.
 * 17 | maintainer@emeraldcoastsystemsgroup.com | One assistant entry (UX audit 2026-11-06, DS-33): the application bar's Concierge shows only while the framed shared editor owns its concierge (html[data-ef-concierge], where the orb steps aside); everywhere else the orb is the entry.
 * 18 | maintainer@emeraldcoastsystemsgroup.com | Full-screen Jarvis on mobile (<=640px): when Jarvis is the framed cockpit surface (html[data-jarvis-surface]), hide .header-bar and .tool-view-header so Jarvis owns the full phone viewport with its single conversation header and zero stacked hamburger menus.
 */

/* ===== Layout — Cockpit Shell ===== */

body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family);
  overflow: hidden;
}

/* ---------- Header Bar ---------- */
.header-bar {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 20px;
  /* The one glass bar (D1): crisp glass over the page, an opaque hairline, the bar elevation. */
  background: var(--ds-bar, var(--bg-secondary));
  backdrop-filter: var(--ds-bar-filter, blur(var(--glass-blur)));
  -webkit-backdrop-filter: var(--ds-bar-filter, blur(var(--glass-blur)));
  border-bottom: 1px solid var(--ds-hairline, var(--border-color));
  box-shadow: var(--ds-elev-bar, none);
  z-index: 100;
  gap: 16px;
  position: relative;
}

.header-left { display: flex; align-items: center; gap: 12px; flex: 1; }

.header-left .logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--accent-primary);
}

.logo-text {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.5px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: tracking-tight;
}

.header-right { display: flex; gap: 6px; align-items: center; margin-left: auto; }

.header-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.header-btn:hover {
  background: var(--ds-surface-3, var(--glass-bg-heavy));
  color: var(--text-primary);
}

.header-btn:active { background: var(--ds-surface-3, var(--glass-bg-heavy)); }

#cockpitHomeLink { text-decoration: none; }
#cockpitHomeLink:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 4px; border-radius: var(--radius-sm); }
.workspace-home-label { display: none; }
[data-navigation-layout="workspaces"] #cockpitHomeLink .logo-text:not(.workspace-home-label) { display: none; }
[data-navigation-layout="workspaces"] #cockpitHomeLink .workspace-home-label { display: block; }
.header-options { position: relative; }
.header-options[hidden] { display: none; }
[data-shell-door][hidden] { display: none !important; }
.header-options > summary { list-style: none; }
.header-options > summary::-webkit-details-marker { display: none; }
.header-options > .header-utilities {
  position: absolute; top: calc(100% + 8px); right: 0; width: min(260px, calc(100vw - 24px));
  max-height: calc(100dvh - 80px); overflow-y: auto; z-index: 110;
  padding: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  background: var(--bg-primary); color: var(--text-primary); box-shadow: var(--panel-shadow);
}
.header-utilities-label { padding: 8px 10px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
#cockpitHeaderUtilities .header-btn {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; height: auto; min-height: 40px; padding: 10px; font: inherit;
  font-size: 13px; text-align: left; white-space: normal; color: var(--text-primary);
}
#cockpitHeaderUtilities .header-btn svg { flex: 0 0 auto; }
#cockpitHeaderUtilities .header-btn:hover { transform: none; background: var(--bg-tertiary); }
#cockpitHeaderUtilities .header-btn:focus-visible, .header-options > summary:focus-visible {
  outline: 2px solid var(--accent-primary); outline-offset: -2px;
}
:root[data-oshal-assistant-hidden="true"] #cockpitHeaderUtilities #agentsBtn { display: none; }

.engineering-link { text-decoration: none; }

/* ---------- Tools Dropdown ---------- */
.tools-dropdown { position: relative; }

.tools-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: linear-gradient(145deg, rgba(30, 30, 45, 0.7) 0%, rgba(20, 20, 35, 0.85) 100%);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid var(--border-light);
  border-top: 1.5px solid var(--border-highlight);
  border-left: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  box-shadow: var(--depth-shadow), inset 0 0 20px rgba(255,255,255,0.05);
  padding: 8px;
  z-index: 200;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  pointer-events: none;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tools-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.tools-menu-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 6px 10px 4px;
}

.tools-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: all var(--transition-fast);
}

.tools-menu a:hover {
  background: var(--glass-bg-heavy);
  color: var(--text-primary);
}

.tools-menu a .tool-icon { font-size: 16px; width: 20px; text-align: center; }

.tools-menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 6px 0;
}

/* ---------- Main Body ---------- */
.cockpit-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: 0;
  padding: 12px;
  gap: 12px;
}

/* ---------- Main Content Area (center, switches based on ribbon) ---------- */
.main-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* A panel (D1): opaque, a 1px edge, no blur and no shadow. */
  background: var(--ds-surface, var(--bg-secondary));
  border: 1px solid var(--ds-edge, var(--border-color));
  border-radius: var(--radius-md);
  box-shadow: none;
  position: relative;
}

.cockpit-body.workspace-focus-mode {
  gap: 0;
}

.cockpit-body.workspace-focus-mode .main-content,
.cockpit-body.workspace-focus-mode .panel-resize-handle {
  display: none;
}

.cockpit-body.workspace-focus-mode .chat-panel {
  width: var(--workspace-focus-width, min(1120px, calc(100vw - 96px))) !important;
  min-width: 520px;
  max-width: none;
  flex: 0 0 auto;
  margin-left: auto;
  border-radius: 22px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  transition-property: opacity, margin;
}

.cockpit-body.workspace-focus-mode.workspace-focus-wide {
  --workspace-focus-width: calc(100vw - 40px);
}

.cockpit-body.workspace-focus-mode .chat-native-frame-shell {
  padding: 12px;
}

/* ---------- Status Bar ---------- */
/* Per-app hide (manifest ribbon.hideStatusBar → profile.hideStatusBar → app.js sets this root attr):
   apps that are not ticket/queue-shaped drop the operational status bar entirely, and the flex column
   reclaims its height for the app surface. */
:root[data-oshal-status-bar-hidden="true"] .status-bar { display: none; }
.status-bar {
  height: var(--status-bar-height);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  backdrop-filter: blur(var(--glass-blur-light));
  -webkit-backdrop-filter: blur(var(--glass-blur-light));
  border-top: 1px solid var(--border-color);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

.status-item { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
}
.status-item i {
  font-size: 14px;
}

/* Durable-storage indicator — silent unless a store advertised as durable is not. */
.status-persistence {
  cursor: help;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.status-persistence.status-error { color: #ef4444; }
.status-persistence.status-warning { color: #f59e0b; }

/* Cost indicator states */
.status-cost {
  cursor: help;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.status-cost.status-normal {
  color: var(--text-muted);
}

.status-cost.status-warning {
  color: #f59e0b;
  animation: pulse-warning 2s ease-in-out infinite;
}

.status-cost.status-error {
  color: #ef4444;
  animation: pulse-error 1.5s ease-in-out infinite;
}

@keyframes pulse-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes pulse-error {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-dot { width: 7px; height: 7px; border-radius: 50%; }

.status-dot.online {
  background: var(--status-success);
  box-shadow: 0 0 8px var(--status-success), 0 0 2px var(--status-success);
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 8px var(--status-success), 0 0 2px var(--status-success); }
  50% { box-shadow: 0 0 14px var(--status-success), 0 0 4px var(--status-success); }
}

/* ---------- Panel Shared ---------- */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
}

.panel-title {
  font-weight: 600;
  font-size: var(--font-size-sm);
  letter-spacing: -0.2px;
}

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

/* ---------- Resize Handles ---------- */
.panel-resize-handle {
  width: 6px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  z-index: 10;
  transition: background 0.2s;
}
.panel-resize-handle:hover,
.panel-resize-handle.dragging {
  background: var(--accent-primary);
  border-radius: 3px;
}
.panel-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 30px;
  background: transparent;
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.panel-resize-handle:hover::after,
.panel-resize-handle.dragging::after {
  opacity: 1;
  background: rgba(255,255,255,0.34);
}
body.resizing { cursor: col-resize !important; user-select: none !important; }
body.resizing * { cursor: col-resize !important; }
/* While dragging the Main↔Chat handle: (1) kill the chat-panel width transition
   so it tracks the cursor 1:1 instead of laggily chasing it, and (2) disable
   pointer-events on embedded iframes (e.g. the focused app surface) so the
   iframe doesn't swallow mousemove and break the drag mid-stroke. */
body.resizing .chat-panel { transition: none !important; }
body.resizing iframe { pointer-events: none !important; }

/* ERROR #7: GPU-accelerated panel resize */
.chat-panel, .work-board, .insights-panel {
  will-change: width;
}

/* The Agents button is mobile-only: on desktop the chat panel + its bot selector
   are always visible, so the shortcut is redundant. Shown inside the mobile block. */
#agentsBtn { display: none; }

/* ============================================================================
   MOBILE SHELL (<=640px) — the desktop 3-column layout (ribbon | main | chat)
   crushed the main content to ~4px on a phone because the side chat panel never
   yielded. On mobile we go single-pane: main content takes the full width, the
   chat panel becomes a slide-up full-screen sheet (see chat.css), the resize
   handle and bottom status bar are removed, and the header is compacted so the
   wordmark + tool icons stop wrapping. Pairs with the ribbon drawer in ribbon.css.
   ========================================================================== */
@media (max-width: 640px) {
  /* Slim header: it was 56px of mostly-empty chrome. Drop the wordmark to the
     diamond mark and cut the height so the app gets that vertical space back. */
  .header-bar { height: 46px; padding: 0 8px; gap: 6px; }
  .logo-text { display: none; }
  [data-navigation-layout="workspaces"] #cockpitHomeLink .workspace-home-label { display: none; }
  .header-left .logo svg { width: 22px; height: 22px; }
  .header-right { gap: 2px; }
  .header-btn { width: 36px; height: 36px; }
  /* Drop the desktop-only RAG ingestion (upload) tool that has no place on a
     phone header. Keep theme/apps/profile. */
  #ragBtn { display: none; }
  /* ...but DO show the Agents shortcut on mobile (opens the chat sheet + bot picker). */
  #agentsBtn { display: flex; }

  /* Full-bleed: kill the body padding/gap AND the main surface's card border +
     rounded corners. Those gutters and the framed card were the wasted left/
     right margin — on a phone the app surface should run edge-to-edge. */
  .cockpit-body { padding: 0; gap: 0; }
  .main-content {
    width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* No side-by-side resize handle on a phone. */
  .panel-resize-handle { display: none !important; }

  /* Reclaim vertical space: the placeholder status bar is desktop chrome. */
  .status-bar { display: none; }

  /* The per-surface bar is one slim row on a phone: the screen's name and its Reload and
     Open tab controls, icon only. Application links open here (owner decision 2026-10-13)
     and those controls were the operator shell's application bar; hiding the whole bar left
     a phone no way to reload a screen or open it in its own tab. */
  .tool-view-header { padding: 4px 10px !important; gap: 6px !important; font-size: 13px; }
  .tool-view-header > i { display: none; }
  .tool-view-action-label { display: none; }

  /* One header row: viewport-guard.js measures the header's empty middle and lays the application's bar into it. */
  html[data-phone-app-bar] .header-left .logo { display: none; }
  html[data-phone-app-bar] .main-content { backdrop-filter: none; -webkit-backdrop-filter: none; }
  html[data-phone-app-bar] .tool-view-header {
    position: fixed; top: 0; left: var(--phone-app-bar-left, 120px); right: var(--phone-app-bar-right, 120px); height: 46px;
    z-index: 101; padding: 0 !important; border: 0 !important; background: transparent; box-sizing: border-box;
  }
  html[data-phone-app-bar] .tool-view-header > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html[data-phone-app-bar] .tool-view-header [data-tool-view-open] { display: none !important; }
  html[data-phone-app-bar] .tool-view-action { flex: none; min-width: 40px; min-height: 40px; }
  /* Room for the application's name: the Apps menu keeps its chevron (aria-label "Apps"), and an editor whose bottom pane
     bar holds Concierge does not repeat it in the top row. */
  html[data-phone-app-bar] #workspaceNavigationMore > summary > span { display: none; }
  html[data-phone-app-bar] .tool-view-header > i { display: none !important; } /* the codicon stylesheet's display beat the rule above */
  html[data-phone-app-bar] #workspaceNavigationMore > summary { min-width: 40px; padding: 0 6px; }
  html[data-phone-app-bar][data-ef-concierge-pane] .tool-view-header [data-tool-view-concierge] { display: none !important; }

  /* Full-screen Jarvis on mobile: hide the outer cockpit header and tool-view bar so Jarvis's own
     conversation header (with ☰ Conversations → ▦ Applications) is the single bar on screen. */
  html[data-jarvis-surface] .header-bar,
  html[data-jarvis-surface] .tool-view-header {
    display: none !important;
  }
}

/* One assistant entry (DS-33): the bar's Concierge is the entry only for a framed editor that owns its concierge. */
html:not([data-ef-concierge]) .tool-view-header [data-tool-view-concierge] { display: none !important; }

/* ---------- One bar above an application on a desktop too (F12, docs/ux/design-standard.md §3.3) ---------- */
/* viewport-guard.js measures the header's empty middle at every width; on a desktop the application screen's bar
   (name, Concierge, Reload, Open tab) sits there instead of in a second row, and the application starts right under it. */
@media (min-width: 641px) {
  html[data-app-bar] .tool-view-header {
    position: fixed; top: var(--app-bar-top, 0px); height: var(--app-bar-height, var(--header-height));
    left: var(--app-bar-left, 240px); right: var(--app-bar-right, 240px); z-index: 101;
    padding: 0 !important; border: 0 !important; background: transparent; box-sizing: border-box;
  }
  html[data-app-bar] .tool-view-header > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
  html[data-app-bar] .tool-view-action { flex: none; min-height: 32px; }
  html[data-app-bar-named] .header-left .logo .logo-text { display: none; }
  html[data-app-bar] .cockpit-body { padding-top: 0; }
  html[data-app-bar] .main-content { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
}

/* ---------- Zen (full-window focus) mode ---------- */
/* The desktop analogue of the phone full-bleed rules above: every piece of cockpit
   chrome disappears and the active surface owns the window. Toggled from the header
   arrows-out button; the floating exit button (or Esc) restores the chrome. */
body.zen-mode .header-bar,
body.zen-mode .status-bar,
body.zen-mode #ribbonContainer,
body.zen-mode .ribbon-backdrop,
body.zen-mode .chat-panel,
body.zen-mode .panel-resize-handle,
body.zen-mode .tool-view-header {
  display: none !important;
}

body.zen-mode .cockpit-body { padding: 0; gap: 0; }

body.zen-mode .main-content {
  width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* The one control left on screen: quiet until hovered, always reachable. */
.zen-exit-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 5000;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.zen-exit-btn:hover,
.zen-exit-btn:focus-visible { opacity: 1; }

.zen-exit-btn.hidden { display: none; }