/* OrchestrOS layout system */

/* ═══════════════════════════════════════════════════════════════
   Scrollbar theming — subtle, dark-themed, minimal track
   ═══════════════════════════════════════════════════════════════ */

/* Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--c-border, #2e3348);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--c-text-dim, #5c6178);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-border, #2e3348) transparent;
}

.orchestros-shell {
  display: flex;
  height: 100%;
  width: 100%;
}

.orchestros-nav {
  width: var(--nav-width);
  min-width: var(--nav-width);
  height: 100%;
  background: var(--c-surface);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.orchestros-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

.orchestros-header {
  height: var(--header-height);
  min-height: var(--header-height);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  gap: var(--sp-4);
}

.orchestros-content {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.orchestros-surface-host {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-6);
  min-width: 0;
}

.orchestros-assistant {
  width: var(--assistant-width, var(--guidance-width));
  min-width: var(--assistant-width, var(--guidance-width));
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
  overflow-y: auto;
  padding: var(--sp-4);
  transition: width 250ms var(--ease-out),
              min-width 250ms var(--ease-out),
              padding 250ms var(--ease-out);
}

.orchestros-assistant--collapsed {
  width: var(--assistant-collapsed-width, var(--guidance-collapsed-width));
  min-width: var(--assistant-collapsed-width, var(--guidance-collapsed-width));
  padding: var(--sp-4) var(--sp-1);
  overflow: hidden;
}

/* Utility classes */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }

.p-2 { padding: var(--sp-2); }
.p-3 { padding: var(--sp-3); }
.p-4 { padding: var(--sp-4); }
.p-6 { padding: var(--sp-6); }
.px-4 { padding-left: var(--sp-4); padding-right: var(--sp-4); }
.py-2 { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
.py-3 { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-muted { color: var(--c-text-muted); }
.text-dim { color: var(--c-text-dim); }
.text-accent { color: var(--c-accent); }
.text-success { color: var(--c-success); }
.text-warning { color: var(--c-warning); }
.text-danger { color: var(--c-danger); }

.font-mono { font-family: var(--font-mono); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card */
.card {
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}

.card--hoverable:hover {
  border-color: var(--c-accent);
  cursor: pointer;
}

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.badge--accent { background: var(--c-accent-muted); color: var(--c-accent); }
.badge--success { background: var(--c-success-muted); color: var(--c-success); }
.badge--warning { background: var(--c-warning-muted); color: var(--c-warning); }
.badge--danger { background: var(--c-danger-muted); color: var(--c-danger); }
.badge--orchestros-core { background: var(--c-orchestros-core-muted); color: var(--c-orchestros-core); }

/* Lane badge */
.badge--rapid { background: rgba(245,158,11,0.15); color: var(--c-lane-rapid); }
.badge--standard { background: var(--c-accent-muted); color: var(--c-lane-standard); }
.badge--deep { background: rgba(167,139,250,0.15); color: var(--c-lane-deep); }

/* Role indicator */
.role-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.role-indicator--director { color: var(--c-role-director); background: rgba(245,158,11,0.12); }
.role-indicator--architect { color: var(--c-role-architect); background: rgba(167,139,250,0.12); }
.role-indicator--executor { color: var(--c-role-executor); background: var(--c-accent-muted); }
.role-indicator--verifier { color: var(--c-role-verifier); background: var(--c-success-muted); }
.role-indicator--closer { color: var(--c-role-closer); background: rgba(244,114,182,0.12); }
.role-indicator--evolution { color: var(--c-role-evolution); background: rgba(244,114,182,0.12); } /* backward compat */

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text);
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--c-accent);
  color: #fff;
  border-color: var(--c-accent);
}
.btn--primary:hover:not(:disabled) { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }

.btn--secondary {
  background: var(--c-surface-raised);
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
.btn--secondary:hover:not(:disabled) { border-color: var(--c-accent); }

.btn--danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--c-danger, #ef4444);
  border-color: var(--c-danger, #ef4444);
}
.btn--danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.25); }

.btn--ghost {
  color: var(--c-text-muted);
}
.btn--ghost:hover:not(:disabled) { color: var(--c-text); background: var(--c-surface-raised); }

.btn--sm { padding: var(--sp-1) var(--sp-3); font-size: var(--text-xs); }

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-4);
  text-align: center;
  color: var(--c-text-muted);
}

.empty-state__title {
  font-size: var(--text-lg);
  font-weight: 500;
  margin-bottom: var(--sp-2);
  color: var(--c-text);
}

.empty-state__description {
  font-size: var(--text-sm);
  margin-bottom: var(--sp-4);
  max-width: 360px;
}

/* Loading state */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  gap: var(--sp-3);
  color: var(--c-text-muted);
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Section heading */
.section-heading {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text-dim);
  padding: var(--sp-2) var(--sp-4);
}

