/* ============================================================================
   OS UI: desktop field, deterministic window grid, and 50px task bar.
   Product views mount inside .os-window__body in later integration phases.
   ========================================================================== */

:root {
  --os-bar-height: 50px;
  --os-gap: 8px;
  --os-window-bar-height: 40px;
  --os-window-radius: 14px;
}

.os-ui {
  position: fixed;
  inset: 0 0 var(--kb-inset, 0px);
  isolation: isolate;
  color: var(--color-ink);
  background: var(--color-bg);
}

.os-ui__announcer {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.os-bar-tooltip {
  position: fixed;
  z-index: var(--z-popover);
  max-width: min(240px, calc(100vw - 12px));
  padding: 5px 8px;
  color: var(--color-bg);
  background: var(--color-ink);
  border: 1px solid color-mix(in srgb, var(--color-bg) 18%, transparent);
  border-radius: 6px;
  box-shadow: var(--shadow-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  pointer-events: none;
  white-space: nowrap;
  animation: os-tooltip-in var(--dur-fast) var(--ease);
}

.os-bar-tooltip::after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 7px;
  height: 7px;
  content: "";
  background: var(--color-ink);
  transform: translate(-50%, -55%) rotate(45deg);
}

.os-bar-tooltip[hidden] {
  display: none;
}

@keyframes os-tooltip-in {
  from {
    opacity: 0;
    translate: 0 2px;
  }
}

.os-ui__background {
  position: absolute;
  inset: 0 0 calc(var(--os-bar-height) + env(safe-area-inset-bottom, 0px));
  background-color: var(--color-bg);
  background-image:
    radial-gradient(
      circle at 18% 14%,
      color-mix(in srgb, var(--color-accent) 9%, transparent),
      transparent 34%
    ),
    radial-gradient(
    circle at 82% 78%,
    color-mix(in srgb, var(--entity-view) 7%, transparent),
    transparent 30%
  );
  background-size: auto, auto;
}

.os-desktop {
  position: absolute;
  inset: 0 0 calc(var(--os-bar-height) + env(safe-area-inset-bottom, 0px));
  min-width: 0;
  min-height: 0;
  padding: max(var(--os-gap), env(safe-area-inset-top, 0px))
    max(var(--os-gap), env(safe-area-inset-right, 0px)) var(--os-gap)
    max(var(--os-gap), env(safe-area-inset-left, 0px));
}

.os-desktop__grid {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  gap: var(--os-gap);
}

.os-desktop[data-layout="empty"] .os-desktop__grid {
  display: none;
}

.os-desktop[data-layout="regular-1"] .os-desktop__grid {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

.os-desktop[data-layout="regular-2"] .os-desktop__grid {
  grid-template: minmax(0, 1fr) / repeat(2, minmax(0, 1fr));
}

.os-desktop[data-layout="regular-3"] .os-desktop__grid,
.os-desktop[data-layout="three-columns"] .os-desktop__grid {
  grid-template: minmax(0, 1fr) / repeat(3, minmax(0, 1fr));
}

.os-desktop[data-layout="regular-4"] .os-desktop__grid {
  grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr));
}

.os-desktop[data-layout="assistant-centered"] .os-desktop__grid {
  grid-template: minmax(0, 1fr) / minmax(0, 1fr) minmax(360px, 2fr) minmax(0, 1fr);
}

.os-desktop[data-layout="assistant-centered"] .os-window--utility {
  grid-column: 2;
}

.os-desktop[data-layout="settings-left"] .os-desktop__grid {
  grid-template: minmax(0, 1fr) / minmax(300px, 1fr) repeat(2, minmax(0, 1fr));
}

.os-desktop[data-layout="utilities-split"] .os-desktop__grid {
  grid-template: minmax(0, 1fr) / minmax(280px, 1fr) minmax(0, 2fr);
}

.os-desktop[data-layout="utility-regular-split"].has-assistant .os-desktop__grid {
  grid-template: minmax(0, 1fr) / minmax(280px, 1fr) minmax(0, 2fr);
}

.os-desktop[data-layout="utility-regular-split"].has-settings .os-desktop__grid {
  grid-template: minmax(0, 1fr) / minmax(280px, 1fr) minmax(0, 2fr);
}

