/**
 * Date CSS - 约会模式样式（长文稿视图）
 * 复用原小说样式，保留长文本阅读体验
 */

.date-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--background);
  --date-font-scale: 1;
  --date-font-family: var(--font-family);
  --date-font-size-xs: calc(var(--font-size-xs, 11px) * var(--date-font-scale));
  --date-font-size-xs-md: calc(var(--font-size-xs-md, 12px) * var(--date-font-scale));
  --date-font-size-sm: calc(var(--font-size-sm, 13px) * var(--date-font-scale));
  --date-font-size-md: calc(var(--font-size-md, 14px) * var(--date-font-scale));
  --date-font-size-base: calc(var(--font-size-base, 15px) * var(--date-font-scale));
  --date-font-size-base-lg: calc(var(--font-size-base-lg, 16px) * var(--date-font-scale));
  --date-font-size-lg: calc(var(--font-size-lg, 17px) * var(--date-font-scale));
  font-family: var(--date-font-family);
}

.date-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--background);
}

.date-navbar {
  min-height: var(--navbar-height);
}

.date-chat-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.date-shelf {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 8px 16px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%; /* 🔥 关键：确保滚动正常工作 */
}

.date-shelf-subtitle {
  font-size: var(--date-font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  padding: 4px 8px 0 12px;
  letter-spacing: 0.15px; /* 对齐聊天收藏分区标题的字号与字距 */
  position: relative;
}

.date-shelf-subtitle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(var(--accent-color-rgb, 0, 122, 255), 0.8),
    rgba(var(--accent-color-rgb, 0, 122, 255), 0.35));
}

.date-shelf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 0 8px;
}

.date-shelf-title {
  position: relative;
  padding-left: 12px; /* 给左侧竖线留出空间 */
}

.date-shelf-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 3px;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    rgba(var(--accent-color-rgb, 0, 122, 255), 0.8),
    rgba(var(--accent-color-rgb, 0, 122, 255), 0.35));
}

