:root {
  --mobile-bg: #f5f9fd;
  --mobile-card: rgba(255,255,255,.74);
  --mobile-line: rgba(126,157,191,.18);
  --mobile-text: #34445e;
  --mobile-muted: #8b9ab0;
  --mobile-blue: #78a9ee;
  --mobile-pink: #f3a7b6;
  --mobile-shadow: 0 8px 28px rgba(123,157,196,.12);
}

*, *::before, *::after { font-style: normal !important; }
body { background: linear-gradient(180deg,#f8fbff 0%,#eef6fc 100%); color:var(--mobile-text); }
.page-content { padding:16px 14px 24px; gap:14px; }
.home-mobile-layout { background:radial-gradient(circle at 50% 0%,rgba(196,223,255,.34),transparent 34%),linear-gradient(180deg,#f9fcff,#eef6fc); }
.home-topline { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; }
.home-date-pill,.home-weather-pill,.home-space-pill { min-height:38px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 13px; border:1px solid var(--mobile-line); border-radius:22px; background:rgba(255,255,255,.62); box-shadow:var(--mobile-shadow); color:var(--mobile-text); font-size:13px; white-space:nowrap; }
.home-date-pill { justify-content:flex-start; }
.home-space-pill { justify-content:flex-end; }
.home-weather-pill span:first-child { color:#f2b34d; font-size:18px; }
.home-relationship-card,.home-section-card,.home-mini-card { border:1px solid rgba(255,255,255,.92); border-radius:26px; background:var(--mobile-card); box-shadow:var(--mobile-shadow); backdrop-filter:blur(18px); }
.home-relationship-card { padding:28px 18px 24px; text-align:center; }
.home-identity-row { display:flex; align-items:center; justify-content:center; gap:8px; }
.home-identity { width:54px; height:54px; border-radius:50%; border:1px solid rgba(255,255,255,.95); box-shadow:0 4px 14px rgba(125,161,205,.16); font-size:27px; cursor:pointer; }
.identity-jianjian { background:linear-gradient(135deg,#e9f4ff,#b9d8ff); color:#78a9ee; }
.identity-xiaoke { background:linear-gradient(135deg,#fff1f5,#ffd4df); color:#ed9eaf; }
.identity-name { color:var(--mobile-text); font-size:14px; }
.identity-link { color:#a3b0c3; font-size:20px; margin:0 6px; }
.home-days-line { display:flex; align-items:baseline; justify-content:center; gap:7px; margin-top:22px; font-size:20px; }
.home-days-line strong { color:#6d99de; font-size:46px; font-weight:500; line-height:1; }
.home-card-caption { margin-top:12px; color:var(--mobile-muted); font-size:13px; }
.legacy-home-values,.legacy-calendar { display:none !important; }
.home-section-card { padding:17px 14px; }
.home-section-title { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.home-section-title strong { font-size:18px; font-weight:600; }
.home-section-title button { margin-left:auto; border:0; background:transparent; color:#8ba4c7; font:inherit; cursor:pointer; }
.section-mark { color:#719fe9; font-size:20px; }
.memory-preview { display:grid; gap:8px; }
.memory-item { padding:13px 14px; border:1px solid rgba(126,157,191,.12); border-radius:16px; background:rgba(255,255,255,.55); color:var(--mobile-text); font-size:14px; }
.discovery-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.discovery-item { min-height:132px; padding:13px; border-radius:18px; border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.54); }
.discovery-whale { border-color:rgba(120,169,238,.28); }
.discovery-crab { border-color:rgba(243,167,182,.32); }
.discovery-icon { font-size:30px; margin-bottom:8px; }
.discovery-item strong { font-size:14px; font-weight:600; }
.discovery-item p { min-height:40px; margin:8px 0 6px; color:var(--mobile-text); font-size:13px; line-height:1.55; }
.discovery-item small { color:var(--mobile-muted); font-size:11px; }
.home-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.home-mini-card { min-height:120px; padding:16px; }
.mini-icon { display:block; color:#79a7ec; font-size:24px; margin-bottom:4px; }
.home-mini-card strong { display:block; font-size:18px; font-weight:600; }
.home-mini-card p { margin:8px 0 0; color:var(--mobile-muted); font-size:12px; line-height:1.5; }
.home-mini-card button { margin-top:11px; padding:0; border:0; background:transparent; color:#769de0; font:inherit; cursor:pointer; }
.bottom-nav { padding:8px 10px max(8px,env(safe-area-inset-bottom)); background:rgba(248,252,255,.9); }
.nav-inner { max-width:520px; padding:6px; border:1px solid rgba(255,255,255,.95); border-radius:24px; background:rgba(255,255,255,.72); box-shadow:0 8px 24px rgba(123,157,196,.14); }
.nav-item,.nav-item.nav-main { width:auto; height:auto; flex:1; margin:0; border-radius:18px; padding:8px 4px 6px; background:transparent; color:#9aa7b9; box-shadow:none; }
.nav-item.nav-main .nav-icon,.nav-item .nav-icon { font-size:18px; }
.nav-item.nav-main span:not(.nav-icon) { color:inherit; font-size:11px; }
.nav-item.active { color:#6d99de; background:rgba(219,234,255,.64); }
.bottom-footer { padding:10px 12px max(12px,env(safe-area-inset-bottom)); background:rgba(248,252,255,.9); color:#8797ab; font-size:11px; line-height:1.8; letter-spacing:0; }
.bottom-footer.beian a { color:#8797ab; }
.settings-list,.func-list,#memoryContent { border-radius:24px; }
.setting-item,.func-item,.memory-item { border-color:var(--mobile-line); border-radius:18px; }
.setting-section .section-title { color:#8aa0bc; font-style:normal; }
.func-list { display:grid; gap:18px; }
.func-group { display:grid; gap:8px; }
.func-group-title { margin:0 4px; color:#8aa0bc; font-size:13px; font-weight:600; }
.func-group-items { display:grid; gap:8px; }
.func-item { width:100%; display:flex; align-items:center; justify-content:space-between; padding:15px 16px; border:1px solid var(--mobile-line); background:rgba(255,255,255,.68); color:var(--mobile-text); font:inherit; text-align:left; cursor:pointer; box-shadow:0 4px 14px rgba(123,157,196,.06); }
.func-item span { color:#9aadc5; font-size:20px; }
#memoryContent { display:grid; gap:12px; }
#memoryContent .memory-tabs, #memoryContent .memory-filter, #memoryContent .memory-toolbar { background:rgba(255,255,255,.62); border-color:var(--mobile-line); border-radius:18px; }
.memory-module { display:grid; gap:12px; }
.function-tabs { padding:5px; border:1px solid var(--mobile-line); border-radius:18px; background:rgba(255,255,255,.6); }
.function-tab { border-radius:14px; color:#9aa8bb; font-size:13px; }
.function-tab.active { background:rgba(219,234,255,.78); color:#6d99de; }
.search-box { padding:10px 13px; border:1px solid var(--mobile-line); border-radius:17px; background:rgba(255,255,255,.68); }
.search-input { border:0; background:transparent; outline:none; color:var(--mobile-text); font:inherit; }
.filters { gap:7px !important; }
.filter-btn { border:1px solid var(--mobile-line); border-radius:14px; padding:6px 10px; background:rgba(255,255,255,.68); color:#8b9ab0; }
.filter-btn.active { background:#e4efff; color:#6d99de; }
.memory-list { display:grid; gap:9px; }
.memory-card { min-height:72px; border:1px solid var(--mobile-line); border-radius:18px; background:rgba(255,255,255,.7); box-shadow:0 4px 14px rgba(123,157,196,.06); }
.memory-card .card-summary { color:var(--mobile-text); font-size:15px; font-weight:600; }
.memory-card .card-time { color:#9aa8bb; }
.settings-list { display:grid; gap:10px; }
.setting-item { background:rgba(255,255,255,.68); box-shadow:0 4px 14px rgba(123,157,196,.06); }
.setting-label { font-weight:600; }
.setting-hint { color:#9aa8bb; }
.toggle-switch { border-color:rgba(120,169,238,.4); }
@media (max-width:380px) { .home-topline { grid-template-columns:1fr 1fr; } .home-space-pill { grid-column:1 / -1; justify-content:center; } .home-days-line { font-size:17px; } .home-days-line strong { font-size:40px; } }

/* Crystal jelly glass refinement */
:root {
  --mobile-card: rgba(255, 255, 255, .86);
  --mobile-line: rgba(255, 255, 255, .98);
  --mobile-shadow: 0 12px 30px rgba(135, 171, 212, .13), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.home-mobile-layout {
  background: radial-gradient(circle at 12% 4%, rgba(255, 255, 255, .96), transparent 28%), radial-gradient(circle at 90% 18%, rgba(214, 235, 255, .48), transparent 30%), linear-gradient(180deg, #fbfdff 0%, #f0f7ff 100%);
}

.home-date-pill, .home-weather-pill, .home-space-pill, .home-relationship-card, .home-section-card, .home-mini-card, .nav-inner {
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .68));
  box-shadow: var(--mobile-shadow);
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
}

.home-relationship-card, .home-section-card, .home-mini-card { position: relative; overflow: hidden; }
.home-relationship-card::before, .home-section-card::before, .home-mini-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .56), transparent 42%); }
.home-relationship-card > *, .home-section-card > *, .home-mini-card > * { position: relative; z-index: 1; }

.home-identity { display:grid; place-items:center; padding:0; overflow:hidden; font-size:0; background: rgba(255, 255, 255, .84); box-shadow: 0 7px 16px rgba(125, 161, 205, .14), inset 0 1px 0 rgba(255, 255, 255, .98); }
.home-identity::before, .discovery-icon::before { display: block; line-height: 1; }
.identity-jianjian::before, .discovery-whale .discovery-icon::before { content: "🐋"; }
.identity-xiaoke::before, .discovery-crab .discovery-icon::before { content: "🦀"; }
.home-identity::before { content:""; display:block; width:38px; height:30px; margin:auto; background:center/contain no-repeat; }
.identity-jianjian::before { background-image:url("/static/whale.svg"); }
.identity-xiaoke::before { background-image:url("/static/crab.svg"); }

.discovery-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 17px; font-size: 0; background: rgba(255, 255, 255, .76); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 6px 14px rgba(130, 164, 207, .1); }
.discovery-icon img { width: 34px; height: 34px; display: block; }
.discovery-icon::before { content:none !important; }
.discovery-item { background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .58)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94), 0 7px 16px rgba(130, 164, 207, .08); }
.discovery-whale .discovery-icon { background: linear-gradient(145deg, #f7fcff, #e4f1ff); }
.discovery-crab .discovery-icon { background: linear-gradient(145deg, #fffafd, #ffedf3); }

/* Hand-drawn navigation icons and viewport-safe layout */
html, body { height: 100%; }
body { min-height: 100dvh; height: 100dvh; }
.page { min-height: 0; }
.page-content { min-height: 0; padding-bottom: 26px; overscroll-behavior: contain; }
.bottom-nav { flex: 0 0 auto; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.bottom-footer { flex: 0 0 auto; }

.nav-item .nav-icon { display: none !important; }
.nav-item::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .72;
}
.nav-item.active::before { opacity: 1; }
.nav-item[data-nav="home"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d99de' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.8 10.7 12 4l8.2 6.7v8.6a1.7 1.7 0 0 1-1.7 1.7H5.5a1.7 1.7 0 0 1-1.7-1.7z'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E"); }
.nav-item[data-nav="memory"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d99de' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h11.5A2.5 2.5 0 0 1 19 7v12.5H7.5A2.5 2.5 0 0 1 5 17z'/%3E%3Cpath d='M5 4.5v13A2.5 2.5 0 0 0 7.5 20H19M8.5 8h7M8.5 11.5h7'/%3E%3C/svg%3E"); }
.nav-item[data-nav="chat"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.2a7.2 7.2 0 0 1-7.8 7.1L7 20.5l.8-2.8A7.2 7.2 0 1 1 20 11.2Z'/%3E%3Cpath d='M8.5 11.5h.1M12 11.5h.1M15.5 11.5h.1'/%3E%3C/svg%3E"); }
.nav-item[data-nav="func"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d99de' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6z'/%3E%3Cpath d='m18.5 3.5.5 2 2 .5-2 .5-.5 2-.5-2-2-.5 2-.5z'/%3E%3C/svg%3E"); }
.nav-item[data-nav="settings"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d99de' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-1.7 1.7-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.5v.2h-2.4v-.2a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.9.3l-.1.1-1.7-1.7.1-.1A1.7 1.7 0 0 0 8.4 15a1.7 1.7 0 0 0-1.5-1H6.7v-2.4h.2a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.9L8 8.6l1.7-1.7.1.1a1.7 1.7 0 0 0 1.9.3 1.7 1.7 0 0 0 1-1.5v-.2h2.4v.2a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.9-.3l.1-.1 1.7 1.7-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.5 1h.2V14h-.2a1.7 1.7 0 0 0-1.5 1Z'/%3E%3C/svg%3E"); }
.nav-item.nav-main::before { width: 24px; height: 24px; }

@media (max-height: 700px) {
  .page-content { padding-top: 10px; gap: 9px; }
  .home-relationship-card { padding-top: 18px; padding-bottom: 16px; }
  .home-days-line { margin-top: 12px; }
  .home-days-line strong { font-size: 38px; }
  .home-card-caption { margin-top: 7px; }
  .home-section-card { padding-top: 12px; padding-bottom: 12px; }
  .discovery-item { min-height: 112px; }
  .home-mini-card { min-height: 96px; padding: 12px; }
}

/* Chat gets its own scroll region instead of being clipped by the page shell */
@supports (height: 100svh) {
  body { min-height: 100svh; height: 100svh; }
}

#page-chat .page-content {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 12px 12px 8px;
  gap: 0;
}

#page-chat .chat-area {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 6px 2px 14px;
  scrollbar-width: thin;
}

#page-chat .chat-area::-webkit-scrollbar { width: 3px; }
#page-chat .chat-area::-webkit-scrollbar-thumb { background: rgba(125, 169, 225, .28); border-radius: 4px; }
#page-chat .msg { width: fit-content; max-width: min(88%, 640px); margin-bottom: 9px; }
#page-chat .msg.user { align-self: flex-end; }
#page-chat .msg.bot { align-self: flex-start; }

#page-chat .input-bar {
  flex: 0 0 auto;
  padding: 8px 10px max(8px, env(safe-area-inset-bottom));
  background: rgba(250, 253, 255, .92);
  border-top: 1px solid rgba(255, 255, 255, .96);
  box-shadow: 0 -8px 20px rgba(135, 171, 212, .08);
}

#page-chat .input-field {
  min-width: 0;
  background: rgba(255, 255, 255, .84);
  border-color: rgba(255, 255, 255, .98);
}

@media (max-width: 380px) {
  #page-chat .input-bar { gap: 5px; padding-left: 6px; padding-right: 6px; }
  #page-chat .mic-btn, #page-chat .plus-btn, #page-chat .send-btn { width: 34px; height: 34px; }
  #page-chat .input-field { height: 34px; padding: 0 12px; font-size: 13px; }
}

/* Never compress home cards; let the home content scroll naturally */
.home-mobile-layout > * { flex: 0 0 auto; }
.home-mobile-layout > .legacy-calendar { display: none !important; }
.home-mobile-layout { overflow-y: auto; overflow-x: hidden; }

/* Keep the chat shortcut dark enough for its white hand-drawn icon */
.nav-item.nav-main,
.nav-item.nav-main.active,
.nav-item.nav-main:hover {
  background: linear-gradient(145deg, #86b5ef, #6d99de);
  color: #fff;
  box-shadow: 0 8px 18px rgba(109, 153, 222, .28);
}

/* Lighter settings glyph with a smaller, calmer center */
.nav-item[data-nav="settings"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d99de' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8.7a3.3 3.3 0 1 0 0 6.6 3.3 3.3 0 0 0 0-6.6Z'/%3E%3Cpath d='m19.1 13.3 1.1.8-1.5 2.6-1.3-.5a7.7 7.7 0 0 1-1.5.9l-.2 1.4h-3l-.2-1.4a7.7 7.7 0 0 1-1.5-.9l-1.3.5-1.5-2.6 1.1-.8a6.8 6.8 0 0 1 0-1.8l-1.1-.8 1.5-2.6 1.3.5a7.7 7.7 0 0 1 1.5-.9l.2-1.4h3l.2 1.4a7.7 7.7 0 0 1 1.5.9l1.3-.5 1.5 2.6-1.1.8a6.8 6.8 0 0 1 0 1.8Z'/%3E%3C/svg%3E"); }

/* Simple settings sliders: no overlapping gear paths */
.nav-item[data-nav="settings"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d99de' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3Ccircle cx='9' cy='7' r='1.8' fill='%23fff'/%3E%3Ccircle cx='15' cy='12' r='1.8' fill='%23fff'/%3E%3Ccircle cx='11' cy='17' r='1.8' fill='%23fff'/%3E%3C/svg%3E"); }

/* Only the selected navigation item gets the blue surface */
.nav-item.nav-main,
.nav-item.nav-main:hover {
  background: rgba(255, 255, 255, .76);
  color: #9aa7b9;
  box-shadow: 0 5px 14px rgba(130, 164, 207, .1);
}
.nav-item.nav-main.active,
.nav-item.nav-main.active:hover {
  background: linear-gradient(145deg, #86b5ef, #6d99de);
  color: #fff;
  box-shadow: 0 8px 18px rgba(109, 153, 222, .28);
}
.nav-item[data-nav="chat"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d99de' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.2a7.2 7.2 0 0 1-7.8 7.1L7 20.5l.8-2.8A7.2 7.2 0 1 1 20 11.2Z'/%3E%3Cpath d='M8.5 11.5h.1M12 11.5h.1M15.5 11.5h.1'/%3E%3C/svg%3E"); }
.nav-item.nav-main.active[data-nav="chat"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.2a7.2 7.2 0 0 1-7.8 7.1L7 20.5l.8-2.8A7.2 7.2 0 1 1 20 11.2Z'/%3E%3Cpath d='M8.5 11.5h.1M12 11.5h.1M15.5 11.5h.1'/%3E%3C/svg%3E"); }

#memoryContent > .back-arrow,
#memoryContent .memory-module > .back-arrow {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0 0 2px;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
}

/* Chat companion header and message surfaces */
#page-chat { background: linear-gradient(180deg, #f9fcff 0%, #eef6ff 100%); }
.chat-topbar {
  display: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  min-height: 66px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .96);
  background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .62));
  box-shadow: 0 5px 16px rgba(135, 171, 212, .08);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}
.chat-topbar { display:flex !important; }
.chat-companion-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: linear-gradient(145deg, #f8fcff, #e0efff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 5px 12px rgba(125, 161, 205, .12);
  font-size: 23px;
}
.chat-companion-icon img { width:34px; height:34px; display:block; }
.chat-companion-copy { display: flex; flex-direction: column; gap: 1px; }
.chat-companion-copy strong { color: var(--mobile-text); font-size: 16px; font-weight: 650; }
.chat-companion-copy span { color: var(--mobile-muted); font-size: 11px; }
.chat-status-dot { width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: #7fc596; box-shadow: 0 0 0 4px rgba(127, 197, 150, .14); }
#page-chat .msg { border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 5px 14px rgba(135, 171, 212, .08); }
#page-chat .msg.user { background: linear-gradient(145deg, #e5f1ff, #d7e9ff); color: #4e6f9d; border-radius: 18px 18px 5px 18px; }
#page-chat .msg.bot:not(.thinking) { background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .72)); color: var(--mobile-text); border-color: rgba(255, 255, 255, .98); border-radius: 18px 18px 18px 5px; }
#page-chat .msg.bot.thinking { background: rgba(255, 255, 255, .58); color: var(--mobile-muted); border-style: dashed; }
#page-chat .mic-btn, #page-chat .plus-btn { background: rgba(255, 255, 255, .78); color: #7f9cc3; border: 1px solid rgba(255, 255, 255, .96); }
#page-chat .send-btn { background: linear-gradient(145deg, #86b5ef, #6d99de); box-shadow: 0 5px 12px rgba(109, 153, 222, .2); }
@media (max-width: 380px) { .chat-topbar { min-height: 58px; padding: 7px 12px; } .chat-companion-icon { width: 36px; height: 36px; font-size: 20px; } }

/* Memory theme: light jelly starmap */
.memory-theme-module { gap: 12px; }
.memory-theme-heading { display:flex; flex-direction:column; gap:4px; padding:2px 4px 0; }
.memory-theme-heading strong { color:var(--mobile-text); font-size:21px; font-weight:650; }
.memory-theme-heading span { color:#9aaec8; font-size:12px; }
.memory-starmap { position:relative; min-height:390px; overflow:hidden; border:1px solid rgba(255,255,255,.96); border-radius:28px; background:radial-gradient(circle at 50% 45%, rgba(196,219,255,.86), rgba(231,241,255,.7) 45%, rgba(255,255,255,.78) 78%); box-shadow:0 10px 30px rgba(123,157,196,.12), inset 0 1px 0 rgba(255,255,255,.96); }
.memory-starmap::before, .memory-starmap::after { content:""; position:absolute; inset:12% 7%; border:1px solid rgba(255,255,255,.7); border-radius:50%; transform:rotate(-12deg); }
.memory-starmap::after { inset:22% 18%; transform:rotate(18deg); border-style:dashed; opacity:.7; }
.memory-orbit { position:absolute; left:50%; top:48%; border:1px solid rgba(255,255,255,.64); border-radius:50%; transform:translate(-50%,-50%) rotate(-12deg); pointer-events:none; }
.orbit-one { width:78%; height:54%; }
.orbit-two { width:51%; height:38%; transform:translate(-50%,-50%) rotate(28deg); border-style:dashed; }
.memory-starmap-core { position:absolute; left:50%; top:48%; z-index:2; display:grid; place-items:center; width:50px; height:50px; transform:translate(-50%,-50%); color:#fff; font-size:31px; border-radius:50%; background:rgba(255,255,255,.4); box-shadow:0 0 0 9px rgba(255,255,255,.16), 0 0 24px rgba(132,174,236,.55); }
.memory-star-lines { position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; pointer-events:none; }
.memory-star-lines line { stroke:#86b5ef; stroke-width:.28; stroke-linecap:round; opacity:.42; stroke-dasharray:2 2; animation:memory-line-flow 7s linear infinite; }
.memory-star { position:absolute; z-index:3; display:grid; place-items:center; width:calc(var(--star-size) + 22px); height:calc(var(--star-size) + 22px); transform:translate(-50%,-50%); padding:0; border:0; border-radius:50%; color:var(--star-color); background:rgba(255,255,255,.18); cursor:pointer; filter:drop-shadow(0 3px 8px color-mix(in srgb, var(--star-color) 48%, transparent)); transition:transform .2s ease, background .2s ease; }
.memory-star:hover, .memory-star:focus-visible { transform:translate(-50%,-50%) scale(1.16); background:rgba(255,255,255,.55); outline:none; }
.memory-star-shape { font-size:var(--star-size); line-height:1; text-shadow:0 0 12px currentColor; }
@keyframes memory-line-flow { to { stroke-dashoffset:-16; } }
@keyframes memory-star-breathe { 0%,100% { filter:drop-shadow(0 3px 8px rgba(134,181,239,.3)); } 50% { filter:drop-shadow(0 3px 14px rgba(134,181,239,.7)); } }
.memory-star { animation:memory-star-breathe 4.8s ease-in-out infinite; }
.memory-theme-legend { display:flex; flex-wrap:wrap; gap:8px 14px; padding:0 4px; color:#8fa5c0; font-size:11px; }
.memory-theme-legend span { display:inline-flex; align-items:center; gap:5px; }
.legend-dot { width:7px; height:7px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.55); }
.legend-blue { background:#86b5ef; }
.legend-lilac { background:#a9a2e8; }
.legend-coral { background:#f0a6b5; }
.memory-theme-empty { padding:14px; color:#95a8bf; text-align:center; font-size:13px; }
.memory-login-card { max-width:360px; margin:clamp(50px,16vh,120px) auto 30px; padding:26px 22px; border:1px solid rgba(255,255,255,.9); border-radius:22px; background:rgba(255,255,255,.72); box-shadow:0 10px 28px rgba(123,157,196,.12); text-align:center; }
.memory-login-mark { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 14px; border-radius:50%; background:#e4efff; color:#6d99de; font-size:24px; }
.memory-login-card h2 { margin:0 0 8px; color:var(--mobile-text); font-size:19px; font-weight:650; }
.memory-login-card p { margin:0 0 18px; color:#91a5bf; font-size:13px; line-height:1.7; }
.memory-login-card input { width:100%; height:44px; padding:0 13px; border:1px solid var(--mobile-line); border-radius:13px; background:rgba(255,255,255,.82); color:var(--mobile-text); font:inherit; outline:none; }
.memory-login-card button { width:100%; height:44px; margin-top:10px; border:0; border-radius:13px; background:#7da9e5; color:#fff; font:inherit; cursor:pointer; box-shadow:0 5px 12px rgba(109,153,222,.18); }
.memory-login-error { min-height:20px; margin-top:9px; color:#c87587; font-size:12px; }
@media (max-width:380px) { .memory-starmap { min-height:330px; border-radius:24px; } }

/* Memory theme: layered memo wall */
.memory-board { position:relative; min-height:720px; overflow:hidden; border:1px solid rgba(193,207,224,.7); border-radius:20px; background:linear-gradient(145deg,#e7eef7,#dce7f3); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px rgba(116,145,178,.1); }
.memory-board::before { content:""; position:absolute; inset:0; opacity:.38; background-image:linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:24px 24px; pointer-events:none; }
.memory-board-lines { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.memory-board-lines line { stroke:#7197ca; stroke-width:.32; stroke-linecap:round; opacity:.5; }
.memory-note { position:absolute; display:flex; flex-direction:column; align-items:flex-start; width:var(--note-width,36%); min-height:var(--note-height,112px); padding:26px 12px 12px; transform:rotate(var(--note-rotation)); border:1px solid color-mix(in srgb, var(--note-accent,#8bb2e8) 42%, white); border-top:3px solid var(--note-accent,#8bb2e8); border-radius:5px; background:var(--note-bg,#f6faff); color:var(--mobile-text); box-shadow:4px 7px 0 color-mix(in srgb, var(--note-accent,#8bb2e8) 24%, transparent), 0 8px 18px rgba(93,122,157,.16); cursor:pointer; text-align:left; transition:transform .2s ease, box-shadow .2s ease; }
.memory-note:hover, .memory-note:focus-visible { z-index:20 !important; transform:rotate(0deg) translateY(-4px) scale(1.04); box-shadow:6px 12px 20px rgba(93,122,157,.22); outline:none; }
.memory-note-featured { width:43%; min-height:154px; left:29% !important; top:39% !important; background:var(--note-bg,#e7f1ff); box-shadow:5px 9px 0 color-mix(in srgb, var(--note-accent,#739edf) 28%, transparent), 0 12px 24px rgba(93,122,157,.2); }
.memory-note strong { width:100%; overflow:hidden; color:#516f9a; font-size:14px; font-weight:650; line-height:1.4; text-overflow:ellipsis; white-space:nowrap; }
.memory-note-featured strong { color:#416695; font-size:16px; }
.memory-note-rule { width:100%; height:1px; margin:8px 0 10px; background:rgba(102,139,190,.26); }
.memory-note-meta { margin-top:auto; color:#91a5bf; font-size:10px; }
.memory-pin { position:absolute; left:50%; top:-13px; width:25px; height:25px; transform:translateX(-50%); border:1px solid rgba(75,119,183,.45); border-radius:50%; background:radial-gradient(circle at 35% 28%,#e8f3ff 0 14%,#82aee5 36%,#567db6 100%); box-shadow:0 3px 4px rgba(63,94,136,.28), inset 0 1px 1px rgba(255,255,255,.8); }
.memory-pin::after { content:""; position:absolute; left:50%; top:21px; width:2px; height:9px; transform:translateX(-50%); background:#6e91bd; border-radius:2px; }
.memory-theme-legend { color:#7f96b3; }
@media (max-width:380px) { .memory-board { min-height:680px; } .memory-note { min-height:100px; width:calc(var(--note-width,36%) + 1%); padding:24px 9px 9px; } .memory-note strong { font-size:12px; } .memory-note-featured { min-height:140px; } }

/* Home: softer frosted surface, less bright white */
#page-home .home-mobile-layout { background:radial-gradient(circle at 12% 4%,rgba(255,255,255,.55),transparent 28%),radial-gradient(circle at 90% 18%,rgba(197,220,246,.38),transparent 30%),linear-gradient(180deg,#eef3f8 0%,#e1ebf5 100%); }
#page-home .home-date-pill, #page-home .home-weather-pill, #page-home .home-space-pill, #page-home .home-relationship-card, #page-home .home-section-card, #page-home .home-mini-card, #page-home .nav-inner { background:linear-gradient(135deg,rgba(245,248,252,.84),rgba(226,235,245,.7)); border-color:rgba(255,255,255,.72); box-shadow:0 10px 26px rgba(102,132,166,.13), inset 0 1px 0 rgba(255,255,255,.78); }
#page-home .home-relationship-card::before, #page-home .home-section-card::before, #page-home .home-mini-card::before { background:linear-gradient(120deg,rgba(255,255,255,.24),transparent 42%); }
#page-home .discovery-item { background:linear-gradient(145deg,rgba(244,248,252,.78),rgba(220,232,244,.62)); border-color:rgba(255,255,255,.68); }
#page-home .bottom-nav, #page-home .bottom-footer { background:rgba(231,239,247,.88); }

/* Site-wide visual baseline: follow the softened homepage frost */
:root { --mobile-card:rgba(238,243,248,.84); --mobile-bg:#e5edf5; }
.page:not(#page-home) { background:linear-gradient(180deg,#eef3f8 0%,#e1ebf5 100%); }
#page-chat { background:linear-gradient(180deg,#eef3f8 0%,#e1ebf5 100%) !important; }
#page-chat .input-bar { background:rgba(231,239,247,.9); border-top-color:rgba(255,255,255,.72); }
#page-memory .page-content, #page-func .page-content, #page-settings .page-content { background:transparent; }
#page-memory .function-tabs, #page-func .func-list, #page-settings .settings-list { background:rgba(238,243,248,.68); border-color:rgba(255,255,255,.72); }

/* Diary: a clear exit, stable mobile viewport, and soft homepage surfaces */
#page-miyulin .miyulin-page-content { display:flex; flex-direction:column; min-height:0; overflow:hidden; background:transparent; }
#page-miyulin .myl-topbar { display:flex; align-items:center; gap:10px; flex:0 0 auto; padding:12px 16px 8px; background:rgba(231,239,247,.9); border-bottom:1px solid rgba(255,255,255,.78); }
#page-miyulin .myl-back-button { display:grid; place-items:center; width:38px; height:38px; padding:0; border:1px solid rgba(255,255,255,.94); border-radius:13px; background:rgba(255,255,255,.68); color:#6d8ebd; font-size:25px; line-height:1; cursor:pointer; box-shadow:0 4px 12px rgba(115,145,182,.1); }
#page-miyulin .myl-back-button:active { transform:scale(.96); }

#page-miyulin .myl-back-button {
    width:36px; height:36px; padding:0; border:1px solid rgba(120,150,190,.28);
    border-radius:50%; background:rgba(255,255,255,.78); color:var(--accent);
    font-size:0; box-shadow:0 4px 14px rgba(100,130,170,.10);
}
#page-miyulin .myl-back-button::before { content:"←"; font-size:19px; }
#page-miyulin .myl-topbar-copy { display:flex; flex-direction:column; gap:2px; min-width:0; }
#page-miyulin .myl-topbar-copy strong { color:#516f9a; font-size:18px; font-weight:650; }
#page-miyulin .myl-topbar-copy span { overflow:hidden; color:#91a5bf; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
#page-miyulin .myl-header { background:linear-gradient(135deg,#8fb5dc 0%,#91b9c9 55%,#a8c9c3 100%); }
#page-miyulin .miyulin-page-content > .myl-header { display:none; }
#page-miyulin .myl-tabs { background:rgba(231,239,247,.7); }
#page-miyulin .myl-notebook-add { order:0; display:flex; align-items:center; gap:5px; flex:none; margin-left:0; padding:7px 10px 7px 8px; border:1px solid rgba(255,255,255,.9); border-radius:11px; background:rgba(255,255,255,.62); color:#6e8db7; font:inherit; cursor:pointer; box-shadow:0 4px 10px rgba(102,137,177,.1); }
#page-miyulin .myl-cloud-sync { order:1; }
#page-miyulin .myl-directory-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:14px 16px 2px; background:rgba(231,239,247,.7); color:#516f9a; }
#page-miyulin .myl-directory-heading strong { font-size:18px; font-weight:650; }
#page-miyulin .myl-directory-heading span { color:#91a5bf; font-size:11px; }
#page-miyulin .myl-notebook-add span { display:grid; place-items:center; width:18px; height:18px; border-radius:6px; background:#c7dbee; color:#5f82b0; font-size:17px; line-height:1; }
#page-miyulin .myl-notebook-add small { font-size:11px; white-space:nowrap; }
#page-miyulin .myl-notebook-add:active { transform:translateY(1px); }
#page-miyulin .myl-content { min-height:0; overflow-y:auto; overscroll-behavior:contain; background:transparent; }
#page-miyulin .myl-bottom-bar { background:rgba(231,239,247,.88); border-top-color:rgba(255,255,255,.78); }
#page-miyulin .myl-btn-danger { color:#b66f83; background:rgba(245,218,225,.78); }
#page-miyulin .myl-btn-danger:hover { background:rgba(239,196,208,.9); }
@media (max-width:520px) {
  #page-miyulin .myl-topbar { padding:10px 12px 7px; }
  #page-miyulin .myl-header { padding:16px 14px 13px; }
  #page-miyulin .myl-content { padding:12px; }
  #page-miyulin .myl-detail-actions { flex-wrap:wrap; }
  #page-miyulin .myl-detail-actions .myl-btn { min-width:calc(50% - 6px); }
}

/* Diary cover: simple paper object first, notebook contents after opening */
#page-miyulin .miyulin-page-content:not(.notebook-open) > .myl-header,
#page-miyulin .miyulin-page-content:not(.notebook-open) > .myl-directory-heading,
#page-miyulin .miyulin-page-content:not(.notebook-open) > .myl-tabs,
#page-miyulin .miyulin-page-content:not(.notebook-open) > .myl-content,
#page-miyulin .miyulin-page-content:not(.notebook-open) > .myl-bottom-bar { display:none; }
#page-miyulin .miyulin-page-content.notebook-open > .myl-cover { display:none; }
#page-miyulin .myl-cover { position:relative; display:flex; flex:1 1 auto; min-height:520px; margin:14px 16px 20px; overflow:hidden; border:1px solid rgba(255,255,255,.92); border-radius:18px 24px 24px 18px; background:linear-gradient(145deg,#e8f1f9 0%,#dce9f5 55%,#d3e3f0 100%); box-shadow:10px 14px 0 rgba(117,151,190,.12), 0 18px 34px rgba(97,132,170,.16), inset 0 1px 0 rgba(255,255,255,.94); }
#page-miyulin .myl-cover::before { content:""; position:absolute; inset:16px; border:1px solid rgba(112,150,192,.25); border-radius:12px 17px 17px 12px; pointer-events:none; }
#page-miyulin .myl-cover::after { content:""; position:absolute; right:-90px; bottom:-92px; width:260px; height:260px; border:1px solid rgba(255,255,255,.5); border-radius:50%; box-shadow:0 0 0 20px rgba(255,255,255,.08),0 0 0 42px rgba(255,255,255,.06); pointer-events:none; }
#page-miyulin .myl-cover-inner { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; width:100%; padding:68px 62px 92px 42px; }
#page-miyulin .myl-cover-kicker { color:#7896b8; font-size:10px; letter-spacing:2.8px; }
#page-miyulin .myl-cover h1 { margin:14px 0 10px; color:#4e709c; font-size:31px; font-weight:650; letter-spacing:2px; }
#page-miyulin .myl-cover p { max-width:240px; margin:0; color:#88a0bd; font-size:13px; line-height:1.8; }
#page-miyulin .myl-cover-open { display:flex; align-items:center; justify-content:space-between; width:176px; margin-top:30px; padding:11px 14px; border:1px solid rgba(255,255,255,.9); border-radius:12px; background:rgba(255,255,255,.66); color:#5f82b0; font:inherit; font-size:13px; cursor:pointer; box-shadow:0 7px 16px rgba(94,134,179,.12); }
#page-miyulin .myl-cover-open span { font-size:18px; line-height:1; }
#page-miyulin .myl-cover-open:active { transform:translateY(1px); }
#page-miyulin .myl-cover-bookmark { position:absolute; top:36px; right:0; z-index:2; padding:8px 11px 8px 14px; border-radius:10px 0 0 10px; background:#bed4e9; color:#6283aa; font-size:9px; letter-spacing:1.2px; box-shadow:0 3px 8px rgba(93,127,165,.12); }
#page-miyulin .myl-cover-index { position:absolute; right:8px; top:112px; z-index:3; display:flex; flex-direction:column; gap:14px; }
#page-miyulin .myl-index-dot { display:flex; align-items:center; gap:5px; min-width:42px; padding:0 0 0 5px; border:0; background:transparent; color:#7894b4; font:inherit; font-size:10px; cursor:pointer; }
#page-miyulin .myl-index-dot i { display:block; width:19px; height:19px; border:2px solid rgba(255,255,255,.86); border-radius:50%; box-shadow:0 3px 6px rgba(82,113,151,.2); }
#page-miyulin .myl-index-human i { background:#86b5ef; }
#page-miyulin .myl-index-jianjian i { background:#b2a9e7; }
#page-miyulin .myl-index-xiaoke i { background:#e5a7b4; }
#page-miyulin .myl-index-dot:active i { transform:scale(.9); }
#page-miyulin .myl-tab[data-tab="shared"] { display:none; }
@media (max-width:520px) {
  #page-miyulin .myl-directory-heading { padding:12px 12px 2px; }
  #page-miyulin .myl-directory-heading span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #page-miyulin .myl-cover { min-height:calc(100svh - 142px); margin:10px 12px 14px; }
  #page-miyulin .myl-cover-inner { padding:56px 44px 72px 28px; }
  #page-miyulin .myl-cover h1 { font-size:26px; }
  #page-miyulin .myl-cover-bookmark { top:28px; }
  #page-miyulin .myl-cover-index { top:96px; right:5px; }
}
#page-miyulin .myl-back-button {
  width:36px; height:36px; padding:0; border:1px solid rgba(120,150,190,.28);
  border-radius:50%; background:rgba(255,255,255,.78); color:var(--accent);
  font-size:0; box-shadow:0 4px 14px rgba(100,130,170,.10);
}
#page-miyulin .myl-back-button::before { content:"×"; font-size:22px; }