/* 5.1.0: Echo One on a phone (locked screens CqeR6sNgnEvNby7Ynz8EmZ). Everything here sits under html.nx-phone,
   which is only set under 768px wide (or with ?phone), so the desktop layout never changes. */

html.nx-phone #nx, html.nx-phone.nx-melfold #nx { --nx-rail: 0px; --nx-mel: 0px; --nx-top: calc(44px + env(safe-area-inset-top, 0px)); --ph-dock: calc(64px + env(safe-area-inset-bottom, 0px)); }
html.nx-phone, html.nx-phone body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
html.nx-phone body { touch-action: manipulation; }
html.nx-phone .t3wrap { top: calc(44px + env(safe-area-inset-top, 0px)); }
html.nx-phone #nx .ph-dock, html.nx-phone #nx .ph-grab, html.nx-phone #nx .ph-line, html.nx-phone #nx .ph-more, html.nx-phone #nx .ph-call { pointer-events: auto; }
html:not(.nx-phone) #nx .ph-dock, html:not(.nx-phone) #nx .ph-grab, html:not(.nx-phone) #nx .ph-line, html:not(.nx-phone) #nx .ph-more, html:not(.nx-phone) #nx .ph-call { display: none !important; }

/* ---------- the frame: no rail, a one-line top bar ---------- */
html.nx-phone #nx .nx-rail { display: none; }
html.nx-phone #nx .nx-top { left: 0; right: 0; height: var(--nx-top); padding: env(safe-area-inset-top, 0px) 16px 0; gap: 10px; border-bottom: 0; }
html.nx-phone #nx .nx-top .nx-goal, html.nx-phone #nx .nx-top .nx-jd, html.nx-phone #nx .nx-top .nx-ny, html.nx-phone #nx .nx-tbpop { display: none !important; }
html.nx-phone #nx .nx-crumb { min-width: 0; overflow: hidden; font-size: 15px; flex: 1; }
html.nx-phone #nx .nx-crumb > * { display: none; } html.nx-phone #nx .nx-crumb > b:last-of-type, html.nx-phone #nx .nx-crumb > :last-child { display: inline; overflow: hidden; text-overflow: ellipsis; }
html.nx-phone #nx .nx-crumb > .nx-csep, html.nx-phone #nx .nx-crumb > span:last-child:not(b) { display: none; }
html.nx-phone #nx .nx-ck { margin-left: auto; } html.nx-phone #nx .nx-ck .lng { display: none; }
html.nx-phone #nx .nx-gl { left: 0; right: 0; }

/* ---------- Mel's column: hidden, except as her conversation card ---------- */
html.nx-phone #nx .nx-mel { visibility: hidden; pointer-events: none; left: 0; right: 0; width: auto; top: auto; bottom: var(--ph-dock); height: var(--ph-h); border: 0; border-radius: 14px 14px 0 0;
  background: var(--nx-cream); color: var(--nx-on-cream); padding: 34px 16px 12px; gap: 12px; box-shadow: 0 -12px 30px rgba(20,24,28,.28); z-index: 44; }
html.nx-phone.ph-c-mel #nx .nx-mel { visibility: visible; pointer-events: auto; }
html.nx-phone #nx .nx-mel .nx-mfold { display: none; }
html.nx-phone #nx .nx-mel .nx-mh { color: var(--nx-on-cream); }
html.nx-phone #nx .nx-mel .nx-nm span { color: #137F7A; }
html.nx-phone #nx .nx-mel .nx-say { color: var(--nx-on-cream); font-size: 17px; }
html.nx-phone #nx .nx-mel .nx-say.old, html.nx-phone #nx .nx-mel .nx-say:not(:last-of-type) { color: var(--nx-on-cream-2); }
html.nx-phone #nx .nx-mel .nx-me { background: var(--nx-cream-2); color: var(--nx-on-cream); }
html.nx-phone #nx .nx-mel .nx-sug button { background: #FFFCF6; border: 1px solid var(--nx-cream-line); color: var(--nx-on-cream); min-height: 36px; }
html.nx-phone #nx .nx-mel .nx-inp { background: #FFFCF6; border-color: var(--nx-cream-line); color: var(--nx-on-cream); min-height: 48px; }
html.nx-phone #nx .nx-mel .nx-inp input { color: var(--nx-on-cream); font-size: 16px; }
html.nx-phone #nx .nx-mel .nx-inp input::placeholder { color: var(--nx-on-cream-2); }
html.nx-phone #nx .nx-mel .nx-snd { color: var(--nx-on-cream-2); }
html.nx-phone.ph-nomic #nx .nx-mel .nx-mic { display: none; }
html.nx-phone.ph-kb #nx .nx-mel, html.nx-phone.ph-kb #nx :is(.nx-sheet, .nx-dash, .nx-deskp, .nx-msgs, .nx-eng, .nx-tools, .ph-more) { bottom: var(--ph-kb); }

/* ---------- the one card: every sheet and page shares its place and height ---------- */
html.nx-phone #nx :is(.nx-sheet, .nx-dash, .nx-deskp, .nx-msgs, .nx-eng, .nx-tools, .nx-tv, .dh-panel, .mm-panel, .ph-more) {
  left: 0; right: 0; width: auto; top: auto; bottom: var(--ph-dock); height: var(--ph-h); border-radius: 14px 14px 0 0; box-shadow: 0 -12px 30px rgba(20,24,28,.28); }
html.nx-phone #nx .nx-sheet { transform: none !important; }
html.nx-phone #nx .nx-sheet .nx-card { padding: 30px 16px 16px; }
html.nx-phone #nx :is(.nx-deskp, .nx-msgs, .nx-tools, .nx-dash, .nx-eng) { padding-top: 26px; }
html.nx-phone #nx .nx-mm-undertabs, html.nx-phone #nx .mm-panel.mm-undertabs { top: auto; }
html.nx-phone #nx :is(.dh-panel, .mm-panel) { z-index: 46; }
/* one card at a time: what is underneath steps aside */
html.nx-phone:is(.ph-c-sheet, .ph-c-mel, .ph-c-more, .ph-c-tv) #nx :is(.nx-dash, .nx-deskp, .nx-msgs, .nx-eng, .nx-tools) { visibility: hidden !important; }
html.nx-phone:is(.ph-c-mel, .ph-c-more) #nx :is(.nx-sheet, .nx-tv, .dh-panel, .mm-panel) { visibility: hidden !important; }
html.nx-phone.ph-c-studio #nx .nx-st2p { left: 0; right: 0; top: var(--nx-top); bottom: var(--ph-dock); }
html.nx-phone #nx .nx-eve { left: 0; right: 0; }

