/* Ember Chat — greeting intro, conversation feed, answer components, slash menu, toast. */

/* ---------- greeting intro (classes set in <head> before first paint) ---------- */

.intro-full [data-state="greeting"] .portrait,
.intro-full [data-state="greeting"] [data-intro-step],
.intro-full [data-state="greeting"] .chips .chip,
.intro-short [data-state="greeting"] .portrait {
  opacity: 0;
  /* Failsafe: if chat.js never runs, everything shows up after 3.5 s. */
  animation: intro-failsafe 0.01ms linear 3.5s forwards;
}
@keyframes intro-failsafe { to { opacity: 1; } }

.portrait.is-in {
  opacity: 1 !important;
  animation: none !important;
}
.intro-full .portrait,
.intro-short .portrait { transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out); transform: scale(0.94); filter: blur(6px); }
.intro-short .portrait { transition-duration: 300ms; }
.portrait.is-in { transform: none; filter: none; }

[data-intro-step].is-in,
.chips .chip.is-in {
  opacity: 1 !important;
  animation: none !important;
}
.intro-full [data-intro-step="sub"],
.intro-full .chips .chip,
.intro-full [data-intro-step="label"] {
  transform: translateY(8px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.intro-full [data-intro-step].is-in,
.intro-full .chips .chip.is-in { transform: none; }
.intro-full [data-intro-step="time"],
.intro-full [data-intro-step="composer"] { transition: opacity 300ms var(--ease-out); }

.caret::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 3px;
  vertical-align: -0.08em;
  background: var(--text);
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---------- greeting ↔ chat ---------- */

.answers-source { display: none; }
.no-js .answers-source { display: block; }

.feed {
  display: none;
  width: 100%;
  max-width: calc(var(--chat-w) + 2 * var(--space-6));
  margin: 0 auto;
  padding: var(--space-9) var(--space-6) var(--space-4);
}

[data-state="chat"] .stage { display: none; }
[data-state="chat"] .feed { display: block; flex: 1; }
[data-state="chat"] .dock__label { display: none; }
[data-state="chat"] .dock { padding-top: var(--space-4); background: var(--bg); }
/* The feed fades out above the dock instead of showing through between chips and composer. */
[data-state="chat"] .dock::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: var(--space-8);
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}

.stage.is-leaving {
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  opacity: 0;
  transform: translateY(-24px) scale(0.98);
}

/* ---------- messages ---------- */

.msg { scroll-margin-top: var(--space-6); }
.msg + .msg { margin-top: var(--space-7); }
.msg--you + .msg--denis { margin-top: var(--space-6); }
.msg--denis + .msg--you { margin-top: var(--space-9); }

.msg__label { color: var(--text-subtle); }
.msg--you .msg__text {
  margin-top: var(--space-2);
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-lh);
  overflow-wrap: anywhere;
}

.msg__head { display: flex; align-items: center; gap: var(--space-3); }
.msg__avatar { position: relative; flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); }
.msg--denis.is-thinking .msg__avatar { animation: think 900ms ease-in-out infinite; }
@keyframes think {
  0%, 100% { box-shadow: 0 0 0 0 rgba(136, 8, 8, 0); }
  50% { box-shadow: var(--glow-accent); }
}

.dots { display: inline-flex; gap: 4px; margin-left: var(--space-1); }
.dots i {
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--text-subtle);
  animation: dot 900ms ease-in-out infinite;
}
.dots i:nth-child(2) { animation-delay: 150ms; }
.dots i:nth-child(3) { animation-delay: 300ms; }
@keyframes dot { 50% { opacity: 0.2; transform: translateY(-2px); } }

.msg__body { margin-top: var(--space-4); }

/* Entrance: messages rise in; answer blocks cascade with a 60 ms step (delay set inline by JS). */
.is-entering { animation: rise 240ms var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.msg.is-highlight { animation: highlight 1.4s var(--ease-out); border-radius: var(--radius-lg); }
@keyframes highlight {
  0%, 30% { background: var(--accent-soft); box-shadow: 0 0 0 12px var(--accent-soft); }
  100% { background: transparent; box-shadow: 0 0 0 12px transparent; }
}

.copy-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px; /* WCAG 2.5.8 target size */
  margin-top: var(--space-4);
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--text-subtle);
}
.copy-link:hover { color: var(--text-muted); }

