/* ══════════════════════════════════════════════════════════════
   orbit-station.css — faithful mirror of the real Orbit Station UI
   (orbit-station repo: Astro SSR + Svelte 5 + GSAP ScrollSmoother,
    frame-based immersive site). Reproduces the real structure:
    full-viewport scroll frames · mix-blend exclusion floats ·
    ORBIT wordmark intro · Embla gallery (blurred bg + selected card
    + peeking right rail) · footer · bottom-right radial MenuBar ·
    full-screen MenuOverlay workspace (cloud/tasks/benutzer/finance/
    leads/IDE + chat sidebar).
   ══════════════════════════════════════════════════════════════ */

:root { --st-pad: 96px; }

html, body { margin: 0; background: var(--inv-100); color: var(--100); }
/* light theme (DarstellungModal): flip body + invert the dark WebGL scene so text stays legible */
body.theme-light #orbit-scene-canvas { filter: invert(1) grayscale(.92) brightness(1.05) contrast(.95) saturate(.55); }
body { font-family: var(--f-sans); overflow-x: hidden; }

/* ── scroll spine: full-viewport snapped frames ── */
.st-scroll {
  height: 100dvh; overflow-y: auto; overflow-x: hidden;
  position: relative; z-index: 1; scrollbar-width: none;
}
.st-scroll::-webkit-scrollbar { display: none; }
.st-frame {
  position: relative; width: 100%; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* ── OrbitScene WebGL backdrop (real copied three.js modules) ── */
.orbit-bg-wrap { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: filter .6s ease; }
.st-stars { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: #000; }
/* Envoy onboarding hero — invert the scene to a luminous paper-white
   surface via a filter on the WRAPPER (the canvas's hardware layer
   ignores filter, but the wrapper's filter composites onto the final
   framebuffer — verbatim from Framework.svelte .orbit-bg.hero-inverted). */
body.envoy-active #orbit-scene-canvas {
  filter: invert(1) grayscale(0.92) sepia(0.06) brightness(1.06) contrast(0.92) saturate(0.5);
}

/* ── Float parallax ─ transforms are driven by station-float.js
   (real motion-store pointer parallax + sin/cos sway), NOT a CSS
   keyframe. The class is only a styling/lookup hook. ── */
[data-float] { will-change: transform; }

/* ── Intro: floating ORBIT wordmark (frames/Intro.svelte) ── */
.st-intro-logo {
  display: flex; gap: 144px; align-items: center; justify-content: space-between;
  width: 100%; height: max-content; z-index: 13; --letter-h: clamp(64px, 11vw, 120px);
  opacity: 0; mix-blend-mode: exclusion;
  animation: st-intro-appear 3s ease forwards;
}
.st-intro-logo > div { display: flex; }
.st-intro-logo svg { height: calc(var(--letter-h) * var(--letter-ratio, 1)); width: auto; }
@keyframes st-intro-appear { 0% { opacity: 0; width: 100%; } 100% { opacity: 1; width: min(874px, 90vw); } }
.st-scroll-hint { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; mix-blend-mode: exclusion; }
.st-scroll-arrow { display: block; width: 24px; height: 24px; color: var(--60); animation: st-scroll-bob 1.6s var(--ease-out) infinite; }
@keyframes st-scroll-bob { 0%,100% { transform: rotate(90deg) translateX(-4px); opacity: .45; } 50% { transform: rotate(90deg) translateX(6px); opacity: 1; } }

/* ── Gallery (faithful to galleries/GalleryPublic.svelte) ──
   blurred bg of selected media + big centred selected card +
   peeking 180px thumbnail rail on the right. mix-blend exclusion
   on the cards over a black ::before, exactly as the source. ── */
.gallery-section { position: relative; width: 100%; height: 100dvh; display: flex; align-items: center; justify-content: center; }
/* let the blurred backdrop glow bleed beyond the frame (override the global .st-frame overflow:hidden) */
#frame-gallery { overflow: visible; }
#frame-gallery .gallery-section { overflow: visible; }
/* Embla carousel (GalleryPublic: main loop + dragFree peeking thumb rail) */
.gallery-section, .gallery-section * { -webkit-user-select: none; user-select: none; }
.gallery-section img, .gallery-section video { -webkit-user-drag: none; -webkit-touch-callout: none; }
.gallery-holder .embla.main-embla { width: 100%; height: 100%; overflow: hidden; z-index: 10; }
.embla__container.main-container { display: flex; height: 100%; touch-action: pan-y pinch-zoom; }
.embla__slide.main-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%;
  display: flex; align-items: center; justify-content: center; }
