:root {
  --bg: #090b0f;
  --ink: #eef2f5;
  --muted: #9aa2af;
  --panel: #171a20;
  --line: #262a31;
  --green: #119c9b;
  --red: #b7443c;
  --gold: #bf8428;
  --blue: #2c628d;
  --teal: #24c8c2;
}

* {
  box-sizing: border-box;
}

[data-requires-device-capability][hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(36, 200, 194, 0.16), transparent 34%),
    var(--bg);
}

body.app-booting .workspace {
  visibility: hidden;
  pointer-events: none;
}

body.app-booting {
  background: #f3efe6;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.workspace {
  width: min(1220px, calc(100% - 32px));
  margin: 24px auto;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 350px;
  gap: 24px;
  align-items: start;
}

.device-area {
  display: grid;
  justify-items: center;
}

.robot-head {
  width: 180px;
  height: 86px;
  border: 2px solid #252a31;
  border-bottom: 0;
  border-radius: 60px 60px 18px 18px;
  background: linear-gradient(180deg, #20242b, #111318);
  display: grid;
  grid-template-columns: 24px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.camera-cover {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #dffefa;
  background: rgba(17, 156, 155, 0.16);
  padding: 6px 8px;
  font-size: 13px;
  text-align: center;
}

.camera-cover.closed {
  color: var(--red);
}

.camera {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #8cc5e6 0 18%, #132943 20% 62%, #08101c 64%);
  box-shadow: inset 0 0 0 5px #283a4d;
}

.state-light {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #d5dcd6;
}

.state-light.on {
  background: #42a66c;
  box-shadow: 0 0 14px rgba(66, 166, 108, 0.8);
}

.state-light.calling {
  background: var(--gold);
  box-shadow: 0 0 14px rgba(191, 132, 40, 0.8);
}

.robot-body {
  width: min(760px, 100%);
  min-height: 640px;
  border: 8px solid #050607;
  border-radius: 30px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.46);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.robot-body::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 238px;
  background:
    linear-gradient(180deg, rgba(9, 11, 15, 0.18), var(--panel)),
    url("./assets/images/opera_stage.svg") center/cover;
  opacity: 0.42;
  pointer-events: none;
}

.robot-body > * {
  position: relative;
  z-index: 1;
}

.network-status-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 80;
  width: max-content;
  max-width: calc(100% - 40px);
  min-height: 48px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: rgba(43, 46, 45, 0.94);
  box-shadow: 0 10px 28px rgba(18, 21, 20, 0.2);
  transform: translateX(-50%);
  pointer-events: none;
}

.network-status-banner::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #efb14f;
}

.network-status-banner[data-state="restored"] {
  background: rgba(35, 91, 67, 0.95);
}

.network-status-banner[data-state="restored"]::before {
  background: #83d4a5;
}

.network-status-banner[hidden] {
  display: none !important;
}

.screen-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.caption {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 16px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 30px;
  line-height: 1.25;
}

h2 {
  margin-bottom: 10px;
  font-size: 30px;
  line-height: 1.25;
}

.status-pill {
  border: 0;
  color: #dffefa;
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(17, 156, 155, 0.18);
  white-space: nowrap;
}

.status-pill.closed {
  color: var(--red);
}

.voice-panel {
  min-height: 86px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(20, 22, 27, 0.78);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
}

.voice-orb {
  width: 64px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  position: relative;
  background: transparent;
  isolation: isolate;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.voice-orb-surface {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  background:
    radial-gradient(circle at 68% 24%, rgba(245, 251, 255, 0.94) 0 8%, rgba(245, 251, 255, 0) 36%),
    radial-gradient(circle at 27% 72%, rgba(240, 164, 217, 0.86) 0 12%, rgba(240, 164, 217, 0) 48%),
    radial-gradient(circle at 76% 73%, rgba(173, 211, 247, 0.9) 0 13%, rgba(173, 211, 247, 0) 50%),
    linear-gradient(138deg, #d7b9ee 4%, #efb8dd 34%, #b8c9f3 67%, #e7f2fb 100%);
  box-shadow:
    inset 18px 16px 32px rgba(255, 255, 255, 0.28),
    inset -20px -18px 34px rgba(124, 112, 188, 0.15),
    0 18px 40px rgba(101, 92, 156, 0.18);
  transform: translateZ(0);
  will-change: transform, filter;
}

.voice-orb::before,
.voice-orb::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.voice-orb::before {
  inset: -12%;
  z-index: 0;
  background: rgba(209, 185, 235, 0.22);
  filter: blur(18px);
  opacity: 0.72;
}

.voice-orb::after {
  inset: -5px;
  z-index: 2;
  border: 1px solid rgba(121, 116, 170, 0.16);
  opacity: 0;
}

.voice-orb:focus-visible {
  outline: 4px solid rgba(111, 112, 184, 0.32);
  outline-offset: 9px;
}

.voice-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  margin-top: 7px;
  box-shadow: 0 0 0 6px rgba(40, 119, 92, 0.12);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.voice-dot:focus-visible {
  outline: 4px solid rgba(8, 123, 123, 0.32);
  outline-offset: 5px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.voice-panel strong {
  display: block;
  color: var(--teal);
  margin-bottom: 6px;
}

#assistantText {
  margin-bottom: 0;
  font-size: 22px;
  line-height: 1.45;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.pair-card {
  max-width: 560px;
  margin: 12px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(20, 22, 27, 0.82);
  padding: 24px;
}

.pair-card h2 {
  font-size: 34px;
}

.pair-card p {
  color: #c5cbd4;
  font-size: 20px;
  line-height: 1.5;
}

.pair-demo-code {
  display: inline-flex;
  margin: 4px 0 18px;
  color: var(--teal);
  font-size: 28px;
  letter-spacing: 0;
}

.pair-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  gap: 12px;
}

.pair-form input {
  min-height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  padding: 0 16px;
  text-transform: uppercase;
}

.pair-form button {
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  color: #062021;
  background: var(--teal);
  font-weight: 700;
}

.pair-status {
  min-height: 30px;
  margin: 14px 0 0;
}

.pair-status.error {
  color: #ffb4ae;
}

.pair-status.success {
  color: var(--teal);
}

.primary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.tile,
.secondary-row button,
.control-row button {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(28, 31, 38, 0.92);
  color: var(--ink);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.tile {
  min-height: 116px;
  padding: 18px;
  text-align: left;
  overflow: hidden;
  position: relative;
}

.tile::after {
  content: "";
  position: absolute;
  inset: auto -22px -34px auto;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  background: rgba(36, 200, 194, 0.1);
}

.tile span {
  display: block;
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 8px;
}

.tile small {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.4;
}

.tile.opera {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.72)),
    url("./assets/images/opera_stage.svg") center/cover;
  border-left: 8px solid var(--gold);
}

.tile.stage {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.7)),
    url("./assets/images/opera_stage.svg") center/cover;
  border-left: 8px solid var(--red);
}

.tile.drama {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.7)),
    url("./assets/images/drama_scene.svg") center/cover;
  border-left: 8px solid var(--blue);
}

.tile.call {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.7)),
    url("./assets/images/family_photo.svg") center/cover;
  border-left: 8px solid var(--green);
}

.tile.short-video {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.72)),
    url("./assets/images/drama_scene.svg") center/cover;
  border-left: 8px solid var(--green);
}

.secondary-row,
.control-row {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.secondary-row {
  flex-wrap: wrap;
}

.secondary-row button,
.control-row button {
  min-height: 62px;
  padding: 12px 16px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  flex: 1;
}

.media-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 22px;
  align-items: center;
  min-height: 310px;
}

.source-header {
  margin-bottom: 16px;
}

.source-header p:not(.label) {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 0;
}

.source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.source-card {
  min-height: 190px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(28, 31, 38, 0.95);
  color: var(--ink);
  padding: 16px;
  text-align: left;
  box-shadow: 0 8px 20px rgba(26, 40, 35, 0.08);
}

.source-card.preferred {
  border-color: rgba(36, 200, 194, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(36, 200, 194, 0.34),
    0 10px 24px rgba(17, 156, 155, 0.18);
}

.source-card span {
  display: inline-block;
  border-radius: 999px;
  background: rgba(17, 156, 155, 0.18);
  color: #dffefa;
  padding: 6px 9px;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 14px;
}

.source-card strong,
.source-card small {
  display: block;
}

.source-card strong {
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.source-card small {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
}

.media-art,
.photo-scene {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.media-art {
  height: 270px;
  background: linear-gradient(160deg, #8e2f2c, #d49a3a 54%, #1d5447);
}

.media-art img,
.media-art video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 3;
}

.media-art video {
  background: #111916;
  display: none;
}

.media-art.has-video video {
  display: block;
}

.media-art.has-video img {
  display: none;
}

.media-art.has-image .curtain,
.media-art.has-image .performer,
.media-art.has-video .curtain,
.media-art.has-video .performer {
  display: none;
}

.media-art.drama-mode {
  background: linear-gradient(150deg, #2c628d 0%, #d8b165 52%, #28775c 100%);
}

.curtain {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(80, 7, 22, 0.45) 0 18px, rgba(255, 230, 162, 0.22) 19px 22px);
}

.performer {
  width: 92px;
  height: 128px;
  border-radius: 48px 48px 24px 24px;
  background: linear-gradient(#f7dfb7 0 28%, #194f78 29% 58%, #d13f36 59%);
  position: absolute;
  left: 78px;
  bottom: 34px;
  box-shadow: 0 -28px 0 10px #1b1a2e;
}

.label {
  color: var(--gold);
  font-weight: 800;
  margin-bottom: 8px;
}

#playingDesc,
.memory-card p {
  color: var(--muted);
  font-size: 20px;
  line-height: 1.5;
}

.playback-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  border-radius: 8px;
  background: rgba(17, 156, 155, 0.16);
  border: 1px solid rgba(36, 200, 194, 0.22);
  padding: 12px 14px;
  margin-top: 14px;
}

.playback-status strong {
  color: #dffefa;
  font-size: 24px;
  white-space: nowrap;
}

.playback-status span {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.35;
}

.progress {
  height: 12px;
  background: #2a3038;
  border-radius: 999px;
  margin-top: 20px;
  overflow: hidden;
}

.progress span {
  display: block;
  width: 38%;
  height: 100%;
  background: var(--green);
}

#demoAudio {
  width: 100%;
  margin-top: 14px;
}

.chat-list {
  display: grid;
  gap: 14px;
  min-height: 330px;
}

.bubble {
  width: fit-content;
  max-width: 82%;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 22px;
  line-height: 1.45;
}

.bubble.elder {
  justify-self: end;
  background: #23313a;
}

.bubble.bot {
  justify-self: start;
  background: #1f3433;
}

.memory-card {
  text-align: center;
}

.photo-scene {
  height: 260px;
  width: min(430px, 100%);
  margin: 14px auto;
  background:
    radial-gradient(circle at 50% 32%, #fff5d9 0 8%, transparent 9%),
    linear-gradient(180deg, #7ab5d0 0 48%, #8bb46b 49%);
}

.photo-scene::after {
  content: "";
  position: absolute;
  left: 92px;
  right: 92px;
  bottom: 46px;
  height: 70px;
  background: #e65f4d;
  border-radius: 70px 70px 24px 24px;
}

.family-photo-media,
.family-voice-media {
  width: min(520px, 100%);
  margin: 16px auto;
}

.family-photo-media[hidden],
.family-voice-media[hidden],
.active-reminder-card[hidden] {
  display: none !important;
}

.family-photo-media img {
  width: 100%;
  max-height: 430px;
  display: block;
  border-radius: 8px;
  object-fit: contain;
  background: #101214;
}

.family-voice-play {
  width: 100%;
  min-height: 118px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid #bfe7e5;
  border-radius: 8px;
  background: #e7f8f7;
  color: #146f70;
  padding: 18px 24px;
  text-align: left;
}

.family-voice-play-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2db8b7;
  color: #fff;
  font-size: 30px;
}

.family-voice-play strong {
  font-size: 26px;
  line-height: 1.35;
}

.family-collection-nav {
  width: min(100%, 560px);
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  gap: 12px;
}

.family-collection-nav[hidden] {
  display: none !important;
}

.family-collection-nav button {
  min-height: 52px;
  padding: 10px 16px;
  border: 1px solid #d8dedf;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #273238;
  background: #ffffff;
  font-size: 19px;
  font-weight: 750;
}

.family-collection-nav button:disabled {
  color: #9aa3a6;
  background: #f1f3f3;
}

.family-collection-nav output {
  min-width: 68px;
  color: #657176;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.active-reminder-card {
  margin-bottom: 16px;
  border: 2px solid #2db8b7;
  border-radius: 8px;
  background: #e7f8f7;
  padding: 22px;
}

.active-reminder-card h2 {
  margin: 6px 0 12px;
  color: #17191b;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.28;
}

.active-reminder-card > p:last-child {
  margin: 0;
  color: #555d61;
  font-size: 22px;
  line-height: 1.55;
}

.reminder-list,
.settings-panel {
  display: grid;
  gap: 14px;
  min-height: 330px;
}

.reminder-list div,
.settings-panel div {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(28, 31, 38, 0.92);
  padding: 16px;
}

.reminder-list strong,
.settings-panel strong,
.settings-panel span,
.reminder-list span {
  display: block;
}

.reminder-list strong,
.settings-panel strong {
  font-size: 22px;
}

.reminder-list span,
.settings-panel span {
  color: var(--muted);
  font-size: 19px;
  margin-top: 5px;
}

.reminder-list .reminder-list-item {
  width: 100%;
  min-height: 90px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 18px;
  color: inherit;
  background: rgba(28, 31, 38, 0.92);
  text-align: left;
}

.reminder-list .reminder-list-item.is-unread {
  border-color: rgba(213, 35, 35, 0.42);
}

.reminder-list .reminder-unread-dot {
  width: 20px;
  height: 20px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  display: block;
  justify-self: end;
  background: #d52323;
  box-shadow: 0 1px 5px rgba(78, 12, 12, 0.28);
}

.reminder-list .reminder-list-item[aria-current="true"] {
  border-color: #209a98;
  box-shadow: inset 4px 0 0 #209a98;
}

.reminder-list .reminder-list-item strong,
.reminder-list .reminder-list-item span,
.reminder-list .reminder-list-item small {
  display: block;
  min-width: 0;
}

.reminder-list .reminder-list-item span {
  margin: 0;
  overflow-wrap: anywhere;
}

.reminder-list .reminder-list-item small {
  color: #6f7b80;
  font-size: 17px;
  white-space: nowrap;
}

.family-content-empty {
  min-height: 180px;
  margin: 0;
  padding: 40px 24px;
  border: 1px dashed #ccd5d5;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #69777b;
  background: #ffffff;
  font-size: 21px;
  line-height: 1.6;
  text-align: center;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tag-row span {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.82);
  padding: 7px 10px;
}

.demo-panel {
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(17, 19, 24, 0.78);
  margin-top: 18px;
  padding: 14px;
}

.demo-panel strong,
.demo-panel a {
  display: block;
}

.demo-panel p {
  color: var(--muted);
  line-height: 1.45;
  margin: 6px 0 10px;
}

.companion-memory-status {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--green);
  background: rgba(36, 200, 194, 0.08);
  color: var(--muted);
  line-height: 1.45;
}

.native-capability-status {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 14px;
}

.voice-capture-row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.voice-capture-row span {
  color: var(--muted);
  line-height: 1.4;
}

.mic-button {
  min-height: 54px;
  border: 1px solid rgba(36, 200, 194, 0.42);
  border-radius: 999px;
  background: rgba(17, 156, 155, 0.24);
  color: #dffefa;
  font-weight: 900;
}

.mic-button.listening {
  background: var(--green);
  color: #fff;
  box-shadow: 0 0 0 8px rgba(36, 200, 194, 0.16);
}

.demo-input-row {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 10px;
}

.demo-input-row input {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px;
  font: inherit;
  min-width: 0;
  background: #0f1116;
  color: var(--ink);
}

.demo-input-row button,
.demo-chip-row button {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #20242b;
  color: var(--ink);
  font-weight: 800;
}

.demo-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.demo-chip-row button {
  padding: 9px 10px;
}

.demo-panel a {
  color: var(--green);
  font-weight: 800;
  margin-top: 12px;
  text-decoration: none;
}

@media (max-width: 960px) {
  .workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .workspace {
    width: min(100% - 18px, 1220px);
    margin: 10px auto;
  }

  .robot-body {
    padding: 16px;
    border-width: 5px;
  }

  h1 {
    font-size: 24px;
  }

  .primary-grid,
  .media-layout,
  .source-grid {
    grid-template-columns: 1fr;
  }

  .tile span {
    font-size: 30px;
  }

  .secondary-row,
  .control-row,
  .demo-input-row,
  .pair-form,
  .voice-capture-row {
    grid-template-columns: 1fr;
  }

  .secondary-row,
  .control-row {
    flex-direction: column;
  }

  .playback-status {
    grid-template-columns: 1fr;
  }
}

/* Modern Eastern tablet layout selected from concept 3. */
:root {
  --paper: #f4f0e7;
  --paper-deep: #e9e2d5;
  --ink-east: #171919;
  --cinnabar: #b8241e;
  --jade: #087b7b;
  --brass: #a87520;
  --clay: #a94e2d;
}

body {
  min-height: 100vh;
  color: var(--ink-east);
  background: var(--paper);
}

.public-icp-footer {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 8px;
  padding: 4px 7px;
  border-radius: 4px;
  color: rgba(36, 34, 31, 0.64);
  background: rgba(244, 240, 231, 0.86);
  font-size: 11px;
  line-height: 1.4;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
}

.public-icp-footer a {
  color: inherit;
  text-decoration: none;
}

.public-icp-footer a:hover,
.public-icp-footer a:focus-visible {
  color: #171919;
  text-decoration: underline;
}

.public-icp-footer a:focus-visible {
  outline: 2px solid rgba(8, 123, 123, 0.45);
  outline-offset: 2px;
}

body[data-view="call"] .public-icp-footer,
body[data-view="video"] .public-icp-footer,
body[data-view="cellular"] .public-icp-footer,
body[data-view="face"] .public-icp-footer {
  display: none;
}

body.elder-native .public-icp-footer {
  display: none;
}

@media (max-width: 560px) {
  .public-icp-footer {
    bottom: 5px;
    font-size: 10px;
  }
}

.workspace {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  display: block;
}

.device-area {
  width: 100%;
  min-height: 100vh;
  display: block;
}

.robot-head {
  display: none;
}

.robot-body {
  width: 100%;
  min-height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
  color: var(--ink-east);
  background: var(--paper);
  display: grid;
  grid-template-columns: minmax(300px, 32%) minmax(0, 68%);
  grid-template-rows: minmax(230px, auto) 1fr;
}

.robot-body::before {
  display: none;
}

.screen-header {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  padding: clamp(34px, 5vw, 76px) clamp(28px, 4vw, 62px) 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 34px;
  border-right: 1px solid rgba(23, 25, 25, 0.1);
  background:
    linear-gradient(rgba(184, 36, 30, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 36, 30, 0.035) 1px, transparent 1px),
    var(--paper);
  background-size: 28px 28px;
}

.companion-copy {
  min-width: 0;
}

.screen-header .caption {
  margin-bottom: 16px;
  color: var(--cinnabar);
  font-size: clamp(15px, 1.4vw, 21px);
  font-weight: 800;
}

.screen-header h1 {
  max-width: 8em;
  color: var(--ink-east);
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: clamp(34px, 3.25vw, 54px);
  line-height: 1.25;
  font-weight: 700;
}

.home-clock {
  display: grid;
  gap: 5px;
  color: var(--ink-east);
}

.home-clock strong {
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.home-clock span,
.home-clock small {
  font-size: clamp(16px, 1.55vw, 23px);
  line-height: 1.35;
}

.home-clock small {
  color: #68645d;
}

.voice-panel {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  margin: 0;
  padding: 14px clamp(28px, 4vw, 62px) clamp(34px, 5vw, 72px);
  border: 0;
  border-right: 1px solid rgba(23, 25, 25, 0.1);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink-east);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

.voice-panel .voice-orb {
  width: clamp(172px, 15vw, 228px);
  flex: 0 0 auto;
}

.voice-orb-status {
  min-height: 1.5em;
  margin: 22px 0 0;
  color: #716d78;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
}

.voice-panel[data-voice-state="thinking"] .voice-orb-status {
  color: #675f75;
}

.voice-panel[data-voice-state="speaking"] .voice-orb-status {
  color: #4f4963;
  font-weight: 700;
}

.voice-panel[data-voice-state="idle"] .voice-orb-surface {
  animation: orbIdle 5.8s ease-in-out infinite;
}

.voice-panel[data-voice-state="listening"] .voice-orb-surface {
  filter: saturate(1.06) brightness(1.02);
  animation: orbListening 2.2s ease-in-out infinite;
}

.voice-panel[data-voice-state="listening"] .voice-orb::after {
  animation: orbListeningRing 2.2s ease-out infinite;
}

.voice-panel[data-voice-state="thinking"] .voice-orb-surface {
  filter: saturate(1.12) hue-rotate(-6deg);
  animation: orbThinking 2.6s ease-in-out infinite;
}

.voice-panel[data-voice-state="speaking"] .voice-orb-surface {
  filter: saturate(1.12) brightness(1.04);
  animation: orbSpeaking 1.15s ease-in-out infinite;
}

.voice-panel[data-voice-state="speaking"] .voice-orb::after {
  animation: orbSpeakingRing 1.15s ease-out infinite;
}

@keyframes orbIdle {
  0%, 100% { transform: translateY(0) scale(0.985); }
  50% { transform: translateY(-7px) scale(1.015); }
}

@keyframes orbListening {
  0%, 100% { transform: scale(0.97); }
  50% { transform: scale(1.035); }
}

@keyframes orbListeningRing {
  0% { opacity: 0; transform: scale(0.92); }
  35% { opacity: 0.42; }
  100% { opacity: 0; transform: scale(1.16); }
}

@keyframes orbThinking {
  0%, 100% { transform: rotate(-2deg) scale(0.98); border-radius: 50% 47% 52% 48%; }
  50% { transform: rotate(3deg) scale(1.025); border-radius: 47% 53% 48% 52%; }
}

@keyframes orbSpeaking {
  0%, 100% { transform: scale(0.965); }
  35% { transform: scale(1.045); }
  62% { transform: scale(0.995); }
}

@keyframes orbSpeakingRing {
  0% { opacity: 0.08; transform: scale(0.96); }
  48% { opacity: 0.5; }
  100% { opacity: 0; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .voice-panel .voice-orb-surface,
  .voice-panel .voice-orb::after {
    animation: none !important;
  }
}

.remote-screen-off-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #071019;
  color: #b8c8d5;
  cursor: pointer;
}

.remote-screen-off-layer[data-visual="face"] {
  padding: 0;
  background: transparent;
}

.remote-screen-off-layer[hidden] {
  display: none;
}

.remote-screen-eyes {
  display: flex;
  gap: clamp(64px, 10vw, 160px);
}

.remote-screen-eyes b {
  display: block;
  width: clamp(86px, 11vw, 176px);
  height: clamp(24px, 3vw, 48px);
  border-radius: 999px;
  background: #70d6ee;
  box-shadow: 0 0 32px rgba(112, 214, 238, 0.28);
}

.remote-screen-off-layer small {
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: 0;
}

body.device-night-mode .robot-body {
  filter: brightness(0.82) saturate(0.92);
  transition: filter 220ms ease;
}

body.device-family-locked[data-view="home"] .screen-header::after,
body.device-daily-limit-reached[data-view="home"] .screen-header::after {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid rgba(50, 72, 76, 0.18);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  color: #334e53;
  background: rgba(255, 255, 255, 0.78);
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 800;
  line-height: 1.2;
}

body.device-family-locked[data-view="home"] .screen-header::after {
  content: "家庭锁屏已开启";
}

body.device-daily-limit-reached[data-view="home"] .screen-header::after {
  content: "今日娱乐时长已用完";
}

body.device-family-locked.device-daily-limit-reached[data-view="home"] .screen-header::after {
  content: "家庭锁屏 · 今日娱乐时长已用完";
}

.voice-dot {
  width: 76px;
  height: 76px;
  margin: 0;
  border-radius: 50%;
  background: var(--cinnabar);
  box-shadow: 0 0 0 12px rgba(184, 36, 30, 0.08);
  position: relative;
}

.voice-dot::before,
.voice-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.voice-dot::before {
  top: 20px;
  width: 12px;
  height: 25px;
  border: 4px solid #fff;
  border-radius: 8px;
}

.voice-dot::after {
  top: 43px;
  width: 30px;
  height: 13px;
  border: 4px solid #fff;
  border-top: 0;
  border-radius: 0 0 18px 18px;
}

.voice-panel strong {
  color: var(--cinnabar);
  font-size: clamp(24px, 2.3vw, 36px);
  font-weight: 800;
}

.voice-panel-copy {
  min-width: 0;
}

#assistantText {
  max-width: 20em;
  margin: 0;
  color: #55534e;
  font-size: clamp(17px, 1.55vw, 23px);
  line-height: 1.45;
}

.voice-wave {
  height: 30px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.voice-wave i {
  display: block;
  width: 4px;
  height: 9px;
  border-radius: 2px;
  background: var(--cinnabar);
  animation: voicePulse 1.25s ease-in-out infinite;
}

.voice-wave i:nth-child(2),
.voice-wave i:nth-child(8) { height: 15px; animation-delay: 0.1s; }
.voice-wave i:nth-child(3),
.voice-wave i:nth-child(7) { height: 23px; animation-delay: 0.2s; }
.voice-wave i:nth-child(4),
.voice-wave i:nth-child(6) { height: 29px; animation-delay: 0.3s; }
.voice-wave i:nth-child(5) { height: 19px; animation-delay: 0.4s; }

.voice-conversation-controls {
  margin-top: 22px;
  display: grid;
  gap: 12px;
}

.voice-conversation-controls .mic-button {
  width: min(100%, 310px);
  min-height: 64px;
  padding: 12px 18px;
  border: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
  background: var(--cinnabar);
  box-shadow: 0 7px 18px rgba(184, 36, 30, 0.2);
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 800;
}

.voice-conversation-controls .mic-button.listening {
  color: #fff;
  background: var(--jade);
  box-shadow: 0 0 0 6px rgba(8, 123, 123, 0.12);
}

.mic-button-icon {
  width: 18px;
  height: 28px;
  border: 3px solid currentColor;
  border-radius: 10px;
  position: relative;
  flex: 0 0 auto;
}

.mic-button-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 28px;
  height: 14px;
  border: 3px solid currentColor;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  transform: translateX(-50%);
}

.mic-button-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -15px;
  width: 3px;
  height: 7px;
  background: currentColor;
  transform: translateX(-50%);
}

#voiceStatus {
  max-width: 24em;
  margin: 0;
  color: #68645d;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.45;
}

