:root {
  color-scheme: light;
  --ink: #1f2423;
  --muted: #68716f;
  --line: rgba(28, 43, 40, 0.1);
  --panel: rgba(255, 255, 255, 0.84);
  --soft: #f7f4f1;
  --accent: #936257;
  --accent-strong: #77483f;
  --blue: #7f8fff;
  --green: #6da58e;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(ellipse at 88% 66%, rgba(255, 242, 226, 0.38), transparent 42%),
    linear-gradient(180deg, #b8bec5 0%, #c8c7c6 27%, #ded0c8 56%, #f1ded3 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Noto Sans JP", sans-serif;
  /* 日本語を単語の途中ではなく文節の切れ目で折り返す。
     対応していないブラウザ（Safari など）では従来どおりの折り返しになる */
  word-break: auto-phrase;
  line-break: strict;
}

button,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.auth-dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(31, 36, 35, 0.28);
  padding: 20px;
  backdrop-filter: blur(12px);
}

.auth-dialog.is-hidden {
  display: none;
}

body.auth-required {
  overflow: hidden;
}

.auth-dialog.is-required #closeAuthButton {
  display: none;
}

.auth-card {
  display: grid;
  gap: 14px;
  width: min(100%, 380px);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(53, 45, 40, 0.2);
  padding: 22px;
}

.auth-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.auth-header span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.auth-header h2 {
  margin: 3px 0 0;
}

.auth-header button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #f2f1ef;
  font-size: 1.2rem;
}

.auth-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.auth-card label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.auth-card input {
  width: 100%;
  border: 1px solid rgba(28, 43, 40, 0.14);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 12px;
}

.auth-password-field {
  position: relative;
  display: block;
}

.auth-password-field input {
  padding-right: 52px;
}

.auth-password-field button {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--muted);
}

.auth-password-field svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-card .auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-card .auth-remember input {
  width: auto;
}

.auth-card .auth-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.6;
}

.auth-card .auth-note.is-hidden {
  display: none;
}

.auth-card .auth-error {
  min-height: 1.2em;
  color: #a34f43;
}

.auth-primary,
.auth-secondary {
  border-radius: 13px;
  font-weight: 800;
  padding: 12px;
}

.auth-primary {
  border: 0;
  background: #1c2b28;
  color: #fff;
}

.auth-secondary {
  border: 1px solid rgba(28, 43, 40, 0.14);
  background: transparent;
  color: var(--ink);
}

.app-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  padding: 18px 16px 120px;
}

.topbar {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 10;
}

.topbar p,
.topbar strong,
.brand-button {
  display: block;
  margin: 0;
}

.topbar p {
  color: var(--muted);
  font-size: 0.76rem;
}

.topbar strong,
.brand-button {
  font-size: 1.05rem;
}

.brand-button {
  grid-column: 2;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  padding: 8px 12px;
}

.brand-button:focus-visible {
  outline: 2px solid rgba(89, 99, 200, 0.42);
  outline-offset: 2px;
}

.icon-button,
.status-pill,
.plus-button,
.mic-button,
.send-button {
  border: 0;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 28px rgba(53, 45, 40, 0.08);
}

.menu-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: start;
}

.icon-button span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 2px 0;
  border-radius: 999px;
  background: #2c3432;
}

.navigation-menu {
  position: absolute;
  top: 52px;
  left: 0;
  display: grid;
  gap: 4px;
  width: min(220px, calc(100vw - 40px));
  border: 1px solid rgba(28, 43, 40, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 56px rgba(53, 45, 40, 0.16);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(18px);
}

.navigation-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.navigation-menu button {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
  padding: 12px;
  text-align: left;
}

.navigation-menu button:hover,
.navigation-menu button:focus-visible {
  background: rgba(147, 98, 87, 0.1);
  outline: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: #edf8f2;
  color: #366f58;
  font-weight: 700;
  padding: 10px 13px;
}

.status-pill span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(109, 165, 142, 0.16);
}

.hero-orb {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 64px 0 34px;
}

.mood-dial-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 264px;
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
}

.mood-dial-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(63, 75, 72, .13);
  border-radius: 50%;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
}

.mood-dial.is-dragging .mood-dial-ring { transition: none; }

.mood-dial-ring::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px dashed rgba(63, 75, 72, .12);
  border-radius: 50%;
}

.mood-dial-ring i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px;
  border: 3px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: #8a9bff;
  box-shadow: 0 4px 12px rgba(55,65,80,.2);
}
.mood-dial-ring i:nth-child(1) { transform: rotate(0deg) translateY(-131px); }
.mood-dial-ring i:nth-child(2) { transform: rotate(72deg) translateY(-131px); }
.mood-dial-ring i:nth-child(3) { transform: rotate(144deg) translateY(-131px); }
.mood-dial-ring i:nth-child(4) { transform: rotate(216deg) translateY(-131px); }
.mood-dial-ring i:nth-child(5) { transform: rotate(288deg) translateY(-131px); }

