/* Lagos Life chat · Variation C · DM actions module (LLActions).
   DS A tokens + components only. Every class is prefixed .lla- so nothing clashes with index.html.
   Motion: transform / opacity / filter only. Sheets rise on --ease-sheet; steps slide on --ease-scrim (iOS 0.32,0.72,0,1) at 450ms.
   Reduced motion: crossfades only. */

/* ---------- Shell: the covering sheet (fixed height so steps slide cleanly) ---------- */
dialog.ll-sheet.lla-sheet{height:calc(100% * var(--sheet-cover-max));padding-top:0;overflow:hidden;touch-action:pan-y}
dialog.ll-sheet.lla-sheet[open]{animation:lla-up var(--duration-sheet) var(--ease-sheet) both}
dialog.ll-sheet.lla-sheet[open]::backdrop{animation:lla-fade var(--duration-sheet) var(--ease-scrim) both}
@keyframes lla-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes lla-fade{from{opacity:0}to{opacity:1}}
/* Docked (opened from the composer "+", X DMs style): the sheet sits above the composer row, the scrim stops at it,
   so the "+" → "×" stays visible and in reach. It rises out of / sinks behind the composer line (clip follows the slide). */
dialog.ll-sheet.lla-sheet[data-dock]{bottom:var(--lla-dock);height:calc(100% * var(--sheet-cover-max) - var(--lla-dock));box-shadow:var(--shadow-sheet,0 -8px 24px rgb(0 0 0 / .08)),inset 0 -1px 0 0 var(--line)}
dialog.ll-sheet.lla-sheet[data-dock][open]{animation-name:lla-up-dock}
dialog.ll-sheet.lla-sheet[data-dock]::backdrop{clip-path:inset(0 0 var(--lla-dock) 0)}
@keyframes lla-up-dock{from{transform:translateY(100%);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(0 0 0 0)}}
/* Compact header ⓘ sheet: Settings & safety only, sized to its rows */
dialog.ll-sheet.lla-sheet[data-mode="settings"]{height:auto}
.lla-sheet[data-mode="settings"] .lla-pages{flex:none}
.lla-sheet[data-mode="settings"] .lla-page{position:relative}
.lla-body--settings{gap:0;padding-bottom:calc(var(--bottom) + var(--space-2))}
.lla-sheet .ll-sheet-handle{flex:none;touch-action:none;cursor:grab}
.lla-pages{position:relative;flex:1;min-height:0;overflow:hidden}
.lla-page{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--paper)}
.lla-page[hidden]{display:none}
.lla-head{flex:none;display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-3) var(--space-3) var(--pad-sheet)}
.lla-head--back{padding-left:var(--space-2)}
.lla-head .ll-sheet__titles{flex:1;min-width:0}
.lla-head .ll-sheet__title{font-family:var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lla-head .ll-sheet__title:focus{outline:none}
.lla-head .ll-icon-button--ghost{--_label:var(--ink)}
.lla-head .ll-avatar{flex:none}
.lla-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--pad-sheet) var(--space-4);display:flex;flex-direction:column;gap:var(--space-4)}
.lla-foot{flex:none;display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-2) var(--pad-sheet) calc(var(--bottom) + var(--space-2));box-shadow:inset 0 1px 0 0 var(--line)}
.lla-foot .ll-button{width:100%}
.lla-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lla-sheet *,.lla-full *{scrollbar-width:none}
.lla-sheet *::-webkit-scrollbar,.lla-full *::-webkit-scrollbar{display:none}
.lla-emoji{font-family:var(--font-emoji);line-height:1}