.voice-panel.listening .voice-dot {
  background: var(--jade);
  box-shadow: 0 0 0 12px rgba(8, 123, 123, 0.1);
  animation: listeningPulse 1.8s ease-in-out infinite;
}

@keyframes listeningPulse {
  0%, 100% { transform: scale(0.96); }
  50% { transform: scale(1.04); }
}

@keyframes voicePulse {
  0%, 100% { transform: scaleY(0.55); opacity: 0.55; }
  50% { transform: scaleY(1); opacity: 1; }
}

.view {
  grid-column: 2;
  grid-row: 1 / 3;
  min-width: 0;
}

.view.active {
  display: block;
}

#homeView {
  padding: 10px;
  background: #d8d0c2;
}

.primary-grid {
  height: calc(100vh - 20px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.tile {
  min-height: 0;
  height: 100%;
  border: 0;
  border-radius: 6px;
  padding: 0 20px 0 clamp(96px, 9vw, 150px);
  box-shadow: none;
  display: flex;
  align-items: flex-end;
  text-align: left;
  overflow: hidden;
  isolation: isolate;
}

.tile::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 0;
  width: clamp(82px, 8vw, 126px);
  background: var(--tile-accent, var(--cinnabar));
}

.tile::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.42));
}

.tile span {
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: clamp(82px, 8vw, 126px);
  margin: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: clamp(37px, 4.2vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  writing-mode: vertical-rl;
}

.tile small {
  display: block;
  margin: 0 0 26px;
  padding: 8px 12px;
  border-radius: 4px;
  color: #fff;
  background: rgba(0, 0, 0, 0.46);
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.3;
  backdrop-filter: blur(4px);
}

.tile.drama {
  --tile-accent: var(--cinnabar);
  background-image: url("./assets/images/eastern-concept-content.jpg");
  background-size: 310% auto;
  background-position: 58% 12%;
}

.tile.stage {
  --tile-accent: var(--brass);
  background-image: url("./assets/images/eastern-concept-content.jpg");
  background-size: 440% auto;
  background-position: 100% 10%;
}

.tile.opera {
  --tile-accent: var(--jade);
  background-image: url("./assets/images/eastern-concept-content.jpg");
  background-size: 310% auto;
  background-position: 58% 86%;
}

.tile.call {
  --tile-accent: var(--clay);
  background-image: url("./assets/images/eastern-concept-content.jpg");
  background-size: 440% auto;
  background-position: 100% 86%;
}

.tile.short-video {
  --tile-accent: var(--clay);
  background-image: url("./assets/images/eastern-concept-content.jpg");
  background-size: 440% auto;
  background-position: 100% 86%;
}

body:not([data-view="home"]) .screen-header,
body:not([data-view="home"]) .voice-panel {
  background: #eee9de;
}

body:not([data-view="home"]) .view.active {
  min-height: 100vh;
  padding: clamp(24px, 4vw, 58px);
  color: var(--ink);
  background: #16191c;
}

body:not([data-view="home"]) .view.active .control-row {
  position: sticky;
  bottom: 20px;
}

@media (max-width: 900px) {
  .robot-body {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }

  .screen-header {
    grid-column: 1;
    grid-row: 1;
    min-height: 180px;
    padding: 26px;
    flex-direction: row;
    align-items: flex-end;
    border-right: 0;
    border-bottom: 1px solid rgba(23, 25, 25, 0.1);
  }

  .screen-header h1 {
    max-width: 10em;
    font-size: clamp(30px, 6vw, 48px);
  }

  .home-clock {
    text-align: right;
  }

  .home-clock strong {
    font-size: clamp(42px, 9vw, 68px);
  }

  .voice-panel {
    grid-column: 1;
    grid-row: 2;
    padding: 18px 26px 24px;
    border-right: 0;
    justify-content: center;
  }

  .voice-panel .voice-orb {
    width: clamp(112px, 28vw, 156px);
  }

  .voice-orb-status {
    margin-top: 14px;
    font-size: 17px;
  }

  .view {
    grid-column: 1;
    grid-row: 3;
  }

  #homeView {
    padding: 6px;
  }

  .primary-grid {
    height: auto;
    min-height: 720px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(300px, 1fr));
  }

  body:not([data-view="home"]) .view.active {
    min-height: 70vh;
  }
}

@media (max-width: 560px) {
  .screen-header {
    min-height: 160px;
    align-items: flex-start;
  }

  .screen-header .caption,
  .home-clock span,
  .home-clock small {
    display: none;
  }

  .primary-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, minmax(220px, 1fr));
  }

  .tile {
    padding-left: 100px;
  }

  .tile span,
  .tile::before {
    width: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-wave i {
    animation: none;
  }
}

/* Wellcee light 1.0: calm white surfaces and a single turquoise accent. */
:root {
  color-scheme: light;
  --wellcee-white: #ffffff;
  --wellcee-surface: #f5f6f7;
  --wellcee-text: #151719;
  --wellcee-muted: #7f858c;
  --wellcee-line: #e8eaec;
  --wellcee-teal: #2db8b7;
  --wellcee-teal-dark: #168f8e;
  --wellcee-teal-soft: #e7f8f7;
  --ink: var(--wellcee-text);
  --muted: var(--wellcee-muted);
  --panel: var(--wellcee-white);
  --line: var(--wellcee-line);
  --green: var(--wellcee-teal);
  --teal: var(--wellcee-teal);
  --paper: var(--wellcee-white);
  --paper-deep: var(--wellcee-surface);
  --ink-east: var(--wellcee-text);
  --cinnabar: var(--wellcee-teal-dark);
  --jade: var(--wellcee-teal);
  --brass: var(--wellcee-teal-dark);
  --clay: var(--wellcee-teal-dark);
}

body,
.workspace,
.device-area,
.robot-body {
  color: var(--wellcee-text);
  background: var(--wellcee-white);
}

.robot-body {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.screen-header,
body:not([data-view="home"]) .screen-header {
  border-right: 1px solid var(--wellcee-line);
  background: var(--wellcee-white);
}

.screen-header .caption {
  color: var(--wellcee-teal-dark);
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

.screen-header h1 {
  color: var(--wellcee-text);
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-weight: 800;
}

.home-clock,
.home-clock small {
  color: var(--wellcee-text);
}

.home-clock span,
.home-clock small {
  color: var(--wellcee-muted);
}

.voice-panel,
body:not([data-view="home"]) .voice-panel {
  border-right: 1px solid var(--wellcee-line);
  color: var(--wellcee-text);
  background: var(--wellcee-white);
  box-shadow: none;
}

.voice-panel .voice-orb {
  width: clamp(162px, 14vw, 214px);
}

.voice-orb-surface {
  overflow: hidden;
  border: 0;
  background: var(--wellcee-teal);
  box-shadow: none;
  filter: none;
}

.voice-orb-surface::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 42px;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: -25px 8px 0 -1px #ffffff, -13px -7px 0 -1px #ffffff, 13px 5px 0 -1px #ffffff, 25px -4px 0 -1px #ffffff;
  transform: translate(-50%, -50%);
}

.voice-orb-surface::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 2px solid #91dcdb;
  border-radius: 50%;
}

.voice-orb::before {
  inset: -10%;
  background: var(--wellcee-teal-soft);
  filter: none;
  opacity: 1;
}

.voice-orb::after {
  border: 2px solid #90d9d8;
}

.voice-orb:focus-visible {
  outline: 4px solid #9fdfde;
}

.voice-panel[data-voice-state="idle"] .voice-orb-surface,
.voice-panel[data-voice-state="listening"] .voice-orb-surface,
.voice-panel[data-voice-state="thinking"] .voice-orb-surface,
.voice-panel[data-voice-state="speaking"] .voice-orb-surface {
  filter: none;
}

.voice-panel[data-voice-state="thinking"] .voice-orb-surface {
  background: #55c8c7;
}

.voice-panel[data-voice-state="speaking"] .voice-orb-surface {
  background: var(--wellcee-teal-dark);
}

.voice-orb-status,
.voice-panel[data-voice-state="thinking"] .voice-orb-status,
.voice-panel[data-voice-state="speaking"] .voice-orb-status {
  color: var(--wellcee-muted);
}

.voice-panel[data-voice-state="listening"] .voice-orb-status,
.voice-panel[data-voice-state="speaking"] .voice-orb-status {
  color: var(--wellcee-teal-dark);
}

#homeView {
  padding: 12px;
  background: var(--wellcee-surface);
}

.primary-grid {
  height: calc(100vh - 24px);
  gap: 12px;
}

.tile {
  position: relative;
  padding: 0;
  border: 1px solid var(--wellcee-line);
  border-radius: 7px;
  color: var(--wellcee-text);
  background-color: var(--wellcee-white);
  box-shadow: none;
}

.tile::before {
  z-index: 2;
  inset: 0 auto 0 0;
  width: 7px;
  background: var(--wellcee-teal);
}

.tile::after {
  z-index: 1;
  inset: auto 0 0;
  height: 112px;
  background: var(--wellcee-white);
}

.tile span {
  z-index: 3;
  inset: auto auto 52px 24px;
  width: auto;
  display: block;
  color: var(--wellcee-text);
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-size: clamp(29px, 3vw, 44px);
  line-height: 1.1;
  writing-mode: horizontal-tb;
}

.tile small {
  position: absolute;
  z-index: 3;
  left: 24px;
  bottom: 19px;
  margin: 0;
  padding: 0;
  color: var(--wellcee-muted);
  background: transparent;
  font-size: clamp(15px, 1.25vw, 19px);
  backdrop-filter: none;
}

.tile.drama,
.tile.stage,
.tile.opera,
.tile.call,
.tile.short-video {
  --tile-accent: var(--wellcee-teal);
  border-left: 1px solid var(--wellcee-line);
  background-color: var(--wellcee-white);
  background-repeat: no-repeat;
}

body:not([data-view="home"]) .view.active {
  min-height: 100vh;
  color: var(--wellcee-text);
  background: var(--wellcee-surface);
}

.tile.stage {
  background-size: 500% auto;
  background-position: 100% 8%;
}

.tile.short-video {
  background-size: 500% auto;
  background-position: 100% 92%;
}

.tile.opera {
  background-size: 350% auto;
  background-position: 58% 100%;
}

.pair-card,
.source-card,
.memory-card,
.reminder-list div,
.settings-panel div {
  border: 1px solid var(--wellcee-line);
  border-radius: 7px;
  color: var(--wellcee-text);
  background: var(--wellcee-white);
  box-shadow: none;
}

.reminder-list .reminder-list-item {
  border-color: var(--wellcee-line);
  color: var(--wellcee-text);
  background: var(--wellcee-white);
  box-shadow: none;
}

.reminder-list .reminder-list-item span,
.reminder-list .reminder-list-item small {
  color: var(--wellcee-muted);
}

.pair-card p,
.source-header p:not(.label),
.source-card small,
#playingDesc,
.memory-card p,
.reminder-list span,
.settings-panel span {
  color: var(--wellcee-muted);
}

.pair-demo-code,
.label {
  color: var(--wellcee-teal-dark);
}

.pair-form input {
  border: 1px solid #dadddf;
  border-radius: 7px;
  color: var(--wellcee-text);
  background: var(--wellcee-white);
}

.pair-form button {
  border-radius: 7px;
  color: #ffffff;
  background: var(--wellcee-teal);
}

.pair-status.error {
  color: #c44949;
}

.pair-status.success {
  color: var(--wellcee-teal-dark);
}

.source-grid {
  gap: 12px;
}

.source-card {
  min-height: 184px;
}

.source-card.preferred {
  border: 2px solid var(--wellcee-teal);
  background: #fbffff;
  box-shadow: none;
}

.source-card span {
  border-radius: 16px;
  color: var(--wellcee-teal-dark);
  background: var(--wellcee-teal-soft);
}

