/* Loaded only on explicitly selected NetShow ALIVE doors. Line 15839 (VOICE-0103): the controls read the Google-path tokens (--ns-*, public/css/ns-tokens.css) where a page declares them; each fallback is the earlier literal. */ [data-door-voice-first] [hidden]{display:none!important} .ns-door-voice-controls{position:relative;z-index:10;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:16px auto;max-width:100%;padding:8px;color:inherit} .ns-door-voice-menu{position:relative;font:14px/1.5 var(--ns-font,system-ui);color:inherit} .ns-door-voice-menu summary{min-height:44px;display:flex;align-items:center;cursor:pointer;padding:8px 12px} .ns-door-voice-menu[open]{border:1px solid var(--ns-border-strong,#64748b);border-radius:12px;background:var(--ns-surface,#111b2d);color:var(--ns-text,#f8fafc)} .ns-door-voice-menu button{display:block;min-height:44px;min-width:110px;border:0;background:transparent;color:inherit;text-align:left;padding:10px 16px;cursor:pointer} .ns-door-voice-menu :focus-visible{outline:3px solid var(--ns-gold-light,#e8b45d);outline-offset:3px} [data-door-voice-caption]{display:block;width:100%;max-width:640px;margin:8px auto;padding:0 16px;text-align:center;font:clamp(16px,2vw,20px)/1.6 system-ui;overflow-wrap:anywhere} /* Line 1761: the browser's own voice is a labelled last resort; the label shows beside the caption only while it speaks. */ .ns-door-voice-backup{display:inline-block;padding:2px 10px;border:1px solid var(--ns-border-strong,#64748b);border-radius:999px;font:12px/1.4 var(--ns-font,system-ui);letter-spacing:.02em;opacity:.85} /* Line 13262: the one small 'Tap to hear ' under her caption when her greeting has no clip yet. */ .ns-door-voice-tap-to-hear{display:inline-block;margin:4px auto 0;padding:4px 12px;border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;font:13px/1.4 var(--ns-font,system-ui);cursor:pointer;min-height:32px} .ns-door-voice-tap-to-hear[hidden]{display:none} /* Line 8579: 'Listening…' beside her caption while the visitor has the turn (door_voice_listening_cue). */ .ns-door-voice-status{display:inline-block;padding:2px 12px;border:1px solid #d4a847;border-radius:999px;font:600 14px/1.5 system-ui;color:#e8b45d} /* Line 11003 (door_caption_holds_still): on the home and /hire door her caption swaps line by line ('Hi, I'm Mrs. NetShow, an AI agent.' then 'Just start talking.'); its box keeps the tallest line (two lines of 1.6 up to 480 px, one above), so Tap to talk and the face card below never move while she speaks, also where /hire's face-first bar moves the controls under the portrait (still inside the door). The dock and the communicator lay the caption out themselves. */ .ns-door .ns-door-voice-controls[data-door-caption-holds-still="1"]>[data-door-voice-caption]{min-height:1.6em} @media(max-width:480px){.ns-door .ns-door-voice-controls[data-door-caption-holds-still="1"]>[data-door-voice-caption]{min-height:3.2em}} .ns-door-voice-talk{min-height:44px;padding:8px 18px;border:1px solid var(--ns-gold,#d4a847);border-radius:999px;background:var(--ns-elevated,#1b2940);color:var(--ns-text,#fff);font:600 14px/1.4 var(--ns-font,system-ui);cursor:pointer;white-space:nowrap} .ns-door-voice-talk:focus-visible{outline:3px solid var(--ns-gold-light,#e8b45d);outline-offset:3px} /* Line 8901 (proactive_alive_greeting): the Talk control evaporates once the mouse moves on a door that can hear; her volume sits in the menu. */ .ns-door-voice-talk[data-proactive-faded]{opacity:0;pointer-events:none;transition:opacity .4s ease} .ns-door-voice-volume{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px;color:inherit} .ns-door-voice-volume input{flex:1;min-width:90px;accent-color:var(--ns-gold,#d4a847)} [data-door-voice-drawer]{max-width:100%;margin:12px auto} [data-door-voice-first] #ns-chat-root{position:relative!important;inset:auto!important;width:100%;max-width:620px;margin:auto;z-index:1!important} [data-door-voice-first] #ns-chat-root .ns-bbl,[data-door-voice-first] #ns-chat-root .ns-tip,[data-door-voice-first] #ns-chat-root .ns-greet{display:none!important} [data-door-voice-first] #ns-chat-root .ns-pnl{position:relative!important;inset:auto!important;width:100%;max-width:100%;transform:none!important} body[data-door-voice-first].pv>.ns-door-voice-controls{position:fixed;z-index:2147483002;left:12px;right:12px;bottom:16%;pointer-events:auto;background:rgba(9,15,24,.88);color:#f8fafc;border-radius:16px} [data-door-voice-first] .pv-voice,[data-door-voice-first] #aes-tap-to-talk{display:none!important} body[data-door-voice-first].pv #pv-caption{display:none!important} [data-door-voice-first] [data-ns-door-caption]{display:none} .alive-dock.alive-dock--voice-first[data-alive-dock-state]{width:min(360px,calc(100vw - 24px));max-height:90dvh;overflow:auto} .alive-dock--voice-first [data-ns-door-face]{display:flex;justify-content:center;margin:8px auto;position:relative;width:168px;height:168px} .ns-door-voice-dock-face{width:168px;height:168px;object-fit:contain;border-radius:50%} .alive-dock--voice-first .ns-alive-card-mount{position:absolute;inset:0} @media(max-width:480px){.ns-door-voice-controls{gap:4px;margin:8px auto}[data-door-voice-first] #ns-chat-root .ns-pnl{max-height:60vh}} @media(prefers-reduced-motion:reduce){[data-door-voice-first] *,[data-door-voice-first] *::before,[data-door-voice-first] *::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}} [data-door-neutral-face]{display:block;max-width:100%;max-height:100%;border-radius:inherit;flex-shrink:0} [data-door-neutral-face] .door-neutral-eye{transform-box:fill-box;transform-origin:center;animation:door-eye-blink 4s infinite} [data-door-voice-state="speaking"] .door-neutral-mouth,[data-door-voice-state="greeting"] .door-neutral-mouth{transform-box:fill-box;transform-origin:center;transform:scaleY(calc(.6 + var(--door-mouth,0) * 2))} @keyframes door-eye-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}} @media(prefers-reduced-motion:reduce){[data-door-neutral-face] .door-neutral-eye,[data-door-neutral-face] .door-neutral-mouth{animation:none!important;transform:none!important}} [data-door-voice-first] #pv-turn-mic{display:none!important} /* The profile's companion section is a sibling of its hero root. */ [data-door-voice-drawer][hidden]{display:none!important} .alive-dock.alive-dock--voice-first[data-alive-dock-state]{border-radius:22px;padding:12px} /* Line 942: the NetShow Communicator is the voice-first root, docked or in its act position. */ .ns-communicator-voice{position:fixed;bottom:16px;right:16px;z-index:2147483000;width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:12px;border:1px solid rgba(212,168,71,.5);border-radius:22px;background:var(--ns-bg,#0b1220);color:var(--ns-text,#f8fafc);box-shadow:0 18px 48px rgba(0,0,0,.45);font:15px/1.5 var(--ns-font,system-ui)} .ns-communicator-voice--left{right:auto;left:16px} .ns-communicator-voice__name{margin:0 0 4px;text-align:center;font-weight:600} .ns-communicator-voice__name span{display:block;font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--ns-gold,#d4a847)} .ns-communicator-voice__face{display:flex;justify-content:center;margin:4px auto;width:132px;height:132px} .ns-communicator-voice__face img,.ns-communicator-voice__face svg{width:132px;height:132px;object-fit:cover;border-radius:50%;transform:scale(calc(1 + var(--door-mouth,0) * .04))} .ns-communicator-voice .ns-door-voice-controls{margin:4px auto;padding:4px} .ns-communicator-voice[data-communicator-position="act"]{inset:0;width:auto;max-height:none;border-radius:0;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px} .ns-communicator-voice[data-communicator-position="act"] .ns-communicator-voice__face,.ns-communicator-voice[data-communicator-position="act"] .ns-communicator-voice__face img,.ns-communicator-voice[data-communicator-position="act"] .ns-communicator-voice__face svg{width:min(320px,60vw);height:min(320px,60vw)} @media(max-width:480px){.ns-communicator-voice{right:12px;left:12px;bottom:12px;width:auto}.ns-communicator-voice__face,.ns-communicator-voice__face img,.ns-communicator-voice__face svg{width:96px;height:96px}} @media(prefers-reduced-motion:reduce){.ns-communicator-voice__face img,.ns-communicator-voice__face svg{transform:none}} /* Line 1278: while the chat panel is open (the widget root lives in the card's drawer) the card folds to a slim header: small moving face, name, menu with mute and stop. The panel's face stage is the one face; captions arrive there as chat text. */ .ns-communicator-voice[data-door-voice-chat-open='1']{display:flex;flex-flow:row wrap;align-items:center;justify-content:flex-start;gap:4px 8px;inset:auto 16px 16px auto;width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;padding:6px 8px;border:1px solid rgba(212,168,71,.5);border-radius:18px} .ns-communicator-voice[data-door-voice-chat-open='1'].ns-communicator-voice--left{inset:auto auto 16px 16px} .ns-communicator-voice[data-door-voice-chat-open='1'] .ns-communicator-voice__face{order:1;flex:0 0 36px;width:36px;height:36px;margin:0} .ns-communicator-voice[data-door-voice-chat-open='1'] .ns-communicator-voice__face img,.ns-communicator-voice[data-door-voice-chat-open='1'] .ns-communicator-voice__face svg{width:36px;height:36px} .ns-communicator-voice[data-door-voice-chat-open='1'] .ns-communicator-voice__name{order:2;flex:1 1 auto;min-width:0;margin:0;text-align:left;font-size:14px;line-height:1.25} .ns-communicator-voice[data-door-voice-chat-open='1'] .ns-communicator-voice__name span{font-size:11px} .ns-communicator-voice[data-door-voice-chat-open='1'] .ns-door-voice-controls{order:3;flex:0 0 auto;margin:0;padding:0} .ns-communicator-voice[data-door-voice-chat-open='1'] [data-door-voice-caption]{display:none} .ns-communicator-voice[data-door-voice-chat-open='1'] [data-door-voice-drawer]{order:4;flex:1 0 100%;margin:2px 0 0} @media(max-width:480px){.ns-communicator-voice[data-door-voice-chat-open='1'],.ns-communicator-voice[data-door-voice-chat-open='1'].ns-communicator-voice--left{box-sizing:border-box;inset:auto 16px 12px 16px;width:auto;max-height:calc(70dvh - 12px)}.ns-communicator-voice[data-door-voice-chat-open='1'] #ns-chat-root .ns-pnl{height:calc(70dvh - 96px);max-height:calc(70dvh - 96px)}} /* Line 8493: on an agent's own page the resting card paints collapsed to a 56 px face chip (AI mark, Talk glyph) in the corner; one tap opens the card as above and its 44 px Minimize folds it back. Only a card carrying the attribute changes. */ .ns-communicator-voice__chip,.ns-communicator-voice__minimize{display:none} .ns-communicator-voice[data-communicator-chip="collapsed"]{display:block;inset:auto 16px calc(16px + env(safe-area-inset-bottom)) auto;width:56px;height:56px;max-height:56px;padding:0;overflow:visible;border:0;border-radius:50%;background:transparent;box-shadow:none} .ns-communicator-voice.ns-communicator-voice--left[data-communicator-chip="collapsed"]{inset:auto auto calc(16px + env(safe-area-inset-bottom)) 16px} .ns-communicator-voice[data-communicator-chip="collapsed"]>:not(.ns-communicator-voice__chip){display:none!important} .ns-communicator-voice[data-communicator-chip="collapsed"] .ns-communicator-voice__chip{display:block;position:relative;box-sizing:border-box;width:56px;height:56px;margin:0;padding:0;border:2px solid var(--ns-gold,#d4a847);border-radius:50%;background:var(--ns-bg,#0b1220);color:var(--ns-text,#f8fafc);box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:pointer} .ns-communicator-voice__chip .ns-communicator-voice__chip-face{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%} .ns-communicator-voice__chip-mark{position:absolute;top:0;left:0;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--ns-gold,#d4a847);color:var(--ns-on-accent,#0b1220);font:700 10px/18px var(--ns-font,system-ui);letter-spacing:.02em} .ns-communicator-voice__chip-talk{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--ns-gold,#d4a847);border-radius:50%;background:var(--ns-elevated,#1b2940);color:var(--ns-text,#fff)} .ns-communicator-voice[data-communicator-chip="open"] .ns-communicator-voice__minimize{display:grid;place-items:center;position:absolute;top:6px;right:6px;z-index:1;box-sizing:border-box;min-width:44px;min-height:44px;padding:0;border:1px solid #52717a;border-radius:50%;background:transparent;color:inherit;font:600 20px/1 system-ui;cursor:pointer} .ns-communicator-voice[data-communicator-chip="open"] .ns-communicator-voice__name{padding:0 48px} .ns-communicator-voice[data-communicator-chip="open"][data-door-voice-chat-open='1'] .ns-communicator-voice__minimize{position:static;order:3;flex:0 0 44px} .ns-communicator-voice[data-communicator-chip="open"][data-door-voice-chat-open='1'] .ns-communicator-voice__name{padding:0} .ns-communicator-voice__chip:focus-visible,.ns-communicator-voice__minimize:focus-visible{outline:3px solid var(--ns-gold-light,#e8b45d);outline-offset:3px} /* Line 9034: that phone room sits inside the page footer as a block of the same height, so it paints in the footer's own background (the dark footer of an agent's page) instead of a light strip under it; a page with no footer keeps the body room. */ @media (max-width:767.98px){body:has(.ns-communicator-voice[data-communicator-chip]):not(:has(.landing-footer)){padding-bottom:calc(88px + env(safe-area-inset-bottom))}body:has(.ns-communicator-voice[data-communicator-chip]) .landing-footer::after{content:"";display:block;height:calc(88px + env(safe-area-inset-bottom))}} /* Line 1461: the voice-first dock's Minimize and pill name exist only on phones; wider screens never paint them. */ .alive-dock--voice-first [data-alive-dock-minimize],.alive-dock--voice-first [data-alive-dock-name]{display:none} .alive-dock--voice-first [data-door-voice-chat-offer]{display:none} /* Line 1461: under 768 px the voice-first dock is a bottom sheet that leaves the page readable: at most 40dvh at arrival (the no-mic fallback's chat shows inside it), at most 60dvh when the visitor chooses Chat, and Minimize folds it to a one-line pill (face, name, caption) without stopping the voice. The page keeps room below its last content. */ @media(max-width:767.98px){ .alive-dock.alive-dock--voice-first[data-alive-dock-state]{inset:auto 16px calc(16px + env(safe-area-inset-bottom)) 16px;width:auto;max-width:none;max-height:40dvh;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;grid-template-areas:"face caption caption caption" "face . menu minimize" "drawer drawer drawer drawer" "body body body body";align-items:center;gap:4px 10px;padding:10px 12px;border-radius:18px} .alive-dock--voice-first>.ns-door-voice-controls{display:contents} .alive-dock--voice-first [data-door-voice-caption]{grid-area:caption;align-self:end;width:auto;max-width:none;margin:0;padding:0;text-align:left;font:15px/1.4 system-ui} .alive-dock--voice-first .ns-door-voice-menu{grid-area:menu;justify-self:end} .alive-dock--voice-first [data-door-voice-backup]{grid-column:2;grid-row:2;justify-self:start} .alive-dock--voice-first [data-ns-door-face]{grid-area:face;width:72px;height:72px;margin:0} .alive-dock--voice-first .ns-door-voice-dock-face{width:72px;height:72px} .alive-dock--voice-first [data-alive-dock-minimize]{display:block;grid-area:minimize;min-height:44px;padding:8px 12px;border:1px solid #52717a;border-radius:999px;background:transparent;color:inherit;font:14px/1.2 system-ui;cursor:pointer} .alive-dock--voice-first [data-door-voice-drawer]{grid-area:drawer;margin:0;font-size:13px} .alive-dock--voice-first .alive-dock__body{grid-area:body;max-height:none;overflow:visible} .alive-dock--voice-first .alive-dock__frame{height:max(160px,calc(40dvh - 150px));border-radius:12px} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="chat"]{max-height:60dvh} .alive-dock--voice-first[data-alive-dock-sheet="chat"] .alive-dock__frame{height:max(200px,calc(60dvh - 170px))} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"]{max-height:none;overflow:hidden;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"face name minimize" "face caption minimize";gap:0 10px;padding:6px 6px 6px 8px;border-radius:999px} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] [data-ns-door-face],.alive-dock--voice-first[data-alive-dock-sheet="pill"] .ns-door-voice-dock-face{width:44px;height:44px} .alive-dock--voice-first[data-alive-dock-sheet="pill"] [data-alive-dock-name]{display:block;grid-area:name;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 14px/1.3 system-ui} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] [data-door-voice-caption]{align-self:start;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.3} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] [data-door-voice-backup],.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] .ns-door-voice-menu,.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] [data-door-voice-drawer],.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] .alive-dock__body{display:none!important} body:has(.alive-dock--voice-first){padding-bottom:calc(var(--alive-dock-room,40dvh) + 16px)} /* Line 8694: 'Tap to talk' stays on one line. Beside the 72 px face a phone has no room for Tap to talk, Menu and Minimize in one row, so while the button shows (never on a pill) it takes its own row under the caption, as wide as its label; 8 px columns keep Menu and Minimize inside a 320 px screen and the backup-voice label keeps its cell beside Menu. Once a tap hides it the bar is the two rows above again. */ .alive-dock.alive-dock--voice-first[data-alive-dock-state]:not([data-alive-dock-sheet="pill"]):has(>.ns-door-voice-controls>.ns-door-voice-talk:not([hidden])){grid-template-areas:"face caption caption caption" "face offer offer offer" "face . menu minimize" "drawer drawer drawer drawer" "body body body body";column-gap:8px} .alive-dock.alive-dock--voice-first[data-alive-dock-state]:not([data-alive-dock-sheet="pill"]):has(>.ns-door-voice-controls>.ns-door-voice-talk:not([hidden])) .ns-door-voice-talk{grid-area:offer;justify-self:start;white-space:nowrap} .alive-dock.alive-dock--voice-first[data-alive-dock-state]:not([data-alive-dock-sheet="pill"]):has(>.ns-door-voice-controls>.ns-door-voice-talk:not([hidden])) [data-door-voice-backup]{grid-row:3} /* Line 8772: line 8579's 'Listening…' pill had no area here and was auto-placed into the 1fr cell beside Menu and Minimize (about 69 px at 375 for a pill of about 90), so its text ran over '☰ Menu'. While it shows (never on a pill) it takes its own row under the caption, as wide as its label, above Tap to talk when both show; hidden, or with the key off, the bar is the rows above as they were. */ .alive-dock.alive-dock--voice-first[data-alive-dock-state]:not([data-alive-dock-sheet="pill"]):has(>.ns-door-voice-controls>[data-door-voice-status]:not([hidden])){grid-template-areas:"face caption caption caption" "face status status status" "face . menu minimize" "drawer drawer drawer drawer" "body body body body"} .alive-dock.alive-dock--voice-first[data-alive-dock-state]:not([data-alive-dock-sheet="pill"]):has(>.ns-door-voice-controls>[data-door-voice-status]:not([hidden])) [data-door-voice-status]{grid-area:status;justify-self:start;white-space:nowrap} .alive-dock.alive-dock--voice-first[data-alive-dock-state]:not([data-alive-dock-sheet="pill"]):has(>.ns-door-voice-controls>[data-door-voice-status]:not([hidden])) [data-door-voice-backup]{grid-row:3} .alive-dock.alive-dock--voice-first[data-alive-dock-state]:not([data-alive-dock-sheet="pill"]):has(>.ns-door-voice-controls>[data-door-voice-status]:not([hidden])):has(>.ns-door-voice-controls>.ns-door-voice-talk:not([hidden])){grid-template-areas:"face caption caption caption" "face status status status" "face offer offer offer" "face . menu minimize" "drawer drawer drawer drawer" "body body body body"} .alive-dock.alive-dock--voice-first[data-alive-dock-state]:not([data-alive-dock-sheet="pill"]):has(>.ns-door-voice-controls>[data-door-voice-status]:not([hidden])):has(>.ns-door-voice-controls>.ns-door-voice-talk:not([hidden])) [data-door-voice-backup]{grid-row:4} /* Minimize folds the bar to its one-line pill (face, name, caption), as from 768 px up, so Tap to talk no longer stacks inside it; line 8373's resting pill keeps its own Talk. */ .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"]:not(.alive-dock--rest-pill) .ns-door-voice-talk{display:none!important} } /* Line 8575 (ai.features.for_my_business_dock_yields_phone): under 768 px, while a page's marked hero button row is on screen, the voice-first card rests as her round face, 48 px, 4 px from the right edge, so the row's buttons stay whole (alive-dock-sheet.js sets data-alive-dock-sheet="face"; a dock told to rest wears it from the first paint). Minimize covers the face as its tap target and opens the card as today. Nothing here reaches 768 px and up. Line 8973: the aside does not clip, so the edge AI badge sits whole on the face's top-right corner; the round clip stays on the face image (and a live face), and the badge keeps its upward push only, inside the 4 px right inset. */ @media(max-width:767.98px){ .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="face"],.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-rests="1"]:not([data-alive-dock-sheet]){inset:auto 4px calc(16px + env(safe-area-inset-bottom)) auto;width:48px;height:48px;max-width:none;max-height:none;padding:0;overflow:visible;display:block;border-radius:50%} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="face"] [data-ns-door-face],.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-rests="1"]:not([data-alive-dock-sheet]) [data-ns-door-face],.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="face"] .ns-door-voice-dock-face,.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-rests="1"]:not([data-alive-dock-sheet]) .ns-door-voice-dock-face{width:48px;height:48px;margin:0;border-radius:50%;object-fit:cover} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="face"] .ns-alive-card-mount,.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-rests="1"]:not([data-alive-dock-sheet]) .ns-alive-card-mount{border-radius:50%;overflow:hidden} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="face"] [data-ns-door-face] [data-ai-mark],.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-rests="1"]:not([data-alive-dock-sheet]) [data-ns-door-face] [data-ai-mark]{transform:translate(0,-35%)!important} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="face"] > :not([data-ns-door-face]):not([data-alive-dock-minimize]),.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-rests="1"]:not([data-alive-dock-sheet]) > :not([data-ns-door-face]):not([data-alive-dock-minimize]){display:none!important} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="face"] [data-alive-dock-minimize]{position:absolute;inset:0;display:block;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:transparent;font-size:0;cursor:pointer} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="face"] [data-alive-dock-minimize]:focus-visible{outline:3px solid #f8fafc;outline-offset:-3px} } /* Line 1584: from 768 px up the voice-first dock is a compact card that leaves the page readable: the 96 px face beside two caption lines (the rest scrolls) and one row of controls, at most 45vh. A missing microphone shows the highlighted Chat button (door-voice-first.js offerChat) instead of opening the frame; the frame opens on the stranger's tap, and Minimize returns the compact card, then folds it to the pill. The chat the stranger chose keeps its room. */ @media(min-width:768px){ .alive-dock.alive-dock--voice-first[data-alive-dock-state]{width:min(420px,calc(100vw - 32px));max-width:none;max-height:45vh;overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:96px minmax(0,1fr) auto auto;grid-template-areas:"face caption caption caption" "face backup backup backup" "face offer menu minimize" "drawer drawer drawer drawer" "body body body body";align-items:center;gap:0 10px} .alive-dock--voice-first>.ns-door-voice-controls{display:contents} .alive-dock--voice-first [data-door-voice-caption]{grid-area:caption;align-self:end;width:auto;max-width:none;max-height:2.8em;overflow-y:auto;margin:0 0 6px;padding:0;text-align:left;font:15px/1.4 system-ui} .alive-dock--voice-first [data-door-voice-backup]{grid-area:backup;justify-self:start} .alive-dock--voice-first .ns-door-voice-talk{grid-area:offer;justify-self:start;padding:8px 14px} .alive-dock--voice-first .ns-door-voice-menu{grid-area:menu;justify-self:end} .alive-dock--voice-first [data-ns-door-face]{grid-area:face;width:96px;height:96px;margin:0} .alive-dock--voice-first .ns-door-voice-dock-face{width:96px;height:96px} .alive-dock.alive-dock--voice-first[data-alive-dock-state] [data-alive-dock-minimize]{display:block;grid-area:minimize;min-height:44px;padding:8px 12px;border:1px solid #52717a;border-radius:999px;background:transparent;color:inherit;font:14px/1.2 system-ui;cursor:pointer} .alive-dock.alive-dock--voice-first[data-alive-dock-state] [data-door-voice-chat-offer]:not([hidden]){display:block;grid-area:offer;justify-self:start;min-height:44px;padding:8px 20px;border:0;border-radius:999px;background:#d4a847;color:#111b2d;font:700 14px/1.2 system-ui;cursor:pointer;box-shadow:0 0 0 3px rgba(212,168,71,.35)} .alive-dock.alive-dock--voice-first[data-alive-dock-state] [data-door-voice-chat-offer]:focus-visible{outline:3px solid #f8fafc;outline-offset:3px} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-door-voice-chat-offered] .ns-door-voice-talk{display:none} .alive-dock--voice-first [data-door-voice-drawer]{grid-area:drawer;margin:0;font-size:13px} .alive-dock--voice-first .alive-dock__body{grid-area:body;max-height:none;overflow:visible} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="chat"]{max-height:90dvh} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="chat"] [data-door-voice-chat-offer]{display:none!important} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="sheet"] [data-door-voice-drawer],.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="sheet"] .alive-dock__body{display:none!important} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"]{width:min(320px,calc(100vw - 32px));max-height:none;overflow:hidden;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"face name minimize" "face caption minimize";gap:0 10px;padding:6px 6px 6px 8px;border-radius:999px} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] [data-ns-door-face],.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] .ns-door-voice-dock-face{width:44px;height:44px} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] [data-alive-dock-name]{display:block;grid-area:name;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 14px/1.3 system-ui} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] [data-door-voice-caption]{align-self:start;max-height:none;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;line-height:1.3} .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] [data-door-voice-backup],.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] .ns-door-voice-talk,.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] .ns-door-voice-menu,.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] [data-door-voice-chat-offer],.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] [data-door-voice-drawer],.alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-sheet="pill"] .alive-dock__body{display:none!important} } /* Line 8373 (ai.features.voice_first_dock_rest_pill): the voice-first dock rests as a small pill at every width and never sits on what someone is reading. Its tag carries alive-dock--rest-pill and data-alive-dock-sheet="pill" (alive-dock-sheet.js keeps it there until a tap): face with its AI mark, name, one caption line, Talk on one line and Open, side by side. A corner pill at most 72 px tall from 768 px up; one row at most 64 px tall under 768 px, where the page keeps room below its last content for it and, at every width, while a form field is under it only her face stays (alive-dock-sheet.js marks data-alive-dock-rest-face). While it is open, Minimize shows at every width (line 1461 on phones, line 1584 from 768 px up). OFF no element carries the class. */ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-areas:"face name talk minimize" "face caption talk minimize";align-items:center;gap:0 8px;width:auto;max-width:min(420px,calc(100vw - 32px));overflow:hidden;padding:6px;border-radius:999px;cursor:pointer} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]>.ns-door-voice-controls{display:contents} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-ns-door-face]{grid-area:face;width:44px;height:44px;margin:0} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] .ns-door-voice-dock-face{width:44px;height:44px} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-alive-dock-name]{display:block;grid-area:name;align-self:end;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 14px/1.3 system-ui} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-door-voice-caption]{grid-area:caption;align-self:start;width:auto;max-width:none;min-width:0;margin:0;padding:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;font:13px/1.3 system-ui} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-door-voice-talk]{grid-area:talk;white-space:nowrap;padding:8px 14px} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-alive-dock-minimize]{display:block;grid-area:minimize;min-height:44px;padding:8px 12px;border:1px solid #52717a;border-radius:999px;background:transparent;color:inherit;font:14px/1.2 system-ui;white-space:nowrap;cursor:pointer} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-door-voice-backup],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] .ns-door-voice-menu,.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-door-voice-drawer],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] .alive-dock__body{display:none!important} /* The Gemini voice disclosure, when a page paints one, takes the caption line; the caption stays a live region for screen readers. */ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-gemini-voice-caption]{grid-area:caption;align-self:start;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:has([data-gemini-voice-caption]) [data-door-voice-caption]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* Over a form field only her face stays (alive-dock-sheet.js marks data-alive-dock-rest-face); the rest is hidden from sight only. Line 8713: the face-only look keeps the pill's box, so nothing on the page moves (walk-200 measured 0.116 at 375): name, caption, Talk and Open keep their size at opacity 0 and take no taps, the pill's own background, border and shadow go clear and the page under it takes the tap; her face alone stays seen and tappable. A dock control that takes focus brings the whole pill back. */ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="1"]{background:transparent;border-color:transparent;box-shadow:none;pointer-events:none} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="1"] [data-alive-dock-name],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="1"] [data-door-voice-caption],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="1"] [data-gemini-voice-caption],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="1"] [data-door-voice-talk],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="1"] [data-alive-dock-minimize]{opacity:0;pointer-events:none} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="1"] [data-ns-door-face]{pointer-events:auto;cursor:pointer} /* Line 9681 (ai.features.rest_face_clear_of_field): live check 80543a2ce3b measured her resting face on /enterprise at 768 sitting on the build-call form's Topic select, since line 8713's face-only look keeps the pill's box. Under the key the dock tag carries data-alive-dock-face-clear="1" and js/alive-dock-sheet.js measures her face against the fields while she rests: it sets --alive-dock-face-dy (8 px above them) or --alive-dock-face-dx (beside the form column), never off screen or onto another field, and the resting dock moves by that much with translate, so its box, its size and the page do not move (line 8713 holds). Her face keeps its 44 px, its AI mark, its name and its taps; the rest of the pill stays clear and takes none. With a page line the script adds one fixed, aria-hidden span to the page with her page words and places it 8 px left of her face or 8 px above it, only where it touches no field (data-alive-dock-face-words): one line, at most 240 px with an ellipsis, taking no taps, over the page like the dock. Without the attribute on the dock nothing here matches. */ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-clear="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="1"]{translate:var(--alive-dock-face-dx,0px) var(--alive-dock-face-dy,0px)} /* Line 14098 (ai.features.rest_fold_keeps_reading_gutter, walk-509 FF-52): js/alive-dock-text-rows.js marks its own fold data-alive-dock-rest-face="rows" (alive-dock-sheet.js's field face stays "1"), so the phone reading gutter below, which lifts only for "1", holds through her text-rows fold and the column never re-wraps (CLS 0.269 and 0.25 at 375 on the privacy policy and the terms). She looks folded all the same: these are the face-only rules above, matching "rows" (line 9681's move off a field needs no twin: a field under her face is under her band, and the field test has made it "1"). Unmarked, the value is only ever "1" and nothing here matches. */ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="rows"]{background:transparent;border-color:transparent;box-shadow:none;pointer-events:none} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="rows"] [data-alive-dock-name],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="rows"] [data-door-voice-caption],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="rows"] [data-gemini-voice-caption],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="rows"] [data-door-voice-talk],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="rows"] [data-alive-dock-minimize]{opacity:0;pointer-events:none} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-alive-dock-rest-face="rows"] [data-ns-door-face]{pointer-events:auto;cursor:pointer} body:has(.alive-dock--rest-pill[data-alive-dock-face-clear="1"]) [data-alive-dock-face-bubble]{display:none} body:has(.alive-dock--rest-pill[data-alive-dock-face-clear="1"]) [data-alive-dock-face-bubble][data-alive-dock-face-words]{display:block;position:fixed;z-index:1040;box-sizing:border-box;max-width:240px;margin:0;padding:6px 10px;border-radius:14px;background:#111b2d;color:#f8fafc;font:13px/1.3 system-ui;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.25)} /* Line 8820: from 768 px up the resting pill never sits on the end of a line of text. On a page that declares its reading measure (--ns-docs-reading: the docs and help guides) it is no wider than the right gutter beside that column, never under the 256 px its face, Talk and Open need and never over 420 px (without the measure it is 420 px as before); and the page keeps room below its last content for it (72 px + its 16 px offset + 16 px; 84 px offset over the help-unavailable bar), so the last lines scroll clear of it. Its size, content and behaviour are line 8373's. */ @media(min-width:768px){ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]{left:auto;max-width:min(420px,calc(100vw - 32px),max(256px,calc((100vw - var(--ns-docs-reading,-100vw)) / 2 - 32px)));max-height:72px} body:has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]){padding-bottom:calc(72px + 16px + 16px + env(safe-area-inset-bottom))} body:has(.netshow-help-unavailable, #ns-live-human):has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]){padding-bottom:calc(72px + 84px + 16px + env(safe-area-inset-bottom))} /* Line 10292 (wide-reading-pages-measure-reaches-rest-pill-r1): the footer pages, /everything, /compare/* and /docs/catalog serve this resting pill, not the classic pill line 9038's --alive-dock-pill-room was written for, so their column never yielded and the pill (never under 256 px) sat on line ends in their 36-108 px gutters. On a page that publishes its reading measure the room is the pill's own width cap plus its 16 px offset and 16 px clear; line 9992's padding rules read it. */ :root:has(style[data-ns-reading-measure]):has(.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]){--alive-dock-pill-room:calc(max(256px,min(420px,calc(var(--ns-reading-right) - 32px))) + 32px)} /* Line 1584 folds Talk out of its own wide pill; the resting pill keeps it, unless the voice has hidden it after a tap. */ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] .ns-door-voice-talk:not([hidden]){display:block!important} } @media(max-width:767.98px){ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]{left:auto;max-height:64px} body:has(.alive-dock--rest-pill[data-alive-dock-sheet="pill"]){padding-bottom:calc(var(--alive-dock-room,calc(80px + env(safe-area-inset-bottom))) + 16px)} /* Line 16878 (live check 1c3e05353be OY-PS): finish_netshow_doors_1's page caption sat in flow inside the 56 px face chip, a 225 px column of words over the page that pushed her face off the screen (/features/agent-creator at 375). Resting, it steps out of sight with the 1 px clip idiom; her voice caption still carries the words, and the open sheet shows it as before. */ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]>[data-alive-dock-page-caption]{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} } /* Line 16878: line 9766's 44 px card gutter was cut for the classic dock's tab; the voice-first resting face is 56 px wide and 16 px from the edge, so a yield band's cards keep 68 px (her face plus 12 px clear) while she rests. */ @media(max-width:640px){ body:has(.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]) [data-alive-dock-yield] .ns-content-card{padding-inline-end:68px} } /* Line 8715: below 420 px the resting pill shows her whole name ('Mrs. NetShow', not 'Mrs. Net...'). The caption line (and a Gemini voice disclosure) steps out of sight with the 1 px clip idiom and stays a live region for screen readers; the pill is one row, face name Talk Open, and the name takes the freed width and up to two lines of the freed height, so a name up to 16 characters shows whole at 375. At 420 px and up nothing changes. */ @media(max-width:419.98px){ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]{grid-template-areas:"face name talk minimize"} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-alive-dock-name]{align-self:center;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-door-voice-caption],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-gemini-voice-caption]{grid-area:auto;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} } /* Line 10894 (ai.features.rest_pill_name_whole_wide): line 8715's wide twin. From 768 px up, on a page that declares its reading measure (style[data-ns-reading-measure]: the compare pages, the footer pages, the docs and help guides), line 8820 clamps the resting pill to the gutter beside the column, often to its 256 px floor, where face, Talk and Open left the name about 9 px and name and caption both ellipsized ('Mrs.... Just st...' on /compare/intercom at 1440, 312 px). Under the key the dock tag carries data-alive-dock-name-whole="1": the caption line (and a Gemini disclosure) steps out of sight with the 1 px clip idiom and stays a live region, and the name takes the caption's row as a whole row of its own above Talk and Open (190 px at the 256 px floor), 16 px tall; the pill's top and bottom padding give 1 px each, so 1 + 5 + 16 + 44 + 5 + 1 is its 72 px. Its width and height caps are untouched, so it never grows. Without the attribute, or without the measure, nothing matches. */ @media(min-width:768px){ :root:has(style[data-ns-reading-measure]) .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-name-whole="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]{grid-template-areas:"face name name name" "face . talk minimize";padding:5px 6px} :root:has(style[data-ns-reading-measure]) .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-name-whole="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-alive-dock-name]{align-self:end;line-height:16px} :root:has(style[data-ns-reading-measure]) .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-name-whole="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-door-voice-caption],:root:has(style[data-ns-reading-measure]) .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-name-whole="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-gemini-voice-caption]{grid-area:auto;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} } /* Line 11455 (ai.features.rest_pill_name_whole_wide): line 10894 on every page that asks for it. Live check 52afa6332c3-plus1 read the resting pill on /for-my-business at 1440 as 'M..': no reading measure there, so line 10894 did not match, and the Talk chip ('Voice is resting - type to me') took the row beside her name. From 481 px up, wherever the dock tag carries data-alive-dock-name-whole="1", the caption steps out with the 1 px clip idiom and stays a live region, and the name takes a whole row of its own above Talk and Open (up to 354 px at the 420 px cap). Under 768 px the pill's 64 px cap holds: its top and bottom padding give 1 px each, so 1 + 1 + 16 + 44 + 1 + 1 is its 64 px. The reading-page rules above stay as they are; 480 px and under nothing changes; without the attribute nothing matches. */ @media(min-width:481px){ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-name-whole="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]{grid-template-areas:"face name name name" "face . talk minimize";padding:5px 6px} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-name-whole="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-alive-dock-name]{align-self:end;line-height:16px} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-name-whole="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-door-voice-caption],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-name-whole="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"] [data-gemini-voice-caption]{grid-area:auto;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} } @media(min-width:481px) and (max-width:767.98px){ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-name-whole="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]{padding:1px 6px} } /* Line 8393 (dock_yields_to_hero): at 768 px and wider, while the page's first screen ([data-alive-dock-yield]) is in view, the card folds to its 72 px face with its AI mark and 'Tap to talk' (js/alive-dock-sheet.js sets the mark and lifts it the first time the first screen scrolls out, or when the visitor touches the card). The voice keeps running. Line 8795 (dock_yield_boot_state): the server may paint the fold as data-alive-dock-yielding="boot"; these rules read the attribute whatever its value, and no phone rule reads "boot", so the card is folded at first paint from 768 px only. */ @media(min-width:768px){ .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-yielding]{width:auto;max-height:none;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 10px;border-radius:22px} .alive-dock.alive-dock--voice-first[data-alive-dock-yielding] [data-ns-door-face],.alive-dock--voice-first[data-alive-dock-yielding] .ns-door-voice-dock-face{width:72px;height:72px;margin:0} .alive-dock--voice-first[data-alive-dock-yielding]>.ns-door-voice-controls{margin:0;padding:0} .alive-dock--voice-first[data-alive-dock-yielding] .ns-door-voice-controls>:not(.ns-door-voice-talk),.alive-dock--voice-first[data-alive-dock-yielding] [data-door-voice-drawer],.alive-dock--voice-first[data-alive-dock-yielding] .alive-dock__body,.alive-dock--voice-first[data-alive-dock-yielding]>[data-alive-dock-minimize]{display:none!important} } /* Line 9741 (dock_yield_compact_wide): walk-242 measured the wide fold (face, name, Tap to talk, about 300 px) over the 'Enterprise AI Workforce' row's price on /pricing-overview at 768. From 768 px up, a page whose yield mark asks for it (data-alive-dock-yield-compact="1" on /pricing-overview's price ladders) gets line 8470's 56 px round face instead, 4 px from the right edge as line 8575's resting face, so a right-aligned price 60 px or more from the edge stays whole at any scroll (the ladders' prices end 65 px from it at 768 and 1024), with its AI badge pushed up only so it stays whole (line 8973): js/alive-dock-sheet.js sets data-alive-dock-yielding="face", and on such a page any fold (line 8795's boot fold at first paint, an older cached script's) wears the same face, so nothing moves when the script runs. These rules follow the wide fold and outweigh it and line 8373's resting pill; the wide fold's own rules still hide the drawer, the chat and Minimize. Caption, Tap to talk, Menu, name and Minimize are hidden from sight only, and a keyboard focus inside shows the wide fold. It is lifted on the wide fold's rules; pages without the ask keep the wide fold. */ @media(min-width:768px){ .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-yielding="face"]:not(:focus-within),body:has([data-alive-dock-yield][data-alive-dock-yield-compact="1"]) .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-yielding]:not(:focus-within){display:block;inset:auto;inset-inline-end:4px;bottom:calc(16px + env(safe-area-inset-bottom));box-sizing:border-box;width:56px;height:56px;max-width:none;max-height:none;overflow:visible;padding:0;border-radius:50%;cursor:pointer} .alive-dock.alive-dock--voice-first[data-alive-dock-yielding="face"]:not(:focus-within) [data-ns-door-face],.alive-dock.alive-dock--voice-first[data-alive-dock-yielding="face"]:not(:focus-within) .ns-door-voice-dock-face,body:has([data-alive-dock-yield][data-alive-dock-yield-compact="1"]) .alive-dock.alive-dock--voice-first[data-alive-dock-yielding]:not(:focus-within) [data-ns-door-face],body:has([data-alive-dock-yield][data-alive-dock-yield-compact="1"]) .alive-dock.alive-dock--voice-first[data-alive-dock-yielding]:not(:focus-within) .ns-door-voice-dock-face{width:54px;height:54px;margin:0;object-fit:cover} .alive-dock.alive-dock--voice-first[data-alive-dock-sheet="pill"][data-alive-dock-yielding="face"]:not(:focus-within) [data-ns-door-face],.alive-dock.alive-dock--voice-first[data-alive-dock-sheet="pill"][data-alive-dock-yielding="face"]:not(:focus-within) .ns-door-voice-dock-face{width:54px;height:54px;margin:0;object-fit:cover} .alive-dock.alive-dock--voice-first[data-alive-dock-yielding="face"]:not(:focus-within) .ns-door-voice-controls>*,.alive-dock.alive-dock--voice-first[data-alive-dock-yielding="face"]:not(:focus-within)>[data-alive-dock-name],.alive-dock.alive-dock--voice-first[data-alive-dock-yielding="face"]:not(:focus-within)>[data-alive-dock-minimize],body:has([data-alive-dock-yield][data-alive-dock-yield-compact="1"]) .alive-dock.alive-dock--voice-first[data-alive-dock-yielding]:not(:focus-within) .ns-door-voice-controls>*,body:has([data-alive-dock-yield][data-alive-dock-yield-compact="1"]) .alive-dock.alive-dock--voice-first[data-alive-dock-yielding]:not(:focus-within)>[data-alive-dock-name],body:has([data-alive-dock-yield][data-alive-dock-yield-compact="1"]) .alive-dock.alive-dock--voice-first[data-alive-dock-yielding]:not(:focus-within)>[data-alive-dock-minimize]{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important} .alive-dock.alive-dock--voice-first[data-alive-dock-yielding="face"]:not(:focus-within) [data-ns-door-face] [data-ai-mark],body:has([data-alive-dock-yield][data-alive-dock-yield-compact="1"]) .alive-dock.alive-dock--voice-first[data-alive-dock-yielding]:not(:focus-within) [data-ns-door-face] [data-ai-mark]{transform:translate(0,-35%)!important} } /* Line 8470 (dock_yields_to_hero): below 768 px, while the page's first screen is in view, the collapsed arrival sheet tucks into a 56 px round face in the corner with its AI mark (js/alive-dock-sheet.js sets the mark only on the unopened sheet and lifts it when the first screen scrolls out or the visitor touches it; a tap anywhere on the circle opens the sheet). Caption, Tap to talk, Menu and Minimize are hidden from sight only, so the aside keeps its accessible names, and a keyboard focus inside the circle shows the whole sheet. The page keeps room for the circle only (alive-dock-sheet.js room()). The voice keeps running. Line 8956: line 8373's resting pill tucks the same way (alive-dock-sheet.js), and its own face rules carry six classes and attributes, so the circle's face also matches the pill markup at that weight, later, and wins. */ @media(max-width:767.98px){ .alive-dock.alive-dock--voice-first[data-alive-dock-state][data-alive-dock-yielding="1"]:not(:focus-within){display:block;inset:auto;inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom));box-sizing:border-box;width:56px;height:56px;max-width:none;max-height:none;overflow:visible;padding:0;border-radius:50%;cursor:pointer} .alive-dock.alive-dock--voice-first[data-alive-dock-yielding="1"]:not(:focus-within) [data-ns-door-face],.alive-dock.alive-dock--voice-first[data-alive-dock-yielding="1"]:not(:focus-within) .ns-door-voice-dock-face{width:54px;height:54px;margin:0;object-fit:cover} .alive-dock.alive-dock--voice-first[data-alive-dock-sheet="pill"][data-alive-dock-yielding="1"]:not(:focus-within) [data-ns-door-face],.alive-dock.alive-dock--voice-first[data-alive-dock-sheet="pill"][data-alive-dock-yielding="1"]:not(:focus-within) .ns-door-voice-dock-face{width:54px;height:54px;margin:0;object-fit:cover} .alive-dock.alive-dock--voice-first[data-alive-dock-yielding="1"]:not(:focus-within) .ns-door-voice-controls>*,.alive-dock.alive-dock--voice-first[data-alive-dock-yielding="1"]:not(:focus-within)>[data-alive-dock-name],.alive-dock.alive-dock--voice-first[data-alive-dock-yielding="1"]:not(:focus-within)>[data-alive-dock-minimize]{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;min-height:0!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important} .alive-dock.alive-dock--voice-first[data-alive-dock-yielding="1"]:not(:focus-within) [data-door-voice-drawer],.alive-dock.alive-dock--voice-first[data-alive-dock-yielding="1"]:not(:focus-within) .alive-dock__body{display:none!important} } /* Line 11559 (dock-consent-line-lives-in-open-sheet-r1): walk-398 FF-6 measured the mic consent line (js/media-consent.js) as a 7 px column of single letters at 375, a loose cell of the resting pill's grid. It now sits in the dock controls right after Talk: the open sheet gives it a whole row of its own under her Talk and Menu, so it reads as one sentence, and the resting pill hides it (the resting face, the yielding folds and the own-stage button already hide the controls' other children). Top level on purpose (the phone @media blocks stay byte for byte as main has them), and before line 8394's own-stage rules, whose fence reads everything after them as free of display:none. */ .alive-dock--voice-first .ns-door-voice-controls>.ns-media-consent-line{grid-column:1/-1;min-width:0;text-align:left} .alive-dock.alive-dock--voice-first[data-alive-dock-sheet="pill"] .ns-media-consent-line{display:none!important} /* Line 8394 (dock_corner_own_stage_pages): on /meet and /meet/{host} (AliveDock::$ownStagePage) the voice-first dock rests as a 48 px round face in the bottom-right corner at every width, so the page's hosts and their cards stay whole: the 44 px face with its AI mark, and the whole circle is its Talk (the words stay its name). The greeting (a live region), the menu and Minimize are hidden from sight only. Talk, keyboard focus inside the dock, focus on Minimize (js/pages/meet-alive.js openDock, the host's 'Talk with' button), a Chat offer or an open chat show today's card; it rests again when Talk comes back. Only a dock carrying the class changes. */ .alive-dock.alive-dock--voice-first.alive-dock--own-stage[data-alive-dock-state="collapsed"]:has([data-door-voice-talk]:not([hidden])):not(:has(:focus-visible,[data-alive-dock-minimize]:focus)):not([data-door-voice-chat-offered]):not([data-door-voice-chat-open]){display:block;inset:auto 16px calc(16px + env(safe-area-inset-bottom)) auto;width:48px;height:48px;max-width:48px;max-height:48px;padding:0;border-radius:50%;overflow:visible} .alive-dock.alive-dock--voice-first.alive-dock--own-stage[data-alive-dock-state="collapsed"]:has([data-door-voice-talk]:not([hidden])):not(:has(:focus-visible,[data-alive-dock-minimize]:focus)):not([data-door-voice-chat-offered]):not([data-door-voice-chat-open])>.ns-door-voice-controls{display:contents} .alive-dock.alive-dock--voice-first.alive-dock--own-stage[data-alive-dock-state="collapsed"]:has([data-door-voice-talk]:not([hidden])):not(:has(:focus-visible,[data-alive-dock-minimize]:focus)):not([data-door-voice-chat-offered]):not([data-door-voice-chat-open]) [data-ns-door-face]{position:absolute;inset:0;width:44px;height:44px;margin:auto} .alive-dock.alive-dock--voice-first.alive-dock--own-stage[data-alive-dock-state="collapsed"]:has([data-door-voice-talk]:not([hidden])):not(:has(:focus-visible,[data-alive-dock-minimize]:focus)):not([data-door-voice-chat-offered]):not([data-door-voice-chat-open]) .ns-door-voice-dock-face{width:44px;height:44px} .alive-dock.alive-dock--voice-first.alive-dock--own-stage[data-alive-dock-state="collapsed"]:has([data-door-voice-talk]:not([hidden])):not(:has(:focus-visible,[data-alive-dock-minimize]:focus)):not([data-door-voice-chat-offered]):not([data-door-voice-chat-open]) [data-door-voice-talk]{position:absolute;inset:0;z-index:1;width:auto;min-width:0;height:auto;min-height:0;margin:0;padding:0;border:2px solid #d4a847;border-radius:50%;background:transparent;color:transparent;font-size:0;cursor:pointer} .alive-dock.alive-dock--voice-first.alive-dock--own-stage[data-alive-dock-state="collapsed"]:has([data-door-voice-talk]:not([hidden])):not(:has(:focus-visible,[data-alive-dock-minimize]:focus)):not([data-door-voice-chat-offered]):not([data-door-voice-chat-open]) .ns-door-voice-controls>:not([data-door-voice-talk]),.alive-dock.alive-dock--voice-first.alive-dock--own-stage[data-alive-dock-state="collapsed"]:has([data-door-voice-talk]:not([hidden])):not(:has(:focus-visible,[data-alive-dock-minimize]:focus)):not([data-door-voice-chat-offered]):not([data-door-voice-chat-open]) [data-alive-dock-name],.alive-dock.alive-dock--voice-first.alive-dock--own-stage[data-alive-dock-state="collapsed"]:has([data-door-voice-talk]:not([hidden])):not(:has(:focus-visible,[data-alive-dock-minimize]:focus)):not([data-door-voice-chat-offered]):not([data-door-voice-chat-open]) [data-alive-dock-minimize]{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* Open, alive-dock.css's collapsed own-stage rule (48 px tall, 16 px from the bottom) still matches this tag: today's card keeps its height and its place (alive-dock.css's .alive-dock at 768 px and 1200 px up; phones keep line 1461's sheet). */ .alive-dock.alive-dock--voice-first.alive-dock--own-stage[data-alive-dock-state="collapsed"]{height:auto} @media(min-width:768px){.alive-dock.alive-dock--voice-first.alive-dock--own-stage[data-alive-dock-state="collapsed"]{inset:88px 16px auto auto}} @media(min-width:1200px){.alive-dock.alive-dock--voice-first.alive-dock--own-stage[data-alive-dock-state="collapsed"]{inset:auto 24px 24px auto}} /* Line 8972 (meet-host-waiting-dock-hides-its-ai-chip-r1): while the voice-first dock waits for the page's own stage to scroll away (alive-dock-own-stage.js hides it by visibility and marks it data-alive-dock-waiting), its face's AI chip waits too: .ns-ai-mark forces visibility:visible!important, so the hidden dock alone left a lone chip over the copy. The mark goes the moment the dock shows, and the chip with it. */ .alive-dock[data-alive-dock-waiting] .ns-ai-mark,.alive-dock[data-alive-dock-waiting] [data-ai-mark]{visibility:hidden!important} /* Line 10196 (reading_pages_rest_pill_keeps_room): since line 9053 the reading pages (/help, /faq, /privacy, /compare/*, /docs/*, /marketplace/characters) serve this resting pill, and walks 269, 272 and 275 measured it on their last lines. A page whose dock carries data-alive-dock-keeps-room="1" keeps a band under its main content as tall as the resting pill plus its inset (--alive-dock-room, published by alive-dock-sheet.js at every width), so the last line and the last button scroll clear of her. Pages that publish a reading measure keep it; nothing is drawn around her. Line 14255 (marketplace-page-end-no-dark-band-phone-r1): walk-518 FF-9 measured that band as an empty dark strip above the footer links at the end of /marketplace/agents (96 px at 375) and /docs (90 px). While a visible footer follows main, the footer is the page end and the pill's own room under it (body padding-bottom above) keeps its last link clear, so the band holds only on a page with no visible footer (panel mode, the chat pages). */ body:has(.alive-dock--rest-pill[data-alive-dock-keeps-room="1"][data-alive-dock-sheet="pill"]):not(:has(footer.ns-footer:not(.d-none),footer.netshow-footer:not(.d-none))) :is(#main-content,main:not(#main-content main)){padding-bottom:calc(var(--alive-dock-room,72px) + 16px)} /* Line 15107 (marketplace-page-end-rest-pill-room-under-footer-phone-r1, phone_footer_rest_pill_room): live check eeb4b8db22-plus4 measured the resting pill on the footer's last trust card at the end of /marketplace/agents at 375, and the guests' one footer (footer.landing-footer, which the two rules above do not name) came back under a 96 px band. Under 576 px, while either page layout marks with the key's attribute and the page shows the resting pill and a visible footer, the pill's room (line 8373's body padding, the same height) moves into that footer's own padding, so the footer ends whole above her with its own background behind her, and main keeps no band above it (line 10196's band and app-layout.css's phone clearance). The classic footer's own phone sheet pins its padding at 0 !important and keeps a 72 px .nsf-dockspace inside it (netshow-footer-collapse.css), so here the padding is !important and that space is 0: one room, the pill's. For the one footer, reserve it in the painted child, not its transparent content-page wrapper. 576 px and up and a page with no pill or no footer never move. */ @media(max-width:575.98px){ html[data-ns-phone-footer-room="1"] body:has(.alive-dock--rest-pill[data-alive-dock-sheet="pill"]):has(:is(footer.ns-footer,footer.netshow-footer,footer.landing-footer):not(.d-none)){padding-bottom:0} html[data-ns-phone-footer-room="1"] body:has(.alive-dock--rest-pill[data-alive-dock-sheet="pill"]):has(:is(footer.ns-footer,footer.netshow-footer,footer.landing-footer):not(.d-none)) :is(footer.ns-footer,footer.netshow-footer,footer.landing-footer):not(.d-none){padding-bottom:calc(var(--alive-dock-room,calc(80px + env(safe-area-inset-bottom))) + 16px)!important} html[data-ns-phone-footer-room="1"] body:has(.alive-dock--rest-pill[data-alive-dock-sheet="pill"]):has(:is(footer.ns-footer,footer.netshow-footer,footer.landing-footer):not(.d-none)) footer.landing-footer:not(.d-none):has(.ns-one-footer){padding-bottom:0!important} html[data-ns-phone-footer-room="1"] body:has(.alive-dock--rest-pill[data-alive-dock-sheet="pill"]):has(:is(footer.ns-footer,footer.netshow-footer,footer.landing-footer):not(.d-none)) footer.landing-footer:not(.d-none) .ns-one-footer{padding-bottom:calc(var(--alive-dock-room,calc(80px + env(safe-area-inset-bottom))) + 16px)!important} html[data-ns-phone-footer-room="1"] body:has(.alive-dock--rest-pill[data-alive-dock-sheet="pill"]):has(:is(footer.ns-footer,footer.netshow-footer,footer.landing-footer):not(.d-none)) .netshow-footer .nsf-dockspace{height:0} html[data-ns-phone-footer-room="1"] body:has(.alive-dock--rest-pill[data-alive-dock-sheet="pill"]):has(:is(footer.ns-footer,footer.netshow-footer,footer.landing-footer):not(.d-none)) :is(#main-content,main:not(#main-content main)){padding-bottom:0} } /* Line 10893 (reading_pages_rest_pill_face_chip_phone): live check 3cf9cc32716-plus1 measured the resting pill on the sixth /faq question at 375, on the first screen, where line 10196's band cannot reach. Under 768 px, on a dock the server marks data-alive-dock-face-chip="1" (only beside the keeps-room mark) and while alive-dock-sheet.js marks the reader's first screen, the pill rests as her face with its AI mark in its right end: the pill keeps its box (line 8713's idiom), its look goes clear and the page under it takes the tap; name, caption, Talk and Open keep their size at opacity 0; her face moves by translate (--alive-dock-chip-dx) and grows to about 56 px by scale, so nothing on the page moves. A tap on her face opens her; a keyboard focus inside, line 8956's phone tuck (yielding="1") and line 8373's field face keep their own looks. */ @media(max-width:767.98px){ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-first-screen="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding="1"]):not([data-alive-dock-rest-face="1"]):not(:focus-within){background:transparent;border-color:transparent;box-shadow:none;pointer-events:none;overflow:visible} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-first-screen="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding="1"]):not([data-alive-dock-rest-face="1"]):not(:focus-within) [data-alive-dock-name],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-first-screen="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding="1"]):not([data-alive-dock-rest-face="1"]):not(:focus-within) [data-door-voice-caption],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-first-screen="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding="1"]):not([data-alive-dock-rest-face="1"]):not(:focus-within) [data-gemini-voice-caption],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-first-screen="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding="1"]):not([data-alive-dock-rest-face="1"]):not(:focus-within) [data-door-voice-talk],.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-first-screen="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding="1"]):not([data-alive-dock-rest-face="1"]):not(:focus-within) [data-alive-dock-minimize]{opacity:0;pointer-events:none} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-first-screen="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding="1"]):not([data-alive-dock-rest-face="1"]):not(:focus-within) [data-ns-door-face]{pointer-events:auto;cursor:pointer;translate:var(--alive-dock-chip-dx,0px) 0;scale:1.27;transform-origin:100% 50%} } /* Line 11218 (help-guide-face-chip-clear-of-first-screen-text-phone-r1): walk 351 measured that folded face on /help/follow-the-studio-steps at 375, resting at the right end of the first screen over 'next.' and 'your ... it'. At 480 px and below, while the fold above holds, the reading column (.ns-prose, layouts.content's article) keeps a right gutter her width plus 8 px: 44 px at the fold's 1.27 scale, plus 8 px, plus the pill's 6 px padding (the pill's 16 px inset matches the column's 1rem phone gutter, so her face sits 6 px further in). The gutter, not a move of her face: the chip rests where the first screen's text runs to its foot, so there is no clear room below it. The same selector lifts it past the first screen, on a touch or key in the dock, at the foot and above 480 px, where the column is main's. Line 12034: completion/business uses .ns-cu-pitch in the same phone column, so its opening paragraph keeps this gutter too. Line 11684 (footer-pages-phone-dock-clear-of-body-text-r1): walk-421 FF-6 measured the same folded face on /footer/privacy_policy at 375 over the ends of 'give' and 'them.'. The footer pages' column is main's .container.p-5 (Bootstrap's 3rem !important padding, the column running to the viewport edge), so its gutter also covers the pill's 16 px inset: her folded face's left edge plus 8 px. Their foot keeps line 10196's band as before. Line 11957 (footer-pages-phone-gutter-from-first-paint-r1): live check OT-OX measured layout shift 0.32 there at 375, the column reflowing narrower about 3 s in when the deferred alive-dock-sheet.js set the first-screen mark. The footer gutter asks only for the marks the server prints on the dock, so it is there from the first paint and holds past the first screen; it lifts, as before, on the yield, her rest face, a focus inside her or an opened sheet. Line 11893 (footer-pages-phone-gutter-from-first-byte-r1): layouts.app also marks #main-content with ns-dock-gutter-phone in server HTML, so the gutter is reserved before the dock is even parsed; it lifts on the same triggers and, like line 11957, holds past the first screen. Line 12353 (reading-pages-phone-gutter-scroll-independent-r1): live check OT-YU of 8d2a28ac18e measured layout shift 0.414 on /help/the-harness at 375 (0.224 /blog/meet-the-anchors, 0.064 /completion/business) on the open -> bottom -> top walk: the .ns-prose and .ns-cu-pitch gutter followed data-alive-dock-first-screen, which alive-dock-sheet.js adds and removes as the reader crosses one screen height, so the column re-wrapped each way. It now asks only for the marks the server prints (face chip, collapsed, pill), the footer gutter's shape: there from the first paint and held past the first screen and at the foot; it lifts, as before, on the yield, her rest face, a focus inside her or an opened sheet. The first-screen mark drives only the pill's fold above (its look, her face's translate and scale), never the column's width. Line 12665 (blog-post-phone-gutter-holds-through-dock-yield-r1): live check 6615cd04a51 OU-AL measured layout shift 0.266 on /blog/meet-the-anchors at 375 (0.144 build-your-first-agent, 0.083 one-price-story): a blog post's hero carries the yield mark, so alive-dock-sheet.js tucked her into her 56 px face (data-alive-dock-yielding="1"), which lifted this gutter, and the first scroll-out released the yield and brought it back, re-wrapping every paragraph. On a face-chip dock the reading column's gutter no longer asks about the yield ("1" or the server's "boot"): the tucked face sits in the same corner the gutter clears, so the column has one width from the first paint through the release. Her rest face, a focus inside her and an opened sheet still lift it; the footer column keeps its own rules. Line 13482 (resting-pill-yields-to-text-rows-phone-r3): live check 9966033519e measured her flipping every frame on /docs/getting-started at 375: alive-dock-text-rows.js folded the pill to her face to clear Step 1's bullets, the fold lifted this gutter, the text widened from ~265 to ~335 px into the spot her face had taken, and she unfolded, and folded again. That script marks its own fold data-alive-dock-text-rows-fold="1"; a rest face carrying that mark keeps these gutters, so her fold never reflows the text it clears. Without the mark (key off, alive-dock-sheet.js's rest face over a form field) the rules read exactly as before. */ @media(max-width:480px){ body:has(.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-rest-face="1"]:not([data-alive-dock-text-rows-fold="1"])):not(:focus-within)) .ns-prose, body:has(.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-rest-face="1"]:not([data-alive-dock-text-rows-fold="1"])):not(:focus-within)) .ns-content-body .ns-cu-pitch{box-sizing:border-box;padding-inline-end:calc(44px * 1.27 + 6px + 8px)} body:has(.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding="1"]):not([data-alive-dock-rest-face="1"]:not([data-alive-dock-text-rows-fold="1"])):not(:focus-within)) #main-content>.container.p-5{padding-inline-end:calc(16px + 44px * 1.27 + 6px + 8px)!important} body:not(:has(.alive-dock[data-alive-dock-yielding="1"])):not(:has(.alive-dock[data-alive-dock-rest-face="1"]:not([data-alive-dock-text-rows-fold="1"]))):not(:has(.alive-dock:not([data-alive-dock-state="collapsed"]))):not(:has(.alive-dock:not([data-alive-dock-sheet="pill"]))):not(:has(.alive-dock:focus-within)) #main-content.ns-dock-gutter-phone>.container.p-5{padding-inline-end:calc(16px + 44px * 1.27 + 6px + 8px)!important} /* Line 13543 (ai.features.dock_hold_release_hysteresis, data-alive-dock-hold-steady="1"): walk-488 measured /footer/term_of_use at 375 flipping frame to frame at its foot (layout shift 139): the footer's feedback fields under her pill folded her to her rest face, the fold lifted this gutter, every paragraph re-wrapped and the page lost 748 px, the scroll clamped, the fields left her band, the fold lifted and the page grew back. A steady dock asks only for the marks the server prints, so her rest face keeps the column's one width: the fold is a look only (her face and its AI badge stay where the pill was) and nothing under her moves. The yield, a focus inside her and an opened sheet still lift it. */ body:has(.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-hold-steady="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not(:focus-within)) .ns-prose, body:has(.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-hold-steady="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not(:focus-within)) .ns-content-body .ns-cu-pitch{box-sizing:border-box;padding-inline-end:calc(44px * 1.27 + 6px + 8px)} body:has(.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-face-chip="1"][data-alive-dock-hold-steady="1"][data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding="1"]):not(:focus-within)) #main-content>.container.p-5{padding-inline-end:calc(16px + 44px * 1.27 + 6px + 8px)!important} } /* Line 10454: her greeting owns about 40% of a phone only while its greeting clip plays. Line 11050 (reading-page-greeting-sheet-holds-still-phone-r1): the post-landing live check of 7b894dd8af2 measured layout shift 0.325 on /blog and /help at 375 while that greeting grew the pill itself to 40dvh (line 11036's hidden swap still moved the pill's own face, caption and controls). Her greeting face is now its own layer (components/alive/reading-greeting-layer.blade.php, beside the dock), laid out at its final place from the first paint and unseen; alive-dock-sheet.js reveals and hides it by opacity, transform and visibility alone, so nothing it covers moves and the pill under it keeps its box and its band. Line 12071 (docs_catalog_greeting_sheet_clear): on a list page that marks its controls, alive-dock-sheet.js marks the layer data-reading-greeting-layer-clear="1" with the room it measured below them (--reading-greeting-layer-height, never over 22dvh): her face at the left, her whole greeting beside it, Menu and Minimize under it. Line 12173 (reading_pages_greeting_card_clear_phone): at 480 px and under on /help/*, /blog/* and /docs/*, alive-dock-sheet.js marks the layer data-reading-greeting-layer-foot="1" with the room it measured under the h1 and the article's first paragraph: one foot band as tall as her words (never over that room or 30dvh), her face at the left, her greeting beside it, Menu (its menu mark) and Minimize (a minus, its name kept) at the right. Line 12523 (fix-forward of 12173): live check 73184550e4c measured her greeting cut at '...what a visitor meets on' in the band's inner scroll and a corner of her pill above the card at 375. Her caption is no scroll box: alive-dock-sheet.js fits her words to the band (or her short hello and the topic cut at a word). While her foot card is open the pill just after it fades out (its box, its live caption and its band kept) unless the reader's focus is in it, and comes back when the card folds. */ @media(min-width:768px){.alive-dock-greeting-layer{display:none}} @media(max-width:767.98px){ .alive-dock-greeting-layer{position:fixed;z-index:1041;inset:auto 16px calc(16px + env(safe-area-inset-bottom)) 16px;height:40dvh;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:minmax(0,1fr) auto auto;grid-template-areas:"face face face" "caption caption caption" ". menu minimize";gap:8px;padding:12px;border:1px solid #36515a;border-radius:22px;background:#101e24;color:#edf7f5;box-shadow:0 12px 48px #0006;font:14px/1.4 system-ui,sans-serif;visibility:hidden;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s ease-out,transform .2s ease-out,visibility 0s linear .2s} .alive-dock-greeting-layer[data-reading-greeting-layer-open="1"]{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition:opacity .2s ease-out,transform .2s ease-out,visibility 0s} .alive-dock-greeting-layer__face{grid-area:face;position:relative;justify-self:center;height:100%;min-height:0;aspect-ratio:1;margin:0} .alive-dock-greeting-layer__face-img{display:block;width:100%;height:100%;object-fit:contain;border-radius:18px} .alive-dock-greeting-layer__caption{grid-area:caption;margin:0;text-align:center;max-height:4.2em;overflow:auto} .alive-dock-greeting-layer__menu,.alive-dock-greeting-layer__minimize{min-height:44px;padding:0 14px;border:1px solid #36515a;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer} .alive-dock-greeting-layer__menu{grid-area:menu} .alive-dock-greeting-layer__minimize{grid-area:minimize} .alive-dock-greeting-layer[data-reading-greeting-layer-clear="1"]{height:var(--reading-greeting-layer-height,22dvh);max-height:22dvh;grid-template-columns:56px minmax(0,1fr) auto auto;grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"face caption caption caption" "face . menu minimize";row-gap:6px;padding:10px 12px} .alive-dock-greeting-layer[data-reading-greeting-layer-clear="1"] .alive-dock-greeting-layer__face{justify-self:start;align-self:start;width:56px;height:auto} .alive-dock-greeting-layer[data-reading-greeting-layer-clear="1"] .alive-dock-greeting-layer__caption{align-self:center;text-align:start;max-height:none;overflow:auto} .alive-dock-greeting-layer[data-reading-greeting-layer-foot="1"]{height:auto;max-height:min(var(--reading-greeting-layer-height,30dvh),30dvh);grid-template-columns:52px minmax(0,1fr) 44px 44px;grid-template-rows:minmax(0,1fr);grid-template-areas:"face caption menu minimize";gap:6px;padding:6px 8px;border-radius:18px;font-size:13px;line-height:1.3} .alive-dock-greeting-layer[data-reading-greeting-layer-foot="1"] .alive-dock-greeting-layer__face{justify-self:start;align-self:center;width:44px;height:auto} .alive-dock-greeting-layer[data-reading-greeting-layer-foot="1"] .alive-dock-greeting-layer__face-img{border-radius:12px} .alive-dock-greeting-layer[data-reading-greeting-layer-foot="1"] .alive-dock-greeting-layer__caption{align-self:center;text-align:start;max-height:100%;overflow:hidden} .alive-dock-greeting-layer[data-reading-greeting-layer-foot="1"][data-reading-greeting-layer-open="1"]+.alive-dock:not(:focus-within){opacity:0;pointer-events:none;transition:opacity .2s ease-out} .alive-dock-greeting-layer[data-reading-greeting-layer-foot="1"] .alive-dock-greeting-layer__menu,.alive-dock-greeting-layer[data-reading-greeting-layer-foot="1"] .alive-dock-greeting-layer__minimize{align-self:center;width:44px;min-height:44px;padding:0;font-size:0} .alive-dock-greeting-layer[data-reading-greeting-layer-foot="1"] .alive-dock-greeting-layer__menu span{font-size:18px} .alive-dock-greeting-layer[data-reading-greeting-layer-foot="1"] .alive-dock-greeting-layer__minimize::before{content:"\2212"/"";font-size:20px} /* Line 13522 (help_guide_greeting_words_visible, data-reading-greeting-layer-top="1"): a guide whose first paragraph leaves no foot band opens the same band at the top of the screen, above its h1 (js/alive-dock-sheet.js measured the room). Line 13915: it starts under the sticky site header's bottom edge (--reading-greeting-layer-top, measured there), never above 8 px, so the logo, 'Book a build call' and Menu stay whole and take their taps while she speaks. */ .alive-dock-greeting-layer[data-reading-greeting-layer-foot="1"][data-reading-greeting-layer-top="1"]{inset:calc(8px + env(safe-area-inset-top)) 16px auto 16px;top:max(calc(8px + env(safe-area-inset-top)),var(--reading-greeting-layer-top,0px));transform:translateY(-8px)} .alive-dock-greeting-layer[data-reading-greeting-layer-foot="1"][data-reading-greeting-layer-top="1"][data-reading-greeting-layer-open="1"]{transform:none} /* Line 14524 (help_index_hello_card_clear, data-reading-greeting-layer-strip="1"): on /help at 480 px and under with no room for the 112 px card under the section list, js/alive-dock-sheet.js opens her hello as a 40 px strip: her face (its AI mark) and one caption line fitted to it, no Menu or Minimize (her resting pill keeps them). data-reading-greeting-layer-strip-top="1" sets its top at --reading-greeting-layer-top, 4 px under the list's last row, so it runs past the fold rather than over a row. */ .alive-dock-greeting-layer[data-reading-greeting-layer-strip="1"]{height:var(--reading-greeting-layer-height,40px);max-height:none;grid-template-columns:28px minmax(0,1fr);grid-template-rows:28px;grid-template-areas:"face caption";column-gap:12px;padding:6px 10px;border-radius:14px;font-size:13px;line-height:1.3} .alive-dock-greeting-layer[data-reading-greeting-layer-strip="1"] .alive-dock-greeting-layer__face{justify-self:start;align-self:center;width:28px;height:28px} .alive-dock-greeting-layer[data-reading-greeting-layer-strip="1"] .alive-dock-greeting-layer__face-img{border-radius:8px} .alive-dock-greeting-layer[data-reading-greeting-layer-strip="1"] .alive-dock-greeting-layer__caption{align-self:center;text-align:start;max-height:1.3em;overflow:hidden} .alive-dock-greeting-layer[data-reading-greeting-layer-strip="1"] .alive-dock-greeting-layer__menu,.alive-dock-greeting-layer[data-reading-greeting-layer-strip="1"] .alive-dock-greeting-layer__minimize{display:none} .alive-dock-greeting-layer[data-reading-greeting-layer-strip="1"][data-reading-greeting-layer-strip-top="1"]{top:var(--reading-greeting-layer-top,auto);bottom:auto} .alive-dock-greeting-layer[data-reading-greeting-layer-strip="1"][data-reading-greeting-layer-strip-top="1"] .alive-dock-greeting-layer__caption{align-self:start} } @media(max-width:767.98px) and (prefers-reduced-motion:reduce){.alive-dock-greeting-layer,.alive-dock-greeting-layer[data-reading-greeting-layer-open="1"]{transform:none;transition:none}.alive-dock-greeting-layer[data-reading-greeting-layer-foot="1"][data-reading-greeting-layer-top="1"]{transform:none}} /* Line 13522 (help_guide_greeting_words_visible): the live check of 3a719ffbb03 found none of her greeting words on screen on a help guide at 768 and 1440, where the voice-first pill rests with its caption visually hidden and line 9683's bubble prints only on the classic pill. A guide greeting now prints that bubble right after the pill (the pill clips its own children): from 768 px up, while the pill rests, it shows her words 8 px above the pill's right end (the pill's band: --alive-dock-room, never under its 72 px + 16 px inset), up to three lines so her greeting is never cut, beside a published reading column within line 9683's gutter bound, and it never takes a tap. aria-hidden: the pill's caption stays the live region. Under 768 px it stays hidden (her greeting layer speaks there). */ @media(min-width:768px){.alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding])+.alive-dock__bubble[data-alive-dock-guide-words]{display:-webkit-box!important;position:fixed;z-index:1040;right:calc(16px + env(safe-area-inset-right));bottom:calc(max(var(--alive-dock-room,0px),88px) + 8px + env(safe-area-inset-bottom));-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;box-sizing:border-box;width:max-content;max-width:min(420px,calc(100vw - 32px));margin:0;padding:7px 12px;border:1px solid #36515a;border-radius:14px;background:#101e24;color:#edf7f5;font:13px/18px system-ui,sans-serif;text-align:left;box-shadow:0 8px 24px #0006;pointer-events:none} :root:has(style[data-ns-reading-measure]) .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding])+.alive-dock__bubble[data-alive-dock-guide-words]{max-width:min(420px,calc(100vw - 32px),max(320px,calc((100vw - var(--ns-docs-reading,-100vw)) / 2 - 32px)))}} /* Line 13916 (help_guide_greeting_words_visible, fix-forward of line 13522): the live check of 81bf8c69a7e found the bubble above the pill lying on the end of a bullet line in the guide's reading column at 768 ('...run it from its che[ckout]'): a guide's column is 720 px, so from 768 to 1023 px the side gutter is at most 151 px, under the 200 px her words need beside the column, and the bubble's 320 px floor reached over the text. There her words show inside the pill's own box instead: the bubble stays hidden and the pill's caption (the words she is saying, already its live region) takes a whole row across the pill, above her name and above Talk and Open, wrapping up to three lines; the pill grows upward inside its own width and no second layer of words is drawn over the column. Folded to her face (rest-face: a form field, or alive-dock-text-rows.js clearing a row) the bubble stays down too and the pill keeps its face-only look. A Gemini disclosure or a yielding pill keep line 13522's rule. Line 14479 (r2, live check OV-BB of ec786f5d81): at 1024 and 1100 on /help/install-on-wordpress the bubble still rose above the pill across 'Deploy page a...' and 'Copy the whole tag...'. A 200 px gutter was never enough: the bubble keeps a 320 px floor and a 16 px inset, so it clears the column only where the gutter is 336 px (1392 px), plus 16 px for a classic scrollbar that 100vw counts: 720 + 2 x 352 = 1424 px. Her words stay in the pill up to 1423.98 px; 1424 px and up are main's. At 768 the pill, grown upward by her words, lay on the end of the first h2 ('A WordPress site on your own hosting'): with the guide's words printed, a heading of the reading column keeps the pill's lane (its 256 px, the 16 px inset and an 8 px gap) at its end, less the gutter the page publishes (--ns-reading-right), so a heading wraps before it reaches her; 1200 px and up it is 0. */ @media(min-width:768px) and (max-width:1423.98px){ :root:has(style[data-ns-reading-measure]) .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding]):not(:has([data-gemini-voice-caption]))+.alive-dock__bubble[data-alive-dock-guide-words]{display:none!important} :root:has(style[data-ns-reading-measure]) .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding]):not([data-alive-dock-rest-face="1"]):not([data-alive-dock-rest-face="rows"]):not(:has([data-gemini-voice-caption])):has(+.alive-dock__bubble[data-alive-dock-guide-words]){grid-template-areas:"caption caption caption caption" "face name name name" "face . talk minimize";row-gap:2px;max-height:none;padding:8px 6px 6px;border-radius:22px} :root:has(style[data-ns-reading-measure]) .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding]):not([data-alive-dock-rest-face="1"]):not([data-alive-dock-rest-face="rows"]):not(:has([data-gemini-voice-caption])):has(+.alive-dock__bubble[data-alive-dock-guide-words]) [data-door-voice-caption]{grid-area:caption;position:static;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;width:auto;height:auto;max-width:none;margin:0 0 2px;padding:0 6px;overflow:hidden;clip-path:none;white-space:normal;overflow-wrap:anywhere;text-overflow:clip;text-align:left;font:13px/18px system-ui,sans-serif} :root:has(style[data-ns-reading-measure]) .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-yielding]):not([data-alive-dock-rest-face="1"]):not([data-alive-dock-rest-face="rows"]):not(:has([data-gemini-voice-caption])):has(+.alive-dock__bubble[data-alive-dock-guide-words]) [data-alive-dock-name]{align-self:end;line-height:16px} :root:has(style[data-ns-reading-measure]):has(.alive-dock.alive-dock--voice-first.alive-dock--rest-pill+.alive-dock__bubble[data-alive-dock-guide-words]) .ns-content-body .ns-prose h2{box-sizing:border-box;padding-inline-end:max(0px,calc(280px - var(--ns-reading-right,280px)))} } /* The flagged open dock stays within the visible phone viewport, including its composer. */ @media(max-width:767.98px){ .alive-dock.alive-dock--voice-first[data-dock-hello-text-handoff="1"][data-door-voice-chat-open="1"]{max-height:calc(100dvh - 32px - env(safe-area-inset-bottom));overflow:auto;box-sizing:border-box} .alive-dock.alive-dock--voice-first[data-dock-hello-text-handoff="1"][data-door-voice-chat-open="1"] .alive-dock__body{min-height:0;max-height:calc(100dvh - 180px - env(safe-area-inset-bottom));overflow:auto} .alive-dock.alive-dock--voice-first[data-dock-hello-text-handoff="1"][data-door-voice-chat-open="1"] .alive-dock__frame{height:min(420px,calc(100dvh - 180px - env(safe-area-inset-bottom)));max-height:100%;min-height:0} } /* Line 11323 (voice-demo-resting-talk-label-fits-dock-row-r1): live check OS-YL measured line 10991's longer Talk words ('Voice is resting - type to me') on the open /voice-demo dock running under ☰ Menu and Minimize at 768 and 1440, where those two caught its tap, and a few px past the dock's right edge at 375. While Talk carries data-door-talk-resting="1" it takes the whole row beside her face, above Menu and Minimize, at every width (phones already give it line 8694's row) and wraps inside that row, in balanced lines, rather than run past it. A Chat offer keeps line 1584's row and a yielding fold its own look; every other Talk, and the key off, keep main's dock. */ .alive-dock.alive-dock--voice-first[data-alive-dock-state]:not([data-alive-dock-sheet="pill"]):not([data-alive-dock-yielding]):has(>.ns-door-voice-controls>.ns-door-voice-talk[data-door-talk-resting="1"]:not([hidden])) .ns-door-voice-talk[data-door-talk-resting="1"]{grid-area:offer;justify-self:start;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;text-wrap:balance} @media(min-width:768px){ .alive-dock.alive-dock--voice-first[data-alive-dock-state]:not([data-alive-dock-sheet="pill"]):not([data-alive-dock-yielding]):not([data-door-voice-chat-offered]):has(>.ns-door-voice-controls>.ns-door-voice-talk[data-door-talk-resting="1"]:not([hidden])){grid-template-areas:"face caption caption caption" "face backup backup backup" "face offer offer offer" "face . menu minimize" "drawer drawer drawer drawer" "body body body body"} } /* Line 11437: only an answered, unavailable lane constrains the resting pill. Keep the face and Open whole; the short typing label yields width. The wide name-whole layout belongs to line 11455. */ @media(max-width:480px){ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:has(>.ns-door-voice-controls>.ns-door-voice-talk[data-door-talk-resting="1"]:not([hidden])){max-width:min(420px,calc(100vw - 32px));grid-template-columns:44px minmax(0,1fr) minmax(0,112px) auto} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:has(>.ns-door-voice-controls>.ns-door-voice-talk[data-door-talk-resting="1"]:not([hidden])) .ns-door-voice-talk[data-door-talk-resting="1"]{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:8px} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:has(>.ns-door-voice-controls>.ns-door-voice-talk[data-door-talk-resting="1"]:not([hidden])) [data-alive-dock-minimize]{flex:none} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:has(>.ns-door-voice-controls>.ns-door-voice-talk[data-door-talk-resting="1"]:not([hidden])) [data-ns-door-face]{flex:none} } @media(min-width:481px){ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-name-whole="1"]):has(>.ns-door-voice-controls>.ns-door-voice-talk[data-door-talk-resting="1"]:not([hidden])){max-width:min(420px,calc(100vw - 32px));grid-template-columns:44px minmax(0,1fr) minmax(0,112px) auto} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-name-whole="1"]):has(>.ns-door-voice-controls>.ns-door-voice-talk[data-door-talk-resting="1"]:not([hidden])) .ns-door-voice-talk[data-door-talk-resting="1"]{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:8px} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-name-whole="1"]):has(>.ns-door-voice-controls>.ns-door-voice-talk[data-door-talk-resting="1"]:not([hidden])) [data-alive-dock-minimize]{flex:none} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"]:not([data-alive-dock-name-whole="1"]):has(>.ns-door-voice-controls>.ns-door-voice-talk[data-door-talk-resting="1"]:not([hidden])) [data-ns-door-face]{flex:none} } /* Line 12112 (voice-dock-ai-mark-spaced-from-name-wide-r1, no new key): live check de47dcb6fe3 (OT-WA) read the resting foot dock on /live-avatars at 768 and 1440 as 'AIMrs. NetShow'. The face's edge AI chip (AiDisclosure::mark('edge'): absolute, translate(35%,-35%), margin:0!important) hangs about 9 px past her 44 px face into the pill's 8 px gap (10 px on the plain pill), onto her name. The chip takes no margin, so her name, beside a face that carries the chip, starts 6 px later from 768 px up: at least 4 px clear. The pill grows by at most 6 px; the yielding and face-chip looks keep their !important clip; under 768 px and a face with no chip nothing matches. */ @media(min-width:768px){ .alive-dock.alive-dock--voice-first[data-alive-dock-sheet="pill"] [data-ns-door-face]:has([data-ai-mark])+[data-alive-dock-name]{margin-inline-start:6px} } /* Line 12542: the complete tablet words-and-Talk box goes through the existing field/viewport spot test. */ body:has(.alive-dock--rest-pill[data-alive-dock-face-clear="1"]) [data-alive-dock-rest-talk-bubble="1"][data-alive-dock-face-words]{display:flex;align-items:center;gap:8px;max-width:320px;padding:6px;pointer-events:auto} /* Line 12861: her words wrap (the sheet script keeps them to at most two lines of whole sentences), never an ellipsis. */ [data-alive-dock-rest-talk-bubble="1"]>span{min-width:0;white-space:normal} [data-alive-dock-rest-talk-chip]{flex:none;min-width:44px;min-height:44px;padding:0 10px;border:1px solid #a6c8ff;border-radius:12px;background:#e1ecff;color:#111b2d;font:600 13px/1.3 system-ui;cursor:pointer} [data-alive-dock-rest-talk-chip]:focus-visible{outline:2px solid #fff;outline-offset:-4px} /* Line 12351 (home-phone-interrupt-line-clear-of-headline-r1, no new key): live check 8d2a28ac18e (OT-YS) read the home at 375 with her opening caption on two lines ('Hi, I'm Mrs. NetShow, an AI / agent.'): the interrupt line's dark pill hung about 8 px onto 'AI employees with a face and a voice.'. At 480 px and under the line under her caption reads as a plain small line: no pill padding or background (it overrides the element's inline padding and the stage's slotted pill), its #f8fafc text and the caption's shadow on the dark page. The two-line reserve under her face lives in netshow-door's home layout style, painted before her box. Above 480 px nothing matches and the pill is as before. */ @media (max-width: 480px) { netshow-stage[data-stage-home] .ns-door-voice-interrupt[slot="caption"]{padding:0!important;background:none!important;border-radius:0} } /* Line 14316 (ai.features.alive_dock_collapsed_pill_lets_page_scroll): walk-519 FF-55 (1) measured the help pages at 375 stopping at 1,400 of 11,142 px once her resting pill parked under the pointer: the voice-first dock keeps overscroll-behavior:contain (lines 102 and 152) in every state, so a wheel or swipe that starts on her never reaches the page. On a dock marked data-alive-dock-page-scrolls="1" her rest states (the pill, the face, the hero rest face) let the gesture chain to the page; their overflow is untouched (the pill still clips, the face still shows its whole AI badge), and her open card and chat keep contain, so they scroll inside themselves only. OFF no element carries the mark. */ .alive-dock.alive-dock--voice-first[data-alive-dock-page-scrolls="1"][data-alive-dock-state]:is([data-alive-dock-sheet="pill"],[data-alive-dock-sheet="face"],[data-alive-dock-rests="1"]:not([data-alive-dock-sheet])){overscroll-behavior:auto} /* Line 14072 (enterprise-tablet-talk-chip-starts-talk-one-tap-r1): one tap on her tablet Talk chip opens her sheet as data-alive-dock-state="open" (js/alive-dock-sheet.js). css/alive-dock.css pins an open dock at the top right from 768 px up (the classic panel under the nav), so her voice-first sheet keeps the collapsed dock's bottom-right anchor and opens where the chip was, never over the page's headline. */ .alive-dock.alive-dock--voice-first[data-alive-dock-rest-talk="1"][data-alive-dock-state="open"]{inset:auto 16px calc(16px + env(safe-area-inset-bottom)) auto;max-width:calc(100vw - 32px)} /* Line 8552 (voice-first-door-menu-phone-sheet-close-r1, home_door_menu_phone_sheet): the home door's ☰ Menu never covers her face. Its rows ride in one panel with Close first (door-voice-controls.blade.php, only when the key is on). Under 768 px the open panel is a bottom sheet (at most half the screen, scrolls inside, clears the home indicator) over a dimmed page, so her face and Talk stay in view above it; a tap on the dim, Close or Escape shuts it (door-voice-first.js). From 768 px it is a dropdown anchored under Menu that never moves the page. Nothing matches without the marker, so every other door keeps today's menu. */ .ns-door-voice-menu[data-door-voice-menu-sheet][open]{border-color:transparent;background:transparent} .ns-door-voice-menu[data-door-voice-menu-sheet] .ns-door-voice-menu-close{width:100%;font-weight:600;border-bottom:1px solid #334155} @media(max-width:767.98px){ .ns-door-voice-menu[data-door-voice-menu-sheet][open]::before{content:"";position:fixed;inset:0;z-index:2147483003;background:rgba(2,6,23,.35);cursor:pointer} .ns-door-voice-menu[data-door-voice-menu-sheet][open]>.ns-door-voice-menu-panel{position:fixed;left:0;right:0;bottom:0;z-index:2147483004;box-sizing:border-box;max-height:50dvh;overflow:auto;overscroll-behavior:contain;padding:4px 8px calc(8px + env(safe-area-inset-bottom));border:1px solid var(--ns-border-strong,#64748b);border-bottom:0;border-radius:16px 16px 0 0;background:var(--ns-surface,#111b2d);color:var(--ns-text,#f8fafc);box-shadow:0 -12px 32px rgba(0,0,0,.45);text-align:left} } @media(min-width:768px){ .ns-door-voice-menu[data-door-voice-menu-sheet][open]>.ns-door-voice-menu-panel{position:absolute;top:100%;right:0;z-index:20;box-sizing:border-box;min-width:240px;max-width:min(360px,calc(100vw - 24px));max-height:min(70vh,520px);overflow:auto;margin-top:6px;padding:4px;border:1px solid var(--ns-border-strong,#64748b);border-radius:12px;background:var(--ns-surface,#111b2d);color:var(--ns-text,#f8fafc);box-shadow:0 12px 32px rgba(0,0,0,.45);text-align:left} } /* Line 15140 (doors-greet-caption-within-8s-quiet-rewalk-r1): the re-walk of the served site measured no greeting caption within 8 s on the reading doors whose dock rests as its pill (/compare/ai-answering, /compare/intercom, /trust, /p/live-shows, /help, /docs/getting-started): line 10893's phone face chip (caption at opacity 0) and lines 8715, 10894 and 11455 (caption clipped to 1 px) hold from first paint, so she stayed a silent chip while she said her greeting. Michael's voice-first law: until her greeting caption has shown, no fold may hide it; she may fold after it. While door-voice-first.js says her greeting line (data-door-voice-state="greeting") her caption shows as a bubble above the resting pill, right-aligned to it, inside the screen and taking no taps; on her next phase every fold is main's again. From 768 px a help guide's dock (its guide-words bubble follows it) already shows her words: inside the pill up to 1423 px (line 13916) or in line 13522's bubble above it, so this rule stands aside there. */ @media(max-width:767.98px){ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-door-voice-state="greeting"]{overflow:visible!important} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-door-voice-state="greeting"] [data-door-voice-caption]:not([hidden]):not(:empty){position:absolute!important;left:auto!important;top:auto!important;right:0!important;bottom:calc(100% + 8px)!important;z-index:1;box-sizing:border-box;width:max-content!important;max-width:min(300px,calc(100vw - 24px))!important;height:auto!important;max-height:none!important;margin:0!important;padding:8px 12px!important;overflow:visible!important;clip:auto!important;clip-path:none!important;opacity:1!important;visibility:visible!important;display:block!important;border-radius:12px;background:#0f172a;color:#f8fafc;font:600 15px/20px system-ui,-apple-system,"Segoe UI",sans-serif;text-align:left;white-space:normal!important;text-overflow:clip!important;-webkit-line-clamp:none!important;overflow-wrap:anywhere;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none;translate:none!important;transform:none!important} } @media(min-width:768px){ .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-door-voice-state="greeting"]:not(:has(+.alive-dock__bubble[data-alive-dock-guide-words])){overflow:visible!important} .alive-dock.alive-dock--voice-first.alive-dock--rest-pill[data-alive-dock-state="collapsed"][data-alive-dock-sheet="pill"][data-door-voice-state="greeting"]:not(:has(+.alive-dock__bubble[data-alive-dock-guide-words])) [data-door-voice-caption]:not([hidden]):not(:empty){position:absolute!important;left:auto!important;top:auto!important;right:0!important;bottom:calc(100% + 8px)!important;z-index:1;box-sizing:border-box;width:max-content!important;max-width:min(300px,calc(100vw - 24px))!important;height:auto!important;max-height:none!important;margin:0!important;padding:8px 12px!important;overflow:visible!important;clip:auto!important;clip-path:none!important;opacity:1!important;visibility:visible!important;display:block!important;border-radius:12px;background:#0f172a;color:#f8fafc;font:600 15px/20px system-ui,-apple-system,"Segoe UI",sans-serif;text-align:left;white-space:normal!important;text-overflow:clip!important;-webkit-line-clamp:none!important;overflow-wrap:anywhere;box-shadow:0 8px 24px rgba(0,0,0,.35);pointer-events:none;translate:none!important;transform:none!important} } /* Line 15843 (upskill-voice-12-r1): inside the Google-path token scope ([data-ns-tokens]) the reading pages' greeting card (reading-greeting-layer) reads the --ns-* tokens for its surface, words and lines, light and dark. Each var() falls back to main's colour, so the card outside a scope that declares the tokens paints as before. Layout and timing are untouched. */ @media(max-width:767.98px){ [data-ns-tokens] .alive-dock-greeting-layer{border-color:var(--ns-border-strong,#36515a);background:var(--ns-surface,#101e24);color:var(--ns-text,#edf7f5)} [data-ns-tokens] .alive-dock-greeting-layer__menu,[data-ns-tokens] .alive-dock-greeting-layer__minimize{border-color:var(--ns-border-strong,#36515a)} [data-ns-tokens] .alive-dock-greeting-layer__menu:focus-visible,[data-ns-tokens] .alive-dock-greeting-layer__minimize:focus-visible{outline:3px solid var(--ns-gold,#f59e0b);outline-offset:2px} }