:root {
  --v4-ink: #302c39;
  --v4-soft: #716b78;
  --v4-night: #171323;
  --v4-violet: #665a98;
  --v4-blue: #5f7fbd;
  --v4-mint: #73b8aa;
  --v4-gold: #efd37f;
  --v4-paper: #fcfbf8;
  --v4-mist: #f1f3f4;
  --v4-line: rgba(48, 44, 57, 0.11);
}

body.v4 {
  color: var(--v4-ink);
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei UI", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  background: #111019;
}

.v4 .mobile-shell {
  color: var(--v4-ink);
  background: var(--v4-paper);
}

.v4 .app-intro {
  min-height: 304px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(105, 93, 151, 0.2), transparent 45%),
    linear-gradient(180deg, #171323 0%, #201a35 68%, #283054 100%);
}

.v4 .app-intro::after {
  bottom: -53px;
  height: 82px;
  background: var(--v4-paper);
}

.v4 .brand-row {
  gap: 10px;
}

.v4 .brand-row strong {
  font-size: 18px;
  font-weight: 580;
}

.v4 .brand-row small {
  color: rgba(237, 232, 245, 0.64);
  font-size: 9px;
  font-weight: 400;
}

.v4 .brand-dot {
  background: var(--v4-gold);
  box-shadow: inset 8px 0 0 #2b243c, 0 0 17px rgba(239, 211, 127, 0.3);
}

.v4 .moon-phases {
  margin-top: 10px;
}