.source-grid[data-source-type="video"],
.source-grid[data-source-type="drama"],
.source-grid[data-source-type="opera-audio"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.source-card.video-app-card {
  min-height: 220px;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 92px 1fr;
  background: #ffffff;
}

.source-card.video-app-card .source-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 12px;
  border-radius: 0;
  color: #ffffff;
  background: var(--source-accent, var(--wellcee-teal));
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.source-card.video-app-card .source-card-copy {
  display: block;
  margin: 0;
  padding: 14px 16px 16px;
  border-radius: 0;
  color: var(--wellcee-text);
  background: #ffffff;
}

.source-card.video-app-card .source-badge {
  margin-bottom: 9px;
  padding: 4px 8px;
  font-size: 13px;
}

.source-card.video-app-card strong {
  margin-bottom: 7px;
  font-size: 25px;
}

.source-card.video-app-card small {
  font-size: 16px;
  line-height: 1.35;
}

.source-card.video-app-card.preferred {
  border-color: var(--source-accent, var(--wellcee-teal));
  background: #ffffff;
}

@media (max-width: 900px) {
  .source-grid[data-source-type="video"],
  .source-grid[data-source-type="drama"],
  .source-grid[data-source-type="opera-audio"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.media-layout {
  padding: 18px;
  border: 1px solid var(--wellcee-line);
  border-radius: 7px;
  background: var(--wellcee-white);
}

.media-art,
.photo-scene {
  border-radius: 7px;
}

.playback-status {
  border: 1px solid #cdebea;
  border-radius: 7px;
  background: var(--wellcee-teal-soft);
}

.playback-status strong {
  color: var(--wellcee-teal-dark);
}

.playback-status span {
  color: #657074;
}

.progress {
  background: #e3e6e8;
}

.progress span {
  background: var(--wellcee-teal);
}

.control-row {
  gap: 10px;
}

.control-row button,
.secondary-row button {
  border: 1px solid #dfe2e4;
  border-radius: 7px;
  color: var(--wellcee-text);
  background: var(--wellcee-white);
  box-shadow: none;
}

#pauseButton,
.control-row button:first-child {
  border-color: var(--wellcee-teal);
  color: #ffffff;
  background: var(--wellcee-teal);
}

.chat-list {
  align-content: start;
  padding: 18px;
  border: 1px solid var(--wellcee-line);
  border-radius: 7px;
  background: var(--wellcee-white);
}

.bubble {
  border-radius: 7px;
  color: var(--wellcee-text);
}

.bubble.elder {
  background: #e8f4f8;
}

.bubble.bot {
  border: 1px solid #d4eceb;
  background: var(--wellcee-teal-soft);
}

.memory-card {
  padding: 20px;
}

.reminder-list,
.settings-panel {
  gap: 10px;
}

.reminder-list div,
.settings-panel div {
  min-height: 88px;
  padding: 18px;
}

.reminder-list strong,
.settings-panel strong {
  color: var(--wellcee-text);
}

.status-pill,
.companion-memory-status,
.mic-button,
.demo-panel {
  border: 1px solid #cdebea;
  color: var(--wellcee-teal-dark);
  background: var(--wellcee-teal-soft);
  box-shadow: none;
}

.mic-button.listening {
  color: #ffffff;
  background: var(--wellcee-teal);
  box-shadow: none;
}

.demo-input-row input,
.demo-input-row button,
.demo-chip-row button {
  border: 1px solid #dfe2e4;
  border-radius: 7px;
  color: var(--wellcee-text);
  background: var(--wellcee-white);
}

@media (max-width: 900px) {
  .screen-header,
  .voice-panel,
  body:not([data-view="home"]) .screen-header,
  body:not([data-view="home"]) .voice-panel {
    border-right: 0;
    border-bottom: 1px solid var(--wellcee-line);
  }

  .voice-panel .voice-orb {
    width: clamp(112px, 26vw, 148px);
  }

  #homeView {
    padding: 10px;
  }

  .primary-grid {
    min-height: 720px;
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .primary-grid {
    min-height: 980px;
  }

  .tile {
    padding-left: 0;
  }

  .tile span {
    width: auto;
  }

  .tile::before {
    width: 7px;
  }
}

/* Elder home 2026-08-14: warm companion-first layout for an 8-inch display. */
body[data-view="home"] {
  --elder-home-paper: #fbf8f1;
  --elder-home-ink: #1f2523;
  --elder-home-muted: #6f706a;
  --elder-home-line: rgba(51, 55, 52, 0.13);
  --elder-home-gutter: #e4ded3;
}

body.device-night-mode[data-view="home"] .robot-body {
  filter: brightness(0.94) saturate(0.98);
}

body[data-view="home"] .robot-body {
  height: 100dvh;
  min-height: 100dvh;
  grid-template-columns: minmax(360px, 34%) minmax(0, 66%);
  grid-template-rows: minmax(300px, 42%) minmax(0, 58%);
  color: var(--elder-home-ink);
  background: var(--elder-home-paper);
}

body[data-view="home"] .screen-header {
  min-height: 0;
  padding: clamp(36px, 4vw, 54px) clamp(34px, 3.6vw, 48px) 18px;
  justify-content: flex-start;
  gap: clamp(26px, 4vh, 38px);
  border-right: 1px solid var(--elder-home-line);
  background:
    linear-gradient(rgba(184, 36, 30, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 36, 30, 0.034) 1px, transparent 1px),
    var(--elder-home-paper);
  background-size: 30px 30px;
}

body[data-view="home"] .screen-header .caption {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a52a24;
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 800;
}

body[data-view="home"] .screen-header .caption::before {
  content: "";
  width: 22px;
  height: 4px;
  border-radius: 4px;
  background: #a52a24;
}

body[data-view="home"] .screen-header h1 {
  max-width: 10em;
  color: var(--elder-home-ink);
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: clamp(38px, 3.45vw, 52px);
  line-height: 1.28;
  font-weight: 700;
  white-space: pre-line;
}

body[data-view="home"] .home-clock {
  width: 100%;
  padding-top: 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 2px;
  align-items: end;
  border-top: 1px solid var(--elder-home-line);
  color: var(--elder-home-ink);
}

body[data-view="home"] .home-clock strong {
  grid-row: 1 / 3;
  color: var(--elder-home-ink);
  font-size: clamp(56px, 5.3vw, 72px);
  line-height: 0.95;
  font-weight: 500;
}

body[data-view="home"] .home-clock span {
  color: #4f554f;
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 700;
}

body[data-view="home"] .home-clock small {
  color: var(--elder-home-muted);
  font-size: clamp(14px, 1.2vw, 17px);
}

body[data-view="home"] .voice-panel {
  padding: 12px clamp(34px, 3.6vw, 48px) 44px;
  justify-content: center;
  border-right: 1px solid var(--elder-home-line);
  color: var(--elder-home-ink);
  background: var(--elder-home-paper);
}

body[data-view="home"] .voice-companion-label {
  margin: 0 0 24px;
  color: #3f6864;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.35;
  font-weight: 800;
}

body[data-view="home"] .voice-panel .voice-orb {
  width: clamp(198px, 18vw, 238px);
}

body[data-view="home"] .voice-panel[data-voice-state="idle"] .voice-orb-surface {
  filter: saturate(1.1) brightness(1.05);
}

body[data-view="home"] .voice-panel .voice-orb::before {
  background: rgba(209, 185, 235, 0.28);
  opacity: 0.82;
}

body[data-view="home"] .voice-orb-status {
  margin-top: 24px;
  color: #65656e;
  font-size: clamp(18px, 1.5vw, 21px);
}

body[data-view="home"] #homeView {
  padding: 12px;
  background: var(--elder-home-gutter);
}

body[data-view="home"] .primary-grid {
  height: calc(100dvh - 24px);
  gap: 10px;
}

body[data-view="home"] .tile {
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 8px;
  display: flex;
  align-items: flex-end;
  color: #ffffff;
  background-color: #1c1e20;
  box-shadow: 0 3px 10px rgba(35, 31, 27, 0.12);
  text-align: left;
  overflow: hidden;
  isolation: isolate;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

body[data-view="home"] .tile::before {
  z-index: 2;
  inset: 0 auto 0 0;
  width: clamp(76px, 6.6vw, 88px);
  background: var(--home-tile-accent);
}

body[data-view="home"] .tile::after {
  content: none;
  display: none;
}

body[data-view="home"] .tile span {
  z-index: 3;
  inset: 0 auto 0 0;
  width: clamp(76px, 6.6vw, 88px);
  display: grid;
  place-items: center;
  color: #ffffff;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: clamp(35px, 3.6vw, 47px);
  font-weight: 800;
  line-height: 1.08;
  writing-mode: vertical-rl;
}

/* Legacy builds may still inject app-name subtitles into the home tiles. */
body[data-view="home"] .tile > small {
  display: none !important;
}

body[data-view="home"] .tile:focus-visible {
  outline: 4px solid #f3b83f;
  outline-offset: -5px;
}

body[data-view="home"] .tile:active {
  transform: scale(0.992);
}

@media (hover: hover) {
  body[data-view="home"] .tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(35, 31, 27, 0.18);
  }
}

body[data-view="home"] .tile.drama {
  --home-tile-accent: #b52a24;
}

body[data-view="home"] .tile.stage {
  --home-tile-accent: #a97820;
}

body[data-view="home"] .tile.opera {
  --home-tile-accent: #0b7d79;
}

body[data-view="home"] .tile.short-video {
  --home-tile-accent: #aa5132;
}

body[data-view="home"] .tile.family {
  --home-tile-accent: #356d7f;
}

body[data-view="home"] .home-family-unread-dot {
  position: absolute;
  z-index: 6;
  top: 0;
  right: 0;
  left: auto;
  width: 28px;
  height: 28px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  display: block;
  background: #d52323;
  box-shadow: 0 2px 7px rgba(78, 12, 12, 0.32);
  pointer-events: none;
}

body[data-view="home"] .home-family-unread-dot[hidden] {
  display: none;
}

body[data-view="home"] .tile.apps {
  --home-tile-accent: #6c5a89;
}

body[data-view="home"] .public-icp-footer {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 3px 6px;
  text-align: center;
  background: transparent;
  transform: translateX(-50%);
  backdrop-filter: none;
}

@media (max-width: 900px) {
  body[data-view="home"] .robot-body {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  body[data-view="home"] .screen-header {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    padding: 28px;
    border-right: 0;
    border-bottom: 1px solid var(--elder-home-line);
  }

  body[data-view="home"] .screen-header h1 {
    max-width: none;
  }

  body[data-view="home"] .voice-panel {
    grid-column: 1;
    grid-row: 2;
    padding: 26px 28px 38px;
    border-right: 0;
    border-bottom: 1px solid var(--elder-home-line);
  }

  body[data-view="home"] #homeView {
    grid-column: 1;
    grid-row: 3;
  }

  body[data-view="home"] .primary-grid {
    height: auto;
    min-height: 780px;
  }

  body[data-view="home"] .public-icp-footer {
    left: 50%;
  }
}

/* Restore the functional Doubao-style voice orb across elder screens. */
.voice-panel .voice-orb {
  width: clamp(172px, 15vw, 228px);
}

.voice-panel[data-voice-state] .voice-orb-surface {
  overflow: visible;
  border: 0;
  background:
    radial-gradient(circle at 68% 24%, rgba(245, 251, 255, 0.94) 0 8%, rgba(245, 251, 255, 0) 36%),
    radial-gradient(circle at 27% 72%, rgba(240, 164, 217, 0.86) 0 12%, rgba(240, 164, 217, 0) 48%),
    radial-gradient(circle at 76% 73%, rgba(173, 211, 247, 0.9) 0 13%, rgba(173, 211, 247, 0) 50%),
    linear-gradient(135deg, #f0cbe6 0%, #d9d1ef 48%, #cae9f6 100%);
  box-shadow:
    inset 18px 16px 32px rgba(255, 255, 255, 0.28),
    inset -20px -18px 34px rgba(124, 112, 188, 0.15),
    0 18px 40px rgba(101, 92, 156, 0.18);
}

.voice-panel .voice-orb-surface::before,
.voice-panel .voice-orb-surface::after {
  content: none;
}

.voice-panel .voice-orb::before {
  inset: -12%;
  background: rgba(209, 185, 235, 0.22);
  filter: blur(18px);
  opacity: 0.72;
}

.voice-panel .voice-orb::after {
  inset: -5px;
  border: 1px solid rgba(121, 116, 170, 0.16);
}

.voice-panel .voice-orb:focus-visible {
  outline: 4px solid rgba(111, 112, 184, 0.32);
  outline-offset: 9px;
}

.voice-panel[data-voice-state="idle"] .voice-orb-surface {
  filter: none;
  animation: orbIdle 5.8s ease-in-out infinite;
}

.voice-panel[data-voice-state="listening"] .voice-orb-surface {
  filter: saturate(1.06) brightness(1.02);
  animation: orbListening 2.2s ease-in-out infinite;
}

.voice-panel[data-voice-state="thinking"] .voice-orb-surface {
  filter: saturate(1.12) hue-rotate(-6deg);
  animation: orbThinking 2.6s ease-in-out infinite;
}

.voice-panel[data-voice-state="speaking"] .voice-orb-surface {
  filter: saturate(1.12) brightness(1.04);
  animation: orbSpeaking 1.15s ease-in-out infinite;
}

.voice-panel[data-voice-state="listening"] .voice-orb::after {
  animation: orbListeningRing 2.2s ease-out infinite;
}

.voice-panel[data-voice-state="speaking"] .voice-orb::after {
  animation: orbSpeakingRing 1.15s ease-out infinite;
}

@media (max-width: 900px) {
  .voice-panel .voice-orb {
    width: clamp(112px, 28vw, 156px);
  }
}

/* Single-screen companion face: the default daily conversation surface. */
body[data-view="face"],
body[data-view="face"] .workspace,
body[data-view="face"] .device-area,
body[data-view="face"] .robot-body {
  min-height: 100dvh;
  color: #edf7fb;
  background: #162432;
}

body[data-view="face"] {
  overflow: hidden;
}

body[data-view="face"] .robot-body {
  position: relative;
  display: block;
}

body[data-view="face"] .screen-header,
body[data-view="face"] .voice-panel {
  display: none;
}

body[data-view="face"] .companion-face-view.active {
  position: absolute;
  z-index: 20;
  inset: 0;
  width: 100%;
  min-height: 100dvh;
  padding: 0;
  display: grid;
  color: #edf7fb;
  background: #162432;
}

.face-screen {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #162432;
}

.companion-face-button {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  color: inherit;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.companion-face-button:focus-visible {
  outline: 4px solid rgba(117, 220, 242, 0.72);
  outline-offset: -8px;
}

.companion-face-art {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 100dvh;
  overflow: hidden;
}

.face-expression {
  opacity: 0;
  transform-origin: center;
  transition: opacity 160ms ease, transform 220ms ease;
}

.face-expression rect,
.face-expression circle,
.face-expression ellipse,
.face-eye-line,
.face-mouth-line {
  fill: #75dcf2;
  stroke: #75dcf2;
}

.face-eye-line,
.face-mouth-line {
  fill: none;
  stroke-linecap: round;
  stroke-width: 18;
}

.face-mouth-line {
  stroke-width: 12;
}

.face-smile-eye {
  stroke-width: 18;
  stroke-linecap: round;
}

.face-expression .face-open-eye {
  fill: #75dcf2;
  stroke: none;
}

.face-expression .face-open-mouth {
  fill: #75dcf2;
  stroke: none;
}

.face-love-eye {
  fill: #75dcf2;
  stroke: none;
}

#faceView[data-expression="calm"] .face-expression-calm,
#faceView[data-expression="listening"] .face-expression-listening,
#faceView[data-expression="thinking"] .face-expression-thinking,
#faceView[data-expression="speaking"] .face-expression-speaking,
#faceView[data-expression="happy"] .face-expression-happy,
#faceView[data-expression="laughing"] .face-expression-laughing,
#faceView[data-expression="caring"] .face-expression-caring,
#faceView[data-expression="surprised"] .face-expression-surprised,
#faceView[data-expression="sleepy"] .face-expression-sleepy,
#faceView[data-expression="sad"] .face-expression-sad,
#faceView[data-expression="confused"] .face-expression-confused,
#faceView[data-expression="loving"] .face-expression-loving {
  opacity: 1;
}

html[data-face-mode="eyes"] #faceView .face-expression {
  transform: translateY(64px) scale(1.06);
}

html[data-face-mode="eyes"] #faceView .face-mouth-line,
html[data-face-mode="eyes"] #faceView .face-open-mouth,
html[data-face-mode="eyes"] #faceView .face-speaking-mouth,
html[data-face-mode="eyes"] #faceView .face-laughing-mouth,
html[data-face-mode="eyes"] #faceView .face-sleepy-mouth {
  opacity: 0;
}

#faceView[data-expression="calm"] .face-blink {
  transform-box: fill-box;
  transform-origin: center;
  animation: companionBlink 5.4s ease-in-out infinite;
}

#faceView[data-voice-state="listening"] .face-listening-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: companionListen 1.15s ease-in-out infinite;
}

#faceView[data-voice-state="speaking"] .face-speaking-mouth {
  transform-box: fill-box;
  transform-origin: center;
  animation: companionTalk 620ms ease-in-out infinite;
}

#faceView[data-expression="laughing"] .face-laughing-mouth,
#faceView[data-expression="sleepy"] .face-sleepy-mouth {
  transform-box: fill-box;
  transform-origin: center;
  animation: companionMouthBreathe 1.4s ease-in-out infinite;
}

#faceView[data-expression="loving"] .face-love-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: companionHeartBeat 1.5s ease-in-out infinite;
}

html[data-face-mode="eyes"] #faceView[data-voice-state="speaking"] .face-expression-speaking rect,
html[data-face-mode="eyes"] #faceView[data-expression="speaking"] .face-expression-speaking rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: companionSpeakingEyes 680ms ease-in-out infinite;
}

html[data-face-mode="eyes"] #faceView[data-expression="laughing"] .face-expression-laughing .face-eye-line {
  transform-box: fill-box;
  transform-origin: center;
  animation: companionLaughingEyes 1.05s ease-in-out infinite;
}

html[data-face-mode="eyes"] #faceView[data-expression="caring"] .face-expression-caring .face-eye-line {
  transform-box: fill-box;
  transform-origin: center;
  animation: companionCaringEyes 2.6s ease-in-out infinite;
}

@keyframes companionBlink {
  0%, 44%, 48%, 100% { transform: scaleY(1); }
  46% { transform: scaleY(0.12); }
}

@keyframes companionListen {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

@keyframes companionTalk {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1.25); }
}

@keyframes companionMouthBreathe {
  0%, 100% { transform: scale(0.92); }
  50% { transform: scale(1.08); }
}

@keyframes companionHeartBeat {
  0%, 100% { transform: scale(0.94); }
  45% { transform: scale(1.08); }
}

@keyframes companionSpeakingEyes {
  0%, 100% { transform: scaleY(0.82); opacity: 0.82; }
  50% { transform: scaleY(1.14); opacity: 1; }
}

@keyframes companionLaughingEyes {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes companionCaringEyes {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.025); opacity: 1; }
}

@media (orientation: portrait) {
  .companion-face-button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .companion-face-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #faceView *,
  #faceView *::before,
  #faceView *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

.elder-home-watch-notice {
  position: fixed;
  top: max(14px, env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 1200;
  width: min(620px, calc(100% - 28px));
  max-width: calc(100vw - 28px);
  min-height: 76px;
  padding: 10px 12px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  transform: translateX(-50%);
  border: 2px solid #f29132;
  border-radius: 8px;
  color: #16191e;
  background: #fffaf2;
  box-shadow: 0 8px 22px rgba(42, 30, 17, 0.18);
}

.elder-home-monitoring-capture {
  position: fixed;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  opacity: 0.01;
  pointer-events: none;
}

.elder-home-monitoring-capture video,
.elder-home-monitoring-capture canvas {
  width: 2px !important;
  height: 2px !important;
}

.elder-home-watch-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #ef8b28;
}

.elder-home-watch-icon::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 11px;
  height: 11px;
  border: 2px solid #fffaf2;
  border-radius: 50%;
  background: #e54040;
  animation: elder-watch-pulse 1.4s ease-in-out infinite;
}

.elder-home-watch-icon svg {
  width: 25px;
  height: 25px;
}

.elder-home-watch-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.elder-home-watch-copy strong {
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.2;
}

.elder-home-watch-copy small {
  color: #6d665e;
  font-size: clamp(12px, 1.5vw, 15px);
}

.elder-home-watch-notice button {
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid #d94b42;
  border-radius: 7px;
  color: #c9362e;
  background: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

@keyframes elder-watch-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}

@media (max-width: 520px) {
  .elder-home-watch-notice {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .elder-home-watch-icon {
    width: 42px;
    height: 42px;
  }

  .elder-home-watch-notice button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elder-home-watch-icon::after {
    animation: none;
  }
}

.entertainment-restriction-dialog {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(20, 25, 31, 0.58);
  backdrop-filter: blur(4px);
}

.entertainment-restriction-dialog[hidden] {
  display: none;
}

.entertainment-restriction-card {
  width: min(560px, 100%);
  padding: 34px 30px 28px;
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  gap: 16px;
  border: 3px solid #e5a22f;
  border-radius: 24px;
  color: #20242a;
  background: #fffdf8;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.entertainment-restriction-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #9a5b00;
  background: #fff0c9;
}

.entertainment-restriction-icon svg {
  width: 42px;
  height: 42px;
}

.entertainment-restriction-card strong {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.2;
}

.entertainment-restriction-card p {
  max-width: 470px;
  margin: 0;
  color: #565c64;
  font-size: clamp(20px, 2.7vw, 28px);
  line-height: 1.5;
}

.entertainment-restriction-card button {
  width: min(320px, 100%);
  min-height: 64px;
  margin-top: 8px;
  border: 0;
  border-radius: 16px;
  color: #ffffff;
  background: #b86800;
  font-size: 24px;
  font-weight: 800;
}

/* Elder family call: a full-screen surface shared by ringing and active calls. */
body[data-view="call"],
body[data-view="video"] {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #151719;
}

body[data-view="call"] .workspace,
body[data-view="video"] .workspace,
body[data-view="call"] .device-area,
body[data-view="video"] .device-area,
body[data-view="call"] .robot-body,
body[data-view="video"] .robot-body {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #151719;
  box-shadow: none;
}

body[data-view="call"] .screen-header,
body[data-view="video"] .screen-header,
body[data-view="call"] .voice-panel,
body[data-view="video"] .voice-panel,
body[data-view="call"] .robot-head,
body[data-view="video"] .robot-head {
  display: none !important;
}

body[data-view="call"] #callView.active,
body[data-view="video"] #videoView.active {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #f8f9f9;
  border: 0;
  border-radius: 0;
  background: #191b1e;
}

body[data-view="call"] #callView.active {
  padding: max(26px, env(safe-area-inset-top, 0px)) max(30px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(30px, env(safe-area-inset-left, 0px));
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(36, 74, 68, 0.34), transparent 48%),
    linear-gradient(315deg, rgba(116, 88, 64, 0.2), transparent 42%),
    #1a1c1f;
}