.mood-dial .orb {
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 24px;
  cursor: grab;
}
.mood-dial.is-dragging .orb { cursor: grabbing; transform: scale(.98); }
.orb-eyebrow { color: rgba(31,43,40,.58); font-size: .68rem; font-weight: 800; letter-spacing: .06em; }
.mood-dial .orb strong { max-width: none; color: #1d2b28; font-size: clamp(.88rem, 3.4vw, 1.08rem); line-height: 1.3; white-space: nowrap; }
.mood-dial .orb > span:last-child { color: rgba(31,43,40,.62); font-size: clamp(.64rem, 2.4vw, .72rem); font-weight: 800; white-space: nowrap; }
.mood-dial-copy { display: grid; justify-items: center; gap: 4px; }
.mood-dial-copy > span { color: rgba(62,75,71,.52); font-size: .7rem; }

.mood-dial[data-tone="calm"] .orb { background: radial-gradient(circle at 30% 42%,rgba(255,255,255,.88),transparent 25%),linear-gradient(180deg,#91a5ff 0%,#eef1ff 88%); }
.mood-dial[data-tone="focus"] .orb { background: radial-gradient(circle at 30% 42%,rgba(255,255,255,.85),transparent 25%),linear-gradient(180deg,#7fc1ae 0%,#eaf5ef 88%); }
.mood-dial[data-tone="refresh"] .orb { background: radial-gradient(circle at 30% 42%,rgba(255,255,255,.88),transparent 25%),linear-gradient(180deg,#efb590 0%,#fff0e7 88%); }
.mood-dial[data-tone="sleep"] .orb { background: radial-gradient(circle at 30% 42%,rgba(255,255,255,.82),transparent 25%),linear-gradient(180deg,#9b8dc4 0%,#eee9f7 88%); }
.mood-dial[data-tone="talk"] .orb { background: radial-gradient(circle at 30% 42%,rgba(255,255,255,.88),transparent 25%),linear-gradient(180deg,#d49aaa 0%,#f8e9ed 88%); }

.orb > .orb-body {
  display: none;
}

body.breathing-active .mood-dial-ring { opacity: 0; pointer-events: none; }
body.breathing-active .mood-dial-copy > span { display: none; }

.orb {
  position: relative;
  width: 178px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 48%, rgba(255, 255, 255, 0.86), transparent 24%),
    radial-gradient(circle at 64% 62%, rgba(255, 255, 255, 0.72), transparent 25%),
    linear-gradient(180deg, #7889ff 0%, #eef1ff 88%);
  box-shadow:
    0 28px 64px rgba(119, 132, 232, 0.24),
    inset 0 -18px 42px rgba(255, 255, 255, 0.52);
  transition: transform 180ms ease, filter 180ms ease;
}

.orb::before,
.orb::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(127, 143, 255, 0.2);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.orb::before {
  inset: -16px;
}

.orb::after {
  inset: -32px;
}

body.breathing-active .home-actions {
  display: none;
}

body.breathing-active .hero-orb {
  min-height: auto;
  padding: 22px 0 8px;
}

body.breathing-active .orb {
  width: 178px;
  cursor: default;
}

body.breathing-active .orb::before,
body.breathing-active .orb::after {
  opacity: 1;
  transition: inset 1s ease, opacity 400ms ease;
}

body.breathing-active .orb.is-inhaling {
  filter: saturate(1.08);
  transform: scale(1.12);
  transition: transform 4s ease-in, filter 400ms ease;
}

body.breathing-active .orb.is-inhaling::before {
  inset: -24px;
}

body.breathing-active .orb.is-inhaling::after {
  inset: -46px;
}

body.breathing-active .orb.is-holding {
  filter: saturate(1.04);
  transform: scale(1.12);
  transition: filter 300ms ease;
}

body.breathing-active .orb.is-exhaling {
  filter: saturate(0.88);
  transform: scale(0.88);
  transition: transform 6s ease-out, filter 500ms ease;
}

body.breathing-active .orb.is-complete {
  filter: saturate(0.96);
  transform: scale(1);
  transition: transform 500ms ease;
}

.orb:hover {
  transform: scale(1.025);
}

.orb:focus-visible {
  outline: 3px solid rgba(89, 99, 200, 0.42);
  outline-offset: 7px;
}

.orb.active {
  box-shadow:
    0 28px 64px rgba(119, 132, 232, 0.32),
    0 0 0 8px rgba(109, 165, 142, 0.13),
    inset 0 -18px 42px rgba(255, 255, 255, 0.52);
}

.orb.listening {
  animation: pulse 1.4s ease-in-out infinite;
  filter: saturate(1.15);
}

.hero-orb p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.home-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 6px 0 16px;
}

.home-actions button {
  min-width: 0;
  min-height: 66px;
  border: 1px solid rgba(28, 43, 40, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  padding: 11px 12px;
  text-align: left;
}

.home-actions button:hover,
.home-actions button:focus-visible {
  border-color: rgba(91, 148, 124, 0.45);
  background: rgba(255, 255, 255, 0.96);
  outline: 0;
}

.home-actions strong,
.home-actions span {
  display: block;
  overflow-wrap: anywhere;
}

.home-actions strong {
  font-size: 0.88rem;
}

.home-actions span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.breathing-panel,
.recommendations-panel {
  display: grid;
  gap: 16px;
  border-block: 1px solid rgba(28, 43, 40, 0.1);
  margin-bottom: 18px;
  padding: 18px 0;
}

.breathing-panel.is-hidden,
.recommendations-panel.is-hidden {
  display: none;
}

.care-panel-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.care-panel-header span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.care-panel-header h2 {
  margin: 3px 0 0;
  font-size: 1.08rem;
  letter-spacing: 0;
}

.care-panel-header > button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(28, 43, 40, 0.1);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0;
}

.breathing-stage {
  display: grid;
  justify-items: center;
  gap: 13px;
  min-height: 118px;
}

.breathing-stage.is-hidden,
.breathing-control.is-hidden {
  display: none;
}

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

.breathing-audio-options button {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(28, 43, 40, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  padding: 12px;
  text-align: left;
}

.breathing-audio-options button strong,
.breathing-audio-options button span {
  display: block;
}

.breathing-audio-options button strong {
  font-size: 0.82rem;
}

.breathing-audio-options button span {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.45;
}

.breathing-audio-options button .breathing-pattern {
  color: var(--ink);
  font-weight: 750;
}

.breathing-audio-options button .breathing-duration {
  margin-top: 1px;
  font-weight: 700;
}

.breathing-audio-options button.is-playing {
  border-color: #1c2b28;
  background: #1c2b28;
  color: #fff;
}

.breathing-audio-options button.is-playing span {
  color: rgba(255, 255, 255, 0.72);
}

.breathing-audio-options button.is-playing .breathing-pattern {
  color: #fff;
}

.breathing-goals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.breathing-goals button {
  min-height: 46px;
  border: 1px solid rgba(28, 43, 40, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  font-weight: 800;
}

.breathing-goals button.is-selected {
  border-color: rgba(28, 43, 40, 0.72);
  background: #1c2b28;
  color: #fff;
}

.breathing-readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  width: 100%;
  text-align: center;
}

.breathing-readout strong,
.breathing-readout span,
.breathing-readout small {
  display: block;
}

.breathing-readout strong {
  font-size: 1.35rem;
}

.breathing-readout .breathing-phase-count {
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 800;
}

.breathing-readout small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.breathing-reason {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}

.breathing-stage p {
  min-height: 24px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}

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

.care-controls.is-meditation-only {
  grid-template-columns: 1fr;
}

.breathing-control,
.meditation-control {
  width: 100%;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  padding: 13px;
}

.breathing-control {
  background: #202725;
  color: #fff;
}

.meditation-control {
  border: 1px solid rgba(28, 43, 40, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}

.meditation-control.is-playing {
  border-color: #1c2b28;
  background: #1c2b28;
  color: #fff;
}

.breathing-control:disabled {
  cursor: default;
  opacity: 0.48;
}

.recommendation-context {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.recommendation-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  border-radius: 8px;
  background: rgba(28, 43, 40, 0.06);
  padding: 3px;
}

.recommendation-tabs button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 9px;
}

.recommendation-tabs button.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(53, 45, 40, 0.08);
}

.music-categories,
.yoga-categories {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.music-categories::-webkit-scrollbar,
.yoga-categories::-webkit-scrollbar {
  display: none;
}

.music-categories.is-hidden,
.yoga-categories.is-hidden {
  display: none;
}

.recommendation-refresh.is-hidden {
  display: none;
}

.music-categories button,
.yoga-categories button {
  flex: 0 0 auto;
  border: 1px solid rgba(28, 43, 40, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 8px 13px;
}

.music-categories button.is-active,
.yoga-categories button.is-active {
  border-color: #1c2b28;
  background: #1c2b28;
  color: #fff;
}

.recommendation-refresh {
  justify-self: end;
  border: 0;
  background: transparent;
  color: #315ca8;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 4px 0;
}

.recommendation-refresh:focus-visible {
  outline: 2px solid rgba(49, 92, 168, 0.35);
  outline-offset: 3px;
}

.recommendation-list {
  display: grid;
  gap: 0;
}

#suggestionRecommendationList {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 2px 18px 10px;
  margin: 0 -18px;
  scrollbar-width: none;
}

#suggestionRecommendationList::-webkit-scrollbar {
  display: none;
}

.recommendation-loading {
  display: grid;
  gap: 7px;
  border-block: 1px solid rgba(28, 43, 40, 0.1);
  padding: 16px 0;
}

.recommendation-loading strong,
.recommendation-loading span {
  display: block;
}

.recommendation-loading strong {
  color: var(--ink);
  font-size: 0.82rem;
}

.recommendation-loading span {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.recommendation-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 5px;
}

.recommendation-progress i {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(28, 43, 40, 0.1);
}

.recommendation-progress i.is-complete {
  background: #1c2b28;
}

.recommendation-progress i.is-active {
  background: linear-gradient(90deg, #1c2b28 0 38%, rgba(28, 43, 40, 0.1) 38% 100%);
  background-size: 220% 100%;
  animation: recommendation-progress 1.1s linear infinite;
}

@keyframes recommendation-progress {
  to {
    background-position: -120% 0;
  }
}

@keyframes titleFlow {
  0%, 12% {
    transform: translateX(0);
  }

  88%, 100% {
    transform: translateX(var(--flow, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  #suggestionRecommendationList .registered-recommendation.is-active strong > i.is-overflowing {
    animation: none;
  }
}

.recommendation-list article {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid rgba(28, 43, 40, 0.08);
  padding: 12px 0;
}

.recommendation-list article:first-child {
  border-top: 0;
  padding-top: 0;
}

.recommendation-list img {
  width: 128px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: rgba(28, 43, 40, 0.06);
  object-fit: cover;
}

.recommendation-list .original-art {
  display: grid;
  place-items: center;
  width: 128px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(104, 166, 196, 0.3), rgba(207, 145, 161, 0.34));
  color: #1c2b28;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.recommendation-list .registered-recommendation .original-art {
  width: 148px;
  height: 96px;
  margin-bottom: 8px;
  padding: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
  text-align: center;
  text-transform: none;
}

#suggestionRecommendationList > .registered-recommendation,
#suggestionRecommendationList > .registered-recommendation:first-child {
  display: block;
  flex: 0 0 auto;
  width: 148px;
  scroll-snap-align: start;
  border: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

#suggestionRecommendationList .registered-recommendation strong {
  display: block;
  overflow: hidden;
  font-size: 0.84rem;
  line-height: 1.5;
  white-space: nowrap;
  -webkit-line-clamp: initial;
}

#suggestionRecommendationList .registered-recommendation strong > i {
  display: inline-block;
  font-style: normal;
  will-change: transform;
}

#suggestionRecommendationList .registered-recommendation.is-active strong > i.is-overflowing {
  animation: titleFlow 9s linear infinite;
}

#suggestionRecommendationList .recommendation-play {
  margin-top: 6px;
  font-size: 0.72rem;
}

.recommendation-list article div {
  min-width: 0;
}

.recommendation-list strong,
.recommendation-list span {
  display: block;
  overflow-wrap: anywhere;
}

.recommendation-list strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.8rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.recommendation-list span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.68rem;
}

.recommendation-play {
  display: inline-block;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #3b5c93;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0;
}

.recommendation-play:focus-visible {
  outline: 2px solid rgba(59, 92, 147, 0.35);
  outline-offset: 3px;
}

.media-player {
  position: fixed;
  right: 18px;
  bottom: 12px;
  z-index: 40;
  display: grid;
  gap: 8px;
  width: min(calc(100% - 24px), 400px);
  border: 1px solid rgba(28, 43, 40, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(35, 39, 37, 0.22);
  padding: 10px;
}

body.media-playing .composer {
  display: none;
}

.media-player.is-hidden {
  display: none;
}

.media-player-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: 10px;
}

.media-player-header div {
  min-width: 0;
}

.media-player-header strong,
.media-player-header span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-player-header strong {
  font-size: 0.8rem;
}

.media-player-header span,
.media-player > p {
  color: var(--muted);
  font-size: 0.68rem;
}

.media-player-header a {
  color: #315ca8;
  font-size: 0.68rem;
  font-weight: 800;
  text-decoration: none;
}

.media-player-header button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(28, 43, 40, 0.1);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 1.15rem;
}

#youtubePlayerHost {
  width: 100%;
  min-width: 200px;
  min-height: 200px;
  border: 0;
  aspect-ratio: 16 / 9;
}

.media-player > p {
  min-height: 16px;
  margin: 0;
}

.video-player-dialog {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: stretch;
  overflow: hidden;
  padding: 0;
  background: #000;
}

.video-player-dialog.is-hidden {
  display: none;
}

.video-player-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  background: #000;
}

.video-player-card .sheet-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
}

.video-player-card h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#videoPlayer {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #111;
  object-fit: contain;
}

.suggestion-card.is-playable,
.recommendation-list article.is-playable,
#suggestionRecommendationList > .registered-recommendation.is-playable {
  cursor: pointer;
}

.suggestion-card.is-playable:focus-visible,
.recommendation-list article.is-playable:focus-visible,
#suggestionRecommendationList > .registered-recommendation.is-playable:focus-visible {
  outline: 2px solid rgba(28, 43, 40, 0.28);
  outline-offset: 2px;
}

