/**
 * client/styles/living-shell.css
 * Ambient underlay styles for the Living Shell.
 *
 * All visual effects here are intentionally sub-threshold — below the
 * level of conscious attention. They shift the emotional register of the
 * app without adding visual noise.
 *
 * Requires tokens: --ps-transit-wash, --ps-night-bg, --ps-underlay-opacity
 * (defaults set in tokens.css; overridden by living-shell.js at runtime)
 */

/* ────────────────────────────────────────────────────────────────────────── */
/*  Transit weather gradient                                                   */
/* ────────────────────────────────────────────────────────────────────────── */

/**
 * Renders behind all page content as a slow, circuit-tinted radial wash.
 * opacity is set via --ps-underlay-opacity (0.03 dormant / 0.08 active transit hit).
 */
.ps-page-root::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Radial wash from top-right — where the sun rises */
  background: radial-gradient(
    ellipse 80% 60% at 85% -10%,
    var(--ps-transit-wash, transparent),
    transparent 70%
  );

  opacity: var(--ps-underlay-opacity, 0.03);
  transition:
    background var(--duration-slower, 600ms) var(--ease-silk, ease),
    opacity    var(--duration-slower, 600ms) var(--ease-silk, ease);

  /* Ensure content stacks above */
  isolation: isolate;
}

/* Defense-in-depth: explicitly disable the ambient transition for users
   who prefer reduced motion. The global rule in styles/accessibility.css
   already nullifies transitions, but this local block makes intent clear
   and survives any future change to the global cascade. */
@media (prefers-reduced-motion: reduce) {
  .ps-page-root::before {
    transition: none;
  }
  .ps-page--today.ps-mode--night {
    transition: none;
  }
  .ps-page--today.ps-mode--night .ps-sub-tab:not(.ps-sub-tab--active) {
    transition: none;
  }
}

/* Push actual page content above the underlay */
.ps-page-root > * {
  position: relative;
  z-index: 1;
}

/* ────────────────────────────────────────────────────────────────────────── */
/*  Dreams / Night mode                                                        */
/* ────────────────────────────────────────────────────────────────────────── */

/**
 * Applied when the Dreams sub-tab is active inside the Today page.
 * Deepens the background to signal a shift in register — from daytime
 * awareness into the liminal space where dreams live.
 */
.ps-page--today.ps-mode--night {
  --bg: var(--ps-night-bg, #030610);
  background-color: var(--ps-night-bg, #030610);
  transition: background-color var(--duration-slow, 400ms) var(--ease-silk, ease);
}

/**
 * In night mode, de-emphasise all sub-tabs except the active one.
 */
.ps-page--today.ps-mode--night .ps-sub-tab:not(.ps-sub-tab--active) {
  opacity: 0.4;
  transition: opacity var(--duration-normal, 280ms) var(--ease-silk, ease);
}

/**
 * Dreams tab button — moon icon via CSS content.
 * Works alongside the text label.
 */
.ps-sub-tab[data-tab="dreams"]::before {
  content: '◐'; /* Unicode half-moon, universally supported */
  display: inline-block;
  margin-right: 0.35em;
  font-size: 0.85em;
  opacity: 0.75;
}

/* ────────────────────────────────────────────────────────────────────────── */
/*  Dreams tab content                                                          */
/* ────────────────────────────────────────────────────────────────────────── */

.ps-dreams-tab {
  padding: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-8, 2rem);
  animation: ps-blur-reveal var(--duration-slower, 600ms) var(--ease-silk, ease) both;
}

.ps-dreams-tab__heading {
  font-family: var(--font-serif, 'Instrument Serif', serif);
  font-size: var(--text-xl, 1.25rem);
  color: var(--color-gold-300, #e8d5a3);
  margin-bottom: var(--space-2, 0.5rem);
}

.ps-dreams-tab__intro {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-neutral-300, #d1d5db);
  line-height: 1.6;
  margin-bottom: var(--space-3, 0.75rem);
}

.ps-dreams-tab__prompt {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-neutral-400, #9ca3af);
  line-height: 1.6;
  margin-bottom: var(--space-4, 1rem);
  font-style: italic;
}

.ps-dreams-tab__input {
  width: 100%;
  box-sizing: border-box;
  min-height: 8rem;
  padding: var(--space-3, 0.75rem);
  background: var(--color-white-alpha-4, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--color-white-alpha-10, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-md, 8px);
  color: var(--color-neutral-100, #f3f4f6);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.6;
  resize: vertical;
  transition: border-color var(--duration-fast, 200ms) var(--ease-out, ease-out);
}

.ps-dreams-tab__input:focus {
  outline: none;
  border-color: var(--color-gold-500, #c9a84c);
}

.ps-dreams-tab__input::placeholder {
  color: var(--color-neutral-600, #4b5563);
}

.ps-dreams-tab__actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-3, 0.75rem);
  align-items: center;
}

.ps-dreams-tab__save {
  padding: var(--space-2, 0.5rem) var(--space-5, 1.25rem);
  background: var(--color-gold-500, #c9a84c);
  color: var(--text-inverse, var(--color-neutral-950, #05091a));
  border: none;
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--duration-fast, 200ms);
}

.ps-dreams-tab__save:hover {
  opacity: 0.85;
}

.ps-dreams-tab__save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ps-dreams-tab__status {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-neutral-400, #9ca3af);
}

/* Interpret — secondary action beside Save (folds in Dream Weaver) */
.ps-dreams-tab__interpret {
  padding: var(--space-2, 0.5rem) var(--space-5, 1.25rem);
  background: transparent;
  color: var(--color-gold-300, #e8d5a3);
  border: 1px solid var(--color-gold-500, #c9a84c);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--duration-fast, 200ms);
}

.ps-dreams-tab__interpret:hover {
  opacity: 0.85;
}

.ps-dreams-tab__interpret:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Chart-grounded interpretation output */
.ps-dreams-tab__interpretation {
  margin-top: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
  background: var(--color-white-alpha-4, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--color-gold-500-alpha, rgba(201, 168, 76, 0.25));
  border-radius: var(--radius-md, 8px);
  color: var(--color-neutral-100, #f3f4f6);
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.7;
  white-space: pre-wrap;
}

/* Recent dreams list (surfaces the dreams table) */
.ps-dreams-tab__recent-heading {
  font-family: var(--font-serif, 'Instrument Serif', serif);
  font-size: var(--text-lg, 1.125rem);
  color: var(--color-gold-300, #e8d5a3);
  margin: var(--space-6, 1.5rem) 0 var(--space-3, 0.75rem);
}

.ps-dreams-tab__recent {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.ps-dreams-tab__recent-item {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: baseline;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: var(--color-white-alpha-4, rgba(255, 255, 255, 0.04));
  border-radius: var(--radius-md, 8px);
}

.ps-dreams-tab__recent-date {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-neutral-400, #9ca3af);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ps-dreams-tab__recent-title {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-neutral-100, #f3f4f6);
}

.ps-dreams-tab__recent-empty {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-neutral-400, #9ca3af);
  font-style: italic;
}

/* ────────────────────────────────────────────────────────────────────────── */
/*  Reduced-motion overrides                                                   */
/* ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ps-page-root::before {
    transition: none;
  }
  .ps-page--today.ps-mode--night {
    transition: none;
  }
  .ps-dreams-tab {
    animation: none;
  }
}