/* ABYSECHO · 聊天页 · 草稿 A — 日间通透蓝 (Telegram blue · clean glass)
   仅样式：粘贴进 chat.html 的 <style> 即可，HTML 结构与 JS 逻辑无需改动。 */

@font-face{font-family:'Sparke';src:url('Sparke.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
/* ===== 草稿 A · 日间通透蓝 (Telegram blue · clean glass) ===== */
:root{
  --accent:#3a8fe8;
  --text:#16202f;
  --dim:rgba(20,32,49,.42);
  --glass-bg:rgba(255,255,255,.5);
  --glass-border:rgba(255,255,255,.74);
  --glass-blur:blur(22px) saturate(180%);
  --time-me:rgba(255,255,255,.74);
  --time-them:rgba(20,32,49,.34);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{min-height:100%;background:#cfdcec}
body{position:relative;min-height:100vh;min-height:100dvh;overflow:visible;font-family:'Noto Serif SC','PingFang SC',-apple-system,sans-serif;background:#cfdcec}
.stage-chat{
  position:absolute;top:0;left:0;right:0;bottom:calc(-1 * env(safe-area-inset-bottom,0px));
  min-height:100dvh;
  display:flex;flex-direction:column;overflow:hidden;
  background:
    radial-gradient(120% 60% at 78% -6%,rgba(255,255,255,.7),transparent 52%),
    linear-gradient(180deg,#eaf3fc 0%,#d8e6f5 38%,#c6d6ea 100%);
  transform:none;opacity:1;
  transition:none;
}
.stage-chat.page-enter{animation:none;transform:none;opacity:1}
.stage-chat.page-leave{animation:none;transform:none;opacity:1;pointer-events:none;transition:none}
.stage-chat.exit-to-nav{animation:none;transform:none;opacity:1;pointer-events:auto}

/* header */
.chat-header{flex:none;padding:calc(env(safe-area-inset-top,44px) + 10px) 14px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:3}
.chat-header::before{content:"";position:absolute;inset:0 0 -36px;z-index:0;background:linear-gradient(180deg,rgba(234,243,252,.82),rgba(234,243,252,.0));-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);-webkit-mask-image:linear-gradient(180deg,#000 34%,transparent);mask-image:linear-gradient(180deg,#000 34%,transparent);pointer-events:none}
.chat-header > *{position:relative;z-index:1}
.glass-circle{width:38px;height:38px;border-radius:50%;background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;box-shadow:0 6px 16px rgba(40,72,120,.1),inset 0 1px 0 rgba(255,255,255,.6);padding:0}
.glass-circle svg{width:18px;height:18px;fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.header-pill{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;padding:0 38px;height:42px;justify-content:center;border-radius:999px;width:auto;max-width:calc(100% - 116px);background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:0 6px 16px rgba(40,72,120,.1),inset 0 1px 0 rgba(255,255,255,.6)}
.header-name{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;line-height:1.1;letter-spacing:.01em}
.header-status{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;max-width:100%;font-size:11px;color:#3fae73;margin-top:1px;line-height:1.1;font-weight:500;white-space:nowrap}
.header-status .cfg-status{display:inline;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.1;font-weight:500}
.header-status.s-online,.header-status .cfg-status.s-online{color:#3fae73}
.header-status.s-thinking,.header-status .cfg-status.s-thinking{color:#3f7fd8;animation:header-status-breathe 1.35s ease-in-out infinite}
.header-status.s-offline,.header-status .cfg-status.s-offline{color:rgba(20,32,49,.34)}
.header-status .cfg-dot{width:7px;height:7px;display:inline-block;border-radius:50%;flex:none}
.header-status .cfg-dot.s-online{background:#3fae73;box-shadow:0 0 6px rgba(63,174,115,.75)}
.header-status .cfg-dot.s-thinking{background:#3f7fd8;box-shadow:0 0 7px rgba(63,127,216,.75);animation:header-status-breathe 1.35s ease-in-out infinite}
.header-status .cfg-dot.s-offline{background:transparent;box-shadow:inset 0 0 0 1.4px rgba(20,32,49,.3)}
.header-status .relay-mini{display:none!important}
@keyframes header-status-breathe{0%,100%{opacity:1}50%{opacity:.48}}
.header-avatar{overflow:hidden;border-radius:50%;background-clip:padding-box}
.header-avatar img{width:100%;height:100%;object-fit:cover}
.header-avatar span{font-size:15px;color:#3a7bd0;font-weight:700}

/* messages */
.messages{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 8px 10px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.messages::before{content:'';flex:1 0 0px;font-size:0;line-height:0;visibility:hidden}
.bubble{max-width:80%;min-width:0;padding:7px 12px;font-size:14.5px;line-height:1.42;overflow-wrap:anywhere;word-break:break-word}
.bubble.new-turn,.chat-media.new-turn,.thinking-card.new-turn{margin-top:10px}
.bubble.them{align-self:flex-start;border-radius:18px 18px 18px 18px;background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);color:#1a2333;border:1px solid rgba(255,255,255,.7);box-shadow:0 3px 10px rgba(40,72,120,.07)}
.bubble.them.tail{border-radius:18px 18px 18px 5px}
.bubble.me{align-self:flex-end;border-radius:18px 18px 18px 18px;background:linear-gradient(135deg,#5aa0f0,#2f72cf);color:#fff;box-shadow:0 4px 14px rgba(47,114,207,.28)}
.bubble.me.tail{border-radius:18px 18px 5px 18px}
.msg-time{display:inline;float:right;font-size:10px;margin:5px 0 0 8px}
.msg-check{font-size:10px;margin-left:1px}
.bubble.me .msg-time{color:var(--time-me)}
.bubble.me .msg-check{color:var(--time-me)}
.bubble.them .msg-time{color:var(--time-them)}
.bubble.them .msg-check{color:var(--time-them)}

/* thought cards — day version (glass, star icon, shimmer) */
.thinking-card{position:relative;align-self:flex-start;max-width:90%;padding:0;overflow:hidden;border-radius:16px;border:0;color:#36405a;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:0 6px 20px rgba(40,72,120,.12);flex-shrink:0}
.think-toggle{width:100%;display:flex;align-items:center;gap:9px;padding:11px 12px 11px 15px;border:0;background:transparent;color:inherit;font-family:inherit;cursor:pointer;text-align:left}
.think-quote{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(108,124,240,.14);font-size:0}
.think-quote::before{content:"";width:13px;height:13px;background:#5a6ae8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.9 4.4L18.5 8l-3.5 3.4.9 4.9L12 13.9 8.1 16.3l.9-4.9L5.5 8l4.6-1.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l1.9 4.4L18.5 8l-3.5 3.4.9 4.9L12 13.9 8.1 16.3l.9-4.9L5.5 8l4.6-1.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.think-summary{flex:1;min-width:0;font-size:13px;font-weight:600;color:#36405a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.think-meta{flex:none;font-size:10.5px;color:rgba(54,64,90,.42)}
.think-chevron{flex:none;width:15px;height:15px;color:#6d7cf0;transition:transform .25s ease;display:flex;align-items:center;justify-content:center;font:700 20px/.9 sans-serif}
.think-chevron svg{width:15px;height:15px;display:block}
.thinking-card.open .think-chevron{transform:rotate(180deg)}
.think-body{max-height:0;opacity:0;overflow:hidden;padding:0 15px 0 15px;color:rgba(40,50,74,.82);font-size:12.5px;line-height:1.72;white-space:pre-line;transition:max-height .3s cubic-bezier(.2,.85,.3,1),opacity .25s ease}
.thinking-card.open .think-body{max-height:min(68vh,640px);opacity:1;overflow-y:auto;padding-bottom:13px;scrollbar-width:thin;scrollbar-color:rgba(54,64,90,.18) transparent}
.thinking-card.open .think-body::-webkit-scrollbar{width:3px}
.thinking-card.open .think-body::-webkit-scrollbar-thumb{background:rgba(54,64,90,.18);border-radius:3px}
.thinking-time{display:none}
.is-thinking .think-quote{animation:tc-glow 1.4s ease-in-out infinite}
.is-thinking .think-summary{background:linear-gradient(90deg,#9aa3c8 0%,#5a6ae8 45%,#9aa3c8 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:tc-shimmer 1.7s linear infinite}
.is-thinking .think-chevron{display:none}
.think-dots{display:none;gap:3px;padding-right:2px}
.is-thinking .think-dots{display:flex}
.think-dots i{width:4px;height:4px;border-radius:50%;background:#6d7cf0;animation:tc-dot 1.3s ease-in-out infinite}
.think-dots i:nth-child(2){animation-delay:.18s}
.think-dots i:nth-child(3){animation-delay:.36s}
@keyframes tc-shimmer{to{background-position:-200% 0}}
@keyframes tc-dot{0%,80%,100%{opacity:.28;transform:translateY(0)}40%{opacity:1;transform:translateY(-2.5px)}}
@keyframes tc-glow{0%,100%{opacity:.5}50%{opacity:1}}

/* image cards */
.chat-media{position:relative;align-self:flex-start;max-width:min(78%,320px)}
.chat-media.me{align-self:flex-end}
.media-stack{display:grid;gap:4px;max-width:280px}
.media-stack.n1{grid-template-columns:1fr}
.media-stack.n2,.media-stack.n3,.media-stack.n4{grid-template-columns:1fr 1fr}
.media-stack.n3 > :first-child{grid-column:1/-1}
.media-stack img{display:block;width:100%;max-height:220px;object-fit:cover;border:1px solid rgba(255,255,255,.5);border-radius:14px;background:rgba(255,255,255,.4);cursor:zoom-in}
.media-stack.n1 img{max-height:300px;border-radius:16px}
.media-stack.n2 img,.media-stack.n4 img{aspect-ratio:1}
.media-stack.n3 > :first-child img{aspect-ratio:16/9}
.media-stack.n3 > :not(:first-child) img{aspect-ratio:1}
.sticker-media{max-width:180px}
.sticker-media .media-stack img{max-height:180px;object-fit:contain;background:transparent;border:0}
.media-time{position:absolute;right:6px;bottom:5px;padding:2px 6px;border-radius:99px;background:rgba(18,38,62,.42);color:rgba(255,255,255,.9);font-size:10px}
.media-count{position:absolute;right:6px;top:6px;padding:2px 6px;border-radius:99px;background:rgba(18,38,62,.48);color:#fff;font-size:10px}
.media-lightbox{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(12,27,46,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.media-lightbox.open{display:flex}
.media-lightbox img{max-width:100%;max-height:82dvh;border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.42)}
.media-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:14px;width:36px;height:36px;border:0;border-radius:50%;color:#fff;background:rgba(255,255,255,.18);font-size:25px}

/* bottom */
.chat-bottom{flex:none;padding:8px 14px calc(10px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.chat-bottom > *{pointer-events:auto}
.input-capsule{flex:1;min-width:0;display:flex;align-items:center;gap:4px;padding:3px 5px 3px 14px;min-height:40px;height:auto;border-radius:999px;background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:0 6px 16px rgba(40,72,120,.1),inset 0 1px 0 rgba(255,255,255,.6)}
.chat-input{flex:1;height:32px;min-height:32px;border:none;background:transparent;font-size:16px;color:var(--text);outline:none;font-family:inherit;min-width:0;resize:none;max-height:120px;line-height:1.4;padding:5px 2px;overflow-y:hidden}
.chat-input::placeholder{color:var(--dim)}
.input-icon{width:32px;height:32px;border-radius:50%;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.input-icon svg{width:20px;height:20px;fill:none;stroke:rgba(20,32,49,.4);stroke-width:1.8;stroke-linecap:round}
.input-icon:active{background:rgba(40,72,120,.08);border-radius:50%}
.send-btn{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#4a96ee,#2f72cf);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 3px 9px rgba(47,114,207,.34)}
.send-btn svg{width:14px;height:14px;fill:#fff}
.send-btn:active{opacity:.8}
.loading-indicator{align-self:center;padding:20px;font-size:12px;color:var(--dim)}
.messages::-webkit-scrollbar{width:2px}
.messages::-webkit-scrollbar-thumb{background:rgba(40,72,120,.12);border-radius:2px}

/* sticker sheet */
.sticker-sheet{position:fixed;inset:auto 0 0;z-index:10;height:min(46dvh,336px);display:flex;flex-direction:column;padding:12px 10px calc(10px + env(safe-area-inset-bottom,0px));border-radius:26px 26px 0 0;background:rgba(236,244,252,.86);border-top:1px solid rgba(255,255,255,.82);box-shadow:0 -14px 38px rgba(42,76,114,.18);-webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.85,.3,1)}
.sticker-sheet.open{transform:translateY(0)}
.sticker-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 4px 8px}
.sticker-sheet-title{font-size:15px;font-weight:700;color:var(--text)}
.sticker-sheet-mode{font-size:10.5px;color:var(--dim);line-height:1.3;margin-top:1px}
.sticker-actions{display:flex;align-items:center;gap:7px}
.sticker-act{height:28px;border:0;border-radius:999px;padding:0 11px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(91,123,157,.13);color:var(--text);font:600 12px 'Noto Sans SC',sans-serif;cursor:pointer}
.sticker-act.plus{width:28px;padding:0;font-size:18px;line-height:1;color:#2367af;background:rgba(58,143,232,.16)}
.sticker-act:disabled{opacity:.55;cursor:wait}
.sticker-close{width:28px;height:28px;border:0;border-radius:50%;color:var(--dim);background:rgba(255,255,255,.62);font-size:21px;line-height:1}
.sticker-search{width:100%;border:1px solid rgba(91,123,157,.16);border-radius:13px;padding:8px 13px;color:var(--text);background:rgba(255,255,255,.66);outline:none;font:13px inherit}
.sticker-chips{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:8px 1px;scrollbar-width:none;flex:none;-webkit-overflow-scrolling:touch}
.sticker-chips::-webkit-scrollbar{display:none}
.sticker-chip{flex:none;border:1px solid rgba(91,123,157,.18);border-radius:999px;padding:6px 14px;background:rgba(255,255,255,.7);color:var(--dim);font:13px inherit;box-shadow:0 1px 3px rgba(40,72,120,.05)}
.sticker-chip.on{background:rgba(58,143,232,.16);color:#2367af;border-color:rgba(58,143,232,.28)}
.sticker-chip.add{border-style:dashed;color:#2367af}
.sticker-grid{overflow-y:auto;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:calc((100vw - 36px) / 5);gap:4px;padding:1px 0 4px;min-height:0}
.sticker-cell{border:0;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.5);cursor:pointer;-webkit-tap-highlight-color:transparent;min-width:0;min-height:0}
.sticker-sheet.is-manage .sticker-cell{box-shadow:inset 0 0 0 1px rgba(58,143,232,.22)}
.sticker-cell img{display:block;width:100%;height:100%;object-fit:contain;padding:2px}
.sticker-empty{grid-column:1/-1;padding:22px 0;color:var(--dim);text-align:center;font-size:13px}
.sticker-upload-note{grid-column:1/-1;border-radius:12px;padding:9px 12px;background:rgba(58,143,232,.12);color:#2367af;font:600 12px 'Noto Sans SC',sans-serif;text-align:center}
.sticker-ctx-menu{position:fixed;z-index:420;min-width:176px;max-width:220px;padding:6px;border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 14px 34px rgba(42,76,114,.22),inset 0 0 0 1px rgba(91,123,157,.12);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.sticker-ctx-menu button{display:block;width:100%;border:0;border-radius:10px;padding:9px 10px;background:transparent;color:var(--text);font:13px 'Noto Sans SC',sans-serif;text-align:left;cursor:pointer}
.sticker-ctx-menu button:active{background:rgba(58,143,232,.12)}
.sticker-ctx-menu .danger{color:#c75555}
.sticker-prompt-mask{position:fixed;inset:0;z-index:430;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(30,50,90,.26);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sticker-prompt-box{width:min(320px,100%);border-radius:20px;padding:16px;background:rgba(255,255,255,.94);box-shadow:0 18px 42px rgba(42,76,114,.22),inset 0 0 0 1px rgba(91,123,157,.12)}
.sticker-prompt-title{font:700 15px 'Noto Sans SC',sans-serif;color:var(--text);margin-bottom:10px}
.sticker-prompt-input{width:100%;border:0;outline:0;border-radius:12px;padding:10px 12px;background:rgba(40,72,120,.07);box-shadow:inset 0 0 0 1px rgba(91,123,157,.14);color:var(--text);font:14px 'Noto Sans SC',sans-serif}
.sticker-prompt-actions{display:flex;gap:8px;margin-top:12px}
.sticker-prompt-actions button{flex:1;border:0;border-radius:999px;padding:9px 10px;background:rgba(40,72,120,.08);color:var(--text);font:600 13px 'Noto Sans SC',sans-serif}
.sticker-prompt-actions .ok{background:linear-gradient(135deg,#5aa0f0,#2f72cf);color:#fff}