.v4 .moon-phase {
  background:
    radial-gradient(circle at 35% 30%, rgba(107, 73, 27, 0.2) 0 6%, transparent 7%),
    radial-gradient(circle at 64% 67%, rgba(107, 73, 27, 0.14) 0 8%, transparent 9%),
    linear-gradient(135deg, #ffe9a9, #e9c46d);
}

.v4 .moon-phase::after {
  background: #211b35;
}

.v4 .moon-phase-full {
  box-shadow: 0 0 26px rgba(247, 217, 127, 0.45);
}

.v4 .today-moon small {
  color: #f2d985;
  font-weight: 580;
}

.v4 .moon-hero-copy {
  margin-top: 17px;
}

.v4 .moon-hero-copy h1 {
  font-size: 30px;
  font-weight: 560;
  line-height: 1.38;
}

.v4 .moon-hero-copy p {
  margin-top: 9px;
  color: rgba(241, 236, 249, 0.84);
  font-size: 15px;
  font-weight: 400;
}

.v4 .moon-hero-copy small {
  margin-top: 5px;
  color: rgba(226, 219, 238, 0.58);
  font-size: 12px;
}

.v4 .section-panel {
  padding-inline: 22px;
  color: var(--v4-ink);
  background: var(--v4-paper);
  border-color: var(--v4-line);
}

.v4 .primary-panel {
  padding-top: 10px;
}

.v4 .section-title span {
  color: #6b6094;
  font-size: 10px;
  font-weight: 580;
}

.v4 .section-title h2,
.v4 .section-title h1 {
  color: var(--v4-ink);
  font-size: 22px;
  font-weight: 560;
}

.v4 .section-title p {
  color: var(--v4-soft);
  font-size: 12px;
  line-height: 1.72;
}

.v4 .talk-box {
  height: 218px;
  min-height: 218px;
  border-bottom-color: var(--v4-line);
}

.v4 .talk-box > span {
  color: #4d4755;
  font-weight: 540;
}

.v4 .talk-box textarea,
.v4 .followup-form textarea {
  color: #34303a;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.78;
}

.v4 .talk-box textarea {
  min-height: 0;
  flex: 1 1 auto;
}

.v4 .talk-box textarea::placeholder,
.v4 .followup-form textarea::placeholder {
  color: #aaa5ae;
}

.v4 .voice-strip {
  margin-top: 16px;
  padding: 13px 0;
  border-block: 1px solid var(--v4-line);
  background: transparent;
}

.v4 .voice-action {
  color: #fff;
  background: linear-gradient(115deg, #5d5ca8 0%, #5577b5 52%, #65aa9d 100%);
  border: 0;
  box-shadow: 0 10px 26px rgba(75, 79, 142, 0.18);
}

.v4 .voice-strip p {
  color: var(--v4-soft);
}

.v4 .draft-hint {
  padding: 14px 0 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.v4 .draft-hint strong {
  color: #536e68;
  font-weight: 560;
}

.v4 .draft-hint p {
  color: var(--v4-soft);
}

.v4 .primary-button {
  color: #fff;
  background: #51426e;
  border: 0;
  border-radius: 7px;
  box-shadow: 0 10px 26px rgba(54, 41, 76, 0.14);
  font-weight: 560;
}

.v4 .privacy-note {
  color: #7b7680;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.v4 .response-section {
  background: linear-gradient(180deg, #f3f1f7 0%, #f8f7f6 100%);
}

.v4 .response-area,
.v4 .release-card,
.v4 .emotion-output,
.v4 .continuation-panel,
.v4 .memory-panel,
.v4 .context-disclosure {
  border-radius: 0;
  box-shadow: none;
}

.v4 .echo-primary {
  color: #39333f;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.86;
}

.v4 .continuity-line {
  border-left-color: rgba(93, 168, 154, 0.72);
}

.v4 .feedback-row button,
.v4 .small-action,
.v4 .subtle-button {
  border-radius: 7px;
  font-weight: 520;
}

.v4 .review-section {
  background: #f8faf8;
}

.v4 .tools-section {
  background: #f7f6f3;
}

.v4 .tool-card,
.v4 .mindful-card {
  border-radius: 7px;
  box-shadow: none;
}

.v4 .app-scope {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 24px 22px 38px;
  color: #77717c;
  background: #efefed;
  border-top: 1px solid var(--v4-line);
}

.v4 .app-scope svg {
  width: 21px;
  height: 21px;
  color: #706197;
}

.v4 .app-scope p {
  display: grid;
  gap: 5px;
  margin: 0;
}

.v4 .app-scope strong {
  color: #4f4956;
  font-size: 12px;
  font-weight: 560;
}

.v4 .app-scope span {
  font-size: 10px;
  line-height: 1.7;
}

.v4 .thumb-nav {
  background: rgba(252, 251, 248, 0.94);
  border-top-color: rgba(48, 44, 57, 0.12);
  backdrop-filter: blur(18px);
}

.v4 .thumb-nav button {
  color: #77717b;
}

.v4 .thumb-nav button.active {
  color: #55437a;
}

body.v4[data-dictation-visual="listening"] .primary-panel {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 430px);
  height: 100dvh;
  margin: 0 auto;
  padding: max(34px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(ellipse at 66% 44%, rgba(112, 208, 190, 0.46), transparent 34%),
    radial-gradient(ellipse at 38% 30%, rgba(104, 115, 226, 0.64), transparent 48%),
    linear-gradient(160deg, #241b3d 0%, #303c69 52%, #3c7778 100%);
  animation: v4-listening-breathe 10s ease-in-out infinite;
}

body.v4[data-dictation-visual="listening"] .demo-scenes,
body.v4[data-dictation-visual="listening"] .draft-hint,
body.v4[data-dictation-visual="listening"] .self-check,
body.v4[data-dictation-visual="listening"] #saveEntry,
body.v4[data-dictation-visual="listening"] .privacy-note {
  display: none;
}

body.v4[data-dictation-visual="listening"] .section-title {
  margin-bottom: 18px;
}

body.v4[data-dictation-visual="listening"] .talk-box {
  min-height: 0;
  overflow: hidden;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

body.v4[data-dictation-visual="listening"] .talk-box textarea {
  min-height: 0;
  height: 100%;
  padding: 12px 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 20px;
  line-height: 1.82;
  box-shadow: none;
}

body.v4[data-dictation-visual="listening"] .voice-strip {
  display: grid;
  place-items: center;
  align-self: end;
  margin: 24px 0 0;
  padding: 22px 0 0;
  border-top-color: rgba(255, 255, 255, 0.2);
  border-bottom: 0;
}

body.v4[data-dictation-visual="listening"] .voice-action {
  width: 112px;
  min-width: 112px;
  height: 112px;
  min-height: 72px;
  padding: 0;
  border-radius: 50%;
}

body.v4[data-dictation-visual="listening"] .voice-action svg {
  width: 36px;
  height: 36px;
}

body.v4[data-dictation-visual="listening"] .voice-action span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

body.v4[data-dictation-visual="listening"] .voice-strip p {
  margin-top: 20px;
  font-size: 13px;
  text-align: center;
}

body.v4[data-dictation-visual="listening"] .primary-panel,
body.v4[data-dictation-visual="listening"] .section-title h2,
body.v4[data-dictation-visual="listening"] .section-title span,
body.v4[data-dictation-visual="listening"] .talk-box > span,
body.v4[data-dictation-visual="listening"] .talk-box textarea,
body.v4[data-dictation-visual="listening"] .voice-strip p {
  color: #fff;
}

body.v4[data-dictation-visual="listening"] .talk-box textarea::placeholder {
  color: rgba(255, 255, 255, 0.62);
}

body.v4[data-dictation-visual="listening"] .voice-action {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.06), 0 0 48px rgba(122, 225, 205, 0.34);
}

.v4 .followup-form {
  padding: 18px 0 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.v4 .followup-form textarea {
  min-height: 154px;
  padding: 4px 0 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--v4-line);
  border-radius: 0;
  outline: none;
  box-shadow: none;
}

.v4 .followup-form textarea:focus {
  border-bottom-color: rgba(88, 157, 145, 0.72);
  box-shadow: none;
}

.v4 .followup-form .voice-strip {
  padding-inline: 0;
  background: transparent;
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
}

.v4 .conversation-next:has(.followup-form:not([hidden])) .review-path {
  display: none;
}

@keyframes v4-listening-breathe {
  0%, 100% { background-size: 100% 100%, 100% 100%, 100% 100%; }
  40% { background-size: 138% 138%, 126% 126%, 100% 100%; }
}

@media (max-width: 360px) {
  .v4 .section-panel {
    padding-inline: 18px;
  }

  .v4 .moon-hero-copy h1 {
    font-size: 27px;
  }

  .v4 .moon-hero-copy p {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.v4[data-dictation-visual="listening"] .primary-panel {
    animation: none;
  }
}