/* ============================================================================
   راكان — الاقتراحات الذكية (parts/ai.html · js/ai-sec.js)

   One bento, three tiles: the «أفكار» page as a *native* light window (no scaled
   canvas — the window is a container and rearranges itself), the voice tile, and
   the publish tile. Prefix `ra-`.

   Everything light inside the window is the dashboard's own language, re-declared
   here (§SPEC3): canvas #f6f5fb, surface #fff, line #ece9f5, ink #1b1530 /
   #6b6680, accent #5c17fd, deep #331761, soft #ede6ff. The dark tiles are the
   landing page's own cards (SPEC3 §dark cards).

   Motion is CSS only and keyed to attributes the script sets on the two mocks —
   `data-ra-ask` (idle → type → press → show) and `data-ra-voice` (idle → ask →
   reply). With no script nothing is set, and every selector below is written so
   that the *unset* state is the finished one: the whole mock reads as a still,
   complete picture. Under `prefers-reduced-motion` the script sets those two
   final states and stops.
   ========================================================================== */

.ra {
  /* The light product palette, once, for the window and its miniature. */
  --ra-canvas: #f6f5fb;
  --ra-surface: #ffffff;
  --ra-line: #ece9f5;
  --ra-hair2: #d3cee2;
  --ra-sunken: #f2f0f7;
  --ra-ink: #1b1530;
  --ra-ink2: #6b6680;
  --ra-brand: #5c17fd;
  --ra-deep: #331761;
  --ra-violet: #bb50f8;
  --ra-soft: #ede6ff;
  --ra-caret: #2a2340;
  /* The smallest text inside a mock. 12px is the desktop floor; under 1024 the
     window must stay readable at 13px or more (SPEC3 / brief). */
  --ra-mini: 12px;

  position: relative;
  padding-block: var(--sec-y);
}

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

.ra__head {
  text-align: center;
  margin-block-end: 56px;
}

.ra__title {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--white);
}

.ra__sub {
  margin: 16px auto 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.8;
  color: var(--text-2);
}

/* ------------------------------------------------------------------- grid --- */

.ra__grid {
  display: grid;
  gap: 16px;
}

/* The dark card both small tiles are made of (SPEC3). The ideas tile wears the
   same ground, because the window it holds is the section's light object. */
.ra__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 20px;
  border: 1px solid var(--hair);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
}

.ra__tile--ideas {
  gap: 14px;
}

/* Both small tiles put one object on their floor — the bubbles, the draft — so
   the two cards share a rhythm however tall the row grows. */
.ra__tile--voice,
.ra__tile--publish {
  gap: 14px;
}

/* The one highlighted card: a hairline the gradient runs through, and a glow off
   its corner. The glow is a blurred pseudo-element on the card itself — never a
   hard-edged shape inside `overflow:hidden`. */
.ra__tile--voice::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--electric), var(--violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.ra__tile--voice::after {
  content: "";
  position: absolute;
  inset-block-start: -24px;
  inset-inline-end: -14px;
  inline-size: 150px;
  block-size: 150px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 60, 255, 0.34), rgba(187, 80, 248, 0.1) 62%, transparent 78%);
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}

.ra__tile--voice > * {
  position: relative;
  z-index: 1;
}

.ra-tile__title {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
}

.ra-tile__sub {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-2);
}

/* ================================================================== window ===
   The «أفكار» page. A light app window: `direction:rtl` is explicit so the mock
   reads the same wherever it is pasted, and the window is a query container —
   every rearrangement below is decided by the window's own width, never by the
   page's. */

