/* PHALA V7 - Living Evidence Canvas */
:root {
  --deep: #32110a;
  --brown: #6b2114;
  --brown-soft: #8a3a24;
  --saffron: #e9972f;
  --gold: #d6a84d;
  --cream: #fff8ee;
  --cream-2: #fffdf8;
  --paper: #ffffff;
  --ink: #2e1a12;
  --muted: #856b5b;
  --line: rgba(106, 52, 27, 0.13);
  --line-strong: rgba(106, 52, 27, 0.22);
  --shadow: 0 18px 50px rgba(74, 31, 14, 0.10);
  --soft-shadow: 0 10px 28px rgba(74, 31, 14, 0.08);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 0%, rgba(233, 151, 47, 0.24), transparent 32%),
    radial-gradient(circle at 86% 12%, rgba(214, 168, 77, 0.18), transparent 28%),
    linear-gradient(135deg, #fff5e4 0%, #fffaf2 46%, #f8ead8 100%);
}

body { overflow: hidden; }
button, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.phala-os {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.os-header {
  width: min(1480px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.os-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}

.os-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(214, 168, 77, 0.44), 0 8px 20px rgba(80, 29, 11, 0.16);
  background: var(--deep);
}

.os-brand strong {
  display: block;
  font-size: 16px;
  letter-spacing: 0.12em;
  font-weight: 900;
}

.os-brand small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.new-session-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.74);
  color: var(--brown);
  text-decoration: none;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--soft-shadow);
}

.new-session-button span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #fff3df;
  color: var(--brown);
}

.system-alert {
  width: min(1480px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(169, 47, 34, 0.22);
  background: #fff4f0;
  color: #7d2018;
  border-radius: 18px;
  font-size: 13px;
}

.os-main {
  width: min(1480px, 100%);
  margin: 0 auto;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(380px, 0.95fr) minmax(440px, 1.05fr);
  gap: 16px;
  min-height: 0;
  overflow: hidden;
}

.conversation-shell,
.living-shell {
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.88);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  backdrop-filter: blur(18px);
}

.conversation-shell {
  display: flex;
  flex-direction: column;
}

.living-shell {
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 248, 238, 0.92));
}

.panel-header {
  height: 62px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.54);
}

.panel-title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--deep);
}

.panel-title span {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: #fff1dc;
  color: var(--brown);
  border: 1px solid rgba(214, 168, 77, 0.24);
}

.panel-title strong {
  font-weight: 850;
  letter-spacing: -0.01em;
}

.online-pill,
.last-updated {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.online-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #35a667;
  box-shadow: 0 0 0 4px rgba(53, 166, 103, 0.12);
}

.message-stream {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
  min-height: 0;
}

.message {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.message-user {
  grid-template-columns: minmax(0, 1fr) 36px;
}

.message-user .message-avatar { grid-column: 2; }
.message-user .message-content { grid-column: 1; grid-row: 1; align-items: flex-end; }

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff1dd;
  color: var(--brown);
  border: 1px solid rgba(214, 168, 77, 0.28);
  font-size: 11px;
  font-weight: 900;
}

.message-user .message-avatar {
  background: var(--brown);
  color: #fff;
  border-color: transparent;
}

.message-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}

.message-user .message-meta { justify-content: flex-end; }
.message-meta strong { color: var(--ink); font-weight: 850; }

.message-bubble {
  width: fit-content;
  max-width: min(620px, 100%);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(74, 31, 14, 0.06);
}

.message-user .message-bubble {
  margin-left: auto;
  background: linear-gradient(135deg, #6b2114, #8b341f);
  color: #fff;
  border-color: transparent;
}

.message-bubble p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.composer {
  padding: 14px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.62);
}

.composer textarea {
  width: 100%;
  resize: none;
  border: 1px solid var(--line-strong);
  outline: none;
  border-radius: 18px;
  padding: 14px 15px;
  min-height: 104px;
  max-height: 176px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.composer textarea:focus {
  border-color: rgba(214, 168, 77, 0.74);
  box-shadow: 0 0 0 4px rgba(214, 168, 77, 0.12);
}

.composer-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.voice-button,
.ghost-button,
.send-button {
  border: 0;
  border-radius: 999px;
  min-height: 40px;
  font-size: 12px;
  font-weight: 850;
}

.voice-button {
  width: 40px;
  display: grid;
  place-items: center;
  background: #fff2df;
  color: var(--brown);
  border: 1px solid rgba(214, 168, 77, 0.22);
}

.ghost-button {
  padding: 0 14px;
  background: #fff7eb;
  color: var(--brown);
  border: 1px solid var(--line);
}

.hidden-generate-button {
  display: none !important;
}

.send-button {
  margin-left: auto;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--brown), var(--brown-soft));
  color: #fff;
  box-shadow: 0 10px 22px rgba(107, 33, 20, 0.18);
}

.send-button:disabled,
.composer.is-processing .send-button {
  cursor: wait;
  color: #fff8ef;
  background: linear-gradient(135deg, #a89589, #8d7a70) !important;
  box-shadow: none !important;
  opacity: 0.78;
}

.composer.is-processing textarea {
  cursor: wait;
  background: #faf7f2 !important;
  color: #8d817a !important;
}

.send-progress-dot {
  min-width: 12px;
  letter-spacing: 2px;
  animation: phalaSendPulse 900ms ease-in-out infinite alternate;
}

@keyframes phalaSendPulse {
  from { opacity: .35; }
  to { opacity: 1; }
}

.composer-hint {
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: 11px;
}

.evidence-canvas {
  flex: 1;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.canvas-hero {
  padding: 22px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(233, 151, 47, 0.16), transparent 34%),
    linear-gradient(135deg, #ffffff, #fff7eb);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}

.canvas-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff0d8;
  color: var(--brown);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.canvas-hero h1 {
  margin: 12px 0 6px;
  font-size: clamp(23px, 2.8vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.055em;
  color: var(--deep);
}

.canvas-hero p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.canvas-card,
.mini-metric,
.compare-card,
.report-link {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px rgba(74, 31, 14, 0.06);
}

.canvas-card {
  padding: 17px;
}

.soft-card {
  background: rgba(255, 249, 240, 0.9);
}

.card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.card-topline em {
  font-style: normal;
  color: var(--brown);
  background: #fff1dc;
  border-radius: 999px;
  padding: 5px 9px;
  letter-spacing: 0;
  text-transform: none;
}

.canvas-card h2 {
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.canvas-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.evidence-list {
  display: grid;
  gap: 9px;
}

.evidence-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px;
  border: 1px solid rgba(106, 52, 27, 0.10);
  border-radius: 16px;
  background: #fffdf9;
}

.evidence-item > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff1dc;
  color: var(--brown);
  font-size: 12px;
  font-weight: 900;
}

.evidence-ready > span {
  background: #ecf8ef;
  color: #278150;
}

.evidence-running > span {
  background: #fff2dd;
  color: #b86d16;
  animation: pulse 1.5s ease-in-out infinite;
}

.evidence-waiting > span {
  background: #f6efe7;
  color: #a58a78;
}

.evidence-item strong {
  display: block;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.evidence-item p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.42;
}

.canvas-grid {
  display: grid;
  gap: 12px;
}

.canvas-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mini-metric {
  padding: 15px;
  min-height: 112px;
}

.mini-metric span,
.compare-card span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.mini-metric strong {
  display: block;
  margin-top: 10px;
  color: var(--deep);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.055em;
}

.mini-metric p,
.compare-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.comparison-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.compare-card {
  padding: 18px;
  background: #fff;
}

.compare-card strong {
  display: block;
  margin-top: 12px;
  font-size: 44px;
  line-height: 0.95;
  letter-spacing: -0.08em;
  color: var(--deep);
}

.compare-card.is-preferred {
  border-color: rgba(214, 168, 77, 0.44);
  background: linear-gradient(135deg, #fff, #fff3df);
}

.rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(106, 52, 27, 0.10);
  font-size: 13px;
}

.rating-row:first-of-type { border-top: 0; }
.rating-row span { color: var(--muted); }
.rating-row strong { color: var(--deep); }

.family-tree-card { overflow: hidden; }
.family-tree {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 10px;
}

.family-tree span,
.family-tree strong {
  min-width: 94px;
  min-height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff4e3;
  color: var(--deep);
  font-size: 13px;
  font-weight: 900;
}

.family-tree strong {
  background: var(--brown);
  color: #fff;
}

.family-tree i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(107, 33, 20, 0.2), rgba(214, 168, 77, 0.72));
  position: relative;
}

.family-tree i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgba(214, 168, 77, 0.82);
  border-right: 1px solid rgba(214, 168, 77, 0.82);
  transform: rotate(45deg);
}

.report-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  text-decoration: none;
  color: var(--brown);
  font-size: 13px;
  font-weight: 900;
  background: #fff7eb;
}

.privacy-footer {
  width: min(1480px, 100%);
  margin: 0 auto;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  padding: 0 6px 2px;
}

.privacy-footer span { margin-right: 5px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.92); opacity: 0.72; }
}

@media (max-width: 1080px) {
  body { overflow: auto; }
  .phala-os { height: auto; overflow: visible; }
  .os-main {
    grid-template-columns: 1fr;
    min-height: auto;
    overflow: visible;
  }

  .conversation-shell,
  .living-shell {
    min-height: 620px;
  }
}

@media (max-width: 720px) {
  .phala-os { padding: 10px; }
  .os-header { align-items: flex-start; }
  .new-session-button { padding: 9px 11px; font-size: 11px; }
  .os-main { gap: 10px; }
  .conversation-shell,
  .living-shell { border-radius: 22px; min-height: auto; }
  .panel-header { height: 56px; padding: 0 14px; }
  .message-stream { max-height: 58vh; padding: 14px; }
  .evidence-canvas { padding: 14px; }
  .canvas-grid.two,
  .comparison-board { grid-template-columns: 1fr; }
  .canvas-hero { padding: 18px; border-radius: 22px; }
  .canvas-hero h1 { font-size: 26px; }
  .composer { padding: 12px; }
  .composer-actions { gap: 8px; }
  .voice-button { width: 38px; }
  .send-button { padding: 0 14px; }
}

/* PHALA V8 - Foundation Mode + Living Canvas lifecycle */
.foundation-map-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 238, 0.92));
}

