/* 9.29 历史页重做（她 9.29 凌晨讲定的）：
   主页是水底的日历——说过话的日子是一颗泡泡，颜色跟我的气泡，一样大，不分话多话少；没说话的日子只有灰字。
   里面：背景、气泡跟聊天页走，头像留着，日期条上面那道缝补上，搜到的那条加框。
   单独一个文件：出毛病把 index.html 里这行 link 去掉，样子回到原来。 */

/* ── 整页的底：跟聊天页同一片天 ── */
#hist-bg { display: none; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#hist-bg::before, #hist-bg::after { content: ''; position: absolute; inset: 0; }
#hist-overlay > header, #hist-overlay > .hist-bar, #hist-overlay > #history-area, #hist-overlay > .hist-select-bar { position: relative; z-index: 1; }

/* ── 顶上一条：找哪一句 / 图片 / 收藏 ── */
.hist-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 14px 10px; }
.hist-search {
  flex: 1; min-width: 0; height: 38px; padding: 0 6px 0 12px;
  display: flex; align-items: center; gap: 6px;
  border-radius: 19px; background: var(--chat-surface, var(--surface, #fff));
  box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
}
.hist-search svg { flex: none; opacity: .45; }
.hist-search input {
  flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent;
  font-size: 15px; color: var(--text); font-family: inherit;
}
.hist-search input::placeholder { color: var(--text3); }
.hist-search .hist-x {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  font-size: 17px; line-height: 1; color: var(--text2); background: rgba(128,128,128,.14);
}
.hist-search .hist-x[hidden] { display: none; }
.hist-door {
  flex: none; height: 38px; padding: 0 13px; border-radius: 19px;
  font-size: 13.5px; color: var(--text2);
  background: var(--chat-surface, var(--surface, #fff));
  box-shadow: 0 0 0 1px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  transition: opacity .15s ease;
}
.hist-door.soon { opacity: .5; }
.hist-door:active { opacity: .6; }

/* ── 水底 ── */
#history-area.hb-home { padding: 0 0 28px; }
.hb-sea { position: relative; overflow: hidden; min-height: 100%; padding: 0 14px 30px; --hb-c: var(--bub-me, #e8eef4); --hb-ink: var(--bub-me-ink, #2f4257); }
/* 从水面斜着透下来的两道光，很淡 */
.hb-sea::before {
  content: ''; position: absolute; inset: -10% -30%; pointer-events: none;
  background:
    linear-gradient(104deg, transparent 22%, rgba(255,255,255,.13) 31%, transparent 41%),
    linear-gradient(98deg, transparent 58%, rgba(255,255,255,.09) 66%, transparent 75%);
}
.hb-week {
  position: sticky; top: 0; z-index: 3;
  display: grid; grid-template-columns: repeat(7, 1fr);
  margin: 0 -14px; padding: 8px 14px 7px;
  font-size: 11.5px; color: var(--text3); text-align: center; letter-spacing: .1em;
  background: var(--chat-base, var(--bg));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hb-month { position: relative; z-index: 1; padding-top: 18px; }
.hb-month h3 { margin: 0 0 6px 6px; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--text2); }
.hb-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.hb-day {
  position: relative; aspect-ratio: 1 / 1; padding: 0; border: none; background: none;
  display: grid; place-items: center; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.hb-day b { position: relative; z-index: 1; font-weight: 500; font-size: 15px; color: var(--text3); opacity: .55; font-variant-numeric: tabular-nums; }
.hb-day.later b { opacity: .22; }
.hb-day.has b { color: var(--hb-ink); opacity: 1; }

/* 泡泡：半透明，边上一圈亮，左上一点高光，慢慢上下漂。一样大 */
.hb-bub {
  position: absolute; left: 50%; top: 50%; width: 82%; max-width: 44px; aspect-ratio: 1 / 1;
  margin: 0; border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.95) 0, rgba(255,255,255,.55) 7%, rgba(255,255,255,0) 19%),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.30) 0, rgba(255,255,255,0) 26%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 58%, rgba(255,255,255,.34) 100%),
    var(--hb-c);
  opacity: .9;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.62),
    inset 0 -4px 7px rgba(255,255,255,.16),
    0 0 0 1px rgba(60,90,125,.13),
    0 3px 8px rgba(40,65,95,.13);
  animation: hb-float var(--t, 5.4s) ease-in-out var(--d, 0s) infinite;
}
@keyframes hb-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(1.5px); }
  50% { transform: translate(-50%, -50%) translateY(-2.5px); }
}
.hb-day.has:active .hb-bub { opacity: .6; }
.hb-day.today .hb-bub { box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 0 0 1.5px var(--hb-ring, rgba(60,95,125,.55)), 0 3px 8px rgba(40,65,95,.16); }
.hb-day.today:not(.has) b { opacity: .9; color: var(--text2); }

