/* ==========================================================================
   Module demo kit: the player, and the surfaces a scenario plays on.

   Shared by every demo page and limited to two kinds of thing on purpose:

   - The devices a scenario is shown on: a customer's phone, an inbox, and
     MareCraftAI's own dashboard. These look the same whichever business is
     being shown, because they are somebody's phone or the platform's product,
     not the business's brand. Depicted devices keep their physical shape
     (a phone has round corners) whatever radius the page itself uses.
   - The player's layout, and the business's own website pieces (its chat
     window, its enquiry form, its staff assistant). These take every colour,
     radius and typeface from the --k-* properties below, which each demo's
     stylesheet sets.

   Nothing here names a brand colour. A page that sets none of the --k-*
   properties renders in plain greys rather than borrowing another demo's
   identity.
   ========================================================================== */

:root{
  --k-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --k-ink: #1C1E22;
  --k-muted: #585D66;
  --k-bg: #F5F6F7;
  --k-surface: #FFFFFF;
  --k-surface-2: #ECEEF1;
  --k-line: #D6DAE0;
  --k-accent: #1C1E22;
  --k-accent-ink: #FFFFFF;
  --k-radius: 8px;
  /* Buttons may round differently from cards: a brand with soft cards and
     pill buttons sets the two apart. */
  --k-radius-control: var(--k-radius);
}

[hidden]{ display: none !important; }

/* --- module layout -------------------------------------------------------- */

