/* ============================================================
   css/chat/chat-game-inspiro.css — 灵感画笺 (InspiroBloom)
   原创：花瓣绽放翻牌（非转轮/老虎机）。手绘花笺 · 暖米纸底 · 干玫瑰 · 薄金细线
   全部颜色跟随主题变量（--rose / --gold / --lavender / --sage / 深色模式自动切换）
   竖屏适配 370 / 400+，无 emoji、无系统默认框。
   ============================================================ */

.ibl-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 14px 22px;
  gap: 12px;
  position: relative;
  z-index: 1;
  background:
    radial-gradient(130% 60% at 50% 0%, var(--rose-light, rgba(201,168,168,0.12)), transparent 55%),
    radial-gradient(120% 100% at 50% 100%, var(--lavender-light, rgba(184,168,196,0.08)), transparent 50%),
    linear-gradient(180deg, var(--bg-primary), var(--bg-chat));
  font-family: var(--font-reading);
  color: var(--text-primary);
}

/* ===== 顶栏 ===== */
.ibl-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 2px 0;
  /* ★ iOS 刘海（2028 甲方实锤：顶栏被 iOS 状态栏盖住、右上角「我的花匣」点不到，安卓正常
     ——安卓 env()=0 所以看不出问题）：全屏游戏层里最顶的元素必须自己让出安全区。
     见长期规则 #65 / KSTAR-案例库「iOS 顶部安全区」。 */
  padding-top: calc(2px + env(safe-area-inset-top, 0px));
}
.ibl-back, .ibl-icon-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--surface);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.ibl-back svg, .ibl-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ibl-back:hover, .ibl-icon-btn:hover { color: var(--rose); border-color: var(--rose); background: var(--rose-light, rgba(201,168,168,0.12)); transform: scale(1.06); }
.ibl-back:active, .ibl-icon-btn:active { transform: scale(0.94); }
.ibl-title-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ibl-title {
  font-family: var(--font-reading);
  font-size: 17px; font-weight: 600;
  letter-spacing: 4px;
  color: var(--text-primary);
  line-height: 1.15;
}
.ibl-subtitle {
  font-family: var(--font-decorative);
  font-size: 10px;
  font-style: italic;
  letter-spacing: 2px;
  color: var(--gold, #C4A86A);
  opacity: 0.75;
}

.ibl-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  margin: 0;
  line-height: 1.6;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--surface-solid, var(--surface, #fff));
  border: 1px solid var(--gold-light, rgba(196,168,106,0.3));
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, var(--shadow-xs, 0 1px 2px rgba(30,28,26,0.04));
}

/* ===== 类别 chips（薄金描边 + 干玫瑰） ===== */
.ibl-cats { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.ibl-cat-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--gold-light, rgba(196,168,106,0.3));
  background: color-mix(in srgb, var(--surface, #fff) 82%, transparent);
  cursor: pointer;
  font-family: var(--font-reading);
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(30,28,26,0.04));
}
.ibl-cat-chip:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-light, rgba(201,168,168,0.12)); transform: translateY(-1px); }
.ibl-cat-chip.on {
  border-color: var(--rose);
  background: linear-gradient(165deg, var(--rose, #C9A8A8), var(--rose-dark, #A88080));
  color: #fff;
  box-shadow: var(--shadow-sm), var(--shadow-glow, 0 0 24px rgba(200,160,160,0.25));
}
.ibl-cat-chip:active { transform: scale(0.95); }
.ibl-empty-cats {
  text-align: center;
  padding: 34px 20px;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 1.5px;
}

/* ===== 花笺花瓣（手绘花瓣卡） ===== */
.ibl-bunch {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 4px 0;
}
.ibl-petal {
  perspective: 900px;
  cursor: default;
  flex-shrink: 0;
}
.ibl-petal-inner {
  position: relative;
  width: 100%;
  height: 60px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ibl-petal.open .ibl-petal-inner { transform: rotateY(180deg); }
.ibl-petal-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 18px;
}
/* 正面：暖纸 + 薄金细线 + 柔影，像未绽放的花瓣 */
.ibl-petal-front {
  background: linear-gradient(160deg, var(--surface-solid, #fff), color-mix(in srgb, var(--bg-chat) 86%, var(--gold-light, rgba(196,168,106,0.15))));
  border: 1px solid var(--gold-light, rgba(196,168,106,0.3));
  box-shadow: var(--shadow-xs), var(--shadow-sm);
}
.ibl-petal-glyph {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--rose, #C9A8A8);
  opacity: 0.85;
}
.ibl-petal-glyph svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ibl-petal-cat { font-size: 13px; letter-spacing: 2.5px; color: var(--text-secondary); }
/* 背面：绽放出的词，干玫瑰渐变底 */
.ibl-petal-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--rose-light, rgba(201,168,168,0.18)), color-mix(in srgb, var(--rose-light, rgba(201,168,168,0.18)) 60%, var(--surface, #fff)));
  border: 1px solid color-mix(in srgb, var(--rose, #C9A8A8) 45%, transparent);
  box-shadow: var(--shadow-sm), var(--shadow-glow, 0 0 24px rgba(200,160,160,0.16));
}
.ibl-petal-word {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--rose-dark, #A88080);
  font-family: var(--font-reading);
}

/* ===== 组合花笺 note（整块包进一张卡片，不再散落） ===== */
.ibl-note {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-solid, var(--surface, #fff));
  border: 1px solid var(--gold-light, rgba(196,168,106,0.3));
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, var(--shadow-xs, 0 1px 2px rgba(30,28,26,0.04));
  min-height: 30px;
}
.ibl-note-label { font-family: var(--font-decorative); font-size: 10px; font-style: italic; color: var(--text-muted); letter-spacing: 1px; opacity: 0.65; }
.ibl-note-words { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ibl-note-words::-webkit-scrollbar { display: none; }
.ibl-note-word { display: inline-block; flex-shrink: 0; white-space: nowrap; padding: 3px 12px; border-radius: 16px; border: 1px solid var(--gold-light, rgba(196,168,106,0.3)); background: color-mix(in srgb, var(--surface, #fff) 88%, transparent); font-size: 13px; color: var(--text-primary); box-shadow: var(--shadow-xs, 0 1px 2px rgba(30,28,26,0.04)); }
.ibl-note-dot { color: var(--gold, #C4A86A); opacity: 0.55; font-size: 12px; flex-shrink: 0; }

/* ===== 控制 ===== */
.ibl-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 6px 0 4px;
  flex-shrink: 0;
}
/* 花朵造型大按钮：外层圆环 + 内层渐变，仿一朵绽放的花 */
.ibl-pick-btn {
  width: 122px; height: 122px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-family: var(--font-reading);
  font-size: 17px; font-weight: 600;
  letter-spacing: 4px;
  color: #fff;
  background: radial-gradient(circle at 32% 26%, var(--rose-hover, #BA9696), var(--rose, #C9A8A8) 55%, var(--rose-dark, #A88080));
  box-shadow: var(--shadow-sm), var(--shadow-md), var(--shadow-glow, 0 0 24px rgba(200,160,160,0.28));
  position: relative;
  text-indent: 4px;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s ease;
}
/* 花瓣形外圈：8 片柔光瓣 */
.ibl-pick-btn::before {
  content: '';
  position: absolute; inset: -9px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 40deg, color-mix(in srgb, var(--rose, #C9A8A8) 40%, transparent) 0 45deg, transparent 0 85deg, color-mix(in srgb, var(--rose, #C9A8A8) 40%, transparent) 0 90deg, transparent 0 130deg, color-mix(in srgb, var(--rose, #C9A8A8) 40%, transparent) 0 135deg, transparent 0 175deg, color-mix(in srgb, var(--rose, #C9A8A8) 40%, transparent) 0 180deg, transparent 0 220deg, color-mix(in srgb, var(--rose, #C9A8A8) 40%, transparent) 0 225deg, transparent 0 265deg, color-mix(in srgb, var(--rose, #C9A8A8) 40%, transparent) 0 270deg, transparent 0 310deg, color-mix(in srgb, var(--rose, #C9A8A8) 40%, transparent) 0 315deg, transparent 0 355deg, color-mix(in srgb, var(--rose, #C9A8A8) 40%, transparent) 0 360deg);
  -webkit-mask: radial-gradient(circle, transparent 78%, #000 79%);
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.ibl-pick-btn::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold, #C4A86A) 40%, transparent);
  pointer-events: none;
}
.ibl-pick-btn:hover { transform: scale(1.06); box-shadow: var(--shadow-sm), var(--shadow-md), 0 6px 26px rgba(200,160,160,0.4); }
.ibl-pick-btn:active { transform: scale(0.94); }
.ibl-pick-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; filter: saturate(0.5); }
.ibl-sub { display: flex; align-items: center; gap: 10px; }
.ibl-ai-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 18px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent, #C9B0A8) 55%, transparent);
  background: transparent; cursor: pointer;
  font-family: var(--font-reading);
  font-size: 13px; font-weight: 500; letter-spacing: 1px;
  color: var(--accent, #C9B0A8);
  transition: all 0.2s ease;
}
.ibl-ai-btn svg { stroke: var(--accent, #C9B0A8); width: 13px; height: 13px; fill: none; stroke-width: 1.5; stroke-linecap: round; }
.ibl-ai-btn:hover { background: var(--accent-rose-light, rgba(201,168,168,0.1)); border-color: var(--accent, #C9B0A8); transform: translateY(-1px); }
.ibl-ai-btn:active { transform: scale(0.96); }
.ibl-ai-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ===== 结果花笺弹层（信纸卡） ===== */
.ibl-result {
  position: absolute; inset: 0; z-index: 100;
  /* ★ 滚动容器(.ibl-root overflow-y:auto)内禁用 backdrop-filter：合成层重栅格触发整层重绘闪没一瞬（案例库血泪）。改用略深不透明底。 */
  background: rgba(30,25,20,0.46);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.ibl-result.show { opacity: 1; pointer-events: auto; }
.ibl-result-card {
  background: linear-gradient(175deg, var(--surface-solid, #fff), var(--bg-chat, #FCFAF6) 40%, var(--bg-primary, #F8F4EF));
  border-radius: 18px;
  border: 1.5px solid var(--gold-light, rgba(196,168,106,0.3));
  box-shadow: var(--shadow-xs), var(--shadow-sm), var(--shadow-md), 0 0 44px rgba(200,160,160,0.14);
  padding: 26px 22px; max-width: 300px; width: 86%;
  text-align: center; position: relative;
}
.ibl-result-card::before {
  content: ''; position: absolute; inset: 6px; border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--gold, #C4A86A) 22%, transparent);
  pointer-events: none;
}
.ibl-result-head { margin-bottom: 16px; position: relative; }
.ibl-result-title { display: block; font-family: var(--font-reading); font-size: 15px; font-weight: 600; letter-spacing: 3px; color: var(--text-primary); }
.ibl-result-en { display: block; font-family: var(--font-decorative); font-size: 13px; font-style: italic; color: var(--gold, #C4A86A); opacity: 0.75; margin-top: 3px; }
.ibl-result-words { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 18px; }
.ibl-result-word {
  display: inline-block; padding: 6px 15px;
  border: 1px solid color-mix(in srgb, var(--rose, #C9A8A8) 45%, transparent);
  border-radius: 20px; font-size: 14px;
  color: var(--rose-dark, #A88080); background: var(--rose-light, rgba(201,168,168,0.12));
  font-family: var(--font-reading); letter-spacing: 0.5px;
  transition: transform 0.2s ease;
}
.ibl-result-word:hover { transform: translateY(-1px); }
.ibl-result-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ibl-again {
  padding: 8px 20px; border-radius: 20px; border: none;
  background: linear-gradient(165deg, var(--rose, #C9A8A8), var(--rose-dark, #A88080));
  color: #fff; cursor: pointer; font-family: var(--font-reading); font-size: 13px; font-weight: 500;
  transition: all 0.2s ease; box-shadow: var(--shadow-sm);
}
.ibl-again:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm), var(--shadow-glow, 0 0 24px rgba(200,160,160,0.25)); }
.ibl-again:active { transform: scale(0.96); }
.ibl-save, .ibl-close {
  padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border);
  background: transparent; cursor: pointer; font-family: var(--font-reading); font-size: 13px;
  color: var(--text-secondary); display: inline-flex; align-items: center; gap: 4px; transition: all 0.2s ease;
}
.ibl-save svg { stroke: currentColor; fill: none; stroke-width: 1.5; }
.ibl-save:hover { border-color: var(--gold); color: var(--gold-dark, #A89050); background: var(--gold-light, rgba(196,168,106,0.12)); }
.ibl-close:hover { color: var(--text-secondary); border-color: var(--text-muted); }
.ibl-save:active, .ibl-close:active { transform: scale(0.96); }
/* 收进花匣反馈：按钮轻脉冲 + 文字变「已收进花匣✓」 */
.ibl-save.saved {
  border-color: var(--rose);
  color: var(--rose-dark, #A88080);
  background: var(--rose-light, rgba(201,168,168,0.12));
}
.ibl-save.ibl-pulse { animation: iblSaved 0.6s ease; }
@keyframes iblSaved {
  0% { transform: scale(1); }
  40% { transform: scale(1.1); box-shadow: var(--shadow-glow, 0 0 24px rgba(200,160,160,0.3)); }
  100% { transform: scale(1); }
}

/* ===== 花匣 Sheet（实底卡） ===== */
.ibl-sheet { position: absolute; inset: 0; z-index: 120; background: rgba(30,25,20,0.46); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; padding: calc(10px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; }
.ibl-sheet.open { opacity: 1; pointer-events: auto; }
.ibl-sheet-card {
  width: 86%; max-width: 320px;
  max-height: 72vh; overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(175deg, var(--surface-solid, #fff), var(--bg-chat, #FCFAF6) 50%, var(--bg-primary, #F8F4EF));
  border: 1.5px solid var(--gold-light, rgba(196,168,106,0.3));
  box-shadow: var(--shadow-sm), var(--shadow-md), 0 0 44px rgba(200,160,160,0.14);
  display: flex; flex-direction: column;
}
.ibl-sheet-head { display: flex; align-items: center; gap: 8px; padding: 15px 16px; border-bottom: 1px solid var(--border); }
.ibl-sheet-title { font-family: var(--font-reading); font-size: 15px; font-weight: 600; letter-spacing: 1.5px; color: var(--text-primary); }
.ibl-sheet-en { font-family: var(--font-decorative); font-size: 11px; font-style: italic; color: var(--text-muted); opacity: 0.65; flex: 1; }
.ibl-sheet-close { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: transparent; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: all 0.18s ease; }
.ibl-sheet-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.ibl-sheet-close:hover { color: var(--rose); border-color: var(--rose); background: var(--rose-light, rgba(201,168,168,0.12)); }
.ibl-sheet-body { padding: 14px 16px; max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ibl-sheet-empty { text-align: center; padding: 44px 20px; }
.ibl-sheet-empty-en { font-family: var(--font-decorative); font-size: 17px; font-style: italic; color: var(--text-muted); opacity: 0.55; }
.ibl-sheet-empty-zh { font-size: 12px; color: var(--text-muted); opacity: 0.45; margin-top: 5px; letter-spacing: 1px; }
.ibl-fav-item {
  display: flex; align-items: center; gap: 8px; padding: 11px 12px;
  border-radius: 14px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface, #fff) 88%, transparent);
  margin-bottom: 8px; box-shadow: var(--shadow-xs, 0 1px 2px rgba(30,28,26,0.04));
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ibl-fav-item:hover { box-shadow: var(--shadow-sm); }
.ibl-fav-words { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.ibl-fav-word { padding: 3px 10px; border-radius: 12px; background: var(--rose-light, rgba(201,168,168,0.12)); color: var(--rose, #C9A8A8); font-size: 11px; }
.ibl-fav-use, .ibl-fav-del {
  padding: 4px 11px; border-radius: 12px; border: 1px solid var(--border);
  background: transparent; cursor: pointer; font-size: 11px; font-family: inherit; transition: all 0.15s ease; flex-shrink: 0;
}
.ibl-fav-use { color: var(--rose, #C9A8A8); border-color: color-mix(in srgb, var(--rose, #C9A8A8) 40%, transparent); }
.ibl-fav-use:hover { background: var(--rose-light, rgba(201,168,168,0.12)); }
.ibl-fav-del { color: var(--text-muted); }
.ibl-fav-del:hover { color: var(--danger, #C4716B); border-color: var(--danger, #C4716B); }

/* ===== 中屏适配 (≤400px) ===== */
@media (max-width: 400px) {
  .ibl-root { padding: 8px 10px 18px; gap: 10px; }
  .ibl-title { font-size: 16px; letter-spacing: 2.5px; }
  .ibl-subtitle { font-size: 9px; }
  .ibl-back, .ibl-icon-btn { width: 31px; height: 31px; }
  .ibl-cat-chip { padding: 5px 11px; font-size: 11px; }
  .ibl-petal-inner { height: 55px; }
  .ibl-petal-word { font-size: 16px; }
  .ibl-pick-btn { width: 108px; height: 108px; font-size: 16px; letter-spacing: 3px; }
  .ibl-ai-btn { font-size: 12px; padding: 7px 14px; }
}

/* ===== 窄屏适配 (≤370px) ===== */
@media (max-width: 370px) {
  .ibl-root { padding: 6px 8px 16px; gap: 8px; }
  .ibl-title { font-size: 15px; letter-spacing: 2px; }
  .ibl-subtitle { font-size: 8px; }
  .ibl-hint { font-size: 11px; }
  .ibl-petal-inner { height: 51px; }
  .ibl-petal-cat { font-size: 12px; }
  .ibl-petal-word { font-size: 15px; letter-spacing: 1px; }
  .ibl-pick-btn { width: 96px; height: 96px; font-size: 15px; letter-spacing: 2px; }
  .ibl-result-card { padding: 20px 15px; }
  .ibl-result-word { font-size: 12px; padding: 4px 11px; }
  .ibl-fav-word { font-size: 10px; }
}