/* 记忆酒馆 · 皮肤
 *
 * 每套皮肤只定义一组变量，界面本身不认识任何颜色。
 * 以后加新皮肤 = 在下面复制一段 [data-theme="xxx"] 改数值，别处不用动。
 *
 *   --bg / --bg-raise / --bg-soft   三层背景，从深到浅
 *   --line                          分隔线
 *   --ink / --ink-dim / --ink-faint 三级文字
 *   --gold / --gold-soft            强调色（标题、按钮、自己的气泡边框）
 *   --user                          自己气泡的底色
 *   --glow1 / --glow2               两团氛围光，决定「这间屋子什么光」
 */

/* ── 深夜酒馆（默认）：暖光、木头、旧黄铜 ── */
[data-theme="night"]{
  --bg:#14110f;
  --bg-raise:#1e1a16;
  --bg-soft:#262019;
  --line:#332b23;
  --ink:#ece4d6;
  --ink-dim:#9b8f7d;
  --ink-faint:#6b6052;
  --gold:#c9a227;
  --gold-soft:#e0bd52;
  --user:#3a3020;
  --glow1:rgba(201,162,39,.13);
  --glow2:rgba(120,74,34,.13);
  --avatar-tint:#6b5230;
}

/* ── 清晨：米白纸感，木桌，窗外的光 ── */
[data-theme="dawn"]{
  --bg:#f6f0e6;
  --bg-raise:#fffaf2;
  --bg-soft:#ece3d5;
  --line:#ddd0bd;
  --ink:#3a3226;
  --ink-dim:#6f6353;
  --ink-faint:#a1937f;
  --gold:#a9741f;
  --gold-soft:#8a5c14;
  --user:#e8dcc4;
  --glow1:rgba(255,214,140,.55);
  --glow2:rgba(180,150,110,.28);
  --avatar-tint:#c2a273;
}

/* ── 雨夜：灰蓝、湿冷、霓虹反光 ── */
[data-theme="rain"]{
  --bg:#101419;
  --bg-raise:#171d24;
  --bg-soft:#1f262f;
  --line:#2a333d;
  --ink:#dde6ee;
  --ink-dim:#8b9aa8;
  --ink-faint:#5c6b78;
  --gold:#5fa8c9;
  --gold-soft:#8ccbe4;
  --user:#22303c;
  --glow1:rgba(70,140,180,.16);
  --glow2:rgba(40,70,110,.22);
  --avatar-tint:#3c5566;
}

/* ── 樱：暗底托着旧粉，像夜里开的花 ── */
[data-theme="sakura"]{
  --bg:#1a1416;
  --bg-raise:#231a1d;
  --bg-soft:#2c2023;
  --line:#3a2a2e;
  --ink:#f0e2e4;
  --ink-dim:#b5989d;
  --ink-faint:#7d666b;
  --gold:#d47a8c;
  --gold-soft:#efa3b1;
  --user:#3a262b;
  --glow1:rgba(212,122,140,.16);
  --glow2:rgba(120,60,90,.20);
  --avatar-tint:#7a4b56;
}

/* ── 氛围层：两团光，决定屋子的温度 ── */
body::before{
  content:'';
  position:fixed;inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(120% 52% at 50% -12%, var(--glow1), transparent 62%),
    radial-gradient(95% 48% at 108% 106%, var(--glow2), transparent 60%);
  transition:background .45s ease;
}

/* 上面那层光不能挡住内容 */
body > *{position:relative;z-index:1}
body::before{z-index:0}

/* 浅色皮肤下，气泡和卡片的阴影要淡一些，否则脏 */
[data-theme="dawn"] .msg.assistant{box-shadow:0 1px 2px rgba(120,100,70,.10)}
[data-theme="dawn"] .msg.user{box-shadow:0 1px 2px rgba(120,100,70,.14)}

/* 皮肤选择器 */
.theme-row{
  display:flex;gap:9px;margin-top:9px;
}
.theme-dot{
  flex:1;min-width:0;height:52px;border-radius:11px;cursor:pointer;
  border:2px solid transparent;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:inherit;font-size:11px;letter-spacing:.05em;
  padding:0;
  -webkit-appearance:none;appearance:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  transition:transform .12s ease, border-color .18s ease;
}
.theme-dot:active{transform:scale(.97)}
.theme-dot span{position:relative;z-index:1;pointer-events:none}
/* 选中的那格：金边 + 外发光 + 一个勾，三重提示 */
.theme-dot.active{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold), 0 0 14px -2px var(--gold);
}
.theme-dot.active::after{
  content:'✓';
  position:absolute;top:2px;right:5px;
  font-size:10px;line-height:1;color:var(--gold);
}
.theme-dot[data-pick="night"]{background:linear-gradient(135deg,#1e1a16,#3a3020);color:#e0bd52}
.theme-dot[data-pick="dawn"]{background:linear-gradient(135deg,#fffaf2,#e8dcc4);color:#8a5c14}
.theme-dot[data-pick="rain"]{background:linear-gradient(135deg,#171d24,#22303c);color:#8ccbe4}
.theme-dot[data-pick="sakura"]{background:linear-gradient(135deg,#231a1d,#3a262b);color:#efa3b1}

/* 桌面端：设置面板别铺满整个屏幕 */
@media(min-width:720px){
  .editor{max-width:640px;left:50%;transform:translateX(-50%);border-left:1px solid var(--line);border-right:1px solid var(--line)}
}