.k-module{
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.k-module__head{ max-width: 40rem; }
.k-module__head h2{ margin: 0; }
.k-module__summary{ margin: .8rem 0 0; color: var(--k-muted); max-width: 52ch; }

@media (min-width: 1024px){
  .k-module--a{
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    align-items: start;
  }
  .k-module--a .k-module__head{ position: sticky; top: 2rem; }
}

/* --- the player ----------------------------------------------------------- */

.k-player{ display: grid; gap: 1.1rem; min-width: 0; }

.k-tabs{ display: flex; flex-wrap: wrap; gap: .5rem; }
.k-tab,
.k-control{
  font: 500 .9375rem/1.2 var(--k-font);
  color: var(--k-ink);
  background: transparent;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-control);
  padding: .65rem 1rem;
  min-height: 44px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.k-tab:hover,
.k-control:hover{ border-color: var(--k-ink); }
.k-tab:active,
.k-control:active{ transform: translateY(1px); }
.k-tab[aria-pressed="true"]{
  background: var(--k-accent);
  border-color: var(--k-accent);
  color: var(--k-accent-ink);
}

.k-controls{ display: flex; flex-wrap: wrap; gap: .5rem; }
.k-control{ font-size: .875rem; }

.k-scenario{ display: grid; gap: 1.1rem; min-width: 0; }
.k-scenario__title{ margin: 0; font: 600 1.05rem/1.3 var(--k-font); color: var(--k-ink); }
.k-player--live .k-scenario__title{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.k-boundary{
  margin: 0;
  padding-top: .9rem;
  border-top: 1px solid var(--k-line);
  color: var(--k-muted);
  font-size: .9375rem;
  max-width: 72ch;
}
.k-boundary strong{ color: var(--k-ink); font-weight: 600; }

/* A step waiting its turn: out of sight and out of the layout, still in the
   accessibility tree so a screen reader has the whole transcript. */
.k-player--live .is-pending{
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: no-preference){
  .k-player--live .is-shown{ animation: k-arrive .28s cubic-bezier(.2,.7,.3,1) both; }
  .k-typing i{ animation: k-dot 1s infinite ease-in-out; }
  .k-typing i:nth-child(2){ animation-delay: .15s; }
  .k-typing i:nth-child(3){ animation-delay: .3s; }
}
@keyframes k-arrive{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
@keyframes k-dot{ 0%, 80%, 100%{ opacity: .3; } 40%{ opacity: 1; } }

/* --- the stage ------------------------------------------------------------ */

.k-stage{ display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.k-surface{ margin: 0; min-width: 0; flex: 1 1 18rem; display: grid; gap: .55rem; }
.k-surface.k-phone{ flex: 0 1 20rem; }
.k-surface.k-chat,
.k-surface.k-staff,
.k-surface.k-email{ flex-basis: 22rem; }
/* Wide enough to take a row of its own, so its tables are not squeezed
   beside the log. */
.k-surface.k-dashboard{ flex-basis: 40rem; }
.k-caption{ font: 600 .8125rem/1.3 var(--k-font); color: var(--k-muted); }

[data-feed]{
  position: relative;
  /* A thin bar rather than the platform default, which reads as a desktop
     window dropped inside a phone. Still there for anyone scrolling back. */
  scrollbar-width: thin;
  scrollbar-color: var(--k-line) transparent;
}
.k-thread{ scrollbar-color: #C4C7CE transparent; }

/* --- phone: somebody's own messages app ----------------------------------- */

.k-phone__body{
  --p-screen: #FFFFFF;
  --p-ink: #16171A;
  --p-muted: #5A5D65;
  --p-in: #E9EAEE;
  --p-out: #202227;
  --p-bezel: #0F1013;
  background: var(--p-screen);
  color: var(--p-ink);
  border: 9px solid var(--p-bezel);
  border-radius: 34px;
  overflow: hidden;
  font: 400 .9375rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 22px 44px -28px rgba(10, 12, 16, .55);
}
.k-phone__top{
  display: grid;
  justify-items: center;
  gap: .1rem;
  padding: .95rem .75rem .7rem;
  background: #F6F6F8;
  border-bottom: 1px solid #E2E3E7;
  text-align: center;
}
.k-phone__top strong{ font-size: .875rem; font-weight: 600; }
.k-phone__top span{ font-size: .75rem; color: var(--p-muted); }

.k-thread{
  list-style: none;
  margin: 0;
  padding: .9rem .75rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  height: 25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.k-msg{ max-width: 84%; padding: .55rem .8rem; border-radius: 18px; }
.k-msg--in{ align-self: flex-start; background: var(--p-in); border-bottom-left-radius: 6px; }
.k-msg--out{ align-self: flex-end; background: var(--p-out); color: #FFFFFF; border-bottom-right-radius: 6px; }
.k-msg__text{ margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.k-msg__foot{ margin: .45rem 0 0; font-size: .8125rem; color: var(--p-muted); }
.k-msg .k-time{ display: block; margin-top: .3rem; font-size: .6875rem; color: var(--p-muted); }
.k-msg--out .k-time{ color: #C4C6CC; }

.k-sys{ align-self: center; text-align: center; font-size: .75rem; color: var(--p-muted); padding: .2rem .5rem; }
.k-sys .k-time{ display: block; }
.k-thread .k-divider{ align-self: stretch; text-align: center; font-size: .72rem; font-weight: 600; color: var(--p-muted); margin: .35rem 0; }

.k-typing{
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  padding: .7rem .85rem;
  border-radius: 18px;
  background: #E9EAEE;
}
.k-typing i{ width: 6px; height: 6px; border-radius: 50%; background: #7D8089; }

/* --- the platform's log --------------------------------------------------- */

.k-log__list{
  list-style: none;
  margin: 0;
  padding: .95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  max-height: 27.5rem;
  overflow-y: auto;
  background: var(--k-surface-2);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  color: var(--k-ink);
  font: 400 .8125rem/1.5 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}
.k-log__item{ display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: .6rem; }
.k-log__item .k-time{ color: var(--k-muted); white-space: nowrap; }
.k-log__item:not(:has(.k-time)) span{ grid-column: 1 / -1; }

/* --- inbox: somebody's email ---------------------------------------------- */

.k-mail__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  max-height: 36rem;
  overflow-y: auto;
}
.k-mailmsg{
  background: #FFFFFF;
  color: #1D2026;
  border: 1px solid #D8DBE0;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  font: 400 .9rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.k-mailmsg__head{
  display: grid;
  gap: .15rem;
  margin: 0 0 .8rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid #E5E7EB;
  font-size: .8125rem;
}
.k-mailmsg__head div{ display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); gap: .5rem; }
.k-mailmsg__head dt{ color: #5A5E66; }
.k-mailmsg__head dd{ margin: 0; overflow-wrap: anywhere; }
.k-mailmsg__text{ margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.k-mailmsg__foot{ margin: .9rem 0 0; white-space: pre-wrap; font-size: .8125rem; color: #5A5E66; }
.k-mail__list .k-divider{ text-align: center; font: 600 .75rem/1.3 var(--k-font); color: var(--k-muted); }

/* --- the business's website chat ------------------------------------------ */

.k-chat__window,
.k-staff__window,
.k-form__window{
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  overflow: hidden;
  background: var(--k-surface);
  color: var(--k-ink);
  font: 400 .9375rem/1.5 var(--k-font);
}
.k-chat__head{ padding: .8rem 1rem; background: var(--k-accent); color: var(--k-accent-ink); font-weight: 600; }
.k-chat__list{
  list-style: none;
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  height: 25rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.k-bubble{ max-width: 86%; padding: .6rem .85rem; border-radius: calc(var(--k-radius) * .7 + 6px); white-space: pre-wrap; overflow-wrap: anywhere; }
.k-bubble--user{ align-self: flex-end; background: var(--k-accent); color: var(--k-accent-ink); }
.k-bubble--bot{ align-self: flex-start; background: var(--k-surface-2); }
.k-chat__list .k-typing,
.k-staff__list .k-typing{ background: var(--k-surface-2); }

/* --- the business's staff assistant --------------------------------------- */

.k-staff__head{ padding: .8rem 1rem; background: var(--k-ink); color: var(--k-surface); font-weight: 600; }
.k-staff__list{
  list-style: none;
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  max-height: 32rem;
  overflow-y: auto;
}
.k-staff__q,
.k-staff__a{ display: grid; gap: .4rem; }
.k-staff__who{ font-size: .75rem; font-weight: 600; color: var(--k-muted); }
.k-staff__q p{ margin: 0; font-weight: 600; }
.k-staff__a{ background: var(--k-surface-2); border-radius: var(--k-radius); padding: .85rem 1rem; }
.k-staff__a p{ margin: 0; }
.k-staff__steps{ margin: 0; padding-left: 1.3rem; display: grid; gap: .35rem; }
.k-staff__sources{ border-top: 1px solid var(--k-line); padding-top: .55rem; font-size: .8125rem; color: var(--k-muted); }
.k-staff__sources span{ font-weight: 600; }
.k-staff__sources ul{ margin: .2rem 0 0; padding-left: 1.1rem; }

/* --- the business's enquiry form ------------------------------------------ */

.k-form__head{ padding: .8rem 1rem; border-bottom: 1px solid var(--k-line); font-weight: 600; }
.k-form__body{ padding: 1rem; }
.k-form__filled,
.k-form__empty{ display: grid; gap: .8rem; }
.k-field{ display: grid; gap: .3rem; }
.k-field__label{ font-size: .8125rem; font-weight: 600; color: var(--k-muted); }
.k-field__value{
  display: block;
  min-height: 2.6rem;
  padding: .55rem .7rem;
  border: 1px solid var(--k-line);
  border-radius: calc(var(--k-radius) * .6);
  background: var(--k-bg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.k-form__button{
  justify-self: start;
  padding: .6rem 1.1rem;
  background: var(--k-accent);
  color: var(--k-accent-ink);
  border-radius: var(--k-radius-control);
  font-weight: 600;
}
.k-form__note{ margin: 0; font-size: .875rem; color: var(--k-muted); }
/* The empty form shows only while the filled one waits its turn. */
.k-form__empty{ display: none; }
.k-player--live .k-form__body:has(.k-form__filled.is-pending) .k-form__empty{ display: grid; }

/* --- MareCraftAI's own dashboard, as the owner sees it -------------------- */

.k-dash__window{
  --d-bg: #F3F5F7;
  --d-surface: #FFFFFF;
  --d-surface-2: #E9EDF1;
  --d-ink: #11161B;
  --d-ink-2: #39444E;
  --d-muted: #5C6874;
  --d-line: #D5DCE3;
  --d-line-soft: #E3E9EE;
  --d-accent: #0B6E75;
  --d-accent-wash: #E2F0F1;
  --d-good: #1F5C40;
  --d-good-wash: #E2EFE8;
  --d-warn: #8A5A16;
  --d-warn-wash: #F5EDE1;
  display: grid;
  gap: .9rem;
  padding: 1rem;
  background: var(--d-bg);
  color: var(--d-ink);
  border: 1px solid var(--d-line);
  border-radius: 10px;
  font: 400 .875rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.k-dash__head{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem; }
.k-dash__head strong{ font-size: 1.05rem; }
.k-dash__head span,
.k-dash__k,
.k-dash__window th{
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--d-muted);
}
.k-dash__head span{ font-size: .68rem; }
.k-dash__stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .6rem; }
.k-dash__stat{ display: grid; gap: .1rem; padding: .7rem .85rem; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 6px; }
.k-dash__n{ font-size: 1.4rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.k-dash__k{ font-size: .64rem; }
.k-dash__panels{ display: grid; gap: .9rem; }
.k-dash__panel h4{ margin: 0; font-size: .95rem; font-weight: 600; }
.k-dash__why{ margin: .2rem 0 .5rem; color: var(--d-muted); font-size: .8125rem; max-width: 62ch; }
.k-dash__scroll{ overflow-x: auto; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: 6px; }
.k-dash__window table{ width: 100%; border-collapse: collapse; min-width: 34rem; font-size: .8125rem; }
.k-dash__window th{ text-align: left; font-size: .62rem; font-weight: 500; padding: .55rem .7rem; border-bottom: 1px solid var(--d-line); white-space: nowrap; }
.k-dash__window td{ padding: .55rem .7rem; border-bottom: 1px solid var(--d-line-soft); color: var(--d-ink-2); vertical-align: top; }
.k-dash__window tr:last-child td{ border-bottom: 0; }
.k-dash__empty{ color: var(--d-muted); }
.k-score,
.k-pill{
  display: inline-block;
  padding: .12rem .42rem;
  border-radius: 3px;
  font: 500 .72rem/1.4 ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  white-space: nowrap;
}
.k-score--hot{ color: var(--d-good); background: var(--d-good-wash); }
.k-score--warm{ color: var(--d-warn); background: var(--d-warn-wash); }
.k-score--cool{ color: var(--d-muted); background: var(--d-surface-2); }
.k-pill--sent{ color: var(--d-good); background: var(--d-good-wash); }
.k-pill--stage{ color: var(--d-warn); background: var(--d-warn-wash); }
.k-pill--blocked,
.k-pill--plain{ color: var(--d-muted); background: var(--d-surface-2); }
.k-pill--in{ color: var(--d-accent); background: var(--d-accent-wash); }

/* --- small screens --------------------------------------------------------- */

@media (max-width: 767px){
  .k-surface.k-phone{ flex-basis: 100%; max-width: 23rem; }
  .k-thread,
  .k-chat__list{ height: 22rem; }
  .k-log__item{ grid-template-columns: 4.25rem minmax(0, 1fr); }
}