:root[data-theme="peach-cream"] {
  --bg-app: #fcf9f9; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-hover: #fff3f5; --bg-input: #f8f1f3;
  --primary: #e27d95; --primary-hover: #d46a83; --primary-soft: rgba(226, 125, 149, 0.12);
  --border: rgba(180, 140, 150, 0.15); --text-title: #36292d; --text-body: #6e5c63; --text-muted: #a8949b;
  --accent-purple: #c084fc; --transfer-bg: #fff8f9; --transfer-border: #f3c2cf; --transfer-text: #b84a68;
}
:root[data-theme="sakura-mist"] {
  --bg-app: #fffafc; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-hover: #fff0f6; --bg-input: #fbf0f4;
  --primary: #f08cb4; --primary-hover: #e0749f; --primary-soft: rgba(240, 140, 180, 0.12);
  --border: rgba(230, 160, 190, 0.15); --text-title: #382530; --text-body: #735766; --text-muted: #af92a1;
  --accent-purple: #d8b4fe; --transfer-bg: #fff5f8; --transfer-border: #f8c9dc; --transfer-text: #c2527f;
}
:root[data-theme="mint-matcha"] {
  --bg-app: #f7faf8; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-hover: #eff7f2; --bg-input: #edf5f0;
  --primary: #63a886; --primary-hover: #509472; --primary-soft: rgba(99, 168, 134, 0.13);
  --border: rgba(120, 170, 145, 0.15); --text-title: #22332a; --text-body: #556b60; --text-muted: #8ea397;
  --accent-purple: #86efac; --transfer-bg: #f4faf6; --transfer-border: #bce0cc; --transfer-text: #3c7a5a;
}
:root[data-theme="pale-lavender"] {
  --bg-app: #faf8fd; --bg-sidebar: #ffffff; --bg-card: #ffffff; --bg-hover: #f3effa; --bg-input: #f2eef8;
  --primary: #a17fe0; --primary-hover: #8f69d4; --primary-soft: rgba(161, 127, 224, 0.13);
  --border: rgba(170, 150, 210, 0.15); --text-title: #2f253b; --text-body: #665779; --text-muted: #9e8fae;
  --accent-purple: #c084fc; --transfer-bg: #f8f5fc; --transfer-border: #dcd0f3; --transfer-text: #6b4aa8;
}
:root[data-theme="dark-rose"] {
  --bg-app: #121015; --bg-sidebar: #19151e; --bg-card: #221c29; --bg-hover: #2c2435; --bg-input: #1b1622;
  --primary: #e58b9e; --primary-hover: #f39cb0; --primary-soft: rgba(229, 139, 158, 0.15);
  --border: rgba(255, 255, 255, 0.08); --text-title: #f7eef3; --text-body: #c6b7c9; --text-muted: #796c7e;
  --accent-purple: #c084fc; --transfer-bg: #271e2c; --transfer-border: #4d3345; --transfer-text: #f095ac;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg-app); color: var(--text-body); height: 100dvh; overflow: hidden; font-size: 14.5px; transition: background 0.25s, color 0.25s; }
#app { height: 100%; width: 100vw; display: flex; position: relative; }

#toastBox { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.toast-item { background: var(--text-title); color: var(--bg-app); padding: 8px 16px; border-radius: 20px; font-size: 0.84rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); animation: toastAni 2.2s forwards; }
@keyframes toastAni { 0% { opacity: 0; transform: translateY(-8px); } 15% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-8px); } }

.sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 285px; max-width: 82vw; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 60; transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 6px 0 25px rgba(0, 0, 0, 0.08); }
.sidebar.open { transform: translateX(0); }
.sidebar-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(2px); z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.sidebar-mask.show { opacity: 1; pointer-events: auto; }
.sidebar-header { height: 54px; padding: 0 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.btn-sidebar-close { background: transparent; border: none; color: var(--text-muted); font-size: 1.2rem; cursor: pointer; }
.brand-title { font-weight: 700; color: var(--text-title); display: flex; align-items: center; gap: 8px; }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 14px; }
.nav-label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); padding: 4px 8px; text-transform: uppercase; letter-spacing: 0.5px; display: flex; justify-content: space-between; align-items: center; }
.nav-list { display: flex; flex-direction: column; gap: 3px; }
.nav-btn { padding: 9px 12px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; color: var(--text-body); cursor: pointer; font-size: 0.9rem; transition: all 0.15s; }
.nav-btn:hover { background: var(--bg-hover); color: var(--text-title); }
.nav-btn.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-btn-content { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.nav-btn-content span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-more-dots { background: transparent; border: none; color: var(--text-muted); padding: 2px 6px; font-size: 0.95rem; cursor: pointer; border-radius: 4px; }
.btn-more-dots:hover { color: var(--text-title); background: rgba(0, 0, 0, 0.05); }
.sidebar-footer { padding: 12px 14px; border-top: 1px solid var(--border); flex-shrink: 0; }

.main-viewport { flex: 1; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--bg-app); overflow: hidden; position: relative; }
.app-topbar { height: 52px; padding: 0 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: var(--bg-sidebar); flex-shrink: 0; gap: 8px; }
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.topbar-title { font-size: 0.92rem; font-weight: 700; color: var(--text-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.btn-icon { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-title); border-radius: 8px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; flex-shrink: 0; }
.hero-phone-btn { background: linear-gradient(135deg, var(--primary), #b265ff); color: #fff; border: none; border-radius: 18px; padding: 5px 12px; font-weight: 600; font-size: 0.8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 10px var(--primary-soft); }

.story-model-selector-wrap { display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border); border-radius: 14px; padding: 2px 8px; gap: 4px; }
.story-model-selector-wrap select { background: transparent; border: none; outline: none; font-size: 0.76rem; color: var(--text-title); max-width: 110px; cursor: pointer; padding: 2px 0; }

.content-area { flex: 1; overflow-y: auto; padding: 14px 14px 8px 14px; display: flex; flex-direction: column; }
.hide { display: none !important; }

.message-stream { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 12px; scroll-behavior: smooth; }
.group-msg-row { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; max-width: 88%; position: relative; }
.group-msg-row.heroine-row { align-self: flex-end; align-items: flex-end; }
.msg-header-row { display: flex; align-items: center; gap: 6px; }
.sender-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.hide-avatar .sender-avatar { display: none !important; }
.sender-badge { font-size: 0.72rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; color: var(--primary); background: var(--primary-soft); }
.btn-collect-toggle { background: transparent; border: none; color: var(--text-muted); font-size: 0.78rem; cursor: pointer; transition: all 0.15s; }
.btn-collect-toggle.active { color: var(--primary); font-weight: 600; }
.bubble { padding: 11px 15px; border-radius: 16px; line-height: 1.55; font-size: 0.92rem; word-break: break-word; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); }
.bubble.male { background: var(--bg-card); border: 1px solid var(--border); border-bottom-left-radius: 3px; color: var(--text-title); }
.bubble.heroine { background: var(--primary-soft); border: 1px solid var(--border); border-bottom-right-radius: 3px; color: var(--text-title); }
.bubble.director-bubble { background: var(--bg-hover); border: 1px solid var(--primary-soft); color: var(--text-title); border-bottom-left-radius: 3px; }

.narration-bubble { background: var(--bg-card); border: 1px dashed var(--border); border-radius: 14px; padding: 14px 16px; color: var(--text-body); line-height: 1.65; font-size: 0.92rem; transition: all 0.2s; }
.narration-bubble.style-cinema { border-left: 4px solid var(--primary); background: var(--bg-hover); font-style: italic; letter-spacing: 0.3px; }
.narration-bubble.style-psychology { border: 1px solid var(--primary-soft); background: var(--bg-input); font-weight: 500; }
.narration-bubble.style-minimal { border: none; background: transparent; padding: 8px 4px; border-left: 2px solid var(--border); }

.branch-control-bar { display: flex; align-items: center; justify-content: space-between; background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 6px 12px; margin-bottom: 8px; font-size: 0.8rem; }
.branch-pager { display: flex; align-items: center; gap: 6px; }
.branch-pager button { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-title); border-radius: 6px; width: 22px; height: 22px; cursor: pointer; font-size: 0.75rem; }
.story-clue-bar { background: var(--primary-soft); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; }