.foundation-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.foundation-step {
  position: relative;
  min-height: 112px;
  padding: 13px;
  border: 1px solid rgba(106, 52, 27, 0.11);
  border-radius: 18px;
  background: #fffdf9;
  overflow: hidden;
}

.foundation-step::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: rgba(106, 52, 27, 0.08);
}

.foundation-step span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f8efe4;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.foundation-step strong {
  display: block;
  margin-top: 12px;
  color: var(--deep);
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.foundation-step p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.foundation-step.ready {
  border-color: rgba(39, 129, 80, 0.22);
  background: linear-gradient(135deg, #ffffff, #f4fbf5);
}

.foundation-step.ready::after {
  background: #39a869;
}

.foundation-step.ready span {
  background: #e8f7ed;
  color: #278150;
}

.foundation-step.running {
  border-color: rgba(214, 168, 77, 0.36);
  background: linear-gradient(135deg, #ffffff, #fff5e3);
}

.foundation-step.running::after {
  background: var(--saffron);
}

.foundation-step.running span {
  background: #fff0d8;
  color: var(--brown);
  animation: pulse 1.5s ease-in-out infinite;
}

.foundation-step.waiting {
  opacity: 0.78;
}

.foundation-status-card .evidence-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.evidence-canvas[data-canvas-type="foundation_complete"] .canvas-hero {
  background:
    radial-gradient(circle at top right, rgba(233, 151, 47, 0.22), transparent 34%),
    linear-gradient(135deg, #ffffff, #fff0dc);
}

.evidence-canvas[data-canvas-type="career"] .canvas-hero,
.evidence-canvas[data-canvas-type="comparison"] .canvas-hero,
.evidence-canvas[data-canvas-type="finance"] .canvas-hero,
.evidence-canvas[data-canvas-type="family"] .canvas-hero {
  animation: canvasSceneIn 180ms ease-out both;
}

@keyframes canvasSceneIn {
  from { opacity: 0.3; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .foundation-steps,
  .foundation-status-card .evidence-list {
    grid-template-columns: 1fr;
  }
}


/* ========================================================================
   PHALA V9 - Hybrid Foundation + Living Evidence Canvas
   Reuses the stronger old onboarding feeling only before advisor mode.
   ======================================================================== */

.foundation-hero {
  background:
    radial-gradient(circle at 88% 0%, rgba(233, 151, 47, 0.18), transparent 34%),
    linear-gradient(135deg, #ffffff, #fff4e3) !important;
}

.foundation-now-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.foundation-focus-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #fff0d8;
  color: var(--brown);
  font-weight: 900;
}

.foundation-focus-copy h2,
.advisor-start-card h2 {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.16;
  letter-spacing: -0.035em;
  color: var(--deep);
}

.foundation-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 142px;
  gap: 16px;
  align-items: center;
}

.foundation-profile-list {
  border: 1px solid rgba(106, 52, 27, 0.11);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, rgba(255, 248, 238, 0.72));
}

.foundation-profile-row {
  min-height: 44px;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(106, 52, 27, 0.09);
  font-size: 12px;
}

.foundation-profile-row:last-child { border-bottom: 0; }
.foundation-profile-row span { color: var(--muted); font-weight: 800; }
.foundation-profile-row strong { color: var(--deep); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foundation-profile-row em { color: var(--muted); font-style: normal; font-weight: 900; text-align: right; }
.foundation-profile-row.has-value { background: linear-gradient(90deg, rgba(39, 129, 80, 0.07), transparent); }
.foundation-profile-row.has-value strong,
.foundation-profile-row.has-value em { color: #278150; }
.foundation-profile-row.is-next strong,
.foundation-profile-row.is-next em { color: var(--brown); }

.foundation-progress-ring {
  --progress: 0%;
  width: 132px;
  height: 132px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at center, #fff 58%, transparent 60%),
    conic-gradient(var(--saffron) var(--progress), rgba(106, 52, 27, 0.08) 0);
  box-shadow: inset 0 0 0 1px rgba(106, 52, 27, 0.08), 0 10px 22px rgba(74, 31, 14, 0.08);
}

.foundation-progress-ring div { display: grid; place-items: center; }
.foundation-progress-ring strong { color: var(--deep); font-size: 22px; line-height: 1; letter-spacing: -0.04em; }
.foundation-progress-ring span { margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 750; }

.foundation-signal-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.foundation-signal {
  min-height: 126px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(106, 52, 27, 0.10);
  background: #fffdf9;
}

.foundation-signal.active {
  border-color: rgba(214, 168, 77, 0.28);
  background: linear-gradient(180deg, #ffffff, rgba(255, 243, 223, 0.72));
}

.foundation-signal span {
  display: block;
  color: var(--brown);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.foundation-signal strong {
  display: block;
  margin-top: 9px;
  color: var(--deep);
  font-size: 17px;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.foundation-signal p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.foundation-journey-steps {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.foundation-journey-steps .foundation-step {
  min-height: 104px;
  padding: 12px 10px;
}

.foundation-complete-hero {
  background:
    radial-gradient(circle at 88% 0%, rgba(233, 151, 47, 0.22), transparent 34%),
    radial-gradient(circle at 12% 12%, rgba(39, 129, 80, 0.10), transparent 28%),
    linear-gradient(135deg, #ffffff, #fff0dc) !important;
}

.advisor-start-card {
  border-color: rgba(214, 168, 77, 0.30);
  background: linear-gradient(135deg, #ffffff, #fff5e5);
}

@media (max-width: 1180px) {
  .foundation-journey-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .foundation-now-card,
  .foundation-profile-layout { grid-template-columns: 1fr; }
  .foundation-signal-list,
  .foundation-journey-steps { grid-template-columns: 1fr; }
  .foundation-profile-row { grid-template-columns: 86px minmax(0, 1fr) 22px; }
}

/* ==========================================================================
   PHALA Foundation Complete Middle State
   Restores the strong Life Map Ready screen before Living Canvas scenes begin.
   ========================================================================== */
.life-map-ready-hero h1 {
  max-width: 760px;
}

.life-map-ready-profile-layout {
  grid-template-columns: minmax(0, 1fr) 152px;
  gap: 22px;
}

.life-map-profile-row {
  min-height: 48px;
  grid-template-columns: 132px minmax(0, 1fr) 24px;
}

.life-map-profile-row strong {
  color: #1f7f43 !important;
  white-space: normal;
  line-height: 1.2;
}

.life-map-ready-ring {
  width: 144px;
  height: 144px;
  background:
    radial-gradient(circle at center, #fff 58%, transparent 60%),
    conic-gradient(var(--saffron) 100%, rgba(106, 52, 27, 0.08) 0);
}

.life-map-ready-ring strong {
  font-size: 25px;
}

.life-map-signals-card .foundation-signal {
  border-color: rgba(31, 127, 67, 0.24);
  background: linear-gradient(180deg, #ffffff, rgba(31, 127, 67, 0.04));
}

.life-map-signals-card .foundation-signal strong {
  color: #1f7f43;
}

.life-map-signals-card .foundation-signal.ask-signal {
  border-color: rgba(233, 151, 47, 0.30);
  background: linear-gradient(180deg, #ffffff, rgba(233, 151, 47, 0.06));
}

.life-map-signals-card .foundation-signal.ask-signal strong {
  color: var(--deep);
}

.life-map-flow-card {
  padding-bottom: 18px;
}

.life-map-flow-track {
  display: grid;
  grid-template-columns: 58px 24px 58px 24px 58px 24px 58px 24px 58px 24px 58px;
  gap: 10px;
  align-items: start;
  justify-content: space-between;
  padding: 4px 4px 0;
}

.life-map-flow-step {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

.life-map-flow-step span {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #1f7f43;
  border: 1px solid rgba(31, 127, 67, 0.28);
  background: linear-gradient(180deg, #ffffff, rgba(31, 127, 67, 0.055));
  box-shadow: 0 10px 20px rgba(79, 22, 11, 0.055);
  font-size: 18px;
  font-weight: 900;
}

.life-map-flow-step span i {
  position: absolute;
  top: -4px;
  right: -3px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #25b957;
  font-size: 11px;
  font-style: normal;
  line-height: 1;
}

.life-map-flow-step.active span {
  color: #fff;
  border-color: rgba(255, 226, 163, 0.48);
  background: linear-gradient(135deg, var(--saffron), var(--brown));
  box-shadow: 0 0 0 7px rgba(233, 151, 47, 0.10), 0 16px 30px rgba(143, 29, 18, 0.20);
}

.life-map-flow-step strong {
  max-width: 72px;
  color: #1f7f43;
  font-size: 10px;
  line-height: 1.16;
  font-weight: 900;
}

.life-map-flow-step.active strong {
  color: var(--saffron-dark, #d94e12);
}

.life-map-flow-arrow {
  padding-top: 18px;
  color: rgba(106, 52, 27, 0.45);
  text-align: center;
  font-size: 20px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .life-map-flow-track {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .life-map-flow-arrow { display: none; }
}

@media (max-width: 720px) {
  .life-map-ready-profile-layout { grid-template-columns: 1fr; }
  .life-map-profile-row { grid-template-columns: 96px minmax(0, 1fr) 24px; }
  .life-map-flow-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   PHALA Journey Flow Fix - restore old horizontal Life Map journey
   ========================================================================== */
.life-map-flow-card {
  overflow: hidden !important;
  padding: 18px 20px 16px !important;
}

.life-map-flow-track {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 58px 24px 58px 24px 58px 24px 58px 24px 58px 24px 58px !important;
  gap: 10px !important;
  align-items: start !important;
  justify-content: space-between !important;
  padding: 4px 2px 0 !important;
}

.life-map-flow-step {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  gap: 7px !important;
  color: var(--muted) !important;
  text-align: center !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  min-width: 58px !important;
}

.life-map-flow-step > span {
  position: relative !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #1f7f43 !important;
  border: 1px solid rgba(31, 127, 67, 0.34) !important;
  background: linear-gradient(180deg, #ffffff, rgba(31, 127, 67, 0.055)) !important;
  box-shadow: 0 10px 20px rgba(79, 22, 11, 0.055) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.life-map-flow-step > span > i {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: #25b957 !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.life-map-flow-step > strong {
  display: block !important;
  max-width: 76px !important;
  color: #1f7f43 !important;
  font-size: 10px !important;
  line-height: 1.15 !important;
  font-weight: 900 !important;
  white-space: normal !important;
}

.life-map-flow-step.active > span {
  color: #fff !important;
  border-color: rgba(255, 226, 163, 0.48) !important;
  background: linear-gradient(135deg, var(--saffron), var(--brown)) !important;
  box-shadow: 0 0 0 7px rgba(233, 151, 47, 0.10), 0 16px 30px rgba(143, 29, 18, 0.20) !important;
}

.life-map-flow-step.active > strong {
  color: var(--saffron-dark, #d94e12) !important;
}

.life-map-flow-arrow {
  display: block !important;
  padding-top: 18px !important;
  color: rgba(106, 52, 27, 0.45) !important;
  text-align: center !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

@media (min-width: 901px) {
  .life-map-flow-track {
    grid-template-columns: 58px 24px 58px 24px 58px 24px 58px 24px 58px 24px 58px !important;
  }
  .life-map-flow-arrow {
    display: block !important;
  }
}

@media (max-width: 720px) {
  .life-map-flow-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 16px !important;
  }
  .life-map-flow-arrow {
    display: none !important;
  }
}

/* ==========================================================================
   PHALA Journey Clip Fix - keep the full six-step journey inside the card
   ========================================================================== */
.life-map-flow-card {
  overflow: visible !important;
  padding: 18px 24px 16px !important;
}

.life-map-flow-track {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 52px 16px 52px 16px 52px 16px 52px 16px 52px 16px 52px !important;
  gap: 6px !important;
  align-items: start !important;
  justify-content: space-between !important;
  padding: 4px 4px 0 !important;
  overflow: visible !important;
}

.life-map-flow-step {
  min-width: 0 !important;
  width: 52px !important;
}

.life-map-flow-step > span {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  font-size: 17px !important;
}

.life-map-flow-step > span > i {
  top: -3px !important;
  right: -3px !important;
  width: 17px !important;
  height: 17px !important;
}

.life-map-flow-step > strong {
  max-width: 58px !important;
  font-size: 9px !important;
  line-height: 1.12 !important;
}

.life-map-flow-arrow {
  width: 16px !important;
  padding-top: 17px !important;
  font-size: 18px !important;
}

@media (min-width: 901px) {
  .life-map-flow-track {
    grid-template-columns: 52px 16px 52px 16px 52px 16px 52px 16px 52px 16px 52px !important;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .life-map-flow-card {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .life-map-flow-track {
    grid-template-columns: 48px 12px 48px 12px 48px 12px 48px 12px 48px 12px 48px !important;
    gap: 5px !important;
  }
  .life-map-flow-step,
  .life-map-flow-step > span {
    width: 46px !important;
    min-width: 46px !important;
  }
  .life-map-flow-step > span {
    height: 46px !important;
    min-height: 46px !important;
  }
  .life-map-flow-arrow {
    width: 12px !important;
    font-size: 16px !important;
  }
}

/* ========================================================================== */
/* PHALA Journey Initial State Fix                                             */
/* Shows the full journey from first load, but only completed steps turn green. */
/* ========================================================================== */
.life-map-flow-step > span {
  color: rgba(106, 52, 27, 0.58) !important;
  border-color: rgba(217, 164, 65, 0.28) !important;
  background: linear-gradient(180deg, #ffffff, rgba(255, 250, 242, 0.92)) !important;
  box-shadow: 0 8px 18px rgba(79, 22, 11, 0.045) !important;
}

.life-map-flow-step > span > i {
  display: none !important;
}

.life-map-flow-step > strong {
  color: rgba(106, 52, 27, 0.72) !important;
}

.life-map-flow-step.complete > span {
  color: #1f7f43 !important;
  border-color: rgba(31, 127, 67, 0.34) !important;
  background: linear-gradient(180deg, #ffffff, rgba(31, 127, 67, 0.055)) !important;
}

.life-map-flow-step.complete > span > i {
  display: grid !important;
  background: #25b957 !important;
}

.life-map-flow-step.complete > strong {
  color: #1f7f43 !important;
}

.life-map-flow-step.active > span {
  color: #fff !important;
  border-color: rgba(255, 226, 163, 0.48) !important;
  background: linear-gradient(135deg, var(--saffron), var(--brown)) !important;
  box-shadow: 0 0 0 7px rgba(233, 151, 47, 0.10), 0 16px 30px rgba(143, 29, 18, 0.20) !important;
}

.life-map-flow-step.active > strong {
  color: var(--saffron-dark, #d94e12) !important;
}

.life-map-flow-step.active.complete > span > i {
  display: grid !important;
}

.foundation-journey-card .card-topline em {
  white-space: nowrap;
}

/* ==========================================================================
   PHALA Foundation Build Animation
   Restores the live card build sequence while /api/generate runs.
   ========================================================================== */
.foundation-build-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.foundation-signal.build-signal {
  position: relative;
  min-height: 124px;
  overflow: hidden;
}

.foundation-signal.build-signal em {
  position: absolute;
  right: 12px;
  top: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 246, 232, 0.96);
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.foundation-signal.build-signal.running {
  border-color: rgba(255, 106, 0, 0.34) !important;
  background: linear-gradient(180deg, #fffaf2, rgba(255, 106, 0, 0.055)) !important;
  box-shadow: 0 14px 30px rgba(143, 29, 18, 0.08) !important;
}

.foundation-signal.build-signal.running strong {
  color: var(--orange-600) !important;
}

.foundation-signal.build-signal.running em {
  color: var(--orange-600);
}

.foundation-signal.build-signal.complete em {
  color: #1f7f43;
}

.foundation-signal.build-signal.waiting {
  opacity: 0.66;
}

.foundation-signal.build-signal.running::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 106, 0, 0.12), var(--orange-500), rgba(255, 106, 0, 0.12));
  animation: phalaBuildSweep 1.1s ease-in-out infinite;
}

@keyframes phalaBuildSweep {
  0% { transform: translateX(-60%); opacity: 0.35; }
  50% { opacity: 1; }
  100% { transform: translateX(220%); opacity: 0.35; }
}

@media (max-width: 720px) {
  .foundation-build-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   PHALA Conversation Experience Polish
   Light user messages, typing indicator, and jump-to-latest control.
   ========================================================================== */

.conversation-shell {
  position: relative;
}

.message-user .message-avatar {
  background: #fff1dd !important;
  color: var(--brown) !important;
  border: 1px solid rgba(214, 168, 77, 0.34) !important;
  box-shadow: 0 8px 18px rgba(74, 31, 14, 0.06) !important;
}

.message-user .message-meta strong {
  color: var(--brown) !important;
}

.message-user .message-bubble {
  margin-left: auto;
  background: linear-gradient(180deg, #fff8ed, #fff2df) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(214, 168, 77, 0.32) !important;
  box-shadow: 0 8px 20px rgba(74, 31, 14, 0.07) !important;
}

.message-user .message-bubble p {
  color: var(--ink) !important;
}

.typing-bubble {
  min-width: 64px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px !important;
}

.typing-bubble span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(90, 32, 19, 0.58);
  animation: phalaTypingDot 1.15s ease-in-out infinite;
}

.typing-bubble span:nth-child(2) { animation-delay: 0.16s; }
.typing-bubble span:nth-child(3) { animation-delay: 0.32s; }

@keyframes phalaTypingDot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.36; }
  40% { transform: translateY(-4px); opacity: 1; }
}

.jump-to-latest {
  position: absolute;
  left: 50%;
  bottom: 190px;
  transform: translateX(-50%);
  z-index: 8;
  min-height: 38px;
  max-width: calc(100% - 42px);
  padding: 0 10px 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(74, 31, 14, 0.10);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  box-shadow: 0 10px 28px rgba(74, 31, 14, 0.14);
  font-size: 12px;
  font-weight: 750;
  backdrop-filter: blur(10px);
  transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.jump-to-latest[hidden] {
  display: none !important;
}

.jump-to-latest:hover {
  transform: translateX(-50%) translateY(-1px);
  box-shadow: 0 14px 34px rgba(74, 31, 14, 0.18);
}

.jump-to-latest .jump-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fffaf2;
  border: 1px solid rgba(214, 168, 77, 0.24);
  color: var(--brown);
  font-size: 16px;
  line-height: 1;
}

.jump-to-latest.has-new-message {
  background: rgba(255, 250, 242, 0.98);
  border-color: rgba(214, 168, 77, 0.28);
}

@media (max-width: 720px) {
  .jump-to-latest {
    bottom: 184px;
  }
}

/* ==========================================================================
   PHALA Conversation Readability Fix
   Formats longer PHALA replies into calm, scannable guidance blocks.
   ========================================================================== */

.message-assistant .message-bubble.formatted-reply {
  max-width: min(700px, 100%) !important;
  padding: 14px 16px !important;
}

.message-bubble.formatted-reply p {
  margin: 0 0 10px !important;
  font-size: 13.5px !important;
  line-height: 1.62 !important;
}

.message-bubble.formatted-reply p:last-child {
  margin-bottom: 0 !important;
}

.message-bubble.formatted-reply strong {
  color: var(--brown) !important;
  font-weight: 850 !important;
}

.reply-list {
  display: grid;
  gap: 6px;
  margin: 2px 0 4px;
}

.reply-list p {
  margin: 0 !important;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 246, 234, 0.74);
  border: 1px solid rgba(214, 168, 77, 0.18);
}

.reply-step-number {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  margin-right: 6px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff1dd;
  color: var(--brown);
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(214, 168, 77, 0.26);
}

/* ==========================================================================
   PHALA Typography Refinement - ChatGPT-like Reading Comfort
   Changed file: static/css/phala.css
   ========================================================================== */

:root {
  --phala-font-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --phala-text-main: #2f1b12;
  --phala-text-soft: #6f5848;
}

html,
body,
button,
textarea,
input {
  font-family: var(--phala-font-ui) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--phala-text-main) !important;
  font-weight: 400 !important;
}

.message-bubble,
.message-bubble p,
.phala-reply,
.phala-reply p,
.phala-reply li {
  font-size: 15px !important;
  line-height: 1.65 !important;
  font-weight: 400 !important;
  letter-spacing: -0.006em !important;
}

.message-user .message-bubble,
.message-user .message-bubble p {
  font-size: 15px !important;
  line-height: 1.62 !important;
  font-weight: 400 !important;
}

.message-meta,
.message-meta strong,
.message-meta span {
  font-size: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.004em !important;
}

.message-meta strong {
  font-weight: 700 !important;
}

.panel-title strong,
.os-brand strong {
  letter-spacing: -0.012em !important;
}

.panel-title strong {
  font-size: 14px !important;
  font-weight: 750 !important;
}

.os-brand strong {
  font-size: 20px !important;
  font-weight: 850 !important;
}

.os-brand small {
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.015em !important;
  text-transform: none !important;
}

.evidence-hero h2,
.foundation-hero h2,
.status-copy h2,
.canvas-title,
.foundation-title {
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
  letter-spacing: -0.035em !important;
}

.evidence-hero p,
.foundation-hero p,
.status-copy p,
.focus-copy p,
.signal-card p,
.foundation-card p,
.evidence-card p {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: var(--phala-text-soft) !important;
}

.widget-label,
.foundation-label,
.scene-label,
.signal-card span,
.evidence-card span {
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.08em !important;
}

.signal-card strong,
.foundation-card strong,
.evidence-card strong,
.profile-row strong {
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

.profile-row span,
.profile-row strong,
.composer textarea,
.composer-hint,
.send-button,
.voice-button,
.new-session-button,
.online-pill,
.last-updated {
  font-family: var(--phala-font-ui) !important;
}

.composer textarea {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  letter-spacing: -0.006em !important;
}

.composer textarea::placeholder {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #8b7a6b !important;
}

.composer-hint,
.last-updated,
.online-pill {
  font-size: 12px !important;
  font-weight: 550 !important;
}

.send-button,
.new-session-button {
  font-size: 13px !important;
  font-weight: 700 !important;
}

/* Long PHALA guidance should read like ChatGPT: open, light, and scannable. */
.message-assistant .message-bubble {
  max-width: 680px !important;
}

.message-user .message-bubble {
  max-width: 620px !important;
}


/* ===== PHALA Welcome Message Refinement =====
   First assistant message is a warm welcome card; later replies stay compact. */
.message-assistant.welcome-message .message-content {
  width: min(86%, 760px) !important;
}

.message-assistant.welcome-message .message-bubble,
.message-assistant.welcome-message .welcome-bubble {
  padding: 18px 20px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff, #fffdf9) !important;
  border: 1px solid rgba(217, 164, 65, 0.18) !important;
  box-shadow: 0 10px 26px rgba(70, 19, 7, 0.055) !important;
}

.welcome-copy p {
  margin: 0 0 8px !important;
  font-size: 15.5px !important;
  line-height: 1.58 !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: #2c160c !important;
}

.welcome-copy p:first-child {
  margin-bottom: 6px !important;
}

.welcome-copy p:last-child {
  margin-bottom: 0 !important;
  color: #4f3a2e !important;
}

.welcome-copy strong {
  font-weight: 750 !important;
}

/* Normal PHALA replies remain lighter and easier to scan. */
.message-assistant:not(.welcome-message) .message-content {
  width: min(84%, 720px) !important;
}

.message-assistant:not(.welcome-message) .message-bubble {
  padding: 13px 15px !important;
}



/* ==========================================================================
   PHALA Real Astrology Workspace
   Career right-panel evidence with visible D-chart, highlighted planets/houses.
   ========================================================================== */

.phala-guidance-card {
  border-color: rgba(214, 168, 77, .42) !important;
  background:
    radial-gradient(circle at 90% 5%, rgba(255, 181, 68, .18), transparent 42%),
    linear-gradient(180deg, #fff, rgba(255, 249, 239, .82)) !important;
}

.phala-guidance-card h2 {
  color: var(--deep);
  font-size: 24px;
  line-height: 1.12;
  margin: 4px 0 8px;
}

.phala-guidance-card p {
  color: var(--muted);
  line-height: 1.58;
}

.real-chart-card {
  overflow: hidden;
}

.real-chart-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.real-chart-tab {
  border: 1px solid rgba(214, 168, 77, .36);
  background: rgba(255, 250, 242, .78);
  color: var(--brown);
  border-radius: 14px;
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.real-chart-tab span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .04em;
  margin-top: 2px;
}

.real-chart-tab.active {
  border-color: rgba(220, 87, 14, .55);
  color: var(--accent);
  background: linear-gradient(135deg, #fff2dd, #fff);
  box-shadow: 0 10px 24px rgba(128, 48, 16, .10);
}

.real-chart-stage {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.real-north-chart {
  position: relative;
  width: 250px;
  height: 250px;
  border: 1.5px solid rgba(217, 154, 49, .82);
  border-radius: 12px;
  background:
    linear-gradient(45deg, transparent 49.5%, rgba(217,154,49,.72) 49.7%, rgba(217,154,49,.72) 50.3%, transparent 50.5%),
    linear-gradient(-45deg, transparent 49.5%, rgba(217,154,49,.72) 49.7%, rgba(217,154,49,.72) 50.3%, transparent 50.5%),
    radial-gradient(circle at 50% 50%, rgba(255, 246, 231, .9), rgba(255,255,255,.64));
  box-shadow: inset 0 0 0 9px rgba(255, 247, 233, .66), 0 18px 35px rgba(128,48,16,.08);
}

.real-chart-diamond {
  position: absolute;
  border: 1px solid rgba(217,154,49,.62);
  transform: rotate(45deg);
  pointer-events: none;
}

.real-chart-diamond.diamond-a { inset: 36px; }
.real-chart-diamond.diamond-b { inset: 72px; opacity: .75; }

.real-chart-code {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(214,168,77,.38);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--brown);
  font-size: 12px;
  letter-spacing: .08em;
}

.real-chart-planet,
.real-chart-house {
  position: absolute;
  border-radius: 999px;
  text-align: center;
  font-weight: 900;
  z-index: 3;
}

.real-chart-planet {
  min-width: 38px;
  padding: 5px 7px;
  border: 1px solid rgba(129, 55, 31, .20);
  background: rgba(255,255,255,.78);
  color: rgba(74,31,14,.62);
  font-size: 10px;
}

.real-chart-planet.glow {
  border-color: rgba(230, 91, 14, .72);
  background: linear-gradient(135deg, #fff, #ffe9bf);
  color: #8a250f;
  box-shadow: 0 0 0 4px rgba(255, 188, 72, .18), 0 8px 22px rgba(216, 93, 12, .18);
}

.real-chart-planet-1 { top: 20px; left: 103px; }
.real-chart-planet-2 { top: 82px; right: 20px; }
.real-chart-planet-3 { bottom: 46px; right: 52px; }
.real-chart-planet-4 { bottom: 20px; left: 102px; }
.real-chart-planet-5 { bottom: 66px; left: 24px; }
.real-chart-planet-6 { top: 76px; left: 30px; }
.real-chart-planet-7 { top: 112px; left: 103px; }

.real-chart-house {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: rgba(35, 137, 72, .10);
  border: 1px solid rgba(35, 137, 72, .28);
  color: #13763a;
  font-size: 9px;
}

.real-chart-house-1 { top: 14px; left: 14px; }
.real-chart-house-2 { top: 14px; right: 14px; }
.real-chart-house-3 { bottom: 14px; right: 14px; }
.real-chart-house-4 { bottom: 14px; left: 14px; }

.real-chart-side h3 {
  color: var(--deep);
  font-size: 21px;
  margin: 0 0 8px;
}

.real-chart-side p {
  color: var(--muted);
  line-height: 1.52;
  margin: 0 0 12px;
}

.real-highlight-list {
  display: grid;
  gap: 8px;
}

.real-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.real-note-row {
  border: 1px solid rgba(214, 168, 77, .22);
  border-radius: 14px;
  padding: 11px 12px;
  background: linear-gradient(180deg, #fff, rgba(255, 250, 242, .68));
}

.real-note-row span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.real-note-row strong {
  color: var(--deep);
  font-size: 13px;
  line-height: 1.35;
}

@media (max-width: 980px) {
  .real-chart-stage,
  .real-notes-grid {
    grid-template-columns: 1fr;
  }

  .real-north-chart {
    margin: 0 auto;
  }
}

/* PHALA Code-8 Step 1: real D-chart evidence tabs */
.real-chart-stage {
  display: block !important;
}

.real-chart-scene {
  display: none;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.real-chart-scene.active {
  display: grid;
}

.real-north-chart {
  width: 286px !important;
  height: 286px !important;
  overflow: hidden;
  background:
    linear-gradient(45deg, transparent 49.6%, rgba(217,154,49,.76) 49.8%, rgba(217,154,49,.76) 50.2%, transparent 50.4%),
    linear-gradient(-45deg, transparent 49.6%, rgba(217,154,49,.76) 49.8%, rgba(217,154,49,.76) 50.2%, transparent 50.4%),
    radial-gradient(circle at 50% 50%, #fffaf1, #ffffff 72%) !important;
}

.vedic-chart-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.vedic-chart-lines::before,
.vedic-chart-lines::after {
  content: "";
  position: absolute;
  inset: 42px;
  border: 1px solid rgba(217,154,49,.58);
  transform: rotate(45deg);
}

.vedic-chart-lines::after {
  inset: 82px;
  opacity: .64;
}

.vedic-house {
  position: absolute;
  z-index: 2;
  width: 72px;
  min-height: 48px;
  padding: 5px 5px 6px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, .46);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  justify-content: center;
}

.vedic-house.is-house-highlight {
  border-color: rgba(35, 137, 72, .38);
  background: rgba(235, 248, 239, .84);
  box-shadow: 0 8px 18px rgba(35, 137, 72, .10);
}

.vedic-house-label {
  color: rgba(107, 33, 20, .66);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.vedic-sign-number {
  position: absolute;
  top: 4px;
  right: 7px;
  color: rgba(107, 33, 20, .88);
  font-size: 10px;
  font-weight: 950;
}

.vedic-planets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
}

.vedic-planet {
  min-width: 24px;
  padding: 3px 5px;
  border-radius: 999px;
  border: 1px solid rgba(129, 55, 31, .16);
  background: rgba(255,255,255,.82);
  color: rgba(74,31,14,.72);
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}

.vedic-planet.is-highlight {
  border-color: rgba(230, 91, 14, .72);
  background: linear-gradient(135deg, #fff, #ffe7b8);
  color: #8a250f;
  box-shadow: 0 0 0 3px rgba(255, 188, 72, .16);
}

.vedic-empty {
  color: rgba(133, 107, 91, .42);
  font-size: 10px;
  font-weight: 800;
}

.vedic-house-1 { top: 20px; left: 107px; }
.vedic-house-2 { top: 28px; left: 31px; }
.vedic-house-3 { top: 94px; left: 18px; }
.vedic-house-4 { top: 194px; left: 31px; }
.vedic-house-5 { bottom: 19px; left: 107px; }
.vedic-house-6 { top: 194px; right: 31px; }
.vedic-house-7 { top: 94px; right: 18px; }
.vedic-house-8 { top: 28px; right: 31px; }
.vedic-house-9 { top: 73px; left: 83px; }
.vedic-house-10 { top: 73px; right: 83px; }
.vedic-house-11 { bottom: 73px; right: 83px; }
.vedic-house-12 { bottom: 73px; left: 83px; }

.chart-pending {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 900px) {
  .real-chart-scene.active {
    grid-template-columns: 1fr;
  }

  .real-north-chart {
    width: min(286px, 100%) !important;
    margin: 0 auto;
  }
}

/* PHALA Code-8 Step 2: make D1/D9/D10 chart evidence visibly active */
.real-chart-card {
  overflow: visible !important;
}

.real-chart-tabs {
  display: flex !important;
  margin-top: 4px !important;
  margin-bottom: 16px !important;
}

.real-chart-tab {
  display: inline-flex !important;
  flex-direction: column;
  align-items: flex-start;
  min-width: 82px;
}

.real-chart-scene {
  width: 100%;
}

.real-chart-scene.active {
  display: grid !important;
  grid-template-columns: 286px minmax(0, 1fr) !important;
  grid-template-areas:
    "chart side"
    "table table";
  gap: 16px !important;
}

.real-chart-visual-block { grid-area: chart; }
.real-chart-side { grid-area: side; }
.real-chart-table-wrap { grid-area: table; }

.real-chart-table-wrap {
  margin-top: 2px;
}

.real-chart-table {
  border: 1px solid rgba(214, 168, 77, .24);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.78);
}

.real-chart-table-head,
.real-chart-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr .7fr 2fr;
  gap: 8px;
  align-items: center;
}

.real-chart-table-head {
  padding: 10px 12px;
  color: var(--muted);
  background: rgba(255, 241, 220, .66);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.real-chart-table-row {
  padding: 10px 12px;
  border-top: 1px solid rgba(106, 52, 27, .09);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.real-chart-table-row b {
  color: var(--deep);
}

.real-chart-table-row.is-highlight {
  background: linear-gradient(90deg, rgba(255, 232, 190, .72), rgba(255,255,255,.38));
}

.real-chart-empty-state {
  border: 1px dashed rgba(214, 168, 77, .45);
  border-radius: 16px;
  padding: 14px;
  color: var(--muted);
  background: rgba(255, 250, 242, .64);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .real-chart-scene.active {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "chart"
      "side"
      "table";
  }

  .real-chart-table-head,
  .real-chart-table-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* PHALA Code-8 Step 3: make the chart the hero and show only career evidence */
.real-chart-card .card-topline em[data-chart-selected-label] {
  min-width: 94px;
  text-align: center;
}

.real-chart-tabs {
  gap: 10px !important;
  margin-bottom: 18px !important;
}

.real-chart-tab {
  min-width: 66px !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  letter-spacing: .01em !important;
}

.real-chart-tab span {
  display: none !important;
}

.real-chart-scene.active {
  grid-template-columns: minmax(338px, 0.95fr) minmax(190px, 0.65fr) !important;
  grid-template-areas:
    "chart side"
    "table table";
  align-items: start;
  gap: 18px !important;
}

.real-chart-visual-block {
  min-height: 348px;
  display: grid;
  place-items: center;
}

.real-north-chart {
  transform: scale(1.16);
  transform-origin: center;
  margin: 28px auto !important;
}

.real-chart-side h3 {
  font-size: 21px !important;
  line-height: 1.15 !important;
}

.real-highlight-list {
  gap: 8px !important;
}

.real-note-row strong {
  line-height: 1.35;
}

.career-focus-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.career-focus-card {
  border: 1px solid rgba(214, 168, 77, .28);
  border-radius: 16px;
  padding: 12px;
  background:
    radial-gradient(circle at top right, rgba(233,151,47,.12), transparent 46%),
    linear-gradient(180deg, #fffdf8, #fff7ea);
  min-height: 122px;
  box-shadow: 0 8px 20px rgba(74, 31, 14, .045);
}

.career-focus-card span {
  display: block;
  color: var(--deep);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -.02em;
}

.career-focus-card strong {
  display: block;
  margin-top: 7px;
  color: #7c3a24;
  font-size: 11px;
  line-height: 1.35;
}

.career-focus-card em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  color: var(--brown);
  font-size: 11px;
  font-weight: 850;
}

.career-focus-card small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.vedic-house.is-house-highlight {
  border-color: rgba(230, 91, 14, .45) !important;
  background: rgba(255, 236, 201, .92) !important;
  box-shadow: 0 10px 22px rgba(230, 91, 14, .12) !important;
}

.vedic-planet.is-highlight {
  font-size: 10px !important;
  min-width: 28px !important;
  padding: 4px 6px !important;
}

@media (max-width: 1180px) {
  .career-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .real-chart-scene.active {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "chart"
      "side"
      "table";
  }

  .real-chart-visual-block {
    min-height: 330px;
  }

  .real-north-chart {
    transform: scale(1.06);
  }

  .career-focus-grid {
    grid-template-columns: 1fr;
  }
}


/* PHALA Code-8 Step 4.4 - stable workspace visibility + one-card build flow */
.foundation-build-grid {
  grid-template-columns: 1fr !important;
}

.foundation-build-grid .single-build-signal {
  width: 100% !important;
  min-height: 118px !important;
}

.chart-workspace-section {
  overflow: visible !important;
  padding: 17px !important;
}

.chart-workspace-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 2px !important;
}

.chart-workspace-card {
  width: 100% !important;
  min-height: 122px !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  grid-template-areas:
    "icon title"
    "icon copy"
    "icon status" !important;
  gap: 4px 12px !important;
  align-items: start !important;
  border: 1px solid rgba(214, 168, 77, .28) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  text-align: left !important;
  background: linear-gradient(135deg, #fffdf8, #fff4e4) !important;
  color: var(--deep) !important;
  appearance: none !important;
}

.chart-workspace-card span {
  grid-area: icon !important;
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 15px !important;
  background: #fff0d8 !important;
  border: 1px solid rgba(214, 168, 77, .32) !important;
  color: var(--brown) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.chart-workspace-card strong {
  grid-area: title !important;
  font-size: 15px !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: -.03em !important;
}

.chart-workspace-card p {
  grid-area: copy !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.chart-workspace-card em {
  grid-area: status !important;
  width: fit-content !important;
  margin-top: 6px !important;
  padding: 5px 9px !important;
  border-radius: 999px !important;
  background: #e8f7ed !important;
  color: #1f7f43 !important;
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 950 !important;
}

.chart-workspace-card.active {
  border-color: rgba(233, 151, 47, .60) !important;
  box-shadow: 0 0 0 3px rgba(233,151,47,.10), 0 14px 30px rgba(74,31,14,.07) !important;
}

.chart-workspace-stage {
  display: block !important;
  margin-top: 14px !important;
}

.chart-workspace-preview {
  display: none !important;
  border: 1px solid rgba(214, 168, 77, .24) !important;
  border-radius: 18px !important;
  padding: 14px !important;
  background: rgba(255, 253, 248, .86) !important;
}

.chart-workspace-preview.active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 310px) !important;
  gap: 14px !important;
  align-items: center !important;
}

.chart-workspace-preview-copy h3 {
  margin: 0 0 6px !important;
  color: var(--deep) !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  letter-spacing: -.03em !important;
}

.chart-workspace-preview-copy p,
.chart-workspace-note {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.chart-workspace-note {
  margin-top: 12px !important;
}

.chart-workspace-preview .real-north-chart {
  transform: scale(.82) !important;
  transform-origin: center !important;
  margin: -18px auto !important;
}

.real-north-chart.chart-context-career .vedic-planet:not(.is-highlight) {
  opacity: .46 !important;
  filter: grayscale(.45);
}

.real-north-chart.chart-context-foundation .vedic-planet {
  opacity: 1 !important;
  filter: none !important;
  border-color: rgba(129, 55, 31, .18) !important;
  background: rgba(255,255,255,.86) !important;
  color: rgba(74,31,14,.74) !important;
  box-shadow: none !important;
}

.vedic-planet.is-selected {
  box-shadow: 0 0 0 4px rgba(233,151,47,.20), 0 10px 24px rgba(143,29,18,.20) !important;
  transform: scale(1.08) !important;
}

.career-focus-card {
  text-align: left !important;
  cursor: pointer !important;
}

.career-focus-card.active {
  border-color: rgba(233, 151, 47, .60) !important;
  box-shadow: 0 0 0 3px rgba(233,151,47,.10), 0 12px 26px rgba(74,31,14,.08) !important;
}

@media (max-width: 900px) {
  .chart-workspace-grid,
  .chart-workspace-preview.active {
    grid-template-columns: 1fr !important;
  }
}


/* PHALA Code-8 Step 4.5 - unified foundation/advisor chart workspace */
.foundation-chart-workspace-section {
  overflow: visible !important;
}

.foundation-chart-workspace-section .real-chart-stage {
  margin-top: 0 !important;
}

.foundation-chart-workspace-section .real-chart-scene.active {
  grid-template-columns: minmax(286px, 0.9fr) minmax(190px, 0.7fr) !important;
  grid-template-areas:
    "chart side"
    "table table";
  gap: 16px !important;
}

.foundation-chart-workspace-section .real-chart-visual-block {
  min-height: 300px !important;
}

.foundation-chart-workspace-section .real-north-chart {
  transform: scale(1.02) !important;
  margin: 8px auto 18px !important;
}

.foundation-chart-workspace-section .career-focus-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.foundation-chart-workspace-section .career-focus-card {
  min-height: 100px !important;
}

.foundation-chart-workspace-section .chart-workspace-note {
  margin-top: 12px !important;
}

@media (max-width: 900px) {
  .foundation-chart-workspace-section .real-chart-scene.active {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "chart"
      "side"
      "table";
  }
  .foundation-chart-workspace-section .career-focus-grid {
    grid-template-columns: 1fr !important;
  }
}

/* PHALA Code-8 Step 4.9 - interactive chart evidence */
.vedic-house {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.vedic-house:focus-visible,
.vedic-planet:focus-visible,
.career-focus-card:focus-visible {
  outline: 3px solid rgba(233, 151, 47, .34);
  outline-offset: 2px;
}

.vedic-planet {
  appearance: none;
  border: 1px solid rgba(129, 55, 31, .16);
  cursor: pointer;
  transition: transform 150ms ease, opacity 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}

.vedic-house.is-selected-house {
  border-color: rgba(233, 151, 47, .86) !important;
  background: rgba(255, 236, 201, .95) !important;
  box-shadow: 0 0 0 4px rgba(233, 151, 47, .13), 0 14px 26px rgba(143,29,18,.14) !important;
  transform: translateY(-1px);
}

.vedic-planet.is-selected {
  opacity: 1 !important;
  border-color: rgba(143, 29, 18, .78) !important;
  background: linear-gradient(135deg, #fff, #ffd989) !important;
  color: #6b2114 !important;
  box-shadow: 0 0 0 4px rgba(233,151,47,.22), 0 12px 26px rgba(143,29,18,.22) !important;
  transform: scale(1.12) !important;
  z-index: 8;
}

.real-chart-inspector {
  margin-top: 10px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(214, 168, 77, .32);
  background:
    radial-gradient(circle at top right, rgba(233,151,47,.13), transparent 46%),
    linear-gradient(180deg, #fffdf8, #fff7ea);
  box-shadow: 0 10px 22px rgba(74, 31, 14, .055);
}

.real-chart-inspector span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.real-chart-inspector strong {
  display: block;
  margin-top: 6px;
  color: var(--deep);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.real-chart-inspector p {
  margin: 6px 0 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.real-chart-inspector b {
  color: var(--brown);
}

.chart-scene-enter {
  animation: chartSceneSoftIn 180ms ease-out both;
}

@keyframes chartSceneSoftIn {
  from { opacity: .5; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.career-focus-card.active {
  border-color: rgba(143, 29, 18, .42) !important;
  background:
    radial-gradient(circle at top right, rgba(233,151,47,.18), transparent 46%),
    linear-gradient(180deg, #fffbf4, #fff0d8) !important;
}


/* PHALA Code-8 Step 5.0 - context-aware chart emphasis */
.real-north-chart.chart-context-career .vedic-planet.is-highlight {
  opacity: 1 !important;
  filter: none !important;
}

.real-north-chart.chart-context-foundation .vedic-planet.is-selected,
.real-north-chart.chart-context-career .vedic-planet.is-selected {
  opacity: 1 !important;
  filter: none !important;
}

.career-focus-card.is-muted {
  border-color: rgba(106, 52, 27, .10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,246,240,.76)) !important;
  opacity: .64;
  box-shadow: none !important;
}

.career-focus-card.is-muted span,
.career-focus-card.is-muted strong,
.career-focus-card.is-muted em,
.career-focus-card.is-muted small {
  color: rgba(92, 74, 63, .72) !important;
}

.career-focus-card.is-evidence {
  border-color: rgba(233, 151, 47, .42) !important;
  background:
    radial-gradient(circle at top right, rgba(233,151,47,.16), transparent 46%),
    linear-gradient(180deg, #fffdf8, #fff3df) !important;
}

.career-focus-card.is-overall {
  opacity: 1 !important;
  border-color: rgba(214, 168, 77, .22) !important;
  background: linear-gradient(180deg, #fffdf9, #fff8ee) !important;
}

.overall-planet-grid .career-focus-card strong {
  color: rgba(107, 33, 20, .74) !important;
}

.career-planet-grid .career-focus-card.is-muted:hover,
.career-planet-grid .career-focus-card.is-muted.active {
  opacity: .92;
}


/* PHALA Code-8 Step 5.2 - real planet strength evidence */
.planet-strength-pill {
  display: inline-flex !important;
  width: fit-content !important;
  margin-top: 7px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 240, 216, .95) !important;
  color: var(--brown) !important;
  border: 1px solid rgba(214, 168, 77, .28) !important;
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

.career-focus-card.is-muted .planet-strength-pill {
  background: rgba(245, 240, 234, .9) !important;
  color: rgba(92, 74, 63, .72) !important;
  border-color: rgba(106, 52, 27, .10) !important;
}

.career-focus-card.is-evidence .planet-strength-pill,
.career-focus-card.active .planet-strength-pill {
  background: #fff0d8 !important;
  color: #7c2616 !important;
  border-color: rgba(233, 151, 47, .36) !important;
}

/* PHALA Code-8 Step 5.4: real technical evidence readability */
.real-note-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.real-note-list li {
  position: relative;
  padding-left: 12px;
  color: var(--deep);
  font-size: 12px;
  line-height: 1.38;
  font-weight: 800;
}

.real-note-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--saffron);
  font-weight: 900;
}

/* ========================================================================
   PHALA Step 5.9 - Connected Evidence Workspace
   Keeps the right panel evidence-first and connects chat references to charts.
   ======================================================================== */
.evidence-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(214, 168, 77, 0.42);
  background: linear-gradient(180deg, #fffaf1, #fff1dc);
  color: var(--brown);
  border-radius: 999px;
  padding: 1px 7px 2px;
  margin: 0 1px;
  font-size: inherit;
  line-height: 1.35;
  font-weight: 850;
  vertical-align: baseline;
  cursor: pointer;
}
.evidence-link:hover {
  border-color: rgba(107, 33, 20, 0.32);
  box-shadow: 0 4px 12px rgba(107, 33, 20, 0.10);
}

.connected-decision-summary {
  background:
    radial-gradient(circle at 90% 0%, rgba(233, 151, 47, 0.12), transparent 34%),
    linear-gradient(135deg, #ffffff, #fff7ea);
}
.decision-summary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 12px;
  align-items: stretch;
}
.decision-summary-main,
.decision-summary-score {
  border: 1px solid rgba(106, 52, 27, 0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.78);
  padding: 14px;
}
.decision-summary-main span,
.decision-summary-score span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.decision-summary-main strong {
  display: block;
  margin-top: 7px;
  color: var(--deep);
  font-size: 22px;
  line-height: 1.06;
  letter-spacing: -0.045em;
}
.decision-summary-main p {
  margin-top: 7px;
}
.decision-summary-score {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.decision-summary-score strong {
  margin-top: 8px;
  color: var(--brown);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.055em;
}
.decision-evidence-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.decision-evidence-chips button {
  border: 1px solid rgba(214, 168, 77, 0.32);
  background: #fff6e8;
  color: var(--brown);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 900;
}

.evidence-section {
  padding: 0 !important;
  overflow: hidden;
}
.evidence-section > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  cursor: pointer;
  color: var(--deep);
  font-weight: 900;
}
.evidence-section > summary::-webkit-details-marker { display: none; }
.evidence-section > summary::before {
  content: "▸";
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #fff1dc;
  color: var(--brown);
  font-size: 11px;
  transition: transform 160ms ease;
}
.evidence-section[open] > summary::before {
  transform: rotate(90deg);
}
.evidence-section > summary span {
  flex: 1;
  font-size: 13px;
  letter-spacing: -0.01em;
}
.evidence-section > summary em {
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
  color: var(--muted);
  background: #fff7eb;
  border: 1px solid rgba(106, 52, 27, 0.08);
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 850;
}
.evidence-section-body {
  padding: 0 17px 17px;
  border-top: 1px solid rgba(106, 52, 27, 0.08);
}
.evidence-section-body > p {
  padding-top: 13px;
}
.evidence-section-pulse {
  animation: evidencePulse 1.05s ease-out both;
}
@keyframes evidencePulse {
  0% { box-shadow: 0 0 0 0 rgba(233, 151, 47, 0.30), 0 10px 26px rgba(74, 31, 14, 0.06); }
  100% { box-shadow: 0 0 0 10px rgba(233, 151, 47, 0), 0 10px 26px rgba(74, 31, 14, 0.06); }
}
.connected-chart-tabs {
  padding-top: 14px;
}
.connected-chart-stage {
  padding-bottom: 4px;
}
.compact-evidence-grid {
  padding-top: 14px;
}
.connected-score-grid {
  padding-top: 14px;
}

@media (max-width: 720px) {
  .decision-summary-grid { grid-template-columns: 1fr; }
  .evidence-section > summary { align-items: flex-start; }
  .evidence-section > summary em { max-width: 48%; }
}


/* PHALA Code-8 Step 5.10 - stable collapsible evidence workspace */
.living-shell {
  min-height: 0 !important;
  overflow: hidden !important;
}

.evidence-canvas {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-bottom: 28px !important;
  scroll-behavior: smooth;
}

.evidence-section {
  display: block !important;
  overflow: visible !important;
  scroll-margin-top: 14px;
}

.evidence-section > summary {
  min-height: 56px;
  position: relative;
  user-select: none;
}

.evidence-section:not([open]) .evidence-section-body {
  display: none !important;
}

.evidence-section[open] .evidence-section-body {
  display: block !important;
  overflow: visible !important;
  padding-bottom: 20px !important;
}

.evidence-section[data-evidence-section="charts"] .evidence-section-body {
  overflow: visible !important;
}

.evidence-section[data-evidence-section="charts"] .connected-chart-stage {
  overflow: visible !important;
}

.evidence-section[data-evidence-section="charts"] .real-chart-scene.active {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "chart"
    "side"
    "table" !important;
  gap: 14px !important;
  overflow: visible !important;
}

.evidence-section[data-evidence-section="charts"] .real-chart-visual-block {
  min-height: 316px !important;
  max-width: 100% !important;
  overflow: visible !important;
  padding: 8px 0 4px !important;
}

.evidence-section[data-evidence-section="charts"] .real-north-chart {
  transform: none !important;
  width: 286px !important;
  height: 286px !important;
  max-width: calc(100vw - 96px) !important;
  margin: 0 auto !important;
}

.evidence-section[data-evidence-section="charts"] .real-chart-side {
  width: 100% !important;
}

.evidence-section[data-evidence-section="charts"] .real-highlight-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.evidence-section[data-evidence-section="charts"] .real-chart-side h3 {
  margin-top: 0 !important;
}

.evidence-section[data-evidence-section="charts"] .real-chart-table-wrap,
.evidence-section[data-evidence-section="strength"] .real-chart-table-wrap {
  overflow: visible !important;
}

.evidence-section[data-evidence-section="strength"] .career-focus-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.evidence-section[data-evidence-section="dasha"] .real-notes-grid {
  align-items: stretch !important;
}

.evidence-section[data-evidence-section="dasha"] .real-note-row {
  min-height: 0 !important;
}

@media (max-width: 720px) {
  .evidence-section[data-evidence-section="charts"] .real-highlight-list,
  .evidence-section[data-evidence-section="strength"] .career-focus-grid {
    grid-template-columns: 1fr !important;
  }
}


/* PHALA Step 5.13 - foldable unified workspace */
.phala-os {
  gap: 12px !important;
}

.os-main {
  gap: 0 !important;
  padding: 6px !important;
  border: 1px solid rgba(106, 52, 27, 0.10) !important;
  border-radius: 34px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.56), rgba(255,247,235,0.62)),
    rgba(255, 250, 242, 0.62) !important;
  box-shadow: 0 22px 54px rgba(74, 31, 14, 0.10) !important;
  position: relative;
}

.os-main::after {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: calc(48.5% + 3px);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(106,52,27,0.16), transparent);
  pointer-events: none;
}

.conversation-shell,
.living-shell {
  box-shadow: none !important;
  border-color: rgba(106, 52, 27, 0.08) !important;
  background: rgba(255, 253, 248, 0.82) !important;
  transition: width 220ms ease, opacity 220ms ease, transform 220ms ease, border-radius 220ms ease;
}

.conversation-shell {
  border-radius: 28px 0 0 28px !important;
}

.living-shell {
  border-radius: 0 28px 28px 0 !important;
  border-left: 0 !important;
}

.panel-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.phala-os.canvas-locked .os-main {
  width: min(760px, 100%) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-content: center !important;
}

.phala-os.canvas-locked .os-main::after {
  display: none !important;
}

.phala-os.canvas-locked .conversation-shell {
  border-radius: 30px !important;
  animation: phalaChatUnfold 420ms cubic-bezier(.2,.8,.2,1) both;
}

.phala-os.canvas-locked .living-shell {
  display: none !important;
}

@keyframes phalaChatUnfold {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.phala-os.canvas-unlocked .living-shell {
  animation: phalaEvidenceUnfold 360ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes phalaEvidenceUnfold {
  from { opacity: 0; transform: translateX(18px) scale(.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

.locked-evidence-card {
  min-height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  align-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #fffdf9, #fff2de);
}

.locked-evidence-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff0d8;
  color: var(--brown);
  border: 1px solid rgba(214,168,77,0.28);
  font-weight: 900;
}

.locked-evidence-card h2 {
  margin: 0;
  color: var(--deep);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.locked-evidence-card p {
  max-width: 430px;
  margin: 0 auto;
}

@media (max-width: 1080px) {
  .os-main {
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .os-main::after { display: none !important; }
  .conversation-shell,
  .living-shell {
    border-radius: 24px !important;
    border: 1px solid var(--line) !important;
  }
  .phala-os.canvas-locked .os-main { width: min(760px, 100%) !important; }
}


/* PHALA Step 5.14 - marketing backdrop + birth-detail unlock */
.phala-os {
  position: relative !important;
  isolation: isolate;
}

.os-header,
.os-main,
.privacy-footer,
.system-alert {
  position: relative;
  z-index: 3;
}

.phala-marketing-backdrop {
  position: absolute;
  inset: 84px 18px 34px;
  z-index: 1;
  pointer-events: none;
  display: grid;
  grid-template-columns: minmax(320px, .92fr) minmax(320px, 1.08fr);
  gap: 34px;
  align-items: center;
  width: min(1480px, calc(100% - 36px));
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
  opacity: .92;
  transition: opacity 280ms ease, filter 280ms ease, transform 280ms ease;
}

.marketing-copy {
  padding: 28px 34px;
  color: var(--deep);
}

.marketing-kicker {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 240, 216, .86);
  color: var(--brown);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}

.marketing-copy h1 {
  margin: 16px 0 12px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(38px, 5vw, 68px);
  line-height: .94;
  letter-spacing: -.05em;
}

.marketing-copy p {
  max-width: 560px;
  margin: 0;
  color: rgba(46, 26, 18, .72);
  font-size: 17px;
  line-height: 1.65;
}

.marketing-points {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.marketing-points span {
  padding: 9px 12px;
  border: 1px solid rgba(106, 52, 27, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .54);
  color: var(--brown);
  font-size: 12px;
  font-weight: 850;
}

.marketing-device {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.mini-phone {
  width: 310px;
  min-height: 520px;
  border: 8px solid #1d1715;
  border-radius: 42px;
  padding: 26px 18px;
  background: linear-gradient(180deg, #fffaf2, #fff2df);
  box-shadow: 0 28px 70px rgba(74, 31, 14, .20);
  transform: rotate(-1deg);
}

.mini-phone-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  color: var(--brown);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .12em;
}

.mini-phone-top i {
  width: 30px;
  height: 6px;
  border-radius: 999px;
  background: var(--brown);
}

.mini-bubble {
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(106, 52, 27, .14);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.mini-bubble-phala {
  background: #fff;
  margin-right: 28px;
}

.mini-bubble-user {
  background: #fff1dd;
  margin-left: 44px;
}

.mini-evidence-card {
  position: absolute;
  right: 18px;
  top: 96px;
  width: 230px;
  display: grid;
  gap: 9px;
  padding: 18px;
  border: 1px solid rgba(214, 168, 77, .32);
  border-radius: 22px;
  background: rgba(255, 253, 248, .78);
  box-shadow: 0 18px 48px rgba(74, 31, 14, .12);
  backdrop-filter: blur(12px);
}

.mini-evidence-card strong {
  color: var(--deep);
  font-size: 16px;
}

.mini-evidence-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.phala-os.canvas-unlocked .phala-marketing-backdrop {
  opacity: .08;
  filter: blur(1px);
  transform: translateX(-50%) scale(.985);
}

.phala-os.canvas-locked .os-main {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.phala-os.canvas-locked .conversation-shell {
  box-shadow: 0 26px 70px rgba(74, 31, 14, .16) !important;
  background: rgba(255, 253, 248, .90) !important;
  backdrop-filter: blur(20px);
}

.phala-os.canvas-unlocked .os-main {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.70), rgba(255,247,235,0.78)),
    rgba(255, 250, 242, 0.82) !important;
}

@media (max-width: 1080px) {
  .phala-marketing-backdrop {
    position: fixed;
    inset: 72px 10px 20px;
    grid-template-columns: 1fr;
    overflow: hidden;
  }
  .marketing-device { display: none; }
  .marketing-copy { padding: 18px; }
  .marketing-copy h1 { font-size: 38px; }
}

@media (max-width: 720px) {
  .phala-marketing-backdrop {
    opacity: .40;
  }
  .marketing-copy p,
  .marketing-points { display: none; }
}

/* PHALA Step 5.15 - soft foldable hinge separation */
.phala-os.canvas-unlocked .os-main {
  gap: 12px !important;
  padding: 8px !important;
  border: 1px solid rgba(106, 52, 27, 0.14) !important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.70) 0%,
      rgba(255,251,245,0.82) 47%,
      rgba(232,196,145,0.22) 49%,
      rgba(128,70,38,0.10) 50%,
      rgba(232,196,145,0.22) 51%,
      rgba(255,248,238,0.86) 53%,
      rgba(255,253,248,0.72) 100%),
    rgba(255, 250, 242, 0.88) !important;
  box-shadow:
    0 24px 60px rgba(74, 31, 14, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.80) !important;
}

.phala-os.canvas-unlocked .os-main::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 50%;
  width: 14px;
  transform: translateX(-50%);
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.10),
      rgba(107,33,20,0.10) 36%,
      rgba(255,255,255,0.58) 50%,
      rgba(107,33,20,0.10) 64%,
      rgba(255,255,255,0.10));
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.72),
    inset -1px 0 0 rgba(107,33,20,0.08),
    0 0 0 1px rgba(106,52,27,0.05);
  pointer-events: none;
  z-index: 2;
}

.phala-os.canvas-unlocked .os-main::after {
  display: none !important;
}

.phala-os.canvas-unlocked .conversation-shell,
.phala-os.canvas-unlocked .living-shell {
  position: relative;
  z-index: 3;
  border: 1px solid rgba(106, 52, 27, 0.12) !important;
  background: rgba(255, 253, 248, 0.90) !important;
  box-shadow:
    0 10px 24px rgba(74, 31, 14, 0.055),
    inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

.phala-os.canvas-unlocked .conversation-shell {
  border-radius: 28px 22px 22px 28px !important;
  box-shadow:
    0 10px 24px rgba(74, 31, 14, 0.055),
    inset -16px 0 28px -28px rgba(107,33,20,0.28),
    inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

.phala-os.canvas-unlocked .living-shell {
  border-left: 1px solid rgba(106, 52, 27, 0.12) !important;
  border-radius: 22px 28px 28px 22px !important;
  box-shadow:
    0 10px 24px rgba(74, 31, 14, 0.055),
    inset 16px 0 28px -28px rgba(107,33,20,0.26),
    inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

.phala-os.canvas-unlocked .conversation-shell .panel-header,
.phala-os.canvas-unlocked .living-shell .panel-header {
  background: rgba(255,255,255,0.62) !important;
  border-bottom-color: rgba(106,52,27,0.12) !important;
}

@media (max-width: 1080px) {
  .phala-os.canvas-unlocked .os-main::before { display: none !important; }
  .phala-os.canvas-unlocked .conversation-shell,
  .phala-os.canvas-unlocked .living-shell {
    border-radius: 24px !important;
    box-shadow: 0 10px 24px rgba(74, 31, 14, 0.07) !important;
  }
}

/* PHALA Step 5.16 - ChatGPT-style first prompt before canvas unlock */
.phala-os.canvas-locked {
  justify-content: space-between;
}

.phala-os.canvas-locked .phala-marketing-backdrop {
  opacity: .94;
  filter: none;
  transform: translateX(-50%) scale(1);
}

.phala-os.canvas-locked .os-main {
  flex: 0 0 auto !important;
  width: min(720px, calc(100% - 32px)) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: auto auto 26px auto !important;
  padding: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.phala-os.canvas-locked .conversation-shell {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 28px !important;
  border: 1px solid rgba(106, 52, 27, .16) !important;
  background: rgba(255, 253, 248, .88) !important;
  box-shadow: 0 22px 60px rgba(74, 31, 14, .18) !important;
  backdrop-filter: blur(22px);
  overflow: visible !important;
}

.phala-os.canvas-locked .conversation-shell .panel-header {
  display: none !important;
}

.phala-os.canvas-locked .message-stream {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: 132px !important;
  padding: 18px 20px 4px !important;
  overflow: hidden !important;
  gap: 8px !important;
}

.phala-os.canvas-locked .message {
  grid-template-columns: 32px minmax(0, 1fr) !important;
}

.phala-os.canvas-locked .message-user,
.phala-os.canvas-locked .message:not(:first-child) {
  display: none !important;
}

.phala-os.canvas-locked .message-avatar {
  width: 32px !important;
  height: 32px !important;
}

.phala-os.canvas-locked .message-meta {
  display: none !important;
}

.phala-os.canvas-locked .message-bubble {
  max-width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.phala-os.canvas-locked .message-bubble p {
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: var(--deep) !important;
}

.phala-os.canvas-locked .composer {
  padding: 10px 16px 16px !important;
  border-top: 0 !important;
  background: transparent !important;
}

.phala-os.canvas-locked .composer textarea {
  min-height: 64px !important;
  max-height: 118px !important;
  height: 64px !important;
  border-radius: 22px !important;
  padding: 18px 130px 18px 18px !important;
  border-color: rgba(214, 168, 77, .36) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 22px rgba(74,31,14,.08) !important;
}

.phala-os.canvas-locked .composer-actions {
  position: absolute !important;
  right: 26px !important;
  bottom: 36px !important;
  margin: 0 !important;
  gap: 8px !important;
  align-items: center !important;
}

.phala-os.canvas-locked .voice-button {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  font-size: 13px !important;
}

.phala-os.canvas-locked .send-button {
  min-height: 38px !important;
  padding: 0 14px !important;
}

.phala-os.canvas-locked .composer-hint {
  margin: 8px 2px 0 !important;
  padding-left: 4px !important;
  font-size: 10px !important;
}

.phala-os.canvas-locked .jump-to-latest {
  display: none !important;
}

@media (max-width: 720px) {
  .phala-os.canvas-locked .os-main {
    width: calc(100% - 10px) !important;
    margin-bottom: 14px !important;
  }
  .phala-os.canvas-locked .message-stream {
    padding: 14px 14px 2px !important;
    max-height: 124px !important;
  }
  .phala-os.canvas-locked .composer {
    padding: 8px 12px 14px !important;
  }
  .phala-os.canvas-locked .composer textarea {
    padding-right: 112px !important;
  }
  .phala-os.canvas-locked .composer-actions {
    right: 18px !important;
    bottom: 33px !important;
  }
}


/* PHALA Step 5.17 - today's target polish: stable workspace rhythm */
.phala-os.canvas-unlocked .evidence-canvas,
.phala-os.canvas-unlocked .message-stream {
  scroll-behavior: smooth;
}

.phala-os.canvas-unlocked .living-shell,
.phala-os.canvas-unlocked .conversation-shell {
  max-height: 100%;
}

.phala-os.canvas-unlocked .living-shell .evidence-canvas {
  padding-bottom: 28px !important;
}

.phala-os.canvas-unlocked .conversation-shell .composer,
.phala-os.canvas-unlocked .living-shell .panel-header {
  flex-shrink: 0;
}

.phala-os.canvas-unlocked .evidence-section {
  scroll-margin-top: 18px;
}

.phala-os.canvas-unlocked .connected-decision-summary {
  position: relative;
  z-index: 1;
}

.phala-os.canvas-locked .conversation-shell {
  transform-origin: center bottom;
}

.phala-os.canvas-locked .marketing-copy,
.phala-os.canvas-locked .marketing-device {
  animation: phalaMarketingSettle 520ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes phalaMarketingSettle {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.phala-os.canvas-unlocked .phala-marketing-backdrop {
  pointer-events: none;
}

/* PHALA Step 5.18 - Starter only for first prompt; normal chat after any message */
.phala-os.canvas-locked.chat-open {
  justify-content: flex-start;
}

.phala-os.canvas-locked.chat-open .phala-marketing-backdrop {
  opacity: .18;
  filter: blur(1px);
  transform: translateX(-50%) scale(.985);
  pointer-events: none;
}

.phala-os.canvas-locked.chat-open .os-main {
  width: min(920px, calc(100% - 32px)) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  background: rgba(255, 253, 248, .74) !important;
  box-shadow: 0 24px 70px rgba(74,31,14,.14) !important;
}

.phala-os.canvas-locked.chat-open .conversation-shell {
  display: flex !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 30px !important;
  overflow: hidden !important;
}

.phala-os.canvas-locked.chat-open .living-shell {
  display: none !important;
}

.phala-os.canvas-locked.chat-open .conversation-shell .panel-header {
  display: flex !important;
}

.phala-os.canvas-locked.chat-open .message-stream {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 18px !important;
  overflow-y: auto !important;
  gap: 16px !important;
}

.phala-os.canvas-locked.chat-open .message,
.phala-os.canvas-locked.chat-open .message-user,
.phala-os.canvas-locked.chat-open .message:not(:first-child) {
  display: grid !important;
}

.phala-os.canvas-locked.chat-open .message-user {
  grid-template-columns: minmax(0, 1fr) 36px !important;
}

.phala-os.canvas-locked.chat-open .message-avatar {
  width: 36px !important;
  height: 36px !important;
}

.phala-os.canvas-locked.chat-open .message-meta {
  display: flex !important;
}

.phala-os.canvas-locked.chat-open .message-bubble {
  width: fit-content !important;
  max-width: min(620px, 100%) !important;
  padding: 12px 14px !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 8px 24px rgba(74,31,14,.06) !important;
}

.phala-os.canvas-locked.chat-open .message-user .message-bubble {
  margin-left: auto !important;
  background: linear-gradient(135deg, #6b2114, #8b341f) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.phala-os.canvas-locked.chat-open .message-bubble p {
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: inherit !important;
}

.phala-os.canvas-locked.chat-open .composer {
  position: relative !important;
  padding: 14px !important;
  border-top: 1px solid var(--line) !important;
  background: rgba(255,255,255,.62) !important;
}

.phala-os.canvas-locked.chat-open .composer textarea {
  min-height: 104px !important;
  max-height: 176px !important;
  height: auto !important;
  padding: 14px 15px !important;
  border-radius: 18px !important;
}

.phala-os.canvas-locked.chat-open .composer-actions {
  position: static !important;
  margin-top: 10px !important;
}

.phala-os.canvas-locked.chat-open .voice-button {
  width: 40px !important;
  height: auto !important;
  min-height: 40px !important;
}

.phala-os.canvas-locked.chat-open .send-button {
  margin-left: auto !important;
  min-height: 40px !important;
  padding: 0 16px !important;
}


/* PHALA landing-to-chat flow */
.start-journey-button {
  margin-top: 24px;
  min-height: 54px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brown), var(--brown-soft));
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 16px 34px rgba(107, 33, 20, 0.20);
}

.phala-os.landing-mode .os-main {
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px) scale(0.985);
}

.phala-os.landing-mode .conversation-shell,
.phala-os.landing-mode .living-shell {
  pointer-events: none;
}

.phala-os.chat-open .phala-marketing-backdrop {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);
}

.phala-os.chat-open .os-main {
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

/* Chart Workspace report links */
.chart-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 14px;
}

.chart-action-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(214, 168, 77, 0.36);
  border-radius: 999px;
  padding: 0 14px;
  background: linear-gradient(135deg, #fff, #fff5e6);
  color: var(--brown);
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(74, 31, 14, 0.06);
}

.chart-action-link.is-disabled { opacity: 1 !important; pointer-events: auto !important; }


/* PHALA landing CTA click fix */
.phala-marketing-backdrop {
  pointer-events: auto;
  position: relative;
  z-index: 5;
}

.marketing-copy,
.marketing-device,
.start-journey-button {
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

.start-journey-button {
  cursor: pointer;
}

.phala-os.landing-mode .os-main {
  pointer-events: none !important;
  z-index: 1;
}

.phala-os.chat-open .os-main {
  pointer-events: auto !important;
  z-index: 10;
}


/* PHALA Start Journey route behavior */
.start-journey-button {
  text-decoration: none;
}

.phala-os.landing-mode .os-main {
  display: none !important;
}

.phala-os.chat-open .os-main {
  display: grid !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.phala-os.chat-open .conversation-shell,
.phala-os.chat-open .living-shell {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.phala-os.chat-open .phala-marketing-backdrop {
  display: none !important;
}


/* PHALA FORCE ACTIVE REPORT BUTTONS */
.chart-workspace-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 12px 0 16px !important;
  position: relative !important;
  z-index: 50 !important;
  pointer-events: auto !important;
}

.chart-workspace-actions a,
.chart-action-link,
.chart-action-link:link,
.chart-action-link:visited {
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid rgba(214, 168, 77, 0.42) !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
  background: linear-gradient(135deg, #ffffff, #fff5e6) !important;
  color: var(--brown) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 18px rgba(74, 31, 14, 0.06) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.chart-action-link.is-disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.chart-action-link:hover {
  border-color: rgba(233, 151, 47, 0.75) !important;
  transform: translateY(-1px);
}