.next-gallery-entry .embla.thumb-embla { width: 100%; height: 100%; overflow: visible; z-index: 12; pointer-events: none; }
.embla__container.thumb-container { display: flex; height: 100%; align-items: center; gap: 36px;
  padding-left: 84vw; pointer-events: none; }
.embla__slide.thumb-slide { flex: 0 0 180px; height: 100%; pointer-events: auto; cursor: pointer; }
.gallery-background-blur { position: absolute; top: -1%; left: 0; width: 100%; height: 101%; z-index: 0; }
.gallery-background-blur .gmedia { width: 100%; height: 100%; object-fit: cover; filter: blur(80px) brightness(.3); transform: scale(1.01); pointer-events: none; }
.gallery-holder { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; z-index: 10; }
.gallery-entry.selected {
  position: relative; width: calc(100% - 200px); height: calc(100% - 200px);
  margin: 0 auto; border-radius: 16px; overflow: hidden; background: var(--inv-100);
  transition: transform .1s ease;
}
.gallery-entry.selected::before { content: ""; position: absolute; inset: 0; background: var(--inv-100); z-index: -1; pointer-events: none; }
.gallery-entry.selected .gmedia { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gallery-entry.selected .overlay { position: absolute; inset: 0; z-index: 2; background: var(--inv-40); }
.overlay-subcontainer { position: absolute; top: 50%; left: 0; height: 30%; transform: translateY(-50%); display: flex; align-items: center; padding-left: 24px; z-index: 11; cursor: pointer; }
.gallery-title-text { margin: 0; font-weight: 180; font-size: clamp(28px, 3.4vw, 48px); letter-spacing: -1px; color: var(--40); transition: color .25s ease; white-space: nowrap; }
.overlay-subcontainer:hover .gallery-title-text { color: var(--100); }
.featured-text { position: absolute; left: 0; bottom: 0; width: calc(100% - 48px); padding: 24px; z-index: 3; }
.gallery-author { margin: 0; color: var(--40); font-weight: 200; font-size: 13px; white-space: nowrap; }
/* peeking rail on the right */
.next-gallery-entry { position: absolute; right: 0; top: 50%; height: 40%; min-height: 480px; transform: translateY(-50%); display: flex; z-index: 12; width: 100vw; pointer-events: none; overflow: visible; }
.thumb-container { display: flex; gap: 36px; padding-left: 84vw; height: 100%; align-items: center; }
.gallery-entry.next-image-gallery-entry {
  position: relative; flex: 0 0 auto; width: 180px; height: 100%;
  border-radius: 18px; overflow: hidden; background: var(--inv-100);
  pointer-events: auto; cursor: pointer; transition: transform .12s ease;
}
.gallery-entry.next-image-gallery-entry::before { content: ""; position: absolute; inset: 0; background: var(--inv-100); z-index: -1; }
.gallery-entry.next-image-gallery-entry .gmedia { width: 100%; height: 100%; object-fit: cover; }
.gallery-entry.next-image-gallery-entry .gallery-overlay { position: absolute; inset: 0; background: var(--inv-40); transition: opacity .2s ease; }
.gallery-entry.next-image-gallery-entry:hover { transform: scale(1.01); }
.gallery-entry.next-image-gallery-entry:hover .gallery-overlay { opacity: 0; }

/* ── frame eyebrow + generic frame heading ── */
.st-frame-inner { width: calc(100% - var(--st-pad)*2); max-width: 1200px; z-index: 10; }
.st-eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--40); }
.st-h1 { font-weight: 180; font-size: clamp(40px, 6vw, 84px); letter-spacing: -2px; line-height: 1.02; margin: 16px 0 0; }
.st-lede { color: var(--60); max-width: 620px; margin: 22px 0 0; line-height: 1.7; }

/* ── Project frame ── */
.st-proj { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.st-proj-media { aspect-ratio: 4/3; border-radius: 16px; overflow: hidden; }
.st-proj-list { margin-top: 24px; display: flex; flex-direction: column; gap: 2px; }
.st-proj-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--10); color: var(--80); font-size: 14px; }
.st-proj-row [data-orbit] { width: 16px; height: 16px; color: var(--40); }
.st-proj-row .tag { font-family: var(--f-mono); font-size: 10px; color: var(--40); text-transform: uppercase; letter-spacing: 1px; }

/* ── Timeline frame ── */
.st-tl { display: flex; flex-direction: column; gap: 0; margin-top: 28px; border-left: 1px solid var(--10); padding-left: 28px; }
.st-tl-row { position: relative; padding: 16px 0; }
.st-tl-row::before { content: ""; position: absolute; left: -34px; top: 22px; width: 9px; height: 9px; border-radius: 999px; background: var(--100); }
.st-tl-row .yr { font-family: var(--f-mono); font-size: 11px; color: var(--100); letter-spacing: 1px; }
.st-tl-row .ti { color: var(--100); font-size: 17px; font-weight: 300; margin-top: 4px; }
.st-tl-row .ds { color: var(--40); font-size: 13px; margin-top: 4px; max-width: 560px; }