.os-window {
  position: relative;
  display: grid;
  grid-template-rows: var(--os-window-bar-height) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--os-window-radius);
  box-shadow: var(--shadow-2);
  container-type: inline-size;
  transform-origin: center;
  transition:
    border-color var(--dur-control) var(--ease),
    box-shadow var(--dur-control) var(--ease);
  will-change: transform;
}

.os-window.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 65%, var(--color-border-strong));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 24%, transparent), var(--shadow-3);
}

.os-window.is-semantic-active .os-window__mark {
  background: var(--color-accent);
}

.os-window__bar {
  display: grid;
  grid-template-columns: minmax(100px, auto) minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
  padding: 0 6px 0 10px;
  background: color-mix(in srgb, var(--color-surface-raised) 76%, var(--color-surface));
  border-bottom: 1px solid var(--color-border);
  user-select: none;
  cursor: grab;
}

.os-ui.is-window-reordering,
.os-ui.is-window-reordering .os-window__bar {
  cursor: grabbing;
}

.os-window.is-window-dragging {
  opacity: 0.62;
  scale: 0.995;
}

.os-window.is-window-drop-target {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 38%, transparent), var(--shadow-3);
}

.os-window-drag-ghost {
  position: fixed;
  z-index: var(--z-popover);
  max-width: min(240px, calc(100vw - 24px));
  overflow: hidden;
  padding: 7px 10px;
  color: var(--color-ink);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  animation: os-drag-ghost-in var(--dur-fast) var(--ease-enter);
  will-change: transform;
}

@keyframes os-drag-ghost-in {
  from {
    opacity: 0;
    scale: 0.96;
  }
}

.os-window-transition-ghost {
  position: fixed;
  z-index: calc(var(--z-panel) - 1);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--os-window-radius);
  box-shadow: var(--shadow-2);
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
}

.os-window-transition-ghost__bar {
  height: var(--os-window-bar-height);
  padding: 0 10px;
  overflow: hidden;
  color: var(--color-ink-secondary);
  background: color-mix(in srgb, var(--color-surface-raised) 76%, var(--color-surface));
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--os-window-bar-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-window__identity {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
}

.os-window__mark {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--color-ink-faint);
  transition: background-color var(--dur-control) var(--ease), scale var(--dur-control) var(--ease);
}

.os-window__title {
  overflow: hidden;
  color: var(--color-ink-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--dur-control) var(--ease);
}

.os-window.is-active .os-window__title {
  color: var(--color-ink);
}

.os-window__header-slot {
  min-width: 0;
  overflow: hidden;
}

.os-window__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.os-window__action {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: var(--color-ink-secondary);
  border-radius: 8px;
  transition:
    color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    scale var(--dur-instant) var(--ease);
}

.os-window__action:hover {
  color: var(--color-ink);
  background: var(--color-hover);
}

.os-window__action:active {
  scale: 0.9;
}

.os-window__minimize-icon {
  width: 10px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}

