/* 西文全部本地：Archivo 与 Spline Mono 在吊牌项目里，跨项目相对引用。
   四套风格共用同一款中文黑体——真实的 IM 客户端都用系统无衬线，
   靠字体区分风格是假的；差异在版面结构、气泡形态与配色。 */
:root {
  color-scheme: light;
  --ui-accent: #3f6d5a;
  --ui-accent-dark: #2a4a3d;
  --ui-accent-soft: #e2ede8;
  --ui-bg: #e6e8e6;
  --ui-panel: #f6f7f6;
  --ui-card: #fcfdfc;
  --ui-line: #cbcfcb;
  --ui-line-strong: #a9aea9;
  --ui-text: #232725;
  --ui-muted: #646b66;
  --topbar-height: 64px;
  --font-ui: "OC Archivo","OC Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-serif: "OC Noto Serif SC","Noto Serif SC","Songti SC",serif;
  --font-mono: "OC Spline Mono",Consolas,"Courier New",monospace;
  font-family: var(--font-ui);
}
* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; }
body { width: 100%; height: 100vh; height: 100dvh; min-width: 320px; margin: 0; overflow: hidden; display: grid; grid-template-rows: var(--topbar-height) minmax(0,1fr); color: var(--ui-text); background: var(--ui-bg); }
body.is-export-busy,body.is-export-busy button { cursor: progress; }
button,input,textarea,select { font: inherit; color: inherit; }
button,.file-button { -webkit-tap-highlight-color: transparent; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
button:active,.file-button:active { transform: translateY(1px); }
[hidden] { display: none !important; }

.topbar { height: 100%; display: flex; align-items: center; gap: 14px; padding: 0 16px; border-bottom: 1px solid var(--ui-line); background: rgba(250,251,250,.98); position: relative; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 250px; color: inherit; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 5px; background: var(--ui-accent); color: #fff; font-family: var(--font-serif); font-size: 22px; font-weight: 800; box-shadow: 4px 4px 0 #d3d8d4; }
.brand-copy { display: grid; gap: 1px; }
.brand-copy b { font-family: var(--font-serif); font-size: 17px; line-height: 1.2; }
.brand-copy small { color: var(--ui-muted); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.project-field { flex: 1; max-width: 420px; display: grid; grid-template-columns: auto minmax(160px,1fr); align-items: center; gap: 8px; }
.project-field span { color: var(--ui-muted); font-size: 12px; font-weight: 700; }
.project-field input { height: 40px; min-width: 0; padding: 0 12px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.button,.preview-actions button { min-height: 38px; padding: 0 13px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 750; white-space: nowrap; }
.button:hover,.preview-actions button:hover { border-color: var(--ui-accent); }
.button.primary { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; }
.button.quiet { background: transparent; }
.button.compact { min-height: 34px; padding-inline: 10px; font-size: 12px; }
.button:disabled { opacity: .4; cursor: default; }
.file-button { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.file-button input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.text-button { padding: 4px 0; border: 0; background: transparent; color: var(--ui-accent-dark); cursor: pointer; font-size: 12px; font-weight: 750; }
.workspace { min-height: 0; display: grid; grid-template-columns: 356px minmax(430px,1fr) 372px; }
.editor-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); background: var(--ui-panel); }
.content-panel { border-right: 1px solid var(--ui-line); }
.style-panel { border-left: 1px solid var(--ui-line); }
.panel-heading { min-height: 70px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ui-line); background: #f9faf9; }
.panel-heading > span { padding: 4px 8px; border-radius: 4px; background: var(--ui-accent-soft); color: var(--ui-accent-dark); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.panel-heading h1 { margin: 0; font-family: var(--font-serif); font-size: 17px; }
.panel-heading p { margin: 2px 0 0; color: var(--ui-muted); font-size: 11px; }
.panel-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px; scrollbar-gutter: stable; }
.editor-card { margin-bottom: 14px; padding: 14px; border: 1px solid var(--ui-line); border-radius: 8px; background: var(--ui-card); box-shadow: 0 1px 0 rgba(35,39,37,.03); }
.card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-title h2 { margin: 0; font-family: var(--font-serif); font-size: 15px; }
.card-title p { margin: 3px 0 0; color: var(--ui-muted); font-size: 11px; line-height: 1.5; }
.card-title > span { padding: 3px 7px; border: 1px solid var(--ui-line); border-radius: 4px; color: var(--ui-muted); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.field { min-width: 0; display: grid; gap: 5px; margin-bottom: 10px; }
.field > span { color: var(--ui-muted); font-size: 11px; font-weight: 750; }
.field input,.field select,.field textarea { min-height: 38px; min-width: 0; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; font-size: 13px; }
.field textarea { min-height: 66px; line-height: 1.6; resize: vertical; }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.image-control { display: grid; grid-template-columns: 66px minmax(0,1fr); align-items: center; gap: 11px; margin-bottom: 10px; }
.image-control p { margin: 3px 0 6px; color: var(--ui-muted); font-size: 11px; line-height: 1.5; }
.upload-preview { width: 66px; height: 66px; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--ui-line-strong); border-radius: 8px; background: #eeefee; color: var(--ui-muted); font-size: 10px; }
.upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.style-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.style-button { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--ui-line); border-radius: 6px; background: #fff; text-align: left; cursor: pointer; }
.style-button.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.style-swatch { width: 30px; height: 40px; border: 1px solid rgba(0,0,0,.15); border-radius: 3px; background: linear-gradient(180deg,var(--sw-s) 0 40%,var(--sw-you) 40% 58%,var(--sw-me) 58% 78%,var(--sw-a) 78%); }
.style-button b { display: block; font-size: 11.5px; line-height: 1.35; }
.style-button small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 9px; line-height: 1.32; }
.color-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.color-field { min-width: 0; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; }
.color-field > span { font-size: 10.5px; font-weight: 750; }
.color-field .clr-field { width: 100%; }
.color-field input { width: 100%; min-width: 0; height: 30px; border: 0; background: transparent; }
.check-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.check-row label,.check-field { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; font-size: 12px; font-weight: 700; }
.check-field { margin-top: 8px; }
.check-row input,.check-field input { accent-color: var(--ui-accent); }
.range-row { display: grid; grid-template-columns: minmax(0,1fr) 56px; align-items: center; gap: 10px; margin-bottom: 10px; }
.range-row.labeled { grid-template-columns: 44px minmax(0,1fr) 56px; }
.range-row.labeled > span { color: var(--ui-muted); font-size: 11px; font-weight: 750; }
.range-row input[type="range"] { width: 100%; accent-color: var(--ui-accent); }
.range-row output { text-align: right; color: var(--ui-muted); font-size: 11px; font-weight: 750; }
.segment-control { display: grid; gap: 7px; }
.segment-control > span { color: var(--ui-muted); font-size: 11px; font-weight: 750; }
.segment-switch { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); }
.segment-switch button { min-height: 36px; border: 1px solid var(--ui-line); border-right: 0; background: #fff; cursor: pointer; font-size: 12px; font-weight: 800; }
.segment-switch button:first-child { border-radius: 6px 0 0 6px; }
.segment-switch button:last-child { border-right: 1px solid var(--ui-line); border-radius: 0 6px 6px 0; }
.segment-switch button.active { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; }
.hint-note { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--ui-line-strong); background: #f1f3f1; color: var(--ui-muted); font-size: 11px; line-height: 1.6; }
.empty-note { margin: 4px 0; color: var(--ui-muted); font-size: 11px; }
.export-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.export-grid .button { min-height: 42px; }
.preview-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 48px minmax(0,1fr); background: #d6d8d6; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 11px; border-bottom: 1px solid var(--ui-line); background: #f4f5f4; }
.preview-toolbar > div { display: flex; align-items: center; gap: 6px; }
.preview-toolbar strong { font-size: 13px; }
.preview-toolbar #save-state { color: var(--ui-muted); font-size: 11px; }
.preview-actions button { min-height: 32px; padding: 0 9px; font-size: 12px; }
.preview-actions button.active { border-color: var(--ui-accent); background: var(--ui-accent); color: #fff; }
.page-badge { min-width: 46px; text-align: center; font: 700 11px/1 var(--font-mono); color: var(--ui-muted); }
.preview-viewport { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.preview-stage { position: relative; margin: 26px auto; box-shadow: 0 12px 34px rgba(30,40,34,.22); }

/* ================= 会话画面 =================
   一套标记，四套风格靠 [data-style] 覆盖；双人与群聊靠 [data-mode]。
   六个色槽：底 --s / 我方 --me / 对方 --you / 文 --i / 次 --m / 强 --a。
   画布固定 390×844：状态栏 20 + 顶栏 44 + 会话区 724 + 输入栏 56。
   会话内容的字号跟着 --tscale 走，状态栏与顶栏不缩，画面框架保持稳定。 */
.chat{--chat-cjk:"OC Noto Sans SC",sans-serif;--chat-lat:"OC Archivo",sans-serif;--chat-mono:"OC Spline Mono",monospace}

/* ================= 会话基座 =================
   一套标记，四套风格靠 [data-style] 覆盖。六个色槽：
   底 --s / 我方 --me / 对方 --you / 文 --i / 次 --m / 强 --a
   气泡上的文字色由该气泡底自动取黑或白，不单独占槽。 */
.chat{position:relative;width:390px;height:844px;flex:none;display:flex;flex-direction:column;overflow:hidden;transform-origin:top left;
  background:var(--s);color:var(--i);font-family:var(--chat-cjk);font-size:calc(14px * var(--tscale,1));line-height:1.55;
  --s:#ededed;--me:#95ec69;--you:#ffffff;--i:#1a1a1a;--m:#868686;--a:#576b95;
  --me-ink:#1a1a1a;--you-ink:#1a1a1a;--radius:6px;--gap:14px}
.chat-top{flex:none;display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--s);border-bottom:1px solid color-mix(in srgb,var(--i) 12%,transparent)}
.chat-top .back,.chat-top .more{width:16px;height:16px;flex:none;opacity:.55}
.chat-top .back{border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) scale(.6)}
.chat-top .more{background:radial-gradient(circle 1.6px at 3px 8px,currentColor 1.6px,transparent 0),radial-gradient(circle 1.6px at 8px 8px,currentColor 1.6px,transparent 0),radial-gradient(circle 1.6px at 13px 8px,currentColor 1.6px,transparent 0)}
.chat-top b{flex:1;text-align:center;font-size:15px;font-weight:600}
.chat-body{flex:1;display:flex;flex-direction:column;gap:var(--gap);padding:14px 12px 16px}
.chat-bar{flex:none;display:flex;align-items:center;gap:9px;padding:9px 12px;min-height:56px;
  background:var(--s);border-top:1px solid color-mix(in srgb,var(--i) 12%,transparent)}
.chat-bar i{width:24px;height:24px;flex:none;border:1.4px solid currentColor;border-radius:50%;opacity:.42}
/* 输入框里的内容可编辑：空态是占位文字，有内容时右侧变成发送按钮 */
.draft{flex:1;min-width:0;min-height:32px;display:flex;align-items:center;gap:2px;padding:6px 9px;
  border-radius:5px;background:color-mix(in srgb,var(--i) 8%,var(--s));font-size:13.5px;line-height:1.4}
.draft.empty{color:color-mix(in srgb,var(--m) 74%,var(--i))}
.caret{width:1.5px;height:15px;background:var(--a);display:inline-block;flex:none}
.send{flex:none;width:auto;height:auto;border:0;border-radius:4px;padding:5px 11px;opacity:1;
  background:var(--a);color:#fff;font-size:12.5px;font-style:normal;font-weight:500}
/* 状态栏：既然导出固定一屏，没有它就不像截图 */
.status{flex:none;height:20px;display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;background:var(--s);color:var(--i);font:600 11px/1 var(--chat-mono)}
.status .ind{display:flex;align-items:center;gap:5px}
.sig{width:15px;height:9px;background:
  linear-gradient(currentColor,currentColor) 0 100%/3px 4px no-repeat,
  linear-gradient(currentColor,currentColor) 4px 100%/3px 6px no-repeat,
  linear-gradient(currentColor,currentColor) 8px 100%/3px 8px no-repeat,
  linear-gradient(currentColor,currentColor) 12px 100%/3px 9px no-repeat}
.wifi{width:12px;height:9px;border:1.5px solid currentColor;border-radius:50% 50% 0 0;border-bottom:0}
.batt{width:19px;height:9px;border:1.2px solid currentColor;border-radius:2px;padding:1.4px;position:relative}
.batt::before{content:"";display:block;height:100%;width:var(--lv,62%);background:currentColor;border-radius:1px}
.batt::after{content:"";position:absolute;right:-3px;top:2.6px;width:1.6px;height:3.4px;background:currentColor;border-radius:0 1px 1px 0}

/* 居中提示：系统 / 撤回 / 时间 */
.sys,.time{align-self:center;max-width:78%;text-align:center;font-size:11px;color:var(--m);line-height:1.5}
.sys{color:color-mix(in srgb,var(--m) 74%,var(--i))}
.sys{padding:3px 9px;border-radius:3px;background:color-mix(in srgb,var(--i) 6%,transparent)}

/* 一行消息 */
.msg{display:flex;gap:8px;align-items:flex-start;max-width:100%}
.msg.me{flex-direction:row-reverse}
.ava{position:relative;flex:none;width:36px;height:36px;border-radius:var(--radius);display:grid;place-items:center;overflow:hidden;
  background:var(--a);color:#fff;font-size:14px;font-weight:600}
.ava img{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;display:block}
.col{min-width:0;max-width:calc(100% - 52px);display:flex;flex-direction:column;gap:4px}
.msg.me .col{align-items:flex-end}
.name{font-size:11px;color:var(--m);font-weight:400;display:none}
.bub{position:relative;max-width:100%;padding:8px 11px;border-radius:var(--radius);
  background:var(--you);color:var(--you-ink);word-break:break-word}
.msg.me .bub{background:var(--me);color:var(--me-ink)}
.bub p{margin:0}
.rr{font-size:10px;color:var(--m)}

/* 引用条 */
.quote{max-width:100%;padding:5px 8px;border-radius:4px;font-size:11px;line-height:1.45;
  background:color-mix(in srgb,var(--i) 7%,transparent);color:color-mix(in srgb,var(--m) 74%,var(--i))}
.quote b{color:var(--a);font-weight:500}

/* 语音条 */
.bub.voice{display:flex;align-items:center;gap:9px;min-width:96px}
.bub.voice .wave{flex:1;height:12px;min-width:44px;
  background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 5px);
  -webkit-mask-image:linear-gradient(90deg,#000 0 62%,transparent 62%);mask-image:linear-gradient(90deg,#000 0 62%,transparent 62%);opacity:.7}
.bub.voice em{font-style:normal;font-family:var(--chat-mono);font-size:11px}
.tr{max-width:100%;margin-top:-1px;padding:7px 10px;border-radius:var(--radius);font-size:12.5px;line-height:1.5;
  background:color-mix(in srgb,var(--you) 92%,var(--i));color:var(--i)}
.msg.me .tr{background:color-mix(in srgb,var(--me) 88%,var(--i))}

/* 图片 */
.bub.img{padding:0;overflow:hidden;background:transparent}
.bub.img .ph{position:relative;width:150px;height:112px;overflow:hidden;
  background:linear-gradient(135deg,#c9d4dd,#8fa6b8 55%,#6b8598),
    radial-gradient(circle 18px at 34px 30px,rgba(255,255,255,.85) 18px,transparent 0)}
.bub.img .ph img{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;display:block}
.bub.img small{display:block;padding:5px 2px 0;font-size:11px;color:var(--m)}

/* 卡片：转账 / 红包 / 文件 / 位置 */
.bub.card{padding:0;overflow:hidden;width:210px}
.card-main{display:flex;align-items:center;gap:10px;padding:12px}
.card-main .ic{flex:none;width:34px;height:34px;border-radius:5px;display:grid;place-items:center;
  background:var(--a);color:#fff;font-size:15px;font-weight:700}
.card-main b{display:block;font-size:16px;font-weight:600;font-family:var(--chat-lat),var(--chat-cjk)}
.card-main small{display:block;margin-top:2px;font-size:11px;opacity:.62}
.card-foot{padding:5px 12px 7px;font-size:10.5px;opacity:.55;
  border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.bub.transfer .ic{background:#c6861c}
.bub.redpacket .ic{background:#d94b3f}
.bub.file .ic{background:#5b8def;font-size:10px;letter-spacing:.02em}
.bub.loc{width:210px}
.bub.loc .map{height:86px;background:
  linear-gradient(90deg,transparent 46%,rgba(255,255,255,.75) 46% 52%,transparent 52%),
  linear-gradient(0deg,transparent 62%,rgba(255,255,255,.75) 62% 66%,transparent 66%),
  linear-gradient(135deg,#dfe7d8,#c6d4bd);position:relative}
.bub.loc .map::after{content:"";position:absolute;left:50%;top:44%;width:9px;height:9px;margin:-9px 0 0 -4.5px;
  border-radius:50% 50% 50% 0;background:#d94b3f;transform:rotate(-45deg)}

/* 正在输入 */
.msg.typing .bub{display:flex;gap:4px;align-items:center;padding:11px}
.msg.typing i{width:5px;height:5px;border-radius:50%;background:var(--m)}


/* ---- 01 绿泡泡系 ---- */
.chat[data-style="bb"]{--s:#ededed;--me:#95ec69;--you:#ffffff;--i:#1a1a1a;--m:#868686;--a:#576b95;
  --me-ink:#1a1a1a;--you-ink:#1a1a1a;--radius:5px;--gap:15px}
.chat[data-style="bb"] .bub:not(.img)::before{content:"";position:absolute;top:11px;width:0;height:0;
  border-block:5px solid transparent}
.chat[data-style="bb"] .msg.you .bub:not(.img)::before{left:-5px;border-right:6px solid var(--you)}
.chat[data-style="bb"] .msg.me .bub:not(.img)::before{right:-5px;border-left:6px solid var(--me)}
.chat[data-style="bb"] .chat-top{background:#ededed}
.chat[data-style="bb"] .rr{display:none}

/* ---- 02 深色系：没有气泡，头像＋彩色昵称＋正文平铺 ---- */
.chat[data-style="dc"]{--s:#313338;--me:#313338;--you:#313338;--i:#dbdee1;--m:#949ba4;--a:#6974f3;
  --me-ink:#dbdee1;--you-ink:#dbdee1;--radius:50%;--gap:17px}
.chat[data-style="dc"] .chat-top{background:#2b2d31;border-bottom-color:#1f2124}
.chat[data-style="dc"] .chat-bar{background:#2b2d31;border-top-color:#1f2124}
.chat[data-style="dc"] .chat-bar span{background:#383a40}
/* 我方也排在左边，靠昵称颜色区分说话人 */
.chat[data-style="dc"] .msg{flex-direction:row}
.chat[data-style="dc"] .col{align-items:flex-start;max-width:calc(100% - 46px);gap:2px}
.chat[data-style="dc"] .name{display:block;font-size:13px;font-weight:600;color:var(--a)}
.chat[data-style="dc"] .msg.me .name{color:#bb893e}
.chat[data-style="dc"] .bub{background:transparent;padding:0;border-radius:0;font-size:14px}
.chat[data-style="dc"] .bub.card,.chat[data-style="dc"] .tr{background:#2b2d31;border-left:3px solid var(--a);border-radius:4px}
.chat[data-style="dc"] .bub.voice{background:#2b2d31;border-radius:16px;padding:7px 12px}
.chat[data-style="dc"] .quote{background:transparent;border-left:2px solid #4e5058;border-radius:0;padding-left:8px}
.chat[data-style="dc"] .sys{background:transparent;border-block:1px solid #3f4147;border-radius:0;width:100%;max-width:100%;padding:5px 0}
.chat[data-style="dc"] .rr{display:none}

/* ---- 03 蓝灰系：大圆角带尾巴，双人不显示头像 ---- */
.chat[data-style="bl"]{--s:#ffffff;--me:#2c7cf6;--you:#e9e9eb;--i:#111214;--m:#848488;--a:#2c7cf6;
  --me-ink:#ffffff;--you-ink:#111214;--radius:18px;--gap:7px}
.chat[data-style="bl"] .chat-top{background:rgba(249,249,249,.94)}
.chat[data-style="bl"] .chat-bar{background:#f9f9f9}
.chat[data-style="bl"] .chat-bar span{background:#fff;border:1px solid #d8d8dc;height:32px;border-radius:16px}
.chat[data-style="bl"][data-mode="duo"] .ava{display:none}
.chat[data-style="bl"][data-mode="duo"] .col{max-width:76%}
.chat[data-style="bl"] .bub:not(.img):not(.card)::after{content:"";position:absolute;bottom:0;width:13px;height:17px}
.chat[data-style="bl"] .msg.you .bub:not(.img):not(.card){border-bottom-left-radius:6px}
.chat[data-style="bl"] .msg.you .bub:not(.img):not(.card)::after{left:-7px;border-bottom-left-radius:11px;
  background:radial-gradient(circle 13px at 13px 0,transparent 13px,var(--you) 13px)}
.chat[data-style="bl"] .msg.me .bub:not(.img):not(.card){border-bottom-right-radius:6px}
.chat[data-style="bl"] .msg.me .bub:not(.img):not(.card)::after{right:-7px;border-bottom-right-radius:11px;
  background:radial-gradient(circle 13px at 0 0,transparent 13px,var(--me) 13px)}
.chat[data-style="bl"] .sys{background:transparent}
.chat[data-style="bl"] .card-main b{font-size:17px}

/* ---- 04 复古系：方角窗口，昵称在气泡外单独一行 ---- */
.chat[data-style="rt"]{--s:#e8eef5;--me:#ffffff;--you:#ffffff;--i:#1d2733;--m:#738193;--a:#1f5fa8;
  --me-ink:#1d2733;--you-ink:#1d2733;--radius:0;--gap:11px}
.chat[data-style="rt"] .chat-top{background:linear-gradient(#4a7fbd,#2f5f96);color:#fff;border-bottom:1px solid #24486f}
.chat[data-style="rt"] .chat-bar{background:#dde6f0;border-top:1px solid #b6c6d8}
.chat[data-style="rt"] .chat-bar span{background:#fff;border:1px solid #a8bacd;border-radius:0}
.chat[data-style="rt"] .ava{border-radius:0;border:1px solid #7f95ad;width:32px;height:32px;font-size:13px}
.chat[data-style="rt"] .name{display:block;font-size:11px;color:var(--a);font-weight:600}
.chat[data-style="rt"] .msg.me .name{text-align:right}
.chat[data-style="rt"] .bub{border:1px solid #b3c3d4;box-shadow:1px 1px 0 rgba(31,95,168,.12)}
.chat[data-style="rt"] .msg + .msg::before{content:"";position:absolute;left:12px;right:12px;height:1px;
  margin-top:-6px;background:repeating-linear-gradient(90deg,#c3d0de 0 3px,transparent 3px 6px)}
.chat[data-style="rt"] .msg{position:relative}
.chat[data-style="rt"] .sys{background:#dbe5f0;border:1px solid #c0cedd;border-radius:0}
.chat[data-style="rt"] .rr{font-family:var(--chat-mono);font-size:9.5px}

/* ---- 群聊：非我方显示昵称与头衔，@提及高亮 ---- */
.chat[data-mode="group"] .name{display:block}
.chat[data-mode="group"] .msg.me .name{display:none}
.title{margin-left:5px;padding:0 4px;border-radius:2px;font-size:9.5px;
  background:color-mix(in srgb,var(--a) 18%,transparent);color:color-mix(in srgb,var(--a) 58%,var(--i))}
.at{color:var(--a);font-weight:500}
.chat[data-style="dc"] .msg.me .name{display:block}


/* ================= 固定一屏与分页 =================
   导出画布固定 390×844：状态栏 20 + 顶栏 44 + 会话区 724 + 输入栏 56。
   内容短了留空，长了按「切在消息之间」分页，每页都是完整的一屏。 */
.chat{height:844px}
.chat .chat-body{flex:1;min-height:0;overflow:hidden}
.chat[data-fill="bottom"] .chat-body{justify-content:flex-end}
/* 第 N 页把内容整体上移一个页高，切点落在消息之间 */
.chat .chat-body > *:first-child{margin-top:var(--page-shift,0px)}

/* ================= 列表页 ================= */
.list-body{flex:1;display:flex;flex-direction:column;background:var(--you)}
.search{margin:9px 12px;height:30px;border-radius:5px;background:color-mix(in srgb,var(--i) 7%,var(--you));
  display:grid;place-items:center;font-size:12px;color:color-mix(in srgb,var(--m) 74%,var(--i))}
.row{display:flex;align-items:center;gap:11px;padding:10px 12px;position:relative}
.row + .row::before{content:"";position:absolute;left:59px;right:0;top:0;height:1px;
  background:color-mix(in srgb,var(--i) 9%,transparent)}
.row .ava{width:42px;height:42px;font-size:15px}
.row .mid{flex:1;min-width:0}
.row .mid b{display:block;font-size:14.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .mid small{display:block;margin-top:2px;font-size:12px;color:var(--m);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .right{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.row .right em{font-style:normal;font-size:10.5px;color:var(--m);font-family:var(--chat-mono)}
.badge{min-width:17px;height:17px;padding:0 5px;border-radius:9px;display:grid;place-items:center;
  background:#e04a3f;color:#fff;font-size:10.5px;font-weight:600;font-family:var(--chat-lat)}
.badge.dot{min-width:9px;width:9px;height:9px;padding:0}
.mute{width:13px;height:13px;opacity:.42;
  background:linear-gradient(currentColor,currentColor) center/13px 1.5px no-repeat;transform:rotate(-45deg)}
.tabs{flex:none;display:grid;grid-template-columns:repeat(4,1fr);padding:7px 0 10px;
  background:var(--s);border-top:1px solid color-mix(in srgb,var(--i) 10%,transparent)}
.tabs span{display:grid;justify-items:center;gap:3px;font-size:10px;color:var(--m)}
.tabs span i{width:19px;height:19px;border:1.5px solid currentColor;border-radius:4px}
.tabs span.on{color:var(--a)}

/* ================= 账户页 ================= */
.acc-cover{position:relative;height:96px;overflow:hidden;background:linear-gradient(135deg,var(--a),color-mix(in srgb,var(--a) 45%,#000))}
.acc-cover img{width:100%;height:100%;display:block;object-fit:cover}
.acc-cover::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--cover-dim,0);pointer-events:none}
.acc-head{display:flex;gap:12px;padding:0 14px;margin-top:-26px}
.acc-head .ava{width:62px;height:62px;font-size:24px;border:3px solid var(--you);border-radius:var(--radius)}
.acc-head .who{padding-top:30px;min-width:0}
.acc-head .who b{display:block;font-size:17px;font-weight:600}
.acc-head .who small{display:block;margin-top:3px;font-size:11.5px;color:var(--m);font-family:var(--chat-mono)}
.acc-sign{margin:12px 14px 0;font-size:12.5px;color:var(--m);line-height:1.6}
.acc-rows{margin-top:14px;background:var(--you)}
.acc-rows .row{padding:12px 14px}
.acc-rows .row b{font-size:14px;font-weight:400}
.acc-rows .row .val{margin-left:auto;font-size:13px;color:var(--m)}
.acc-rows .row .arrow{width:8px;height:8px;border-top:1.4px solid var(--m);border-right:1.4px solid var(--m);transform:rotate(45deg)}
.acc-actions{display:flex;gap:10px;padding:16px 14px}
.acc-actions b{flex:1;padding:9px 0;border-radius:5px;text-align:center;font-size:13.5px;font-weight:500;
  background:var(--a);color:#fff}
.acc-actions b.ghost{background:transparent;border:1px solid color-mix(in srgb,var(--i) 18%,transparent);color:var(--i)}


/* ================= 角色卡 / 消息 / 列表 三张编辑清单 ================= */
.cast-list,.msg-list,.list-rows,.sticker-list { display: grid; gap: 6px; }
.cast-row,.msg-row,.list-row,.sticker-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px;
  padding: 7px 9px; border: 1px solid var(--ui-line); border-radius: 5px; background: #fff; cursor: pointer; text-align: left; }
.message-sort-note { margin: 0 0 8px; }
.message-add-bottom { width: 100%; min-height: 38px; margin-top: 9px; border-style: dashed; color: var(--ui-accent-dark); }
.message-add-bottom:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.msg-row { position: relative; grid-template-columns: 27px auto minmax(0,1fr) auto; transition: border-color .14s ease, box-shadow .14s ease, opacity .14s ease, transform .14s ease; }
.msg-drag-handle { width: 27px; height: 31px; padding: 0; display: grid; place-items: center; border: 1px solid var(--ui-line);
  border-radius: 5px; background: #fff; color: var(--ui-muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.msg-drag-handle::before { content: ""; width: 12px; height: 18px; opacity: .8;
  background: radial-gradient(circle, currentColor 1.35px, transparent 1.6px) 0 0 / 6px 6px; }
.msg-drag-handle:hover,.msg-drag-handle:focus-visible { border-color: var(--ui-accent); color: var(--ui-accent-dark); outline: none; }
.msg-drag-handle:active { cursor: grabbing; }
.msg-row.is-dragging { opacity: .46; transform: scale(.985); }
.msg-row.is-drop-before { box-shadow: inset 0 3px 0 var(--ui-accent); }
.msg-row.is-drop-after { box-shadow: inset 0 -3px 0 var(--ui-accent); }
body.is-message-sorting { user-select: none; -webkit-user-select: none; }
.cast-row.active,.msg-row.active,.list-row.active,.sticker-row.active { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.cast-row b,.msg-row b,.list-row b,.sticker-row b { display: block; overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cast-row small,.msg-row small,.list-row small,.sticker-row small { display: block; margin-top: 2px; color: var(--ui-muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-ava { width: 28px; height: 28px; flex: none; border-radius: 6px; display: grid; place-items: center; overflow: hidden;
  background: var(--ui-accent); color: #fff; font-size: 12px; font-weight: 700; }
.mini-ava img { width: 100%; height: 100%; object-fit: cover; }
.row-actions { display: flex; gap: 4px; }
.row-actions button { min-height: 26px; padding: 0 8px; display: grid; place-items: center; border: 1px solid var(--ui-line);
  border-radius: 5px; background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--ui-muted); }
.row-actions button:hover { border-color: var(--ui-accent); color: var(--ui-text); }
.row-actions button.on { border-color: var(--ui-accent); background: var(--ui-accent-soft); color: var(--ui-accent-dark); }
.cast-row[role="button"] { cursor: pointer; }
.msg-kind { flex: none; min-width: 34px; padding: 2px 5px; border-radius: 3px; background: var(--ui-accent-soft);
  color: var(--ui-accent-dark); font-size: 9.5px; font-weight: 800; text-align: center; }
.msg-row[data-side="me"] .msg-kind { background: #ece6f2; color: #5a4a72; }
.editor-block { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ui-line); }

/* ================= 贴纸 ================= */
.sticker-layer { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.canvas-sticker { position: absolute; left: var(--x); top: var(--y); width: var(--w); min-height: var(--h);
  transform: translate(-50%,-50%) rotate(var(--r)); display: grid; pointer-events: auto; cursor: grab; touch-action: none; }
.canvas-sticker.is-locked { cursor: default; }
.canvas-sticker.is-hidden { display: none; }
.canvas-sticker.is-selected { outline: 1.5px dashed var(--ui-accent); outline-offset: 2px; }
.sticker-body { width: 100%; min-height: 100%; display: flex; align-items: center; overflow: hidden; box-sizing: border-box; word-break: break-word; }
.sticker-body img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sticker-body.fit-cover img { object-fit: cover; }
.sticker-body.fit-stretch img { object-fit: fill; }
.sticker-font-sans { font-family: var(--chat-cjk); }
.sticker-font-serif { font-family: "OC Noto Serif SC","Songti SC",serif; }
.sticker-font-mono { font-family: var(--chat-mono); }
.sticker-handle { position: absolute; width: 14px; height: 14px; border: 2px solid var(--ui-accent); border-radius: 50%;
  background: #fff; opacity: 0; pointer-events: none; touch-action: none; }
.canvas-sticker.is-selected .sticker-handle { opacity: 1; pointer-events: auto; }
.canvas-sticker.is-locked .sticker-handle { display: none; }
.resize-handle { right: -9px; bottom: -9px; cursor: nwse-resize; }
.rotate-handle { left: 50%; top: -24px; margin-left: -7px; cursor: grab; }
.rotate-handle::after { content: ""; position: absolute; left: 5px; top: 12px; width: 2px; height: 12px; background: var(--ui-accent); }
.chat.is-exporting .canvas-sticker { outline: 0 !important; }
.chat.is-exporting .sticker-handle { display: none !important; }
.preset-sticker-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 10px; }
.preset-sticker-grid button { min-height: 32px; padding: 0 6px; border: 1px solid var(--ui-line); border-radius: 5px;
  background: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }
.preset-sticker-grid button:hover { border-color: var(--ui-accent); }
.sticker-editor-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; margin-top: 10px; }

/* ================= 裁切弹窗 ================= */
.crop-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; }
.crop-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(26,32,28,.72); backdrop-filter: blur(4px); cursor: default; }
.crop-dialog { position: relative; width: min(720px,100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 18px; border-radius: 14px; background: var(--ui-card); box-shadow: 0 24px 90px rgba(0,0,0,.4); }
.crop-dialog header,.crop-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crop-dialog header small { color: var(--ui-accent); font: 800 9px/1 var(--font-mono); letter-spacing: .12em; }
.crop-dialog h2 { margin: 4px 0 0; font-family: var(--font-serif); font-size: 18px; }
.crop-dialog > p { margin: 10px 0 14px; color: var(--ui-muted); font-size: 12px; line-height: 1.6; }
.crop-stage { position: relative; display: grid; place-items: center; min-height: 180px; overflow: hidden; border: 1px solid var(--ui-line-strong); border-radius: 10px; background: #22262a; }
.crop-stage canvas { display: block; width: 100%; max-height: min(56dvh,560px); object-fit: contain; cursor: grab; touch-action: none; }
.crop-stage canvas:active { cursor: grabbing; }
.crop-stage > span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 5px 8px; border-radius: 999px; background: rgba(20,24,21,.72); color: #fff; font-size: 10px; pointer-events: none; }
.crop-zoom { display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 12px; margin: 14px 0; font-size: 11px; font-weight: 750; }
.crop-zoom output { display: block; margin-top: 4px; color: var(--ui-accent); font: 800 10px/1 var(--font-mono); }
.crop-zoom input { width: 100%; accent-color: var(--ui-accent); }
.crop-dialog footer { justify-content: flex-end; }
body.crop-modal-open { overflow: hidden; }

.mobile-resizer,.mobile-main-tabs { display: none; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 140; max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: 6px; background: var(--ui-accent-dark); color: #fff; font-size: 13px; opacity: 0; pointer-events: none; transform: translate(-50%,16px); transition: .16s ease; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width:900px) {
  :root { --topbar-height:62px; }
  .topbar { gap:8px; padding:0 10px; }
  .brand { min-width:44px; }
  .brand-copy,.project-field,.desktop-action { display:none; }
  .brand-mark { width:40px; height:40px; }
  .top-actions { width:calc(100% - 50px); justify-content:flex-end; gap:6px; }
  .top-actions .button { min-height:40px; padding:0 12px; }
  .workspace { --mobile-preview-height:46%; height:auto; min-height:0; grid-template-columns:1fr; grid-template-rows:var(--mobile-preview-height) 20px 48px minmax(0,1fr); grid-template-areas:"preview" "resizer" "tabs" "panel"; }
  .preview-panel { grid-area:preview; grid-template-rows:42px minmax(0,1fr); border-bottom:0; }
  .preview-toolbar { padding:0 8px; }
  .preview-actions button { padding:0 7px; }
  .preview-viewport { overflow:auto; }
  .preview-stage { margin:0 auto; }
  .mobile-resizer { grid-area:resizer; display:grid; place-items:center; border-top:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line); background:#eff1ef; cursor:row-resize; touch-action:none; user-select:none; z-index:12; }
  .mobile-resizer span { width:112px; height:5px; border-radius:4px; background:var(--ui-line-strong); pointer-events:none; }
  .mobile-main-tabs { grid-area:tabs; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--ui-line); border-bottom:1px solid var(--ui-line); background:#f6f7f6; z-index:14; }
  .mobile-main-tabs button { border:0; border-right:1px solid var(--ui-line); background:transparent; font-size:13px; font-weight:850; }
  .mobile-main-tabs button:last-child { border-right:0; }
  .mobile-main-tabs button.active { background:var(--ui-accent-soft); box-shadow:inset 0 -3px var(--ui-accent); }
  .editor-panel { grid-area:panel; min-height:0; border:0; display:grid; grid-template-rows:minmax(0,1fr); }
  .panel-heading { display:none; }
  .panel-scroll { padding:12px 10px calc(20px + env(safe-area-inset-bottom)); scrollbar-gutter:auto; }
  body[data-active-mobile-panel="content"] .style-panel,body[data-active-mobile-panel="style"] .content-panel { display:none; }
  .editor-card { padding:13px; }
  .field input,.field select,.field textarea { min-height:42px; }
  .toast { bottom:calc(20px + env(safe-area-inset-bottom)); }
}
@media (max-width:600px) {
  .crop-dialog { padding:14px; }
  .crop-stage canvas { max-height:50dvh; }
  .crop-zoom { grid-template-columns:1fr; gap:6px; }
}
@media (max-width:520px) {
  .top-actions .button { padding-inline:9px; font-size:12px; }
  .field-grid,.style-grid,.check-row,.export-grid { grid-template-columns:1fr; }
  .color-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01s !important; animation-duration:.01s !important; scroll-behavior:auto !important; } }

/* 分页要先量真实高度：测量时把会话区放开成自动高度，量完立刻收回。
   （列 flex 项的 min-height:auto 本来就不让它们压缩，但测量态放开更稳妥。） */
.chat-body.is-measuring { flex: none; height: auto; min-height: 0; overflow: visible; }
.chat[data-view="list"] .chat-body,.chat[data-view="profile"] .chat-body { display: none; }
.chat .list-body { overflow: hidden; }

/* 聊天背景只铺消息区：上到顶栏下沿，下到输入栏上沿；状态栏与输入栏保持自己的底色 */
.chat-bg { position: absolute; left: 0; right: 0; top: 64px; bottom: 56px; overflow: hidden; z-index: 0; pointer-events: none; }
.chat[data-status="off"] .chat-bg { top: 44px; }
.chat-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-bg::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--bg-dim,0); }
.chat-body { position: relative; z-index: 1; }