/* ── Timeline frame — scroll-pinned (frames/Timeline.svelte) ── */
.timeline-frame { position: relative; height: 320vh; width: calc(100vw + 10px); margin-left: -10px; z-index: 5; }
.timeline-sticky { position: sticky; top: 0; height: 100dvh; width: 100%; overflow: hidden; }
.timeline-intro { display: flex; height: 100dvh; align-items: center; }
.timeline-intro p { min-width: 380px; max-width: 580px; margin-left: 58px; transform: translateY(-48px); font-weight: 180; font-size: clamp(14px, 3vw, 16px); letter-spacing: 0.16px; line-height: 1.4; }
.timeline-intro .bold { font-weight: 480; }
.timeline-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
#timeline-path { filter: drop-shadow(0 0 4px white); }
.dot { fill: var(--100); opacity: 0; transform-origin: center; transform: scale(0); filter: drop-shadow(0 0 4px var(--100)); }
.timeline-text { position: absolute; width: 100%; max-width: 570px; text-align: left; opacity: 0; }
.timeline-text h3 { font-weight: 180; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.32; letter-spacing: -0.5px; margin: 0; }
.text-1 { left: 10%; top: 49%; }
.text-2 { left: 50%; margin-left: -285px; top: 32%; }
.text-3 { right: 10%; top: 25%; }
.timeline-highlight { background: var(--100); color: var(--inv-100); border-radius: 6px; padding: 0 8px; display: inline-block; text-shadow: none; box-shadow: 0 4px 4px rgba(0,0,0,.25); }

/* ── ProductGallery — stacking rounded cards (galleries/ProductGallery.svelte) ── */
.product-gallery-container { position: relative; width: 100%; z-index: 14; display: flex; flex-direction: column; align-items: center; padding: 12vh 0 24vh; gap: 10vh; }
.pg-layer { position: sticky; top: 14vh; width: 90%; max-width: 1400px; height: 70vh; min-height: 600px;
  border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: var(--inv-100); will-change: transform; }
.pg-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pg-bg-veil { position: absolute; inset: 0; background: linear-gradient(180deg, var(--inv-60) 0%, var(--inv-20) 38%, var(--inv-80) 100%); }
.pg-content-editor { position: relative; z-index: 2; padding: 48px; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pg-title { font-weight: 180; font-size: clamp(40px, 5vw, 76px); letter-spacing: -2px; line-height: 1; margin: 0; }
.pg-content-editor > .pg-float { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; }
.pg-sub { color: var(--80); font-weight: 200; font-size: 20px; line-height: 1.55; margin: 18px 0 30px; max-width: 560px; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }
.pg-actions .cornerstone { font-size: 16px; padding: 13px 34px; text-decoration: none; }
.pg-subscribe { width: min(380px, 80vw); }
.pg-subscribe .st-input { height: 56px; background: var(--2); }
.pg-subscribe.done { color: var(--100); font-weight: 200; font-size: 17px; padding: 16px 4px; }
.pg-actions .cornerstone.ghost { background: transparent; color: var(--100); box-shadow: inset 0 0 0 1px var(--20); }
.contact-section { position: relative; overflow: hidden; height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 24px; align-items: center; }
.contact-path-svg { position: absolute; top: 200px; left: -200px; width: calc(100% + 400px); height: 100%; pointer-events: none; z-index: 1; }
.client-slider { position: absolute; top: 0; left: 0; width: calc(100% + 400px); margin-left: -200px; height: 100%; z-index: 2; pointer-events: none; }
.client-item { position: absolute; left: 0; top: 0; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; will-change: transform; z-index: 2; mix-blend-mode: exclusion; transition: filter .3s ease; }
.client-item img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); }
.contact-text-button { background: none; border: none; padding: 0; margin: 0; cursor: pointer; width: 100%; z-index: 3; }
.contact-text { color: var(--80); text-align: center; transform: translateY(-150%); transition: color .2s ease; font-weight: 700; font-size: clamp(40px, 6vw, 84px); letter-spacing: -2px; margin: 0; }
.contact-text:hover { color: var(--100); }
.contact-text .span-click { opacity: .8; transition: opacity .2s ease; }
.contact-text:hover .span-click { opacity: 1; text-decoration: underline; }
@media only screen and (max-width: 767px) { .contact-text { transform: translateY(-72px); } .contact-section { padding: 0 36px; } .client-item { width: 120px; height: 120px; } }

