/* ==========================================================================
   Lahja phone demo — a familiar messenger, in Neuronyx warm stone.
   Not WhatsApp-branded: Onyx header, Paper/Stone bubbles, Clay accents.
   Logical properties throughout (RTL mirrors itself). Media timelines stay LTR.
   ========================================================================== */
.lp-phone {
  /* light */
  --lp-frame: #1C1917;
  --lp-frame-edge: rgba(255, 255, 255, 0.10);
  --lp-screen: #F2EFEA;
  --lp-head: #1C1917;
  --lp-head-text: #FAF9F7;
  --lp-head-text-2: rgba(250, 249, 247, 0.66);
  --lp-chat: #EEEAE3;
  --lp-pattern: rgba(28, 25, 23, 0.045);
  --lp-bubble-in: #FFFFFF;
  --lp-bubble-out: #F5E4D8;
  --lp-text: #1C1917;
  --lp-meta: #6B645F;
  --lp-meta-out: #74594A;
  --lp-tick: #8A817A;
  --lp-tick-read: #A84C26;
  --lp-sys: rgba(255, 255, 255, 0.82);
  --lp-sys-text: #57534E;
  --lp-chip: #FFFFFF;
  --lp-chip-text: #9A4523;
  --lp-chip-line: rgba(180, 83, 42, 0.22);
  --lp-bar: #FAF9F7;
  --lp-field: #FFFFFF;
  --lp-field-line: #E2DFD8;
  --lp-accent: #B4532A;
  --lp-accent-press: #9A4523;
  --lp-wave: #C9C3BB;
  --lp-wave-on: #9A4523;
  --lp-wave-out: #D9B9A4;
  --lp-wave-out-on: #8A3D1F;
  --lp-shadow: 0 1px 0.5px rgba(28, 25, 23, 0.10);

  position: relative;
  inline-size: min(100%, 24rem);
  block-size: clamp(36rem, 82svh, 47rem);
  margin-inline: auto;
  padding: 0.6rem;
  border-radius: 3.25rem;
  background: var(--lp-frame);
  box-shadow:
    inset 0 0 0 1px var(--lp-frame-edge),
    0 0 0 1px rgba(28, 25, 23, 0.06),
    0 2px 4px rgba(28, 25, 23, 0.06),
    0 40px 80px -24px rgba(28, 25, 23, 0.34);
  color: var(--lp-text);
  font-family: var(--font-body);
  isolation: isolate;
}
:root[data-theme="dark"] .lp-phone, [data-theme="dark"] .lp-phone { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lp-phone { color-scheme: dark; } }

/* dark tokens: forced dark, or system dark when not forced light */
:root[data-theme="dark"] .lp-phone {
  --lp-frame: #2A2522;
  --lp-frame-edge: rgba(255, 255, 255, 0.12);
  --lp-screen: #141110;
  --lp-head: #0F0D0C;
  --lp-chat: #171412;
  --lp-pattern: rgba(250, 249, 247, 0.035);
  --lp-bubble-in: #292524;
  --lp-bubble-out: #4A2B1D;
  --lp-text: #F3F1ED;
  --lp-meta: #A8A29E;
  --lp-meta-out: #D2B4A3;
  --lp-tick: #A8A29E;
  --lp-tick-read: #E08A5F;
  --lp-sys: rgba(41, 37, 36, 0.92);
  --lp-sys-text: #C9C3BB;
  --lp-chip: #292524;
  --lp-chip-text: #E8A07A;
  --lp-chip-line: rgba(224, 138, 95, 0.28);
  --lp-bar: #1C1917;
  --lp-field: #292524;
  --lp-field-line: #3A3431;
  --lp-wave: #57534E;
  --lp-wave-on: #E08A5F;
  --lp-wave-out: #7A5442;
  --lp-wave-out-on: #F0B08C;
  --lp-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-phone {
    --lp-frame: #2A2522;
    --lp-frame-edge: rgba(255, 255, 255, 0.12);
    --lp-screen: #141110;
    --lp-head: #0F0D0C;
    --lp-chat: #171412;
    --lp-pattern: rgba(250, 249, 247, 0.035);
    --lp-bubble-in: #292524;
    --lp-bubble-out: #4A2B1D;
    --lp-text: #F3F1ED;
    --lp-meta: #A8A29E;
    --lp-meta-out: #D2B4A3;
    --lp-tick: #A8A29E;
    --lp-tick-read: #E08A5F;
    --lp-sys: rgba(41, 37, 36, 0.92);
    --lp-sys-text: #C9C3BB;
    --lp-chip: #292524;
    --lp-chip-text: #E8A07A;
    --lp-chip-line: rgba(224, 138, 95, 0.28);
    --lp-bar: #1C1917;
    --lp-field: #292524;
    --lp-field-line: #3A3431;
    --lp-wave: #57534E;
    --lp-wave-on: #E08A5F;
    --lp-wave-out: #7A5442;
    --lp-wave-out-on: #F0B08C;
    --lp-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.4);
  }
}