/* the handle and the X, always at the top edge of the card */
html.nx-phone #nx .ph-grab { position: absolute; left: 0; right: 0; bottom: calc(var(--ph-dock) + var(--ph-h) - 32px); height: 32px; z-index: 48; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 12px; touch-action: none; cursor: grab; }
html.nx-phone.ph-kb #nx .ph-grab { bottom: calc(var(--ph-kb) + var(--ph-h) - 32px); }
html.nx-phone #nx .ph-hd { position: absolute; left: 50%; top: 8px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--nx-cream-line); }
html.nx-phone #nx .ph-bk { font: 600 13.5px var(--nx-sans); color: var(--nx-on-cream-2); padding: 8px 4px; visibility: hidden; position: relative; z-index: 1; }
html.nx-phone #nx .ph-x { width: 32px; height: 32px; margin-top: 10px; border-radius: 50%; background: var(--nx-cream-2); color: var(--nx-on-cream); display: grid; place-items: center; position: relative; z-index: 1; }
html.nx-phone #nx .ph-x svg { width: 15px; height: 15px; }
html.nx-phone:is(.ph-c-none, .ph-c-studio) #nx .ph-grab, html.nx-phone.ph-panel #nx .ph-x, html.nx-phone.ph-c-home[data-ph-h="low"] #nx .ph-x { display: none; }
html.nx-phone.ph-c-home #nx .ph-x { visibility: hidden; }
html.nx-phone[data-ph-h="half"].ph-c-home #nx .ph-x, html.nx-phone[data-ph-h="full"].ph-c-home #nx .ph-x { visibility: visible; }

/* ---------- the dock: Home, My Desk, Mel, Messages, More ---------- */
html.nx-phone #nx .ph-dock { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ph-dock); padding: 6px 4px env(safe-area-inset-bottom, 0px); background: var(--nx-deep); border-top: 1px solid #2C3238; z-index: 49; display: flex; align-items: flex-start; justify-content: space-around; }
html.nx-phone.ph-kb #nx .ph-dock { display: none; }
html.nx-phone #nx .ph-db { position: relative; width: 64px; min-height: 52px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 6px; color: var(--nx-on-slate-2); font: 500 11px/1.2 var(--nx-sans); transition: color 160ms cubic-bezier(0,0,0,1), transform 100ms; }
html.nx-phone #nx .ph-db svg { width: 24px; height: 24px; } html.nx-phone #nx .ph-db:active { transform: scale(.94); }
html.nx-phone #nx .ph-db.on { color: var(--nx-cream); font-weight: 600; }
html.nx-phone #nx .ph-dot { position: absolute; top: 3px; right: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--nx-led); box-shadow: 0 0 0 2px var(--nx-deep), 0 0 8px var(--nx-led-glow); transform: scale(0); transition: transform 300ms cubic-bezier(.34,1.56,.64,1); }
html.nx-phone #nx .lit > .ph-dot { transform: scale(1); }
html.nx-phone #nx .ph-mel { position: relative; width: 72px; height: 76px; margin-top: -22px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--nx-on-slate-2); font: 500 11px/1.2 var(--nx-sans); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.nx-phone #nx .ph-face { width: 56px; height: 56px; border-radius: 50%; background: #8C7A6B center 30% / cover no-repeat; box-shadow: 0 0 0 3px var(--nx-deep), 0 0 0 5px rgba(101,205,210,.7), 0 0 14px var(--nx-led-glow); transition: transform 160ms cubic-bezier(0,0,0,1), box-shadow 200ms; animation: ph-breathe 2.4s ease-in-out infinite; }
@keyframes ph-breathe { 50% { box-shadow: 0 0 0 3px var(--nx-deep), 0 0 0 5px rgba(101,205,210,.95), 0 0 20px rgba(101,205,210,.6); } }
html.nx-phone #nx .ph-mel.speaking .ph-face { box-shadow: 0 0 0 3px var(--nx-deep), 0 0 0 5px var(--nx-led), 0 0 0 9px rgba(101,205,210,.25), 0 0 18px rgba(101,205,210,.55); }
html.nx-phone #nx .ph-mel.listening .ph-face { transform: scale(1.08); box-shadow: 0 0 0 3px var(--nx-deep), 0 0 0 9px var(--nx-led), 0 0 22px rgba(101,205,210,.6); animation: none; }
html.nx-phone #nx .ph-mel.thinking .ph-face { animation: ph-think 1.1s ease-in-out infinite; }
@keyframes ph-think { 50% { opacity: .78; } }
html.nx-phone #nx .ph-bars { position: absolute; right: 0; top: 22px; display: none; gap: 2px; align-items: center; height: 18px; }
html.nx-phone #nx .ph-bars i { width: 2.5px; border-radius: 2px; background: var(--nx-led); animation: ph-bar .9s ease-in-out infinite; height: 8px; }
html.nx-phone #nx .ph-bars i:nth-child(2) { animation-delay: .15s; } html.nx-phone #nx .ph-bars i:nth-child(3) { animation-delay: .3s; }
@keyframes ph-bar { 50% { height: 17px; } }
html.nx-phone #nx .ph-mel.speaking .ph-bars { display: flex; }
html.nx-phone #nx .ph-mel.unread::after { content: ""; position: absolute; top: 2px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--nx-led); box-shadow: 0 0 0 2px var(--nx-deep); }
html.nx-phone #nx .ph-mel.open .ph-nm { color: var(--nx-cream); font-weight: 600; }

/* ---------- Mel's line, above the dock ---------- */
html.nx-phone #nx .ph-line { position: absolute; left: 10px; right: 10px; bottom: calc(var(--ph-dock) + 10px); z-index: 47; background: var(--nx-deep); color: var(--nx-cream); border-radius: 12px; padding: 11px 13px; font-size: 15px; line-height: 1.42;
  box-shadow: 0 10px 24px rgba(20,24,28,.35), inset 3px 0 0 var(--nx-led); opacity: 0; transform: translateY(10px); visibility: hidden; transition: opacity 150ms cubic-bezier(0,0,0,1), transform 400ms cubic-bezier(.2,.9,.3,1), visibility 0s 150ms; }
