/* ============================================================================
   «طريقتك» · المسار الذكي — راكان (js/paths-ai.js)

   The inner canvas of the ai demo: a 480×360 light window holding the real
   assistant panel, one size down. Everything here is the dashboard's own
   language — the white surface, the three purples, the hairline, the panel's
   header/thread/composer, the bubbles' physical sides, and the draft card's
   rows, pill and foot. No new component and no second palette.

   Prefix `pla-`. Sizes are canvas pixels on purpose (the shell scales the whole
   canvas), so every length is written in px.

   Visibility is class-driven, never state-driven, so the markup alone renders
   step 2's settled state with no JS at all:
     .is-mic    the microphone is live (composer waveform, merchant's line not yet said)
     .is-user   the merchant's line has landed
     .is-bot    راكان's reply has landed
     .is-dots   راكان is working (typing dots)
     .is-card   the draft offer card is on
     .is-done   the merchant published: pill turns green, buttons become a line
     .is-think / .is-wait   the header's word (أفكّر / بانتظار موافقتك)
     .is-aim / .is-press    the highlight ring on «اعتمد وانشر», then the press
     .is-jump   transitions and animations off (a step's first frame commits)
   ========================================================================== */

.pla {
  --pla-brand: #5c17fd;
  --pla-deep: #331761;
  --pla-violet: #bb50f8;
  --pla-surface: #ffffff;
  --pla-sunken: #f2f0f7;
  --pla-hair: #ece9f5;
  --pla-hair2: #d3cee2;
  --pla-ink: #1b1530;
  --pla-ink2: #55516b;
  --pla-muted: #6b6680;
  --pla-soft: #ede6ff;
  --pla-ok: #11795a;
  --pla-ok-soft: #e6f4ee;
  --pla-font: "Rimaya Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
  --pla-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 320px;
  min-block-size: 260px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--pla-surface);
  box-shadow: 0 0 0 1px var(--pla-hair) inset;
  color: var(--pla-ink);
  font-family: var(--pla-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
  -webkit-font-smoothing: antialiased;
}

.pla *,
.pla *::before,
.pla *::after {
  box-sizing: border-box;
}

.pla svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* ------------------------------------------------------------------ head --- */

.pla-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-block-end: 1px solid var(--pla-hair);
  background:
    radial-gradient(120% 170% at 100% 0%, rgba(187, 80, 248, 0.14), transparent 62%),
    radial-gradient(120% 170% at 0% 0%, rgba(92, 23, 253, 0.08), transparent 56%),
    var(--pla-surface);
}

.pla-face {
  flex: none;
  inline-size: 32px;
  block-size: 32px;
  display: grid;
  place-items: center;
}
.pla-face img {
  inline-size: 32px;
  block-size: 32px;
  display: block;
}

.pla-title {
  flex: 1;
  min-inline-size: 0;
  display: grid;
}
.pla-title strong {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.pla-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pla-muted);
}
.pla-on {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: #00b259;
  flex: none;
}
.pla-st {
  display: none;
}
.pla-st-idle {
  display: inline;
}
.pla.is-mic .pla-st-idle,
.pla.is-think .pla-st-idle,
.pla.is-wait .pla-st-idle {
  display: none;
}
.pla.is-mic .pla-st-listen,
.pla.is-think .pla-st-think,
.pla.is-wait .pla-st-wait {
  display: inline;
}

.pla-tools {
  flex: none;
  display: flex;
  gap: 2px;
}
.pla-ib {
  inline-size: 28px;
  block-size: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--pla-ink2);
}
.pla-ib svg {
  inline-size: 17px;
  block-size: 17px;
}

/* ---------------------------------------------------------------- thread ---
   The chat window is a clipping box whose content is anchored to the
   composer's edge: the newest line is always the visible one, older lines run
   off the top and fade there (the mask), the way a chat reads. Anchoring is
   pure CSS, so the no-JS fragment shows the same thing JS would. */

.pla-thread {
  position: relative;
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9px);
}

.pla-scroll {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px 6px;
  /* The scroll is this translate, played the moment a block lands. */
  transform: translateY(var(--pla-shift, 0px));
  transition: transform 0.34s var(--pla-ease);
}
/* Safety net for a slot still holding an older paste of this fragment (the
   wrapper arrived with the scroll rework): the thread reads bottom-anchored
   anyway, it only loses the animated landing. */
.pla-thread:not(:has(.pla-scroll)) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px 6px;
}

/* the panel's own hello, centred over the empty thread until the line lands */
.pla-hello {
  display: none;
  position: absolute;
  inset: 0;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 8px;
  text-align: center;
  transition:
    opacity 0.26s var(--pla-ease),
    transform 0.26s var(--pla-ease);
}
.pla.is-mic .pla-hello {
  display: grid;
}
.pla-hello strong {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}
.pla-hello-robot {
  inline-size: 82px;
  block-size: 82px;
  display: block;
}
.pla.is-fading .pla-hello {
  opacity: 0;
  transform: translateY(-12px);
}