.lp-screen {
  position: relative;
  display: flex; flex-direction: column;
  block-size: 100%;
  border-radius: 2.7rem;
  overflow: hidden;
  background: var(--lp-screen);
}
.lp-phone svg { display: block; }
[dir="rtl"] .lp-phone .flip { transform: scaleX(-1); }

/* status bar + island */
.lp-status {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  block-size: 2.75rem; padding-inline: 1.9rem 1.6rem;
  background: var(--lp-head); color: var(--lp-head-text);
  font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em;
  direction: ltr;
  font-family: var(--font-body);
}
.lp-status__island {
  position: absolute; inset-block-start: 0.55rem; inset-inline-start: 50%; translate: -50% 0;
  inline-size: 6.4rem; block-size: 1.7rem; border-radius: 999px; background: #000;
}
.lp-status__icons { display: flex; gap: 0.3rem; align-items: center; }
.lp-status__icons svg { block-size: 0.75rem; inline-size: auto; }
.lp-clock { font-variant-numeric: tabular-nums; }

/* chat header */
.lp-head {
  flex: none; display: flex; align-items: center; gap: 0.6rem;
  min-block-size: 3.6rem; padding: 0.35rem 0.6rem 0.55rem;
  background: var(--lp-head); color: var(--lp-head-text);
}
.lp-head__back { color: var(--lp-head-text-2); inline-size: 1.25rem; flex: none; }
.lp-head__back svg { inline-size: 1.25rem; block-size: 1.25rem; }
.lp-avatar {
  flex: none; display: grid; place-items: center;
  inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%;
  background: #3A3431; color: #F0EEEA;
}
.lp-avatar svg { inline-size: 1.3rem; block-size: 1.3rem; }
.lp-head__id { min-inline-size: 0; flex: 1; display: grid; gap: 0.05rem; }
.lp-head__name {
  display: flex; align-items: center; gap: 0.4rem; min-inline-size: 0;
  font-size: 0.98rem; font-weight: 600; line-height: 1.25;
}
.lp-head__name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-badge {
  flex: none; display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.1rem 0.42rem 0.12rem; border-radius: 999px;
  background: rgba(250, 249, 247, 0.12); color: var(--lp-head-text);
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3;
}
.lp-badge svg { inline-size: 0.6rem; block-size: 0.6rem; }
.lp-head__status {
  font-size: 0.78rem; line-height: 1.3; color: var(--lp-head-text-2);
  transition: color var(--dur-fast) var(--ease-out);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-head__status.is-active { color: #F0B08C; }
.lp-head__btn {
  flex: none; display: grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
  color: var(--lp-head-text-2);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast), transform var(--dur-spring-snappy) var(--ease-spring-snappy);
}
.lp-head__btn svg { inline-size: 1.2rem; block-size: 1.2rem; }
@media (hover: hover) { .lp-head__btn:hover { background: rgba(250, 249, 247, 0.1); color: var(--lp-head-text); } }
.lp-head__btn:active { transform: scale(0.9); transition-duration: var(--dur-instant); }
.lp-head__btn:focus-visible { outline-color: #F0B08C; outline-offset: -2px; border-radius: 50%; }

/* the conversation */
.lp-log {
  flex: 1; min-block-size: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 0.18rem;
  padding: 0.75rem 0.7rem 0.6rem;
  background-color: var(--lp-chat);
  background-image: radial-gradient(var(--lp-pattern) 1px, transparent 1.2px);
  background-size: 14px 14px;
  scrollbar-width: none;
}
.lp-log::-webkit-scrollbar { display: none; }
.lp-log:focus-visible { outline-offset: -3px; border-radius: 0; }

.lp-row { display: flex; flex-direction: column; align-items: flex-start; }
.lp-row--out { align-items: flex-end; }
.lp-row--sys { align-items: center; margin-block: 0.45rem; }
.lp-row + .lp-row--in:not(.lp-row--typing) .has-tail, .lp-row + .lp-row--out .has-tail { margin-block-start: 0.4rem; }

/* new message: grows from its own side, critically damped (no overshoot) */
.lp-row {
  transition: opacity 260ms var(--ease-out), transform var(--dur-spring-smooth) var(--ease-spring-smooth);
  transform-origin: bottom left;
}
[dir="rtl"] .lp-row--in, .lp-row--out { transform-origin: bottom right; }
[dir="rtl"] .lp-row--out { transform-origin: bottom left; }
.lp-row--sys { transform-origin: center; }
.lp-row.is-new { opacity: 0; transform: translateY(8px) scale(0.96); transition: none; }

.lp-msg {
  position: relative;
  max-inline-size: min(82%, 17.5rem);
  padding: 0.42rem 0.6rem 0.36rem;
  border-radius: 1rem;
  background: var(--lp-bubble-in);
  color: var(--lp-text);
  box-shadow: var(--lp-shadow);
  font-size: 0.9375rem; line-height: 1.42;
  overflow-wrap: anywhere;
}
:lang(ar) .lp-msg { font-family: var(--font-arabic); font-size: 0.97rem; line-height: 1.6; }
.lp-msg--in.has-tail { border-start-start-radius: 0.3rem; }
.lp-msg--out { background: var(--lp-bubble-out); }
.lp-msg--out.has-tail { border-start-end-radius: 0.3rem; }
.lp-msg__text { display: inline; white-space: pre-line; }
.lp-msg__meta {
  float: inline-end;
  display: inline-flex; align-items: center; gap: 0.2rem;
  margin-inline-start: 0.6rem; margin-block-start: 0.35rem; margin-block-end: -0.12rem;
  font-family: var(--font-body);
  font-size: 0.6875rem; line-height: 1; color: var(--lp-meta);
  white-space: nowrap; direction: inherit;
}
.lp-msg--out .lp-msg__meta { color: var(--lp-meta-out); }
.lp-ticks { color: var(--lp-tick); display: inline-flex; transition: color 300ms var(--ease-out); }
.lp-ticks svg { inline-size: 1.05rem; block-size: 0.72rem; }
.lp-msg.is-read .lp-ticks { color: var(--lp-tick-read); }
.lp-msg::after { content: ""; display: block; clear: both; }

/* a voice answer shown as text (its recording is not published yet) */
.lp-msg__voice-note {
  display: flex; align-items: center; gap: 0.3rem;
  margin-block-start: 0.35rem;
  font-family: var(--font-body); font-size: 0.72rem; line-height: 1.3; color: var(--lp-meta);
}
:lang(ar) .lp-msg__voice-note { font-family: var(--font-arabic); }
.lp-msg__voice-note-icon { flex: none; color: var(--lp-tick-read); display: inline-flex; }
.lp-msg__voice-note-icon svg { inline-size: 0.8rem; block-size: 0.8rem; }

/* CTA inside a bubble (like a link button under a business message) */
.lp-msg__cta {
  clear: both;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin: 0.5rem -0.6rem -0.36rem; padding-block: 0.65rem;
  border-block-start: 1px solid color-mix(in srgb, var(--lp-text) 10%, transparent);
  color: var(--lp-chip-text); font-weight: 600; font-size: 0.9rem; text-decoration: none;
  border-end-start-radius: 1rem; border-end-end-radius: 1rem;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.lp-msg__cta svg { inline-size: 1rem; block-size: 1rem; }
@media (hover: hover) { .lp-msg__cta:hover { background: color-mix(in srgb, var(--lp-text) 4%, transparent); } }
.lp-msg__cta:active { background: color-mix(in srgb, var(--lp-text) 8%, transparent); }
.lp-msg__cta:focus-visible { outline-offset: -3px; border-radius: 0 0 1rem 1rem; }

/* day + system pills */
.lp-day, .lp-sys {
  max-inline-size: 88%;
  padding: 0.3rem 0.75rem; border-radius: 0.6rem;
  background: var(--lp-sys); color: var(--lp-sys-text);
  font-size: 0.75rem; line-height: 1.45; text-align: center;
  box-shadow: var(--lp-shadow);
}
.lp-day { font-weight: 600; }
.lp-sys { display: inline-flex; align-items: flex-start; gap: 0.35rem; text-align: start; }
.lp-sys--note { text-align: center; display: block; }
.lp-sys__icon { flex: none; color: var(--lp-tick-read); margin-block-start: 0.12rem; }
.lp-sys__icon svg { inline-size: 0.85rem; block-size: 0.85rem; }

/* typing / recording indicator: the Neuronyx thinking mark */
.lp-typing { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.8rem; min-block-size: 2.4rem; }
.lp-typing .nx-think { color: var(--lp-meta); }
.lp-typing__mic { color: var(--lp-tick-read); }
.lp-typing__mic svg { inline-size: 1rem; block-size: 1rem; }

/* media (image) + location bubbles */
.lp-msg--media { padding: 0.22rem; inline-size: min(82%, 15.5rem); }
.lp-media { margin: 0; }
.lp-media__img { position: relative; overflow: hidden; border-radius: 0.8rem; background: var(--lp-chat); aspect-ratio: 4 / 3; }
.lp-media--map .lp-media__img { aspect-ratio: 2 / 1; }
.lp-media__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.lp-media__tag {
  position: absolute; inset-block-start: 0.4rem; inset-inline-end: 0.4rem;
  padding: 0.12rem 0.45rem; border-radius: 999px;
  background: rgba(28, 25, 23, 0.55); color: #FAF9F7;
  font-size: 0.625rem; font-weight: 600; line-height: 1.5;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lp-media__cap { display: grid; gap: 0.05rem; padding: 0.4rem 0.4rem 0.1rem; font-size: 0.875rem; line-height: 1.4; }
.lp-media__cap strong { font-weight: 600; }
.lp-media__cap--loc { grid-template-columns: auto 1fr; gap: 0.45rem; align-items: start; }
.lp-media__cap--loc > span:last-child { display: grid; }
.lp-media__cap--loc > span:last-child span { color: var(--lp-meta); font-size: 0.8rem; }
.lp-media__pin { color: var(--lp-accent); margin-block-start: 0.15rem; }
.lp-media__pin svg { inline-size: 1rem; block-size: 1rem; }
.lp-msg--media .lp-msg__meta { margin-inline-end: 0.35rem; margin-block-end: 0.15rem; }

/* voice note */
.lp-msg--voice { inline-size: min(84%, 16.5rem); padding: 0.45rem 0.6rem 0.36rem; }
.lp-voice { display: grid; gap: 0.15rem; }
.lp-voice__row { display: flex; align-items: center; gap: 0.55rem; direction: ltr; }
.lp-voice__play {
  flex: none; display: grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
  color: var(--lp-text);
  transition: transform var(--dur-spring-snappy) var(--ease-spring-snappy), background-color var(--dur-fast);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.lp-voice__play svg { inline-size: 1.5rem; block-size: 1.5rem; }
@media (hover: hover) { .lp-voice__play:hover { background: color-mix(in srgb, var(--lp-text) 6%, transparent); } }
.lp-voice__play:active { transform: scale(0.88); transition-duration: var(--dur-instant); }
.lp-voice__play:focus-visible { border-radius: 50%; outline-offset: 0; }
.lp-voice.is-loading .lp-voice__play { opacity: 0.55; }
.lp-voice__wave {
  position: relative; flex: 1; min-inline-size: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 2px;
  block-size: 2.75rem; cursor: pointer; touch-action: pan-y; /* vertical swipes scroll the page; demo.js seeks after 10 px sideways */
  --bar: var(--lp-wave); --bar-on: var(--lp-wave-on);
}
.lp-msg--out .lp-voice__wave { --bar: var(--lp-wave-out); --bar-on: var(--lp-wave-out-on); }
.lp-voice__wave:focus-visible { outline-offset: 3px; border-radius: 0.3rem; }
.lp-voice__bar {
  flex: 1; max-inline-size: 3px; min-inline-size: 2px;
  block-size: var(--h, 30%); min-block-size: 3px;
  border-radius: 2px; background: var(--bar);
  transition: background-color 120ms linear, block-size 260ms var(--ease-spring-smooth);
}
.lp-voice__bar.is-on { background: var(--bar-on); }
.lp-voice__dot {
  position: absolute; inset-block-start: 50%; left: 0;
  inline-size: 0.7rem; block-size: 0.7rem; margin-block-start: -0.35rem; margin-left: -0.35rem;
  border-radius: 50%; background: var(--bar-on);
  left: calc(var(--p, 0) * 100%);
  transition: opacity 200ms;
  box-shadow: 0 0 0 2px var(--lp-bubble-in);
  pointer-events: none;
}
.lp-msg--out .lp-voice__dot { box-shadow: 0 0 0 2px var(--lp-bubble-out); }
.lp-voice__speed {
  flex: none; min-inline-size: 2.4rem; block-size: 1.6rem; padding-inline: 0.4rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lp-text) 9%, transparent); color: var(--lp-text);
  font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-body);
  direction: ltr; unicode-bidi: isolate;
  position: relative;
  transition: transform var(--dur-spring-snappy) var(--ease-spring-snappy);
}
.lp-voice__speed::before { content: ""; position: absolute; inset: -0.5rem -0.2rem; } /* 44 px-ish hit area */
.lp-voice__speed:active { transform: scale(0.92); }
.lp-voice__foot { display: flex; align-items: center; gap: 0.7rem; direction: ltr; padding-left: 3.3rem; padding-right: 4.2rem; min-block-size: 1.1rem; }
.lp-voice__dur { font-size: 0.6875rem; color: var(--lp-meta); font-family: var(--font-body); direction: ltr; }
.lp-msg--out .lp-voice__dur { color: var(--lp-meta-out); }
.lp-voice__tx-btn {
  font-size: 0.72rem; font-weight: 600; color: var(--lp-chip-text);
  padding-block: 0.2rem; position: relative;
}
.lp-voice__tx-btn::before { content: ""; position: absolute; inset: -0.6rem -0.4rem; }
.lp-voice__tx { margin-block-start: 0.35rem; padding-block-start: 0.4rem; border-block-start: 1px solid color-mix(in srgb, var(--lp-text) 10%, transparent); font-size: 0.875rem; line-height: 1.55; color: var(--lp-text); }
:lang(ar) .lp-voice__tx { font-family: var(--font-arabic); }
.lp-msg--voice .lp-msg__meta { float: right; margin-block-start: -1rem; margin-left: 0; direction: ltr; }
.lp-msg--voice:has(.lp-voice__tx:not([hidden])) .lp-msg__meta { margin-block-start: 0.3rem; }

/* quick replies */
.lp-chips {
  flex: none; display: flex; gap: 0.4rem;
  padding: 0.5rem 0.7rem 0.15rem;
  background: var(--lp-chat);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  scroll-padding-inline: 0.7rem;
  transition: opacity 240ms var(--ease-out), transform var(--dur-spring-smooth) var(--ease-spring-smooth);
}
.lp-chips::-webkit-scrollbar { display: none; }
.lp-chips.is-new { opacity: 0; transform: translateY(6px); transition: none; }
.lp-chip {
  flex: none; min-block-size: 2.75rem; padding: 0.4rem 0.95rem;
  border-radius: 999px; border: 1px solid var(--lp-chip-line);
  background: var(--lp-chip); color: var(--lp-chip-text);
  font-size: 0.86rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  box-shadow: var(--lp-shadow);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--dur-spring-snappy) var(--ease-spring-snappy), background-color var(--dur-fast);
}
:lang(ar) .lp-chip { font-family: var(--font-arabic); font-size: 0.88rem; }
@media (hover: hover) { .lp-chip:hover { background: color-mix(in srgb, var(--lp-chip) 92%, var(--lp-accent)); } }
.lp-chip:active { transform: scale(0.95); transition-duration: var(--dur-instant); }
.lp-chip:focus-visible { border-radius: 999px; outline-offset: 2px; }

/* composer */
.lp-bar {
  flex: none; position: relative;
  display: flex; align-items: flex-end; gap: 0.45rem;
  padding: 0.45rem 0.55rem 0.4rem;
  background: var(--lp-chat);
}
.lp-field {
  flex: 1; min-inline-size: 0; display: flex; align-items: center;
  min-block-size: 2.75rem; padding-inline: 1rem;
  border-radius: 1.4rem; background: var(--lp-field);
  box-shadow: var(--lp-shadow);
}
.lp-field.is-hidden { visibility: hidden; }
.lp-input {
  inline-size: 100%; min-block-size: 2.75rem; border: 0; background: transparent; color: var(--lp-text);
  font-size: 1rem; /* 16 px: no iOS zoom */
  outline: none;
}
:lang(ar) .lp-input { font-family: var(--font-arabic); }
.lp-input::placeholder { color: var(--lp-meta); opacity: 1; }
.lp-field:focus-within { box-shadow: var(--lp-shadow), 0 0 0 2px color-mix(in srgb, var(--lp-accent) 45%, transparent); }
.lp-action {
  flex: none; position: relative; display: grid; place-items: center;
  inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
  background: var(--lp-accent); color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.18);
  -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform var(--dur-spring-snappy) var(--ease-spring-snappy), background-color var(--dur-fast) var(--ease-out);
}
.lp-action svg { inline-size: 1.3rem; block-size: 1.3rem; }
.lp-action:active { background: var(--lp-accent-press); }
.lp-action.is-holding { transform: scale(1.22); background: var(--lp-accent-press); }
.lp-action:focus-visible { border-radius: 50%; outline-offset: 3px; }
.lp-action svg { animation: lp-swap var(--dur-spring-snappy) var(--ease-spring-snappy); }
@keyframes lp-swap { from { opacity: 0; transform: scale(0.6); } }
[dir="rtl"] .lp-action svg.flip { animation-name: lp-swap-rtl; }
@keyframes lp-swap-rtl { from { opacity: 0; transform: scaleX(-1) scale(0.6); } to { transform: scaleX(-1); } }