html.nx-phone #nx .ph-line.on { opacity: 1; transform: none; visibility: visible; transition: opacity 150ms cubic-bezier(0,0,0,1), transform 400ms cubic-bezier(.2,.9,.3,1); }
html.nx-phone #nx .ph-line p { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html.nx-phone #nx .ph-lc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } html.nx-phone #nx .ph-lc:empty { display: none; }
html.nx-phone #nx .ph-lc button { min-height: 36px; padding: 0 11px; border-radius: 6px; border: 1px solid var(--nx-line); background: var(--nx-slate-2); color: var(--nx-cream); font: 500 13.5px var(--nx-sans); }
html.nx-phone #nx .ph-lc button.pri { background: var(--nx-cream); color: var(--nx-on-cream); border-color: var(--nx-cream); font-weight: 600; }
html.nx-phone.ph-c-mel #nx .ph-line, html.nx-phone.ph-kb #nx .ph-line { display: none; }
/* the main button of a card stays clear of the line */
html.nx-phone.ph-c-studio #nx .ph-line { bottom: calc(var(--ph-dock) + 76px); }

/* ---------- More ---------- */
html.nx-phone #nx .ph-more { position: absolute; background: var(--nx-cream); color: var(--nx-on-cream); padding: 40px 16px 16px; display: flex; flex-direction: column; gap: 8px; z-index: 45; visibility: hidden; overflow-y: auto; }
html.nx-phone.ph-c-more #nx .ph-more { visibility: visible; }
html.nx-phone #nx .ph-more h2 { margin: 0 0 6px; font-size: 21px; font-weight: 700; color: var(--nx-on-cream); }
html.nx-phone #nx .ph-more button { position: relative; text-align: left; min-height: 56px; padding: 10px 40px 10px 14px; border: 1px solid var(--nx-cream-line); border-radius: 10px; background: #FFFCF6; display: flex; flex-direction: column; justify-content: center; transition: transform 100ms; }
html.nx-phone #nx .ph-more button:active { transform: scale(.99); }
html.nx-phone #nx .ph-more button::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-52%); font-size: 22px; color: var(--nx-on-cream-2); }
html.nx-phone #nx .ph-more b { font-size: 15.5px; font-weight: 600; } html.nx-phone #nx .ph-more span { font-size: 13px; color: var(--nx-on-cream-2); }
html.nx-phone #nx .ph-more .ph-dot { top: 50%; right: 34px; margin-top: -4px; box-shadow: none; }
html.nx-phone #nx .ph-more .ph-again { margin-top: 10px; } html.nx-phone #nx .ph-more .ph-again::after { content: ""; }
html.nx-phone.ph-c-more #nx .ph-more [data-k="engine"] .ph-dot { transform: scale(var(--ph-englit, 0)); }

/* ---------- toasts and Undo sit above the dock ---------- */
html.nx-phone #nx .dh-toast { left: 50%; bottom: calc(var(--ph-dock) + 14px); max-width: calc(100% - 24px); }

/* ---------- Home: the Dashboard on cream, one column ---------- */
html.nx-phone #nx .nx-dash { --nx-cream: #424B54; --nx-on-slate-2: #66747F; background: var(--nx-paper, #FFF7E9); color: #424B54; overflow-y: auto; -webkit-overflow-scrolling: touch; }
html.nx-phone #nx .nx-dash > * { max-width: none; }

/* ---------- Messages: the list, then the conversation ---------- */
html.nx-phone #nx .nx-msgs { grid-template-columns: minmax(0, 1fr); }
html.nx-phone.ph-ms-list #nx .nx-msgs > :not(.nx-inbox) { display: none !important; }
html.nx-phone:not(.ph-ms-list) #nx .nx-msgs > .nx-inbox { display: none !important; }

/* ---------- the Studio fills the space between the top line and the dock ---------- */
html.nx-phone.ph-c-studio .t3wrap { visibility: hidden; }