/* 洗过脸的日子：格子角上一滴 */
.hb-drop {
  position: absolute; z-index: 2; right: 9%; top: 7%; width: 7px; height: 7px;
  border-radius: 0 50% 50% 50%; transform: rotate(45deg);
  background: linear-gradient(135deg, #cfe4f5, #86b3d6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(40,65,95,.25);
}

/* 几颗没有名字的小泡泡，从底下慢慢冒上来 */
.hb-fizz {
  position: absolute; z-index: 0; bottom: -20px; left: var(--x, 50%);
  width: var(--s, 8px); height: var(--s, 8px); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0, rgba(255,255,255,.2) 22%, rgba(255,255,255,.06) 60%, rgba(255,255,255,.3) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 0 0 1px rgba(60,90,125,.08);
  opacity: 0;
  animation: hb-rise var(--t, 13s) linear var(--d, 0s) infinite;
}
@keyframes hb-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  8% { opacity: .75; }
  50% { transform: translate(var(--w, 8px), -46vh); }
  92% { opacity: .5; }
  100% { transform: translate(0, -92vh); opacity: 0; }
}
.hb-foot { position: relative; z-index: 1; margin: 22px 6px 0; font-size: 12px; line-height: 1.7; color: var(--text3); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .hb-bub, .hb-fizz { animation: none; }
  .hb-fizz { display: none; }
}

/* ── 图片门：她发过的图，按月一墙 ── */
.hp-wall { padding: 0 0 30px; }
.hp-month { padding-top: 16px; }
.hp-month h3 { margin: 0 0 8px 4px; font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--text2); }
.hp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.hp-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 8px; background: rgba(255,255,255,.35); -webkit-touch-callout: none; }
.hp-grid img:active { opacity: .7; }

/* ── 电脑那头的日子：点开只有一句话 ── */
.hb-away { padding: 56px 28px; text-align: center; font-size: 14px; line-height: 1.9; color: var(--text2); }
.hb-away small { display: block; margin-top: 6px; font-size: 12px; color: var(--text3); }

/* ── 里面（某一天的对话） ── */
#hist-overlay #history-area { padding-top: 0; }
#hist-overlay .hist-bubble-wrap { padding: 14px 2px 24px; }
/* 日期条上面那道缝：条子往外铺满、往上多盖一截，滚上去的话不会从缝里露出来 */
#hist-overlay .hist-day-header {
  top: 0; margin: 0 -14px; padding: 10px 14px;
  border-bottom: none; z-index: 5;
  background: var(--chat-base, var(--bg));
  box-shadow: 0 -14px 0 0 var(--chat-base, var(--bg)), 0 1px 0 rgba(0,0,0,.06);
}
#hist-overlay .hist-day-back { color: var(--text2); font-size: 22px; }
#hist-overlay .hist-card { margin: 0 0 10px; background: var(--chat-surface, var(--surface)); border-color: rgba(0,0,0,.06); }
#hist-overlay .hist-card mark { background: rgba(120,160,200,.28); color: inherit; border-radius: 3px; padding: 0 1px; }
#hist-overlay .hist-card:first-child { margin-top: 12px; }

/* 翻到下一天：中间隔一条日期 */
#hist-overlay .hist-day-sep {
  align-self: center; margin: 18px auto 6px; padding: 3px 14px; border-radius: 12px;
  font-size: 12px; letter-spacing: .06em; color: var(--text2);
  background: rgba(255,255,255,.42); box-shadow: 0 0 0 1px rgba(0,0,0,.04);
}
#hist-overlay .hist-next { min-height: 28px; padding: 10px 0 26px; text-align: center; font-size: 12px; color: var(--text3); }
@media (prefers-color-scheme: dark) { #hist-overlay .hist-day-sep { background: rgba(255,255,255,.08); } }

/* 搜到的那条：框跟气泡一路，深两度。我的是一圈深蓝，她的是一圈暖的 */
#hist-overlay .msg-row.ai.hit .bubble {
  box-shadow: 0 0 0 2px #6f93b4, 0 0 0 5px rgba(255,255,255,.55);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bub-me, #e8eef4) 58%, #24507a), 0 0 0 5px rgba(255,255,255,.55);
}
#hist-overlay .msg-row.user.hit .bubble {
  box-shadow: 0 0 0 2px #b9a183, 0 0 0 5px rgba(255,255,255,.55);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bub-her, #f0efec) 58%, #8a5a2b), 0 0 0 5px rgba(255,255,255,.55);
}
#hist-overlay .thinking-block.hit .thinking-body {
  box-shadow: 0 0 0 2px #6f93b4;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bub-me, #e8eef4) 58%, #24507a);
}
/* 9.29 16:01 她定的：已思考里面的底用小船抽屉那个色，前面那道杠是我气泡的颜色 */
#hist-overlay .thinking-body {
  background: rgba(230,235,240,.94); color: #33475c;
  border-left: 3px solid var(--bub-me, #e8eef4);
}
#hist-overlay .msg-row.hit mark, #hist-overlay .thinking-block.hit mark { background: rgba(255,214,120,.55); color: inherit; border-radius: 3px; }
#hist-overlay .hist-pair.highlight-jump { animation: none; }

