css
ai {
  /* 核心变量定义：iOS灵感系统色板与卡片化参数 */
  --bg-card: #ffffff;
  --bg-page: #f7f8fa;
  --text-main: #2c2c2e;
  --text-sub: #636366;
  --text-light: #aeaeb2;
  --border: #ebebec;
  --radius: 14px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
  --c-green: #34c759;
  --c-red: #ff3b30;
  --c-orange: #ff9500;
  --c-blue: #007aff;
  --c-pink: #ff2d55;
  
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text-main);
  font-size: 14px;
  line-height: 1.6;
  background: var(--bg-page);
  padding: 10px;
  border-radius: 16px;
}

/* 顶部状态栏：类似手机顶部的药丸通知 */
ai hd {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e5e5ea;
  color: var(--text-sub);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 20px;
  margin: 0 auto 16px;
  width: fit-content;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.5);
}

/* 剧情正文区：舒适的阅读排版 */
ai article {
  display: block;
  font-size: 15px;
  color: var(--text-main);
  padding: 0 4px 16px;
  text-align: justify;
}

ai article p {
  margin-bottom: 10px;
}

/* 卡片化折叠面板 */
ai details {
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.02);
  transition: all 0.3s ease;
}

/* 展开时的卡片动效 */
ai details[open] {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* 卡片标题栏 */
ai summary {
  list-style: none;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-main);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  user-select: none;
  background: linear-gradient(to bottom, #ffffff, #fcfcfd);
}

ai summary::-webkit-details-marker {
  display: none;
}

/* 自定义展开/折叠箭头指示器 */
ai summary::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-light);
  border-bottom: 2px solid var(--text-light);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

ai details[open] summary::after {
  transform: rotate(225deg);
  margin-top: 4px;
}

/* 展开后的内容区边界 */
ai details[open] summary {
  border-bottom: 1px solid var(--border);
}

/* 分区段落：带自动提取标题功能 */
ai details p {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

ai details p:last-child {
  border-bottom: none;
}

/* 分区小标题修饰 */
ai p[t]::before {
  content: attr(t);
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  padding-left: 6px;
  border-left: 3px solid var(--border);
}

/* 数据行与列表项 */
ai d {
  display: block;
  color: var(--text-sub);
  font-size: 13px;
  word-break: break-all;
}

/* 强调字段与财务颜色映射 */
ai f {
  font-weight: 600;
  color: var(--text-main);
}
ai f[c="g"] { color: var(--c-green); }
ai f[c="r"] { color: var(--c-red); }
ai f[c="o"] { color: var(--c-orange); }

/* 技能Tag：类似小红书标签 */
ai q {
  display: inline-block;
  background: #f2f2f7;
  color: var(--text-main);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  margin-right: 6px;
  font-weight: 500;
  vertical-align: middle;
}

/* 微信风格消息气泡 */
ai m {
  display: block;
  background: #f2f2f7;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-main);
  position: relative;
  margin-top: 4px;
}

ai m::before {
  content: attr(t);
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  margin-right: 6px;
  padding-right: 6px;
  border-right: 1px solid rgba(0,0,0,0.1);
}

/* 不同类型消息的颜色区分 */
ai m[t="工作"] { background: #e6f2ff; border-left: 3px solid var(--c-blue); }
ai m[t="工作"]::before { color: var(--c-blue); }

ai m[t="家人"] { background: #fff5e6; border-left: 3px solid var(--c-orange); }
ai m[t="家人"]::before { color: var(--c-orange); }

ai m[t="私聊"] { background: #e8f8ec; border-left: 3px solid var(--c-green); }
ai m[t="私聊"]::before { color: var(--c-green); }

/* 行动选项：现代APP拟物按钮 */
ai a {
  display: block;
  background: #f2f2f7;
  color: var(--c-blue);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

ai a:last-child {
  margin-bottom: 0;
}

ai a:hover {
  background: #e5e5ea;
  transform: scale(0.99);
}