.date-shelf-title .title-main {
  font-size: var(--date-font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.15px; /* 与聊天收藏标题保持一致的字距 */
}

.date-shelf-title .title-sub {
  font-size: var(--date-font-size-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.date-role-grid {
  padding: 0 4px 8px 4px;
  margin-bottom: 8px; /* 确保与已完成约会之间有间距 */
}

.date-finished-grid {
  padding: 0 4px 8px 4px;
  margin-top: 8px; /* 确保与选择角色之间有间距 */
}

.date-role-card {
  text-align: left;
}

.date-role-meta {
  font-size: var(--date-font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
  min-height: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 预览限制三行 */
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.date-role-time {
  font-size: var(--date-font-size-xs-md);
  color: var(--text-tertiary, #888);
  margin-top: 4px;
}

.date-shelf-loading {
  width: 100%;
  text-align: center;
  color: var(--text-secondary);
  padding: 20px 0;
}

.date-composer-disabled {
  opacity: 0.65;
  pointer-events: none;
}

.date-sidebar {
  width: 34%;
  max-width: 360px;
  min-width: 260px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.date-sidebar-actions {
  padding: 12px 12px 0 12px;
}

.date-editor-btn {
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  font-size: var(--date-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.date-editor-btn.primary {
  background: var(--primary);
  color: #fff;
}

.date-editor-btn.secondary {
  background: var(--background);
  color: var(--text-primary);
}

.date-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.date-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

.date-item.active {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.date-item:hover {
  transform: translateY(-2px);
}

.date-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.date-item-title {
  font-size: var(--date-font-size-base-lg);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
  margin-right: 8px;
}

.date-item-time {
  color: var(--text-secondary);
  font-size: var(--date-font-size-xs-md);
}

.date-item-preview {
  color: var(--text-secondary);
  font-size: var(--date-font-size-sm);
  line-height: 1.6;
  max-height: 46px;
  overflow: hidden;
}

.date-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--background);
}

/* ==================== 移动端适配 ==================== */
@media (max-width: 768px) {
  .date-main {
    flex-direction: column;
  }
  .date-sidebar {
    width: 100%;
    max-width: none;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .date-list {
    max-height: 220px;
  }
  .date-view {
    flex: 1;
  }
  
  /* 🔥 手机端书架视图修复 */
  .date-shelf {
    padding: 12px 8px 50px 8px; /* 增加底部间距，防止内容被遮挡 */
    gap: 16px; /* 增加元素间距 */
  }
  
  .date-shelf-header {
    flex-shrink: 0; /* 防止头部被压缩 */
  }
  
  .date-shelf-subtitle {
    flex-shrink: 0; /* 防止副标题被压缩 */
    margin-top: 8px; /* 增加与上方内容的间距 */
    margin-bottom: 4px;
  }
  
  .date-role-grid {
    flex-shrink: 0; /* 防止网格被压缩 */
    margin-bottom: 12px; /* 增加与已完成约会之间的间距 */
  }
  
  .date-finished-grid {
    flex-shrink: 0; /* 防止网格被压缩 */
    margin-top: 12px; /* 增加与选择角色之间的间距 */
    padding-bottom: 20px; /* 确保底部有足够空间 */
  }
  
  /* 确保网格内容正确显示 */
  .favorite-books-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    position: relative;
    z-index: 1;
  }
}

.date-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.date-view-title {
  font-size: var(--date-font-size-base-lg);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-log {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0; /* 长文样式：相邻消息紧贴，仅用分割线 */
  background: var(--background);
  padding-bottom: 10px; /* 基础留白，避免文本贴底 */
}

.date-chat-view {
  position: relative;
}

.date-log-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 10px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  box-shadow: none;
}

.date-log-item:last-child {
  border-bottom: none;
}

.date-log-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-secondary);
  font-size: var(--date-font-size-sm);
  line-height: 1.6;
  gap: 8px;
}

.date-log-role {
  font-weight: 700;
  color: var(--text-primary);
  font-size: var(--date-font-size-base-lg);
  text-shadow:
    0 0 6px rgba(var(--accent-color-rgb, 64, 120, 255), 0.28),
    0 0 12px rgba(var(--accent-color-rgb, 64, 120, 255), 0.18);
}

.date-log-content {
  color: var(--text-primary);
  white-space: pre-wrap;
  line-height: 1.9;
  font-size: var(--date-font-size-md);
}

.date-log-summary {
  margin-top: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  line-height: 1.6;
}

.date-log-summary summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--date-font-size-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  outline: none;
  user-select: none;
}

.date-log-summary summary::-webkit-details-marker {
  display: none;
}

.date-log-summary summary::before {
  content: '✦';
  color: var(--brand-primary, var(--primary));
  font-size: 1em;
  line-height: 1;
}

.date-log-summary summary::after {
  /* 右侧使用四角空心星，与左侧形状一致 */
  content: '✧';
  color: var(--brand-primary, var(--primary));
  font-size: 1em;
  line-height: 1;
}

.date-log-summary-content {
  margin-top: 8px;
  color: var(--text-primary);
  white-space: pre-wrap;
  font-size: var(--date-font-size-sm);
  line-height: 1.7;
  border-left: 3px solid var(--border);
  padding-left: 12px;
}

.date-composer {
  position: sticky;
  bottom: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border-top: none;
  z-index: 5;
}

.date-quick-replies {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 12px 6px 12px;
}

.date-quick-btn {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text-primary);
  font-size: var(--date-font-size-sm);
  white-space: nowrap;
}

.date-input {
  min-height: 44px;
  max-height: 140px;
  line-height: 1.6;
}

.date-chat-input-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--navbar-bg-standard);
  border-top: 1px solid var(--navbar-border);
  box-shadow:
    0 -6px 16px rgba(0, 0, 0, 0.08),
    0 -1px 4px rgba(0, 0, 0, 0.06);
  z-index: var(--z-tabbar, 20);
}

/* 安卓：默认也稍微上抬，避免贴底过紧 */
body[data-device="android"] .date-chat-input-bar {
  transform: translateY(-20px);
}

/* 安卓：常态下为输入栏预留更多空间 */
body[data-device="android"] .date-log {
  padding-bottom: 120px;
  transition: padding-bottom var(--transition-fast, 180ms);
}

body[data-device="android"].composer-focused .date-chat-input-bar {
  transform: translateY(-40vh);
  box-shadow:
    0 -6px 24px rgba(0, 0, 0, 0.25),
    0 -2px 8px rgba(0, 0, 0, 0.15);
}

body[data-device="android"].composer-focused .date-log {
  padding-bottom: 220px; /* 安卓键盘抬起时的留白同步缩小 */
}

.date-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: var(--date-font-size-base);
  text-align: center;
  padding: 40px 20px;
}

.date-settings-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay-bg);
  z-index: 2000;
}