.recommendation-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.conversation {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 170px;
  overflow-y: auto;
  padding-bottom: 14px;
}

.message {
  display: grid;
  gap: 10px;
  max-width: 88%;
}

.message.assistant {
  grid-template-columns: 32px 1fr;
}

.message.user {
  justify-self: end;
}

.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e9e5ff;
  color: #5963c8;
  font-size: 0.75rem;
  font-weight: 800;
}

.bubble {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 16px 44px rgba(53, 45, 40, 0.07);
  padding: 13px 15px;
  backdrop-filter: blur(18px);
}

.message.user .bubble {
  border: 0;
  background: #202725;
  color: #fff;
}

.bubble p {
  margin: 0;
  line-height: 1.55;
}

.bubble p + p {
  margin-top: 8px;
}

.hint {
  color: var(--muted);
  font-size: 0.84rem;
}

.insight-panel {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 16px 48px rgba(53, 45, 40, 0.08);
  padding: 14px;
  backdrop-filter: blur(20px);
}

.insight-panel.is-hidden {
  display: none;
}

.insight-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.insight-header span,
.insight-grid span {
  color: var(--muted);
  font-size: 0.74rem;
}

.insight-header strong {
  font-size: 0.9rem;
}

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

.insight-grid div {
  min-width: 0;
  border-radius: 16px;
  background: #fff;
  padding: 10px;
}

.insight-grid strong {
  display: block;
  min-height: 38px;
  margin-top: 6px;
  font-size: 0.86rem;
  line-height: 1.35;
}

.save-button {
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: 16px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  padding: 14px;
}

.composer {
  position: fixed;
  left: 50%;
  bottom: 18px;
  display: grid;
  grid-template-columns: 42px 1fr 54px;
  align-items: end;
  gap: 8px;
  width: min(calc(100% - 24px), 456px);
  transform: translateX(-50%);
  border: 1px solid rgba(28, 43, 40, 0.08);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 70px rgba(53, 45, 40, 0.18);
  padding: 8px;
  backdrop-filter: blur(20px);
  z-index: 35;
}

body.viewing-records .composer {
  display: none;
}

body.viewing-records .app-shell {
  padding-bottom: 28px;
}

.composer textarea {
  width: 100%;
  max-height: 120px;
  min-height: 42px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--ink);
  line-height: 1.55;
  padding: 10px 4px;
}

.composer textarea::placeholder {
  color: #9b9f9d;
}

.plus-button,
.mic-button,
.send-button {
  display: grid;
  place-items: center;
  height: 42px;
  border-radius: 50%;
}

.plus-button {
  background: transparent;
  color: #202725;
  font-size: 2rem;
  line-height: 1;
}

.mic-button {
  background: #f2f1ef;
  color: #202725;
}

.primary-voice {
  width: 48px;
  height: 48px;
  align-self: center;
  background: #1c2b28;
  color: #fff;
  box-shadow: 0 8px 18px rgba(28, 43, 40, 0.16);
}

