/* ============ Paperie 贺卡工坊 · Sketch 手绘风 ============
   DNA: 2px 暖墨描边 / 不规则圆角 / 偏移硬阴影 /
        微暖白素描纸底（手绘纸感，非冷灰白非鹅黄）/ Caveat 手写标题 /
        品红主 accent + 蜡笔绿/彩铅蓝/粉彩手绘多色（禁黄及黄相近色）
   ============================================================ */
:root {
  /* 纸面与层次 —— 深紫黑素描工作台（R-B=-6，H264 微紫倾向，区别 060 深炭黑） */
  --desk: #1A1620;          /* 深紫黑桌面底 */
  --desk-deep: #120F16;     /* 更深紫黑 */
  --sheet: #FBF7F2;         /* 贺卡浅色纸面（暖素描纸，独立于 UI，仅贺卡容器用） */
  --work: #221D2A;          /* 深紫灰工作面板（UI 卡片/工具栏/按钮背景） */
  --panel: #2A2433;         /* 更深一级面板（聊天侧栏等） */
  /* 墨色 —— 深底上用亮紫白/紫灰 */
  --ink: #EDEAF2;           /* 主文字（亮紫白） */
  --ink-2: #C4BECB;         /* 次级文字（亮紫灰，提亮保证深底可读） */
  --muted: #9A94A8;         /* 弱化文字（中紫灰，提亮保证深底可读） */
  /* 手绘线条 —— 深色面板上用深紫灰描边（不再用亮白，亮白描边刺眼廉价） */
  --line: #3A3444;          /* 主描边 2px（深紫灰） */
  --line-soft: #2E2936;     /* 辅助描边/分隔（更深紫灰） */
  /* accent —— 亮品红 fuchsia */
  --accent: #D926A9;
  --accent-deep: #E84FB8;   /* 提亮：深底上作文字/标签色要够亮 */
  --accent-soft: rgba(217, 38, 169, .28);
  --sage: #7CC46A;
  --crayon-green: #5FC98A;
  --crayon-blue: #6FA8E0;
  --blush: #E8A898;
  /* 不规则圆角（手绘感） */
  --radius: 12px 4px 12px 4px;
  --radius-sm: 8px 3px 8px 3px;
  --radius-lg: 14px 5px 14px 5px;
  --radius-pill: 999px 4px 999px 4px;
  /* 字体 */
  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-display: "Caveat", "Segoe Script", "Noto Serif SC", "Songti SC", cursive;
  --font-hand: "Caveat", "Segoe Script", "Noto Serif SC", "PingFang SC", cursive;
  /* 手绘偏移硬阴影（深紫黑硬阴影带） */
  --shadow-1: 3px 3px 0 #0E0B12;
  --shadow-2: 5px 5px 0 #080610;
  --shadow-ink: 3px 3px 0 #0A0810;
  /* 纸面噪点纹理 */
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.055'/></svg>");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--desk);
  background-image: repeating-linear-gradient(0deg, rgba(60, 54, 74, .07) 0 1px, transparent 1px 28px);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }
::selection { background: var(--accent); color: #FFFFFF; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-soft); border-radius: 5px; border: 2px solid var(--desk); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 顶栏 ---------- */
.topbar {
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: rgba(26, 22, 32, .92);
  border-bottom: 2px solid var(--line);
  position: relative; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; background: var(--work); border: 2px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-1); color: var(--ink); }
.brand-text h1 { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: .02em; line-height: 1.15; }
.brand-text h1 span { color: var(--accent); }
.brand-text p { font-size: 11.5px; color: var(--ink-2); letter-spacing: .06em; margin-top: 1px; }
.top-actions { display: flex; align-items: center; gap: 10px; }

.btn {
  border: 2px solid var(--line); background: var(--work); color: var(--ink);
  border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-1);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { transform: translate(-1px, -1px) rotate(-.3deg); box-shadow: 4px 4px 0 var(--line-soft); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line-soft); }
.btn.ghost { background: transparent; }
.btn.primary { background: var(--accent); border-color: var(--line); color: #FFFFFF; box-shadow: var(--shadow-ink); }
.btn.primary:hover { background: var(--accent-deep); }
.btn.small { padding: 6px 12px; font-size: 12.5px; }
.count-badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  background: var(--accent-soft); border: 2px dashed var(--accent); border-radius: 999px 4px 999px 4px;
  font-size: 11px; padding: 0 5px; margin-left: 2px; color: var(--accent-deep);
}