.ra-win {
  container-type: inline-size;
  container-name: rawin;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  direction: rtl;
  border-radius: 20px;
  background: var(--ra-canvas);
  color: var(--ra-ink);
  font-size: 13px;
  line-height: 1.6;
  box-shadow: 0 40px 90px -30px rgba(8, 0, 30, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

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

.ra-ico {
  display: block;
  inline-size: 1em;
  block-size: 1em;
  flex: none;
}

/* ---------------------------------------------------------------- top bar --- */

.ra-top {
  display: flex;
  align-items: center;
  gap: 10px;
  block-size: 46px;
  padding-inline: 14px;
  background: var(--ra-surface);
  border-block-end: 1px solid var(--ra-line);
}

.ra-top__store {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
}

.ra-top__mono {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ra-deep), var(--ra-brand));
  color: #fff;
  font-size: var(--ra-mini);
  font-weight: 700;
  line-height: 1;
}

.ra-top__name {
  font-size: var(--ra-mini);
  font-weight: 700;
  white-space: nowrap;
}

.ra-top__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  block-size: 30px;
  padding-inline: 11px;
  border-radius: 10px;
  background: var(--ra-brand);
  color: #fff;
  font-size: var(--ra-mini);
  font-weight: 700;
  white-space: nowrap;
}

.ra-top__cta .ra-ico {
  font-size: 13px;
}

.ra-top__search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-inline-size: 0;
  max-inline-size: 260px;
  block-size: 30px;
  padding-inline: 10px;
  border-radius: 10px;
  background: var(--ra-sunken);
  color: var(--ra-ink2);
  font-size: var(--ra-mini);
  white-space: nowrap;
  overflow: hidden;
}

.ra-top__search .ra-ico {
  font-size: 14px;
}

.ra-top__page {
  flex: none;
  font-size: var(--ra-mini);
  font-weight: 700;
  color: var(--ra-ink2);
  white-space: nowrap;
}

/* ------------------------------------------------------------------- body --- */

.ra-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-inline-size: 0;
  padding: 14px;
}

/* ------------------------------------------------------- تحليل متجرك --- */

.ra-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 16px;
  color: #fff;
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(187, 80, 248, 0.55), transparent 62%),
    linear-gradient(135deg, #331761, #5c17fd);
  box-shadow: 0 18px 34px -22px rgba(51, 23, 97, 0.7);
}

.ra-banner__mark {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
}

.ra-banner__mark .ra-ico {
  font-size: 17px;
}

.ra-banner__t {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.ra-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-inline-start: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: var(--ra-mini);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.ra-banner__badge .ra-ico {
  font-size: 12px;
}

/* --------------------------------------------------------------- اسأل الذكاء --- */

.ra-ask {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--ra-line);
  border-radius: 16px;
  background:
    radial-gradient(90% 130% at 100% 0%, rgba(187, 80, 248, 0.2), transparent 60%),
    linear-gradient(135deg, var(--ra-soft), var(--ra-surface) 78%);
}

.ra-ask__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--ra-mini);
  font-weight: 700;
  color: #55516b;
}

.ra-ask__head .ra-ico {
  font-size: 14px;
  color: var(--ra-brand);
}

.ra-ask__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  padding-inline-start: 12px;
  border: 1.5px solid var(--ra-hair2);
  border-radius: 14px;
  background: var(--ra-surface);
  box-shadow: 0 1px 2px rgba(51, 23, 97, 0.05);
}

/* The typed brief. `flex:1` gets the full row beside the button; its two halves
   are inline-blocks on one line, and the second half is dropped, never wrapped,
   when the window is too narrow (see the container query at the foot). */
.ra-ask__line {
  display: block;
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  /* The clip-path reveal + caret strip only read correctly on one line, so the
     field never wraps at any width. The second half of the brief drops out when
     the window is too narrow for the whole sentence (container query below). */
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ra-ink);
}

.ra-ask__go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  block-size: 34px;
  padding-inline: 12px;
  border-radius: 10px;
  background: var(--ra-brand);
  color: #fff;
  font-size: var(--ra-mini);
  font-weight: 700;
  white-space: nowrap;
}

.ra-ask__go .ra-ico {
  font-size: 13px;
}