/* ── Envoy recruitment sector — separated from Contact (DS brand-envoy) ── */
.envoy-recruit { position: relative; height: 100dvh; display: flex; align-items: center; padding: 0 clamp(40px, 8vw, 160px); }
.envoy-recruit-inner { max-width: 900px; position: relative; z-index: 2; }
.program-line { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 32px; font-family: var(--f-mono); font-size: 11px; color: var(--80); text-transform: uppercase; letter-spacing: 0.6px; }
.program-line .rule { display: inline-block; width: 48px; height: 1px; background: var(--40); }
.envoy-recruit h1 { font-weight: 180; font-size: clamp(64px, 13vw, 200px); line-height: 0.9; letter-spacing: -4px; margin: 0; color: var(--100); text-shadow: var(--ts-h1); }
.envoy-recruit h1 em { font-style: italic; font-weight: 180; }
.envoy-recruit .lede { margin: 36px 0 0; max-width: 520px; color: var(--80); font-weight: 180; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; text-shadow: var(--ts-p); }
.envoy-recruit .cta-row { margin-top: 44px; }

/* ── Contact claim — clients sector (DS brand-contact): six brands, one workshop ── */
.contact-section .claim { position: relative; z-index: 3; max-width: min(640px, 80%); margin: 0 auto; text-align: center; mix-blend-mode: exclusion; color: var(--100); pointer-events: none; }
.contact-section .claim h2 { font-weight: 180; font-size: clamp(28px, 4vw, 48px); line-height: 1.04; letter-spacing: -1px; margin: 0; color: var(--100); text-shadow: var(--ts-h2); }
.contact-section .claim h2 em { font-style: italic; font-weight: 180; }
.contact-section .claim p { margin: 18px 0 0; color: var(--80); font-size: clamp(14px, 1.3vw, 17px); line-height: 1.5; text-shadow: var(--ts-p); }

/* ── Footer frame ── */
.st-footer { flex-direction: column; justify-content: space-between; align-items: stretch;
  padding: 200px var(--st-pad) 32px; }
.st-footer .top { display: flex; gap: 48px; }
.st-footer .top a { color: var(--80); text-decoration: none; font-weight: 200; font-size: clamp(26px, 4vw, 56px); letter-spacing: -1px; }
.st-footer .top a:hover { color: var(--100); }
.st-footer .ci { padding: 48px 0; } .st-footer .ci svg { width: 100%; height: auto; color: var(--100); }
.st-footer .bottom { display: flex; align-items: center; gap: 28px; }
.st-footer .bottom p { margin: 0; color: var(--100); }
.st-footer .bottom .lg { display: flex; gap: 18px; }
.st-footer .bottom .lg button { background: none; border: 0; color: var(--60); font: inherit; cursor: pointer; padding: 0; }
.st-footer .bottom .lg button:hover { color: var(--100); }

/* ══ bottom-right MenuBar (fragments/menus/MenuBar.svelte) ══ */
.st-menubar { position: fixed; right: 24px; bottom: 24px; z-index: 1001; mix-blend-mode: exclusion; }
.st-mb-arc { position: absolute; right: 0; bottom: 0; width: 48px; height: 48px; }
.st-mb-chat { width: 48px; height: 48px; border: 0; background: transparent; color: var(--100);
  display: grid; place-items: center; cursor: pointer; transition: opacity .2s; }
.st-mb-chat:hover { opacity: .7; }
.st-mb-chat [data-orbit] { width: 24px; height: 24px; }
body.logged-in .st-mb-chat { display: none; }
body:not(.logged-in) .st-mb-avatar { display: none; }
/* canon popovers (Astra dock · chat panel · avatar/tenant menus) must ride
   ABOVE Station's surfaces — orbit-shell.css ships them at z-index 35, which
   renders them behind the Station chrome (overlay is z-index 1300). */
.orb-menu, .orb-astra-panel, .orb-chat-panel { z-index: 100001 !important; }
.orb-drawer-backdrop, .orb-modal-backdrop { z-index: 100000 !important; }
.orb-drawer, .orb-modal { z-index: 100002 !important; }
.orb-toast-rail { z-index: 100003 !important; }
.st-mb-btn { border-radius: 999px; border: 1px solid var(--10); background: var(--inv-40); color: var(--60);
  display: grid; place-items: center; cursor: pointer; transition: color .2s, border-color .2s; }
.st-mb-btn:hover { color: var(--100); border-color: var(--40); }
.st-mb-btn [data-orbit] { width: 18px; height: 18px; }
.st-mb-avatar { width: 48px; height: 48px; border-radius: 999px; border: 0; cursor: pointer; overflow: hidden;
  background: var(--5); position: relative; padding: 0; }