/* ---------- 主区域 ---------- */
.main { display: flex; height: calc(100vh - 64px); }
.stage-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(150, 120, 180, .16), transparent 60%),
    var(--desk);
}
.stage {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
  background-image: var(--noise);
  container-type: size;
}
/* 宽度同时受高度约束：卡片高 = 宽 × 1.4，减去 padding 与衬纸偏移余量，防止溢出盖住下方区域 */
.card-stack { position: relative; display: grid; place-items: center; width: min(480px, 80%, calc((100cqh - 28px) / 1.4)); }
.card-sheet {
  position: absolute; width: 100%; aspect-ratio: 600 / 840;
  border-radius: var(--radius); border: 2px solid var(--line-soft);
  background: var(--sheet);
}
.sheet-back { transform: rotate(-2.6deg) translate(-14px, 10px); background: var(--work); border-color: var(--line-soft); box-shadow: var(--shadow-1); }
.sheet-mid { transform: rotate(1.4deg) translate(12px, 6px); background: var(--work); border-color: var(--line-soft); box-shadow: var(--shadow-1); }
.card-zoom { position: relative; width: 100%; transition: transform .18s ease; transform-origin: center center; }
.card-holder {
  width: 100%;
  aspect-ratio: 600 / 840;
  border-radius: var(--radius); overflow: hidden;
  border: 2px solid var(--line);
  box-shadow: var(--shadow-2);
  background: var(--sheet);
  line-height: 0;
}
.card-holder svg { width: 100%; height: 100%; display: block; }
.card-holder svg .t-head, .card-holder svg .t-body { cursor: text; }
.card-holder svg .t-head:hover, .card-holder svg .t-body:hover { opacity: .82; }
.stage-tools {
  position: absolute; right: 18px; bottom: 16px;
  display: flex; align-items: center; gap: 8px;
  background: var(--work); border: 2px solid var(--line); border-radius: 999px 6px 999px 6px;
  padding: 5px 10px; box-shadow: var(--shadow-1);
  font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.tool-btn {
  width: 24px; height: 24px; border-radius: 50% 46% 50% 46%;
  border: 2px solid var(--line); background: var(--work);
  font-size: 14px; line-height: 1; color: var(--ink);
  display: grid; place-items: center;
}
.tool-btn:hover { background: var(--accent); color: #FFFFFF; border-color: var(--line); }

/* ---------- 工具栏 ---------- */
.toolbar {
  background: var(--work); border-top: 2px solid var(--line);
  padding: 10px 18px 12px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative; z-index: 5; /* 卡片溢出/放大时不被盖住 */
}
.tb-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.act-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--line); background: var(--work);
  border-radius: var(--radius-sm); padding: 6px 11px;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  box-shadow: 2px 2px 0 var(--line-soft);
  transition: all .12s ease;
}
.act-btn svg { width: 16px; height: 16px; }
.act-btn:hover { border-color: var(--accent); color: var(--accent); transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--line-soft); }
.act-btn:disabled { opacity: .38; pointer-events: none; }
.act-btn.primary { background: var(--accent); border-color: var(--line); color: #FFFFFF; box-shadow: var(--shadow-ink); }
.act-btn.primary:hover { background: var(--accent-deep); color: #FFFFFF; }
.tb-sep { width: 2px; height: 22px; background: var(--line-soft); margin: 0 5px; border-radius: 2px; }
.tb-groups { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; }
.tb-group label {
  display: block; font-size: 11px; font-weight: 700; color: var(--ink-2);
  letter-spacing: .12em; margin-bottom: 6px;
}
.swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.swatch {
  width: 34px; height: 34px; border-radius: 10px 4px 10px 4px;
  border: 2px solid transparent; outline: 2px solid var(--line-soft);
  position: relative; transition: all .12s ease; padding: 0;
}
.swatch:hover { transform: translateY(-2px) rotate(-2deg); box-shadow: var(--shadow-1); }
.swatch.active { border-color: var(--sheet); outline: 2px solid var(--accent); }
.swatch i { position: absolute; inset: 3px; border-radius: 8px 3px 8px 3px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; max-width: 560px; }
.chip {
  border: 2px solid var(--line); background: var(--work);
  border-radius: 999px 6px 999px 6px; padding: 5px 12px; font-size: 12px; font-weight: 600;
  color: var(--ink); transition: all .12s ease; white-space: nowrap;
}
.chip:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-1px) rotate(-.5deg); }
.chip.active { background: var(--accent); border-color: var(--line); color: #FFFFFF; box-shadow: 2px 2px 0 var(--line); }

/* ---------- 寄语编辑器 ---------- */
.editor {
  background: var(--work); border-top: 2px dashed var(--line-soft);
  padding: 0 18px;
  transition: padding .18s ease;
  position: relative; z-index: 5; /* 卡片溢出/放大时不被盖住 */
}
.editor-toggle {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; padding: 10px 0;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  letter-spacing: .08em;
}
.editor-toggle .chev { margin-left: auto; transition: transform .18s ease; }
.editor-toggle .editor-hint { font-weight: 500; color: var(--accent); letter-spacing: 0; font-family: var(--font-hand); font-size: 15px; }
.editor .editor-body { display: none; flex-direction: column; gap: 8px; padding-bottom: 14px; }
.editor.open .editor-body { display: flex; }
.editor.open .editor-toggle .chev { transform: rotate(180deg); }
.editor.collapsed { padding-bottom: 2px; }
#editor-headline, #editor-body {
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--work); padding: 9px 12px;
  font-size: 13.5px; color: var(--ink);
  outline: none; resize: vertical; width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