.ra-ask__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ra-ask__chips span {
  display: inline-flex;
  align-items: center;
  block-size: 26px;
  padding-inline: 11px;
  border: 1px solid var(--ra-hair2);
  border-radius: 999px;
  background: var(--ra-surface);
  color: #55516b;
  font-size: var(--ra-mini);
  line-height: 1;
  white-space: nowrap;
}

/* --------------------------------------------------- the typed line + caret ---
   A typewriter without a single pixel of layout motion: the line keeps its full
   width, `clip-path` reveals it from the right (RTL), and the caret is a strip
   the width of the line whose left-edge bar is translated across it — so the
   caret always sits exactly on the typing front. It is the same primitive in the
   ask box and in the merchant's bubble. */

.ra-l,
.ra-type {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.ra-l__t,
.ra-type__t {
  display: inline-block;
}

.ra-l__c,
.ra-type__c {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--ra-caret), var(--ra-caret));
  background-size: 2px 58%;
  background-position: left center;
  background-repeat: no-repeat;
  transform: translateX(100%);
  opacity: 0;
}

/* ------------------------------------------------------------- suggestion --- */

.ra-cards {
  display: grid;
  gap: 12px;
  flex: 1;
}

.ra-idea {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
  border: 1px solid var(--ra-line);
  border-radius: 16px;
  background: var(--ra-surface);
  box-shadow: 0 1px 2px rgba(51, 23, 97, 0.05), 0 18px 34px -30px rgba(51, 23, 97, 0.45);
}

/* Only the first card exists until the window can hold two side by side. */
.ra-idea + .ra-idea {
  display: none;
}

.ra-idea__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background:
    radial-gradient(74% 82% at 50% 112%, rgba(187, 80, 248, 0.34), transparent 70%),
    linear-gradient(150deg, #cbbdea, #e9dcfb);
}

.ra-idea[data-kind="threshold"] .ra-idea__art {
  background:
    radial-gradient(74% 82% at 50% 112%, rgba(92, 23, 253, 0.26), transparent 70%),
    linear-gradient(150deg, #bdb9dd, #ded7f7);
}

.ra-idea__glow {
  position: absolute;
  inline-size: 56%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.75), transparent 66%);
  filter: blur(6px);
}

.ra-idea__glyph {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 84px;
  block-size: 84px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.92);
  color: #655d84;
  box-shadow:
    0 20px 34px -22px rgba(51, 23, 97, 0.7),
    inset 0 0 0 1px rgba(51, 23, 97, 0.07);
}

.ra-idea__glyph .ra-ico {
  font-size: 40px;
}

.ra-idea[data-kind="threshold"] .ra-idea__glyph {
  color: #5b5590;
}

.ra-idea__kind {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  block-size: 28px;
  padding-inline: 10px;
  border-radius: 999px;
  border: 1px solid rgba(236, 233, 245, 0.85);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ra-ink);
  font-size: var(--ra-mini);
  font-weight: 700;
  white-space: nowrap;
}

.ra-idea__kind .ra-ico {
  font-size: 14px;
  color: var(--ra-deep);
}

.ra-idea__fit {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: 28px;
  padding-inline: 10px;
  border-radius: 999px;
  border: 1px solid rgba(236, 233, 245, 0.9);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 2px rgba(51, 23, 97, 0.06);
  white-space: nowrap;
}

.ra-fit {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
}

.ra-fit i {
  inline-size: 3px;
  border-radius: 999px;
  background: var(--ra-hair2);
}

.ra-fit i:nth-child(1) { block-size: 6px; }
.ra-fit i:nth-child(2) { block-size: 9px; }
.ra-fit i:nth-child(3) { block-size: 12px; }

.ra-fit i.is-on {
  background: var(--ra-brand);
}

.ra-fit__label {
  font-size: var(--ra-mini);
  color: var(--ra-ink2);
}

.ra-fit__word {
  font-size: var(--ra-mini);
  font-weight: 700;
  color: var(--ra-ink);
}

