颜值决定地位的城市

/* =========================================
   变量定义 (凛冬霜华色调)
========================================= */
:root {
  --winter-pure-white: #ffffff;             /* 纯白 */
  --winter-light-gray: #f8fafc;             /* 极浅的白灰色 */
  --winter-subtle-gray: #eef2f6;            /* 微妙的浅灰蓝 */
  --winter-accent-gray: #dbe1e8;            /* 用于深度或按压效果的浅灰 */
  --text-color: #1e293b;                    /* 深炭灰，保持高对比度 */
}

/* --- 自动扫光动画定义 --- */
@keyframes autoSweep {
  0% { left: -100%; }
  20% { left: 100%; }
  100% { left: 100%; }
}

/* =========================================
   1. 统一基础样式 (按钮、输入输出框)
========================================= */
.btn, button, input, textarea, .input-field, .output-field, .output-box {
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, var(--winter-pure-white) 0%, var(--winter-light-gray) 25%, var(--winter-subtle-gray) 50%, var(--winter-accent-gray) 100%);
  color: var(--text-color);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.7), 0 4px 8px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 占位符颜色调整 */
::placeholder {
  color: rgba(30, 41, 59, 0.4); 
}

/* --- 差异化处理：按钮 --- */
.btn, button {
  overflow: hidden; 
  cursor: pointer;  
}

/* --- 差异化处理：输入 / 输出 / 编辑框 --- */
input, textarea, .input-field, .output-field, .output-box {
  overflow-y: auto;   
  overflow-x: hidden; 
  cursor: text;       
}

/* 滚动条样式（适配白灰色系） */
textarea::-webkit-scrollbar, .output-field::-webkit-scrollbar, .output-box::-webkit-scrollbar {
  width: 6px;
}
textarea::-webkit-scrollbar-thumb, .output-field::-webkit-scrollbar-thumb, .output-box::-webkit-scrollbar-thumb {
  background: rgba(30, 41, 59, 0.2);
  border-radius: 3px;
}

/* =========================================
   2. 卡片与折叠框区域
========================================= */
/* 容器基础样式 */
.card-container {
    margin-bottom: 20px;
    background-color: #2d3748;
    border-radius: 25px;
    overflow: hidden;
    border: 1px solid #4a5568;
}

/* 顶部时间栏 */
.card-header {
    background: linear-gradient(90deg, #000000, #434343);
    color: white;
    padding: 12px 20px;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
}

/* 内容区域 */
.card-body {
    padding: 20px;
    color: #5a4a3a;
    line-height: 1.6;
    font-family: sans-serif;
    background-color: #fffcf5;
}

/* 记忆档案折叠框 */
.memory-details {
    margin-bottom: 20px;
    background-color: #fffcf5;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2d8c7;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.memory-summary {
    background-color: #fffcf5;
    color: #5a4a3a;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: 1px solid #e2d8c7;
    outline: none;
}

/* =========================================
   1. 基础气泡框样式（公共部分）
========================================= */
.m-say, .f-say, .m-think, .f-think, .desc, .sys-msg, .msg-other, .msg-self {
  display: block !important;
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 12px; /* 默认12px圆角，特定气泡会在下方覆盖 */
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-sizing: border-box; /* 确保 padding 不会撑破通栏 */
}

/* =========================================
   2. 聊天排版专属容器 (控制名字的左右对齐)
========================================= */
.chat-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 4px;
}
.chat-row.left { align-items: flex-start; }
.chat-row.right { align-items: flex-end; }
.chat-name {
  font-size: 0.7em;
  color: #aaa;
  margin-bottom: -8px; /* 拉近名字与气泡的距离 */
  padding: 0 4px;
  z-index: 2;
}

/* =========================================
   3. 各类气泡专属配色与形状
========================================= */
/* 男说话 */
.m-say { background: #e3f2fd !important; border-left: 5px solid #1976d2; color: #0d47a1 !important; }
/* 女说话 */
.f-say { background: #fce4ec !important; border-left: 5px solid #d81b60; color: #880e4f !important; }
/* 男心理 */
.m-think { background: #f1f8fe !important; border: 1px solid #1e88e5; color: #1565c0 !important; }
/* 女心理 */
.f-think { background: #fdf2f7 !important; border: 1px solid #e53935; color: #ad1457 !important; }

/* 旁白/动作描写（纯白气泡带微阴影） */
.desc { 
  background: #ffffff !important; 
  border: 1px solid #eaeaea; 
  color: #333333 !important; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); 
}

/* 系统提示/音效（灰色虚线框，居中显示） */
.sys-msg {
  background: #f8f9fa !important;
  border: 1px dashed #adb5bd;
  color: #6c757d !important;
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
}

/* 对方聊天消息（深色，左上直角，已改为通栏） */
.msg-other {
  background-color: #556080 !important;
  color: white !important;
  width: 100%; /* 强制通栏 */
  border-radius: 0 12px 12px 12px !important; /* 覆盖公共圆角 */
}

/* 自己聊天消息（浅绿，右上直角，已改为通栏） */
.msg-self {
  background-color: #9ae6b4 !important;
  color: #2d3748 !important;
  width: 100%; /* 强制通栏 */
  border-radius: 12px 0 12px 12px !important; /* 覆盖公共圆角 */
}

/* =========================================
   5. 悬停扫光效果定义 (更亮的白色扫光)
========================================= */
.btn::before, button::before, input::before, textarea::before, 
.input-field::before, .output-field::before, .output-box::before,
.m-say::before, .f-say::before, .m-think::before, .f-think::before, 
.desc::before, .sys-msg::before, .msg-other::before, .msg-self::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none; 
  z-index: 1;
}

.btn:hover::before, button:hover::before, input:focus::before, textarea:focus::before, 
.input-field:focus::before, .output-field:focus::before, .output-box:focus::before,
.m-say:hover::before, .f-say:hover::before, .m-think:hover::before, .f-think:hover::before, 
.desc:hover::before, .sys-msg:hover::before, .msg-other:hover::before, .msg-self:hover::before {
  left: 100%;
}

/* =========================================
   6. 统一悬停与点击反馈 (冰雪消融与碎裂下沉)
========================================= */
.btn:hover, button:hover, input:focus, textarea:focus, 
.input-field:focus, .output-field:focus, .output-box:focus,
.m-say:hover, .f-say:hover, .m-think:hover, .f-think:hover, 
.desc:hover, .sys-msg:hover, .memory-summary:hover,
.msg-other:hover, .msg-self:hover {
  background: linear-gradient(135deg, var(--winter-pure-white) 0%, var(--winter-light-gray) 100%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 1), 0 10px 25px rgba(170, 180, 200, 0.4);
  border-color: var(--winter-pure-white);
  transform: translateY(-2px);
}

.btn:active, button:active, input:active, textarea:active, 
.input-field:active, .output-field:active, .output-box:active,
.m-say:active, .f-say:active, .m-think:active, .f-think:active, 
.desc:active, .sys-msg:active, .memory-summary:active,
.msg-other:active, .msg-self:active {
  background: #cdd4dc; /* 冰面深渊感 */
  transform: translateY(1px); 
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.25);
  border-color: transparent;
}

本页只展示本地导出中可核验的公开字段。下载 JSON 可查看完整原始记录。