@font-face{font-family:'IBM Plex Sans Hebrew';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/IBMPlexSansHebrew-400-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'IBM Plex Sans Hebrew';font-style:normal;font-weight:400;font-display:swap;src:url('./fonts/IBMPlexSansHebrew-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Hebrew';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/IBMPlexSansHebrew-600-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'IBM Plex Sans Hebrew';font-style:normal;font-weight:600;font-display:swap;src:url('./fonts/IBMPlexSansHebrew-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Hebrew';font-style:normal;font-weight:700;font-display:swap;src:url('./fonts/IBMPlexSansHebrew-700-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'IBM Plex Sans Hebrew';font-style:normal;font-weight:700;font-display:swap;src:url('./fonts/IBMPlexSansHebrew-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Pashut.Tools — Palette A "רקפת ומרווה". v4 (29.9.2026): action moves to deep sage, rakefet gains a marker tint and becomes rare. */
:root{
/* Neutrals — ~90% of any screen */
--pt-bg:#fbfaf7;            /* page background · 14.5:1 with ink */
--pt-surface:#f4f3ef;       /* cards, lists · 13.6:1 */
--pt-warm-gray:#e4e1d8;     /* selected row, progress track · 11.6:1 */
--pt-divider:#c4c0b5;       /* decorative only · 1.7:1 · never the only signal */
--pt-card-border:#b5b1a5;   /* decorative · 2.1:1 */
--pt-field-border:#8f8b7e;  /* inputs & choices · 3.4:1 on white */
--pt-white:#ffffff;
/* Ink */
--pt-ink:#282621;           /* text & headings */
--pt-ink-2:#4a4841;         /* secondary text, 16px+ · 8.8:1 */
--pt-brand-ink:#1c2e24;     /* main heading & name only · 13.7:1 */
/* Brand */
--pt-sage:#40634f;          /* brand sage · the coconut, ticks, success, charts. Not for buttons since v4 */
--pt-action:#2b4634;        /* every action · white on it 10.2:1 · on bg 9.9:1 */
--pt-action-hover:#223a2b;
--pt-action-press:#1c2e24;
--pt-sage-hover:#35543f;
--pt-sage-press:#2b4634;
--pt-sage-tint:#ebf2ea;
--pt-drop-highlight:#dce8dc;
--pt-rakefet:#6a2a62;       /* rare: ONE element per surface (the "הכל" answer, the closing slide) + focus ring · 9.5:1 · never a button */
--pt-marker:#dfcbd8;        /* rakefet marker behind ONE key phrase per headline · ink on it 11.5:1 */
--pt-marker-on-ink:#5b4658; /* marker inside dark (ink) chat bubbles */
--pt-rakefet-tag-bg:#efe6ee;
--pt-rakefet-tag-ink:#5b2255;

/* State: bg · border · text · icon */
--pt-success-bg:#ebf2ea;--pt-success-border:#c3d6c6;--pt-success-ink:#1f4433;--pt-success-icon:#40634f;
--pt-warning-bg:#f9edd9;--pt-warning-border:#e2c186;--pt-warning-ink:#543f14;--pt-warning-icon:#886518;
--pt-error-bg:#f6e6e2;--pt-error-border:#dfada3;--pt-error-ink:#72302a;--pt-error-icon:#9c3d35;
--pt-info-bg:#edf1f5;--pt-info-border:#b8c8d6;--pt-info-ink:#23405a;--pt-info-icon:#3a6488;

/* Chart ramps — sage + rakefet only (mid steps derived) */
--pt-chart-g1:#1c2e24;--pt-chart-g2:#40634f;--pt-chart-g3:#6f8f7b;--pt-chart-g4:#a3bba9;--pt-chart-g5:#c3d6c6;
--pt-chart-p1:#6a2a62;--pt-chart-p2:#9a6592;--pt-chart-p3:#c9a8c3;
--pt-chart-grid:#e4e1d8;--pt-chart-axis:#4a4841;

/* Instagram grid ("סודוקו של מילים", v4). Social canvases only, never UI. */
--social-ground-linen:#fbfaf7;  /* default tile */
--social-ground-green:#1c2e24;  /* one vertical pair per grid */
--social-ground-plum:#6a2a62;   /* one horizontal pair per grid · the only place rakefet is a ground */
--social-ink-on-light:#282621;
--social-ink-on-dark:#fbfaf7;
--social-emph-on-light:#6a2a62; /* the ONE bold word on linen */
--social-emph-on-dark:#dfcbd8;  /* the ONE bold word on green / plum */
--social-meta-on-light:#4a4841;
--social-meta-on-dark:#c3d6c6;

/* ---------- Semantic aliases ---------- */
--text-body:var(--pt-ink);
--text-muted:var(--pt-ink-2);
--text-brand:var(--pt-brand-ink);
--text-action:var(--pt-action);
--text-attention:var(--pt-rakefet);
--text-on-action:var(--pt-white);
--surface-page:var(--pt-bg);
--surface-card:var(--pt-surface);
--surface-raised:var(--pt-white);
--surface-selected:var(--pt-warm-gray);
--border-subtle:var(--pt-divider);
--border-card:var(--pt-card-border);
--border-field:var(--pt-field-border);
--action-bg:var(--pt-action);
--action-bg-hover:var(--pt-action-hover);
--action-bg-press:var(--pt-action-press);
--marker:var(--pt-marker);
--accent-rare:var(--pt-rakefet);
/* Conversation */
--bubble-her-bg:var(--pt-surface);--bubble-her-ink:var(--pt-ink);
--bubble-me-bg:var(--pt-brand-ink);--bubble-me-ink:var(--pt-bg);
--focus-ring:var(--pt-rakefet);

/* Document states */
--doc-draft-bg:var(--pt-warm-gray);--doc-draft-ink:var(--pt-ink);--doc-draft-icon:var(--pt-ink-2);
--doc-sent-bg:var(--pt-info-bg);--doc-sent-ink:var(--pt-info-ink);--doc-sent-icon:var(--pt-info-icon);
--doc-paid-bg:var(--pt-success-bg);--doc-paid-ink:var(--pt-success-ink);--doc-paid-icon:var(--pt-success-icon);
--doc-overdue-bg:var(--pt-error-bg);--doc-overdue-ink:var(--pt-error-ink);--doc-overdue-icon:var(--pt-error-icon);
--doc-review-bg:var(--pt-rakefet-tag-bg);--doc-review-ink:var(--pt-rakefet-tag-ink);--doc-review-icon:var(--pt-rakefet);

/* Quiz / progress states */
--quiz-correct-bg:var(--pt-success-bg);--quiz-correct-border:var(--pt-success-icon);--quiz-correct-ink:var(--pt-success-ink);
--quiz-wrong-bg:var(--pt-error-bg);--quiz-wrong-border:var(--pt-error-icon);--quiz-wrong-ink:var(--pt-error-ink);
--quiz-locked-bg:var(--pt-surface);--quiz-locked-border:var(--pt-divider);--quiz-locked-ink:var(--pt-ink-2);
--quiz-current-border:var(--pt-action);
--progress-track:var(--pt-warm-gray);--progress-fill:var(--pt-action);
}

/* Dark — warm ink base. Derived (book lists dark theme as "not done yet"); all text pairs ≥7:1. */
[data-theme="dark"]{
--surface-page:#282621;--surface-card:#33312b;--surface-raised:#3d3a33;--surface-selected:#4a4841;
--border-subtle:#5c594f;--border-card:#6b675c;--border-field:#8f8b7e;
--text-body:#f4f3ef;--text-muted:#c4c0b5;--text-brand:#f4f3ef;--text-action:#9dbfa8;--text-attention:#d9a9d0;--text-on-action:#1c2e24;
--action-bg:#9dbfa8;--action-bg-hover:#b0cdb9;--action-bg-press:#8aae95;--focus-ring:#d9a9d0;
--pt-success-bg:#24332a;--pt-success-border:#40634f;--pt-success-ink:#c3d6c6;--pt-success-icon:#9dbfa8;
--pt-warning-bg:#3a3020;--pt-warning-border:#886518;--pt-warning-ink:#e2c186;--pt-warning-icon:#e2c186;
--pt-error-bg:#3d2723;--pt-error-border:#9c3d35;--pt-error-ink:#dfada3;--pt-error-icon:#dfada3;
--pt-info-bg:#22303c;--pt-info-border:#3a6488;--pt-info-ink:#b8c8d6;--pt-info-icon:#b8c8d6;
--pt-rakefet-tag-bg:#43263f;--pt-rakefet-tag-ink:#ecd3e7;--marker:#5b4658;--accent-rare:#d9a9d0;
--bubble-her-bg:#3d3a33;--bubble-her-ink:#f4f3ef;--bubble-me-bg:#f4f3ef;--bubble-me-ink:#1c2e24;
--pt-chart-grid:#4a4841;--pt-chart-axis:#c4c0b5;
}

:root{
--font-sans:'IBM Plex Sans Hebrew',system-ui,-apple-system,'Segoe UI',sans-serif;
--fw-regular:400; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */

/* Scale (book v3). Nothing below 16px, ever. */
--fs-h1:2rem;--lh-h1:1.2; /* @kind font */

--fs-h2:1.5rem;--lh-h2:1.25; /* @kind font */

--fs-h3:1.2rem;--lh-h3:1.3; /* @kind font */

--fs-body:18px;--fs-body-wide:19px;--lh-body:1.6; /* @kind font */

--fs-secondary:16px;--lh-secondary:1.5; /* @kind font */

--fs-button:18px;--fs-label:16px;
--fs-eyebrow:16px;--ls-eyebrow:0.02em; /* @kind font */

--fs-min:16px;
/* Display — the voice. Mix weights: regular sentence, bold key words. Tight tracking. */
--fs-display:clamp(44px,7.4vw,92px); /* @kind font */
--lh-display:1.02; /* @kind font */
--ls-display:-0.045em; /* @kind font */
--fs-section:clamp(34px,5.4vw,64px); /* @kind font */
--lh-section:1.04; /* @kind font */
--ls-section:-0.04em; /* @kind font */
--fs-lead:20px; /* @kind font */
/* Social / large-format display (1080px canvases) */
--fs-social-display:96px;--fs-social-title:72px;--fs-social-body:40px;--fs-social-meta:32px;
/* Hebrew ? and ! sit too high in Plex — wrap and scale inside Hebrew text only */
--punct-scale:87.3%; /* @kind font */
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
--radius-field:12px;     /* inputs */
--radius-control:999px;  /* buttons, chips, choices, tags — soft, pill (v4) */
--radius-alert:14px;     /* inline messages */
--radius-card:28px;      /* cards, photos, booking panel */
--radius-card-lg:44px;   /* social canvases (1080px) */
--radius-bubble:26px;    /* chat bubbles; the tail corner is 8px */
--radius-bubble-tail:8px;
--radius-pill:999px;
--radius-icon:22%;       /* app icon square */
--hit-target:56px;       /* primary buttons, chips, choices (v4) */
--hit-target-field:52px; /* inputs, time slots */
--hit-target-min:48px;   /* dense places only — never below */
--border-w:1px;--border-w-strong:2px;--focus-w:3px;
--content-max:680px;--page-max:1120px;
--shadow-none:none;
--shadow-overlay:0 1px 2px rgba(40,38,33,.06),0 8px 24px rgba(40,38,33,.10);
--ease-out:cubic-bezier(.2,.7,.2,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:320ms; /* @kind other */
--dur-drop:3600ms; /* @kind other */
}

html{direction:rtl}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
@media (min-width:1024px){body{font-size:var(--fs-body-wide)}}
h1,h2,h3{margin:0;font-weight:var(--fw-bold);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);color:var(--text-brand)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
a{color:var(--text-action);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--action-bg-hover)}
:focus-visible{outline:var(--focus-w) solid var(--focus-ring);outline-offset:2px}
.pt-punct{font-size:var(--punct-scale)}
.pt-num{font-variant-numeric:tabular-nums}
.pt-eyebrow{font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);color:var(--text-muted)}
.pt-muted{font-size:var(--fs-secondary);line-height:var(--lh-secondary);color:var(--text-muted)}

/* Component classes — consumed by components/*.jsx. All values from tokens. */
.pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--hit-target);padding:0 var(--space-6);border-radius:var(--radius-control);font:inherit;font-size:var(--fs-button);font-weight:var(--fw-semibold);line-height:1.2;cursor:pointer;border:var(--border-w-strong) solid transparent;text-decoration:none;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);-webkit-tap-highlight-color:transparent}
.pt-btn--primary{background:var(--action-bg);color:var(--text-on-action)}
.pt-btn--primary:hover{background:var(--action-bg-hover)}
.pt-btn--primary:active{background:var(--action-bg-press)}
.pt-btn--secondary{background:transparent;color:var(--text-action);border-color:var(--action-bg)}
.pt-btn--secondary:hover{background:var(--pt-sage-tint)}
.pt-btn--secondary:active{background:var(--surface-selected)}
.pt-btn--tertiary{background:transparent;color:var(--text-action);padding:0 var(--space-3);border-radius:var(--radius-field);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.pt-btn--tertiary:hover{color:var(--action-bg-hover);background:var(--pt-sage-tint)}
.pt-btn--sm{min-height:var(--hit-target-min);padding:0 var(--space-4);font-size:var(--fs-label)}
.pt-btn--full{width:100%}
.pt-btn:disabled,.pt-btn[aria-disabled="true"]{background:var(--surface-selected);color:var(--text-muted);border-color:transparent;cursor:not-allowed;text-decoration:none}
.pt-btn:focus-visible{outline:var(--focus-w) solid var(--focus-ring);outline-offset:2px}

.pt-icon{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--pt-icon-url) center/contain no-repeat;mask:var(--pt-icon-url) center/contain no-repeat}