/* ---------- Menu: City bento (picked 28 Oct). Map hero 120px → 8 equal 88px tiles, 2 columns, 12px gaps → Settings & safety list ---------- */
/* Handle floats over the top of every page; the menu puts its stat chip + close level with it, other pages pad down. */
.lla-sheet .ll-sheet-handle{position:absolute;top:0;left:0;right:0;z-index:3}
.lla-page{padding-top:var(--tap-min)}
.lla-page.lla-page--menu{padding-top:0}
.lla-head--menu{justify-content:space-between;min-height:var(--tap-min);padding:var(--space-1) var(--space-3) var(--space-2) var(--pad-sheet)}
.lla-stat{display:inline-flex;align-items:center;gap:var(--space-1);height:calc(var(--space-6) + var(--space-1));padding:0 var(--space-2-5);border-radius:var(--radius-full);
  background:var(--rose-soft);color:var(--ink);font:var(--type-label);font-weight:var(--weight-bold);font-variant-numeric:tabular-nums;white-space:nowrap}
.lla-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:120px;grid-auto-rows:88px;gap:var(--space-3);padding-top:var(--space-1)}
/* Tile = a real button with the DS A lip drawn inside the shape (so the 12px gaps stay exact); press = squish to .96 + lip sinks */
.lla-bt{--_fill:var(--mist);--_lip:var(--input);--_deep:var(--ink-soft);--_shadow:inset 0 calc(var(--lip-depth) * -1) 0 0 var(--_lip);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-width:0;min-height:var(--tap-min);margin:0;
  padding:var(--space-3) var(--space-3) calc(var(--space-3) + var(--lip-depth));border:0;border-radius:var(--radius-tile);
  background:var(--_fill);color:var(--ink);text-align:left;overflow:hidden}
.lla-bt.ll-interactive:not([aria-disabled="true"]):active{transform:translateY(1px) scale(.96);--_shadow:inset 0 -1px 0 0 var(--_lip);transition-duration:var(--duration-lip-press)}
.lla-bt.ll-interactive:focus-visible{z-index:1}
/* Groups have 5 tiles: the odd one out spans both columns, so the grid never leaves a hole */
.lla-bento > :last-child:nth-child(even){grid-column:1 / -1}
.lla-bt > .lla-emoji{font-size:28px}
.lla-bt__text{display:flex;flex-direction:column;min-width:0;width:100%}
.lla-bt__text b{font:var(--type-label-lg);font-weight:var(--weight-bold);color:var(--ink)}
.lla-bt__text small{font:var(--type-micro);font-weight:var(--weight-semibold);color:var(--_deep)}
.lla-bt__text .lla-bt__soft{color:var(--ink-soft)}
.lla-bt__lock{position:absolute;top:var(--space-3);right:var(--space-3);display:inline-flex;align-items:center;gap:var(--space-1);font:var(--type-label-sm);font-weight:var(--weight-bold);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.lla-bt__lock .lla-emoji{font-size:var(--icon-sm)}
.lla-bt__prog{display:block;width:100%;height:4px;margin:var(--space-1) 0 2px;border-radius:var(--radius-full);background:var(--input);overflow:hidden}
.lla-bt__prog i{display:block;width:var(--p);height:100%;border-radius:inherit;background:var(--rose)}
.lla-bt[data-c=money]{--_fill:var(--leaf-soft);--_lip:color-mix(in srgb,var(--leaf) 34%,transparent);--_deep:var(--leaf-deep)}
.lla-bt[data-c=hang]{--_fill:var(--lagoon-soft);--_lip:color-mix(in srgb,var(--lagoon) 34%,transparent);--_deep:var(--lagoon-deep)}
.lla-bt[data-c=rel]{--_fill:var(--rose-soft);--_lip:color-mix(in srgb,var(--rose) 34%,transparent);--_deep:var(--rose-deep)}
.lla-bt[data-c=about]{--_fill:var(--gold-soft);--_lip:color-mix(in srgb,var(--gold) 50%,transparent);--_deep:var(--gold-deep)}
.lla-bt[data-c=food]{--_fill:var(--sunset-soft);--_lip:color-mix(in srgb,var(--sunset) 40%,transparent);--_deep:var(--sunset-deep)}
/* Locked (Bae under 40): flat mist, lock + count top right, thin bar under the label. Still a button: it opens the locked flow. */
.lla-bt:has(.lla-bt__lock){--_fill:var(--mist);--_lip:var(--input)}
/* The only nod to the Pay slip: a perforated bottom edge */
.lla-perf{position:absolute;left:0;right:0;bottom:-1px;height:6px;pointer-events:none;background:radial-gradient(circle 4px at 50% 100%,var(--paper) 95%,transparent) 0 0/14px 100% repeat-x}
/* Map hero: the 780px world capture drawn at 390px wide, so it is 1:1 at 2x (no upscaling). Night dims the same crop with the scrim token. */
.lla-map{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;padding:0 var(--space-3) var(--lip-depth);--_tint:transparent;--_lip:var(--scrim-modal);
  background:linear-gradient(var(--_tint),var(--_tint)),var(--mist) url("../ds/site/img/5d/cap-60-world-only-day-fallback-844.jpg") -24px -146px/390px auto no-repeat;image-rendering:auto}
:root.dark .lla-map{--_tint:var(--scrim-sheet)}
.lla-pin{display:inline-flex;align-items:center;gap:var(--space-1-5);height:calc(var(--space-6) + var(--space-1));padding-right:var(--space-2-5);border-radius:var(--radius-full);
  background:var(--surface-glass-control);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-flat);font:var(--type-label-sm);font-weight:var(--weight-bold);white-space:nowrap}