.ra-fit__num {
  font-size: var(--ra-mini);
  font-weight: 700;
  color: var(--ra-ink2);
  font-variant-numeric: tabular-nums;
}

.ra-idea__value {
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: baseline;
  padding: 5px 11px;
  border-radius: 13px;
  background: var(--ra-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.ra-idea[data-kind="threshold"] .ra-idea__value {
  background: var(--ra-deep);
  font-variant-numeric: tabular-nums;
}

.ra-idea__text {
  display: grid;
  gap: 6px;
  padding: 12px 14px 0;
  text-align: center;
}

.ra-idea__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ra-ink);
}

.ra-idea__why {
  margin: 0;
  font-size: var(--ra-mini);
  line-height: 1.6;
  color: var(--ra-ink2);
}

.ra-idea__foot {
  padding: 12px 14px;
  margin-block-start: auto;
}

.ra-idea__go {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 40px;
  border-radius: 12px;
  background: var(--ra-brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* =================================================================== voice ===
   The assistant panel's own bubbles, on the dark card: the merchant's is the
   brand fill, Rakan's is the sunken surface (base.css `.ast-msg--user/-bot`). */

.ra-voice {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-start: 6px;
}

.ra-voice__ava {
  flex: none;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px var(--hair-2), 0 0 26px -6px rgba(187, 80, 248, 0.55);
}

.ra-wave {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  block-size: 40px;
}

/* The one keyframed loop on the page: transform only, seven bars, each a beat
   behind the one before it. Stopped when the section is out of view, or paused,
   or the visitor asked for less motion. */
.ra-wave i {
  display: block;
  inline-size: 4px;
  block-size: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--violet), var(--electric));
  transform: scaleY(0.28);
  transform-origin: center;
  animation: ra-wave 1.15s var(--ease) infinite;
  animation-delay: calc(var(--i) * -0.13s);
  animation-play-state: paused;
}

.ra[data-ra-live="1"] .ra-wave i {
  animation-play-state: running;
}

.ra[data-ra-paused="1"] .ra-wave i {
  animation-play-state: paused;
}

@keyframes ra-wave {
  0%, 100% { transform: scaleY(0.28); }
  50% { transform: scaleY(1); }
}

.ra-thread {
  display: grid;
  gap: 8px;
  margin-block-start: auto;
  padding-block-start: 12px;
}

.ra-msg {
  margin: 0;
  padding: 9px 12px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.6;
  max-inline-size: 100%;
}

.ra-msg--user {
  justify-self: end;
  border-end-end-radius: 5px;
  background: var(--ra-brand);
  color: #fff;
}

.ra-msg--bot {
  justify-self: start;
  border-end-start-radius: 5px;
  background: var(--ra-sunken);
  color: var(--ra-ink);
}

/* ================================================================= publish ===
   Three short rows and the draft the merchant is asked to approve. */

.ra-pub {
  display: grid;
  gap: 12px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.ra-pub li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.ra-pub__ico {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 10px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, 0.05);
  color: var(--violet);
}

.ra-pub__ico .ra-ico {
  font-size: 16px;
}

/* The one light object on this card: the draft as the dashboard would show it. */
.ra-draft {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-start: auto;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--ra-surface);
  box-shadow: 0 22px 40px -30px rgba(0, 0, 0, 0.9);
}

.ra-draft__row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-inline-size: 0;
}

.ra-draft__acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.ra-draft__tag {
  flex: none;
  font-size: var(--ra-mini);
  font-weight: 700;
  color: var(--ra-ink2);
  white-space: nowrap;
}

.ra-draft__name {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--ra-ink);
}

.ra-draft__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  block-size: 28px;
  padding-inline: 10px;
  border-radius: 9px;
  border: 1px solid var(--ra-line);
  background: var(--ra-surface);
  color: var(--ra-ink2);
  font-size: var(--ra-mini);
  font-weight: 700;
  white-space: nowrap;
}

.ra-draft__btn--on {
  border-color: transparent;
  background: var(--ra-brand);
  color: #fff;
}