.pt-tag{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:var(--radius-pill);font-size:var(--fs-label);font-weight:var(--fw-semibold);line-height:1.2;white-space:nowrap;background:var(--surface-selected);color:var(--text-body)}
.pt-tag__dot{width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}

.pt-alert{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4) 18px;border:var(--border-w) solid;border-inline-start-width:5px;border-radius:var(--radius-alert)}
.pt-alert__title{font-weight:var(--fw-bold);font-size:var(--fs-body);line-height:1.4}
.pt-alert__body{font-size:var(--fs-secondary);line-height:var(--lh-secondary)}

.pt-field{display:flex;flex-direction:column;gap:6px}
.pt-field__label{font-size:var(--fs-label);font-weight:var(--fw-semibold);color:var(--text-body)}
.pt-field__hint{font-size:var(--fs-secondary);color:var(--text-muted);line-height:var(--lh-secondary)}
.pt-field__input{min-height:var(--hit-target-field);box-sizing:border-box;width:100%;padding:10px 16px;border:1.5px solid var(--border-field);border-radius:var(--radius-field);background:var(--surface-raised);color:var(--text-body);font:inherit;font-size:var(--fs-body);line-height:1.4}
.pt-field__input::placeholder{color:var(--text-muted)}
.pt-field__input:hover{border-color:var(--text-muted)}
.pt-field__input:focus{outline:var(--focus-w) solid var(--focus-ring);outline-offset:2px;border-color:var(--action-bg)}
.pt-field__input[aria-invalid="true"]{border-color:var(--pt-error-icon);border-width:2px}
.pt-field__error{display:flex;gap:6px;align-items:center;font-size:var(--fs-secondary);font-weight:var(--fw-semibold);color:var(--pt-error-ink)}
textarea.pt-field__input{min-height:112px;resize:vertical}

