@charset "UTF-8";

/* Android frames */
.prototype {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-6) var(--space-8);
  gap: var(--space-6);
}
.phones { display: flex; align-items: center; gap: var(--phones-gap); zoom: var(--device-scale); }
.phone {
  position: relative;
  width: var(--phone-width);
  height: var(--phone-height);
  padding: var(--phone-padding);
  flex-shrink: 0;
  border: 0;
  border-radius: var(--phone-radius);
  background: var(--color-dark);
  box-shadow: var(--shadow-frame);
}
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--screen-radius);
  background: var(--color-surface);
  color: var(--color-ink);
}
.phone.elder > .phone-screen { filter: brightness(calc(var(--brightness-floor) + var(--brightness-range) * var(--screen-brightness, 1))); }
.status-bar {
  position: relative;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--status-height);
  min-height: var(--status-height);
  padding: var(--space-1) var(--space-6) 0;
  background: transparent;
  color: inherit;
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--line-normal);
}
.status-time { display: flex; align-items: center; gap: var(--space-2); }
.sharing-status { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--space-6) + var(--space-1)); padding: var(--space-1) var(--space-2); border: var(--border-width) solid currentColor; border-radius: var(--radius-sm); background: transparent; color: inherit; font-size: var(--font-2xs); line-height: var(--line-tight); }
.sharing-status::after { content: ""; position: absolute; inset: calc(-1 * var(--space-2)) 0; }
.sharing-status[hidden] { display: none; }
.camera { position: absolute; top: var(--space-3); left: calc(50% - 5px); width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--color-ink); box-shadow: inset 0 0 0 3px var(--color-dark); }
.status-icons { display: flex; align-items: center; gap: var(--space-1); }
.status-icons > span { display: flex; align-items: center; }
.status-icons svg { width: var(--icon-caption); height: var(--icon-caption); }
.status-icons > span:last-child svg { width: var(--icon-small); }
.hardware { position: absolute; right: calc(-1 * var(--hardware-key-width)); width: var(--hardware-key-width); height: var(--hardware-key-height); padding: 0; border: var(--border-width) solid var(--color-ink); border-radius: 0 var(--hardware-key-radius) var(--hardware-key-radius) 0; background: linear-gradient(90deg, var(--color-dark), var(--color-muted)); }
.volume-up { top: var(--hardware-key-top); }
.volume-down { top: calc(var(--hardware-key-top) + var(--hardware-key-height) + var(--hardware-key-gap)); }
.side-key { top: calc(var(--hardware-key-top) + 2 * (var(--hardware-key-height) + var(--hardware-key-gap))); }
.side-key::after { content: ""; position: absolute; top: -8px; bottom: -8px; left: -8px; right: -16px; }
.side-key:hover { background: var(--color-subtle); }
.side-key:focus-visible { outline-offset: var(--space-2); }
.side-key.pressing { background: var(--color-dark-muted); box-shadow: 0 0 0 var(--space-1) var(--color-overlay); }
.side-key.pressing::before { content: ""; position: absolute; inset: -8px; border: var(--border-width) solid var(--color-overlay); border-radius: var(--radius-sm); animation: hold-pulse 650ms ease; }
.app-root { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; background: transparent; }
.android-nav, .remote-system-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  height: var(--system-nav-height);
  min-height: var(--system-nav-height);
  background: transparent;
  color: inherit;
}
.android-nav { position: relative; z-index: 10; flex-shrink: 0; }
.android-nav button { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-size); height: var(--touch-size); padding: var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: inherit; }
.android-nav button:hover { background: var(--color-overlay); }
.android-nav svg, .remote-system-nav svg { width: var(--system-icon-size); height: var(--system-icon-size); }

/* Only the phone's own launcher affects its system areas. A remote launcher
   is nested further inside the child phone and does not match these rules. */
.phone.elder > .phone-screen:has(> .app-root > .os-render > :is(.os-launcher, .os-recents)) {
  background-image: linear-gradient(var(--color-wallpaper-shade), var(--color-wallpaper-shade)), var(--wallpaper-image);
  background-position: center;
  background-size: var(--wallpaper-size);
  background-repeat: no-repeat;
  color: var(--color-on-ink);
}
.phone.child > .phone-screen:has(> .app-root > .os-render > :is(.os-launcher, .os-recents)) { background: var(--color-canvas); }
.phone-screen:has(> .app-root > .os-render.dark > .os-app) { background: var(--color-dark); color: var(--color-on-ink); }