#editor-headline { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
#editor-body { font-family: var(--font-hand); font-size: 19px; line-height: 1.35; }
#editor-headline:focus, #editor-body:focus { border-color: var(--accent); box-shadow: 3px 3px 0 var(--accent-soft); }
.editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.editor-note { font-size: 11.5px; color: var(--muted); }

/* ---------- 对话面板 ---------- */
.chat-col {
  width: 360px; flex-shrink: 0;
  display: flex; flex-direction: column;
  background: var(--panel);
  border-left: 2px solid var(--line);
  position: relative; z-index: 20;
}
.chat-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--work);
  border-bottom: 2px solid var(--line);
  color: var(--ink);
}
.chat-avatar {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--work); border: 2px solid var(--line);
  display: grid; place-items: center; flex-shrink: 0;
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.chat-head-text h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.chat-head-text p { font-size: 11px; color: var(--ink-2); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.chat-head-text p::before { content: ""; width: 7px; height: 7px; border-radius: 50% 46% 50% 46%; background: var(--sage); display: inline-block; border: 1px solid var(--line); }
.icon-btn {
  margin-left: auto; width: 30px; height: 30px; border-radius: 8px 3px 8px 3px;
  border: 2px solid var(--line); background: var(--work);
  font-size: 16px; line-height: 1; color: var(--ink-2);
  display: none; place-items: center;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.chat-head .icon-btn { display: none; }
.chat-msgs {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex; flex-direction: column; gap: 12px;
}
.msg { max-width: 88%; animation: msgIn .22s ease both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg.user { align-self: flex-end; }
.msg.agent { align-self: flex-start; }
.bubble {
  padding: 10px 13px; font-size: 13px; line-height: 1.65;
  border-radius: var(--radius);
  white-space: pre-wrap; word-break: break-word;
}
.msg.user .bubble {
  background: var(--ink); color: var(--desk);
  border: 2px solid var(--line);
  border-bottom-right-radius: 4px;
}
.msg.agent .bubble {
  background: var(--work); color: var(--ink);
  border: 2px solid var(--line);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-1);
}
.msg .stamp { display: block; font-size: 10px; color: var(--muted); opacity: .85; margin-top: 5px; }
.msg.user .stamp { text-align: right; }
.typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing i { width: 6px; height: 6px; border-radius: 50% 46% 50% 46%; background: var(--ink-2); animation: blink 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.chat-chips {
  display: flex; gap: 7px; flex-wrap: wrap;
  padding: 8px 14px 4px;
}
.chat-chips .chip { background: transparent; border-style: dashed; }
.chat-chips .chip:hover { border-style: solid; }
.chat-input {
  display: flex; gap: 8px; padding: 10px 14px 14px;
  background: var(--panel);
  color: var(--ink);
}
#chat-text {
  flex: 1; min-width: 0;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  background: var(--work); padding: 10px 13px;
  font-size: 13px; outline: none; color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
#chat-text:focus { border-color: var(--accent); box-shadow: 3px 3px 0 var(--accent-soft); }
#chat-text:disabled { opacity: .55; }
.send-btn {
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex-shrink: 0;
  border: 2px solid var(--line); background: var(--accent); color: #FFFFFF;
  box-shadow: var(--shadow-ink);
  display: grid; place-items: center;
  transition: background .12s ease, transform .12s ease;
}
.send-btn:hover { background: var(--accent-deep); transform: translate(-1px, -1px); }
.send-btn:disabled { opacity: .45; pointer-events: none; }

/* ---------- 浮层 ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.overlay[hidden] { display: none; }
.overlay-mask { position: absolute; inset: 0; background: rgba(42, 38, 32, .42); backdrop-filter: blur(2px); animation: fadeIn .18s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.overlay-panel {
  position: relative; margin-left: auto; height: 100%;
  background: var(--work); border-left: 2px solid var(--line);
  width: min(760px, 94vw);
  display: flex; flex-direction: column;
  color: var(--ink);
  animation: slideIn .24s cubic-bezier(.2, .8, .25, 1);
  box-shadow: -20px 0 60px rgba(42, 38, 32, .25);
}
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }
.overlay-head { padding: 20px 24px 14px; border-bottom: 2px dashed var(--line-soft); }
.overlay-head h2 { font-family: var(--font-display); font-size: 26px; font-weight: 600; }
.overlay-head p { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.overlay-head .icon-btn { display: grid; position: absolute; top: 18px; right: 18px; }
.gallery-grid {
  flex: 1; overflow-y: auto; padding: 18px 24px 30px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px; align-content: start;
}
.g-item { position: relative; cursor: pointer; animation: msgIn .2s ease both; }
.g-thumb {
  aspect-ratio: 600 / 840; border-radius: var(--radius); overflow: hidden;
  border: 2px solid var(--line); background: var(--work);
  box-shadow: var(--shadow-1);
  transition: transform .15s ease, box-shadow .15s ease;
  line-height: 0;
  color: var(--ink);
}
.g-thumb svg { width: 100%; height: 100%; }
.g-item:hover .g-thumb { transform: translateY(-4px) rotate(-.8deg); box-shadow: var(--shadow-2); }
.g-meta { padding: 8px 2px 0; display: flex; flex-direction: column; gap: 2px; }
.g-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-time { font-size: 10.5px; color: var(--muted); }
.g-del {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50% 46% 50% 46%;
  border: 2px solid var(--line); background: var(--work);
  color: var(--ink-2); font-size: 14px; line-height: 1;
  opacity: 0; transition: opacity .15s ease;
}
.g-item:hover .g-del { opacity: 1; }
.g-del:hover { background: var(--accent); color: #FFFFFF; border-color: var(--line); }
.g-empty {
  grid-column: 1 / -1; text-align: center; padding: 70px 20px;
  color: var(--ink-2);
}
.g-empty .g-empty-art { font-size: 40px; margin-bottom: 12px; }
.g-empty p { font-size: 13px; line-height: 1.8; }

.help-panel { justify-content: flex-end; width: min(520px, 94vw); }
.help-list { flex: 1; overflow-y: auto; padding: 16px 24px 30px; display: flex; flex-direction: column; gap: 10px; }
.help-item {
  display: flex; gap: 12px; align-items: flex-start;
  border: 2px solid var(--line); border-radius: var(--radius);
  background: var(--work); padding: 12px 14px;
  cursor: pointer; text-align: left; width: 100%;
  color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: all .13s ease;
}
.help-item:hover { border-color: var(--accent); transform: translateX(3px) rotate(-.3deg); box-shadow: 4px 4px 0 var(--line-soft); }
.help-item .h-tag {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  background: var(--ink); color: var(--desk); border-radius: 6px 2px 6px 2px; padding: 3px 8px; margin-top: 1px;
}
.help-item .h-body { font-size: 13px; line-height: 1.6; }
.help-item .h-body b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.help-item .h-body code {
  font-family: var(--font-hand); font-size: 16px; color: var(--accent-deep);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 90;
  transform: translateX(-50%) translateY(16px);
  background: var(--ink); color: var(--desk);
  font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px 6px 999px 6px;
  border: 2px solid var(--line);
  box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 响应式 ---------- */
.only-mobile { display: none !important; }
@media (max-width: 1080px) {
  .chat-col {
    position: fixed; right: 0; top: 64px; bottom: 0; z-index: 50;
    width: min(380px, 92vw);
    transform: translateX(105%);
    transition: transform .26s cubic-bezier(.2, .8, .25, 1);
    box-shadow: -16px 0 44px rgba(42, 38, 32, .22);
  }
  .chat-col.open { transform: none; }
  .chat-head .icon-btn { display: grid; }
  .only-mobile { display: inline-grid !important; }
  #btn-chat-open { display: inline-flex !important; }
  .overlay-panel { width: 100%; }
  .card-stack { width: min(440px, 88%, calc((100cqh - 28px) / 1.4)); }
}
@media (max-width: 640px) {
  .topbar { padding: 0 12px; }
  .brand-text p { display: none; }
  .brand-text h1 { font-size: 21px; }
  .stage { padding: 16px 10px; }
  .card-stack { width: min(92%, calc((100cqh - 24px) / 1.4)); }
  .toolbar { padding: 8px 12px 10px; }
  .tb-groups { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}