/* Chat simulator (assets/ix-sim.js), design language v2: a typeset transcript. Finished state first: without JS the whole
   transcript is simply visible. Lines arrive by an opacity fade only. Type roles, boxes and the edge come from ix-skin.css. */

[data-sim] {
  --ix-sim-time: 4.5rem;
  display: grid;
  gap: var(--s-5);
  color: var(--text-1);
  font-family: var(--font-sans);
}

.ix-sim__label { margin: 0; color: var(--text-2); }
.ix-sim__label strong { color: var(--text-1); font-weight: 500; }

.ix-sim__tools { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.ix-sim__tools [hidden] { display: none; }

.ix-sim__tool {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--ix-t-fast) var(--ix-ease);
}

.ix-sim__tool:hover { color: var(--text-1); }
.ix-sim__tool:focus-visible { outline: 2px solid var(--ix-blue); outline-offset: 3px; }

.ix-sim__grid { display: grid; gap: var(--s-6); align-items: start; }

@media (min-width: 860px) {
  .ix-sim__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--s-7); }

  /* Only side by side is the height held from the start; stacked, the log grows with its messages so no empty band
     sits above the first line. */
  .is-live .ix-sim__log { min-height: clamp(320px, 56vh, 440px); }
}

/* Transcript: a ruled ledger with the time in a narrow left margin. */
.ix-sim__phone { min-width: 0; }

.ix-sim__bar {
  margin: 0 0 var(--s-3);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
}

.ix-sim__log {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ix-rule);
}

.is-live .ix-sim__log {
  max-height: clamp(320px, 56vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-bottom: 1px solid var(--ix-rule);
}

.ix-sim__log:focus-visible { outline: 2px solid var(--ix-blue); outline-offset: 3px; }

.ix-sim__msg,
.ix-sim__alert {
  position: relative;
  padding: var(--s-4) 0 var(--s-4) var(--ix-sim-time);
  border-bottom: 1px solid var(--ix-hair);
  font-size: var(--fs-body);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ix-sim__time {
  position: absolute;
  top: var(--s-4);
  left: 0;
  width: calc(var(--ix-sim-time) - var(--s-3));
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  white-space: nowrap;
  line-height: 1.5;
}

.ix-sim__who { display: block; }

.ix-sim__text { display: block; }

.ix-sim__msg--me { color: var(--text-1); }

.ix-sim__msg--bot .ix-sim__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  color: var(--text-1);
}

/* Day markers: a stronger rule with a quiet label. */
.ix-sim__msg--clock {
  padding-block: var(--s-3);
  border-top: 1px solid var(--ix-rule);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
}

.ix-sim__msg--note .ix-sim__text { color: var(--text-2); font-size: var(--fs-small); }

.ix-sim__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Dock: suggested messages and input exist only when JS runs. */
.ix-sim__dock { display: grid; gap: var(--s-3); padding-top: var(--s-5); }
.ix-sim__say { margin: 0; }
.ix-sim__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.ix-sim__chip {
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  font: inherit;
  font-size: var(--fs-small);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.ix-sim__form { display: flex; gap: var(--s-2); }

.ix-sim__field { flex: 1; min-width: 0; }

.ix-sim__field:focus-within {
  background: linear-gradient(to bottom right, color-mix(in srgb, var(--ix-blue) var(--ix-wash-on), transparent) 0%, transparent 62%);
}

.ix-sim__field:focus-within::before { opacity: 1; }

.ix-sim__input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-1);
  font: inherit;
  font-size: 1rem;
}

.ix-sim__input::placeholder { color: var(--text-3); }
.ix-sim__input:focus-visible { outline: none; }

.ix-sim__send {
  min-height: 44px;
  padding: 0 var(--s-4);
  font-family: inherit;
  cursor: pointer;
}

/* Owner side: an event log, newest last. */
.ix-sim__owner { min-width: 0; }
.ix-sim__owner h3 { margin: 0 0 var(--s-3); }

.ix-sim__empty { margin: 0 0 var(--s-3); color: var(--text-2); font-size: var(--fs-small); }

.ix-sim__alerts {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ix-rule);
}

/* The current event line is an .ix-box; keep the ledger hairline, not a full outline. */
.ix-sim__alerts > .ix-box {
  border-width: 0 0 1px;
  border-color: var(--ix-hair);
}

.ix-sim__alert-title { display: block; font-weight: 500; color: var(--text-1); }
.ix-sim__alert-meta { display: block; color: var(--text-2); font-size: var(--fs-small); }

.ix-sim__alert-detail {
  margin: var(--s-1) 0 0;
  color: var(--text-2);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.25;
}

.ix-sim__handover {
  margin: var(--s-3) 0 0;
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--ix-hair);
  list-style: none;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-2);
}

.ix-sim__handover li { padding-block: var(--s-1); }
.ix-sim__handover b { font-weight: 500; color: var(--text-1); }

@media (max-width: 639px) {
  [data-sim] { --ix-sim-time: 4.25rem; }
}

/* A new line fades in; opacity only. */
@media (prefers-reduced-motion: no-preference) {
  .ix-sim__msg.is-new,
  .ix-sim__alert.is-new { animation: ix-sim-in var(--ix-t-swap) var(--ix-ease) both; }

  .is-paused .is-new { animation-play-state: paused; }
}

@keyframes ix-sim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}