/* ------------------------------------------------------------- messages ---
   The merchant is pinned to the physical RIGHT, راكان to the LEFT — the same
   physical sides the real panel uses (assistant.css → «message sides»). */

.pla-msg {
  max-inline-size: 84%;
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.pla-user {
  align-self: flex-start; /* rtl → the right edge */
  padding: 8px 13px;
  border-radius: 16px 16px 5px 16px;
  background: var(--pla-brand);
  color: #fff;
  box-shadow: 0 8px 18px -14px rgba(51, 23, 97, 0.85);
}
.pla.is-mic .pla-user {
  display: none;
}
/* The merchant spoke: the real panel marks a spoken turn the same way. */
.pla-said {
  display: inline-flex;
  margin-inline-end: 6px;
  vertical-align: -2px;
  opacity: 0.7;
}
.pla-said svg {
  inline-size: 14px;
  block-size: 14px;
}

.pla-bot {
  display: none;
  align-self: flex-end; /* rtl → the left edge */
  padding: 8px 13px;
  border-radius: 16px 16px 16px 5px;
  background: var(--pla-surface);
  border: 1px solid var(--pla-hair);
  color: var(--pla-ink);
}
.pla.is-bot .pla-bot {
  display: block;
}

.pla-typed.is-typing::after,
.pla-btext.is-typing::after {
  content: "";
  display: inline-block;
  inline-size: 2px;
  block-size: 0.95em;
  margin-inline-start: 2px;
  vertical-align: -2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.7;
  animation: pla-blink 0.8s steps(2) infinite;
}
@keyframes pla-blink {
  50% {
    opacity: 0;
  }
}

.pla-dots {
  display: none;
  align-self: flex-end;
  gap: 4px;
  padding: 11px 12px;
  border-radius: 16px 16px 16px 5px;
  background: var(--pla-surface);
  border: 1px solid var(--pla-hair);
}
.pla.is-dots .pla-dots {
  display: inline-flex;
}
.pla-dots i {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--pla-brand);
  animation: pla-dot 1.1s ease-in-out infinite;
}
.pla-dots i:nth-child(2) {
  animation-delay: 0.15s;
  background: var(--pla-violet);
}
.pla-dots i:nth-child(3) {
  animation-delay: 0.3s;
  background: var(--pla-deep);
}
@keyframes pla-dot {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ------------------------------------------------------------ draft card --- */

.pla-card {
  display: none;
  align-self: stretch;
  position: relative;
  flex-direction: column;
  border: 1px solid var(--pla-hair);
  border-radius: 14px;
  padding: 9px 12px 8px;
  background: var(--pla-surface);
  box-shadow: 0 12px 26px -22px rgba(51, 23, 97, 0.55);
  overflow: hidden;
}
.pla.is-card .pla-card {
  display: flex;
}
/* the violet top hairline: this card is راكان's draft, not the store's live look */
.pla-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 2px;
  background: linear-gradient(90deg, var(--pla-brand), var(--pla-violet));
}

.pla-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pla-card-title {
  flex: 1;
  min-inline-size: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.pla-pill {
  display: inline-flex;
  align-items: center;
  block-size: 22px;
  padding-inline: 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.pla-pill-draft {
  background: var(--pla-soft);
  color: var(--pla-brand);
}
.pla-pill-live {
  display: none;
  background: var(--pla-ok-soft);
  color: var(--pla-ok);
}
.pla.is-done .pla-pill-draft {
  display: none;
}
.pla.is-done .pla-pill-live {
  display: inline-flex;
}

.pla-rows {
  display: grid;
  margin-block-start: 7px;
  border-radius: 10px;
  background: var(--pla-sunken);
}
.pla-row {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 8px;
  padding: 3px 10px;
  font-size: 14px;
  line-height: 1.5;
}
.pla-row + .pla-row {
  border-block-start: 1px solid var(--pla-hair);
}
.pla-row span {
  color: var(--pla-muted);
}
.pla-row b {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.pla-card-foot {
  display: flex;
  align-items: center;
  padding-block-start: 7px;
}

.pla-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pla.is-done .pla-actions {
  display: none;
}

.pla-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 32px;
  padding-inline: 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.16s var(--pla-ease);
}
.pla-btn-primary {
  position: relative;
  background: var(--pla-brand);
  color: #fff;
  box-shadow: 0 8px 18px -14px rgba(92, 23, 253, 0.95);
}
.pla-btn-ghost {
  background: var(--pla-surface);
  border-color: var(--pla-hair2);
  color: var(--pla-ink);
}

/* The merchant's press, staged: the ring finds «اعتمد وانشر» first, then the
   button gives under the finger. Only transform and opacity move. */
.pla-btn-primary::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 2px solid var(--pla-brand);
  opacity: 0;
  pointer-events: none;
}
.pla.is-aim .pla-btn-primary::after {
  opacity: 0.9;
  animation: pla-aim 1.05s ease-in-out infinite;
}
@keyframes pla-aim {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.07);
    opacity: 0.4;
  }
}
.pla.is-press .pla-btn-primary {
  transform: scale(0.95);
}