.pt-choice{display:flex;align-items:center;gap:var(--space-3);min-height:var(--hit-target);box-sizing:border-box;padding:14px 20px;border:2px solid var(--border-subtle);border-radius:20px;background:var(--surface-raised);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.pt-choice:hover{border-color:var(--action-bg)}
.pt-choice input{position:absolute;opacity:0;pointer-events:none}
.pt-choice:has(input:focus-visible){outline:var(--focus-w) solid var(--focus-ring);outline-offset:2px}
.pt-choice__mark{width:24px;height:24px;flex:none;box-sizing:border-box;border:2px solid var(--border-field);display:grid;place-items:center;color:var(--text-on-action)}
.pt-choice--radio .pt-choice__mark{border-radius:50%}
.pt-choice--checkbox .pt-choice__mark{border-radius:6px}
.pt-choice[data-checked="true"]{border:2px solid var(--action-bg);background:var(--pt-sage-tint)}
.pt-choice[data-checked="true"] .pt-choice__mark{background:var(--action-bg);border-color:var(--action-bg)}
.pt-choice[data-state="correct"]{border:2px solid var(--quiz-correct-border);background:var(--quiz-correct-bg);color:var(--quiz-correct-ink)}
.pt-choice[data-state="wrong"]{border:2px solid var(--quiz-wrong-border);background:var(--quiz-wrong-bg);color:var(--quiz-wrong-ink)}
.pt-choice[data-state="locked"]{border-style:dashed;border-color:var(--quiz-locked-border);background:var(--quiz-locked-bg);color:var(--quiz-locked-ink);cursor:not-allowed}
.pt-choice__label{font-size:var(--fs-body);line-height:1.4}
.pt-choice__desc{font-size:var(--fs-secondary);color:var(--text-muted);line-height:var(--lh-secondary)}

.pt-progress__track{height:10px;border-radius:var(--radius-pill);background:var(--progress-track);overflow:hidden}
.pt-progress__fill{height:100%;border-radius:inherit;background:var(--progress-fill);transition:width var(--dur-slow) var(--ease-out)}
.pt-progress__steps{display:flex;gap:6px}
.pt-progress__step{flex:1;height:10px;border-radius:var(--radius-pill);background:var(--progress-track)}
.pt-progress__step[data-done="true"]{background:var(--progress-fill)}
.pt-progress__step[data-current="true"]{background:var(--progress-fill);opacity:.55}

.pt-card{background:var(--surface-card);border:0;border-radius:var(--radius-card);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3)}
.pt-card--raised{background:var(--surface-raised);box-shadow:0 1px 0 rgba(40,38,33,.05)}
.pt-card--outline{background:transparent;border:var(--border-w) solid var(--border-subtle)}
.pt-card--attention{background:var(--surface-raised);border:var(--border-w-strong) solid var(--pt-rakefet)}
.pt-card__title{font-size:var(--fs-h3);letter-spacing:-.02em;font-weight:var(--fw-bold);line-height:var(--lh-h3);margin:0}
.pt-card__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-2)}