/* Fullscreen Android launcher and apps */
.os-render { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; overflow: hidden; }
.os-render {
  --font-2xs: calc(var(--font-base-2xs) * var(--font-scale, 1));
  --font-xs: calc(var(--font-base-xs) * var(--font-scale, 1));
  --font-sm: calc(var(--font-base-sm) * var(--font-scale, 1));
  --font-md: calc(var(--font-base-md) * var(--font-scale, 1));
  --font-lg: calc(var(--font-base-lg) * var(--font-scale, 1));
  --font-xl: calc(var(--font-base-xl) * var(--font-scale, 1));
  --font-2xl: calc(var(--font-base-2xl) * var(--font-scale, 1));
}
.os-render :is(.form-field input, .text-input, .guide-request-form input) { height: max(var(--control-height), calc(var(--font-md) * var(--line-tight) + 2 * var(--space-3) + 2 * var(--border-width))); }
.os-launcher { position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--space-5); isolation: isolate; background: transparent; }
.launcher-wallpaper { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.launcher-widget { text-align: center; padding-top: var(--space-8); }
.launcher-clock { display: block; margin-top: var(--space-2); font-size: var(--font-clock); font-weight: var(--weight-light); line-height: var(--line-tight); letter-spacing: var(--tracking-tight); }
.launcher-date, .launcher-greeting { font-size: var(--font-xs); line-height: var(--line-normal); }
.launcher-greeting { margin-top: var(--space-2); }
.os-render[data-device="elder"] .launcher-widget { color: var(--color-on-ink); text-shadow: var(--shadow-white-text); }
.os-render[data-device="child"] .launcher-widget { color: var(--color-ink); }
.launcher-icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-3); row-gap: var(--space-6); margin-top: auto; padding: var(--space-6) 0; }
.launcher-app { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; }
.launcher-icon, .dock-app { display: inline-flex; align-items: center; justify-content: center; width: var(--avatar-size); height: var(--avatar-size); border: var(--border-width) solid var(--color-glass-line); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-card); }
.launcher-icon svg, .dock-app svg { width: var(--icon-size); height: var(--icon-size); }
.launcher-icon img, .dock-app img { width: var(--icon-size); height: var(--icon-size); object-fit: contain; }
.launcher-label { font-size: var(--font-xs); font-weight: var(--weight-medium); line-height: var(--line-tight); white-space: nowrap; color: var(--color-ink); }
.os-render[data-device="elder"] .launcher-label { color: var(--color-on-ink); text-shadow: var(--shadow-white-text); }
.launcher-app:hover .launcher-icon, .dock-app:hover { background: var(--color-raised); }
.launcher-icon.apl-tile, .launcher-icon.apl-icon, .launcher-icon.apl { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-on-ink); font-size: var(--font-xs); font-weight: var(--weight-bold); }
.launcher-dock, .os-dock { display: flex; align-items: center; justify-content: space-around; padding: var(--space-3) var(--space-2); border: var(--border-width) solid var(--color-glass-line); border-radius: var(--radius-xl); background: var(--color-glass); }
.launcher-page-dots { display: flex; justify-content: center; gap: var(--space-1); margin: var(--space-3) 0; }
.launcher-page-dots i { width: var(--space-1); height: var(--space-1); border-radius: var(--radius-round); background: var(--color-glass-line); }
.launcher-page-dots i:first-child { background: currentColor; }
.os-app, .apl-page { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; background: var(--color-surface); color: var(--color-ink); }
.os-app-body, .apl-body, .app-body { flex: 1; min-height: 0; padding: var(--space-5) var(--page-gutter); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-line) transparent; }
.os-app-body > h2 { margin-bottom: var(--space-4); }
.os-app-body > .eyebrow { margin-bottom: var(--space-3); }
.os-render.dark > .os-app {
  --color-surface: var(--color-dark);
  --color-raised: var(--color-dark-raised);
  --color-soft: var(--color-dark-raised);
  --color-line: var(--color-dark-line);
  --color-muted: var(--color-dark-muted);
  color: var(--color-on-ink);
}
.os-render.dark .os-app .secondary-button { color: var(--color-on-ink); background: var(--color-dark-line); }
.os-render.dark .os-app input { color: var(--color-on-ink); }
.settings-section-label { margin-bottom: var(--space-3); font-size: var(--font-xs); color: var(--color-muted); }
.font-sample { padding: var(--space-6) 0; font-size: var(--font-xl); font-weight: var(--weight-semibold); line-height: var(--line-normal); letter-spacing: var(--tracking-tight); text-align: center; }
.font-sample span { font-size: var(--font-sm); font-weight: var(--weight-regular); color: var(--color-muted); }
.wifi-row.card { padding: var(--space-4); border: var(--border-width) solid var(--color-line); }
.wifi-row > span { display: flex; flex-direction: column; }
.wifi-connected-note { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-raised); font-size: var(--font-xs); }

