/* ═══════════════════════════════════════ OBS Chat Generator — themed UI (Cupcake-inspired) Dark by default · Light theme via [data-theme="light"] on All colour values flow through CSS custom properties — no literal hex values outside the token block at the top. ═══════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* ─── TOKENS ──────────────────────────── Single source of truth for colour, radius, spacing. Theme swap is a token-level swap; layout/structure rules below reference only var(--…). */ :root, html[data-theme="dark"] { /* Surfaces */ --bg: #131313; /* outermost background */ --bg2: #181818; /* sidebar / panels */ --bg3: #1b1b1b; /* cards inside sidebar */ --bg-input: #373a3f; /* form inputs */ /* Lines / dividers */ --line: rgba(255,255,255,0.06); --line2: rgba(255,255,255,0.12); /* Hover surface — used by every "subtle lift on hover" rule so the hover state is GUARANTEED visible even when bg/bg2/bg3 collapse in one theme. Never hover to a base surface token directly; always use this. In dark mode it's a faint white overlay; in light mode a faint dark overlay. */ --hover: rgba(255,255,255,0.06); /* Text */ --tx: #ffffff; --tx2: rgba(255,255,255,0.72); --tx3: rgba(255,255,255,0.45); /* Single modern-blue accent (same hue in both themes; brand identity) */ --accent: #3B82F6; --accent-h: #2563EB; --accent-bg: rgba(59,130,246,0.14); --accent-on: #ffffff; /* foreground colour on accent fills */ /* Status */ --grn: #23a559; --red: #f23f42; /* Preview surface — checker pattern is the default (mirrors Cupcake). The base colour and the checker tint are theme-aware so the stage feels native to the current theme. Mid-grey base in dark (above true black so the checker reads cleanly without fighting OBS reality). */ --preview-bg: #2a2d33; --preview-checker: rgba(255,255,255,0.07); /* Radius */ --r-card: 12px; --r-inner: 8px; --r-tile: 10px; --r-pill: 99px; /* Shadows */ --shadow-1: 0 2px 8px rgba(0,0,0,.35); --shadow-2: 0 12px 32px rgba(0,0,0,.45); /* Back-compat aliases — older inline styles in index.html reference these */ --lavender: var(--accent); --lav-d: var(--accent-h); --acc: var(--accent); --acc-d: var(--accent-h); --acc-bg: var(--accent-bg); --pink: var(--accent); /* legacy alias used by Kunzite macro chips */ --pink-d: var(--accent-h); --sky: var(--accent); --sky-d: var(--accent-h); --mint: var(--accent); --mint-d: var(--accent-h); } html[data-theme="light"] { /* Surfaces — near-white / soft grey, mirroring Cupcake's light palette */ --bg: #ffffff; --bg2: #ececf3; --bg3: #ffffff; --bg-input: #ffffff; /* Lines / dividers — soft greys */ --line: rgba(0,0,0,0.08); --line2: rgba(0,0,0,0.16); /* Hover surface — a faint dark overlay. In light mode bg/bg3/bg-input are all #fff; without this token, hovers to bg* would be invisible. */ --hover: rgba(0,0,0,0.05); /* Text */ --tx: #373737; --tx2: rgba(55,55,55,0.78); --tx3: rgba(55,55,55,0.48); /* Accent stays identical so brand identity holds across themes */ --accent: #3B82F6; --accent-h: #2563EB; --accent-bg: rgba(59,130,246,0.14); --accent-on: #ffffff; /* Status */ --grn: #1f8a4c; --red: #d63a3e; /* Preview surface — mid-grey checker in light mode. Darker base so white bubbles pop clearly; visible white squares distinguish it from the Transparent picker at a glance. */ --preview-bg: #9ea3b0; --preview-checker: rgba(255,255,255,0.28); /* Light-mode shadows are softer */ --shadow-1: 0 2px 8px rgba(0,0,0,.10); --shadow-2: 0 12px 32px rgba(0,0,0,.16); } /* Smooth theme swap — every coloured surface eases over 200ms when the user flips the toggle. body alone isn't enough because surfaces inherit tokens; we hint the major chrome instead. */ .hdr, .sb, .preview-main, .preview-tabs, .ptab-mockup-row, .quick-card, .tgl-item, .sec, .ac-card, select, input[type=text], .rv, .mp button, .macro-chip, .preset-tile, .seg-btn, .theme-swatch, .schema-seg-btn, .spanel-body, .bg-btn, .copy-btn, .hdr-btn, .lay-btn, .app-modal-box, body { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } /* ─── BASE ────────────────────────────── */ html, body { height:100%; overflow:hidden; } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--tx); display: flex; flex-direction: column; font-size: 14.5px; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Material Symbols Outlined — sized per use-site via parent font-size or .ms */ .ms { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; vertical-align: middle; } /* ─── HEADER ─────────────────────────── */ .hdr { background: var(--bg2); border-bottom: 1px solid var(--line); padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; z-index: 100; gap: 16px; /* breathing room between hamburger, title, and action cluster */ } /* Pull the title block away from the hamburger button — without this gap the "Shiori Project…" text crowds the ☰ icon. */ .hlogo { display:flex; align-items:center; gap:10px; margin-right:auto; margin-left: 6px; } .ht { font-size:16px; font-weight:700; color:var(--tx); letter-spacing:-.01em; } .hs { font-size:12px; color:var(--tx3); margin-top:2px; font-weight:500; } .hdr-btn { background: var(--bg); border: 1px solid var(--line2); color: var(--tx2); padding: 8px 14px; border-radius: var(--r-inner); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; display:inline-flex; align-items:center; gap:6px; transition: transform .15s, background-color .15s, color .15s, border-color .15s; } .hdr-btn:hover { background:var(--hover); color:var(--tx); border-color:var(--accent); transform:scale(1.03); } .hdr-btn .ms { font-size:18px; } .copy-btn { background: var(--accent); color: var(--accent-on); border:1px solid var(--accent); padding: 9px 18px; border-radius: var(--r-inner); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; display:inline-flex; align-items:center; gap:6px; transition: transform .15s, background-color .15s; box-shadow: 0 1px 0 rgba(0,0,0,.15) inset; } .copy-btn:hover { background: var(--accent-h); border-color: var(--accent-h); transform:scale(1.04); } .copy-btn.ok { background: var(--grn); border-color: var(--grn); } .copy-btn .ms { font-size:18px; } .btn-label { display:inline-block; } /* Theme toggle — sits in the header alongside Reset */ .theme-btn { background: var(--bg); border: 1px solid var(--line2); color: var(--tx2); width: 38px; height: 38px; border-radius: var(--r-inner); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; transition: transform .15s, background-color .15s, color .15s, border-color .15s; } .theme-btn:hover { color: var(--accent); border-color: var(--accent); transform:scale(1.08); } .theme-btn .ms { font-size:22px; } /* Sidebar hamburger is unused (sidebar never collapses in the default flow), so hide it from the header. The function stays wired up — a future surface can call toggleSidebar() — but the button no longer takes up header room. */ .sidebar-toggle { display: none !important; } /* ─── WORKSPACE ──────────────────────── */ .ws { display: grid; grid-template-columns: 400px 1fr; grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; overflow: hidden; } #previewMount { display: contents; } .ws.sidebar-collapsed { grid-template-columns: 1fr; } .ws.sidebar-collapsed > #sidebar { display: none; } @media (max-width: 720px) { .ws { grid-template-columns: 1fr; } .ws:not(.sidebar-open) > #sidebar { display: none; } } /* ─── SIDEBAR ────────────────────────── */ .sb { background: var(--bg2); border-right: 1px solid var(--line); overflow-y: auto; overflow-x: hidden; padding: 18px 18px 60px; display: flex; flex-direction: column; gap: 22px; min-height: 0; height: 100%; } .sb::-webkit-scrollbar { width:8px; } .sb::-webkit-scrollbar-track { background:transparent; } .sb::-webkit-scrollbar-thumb { background:var(--line2); border-radius:4px; } .sb::-webkit-scrollbar-thumb:hover { background:var(--accent); } /* Section card (flat list in Simple, accordion in Full) */ .sec { display: flex; flex-direction: column; gap: 16px; } .sec-title { /* Sentence case + soft underline. Bigger and less shouty than the old uppercase mini-label. */ font-size: 15px; font-weight: 700; color: var(--tx); padding: 0 0 10px; margin-bottom: 12px; border-bottom: 2px solid var(--line); letter-spacing: 0; } /* Accordion chrome - handled universally by the rules below */ .ac-divider { height:1px; background: var(--line); margin: 2px 0; } /* Sub-headings inside a section (e.g. "Style Presets", "Color Theme") — sentence case now, softer hierarchy. */ .sub-hd { font-size:13px; font-weight:700; letter-spacing:0; color: var(--tx); padding: 4px 0 0; } /* ─── FIELDS ─────────────────────────── */ .field { display:flex; flex-direction:column; gap:6px; } .field label { font-size:13px; font-weight:600; color: var(--tx2); line-height:1.4; letter-spacing:0; margin-top:12px; } .r2 { display:grid; grid-template-columns:1fr; gap:10px; } .r3 { display:grid; grid-template-columns:1fr; gap:8px; } /* Inputs */ select, input[type=text] { background: var(--bg-input); border: 1px solid var(--line2); color: var(--tx); border-radius: var(--r-inner); padding: 11px 12px; font-size: 14px; font-weight: 500; width: 100%; outline: none; transition: border-color .15s, box-shadow .15s, transform .15s; font-family:inherit; -webkit-appearance:none; } select:focus, input[type=text]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } select option { background:var(--bg-input); color:var(--tx); } ::placeholder { color: var(--tx3); } /* ─── COLOR PICKER (stacked capsule — swatch above hex) ──── */ /* Reference-style: a 36px-tall preview swatch (top-rounded) sits on top of a 12px hex input (bottom-rounded). One unit, no horizontal sprawl. */ .cr { display:flex; flex-direction:column; border: 1px solid var(--line2); border-radius: var(--r-inner); overflow: hidden; transition: border-color .15s, transform .15s; } .cr:hover { border-color: var(--accent); } .cr input[type=color] { width:100%; height:34px; padding:0; border:none; background:transparent; cursor:pointer; -webkit-appearance:none; } .cr input[type=color]::-webkit-color-swatch-wrapper { padding:0; } .cr input[type=color]::-webkit-color-swatch { border:none; border-radius:0; } .cr input[type=color]::-moz-color-swatch { border:none; border-radius:0; } .cr input[type=text] { border: none; border-top: 1px solid var(--line2); border-radius: 0; background: var(--bg-input); padding: 8px 12px; font-size: 12px; font-weight: 600; text-align: center; letter-spacing: .04em; text-transform: uppercase; /* hex values only — universally typeset uppercase */ } .cr input[type=text]:focus { box-shadow: none; background: var(--bg); } /* ─── RANGE (chunky) ─────────────────── */ .rr { display:flex; align-items:center; gap:12px; } .rr input[type=range] { flex:1; -webkit-appearance:none; appearance:none; height:14px; background: transparent; border-radius:99px; outline:none; border:none; padding:0; cursor:pointer; } .rr input[type=range]::-webkit-slider-runnable-track { height:14px; background: var(--line2); border-radius: var(--r-pill); } .rr input[type=range]::-moz-range-track { height:14px; background: var(--line2); border-radius: var(--r-pill); } .rr input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; background: var(--tx); border: 3px solid var(--accent); border-radius:50%; cursor:pointer; margin-top:-4px; transition: transform .15s; box-shadow: var(--shadow-1); } .rr input[type=range]::-moz-range-thumb { width:22px; height:22px; background: var(--tx); border: 3px solid var(--accent); border-radius:50%; cursor:pointer; box-shadow: var(--shadow-1); transition: transform .15s; } .rr input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.12); } .rr input[type=range]:hover::-moz-range-thumb { transform: scale(1.12); } .rr input[type=range]:active::-webkit-slider-thumb{ transform: scale(1.18); } .rr input[type=range]:active::-moz-range-thumb { transform: scale(1.18); } .rv { font-size:13px; font-weight:600; color: var(--tx); width:60px; text-align:center; background: var(--bg-input); border: 1px solid var(--line2); border-radius: var(--r-inner); padding:7px 6px; font-family:inherit; cursor:text; outline:none; -moz-appearance:textfield; transition: border-color .15s, box-shadow .15s; } .rv::-webkit-inner-spin-button,.rv::-webkit-outer-spin-button{display:none;} .rv:focus{ border-color:var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } /* ─── MODE PICKER (segmented row) ───── */ .mp { display:flex; gap:4px; flex-wrap:wrap; } .mp button { font-size:13px; padding:9px 12px; border-radius: var(--r-inner); border:1px solid var(--line2); background: var(--bg-input); color: var(--tx2); cursor:pointer; transition:all .12s; flex:1; white-space:nowrap; font-family:inherit; font-weight:600; } .mp button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-on); } .mp button:not(.on):hover { background: var(--hover); color: var(--tx); border-color: var(--accent); } /* ─── TOGGLE ITEM ────────────────────── */ .tgl-group { display:flex; flex-direction:column; gap:6px; } .tgl-item { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; background:var(--bg3); border-radius:var(--r-inner); border:1px solid var(--line); transition: background-color .15s, border-color .15s, transform .15s; } .tgl-item:hover { background:var(--hover); border-color:var(--line2); } .tgl-item span { font-size:14px; color:var(--tx); font-weight:500; } .tgl { position:relative; width:42px; height:24px; flex-shrink:0; } .tgl input { opacity:0; width:0; height:0; } .tsl { position:absolute; cursor:pointer; inset:0; background: var(--line2); border-radius:99px; transition:.25s; } .tsl::before { content:''; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.25s; box-shadow:0 2px 6px rgba(0,0,0,.4); } .tgl input:checked+.tsl { background: var(--accent); } .tgl input:checked+.tsl::before { transform:translateX(18px); } /* ─── LAYOUT (V / H) BUTTONS ─────────── Vertical / Horizontal picker — a 2-column tile grid. Each tile is a chunky card with an icon + label + sub-label, mirroring the preset-tile feel but bigger (this is a primary layout choice, not a thumb). */ .lay-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .lay-btn { display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px; border-radius: var(--r-card); border:2px solid var(--line2); background: var(--bg-input); color: var(--tx2); cursor:pointer; font-family:inherit; transition: transform .15s, border-color .15s, background-color .15s, color .15s; } .lay-btn:not(.on):hover { background: var(--bg3); color: var(--tx); border-color: var(--accent); transform: scale(1.03); } .lay-btn.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); } .lay-ico { font-size:28px; line-height:1; } .lay-name { font-size:14px; font-weight:700; } .lay-sub { font-size:11px; opacity:.75; } /* ─── PREVIEW AREA ───────────────────── */ .preview-main { display:flex; flex-direction:column; min-height:0; overflow:hidden; background: var(--bg3); } .preview-tabs { display:flex; align-items:center; gap:0; border-bottom:1px solid var(--line); background:var(--bg2); padding:0 16px; height:50px; flex-shrink:0; } .ptab { font-size:14px; font-weight:600; color:var(--tx3); padding:0 14px; height:100%; display:flex; align-items:center; gap:6px; cursor:pointer; border-bottom:2px solid transparent; transition: color .15s, border-color .15s; white-space:nowrap; user-select:none; } .ptab:hover { color:var(--tx2); } .ptab.on { color:var(--tx); border-color:var(--accent); } .ptab .ms { font-size:18px; } .ptab-sep { flex:1; } .ptab-controls { display:flex; gap:6px; align-items:center; } .ptab-mockup-row { display:flex; align-items:center; gap:8px; padding:8px 16px; background:var(--bg2); border-bottom:1px solid var(--line); flex-shrink:0; font-size:12px; color: var(--tx2); } /* Char picker (#mockupRow) is Live-Animation-only. switchPreviewTab() puts .live-tab on .preview-main when the Live tab is active; without it the Char capsule disappears so the Style Preview tab stays minimal. */ .preview-main:not(.live-tab) #mockupRow { display: none !important; } /* Video BG button is Live-tab-only — no live stage to show video on Static. */ .preview-main:not(.live-tab) #bg-video1 { display: none !important; } /* "?" inline hint — native title fallback + a CSS-only tooltip on hover. Used next to complex tech labels (Lanes, Speed, …) without any JS. */ .hint { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-left:6px; border-radius:50%; background: var(--line2); color: var(--tx2); font-size:10px; font-weight:700; line-height:1; cursor:help; position:relative; user-select:none; } .hint:hover { background: var(--accent); color: var(--accent-on); } .hint::after { content: attr(data-tip); position:absolute; left:50%; bottom: calc(100% + 6px); transform: translateX(-50%) translateY(4px); background: var(--bg); color: var(--tx); border: 1px solid var(--line2); border-radius: var(--r-inner); padding: 7px 10px; font-size:11px; font-weight:500; white-space: normal; width: 220px; text-align:left; line-height:1.45; pointer-events:none; opacity:0; transition: opacity .15s, transform .15s; box-shadow: var(--shadow-2); z-index: 9999; } .hint:hover::after { opacity:1; transform: translateX(-50%) translateY(0); } /* Compact picker — a single rounded capsule that groups icon-only buttons (Cupcake-style). One group per control category (BG / Character / etc.). Saves sidebar/tab-bar space versus the old text-pill row. */ .picker-group { display:inline-flex; align-items:center; background: var(--bg3); border:1px solid var(--line2); border-radius: var(--r-pill); padding: 3px; gap: 2px; transition: border-color .15s; } .picker-group:hover { border-color: var(--line2); } .picker-group + .picker-group { margin-left:6px; } .picker-label { font-size:11px; font-weight:600; color:var(--tx3); padding: 0 8px 0 6px; letter-spacing:.04em; user-select:none; } /* Original .bg-btn — now a compact icon button by default, wrapped in .picker-group capsules. Falls back to a text pill if used outside a picker-group (legacy callers / mockup chips with text labels). */ .bg-btn { font-size:12px; padding: 6px 10px; border-radius: var(--r-pill); border: 1px solid transparent; background: transparent; color: var(--tx2); font-family:inherit; cursor:pointer; transition: transform .12s, background-color .12s, color .12s, border-color .12s; white-space:nowrap; font-weight:600; display:inline-flex; align-items:center; gap:5px; line-height:1; } .bg-btn .ms { font-size:16px; } .bg-btn:hover { background: var(--hover); color: var(--tx); } .bg-btn.on { background: var(--accent); color: var(--accent-on); } /* Standalone .bg-btn (used outside a picker-group — kept for legacy usage patterns like the mockup row's plain Character button). */ .bg-btn.standalone, .ptab-mockup-row > .bg-btn:not(.picker-group .bg-btn) { border-color: var(--line2); background: var(--bg3); } .bg-btn.standalone:hover, .ptab-mockup-row > .bg-btn:hover { border-color: var(--accent); } .play-btn { font-size:12px; padding:6px 14px; border-radius: var(--r-inner); border:1px solid var(--grn); background:rgba(35,165,89,.15); color:var(--grn); font-family:inherit; cursor:pointer; transition: transform .12s, background-color .12s, color .12s; font-weight:700; } .play-btn:hover { background:var(--grn); color:#fff; transform: scale(1.04); } .play-btn.paused { border-color:var(--red); background:rgba(242,63,66,.15); color:var(--red); } .play-btn.paused:hover { background:var(--red); color:#fff; } .preview-panel { flex:1; min-height:0; overflow:hidden; display:none; } .preview-panel.active { display:flex; flex-direction:column; } /* Default preview canvas: theme-aware checker (Cupcake-style). Both the Live and Style Preview surfaces share this look so they feel like one stage. .bg-clear is the EXPLICIT transparent option (chosen via the ⊞ Transparent picker); the default uses --preview-bg + a tinted diagonal checker. */ .live-stage { flex:1; position:relative; overflow:hidden; background-color: var(--preview-bg); background-image: linear-gradient(45deg, var(--preview-checker) 25%, transparent 25%, transparent 75%, var(--preview-checker) 75%), linear-gradient(45deg, var(--preview-checker) 25%, transparent 25%, transparent 75%, var(--preview-checker) 75%); background-size: 20px 20px; background-position: 0 0, 10px 10px; } .live-stage.bg-dark { background-color: #1a1a1a; background-image: none; } .live-stage.bg-clear { background-color: transparent; background-image: linear-gradient(45deg,rgba(128,128,128,.18) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.18) 75%), linear-gradient(45deg,rgba(128,128,128,.18) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.18) 75%); background-size:20px 20px; background-position:0 0,10px 10px; } .spanel-body { flex:1; overflow-y:auto; overflow-x:hidden; padding:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; background-color: var(--preview-bg); background-image: linear-gradient(45deg, var(--preview-checker) 25%, transparent 25%, transparent 75%, var(--preview-checker) 75%), linear-gradient(45deg, var(--preview-checker) 25%, transparent 25%, transparent 75%, var(--preview-checker) 75%); background-size: 20px 20px; background-position: 0 0, 10px 10px; position:relative; } .spanel-body::-webkit-scrollbar { width: 14px; height: 14px; } .spanel-body::-webkit-scrollbar-track { background: rgba(0,0,0,.25); border-radius: 7px; } .spanel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.40); border-radius: 7px; border: 3px solid transparent; background-clip: padding-box; } .spanel-body::-webkit-scrollbar-thumb:hover { background: var(--accent); border-radius: 7px; border: 3px solid transparent; background-clip: padding-box; } .spanel-body { cursor: grab; } .spanel-body.panning { cursor: grabbing !important; user-select: none; } /* Static panel mirrors the live stage's three bg modes — the BG picker drives both surfaces via the same class set so toggling never desyncs them. */ .spanel-body.bg-dark { background-color: #1a1a1a; background-image: none; } .spanel-body.bg-clear { background-color: transparent; background-image: linear-gradient(45deg,rgba(128,128,128,.18) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.18) 75%), linear-gradient(45deg,rgba(128,128,128,.18) 25%,transparent 25%,transparent 75%,rgba(128,128,128,.18) 75%); background-size:20px 20px; background-position:0 0,10px 10px; } /* Preview stage layering (unchanged structure) */ .preview-layer { position:absolute; inset:0; pointer-events:none; } .preview-layer--bg { z-index:1; } .preview-layer--char-back { z-index:2; } .preview-layer--char-front{ z-index:4; } .chat-row { position:absolute; bottom:14px; left:10px; right:10px; display:flex; flex-direction:row; align-items:flex-end; justify-content:flex-end; gap:0; overflow:visible; pointer-events:none; z-index:3; } .chat-row.vertical { top:0; bottom:0; left:10px; right:auto; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:0; overflow:visible; } /* ─── TOAST ──────────────────────────── */ .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(8px); background:var(--grn); color:#fff; padding:11px 22px; border-radius:var(--r-inner); font-size:14px; font-weight:600; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; z-index:9999; white-space:nowrap; box-shadow: var(--shadow-2); } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } @keyframes flash-glow { 0% { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 20px var(--accent); transform: translateY(-1px); } 10% { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 20px var(--accent); transform: translateY(-1px); } 100% { border-color: var(--line1); box-shadow: none; transform: translateY(0); } } @keyframes flash-glow-bg { 0% { background: var(--accent-bg); } 10% { background: var(--accent-bg); } 100% { background: transparent; } } /* Highlight for inspected accordion card */ .ac-card.inspected-active { animation: flash-glow 1.5s ease-out; } .ac-card.inspected-active .ac-hd { animation: flash-glow-bg 1.5s ease-out; } .inspect-btn { padding: 6px 12px; border-radius: 20px; box-shadow: var(--shadow-1); background: var(--bg-input); border: 1px solid var(--line2); color: var(--tx2); display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; transition: all 0.2s; cursor: pointer; } .inspect-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-on); } .inspect-btn:hover:not(.on) { border-color: var(--accent); color: var(--tx); } /* Hide inspector button when Live Animation tab is active */ .preview-main.live-tab #tInspector { display: none; } /* ─── MODE TOGGLE / SIMPLE-FULL VISIBILITY ── */ .mode-toggle-row { display:flex; gap:6px; padding:10px 0 6px; } .mode-btn { flex:1; padding:9px; border-radius: var(--r-inner); border:1px solid var(--line2); background:var(--bg-input); color:var(--tx2); cursor:pointer; font-family:inherit; font-weight:600; font-size:13px; transition: all .15s; } .mode-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-on); } .mode-btn:not(.on):hover { border-color: var(--accent); color: var(--tx); } /* ─── GROUP HEADERS ──────────────────── */ .group-hd { padding:12px 0 6px; display:flex; align-items:center; gap:6px; } .group-hd span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--tx3); } .group-hd--style span { color: var(--accent); } /* ─── QUICK-START CARD ───────────────── */ .quick-card { background: var(--bg3); border-radius: var(--r-card); padding: 18px 18px; margin-bottom: 4px; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-1); } .quick-card .sub-hd { margin-top:0; } /* ─── PRESET TILES ───────────────────── */ .preset-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; } .preset-tile { display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 4px; border-radius: var(--r-tile); border:1px solid var(--line2); background: var(--bg); cursor:pointer; font-family:inherit; font-size:10.5px; color: var(--tx2); font-weight:600; transition: transform .12s, border-color .12s, background-color .12s, color .12s; line-height:1.2; } .preset-tile:hover { border-color: var(--accent); background: var(--accent-bg); color: var(--tx); transform: scale(1.04); } .preset-tile.on { border-color: var(--accent); background: var(--accent); color: var(--accent-on); } /* Compact segmented Left/Right toggles (Chat Alignment, Avatar Position) */ .seg-btn { padding:10px 10px; border-radius: var(--r-inner); border:2px solid var(--line2); background: var(--bg-input); color: var(--tx2); cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; transition: all .15s; } .seg-btn:hover { border-color: var(--accent); } .seg-btn.on { border-color: var(--accent); background: var(--accent); color: var(--accent-on); } /* ─── COLOR THEME SWATCHES ───────────── */ .theme-swatches-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .theme-swatch { width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition: all .15s; flex-shrink:0; padding:0; } .theme-swatch:hover { border-color: var(--accent); transform: scale(1.18); } .theme-swatch.on { border-color: var(--accent); transform: scale(1.18); box-shadow: 0 0 0 2px var(--accent-bg); } .theme-swatch-default { background: var(--line2) !important; border-color: var(--line2) !important; color: var(--tx2); font-size:14px; line-height:22px; } .theme-swatch-default:hover { background: var(--accent-bg) !important; color: var(--tx); } /* ─── MACRO CHIPS ─────────────────────── */ .macro-subhd { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--accent); margin:18px 0 9px; padding-bottom:5px; border-bottom:1px solid var(--line); } .macro-subhd:first-of-type { margin-top:4px; } .macro-row { margin-bottom:11px; } .macro-label { display:block; font-size:12px; font-weight:600; letter-spacing:0; color: var(--tx2); margin-bottom:6px; } .macro-chips { display:flex; gap:6px; } .macro-hint { font-size:10px; font-weight:400; color:var(--tx3); text-transform:none; letter-spacing:0; } .macro-textinput { width:100%; box-sizing:border-box; font-family:inherit; font-size:12px; padding:9px 11px; border-radius: var(--r-inner); background:var(--bg-input); color:var(--tx); border:1.5px solid var(--line2); transition: border-color .15s, box-shadow .15s; } .macro-textinput:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .macro-chip { flex:1 1 0; min-width:0; text-align:center; white-space:nowrap; font-family:inherit; font-size:12px; font-weight:600; padding:9px 6px; border-radius: var(--r-inner); line-height:1; background:var(--bg-input); color:var(--tx); border:1.5px solid var(--line2); cursor:pointer; transition: transform .12s, background-color .12s, border-color .12s, color .12s; } .macro-chip:hover { border-color: var(--accent); background: var(--accent-bg); transform: scale(1.04); } .macro-chip.on, .macro-chip.reflected { background: var(--accent); color: var(--accent-on); border-color: var(--accent); box-shadow:0 1px 4px var(--accent-bg); } .macro-chip:disabled { cursor:not-allowed; opacity:.5; } .macro-chip:disabled:hover { border-color:var(--line2); background:var(--bg-input); transform:none; } .macro-groupbox { border:1px solid var(--line); border-radius: var(--r-inner); padding:12px 12px 4px; margin-bottom:11px; background: rgba(255,255,255,.015); } html[data-theme="light"] .macro-groupbox { background: rgba(0,0,0,.02); } .macro-groupbox .macro-row:last-child { margin-bottom:9px; } .macro-dependent.is-disabled { opacity:.4; pointer-events:none; } /* ─── SCHEMA PANEL ───────────────────── */ .schema-panel-title { color: var(--accent); font-weight:700; } .schema-ctl { margin-bottom:12px; } .schema-ctl-label { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--tx2); margin-bottom:6px; } .schema-ctl-val { color: var(--accent); font-variant-numeric:tabular-nums; font-size:11px; font-weight:600; } .schema-ctl-num { width:46px; text-align:right; font-size:11px; font-weight:600; color:var(--accent); background:transparent; border:none; outline:none; font-variant-numeric:tabular-nums; padding:0; cursor:text; appearance:textfield; -moz-appearance:textfield; } .schema-ctl-num::-webkit-inner-spin-button, .schema-ctl-num::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; } .schema-ctl input[type=range] { width:100%; } .schema-ctl input[type=color] { width:100%; height:32px; padding:2px; border:1px solid var(--line2); border-radius: var(--r-inner); background:var(--bg-input); cursor:pointer; } .schema-ctl input[type=checkbox] { width:18px; height:18px; cursor:pointer; } .schema-empty { font-size:12px; color:var(--tx3); margin:2px 0 0; line-height:1.5; } .schema-seg { display:flex; gap:6px; } .schema-seg-btn { flex:1; padding:8px 10px; border-radius: var(--r-inner); border:1px solid var(--line2); background:var(--bg-input); color:var(--tx2); cursor:pointer; font-family:inherit; font-weight:600; font-size:13px; transition:all .15s; white-space:nowrap; text-align:center; } .schema-seg-btn:not(.on):hover { border-color: var(--accent); color: var(--tx); } .schema-seg-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-on); } /* Fly mode toggles */ body.fly-mode #bubbleControls, body.fly-mode [data-hide-fly] { display: none !important; } [data-show-fly] { display: none !important; } body.fly-mode [data-show-fly] { display: block !important; } .mode-simple [data-ctrl-group] { display: none; } body.pf-glow .mode-simple [data-ctrl-group="glow"] { display: block; } /* Simple mode hides advanced-only controls: fields tagged [data-adv], whole accordion cards tagged [data-adv-section], and the Advanced group header. Full mode shows everything. !important so the rule also beats the inline display styles some panels carry (advChipPadPanel / advMsgPadPanel / autoHideControls / vWidthField). */ .mode-simple [data-adv], .mode-simple [data-adv-section], .mode-simple .group-hd--advanced { display: none !important; } /* Text Glow is exclusive to the Glow preset (Fly has its own glow in the schema panel) — the Effects accordion group only shows under body.pf-glow. Inputs stay in the DOM either way (getValues reads them). */ #fxGlowGroup { display: none; } body.pf-glow #fxGlowGroup { display: block; } /* Glow locks out Avatar, Bubble Tail, and Decoration controls. */ body.pf-no-av #ac-av { display: none !important; } body.pf-no-tail #tailSection { display: none !important; } body.pf-no-deco #decoSection { display: none !important; } /* Kunzite's 3D lip depends on the bubble-only (no-rowBg) layout; hide and force-off Row Background when Kunzite is active. */ body.pf-no-row-bg #rowBgRow { display: none !important; } /* ─── ROLE BADGE GRID ─────────────────── */ .role-badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; } .role-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .role-col-hd { font-size: 11px; font-weight: 700; text-align: center; color: var(--tx3); text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .role-op-row { display: flex; flex-direction: column; gap: 3px; } .role-op-lbl { font-size: 11px; color: var(--tx3); text-align: center; font-weight: 600; } .role-badge-grid .cr { min-width: 0; flex-direction: column; gap: 0; } .role-badge-grid .cr input[type=color] { width: 100%; height: 30px; padding: 2px; border-radius: 4px 4px 0 0; cursor: pointer; box-sizing: border-box; } .role-badge-grid .cr input[type=text] { width: 100%; min-width: 0; flex: unset; font-size: 11px; text-align: center; font-family: monospace; background: var(--bg3); color: var(--tx2); border: 1px solid var(--line); border-top: none; border-radius: 0 0 4px 4px; padding: 2px 0; } .role-op-hdr { display: flex; justify-content: space-between; align-items: center; } .role-op-val { font-size: 11px; color: var(--tx2); font-family: monospace; font-weight: 600; } .role-txt-lbl { font-size: 10px; font-weight: 600; color: var(--tx3); text-align: center; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; } .role-badge-grid .role-op-row input[type=range] { width: 100%; } /* ─── APP MODAL ──────────────────────── */ .app-modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; border:none; padding:0; background:transparent; max-width:380px; width:calc(100% - 32px); } .app-modal::backdrop { background:rgba(8,8,12,.6); backdrop-filter:blur(2px); } .app-modal-box { background:var(--bg2); border:1px solid var(--line2); border-radius: var(--r-card); padding:22px; box-shadow: var(--shadow-2); } .app-modal-msg { margin:0 0 18px; font-size:14px; line-height:1.6; color:var(--tx); } .app-modal-actions { display:flex; gap:10px; justify-content:flex-end; } .app-modal-btn { font:inherit; font-size:13px; font-weight:600; padding:9px 16px; border-radius: var(--r-inner); cursor:pointer; border:1px solid var(--line2); transition: all .15s; } .app-modal-btn.ghost { background:transparent; color:var(--tx2); } .app-modal-btn.ghost:hover { background:var(--line); color:var(--tx); } .app-modal-btn.primary { background: var(--accent); color: var(--accent-on); border-color: var(--accent); } .app-modal-btn.primary:hover { background: var(--accent-h); border-color: var(--accent-h); } /* ─── FULL MODE ACCORDION ────────────── */ .sb.mode-full #controlsMount { display: flex; flex-direction: column; gap: 14px; } .ac-card { background: var(--bg3); border: 1px solid var(--line2); border-radius: var(--r-card); overflow: hidden; transition: border-color .15s, box-shadow .15s; } .ac-card.open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-bg); } .sec-title { display: none; } .ac-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; user-select: none; transition: background-color .12s; } .ac-hd:hover { background: rgba(43,193,203,.06); } html[data-theme="light"] .ac-hd:hover { background: rgba(43,193,203,.10); } .ac-card.open > .ac-hd { background: var(--accent-bg); } .ac-title { font-size: 14px; font-weight: 700; color: var(--tx); letter-spacing: 0; } .ac-chevron { color: var(--tx3); font-size: 22px; line-height: 1; transition: transform .22s ease, color .15s; } .ac-card.open > .ac-hd > .ac-chevron { transform: rotate(180deg); color: var(--accent); } .ac-body { max-height: 2500px !important; overflow: hidden !important; transition: max-height .28s ease; } .ac-body.collapsed { max-height: 0 !important; } .no-ac-transition .ac-body { transition: none !important; } .ac-inner { padding: 14px 16px 16px; } .ac-inner .field + .field { margin-top: 10px; } .ac-divider { height:1px; background: var(--line); margin: 2px 0; } /* Inspector-jump flash */ @keyframes ac-flash { 0% { box-shadow: 0 0 0 2px var(--accent), 0 0 18px 2px var(--accent-bg); } 35% { box-shadow: 0 0 0 2px var(--accent), 0 0 18px 2px var(--accent-bg); } 100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; } } .ac-card.ac-flash { animation: ac-flash 1s ease-out; } .ac-card.ac-flash > .ac-hd { background: var(--accent-bg); } /* Simple-mode inspector jump — brief outline pulse on the scroll target */ @keyframes qs-jump { 0%,35% { outline: 2px solid var(--accent); outline-offset: 3px; } 100% { outline: none; } } .qs-jump { animation: qs-jump 0.9s ease-out forwards; } /* ─── INSPECTOR TOOLTIP ──────────────── */ /* Inspector hover highlight — class-based (initInspector adds/removes .insp-hl) so the inspector never mutates a preview element's inline style. */ .insp-hl { outline: 2px solid var(--accent) !important; outline-offset: 2px; cursor: crosshair; border-radius: 2px; } #inspector-tip { position: fixed; background: var(--accent); color: var(--accent-on); font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .12s; white-space: nowrap; letter-spacing: .04em; box-shadow: var(--shadow-1); } #chatRow > * { pointer-events: auto; } .highlighted { outline: 4px solid #a855f7 !important; outline-offset: 4px !important; box-shadow: 0 0 20px rgba(168, 85, 247, 0.6) !important; z-index: 1000 !important; cursor: pointer; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; transform: scale(1.03) !important; filter: brightness(1.2) contrast(1.05) saturate(1.2) drop-shadow(0px 0px 8px rgba(168,85,247,0.5)) !important; }