/* ═══════════════ 共同日记（2026-09-03 UI 大改：去 emoji、文字头像、胶囊输入、卡片化） ═══════════════ */

#diaryApp {
  background: var(--surface-page);
}

#diaryList {
  min-height: 0;
  color: var(--ink);
}

.diary-home-top,
.diary-section-label,
.diary-scroll,
.diary-footer {
  flex-shrink: 0;
}

/* ── 首页顶部：你的日记大卡片 ── */

.diary-home-top {
  padding: 14px 16px 10px;
}

.diary-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border: 1px solid rgba(166, 124, 82, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, #f8f1e6, #edf3ef);
  box-shadow: var(--shadow-float-sm);
  cursor: pointer;
  transition: transform 0.16s ease;
}

.diary-user-card:active {
  transform: scale(0.99);
}

html.dark-mode .diary-user-card {
  border-color: rgba(224, 186, 139, 0.16);
  background: linear-gradient(135deg, #34302a, #2c3333);
}

.diary-user-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  background: rgba(155, 117, 70, 0.13);
  color: #9b7546;
}

html.dark-mode .diary-user-icon {
  background: rgba(224, 186, 139, 0.14);
  color: #e0ba8b;
}

/* ── 分区标题 ── */

.diary-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 9px;
  color: var(--ink-light);
  font-size: calc(12px * var(--ui-font-scale, 1));
  font-weight: var(--font-wt-bold);
  letter-spacing: 0.5px;
}

.diary-section-line {
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--monet-blue);
}

.diary-section-count {
  color: var(--ink-subtle);
  font-size: calc(10px * var(--ui-font-scale, 1));
  font-weight: var(--font-wt-regular);
}

/* ── 滚动区 ── */

.diary-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px 12px;
  -webkit-overflow-scrolling: touch;
}

/* ── 行卡片 ── */

.diary-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  box-sizing: border-box;
  padding: 11px 12px;
  margin-bottom: 8px;
  border-radius: 13px;
  background: var(--surface-card);
  box-shadow: var(--shadow-float-sm);
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}

.diary-row:active {
  background: var(--surface-input);
  transform: scale(0.99);
}

.diary-entry-row {
  min-height: 74px;
}

/* ── 头像（有图=图片；无图=名字末字文字，底色由 JS 按 id 哈希） ── */

.diary-avatar-img,
.diary-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
}

.diary-avatar-img {
  background: var(--surface-input);
}

.diary-avatar-fallback {
  /* 底色/字色由 JS 内联设置，这里只兜底 */
  background: var(--monet-ice);
  color: var(--ink-light);
  font-size: 17px;
  font-weight: var(--font-wt-bold);
}

.diary-avatar--row {
  width: 42px;
  height: 42px;
}

.diary-avatar--detail {
  width: 34px;
  height: 34px;
  font-size: 15px;
}

.diary-avatar--comment {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.diary-avatar--select {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

/* ── 行文案 ── */

.diary-row-copy {
  flex: 1;
  min-width: 0;
}

.diary-row-title {
  overflow: hidden;
  color: var(--ink);
  font-size: calc(14px * var(--ui-font-scale, 1));
  font-weight: var(--font-wt-bold);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-row-subtitle,
.diary-row-meta {
  color: var(--ink-subtle);
  font-size: calc(11px * var(--ui-font-scale, 1));
  line-height: 1.45;
}

.diary-row-subtitle {
  margin-top: 3px;
}

.diary-row-meta {
  margin-top: 2px;
  opacity: 0.82;
}

.diary-row-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-row-muted {
  color: var(--ink-subtle);
}

/* ── 状态（圆点 + 文字，替代 emoji 标签） ── */

.diary-status {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  color: var(--ink-subtle);
  font-size: calc(10px * var(--ui-font-scale, 1));
  white-space: nowrap;
}

.diary-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-subtle);
  opacity: 0.5;
}

.diary-status-dot--done {
  background: #2e8b57;
  opacity: 1;
}

.diary-chevron {
  flex-shrink: 0;
  color: var(--ink-subtle);
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}

/* ── 底部栏（2026-09-03 简化：自动写日记设置已移到主动发消息，只留补写） ── */

.diary-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  box-sizing: border-box;
  padding: 8px 16px calc(8px + var(--sab));
  border-top: 1px solid var(--border-separator);
  background: var(--surface-page);
}

.diary-footer-tip {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-subtle);
  font-size: calc(10px * var(--ui-font-scale, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-action-button {
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: calc(12px * var(--ui-font-scale, 1));
  white-space: nowrap;
}

/* ── 二级页头（去掉双导航感：透明、无边框、标题加大） ── */

.diary-subheader {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 6px 12px 6px 8px;
  background: transparent;
}

.diary-subheader-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: calc(16px * var(--ui-font-scale, 1));
  font-weight: var(--font-wt-bold);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-header-spacer {
  width: 32px;
  flex-shrink: 0;
}

/* ── 空状态 ── */

.diary-empty {
  padding: 42px 18px;
  color: var(--ink-subtle);
  font-size: calc(12px * var(--ui-font-scale, 1));
  line-height: 1.8;
  text-align: center;
}

.diary-empty--compact {
  padding: 18px 10px;
}

/* ── 日记详情 ── */

.diary-detail-scroll {
  padding-top: 8px;
}

.diary-entry-card {
  box-sizing: border-box;
  padding: 16px 15px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--surface-card);
  box-shadow: var(--shadow-float-sm);
}

.diary-entry-card--user {
  border: 1px solid rgba(166, 124, 82, 0.22);
  background: var(--cream);
}

html.dark-mode .diary-entry-card--user {
  border-color: rgba(224, 186, 139, 0.18);
  background: #302c2a;
}

.diary-entry-author,
.diary-entry-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--ink-light);
  font-size: calc(12px * var(--ui-font-scale, 1));
  font-weight: var(--font-wt-bold);
}