/* recording strip (overlays the field) */
.lp-rec {
  position: absolute; inset-block: 0.45rem 0.4rem; inset-inline-start: 0.55rem; inset-inline-end: 3.75rem;
  display: flex; align-items: center; gap: 0.5rem;
  padding-inline: 0.5rem 0.9rem;
  border-radius: 1.4rem; background: var(--lp-field); box-shadow: var(--lp-shadow);
  color: var(--lp-text);
}
.lp-rec__trash { flex: none; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; color: var(--lp-meta); position: relative; }
.lp-rec__trash::before { content: ""; position: absolute; inset: -0.25rem; }
.lp-rec__trash svg { inline-size: 1.25rem; block-size: 1.25rem; }
@media (hover: hover) { .lp-rec__trash:hover { color: var(--lp-text); background: color-mix(in srgb, var(--lp-text) 6%, transparent); } }
.lp-rec__dot { flex: none; inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--lp-accent); animation: lp-pulse 1.2s ease-in-out infinite; }
.lp-rec__time { flex: none; font-size: 0.875rem; font-variant-numeric: tabular-nums; direction: ltr; font-family: var(--font-body); min-inline-size: 2.4rem; }
.lp-rec__levels { flex: 1; min-inline-size: 0; display: flex; align-items: center; justify-content: flex-end; gap: 2px; block-size: 1.6rem; direction: ltr; overflow: hidden; }
.lp-rec__levels span { flex: none; inline-size: 3px; block-size: var(--h, 15%); min-block-size: 3px; border-radius: 2px; background: var(--lp-wave-on); transition: block-size 90ms linear; }
.lp-rec__hint {
  position: absolute; inset-inline-end: 0.9rem; inset-block-start: 50%; translate: 0 -50%;
  font-size: 0.78rem; color: var(--lp-meta); white-space: nowrap; pointer-events: none;
  background: var(--lp-field); padding-inline-start: 0.4rem;
  transform: translateX(calc(var(--drag, 0px) * -1)); opacity: calc(1 - var(--drag-o, 0) * 0.65);
  transition: color var(--dur-fast) var(--ease-out);
}
/* armed: released here, the recording is thrown away */
.lp-rec.is-armed .lp-rec__hint { opacity: 1; color: var(--lp-accent-press); font-weight: 600; }
.lp-rec.is-armed .lp-rec__dot { display: none; }
.lp-rec.is-armed .lp-rec__trash { color: var(--lp-accent); transform: scale(1.15); }
.lp-rec__trash { transition: transform var(--dur-spring-snappy) var(--ease-spring-snappy), color var(--dur-fast); }
[dir="rtl"] .lp-rec__hint { transform: translateX(var(--drag, 0px)); }
.lp-rec__hint::before { content: "‹ "; }
[dir="rtl"] .lp-rec__hint::before { content: "› "; }
.lp-phone.is-recording .lp-rec__levels { opacity: 1; }
@keyframes lp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.lp-home { flex: none; block-size: 1.35rem; display: grid; place-items: center; background: var(--lp-chat); }
.lp-home::after { content: ""; inline-size: 7.5rem; block-size: 0.3rem; border-radius: 999px; background: var(--lp-text); opacity: 0.85; }