/* reduced motion: the springs are shorter and the breathing stops */
@media (prefers-reduced-motion: reduce) { html.nx-phone #nx .ph-face, html.nx-phone #nx .ph-bars i { animation: none; } }

/* ---------- 5.1.0 pass 2: the top line, the landing, the cream pages ---------- */
html.nx-phone #nx .nx-crumb { display: none; }
html.nx-phone #nx .ph-title { font-size: 15px; font-weight: 600; color: var(--nx-cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
html:not(.nx-phone) #nx .ph-title { display: none; }
html.nx-phone.ph-landing #nx :is(.ph-dock, .ph-grab, .ph-line) { display: none; }

/* Home (the Dashboard) and the Engine (Processes, Team, Memory) are slate on a laptop; on a phone they are read on the cream card */
html.nx-phone #nx :is(.nx-dash, .nx-eng) { --nx-cream: #424B54; --nx-on-slate-2: #66747F; --nx-led: #137F7A; background: #FFF7E9; color: #424B54; }
html.nx-phone #nx .nx-eng { --nx-slate: #424B54; }
html.nx-phone #nx :is(.dh-pn, .dh-wy, .dh-tl, .dh-team, .mm-tile, .mm-lr, .nx-pc, .nx-trow, .mm-search) { background: #FFFCF6 !important; box-shadow: inset 0 0 0 1px #D6CEC2 !important; border-color: #D6CEC2 !important; }
html.nx-phone #nx :is(.dh-gl, .dh-dn, .dh-tr) { border-top-color: #E7DED0 !important; }
html.nx-phone #nx :is(.dh-tag, .dh-ic, .mm-chips button) { background: #F3EEE7; }
html.nx-phone #nx .dh-prog { background: #E7DED0; }
html.nx-phone #nx .dh-stack .a { background: #424B54 !important; color: #FFF7E9 !important; } html.nx-phone #nx .dh-stack .p { background: #D6CEC2 !important; color: #424B54 !important; }
html.nx-phone #nx .dh-btn { color: #FFF7E9 !important; min-height: 38px; } html.nx-phone #nx .dh-btn i { background: #65CDD2; }
html.nx-phone #nx .dh-btn.ghost { color: #424B54 !important; box-shadow: inset 0 0 0 1px rgba(30,43,60,.28); }
html.nx-phone #nx :is(.nx-dash, .nx-eng) .dh-clay { color: #A45A3B; }
html.nx-phone #nx .nx-dash .dh-in { padding: 6px 16px 40px; gap: 10px; max-width: none; font-size: 14px; }
html.nx-phone #nx .dh-line { font-size: 21px; }
html.nx-phone #nx :is(.dh-g2, .dh-cols) { grid-template-columns: minmax(0, 1fr); }
html.nx-phone #nx .dh-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.nx-phone #nx .dh-wy { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 9px 10px; min-height: 52px; } html.nx-phone #nx .dh-wy .dh-tag { display: none; }
html.nx-phone #nx .dh-tr { grid-template-columns: 30px minmax(0, 1fr) 48px 40px; padding: 9px 12px; min-height: 48px; }
html.nx-phone #nx .dh-tr > :nth-child(n+5) { display: none; }
html.nx-phone #nx .nx-etabs { left: 16px; right: 16px; top: 34px; display: flex; background: #F3EEE7; z-index: 3; }
html.nx-phone #nx .nx-etabs button { flex: 1; min-height: 36px; } html.nx-phone #nx .nx-etabs button.on { color: #FFF7E9; background: #424B54; }
html.nx-phone #nx .nx-fams, html.nx-phone #nx .nx-jr { grid-template-columns: minmax(0, 1fr); }
html.nx-phone #nx .mm-page { padding: 82px 16px 40px; } html.nx-phone #nx .mm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- 5.1.0 pass 3: the Engine's scrollers sit under its tabs; card buttons stay pinned ---------- */
html.nx-phone #nx .nx-eng :is(.nx-ops, .nx-mem) { top: 78px; background: #FFF7E9; }
html.nx-phone #nx .nx-eng .nx-opsin { padding: 4px 16px 28px; }
html.nx-phone #nx .nx-eng .mm-page { padding-top: 4px; }
html.nx-phone #nx .nx-sheet .nx-card .nx-foot { position: sticky; bottom: -16px; margin: auto -16px -16px; padding: 10px 16px 14px; background: var(--nx-cream); border-top: 1px solid var(--nx-cream-line); z-index: 2; flex-wrap: wrap; }
html.nx-phone #nx .nx-sheet .nx-card .nx-foot > * { flex: 1 1 auto; min-height: 48px; justify-content: center; }

/* ---------- 5.1.0: the Studio on a phone: one short bar, the menus as a list, no minimap ---------- */
html.nx-phone #nx .nx-st2p .nx-sttool { left: 10px !important; right: 10px; bottom: 10px; transform: none !important; justify-content: space-around; max-width: none; }
html.nx-phone #nx .nx-st2p .nx-sttool > :not(.nx-stb):not([data-k="step"]):not([data-k="pen"]):not([data-k="undo"]):not([data-k="export"]) { display: none !important; }
html.nx-phone #nx .nx-st2p .nx-sttool > button { min-width: 44px; min-height: 44px; }
html.nx-phone #nx .nx-st2p .nx-sttool > [data-k="step"] span::before { content: "+ "; }
html.nx-phone #nx .nx-st2p :is(.nx-stmini, .nx-stfind, .nx-stsrch) { display: none !important; }
html.nx-phone #nx .nx-st2p .nx-stbar { max-width: calc(100% - 20px); overflow-x: auto; scrollbar-width: none; }
html.nx-phone #nx .nx-stmenu { position: fixed !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: var(--ph-dock) !important; width: auto !important; max-height: 62vh; overflow-y: auto; border-radius: 14px 14px 0 0 !important; padding: 10px 8px 14px !important; z-index: 60 !important; box-shadow: 0 -12px 30px rgba(20,24,28,.3) !important; }
html.nx-phone #nx .nx-stmenu button, html.nx-phone #nx .nx-stmenu [role="menuitem"] { min-height: 44px; font-size: 15px; }
html.nx-phone #nx .nx-st2p .nx-stdd { left: 10px !important; right: 10px; width: auto !important; }
html.nx-phone #nx .nx-st2p .nx-stpen { left: 10px !important; right: 10px; bottom: 66px !important; }
html.nx-phone #nx .nx-st2p .nx-stv { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ---------- Tools: rows, not tiles ---------- */
html.nx-phone #nx .nx-tools .nx-tiles { grid-template-columns: minmax(0, 1fr); }
html.nx-phone #nx .nx-tools .nx-folds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.nx-phone #nx .nx-tools > * { max-width: none; }

/* ---------- a process: the steps as a list, the drawing full screen ---------- */
html.nx-phone #nx .ph-sd { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 52px; padding: 9px 14px; margin: 10px 0 4px; border-radius: 10px; background: #FFFCF6; box-shadow: inset 0 0 0 1px #D6CEC2; text-align: left; position: relative; }
html.nx-phone #nx .ph-sd::after { content: "›"; position: absolute; right: 14px; top: 50%; transform: translateY(-52%); font-size: 22px; color: #66747F; }
html.nx-phone #nx .ph-sd b { font-weight: 600; font-size: 14.5px; } html.nx-phone #nx .ph-sd span { font-size: 12.5px; color: #66747F; }
html.nx-phone #nx .ph-steps { display: flex; flex-direction: column; gap: 6px; }
html.nx-phone #nx .ph-step { display: grid; grid-template-columns: 18px 30px minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; min-height: 52px; padding: 7px 10px; border-radius: 10px; background: #FFFCF6; box-shadow: inset 0 0 0 1px #D6CEC2; transition: transform 100ms; }
html.nx-phone #nx .ph-step:active { transform: scale(.99); } html.nx-phone #nx .ph-step.you { box-shadow: inset 3px 0 0 #137F7A, inset 0 0 0 1px #D6CEC2; }
html.nx-phone #nx .ph-step .k { font-size: 12px; font-weight: 700; color: #66747F; } html.nx-phone #nx .ph-step .nx-f { width: 28px; height: 28px; margin: 0; }
html.nx-phone #nx .ph-step .t b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; } html.nx-phone #nx .ph-step .t em { display: block; font-style: normal; font-size: 12px; color: #66747F; }
html.nx-phone #nx .ph-lanes { display: none; }
html.nx-phone #nx .ph-lanes.on { display: block; position: fixed; left: 0; right: 0; top: var(--nx-top); bottom: var(--ph-dock); z-index: 58; background: #FFF7E9; overflow: auto; padding: 56px 12px 20px; -webkit-overflow-scrolling: touch; }
html.nx-phone #nx .ph-lx { position: fixed; right: 12px; top: calc(var(--nx-top) + 10px); width: 36px; height: 36px; border-radius: 50%; background: #F3EEE7; color: #424B54; display: grid; place-items: center; z-index: 59; }
html.nx-phone #nx .ph-lx svg { width: 16px; height: 16px; }
html.nx-phone.ph-foot #nx .ph-line { bottom: calc(var(--ph-dock) + 84px); }

/* ---------- My Desk, Everyone: one column per screen, names to jump between them ---------- */
html.nx-phone #nx .nx-cols4 { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px; }
html.nx-phone #nx .nx-cols4::-webkit-scrollbar { display: none; }
html.nx-phone #nx .nx-cols4 > div { flex: 0 0 calc(100% - 4px); scroll-snap-align: start; }
html.nx-phone #nx .nx-cols4 .nx-colh { display: none; }
html.nx-phone #nx .ph-cn { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 6px 0 10px; }
html.nx-phone #nx .ph-cn button { flex: none; min-height: 34px; padding: 0 12px; border-radius: 99px; background: var(--nx-cream-2); color: var(--nx-on-cream-2); font: 600 12.5px var(--nx-sans); white-space: nowrap; }
html.nx-phone #nx .ph-cn button.on { background: var(--nx-slate); color: var(--nx-cream); }
html:not(.nx-phone) #nx .ph-cn { display: none; }
html.nx-phone #nx .nx-deskp > * { max-width: none; }
html.nx-phone #nx .nx-deskp { padding-left: 0; padding-right: 0; }

/* ---------- the Engine's own cream cards stay cream on the cream page; its cream buttons turn slate ---------- */
html.nx-phone #nx .nx-eng :is(.mm-res, .mm-card, .nx-attn button, .nx-lanes, .nx-ob1, .nx-strip, .nx-mcard, .nx-mlist) { background: #FFFCF6; color: #1E2B3C; box-shadow: inset 0 0 0 1px #D6CEC2; }
html.nx-phone #nx .nx-eng :is(.mm-btn, .mm-chips button.on) { background: #424B54; color: #FFF7E9; }
html.nx-phone #nx .nx-eng .mm-chk { padding: 8px 16px 24px; justify-content: flex-start; }
html.nx-phone #nx .nx-eng .mm-rep { background: #FFFCF6; } html.nx-phone #nx .nx-eng .mm-rep button { color: #424B54; }
html.nx-phone #nx .nx-eng .mm-dots i { background: #D6CEC2; }
html.nx-phone #nx .nx-eng .mm-acts > * { flex: 1 1 calc(50% - 4px); min-height: 48px; justify-content: center; }
html.nx-phone #nx .mm-toast { bottom: calc(var(--ph-dock) + 14px); max-width: calc(100% - 24px); }
html.nx-phone.ph-c-tv #nx .nx-sheet { visibility: hidden !important; }
html.nx-phone #nx .nx-tv { z-index: 45; }
/* Memory: the week-by-week chart goes under the lists */
html.nx-phone #nx .mm-cols { flex-direction: column; align-items: stretch; }
html.nx-phone #nx .mm-cols > * { min-width: 0; width: auto; }
html.nx-phone #nx .mm-side { width: auto; background: #FFFCF6; box-shadow: inset 0 0 0 1px #D6CEC2; }
html.nx-phone #nx .nx-eng .mm-btn { color: #FFF7E9 !important; } html.nx-phone #nx .nx-eng .mm-btn:hover { background: #353C43; } html.nx-phone #nx .nx-eng .mm-btn i { background: #65CDD2; }
html.nx-phone #nx .nx-eng :is(.mm-pbtn.pri, .nx-ostar, .nx-bx .n, .nx-cur span, .nx-mcard .nx-mb button.pri, .nx-tabs button.on) { color: #FFF7E9 !important; }

/* ---------- 5.2.0 polish (iPhone test, plan 5FTUwWK5B2Uomu2peBqAkg) ---------- */
/* B: Mel's line: two lines at most, an X, swipe to close */
html.nx-phone #nx .ph-line { padding-right: 44px; touch-action: none; cursor: pointer; }
html.nx-phone #nx .ph-line p { -webkit-line-clamp: 2; }
html.nx-phone #nx .ph-lx2 { position: absolute; right: 6px; top: 6px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--nx-on-slate-2); }
html.nx-phone #nx .ph-lx2 svg { width: 15px; height: 15px; } html.nx-phone #nx .ph-lx2:active { background: var(--nx-slate-2); }
/* C: Mel's face sits higher, with room between it and her name */
html.nx-phone #nx .ph-mel { margin-top: -30px; height: 84px; gap: 6px; }
html.nx-phone #nx .ph-bars { top: 30px; }
/* F: the card keeps clear of her raised face at the end of its content */
html.nx-phone #nx :is(.nx-sheet .nx-card, .nx-deskp, .nx-tools, .nx-inbox, .ph-more, .nx-eng .nx-opsin, .nx-eng .mm-page) { padding-bottom: 40px; }
html.nx-phone #nx .nx-dash .dh-in { padding-bottom: 56px; }
/* E: the Engine starts just under its tabs */
html.nx-phone #nx .nx-eng .nx-opsin > :first-child { margin-top: 6px !important; }
/* H: More and Mel's card leave a row for the way back */
html.nx-phone #nx .ph-more { padding-top: 56px; } html.nx-phone #nx .ph-more h2 { margin: 0 0 6px !important; }
html.nx-phone #nx .nx-mel { padding-top: 48px; }
html.nx-phone:not(.ph-ms-list).ph-c-msgs #nx .nx-msgs { padding-top: 44px; }
html.nx-phone #nx .ph-grab { height: 40px; bottom: calc(var(--ph-dock) + var(--ph-h) - 40px); align-items: flex-start; padding-top: 4px; }
html.nx-phone.ph-kb #nx .ph-grab { bottom: calc(var(--ph-kb) + var(--ph-h) - 40px); }
html.nx-phone #nx .ph-bk { padding-top: 12px; } html.nx-phone #nx .ph-x { margin-top: 4px; }
/* G: the drawing starts at its names, the badges sit under the words, and the dock stays on top */
html.nx-phone #nx .ph-dock { z-index: 59; }
html.nx-phone #nx .ph-lanes.on { z-index: 56; } html.nx-phone #nx .ph-lx { z-index: 57; }
html.nx-phone #nx .ph-lanes .nx-bx .n { position: static; display: inline-block; margin-top: 4px; }
html.nx-phone #nx .ph-lanes .nx-bx { height: auto !important; min-height: 92px; }
/* D: the handle reads as a handle */
html.nx-phone #nx .ph-hd { width: 44px; height: 5px; top: 8px; background: #C9BFB1; }

/* ---------- 5.2.1: Mel's line is words only; Undo has its own note; her name clear of her ring; no sound waves in the dock ---------- */
html.nx-phone #nx .ph-lc { display: none !important; }
html.nx-phone #nx .ph-line { padding: 12px 46px 12px 14px; }
html.nx-phone #nx .ph-mel { margin-top: -36px; height: 90px; gap: 13px; }
html.nx-phone #nx .ph-mel .ph-nm { line-height: 1.2; }
html.nx-phone #nx .ph-bars, html.nx-phone #nx .ph-mel.speaking .ph-bars { display: none !important; }
html.nx-phone #nx .ph-undo { position: absolute; left: 50%; bottom: calc(var(--ph-dock) + 46px); transform: translate(-50%, 14px); z-index: 58; display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 16px; border-radius: 10px;
  background: var(--nx-cream); color: var(--nx-on-cream); font: 500 14px var(--nx-sans); box-shadow: 0 8px 24px rgba(20,24,28,.3); opacity: 0; visibility: hidden; pointer-events: auto; white-space: nowrap; max-width: calc(100% - 24px);
  transition: opacity 150ms cubic-bezier(0,0,0,1), transform 400ms cubic-bezier(.2,.9,.3,1), visibility 0s 150ms; }
