/* The Sary-OS desk (owner, 2026-10-22; saryos-desk.js): the left rail, the tool windows over LiveLoop and
   the Flow panel. Create interface only; drawn in the interface's own glass (--sc-* in portal-create.css). */
:root.saryos-create-ui {
  --desk-glass: var(--sc-glass-fill, rgba(10, 10, 14, .62));
  --desk-blur: var(--sc-glass-blur, blur(18px) saturate(1.4));
  --desk-line: rgba(255, 255, 255, .12);
  --desk-ink: var(--sc-ink, #f5f5f5);
  --desk-dim: var(--sc-dim, #a3a3a3);
  --desk-accent: #7c5cff;
  --desk-accent-2: #22d3ee;
}

/* ---- inside a window's frame: no bar, no rail, the tool fills the frame ---- */
:root.saryos-desk-frame { --portal-bar-core: 0px !important; --portal-bar-h: 0px !important; }
:root.saryos-desk-frame :is(#portal-bar, #desk-rail, #desk-flow, #desk-layer, #cookie-consent-banner) { display: none !important; }
/* A tool's frame never shows the Create overview, even while the tool is still opening (owner, 2026-10-22). */
:root.saryos-desk-tool #sc-home { display: none !important; }

/* ---- the rail ---- */
#desk-rail {
  position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 100420;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; border-radius: 26px;
  background: var(--desk-glass); backdrop-filter: var(--desk-blur); -webkit-backdrop-filter: var(--desk-blur);
  border: 1px solid var(--desk-line); box-shadow: 0 20px 50px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
  font-family: var(--sc-font);
}
:root.sc-apps-open #desk-rail { opacity: 0; pointer-events: none; }
/* A tool fills the screen (owner, 2026-10-24: "tools to open up as full screen"): the rail would sit over its
   own controls, and the bar above has the same places, so it steps aside until the tool is closed. */
body.portal-tool-open:not(.liveloop-open) #desk-rail, body[data-portal-panel]:not([data-portal-panel="liveloop"]) #desk-rail { display: none !important; }
/* The rail is no longer mounted (owner, 2026-10-24: "remove this too ... the side bar in liveloop"). */
/* Moved and minimised (owner, 2026-10-24: "both need to be able to be minimised and moved"): the grip on top
   drags it, the chevron at the bottom folds it to the grip and the chevron. */
#desk-rail .desk-grip, #desk-flow .desk-flow-head, #desk-flow .desk-flow-pill { cursor: grab; touch-action: none; user-select: none; }
#desk-rail.is-moving, #desk-flow.is-moving, #desk-rail.is-moving .desk-grip, #desk-flow.is-moving .desk-flow-head { cursor: grabbing; }
#desk-rail .desk-grip { display: grid; place-items: center; height: 16px; margin: -4px 0 -2px; color: var(--desk-dim); font-size: 12px; }
#desk-rail .desk-grip:hover { color: var(--desk-ink); }
#desk-rail .desk-rail-min { width: 46px; height: 24px; border-radius: 12px; border: 0; cursor: pointer; display: grid; place-items: center; color: var(--desk-dim); background: transparent; font-size: 11px; }
#desk-rail .desk-rail-min:hover { color: var(--desk-ink); background: rgba(255, 255, 255, .08); }
#desk-rail.is-min .desk-rail-btn { display: none; }
#desk-rail.is-min .desk-rail-min i { transform: rotate(180deg); }
#desk-rail .desk-rail-btn {
  position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--desk-dim); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  font-size: 16px; transition: color .2s, background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
#desk-rail .desk-rail-btn:hover { color: var(--desk-ink); background: rgba(255, 255, 255, .1); transform: scale(1.06); }
#desk-rail .desk-rail-btn.is-on {
  color: #fff; border-color: rgba(167, 139, 250, .9);
  background: radial-gradient(circle at 50% 35%, rgba(124, 92, 255, .55), rgba(124, 92, 255, .18));
  box-shadow: 0 0 0 3px rgba(124, 92, 255, .18), 0 0 18px rgba(124, 92, 255, .55);
}
#desk-rail .desk-rail-btn.is-on::after { content: ''; position: absolute; right: -9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 8px #a78bfa; }
#desk-rail .desk-rail-btn span {
  position: absolute; left: calc(100% + 14px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap; pointer-events: none;
  padding: 5px 10px; border-radius: 9px; font: 600 12px/1 var(--sc-font); color: var(--desk-ink);
  background: rgba(12, 12, 16, .92); border: 1px solid var(--desk-line); opacity: 0; transition: opacity .15s, transform .15s;
}
#desk-rail .desk-rail-btn:hover span, #desk-rail .desk-rail-btn:focus-visible span { opacity: 1; transform: translate(0, -50%); }

/* The windows are gone (owner, 2026-10-24: "tools to open up as full screen, remove the smaller window
   version"); the Flow panel keeps their fade-in. */