.elder-call-incoming-topline,
.elder-call-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.elder-call-brand,
.elder-call-secure,
.elder-call-privacy {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #f4f6f5;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.elder-call-secure,
.elder-call-privacy {
  color: #c8d1ce;
  font-size: 16px;
  font-weight: 600;
}

.elder-call-brand svg,
.elder-call-secure svg,
.elder-call-privacy svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.elder-call-incoming-content {
  min-height: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.elder-call-avatar {
  width: clamp(116px, 15vmin, 172px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 4px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  color: #176f67;
  background: #e8f2ef;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
}

.elder-call-incoming-content p {
  margin: 24px 0 6px;
  color: #bfc8c5;
  font-size: 22px;
  line-height: 1.35;
}

.elder-call-incoming-content h2 {
  margin: 0;
  color: #ffffff;
  font-size: 44px;
  line-height: 1.2;
  letter-spacing: 0;
}

.elder-call-incoming-content small {
  max-width: min(680px, 86vw);
  margin-top: 14px;
  color: #c8cecc;
  font-size: 18px;
  line-height: 1.55;
}

.elder-call-incoming-actions {
  width: min(420px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 80px;
}

.elder-call-incoming[data-call-phase="dialing"] .elder-call-incoming-actions {
  width: min(180px, 100%);
  grid-template-columns: 1fr;
}

.elder-call-incoming-actions button,
.elder-call-controls button {
  appearance: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 0;
  border-radius: 0;
  color: #f5f6f6;
  background: transparent;
  box-shadow: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.elder-call-incoming-actions button[hidden],
.elder-call-network-banner[hidden],
.elder-call-more-menu[hidden] {
  display: none !important;
}

.elder-call-action-disc {
  width: 82px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: #1c936f;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32);
}

.elder-call-decline .elder-call-action-disc {
  background: #ef5b57;
}

.elder-call-action-disc svg {
  width: 34px;
  height: 34px;
  stroke-width: 2.4;
}

.elder-call-incoming-actions button:focus-visible .elder-call-action-disc,
.elder-call-controls button:focus-visible .elder-call-control-disc,
.elder-call-more-menu button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

.elder-call-active {
  isolation: isolate;
  background: #101214;
}

.elder-call-remote {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #ffffff;
  background: #181b1d;
}

.elder-call-remote > div:not(.elder-call-voice-fallback),
.elder-call-remote video,
.elder-call-remote canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.elder-call-voice-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 116px 26px 176px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(22, 92, 82, 0.16), transparent 45%, rgba(143, 103, 69, 0.14)),
    #1b1e20;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.elder-call-remote.connected .elder-call-voice-fallback {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.elder-call-avatar-active {
  width: clamp(112px, 14vmin, 154px);
  font-size: 50px;
}

.elder-call-relation {
  margin: 18px 0 2px;
  color: #b9c3c0;
  font-size: 18px;
  font-weight: 700;
}

.elder-call-voice-fallback h2 {
  margin: 0;
  color: #ffffff;
  font-size: 42px;
  line-height: 1.22;
  letter-spacing: 0;
}

.elder-call-live-status {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #d4dbd8;
  font-size: 18px;
}

.elder-call-live-status > span {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #e7aa4d;
}

.elder-call-active[data-call-state="voice"] .elder-call-live-status > span,
.elder-call-active[data-call-state="video"] .elder-call-live-status > span {
  background: #42c394;
}

.elder-call-active[data-call-state="weak-network"] .elder-call-live-status > span {
  background: #e9a84a;
}

.elder-call-live-status strong {
  font-weight: 650;
}

.elder-call-voice-fallback time {
  margin-top: 10px;
  color: #aeb7b4;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.elder-call-topbar {
  position: absolute;
  top: max(26px, env(safe-area-inset-top, 0px));
  right: max(30px, env(safe-area-inset-right, 0px));
  left: max(30px, env(safe-area-inset-left, 0px));
  z-index: 7;
  pointer-events: none;
}

.elder-call-topbar > span {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(10, 12, 13, 0.58);
  backdrop-filter: blur(12px);
}

.elder-call-privacy::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #39c68c;
}

.elder-call-privacy.camera-off::before {
  background: #aeb4b2;
}

.elder-call-self-wrap {
  position: absolute;
  top: max(84px, calc(env(safe-area-inset-top, 0px) + 76px));
  left: max(30px, env(safe-area-inset-left, 0px));
  z-index: 6;
  width: clamp(176px, 21vw, 292px);
  display: grid;
  gap: 7px;
  color: #f4f5f5;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}

.elder-call-self-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 7px;
  color: #dce4e1;
  background: #313638;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34);
  font-size: 34px;
  font-weight: 800;
}

.elder-call-self-preview video,
.elder-call-self-preview canvas,
.elder-call-self-preview > div:not(.elder-call-self-fallback) {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.elder-call-self-preview.camera-off video,
.elder-call-self-preview.camera-off canvas,
.elder-call-self-preview.camera-off > div:not(.elder-call-self-fallback) {
  display: none !important;
}

.elder-call-self-preview.camera-on:has(video) .elder-call-self-fallback,
.elder-call-self-preview.camera-on:has(canvas) .elder-call-self-fallback {
  visibility: hidden;
}

.elder-call-self-preview.camera-off::after {
  content: "摄像头已关闭";
  position: absolute;
  right: 8px;
  bottom: 7px;
  left: 8px;
  color: #d2d8d6;
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

.elder-call-network-banner {
  position: absolute;
  top: max(80px, calc(env(safe-area-inset-top, 0px) + 74px));
  left: 50%;
  z-index: 9;
  min-height: 46px;
  max-width: min(620px, calc(100vw - 64px));
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  border: 1px solid rgba(237, 178, 81, 0.72);
  border-radius: 6px;
  color: #fff5de;
  background: rgba(88, 59, 24, 0.9);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.26);
  font-size: 17px;
  font-weight: 700;
}

.elder-call-network-banner svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.elder-call-controls {
  position: absolute;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  left: max(20px, env(safe-area-inset-left, 0px));
  z-index: 8;
  width: min(780px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(72px, 1fr));
  gap: clamp(8px, 1.4vw, 20px);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
}

.elder-call-active[data-controls-visible="false"] .elder-call-controls {
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
}

.elder-call-control-disc {
  width: 68px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(23, 26, 28, 0.86);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.elder-call-control-disc svg {
  width: 29px;
  height: 29px;
  stroke-width: 2.2;
}

.elder-call-controls button.is-off .elder-call-control-disc {
  color: #171a1c;
  background: #f1f3f2;
}

.elder-call-controls button:disabled {
  opacity: 0.42;
  cursor: default;
}

.elder-call-controls .elder-call-hangup .elder-call-control-disc {
  border-color: transparent;
  color: #ffffff;
  background: #f05b57;
}

.elder-call-control-label {
  min-height: 38px;
  display: grid;
  place-items: start center;
  color: #f3f4f4;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
}

.elder-call-more-menu {
  position: absolute;
  bottom: max(142px, calc(env(safe-area-inset-bottom, 0px) + 132px));
  left: calc(50% + 260px);
  z-index: 10;
  width: min(270px, calc(100vw - 32px));
  padding: 18px;
  display: grid;
  gap: 12px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: #f5f6f6;
  background: rgba(24, 27, 29, 0.96);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
}

.elder-call-more-menu strong {
  font-size: 19px;
}

.elder-call-more-menu button {
  min-height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: #ffffff;
  background: #34383a;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
}

.elder-call-more-menu p {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #bfc8c5;
  font-size: 14px;
  line-height: 1.45;
}

.elder-call-more-menu svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  body[data-view="call"] #callView.active {
    padding-right: 18px;
    padding-left: 18px;
  }

  .elder-call-incoming-topline {
    align-items: flex-start;
  }

  .elder-call-brand,
  .elder-call-secure,
  .elder-call-privacy {
    font-size: 14px;
  }

  .elder-call-incoming-content p {
    margin-top: 16px;
    font-size: 18px;
  }

  .elder-call-incoming-content h2 {
    font-size: 34px;
  }

  .elder-call-incoming-content small {
    margin-top: 8px;
    font-size: 15px;
  }

  .elder-call-incoming-actions {
    width: min(340px, 100%);
    gap: 56px;
  }

  .elder-call-action-disc {
    width: 72px;
  }

  .elder-call-topbar {
    top: max(14px, env(safe-area-inset-top, 0px));
    right: 14px;
    left: 14px;
  }

  .elder-call-topbar > span {
    min-height: 36px;
    padding: 0 10px;
  }

  .elder-call-self-wrap {
    top: max(66px, calc(env(safe-area-inset-top, 0px) + 58px));
    left: 14px;
    width: 150px;
  }

  .elder-call-network-banner {
    top: max(64px, calc(env(safe-area-inset-top, 0px) + 58px));
    max-width: calc(100vw - 188px);
    margin-left: 78px;
    font-size: 14px;
  }

  .elder-call-controls {
    right: 10px;
    bottom: max(14px, env(safe-area-inset-bottom, 0px));
    left: 10px;
    width: min(620px, calc(100% - 20px));
    grid-template-columns: repeat(6, minmax(48px, 1fr));
    gap: 5px;
  }

  .elder-call-control-disc {
    width: 54px;
  }

  .elder-call-control-disc svg {
    width: 24px;
    height: 24px;
  }

  .elder-call-control-label {
    min-height: 32px;
    font-size: 12px;
  }

  .elder-call-more-menu {
    right: 14px;
    bottom: 112px;
    left: auto;
    transform: none;
  }
}

@media (max-width: 520px) and (orientation: portrait) {
  .elder-call-incoming-topline .elder-call-secure,
  .elder-call-topbar .elder-call-brand {
    display: none;
  }

  .elder-call-incoming-content h2 {
    font-size: 32px;
  }

  .elder-call-incoming-actions {
    gap: 34px;
  }

  .elder-call-voice-fallback {
    padding: 150px 20px 250px;
  }

  .elder-call-voice-fallback h2 {
    font-size: 34px;
  }

  .elder-call-controls {
    width: min(320px, calc(100% - 28px));
    grid-template-columns: repeat(3, minmax(72px, 1fr));
    row-gap: 10px;
  }

  .elder-call-control-disc {
    width: 58px;
  }

  .elder-call-more-menu {
    bottom: 214px;
  }

  .elder-call-network-banner {
    top: 190px;
    right: 14px;
    left: 14px;
    max-width: none;
    margin-left: 0;
    transform: none;
  }
}

@media (max-height: 620px) and (orientation: landscape) {
  .elder-call-incoming-content p {
    margin-top: 10px;
  }

  .elder-call-incoming-content small {
    margin-top: 6px;
  }

  .elder-call-avatar {
    width: 100px;
    font-size: 42px;
  }

  .elder-call-incoming-actions {
    transform: translateY(-4px);
  }

  .elder-call-voice-fallback {
    padding-top: 70px;
    padding-bottom: 100px;
  }

  .elder-call-avatar-active {
    width: 78px;
    flex: 0 0 auto;
    font-size: 34px;
  }

  .elder-call-relation {
    display: none;
  }

  .elder-call-voice-fallback h2 {
    font-size: 30px;
  }

  .elder-call-live-status {
    margin-top: 6px;
    font-size: 15px;
  }

  .elder-call-voice-fallback time {
    margin-top: 4px;
    font-size: 16px;
  }

  .elder-call-controls {
    bottom: 10px;
  }

  .elder-call-control-disc {
    width: 54px;
  }

  .elder-call-control-label {
    min-height: 28px;
    font-size: 13px;
  }

  .elder-call-more-menu {
    bottom: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elder-call-voice-fallback,
  .elder-call-controls {
    transition: none;
  }
}

/* Elder family, cellular calling and owner-managed app center. */
body[data-view="home"] .primary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.tile.drama,
.tile.stage,
.tile.opera,
.tile.short-video,
.tile.family,
.tile.apps {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

body[data-view="home"] .tile.drama {
  background-image: url("./assets/images/home-entry-drama-b.png");
}

body[data-view="home"] .tile.stage {
  background-image: url("./assets/images/home-entry-video-b.png");
}

body[data-view="home"] .tile.opera {
  background-image: url("./assets/images/home-entry-opera-b.png");
}

body[data-view="home"] .tile.short-video {
  background-image: url("./assets/images/home-entry-short-video-b.png");
}

body[data-view="home"] .tile.family {
  --home-tile-accent: #356d83;
  background-image: url("./assets/images/home-entry-family-b.png");
}

body[data-view="home"] .tile.apps {
  --home-tile-accent: #6f5b91;
  background-image: url("./assets/images/home-entry-apps-b.png");
}

body[data-view="apps"],
body[data-view="appManagement"] {
  --apps-accent: #116c6d;
  --apps-accent-strong: #0b5152;
  --apps-accent-soft: #e8f3f2;
  --apps-canvas: #f3f5f5;
  --apps-surface: #ffffff;
  --apps-ink: #182122;
  --apps-muted: #687375;
  --apps-line: #d8dfe0;
  --apps-radius: 6px;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--apps-canvas);
}

body[data-view="apps"] .robot-body,
body[data-view="appManagement"] .robot-body {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  color: var(--apps-ink);
  background: var(--apps-surface);
}

body[data-view="apps"] .screen-header,
body[data-view="apps"] .voice-panel,
body[data-view="appManagement"] .screen-header,
body[data-view="appManagement"] .voice-panel {
  display: none;
}

body[data-view="apps"] #appsView.active,
body[data-view="appManagement"] #appManagementView.active {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  color: var(--apps-ink);
  background: var(--apps-surface);
  letter-spacing: 0;
  scrollbar-color: #aab7b9 transparent;
}

.apps-dashboard {
  width: 100%;
  height: auto;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: minmax(76px, 9.5dvh) max-content max-content;
  align-content: start;
  background: var(--apps-surface);
}

.apps-topbar {
  position: sticky;
  z-index: 5;
  top: 0;
  min-width: 0;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(28px, env(safe-area-inset-right, 0px))
    10px
    max(28px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--apps-line);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 18px;
  background: #fbfcfc;
}

.apps-topbar h1,
.apps-featured-stage h2,
.apps-library-heading h2,
.featured-app-item h3 {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  letter-spacing: 0;
}

.apps-topbar h1 {
  margin: 0;
  color: var(--apps-ink);
  font-size: 2.15rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.apps-home-button,
.apps-more-button {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--apps-radius);
  display: grid;
  place-items: center;
  color: var(--apps-accent-strong);
  background: transparent;
}

.apps-home-button:hover,
.apps-more-button:hover {
  background: var(--apps-accent-soft);
}

.apps-home-button svg,
.apps-more-button svg {
  width: 31px;
  height: 31px;
  stroke-width: 2.2;
}

.apps-featured-stage {
  min-width: 0;
  min-height: 0;
  padding: 20px 32px 24px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  overflow: visible;
  background: var(--apps-surface);
}

.apps-featured-stage[hidden] {
  display: none;
}

.apps-featured-stage h2,
.apps-library-heading h2 {
  margin: 0;
  color: var(--apps-ink);
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1.2;
}

.featured-app-list {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
}

.featured-app-item {
  min-width: 0;
  min-height: 0;
  padding: 18px;
  border: 1px solid var(--apps-line);
  border-radius: var(--apps-radius);
  display: grid;
  grid-template-rows: minmax(82px, 1fr) auto minmax(58px, auto);
  align-items: center;
  justify-items: center;
  gap: 10px;
  background: #fffaf4;
}

.featured-app-item:nth-child(2) {
  background: #f3f8fa;
}

.featured-app-item:nth-child(3) {
  background: #f8f4f7;
}

.featured-app-item:nth-child(4) {
  background: #f6f8f1;
}

.featured-app-item h3 {
  margin: 0;
  color: var(--apps-ink);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

.app-brand-mark {
  width: 94px;
  height: 94px;
  border-radius: var(--apps-radius);
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--app-accent, var(--apps-accent));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.app-brand-mark--native {
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.app-brand-icon {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: contain;
}

.app-brand-mark svg {
  width: 48%;
  height: 48%;
  stroke-width: 2.5;
}

.app-brand-mark--tencent-video svg {
  fill: #ffffff;
}

.app-brand-word {
  color: #ffffff;
  font-size: 2.55rem;
  font-weight: 900;
  line-height: 1;
}

.app-brand-word--wide {
  font-size: 1.38rem;
}

.app-install-state {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--apps-muted);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.app-install-state > span {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #8c9698;
  font-size: 0.86rem;
  font-weight: 900;
}

.app-install-state--installed {
  color: #23843b;
}

.app-install-state--installed > span {
  background: #2b9a42;
}

.app-install-state--pending {
  color: #9b6819;
}

.app-install-state--pending > span {
  background: #b7832e;
}

.app-install-state--unknown {
  color: #667577;
}

.app-install-state--error {
  color: #b43b34;
}

.app-install-state--error > span {
  background: #c64b43;
}

.featured-app-item > button,
.app-catalog-item > button {
  border: 1px solid var(--apps-accent);
  border-radius: var(--apps-radius);
  color: #ffffff;
  background: var(--apps-accent);
  font-weight: 900;
  letter-spacing: 0;
  touch-action: manipulation;
}

.featured-app-item > button {
  width: 100%;
  min-height: 58px;
  padding: 10px 16px;
  font-size: 1.45rem;
}

.featured-app-item[data-app-status="available"] > button,
.app-catalog-item[data-app-status="available"] > button,
.featured-app-item[data-app-status="not_installed"] > button,
.app-catalog-item[data-app-status="not_installed"] > button,
.featured-app-item[data-app-status="failed"] > button,
.app-catalog-item[data-app-status="failed"] > button {
  border-color: #c2cdcf;
  color: #3b4b4d;
  background: #f2f5f5;
}

.featured-app-item > button:disabled,
.app-catalog-item > button:disabled {
  border-color: #d3d9da;
  color: #778184;
  background: #eceff0;
  cursor: default;
}

.apps-library-stage {
  min-width: 0;
  min-height: 0;
  padding: 16px 32px max(20px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--apps-line);
  display: grid;
  grid-template-rows: auto auto;
  gap: 14px;
  overflow: visible;
  background: var(--apps-canvas);
}

.apps-library-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(520px, 58%);
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}

.app-filter-bar {
  min-width: 0;
  padding: 3px;
  border: 1px solid #cbd4d5;
  border-radius: var(--apps-radius);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  background: #e7ebec;
}

.app-filter-bar button {
  min-height: 45px;
  padding: 7px 9px;
  border: 0;
  border-radius: 4px;
  color: #556164;
  background: transparent;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: 0;
}

.app-filter-bar button.active {
  color: #ffffff;
  background: var(--apps-accent);
}

.app-catalog-list {
  min-width: 0;
  min-height: 0;
  padding-right: 4px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(106px, auto);
  align-content: start;
  gap: 12px;
  overflow: visible;
}

.app-catalog-list[data-empty="true"] {
  grid-template-columns: minmax(0, 1fr);
}

.apps-distribution-note {
  margin: 8px 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: #68777a;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.apps-store-text-link {
  min-height: 44px;
  padding: 6px 3px;
  border: 0;
  color: #2879ef;
  background: transparent;
  font: inherit;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 4px;
  touch-action: manipulation;
}

.apps-store-text-link:hover,
.apps-store-text-link:focus-visible {
  color: #1556ba;
}

.app-catalog-item {
  min-width: 0;
  min-height: 106px;
  padding: 12px;
  border: 1px solid var(--apps-line);
  border-radius: var(--apps-radius);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  background: var(--apps-surface);
  letter-spacing: 0;
}

.app-catalog-item .app-brand-mark {
  width: 64px;
  height: 64px;
}

.app-catalog-item .app-brand-word {
  font-size: 1.75rem;
}

.app-catalog-item .app-brand-word--wide {
  font-size: 0.9rem;
}

.app-catalog-copy {
  min-width: 0;
}

.app-catalog-copy strong {
  display: block;
  color: var(--apps-ink);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.app-catalog-copy > small {
  display: block;
  margin-top: 7px;
  color: var(--apps-muted);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
}

.app-catalog-copy .app-install-state {
  margin-top: 7px;
  font-size: 0.86rem;
}

.app-catalog-copy .app-install-state > span {
  width: 19px;
  height: 19px;
  font-size: 0.74rem;
}

.app-catalog-item > button {
  min-width: 86px;
  min-height: 48px;
  padding: 8px 11px;
  font-size: 0.88rem;
}

.apps-empty-state {
  min-height: 104px;
  margin: 0;
  display: grid;
  place-items: center;
  color: var(--apps-muted);
  background: var(--apps-surface);
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
}

.apps-topbar-spacer {
  width: 56px;
  height: 56px;
}

.app-management-shell {
  width: 100%;
  min-height: 100dvh;
  background: var(--apps-canvas);
}

.app-management-content {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 28px 32px max(32px, env(safe-area-inset-bottom, 0px));
}

.app-management-heading {
  margin-bottom: 20px;
}

.app-management-heading h2 {
  margin: 0;
  color: var(--apps-ink);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.2;
}

.app-management-heading p {
  margin: 8px 0 0;
  color: var(--apps-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.app-management-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.app-management-list[data-empty="true"] {
  grid-template-columns: minmax(0, 1fr);
}

.app-management-item {
  min-width: 0;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--apps-line);
  border-radius: var(--apps-radius);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: var(--apps-surface);
}

.app-management-item .app-brand-mark {
  width: 64px;
  height: 64px;
}

.app-management-item .app-brand-word {
  font-size: 1.7rem;
}

.app-management-item .app-brand-word--wide {
  font-size: 0.86rem;
}

.app-management-copy {
  min-width: 0;
}

.app-management-copy strong,
.app-management-copy small {
  display: block;
}

.app-management-copy strong {
  color: var(--apps-ink);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.app-management-copy small {
  margin-top: 7px;
  color: var(--apps-muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.app-management-item > button {
  min-width: 88px;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid #d84d47;
  border-radius: var(--apps-radius);
  color: #b52e29;
  background: #fff7f6;
  font-size: 0.95rem;
  font-weight: 850;
  letter-spacing: 0;
}

.app-management-item > button:disabled {
  border-color: #d6dcdd;
  color: #788285;
  background: #edf0f1;
}

.app-management-empty {
  min-height: 150px;
  margin: 0;
  border: 1px solid var(--apps-line);
  border-radius: var(--apps-radius);
  display: grid;
  place-items: center;
  color: var(--apps-muted);
  background: var(--apps-surface);
  font-size: 1.08rem;
  font-weight: 750;
  text-align: center;
}

.apps-home-button,
.apps-more-button,
.app-filter-bar button,
.featured-app-item > button,
.app-catalog-item > button,
.app-management-item > button {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(17, 108, 109, 0.16);
}

.apps-home-button:focus-visible,
.apps-more-button:focus-visible,
.app-filter-bar button:focus-visible,
.featured-app-item > button:focus-visible,
.app-catalog-item > button:focus-visible,
.app-management-item > button:focus-visible {
  outline: 3px solid var(--apps-accent);
  outline-offset: 3px;
}

.account-call-fallback {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: clamp(150px, 20vh, 220px);
  width: min(520px, calc(100% - 48px));
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px;
  color: #ffffff;
  background: rgba(19, 22, 27, 0.94);
  transform: translateX(-50%);
  text-align: center;
}

.account-call-fallback[hidden] {
  display: none;
}

.account-call-fallback strong {
  font-size: clamp(19px, 1.7vw, 25px);
}

.account-call-fallback p {
  margin: 8px 0 16px;
  color: #c8ced3;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.45;
}

.account-call-fallback > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.account-call-fallback button {
  min-height: 48px;
  border: 1px solid #4e585e;
  border-radius: 6px;
  color: #ffffff;
  background: #30363b;
  font-weight: 800;
}

.account-call-fallback button:first-child {
  border-color: #5bb6b3;
  background: #087b7b;
}

body[data-view="cellular"] {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #101820;
}

body[data-view="cellular"] .workspace,
body[data-view="cellular"] .device-area,
body[data-view="cellular"] .robot-body {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: block;
  overflow: hidden;
  background: #101820;
  box-shadow: none;
}

body[data-view="cellular"] .screen-header,
body[data-view="cellular"] .voice-panel,
body[data-view="cellular"] .robot-head {
  display: none !important;
}

body[data-view="cellular"] #cellularCallView.active {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  padding: clamp(24px, 3vw, 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: #ffffff;
  background: #101820;
  overflow: hidden;
  letter-spacing: 0;
}

.cellular-back {
  z-index: 2;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid #43515b;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #1d2931;
}

.cellular-back svg {
  width: 24px;
  height: 24px;
}

.cellular-call-copy {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cellular-network {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid #3d5b62;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #b8d7d6;
  background: #16272d;
  font-size: 15px;
}

.cellular-network svg {
  width: 18px;
  height: 18px;
}

.cellular-avatar {
  width: clamp(110px, 11vw, 156px);
  height: clamp(110px, 11vw, 156px);
  margin-top: clamp(18px, 3vh, 32px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #087b7b;
  font-size: clamp(42px, 4vw, 60px);
  font-weight: 800;
}

.cellular-call-copy p {
  margin: 18px 0 4px;
  color: #9fafb8;
  font-size: clamp(16px, 1.35vw, 20px);
}

.cellular-call-copy h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1.2;
  letter-spacing: 0;
}

.cellular-call-copy > span:not(.cellular-network) {
  margin-top: 7px;
  color: #9fafb8;
  font-size: clamp(15px, 1.25vw, 19px);
}

.cellular-call-copy > strong {
  margin-top: 18px;
  color: #72d5cf;
  font-size: clamp(18px, 1.55vw, 24px);
}

.cellular-call-copy time {
  min-height: 1.4em;
  margin-top: 6px;
  color: #c5ced3;
  font-size: clamp(17px, 1.35vw, 21px);
  font-variant-numeric: tabular-nums;
}

.cellular-call-controls {
  width: min(600px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.cellular-call-controls button {
  min-width: 0;
  padding: 0;
  border: 0;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: #e9eef1;
  background: transparent;
}

.cellular-call-controls button > span {
  width: clamp(58px, 5.7vw, 76px);
  height: clamp(58px, 5.7vw, 76px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #27343d;
}

.cellular-call-controls button.is-active > span {
  color: #102025;
  background: #ccecea;
}

.cellular-call-controls .cellular-hangup > span {
  background: #e34545;
}

.cellular-call-controls svg {
  width: 27px;
  height: 27px;
}

.cellular-call-controls small {
  min-height: 2.7em;
  color: inherit;
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.3;
  text-align: center;
}

.cellular-keypad {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 150px;
  width: min(330px, calc(100% - 40px));
  padding: 16px;
  border: 1px solid #40515b;
  border-radius: 7px;
  color: #ffffff;
  background: #17232b;
  transform: translateX(-50%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
}

.cellular-keypad[hidden] {
  display: none;
}

.cellular-keypad output {
  min-height: 34px;
  margin-bottom: 10px;
  display: block;
  color: #d8e3e7;
  font-size: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.cellular-keypad > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cellular-keypad button {
  min-height: 46px;
  border: 1px solid #465760;
  border-radius: 6px;
  color: #ffffff;
  background: #26343c;
  font-size: 19px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .app-catalog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .apps-library-heading {
    grid-template-columns: auto minmax(500px, 66%);
  }

  .featured-app-item {
    padding: 14px;
  }

  .featured-app-item h3 {
    font-size: 1.45rem;
  }

  .app-brand-mark {
    width: 78px;
    height: 78px;
  }
}

@media (max-width: 900px) {
  body[data-view="home"] .primary-grid {
    grid-template-rows: repeat(3, minmax(260px, 1fr));
  }

  body[data-view="apps"] #appsView.active,
  body[data-view="appManagement"] #appManagementView.active {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body[data-view="apps"],
  body[data-view="appManagement"] {
    overflow-y: auto;
  }

  body[data-view="apps"] .robot-body,
  body[data-view="appManagement"] .robot-body {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .apps-dashboard {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: 76px max-content max-content;
  }

  .apps-topbar {
    position: sticky;
    z-index: 5;
    top: 0;
    padding: 10px 18px;
  }

  .apps-featured-stage,
  .apps-library-stage {
    overflow: visible;
  }

  .featured-app-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(270px, auto));
  }

  .apps-library-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .app-catalog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .app-management-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .apps-topbar {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .apps-topbar h1 {
    font-size: 1.7rem;
  }

  .apps-featured-stage,
  .apps-library-stage {
    padding-right: 18px;
    padding-left: 18px;
  }

  .app-filter-bar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .app-filter-bar button {
    padding-right: 4px;
    padding-left: 4px;
    font-size: 0.88rem;
  }

  .app-catalog-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-management-content {
    padding-right: 18px;
    padding-left: 18px;
  }

  .app-management-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-call-fallback {
    bottom: 132px;
  }

  .cellular-call-controls {
    gap: 6px;
  }
}

@media (max-width: 560px) {
  body[data-view="home"] .primary-grid {
    grid-template-rows: repeat(6, minmax(220px, 1fr));
  }

  .apps-dashboard {
    grid-template-rows: 68px max-content max-content;
  }

  .apps-topbar {
    grid-template-columns: 44px minmax(0, 1fr) 42px;
    padding: 8px 12px;
  }

  .apps-home-button,
  .apps-more-button,
  .apps-topbar-spacer {
    width: 42px;
    height: 42px;
  }

  .apps-home-button svg,
  .apps-more-button svg {
    width: 25px;
    height: 25px;
  }

  .apps-topbar h1 {
    font-size: 1.45rem;
  }

  .apps-featured-stage,
  .apps-library-stage {
    padding-right: 12px;
    padding-left: 12px;
  }

  .featured-app-list {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(250px, auto));
  }

  .app-filter-bar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .app-catalog-item {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .app-catalog-item .app-brand-mark {
    width: 56px;
    height: 56px;
  }

  .app-catalog-item > button {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 46px;
  }

  .app-management-content {
    padding: 20px 12px 28px;
  }

  .app-management-item {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    padding: 12px;
  }

  .app-management-item .app-brand-mark {
    width: 56px;
    height: 56px;
  }

  .account-call-fallback > div {
    grid-template-columns: 1fr;
  }
}

/* Family center B2: one glance across the whole family. */
body[data-view="family"] {
  --family-accent: #176f72;
  --family-accent-strong: #0f575a;
  --family-accent-soft: #e7f2f1;
  --family-canvas: #eef2f2;
  --family-surface: #ffffff;
  --family-surface-subtle: #f6f8f8;
  --family-ink: #1c2425;
  --family-muted: #697476;
  --family-line: #d9e0e1;
  --family-radius: 6px;
  --family-radius-inner: 4px;
  background: var(--family-canvas);
}

body[data-view="family"] .robot-body {
  min-height: 100dvh;
  display: block;
  background: var(--family-surface);
}

body[data-view="family"] .screen-header,
body[data-view="family"] .voice-panel {
  display: none;
}

body[data-view="family"] #familyView.active {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  color: var(--family-ink);
  background: var(--family-surface);
}

.family-dashboard {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(76px, 9.5dvh) minmax(0, 1fr) minmax(220px, 29dvh);
  background: var(--family-surface);
}

.family-topbar {
  min-width: 0;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    max(26px, env(safe-area-inset-right, 0px))
    10px
    max(26px, env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--family-line);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  background: #fbfcfc;
}

.family-topbar h1 {
  margin: 0;
  color: var(--family-ink);
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
}

.family-home-button {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--family-radius);
  display: grid;
  place-items: center;
  color: var(--family-ink);
  background: transparent;
  box-shadow: none;
}

.family-home-button svg {
  width: 30px;
  height: 30px;
  stroke-width: 2;
}

.family-home-button:hover {
  border-color: transparent;
  background: #edf1f1;
}

.family-home-button:focus-visible,
.family-member-item > button:focus-visible,
.family-quick-actions button:focus-visible,
.relative-contact-item:focus-visible {
  outline: 3px solid var(--family-accent);
  outline-offset: 3px;
}

.family-topbar .sim-status {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #bdd3cf;
  border-radius: var(--family-radius);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--family-accent-strong);
  background: #edf6f4;
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
}

.family-topbar .sim-status svg {
  width: 20px;
  height: 20px;
}

.family-members-stage {
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  background: var(--family-surface);
}

.family-member-list {
  width: 100%;
  min-width: max(100%, calc(var(--family-member-count, 1) * 280px));
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--family-member-count, 1), minmax(280px, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.family-member-list[data-empty="true"] {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(180px, 1fr);
}

.family-empty-state {
  min-height: 120px;
  margin: 0;
  padding: 28px;
  display: grid;
  place-items: center;
  color: var(--family-muted);
  background: var(--family-surface-subtle);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.family-member-item,
.family-member-item--owner {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 24px 24px 18px;
  border: 0;
  border-right: 1px solid var(--family-line);
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) minmax(82px, 10.5dvh);
  align-items: stretch;
  gap: 14px;
  color: var(--family-ink);
  background: #f1f6f8;
  box-shadow: none;
  overflow: hidden;
}

.family-member-item:nth-child(2) {
  background: #fbf7ef;
}

.family-member-item:nth-child(3) {
  background: #f8f2f4;
}

.family-member-item:last-child {
  border-right: 0;
}

.family-member-item .contact-copy {
  min-width: 0;
  position: relative;
  z-index: 1;
}

.family-member-item .contact-copy > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.family-member-item .contact-copy h2 {
  margin: 0;
  color: var(--family-ink);
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.family-member-item .contact-copy span {
  color: var(--family-muted);
  font-size: 1.2rem;
  font-weight: 700;
}

.family-member-item .contact-copy em {
  min-height: 30px;
  padding: 4px 8px;
  border-radius: var(--family-radius-inner);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #815a16;
  background: #fff0ce;
  font-size: 0.95rem;
  font-style: normal;
  font-weight: 800;
}

.family-member-item .contact-copy em svg {
  width: 17px;
  height: 17px;
}

.member-status {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.member-status > i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}

.member-status svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.member-status--available {
  color: #247a43;
}

.member-status--unavailable {
  color: #687174;
}

.contact-avatar--member {
  width: min(72%, 330px);
  align-self: end;
  justify-self: center;
  aspect-ratio: 1;
  border: 4px solid rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #235a68;
  background: #dbeef2;
  outline: 1px solid rgba(29, 49, 52, 0.1);
  box-shadow: 0 12px 28px rgba(31, 57, 61, 0.13);
  font-size: 4.5rem;
  font-weight: 900;
}

.family-member-item:nth-child(2) .contact-avatar--member {
  color: #80551c;
  background: #f6e8cf;
}

.family-member-item:nth-child(3) .contact-avatar--member {
  color: #874a60;
  background: #f1dfe6;
}

.family-member-item > button {
  width: 100%;
  height: 100%;
  min-height: 82px;
  padding: 12px 18px;
  border: 1px solid #276fa4;
  border-radius: var(--family-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #ffffff;
  background: #2c78af;
  box-shadow: none;
  font-size: 1.45rem;
  font-weight: 900;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.family-member-item:nth-child(2) > button {
  border-color: #a96314;
  background: #b8751d;
}

.family-member-item:nth-child(3) > button {
  border-color: #a64f69;
  background: #b65d76;
}

.family-member-item > button svg {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  stroke-width: 2;
}

.family-member-item > button:not(:disabled):hover {
  border-color: #165982;
  background: #216b9f;
  box-shadow: none;
}

.family-member-item:nth-child(2) > button:not(:disabled):hover {
  border-color: #8c4e09;
  background: #9e5d10;
}

.family-member-item:nth-child(3) > button:not(:disabled):hover {
  border-color: #863b51;
  background: #9a455e;
}

.family-member-item > button:not(:disabled):active,
.family-home-button:active {
  transform: scale(0.97);
}

.family-member-item > button[data-call-mode="phone"] {
  color: #ffffff;
  background: #b8751d;
  box-shadow: none;
}

.family-member-item > button[data-call-mode="unavailable"] {
  border-color: #cfd7d7;
  color: #687174;
  background: #e8eded;
  box-shadow: none;
  cursor: not-allowed;
}

.family-footer-band {
  min-width: 0;
  min-height: 0;
  border-top: 1px solid var(--family-line);
  display: grid;
  grid-template-columns: minmax(420px, 43%) minmax(0, 57%);
  background: var(--family-canvas);
}

body[data-cellular-capable="false"] .family-footer-band {
  grid-template-columns: minmax(0, 1fr);
}

.family-quick-actions {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding:
    20px 24px
    max(20px, env(safe-area-inset-bottom, 0px))
    max(24px, env(safe-area-inset-left, 0px));
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  overflow: visible;
  background: transparent;
}

.family-quick-actions::before {
  content: none;
}

.family-quick-actions button {
  position: relative;
  z-index: 0;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 18px 10px;
  border: 1px solid var(--family-line);
  border-radius: var(--family-radius);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(52px, 1fr) auto auto;
  place-items: center;
  gap: 10px;
  color: var(--family-ink);
  background: #ffffff;
  text-align: center;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.family-quick-actions button:last-child {
  border-bottom: 1px solid var(--family-line);
}

.family-action-icon {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: var(--family-radius);
  display: grid;
  place-items: center;
  color: #276fa4;
  background: #e6f0f7;
}

.family-action-icon--message {
  color: #8c5c12;
  background: #f8edd9;
}

.family-action-icon--reminder {
  color: #a14b65;
  background: #f5e6eb;
}

.family-action-icon svg {
  width: 32px;
  height: 32px;
}

.family-quick-actions strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.family-quick-actions small {
  display: block;
  max-width: 100%;
  color: var(--family-muted);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.family-quick-actions button:hover,
.relative-contact-item:hover {
  border-color: #b8c9c7;
  background: #f8fbfa;
}

.family-quick-actions button:active,
.relative-contact-item:active {
  transform: scale(0.98);
}

.family-relatives-pane {
  min-width: 0;
  min-height: 0;
  padding:
    18px max(24px, env(safe-area-inset-right, 0px))
    max(18px, env(safe-area-inset-bottom, 0px)) 24px;
  border-left: 1px solid var(--family-line);
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr);
  background: #f8fafa;
}

.relatives-pane-header {
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.relatives-pane-header h2 {
  margin: 0;
  color: var(--family-ink);
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
}

.relatives-pane-header small {
  color: var(--family-muted);
  font-size: 0.95rem;
  font-weight: 700;
}

.relative-contact-list {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--family-line);
  border-radius: var(--family-radius);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  background: #ffffff;
  list-style: none;
}

.relative-contact-list > li {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-right: 1px solid var(--family-line);
}

.relative-contact-list > li:last-child {
  border-right: 0;
}

.relative-contact-item {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  border: 0;
  border-bottom: 0;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  color: var(--family-ink);
  background: transparent;
  text-align: left;
  transition: background-color 160ms ease, transform 160ms ease;
}

.relative-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #7f6f89;
  font-size: 1.35rem;
  font-weight: 900;
}

.relative-contact-list > li:nth-child(2) .relative-avatar {
  background: #738660;
}

.relative-contact-list > li:nth-child(3) .relative-avatar {
  background: #456f83;
}

.relative-contact-item .contact-copy {
  min-width: 0;
  display: block;
}

.relative-contact-item .contact-copy strong,
.relative-contact-item .contact-copy small {
  display: block;
  overflow-wrap: anywhere;
}

.relative-contact-item .contact-copy strong {
  color: var(--family-ink);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.2;
}

.relative-contact-item .contact-copy small {
  margin-top: 4px;
  color: var(--family-muted);
  font-size: 0.95rem;
  line-height: 1.25;
}

.relative-phone-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: var(--family-accent);
}

.relative-phone-icon svg {
  width: 22px;
  height: 22px;
}

.relative-chevron {
  display: none;
}

.family-home-button,
.family-member-item > button,
.family-quick-actions button,
.relative-contact-item {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(23, 111, 114, 0.16);
}

@media (max-width: 1180px) {
  .family-dashboard {
    grid-template-rows: 78px minmax(0, 1fr) 230px;
  }

  .family-member-item,
  .family-member-item--owner {
    padding: 18px 18px 14px;
    grid-template-rows: auto minmax(0, 1fr) 76px;
  }

  .family-member-item .contact-copy h2 {
    font-size: 1.7rem;
  }

  .family-member-item .contact-copy span {
    font-size: 1.05rem;
  }

  .contact-avatar--member {
    width: min(70%, 245px);
    font-size: 3.4rem;
  }

  .family-member-item > button {
    min-height: 76px;
    font-size: 1.25rem;
  }

  .family-footer-band {
    grid-template-columns: minmax(360px, 42%) minmax(0, 58%);
  }

  .relative-contact-item {
    grid-template-columns: 48px minmax(0, 1fr) 38px;
    gap: 8px;
  }

  .relative-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.1rem;
  }

  .relative-phone-icon {
    width: 38px;
    height: 38px;
  }
}

/* Device mode is controlled by the family app. Elder mode keeps the large,
   low-density layout; standard mode fits more information for confident users. */
body.device-standard-mode[data-view="home"] .tile {
  padding-left: clamp(76px, 7vw, 106px);
}

body.device-standard-mode[data-view="home"] .tile::before,
body.device-standard-mode[data-view="home"] .tile span {
  width: clamp(68px, 6.4vw, 96px);
}

body.device-standard-mode[data-view="home"] .tile span {
  font-size: clamp(30px, 3.45vw, 52px);
}

body.device-standard-mode[data-view="home"] .tile small {
  margin-bottom: 18px;
  padding: 6px 9px;
  font-size: clamp(13px, 1.05vw, 16px);
}

body.device-standard-mode[data-view="apps"] .apps-topbar h1,
body.device-standard-mode[data-view="family"] .family-topbar h1 {
  font-size: 1.8rem;
}

body.device-standard-mode[data-view="apps"] .featured-app-item h3,
body.device-standard-mode[data-view="family"] .family-member-item .contact-copy h2 {
  font-size: 1.45rem;
}

body.device-standard-mode[data-view="apps"] .featured-app-item > button,
body.device-standard-mode[data-view="family"] .family-member-item > button {
  min-height: 52px;
  font-size: 1.08rem;
}

body.device-standard-mode[data-view="family"] .family-member-item,
body.device-standard-mode[data-view="family"] .family-member-item--owner {
  padding: 16px;
  grid-template-rows: auto minmax(0, 1fr) minmax(64px, 8dvh);
}

body.device-standard-mode[data-view="family"] .family-quick-actions small,
body.device-standard-mode[data-view="apps"] .app-install-state {
  font-size: 0.82rem;
}

@media (max-width: 860px) {
  body[data-view="family"] #familyView.active {
    height: auto;
    overflow: visible;
  }

  .family-dashboard {
    height: auto;
    min-height: 100dvh;
    grid-template-rows: 76px auto auto;
  }

  .family-topbar {
    position: sticky;
    z-index: 5;
    top: 0;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    padding: 10px 18px;
  }

  .family-home-button {
    width: 48px;
    height: 48px;
  }

  .family-topbar h1 {
    font-size: 1.7rem;
  }

  .family-members-stage {
    overflow: visible;
  }

  .family-member-list {
    min-width: 0;
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .family-member-item,
  .family-member-item--owner {
    min-height: 210px;
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid var(--family-line);
    grid-template-columns: 132px minmax(0, 1fr) 118px;
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: 18px;
  }

  .family-member-item .contact-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .contact-avatar--member {
    width: 132px;
    align-self: center;
    grid-column: 1;
    grid-row: 1;
    font-size: 3rem;
  }

  .family-member-item > button {
    min-height: 96px;
    grid-column: 3;
    grid-row: 1;
    flex-direction: column;
    gap: 7px;
    font-size: 1.1rem;
  }

  .family-member-item > button svg {
    width: 30px;
    height: 30px;
  }

  .family-footer-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .family-quick-actions {
    min-height: 178px;
    padding: 18px;
  }

  .family-relatives-pane {
    min-height: 218px;
    padding: 18px;
    border-top: 1px solid var(--family-line);
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .family-dashboard {
    grid-template-rows: 68px auto auto;
  }

  .family-topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 8px 12px;
  }

  .family-home-button {
    width: 42px;
    height: 42px;
  }

  .family-home-button svg {
    width: 25px;
    height: 25px;
  }

  .family-topbar h1 {
    font-size: 1.45rem;
  }

  .family-topbar .sim-status {
    width: 38px;
    min-width: 38px;
    min-height: 36px;
    padding: 0;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    font-size: 0;
  }

  .family-topbar .sim-status svg {
    width: 17px;
    height: 17px;
  }

  .family-member-item,
  .family-member-item--owner {
    min-height: 174px;
    padding: 14px 12px;
    grid-template-columns: 82px minmax(0, 1fr) 86px;
    gap: 10px;
  }

  .contact-avatar--member {
    width: 82px;
    border-width: 3px;
    font-size: 2.2rem;
  }

  .family-member-item .contact-copy h2 {
    font-size: 1.35rem;
  }

  .family-member-item .contact-copy span,
  .member-status {
    font-size: 0.92rem;
  }

  .family-member-item .contact-copy em {
    min-height: 25px;
    padding: 3px 6px;
    font-size: 0.78rem;
  }

  .family-member-item > button {
    min-height: 82px;
    padding: 8px 5px;
    font-size: 0.95rem;
  }

  .family-member-item > button svg {
    width: 25px;
    height: 25px;
  }

  .family-quick-actions {
    min-height: 146px;
    padding: 14px 12px;
    gap: 8px;
  }

  .family-quick-actions button {
    padding: 12px 6px;
    grid-template-rows: 46px auto auto;
  }

  .family-action-icon {
    width: 46px;
    height: 46px;
  }

  .family-action-icon svg {
    width: 25px;
    height: 25px;
  }

  .family-quick-actions strong {
    font-size: 0.95rem;
  }

  .family-relatives-pane {
    min-height: 0;
    padding: 16px 12px max(16px, env(safe-area-inset-bottom, 0px));
    grid-template-rows: 38px auto;
  }

  .relative-contact-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .relative-contact-list > li {
    border-right: 0;
    border-bottom: 1px solid var(--family-line);
  }

  .relative-contact-list > li:last-child {
    border-bottom: 0;
  }

  .relative-contact-item {
    min-height: 82px;
    grid-template-columns: 48px minmax(0, 1fr) 38px;
    padding: 10px 12px;
  }
}

/* Family center: familiar address-book layout for the elder device. */
body[data-view="family"] {
  --family-accent: #176b5f;
  --family-accent-strong: #10544b;
  --family-accent-soft: #e7f2ee;
  --family-canvas: #f2f6f3;
  --family-surface: #ffffff;
  --family-surface-subtle: #f7f9f8;
  --family-ink: #18211f;
  --family-muted: #66716d;
  --family-line: #d9e2dd;
  --family-radius: 8px;
  --family-radius-inner: 6px;
}

body[data-view="family"] #familyView.active {
  background: var(--family-canvas);
}

.family-dashboard {
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, 0.8fr);
  grid-template-rows: 88px minmax(0, 1fr);
  background: var(--family-canvas);
}

.family-topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  padding: 12px 28px;
  border-bottom: 1px solid var(--family-line);
  background: #ffffff;
}

.family-topbar h1 {
  font-size: 1.9rem;
  font-weight: 800;
}

.family-home-button {
  width: 56px;
  height: 56px;
  border: 1px solid var(--family-line);
  border-radius: 50%;
  background: #ffffff;
}

.family-home-button:hover {
  border-color: #c7d3cd;
  background: #f4f7f5;
}

.family-members-stage {
  grid-column: 1;
  grid-row: 2;
  padding: 26px 28px 28px;
  border-right: 1px solid var(--family-line);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  overflow: hidden;
  background: var(--family-canvas);
}

.family-section-heading,
.family-content-heading {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.family-section-heading h2,
.family-content-heading h2 {
  margin: 0;
  color: var(--family-ink);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

.family-section-heading > span {
  min-width: 58px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--family-muted);
  background: #e5ebe7;
  font-size: 0.98rem;
  font-weight: 750;
  text-align: center;
}

.family-member-list,
.family-member-list[data-empty="true"] {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 1px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
}

.family-member-item,
.family-member-item--owner,
.family-member-item:nth-child(2),
.family-member-item:nth-child(3) {
  min-height: 132px;
  padding: 18px 20px;
  border: 1px solid var(--family-line);
  border-radius: var(--family-radius);
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 142px;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  color: var(--family-ink);
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(30, 55, 45, 0.06);
  overflow: visible;
}

.family-member-item .contact-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.family-member-item .contact-copy h2 {
  font-size: 1.7rem;
  font-weight: 850;
}

.family-member-item .contact-copy span {
  font-size: 1.08rem;
}

.family-member-item .contact-copy em {
  color: #705315;
  background: #fff0c8;
}

.member-status {
  margin-top: 9px;
  font-size: 1rem;
}

.contact-avatar--member,
.family-member-item:nth-child(2) .contact-avatar--member,
.family-member-item:nth-child(3) .contact-avatar--member {
  width: 94px;
  align-self: center;
  justify-self: center;
  grid-column: 1;
  grid-row: 1;
  border: 0;
  color: #1e655b;
  background: #dceee8;
  outline: 0;
  box-shadow: none;
  font-size: 2.25rem;
}

.family-member-item:nth-child(2) .contact-avatar--member {
  color: #815d20;
  background: #f4e8cf;
}

.family-member-item:nth-child(3) .contact-avatar--member {
  color: #7b4f64;
  background: #f0e1e7;
}

.family-member-item > button,
.family-member-item:nth-child(2) > button,
.family-member-item:nth-child(3) > button,
.family-member-item > button[data-call-mode="phone"] {
  width: 142px;
  height: 72px;
  min-height: 72px;
  padding: 10px 12px;
  grid-column: 3;
  grid-row: 1;
  border-color: var(--family-accent-strong);
  border-radius: var(--family-radius);
  gap: 10px;
  color: #ffffff;
  background: var(--family-accent);
  font-size: 1.12rem;
}

.family-member-item > button svg {
  width: 28px;
  height: 28px;
}

.family-member-item > button:not(:disabled):hover,
.family-member-item:nth-child(2) > button:not(:disabled):hover,
.family-member-item:nth-child(3) > button:not(:disabled):hover {
  border-color: #0c4941;
  background: var(--family-accent-strong);
}

.family-member-item > button[data-call-mode="unavailable"] {
  border-color: #d5dcda;
  color: #68716f;
  background: #edf1ef;
}

.family-empty-state {
  min-height: 150px;
  border: 1px dashed #c8d4ce;
  border-radius: var(--family-radius);
  background: #ffffff;
}

.family-footer-band,
body[data-cellular-capable="false"] .family-footer-band {
  min-width: 0;
  min-height: 0;
  padding: 26px 28px 28px;
  grid-column: 2;
  grid-row: 2;
  border-top: 0;
  border-left: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  background: #ffffff;
}

.family-quick-actions {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--family-line);
  border-radius: var(--family-radius);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  background: #ffffff;
}

.family-quick-actions button {
  min-height: 100px;
  padding: 15px 16px;
  border: 0;
  border-bottom: 1px solid var(--family-line);
  border-radius: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 24px;
  grid-template-rows: auto auto;
  place-items: initial;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
  text-align: left;
}

.family-quick-actions button:last-child {
  border-bottom: 0;
}

.family-action-icon {
  width: 54px;
  height: 54px;
  grid-column: 1;
  grid-row: 1 / 3;
  border-radius: 50%;
}

.family-action-icon svg {
  width: 27px;
  height: 27px;
}

.family-quick-actions strong {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 1.18rem;
}

.family-quick-actions small {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 0.92rem;
}

.family-action-chevron {
  width: 22px;
  height: 22px;
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  color: #8b9692;
  stroke-width: 2;
}

.family-relatives-pane {
  flex: 0 0 auto;
  min-height: 210px;
  padding: 18px 0 0;
  border-top: 1px solid var(--family-line);
  border-left: 0;
  grid-template-rows: 42px auto;
  background: transparent;
}

@media (max-width: 860px) {
  body[data-view="family"] #familyView.active {
    height: auto;
    overflow: visible;
  }

  .family-dashboard {
    height: auto;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 76px auto auto;
  }

  .family-topbar {
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    padding: 10px 18px;
  }

  .family-members-stage {
    grid-column: 1;
    grid-row: 2;
    padding: 20px 18px 22px;
    border-right: 0;
    overflow: visible;
  }

  .family-member-list,
  .family-member-list[data-empty="true"] {
    overflow: visible;
  }

  .family-member-item,
  .family-member-item--owner,
  .family-member-item:nth-child(2),
  .family-member-item:nth-child(3) {
    min-height: 124px;
    padding: 16px;
    border-right: 1px solid var(--family-line);
    border-bottom: 1px solid var(--family-line);
    grid-template-columns: 84px minmax(0, 1fr) 124px;
    gap: 16px;
  }

  .contact-avatar--member,
  .family-member-item:nth-child(2) .contact-avatar--member,
  .family-member-item:nth-child(3) .contact-avatar--member {
    width: 84px;
  }

  .family-member-item > button,
  .family-member-item:nth-child(2) > button,
  .family-member-item:nth-child(3) > button,
  .family-member-item > button[data-call-mode="phone"] {
    width: 124px;
    min-height: 70px;
    grid-column: 3;
    grid-row: 1;
    flex-direction: row;
  }

  .family-footer-band,
  body[data-cellular-capable="false"] .family-footer-band {
    grid-column: 1;
    grid-row: 3;
    padding: 22px 18px max(24px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--family-line);
  }

  .family-quick-actions {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .family-dashboard {
    grid-template-rows: 68px auto auto;
  }

  .family-topbar {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    padding: 8px 12px;
  }

  .family-topbar h1 {
    font-size: 1.45rem;
  }

  .family-home-button {
    width: 42px;
    height: 42px;
  }

  .family-members-stage {
    padding: 16px 12px 18px;
  }

  .family-member-item,
  .family-member-item--owner,
  .family-member-item:nth-child(2),
  .family-member-item:nth-child(3) {
    min-height: 108px;
    padding: 12px;
    grid-template-columns: 64px minmax(0, 1fr) 88px;
    gap: 10px;
  }

  .contact-avatar--member,
  .family-member-item:nth-child(2) .contact-avatar--member,
  .family-member-item:nth-child(3) .contact-avatar--member {
    width: 64px;
    font-size: 1.65rem;
  }

  .family-member-item .contact-copy h2 {
    font-size: 1.25rem;
  }

  .family-member-item .contact-copy span,
  .member-status {
    font-size: 0.86rem;
  }

  .family-member-item .contact-copy em {
    display: none;
  }

  .family-member-item > button,
  .family-member-item:nth-child(2) > button,
  .family-member-item:nth-child(3) > button,
  .family-member-item > button[data-call-mode="phone"] {
    width: 88px;
    min-height: 66px;
    padding: 7px;
    flex-direction: column;
    gap: 4px;
    font-size: 0.86rem;
  }

  .family-member-item > button svg {
    width: 23px;
    height: 23px;
  }

  .family-footer-band,
  body[data-cellular-capable="false"] .family-footer-band {
    padding: 18px 12px max(20px, env(safe-area-inset-bottom, 0px));
  }
}

/* Family center B: a warm family-photo telephone, not a dashboard. */
body[data-view="family"] {
  --family-photo-accent: #2a8757;
  --family-photo-accent-strong: #1f6f48;
  --family-photo-canvas: #f3f0e9;
  --family-photo-panel: #fbfaf6;
  --family-photo-ink: #20231f;
  --family-photo-muted: #70766f;
  --family-photo-line: #ddd9cf;
}

body.device-night-mode[data-view="family"] .robot-body {
  filter: brightness(0.96) saturate(0.98);
}

body[data-view="family"] #familyView.active {
  background: var(--family-photo-canvas);
}

body[data-view="family"] .family-dashboard {
  height: 100dvh;
  grid-template-columns: minmax(0, 64%) minmax(340px, 36%);
  grid-template-rows: 82px minmax(0, 1fr);
  background: var(--family-photo-canvas);
}

body[data-view="family"] .family-topbar {
  position: relative;
  min-height: 82px;
  grid-column: 1 / -1;
  grid-row: 1;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  padding: 10px 28px;
  border-bottom: 1px solid var(--family-photo-line);
  background: #fffefa;
}

body[data-view="family"] .family-topbar h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--family-photo-ink);
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 2rem;
  font-weight: 850;
  letter-spacing: 0;
}

body[data-view="family"] .family-topbar .sim-status {
  max-width: min(220px, 28vw);
  justify-self: end;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-view="family"] .family-home-button {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  color: #21241f;
  background: transparent;
  box-shadow: none;
}

body[data-view="family"] .family-home-button:hover,
body[data-view="family"] .family-home-button:focus-visible {
  background: #f0eee7;
}

body[data-view="family"] .family-home-button svg {
  width: 36px;
  height: 36px;
  stroke-width: 2.25;
}

body[data-view="family"] .family-members-stage {
  min-width: 0;
  min-height: 0;
  padding: 0;
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid var(--family-photo-line);
  display: block;
  overflow: hidden;
  background: #ded8cb;
}

body[data-view="family"] .family-member-list,
body[data-view="family"] .family-member-list[data-empty="false"] {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  overflow: hidden;
}

body[data-view="family"] .family-member-list[data-empty="true"] {
  height: 100%;
  padding: 28px;
  display: grid;
  place-items: center;
  background: var(--family-photo-panel);
}

body[data-view="family"] .family-member-spotlight {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 112px;
  overflow: hidden;
  background: #cfc8bb;
}

body[data-view="family"] .family-member-photo {
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #d7d1c6;
}

body[data-view="family"] .family-member-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 24%;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(24, 23, 20, 0), rgba(24, 23, 20, 0.2));
}

body[data-view="family"] .family-member-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
}

body[data-view="family"] .family-member-photo[data-photo-kind="profile"] img {
  object-position: center 30%;
}

body[data-view="family"] .family-member-callbar {
  min-width: 0;
  padding: 18px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: 22px;
  color: #ffffff;
  background: #24251f;
}

body[data-view="family"] .family-member-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
}

body[data-view="family"] .family-member-identity > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-view="family"] .family-member-identity h2 {
  margin: 0;
  color: #ffffff;
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 2rem;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0;
}

body[data-view="family"] .family-member-identity > div > span {
  color: #dadbd5;
  font-size: 1.08rem;
  font-weight: 700;
}

body[data-view="family"] .family-member-identity em {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffe8a7;
  background: rgba(255, 223, 139, 0.13);
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 750;
}

body[data-view="family"] .family-member-identity em svg {
  width: 15px;
  height: 15px;
}

body[data-view="family"] .family-member-identity .member-status {
  margin: 0;
  color: #c8cec9;
  font-size: 0.98rem;
  font-weight: 650;
}

body[data-view="family"] .family-member-identity .member-status i {
  width: 9px;
  height: 9px;
  margin-right: 8px;
}

body[data-view="family"] .family-member-identity .member-status--available i {
  background: #62c98b;
}

body[data-view="family"] .family-primary-call,
body[data-view="family"] .family-primary-call[data-call-mode="phone"] {
  width: 210px;
  min-height: 72px;
  padding: 12px 18px;
  border: 1px solid #3d9968;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #ffffff;
  background: var(--family-photo-accent);
  box-shadow: 0 5px 16px rgba(15, 92, 53, 0.2);
  font-size: 1.35rem;
  font-weight: 800;
}

body[data-view="family"] .family-primary-call svg {
  width: 30px;
  height: 30px;
}

body[data-view="family"] .family-primary-call:not(:disabled):hover,
body[data-view="family"] .family-primary-call:not(:disabled):focus-visible {
  border-color: #4eaa77;
  background: var(--family-photo-accent-strong);
}

body[data-view="family"] .family-primary-call[data-call-mode="unavailable"] {
  border-color: #5b5e58;
  color: #c9cbc6;
  background: #464942;
  box-shadow: none;
}

body[data-view="family"] .family-member-tabs {
  min-width: 0;
  min-height: 104px;
  padding: 12px 18px;
  border-top: 1px solid #d7d2c8;
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fffefa;
}

body[data-view="family"] .family-member-tab {
  min-width: 176px;
  min-height: 78px;
  padding: 8px 14px 8px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--family-photo-ink);
  background: transparent;
  box-shadow: none;
  text-align: left;
}

