/* 配色变量(珍珠潮汐)、页面骨架、顶栏、聊天气泡。2026-10-02 从 index.html 拆出来；加载顺序见 index.html 的 <link>，前后顺序就是层叠顺序，别乱调 */
  :root{
    --screen-height: 100vh;
    --keyboard-offset: 0px;
    --ios-pwa-bottom-bleed: 0px;
    --ref-width: 941px;
    --ref-height: 1672px;
    --font-en: "Cormorant Garamond", Georgia, serif;
    --font-cn: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    /* 壁纸：不再是预渲染图片，直接是晕染渐变——蓝(左上)到玫瑰(右下)，跟设计稿的
       .page 背景同一份写法。以后要接"自定义背景图"功能时，把 --wall-default 换回
       url(...)就行，这几层渐变留着当没设自定义图时的默认底色。 */
    --wall-light: radial-gradient(62% 42% at 16% 6%, rgba(140,172,222,.5), transparent 62%), radial-gradient(58% 46% at 46% 100%, rgba(255,204,204,.26), transparent 62%), linear-gradient(180deg, #EEF3FA 0%, #F2EEF5 55%, #FBF0EF 100%);
    --wall-default: var(--wall-light);
    --menu-wall-default: var(--wall-light);
    --avatar-default: url("/avatar-sea.png");
    /* ── PEARL TIDE · 珍珠潮汐(default) ── */
    --bg: #F7FAFC;
    --header-bg: #F7FAFC;
    --hairline: rgba(120,142,165,.24);
    --text: #253447;
    --text-soft: #5E7080;
    --text-faint: #8A99A8;
    --bubble-ai-bg: #ECEEF3;
    --bubble-ai-fg: #253447;
    --bubble-ai-line: transparent;
    --bubble-human-bg: #DFE5EE;
    --bubble-human-fg: #253447;
    --bubble-human-line: transparent;
    --accent: #4C6378;
    --send-bg: #2C4056;
    --tick: #7E93A4;
    --accent-fg: #ffffff;
    --think-flourish: rgba(99, 121, 142, 0.52);
    --think-label: #6A7E8E;
    --think-body: #56697A;
    --composer-bg: #EEF4FA;
    --field-bg: rgba(247,250,252,.92);
    --field-line: rgba(151,169,181,.18);
    --shadow: 0 18px 46px rgba(74, 93, 108, 0.10);
    --soft-shadow: 0 14px 34px rgba(86, 104, 118, 0.08);
    --scrim: linear-gradient(180deg, rgba(255,255,255,0.38), rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.04) 68%, rgba(255,255,255,0.22));
    --header-h: clamp(56px, 10vw, 120px);
    --side-pad: clamp(16px, 4vw, 40px);
    --avatar-size: clamp(32px, 5vw, 48px);
    --bubble-radius: clamp(14px, 2vw, 20px);
    --composer-h: clamp(44px, 6vw, 72px);
    --motion-fast: 150ms;
    --motion-normal: 260ms;
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    /* composer 占据的底部区域(含安全区/键盘):scroll 底 padding 与边缘渐隐共用同一来源,保持对齐 */
    --composer-zone: calc(var(--composer-h) + 16px + env(safe-area-inset-bottom) + var(--keyboard-offset));
    --edge-fade-top: clamp(24px, 5vw, 52px);
    --edge-fade-tail: clamp(16px, 3vw, 30px);
    /* profile / settings — frosted glass, blends into the wallpaper */
    --card-bg: rgba(244,248,250,.64);
    --card-line: rgba(255,255,255,.4);
    --card-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px rgba(64,76,112,.08);
    --seg-track: rgba(140,160,176,.11);
    --seg-thumb: rgba(255,255,255,.68);
    --seg-thumb-shadow: 0 2px 8px rgba(40,60,78,.08);
    --row-press: rgba(140,160,176,.09);
    --slider-track: rgba(143,162,176,.28);
    --slider-thumb: #44627b;
    --status-dot: #5fbf8f;
    /* voice call (speaking overlay) */
    --call-glass-top: rgba(255,255,255,.46);
    --call-glass-bot: rgba(255,255,255,.20);
    --call-glass-edge: rgba(255,255,255,.58);
    --call-glass-hi: rgba(255,255,255,.72);
    --call-glass-glow: rgba(150,172,196,.20);
    --call-glass-shadow: 0 20px 50px rgba(74,93,108,.16);
    --call-scrim: rgba(64,82,102,.06);
    --call-hangup-bg: #cf8d92;
    --call-hangup-shadow: rgba(176,96,104,.34);
  }
  /* 海港(harbor)主题已删除，只留珍珠潮汐这一套配色，不再可切换。 */

  *{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body{ margin:0; padding:0; height:100%; overflow:hidden; overscroll-behavior:none; }
  body{ position: fixed; inset: 0; width: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-cn);
    font-size: clamp(14px, 1.45vw, 16px);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior: none;
  }

  .app{
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: min(100vw, var(--ref-width));
    margin: 0 auto;
    overflow: hidden;
  }
  .wall{
    position:fixed;
    inset:0;
    width:100vw;
    height:var(--screen-height);
    z-index:0;
    background-color: var(--bg);
    background-image: var(--wall-default);
    background-size: cover; background-position: center;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }
  .wall::after{
    content:""; position:absolute; inset:0; background: var(--scrim); pointer-events:none;
  }
  .topbar, .scroll, .composer{ position: relative; z-index: 1; }

  /* 聊天页专用的墨蓝/玻璃色，只挂在 .app 上，主菜单等其它页面不受影响 */
  .app{
    --text: #2B2F36;
    --text-dim: #6E7684;
    --text-faint: #9CA3AF;
    --avatar-size: 28px;
    --side-pad: 20px;
    --c-accent: #5A7BAA;
    --ink: #5E6C86;
    --ink-strong: #3C4759;
    --ink-faint: #8C97AB;
    --ink-hair: rgba(74,90,124,.18);
    --badge: #BDA0A1;   /* 灰粉：背景底部那道粉的色相，饱和度压低 */
    --glass: rgba(255,255,255,.46);
    --glass-strong: rgba(255,255,255,.64);
    --glass-edge: rgba(255,255,255,.7);
    --glass-border: rgba(255,255,255,.4);
  }

  /* ── Header：一整条玻璃，返回 + 名字靠左，工具靠右 ── */
  .topbar{
    position: sticky; top: 0; z-index: 10; flex: none;
    display: flex; align-items: center; gap: 4px;
    padding: calc(env(safe-area-inset-top) + 13px) 20px 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.575));
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 12px 24px -20px rgba(58,70,104,.5);
  }
  .topbar::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
    background: linear-gradient(90deg, transparent, var(--ink-hair) 14%, var(--ink-hair) 86%, transparent);
  }
  .peerpill{
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: baseline; gap: 9px; padding-left: 5px;
  }
  .peerpill .name{
    font-family: var(--font-cn); font-weight: 500; font-size: 16.5px;
    letter-spacing: .07em; color: var(--text); line-height: 1.2;
    white-space: nowrap;
  }
  /* 平时挂 AIDEN；打字时换 typing，断线时换"重连中"(见 renderStatus) */
  .peerpill .status{
    position: relative; flex: none; padding-left: 10px; white-space: nowrap;
    font-family: var(--font-en), var(--font-cn); font-weight: 500;
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-faint); line-height: 1;
  }
  .peerpill .status::before{
    content:""; position:absolute; left:0; bottom:0;
    width:1px; height:12px; background: rgba(74,90,124,.24);
  }
  .app[data-conn="reconnecting"] .peerpill .status,
  .app[data-conn="offline"] .peerpill .status{ color:#A88B6A; letter-spacing:.12em; }
  .peerpill .status.typing{
    color: var(--c-accent); letter-spacing: .12em; text-transform: none;
    display: inline-flex; align-items: center;
  }
  .typing-dots{ display:inline-flex; align-items:center; gap:3px; margin-left:6px; }
  .typing-dots i{ width:4px; height:4px; border-radius:50%; background:currentColor; animation: typingDot 1.25s ease-in-out infinite; }
  .typing-dots i:nth-child(2){ animation-delay:.16s; }
  .typing-dots i:nth-child(3){ animation-delay:.32s; }
  @keyframes typingDot{ 0%,70%,100%{ transform:translateY(0); opacity:.4; } 35%{ transform:translateY(-3px); opacity:1; } }
  .backbtn, .topbtn{
    width:32px; height:32px; border-radius:10px; padding:0; flex:none; cursor:pointer;
    border:0; background:transparent;
    color: var(--ink); display:grid; place-items:center;
    transition: color .18s var(--ease-soft), background-color .18s var(--ease-soft);
  }
  .backbtn{ margin-left:-8px; }
  .backbtn:hover, .topbtn:hover{ color: var(--ink-strong); background-color: rgba(255,255,255,.4); }
  .backbtn:active, .topbtn:active{ opacity:.6; }
  .backbtn svg, .topbtn svg{ width:18px; height:18px; display:block; }
  .header-actions{ display:flex; align-items:center; gap:6px; flex:none; margin-right:-7px; }
  /* 电话那个形状本身比月牙"重"，缩一号让两个看起来一样大 */
  .topbtn.call svg{ width:16px; height:16px; }
  .backbtn:focus-visible,
  button:focus-visible,
  textarea:focus-visible,
  input:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  /* ── Messages ── */
  .scroll{
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overflow-anchor: none;
    padding: clamp(14px, 2.4vw, 28px) var(--side-pad) var(--composer-zone);
    display: flex; flex-direction: column;
    transition: padding-bottom .28s cubic-bezier(.2,.8,.2,1);
    /* 边缘渐隐:顶部一段、底部对齐 composer 上沿一段,消息滚到边缘自然淡出 */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge-fade-top), #000 calc(100% - var(--composer-zone)), transparent calc(100% - var(--composer-zone) + var(--edge-fade-tail)));
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--edge-fade-top), #000 calc(100% - var(--composer-zone)), transparent calc(100% - var(--composer-zone) + var(--edge-fade-tail)));
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .scroll::-webkit-scrollbar{ width:0; height:0; }
  .v-spacer{
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    pointer-events: none;
  }

  .day{
    align-self: stretch;
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 26px 0 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 11px; letter-spacing: .08em; color: var(--text-faint);
    white-space: nowrap;
  }
  .day::before, .day::after{
    content:""; flex: 1 1 auto; max-width: 64px; height: 1px;
    background: rgba(60,72,100,.14);
  }

  /* 换人说话隔 16px，同一个人连着说只隔 3px */
  .row{ display:flex; position:relative; margin-top: 16px; }
  .day + .row{ margin-top: 16px; }
  .new-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: clamp(16px, 2.4vw, 24px);
    margin: clamp(16px, 2.4vw, 28px) 0 clamp(12px, 1.8vw, 20px);
    color: var(--text-faint);
    font-family: var(--font-en), var(--font-cn);
    font-size: clamp(12px, 1.6vw, 16px);
    line-height:1;
    letter-spacing:0;
  }
  .new-divider::before,
  .new-divider::after{
    content:"";
    width: clamp(94px, 24vw, 226px);
    height:1px;
    background: var(--hairline);
  }
  .row.grouped{ margin-top: 3px; }
  .row.human{ justify-content: flex-end; }
  .row.ai{ justify-content: flex-start; padding-left: calc(var(--avatar-size) + 9px); }
  .row.ai::before{
    content:"";
    position:absolute;
    left:0;
    top: 1px;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    background: var(--glass-strong) var(--avatar-default) center/cover;
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  }
  /* 连着发的几条只在第一条挂头像，不然隔 3px 一排小云叠在一起 */
  .row.ai.grouped::before{ visibility: hidden; }

  .bubble{
    max-width: 78%;
    padding: 9px 14px;
    position: relative;
    font-family: var(--font-cn);
    font-size: 13px; line-height: 1.65;
    word-wrap: break-word;
    overflow-wrap: break-word;
    animation: pop .24s cubic-bezier(.2,.8,.2,1) both;
  }
  .row[data-vkey] .bubble,
  .row[data-vkey] .think-block{ animation: none; }
  @keyframes pop{ from{ transform: translateY(5px) scale(.99);} to{ transform:none;} }
  /* 新消息入场:轻微弹性,只对刚发/刚收到那条播一次(虚拟列表复用不重播,JS 控 enter class) */
  .row[data-vkey].enter-human .bubble{ transform-origin: bottom right; animation: enterHuman .44s cubic-bezier(.34,1.46,.5,1) both; }
  .row[data-vkey].enter-ai .bubble{ transform-origin: bottom left; animation: enterAi .44s cubic-bezier(.34,1.46,.5,1) both; }
  @keyframes enterHuman{ from{ transform: translate(6px, 9px) scale(.95); opacity:0; } 55%{ opacity:1; } to{ transform:none; opacity:1; } }
  @keyframes enterAi{ from{ transform: translate(-6px, 9px) scale(.95); opacity:0; } 55%{ opacity:1; } to{ transform:none; opacity:1; } }
  /* 两边同一种玻璃：克雨这侧更透，谷雨这侧更实；外下角收成 4px 的小尖 */
  .row.ai .bubble{
    border-radius: 14px 14px 14px 4px;
    background: var(--glass);
    -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px rgba(64,76,112,.08);
    color: var(--text);
  }
  .row.human .bubble{
    border-radius: 14px 14px 4px 14px;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-edge), 0 6px 16px rgba(64,76,112,.10);
    color: var(--text);
  }
  /* 克雨自己活动的记录：同一种玻璃，染一层底色里那道浅蓝，字小一号、颜色淡一点，像一张便签 */
  .row.activity-log .bubble{
    background: rgba(140,172,222,.18) !important;
    border-color: rgba(140,172,222,.38) !important;
    color: var(--text-dim) !important;
    font-size: 12.5px;
  }

  .bubble .txt{ white-space: normal; }
  .bubble.has-att{ display:flex; flex-direction:column; gap:6px; }
  .bubble.att-only{ background:transparent !important; padding:0 !important; box-shadow:none !important; border:0 !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  /* 语音消息：聊天气泡和「语音」收藏页共用这一套。收藏页在 .app 外面，拿不到聊天页的变量，所以都带兜底色 */
  .voice-msg{ display:flex; align-items:center; gap:11px; min-width:200px; }
  .voice-play-btn{
    flex:none; width:34px; height:34px; border-radius:50%; padding:0; cursor:pointer;
    border:1px solid var(--glass-border, rgba(255,255,255,.4)); background:var(--glass, rgba(255,255,255,.46));
    color:var(--ink, #5E6C86);
    display:grid; place-items:center;
    transition: background .2s var(--ease-soft), color .2s var(--ease-soft), border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
  }
  .voice-play-btn svg{ width:14px; height:14px; display:block; }
  .voice-play-btn .ic-pause{ display:none; }
  .voice-msg.playing .voice-play-btn{
    background:var(--badge, #BDA0A1); border-color:var(--badge, #BDA0A1); color:#fff;
    box-shadow:0 4px 12px rgba(189,160,161,.4);
  }
  .voice-msg.playing .voice-play-btn .ic-play{ display:none; }
  .voice-msg.playing .voice-play-btn .ic-pause{ display:block; }
  .voice-play-btn:active{ transform:scale(.94); }
  .voice-mid{ flex:1 1 auto; min-width:0; }
  .voice-wave{ display:flex; align-items:center; gap:2.5px; height:16px; margin-bottom:6px; }
  .voice-wave i{ display:block; width:2px; border-radius:1px; background:var(--ink, #5E6C86); opacity:.35; }
  .voice-msg.playing .voice-wave i{ opacity:.75; animation:wavepulse 1.1s ease-in-out infinite; }
  .voice-wave i:nth-child(1){ height:5px; }
  .voice-wave i:nth-child(2){ height:11px; animation-delay:.1s; }
  .voice-wave i:nth-child(3){ height:7px; animation-delay:.2s; }
  .voice-wave i:nth-child(4){ height:15px; animation-delay:.3s; }
  .voice-wave i:nth-child(5){ height:9px; animation-delay:.15s; }
  .voice-wave i:nth-child(6){ height:13px; animation-delay:.25s; }
  .voice-wave i:nth-child(7){ height:6px; animation-delay:.05s; }
  .voice-wave i:nth-child(8){ height:10px; animation-delay:.35s; }
  @keyframes wavepulse{ 0%,100%{ transform:scaleY(.5); } 50%{ transform:scaleY(1); } }
  @media (prefers-reduced-motion: reduce){ .voice-msg.playing .voice-wave i{ animation:none; } }
  .voice-sub{ min-width:0; }
  .voice-sub-zh{ font-family:var(--font-cn); font-size:13.5px; line-height:1.6; color:var(--text); }
  .voice-sub-en{ font-size:12px; line-height:1.5; color:var(--text-dim, #6E7684); margin-bottom:2px; }
  .voice-star{
    flex:none; width:26px; height:26px; padding:0; border:0; background:none; cursor:pointer;
    color:var(--text-faint); display:grid; place-items:center;
    transition: color .2s var(--ease-soft), transform .15s var(--ease-soft);
  }
  .voice-star svg{ width:17px; height:17px; display:block; }
  .voice-star.active{ color:var(--badge, #BDA0A1); }
  .voice-star:active{ transform:scale(.85); }
  .voice-play-btn-pending{
    background:var(--hairline); animation:voicePendingPulse 1.2s ease-in-out infinite;
  }
  @keyframes voicePendingPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
  .voice-msg-pending .voice-sub-zh{ color:var(--text-faint); }
  .att-img-link{ display:block; line-height:0; border-radius:14px; overflow:hidden; width:min(64vw,260px); aspect-ratio:var(--att-ratio, 1.04); max-height:340px; background:rgba(125,128,135,.10); }
  .att-img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:14px; }
  .att-file{ display:flex; align-items:center; gap:10px; padding:9px 11px; min-width:170px; max-width:250px; text-decoration:none; color:inherit; background:rgba(255,255,255,.42); border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); border-radius:12px; }
  .att-file-ic{ flex:0 0 auto; width:36px; height:36px; display:grid; place-items:center; border-radius:9px; background:rgba(90,123,170,.10); color:var(--c-accent); }
  .att-file-ic svg{ width:20px; height:20px; opacity:.85; }
  .att-file-meta{ display:flex; flex-direction:column; min-width:0; }
  .att-file-name{ font-size:13px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .att-file-size{ font-size:11px; opacity:.6; margin-top:2px; }
  .att-uploading{ opacity:.62; }
  .att-failed{ outline:1.5px solid #e3534d; outline-offset:1px; }
  .bubble .txt a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .bubble .txt code{
    font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .92em;
    background: rgba(120,100,80,0.14); padding: 1px 5px; border-radius: 5px;
  }
  .bubble .txt strong{ font-weight: 700; }
  .code-block{ margin:8px 0; border-radius:10px; background:rgba(60,71,89,.88); overflow:hidden; }
  /* 文件块(txt/md 等)：跟气泡同一种玻璃，不再单独一层蓝 */
  .code-block.code-block-text{ background:rgba(255,255,255,.42); border:1px solid var(--glass-border); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
  .code-block pre{ margin:0; padding:12px 14px; overflow-x:auto; font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:.88em; color:#E6EAF2; line-height:1.55; white-space:pre; }
  .code-block.code-block-text pre{ color:var(--text); border-top:1px solid rgba(60,72,100,.10); font-family:var(--font-cn),var(--font-en); font-size:.93em; }
  .code-block-collapsed pre{ display:none; }
  .code-block-bar{ display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer; }
  .code-block-icon{ font-size:15px; flex-shrink:0; opacity:.6; }
  .code-block-name{ flex:1; font-size:12.5px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .code-block-btn{ background:rgba(255,255,255,.5); border:1px solid rgba(90,123,170,.45); border-radius:8px; color:var(--c-accent); font-size:11px; padding:3px 10px; cursor:pointer; font-family:var(--font-cn); flex-shrink:0; }
  .code-block:not(.code-block-text) .code-block-btn{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24); color:#E6EAF2; }
  .code-block:not(.code-block-text) .code-block-name{ color:rgba(230,234,242,.72); }
  .code-block-btn:active{ opacity:.7; }
  .today-cards{ display:flex; gap:8px; }
  .today-card{ flex:1 1 0; min-width:0; background:var(--card-bg); border:1px solid var(--card-line); border-radius:14px; box-shadow:var(--card-shadow); padding:14px 13px 13px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
  .today-card.is-tap{ cursor:pointer; }
  .today-card-label{ font-size:10px; color:var(--text-faint); letter-spacing:.06em; text-transform:uppercase; }
  .today-card-main{ font-family:var(--font-en), var(--font-cn); font-size:17px; font-weight:500; color:var(--text); line-height:1.25; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .today-card-sub{ font-size:10.5px; line-height:1.4; color:var(--text-soft); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* 还在写的代码块：只一条栏，后面淡淡数着行数，不展开 */
  .code-block-writing .code-block-bar{ cursor:default; }
  .code-block-writing .code-block-name{ animation:codeWriting 1.6s ease-in-out infinite; }
  .code-block-lines{ margin-left:auto; font-size:11px; opacity:.6; font-variant-numeric:tabular-nums; }
  @keyframes codeWriting{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
  /* 克雨发的图片(![说明](https://…))：跟你发的照片同一种圆角，按图片原本的比例，点开看大图 */
  .msg-img-link{ display:block; margin:6px 0; line-height:0; border-radius:14px; overflow:hidden; width:fit-content; max-width:min(64vw,260px); background:rgba(125,128,135,.08); }
  .msg-img{ display:block; max-width:100%; max-height:340px; border-radius:14px; }
  .msg-img-link.broken{ line-height:1.5; padding:10px 14px; }
  .msg-img-link.broken img{ display:none; }
  .msg-img-link.broken::after{ content:"图片打不开，点这里看原链接"; font-size:12px; color:#9A9AA8; }