.lla-pin__emoji{display:inline-grid;place-items:center;width:calc(var(--space-6) + var(--space-1));font-size:var(--icon-sm)}
.lla-map__go{pointer-events:none}
@media (prefers-reduced-motion: reduce){.lla-bt.ll-interactive:not([aria-disabled="true"]):active{transform:none}}
.lla-sec{display:flex;flex-direction:column}
.lla-sec .ll-list-group__heading{margin:0 0 var(--space-1);font-weight:var(--weight-bold)}
.lla-list{margin:0 calc(var(--pad-sheet) * -1);padding:0;list-style:none}
.lla-list .ll-list-row{padding-inline:var(--pad-sheet);min-height:var(--control-lg)}
.lla-list .ll-list-row__sub{white-space:normal}
.lla-list .ll-list-row__lead{width:var(--avatar-md);height:var(--avatar-md);border-radius:var(--radius-sm);background:var(--mist);font-size:var(--icon-md)}
.lla-danger .ll-list-row__title{color:var(--rose-deep)}
.lla-danger .ll-list-row__lead{background:var(--rose-soft)}
.lla-list .ll-switch{border-radius:0;padding:var(--space-3) var(--pad-sheet);min-height:var(--control-lg);gap:var(--space-3);justify-content:flex-start}
.lla-list .ll-switch .ll-list-row__lead{margin-right:0}
.lla-list .ll-switch__text{flex:1}
.lla-list .ll-switch__label{font:var(--type-label-lg)}
.lla-list .ll-switch__hint{font:var(--type-body-sm)}
.lla-lockrow .ll-list-row__sub b{color:var(--ink);font-weight:var(--weight-semibold)}

/* ---------- Shared bits ---------- */
.lla-label{margin:0 0 var(--space-2);font:var(--type-label);font-weight:var(--weight-bold);color:var(--ink)}
.lla-chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.lla-chips .ll-chip:not([aria-pressed="true"]){color:var(--ink)}
.lla-field{display:flex;align-items:center;gap:var(--space-2);min-height:var(--control-md);padding:0 var(--space-4);border-radius:var(--radius-tile);background:var(--mist);color:var(--ink-soft)}
.lla-field:focus-within{outline:var(--focus-width) solid var(--ring);outline-offset:var(--focus-offset)}
.lla-field input,.lla-field textarea{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:var(--type-body-lg);outline:none;resize:none}
.lla-field textarea{padding:var(--space-3) 0;min-height:calc(var(--control-lg) + var(--space-4))}
.lla-field input::placeholder,.lla-field textarea::placeholder{color:var(--ink-placeholder)}
.lla-field__pre{font:var(--type-title-sm);font-family:var(--font-display);color:var(--ink)}
.lla-note{display:flex;align-items:flex-start;gap:var(--space-2);margin:0;font:var(--type-body-sm);color:var(--ink-soft)}
.lla-note svg{flex:none;width:var(--icon-sm);height:var(--icon-sm);margin-top:2px;color:var(--leaf-deep)}
.lla-note b{color:var(--ink)}
.lla-hint{margin:0;min-height:var(--space-4);text-align:center;font:var(--type-label-sm);color:var(--ink-soft)}