.st-mb-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; display: block; }
.st-mb-avatar::after { content: ""; position: absolute; inset: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--10); }
.st-mb-badge { position: absolute; top: -2px; right: -2px; min-width: 9px; height: 9px; border-radius: 999px; background: var(--100); }

/* traveller / visitor chat widget — monochrome, canon input composer */
.st-chat-widget { position: fixed; right: 24px; bottom: 84px; z-index: 1003; width: min(380px, calc(100vw - 32px)); height: min(520px, calc(100vh - 120px));
  background: var(--inv-100); border: 1px solid var(--10); border-radius: var(--r-lg); box-shadow: 0 24px 70px rgba(0,0,0,.5);
  display: none; flex-direction: column; overflow: hidden; }
.st-chat-widget.open { display: flex; }
.cw-body { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.cw-row { display: flex; gap: 10px; }
.cw-row.me { flex-direction: row-reverse; }
.cw-av { width: 28px; height: 28px; border-radius: 999px; overflow: hidden; flex-shrink: 0; background: var(--5); }
.cw-av img { width: 100%; height: 100%; object-fit: cover; }
.cw-bubble { background: var(--5); border-radius: 12px; padding: 9px 12px; font-size: 13px; color: var(--80); line-height: 1.45; max-width: 78%; }
.cw-row.me .cw-bubble { background: var(--100); color: var(--inv-100); }
.cw-bubble .cw-who { font-family: var(--f-mono); font-size: 9px; color: var(--40); margin-bottom: 4px; }
.cw-composer { padding: 10px; }
.cw-composer .st-input { width: 100%; height: 52px; padding: 0 6px 0 18px; }
.cw-composer .st-input input { font-size: 14px; }

/* ══ full-screen MenuOverlay (framework/MenuOverlay.svelte) ══ */
.st-overlay { position: fixed; inset: 0; z-index: 1300; background: var(--inv-100); display: none; color: var(--100); }
.st-overlay.open { display: block; }
.st-ov-frame { position: absolute; inset: 0; background: var(--inv-100);
  overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.st-ov-top { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--inv-10); }
.st-ov-top .back { background: none; border: 0; color: var(--60); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; }
.st-ov-top .back:hover { color: var(--100); }
.st-ov-nav { display: flex; gap: 4px; flex-shrink: 1; min-width: 0; overflow: hidden; }
.st-ov-nav button { background: none; border: 0; color: var(--40); cursor: pointer; font: inherit; font-size: 13px;
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-sm); white-space: nowrap; }
.st-ov-nav button [data-orbit] { width: 15px; height: 15px; }
.st-ov-nav button:hover { color: var(--80); }
.st-ov-nav button.on { color: var(--100); font-weight: 480; }
.st-ov-dock { margin-left: auto; flex-shrink: 0; }
.st-ov-main { display: grid; grid-template-columns: 1fr; min-height: 0; }
.st-ov-chat { display: none; }
.st-ov-tab { overflow-y: auto; padding: 24px 28px; }
.st-ov-tab[hidden] { display: none; }
.st-ov-chat { border-left: 1px solid var(--inv-10); background: var(--5); display: flex; flex-direction: column; min-height: 0; }
.st-ov-chat .hd { padding: 12px 14px; border-bottom: 1px solid var(--5); display: flex; align-items: center; gap: 8px; color: var(--80); font-size: 12px; }
.st-ov-chat .hd [data-orbit] { width: 14px; height: 14px; }
.st-ov-chat .body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.st-ov-chat .row { display: flex; gap: 10px; }
.st-ov-chat .row .av { width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0; background: rgba(165, 165, 165, .4); }
.st-ov-chat .row .bb { background: var(--2); border: 1px solid var(--5); border-radius: 10px; padding: 8px 11px; font-size: 12.5px; color: var(--80); line-height: 1.4; }
.st-ov-chat .row .who { font-family: var(--f-mono); font-size: 9px; color: var(--40); margin-bottom: 4px; }
.st-ov-chat .composer { border-top: 1px solid var(--5); padding: 10px; display: flex; gap: 8px; }
.st-ov-chat .composer input { flex: 1; background: var(--2); border: 1px solid var(--10); border-radius: 999px; padding: 9px 14px; color: var(--100); font: inherit; }