/* 外观只在"不是深色模式"的时候跟着换，跟聊天页一个规矩 */
@media not all and (prefers-color-scheme: dark) {
  html[data-chat-bg] #hist-bg { display: block; }
  html[data-chat-bg] #hist-overlay { background: var(--chat-base, #f9f9f7) !important; }
  html[data-chat-bg] #hist-overlay > header.topbar { background: transparent; border-bottom: none; }
  html[data-chat-bg] #hist-overlay .msg-time { color: rgba(40,55,75,.58); }
  html[data-chat-bg] #hist-overlay .hb-week,
  html[data-chat-bg] #hist-overlay .hb-month h3,
  html[data-chat-bg] #hist-overlay .hb-foot { color: rgba(40,55,75,.62); }
  html[data-chat-bg] #hist-overlay .hb-day b { color: rgba(40,55,75,.6); }
  html[data-chat-bg] #hist-overlay .hb-day.has b { color: var(--hb-ink); }
  html[data-chat-bg] #hist-overlay .hb-week { background: color-mix(in srgb, var(--chat-base, #f9f9f7) 30%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  html[data-chat-bg] #hist-overlay .hist-day-header { background: color-mix(in srgb, var(--chat-base, #f9f9f7) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  html[data-chat-bg] #hist-overlay .thinking-btn { color: rgba(40,55,75,.7); }

  html[data-chat-bg] #hist-bg::after {
    opacity: .5;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .5  0 0 0 0 .62  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  html[data-chat-bg="mist"] #hist-bg::before { inset: -40px; background: url("/img/bg/mist.png") center / 100% 100% no-repeat; filter: blur(14px); }
  html[data-chat-bg="glow"] #hist-bg { background: #dae7e7 url("/img/bg/glow.jpg") top center / cover no-repeat; }
  html[data-chat-bg="glow"] #hist-bg::after { display: none; }
  html[data-chat-bg="dusk"] #hist-bg {
    background-color: #a9bcd2;
    background-image:
      radial-gradient(ellipse 130% 26% at 50% 105%, rgba(238,208,188,.6) 0%, rgba(238,208,188,0) 70%),
      linear-gradient(180deg, #9db2cc 0%, #abbed4 34%, #bac9d9 66%, #c8d3dc 100%);
  }
  html[data-chat-bg="dusk"] #hist-bg::before {
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='852' height='1846' preserveAspectRatio='none'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.0014 .0008' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 .93  0 0 0 0 .95  0 0 0 0 .97  1 0 0 0 -.45'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");
  }
  html[data-chat-bg="dusk"] #hist-overlay .msg-time { color: rgba(30,42,58,.62); }

  /* 气泡颜色跟聊天页：她在背景卡里挑的那两个 */
  #hist-overlay .msg-row.ai .bubble { background: var(--bub-me, #e8eef4); color: var(--bub-me-ink, var(--text)); }
  #hist-overlay .msg-row.user .bubble { background: var(--bub-her, #f0efec); }

  /* 深气泡：字自动变浅，别的跟着 */
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble .thought { color: rgba(243,246,249,.74); }
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble code,
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble code:not(pre code) { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.16); color: inherit; }
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble pre,
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble .code-block pre { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.12); }
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble pre code { background: none; border: none; }
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble .code-block { border-color: rgba(255,255,255,.14); }
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble .code-header { background: rgba(0,0,0,.18); border-bottom-color: rgba(255,255,255,.10); }
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble .code-lang,
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble .code-copy-btn { color: rgba(243,246,249,.62); }
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble blockquote { border-left-color: rgba(255,255,255,.4); }
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble a { color: #ffe1d2; }
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble th { background: rgba(255,255,255,.12); }
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble tr:nth-child(even) { background: rgba(255,255,255,.06); opacity: 1; }
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble th,
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble td { border-color: rgba(255,255,255,.2); }
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai .bubble hr { border-top-color: rgba(255,255,255,.25); }
  /* 深气泡搜到的时候：深的外面再套深的看不出来，里圈用亮的，外圈才是跟气泡一路的深 */
  html[data-bub-me-ink="light"] #hist-overlay .msg-row.ai.hit .bubble {
    box-shadow: 0 0 0 2px #e6eef6, 0 0 0 4px #2c4a66;
    box-shadow: 0 0 0 2px #e6eef6, 0 0 0 4px color-mix(in srgb, var(--bub-me, #3d5f7d) 70%, #0f2a44);
  }
  /* 深泡泡：今天那一圈用亮的 */
  html[data-bub-me-ink="light"] #hist-overlay .hb-sea { --hb-ring: rgba(255,255,255,.9); }
}

/* 深色模式：泡泡自己带一点蓝，字是浅的 */
@media (prefers-color-scheme: dark) {
  .hb-sea { --hb-c: #3d5872; --hb-ink: #eef3f8; --hb-ring: rgba(255,255,255,.7); }
  .hb-bub { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 0 0 1px rgba(0,0,0,.25), 0 3px 8px rgba(0,0,0,.3); }
  .hb-sea::before { opacity: .4; }
  .hist-search, .hist-door { box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
  #hist-overlay .thinking-body { background: rgba(48,52,58,.94); color: #d5dee8; border-left-color: #3d5872; }
}