.input-dock-wrap { width: 100%; background: var(--bg-app); padding: 4px 0 6px 0; display: flex; flex-direction: column; }
.input-dock { background: var(--bg-card); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 20px; padding: 4px 8px; display: flex; align-items: flex-end; gap: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.03); position: relative; }
.dock-plus-btn { background: transparent; border: none; color: var(--text-title); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.25rem; flex-shrink: 0; transition: transform 0.15s; }
.dock-plus-btn.active { transform: rotate(45deg); color: var(--primary); }
.input-dock textarea { flex: 1; background: transparent; border: none; outline: none; box-shadow: none; color: var(--text-title); font-size: 0.92rem; line-height: 20px; height: 22px; max-height: 100px; padding: 1px 4px; resize: none; overflow-y: hidden; -webkit-appearance: none; }
.input-dock textarea::placeholder { color: var(--text-muted); font-size: 0.88rem; }
.btn-send-wechat { background: var(--primary); color: #ffffff; border: none; border-radius: 15px; height: 28px; padding: 0 12px; font-size: 0.82rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 2px; }

.chat-feature-tray { position: absolute; bottom: 50px; left: 0; right: 0; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 16px; padding: 10px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; z-index: 30; }
.feature-tile-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; background: var(--bg-input); border: 1px solid var(--border); padding: 10px 14px; border-radius: 12px; }
.feature-tile-main { font-size: 0.85rem; font-weight: 600; color: var(--text-title); }
.feature-tile-sub { font-size: 0.7rem; color: var(--text-muted); }

.panel-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02); }
.story-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02); position: relative; }
.story-card.pinned { border-left: 4px solid var(--primary); }
.story-card-header { display: flex; justify-content: space-between; align-items: center; }
.story-card-title { font-size: 1rem; font-weight: 700; color: var(--text-title); display: flex; align-items: center; gap: 6px; }
.story-card-desc { font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }
.story-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

.director-toolbar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; border-bottom: 1px dashed var(--border); margin-bottom: 8px; flex-shrink: 0; }
.director-tool-btn { padding: 5px 11px; font-size: 0.78rem; border-radius: 14px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-title); white-space: nowrap; cursor: pointer; display: flex; align-items: center; gap: 4px; transition: all 0.15s; }
.director-tool-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.msg-action-bar { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }
.msg-action-btn { background: transparent; border: none; color: var(--primary); cursor: pointer; font-size: 0.72rem; padding: 0 2px; }
.msg-action-btn:hover { text-decoration: underline; }

