/* 一隅：共享主题。待办外框宽度与每日卡片尺寸见 .wide-page / .day-card。 */
:root {
  --background:#f2eee8;
  --paper:#fffcf7;
  --ink:#393029;
  --muted:#80756a;
  --accent:#8b4c23;
  --accent-soft:#f3e6d8;
  --line:#e6ded4;
  --danger:#a04335;
  --radius:22px;
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  color:var(--ink);
  background:var(--background)
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--background)
}
button,input,textarea,select {
  font:inherit
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
input,textarea,select {
  color:var(--ink)
}
textarea {
  resize:vertical
}
input::placeholder,textarea::placeholder {
  color:#a3978b
}
a {
  color:inherit;
  text-decoration:none
}
button,a,input,textarea {
  outline-offset:4px
}
:focus-visible {
  outline:2px solid var(--accent)
}
[hidden] {
  display:none!important
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.background {
  position:fixed;
  inset:0;
  display:flex;
  justify-content:flex-end;
  overflow:hidden;
  pointer-events:none;
  opacity:.075
}
.background img {
  height:100%;
  width:auto;
  max-width:none;
  flex-shrink:0;
  object-fit:contain;
  transform:translateX(8%);
  mask-image:linear-gradient(to right,transparent,black 25%,black 80%,transparent)
}
.page,.cover-page {
  position:relative;
  width:min(1280px,92%);
  margin:0 auto;
  padding:28px 0 22px
}
/* 外框固定占屏幕宽度：添加待办或天数不会改变此宽度。 */
.wide-page {
  width:92%;
  max-width:none
}
.site-header {
  display:flex;
  align-items:center;
  gap:24px;
  min-height:46px
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:21px;
  letter-spacing:3px;
  flex-shrink:0
}
.brand-mark {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:var(--accent);
  border:1px solid #cbb6a0;
  border-radius:12px;
  font-family:SimSun,serif
}
.brand small {
  display:block;
  margin-top:4px;
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--muted)
}
.site-nav {
  display:flex;
  gap:6px;
  margin-left:auto;
  padding:4px;
  background:#fffcf780;
  border:1px solid var(--line);
  border-radius:24px
}
.site-nav a {
  font-size:13px;
  padding:8px 20px;
  border-radius:20px
}
.site-nav a:hover,.site-nav a[aria-current=page] {
  background:var(--accent-soft);
  color:var(--accent)
}
.today {
  font-size:11px;
  color:var(--muted);
  white-space:nowrap
}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:10px;
  color:#a08a73;
  font-size:11px;
  margin:27px 0 0
}
.breadcrumb a:hover {
  color:var(--accent)
}
.eyebrow {
  margin:0 0 12px;
  color:var(--accent);
  font-size:10px;
  letter-spacing:1.6px;
  font-weight:600
}
h1,h2 {
  font-family:"Songti SC","Noto Serif SC",Georgia,SimSun,serif;
  font-weight:500
}
h1,h2,h3,p {
  overflow-wrap:anywhere
}
h3 {
  font-size:14px;
  font-weight:500;
  margin:0
}
.primary-button,.secondary-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  border:1px solid var(--accent);
  border-radius:10px;
  padding:12px 20px;
  font-size:13px;
  white-space:nowrap;
  transition:background .15s
}
.primary-button {
  background:var(--accent);
  color:#fffaf3
}
.primary-button:hover:not(:disabled) {
  background:#713e1e
}
.secondary-button {
  background:transparent;
  color:var(--accent);
  border-color:#c3a68a
}
.secondary-button:hover:not(:disabled) {
  background:var(--accent-soft)
}
.text-button {
  padding:5px 0;
  border:0;
  background:none;
  color:var(--accent);
  font-size:12px;
  white-space:nowrap
}
.text-button:hover:not(:disabled) {
  text-decoration:underline;
  text-underline-offset:3px
}
.page-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:32px;
  color:#9c8d7a;
  font-size:10px;
  line-height:1.8
}
.page-footer span:last-child {
  font-size:8px;
  letter-spacing:1.4px
}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin:34px 0 27px
}
.page-heading h1 {
  font-size:clamp(27px,2.7vw,36px);
  letter-spacing:2px;
  margin:0 0 12px
}
.page-heading>div>p:last-child {
  font-size:13px;
  color:var(--muted);
  margin:0;
  line-height:1.8
}
.quiet-label {
  font-size:9px;
  color:#a58c72;
  letter-spacing:1.5px
}
.panel {
  background:#fffcf7f2;
  border:1px solid white;
  border-radius:var(--radius);
  box-shadow:0 14px 42px #503b2610;
  min-width:0
}
.save-status {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:13px
}
.save-status p {
  margin:0;
  font-size:11px;
  color:#988b7d;
  line-height:1.8;
  overflow-wrap:anywhere
}
.save-status .error {
  color:var(--danger)
}
/* 一级视觉封面：原插画保持比例，不添加功能表单。 */
.cover-page {
  width:min(1340px,90%);
  min-height:100svh;
  display:flex;
  flex-direction:column
}
.cover-header {
  align-items:flex-start
}
.cover-header .brand {
  padding-top:3px
}
.cover-entry {
  margin-left:auto;
  flex-shrink:0;
  text-align:right
}
.cover-entry-hint {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  margin:14px 5px 0;
  font-size:13px;
  font-weight:500;
  color:var(--accent);
  line-height:1.6
}
.cover-hint-arrow {
  width:28px;
  height:25px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:translateY(-4px)
}
.cover {
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  align-items:center;
  gap:30px;
  flex:1;
  min-height:650px;
  padding:35px 0
}
.cover-copy {
  position:relative;
  z-index:1;
  padding-left:20px
}
.cover-copy .eyebrow {
  font-size:9px;
  letter-spacing:2px
}
.cover-copy h1 {
  font-size:clamp(44px,5.2vw,72px);
  line-height:1.4;
  letter-spacing:5px;
  margin:28px 0 24px
}
.cover-copy h1 span {
  color:var(--accent)
}
.cover-kicker {
  margin:0;
  font-size:11px;
  letter-spacing:1.8px;
  color:var(--accent)
}
.cover-english {
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:17px;
  line-height:1.9;
  color:var(--muted)
}
.cover-description {
  font-size:15px;
  color:var(--muted);
  line-height:2.1;
  margin:0 0 32px
}
.cover-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:nowrap;
  padding:0;
  border:0;
  background:transparent
}
.cover-actions a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 18px;
  gap:10px;
  min-height:44px;
  border:1px solid #cab7a3;
  border-radius:18px;
  background:transparent;
  color:var(--ink);
  font-size:13px;
  white-space:nowrap;
  transition:background .15s,color .15s
}
.cover-actions a:hover,.cover-actions a:focus-visible {
  background:var(--accent-soft);
  color:var(--accent)
}
.cover-whisper {
  margin:28px 0 0;
  font-size:11px;
  color:#a2917c;
  letter-spacing:1px
}
.cover-art {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  height:min(73svh,690px);
  min-height:430px;
  isolation:isolate
}
.cover-art img {
  display:block;
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  mix-blend-mode:multiply;
  mask-image:linear-gradient(to right,transparent,black 12%,black 88%,transparent)
}
.art-ring {
  position:absolute;
  z-index:-1;
  width:78%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid #dbc7af88
}
.art-caption {
  position:absolute;
  bottom:0;
  right:4%;
  font-size:8px;
  letter-spacing:2px;
  color:#a18a70
}
.home-body .page-footer {
  margin-top:0;
  padding-bottom:6px
}
/* 二级待办：一行一个任务，每行独立横向滚动。 */
.todo-board {
  padding:30px 32px 22px;
  width:100%;
  overflow:hidden
}
.board-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  margin-bottom:28px
}
.board-top h2 {
  margin:0;
  font-size:28px
}
.board-top h2 span {
  font:12px "Microsoft YaHei",sans-serif;
  color:var(--muted);
  margin-left:12px;
  letter-spacing:1px
}
.board-top p {
  font-size:12px;
  color:var(--muted);
  margin:10px 0 0
}
.task-form {
  display:flex;
  gap:10px;
  width:min(520px,48%);
  flex-shrink:0
}
.task-form input {
  width:100%;
  min-width:0;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px;
  background:#fffdfa;
  font-size:13px
}
.board-guide {
  display:grid;
  grid-template-columns:235px minmax(0,1fr);
  gap:28px;
  border-top:1px solid var(--line);
  padding:18px 0 14px;
  color:#9a8570;
  font-size:11px
}
.board-guide small {
  font-size:10px;
  margin-left:14px;
  color:#b09e8b
}
.task-list {
  padding:0;
  margin:0;
  list-style:none;
  width:100%
}
.task {
  display:grid;
  grid-template-columns:235px minmax(0,1fr);
  gap:28px;
  padding:24px 0;
  border-top:1px solid var(--line);
  width:100%;
  min-width:0
}
.task-info {
  min-width:0;
  padding:10px 3px 0
}
.task-title {
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:15px;
  line-height:1.8;
  cursor:pointer;
  overflow-wrap:anywhere
}
.task-title input {
  width:18px;
  height:18px;
  margin:4px 0 0;
  flex-shrink:0;
  accent-color:var(--accent)
}
.task.done .task-title span {
  text-decoration:line-through;
  color:#a49a8e
}
.task-progress {
  font-size:11px;
  color:#a08d78;
  line-height:1.8;
  margin:16px 0 14px 29px
}
.task-actions {
  display:flex;
  gap:18px;
  margin-left:29px;
  flex-wrap:wrap
}
.delete {
  color:#9e8e7c;
  border:0;
  padding:5px 0;
  background:none;
  font-size:11px
}
.delete:hover {
  color:var(--danger)
}
.day-strip {
  display:flex;
  gap:20px;
  overflow-x:auto;
  overflow-y:hidden;
  min-width:0;
  max-width:100%;
  padding:2px 3px 15px;
  scrollbar-width:thin;
  scrollbar-color:#ceb69a #f2ebe1;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity
}
.day-card {
  flex:0 0 300px;
  width:300px;
  min-width:300px;
  padding:19px 19px 14px;
  border:1px solid #e3d7c8;
  border-radius:15px;
  background:#f8f2e9;
  scroll-snap-align:start
}
.day-card.has-note {
  border-color:#c9ad8b
}
.day-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:19px
}
.day-heading h3 {
  font-family:SimSun,serif;
  font-size:18px
}
.day-heading input {
  min-width:0;
  width:124px;
  font-size:10px;
  border:0;
  border-bottom:1px solid #dcccbb;
  background:transparent;
  padding:5px 0
}
.day-card label {
  display:block;
  font-size:11px;
  color:#9b856d;
  margin-bottom:10px
}
.task-note {
  display:block;
  width:100%;
  height:142px;
  min-height:100px;
  resize:vertical;
  border:1px solid #e7dbcc;
  border-radius:9px;
  background:#fffdfa;
  padding:11px 12px;
  font-size:12px;
  line-height:1.85
}
.day-status {
  font-size:10px;
  color:#ac9680;
  margin:12px 0 0
}
.day-status.error {
  color:var(--danger)
}
.todo-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:12px;
  color:var(--muted)
}
.empty-state {
  text-align:center;
  color:var(--muted);
  font-size:14px;
  padding:55px 0 68px;
  line-height:2
}
.empty-state>span {
  display:block;
  color:#b69776;
  font-size:35px;
  margin-bottom:12px
}
.empty-state small {
  display:block;
  color:#a19587;
  font-size:12px
}
.small-dialog {
  width:min(420px,calc(100vw - 32px));
  padding:32px;
  border:1px solid white;
  border-radius:20px;
  background:var(--paper);
  box-shadow:0 20px 70px #503b2633;
  color:var(--ink)
}
.small-dialog::backdrop {
  background:#39281955
}
.small-dialog h2 {
  font-size:24px;
  margin:0 0 16px
}
.small-dialog #extend-title {
  font-size:13px;
  color:var(--muted);
  line-height:1.8
}
.small-dialog input {
  width:100%;
  padding:11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:white
}
.dialog-hint {
  font-size:11px;
  color:#a18b73;
  line-height:1.9
}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:25px;
  margin-top:24px
}
/* 二级日记：过往记录在左，纸张书写区在右。 */
.diary-layout {
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:26px;
  align-items:start
}
.diary-sidebar {
  display:flex;
  flex-direction:column;
  gap:20px
}
.history-panel {
  padding:24px 20px
}
.history-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:17px
}
.history-heading h2 {
  font-family:"Microsoft YaHei",sans-serif;
  font-size:14px;
  margin:0
}
.history-heading h2 span {
  font-size:11px;
  color:#b2a18f;
  margin-left:5px
}
#diary-history-toggle,#chat-history-toggle {
  display:none
}
#diary-search {
  width:100%;
  padding:10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fffdfa;
  font-size:11px
}
.diary-list {
  list-style:none;
  padding:0;
  margin:15px 0 0;
  max-height:440px;
  overflow:auto;
  scrollbar-width:thin
}
.diary-row {
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid #eee6dc;
  padding:9px 0
}
.diary-open {
  text-align:left;
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  padding:8px 6px;
  border-radius:8px
}
.diary-open:hover,.diary-row.selected .diary-open {
  background:#f3eade
}
.diary-open strong {
  display:block;
  font-size:12px;
  font-weight:500;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}