.pt-row{display:flex;align-items:center;gap:var(--space-3);min-height:64px;padding:10px var(--space-4);border-bottom:var(--border-w) solid var(--border-subtle);background:transparent;cursor:pointer;text-align:start;width:100%;box-sizing:border-box;font:inherit;color:inherit;border-top:0;border-inline:0}
.pt-row:hover{background:var(--surface-card)}
.pt-row[aria-current="true"]{background:var(--surface-selected)}
.pt-row__title{font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.35}
.pt-row__meta{font-size:var(--fs-secondary);color:var(--text-muted);line-height:1.4}

/* ---- v4 voice ---- */
.pt-kicker{font-size:var(--fs-eyebrow);font-weight:var(--fw-semibold);letter-spacing:var(--ls-eyebrow);color:var(--text-muted)}
.pt-display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-regular);color:var(--text-brand);margin:0;text-wrap:balance}
.pt-display b,.pt-display strong{font-weight:var(--fw-bold)}
.pt-section-title{font-size:var(--fs-section);line-height:var(--lh-section);letter-spacing:var(--ls-section);font-weight:var(--fw-bold);color:var(--text-brand);margin:0;text-wrap:balance}
.pt-lead{font-size:var(--fs-lead);line-height:1.6;color:var(--text-body);margin:0;text-wrap:pretty}
.pt-mark{background:linear-gradient(176deg,transparent 14%,var(--marker) 14%,var(--marker) 90%,transparent 90%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em;border-radius:.12em;color:inherit}
.pt-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--hit-target);padding:0 26px;border-radius:var(--radius-control);border:2px solid var(--border-subtle);background:var(--surface-raised);font:inherit;font-size:var(--fs-button);font-weight:var(--fw-semibold);color:var(--text-brand);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.pt-chip:hover{border-color:var(--border-field)}
.pt-chip[aria-pressed="true"]{background:var(--action-bg);border-color:var(--action-bg);color:var(--text-on-action)}
.pt-chip--rare[aria-pressed="true"]{background:var(--accent-rare);border-color:var(--accent-rare);color:#fff}
.pt-chip:disabled{background:transparent;border-style:dashed;color:var(--pt-field-border);cursor:not-allowed}
.pt-chip:focus-visible{outline:var(--focus-w) solid var(--focus-ring);outline-offset:2px}
.pt-convo{display:flex;flex-direction:column;gap:12px}
.pt-bubble{max-width:85%;padding:16px 22px;font-size:19px;line-height:1.45;border-radius:var(--radius-bubble);text-wrap:pretty}
.pt-bubble--her{align-self:flex-start;background:var(--bubble-her-bg);color:var(--bubble-her-ink);border-end-start-radius:var(--radius-bubble-tail)}
.pt-bubble--me{align-self:flex-end;background:var(--bubble-me-bg);color:var(--bubble-me-ink);border-end-end-radius:var(--radius-bubble-tail)}
.pt-bubble--me .pt-mark{background:linear-gradient(176deg,transparent 14%,var(--pt-marker-on-ink) 14%,var(--pt-marker-on-ink) 90%,transparent 90%)}
.pt-bubble__who{font-size:var(--fs-secondary);font-weight:var(--fw-semibold);color:var(--text-muted);padding:0 14px}
.pt-bubble__who--her{align-self:flex-start}.pt-bubble__who--me{align-self:flex-end}

@media (prefers-reduced-motion:reduce){*{transition-duration:0ms!important;animation-duration:0ms!important}}