/* Android gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.photo-tile { position: relative; display: flex; align-items: flex-end; min-height: 128px; padding: var(--space-3); border: 2px solid transparent; border-radius: var(--radius-md); overflow: hidden; background: var(--color-line); text-align: left; }
.photo-tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 68% 27%, var(--color-raised) 0 11%, transparent 12%), linear-gradient(148deg, transparent 49%, var(--color-subtle) 50% 70%, transparent 71%), linear-gradient(32deg, var(--color-dark-muted) 0 49%, var(--color-line) 50%); }
.photo-tile.flower-photo::before { background: radial-gradient(ellipse at 50% 65%, var(--color-dark-muted) 0 30%, transparent 31%), repeating-linear-gradient(87deg, transparent 0 20px, var(--color-subtle) 21px 24px), var(--color-line); }
.photo-tile.landscape-photo::before { background: radial-gradient(ellipse at 30% 80%, var(--color-subtle) 0 40%, transparent 41%), radial-gradient(ellipse at 80% 80%, var(--color-dark-muted) 0 40%, transparent 41%), var(--color-line); }
.photo-tile.home-photo::before { background: radial-gradient(ellipse at 50% 50%, var(--color-dark-muted) 0 35%, transparent 36%), linear-gradient(45deg, var(--color-subtle), var(--color-line)); }
.photo-caption { position: relative; z-index: 1; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--color-photo-label); color: var(--color-on-ink); font-size: var(--font-2xs); line-height: var(--line-normal); }
.photo-tile.selected { border-color: var(--color-ink); }
.photo-check { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; display: flex; align-items: center; justify-content: center; width: var(--space-6); height: var(--space-6); border-radius: var(--radius-round); background: var(--color-ink); color: var(--color-on-ink); }
.photo-check svg { width: var(--icon-caption); height: var(--icon-caption); }
.photo-art { display: none; }
.gallery-selection { margin-bottom: var(--space-4); font-size: var(--font-xs); color: var(--color-muted); }
.send-photo-preview { margin: var(--space-6) var(--space-8); }
.send-photo-preview .photo-tile { min-height: 176px; }
.photo-success, .success-state { padding: var(--space-10) 0; text-align: center; }
.photo-success h2, .success-state h2 { margin: var(--space-6) 0 var(--space-3); }
.photo-success p, .success-state p { color: var(--color-muted); }
.photo-success .primary-button, .success-state .primary-button { margin-top: var(--space-6); }

/* Android messages */
.message-contact { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--page-gutter); border-bottom: var(--border-width) solid var(--color-line); }
.message-contact > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.message-contact strong { font-size: var(--font-md); }
.message-contact span:not(.avatar), .message-contact p { font-size: var(--font-xs); color: var(--color-muted); }
.message-thread { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.message-date { width: 100%; margin-bottom: var(--space-2); font-size: var(--font-2xs); text-align: center; color: var(--color-muted); }
.message-bubble { max-width: 88%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--font-sm); line-height: var(--line-relaxed); overflow-wrap: anywhere; }
.message-bubble.received { background: var(--color-soft); border-bottom-left-radius: var(--space-1); }
.message-bubble.sent { align-self: flex-end; background: var(--color-line); border-bottom-right-radius: var(--space-1); }
.message-bubble small, .message-time { display: block; margin-top: var(--space-2); font-size: var(--font-2xs); color: var(--color-muted); }
.message-bubble .photo-tile { min-width: 168px; padding: var(--space-2); }
.message-composer { margin: var(--space-2) var(--space-4) var(--space-4); }