/* ---------- Ask to be my Bae ---------- */
.lla-bae{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding-top:var(--space-2)}
.lla-heart{width:calc(var(--space-12) * 2);height:calc(var(--space-12) * 2);color:var(--fill-rose);transform-origin:50% 60%}
.lla-heart[data-beat]{animation:lla-beat 1400ms var(--ease-in-out) infinite}
@keyframes lla-beat{0%,100%{transform:scale(1)}14%{transform:scale(1.08)}28%{transform:scale(1)}42%{transform:scale(1.05)}70%{transform:scale(1)}}
.lla-lock{display:grid;place-items:center;width:calc(var(--space-12) * 2);height:calc(var(--space-12) * 2);border-radius:50%;background:var(--mist);font-size:calc(var(--icon-lg) * 1.6)}
.lla-bae h3{margin:0;font:var(--type-title);font-family:var(--font-display);text-wrap:balance}
.lla-bae p{margin:0;font:var(--type-body);color:var(--ink-soft);text-wrap:balance}
.lla-meter{width:100%;display:flex;flex-direction:column;gap:var(--space-1-5);padding:var(--space-3) var(--space-4);border-radius:var(--radius-tile);background:var(--mist);text-align:left}
.lla-meter__top{display:flex;justify-content:space-between;align-items:baseline;font:var(--type-label);color:var(--ink-soft)}
.lla-meter__top b{font:var(--type-title-sm);font-family:var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.lla-meter__track{position:relative;height:var(--space-2);border-radius:var(--radius-full);background:var(--paper);overflow:visible}
.lla-meter__fill{position:absolute;inset:0;border-radius:inherit;background:var(--fill-rose);transform-origin:left center;transform:scaleX(var(--v,0));transition:transform var(--duration-sheet) var(--ease-sheet)}
.lla-meter[data-locked] .lla-meter__fill{background:var(--ink-soft)}
.lla-meter__mark{position:absolute;top:calc(var(--space-1) * -1);bottom:calc(var(--space-1) * -1);left:var(--at);width:2px;margin-left:-1px;border-radius:1px;background:var(--ink)}
.lla-meter__legend{display:flex;justify-content:space-between;font:var(--type-label-sm);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.lla-meter__legend span:last-child{position:relative}

/* ---------- Request money: full-screen push ---------- */
dialog.lla-full{position:fixed;inset:var(--lla-top,54px) 0 0 0;width:100%;max-width:100%;height:auto;max-height:none;margin:0;padding:0;border:0;
  background:var(--paper);color:var(--ink);font:var(--type-body);display:flex;flex-direction:column;overflow:hidden;z-index:var(--z-sheet)}
dialog.lla-full:not([open]){display:none}
dialog.lla-full::backdrop{background:transparent}
.lla-full .lla-head{padding:var(--space-1) var(--space-3) var(--space-2) var(--space-2)}
.lla-amt-wrap{flex:1;min-height:calc(var(--space-12) * 2);display:grid;place-items:center;overflow:hidden}
.lla-amt{margin:0;display:flex;align-items:center;white-space:nowrap;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:calc(var(--space-8) * 2);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;transform-origin:center}
.lla-amt .cur{font-size:.6em;margin-right:var(--space-1);color:var(--ink-soft)}
.lla-amt[data-zero] .lla-amt__n{color:var(--ink-placeholder)}
.lla-amt .d-in{display:inline-block;animation:lla-digit var(--duration-message) var(--ease-out) both}
@keyframes lla-digit{from{opacity:0;transform:translateY(45%);filter:blur(2px)}}
.lla-req{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:0 var(--space-4) calc(var(--bottom) + var(--space-1))}
.lla-to{display:flex;align-items:center;gap:var(--space-2);margin:0;font:var(--type-body);color:var(--ink-soft)}
.lla-to b{color:var(--ink)}
.lla-quick{display:flex;gap:var(--space-1-5);justify-content:center}
.lla-quick .ll-chip{color:var(--ink);font-variant-numeric:tabular-nums}
.lla-req .lla-field{width:100%;border-radius:var(--radius-full)}
.lla-keypad{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-1)}
.lla-key{min-height:var(--control-lg);border:0;border-radius:var(--radius-tile);background:transparent;color:var(--ink);font:var(--type-title-lg);font-family:var(--font-display);
  display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--duration-enter) var(--ease-spring),background-color var(--duration-state) var(--ease-standard)}
