:root{
  color-scheme: light;
  --font-heading: var(--font-fraunces), "Fraunces", "Cormorant Garamond", Georgia, serif;
  --font-display: var(--font-bodoni), "Bodoni Moda", "Didot", Georgia, serif;
  --font-letter-drop: var(--font-cormorant), "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: var(--font-inter), "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-memory-title: var(--font-typewriter), var(--font-diary-cjk), "KaiTi", "STKaiti", serif;
  --background: #f3efeb;
  --background-alt: #eee8e3;
  --surface: #faf8f5;
  --surface-soft: #f8f5f1;
  --surface-muted: #e9e2dc;
  --text-primary: #2b2a28;
  --text-secondary: #7e766f;
  --text-muted: #aaa19a;
  --border-soft: rgba(43, 42, 40, 0.08);
  --border-medium: rgba(43, 42, 40, 0.14);
  --accent-blue: #c8d6e5;
  --accent-yellow: #ebcf8b;
  --accent-pink: #d9c7c3;
  --glass-light: rgba(255, 255, 255, 0.46);
  --glass-medium: rgba(255, 255, 255, 0.62);
  --glass-border: rgba(255, 255, 255, 0.58);
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --shadow-soft-card: 0 8px 24px rgba(43, 42, 40, 0.06);
  --shadow-card: 0 6px 16px rgba(43, 42, 40, 0.045);

  --bg-main: var(--background);
  --bg-soft: var(--background-alt);
  --surface-alt: #e7d7c8;
  --surface-pink: var(--accent-pink);
  --paper-warm: #e7d7c8;
  --blush: #e1c1b6;
  --clam-shell: #d4b2a8;
  --pale-silver: #cec6c3;
  --antique-silver: #b8b2aa;
  --warm-taupe: #8e7e73;
  --del-rio: #a38f86;
  --text-soft: var(--text-muted);
  --divider: #d8d0cb;
  --bubble-user: #e1c1b6;
  --bubble-companion: #f9f6f1;
  --accent: #8e7e73;
  --accent-strong: #a38f86;
  --icon: #8e7e73;
  --online-dot: #7e8b7a;

  --canvas-fog: var(--bg-soft);
  --canvas-warm: var(--surface-alt);
  --paper: var(--bg-main);
  --surface-soft: var(--bg-soft);
  --text-faint: var(--text-soft);
  --user-bubble: var(--bubble-user);
  --companion-bubble: var(--bubble-companion);
  --send-button: var(--accent);
  --accent-brown: var(--accent);
  --accent-brown-soft: var(--surface-alt);
  --accent-blue-gray: var(--accent-strong);
  --ink-blue: var(--icon);
  --accent-red: #b45e50;
  --success: var(--online-dot);
  --danger: #9b665e;
  --scrim: rgba(74, 65, 60, 0.22);
  --shadow-soft: var(--shadow-soft-card);
  --font-sans: var(--font-body);
  --font-serif: "Songti SC", "STSong", "Noto Serif SC",
    "Source Han Serif SC", "SimSun", serif;
  --font-serif-title: var(--font-serif);
  --font-chat: var(--font-sans);
  --font-literary: var(--font-serif);
}

*{
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body{
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: var(--canvas-fog);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body{
  min-height: 100dvh;
  overscroll-behavior: none;
  background:
    linear-gradient(150deg, rgba(237, 231, 218, 0.72), transparent 55%),
    var(--canvas-fog);
}

button,
input,
textarea,
select{
  font: inherit;
}

button,
a,
label,
summary,
input,
textarea,
select,
[role="button"]{
  touch-action: manipulation;
}

.appLaunchSkeleton{
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 24px;
  min-height: 100dvh;
  padding: calc(56px + env(safe-area-inset-top)) 22px calc(20px + env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 0%, rgba(225, 194, 125, 0.19), transparent 32%),
    linear-gradient(145deg, #eee7da, #f9f6f1 52%, #f1ece4);
}

.appLaunchSkeleton header{
  display: grid;
  gap: 12px;
}

.appLaunchSkeletonLine,
.appLaunchSkeletonHero,
.appLaunchSkeletonGrid i,
.appLaunchSkeleton nav i{
  display: block;
  border-radius: 999px;
  background: rgba(101, 91, 82, 0.12);
  animation: appSkeletonPulse 1.25s ease-in-out infinite alternate;
}

.anniversaryLoadingLine,
.anniversaryOverviewLoading i{
  display: block;
  border-radius: 999px;
  background: rgba(101, 91, 82, 0.12);
  animation: appSkeletonPulse 1.25s ease-in-out infinite alternate;
}

.anniversaryLoadingLine.isTitle{
  width: min(68%, 240px);
  height: 18px;
}

.anniversaryLoadingLine.isDate{
  width: min(46%, 170px);
  height: 9px;
}

.anniversaryOverviewLoading{
  display: grid;
  align-content: center;
  gap: 16px;
  min-height: 220px;
}

.anniversaryOverviewLoading i:nth-child(1){ width: 34%; height: 10px; }
.anniversaryOverviewLoading i:nth-child(2){ width: 72%; height: 26px; }
.anniversaryOverviewLoading i:nth-child(3){ width: 52%; height: 10px; }

.appLaunchSkeletonLine.isDate{ width: 34%; height: 9px; }
.appLaunchSkeletonLine.isTitle{ width: 56%; height: 44px; border-radius: 16px; }
.appLaunchSkeletonLine.isSubtitle{ width: 42%; height: 10px; }

.appLaunchSkeletonHero{
  height: min(28dvh, 250px);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 0 0 1px rgba(94, 84, 74, 0.08);
}

.appLaunchSkeletonGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 14px;
}

.appLaunchSkeletonGrid i{
  height: 92px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.28);
}

.appLaunchSkeleton nav{
  display: flex;
  justify-content: space-around;
  padding: 14px 12px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.3);
}

.appLaunchSkeleton nav i{
  width: 28px;
  height: 28px;
  background: rgba(101, 91, 82, 0.14);
}

.pwaUpdateReady{
  position: fixed;
  z-index: 10000;
  right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  left: 16px;
  padding: 12px 15px;
  border: 1px solid rgba(100, 90, 80, 0.14);
  border-radius: 16px;
  background: rgba(248, 244, 237, 0.92);
  color: rgba(55, 51, 48, 0.8);
  box-shadow: 0 12px 32px rgba(51, 45, 40, 0.13);
  font-size: 12px;
  line-height: 1.45;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pwaUpdateReady button{
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 11px;
  border: 0;
  border-radius: 999px;
  background: rgba(72, 65, 60, 0.9);
  color: #fff;
  font: inherit;
  font-weight: 650;
}

.appContent > *:not(.edgeSwipeBackSurface){
  animation: appViewEnter 180ms cubic-bezier(0.2, 0.72, 0.22, 1) both;
}

.conversationWindowSwipeShell,
.conversationSearchResult,
.journalHealthReceipt,
.journalLoveCard,
.checklistDateSection{
  content-visibility: auto;
  contain-intrinsic-size: auto 112px;
}

@keyframes appSkeletonPulse{
  from{ opacity: 0.48; }
  to{ opacity: 0.92; }
}

@keyframes appViewEnter{
  from{ opacity: 0; transform: translate3d(0, 8px, 0); }
  to{ opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce){
  .appLaunchSkeletonLine,
  .appLaunchSkeletonHero,
  .appLaunchSkeletonGrid i,
  .appLaunchSkeleton nav i,
  .appContent > *{
    animation: none;
  }
}

button{
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  padding: 10px 16px;
  background: var(--accent-brown);
  color: #fffdfa;
  font-weight: 650;
  cursor: pointer;
  transition:
    opacity 160ms ease,
    background-color 160ms ease,
    transform 160ms ease;
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled):active{
  transform: scale(0.98);
}

button:disabled{
  cursor: not-allowed;
  opacity: 0.43;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible{
  outline: 2px solid var(--accent-blue-gray);
  outline-offset: 2px;
}

input,
textarea,
select{
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--divider);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-primary);
  padding: 11px 13px;
  outline: none;
}

textarea{
  line-height: 1.55;
  resize: vertical;
}

::placeholder{
  color: var(--text-faint);
}

.mobileViewport{
  width: min(100%, 430px);
  height: 100dvh;
  min-height: 100svh;
  margin: 0 auto;
  background: var(--paper);
  box-shadow: 0 0 38px rgba(63, 68, 65, 0.07);
  overflow: clip;
  touch-action: pan-x pan-y;
}

.appShell{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: clip;
  background:
    linear-gradient(180deg, rgba(218, 229, 226, 0.42), transparent 42%),
    var(--paper);
}

.appHeader{
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: calc(64px + env(safe-area-inset-top));
  padding: calc(8px + env(safe-area-inset-top)) 15px 8px;
  border-bottom: 1px solid rgba(216, 208, 203, 0.42);
  background: rgba(249, 246, 241, 0.94);
}

.iconButton{
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary);
}

.menuButton{
  gap: 4px;
  align-content: center;
}

.menuButton span{
  display: block;
  width: 19px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
}

.companionIdentity{
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 0 8px;
  line-height: 1.2;
}

.companionIdentity strong{
  max-width: 100%;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 610;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.companionIdentity span{
  color: var(--text-faint);
  font-size: 9px;
  letter-spacing: 0.02em;
}

.headerAvatar,
.drawerAvatar{
  position: relative;
  display: grid;
  place-items: center;
  color: var(--accent-brown);
  font-family: ui-serif, Georgia, "Songti SC", serif;
  font-weight: 400;
}

.headerAvatar{
  justify-self: end;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  background: #e9e2d6;
}

.headerAvatar img,
.chatAvatar img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.appContent{
  flex: 1 1 auto;
  display: flex;
  width: 100%;
  min-height: 0;
  overflow: clip;
}

.loveBookMenuButton{
  position: absolute;
  z-index: 6;
  top: calc(22px + env(safe-area-inset-top));
  left: 20px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #343733;
  gap: 4px;
  align-content: center;
}

.loveBookMenuButton span{
  display: block;
  width: 18px;
  height: 1.25px;
  border: 0;
  border-radius: 999px;
  background: currentColor;
}

/* Drawer */

.drawerLayer{
  position: absolute;
  z-index: 20;
  inset: 0;
  pointer-events: none;
}

.drawerLayer.isOpen{
  pointer-events: auto;
}

.drawerScrim{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: var(--scrim);
  opacity: 0;
  transition: opacity 220ms ease;
}

.drawerLayer.isOpen .drawerScrim{
  opacity: 1;
}

.drawerPanel{
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: min(80%, 326px);
  padding: calc(31px + env(safe-area-inset-top)) 21px
    calc(22px + env(safe-area-inset-bottom));
  background:
    linear-gradient(165deg, rgba(249, 246, 241, 0.96), transparent 48%),
    var(--bg-soft);
  box-shadow: 12px 0 34px rgba(74, 65, 60, 0.085);
  transform: translateX(-102%);
  transition: transform 260ms cubic-bezier(0.22, 0.74, 0.28, 1);
}

.drawerLayer.isOpen .drawerPanel{
  transform: translateX(0);
}

.drawerIdentity{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 5px 34px;
}

.drawerAvatar{
  flex: 0 0 36px;
  width: 36px;
  height: 48px;
  border-right: 1px solid rgba(142, 126, 115, 0.24);
  font-size: 23px;
}

.drawerIdentity > div{
  min-width: 0;
  display: grid;
  gap: 4px;
}

.drawerIdentity strong{
  overflow: hidden;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 18px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawerIdentity span:not(.drawerAvatar){
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.07em;
}

.drawerNav{
  display: grid;
  gap: 4px;
}

.drawerNavItem{
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 7px 8px 7px 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.drawerNavItem.isCurrent{
  background: rgba(225, 193, 182, 0.23);
  box-shadow: inset 2px 0 var(--accent);
}

.drawerNavItem.isCurrent .drawerNavIcon{
  color: var(--accent-strong);
}

.drawerNavIcon{
  display: grid;
  place-items: center;
  width: 25px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  color: var(--icon);
}

.drawerNavIcon svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.drawerNavItem > span:last-child{
  min-width: 0;
  display: grid;
  gap: 3px;
}

.drawerNavItem strong{
  font-size: 13px;
  font-weight: 610;
}

.drawerNavItem small{
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 430;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawerNote{
  margin: auto 4px 0;
  padding: 22px 3px 4px;
  border-top: 1px solid rgba(216, 208, 203, 0.72);
  color: var(--text-faint);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 11px;
  line-height: 1.6;
}

/* Token gate */

.tokenGateViewport{
  display: grid;
  place-items: center;
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(28px + env(safe-area-inset-top)) 22px
    calc(24px + env(safe-area-inset-bottom));
  background:
    linear-gradient(155deg, rgba(255, 253, 248, 0.84), transparent 52%),
    var(--canvas-warm);
}

.tokenGate{
  width: 100%;
  display: grid;
  gap: 30px;
  padding: 28px 22px 22px;
  border: 1px solid var(--divider);
  border-radius: 28px;
  background: rgba(255, 253, 248, 0.86);
  box-shadow: var(--shadow-soft);
}

.gateLight{
  position: relative;
  width: 52px;
  height: 52px;
  margin: 0 auto -8px;
  border-radius: 50%;
  background: #eee0c6;
  box-shadow: 0 0 34px rgba(209, 175, 112, 0.28);
}

.gateLight::before{
  content: "";
  position: absolute;
  inset: 13px 17px 18px;
  border-radius: 50% 50% 40% 40%;
  background: #c79d59;
}

.gateLight span{
  position: absolute;
  left: 22px;
  bottom: 10px;
  width: 8px;
  height: 7px;
  border-radius: 2px;
  background: #9b7950;
}

.tokenGateIntro{
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.tokenGateIntro p,
.screenHeading p{
  margin: 0;
  color: var(--text-secondary);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.tokenGateIntro h1,
.screenHeading h1{
  margin: 0;
  color: var(--text-primary);
  font-size: 27px;
  font-weight: 680;
  letter-spacing: -0.03em;
}

.tokenGateIntro span{
  color: var(--text-secondary);
  font-size: 14px;
}

.tokenGateForm,
.compactForm{
  display: grid;
  gap: 10px;
}

.tokenGateForm label,
.compactForm label{
  color: var(--text-secondary);
  font-size: 12px;
}

.tokenGateForm button{
  margin-top: 4px;
}

.gateError,
.errorMessage,
.chatError{
  color: var(--danger);
}

.gateError{
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
}

.gateRecovery{
  padding-top: 4px;
  border-top: 1px solid var(--divider);
}

.gateRecovery .memoryPanel{
  border: 0;
  background: transparent;
}

.gateRecovery .memoryPanel > summary{
  padding-inline: 2px;
  color: var(--text-secondary);
  font-size: 13px;
}

/* Chat */

.chatScreen{
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--bg-main) 0%,
    #f5f1eb 58%,
    var(--bg-soft) 100%
  );
}

.chatLog{
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 16px 22px;
  /* History opens on the latest message without animating through the thread. */
  scroll-behavior: auto;
}

.settingsScreen::-webkit-scrollbar,
.loveBookScreen::-webkit-scrollbar{
  display: none;
  width: 0;
  height: 0;
}

.chatLoading{
  margin: auto;
  color: var(--text-secondary);
  font-size: 13px;
}

.messageRow{
  display: grid;
  gap: 3px;
  width: 100%;
  max-width: 100%;
}

.messageRow.user{
  align-self: flex-end;
  justify-items: end;
}

.messageRow.assistant{
  align-self: flex-start;
  justify-items: start;
}

.messageMeta{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 40px;
  color: rgba(78, 81, 77, 0.47);
  font-size: 9px;
  letter-spacing: 0;
}

.messageRow.user .messageMeta{
  justify-content: flex-end;
}

.messageLine{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.messageRow.user .messageLine{
  flex-direction: row-reverse;
}

.chatAvatar{
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink-blue);
  color: #f8f2e7;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
}

.messageRow.user .chatAvatar{
  background: #e5d3b9;
  color: #795f4f;
}

.chatAvatar.isHidden{
  visibility: hidden;
}

.messageMeta time{
  font-variant-numeric: tabular-nums;
}


.thinkingDots{
  display: inline-flex;
  gap: 3px;
}

.thinkingDots i{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: thinking 1.1s ease-in-out infinite;
}

.thinkingDots i:nth-child(2){
  animation-delay: 120ms;
}

.thinkingDots i:nth-child(3){
  animation-delay: 240ms;
}

@keyframes thinking {
  0%,
70%,
100%{
    opacity: 0.28;
    transform: translateY(0);
  }
  35%{
    opacity: 0.9;
    transform: translateY(-2px);
  }
}

.chatError{
  align-self: center;
  max-width: 88%;
  margin: 2px 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(154, 95, 88, 0.07);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.chatError span{
  display: block;
}

.chatError button{
  margin-top: 7px;
  padding: 5px 10px;
  border: 1px solid rgba(154, 95, 88, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  color: inherit;
  font: inherit;
}

.chatWaitStatus{
  align-self: center;
  max-width: 88%;
  margin: 2px 0;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(91, 84, 80, 0.06);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.chatBottom{
  flex: 0 0 1px;
}

.composer{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: end;
  gap: 8px;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(216, 208, 203, 0.42);
  background: rgba(249, 246, 241, 0.97);
}

.composer textarea{
  height: 44px;
  min-height: 44px;
  max-height: 124px;
  padding: 10px 13px;
  border: 1px solid rgba(216, 208, 203, 0.68);
  border-radius: 22px;
  resize: none;
  overflow-y: auto;
  background: var(--surface);
  box-shadow: none;
  font-size: 16px;
  font-family: var(--font-chat);
  line-height: 1.4;
  letter-spacing: normal;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.composer textarea::-webkit-scrollbar{
  display: none;
}

.sendButton{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--send-button);
  color: #fffaf2;
  box-shadow: none;
}

.sendButton svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* Inner screens */

.settingsScreen,
.loveBookScreen{
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
  padding: 24px 14px calc(88px + env(safe-area-inset-bottom));
}

.screenHeading{
  display: grid;
  gap: 8px;
  padding: 7px 5px 28px;
}

.settingsStack{
  display: grid;
  gap: 0;
}

.loveBookScreen{
  position: relative;
  display: grid;
  align-content: start;
  gap: 38px;
  padding-top: 34px;
  padding-right: 18px;
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
  padding-left: 18px;
  background:
    linear-gradient(180deg, rgba(220, 228, 225, 0.42), transparent 230px),
    var(--paper);
  scrollbar-width: none;
}

.loveBookHeading{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 5px 17px;
  border-bottom: 1px solid rgba(118, 113, 102, 0.13);
}

.loveBookHeading > div{
  display: grid;
  gap: 6px;
}

.loveBookHeading p,
.loveBookHeading h1,
.loveBookPostcard blockquote,
.loveBookMixedCard blockquote,
.loveBookSunsetLetter blockquote,
.loveBookTornNote blockquote,
.loveBookSoftNote blockquote,
.collageNote p{
  margin: 0;
}

.loveBookHeading p{
  color: var(--text-secondary);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.loveBookHeading h1{
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 28px;
  font-weight: 560;
  letter-spacing: 0.12em;
}

.loveBookHeading > span{
  padding-bottom: 2px;
  color: rgba(103, 109, 105, 0.46);
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 0.2em;
}

.loveBookPostcard{
  position: relative;
  min-height: 292px;
  display: flex;
  flex-direction: column;
  padding: 30px 27px 23px;
  border: 1px solid rgba(118, 93, 77, 0.13);
  border-radius: 2px;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(118, 93, 77, 0.055) 50%, transparent 50.3%),
    linear-gradient(145deg, #f9f4e8, #eee4d3);
  box-shadow: 0 10px 28px rgba(76, 65, 51, 0.055);
  transform: rotate(-0.35deg);
}

.loveBookPostcard::after{
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(118, 93, 77, 0.065);
  pointer-events: none;
}

.postcardMark{
  position: absolute;
  top: 21px;
  right: 21px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 49px;
  border: 1px solid rgba(118, 93, 77, 0.27);
  background: rgba(232, 216, 195, 0.38);
}

.postcardMark::before,
.postcardMark::after{
  content: "";
  position: absolute;
  border: 1px solid rgba(118, 93, 77, 0.11);
}

.postcardMark::before{
  inset: 4px;
}

.postcardMark::after{
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.postcardMark span{
  z-index: 1;
  color: var(--accent-brown);
  font-family: Georgia, serif;
  font-size: 11px;
}

.loveBookSource{
  margin: 0;
  color: var(--accent-red);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.loveBookPostcard blockquote{
  max-width: 76%;
  margin: auto 0;
  padding: 42px 0 31px;
  color: #4b4540;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 20px;
  line-height: 1.88;
  letter-spacing: 0.055em;
}

.loveBookPostcard footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-faint);
  font-family: Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.11em;
}

.loveBookPostcard footer i{
  color: #a77f6d;
  font-size: 18px;
  font-style: normal;
}

.loveBookCollage{
  position: relative;
  min-height: 382px;
  overflow: hidden;
  margin-inline: -4px;
  border-radius: 0;
  background: #d9dfdc;
  box-shadow: 0 9px 25px rgba(61, 70, 68, 0.055);
}

.loveBookCollage::after{
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    97deg,
    transparent 0,
    transparent 5px,
    rgba(255, 255, 255, 0.035) 6px
  );
  pointer-events: none;
}

.collageNote{
  position: absolute;
  z-index: 2;
  left: 18px;
  top: 20px;
  width: 43%;
  padding: 19px 16px 23px;
  background: #f4ecdd;
  box-shadow: 2px 6px 18px rgba(68, 61, 51, 0.065);
  transform: rotate(-3deg);
}

.collageNote span{
  color: var(--text-faint);
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.collageNote p{
  margin-top: 20px;
  color: #5e5851;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 12px;
  line-height: 1.8;
}

.collagePhoto{
  position: absolute;
  display: block;
  overflow: hidden;
  border: 5px solid rgba(248, 244, 235, 0.94);
  box-shadow: 3px 8px 19px rgba(51, 55, 54, 0.09);
}

.collagePhotoSky{
  top: 18px;
  right: 15px;
  width: 48%;
  height: 43%;
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 244, 209, 0.8) 0 7%, transparent 8%),
    linear-gradient(165deg, #b9c8c9, #dbe1dc 52%, #e8d5bd 53%, #c9b79e);
  transform: rotate(2.5deg);
}

.collagePhotoSky span{
  position: absolute;
  right: 8px;
  bottom: 7px;
  color: rgba(255, 255, 255, 0.72);
  font-family: Georgia, serif;
  font-size: 8px;
  letter-spacing: 0.2em;
}

.collagePhotoSea{
  left: 16px;
  bottom: 18px;
  width: 54%;
  height: 46%;
  background:
    repeating-linear-gradient(176deg, transparent 0 16px, rgba(255, 255, 255, 0.1) 17px 18px),
    linear-gradient(180deg, #aabbbd 0 38%, #7f999e 39% 68%, #d8c6aa 69%);
  transform: rotate(1.8deg);
}

.collagePhotoPaper{
  right: 17px;
  bottom: 24px;
  width: 36%;
  height: 35%;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.34), transparent 42%),
    #cdbda5;
  transform: rotate(-4deg);
}

.collagePhotoPaper::before{
  content: "";
  position: absolute;
  left: 21%;
  top: 17%;
  width: 52%;
  height: 58%;
  border-radius: 50% 50% 42% 48%;
  background: rgba(241, 232, 214, 0.65);
  filter: blur(1px);
}

.collagePhotoPaper i{
  position: absolute;
  z-index: 1;
  right: 9px;
  bottom: 8px;
  color: rgba(74, 66, 56, 0.67);
  font-family: Georgia, serif;
  font-size: 10px;
  font-style: italic;
}

.collageTape{
  position: absolute;
  z-index: 4;
  display: block;
  width: 53px;
  height: 15px;
  background: rgba(232, 219, 192, 0.66);
  box-shadow: 0 1px 2px rgba(69, 61, 49, 0.04);
}

.collageTapeTop{
  top: 8px;
  right: 45px;
  transform: rotate(5deg);
}

.collageTapeBottom{
  left: 37px;
  bottom: 9px;
  transform: rotate(-4deg);
}

.loveBookMixedCard{
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  min-height: 266px;
  overflow: hidden;
  margin-inline: 5px -2px;
  border: 0;
  border-radius: 1px;
  background: #f3eee3;
  box-shadow: 0 8px 22px rgba(65, 66, 59, 0.05);
}

.mixedCardImage{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 62% 25%, #eee0ba 0 7%, transparent 8%),
    linear-gradient(160deg, #bdcbca 0 44%, #8fa6a8 45% 70%, #d5c1a4 71%);
}

.mixedCardImage::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.17), transparent 34%);
}

.mixedCardImage span,
.mixedCardImage i{
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.34);
  transform: rotate(-3deg);
}

.mixedCardImage span{
  bottom: 27%;
}

.mixedCardImage i{
  bottom: 22%;
}

.mixedCardCopy{
  display: flex;
  flex-direction: column;
  padding: 25px 19px 20px;
}

.mixedCardCopy blockquote{
  margin: auto 0;
  color: #4d514d;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 14px;
  line-height: 2.05;
}

.mixedCardDate{
  color: var(--text-faint);
  font-size: 9px;
  letter-spacing: 0.06em;
}

.loveBookTornNote{
  position: relative;
  margin: 2px 11px 0 7px;
  padding: 24px 23px 22px;
  background: #e9dfcf;
  clip-path: polygon(0 3%, 7% 0, 16% 3%, 26% 0, 37% 2%, 48% 0, 59% 3%, 69% 0, 82% 2%, 92% 0, 100% 3%, 100% 97%, 91% 100%, 80% 97%, 68% 100%, 57% 97%, 46% 100%, 34% 97%, 22% 100%, 11% 97%, 0 100%);
  transform: rotate(0.8deg);
}

.loveBookTornNote blockquote{
  margin: 18px 0 21px;
  color: #514940;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 15px;
  line-height: 1.92;
}

.loveBookTornNote > span{
  color: rgba(81, 73, 64, 0.52);
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 0.1em;
}

.loveBookSunsetLetter{
  display: grid;
  grid-template-rows: 218px auto;
  margin-inline: -1px 7px;
  background: #f3eadd;
  box-shadow: 0 9px 24px rgba(78, 65, 51, 0.05);
  transform: rotate(0.45deg);
}

.sunsetMock{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 35%, rgba(250, 224, 173, 0.96) 0 8%, transparent 8.6%),
    linear-gradient(174deg, #bdc9c6 0 37%, #d9c7ad 38% 61%, #9a8b77 62% 64%, #c0a987 65%);
}

.sunsetMock::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 250, 231, 0.2), transparent 36%);
}

.sunsetMock span{
  position: absolute;
  right: 11px;
  bottom: 9px;
  color: rgba(255, 252, 241, 0.72);
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: 0.16em;
}

.loveBookSunsetLetter > div:last-child{
  display: grid;
  gap: 16px;
  padding: 22px 23px 26px;
}

.loveBookSunsetLetter blockquote{
  max-width: 300px;
  color: #534a41;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 15px;
  line-height: 1.95;
}

.loveBookFilmStrip{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-inline: -18px;
  padding: 18px 12px 32px;
  background: #3d6573;
}

.loveBookFilmStrip::before,
.loveBookFilmStrip::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 5px;
  background: repeating-linear-gradient(90deg, #d6d3c9 0 5px, transparent 5px 11px);
  opacity: 0.55;
}

.loveBookFilmStrip::before{
  top: 6px;
}

.loveBookFilmStrip::after{
  bottom: 7px;
}

.filmFrame{
  display: block;
  min-height: 146px;
  border: 2px solid rgba(244, 240, 229, 0.72);
}

.filmFrameWindow{
  background: linear-gradient(135deg, #e5dac7 0 30%, #9aa7a5 31% 64%, #615f56 65%);
}

.filmFrameCloud{
  background:
    radial-gradient(ellipse at 42% 41%, rgba(239, 236, 220, 0.78) 0 23%, transparent 24%),
    linear-gradient(180deg, #9eafb1, #c8d0cb 64%, #a99c88 65%);
}

.filmFrameTable{
  background:
    linear-gradient(32deg, transparent 0 44%, rgba(233, 219, 190, 0.6) 45% 58%, transparent 59%),
    linear-gradient(155deg, #9b9588 0 48%, #c7b79f 49%);
}

.loveBookFilmStrip p{
  position: absolute;
  right: 15px;
  bottom: 13px;
  margin: 0;
  color: rgba(246, 241, 229, 0.68);
  font-family: Georgia, serif;
  font-size: 8px;
  letter-spacing: 0.14em;
}

.loveBookSoftNote{
  position: relative;
  min-height: 235px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 13px;
  padding: 34px 30px 27px;
  border-top: 1px solid rgba(97, 102, 97, 0.16);
  border-bottom: 1px solid rgba(97, 102, 97, 0.16);
  background: rgba(232, 236, 229, 0.45);
}

.softNoteNumber{
  position: absolute;
  top: 20px;
  right: 22px;
  color: rgba(102, 111, 106, 0.24);
  font-family: Georgia, serif;
  font-size: 36px;
}

.loveBookSoftNote blockquote{
  max-width: 260px;
  margin: 28px 0 30px;
  color: #4c514d;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: 0.035em;
}

.loveBookSoftNote > span{
  color: var(--text-faint);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.loveBookAction{
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0 0 8px;
}

.loveBookAction button{
  min-width: 136px;
  border: 1px solid rgba(118, 93, 77, 0.2);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-brown);
  font-weight: 550;
}

.loveBookAction small{
  color: var(--text-faint);
  font-size: 11px;
}

/* Love book: one continuous editorial zine, matching the approved concept. */

.loveBookScreen{
  display: block;
  padding: 0 0 calc(112px + env(safe-area-inset-bottom));
  background: #f6f0e4;
}

.loveBookSpread{
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.22), transparent 34%),
    #f6f0e4;
  box-shadow: none;
}

.loveBookLeadSpread{
  min-height: 960px;
  padding: calc(23px + env(safe-area-inset-top)) 20px 20px;
}

.zineHeader{
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
}

.zineHeaderSpacer{
  width: 34px;
  height: 34px;
}

.zineHeader h1{
  margin: 0;
  color: #2f302d;
  font-family: var(--font-literary);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-align: center;
}

.zineCornerMark{
  position: relative;
  align-self: start;
  width: 13px;
  height: 13px;
  margin-top: 9px;
  border-top: 1px solid var(--accent-red);
  border-left: 1px solid var(--accent-red);
}

.zineBookIcon{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #474b47;
}

.zineBookIcon svg{
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.15;
}

.zineHeroPhoto{
  position: relative;
  width: 66%;
  height: 166px;
  margin: 57px 0 0 23px;
  background-image: var(--zine-image, url("/homeg-zine-defaults.png"));
  background-repeat: no-repeat;
  background-position: -604px -164px;
  background-size: 1568px 1003px;
  box-shadow: 0 7px 15px rgba(31, 79, 102, 0.16);
  transform: rotate(-3.4deg);
}

.zineHeroPhoto::after{
  content: none;
}

.zineTape{
  position: absolute;
  z-index: 2;
  top: -12px;
  left: -18px;
  width: 78px;
  height: 21px;
  background: rgba(208, 218, 211, 0.76);
  transform: rotate(-6deg);
}

.zineHeroPhoto i{
  position: absolute;
  z-index: 3;
  right: -91px;
  bottom: -3px;
  width: 126px;
  color: rgba(88, 158, 196, 0.72);
  font-family: "Segoe Script", "Bradley Hand", cursive;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.1;
  transform: rotate(8deg);
}

.zineRecord{
  position: absolute;
  left: 15px;
  top: 307px;
  color: var(--accent-red);
  font-family: ui-monospace, monospace;
  font-size: 6px;
  letter-spacing: 0.28em;
  opacity: 0.84;
  writing-mode: vertical-rl;
}

.zineHeroQuote{
  margin: 52px 0 0 67px;
  color: #282b29;
  font-family: var(--font-literary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.82;
  letter-spacing: 0.01em;
}

.zineHeroQuote::after{
  content: "";
  display: block;
  width: 116px;
  height: 10px;
  margin: 2px 0 0 31px;
  border-bottom: 2px solid rgba(91, 167, 204, 0.62);
  border-radius: 50%;
  transform: rotate(-4deg);
}

.zineStoryRow{
  position: relative;
  min-height: 228px;
  margin-top: 74px;
}

.zineTornMemo{
  position: absolute;
  left: 44px;
  top: 10px;
  width: 70%;
  min-height: 154px;
  padding: 34px 48px 26px 26px;
  background: #ece6db;
  clip-path: polygon(0 5%, 9% 1%, 19% 4%, 31% 0, 43% 4%, 55% 1%, 66% 4%, 78% 0, 89% 3%, 100% 1%, 98% 96%, 88% 99%, 75% 96%, 63% 100%, 51% 97%, 38% 100%, 26% 96%, 13% 99%, 0 95%);
  transform: rotate(-1.2deg);
}

.zineTornMemo p{
  margin: 0;
  color: #4c4d48;
  font-family: var(--font-literary);
  font-size: 11px;
  line-height: 1.85;
}

.zineTornMemo span{
  display: block;
  margin-top: 21px;
  color: var(--accent-red);
  font-family: ui-monospace, monospace;
  font-size: 6px;
  letter-spacing: 0.2em;
}

.zineVerticalFilm{
  position: absolute;
  z-index: 2;
  right: 2px;
  top: 0;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  width: 72px;
  height: 230px;
  padding: 8px 9px;
  background-color: #214f67;
  background-image: var(--zine-image, url("/homeg-zine-defaults.png"));
  background-repeat: no-repeat;
  background-position: -940px -499px;
  background-size: 1568px 1003px;
  box-shadow: 0 6px 16px rgba(32, 66, 82, 0.16);
  transform: rotate(1.5deg);
}

.zineVerticalFilm span{
  background: transparent;
}

.zineVerticalFilm i{
  position: absolute;
  right: 8px;
  bottom: 2px;
  color: rgba(242, 235, 222, 0.7);
  font-family: ui-monospace, monospace;
  font-size: 6px;
  font-style: normal;
}

.zineBottomPhoto{
  position: relative;
  width: 78%;
  height: 180px;
  margin: 12px 0 0 5px;
  overflow: visible;
  background-color: #204f68;
  background-image: var(--zine-image, url("/homeg-zine-defaults.png"));
  background-repeat: no-repeat;
  background-position: -579px -713px;
  background-size: 1568px 1003px;
  clip-path: polygon(0 4%, 7% 1%, 16% 3%, 26% 0, 38% 2%, 49% 0, 62% 3%, 73% 0, 86% 2%, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 7px 18px rgba(23, 61, 78, 0.15);
  transform: rotate(0.5deg);
}

.zineBottomPhoto::after{
  content: none;
}

.zineBottomPhoto span{
  position: absolute;
  z-index: 2;
  right: -73px;
  bottom: 16px;
  width: 156px;
  color: rgba(93, 164, 202, 0.75);
  font-family: "Segoe Script", "Bradley Hand", cursive;
  font-size: 18px;
  line-height: 1.12;
  transform: rotate(-4deg);
}

.zineFooterMarks{
  display: grid;
  grid-template-columns: 1fr 30px 1fr;
  align-items: center;
  margin-top: 25px;
  color: var(--accent-red);
  font-family: ui-monospace, monospace;
  font-size: 10px;
}

.zineFooterMarks span:last-child{
  justify-self: end;
}

.zineFooterMarks i{
  width: 17px;
  height: 17px;
  justify-self: center;
  border: 1px solid var(--accent-red);
  border-radius: 50%;
  opacity: 0.72;
}

.loveBookSecondSpread{
  min-height: 900px;
  margin-top: 0;
  padding: 26px 20px 22px;
  border-top: 1px solid rgba(216, 208, 203, 0.34);
}

.zineSectionHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(62, 71, 69, 0.12);
}

.zineSectionHeader span{
  color: var(--accent-red);
  font-family: ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: 0.18em;
}

.zineSectionHeader p{
  margin: 0;
  color: #595c57;
  font-family: var(--font-literary);
  font-size: 12px;
  letter-spacing: 0.05em;
}

.zineDuskPhoto{
  position: relative;
  height: 232px;
  margin-top: 43px;
  background:
    radial-gradient(circle at 67% 29%, rgba(247, 214, 157, 0.96) 0 7%, transparent 7.6%),
    linear-gradient(176deg, #8fb1bd 0 42%, #d6baa0 43% 63%, #6f8790 64% 67%, #2e5d73 68%);
  box-shadow: 0 7px 17px rgba(43, 80, 96, 0.12);
  transform: rotate(0.7deg);
}

.zineDuskPhoto span{
  position: absolute;
  right: 9px;
  bottom: 8px;
  color: rgba(250, 244, 231, 0.76);
  font-family: ui-monospace, monospace;
  font-size: 7px;
  letter-spacing: 0.18em;
}

.zineSecondaryQuote{
  margin: 37px 14px 45px;
  color: #323633;
  font-family: var(--font-literary);
  font-size: 16px;
  line-height: 1.86;
  letter-spacing: 0.01em;
}

.zineDuoLayout{
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 215px;
}

.zineSeaFragment{
  background:
    repeating-linear-gradient(176deg, transparent 0 19px, rgba(255, 255, 255, 0.13) 20px 21px),
    linear-gradient(180deg, #9dbbc3 0 32%, #397b96 33% 72%, #d2c5ad 73%);
  transform: rotate(-1.5deg);
}

.zineQuietLetter{
  align-self: center;
  margin-left: -8px;
  padding: 28px 22px 24px;
  background: #ebe4d8;
  clip-path: polygon(0 4%, 11% 0, 23% 3%, 37% 1%, 49% 4%, 63% 0, 78% 3%, 91% 1%, 100% 5%, 98% 96%, 87% 100%, 72% 97%, 58% 100%, 42% 97%, 27% 100%, 13% 97%, 0 100%);
}

.zineQuietLetter span{
  color: var(--accent-red);
  font-family: ui-monospace, monospace;
  font-size: 7px;
  letter-spacing: 0.13em;
}

.zineQuietLetter p{
  margin: 20px 0 25px;
  color: #4b4b46;
  font-family: var(--font-literary);
  font-size: 13px;
  line-height: 1.85;
}

.zineQuietLetter i{
  color: var(--text-faint);
  font-family: ui-monospace, monospace;
  font-size: 7px;
  font-style: normal;
}

.zineBlueBand{
  margin: 49px -20px 0;
  padding: 43px 35px 39px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.08), transparent 35%),
    #2f6880;
}

.zineBlueBand p{
  max-width: 260px;
  margin: 0;
  color: #f4eee1;
  font-family: var(--font-literary);
  font-size: 15px;
  line-height: 1.82;
}

.zineBlueBand span{
  display: block;
  margin-top: 22px;
  color: rgba(244, 238, 225, 0.65);
  font-size: 8px;
  letter-spacing: 0.16em;
}

.zinePageEnd{
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
  color: var(--text-faint);
  font-family: ui-monospace, monospace;
  font-size: 7px;
  letter-spacing: 0.12em;
}

.zinePageEnd i{
  color: var(--accent-red);
  font-style: normal;
}

.loveBookScreen .loveBookAction{
  margin: 0;
  padding: 36px 0 4px;
  background: #f6f0e4;
}

.loveBookScreen .loveBookAction button{
  border-color: rgba(142, 126, 115, 0.28);
  color: var(--accent);
}

/* Love book feed: quiet, scrollable notes instead of a poster composition. */

.loveBookScreen{
  display: block;
  padding: 0 0 calc(112px + env(safe-area-inset-bottom));
  background: var(--bg-main);
  color: var(--text-primary);
}

.loveBookFeedHeader{
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: start;
  padding: calc(22px + env(safe-area-inset-top)) 16px 22px;
  border-bottom: 1px solid rgba(216, 208, 203, 0.62);
  background: var(--bg-main);
}

.loveBookHeaderSpacer{
  width: 44px;
  height: 44px;
}

.loveBookFeedHeader > div{
  min-width: 0;
  padding-top: 3px;
  text-align: center;
}

.loveBookFeedHeader h1{
  margin: 0;
  font-family: var(--font-literary);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.loveBookFeedHeader p{
  margin: 7px -20px 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.015em;
}

.loveBookHeaderIcon{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--icon);
}

.loveBookHeaderIcon svg{
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.1;
}

.loveBookFeed{
  display: grid;
  gap: 16px;
  padding: 18px 14px 34px;
}

.loveNoteCard,
.loveInspiration{
  border: 1px solid rgba(216, 208, 203, 0.68);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 6px 20px rgba(74, 65, 60, 0.035);
}

.loveNoteMeta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-secondary);
  font-family: var(--font-chat);
  font-size: 9px;
  line-height: 1.4;
}

.loveNoteMeta span{
  letter-spacing: 0.035em;
}

.loveNoteMeta time{
  color: var(--antique-silver);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.loveNoteHero{
  min-height: 222px;
  display: flex;
  flex-direction: column;
  padding: 22px 23px 21px;
  background:
    linear-gradient(145deg, rgba(225, 193, 182, 0.14), transparent 58%),
    var(--paper);
}

.loveNoteHero blockquote{
  max-width: 280px;
  margin: 39px 0 30px;
  color: var(--text-primary);
  font-family: var(--font-literary);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.78;
  letter-spacing: 0.01em;
}

.loveNoteLine{
  width: 54px;
  height: 1px;
  margin-top: auto;
  background: var(--clam-shell);
  opacity: 0.72;
}

.loveNoteMixed{
  overflow: hidden;
  padding: 0;
}

.loveNoteImage{
  width: 100%;
  height: 172px;
}

.loveNoteImageSea{
  background:
    radial-gradient(circle at 68% 23%, rgba(249, 246, 241, 0.72) 0 8%, transparent 8.4%),
    linear-gradient(172deg, #d9d9d3 0 42%, #c7cfce 43% 64%, #b7b7b1 65% 100%);
}

.loveNoteBody{
  padding: 18px 20px 21px;
}

.loveNoteBody p{
  margin: 18px 0 1px;
  color: var(--text-primary);
  font-family: var(--font-literary);
  font-size: 15px;
  line-height: 1.82;
}

.loveNoteShort{
  padding: 21px 22px 23px;
  background:
    linear-gradient(135deg, rgba(231, 215, 200, 0.62), rgba(249, 246, 241, 0.88));
}

.loveNoteShort blockquote{
  margin: 28px 0 7px;
  font-family: var(--font-literary);
  font-size: 16px;
  line-height: 1.75;
}

.loveInspiration{
  padding: 20px 18px 18px;
  background: rgba(249, 246, 241, 0.76);
}

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

.loveInspirationHeader h2{
  margin: 0;
  font-family: var(--font-literary);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.025em;
}

.loveInspirationHeader p{
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 9px;
}

.loveInspirationHeader time{
  color: var(--antique-silver);
  font-size: 8px;
  letter-spacing: 0.1em;
}

.loveInspirationGrid{
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  grid-template-rows: repeat(2, 112px);
  gap: 9px;
}

.loveInspirationGrid figure{
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(216, 208, 203, 0.5);
  border-radius: 18px;
  background: var(--bg-main);
}

.loveInspirationGrid figure:first-child{
  grid-row: 1 / span 2;
}

.loveInspirationImage{
  flex: 1 1 auto;
  min-height: 0;
}

.loveInspirationMist{
  background:
    linear-gradient(180deg, rgba(249, 246, 241, 0.08), rgba(184, 178, 170, 0.14)),
    linear-gradient(145deg, #d8dad5, #c8cfcd 58%, #b9b3ac);
}

.loveInspirationShore{
  background: linear-gradient(165deg, #ddd8cf 0 48%, #c6ccca 49% 72%, #aaa7a1 73%);
}

.loveInspirationLight{
  background:
    radial-gradient(circle at 64% 34%, rgba(249, 246, 241, 0.92) 0 16%, transparent 16.8%),
    linear-gradient(145deg, #e7d7c8, #d8c9c0 58%, #cec6c3);
}

.loveInspirationGrid figcaption{
  flex: 0 0 auto;
  padding: 7px 9px 8px;
  color: var(--text-secondary);
  font-size: 8px;
  line-height: 1.35;
}

.loveNoteClosing{
  padding: 20px 22px 22px;
  background: rgba(237, 234, 227, 0.74);
}

.loveNoteClosing p{
  margin: 24px 0 2px;
  font-family: var(--font-literary);
  font-size: 14px;
  line-height: 1.75;
}

.loveBookScreen .loveBookAction{
  margin: 0;
  padding: 5px 14px 8px;
  background: var(--bg-main);
}

.loveBookScreen .loveBookAction button{
  min-width: 132px;
  border: 1px solid rgba(142, 126, 115, 0.3);
  border-radius: 999px;
  background: rgba(231, 215, 200, 0.36);
  color: var(--warm-taupe);
}

.loveBookScreen .loveBookAction small{
  color: var(--text-secondary);
}

/* Love book notes: restrained paper slips with no illustrative scenery. */

.loveBookScreen{
  --paper: #fbf8f2;
  padding: 0 0 calc(128px + env(safe-area-inset-bottom));
  background: var(--bg-main);
}

.loveBookFeedHeader{
  padding: calc(18px + env(safe-area-inset-top)) 16px 14px;
  border-bottom: 0;
}

.loveBookFeedHeader > div{
  padding-top: 6px;
}

.loveBookFeedHeader h1{
  font-size: 17px;
  letter-spacing: 0.025em;
}

.loveBookHeaderIcon{
  color: var(--warm-taupe);
  opacity: 0.66;
}

.loveBookHeaderIcon svg{
  width: 20px;
  height: 20px;
}

.loveBookIntro{
  margin: 7px 20px 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.55;
}

.loveBookFeed{
  gap: 20px;
  padding: 18px 20px 40px;
}

.loveNoteCard{
  min-height: 0;
  display: block;
  overflow: visible;
  padding: 22px 20px;
  border: 1px solid rgba(184, 178, 170, 0.25);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: none;
}

.loveNoteMeta{
  display: block;
  color: var(--warm-taupe);
  font-size: 11px;
  line-height: 1.4;
}

.loveNoteMeta span{
  letter-spacing: 0.02em;
}

.loveNoteCard blockquote{
  max-width: none;
  margin: 24px 0 0;
  color: var(--text-primary);
  font-family: var(--font-literary);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
}

.loveNoteHero{
  min-height: 0;
  display: block;
  padding: 22px 20px;
  background: var(--paper);
}

.loveNoteHero blockquote{
  margin: 24px 0 0;
}

.loveNoteLine{
  display: none;
}

.loveNoteWithHint{
  background:
    linear-gradient(135deg, rgba(206, 198, 195, 0.08), transparent 52%),
    var(--paper);
}

.loveNoteImageHint{
  display: block;
  width: 46px;
  height: 5px;
  margin: 18px 0 -1px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pale-silver), var(--clam-shell));
  opacity: 0.52;
}

.loveNoteShort{
  padding: 22px 20px;
  background: rgba(231, 215, 200, 0.2);
}

.loveNoteShort blockquote{
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.75;
}

.loveBookScreen .loveBookAction{
  gap: 8px;
  padding: 4px 20px 8px;
  background: var(--bg-main);
}

.loveBookScreen .loveBookAction button{
  min-width: 104px;
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid rgba(142, 126, 115, 0.28);
  border-radius: 999px;
  background: transparent;
  color: var(--warm-taupe);
  font-size: 12px;
  font-weight: 550;
}

.loveBookScreen .loveBookAction small{
  color: var(--antique-silver);
  font-size: 10px;
}

/* Love book reference pass: compact mobile notes with dated entries. */

.loveBookScreen{
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
  background: #f9f6f1;
}

.loveBookFeedHeader{
  padding: calc(13px + env(safe-area-inset-top)) 15px 4px;
}

.loveBookFeedHeader > div{
  padding-top: 7px;
}

.loveBookFeedHeader h1{
  font-size: 16px;
  letter-spacing: 0.04em;
}

.loveBookHeaderIcon{
  opacity: 0.58;
}

.loveBookHeaderIcon svg{
  width: 18px;
  height: 18px;
}

.loveBookIntro{
  margin: -1px 20px 11px;
  color: var(--antique-silver);
  font-size: 8px;
  line-height: 1.45;
  letter-spacing: 0.035em;
  text-align: center;
}

.loveBookFeed{
  gap: 8px;
  padding: 0 14px 18px;
}

.loveNoteCard{
  position: relative;
  padding: 10px 12px 12px;
  border-color: rgba(184, 178, 170, 0.28);
  border-radius: 10px;
  background: #fbf8f2;
  box-shadow: 0 2px 10px rgba(74, 65, 60, 0.022);
}

.loveNoteMeta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--warm-taupe);
  font-size: 8px;
  line-height: 1.35;
}

.loveNoteMeta span{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  letter-spacing: 0.015em;
}

.loveNoteMeta span::before{
  content: "";
  flex: 0 0 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--blush);
}

.loveNoteMeta time{
  color: var(--antique-silver);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.025em;
}

.loveNoteCard blockquote,
.loveNoteHero blockquote,
.loveNoteShort blockquote{
  margin: 13px 7px 11px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.7;
}

.loveNoteHero,
.loveNoteShort{
  padding: 10px 12px 12px;
  background: #fbf8f2;
}

.loveNoteCornerIcon{
  position: absolute;
  right: 11px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: var(--clam-shell);
  opacity: 0.7;
}

.loveNoteCornerIcon svg{
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.loveNoteMedia{
  padding: 10px 8px 8px;
}

.loveNoteMedia .loveNoteMeta{
  padding: 0 4px;
}

.loveNoteMediaContent{
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin-top: 8px;
}

.loveNoteMediaContent blockquote{
  margin: 0 17px 0 0;
  font-size: 13px;
  line-height: 1.75;
}

.loveNoteThumbnail{
  overflow: hidden;
  border-radius: 6px;
  background-image: url("/lovebook-reference-thumbnails.png");
  background-repeat: no-repeat;
  background-size: 430px 766px;
  filter: saturate(0.72) contrast(0.96) brightness(1.03);
}

.loveNoteThumbnailSea{
  width: 122px;
  height: 128px;
  background-position: -36px -300px;
}

.loveNotePhotos{
  padding: 9px 5px 5px;
}

.loveNotePhotos .loveNoteMeta{
  padding: 0 6px 8px;
}

.loveNotePhotoPair{
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 4px;
  width: min(82%, 310px);
}

.loveNotePhotoPair .loveNoteThumbnail{
  width: 100%;
  height: 88px;
}

.loveNoteThumbnailGlass{
  background-position: -30px -567px;
}

.loveNoteThumbnailFlowers{
  background-position: -195px -567px;
}

.loveBookScreen .loveBookAction{
  gap: 7px;
  padding: 2px 14px 8px;
}

.loveBookScreen .loveBookAction button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 128px;
  min-height: 36px;
  padding: 7px 18px;
  border: 0;
  background: rgba(225, 193, 182, 0.55);
  box-shadow: 0 3px 9px rgba(74, 65, 60, 0.065);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 500;
}

.loveBookScreen .loveBookAction button svg{
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.loveBookScreen .loveBookAction small{
  font-size: 8px;
}

/* Settings panels: existing behavior, mobile appearance */

.memoryPanel{
  border: 1px solid var(--divider);
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.78);
  overflow: hidden;
}

.memoryPanel > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 12px 14px;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 660;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.memoryPanel > summary::-webkit-details-marker{
  display: none;
}

.memoryPanel > summary::after{
  content: "+";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 2px;
  color: var(--text-secondary);
  font-size: 20px;
  font-weight: 400;
}

.memoryPanel[open] > summary::after{
  content: "−";
}

.memoryPanel > summary > span:first-child{
  margin-right: auto;
}

.memoryCount,
.connectionState{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--surface-soft);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 550;
}

.connectionState{
  color: var(--success);
}

.connectionState i{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.memoryPanelBody{
  display: grid;
  gap: 13px;
  padding: 2px 12px 14px;
  border-top: 1px solid var(--divider);
}

.memoryPanelBody > :first-child{
  margin-top: 12px;
}

.memoryIdentityFields{
  align-items: end;
}

.memoryPrivacyHint{
  margin: 0;
  padding: 9px 11px;
  border-left: 2px solid rgba(163, 143, 134, 0.42);
  background: rgba(225, 193, 182, 0.16);
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.6;
}

.backupHint,
.backupStatus,
.errorMessage,
.statusMessage{
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.backupHint,
.statusMessage{
  color: var(--text-secondary);
}

.backupStatus{
  color: var(--success);
}

.memoryCreateForm,
.memoryItem{
  display: grid;
  gap: 12px;
  border: 1px solid var(--divider);
  border-radius: 15px;
  padding: 12px;
  background: var(--surface);
}

.memoryCreateForm label,
.memoryItem label,
.settingsFields label{
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 11px;
}

.memoryPanel input[type="text"],
.memoryPanel input[type="password"],
.memoryPanel input[type="number"],
.memoryPanel input[type="date"],
.memoryPanel select,
.memoryPanel textarea{
  background: var(--surface-soft);
}

.memoryPanel textarea{
  min-height: 76px;
}

.memoryFields,
.settingsFields{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

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

.usageStatGrid > div,
.usageBudgetCard{
  border: 1px solid rgba(184, 178, 170, 0.25);
  border-radius: 14px;
  background: rgba(249, 246, 241, 0.64);
}

.usageStatGrid > div{
  display: grid;
  gap: 4px;
  padding: 11px;
}

.usageStatGrid span,
.usageBudgetCard span,
.usageBreakdown p{
  color: var(--text-secondary);
  font-size: 10px;
}

.usageStatGrid strong,
.usageBudgetCard strong,
.usageBreakdown strong{
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 620;
}

.usageBudgetCard{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}

.usageBudgetCard > div:not(.usageProgress){
  display: grid;
  gap: 4px;
}

.usageBudgetCard small{
  grid-column: 1 / -1;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.5;
}

.usageProgress{
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(184, 178, 170, 0.2);
}

.usageProgress i{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blush), var(--warm-taupe));
  transition: width 240ms ease;
}

.usageBreakdown{
  display: grid;
  gap: 7px;
}

.usageBreakdown p{
  margin: 0;
}

.usageBreakdown > div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(184, 178, 170, 0.18);
}

.usageBreakdown > div span{
  min-width: 0;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.usageBudgetForm button{
  grid-column: 1 / -1;
}

.modelRouteFieldset{
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid rgba(184, 178, 170, 0.2);
}

.modelRouteFieldset legend{
  padding: 0;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 630;
}

.modelRouteFieldset > p{
  margin: 0;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.55;
}

.memoryToggle{
  display: flex !important;
  min-height: 44px;
  align-items: center;
  gap: 9px !important;
}

.memoryToggle input{
  width: 19px;
  min-height: 19px;
  height: 19px;
  accent-color: var(--accent-brown);
}

.memoryList{
  display: grid;
  gap: 10px;
}

.memoryItem.isDisabled{
  opacity: 0.68;
}

.memoryItemHeader,
.memoryActions,
.settingsActions,
.backupActions,
.formActions{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.memoryItemHeader{
  justify-content: space-between;
}

.memoryActions,
.settingsActions{
  justify-content: flex-end;
}

.memoryStatus{
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
}

.memoryStatus.enabled{
  background: rgba(94, 125, 104, 0.11);
  color: var(--success);
}

.memoryStatus.disabled{
  background: var(--surface-soft);
  color: var(--text-secondary);
}

.memoryTimestamp,
.memoryEmpty,
.settingsActions span{
  color: var(--text-faint);
  font-size: 10px;
}

.memoryEmpty{
  margin: 0;
  padding: 8px 2px;
}

.secondaryButton{
  border: 1px solid var(--divider);
  background: var(--surface-soft);
  color: var(--text-primary);
}

.dangerButton{
  border: 1px solid rgba(154, 95, 88, 0.24);
  background: transparent;
  color: var(--danger);
}

.settingsProvider input[readonly]{
  color: var(--text-secondary);
}

.settingsActions{
  align-items: stretch;
  flex-direction: column;
}

.settingsActions button,
.backupActions button,
.memoryActions button,
.memoryCreateForm > button{
  width: 100%;
}

.backupActions,
.memoryActions,
.formActions{
  align-items: stretch;
  flex-direction: column;
}

.compactForm .formActions{
  margin-top: 2px;
}

/* Settings keep their controls, but read like a quiet notebook index. */

.settingsScreen{
  padding-top: 31px;
  padding-right: 20px;
  padding-left: 20px;
  background:
    linear-gradient(180deg, rgba(225, 231, 227, 0.3), transparent 210px),
    #f3eee4;
}

.settingsScreen .screenHeading p{
  color: var(--text-faint);
  font-size: 9px;
  letter-spacing: 0.17em;
}

.settingsScreen .screenHeading h1{
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 28px;
  font-weight: 570;
  letter-spacing: 0.08em;
}

.settingsScreen .memoryPanel{
  border: 0;
  border-top: 1px solid rgba(81, 78, 70, 0.1);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.settingsScreen .memoryPanel:last-child{
  border-bottom: 1px solid rgba(81, 78, 70, 0.1);
}

.settingsScreen .memoryPanel > summary{
  min-height: 64px;
  padding: 13px 4px;
  font-size: 13px;
  font-weight: 590;
}

.settingsScreen .memoryPanel > summary::after{
  width: 20px;
  height: 20px;
  color: var(--text-faint);
  font-size: 17px;
}

.settingsScreen .memoryCount,
.settingsScreen .connectionState{
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-faint);
  font-size: 9px;
}

.settingsScreen .connectionState{
  color: var(--success);
}

.settingsScreen .memoryPanelBody{
  gap: 15px;
  padding: 0 4px 24px;
  border-top: 0;
}

.settingsScreen .memoryPanelBody > :first-child{
  margin-top: 0;
}

.settingsScreen .memoryCreateForm,
.settingsScreen .memoryItem{
  border: 0;
  border-left: 2px solid rgba(113, 131, 134, 0.18);
  border-radius: 0;
  padding: 13px 13px 14px;
  background: rgba(250, 246, 237, 0.56);
}

.settingsScreen input,
.settingsScreen select,
.settingsScreen textarea,
.settingsScreen .memoryPanel input[type="text"],
.settingsScreen .memoryPanel input[type="password"],
.settingsScreen .memoryPanel input[type="number"],
.settingsScreen .memoryPanel select,
.settingsScreen .memoryPanel textarea{
  border: 0;
  border-radius: 9px;
  background: rgba(235, 230, 220, 0.72);
  box-shadow: inset 0 0 0 1px rgba(81, 78, 70, 0.055);
}

.settingsScreen button{
  border-radius: 9px;
  font-size: 12px;
  font-weight: 580;
}

.settingsScreen .secondaryButton{
  border: 0;
  background: rgba(225, 218, 207, 0.72);
}

.settingsScreen .dangerButton{
  border: 0;
  background: rgba(155, 102, 94, 0.07);
}

/* MVP 1.1: a quiet suggestion inbox and a collapsible memory library. */

.homegReviewSection{
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(81, 78, 70, 0.09);
}

.homegReviewDetails > summary{
  display: grid;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.homegReviewDetails > summary::-webkit-details-marker{
  display: none;
}

.homegReviewDetails > summary > span:first-child{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.homegReviewDetails > summary strong{
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 650;
}

.homegReviewDetails > summary small,
.homegReviewItem > small,
.homegReviewMore{
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1.5;
}

.homegReviewSummaryCounts{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.homegReviewSummaryCounts i{
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(206, 198, 195, 0.2);
  color: var(--text-secondary);
  font-size: 8px;
  font-style: normal;
  font-weight: 500;
}

.homegReviewBody{
  display: grid;
  gap: 10px;
  padding-top: 12px;
}

.homegReviewToolbar{
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 9px;
}

.homegReviewToolbar label{
  min-width: 112px;
  display: grid;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 9px;
}

.homegReviewToolbar button{
  min-height: 34px;
  padding: 7px 10px;
  font-size: 10px;
}

.homegReviewPrivacyNote{
  margin: 0;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.55;
}

.chachatOrganizeButton{
  flex: 1 1 100%;
  color: var(--text-primary);
  background: rgba(225, 193, 182, 0.42);
  border-color: rgba(163, 143, 134, 0.24);
}

.chachatOrganizeHint{
  margin: -3px 0 0;
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1.55;
}

.chachatOrganizeConfirm{
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(163, 143, 134, 0.2);
  border-radius: 12px;
  background: rgba(249, 246, 241, 0.86);
}

.chachatOrganizeConfirm p,
.chachatOrganizeLiveStatus p{
  margin: 0;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.6;
}

.chachatOrganizeConfirm > div{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chachatOrganizeConfirm button{
  min-height: 32px;
  padding: 6px 10px;
  font-size: 9px;
}

.chachatOrganizeLiveStatus{
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-left: 2px solid rgba(142, 126, 115, 0.4);
  background: rgba(231, 215, 200, 0.22);
}

.chachatOrganizeLiveStatus strong{
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 620;
}

.memoryDigestSettings{
  border-top: 1px solid rgba(184, 178, 170, 0.2);
  padding-top: 8px;
}

.memoryDigestSettings > summary{
  cursor: pointer;
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 620;
}

.memoryDigestSettingsBody{
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

.memoryDigestSettingsBody > p{
  margin: 0;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.6;
}

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

.memoryDigestFields label{
  display: grid;
  gap: 4px;
  color: var(--text-secondary);
  font-size: 9px;
}

.memoryDigestFields input,
.memoryDigestFields select{
  min-width: 0;
}

.memoryDigestStatusGrid span{
  color: var(--text-secondary);
  font-size: 8px;
  line-height: 1.5;
}

.chachatReviewRun{
  display: grid;
  gap: 7px;
  padding: 10px 11px;
  border-left: 2px solid rgba(126, 139, 122, 0.36);
  background: rgba(231, 215, 200, 0.28);
}

.chachatReviewRun.status-failed{
  border-left-color: rgba(163, 111, 104, 0.42);
}

.chachatReviewRun > strong{
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 630;
}

.chachatReviewOutcome{
  margin: 0;
  color: var(--text-primary);
  font-size: 10px;
  line-height: 1.55;
}

.chachatReviewRun > div{
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
}

.chachatReviewRun span,
.chachatReviewRun small{
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.5;
}

.chachatReviewRunActions{
  align-items: center;
}

.chachatReviewRunActions button{
  min-height: 30px;
  padding: 6px 9px;
  font-size: 9px;
}

.homegReviewList{
  display: grid;
  gap: 8px;
}

.homegReviewItem{
  display: grid;
  gap: 7px;
  padding: 11px 10px;
  border-left: 2px solid rgba(142, 126, 115, 0.26);
  background: rgba(251, 248, 242, 0.48);
}

.homegReviewItem.risk-high{
  border-left-color: rgba(154, 95, 88, 0.48);
}

.homegReviewItem.risk-medium{
  border-left-color: rgba(163, 143, 134, 0.46);
}

.homegReviewMeta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
}

.homegReviewMeta span,
.homegReviewMeta time{
  color: var(--text-faint);
  font-size: 8px;
}

.homegReviewMeta span:first-child{
  color: var(--text-secondary);
}

.homegReviewMeta time{
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.homegReviewItem h4,
.homegReviewItem p,
.homegReviewMore{
  margin: 0;
}

.homegReviewItem h4{
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 630;
}

.homegReviewItem p{
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.58;
}

.homegReviewActions{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.homegReviewActions button{
  min-height: 30px;
  padding: 6px 8px;
  font-size: 9px;
}

.homegReviewMore{
  padding-top: 2px;
}

.memoryCommandSection{
  padding-bottom: 17px;
  border-bottom: 1px solid rgba(81, 78, 70, 0.09);
}

.memoryCommandDetails > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
}

.memoryCommandDetails > summary::-webkit-details-marker{
  display: none;
}

.memoryCommandDetails > summary > span:first-child{
  display: grid;
  gap: 3px;
}

.memoryCommandDetails > summary strong{
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 650;
}

.memoryCommandDetails > summary small{
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1.45;
}

.memoryCommandList{
  display: grid;
  gap: 8px;
  padding-top: 12px;
}

.memoryCommandItem{
  display: grid;
  gap: 8px;
  padding: 10px;
  border-left: 2px solid rgba(126, 139, 122, 0.34);
  background: rgba(251, 248, 242, 0.48);
}

.memoryCommandItem.status-pending_confirmation{
  border-left-color: rgba(163, 111, 104, 0.48);
}

.memoryCommandItem.status-reverted,
.memoryCommandItem.status-rejected{
  opacity: 0.66;
}

.memoryCommandMeta,
.memoryCommandActions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
}

.memoryCommandMeta span,
.memoryCommandMeta time{
  color: var(--text-faint);
  font-size: 8px;
}

.memoryCommandMeta span:first-child{
  color: var(--text-secondary);
}

.memoryCommandMeta time{
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.memoryCommandItem p{
  margin: 0;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.55;
}

.memoryCommandTitle{
  margin: 0;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 630;
  line-height: 1.5;
}

.memoryCommandReason{
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1.5;
}

.memoryCommandActions button{
  min-height: 30px;
  padding: 6px 8px;
  font-size: 9px;
}

.memorySuggestionsSection,
.memoryLibrary{
  display: grid;
  gap: 12px;
}

.memorySuggestionsSection{
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(81, 78, 70, 0.09);
}

.memorySectionHeading{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.memorySectionHeading h3{
  margin: 0 0 4px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 640;
}

.memorySectionHeading p,
.suggestionImportance{
  margin: 0;
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1.55;
}

.memorySectionHeading > button{
  flex: 0 0 auto;
  max-width: 150px;
  padding: 8px 10px;
  border: 0;
  background: rgba(163, 143, 134, 0.16);
  color: var(--text-primary);
  font-size: 10px;
}

.memorySuggestionList{
  display: grid;
  gap: 10px;
}

.memorySuggestionCard{
  display: grid;
  gap: 10px;
  padding: 13px;
  border-left: 2px solid rgba(163, 143, 134, 0.34);
  background: rgba(251, 248, 242, 0.64);
}

.memorySuggestionCard.isSensitive{
  border-left-color: rgba(154, 95, 88, 0.42);
  background: rgba(225, 193, 182, 0.09);
}

.suggestionHeader,
.suggestionTags,
.suggestionActions,
.suggestionConversions,
.memoryExpandedTags,
.memoryExpandActions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.suggestionHeader span,
.suggestionTags span,
.memoryExpandedTags span{
  color: var(--text-secondary);
  font-size: 9px;
}

.suggestionHeader span{
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(206, 198, 195, 0.24);
}

.memorySuggestionCard h4{
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 630;
}

.suggestionContent,
.suggestionReason{
  margin: 0;
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.suggestionReason{
  color: var(--text-secondary);
  font-size: 10px;
}

.suggestionReason strong{
  font-weight: 620;
}

.suggestionActions button,
.suggestionConversions button,
.memoryExpandActions button{
  min-height: 32px;
  padding: 7px 9px;
  font-size: 10px;
}

.suggestionConversions button,
.quietButton{
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: rgba(142, 126, 115, 0.28);
  text-underline-offset: 3px;
}

.suggestionEditFields,
.memoryEditForm{
  display: grid;
  gap: 10px;
}

.suggestionEditFields label,
.memoryEditForm label,
.memoryFilters label{
  display: grid;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 10px;
}

.suggestionConflict{
  display: grid;
  gap: 8px;
  padding: 10px;
  background: rgba(225, 193, 182, 0.18);
}

.suggestionConflict p{
  margin: 0;
  color: var(--text-primary);
  font-size: 10px;
  line-height: 1.5;
}

.memoryManualCreate{
  border-bottom: 1px solid rgba(81, 78, 70, 0.09);
  padding-bottom: 16px;
}

.memoryManualCreate > summary{
  padding: 7px 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11px;
  list-style-position: inside;
}

.memoryManualCreate .memoryCreateForm{
  margin-top: 10px;
}

.memoryLibraryHeading{
  display: block;
}

.memoryFilters{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.memoryExpandActions{
  justify-content: flex-end;
}

.memoryAccordionItem{
  border-top: 1px solid rgba(81, 78, 70, 0.1);
}

.memoryAccordionItem:last-child{
  border-bottom: 1px solid rgba(81, 78, 70, 0.1);
}

.memoryAccordionItem.isDisabled .memoryAccordionSummary{
  opacity: 0.68;
}

.memoryAccordionSummary{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.memoryAccordionSummary::-webkit-details-marker{
  display: none;
}

.memorySummaryMain{
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 5px;
}

.memorySummaryMain strong{
  overflow: hidden;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.memorySummaryMeta,
.memorySummaryTags{
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 4px 7px;
}

.memorySummaryMeta i,
.memorySummaryTags i{
  color: var(--text-faint);
  font-size: 8px;
  font-style: normal;
  line-height: 1.3;
}

.memorySummaryTags i{
  color: var(--text-secondary);
}

.memorySummaryMeta .recentStateBadge.active{
  color: #768276;
}

.memorySummaryMeta .recentStateBadge.expired{
  color: #a36f68;
}

.memorySummaryMeta .recentStateBadge.timeless{
  color: var(--text-secondary);
}

.recentStateHint{
  margin: 0;
  padding: 8px 10px;
  border-left: 2px solid rgba(126, 139, 122, 0.28);
  background: rgba(126, 139, 122, 0.06);
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.6;
}

.recentStateHint.expired{
  border-left-color: rgba(163, 111, 104, 0.32);
  background: rgba(225, 193, 182, 0.1);
}

.memoryAccordionArrow{
  width: 7px;
  height: 7px;
  margin: 5px 4px 0 0;
  border-right: 1px solid var(--text-faint);
  border-bottom: 1px solid var(--text-faint);
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.memoryAccordionItem[open] .memoryAccordionArrow{
  margin-top: 8px;
  transform: rotate(225deg);
}

.memoryAccordionContent{
  padding: 0 2px 16px;
}

.memoryReadView{
  display: grid;
  gap: 11px;
  padding: 12px;
  background: rgba(250, 246, 237, 0.48);
}

.memoryFullContent{
  margin: 0;
  color: var(--text-primary);
  font-size: 11px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.memoryDetailGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 12px;
  margin: 0;
}

.memoryDetailGrid div{
  min-width: 0;
}

.memoryDetailGrid dt,
.memoryDetailGrid dd{
  margin: 0;
  font-size: 9px;
  line-height: 1.45;
}

.memoryDetailGrid dt{
  color: var(--text-faint);
}

.memoryDetailGrid dd{
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}

.memoryReadActions{
  padding-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .memoryAccordionArrow{
    transition: none;
  }
}

.settingsScreen .backupHint,
.settingsScreen .statusMessage{
  color: var(--text-secondary);
  font-size: 11px;
}

/* Typography roles */

.chatMemoryNotice{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 25px;
  padding: 4px 16px;
  background: rgba(231, 215, 200, 0.32);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 9px;
}

.chatMemoryNotice.status-pending_confirmation{
  background: rgba(225, 193, 182, 0.28);
}

.chatMemoryNotice button{
  min-height: 24px;
  margin-left: auto;
  padding: 3px 8px;
  border: 0;
  border-radius: 999px;
  background: rgba(163, 143, 134, 0.14);
  color: var(--text-primary);
  font-size: 9px;
}

.chatMemoryNotice button + button{
  margin-left: 0;
}

.chatAffectionBar{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 30px;
  gap: 9px;
  padding: 3px 16px 5px;
  background: rgba(249, 246, 241, 0.94);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 10px;
}

.missMeButton{
  min-height: 25px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(225, 193, 182, 0.4);
  color: var(--text-primary);
  box-shadow: none;
  font-size: 11px;
  font-weight: 500;
}

.missMeButton:disabled{
  opacity: 0.48;
}

.autoMessageBody{
  gap: 17px;
}

.gentleToggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--text-primary);
}

.gentleToggle > span{
  display: grid;
  gap: 4px;
}

.gentleToggle strong{
  font-size: 12px;
  font-weight: 590;
}

.gentleToggle small{
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.55;
}

.gentleToggle input[type="checkbox"],
.explicitConsent input[type="checkbox"]{
  width: 18px;
  min-width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.autoTimeGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 12px;
}

.autoTimeGrid label,
.nightIntimacyBlock > label:not(.gentleToggle),
.explicitConsent{
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 10px;
}

.autoTimeGrid > label{
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.compactDateTimeField{
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.compactDateTimeField input[type="date"],
.compactDateTimeField input[type="time"]{
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: inherit !important;
  padding-right: 29px !important;
  padding-left: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px;
  -webkit-appearance: none;
  appearance: none;
}

.compactDateTimeField input[type="date"]::-webkit-date-and-time-value,
.compactDateTimeField input[type="time"]::-webkit-date-and-time-value{
  min-width: 0;
  text-align: left;
}

.compactDateTimeField input::-webkit-calendar-picker-indicator{
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0;
}

.compactDateTimeField > svg{
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 8px;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.autoTimeGrid .compactDateTimeField{
  min-height: 44px;
  border-radius: 9px;
  background: rgba(235, 230, 220, 0.72);
  box-shadow: inset 0 0 0 1px rgba(81, 78, 70, 0.055);
  color: var(--text-primary);
}

.autoTimeGrid .compactDateTimeField input{
  min-height: 44px;
}

.quietActions{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.quietActions > span{
  flex: 0 0 100%;
  color: var(--text-secondary);
  font-size: 10px;
}

.quietActions button{
  min-height: 30px;
  padding: 6px 9px;
  border: 0;
  background: rgba(231, 215, 200, 0.48);
  color: var(--text-primary);
  box-shadow: none;
  font-size: 10px;
}

.nightIntimacyBlock{
  display: grid;
  gap: 14px;
  padding: 16px 0 2px;
  border-top: 1px solid rgba(184, 178, 170, 0.22);
}

.explicitConsent{
  grid-template-columns: 18px 1fr;
  align-items: start;
  line-height: 1.5;
}

.autoMessagePanel .successMessage{
  color: var(--success);
}

.autoMessagePanel .errorMessage{
  color: var(--danger);
}

.chatScreen,
.chatLoading,
.messageMeta,
.composer,
.composer textarea,
.sendButton{
  font-family: var(--font-sans);
}

.appHeader,
.companionIdentity,
.drawerPanel,
.drawerAvatar,
.drawerIdentity strong,
.drawerNavItem,
.drawerNote,
.settingsScreen,
.settingsScreen .screenHeading h1,
.settingsScreen summary,
.settingsScreen button,
.settingsScreen input,
.settingsScreen select,
.settingsScreen textarea{
  font-family: var(--font-sans);
}

.loveBookFeedHeader h1{
  font-family: var(--font-serif-title);
  font-weight: 400;
  letter-spacing: 0.08em;
}

.loveNoteCard blockquote,
.loveNoteMediaContent blockquote{
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.loveBookIntro,
.loveNoteMeta,
.loveNoteMeta time,
.loveBookAction,
.loveBookAction button,
.loveBookAction small{
  font-family: var(--font-sans);
}

@media (min-width: 431px) {
  .mobileViewport,
.tokenGateViewport{
    border-inline: 1px solid rgba(55, 53, 48, 0.08);
  }
}

@media (max-width: 359px) {
  .messageRow{
    max-width: 89%;
  }

  .settingsScreen{
    padding-inline: 10px;
  }

  .loveBookScreen{
    padding-inline: 0;
  }

  .loveBookPostcard blockquote{
    font-size: 19px;
  }

  .loveBookMixedCard{
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.memoryBackendStatus{
  display: grid;
  gap: 5px;
  padding-block: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.memoryBackendStatus p{
  margin: 0;
}

.memoryBackendStatus strong{
  color: var(--text-primary);
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after{
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* HomeG warm-home shell --------------------------------------------------- */

.mobileViewport{
  background: var(--background);
}

.appShell{
  background:
    radial-gradient(circle at 10% 0%, rgba(235, 207, 139, 0.13), transparent 28%),
    var(--background);
}

.appHeader{
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  min-height: calc(60px + env(safe-area-inset-top));
  padding: calc(6px + env(safe-area-inset-top)) 18px 6px;
  border-bottom: 0;
  background: rgba(243, 239, 235, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.headerQuietMark{
  color: var(--text-muted);
  font-family: Georgia, serif;
  font-size: 24px;
  transform: rotate(-9deg);
}

.companionIdentity strong{
  font-size: 13px;
  font-weight: 570;
}

.companionIdentity span{
  color: var(--text-muted);
  font-size: 9px;
}

.headerAvatar{
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 3px 10px rgba(43, 42, 40, 0.07);
}

.appContent{
  position: relative;
  min-height: 0;
  background: transparent;
}

.appContent-home,
.appContent-journal,
.appContent-memory,
.appContent-settings{
  overflow: hidden;
}

.bottomNavigation{
  position: relative;
  z-index: 20;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
  margin: 7px 12px calc(7px + env(safe-area-inset-bottom));
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px;
  background: rgba(250, 248, 245, 0.88);
  box-shadow: 0 8px 28px rgba(43, 42, 40, 0.09);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.bottomNavigation button{
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: 5px 3px 4px;
  border-radius: 19px;
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  font-size: 9px;
  font-weight: 520;
}

.bottomNavigation button.isCurrent{
  background: rgba(217, 199, 195, 0.38);
  color: var(--text-primary);
}

.bottomNavigation svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.pageScroller{
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pageScroller::-webkit-scrollbar,
.settingsScreen::-webkit-scrollbar{
  display: none;
  width: 0;
  height: 0;
}

.softCard{
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 18px;
}

.softCard-accent{
  background:
    linear-gradient(135deg, rgba(235, 207, 139, 0.16), transparent 52%),
    var(--surface-soft);
}

.softCard-glass{
  border-color: var(--glass-border);
  background: var(--glass-light);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.pillButton{
  min-height: 36px;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  box-shadow: none;
  font-size: 12px;
  font-weight: 560;
}

.pillButton-default{
  background: var(--text-primary);
  color: var(--surface);
}

.pillButton-quiet{
  background: var(--surface-muted);
  color: var(--text-secondary);
}

.pillButton-accent{
  background: var(--accent-pink);
  color: var(--text-primary);
}

.sectionHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.sectionHeader h2{
  margin: 0;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 620;
  letter-spacing: -0.02em;
}

.textAction{
  min-height: auto;
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
}

/* Home */

.homeScreen{
  display: block;
  padding: calc(25px + env(safe-area-inset-top)) 18px 34px;
}

.homeGreeting{
  margin: 0 2px 28px;
}

.homeGreeting p,
.homeGreeting h1,
.homeGreeting span{
  margin: 0;
}

.homeGreeting p{
  color: var(--text-muted);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.homeGreeting h1{
  margin-top: 7px;
  font-family: ui-serif, Georgia, "Songti SC", serif;
  font-size: 31px;
  font-weight: 560;
  letter-spacing: -0.035em;
}

.homeGreeting span{
  display: block;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 13px;
}

.anniversaryHeroButton{
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0 0 30px;
  padding: 0;
  border-radius: var(--radius-xl);
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

.anniversaryHero{
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 24px;
}

.anniversaryHero > div{
  position: relative;
  z-index: 1;
}

.eyebrow{
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 0.17em;
}

.anniversaryHero h2,
.anniversaryHero p{
  margin: 0;
}

.anniversaryHero h2{
  margin-top: 30px;
  font-size: 17px;
  font-weight: 570;
}

.anniversaryHero strong{
  display: block;
  margin-top: 4px;
  font-family: ui-serif, Georgia, serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
}

.anniversaryHero p{
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 12px;
}

.lineArtHouse{
  position: absolute;
  right: 15px;
  bottom: 13px;
  width: 120px;
  color: rgba(43, 42, 40, 0.24);
  transform: rotate(1.5deg);
}

.lineArtHouse svg{
  width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

.homeModule{
  margin-bottom: 30px;
}

.todoCard{
  padding: 7px 17px 13px;
}

.todoList{
  display: grid;
}

.todoRow{
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
}

.todoRow input{
  appearance: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 1px 0 0;
  padding: 0;
  border: 1px solid var(--border-medium);
  border-radius: 50%;
  background: transparent;
}

.todoRow input:checked{
  border-color: var(--text-secondary);
  background: var(--text-secondary);
  box-shadow: inset 0 0 0 4px var(--surface);
}

.todoRow > span{
  display: grid;
  gap: 4px;
}

.todoRow strong{
  font-size: 13px;
  font-weight: 510;
  line-height: 1.5;
}

.todoRow small{
  color: var(--text-muted);
  font-size: 9px;
}

.todoRow.isDone strong{
  color: var(--text-muted);
  text-decoration: line-through;
}

.todoComposer{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding-top: 13px;
}

.todoComposer input{
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  background: var(--background-alt);
  font-size: 12px;
}

.quietCorners{
  display: grid;
  gap: 11px;
}

.quietCorners .sectionHeader{
  margin-bottom: 0;
}

.placeholderCard{
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 13px;
  align-items: center;
  min-height: 104px;
  padding: 17px;
  box-shadow: none;
}

.lineArtSlot{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-medium);
  border-radius: 50%;
  color: var(--text-secondary);
  font-family: Georgia, serif;
  font-size: 25px;
}

.radioLine{
  transform: rotate(-8deg);
}

.placeholderCard h3,
.placeholderCard p{
  margin: 0;
}

.placeholderCard h3{
  font-size: 14px;
  font-weight: 580;
}

.placeholderCard p{
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.45;
}

.underConstruction{
  position: absolute;
  right: 14px;
  bottom: 8px;
  color: var(--text-muted);
  font-size: 8px;
  letter-spacing: 0.08em;
}

/* Memory */

.memoryScreen{
  padding: calc(25px + env(safe-area-inset-top)) 18px 36px;
}

.pageIntro{
  margin: 0 2px 25px;
}

.pageIntro p,
.pageIntro h1,
.pageIntro span{
  margin: 0;
}

.pageIntro p{
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 0.17em;
}

.pageIntro h1{
  margin-top: 6px;
  font-family: ui-serif, Georgia, "Songti SC", serif;
  font-size: 30px;
  font-weight: 560;
}

.pageIntro span{
  display: block;
  margin-top: 7px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.55;
}

.memoryOverview{
  min-height: 180px;
  margin-bottom: 30px;
  padding: 22px;
  border-radius: var(--radius-xl);
}

.memoryOverview > span{
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 0.16em;
}

.memoryOverview strong{
  display: block;
  margin-top: 19px;
  font-family: ui-serif, Georgia, serif;
  font-size: 45px;
  font-weight: 480;
  line-height: 1;
}

.memoryOverview h2,
.memoryOverview p{
  margin: 0;
}

.memoryOverview h2{
  margin-top: 2px;
  font-size: 18px;
  font-weight: 520;
}

.memoryOverview p{
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 11px;
}

.memorySection{
  margin-bottom: 30px;
}

.anniversaryList{
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.anniversaryList button{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 64px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
  text-align: left;
}

.anniversaryList button:last-child{
  border-bottom: 0;
}

.anniversaryList button.isSelected{
  background: rgba(217, 199, 195, 0.24);
}

.anniversaryList button > span{
  display: grid;
  gap: 4px;
}

.anniversaryList strong{
  font-size: 13px;
  font-weight: 560;
}

.anniversaryList small{
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 450;
}

.anniversaryList b{
  color: var(--text-secondary);
  font-family: ui-serif, Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
}

.memoryTimeline{
  position: relative;
  display: grid;
  gap: 0;
  padding-left: 27px;
}

.memoryTimeline::before{
  content: "";
  position: absolute;
  top: 9px;
  bottom: 18px;
  left: 7px;
  width: 1px;
  background: var(--border-medium);
}

.memoryTimeline article{
  position: relative;
  padding: 0 0 27px 2px;
}

.memoryTimeline article > i{
  position: absolute;
  top: 5px;
  left: -25px;
  width: 11px;
  height: 11px;
  border: 3px solid var(--background);
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 1px var(--border-medium);
}

.memoryTimeline article.isSelected > i{
  background: var(--accent-pink);
}

.memoryTimeline time{
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 0.05em;
}

.memoryTimeline h3,
.memoryTimeline p{
  margin: 0;
}

.memoryTimeline h3{
  margin-top: 5px;
  font-size: 14px;
  font-weight: 570;
}

.memoryTimeline p{
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.6;
}

.timelineSketch{
  position: absolute;
  right: 4px;
  top: 2px;
  color: rgba(43, 42, 40, 0.17);
  font-size: 33px;
  transform: rotate(7deg);
}

.memoryEnding{
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 5px 0 10px;
}

.memoryEnding small{
  color: var(--text-muted);
  font-size: 9px;
}

/* Chat room */

.chatScreen{
  isolation: isolate;
  background: var(--background);
}

.chatBackdrop{
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(235, 207, 139, 0.14), transparent 34%),
    linear-gradient(180deg, #f2ede7, #e9e2dc);
  background-position: center;
  background-size: cover;
}

.chatBackground-mist .chatBackdrop{
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.5), transparent 32%),
    linear-gradient(155deg, #dfe6e7 0%, #ece7e0 54%, #e6ddd5 100%);
}

.chatBackground-custom .chatBackdrop{
  filter: saturate(0.72) contrast(0.9);
}

.chatScreen::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(238, 232, 227, 0.32);
  pointer-events: none;
}

.chatBackground-custom::before{
  background: rgba(238, 232, 227, 0.5);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}

.chatAffectionBar,
.chatMemoryNotice{
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(250, 248, 245, 0.54);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.chatLog{
  position: relative;
  z-index: 1;
  gap: 12px;
  padding: 18px 14px 18px;
}


.messageAttachment{
  display: block;
  width: 96px;
  height: 96px;
  margin: 0;
  border-radius: 14px;
  object-fit: cover;
}

.messageAttachmentButton{
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: fit-content;
  max-width: 96px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 15px;
  background: transparent;
  box-shadow: 0 5px 16px rgba(28, 24, 21, 0.09);
  cursor: zoom-in;
}

.messageAttachmentButton:focus-visible{
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.attachmentLightbox{
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  background: #080808;
  cursor: zoom-out;
}

.attachmentLightbox > img{
  display: block;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  object-fit: contain;
  touch-action: pinch-zoom;
  cursor: default;
}

.attachmentLightboxClose{
  position: absolute;
  z-index: 1;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font: 300 28px/1 var(--font-sans);
}

.composer{
  position: relative;
  z-index: 3;
  grid-template-columns: 40px minmax(0, 1fr) 42px;
  gap: 7px;
  padding: 8px 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.58);
  background: rgba(250, 248, 245, 0.56);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.composer textarea{
  height: 42px;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  font-size: 14px;
}

.attachmentButton,
.sendButton{
  width: 42px;
  height: 42px;
  min-height: 42px;
}

.attachmentButton{
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  color: var(--text-secondary);
  box-shadow: none;
}

.attachmentButton svg{
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.sendButton{
  background: rgba(126, 118, 111, 0.88);
}

.attachmentPreview{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 48px 1fr 30px;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.48);
}

/* Attachment selection stays visual: filenames are deliberately omitted. */
.attachmentPreview{
  grid-template-columns: repeat(4, 48px);
  justify-content: start;
  overflow-x: auto;
  scrollbar-width: none;
}

.attachmentPreview::-webkit-scrollbar{
  display: none;
}

.attachmentPreviewItem{
  position: relative;
  width: 48px;
  height: 48px;
}

.attachmentPreview .attachmentPreviewItem > button{
  position: absolute;
  top: -7px;
  right: -7px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1;
}

.attachmentPreview img{
  width: 48px;
  height: 48px;
  border-radius: 11px;
  object-fit: cover;
}

.attachmentPreview > div{
  min-width: 0;
  display: grid;
  gap: 3px;
}

.attachmentPreview strong,
.attachmentPreview small{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachmentPreview strong{
  font-size: 11px;
  font-weight: 560;
}

.attachmentPreview small{
  color: var(--text-muted);
  font-size: 8px;
}

.attachmentPreview button{
  width: 30px;
  min-width: 30px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text-secondary);
  box-shadow: none;
  font-size: 17px;
}

.attachmentStatus{
  grid-column: 1 / -1;
  margin: 0 4px;
  color: var(--text-secondary);
  font-size: 9px;
}

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

/* Settings additions */

.settingsScreen{
  padding: 22px 16px 34px;
  background: transparent;
}

.settingsScreen .screenHeading{
  padding: 5px 2px 11px;
}

.settingsScreen .screenHeading h1{
  font-family: ui-serif, Georgia, "Songti SC", serif;
  font-size: 28px;
  font-weight: 560;
}

.settingsScreen .memoryPanel{
  border-color: var(--border-soft);
  border-radius: var(--radius-lg);
  background: rgba(250, 248, 245, 0.78);
  box-shadow: none;
}

.backgroundChoices{
  display: grid;
  gap: 9px;
}

.backgroundChoice{
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 11px;
  align-items: center;
  min-height: 66px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
  text-align: left;
}

.backgroundChoice.isSelected{
  border-color: var(--border-soft);
  background: var(--background-alt);
}

.backgroundChoice > i{
  display: block;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  background-position: center;
  background-size: cover;
}

.backgroundChoice-linen > i{
  background: linear-gradient(145deg, #f6f1eb, #e5dcd3);
}

.backgroundChoice-mist > i{
  background: linear-gradient(145deg, #d8e1e3, #ede5dc);
}

.backgroundChoice-custom > i{
  background-color: var(--surface-muted);
  background-image: linear-gradient(135deg, transparent 46%, rgba(126, 118, 111, 0.22) 47%, rgba(126, 118, 111, 0.22) 51%, transparent 52%);
}

.backgroundChoice > span{
  display: grid;
  gap: 4px;
}

.backgroundChoice strong{
  font-size: 12px;
  font-weight: 560;
}

.backgroundChoice small{
  color: var(--text-muted);
  font-size: 9px;
}

.backgroundStatus{
  margin: 10px 2px 0;
  color: var(--text-secondary);
  font-size: 10px;
}

@media (max-width: 359px) {
  .homeScreen,
.memoryScreen{
    padding-inline: 14px;
  }

  .bottomNavigation{
    margin-inline: 8px;
  }

  .bottomNavigation button span{
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottomNavigation,
.chatBackdrop,
.composer{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Today checklist and compact corners ------------------------------------ */

.todoSummaryButton{
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
  text-align: left;
}

.todoSummaryCard{
  padding: 8px 17px 12px;
}

.todoSummaryRow{
  display: grid;
  grid-template-columns: 17px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 38px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 12px;
  line-height: 1.45;
}

.todoSummaryRow i{
  width: 15px;
  height: 15px;
  border: 1px solid rgba(85, 118, 201, 0.5);
  border-radius: 4px;
}

.todoSummaryEmpty{
  margin: 17px 0 13px;
  color: var(--text-secondary);
  font-size: 12px;
}

.todoSummaryCard footer{
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 11px;
  color: var(--text-muted);
  font-size: 9px;
}

.todoSummaryCard footer b{
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 17px;
  font-weight: 400;
}

.todoDetailScreen{
  padding: calc(12px + env(safe-area-inset-top)) 12px 28px;
  background: #ede8e1;
}

.todoDetailHeader{
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  min-height: 48px;
  margin-bottom: 8px;
}

.todoDetailHeader button{
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
}

.todoDetailHeader button svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.todoDetailHeader > span{
  color: var(--text-muted);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-align: center;
}

.checklistPaper{
  position: relative;
  min-height: calc(100% - 62px);
  overflow: hidden;
  padding: 29px 31px 42px 27px;
  border: 1px solid rgba(85, 118, 201, 0.08);
  border-radius: 3px 16px 7px 3px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)),
    #f7f0e4;
  box-shadow: 0 9px 28px rgba(43, 42, 40, 0.055);
}

.checklistBlueRule{
  position: absolute;
  top: -8px;
  right: 7px;
  bottom: -8px;
  width: 7px;
  background: #5576c9;
  transform: rotate(1.4deg);
  transform-origin: center;
}

.checklistDate{
  margin: 0;
  color: rgba(85, 118, 201, 0.68);
  font-size: 9px;
  letter-spacing: 0.05em;
}

.checklistPaper > h1{
  margin: 7px 0 0;
  color: #4568bd;
  font-family: ui-serif, Georgia, "Songti SC", serif;
  font-size: clamp(34px, 10vw, 44px);
  font-weight: 520;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.checklistIntro{
  max-width: 240px;
  margin: 13px 0 27px;
  color: rgba(69, 104, 189, 0.62);
  font-family: ui-serif, Georgia, "Songti SC", serif;
  font-size: 11px;
}

.checklistGroup{
  display: grid;
  gap: 4px;
}

.checklistItem{
  display: grid;
  grid-template-columns: 21px 1fr;
  gap: 9px;
  align-items: start;
  min-width: 0;
  padding: 5px 0;
  color: #4568bd;
}

.checklistItem input{
  appearance: none;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(69, 104, 189, 0.72);
  border-radius: 4px;
  background: transparent;
}

.checklistItem input:checked{
  background:
    linear-gradient(135deg, transparent 43%, #f7f0e4 44% 54%, transparent 55%),
    #5576c9;
}

.checklistItem > span,
.checklistItem label > span{
  display: grid;
  min-width: 0;
  gap: 3px;
}

.checklistItem strong{
  font-family: ui-serif, Georgia, "Songti SC", serif;
  font-size: 15px;
  font-weight: 450;
  line-height: 1.35;
}

.checklistItem small{
  color: rgba(69, 104, 189, 0.55);
  font-family: var(--font-sans);
  font-size: 8px;
}

.checklistEmpty{
  margin: 2px 0 11px;
  color: rgba(69, 104, 189, 0.56);
  font-family: ui-serif, Georgia, "Songti SC", serif;
  font-size: 14px;
}

.checklistComposer{
  display: grid;
  grid-template-columns: 1fr 36px;
  gap: 7px;
  margin-top: 22px;
  padding-top: 13px;
  border-top: 1px solid rgba(85, 118, 201, 0.17);
}

.checklistComposer input{
  min-height: 38px;
  border: 1px solid rgba(85, 118, 201, 0.23);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  color: #4568bd;
  font-family: ui-serif, Georgia, "Songti SC", serif;
  font-size: 13px;
}

.checklistComposer input::placeholder{
  color: rgba(69, 104, 189, 0.45);
}

.checklistComposer button{
  width: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 8px;
  background: #5576c9;
  color: #f7f0e4;
  box-shadow: none;
  font-size: 19px;
  font-weight: 400;
}

.todoReminderDraft{
  grid-column: 1 / -1;
  color: rgba(69, 104, 189, 0.62);
  font: 500 10px/1.4 var(--font-body);
}

.todoReminderDraft summary{
  width: fit-content;
  cursor: pointer;
  list-style: none;
}

.todoReminderDraft summary::-webkit-details-marker{
  display: none;
}

.todoReminderDraft summary::before{
  content: "＋ ";
}

.todoReminderDraft[open] summary::before{
  content: "− ";
}

.todoReminderDraft > div{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 9px;
}

.todoReminderDraft label{
  display: grid;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  gap: 4px;
}

.todoReminderDraft input{
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  padding: 5px 7px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 11px;
}

.todoReminderDraft .compactDateTimeField{
  min-height: 34px;
  border: 1px solid rgba(85, 118, 201, 0.23);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  color: #4568bd;
}

.todoReminderDraft .compactDateTimeField input{
  min-height: 32px;
  padding-left: 7px !important;
  font-size: 10px;
}

.completedChecklist{
  margin-top: 28px;
  padding-top: 17px;
  border-top: 1px solid rgba(85, 118, 201, 0.17);
}

.completedChecklist h2{
  margin: 0 0 8px;
  color: rgba(69, 104, 189, 0.58);
  font-family: ui-serif, Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.completedChecklist .checklistItem.isDone{
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.completedChecklist .checklistItem label{
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 21px 1fr;
  gap: 9px;
  align-items: start;
  min-width: 0;
}

.completedChecklist .checklistItem strong{
  opacity: 0.5;
  text-decoration: line-through;
}

.todoDeleteButton{
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(69, 104, 189, 0.18);
  border-radius: 999px;
  background: transparent;
  color: rgba(69, 104, 189, 0.72);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
}

.cornerGrid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px 8px;
  padding: 4px 0 2px;
}

.cornerGrid button{
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
}

.cornerGrid button > span{
  display: grid;
  place-items: center;
  width: 62px;
  max-width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 22px;
  background: rgba(250, 248, 245, 0.72);
  box-shadow: 0 4px 14px rgba(43, 42, 40, 0.035);
}

.cornerGrid svg{
  width: 28px;
  height: 28px;
  fill: none;
  stroke: #464542;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.cornerGrid strong{
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 480;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cornerStatus{
  min-height: 16px;
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 9px;
  text-align: center;
}

@media (max-width: 359px) {
  .checklistPaper{
    padding-inline: 22px 27px;
  }

  .cornerGrid button > span{
    width: 55px;
    border-radius: 19px;
  }
}

/* Final cascade: glass chat and hand-drawn home -------------------------- */

.chatBackdrop{
  background:
    radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.68) 0 8%, transparent 29%),
    radial-gradient(circle at 86% 38%, rgba(217, 199, 195, 0.32) 0 9%, transparent 30%),
    radial-gradient(circle at 38% 88%, rgba(200, 214, 229, 0.2) 0 10%, transparent 31%),
    linear-gradient(155deg, #f2ede7 0%, #e9e2dc 58%, #eee8e3 100%);
}

.chatBackground-mist .chatBackdrop{
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.72) 0 9%, transparent 31%),
    radial-gradient(circle at 82% 56%, rgba(200, 214, 229, 0.42) 0 12%, transparent 34%),
    linear-gradient(155deg, #dce4e5 0%, #ece7e0 54%, #e6ddd5 100%);
}


.composer{
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-inline: 0;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px) saturate(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(1.04);
}

.lineArtHouse{
  right: 9px;
  bottom: 5px;
  width: 145px;
  color: rgba(43, 42, 40, 0.38);
}

.lineArtHouse svg{
  overflow: visible;
  stroke-width: 1.35;
}

.lineArtHouse text{
  fill: currentColor;
  stroke: none;
  font-family: "Comic Sans MS", "Bradley Hand", cursive;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.lineArtHouse{
  transform: none;
}


.chatBackground-custom::before{
  background: rgba(238, 232, 227, 0.26);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.composer{
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.1)),
    rgba(255, 255, 255, 0.06);
}


/* Interactive Liquid Glass ------------------------------------------------
   The SVG displacement is progressive enhancement; the layered glass remains
   readable when a browser cannot apply an SVG filter to a backdrop layer. */
.liquidGlassFilter{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}


/* Controls use a stronger glass layer than message content. */
.appHeader .companionIdentity,
.missMeButton,
.composer{
  border-color: rgba(255, 255, 255, 0.68);
  background:
    radial-gradient(120% 100% at 42% 0%, rgba(255, 255, 255, 0.2), transparent 48%),
    rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.66),
    inset -1px -1px 0 rgba(255, 255, 255, 0.09),
    0 5px 15px rgba(20, 18, 16, 0.075);
  backdrop-filter: blur(17px) saturate(1.24) contrast(1.035);
  -webkit-backdrop-filter: blur(17px) saturate(1.24) contrast(1.035);
}

.missMeButton{
  background:
    radial-gradient(120% 100% at 38% 0%, rgba(255, 255, 255, 0.25), transparent 50%),
    rgba(225, 193, 182, 0.29);
}


/* Calm editorial Home + Memory typography: keep this after legacy rules. */
.homeScreen,
.memoryScreen,
.homeScreen button,
.memoryScreen button,
.homeScreen input,
.memoryScreen input{
  font-family: var(--font-body);
}

.homeScreen .homeGreeting h1,
.homeScreen .anniversaryHero h2,
.homeScreen .sectionHeader h2,
.memoryScreen .pageIntro h1,
.memoryScreen .sectionHeader h2,
.memoryScreen .memoryOverview h2,
.memoryScreen .anniversaryList strong,
.memoryScreen .memoryTimeline h3{
  font-family: var(--font-heading);
  font-style: normal;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.homeScreen .homeGreeting h1{
  margin-top: 8px;
  font-size: clamp(46px, 12.5vw, 52px);
  font-weight: 560;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.homeScreen .anniversaryHero h2{
  margin-top: 24px;
  font-size: 29px;
  font-weight: 540;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.homeScreen .anniversaryMainCount,
.homeScreen .anniversaryMainCount .anniversaryDayNumber,
.homeScreen .anniversaryMainCount .anniversaryDayCopy{
  font-family: var(--font-heading);
  font-size: clamp(30px, 8.6vw, 35px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.homeScreen .anniversaryMainCount .anniversaryDayNumber,
.homeScreen .anniversaryMainCount .anniversaryDayCopy{
  font-size: 1em;
}

.homeScreen .sectionHeader{
  margin-bottom: 15px;
  padding-right: calc(3px + env(safe-area-inset-right));
}

.homeScreen .sectionHeader h2,
.memoryScreen .sectionHeader h2{
  font-size: 26px;
  font-weight: 540;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.homeScreen .textAction{
  flex: 0 0 auto;
  margin-right: 0;
  padding-right: 1px;
  font-family: var(--font-body);
  font-size: 12px;
  font-style: normal;
  font-weight: 520;
  white-space: nowrap;
  text-shadow: none;
}

.homeScreen .todoSummaryRow,
.homeScreen .todoSummaryRow span,
.todoDetailScreen .checklistItem,
.todoDetailScreen .checklistItem strong{
  font-family: var(--font-body);
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  text-shadow: none;
}

.homeScreen .cornerGrid strong,
.homeScreen .cornerStatus,
.homeScreen .anniversaryHero .eyebrow,
.homeScreen .anniversaryHero p{
  font-family: var(--font-body);
  font-style: normal;
  text-shadow: none;
}

.memoryScreen{
  padding-top: calc(28px + env(safe-area-inset-top));
  padding-bottom: 48px;
}

.memoryScreen .pageIntro{
  margin-bottom: 30px;
}

.memoryScreen .pageIntro p{
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 560;
  letter-spacing: 0.16em;
  text-shadow: none;
}

.memoryScreen .pageIntro h1{
  margin-top: 8px;
  font-size: 42px;
  font-weight: 550;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.memoryScreen .pageIntro span{
  max-width: 330px;
  margin-top: 10px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  line-height: 1.55;
  text-shadow: none;
}

.memoryScreen .memoryOverview{
  min-height: 190px;
  margin-bottom: 36px;
  padding: 24px;
  border: 1px solid rgba(43, 42, 40, 0.055);
  background: rgba(250, 248, 245, 0.76);
  box-shadow: 0 10px 28px rgba(43, 42, 40, 0.045);
}

.memoryScreen .memoryOverview > span{
  font-family: var(--font-body);
  font-size: 10px;
  font-style: normal;
  font-weight: 540;
  letter-spacing: 0.13em;
  text-shadow: none;
}

.memoryScreen .memoryOverview .memoryOverviewStatus{
  max-width: 285px;
  margin-top: 24px;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: clamp(30px, 8.4vw, 34px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.memoryScreen .memoryOverview h2{
  margin-top: 11px;
  font-size: 23px;
  font-weight: 540;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.memoryScreen .memoryOverview p{
  margin-top: 12px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  font-style: normal;
  line-height: 1.55;
  text-shadow: none;
}

.memoryScreen .memorySection{
  margin-bottom: 36px;
}

.memoryScreen .anniversaryList{
  display: grid;
  gap: 10px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.memoryScreen .anniversaryList button{
  min-height: 74px;
  padding: 14px 16px;
  border: 1px solid rgba(43, 42, 40, 0.06);
  border-radius: 18px;
  background: rgba(250, 248, 245, 0.66);
  box-shadow: 0 5px 16px rgba(43, 42, 40, 0.025);
}

.memoryScreen .anniversaryList button:last-child{
  border-bottom: 1px solid rgba(43, 42, 40, 0.06);
}

.memoryScreen .anniversaryList button.isSelected{
  border-color: rgba(163, 143, 134, 0.12);
  background: rgba(231, 215, 200, 0.5);
}

.memoryScreen .anniversaryList button > span{
  gap: 6px;
}

.memoryScreen .anniversaryList strong{
  font-size: 16px;
  font-weight: 540;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

.memoryScreen .anniversaryList small,
.memoryScreen .anniversaryList b{
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-shadow: none;
}

.memoryScreen .anniversaryList b{
  max-width: 104px;
  text-align: right;
  white-space: normal;
}

.todoDetailScreen .checklistComposer{
  margin: 0 0 25px;
  padding: 0 0 18px;
  border-top: 0;
  border-bottom: 1px solid rgba(85, 118, 201, 0.17);
}

.checklistDateFeed,
.checklistDateSection{
  display: grid;
}

.checklistDateFeed{
  gap: 22px;
}

.checklistDateSection{
  gap: 8px;
}

.checklistDateSection > h2,
.checklistDateSection > h3{
  margin: 0;
  color: rgba(69, 104, 189, 0.58);
  font-family: var(--font-body);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.09em;
}

.checklistDateSectionCompleted{
  margin-top: 14px;
}

.completedChecklist .checklistDateSectionCompleted > h3{
  font-family: var(--font-body);
  font-size: 10px;
}

.memoryScreen .memoryTimeline{
  gap: 4px;
}

.memoryScreen .memoryTimeline article{
  padding-bottom: 30px;
}

.memoryScreen .memoryTimeline time,
.memoryScreen .memoryTimeline p{
  font-family: var(--font-body);
  font-style: normal;
  text-shadow: none;
}

.memoryScreen .memoryTimeline h3{
  margin-top: 6px;
  font-size: 17px;
  font-weight: 530;
  letter-spacing: -0.015em;
}

.memoryScreen .memoryTimeline p{
  max-width: 300px;
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.65;
}

.memoryScreen .memoryEnding,
.memoryScreen .memoryEnding button,
.memoryScreen .memoryEnding small{
  font-family: var(--font-body);
  font-style: normal;
  text-shadow: none;
}

/* Home editorial typography — canonical final rules --------------------- */

.homeScreen,
.homeScreen button,
.homeScreen input,
.homeScreen .todoSummaryRow,
.homeScreen .cornerGrid,
.todoDetailScreen,
.bottomNavigation{
  font-family: var(--font-body);
}

.homeGreeting p,
.homeGreeting span,
.anniversaryHero .eyebrow,
.anniversaryHero p,
.homeScreen .textAction,
.todoSummaryRow,
.todoSummaryCard footer,
.cornerGrid,
.cornerStatus{
  font-family: var(--font-body);
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.homeGreeting h1,
.homeScreen .anniversaryHero h2,
.homeScreen .anniversaryMainCount,
.homeScreen .sectionHeader h2{
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.homeGreeting{
  margin-bottom: 30px;
}

.homeGreeting p{
  color: rgba(43, 42, 40, 0.48);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.015em;
}

.homeGreeting h1{
  margin-top: 8px;
  color: var(--text-primary);
  font-size: 38px;
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.homeGreeting span{
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
}

.anniversaryHero{
  min-height: 224px;
  padding: 24px;
}

.anniversaryHero > div{
  width: min(72%, 252px);
}

.anniversaryHero .eyebrow{
  color: rgba(43, 42, 40, 0.47);
  font-size: 11px;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: 0.16em;
}

.homeScreen .anniversaryHero h2{
  margin-top: 24px;
  color: var(--text-primary);
  font-size: 26px;
  font-weight: 580;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.homeScreen .anniversaryMainCount{
  max-width: none;
  margin-top: 12px;
  color: var(--text-primary);
  font-size: clamp(29px, 8.1vw, 33px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.homeScreen .anniversaryHero p{
  margin-top: 13px;
  color: rgba(43, 42, 40, 0.55);
  font-size: 13px;
  font-weight: 450;
  line-height: 1.35;
}

.homeScreen .sectionHeader{
  margin-bottom: 16px;
}

.homeScreen .sectionHeader h2{
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 580;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.homeScreen .textAction{
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 520;
  letter-spacing: 0.01em;
}

.todoSummaryRow{
  min-height: 44px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.todoSummaryEmpty{
  font-family: var(--font-body);
  font-size: 14px;
}

.todoSummaryCard footer{
  font-size: 10px;
  letter-spacing: 0.01em;
}

.cornerGrid strong,
.bottomNavigation button,
.bottomNavigation button span{
  font-family: var(--font-body);
  text-shadow: none;
}


/* True clear glass: no white fill, with a quiet backdrop to refract. */
.chatBackdrop{
  background:
    radial-gradient(ellipse at 7% 30%, rgba(200, 214, 229, 0.42) 0 11%, transparent 43%),
    radial-gradient(ellipse at 96% 72%, rgba(217, 199, 195, 0.48) 0 12%, transparent 46%),
    radial-gradient(ellipse at 54% 4%, rgba(235, 207, 139, 0.18) 0 8%, transparent 35%),
    linear-gradient(155deg, #f1ebe5 0%, #e7dfd7 56%, #eee8e3 100%);
}

.chatScreen::before,
.chatBackground-custom::before{
  background: rgba(243, 239, 235, 0.06);
}


/* Transparent chat header and corrected anniversary typography. */
.appHeader{
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 -1px 0 rgba(43, 42, 40, 0.025);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.companionIdentity strong{
  color: rgba(43, 42, 40, 0.74);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

.companionIdentity span{
  color: rgba(126, 118, 111, 0.58);
}

.anniversaryHero .anniversaryMainCount{
  max-width: 205px;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.35;
}

.memoryOverview .memoryOverviewStatus{
  max-width: 270px;
  margin-top: 24px;
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.25;
}

.memoryOverview h2{
  margin-top: 8px;
}

.anniversaryList button > b{
  max-width: 115px;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.4;
  text-align: right;
  white-space: normal;
}

/* Chat header: only a small clear identity pill in the center. */
.appHeader{
  min-height: calc(58px + env(safe-area-inset-top));
  padding: calc(7px + env(safe-area-inset-top)) 18px 5px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.appHeader .companionIdentity{
  justify-self: center;
  min-width: 92px;
  width: fit-content;
  padding: 7px 18px 6px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 5px 16px rgba(43, 42, 40, 0.045);
  backdrop-filter: blur(14px) saturate(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

.appHeader .companionIdentity strong{
  color: rgba(43, 42, 40, 0.72);
  font-size: 13px;
  font-weight: 560;
}

.appHeader .companionIdentity span{
  color: rgba(126, 118, 111, 0.52);
  font-size: 8px;
}

/* Floating identity lens: no full-width header block. */
.appHeader{
  position: absolute;
  z-index: 12;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  min-height: 0;
  padding: calc(9px + env(safe-area-inset-top)) 18px 0;
  pointer-events: none;
}

.appHeader .companionIdentity{
  pointer-events: auto;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.025);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.62),
    inset -1px -1px 0 rgba(255, 255, 255, 0.13),
    0 6px 18px rgba(43, 42, 40, 0.055);
  backdrop-filter: blur(8px) saturate(1.3) contrast(1.04);
  -webkit-backdrop-filter: blur(8px) saturate(1.3) contrast(1.04);
}

.chatLog{
  padding-top: calc(82px + env(safe-area-inset-top));
}

/* More contrast behind glass, still quiet and low-saturation. */
.chatBackdrop{
  background:
    radial-gradient(ellipse at -8% 27%, rgba(166, 188, 205, 0.58) 0 12%, transparent 46%),
    radial-gradient(ellipse at 108% 67%, rgba(211, 177, 164, 0.58) 0 14%, transparent 49%),
    radial-gradient(ellipse at 54% -4%, rgba(235, 207, 139, 0.24) 0 10%, transparent 38%),
    linear-gradient(155deg, #f0e9e2 0%, #e3d9d0 56%, #eee7e1 100%);
}


/* Restore the original calm editorial English typography on Home. */
.homeScreen .homeGreeting h1,
.homeScreen .anniversaryHero h2,
.homeScreen .anniversaryMainCount,
.homeScreen .sectionHeader h2{
  font-family: var(--font-heading);
  font-weight: 500;
}

.homeScreen .anniversaryHero h2{
  letter-spacing: -0.025em;
}

.homeScreen .anniversaryMainCount{
  font-size: 19px;
  font-style: italic;
  letter-spacing: -0.015em;
}

/* Final Chat UI: light private glass room ------------------------------- */

.chatScreen{
  background: #eee8e3;
}

.chatBackdrop{
  filter: none;
  background:
    radial-gradient(ellipse at 0% 22%, rgba(186, 202, 214, 0.42), transparent 42%),
    radial-gradient(ellipse at 100% 72%, rgba(214, 187, 176, 0.42), transparent 44%),
    linear-gradient(155deg, #f3eee9 0%, #e7ded7 58%, #efe9e3 100%);
}

.chatBackground-custom .chatBackdrop{
  filter: saturate(0.92) contrast(0.96);
}

.chatScreen::before{
  background: rgba(43, 42, 40, 0.04);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chatBackground-custom::before{
  background: rgba(43, 42, 40, 0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.appHeader{
  padding-top: calc(8px + env(safe-area-inset-top));
}

.appHeader .companionIdentity{
  min-width: 82px;
  min-height: 46px;
  padding: 5px 15px 4px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  background: rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 4px 14px rgba(0, 0, 0, 0.065);
  backdrop-filter: blur(16px) saturate(1.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
}

.appHeader .companionIdentity strong{
  font-size: 12px;
  font-weight: 540;
}

.appHeader .companionIdentity span{
  font-size: 8px;
}

.chatLog{
  gap: 10px;
  padding: calc(70px + env(safe-area-inset-top)) 14px 14px;
}

.messageRow{
  gap: 2px;
}

.messageLine{
  gap: 7px;
  align-items: flex-start;
}

.chatAvatar{
  flex-basis: 30px;
  width: 30px;
  height: 30px;
}


.messageMeta{
  min-height: 14px;
  padding: 0 37px;
  color: rgba(43, 42, 40, 0.38);
  font-size: 11px;
  line-height: 1.2;
}


.chatMemoryNotice,
.chatAffectionBar{
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chatAffectionBar{
  min-height: 28px;
  padding: 2px 14px 3px;
}

.missMeButton{
  background: rgba(242, 220, 213, 0.5);
  box-shadow: 0 3px 10px rgba(43, 42, 40, 0.04);
}

.composer{
  grid-template-columns: 38px minmax(0, 1fr) 40px;
  gap: 5px;
  margin: 5px 10px 7px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 25px;
  background: rgba(255, 255, 255, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 4px 14px rgba(0, 0, 0, 0.065);
  backdrop-filter: blur(16px) saturate(1.06);
  -webkit-backdrop-filter: blur(16px) saturate(1.06);
}

.composer textarea{
  height: 38px;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.45;
}

.attachmentButton,
.sendButton{
  width: 38px;
  height: 38px;
  min-height: 38px;
}

.attachmentButton{
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.2);
  color: rgba(43, 42, 40, 0.56);
}

.sendButton{
  background: rgba(126, 118, 111, 0.7);
  color: rgba(255, 255, 255, 0.9);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  

  

  .appHeader .companionIdentity,
.composer{
    background: rgba(255, 255, 255, 0.52);
  }
}

/* Edge-origin back navigation shared by Chat, Window List and Today's Checklist. */
.edgeSwipeBackSurface{
  position: relative;
  z-index: 2;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  touch-action: pan-y pinch-zoom;
}

.edgeSwipeBackHandle{
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 24;
  display: block;
  width: 24px;
  background: transparent;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

/* The app owns left-edge back navigation. Keep iOS's right-edge forward
   history gesture from pulling a stale Chat surface back over the current one. */
.edgeSwipeForwardGuard{
  position:fixed;
  inset:0 0 0 auto;
  z-index:24;
  display:block;
  width:24px;
  background:transparent;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}

.appShell-chat,
.appContent-chat{
  overscroll-behavior-x:none;
}

.mobileViewport.hasActiveSwipeBackPreview{
  position: relative;
}

.edgeSwipeBackPreviewShell{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0.001;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: paint;
}

.mobileViewport.hasActiveSwipeBackPreview > .edgeSwipeBackPreviewShell{
  opacity: 1;
}

.edgeSwipeBackPreviewShell.isEdgeSwipeHandoff{
  z-index: 12;
}

.edgeSwipeBackPreviewShell .appContent > *{
  animation: none !important;
}

.edgeSwipeBackPreviewShell .conversationWindowsScreen{
  height: 100%;
}

.homeSwipeBackPreview{
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 0%, rgba(235, 207, 139, 0.13), transparent 28%),
    var(--background);
}

.homeSwipePreviewHero{
  min-height: 180px;
}

.homeSwipePreviewCorner{
  display: grid;
  place-items: center;
  min-height: 72px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11px;
}

.todoSwipeBackStack{
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: clip;
}

.todoSwipeBackStack > .homeSwipeBackPreview{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.todoSwipeBackStack > .todoDetailScreen{
  position: relative;
  z-index: 2;
  height: 100%;
}

.edgeSwipeBackSurface.isEdgeSwiping,
.edgeSwipeBackSurface.isEdgeSwipeSettling{
  z-index: 8;
  will-change: transform;
}

.edgeSwipeBackSurface::after{
  content: "";
  position: absolute;
  z-index: 30;
  top: 0;
  bottom: 0;
  left: -22px;
  width: 22px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to right, transparent, rgba(36, 31, 28, 0.13));
}

.edgeSwipeBackSurface.isEdgeSwiping::after,
.edgeSwipeBackSurface.isEdgeSwipeSettling::after{
  opacity: 1;
}

.edgeSwipeBackSurface.isEdgeSwiping{
  transition: none;
  user-select: none;
  -webkit-user-select: none;
}

.edgeSwipeBackSurface.isEdgeSwiping .clawdPet,
.edgeSwipeBackSurface.isEdgeSwiping .clawdPet *{
  animation-play-state: paused !important;
  transition: none !important;
}

.edgeSwipeBackSurface.isEdgeSwipeSettling{
  transition: none;
}

.chatHeaderSpacer,
.conversationHeaderSpacer,
.todoHeaderSpacer{
  display: block;
  width: 42px;
  height: 42px;
}

.conversationWindowsHeader{
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: start;
}

.conversationHeaderSpacer{
  width: 32px;
  height: 32px;
}

.conversationHeaderAvatars{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  margin-top: 8px;
}

.conversationHeaderAvatars img{
  display: block;
  width: 38px;
  height: 38px;
  border: 0.75px solid rgba(247, 242, 235, 0.94);
  border-radius: 50%;
  background: #e9e2d6;
  object-fit: cover;
  box-shadow: 0 3px 10px rgba(52, 46, 42, 0.08);
}

.conversationAvatarButton{
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.conversationAvatarButton + .conversationAvatarButton{
  margin-left: -9px;
}

.conversationAvatarButton:focus-visible{
  outline: 2px solid rgba(126, 96, 87, 0.46);
  outline-offset: 2px;
}

.conversationAvatarError{
  margin: 6px 0 0;
  color: var(--danger);
  font-size: 10px;
  text-align: center;
}

.conversationSearchBox{
  margin-top: 14px;
}

/* Final font roles ------------------------------------------------------- */
body,
button,
input,
textarea,
select,
.todoRow,
.todoSummaryRow,
.checklistItem,
.bottomNavigation,
.composer,
.caption,
.loveNoteMeta,
.settingsScreen{
  font-family: var(--font-body);
}

.homeGreeting h1,
.anniversaryHero h2,
.anniversaryMainCount,
.homeScreen .sectionHeader h2,
.pageIntro h1,
.memoryOverview h2,
.memoryOverviewStatus,
.memoryScreen .sectionHeader h2,
.anniversaryList strong,
.memoryTimeline h3,
.todoDetailScreen > .checklistPaper > h1,
.completedChecklist h2{
  font-family: var(--font-heading);
}

/* Chinese and user-generated content always stays in the readable body face. */
.todoRow:lang(zh),
.checklistItem:lang(zh),
[data-user-content]{
  font-family: var(--font-body);
}

/* Chat glass room — canonical final rules (MVP polish, 2026-07-06) -------- */

.chatScreen{
  background: #d9d6d0;
}

.chatBackdrop{
  inset: 0;
  background-position: center;
  background-size: cover;
  filter: none;
  transform: none;
}

.chatBackground-linen .chatBackdrop{
  background-image: url("/homeg-chat-background-default.svg");
  background-position: center;
  background-size: cover;
}

.chatBackground-mist .chatBackdrop{
  background:
    radial-gradient(circle at 18% 23%, rgba(236, 231, 221, 0.82), transparent 32%),
    radial-gradient(circle at 86% 68%, rgba(205, 182, 176, 0.52), transparent 36%),
    linear-gradient(155deg, #aebcc0 0%, #d6d5ce 50%, #e1d1c8 100%);
}

.chatBackground-custom .chatBackdrop{
  background-position: center;
  background-size: cover;
  filter: saturate(0.96) contrast(0.98);
}

.chatScreen::before,
.chatBackground-custom::before{
  background: rgba(20, 18, 16, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chatBackground-custom::before{
  background: rgba(20, 18, 16, 0.11);
}

.appHeader{
  padding: calc(8px + env(safe-area-inset-top)) 14px 0;
}

.appHeader .companionIdentity{
  min-width: 76px;
  min-height: 42px;
  padding: 4px 15px 3px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 4px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.appHeader .companionIdentity strong{
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.2;
}

.appHeader .companionIdentity span{
  font-family: var(--font-body);
  font-size: 8px;
  line-height: 1.15;
}

.chatLog{
  gap: 12px;
  padding: calc(62px + env(safe-area-inset-top)) 14px 14px;
}

.messageRow{
  gap: 1px;
}

.messageLine{
  gap: 7px;
  align-items: flex-start;
}

.chatAvatar{
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

.chatAvatar img{
  width: 30px;
  height: 30px;
}


.messageMeta{
  min-height: 13px;
  padding: 0 37px;
  color: rgba(43, 42, 40, 0.38);
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 13px;
}


.chatMemoryNotice,
.chatAffectionBar{
  border: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chatAffectionBar{
  min-height: 28px;
  padding: 2px 14px 3px;
}

.missMeButton{
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 244, 240, 0.075);
  box-shadow: 0 3px 9px rgba(43, 42, 40, 0.05);
  backdrop-filter: blur(10px) saturate(1.16);
  -webkit-backdrop-filter: blur(10px) saturate(1.16);
}

.composer{
  grid-template-columns: 38px minmax(0, 1fr) 40px;
  gap: 5px;
  min-height: 50px;
  margin: 5px 10px calc(7px + env(safe-area-inset-bottom));
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 27px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.075);
  backdrop-filter: blur(14px) saturate(1.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.14);
}

.composer textarea{
  height: 38px;
  min-height: 38px;
  padding: 8px 9px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(43, 42, 40, 0.88);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 21px;
}

.attachmentButton,
.sendButton{
  width: 38px;
  height: 38px;
  min-height: 38px;
}

.attachmentButton{
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.18);
  color: rgba(43, 42, 40, 0.55);
}

.sendButton{
  background: rgba(126, 118, 111, 0.68);
  color: rgba(255, 255, 255, 0.92);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  

  

  .appHeader .companionIdentity,
.composer{
    background: rgba(255, 255, 255, 0.46);
  }
}

/* Absolute final Home typography cascade. */
.homeScreen,
.homeScreen button,
.homeScreen input,
.todoDetailScreen,
.bottomNavigation,
.bottomNavigation button,
.bottomNavigation button span{
  font-family: var(--font-body);
}

.homeScreen .homeGreeting h1,
.homeScreen .anniversaryHero h2,
.homeScreen .anniversaryMainCount,
.homeScreen .sectionHeader h2{
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.homeScreen .homeGreeting p,
.homeScreen .homeGreeting span,
.homeScreen .anniversaryHero .eyebrow,
.homeScreen .anniversaryHero p,
.homeScreen .textAction,
.homeScreen .todoSummaryRow,
.homeScreen .todoSummaryEmpty,
.homeScreen .todoSummaryCard footer,
.homeScreen .cornerGrid,
.homeScreen .cornerStatus{
  font-family: var(--font-body);
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.homeScreen .homeGreeting{
  margin-bottom: 30px;
}

.homeScreen .homeGreeting p{
  color: rgba(43, 42, 40, 0.48);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.015em;
}

.homeScreen .homeGreeting h1{
  margin-top: 8px;
  color: var(--text-primary);
  font-size: 38px;
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.homeScreen .homeGreeting span{
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 400;
}

.homeScreen .anniversaryHero{
  min-height: 224px;
  padding: 24px;
}

.homeScreen .anniversaryHero > div{
  width: min(72%, 252px);
}

.homeScreen .anniversaryHero .eyebrow{
  color: rgba(43, 42, 40, 0.47);
  font-size: 11px;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: 0.16em;
}

.homeScreen .anniversaryHero h2{
  margin-top: 24px;
  color: var(--text-primary);
  font-size: 26px;
  font-weight: 580;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.homeScreen .anniversaryHero .anniversaryMainCount{
  max-width: none;
  margin-top: 12px;
  color: var(--text-primary);
  font-size: clamp(29px, 8.1vw, 33px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.homeScreen .anniversaryHero p{
  margin-top: 13px;
  color: rgba(43, 42, 40, 0.55);
  font-size: 13px;
  font-weight: 450;
  line-height: 1.35;
}

.homeScreen .sectionHeader{
  margin-bottom: 16px;
}

.homeScreen .sectionHeader h2{
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 580;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.homeScreen .textAction{
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 520;
}

.homeScreen .todoSummaryRow{
  min-height: 44px;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.homeScreen .todoSummaryEmpty{
  font-size: 14px;
}

.homeScreen .todoSummaryCard footer{
  font-size: 10px;
  letter-spacing: 0.01em;
}

/* Small floating chat glass — canonical final rules --------------------- */
.chatBackground-linen .chatBackdrop{
  background-image: url("/homeg-chat-background-stairs.webp");
  background-position: center;
  background-size: cover;
}

.chatScreen::before,
.chatBackground-custom::before{
  background: rgba(20, 18, 16, 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.appHeader .companionIdentity{
  min-height: 40px;
  padding: 4px 14px 3px;
  border-color: rgba(255, 255, 255, 0.64);
  background: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 4px 12px rgba(0, 0, 0, 0.075);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

.chatLog{
  gap: 12px;
  padding-right: 14px;
  padding-bottom: 30px;
  padding-left: 14px;
}

.messageLine{
  gap: 7px;
}


.messageMeta{
  color: rgba(35, 33, 30, 0.38);
  font-size: 11px;
}

.chatAffectionBar{
  position: absolute;
  z-index: 6;
  right: auto;
  bottom: calc(66px + env(safe-area-inset-bottom));
  left: 14px;
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

.chatAffectionBar > *{
  pointer-events: auto;
}

.missMeButton{
  min-height: 27px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(246, 225, 221, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 3px 9px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}

.composer{
  position: relative;
  z-index: 7;
  min-height: 50px;
  background: rgba(255, 255, 255, 0.2);
}

/* Keep the anniversary day number prominent; soften the trailing phrase. */
.homeScreen .anniversaryMainCount .anniversaryDayNumber{
  font: inherit;
  font-size: 1em;
}

.homeScreen .anniversaryMainCount .anniversaryDayCopy{
  font-family: var(--font-heading);
  font-size: 0.68em;
  font-style: italic;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

/* A slightly richer affection chip; its full-width parent stays transparent. */
.missMeButton{
  border-color: rgba(255, 255, 255, 0.66);
  background: rgba(225, 193, 182, 0.36);
  color: rgba(43, 42, 40, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 10px rgba(43, 42, 40, 0.08);
}


/* Final Home + Memory typography checkpoint (after legacy display rules). */
.homeScreen .homeGreeting h1,
.homeScreen .anniversaryHero h2,
.homeScreen .sectionHeader h2,
.memoryScreen .pageIntro h1,
.memoryScreen .sectionHeader h2,
.memoryScreen .memoryOverview h2,
.memoryScreen .anniversaryList strong,
.memoryScreen .memoryTimeline h3{
  font-family: var(--font-heading);
  font-style: normal;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.homeScreen .homeGreeting h1{
  font-size: clamp(46px, 12.5vw, 52px);
  font-weight: 560;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.homeScreen .anniversaryHero h2{
  font-size: 29px;
  font-weight: 540;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.homeScreen .anniversaryMainCount,
.homeScreen .anniversaryMainCount .anniversaryDayNumber,
.homeScreen .anniversaryMainCount .anniversaryDayCopy{
  font-family: var(--font-heading);
  font-size: clamp(30px, 8.6vw, 35px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.homeScreen .anniversaryMainCount .anniversaryDayNumber,
.homeScreen .anniversaryMainCount .anniversaryDayCopy{
  font-size: 1em;
}

.homeScreen .sectionHeader h2,
.memoryScreen .sectionHeader h2{
  font-size: 26px;
  font-weight: 540;
  line-height: 1.14;
  letter-spacing: -0.025em;
}

.homeScreen .todoSummaryRow,
.homeScreen .todoSummaryRow span,
.todoDetailScreen .checklistItem,
.todoDetailScreen .checklistItem strong,
.homeScreen .textAction,
.memoryScreen .pageIntro p,
.memoryScreen .pageIntro span,
.memoryScreen .memoryOverview > span,
.memoryScreen .memoryOverview p,
.memoryScreen .anniversaryList small,
.memoryScreen .anniversaryList b,
.memoryScreen .memoryTimeline time,
.memoryScreen .memoryTimeline p{
  font-family: var(--font-body);
  font-style: normal;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.memoryScreen .pageIntro h1{
  font-size: 42px;
  font-weight: 550;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.memoryScreen .memoryOverview .memoryOverviewStatus{
  font-family: var(--font-heading);
  font-size: clamp(30px, 8.4vw, 34px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Daizen-like display treatment; only these two romantic headings use it. */
.homeScreen .homeGreeting h1,
.homeScreen .anniversaryHero h2{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

.homeScreen .homeGreeting h1{
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.045em;
}

.homeScreen .anniversaryHero h2{
  font-size: 29px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.homeScreen .anniversaryMainCount .anniversaryDayNumber{
  font-family: var(--font-heading);
  font-size: 1em;
  font-style: italic;
  font-weight: 500;
}

.homeScreen .anniversaryMainCount .anniversaryDayCopy{
  font-family: var(--font-heading);
  font-size: 0.68em;
  font-style: italic;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.02em;
}


.chatRefractionLayer{
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}


.appHeader .companionIdentity,
.composer{
  border-color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.075);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 5px 14px rgba(20, 18, 16, 0.065);
  backdrop-filter: blur(7px) saturate(1.32) contrast(1.05);
  -webkit-backdrop-filter: blur(7px) saturate(1.32) contrast(1.05);
}

.missMeButton{
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(225, 193, 182, 0.24);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.15),
    0 4px 11px rgba(20, 18, 16, 0.065);
  backdrop-filter: blur(7px) saturate(1.3) contrast(1.04);
  -webkit-backdrop-filter: blur(7px) saturate(1.3) contrast(1.04);
}


.chatScreen .messageMeta,
.chatScreen .messageMeta time{
  color: rgba(255, 255, 255, 0.72) !important;
}

.appHeader .companionIdentity strong{
  color: rgba(255, 255, 255, 0.96) !important;
  text-shadow: none;
}

.appHeader .companionIdentity span{
  color: rgba(255, 255, 255, 0.72) !important;
}

.chatScreen .missMeButton{
  color: rgba(255, 255, 255, 0.96) !important;
}

.chatScreen .composer textarea{
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
}

.chatScreen .composer textarea::placeholder,
.chatScreen .attachmentButton{
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Little Corners uses the supplied hand-drawn artwork without icon frames. */
.homeScreen .cornerGrid button > span{
  width: 68px;
  max-width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.homeScreen .cornerArtwork{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.04);
  opacity: 0.84;
  transform: scale(0.98);
}

.homeScreen .cornerArtwork-reading{
  transform: scale(0.98);
}

.homeScreen .cornerArtwork-calendar{
  transform: scale(0.98);
}

.homeScreen .cornerArtwork-conversation{
  transform: translateY(3px) scale(0.98);
}

/* Corner shortcuts keep the same ink and transparent surface in every state. */
.homeScreen .cornerGrid button,
.homeScreen .cornerGrid button:hover,
.homeScreen .cornerGrid button:focus,
.homeScreen .cornerGrid button:focus-visible,
.homeScreen .cornerGrid button:active{
  border: 0;
  background: transparent !important;
  color: var(--text-primary);
  box-shadow: none !important;
  filter: none;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
}

.homeScreen .cornerGrid button:hover > span,
.homeScreen .cornerGrid button:focus > span,
.homeScreen .cornerGrid button:active > span{
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.homeScreen .cornerGrid button:hover .cornerArtwork,
.homeScreen .cornerGrid button:focus .cornerArtwork,
.homeScreen .cornerGrid button:active .cornerArtwork{
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.04);
  opacity: 0.84;
}

/* Typewriter Latin + paper-ink CJK, reserved for personal anniversary names. */
.memoryScreen .anniversaryList strong,
.memoryScreen .memoryTimeline h3{
  font-family: var(--font-memory-title) !important;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0.01em;
}

/* Keep the day count editorial, but use an upright rather than italic cut. */
.homeScreen .anniversaryMainCount,
.homeScreen .anniversaryMainCount .anniversaryDayNumber,
.homeScreen .anniversaryMainCount .anniversaryDayCopy{
  font-style: normal !important;
}

/* One consistent white foreground across the full chat background. */
.appHeader .companionIdentity{
  background: rgba(78, 69, 64, 0.46);
}

.chatScreen .missMeButton{
  background: rgba(126, 96, 87, 0.5);
}

.appHeader .companionIdentity strong,
.appHeader .companionIdentity span,
.chatScreen .missMeButton,
.chatScreen .messageMeta,
.chatScreen .messageMeta time{
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 1px 2px rgba(20, 18, 16, 0.12);
}

/* The navigation is the one rounded capsule; it no longer owns a background row. */
.bottomNavigation{
  position: absolute;
  right: 12px;
  bottom: calc(7px + env(safe-area-inset-bottom));
  left: 12px;
  width: auto;
  margin: 0;
}

/* Keep chat controls above the floating navigation while the room continues behind it. */
.appContent-chat .composer{
  margin-bottom: calc(79px + env(safe-area-inset-bottom));
}

.appContent-chat .chatAffectionBar{
  bottom: calc(138px + env(safe-area-inset-bottom));
}

.homeScreen,
.memoryScreen,
.memoryLibraryScreen,
.settingsScreen,
.todoDetailScreen{
  padding-bottom: calc(108px + env(safe-area-inset-bottom));
}

/* Memory is the shared library; anniversaries now open from the Home card. */
.memoryLibraryScreen{
  padding: calc(28px + env(safe-area-inset-top)) 18px
    calc(116px + env(safe-area-inset-bottom));
  color: var(--text-primary);
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 94% 4%, rgba(225, 193, 182, 0.2), transparent 31%),
    linear-gradient(180deg, rgba(249, 246, 241, 0.98), rgba(237, 234, 227, 0.86));
}

.memoryLibraryIntro{
  margin: 0 2px 34px;
}

.memoryLibraryIntro p,
.memoryLibraryIntro h1,
.memoryLibraryIntro span,
.memoryLibraryHeading p,
.memoryLibraryHeading h2,
.memoryLibraryDescription{
  margin: 0;
}

.memoryLibraryIntro > p,
.memoryLibraryHeading p{
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.memoryLibraryIntro h1{
  margin-top: 9px;
  font-family: var(--font-diary-cjk), var(--font-body);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: 0.02em;
}

.memoryLibraryIntro > span{
  display: block;
  max-width: 335px;
  margin-top: 10px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.7;
}

.memoryLibrarySection{
  margin-bottom: 34px;
}

.memoryLibraryHeading{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 2px 9px;
}

.memoryLibraryHeading h2{
  margin-top: 4px;
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 560;
  letter-spacing: -0.025em;
}

.memoryLibraryHeading > span{
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(225, 193, 182, 0.28);
  color: var(--text-secondary);
  font-size: 9px;
}

.memoryLibraryDescription{
  margin: 0 2px 14px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.65;
}

.memoryReviewEntry{
  display:flex;
  width:100%;
  min-height:112px;
  height:112px;
  margin:0;
  padding:18px 18px 17px;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:25px;
  background:
    radial-gradient(circle at 89% 16%, rgba(222,179,160,.38), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.74), rgba(243,232,224,.54));
  color:var(--text-primary);
  text-align:left;
  box-shadow:0 14px 34px rgba(83,65,57,.09), inset 0 1px rgba(255,255,255,.82);
}
.memoryRoomEntries{
  display:grid;
  gap:12px;
  margin:-10px 0 34px;
}
.memoryRoomEntries>.memoryReviewEntry{box-sizing:border-box}
.memoryReviewEntry span{ display:grid; gap:4px; }
.memoryReviewEntry small{
  color:#a16f62;
  font:600 8px/1.2 var(--font-sans);
  letter-spacing:.19em;
}
.memoryReviewEntry strong{
  font:500 24px/1.15 var(--font-heading);
  letter-spacing:-.025em;
}
.memoryReviewEntry em{
  color:var(--text-secondary);
  font:400 10px/1.5 var(--font-body);
  font-style:normal;
}
.memoryReviewEntry b{
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  place-items:center;
  border-radius:50%;
  background:rgba(91,68,60,.88);
  color:#fffaf6;
  font:400 17px/1 var(--font-sans);
  box-shadow:0 6px 13px rgba(71,48,42,.16);
}

.memoryReviewScreen{
  padding:calc(18px + env(safe-area-inset-top)) 15px calc(118px + env(safe-area-inset-bottom));
  color:#413735;
  background:
    radial-gradient(circle at 10% 5%, rgba(237,214,201,.72), transparent 28%),
    radial-gradient(circle at 92% 26%, rgba(219,225,206,.58), transparent 30%),
    linear-gradient(180deg,#fbf8f4 0%,#f4efe8 52%,#eee9e3 100%);
  font-family:var(--font-body);
}
.memoryReviewHero{
  position:relative;
  padding:13px 8px 25px 46px;
}
.memoryReviewBack{
  position:absolute;
  top:7px;
  left:0;
  display:grid;
  width:36px;
  height:36px;
  min-height:0;
  padding:0 0 3px;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.56);
  color:#4e403d;
  font:300 32px/1 var(--font-sans);
  box-shadow:0 8px 18px rgba(74,57,51,.07);
}
.memoryReviewHero p,
.memoryReviewHero h1,
.memoryReviewHero span{ margin:0; }
.memoryReviewHero p{
  color:#9f7064;
  font:650 8px/1.2 var(--font-sans);
  letter-spacing:.22em;
}
.memoryReviewHero h1{
  margin-top:7px;
  font:500 31px/1.12 var(--font-heading);
  letter-spacing:-.035em;
}
.memoryReviewHero span{
  display:block;
  max-width:310px;
  margin-top:7px;
  color:#827472;
  font-size:10px;
  line-height:1.65;
}
.memoryReviewRoomMap{
  display:flex;
  gap:5px;
  margin:0 0 12px;
  padding:5px;
  overflow-x:auto;
  border-radius:17px;
  background:rgba(255,255,255,.39);
  box-shadow:inset 0 1px rgba(255,255,255,.72);
  scrollbar-width:none;
}
.memoryReviewRoomMap::-webkit-scrollbar{ display:none; }
.memoryReviewRoomMap button{
  display:grid;
  flex:1 0 66px;
  min-width:66px;
  min-height:37px;
  padding:6px 4px;
  place-content:center;
  gap:2px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#a39793;
  font-size:7px;
  text-align:center;
  box-shadow:none;
}
.memoryReviewRoomMap button > span{ color:inherit; }
.memoryReviewRoomMap button > small{ color:#b9aeaa; font-size:6px; }
.memoryReviewRoomMap button:disabled{ opacity:.7; }
.memoryReviewRoomMap button b{
  font:650 7px/1 var(--font-sans);
  letter-spacing:.11em;
}
.memoryReviewRoomMap button.isActive{
  background:#554746;
  color:#fffaf7;
  box-shadow:0 5px 11px rgba(70,50,45,.13);
}
.memoryReviewRoomMap button.isActive > small{ color:rgba(255,250,247,.66); }
.memoryReviewRunSummary{
  display:block;
  margin-bottom:11px;
  padding:13px 16px 11px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:18px;
  background:rgba(255,255,255,.52);
  box-shadow:0 5px 16px rgba(85,69,62,.045), inset 0 1px rgba(255,255,255,.86);
  backdrop-filter:blur(18px) saturate(1.05);
  -webkit-backdrop-filter:blur(18px) saturate(1.05);
}
.memoryReviewRunSummary > header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.memoryReviewRunSummary p,
.memoryReviewRunSummary h2,
.memoryReviewRunSummary span{ margin:0; }
.memoryReviewRunSummary p{
  color:#a17468;
  font:600 8px/1.2 var(--font-sans);
  letter-spacing:.14em;
}
.memoryReviewRunSummary h2{
  margin-top:6px;
  font:520 15px/1.25 var(--font-heading);
}
.memoryReviewRunReviewer{
  display:flex;
  align-items:baseline;
  gap:9px;
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(117,96,89,.1);
  color:#897b78;
  font-size:8px;
}
.memoryReviewRunReviewer strong{
  color:#554947;
  font:600 10px/1 var(--font-sans);
}
.memoryReviewRunReviewer small{
  margin-left:auto;
  color:#70816f;
  font-size:8px;
}
.memoryReviewRunState{
  flex:0 0 auto;
  padding:3px 7px;
  border:1px solid rgba(144,106,97,.24);
  border-radius:999px;
  background:transparent;
  color:#906a61;
  font-size:7px;
}
.memoryReviewRunState.is-complete{ border-color:rgba(96,118,90,.25); background:transparent; color:#60765a; }

.memoryReviewCompare{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
.memoryReviewCompare article{
  position:relative;
  display:grid;
  min-width:0;
  grid-template-columns:31px minmax(0,1fr);
  gap:8px;
  padding:12px 10px 11px;
  border-radius:20px;
  background:rgba(253,250,246,.78);
  box-shadow:0 8px 22px rgba(79,64,58,.06);
}
.memoryReviewCompare article > small{
  grid-column:1/-1;
  color:#948582;
  font-size:8px;
}
.memoryReviewCompare p,
.memoryReviewCompare strong,
.memoryReviewCompare span{ margin:0; }
.memoryReviewCompare p{
  overflow:hidden;
  color:#81726f;
  font-size:8px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.memoryReviewCompare strong{
  display:inline-block;
  margin-top:2px;
  font:550 20px/1 var(--font-heading);
}
.memoryReviewCompare div > span{
  margin-left:4px;
  color:#9b8c89;
  font-size:8px;
}
.memoryReviewMark{
  display:grid;
  width:29px;
  height:29px;
  place-items:center;
  border-radius:50%;
  background:#4c403e;
  color:#fff;
  font:650 10px/1 var(--font-sans);
  box-shadow:0 5px 10px rgba(66,47,42,.13);
}
.memoryReviewMark-deepseek{ background:#9a6e65; }
.memoryReviewMark-opus-4-6{ background:#74866d; }
.memoryReviewMark-opus-5{ background:#8c6f93; }

.memoryReviewFilters{
  position:relative;
  z-index:1;
  top:auto;
  display:flex;
  gap:5px;
  margin:0 -3px 14px;
  padding:6px;
  overflow-x:auto;
  border:1px solid rgba(255,255,255,.75);
  border-radius:18px;
  background:rgba(247,242,236,.83);
  box-shadow:0 8px 19px rgba(72,58,53,.055);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
  scrollbar-width:none;
}
.memoryReviewFilters::-webkit-scrollbar{ display:none; }
.memoryReviewFilters button{
  min-width:max-content;
  min-height:30px;
  padding:6px 12px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#817370;
  font-size:9px;
  box-shadow:none;
}
.memoryReviewFilters button.isActive{
  background:#4f4140;
  color:#fffaf7;
}
.memoryReviewHistorySelect{display:flex;min-width:max-content;margin-left:auto;padding:0 8px;align-items:center;gap:5px;border-left:1px solid rgba(94,73,69,.1);color:#897a77;font-size:8px}.memoryReviewHistorySelect select{width:88px;min-height:28px;padding:0 7px;border:0;border-radius:10px;background:rgba(255,255,255,.58);color:#665754;font:9px/1 var(--font-body)}
.memoryReviewCards{
  display:grid;
  gap:12px;
  scroll-margin-top:calc(env(safe-area-inset-top) + 62px);
}
.memoryMergeGroupNavigator{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 14px;
  padding:12px 13px;
  border:1px solid rgba(175,139,132,.18);
  border-radius:18px;
  background:rgba(255,250,247,.7);
  color:#675956;
}
.memoryMergeGroupNavigator div{display:grid;gap:4px}
.memoryMergeGroupNavigator strong{font:600 11px/1.25 var(--font-heading)}
.memoryMergeGroupNavigator div span{color:#95837f;font-size:8px;line-height:1.45}
.memoryMergeGroupNavigator label{display:flex;align-items:center;gap:6px;color:#8e7b77;font-size:8px;white-space:nowrap}
.memoryMergeGroupNavigator select{max-width:98px;min-height:30px;padding:0 8px;border:1px solid rgba(150,119,113,.16);border-radius:11px;background:#fffaf7;color:#625451;font:9px/1 var(--font-body)}
.memoryMergeGroupHeading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-top:9px;
  padding:8px 5px 0;
  scroll-margin-top:calc(env(safe-area-inset-top) + 68px);
  color:#755f5b;
}
.memoryMergeGroupHeading strong{font:620 12px/1.2 var(--font-heading)}
.memoryMergeGroupHeading span{color:#a08d88;font-size:8px;text-align:right}
.memoryMergeRole{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:-3px -3px 11px;
  padding:8px 10px;
  border-radius:13px;
  background:rgba(222,205,198,.28);
  color:#735f5b;
}
.memoryMergeRole strong{font:650 10px/1.2 var(--font-sans);letter-spacing:.04em}
.memoryMergeRole span{color:#96827e;font-size:8px;line-height:1.35;text-align:right}
.memoryMergeRole.isRole1{background:rgba(226,215,198,.3);color:#756750}
.memoryMergeRole.isRole2{background:rgba(216,198,202,.32);color:#76565f}
.memoryReviewCard.isMergePreviewCard{scroll-margin-top:calc(env(safe-area-inset-top) + 68px)}
.memoryReviewCard{
  position:relative;
  overflow:hidden;
  padding:15px 15px 13px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.75),rgba(250,245,239,.57));
  box-shadow:0 13px 32px rgba(78,62,56,.075),inset 0 1px rgba(255,255,255,.95);
}
.memoryReviewCard::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:#5b4c49;
  opacity:.8;
}
.memoryReviewCard:has(.memoryReviewMark-deepseek)::before{ background:#b98273; }
.memoryReviewCard.is-accepted{ box-shadow:0 13px 32px rgba(78,62,56,.075),inset 0 0 0 1px rgba(116,148,105,.28); }
.memoryReviewCard.is-rejected{ opacity:.62; }
.memoryReviewCardMeta{
  display:flex;
  align-items:center;
  gap:7px;
  color:#8b7d79;
  font-size:8px;
}
.memoryReviewCardMeta .memoryReviewMark{ width:25px; height:25px; font-size:8px; }
.memoryReviewCardMeta b{
  margin-left:auto;
  color:#ae9f9a;
  font:550 8px/1 var(--font-sans);
  letter-spacing:.1em;
}
.memoryReviewCard h3{
  margin:13px 0 7px;
  font:540 21px/1.28 var(--font-heading);
  letter-spacing:-.02em;
}
.memoryReviewSummary{
  margin:0;
  color:#5d514f;
  font-size:11px;
  line-height:1.75;
}
.memoryReviewCard blockquote{
  margin:13px 0 0;
  padding:11px 12px 10px;
  border:0;
  border-radius:15px;
  background:rgba(222,202,189,.27);
  color:#695b59;
  font-size:10px;
  line-height:1.7;
}
.memoryReviewCard blockquote span{
  display:block;
  margin-bottom:4px;
  color:#a06f64;
  font:650 7px/1.2 var(--font-sans);
  letter-spacing:.16em;
}

.memoryArchiveEntry{background:radial-gradient(circle at 88% 16%,rgba(165,185,174,.3),transparent 35%),linear-gradient(135deg,rgba(255,255,255,.74),rgba(230,238,232,.54))}.memoryArchiveEntry small{color:#70897d}
.memoryArchiveScreen{padding:calc(18px + env(safe-area-inset-top)) 15px calc(118px + env(safe-area-inset-bottom));color:#413735;background:radial-gradient(circle at 12% 4%,rgba(219,231,221,.72),transparent 29%),radial-gradient(circle at 90% 29%,rgba(235,211,200,.55),transparent 31%),linear-gradient(180deg,#faf8f4,#f1eee8);font-family:var(--font-body)}
.memoryArchiveHero{padding-bottom:18px}.memoryArchiveToolbar{position:sticky;z-index:5;top:calc(env(safe-area-inset-top) + 4px);display:grid;gap:7px;margin-bottom:8px;padding:7px;border:1px solid rgba(255,255,255,.74);border-radius:20px;background:rgba(246,242,237,.88);box-shadow:0 8px 20px rgba(70,56,51,.06);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.memoryArchiveToolbar>label{display:flex;align-items:center;gap:8px;padding:0 11px;border-radius:14px;background:rgba(255,255,255,.56)}.memoryArchiveToolbar>label span{color:#8d7d79}.memoryArchiveToolbar input{box-sizing:border-box;width:100%;min-height:36px;border:0;background:transparent;color:#4d4140;font:11px/1.2 var(--font-body);outline:0}.memoryArchiveToolbar nav{display:flex;gap:4px;overflow:auto;scrollbar-width:none}.memoryArchiveToolbar nav::-webkit-scrollbar{display:none}.memoryArchiveToolbar nav button{flex:0 0 auto;min-height:26px;padding:5px 10px;border:0;border-radius:10px;background:transparent;color:#857673;font:8px/1 var(--font-body)}.memoryArchiveToolbar nav button.isActive{background:#52665d;color:#fff}.memoryArchiveCount{margin:9px 4px 11px;color:#958682;font:8px/1 var(--font-sans);letter-spacing:.08em}.memoryArchiveCards{display:grid;gap:12px}.memoryArchiveCard{overflow:hidden;padding:16px;border:1px solid rgba(255,255,255,.78);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.77),rgba(247,243,237,.58));box-shadow:0 13px 32px rgba(73,61,56,.075),inset 0 1px rgba(255,255,255,.94)}.memoryArchiveCard>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.memoryArchiveCard>header span{color:#967d76;font:650 7px/1.2 var(--font-sans);letter-spacing:.08em}.memoryArchiveCard>header h2{margin:6px 0 0;font:540 21px/1.27 var(--font-heading)}.memoryArchiveCard>header>b{display:grid;min-width:29px;height:29px;place-items:center;border-radius:50%;background:#52665d;color:#fff;font:650 8px/1 var(--font-sans)}.memoryArchiveSummary{margin:11px 0 0;color:#5c504e;font:11px/1.76 var(--font-body)}.memoryArchiveChips{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}.memoryArchiveChips span{padding:4px 7px;border-radius:999px;background:rgba(116,139,127,.11);color:#6c7e74;font:7px/1 var(--font-sans)}.memoryArchiveCard>details{margin-top:12px;border-top:1px solid rgba(112,91,84,.11)}.memoryArchiveCard>details>summary{padding:11px 0 2px;color:#81716e;font:9px/1.2 var(--font-body);list-style:none}.memoryArchiveCard>details>summary::-webkit-details-marker{display:none}.memoryArchiveCard>details>p{color:#5d504e;font:10.5px/1.78 var(--font-body);white-space:pre-wrap}.memoryArchiveCard>details>p b{display:block;margin-bottom:4px;color:#93736a;font:650 7px/1 var(--font-sans);letter-spacing:.08em}.memoryArchiveCard>footer{display:flex;justify-content:flex-end;margin-top:11px}.memoryArchiveCard>footer button,.memoryArchiveEditActions button{min-height:29px;padding:6px 11px;border:0;border-radius:11px;background:rgba(81,102,92,.11);color:#5e7167;font:8px/1 var(--font-body)}.memoryArchiveRelated{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin-top:10px}.memoryArchiveRelated>span{color:#9b8984;font:7px/1 var(--font-sans);letter-spacing:.08em}.memoryArchiveRelated button{min-height:25px;padding:5px 8px;border:0;border-radius:999px;background:rgba(193,160,147,.13);color:#876c65;font:8px/1 var(--font-body)}.memoryArchiveEditor{display:grid;gap:7px;margin-top:13px}.memoryArchiveEditor>input,.memoryArchiveEditor>textarea,.memoryArchiveEditor select{box-sizing:border-box;width:100%;min-height:35px;padding:8px 10px;border:1px solid rgba(117,96,89,.13);border-radius:12px;background:rgba(255,255,255,.58);color:#514543;font:10px/1.55 var(--font-body);outline:0}.memoryArchiveEditor>textarea{min-height:74px;resize:vertical}.memoryArchiveEditorRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.memoryArchiveEditorRow:has(select){grid-template-columns:repeat(3,minmax(0,1fr))}.memoryArchiveRelations{display:grid;max-height:184px;padding:10px;overflow:auto;border-radius:14px;background:rgba(255,255,255,.38)}.memoryArchiveRelations h3{margin:0 0 8px;font:540 13px/1.2 var(--font-heading)}.memoryArchiveRelations label{display:flex;align-items:center;gap:7px;min-height:28px;color:#665957;font-size:9px}.memoryArchiveRelations input{width:14px;height:14px}.memoryArchiveEditActions{display:flex;justify-content:flex-end;gap:6px}.memoryArchiveEditActions button.isPrimary{background:#52665d;color:#fff}
.memoryReviewClaims{
  margin-top:10px;
  border-top:1px solid rgba(125,105,98,.11);
}
.memoryReviewClaims summary{
  padding:10px 0 1px;
  color:#877875;
  font-size:9px;
  list-style:none;
}
.memoryReviewClaims summary::-webkit-details-marker{ display:none; }
.memoryReviewClaims ol{
  margin:8px 0 0;
  padding-left:17px;
  color:#645755;
  font-size:9px;
  line-height:1.65;
}
.memoryReviewText{
  margin-top:10px;
  border-top:1px solid rgba(125,105,98,.11);
}
.memoryReviewText summary{
  padding:10px 0 1px;
  color:#877875;
  font-size:9px;
  list-style:none;
}
.memoryReviewText summary::-webkit-details-marker{ display:none; }
.memoryReviewText p{
  margin:8px 0 0;
  color:#645755;
  font-size:10px;
  line-height:1.72;
  white-space:pre-wrap;
}
.memoryReviewTags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:12px;
}
.memoryReviewTags span{
  padding:4px 7px;
  border-radius:999px;
  background:rgba(185,157,145,.14);
  color:#8b726c;
  font-size:7px;
}
.memoryReviewRecallCues{
  display:grid;
  gap:7px;
  margin-top:10px;
  padding:10px 11px;
  border-radius:14px;
  background:rgba(255,255,255,.36);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.48);
}
.memoryReviewRecallCues header{display:flex;align-items:center;justify-content:space-between}
.memoryReviewRecallCues header span{font:700 7px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.16em;color:#9a7770}
.memoryReviewRecallCues header b{font:650 8px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;color:#9f918d}
.memoryReviewRecallCues ol{display:grid;gap:5px;margin:0;padding-left:18px;color:#665a58;font-size:11px;line-height:1.55}
.memoryReviewRecallCues .isMissing{margin:0;color:#ad6e67;font-size:10px;line-height:1.5}
.memoryReviewStructure{margin-top:8px;border-top:1px solid rgba(120,98,92,.09);padding-top:8px}
.memoryReviewStructure summary{cursor:pointer;list-style:none;color:#8f807d;font-size:9px}
.memoryReviewStructure summary::-webkit-details-marker{display:none}
.memoryReviewStructure dl{display:grid;grid-template-columns:1fr 1fr;gap:5px 9px;margin:9px 0 0}
.memoryReviewStructure dl div{display:grid;gap:2px}
.memoryReviewStructure dt{color:#a59a97;font-size:7px;letter-spacing:.08em}
.memoryReviewStructure dd{margin:0;color:#625754;font-size:9px;overflow-wrap:anywhere}
.memoryReviewStructure p{display:grid;gap:2px;margin:8px 0 0;color:#756866;font-size:9px;line-height:1.5}
.memoryReviewStructure p b{color:#a07870;font-size:7px;letter-spacing:.08em}
.memoryReviewRetention{display:flex;align-items:center;gap:6px;margin-top:10px}
.memoryReviewRetention > span{margin-right:auto;color:#9b8e8a;font-size:8px;letter-spacing:.08em}
.memoryReviewRetention button{min-width:42px;border:0;border-radius:999px;padding:6px 9px;background:rgba(255,255,255,.46);color:#756865;font:650 9px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;box-shadow:inset 0 0 0 1px rgba(132,107,100,.11)}
.memoryReviewRetention button.isSelected{background:#82706d;color:#fff;box-shadow:none}
.memoryReviewEvidence{
  position:relative;
  z-index:5;
  margin:10px 0 0;
  color:#a09490;
  font-size:8px;
  line-height:1.55;
}
.memoryReviewEvidence > summary{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:6px 9px;
  border:1px solid rgba(133,107,98,.13);
  border-radius:11px;
  background:rgba(255,255,255,.44);
  color:#806f6b;
  font-size:8px;
  box-shadow:none;
  cursor:pointer;
  list-style:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.memoryReviewEvidence > summary::-webkit-details-marker{ display:none; }
.memoryReviewEvidenceList{
  display:grid;
  gap:7px;
  margin-top:8px;
}
.memoryReviewEvidenceList blockquote{
  margin:0;
  padding:10px 11px;
  border:0;
  border-left:2px solid rgba(152,113,102,.42);
  border-radius:0 12px 12px 0;
  background:rgba(255,255,255,.46);
}
.memoryReviewEvidenceList blockquote span{
  display:block;
  margin:0 0 5px;
  color:#9d776e;
  font:650 7px/1.2 var(--font-sans);
  letter-spacing:.06em;
}
.memoryReviewEvidenceList blockquote p,
.memoryReviewEvidenceList > p{
  margin:0;
  color:#625552;
  font-size:9px;
  line-height:1.7;
  white-space:pre-wrap;
}
.memoryReviewActions{
  display:flex;
  gap:6px;
  margin-top:13px;
}
.memoryReviewActions button{
  flex:1 1 0;
  min-width:0;
  min-height:34px;
  padding:6px 7px;
  border:1px solid rgba(120,98,91,.15);
  border-radius:12px;
  background:rgba(255,255,255,.5);
  color:#6c5d5a;
  font-size:9px;
  box-shadow:none;
}
.memoryReviewActions button.isSelected,
.memoryReviewActions button.isPrimary{
  border-color:transparent;
  background:#554645;
  color:#fffaf7;
}
.memoryReviewActions button.isReset{ flex:0 0 auto; color:#a27b71; }
.memoryReviewDecision{
  display:block;
  margin-top:8px;
  color:#7f8e76;
  font-size:8px;
  text-align:center;
}
.memoryReviewEditor{
  display:grid;
  gap:7px;
  margin-top:12px;
}
.memoryReviewEditor input,
.memoryReviewEditor textarea,
.memoryReviewEditor select{
  box-sizing:border-box;
  width:100%;
  min-height:38px;
  padding:9px 10px;
  resize:vertical;
  border:1px solid rgba(128,105,97,.14);
  border-radius:12px;
  outline:none;
  background:rgba(255,255,255,.66);
  color:#554946;
  font:10px/1.55 var(--font-body);
  box-shadow:none;
}
.memoryReviewEditor textarea{ min-height:74px; }
.memoryReviewImportanceEditor{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;color:#8f807d;font-size:9px}
.memoryReviewImportanceEditor select{min-height:38px;appearance:none}
.memoryReviewError,
.memoryReviewEmpty{
  margin:12px 0;
  padding:18px;
  border-radius:20px;
  background:rgba(255,255,255,.58);
  color:#7d6d6a;
  font-size:10px;
  line-height:1.6;
}
.memoryReviewEmpty span{ color:#a29692; font-size:8px; }
.memoryReviewSkeleton{ display:grid; gap:10px; }
.memoryReviewSkeleton i{
  display:block;
  height:142px;
  border-radius:24px;
  background:linear-gradient(100deg,rgba(255,255,255,.35),rgba(255,255,255,.74),rgba(255,255,255,.35));
  background-size:200% 100%;
  animation:memoryReviewShimmer 1.3s linear infinite;
}
@keyframes memoryReviewShimmer{ to{ background-position:-200% 0; } }

.memoryLibraryScreen > .memoryLibrarySection > .memoryPanel{
  margin: 0 0 10px;
  border-color: rgba(184, 178, 170, 0.34);
  background: rgba(251, 248, 242, 0.72);
  box-shadow: 0 7px 24px rgba(74, 65, 60, 0.045);
}

.identityRulesBody{
  display: grid;
  gap: 13px;
}

.identityRuleTabs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(231, 215, 200, 0.32);
}

.identityRuleTabs button{
  min-width: 0;
  min-height: 34px;
  padding: 7px 5px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 10px;
  box-shadow: none;
}

.identityRuleTabs button.isActive{
  background: rgba(251, 248, 242, 0.88);
  color: var(--text-primary);
  box-shadow: 0 3px 10px rgba(74, 65, 60, 0.055);
}

.identityRuleOwnerNote{
  margin: -4px 2px 0;
  color: var(--text-secondary);
  font-size: 10px;
}

.identityRuleForm{
  display: grid;
  gap: 12px;
}

.identityRuleForm label{
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 11px;
}

.identityRuleForm textarea{
  min-height: 82px;
  resize: vertical;
  line-height: 1.6;
}

.ombreLibrarySection{
  padding-top: 2px;
}

.ombreMemoryBrowser{
  margin-top: 10px;
  padding: 17px;
  border: 1px solid rgba(184, 178, 170, 0.3);
  border-radius: 20px;
  background: rgba(251, 248, 242, 0.66);
  box-shadow: 0 7px 24px rgba(74, 65, 60, 0.035);
}

.ombreOwnerSwitch{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 13px;
  padding: 3px;
  border-radius: 13px;
  background: rgba(231, 215, 200, 0.3);
}

.ombreOwnerSwitch button{
  min-height: 31px;
  padding: 5px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: 10px/1.2 var(--font-body);
  box-shadow: none;
}

.ombreOwnerSwitch button.isActive{
  background: rgba(251, 248, 242, 0.88);
  color: var(--text-primary);
  box-shadow: 0 2px 7px rgba(74, 65, 60, 0.05);
}

.ombreMemoryBrowser form{
  display: grid;
  gap: 9px;
}

.ombreMemoryBrowser label{
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
}

.ombreMemoryBrowser form > div{
  display: flex;
  align-items: center;
  gap: 8px;
}

.ombreMemoryBrowser input{
  min-width: 0;
  height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(184, 178, 170, 0.38);
  border-radius: 14px;
  background: rgba(249, 246, 241, 0.82);
  color: var(--text-primary);
  font: 12px/1.4 var(--font-body);
  outline: none;
}

.ombreMemoryBrowser input:focus{
  border-color: rgba(142, 126, 115, 0.56);
  box-shadow: 0 0 0 3px rgba(225, 193, 182, 0.2);
}

.ombreMemoryBrowser form button{
  flex: 0 0 auto;
  min-width: 62px;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 14px;
  background: rgba(163, 143, 134, 0.86);
  color: #fffaf5;
  box-shadow: none;
  font-size: 11px;
}

.ombreMemoryResult{
  margin-top: 14px;
  padding: 15px 14px;
  border-left: 2px solid rgba(163, 143, 134, 0.48);
  border-radius: 4px 14px 14px 4px;
  background: rgba(231, 215, 200, 0.32);
}

.ombreMemoryResult span{
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.ombreMemoryResult p{
  margin: 8px 0 0;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.75;
  white-space: pre-wrap;
}

.ombreMemoryBrowser > small{
  display: block;
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.55;
}

.anniversaryScreen{
  position: relative;
  padding-top: calc(74px + env(safe-area-inset-top));
}

.anniversaryBackButton{
  position: absolute;
  top: calc(22px + env(safe-area-inset-top));
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 34px;
  padding: 0 9px 0 5px;
  border: 0;
  border-radius: 999px;
  background: rgba(249, 246, 241, 0.68);
  color: var(--text-secondary);
  box-shadow: none;
  font: 10px/1 var(--font-body);
}

.anniversaryBackButton svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One saved assistant reply can read as several quick, natural chat bubbles. */
.messageRow.isSplitReply > .messageLine:not(.messageThinkingLine) + .messageLine:not(.messageThinkingLine){
  margin-top: 5px;
}

/* Chat is an immersive room entered from Home, not a persistent tab. */
.bottomNavigation{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bottomNavigation button:disabled{
  opacity: 1;
  cursor: default;
}

.chatBackButton{
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  color: rgba(255, 255, 255, 0.94);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 4px 12px rgba(20, 18, 16, 0.07);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  pointer-events: auto;
}

.chatBackButton svg{
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.appContent-chat .composer{
  margin-bottom: calc(8px + env(safe-area-inset-bottom));
}

.appContent-chat .chatAffectionBar{
  bottom: calc(68px + env(safe-area-inset-bottom));
}

/* A small letter on Home opens the private chat room. */
.homeChatLetterModule{
  width: 100%;
  margin: 0 0 24px;
}

.homeScreen .anniversaryHeroButton{
  margin-bottom: 18px;
}

.homeChatLetterCard{
  position: relative;
  display: grid;
  grid-template-columns: minmax(126px, 44%) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 164px;
  padding: 15px 17px 14px 13px;
  overflow: hidden;
  border: 1px solid rgba(151, 174, 179, 0.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.46), transparent 33%),
    linear-gradient(145deg, #dcecf0 0%, #d5e7eb 58%, #cbdfe4 100%);
  color: #46565b;
  box-shadow: 0 9px 24px rgba(74, 91, 94, 0.08);
  text-align: left;
}

.homeChatLetterCard::after{
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(68, 88, 92, 0.08) 0.55px, transparent 0.7px);
  background-size: 4px 4px;
  opacity: 0.18;
  pointer-events: none;
}

.homeChatLetterCard:disabled{
  opacity: 1;
  cursor: default;
}

.letterEnvelope{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 150px;
  height: 112px;
  margin: 7px auto 0;
  perspective: 500px;
}

.letterEnvelopeBack{
  position: absolute;
  right: 2px;
  bottom: 5px;
  left: 2px;
  height: 84px;
  border: 1px solid rgba(94, 123, 130, 0.22);
  border-radius: 4px 4px 9px 9px;
  background: #c7dfe5;
  box-shadow: 0 6px 13px rgba(67, 92, 98, 0.08);
}

.letterPaper{
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 17px;
  left: 17px;
  display: grid;
  place-items: end center;
  height: 82px;
  overflow: hidden;
  border-radius: 3px;
  background: #f6f0e7;
  box-shadow: 0 2px 6px rgba(55, 65, 65, 0.07);
  transform: translateY(17px);
  transition: transform 780ms cubic-bezier(0.2, 0.72, 0.24, 1);
}

.letterPaper img{
  display: block;
  width: 76px;
  height: 80px;
  object-fit: cover;
  object-position: center 42%;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.08);
  opacity: 0.84;
}

.letterEnvelopeFront{
  position: absolute;
  z-index: 4;
  right: 2px;
  bottom: 5px;
  left: 2px;
  height: 68px;
  border: 1px solid rgba(94, 123, 130, 0.18);
  border-radius: 0 0 9px 9px;
  background:
    linear-gradient(32deg, #d4e8ec 0 49%, transparent 50%) left / 52% 100% no-repeat,
    linear-gradient(-32deg, #cde3e8 0 49%, transparent 50%) right / 52% 100% no-repeat,
    #d9eaed;
  clip-path: polygon(0 0, 50% 48%, 100% 0, 100% 100%, 0 100%);
}

.letterEnvelopeFlap{
  position: absolute;
  z-index: 5;
  top: 23px;
  right: 2px;
  left: 2px;
  height: 58px;
  border-top: 1px solid rgba(255, 255, 255, 0.58);
  background: #d8eaee;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform 700ms cubic-bezier(0.3, 0.64, 0.26, 1);
  backface-visibility: hidden;
}

.letterTape{
  position: absolute;
  z-index: 6;
  top: 63px;
  left: 50%;
  width: 38px;
  height: 15px;
  background: rgba(241, 232, 209, 0.9);
  box-shadow: 0 1px 2px rgba(74, 65, 60, 0.08);
  transform: translateX(-50%) rotate(-1.5deg);
  transition: opacity 220ms ease;
}

.homeChatLetterCard.isOpening .letterEnvelopeFlap{
  transform: rotateX(178deg);
}

.homeChatLetterCard.isOpening .letterPaper{
  transform: translateY(-14px);
}

.homeChatLetterCard.isOpening .letterTape{
  opacity: 0;
}

.homeChatLetterCopy{
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 9px;
  min-width: 0;
}

.homeChatLetterCopy > small{
  color: rgba(70, 86, 91, 0.58);
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0.16em;
}

.homeChatLetterCopy > strong{
  color: #46565b;
  font-family: var(--font-typewriter), var(--font-body);
  font-size: clamp(15px, 4.1vw, 17px);
  font-weight: 400;
  line-height: 1.32;
  letter-spacing: -0.01em;
}

.unreadLetterPill{
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(78, 105, 111, 0.18);
  border-radius: 999px;
  background: rgba(250, 247, 239, 0.62);
  color: rgba(62, 81, 85, 0.76);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .letterEnvelopeFlap,
.letterPaper,
.letterTape{
    transition-duration: 1ms;
  }
}

/* The active room is marked by a quiet pool of warm light, not a dark pill. */
.bottomNavigation button{
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.bottomNavigation button::before,
.bottomNavigation button::after{
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}

.pushNotificationBody{
  display: grid;
  gap: 14px;
}

.pushNotificationBody > .gentleToggle{
  margin: 0;
}

.gentlePrimaryButton{
  min-height: 46px;
  border: 1px solid rgba(144, 123, 112, 0.16);
  border-radius: 16px;
  background: rgba(163, 143, 134, 0.16);
  color: var(--text-primary);
  font: 600 14px/1 var(--font-body);
}

.pushQuietHours{
  align-items: end;
}

.pushQuietHours button{
  min-height: 42px;
  border: 1px solid rgba(144, 123, 112, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.54);
  color: var(--text-primary);
}

.pushNotificationActions{
  margin-top: 2px;
}

/* LiveClaude stays compact because CasaShell will eventually host many MCP
   controls. It is collapsed by default and never exposes service secrets. */
.liveClaudePanel .liveClaudeSummary{
  color: var(--text-secondary);
  font: 500 10px/1.2 var(--font-body);
}

.liveClaudeBody{
  display: grid;
  gap: 15px;
}

.liveClaudeIntro{
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.liveClaudeIntro img{
  width: 58px;
  height: 58px;
  border-radius: 17px;
  object-fit: cover;
  image-rendering: pixelated;
}

.liveClaudeIntro strong{
  display: block;
  color: var(--text-primary);
  font: 600 13px/1.4 var(--font-body);
}

.liveClaudeIntro p{
  margin: 3px 0 0;
  color: var(--text-secondary);
  font: 400 10px/1.55 var(--font-body);
}

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

.liveClaudeStatusGrid > div{
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(231, 215, 200, 0.28);
}

.liveClaudeStatusGrid span{
  color: var(--text-secondary);
  font: 500 9px/1.3 var(--font-body);
}

.liveClaudeStatusGrid strong{
  overflow: hidden;
  color: var(--text-primary);
  font: 600 11px/1.35 var(--font-body);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liveClaudeToggle{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border-radius: 15px;
  background: rgba(225, 193, 182, 0.2);
}

.liveClaudeToggle > span{
  display: grid;
  gap: 2px;
}

.liveClaudeToggle strong{
  color: var(--text-primary);
  font: 600 12px/1.35 var(--font-body);
}

.liveClaudeToggle small,
.liveClaudePanel label > small{
  color: var(--text-secondary);
  font: 400 9px/1.45 var(--font-body);
}

.liveClaudeToggle input[type="checkbox"]{
  width: 34px !important;
  min-width: 34px;
  height: 20px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(184, 178, 170, 0.58) !important;
  box-shadow: none !important;
  transition: background 160ms ease;
}

.liveClaudeToggle input[type="checkbox"]::after{
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: 2px;
  border-radius: 50%;
  background: var(--paper, #fbf8f2);
  box-shadow: 0 1px 3px rgba(43, 42, 40, 0.16);
  transition: transform 160ms ease;
}

.liveClaudeToggle input[type="checkbox"]:checked{
  background: rgba(163, 143, 134, 0.78) !important;
}

.liveClaudeToggle input[type="checkbox"]:checked::after{
  transform: translateX(14px);
}

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

.liveClaudePanel label{
  display: grid;
  gap: 6px;
  color: var(--text-secondary);
  font: 500 10px/1.3 var(--font-body);
}

.liveClaudeActions{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.settingsScreen .liveClaudeActions button{
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .liveClaudeToggle input[type="checkbox"],
.liveClaudeToggle input[type="checkbox"]::after{
    transition: none;
  }
}

/* Separate, editable anniversary books for GPT/Codex and Claude. */
.anniversaryOverviewActions{
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.anniversaryOverviewActions .pillButton,
.anniversaryScreen .sectionHeader .pillButton{
  min-height: 34px;
  padding: 0 13px;
  font-size: 11px;
}

.anniversaryEditor{
  display: grid;
  gap: 14px;
  margin: 20px 0 24px;
  padding: 20px;
  border: 1px solid rgba(184, 178, 170, 0.25);
  border-radius: 24px;
  background: rgba(251, 248, 242, 0.76);
  box-shadow: 0 10px 30px rgba(74, 65, 60, 0.05);
}

.anniversaryEditorHeading,
.anniversaryEditorRow,
.anniversaryEditorActions{
  display: flex;
  align-items: center;
}

.anniversaryEditorHeading{
  justify-content: space-between;
  color: var(--text-secondary);
  font: 600 10px/1.2 var(--font-body);
  letter-spacing: 0.14em;
}

.anniversaryEditorHeading button{
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font: 500 11px/1 var(--font-body);
}

.anniversaryEditorRow{
  align-items: flex-start;
  gap: 10px;
}

.anniversaryEditorRow > label{
  flex: 1 1 0;
  min-width: 0;
}

.anniversaryEditor label:not(.anniversaryPinOption){
  display: grid;
  gap: 7px;
}

.anniversaryEditor label > span{
  color: var(--text-secondary);
  font: 500 11px/1.2 var(--font-body);
}

.anniversaryEditor input:not([type="checkbox"]),
.anniversaryEditor select,
.anniversaryEditor textarea{
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid rgba(184, 178, 170, 0.32);
  border-radius: 14px;
  outline: 0;
  background: rgba(249, 246, 241, 0.74);
  color: var(--text-primary);
  font: 13px/1.45 var(--font-body);
}

.anniversaryEditor textarea{
  min-height: 78px;
  resize: vertical;
}

.anniversaryEditor input:focus,
.anniversaryEditor select:focus,
.anniversaryEditor textarea:focus{
  border-color: rgba(142, 126, 115, 0.55);
  box-shadow: 0 0 0 3px rgba(225, 193, 182, 0.16);
}

.anniversaryPinOption{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
}

.anniversaryPinOption input{
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--warm-taupe);
}

.anniversaryEditorActions{
  gap: 8px;
  flex-wrap: wrap;
}

.anniversaryStatus{
  margin: -8px 4px 20px;
  color: var(--text-secondary);
  font: 12px/1.5 var(--font-body);
}

@media (max-width: 390px) {
  .anniversaryEditorRow{
    display: grid;
    grid-template-columns: 1fr;
  }
}

.loadEarlierMessages{
  align-self: center;
  min-height: 30px;
  margin: 4px auto 12px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.82);
  box-shadow: none;
  font: 500 11px/1 var(--font-sans);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}

/* Persistent, privacy-safe memory receipts sit with the message like a timestamp. */
.messageReceiptStack{
  justify-self: start;
  display: grid;
  gap: 5px;
  max-width: min(82%, 360px);
  margin: 0 40px;
}

.messageReceiptStack .messageMemoryReceipt{
  margin: 0;
}

.messageRow.user .messageReceiptStack{
  justify-self: end;
}

.chatVoiceNoteCard{
  position: relative;
  display: grid;
  flex: 0 1 var(--voice-note-width, 142px);
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 0;
  /* JS supplies a stable 142–240px duration width. Length-only math keeps the
     declaration valid in iOS Safari instead of allowing a full-row fallback. */
  width: min(var(--voice-note-width, 142px), calc(100vw - 92px));
  max-width: calc(100vw - 92px);
  min-width: min(142px, calc(100vw - 92px));
  color: rgba(255, 255, 255, 0.9);
}

.chatVoiceTimelineItem{
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  justify-items: normal;
  width: fit-content;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}

.chatVoiceTimelineItem > .chatAvatar{
  flex: 0 0 30px;
}

.chatVoiceNotePill{
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 44px;
  min-width: 0;
  padding: 0 12px 0 9px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(255, 255, 255, 0.07),
    0 4px 14px rgba(27, 23, 20, 0.06);
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

.chatVoicePlayButton{
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  min-width: 25px;
  min-height: 25px;
  flex: 0 0 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.chatVoicePlayButton .isPlay{
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
}

.chatVoicePlayButton .isPause{
  width: 7px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-left: 2px solid currentColor;
}

.chatVoiceWaveform{
  position: relative;
  display: block;
  height: 26px;
  min-width: 0;
  flex: 1 1 auto;
}

.chatVoiceWaveBars{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.chatVoiceWaveBars i{
  display: block;
  width: 2px;
  min-width: 1px;
  max-height: 24px;
  flex: 0 1 2px;
  border-radius: 999px;
  background: currentColor;
}

.chatVoiceWaveBars.is-played{
  color: rgba(255, 255, 255, 0.92);
  clip-path: inset(0 calc(100% - var(--voice-progress, 0%)) 0 0);
}

.chatVoiceWaveform input[type="range"]{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  touch-action: pan-y;
}

.chatVoiceDuration{
  min-width: 28px;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.73);
  font: 500 10px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.chatVoiceAudioElement{
  display: none;
}

.chatVoiceExpiredLabel{
  width: 100%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.66);
  font: 500 10px/1 var(--font-body);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chatVoiceNoteCard.isExpired{
  width: min(168px, calc(100vw - 92px));
}

.chatVoiceTranscript{
  width: 100%;
  min-width: 0;
  margin: 0;
}

.chatVoiceTranscript:not([open]){
  height: 0;
}

.chatVoiceTranscript summary{
  position: absolute;
  top: 12px;
  left: calc(100% + 4px);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  list-style: none;
  font-size: 0;
  line-height: 0;
  color: rgba(255, 255, 255, 0.62);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chatVoiceTranscript summary::-webkit-details-marker{
  display: none;
}

.chatVoiceTranscript summary::marker{
  content: "";
  font-size: 0;
}

.chatVoiceTranscript summary span{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.chatVoiceTranscript summary::after{
  content: "";
  box-sizing: border-box;
  width: 5px;
  height: 5px;
  border-right: 1.1px solid currentColor;
  border-bottom: 1.1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 150ms ease;
}

.chatVoiceTranscript[open] summary::after{
  transform: rotate(225deg) translate(-1px, -1px);
}

.chatVoiceTranscript p{
  width: min(76vw, 340px);
  max-width: calc(100vw - 108px);
  margin: 4px 0 1px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.045);
  font: 400 11px/1.55 var(--font-body);
  white-space: pre-wrap;
  opacity: 0.88;
}

.messageMemoryReceipt{
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 15px;
  margin: 0 40px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(20, 18, 16, 0.12);
}

.messageRow.user .messageMemoryReceipt{
  justify-self: end;
}

.messageMemoryReceipt > span{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.messageMemoryReceipt.isMcpReceipt{
  max-width: min(82%, 360px);
  white-space: nowrap;
}

.messageMemoryReceiptLine{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.messageMemoryReceipt.isMcpReceipt > span,
.messageMemoryReceipt.isMcpReceipt .mcpReceiptDetails > summary > span{
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.messageMemoryReceiptLabel{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messageMemoryReceiptTime{
  flex: 0 999 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.mcpReceiptDetails{
  min-width: 0;
  max-width: 100%;
}

.mcpReceiptDetails > summary{
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.mcpReceiptDetails > summary > span{
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mcpReceiptDetails > summary::-webkit-details-marker{
  display: none;
}

.mcpReceiptDetails > summary::after{
  content: "›";
  display: inline-block;
  margin-left: 1px;
  font-size: 12px;
  line-height: 1;
  opacity: 0.76;
  transition: transform 160ms ease;
}

.mcpReceiptDetails[open] > summary::after{
  transform: rotate(90deg);
}

.mcpReceiptDetailBody{
  display: grid;
  gap: 8px;
  width: min(74vw, 330px);
  margin-top: 6px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(35, 32, 29, 0.28);
  box-shadow: 0 4px 12px rgba(20, 18, 16, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mcpReceiptDetailBody section,
.mcpReceiptDetailBody h4,
.mcpReceiptDetailBody pre{
  margin: 0;
}

.mcpReceiptDetailBody section{
  display: grid;
  gap: 3px;
}

.mcpReceiptDetailBody h4{
  color: rgba(255, 255, 255, 0.62);
  font: 500 8.5px/1.35 var(--font-body);
  letter-spacing: 0.08em;
}

.mcpReceiptDetailBody pre{
  overflow: auto;
  max-height: 220px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.88);
  font: 9px/1.55 ui-monospace, "SFMono-Regular", Consolas, monospace;
  scrollbar-width: none;
}

.mcpReceiptDetailBody pre::-webkit-scrollbar{
  display: none;
}

.mcpPermissionHistory{
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mcpPermissionHistory li{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, 0.78);
  font: 9px/1.4 var(--font-body);
}

.mcpPermissionHistory time{
  opacity: 0.64;
}

.messageMemoryReceipt i{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

.messageMemoryReceipt.status-reverted{
  opacity: 0.68;
}

.openingBreathReceipt{
  opacity: 0.82;
  pointer-events: none;
}

/* Model-route feedback is a quiet caption, not another settings headline. */
.settingsPanel .formStatus,
.settingsPanel .formError{
  margin: 2px 0 0;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
}

.settingsPanel .formStatus{
  color: var(--text-secondary);
}

/* Compact, quiet follow-model switches. Native checkboxes were too large in the settings card. */
.settingsPanel .settingsCheckbox{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
  padding: 3px 1px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.settingsPanel .settingsCheckbox input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  order: 2;
  flex: 0 0 auto;
  width: 27px;
  height: 16px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(184, 178, 170, 0.42);
  box-shadow: inset 0 0 0 1px rgba(142, 126, 115, 0.12);
  cursor: pointer;
  transition: background 160ms ease;
}

.settingsPanel .settingsCheckbox input[type="checkbox"]::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(251, 248, 242, 0.96);
  box-shadow: 0 1px 3px rgba(74, 65, 60, 0.16);
  transition: transform 160ms ease;
}

.settingsPanel .settingsCheckbox input[type="checkbox"]:checked{
  background: rgba(163, 143, 134, 0.82);
}

.settingsPanel .settingsCheckbox input[type="checkbox"]:checked::after{
  transform: translateX(11px);
}

.settingsPanel .settingsCheckbox input[type="checkbox"]:disabled{
  cursor: default;
  opacity: 0.5;
}

.settingsPanel .modelFollowHint{
  display: block;
  margin: 2px 1px 8px;
  color: var(--text-soft);
  font-size: 10.5px;
}

.continuityBody{
  display: grid;
  gap: 14px;
}

.continuityToggle{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  color: var(--text-primary);
}

.continuityToggle input{
  width: 14px;
  height: 14px;
  margin: 1px 0 0;
  accent-color: var(--accent);
}

.continuityToggle strong{
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.continuityToggle span,
.continuityPortraitHeading > div{
  display: grid;
  gap: 3px;
}

.continuityToggle small,
.continuityPortrait small{
  color: var(--text-secondary);
  font-size: 9.5px;
  line-height: 1.5;
}

.continuityPortraitList{
  display: grid;
  gap: 10px;
}

.continuityPortrait{
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--divider) 58%, transparent);
}

.continuityPortraitHeading{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.continuityPortraitHeading button{
  flex: 0 0 auto;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
  box-shadow: none;
}

.continuityPortraitText{
  margin: 10px 0 0;
  white-space: pre-wrap;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.65;
}

/* Conversation windows: a quiet letter index, intentionally easy to reskin later. */
.appShell-conversations,
.appContent-conversations{
  background:
    radial-gradient(circle at 86% 4%, rgba(225, 193, 182, 0.22), transparent 25%),
    linear-gradient(180deg, #f7f2eb 0%, #f2ede6 100%);
}

.appContent-conversations{
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.appContent-conversations::-webkit-scrollbar{
  display: none;
}

.conversationWindowsScreen{
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: max(22px, env(safe-area-inset-top)) 20px calc(104px + env(safe-area-inset-bottom));
  color: var(--text-primary);
}

.conversationWindowsHeader{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:4px; }

.conversationWindowsHeader > div:not(.conversationHeaderActions){ position:absolute; left:50%; width:min(112px,32vw); transform:translate(-50%,3px); min-width:0; text-align:center; }

.conversationHeaderActions{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}

.conversationRoomOpenButton{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:0;
  padding:6px 9px;
  border:1px solid rgba(203,164,125,.28);
  border-radius:999px;
  background:rgba(239,193,146,.22);
  color:#886c58;
  font-size:10px;
  box-shadow:none;
}

.conversationRoomOpenButton > span:first-child{
  font-size:10px;
}

.conversationRoomScreen{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:100%;
  padding:max(18px,env(safe-area-inset-top)) 18px calc(92px + env(safe-area-inset-bottom));
  color:#4f4642;
  background:
    radial-gradient(circle at 12% 12%,rgba(255,255,255,.82),transparent 30%),
    radial-gradient(circle at 88% 7%,rgba(232,190,151,.2),transparent 28%),
    linear-gradient(180deg,#f8f2eb 0%,#f3ece4 100%);
}

.conversationRoomTopbar{
  position:sticky;
  top:0;
  z-index:4;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:2px 0 10px;
  background:linear-gradient(180deg,rgba(248,242,235,.98) 72%,rgba(248,242,235,0));
}

.conversationRoomTopbar > button{
  width:32px;
  height:32px;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  color:#796d67;
  font:300 29px/1 Georgia,serif;
  box-shadow:none;
}

.conversationRoomTopbar > div{ min-width:0; }
.conversationRoomTopbar small{
  display:block;
  color:#a68d7a;
  font:600 8px/1.4 var(--font-heading);
  letter-spacing:.15em;
}
.conversationRoomTopbar strong{
  display:block;
  overflow:hidden;
  margin-top:2px;
  font:400 14px/1.3 var(--font-serif);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.conversationRoomRound,.conversationRoomSeatCount{
  padding:5px 9px;
  border:1px solid rgba(178,145,116,.24);
  border-radius:999px;
  background:rgba(255,255,255,.46);
  color:#8c7462;
  font:600 9px/1 var(--font-body);
}

.conversationRoomIntro{
  display:grid;
  justify-items:center;
  padding:8px 16px 10px;
  text-align:center;
}
.conversationRoomIntro img{ width:112px; height:112px; object-fit:contain; }
.conversationRoomIntro p{ max-width:290px; margin:6px 0 8px; color:#766a64; font:13px/1.65 var(--font-serif); }
.conversationRoomIntro small{ color:#b08a6a; font:700 8px/1.4 var(--font-body); letter-spacing:.12em; }

.conversationRoomWindowPicker{ display:grid; gap:7px; margin-top:6px; }
.conversationRoomWindowPicker button{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:0;
  padding:10px 12px;
  border:1px solid rgba(185,170,157,.28);
  border-radius:15px;
  background:rgba(255,255,255,.4);
  color:inherit;
  text-align:left;
  box-shadow:0 5px 16px rgba(78,57,46,.025);
}
.conversationRoomWindowPicker button > span{ color:#b6a79c; font:10px/1 var(--font-heading); }
.conversationRoomWindowPicker button > strong{ overflow:hidden; font:400 12px/1.3 var(--font-serif); text-overflow:ellipsis; white-space:nowrap; }
.conversationRoomWindowPicker button > small{ color:#a9998e; font:9px/1 var(--font-body); }
.conversationRoomWindowPicker button.isSelected{ border-color:rgba(213,160,110,.42); background:linear-gradient(135deg,rgba(247,213,178,.53),rgba(255,255,255,.46)); }
.conversationRoomWindowPicker button:disabled{ opacity:.38; }

.conversationRoomSeatSettings{ display:grid; gap:8px; margin-top:14px; }
.conversationRoomSeatSettings article{ padding:10px 12px; border:1px solid rgba(188,170,155,.24); border-radius:16px; background:rgba(255,255,255,.32); }
.conversationRoomSeatSettings article > header{ display:flex; align-items:baseline; gap:8px; }
.conversationRoomSeatSettings article > header span{ color:#b28b69; font:700 8px/1 var(--font-body); letter-spacing:.1em; }
.conversationRoomSeatSettings article > header strong{ overflow:hidden; font:400 12px/1.3 var(--font-serif); text-overflow:ellipsis; white-space:nowrap; }
.conversationRoomSeatSettings article > div{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:7px; margin-top:8px; }
.conversationRoomSeatSettings label{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:5px; min-width:0; padding:0 8px; border-radius:999px; background:rgba(255,255,255,.62); color:#a18e82; font:9px/1 var(--font-body); }
.conversationRoomSeatSettings select{ min-width:0; height:30px; padding:0 14px 0 2px; border:0; outline:0; background:transparent; color:#655953; font:10px/1 var(--font-body); }
.conversationRoomNameInput{ margin-top:8px; }
.conversationRoomNameInput input{ min-width:0; height:30px; padding:0 4px; border:0; outline:0; background:transparent; color:#655953; font:11px/1 var(--font-body); }
.conversationRoomWindowSelect{ margin-top:8px; }

.conversationRoomEnter{
  position:sticky;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:5;
  width:min(230px,70%);
  min-height:42px;
  margin:22px auto 0;
  border:1px solid rgba(255,255,255,.56);
  border-radius:999px;
  background:rgba(255,255,255,.7);
  color:#5f534d;
  font:600 12px/1 var(--font-body);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  backdrop-filter:blur(20px) saturate(130%);
  box-shadow:0 10px 26px rgba(80,55,42,.1);
}
.conversationRoomEnter:disabled{ opacity:.38; }
.conversationRoomResume{ width:min(210px,68%); min-height:36px; margin:4px auto 12px; border:0; border-radius:999px; background:rgba(238,190,146,.35); color:#725b4c; font:600 10px/1 var(--font-body); box-shadow:none; }

.conversationRoomStage{ position:relative; display:grid; justify-items:center; padding:0 0 6px; }
.conversationRoomHalo{ position:relative; top:auto; display:grid; width:92px; height:68px; place-items:center; border-radius:50%; background:radial-gradient(circle,rgba(240,193,150,.26),rgba(240,193,150,0) 70%); }
.conversationRoomHalo img{ width:66px; height:66px; object-fit:contain; opacity:.72; }
.conversationRoomSeats{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; padding-top:0; margin-top:-2px; }
.conversationRoomSeats article{ display:grid; justify-items:center; min-width:0; padding:7px 8px; border:1px solid rgba(255,255,255,.56); border-radius:15px; background:rgba(255,255,255,.42); box-shadow:0 7px 20px rgba(74,52,42,.04); }
.conversationRoomSeats img{ width:25px; height:25px; border-radius:50%; object-fit:cover; }
.conversationRoomSeats small{ margin-top:6px; color:#b18a69; font:700 7px/1 var(--font-body); letter-spacing:.1em; }
.conversationRoomSeats strong{ overflow:hidden; max-width:100%; margin-top:3px; font:400 11px/1.3 var(--font-serif); text-overflow:ellipsis; white-space:nowrap; }
.conversationRoomSeats span{ color:#a3948a; font:8px/1.5 var(--font-body); }

.conversationRoomTranscript{ display:grid; gap:10px; padding:6px 0 16px; }
.conversationRoomPreviewNotice{ padding:9px 11px; border:1px dashed rgba(189,150,116,.34); border-radius:13px; background:rgba(255,250,244,.36); text-align:center; }
.conversationRoomPreviewNotice span{ color:#ae7e59; font:700 8px/1 var(--font-body); letter-spacing:.12em; }
.conversationRoomPreviewNotice p{ margin:4px 0 0; color:#9a887c; font:9px/1.5 var(--font-body); }

.conversationRoomTurn{ display:flex; width:100%; flex-wrap:wrap; align-items:flex-end; gap:5px 7px; }
.conversationRoomTurn.isUser{ flex-direction:row-reverse; justify-content:flex-start; padding-left:14%; }
.conversationRoomTurnMeta{ display:grid; flex:0 0 38px; justify-items:center; gap:2px; }
.conversationRoomTurnMeta img{ width:29px; height:29px; border-radius:50%; object-fit:cover; }
.conversationRoomTurnMeta span{ color:#a7968c; font:7px/1.2 var(--font-body); white-space:nowrap; }
.conversationRoomBubble{ max-width:73%; padding:9px 12px; border:0; border-radius:14px 14px 14px 4px; background:linear-gradient(145deg,rgba(244,197,152,.52),rgba(235,173,119,.27)); color:#554842; font:12px/1.65 Georgia,"Songti SC",serif; white-space:pre-wrap; box-shadow:0 6px 18px rgba(102,67,41,.05); -webkit-backdrop-filter:blur(18px) saturate(130%); backdrop-filter:blur(18px) saturate(130%); }
.conversationRoomTurn.isUser .conversationRoomBubble{ border-radius:14px 14px 4px 14px; background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.62)); box-shadow:0 6px 18px rgba(60,40,48,.035); }
.conversationRoomTurn > small{ flex-basis:100%; margin-left:45px; color:#b1a097; font:7px/1.2 var(--font-body); }
.conversationRoomTurn.isUser > small{ margin-right:45px; margin-left:0; text-align:right; }

.conversationRoomUserPresence{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 11px; border-radius:13px; background:rgba(255,255,255,.33); }
.conversationRoomUserPresence p{ margin:0; color:#95847a; font:9px/1.45 var(--font-body); }
.conversationRoomUserPresence time{ flex:0 0 auto; color:#a97754; font:600 11px/1 var(--font-heading); }

.conversationRoomControls{ position:fixed; right:18px; bottom:calc(14px + env(safe-area-inset-bottom)); left:18px; z-index:7; display:grid; grid-template-columns:82px minmax(0,1fr); gap:8px; }
.conversationRoomControls button{ min-height:42px; border:1px solid rgba(255,255,255,.62); border-radius:999px; font:600 11px/1 var(--font-body); -webkit-backdrop-filter:blur(22px) saturate(130%); backdrop-filter:blur(22px) saturate(130%); box-shadow:0 9px 24px rgba(72,49,39,.09); }
.conversationRoomStop{ background:rgba(255,255,255,.76); color:#83736a; }
.conversationRoomPause{ background:rgba(236,184,137,.72); color:#5f493a; }

.conversationRoomScreen.isLive{
  height:100dvh;
  min-height:0;
  overflow:hidden;
  padding-top:calc(env(safe-area-inset-top) + 6px);
  padding-bottom:calc(150px + env(safe-area-inset-bottom));
}
.conversationRoomScreen.isLive .conversationRoomTranscript{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.conversationRoomScreen.isLive .conversationRoomTranscript::-webkit-scrollbar{ display:none; }
.conversationRoomSending{
  margin:2px 45px;
  color:#a18d80;
  font:9px/1.5 var(--font-body);
}
.conversationRoomComposer{
  position:fixed;
  right:18px;
  bottom:calc(64px + env(safe-area-inset-bottom) + var(--room-keyboard-inset,0px));
  left:18px;
  z-index:7;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:7px;
  padding:7px 7px 7px 12px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:18px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(130%);
  backdrop-filter:blur(22px) saturate(130%);
  box-shadow:0 9px 24px rgba(72,49,39,.08);
}
.conversationRoomComposer textarea{
  width:100%;
  min-height:34px;
  max-height:92px;
  padding:8px 0;
  resize:none;
  border:0;
  outline:0;
  background:transparent;
  color:#554842;
  font:12px/1.5 var(--font-body);
}
.conversationRoomComposer button{
  min-height:34px;
  padding:0 13px;
  border:0;
  border-radius:13px;
  background:rgba(235,178,125,.72);
  color:#5f493a;
  font:600 10px/1 var(--font-body);
  box-shadow:none;
}
.conversationRoomComposer button:disabled{ opacity:.4; }
.conversationRoomMentions{ position:fixed; right:22px; bottom:calc(116px + env(safe-area-inset-bottom)); left:22px; z-index:8; display:flex; align-items:center; gap:6px; overflow-x:auto; color:#9b887c; font:8px/1 var(--font-body); scrollbar-width:none; }
.conversationRoomMentions button{ flex:0 0 auto; min-height:26px; padding:0 9px; border:0; border-radius:999px; background:rgba(244,205,168,.55); color:#6f5747; font:600 9px/1 var(--font-body); box-shadow:none; }
.conversationRoomScreen.isKeyboardOpen .conversationRoomComposer{ bottom:calc(8px + var(--room-keyboard-inset,0px)); }
.conversationRoomScreen.isKeyboardOpen .conversationRoomMentions,
.conversationRoomScreen.isKeyboardOpen .conversationRoomControls{ display:none; }

body:has(.conversationRoomScreen) .bottomNavigation{ display:none; }

.conversationWindowsHeader small{
  display: block;
  overflow: hidden;
  color: var(--text-soft);
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 520;
  letter-spacing: 0.14em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversationHomeBack,
.newConversationButton,
.conversationWindowDelete,
.conversationWindowRename,
.conversationWindowOpen,
.emptyConversationWindow{
  min-height: 0;
}

.conversationHomeBack{
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  box-shadow: none;
}

.conversationHomeBack svg{
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.newConversationButton{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 6px 9px;
  border: 1px solid rgba(184, 178, 170, 0.34);
  border-radius: 999px;
  background: rgba(251, 248, 242, 0.58);
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 500;
  box-shadow: none;
}

.newConversationButton > span:first-child{
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
}

.conversationSearchBox{
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 8px;
  height: 34px;
  min-height: 34px;
  margin-top: 28px;
  padding: 0 8px 0 11px;
  border: 1px solid rgba(184, 178, 170, 0.34);
  border-radius: 12px;
  background: rgba(251, 248, 242, 0.52);
}

.conversationSearchBox svg{
  width: 15px;
  fill: none;
  stroke: rgba(112, 105, 99, 0.62);
  stroke-width: 1.45;
  stroke-linecap: round;
  position: relative;
  top: -3px;
}

.conversationSearchBox input{
  display: block;
  width: 100%;
  height: 24px;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font: 12px/24px var(--font-body);
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  top: -3px;
}

.conversationSearchBox input::placeholder{
  color: rgba(112, 105, 99, 0.48);
}

.conversationSearchBox button{
  width: 24px;
  height: 24px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(112, 105, 99, 0.55);
  font-size: 16px;
  box-shadow: none;
}

.conversationSearchResults{
  display: grid;
  margin-top: 18px;
  border-top: 1px solid rgba(184, 178, 170, 0.28);
}

.conversationSearchResult{
  display: grid;
  gap: 7px;
  width: 100%;
  min-height: 0;
  padding: 15px 2px;
  border: 0;
  border-bottom: 1px solid rgba(184, 178, 170, 0.26);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

.conversationSearchResultHeader{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.conversationSearchResultHeader strong{
  overflow: hidden;
  color: var(--text-primary);
  font: 400 13px/1.35 var(--font-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversationSearchResultHeader time{
  flex: 0 0 auto;
  color: var(--text-soft);
  font: 8px/1.3 var(--font-body);
  letter-spacing: 0.05em;
}

.conversationSearchSnippet{
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-secondary);
  font: 11px/1.55 var(--font-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.conversationWindowList{
  margin: 14px 8px 0;
  border-top: 1px solid rgba(184, 178, 170, 0.28);
}

.conversationWindowsScreen:not(.isSearchRevealed) .conversationWindowList{
  margin-top: 30px;
}

.messageRow.isSearchTarget{
  animation: messageSearchTarget 1.8s ease-out;
}

@keyframes messageSearchTarget{
  0%, 28%{ filter: drop-shadow(0 0 8px rgba(255, 232, 173, 0.72)); }
  100%{ filter: none; }
}

.conversationWindowItem{
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(184, 178, 170, 0.26);
}

.conversationWindowItem.isCurrent::before{
  content: "";
  position: absolute;
  top: 18px;
  left: -9px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--blush);
}

.conversationWindowOpen{
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  padding: 11px 2px 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  box-shadow: none;
}

.conversationWindowNumber{
  padding-top: 1px;
  color: var(--pale-silver);
  font-family: var(--font-heading);
  font-size: 16px;
  font-style: italic;
}

.conversationWindowCopy{
  display: grid;
  min-width: 0;
  gap: 2px;
}

.conversationWindowMeta{
  color: var(--text-soft);
  font-size: 8.5px;
  letter-spacing: 0.08em;
}

.conversationWindowCopy strong{
  overflow: hidden;
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversationWindowActions{
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  width: 116px;
  overflow: hidden;
  border-radius: 0;
  background: rgba(231, 215, 200, 0.46);
}

.conversationWindowSwipeShell{
  position: relative;
  min-height: 62px;
}

.conversationWindowSwipeSurface{
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 62px;
  touch-action: pan-y;
  background: #f4efe8;
  transition: transform 180ms cubic-bezier(.22,.72,.28,1);
  will-change: transform;
}

.conversationWindowSwipeSurface.isDragging{
  transition: none;
}

.conversationWindowDelete,
.conversationWindowRename{
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  width: 58px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(108, 91, 82, 0.72);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  box-shadow: none;
}

.conversationWindowRename{
  background: rgba(251, 248, 242, 0.42);
}

.conversationWindowRename svg,
.conversationWindowDelete svg{
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.conversationWindowDelete{
  color: rgba(157, 86, 79, 0.84);
  background: rgba(213, 150, 142, 0.22);
}

.conversationWindowRenameForm{
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 29px 29px;
  align-items: center;
  gap: 8px;
  min-height: 62px;
}

.conversationWindowRenameForm label{
  min-width: 0;
}

.conversationWindowRenameForm input{
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid rgba(184, 178, 170, 0.42);
  border-radius: 12px;
  outline: none;
  background: rgba(251, 248, 242, 0.7);
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: 14px;
  box-shadow: none;
}

.conversationWindowRenameForm input:focus{
  border-color: rgba(163, 143, 134, 0.62);
}

.conversationWindowRenameForm button{
  width: 27px;
  height: 27px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(231, 215, 200, 0.42);
  color: var(--text-secondary);
  font-size: 13px;
  box-shadow: none;
}

.conversationWindowsState,
.conversationWindowsError,
.conversationWindowsFootnote{
  color: var(--text-soft);
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
}

.conversationWindowsError{
  color: #9a625d;
}

.conversationWindowsFootnote{
  margin-top: 24px;
}

.emptyConversationWindow{
  display: grid;
  width: 100%;
  gap: 8px;
  padding: 38px 20px;
  border: 1px dashed rgba(184, 178, 170, 0.36);
  border-radius: 20px;
  background: rgba(251, 248, 242, 0.3);
  color: var(--text-secondary);
  box-shadow: none;
}

.emptyConversationWindow span{
  font-family: var(--font-serif);
  font-size: 14px;
}

.emptyConversationWindow strong{
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.messageMemoryReceipt.status-pending_confirmation{
  color: rgba(255, 241, 207, 0.84);
}

.messageMemoryReceipt button{
  appearance: none;
  -webkit-appearance: none;
  min-height: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 1.25;
  opacity: 0.9;
}

.messageMemoryReceipt button:disabled{
  opacity: 0.48;
}

/* Journal: the calendar handwriting, without the Calendar photograph. */
.journalScreen{
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: auto;
  container-type: inline-size;
  background:
    linear-gradient(rgba(88, 67, 72, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 67, 72, 0.035) 1px, transparent 1px),
    #f4f1ed;
  background-size: 32px 32px;
  color: #302a2c;
  font-family: var(--font-body);
}

.journalTopbar{
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: calc(70px + env(safe-area-inset-top));
  padding: calc(10px + env(safe-area-inset-top)) 20px 10px;
  border-bottom: 1px solid rgba(63, 48, 53, 0.1);
  background: rgba(244, 241, 237, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.journalTopbar > div{ display: grid; justify-items: start; gap: 1px; }
.journalTopbar span{ color: #92858a; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; }
.journalTopbar strong{ font-family: Georgia, serif; font-size: 20px; font-weight: 500; letter-spacing: 0.02em; }
.journalTopbar button{
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(71, 55, 61, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: #55474c;
  box-shadow: none;
  font-size: 11px;
}
.journalTopbar button:last-child{ justify-self: end; }

.journalDashboard{
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 720px);
  justify-content: center;
  gap: 22px;
  width: min(100%, 1160px);
  margin: 0 auto;
  padding: 24px 22px calc(112px + env(safe-area-inset-bottom));
}

.journalAnalytics{ position: sticky; top: calc(94px + env(safe-area-inset-top)); align-self: start; display: grid; gap: 16px; }
.journalCalendarCard,
.journalTrendCard,
.journalScoresPanel,
.journalEditorSection{
  border: 1px solid rgba(74, 56, 62, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 44px rgba(66, 47, 54, 0.055);
}

.journalCalendarCard{ padding: 20px 18px 18px; }
.journalCalendarCard > header{ display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; margin-bottom: 12px; }
.journalCalendarCard > header div{ display: grid; justify-items: center; }
.journalCalendarCard > header strong{ font-family: Georgia, serif; font-size: 24px; font-weight: 500; }
.journalCalendarCard > header span{ color: #9d9195; font-size: 10px; letter-spacing: 0.15em; }
.journalCalendarCard > header button{
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: #76686d;
  box-shadow: none;
  font-size: 25px;
}

.journalWeekdays,
.journalDates{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.journalWeekdays{ margin-bottom: 4px; color: #a29599; font-size: 9px; letter-spacing: 0.1em; }
.journalDates{ row-gap: 2px; font-family: var(--font-calendar-hand), "Nanum Pen Script", "Segoe Print", cursive; }
.journalDates > span,
.journalDates > button{ min-height: 36px; }
.journalDates > button{
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 7px;
  place-items: center;
  width: 36px;
  min-width: 36px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #4f4247;
  box-shadow: none;
  font-family: inherit;
}
.journalDates b{ align-self: end; font-size: 21px; font-weight: 400; line-height: 1; }
.journalDayDots{ align-self: start; display: flex; justify-content: center; gap: 3px; min-height: 5px; }
.journalDayDots i{ display: block; width: 4px; height: 4px; border-radius: 50%; }
.journalDayDots .isMood{ background: hsl(336 34% 61%); }
.journalDayDots .isPeriod{ background: #d85f69; box-shadow: 0 0 0 1px rgba(216, 95, 105, 0.12); }
.journalDates button.isSelected{ box-shadow: inset 0 0 0 1.5px #aa647e; }
.journalDates button.isToday::after{
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(130, 86, 103, 0.7);
  border-radius: 48% 52% 45% 55%;
  transform: rotate(-7deg);
  pointer-events: none;
}

.journalTrendCard{ padding: 17px 18px 12px; }
.journalTrendCard > header{ display: flex; align-items: end; justify-content: space-between; }
.journalTrendCard > header div{ display: flex; align-items: baseline; gap: 10px; }
.journalTrendCard > header span{ color: #8f8287; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.journalTrendCard > header small{ color: #a3979b; font-size: 9px; }
.journalTrendLegend{ display: flex; gap: 8px; margin-top: 10px; }
.journalTrendLegend > span{ display: flex; align-items: baseline; gap: 5px; padding: 5px 8px; border-radius: 999px; font-size: 8px; }
.journalTrendLegend > span::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; }
.journalTrendLegend .isHer{ background: rgba(169, 95, 123, 0.08); color: #8f536b; }
.journalTrendLegend .isHer::before{ background: #a95f7b; }
.journalTrendLegend .isClaude{ background: rgba(105, 125, 168, 0.09); color: #5e7098; }
.journalTrendLegend .isClaude::before{ background: #697da8; }
.journalTrendLegend strong{ font-family: Georgia, serif; font-size: 13px; }
.journalTrendCard svg{ display: block; width: 100%; height: auto; margin-top: 7px; overflow: visible; }
.journalTrendCard line{ stroke: rgba(76, 57, 64, 0.09); stroke-width: 1; }
.journalTrendCard path{ fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.2; }
.journalTrendCard .herLine{ stroke: #a95f7b; }
.journalTrendCard .claudeLine{ stroke: #697da8; }
.journalTrendCard circle{ stroke: none; }
.journalTrendCard .herPoint{ fill: #a95f7b; }
.journalTrendCard .claudePoint{ fill: #697da8; }
.journalTrendCard > footer{ display: flex; justify-content: space-between; margin-top: -5px; color: #aaa0a3; font-size: 8px; }
.journalTrendNote{ margin: 8px 0 0; color: #a09599; font-size: 8px; line-height: 1.45; }

.journalEditor{ display: grid; gap: 16px; min-width: 0; }
.journalDateHeading{ display: flex; align-items: end; justify-content: space-between; padding: 8px 4px 2px; }
.journalDateHeading span{ color: #998c91; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; }
.journalDateHeading h1{ margin: 4px 0 0; font-family: Georgia, serif; font-size: clamp(27px, 4vw, 42px); font-weight: 400; }
.journalDateHeading button,
.journalEditorSection > header button,
.journalSectionHeaderActions button{
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(85, 61, 70, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #745662;
  box-shadow: none;
  font-size: 10px;
}

.journalScoresPanel{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 15px; }
.journalScoreBlock{ display: grid; align-content: start; gap: 10px; padding: 14px; border: 1px solid rgba(78, 57, 65, 0.08); border-radius: 16px; background: rgba(250, 248, 245, 0.65); }
.journalScoreBlock > header{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.journalScoreBlock > header > div{ display: grid; gap: 2px; }
.journalScoreBlock > header span{ font-family: Georgia, serif; font-size: 16px; }
.journalScoreBlock > header small{ color: #9e9296; font-size: 8px; }
.journalScoreBlock > header strong{ font-family: Georgia, serif; font-size: 29px; font-weight: 400; }
.journalScoreBlock > header em{ margin-left: 2px; color: #a99da1; font-family: var(--font-body); font-size: 8px; font-style: normal; }
.journalScoreBlock.is-her > header strong{ color: #985c74; }
.journalScoreBlock.is-claude > header strong{ color: #62749b; }
.journalScoreBlock > p{ margin: 0; color: #66575d; font: 12px/1.6 Georgia, "Songti SC", serif; white-space: pre-wrap; }
.journalScoreBlock label,
.journalScoreMeta label,
.journalHealthFields label{ display: grid; gap: 5px; color: #8a7c81; font-size: 9px; }
.journalScoreControls{ display: grid; grid-template-columns: minmax(0, 1fr) 60px 46px; align-items: center; gap: 6px; }
.journalScoreControls input[type="range"]{ width: 100%; accent-color: #a95f7b; }
.journalScoreBlock.is-claude .journalScoreControls input[type="range"]{ accent-color: #697da8; }
.journalScoreControls button{ min-height: 34px; padding: 0 5px; border: 1px solid rgba(120, 91, 102, 0.14); border-radius: 10px; background: transparent; color: #8e747e; box-shadow: none; font-size: 8px; }
.journalScoreControls button:disabled{ opacity: 0.38; }
.journalScoreMeta{ grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 3px 2px 1px; }
.journalScoreMeta p{ display: grid; gap: 4px; margin: 0; color: #66575d; font: 12px/1.6 Georgia, "Songti SC", serif; }
.journalScoreMeta p small{ color: #91858a; font: 8px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.journalScoreMeta aside{ display: flex; align-items: start; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.journalScoreMeta aside span{ padding: 4px 8px; border-radius: 999px; background: rgba(169, 95, 123, 0.09); color: #8d5870; font-size: 9px; }
.journalScoresPanel input,
.journalScoresPanel textarea,
.journalHealthFields input,
.journalEditorSection textarea{
  width: 100%;
  border: 1px solid rgba(78, 57, 65, 0.11);
  border-radius: 12px;
  background: rgba(250, 248, 245, 0.88);
  color: #40363a;
  font: inherit;
  font-size: 13px;
  line-height: 1.55;
  outline: none;
}
.journalScoresPanel input,
.journalHealthFields input{ min-height: 36px; padding: 7px 10px; }
.journalScoresPanel textarea{ padding: 10px; resize: vertical; }
.journalScoresPanel input:focus,
.journalScoresPanel textarea:focus,
.journalHealthFields input:focus,
.journalEditorSection textarea:focus{ border-color: rgba(169, 95, 123, 0.55); box-shadow: 0 0 0 3px rgba(169, 95, 123, 0.08); }

.journalEditorSection{ padding: 20px; }
.journalEditorSection > header{ display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.journalEditorSection h3{ margin: 0; font-family: Georgia, "Songti SC", serif; font-size: 18px; font-weight: 500; }
.journalEditorSection h3 small{ margin-left: 5px; color: #a69a9e; font-family: var(--font-body); font-size: 9px; font-weight: 400; }
.journalEditorSection header p{ margin: 4px 0 0; color: #9c9094; font-size: 10px; }
.journalDeleteEntry{ min-height: 32px; padding: 0 11px; border: 1px solid rgba(151, 82, 102, 0.17); border-radius: 10px; background: rgba(169, 95, 123, 0.06); color: #985c72; box-shadow: none; font-size: 9px; }
.journalEditorSection > textarea{ min-height: 130px; padding: 13px; resize: vertical; }
.journalEmptyLine{ margin: 4px 0 0; color: #aca2a5; font-size: 11px; }
.journalDiaryText{ margin: 3px 0 0; color: #4e4146; font: 14px/1.8 Georgia, "Songti SC", serif; white-space: pre-wrap; }
.journalReadItem{ display: grid; gap: 7px; margin-top: 10px; padding: 13px 14px; border: 1px solid rgba(78, 57, 65, 0.08); border-radius: 14px; background: rgba(250, 248, 245, 0.72); }
.journalReadItem small,
.journalEditableItem > small{ color: #a06a7e; font-size: 8px; letter-spacing: 0.07em; text-transform: uppercase; }
.journalReadItem p{ margin: 0; color: #4c3f44; font: 13px/1.7 Georgia, "Songti SC", serif; white-space: pre-wrap; }
.journalEditableItem{ display: grid; gap: 6px; min-width: 0; }
.journalCollapsibleSection > summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.journalCollapsibleSection > summary::-webkit-details-marker{ display: none; }
.journalCollapsibleSection > summary > div{ min-width: 0; }
.journalCollapsibleSection > summary p{ margin: 4px 0 0; color: #9c9094; font-size: 10px; }
.journalCollapsibleSection[open] > summary{ margin-bottom: 13px; }
.journalSectionSummary{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #a09196;
  font-size: 9px;
  white-space: nowrap;
}
.journalSectionSummary i{
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #8e747e;
  border-bottom: 1.5px solid #8e747e;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}
.journalCollapsibleSection[open] .journalSectionSummary i{ transform: rotate(225deg); }
.journalMyDiarySection[open] .journalAuthorChannel + .journalAuthorChannel{ margin-top: 12px; }
.journalAuthorChannel{ padding: 13px 14px; border: 1px solid rgba(78, 57, 65, 0.08); border-radius: 15px; background: rgba(250, 248, 245, 0.58); }
.journalAuthorChannel > header{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.journalAuthorChannel > header > div{ display: grid; gap: 2px; }
.journalAuthorChannel > header strong{ color: #5c4b52; font: 500 13px Georgia, "Songti SC", serif; }
.journalAuthorChannel > header small{ color: #a09599; font-size: 8px; }
.journalAuthorChannel > header button{ min-height: 30px; padding: 0 10px; border-radius: 9px; background: rgba(169, 95, 123, 0.08); color: #925c70; box-shadow: none; font-size: 9px; }
.journalAuthorChannel .journalReadItem{ background: rgba(255, 255, 255, 0.54); }
.journalColumns{ margin-top: 3px; }
.journalColumnSection{ padding: 0; border: 0; background: transparent; }
.journalColumnSection + .journalColumnSection{ margin-top: 3px; border-top: 1px solid rgba(78, 57, 65, 0.075); }
.journalColumnSection > summary{ display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 9px 2px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.journalColumnSection > summary::-webkit-details-marker{ display: none; }
.journalColumnSection > summary > span{ display: grid; gap: 2px; min-width: 0; }
.journalColumnSection > summary strong{ color: #5c4b52; font: 500 13px Georgia, "Songti SC", serif; }
.journalColumnSection > summary small{ color: #a09599; font-size: 8px; }
.journalColumnToggle{ position: relative; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: rgba(169, 95, 123, 0.075); transition: transform 180ms ease, background 180ms ease; }
.journalColumnToggle::before{ content: ""; position: absolute; left: 7px; top: 7px; width: 6px; height: 6px; border-right: 1.5px solid rgba(112, 74, 89, 0.72); border-bottom: 1.5px solid rgba(112, 74, 89, 0.72); transform: rotate(45deg); }
.journalColumnSection:not([open]) .journalColumnToggle{ transform: rotate(-90deg); }
.journalColumnSection[open] .journalColumnToggle{ background: rgba(169, 95, 123, 0.11); }
.journalColumnBody{ padding: 0 2px 12px; }
.journalColumnSection + .journalColumnSection .journalColumnBody{ padding-bottom: 3px; }
.journalColumnActions{ display: flex; justify-content: flex-end; margin: -2px 0 7px; }
.journalColumnActions button{ min-height: 28px; padding: 0 9px; border-radius: 9px; background: rgba(169, 95, 123, 0.08); color: #925c70; box-shadow: none; font-size: 9px; }
.journalColumnBody .journalReadItem{ background: rgba(255, 255, 255, 0.42); }
.journalHealthFields{ display: grid; grid-template-columns: 1.2fr 1fr 0.7fr; gap: 10px; margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(78, 57, 65, 0.08); }
.journalHealthReadout{ display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0 0; padding-top: 13px; border-top: 1px solid rgba(78, 57, 65, 0.08); }
.journalHealthReadout div{ display: grid; gap: 2px; padding: 7px 9px; border-radius: 10px; background: rgba(169, 95, 123, 0.06); }
.journalHealthReadout dt{ color: #9a8d92; font-size: 8px; }
.journalHealthReadout dd{ margin: 0; color: #5d4e54; font-size: 10px; }
.journalListRow{ display: grid; grid-template-columns: 26px minmax(0, 1fr) 28px; align-items: start; gap: 8px; margin-top: 9px; }
.journalListRow > span{ padding-top: 11px; color: #b1a6aa; font-size: 9px; }
.journalListRow textarea{ min-height: 58px; padding: 10px 11px; resize: vertical; }
.journalListRow > button{ min-height: 30px; padding: 0; background: transparent; color: #aa939c; box-shadow: none; font-size: 18px; }

.journalStatusBar{ padding: 8px 4px; color: #8f8287; font-size: 10px; }

.journalSectionHeaderActions{ display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }

.journalHealthArchive{
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 28px 22px calc(112px + env(safe-area-inset-bottom));
}
.journalHealthArchive > header{ display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding: 0 3px; }
.journalHealthArchive > header > div{ min-width: 0; }
.journalHealthArchive > header small{ color: #8d7c74; font: 9px/1.4 var(--font-typewriter), ui-monospace, monospace; letter-spacing: 0.2em; }
.journalHealthArchive > header h1{ margin: 5px 0 3px; font: 500 clamp(30px, 5vw, 48px)/1 Georgia, "Songti SC", serif; }
.journalHealthArchive > header p{ margin: 8px 0 0; color: #8e817c; font-size: 11px; line-height: 1.55; }
.journalHealthArchive > header > span{ flex: 0 0 auto; padding: 7px 9px; border: 1px solid rgba(68, 55, 46, 0.16); color: #6c5e57; font: 9px var(--font-typewriter), ui-monospace, monospace; letter-spacing: 0.11em; }
.journalHealthReceiptGrid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  align-items: start;
  gap: 17px 15px;
}
.journalHealthReceipt{
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  aspect-ratio: 0.67;
  min-height: 0;
  padding: 16px 15px 15px;
  overflow: hidden;
  border: 1px solid rgba(77, 66, 55, 0.12);
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, rgba(73, 64, 53, 0.018) 0 1px, transparent 1px 4px),
    #f7f2e5;
  color: #302e29;
  box-shadow: 0 11px 24px rgba(58, 49, 41, 0.12);
  text-align: left;
  font-family: var(--font-typewriter), ui-monospace, "SFMono-Regular", monospace;
  transform-origin: 50% 12%;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.journalHealthReceipt::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 6px;
  background: linear-gradient(135deg, transparent 4px, #f4eedf 0) 0 0/8px 8px repeat-x;
  pointer-events: none;
}
.journalHealthReceipt.isTilt0{ transform: rotate(-0.45deg); }
.journalHealthReceipt.isTilt1{ transform: rotate(0.55deg); }
.journalHealthReceipt.isTilt2{ transform: rotate(-0.2deg); }
.journalHealthReceipt.isTilt3{ transform: rotate(0.3deg); }
.journalHealthReceipt:active{ transform: scale(0.985); }
.journalHealthReceipt:focus-visible{ outline: 2px solid #9b6876; outline-offset: 3px; }
.journalHealthReceipt > header{ display: flex; justify-content: space-between; gap: 8px; color: #777069; font-size: 7px; letter-spacing: 0.13em; }
.journalHealthReceipt > header b{ color: #49443f; font-weight: 600; }
.journalReceiptDate{ display: grid; gap: 3px; justify-items: center; margin: 20px 0 15px; }
.journalReceiptDate strong{ font: 700 22px/1 var(--font-typewriter), ui-monospace, monospace; letter-spacing: -0.04em; }
.journalReceiptDate span{ color: #777069; font-size: 8px; letter-spacing: 0.22em; }
.journalReceiptRule{ display: block; height: 1px; background: repeating-linear-gradient(90deg, #6f6962 0 5px, transparent 5px 8px); opacity: 0.48; }
.journalHealthReceipt dl{ display: grid; gap: 8px; margin: 13px 0; }
.journalHealthReceipt dl div{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.journalHealthReceipt dt{ color: #716a64; font-size: 7px; letter-spacing: 0.08em; }
.journalHealthReceipt dd{ margin: 0; color: #34312e; font-size: 10px; font-weight: 650; }
.journalHealthReceipt > footer{ display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; color: #777069; font-size: 7px; }
.journalHealthReceipt > footer b{ color: #393632; font-weight: 650; }
.journalHealthArchiveNote,
.journalHealthArchiveEmpty{ margin: 22px 2px 0; color: #94867f; font-size: 9px; line-height: 1.55; text-align: center; }
.journalHealthArchiveEmpty{ padding: 70px 18px; border: 1px dashed rgba(74, 59, 52, 0.18); background: rgba(255, 255, 255, 0.42); font-size: 11px; }

.journalHealthDialog{
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  background: rgba(40, 34, 31, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.journalHealthDialog > article{
  position: relative;
  width: min(88%, 520px);
  max-height: min(86dvh, 820px);
  padding: 30px 24px 26px;
  overflow: auto;
  border: 1px solid rgba(69, 61, 52, 0.14);
  border-radius: 5px;
  background:
    repeating-linear-gradient(0deg, rgba(73, 64, 53, 0.018) 0 1px, transparent 1px 4px),
    #f8f3e7;
  color: #2e2c28;
  box-shadow: 0 30px 90px rgba(30, 25, 22, 0.3);
  font-family: var(--font-typewriter), ui-monospace, "SFMono-Regular", monospace;
  overscroll-behavior: contain;
}
.journalHealthDialogClose{
  position: sticky;
  top: 0;
  z-index: 2;
  float: right;
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin: -14px -10px 0 0;
  padding: 0;
  border: 1px solid rgba(60, 53, 48, 0.18);
  border-radius: 50%;
  background: rgba(248, 243, 231, 0.94);
  color: #3f3a35;
  box-shadow: none;
  font: 20px/1 var(--font-body);
}
.journalHealthDialog > article > header{ display: grid; clear: both; justify-items: center; padding: 3px 0 17px; text-align: center; }
.journalHealthDialog > article > header small{ color: #746d66; font-size: 8px; letter-spacing: 0.2em; }
.journalHealthDialog > article > header h1{ margin: 9px 0 4px; font: 800 clamp(31px, 9vw, 47px)/1 var(--font-typewriter), ui-monospace, monospace; letter-spacing: -0.06em; }
.journalHealthDialog > article > header p{ margin: 7px 0 2px; color: #514c47; font-size: 11px; }
.journalHealthDialog > article > header span{ color: #8a8179; font-size: 8px; letter-spacing: 0.09em; }
.journalReceiptDashed{ height: 2px; margin: 3px 0 18px; background: repeating-linear-gradient(90deg, #514d47 0 7px, transparent 7px 11px); opacity: 0.52; }
.journalHealthDetailMetrics{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(68, 61, 55, 0.16); border-left: 1px solid rgba(68, 61, 55, 0.16); }
.journalHealthDetailMetrics > div{ display: grid; gap: 7px; padding: 12px; border-right: 1px solid rgba(68, 61, 55, 0.16); border-bottom: 1px solid rgba(68, 61, 55, 0.16); }
.journalHealthDetailMetrics small{ color: #777069; font-size: 7px; letter-spacing: 0.09em; }
.journalHealthDetailMetrics strong{ font-size: 18px; }
.journalHealthDetailMetrics em{ margin-left: 2px; color: #8f8780; font-size: 8px; font-style: normal; }
.journalHealthDetailSection{ padding: 19px 0 1px; }
.journalHealthDetailSection > header{ display: flex; align-items: start; gap: 10px; margin-bottom: 10px; }
.journalHealthDetailSection > header > span{ padding-top: 2px; color: #847d76; font-size: 8px; }
.journalHealthDetailSection > header > div{ display: grid; gap: 3px; }
.journalHealthDetailSection h2{ margin: 0; font: 700 14px/1.25 var(--font-typewriter), ui-monospace, monospace; }
.journalHealthDetailSection header small{ color: #8c847c; font-size: 7px; line-height: 1.45; }
.journalHealthDetailSection > p{ margin: 7px 0 0 25px; color: #3f3a36; font: 12px/1.7 Georgia, "Songti SC", serif; white-space: pre-wrap; }
.journalHealthDetailSection > p.isEmpty{ color: #968d84; font-family: var(--font-body); font-size: 10px; font-style: italic; }
.journalHealthDetailList{ display: grid; margin: 0 0 0 25px; border-top: 1px dashed rgba(68, 61, 55, 0.25); }
.journalHealthDetailList div{ display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px dashed rgba(68, 61, 55, 0.2); }
.journalHealthDetailList dt{ color: #79716a; font-size: 8px; }
.journalHealthDetailList dd{ margin: 0; color: #393530; font: 11px/1.45 Georgia, "Songti SC", serif; overflow-wrap: anywhere; }
.journalHealthHistory{ display: grid; gap: 6px; margin-left: 25px; }
.journalHealthHistory > div{ display: grid; grid-template-columns: 40px minmax(0, 1fr) 36px 27px; align-items: center; gap: 7px; min-height: 20px; color: #746c65; font-size: 8px; }
.journalHealthHistory > div.isCurrent{ color: #3a3632; font-weight: 700; }
.journalHealthHistory > div > span{ height: 6px; overflow: hidden; background: rgba(92, 77, 69, 0.09); }
.journalHealthHistory > div > span i{ display: block; height: 100%; background: #9d7882; }
.journalHealthHistory b{ font-weight: 500; text-align: right; }
.journalHealthHistory em{ color: #5e6e90; font-style: normal; text-align: right; }
.journalHealthSevenDay > footer{ display: flex; justify-content: flex-end; gap: 12px; margin: 7px 0 0 25px; color: #918981; font-size: 7px; }
.journalHealthSevenDay > footer span:first-child::before,
.journalHealthSevenDay > footer span:last-child::before{ content: ""; display: inline-block; width: 7px; height: 5px; margin-right: 4px; background: #9d7882; }
.journalHealthSevenDay > footer span:last-child::before{ border-radius: 50%; background: #5e6e90; }
.journalHealthDetailFooter{ display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.journalHealthDetailFooter p{ margin: 0; color: #817971; font-size: 8px; line-height: 1.45; }
.journalHealthDetailFooter button{ flex: 0 0 auto; min-height: 36px; padding: 0 13px; border: 1px solid #37332f; border-radius: 2px; background: #37332f; color: #f8f3e7; box-shadow: none; font: 8px var(--font-typewriter), ui-monospace, monospace; letter-spacing: 0.05em; }

.journalLoveReadItem{ position: relative; padding-right: 48px; }
.journalLoveReadItem.hasKeptExchange{ padding-right:14px; }
.journalLoveFavoriteButton{
  display: grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid rgba(143, 80, 103, 0.16);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: #a68591;
  box-shadow: none;
  font: 19px/1 Georgia, serif;
}
.journalLoveReadItem > .journalLoveFavoriteButton{ position: absolute; top: 10px; right: 10px; }
.journalLoveFavoriteButton.isFavorite{ border-color: rgba(161, 67, 97, 0.22); background: rgba(177, 83, 112, 0.09); color: #a14364; }
.journalLoveFavoriteButton:disabled{ opacity: 0.45; }
.journalLoveFavoriteButton:focus-visible{ outline: 2px solid rgba(161, 67, 97, 0.55); outline-offset: 2px; }

.journalLoveArchive{
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 28px 22px calc(112px + env(safe-area-inset-bottom));
}
.journalLoveArchive > header{ display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; padding: 0 3px; }
.journalLoveArchive > header > div{ min-width: 0; }
.journalLoveArchive > header small{ color: #9b7481; font: 9px/1.4 var(--font-typewriter), ui-monospace, monospace; letter-spacing: 0.2em; }
.journalLoveArchive > header h1{ margin: 5px 0 3px; color: #4c3540; font: 500 clamp(30px, 5vw, 48px)/1 Georgia, "Songti SC", serif; }
.journalLoveArchive > header p{ margin: 8px 0 0; color: #9a858c; font: 12px/1.55 Georgia, "Songti SC", serif; }
.journalLoveArchive > header > span{ flex: 0 0 auto; padding: 7px 9px; border: 1px solid rgba(140, 79, 100, 0.16); color: #8c5b6d; font: 9px var(--font-typewriter), ui-monospace, monospace; letter-spacing: 0.11em; }
.journalLoveWall{ column-count: 3; column-gap: 15px; }
.journalLoveCard{
  position: relative;
  display: inline-grid;
  width: 100%;
  gap: 13px;
  margin: 0 0 15px;
  padding: 20px 17px 16px;
  break-inside: avoid;
  border: 1px solid rgba(128, 78, 94, 0.11);
  border-radius: 4px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18)),
    #f4e9e7;
  box-shadow: 0 12px 28px rgba(83, 54, 65, 0.105);
  transform-origin: 50% 10%;
}
.journalLoveCard::before{
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 47px;
  height: 14px;
  background: rgba(211, 181, 169, 0.58);
  box-shadow: 0 1px 2px rgba(79, 52, 57, 0.06);
  transform: translateX(-50%) rotate(-2deg);
}
.journalLoveCard.isLoveTilt0{ transform: rotate(-0.35deg); }
.journalLoveCard.isLoveTilt1{ transform: rotate(0.45deg); }
.journalLoveCard.isLoveTilt2{ transform: rotate(-0.15deg); }
.journalLoveCard.isLoveTilt3{ transform: rotate(0.25deg); }
.journalLoveCard > header{ display: grid; gap: 2px; padding-right: 36px; }
.journalLoveCard > header span{ color: #704f5b; font: 700 12px var(--font-typewriter), ui-monospace, monospace; letter-spacing: 0.04em; }
.journalLoveCard > header small{ color: #a08790; font: 7px var(--font-typewriter), ui-monospace, monospace; letter-spacing: 0.08em; }
.journalLoveCard > .journalLoveFavoriteButton{ position: absolute; top: 14px; right: 12px; background: rgba(255, 249, 247, 0.78); }
.journalLoveCard > p{ margin: 5px 0 8px; color: #4c3c42; font: 13px/1.75 Georgia, "Songti SC", serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.journalLoveCard > footer{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 11px; border-top: 1px dashed rgba(114, 75, 89, 0.2); }
.journalLoveCard > footer > span{ color: #9a7d87; font: 7px var(--font-typewriter), ui-monospace, monospace; letter-spacing: 0.08em; }
.journalLoveCard > footer button{ min-height: 28px; padding: 0; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: transparent; color: #805365; box-shadow: none; font: 7px var(--font-typewriter), ui-monospace, monospace; }
.journalLoveArchiveNote{ margin: 19px 2px 0; color: #a08b92; font-size: 9px; line-height: 1.55; text-align: center; }
.journalLoveArchiveEmpty{ display: grid; justify-items: center; gap: 7px; padding: 72px 18px; border: 1px dashed rgba(139, 82, 102, 0.2); background: rgba(255, 255, 255, 0.42); color: #9a7c87; text-align: center; }
.journalLoveArchiveEmpty > span{ color: #ad7589; font: 37px Georgia, serif; }
.journalLoveArchiveEmpty > strong{ color: #72505d; font: 500 15px Georgia, "Songti SC", serif; }
.journalLoveArchiveEmpty > p{ margin: 0; font-size: 9px; line-height: 1.5; }

@media (max-width: 780px) {
  .journalTopbar{ grid-template-columns: minmax(0, 1fr) auto; padding-right: 12px; padding-left: 12px; }
  .journalTopbar button:last-child{ padding: 0 8px; }
  .journalDashboard{ grid-template-columns: 1fr; gap: 17px; padding: 17px 13px calc(112px + env(safe-area-inset-bottom)); }
  .journalAnalytics{ position: static; }
  .journalCalendarCard{ padding: 18px 12px 14px; }
  .journalDates > button{ width: 36px; min-width: 36px; }
  .journalTrendCard{ padding-right: 14px; padding-left: 14px; }
  .journalDateHeading{ padding: 7px 3px 0; }
  .journalDateHeading h1{ font-size: 28px; }
  .journalScoresPanel{ grid-template-columns: 1fr; padding: 12px; }
  .journalScoreMeta{ grid-column: 1; grid-template-columns: 1fr; }
  .journalScoreMeta aside{ justify-content: flex-start; }
  .journalHealthFields{ grid-template-columns: 1fr; }
  .journalEditorSection{ padding: 17px 14px; }
  .journalListRow{ grid-template-columns: 20px minmax(0, 1fr) 24px; gap: 5px; }
  .journalStatusBar{ padding: 7px 2px; }
  .journalHealthArchive{ padding: 20px 13px calc(112px + env(safe-area-inset-bottom)); }
  .journalHealthArchive > header{ align-items: start; margin-bottom: 17px; }
  .journalHealthArchive > header h1{ font-size: 31px; }
  .journalHealthArchive > header p{ max-width: 255px; }
  .journalHealthReceiptGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 10px; }
  .journalHealthReceipt{ padding: 14px 12px 13px; }
  .journalReceiptDate{ margin: 17px 0 13px; }
  .journalReceiptDate strong{ font-size: 20px; }
  .journalHealthDialog{ padding-right: 12px; padding-left: 12px; }
  .journalHealthDialog > article{ width: 88%; max-height: 86dvh; padding: 27px 18px 24px; }
  .journalLoveArchive{ padding: 20px 13px calc(112px + env(safe-area-inset-bottom)); }
  .journalLoveArchive > header{ align-items: start; margin-bottom: 18px; }
  .journalLoveArchive > header h1{ font-size: 31px; }
  .journalLoveArchive > header p{ max-width: 250px; }
  .journalLoveWall{ column-count: 2; column-gap: 10px; }
  .journalLoveCard{ margin-bottom: 11px; padding: 18px 13px 14px; }
  .journalLoveCard > p{ font-size: 12px; }
}

/* CasaShell is intentionally presented inside a phone-width shell on desktop.
   Container queries keep Journal responsive to that shell, not the browser window. */
@container (max-width: 780px) {
  .journalTopbar{ grid-template-columns: minmax(0, 1fr) auto; padding-right: 12px; padding-left: 12px; }
  .journalTopbar button:last-child{ padding: 0 8px; }
  .journalDashboard{ grid-template-columns: 1fr; gap: 17px; padding: 17px 13px calc(112px + env(safe-area-inset-bottom)); }
  .journalAnalytics{ position: static; }
  .journalCalendarCard{ padding: 18px 12px 14px; }
  .journalDates > button{ width: 36px; min-width: 36px; }
  .journalTrendCard{ padding-right: 14px; padding-left: 14px; }
  .journalDateHeading{ padding: 7px 3px 0; }
  .journalDateHeading h1{ font-size: 28px; }
  .journalScoresPanel{ grid-template-columns: 1fr; padding: 12px; }
  .journalScoreMeta{ grid-column: 1; grid-template-columns: 1fr; }
  .journalScoreMeta aside{ justify-content: flex-start; }
  .journalHealthFields{ grid-template-columns: 1fr; }
  .journalEditorSection{ padding: 17px 14px; }
  .journalListRow{ grid-template-columns: 20px minmax(0, 1fr) 24px; gap: 5px; }
  .journalStatusBar{ padding: 7px 2px; }
  .journalHealthArchive{ padding: 20px 13px calc(112px + env(safe-area-inset-bottom)); }
  .journalHealthArchive > header{ align-items: start; margin-bottom: 17px; }
  .journalHealthArchive > header h1{ font-size: 31px; }
  .journalHealthArchive > header p{ max-width: 255px; }
  .journalHealthReceiptGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 10px; }
  .journalHealthReceipt{ padding: 14px 12px 13px; }
  .journalReceiptDate{ margin: 17px 0 13px; }
  .journalReceiptDate strong{ font-size: 20px; }
  .journalHealthDialog{ padding-right: 12px; padding-left: 12px; }
  .journalHealthDialog > article{ width: 88%; max-height: 86dvh; padding: 27px 18px 24px; }
  .journalLoveArchive{ padding: 20px 13px calc(112px + env(safe-area-inset-bottom)); }
  .journalLoveArchive > header{ align-items: start; margin-bottom: 18px; }
  .journalLoveArchive > header h1{ font-size: 31px; }
  .journalLoveArchive > header p{ max-width: 250px; }
  .journalLoveWall{ column-count: 2; column-gap: 10px; }
  .journalLoveCard{ margin-bottom: 11px; padding: 18px 13px 14px; }
  .journalLoveCard > p{ font-size: 12px; }
}

@media (max-width: 390px) {
  .journalDates > button{ width: 34px; min-width: 34px; min-height: 34px; }
  .journalDates > span{ min-height: 34px; }
  .journalScoreControls{ grid-template-columns: minmax(0, 1fr) 56px 42px; }
  .journalHealthReceiptGrid{ gap: 11px 8px; }
  .journalHealthReceipt{ padding: 13px 10px 12px; }
  .journalHealthReceipt dt{ font-size: 6.5px; }
  .journalHealthDetailFooter{ align-items: stretch; flex-direction: column; }
  .journalHealthDetailFooter button{ width: 100%; }
  .journalLoveCard{ padding-right: 11px; padding-left: 11px; }
  .journalLoveCard > p{ font-size: 11.5px; }
}

/* Private calendar: a movable handwritten calendar over a personal photograph. */
.calendarScreen{
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background:
    radial-gradient(circle at 62% 28%, rgba(235, 183, 84, 0.25), transparent 22%),
    linear-gradient(160deg, #171610 0%, #242018 48%, #0d0e0c 100%);
  background-position: center;
  background-size: cover;
  color: rgba(255, 252, 244, 0.94);
  font-family: var(--font-body);
  touch-action: none;
}

.calendarScreen.hasDefaultWallpaper{
  background-color: #171610;
  background-image: url("/homeg-calendar-default.png");
  background-position: center;
  background-size: cover;
}

.calendarBackdrop{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 8, 7, 0.16), rgba(7, 8, 7, 0.34));
  pointer-events: none;
}

.calendarTopbar{
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: center;
  min-height: calc(58px + env(safe-area-inset-top));
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  color: rgba(255, 252, 244, 0.82);
}

.calendarTopbar span{
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.calendarTopbar button{
  min-height: 38px;
  padding: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font-size: 12px;
}

.calendarTopbar button:first-child{
  justify-self: start;
  width: 38px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 27px;
  font-weight: 300;
}

.calendarTopbar button:last-child{
  justify-self: end;
}

.calendarFloatingBlock{
  position: absolute;
  z-index: 3;
  width: min(88%, 390px);
  padding: 8px 11px 14px;
  user-select: none;
  -webkit-user-select: none;
}

.calendarScreen.isEditing .calendarFloatingBlock{
  cursor: grab;
  outline: 1px dashed rgba(255, 222, 145, 0.5);
  outline-offset: 8px;
}

.calendarScreen.isEditing .calendarFloatingBlock:active{
  cursor: grabbing;
}

.calendarMonthNav{
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  margin-bottom: 8px;
}

.calendarMonthNav button{
  min-height: 38px;
  padding: 0;
  background: transparent;
  color: rgba(255, 252, 244, 0.92);
  box-shadow: none;
  font-size: 30px;
  font-weight: 300;
}

.calendarMonthNav button:nth-child(2){
  display: grid;
  justify-items: center;
  gap: 0;
}

.calendarMonthNav img{
  display: block;
  width: auto;
  max-width: min(70vw, 250px);
  height: clamp(72px, 22vw, 104px);
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.08));
  pointer-events: none;
}

.calendarMonthNav span{
  margin-top: 7px;
  color: rgba(255, 252, 244, 0.72);
  font-family: var(--font-typewriter), "Special Elite", monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.calendarWeekdays,
.calendarDates{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
}

.calendarWeekdays{
  margin-bottom: 8px;
  r: rgba(255, 252, 244, 0.76);
  font-family: var(--font-typewriter), "Special Elite", monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
}

.calendarDates{
  row-gap: 6px;
  font-family: var(--font-calendar-hand), "Nanum Pen Script", "Segoe Print", cursive;
}

.calendarDates > span,
.calendarDates > button{
  position: relative;
  display: grid;
  place-items: center;
  min-height: 34px;
}

.calendarDates > button{
  width: 34px;
  min-width: 34px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 252, 244, 0.91);
  box-shadow: none;
  font-family: var(--font-calendar-hand), "Nanum Pen Script", "Segoe Print", cursive;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1;
}

.calendarDates > button.isToday{
  color: #fff5ce;
  text-shadow: 0 0 7px rgba(255, 255, 255, 0.22);
}

.calendarDates > button.isToday::after{
  content: "";
  position: absolute;
  inset: -1px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='soft' x1='28' y1='35' x2='5' y2='8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fffdf7' stop-opacity='0'/%3E%3Cstop offset='.38' stop-color='%23fffdf7' stop-opacity='.34'/%3E%3Cstop offset='.68' stop-color='%23fffdf7' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%23fffdf7' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M28.8 5.5C34 8.6 36.5 13.2 36 19.2C36.4 27.5 30.2 35.1 21 36C11.2 36.6 3.4 29.9 3.8 20.1C3.4 12.2 8 5.9 14.1 4.1C19.5 2.8 24.3 3.1 27.1 4.5' fill='none' stroke='%23fffdf7' stroke-opacity='.88' stroke-width='1.02' stroke-linecap='round'/%3E%3Cpath d='M27 34C17 38.5 5.1 32.1 4.3 21.2C3.8 15.2 6.1 9.4 11.2 5.9' fill='none' stroke='url(%23soft)' stroke-width='.9' stroke-linecap='round'/%3E%3Cpath d='M30.2 7.2C33 10 34.7 13.2 34.6 17.2' fill='none' stroke='%23fffdf7' stroke-opacity='.18' stroke-width='.48' stroke-linecap='round'/%3E%3C/svg%3E");
  transform: rotate(-5deg) scaleX(0.98);
  pointer-events: none;
}

.calendarDates > button.isSelected:not(.isToday){
  box-shadow: inset 0 0 0 1px rgba(239, 189, 88, 0.48);
}

.calendarDates > button i{
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #efbd58;
  box-shadow: 0 0 8px rgba(239, 189, 88, 0.6);
}

.calendarDates > button.isPredicted i{
  background: transparent;
  border: 1px solid rgba(239, 189, 88, 0.9);
  box-shadow: 0 0 7px rgba(239, 189, 88, 0.28);
}

.calendarEditToolbar{
  position: absolute;
  z-index: 6;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 17px;
  background: rgba(19, 18, 15, 0.44);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(13px) saturate(1.04);
  -webkit-backdrop-filter: blur(13px) saturate(1.04);
  color: rgba(255, 252, 244, 0.9);
  touch-action: manipulation;
}

.calendarEditToolbar > button,
.calendarEditToolbar > label{
  display: grid;
  place-items: center;
  min-height: 34px;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  box-shadow: none;
  font-size: 10px;
  text-align: center;
}

.calendarEditToolbar > button:active,
.calendarEditToolbar > label:active{
  background: rgba(255, 255, 255, 0.13);
}

.calendarWallpaperButton input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.calendarEditToolbar > small{
  position: absolute;
  right: 8px;
  bottom: calc(100% + 5px);
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(20, 18, 15, 0.42);
  color: rgba(255, 252, 244, 0.66);
  font-size: 8px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.calendarScaleControl{
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 28px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(20, 18, 15, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.calendarScaleControl button{
  display: grid;
  place-items: center;
  width: 24px;
  min-height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 252, 244, 0.9);
  box-shadow: none;
  font-size: 15px;
  line-height: 1;
}

.calendarScaleControl span{
  min-width: 52px;
  color: rgba(255, 252, 244, 0.72);
  font-size: 8px;
  text-align: center;
}

.calendarEditSheet{
  position: absolute;
  z-index: 7;
  right: 14px;
  bottom: calc(68px + env(safe-area-inset-bottom));
  left: 14px;
  display: grid;
  gap: 10px;
  max-height: min(38%, 310px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: rgba(23, 21, 17, 0.7);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px) saturate(1.06);
  -webkit-backdrop-filter: blur(16px) saturate(1.06);
  color: rgba(255, 252, 244, 0.9);
  touch-action: pan-y;
  scrollbar-width: none;
}

.calendarEditSheet::-webkit-scrollbar{
  display: none;
}

.calendarEditSheet > header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calendarEditSheet > header strong{
  font-size: 12px;
  font-weight: 560;
}

.calendarEditSheet > header button{
  width: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  box-shadow: none;
  font-size: 17px;
}

.calendarEventActions button{
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 10px;
  text-align: center;
}

.calendarSelectedDate{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 252, 244, 0.66);
  font-size: 9px;
}

.calendarSelectedDate b{
  color: rgba(255, 248, 228, 0.9);
  font-size: 10px;
  font-weight: 560;
}

.calendarDeleteSelected{
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(238, 186, 155, 0.22);
  border-radius: 999px;
  background: rgba(180, 112, 91, 0.1);
  color: rgba(255, 226, 211, 0.8);
  box-shadow: none;
  font-size: 9px;
}

.calendarDeleteSelected:disabled{
  opacity: 0.42;
}

.calendarEditSheet p,
.calendarEditSheet small{
  margin: 0;
  color: rgba(255, 252, 244, 0.68);
  font-size: 10px;
  line-height: 1.5;
}

.calendarPrivacySettings{
  display: grid;
  gap: 8px;
}

.calendarPrivacySettings label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 3px 1px;
  font-size: 11px;
}

.calendarPrivacySettings input{
  position: relative;
  order: 2;
  flex: 0 0 34px;
  width: 34px !important;
  height: 19px !important;
  min-width: 34px !important;
  min-height: 19px !important;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  cursor: pointer;
}

.calendarPrivacySettings input::after{
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 252, 244, 0.82);
  transition: transform 160ms ease, background 160ms ease;
}

.calendarPrivacySettings input:checked{
  border-color: rgba(240, 191, 91, 0.62);
  background: rgba(220, 167, 70, 0.55);
}

.calendarPrivacySettings input:checked::after{
  transform: translateX(15px);
  background: #fff7de;
}

.calendarPrivacySettings input:disabled{
  opacity: 0.52;
}

.calendarPrivacySettings label > span{
  display: grid;
  gap: 2px;
}

.calendarPrivacySettings label b{
  font-size: 10px;
  font-weight: 560;
}

.calendarPrivacySettings label small{
  font-size: 8px;
  line-height: 1.35;
}

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

.calendarEventActions button{
  min-height: 36px;
  padding: 8px;
}

.calendarRecentEvents{
  display: grid;
  gap: 6px;
}

.calendarRecentEvents > div{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 252, 244, 0.72);
  font-size: 10px;
}

.calendarRecentEvents button{
  min-height: 28px;
  padding: 4px 9px;
  background: transparent;
  color: rgba(255, 235, 201, 0.78);
  box-shadow: none;
  font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .calendarFloatingBlock,
.calendarDates > span i{
    transition: none !important;
  }
}

/* Apple Health bridge and Journal receipts. Kept at the end so older theme
   layers cannot silently override the integration UI. */
.appleHealthPanel .connectionState.isOffline i{ background: #a59d98; box-shadow: none; }
.appleHealthStatus{ display: grid; gap: 7px; margin: 0 0 13px; }
.appleHealthStatus div{ display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(70,58,62,.08); }
.appleHealthStatus dt{ color: #8c8185; font-size: 10px; }
.appleHealthStatus dd{ margin: 0; color: #51484c; font-size: 10px; text-align: right; }
.appleHealthRunShortcut{ display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 0 14px; border-radius: 12px; background: rgba(102,126,155,.12); color: #536b83; font-size: 11px; text-decoration: none; }
.appleHealthPairing{ display: grid; gap: 7px; margin-top: 14px; padding: 12px; border: 1px solid rgba(82,70,75,.1); border-radius: 14px; background: rgba(255,255,255,.34); }
.appleHealthPairing > strong{ color: #8c5f6e; font-size: 10px; }
.appleHealthPairing > p{ margin: 0 0 3px; color: #776d71; font-size: 9px; line-height: 1.5; }
.appleHealthPairing > label{ color: #95898e; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.appleHealthPairing > div{ display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px; }
.appleHealthPairing code{ min-width: 0; overflow: hidden; padding: 8px; border-radius: 8px; background: rgba(68,57,62,.06); color: #4e4649; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.appleHealthPairing button{ min-height: 32px; padding: 0 10px; font-size: 9px; }
.appleHealthShortcutHelp{ margin-top: 14px; }
.appleHealthShortcutHelp > summary{ color: #6f6267; font-size: 10px; cursor: pointer; }
.appleHealthShortcutHelp ol{ margin: 10px 0 0; padding-left: 20px; color: #756b6f; font-size: 9px; line-height: 1.65; }
.appleHealthShortcutHelp p{ margin: 9px 0 0; color: #91858a; font-size: 8px; line-height: 1.5; }

.journalHealthStepsChart{ display: block; width: calc(100% - 25px); height: 112px; margin: 5px 0 12px 25px; overflow: visible; }
.journalHealthStepsChart line{ stroke: rgba(73,65,61,.14); stroke-width: 1; }
.journalHealthStepsChart path{ fill: none; stroke: #748eaa; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.journalHealthStepsChart circle{ fill: #f8f2e8; stroke: #748eaa; stroke-width: 1.2; }

.calendarDates > button.hasHealthData::before{ content: ""; position: absolute; left: 50%; bottom: 1px; width: 3px; height: 3px; border-radius: 50%; background: #6f91ad; transform: translateX(-50%); opacity: .82; }
.calendarHealthSummary{ position: absolute; z-index: 3; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); left: 16px; padding: 13px 14px 12px; border: 1px solid rgba(255,255,255,.42); border-radius: 18px; background: rgba(252,248,244,.72); box-shadow: 0 8px 25px rgba(54,42,46,.09); backdrop-filter: blur(15px) saturate(1.05); -webkit-backdrop-filter: blur(15px) saturate(1.05); }
.calendarHealthSummary > header{ display: flex; justify-content: space-between; gap: 12px; color: #766b70; font: 8px var(--font-typewriter),ui-monospace,monospace; letter-spacing: .08em; }
.calendarHealthSummary dl{ display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; margin: 11px 0 8px; }
.calendarHealthSummary dl div{ min-width: 0; }
.calendarHealthSummary dt{ overflow: hidden; color: #9a8d92; font-size: 6px; letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.calendarHealthSummary dd{ margin: 4px 0 0; overflow: hidden; color: #443c40; font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.calendarHealthSummary > small{ display: block; overflow: hidden; color: #9b9094; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }

.bottomNavigation button::before{
  top: -54px;
  width: 76px;
  height: 82px;
  background: linear-gradient(
    180deg,
    rgba(255, 229, 169, 0) 0%,
    rgba(255, 222, 143, 0.11) 38%,
    rgba(246, 207, 119, 0.28) 100%
  );
  clip-path: polygon(44% 0, 56% 0, 94% 100%, 6% 100%);
  filter: blur(8px);
  transform: translateX(-50%);
}

.bottomNavigation button::after{
  bottom: 1px;
  width: 74px;
  height: 36px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(248, 210, 126, 0.31) 0%,
    rgba(249, 218, 149, 0.14) 48%,
    transparent 76%
  );
  filter: blur(5px);
  transform: translateX(-50%);
}

.bottomNavigation button.isCurrent{
  background: transparent;
  color: #6f604c;
  box-shadow: none;
}

.bottomNavigation button.isCurrent::before,
.bottomNavigation button.isCurrent::after{
  opacity: 1;
}

.bottomNavigation button > svg,
.bottomNavigation button > span{
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .bottomNavigation button::before,
.bottomNavigation button::after{
    transition: none;
  }
}

/* Navigation light stays inside the capsule: bright at the top, soft below. */
.bottomNavigation{
  overflow: hidden;
}

.bottomNavigation button::before,
.bottomNavigation button::after{
  z-index: 0;
}

.bottomNavigation button::before{
  top: -5px;
  width: 70px;
  height: 43px;
  background: linear-gradient(
    180deg,
    rgba(255, 222, 136, 0.52) 0%,
    rgba(251, 217, 134, 0.24) 38%,
    rgba(248, 214, 137, 0.08) 72%,
    transparent 100%
  );
  clip-path: polygon(31% 0, 69% 0, 88% 100%, 12% 100%);
  filter: blur(5px);
}

.bottomNavigation button::after{
  bottom: -5px;
  width: 72px;
  height: 28px;
  background: radial-gradient(
    ellipse,
    rgba(247, 205, 111, 0.25) 0%,
    rgba(249, 218, 148, 0.12) 48%,
    transparent 78%
  );
  filter: blur(6px);
}

/* Keep the companion identity on the geometric center despite the back button. */
.chatBackButton{
  position: relative;
  top: auto;
  left: auto;
  grid-column: 1;
  justify-self: start;
  border-color: rgba(255, 255, 255, 0.58);
  background: rgba(78, 69, 64, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 4px 12px rgba(20, 18, 16, 0.08);
}

.appHeader .companionIdentity{
  grid-column: 2;
  justify-self: center;
  transform: translate3d(0, -3px, 0);
}

.appHeader > span:last-child{
  grid-column: 3;
}


/* Use the supplied envelope artwork unchanged; the surrounding card stays warm. */
.homeChatLetterCard{
  grid-template-columns: minmax(146px, 49%) minmax(0, 1fr);
  gap: 10px;
  min-height: 168px;
  padding: 15px 22px 15px 16px;
  border-color: var(--border-soft);
  background:
    linear-gradient(135deg, rgba(235, 207, 139, 0.16), transparent 52%),
    var(--surface-soft);
  color: var(--text-primary);
  box-shadow: var(--shadow-card);
  transition:
    box-shadow 420ms ease,
    background-color 420ms ease;
}

.homeChatLetterCard.isOpening{
  box-shadow: 0 12px 28px rgba(74, 65, 60, 0.075);
}

.homeChatLetterCard::after{
  display: none;
}

.letterEnvelopePhoto{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1.41;
  overflow: hidden;
  border-radius: 5px;
  perspective: 700px;
  transform-style: preserve-3d;
  transform-origin: 50% 14%;
  transition:
    transform 850ms cubic-bezier(0.2, 0.72, 0.24, 1),
    filter 850ms ease;
}

.letterEnvelopePhoto > img{
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: block;
  width: 106%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 13px rgba(74, 65, 60, 0.08);
}

.letterEnvelopeInner,
.letterEnvelopeAnimatedFlap{
  position: absolute;
  inset: 0;
  clip-path: polygon(2% 1%, 98% 1%, 50% 48%);
}

.letterEnvelopeInner{
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 62%),
    #c2dce2;
  box-shadow:
    inset 0 -7px 12px rgba(66, 99, 108, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.letterEnvelopeAnimatedFlap{
  z-index: 5;
  background-image: url("/home-chat-envelope.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 106% auto;
  transform: rotateX(0deg);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 640ms cubic-bezier(0.28, 0.68, 0.24, 1);
}

.letterEnvelopeAnimatedFlap::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 56%),
    #b9d2d9;
  transform: rotateX(180deg);
  backface-visibility: hidden;
}

.letterOpeningNote{
  position: absolute;
  z-index: 3;
  top: 48%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40%;
  height: 58%;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(184, 178, 170, 0.28);
  border-radius: 3px;
  background: #f7f0e5;
  box-shadow: 0 5px 12px rgba(74, 65, 60, 0.13);
  opacity: 0;
  transform: translate(-50%, 18%) scale(0.74);
  transition:
    transform 760ms cubic-bezier(0.2, 0.74, 0.22, 1) 430ms,
    opacity 260ms ease 430ms;
}

.letterOpeningNote img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.letterEnvelopePocket{
  position: absolute;
  z-index: 4;
  inset: 0;
  background-image: url("/home-chat-envelope.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 106% auto;
  filter: drop-shadow(0 -1px 1px rgba(61, 91, 99, 0.08));
  pointer-events: none;
}

.letterEnvelopePocketLeft{
  clip-path: polygon(2% 1%, 50% 48%, 2% 98%);
}

.letterEnvelopePocketRight{
  clip-path: polygon(98% 1%, 98% 98%, 50% 48%);
}

.letterEnvelopePocketBottom{
  clip-path: polygon(2% 98%, 50% 48%, 98% 98%);
}

.homeChatLetterCard.isOpening .letterEnvelopePhoto{
  transform: translateY(-2px) scale(1.005);
  filter: drop-shadow(0 9px 9px rgba(74, 65, 60, 0.09));
}

.homeChatLetterCard.isOpening .letterEnvelopeAnimatedFlap{
  transform: rotateX(-158deg);
}

.homeChatLetterCard.isOpening .letterOpeningNote{
  opacity: 1;
  transform: translate(-50%, -70%) scale(1);
}

.homeChatLetterCopy > small{
  color: rgba(110, 94, 84, 0.57);
}

.homeChatLetterCopy > strong{
  color: var(--text-primary);
  font-size: clamp(13px, 3.7vw, 15px);
  line-height: 1.38;
}

.homeChatLetterCopyClosed,
.homeChatLetterCopyOpened{
  grid-column: 2;
  grid-row: 1;
}

.homeChatLetterCopyClosed{
  position: static;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  min-width: 0;
}

.homeChatLetterCopyClosed > small{
  color: rgba(110, 94, 84, 0.62);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.18em;
}

.homeChatLetterCopyOpened{
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  min-width: 0;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 360ms ease 230ms,
    transform 460ms cubic-bezier(0.2, 0.72, 0.24, 1) 230ms;
  pointer-events: none;
}

.homeChatLetterCopyOpened > small{
  color: rgba(110, 94, 84, 0.54);
  font-family: var(--font-body);
  font-size: 7px;
  font-weight: 650;
  letter-spacing: 0.2em;
}

.homeChatLetterCard.isOpening .homeChatLetterCopyOpened{
  opacity: 1;
  transform: translateY(0);
}

.letterEditorialLead{
  display: flex;
  align-items: flex-start;
  gap: 0;
  color: var(--text-primary);
}

.letterDropCap{
  margin: -4px 1px 0 -2px;
  color: #7892a0;
  font-family: var(--font-letter-drop);
  font-size: clamp(56px, 15vw, 68px);
  font-style: normal;
  font-weight: 500;
  line-height: 0.84;
  letter-spacing: -0.04em;
}

.letterPreviewLines{
  display: grid;
  gap: 0;
  padding-top: 21px;
  color: #2f2b27;
  font-family: var(--font-typewriter), "Special Elite", "Courier Prime", "Courier New", monospace;
  font-size: clamp(16px, 4.25vw, 18px);
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.letterEditorialLeadQuiet .letterDropCap{
  color: rgba(142, 126, 115, 0.72);
}

.letterEditorialLeadQuiet .letterDropCapPrevious{
  margin-top: -4px;
  color: rgba(142, 126, 115, 0.72);
  font-family: var(--font-display);
  font-size: clamp(48px, 12.6vw, 59px);
  font-style: italic;
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.045em;
}

.letterEditorialLeadQuiet .letterPreviewLines{
  padding-top: 15px;
}

.letterEditorialLead,
.letterPreviewLines{
  min-width: 0;
  max-width: 100%;
}

.homeChatLetterCopyOpened .unreadLetterPill{
  min-height: 22px;
  padding: 3px 9px;
  border-color: rgba(142, 126, 115, 0.18);
  background: rgba(250, 247, 239, 0.72);
  color: rgba(110, 94, 84, 0.7);
}

.homeChatLetterCopyClosed .unreadLetterPill{
  min-height: 24px;
  padding: 4px 10px;
  border-color: rgba(120, 146, 160, 0.22);
  background: rgba(250, 247, 239, 0.72);
  color: #7892a0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
}

.homeChatLetterCard .letterMetaRow{
  position: absolute;
  right: 20px;
  bottom: 9px;
  z-index: 4;
  margin: 0;
}

/* Let the checklist paper continue beneath the floating navigation. */
.todoDetailScreen{
  min-height: 100dvh;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  background: #f7f0e4;
}

.todoDetailScreen .todoDetailHeader{
  padding-inline: 12px;
}

.todoDetailScreen .checklistPaper{
  width: 100%;
  min-height: calc(100dvh - 20px - env(safe-area-inset-top));
  padding-bottom: calc(142px + env(safe-area-inset-bottom));
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  box-shadow: none;
}

.todoDetailScreen .checklistBlueRule{
  top: 0;
  right: 8px;
  bottom: 0;
  transform: none;
}

.todoDetailScreen .checklistItem strong{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.letterMetaRow{
  display: flex;
  align-items: center;
  gap: 8px;
}

.letterCoupleMark{
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .letterEnvelopePhoto,
.letterOpeningNote,
.letterEnvelopeAnimatedFlap{
    transition-duration: 1ms;
  }
}

/*
 * The home letter is assembled from real layers instead of cropped pieces of
 * one photograph. The note starts physically behind the front folds, and the
 * tape is a child of the flap so both pieces always open together.
 */
.homeEnvelope{
  position: relative;
  z-index: 1;
  display: block;
  width: 92%;
  margin-inline: auto;
  aspect-ratio: 1.42;
  overflow: visible;
  /* Allow the flap to rise, while trimming SVG antialias crumbs at the base. */
  clip-path: inset(-85% -18% 5px -18%);
  perspective: 760px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 7px 8px rgba(74, 65, 60, 0.11));
  transform: rotate(-0.35deg);
  transition:
    transform 560ms cubic-bezier(0.2, 0.72, 0.24, 1),
    filter 480ms ease;
}

.homeChatLetterCard.isOpening .homeEnvelope{
  transform: translate(-4px, 9px) rotate(2.2deg) scale(0.96);
  filter: drop-shadow(0 8px 9px rgba(74, 65, 60, 0.1));
}

.homeEnvelopeDefs{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.homeEnvelopeStack{
  position: absolute;
  z-index: 0;
  /* The pile may peek from the top/sides, never below the front envelope. */
  top: 4%;
  right: 2.5%;
  bottom: auto;
  left: 2.5%;
  height: 84%;
  display: block;
  border: 1px solid rgba(119, 105, 92, 0.16);
  border-radius: 5px 3px 6px 4px;
  background-image:
    linear-gradient(rgba(247, 239, 224, 0.62), rgba(230, 217, 198, 0.62)),
    url("/home-envelope-paper.jpg");
  background-position: center;
  background-size: cover;
  background-blend-mode: color, multiply;
  transform-origin: 50% 70%;
  pointer-events: none;
  transition: transform 650ms cubic-bezier(0.2, 0.72, 0.24, 1);
}

.homeEnvelopeStack::after{
  content: "";
  position: absolute;
  right: 11%;
  top: 18%;
  width: 22%;
  height: 18%;
  border: 1px solid rgba(116, 98, 84, 0.12);
  transform: rotate(1.5deg);
}

.homeEnvelopeStackBack{
  background-image:
    linear-gradient(rgba(222, 199, 187, 0.68), rgba(210, 189, 177, 0.68)),
    url("/home-envelope-paper.jpg");
  box-shadow: 0 5px 10px rgba(74, 65, 60, 0.1);
  transform: translate(7px, -14px) rotate(4.4deg) scale(0.965);
}

.homeEnvelopeStackMiddle{
  background-image:
    linear-gradient(rgba(237, 228, 210, 0.7), rgba(225, 215, 197, 0.7)),
    url("/home-envelope-paper.jpg");
  box-shadow: 0 4px 8px rgba(74, 65, 60, 0.09);
  transform: translate(-9px, -8px) rotate(-3.6deg) scale(0.98);
}

.homeEnvelopeStackFront{
  background-image:
    linear-gradient(rgba(205, 220, 218, 0.5), rgba(190, 208, 207, 0.5)),
    url("/home-envelope-paper.jpg");
  box-shadow: 0 3px 7px rgba(74, 65, 60, 0.08);
  transform: translate(6px, -4px) rotate(1.9deg) scale(0.99);
}

.homeEnvelope.isOpening .homeEnvelopeStackBack{
  transform: translate(-7px, -27px) rotate(-5deg) scale(0.96);
}

.homeEnvelope.isOpening .homeEnvelopeStackMiddle{
  transform: translate(8px, -20px) rotate(4deg) scale(0.98);
}

.homeEnvelope.isOpening .homeEnvelopeStackFront{
  transform: translate(-3px, -13px) rotate(-2.2deg) scale(0.995);
}

.homeEnvelopeBack,
.homeEnvelopeInterior,
.homeEnvelopeSide,
.homeEnvelopeBottom,
.homeEnvelopeFlap{
  position: absolute;
  inset: 2% 1.5%;
}

.homeEnvelopeBack{
  z-index: 1;
  overflow: hidden;
  border-radius: 5px 3px 6px 4px;
  background: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.homeEnvelopeBack svg,
.homeEnvelopeInterior svg,
.homeEnvelopeSide svg,
.homeEnvelopeBottom svg,
.homeEnvelopeFlap > svg{
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.homeEnvelopeBack path{
  fill: url("#homeEnvelopePaperTexture");
  stroke: rgba(74, 108, 116, 0.24);
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.homeEnvelopeInterior{
  z-index: 2;
  background: none;
  box-shadow: inset 0 -9px 13px rgba(71, 103, 111, 0.08);
}

.homeEnvelopeInterior path{
  fill: url("#homeEnvelopePaperTexture");
  stroke: rgba(72, 104, 112, 0.13);
  stroke-width: 1.2;
  filter: brightness(0.88) saturate(0.9);
}

.homeEnvelopeLetter{
  position: absolute;
  z-index: 3;
  top: 45%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 62%;
  height: 82%;
  padding: 5px 6px 3px;
  overflow: hidden;
  border: 1px solid rgba(184, 178, 170, 0.24);
  border-radius: 4px 5px 3px 4px;
  background:
    radial-gradient(circle at 18% 20%, rgba(142, 126, 115, 0.035) 0 0.6px, transparent 0.8px) 0 0 / 8px 7px,
    #f8f2e8;
  box-shadow: 0 5px 11px rgba(74, 65, 60, 0.1);
  transform: translate(-50%, 0) rotate(-1.4deg) scale(0.98);
  transform-origin: 50% 100%;
  transition: transform 760ms cubic-bezier(0.2, 0.74, 0.22, 1) 410ms;
  will-change: transform;
}

.homeEnvelopeLetter img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 1px 1px rgba(74, 65, 60, 0.08));
  transform: scale(1.28);
  transition: opacity 380ms ease 720ms;
}

.homeEnvelopeMiniChat{
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  background-position: center;
  background-size: cover;
  opacity: 1;
}

.homeEnvelopeMiniChat-linen{
  background-image: url("/homeg-chat-background-stairs.webp");
}

.homeEnvelopeMiniChat-mist{
  background:
    radial-gradient(circle at 18% 24%, rgba(236, 231, 221, 0.85), transparent 34%),
    radial-gradient(circle at 86% 68%, rgba(205, 182, 176, 0.58), transparent 38%),
    linear-gradient(155deg, #aebcc0, #e1d1c8);
}

.homeEnvelopeMiniScrim{
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 16, 0.1);
}

.homeEnvelopeMiniBubble{
  position: absolute;
  display: block;
  height: 13%;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.homeEnvelopeMiniBubbleAssistant{
  top: 25%;
  left: 9%;
  width: 58%;
}

.homeEnvelopeMiniBubbleUser{
  top: 48%;
  right: 9%;
  width: 42%;
  background: rgba(225, 193, 182, 0.2);
}

.homeEnvelopeMiniBubbleAssistant.isShort{
  top: 70%;
  width: 38%;
}

.homeEnvelopeSide,
.homeEnvelopeBottom{
  z-index: 4;
  pointer-events: none;
}

.homeEnvelopeSideLeft{
  background: none;
  filter: drop-shadow(1px 0 0 rgba(83, 116, 124, 0.12));
}


.homeEnvelopeSideLeft path{
  fill: url("#homeEnvelopePaperTexture");
  stroke: rgba(75, 108, 116, 0.17);
  stroke-width: 1.25;
  stroke-linejoin: round;
}

.homeEnvelopeSideRight{
  background: none;
  filter: drop-shadow(-1px 0 0 rgba(83, 116, 124, 0.11));
}

.homeEnvelopeSideRight path{
  fill: url("#homeEnvelopePaperTexture");
  stroke: rgba(75, 108, 116, 0.16);
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: brightness(0.97);
}

.homeEnvelopeBottom{
  background: none;
  filter: drop-shadow(0 -1px 1px rgba(68, 100, 108, 0.07));
}

.homeEnvelopeBottom path{
  fill: url("#homeEnvelopePaperTexture");
  stroke: rgba(74, 107, 115, 0.17);
  stroke-width: 1.3;
  stroke-linejoin: round;
}

.homeEnvelopeFlap{
  z-index: 6;
  background: none;
  transform: rotateX(0deg);
  /* The visible paper starts around y=8 in the 210px SVG viewBox. */
  /* Hinging at that exact paper edge prevents a background-colored crack. */
  transform-origin: 50% 3.8%;
  transform-style: preserve-3d;
  transition:
    transform 680ms cubic-bezier(0.25, 0.67, 0.2, 1),
    z-index 0s linear 260ms;
  will-change: transform;
}

.homeEnvelopeFlap::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  transform: translateZ(-0.5px);
}

.homeEnvelopeFlap > svg{
  position: absolute;
  inset: 0;
  z-index: 1;
  filter: drop-shadow(-1.2px 2.4px 1.4px rgba(61, 91, 98, 0.22));
}

.homeEnvelopeFlap > svg path{
  fill: url("#homeEnvelopePaperTexture");
  stroke: rgba(72, 105, 113, 0.2);
  stroke-width: 1.55;
  stroke-linejoin: round;
}

.homeEnvelopeFlap > svg .homeEnvelopeFlapRoughLine{
  fill: none;
  stroke: rgba(74, 107, 114, 0.14);
  stroke-width: 0.9;
  stroke-dasharray: 87 1.5 39 0.8;
}

.homeEnvelopeTape{
  position: absolute;
  z-index: 2;
  top: 51%;
  left: 50%;
  display: block;
  width: 24%;
  height: 14%;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 28% 72%, rgba(154, 135, 105, 0.08)),
    #eee4cb;
  box-shadow:
    -1px 2px 4px rgba(83, 70, 55, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
  clip-path: polygon(2% 12%, 12% 5%, 25% 9%, 39% 2%, 52% 7%, 67% 0, 79% 6%, 98% 3%, 96% 89%, 83% 84%, 68% 94%, 54% 88%, 37% 100%, 21% 91%, 4% 96%, 0 55%);
  transform: translate(-50%, -50%) rotate(-1.7deg) translateZ(4px);
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  will-change: transform;
}

.homeEnvelope.isOpening .homeEnvelopeTape{
  opacity: 1;
}

.homeEnvelopeHinge{
  position: absolute;
  z-index: 7;
  top: 5.1%;
  left: 2.5%;
  display: block;
  width: 95%;
  height: 8px;
  border-radius: 46% 54% 40% 60%;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(83, 115, 122, 0.08)),
    url("/home-envelope-paper.jpg") center / cover;
  box-shadow:
    0 1px 1px rgba(66, 96, 103, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  transform: translateY(-2px) rotate(-0.15deg);
  pointer-events: none;
}

.homeEnvelopePocketSketch{
  position: absolute;
  z-index: 5;
  inset: 2% 1.5%;
  width: 97%;
  height: 96%;
  overflow: visible;
  fill: none;
  stroke: rgba(76, 111, 119, 0.14);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  filter: drop-shadow(0.5px 0.4px 0 rgba(255, 255, 255, 0.25));
}

.homeEnvelopePocketSketch .homeEnvelopeFoldDark{
  stroke: rgba(64, 96, 104, 0.3);
  stroke-width: 1.65;
  filter: drop-shadow(0.8px 1.1px 1px rgba(54, 80, 87, 0.12));
}

.homeEnvelopePocketSketch .homeEnvelopeFoldLight{
  stroke: rgba(255, 255, 255, 0.58);
  stroke-width: 1.45;
  filter: drop-shadow(-0.5px 0.6px 0 rgba(81, 112, 119, 0.08));
}

.homeEnvelopePocketSketch .homeEnvelopeTopEdge,
.homeEnvelopePocketSketch .homeEnvelopeOuterEdge{
  stroke-dasharray: 109 1.3 71 0.7;
}

.homeEnvelope.isOpening{
  filter: drop-shadow(0 10px 10px rgba(74, 65, 60, 0.12));
}

.homeEnvelope.isOpening .homeEnvelopeFlap{
  z-index: 2;
  transform: rotateX(-158deg);
}

.homeEnvelope.isOpening .homeEnvelopeLetter{
  transform: translate(-50%, -64%) rotate(-1.4deg) scale(0.98);
}

.homeEnvelope.isOpening .homeEnvelopeLetter img{
  opacity: 0;
}

.homeEnvelope.isOpening .homeEnvelopeMiniChat{
  opacity: 1;
  view-transition-name: homeg-private-letter;
}

.homeScreen.isChatMorphing .homeEnvelopeMiniChat{
  opacity: 0;
}

/* Mobile-safe chat morph. This is a real DOM layer animated only with a GPU
 * transform; it avoids WebKit's unstable full-page view-transition snapshots. */
.homegChatMorphSurface{
  position: fixed;
  z-index: 1000;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  background-color: #d9d6d0;
  background-position: center;
  background-size: cover;
  box-shadow: 0 8px 24px rgba(20, 18, 16, 0.12);
  contain: layout paint style;
  isolation: isolate;
  pointer-events: none;
  transform-origin: 0 0;
  transition:
    transform 760ms cubic-bezier(0.25, 0.55, 0.25, 1),
    border-radius 760ms cubic-bezier(0.25, 0.55, 0.25, 1);
  will-change: transform;
}

.homegChatMorphSurface.isExpanded{
  border-radius: 0;
}

.homegChatMorphSurface-linen{
  background-image: url("/homeg-chat-background-stairs.webp");
}

.homegChatMorphSurface-mist{
  background:
    radial-gradient(circle at 18% 24%, rgba(236, 231, 221, 0.85), transparent 34%),
    radial-gradient(circle at 86% 68%, rgba(205, 182, 176, 0.58), transparent 38%),
    linear-gradient(155deg, #aebcc0, #e1d1c8);
}

.homegChatMorphSurface-custom{
  background-position: center;
  background-size: cover;
}

.homegChatMorphScrim{
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgba(20, 18, 16, 0.1);
}

.homegChatMorphHeader{
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: calc(64px + env(safe-area-inset-top));
  padding: calc(8px + env(safe-area-inset-top)) 14px 6px;
}

.homegChatMorphBack{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.92);
  font-size: 27px;
  line-height: 1;
}

.homegChatMorphIdentity{
  justify-self: center;
  display: grid;
  place-items: center;
  min-width: 76px;
  min-height: 42px;
  padding: 4px 15px 3px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.94);
}

.homegChatMorphIdentity strong{
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 560;
}

.homegChatMorphIdentity small{
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: 8px;
}

.homegChatMorphMessages{
  position: absolute;
  z-index: 2;
  top: calc(82px + env(safe-area-inset-top));
  right: 14px;
  bottom: calc(112px + env(safe-area-inset-bottom));
  left: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  overflow: hidden;
}

.homegChatMorphMessage{
  display: flex;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  min-width: 0;
}

.homegChatMorphMessage img{
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.homegChatMorphMessage b{
  display: -webkit-box;
  width: fit-content;
  max-width: 72%;
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.96);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.homegChatMorphMessage.isUser{
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.homegChatMorphMessage.isUser b{
  background: rgba(225, 193, 182, 0.2);
}

.homegChatMorphMessage.isPlaceholder{
  width: 58%;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.homegChatMorphMessage.isPlaceholder::before{
  display: none;
}

.homegChatMorphMessage.isPlaceholder.isWide{
  width: 72%;
  height: 84px;
}

.homegChatMorphMessage.isPlaceholder.isUser{
  align-self: flex-end;
  width: 42%;
  height: 42px;
  background: rgba(225, 193, 182, 0.2);
}

.homegChatMorphRealMessages{
  position: absolute;
  z-index: 2;
  top: calc(82px + env(safe-area-inset-top));
  right: 14px;
  bottom: calc(112px + env(safe-area-inset-bottom));
  left: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 9px;
  overflow: hidden;
  opacity: 0;
}

.homegChatMorphRealLine{
  display: flex;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  min-width: 0;
}

.homegChatMorphRealLine.isUser{
  flex-direction: row-reverse;
}

.homegChatMorphRealAvatar{
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}

.homegChatMorphRealAvatar img{
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

.homegChatMorphRealLine b{
  display: -webkit-box;
  width: fit-content;
  max-width: 72%;
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.96);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.homegChatMorphRealLine.isUser b{
  background: rgba(225, 193, 182, 0.2);
}

.homegChatMorphSurface.isExpanded .homegChatMorphRealMessages{
  animation: homegMorphRealMessagesReveal 760ms ease both;
}

.homegChatMorphSurface.isExpanded .homegChatMorphHeader,
.homegChatMorphSurface.isExpanded .homegChatMorphMessages,
.homegChatMorphSurface.isExpanded .homegChatMorphAffection,
.homegChatMorphSurface.isExpanded .homegChatMorphComposer{
  animation: homegMorphChromeFade 760ms ease both;
}

@keyframes homegMorphChromeFade {
  0%,
8%{
    opacity: 1;
  }
  32%,
100%{
    opacity: 0;
  }
}

@keyframes homegMorphRealMessagesReveal {
  0%,
56%{
    opacity: 0;
  }
  78%,
100%{
    opacity: 1;
  }
}

.homegChatMorphAffection{
  position: absolute;
  z-index: 3;
  bottom: calc(68px + env(safe-area-inset-bottom));
  left: 14px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 999px;
  background: rgba(225, 193, 182, 0.3);
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-body);
  font-size: 11px;
}

.homegChatMorphComposer{
  position: absolute;
  z-index: 3;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 12px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 38px;
  align-items: center;
  min-height: 50px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
}

.homegChatMorphComposer span,
.homegChatMorphComposer i{
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  font-style: normal;
}

.homegChatMorphComposer b{
  padding-left: 9px;
  font-size: 13px;
  font-weight: 450;
}

.homeEnvelope.isOpening .homeEnvelopeHinge{
  z-index: 2;
}

.appShell-chat{
  view-transition-name: homeg-private-letter;
}

.chatScreen{
  view-transition-name: none;
}

/* Keep the wallpaper on the transition target itself. The live page still
 * uses its backdrop layer, while this surface prevents the browser snapshot
 * from becoming a blank paper card during the envelope morph. */
.chatScreen.chatBackground-linen{
  background-color: #d9d6d0;
  background-image: url("/homeg-chat-background-stairs.webp");
  background-position: center;
  background-size: cover;
}

.chatScreen.chatBackground-mist{
  background:
    radial-gradient(circle at 18% 24%, rgba(236, 231, 221, 0.85), transparent 34%),
    radial-gradient(circle at 86% 68%, rgba(205, 182, 176, 0.58), transparent 38%),
    linear-gradient(155deg, #aebcc0, #e1d1c8);
}

.chatScreen.chatBackground-custom{
  background-position: center;
  background-size: cover;
}

::view-transition-group(homeg-private-letter){
  z-index: 1000;
  animation-duration: 980ms;
  animation-timing-function: cubic-bezier(0.22, 0.78, 0.22, 1);
}

::view-transition-image-pair(homeg-private-letter){
  isolation: isolate;
  overflow: clip;
  border-radius: 18px;
}

::view-transition-old(homeg-private-letter),
::view-transition-new(homeg-private-letter){
  mix-blend-mode: normal;
  animation: none;
}

::view-transition-old(homeg-private-letter){
  opacity: 0;
}

::view-transition-new(homeg-private-letter){
  opacity: 1;
}

.homegLetterMorphing::view-transition-old(root){
  z-index: 1;
  mix-blend-mode: normal;
  animation: none;
  opacity: 1;
}

.homegLetterMorphing::view-transition-new(root){
  z-index: 0;
  mix-blend-mode: normal;
  animation: none;
  opacity: 0;
}

.appHeader{
  transition:
    opacity 340ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.homegLetterMorphing .appHeader{
  opacity: 1 !important;
  transform: none;
  pointer-events: none;
}

.chatRefractionLayer{
  transition: opacity 420ms ease;
}

.homegLetterMorphing .chatRefractionLayer{
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .homeEnvelopeFlap,
.homeEnvelopeLetter{
    transition-duration: 1ms;
    transition-delay: 0ms;
  }

  ::view-transition-group(homeg-private-letter),
::view-transition-old(homeg-private-letter),
::view-transition-new(homeg-private-letter),
.homegLetterMorphing::view-transition-old(root),
.homegLetterMorphing::view-transition-new(root){
    animation-duration: 1ms;
  }
}

/* Final navigation polish: quieter glass and a softer selected glow. */
.bottomNavigation{
  border-color: rgba(255, 255, 255, 0.54);
  background: rgba(250, 248, 245, 0.76);
  box-shadow: 0 5px 18px rgba(43, 42, 40, 0.058);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

.bottomNavigation button{
  color: rgba(142, 126, 115, 0.72);
}

.bottomNavigation button.isCurrent{
  color: rgba(111, 96, 76, 0.82);
}

.bottomNavigation button::before{
  background: linear-gradient(
    180deg,
    rgba(255, 222, 136, 0.36) 0%,
    rgba(251, 217, 134, 0.16) 38%,
    rgba(248, 214, 137, 0.045) 72%,
    transparent 100%
  );
}

/* MCP permission center: compact, nested accordion policy editor. */
.srOnly{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mcpPanelSummary{
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 500;
}

.mcpCenterBody{
  font-family: var(--font-body);
}

.mcpIntro,
.mcpServerHeading,
.mcpFooter{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mcpIntro h3,
.mcpIntro p,
.mcpFooter p{
  margin: 0;
}

.mcpIntro h3{
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 650;
}

.mcpIntro p,
.mcpFooter p{
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.55;
}

.mcpTrialBadge,
.mcpCategory{
  flex: 0 0 auto;
  color: var(--warm-taupe);
  font-size: 9px;
  font-weight: 620;
  letter-spacing: 0.08em;
}

.mcpTrialBadge{
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(225, 193, 182, 0.22);
}

.mcpSearch input{
  width: 100%;
  min-height: 38px;
  padding: 8px 11px;
  font-size: 12px;
}

.mcpServerList{
  display: grid;
  gap: 10px;
}

.mcpServerCard{
  border-radius: 16px;
  background: rgba(250, 247, 241, 0.72);
  box-shadow: inset 0 0 0 1px rgba(81, 78, 70, 0.07);
  overflow: hidden;
  transition: opacity 160ms ease;
}

.mcpServerCard.isDisabled{
  opacity: 0.58;
}

.mcpServerSummary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 72px;
  padding: 12px 13px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mcpServerSummary::-webkit-details-marker{
  display: none;
}

.mcpServerSummary::after{
  content: "⌄";
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 15px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 150ms ease;
}

.mcpServerCard[open] > .mcpServerSummary::after{
  transform: rotate(180deg) translateY(1px);
}

.mcpServerSummary h4{
  margin: 2px 0 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 680;
}

.mcpServerSummary p{
  margin: 3px 0 0;
  color: var(--text-secondary);
  font-size: 10px;
}

.mcpServerMeta{
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--text-faint);
  font-size: 8px;
  white-space: nowrap;
}

.mcpServerContent{
  padding: 12px 13px 13px;
  border-top: 1px solid rgba(81, 78, 70, 0.07);
}

.mcpServerHeading{
  align-items: flex-start;
}

.mcpServerHeading strong,
.mcpServerHeading small{
  display: block;
}

.mcpServerHeading strong{
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 630;
}

.mcpServerHeading small{
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.45;
}

.mcpSwitch{
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 3px;
  cursor: pointer;
}

.mcpSwitch input,
.mcpProviderRow input{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mcpSwitch span{
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: rgba(184, 178, 170, 0.4);
  box-shadow: inset 0 0 0 1px rgba(81, 78, 70, 0.06);
  transition: background 150ms ease;
}

.mcpSwitch span::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(251, 248, 242, 0.96);
  box-shadow: 0 1px 4px rgba(43, 42, 40, 0.14);
  transition: transform 150ms ease;
}

.mcpSwitch input:checked + span{
  background: rgba(126, 139, 122, 0.68);
}

.mcpSwitch input:checked + span::after{
  transform: translateX(14px);
}

.mcpSwitch input:focus-visible + span{
  outline: 2px solid rgba(142, 126, 115, 0.4);
  outline-offset: 2px;
}

.mcpSwitch b{
  color: var(--text-faint);
  font-size: 8px;
  font-weight: 540;
}

.mcpProviderRow{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 11px;
}

.mcpProviderRow label{
  cursor: pointer;
}

.mcpProviderRow span{
  display: block;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(235, 230, 220, 0.66);
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1;
}

.mcpProviderRow input:checked + span{
  background: rgba(225, 193, 182, 0.3);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px rgba(163, 143, 134, 0.16);
}

.mcpProviderRow input:focus-visible + span{
  outline: 2px solid rgba(142, 126, 115, 0.36);
  outline-offset: 2px;
}

.mcpToolList{
  border-top: 1px solid rgba(81, 78, 70, 0.08);
}

.mcpToolRow{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(81, 78, 70, 0.065);
}

.mcpToolRow:last-child{
  border-bottom: 0;
}

.mcpToolCopy{
  min-width: 0;
}

.mcpToolCopy strong,
.mcpToolCopy small{
  display: block;
}

.mcpToolCopy strong{
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 630;
}

.mcpToolCopy small{
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.45;
}

.mcpToolControl{
  display: flex;
  align-items: center;
  gap: 5px;
}

.settingsScreen .mcpToolControl select{
  width: 86px;
  min-height: 32px;
  padding: 6px 23px 6px 8px;
  font-size: 10px;
}

.mcpFooter{
  align-items: flex-end;
  padding-top: 2px;
}

.mcpFooter p{
  max-width: 230px;
}

.mcpFooter button{
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 12px;
  border: 0;
  background: rgba(163, 143, 134, 0.22);
  color: var(--text-primary);
}

.externalMcpSection{
  display: grid;
  gap: 12px;
  padding: 13px;
  border-radius: 18px;
  background: rgba(237, 229, 219, 0.42);
  box-shadow: inset 0 0 0 1px rgba(81, 78, 70, 0.07);
}

.externalMcpHeading{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.externalMcpHeading h3,
.externalMcpHeading p{
  margin: 0;
}

.externalMcpHeading h3{
  margin-top: 3px;
  color: var(--text-primary);
  font-size: 13px;
}

.externalMcpHeading p{
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 9px;
  line-height: 1.55;
}

.externalMcpAdd{
  display: grid;
  gap: 8px;
}

.externalMcpAdd label,
.externalMcpAdd label > span{
  display: grid;
  gap: 4px;
}

.externalMcpAdd label > span{
  color: var(--text-secondary);
  font-size: 9px;
}

.externalMcpAdd input{
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  font-size: 11px;
}

.externalMcpAdd button,
.externalMcpActions button{
  min-height: 34px;
  border: 0;
  border-radius: 12px;
  background: rgba(163, 143, 134, 0.2);
  color: var(--text-primary);
  font-size: 10px;
}

.externalMcpList{
  display: grid;
  gap: 8px;
}

.externalMcpActions{
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 10px;
}

.externalMcpActions button{
  padding: 7px 10px;
}

.externalMcpActions .dangerButton{
  background: rgba(169, 102, 92, 0.12);
  color: rgba(116, 65, 59, 0.9);
}

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

  .mcpToolControl{
    justify-content: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mcpServerSummary::after,
.mcpSwitch span,
.mcpSwitch span::after{
    animation: none;
    transition: none;
  }
}

/* iPhone full-bleed viewport -------------------------------------------------
 * The page paints beneath the Dynamic Island/home indicator while controls
 * continue to use their safe-area padding. Pinch-to-zoom is disabled by the
 * root viewport because HomeG behaves as an installed, single-purpose app. */
html,
body{
  height: var(--homeg-viewport-height, 100dvh);
  min-height: var(--homeg-viewport-height, 100dvh);
  overflow: hidden;
}

.mobileViewport{
  height: var(--homeg-viewport-height, 100dvh);
  min-height: var(--homeg-viewport-height, 100dvh);
}

.appShell{
  min-height: 0;
}

.appShell-chat,
.appContent-chat,
.appContent-chat .chatScreen{
  background-color: transparent;
}

/* iPhone bottom corners: preserve the original layout instead of adding the
 * safe-area inset a second time. The wallpaper still paints full bleed. */
.bottomNavigation{
  bottom: 10px;
}

.appContent-chat .composer{
  margin-bottom: 18px;
}

.appContent-chat .chatAffectionBar{
  bottom: 71px;
}

.homeScreen,
.memoryScreen,
.settingsScreen,
.todoDetailScreen{
  padding-bottom: 108px;
}

.memoryLibraryScreen{
  padding-bottom: 116px;
}

.todoDetailScreen .checklistPaper{
  padding-bottom: 142px;
}

.homegChatMorphMessages,
.homegChatMorphRealMessages{
  bottom: 112px;
}

.homegChatMorphAffection{
  bottom: 68px;
}

.homegChatMorphComposer{
  bottom: 10px;
}

/* Date-led checklist: one safe-area header, real month calendar, continuous blue rule. */
.todoDetailScreen{
  position:relative; overflow-x:hidden; padding:0 0 108px;
  background:#f7f0e4; scroll-padding-top:calc(env(safe-area-inset-top) + 48px);
}
.todoDetailScreen::after{ display:none; }
.todoDetailScreen .checklistBlueRule{
  display:block; position:fixed; z-index:24; top:0; right:8px; bottom:0;
  width:7px; background:#5576c9; pointer-events:none; transform:none;
}
.todoDateNavigator{
  position:sticky; z-index:40; top:0; display:grid;
  grid-template-columns:minmax(0,1fr) 26px; gap:4px; align-items:end;
  min-height:calc(46px + env(safe-area-inset-top));
  margin:0; padding:calc(2px + env(safe-area-inset-top)) 17px 4px 8px;
  border-bottom:1px solid rgba(85,118,201,.1); background:#f7f0e4;
  box-shadow:0 5px 13px rgba(71,85,126,.035);
}
.todoDateWeek{
  display:flex; min-width:0; gap:3px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-padding-inline:calc(50% - 21px);
  scrollbar-width:none; overscroll-behavior-inline:contain;
  touch-action:pan-x; -webkit-overflow-scrolling:touch;
}
.todoDateWeek::-webkit-scrollbar{ display:none; }
.todoDateWeek button,.todoCalendarToggle,.todoMonthPicker button{
  min-width:0; min-height:0; padding:0; border:0; background:transparent;
  color:rgba(69,104,189,.66); box-shadow:none;
}
.todoDateWeek button{
  display:grid; flex:0 0 calc((100% - 18px)/7); place-items:center; gap:1px;
  height:39px; border-radius:12px; scroll-snap-align:center;
}
.todoDateWeek button span{ font:600 7px/1 var(--font-sans); text-transform:uppercase; }
.todoDateWeek button b{ font:500 13px/1 var(--font-sans); }
.todoDateWeek button.isSelected{ background:#5576c9; color:#f7f0e4; }
.todoCalendarToggle{
  display:grid; place-items:center; align-self:center; width:24px; height:24px;
  border-radius:8px; background:rgba(85,118,201,.07); transition:background 160ms ease;
}
.todoCalendarToggle.isOpen{ background:rgba(85,118,201,.14); }
.todoCalendarToggle svg{
  width:15px; height:15px; fill:none; stroke:currentColor;
  stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round;
}
.todoMonthPicker{
  position:absolute; z-index:2; top:calc(100% + 5px); right:16px; left:8px;
  padding:10px 11px 12px; border:1px solid rgba(85,118,201,.14);
  border-radius:17px; background:#f7f0e4; box-shadow:0 17px 38px rgba(54,68,105,.15);
}
.todoMonthPicker>header{
  display:grid; grid-template-columns:30px 1fr 30px; align-items:center; margin-bottom:8px;
}
.todoMonthPicker>header strong{
  color:#4568bd; font:600 12px/1 var(--font-sans); text-align:center;
}
.todoMonthPicker>header button{
  display:grid; place-items:center; width:28px; height:28px; border-radius:9px;
  background:rgba(85,118,201,.06); font:400 22px/1 var(--font-sans);
}
.todoMonthWeekdays,.todoMonthGrid{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px;
}
.todoMonthWeekdays{ margin-bottom:3px; }
.todoMonthWeekdays span{
  display:grid; place-items:center; height:18px; color:rgba(69,104,189,.45);
  font:600 7px/1 var(--font-sans);
}
.todoMonthGrid button,.todoMonthGrid>span{
  display:grid; place-items:center; aspect-ratio:1; border-radius:10px;
}
.todoMonthGrid button{ color:rgba(69,104,189,.72); font:500 11px/1 var(--font-sans); }
.todoMonthGrid button.isToday{ outline:1px solid rgba(85,118,201,.36); outline-offset:-2px; }
.todoMonthGrid button.isSelected{ background:#5576c9; color:#f7f0e4; outline:0; }
.todoDetailScreen .checklistPaper{
  min-height:calc(100dvh - 46px - env(safe-area-inset-top));
  margin:0 10px; padding-top:10px; padding-right:31px;
  padding-bottom:calc(122px + env(safe-area-inset-bottom));
}
.todoPullCue{
  height:calc(var(--todo-pull-progress,0) * 10px); overflow:hidden;
  margin-bottom:calc(var(--todo-pull-progress,0) * 4px);
  color:rgba(69,104,189,calc(.3 + var(--todo-pull-progress,0) * .45));
  font:500 9px/1 var(--font-sans); letter-spacing:.04em; text-align:center;
  transform:translateY(calc((1 - var(--todo-pull-progress,0)) * -8px));
  transition:height 180ms ease,margin 180ms ease,opacity 120ms ease;
}
.todoPullCue.isOpen{ height:10px; margin-bottom:4px; opacity:.62; transform:none; }
.todoDetailScreen .checklistDate{ margin-top:0; }
.todoDetailScreen .checklistPaper>h1{ margin-top:3px; font-size:clamp(29px,8.5vw,38px); line-height:.91; }
.todoDetailScreen .checklistIntro{ margin:7px 0 8px; }
.todoDetailScreen .checklistComposer{
  display:grid; max-height:calc(var(--todo-pull-progress,0) * 420px); overflow:clip;
  margin:0; opacity:var(--todo-pull-progress,0); pointer-events:none;
  transform:translateY(calc((1 - var(--todo-pull-progress,0)) * -8px));
  transition:max-height 220ms cubic-bezier(.22,.8,.24,1),margin 220ms cubic-bezier(.22,.8,.24,1),opacity 160ms ease,transform 220ms cubic-bezier(.22,.8,.24,1);
}
.todoDetailScreen .checklistComposer.isPulling{ transition:none; }
.todoDetailScreen .checklistComposer.isOpen{
  max-height:720px; overflow:visible; margin:0 0 14px; opacity:1; pointer-events:auto; transform:none;
}
.todoReminderDraft select{
  width:100%; min-height:34px; border:1px solid rgba(85,118,201,.23);
  border-radius:8px; background:rgba(255,255,255,.18); color:#4568bd;
  font:500 11px/1.2 var(--font-body);
}
.checklistDateSection{ margin-top:4px; }
.checklistDateSection>h2,.checklistDateSection>h3{
  margin:0 0 7px; color:rgba(69,104,189,.48);
  font:600 9px/1.2 var(--font-sans); letter-spacing:.08em; text-transform:uppercase;
}
.checklistDateSection.isClaudeSection{
  margin-top:25px; padding-top:15px; border-top:1px dashed rgba(85,118,201,.17);
}
.checklistItem small{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.checklistItem small span+span::before{ content:"·"; margin-right:4px; opacity:.55; }
.todoAlarmIcon{
  display:block; flex:0 0 auto; width:13px; height:13px; fill:none;
  stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round;
}

/* iOS date/time controls keep an intrinsic width even inside minmax(0, 1fr).
 * Give each wrapper exactly half of the row and remove the native input from
 * grid sizing so neither field can push its sibling beyond the viewport. */
.todoReminderDraft > div,
.autoTimeGrid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  inline-size:100%; max-inline-size:100%; gap:8px;
}
.todoReminderDraft > div > label,
.autoTimeGrid > label{
  inline-size:100%; min-inline-size:0; max-inline-size:100%; overflow:hidden;
}
.todoReminderDraft > div > label:nth-child(3){ grid-column:1 / -1; }
.todoReminderDraft .compactDateTimeField,
.autoTimeGrid .compactDateTimeField{
  position:relative; display:block; inline-size:100%; min-inline-size:0;
  max-inline-size:100%; box-sizing:border-box; overflow:hidden;
}
.todoReminderDraft .compactDateTimeField input[type="date"],
.todoReminderDraft .compactDateTimeField input[type="time"],
.autoTimeGrid .compactDateTimeField input[type="time"]{
  position:absolute; inset:0; inline-size:100% !important; min-inline-size:0 !important;
  max-inline-size:100% !important; block-size:100%; box-sizing:border-box;
}
.todoReminderDraft .compactDateTimeButton{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start;
  inline-size:100% !important; min-inline-size:0; max-inline-size:100%; block-size:100%;
  min-block-size:0; padding:0 29px 0 8px; border:0; border-radius:inherit;
  background:transparent; color:#4568bd; box-shadow:none;
  font:500 10px/1 var(--font-body); white-space:nowrap;
}
.todoReminderDraft .compactDateTimeField input[type="time"]{
  padding-block:0 !important; line-height:32px !important;
}
.todoReminderDraft .compactDateTimeField input[type="time"]::-webkit-date-and-time-value{
  display:flex; align-items:center; block-size:100%; padding:0;
}

/* Native textarea growth avoids a forced scrollHeight layout on every key.
 * Browsers without field-sizing keep the one-line fallback and scroll within
 * the existing max height. */
.appContent-chat .composer textarea{
  height: auto;
  field-sizing: content;
}

/* The chat composer intentionally uses a plain-text contenteditable surface.
 * On iOS, a native textarea adds the previous/next/done form accessory bar;
 * contenteditable keeps the normal keyboard without that extra strip. */
.appContent-chat .composer .composerEditor{
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 38px;
  max-height: 124px;
  padding: 8px 9px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  outline: 0;
  border-radius: 20px;
  background: transparent;
  box-shadow: none;
  color: rgba(255, 255, 255, 0.96);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
  caret-color: rgba(255, 255, 255, 0.96);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: normal;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.appContent-chat .composer .composerEditor::-webkit-scrollbar{
  display: none;
}

.appContent-chat .composer .composerEditor:empty::before{
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.7);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.chatToolActivity{
  align-self: flex-start;
  display: block;
  margin: -2px 40px 0;
  border-radius: 999px;
  background: rgba(38, 35, 31, 0.18);
  color: rgba(255, 255, 255, 0.82);
  font: 9px/1.35 var(--font-body);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.usedToolsGroup{
  align-self: flex-start;
  display: block;
  width: min(76vw, 340px);
  max-width: calc(100% - 80px);
  margin: -1px 40px 1px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font: 500 9px/1.35 var(--font-body);
}

.usedToolsGroup > summary{
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  padding: 1px 2px;
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
  width: fit-content;
  max-width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.usedToolsGroup > summary::-webkit-details-marker{
  display: none;
}

.usedToolsGroup > summary > i{
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.75;
}

.usedToolsGroup > summary > small{
  opacity: 0.62;
  font: inherit;
}

.usedToolsGroup > summary::after{
  content: "›";
  margin-left: 1px;
  font-size: 11px;
  transition: transform 160ms ease;
}

.usedToolsGroup[open] > summary::after{
  transform: rotate(90deg);
}

.usedToolsBody{
  display: grid;
  gap: 0;
  width: 100%;
  margin-top: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 13px;
  background: rgba(35, 32, 29, 0.2);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}

.usedToolItem{
  min-width: 0;
  padding: 0;
}

.usedToolItem + .usedToolItem{
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.usedToolLine{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 27px;
  padding: 6px 8px;
  list-style: none;
}

.usedToolItem > summary.usedToolLine{
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.usedToolItem > summary.usedToolLine::-webkit-details-marker{
  display: none;
}

.usedToolItem > summary.usedToolLine::after{
  content: "›";
  flex: 0 0 auto;
  margin-left: 1px;
  opacity: 0.58;
  font-size: 11px;
  transition: transform 160ms ease;
}

.usedToolItem[open] > summary.usedToolLine::after{
  transform: rotate(90deg);
}

.usedToolLine > span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usedToolLine > time{
  flex: 0 0 auto;
  margin-left: auto;
  opacity: 0.56;
}

.usedToolDetail{
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0 8px 7px;
}

.usedToolDetail pre{
  max-height: 150px;
  margin: 0;
  overflow: auto;
  color: rgba(255, 255, 255, 0.75);
  font: 8.5px/1.45 ui-monospace, "SFMono-Regular", Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.messageThinkingLine{
  align-items: flex-start;
  min-height: 0;
}

.messageThinkingLine > .chatAvatar.isHidden{
  height: 18px;
}

.chatThinkingProgress.isSaved:not([open]) > summary{
  min-height: 18px;
  padding: 0 2px;
}

.chatThinkingProgress{
  display: block;
  width: fit-content;
  max-width: calc(100% - 38px);
  overflow: visible;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chatThinkingProgress[open]{
  width: min(72vw, 360px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(36, 34, 31, 0.24);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.065);
  backdrop-filter: blur(12px) saturate(1.06);
  -webkit-backdrop-filter: blur(12px) saturate(1.06);
}

.chatThinkingProgress.isLive{
  align-self: flex-start;
  margin: -2px 40px 0;
}

.chatThinkingProgress > summary,
.chatThinkingProgress > .chatThinkingProgressSummary{
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 27px;
  padding: 4px 2px;
  list-style: none;
  color: rgba(255, 255, 255, 0.88);
  font: 500 10px/1.35 var(--font-body);
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
}

.chatThinkingProgress > summary{
  cursor: pointer;
}

.chatThinkingProgress > summary::-webkit-details-marker{
  display: none;
}

.chatThinkingProgress > summary::after{
  content: "›";
  margin-left: 2px;
  font-size: 13px;
  opacity: 0.8;
  transition: transform 160ms ease;
}

.chatThinkingProgress[open] > summary::after{
  margin-left: auto;
  transform: rotate(90deg);
}

.chatThinkingProgress[open] > summary{
  padding: 5px 9px;
}

.chatThinkingProgress > summary > i,
.chatThinkingProgress > .chatThinkingProgressSummary > i{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.78;
}

.chatThinkingProgressBody{
  max-height: min(42vh, 300px);
  padding: 2px 10px 10px;
  overflow: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.82);
  font: 400 11px/1.58 var(--font-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chatThinkingProgress.status-failed{
  color: rgba(255, 230, 224, 0.9);
}

.chatToolActivity > summary,
.chatToolActivity > .chatToolActivitySummary{
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  padding: 2px 8px;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.chatToolActivity > summary{
  cursor: pointer;
}

.chatToolActivity > summary::-webkit-details-marker{
  display: none;
}

.chatToolActivity > summary::after{
  content: "›";
  margin-left: 1px;
  font-size: 11px;
  transition: transform 160ms ease;
}

.chatToolActivity[open] > summary::after{
  transform: rotate(90deg);
}

.chatToolActivity > summary > i,
.chatToolActivity > .chatToolActivitySummary > i{
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.76;
}

.chatToolActivityBody{
  display: grid;
  gap: 7px;
  width: min(72vw, 320px);
  padding: 7px 9px 9px;
}

.chatToolActivityBody pre{
  max-height: 160px;
  margin: 0;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.82);
  font: 9px/1.5 ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.chatToolApprovalActions{
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.chatToolApprovalActions button{
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.88);
  font: 500 9px/1 var(--font-body);
}

.chatToolApprovalActions button.primary{
  background: rgba(255, 255, 255, 0.25);
}

.chatToolActivity.status-failed{
  color: rgba(255, 235, 229, 0.86);
}

.mcpApprovalOverlay{
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(17, 15, 14, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mcpApprovalDialog{
  width: min(88vw, 390px);
  padding: 21px 18px 17px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 23px;
  background: rgba(47, 43, 39, 0.72);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(22px) saturate(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(1.12);
}

.mcpApprovalDialog > span{
  display: block;
  color: rgba(255, 255, 255, 0.62);
  font: 600 8px/1.2 var(--font-body);
  letter-spacing: 0.16em;
}

.mcpApprovalDialog h2{
  margin: 9px 0 18px;
  color: inherit;
  font: 600 18px/1.35 var(--font-body);
  overflow-wrap: anywhere;
}

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

.mcpApprovalDialogActions button{
  min-height: 38px;
  padding: 7px 6px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.9);
  font: 550 10px/1.15 var(--font-body);
}

.mcpApprovalDialogActions button.primary{
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.4);
}

.mcpApprovalDialogActions button:focus-visible{
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 2px;
}

.chatToolActivityDots{
  min-width: 11px;
  letter-spacing: 1px;
  animation: chatToolActivityPulse 1.1s ease-in-out infinite;
}

@keyframes chatToolActivityPulse {
  0%,
100%{ opacity: 0.35; }
  50%{ opacity: 0.95; }
}

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

/* Claude Code keeps its own avatar identity. The default is the official
   Clawd frame from Anthropic's announcement; custom replacements stay local. */
.chatAvatarButton{
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.chatAvatarButton:disabled{
  opacity: 1;
  cursor: wait;
}

.chatAvatar,
.chatAvatar img{
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}

.chatAvatar img.isClawdAvatar{
  object-fit: cover;
  transform: scale(2.45);
  transform-origin: center;
  image-rendering: pixelated;
}


.messageActionOverlay{
  position: absolute;
  z-index: 80;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom));
  background: rgba(42, 36, 32, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: messageActionFadeIn 160ms ease-out both;
}

.messageActionSheet{
  width: min(100%, 390px);
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 24px;
  background: rgba(249, 246, 241, 0.9);
  box-shadow: 0 14px 40px rgba(43, 42, 40, 0.15);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
  animation: messageActionRise 200ms cubic-bezier(0.2, 0.72, 0.28, 1) both;
}

.messageActionPrimary,
.messageActionCancel{
  min-height: 46px;
  border: 0;
  border-radius: 17px;
  font-family: var(--font-body);
  font-size: 14px;
}

.messageActionPrimary{
  width: 100%;
  background: rgba(163, 143, 134, 0.2);
  color: var(--text-primary);
  font-weight: 600;
}

.messageActionCancel{
  width: 100%;
  margin-top: 4px;
  background: transparent;
  color: var(--text-secondary);
}

.messageActionPrimary:disabled,
.messageActionCancel:disabled{
  opacity: 0.5;
}

@keyframes messageActionFadeIn {
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes messageActionRise {
  from{ opacity: 0; transform: translateY(12px) scale(0.985); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .messageActionOverlay,
.messageActionSheet{
    animation: none;
  }
}

.bottomNavigation button::after{
  background: radial-gradient(
    ellipse,
    rgba(247, 205, 111, 0.17) 0%,
    rgba(249, 218, 148, 0.07) 48%,
    transparent 78%
  );
}

/* CHAT MESSAGE BUBBLES — CANONICAL ---------------------------------------
 * This is the only message-bubble visual definition. Keep layout, glass,
 * typography, state variants, and fallback together instead of adding later
 * cascade overrides. The WebGL canvas supplies refraction behind this layer.
 */
.chatLog {
  gap: 12px;
  padding-bottom: 0;
  scroll-padding-bottom: 2px;
}

/* Consecutive user messages share the same 5px rhythm as split assistant bubbles. */
.chatLog > .messageRow.user.isGroupedUserMessage{
  margin-top: -7px;
}

.chatBottom{
  display: none;
}

.chatAvatarButton.isMissMeBusy{
  animation: missMeAvatarPulse 900ms ease-in-out infinite;
  will-change: transform;
}

.appContent-chat .composer{
  margin-top: 6px;
}

html[data-homeg-keyboard-open="true"] .appContent-chat .composer{
  margin-bottom: 2px;
}

/* CLAWD PET --------------------------------------------------------------
 * The anatomy and action artwork below come directly from the MIT-licensed
 * clawd-emotes-skill. CasaShell only supplies movement, dragging and state. */
.clawdPetStage{
  position: absolute;
  z-index: 34;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease;
  contain: layout paint;
}

.clawdPetStage.isActive{
  opacity: 1;
  visibility: visible;
}

.clawdPet{
  position: absolute;
  top: 0;
  left: 0;
  width: 94px;
  height: 94px;
  padding: 0;
  border: 0;
  outline: 0;
  color: #de886d;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
  transition-property: transform;
  transition-timing-function: linear;
}

.clawdPet:active{
  cursor: grabbing;
}

.clawdPet.isDocked{
  cursor: pointer;
  transition-timing-function: cubic-bezier(0.2, 0.82, 0.24, 1);
}

.clawdPet:focus-visible{
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}

.clawdPetFacing{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: center;
  transition: transform 130ms ease;
}

.clawdPetFacing[data-facing="left"]{
  transform: scaleX(-1);
}

.clawdPetFacing.hasSkillEmote[data-facing="left"]{
  transform: none;
}

.clawdPetSprite{
  position: absolute;
  left: 50%;
  bottom: -4px;
  display: block;
  width: 160px;
  height: 160px;
  overflow: visible;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 2px rgba(44, 35, 31, 0.2));
}

.clawdPetSkillFrame{
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
}

.clawdPetSkillEmote{
  position: absolute;
  left: 50%;
  bottom: -4px;
  display: block;
  width: 160px;
  height: 160px;
  max-width: none;
  transform: translateX(-50%);
  image-rendering: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 3px 2px rgba(44, 35, 31, 0.18));
}

.clawdPetSkillFrame.isCompact .clawdPetSkillEmote{
  width: 132px;
  height: 132px;
  bottom: -2px;
}

.clawd-shadow{
  fill: rgba(23, 21, 21, 0.3);
  transform-origin: 7.5px 15.5px;
  animation: clawd-shadow-breathe 2.6s infinite ease-in-out;
}

.clawd-body{
  transform-origin: 7.5px 13px;
  animation: clawd-idle-bob 2.6s infinite ease-in-out;
}

.clawd-torso,
.clawd-feet,
.clawd-left-arm,
.clawd-right-arm{
  fill: currentColor;
}

.clawd-left-arm{
  transform-origin: 1px 10px;
}

.clawd-right-arm{
  transform-origin: 14px 10px;
}

.clawd-eyes{
  transform-origin: 7.5px 9px;
  animation: clawd-blink 3.7s infinite ease-in-out;
}

.clawd-pet-eyes{
  opacity: 0;
  pointer-events: none;
}

.clawd-mouth{
  fill: none;
  stroke: #7a2230;
  stroke-width: 0.65;
  stroke-linecap: round;
  opacity: 0;
}

.clawd-headphones,
.clawd-notes,
.clawd-sleep,
.clawd-thought,
.clawd-hearts,
.clawd-broom,
.clawd-dust,
.clawd-laptop,
.clawd-carry-box,
.clawd-carry-tape{
  opacity: 0;
  pointer-events: none;
}

.clawd-headphones{
  fill: none;
  stroke: #685a76;
  stroke-width: 0.85;
  stroke-linecap: round;
}

.clawd-headphones rect{
  fill: #685a76;
  stroke: none;
}

.clawd-notes,
.clawd-sleep,
.clawd-thought{
  fill: rgba(72, 61, 57, 0.84);
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-weight: 700;
}

.clawd-notes text{
  font-size: 4.2px;
}

.clawd-sleep text{
  font-size: 4px;
}

.clawd-thought text{
  font-size: 5px;
}

.clawd-thought circle{
  fill: rgba(255, 255, 255, 0.78);
  stroke: rgba(72, 61, 57, 0.24);
  stroke-width: 0.35;
}

.clawd-hearts{
  fill: #d96c76;
  transform-origin: 15px 8px;
}

.clawd-laptop{
  fill: #655e62;
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 0.3;
}

.clawd-laptop-line{
  fill: #c9b0d2;
  stroke: none;
}

.clawd-laptop-cursor{
  fill: #f2d690;
  stroke: none;
}

.clawd-carry-box{
  fill: #c99c68;
  stroke: #775a42;
  stroke-width: 0.35;
}

.clawd-carry-tape{
  fill: none;
  stroke: #f0d09b;
  stroke-width: 0.4;
}

.clawdPet-mode-walk .clawd-body{
  animation: clawd-idle-bob 2.8s infinite ease-in-out;
}

.clawdPet-mode-walk .clawd-feet-left{
  animation: none;
}

.clawdPet-mode-walk .clawd-feet-right{
  animation: none;
}

.clawdPet-mode-pet .clawd-eyes{
  opacity: 0;
}

.clawdPet-mode-pet .clawd-pet-eyes{
  opacity: 1;
}

.clawdPet-mode-music .clawd-headphones,
.clawdPet-mode-music .clawd-notes{
  opacity: 1;
}

.clawdPet-mode-music .clawd-mouth,
.clawdPet-mode-pet .clawd-mouth,
.clawdPet-mode-happy .clawd-mouth,
.clawdPet-mode-heart .clawd-mouth{
  opacity: 1;
}

.clawdPet-mode-look .clawd-eyes{
  animation: clawd-look-around 3.8s infinite ease-in-out;
}

.clawdPet-mode-sweep .clawd-broom,
.clawdPet-mode-sweep .clawd-dust{
  opacity: 1;
}

.clawdPet-mode-sweep .clawd-right-arm{
  animation: clawd-sweep 760ms 5 ease-in-out;
}

.clawdPet-mode-sweep .clawd-dust circle{
  fill: rgba(139, 116, 96, 0.45);
  animation: clawd-dust-puff 1.25s infinite ease-out;
}

.clawdPet-mode-sweep .clawd-dust circle:nth-child(2){
  animation-delay: -0.45s;
}

.clawdPet-mode-sweep .clawd-dust circle:nth-child(3){
  animation-delay: -0.85s;
}

.clawd-broom{
  fill: none;
  stroke: #765c43;
  stroke-width: 0.7;
  stroke-linecap: square;
}

.clawd-broom-head{
  fill: #b98c58;
  stroke: #765c43;
  stroke-width: 0.35;
}

.clawdPet-mode-music .clawd-notes text{
  animation: clawd-note-rise 1.8s infinite ease-out;
}

.clawdPet-mode-music .clawd-notes text:last-child{
  animation-delay: -0.9s;
}

.clawdPet-mode-thinking .clawd-body{
  animation: clawd-think-rock 1.8s infinite ease-in-out;
}

.clawdPet-mode-thinking .clawd-thought{
  opacity: 1;
  animation: clawd-thought-pop 1.45s infinite ease-in-out;
}

.clawdPet-mode-typing .clawd-laptop{
  opacity: 1;
}

.clawdPet-mode-typing .clawd-left-arm,
.clawdPet-mode-typing .clawd-right-arm{
  animation: clawd-type 260ms infinite steps(2, jump-none);
}

.clawdPet-mode-typing .clawd-laptop-cursor{
  animation: clawd-cursor 720ms infinite steps(1);
}

.clawdPet-mode-carry .clawd-carry-box,
.clawdPet-mode-carry .clawd-carry-tape{
  opacity: 1;
}

.clawdPet-mode-carry .clawd-left-arm{
  animation: clawd-carry 900ms infinite ease-in-out;
}

.clawdPet-mode-sleep .clawd-body{
  animation: clawd-sleep-breathe 3.2s infinite ease-in-out;
}

.clawdPet-mode-sleep .clawd-sleep{
  opacity: 1;
}

.clawdPet-mode-sleep .clawd-sleep text{
  animation: clawd-z-rise 2.2s infinite ease-out;
}

.clawdPet-mode-sleep .clawd-sleep text:last-child{
  animation-delay: -1.1s;
}

.clawdPet-mode-pet .clawd-body{
  animation: clawd-pet-squish 900ms ease both;
}

.clawdPet-mode-happy .clawd-body{
  animation: clawd-happy-hop 760ms 1 ease-out;
}

.clawdPet-mode-heart .clawd-body{
  animation: clawd-happy-hop 720ms 2 ease-out;
}

.clawdPet-mode-heart .clawd-hearts{
  opacity: 1;
  animation: clawd-heart-float 2.2s ease-out both;
}

.clawdPet-mode-wave .clawd-right-arm{
  animation: clawd-wave 520ms infinite ease-in-out;
}

.clawdApprovalPet{
  position: absolute;
  z-index: 2;
  top: -58px;
  right: 20px;
  width: 76px;
  height: 76px;
  color: #de886d;
  pointer-events: none;
  filter: drop-shadow(0 5px 8px rgba(21, 18, 17, 0.24));
}

.mcpApprovalDialog{
  position: relative;
  overflow: visible;
}

@keyframes clawd-idle-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-0.45px); }
}

@keyframes clawd-shadow-breathe{
  0%, 100%{ transform: scaleX(1); opacity: 0.3; }
  50%{ transform: scaleX(0.95); opacity: 0.24; }
}

@keyframes clawd-blink{
  0%, 45%, 51%, 100%{ transform: scaleY(1); }
  48%{ transform: scaleY(0.12); }
}

@keyframes clawd-walk-bob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-0.45px); }
}

@keyframes clawd-feet-step{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-0.45px); }
}

@keyframes clawd-note-rise{
  0%{ opacity: 0; transform: translateY(2px) scale(0.8); }
  25%{ opacity: 0.9; }
  100%{ opacity: 0; transform: translateY(-7px) translateX(2px) scale(1.08); }
}

@keyframes clawd-look-around{
  0%, 18%, 82%, 100%{ transform: translateX(0); }
  30%, 45%{ transform: translateX(-0.65px); }
  57%, 72%{ transform: translateX(0.65px); }
}

@keyframes clawd-sweep{
  0%, 100%{ transform: rotate(-12deg); }
  50%{ transform: rotate(18deg); }
}

@keyframes clawd-dust-puff{
  0%{ transform: translate(0, 0) scale(0.7); opacity: 0; }
  28%{ opacity: 0.72; }
  100%{ transform: translate(2px, -1.5px) scale(1.25); opacity: 0; }
}

@keyframes clawd-think-rock{
  0%, 100%{ transform: translateY(0) rotate(-2deg) scaleY(0.96); }
  50%{ transform: translateY(0.35px) rotate(2deg) scaleY(0.94); }
}

@keyframes clawd-thought-pop{
  0%, 100%{ transform: translateY(1px) scale(0.92); opacity: 0.58; }
  50%{ transform: translateY(-1px) scale(1); opacity: 1; }
}

@keyframes clawd-type{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(0.65px); }
}

@keyframes clawd-cursor{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: 0; }
}

@keyframes clawd-carry{
  0%, 100%{ transform: rotate(-4deg) translateY(0); }
  50%{ transform: rotate(3deg) translateY(-0.35px); }
}

@keyframes clawd-sleep-breathe{
  0%, 100%{ transform: scaleY(0.92) translateY(0.7px); }
  50%{ transform: scaleY(0.98) translateY(0.15px); }
}

@keyframes clawd-z-rise{
  0%{ opacity: 0; transform: translateY(2px) scale(0.75); }
  30%{ opacity: 0.86; }
  100%{ opacity: 0; transform: translateY(-7px) translateX(2px) scale(1.08); }
}

@keyframes clawd-pet-squish{
  0%, 100%{ transform: scale(1); }
  35%{ transform: scaleX(1.1) scaleY(0.86) translateY(1.2px); }
  62%{ transform: scaleX(0.94) scaleY(1.08) translateY(-0.8px); }
}

@keyframes clawd-happy-hop{
  0%, 100%{ transform: translateY(0) rotate(0); }
  42%{ transform: translateY(-4px) rotate(-5deg); }
  72%{ transform: translateY(-1px) rotate(4deg); }
}

@keyframes clawd-heart-float{
  0%{ transform: translateY(2px) scale(0.65); opacity: 0; }
  20%{ opacity: 1; }
  100%{ transform: translateY(-9px) translateX(2px) scale(1.12); opacity: 0; }
}

@keyframes clawd-wave{
  0%, 100%{ transform: rotate(-8deg); }
  50%{ transform: rotate(-62deg) translateY(-0.6px); }
}

@media (prefers-reduced-motion: reduce){
  .clawdPet,
  .clawdPetFacing,
  .clawdPetSprite *,
  .clawdPetSkillEmote{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@keyframes missMeAvatarPulse{
  0%, 100%{ transform: scale(1); }
  42%{ transform: scale(1.12); }
}

.messageBubble {
  position: relative;
  isolation: isolate;
  width: fit-content;
  min-width: 0;
  max-width: 68%;
  min-height: 0;
  padding: 9px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 24px;
  background: transparent !important;
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(20, 18, 16, 0.035),
    0 5px 14px rgba(20, 18, 16, 0.07);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
  transform: none;
  transition: none;
  will-change: auto;
}

.messageRow.user .messageBubble {
  background: rgba(225, 193, 182, 0.075);
}

.chatScreen .messageBubble {
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.075) !important;
  box-shadow: 0 1px 4px rgba(20, 18, 16, 0.025);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chatScreen .messageRow.user .messageBubble {
  background: rgba(255, 255, 255, 0.075) !important;
}

.messageBubble::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.01) 35%,
    transparent 40%
  );
  pointer-events: none;
}

.messageBubble::after {
  content: none;
  display: none;
}

.chatScreen .messageBubble::before,
.chatScreen .messageBubble::after {
  content: none;
  display: none;
}

.messageBubble > * {
  position: relative;
  z-index: 2;
}

.messageBubble p {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 1px 2px rgba(20, 18, 16, 0.12);
}

.messageBubble:hover,
.messageBubble:active {
  border-color: rgba(255, 255, 255, 0.48);
}

.messageRow.isThinking .messageBubble {
  display: flex;
  align-items: center;
  gap: 9px;
}

.messageRow.isThinking .messageBubble p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.messageBubble.isLongPressEditable {
  cursor: context-menu;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.messageBubble.isLongPressEditable:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

.chatScreen .messageRow.assistant .messageBubble.isActionDescription {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.07);
}

.chatScreen .messageBubble.isActionDescription p {
  color: rgba(218, 218, 218, 0.82);
  font-style: italic;
  font-weight: 400;
  -webkit-text-fill-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .messageBubble {
    transition: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .messageBubble {
    background: rgba(255, 255, 255, 0.16);
  }

  .messageRow.user .messageBubble {
    background: rgba(225, 193, 182, 0.2);
  }
}


/* Love notes kept as an exchange. Avatars follow the chat screen, never a second copy. */
.journalKeptExchange{ display: grid; gap: 7px; margin: 2px 0 0; }
.journalKeptOccasion{ justify-self:center; max-width:82%; margin:0; padding:1px 3px; color:rgba(93,76,83,.72); font:italic 10.5px/1.45 Georgia,"Songti SC",serif; text-align:center; }
.journalKeptTuckToggle{ box-sizing:border-box; justify-self:center; min-width:0; min-height:22px; height:22px; margin:0; padding:0 9px; border:1px dashed rgba(78,57,65,.16); border-radius:8px; background:none; color:#8b7780; box-shadow:none; font:9.5px/20px Georgia,"Songti SC",serif; cursor:pointer; -webkit-appearance:none; appearance:none; }
.journalKeptTuckToggle:hover{ color: #5d4c53; }
.journalKeptTuckToggle:focus-visible{ outline: 2px solid rgba(161, 67, 97, 0.55); outline-offset: 2px; }
.journalKeptTurn{ display: flex; align-items: flex-end; gap: 6px; }
.journalKeptTurnShell{ display:grid; gap:5px; }
.journalKeptTurn.isHers{ flex-direction: row-reverse; }
.journalKeptTurn.isTucked{ opacity: 0.45; }
.journalKeptAvatar{ flex:0 0 32px; width:32px; height:32px; border:0; border-radius:50%; background-position:center; background-size:cover; box-shadow:none; }
.journalKeptTurn.isClaude .journalKeptAvatar{ background-image: var(--journal-av-claude, url("/homeg-avatar-companion.png")); }
.journalKeptTurn.isHers .journalKeptAvatar{ background-image: var(--journal-av-user, url("/homeg-avatar-user.png")); }
.journalKeptBubble{ flex:0 1 auto; max-width:74%; min-height:38px; margin:0; padding:8px 12px; border:0; border-radius:14px; color:#4c3f44; font:13px/1.7 Georgia,"Songti SC",serif; white-space:pre-wrap; overflow-wrap:anywhere; -webkit-backdrop-filter:blur(20px) saturate(138%); backdrop-filter:blur(20px) saturate(138%); }
.journalKeptTurn.isClaude .journalKeptBubble{ border-bottom-left-radius:4px; background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.035)); box-shadow:0 6px 18px rgba(60,40,48,.04); }
.journalKeptTurn.isHers .journalKeptBubble{ border-bottom-right-radius:4px; background:linear-gradient(145deg,rgba(242,193,209,.34),rgba(212,151,171,.13)); box-shadow:0 6px 18px rgba(120,70,85,.05); }
.journalKeptBubble.hasDetails{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.journalKeptBubble.hasDetails:focus-visible{ outline:1px solid rgba(161,96,117,.34); outline-offset:2px; }
.journalKeptAt{ flex-shrink:0; padding:0; color:#a2909a; font:10px/1 Georgia,serif; font-variant-numeric:tabular-nums; }
.journalKeptTags{ justify-self: center; margin: 1px 0 0; color: #a2909a; font: 10.5px/1.5 Georgia, "Songti SC", serif; letter-spacing: 0.04em; }


/* Sweet Nothings: Things You Said and Love Notes read as one book. */
.journalTopbar.sweetNothingsTopbar{ min-height:calc(46px + env(safe-area-inset-top)); padding:calc(1px + env(safe-area-inset-top)) 12px 4px; }
.sweetNothingsScreen{ overscroll-behavior-y:none; }
.sweetNothingsScreen.hasCustomWallpaper{ background-position:center; background-size:cover; background-repeat:no-repeat; }
.sweetNothingsScreen.hasCustomWallpaper .sweetNothingsTopbar{ background:rgba(244,241,237,.74); }
.sweetNothingsTopbar>button{ min-height:28px; height:28px; padding:0 8px; font-size:9px; }
.sweetNothingsIconButton{ box-sizing:border-box; display:grid; place-items:center; width:28px; min-width:28px; max-width:28px; padding:0!important; border-color:rgba(255,255,255,.44)!important; background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.07))!important; color:#786970!important; font:15px/1 var(--font-sans)!important; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.sweetNothingsIconButton.isActive{ color:#a55f74!important; background:linear-gradient(145deg,rgba(244,216,225,.36),rgba(255,255,255,.1))!important; }
.sweetNothingsTopTitle{ position:absolute; top:calc(env(safe-area-inset-top) + 3px); left:50%; width:max-content; transform:translateX(-50%); justify-items:center!important; text-align:center; }
.sweetNothingsTopTitle strong{ color:#4c3f44; font:400 18px/1.15 Didot,"Bodoni 72",Baskerville,Georgia,serif; letter-spacing:.035em; }
.sweetNothingsTopTitle span{ margin-top:2px; color:#9c8b93; font:500 8px/1.2 var(--font-sans); letter-spacing:.13em; text-transform:uppercase; }
.sweetNothings{ display: grid; gap: 11px; padding: 4px 16px 40px; max-width: 560px; margin: 0 auto; }
.journalLoveSwipeStack{ position:absolute; inset:0; z-index:10; overflow:hidden; }
.journalLoveSwipeStack>.journalScreen{ position:absolute!important; inset:0; width:100%; height:100%; }
.journalLoveSwipeStack>.journalLoveBackPreview{ z-index:1; pointer-events:none; }
.journalLoveSwipeStack>.sweetNothingsScreen{ z-index:2; }
.journalLoveBackPreviewPaper{ width:min(88%,420px); height:58%; margin:28px auto 0; border:1px solid rgba(75,58,64,.08); border-radius:22px; background:rgba(255,255,255,.24); }
.sweetNothingsSettings{ position:absolute; z-index:18; top:calc(100% + 4px); left:12px; display:grid; gap:5px; min-width:190px; padding:8px; border:1px solid rgba(255,255,255,.5); border-radius:14px; background:rgba(244,241,237,.78); box-shadow:0 12px 34px rgba(62,45,51,.14),inset 0 1px 0 rgba(255,255,255,.72); -webkit-backdrop-filter:blur(22px) saturate(135%); backdrop-filter:blur(22px) saturate(135%); }
.sweetNothingsSettings button{ box-sizing:border-box; display:flex; align-items:center; justify-content:flex-start; width:100%; min-height:30px; padding:5px 10px; border:0; border-radius:9px; background:rgba(255,255,255,.34); color:#625258; font:11px/1.3 Georgia,"Songti SC",serif; text-align:left; }
.sweetNothingsToolsShell{ max-height:calc(var(--sweet-pull-progress,0) * 138px); overflow:clip; opacity:var(--sweet-pull-progress,0); transform:translateY(calc((1 - var(--sweet-pull-progress,0)) * -8px)); pointer-events:none; transition:max-height 220ms cubic-bezier(.22,.8,.24,1),opacity 160ms ease,transform 220ms cubic-bezier(.22,.8,.24,1); }
.sweetNothingsToolsShell.isPulling{ transition:none; }
.sweetNothingsToolsShell.isOpen{ max-height:138px; opacity:1; transform:none; pointer-events:auto; }
.sweetNothingsPullCue{ display:block; height:10px; margin:-2px 0 2px; color:rgba(125,106,112,.48); font:12px/10px var(--font-sans); text-align:center; }
.sweetNothingsTools{ display: grid; gap: 5px; }
.sweetNothingsSearch{ box-sizing:border-box; width:100%; min-height:34px; padding:6px 11px; border:1px solid rgba(255,255,255,.42); border-radius:999px; background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.05)); color:#4c3f44; font:16px/1.2 Georgia,"Songti SC",serif; -webkit-backdrop-filter:blur(14px) saturate(125%); backdrop-filter:blur(14px) saturate(125%); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
.sweetNothingsSearch::placeholder{ color: #a99aa0; }
.sweetNothingsSearch:focus{ outline: none; border-color: rgba(199, 145, 160, 0.6); }
.sweetNothingsTags{ display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.sweetNothingsTags::-webkit-scrollbar{ display: none; }
.sweetNothingsTag{ flex:0 0 auto; min-width:0; min-height:22px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: linear-gradient(145deg,rgba(255,255,255,.15),rgba(255,255,255,.045)); color: #7d6a70; font: 9.5px/1.25 Georgia, "Songti SC", serif; cursor: pointer; white-space: nowrap; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.42); }
.sweetNothingsTag[aria-pressed="true"]{ border-color:rgba(255,255,255,.34); background:linear-gradient(145deg,rgba(242,214,222,.27),rgba(238,213,219,.09)); color: #8e5f6c; }
.sweetNothingsTag:focus-visible{ outline: 2px solid rgba(199, 145, 160, 0.7); outline-offset: 2px; }
.sweetNothingsTagAdd{ font-family:var(--font-sans); font-size:14px; }
.sweetNothingsCategoryForm{ display:grid; grid-template-columns:minmax(0,140px) 32px; align-items:center; justify-content:start; gap:4px; width:min(176px,100%); }
.sweetNothingsCategoryForm input{ box-sizing:border-box; min-width:0; width:100%; height:24px; padding:2px 7px; border:1px solid rgba(255,255,255,.42); border-radius:8px; background:rgba(255,255,255,.14); color:#4c3f44; font:12px/1.2 Georgia,"Songti SC",serif; }
.sweetNothingsCategoryForm button{ box-sizing:border-box; display:grid; place-items:center; width:32px; min-width:32px; max-width:32px; height:24px; min-height:24px; padding:0; border:0; border-radius:8px; background:rgba(255,255,255,.24); color:#786970; font:9px/1 var(--font-sans); }
.sweetNothingsEditTurn>span{ display:flex; align-items:center; justify-content:space-between; }
.sweetNothingsEditTurn>span button{ min-width:22px; min-height:22px; padding:0; border:0; border-radius:50%; background:rgba(145,75,93,.08); color:#a45f73; }
.sweetNothingsCategoryPicker{ display:flex; align-items:center; gap:4px; overflow-x:auto; }
.sweetNothingsCategoryPicker button{ flex:0 0 auto; min-height:22px; padding:3px 8px; border:1px solid rgba(255,255,255,.38); border-radius:999px; background:rgba(255,255,255,.12); color:#7d6a70; font:9.5px/1.2 Georgia,"Songti SC",serif; }
.sweetNothingsCategoryPicker button[aria-pressed="true"]{ background:rgba(238,205,216,.28); color:#8e5f6c; }
.sweetNothingsCategoryPicker>span{ margin-left:auto; color:#a2909a; font:9px/1 var(--font-sans); }
.sweetNothingsMonth{ display: grid; gap: 10px; }
.sweetNothingsEntry{ display: grid; gap: 7px; }
.sweetNothingsDateRow{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.sweetNothingsDate{ box-sizing:border-box; grid-column: 2; min-width:0; min-height:20px; height:20px; padding:0 8px; border: none; border-radius: 7px; background: rgba(78, 57, 65, 0.05); color: #8b7780; box-shadow:none; font: 10px/20px Georgia, serif; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-appearance:none; appearance:none; }
.sweetNothingsDate:hover{ color: #5d4c53; }
.sweetNothingsReactions{ grid-column:3; justify-self:start; display:inline-flex; align-items:center; gap:1px; margin-left:4px; }
.sweetNothingsHeart{ box-sizing:border-box; display:inline-flex; flex:0 0 20px; align-items:center; justify-content:center; width:20px; min-width:20px; max-width:20px; height:20px; min-height:20px; max-height:20px; margin:0; padding:0; border:0; border-radius:50%; background:transparent; color:rgba(120,105,112,.28); font-size:11px; line-height:1; cursor:pointer; -webkit-appearance:none; appearance:none; box-shadow:none; }
.sweetNothingsHeart.isClaude{ cursor: default; }
.sweetNothingsHeart.isHers.isOn{ color:#bd8c98; }
.sweetNothingsHeart.isClaude.isOn{ color:#7894a5; }
.sweetNothingsHeart:disabled{ opacity: 0.45; }
.sweetNothingsHeart:focus-visible{ outline: 2px solid rgba(199, 145, 160, 0.7); outline-offset: 2px; }
.sweetNothingsEntryActions{ display:flex; justify-content:center; gap:5px; margin-top:-2px; }
.sweetNothingsEntryActions button,.sweetNothingsEditActions button{ box-sizing:border-box; flex:0 0 auto; width:auto; min-width:0; max-width:none; min-height:21px; height:21px; padding:0 7px; border:1px solid rgba(255,255,255,.44); border-radius:999px; background:rgba(255,255,255,.18); color:#76656c; font:9px/19px Georgia,"Songti SC",serif; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.sweetNothingsEntryActions button.isDelete{ color:#a16b78; }
.sweetNothingsEditor{ box-sizing:border-box; display:grid; justify-self:center; gap:6px; width:min(88%,420px); padding:7px; border:1px solid rgba(255,255,255,.48); border-radius:13px; background:rgba(255,255,255,.13); -webkit-backdrop-filter:blur(18px) saturate(130%); backdrop-filter:blur(18px) saturate(130%); }
.sweetNothingsTitleField{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:6px; color:#938087; font:9px/1 var(--font-sans); letter-spacing:.05em; }
.sweetNothingsTitleField input{ box-sizing:border-box; min-width:0; width:100%; height:26px; padding:3px 8px; border:1px solid rgba(115,91,100,.13); border-radius:9px; background:rgba(255,255,255,.22); color:#4c3f44; font:12px/1.2 Georgia,"Songti SC",serif; }
.sweetNothingsEditor>textarea,.sweetNothingsEditTurn textarea{ box-sizing:border-box; width:100%; min-height:76px; resize:vertical; padding:8px 10px; border:1px solid rgba(115,91,100,.13); border-radius:10px; background:rgba(255,255,255,.28); color:#4c3f44; font:12px/1.55 Georgia,"Songti SC",serif; }
.sweetNothingsEditTurn{ display:grid; gap:3px; }
.sweetNothingsEditTurn>span{ color:#938087; font:9px/1.2 var(--font-sans); letter-spacing:.05em; }
.sweetNothingsEditActions{ display:flex; justify-content:flex-end; gap:4px; }
.sweetNothingsTurnMeta{ flex:0 0 auto; align-self:flex-end; display:grid; justify-items:center; gap:2px; min-width:38px; padding-bottom:2px; }
.sweetNothingsTurnActions{ display:flex; align-items:center; justify-content:center; gap:2px; margin:0; }
.sweetNothingsTurnActions button{ box-sizing:border-box; display:grid; place-items:center; width:18px; min-width:18px; max-width:18px; height:18px; min-height:18px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#8d7880; font:9px/1 var(--font-sans); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.sweetNothingsTurnActions button.isDelete{ color:#a46c7a; }
.sweetNothingsInlineEditor{ display:grid; gap:5px; width:min(76%,390px); margin:0 38px; }
.sweetNothingsInlineEditor.isHers{ justify-self:end; }
.sweetNothingsInlineEditor textarea{ box-sizing:border-box; width:100%; min-height:72px; resize:vertical; padding:8px 10px; border:1px solid rgba(115,91,100,.13); border-radius:11px; background:rgba(255,255,255,.28); color:#4c3f44; font:12px/1.55 Georgia,"Songti SC",serif; }
.sweetNothingsInlineEditorActions{ display:flex; justify-content:flex-end; gap:5px; }
.sweetNothingsInlineEditorActions button{ box-sizing:border-box; flex:0 0 auto; width:auto; min-width:0; max-width:none; height:20px; min-height:20px; padding:0 7px; border:0; border-radius:999px; background:rgba(255,255,255,.2); color:#76656c; font:9px/1 Georgia,"Songti SC",serif; }
.sweetNothingsTopicTagEditor{ display:grid; justify-items:start; gap:4px; }
.sweetNothingsTopicTagList{ display:flex; flex-wrap:wrap; gap:4px; }
.sweetNothingsTopicTagList button{ min-height:22px; padding:3px 8px; border:1px solid rgba(255,255,255,.38); border-radius:999px; background:rgba(255,255,255,.12); color:#7d6a70; font:9.5px/1.2 Georgia,"Songti SC",serif; }
.sweetNothingsTopicTagList button::after{ content:" ×"; color:#ac7584; }
.sweetNothingsTopicTagForm{ display:grid; grid-template-columns:minmax(0,140px) 24px; align-items:center; gap:4px; width:min(168px,100%); }
.sweetNothingsTopicTagForm input{ box-sizing:border-box; min-width:0; width:100%; height:24px; padding:2px 7px; border:1px solid rgba(255,255,255,.42); border-radius:8px; background:rgba(255,255,255,.14); color:#4c3f44; font:12px/1.2 Georgia,"Songti SC",serif; }
.sweetNothingsTopicTagForm button{ box-sizing:border-box; display:grid; place-items:center; width:24px; min-width:24px; max-width:24px; height:24px; min-height:24px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.24); color:#786970; font:12px/1 var(--font-sans); }
body:has(.sweetNothings) .bottomNavigation{ display:none; }


/* Long-press menu on a chat bubble. Frosted white like the rest, never a black slab. */
.keptMenuScrim{ position: fixed; inset: 0; z-index: 60; background: rgba(22, 30, 38, 0.28); }
.keptMenu{ position: absolute; z-index: 61; display: flex; gap: 0; padding: 2px; max-width: calc(100vw - 20px); border: none; border-radius: 12px; background: rgba(250, 248, 245, 0.56); box-shadow: 0 6px 22px rgba(70, 55, 48, 0.12); transform: translate(-50%, -100%); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); }
.keptMenu.isBelow{ transform: translate(-50%, 0); }
.keptMenu button{ box-sizing:border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: min(48px, calc((100vw - 24px) / 6)); height: 38px; padding: 0 5px; border: none; border-radius: 10px; background: none; color: #4c3f44; font: 400 11px/1 Didot, "Bodoni 72", Baskerville, Georgia, serif; letter-spacing: 0.02em; cursor: pointer; }
.keptMenu button i{ display: flex; align-items: center; justify-content: center; height: 13px; font-style: normal; font-size: 12.5px; line-height: 1; color: #8b7780; }
.keptMenu button:hover{ background: rgba(255, 253, 251, 0.72); }
.keptMenu button:focus-visible{ outline: 2px solid #d99aa9; outline-offset: -2px; }
.keptMenu button.isKeep{ color: #8e5f6c; }
.keptMenu button.isKeep i{ color: #e8a0b0; }
.keptMenu button.isDelete{ color: #9a666b; }
.keptMenu button.isDelete i{ color: #b9797f; }
.keptMenu button:disabled{ opacity: 0.45; cursor: default; }
.keptToast{ position: fixed; left: 50%; bottom: 96px; z-index: 62; display:flex; align-items:center; gap:9px; margin: 0; padding: 8px 16px; border: none; border-radius: 999px; background: rgba(250, 248, 245, 0.92); color: #4c3f44; font: 400 12.5px/1.4 Georgia, "Songti SC", serif; box-shadow: 0 6px 22px rgba(28, 48, 64, 0.16); transform: translateX(-50%); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.keptToast button{ min-height:0; padding:0; border:0; background:none; color:#a16f7c; font:600 11px/1.2 var(--font-sans); }




/* Picking an exchange stays in the chat. Bubbles are dimmed in place, never redrawn. */
.messageBubble[data-pick]{ transition: opacity 0.22s, filter 0.22s, transform 0.22s; cursor: pointer; }
.messageBubble[data-pick="fold"]{ opacity: 0.5; }
.messageBubble[data-pick="out"],
.messageBubble[data-pick="drop"]{ opacity: 0.26; filter: grayscale(0.9) blur(0.4px); transform: scale(0.96); }
.messageBubble[data-pick="keep"]{ opacity: 1; }
.keepBar{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 62; display: grid; gap: 4px; padding: 6px 20px 15px; border-top: 1px solid rgba(255, 255, 255, 0.58); background: rgba(250, 248, 245, 0.72); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.keepBarTitle{ width: 100%; padding: 7px 13px; border: 1px solid rgba(216, 208, 203, 0.68); border-radius: 11px; background: rgba(255, 253, 251, 0.8); color: #4c3f44; font: 13.5px/1.4 Georgia, "Songti SC", serif; }
.keepBarTitle:focus{ outline: none; border-color: rgba(199, 145, 160, 0.7); }
.keepBarRow{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 0 4px 2px; }
.keepBarRow button{ padding: 0; margin: 0; border: none; background: none; color: #8b7780; font: 400 14px/1.1 Didot, "Bodoni 72", Baskerville, Georgia, serif; letter-spacing: 0.03em; cursor: pointer; }
.keepBarRow button:first-child{ justify-self: start; }
.keepBarRow button.isSave{ justify-self: end; color: #8e5f6c; }
.keepBarRow button:disabled{ opacity: 0.3; cursor: default; }
.keepBarRow span{ color: #a2909a; font: 400 11px/1.4 Didot, "Bodoni 72", Georgia, serif; white-space: nowrap; }

/* While picking, the list must clear the bar so the last line is never hidden. */
.chatScreen.isPicking .chatLog{ padding-bottom: 108px; }

/* While picking, the identity header would float over the bubbles. Hide it. */
body.isPickingKeep .homegChatMorphHeader,
body.isPickingKeep .homegChatMorphIdentity{ display: none !important; }

/* Picking replaces the composer; leaving it under the bar wastes the bottom. */
body.isPickingKeep .composer{ display: none !important; }

.isHiddenWhilePicking{ display: none !important; }

/* While picking, the identity header floats over the bubbles you are choosing. */
body.isPickingKeep .appHeader{ display: none !important; }

/* Selecting inside one bubble. Let iOS own the handles and their entire drag path. */
.messageBubble{ -webkit-user-select: none; user-select: none; }
.messageBubble[data-selectable="true"]{
  position: relative;
  z-index: 56;
  overflow: visible;
  touch-action: auto !important;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: none;
  cursor: text;
}
.messageBubble[data-selectable="true"] ::selection{ background: rgba(217, 154, 169, 0.28); }
.messageQuotePreview[data-selectable="true"]{
  position:relative; z-index:57; overflow:visible; touch-action:auto !important;
  -webkit-user-select:text; user-select:text; -webkit-touch-callout:none; cursor:text;
}
.messageQuotePreview[data-selectable="true"] ::selection{ background:rgba(217,154,169,.28); }
body.isSelectingChatText .edgeSwipeBackHandle{ pointer-events: none; }

/* Quoted replies stay compact and are real selectable text, never screenshots. */
.messageQuotePreview{
  display:grid; gap:2px; min-width:0; margin:-2px 0 7px; padding:5px 8px 6px;
  border-left:2px solid rgba(255,255,255,.58); border-radius:5px 9px 9px 5px;
  background:rgba(24,22,21,.12); color:rgba(255,255,255,.82);
  cursor:pointer; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
.messageQuotePreview > span{
  overflow:hidden; color:rgba(255,255,255,.72); font:600 9.5px/1.2 var(--font-sans);
  letter-spacing:.025em; text-overflow:ellipsis; white-space:nowrap;
}
.messageQuotePreview > p{
  display:-webkit-box; overflow:hidden; color:rgba(255,255,255,.78); font-size:11.5px;
  line-height:15px; text-shadow:none; -webkit-box-orient:vertical; -webkit-line-clamp:3;
}

.selectionQuoteMenu{
  position:fixed; z-index:64; display:flex; transform:translateX(-50%);
  padding:2px; border:0; border-radius:11px; background:rgba(250,248,245,.82);
  box-shadow:0 5px 18px rgba(35,28,27,.16); -webkit-backdrop-filter:blur(20px) saturate(1.4);
  backdrop-filter:blur(20px) saturate(1.4); touch-action:none;
}
.selectionQuoteMenu button{
  min-width:48px; height:32px; padding:0 9px; border:0; border-radius:9px;
  background:none; color:#58494f; font:500 11px/1 var(--font-sans);
}
.selectionQuoteMenu button:disabled{ opacity:.4; }

.composerQuote{
  grid-column:1 / -1; position:relative; display:grid; gap:1px; min-width:0;
  margin:0 4px 1px; padding:5px 28px 5px 9px; border-left:2px solid rgba(255,255,255,.62);
  border-radius:5px 10px 10px 5px; background:rgba(20,18,16,.11); color:rgba(255,255,255,.84);
}
.composerQuote > span{ font:600 9.5px/1.2 var(--font-sans); color:rgba(255,255,255,.72); }
.composerQuote > p{
  display:-webkit-box; overflow:hidden; margin:0; color:rgba(255,255,255,.82);
  font:400 11.5px/15px var(--font-body); -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.composerQuote > button{
  position:absolute; top:50%; right:7px; width:18px; min-width:18px; height:18px; min-height:18px;
  padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:rgba(255,255,255,.74);
  font:400 15px/17px var(--font-sans); transform:translateY(-50%);
}

.todoRemindedTag{ padding: 1px 7px; border-radius: 6px; background: rgba(78, 57, 65, 0.06); color: #8b7780; font: 400 10px/1.5 Didot, "Bodoni 72", Georgia, serif; letter-spacing: 0.06em; }

/* Picking a voice note. Without these it changed state invisibly and read as dead. */
.chatVoiceTimelineItem[data-pick]{ cursor: pointer; transition: opacity 0.22s, filter 0.22s, transform 0.22s; }
.chatVoiceTimelineItem[data-pick="fold"]{ opacity: 0.5; }
.chatVoiceTimelineItem[data-pick="out"],
.chatVoiceTimelineItem[data-pick="drop"]{ opacity: 0.26; filter: grayscale(0.9) blur(0.4px); transform: scale(0.96); }
.chatVoiceTimelineItem[data-pick="keep"]{ opacity: 1; }

/* A kept voice note inside the book. The chat card is tuned for a dark wallpaper;
   on this pale background it washed out until the play button vanished. */


.journalKeptVoice .chatVoiceNotePill{
  background: rgba(255, 253, 251, 0.96);
  border: 1px solid rgba(78, 57, 65, 0.1);
  box-shadow: 0 1px 4px rgba(60, 40, 48, 0.07);
}
.journalKeptTurn.isHers .journalKeptVoice .chatVoiceNotePill{
  background: rgba(248, 232, 236, 0.96);
  border-color: rgba(140, 90, 105, 0.12);
}
.journalKeptVoice .chatVoicePlayButton{ background: rgba(78, 57, 65, 0.82); color: #fffdfb; opacity: 1; }
.journalKeptVoice .chatVoiceWaveBars > *{ background: rgba(78, 57, 65, 0.42); }
.journalKeptVoice .chatVoiceNoteCard time,
.journalKeptVoice .chatVoiceNoteCard small{ color: #7d6a70; }

/* Kept voice notes sit on the book's pale background, not the chat wallpaper.
   The chat card's colours are tuned for a dark backdrop, so everything it draws
   in near-white had to be restated here or it reads as blank space. */
.journalKeptVoice .chatVoiceTranscript p{
  background: rgba(78, 57, 65, 0.05);
  color: #4c3f44;
  font: 11.5px/1.65 Georgia, "Songti SC", serif;
}
.journalKeptVoice .chatVoiceTranscript summary span{ color: #8b7780; }
.journalKeptVoice .chatVoiceTranscript summary::after{ border-color: #8b7780; }
.journalKeptVoice .chatVoiceDuration{ color: #7d6a70; }
.journalKeptVoice .chatVoiceExpiredLabel{ color: #a2909a; }


/* 书里的语音卡片自己算宽。
   The chat card sizes itself against the chat layout (a percentage of the text
   bubble's 68% max-width, scaled by clip length). Inside the book that
   percentage resolves against a different container, so the card came out far
   wider than its contents, centred them, and left a gap beside the avatar —
   and grew taller on expand, pushing the avatar down. Here it hugs instead. */
.journalKeptVoice{ display: inline-block; vertical-align: bottom; margin: 0; }
.journalKeptVoice .chatVoiceNoteCard{
  width: 206px;
  max-width: 206px;
  margin: 0;
  padding: 0;
  justify-items: stretch;
}
.journalKeptVoice .chatVoiceNotePill{ width: 100%; min-width: 0; height: 40px; }
/* The transcript must wrap inside the fixed width, never widen it: as a grid
   item its own width was setting the card's, which stretched the waveform and
   left a gap between the card and the avatar. */
.journalKeptVoice .chatVoiceTranscript{ width: 100%; min-width: 0; }
.journalKeptVoice .chatVoiceTranscript p{
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.journalKeptVoice .chatVoiceTimelineItem{ margin: 0; }
/* Keep the avatar level with the pill, not with the transcript that opens below it. */
.journalKeptTurn:has(.journalKeptVoice){ align-items: flex-start; }
.journalKeptTurn:has(.journalKeptVoice) .journalKeptAvatar{ margin-top: 6px; }
/* Reading room v1: a quiet paper-book companion, not a full ebook reader. */
.mobileViewport:has(.appContent-reading){width:100%;max-width:none}.appContent-reading{overflow:hidden;background:#f5efec}.appContent-reading>.readingScreen{width:100%;max-width:none;flex:1 1 100%}
.readingScreen{height:100%;overflow-y:auto;padding:calc(env(safe-area-inset-top) + 4px) 18px calc(150px + env(safe-area-inset-bottom));color:#211c1b;background:linear-gradient(180deg,#f7f1ee 0%,#f2ece9 100%)}
.readingTopbar{position:sticky;top:calc(-1 * (env(safe-area-inset-top) + 4px));z-index:10;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;min-height:48px;margin:0 -4px 16px;padding-top:0;background:linear-gradient(180deg,rgba(247,241,238,.98),rgba(247,241,238,.9) 80%,rgba(247,241,238,0));backdrop-filter:blur(18px)}
.readingTopbar>button{border:0;background:transparent;font:300 38px/1 Georgia;color:#211c1b}.readingTopbar>span,.readingTopbar>strong{text-align:center;font:500 28px/1 Georgia,"Times New Roman",serif;letter-spacing:-.035em}.readingTopbar>i{display:block}
.readingShelfTitle{text-align:center;margin:6px 0 26px}.readingShelfTitle h1{margin:0;font:400 clamp(48px,15vw,72px)/.9 Georgia,"Times New Roman",serif;letter-spacing:-.055em}.readingShelfTitle p{margin:12px 0 0;font:500 11px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;color:#8b807c;letter-spacing:.04em}
.readingShelfGroups{display:grid;gap:20px}.readingShelfGroup header{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;padding:0 8px}.readingShelfGroup header strong{font:650 14px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.readingShelfGroup header span{font-size:11px;color:#9b918e}
.readingBookRail{position:relative;display:flex;align-items:flex-end;gap:14px;overflow-x:auto;min-height:145px;padding:8px 20px 12px;border-radius:10px;background-image:url('/reading-acrylic-shelf.png');background-repeat:no-repeat;background-size:100% auto;background-position:center bottom;scrollbar-width:none;transition:transform .2s ease,box-shadow .2s ease}.readingShelfGroup-echo_room .readingBookRail{background-image:url('/reading-acrylic-shelf-blue.png')}.readingShelfGroup-aria .readingBookRail{background-image:url('/reading-acrylic-shelf-sage.png')}.readingShelfGroup-recitative .readingBookRail{background-image:url('/reading-acrylic-shelf-lavender.png')}.readingBookRail::-webkit-scrollbar{display:none}.readingBookRail.isDropTarget{transform:scale(1.012);box-shadow:0 13px 24px rgba(65,48,43,.1)}
.readingBookRail>button{position:relative;z-index:2;flex:0 0 88px;border:0;padding:0 0 5px;background:transparent;transition:opacity .16s ease,transform .2s cubic-bezier(.2,.8,.2,1)}.readingBookRail>button.isBeingDragged{opacity:.18;transform:scale(.92)}.readingBookDropSpace{position:relative;z-index:2;flex:0 0 88px;aspect-ratio:2/3;border:1.5px dashed rgba(255,255,255,.82);border-radius:5px;animation:readingDropSpaceIn .2s ease both}.readingDragGhost{position:fixed;z-index:120;pointer-events:none;transform:translate(-50%,-52%) rotate(-3deg) scale(1.08);filter:drop-shadow(0 18px 18px rgba(38,25,22,.3));animation:readingLift .18s ease both}.readingDragGhost .readingBookCover{width:88px}.readingBookCover{display:flex;align-items:center;justify-content:center;width:88px;aspect-ratio:2/3;border-radius:3px;background-size:cover!important;background-position:center!important;box-shadow:0 9px 16px rgba(42,30,27,.19),0 1px 1px rgba(255,255,255,.72) inset;overflow:hidden}.readingBookCover b{padding:10px;font:600 11px/1.25 Georgia,serif;color:#4f3a36;text-align:center;overflow-wrap:anywhere}.readingShelfScreen::after{content:"";position:fixed;z-index:11;right:0;bottom:0;left:0;height:190px;pointer-events:none;background:linear-gradient(180deg,rgba(245,239,236,0),#f5efec 58%,#f5efec 100%)}.readingAddBook{position:fixed;z-index:24;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));display:block;transform:translateX(-50%);margin:0;border:0;border-radius:999px;padding:14px 32px;background:#171313;color:#fff;font:650 13px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;white-space:nowrap;box-shadow:0 12px 24px rgba(34,25,23,.22)}@keyframes readingLift{from{opacity:.4;transform:translate(-50%,-45%) scale(.88)}to{opacity:1;transform:translate(-50%,-52%) rotate(-3deg) scale(1.08)}}@keyframes readingDropSpaceIn{from{flex-basis:0;opacity:0}to{flex-basis:88px;opacity:1}}
.readingBookHero{display:flex;align-items:flex-end;gap:18px;margin:8px 2px 20px}.readingBookHero .readingBookCover{width:92px;flex:0 0 92px}.readingBookHero h1{margin:0 0 5px;font:500 27px/1.05 Georgia,serif;letter-spacing:-.03em}.readingBookHero p{margin:0;color:#857975;font-size:12px}
.readingCompanionPicker{display:grid;grid-template-columns:.7fr 1.3fr;gap:10px;margin-bottom:15px}.readingCompanionPicker label{display:grid;gap:6px;padding:10px 12px;border:1px solid rgba(255,255,255,.72);border-radius:15px;background:rgba(255,255,255,.48);font:600 10px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;color:#8f817d}.readingCompanionPicker select{width:100%;border:0;background:transparent;color:#241f1d;font:600 12px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;outline:none}
.readingTabs{display:grid;grid-template-columns:1fr 1fr;margin:0 0 16px;padding:3px;border-radius:999px;background:rgba(28,23,22,.09)}.readingTabs button{border:0;border-radius:999px;padding:10px;background:transparent;color:#8c807c;font:650 12px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.readingTabs button.isCurrent{background:#fff;color:#211c1b;box-shadow:0 4px 13px rgba(50,39,36,.09)}.readingTabs button:disabled{opacity:.45}.readingRemoveText{display:block;margin:0 0 10px auto;border:0;background:transparent;color:#9a7775;font:600 10px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;text-decoration:underline;text-underline-offset:3px}
.readingNotes{display:grid;gap:16px}.readingAnnotation{padding:15px;border:1px solid rgba(255,255,255,.82);border-radius:22px;background:rgba(255,255,255,.34);box-shadow:0 12px 30px rgba(68,49,44,.055)}.readingAnnotation blockquote{margin:0 0 13px;padding:0 0 0 13px;border-left:2px solid #d2aaa9;font:500 14px/1.6 Georgia,"Songti SC",serif;color:#5b4c48}.readingNoteBubble{width:fit-content;max-width:92%;margin:8px 0;padding:11px 13px;border-radius:17px}.readingNoteBubble small{display:block;margin-bottom:5px;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9a8883}.readingNoteBubble p{margin:0;font:400 13px/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;white-space:pre-wrap}.readingNoteBubble.isMine{margin-left:auto;background:#f3dede}.readingNoteBubble.isClaude{margin-right:auto;background:#fff;box-shadow:0 7px 18px rgba(72,53,48,.08)}.readingAskClaude{display:block;margin:10px 0 0 auto;border:0;border-radius:999px;padding:8px 12px;background:rgba(40,32,30,.08);color:#564a47;font:650 10px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.readingTextPane{min-height:55vh}.readingSearch{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:10px 13px;border-radius:15px;background:rgba(255,255,255,.7)}.readingSearch input{width:100%;border:0;background:transparent;outline:none;font-size:13px}.readingSelectionHint{margin:0 3px 16px;color:#9a8e89;font-size:10px}.readingReferenceText{padding:24px 20px;border-radius:8px;background:#fbf8f4;box-shadow:0 12px 32px rgba(59,45,41,.08);font:400 16px/1.85 Georgia,"Songti SC",serif;color:#2d2725;user-select:text}.readingReferenceText p{margin:0 0 1.15em}.readingReferenceText p:first-child::first-letter{float:left;margin:8px 5px 0 0;font-size:52px;line-height:.72}
.readingEmpty,.readingEmptyNote{display:grid;place-items:center;gap:8px;min-height:150px;color:#8f827e;text-align:center;font-size:12px}.readingEmptyNote span{max-width:230px;line-height:1.5}.readingError{margin:10px 0;padding:10px 12px;border-radius:12px;background:#f7dddd;color:#8d3e3e;font-size:11px}
.readingNoteComposer,.readingAddSheet{position:fixed;z-index:80;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));width:min(390px,calc(100vw - 24px));transform:translateX(-50%);padding:18px;border:1px solid rgba(255,255,255,.86);border-radius:25px;background:rgba(250,246,243,.97);box-shadow:0 24px 70px rgba(45,32,29,.28);backdrop-filter:blur(24px)}.readingNoteComposer blockquote{max-height:90px;overflow:auto;margin:0 28px 12px 0;font:500 13px/1.5 Georgia,serif;color:#5b4c48}.readingNoteComposer textarea{width:100%;min-height:90px;resize:none;border:0;border-radius:14px;padding:12px;background:#f3e3e2;font:400 14px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;outline:none}.readingNoteComposer>button:last-child,.readingAddSheet>button:last-child{width:100%;margin-top:10px;border:0;border-radius:999px;padding:12px;background:#211b19;color:#fff;font-weight:700}.readingComposerClose{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:22px;color:#857874}
.readingSheetBackdrop{position:fixed;z-index:70;inset:0;background:rgba(22,17,16,.24);backdrop-filter:blur(5px)}.readingAddSheet{display:grid;gap:12px}.readingAddSheet header{display:flex;justify-content:space-between;align-items:center}.readingAddSheet header strong{font:500 23px/1 Georgia,serif}.readingAddSheet header button{border:0;background:transparent;font-size:24px}.readingAddSheet label{display:grid;gap:5px;font-size:10px;font-weight:700;color:#847773}.readingAddSheet input,.readingAddSheet select{width:100%;border:1px solid rgba(73,57,52,.1);border-radius:11px;padding:10px;background:#fff;font-size:13px}
.readingShelfScreen::after{height:150px;background:linear-gradient(180deg,rgba(245,239,236,0),#f5efec 66%,#f5efec 100%)}
.readingAddBook{bottom:calc(14px + env(safe-area-inset-bottom));min-width:132px;border:1px solid rgba(255,255,255,.9);padding:14px 30px;background:rgba(255,255,255,.68);color:#2a2422;box-shadow:0 12px 30px rgba(47,34,30,.14),inset 0 1px 0 rgba(255,255,255,.95);-webkit-backdrop-filter:blur(22px) saturate(135%);backdrop-filter:blur(22px) saturate(135%)}
/* Reading v139: fixed chrome; only shelves travel through the edge fade. */
.readingShelfScreen{padding-top:env(safe-area-inset-top);padding-bottom:calc(260px + env(safe-area-inset-bottom))}
.readingShelfScreen .readingTopbar{top:calc(-1 * env(safe-area-inset-top));min-height:43px;margin:-3px -4px 10px;padding-top:0;background:linear-gradient(180deg,rgba(247,241,238,1),rgba(247,241,238,.96) 78%,rgba(247,241,238,0))}
.readingShelfScreen::after{height:142px;background:linear-gradient(180deg,rgba(245,239,236,0),rgba(245,239,236,.78) 48%,#f5efec 82%,#f5efec 100%)}
.readingAddBook{bottom:calc(3px + env(safe-area-inset-bottom))}
/* Reading v140: fixed header/footer are siblings of the only scroll container. */
.readingShelfScreen{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;padding:env(safe-area-inset-top) 0 0;overflow:hidden}
.readingShelfScreen .readingTopbar{position:relative;top:auto;z-index:20;min-height:40px;margin:-5px 14px 4px;padding:0;background:#f7f1ee;backdrop-filter:none}
.readingShelfScroller{min-height:0;overflow-x:hidden;overflow-y:auto;padding:4px 18px calc(220px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.readingShelfScreen::after{position:absolute;bottom:0;height:132px}
.readingShelfScreen .readingAddBook{position:absolute;bottom:calc(2px + env(safe-area-inset-bottom))}
.readingReferenceActions{display:flex;justify-content:flex-end;margin:-8px 2px 12px}.readingReferenceActions button{border:1px solid rgba(255,255,255,.82);border-radius:999px;padding:8px 12px;background:rgba(255,255,255,.5);color:#756763;font:650 10px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;box-shadow:0 5px 15px rgba(50,37,33,.06)}
/* Reading v144: covers sit behind the translucent acrylic front lip. */
.readingBookRail{background-image:none!important;isolation:isolate}
.readingBookRail::after{content:"";position:absolute;z-index:3;inset:0;pointer-events:none;background:url('/reading-acrylic-shelf.png') center bottom/100% auto no-repeat;mix-blend-mode:multiply}
.readingShelfGroup-echo_room .readingBookRail::after{background-image:url('/reading-acrylic-shelf-blue.png')}.readingShelfGroup-aria .readingBookRail::after{background-image:url('/reading-acrylic-shelf-sage.png')}.readingShelfGroup-recitative .readingBookRail::after{background-image:url('/reading-acrylic-shelf-lavender.png')}
.readingBookRail>button{z-index:2;padding-bottom:23px}.readingBookDropSpace{z-index:2;margin-bottom:18px}
.readingCompanionPicker{grid-template-columns:auto minmax(118px,auto);justify-content:end;gap:6px;margin:-4px 2px 10px}.readingCompanionPicker label{gap:2px;padding:5px 8px;border-radius:10px;font-size:8px}.readingCompanionPicker select{font-size:10px}.readingReferenceActions{flex-wrap:wrap;gap:5px}.readingReferenceActions button{padding:6px 9px;font-size:9px}
.readingSearch{gap:6px;padding:7px 10px;border-radius:12px}.readingSearch input{font-size:11px}.readingSearch span{font-size:12px}.readingBookHero{margin-bottom:12px}.readingBookHero p{font-size:11px}
/* Reading v145: override CasaShell's global 44px control floor. */
.readingCompanionPicker{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin:-4px 2px 8px}
.readingCompanionPicker label{display:flex;align-items:center;gap:3px;width:auto;height:28px;min-height:28px;padding:0 7px;border-radius:9px;font-size:8px;line-height:1;white-space:nowrap}
.readingCompanionPicker select{width:auto;max-width:138px;height:20px;min-height:20px;padding:0 16px 0 2px;border:0;border-radius:0;background:transparent;font-size:9px;line-height:20px}
.readingReferenceActions{gap:4px;margin:-6px 2px 9px}
.readingReferenceActions button{width:auto;height:24px;min-height:24px;padding:0 8px;border-radius:8px;box-shadow:none;font-size:8px;line-height:22px}

/* Reading v146: compact book view, explicit acrylic front lips, and paged text. */
.readingBookRail::after{display:none}
.readingAcrylicFront{position:absolute;z-index:6;inset:0;pointer-events:none;background:url('/reading-acrylic-shelf.png') center bottom/100% auto no-repeat;mix-blend-mode:multiply}
.readingShelfGroup-echo_room .readingAcrylicFront{background-image:url('/reading-acrylic-shelf-blue.png')}
.readingShelfGroup-aria .readingAcrylicFront{background-image:url('/reading-acrylic-shelf-sage.png')}
.readingShelfGroup-recitative .readingAcrylicFront{background-image:url('/reading-acrylic-shelf-lavender.png')}
.readingBookRail>button,.readingBookDropSpace{z-index:2}
.readingBookScreen{padding-right:16px;padding-left:16px}
.readingBookScreen .readingTopbar{margin-bottom:6px}
.readingBookHero{align-items:stretch;gap:12px;margin:2px 2px 8px}
.readingBookHero .readingBookCover{width:90px;flex-basis:90px;align-self:flex-start}
.readingBookMeta{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:flex-end;gap:7px;padding-bottom:3px}
.readingBookMeta>p{margin:0!important;font-size:10px!important;line-height:1.25!important;color:#857975}
.readingReferenceActions{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;gap:4px;margin:0}
.readingReferenceActions button{height:23px;min-height:23px;padding:0 7px;border-radius:7px;font-size:8px;line-height:21px}
.readingCompanionPicker{margin:0 2px 6px}
.readingCompanionPicker label{height:25px;min-height:25px;padding:0 6px}
.readingCompanionPicker select{height:18px;min-height:18px;line-height:18px}
.readingTabs{margin:0 0 7px;padding:2px}
.readingTabs button{height:28px;min-height:28px;padding:0;font-size:10px;line-height:28px}
.readingNotes{gap:10px}
.readingAnnotation{padding:11px;border-radius:16px}
.readingAnnotation blockquote{margin-bottom:8px;padding-left:10px;font-size:13px;line-height:1.45}
.readingNoteBubble{margin:5px 0;padding:8px 10px;border-radius:13px}
.readingNoteBubble small{margin-bottom:3px;font-size:8px}
.readingNoteBubble p{font-size:12px;line-height:1.42}
.readingAskClaude{margin-top:6px;padding:6px 9px}
.readingTextPane{min-height:0}
.readingRemoveText{margin:0 2px 4px auto;font-size:8px}
.readingSearch{height:31px;min-height:31px;gap:5px;margin-bottom:4px;padding:0 9px;border-radius:10px}
.readingSearch input{height:27px;min-height:27px;padding:0;font-size:10px}
.readingSelectionHint{margin:0 3px 7px;font-size:9px}
.readingReferenceText{padding:15px 14px;border-radius:7px;font-size:14px;line-height:1.58}
.readingReferenceText p{margin:0 0 .68em}
.readingReferenceText p:first-child::first-letter{margin:6px 4px 0 0;font-size:42px}
.readingLoadMore{display:block;width:auto;height:30px;min-height:30px;margin:10px auto 0;border:1px solid rgba(255,255,255,.85);border-radius:999px;padding:0 14px;background:rgba(255,255,255,.62);color:#655955;font:650 9px/28px -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}

/* Reading v147: companion controls belong to the book flow, not the far edge. */
.readingBookScreen .readingCompanionPicker{justify-content:flex-start;margin:0 2px 6px}

/* Reading v149: progress lives beside the cover; all companion controls start at the content edge. */
.readingBookScreen .readingCompanionPicker{width:100%!important;justify-content:flex-start!important;margin:0 0 6px!important;padding:0!important}
.readingBookScreen .readingCompanionPicker label{flex:0 1 auto}
.readingProgressCard{display:grid;width:100%;min-height:58px;border:1px solid rgba(255,255,255,.88);border-radius:13px;padding:8px 9px;background:rgba(255,255,255,.54);color:#352e2c;text-align:left;box-shadow:0 7px 18px rgba(56,42,38,.06)}
.readingProgressCard>span{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.readingProgressCard small{font:650 8px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;color:#8d807c;letter-spacing:.025em}.readingProgressCard strong{font:600 18px/1 Georgia,serif}
.readingProgressCard>i{display:block;height:3px;margin:6px 0 5px;border-radius:99px;background:rgba(71,57,53,.1);overflow:hidden}.readingProgressCard>i>b{display:block;height:100%;border-radius:inherit;background:#cfa5a7}
.readingProgressCard>em{font:600 8px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;color:#756965;font-style:normal}
.readingProgressCard:disabled{opacity:.6}

/* Music room v1: a local-only visual canary. No Spotify account data is read here. */
.mobileViewport:has(.appContent-music){width:100%;max-width:none}
.appContent-music{overflow:hidden;background:#eee8e5}
.musicPersistentHost{width:100%;height:100%;min-height:0;flex:1 1 100%}
.musicPersistentHost[hidden]{display:none!important}
.musicPersistentHost>.musicScreen{width:100%;max-width:none;height:100%}
.musicScreen{
  position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;overflow:hidden;
  color:#292324;background:
    radial-gradient(circle at 12% 10%,color-mix(in srgb,var(--music-palette) 30%,transparent),transparent 31%),
    radial-gradient(circle at 88% 30%,rgba(255,255,255,.9),transparent 28%),
    linear-gradient(180deg,#f4efec 0%,#eae2df 100%);
  transition:background .45s ease;
}
.musicScreen::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:url('/home-envelope-grain.svg');background-size:380px auto;mix-blend-mode:multiply;
}
.musicTopbar{
  position:relative;z-index:10;display:grid;grid-template-columns:36px 1fr 36px;align-items:center;
  min-height:58px;padding:calc(env(safe-area-inset-top) + 2px) 18px 4px;
}
.musicTopbar>div{display:grid;justify-items:center;gap:1px}
.musicTopbar strong{font:500 24px/.95 Georgia,"Times New Roman",serif;letter-spacing:-.035em}
.musicTopbar small{color:#8c7f82;font:600 8px/1.3 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.16em;text-transform:uppercase}
.musicTopbar>button{
  width:31px;min-width:31px;height:31px;min-height:31px;padding:0;border:1px solid rgba(255,255,255,.85);
  border-radius:50%;background:rgba(255,255,255,.42);color:#4c4143;font:300 23px/28px Georgia,serif;
  box-shadow:0 6px 18px rgba(63,43,49,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.musicScroller{
  position:relative;z-index:1;min-height:0;overflow-x:hidden;overflow-y:auto;padding:7px 18px calc(34px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scrollbar-width:none;
}
.musicScroller::-webkit-scrollbar{display:none}
.musicPullRefresh{
  display:grid;place-items:center;height:calc(var(--music-refresh-pull,0) * 22px);overflow:hidden;
  opacity:var(--music-refresh-pull,0);transform:translateY(calc((1 - var(--music-refresh-pull,0)) * -5px));
  color:#938488;font:650 8px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.09em;
  transition:height 180ms ease,opacity 140ms ease,transform 180ms ease;
}
.musicPullRefresh.isArmed{color:var(--music-accent)}
.musicPullRefresh.isRefreshing{height:22px;opacity:1;transform:none}
.musicSearch{
  display:grid;grid-template-columns:19px minmax(0,1fr) auto;align-items:center;gap:8px;width:min(460px,100%);
  min-height:36px;margin:0 auto 8px;padding:0 12px;border:1px solid rgba(255,255,255,.77);border-radius:13px;
  background:rgba(255,255,255,.42);box-shadow:0 10px 25px rgba(65,47,52,.06),inset 0 1px 0 rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(15px) saturate(115%);backdrop-filter:blur(15px) saturate(115%);
}
.musicSearchShell{max-height:calc(var(--music-search-pull,0) * 44px);overflow:clip;opacity:var(--music-search-pull,0);transform:translateY(calc((1 - var(--music-search-pull,0)) * -7px));pointer-events:none;transition:max-height 210ms cubic-bezier(.22,.8,.24,1),opacity 150ms ease,transform 210ms cubic-bezier(.22,.8,.24,1)}
.musicSearchShell.isPulling{transition:none}.musicSearchShell.isOpen{max-height:44px;opacity:1;transform:none;pointer-events:auto}
.musicSearch svg{width:18px;fill:none;stroke:#7d6f72;stroke-width:1.5}
.musicSearch input{width:100%;height:32px;min-height:32px;padding:0;border:0;background:transparent;outline:0;color:#332c2e;font:500 10.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.musicSearch input::placeholder{color:#95888b}
.musicSearch button{width:20px;min-width:20px;height:20px;min-height:20px;padding:0;border:0;border-radius:50%;background:rgba(74,61,65,.08);color:#827579;font-size:14px}
.musicPlayer{
  width:min(430px,calc(100% - 18px));margin:0 auto;padding:15px 16px 12px;border:1px solid rgba(255,255,255,.78);border-radius:30px;
  background:linear-gradient(150deg,rgba(255,255,255,.58),rgba(255,255,255,.27));
  box-shadow:0 25px 55px rgba(70,48,56,.12),inset 0 1px 0 rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(22px) saturate(120%);backdrop-filter:blur(22px) saturate(120%);
}
.musicArtworkStage{position:relative;width:min(52vw,202px);aspect-ratio:1;margin:0 auto 13px}
.musicVinyl{
  position:absolute;top:5%;right:-13%;width:90%;aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at center,#252125 0 2px,#141215 3px 5px,#2c282c 6px 7px);
  box-shadow:0 14px 23px rgba(34,24,29,.25);transition:transform .45s cubic-bezier(.22,.8,.2,1);
}
.musicVinyl::after{content:"";position:absolute;inset:37%;border-radius:50%;background:var(--music-palette);box-shadow:0 0 0 8px rgba(255,255,255,.12)}
.musicVinyl i{position:absolute;inset:47%;z-index:2;border-radius:50%;background:#eee5e2}
.musicArtworkStage.isPlaying .musicVinyl{animation:musicVinylSpin 5s linear infinite}
.musicArtwork{
  position:absolute;z-index:2;inset:0 11% 0 0;overflow:hidden;border-radius:9px;color:#fff;
  background:
    linear-gradient(135deg,rgba(255,255,255,.32),transparent 44%),
    radial-gradient(circle at 70% 20%,rgba(255,255,255,.35),transparent 21%),
    linear-gradient(145deg,var(--music-palette),var(--music-accent));
  box-shadow:0 18px 29px rgba(65,41,50,.22),inset 0 0 0 1px rgba(255,255,255,.38);
}
.musicArtwork::before,.musicArtwork::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.38);border-radius:50%}
.musicArtwork::before{width:68%;aspect-ratio:1;right:-25%;top:13%}.musicArtwork::after{width:42%;aspect-ratio:1;left:-18%;bottom:-9%}
.musicArtwork>span{position:absolute;top:12px;left:13px;font:700 7px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.23em}
.musicArtwork>i{position:absolute;right:15px;top:11px;font:normal 17px/1 Georgia}
.musicArtwork>b{position:absolute;left:14px;bottom:18px;font:500 21px/.92 Georgia,"Times New Roman",serif;letter-spacing:-.04em}
.musicArtwork>em{position:absolute;right:14px;bottom:14px;font:500 9px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-style:normal;letter-spacing:.15em}
.musicTrackHeading{text-align:center}
.musicTrackHeading span{color:#9a898e;font:700 7px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.17em}
.musicTrackHeading h1{margin:6px 0 3px;font:500 clamp(25px,7vw,33px)/1 Georgia,"Times New Roman",serif;letter-spacing:-.045em}
.musicTrackHeading p{margin:0;color:#7f7074;font:500 10px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.03em}
.musicProgress{margin:10px 3px 0}
.musicProgress input{
  width:100%;height:16px;margin:0;appearance:none;background:transparent;touch-action:pan-x;
}
.musicProgress input::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:linear-gradient(90deg,var(--music-accent) 0 var(--music-progress),rgba(66,51,56,.12) var(--music-progress) 100%)}
.musicProgress input::-webkit-slider-thumb{width:10px;height:10px;margin-top:-3.5px;appearance:none;border:2px solid #f7f1ef;border-radius:50%;background:var(--music-accent);box-shadow:0 2px 5px rgba(45,32,36,.2)}
.musicProgress>div{display:flex;justify-content:space-between;margin-top:-1px;color:#95878a;font:600 7px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.musicControls{display:grid;grid-template-columns:1fr 1fr 52px 1fr 1fr;align-items:center;gap:4px;margin:6px auto 0}
.musicControls button{display:grid;place-items:center;width:38px;min-width:38px;height:38px;min-height:38px;margin:auto;padding:0;border:0;background:transparent;color:#4a3e42}
.musicControls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.musicControls svg.isPrevious{transform:rotate(180deg)}
.musicControls .musicPlayButton{width:49px;min-width:49px;height:49px;min-height:49px;border-radius:50%;background:#2d2729;color:#fff;box-shadow:0 8px 17px rgba(52,38,43,.22)}
.musicControls .musicPlayButton svg{width:24px;height:24px;stroke-width:2}.musicControls .musicPlayButton svg:first-child{transform:translateX(1px)}
.musicClaudePick{
  display:grid;grid-template-columns:35px minmax(0,1fr) 20px;align-items:center;gap:10px;width:min(460px,100%);min-height:64px;
  margin:13px auto 0;padding:9px 14px;border:1px solid rgba(255,255,255,.77);border-radius:20px;background:rgba(255,255,255,.42);
  color:#3a3033;text-align:left;box-shadow:0 12px 26px rgba(62,44,50,.07),inset 0 1px 0 rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.musicClaudePick>span:first-child{display:grid;place-items:center;width:35px;height:35px;border-radius:13px;background:color-mix(in srgb,var(--music-palette) 48%,#fff);color:var(--music-accent);font-size:16px}
.musicClaudePick>span:nth-child(2){display:grid;gap:3px}.musicClaudePick small{color:#9b8c90;font:700 7px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.13em}.musicClaudePick strong{font:500 13px/1.2 Georgia,"Times New Roman",serif}.musicClaudePick>b{font:400 18px/1 Georgia}
.musicQueue{width:min(460px,100%);margin:13px auto 0;padding:4px 5px 5px;border-top:1px solid rgba(78,59,65,.08)}
.musicQueueHeader{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:54px;padding:4px 7px;border:0;background:transparent;color:#342c2e;text-align:left}
.musicQueueHeader>span{display:grid;gap:3px}.musicQueueHeader small{color:#9b8c90;font:700 7px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.16em}.musicQueueHeader strong{font:500 20px/1 Georgia,"Times New Roman",serif}
.musicQueueHeader>i{width:9px;height:9px;margin-right:6px;border-right:1.5px solid #7d6d72;border-bottom:1.5px solid #7d6d72;transform:rotate(45deg);transition:transform .2s}.musicQueueHeader>i.isOpen{transform:rotate(225deg)}
.musicQueueList{display:grid;gap:2px}.musicQueueList>button{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:55px;padding:6px 7px;border:0;border-radius:16px;background:transparent;color:#3b3235;text-align:left}.musicQueueList>button.isCurrent{background:rgba(255,255,255,.43);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.musicQueueList>button>i{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:linear-gradient(145deg,var(--track-palette),var(--track-accent));color:rgba(255,255,255,.8);font-style:normal;box-shadow:0 6px 12px rgba(56,38,45,.1)}
.musicQueueList>button>i span{font:700 8px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.13em}.musicQueueList>button>span{display:grid;gap:3px;min-width:0}.musicQueueList>button strong{overflow:hidden;font:600 12px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;text-overflow:ellipsis;white-space:nowrap}.musicQueueList>button small{overflow:hidden;color:#8c7e82;font:500 9px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;text-overflow:ellipsis;white-space:nowrap}.musicQueueList>button time{color:#94868a;font:600 8px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.musicQueueList>p{margin:12px 7px;color:#94868a;font-size:10px}
.musicConnectionPreview{display:grid;justify-items:center;gap:8px;width:min(460px,100%);margin:18px auto 0;padding:18px;border:1px dashed rgba(84,65,71,.15);border-radius:21px;color:#827478;text-align:center}
.musicConnectionPreview>span{display:flex;align-items:center;gap:6px;font:600 10px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.musicConnectionPreview>span i{width:6px;height:6px;border-radius:50%;background:#a99c9f}.musicConnectionPreview>button{width:auto;min-height:30px;padding:0 13px;border:1px solid rgba(255,255,255,.75);border-radius:999px;background:rgba(255,255,255,.43);color:#594b4f;font:650 9px/28px -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.musicConnectionPreview>small{max-width:270px;color:#a09396;font:500 8px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
@keyframes musicVinylSpin{to{transform:rotate(360deg)}}
@media (min-width:720px){.musicScroller{padding-right:28px;padding-left:28px}.musicPlayer{padding-top:20px}.musicArtworkStage{width:202px}}

/* Music room carousel: shared earbuds, cover fan, and compact transport. */
.musicListeningTogether{position:relative;display:grid;justify-items:center;width:min(430px,100%);height:48px;margin:-1px auto 1px}
.musicAvatarPair{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding-top:0;transform:translateY(-5px)}
.musicAvatarPair>span{position:relative;display:block;width:39px;height:39px;overflow:visible;border:0;border-radius:50%;background:#eee7e4;box-shadow:0 5px 11px rgba(64,45,51,.13)}
.musicAvatarPair>span+span{margin-left:-6px}
.musicAvatarPair img{display:block;width:100%;height:100%;object-fit:cover}
.musicAvatarPair img{overflow:hidden;border-radius:50%}
.musicCoverCarousel{
  --music-carousel-drag:0px;position:relative;left:50%;width:calc(100% + 84px);height:163px;margin:0 0 2px;perspective:900px;touch-action:pan-y;transform:translateX(-50%);
}
.musicCoverCarousel>button{
  position:absolute;top:10px;left:50%;display:block;width:130px;height:130px;padding:0;border:0;border-radius:9px;
  background:transparent;color:#342c2e;text-align:left;translate:var(--music-carousel-drag) 0;transform-style:preserve-3d;transition:translate .28s cubic-bezier(.2,.78,.2,1),transform .38s cubic-bezier(.2,.78,.2,1),opacity .28s,filter .28s;will-change:translate,transform;
}
.musicCoverCarousel.isDragging>button{transition:none}
.musicCoverCarousel>button.isBefore3{z-index:0;opacity:.46;filter:saturate(.58);transform:translateX(calc(-50% - 184px)) translateZ(-170px) rotateY(17deg) rotateZ(-3.5deg) scale(.66)}
.musicCoverCarousel>button.isBefore2{z-index:1;opacity:.7;filter:saturate(.72);transform:translateX(calc(-50% - 127px)) translateZ(-110px) rotateY(12deg) rotateZ(-2.5deg) scale(.78)}
.musicCoverCarousel>button.isBefore1{z-index:2;opacity:.88;filter:saturate(.88);transform:translateX(calc(-50% - 69px)) translateZ(-48px) rotateY(7deg) rotateZ(-1.5deg) scale(.9)}
.musicCoverCarousel>button.isActive{z-index:5;transform:translateX(-50%) translateZ(24px) scale(1.13)}
.musicCoverCarousel>button.isAfter1{z-index:2;opacity:.88;filter:saturate(.88);transform:translateX(calc(-50% + 69px)) translateZ(-48px) rotateY(-7deg) rotateZ(1.5deg) scale(.9)}
.musicCoverCarousel>button.isAfter2{z-index:1;opacity:.7;filter:saturate(.72);transform:translateX(calc(-50% + 127px)) translateZ(-110px) rotateY(-12deg) rotateZ(2.5deg) scale(.78)}
.musicCoverCarousel>button.isAfter3{z-index:0;opacity:.46;filter:saturate(.58);transform:translateX(calc(-50% + 184px)) translateZ(-170px) rotateY(-17deg) rotateZ(3.5deg) scale(.66)}
.musicCoverCarousel>button.isCarouselHidden{z-index:-1;visibility:hidden;opacity:0;pointer-events:none;transform:translateX(-50%) translateZ(-220px) scale(.58)}
.musicCarouselArtwork{
  position:relative;display:block;width:100%;height:100%;overflow:hidden;border:1px solid rgba(255,255,255,.62);border-radius:9px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.3),transparent 42%),
    radial-gradient(circle at 72% 24%,rgba(255,255,255,.3),transparent 20%),
    linear-gradient(145deg,var(--track-palette),var(--track-accent));
  box-shadow:0 9px 18px rgba(57,39,46,.2),inset 0 1px 0 rgba(255,255,255,.45);
}
.musicCarouselArtwork::before,.musicCarouselArtwork::after{content:"";position:absolute;border:1px solid rgba(255,255,255,.35);border-radius:50%}
.musicCarouselArtwork::before{width:72%;aspect-ratio:1;right:-26%;top:13%}.musicCarouselArtwork::after{width:45%;aspect-ratio:1;left:-19%;bottom:-13%}
.musicCarouselArtwork small{position:absolute;top:9px;left:10px;color:#fff;font:700 5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.22em}
.musicCarouselArtwork i{position:absolute;right:10px;top:8px;color:#fff;font:normal 12px/1 Georgia}
.musicCarouselArtwork b{position:absolute;right:9px;bottom:8px;color:rgba(255,255,255,.88);font:650 6px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.12em}
.musicCarouselCaption{position:absolute;z-index:3;right:1px;bottom:1px;left:1px;display:grid;height:29px;padding:5px 7px 3px;border:0;border-radius:0 0 8px 8px;background:linear-gradient(180deg,rgba(250,246,244,.78),rgba(250,246,244,.94));box-shadow:0 -4px 10px rgba(57,39,46,.045);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.musicCarouselCaption strong,.musicCarouselCaption small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.musicCarouselCaption strong{font:650 7px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.musicCarouselCaption small{color:#928589;font:500 5.5px/1.15 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.musicCoverCarousel>button:not(.isActive) .musicCarouselCaption{opacity:.72}
.musicCoverCarousel.isPlaying>button.isActive{animation:musicActiveCoverFloat 3.2s ease-in-out infinite}
.musicCoverCarousel.isPlaying>button:not(.isActive):not(.isCarouselHidden) .musicCarouselArtwork,
.musicCoverCarousel.isPlaying>button:not(.isActive):not(.isCarouselHidden) .musicCarouselCaption{
  animation:musicSideCoverFloat var(--music-side-float-duration,5.8s) ease-in-out var(--music-side-float-delay,0s) infinite;
}
.musicCoverCarousel>button.isBefore1{--music-side-float-distance:-2.4px;--music-side-float-duration:4.9s;--music-side-float-delay:-1.3s}
.musicCoverCarousel>button.isAfter1{--music-side-float-distance:-2.6px;--music-side-float-duration:5.35s;--music-side-float-delay:-3.8s}
.musicCoverCarousel>button.isBefore2{--music-side-float-distance:-1.9px;--music-side-float-duration:5.85s;--music-side-float-delay:-2.1s}
.musicCoverCarousel>button.isAfter2{--music-side-float-distance:-2.05px;--music-side-float-duration:6.25s;--music-side-float-delay:-4.6s}
.musicCoverCarousel>button.isBefore3{--music-side-float-distance:-1.4px;--music-side-float-duration:6.7s;--music-side-float-delay:-.7s}
.musicCoverCarousel>button.isAfter3{--music-side-float-distance:-1.6px;--music-side-float-duration:7.1s;--music-side-float-delay:-5.4s}
.musicCoverCarousel.isDragging>button,
.musicCoverCarousel.isDragging>button .musicCarouselArtwork,
.musicCoverCarousel.isDragging>button .musicCarouselCaption{animation-play-state:paused!important}
.musicLyricPreview{display:grid;justify-items:center;gap:2px;width:min(400px,calc(100% - 30px));min-height:49px;margin:-1px auto 5px;padding:2px 5px;border:0;background:transparent;color:#76686c;text-align:center}
.musicLyricPreview span,.musicLyricPreview strong{display:block;overflow:hidden;width:100%;font:italic 10.75px/1.28 Georgia,"Times New Roman",serif;text-overflow:ellipsis;white-space:nowrap}.musicLyricPreview strong{color:#695b60;font-size:12.75px;font-weight:500}.musicLyricPreview span{color:rgba(118,104,108,.36);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.musicCompactPlayer{
  display:grid;grid-template-columns:27px 27px 27px minmax(64px,1fr) 20px 27px 34px;align-items:center;gap:2px;
  width:min(350px,calc(100% - 34px));min-height:45px;margin:0 auto 7px;padding:4px 7px 4px 9px;
  border:1px solid rgba(255,255,255,.82);border-radius:999px;background:rgba(255,255,255,.56);
  box-shadow:0 10px 22px rgba(62,43,50,.12),inset 0 1px 0 rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px) saturate(115%);backdrop-filter:blur(18px) saturate(115%);
}
.musicCompactPlayer>button{display:grid;place-items:center;width:27px;min-width:27px;height:27px;min-height:27px;margin:0;padding:0;border:0;background:transparent;color:#4c4144}
.musicCompactPlayer svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.musicCompactPlayer svg.isPrevious{transform:rotate(180deg)}
.musicCompactPlayer .musicCompactPlay svg{stroke-width:2}.musicCompactPlayer .musicCompactPlay svg:has(path[d^="m9"]){transform:translateX(1px)}
.musicCompactProgress{position:relative;display:grid;align-items:center;min-width:0;padding:0 3px}
.musicCompactProgress input{width:100%!important;height:16px!important;min-height:16px!important;margin:0!important;padding:0!important;appearance:none!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.musicCompactProgress input::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:linear-gradient(90deg,var(--music-accent) 0 var(--music-progress),rgba(65,52,56,.12) var(--music-progress) 100%)}
.musicCompactProgress input::-webkit-slider-thumb{width:8px;height:8px;margin-top:-2.5px;appearance:none;border:1.5px solid #f8f2f0;border-radius:50%;background:var(--music-accent)}
.musicCompactProgress>span{position:absolute;right:3px;bottom:-2px;color:#a09296;font:600 5.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.musicCompactPlayer .musicQueueButton svg{width:16px;height:16px}
.musicCompactPlayer .musicRepeatButton{position:relative;width:19px;min-width:19px;height:19px;min-height:19px}
.musicCompactPlayer .musicRepeatButton>svg{width:12px;height:12px;stroke-width:1.55}
.musicCompactPlayer .musicRepeatButton.isActive{color:#8f5668}
.musicCompactPlayer .musicRepeatButton>small{position:absolute;right:-1px;bottom:-1px;font:700 5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.musicCompactPlayer .musicLoveButton{position:relative;z-index:0;isolation:isolate;display:grid!important;place-items:center;width:27px;min-width:27px;height:27px;min-height:27px;overflow:visible;padding:0!important;border:0;border-radius:50%;background:transparent;color:#8f5668;font:400 13px/1 Georgia,serif;box-shadow:none}
.musicCompactPlayer .musicLoveButton>svg{display:block;width:12px;height:12px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;transform:translate(-.55px,-.8px)}
.musicCompactPlayer .musicLoveButton.isSaved>svg{fill:currentColor;stroke-width:1.15}
.musicCompactPlayer .musicLoveButton::before,.musicCompactPlayer .musicLoveButton::after{content:"";position:absolute;z-index:-1;inset:5px;border:1px solid rgba(202,126,149,.34);border-radius:50%;pointer-events:none;animation:musicLoveRipple 2.4s ease-out infinite}
.musicCompactPlayer .musicLoveButton::after{animation-delay:-1.2s}
.musicClaudeRecommendation{
  display:block;width:min(420px,calc(100% - 18px));
  margin:7px auto 0;padding:9px 11px;border:1px solid rgba(255,255,255,.72);border-radius:15px;
  background:linear-gradient(145deg,rgba(255,255,255,.54),rgba(255,255,255,.3));
  box-shadow:0 11px 24px rgba(61,44,50,.08),inset 0 1px 0 rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(15px) saturate(112%);backdrop-filter:blur(15px) saturate(112%);
}
.musicClaudeRecommendation>img{display:none}.musicClaudeRecommendation>div{display:grid;gap:4px;min-width:0}.musicClaudeRecommendation small{color:#9b898f;font:700 6.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.15em}.musicClaudeRecommendation p{margin:0;color:#57494e;font:400 10.5px/1.45 Georgia,"Songti SC",serif}
.musicRoomChat{display:grid;gap:8px;width:min(430px,calc(100% - 8px));margin:11px auto 0}
.musicRoomChat .musicClaudeRecommendation{width:100%;margin:0}
.musicRoomMessageList{display:grid;gap:7px;max-height:139px;overflow-y:auto;padding:1px 2px 2px;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.musicRoomMessageList::-webkit-scrollbar{display:none}
.musicRoomMessage{display:flex;align-items:end;gap:6px;max-width:91%}.musicRoomMessage.is-user{justify-self:end;justify-content:flex-end}.musicRoomMessage.is-assistant{justify-self:start}
.musicRoomMessage>img{display:block;width:25px;height:25px;flex:0 0 25px;border:0;border-radius:50%;object-fit:cover;box-shadow:0 4px 9px rgba(55,39,45,.1)}
.musicRoomMessage>p{margin:0;padding:8px 10px;border:0;border-radius:13px;background:rgba(255,255,255,.48);color:#584a4f;font:400 11px/1.45 Georgia,"Songti SC",serif;box-shadow:0 6px 14px rgba(57,41,46,.055)}
.musicRoomMessage.is-assistant>p{background:rgba(255,255,255,.58)}.musicRoomMessage.is-user>p{background:rgba(239,205,214,.64);color:#493a40}
.musicRoomComposer{display:grid;grid-template-columns:minmax(0,1fr) 31px;align-items:end;gap:7px;width:100%;padding:5px 6px 5px 12px;border:1px solid rgba(255,255,255,.78);border-radius:18px;background:rgba(255,255,255,.48);box-shadow:0 8px 18px rgba(61,44,50,.065),inset 0 1px 0 rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.musicRoomComposer>div{min-height:29px;max-height:78px;overflow-y:auto;padding:7px 0 5px;outline:0;color:#4e4246;font:500 11px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;white-space:pre-wrap;word-break:break-word}
.musicRoomComposer>div:empty::before{content:attr(data-placeholder);color:#9d9094;pointer-events:none}.musicRoomComposer>button{width:31px;min-width:31px;height:31px;min-height:31px;padding:0;border:0;border-radius:50%;background:#3a3134;color:#fff;font:500 17px/29px -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;box-shadow:0 5px 11px rgba(50,35,41,.16)}.musicRoomComposer>button:disabled{opacity:.28}
.musicRoomStatus{display:block;margin:-2px 8px 0;color:#9a8c90;font:500 7.5px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;text-align:center}
.musicPlaylistShelf{width:min(430px,calc(100% - 8px));margin:18px auto 0}.musicPlaylistShelf>header{display:flex;align-items:end;justify-content:space-between;padding:0 3px 5px}.musicPlaylistShelf>header span{display:grid;gap:2px}.musicPlaylistShelf>header small{color:#9a8b8f;font:700 6px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.14em}.musicPlaylistShelf>header strong{font:500 18px/1 Georgia,"Times New Roman",serif}.musicPlaylistShelf .musicPlaylistBack{box-sizing:border-box;width:max-content;min-width:0!important;height:auto!important;min-height:0!important;margin:0;padding:0!important;border:0;background:transparent;color:#96878b;font:650 6.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.11em;text-transform:uppercase;box-shadow:none}
.musicPlaylistRail[hidden],.musicPlaylistTrackList[hidden]{display:none!important}
.musicPlaylistRail{display:flex;gap:9px;width:calc(100% + 18px);margin-left:-9px;padding:0 9px 5px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}.musicPlaylistRail::-webkit-scrollbar{display:none}.musicPlaylistRail>button{display:grid;flex:0 0 96px;gap:5px;padding:0;border:0;background:transparent;color:#43383c;text-align:left;scroll-snap-align:start}.musicPlaylistRail>button>i{position:relative;display:block;width:96px;height:96px;overflow:hidden;border:1px solid rgba(255,255,255,.65);border-radius:9px;background:radial-gradient(circle at 72% 20%,rgba(255,255,255,.36),transparent 24%),linear-gradient(145deg,var(--playlist-palette),var(--playlist-accent));box-shadow:0 8px 17px rgba(54,39,45,.12);font-style:normal}.musicPlaylistRail>button>i::after{content:"";position:absolute;width:76px;height:76px;right:-32px;bottom:-22px;border:1px solid rgba(255,255,255,.3);border-radius:50%}.musicPlaylistRail>button>i small{position:absolute;top:7px;left:7px;color:#fff;font:700 4.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.18em}.musicPlaylistRail>button>i b{position:absolute;right:7px;bottom:6px;color:rgba(255,255,255,.85);font:650 5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.musicPlaylistRail>button>span{display:grid;gap:2px;padding:0 2px}.musicPlaylistRail>button>span strong,.musicPlaylistRail>button>span small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.musicPlaylistRail>button>span strong{font:650 9px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.musicPlaylistRail>button>span small{color:#95868a;font:500 7px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.musicPlaylistTrackList{display:grid;max-height:246px;overflow-y:auto;padding:2px 1px 5px;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.musicPlaylistTrackList::-webkit-scrollbar{display:none}.musicPlaylistTrackList>button{display:grid;grid-template-columns:39px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;min-height:49px;padding:5px 7px;border:0;border-radius:13px;background:transparent;color:#43383c;text-align:left}.musicPlaylistTrackList>button.isCurrent{background:rgba(255,255,255,.43);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}.musicPlaylistTrackList>button>i{display:grid;place-items:center;width:39px;height:39px;overflow:hidden;border:1px solid rgba(255,255,255,.6);border-radius:8px;background:radial-gradient(circle at 70% 22%,rgba(255,255,255,.3),transparent 24%),linear-gradient(145deg,var(--track-palette),var(--track-accent));font-style:normal;box-shadow:0 5px 10px rgba(55,40,45,.09)}.musicPlaylistTrackList>button>i b{color:rgba(255,255,255,.84);font:650 5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.musicPlaylistTrackList>button>span{display:grid;gap:3px;min-width:0}.musicPlaylistTrackList>button strong,.musicPlaylistTrackList>button small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.musicPlaylistTrackList>button strong{font:650 10px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.musicPlaylistTrackList>button small{color:#96878b;font:500 7.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.musicPlaylistTrackList>button time{color:#9a8b8f;font:600 7px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.musicPlaybackStatus{display:block;margin:4px auto 0;color:#97898d;font:600 7.5px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;text-align:center}
.musicPlaybackStatus.isError{color:#a56873}
.musicCompactPlayer button:disabled,.musicPlaylistTrackList>button:disabled{opacity:.48}
.musicPlaylistTrackList>p{margin:12px 7px;color:#94868a;font:500 9px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;text-align:center}
.musicFloatingVinyl{
  position:fixed;z-index:64;right:14px;bottom:calc(82px + env(safe-area-inset-bottom));display:grid;place-items:center;
  width:57px;min-width:57px;height:57px;min-height:57px;padding:0;border:1px solid rgba(255,255,255,.66);border-radius:50%;
  background:rgba(25,22,25,.94);box-shadow:0 9px 22px rgba(28,20,23,.28),0 0 0 3px rgba(255,255,255,.25);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  touch-action:none;user-select:none;-webkit-user-select:none;will-change:left,top,transform;
  transition:left .22s cubic-bezier(.22,.8,.3,1),top .22s cubic-bezier(.22,.8,.3,1),opacity .18s ease,transform .18s ease;
}
.musicFloatingVinyl.isDragging{transition:none;cursor:grabbing;transform:scale(1.035)}
.musicFloatingVinyl>i{position:relative;display:block;width:49px;height:49px;border-radius:50%;background:repeating-radial-gradient(circle,#282328 0 1.5px,#121013 2px 3.5px);animation:musicVinylSpin 4s linear infinite}
.musicFloatingVinyl>i::after{content:"";position:absolute;inset:12.5px;border-radius:50%;background:linear-gradient(145deg,var(--music-float-palette),var(--music-float-accent));box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.musicFloatingVinyl>i>span{position:absolute;z-index:2;inset:12.5px;overflow:hidden;border-radius:50%;background:linear-gradient(145deg,var(--music-float-palette),var(--music-float-accent))}
.musicFloatingVinyl>i>span>img{display:block;width:100%;height:100%;object-fit:cover}
.musicFloatingVinyl>i>span::after{content:"";position:absolute;top:50%;left:50%;width:3px;height:3px;border-radius:50%;background:#f4ece9;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(30,24,27,.18)}
html[data-homeg-keyboard-open="true"] .musicFloatingVinyl{opacity:0;pointer-events:none;transform:scale(.82)}
.musicFloatingArtwork{position:fixed;z-index:64;right:14px;bottom:calc(82px + env(safe-area-inset-bottom));display:grid;place-items:center;width:39px;min-width:39px;height:39px;min-height:39px;overflow:hidden;padding:0;border:1px solid rgba(255,255,255,.72);border-radius:50%;background:linear-gradient(145deg,var(--music-float-palette),var(--music-float-accent));box-shadow:0 8px 20px rgba(35,25,29,.23),0 0 0 2px rgba(255,255,255,.2);animation:musicArtworkBreathe 3.8s ease-in-out infinite}
.musicFloatingArtwork>img,.musicFloatingArtwork>span{display:block;width:100%;height:100%;object-fit:cover}.musicFloatingArtwork>span{background:linear-gradient(145deg,var(--music-float-palette),var(--music-float-accent))}
html[data-homeg-keyboard-open="true"] .musicFloatingArtwork{opacity:0;pointer-events:none;transform:scale(.82)}
@keyframes musicArtworkBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes musicActiveCoverFloat{0%,100%{transform:translateX(-50%) translateZ(24px) translateY(0) scale(1.13)}50%{transform:translateX(-50%) translateZ(24px) translateY(-2.2px) scale(1.13)}}
@keyframes musicSideCoverFloat{0%,100%{translate:0 0}50%{translate:0 var(--music-side-float-distance,-1px)}}
@keyframes musicLoveRipple{0%{opacity:0;transform:scale(.78)}18%{opacity:.42}100%{opacity:0;transform:scale(1.72)}}

/* Spotify-connected artwork and private connection state. */
.musicCarouselArtwork>img{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover}
.musicCarouselArtwork:has(>img)::before,.musicCarouselArtwork:has(>img)::after,.musicCarouselArtwork:has(>img)>small,.musicCarouselArtwork:has(>img)>i,.musicCarouselArtwork:has(>img)>b{display:none}
.musicPlaylistRail>button>i>img{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover}
.musicPlaylistRail>button>i:has(>img)::after,.musicPlaylistRail>button>i:has(>img)>small,.musicPlaylistRail>button>i:has(>img)>b{display:none}
.musicPlaylistTrackList>button>i>img,.musicQueueList>button>i>img{width:100%;height:100%;object-fit:cover}
.musicPlaylistTrackList>button>i:has(>img)>b,.musicQueueList>button>i:has(>img)>span{display:none}
.musicConnectionPreview.isConnected{padding:11px 16px;border-style:solid}
.musicConnectionPreview.isConnected>span i{background:#1db954}
.musicConnectionPreview>a{color:#77676c;font:650 8px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;text-decoration:none}

/* Memory dossiers: a continuous document, not a grid of candidate cards. */
.memoryReviewStageName{display:block;margin:3px 0 0;color:rgba(86,71,76,.58);font:650 8px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.12em;text-transform:uppercase}
.memoryDossierEntry{margin-top:10px;background:linear-gradient(145deg,rgba(237,226,222,.66),rgba(255,255,255,.46))}
.memoryDossierScreen{min-height:100%;padding:calc(env(safe-area-inset-top) + 9px) 15px calc(88px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(247,241,238,.98),rgba(240,232,229,.96));color:#4b3e43}
.memoryDossierHeader{position:relative;display:grid;justify-items:center;padding:2px 0 13px;text-align:center}.memoryDossierHeader>button{position:absolute;left:0;top:3px;padding:5px 2px;border:0;background:transparent;color:#8e7c82;font:650 8px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.08em}.memoryDossierHeader>p{margin:0;color:#9b898f;font:700 6.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.21em}.memoryDossierHeader>h1{margin:5px 0 2px;font:500 28px/1.05 Georgia,"Songti SC",serif}.memoryDossierHeader>span{color:#9b8b90;font:400 9px/1.35 Georgia,"Songti SC",serif}
.memoryDossierTabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;width:min(430px,100%);margin:0 auto 13px;padding:4px;border:1px solid rgba(255,255,255,.7);border-radius:17px;background:rgba(255,255,255,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.memoryDossierTabs>button{display:grid;gap:2px;min-width:0;padding:8px 2px;border:0;border-radius:13px;background:transparent;color:#8d7b81}.memoryDossierTabs>button.isActive{background:rgba(255,255,255,.68);color:#4d3f44;box-shadow:0 5px 13px rgba(80,59,66,.08),inset 0 1px 0 #fff}.memoryDossierTabs strong{font:650 8px/1.05 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;white-space:nowrap}.memoryDossierTabs small{font:600 5px/1.05 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.memoryMergeVariants{display:flex;justify-content:center;gap:4px;width:max-content;max-width:100%;margin:-5px auto 13px;padding:3px;border-radius:13px;background:rgba(255,255,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}.memoryMergeVariants>button{min-width:82px;padding:6px 10px;border:0;border-radius:10px;background:transparent;color:#9a858c;font:650 8px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.memoryMergeVariants>button.isActive{background:rgba(255,255,255,.72);color:#57464c;box-shadow:0 3px 9px rgba(80,59,66,.07),inset 0 1px 0 #fff}
.memoryDossierPaper{width:min(430px,100%);margin:0 auto;padding:20px 18px 24px;border:1px solid rgba(255,255,255,.72);border-radius:23px;background:linear-gradient(155deg,rgba(255,255,255,.7),rgba(255,251,249,.46));box-shadow:0 18px 38px rgba(74,53,60,.09),inset 0 1px 0 rgba(255,255,255,.95);-webkit-backdrop-filter:blur(18px) saturate(108%);backdrop-filter:blur(18px) saturate(108%)}.memoryDossierMeta{display:flex;justify-content:space-between;gap:10px;color:#a08e94;font:650 6px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.1em;text-transform:uppercase}.memoryDossierPaper>h2{margin:12px 0 16px;font:500 22px/1.2 Georgia,"Songti SC",serif}.memoryDossierBody{display:block}.memoryDossierParagraph{display:block}.memoryDossierParagraph>p{margin:0 0 7px;color:#514349;font:400 13.5px/1.82 Georgia,"Songti SC",serif;letter-spacing:.01em;text-align:justify}.memoryDossierParagraph+ .memoryDossierParagraph>p{margin-top:11px}.memoryDossierParagraph>button{display:block;margin:-2px 0 3px auto;padding:3px 0;border:0;background:transparent;color:#a18e95;font:600 6.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.08em}.memoryDossierEvidence{display:grid;gap:6px;margin:7px 0 12px;padding:9px 10px;border-left:1px solid rgba(147,116,126,.25);background:rgba(255,255,255,.22)}.memoryDossierEvidence blockquote{display:grid;gap:4px;margin:0;color:#67575d;font:400 10px/1.55 Georgia,"Songti SC",serif;white-space:pre-wrap}.memoryDossierEvidence small{color:#a08d93;font:650 6px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.06em}.memoryDossierStatus{margin:28px auto;color:#99878d;font:400 10px/1.5 Georgia,"Songti SC",serif;text-align:center}.memoryDossierStatus.isError{color:#a86470}
.memoryDossierSections{display:grid;gap:22px}.memoryDossierSection{display:grid;gap:8px}.memoryDossierSection>header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;padding:0 0 7px;border-bottom:1px solid rgba(116,91,100,.12)}.memoryDossierSection>header h3{margin:0;font:500 18px/1.15 Georgia,"Songti SC",serif}.memoryDossierSection>header>span{color:#a38f96;font:700 6px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.1em}.memoryDossierSection>header>div{display:flex;gap:7px}.memoryDossierSection button{width:auto;min-height:0;padding:3px 0;border:0;background:transparent;color:#9e8991;font:650 6.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.05em}.memoryDossierSection input,.memoryDossierSection textarea{box-sizing:border-box;width:100%;border:1px solid rgba(144,111,122,.16);border-radius:10px;background:rgba(255,255,255,.44);color:#514349;outline:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.75)}.memoryDossierSection input{height:30px;padding:0 9px;font:500 14px/1 Georgia,"Songti SC",serif}.memoryDossierSection textarea{min-height:92px;padding:10px;resize:vertical;font:400 13px/1.72 Georgia,"Songti SC",serif}.memoryDossierParagraph.isEditable{padding:4px 0 2px}.memoryDossierParagraph.isEditable>time{display:block;margin:0 0 4px;color:#a18f95;font:650 6.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.06em}.memoryDossierParagraphActions{display:flex;justify-content:flex-end;gap:10px;margin:-2px 0 3px}.memoryDossierParagraphActions>button{margin:0}.memoryDossierSection.is-l3{padding:12px 13px;border-radius:17px;background:rgba(229,202,211,.16)}
.memoryDossierEvidenceButton{min-width:64px;min-height:28px!important;margin-top:2px!important;padding:6px 7px!important;border-radius:12px!important;background:rgba(255,255,255,.34)!important;touch-action:manipulation}.memoryDossierEvidence>p{margin:0;color:#8e7b82;font:400 9px/1.45 Georgia,"Songti SC",serif}.memoryDossierEvidence>p.isError{color:#a86470}.memoryDossierAuditSummary{display:grid;gap:10px;margin:-2px 0 17px;padding:11px 12px;border-radius:15px;background:rgba(231,218,222,.27);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}.memoryDossierAuditSummary>div{display:flex;align-items:baseline;justify-content:space-between}.memoryDossierAuditSummary strong{color:#735d66;font:700 9px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.12em}.memoryDossierAuditSummary span{color:#9e8991;font:600 7px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.memoryDossierAuditSummary dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0}.memoryDossierAuditSummary dl>div{display:grid;gap:3px;text-align:center}.memoryDossierAuditSummary dt{color:#a08d94;font:600 6px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}.memoryDossierAuditSummary dd{margin:0;color:#55464c;font:500 15px/1 Georgia,"Songti SC",serif}
.memoryDatePicker{position:relative;z-index:18;width:min(430px,100%);margin:0 auto 9px}.memoryDatePickerToggle{display:flex;align-items:center;justify-content:center;gap:7px;width:auto;min-width:0;min-height:27px;margin:0 auto;padding:0 11px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(255,255,255,.36);color:#806f75;box-shadow:inset 0 1px 0 rgba(255,255,255,.76);font:650 8px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.03em;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.memoryDatePickerToggle i{display:block;font:400 12px/1 Georgia,serif;transition:transform .18s ease}.memoryDatePicker.isOpen .memoryDatePickerToggle i{transform:rotate(180deg)}.memoryDatePickerOptions{display:flex;gap:6px;margin:6px 0 0;padding:7px;overflow-x:auto;border:1px solid rgba(255,255,255,.74);border-radius:14px;background:rgba(247,241,238,.88);box-shadow:0 10px 25px rgba(68,49,56,.1);scrollbar-width:none;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.memoryDatePickerOptions::-webkit-scrollbar{display:none}.memoryDatePickerOptions button{flex:0 0 auto;min-height:25px;padding:0 9px;border:0;border-radius:999px;background:transparent;color:#95848a;font:600 7.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;white-space:nowrap}.memoryDatePickerOptions button.isSelected{background:rgba(225,201,209,.5);color:#59484e}
.memoryReviewReconciliation{display:grid;gap:7px;margin-top:9px;padding:10px 11px;border:1px solid rgba(142,111,102,.16);border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(247,237,234,.62))}
.memoryReviewReconciliation header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.memoryReviewReconciliation header span{font:700 7px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.16em;color:#9a7770}
.memoryReviewReconciliation header b{font:650 9px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;color:#775e59;text-align:right}
.memoryReviewReconciliation p{margin:0;color:#665a58;font-size:10px;line-height:1.55}
.memoryReviewReconciliation div{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.memoryReviewReconciliation div>span{color:#9d8e8a;font-size:8px}
.memoryReviewReconciliation div i{max-width:100%;padding:4px 7px;border-radius:999px;background:rgba(164,126,118,.09);color:#745f5a;font:normal 8px/1.25 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;overflow-wrap:anywhere}
.memoryReviewReconciliation small{color:#8c7b77;font-size:8px}
.memoryReviewReconciliation em{color:#a5635b;font:600 8px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.memoryReviewReconciliation.is-conflict,.memoryReviewReconciliation.is-uncertain{border-color:rgba(177,94,84,.25);background:rgba(255,241,238,.72)}
.memoryDatePicker{position:relative;z-index:18;width:min(430px,100%);margin:0 auto 9px}
.memoryDatePickerToggle{display:flex;align-items:center;justify-content:center;gap:7px;width:auto;min-width:0;min-height:27px;margin:0 auto;padding:0 11px;border:1px solid rgba(255,255,255,.72);border-radius:999px;background:rgba(255,255,255,.36);color:#806f75;box-shadow:inset 0 1px 0 rgba(255,255,255,.76);font:650 8px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.03em;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.memoryDatePickerToggle i{display:block;font:400 12px/1 Georgia,serif;transition:transform .18s ease}
.memoryDatePicker.isOpen .memoryDatePickerToggle i{transform:rotate(180deg)}
.memoryDatePickerOptions{display:flex;gap:6px;margin:6px 0 0;padding:7px;overflow-x:auto;border:1px solid rgba(255,255,255,.74);border-radius:14px;background:rgba(247,241,238,.88);box-shadow:0 10px 25px rgba(68,49,56,.1);scrollbar-width:none;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.memoryDatePickerOptions::-webkit-scrollbar{display:none}
.memoryDatePickerOptions button{flex:0 0 auto;min-height:25px;padding:0 9px;border:0;border-radius:999px;background:transparent;color:#95848a;font:600 7.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;white-space:nowrap}
.memoryDatePickerOptions button.isSelected{background:rgba(225,201,209,.5);color:#59484e}

/* Formal memory editor clarity v309 */
.memoryArchiveField{display:grid;gap:5px}.memoryArchiveField>span{padding-left:3px;color:#927b75;font:650 7px/1 var(--font-sans);letter-spacing:.09em}.memoryArchiveField>input,.memoryArchiveField>textarea{box-sizing:border-box;width:100%;min-height:35px;padding:8px 10px;border:1px solid rgba(117,96,89,.13);border-radius:12px;background:rgba(255,255,255,.58);color:#514543;font:10px/1.55 var(--font-body);outline:0}.memoryArchiveField>textarea{min-height:74px;resize:vertical}.memoryArchiveField>textarea::placeholder{color:#ad9f9b}.memoryArchiveEmptyText{padding:9px 11px;border-radius:12px;background:rgba(191,160,149,.09);color:#907d78!important}.memoryArchiveHistoryText{white-space:pre-wrap}.memoryArchiveHistory section>details>summary{padding:7px 0;color:#8c7771;font:8px/1.2 var(--font-body)}

/* Memory room layout v286 */
.memoryRoomEntries .memoryDossierEntry{margin-top:0}
.memoryArchiveToolbar{top:0;z-index:24}
.memoryArchiveCard.isAbsorbed{border-style:dashed;background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(238,235,230,.52))}.memoryArchiveAbsorbedNote{margin:10px 0 0;padding:8px 10px;border-radius:12px;background:rgba(137,124,119,.08);color:#857672;font:8px/1.6 var(--font-body)}.memoryArchiveHistory section{margin-top:8px;padding:10px;border-radius:13px;background:rgba(255,255,255,.4)}.memoryArchiveHistory section b{color:#7a8d82;font:7px/1 var(--font-sans)}.memoryArchiveHistory section h3{margin:6px 0 3px;font:520 13px/1.3 var(--font-heading)}.memoryArchiveHistory section p{margin:0;color:#6d605d;font:9px/1.65 var(--font-body)}.memoryArchiveCard>footer{flex-wrap:wrap;gap:6px}.memoryArchiveOperation{display:grid;gap:8px;margin-top:13px;padding:12px;border-radius:17px;background:rgba(239,235,229,.76);box-shadow:inset 0 1px rgba(255,255,255,.8)}.memoryArchiveOperation>header{display:flex;align-items:flex-start;justify-content:space-between}.memoryArchiveOperation>header span,.memoryArchiveOperationPreview>span{color:#8d7069;font:650 7px/1 var(--font-sans);letter-spacing:.1em}.memoryArchiveOperation h3,.memoryArchiveOperation h4{margin:5px 0 0;font:540 15px/1.25 var(--font-heading)}.memoryArchiveOperation>header button,.memoryArchiveOperation>button,.memoryArchiveOperationPreview>button{min-height:29px;padding:6px 11px;border:0;border-radius:11px;background:rgba(81,102,92,.11);color:#5e7167;font:8px/1 var(--font-body)}.memoryArchiveOperation button.isPrimary,.memoryArchiveOperationPreview button.isPrimary{background:#52665d;color:#fff}.memoryArchiveOperation>input,.memoryArchiveOperation>textarea{box-sizing:border-box;width:100%;min-height:35px;padding:8px 10px;border:1px solid rgba(117,96,89,.13);border-radius:12px;background:rgba(255,255,255,.68);color:#514543;font:10px/1.55 var(--font-body);outline:0}.memoryArchiveOperation>textarea{min-height:70px;resize:vertical}.memoryArchiveOperationTargets{display:grid;max-height:160px;overflow:auto}.memoryArchiveOperationTargets label{display:flex;align-items:center;gap:7px;min-height:29px;color:#665957;font-size:9px}.memoryArchiveOperationPreview{display:grid;gap:8px;padding:11px;border:1px solid rgba(91,112,101,.15);border-radius:14px;background:rgba(255,255,255,.58)}.memoryArchiveOperationPreview>p,.memoryArchiveOperationPreview>small{margin:0;color:#615552;font:9px/1.65 var(--font-body);white-space:pre-wrap}.memoryArchiveOperationPreview details summary{color:#7b6c68;font:8px/1.3 var(--font-body)}.memoryArchiveOperationDiff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:7px}.memoryArchiveOperationDiff section{min-width:0;padding:8px;border-radius:10px;background:rgba(242,238,232,.76)}.memoryArchiveOperationDiff b{color:#6d8076;font:7px/1 var(--font-sans)}.memoryArchiveOperationDiff p,.memoryArchiveOperationDiff small{display:block;max-height:110px;margin:5px 0 0;overflow:auto;color:#625653;font:8px/1.55 var(--font-body);white-space:pre-wrap}
.memoryReviewQuotes,.memoryArchiveClaims,.memoryArchiveQuotes{margin-top:10px;padding:10px 11px;border-radius:13px;background:rgba(255,255,255,.42)}.memoryReviewQuotes>summary{cursor:pointer;color:#7e6d69;font:650 9px/1.35 var(--font-body)}.memoryReviewQuoteList,.memoryArchiveQuotes{display:grid;gap:7px}.memoryReviewQuoteList{margin-top:8px}.memoryReviewQuoteList blockquote,.memoryArchiveQuotes blockquote{margin:0;padding:8px 10px;border-left:2px solid rgba(162,122,114,.32);border-radius:0 10px 10px 0;background:rgba(244,238,235,.54)}.memoryReviewQuoteList blockquote span,.memoryArchiveQuotes blockquote span{color:#9b7f78;font:650 7px/1.2 var(--font-sans);letter-spacing:.04em}.memoryReviewQuoteList blockquote p,.memoryArchiveQuotes blockquote p{margin:4px 0 0;color:#625553;font:9px/1.65 var(--font-body);white-space:pre-wrap}.memoryArchiveClaims h3,.memoryArchiveQuotes h3{margin:0 0 7px;color:#856f69;font:650 8px/1.2 var(--font-sans);letter-spacing:.05em}.memoryArchiveClaims ol{display:grid;gap:5px;margin:0;padding-left:18px;color:#665a58;font:9px/1.6 var(--font-body)}.memoryArchiveDetails>p,.memoryArchiveHistory details>p{white-space:pre-wrap}.memoryArchiveHistory .memoryReviewRecallCues{margin-top:9px}

/* ── Atelier ──────────────────────────────────────────────────────────────
   CasaShell's own workroom. Deliberately not the companion's palette: white
   ground, mint, EB Garamond. Reading a diff at 1am is a different job from
   reading a letter, and the room says so before you read a word.            */

.appContent-atelier{
  padding: 0;
  background: #ffffff;
}

.atelier{
  --at-ink: #1c2e29;
  --at-second: #4a5f59;
  --at-muted: #8aa09a;
  --at-faint: #bacdc8;
  --at-hair: rgba(28, 46, 41, 0.09);
  --at-line: rgba(28, 46, 41, 0.13);
  --at-mint: #cfe4dd;
  --at-deep: #4e6f65;
  --at-dot: #799b84;
  --at-warn: #8d6c63;
  --at-warn-fill: #efe5e1;
  --at-warn-line: #d6c0b8;
  --at-cn: "Songti SC", "STSong", Georgia, serif;

  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* 没有 min-width:0，flex 子项的最小尺寸是内容尺寸 —— 工具行和确认卡里那些
     nowrap 的等宽文件路径，一条长的就能把整列顶得比屏幕宽。 */
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #ffffff;
  color: var(--at-ink);
  font-family: var(--font-atelier-ui), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.atelier button{
  min-height: 0;
  border: 0;
  background: transparent;
  color: inherit;
  /* font 是简写，会把 font-size 一并重置成继承值，而 .atelier button 的
     特异性 (0,1,1) 高过 .atelierDiscard / .atelierNewThread 这种单类
     选择器 —— 那两处的字号改了几次一次都没生效。只重置需要重置的。 */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

/* Chinese runs on Songti with its own leading — PingFang at 400 sets too dark
   next to Garamond, and the two together is the whole point of the room. */
.atelierCn{
  font-family: var(--at-cn);
  font-weight: 400;
  line-height: 1.66;
  letter-spacing: 0.006em;
}

.atelierCaps{
  font-size: 9.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--at-deep);
  font-weight: 500;
}

.atelierLbl{
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--at-faint);
  font-weight: 500;
}

.atelierNum,
.atelierPath{
  font-family: var(--font-atelier-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  /* 汉字笔画多、墨量大，同样字重下数字和路径看着更轻。补一档，整行才齐。 */
  font-weight: 500;
}

/* ── head ── */

.atelierHead{
  position: relative;
  flex-shrink: 0;
  padding: calc(env(safe-area-inset-top) + 4px) 20px 5px;
}

.atelierBack{
  min-height: 28px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: -3px;
  padding: 3px 1px;
  color: var(--at-faint);
}

.atelierTitle{
  margin: 0;
  font-family: var(--font-atelier-display), Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.004em;
  color: var(--at-ink);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.atelierMeta{
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
}

.atelierMeta .atelierCaps{ flex-grow: 1; }

.atelierDisclose{
  min-height: 30px;
  color: var(--at-faint);
  padding: 4px;
  margin: -4px;
  transition: transform 180ms ease;
}

.atelierDisclose.isOpen{ transform: rotate(180deg); }

/* ── meters ── */

.atelierMeters{
  display: flex;
  gap: 18px;
  flex-shrink: 0;
  padding: 0 20px 7px;
  border-bottom: 1px solid var(--at-hair);
}

.atelierMeter{
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.atelierMeter .atelierLbl,
.atelierMeter .atelierNum{ flex-shrink: 0; }

.atelierMeter .atelierNum{ font-size: 10px; color: var(--at-muted); }

/* 第三格没有条 —— 缓存命中是一个比例，不是一条会填满的进度。
   硬塞第三条轨道，390px 宽的屏上三条都短得读不出来。 */
.atelierMeter.isFlat{ flex: 0 0 auto; gap: 6px; }
.atelierMeter.isFlat .atelierTrack{ display: none; }

/* 额度告警：超额或被拒时，数字自己变色，不额外加图标 —— 表盘那行没空间。 */
.atelierMeter.isWarn .atelierNum{ color: var(--at-warn-ink, #8a5a4a); }
.atelierMeter.isWarn .atelierTrack > div{ background: var(--at-warn-ink, #8a5a4a); }

.atelierMeter.isUnknown{ opacity: 0.45; }

.atelierTrack{
  flex-grow: 1;
  height: 2.5px;
  border-radius: 999px;
  background: #e7f1ed;
  overflow: hidden;
}

.atelierTrack > div{
  height: 100%;
  border-radius: 999px;
  background: var(--at-second);
  transition: width 320ms ease;
}

/* ── version chain + thread list ── */

.atelierPanel{
  flex-shrink: 0;
  max-height: 68%;
  overflow-y: auto;
  padding: 10px 20px 7px;
  border-bottom: 1px solid var(--at-hair);
  -webkit-overflow-scrolling: touch;
}

.atelierPanelEmpty{
  margin: 0;
  font-family: var(--font-atelier-ui), system-ui, sans-serif;
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--at-muted);
}

.atelierChain{ margin: 0; padding: 0; list-style: none; }

.atelierChainRow{ display: flex; gap: 12px; }

.atelierChainRail{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 9px;
}

.atelierChainRail > i{
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--at-dot);
}

.atelierChainRail::after{
  content: "";
  flex-grow: 1;
  width: 1px;
  margin-top: 5px;
  background: #e7ece9;
}

.atelierChainRow.is-superseded .atelierChainRail > i{ background: #d6d9d7; }
.atelierChainRow.is-failed .atelierChainRail > i{ background: var(--at-warn); }

.atelierChainBody{ flex-grow: 1; min-width: 0; padding-bottom: 18px; }

.atelierChainHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.atelierChainTitle{
  font-family: var(--at-cn);
  font-size: 14px;
  color: var(--at-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atelierChainRow.is-superseded .atelierChainTitle{
  color: var(--at-muted);
  text-decoration: line-through;
  text-decoration-color: #d0d6d3;
}

.atelierChainRow.is-failed .atelierChainTitle{ color: var(--at-muted); }

.atelierChainTag{
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--at-mint);
  color: var(--at-deep);
  font-family: var(--font-atelier-mono), ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
}

.atelierChainRow.is-superseded .atelierChainTag{ background: #f1f2f1; color: #9aa4a0; }
.atelierChainRow.is-failed .atelierChainTag{ background: var(--at-warn-fill); color: var(--at-warn); }

.atelierChainNote{
  margin: 0 0 7px;
  font-family: var(--at-cn);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--at-muted);
}

.atelierChainFiles{
  margin: 0;
  font-family: var(--font-atelier-mono), ui-monospace, monospace;
  font-size: 10px;
  color: #b6c6c0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atelierPanelSplit{
  height: 1px;
  margin: 7px 0;
  background: var(--at-hair);
}

.atelierThreads{
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-bottom: 0;
}

/* 大约六行的高度。再多就自己滚，而不是把面板撑开、
   把模型选择推到看不见的地方。 */
/* 露出 5 行，其余滑下去。
   97px 是量出来的，不是算出来的：原来的 106px 里完整装下 6 行且不裁切，
   所以一行连间距 ≤ 17.7px —— 按字号 11.5 × 行高 1.6 + 6 推算得到的 24.4px
   跟屏幕上对不上，我没查出差在哪，但观察比推算可靠。
   5 × 17.7 ≈ 88，再加 9px 让第 6 行露出一条边：一个刚好装满的列表看起来
   就是全部了，那条边是唯一告诉你"还能往下滑"的东西。
   行高不钉死 —— 钉小了会把字裁掉，比多露半行难看得多。 */
.atelierThreadList{
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 97px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 一行 = 话题 + 删除。删除键嵌不进标题那颗按钮里（按钮不能套按钮），
   所以行本身是容器，标题那颗撑满剩下的宽度。 */
.atelierThreadRow{
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex-shrink: 0;
}

.atelierThreadRow > button:first-child{
  flex: 1;
  min-width: 0;
}

.atelierThreadRow > button:first-child > span{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 安静到几乎看不见 —— 它就在手指底下，不需要喊。 */
.atelier .atelierThreadKill{
  flex-shrink: 0;
  width: 20px;
  min-height: 0;
  padding: 2px 0;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--at-faint);
  font-family: var(--font-atelier-mono), ui-monospace, monospace;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.atelier .atelierThreadKill:hover{
  color: var(--at-warn-ink, #8a5a4a);
  background: rgba(28, 46, 41, 0.05);
}

.atelierThreads button{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 8px;
  border-radius: 7px;
  text-align: left;
}

.atelierThreads button > span{
  font-family: var(--at-cn);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--at-second);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atelierThreads button > i{
  flex-shrink: 0;
  font-family: var(--font-atelier-mono), ui-monospace, monospace;
  font-style: normal;
  font-size: 10px;
  color: var(--at-faint);
}

.atelierThreads button.isCurrent{ background: #f5faf8; }
.atelierThreads button.isCurrent > span{ color: var(--at-deep); }

.atelier .atelierNewThread{
  justify-content: flex-start !important;
  margin-top: 2px;
  font-family: var(--font-atelier-ui), system-ui, sans-serif;
  letter-spacing: 0.02em;
  font-size: 11.5px;
  color: var(--at-deep) !important;
  font-weight: 700;
}

/* ── log ── */

.atelierLog{
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* 组与组之间。组内的段落间距在 .atelierTurn 上，两者必须拉开差距，
     否则"同一段话换行"和"换人说话"看着一样。 */
  gap: 20px;
  padding: 11px 20px 5px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.atelierEmpty{
  margin: 0;
  font-family: var(--at-cn);
  font-size: 12.5px;
  line-height: 2;
  color: var(--at-muted);
}

/* Your own words: a mint outline on white. A filled bubble turned the log into
   two competing colours; the outline keeps one ground the whole way down. */
/* 平色块。描边泡泡是白底加一圈薄荷描边，那圈线在手机上细过一个像素，
   被抗锯齿糊成灰，气泡边缘看着是脏的而不是干净的。填色没有这个问题 ——
   它靠色块本身站住，不依赖一条撑不住的细线。
   青（#E9F3F4）和房间的薄荷是邻居，够近所以不像补丁，够冷所以你的话
   和它的回答分得开。 */
.atelierMine{
  align-self: flex-end;
  max-width: 80%;
  padding: 9px 13px;
  border: 0;
  border-radius: 14px;
  background: #e9f3f4;
}

.atelierMine .atelierCn{ font-size: 13.5px; line-height: 1.8; color: var(--at-ink); }

/* 一次回复里的段落、思考行、工具卡在这里面，彼此挨得近。
   之前是给用户气泡后面单加 margin-top，只补了下面没补上面 —— 气泡上 10px
   下 16px，用户一眼看出来歪的。分组之后上下都由 gap 决定，天然对称。 */
/* 时间只在隔了一刻钟或跨天时出现，居中一行，安静得像页眉。 */
.atelierStamp{
  align-self: center;
  margin-bottom: 2px;
  font-family: var(--font-atelier-mono), ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--at-faint);
}

.atelierTurn{
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.atelierSaid{
  font-size: 14px;
  color: var(--at-ink);
  white-space: pre-wrap;
  word-break: break-word;
}

/* 中文没有真正的斜体，楷体才是它的对应物 —— 把宋体拉斜是合成的伪斜体，
   在这套字里很难看。拉丁文在楷体缺字时会回落到宋体栈的斜体。 */
.atelierSaid em{
  font-family: "Kaiti SC", "STKaiti", "KaiTi", var(--at-cn);
  font-style: normal;
  color: var(--at-second);
}

/* Emphasis inside a reply: colour plus 700. Anything lighter than the body text
   reads as de-emphasis, so the colour is the stroke green, not the fill mint. */
.atelierSaid strong,
.atelierSaid b{ color: var(--at-deep); font-weight: 700; }

.atelierSaid s{
  text-decoration-line: line-through;
  text-decoration-color: #c3d2cd;
  text-decoration-thickness: 1px;
  color: var(--at-muted);
}

.atelierCode{
  font-family: var(--font-atelier-mono), ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
  letter-spacing: -0.01em;
  color: var(--at-second);
  background: #f2f7f5;
  padding: 1px 4px;
  border-radius: 4px;
  word-break: break-all;
}

.atelierCaret{
  display: inline-block;
  width: 6px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--at-ink);
  animation: atelierBlink 1.05s steps(2, start) infinite;
}

@keyframes atelierBlink{ 50% { opacity: 0; } }

.atelierThinking{
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--at-faint);
}

.atelierTools{
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 12px 13px;
  border-radius: 13px;
  background: #f5faf8;
}

.atelierToolRow{
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--at-dot);
}

.atelierToolRow.isDone{ color: var(--at-faint); }

.atelierToolDot{
  width: 11px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.atelierToolDot::before{
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--at-dot);
  animation: atelierPulse 1.4s ease-in-out infinite;
}

@keyframes atelierPulse{ 50% { opacity: 0.3; } }

.atelierToolRow > svg{ flex-shrink: 0; }

.atelierToolName{
  width: 42px;
  flex-shrink: 0;
  color: inherit;
}

.atelierToolRow.isDone .atelierToolName{ color: var(--at-faint); }

.atelierToolTarget{
  font-family: var(--font-atelier-mono), ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--at-second);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atelierToolRow.isDone .atelierToolTarget{ color: var(--at-muted); }

/* 历史里长回合折起来后的那一行。左边留出和工具图标一样的 20px，
   让它排在目标列上，读起来像最后一条工具行而不是一颗按钮。 */
.atelier .atelierToolMore{
  align-self: flex-start;
  margin-left: 20px;
  padding: 0;
  border: 0;
  min-height: 0;
  background: none;
  font-family: var(--font-atelier-mono), ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--at-muted);
  text-decoration: underline;
  text-decoration-color: var(--at-line);
  text-underline-offset: 3px;
  cursor: pointer;
}

.atelier .atelierToolMore:hover{ color: var(--at-second); }

/* 「上一轮还在跑」。脱钩之后界面最容易犯的错是安静 —— 你看到静止的对话，
   后台正在改文件。所以这条带一个还在动的点，和工具行的脉冲是同一支。 */
.atelierOrphan{
  display: flex;
  align-items: center;
  gap: 9px;
  align-self: stretch;
  margin-top: 4px;
  padding: 9px 12px;
  border-radius: 13px;
  background: var(--at-soft, #f5faf8);
  color: var(--at-second);
}

.atelierOrphanDot{
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--at-dot);
  animation: atelierPulse 1.4s ease-in-out infinite;
}

.atelier .atelierOrphanStop{
  margin-left: auto;
  padding: 0;
  border: 0;
  min-height: 0;
  background: none;
  font-family: var(--font-atelier-mono), ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--at-muted);
  text-decoration: underline;
  text-decoration-color: var(--at-line);
  text-underline-offset: 3px;
  cursor: pointer;
}

.atelier .atelierOrphanStop:hover{ color: var(--at-warn, #8a5a4a); }

/* 「另有 N 个文件不是这一轮的」。默认折叠 —— 它是提醒不是障碍：
   绝大多数时候你按 Ship it 就对了，这一行只是让你不再是瞎按。 */
.atelierForeign{ margin-top: 10px; }

.atelierForeign > summary{
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
}

.atelierForeign > summary::-webkit-details-marker{ display: none; }

.atelierForeignHint{ margin-left: auto; color: var(--at-faint); }

.atelierForeignList{
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  max-height: 132px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.atelierForeignList .atelierPath{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--at-muted);
}

/* 带走别人的活是要专门去点的，所以它长得不像主按钮。 */
.atelier .atelierForeignAll{
  margin-top: 9px;
  padding: 0;
  border: 0;
  min-height: 0;
  background: none;
  font-family: var(--font-atelier-mono), ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--at-muted);
  text-decoration: underline;
  text-decoration-color: var(--at-line);
  text-underline-offset: 3px;
  cursor: pointer;
}

.atelier .atelierForeignAll:hover{ color: var(--at-warn-ink, #8a5a4a); }

/* 孤本：线上那棵树里没有这个文件。Discard 会把它清掉且不提示，
   而 Ship 会把它救进线上 —— 危险的是丢弃、安全的是上线，跟直觉相反。 */
.atelierOnly{ color: var(--at-warn-ink, #8a5a4a); }

/* 界面崩了之后接住它的那一屏。它不能用工作台的任何变量或类 —— 那些代码
   正是坏掉的那部分。所以颜色写死，布局最简，保证它自己一定渲染得出来。 */
.atelierCrash{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 24px;
  min-height: 100%;
  background: #ffffff;
  color: #1c2e29;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.atelierCrashHead{ font-size: 17px; font-weight: 600; }

.atelierCrashWhy{
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f2f0;
  color: #8a5a4a;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  word-break: break-word;
}

.atelierCrashHint{ margin: 0; font-size: 13px; line-height: 1.7; color: #4a5f59; }

.atelierCrashActions{ display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }

.atelierCrashActions button{
  padding: 10px 16px;
  border: 1px solid #d8dedb;
  border-radius: 10px;
  background: #ffffff;
  color: #1c2e29;
  font-size: 13px;
  cursor: pointer;
}

.atelierCrashActions button.isPrimary{ border-color: #4e6f65; background: #4e6f65; color: #ffffff; }
.atelierCrashActions button:disabled{ opacity: 0.5; }

.atelierCrashNote{ margin: 0; font-size: 12.5px; line-height: 1.7; color: #4a5f59; }

/* ── something went wrong ──
   Three codings, each standing on its own: colour, icon, and the words. Colour
   alone would vanish for anyone who cannot separate it from the mint. */

.atelierTrouble{
  border: 1px solid var(--at-warn-line);
  border-radius: 16px;
  overflow: hidden;
}

.atelierTroubleHead{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 15px 12px;
  background: var(--at-warn-fill);
  color: var(--at-warn);
}

.atelierWarn{ color: var(--at-warn); }

.atelierTroubleBody{
  margin: 0;
  padding: 14px 15px;
  font-family: var(--at-cn);
  font-size: 13px;
  line-height: 1.85;
  color: var(--at-second);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── the one confirmation ── */

/* 卡片收起来之后留下的那条。它也钉在底部 —— 有改动这件事必须一直看得见。 */
/* 已经在滚动区外面了，不需要 sticky。 */
.atelierPending:empty{ display: none; }

.atelierPending{
  flex-shrink: 0;
  padding: 0 20px 8px;
}

.atelierCardBar{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
  padding: 8px 13px;
  border: 1px solid var(--at-line);
  border-radius: 13px;
  background: #ffffff;
}

.atelierDiffError{
  margin: 0;
  padding: 8px 13px;
  border: 1px solid var(--at-warn-line);
  border-radius: 13px;
  background: var(--at-warn-fill);
  font-family: var(--at-cn);
  font-size: 12px;
  color: var(--at-warn);
}

.atelierCardBarGo{
  flex-shrink: 0;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--at-deep);
}

.atelierCard{
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--at-line);
  border-radius: 16px;
  overflow: hidden;
}

.atelierCardBody{ padding: 9px 13px 8px; }

.atelierCardLead{
  margin-bottom: 9px;
  font-size: 13px;
  color: var(--at-second);
}

.atelierCardFiles{ display: flex; flex-direction: column; gap: 7px; }

.atelierCardFile{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.atelierCardFile .atelierPath{
  font-size: 11px;
  color: var(--at-second);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  text-align: left;
}

.atelierCardFile .atelierNum{ flex-shrink: 0; font-size: 10px; color: var(--at-muted); }

.atelierNew{ flex-shrink: 0; color: var(--at-deep); }

.atelier .atelierDiscard{
  min-height: 22px;
  margin-top: 8px;
  padding: 0;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--at-warn);
  opacity: 0.7;
}

.atelierCardActions{
  display: flex;
  border-top: 1px solid var(--at-hair);
}

.atelierCardActions button{
  flex-grow: 1;
  /* 上线/不上线是这一屏最重的两个按钮，点击区不能跟着一起缩。 */
  min-height: 34px;
  padding: 9px;
  text-align: center;
  font-size: 13.5px;
  color: var(--at-muted);
}

.atelierCardActions button + button{ border-left: 1px solid var(--at-hair); }

.atelierCardActions button.isPrimary{
  background: var(--at-mint);
  color: var(--at-deep);
  font-weight: 600;
}

.atelierCardActions button:disabled{ opacity: 0.5; }

.atelierBusy{
  margin: 0;
  font-family: var(--at-cn);
  font-size: 12px;
  color: var(--at-muted);
  text-align: center;
}

/* ── composer ── */

.atelierComposer{
  flex-shrink: 0;
  /* 不加 env(safe-area-inset-bottom)：iPhone 上是 34px 纯空白，比聊天那个
     .composer（padding: 8px 11px，一点安全区都没加，用了几个月）多出 26px。 */
  padding: 7px 20px 20px;
  border-top: 1px solid var(--at-hair);
  background: #ffffff;
}

/* With the keyboard up there is no home indicator to clear, but iOS keeps
   reporting the inset in an installed PWA — that stale 34px was the gap between
   the composer and the keyboard. AppShell already stamps this flag on <html>. */
:root[data-homeg-keyboard-open="true"] .atelierComposer{
  padding-bottom: 9px;
}

/* Engine settings live in the header disclosure, next to the version chain and
   the topic list. No pills and no 10px type: everything small in this room is
   letterspaced small caps, and the engine is not more important than the work. */
.atelierEngine{
  display: flex;
  gap: 20px;
  padding-bottom: 0;
}

.atelierEngineField{
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.atelierEngineField > .atelierLbl{ flex-shrink: 0; }

.atelierEngineField select{
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
  appearance: none;
  -webkit-appearance: none;
  padding: 0 14px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-atelier-ui), system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--at-deep);
}

/* The chevron is on the label so the whole field stays one tap target. */
.atelierEngineField::after{
  content: "";
  position: absolute;
  right: 2px;
  width: 7px;
  height: 7px;
  border-right: 1.4px solid var(--at-faint);
  border-bottom: 1.4px solid var(--at-faint);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.atelierEngineField select:disabled{ opacity: 0.45; }

.atelierEngineRow button{
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--at-faint);
}

.atelierEngineRow button.isCurrent{
  color: var(--at-deep);
  font-weight: 700;
}

.atelierEngineRow button:disabled{ opacity: 0.5; }

.atelierInput{
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 4.5px 6px 4.5px 13px;
  border: 1px solid var(--at-line);
  border-radius: 20px;
  transition: border-color 200ms ease;
}

.atelierInput.hasText{ border-color: rgba(78, 111, 101, 0.28); }

.atelierInput textarea{
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
  max-height: 160px;
  /* 超过上限之后在框里滚，而不是把整条输入栏撑破。 */
  overflow-y: auto;
  padding: 2px 0;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  font-family: var(--at-cn);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--at-ink);
}

.atelierInput textarea::placeholder{
  font-family: var(--at-cn);
  color: var(--at-muted);
}

.atelierInput > button{
  flex-shrink: 0;
  /* 图标小，但整个药丸区域都在手指落点附近，26 够用。 */
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-bottom: 0;
  color: #7d9a90;
}

.atelierInput > button:disabled{ color: var(--at-faint); }
.atelierInput > button.isStop{ color: var(--at-warn); }

/* ── the corner tile on Home ── */

.cornerArtwork-atelier{ width: 28px; height: 28px; }

/* Memory Review: visible, editable card associations. */
.memoryReviewAssociations{display:grid;gap:8px;margin-top:9px;padding:10px 11px;border:1px solid rgba(151,118,128,.14);border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(248,240,242,.56))}
.memoryReviewAssociations>header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.memoryReviewAssociations>header span{color:#92747e;font:700 7px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.13em}
.memoryReviewAssociations>header b{color:#7d656d;font:650 8px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.memoryReviewAssociations ol{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.memoryReviewAssociations li{display:grid;gap:4px;padding-top:7px;border-top:1px solid rgba(151,118,128,.09)}
.memoryReviewAssociations li>div{display:flex;align-items:center;gap:6px;min-width:0}
.memoryReviewAssociations li i{flex:0 0 auto;padding:3px 6px;border-radius:999px;background:rgba(151,118,128,.09);color:#7d6870;font:600 7px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-style:normal}
.memoryReviewAssociations li button,.memoryReviewAssociations li b{min-width:0;padding:0;border:0;background:transparent;color:#68545c;font:650 9px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;text-align:left;overflow-wrap:anywhere}
.memoryReviewAssociations li button{text-decoration:underline;text-decoration-color:rgba(104,84,92,.25);text-underline-offset:2px}
.memoryReviewAssociations li p{margin:0;color:#78686e;font:9px/1.5 Georgia,"Songti SC",serif}
.memoryReviewAssociationEditor{display:grid;gap:8px;padding:10px 11px;border:1px solid rgba(151,118,128,.16);border-radius:14px;background:rgba(255,255,255,.54)}
.memoryReviewAssociationEditor>header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.memoryReviewAssociationEditor>header span{color:#806b74;font:650 10px/1.25 var(--font-sans);letter-spacing:.03em}
.memoryReviewAssociationEditor>header b{color:#9a7f89;font:600 9px/1.2 var(--font-sans)}
.memoryReviewAssociationEditor ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.memoryReviewAssociationEditor li{display:grid;gap:3px;padding-top:8px;border-top:1px solid rgba(151,118,128,.1)}
.memoryReviewAssociationEditor li>div{display:grid;grid-template-columns:minmax(0,1fr) 108px;align-items:center;gap:10px;min-width:0}
.memoryReviewAssociationEditor li>div>b{min-width:0;color:#5f5257;font:600 11px/1.5 var(--font-body);overflow-wrap:anywhere}
.memoryReviewEditor .memoryReviewAssociationEditor select{width:108px;min-width:0;min-height:32px;padding:5px 24px 5px 9px;border-radius:10px;font:500 10px/1.25 var(--font-sans);resize:none}
.memoryReviewStructuralRelations{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.memoryReviewStructuralRelations li{padding:7px 0;border-bottom:1px solid rgba(151,118,128,.1)}
.memoryReviewStructuralRelations li>div{display:flex!important;grid-template-columns:none!important;align-items:center;gap:7px!important}
.memoryReviewStructuralRelations i{flex:0 0 auto;padding:3px 6px;border-radius:999px;background:rgba(151,118,128,.09);color:#7d6870;font:600 7px/1.2 var(--font-sans);font-style:normal}
.memoryReviewStructuralRelations button{min-width:0;padding:0;border:0;background:transparent;color:#68545c;font:650 9px/1.4 var(--font-body);text-align:left;text-decoration:underline;text-decoration-color:rgba(104,84,92,.25);text-underline-offset:2px;overflow-wrap:anywhere}
.memoryReviewRelationHint{margin:0;color:#8d7b82;font:8px/1.5 var(--font-body)}
.memoryReviewAssociationEditor .isDanger{
  justify-self:end;min-width:0;min-height:0;padding:4px 1px;border:0;border-radius:0;
  background:transparent;color:#a06f7b;font:550 9px/1.2 var(--font-sans);box-shadow:none;
}
.memoryReviewAssociationEditor .isDanger:hover{color:#8d5362;text-decoration:underline;text-underline-offset:2px}
@media(max-width:420px){
  .memoryReviewAssociationEditor li>div{grid-template-columns:minmax(0,1fr) 96px;gap:8px}
  .memoryReviewEditor .memoryReviewAssociationEditor select{width:96px;padding-right:20px}
}
.memoryReviewReferenceNote{margin:12px 0 0;padding:8px 10px;border-radius:12px;background:rgba(115,103,98,.07);color:#8d7e79;font:8px/1.5 var(--font-body);text-align:center}
.memoryReviewAuditIssues{display:grid;gap:8px;margin-top:9px;padding:10px 11px;border:1px solid rgba(132,112,143,.15);border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(244,239,247,.58))}
.memoryReviewAuditIssues header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.memoryReviewAuditIssues header span{font:700 8px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.08em;color:#89768f}
.memoryReviewAuditIssues header b{font:650 9px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;color:#725f78}
.memoryReviewAuditIssues ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.memoryReviewAuditIssues li{display:grid;gap:4px;padding-top:8px;border-top:1px solid rgba(132,112,143,.1)}
.memoryReviewAuditIssues li>div{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.memoryReviewAuditIssues li b,.memoryReviewAuditIssues li i{padding:3px 6px;border-radius:999px;background:rgba(132,112,143,.08);color:#76657c;font:600 8px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.memoryReviewAuditIssues li i{font-style:normal;font-weight:500}
.memoryReviewAuditIssues li p{margin:0;color:#655b68;font-size:11px;line-height:1.55}
.memoryReviewAuditIssues li small{color:#96899a;font-size:9px}
.memoryReviewBackfill{display:grid;gap:10px;margin:12px 0;padding:13px;border:1px solid rgba(159,122,137,.16);border-radius:17px;background:linear-gradient(145deg,rgba(255,252,253,.9),rgba(248,239,242,.62))}
.memoryReviewBackfill>header{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.memoryReviewBackfill>header p{margin:0;color:#a07e89;font:700 8px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;letter-spacing:.08em}.memoryReviewBackfill>header h3{margin:3px 0 0;color:#665159;font-size:15px}.memoryReviewBackfill>header>b{color:#8e727c;font-size:9px}
.memoryReviewBackfillList{display:grid;gap:8px}.memoryReviewBackfillList>article{display:grid;gap:6px;padding:11px;border:1px solid rgba(159,122,137,.12);border-radius:13px;background:rgba(255,255,255,.62)}.memoryReviewBackfillList>article.is-accepted{border-color:rgba(113,151,127,.2);background:rgba(240,249,243,.58)}.memoryReviewBackfillList>article.is-rejected{opacity:.72}.memoryReviewBackfillList h4,.memoryReviewBackfillList p{margin:0}.memoryReviewBackfillList h4{color:#604e54;font-size:12px}.memoryReviewBackfillList p{color:#75636a;font-size:10px;line-height:1.55}.memoryReviewBackfillTarget{font-weight:650;color:#876b75!important}
.memoryReviewBackfillMeta,.memoryReviewBackfillActions,.memoryReviewBackfillSaved{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.memoryReviewBackfillMeta i,.memoryReviewBackfillMeta b,.memoryReviewBackfillMeta span{padding:3px 6px;border-radius:999px;background:rgba(159,122,137,.09);color:#806872;font:600 8px/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-style:normal}.memoryReviewBackfillActions button{padding:6px 10px;border:0;border-radius:999px;background:rgba(193,145,158,.16);color:#765a64;font-size:9px}.memoryReviewBackfillActions button+button{background:rgba(139,126,132,.1)}.memoryReviewBackfillSaved strong{color:#67806f;font-size:9px}.memoryReviewBackfillSaved span{color:#83727a;font-size:9px}
/* Memory Review v413: one-card audit, complete card body, per-issue decisions. */
.memoryReviewCardPager {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr);
  align-items: center;
  gap: 10px;
  margin: 14px 0;
}

.memoryReviewCardPager.isBottom { margin-top: 18px; }

.memoryReviewCardPager span {
  color: rgba(67, 53, 61, .58);
  font-size: 9px;
  text-align: center;
  white-space: nowrap;
}

.memoryReviewCardPager button {
  min-height: 32px;
  border: 1px solid rgba(128, 91, 106, .18);
  border-radius: 999px;
  background: rgba(255, 253, 253, .94);
  color: #755e68;
  font: 650 9px/1 var(--font-sans);
}

.memoryReviewCardPager button:last-child {
  background: #a96980;
  border-color: #a96980;
  color: #fff;
}

.memoryReviewCardPager button:disabled { opacity: .34; }

.memoryReviewFullCard {
  margin-top: 16px;
  border-top: 1px solid rgba(128, 91, 106, .16);
  padding-top: 13px;
}

.memoryReviewFullCard > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  color: #765f69;
  font: 650 9px/1.35 var(--font-body);
}

.memoryReviewFullCard > summary::-webkit-details-marker { display: none; }
.memoryReviewFullCard > summary::after { content: "Open"; color: #a96980; font: 600 8px/1 var(--font-sans); }
.memoryReviewFullCard[open] > summary::after { content: "Close"; }

.memoryReviewFullCard > section {
  margin-top: 12px;
  padding: 13px;
  border-radius: 15px;
  background: rgba(247, 240, 243, .74);
}

.memoryReviewFullCard > section > header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
}

.memoryReviewFullCard > section > header b { color: #715d66; font: 700 7px/1.2 var(--font-sans); letter-spacing: .07em; }
.memoryReviewFullCard > section > header span { color: rgba(67, 53, 61, .52); font: 550 8px/1.2 var(--font-sans); }
.memoryReviewFullCard > section > p { margin: 0; color:#645755; font: 10px/1.72 var(--font-body); white-space: pre-wrap; }
.memoryReviewFullCard > section > ol { margin: 0; padding-left: 18px; color:#645755; font: 9px/1.65 var(--font-body); }

.memoryReviewAuditIssues > ol > li.is-mechanical { background: rgba(234, 243, 237, .72); }
.memoryReviewAuditIssues > ol > li.is-reference { background: rgba(250, 241, 227, .76); }
.memoryReviewAuditIssues > ol > li.is-accepted { box-shadow: inset 3px 0 #83a18f; }
.memoryReviewAuditIssues > ol > li.is-declined { box-shadow: inset 3px 0 #bf7c91; }

.memoryReviewIssueActions {
  display: flex;
  gap: 9px;
  margin-top: 12px;
}

.memoryReviewIssueActions button,
.memoryReviewIssueComment button {
  min-width: 76px;
  min-height: 30px;
  border: 1px solid rgba(128, 91, 106, .2);
  border-radius: 999px;
  background: #fff;
  color: #6f5b64;
  font: 650 9px/1 var(--font-sans);
}

.memoryReviewIssueActions button:first-child,
.memoryReviewIssueComment button.isPrimary {
  background: #a96980;
  border-color: #a96980;
  color: #fff;
}

.memoryReviewIssueActions button.isSelected { box-shadow: 0 0 0 3px rgba(190, 126, 151, .22); }

.memoryReviewIssueComment { margin-top: 11px; }
.memoryReviewIssueComment textarea {
  width: 100%;
  min-height: 82px;
  padding: 11px 12px;
  border: 1px solid rgba(128, 91, 106, .2);
  border-radius: 13px;
  background: #fff;
  color: #493d43;
  font: 10px/1.55 var(--font-body);
  resize: vertical;
}
.memoryReviewIssueComment > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.memoryReviewIssueSaved { display: block; margin-top: 9px; color: rgba(67, 53, 61, .6); }
.memoryReviewSystemHandled {
  display: inline-flex;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(106, 143, 121, .12);
  color: #64816f;
  font: 650 8px/1.2 var(--font-sans);
}

@media (max-width: 560px) {
  .memoryReviewCardPager { grid-template-columns: 1fr auto 1fr; gap: 7px; }
  .memoryReviewCardPager button { min-width: 0; padding-inline: 9px; }
  .memoryReviewIssueActions button { flex: 1; min-width: 0; }
}

/* Memory Review v416: proposal-aware, evidence-backed audit decisions. */
.memoryReviewAuditIssues > ol > li { padding: 0; overflow: hidden; border: 1px solid rgba(132,112,143,.1); border-radius: 14px; background: rgba(255,255,255,.62); }
.memoryReviewAuditIssues > ol > li > details > summary { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;padding:11px 12px;list-style:none;cursor:pointer; }
.memoryReviewAuditIssues > ol > li > details > summary::-webkit-details-marker{display:none}
.memoryReviewAuditIssues > ol > li > details > summary span{color:#5f535f;font:650 10px/1.48 var(--font-body);letter-spacing:0}
.memoryReviewAuditIssues > ol > li > details > summary i{padding:4px 7px;border-radius:999px;background:rgba(132,112,143,.08);color:#806f86;font:600 7px/1.2 var(--font-sans);font-style:normal;white-space:nowrap}
.memoryReviewAuditIssues > ol > li > details > summary em{grid-column:1/-1;color:#938890;font:500 8px/1.35 var(--font-sans);font-style:normal}
.memoryReviewIssueBody{display:grid;gap:10px;padding:0 12px 12px;border-top:1px solid rgba(132,112,143,.08)}
.memoryReviewIssueBody>p{margin:10px 0 0!important}
.memoryReviewIssueField{margin-top:10px;color:#927b87!important;font:650 7px/1.2 var(--font-sans)!important;letter-spacing:.06em;overflow-wrap:anywhere}
.memoryReviewIssueEvidence,.memoryReviewIssueDiff,.memoryReviewSplitDrafts,.memoryReviewTargets,.memoryReviewRevisionPreview{display:grid;gap:7px;padding:10px;border-radius:12px;background:rgba(248,243,245,.78)}
.memoryReviewIssueEvidence>b,.memoryReviewSplitDrafts>b,.memoryReviewTargets>b,.memoryReviewRevisionPreview>b{color:#8a707c;font:700 7px/1.2 var(--font-sans);letter-spacing:.08em}
.memoryReviewIssueEvidence blockquote{margin:0;padding:8px 9px;border-left:2px solid rgba(169,105,128,.35);background:#fff;border-radius:0 9px 9px 0}
.memoryReviewIssueEvidence blockquote span{color:#9b8e94;font:600 7px/1.2 var(--font-sans)}
.memoryReviewIssueEvidence blockquote p{margin:4px 0 0!important;color:#5f5459!important;font:9px/1.55 var(--font-body)!important;white-space:pre-wrap}
.memoryReviewIssueDiff{grid-template-columns:1fr 1fr;align-items:start}
.memoryReviewIssueDiff>div{display:grid;gap:5px;min-width:0;padding:9px;border-radius:10px;background:#fff}
.memoryReviewIssueDiff b{color:#96828a;font:700 7px/1.2 var(--font-sans);letter-spacing:.07em}
.memoryReviewIssueDiff del,.memoryReviewIssueDiff ins{color:#65575d;font:9px/1.6 var(--font-body);white-space:pre-wrap;overflow-wrap:anywhere;text-decoration-thickness:1px}
.memoryReviewIssueDiff del{background:rgba(191,124,145,.08);text-decoration-color:#b9788b}.memoryReviewIssueDiff ins{background:rgba(110,151,126,.1);text-decoration:none}
.memoryReviewSplitDrafts article{padding:10px;border:1px solid rgba(132,112,143,.1);border-radius:11px;background:#fff}.memoryReviewSplitDrafts article span{color:#a18390;font:650 7px/1.2 var(--font-sans)}.memoryReviewSplitDrafts article h5{margin:4px 0;color:#604f57;font:650 10px/1.4 var(--font-body)}.memoryReviewSplitDrafts article p{margin:0!important;font-size:9px!important}.memoryReviewSplitDrafts article small{font-size:7px!important}
.memoryReviewTargets button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border:1px solid rgba(169,105,128,.16);border-radius:10px;background:#fff;color:#65525b;font:650 9px/1.35 var(--font-body);text-align:left}.memoryReviewTargets button span{flex:0 0 auto;color:#a96980;font:600 7px/1 var(--font-sans)}
.memoryReviewAssociationTarget{display:grid;gap:7px;padding:10px;border-radius:12px;background:rgba(248,243,245,.78)}
.memoryReviewAssociationTarget>b{color:#8a707c;font:700 7px/1.2 var(--font-sans);letter-spacing:.08em}
.memoryReviewAssociationTarget button,.memoryReviewAssociationTarget .isUnresolved{display:flex;align-items:center;justify-content:space-between;gap:9px;width:100%;padding:9px 10px;border:1px solid rgba(169,105,128,.16);border-radius:10px;background:#fff;color:#65525b;text-align:left}
.memoryReviewAssociationTarget button>span,.memoryReviewAssociationTarget .isUnresolved>span{display:grid;gap:2px;min-width:0}
.memoryReviewAssociationTarget strong{font:650 9px/1.4 var(--font-body);overflow-wrap:anywhere;white-space:pre-wrap}
.memoryReviewAssociationTarget small{color:#98878d;font:500 7px/1.35 var(--font-sans)}
.memoryReviewAssociationTarget i{flex:0 0 auto;color:#a96980;font:600 7px/1 var(--font-sans);font-style:normal}
.memoryReviewAssociationTarget .isUnresolved{border-style:dashed;background:rgba(255,251,252,.72)}
.memoryReviewAssociationTarget>p{margin:0!important;color:#7d6d73!important;font:9px/1.55 var(--font-body)!important}
.memoryReviewRevisionPreview pre{max-height:240px;margin:0;overflow:auto;color:#65575d;font:8px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
.memoryReviewProposalNote{padding:8px 9px;border-radius:10px;background:rgba(255,255,255,.7)}
.memoryReviewIssueActions{flex-wrap:wrap}.memoryReviewIssueActions button{min-width:0;padding-inline:11px;font-size:8px}
.memoryReviewAuditEditActions{justify-content:flex-end}.memoryReviewAuditEditActions button{min-width:96px}
@media(max-width:560px){.memoryReviewIssueDiff{grid-template-columns:1fr}.memoryReviewIssueActions button{flex:1 1 calc(50% - 6px)}}

.memoryReviewBoundaryComparison{display:grid;gap:12px;margin-top:2px;padding:12px;border:1px solid rgba(169,105,128,.14);border-radius:15px;background:rgba(253,250,251,.94)}
.memoryReviewBoundaryComparison>header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.memoryReviewBoundaryComparison>header b{color:#765f69;font:700 8px/1.25 var(--font-sans);letter-spacing:.07em}.memoryReviewBoundaryComparison>header span{color:#9b8e94;font:7px/1.3 var(--font-sans)}
.memoryReviewBoundaryColumns{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.memoryReviewBoundaryColumn{display:grid;gap:8px;min-width:0}.memoryReviewBoundaryColumn>header{display:flex;justify-content:space-between;align-items:center;padding:0 2px}.memoryReviewBoundaryColumn>header b{color:#7f6e76;font:700 8px/1.3 var(--font-sans)}.memoryReviewBoundaryColumn>header span{color:#a3949a;font:7px/1.2 var(--font-sans)}
.memoryReviewBoundaryColumn>article{padding:10px;border-radius:12px;border:1px solid rgba(132,112,143,.1);background:#fff}.memoryReviewBoundaryColumn.is-suggested>article{border-color:rgba(102,145,117,.2);background:rgba(247,252,248,.9)}
.memoryReviewBoundaryGroupTitle{display:flex;align-items:baseline;gap:7px}.memoryReviewBoundaryGroupTitle>span{flex:0 0 auto;color:#a18a94;font:650 7px/1.2 var(--font-sans)}.memoryReviewBoundaryGroupTitle h5{margin:0;color:#584c51;font:650 10px/1.45 var(--font-body)}
.memoryReviewBoundaryReason{margin:5px 0 0!important;color:#897a80!important;font:8px/1.5 var(--font-body)!important}
.memoryReviewBoundaryFragments{display:grid;gap:5px;margin-top:8px}.memoryReviewBoundaryFragments details{border-top:1px solid rgba(132,112,143,.08);padding-top:6px}.memoryReviewBoundaryFragments summary{display:grid;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:5px;cursor:pointer;list-style:none}.memoryReviewBoundaryFragments summary::-webkit-details-marker{display:none}.memoryReviewBoundaryFragments summary>span{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:rgba(169,105,128,.09);color:#987786;font:650 7px/1 var(--font-sans)}.memoryReviewBoundaryFragments summary>strong{color:#66575e;font:600 8px/1.45 var(--font-body)}.memoryReviewBoundaryFragments summary>i{color:#9b8e94;font:6.5px/1.25 var(--font-sans);font-style:normal;text-align:right}.memoryReviewBoundaryFragments details>p{margin:6px 0 0 21px!important;color:#74666c!important;font:8px/1.55 var(--font-body)!important}.memoryReviewBoundaryFragments details>small{display:block;margin:6px 0 0 21px;color:#a09398;font:7px/1.4 var(--font-body)}
.memoryReviewBoundaryEvidence{display:grid;gap:5px;margin:7px 0 0 21px}.memoryReviewBoundaryEvidence blockquote{margin:0;padding:7px 8px;border-left:2px solid rgba(169,105,128,.28);background:rgba(250,247,248,.9);border-radius:0 8px 8px 0}.memoryReviewBoundaryEvidence blockquote span{color:#9c8d93;font:600 6.5px/1.2 var(--font-sans)}.memoryReviewBoundaryEvidence blockquote p{margin:3px 0 0!important;color:#62565b!important;font:8px/1.5 var(--font-body)!important;white-space:pre-wrap}
.memoryReviewBoundaryDropped{display:grid;gap:5px;padding:9px 10px;border-radius:11px;background:rgba(191,124,145,.07);border:1px solid rgba(191,124,145,.12)}.memoryReviewBoundaryDropped>b{color:#9b6475;font:700 7px/1.3 var(--font-sans)}.memoryReviewBoundaryDropped details{color:#745e67;font:8px/1.45 var(--font-body)}.memoryReviewBoundaryDropped details p{margin:5px 0 0!important;font-size:8px!important}
.memoryReviewBoundaryHint{margin:0!important;color:#8f8187!important;font:7px/1.5 var(--font-body)!important}.memoryReviewBoundaryActions button{font-size:7.5px}
@media(max-width:720px){.memoryReviewBoundaryColumns{grid-template-columns:1fr}.memoryReviewBoundaryFragments summary{grid-template-columns:16px minmax(0,1fr)}.memoryReviewBoundaryFragments summary>i{grid-column:2;text-align:left}}

/* Memory Review v418: one visual layer, compact diffs, no app dock. */
body:has(.memoryReviewScreen) .bottomNavigation{display:none}
.memoryReviewScreen{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.memoryReviewCard.isAuditCard{padding:8px 0 0;border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.memoryReviewCard.isAuditCard::before{display:none}
.memoryReviewCard.isAuditCard .memoryReviewCardMeta,.memoryReviewCard.isAuditCard>h3,.memoryReviewCard.isAuditCard>.memoryReviewSummary,.memoryReviewCard.isAuditCard>.memoryReviewFullCard,.memoryReviewCard.isAuditCard>.memoryReviewAuditEditActions,.memoryReviewCard.isAuditCard>.memoryReviewReferenceNote{margin-left:3px;margin-right:3px}
.memoryReviewCard.isAuditCard .memoryReviewAuditIssues{margin:15px 0 0;padding:0;border:0;border-radius:0;background:transparent}
.memoryReviewCard.isAuditCard .memoryReviewAuditIssues>header{padding:0 3px}
.memoryReviewCard.isAuditCard .memoryReviewAuditIssues>ol{gap:10px}
.memoryReviewCard.isAuditCard .memoryReviewAuditIssues>ol>li{border-color:rgba(132,112,143,.15);background:rgba(255,255,255,.76);box-shadow:0 7px 18px rgba(76,58,69,.04)}
.memoryReviewInlineDiff{display:grid;gap:7px;padding:11px;border-radius:12px;background:#fff}
.memoryReviewInlineDiff>b{color:#927984;font:700 7px/1.2 var(--font-sans);letter-spacing:.08em}
.memoryReviewInlineDiff>p{margin:0!important;color:#62555b!important;font:10px/1.72 var(--font-body)!important;white-space:pre-wrap;overflow-wrap:anywhere}
.memoryReviewInlineDiff del,.memoryReviewInlineDiff ins{padding:2px 3px;border-radius:4px;text-decoration-thickness:1px}
.memoryReviewInlineDiff del{background:rgba(191,124,145,.13);color:#916272;text-decoration-color:#ae6d82}
.memoryReviewInlineDiff ins{margin-left:3px;background:rgba(110,151,126,.15);color:#54715f;text-decoration:none}
.memoryReviewStructuredDiff{display:grid;gap:8px;padding:10px;border-radius:12px;background:rgba(248,243,245,.78)}
.memoryReviewStructuredDiff>b{color:#927984;font:700 7px/1.2 var(--font-sans);letter-spacing:.08em}
.memoryReviewStructuredDiff>.memoryReviewInlineDiff,.memoryReviewStructuredDiff>.memoryReviewIssueDiff{margin:0;padding:9px;background:#fff}
.memoryReviewStructuredDiff article>small{grid-column:1/-1;color:#826e77;font:700 8px/1.35 var(--font-sans);letter-spacing:.02em}
.memoryDiscardReview{margin:0 clamp(18px,4vw,58px) 22px;border:1px solid rgba(155,119,135,.18);border-radius:18px;background:rgba(255,252,253,.82);overflow:hidden}.memoryDiscardReview>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;cursor:pointer;list-style:none;color:#75666d}.memoryDiscardReview>summary::-webkit-details-marker{display:none}.memoryDiscardReview>summary span{font-size:14px;font-weight:650}.memoryDiscardReview>summary small{font-size:12px;color:#9b8d94}.memoryDiscardReview.needsAttention{border-color:rgba(174,105,133,.3);background:rgba(255,248,251,.92)}.memoryDiscardReview.needsAttention>summary span{color:#9b5d77}.memoryDiscardReviewList{display:grid;gap:10px;padding:0 14px 14px}.memoryDiscardReviewList article{padding:14px 16px;border-radius:14px;background:#fff;border:1px solid rgba(155,119,135,.13)}.memoryDiscardReviewList article i{font-style:normal;font-size:11px;color:#a0647d}.memoryDiscardReviewList article h3{margin:5px 0 6px;font-size:16px;line-height:1.35;color:#4f4549}.memoryDiscardReviewList article>p{margin:0 0 10px;font-size:13px;line-height:1.65;color:#756a70}.memoryDiscardReviewList dl{display:grid;gap:7px;margin:0}.memoryDiscardReviewList dl div{display:grid;grid-template-columns:76px 1fr;gap:8px;font-size:12px;line-height:1.55}.memoryDiscardReviewList dt{color:#9b8d94}.memoryDiscardReviewList dd{margin:0;color:#62575c}@media(max-width:640px){.memoryDiscardReview>summary{align-items:flex-start;flex-direction:column;gap:3px}.memoryDiscardReviewList dl div{grid-template-columns:1fr;gap:1px}}
.memoryDiscardReviewList article.isDecided{opacity:.76}.memoryDiscardDecisionActions,.memoryDiscardDecisionSaved{display:flex;align-items:center;gap:8px;margin-top:12px}.memoryDiscardDecisionActions button,.memoryDiscardDecisionSaved button{border:1px solid rgba(159,112,132,.25);border-radius:999px;background:#fff;padding:7px 12px;color:#755f69;font-size:12px;cursor:pointer}.memoryDiscardDecisionActions button:last-child{background:#a8768b;color:#fff;border-color:#a8768b}.memoryDiscardDecisionSaved{justify-content:space-between;color:#8b7d84;font-size:12px}.memoryDiscardDecisionSaved button{padding:5px 10px}.memoryDiscardDecisionActions button:disabled{opacity:.45;cursor:wait}
.memoryRestoreQueue{margin:0 clamp(18px,4vw,58px) 22px;padding:17px;border:1px solid rgba(166,116,137,.2);border-radius:20px;background:linear-gradient(145deg,rgba(255,249,252,.96),rgba(250,246,248,.9));box-shadow:0 8px 24px rgba(101,75,86,.055)}.memoryRestoreQueue>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.memoryRestoreQueue>header p{margin:0 0 3px;color:#aa7189;font-size:9px;letter-spacing:.14em}.memoryRestoreQueue>header h3{margin:0;color:#51464b;font-size:17px}.memoryRestoreQueue>header b{color:#8f6a79;font-size:12px;font-weight:650}.memoryRestoreQueueIntro{margin:10px 0 13px;color:#81747a;font-size:12px;line-height:1.65}.memoryRestoreQueueList{display:grid;gap:9px}.memoryRestoreQueueList article{padding:13px 14px;border:1px solid rgba(159,112,132,.13);border-radius:14px;background:rgba(255,255,255,.8)}.memoryRestoreQueueMeta{display:flex;align-items:center;justify-content:space-between;gap:10px}.memoryRestoreQueueMeta i{color:#9f667e;font-size:11px;font-style:normal}.memoryRestoreQueueMeta button{border:1px solid rgba(159,112,132,.22);border-radius:999px;background:#fff;padding:5px 10px;color:#79646d;font-size:11px;cursor:pointer}.memoryRestoreQueueList h4{margin:6px 0 5px;color:#51474b;font-size:15px;line-height:1.4}.memoryRestoreQueueList article>p{margin:0 0 7px;color:#756a70;font-size:12px;line-height:1.6}.memoryRestoreQueueList article>small{color:#9b8e94;font-size:11px;line-height:1.55}@media(max-width:640px){.memoryRestoreQueue>header{align-items:flex-start;flex-direction:column;gap:4px}}
/* Audit side queues: collapsed until opened, with compact card copy. */
.memoryRestoreQueue>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
.memoryRestoreQueue>summary::-webkit-details-marker{display:none}
.memoryRestoreQueueHeading{display:grid;gap:3px;margin-right:auto}
.memoryRestoreQueueHeading small{color:#aa7189;font:9px/1.2 var(--font-sans);letter-spacing:.14em}
.memoryRestoreQueueHeading strong{color:#51464b;font:650 15px/1.3 var(--font-body)}
.memoryRestoreQueue>summary>b{color:#8f6a79;font:650 11px/1.3 var(--font-sans)}
.memoryRestoreQueue>summary>i{color:#9b7b89;font:normal 17px/1 var(--font-sans);transition:transform .18s ease}
.memoryRestoreQueue[open]>summary>i{transform:rotate(180deg)}
.memoryRestoreQueue:not([open])>.memoryRestoreQueueIntro{display:none}
.memoryRestoreQueue:not([open])>.memoryRestoreQueueList{display:none}
.memoryDiscardReview:not([open])>.memoryDiscardReviewList{display:none}
.memoryDiscardReview>summary{position:relative;padding-right:38px}
.memoryDiscardReview>summary::after{content:"⌄";position:absolute;right:17px;top:50%;transform:translateY(-50%);color:#9b7b89;font:normal 17px/1 var(--font-sans)}
.memoryDiscardReview[open]>summary::after{transform:translateY(-50%) rotate(180deg)}
.memoryRestoreQueueList h4,.memoryDiscardReviewList article h3{font-size:13px;line-height:1.4}
.memoryRestoreQueueList article>p,.memoryDiscardReviewList article>p{font-size:11px;line-height:1.6}
.memoryRestoreQueueList article{padding:11px 12px}
.memoryDiscardReviewList article{padding:12px 14px}
.memoryArchiveLegacySources{margin-top:18px;padding-top:14px;border-top:1px solid rgba(143,96,116,.16)}.memoryArchiveLegacySources>h3{margin:0 0 10px;color:#8b6675;font:650 9px/1.3 var(--font-sans)}.memoryArchiveLegacySources>details{margin-top:8px;padding:10px 12px;border-radius:14px;background:rgba(250,245,247,.82)}.memoryArchiveLegacySources summary{cursor:pointer;color:#765965;font:9px/1.4 var(--font-body)}.memoryArchiveLegacySources p{margin:10px 0 0;white-space:pre-wrap;color:#625553;font:9px/1.75 var(--font-body)}