.os-window__body {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.os-window[data-kind="board"] .os-window__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.os-window__body > :not(.os-window__empty) {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.os-window__empty {
  display: grid;
  height: 100%;
  place-items: center;
  padding: var(--space-4);
  color: var(--color-ink-faint);
  font-size: var(--text-sm);
  text-align: center;
}

.os-window__empty[hidden] {
  display: none;
}

/* Existing singleton product controllers become window-relative in OS mode. */
.os-canvas-surface {
  position: relative;
  overflow: hidden;
}

.os-canvas-surface > .canvas-layer {
  inset: 0;
}

.os-canvas-surface > .toolbar {
  position: absolute;
  top: var(--space-2);
  left: 50%;
  right: auto;
  bottom: auto;
  width: auto;
  max-width: calc(100% - 2 * var(--space-2));
  translate: -50% 0;
}

.app-shell-conflict {
  display: grid;
  height: 100%;
  place-items: center;
  padding: var(--space-5);
  color: var(--color-ink-secondary);
  text-align: center;
}

.os-window[data-kind="assistant"] .os-window__body {
  overflow: visible;
}

.os-assistant-window {
  position: relative;
  overflow: visible;
}

.os-window[data-kind="assistant"] {
  grid-template-rows: 40px minmax(0, 1fr);
}

.os-window[data-kind="assistant"] .os-window__bar {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-left: 6px;
}

.os-window[data-kind="assistant"] .os-window__identity {
  display: none;
}

.os-window[data-kind="assistant"] .os-window__header-slot {
  height: 100%;
}

.os-window[data-kind="assistant"] .chat-history__header {
  height: 100%;
  gap: 4px;
  padding: 0;
  border: 0;
}

.os-window[data-kind="assistant"] .persona-tabs {
  padding: 2px 1px;
}

.os-window[data-kind="assistant"] .persona-tab {
  height: 30px;
}

.os-window[data-kind="assistant"] .persona-tabs__new,
.os-window[data-kind="assistant"] .chat-history__actions > .icon-btn {
  width: 28px;
  height: 28px;
}

.os-window[data-kind="assistant"] .changes-btn {
  position: relative;
  width: 30px;
  height: 28px;
  justify-content: center;
  gap: 0;
  padding: 0;
  overflow: visible;
  font-size: 0;
}

.os-window[data-kind="assistant"] .changes-btn__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 9px;
}

.os-assistant-window .chat-dock--embedded {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  translate: none;
  z-index: auto;
}

.os-assistant-window .chat-history {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.os-assistant-window .chat-dock--embedded > .chat {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-raised);
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}

.os-assistant-window .chat-history__body {
  padding: var(--space-4);
}

.os-assistant-settings,
.os-settings-content {
  overflow: hidden;
}

.os-assistant-settings {
  position: absolute;
  z-index: 4;
  inset: var(--space-2);
  top: calc(var(--space-2) - var(--os-window-bar-height));
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: var(--space-2);
  overflow: hidden;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: calc(var(--os-window-radius) - 4px);
  box-shadow: var(--shadow-3);
  transform-origin: top right;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}

.os-assistant-settings.is-enter,
.os-assistant-settings.is-leave {
  opacity: 0;
  transform: translateY(-5px) scale(0.985);
}

.os-assistant-settings.is-leave {
  pointer-events: none;
  transition-duration: var(--dur-overlay-out);
  transition-timing-function: var(--ease-exit);
}

.os-assistant-settings[hidden] {
  display: none;
}

.os-assistant-settings__close {
  position: absolute;
  z-index: 2;
  top: var(--space-2);
  right: var(--space-2);
}

.os-window[data-kind="assistant"]:has(.os-assistant-settings:not([hidden])) .os-window__bar,
.os-assistant-window:has(.os-assistant-settings:not([hidden])) .chat-dock--embedded {
  pointer-events: none;
  filter: blur(8px);
  opacity: 0.72;
}

.os-window[data-kind="assistant"] .os-window__bar,
.os-assistant-window .chat-dock--embedded {
  transition: filter var(--dur-med) var(--ease), opacity var(--dur-med) var(--ease);
}

.os-assistant-settings > [data-panel-body],
.os-assistant-settings .apanel {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.os-assistant-settings .apanel__tabs {
  padding-right: var(--space-7);
}

.os-ui ~ .upload-progress-stack {
  bottom: calc(var(--os-bar-height) + env(safe-area-inset-bottom, 0px) + var(--space-2));
}

.os-bar {
  position: absolute;
  z-index: var(--z-panel);
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: calc(var(--os-bar-height) + env(safe-area-inset-bottom, 0px));
  align-items: flex-start;
  min-width: 0;
  gap: 6px;
  padding: 5px max(6px, env(safe-area-inset-right, 0px))
    calc(5px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 24px color-mix(in srgb, var(--color-shadow) 50%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
}

.os-bar__utilities,
.os-bar__launchers {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
}

.os-bar__utilities {
  padding-right: 6px;
  border-right: 1px solid var(--color-border);
}

.os-bar__launchers {
  padding-left: 6px;
  border-left: 1px solid var(--color-border);
}

.os-bar__tasks {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 56px;
  gap: 3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.os-bar__tasks::-webkit-scrollbar {
  display: none;
}

.os-bar__button,
.os-task-tab {
  height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition:
    color var(--dur-control) var(--ease),
    background-color var(--dur-control) var(--ease),
    border-color var(--dur-control) var(--ease),
    box-shadow var(--dur-control) var(--ease),
    scale var(--dur-instant) var(--ease);
}

.os-bar__button {
  position: relative;
  display: grid;
  width: 38px;
  flex: none;
  place-items: center;
  color: var(--color-ink-secondary);
}

.os-bar__button:active {
  scale: 0.92;
}

.os-bar__button > span:not(.os-bar__settings-avatar) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.os-bar__button:hover,
.os-bar__button.is-open {
  color: var(--color-ink);
  background: var(--color-hover);
  border-color: var(--color-border);
}

.os-bar__utility.is-open {
  background: var(--color-active);
}

.os-bar__utility.is-focused {
  border-color: var(--color-border-strong);
  box-shadow: inset 0 -2px var(--color-accent);
}

.os-bar__settings-avatar {
  display: grid;
  width: 24px;
  height: 24px;
  flex: none;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-round);
  background: var(--color-ink);
  color: var(--color-bg);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  line-height: 1;
}

.os-bar__settings-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.os-task-tab {
  position: relative;
  display: flex;
  flex: 0 1 148px;
  align-items: center;
  min-width: 64px;
  max-width: 148px;
  padding: 0;
  color: var(--color-ink-secondary);
  background: var(--color-surface-sunken);
}

.os-task-tab__main {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  align-self: stretch;
  gap: 7px;
  padding: 0 5px 0 9px;
  color: inherit;
  text-align: left;
}

.os-task-tab__close {
  display: grid;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  flex: none;
  place-items: center;
  color: var(--color-ink-faint);
  border-radius: 8px;
  opacity: 0.55;
  transition:
    color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease),
    scale var(--dur-instant) var(--ease);
}

.os-task-tab:hover .os-task-tab__close,
.os-task-tab__close:focus-visible {
  opacity: 1;
}

.os-task-tab__close:hover {
  color: var(--color-ink);
  background: var(--color-active);
}

.os-task-tab__close:active {
  scale: 0.86;
}

.os-task-tab__main:active {
  scale: 0.985;
}

.os-task-tab:hover {
  color: var(--color-ink);
  background: var(--color-hover);
}

.os-task-tab.is-visible {
  border-color: var(--color-border);
  background: var(--color-surface-raised);
}

.os-task-tab.is-active {
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}

.os-task-tab__label {
  overflow: hidden;
  min-width: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.os-task-tab__state {
  position: absolute;
  right: 8px;
  bottom: 3px;
  left: 8px;
  height: 2px;
  background: transparent;
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0.45);
  transition:
    background-color var(--dur-control) var(--ease),
    opacity var(--dur-control) var(--ease),
    transform var(--dur-control) var(--ease-spring);
}

.os-task-tab.is-visible .os-task-tab__state {
  background: var(--color-ink-faint);
  opacity: 1;
  transform: scaleX(1);
}

.os-task-tab.is-active .os-task-tab__state {
  background: var(--color-accent);
}

.os-bar button:focus-visible,
.os-task-tab__main:focus-visible,
.os-task-tab__close:focus-visible,
.os-window__action:focus-visible,
.os-window :focus-visible {
  /* outline: 2px solid var(--color-accent); */
  outline-offset: -2px;
}

@media (max-width: 767px) {
  :root {
    --os-gap: 5px;
    --os-window-radius: 12px;
  }

  .os-desktop[data-layout="mobile-single"] .os-desktop__grid {
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  }

  .os-bar {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .os-bar__tasks {
    flex-basis: 80px;
  }

  .os-task-tab {
    flex-basis: 96px;
    max-width: 96px;
  }

  .os-bar__button {
    width: 34px;
  }

  .os-window__bar {
    grid-template-columns: minmax(80px, auto) minmax(0, 1fr) auto;
    cursor: default;
  }

  .os-assistant-settings {
    inset: var(--space-1);
    top: calc(var(--space-1) - var(--os-window-bar-height));
    padding: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .os-window,
  .os-window-drag-ghost,
  .os-window-transition-ghost,
  .os-bar-tooltip {
    animation: none;
    transition: none;
  }
}