.lla-key:active{background:var(--mist);transform:scale(.9);transition-duration:var(--duration-press)}
.lla-key:focus-visible{outline:var(--focus-width) solid var(--ring);outline-offset:calc(var(--focus-offset) * -1)}
.lla-key svg{width:var(--icon-md);height:var(--icon-md)}
.lla-req .ll-button{width:100%}

/* ---------- Buy them food ---------- */
.lla-menu{margin:0 calc(var(--pad-sheet) * -1);padding:0;list-style:none}
.lla-menu .ll-list-row{padding-inline:var(--pad-sheet);gap:var(--space-3)}
.lla-thumb{flex:none;display:grid;place-items:center;width:var(--avatar-lg);height:var(--avatar-lg);border-radius:var(--radius-tile);background:var(--mist);font-family:var(--font-emoji);font-size:var(--icon-lg);line-height:1}
.lla-menu .ll-list-row__sub{white-space:normal}
.lla-price{font:var(--type-label);font-weight:var(--weight-bold);color:var(--ink);font-variant-numeric:tabular-nums}
.lla-menu .ll-stepper{height:var(--control-sm);padding:0}
.lla-menu .ll-stepper__value{min-width:var(--space-6)}
.lla-menu .ll-stepper__button{width:var(--control-sm);height:var(--control-sm)}
.lla-menu .ll-stepper__button::after{content:"";position:absolute;inset:calc((var(--tap-min) - var(--control-sm)) / -2)}
.lla-deliver{display:flex;flex-direction:column;gap:var(--space-3)}
.lla-to-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-tile);background:var(--mist)}
.lla-to-card .lla-emoji{font-size:var(--icon-lg)}
.lla-to-card p{margin:0;font:var(--type-body-sm);color:var(--ink-soft)}
.lla-to-card b{display:block;font:var(--type-label-lg);color:var(--ink)}
.lla-lines{margin:0;display:grid;grid-template-columns:1fr auto;gap:var(--space-2) var(--space-3);font:var(--type-body)}
.lla-lines dt{color:var(--ink)}
.lla-lines dd{margin:0;text-align:right;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.lla-lines .tot{padding-top:var(--space-2);border-top:1.5px dashed var(--input);font:var(--type-label-lg);font-weight:var(--weight-extrabold)}
.lla-lines .soft{color:var(--ink-soft)}

/* Hold to pay: a darker fill grows over 800ms; early release drains it in 200ms */
.lla-hold{overflow:hidden;touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lla-hold.ll-button--primary::before{display:block;z-index:-1;background:var(--primary-pressed);opacity:1;transform-origin:left center;transform:scaleX(var(--fill,0));transition:transform 200ms var(--ease-out)}
.lla-hold[data-holding]{--fill:1}
.lla-hold[data-holding]::before{transition:transform 800ms linear !important}

/* ---------- Their companies ---------- */
.lla-cos{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-2) var(--space-4) calc(var(--bottom) + var(--space-4));overflow-y:auto;flex:1;min-height:0}
.lla-co{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-card);box-shadow:inset 0 0 0 1px var(--line)}
.lla-co__top{display:flex;align-items:center;gap:var(--space-3)}
.lla-co__ic{flex:none;display:grid;place-items:center;width:var(--avatar-lg);height:var(--avatar-lg);border-radius:var(--radius-tile);background:var(--mist);color:var(--ink)}
.lla-co__ic svg{width:var(--icon-md);height:var(--icon-md)}
.lla-co__text{flex:1;min-width:0}
.lla-co__name{margin:0;font:var(--type-label-lg);font-weight:var(--weight-bold)}
.lla-co__meta{margin:var(--space-0-5) 0 0;font:var(--type-body-sm);color:var(--ink-soft)}
.lla-co__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.lla-status{display:inline-flex;align-items:center;gap:var(--space-1-5);font:var(--type-label);font-weight:var(--weight-semibold);color:var(--ink);font-variant-numeric:tabular-nums}
.lla-status::before{content:"";width:var(--space-2);height:var(--space-2);border-radius:50%;background:var(--leaf)}
.lla-status[data-tone="closed"]::before{background:var(--ink-inactive)}
.lla-cos-sum{margin:0;font:var(--type-body-sm);color:var(--ink-soft)}
.lla-full .ll-empty-state{margin:auto 0}

