:root { background: #ded6d0; }
body { min-height: 100dvh; display: flex; justify-content: center; background: #ded6d0; }
#app { width: min(100%, 410px); max-width: 410px; display: block; grid-template-columns: none; background: #fcfaf6; box-shadow: 0 0 34px rgba(62, 37, 43, .16); }
.brand { display: none; }
.portrait {
  overflow: hidden;
  padding: 0;
  background: #eaded6;
}
.portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 24%;
}
.welcome > .portrait {
  width: 148px;
  height: 184px;
  border-radius: 74px 74px 22px 22px;
  box-shadow: 0 10px 28px rgba(82, 44, 54, .16);
}
.chat-head .portrait {
  width: 44px;
  height: 52px;
  border-radius: 22px 22px 9px 9px;
}
.welcome p small { color: #8b7c75; }
.brief.compact { margin: 18px 0; }
.brief.compact p { line-height: 1.65; }
fieldset legend small { display: block; margin-top: 5px; color: #8d7d75; font-weight: 400; }
.topics .core-topic { font-weight: 600; }
.conversation-intro { padding: 18px 0 12px; }
.conversation-intro h2 { margin-bottom: 4px; }
.quick-start { margin-top: 8px; padding: 17px; border: 1px solid #eadfd7; border-radius: 18px; background: linear-gradient(145deg,#fffdf9,#f5ece6); }
.quick-start > strong { display: block; margin-bottom: 12px; font-size: 13px; color: #713044; }
.quick-grid { display: grid; gap: 8px; }
.quick-grid button { width: 100%; border: 1px solid #e5d6ce; border-radius: 12px; padding: 12px 13px; background: rgba(255,255,255,.78); color: #4e4040; text-align: left; font-size: 12px; line-height: 1.5; }
.quick-grid button::after { content: '  ›'; color: #9b5868; }
.bottom { background: linear-gradient(to top,#fcfaf6 82%,rgba(252,250,246,0)); }
form { box-shadow: 0 8px 24px rgba(76,48,54,.08); }
.app-nav { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; margin: 8px -14px -10px; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid #eee2db; background: rgba(252,250,246,.96); }
.app-nav button { position: relative; border: 0; background: transparent; color: #9a8c85; padding: 5px 2px; font-size: 10px; }
.app-nav button > span { display: block; margin-bottom: 3px; font-size: 15px; }
.app-nav button.active { color: #772e42; font-weight: 600; }
.app-nav small { position: absolute; top: -5px; left: 50%; transform: translateX(-8%); white-space: nowrap; border-radius: 8px; padding: 1px 4px; background: #efe2dc; color: #92586a; font-size: 7px; }
.record-body { flex: 1; overflow: auto; padding: 30px 24px 20px; }
.record-lead { margin: 0 0 22px; color: #85766f; font-size: 13px; }
.history-list { display: grid; gap: 10px; }
.history-item { position: relative; overflow: hidden; border: 1px solid #e8dbd3; border-radius: 16px; background: #fffdf9; }
.history-item > button:first-child { width: 100%; display: grid; gap: 5px; padding: 15px 44px 15px 15px; border: 0; background: transparent; color: inherit; text-align: left; }
.history-item strong { overflow: hidden; color: #553d42; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.history-item span { overflow: hidden; color: #85766f; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.history-item small { color: #aa9991; font-size: 9px; }
.history-delete { position: absolute; top: 50%; right: 10px; width: 28px; height: 28px; transform: translateY(-50%); border: 0; border-radius: 50%; background: #f5ece7; color: #9c7c80; font-size: 16px; }
.history-empty { padding: 24px 16px; border: 1px dashed #dfd1c9; border-radius: 16px; color: #94857e; text-align: center; font-size: 12px; line-height: 1.7; }
.check-card,.record-note { padding: 18px; border: 1px solid #e8dbd3; border-radius: 18px; background: #f8f1ec; }
.check-card strong,.record-note strong { display: block; margin-bottom: 12px; color: #713044; }
.check-card button { display: block; width: 100%; margin-top: 8px; border: 1px solid #e2d3cb; border-radius: 12px; padding: 12px; background: #fffdf9; color: #4d4040; text-align: left; }
.check-card button::after { content: ' ›'; float: right; color: #9b5868; }
.record-note { margin-top: 16px; background: #fffdf9; }
.record-note p { margin: 0; color: #81736d; font-size: 12px; line-height: 1.8; }
.record-nav { padding: 0 14px; background: #fcfaf6; }
.record-nav .app-nav { margin: 0 -14px; }
.profile-body { flex: 1; overflow: auto; padding: 22px 20px 18px; }
.profile-card { display: flex; align-items: center; gap: 13px; padding: 16px; border: 1px solid #e7dad2; border-radius: 18px; background: linear-gradient(145deg,#f7ece7,#fffdf9); }
.profile-card .portrait { width: 58px; height: 70px; flex: 0 0 auto; border-radius: 29px 29px 11px 11px; }
.profile-card strong { color: #673044; }
.profile-card p { margin: 4px 0 0; color: #8c7b73; font-size: 11px; }
.section-label { display: block; margin: 22px 4px 8px; color: #9a7a70; font-size: 11px; letter-spacing: 2px; }
.setting-list { overflow: hidden; border: 1px solid #eaded7; border-radius: 16px; background: #fffdf9; }
.setting-list > div,.setting-list > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 15px; border: 0; border-bottom: 1px solid #eee4de; background: transparent; color: inherit; text-align: left; }
.setting-list > :last-child { border-bottom: 0; }
.setting-list span strong,.setting-list span small { display: block; }
.setting-list span strong { font-size: 13px; }
.setting-list span small { margin-top: 4px; color: #94857e; font-size: 10px; }
.setting-list em { color: #9b5969; font-size: 10px; font-style: normal; white-space: nowrap; }
.privacy-card { margin-top: 18px; padding: 15px; border-radius: 14px; background: #f3ebe6; }
.privacy-card strong { color: #713044; font-size: 12px; }
.privacy-card p { margin: 7px 0 0; color: #81736d; font-size: 11px; line-height: 1.7; }
.memory-card { margin-bottom: 14px; padding: 14px; border: 1px solid #eaded7; border-radius: 16px; background: #fffdf9; }
.memory-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.memory-switch span strong,.memory-switch span small { display: block; }
.memory-switch span strong { font-size: 13px; }
.memory-switch span small { margin-top: 4px; color: #94857e; font-size: 10px; }
.memory-switch .primary { padding: 9px 13px; font-size: 11px; }
.memory-form { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border: 0; border-top: 1px solid #eee4de; border-radius: 0; }
.memory-form label { display: grid; gap: 5px; color: #766862; font-size: 10px; }
.memory-form input,.memory-form select,.memory-form textarea,.memory-list textarea { width: 100%; border: 1px solid #dfd1c8; border-radius: 9px; background: #fff; padding: 9px; color: #302b2d; }
.memory-form .primary { justify-self: start; padding: 10px 14px; font-size: 11px; }
.memory-guide { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #f7f0eb; color: #766862; font-size: 11px; line-height: 1.6; }
.user-memory-tool { justify-content: flex-end; margin-top: 4px; }
.user-memory-tool .message-action { opacity: .78; }
.memory-list { display: grid; gap: 9px; margin-top: 13px; }
.memory-list article { padding: 10px; border-radius: 11px; background: #f6efea; }
.memory-list article > small { display: block; margin-bottom: 6px; color: #8f6670; }
.memory-list article > div { display: flex; justify-content: flex-end; gap: 8px; }
.memory-empty { color: #94857e; font-size: 11px; }
.danger { color: #a13f4c; }
.intent-bar { display: flex; gap: 7px; overflow-x: auto; padding: 7px 0 2px; }
.intent-bar button { flex: 0 0 auto; border: 1px solid #e3d5cd; border-radius: 999px; padding: 7px 11px; background: #fffdf9; color: #806f68; font-size: 11px; }
.intent-bar button.selected { border-color: #9d6372; background: #f1e3e3; color: #772e42; font-weight: 600; }
.voice-composer { position: relative; align-items: center; min-height: 62px; padding: 8px 8px 8px 9px; border-color: #e2d3ca; border-radius: 19px; background: linear-gradient(145deg,#fffdfa,#fbf4ef); box-shadow: 0 10px 28px rgba(80,45,55,.09); transition: .25s ease; }
.voice-composer.is-listening { border-color: #a86a79; background: linear-gradient(145deg,#fff9f8,#f5e6e8); box-shadow: 0 12px 32px rgba(119,46,66,.16); }
.composer-main { position: relative; flex: 1; min-width: 0; }
.composer-main textarea { width: 100%; }
.composer-main small { display: block; padding: 0 8px 5px; color: #8d5d68; font-size: 9px; letter-spacing: .4px; }
.speech-input { position: relative; display: grid; place-items: center; align-self: center; width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid #e4d4d0; border-radius: 50%; background: linear-gradient(145deg,#f8ece9,#ead9d7); color: #772e42; box-shadow: inset 0 1px 0 rgba(255,255,255,.8),0 5px 12px rgba(96,53,64,.12); }
.speech-input svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.speech-input i { position: absolute; inset: -5px; border: 1px solid transparent; border-radius: 50%; }
.is-listening .speech-input { background: linear-gradient(145deg,#8d4055,#682438); color: #fff; }
.is-listening .speech-input i { border-color: rgba(119,46,66,.3); animation: voice-pulse 1s infinite alternate; }
.voice-wave { display: flex; align-items: center; gap: 3px; height: 25px; padding: 0 8px; }
.voice-wave b { width: 3px; height: 7px; border-radius: 3px; background: #a35d70; animation: wave 700ms ease-in-out infinite alternate; }
.voice-wave b:nth-child(2),.voice-wave b:nth-child(6){animation-delay:120ms}.voice-wave b:nth-child(3),.voice-wave b:nth-child(5){animation-delay:240ms}.voice-wave b:nth-child(4){animation-delay:360ms}
.mic-help { margin: 8px 0; padding: 12px 14px; border: 1px solid #ecd8d5; border-radius: 14px; background: linear-gradient(145deg,#fff9f6,#f8eeea); }
.mic-help span { color: #783348; font-size: 12px; font-weight: 600; }
.mic-help p { margin: 5px 0 2px; color: #725f5c; font-size: 11px; line-height: 1.55; }
.mic-help small { color: #a38e87; font-size: 9px; }
.account-delete-confirm { margin-bottom: 14px; padding: 16px; border: 1px solid #e2c8c8; border-radius: 14px; background: #fff7f5; }
.account-delete-confirm p { margin: 7px 0 12px; color: #7d6965; font-size: 11px; }
.danger-solid { border: 0; border-radius: 9px; padding: 10px 13px; background: #a13f4c; color: #fff; font-size: 11px; }
@keyframes voice-pulse { from { box-shadow: 0 0 0 0 rgba(119,46,66,.25); } to { box-shadow: 0 0 0 8px rgba(119,46,66,0); } }
@keyframes wave { from { height: 5px; opacity: .55; } to { height: 22px; opacity: 1; } }
.auth-page { max-width: 520px; }
.account-form { display: grid; gap: 12px; margin: 20px 0 8px; padding: 0; border: 0; background: transparent; }
.account-form label { display: grid; gap: 6px; color: #6f625d; font-size: 11px; }
.account-form input { width: 100%; border: 1px solid #dacbc0; border-radius: 10px; background: #fffdf9; padding: 12px; color: #302b2d; }
.account-form .primary { width: 100%; justify-content: center; }
.auth-switch { width: 100%; margin-top: 5px; text-align: center; }
.voice-note { align-self: center; color: #aa9991; font-size: 9px; }
@media (max-width: 480px) {
  html,body { width: 100%; overflow: hidden; }
  body { display: block; background: #fcfaf6; }
  #app { width: 100%; max-width: none; min-height: 100dvh; box-shadow: none; overflow: hidden; }
  .panel { width: 100%; height: 100dvh; min-height: 0; overflow: hidden; }
  .welcome { padding: 22px 18px; }
  .chat-head { min-height: 58px; padding: 8px 12px; }
  .chat-head>div { gap: 9px; }
  .chat-head .portrait { width: 36px; height: 43px; border-radius: 18px 18px 8px 8px; }
  .chat-head strong { font-size: 14px; }
  .chat-head p { margin-top: 2px; font-size: 9px; line-height: 1.4; }
  .chat-head .quiet { padding: 6px; }
  .topics { padding: 6px 6px 2px; gap: 1px; }
  .topics button { min-width: 0; padding: 7px 2px; font-size: 10px; white-space: nowrap; }
  .chat-body { padding: 3px 13px 6px; }
  .conversation-intro { padding: 9px 0 6px; }
  .conversation-intro h2 { margin: 3px 0 1px; font-size: 17px; line-height: 1.45; }
  .conversation-intro p { margin: 0; font-size: 10px; }
  .eyebrow { font-size: 9px; letter-spacing: 2px; }
  .quick-start { margin-top: 5px; padding: 11px; border-radius: 14px; }
  .quick-start > strong { margin-bottom: 7px; font-size: 11px; }
  .quick-grid { gap: 6px; }
  .quick-grid button { padding: 9px 10px; border-radius: 10px; font-size: 11px; line-height: 1.4; }
  .message { margin: 10px 0; }
  .message p { margin: 3px 0; padding: 10px 12px; font-size: 13px; line-height: 1.65; }
  .bottom { padding: 0 10px calc(3px + env(safe-area-inset-bottom)); }
  .intent-bar { gap: 5px; padding: 4px 0 1px; }
  .intent-bar button { padding: 5px 9px; font-size: 10px; }
  .status { min-height: 13px; margin: 3px 0; font-size: 10px; line-height: 1.35; }
  .voice-composer { min-height: 52px; padding: 5px 6px; border-radius: 16px; gap: 5px; }
  .speech-input { width: 38px; height: 38px; }
  .speech-input svg { width: 18px; height: 18px; }
  .composer-main textarea { min-height: 38px; max-height: 58px; padding: 7px 5px; font-size: 13px; }
  .voice-composer .primary { padding: 10px 12px; font-size: 11px; }
  .bottom footer { padding-top: 3px; font-size: 8px; line-height: 1.3; }
  .bottom footer .quiet { padding: 4px; font-size: 9px; }
  .app-nav { margin: 4px -10px -3px; padding: 4px 7px calc(4px + env(safe-area-inset-bottom)); }
  .app-nav button { padding: 2px; font-size: 9px; }
  .app-nav button > span { margin-bottom: 1px; font-size: 13px; }
  .mic-help { margin: 4px 0; padding: 8px 10px; }
  .mic-help p { margin: 3px 0 1px; font-size: 10px; }
}
@media (max-width: 360px) {
  .chat-head { padding-inline: 9px; }
  .topics button { font-size: 9px; }
  .chat-body { padding-inline: 10px; }
  .bottom { padding-inline: 8px; }
  .voice-composer .primary { padding-inline: 9px; }
}
@media (max-height: 700px) and (max-width: 480px) {
  .chat-head { min-height: 52px; }
  .chat-head .portrait { width: 32px; height: 38px; }
  .topics { padding-top: 3px; }
  .conversation-intro { padding-top: 5px; }
  .conversation-intro p { display: none; }
  .quick-start { padding: 9px; }
  .quick-grid button { padding-block: 7px; }
  .bottom footer { display: none; }
}