/* ==========================================================================
   میز کار دمو — پخش‌کنندهٔ ویس، متن زنده، نمای روم

   در صفحهٔ لندینگ و صفحهٔ /demo/ استفاده می‌شود.
   ========================================================================== */

.wb {
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--e-3);
  overflow: clip;
}

/* ---------------------------- نوار داستان ---------------------------- */
.wb__top {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--bw) solid var(--line);
  background: var(--surface-2);
}
.wb__label {
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  color: var(--ink-3);
  flex: none;
}

.story {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 100%;
  padding-bottom: var(--s-1);
}
.story::-webkit-scrollbar { display: none; }

.story__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-full);
  padding: 0.25rem 0.7rem;
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  color: var(--ink-2);
  white-space: nowrap;
  flex: none;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.story__no {
  width: 1.125rem;
  height: 1.125rem;
  border: var(--bw) solid currentColor;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  font-size: 0.5625rem;
  font-weight: var(--w-bold);
  flex: none;
}
.story__chip.is-done { color: var(--green); border-color: var(--green); }
.story__chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.wb__actions {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-inline-start: auto;
}

@media (min-width: 780px) {
  .story { flex: 1 1 auto; }
}

/* ---------------------------- پخش‌کننده ---------------------------- */
.player {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
  border-bottom: var(--bw) solid var(--line);
}

.player__btn {
  width: 3rem;
  height: 3rem;
  border-radius: var(--r-full);
  background: var(--red);
  color: #fff;
  border: var(--bw-2) solid var(--ink);
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: var(--e-2);
  transition: transform var(--d-fast) var(--ease);
}
.player__btn:active { transform: scale(0.94); }
.player__btn .icon { width: 1.25rem; height: 1.25rem; stroke-width: 2.2; }

.player__main { flex: 1; min-width: 0; }
.player__title {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
  flex-wrap: wrap;
}
.player__title b { font-size: var(--t-body-sm); }
.player__title span { font-size: var(--t-caption); color: var(--ink-3); font-variant-numeric: tabular-nums; }

.wave { cursor: pointer; }
.wave canvas { width: 100%; height: 2.5rem; display: block; }

/* ---------------------------- مراحل پردازش ---------------------------- */
.pipeline {
  display: flex;
  border-bottom: var(--bw) solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.pipeline::-webkit-scrollbar { display: none; }

.pipeline__step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3);
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  color: var(--ink-3);
  border-inline-start: var(--bw) solid var(--line);
  white-space: nowrap;
  min-width: 7rem;
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
.pipeline__step:first-child { border-inline-start: none; }
.pipeline__step.is-on { background: var(--ink); color: var(--paper); }
.pipeline__step.is-done { color: var(--green); }

/* ---------------------------- بدنهٔ دو ستونی ---------------------------- */
.wb__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-4);
}
@media (min-width: 1024px) {
  .wb__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* ---------------------------- پنل متن ---------------------------- */
.tpane {
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
}

.tpane__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.tpane__status { margin-inline-start: auto; font-weight: var(--w-normal); }

.livedot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-full);
  background: var(--line);
  flex: none;
  transition: background var(--d-base) var(--ease);
}
.livedot.is-rec { background: var(--red); animation: pulse 1.2s infinite; }
.livedot.is-ok { background: var(--green); }

.tpane__text {
  flex: 1;
  min-height: 11rem;
  max-height: 18rem;
  overflow-y: auto;
  font-size: var(--t-lead);
  line-height: 2.4;
  border-top: var(--bw) solid var(--line);
  padding-top: var(--s-3);
}
.tpane__ph { color: var(--ink-4); }

/* برجسته‌سازی موجودیت در متن */
.ent { border-radius: 3px; padding: 0 0.1em; transition: background var(--d-base) var(--ease); }
.ent--customer { background: var(--red-bg); box-shadow: inset 0 -2px 0 var(--red); }
.ent--money { background: var(--green-bg); box-shadow: inset 0 -2px 0 var(--green); }
.ent--time { background: var(--blue-bg); box-shadow: inset 0 -2px 0 var(--blue); }
.ent--item { background: var(--amber-bg); box-shadow: inset 0 -2px 0 var(--amber); }
.ent.is-hidden { visibility: hidden; }