/* ---------- Button morph: label -> spinner -> done (opacity + transform only) ---------- */
.lla-mb{position:relative;display:inline-grid;place-items:center}
.lla-mb > span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);white-space:nowrap;transition:opacity var(--duration-state) var(--ease-standard),transform var(--duration-message) var(--ease-sheet)}
.lla-mb > [data-f="s"],.lla-mb > [data-f="d"]{opacity:0;transform:scale(.8)}
[data-lla-morph="busy"] .lla-mb > [data-f="a"]{opacity:0;transform:scale(.9)}
[data-lla-morph="busy"] .lla-mb > [data-f="s"]{opacity:1;transform:none}
[data-lla-morph="done"] .lla-mb > [data-f="a"],[data-lla-morph="done"] .lla-mb > [data-f="s"]{opacity:0}
[data-lla-morph="done"] .lla-mb > [data-f="d"]{opacity:1;transform:none}
[data-lla-morph]{cursor:default;pointer-events:none}

/* ---------- Thread cards (non-money): one bordered card, perspective flips with the view ---------- */
.lla-card{align-self:flex-end;display:flex;flex-direction:column;gap:var(--space-3);width:min(100%,calc(var(--space-12) * 6));padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-card) var(--radius-card) var(--space-1) var(--radius-card);background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line)}
.lla-card__row{display:flex;align-items:center;gap:var(--space-3)}
.lla-card__ic{flex:none;display:grid;place-items:center;width:var(--avatar-md);height:var(--avatar-md);border-radius:50%;background:var(--mist);font-family:var(--font-emoji);font-size:var(--icon-md);line-height:1}
.lla-card__text{min-width:0}
.lla-card__title{margin:0;font:var(--type-label-lg);font-weight:var(--weight-bold);color:var(--ink);overflow-wrap:anywhere}
.lla-card__sub{margin:var(--space-0-5) 0 0;font:var(--type-body-sm);color:var(--ink-soft);overflow-wrap:anywhere}
.lla-card[data-kind="bae"] .lla-card__ic{background:var(--rose-soft)}
.lla-card[data-kind="family"] .lla-card__ic{background:var(--lagoon-soft)}
.lla-acts{display:flex;gap:var(--space-2)}
.lla-acts .ll-button{flex:1}
.lla-acts .ll-button--primary{margin-bottom:var(--lip-depth)}

/* Status pill (from the slip's .ok): Pending / Waiting / Arriving / Done / Declined */
.lla-pill{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-0-5) var(--space-2-5);border-radius:var(--radius-full);
  background:var(--sunset-soft);color:var(--sunset-deep);font:var(--type-label-sm);font-weight:var(--weight-bold);white-space:nowrap}
.lla-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sunset)}
.lla-pill[data-tone="ok"]{background:var(--leaf-soft);color:var(--leaf-deep)}
.lla-pill[data-tone="ok"]::before{background:var(--leaf)}
.lla-pill[data-tone="off"]{background:var(--mist);color:var(--ink-soft)}
.lla-pill[data-tone="off"]::before{background:var(--ink-inactive)}