.mic-button.active {
  background: var(--accent);
  color: #fff;
}

.send-button {
  display: none;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: #1c2b28;
  color: #fff;
  box-shadow: 0 8px 18px rgba(28, 43, 40, 0.16);
}

.composer.has-text .send-button {
  display: grid;
}

.composer.has-text .mic-button {
  display: none;
}

.mic-button svg,
.send-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.send-button svg {
  fill: currentColor;
  stroke: none;
}

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

@media (max-width: 380px) {
  .app-shell {
    padding-inline: 12px;
  }

  .orb {
    width: 150px;
  }

  .insight-grid strong {
    font-size: 0.78rem;
  }

  .recommendation-list article {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .recommendation-list img {
    width: 104px;
  }
}

/* Minimal voice-first version */
.app-shell {
  grid-template-rows: auto 1fr auto auto;
  padding: 28px 20px 112px;
}

.topbar {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  justify-items: center;
}

.topbar strong,
.brand-button {
  grid-column: 2;
  font-size: 1rem;
}

#recordCard {
  display: none;
}

.hero-orb {
  align-content: center;
  padding: 22px 0 8px;
}

.hero-orb p {
  max-width: 260px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
}

.conversation {
  min-height: 56px;
  gap: 10px;
  padding: 0 8px 8px;
}

body.text-checkin-active .conversation {
  min-height: 0;
  margin: 10px 0 18px;
  border: 1px solid rgba(28, 43, 40, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 34px rgba(53, 45, 40, 0.08);
  padding: 18px;
  backdrop-filter: blur(16px);
}

body.text-checkin-active .conversation .bubble {
  color: var(--ink);
  text-align: left;
}

body.text-checkin-active .conversation .bubble p {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
}

.text-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.text-quick-replies button {
  border: 1px solid rgba(28, 43, 40, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 9px 13px;
}

.text-quick-replies button:active {
  transform: scale(0.97);
}

.live-transcript-card {
  display: none;
}

body.realtime-active .live-transcript-card {
  display: block;
}

.record-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 48px rgba(53, 45, 40, 0.08);
  padding: 14px;
  backdrop-filter: blur(18px);
}

.debug-card {
  border: 1px solid rgba(28, 43, 40, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.48);
  padding: 12px;
}

.live-transcript-card {
  border: 1px solid rgba(28, 43, 40, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  padding: 12px;
}

.live-transcript-card p {
  min-height: 44px;
  margin: 0;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.debug-card.is-hidden {
  display: none;
}

.today-log-page {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 18px 48px rgba(53, 45, 40, 0.1);
  padding: 16px;
  backdrop-filter: blur(18px);
}

.today-log-page.is-hidden {
  display: none;
}

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

.page-header span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.page-header .record-sync-status {
  margin-top: 7px;
  color: #806124;
}

.page-header .record-sync-status[data-state="saved"] {
  color: #2f7258;
}

.page-header .record-sync-status[data-state="syncing"] {
  color: #5963c8;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reflection-button {
  min-height: 44px;
  border: 1px solid rgba(28, 43, 40, 0.1);
  border-radius: 999px;
  background: #1c2b28;
  color: #fff;
  font-weight: 800;
  padding: 0 16px;
}

.today-mental-overview {
  display: grid;
  gap: 13px;
  border-block: 1px solid rgba(28, 43, 40, 0.09);
  padding: 16px 0;
}

.mental-overview-header,
.mental-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mental-overview-header span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.mental-overview-header h2 {
  margin: 3px 0 0;
  font-size: 1rem;
  letter-spacing: 0;
}

.mental-state {
  flex: 0 0 auto;
  font-size: 0.86rem;
}

.mental-state.good {
  color: #2f7258;
}

.mental-state.okay {
  color: #806124;
}

.mental-state.low {
  color: #7a443a;
}

.mental-state.empty {
  color: var(--muted);
}

.mental-score {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: 0 0 auto;
}

.mental-score strong {
  font-size: 2.35rem;
  line-height: 1;
}

.mental-score span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.mental-score-row p {
  max-width: 250px;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
  text-align: right;
}

.mental-meter {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(28, 43, 40, 0.08);
}

.mental-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #a78d62;
  transition: width 240ms ease;
}

.mental-meter.good span {
  background: #5b947c;
}

.mental-meter.low span {
  background: #a36054;
}

.today-mental-overview blockquote {
  margin: 0;
  border-left: 3px solid rgba(91, 148, 124, 0.4);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.55;
  padding-left: 11px;
  overflow-wrap: anywhere;
}

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

.mental-overview-details section {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.56);
  padding: 12px;
}

.mental-overview-details strong {
  display: block;
  color: var(--ink);
  font-size: 0.76rem;
}

.mental-overview-details p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  .mental-overview-details {
    grid-template-columns: 1fr;
  }
}

.page-header h1 {
  margin: 2px 0 0;
  font-size: 1.25rem;
  letter-spacing: 0;
}

.page-header .record-day-count {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 0.78rem;
}

.page-close-button {
  border: 1px solid rgba(28, 43, 40, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 8px 12px;
}

.today-log-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.today-activities {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(28, 43, 40, 0.1);
  padding-top: 12px;
}

.today-activities h3 {
  margin: 0 0 6px;
  font-size: 0.9rem;
  letter-spacing: 0;
}

.today-activities div {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid rgba(28, 43, 40, 0.07);
  padding: 9px 0;
}

.today-activities div:first-of-type {
  border-top: 0;
}

.today-activities span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.today-activities p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.today-log-summary div {
  min-width: 0;
  border-radius: 14px;
  background: rgba(247, 244, 241, 0.84);
  padding: 10px;
}

.today-log-summary span,
.today-log-entry span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.today-log-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.activity-category-picker {
  display: grid;
  gap: 8px;
}

.activity-category-picker.is-hidden {
  display: none;
}

.activity-category-picker > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.activity-category-picker > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.activity-category-picker button {
  min-height: 44px;
  border: 1px solid rgba(28, 43, 40, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 7px;
}

.activity-category-picker button:disabled {
  opacity: 0.58;
}

.calendar-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
}

.calendar-legend span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.calendar-legend .is-exercise::before {
  background: #68a6c4;
}

.calendar-legend .is-selfcare::before {
  background: #cf91a1;
}

.calendar-legend .is-social::before {
  background: #83aa9a;
}

.calendar-card {
  display: grid;
  gap: 10px;
}

.calendar-header {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
}

.calendar-header strong {
  text-align: center;
  font-size: 0.96rem;
}

.calendar-header button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(28, 43, 40, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-weekdays span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
}

.calendar-day {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0;
}

.calendar-day.is-outside {
  color: rgba(104, 113, 111, 0.46);
  background: transparent;
}

.calendar-day.has-record {
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.98) 0 54%,
    rgba(255, 255, 255, 0.62) 55% 64%,
    transparent 65%
  );
}

.calendar-day.has-record::after {
  display: none;
}

.calendar-day.has-category-ring::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  background: var(--category-ring);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 0);
}

.calendar-day.is-good {
  background: rgba(109, 165, 142, 0.18);
  color: #2f7258;
}

.calendar-day.is-ok {
  background: rgba(238, 194, 116, 0.24);
  color: #806124;
}

.calendar-day.is-low {
  background: rgba(147, 98, 87, 0.18);
  color: #7a443a;
}

.calendar-day.is-selected {
  box-shadow: 0 0 0 2px rgba(31, 36, 35, 0.2);
}

.today-log-list {
  display: grid;
  gap: 10px;
}

