/* Page chrome for the Light workstation.
 *
 * light.css carries the workstation styles and covers everything from
 * .light-panel inward. This file supplies only what ui.html used to provide
 * from outside that region: the design tokens light.css reads, a window bar,
 * a stage for the panel to fill, and the toast/modal the shim layer renders. */

:root {
  /* light.css reads --ui directly (".light-shell { font:10px var(--ui) }"). */
  --ui: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --bg: #090d11;
  --text: #e6edf2;
  --dim: #8b98a3;
  --border: #27323b;
  --bar: #0e141a;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 13px var(--ui);
  -webkit-font-smoothing: antialiased;
}

/* The packaged desktop owns one true header and footer outside all three
   WebViews. Hide the center and sidecar copies so the chrome spans Agent
   Floor, trading, and X Watch as one uninterrupted workstation frame. */
body.native-workstation-frame > .platform-bar { display:none!important; }
body.native-workstation-frame .light-commandbar { display:none!important; }
body.native-workstation-frame .light-statusbar { display:none!important; }
/* The native shell paints the one account/status footer shared by every pane.
   Removing the web footer must also remove its reserved 22px grid row; leaving
   that row behind produced a second empty dark band above the native footer. */
body.native-workstation-frame .light-shell {
  grid-template-rows:minmax(0,1fr);
}
body.native-workstation-frame .light-shell.reauth-required {
  grid-template-rows:28px minmax(0,1fr);
}
/* WinUI uses the real web footer because it owns the live TradeStation account
   picker. The former native footer was hard-coded to one SIM account and could
   neither list LIVE accounts nor reflect brokerage state. */
body.native-workstation-frame.winui-workstation-frame .light-statusbar {
  display:grid!important;
}
body.native-workstation-frame.winui-workstation-frame .light-shell {
  grid-template-rows:minmax(0,1fr) 22px;
}
body.native-workstation-frame.winui-workstation-frame .light-shell.reauth-required {
  grid-template-rows:28px minmax(0,1fr) 22px;
}
body.native-workstation-frame.agent-floor-sidecar .light-agent-desk {
  height:100vh;
  max-height:100vh;
}

/* Hide the retired matrix/ticket desktop before the first paint. Boot removes
   these nodes, so they consume no ongoing layout, rendering, or update work. */
body.positions-only-workstation :is(.light-commandbar,.light-enginebar,.light-calibration-output,.light-health-view) { display:none!important; }
body.positions-only-workstation .light-grid { display:none!important; }
body.positions-only-workstation .light-shell { grid-template-rows:minmax(0,1fr) 22px!important; }
body.positions-only-workstation .light-shell.reauth-required { grid-template-rows:28px minmax(0,1fr) 22px!important; }
body.positions-only-workstation #lightFlowView {
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  flex-direction:column;
  border:0!important;
  transform:none!important;
}
body.positions-only-workstation #lightFlowView>.light-flow-window-bar,
body.positions-only-workstation #lightFlowView .light-flow-close,
body.positions-only-workstation #lightFlowView>.light-window-resize { display:none!important; }

/* ---------- window bar ---------- */

.platform-bar {
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  align-items: center;
  height: 38px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bar);
}