/* Android camera and phone */
.camera-viewfinder { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; margin: var(--space-4); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(155deg, var(--color-muted), var(--color-line)); }
.camera-guide { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 32%, var(--color-camera-grid) 32.1% 32.4%, transparent 32.5% 66%, var(--color-camera-grid) 66.1% 66.4%, transparent 66.5%), repeating-linear-gradient(90deg, transparent 0 32%, var(--color-camera-grid) 32.1% 32.4%, transparent 32.5% 66%, var(--color-camera-grid) 66.1% 66.4%, transparent 66.5%); }
.camera-viewfinder p { position: relative; padding: var(--space-4); font-size: var(--font-xs); color: var(--color-on-ink); text-shadow: var(--shadow-white-text); }
.camera-controls { display: flex; align-items: center; justify-content: space-around; padding: var(--space-3) var(--space-5) var(--space-6); }
.camera-controls > span { width: var(--touch-size); }
.shutter-button { display: flex; align-items: center; justify-content: center; width: var(--avatar-large); height: var(--avatar-large); padding: 0; border: 4px solid var(--color-ink); border-radius: var(--radius-round); background: var(--color-surface); box-shadow: 0 0 0 var(--border-width) var(--color-subtle); }
.shutter-button > span { width: var(--avatar-size); height: var(--avatar-size); border: var(--border-width) solid var(--color-subtle); border-radius: var(--radius-round); }
.phone-contact { padding: var(--space-4); border: 0; border-radius: var(--radius-lg); background: var(--color-raised); }
.phone-contact > span:not(.avatar) { display: flex; flex-direction: column; gap: var(--space-1); }
.dial-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.dial-key { height: var(--avatar-large); border: 0; border-radius: var(--radius-xl); background: var(--color-raised); font-size: var(--font-xl); }
.dial-feedback { margin-top: var(--space-6); font-size: var(--font-xs); color: var(--color-muted); text-align: center; }
.os-recents, .recent-apps { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; padding: var(--space-5); isolation: isolate; background: transparent; }
.recents-heading { margin-bottom: var(--space-5); }
.recents-heading h1 { font-size: var(--font-lg); }
.recents-heading p { margin-top: var(--space-2); font-size: var(--font-xs); opacity: .7; }
.os-render[data-device="elder"] .recents-heading, .os-render[data-device="elder"] .recents-empty { color: var(--color-on-ink); text-shadow: var(--shadow-white-text); }
.recents-list { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-glass-line) transparent; }
.recent-app-card { display: flex; flex-direction: column; width: 100%; padding: var(--space-4); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-xl); background: var(--color-surface); color: var(--color-ink); text-align: left; }
.recent-app-heading { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-sm); }
.recent-app-heading svg { width: var(--icon-small); height: var(--icon-small); }
.recent-app-preview { display: flex; flex-direction: column; gap: var(--space-4); min-height: 112px; padding: var(--space-4); margin-top: var(--space-3); border-radius: var(--radius-md); background: var(--color-raised); }
.recent-app-preview > strong { font-size: var(--font-sm); }
.recent-app-lines { display: flex; flex-direction: column; gap: var(--space-2); }
.recent-app-lines i { width: 100%; height: var(--space-1); border-radius: var(--radius-sm); background: var(--color-line); }
.recent-app-lines i:nth-child(2) { width: 72%; }
.recent-app-lines i:nth-child(3) { width: 55%; }
.recents-empty { margin: var(--space-8) 0; font-size: var(--font-sm); text-align: center; }