body[data-view="family"] .family-member-tab[aria-selected="true"] {
  border-color: #3b9866;
  background: #f0f6ec;
}

body[data-view="family"] .family-member-tab:hover,
body[data-view="family"] .family-member-tab:focus-visible {
  background: #f4f2eb;
}

body[data-view="family"] .family-member-tab-avatar {
  width: 62px;
  height: 62px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #245d45;
  background: #dcecdf;
  font-size: 1.65rem;
  font-weight: 850;
}

body[data-view="family"] .family-member-tab-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body[data-view="family"] .family-member-tab-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body[data-view="family"] .family-member-tab-copy strong {
  overflow: hidden;
  color: var(--family-photo-ink);
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-view="family"] .family-member-tab-copy small {
  color: var(--family-photo-muted);
  font-size: 0.9rem;
  font-weight: 650;
}

body[data-view="family"] .family-empty-state {
  width: min(460px, 100%);
  min-height: 170px;
  padding: 28px;
  border: 1px solid var(--family-photo-line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--family-photo-muted);
  background: #fffefa;
  box-shadow: none;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
}

body[data-view="family"] .relative-contact-list[data-empty="true"] {
  grid-template-columns: minmax(0, 1fr);
}

body[data-view="family"] .relative-contact-list[data-empty="true"] > li {
  border-right: 0;
}