html.nx-phone #nx .ph-undo.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 150ms cubic-bezier(0,0,0,1), transform 400ms cubic-bezier(.2,.9,.3,1); }
html.nx-phone #nx .ph-undo span { overflow: hidden; text-overflow: ellipsis; }
html.nx-phone #nx .ph-undo button { min-height: 36px; padding: 0 12px; border-radius: 6px; font: 600 14px var(--nx-sans); color: #137F7A; }
html.nx-phone #nx .ph-line.on ~ .ph-undo.on { bottom: calc(var(--ph-dock) + 110px); }
html:not(.nx-phone) #nx .ph-undo { display: none !important; }
html.nx-phone #nx .ph-line { bottom: calc(var(--ph-dock) + 40px); }
html.nx-phone.ph-foot #nx .ph-line { bottom: calc(var(--ph-dock) + 96px); }
html.nx-phone #nx .ph-undo { bottom: calc(var(--ph-dock) + 40px); }
html.nx-phone #nx .ph-line.on ~ .ph-undo.on { bottom: calc(var(--ph-dock) + 104px); }

/* ================= 5.3.0: the calmer phone (locked PG9DP9sQ1gww9EKiS9Qzcx) ================= */
/* every page fills the space between the top line and the dock: no rounded card, no shadow, nothing to drag */
html.nx-phone #nx :is(.nx-sheet, .nx-dash, .nx-deskp, .nx-msgs, .nx-eng, .nx-tools, .nx-tv, .dh-panel, .mm-panel) { border-radius: 0; box-shadow: none; }
html.nx-phone #nx :is(.nx-deskp, .nx-msgs, .nx-tools, .nx-dash, .nx-eng) { padding-top: 0; }
html.nx-phone #nx .nx-sheet .nx-card { padding-top: 14px; }
html.nx-phone #nx .nx-eng .nx-etabs { top: 10px; } html.nx-phone #nx .nx-eng :is(.nx-ops, .nx-mem) { top: 54px; }
html.nx-phone #nx .ph-grab, html.nx-phone #nx .ph-line { display: none !important; }
/* pages slide in from the right */
@keyframes ph-in { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
html.nx-phone #nx .ph-in { animation: ph-in 320ms cubic-bezier(.2,.9,.3,1) both; }
@media (prefers-reduced-motion: reduce) { html.nx-phone #nx .ph-in { animation: none; } }
/* Mel's chat is a full page too */
html.nx-phone #nx .nx-mel { height: var(--ph-h); border-radius: 0; box-shadow: none; padding-top: 14px; }
html.nx-phone.ph-mel-on #nx .nx-mel { visibility: visible; pointer-events: auto; }
html.nx-phone.ph-mel-on #nx :is(.nx-sheet, .nx-dash, .nx-deskp, .nx-msgs, .nx-eng, .nx-tools, .nx-tv, .dh-panel, .mm-panel, .nx-st2p) { visibility: hidden !important; }
html.nx-phone #nx .ph-mel.unread::after { top: 0; right: 6px; width: 12px; height: 12px; box-shadow: 0 0 0 2px var(--nx-deep), 0 0 8px var(--nx-led-glow); }
/* the way back on its own row */
html.nx-phone #nx .ph-bkrow { position: absolute; left: 0; right: 0; top: var(--nx-top); height: 40px; z-index: 50; display: none; align-items: center; padding: 0 16px; text-align: left; background: var(--nx-cream); color: var(--nx-on-cream-2); font: 600 14px var(--nx-sans); pointer-events: auto; border-bottom: 1px solid var(--nx-cream-line); }
html.nx-phone.ph-bk-on #nx .ph-bkrow { display: flex; }
html:not(.nx-phone) #nx .ph-bkrow, html:not(.nx-phone) #nx .ph-home, html:not(.nx-phone) #nx .ph-peek, html:not(.nx-phone) #nx .ph-shade, html:not(.nx-phone) .ph-laptop { display: none !important; }
html.nx-phone.ph-bk-on.ph-mel-on #nx .nx-mel { padding-top: 54px; }
html.nx-phone.ph-bk-on.ph-c-dash #nx .nx-dash { padding-top: 40px; }
html.nx-phone.ph-bk-on.ph-c-msgs:not(.ph-ms-list) #nx .nx-msgs { padding-top: 40px; }
/* Home: the city and one small card from Mel */
html.nx-phone #nx .ph-home { position: absolute; left: 10px; right: 10px; bottom: calc(var(--ph-dock) + 40px); z-index: 45; background: var(--nx-cream); color: var(--nx-on-cream); border-radius: 14px; padding: 14px 14px 12px; box-shadow: 0 12px 30px rgba(20,24,28,.32);
  pointer-events: auto; display: none; flex-direction: column; gap: 6px; animation: ph-rise 420ms cubic-bezier(.2,.9,.3,1) both; }
@keyframes ph-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.nx-phone.ph-c-none:not(.ph-mel-on):not(.ph-peek-on):not(.ph-landing) #nx .ph-home { display: flex; }
html.nx-phone #nx .ph-hw { display: grid; grid-template-columns: 32px auto; column-gap: 9px; align-items: center; } html.nx-phone #nx .ph-hw b { font-size: 14px; } html.nx-phone #nx .ph-hw em { grid-column: 2; font-style: normal; font-size: 12px; color: var(--nx-on-cream-2); margin-top: -4px; }
html.nx-phone #nx .ph-hf { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: #8C7A6B center 30% / cover no-repeat; box-shadow: 0 0 0 2px var(--nx-cream), 0 0 0 3.5px var(--nx-led); }
html.nx-phone #nx .ph-hg { margin: 4px 0 0; font-size: 17px; font-weight: 600; line-height: 1.35; letter-spacing: -.005em; }
html.nx-phone #nx .ph-hn { margin: 0 0 6px; font-size: 13.5px; color: var(--nx-on-cream-2); }
html.nx-phone #nx .ph-btn { min-height: 46px; border-radius: 6px; font: 600 15px var(--nx-sans); color: var(--nx-on-cream); box-shadow: inset 0 0 0 1px rgba(30,43,60,.28); transition: transform 100ms; }
html.nx-phone #nx .ph-btn.pri { background: var(--nx-slate); color: var(--nx-cream); box-shadow: none; } html.nx-phone #nx .ph-btn:active { transform: scale(.97); }
html.nx-phone #nx .ph-hmin { display: none; text-align: left; padding: 2px 0; } html.nx-phone #nx .ph-hmin b { display: block; font-size: 14.5px; } html.nx-phone #nx .ph-hmin span { font-size: 12.5px; color: var(--nx-on-cream-2); }
html.nx-phone.ph-fold #nx .ph-home > :not(.ph-hmin) { display: none; } html.nx-phone.ph-fold #nx .ph-hmin { display: block; } html.nx-phone.ph-fold #nx .ph-home { padding: 10px 14px; }
/* a building: the peek */
html.nx-phone #nx .ph-peek { position: absolute; left: 10px; right: 10px; bottom: calc(var(--ph-dock) + 40px); z-index: 45; background: var(--nx-cream); color: var(--nx-on-cream); border-radius: 14px; padding: 14px; box-shadow: 0 12px 30px rgba(20,24,28,.32); pointer-events: auto; display: none; flex-direction: column; gap: 4px; animation: ph-rise 380ms cubic-bezier(.2,.9,.3,1) both; }
html.nx-phone.ph-peek-on:not(.ph-mel-on) #nx .ph-peek { display: flex; }
html.nx-phone #nx .ph-pk { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--nx-on-cream-2); }
html.nx-phone #nx .ph-peek h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; } html.nx-phone #nx .ph-pn { margin: 2px 0 4px; font-size: 14px; line-height: 1.45; }
html.nx-phone #nx .ph-pf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; color: var(--nx-on-cream-2); } html.nx-phone #nx .ph-pf:empty { display: none; } html.nx-phone #nx .ph-pf em { font-style: normal; }
html.nx-phone #nx .ph-st { display: inline-flex; } html.nx-phone #nx .ph-st .nx-f { width: 28px; height: 28px; box-shadow: 0 0 0 2px var(--nx-cream); } html.nx-phone #nx .ph-st .nx-f + .nx-f { margin-left: -8px; }
/* More: a small list over the page, with a light shade */
html.nx-phone #nx .ph-shade { position: absolute; left: 0; right: 0; top: var(--nx-top); bottom: var(--ph-dock); z-index: 44; background: rgba(20,24,28,.32); display: none; pointer-events: auto; }
html.nx-phone.ph-more-on #nx .ph-shade { display: block; }
html.nx-phone #nx .ph-more { top: auto !important; height: auto !important; max-height: 70%; padding: 10px 16px 16px !important; border-radius: 14px 14px 0 0 !important; box-shadow: 0 -12px 30px rgba(20,24,28,.28) !important; visibility: hidden; animation: none; }
html.nx-phone.ph-more-on #nx .ph-more { visibility: visible; animation: ph-rise 320ms cubic-bezier(.2,.9,.3,1) both; }
html.nx-phone #nx .ph-hd2 { width: 44px; height: 5px; border-radius: 3px; background: #C9BFB1; align-self: center; margin-bottom: 8px; }
/* the welcome card's laptop line */
html.nx-phone .ph-laptop { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,247,233,.18); font-size: 13px; line-height: 1.45; color: #D7D2CB; }
html.nx-phone .ph-laptop button { font: 600 13px Figtree, system-ui, sans-serif; color: #65CDD2; background: none; border: 0; padding: 0; cursor: pointer; }
/* the Undo note sits just above the dock now nothing else floats */
html.nx-phone #nx .ph-undo { bottom: calc(var(--ph-dock) + 40px); }
/* Mel's action buttons, readable on her cream chat */
html.nx-phone #nx .nx-mel .nx-act button { color: var(--nx-on-cream); border-color: rgba(30,43,60,.28); min-height: 40px; height: auto; }
html.nx-phone #nx .nx-mel .nx-act button.nx-solid { background: var(--nx-slate); color: var(--nx-cream); border-color: var(--nx-slate); }

/* ---------- 5.3.1: the welcome card on a phone sits under the top row, with room to breathe ---------- */
html.nx-phone #cy-land .cy-top { height: 76px; padding: env(safe-area-inset-top, 0px) 16px 0; }
html.nx-phone #cy-land .cy-panel { top: calc(env(safe-area-inset-top, 0px) + 88px); left: 16px; right: 16px; transform: none; padding: 22px 20px 20px; gap: 14px;
  max-height: calc(100% - env(safe-area-inset-top, 0px) - 88px - env(safe-area-inset-bottom, 0px) - 76px); overflow-y: auto; overscroll-behavior: contain; }
html.nx-phone #cy-land.cy-out .cy-panel { transform: translateX(-120%); }
html.nx-phone #cy-land .cy-mel img { width: 46px; height: 46px; }
html.nx-phone #cy-land h1 { font-size: 28px; line-height: 1.12; }
html.nx-phone #cy-land .cy-s { font-size: 15.5px; line-height: 1.5; }
html.nx-phone #cy-land .cy-row { gap: 12px; margin-top: 2px; }
html.nx-phone #cy-land .cy-go { min-height: 48px; }
html.nx-phone #cy-land .cy-foot { bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }
html.nx-phone .ph-laptop { margin: 4px 0 0; padding-top: 12px; font-size: 13.5px; }

/* 5.4.0: the two ways in, full width on a phone */
html.nx-phone #cy-land .cy-go, html.nx-phone #cy-land .cy-alt { flex: 1 1 100%; justify-content: center; min-height: 48px; }

/* 5.4.0: More sits over Mel's small card on Home (both were on the same layer, so the card covered the list) */
html.nx-phone.ph-more-on #nx .ph-home { display: none !important; }

/* 5.7.2: the landing card fits short phones (Safari's bars showing) without scrolling inside itself: it starts under the top row, the footer mark steps aside, and spacing tightens by height */
@media (max-height: 780px) {
  html.nx-phone #cy-land .cy-panel { top: calc(env(safe-area-inset-top, 0px) + 80px); gap: 10px; padding: 18px 18px 18px; max-height: calc(100% - env(safe-area-inset-top, 0px) - 80px - env(safe-area-inset-bottom, 0px) - 14px); }
  html.nx-phone #cy-land .cy-foot { display: none; }
  html.nx-phone #cy-land h1 { font-size: 26px; }
  html.nx-phone #cy-land .cy-s { font-size: 15px; line-height: 1.45; }
  html.nx-phone #cy-land .cy-go, html.nx-phone #cy-land .cy-alt { min-height: 46px; }
  html.nx-phone .ph-laptop { padding-top: 10px; font-size: 13px; }
}
@media (max-height: 620px) {
  html.nx-phone #cy-land .cy-k { display: none; }
  html.nx-phone #cy-land .cy-mel img { width: 38px; height: 38px; }
  html.nx-phone #cy-land h1 { font-size: 23px; }
  html.nx-phone #cy-land .cy-s { font-size: 14px; line-height: 1.42; }
  html.nx-phone #cy-land .cy-go, html.nx-phone #cy-land .cy-alt { min-height: 42px; }
  html.nx-phone .ph-laptop { font-size: 12.5px; }
}

/* ---------- 5.11.0: the call. Tap Mel's face to talk hands-free; while the call is on, one slim line sits on the dock, split around her raised face:
   her teal dot and how it is going on the left, Chat and End on the right. --ph-dock grows by the strip, so every page, her chat and the cards above
   shrink by its height and nothing is covered; the dock keeps its own height ---------- */
html.nx-phone.ph-call-on #nx, html.nx-phone.nx-melfold.ph-call-on #nx { --ph-dock: calc(112px + env(safe-area-inset-bottom, 0px)); }
html.nx-phone.ph-call-on #nx .ph-dock { height: calc(64px + env(safe-area-inset-bottom, 0px)); border-top-color: transparent; }
html.nx-phone #nx .ph-call { position: absolute; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); height: 48px; z-index: 58; display: none; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); align-items: center;
  padding: 0 8px 0 16px; background: var(--nx-deep); border-top: 1px solid #2C3238; color: var(--nx-cream); font: 600 14px/1.2 var(--nx-sans); }
html.nx-phone.ph-call-on:not(.ph-kb):not(.ph-landing) #nx .ph-call { display: grid; animation: ph-rise 320ms cubic-bezier(.2,.9,.3,1) both; }
html.nx-phone #nx .ph-cl { display: flex; align-items: center; gap: 9px; min-width: 0; }
html.nx-phone #nx .ph-cs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
html.nx-phone #nx .ph-cd { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--nx-led); box-shadow: 0 0 8px var(--nx-led-glow); }
html.nx-phone #nx .ph-call[data-s="wait"] .ph-cd { animation: ph-cwait 1.1s ease-in-out infinite; }
html.nx-phone #nx .ph-call[data-s="wait"] .ph-cs { color: var(--nx-on-slate-2); }
html.nx-phone #nx .ph-call[data-s="talk"] .ph-cd { box-shadow: 0 0 0 4px rgba(101,205,210,.22), 0 0 10px var(--nx-led-glow); animation: ph-ctalk .9s ease-in-out infinite; }
@keyframes ph-cwait { 50% { opacity: .35; } }
@keyframes ph-ctalk { 50% { box-shadow: 0 0 0 6px rgba(101,205,210,.12), 0 0 14px var(--nx-led-glow); } }
html.nx-phone #nx .ph-cr { display: flex; justify-content: flex-end; gap: 6px; }
html.nx-phone #nx .ph-cr button { min-height: 36px; padding: 0 12px; border-radius: 6px; font: 600 14px var(--nx-sans); color: var(--nx-cream); box-shadow: inset 0 0 0 1px rgba(255,247,233,.32); transition: transform 100ms, background-color 160ms cubic-bezier(0,0,0,1); }
html.nx-phone #nx .ph-cr button:active { transform: scale(.95); }
html.nx-phone #nx .ph-cr .ph-cc.on { background: var(--nx-cream); color: var(--nx-on-cream); box-shadow: none; }
html.nx-phone #nx .ph-cr .ph-ce { background: #A45A3B; box-shadow: none; }
/* her face keeps one steady teal ring for the whole call (the strip says how it is going) */
html.nx-phone #nx .ph-mel.call .ph-face { transform: none; animation: none; box-shadow: 0 0 0 3px var(--nx-deep), 0 0 0 5px var(--nx-led), 0 0 0 9px rgba(101,205,210,.25), 0 0 18px rgba(101,205,210,.55); }
/* her face no longer reaches above the strip, so the cards that kept clear of it sit just above the strip */
html.nx-phone.ph-call-on #nx :is(.ph-home, .ph-peek, .ph-undo) { bottom: calc(var(--ph-dock) + 10px); }
@media (prefers-reduced-motion: reduce) { html.nx-phone #nx .ph-cd { animation: none !important; } html.nx-phone.ph-call-on #nx .ph-call { animation: none; } }
/* her chat on a phone is for typing; talking is the call */
html.nx-phone #nx .nx-mel .nx-mic { display: none; }