/* loading / failure */
.lp-phone:not(.is-ready) .lp-bar { opacity: 0.5; pointer-events: none; }
.lp-fail { display: none; }
.lp-phone.is-failed .lp-fail { display: grid; place-items: center; position: absolute; inset: 7rem 1.5rem auto; padding: 1rem; border-radius: 1rem; background: var(--lp-bubble-in); text-align: center; font-size: 0.9rem; z-index: 2; }

/* small screens: the phone becomes the screen (thin bezel, fits the viewport) */
@media (max-width: 479.98px) {
  /* about 70% of the viewport, so page margin stays visible above and below and a swipe
     outside the phone always scrolls the page */
  .lp-phone { inline-size: 100%; block-size: clamp(28rem, 70svh, 42rem); padding: 0.4rem; border-radius: 2.4rem; }
  .lp-log { overscroll-behavior: auto; } /* at the end of the chat, keep scrolling the page */
  .lp-screen { border-radius: 2.05rem; }
  .lp-status { block-size: 2.4rem; padding-inline: 1.5rem 1.3rem; font-size: 0.8125rem; }
  .lp-status__island { inline-size: 5.4rem; block-size: 1.45rem; inset-block-start: 0.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-row, .lp-chips { transition: opacity 200ms ease !important; transform: none !important; }
  .lp-row.is-new, .lp-chips.is-new { transform: none !important; }
  .lp-rec__hint { transform: none !important; }
  .lp-rec.is-armed .lp-rec__trash { transform: none; }
  .lp-action, .lp-chip, .lp-voice__play, .lp-head__btn, .lp-voice__speed { transition-property: background-color, color, opacity !important; }
  .lp-action.is-holding, .lp-action:active, .lp-chip:active, .lp-voice__play:active { transform: none !important; }
  .lp-action svg { animation: none !important; }
  .lp-rec__dot { animation: none; }
  .lp-voice__bar { transition: background-color 120ms linear; }
}
@media (forced-colors: active) {
  .lp-msg, .lp-chip, .lp-field, .lp-sys, .lp-day { border: 1px solid CanvasText; }
  .lp-voice__bar.is-on { background: Highlight; }
}