@keyframes desk-win-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---- Flow ---- */
#desk-flow { display: none; position: fixed; right: 16px; top: calc(var(--portal-bar-h, 64px) + 150px); bottom: 190px; z-index: 19600; width: 320px; pointer-events: none; font-family: var(--sc-font); color: var(--desk-ink); }
:root.desk-liveloop #desk-flow { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
#desk-flow > * { pointer-events: auto; }
.desk-flow-panel {
  width: 100%; flex: 1 1 auto; min-height: 0; display: none; flex-direction: column; border-radius: 22px; overflow: hidden;
  background: var(--desk-glass); backdrop-filter: var(--desk-blur); -webkit-backdrop-filter: var(--desk-blur);
  border: 1px solid var(--desk-line); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
}
#desk-flow.is-open .desk-flow-panel { display: flex; animation: desk-win-in .22s var(--sc-ease, ease) both; }
.desk-flow-head { display: flex; align-items: center; gap: 9px; padding: 14px 12px 12px 16px; border-bottom: 1px solid var(--desk-line); }
.desk-flow-head > i { color: #a78bfa; }
.desk-flow-head b { font: 650 15px/1 var(--sc-font); margin-right: auto; }
.desk-flow-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--desk-line); background: rgba(255, 255, 255, .05); color: var(--desk-ink); cursor: pointer; display: grid; place-items: center; font-size: 12px; }
.desk-flow-btn:hover { background: rgba(124, 92, 255, .35); border-color: rgba(167, 139, 250, .7); }
.desk-flow-list { flex: 1; min-height: 0; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.desk-flow-empty { margin: 4px 4px 0; font-size: 13px; line-height: 1.5; color: var(--desk-dim); }
.desk-flow-start { align-self: flex-start; margin: 4px; padding: 9px 14px; border-radius: 999px; border: 0; cursor: pointer; color: #fff; font: 600 13px/1 var(--sc-font); background: linear-gradient(135deg, #7c5cff, #a855f7); box-shadow: 0 8px 22px rgba(124, 92, 255, .45); }
.desk-flow-job { position: relative; padding: 12px 12px 10px 22px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.desk-flow-job::before { content: ''; position: absolute; left: 10px; top: 18px; bottom: 14px; width: 2px; border-radius: 2px; background: linear-gradient(#7c5cff, #22d3ee); opacity: .7; }
.desk-flow-job > header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.desk-flow-job > header b { font-size: 13px; }
.desk-flow-job > header small { font-size: 11px; color: var(--desk-dim); }
.desk-flow-dot { position: absolute; left: 6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: #7c5cff; box-shadow: 0 0 10px #7c5cff; }
.desk-flow-job[data-status="running"] .desk-flow-dot { background: #22d3ee; box-shadow: 0 0 10px #22d3ee; animation: desk-pulse 1.4s ease-in-out infinite; }
@keyframes desk-pulse { 50% { transform: scale(1.35); opacity: .6; } }
.desk-flow-job ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.desk-flow-row { display: flex; gap: 10px; align-items: flex-start; }
.desk-flow-row > div { min-width: 0; flex: 1; }
.desk-flow-row p { margin: 0; font-size: 12.5px; line-height: 1.35; }
.desk-flow-row p small { color: var(--desk-dim); font-size: 11px; margin-left: 4px; }
.desk-flow-what { color: var(--desk-dim); margin-top: 2px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.desk-flow-view { margin-top: 5px; padding: 0; border: 0; background: none; cursor: pointer; color: #8b9cff; font: 600 12px/1.2 var(--sc-font); display: inline-flex; gap: 6px; align-items: center; }
.desk-flow-view:hover { color: #c4b5fd; }
.desk-flow-compiled { margin-top: 10px; }
.desk-av {
  --h: 265; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; position: relative;
  font: 700 10.5px/1 var(--sc-font); color: #fff; letter-spacing: .02em;
  background: radial-gradient(circle at 30% 25%, hsl(var(--h) 90% 72%), hsl(var(--h) 75% 42%) 70%);
  border: 2px solid rgba(10, 10, 14, .9); box-shadow: 0 0 0 1px hsla(var(--h), 90%, 70%, .5);
}
.desk-av::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #0a0a0e; background: #737373; }
.desk-av[data-status="running"]::after { background: #22d3ee; }
.desk-av[data-status="queued"]::after { background: #f5b84a; }
.desk-av[data-status="done"]::after { background: #22c55e; }
.desk-av[data-status="failed"]::after, .desk-av[data-status="cancelled"]::after { background: #ef4444; }
.desk-av-more { --h: 0; background: rgba(255, 255, 255, .14); }
.desk-av-more::after { display: none; }
.desk-flow-avs { display: inline-flex; }
.desk-flow-avs .desk-av { width: 26px; height: 26px; font-size: 9.5px; }
.desk-flow-avs .desk-av + .desk-av { margin-left: -8px; }
.desk-flow-pill {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  color: var(--desk-ink); font: 600 14px/1 var(--sc-font); background: var(--desk-glass); backdrop-filter: var(--desk-blur); -webkit-backdrop-filter: var(--desk-blur);
  border: 1px solid var(--desk-line); box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.desk-flow-pill > i:first-child { color: #a78bfa; }
.desk-flow-chev { font-size: 11px; color: var(--desk-dim); transition: transform .2s; }
#desk-flow:not(.is-open) .desk-flow-chev { transform: rotate(180deg); }
#desk-flow.is-open .desk-flow-pill .desk-flow-avs { display: none; }

/* A chosen wallpaper (portal.js, the scene layer; request 550) shows in the Create interface, which hides the
   wallpaper host, with the skin's aurora, dust and the Lines field resting behind it. Moved here from
   saryos-stage.css when the stage layout was taken off (request 555). */
:root:root:root:root:root:root.saryos-create-ui body.portal-layer-scene #live-wallpaper-container { display: block !important; }
:root:root.saryos-create-ui:has(> body.portal-layer-scene) :is(#lg-aurora, #lg-dust, #lg-rim, #lg-aurora-bar, #portal-field) { display: none !important; }