/* workspace tab helpers */
.st-ws-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.st-ws-head h2 { font-weight: 200; font-size: 22px; margin: 0; }
.st-ws-head .c { font-family: var(--f-mono); font-size: 11px; color: var(--40); }
.st-ws-head .sp { margin-left: auto; }
.st-cloud-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.st-file { background: var(--2); border: 1px solid var(--5); border-radius: var(--r-md); overflow: hidden; cursor: pointer; }
.st-file:hover { border-color: var(--20); }
.st-file .th { aspect-ratio: 4/3; display: grid; place-items: center; color: var(--20); }
.st-file .th [data-orbit] { width: 28px; height: 28px; }
.st-file .mt { padding: 9px 11px; } .st-file .fn { font-size: 12px; color: var(--80); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-file .fs { font-family: var(--f-mono); font-size: 9px; color: var(--40); margin-top: 5px; }
.st-kanban { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; align-items: start; }
.st-col { background: var(--inv-20); border: 1px solid var(--5); border-radius: var(--r-md); }
.st-col-h { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border-bottom: 1px solid var(--5); font-size: 12px; color: var(--80); }
.st-col-h .dot { width: 8px; height: 8px; border-radius: 999px; } .st-col-h .c { margin-left: auto; font-family: var(--f-mono); font-size: 10px; color: var(--40); }
.st-col-b { padding: 9px; display: flex; flex-direction: column; gap: 8px; }
.st-task { background: var(--2); border: 1px solid var(--10); border-radius: var(--r-sm); padding: 10px 11px; cursor: pointer; }
.st-task:hover { border-color: var(--20); } .st-task .tt { font-size: 12.5px; color: var(--100); line-height: 1.4; }
.st-task .tr { display: flex; align-items: center; gap: 6px; margin-top: 9px; }
.st-pri { width: 7px; height: 7px; border-radius: 999px; } .st-pri.low{background:var(--40)} .st-pri.medium{background:#939393} .st-pri.high{background:var(--100)} .st-pri.critical{background:var(--100)}
.st-tg { font-family: var(--f-mono); font-size: 9px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--10); color: var(--60); }
.st-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-tbl th { text-align: left; font-family: var(--f-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--40); padding: 8px 10px; border-bottom: 1px solid var(--10); font-weight: 400; }
.st-tbl td { padding: 11px 10px; border-bottom: 1px solid var(--5); color: var(--80); }
.st-tbl .mono { font-family: var(--f-mono); }
.st-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 10px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--10); color: var(--60); }
.st-pill.ok { color: #b3b3b3; border-color: rgba(179, 179, 179, .3); } .st-pill.warn { color: var(--100); border-color: rgba(165, 165, 165, .3); } .st-pill.bad { color: #888888; border-color: rgba(73, 73, 73, .4); }
.st-role { font-family: var(--f-mono); font-size: 10px; padding: 2px 9px; border-radius: 999px; }
.st-role.admin { background: rgba(73, 73, 73, .18); color: #a1a1a1; } .st-role.staff { background: rgba(165, 165, 165, .16); color: var(--100); }
.st-role.envoy { background: rgba(113, 113, 113, .18); color: #a7a7a7; } .st-role.client { background: rgba(147, 147, 147, .16); color: #ababab; } .st-role.bot { background: var(--10); color: var(--40); }
.st-lead-board { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; align-items: start; }

/* ── CloudCore (the single Cloud — browse + picker) ── */
.st-ov-tab[data-tabpanel="cloud"] { padding: 0; }
.cloudcore { display: grid; grid-template-columns: 204px 1fr; height: 100%; min-height: 0; }
.cc-rail { border-right: 1px solid var(--inv-10); padding: 18px 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.cc-rail-head { font-size: 11px; text-transform: uppercase; letter-spacing: .2px; color: var(--40); padding: 4px 10px 10px; font-weight: 480; }
.cc-cat { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: none; border-radius: 10px; background: transparent; color: var(--60); cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.cc-cat:hover { background: var(--2); color: var(--100); }
.cc-cat.on { background: var(--5); color: var(--100); font-weight: 480; }
.cc-cat [data-orbit] { width: 16px; height: 16px; flex: 0 0 16px; }
.cc-rail-foot { margin-top: auto; padding-top: 12px; }
.cc-upload-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 1px dashed var(--20); border-radius: 10px; background: transparent; color: var(--60); cursor: pointer; font: inherit; font-size: 13px; }
.cc-upload-btn:hover { background: var(--2); color: var(--100); }
.cc-upload-btn [data-orbit] { width: 15px; height: 15px; }
.cc-body { display: flex; flex-direction: column; min-height: 0; padding: 22px 26px; overflow-y: auto; }
.cc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.cc-head-l { display: flex; align-items: baseline; gap: 12px; }
.cc-head h2 { font-weight: 200; font-size: 22px; margin: 0; }
.cc-count { font-family: var(--f-mono); font-size: 11px; color: var(--40); }
.cc-cat-l { flex: 1; text-align: left; }
.cc-cat-n { font-family: var(--f-mono); font-size: 11px; color: var(--40); }
.cc-main { display: flex; flex-direction: column; min-height: 0; height: 100%; position: relative; }
.cc-main .cc-head { padding: 22px 26px 14px; margin-bottom: 0; }
.cc-grid-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 26px 22px; }
.cc-search-wrap { position: relative; display: flex; align-items: center; }
.cc-search-ic { position: absolute; left: 13px; color: var(--40); pointer-events: none; display: inline-flex; }
.cc-search-ic [data-orbit] { width: 15px; height: 15px; }
.cc-search { padding-left: 36px; }
.cc-file { position: relative; }
.cc-pick { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--inv-60); border: 1px solid var(--20); display: inline-flex; align-items: center; justify-content: center; color: transparent; z-index: 2; cursor: pointer; }
.cc-file.sel .cc-pick { background: var(--100); color: var(--inv-100); border-color: transparent; }
.cc-pick [data-orbit] { width: 13px; height: 13px; }
/* footer (picker CTA) */
.cc-footer { display: flex; align-items: center; gap: 10px; padding: 12px 26px; border-top: 1px solid var(--10); background: var(--inv-80); backdrop-filter: blur(12px); }
.cc-footer .cc-foot-count { font-size: 12px; color: var(--60); }
.cc-footer .cc-foot-sp { flex: 1; }
.cc-confirm.disabled { opacity: .4; pointer-events: none; }
/* ── CloudInspector (preview + metadata + usage + shares) ── */
.cc-inspector { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.cc-inspector .insp-head { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-bottom: 1px solid var(--5); }
.cc-inspector .insp-back { width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--2); color: var(--80); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.cc-inspector .insp-back:hover { background: var(--5); color: var(--100); }
.cc-inspector .insp-back [data-orbit] { width: 16px; height: 16px; transform: rotate(180deg); }
.cc-inspector .insp-file { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: none; border-radius: 999px; background: var(--2); color: var(--100); cursor: pointer; font-family: var(--f-sans); }
.cc-inspector .insp-file:hover { background: var(--5); }
.cc-inspector .insp-fn { font-size: 13px; font-weight: 480; }
.cc-inspector .insp-fsz { font-size: 11px; color: var(--40); font-family: var(--f-mono); }
.cc-inspector .insp-file [data-orbit] { width: 14px; height: 14px; color: var(--40); transform: rotate(90deg); }
.cc-inspector .insp-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px; display: flex; flex-direction: column; gap: 22px; }
.cc-inspector .insp-preview { width: 100%; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; background: var(--inv-40); display: grid; place-items: center; }
.cc-inspector .insp-preview img, .cc-inspector .insp-preview video { width: 100%; height: 100%; object-fit: contain; }
.cc-inspector .insp-preview.ddd { background: radial-gradient(ellipse at 50% 40%, var(--inv-20), var(--inv-60)); }
.cc-inspector .insp-glyph { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--20); }
.cc-inspector .insp-glyph [data-orbit] { width: 96px; height: 96px; }
.cc-inspector .insp-3d-label { font-size: 13px; color: var(--60); font-family: var(--f-mono); }
.cc-inspector .insp-audio { width: 70%; height: 6px; border-radius: 3px; background: var(--10); overflow: hidden; }
.cc-inspector .insp-audio-bar { width: 38%; height: 100%; background: var(--100); }
.cc-inspector .insp-section { display: flex; flex-direction: column; gap: 6px; }
.cc-inspector .insp-sec-head { font-size: 11px; text-transform: uppercase; letter-spacing: .2px; color: var(--40); font-weight: 480; margin-bottom: 4px; }
.cc-inspector .insp-kv { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--5); }
.cc-inspector .insp-kv span:first-child { color: var(--60); }
.cc-inspector .insp-kv span:last-child { color: var(--100); }
.cc-inspector .insp-usage { display: flex; flex-direction: column; gap: 6px; }
.cc-inspector .insp-usage-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--5); border-radius: 10px; background: var(--2); color: var(--80); cursor: pointer; font-family: var(--f-sans); font-size: 13px; text-align: left; }
.cc-inspector .insp-usage-row:hover { background: var(--5); color: var(--100); }
.cc-inspector .insp-usage-row [data-orbit]:first-child { width: 16px; height: 16px; color: var(--40); }
.cc-inspector .insp-usage-row span { flex: 1; }
.cc-inspector .insp-usage-row [data-orbit]:last-child { width: 13px; height: 13px; color: var(--40); }
.cc-inspector .insp-empty { color: var(--40); font-size: 13px; padding: 6px 2px; }
.cc-inspector .insp-share-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--10); border-radius: 999px; background: transparent; color: var(--80); cursor: pointer; font-family: var(--f-sans); font-size: 13px; }
.cc-inspector .insp-share-btn:hover { background: var(--2); color: var(--100); }
.cc-inspector .insp-share-btn [data-orbit] { width: 15px; height: 15px; }
.cc-inspector .insp-foot { padding: 14px 22px; border-top: 1px solid var(--10); }
.cc-inspector .insp-select { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border: none; border-radius: 999px; background: var(--100); color: var(--inv-100); cursor: pointer; font-family: var(--f-sans); font-size: 13px; font-weight: 480; }
.cc-inspector .insp-select [data-orbit] { width: 15px; height: 15px; }
.cc-search { background: var(--2); border: 1px solid var(--10); border-radius: 999px; padding: 8px 14px; color: var(--100); font: inherit; font-size: 13px; outline: none; width: 220px; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; align-content: start; }
.cc-upload-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 4/3; border: 1px dashed var(--20); border-radius: var(--r-md); background: transparent; color: var(--40); cursor: pointer; font: inherit; font-size: 12px; }
.cc-upload-tile:hover { background: var(--2); color: var(--100); border-color: var(--40); }
.cc-upload-tile [data-orbit] { width: 24px; height: 24px; }
.cc-file { position: relative; background: var(--2); border: 1px solid var(--5); border-radius: var(--r-md); overflow: hidden; cursor: pointer; padding: 0; text-align: left; transition: border-color .15s ease; }
.cc-file:hover { border-color: var(--20); }
.cc-file.sel { border-color: var(--100); }
.cc-th { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--inv-20); display: grid; place-items: center; }
.cc-th img, .cc-th video { width: 100%; height: 100%; object-fit: cover; }
.cc-th.icon { color: var(--20); } .cc-th.icon [data-orbit] { width: 30px; height: 30px; }
.cc-th-badge { position: absolute; right: 6px; bottom: 6px; color: var(--100); background: var(--inv-60); border-radius: 6px; padding: 2px; display: inline-flex; }
.cc-th-badge [data-orbit] { width: 14px; height: 14px; }
.cc-meta { padding: 9px 11px; }
.cc-fn { font-size: 12px; color: var(--80); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-fs { font-family: var(--f-mono); font-size: 9px; color: var(--40); margin-top: 5px; }
.cc-check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--100); color: var(--inv-100); display: none; align-items: center; justify-content: center; }
.cloudcore.picking .cc-file.sel .cc-check { display: inline-flex; }
.cc-check [data-orbit] { width: 13px; height: 13px; }
.cc-picker-foot { position: sticky; bottom: -22px; margin: 18px -26px -22px; padding: 14px 26px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--10); background: var(--inv-80); backdrop-filter: blur(12px); }
.cc-cancel { background: transparent; border: 1px solid var(--10); border-radius: 999px; padding: 10px 20px; color: var(--80); cursor: pointer; font: inherit; }
.cc-cancel:hover { background: var(--2); color: var(--100); }
.cc-confirm { display: inline-flex; align-items: center; gap: 8px; background: var(--100); color: var(--inv-100); border: none; border-radius: 999px; padding: 10px 22px; cursor: pointer; font: inherit; font-weight: 480; }
.cc-confirm [data-orbit] { width: 15px; height: 15px; }