/* APL connection setup */
.onboarding-step { padding: var(--space-2) 0 var(--space-5); min-height: 0; }
.onboarding-step > h1, .onboarding-step > h2 { margin-bottom: var(--space-6); }
.onboarding-step > p { color: var(--color-muted); }
.pair-setup > p { margin-bottom: var(--space-6); }
.received-requests > p { margin-bottom: var(--space-6); }
.pair-parent .primary-button { font-size: var(--font-md); }
.onboarding-step > .eyebrow { margin-bottom: var(--space-3); }
.pair-setup .code-card { margin: 0 0 var(--space-6); }
.code-card { text-align: center; }
.code-card > span, .code-card > p { display: block; margin-bottom: var(--space-2); font-size: var(--font-xs); color: var(--color-muted); }
.code-display { display: block; font-size: var(--font-2xl); font-weight: var(--weight-semibold); line-height: var(--line-tight); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.code-input { height: max(var(--control-height), calc(var(--font-xl) * var(--line-tight) + 2 * var(--space-2) + 2 * var(--border-width))); padding: var(--space-2); text-align: center; font-size: var(--font-xl); letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.code-input::placeholder { font-size: var(--font-sm); letter-spacing: var(--tracking-normal); }
.code-form { gap: var(--space-3); }
.relationship-setup .profile-form { margin-top: var(--space-8); }
.pair-note { margin-top: var(--space-5); font-size: var(--font-xs); color: var(--color-muted); }
.pair-pending, .setup-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: var(--space-10) 0; text-align: center; }
.pair-pending .round-symbol, .setup-wait .round-symbol { margin-bottom: var(--space-6); }
.pair-pending h2, .setup-wait h2 { margin-bottom: var(--space-4); }
.pair-pending .secondary-button { margin-top: var(--space-6); }
.setup-wait > p { color: var(--color-muted); }
.onboarding-intro { display: flex; flex-direction: column; height: 100%; padding: var(--space-5) var(--page-gutter) var(--space-6); }
.onboarding-intro > .apl-wordmark { margin-bottom: var(--space-8); }
.onboarding-intro > h1 { margin-bottom: var(--space-4); }
.onboarding-intro > p { color: var(--color-muted); }
.onboarding-intro > .primary-button { margin-top: auto; flex-shrink: 0; }
.setup-complete { text-align: center; }
.setup-complete > .apl-wordmark { align-self: flex-start; }
.setup-complete > h1 { margin-top: var(--space-6); }
.tutorial-side-key { position: relative; width: 112px; height: 208px; flex-shrink: 0; margin: var(--space-8) auto var(--space-6); border: 2px solid var(--color-subtle); border-radius: var(--radius-xl); background: var(--color-raised); }
.tutorial-side-key::before { content: ""; position: absolute; top: var(--space-3); left: calc(50% - 4px); width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); background: var(--color-subtle); }
.tutorial-side-key::after { content: ""; position: absolute; top: 80px; right: -8px; width: var(--hardware-key-width); height: var(--hardware-key-height); border-radius: var(--hardware-key-radius); background: var(--color-ink); box-shadow: 0 0 0 var(--space-2) rgb(0 0 0 / 6%), 0 0 0 var(--space-4) rgb(0 0 0 / 3%); }
.tutorial-side-key > span { position: absolute; top: 88px; right: -48px; font-size: var(--font-sm); color: var(--color-muted); }
.tutorial-caption, .intro-step { margin-top: var(--space-3); font-size: var(--font-xs); color: var(--color-muted); text-align: center; }
.sample-codes { display: flex; flex-direction: column; margin-top: var(--space-6); }
.sample-codes > .eyebrow { margin-bottom: var(--space-2); }
.sample-code { justify-content: space-between; gap: var(--space-2); min-height: var(--control-height); font-size: var(--font-xs); }
.sample-code strong { letter-spacing: .04em; font-variant-numeric: tabular-nums; }