body[data-view="family"] .relative-contact-list[data-empty="true"] .family-empty-state {
  width: 100%;
  min-height: 132px;
  padding: 20px;
}

body[data-view="family"] .family-footer-band,
body[data-cellular-capable="false"][data-view="family"] .family-footer-band {
  min-width: 0;
  min-height: 0;
  padding: 34px 32px 28px;
  grid-column: 2;
  grid-row: 2;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  background: var(--family-photo-panel);
}

body[data-view="family"] .family-content-heading {
  min-height: 52px;
  padding: 0 4px;
  display: flex;
  align-items: center;
}

body[data-view="family"] .family-content-heading h2 {
  color: var(--family-photo-ink);
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 1.75rem;
  font-weight: 850;
  letter-spacing: 0;
}

body[data-view="family"] .family-quick-actions {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: visible;
  background: transparent;
}

body[data-view="family"] .family-quick-actions button {
  min-height: 128px;
  padding: 20px 4px;
  border: 0;
  border-bottom: 1px solid var(--family-photo-line);
  border-radius: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 28px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 18px;
  row-gap: 4px;
  color: var(--family-photo-ink);
  background: transparent;
  box-shadow: none;
  text-align: left;
}

body[data-view="family"] .family-quick-actions button:last-child {
  border-bottom: 0;
}

body[data-view="family"] .family-quick-actions button:hover,
body[data-view="family"] .family-quick-actions button:focus-visible {
  background: #f2efe7;
}

body[data-view="family"] .family-action-icon,
body[data-view="family"] .family-action-icon--album,
body[data-view="family"] .family-action-icon--message,
body[data-view="family"] .family-action-icon--reminder {
  width: 58px;
  height: 58px;
  grid-column: 1;
  grid-row: 1 / 3;
  border: 2px solid currentColor;
  border-radius: 8px;
  background: transparent;
}

body[data-view="family"] .family-action-icon--album {
  color: #4a925f;
}

body[data-view="family"] .family-action-icon--message {
  color: #bc4b34;
}

body[data-view="family"] .family-action-icon--reminder {
  color: #9c6a20;
}

body[data-view="family"] .family-action-icon svg {
  width: 30px;
  height: 30px;
  stroke-width: 2;
}

body[data-view="family"] .family-quick-actions strong {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: var(--family-photo-ink);
  font-size: 1.35rem;
  font-weight: 800;
}

body[data-view="family"] .family-quick-actions small {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  color: var(--family-photo-muted);
  font-size: 1rem;
  font-weight: 650;
}

body[data-view="family"] .family-action-tail {
  position: relative;
  width: 28px;
  min-width: 0;
  height: 100%;
  grid-column: 3;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-view="family"] .family-unread-count {
  position: absolute;
  top: 50%;
  right: 38px;
  min-width: 40px;
  height: 40px;
  padding: 0 9px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #d52323;
  box-shadow: 0 2px 6px rgba(78, 12, 12, 0.24);
  font-size: 1.1rem;
  font-weight: 850;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform: translateY(-50%);
}

body[data-view="family"] .family-unread-count[hidden] {
  display: none;
}

body[data-view="family"] .family-action-chevron {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: #8b8f89;
}

body[data-view="family"] .family-relatives-pane {
  flex: 0 0 auto;
  min-height: 190px;
  padding: 20px 0 0;
  border-top: 1px solid var(--family-photo-line);
  border-left: 0;
  background: transparent;
}

@media (max-width: 1080px) and (min-width: 861px) {
  body[data-view="family"] .family-dashboard {
    grid-template-columns: minmax(0, 62%) minmax(330px, 38%);
    grid-template-rows: 72px minmax(0, 1fr);
  }

  body[data-view="family"] .family-topbar {
    min-height: 72px;
    padding: 8px 22px;
  }

  body[data-view="family"] .family-home-button {
    width: 50px;
    height: 50px;
  }

  body[data-view="family"] .family-member-spotlight {
    grid-template-rows: minmax(0, 1fr) 94px;
  }

  body[data-view="family"] .family-member-callbar {
    padding: 14px 18px;
    grid-template-columns: minmax(0, 1fr) 174px;
    gap: 14px;
  }

  body[data-view="family"] .family-member-identity h2 {
    font-size: 1.65rem;
  }

  body[data-view="family"] .family-primary-call,
  body[data-view="family"] .family-primary-call[data-call-mode="phone"] {
    width: 174px;
    min-height: 64px;
    font-size: 1.15rem;
  }

  body[data-view="family"] .family-member-tabs {
    min-height: 86px;
    padding: 8px 12px;
  }

  body[data-view="family"] .family-member-tab {
    min-width: 150px;
    min-height: 68px;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 9px;
  }

  body[data-view="family"] .family-member-tab-avatar {
    width: 52px;
    height: 52px;
  }

  body[data-view="family"] .family-footer-band,
  body[data-cellular-capable="false"][data-view="family"] .family-footer-band {
    padding: 22px 22px 18px;
    gap: 12px;
  }

  body[data-view="family"] .family-content-heading {
    min-height: 42px;
  }

  body[data-view="family"] .family-content-heading h2 {
    font-size: 1.5rem;
  }

  body[data-view="family"] .family-quick-actions button {
    min-height: 105px;
    padding: 14px 2px;
    grid-template-columns: 54px minmax(0, 1fr) 24px;
    column-gap: 13px;
  }

  body[data-view="family"] .family-action-icon,
  body[data-view="family"] .family-action-icon--album,
  body[data-view="family"] .family-action-icon--message,
  body[data-view="family"] .family-action-icon--reminder {
    width: 50px;
    height: 50px;
  }

  body[data-view="family"] .family-quick-actions strong {
    font-size: 1.16rem;
  }

  body[data-view="family"] .family-quick-actions small {
    font-size: 0.9rem;
  }
}

@media (min-width: 861px) and (max-height: 850px) {
  body[data-view="family"] .family-footer-band,
  body[data-cellular-capable="false"][data-view="family"] .family-footer-band {
    padding: 16px 22px 14px;
    gap: 10px;
  }

  body[data-view="family"] .family-content-heading {
    min-height: 34px;
  }

  body[data-view="family"] .family-content-heading h2 {
    font-size: 1.38rem;
  }

  body[data-view="family"] .family-quick-actions button {
    min-height: 92px;
    padding: 10px 2px;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    column-gap: 12px;
  }

  body[data-view="family"] .family-action-icon,
  body[data-view="family"] .family-action-icon--album,
  body[data-view="family"] .family-action-icon--message,
  body[data-view="family"] .family-action-icon--reminder {
    width: 46px;
    height: 46px;
  }

  body[data-view="family"] .family-action-icon svg {
    width: 25px;
    height: 25px;
  }

  body[data-view="family"] .family-quick-actions strong {
    font-size: 1.08rem;
  }

  body[data-view="family"] .family-quick-actions small {
    font-size: 0.84rem;
  }

  body[data-view="family"] .family-relatives-pane {
    min-height: 142px;
    padding-top: 10px;
    grid-template-rows: 34px auto;
  }

  body[data-view="family"] .relative-contact-list[data-empty="true"] .family-empty-state {
    min-height: 92px;
    padding: 14px;
    font-size: 1rem;
  }
}