/* ================================================================ caption === */

.ra-cap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: 28px;
}

.ra-cap__t {
  font-size: 13px;
  color: var(--text-3);
}

.ra-motion {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.ra-motion:hover {
  color: var(--white);
  border-color: var(--hair-2);
  background: rgba(255, 255, 255, 0.09);
}

.ra-motion .ra-ico {
  inline-size: 14px;
  block-size: 14px;
}

.ra-motion .ra-ico--play {
  display: none;
}

.ra-motion[aria-pressed="true"] .ra-ico--pause {
  display: none;
}

.ra-motion[aria-pressed="true"] .ra-ico--play {
  display: block;
}

/* ==================================================================== foot === */

.ra__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 32px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-2);
  text-align: center;
}

.ra__link {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--hair-2);
  text-underline-offset: 4px;
  transition: color 0.3s var(--ease), text-decoration-color 0.3s var(--ease);
}

.ra__link:hover {
  color: var(--violet);
  text-decoration-color: var(--violet);
}

/* ================================================================== states ===
   Script sets `data-ra-ask` on the ideas tile and `data-ra-voice` on the voice
   tile. **An unset attribute is the finished state** — that is the no-JS frame
   and the reduced-motion frame, both at once. */

/* -------- أفكار: idle (blank) → type → press → show ------------------------- */

[data-ra-ask="idle"] .ra-l__t {
  clip-path: inset(0 0 0 100%);
  transition: none;
}

[data-ra-ask="idle"] .ra-l__c {
  opacity: 0;
  transform: translateX(100%);
  transition: none;
}