/* APL caregiver management and connection information */
.managed-list { display: flex; flex-direction: column; gap: var(--space-3); }
.managed-card { padding: var(--space-4); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-raised); }
.managed-person { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.managed-person strong { font-size: var(--font-md); }
.managed-person small, .managed-person > span { font-size: var(--font-xs); color: var(--color-muted); }
.management-empty { padding: var(--space-6) 0; text-align: center; }
.management-empty > p { margin-bottom: var(--space-4); color: var(--color-muted); }
.relative-profile { padding: var(--space-6) 0; text-align: center; }
.relative-profile .avatar { width: var(--avatar-large); height: var(--avatar-large); margin: 0 auto var(--space-4); }
.relative-profile .avatar svg { width: var(--space-8); height: var(--space-8); }
.relative-profile h2 { margin: var(--space-2) 0; }
.relative-profile p { margin-bottom: var(--space-2); color: var(--color-muted); font-size: var(--font-xs); }
.relative-profile .badge { margin-top: var(--space-2); }
.cached-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.cached-app { flex-direction: column; gap: var(--space-2); min-height: 88px; padding: var(--space-3) var(--space-1); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-md); background: var(--color-raised); font-size: var(--font-xs); text-align: center; }
.cached-app-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); color: var(--color-muted); }
.cached-app-icon img { width: var(--icon-size); height: var(--icon-size); object-fit: contain; }
.cached-app > svg:last-child { display: none; }
.cached-note { margin: var(--space-4) 0 var(--space-6); font-size: var(--font-xs); color: var(--color-muted); text-align: center; }
.app-info-icon { display: flex; align-items: center; justify-content: center; width: var(--avatar-large); height: var(--avatar-large); margin: var(--space-8) auto var(--space-5); border-radius: var(--radius-lg); background: var(--color-raised); color: var(--color-muted); }
.app-info-icon svg, .app-info-icon img { width: var(--space-8); height: var(--space-8); }
.apl-body:has(> .app-info-icon) > h2 { margin-bottom: var(--space-6); text-align: center; }
.contact-card, .profile-summary { display: flex; align-items: center; gap: var(--space-3); }
.profile-summary > div { display: flex; flex-direction: column; gap: var(--space-1); }
.contact-card p { margin-top: var(--space-1); font-size: var(--font-xs); }
.contact-explanation { margin: var(--space-4) 0 var(--space-6); color: var(--color-muted); text-align: center; }
.connection-explanation { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-4) 0; margin-top: var(--space-4); border-top: var(--border-width) solid var(--color-line); color: var(--color-muted); }
.connection-explanation svg { width: var(--icon-small); height: var(--icon-small); }
.connection-explanation p { font-size: var(--font-xs); }
.apl-body > .secondary-button + .secondary-button { margin-top: var(--space-3); }
.apl-body > .profile-form { margin-top: var(--space-4); }
.history-empty { padding: var(--space-5) var(--space-4); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-lg); text-align: center; color: var(--color-muted); }
.history-empty > span { display: inline-flex; margin-bottom: var(--space-3); }
.history-empty p { font-size: var(--font-sm); }
.history-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--color-line); }
.history-row > span { display: inline-flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); flex-shrink: 0; border-radius: var(--radius-sm); background: var(--color-raised); color: var(--color-muted); }
.history-row > span svg { width: var(--icon-small); height: var(--icon-small); }
.history-row > div { flex: 1; min-width: 0; }
.history-row strong { font-size: var(--font-xs); }
.history-row p { margin-top: var(--space-1); font-size: var(--font-xs); color: var(--color-muted); }
.history-row > small { font-size: var(--font-2xs); color: var(--color-muted); white-space: nowrap; }

/* Side-button assistant and voice */
.voice-area { display: grid; grid-template-columns: var(--touch-size) 1fr; align-items: center; gap: var(--space-1) var(--space-3); }
.voice-area .voice-mic { grid-row: 1 / 3; }
.voice-area p, .voice-status { font-size: var(--font-xs); line-height: var(--line-normal); color: var(--color-muted); }
.voice-wave { display: flex; align-items: center; gap: var(--space-1); height: var(--space-5); }
.voice-wave i { width: var(--space-1); height: var(--space-4); border-radius: var(--radius-sm); background: var(--color-subtle); transform: scaleY(.5); }
.voice-wave i:nth-child(2n) { height: var(--space-5); animation-delay: 150ms; }
.voice-wave i:nth-child(3n) { height: var(--space-3); animation-delay: 300ms; }
.assistant-panel.listening .voice-wave i, .voice-wave.listening i { animation: voice-wave 700ms ease-in-out infinite alternate; }
.assistant-options { display: flex; flex-direction: column; gap: var(--space-3); }
.assistant-option { display: grid; grid-template-columns: var(--space-8) 1fr; align-items: center; gap: 0 var(--space-3); width: 100%; min-height: 72px; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-raised); text-align: left; }
.assistant-option:hover { background: var(--color-soft); }
.assistant-option > span { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; color: var(--color-muted); }
.assistant-option strong { font-size: var(--font-md); line-height: var(--line-normal); }
.assistant-option small { font-size: var(--font-xs); line-height: var(--line-normal); color: var(--color-muted); }