.ent-key {
  display: flex;
  gap: var(--s-2) var(--s-4);
  flex-wrap: wrap;
  font-size: var(--t-caption);
  color: var(--ink-3);
  border-top: var(--bw) dashed var(--line);
  margin-top: var(--s-3);
  padding-top: var(--s-2);
}
.ent-key__item { display: inline-flex; align-items: center; gap: 0.3rem; }
.ent-key__item::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background: var(--swatch, var(--ink-4));
}

/* ---------------------------- کارت تأیید ---------------------------- */
.confirm {
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s-4);
  margin-top: var(--s-4);
  display: none;
}
.confirm.is-open { display: block; animation: pop var(--d-base) var(--ease-out); }
.confirm.is-ok { border-color: var(--green); }
.confirm.is-ok .confirm__head { color: var(--green); }

.confirm__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  color: var(--red);
}
.confirm__lines {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-3) 0;
}
.confirm__line {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-body-sm);
}
.confirm__line::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--r-full);
  background: var(--ink-4);
  flex: none;
  transform: translateY(-1px);
}
.confirm__bar {
  height: 4px;
  background: var(--paper-3);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--s-3);
}
.confirm__bar i { display: block; height: 100%; background: var(--red); width: 0; }
.confirm__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ---------------------------- ورودی دلخواه ---------------------------- */
.custom {
  margin-top: var(--s-4);
  border-top: var(--bw) solid var(--line);
  padding-top: var(--s-3);
}
.custom__label {
  font-size: var(--t-caption);
  font-weight: var(--w-semi);
  color: var(--ink-3);
  display: block;
  margin-bottom: var(--s-2);
}
.custom__row { display: flex; gap: var(--s-2); align-items: stretch; }
.custom__row .textarea { flex: 1; min-height: 3rem; font-size: var(--t-body-sm); }
.custom__samples {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-2);
}
.custom__sample {
  font-size: var(--t-caption);
  border: var(--bw) dashed var(--line);
  border-radius: var(--r-full);
  padding: 0.2rem 0.6rem;
  color: var(--ink-3);
}
@media (hover: hover) { .custom__sample:hover { border-color: var(--red); color: var(--red); } }

@media (max-width: 480px) {
  .custom__row { flex-direction: column; }
}

/* ---------------------------- نمای روم ---------------------------- */
.rv {
  border: var(--bw-2) solid var(--ink);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: clip;
  display: flex;
  flex-direction: column;
}

.rv__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  border-bottom: var(--bw-2) solid var(--ink);
  background: var(--paper-2);
  flex-wrap: wrap;
}
.rv__title b { font-size: var(--t-body); display: block; }
.rv__title span { font-size: var(--t-caption); color: var(--ink-3); }
.rv__flags { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-inline-start: auto; }

.rv__empty {
  padding: var(--s-10) var(--s-4);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-body-sm);
}

.rv__section {
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-bottom: var(--bw) solid var(--line);
}
.rv__section:last-child { border-bottom: none; }

