.m-ph.phone-host{inline-size:var(--ph-w);flex:none;position:relative}.m-ph.size-hero{--ph-w:calc(var(--space-xxxl) * 9)}.m-ph.size-row{--ph-w:calc(var(--space-lg) * 17)}.m-ph.size-tab{--ph-w:calc(var(--space-sm) * 37)}.m-ph .phone{inline-size:var(--ph-w);block-size:calc(var(--ph-w) * 2.08);border:var(--space-sm) solid var(--m-ink);border-radius:calc(var(--radius-xxl) + var(--space-xl));background:var(--m-white);color:var(--m-ink);font-family:var(--m-font-text);font-size:var(--m-t-caption);letter-spacing:0;text-align:start;box-shadow:0 calc(var(--space-xxxl) * 1.5) calc(var(--space-xxxl) * 2) calc(var(--space-xxxl) * -1) color-mix(in srgb, var(--m-ink) 55%, transparent);flex-direction:column;font-weight:400;line-height:1.35;display:flex;overflow:hidden}.m-ph .status{padding-block:calc(var(--space-sm) + var(--space-xxs)) var(--space-xs);padding-inline:var(--space-xl);flex:none;justify-content:space-between;align-items:center;font-weight:600;display:flex}.m-ph .island{inline-size:calc(var(--space-sm) * 9);block-size:var(--space-xl);border-radius:var(--m-radius-pill);background:var(--m-ink)}.m-ph .batt{inline-size:calc(var(--space-xl) + var(--space-xxs));block-size:calc(var(--space-md) - var(--m-hairline));border-radius:calc(var(--space-xxs) * 1.5);background:var(--m-ink)}.m-ph .screen{flex-direction:column;flex:1;min-block-size:0;display:flex;position:relative;overflow:hidden}.m-ph .phone p{margin:0}.m-ph .phone .ph-swap{display:inline-grid}.m-ph .phone .ph-swap>*{grid-area:1/1}.m-ph .phone .ph-av{inline-size:var(--metric-avatar-small);block-size:var(--metric-avatar-small);border-radius:var(--m-radius-pill);color:var(--m-white);font-size:var(--m-t-caption);flex:none;place-items:center;font-weight:600;line-height:1;display:inline-grid}.m-ph .phone .ph-av-lg{inline-size:var(--metric-avatar-medium);block-size:var(--metric-avatar-medium);font-size:var(--type-subheadline-size)}.m-ph .phone .tone-emerald{background:var(--avatar-emerald)}.m-ph .phone .tone-green{background:var(--avatar-green)}.m-ph .phone .tone-blue{background:var(--avatar-blue)}.m-ph .phone .tone-violet{background:var(--avatar-violet)}.m-ph .phone .tone-pink{background:var(--avatar-pink)}.m-ph .phone .tone-amber{background:var(--avatar-amber)}.m-ph .phone .ph-dot{inline-size:calc(var(--space-xs) + var(--space-xxs));block-size:calc(var(--space-xs) + var(--space-xxs));border-radius:var(--m-radius-pill);background:currentColor;flex:none;display:inline-block}.m-ph .phone .ph-badge{min-inline-size:var(--space-xl);block-size:var(--space-xl);padding-inline:calc(var(--space-xs) + var(--space-xxs));border-radius:var(--m-radius-pill);background:var(--m-accent);color:var(--m-ink);font-size:var(--m-t-caption);flex:none;place-items:center;font-weight:700;line-height:1;display:inline-grid}.m-ph .phone .ph-chip{align-items:center;gap:var(--space-xs);block-size:calc(var(--space-xl) + var(--space-xs));padding-inline:calc(var(--space-sm) + var(--space-xxs));border-radius:var(--m-radius-pill);background:var(--surface-bg-app);white-space:nowrap;font-weight:500;display:inline-flex}.m-ph .phone .ph-chip-on{background:var(--m-bubble-out);color:var(--brand-primary-dark)}.m-ph .phone .ph-plus{inline-size:calc(var(--space-xxl) + var(--space-xxs));block-size:calc(var(--space-xxl) + var(--space-xxs));border-radius:var(--m-radius-pill);background:var(--m-ink);color:var(--m-white);place-items:center;display:inline-grid}.m-ph .phone .ph-row-main{flex:1;min-inline-size:0;display:grid}.m-ph .phone .ph-row-main>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.m-ph .phone .ph-row-main strong{font-size:var(--type-subheadline-size);font-weight:600}.m-ph .phone .ph-row-main small{font-size:var(--m-t-caption);color:var(--m-muted)}.m-ph .phone .ph-head{align-items:center;gap:var(--space-sm);padding-block:var(--space-xs) var(--space-sm);padding-inline:var(--space-md);border-block-end:var(--m-hairline) solid var(--line-hairline);background:var(--m-white);flex:none;display:flex}.m-ph .phone .ph-head .ph-row-main small{color:var(--m-primary)}.m-ph .phone .ph-sub{justify-content:space-between;align-items:center;gap:var(--space-sm);padding-block:var(--space-xs);padding-inline:var(--space-md);border-block-end:var(--m-hairline) solid var(--line-hairline);background:var(--m-white);flex:none;font-weight:600;display:flex}.m-ph .phone .ph-sub .ph-swap{justify-items:end}.m-ph .phone .ph-num{align-items:center;gap:var(--space-xs);white-space:nowrap;display:inline-flex}.m-ph .phone .ph-win{align-items:center;gap:calc(var(--space-xs) + var(--space-xxs));padding-block:var(--space-xs);padding-inline:var(--space-md);background:color-mix(in srgb, var(--m-bubble-out) 55%, var(--m-white));color:var(--brand-primary-dark);white-space:nowrap;flex:none;font-weight:500;display:flex}.m-ph .phone .ph-win .ph-dot{color:var(--m-accent)}.m-ph .phone .ph-win b{margin-inline-start:auto;font-weight:600}.m-ph .phone .ph-body{align-content:end;gap:var(--space-sm);min-block-size:0;padding-block:var(--space-sm) var(--space-md);padding-inline:var(--space-sm) var(--space-sm);background:var(--m-paper);flex:1;grid-template-columns:minmax(0,1fr);display:grid;overflow:hidden}.m-ph .phone .ph-day,.m-ph .phone .ph-sys{justify-self:center;align-items:center;gap:var(--space-xs);padding-block:var(--space-xxs);padding-inline:calc(var(--space-sm) + var(--space-xxs));border-radius:var(--m-radius-pill);background:color-mix(in srgb, var(--m-white) 85%, transparent);color:var(--m-muted);white-space:nowrap;display:inline-flex}.m-ph .phone .ph-in,.m-ph .phone .ph-out{align-items:flex-end;column-gap:var(--space-sm);max-inline-size:86%;padding-block:calc(var(--space-xs) + var(--space-xxs));padding-inline:calc(var(--space-sm) + var(--space-xxs));border-radius:var(--radius-large);font-size:var(--type-footnote-size);flex-wrap:wrap;display:flex}.m-ph .phone .ph-in{background:var(--bubble-in);box-shadow:var(--shadow-small);border-end-start-radius:var(--m-radius-tail);justify-self:start}.m-ph .phone .ph-out{background:var(--m-bubble-out);border-end-end-radius:var(--m-radius-tail);justify-self:end}.m-ph .phone .ph-from{font-size:var(--m-t-caption);color:var(--brand-primary-dark);flex-basis:100%;font-weight:600}.m-ph .phone .ph-text{flex:auto;min-inline-size:0}.m-ph .phone .ph-meta{align-items:center;gap:var(--space-xxs);font-size:var(--m-t-caption);color:var(--m-muted);white-space:nowrap;margin-inline-start:auto;line-height:1.2;display:inline-flex}.m-ph .phone .ph-tick{color:var(--message-delivered);display:inline-flex}.m-ph .phone .ph-tick.is-sent{color:var(--message-sent)}.m-ph .phone .ph-tick.is-read{color:var(--m-read)}.m-ph .phone .ph-tick svg{inline-size:var(--space-md);block-size:var(--space-md)}.m-ph .phone .ph-ai{z-index:1;gap:var(--space-xs);margin-inline:var(--space-sm);padding:var(--space-sm) calc(var(--space-sm) + var(--space-xxs));border-radius:var(--radius-large);background:var(--m-white);font-size:var(--type-footnote-size);box-shadow:0 0 0 var(--m-hairline) var(--line-hairline), var(--shadow-large);flex:none;display:grid;position:relative}.m-ph .phone .ph-ai-head{align-items:center;gap:var(--space-xs);font-size:var(--m-t-caption);color:var(--m-primary);font-weight:600;display:flex}.m-ph .phone .ph-ai-head>:last-child{color:var(--m-muted);margin-inline-start:auto}.m-ph .phone .ph-ai-btns{gap:calc(var(--space-xs) + var(--space-xxs));grid-template-columns:1fr 1fr;margin-block-start:var(--space-xxs);display:grid}.m-ph .phone .ph-ai-btns>span{justify-content:center;align-items:center;gap:var(--space-xs);block-size:calc(var(--space-xxxl) - var(--space-xxs));border-radius:var(--radius-medium);background:var(--surface-bg-app);font-size:var(--m-t-caption);font-weight:600;display:inline-flex}.m-ph .phone .ph-ai-btns>.is-send{background:var(--m-accent);color:var(--m-ink)}.m-ph .phone .ph-comp{align-items:center;gap:var(--space-sm);padding-block:var(--space-sm) var(--space-md);padding-inline:var(--space-sm);background:var(--m-paper);flex:none;display:flex}.m-ph .phone .ph-field{align-items:center;gap:calc(var(--space-xs) + var(--space-xxs));min-inline-size:0;block-size:var(--space-xxxl);padding-inline:var(--space-sm) var(--space-md);border-radius:var(--m-radius-pill);background:var(--m-white);color:var(--m-muted);flex:1;display:flex}.m-ph .phone .ph-field>span{font-size:var(--type-footnote-size);flex:1}.m-ph .phone .ph-mic{inline-size:var(--space-xxxl);block-size:var(--space-xxxl);border-radius:var(--m-radius-pill);background:var(--m-accent);color:var(--m-ink);flex:none;place-items:center;display:grid}