/* AI listens first, then guides touch actions on the original OS screen. */
.assistant-panel.ai-listening-panel { max-height: min(92%, 480px); gap: var(--space-3); padding-bottom: var(--space-6); }
.ai-listening-panel .assistant-heading { min-height: var(--touch-size); }
.listening-orb { position: relative; display: flex; align-items: center; justify-content: center; width: var(--avatar-large); height: var(--avatar-large); min-height: var(--avatar-large); flex-shrink: 0; margin: var(--space-2) auto var(--space-1); padding: 0; border: 0; border-radius: var(--radius-round); background: var(--color-ink); color: var(--color-on-ink); }
.listening-orb svg { width: var(--space-8); height: var(--space-8); }
.listening-orb::after { content: ""; position: absolute; inset: calc(-1 * var(--space-2)); border: var(--border-width) solid var(--color-line); border-radius: inherit; pointer-events: none; }
.ai-listening-panel.listening .listening-orb::after, .listening-orb.listening::after { animation: listening-pulse 1.2s ease-in-out infinite alternate; }
.ai-listening-panel > h2 { font-size: var(--font-lg); text-align: center; }
.ai-listening-panel > p[data-voice-status] { min-height: calc(var(--font-sm) * var(--line-normal)); color: var(--color-muted); font-size: var(--font-sm); line-height: var(--line-normal); text-align: center; }
.guide-request-form { display: grid; grid-template-columns: minmax(0, 1fr) var(--touch-size); align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.guide-request-form > label { grid-column: 1 / -1; }
.guide-request-form > div { display: flex; align-items: center; gap: var(--space-2); grid-column: 1 / -1; }
.guide-request-form input { flex: 1; min-width: 0; background: var(--color-raised); font-size: var(--font-sm); }
.guide-request-form .icon-button { background: var(--color-ink); color: var(--color-on-ink); }
.guide-examples { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.guide-examples > button { flex: 1; min-width: 0; padding: var(--space-2) var(--space-3); font-size: var(--font-xs); text-align: center; }
.guide-overlay { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.guide-target-ring { position: absolute; z-index: 42; border: 3px solid var(--color-ink); border-radius: var(--radius-md); box-shadow: 0 0 0 2px var(--color-on-ink); pointer-events: none; }
.guide-target-ring[hidden] { display: none; }
.guide-status-bar { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-4); z-index: 44; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-toast); pointer-events: auto; animation: fade-in var(--duration-fast) ease; }
.guide-status-bar.at-top { top: var(--space-3); bottom: auto; }
.guide-status-bar .assistant-heading { min-height: var(--touch-size); gap: var(--space-1); }
.guide-status-bar .assistant-heading > span, .guide-status-bar .assistant-heading > strong { flex: 1; font-size: var(--font-xs); color: var(--color-muted); }
.guide-status-bar .assistant-heading > div { display: flex; align-items: center; gap: var(--space-1); }
.guide-status-bar .assistant-heading .icon-button { color: var(--color-ink); }
.guide-status-bar .assistant-heading .icon-button svg { width: var(--icon-small); height: var(--icon-small); }
.guide-instruction { margin: var(--space-1) 0; font-size: var(--font-md); font-weight: var(--weight-medium); line-height: var(--line-normal); }
.guide-status-bar > small, .guide-status-bar .guide-progress { display: block; margin-top: var(--space-2); font-size: var(--font-xs); color: var(--color-muted); }

/* Incoming help request */
.incoming-call { position: absolute; inset: 0; z-index: 35; display: flex; flex-direction: column; align-items: center; padding: var(--space-10) var(--space-6) var(--space-6); overflow-y: auto; background: var(--color-raised); text-align: center; animation: fade-in var(--duration-fast) ease; }
.call-kicker { margin-bottom: var(--space-10); color: var(--color-muted); font-size: var(--font-xs); }
.incoming-avatar, .call-avatar { position: relative; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; flex-shrink: 0; margin: var(--space-4) auto var(--space-8); border-radius: var(--radius-round); background: var(--color-soft); color: var(--color-muted); }
.incoming-avatar svg, .call-avatar svg { width: var(--space-10); height: var(--space-10); }
.incoming-avatar::before, .call-avatar::before { content: ""; position: absolute; inset: calc(-1 * var(--space-3)); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-round); }
.incoming-avatar::after, .call-avatar::after { content: ""; position: absolute; inset: calc(-1 * var(--space-6)); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-round); opacity: .5; }
.incoming-call h1 { margin: var(--space-4) 0; font-size: var(--font-2xl); line-height: var(--line-normal); }
.incoming-call > p:not(.call-kicker) { color: var(--color-muted); }
.spoken-question, .request-question { width: 100%; margin-top: var(--space-4); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-soft); font-size: var(--font-sm); line-height: var(--line-relaxed); }
.incoming-actions, .call-actions { display: flex; justify-content: center; gap: var(--space-10); width: 100%; padding: var(--space-6) 0; margin-top: auto; }
.incoming-actions > div, .call-actions > div { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.call-button { display: flex; align-items: center; justify-content: center; width: var(--avatar-large); height: var(--avatar-large); padding: 0; border: 0; border-radius: var(--radius-round); }
.call-button.accept { background: var(--color-ink); color: var(--color-on-ink); }
.call-button.decline { background: var(--color-line); color: var(--color-muted); }
.call-button svg { width: var(--space-8); height: var(--space-8); }
.incoming-actions span, .call-action-label { font-size: var(--font-xs); font-weight: var(--weight-medium); }

/* Shared-screen session. The mirror uses the exact same OS dimensions. */
.remote-viewer { display: flex; flex-direction: column; align-items: center; height: 100%; min-height: 0; padding: var(--space-3) var(--space-5) var(--space-4); gap: var(--space-2); background: var(--color-raised); }
.remote-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; min-height: var(--touch-size); }
.remote-header > div { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); min-width: 0; }
.remote-header span { font-size: var(--font-2xs); color: var(--color-muted); }
.remote-header strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--font-md); line-height: var(--line-normal); }
.remote-header > button { flex-shrink: 0; }
.remote-viewport { position: relative; width: var(--mirror-width); height: var(--mirror-height); flex-shrink: 0; overflow: hidden; border: 0; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 0 0 var(--border-width) var(--color-line), var(--shadow-card); }
.remote-copy { position: absolute; top: 0; left: 0; width: var(--screen-width); height: var(--mirror-source-height); overflow: hidden; background: var(--color-surface); color: var(--color-ink); filter: brightness(calc(var(--brightness-floor) + var(--brightness-range) * var(--screen-brightness, 1))); transform: scale(var(--mirror-scale)); transform-origin: top left; }
.remote-copy > .os-render { height: var(--os-height); width: var(--screen-width); }
.remote-copy:has(> .os-render > :is(.os-launcher, .os-recents)) { background-image: linear-gradient(var(--color-wallpaper-shade), var(--color-wallpaper-shade)), var(--wallpaper-image); background-position: center bottom; background-size: var(--wallpaper-size); background-repeat: no-repeat; color: var(--color-on-ink); }
.remote-copy:has(> .os-render.dark > .os-app) { background: var(--color-dark); color: var(--color-on-ink); }
.remote-system-nav { position: absolute; bottom: 0; left: 0; width: var(--screen-width); }
.remote-system-nav .icon-button, .remote-home-button { color: inherit; }
.remote-caption, .remote-note { margin: 0; font-size: var(--font-xs); line-height: var(--line-normal); text-align: center; color: var(--color-muted); }
.remote-viewer > .primary-button { margin-top: auto; flex-shrink: 0; }

