src/app/workspace-ui.css

/* ==========================================================================
   DocDoe AI — Workspace UI hardening (app routes, not marketing landing)
   Fixes: clickability, contrast, focus rings, tap targets, overlay safety
   ========================================================================== */

/* Workspace routes: avoid viewport-height scroll trap from root html h-full */
html:has(.docdoe-workspace),
html:has(.docdoe-workspace) body {
  height: auto;
  min-height: 100%;
  overflow: hidden;
}

.docdoe-workspace {
  position: relative;
  z-index: 10;
  isolation: isolate;
}

/* Readable muted text floor on dark surfaces */
.docdoe-workspace {
  --text-ghost: rgba(245, 245, 240, 0.38);
  --text-muted: rgba(245, 245, 240, 0.52);
  --text-secondary: rgba(245, 245, 240, 0.72);
}

/* Interactive elements always receive pointer events */
.docdoe-workspace a[href],
.docdoe-workspace button:not(:disabled),
.docdoe-workspace [role="button"]:not([aria-disabled="true"]),
.docdoe-workspace input:not(:disabled),
.docdoe-workspace select:not(:disabled),
.docdoe-workspace textarea:not(:disabled),
.docdoe-workspace label[for],
.docdoe-workspace summary {
  pointer-events: auto;
}

.docdoe-workspace button:disabled,
.docdoe-workspace [aria-disabled="true"] {
  pointer-events: none;
  cursor: not-allowed;
}

/* Decorative layers never steal clicks */
.docdoe-workspace [aria-hidden="true"]:is(.absolute, .fixed, [class*="inset-0"], [class*="inset-x-0"]) {
  pointer-events: none !important;
}

/* Premium panels: content above optional glow blobs */
.premium-panel,
.workspace-card {
  position: relative;
  z-index: 1;
}

.premium-panel > :not([aria-hidden="true"]),
.workspace-card > :not([aria-hidden="true"]) {
  position: relative;
  z-index: 2;
}

/* Minimum tap targets (WCAG) */
.docdoe-workspace button,
.docdoe-workspace a.btn-primary,
.docdoe-workspace a.btn-secondary,
.docdoe-workspace a.btn-hero,
.docdoe-workspace input:not([type="checkbox"]):not([type="radio"]),
.docdoe-workspace select {
  min-height: 44px;
}

.docdoe-workspace button.size-icon-only,
.docdoe-workspace .icon-btn-44 {
  min-height: 44px;
  min-width: 44px;
}

/* Focus visibility — white ring in workspace context */
.docdoe-workspace :focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.28);
  outline-offset: 2px;
}

/* Form controls — readable on dark */
.docdoe-workspace input,
.docdoe-workspace select,
.docdoe-workspace textarea {
  color: var(--text-primary);
}

.docdoe-workspace input::placeholder,
.docdoe-workspace textarea::placeholder {
  color: var(--text-muted);
}

.docdoe-workspace option {
  background: #0c0c0e;
  color: #f5f5f0;
}

/* Kill invisible gradient-only text in workspace */
.docdoe-workspace .bg-clip-text.text-transparent:not(.docdoe-allow-gradient-text) {
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary);
  background-image: none !important;
}

/* Page container consistency */
.docdoe-page {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* A few older source/video routes still live inside the light Student OS shell
   but use the original dark-workspace tokens in their utility classes. Keep
   those routes readable without changing the tokens used by dark standalone
   tools elsewhere in the app. */
.docdoe-student-os .legacy-light-page {
  --bg-root: #f7f7f5;
  --bg-surface: #ffffff;
  --bg-elevated: #f0f0ed;
  --bg-panel: #ffffff;
  --bg-hover: rgba(23, 24, 27, 0.045);
  --bg-active: rgba(23, 24, 27, 0.07);
  --bg-glass: rgba(255, 255, 255, 0.82);
  --bg-glass-hover: #ffffff;
  --bg-glass-strong: rgba(255, 255, 255, 0.96);
  --border-subtle: #e5e5e1;
  --border-medium: #cfcfca;
  --border-focus: #17181b;
  --text-primary: #17181b;
  --text-secondary: #45474d;
  --text-muted: #5c6170;
  --text-ghost: #747783;
  --accent-primary: #17181b;
  --accent-primary-light: rgba(23, 24, 27, 0.08);
  --accent-primary-hover: #303136;
  --accent-emerald: #147a5a;
  --glow-emerald: rgba(20, 122, 90, 0.1);
  color: var(--text-primary);
}

@media (min-width: 640px) {
  .docdoe-page {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .docdoe-page {
    padding-inline: 2rem;
  }
}

/* ── Mobile responsiveness utilities ── */

/* Ensure all select elements stay within parent on mobile */
select {
  max-width: 100%;
}

/* Prevent long text from causing overflow in cards */
.docdoe-page h1,
.docdoe-page h2,
.docdoe-page h3,
.docdoe-page h4 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Consistent min tap target for interactive elements */
.docdoe-page button:not([aria-hidden]),
.docdoe-page a[href] {
  min-height: 36px;
}

/* Prevent video from overflowing on small screens */
.docdoe-page video {
  max-width: 100%;
  height: auto;
}

/* Scrollable chip rows shouldn't overflow parent */
.docdoe-page .overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.docdoe-page .overflow-x-auto::-webkit-scrollbar {
  display: none;
}

/* ── Knowledge brain /home workspace ── */

.kb-workspace {
  --kb-surface: rgba(255, 255, 255, 0.028);
  --kb-border: rgba(255, 255, 255, 0.085);
}

.kb-composer-hero {
  box-shadow:
    0 22px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.03);
}

.kb-composer-hero:focus-within {
  box-shadow:
    0 26px 90px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.kb-composer-dock {
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28);
}

.kb-empty-scroll,
.kb-thread-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

@keyframes kb-empty-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kb-empty-enter {
  animation: kb-empty-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.kb-empty-enter-d1 { animation-delay: 0.06s; }
.kb-empty-enter-d2 { animation-delay: 0.12s; }
.kb-empty-enter-d3 { animation-delay: 0.18s; }
.kb-empty-enter-d4 { animation-delay: 0.24s; }
.kb-empty-enter-d5 { animation-delay: 0.3s; }

.kb-quick-actions {
  scroll-snap-type: x proximity;
}

.kb-quick-actions button {
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .kb-empty-enter,
  .kb-empty-enter-d1,
  .kb-empty-enter-d2,
  .kb-empty-enter-d3,
  .kb-empty-enter-d4,
  .kb-empty-enter-d5 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}