@media (max-width: 860px) {
  body[data-view="family"] #familyView.active {
    height: auto;
    overflow: visible;
  }

  body[data-view="family"] .family-dashboard {
    height: auto;
    min-height: 100dvh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 72px 610px auto;
  }

  body[data-view="family"] .family-topbar {
    min-height: 72px;
    grid-column: 1;
    grid-row: 1;
    padding: 8px 18px;
  }

  body[data-view="family"] .family-members-stage {
    min-height: 610px;
    grid-column: 1;
    grid-row: 2;
    border-right: 0;
    border-bottom: 1px solid var(--family-photo-line);
  }

  body[data-view="family"] .family-footer-band,
  body[data-cellular-capable="false"][data-view="family"] .family-footer-band {
    grid-column: 1;
    grid-row: 3;
    padding: 26px 22px max(26px, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 560px) {
  body[data-view="family"] .family-dashboard {
    grid-template-rows: 64px 500px auto;
  }

  body[data-view="family"] .family-topbar {
    min-height: 64px;
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    padding: 7px 10px;
  }

  body[data-view="family"] .family-topbar h1 {
    font-size: 1.45rem;
  }

  body[data-view="family"] .family-home-button {
    width: 44px;
    height: 44px;
  }

  body[data-view="family"] .family-home-button svg {
    width: 29px;
    height: 29px;
  }

  body[data-view="family"] .family-members-stage {
    min-height: 500px;
  }

  body[data-view="family"] .family-member-spotlight {
    grid-template-rows: minmax(0, 1fr) 108px;
  }

  body[data-view="family"] .family-member-callbar {
    padding: 13px 14px;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 10px;
  }

  body[data-view="family"] .family-member-identity h2 {
    font-size: 1.45rem;
  }

  body[data-view="family"] .family-member-identity > div > span,
  body[data-view="family"] .family-member-identity .member-status {
    font-size: 0.82rem;
  }

  body[data-view="family"] .family-member-identity em {
    display: none;
  }

  body[data-view="family"] .family-primary-call,
  body[data-view="family"] .family-primary-call[data-call-mode="phone"] {
    width: 112px;
    min-height: 66px;
    padding: 9px;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
  }

  body[data-view="family"] .family-primary-call svg {
    width: 24px;
    height: 24px;
  }

  body[data-view="family"] .family-member-tabs {
    min-height: 84px;
    padding: 8px 10px;
    gap: 8px;
  }

  body[data-view="family"] .family-member-tab {
    min-width: 138px;
    min-height: 66px;
    padding: 6px 8px;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
  }

  body[data-view="family"] .family-member-tab-avatar {
    width: 48px;
    height: 48px;
  }

  body[data-view="family"] .family-member-tab-copy strong {
    font-size: 1rem;
  }

  body[data-view="family"] .family-member-tab-copy small {
    font-size: 0.78rem;
  }

  body[data-view="family"] .family-footer-band,
  body[data-cellular-capable="false"][data-view="family"] .family-footer-band {
    padding: 20px 14px max(22px, env(safe-area-inset-bottom, 0px));
  }

  body[data-view="family"] .family-content-heading h2 {
    font-size: 1.42rem;
  }

  body[data-view="family"] .family-quick-actions button {
    min-height: 94px;
    padding: 12px 2px;
    grid-template-columns: 48px minmax(0, 1fr) 22px;
    column-gap: 12px;
  }

  body[data-view="family"] .family-action-icon,
  body[data-view="family"] .family-action-icon--album,
  body[data-view="family"] .family-action-icon--message,
  body[data-view="family"] .family-action-icon--reminder {
    width: 46px;
    height: 46px;
  }

  body[data-view="family"] .family-action-icon svg {
    width: 24px;
    height: 24px;
  }

  body[data-view="family"] .family-quick-actions strong {
    font-size: 1.08rem;
  }

  body[data-view="family"] .family-quick-actions small {
    font-size: 0.86rem;
  }
}

/* Elder voice state feedback: one clear signal for listening, thinking and speaking. */
body[data-view="home"] .voice-companion-label {
  min-height: 1.45em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 180ms ease;
}

body[data-view="home"] .voice-companion-label::before {
  content: "";
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 rgba(63, 104, 100, 0.2);
}

body[data-view="home"] .voice-panel[data-voice-state="listening"] .voice-companion-label {
  color: #087f7b;
}

body[data-view="home"] .voice-panel[data-voice-state="listening"] .voice-companion-label::before {
  animation: elderVoiceStatusPulse 1.45s ease-out infinite;
}

body[data-view="home"] .voice-panel[data-voice-state="thinking"] .voice-companion-label {
  color: #7161a5;
}

body[data-view="home"] .voice-panel[data-voice-state="thinking"] .voice-companion-label::before {
  animation: elderVoiceThinking 1.2s ease-in-out infinite;
}

body[data-view="home"] .voice-panel[data-voice-state="speaking"] .voice-companion-label {
  color: #a33e69;
}

body[data-view="home"] .voice-panel[data-voice-state="speaking"] .voice-companion-label::before {
  animation: elderVoiceSpeaking 0.78s ease-in-out infinite;
}

body[data-view="home"] .voice-panel[data-voice-state="recovering"] .voice-companion-label {
  color: #9a6718;
}

body[data-view="home"] .voice-panel[data-voice-state="attention"] .voice-companion-label,
body[data-view="home"] .voice-panel[data-voice-alert="true"] .voice-orb-status {
  color: #a33a32;
}

body[data-view="home"] .voice-panel[data-voice-state="listening"] .voice-orb-surface {
  background:
    radial-gradient(circle at 68% 24%, rgba(246, 255, 255, 0.96) 0 8%, rgba(246, 255, 255, 0) 36%),
    radial-gradient(circle at 27% 72%, rgba(183, 227, 225, 0.9) 0 12%, rgba(183, 227, 225, 0) 48%),
    radial-gradient(circle at 76% 73%, rgba(154, 211, 241, 0.92) 0 13%, rgba(154, 211, 241, 0) 50%),
    linear-gradient(135deg, #d3efeb 0%, #cbdff1 48%, #bfe9ef 100%);
}

body[data-view="home"] .voice-panel[data-voice-state="thinking"] .voice-orb-surface {
  background:
    radial-gradient(circle at 68% 24%, rgba(251, 248, 255, 0.96) 0 8%, rgba(251, 248, 255, 0) 36%),
    radial-gradient(circle at 27% 72%, rgba(218, 186, 239, 0.88) 0 12%, rgba(218, 186, 239, 0) 48%),
    radial-gradient(circle at 76% 73%, rgba(178, 205, 247, 0.9) 0 13%, rgba(178, 205, 247, 0) 50%),
    linear-gradient(135deg, #ead8f2 0%, #d5d3ef 48%, #d0e3f3 100%);
}

body[data-view="home"] .voice-panel[data-voice-state="speaking"] .voice-orb-surface {
  background:
    radial-gradient(circle at 68% 24%, rgba(255, 249, 252, 0.96) 0 8%, rgba(255, 249, 252, 0) 36%),
    radial-gradient(circle at 27% 72%, rgba(238, 158, 205, 0.9) 0 12%, rgba(238, 158, 205, 0) 48%),
    radial-gradient(circle at 76% 73%, rgba(151, 205, 240, 0.92) 0 13%, rgba(151, 205, 240, 0) 50%),
    linear-gradient(135deg, #efc6dd 0%, #d7caeb 48%, #c2e4f2 100%);
}

body[data-view="home"] .voice-panel[data-voice-state="recovering"] .voice-orb-surface,
body[data-view="home"] .voice-panel[data-voice-state="attention"] .voice-orb-surface {
  animation: none;
  filter: saturate(0.72) brightness(1.03);
}

body[data-view="home"] .voice-panel[data-voice-state="thinking"] .voice-orb-status,
body[data-view="home"] .voice-panel[data-voice-state="speaking"] .voice-orb-status {
  font-weight: 700;
}

@keyframes elderVoiceStatusPulse {
  0% { box-shadow: 0 0 0 0 rgba(8, 127, 123, 0.34); }
  75%, 100% { box-shadow: 0 0 0 12px rgba(8, 127, 123, 0); }
}

@keyframes elderVoiceThinking {
  0%, 100% { opacity: 0.48; transform: scale(0.78); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes elderVoiceSpeaking {
  0%, 100% { transform: scaleY(0.72); }
  50% { transform: scaleY(1.22); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-view="home"] .voice-companion-label::before {
    animation: none !important;
  }
}

/* Keep the Android terminal responsive on entry-level hardware. State changes and
   scheduled expressions still provide feedback without continuous GPU redraws. */
html[data-render-profile="efficient"] .voice-panel .voice-orb-surface,
html[data-render-profile="efficient"] .voice-panel .voice-orb::after,
html[data-render-profile="efficient"] body[data-view="home"] .voice-companion-label::before,
html[data-render-profile="efficient"] #faceView .face-blink,
html[data-render-profile="efficient"] #faceView .face-listening-eyes,
html[data-render-profile="efficient"] #faceView .face-speaking-mouth,
html[data-render-profile="efficient"] #faceView .face-laughing-mouth,
html[data-render-profile="efficient"] #faceView .face-sleepy-mouth,
html[data-render-profile="efficient"] #faceView .face-love-eye,
html[data-render-profile="efficient"] #faceView .face-expression-speaking rect,
html[data-render-profile="efficient"] #faceView .face-expression-laughing .face-eye-line,
html[data-render-profile="efficient"] #faceView .face-expression-caring .face-eye-line {
  animation: none !important;
}

html[data-render-profile="efficient"] #faceView .face-expression {
  transition: none;
}

html[data-render-profile="efficient"] .voice-panel .voice-orb::before {
  inset: -7%;
  background: rgba(209, 185, 235, 0.2);
  filter: none;
  opacity: 0.58;
}

html[data-render-profile="efficient"] .voice-panel .voice-orb-surface {
  transform: none;
  will-change: auto;
}

/* Family player: a deliberately small, offline-first surface for elders. */
body[data-view="opera"] {
  overflow: hidden;
  color: #fff8e8;
  background: #15100d;
}

body[data-view="opera"] .workspace {
  display: block;
  width: 100vw;
  min-height: 100vh;
  margin: 0;
}

body[data-view="opera"] .device-area {
  display: block;
  width: 100%;
}

body[data-view="opera"] .robot-head,
body[data-view="opera"] .screen-header,
body[data-view="opera"] .voice-panel {
  display: none !important;
}

body[data-view="opera"] .robot-body {
  display: block !important;
  width: 100vw;
  height: 100vh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #18120f;
  box-shadow: none;
}

body[data-view="opera"] .robot-body::before {
  display: none;
}

body[data-view="opera"] .opera-library-view.active {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}

.opera-library-shell {
  position: relative;
  display: grid;
  grid-template-rows: 96px minmax(0, 1fr) 72px;
  width: 100%;
  height: 100%;
  padding: 0 28px;
  background: #18120f;
}

.opera-library-header,
.opera-library-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.opera-library-header {
  border-bottom: 2px solid #7d2b24;
}

.opera-library-header p {
  margin: 0 0 2px;
  color: #d9bd82;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.opera-library-header h2 {
  margin: 0;
  color: #fff8e8;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: 38px;
  line-height: 1.1;
}

.opera-library-header button,
.opera-library-footer button,
.opera-license-card > button {
  min-width: 148px;
  min-height: 60px;
  padding: 10px 22px;
  border: 2px solid #d1ad65;
  border-radius: 10px;
  color: #fff8e8;
  background: #7d2b24;
  font-size: 24px;
  font-weight: 800;
}

.opera-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-height: 0;
  padding: 18px 0;
}

.opera-show-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  align-content: stretch;
  min-height: 0;
  padding: 18px 22px;
  overflow: hidden;
  border: 2px solid #7d5a3d;
  border-left: 12px solid #a5352c;
  border-radius: 12px;
  color: #261b15;
  text-align: left;
  background: #f1dfb9;
  box-shadow: 0 7px 0 #0d0907;
  touch-action: manipulation;
}

.opera-show-card[data-player-origin="family"] {
  border-color: #b99048;
  border-left-color: #f0c46b;
  color: #fff8e8;
  background: #73302a;
}

.opera-show-card[data-player-origin="family"][data-player-kind="audio"] {
  border-color: #64a49d;
  border-left-color: #8fd2c8;
  background: #285f5a;
}

.opera-show-card[data-player-origin="family"] .opera-show-order {
  background: rgba(255, 255, 255, 0.1);
}

.opera-show-card:focus-visible {
  outline: 5px solid #fff1b8;
  outline-offset: -7px;
}

.opera-show-card:disabled {
  opacity: 0.54;
  filter: grayscale(0.5);
}

.opera-show-order {
  align-self: start;
  justify-self: start;
  margin-bottom: 8px;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 800;
}

.opera-show-card strong {
  align-self: center;
  display: block;
  max-width: 90%;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
}

.opera-show-meta,
.opera-show-state {
  display: block;
  font-size: 20px;
  line-height: 1.35;
}

.opera-show-meta {
  margin-top: 8px;
  opacity: 0.8;
}

.opera-show-state {
  justify-self: end;
  margin-top: 6px;
  font-weight: 900;
}

.opera-library-footer {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto auto;
  border-top: 1px solid #5b4537;
  color: #eadbb9;
  font-size: 21px;
  font-weight: 700;
}

#operaLibraryStatus {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opera-library-pagination {
  display: grid;
  grid-template-columns: auto minmax(134px, auto) auto;
  align-items: center;
  gap: 10px;
}

.opera-library-footer .opera-library-pagination button {
  min-width: 132px;
  min-height: 56px;
  padding-inline: 16px;
  border-color: #d1ad65;
  color: #21150f;
  background: #f0c46b;
  font-size: 21px;
}

.opera-library-footer .opera-library-pagination button:focus-visible {
  outline: 4px solid #fff1b8;
  outline-offset: 3px;
}

.opera-library-footer .opera-library-pagination button:disabled {
  border-color: #5f5043;
  color: #9d9180;
  background: #302720;
  opacity: 1;
}

#operaLibraryPageStatus {
  min-width: 134px;
  padding: 8px 12px;
  border: 1px solid #7d5a3d;
  border-radius: 8px;
  color: #fff8e8;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  white-space: nowrap;
}

.opera-library-footer button {
  min-width: 132px;
  min-height: 52px;
  border-color: #7d5a3d;
  color: #eadbb9;
  background: #2a201a;
  font-size: 20px;
}

.opera-library-empty {
  grid-column: 1 / -1;
  align-self: center;
  color: #eadbb9;
  text-align: center;
  font-size: 28px;
}

.opera-license-panel[hidden] {
  display: none !important;
}

.opera-license-panel {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(8, 6, 5, 0.9);
}

.opera-license-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1020px, 96vw);
  max-height: 92vh;
  padding: 24px;
  border: 2px solid #d1ad65;
  border-radius: 14px;
  color: #2a201a;
  background: #f6ead0;
}

.opera-license-card h2 {
  margin-bottom: 8px;
  font-size: 32px;
}

.opera-license-card > p {
  margin-bottom: 14px;
  font-size: 19px;
}

.opera-license-list {
  display: grid;
  gap: 10px;
  overflow: auto;
  overscroll-behavior: contain;
}

.opera-license-list article {
  padding: 12px 14px;
  border-left: 6px solid #9b332b;
  background: #fffaf0;
}

.opera-license-list strong,
.opera-license-list span,
.opera-license-list p,
.opera-license-list a {
  display: block;
}

.opera-license-list strong {
  font-size: 22px;
}

.opera-license-list span,
.opera-license-list p,
.opera-license-list a {
  margin: 4px 0 0;
  font-size: 17px;
  line-height: 1.35;
}

.opera-license-list a {
  color: #6e241f;
  font-weight: 800;
}

.opera-license-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 5px;
}

.opera-license-list .opera-license-links a {
  display: inline-flex;
  margin-top: 0;
}

.opera-license-card > button {
  justify-self: end;
  margin-top: 14px;
}

@media (max-height: 650px) {
  .opera-library-shell {
    grid-template-rows: 78px minmax(0, 1fr) 60px;
    padding: 0 20px;
  }

  .opera-library-header h2 {
    font-size: 32px;
  }

  .opera-library-header p,
  .opera-show-meta,
  .opera-show-state,
  .opera-library-footer {
    font-size: 17px;
  }

  .opera-library-grid {
    gap: 12px;
    padding: 12px 0;
  }

  .opera-library-footer {
    grid-template-columns: minmax(110px, 1fr) auto auto;
    gap: 12px;
  }

  .opera-library-pagination {
    grid-template-columns: auto minmax(112px, auto) auto;
    gap: 8px;
  }

  .opera-library-footer .opera-library-pagination button {
    min-width: 108px;
    min-height: 50px;
    padding: 8px 12px;
    font-size: 18px;
  }

  #operaLibraryPageStatus {
    min-width: 112px;
    padding-inline: 8px;
    font-size: 17px;
  }

  .opera-library-license-button {
    min-width: 112px !important;
  }

  .opera-show-card {
    padding: 12px 18px;
  }
}

/* A ringing reminder becomes a familiar, full-screen phone alarm. */
body.reminder-alert-open[data-view="reminder"] {
  --reminder-phone-paper: #fbfaf6;
  --reminder-phone-ink: #14213d;
  --reminder-phone-blue: #1769e8;
  --reminder-phone-blue-soft: #eaf2ff;
  --reminder-phone-line: rgba(20, 33, 61, 0.1);
  background: var(--reminder-phone-paper);
}

body.reminder-alert-open[data-view="reminder"] .robot-body {
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  display: block;
  overflow: hidden;
  color: var(--reminder-phone-ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(23, 105, 232, 0.07), transparent 42%),
    var(--reminder-phone-paper);
}

body.reminder-alert-open[data-view="reminder"] .robot-body::before,
body.reminder-alert-open[data-view="reminder"] .screen-header,
body.reminder-alert-open[data-view="reminder"] .voice-panel {
  display: none !important;
}

body.reminder-alert-open[data-view="reminder"] #reminderView.active {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  padding: clamp(22px, 3vh, 34px) clamp(34px, 5vw, 72px) clamp(24px, 3.5vh, 40px);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(18px, 3vh, 28px);
  overflow: hidden;
  color: var(--reminder-phone-ink);
  background: transparent;
}

body.reminder-alert-open[data-view="reminder"] #reminderView[data-reminder-mode="alert"] .reminder-list,
body.reminder-alert-open[data-view="reminder"] #reminderView[data-reminder-mode="done"] .reminder-list {
  display: none;
}

body.reminder-alert-open[data-view="reminder"] .active-reminder-card {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: clamp(6px, 1vh, 12px) 0 0;
  display: grid;
  grid-template-rows: auto auto;
  place-content: center;
  place-items: center;
  gap: clamp(8px, 1.5vh, 14px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

body.reminder-alert-open[data-view="reminder"] .active-reminder-icon {
  width: clamp(84px, 11vh, 106px);
  height: clamp(84px, 11vh, 106px);
  display: grid;
  place-items: center;
  border: 3px solid rgba(23, 105, 232, 0.2);
  border-radius: 50%;
  color: var(--reminder-phone-blue);
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(23, 105, 232, 0.12);
}

body.reminder-alert-open[data-view="reminder"] .active-reminder-icon svg {
  width: 56%;
  height: 56%;
  stroke-width: 2.2;
}

body.reminder-alert-open[data-view="reminder"] .active-reminder-copy {
  display: grid;
  place-items: center;
  gap: clamp(3px, 0.8vh, 8px);
}

body.reminder-alert-open[data-view="reminder"] .active-reminder-card .label {
  margin: 0;
  color: #667085;
  font-size: clamp(17px, 1.65vw, 22px);
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: 0.08em;
}

body.reminder-alert-open[data-view="reminder"] .active-reminder-card h2 {
  margin: 0;
  max-width: 16em;
  color: var(--reminder-phone-ink);
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-size: clamp(48px, 6vw, 76px);
  line-height: 1.13;
  font-weight: 800;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

body.reminder-alert-open[data-view="reminder"] #activeReminderTime {
  margin-top: clamp(2px, 0.7vh, 7px);
  display: block;
  color: var(--reminder-phone-blue);
  font-family: "Bahnschrift", "Microsoft YaHei UI", sans-serif;
  font-size: clamp(70px, 10vw, 116px);
  line-height: 0.98;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.015em;
}

body.reminder-alert-open[data-view="reminder"] .active-reminder-repeat {
  margin: 0;
  color: var(--reminder-phone-blue);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  font-weight: 800;
}

body.reminder-alert-open[data-view="reminder"] .active-reminder-card #activeReminderText {
  max-width: min(34em, 82vw);
  max-height: 3em;
  margin: clamp(3px, 0.8vh, 8px) 0 0;
  overflow: hidden;
  color: #596273;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.42;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.reminder-alert-open[data-view="reminder"] #reminderView.active .control-row {
  width: min(100%, 1120px);
  margin: 0 auto;
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
}

body.reminder-alert-open[data-view="reminder"] #reminderView.active .control-row button {
  min-width: 0;
  min-height: clamp(76px, 10vh, 94px);
  padding: 12px clamp(20px, 3vw, 42px);
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: clamp(27px, 2.6vw, 36px);
  line-height: 1.15;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(20, 33, 61, 0.1);
}

body.reminder-alert-open[data-view="reminder"] #reminderView.active .reminder-home-button {
  border-color: rgba(23, 105, 232, 0.16);
  color: var(--reminder-phone-blue);
  background: var(--reminder-phone-blue-soft);
}

body.reminder-alert-open[data-view="reminder"] #confirmReminderButton {
  color: #ffffff;
  background: var(--reminder-phone-blue);
}

body.reminder-alert-open[data-view="reminder"] #reminderView[data-reminder-mode="done"] .control-row {
  grid-template-columns: minmax(280px, 560px);
  justify-content: center;
}

body.reminder-alert-open[data-view="reminder"] #reminderView.active .control-row button:focus-visible {
  outline: 5px solid rgba(23, 105, 232, 0.34);
  outline-offset: 4px;
}

body.reminder-alert-open[data-view="reminder"] #reminderView.active .control-row button:disabled {
  opacity: 0.68;
  box-shadow: none;
}

@media (max-height: 660px) {
  body.reminder-alert-open[data-view="reminder"] #reminderView.active {
    padding-block: 16px 20px;
    gap: 14px;
  }

  body.reminder-alert-open[data-view="reminder"] .active-reminder-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 28px;
  }

  body.reminder-alert-open[data-view="reminder"] .active-reminder-copy {
    justify-items: start;
    text-align: left;
  }

  body.reminder-alert-open[data-view="reminder"] .active-reminder-card #activeReminderText {
    max-width: 28em;
  }
}

/* Family detail screens keep the accepted home proportions on 8-inch landscape devices. */
body[data-view="memory"],
body[data-view="reminder"] {
  --elder-home-paper: #fbf8f1;
  --elder-home-ink: #1f2523;
  --elder-home-muted: #6f706a;
  --elder-home-line: rgba(51, 55, 52, 0.13);
  --elder-home-gutter: #e4ded3;
}

body[data-view="memory"] .robot-body,
body[data-view="reminder"] .robot-body {
  height: 100dvh;
  min-height: 100dvh;
  grid-template-columns: minmax(360px, 34%) minmax(0, 66%);
  grid-template-rows: minmax(300px, 42%) minmax(0, 58%);
  color: var(--elder-home-ink);
  background: var(--elder-home-paper);
}

body[data-view="memory"] .screen-header,
body[data-view="reminder"] .screen-header {
  min-height: 0;
  padding: clamp(36px, 4vw, 54px) clamp(34px, 3.6vw, 48px) 18px;
  justify-content: flex-start;
  gap: clamp(26px, 4vh, 38px);
  border-right: 1px solid var(--elder-home-line);
  background:
    linear-gradient(rgba(184, 36, 30, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 36, 30, 0.034) 1px, transparent 1px),
    var(--elder-home-paper);
  background-size: 30px 30px;
}

body[data-view="memory"] .screen-header .caption,
body[data-view="reminder"] .screen-header .caption {
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #a52a24;
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 800;
}

body[data-view="memory"] .screen-header .caption::before,
body[data-view="reminder"] .screen-header .caption::before {
  content: "";
  width: 22px;
  height: 4px;
  border-radius: 4px;
  background: #a52a24;
}

body[data-view="memory"] .screen-header h1,
body[data-view="reminder"] .screen-header h1 {
  max-width: 10em;
  color: var(--elder-home-ink);
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif;
  font-size: clamp(38px, 3.45vw, 52px);
  line-height: 1.28;
  font-weight: 700;
  white-space: pre-line;
}

body[data-view="memory"] .home-clock,
body[data-view="reminder"] .home-clock {
  width: 100%;
  padding-top: 22px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 2px;
  align-items: end;
  border-top: 1px solid var(--elder-home-line);
  color: var(--elder-home-ink);
}

body[data-view="memory"] .home-clock strong,
body[data-view="reminder"] .home-clock strong {
  grid-row: 1 / 3;
  color: var(--elder-home-ink);
  font-size: clamp(56px, 5.3vw, 72px);
  line-height: 0.95;
  font-weight: 500;
}

body[data-view="memory"] .home-clock span,
body[data-view="reminder"] .home-clock span {
  color: #4f554f;
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 700;
}

body[data-view="memory"] .home-clock small,
body[data-view="reminder"] .home-clock small {
  color: var(--elder-home-muted);
  font-size: clamp(14px, 1.2vw, 17px);
}

body[data-view="memory"] .voice-panel,
body[data-view="reminder"] .voice-panel {
  min-height: 0;
  padding: 12px clamp(34px, 3.6vw, 48px) 44px;
  justify-content: center;
  border-right: 1px solid var(--elder-home-line);
  color: var(--elder-home-ink);
  background: var(--elder-home-paper);
}

body[data-view="memory"] .voice-companion-label,
body[data-view="reminder"] .voice-companion-label {
  margin: 0 0 24px;
  color: #3f6864;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.35;
  font-weight: 800;
}

body[data-view="memory"] .voice-panel .voice-orb,
body[data-view="reminder"] .voice-panel .voice-orb {
  width: clamp(198px, 18vw, 238px);
}

body[data-view="memory"] .voice-panel .voice-orb::before,
body[data-view="reminder"] .voice-panel .voice-orb::before {
  background: rgba(209, 185, 235, 0.28);
  opacity: 0.82;
}

body[data-view="memory"] .voice-orb-status,
body[data-view="reminder"] .voice-orb-status {
  margin-top: 24px;
  color: #65656e;
  font-size: clamp(18px, 1.5vw, 21px);
}

body[data-view="memory"] #memoryView.active,
body[data-view="reminder"] #reminderView.active {
  grid-column: 2;
  grid-row: 1 / 3;
  height: 100dvh;
  min-height: 0;
  padding: 12px;
  gap: 10px;
  overflow: hidden;
  color: var(--elder-home-ink);
  background: var(--elder-home-gutter);
}

body[data-view="memory"] #memoryView.active {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

body[data-view="memory"] .memory-card {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: clamp(14px, 2vh, 20px) clamp(18px, 2.2vw, 28px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(35, 31, 27, 0.12);
}

body[data-view="memory"] .memory-card > .label,
body[data-view="memory"] .memory-card > h2,
body[data-view="memory"] .memory-card > p {
  margin: 0;
}

body[data-view="memory"] .memory-card > .label {
  color: #6f7678;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 750;
}

body[data-view="memory"] .memory-card > h2 {
  font-size: clamp(27px, 2.5vw, 36px);
  line-height: 1.2;
}

body[data-view="memory"] .memory-card > p {
  color: #667075;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.35;
}

body[data-view="memory"] .photo-scene,
body[data-view="memory"] .family-photo-media,
body[data-view="memory"] .family-voice-media {
  width: min(100%, 760px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
}

body[data-view="memory"] .family-photo-media {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #101214;
}

body[data-view="memory"] .family-photo-media img {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 8px;
  object-fit: contain;
  background: #101214;
}

body[data-view="memory"] .family-voice-media {
  display: grid;
  place-items: center;
}

body[data-view="memory"] .family-voice-play {
  width: min(100%, 620px);
}

body[data-view="memory"] .family-collection-nav {
  margin: 0 auto;
}

body[data-view="memory"] #memoryView.active .control-row,
body[data-view="reminder"] #reminderView.active .control-row {
  position: static;
  bottom: auto;
  margin: 0;
  display: flex;
  gap: 10px;
}

body[data-view="memory"] #memoryView.active .control-row button,
body[data-view="reminder"] #reminderView.active .control-row button {
  min-width: 0;
  min-height: 62px;
  flex: 1 1 0;
  padding: 10px 12px;
}

body[data-view="reminder"] #reminderView.active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

body[data-view="reminder"] .active-reminder-card {
  margin: 0;
}

body[data-view="reminder"] .reminder-list {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Family media opens inside the Family area instead of reusing the home split layout. */
body[data-view="memory"] {
  --family-detail-canvas: #f3f0e9;
  --family-detail-surface: #fffefa;
  --family-detail-ink: #20231f;
  --family-detail-muted: #70766f;
  --family-detail-line: #d8d3c8;
  background: var(--family-detail-canvas);
}

body[data-view="memory"] .robot-body {
  display: block;
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  color: var(--family-detail-ink);
  background: var(--family-detail-canvas);
}

body[data-view="memory"] .screen-header,
body[data-view="memory"] .voice-panel {
  display: none !important;
}

body[data-view="memory"] #memoryView.active {
  display: block;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  color: var(--family-detail-ink);
  background: var(--family-detail-canvas);
}

.family-detail-dashboard {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 82px minmax(0, 1fr);
  background: var(--family-detail-canvas);
}

.family-detail-topbar {
  position: relative;
  min-width: 0;
  min-height: 82px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--family-detail-line);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 18px;
  background: var(--family-detail-surface);
}

