/* Lumina OS — SPA shell overrides (MainLayout unmount) */

:root {
  --lc-nav-w: 220px;
  --lc-context-w: 272px;
  --lc-workspace-max: 1300px;
  --lc-success: #22c55e;
  --lc-warning: #f59e0b;
  --lo-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

html:has(body.lumina-os-active) {
  zoom: 1 !important;
  height: 100%;
}

body.lumina-os-active {
  overflow: hidden !important;
  background: var(--lo-background, #0e0e0e) !important;
  animation: none !important;
  min-height: 100dvh;
  height: 100dvh;
  transition: background var(--lo-transition, 500ms ease-in-out);
}

html[data-lo-theme='dark'] body.lumina-os-active,
html[data-lo-theme='dark'] #luminaOsRoot {
  background: #000000 !important;
}

/* Ensure scroll works inside Lumina OS panels */
#luminaOsRoot .lc-nav {
  min-height: 0;
  overflow: hidden;
}
#luminaOsRoot .lc-nav-menu {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#luminaOsRoot .lc-main,
#luminaOsRoot .lc-main-head,
#luminaOsRoot .lc-conv-list,
#luminaOsRoot .lc-thread {
  min-height: 0;
}
#luminaOsRoot .lc-conv-scroll,
#luminaOsRoot .lc-messages {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
#luminaOsRoot .lc-context {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
}

body.lumina-os-active #poxyAppShell,
body.lumina-os-active .page {
  display: none !important;
}

#luminaOsRoot {
  position: fixed;
  inset: 0;
  z-index: 9500;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--lc-bg, #0e0e0e);
  display: none;
  flex-direction: column;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  overflow: hidden;
}

#luminaOsRoot:not([hidden]) {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#luminaOsRoot:not([hidden]) .lc-shell {
  opacity: 1;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: none;
}

/* Centered workspace — max 1300px bento frame (nav stays full-height left) */
#luminaOsRoot .lc-workspace {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background: var(--lc-bg, #0e0e0e);
  overflow: hidden;
}

#luminaOsRoot .lc-workspace-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 48% at 52% 42%, rgba(88, 28, 135, 0.1) 0%, transparent 62%),
    radial-gradient(ellipse 40% 36% at 68% 58%, rgba(236, 72, 153, 0.05) 0%, transparent 58%);
  filter: blur(100px);
  opacity: 0.85;
}

#luminaOsRoot .lc-workspace-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--lc-workspace-max);
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lc-context-w);
  align-items: stretch;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.02);
}

#luminaOsRoot .lc-shell.layout-module .lc-workspace-inner {
  grid-template-columns: minmax(0, 1fr);
}

#luminaOsRoot .lc-shell.context-collapsed .lc-workspace-inner,
#luminaOsRoot .lc-shell.context-hidden .lc-workspace-inner {
  grid-template-columns: minmax(0, 1fr);
}

#luminaOsRoot .lc-module-host:not(.lc-hidden) {
  grid-column: 1 / -1;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#luminaOsRoot .lc-nav {
  height: 100%;
  border-right: 1px solid var(--lc-border-strong, #222);
}

#luminaOsRoot .lc-main {
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#luminaOsRoot .lc-main-head {
  flex: 1;
  min-height: 0;
  height: 100%;
}

#luminaOsRoot .lc-conv-list,
#luminaOsRoot .lc-thread {
  height: 100%;
  max-height: 100%;
}

#luminaOsRoot .lc-conv-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#luminaOsRoot .lc-thread {
  display: flex;
  flex-direction: column;
}

#luminaOsRoot .lc-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#luminaOsRoot .lc-compose-wrap {
  flex-shrink: 0;
}

#luminaOsRoot .lc-context {
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--lc-surface, #151515);
  overflow-x: hidden;
  overflow-y: auto;
}


#luminaOsRoot.is-entering:not([hidden]) {
  animation: lo-enter var(--lo-transition) forwards;
}

#luminaOsRoot.is-exiting {
  animation: lo-exit var(--lo-transition) forwards;
}

@keyframes lo-enter {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes lo-exit {
  from {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  to {
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.985);
  }
}

#luminaOsRoot .lc-nav-brand-text::after {
  content: ' OS';
  -webkit-text-fill-color: var(--lc-muted, #9ca3af);
  font-weight: 600;
  font-size: 14px;
}

.lc-nav-exit {
  margin: 0 10px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 20px);
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--lc-border-strong, #222);
  background: transparent;
  color: var(--lc-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--lc-dur), transform var(--lc-dur), color var(--lc-dur);
}

.lc-nav-exit:hover {
  background: var(--lc-surface-hover);
  color: var(--lc-text);
  transform: scale(1.03);
}


.lc-shell.context-collapsed {
  grid-template-columns: var(--lc-nav-w) minmax(0, 1fr) !important;
}

.lc-shell.context-collapsed .lc-workspace-inner {
  grid-template-columns: minmax(0, 1fr);
}

.lc-shell.context-collapsed .lc-context {
  display: none;
}

.lc-context-collapse {
  position: absolute;
  top: 12px;
  left: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--lc-border-strong);
  background: var(--lc-surface);
  color: var(--lc-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform var(--lc-dur), background var(--lc-dur);
}

.lc-context-collapse:hover {
  transform: scale(1.03);
  background: var(--lc-surface-hover);
  color: var(--lc-text);
}

.lc-context {
  position: relative;
}

.lc-pinned-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lc-pinned-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--lc-surface-hover);
  border: 1px solid var(--lc-border);
  font-size: 12px;
  color: var(--lc-muted);
  transition: transform var(--lc-dur), box-shadow var(--lc-dur);
}

.lc-pinned-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.lc-empty-hint,
.lc-loading {
  padding: 16px;
  color: #9ca3af;
  font-size: 13px;
  text-align: center;
}

.lc-nav-item:hover,
.lc-compose-tool:hover,
.lc-compose-attach:hover,
.lc-compose-send:not(:disabled):hover,
.lc-icon-btn:hover,
.lc-context-action:hover {
  transform: scale(1.03);
}

.lc-conv-item:hover {
  transform: translateY(-2px);
}

#luminaOsRoot .lc-bubble {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}