/* ── Concept Tooltips ────────────────────────────────────────────────────── */
.concept-tip {
  position: relative;
  border-bottom: 1px dotted var(--c-text-dim);
  cursor: help;
}

.concept-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-surface-overlay);
  color: var(--c-text);
  font-size: var(--text-xs);
  font-weight: 400;
  line-height: 1.4;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-md);
  white-space: normal;
  width: max-content;
  max-width: 240px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast);
  z-index: 100;
}

.concept-tip:hover::after,
.concept-tip:focus::after {
  opacity: 1;
}

/* On small screens, anchor tooltips to the left to avoid overflow */
@media (max-width: 480px) {
  .concept-tip::after {
    left: 0;
    transform: none;
  }
}

/* Mobile nav elements — hidden by default, shown at ≤480px */
.nav-mobile-toggle,
.nav-mobile-backdrop { display: none; }

/* ── Touch & Interaction ─────────────────────────────────────────────────── */
button, .btn, [role="button"], input, textarea, select, a {
  touch-action: manipulation; /* prevent double-tap zoom delay */
}

/* Scope hover effects to devices that support hover (not touch) */
@media (hover: hover) {
  .btn:hover { filter: brightness(1.1); }
}

/* Touch feedback for all interactive elements */
button:active, .btn:active, [role="button"]:active {
  opacity: 0.85;
  transform: scale(0.98);
}

/* Minimum touch target for buttons */
.btn {
  min-height: var(--touch-target-min);
}

/* ── Assistant mobile toggle — hidden by default, shown ≤768px ── */
.assistant-mobile-toggle { display: none; }

/* ── Responsive: Tablet (≤768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --nav-width: 56px;
    --guidance-width: 0px;
  }

  .nav-label {
    display: none;
  }

  /* Assistant becomes a right-side drawer — override collapsed state */
  .orchestros-assistant,
  .orchestros-assistant.orchestros-assistant--collapsed {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 300px;
    min-width: 300px;
    z-index: 1000;
    background: var(--c-surface);
    border-left: 1px solid var(--c-border);
    transform: translateX(100%);
    transition: transform var(--duration-normal) var(--ease-out);
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sp-4);
  }

  .orchestros-assistant.assistant--mobile-open,
  .orchestros-assistant.orchestros-assistant--collapsed.assistant--mobile-open {
    transform: translateX(0);
  }

  /* Show toggle button */
  .assistant-mobile-toggle {
    display: flex;
    position: fixed;
    bottom: var(--sp-4);
    right: var(--sp-4);
    z-index: 998;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    align-items: center;
    justify-content: center;
    background: var(--c-accent);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: var(--text-lg);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform var(--duration-fast), box-shadow var(--duration-fast);
  }

  .assistant-mobile-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.4);
  }

  /* Badge on toggle button */
  .assistant-mobile-toggle__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    background: var(--c-danger, #ef4444);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
  }

  /* Backdrop for assistant drawer */
  .assistant-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }

  .assistant-mobile-backdrop.active {
    display: block;
  }
}

/* ── Responsive: Mobile (≤480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --nav-width: 0px;
    --guidance-width: 0px;
  }

  /* Hide nav by default on phone — shown via hamburger toggle */
  .orchestros-nav {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 260px;
    z-index: 1000;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    transform: translateX(-100%);
    transition: transform var(--duration-normal) var(--ease-out);
    overflow-y: auto;
  }

  .orchestros-nav.nav--mobile-open {
    transform: translateX(0);
  }

  /* Show nav labels when mobile menu is open */
  .orchestros-nav.nav--mobile-open .nav-label {
    display: inline;
  }

  /* Backdrop overlay when nav is open */
  .nav-mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
  }

  .nav-mobile-backdrop.active {
    display: block;
  }

  /* Hamburger toggle button (visible only on mobile) */
  .nav-mobile-toggle {
    display: flex;
    position: fixed;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: 998;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    align-items: center;
    justify-content: center;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    color: var(--c-text);
    font-size: var(--text-lg);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
  }

  /* Header: compact on mobile */
  .orchestros-header {
    height: auto;
    min-height: 40px;
    padding: var(--sp-1) var(--sp-2) var(--sp-1) calc(var(--touch-target-min) + var(--sp-4));
  }

  /* Push main content to account for no nav + hamburger button */
  .orchestros-main {
    padding-top: 0;
  }

  /* Reduce surface padding on mobile */
  .orchestros-surface-host {
    padding: var(--sp-3);
  }

  /* Assistant drawer narrower on mobile */
  .orchestros-assistant {
    width: 85vw;
    max-width: 300px;
  }

  /* Form inputs: prevent iOS zoom on focus */
  input, textarea, select {
    font-size: var(--font-input-mobile) !important;
  }

  /* Safe area insets for notched devices */
  .orchestros-shell {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Constrained containers use viewport-relative sizing */
  .portal-form-container,
  .portal-landing__description {
    max-width: min(90vw, 400px);
  }
}