.diary-entry-label {
  display: block;
  color: #9b7546;
}

html.dark-mode .diary-entry-label {
  color: #e0ba8b;
}

.diary-entry-content {
  color: var(--ink);
  font-size: calc(14px * var(--ui-font-scale, 1));
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── 评论区（卡片化） ── */

.diary-comments-title {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 18px 0 10px;
  color: var(--ink);
  font-size: calc(13px * var(--ui-font-scale, 1));
  font-weight: var(--font-wt-bold);
}

.diary-comments-title span {
  color: var(--ink-subtle);
  font-size: calc(11px * var(--ui-font-scale, 1));
  font-weight: var(--font-wt-regular);
}

.diary-comment {
  box-sizing: border-box;
  padding: 12px 13px;
  margin-bottom: 9px;
  border-radius: 12px;
  background: var(--surface-card);
  box-shadow: var(--shadow-float-sm);
}

.diary-comment-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.diary-comment-copy {
  flex: 1;
  min-width: 0;
}

.diary-comment-author {
  margin-bottom: 3px;
  color: var(--ink-light);
  font-size: calc(11px * var(--ui-font-scale, 1));
  font-weight: var(--font-wt-bold);
}

.diary-comment-label {
  color: var(--ink-light);
  font-weight: var(--font-wt-bold);
}

.diary-comment-text,
.diary-reply {
  color: var(--ink);
  font-size: calc(13px * var(--ui-font-scale, 1));
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

.diary-reply {
  box-sizing: border-box;
  padding: 8px 11px;
  margin: 8px 0 0 39px;
  border-left: 2px solid var(--monet-lightblue);
  border-radius: 0 9px 9px 0;
  background: var(--surface-input);
}

.diary-reply-action {
  margin: 8px 0 0 39px;
}

.diary-reply-action .form-btn {
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: calc(11px * var(--ui-font-scale, 1));
}

/* ── 评论输入（胶囊：输入占大头，按钮紧凑） ── */

.diary-compose {
  display: flex;
  padding: 10px 0 calc(10px + var(--sab));
}

.diary-compose-box {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  padding: 4px 4px 4px 15px;
  border: 1px solid var(--border-light);
  border-radius: 22px;
  background: var(--surface-input);
  transition: border-color 0.16s ease;
}

.diary-compose-box:focus-within {
  border-color: var(--monet-blue);
}

.diary-compose-box input {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: calc(13px * var(--ui-font-scale, 1));
}

.diary-send-button {
  min-height: 32px;
  padding: 5px 15px;
  border-radius: 17px;
  font-size: calc(13px * var(--ui-font-scale, 1));
  white-space: nowrap;
}

/* ── 写日记 ── */

.diary-write-scroll {
  padding-top: 8px;
}

#diaryWriteInput {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 150px;
  padding: 13px 14px;
  border: 1px solid var(--border-light);
  border-radius: 14px;
  outline: none;
  resize: vertical;
  background: var(--surface-card);
  color: var(--ink);
  font-family: inherit;
  font-size: calc(14px * var(--ui-font-scale, 1));
  line-height: 1.75;
  box-shadow: var(--shadow-float-sm);
}

#diaryWriteInput:focus {
  border-color: var(--monet-blue);
  box-shadow: 0 0 0 2px rgba(143, 175, 191, 0.16);
}

.diary-form-label {
  margin: 18px 0 10px;
  color: var(--ink);
  font-size: calc(13px * var(--ui-font-scale, 1));
  font-weight: var(--font-wt-bold);
}

.diary-form-label span {
  color: var(--ink-subtle);
  font-size: calc(11px * var(--ui-font-scale, 1));
  font-weight: var(--font-wt-regular);
}

/* ── 可见角色多选 ── */

.diary-visible-char {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  box-sizing: border-box;
  padding: 9px 12px;
  margin-bottom: 8px;
  border-radius: 13px;
  background: var(--surface-card);
  box-shadow: var(--shadow-float-sm);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.diary-visible-char.selected {
  background: var(--monet-ice);
  box-shadow: 0 0 0 1.5px var(--monet-blue) inset;
}

html.dark-mode .diary-visible-char.selected {
  background: #26343d;
}

.diary-visible-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: calc(13px * var(--ui-font-scale, 1));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.diary-visible-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2px solid var(--ink-subtle);
  border-radius: 50%;
  color: transparent;
  font-size: 13px;
  font-weight: 700;
}

.diary-visible-char.selected .diary-visible-check {
  border-color: var(--monet-blue);
  background: var(--monet-blue);
  color: #fff;
}

.diary-save-button {
  width: 100%;
  min-height: 44px;
  margin: 14px 0 24px;
  border-radius: 22px;
  font-size: calc(14px * var(--ui-font-scale, 1));
}

@media (max-width: 360px) {
  .diary-footer {
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .diary-action-button {
    padding-left: 9px;
    padding-right: 9px;
  }

  .diary-subheader-title {
    font-size: 15px;
  }
}