/* ---------- Lagos Life Pay slip (copied from 02-variations/money concept 1, prefixed lla-) ---------- */
.lla-slipw{align-self:flex-end;width:252px;max-width:100%;filter:drop-shadow(0 1px 1px #16203c1f) drop-shadow(0 8px 14px #16203c1a)}
.lla-slip{background:var(--paper);border-radius:var(--radius-tile) var(--radius-tile) 0 0;overflow:hidden;
  -webkit-mask:radial-gradient(circle 5px at 50% 100%,#0000 96%,#000) 0 0/14px 100% repeat-x;mask:radial-gradient(circle 5px at 50% 100%,#0000 96%,#000) 0 0/14px 100% repeat-x}
.lla-slip__band{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-2-5) var(--space-3-5);background:var(--leaf-soft)}
.lla-slip__band small{font:var(--type-micro);color:var(--leaf-deep);white-space:nowrap}
.lla-wm{font:700 17px/1 var(--font-display);color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.lla-wm i{font-style:normal;color:var(--primary);margin-left:4px}
.lla-slip__body{padding:var(--space-3) var(--space-3-5) var(--space-2)}
.lla-lbl{margin:0;font:var(--type-label-sm);color:var(--ink-soft)}
.lla-slip__amt{display:flex;align-items:center;justify-content:space-between;margin:0 0 var(--space-2)}
.lla-amt-s{font:600 32px/38px var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink)}
.lla-rows{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-3);font:var(--type-body-sm)}
.lla-rows dt{color:var(--ink-soft)}
.lla-rows dd{margin:0;text-align:right;font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere;color:var(--ink)}
.lla-slip__stub{display:flex;flex-direction:column;gap:var(--space-2-5);margin-top:var(--space-2);padding:var(--space-2-5) var(--space-3-5) var(--space-4);border-top:1.5px dashed var(--input)}
.lla-slip__stub .lla-acts .ll-button{min-height:var(--control-sm)}
.lla-eta{position:relative;height:3px;border-radius:var(--radius-full);background:var(--mist);overflow:hidden}
.lla-eta i{position:absolute;inset:0;border-radius:inherit;background:var(--primary);transform-origin:left center;transform:scaleX(.08);animation:lla-eta var(--lla-eta,90s) linear forwards}
@keyframes lla-eta{from{transform:scaleX(.08)}to{transform:scaleX(1)}}

/* ---------- Perspective: sender (default) vs recipient ---------- */
:root:not([data-lla-view="recipient"]) .lla-thread [data-for="them"],
:root[data-lla-view="recipient"] .lla-thread [data-for="me"]{display:none}
:root[data-lla-view="recipient"] .lla-thread :is(.lla-card,.lla-slipw){align-self:flex-start}
:root[data-lla-view="recipient"] .lla-thread .lla-card{border-radius:var(--radius-card) var(--radius-card) var(--radius-card) var(--space-1)}
.lla-in{animation:lla-card-in var(--duration-enter) var(--ease-sheet) both}
@keyframes lla-card-in{from{opacity:0;transform:translateY(var(--space-4)) scale(.94)}}

@media (prefers-reduced-motion: reduce){
  dialog.ll-sheet.lla-sheet[open],dialog.ll-sheet.lla-sheet[open]::backdrop{animation:lla-fade 150ms linear both}
  .lla-heart[data-beat],.lla-amt .d-in,.lla-eta i{animation:none}
  .lla-eta i{transform:scaleX(.08)}
  .lla-in{animation:lla-fade 150ms linear both}
  .lla-mb > span{transition:opacity 150ms linear;transform:none !important}
  .lla-key,.lla-meter__fill{transition:none}
  .lla-hold[data-holding]::before{transition:transform 800ms linear !important}
}
/* Recipient sees the buttons, not "Waiting for their answer" */
:root[data-lla-view="recipient"] .lla-thread [data-pill]:not([data-tone]):has(~ .lla-acts){display:none}