.pla-state {
  display: none;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pla-ok);
}
.pla-state svg {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
}
.pla.is-done .pla-state {
  display: flex;
}

/* -------------------------------------------------------------- composer --- */

.pla-compose {
  flex: none;
  padding: 8px 12px 12px;
  border-block-start: 1px solid var(--pla-hair);
  background: var(--pla-surface);
}

.pla-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 46px;
  padding: 5px 6px;
  border: 1.5px solid var(--pla-hair2);
  border-radius: 16px;
  background: var(--pla-surface);
  transition:
    border-color 0.2s var(--pla-ease),
    box-shadow 0.2s var(--pla-ease);
}
.pla.is-mic .pla-field {
  border-color: var(--pla-brand);
  box-shadow: 0 0 0 3px rgba(92, 23, 253, 0.13);
}

.pla-input {
  flex: 1;
  min-inline-size: 0;
  padding-inline: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pla-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Listening: the field becomes a live waveform, exactly as the real composer
   does — the merchant speaks, the mic is lit, nothing has been said yet. */
.pla-voice {
  display: none;
  flex: 1;
  min-inline-size: 0;
  align-items: center;
  gap: 9px;
  padding-inline: 6px;
}
.pla.is-mic .pla-voice {
  display: flex;
}
.pla.is-mic .pla-input {
  display: none;
}

.pla-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  block-size: 22px;
  flex: none;
}
.pla-wave i {
  inline-size: 3.5px;
  block-size: 20px;
  border-radius: 2px;
  background: var(--pla-brand);
  transform: scaleY(0.26);
  transform-origin: center;
  animation: pla-wave 0.92s ease-in-out infinite;
}
.pla-wave i:nth-child(2) {
  animation-delay: 0.1s;
  background: var(--pla-violet);
}
.pla-wave i:nth-child(3) {
  animation-delay: 0.2s;
}
.pla-wave i:nth-child(4) {
  animation-delay: 0.3s;
  background: var(--pla-violet);
}
.pla-wave i:nth-child(5) {
  animation-delay: 0.4s;
}
.pla-wave i:nth-child(6) {
  animation-delay: 0.5s;
  background: var(--pla-violet);
}
@keyframes pla-wave {
  0%,
  100% {
    transform: scaleY(0.26);
  }
  35% {
    transform: scaleY(1);
  }
  65% {
    transform: scaleY(0.5);
  }
}

.pla-vtext {
  flex: 1;
  min-inline-size: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--pla-ink2);
}
.pla-vtext em {
  font-style: normal;
  color: var(--pla-muted);
}

/* the round violet mic; it pulses while it is live */
.pla-mic {
  position: relative;
  flex: none;
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pla-brand);
  color: #fff;
}
.pla-mic svg {
  inline-size: 19px;
  block-size: 19px;
}
.pla-mic::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--pla-violet);
  opacity: 0;
}
.pla.is-mic .pla-mic::after {
  animation: pla-pulse 1.05s var(--pla-ease) infinite;
}
@keyframes pla-pulse {
  0% {
    transform: scale(0.86);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* ------------------------------------------------------- step mechanics ---
   A step's first frame commits with transitions off (js adds .is-jump for one
   turn of the layout engine), so jumping backwards never tween-fights itself. */

.pla.is-jump,
.pla.is-jump *,
.pla.is-jump *::before,
.pla.is-jump *::after {
  transition: none !important;
  animation: none !important;
}
/* A committed frame lands instantly — the smooth landing belongs to the
   choreography, never to a step's first or settled frame. */
.pla.is-jump .pla-scroll {
  transition: none;
}

/* --------------------------------------------------------------- a11y --- */

@media (prefers-reduced-motion: reduce) {
  .pla *,
  .pla *::before,
  .pla *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------ lab only ---
   The lab page (lab-paths-ai.html) only. Not part of the section: the shell
   owns `.pl-demo` / `.pl-canvas` on the real page, so these rules are scoped to
   `.pla-lab` and never reach it. */

.pla-lab {
  margin-block: 600px;
  padding: 40px 24px;
  color: var(--text);
  font-family: "Rimaya Arabic", system-ui, "Segoe UI", Tahoma, sans-serif;
}
.pla-lab h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}
.pla-lab p {
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.8;
}
.pla-lab-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 32px;
}
.pla-lab .pl-demo {
  position: relative;
  flex: none;
  inline-size: calc(480px * var(--pl-s, 1));
  block-size: calc(360px * var(--pl-s, 1));
}
.pla-lab .pl-canvas {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 480px;
  block-size: 360px;
  overflow: hidden;
  border-radius: 16px;
  background: #f6f5fb;
  transform: scale(var(--pl-s, 1));
  transform-origin: top right;
}
.pla-lab-cap {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}