.platform-back {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 5px 10px 5px 7px;
  border-radius: 7px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.platform-back:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.platform-back svg { width: 14px; height: 14px; }

.platform-title {
  color: var(--dim);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.platform-spacer { flex: 1 1 auto; }

.platform-bar button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--dim);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.platform-bar button svg { width: 15px; height: 15px; }
.platform-bar .platform-settings-button[aria-expanded="true"] { background:#18342f; color:#5ce0bd; }
.platform-bar button:hover:not(:disabled) { background: rgba(255, 255, 255, .07); color: #fff; }
.platform-bar button:disabled { opacity: .35; cursor: default; }

.platform-bar .platform-sidebar-toggle {
  flex:0 0 28px;
  margin-right:-7px;
  color:#9aa8b1;
}
.platform-bar .platform-sidebar-toggle svg { width:17px; height:17px; }
.platform-bar .platform-sidebar-toggle[aria-pressed="true"] {
  background:#1a2831;
  color:#d8e6ee;
}
body:not(.agent-floor-sidecar) #lightAgentsButton { display:none; }
body.agent-floor-sidecar #lightAgentSidebarToggle { display:none; }

.platform-close-mark>span { position:relative; display:block; width:13px; height:13px; }
.platform-close-mark i {
  position:absolute; top:50%; left:0; width:100%; height:1.5px; margin-top:-.75px;
  background:currentColor; transition:transform .48s cubic-bezier(.18,.89,.24,1),width .48s cubic-bezier(.18,.89,.24,1),left .48s cubic-bezier(.18,.89,.24,1);
}
.platform-close-mark i:nth-child(1) { transform:rotate(45deg); }
.platform-close-mark i:nth-child(2) { left:50%; width:50%; transform:rotate(-45deg); transform-origin:left center; }
.platform-close-mark i:nth-child(3) { left:50%; width:calc(50% * var(--x-arm,0)); transform:rotate(135deg); transform-origin:left center; transition:none; }
.platform-close-mark:hover { color:#ff6b70!important; }

.platform-window-edges[hidden] { display:none; }
.platform-window-edges span { position:fixed; z-index:100; }
.platform-window-edges [data-platform-edge="n"] { top:0; left:10px; right:10px; height:5px; cursor:ns-resize; }
.platform-window-edges [data-platform-edge="s"] { bottom:0; left:10px; right:10px; height:5px; cursor:ns-resize; }
.platform-window-edges [data-platform-edge="w"] { left:0; top:10px; bottom:10px; width:5px; cursor:ew-resize; }
.platform-window-edges [data-platform-edge="e"] { right:0; top:10px; bottom:10px; width:5px; cursor:ew-resize; }
.platform-window-edges [data-platform-edge="nw"] { top:0; left:0; width:10px; height:10px; cursor:nwse-resize; }
.platform-window-edges [data-platform-edge="ne"] { top:0; right:0; width:10px; height:10px; cursor:nesw-resize; }
.platform-window-edges [data-platform-edge="sw"] { bottom:0; left:0; width:10px; height:10px; cursor:nesw-resize; }
.platform-window-edges [data-platform-edge="se"] { bottom:0; right:0; width:10px; height:10px; cursor:nwse-resize; }

.platform-bar .platform-text-button {
  display: inline-grid;
  width: auto;
  min-width: 42px;
  padding: 0 8px;
  border: 1px solid #2c3942;
  border-radius: 4px;
  background: #151d22;
  color: #9fadb6;
  font: 750 8px/1 var(--ui);
  letter-spacing: .04em;
}

.platform-bar .platform-text-button.social[aria-pressed="true"] {
  border-color: #2f8d74;
  background: #18342f;
  color: #5ce0bd;
}

.platform-bar .platform-text-button.agents[aria-pressed="true"] {
  border-color: #61798a;
  background: #1a2831;
  color: #d8e6ee;
}

.platform-social-state {
  min-width: 68px;
  color: #6f7d86;
  font: 700 7px/1 var(--ui);
  letter-spacing: .04em;
  text-align: right;
  text-transform: uppercase;
}

/* Inside the corner panel the arrow means "collapse", not "go back" — turned
   up, toward the corner the panel folds back into. */
body.embedded .platform-back svg { transform: rotate(90deg); }

/* The panel's X sits over this bar's right end, so keep the bar's own controls
   clear of it rather than letting them stack. The bar is also the shell
   window's drag handle while the panel is open. */
body.embedded .platform-bar { padding-right: 50px; cursor: move; user-select: none; }
body.embedded .platform-bar :where(button, a) { cursor: pointer; }
body.embedded .platform-window-control,
body.agent-floor-sidecar .platform-window-control,
body.embedded .platform-close-mark,
body.agent-floor-sidecar .platform-close-mark { display:none!important; }

.platform-bar .platform-window-control {
  border-radius: 3px;
  color: #a9b6be;
}

/* Dedicated desktop Agent Floor pane. The shell positions this whole page to
   the left of Light; only the office window is rendered inside it. */
body.agent-floor-sidecar .platform-bar {
  height: 34px;
  gap: 8px;
  padding: 0 9px;
  background: #10191f;
}
body.agent-floor-sidecar .platform-back {
  pointer-events: none;
  padding-left: 3px;
  color: #dfe9ed;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.agent-floor-sidecar .platform-back svg,
body.agent-floor-sidecar :is(#lightSocialState,#lightSocialRead,#lightSocialToggle,#lightSimResetTop) { display: none!important; }
body.agent-floor-sidecar .platform-title { font-size: 8px; }
body.agent-floor-sidecar #lightAgentsButton { display:inline-grid; border-color: #8b3940; color: #ff858a; }
body.agent-floor-sidecar .light-shell { min-height: 0; grid-template-rows:minmax(0,1fr); }
body.agent-floor-sidecar .light-agent-desk { height:calc(100vh - 34px); max-height:calc(100vh - 34px); }
body.agent-floor-sidecar :is(.light-commandbar,.light-reauth-alert,.light-ts-settings,.light-enginebar,.light-calibration-output,.light-statusbar) { display:none!important; }
body.agent-floor-sidecar .light-grid { inset:0; width:100%; height:100%; padding:0!important; }
body.agent-floor-sidecar .light-window[data-light-window] { display:none!important; }
body.agent-floor-sidecar .light-window[data-light-window="agents"] {
  display:block!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border:0;
  z-index:1!important;
}
body.agent-floor-sidecar .light-window[data-light-window="agents"]>.light-window-bar { display:none; }
body.agent-floor-sidecar .light-window[data-light-window="agents"]>.light-window-resize { display:none; }
body.agent-floor-sidecar .light-agent-floor { grid-template-rows:24px 220px 7px minmax(112px,1fr); }
body.agent-floor-sidecar .light-agent-main { grid-template-columns:minmax(0,1fr) minmax(142px,24%); }
/* The desktop Agent Floor uses the approved mockup-derived art as one true
   wide room. Live ghosts remain DOM controls layered over the furniture. */
body.agent-floor-sidecar .light-mini-office { background:#1b130e; }
body.agent-floor-sidecar .light-office-room {
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  transform:none;
  border:0;
  border-radius:0;
  background:#24170f url("./agent-floor-office-v1.png") center/100% 100% no-repeat;
  box-shadow:none;
}
body.agent-floor-sidecar .light-office-room>:not(.light-office-agent) { display:none!important; }
body.agent-floor-sidecar .light-office-room:before {
  content:"DATA HUB";
  position:absolute;
  z-index:3;
  left:58%;
  top:43%;
  padding:3px 6px;
  border:1px solid rgba(106,234,198,.55);
  border-radius:3px;
  background:rgba(7,18,22,.82);
  color:#8ff0d5;
  font-size:7px;
  letter-spacing:.08em;
  transform:translate(-50%,-50%);
}
body.agent-floor-sidecar .light-office-room:after {
  content:"";
  position:absolute;
  z-index:2;
  left:58%;
  top:43%;
  width:12px;
  height:12px;
  border:1px solid #6ee7c4;
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:light-data-hub 1.8s ease-out infinite;
}
body.agent-floor-sidecar .light-office-agent { width:46px; height:48px; filter:drop-shadow(0 2px 3px #000) drop-shadow(0 0 8px color-mix(in srgb,var(--agent-color) 72%,transparent)); }
body.agent-floor-sidecar .light-ghost { left:9px; top:10px; width:28px; height:28px; border-width:2.5px; border-radius:16px 16px 6px 6px; background:color-mix(in srgb,var(--agent-color) 42%,#071116); box-shadow:inset 0 0 8px color-mix(in srgb,var(--agent-color) 38%,transparent); }
body.agent-floor-sidecar .light-ghost-eye { top:9px; width:3px; height:5px; background:#efffff; box-shadow:0 0 3px currentColor; }
body.agent-floor-sidecar .light-ghost-eye.left { left:6px; }
body.agent-floor-sidecar .light-ghost-eye.right { right:6px; }
body.agent-floor-sidecar .light-ghost-tail { bottom:-6px; width:9px; height:9px; border-bottom-width:2.5px; }
body.agent-floor-sidecar .light-ghost-tail.two { left:9px; }
body.agent-floor-sidecar .light-agent-label { bottom:45px; min-width:112px; padding:3px 5px; border-radius:3px; background:rgba(5,14,18,.78); text-shadow:0 1px 2px #000; }
body.agent-floor-sidecar .light-agent-label b { font-size:8px; }
body.agent-floor-sidecar .light-agent-label small { font-size:7px; }
body.agent-floor-sidecar .light-agent-data { bottom:54px; min-width:160px; max-width:220px; padding:7px 9px; }
body.agent-floor-sidecar .light-agent-data>b { padding-left:25px; font-size:7px; }
body.agent-floor-sidecar .light-agent-data>small { margin-top:4px; font-size:7px; line-height:1.3; white-space:normal; }
body.agent-floor-sidecar .light-office-table>strong { font-size:7px; }
body.agent-floor-sidecar .light-agent-ticker { gap:16px; padding-inline:12px; font-size:8px; }
body.agent-floor-sidecar .light-agent-roster h3,
body.agent-floor-sidecar .light-agent-feed h3 { font-size:9px; }
body.agent-floor-sidecar .light-agent-roster button b,
body.agent-floor-sidecar .light-agent-roster button span,
body.agent-floor-sidecar .light-agent-feed p { font-size:7px; }
body.agent-floor-sidecar .light-agent-inspector>header { height:28px; padding-inline:10px; }
body.agent-floor-sidecar .light-agent-inspector>header b { font-size:10px; }
body.agent-floor-sidecar .light-agent-inspector>header span { font-size:8px; }
body.agent-floor-sidecar .light-agent-inspector-grid { grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) minmax(0,1fr); height:calc(100% - 29px); min-height:0; }
body.agent-floor-sidecar .light-agent-inspector-grid>div { gap:8px; padding:11px; }
body.agent-floor-sidecar .light-agent-inspector-grid small { font-size:8px; }
body.agent-floor-sidecar .light-agent-screen>div { padding:6px 8px; }
body.agent-floor-sidecar .light-agent-screen>div b { font-size:8px; }
body.agent-floor-sidecar .light-agent-screen p { padding:7px 8px; font-size:8px; }
body.agent-floor-sidecar .light-agent-screen p small { font-size:7px; }
body.agent-floor-sidecar .light-agent-doing>b,
body.agent-floor-sidecar .light-agent-last>b { font-size:9px; line-height:1.4; }
body.agent-floor-sidecar .light-agent-doing>span,
body.agent-floor-sidecar .light-agent-last>span { font-size:8px; }
body.agent-floor-sidecar .light-agent-progress { height:7px; }
body.agent-floor-sidecar .light-agent-findings>b { font-size:17px; }
body.agent-floor-sidecar .light-agent-findings>span { font-size:8px; line-height:1.35; white-space:normal; }
body.agent-floor-sidecar .light-agent-last button { min-height:30px; font-size:8px; }
@media (max-height:720px) {
  body.agent-floor-sidecar .light-agent-floor { grid-template-rows:24px 190px 7px minmax(104px,1fr); }
  body.agent-floor-sidecar .light-agent-inspector-grid>div { gap:5px; padding:8px 10px; }
}

/* ---------- stage ---------- */

/* .light-panel is width:100%/height:100% of whatever holds it, so the stage
   has to be a real sized box rather than an auto-height block. */
.platform-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* ---------- toast ---------- */

.light-toast {
  position: fixed;
  bottom: 46px;
  left: 50%;
  z-index: 300;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 15px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #172029;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .2s ease, transform .2s ease;
}

.light-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- modal ---------- */

.light-modal-back {
  position: fixed;
  inset: 0;
  /* Layout windows get dynamic z-indexes as they are focused. Confirmations
     must stay above every one of them or the switch waits behind the panels. */
  z-index: 2147483100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 6, 9, .68);
  backdrop-filter: blur(3px);
  animation: light-modal-in .16s ease both;
}

.light-modal {
  width: min(440px, 100%);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #121a21;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .6);
}

.light-modal h2 { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.light-modal p { margin: 0 0 16px; color: var(--dim); font-size: 12.5px; line-height: 1.55; }

.light-modal-input {
  width: 100%;
  margin-bottom: 16px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #0a1015;
  color: var(--text);
  font: 13px var(--ui);
}

.light-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

.light-modal-actions button {
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #1b242c;
  color: var(--text);
  font: 600 12px var(--ui);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.light-modal-actions button:hover { background: #263139; }
.light-modal-actions button.primary { border-color: #1d7a4a; background: #14713f; color: #fff; }
.light-modal-actions button.primary:hover { background: #178a4c; }
.light-modal-actions button.danger { border-color: #8c2b25; background: #8c2b25; color: #fff; }
.light-modal-actions button.danger:hover { background: #a3332c; }

@keyframes light-modal-in { from { opacity: 0; } to { opacity: 1; } }

:where(button, a, input, select, [tabindex]):focus-visible {
  outline: 2px solid #4aa3ff;
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}