.today-log-entry {
  border-top: 1px solid rgba(28, 43, 40, 0.08);
  padding-top: 10px;
}

.today-log-entry p {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.today-log-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.today-log-transcript {
  border-top: 1px solid rgba(28, 43, 40, 0.08);
  padding-top: 10px;
}

.today-log-transcript summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
}

.today-log-transcript p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

@media (max-width: 380px) {
  .mental-score-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .mental-score-row p {
    max-width: none;
    text-align: left;
  }
}

.recognition-log {
  display: grid;
  gap: 8px;
  max-height: 150px;
  overflow: auto;
}

.recognition-log article {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
  padding: 9px;
}

.recognition-log span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.recognition-log p {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.45;
}

.record-card.is-hidden {
  display: none;
}

.record-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.record-card dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.record-card div {
  display: grid;
  gap: 4px;
}

.record-card dt {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.record-card dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.45;
}

.clear-record-button {
  width: 100%;
  margin-top: 12px;
  border: 1px solid rgba(28, 43, 40, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-weight: 800;
  padding: 11px;
}

.message,
.message.assistant,
.message.user {
  display: block;
  justify-self: stretch;
  max-width: none;
}

.avatar {
  display: none;
}

.bubble {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--muted);
  text-align: center;
  backdrop-filter: none;
}

.message.user .bubble {
  background: transparent;
  color: var(--ink);
}

.bubble p {
  font-size: 0.86rem;
  line-height: 1.55;
}

.composer {
  grid-template-columns: minmax(0, 1fr) 48px;
  width: min(calc(100% - 32px), 420px);
}

.plus-button,
.insight-panel {
  display: none;
}

.completion-dialog,
.account-dialog,
.date-detail-sheet {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(25, 34, 32, 0.34);
  backdrop-filter: blur(12px);
}

.completion-dialog.is-hidden,
.account-dialog.is-hidden,
.date-detail-sheet.is-hidden {
  display: none;
}

.completion-card,
.account-card,
.date-detail-sheet > div {
  width: min(100%, 520px);
  max-height: min(82vh, 760px);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 32px;
  background: rgba(255, 253, 251, 0.95);
  box-shadow: 0 28px 80px rgba(52, 43, 37, 0.2);
  padding: 28px;
}

.completion-card > span,
.account-card > span,
.date-detail-sheet > div > span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.completion-card h2,
.account-card h2,
.date-detail-sheet h2 { margin: 8px 0 22px; }