.memory-category-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.memory-category-title { font-weight: 700; font-size: 0.85rem; color: var(--text-title); display: flex; justify-content: space-between; align-items: center; }
.memory-badge-count { font-size: 0.7rem; padding: 1px 6px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.memory-items-list { font-size: 0.8rem; color: var(--text-body); line-height: 1.5; }

.log-entry-row { background: var(--bg-input); border-radius: 10px; border: 1px solid var(--border); padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.log-entry-row.err { border-left: 3px solid #ff5252; }
.log-entry-row.succ { border-left: 3px solid #10b981; }
.log-entry-row.rollback { border-left: 3px solid var(--accent-purple); }

.scene-characters-bar { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 4px 0; margin-bottom: 6px; }
.scene-char-chip { font-size: 0.75rem; padding: 3px 10px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; transition: all 0.15s; user-select: none; }
.scene-char-chip.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; box-shadow: 0 1px 4px var(--primary-soft); }

.transfer-bubble { background: var(--transfer-bg); border: 1px solid var(--transfer-border); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.transfer-meta-top { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--transfer-text); font-weight: 600; }
.transfer-amount-line { font-size: 1.25rem; font-weight: 700; color: var(--text-title); }
.transfer-memo-line { font-size: 0.75rem; color: var(--text-body); border-top: 1px dashed var(--border); padding-top: 4px; margin-top: 2px; }

.voice-bubble-wrapper { display: flex; flex-direction: column; gap: 4px; max-width: 82%; }
.voice-bubble { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 14px; cursor: pointer; width: fit-content; }
.voice-seconds { font-size: 0.82rem; font-weight: 600; }
.voice-bars-flow { display: flex; align-items: center; gap: 2px; height: 12px; }
.voice-bar-unit { width: 2px; height: 100%; background: currentColor; border-radius: 1px; opacity: 0.8; }
.voice-subtext-card { font-size: 0.78rem; color: var(--text-muted); background: var(--bg-input); border: 1px solid var(--border); padding: 4px 8px; border-radius: 8px; line-height: 1.4; }

.filter-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.filter-tab-btn { padding: 6px 12px; border-radius: 20px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.82rem; cursor: pointer; white-space: nowrap; }
.filter-tab-btn.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }

.item-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.item-top-row { display: flex; justify-content: space-between; align-items: center; }
.item-owner-tag { font-size: 0.72rem; padding: 2px 6px; border-radius: 6px; background: var(--primary-soft); color: var(--primary); }

.quote-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.quote-text-body { font-size: 0.92rem; color: var(--text-title); line-height: 1.6; font-style: italic; border-left: 3px solid var(--primary); padding-left: 10px; }
.quote-meta-bar { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

.diary-entry-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.diary-meta-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; }
.diary-date-badge { font-weight: 700; color: var(--text-title); display: flex; align-items: center; gap: 4px; }
.diary-mood-tag { padding: 2px 8px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-size: 0.72rem; }
.diary-text-content { font-size: 0.85rem; color: var(--text-body); line-height: 1.6; }

.radar-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.meter-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.84rem; gap: 6px; }
.meter-label-area { min-width: 60px; font-weight: 500; }
.meter-bar-track { flex: 1; height: 6px; background: rgba(0, 0, 0, 0.06); border-radius: 4px; overflow: hidden; position: relative; }
.meter-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent-purple)); border-radius: 4px; }
.meter-val-text { min-width: 32px; text-align: right; font-size: 0.78rem; color: var(--text-muted); }

.avatar-toggle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--bg-input); border: 1px solid var(--border); padding: 8px; border-radius: 14px; }
.toggle-avatar-btn { padding: 8px 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-body); font-size: 0.78rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.toggle-avatar-btn.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.avatar-card { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.avatar-preview-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--primary); }

.quick-item-tray { position: absolute; bottom: 56px; left: 14px; right: 14px; background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 16px; padding: 12px; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); z-index: 20; }

button { outline: none; }
.btn-main { background: var(--primary); color: #ffffff; border: none; border-radius: 20px; padding: 7px 16px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.btn-main:active { transform: scale(0.96); }
.btn-ghost { background: var(--bg-card); color: var(--text-title); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; cursor: pointer; }
textarea, select, input { background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; color: var(--text-title); outline: none; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.modal-box { background: var(--bg-sidebar); border: 1px solid var(--border); border-radius: 18px; width: 100%; max-width: 460px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); max-height: 90vh; overflow-y: auto; }
.action-menu-list { display: flex; flex-direction: column; gap: 4px; }
.action-menu-item { padding: 10px 14px; border-radius: 10px; display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--text-title); cursor: pointer; border: none; background: transparent; text-align: left; width: 100%; }
.action-menu-item:hover { background: var(--bg-hover); color: var(--primary); }
.action-menu-item.danger { color: #ff5252; }
.broadcast-target-card { background: var(--bg-input); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.phone-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 16px; }
.phone-shell { width: 100%; max-width: 340px; height: 580px; max-height: 90vh; background: #18151c; border: 3px solid #2d2636; border-radius: 36px; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); overflow: hidden; color: #fff; }

.format-chip-btn { font-size: 0.74rem; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-body); cursor: pointer; }
.format-chip-btn:hover { border-color: var(--primary); color: var(--primary); }