/* ---------- answer content (core blocks + theme styles) ---------- */

.answer__body,
.msg__body { color: var(--text-muted); font-size: var(--body-size); line-height: var(--body-lh); }
.msg__body h3,
.answer__body h3 { color: var(--text); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); font-weight: 500; }
.msg__body > * + *,
.answer__body > * + * { margin-top: var(--space-4); }
.msg__body strong,
.answer__body strong { color: var(--text); font-weight: 500; }
.msg__body a:not(.btn):not(.project-card),
.answer__body a:not(.btn):not(.project-card) { color: var(--text); text-decoration: underline; text-decoration-color: var(--text-subtle); text-underline-offset: 3px; }
.msg__body a:not(.btn):not(.project-card):hover { text-decoration-color: var(--text); }

.is-style-ember-mono {
  font-family: var(--font-mono);
  font-size: var(--mono-body-size);
  line-height: var(--mono-body-lh);
  color: var(--text-muted);
}

/* About: avatar tile + intro */
.is-style-ember-about {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: var(--space-4);
}
.is-style-ember-about::before {
  content: "";
  grid-row: 1 / span 9;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--surface) url("../img/portrait-avatar-64@4x.png") center / cover;
  box-shadow: var(--elevation-1);
}
.is-style-ember-about > * { grid-column: 2; }
/* Classic themes wrap group children in .wp-block-group__inner-container. */
.is-style-ember-about > * + *,
.is-style-ember-about > .wp-block-group__inner-container > * + * { margin-top: var(--space-3); }
.is-style-ember-about .is-style-ember-mono:last-child { margin-top: var(--space-4); }

/* Card */
.is-style-ember-card {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elevation-1);
}
.is-style-ember-card > * + *,
.is-style-ember-card > .wp-block-group__inner-container > * + * { margin-top: var(--space-2); }

/* Tables: timeline and facts */
.wp-block-table { margin: 0; overflow: visible; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table td { padding: 0; border: 0; vertical-align: top; }

.is-style-ember-timeline tr {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: var(--space-6);
  row-gap: var(--space-2);
  padding: var(--space-6) 0;
  box-shadow: inset 0 1px 0 var(--divider);
}
.is-style-ember-timeline tr:last-child { box-shadow: inset 0 1px 0 var(--divider), inset 0 -1px 0 var(--divider); }
.is-style-ember-timeline td:nth-child(1) {
  grid-row: 1 / span 3;
  font-family: var(--font-mono);
  font-size: var(--mono-body-size);
  line-height: var(--body-lg-lh);
  color: var(--text-subtle);
}
.is-style-ember-timeline td:nth-child(n + 2) { grid-column: 2; }
.is-style-ember-timeline td:nth-child(2) { color: var(--text); font-weight: 500; }
.is-style-ember-timeline td:nth-child(3) { font-size: var(--body-size); line-height: var(--body-lh); }
.is-style-ember-timeline td:nth-child(4) {
  justify-self: start;
  margin-top: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--surface-raised);
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  line-height: var(--mono-label-lh);
  letter-spacing: var(--mono-label-track);
  color: var(--text-muted);
}

.is-style-ember-facts tr {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: var(--space-6);
  padding: var(--space-4) 0;
  box-shadow: inset 0 1px 0 var(--divider);
}
.is-style-ember-facts tr:last-child { box-shadow: inset 0 1px 0 var(--divider), inset 0 -1px 0 var(--divider); }
.is-style-ember-facts td:first-child {
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  line-height: var(--body-lg-lh);
  letter-spacing: var(--mono-label-track);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.is-style-ember-facts td:last-child { color: var(--text); }

/* Steps 01–05 */
.is-style-ember-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.is-style-ember-steps > li {
  position: relative;
  padding-left: 48px;
  min-height: 32px;
  counter-increment: step;
  font-size: var(--body-size);
  line-height: var(--body-lh);
}
.is-style-ember-steps > li + li { margin-top: var(--space-4); }
.is-style-ember-steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  box-shadow: var(--elevation-1);
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  color: var(--text-muted);
}
.is-style-ember-steps > li strong { display: block; margin-bottom: 2px; }