[data-ra-ask="idle"] .ra-idea {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

[data-ra-ask="type"] .ra-l__t {
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.9s steps(20, end) 0.2s;
}

[data-ra-ask="type"] .ra-l__c {
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.9s steps(20, end) 0.2s, opacity 0.12s linear 0.2s;
}

[data-ra-ask="type"] .ra-l--b .ra-l__t {
  transition-delay: 1.1s;
}

[data-ra-ask="type"] .ra-l--b .ra-l__c {
  transition-delay: 1.1s, 1.1s;
}

/* The press, then the two answers, one beat apart. */
[data-ra-ask="press"] .ra-ask__go {
  transform: scale(0.96);
}

[data-ra-ask="show"] .ra-idea {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

[data-ra-ask="show"] .ra-idea + .ra-idea {
  transition-delay: 0.18s;
}

[data-ra-ask="press"] .ra-l__c,
[data-ra-ask="show"] .ra-l__c {
  opacity: 0;
  transform: translateX(0);
  transition: opacity 0.2s linear;
}

[data-ra-ask="press"] .ra-ask__go,
[data-ra-ask="show"] .ra-ask__go {
  transform: none;
  transition: transform 0.24s var(--ease);
}

/* -------- كلّمه بصوتك: idle → ask → reply ---------------------------------- */

[data-ra-voice="idle"] .ra-msg--user {
  opacity: 0;
  transition: none;
}

[data-ra-voice="idle"] .ra-type__t {
  clip-path: inset(0 0 0 100%);
  transition: none;
}

[data-ra-voice="idle"] .ra-type__c {
  opacity: 0;
  transform: translateX(100%);
  transition: none;
}

[data-ra-voice="idle"] .ra-msg--bot {
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}

[data-ra-voice="ask"] .ra-msg--user {
  opacity: 1;
  transition: opacity 0.3s var(--ease);
}

[data-ra-voice="ask"] .ra-type__t {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s steps(24, end) 0.15s;
}

[data-ra-voice="ask"] .ra-type__c {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.1s steps(24, end) 0.15s, opacity 0.12s linear 0.15s;
}

[data-ra-voice="reply"] .ra-msg--user {
  opacity: 1;
}

[data-ra-voice="reply"] .ra-type__t {
  clip-path: inset(0 0 0 0);
}

[data-ra-voice="reply"] .ra-type__c {
  opacity: 0;
  transition: opacity 0.2s linear;
}

[data-ra-voice="reply"] .ra-msg--bot {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

/* A browser without container queries has no way to hear the window's width, so
   the two cards ride the page's own width instead of never appearing at all. */
@supports not (container-type: inline-size) {
  @media (min-width: 620px) {
    .ra-cards {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ra-idea + .ra-idea {
      display: flex;
    }
  }
}

/* ====================================================== window rearranges ===
   The window decides, not the page: two cards side by side from 560px of window,
   and the one card that is left keeps the full window to itself. Everything that
   is chrome (search, page name, the AI badge) drops out before it can collide. */

@container rawin (min-width: 560px) {
  .ra-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ra-idea + .ra-idea {
    display: flex;
  }
}

@container rawin (max-width: 430px) {
  .ra-idea__text {
    padding-inline: 12px;
  }
}

/* The window can no longer hold the whole brief on one line, so the second half
   is dropped and only the first types — the reveal and the single caret stay
   correct. (Replaces the old two-line stack, which drew two carets.) */
@container rawin (max-width: 500px) {
  .ra-l--b {
    display: none;
  }
}

@container rawin (max-width: 400px) {
  .ra-banner__badge,
  .ra-top__search {
    display: none;
  }

  .ra-win {
    font-size: 13px;
  }
}

@container rawin (max-width: 330px) {
  .ra-fit__label,
  .ra-top__page {
    display: none;
  }

  .ra-top__cta {
    padding-inline: 9px;
  }
}

/* ============================================================== responsive === */

/* Desktop: the twelve columns, the two rows, and the ideas window spanning both
   of them on the reading side. */
@media (min-width: 1024px) {
  .ra__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* Equal halves, so the ideas window's two-row span is divided between the
       small tiles and their floors line up with its floor exactly. */
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }

  .ra__tile {
    padding: 28px;
  }

  .ra__tile--ideas {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
  }

  .ra__tile--voice {
    grid-column: 8 / 13;
    grid-row: 1;
  }

  .ra__tile--publish {
    grid-column: 8 / 13;
    grid-row: 2;
  }
}

/* Between a tablet and the bento the two dark tiles ride side by side under the
   window, so a 768px card is not one stretched line of copy. Under 760px SPEC3
   asks for one column, and one column it is. */
@media (min-width: 760px) and (max-width: 1023px) {
  .ra__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ra__tile--ideas {
    grid-column: 1 / -1;
  }
}

/* Under 1024 the tiles stack, the window goes full width, and no text inside it
   is smaller than 13px. */
@media (max-width: 1023px) {
  .ra {
    --ra-mini: 13px;
  }

  .ra-win {
    font-size: 13px;
  }
}

@media (max-width: 760px) {
  .ra__head {
    margin-block-end: 36px;
  }

  .ra__grid {
    gap: 16px;
  }

  .ra__tile {
    padding: 20px;
    border-radius: 20px;
  }

  .ra-idea__glyph {
    inline-size: 72px;
    block-size: 72px;
    border-radius: 22px;
  }

  .ra-idea__glyph .ra-ico {
    font-size: 34px;
  }
}

@media (max-width: 400px) {
  .ra-voice__ava {
    inline-size: 48px;
    block-size: 48px;
  }

  .ra-pub__ico {
    inline-size: 28px;
    block-size: 28px;
  }

  .ra-draft__btn {
    padding-inline: 8px;
  }
}

/* On the smallest phones the draft label takes the first line whole and the two
   actions move under it, so «شحن مجاني فوق 250» is never cut in half. */
@media (max-width: 380px) {
  .ra-draft {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .ra-draft__acts {
    justify-content: flex-end;
  }
}

/* ======================================================= reduced motion === */

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

  .ra-wave i {
    transform: scaleY(0.72);
  }

  /* Nothing moves, so there is nothing to pause. */
  .ra-motion {
    display: none;
  }
}