.rv__mini {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.rv__mini .icon { color: var(--red); }

/* خلاصهٔ مالی چهار سلولی */
.rv__money {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-bottom: var(--bw-2) solid var(--ink);
}
@media (min-width: 620px) {
  .rv__money { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.rv__cell {
  padding: var(--s-3);
  border-inline-start: var(--bw) solid var(--line);
  border-top: var(--bw) solid var(--line);
  min-width: 0;
}
.rv__cell:nth-child(-n+2) { border-top: none; }
.rv__cell:nth-child(odd) { border-inline-start: none; }
@media (min-width: 620px) {
  .rv__cell { border-top: none; }
  .rv__cell:first-child { border-inline-start: none; }
  .rv__cell:nth-child(odd) { border-inline-start: var(--bw) solid var(--line); }
  .rv__cell:first-child { border-inline-start: none; }
}
.rv__cell-label { font-size: var(--t-caption); color: var(--ink-3); display: block; }
.rv__cell-value {
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.rv__cell-sub { font-size: 0.625rem; color: var(--ink-4); }
.rv__cell--due .rv__cell-value { color: var(--red); }

/* ردیف مرحله در نمای روم */
.rv__row {
  display: grid;
  grid-template-columns: 1.75rem 4.5rem minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-2) 0;
  border-top: var(--bw) dashed var(--line);
}
.rv__row:first-of-type { border-top: none; }
.rv__no {
  width: 1.5rem;
  height: 1.5rem;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  font-size: var(--t-caption);
  font-weight: var(--w-bold);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
}
.rv__amount { font-weight: var(--w-bold); font-variant-numeric: tabular-nums; font-size: var(--t-body-sm); }
.rv__amount i { font-style: normal; font-size: var(--t-caption); color: var(--ink-3); font-weight: var(--w-normal); }
.rv__note { font-size: var(--t-caption); color: var(--ink-3); margin-top: 0.1rem; }
.rv__side { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.rv__due { font-size: var(--t-caption); color: var(--blue); font-weight: var(--w-semi); white-space: nowrap; }
.rv__due--late { color: var(--amber); }
.rv__due--paid { color: var(--green); }

@media (max-width: 520px) {
  .rv__row { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .rv__amount { grid-row: 1; grid-column: 2; }
  .rv__side { grid-column: 1 / -1; justify-content: flex-start; }
}

/* خط زمانی درون نمای روم */
.rv__feed {
  max-height: 15rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.rv__event {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  border-top: var(--bw) dashed var(--line);
  align-items: baseline;
}
.rv__event:first-child { border-top: none; }
.rv__event-icon {
  width: 1.5rem;
  height: 1.5rem;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--paper);
  align-self: center;
  color: var(--ink-3);
}
.rv__event-icon .icon { width: 0.8125rem; height: 0.8125rem; }
.rv__event.is-system .rv__event-icon { border-color: var(--red); border-style: dashed; color: var(--red); }
.rv__event.is-user .rv__event-icon { border-color: var(--green); color: var(--green); }
.rv__event-title { font-size: var(--t-caption); font-weight: var(--w-semi); }
.rv__event-desc { font-size: 0.625rem; color: var(--ink-3); }
.rv__event-date { font-size: 0.625rem; color: var(--ink-4); white-space: nowrap; font-weight: var(--w-semi); }

/* جمع‌بندی روم بسته */
.rv__summary { padding: var(--s-4); display: none; }
.rv__summary.is-open { display: block; animation: pop var(--d-slow) var(--ease-out); }
.rv__stamp {
  display: inline-block;
  border: 2.5px solid var(--green);
  color: var(--green);
  font-weight: var(--w-bold);
  font-size: var(--t-body-sm);
  padding: 0.15rem 0.75rem;
  border-radius: var(--r-sm);
  transform: rotate(-4deg);
  animation: stamp 0.4s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes stamp { from { opacity: 0; transform: rotate(-4deg) scale(1.7); } }

.rv__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin: var(--s-4) 0;
}
@media (min-width: 620px) { .rv__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rv__stat {
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  background: var(--paper);
}
.rv__stat b { display: block; font-size: var(--t-body-sm); font-weight: var(--w-bold); }
.rv__stat span { font-size: 0.625rem; color: var(--ink-3); }

.credit {
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  background: var(--paper-2);
}
.credit h5 {
  font-size: var(--t-body-sm);
  margin-bottom: var(--s-2);
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.credit h5 .icon { color: var(--red); }
.credit__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t-caption);
  padding: var(--s-2) 0;
  border-top: var(--bw) dashed var(--line);
}
.credit__row span { color: var(--ink-3); }
.credit__row b { text-align: end; }
.credit__advice {
  margin-top: var(--s-3);
  border-inline-start: 2px solid var(--red);
  padding: var(--s-2) var(--s-3);
  background: var(--red-bg);
  font-size: var(--t-caption);
  border-radius: var(--r-sm);
}