/* Tags by layer */
.is-style-ember-layer {
  margin-top: var(--space-5) !important;
  font-family: var(--font-mono);
  font-size: var(--mono-label-size);
  line-height: var(--mono-label-lh);
  letter-spacing: var(--mono-label-track);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.is-style-ember-layer + ul { margin-top: var(--space-2) !important; }
.is-style-ember-tags,
.is-style-ember-tags-muted { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.is-style-ember-tags > li,
.is-style-ember-tags-muted > li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--body-size);
  line-height: var(--body-lh);
}
.is-style-ember-tags > li { background: var(--surface-raised); box-shadow: var(--elevation-1); color: var(--text); }
.is-style-ember-tags-muted > li { box-shadow: inset 0 0 0 1px var(--edge); color: var(--text-subtle); }

/* Action buttons (contact) */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.btn--primary { background: var(--surface-inverse); color: var(--text-inverse); box-shadow: var(--elevation-1); }
.btn--primary:hover { background: var(--neutral-200); }
.btn--primary:focus-visible { box-shadow: var(--focus-ring); }

/* Project cards (/projects) */
.project-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.project-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--elevation-1);
  transition: background var(--dur-fast) var(--ease-out);
}
.project-card:hover { background: var(--surface-raised); }
.project-card:focus-visible { border-radius: var(--radius-lg); box-shadow: var(--elevation-1), var(--focus-ring); }
.project-card__cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.project-card__head { display: flex; align-items: center; gap: var(--space-2); }
.project-card__title { color: var(--text); font-weight: 500; }
.project-card__meta { overflow: hidden; color: var(--text-subtle); letter-spacing: 0.02em; text-overflow: ellipsis; white-space: nowrap; }
.project-card__hook { flex: 1; font-size: var(--body-size); line-height: var(--body-lh); }
.project-card__open { margin-top: var(--space-2); color: var(--text-muted); }
.project-card:hover .project-card__open { color: var(--text); }
.badge { padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-hover); color: var(--text); }

/* ---------- dock extras ---------- */

.dock__composer { position: relative; }

.hint {
  display: inline-flex;
  margin-bottom: var(--space-3);
  padding: 6px var(--space-3);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--secondary-fill);
  box-shadow: var(--line-edges);
  color: var(--text-muted);
  animation: rise 400ms var(--ease-out) both;
}
.hint:hover { color: var(--text); }
.hint[hidden] { display: none; }

.slash {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  left: 0;
  z-index: 6;
  max-height: min(360px, 50vh);
  padding: 6px;
  overflow-y: auto;
  border-radius: var(--radius-md);
  background: var(--glass-fill-strong), var(--popover-under);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--glass-rim), var(--elevation-3);
}
.slash[hidden] { display: none; }
.slash__item {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}
.slash__cmd { font-family: var(--font-mono); font-size: var(--mono-body-size); color: var(--text-muted); }
.slash__item[aria-selected="true"],
.slash__item:hover { background: var(--hover-fill); }
.slash__item[aria-selected="true"] .slash__cmd { color: var(--text); }
.slash__empty { padding: var(--space-3); color: var(--text-subtle); }
.slash-open .chips { visibility: hidden; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  bottom: 160px;
  left: calc(var(--shell-offset) + (100vw - var(--shell-offset)) / 2);
  z-index: 60;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--glass-fill-strong), var(--popover-under);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-rim), var(--elevation-2);
  color: var(--text);
  transform: translateX(-50%);
  animation: rise 200ms var(--ease-out) both;
}
.toast[hidden] { display: none; }

/* ---------- mobile ---------- */

@media (max-width: 767px) {
  .answer__body,
  .msg__body { font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
  .feed { padding: var(--space-6) var(--space-4) var(--space-4); }
  .is-style-ember-timeline tr,
  .is-style-ember-facts tr { grid-template-columns: minmax(0, 1fr); }
  .is-style-ember-timeline td:nth-child(1) { grid-row: auto; }
  .is-style-ember-timeline td:nth-child(n + 2) { grid-column: 1; }
  .is-style-ember-facts td:first-child { line-height: var(--mono-label-lh); margin-bottom: 4px; }
  .project-cards { grid-template-columns: minmax(0, 1fr); }
  .actions { flex-direction: column; }
  .actions .btn { width: 100%; }
  .slash__item { grid-template-columns: 96px minmax(0, 1fr); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .is-entering, .hint, .toast, .msg.is-highlight { animation: none !important; }
  .msg.is-highlight { background: var(--accent-soft); }
}