.date-settings-panel {
  width: min(520px, 96vw);
  max-height: 92vh;
  background: var(--color-surface, var(--surface));
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border, var(--border));
}

.date-settings-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, var(--border));
  background: var(--bg-card, var(--surface));
}

.date-settings-title {
  font-size: var(--date-font-size-base-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.date-settings-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.date-settings-close:hover {
  background: var(--bg-hover, rgba(0,0,0,0.04));
}

.date-settings-body {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.date-settings-card {
  background: var(--bg-card, var(--surface));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.date-settings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.date-settings-card-title {
  font-size: var(--date-font-size-base-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.date-settings-card-desc {
  font-size: var(--date-font-size-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.date-settings-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: var(--date-font-size-sm);
}

.date-font-select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text-primary);
  font-size: var(--date-font-size-md);
}

.date-settings-hint {
  margin-top: 6px;
  font-size: var(--date-font-size-xs-md);
  color: var(--text-secondary);
  line-height: 1.5;
}

.date-scale-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.date-scale-btn {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary, var(--background));
  color: var(--text-primary);
  font-size: var(--date-font-size-sm);
  transition: all var(--transition-fast);
}

.date-scale-btn.active {
  background: var(--brand-primary, var(--primary));
  color: var(--text-on-primary, #fff);
  border-color: var(--brand-primary, var(--primary));
  box-shadow: 0 6px 18px rgba(var(--accent-color-rgb, 64, 120, 255), 0.25);
}

.date-font-preview {
  padding: 12px;
  border-radius: 12px;
  background: var(--bg-secondary, var(--background));
  border: 1px dashed var(--border);
  line-height: 1.6;
}

.date-font-preview-title {
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  font-size: var(--date-font-size-sm);
}

.date-settings-add-qr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--date-font-size-sm);
}

.date-settings-qr-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.date-settings-qr-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary, var(--background));
}

.date-settings-qr-text {
  flex: 1;
  color: var(--text-primary);
  font-size: var(--date-font-size-base);
  line-height: 1.5;
  word-break: break-word;
}

.date-settings-qr-actions {
  display: flex;
  gap: 8px;
}

.date-settings-qr-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.date-settings-qr-btn:hover {
  background: var(--bg-hover, rgba(0,0,0,0.04));
}

.date-settings-qr-btn.danger {
  color: var(--semantic-error);
  border-color: rgba(var(--semantic-error-rgb, 255, 59, 48), 0.4);
}

.date-settings-empty {
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: var(--date-font-size-sm);
  text-align: center;
  background: var(--bg-secondary, var(--background));
}

/* 已完成约会选择列表样式 */
.date-session-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--bg-secondary, var(--surface));
  border: 1px solid var(--border);
}

.date-session-option:hover {
  background: var(--bg-hover, rgba(0,0,0,0.04));
  border-color: var(--brand-primary, var(--primary));
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.date-session-option-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.date-session-option-title {
  font-size: var(--date-font-size-base-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.date-session-option-time {
  font-size: var(--date-font-size-xs-md);
  color: var(--text-secondary);
  white-space: nowrap;
}

.date-session-option-preview {
  font-size: var(--date-font-size-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}