#completionSummary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#completionSummary div { display: grid; gap: 4px; padding: 14px; border-radius: 18px; background: #f5f2ef; }
#completionSummary span { color: var(--muted); font-size: 0.72rem; }
#completionAdvice { color: var(--muted); line-height: 1.7; }
.completion-actions { display: grid; gap: 9px; }
.completion-actions button,
.account-card > button:last-child,
.sheet-edit { border: 0; border-radius: 18px; padding: 15px; background: #17312d; color: white; font-weight: 800; }
.completion-actions button:last-child { background: #ebe6e1; color: var(--ink); }

.date-detail-sheet { align-items: end; padding-bottom: 86px; }
.date-detail-sheet > div { position: relative; border-radius: 32px 32px 20px 20px; }
.sheet-close { float: right; width: 38px; height: 38px; border: 0; border-radius: 50%; font-size: 1.3rem; }
#dateDetailContent { display: grid; gap: 12px; }
#dateDetailContent section { padding: 14px 0; border-top: 1px solid rgba(28,43,40,.1); }
#dateDetailContent p { margin: 6px 0 0; color: var(--muted); line-height: 1.6; }
.sheet-edit { width: 100%; margin-top: 16px; }
.sheet-edit:disabled { opacity: .4; }
.sheet-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 16px; }
.sheet-actions .sheet-edit { margin: 0; }
.sheet-delete { border: 1px solid rgba(151,62,62,.18); border-radius: 18px; padding: 14px 16px; background: #fff7f5; color: #994b47; font-weight: 800; }
.sheet-delete:disabled { opacity: .35; }
.record-edit-form { display: grid; gap: 13px; }
.record-edit-form label { display: grid; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.record-edit-form input,
.record-edit-form textarea { width: 100%; box-sizing: border-box; border: 1px solid rgba(28,43,40,.13); border-radius: 14px; background: white; color: var(--ink); padding: 12px 14px; font: inherit; resize: vertical; }
.record-edit-form textarea { min-height: 70px; }
.record-edit-form button { border: 0; border-radius: 16px; padding: 14px; background: #17312d; color: white; font-weight: 800; }
.account-card { position: relative; display: grid; gap: 10px; }
.account-card .sheet-close { position: absolute; top: 20px; right: 20px; }
.account-card > strong { font-size: 1.05rem; }
.account-card > p { color: var(--muted); line-height: 1.6; }

.checkin-navigation { width: min(calc(100% - 32px), 640px); margin: -4px auto 105px; }
.checkin-navigation.is-hidden { display: none; }
.checkin-progress { display: flex; justify-content: center; gap: 9px; margin-bottom: 14px; }
.checkin-progress span { width: 9px; height: 9px; border-radius: 50%; background: rgba(24,49,45,.18); transition: .2s ease; }
.checkin-progress span.is-current { width: 26px; border-radius: 9px; background: #17312d; }
.checkin-progress span.is-done { background: #70a28e; }
.checkin-navigation > div:last-child { display: flex; justify-content: space-between; }
.checkin-navigation button { border: 0; background: transparent; color: var(--muted); font-weight: 800; padding: 8px; }
.checkin-navigation button:disabled { opacity: .3; }

.home-actions button.is-complete { background: rgba(224, 242, 234, .9); border-color: rgba(68,130,106,.24); }
.home-actions button.is-complete strong { color: #286d56; }

.bottom-navigation {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(8px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(calc(100% - 20px), 620px);
  padding: 7px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 24px;
  background: rgba(250,248,245,.9);
  box-shadow: 0 12px 38px rgba(39,49,46,.16);
  backdrop-filter: blur(18px);
}
.bottom-navigation button { display: grid; justify-items: center; gap: 2px; border: 0; border-radius: 16px; background: transparent; color: var(--muted); padding: 7px 2px; font-size: .62rem; font-weight: 800; }
.bottom-navigation button:active { background: rgba(23,49,45,.08); }
.bottom-navigation span { font-size: 1.08rem; color: #17312d; line-height: 1; }

.audio-dock {
  position: fixed;
  z-index: 70;
  left: 50%;
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 74px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 42px minmax(80px, 1.2fr) auto 34px;
  align-items: center;
  gap: 10px;
  width: min(calc(100% - 24px), 620px);
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(23,49,45,.96);
  color: white;
  box-shadow: 0 16px 40px rgba(23,49,45,.3);
}
.audio-dock.is-hidden { display: none; }
.audio-dock > div { display: grid; min-width: 0; }
.audio-dock strong, .audio-dock span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-dock > div span { color: rgba(255,255,255,.65); font-size: .68rem; }
.audio-dock button { border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: white; width: 34px; height: 34px; }
.audio-dock input { accent-color: #e9d5cc; min-width: 0; }
#audioDockTime { font-size: .68rem; }

.composer { bottom: calc(max(8px, env(safe-area-inset-bottom)) + 76px); }
body { padding-bottom: 96px; }

@media (max-width: 560px) {
  #completionSummary { grid-template-columns: 1fr; }
  .completion-card, .account-card, .date-detail-sheet > div { padding: 22px; border-radius: 26px; }
  .audio-dock { grid-template-columns: minmax(90px, 1fr) 38px minmax(60px, 1fr) 30px; }
  #audioDockTime { display: none; }
}

/* Live weather background */
.live-weather-background { position:fixed; z-index:0; inset:0; overflow:hidden; opacity:0; pointer-events:none; background:radial-gradient(ellipse at 82% 66%,var(--weather-glow,rgba(218,232,236,.38)),transparent 42%),linear-gradient(180deg,var(--sky-top,#748896),var(--sky-mid,#a8b0b4) 48%,var(--sky-bottom,#d3d5d3)); transition:opacity .8s ease,background 1.8s ease; }
body.weather-live .live-weather-background { opacity:1; }
body.weather-live { background:var(--sky-bottom); color:var(--weather-ink,var(--ink)); }
body.weather-live .app-shell { position:relative; z-index:1; }
body.weather-live .brand-button { color:var(--weather-ink,var(--ink)); }
body.weather-live .mood-dial-copy > p { color:var(--weather-muted,var(--muted)); }
body.weather-live .mood-dial-copy > span { color:var(--weather-muted,var(--muted)); }
body.weather-live .mood-dial[data-tone] .orb {
  background:none;
  box-shadow:none;
}
body.weather-live .orb > .orb-body {
  position:absolute;
  inset:2px;
  z-index:0;
  display:block;
  border-radius:50%;
  filter:blur(3px);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,251,250,.94), transparent 44%),
    linear-gradient(180deg, #fdf1ef 0%, #eed9d5 88%);
  box-shadow:
    0 26px 60px rgba(160,105,98,.26),
    inset 0 -18px 40px rgba(255,247,245,.6);
}
body.weather-live .orb > *:not(.orb-body) {
  position:relative;
  z-index:1;
}
body.weather-live .mood-dial-ring i {
  border-color:rgba(255,250,249,.9);
  background:#f2d4cd;
}
body.weather-live[data-weather="cloudy"] .orb > .orb-body,
body.weather-live[data-weather="rain"] .orb > .orb-body,
body.weather-live[data-weather="drizzle"] .orb > .orb-body,
body.weather-live[data-weather="heavy-rain"] .orb > .orb-body,
body.weather-live[data-weather="fog"] .orb > .orb-body {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,251,250,.94), transparent 44%),
    linear-gradient(180deg, #eef9f4 0%, #a9d6cd 88%);
  box-shadow:
    0 26px 60px rgba(44,88,86,.3),
    inset 0 -18px 40px rgba(255,247,245,.6);
}
body.weather-live[data-weather="cloudy"] .mood-dial-ring i,
body.weather-live[data-weather="rain"] .mood-dial-ring i,
body.weather-live[data-weather="drizzle"] .mood-dial-ring i,
body.weather-live[data-weather="heavy-rain"] .mood-dial-ring i,
body.weather-live[data-weather="fog"] .mood-dial-ring i {
  border-color:rgba(255,250,249,.9);
  background:#b8ded4;
}
body.weather-live[data-weather="thunder"] .orb > .orb-body {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,251,250,.94), transparent 44%),
    linear-gradient(180deg, #fffefa 0%, #f3f0e6 88%);
  box-shadow:
    0 26px 60px rgba(40,38,50,.4),
    inset 0 -18px 40px rgba(255,247,245,.6);
}
body.weather-live[data-weather="thunder"] .mood-dial-ring i {
  border-color:rgba(255,250,249,.9);
  background:#f6f3ea;
}
body.weather-live[data-period="night"] .orb > .orb-body {
  background:
    radial-gradient(circle at 30% 30%, rgba(255,251,250,.94), transparent 44%),
    linear-gradient(180deg, #fbf1dc 0%, #e8d8ba 88%);
  box-shadow:
    0 26px 60px rgba(60,48,30,.34),
    inset 0 -18px 40px rgba(255,247,245,.6);
}
body.weather-live[data-period="night"] .mood-dial-ring i {
  border-color:rgba(255,250,249,.9);
  background:#efdfc2;
}
body.weather-live .recommendation-list { gap:10px; }
body.weather-live .recommendation-list article,
body.weather-live .recommendation-list article:first-child {
  border:1px solid rgba(255,255,255,.58);
  border-radius:12px;
  background:rgba(248,250,251,.82);
  box-shadow:0 10px 28px rgba(7,24,38,.12);
  padding:10px;
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  backdrop-filter:blur(16px) saturate(1.08);
}
body.weather-live #suggestionRecommendationList > .registered-recommendation,
body.weather-live #suggestionRecommendationList > .registered-recommendation:first-child {
  border:0;
  background:none;
  box-shadow:none;
  padding:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.weather-live .recommendation-list strong { color:#172522; }
body.weather-live .recommendation-list span {
  color:#43514d;
  font-weight:650;
  line-height:1.55;
}
body.weather-live .recommendation-play { color:#285f9f; }
.live-weather-light { position:absolute; top:-18vw; right:-13vw; width:min(78vw,820px); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,255,246,.82) 0 8%,rgba(255,233,192,.28) 26%,transparent 65%); filter:blur(9px); opacity:.34; transition:1.8s ease; }
.live-weather-cloud { position:absolute; width:62vw; height:25vw; border-radius:50%; background:radial-gradient(ellipse at 25% 65%,rgba(255,255,255,.54) 0 21%,transparent 55%),radial-gradient(ellipse at 52% 42%,rgba(231,237,239,.55) 0 24%,transparent 60%),radial-gradient(ellipse at 78% 68%,rgba(197,207,212,.52) 0 23%,transparent 58%); filter:blur(28px); animation:live-cloud-drift 26s ease-in-out infinite alternate; transition:opacity 1.4s ease; }
.live-cloud-one { top:10%; left:-18%; }
.live-cloud-two { top:38%; right:-22%; opacity:.7; animation-duration:34s; animation-direction:alternate-reverse; }
.live-weather-rain,.live-weather-snow { position:absolute; inset:0; overflow:hidden; opacity:0; transition:opacity 1s ease; }
.live-weather-drop { position:absolute; top:-15%; width:1px; height:72px; background:linear-gradient(transparent,rgba(234,245,248,.48)); animation:live-rainfall linear infinite; transform:rotate(8deg); }
.live-weather-flake { position:absolute; top:-8%; border-radius:50%; background:rgba(255,255,255,.8); filter:blur(.3px); animation:live-snowfall linear infinite; }
.live-weather-fog { position:absolute; inset:0; opacity:0; background:repeating-linear-gradient(175deg,transparent 0 12%,rgba(238,247,248,.28) 18%,transparent 27%); filter:blur(24px); animation:live-fog-drift 18s ease-in-out infinite alternate; transition:opacity 1.3s ease; }
.live-weather-lightning { position:absolute; inset:0; opacity:0; background:radial-gradient(circle at 64% 22%,rgba(224,229,255,.96),transparent 34%); mix-blend-mode:screen; }
.live-weather-lightning::before { content:""; position:absolute; top:14%; left:60%; width:72px; height:38vh; background:linear-gradient(180deg,#f8f3ff,#b8c5ff 72%,transparent); clip-path:polygon(48% 0,72% 0,55% 35%,79% 35%,31% 100%,43% 51%,20% 51%); filter:drop-shadow(0 0 8px rgba(218,224,255,.95)) drop-shadow(0 0 22px rgba(153,170,255,.8)); }
.live-weather-stars { position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; }
.live-weather-stars::before { content:""; position:absolute; top:6vh; left:5vw; width:2px; height:2px; border-radius:50%; background:white; box-shadow:12vw 8vh rgba(255,255,255,.5),28vw 19vh rgba(255,255,255,.75),47vw 7vh rgba(255,255,255,.42),65vw 17vh rgba(255,255,255,.68),82vw 6vh rgba(255,255,255,.55),73vw 32vh rgba(255,255,255,.35); }
.live-weather-grain { position:absolute; inset:0; opacity:.038; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.topbar { grid-template-columns:42px 1fr minmax(78px,auto); }
.live-weather-glance { grid-column:3; justify-self:end; display:grid; justify-items:end; border:0; background:transparent; color:var(--weather-ink,var(--ink)); padding:2px 0; line-height:1.05; text-align:right; }
.topbar .live-weather-glance strong { grid-column:auto; font-size:.78rem; }
.live-weather-glance span { margin-top:3px; color:var(--weather-muted,var(--muted)); font-size:.5rem; font-weight:750; white-space:nowrap; }
.live-weather-glance small { margin-top:3px; color:var(--weather-muted,var(--muted)); font-size:.42rem; font-weight:650; white-space:nowrap; }
body[data-weather="clear"] { --sky-top:#0868b8;--sky-mid:#238fd4;--sky-bottom:#6cbbe2;--weather-glow:rgba(183,222,244,.46);--weather-ink:#fff;--weather-muted:rgba(255,255,255,.78); }
body[data-weather="clear"] .live-weather-background { background:radial-gradient(circle at 82% 7%,rgba(255,255,235,.88) 0 1.7%,rgba(219,241,255,.25) 7%,transparent 21%),linear-gradient(180deg,var(--sky-top),var(--sky-mid) 55%,var(--sky-bottom)); }
body[data-weather="clear"] .live-weather-light { opacity:.58; transform:translate(-3vw,3vh) scale(.92); }
body[data-weather="clear"] .live-weather-cloud { opacity:.09; }
body[data-weather="partly-cloudy"] { --sky-top:#3c97cc;--sky-mid:#8bc8df;--sky-bottom:#d6e8e8;--weather-glow:rgba(255,231,180,.7);--weather-ink:#1f2927;--weather-muted:rgba(31,41,39,.68); }
body[data-weather="cloudy"] { --sky-top:#748896;--sky-mid:#a8b0b4;--sky-bottom:#d3d5d3;--weather-glow:rgba(218,232,236,.38);--weather-ink:#1f2927;--weather-muted:rgba(31,41,39,.68); }
body[data-weather="fog"] { --sky-top:#88969b;--sky-mid:#b5bec0;--sky-bottom:#d9dcda;--weather-glow:rgba(235,241,239,.36);--weather-ink:#1f2927;--weather-muted:rgba(31,41,39,.68); }
body[data-weather="fog"] .live-weather-fog { opacity:.9; }
body[data-weather="drizzle"] { --sky-top:#537f94;--sky-mid:#84a8b5;--sky-bottom:#b9cdd0;--weather-ink:#f7fbfc;--weather-muted:rgba(247,251,252,.72); }
body[data-weather="drizzle"] .live-weather-rain { opacity:.38; }
body[data-weather="rain"] { --sky-top:#183949;--sky-mid:#416776;--sky-bottom:#78909a;--weather-ink:#f2f8f9;--weather-muted:rgba(242,248,249,.7); }
body[data-weather="rain"] .live-weather-rain { opacity:.72; }
body[data-weather="heavy-rain"] { --sky-top:#102a38;--sky-mid:#294e5d;--sky-bottom:#587784;--weather-ink:#f1f8fa;--weather-muted:rgba(241,248,250,.68); }
body[data-weather="heavy-rain"] .live-weather-rain { opacity:1; }
body[data-weather="heavy-rain"] .live-weather-cloud { opacity:1; filter:blur(29px) brightness(.48); }
body[data-weather="snow"] { --sky-top:#a9c5dc;--sky-mid:#d8e6ef;--sky-bottom:#f7fbff;--weather-ink:#20394c;--weather-muted:rgba(32,57,76,.66); }
body[data-weather="snow"] .live-weather-snow { opacity:1; }
body[data-weather="thunder"] { --sky-top:#080a1a;--sky-mid:#20213d;--sky-bottom:#44465e;--weather-ink:#f5f4ff;--weather-muted:rgba(245,244,255,.7); }
body[data-weather="thunder"] .live-weather-rain { opacity:.94; }
body[data-weather="thunder"] .live-weather-cloud { opacity:1; filter:blur(27px) brightness(.32); }
body[data-weather="thunder"] .live-weather-lightning { animation:live-lightning 5.2s infinite; }
body[data-period="morning"] { --sky-top:#4b9fd1;--sky-mid:#9ccfdf;--sky-bottom:#f4d8b8;--weather-glow:rgba(255,205,133,.82);--weather-ink:#fff;--weather-muted:rgba(255,255,255,.76); }
body[data-period="morning"] .live-weather-background { background:radial-gradient(circle at 18% 72%,rgba(255,226,168,.9) 0 3%,rgba(255,196,116,.32) 12%,transparent 35%),linear-gradient(180deg,var(--sky-top),var(--sky-mid) 58%,var(--sky-bottom)); }
body[data-period="sunset"] { --sky-top:#4d5994;--sky-mid:#c45f91;--sky-bottom:#ffad68;--weather-ink:#fff8f4;--weather-muted:rgba(255,248,244,.72); }
body[data-period="sunset"] .live-weather-background { background:radial-gradient(ellipse at 78% 75%,rgba(255,208,112,.96),transparent 31%),linear-gradient(180deg,var(--sky-top),var(--sky-mid) 55%,var(--sky-bottom)); }
body[data-period="night"] { --sky-top:#061524;--sky-mid:#102f4c;--sky-bottom:#315777;--weather-ink:#edf5ff;--weather-muted:rgba(237,245,255,.66); }
body[data-period="night"] .live-weather-background { background:radial-gradient(circle at 81% 12%,rgba(231,242,255,.9) 0 2.4%,rgba(163,199,231,.2) 8%,transparent 24%),linear-gradient(180deg,var(--sky-top),var(--sky-mid) 55%,var(--sky-bottom)); }
body[data-period="night"] .live-weather-stars { opacity:1; }
@keyframes live-cloud-drift { to { transform:translate3d(18vw,4vh,0) scale(1.14); } }
@keyframes live-rainfall { to { transform:translate3d(-13px,125vh,0) rotate(8deg); } }
@keyframes live-snowfall { to { transform:translate3d(42px,112vh,0) rotate(280deg); } }
@keyframes live-fog-drift { to { transform:translateX(7vw) scale(1.08); } }
@keyframes live-lightning { 0%,68%,72%,76%,100%{opacity:.11}69%{opacity:.92}70%{opacity:.22}73%{opacity:.72}75%{opacity:.14} }
@media (prefers-reduced-motion:reduce) { .live-weather-background *,.live-weather-background *::before { animation:none !important; } }

/* 登録時の音声問診。既存の画面には影響しない新規クラスのみ */
/* カードは置かず、アプリと同じ地の色の上にオーブだけを大きく置く */
.intake-dialog {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px 22px calc(24px + env(safe-area-inset-bottom, 0px));
  /* オーブを浮き立たせるため、アプリと同じ色味のまま暗く落とす */
  background:
    radial-gradient(ellipse at 50% 36%, rgba(156, 160, 180, 0.34), transparent 58%),
    radial-gradient(ellipse at 86% 78%, rgba(178, 140, 113, 0.24), transparent 48%),
    linear-gradient(180deg, #5a5f69 0%, #67686d 30%, #786f68 64%, #8a7a6e 100%);
}

.intake-dialog.is-hidden {
  display: none;
}

.intake-card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  width: min(100%, 440px);
  /* 内容が画面より高いときは、上下に余白を残したままスクロールさせる */
  margin: auto;
  text-align: center;
}

.intake-progress {
  width: min(100%, 190px);
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.intake-progress i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: rgba(244, 232, 222, 0.72);
  transition: width 0.35s ease;
}

/* 声の大きさは --intake-level (0〜1) で受け取り、オーブと波紋に反映する */
.intake-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(74vw, 320px);
  aspect-ratio: 1;
  margin: 4px 0;
  transition: width 260ms ease;
}

/* 選択肢を出しているときはオーブを小さくして、画面に収める */
.intake-dialog.is-compact .intake-stage {
  width: min(44vw, 190px);
}

/* 輪郭を出さないため、外へ向かって透明になるグラデーションで描く */
.intake-orb {
  position: relative;
  z-index: 1;
  width: 74%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.2) 15%, rgba(255, 255, 255, 0) 36%),
    radial-gradient(circle at 50% 52%,
      rgba(101, 160, 140, 0.97) 0%,
      rgba(118, 173, 152, 0.95) 32%,
      rgba(155, 195, 179, 0.88) 52%,
      rgba(200, 220, 212, 0.66) 68%,
      rgba(240, 247, 244, 0.3) 82%,
      rgba(255, 255, 255, 0) 94%);
  filter: blur(3px);
  transform: scale(calc(1 + var(--intake-level, 0) * 0.07));
  transition: transform 90ms linear;
}

.intake-orb:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 10px;
}

/* 声が大きいほど、まわりの空気がふわりと明るくなる */
.intake-stage::before {
  content: "";
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.4) 26%, rgba(178, 214, 202, 0.26) 48%, rgba(255, 255, 255, 0) 70%);
  opacity: var(--intake-level, 0);
  transform: scale(calc(1.1 + var(--intake-level, 0) * 0.55));
  transition: opacity 110ms linear, transform 110ms linear;
  filter: blur(9px);
  pointer-events: none;
}

/* オーブの背後で白くにじみ、暗い地から浮き上がって見せる */
.intake-stage::after {
  content: "";
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.42) 52%, rgba(216, 234, 228, 0.2) 66%, rgba(255, 255, 255, 0) 82%);
  transform: scale(1.34);
  filter: blur(18px);
  pointer-events: none;
}

.intake-ripple {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}

.intake-ripple i {
  position: absolute;
  width: 74%;
  aspect-ratio: 1;
  border: 2px solid rgba(219, 236, 230, 0.54);
  border-radius: 50%;
  opacity: 0;
  filter: blur(1.5px);
}

.intake-dialog.is-listening .intake-ripple i {
  animation: intakeRippleOut 2.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.intake-ripple i:nth-child(2) { animation-delay: 0.65s; }
.intake-ripple i:nth-child(3) { animation-delay: 1.3s; }
.intake-ripple i:nth-child(4) { animation-delay: 1.95s; }

/* オーブの縁からにじみ出て、外へ広がりながら消える */
@keyframes intakeRippleOut {
  0% { transform: scale(1); opacity: 0; }
  16% { opacity: 0.6; }
  100% { transform: scale(1.42); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .intake-dialog.is-listening .intake-ripple i { animation-duration: 5s; }
  .intake-orb { transition: none; }
}

.intake-card > span {
  color: rgba(238, 233, 227, 0.62);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.intake-card > span:empty {
  display: none;
}

.intake-ask {
  margin: 0;
  max-width: 22ch;
  /* 真っ白を避け、暖かみのある淡い色にする */
  color: rgba(250, 246, 241, 0.94);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
}

.intake-hint {
  min-height: 1.1em;
  margin: 0;
  max-width: 26ch;
  color: rgba(238, 233, 227, 0.76);
  font-size: 0.76rem;
  line-height: 1.6;
}

.intake-choices {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  margin-top: 2px;
}

.intake-choices.is-hidden,
.intake-actions button.is-hidden,
.intake-links button.is-hidden,
.auth-age.is-hidden {
  display: none;
}

.intake-choices button {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  /* 暗い地に浮かぶ薄い面。真っ白にはしない */
  background: rgba(249, 244, 239, 0.14);
  color: rgba(250, 246, 241, 0.92);
  font: inherit;
  font-weight: 600;
  padding: 13px 14px;
  backdrop-filter: blur(6px);
}

.intake-choices button.is-selected {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(230, 202, 187, 0.34);
  color: rgba(252, 248, 244, 0.98);
}

.intake-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 320px;
  margin-top: 2px;
}

.intake-actions button {
  flex: 1;
  border-radius: 14px;
  font-weight: 700;
  padding: 13px;
}

.intake-primary {
  /* 塗りつぶさず、地が透ける淡いすりガラスにして浮かせない */
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(230, 202, 187, 0.2);
  color: rgba(252, 248, 244, 0.96);
  box-shadow: 0 6px 18px rgba(24, 22, 26, 0.12);
  backdrop-filter: blur(8px);
}

.intake-back {
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(249, 244, 239, 0.08);
  color: rgba(250, 246, 241, 0.9);
  backdrop-filter: blur(6px);
}

.intake-links {
  display: flex;
  gap: 18px;
  justify-content: center;
}

.intake-links button {
  border: 0;
  background: transparent;
  color: rgba(238, 233, 227, 0.72);
  font-size: 0.74rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 2px;
}

.intake-summary {
  width: 100%;
  max-width: 340px;
  border-radius: 18px;
  background: rgba(249, 244, 239, 0.14);
  color: rgba(250, 246, 241, 0.94);
  font-size: 0.94rem;
  line-height: 1.8;
  padding: 18px;
  backdrop-filter: blur(6px);
}

.intake-note {
  margin: 0;
  max-width: 30ch;
  color: rgba(238, 233, 227, 0.68);
  font-size: 0.72rem;
  line-height: 1.65;
}

/* 記録後の提案。完了カードの中に3枠を並べる */
.suggestion-list {
  display: grid;
  gap: 10px;
}

.suggestion-list:empty {
  display: none;
}

.suggestion-card {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.6);
  padding: 14px 16px;
  text-align: left;
}

.suggestion-card > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.suggestion-card > strong {
  font-size: 0.98rem;
  line-height: 1.5;
}

.suggestion-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.suggestion-play {
  justify-self: start;
  margin-top: 6px;
  border: 1px solid rgba(28, 43, 40, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 7px 15px;
}

.suggestion-notice {
  margin: 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.6;
}

.suggestion-notice:empty {
  display: none;
}

/* アカウント画面のプロフィール編集 */
.account-profile {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.account-profile.is-hidden {
  display: none;
}

.account-profile label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.account-profile input {
  width: 100%;
  border: 1px solid rgba(28, 43, 40, 0.14);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 12px;
}

.account-secondary {
  border: 1px solid rgba(28, 43, 40, 0.14);
  border-radius: 13px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  padding: 11px;
}

.account-profile p {
  min-height: 1.2em;
  margin: 0;
  color: var(--muted);
  font-size: 0.74rem;
}