.diary-open span {
  display:block;
  color:#9d8e7e;
  font-size:10px;
  margin-top:7px
}
.diary-open small {
  display:block;
  color:#8e8173;
  font-size:11px;
  margin-top:7px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.history-empty {
  font-size:12px;
  color:#9a8c7c;
  text-align:center;
  line-height:1.8;
  padding:20px 0
}
.companion-invitation {
  display:flex;
  align-items:center;
  gap:14px;
  padding:21px 18px;
  background:#efdfcb;
  border:1px solid #e0c9ae;
  border-radius:18px;
  transition:background .15s
}
.companion-invitation:hover {
  background:#ead5bc
}
.companion-invitation img {
  width:56px;
  height:56px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  border:2px solid #fffaf3
}
.companion-invitation .eyebrow {
  display:block;
  font-size:7px;
  letter-spacing:1px;
  margin-bottom:9px
}
.companion-invitation h3 {
  font-size:11px;
  line-height:1.8
}
.companion-invitation p {
  font-size:11px;
  color:var(--accent);
  margin:8px 0 0
}
.diary-editor {
  padding:36px 38px 28px
}
.diary-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  color:#9c8871;
  font-size:11px;
  margin-bottom:27px
}
.diary-meta input {
  width:145px;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  padding:7px 9px;
  font-size:12px
}
.field-label {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-bottom:9px
}
.field-label span {
  font-size:11px;
  color:#afa08f;
  margin-left:5px
}
.diary-title {
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  padding:12px 0;
  background:transparent;
  font-size:17px;
  margin-bottom:23px
}
.mood-picker {
  border:0;
  padding:0;
  margin:0 0 24px;
  display:flex;
  flex-wrap:wrap;
  gap:9px
}
.mood-picker legend {
  font-size:12px;
  color:var(--muted);
  margin-bottom:12px;
  padding:0
}
.mood-picker label {
  position:relative;
  cursor:pointer
}
.mood-picker input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.mood-picker span {
  display:block;
  border:1px solid var(--line);
  border-radius:22px;
  padding:8px 13px;
  color:#88796a;
  font-size:12px
}
.mood-picker input:checked+span {
  color:var(--accent);
  border-color:#caab8e;
  background:var(--accent-soft)
}
.mood-picker input:focus-visible+span {
  outline:2px solid var(--accent);
  outline-offset:3px
}
.mood-picker:disabled {
  opacity:.6
}
.diary-content {
  width:100%;
  min-height:390px;
  padding:14px 18px;
  border:1px solid #eae1d7;
  border-radius:12px;
  font-size:14px;
  line-height:32px;
  background:repeating-linear-gradient(#faf6ef,#faf6ef 31px,#eae3d880 31px,#eae3d880 32px);
  background-clip:padding-box
}
.editor-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:20px
}
.editor-footer>span {
  font-size:11px;
  color:#a19587
}
.editor-footer>div {
  display:flex;
  align-items:center;
  gap:20px
}
/* 三级橙：独立全高聊天框，输入区固定在底部。 */
.chat-page {
  width:min(1280px,92%);
  padding-bottom:20px
}
.chat-layout {
  display:grid;
  grid-template-columns:225px minmax(0,1fr);
  gap:22px;
  margin-top:25px;
  align-items:start
}
.chat-sidebar {
  padding:24px 18px
}
.chat-sidebar .secondary-button {
  width:100%;
  font-size:12px;
  padding:10px;
  margin:4px 0 16px
}
#chat-history {
  width:100%;
  font-size:12px;
  padding:10px 6px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fffdfa
}
.sidebar-note {
  font-size:12px;
  color:#a18c74;
  line-height:2;
  margin:27px 0 25px
}
.back-to-diary {
  display:block;
  border-top:1px solid var(--line);
  padding-top:18px;
  color:var(--accent);
  font-size:12px
}
.chat-room {
  height:max(640px,calc(100dvh - 160px));
  max-height:940px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:24px 30px 17px
}
.companion-card {
  display:flex;
  align-items:center;
  gap:15px;
  border-bottom:1px solid var(--line);
  padding-bottom:21px;
  flex-shrink:0
}
.companion-avatar {
  width:62px;
  height:62px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #f2dfc8
}
.companion-card .eyebrow {
  font-size:8px;
  margin-bottom:8px
}
.companion-card h1 {
  font-size:25px;
  margin:0
}
.companion-card h1 span {
  font:11px "Microsoft YaHei",sans-serif;
  color:#8f7962;
  margin-left:8px
}
.companion-card p:last-child {
  font-size:11px;
  color:#947d65;
  margin:8px 0 0;
  line-height:1.7
}
.chat-tag {
  margin-left:auto;
  color:#95806c;
  border:1px solid #dfd0bf;
  padding:5px 7px;
  font-size:10px;
  border-radius:6px;
  white-space:nowrap
}
.chat-messages {
  flex:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:24px 3px;
  scrollbar-width:thin
}
.chat-welcome {
  text-align:center;
  padding:55px 12px;
  color:var(--muted)
}
.welcome-spark {
  display:block;
  color:#bc8e5d;
  font-size:30px
}
.chat-welcome p {
  font:24px SimSun,serif;
  margin:22px 0 15px
}
.chat-welcome small {
  font-size:13px;
  line-height:2;
  color:#a38f7a
}
.message {
  display:flex;
  gap:12px;
  margin:0 0 22px;
  align-items:flex-start
}
.message-avatar {
  width:30px;
  height:30px;
  object-fit:cover;
  border-radius:50%;
  flex-shrink:0
}
.message-body {
  max-width:82%;
  min-width:0
}
.bubble {
  font-size:14px;
  line-height:1.95;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  padding:14px 18px;
  background:#f1e9dd;
  border-radius:0 15px 15px 15px;
  margin:0
}
.message time {
  display:block;
  color:#b1a291;
  font-size:10px;
  margin-top:7px
}
.message.user {
  flex-direction:row-reverse
}
.message.user .bubble {
  background:#ead6bf;
  color:#664525;
  border-radius:15px 0 15px 15px
}
.message.user time {
  text-align:right
}
.message.pending .bubble {
  color:#9c8770
}
.thinking-card {
  padding:15px 18px;
  border:1px dashed #cfb99e;
  background:#f7f0e5;
  border-radius:12px;
  max-width:82%;
  margin:0 0 20px 42px
}
.thinking-card h3 {
  font-size:11px;
  color:#967652;
  margin-bottom:10px
}
.thinking-content {
  font-size:11px;
  line-height:1.8;
  color:#a38c73;
  white-space:pre-wrap;
  max-height:130px;
  overflow:auto;
  scrollbar-width:thin
}
.chat-prompts {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin:0 0 14px;
  flex-shrink:0
}
.chat-prompts button {
  background:#faf5ed;
  border:1px solid var(--line);
  border-radius:22px;
  padding:8px 12px;
  color:#9a8168;
  font-size:11px
}
.chat-prompts button:hover:not(:disabled) {
  border-color:#c7a985
}
.chat-form {
  background:#fffdfa;
  border:1px solid #dcd0c2;
  border-radius:13px;
  padding:13px 15px;
  flex-shrink:0
}
.chat-form:focus-within {
  border-color:#b58b60
}
.chat-form textarea {
  width:100%;
  border:0;
  padding:0;
  background:none;
  min-height:44px;
  max-height:120px;
  font-size:14px;
  line-height:1.8
}
.chat-form textarea:focus-visible {
  outline:none
}
.chat-composer-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:8px
}
.chat-composer-footer>span {
  font-size:10px;
  color:#ab9c8b
}
.chat-composer-footer .primary-button {
  padding:9px 15px;
  font-size:12px
}
.chat-note {
  font-size:10px;
  line-height:1.8;
  color:#ab9b89;
  margin:8px 0 0;
  flex-shrink:0
}
.chat-room .save-status {
  flex-shrink:0;
  margin-top:9px
}
@media(max-width:1000px) {
  .today {
    display:none
  }
  .cover {
    min-height:570px
  }
  .cover-copy {
    padding-left:0
  }
  .cover-art {
    min-height:380px;
    height:62svh
  }
  .diary-layout {
    grid-template-columns:240px minmax(0,1fr);
    gap:20px
  }
  .diary-editor {
    padding:28px
  }
  .board-top {
    align-items:flex-start
  }
  .board-guide,.task {
    grid-template-columns:185px minmax(0,1fr);
    gap:22px
  }
  .task-form {
    width:48%
  }
  .task-title {
    font-size:14px
  }
  .chat-layout {
    grid-template-columns:185px minmax(0,1fr)
  }
  .chat-room {
    padding:22px
  }
  .chat-tag {
    font-size:9px
  }
  .quiet-label {
    display:none
  }
}
@media(max-width:650px) {
  .page,.cover-page,.wide-page,.chat-page {
    width:calc(100% - 32px);
    padding-top:20px
  }
  .site-header {
    gap:12px
  }
  .brand {
    font-size:18px;
    gap:9px
  }
  .brand small {
    font-size:7px;
    letter-spacing:.8px
  }
  .brand-mark {
    width:36px;
    height:36px
  }
  .site-nav a {
    padding:7px 13px;
    font-size:12px
  }
  .breadcrumb {
    margin-top:22px;
    font-size:10px
  }
  .background {
    justify-content:center
  }
  .background img {
    transform:none
  }
  .cover {
    display:flex;
    flex-direction:column-reverse;
    gap:12px;
    min-height:0;
    padding:20px 0 35px
  }
  .cover-art {
    height:34svh;
    min-height:225px;
    width:100%
  }
  .art-ring {
    width:58%
  }
  .art-caption {
    font-size:7px;
    right:6%
  }
  .cover-copy {
    text-align:center;
    width:100%
  }
  .cover-copy .eyebrow {
    font-size:7px;
    letter-spacing:1.4px
  }
  .cover-copy h1 {
    font-size:39px;
    letter-spacing:3px;
    line-height:1.45;
    margin:17px 0 14px
  }
  .cover-description {
    font-size:12px;
    line-height:1.9;
    margin-bottom:23px
  }
  .cover-actions {
    justify-content:flex-end;
    gap:8px
  }
  .cover-actions a {
    font-size:12px;
    padding:10px;
    gap:6px
  }
  .cover-header {
    gap:8px
  }
  .cover-entry-hint {
    font-size:12px;
    margin-top:12px;
    gap:7px
  }
  .cover-kicker {
    font-size:10px;
    letter-spacing:1.2px
  }
  .cover-english {
    font-size:14px;
    line-height:1.8
  }
  .cover-whisper {
    font-size:10px;
    margin-top:19px
  }
  .page-footer {
    flex-direction:column;
    gap:8px;
    text-align:center;
    margin-top:23px
  }
  .page-heading {
    margin:29px 0 23px
  }
  .page-heading h1 {
    font-size:25px;
    letter-spacing:1px
  }
  .page-heading>div>p:last-child {
    font-size:11px
  }
  .page-heading .eyebrow {
    font-size:8px
  }
  .todo-board {
    padding:24px 16px 18px
  }
  .board-top {
    display:block;
    margin-bottom:22px
  }
  .board-top h2 {
    font-size:24px
  }
  .board-top p {
    font-size:11px
  }
  .task-form {
    width:100%;
    margin-top:20px;
    gap:8px
  }
  .task-form input {
    font-size:12px;
    padding:11px
  }
  .primary-button,.secondary-button {
    font-size:12px;
    padding:11px 15px
  }
  .board-guide {
    display:none
  }
  .task {
    display:block;
    padding:23px 0
  }
  .task-info {
    padding:0 2px 17px
  }
  .task-progress {
    margin:9px 0 10px 29px
  }
  .task-actions {
    gap:22px
  }
  .day-strip {
    gap:16px;
    padding-bottom:13px
  }
  .day-card {
    flex-basis:90%;
    width:90%;
    min-width:0;
    padding:17px
  }
  .task-note {
    height:140px;
    font-size:13px
  }
  .day-heading h3 {
    font-size:17px
  }
  .todo-footer {
    font-size:10px;
    flex-wrap:wrap
  }
  .empty-state {
    padding:35px 0 45px;
    font-size:12px
  }
  .small-dialog {
    padding:26px
  }
  .small-dialog h2 {
    font-size:22px
  }
  .diary-layout {
    display:flex;
    flex-direction:column;
    gap:18px
  }
  .diary-sidebar {
    width:100%;
    gap:15px
  }
  .history-panel {
    padding:18px 20px
  }
  .history-heading {
    margin-bottom:0
  }
  #diary-history-toggle,#chat-history-toggle {
    display:block
  }
  #history-body,#chat-history-body {
    display:none
  }
  #history-body.mobile-open,#chat-history-body.mobile-open {
    display:block;
    padding-top:16px
  }
  .diary-list {
    max-height:260px
  }
  .companion-invitation {
    padding:15px 18px;
    gap:14px
  }
  .companion-invitation img {
    width:45px;
    height:45px
  }
  .companion-invitation .eyebrow {
    display:none
  }
  .companion-invitation h3 {
    font-size:12px
  }
  .companion-invitation p {
    margin-top:5px
  }
  .diary-editor {
    width:100%;
    padding:24px 20px
  }
  .diary-meta {
    font-size:10px;
    margin-bottom:23px
  }
  .diary-title {
    font-size:14px
  }
  .mood-picker {
    gap:7px
  }
  .mood-picker span {
    font-size:11px;
    padding:7px 10px
  }
  .diary-content {
    min-height:360px;
    padding:12px;
    font-size:13px
  }
  .editor-footer {
    gap:8px
  }
  .editor-footer>span {
    font-size:10px
  }
  .editor-footer>div {
    gap:13px
  }
  .chat-body {
    height:100dvh;
    overflow:hidden
  }
  .chat-page {
    height:100dvh;
    display:flex;
    flex-direction:column;
    padding-bottom:max(12px,env(safe-area-inset-bottom))
  }
  .chat-page .site-header {
    flex-shrink:0
  }
  .chat-page .breadcrumb {
    margin-top:15px;
    flex-shrink:0
  }
  .chat-layout {
    display:flex;
    flex-direction:column;
    gap:12px;
    min-height:0;
    flex:1;
    margin-top:15px
  }
  .chat-sidebar {
    width:100%;
    padding:13px 17px;
    flex-shrink:0
  }
  .chat-sidebar .history-heading h2 {
    font-size:12px
  }
  .chat-sidebar .back-to-diary {
    display:none
  }
  .sidebar-note {
    display:none
  }
  .chat-room {
    padding:17px 15px 12px;
    height:auto;
    min-height:0;
    max-height:none;
    width:100%;
    flex:1
  }
  .companion-card {
    gap:10px;
    padding-bottom:15px
  }
  .companion-avatar {
    width:43px;
    height:43px
  }
  .companion-card .eyebrow {
    display:none
  }
  .companion-card h1 {
    font-size:21px
  }
  .companion-card h1 span {
    font-size:10px;
    display:block;
    margin:5px 0 0
  }
  .companion-card p:last-child {
    display:none
  }
  .chat-tag {
    font-size:9px;
    padding:4px 6px
  }
  .chat-messages {
    padding:20px 0
  }
  .chat-welcome {
    padding:25px 5px
  }
  .chat-welcome p {
    font-size:21px
  }
  .chat-welcome small {
    font-size:11px
  }
  .message {
    gap:8px;
    margin-bottom:17px
  }
  .message-avatar {
    width:25px;
    height:25px
  }
  .message-body {
    max-width:86%
  }
  .bubble {
    padding:11px 13px;
    font-size:13px
  }
  .thinking-card {
    margin-left:33px;
    max-width:86%;
    padding:12px
  }
  .thinking-content {
    max-height:90px
  }
  .chat-prompts {
    gap:6px;
    margin-bottom:10px
  }
  .chat-prompts button {
    font-size:9px;
    padding:6px 8px
  }
  .chat-form {
    padding:10px 12px
  }
  .chat-form textarea {
    font-size:13px;
    min-height:36px;
    max-height:90px
  }
  .chat-composer-footer>span {
    font-size:8px
  }
  .chat-room .save-status p {
    font-size:9px
  }
  .chat-note {
    font-size:8px;
    margin-top:5px
  }
}
/* 窄手机屏幕：入口保持顶端右对齐，预留品牌与按钮之间的空间。 */
@media(max-width:360px) {
  .cover-header .brand {
    font-size:16px;
    letter-spacing:2px;
    gap:7px
  }
  .cover-header .brand-mark {
    width:32px;
    height:32px
  }
  .cover-actions {
    gap:6px
  }
  .cover-actions a {
    padding:10px 8px;
    gap:4px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important
  }
}