/* Benutzer (users registry) */
.st-ov-tab[data-tabpanel="benutzer"] { padding: 22px 26px; }
.st-user-cell { display: flex; align-items: center; gap: 10px; }
.st-user-meta { display: flex; flex-direction: column; }
.st-user-name { color: var(--100); font-size: 13px; }
.st-user-title { font-size: 11px; color: var(--40); }
.st-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--100); }
.st-dot.client { background: var(--40); }
/* monochrome role badges (DS: chips, not ambient colour) */
.st-users-tbl .st-role { background: var(--5); color: var(--60); }
.st-users-tbl .st-role.admin { color: var(--100); }

/* chat — monochrome (astranaut avatars), collapsible */
.st-overlay.chat-collapsed .st-ov-chat { display: none; }
.st-overlay.chat-collapsed .st-ov-main { grid-template-columns: 1fr; }
.st-ov-chat .cw-count { margin-left: auto; font-family: var(--f-mono); color: var(--60); }
.st-ov-chat .row .ob-avatar { flex: 0 0 auto; }

@media (max-width: 900px) {
  :root { --st-pad: 28px; }
  .st-proj { grid-template-columns: 1fr; gap: 24px; }
  .st-ov-main { grid-template-columns: 1fr; } .st-ov-chat { display: none; }
  .st-kanban, .st-lead-board { grid-template-columns: 1fr 1fr; }
}