/* Prototype controls */
.scene-nav { display: flex; align-items: center; gap: var(--space-1); max-width: 100%; padding: var(--space-1); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-raised); box-shadow: var(--shadow-card); }
.scene-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--touch-size); padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-muted); font-size: var(--font-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.scene-button > span[data-icon] { display: inline-flex; }
.scene-button svg { width: var(--icon-small); height: var(--icon-small); }
.scene-button.active { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-card); }
.scene-button:hover { background: var(--color-surface); color: var(--color-ink); }
.reset-button { padding: var(--space-2); }
.reset-button > span:not([data-icon]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.nav-divider { width: var(--border-width); height: var(--space-5); margin: 0 var(--space-1); background: var(--color-line); }
body.narrow .prototype { justify-content: flex-start; padding: var(--space-6) var(--space-5) calc(var(--touch-size) + var(--space-10)); }
body.narrow .phones { flex-direction: column; gap: var(--space-8); }
body.narrow .scene-nav { position: fixed; bottom: var(--space-4); z-index: 70; max-width: calc(100vw - 2 * var(--space-3)); }
@media (max-width: 440px) {
  .scene-button { gap: var(--space-1); padding: var(--space-2); font-size: var(--font-2xs); }
  .scene-button svg { width: var(--icon-caption); height: var(--icon-caption); }
  .scene-nav { gap: 0; }
}
@media (max-width: 360px) {
  .scene-button { width: var(--touch-size); padding: var(--space-2); }
  .scene-button > span:not([data-icon]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { opacity: .7; transform: translateY(var(--space-4)); } to { opacity: 1; transform: translateY(0); } }
@keyframes pending { from { opacity: .3; transform: translateY(0); } to { opacity: 1; transform: translateY(-4px); } }
@keyframes voice-wave { from { transform: scaleY(.4); } to { transform: scaleY(1.1); } }
@keyframes listening-pulse { from { opacity: .5; transform: scale(1); } to { opacity: 1; transform: scale(1.1); } }
@keyframes hold-pulse { from { opacity: .2; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-1)); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}