.family-detail-topbar h1 {
  grid-column: 2;
  margin: 0;
  overflow: hidden;
  color: var(--family-detail-ink);
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 2rem;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-detail-back {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--family-detail-ink);
  background: transparent;
  box-shadow: none;
}

.family-detail-back:hover,
.family-detail-back:focus-visible {
  background: #e9e6de;
}

.family-detail-back:focus-visible {
  outline: 3px solid #2a8757;
  outline-offset: 2px;
}

.family-detail-back svg {
  width: 36px;
  height: 36px;
  stroke-width: 2.25;
}

.family-detail-content {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
  background: var(--family-detail-canvas);
}

body[data-view="memory"] .family-detail-content .memory-card {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 14px 24px 16px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  color: var(--family-detail-ink);
  background: #ffffff;
  box-shadow: 0 3px 10px rgba(35, 31, 27, 0.12);
}

body[data-view="memory"] .family-detail-content .memory-card > .label,
body[data-view="memory"] .family-detail-content .memory-card > h2,
body[data-view="memory"] .family-detail-content .memory-card > p {
  margin: 0;
}

body[data-view="memory"] .family-detail-content .memory-card > .label {
  color: #52705f;
  font-size: clamp(16px, 1.45vw, 20px);
  font-weight: 800;
}

body[data-view="memory"] .family-detail-content .memory-card > h2 {
  color: var(--family-detail-ink);
  font-size: clamp(26px, 2.35vw, 34px);
  line-height: 1.2;
}

body[data-view="memory"] .family-detail-content .memory-card > p {
  color: var(--family-detail-muted);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.35;
}

body[data-view="memory"] .family-detail-content .photo-scene,
body[data-view="memory"] .family-detail-content .family-photo-media,
body[data-view="memory"] .family-detail-content .family-voice-media {
  width: min(100%, 1100px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
}

body[data-view="memory"] .family-detail-content .family-photo-media {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #101214;
}

body[data-view="memory"] .family-detail-content .family-photo-media img {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  border-radius: 8px;
  object-fit: contain;
  background: #101214;
}

body[data-view="memory"] .family-detail-content .family-voice-media {
  display: grid;
  place-items: center;
}

body[data-view="memory"] .family-detail-content .family-voice-play {
  width: min(100%, 620px);
}

body[data-view="memory"] .family-detail-content .family-collection-nav {
  margin: 0 auto;
}

@media (max-height: 650px) {
  .family-detail-dashboard {
    grid-template-rows: 70px minmax(0, 1fr);
  }

  .family-detail-topbar {
    min-height: 70px;
    padding-block: 7px;
  }

  .family-detail-back {
    width: 52px;
    height: 52px;
  }

  body[data-view="memory"] .family-detail-content .memory-card {
    padding-block: 10px;
  }
}

/* Family album: photo-first grid with a single distraction-free viewer. */
.family-detail-count {
  grid-column: 3;
  justify-self: end;
  color: var(--family-detail-muted);
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
}

.family-photo-gallery {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
}

.family-photo-gallery[hidden],
.family-photo-viewer[hidden],
.family-photo-grid-empty[hidden],
.family-photo-thumbnail-fallback[hidden],
#familyMessageDetail[hidden] {
  display: none !important;
}

.family-photo-grid {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: #ffffff;
}

.family-photo-grid-item {
  min-width: 0;
  aspect-ratio: 1;
}

.family-photo-thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: #e7e7e5;
  box-shadow: none;
  touch-action: manipulation;
}

.family-photo-thumbnail:hover,
.family-photo-thumbnail:active {
  transform: none;
  box-shadow: none;
}

.family-photo-thumbnail:focus-visible {
  outline: 4px solid #1477e3;
  outline-offset: -4px;
}

.family-photo-thumbnail img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #e7e7e5;
}

.family-photo-thumbnail img.is-unloaded {
  visibility: hidden;
}

.family-photo-thumbnail-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #666a66;
  font-size: 1.25rem;
  font-weight: 750;
  background: #e7e7e5;
}

.family-photo-new-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 40px;
  min-height: 32px;
  padding: 3px 10px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1;
  background: #1477e3;
}

.family-photo-grid-empty {
  position: absolute;
  inset: 0;
  padding: 32px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: #737773;
  text-align: center;
  background: #ffffff;
}

.family-photo-grid-empty svg {
  width: 62px;
  height: 62px;
  margin-bottom: 6px;
  color: #909590;
  stroke-width: 1.7;
}

.family-photo-grid-empty h2,
.family-photo-grid-empty p {
  margin: 0;
}

.family-photo-grid-empty h2 {
  color: #2b2f2b;
  font-size: 1.8rem;
}

.family-photo-grid-empty p {
  font-size: 1.2rem;
}

.family-photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #ffffff;
  background: #050505;
}

.family-photo-viewer .family-photo-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0;
  background: #050505;
}

.family-photo-viewer .family-photo-media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  border-radius: 0;
  object-fit: contain;
  background: #050505;
}

.family-photo-viewer-status {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #f2f2f2;
  font-size: 1.35rem;
  font-weight: 700;
}

.family-photo-viewer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 68px;
  height: 68px;
  min-width: 68px;
  min-height: 68px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  color: #ffffff;
  background: rgba(20, 20, 20, 0.78);
  box-shadow: none;
  touch-action: manipulation;
}

.family-photo-viewer-close:hover,
.family-photo-viewer-close:active {
  transform: none;
  background: rgba(20, 20, 20, 0.9);
  box-shadow: none;
}

.family-photo-viewer-close:focus-visible {
  outline: 4px solid #ffffff;
  outline-offset: 3px;
}

.family-photo-viewer-close svg {
  width: 38px;
  height: 38px;
  stroke-width: 2.5;
}

@media (max-width: 900px) {
  .family-photo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-height: 650px) {
  .family-photo-viewer-close {
    top: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
  }
}

/* Family messages: a calm, paper-like inbox designed for elderly readers. */
.family-message-list-view {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(165, 42, 36, 0.035), transparent 42%),
    #fffefa;
  box-shadow: 0 3px 10px rgba(35, 31, 27, 0.08);
}

.family-message-list-view[hidden],
.family-message-list[hidden],
.family-message-list-empty[hidden] {
  display: none !important;
}

.family-message-list {
  width: min(100%, 1040px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  padding: 18px 24px 28px;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  list-style: none;
}

.family-message-list-item {
  min-width: 0;
  margin: 0;
  padding: 0;
}

.family-message-item {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 128px;
  padding: 18px 22px 18px 26px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  border: 1px solid #ddd7cc;
  border-left: 8px solid #b5b1a8;
  border-radius: 10px;
  color: #252824;
  text-align: left;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 3px 8px rgba(47, 39, 33, 0.08);
  touch-action: manipulation;
}

.family-message-item.is-new,
.family-message-item[data-new="true"],
.family-message-item:has(.family-message-new-badge) {
  border-left-color: #b5362f;
  background: #fffdf8;
}

.family-message-item:hover,
.family-message-item:active {
  transform: none;
  border-color: #c9c0b2;
  border-left-color: #a52a24;
  background: #fffaf1;
  box-shadow: 0 3px 8px rgba(47, 39, 33, 0.1);
}

.family-message-item:focus-visible {
  outline: 4px solid #2a8757;
  outline-offset: 2px;
}

.family-message-item-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #8e302b;
  background: #f6e4df;
}

.family-message-item-icon[data-kind="voice"] {
  color: #256f69;
  background: #dff1ed;
}

.family-message-item-icon svg {
  width: 34px;
  height: 34px;
  stroke-width: 2.25;
}

.family-message-item-body {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.family-message-item-heading,
.family-message-item-who,
.family-message-item-meta {
  min-width: 0;
  display: flex;
  align-items: center;
}

.family-message-item-heading {
  justify-content: space-between;
  gap: 18px;
}

.family-message-item-who {
  gap: 10px;
  overflow: hidden;
}

.family-message-item-sender {
  overflow: hidden;
  color: #242824;
  font-size: clamp(23px, 2vw, 28px);
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-message-item-relation {
  flex: 0 0 auto;
  color: #73766f;
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 700;
}

.family-message-new-badge {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 850;
  line-height: 1;
  background: #b5362f;
}

.family-message-item-preview {
  min-width: 0;
  overflow: hidden;
  color: #555b55;
  font-size: clamp(19px, 1.55vw, 22px);
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-message-item-title {
  min-width: 0;
  overflow: hidden;
  color: #30352f;
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-message-item-meta {
  gap: 10px;
  color: #73776f;
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 700;
  line-height: 1.25;
}

.family-message-item-kind::after {
  content: "\00b7";
  margin-left: 10px;
}

.family-message-item-time {
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-message-status {
  color: #767a74;
  font-weight: 750;
}

.family-message-item-chevron {
  width: 30px;
  height: 30px;
  justify-self: end;
  color: #8e918b;
  stroke-width: 2.3;
}

.family-message-list-empty {
  position: absolute;
  inset: 0;
  padding: 32px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: #70756f;
  text-align: center;
  background: #fffefa;
}

.family-message-list-empty svg {
  width: 66px;
  height: 66px;
  margin-bottom: 4px;
  color: #8f958f;
  stroke-width: 1.7;
}

.family-message-list-empty h2,
.family-message-list-empty p {
  margin: 0;
}

.family-message-list-empty h2 {
  color: #292d29;
  font-size: 1.9rem;
}

.family-message-list-empty p {
  font-size: 1.25rem;
  line-height: 1.45;
}

/* Long family messages must remain readable without being clipped by the fixed screen. */
body[data-view="memory"] #familyMessageDetail {
  align-content: stretch;
}

body[data-view="memory"] #familyMessageDetail > .label,
body[data-view="memory"] #familyMessageDetail > h2 {
  width: min(100%, 920px);
  justify-self: center;
}

body[data-view="memory"] #familyMessageDetail > #familyCardText {
  width: min(100%, 920px);
  height: 100%;
  min-height: 0;
  max-height: 100%;
  justify-self: center;
  align-self: stretch;
  padding: 20px 26px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #e2ddd4;
  border-radius: 10px;
  color: #3f453f;
  text-align: left;
  font-size: clamp(22px, 1.85vw, 27px);
  font-weight: 600;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #fffdf8;
  scrollbar-width: thin;
}

body[data-view="memory"] #familyMessageDetail > .family-voice-media:not([hidden]) ~ #familyCardText {
  height: auto;
  max-height: 126px;
  padding: 8px 16px;
  align-self: center;
  border-color: transparent;
  color: var(--family-detail-muted);
  text-align: center;
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.4;
  background: transparent;
}

body[data-view="memory"] #familyMessageDetail > .family-collection-nav button {
  min-height: 56px;
}

@media (max-width: 900px) {
  .family-message-list {
    padding-inline: 14px;
  }

  .family-message-item {
    grid-template-columns: 62px minmax(0, 1fr) 28px;
    gap: 14px;
    padding-inline: 18px;
  }

  .family-message-item-icon {
    width: 60px;
    height: 60px;
  }
}

@media (max-height: 650px) {
  .family-message-list {
    padding-block: 12px 18px;
    gap: 10px;
  }

  .family-message-item {
    min-height: 108px;
    padding-block: 12px;
  }

  .family-message-item-body {
    gap: 5px;
  }

  body[data-view="memory"] #familyMessageDetail > #familyCardText {
    padding-block: 14px;
    line-height: 1.52;
  }
}

/* Family messages: an elderly-friendly conversation stream, oldest first. */
.family-message-list-view {
  --family-chat-canvas: #f5f2eb;
  --family-chat-bubble: #e4f0e7;
  --family-chat-bubble-strong: #d8eadf;
  --family-chat-line: #acc5b4;
  --family-chat-ink: #243129;
  --family-chat-muted: #68736b;
  border-color: rgba(91, 107, 96, 0.12);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 150px),
    var(--family-chat-canvas);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.family-message-list {
  width: min(100%, 1120px);
  margin: 0 auto;
  padding: 20px 34px 46px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-padding-block: 20px 46px;
  scrollbar-color: #aab4ac transparent;
}

.family-chat-message {
  width: min(82%, 840px);
  min-width: 0;
  margin: 0 auto 0 0;
  padding: 0 0 0 6px;
  display: grid;
  justify-items: start;
  gap: 7px;
  scroll-margin-block: 18px;
}

.family-chat-meta {
  width: 100%;
  min-width: 0;
  padding: 0 10px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.family-chat-sender {
  min-width: 0;
  overflow: hidden;
  color: #355f48;
  font-size: clamp(22px, 1.85vw, 27px);
  font-weight: 850;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-chat-time {
  flex: 0 0 auto;
  color: var(--family-chat-muted);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.family-chat-bubble {
  position: relative;
  width: auto;
  max-width: 100%;
  min-width: 250px;
  margin: 0;
  border: 2px solid var(--family-chat-line);
  border-radius: 8px 24px 24px 24px;
  color: var(--family-chat-ink);
  text-align: left;
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--family-chat-bubble);
  box-shadow: 0 3px 8px rgba(45, 70, 53, 0.1);
  appearance: none;
  touch-action: manipulation;
}

.family-chat-bubble::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -10px;
  width: 18px;
  height: 20px;
  border-left: 2px solid var(--family-chat-line);
  border-radius: 3px 0 0 0;
  background: linear-gradient(138deg, var(--family-chat-bubble) 0 52%, transparent 54% 100%);
  pointer-events: none;
}

.family-chat-bubble:hover {
  transform: none;
  border-color: #8eae99;
  background: var(--family-chat-bubble-strong);
  box-shadow: 0 4px 10px rgba(45, 70, 53, 0.13);
}

.family-chat-bubble:active {
  transform: none;
  border-color: #658b72;
  background: #cfe4d6;
  box-shadow: inset 0 2px 4px rgba(45, 70, 53, 0.12);
}

.family-chat-bubble:focus-visible {
  outline: 4px solid #166fb4;
  outline-offset: 4px;
}

.family-chat-voice {
  width: min(100%, 680px);
  min-height: 96px;
  padding: 16px 24px 16px 18px;
  display: grid;
  grid-template-columns: 58px minmax(116px, 1fr) auto;
  align-items: center;
  gap: 18px;
  cursor: pointer;
}

.family-chat-voice-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(47, 111, 73, 0.22);
  border-radius: 50%;
  color: #ffffff;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  background: #397c53;
  box-shadow: 0 2px 5px rgba(29, 87, 53, 0.18);
}

.family-chat-voice-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.family-chat-voice-label {
  color: #294b36;
  font-size: clamp(21px, 1.75vw, 25px);
  font-weight: 850;
  line-height: 1.25;
}

.family-chat-wave {
  height: 24px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  color: #3d7551;
}

.family-chat-wave i {
  width: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: currentColor;
}

.family-chat-wave i:nth-child(1) { height: 10px; }
.family-chat-wave i:nth-child(2) { height: 18px; }
.family-chat-wave i:nth-child(3) { height: 24px; }
.family-chat-wave i:nth-child(4) { height: 16px; }
.family-chat-wave i:nth-child(5) { height: 12px; }

.family-chat-duration {
  min-width: 70px;
  color: #315a41;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 850;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.family-chat-voice[aria-pressed="true"] {
  border-color: #5f9270;
  background: #d2e8d9;
}

.family-chat-voice[aria-pressed="true"] .family-chat-voice-icon {
  color: #397c53;
  background: #ffffff;
}

.family-chat-voice[aria-pressed="true"] .family-chat-wave {
  color: #235f3b;
}

.family-chat-text {
  min-height: 76px;
  padding: 18px 24px;
  display: block;
  color: var(--family-chat-ink);
  font-size: clamp(22px, 1.9vw, 27px);
  font-weight: 700;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.family-chat-status {
  min-height: 26px;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--family-chat-muted);
  font-size: clamp(16px, 1.25vw, 18px);
  font-weight: 750;
  line-height: 1.3;
}

.family-chat-message[data-status="sent"] .family-chat-status,
.family-chat-message[data-status="delivered"] .family-chat-status {
  color: #9a332e;
}

.family-chat-message[data-status="sent"] .family-chat-status::before,
.family-chat-message[data-status="delivered"] .family-chat-status::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: #b23c35;
}

.family-message-list-empty {
  color: #667168;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent 160px),
    var(--family-chat-canvas, #f5f2eb);
}

@media (max-width: 900px) {
  .family-message-list {
    padding-inline: 22px;
  }

  .family-chat-message {
    width: 92%;
  }

  .family-chat-voice {
    grid-template-columns: 54px minmax(96px, 1fr) auto;
    gap: 14px;
  }
}

@media (max-height: 650px) {
  .family-message-list {
    padding-block: 14px 30px;
    gap: 16px;
  }

  .family-chat-message {
    gap: 4px;
  }

  .family-chat-voice {
    min-height: 82px;
    padding-block: 10px;
  }

  .family-chat-voice-icon {
    width: 52px;
    height: 52px;
  }

  .family-chat-text {
    min-height: 68px;
    padding-block: 13px;
    line-height: 1.45;
  }
}

/* Elder reminder list: a calm household notice board, separate from the home voice panel. */
body[data-view="reminder"]:not(.reminder-alert-open) {
  --reminder-list-canvas: #f3f0e9;
  --reminder-list-surface: #fffefa;
  --reminder-list-ink: #22241f;
  --reminder-list-muted: #6c726a;
  --reminder-list-line: #d9d3c7;
  --reminder-list-accent: #a46a19;
  background: var(--reminder-list-canvas);
}

body[data-view="reminder"]:not(.reminder-alert-open) .robot-body {
  width: 100vw;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  display: block;
  overflow: hidden;
  color: var(--reminder-list-ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent 210px),
    var(--reminder-list-canvas);
}

body[data-view="reminder"]:not(.reminder-alert-open) .screen-header,
body[data-view="reminder"]:not(.reminder-alert-open) .voice-panel {
  display: none !important;
}

body[data-view="reminder"]:not(.reminder-alert-open) #reminderView[data-reminder-mode="list"].active {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  display: grid;
  grid-template-rows: 92px minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  color: var(--reminder-list-ink);
  background: transparent;
}

.reminder-list-topbar {
  min-width: 0;
  min-height: 92px;
  padding: 12px 30px;
  border-bottom: 1px solid var(--reminder-list-line, #d9d3c7);
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  background: rgba(255, 254, 250, 0.96);
}

.reminder-list-back {
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--reminder-list-line, #d9d3c7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--reminder-list-ink, #22241f);
  background: #ffffff;
  box-shadow: 0 2px 7px rgba(61, 50, 33, 0.08);
}

.reminder-list-back svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.35;
}

.reminder-list-back:focus-visible,
body[data-view="reminder"] .reminder-list-open:focus-visible,
body[data-view="reminder"] .reminder-list-close:focus-visible {
  outline: 4px solid #2a8757;
  outline-offset: 3px;
}

.reminder-list-heading {
  min-width: 0;
  text-align: center;
}

.reminder-list-heading span {
  display: block;
  margin-bottom: 2px;
  color: var(--reminder-list-accent, #a46a19);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.reminder-list-heading h1 {
  margin: 0;
  color: var(--reminder-list-ink, #22241f);
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: clamp(29px, 2.7vw, 36px);
  font-weight: 850;
  line-height: 1.08;
}

.reminder-list-summary {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #dfd3bd;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #78501a;
  background: #f8f0df;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}

body[data-view="reminder"]:not(.reminder-alert-open) #reminderView[data-reminder-mode="list"] > .active-reminder-card,
body[data-view="reminder"]:not(.reminder-alert-open) #reminderView[data-reminder-mode="list"] > .control-row {
  display: none !important;
}

body.reminder-alert-open[data-view="reminder"] .reminder-list-topbar {
  display: none;
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list {
  min-width: 0;
  min-height: 0;
  padding: 22px 34px 34px;
  display: grid;
  grid-auto-rows: minmax(108px, auto);
  align-content: start;
  gap: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-item {
  width: 100%;
  min-height: 108px;
  padding: 0 18px 0 0;
  border: 1px solid var(--reminder-list-line);
  border-left: 6px solid #c18a3a;
  border-radius: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 16px;
  color: var(--reminder-list-ink);
  background: var(--reminder-list-surface);
  box-shadow: 0 3px 10px rgba(61, 50, 33, 0.08);
  text-align: left;
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-item.is-unread {
  border-color: rgba(190, 48, 41, 0.42);
  border-left-color: #be3029;
  background:
    linear-gradient(90deg, rgba(190, 48, 41, 0.055), transparent 160px),
    var(--reminder-list-surface);
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-open {
  min-width: 0;
  min-height: 106px;
  padding: 18px 18px 18px 24px;
  border: 0;
  display: grid;
  grid-template-columns: minmax(148px, 0.26fr) minmax(220px, 1fr);
  align-items: center;
  gap: 22px;
  color: inherit;
  background: transparent;
  text-align: left;
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-open strong {
  color: var(--reminder-list-ink);
  font-size: clamp(23px, 2.3vw, 30px);
  font-weight: 900;
  line-height: 1.2;
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-open > span {
  margin: 0;
  color: #343831;
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 800;
  line-height: 1.28;
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-status {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #e0d2b8;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #78501a;
  background: #f8f0df;
  font-size: 17px;
  font-weight: 850;
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-close {
  min-width: 112px;
  min-height: 58px;
  padding: 0 20px;
  border: 2px solid #ae3d34;
  border-radius: 999px;
  color: #942f28;
  background: #fff7f5;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(90, 28, 24, 0.08);
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-close:active {
  transform: translateY(1px);
  background: #fbe9e6;
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-close:disabled {
  border-color: #d4c6c2;
  color: #82736f;
  background: #eee9e6;
  box-shadow: none;
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-item[data-reminder-status="timeout"] .reminder-list-status {
  border-color: #edc7c4;
  color: #9d2d28;
  background: #fff0ee;
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-item[data-reminder-status="scheduled"] .reminder-list-status {
  border-color: #c8ddd4;
  color: #27684e;
  background: #edf7f2;
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-unread-dot {
  width: 20px;
  height: 20px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  display: block;
  justify-self: end;
  background: #d52323;
  box-shadow: 0 1px 6px rgba(78, 12, 12, 0.3);
}

body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .family-content-empty {
  width: min(100%, 760px);
  min-height: 260px;
  margin: 48px auto 0;
  border-color: #d2cabd;
  color: var(--reminder-list-muted);
  background: rgba(255, 254, 250, 0.82);
  font-size: 24px;
}

@media (max-width: 760px) {
  .reminder-list-topbar {
    grid-template-columns: 56px minmax(0, 1fr);
    padding-inline: 18px;
  }

  .reminder-list-summary {
    display: none;
  }

  body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list {
    padding: 16px;
  }

  body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-item {
    grid-template-columns: minmax(0, 1fr) auto 24px;
    gap: 12px;
    padding-right: 14px;
  }

  body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-open {
    grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr);
    gap: 12px;
    padding-inline: 16px;
  }

  body[data-view="reminder"]:not(.reminder-alert-open) .reminder-list .reminder-list-close {
    min-width: 96px;
    padding-inline: 14px;
  }
}