/* AI Brand GPT — Admin Styles */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap'); :root { --bsp-bg: #030806; --bsp-surface: #07110d; --bsp-surface2: #0a1711; --bsp-surface3: #0f2017; --bsp-surface4: #153021; --bsp-border: rgba(81,255,153,0.08); --bsp-border2: rgba(81,255,153,0.18); --bsp-text: #E9FFF1; --bsp-muted: #79B88B; --bsp-dim: #3B6850; --bsp-accent: #22C55E; --bsp-accent2: #86EFAC; --bsp-accent3: #10B981; --bsp-danger: #FF4466; --bsp-success: #00CC88; --bsp-warn: #FFD700; --bsp-sidebar-w: 230px; --bsp-r: 12px; --bsp-r-sm: 8px; --bsp-r-lg: 16px; --bsp-shadow: 0 8px 32px rgba(0,0,0,0.5); --bsp-glow: 0 0 24px rgba(123,92,240,0.35); /* Aliases — these names are used throughout the CSS but were missing from :root, causing text to render black (invisible) on the dark background. */ --bsp-text-muted: #7878A0; /* same as --bsp-muted */ --bsp-text-dim: #44445A; /* same as --bsp-dim */ --bsp-border-bright: rgba(255,255,255,0.28); --bsp-radius: 12px; /* same as --bsp-r */ --bsp-radius-sm: 8px; /* same as --bsp-r-sm */ --bsp-radius-lg: 16px; /* same as --bsp-r-lg */ } #bsp-app { --bsp-scrollbar-thumb: rgba(255,255,255,.14); --bsp-scrollbar-thumb-hover: rgba(255,255,255,.24); } #bsp-app.bsp-theme-light { --bsp-bg: #eef4f0; --bsp-surface: #fbfdfb; --bsp-surface2: #f2f7f3; --bsp-surface3: #e4eee8; --bsp-surface4: #d7e7dc; --bsp-border: rgba(15,72,41,0.12); --bsp-border2: rgba(15,72,41,0.22); --bsp-text: #163024; --bsp-muted: #4a6a58; --bsp-dim: #7b9587; --bsp-accent: #0f8a4b; --bsp-accent2: #1d7b54; --bsp-accent3: #15a768; --bsp-danger: #d53b58; --bsp-success: #138a62; --bsp-warn: #cb8b16; --bsp-shadow: 0 14px 40px rgba(39,76,55,0.12); --bsp-glow: 0 0 26px rgba(15,138,75,0.16); --bsp-text-muted:#5a7865; --bsp-text-dim: #91a79a; --bsp-border-bright: rgba(19,73,47,0.26); --bsp-scrollbar-thumb: rgba(15,72,41,.22); --bsp-scrollbar-thumb-hover: rgba(15,72,41,.34); } /* Reset */ #bsp-app, #bsp-app * { box-sizing: border-box; font-family: 'Space Grotesk', sans-serif; } #bsp-app { display: flex; width: 100vw; height: 100vh; min-height: 100vh; background: var(--bsp-bg); color: var(--bsp-text); margin-left: -20px; margin-top: -8px; position: fixed; top: 0; left: 0; z-index: 9999; overflow: hidden; transition: background-color .2s ease, color .2s ease; } #bsp-app.bsp-layout-wide .bsp-sidebar { width: 78px; } #bsp-app.bsp-layout-wide .bsp-sidebar-logo, #bsp-app.bsp-layout-wide .bsp-brand-list, #bsp-app.bsp-layout-wide .bsp-sidebar-footer { display: none; } #bsp-app.bsp-layout-wide .bsp-sidebar-nav { padding: 14px 8px; } #bsp-app.bsp-layout-wide .bsp-nav-item { justify-content: center; padding: 12px 8px; font-size: 0; } #bsp-app.bsp-layout-wide .bsp-nav-item .bsp-nav-icon { width: auto; font-size: 16px; } #bsp-app.bsp-layout-wide .bsp-view { padding-left: 22px; padding-right: 22px; } /* ════════════════════════════════════════════════════════════════════════════ WP MEDIA MODAL — BULLETPROOF FIX (v4.0.3) Root cause: #bsp-app is position:fixed; z-index:9999 and covers 100vw/100vh. WordPress appends media picker elements to but they end up visually behind #bsp-app and cannot receive pointer events. Strategy (three-layer): 1. Elevate EVERY WP media element to z-index:1000000+ (above #bsp-app at 9999) 2. Guarantee pointer-events:all on modal, frame and all children 3. JS adds `bsp-media-open` to → CSS drops #bsp-app pointer-events to none so it cannot intercept ANY click while the picker is open ════════════════════════════════════════════════════════════════════════════ */ /* — Layer 1: Backdrop (lowest of the media stack, still above bsp-app) — */ .media-modal-backdrop, .wp-core-ui .media-modal-backdrop { z-index: 999997 !important; pointer-events: all !important; position: fixed !important; } /* — Layer 2: Modal shell — elevated z-index only, NO position:fixed override. WP positions .media-modal itself; forcing fixed on inner frames makes them stretch 100vw/100vh instead of centering at their natural 900×600 size. — */ .media-modal, .wp-core-ui .media-modal { z-index: 1000000 !important; pointer-events: all !important; position: fixed !important; /* shell must be fixed to sit in viewport */ } /* Inner frame elements: only z-index + pointer-events; let WP's own layout handle sizing */ .media-modal-content, .media-frame, .media-frame-content, .media-frame-menu, .media-frame-router, .media-frame-toolbar, .media-frame-title, .media-sidebar, .attachments-browser, .media-toolbar, .media-toolbar-primary, .media-toolbar-secondary, .attachment-details, .attachment-info, .uploader-inline, .uploader-inline-content, .uploader-window, .drag-drop-area, .ui-dialog, .ui-widget-overlay, .mfp-wrap, .mfp-overlay { z-index: 1000000 !important; pointer-events: all !important; /* ↑ NO position override — WP uses absolute/relative internally for sizing */ } /* — Layer 3: All descendants must accept pointer events — */ .media-modal *, .media-frame *, .ui-dialog * { pointer-events: auto !important; } /* — Layer 4: Body class toggle — JS sets this while any media frame is open — */ body.bsp-media-open #bsp-app { pointer-events: none !important; /* Do NOT touch z-index here — we just kill pointer events. */ } /* — Layer 4a: Sidebar nav is always clickable, even during media open — */ body.bsp-media-open #bsp-app .bsp-sidebar { pointer-events: all !important; } body.bsp-media-open #bsp-app .bsp-sidebar * { pointer-events: all !important; } /* — Layer 5: Notifications must still appear ABOVE the media modal — */ .bsp-notifications { z-index: 1000010 !important; position: fixed !important; pointer-events: none !important; /* container is pass-through */ } .bsp-notification { pointer-events: all; } /* ══════════════════════════════════════════════════════════════════════════════ WP CHROME REMOVAL — full-screen immersive mode on Brand Studio pages ══════════════════════════════════════════════════════════════════════════════ */ /* Always hide left menu + resize content to fill full width */ #adminmenuwrap, #adminmenuback, #adminmenu { display: none !important; } /* Push content to fill the void left by the admin menu */ #wpcontent, #wpfooter { margin-left: 0 !important; } /* Remove WP top admin bar */ #wpadminbar { display: none !important; } /* Shift the page up since admin bar is gone */ html { margin-top: 0 !important; } body { margin-top: 0 !important; padding-top: 0 !important; } /* Remove WP content padding / wrapping chrome */ #wpbody-content { padding-bottom: 0 !important; } #wpbody { overflow: hidden; } #wpcontent { padding-left: 0 !important; } .wrap { margin: 0 !important; } /* ── Toggle button — slim peek-out tab on the left edge ─────────────────────*/ #bsp-adminmenu-toggle { position: fixed; top: 50%; left: 0; transform: translateY(-50%); z-index: 100000; width: 18px; height: 52px; background: var(--bsp-surface3); border: 1px solid var(--bsp-border2); border-left: none; border-radius: 0 10px 10px 0; color: var(--bsp-dim); cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; padding: 0; writing-mode: vertical-rl; letter-spacing: 1px; } #bsp-adminmenu-toggle:hover { background: var(--bsp-surface4); color: var(--bsp-text); width: 22px; } /* When menu is restored */ body.bsp-show-adminmenu #adminmenuwrap, body.bsp-show-adminmenu #adminmenuback, body.bsp-show-adminmenu #adminmenu { display: block !important; } body.bsp-show-adminmenu #wpcontent, body.bsp-show-adminmenu #wpfooter { margin-left: 160px !important; } body.bsp-show-adminmenu #wpadminbar { display: block !important; } body.bsp-show-adminmenu html, body.bsp-show-adminmenu body { margin-top: 32px !important; } body.bsp-show-adminmenu #bsp-adminmenu-toggle { left: 160px; border-radius: 0 8px 8px 0; } /* SIDEBAR */ .bsp-sidebar { width: var(--bsp-sidebar-w); height: 100vh; background: var(--bsp-surface); border-right: 1px solid var(--bsp-border); display: flex; flex-direction: column; flex-shrink: 0; position: sticky; top: 0; overflow-y: auto; } .bsp-sidebar-logo { padding: 24px 20px 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--bsp-border); } .bsp-logo-icon { color: var(--bsp-accent); font-size: 18px; } .bsp-logo-text { font-size: 15px; font-weight: 700; letter-spacing: 0.5px; color: var(--bsp-text); } .bsp-sidebar-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; } .bsp-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; border-radius: var(--bsp-radius-sm); background: transparent; color: var(--bsp-text-muted); cursor: pointer; font-size: 13px; font-weight: 500; text-align: left; transition: all 0.15s; } .bsp-nav-item:hover { background: var(--bsp-surface3); color: var(--bsp-text); } .bsp-nav-item.active { background: rgba(34,197,94,0.18); color: var(--bsp-accent2); box-shadow: inset 0 0 0 1px rgba(134,239,172,0.24); } .bsp-nav-icon { font-size: 14px; width: 18px; text-align: center; } .bsp-brand-list { flex: 1; padding: 8px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 0; min-height: 0; } .bsp-brand-list-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 6px 6px; font-size: 10px; letter-spacing: 1.5px; color: var(--bsp-text-dim); font-weight: 600; text-transform: uppercase; flex-shrink: 0; } .bsp-brand-list-search { width: 100%; padding: 6px 10px; margin-bottom: 6px; flex-shrink: 0; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-sm); color: var(--bsp-text); font-size: 12px; font-family: inherit; outline: none; transition: border-color 0.15s; } .bsp-brand-list-search::placeholder { color: var(--bsp-text-dim); } .bsp-brand-list-search:focus { border-color: var(--bsp-accent3); } .bsp-brand-sidebar-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--bsp-radius-sm); cursor: pointer; transition: all 0.15s; margin-bottom: 1px; border: 1px solid transparent; position: relative; } .bsp-brand-sidebar-item:hover { background: var(--bsp-surface3); } .bsp-brand-sidebar-item.active { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); box-shadow: inset 3px 0 0 var(--bsp-accent); } .bsp-brand-color-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .bsp-brand-sidebar-item.active .bsp-brand-color-dot { box-shadow: 0 0 6px currentColor; } .bsp-brand-sidebar-name { font-size: 13px; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── BRAND PICKERS (chip rows replacing dropdowns) ─────────────────────────── */ .bsp-brand-picker { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; min-height: 34px; align-items: center; } .bsp-brand-picker-sm { gap: 4px; } .bsp-brand-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 100px; border: 1px solid var(--bsp-border2); background: var(--bsp-surface2); color: var(--bsp-text-muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; white-space: nowrap; user-select: none; letter-spacing: 0.01em; } .bsp-brand-picker-sm .bsp-brand-chip { padding: 3px 9px 3px 6px; font-size: 11px; } .bsp-brand-chip:hover { background: var(--bsp-surface3); border-color: var(--bsp-accent3); color: var(--bsp-text); } .bsp-brand-chip.active { background: rgba(34,197,94,0.15); border-color: var(--bsp-accent); color: var(--bsp-accent2); box-shadow: 0 0 0 1px rgba(34,197,94,0.2), 0 2px 8px rgba(34,197,94,0.12); } .bsp-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 4px currentColor; } .bsp-chip-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsp-brand-picker-sm .bsp-chip-name { max-width: 90px; } .bsp-sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--bsp-border); } .bsp-settings-link { color: var(--bsp-text-muted); font-size: 12px; text-decoration: none; } .bsp-settings-link:hover { color: var(--bsp-text); } /* MAIN */ .bsp-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; height: 100vh; } /* TOPBAR */ .bsp-topbar { height: 60px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; background: var(--bsp-surface); border-bottom: 1px solid var(--bsp-border); flex-shrink: 0; } .bsp-topbar-left { display: flex; align-items: center; gap: 16px; } .bsp-active-brand-display { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; } .bsp-brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bsp-text-dim); display: block; } .bsp-topbar { position: relative; z-index: 120; } .bsp-topbar-right { display: flex; align-items: center; gap: 12px; position: relative; z-index: 121; pointer-events: all !important; } .bsp-topbar-right .bsp-btn, .bsp-topbar-left .bsp-btn { position: relative; z-index: 122; pointer-events: all !important; touch-action: manipulation; } #bsp-theme-toggle.is-light { background: linear-gradient(135deg, rgba(255,236,160,.75), rgba(255,214,96,.88)); color: #4b3306; border-color: rgba(182,121,0,.3); } #bsp-theme-toggle.is-dark { background: linear-gradient(135deg, rgba(19,30,55,.72), rgba(60,79,121,.78)); color: #ecf3ff; border-color: rgba(151,174,255,.2); } .bsp-api-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--bsp-text-muted); } .bsp-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bsp-success); } /* VIEWS */ .bsp-view { display: none; flex: 1; overflow-y: auto; padding: 28px; flex-direction: column; } .bsp-view.active { display: flex; } .bsp-view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-shrink: 0; } .bsp-view-header h2 { font-size: 22px; font-weight: 700; margin: 0; color: var(--bsp-text); } /* BRANDS GRID */ /* ── Brands Grid ──────────────────────────────────────────────────────────── */ .bsp-brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; align-items: start; } .bsp-brand-card { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-r-lg); overflow: hidden; cursor: pointer; transition: all 0.2s; position: relative; } .bsp-brand-card:hover { border-color: var(--bsp-border2); transform: translateY(-2px); box-shadow: var(--bsp-shadow); } .bsp-brand-card-header { height: 80px; position: relative; overflow: hidden; } .bsp-brand-card-gradient { position: absolute; inset: 0; } .bsp-brand-card-logo { position: absolute; bottom: -18px; left: 18px; width: 40px; height: 40px; border-radius: 9px; background: var(--bsp-surface2); border: 2px solid var(--bsp-border2); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 18px; } .bsp-brand-card-logo img { width: 100%; height: 100%; object-fit: cover; } .bsp-brand-card-body { padding: 26px 18px 14px; } .bsp-brand-card-name { font-size: 15px; font-weight: 700; margin-bottom: 3px; } .bsp-brand-card-desc { font-size: 11px; color: var(--bsp-muted); line-height: 1.4; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bsp-brand-card-colors { display: flex; gap: 4px; margin-bottom: 10px; } .bsp-brand-card-color { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.1); } .bsp-brand-card-stats { display: flex; gap: 10px; } .bsp-brand-stat { font-size: 10px; color: var(--bsp-dim); } .bsp-brand-stat strong { color: var(--bsp-text); display: block; font-size: 16px; font-family: 'DM Mono', monospace; } .bsp-brand-card-actions { padding: 10px 18px; border-top: 1px solid var(--bsp-border); display: flex; gap: 7px; } .bsp-brand-card-colors { display: flex; gap: 4px; margin-bottom: 12px; } .bsp-brand-card-color { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); } /* CANVAS */ /* ── Brand Windows ────────────────────────────────────────────────────────── */ #bsp-brand-windows { position: absolute; inset: 0; pointer-events: none; z-index: 100; } .bsp-brand-window { position: absolute; width: 340px; min-height: 220px; max-height: 78vh; background: var(--bsp-surface); border: 1px solid var(--bsp-border2); border-radius: var(--bsp-r-lg); box-shadow: var(--bsp-shadow); pointer-events: all; display: flex; flex-direction: column; overflow: hidden; animation: bsp-window-in 0.2s ease; resize: both; } @keyframes bsp-window-in { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} } .bsp-brand-window.minimized .bsp-brand-window-body { display: none; } .bsp-brand-window.minimized { min-height: 0; resize: none; } .bsp-brand-window-title { padding: 9px 12px; display: flex; align-items: center; gap: 8px; cursor: grab; user-select: none; border-bottom: 1px solid var(--bsp-border); flex-shrink: 0; } .bsp-brand-window-title:active { cursor: grabbing; } .bsp-window-brand-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .bsp-window-brand-name { font-size: 13px; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsp-window-actions { display: flex; gap: 4px; } .bsp-window-btn { width: 18px; height: 18px; border-radius: 50%; border: none; cursor: pointer; font-size: 9px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .bsp-window-btn-min { background: #FFD700; color: #000; } .bsp-window-btn-max { background: #00CC88; color: #000; } .bsp-window-btn-close { background: #FF4466; color: #fff; } .bsp-window-btn:hover { transform: scale(1.2); } .bsp-brand-window-body { flex: 1; overflow-y: auto; padding: 10px; min-height: 0; } .bsp-window-brand-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px; background: var(--bsp-surface3); border-radius: var(--bsp-r-sm); } .bsp-window-brand-logo { width: 32px; height: 32px; border-radius: 6px; background: var(--bsp-surface4); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .bsp-window-brand-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; } .bsp-window-brand-info { flex: 1; min-width: 0; } .bsp-window-brand-desc { font-size: 10px; color: var(--bsp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsp-window-cat-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; } .bsp-window-cat-tab { padding: 3px 8px; border-radius: 20px; font-size: 10px; font-weight: 600; cursor: pointer; border: 1px solid var(--bsp-border); background: var(--bsp-surface3); color: var(--bsp-muted); transition: all 0.15s; white-space: nowrap; } .bsp-window-cat-tab:hover { border-color: var(--bsp-border2); color: var(--bsp-text); } .bsp-window-cat-tab.active { color: white; border-color: transparent; } .bsp-window-asset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .bsp-window-asset-thumb { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--bsp-surface3); cursor: pointer; transition: all 0.15s; } .bsp-window-asset-thumb:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(0,0,0,0.4); } .bsp-window-asset-thumb img { width: 100%; height: 100%; object-fit: cover; } .bsp-window-empty { font-size: 11px; color: var(--bsp-dim); text-align: center; padding: 16px; } .bsp-window-footer { padding: 8px 10px; border-top: 1px solid var(--bsp-border); display: flex; gap: 6px; flex-shrink: 0; } .bsp-canvas-wrapper { position: relative; flex: 1; background: var(--bsp-surface2); border-radius: var(--bsp-radius-lg); border: 1px solid var(--bsp-border); overflow: hidden; min-height: 600px; } #bsp-node-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; } #bsp-node-canvas:active { cursor: grabbing; } .bsp-legend-item { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--bsp-text-muted); white-space: nowrap; } .bsp-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .bsp-canvas-tooltip { position: absolute; background: rgba(10,10,15,0.95); border: 1px solid var(--bsp-border-bright); border-radius: var(--bsp-radius-sm); padding: 8px 12px; font-size: 12px; pointer-events: none; display: none; z-index: 100; max-width: 200px; backdrop-filter: blur(10px); } .bsp-canvas-controls { display: flex; align-items: center; gap: 10px; } /* GENERATE VIEW */ .bsp-generate-layout { display: grid; grid-template-columns: 420px 1fr; gap: 24px; flex: 1; min-height: 0; overflow: hidden; } .bsp-gen-panel { overflow-y: auto; padding-right: 4px; } .bsp-gen-section { margin-bottom: 20px; } .bsp-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--bsp-text-muted); margin-bottom: 8px; } .bsp-size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .bsp-size-tile { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-sm); padding: 10px 6px; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .bsp-size-tile:hover { border-color: var(--bsp-accent); background: rgba(123,92,240,0.1); } .bsp-size-tile.active { border-color: var(--bsp-accent); background: rgba(123,92,240,0.2); box-shadow: 0 0 12px rgba(123,92,240,0.3); } .bsp-size-icon { font-size: 18px; } .bsp-size-label { font-size: 10px; font-weight: 600; color: var(--bsp-text); } .bsp-size-dim { font-size: 9px; color: var(--bsp-text-dim); font-family: 'DM Mono', monospace; } .bsp-btn-group { display: flex; gap: 6px; } .bsp-res-btn, .bsp-prompt-src-btn { flex: 1; padding: 8px 12px; border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-sm); background: var(--bsp-surface2); color: var(--bsp-text-muted); cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.15s; } .bsp-res-btn:hover, .bsp-prompt-src-btn:hover { border-color: var(--bsp-border-bright); color: var(--bsp-text); } .bsp-res-btn.active, .bsp-prompt-src-btn.active { border-color: var(--bsp-accent); background: rgba(123,92,240,0.2); color: var(--bsp-accent); } .bsp-prompt-panel { display: block; } .bsp-prompt-panel.hidden { display: none; } .bsp-prompt-library-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; } .bsp-prompt-lib-item { padding: 10px 12px; border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-sm); cursor: pointer; transition: all 0.15s; background: var(--bsp-surface2); } .bsp-prompt-lib-item:hover { border-color: var(--bsp-accent); background: rgba(123,92,240,0.1); } .bsp-prompt-lib-item.selected { border-color: var(--bsp-accent); background: rgba(123,92,240,0.2); } .bsp-prompt-lib-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; } .bsp-prompt-lib-text { font-size: 11px; color: var(--bsp-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bsp-random-info { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-sm); padding: 16px; text-align: center; } .bsp-random-info span { font-size: 28px; } .bsp-random-info p { font-size: 13px; color: var(--bsp-text-muted); margin: 8px 0 0; } .bsp-btn-generate { width: 100%; padding: 14px 24px; border: none; border-radius: var(--bsp-radius); background: linear-gradient(135deg, var(--bsp-accent), #9B79FF); color: white; cursor: pointer; font-size: 15px; font-weight: 700; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.2s; margin-top: 8px; box-shadow: 0 4px 20px rgba(123,92,240,0.4); } .bsp-btn-generate:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(123,92,240,0.5); } .bsp-btn-generate:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .bsp-gen-icon { font-size: 18px; } /* Preview area */ .bsp-gen-preview-panel { display: flex; flex-direction: column; gap: 20px; overflow-y: auto; } .bsp-preview-area { flex: 1; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-lg); min-height: 360px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .bsp-preview-empty { text-align: center; color: var(--bsp-text-muted); } .bsp-preview-empty-icon { font-size: 48px; opacity: 0.3; margin-bottom: 12px; } .bsp-preview-empty p { font-size: 14px; } .bsp-generating-state { text-align: center; } .bsp-spinner { width: 48px; height: 48px; border: 3px solid var(--bsp-border); border-top-color: var(--bsp-accent); border-radius: 50%; animation: bsp-spin 0.8s linear infinite; margin: 0 auto 16px; } @keyframes bsp-spin { to { transform: rotate(360deg); } } .bsp-gen-status-text { font-size: 14px; color: var(--bsp-text); margin-bottom: 4px; } .bsp-gen-task-id { font-size: 10px; color: var(--bsp-text-dim); font-family: 'DM Mono', monospace; } .bsp-preview-result { width: 100%; height: 100%; display: flex; flex-direction: column; } .bsp-preview-result img { flex: 1; object-fit: contain; width: 100%; max-height: 400px; } .bsp-result-actions { padding: 12px; display: flex; gap: 8px; border-top: 1px solid var(--bsp-border); flex-wrap: wrap; } .bsp-brand-refs-panel { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-lg); padding: 16px; } .bsp-brand-refs-panel h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--bsp-text-muted); margin: 0 0 12px; } .bsp-refs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; } .bsp-ref-slot { background: var(--bsp-surface3); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-sm); padding: 12px; display: flex; align-items: center; gap: 10px; } .bsp-ref-preview { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bsp-text-muted); } .bsp-ref-preview span { font-size: 20px; } .bsp-ref-preview img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; } .bsp-refs-note { font-size: 11px; color: var(--bsp-text-dim); margin: 0; } /* LIBRARY */ .bsp-library-controls { display: flex; gap: 10px; align-items: center; } .bsp-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; flex: 1; overflow-y: auto; align-content: start; } .bsp-asset-card { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius); overflow: hidden; cursor: pointer; transition: all 0.2s; position: relative; group: true; } .bsp-asset-card:hover { border-color: var(--bsp-border-bright); transform: translateY(-2px); box-shadow: var(--bsp-shadow); } .bsp-asset-img-wrap { aspect-ratio: 1; overflow: hidden; background: var(--bsp-surface3); position: relative; } .bsp-asset-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; } .bsp-asset-card:hover .bsp-asset-img-wrap img { transform: scale(1.05); } .bsp-asset-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; } .bsp-asset-card:hover .bsp-asset-overlay { opacity: 1; } .bsp-asset-card-info { padding: 10px 12px; } .bsp-asset-card-cat { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; } .bsp-asset-cat-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: white; } .bsp-asset-card-title { font-size: 12px; font-weight: 600; color: var(--bsp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsp-asset-card-date { font-size: 10px; color: var(--bsp-text-dim); } .bsp-asset-id-badge { font-size: 9px; font-weight: 700; letter-spacing: .4px; font-family: 'DM Mono', monospace; color: rgba(134,239,172,.65); background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.18); border-radius: 6px; padding: 1px 5px; cursor: default; white-space: nowrap; flex-shrink: 0; user-select: all; transition: background .2s, color .2s; } .bsp-asset-id-badge:hover { background: rgba(34,197,94,.15); color: #86efac; } /* ── Brand media refs badge on card ── */ .bsp-brand-media-refs { font-size: 10px; color: rgba(134,239,172,.6); letter-spacing: .3px; padding: 2px 6px; background: rgba(34,197,94,.06); border-radius: 6px; border: 1px solid rgba(34,197,94,.12); margin-top: 3px; display: inline-flex; gap: 6px; flex-wrap: wrap; } /* ── Todo voice bar ── */ .bsp-todo-voice-bar { display: flex; align-items: center; gap: 8px; background: rgba(34,197,94,.05); border: 1px solid rgba(34,197,94,.12); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; } .bsp-todo-voice-icon { font-size: 16px; flex-shrink: 0; } #bsp-todo-voice-input { min-width: 0; } .bsp-todo-voice-bar .bsp-btn { flex-shrink: 0; } /* ── Ref video slot in brand panel ── */ .bsp-ref-slot-video { display: flex; align-items: center; gap: 6px; background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.2); border-radius: 8px; padding: 6px 10px; font-size: 11px; } .bsp-ref-url-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bsp-text); } .bsp-ref-url-title { font-size: 10px; color: var(--bsp-muted); } .bsp-ref-url-remove { background: none; border: none; color: rgba(255,68,102,.6); cursor: pointer; font-size: 11px; padding: 0 2px; } .bsp-ref-url-remove:hover { color: var(--bsp-danger); } /* ── Brand media refs panel ── */ #bsp-brand-media-refs-section { border-top: 1px solid var(--bsp-border); padding-top: 10px; margin-top: 8px; } #bsp-brand-media-refs-section .bsp-refs-extra-header { margin-bottom: 4px; } /* Recording state for mic buttons */ .bsp-recording { animation: bsp-pulse-rec 0.8s ease-in-out infinite; } @keyframes bsp-pulse-rec { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); } 50% { box-shadow: 0 0 0 6px rgba(239,68,68,.0); } } #bsp-todo-voice-mic-btn.bsp-recording { color: #ef4444; border-color: rgba(239,68,68,.4); } .bsp-asset-delete-btn { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background: var(--bsp-danger); border: none; border-radius: 50%; color: white; font-size: 11px; cursor: pointer; opacity: 0; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; } .bsp-asset-card:hover .bsp-asset-delete-btn { opacity: 1; } /* HISTORY */ .bsp-history-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; } .bsp-history-item { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius); padding: 14px 18px; display: grid; grid-template-columns: 60px 1fr auto; gap: 16px; align-items: center; } .bsp-hist-thumb { width: 60px; height: 60px; border-radius: var(--bsp-radius-sm); object-fit: cover; background: var(--bsp-surface3); } .bsp-hist-thumb-empty { width: 60px; height: 60px; border-radius: var(--bsp-radius-sm); background: var(--bsp-surface3); display: flex; align-items: center; justify-content: center; font-size: 20px; } .bsp-hist-info { min-width: 0; } .bsp-hist-prompt { font-size: 13px; color: var(--bsp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; } .bsp-hist-meta { font-size: 11px; color: var(--bsp-text-muted); } .bsp-hist-status { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; } .bsp-hist-status.pending { background: rgba(255,200,0,0.15); color: #FFD700; } .bsp-hist-status.processing { background: rgba(123,92,240,0.2); color: var(--bsp-accent); } .bsp-hist-status.success { background: rgba(0,204,136,0.2); color: var(--bsp-success); } .bsp-hist-status.failed { background: rgba(255,68,102,0.2); color: var(--bsp-danger); } /* BUTTONS */ .bsp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--bsp-radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all 0.15s; text-decoration: none; white-space: nowrap; } .bsp-btn-primary { background: var(--bsp-accent); color: white; border-color: var(--bsp-accent); } .bsp-btn-primary:hover { background: #8B6CFF; box-shadow: 0 0 20px rgba(123,92,240,0.4); color: white; } .bsp-btn-outline { background: transparent; color: var(--bsp-text); border-color: var(--bsp-border-bright); } .bsp-btn-outline:hover { background: var(--bsp-surface3); color: var(--bsp-text); } .bsp-btn-ghost { background: transparent; color: var(--bsp-text-muted); border-color: transparent; } .bsp-btn-ghost:hover { color: var(--bsp-text); background: var(--bsp-surface3); } .bsp-btn-danger { background: rgba(255,68,102,0.15); color: var(--bsp-danger); border-color: rgba(255,68,102,0.3); } .bsp-btn-danger:hover { background: var(--bsp-danger); color: white; } .bsp-btn-sm { padding: 5px 10px; font-size: 11px; } .bsp-btn-icon { background: none; border: none; cursor: pointer; color: var(--bsp-text-muted); font-size: 18px; padding: 2px 6px; } .bsp-btn-icon:hover { color: var(--bsp-text); } /* INPUTS */ .bsp-input, .bsp-select, .bsp-textarea { background: var(--bsp-surface3); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-sm); color: var(--bsp-text); padding: 9px 12px; font-size: 13px; width: 100%; font-family: 'Space Grotesk', sans-serif; transition: border-color 0.15s; outline: none; } .bsp-input:focus, .bsp-select:focus, .bsp-textarea:focus { border-color: var(--bsp-accent); } .bsp-select option { background: var(--bsp-surface2); } .bsp-select { position: relative; z-index: 30; pointer-events: all !important; -webkit-appearance: menulist; appearance: menulist; } #bsp-gen-brand, #bsp-lib-brand, #bsp-hist-brand, #bsp-canvas-brand-select, #bsp-import-brand, #bsp-email-brand, #bsp-play-brand, #bsp-docs-brand, #bsp-doc-brand-select { position: relative !important; z-index: 130 !important; pointer-events: all !important; touch-action: manipulation; } .bsp-textarea { resize: vertical; } .bsp-color-input { width: 100%; } /* MODALS */ .bsp-modal-overlay { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; } .bsp-modal-overlay.hidden { display: none; } .bsp-modal { background: var(--bsp-surface); border: 1px solid var(--bsp-border-bright); border-radius: var(--bsp-radius-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 80px rgba(0,0,0,0.6); animation: bsp-modal-in 0.2s ease; overscroll-behavior: contain; } .bsp-modal-lg { max-width: 700px; } .bsp-modal-xl { max-width: 900px; } @keyframes bsp-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .bsp-modal-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--bsp-border); display: flex; justify-content: space-between; align-items: center; } .bsp-modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; } .bsp-modal-close { background: none; border: none; color: var(--bsp-text-muted); font-size: 16px; cursor: pointer; padding: 4px; } .bsp-modal-close:hover { color: var(--bsp-text); } .bsp-modal-body { padding: 20px 24px; } .bsp-modal-footer { padding: 16px 24px; border-top: 1px solid var(--bsp-border); display: flex; justify-content: flex-end; gap: 10px; } .bsp-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .bsp-color-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; } .bsp-form-group { margin-bottom: 14px; } .bsp-form-group label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--bsp-text-muted); margin-bottom: 6px; } .bsp-media-picker { display: flex; flex-direction: column; gap: 8px; } .bsp-media-preview { width: 100%; height: 80px; background: var(--bsp-surface3); border: 1px dashed var(--bsp-border); border-radius: var(--bsp-radius-sm); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--bsp-text-muted); } .bsp-media-preview span { font-size: 24px; } .bsp-media-preview img { max-height: 70px; max-width: 100%; object-fit: contain; } .bsp-url-picker { display: flex; gap: 8px; } .bsp-url-picker .bsp-input { flex: 1; } /* Asset detail */ .bsp-asset-detail-body { display: grid; grid-template-columns: 1fr 280px; gap: 20px; } .bsp-asset-detail-img img { width: 100%; border-radius: var(--bsp-radius); max-height: 500px; object-fit: contain; background: var(--bsp-surface3); } .bsp-asset-detail-info { display: flex; flex-direction: column; gap: 16px; } .bsp-asset-meta { display: flex; flex-wrap: wrap; gap: 8px; } .bsp-asset-meta-tag { padding: 4px 10px; background: var(--bsp-surface3); border-radius: 20px; font-size: 11px; color: var(--bsp-text-muted); } .bsp-asset-prompt-box label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--bsp-text-muted); margin-bottom: 6px; } .bsp-asset-prompt-box p { font-size: 13px; color: var(--bsp-text); line-height: 1.5; } .bsp-asset-detail-actions { display: flex; gap: 8px; margin-top: auto; } /* NOTIFICATIONS */ .bsp-notifications { position: fixed; top: 40px; right: 16px; z-index: 999999; display: flex; flex-direction: column; gap: 8px; } .bsp-notification { padding: 12px 18px; border-radius: var(--bsp-radius-sm); font-size: 13px; font-weight: 600; color: white; min-width: 240px; animation: bsp-notif-in 0.25s ease; box-shadow: var(--bsp-shadow); } @keyframes bsp-notif-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .bsp-notification.success { background: var(--bsp-success); } .bsp-notification.error { background: var(--bsp-danger); } .bsp-notification.info { background: var(--bsp-accent); } /* UTILITIES */ .hidden { display: none !important; } .bsp-empty-state { padding: 60px 20px; text-align: center; color: var(--bsp-text-muted); } .bsp-empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; } .bsp-empty-state p { font-size: 14px; } /* SCROLLBAR */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bsp-scrollbar-thumb); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--bsp-scrollbar-thumb-hover); } /* WP color picker override */ .wp-picker-container input.wp-color-picker { background: var(--bsp-surface3) !important; border-color: var(--bsp-border) !important; color: var(--bsp-text) !important; } /* ─── VOICE BUTTON (topbar) ─────────────────────────────────────────────────── */ .bsp-btn-voice { background: linear-gradient(135deg, #7B5CF0, #5B3FD0); color: white; border: none; padding: 8px 16px; border-radius: var(--bsp-radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; } .bsp-btn-voice:hover { filter: brightness(1.15); transform: translateY(-1px); } .bsp-btn-voice.active { background: linear-gradient(135deg, #FF4081, #E91E8C); box-shadow: 0 0 16px rgba(255,64,129,0.5); animation: bsp-voice-pulse 1.5s ease-in-out infinite; } @keyframes bsp-voice-pulse { 0%, 100% { box-shadow: 0 0 12px rgba(255,64,129,0.4); } 50% { box-shadow: 0 0 24px rgba(255,64,129,0.8); } } /* ─── VOICE PANEL ────────────────────────────────────────────────────────────── */ .bsp-voice-panel { position: fixed; bottom: 24px; right: 24px; width: 410px; max-height: calc(100vh - 48px); /* prevent panel from extending off-screen */ background: var(--bsp-surface); border: 1px solid rgba(123,92,240,0.4); border-radius: var(--bsp-radius-lg); box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(123,92,240,0.2); z-index: 99999; overflow-y: auto; /* scroll instead of clip — action buttons were hidden by overflow:hidden */ overflow-x: hidden; display: flex; flex-direction: column; } .bsp-voice-panel.hidden { display: none; } #bsp-voice-standalone-root { position: fixed !important; right: 24px !important; bottom: 90px !important; z-index: 2147483000 !important; display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: none !important; width: min(280px, calc(100vw - 32px)); min-height: 72px; transition: transform .18s ease, opacity .18s ease; } .bsp-voice-widget-shell { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 8px 10px 8px 8px; border-radius: 28px; background: linear-gradient(145deg, rgba(15,18,35,0.95), rgba(33,22,58,0.9)); box-shadow: 0 18px 48px rgba(8, 10, 26, 0.42), 0 0 0 1px rgba(255,255,255,0.08); backdrop-filter: blur(16px); pointer-events: auto !important; overflow: hidden; } #bsp-voice-standalone-root.is-live .bsp-voice-widget-shell { background: linear-gradient(145deg, rgba(46,14,53,0.96), rgba(23,20,48,0.94)); box-shadow: 0 22px 54px rgba(52, 10, 42, 0.42), 0 0 0 1px rgba(255,255,255,0.12); } .bsp-voice-standalone-btn { position: relative; flex: 0 0 56px; width: 56px; height: 56px; border: none; border-radius: 999px; background: linear-gradient(135deg, #7B5CF0, #5B3FD0); box-shadow: 0 10px 28px rgba(91,63,208,0.42), 0 0 0 1px rgba(255,255,255,0.14); color: #fff; display: flex; visibility: visible !important; opacity: 1 !important; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent; user-select: none; transform: translateZ(0); transition: transform .15s ease, box-shadow .15s ease, background .2s ease; } .bsp-voice-standalone-btn:hover { transform: scale(1.06) translateZ(0); } .bsp-voice-standalone-btn.active { background: linear-gradient(135deg, #FF4081, #E91E8C); box-shadow: 0 10px 28px rgba(233,30,140,0.42), 0 0 0 1px rgba(255,255,255,0.18); } /* Voice running in background (panel closed, session still live) */ .bsp-voice-standalone-btn.voice-minimized { background: linear-gradient(135deg, #FF4081, #E91E8C); box-shadow: 0 10px 28px rgba(233,30,140,0.42), 0 0 0 3px rgba(255,64,129,0.35); animation: bsp-voice-minimized-pulse 2s ease-in-out infinite; } @keyframes bsp-voice-minimized-pulse { 0%,100% { box-shadow: 0 10px 28px rgba(233,30,140,0.42), 0 0 0 3px rgba(255,64,129,0.35); } 50% { box-shadow: 0 10px 28px rgba(233,30,140,0.55), 0 0 0 7px rgba(255,64,129,0.15); } } .bsp-voice-widget-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; padding-right: 4px; pointer-events: none !important; } .bsp-voice-widget-title { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: #f6f4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-voice-widget-state { font-size: 11px; line-height: 1.3; color: rgba(242, 236, 255, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-voice-widget-stop { display: none; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,112,112,.34); background: linear-gradient(180deg, rgba(255,93,129,0.26), rgba(134,24,53,0.38)); color: #ffd7df; font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; cursor: pointer; pointer-events: auto !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); transition: transform .15s ease, background .15s ease, border-color .15s ease; } .bsp-voice-widget-stop:hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(255,108,140,0.32), rgba(134,24,53,0.45)); border-color: rgba(255,132,132,.48); } /* Small "live" badge that appears on the floating button when panel is minimized */ .bsp-voice-bg-badge { position: absolute; top: 5px; left: 47px; width: 14px; height: 14px; border-radius: 50%; background: #22c55e; border: 2px solid #1a1a2e; animation: bsp-badge-blink 1.6s ease infinite; pointer-events: none; z-index: 10; } @keyframes bsp-badge-blink { 0%,100%{opacity:1} 50%{opacity:0.3} } .bsp-voice-standalone-ring { position: absolute; inset: -6px; border-radius: 999px; border: 2px solid rgba(123,92,240,0.35); pointer-events: none; animation: bsp-ring-pulse 2s ease-in-out infinite; } .bsp-voice-standalone-btn.active .bsp-voice-standalone-ring { border-color: rgba(255,64,129,0.45); } .bsp-voice-standalone-icon { position: relative; z-index: 1; font-size: 24px; line-height: 1; pointer-events: none; } @media (max-width: 640px) { #bsp-voice-standalone-root { right: 12px !important; bottom: 84px !important; width: min(240px, calc(100vw - 24px)); } .bsp-voice-widget-shell { gap: 10px; min-height: 68px; padding: 8px; } .bsp-voice-standalone-btn { flex-basis: 52px; width: 52px; height: 52px; } .bsp-voice-widget-title { font-size: 12px; } .bsp-voice-widget-state { font-size: 10px; } .bsp-voice-widget-stop { min-height: 36px; padding: 0 12px; } } .bsp-voice-handle { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: linear-gradient(135deg, rgba(123,92,240,0.3), rgba(91,63,208,0.2)); cursor: grab; user-select: none; border-bottom: 1px solid var(--bsp-border); font-size: 13px; font-weight: 600; color: var(--bsp-text); } .bsp-voice-handle:active { cursor: grabbing; } .bsp-voice-close { background: none; border: none; color: var(--bsp-text-muted); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; line-height: 1; transition: color 0.15s; } .bsp-voice-close:hover { color: var(--bsp-danger); } .bsp-voice-status { padding: 10px 16px; font-size: 12px; color: var(--bsp-text-muted); text-align: center; border-bottom: 1px solid var(--bsp-border); min-height: 36px; display: flex; align-items: center; justify-content: center; } .bsp-voice-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--bsp-border); } .bsp-voice-agent-meta { display: flex; flex-direction: column; gap: 8px; min-width: 180px; } .bsp-voice-session-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--bsp-border); background: rgba(255,255,255,0.02); } .bsp-voice-session-stat { padding: 8px 10px; border-radius: 10px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); display: flex; flex-direction: column; gap: 3px; } .bsp-voice-session-stat span { font-size: 10px; color: var(--bsp-text-dim); text-transform: uppercase; letter-spacing: .06em; } .bsp-voice-session-stat strong { font-size: 12px; color: var(--bsp-text); line-height: 1.2; } .bsp-voice-runtime { padding: 12px 14px; border-bottom: 1px solid var(--bsp-border); display: flex; flex-direction: column; gap: 8px; } .bsp-voice-runtime textarea { min-height: 94px; resize: vertical; } .bsp-voice-command-count { font-size: 11px; color: var(--bsp-text-dim); } .bsp-voice-utility-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--bsp-border); } .bsp-voice-utility-row .bsp-btn { flex: 1 1 120px; } .bsp-voice-mic-btn { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #7B5CF0, #5B3FD0); border: none; color: white; font-size: 22px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(123,92,240,0.4); } .bsp-voice-mic-btn:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(123,92,240,0.6); } .bsp-voice-mic-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .bsp-voice-mic-btn.active { background: linear-gradient(135deg, #FF4081, #E91E8C); box-shadow: 0 4px 16px rgba(255,64,129,0.5); animation: bsp-voice-pulse 1.5s ease-in-out infinite; } .bsp-voice-transcript { max-height: 160px; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; border-bottom: 1px solid var(--bsp-border); min-height: 40px; } .bsp-voice-tool-feed { max-height: 150px; overflow-y: auto; padding: 10px 14px; border-bottom: 1px solid var(--bsp-border); background: rgba(255,255,255,0.02); display: flex; flex-direction: column; gap: 8px; } .bsp-voice-tool-feed-empty { font-size: 11px; color: var(--bsp-text-dim); } .bsp-voice-tool-item { padding: 8px 10px; border-radius: 10px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); } .bsp-voice-tool-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .bsp-voice-tool-name { font-size: 11px; font-weight: 700; color: var(--bsp-text); text-transform: uppercase; letter-spacing: .06em; } .bsp-voice-tool-state { font-size: 10px; color: var(--bsp-accent2); } .bsp-voice-tool-body { font-size: 11px; color: var(--bsp-text-muted); line-height: 1.45; } .bsp-voice-command-bank { padding: 10px 12px 6px; border-bottom: 1px solid var(--bsp-border); } .bsp-voice-command-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; max-height: 190px; overflow-y: auto; } .bsp-voice-command-chip { text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bsp-border); background: var(--bsp-surface3); color: var(--bsp-text); font-size: 11px; cursor: pointer; } .bsp-voice-command-chip:hover { border-color: var(--bsp-border-bright); transform: translateY(-1px); } .bsp-voice-msg { padding: 6px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4; max-width: 90%; } .bsp-voice-msg.user { background: rgba(123,92,240,0.2); color: var(--bsp-text); align-self: flex-end; border-bottom-right-radius: 2px; } .bsp-voice-msg.ai { background: var(--bsp-surface2); color: var(--bsp-text-muted); align-self: flex-start; border-bottom-left-radius: 2px; } .bsp-voice-hints { padding: 10px 14px 14px; font-size: 11px; color: var(--bsp-text-dim); } .bsp-voice-hints strong { color: var(--bsp-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .bsp-voice-hints ul { margin: 6px 0 0 0; padding: 0 0 0 14px; list-style: disc; } .bsp-voice-hints li { margin: 3px 0; } /* ─── VOICE QUICK-ACTION BUTTONS ────────────────────────────────────────────── */ .bsp-voice-actions { padding: 10px 12px 14px; border-top: 1px solid var(--bsp-border); } .bsp-va-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bsp-muted); margin-bottom: 8px; } .bsp-va-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .bsp-va-btn { background: var(--bsp-surface3); border: 1px solid var(--bsp-border); border-radius: 8px; padding: 8px 4px; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--bsp-muted); font-family: inherit; transition: all 0.15s; text-align: center; line-height: 1.3; } .bsp-va-btn:hover { background: rgba(123,92,240,0.15); border-color: var(--bsp-accent); color: #B8A0FF; transform: translateY(-1px); } .bsp-va-btn:active { transform: scale(0.96); } .bsp-va-btn-nav { background: var(--bsp-surface2); color: var(--bsp-dim); } .bsp-va-btn-nav:hover { background: rgba(0,245,200,0.1); border-color: var(--bsp-accent2); color: var(--bsp-accent2); } @media (max-width: 860px) { .bsp-voice-session-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ─── BRANDS TOOLBAR ─────────────────────────────────────────────────────────── */ .bsp-brands-toolbar { display: flex; align-items: center; gap: 10px; } .bsp-search-input { width: 200px; height: 36px; padding: 6px 12px; font-size: 13px; } .bsp-sort-select { width: 140px; height: 36px; font-size: 12px; } .bsp-view-count { font-size: 13px; font-weight: 400; color: var(--bsp-text-muted); margin-left: 8px; } /* Brand card: canvas + gen quick-action buttons */ .bsp-brand-card-actions { flex-wrap: wrap; gap: 6px; } /* ─── GENERATE VIEW EXTRAS ───────────────────────────────────────────────────── */ .bsp-prompt-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .bsp-category-hint { font-size: 11px; color: var(--bsp-accent2); font-weight: 500; } .bsp-prompt-toolbar-btns { display: flex; gap: 4px; } .bsp-prompt-footer { display: flex; justify-content: flex-end; margin-top: 4px; } .bsp-char-count { font-size: 10px; color: var(--bsp-text-dim); font-family: 'DM Mono', monospace; } .bsp-char-count.bsp-over-limit { color: var(--bsp-danger); } /* ─── LIBRARY MULTI-SELECT ───────────────────────────────────────────────────── */ .bsp-lib-select-btn.active { background: rgba(123,92,240,0.2); color: var(--bsp-accent); border-color: var(--bsp-accent); } .bsp-asset-select-check { position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.6); border: 2px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; font-weight: 700; transition: all 0.15s; } .bsp-asset-select-check.checked { background: var(--bsp-accent); border-color: var(--bsp-accent); color: white; } .bsp-asset-card.selected { border-color: var(--bsp-accent); box-shadow: 0 0 0 2px rgba(123,92,240,0.4); } /* ─── HISTORY EXTRAS ─────────────────────────────────────────────────────────── */ .bsp-hist-controls { display: flex; gap: 10px; align-items: center; } .bsp-hist-thumb-wrap { width: 60px; height: 60px; flex-shrink: 0; } .bsp-hist-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .bsp-hist-cat-badge { display: inline-block; padding: 2px 7px; border-radius: 8px; font-size: 9px; font-weight: 700; text-transform: uppercase; color: white; margin-right: 6px; } .bsp-hist-reuse-btn { white-space: nowrap; } .bsp-history-item { cursor: default; } .bsp-history-item:hover { border-color: var(--bsp-border-bright); } /* ─── CANVAS CONTEXT MENU ────────────────────────────────────────────────────── */ .bsp-ctx-menu { background: var(--bsp-surface); border: 1px solid var(--bsp-border-bright); border-radius: var(--bsp-radius-sm); padding: 4px; min-width: 180px; z-index: 999999; box-shadow: 0 8px 32px rgba(0,0,0,0.5); animation: bsp-modal-in 0.12s ease; } .bsp-ctx-item { display: block; width: 100%; padding: 8px 14px; border: none; background: transparent; color: var(--bsp-text); font-size: 13px; font-family: 'Space Grotesk', sans-serif; text-align: left; cursor: pointer; border-radius: 6px; transition: background 0.1s; } .bsp-ctx-item:hover { background: var(--bsp-surface3); color: var(--bsp-accent); } /* ─── CANVAS EXTRAS ──────────────────────────────────────────────────────────── */ /* Canvas search input in topbar controls */ .bsp-canvas-search-input { width: 160px; height: 32px; padding: 5px 10px; font-size: 12px; } .bsp-canvas-search-input:focus { border-color: var(--bsp-accent); } /* Zoom button group */ .bsp-canvas-zoom-btns { display: flex; align-items: center; gap: 4px; } .bsp-canvas-zoom-display { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--bsp-text-muted); min-width: 36px; text-align: center; } /* Mini-map */ .bsp-minimap { display: none !important; } .bsp-canvas-hint { display: none !important; } /* Stats bar below canvas */ .bsp-canvas-stats { padding: 10px 16px; background: var(--bsp-surface); border-top: 1px solid var(--bsp-border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; flex-shrink: 0; } .bsp-canvas-stat-total { color: var(--bsp-text-muted); margin-right: 6px; } .bsp-canvas-stat-total strong { color: var(--bsp-text); } .bsp-canvas-stat-pill { padding: 3px 10px; border-radius: 10px; background: var(--bsp-surface3); border: 1px solid var(--bsp-border); font-size: 11px; color: var(--bsp-text-muted); } .bsp-canvas-stat-pill strong { color: var(--bsp-text); } .bsp-canvas-stat-empty { color: var(--bsp-text-dim); font-size: 12px; } /* ─── TOPBAR BUTTONS (email + features) ─────────────────────────────────────── */ .bsp-btn-email { background: linear-gradient(135deg, #22C55E, #16A34A); color: #F3FFF7; border: 1px solid rgba(134,239,172,.35); padding: 8px 16px; border-radius: var(--bsp-radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; text-shadow: 0 1px 0 rgba(0,0,0,.25); } .bsp-btn-email:hover { filter: brightness(1.15); transform: translateY(-1px); } .bsp-btn-features { background: linear-gradient(135deg, #BEF264, #84CC16); color: #041108; border: 1px solid rgba(217,249,157,.4); padding: 8px 16px; border-radius: var(--bsp-radius-sm); font-size: 13px; font-weight: 800; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; } .bsp-btn-features:hover { filter: brightness(1.15); transform: translateY(-1px); } /* ─── BRAND CARD EXTRAS ──────────────────────────────────────────────────────── */ .bsp-brand-card-tagline { font-size: 11px; color: var(--bsp-accent2); font-style: italic; margin-bottom: 6px; opacity: 0.9; } .bsp-brand-card-industry { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; background: rgba(123,92,240,0.2); color: var(--bsp-accent); margin-bottom: 8px; } .bsp-brand-card-social { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; } .bsp-social-tag { font-size: 10px; padding: 2px 7px; border-radius: 8px; background: var(--bsp-surface3); color: var(--bsp-text-muted); border: 1px solid var(--bsp-border); } .bsp-brand-card-website { font-size: 11px; color: var(--bsp-accent2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; margin-bottom: 6px; } .bsp-brand-card-website:hover { text-decoration: underline; } .bsp-color-preview { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-bottom: 10px; } .bsp-color-preview-swatch { flex: 1; } /* ─── BRAND MODAL TABS ───────────────────────────────────────────────────────── */ .bsp-tab-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--bsp-border); margin-bottom: 20px; padding-bottom: 0; flex-wrap: wrap; } .bsp-tab-btn { padding: 8px 14px; border: none; background: transparent; color: var(--bsp-text-muted); font-size: 12px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; border-radius: 4px 4px 0 0; } .bsp-tab-btn:hover { color: var(--bsp-text); background: var(--bsp-surface3); } .bsp-tab-btn.active { color: var(--bsp-accent); border-bottom-color: var(--bsp-accent); background: transparent; } .bsp-tab-pane { display: none; } .bsp-tab-pane.active { display: block; } /* 2-column grid for modal forms */ .bsp-span2 { grid-column: span 2; } /* ─── SOCIAL HANDLES GRID ────────────────────────────────────────────────────── */ .bsp-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } /* ─── COLOR SWATCH PREVIEW IN MODAL ─────────────────────────────────────────── */ .bsp-color-swatch-preview { width: 100%; height: 32px; border-radius: var(--bsp-radius-sm); border: 1px solid var(--bsp-border); margin-top: 6px; display: flex; overflow: hidden; } .bsp-color-swatch-preview span { flex: 1; } /* ─── FEATURES MODAL ─────────────────────────────────────────────────────────── */ #bsp-features-modal .bsp-modal { max-width: 1080px; } .bsp-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; } .bsp-feature-card { background: linear-gradient(180deg, rgba(14,32,21,.98), rgba(7,17,13,.98)); border: 1px solid rgba(134,239,172,.16); border-radius: var(--bsp-radius); padding: 18px 16px; text-align: center; transition: all 0.2s; } .bsp-feature-card:hover { border-color: rgba(134,239,172,.38); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(10,20,14,.38); } .bsp-feature-icon { font-size: 28px; margin-bottom: 10px; filter: drop-shadow(0 0 10px rgba(134,239,172,.2)); } .bsp-feature-card h4 { color: #c8ffd8; font-size: 14px; margin-bottom: 8px; } .bsp-feature-card p { color: #8cc59d; line-height: 1.55; } .bsp-feature-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; } .bsp-feature-desc { font-size: 11px; color: var(--bsp-text-muted); line-height: 1.5; } .bsp-feature-cta-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 8px; } .bsp-import-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .bsp-import-hub-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; border: 1px solid var(--bsp-border); background: linear-gradient(180deg, rgba(14,32,21,.96), rgba(7,17,13,.96)); box-shadow: 0 10px 28px rgba(0,0,0,.18); } #bsp-app.bsp-theme-light .bsp-import-hub-card { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,246,241,.98)); box-shadow: 0 10px 24px rgba(30,64,46,.08); } .bsp-import-hub-card h4 { margin: 0; font-size: 15px; } .bsp-import-hub-card p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--bsp-text-muted); } .bsp-import-hub-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(123,92,240,.14); border: 1px solid rgba(123,92,240,.24); font-size: 20px; } .bsp-import-hub-actions, .bsp-import-hub-stack { display: flex; flex-wrap: wrap; gap: 8px; } .bsp-import-hub-actions .bsp-input, .bsp-import-hub-actions .bsp-btn, .bsp-import-hub-stack .bsp-btn { flex: 1 1 180px; } .bsp-import-hub-note { margin-top: 16px; font-size: 12px; color: var(--bsp-text-muted); } @media (max-width: 820px) { .bsp-import-hub-grid { grid-template-columns: 1fr; } } .bsp-features-voice-section h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bsp-text-muted); margin: 0 0 14px; } .bsp-voice-cmds-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .bsp-voice-cmd { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-sm); padding: 10px 14px; } .bsp-voice-cmd code { display: block; font-size: 12px; font-family: 'DM Mono', monospace; color: var(--bsp-accent2); margin-bottom: 4px; } .bsp-voice-cmd span { font-size: 11px; color: var(--bsp-text-muted); } /* ─── EMAIL PANEL ────────────────────────────────────────────────────────────── */ .bsp-email-panel { position: fixed; bottom: 24px; left: 24px; width: 360px; max-height: 86vh; background: linear-gradient(180deg, rgba(7,17,13,.98), rgba(4,10,7,.98)); border: 1px solid rgba(134,239,172,0.3); border-radius: var(--bsp-radius-lg); z-index: 100080; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,0.65), 0 0 0 1px rgba(134,239,172,0.12); pointer-events: all !important; } .bsp-email-panel.hidden { display: none; } .bsp-email-handle { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: grab; user-select: none; flex-shrink: 0; touch-action: none; background: linear-gradient(135deg, rgba(34,197,94,0.22), rgba(16,185,129,0.12)); border-bottom: 1px solid var(--bsp-border); font-size: 13px; font-weight: 600; pointer-events: all !important; } .bsp-email-handle:active { cursor: grabbing; } .bsp-email-handle-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; pointer-events: all !important; touch-action: manipulation; } .bsp-email-handle-btns > * { pointer-events: all !important; touch-action: manipulation; } .bsp-email-handle-title { display: flex; align-items: center; gap: 8px; color: var(--bsp-text); } .bsp-email-close { background: none; border: none; color: var(--bsp-text-muted); cursor: pointer; font-size: 14px; padding: 2px 6px; border-radius: 4px; transition: color 0.15s; } .bsp-email-close:hover { color: var(--bsp-danger); } .bsp-email-close-btn, #bsp-email-close-btn, #bsp-email-minimize { position: relative; z-index: 3; pointer-events: all !important; touch-action: manipulation; } .bsp-email-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .bsp-email-field { display: flex; flex-direction: column; gap: 4px; } .bsp-email-field label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bsp-text-muted); } .bsp-email-spell-result { background: var(--bsp-surface3); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-sm); padding: 10px 12px; font-size: 12px; line-height: 1.8; display: none; min-height: 40px; } .bsp-email-spell-result.visible { display: block; } .bsp-email-letter { font-family: 'DM Mono', monospace; font-weight: 700; color: var(--bsp-text); } .bsp-email-special { font-style: italic; color: var(--bsp-accent2); font-weight: 600; } .bsp-email-text-area { resize: none; min-height: 80px; font-size: 12px; } .bsp-email-actions { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--bsp-border); flex-wrap: wrap; } .bsp-email-actions .bsp-btn { font-size: 11px; padding: 6px 12px; flex: 1; justify-content: center; } .bsp-btn-spell { background: rgba(0,212,170,0.2); color: var(--bsp-accent2); border: 1px solid rgba(0,212,170,0.4); } .bsp-btn-spell:hover { background: rgba(0,212,170,0.35); color: white; border-color: var(--bsp-accent2); } /* ═══════════════════════════════════════════════════════════════════════════ BRAND STUDIO PRO v3 — ADDITIONAL STYLES ═══════════════════════════════════════════════════════════════════════════ */ /* ─── SIDEBAR v3 ──────────────────────────────────────────────────────────── */ .bsp-logo-version { font-size: 9px; font-weight: 700; background: var(--bsp-accent); color: white; padding: 2px 5px; border-radius: 4px; margin-left: auto; letter-spacing: 0.5px; } .bsp-sidebar-footer { display: flex; flex-direction: column; gap: 6px; } /* ─── CATEGORY GROUP TABS ─────────────────────────────────────────────────── */ .bsp-cat-group-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; } .bsp-cat-group-tab { padding: 6px 10px; border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-sm); background: var(--bsp-surface2); color: var(--bsp-text-muted); font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: 'Space Grotesk', sans-serif; } .bsp-cat-group-tab:hover { border-color: var(--bsp-border-bright); color: var(--bsp-text); } .bsp-cat-group-tab.active { border-color: var(--bsp-accent); background: rgba(123,92,240,0.2); color: var(--bsp-accent); } .bsp-cat-group-panel { display: none; } .bsp-cat-group-panel.active { display: grid; } .bsp-mb8 { margin-bottom: 8px; } .bsp-hint-text { font-size: 11px; color: var(--bsp-text-muted); margin-top: 6px; line-height: 1.5; } /* ─── VIEW SUBHEAD ────────────────────────────────────────────────────────── */ .bsp-view-subhead { font-size: 13px; color: var(--bsp-text-muted); margin: -16px 0 0; } /* ─── MULTI-BRAND FUSION ──────────────────────────────────────────────────── */ .bsp-fusion-brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 10px; margin-bottom: 12px; } .bsp-fusion-brand-card { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius); padding: 12px 14px; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 10px; } .bsp-fusion-brand-card:hover { border-color: var(--bsp-border-bright); } .bsp-fusion-brand-card.selected { border-color: var(--bsp-accent); background: rgba(123,92,240,0.15); box-shadow: 0 0 12px rgba(123,92,240,0.25); } .bsp-fusion-brand-card .bsp-brand-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .bsp-fusion-brand-name { font-size: 13px; font-weight: 600; } .bsp-fusion-brand-count { font-size: 10px; color: var(--bsp-text-dim); } .bsp-fusion-brand-check { margin-left: auto; font-size: 14px; color: var(--bsp-accent); display: none; } .bsp-fusion-brand-card.selected .bsp-fusion-brand-check { display: block; } .bsp-fusion-selected-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; min-height: 28px; } .bsp-fusion-selected-tag { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; background: rgba(123,92,240,0.2); border: 1px solid rgba(123,92,240,0.4); font-size: 11px; font-weight: 600; color: var(--bsp-accent); } .bsp-fusion-info-box { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius); padding: 16px 20px; } .bsp-fusion-info-box h4 { font-size: 13px; font-weight: 700; margin-bottom: 10px; } .bsp-fusion-info-box ul { padding-left: 16px; } .bsp-fusion-info-box li { font-size: 12px; color: var(--bsp-text-muted); margin-bottom: 6px; line-height: 1.4; } /* ─── PROMPT LIBRARY v3 ───────────────────────────────────────────────────── */ .bsp-prompts-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bsp-prompts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 14px; } .bsp-prompt-card { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius); overflow: hidden; transition: all 0.2s; position: relative; } .bsp-prompt-card:hover { border-color: var(--bsp-border-bright); transform: translateY(-1px); } .bsp-prompt-card-header { padding: 12px 14px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .bsp-prompt-id { font-size: 9px; font-family: 'DM Mono', monospace; color: var(--bsp-accent2); background: rgba(0,245,200,0.1); border: 1px solid rgba(0,245,200,0.2); border-radius: 4px; padding: 2px 6px; font-weight: 700; flex-shrink: 0; } .bsp-prompt-card-title { font-size: 13px; font-weight: 700; flex: 1; } .bsp-prompt-card-badges { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 14px 0; } .bsp-prompt-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.5px; } .bsp-prompt-badge.cat { background: rgba(123,92,240,0.2); color: var(--bsp-accent); } .bsp-prompt-badge.subcat { background: rgba(0,245,200,0.1); color: var(--bsp-accent2); } .bsp-prompt-card-text { padding: 8px 14px 10px; font-size: 12px; color: var(--bsp-text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bsp-prompt-card-footer { padding: 8px 14px 12px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--bsp-border); } .bsp-prompt-use-count { font-size: 10px; color: var(--bsp-text-dim); font-family: 'DM Mono', monospace; } .bsp-prompt-card-actions { display: flex; gap: 5px; } .bsp-prompt-voice-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: rgba(123,92,240,0.08); border: 1px solid rgba(123,92,240,0.2); border-radius: var(--bsp-radius); padding: 12px 16px; margin-bottom: 20px; } .bsp-prompt-voice-info { display: flex; align-items: flex-start; gap: 12px; } .bsp-prompt-voice-icon { font-size: 22px; flex-shrink: 0; } .bsp-prompt-voice-info strong { font-size: 13px; display: block; margin-bottom: 2px; } .bsp-prompt-voice-info p { font-size: 11px; color: var(--bsp-text-muted); margin: 0; } .bsp-prompt-id-search { display: flex; gap: 6px; align-items: center; } .bsp-prompt-card.highlighted { border-color: var(--bsp-accent2); box-shadow: 0 0 20px rgba(0,245,200,0.3); animation: bsp-highlight 0.5s ease; } @keyframes bsp-highlight { 0%,100%{box-shadow:0 0 20px rgba(0,245,200,0.3)} 50%{box-shadow:0 0 40px rgba(0,245,200,0.6)} } /* ─── DOCUMENTS VIEW ──────────────────────────────────────────────────────── */ .bsp-docs-toolbar { display: flex; align-items: center; gap: 8px; } .bsp-doc-type-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 4px; border-bottom: 1px solid var(--bsp-border); } .bsp-doc-type-tab { padding: 7px 14px; border: 1px solid transparent; border-radius: var(--bsp-radius-sm); background: transparent; color: var(--bsp-text-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: 'Space Grotesk', sans-serif; border-bottom: 2px solid transparent; margin-bottom: -1px; } .bsp-doc-type-tab:hover { color: var(--bsp-text); background: var(--bsp-surface3); } .bsp-doc-type-tab.active { color: var(--bsp-accent); border-bottom-color: var(--bsp-accent); } .bsp-docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 16px; } .bsp-doc-card { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-lg); overflow: hidden; transition: all 0.2s; cursor: pointer; } .bsp-doc-card:hover { border-color: var(--bsp-border-bright); transform: translateY(-2px); box-shadow: var(--bsp-shadow); } .bsp-doc-card-header { height: 60px; display: flex; align-items: center; justify-content: center; font-size: 28px; } .bsp-doc-card-body { padding: 14px 16px; } .bsp-doc-card-type { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bsp-text-dim); margin-bottom: 4px; } .bsp-doc-card-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsp-doc-card-meta { font-size: 11px; color: var(--bsp-text-dim); } .bsp-doc-card-actions { padding: 10px 16px; border-top: 1px solid var(--bsp-border); display: flex; gap: 6px; } /* ─── DOCUMENT EDITOR MODAL ──────────────────────────────────────────────── */ .bsp-modal-full { max-width: 98vw !important; width: 98vw !important; height: 90vh; display: flex; flex-direction: column; } .bsp-modal-full .bsp-modal-body { flex: 1; overflow: hidden; display: flex; gap: 0; padding: 0; } .bsp-doc-editor-body { display: flex; width: 100%; height: 100%; overflow: hidden; } .bsp-doc-left-panel { width: 50%; min-width: 340px; display: flex; flex-direction: column; border-right: 1px solid var(--bsp-border); height: 100%; } .bsp-doc-right-panel { flex: 1; display: flex; flex-direction: column; height: 100%; } .bsp-doc-meta-bar { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--bsp-border); flex-wrap: wrap; } .bsp-doc-title-input { flex: 1; min-width: 140px; font-size: 14px; font-weight: 600; } .bsp-doc-code-tabs { display: flex; gap: 0; padding: 0 14px; border-bottom: 1px solid var(--bsp-border); } .bsp-doc-code-tab { padding: 8px 16px; border: none; background: transparent; color: var(--bsp-text-muted); font-size: 12px; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; font-family: 'Space Grotesk', sans-serif; } .bsp-doc-code-tab:hover { color: var(--bsp-text); } .bsp-doc-code-tab.active { color: var(--bsp-accent); border-bottom-color: var(--bsp-accent); } .bsp-code-editor { flex: 1; width: 100%; height: 0; min-height: 0; background: #0D0D14; border: none; border-radius: 0; color: var(--bsp-accent2); font-family: 'DM Mono', monospace; font-size: 12px; line-height: 1.6; padding: 14px 16px; resize: none; outline: none; overflow-y: auto; } .bsp-code-editor:focus { box-shadow: none; } .bsp-doc-preview-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--bsp-border); background: var(--bsp-surface2); } .bsp-doc-preview-iframe { flex: 1; border: none; background: #fff; width: 100%; height: 100%; } .bsp-doc-send-row { display: flex; align-items: center; gap: 8px; flex: 1; margin-right: auto; } /* Google Drive button */ .bsp-btn-gdrive { background: rgba(66,133,244,0.15); color: #4285F4; border-color: rgba(66,133,244,0.35); } .bsp-btn-gdrive:hover { background: rgba(66,133,244,0.3); color: white; } /* ─── VOICE BUBBLE (compact always-visible) ───────────────────────────────── */ .bsp-voice-bubble { position: fixed; bottom: 90px; right: 24px; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #7B5CF0, #5B3FD0); box-shadow: 0 4px 20px rgba(123,92,240,0.5); cursor: pointer; z-index: 99998; display: flex; align-items: center; justify-content: center; transition: all 0.2s; pointer-events: all !important; touch-action: manipulation; -webkit-user-select: none; user-select: none; } .bsp-voice-bubble:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(123,92,240,0.7); } .bsp-voice-bubble.active { background: linear-gradient(135deg, #FF4081, #E91E8C); box-shadow: 0 4px 20px rgba(255,64,129,0.5); animation: bsp-voice-pulse 1.5s ease-in-out infinite; } .bsp-voice-bubble-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(123,92,240,0.4); animation: bsp-ring-pulse 2s ease-in-out infinite; pointer-events: none; } .bsp-voice-bubble.active .bsp-voice-bubble-ring { border-color: rgba(255,64,129,0.4); } @keyframes bsp-ring-pulse { 0%,100%{transform:scale(1);opacity:0.5} 50%{transform:scale(1.1);opacity:0.15} } .bsp-voice-bubble-icon { font-size: 20px; line-height: 1; pointer-events: none; } /* ─── EXPORT TOOLBAR BUTTONS ──────────────────────────────────────────────── */ .bsp-brands-toolbar .bsp-btn-outline, .bsp-library-controls .bsp-btn-outline { font-size: 11px; padding: 6px 10px; } /* ─── HISTORY: FUSION INDICATOR ───────────────────────────────────────────── */ .bsp-hist-fusion-badge { display: inline-block; padding: 2px 7px; border-radius: 8px; font-size: 9px; font-weight: 700; background: rgba(255,107,53,0.2); color: #FF6B35; border: 1px solid rgba(255,107,53,0.3); margin-left: 6px; } /* ─── CANVAS: GROUP LEGEND ────────────────────────────────────────────────── */ /* ─── TOGGLE LABEL ────────────────────────────────────────────────────────── */ .bsp-toggle-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bsp-text-muted); cursor: pointer; } .bsp-toggle-label input { cursor: pointer; } /* ─── BRAND MODAL: INTEGRATIONS TAB ──────────────────────────────────────── */ #bm-integrations .bsp-hint-text { background: rgba(66,133,244,0.08); border: 1px solid rgba(66,133,244,0.2); border-radius: var(--bsp-radius-sm); padding: 10px 14px; margin-top: 8px; } /* ─── PROMPT LIBRARY: SELECTED CARD FOR GENERATION ───────────────────────── */ .bsp-prompt-lib-item .bsp-prompt-lib-num { font-size: 9px; font-family: 'DM Mono', monospace; color: var(--bsp-accent2); margin-right: 6px; } .bsp-prompt-lib-item .bsp-prompt-lib-subcat { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--bsp-text-dim); margin-left: 6px; } /* ─── RESPONSIVE: smaller screens ────────────────────────────────────────── */ @media (max-width: 1100px) { .bsp-generate-layout { grid-template-columns: 360px 1fr; } } @media (max-width: 900px) { .bsp-generate-layout { grid-template-columns: 1fr; } .bsp-gen-preview-panel { max-height: 400px; } .bsp-doc-editor-body { flex-direction: column; } .bsp-doc-left-panel { width: 100%; min-width: unset; height: 50%; border-right: none; border-bottom: 1px solid var(--bsp-border); } .bsp-features-grid { grid-template-columns: repeat(2,1fr); } } /* ── CANVAS VIEW LAYOUT FIX ──────────────────────────────────────────────── */ /* Canvas view — overrides the generic .bsp-view to fill all remaining space. */ #bsp-view-canvas { padding: 0 !important; overflow: hidden !important; flex-direction: column; display: none; } #bsp-view-canvas.active { display: flex !important; /* Explicit height: viewport minus topbar (60px) */ height: calc(100vh - 60px); max-height: calc(100vh - 60px); } #bsp-view-canvas .bsp-view-header { padding: 12px 20px; margin-bottom: 0; border-bottom: 1px solid var(--bsp-border); background: var(--bsp-surface); flex-shrink: 0; } #bsp-canvas-stats { flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════════════ CANVAS EXTENDED FEATURES ═══════════════════════════════════════════════════════════════════════════════ */ /* ── Canvas wrapper (fills remaining space in canvas-body) ──────────────────── */ #bsp-view-canvas .bsp-canvas-wrapper { flex: 1; min-height: 0; /* No height:100% — that resolves against parent's explicit height:0 and collapses to 0px. Let flexbox align-items:stretch handle height automatically. */ align-self: stretch; border-radius: 0; border-left: none; border-right: none; border-bottom: none; } /* ── Toolbars ───────────────────────────────────────────────────────────────── */ .bsp-canvas-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bsp-surface); border-bottom: 1px solid var(--bsp-border); flex-shrink: 0; flex-wrap: wrap; /* Must sit above canvas body content (absolute-positioned canvas, panels, etc.) */ position: relative; z-index: 15; } .bsp-canvas-toolbar-primary { padding: 8px 14px; min-height: 46px; } .bsp-canvas-toolbar-left { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; } .bsp-canvas-toolbar-center { display: flex; align-items: center; justify-content: center; gap: 8px; } .bsp-canvas-toolbar-right { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .bsp-canvas-divider { width: 1px; height: 20px; background: var(--bsp-border); margin: 0 2px; flex-shrink: 0; } /* View mode pill group */ .bsp-canvas-mode-group { display: flex; border: 1px solid var(--bsp-border); border-radius: 8px; overflow: hidden; } .bsp-canvas-mode-btn { background: transparent; border: none; color: var(--bsp-text-muted); padding: 4px 10px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap; font-family: inherit; border-right: 1px solid var(--bsp-border); } .bsp-canvas-mode-btn:last-child { border-right: none; } .bsp-canvas-mode-btn:hover { background: var(--bsp-surface3); color: var(--bsp-text); } .bsp-canvas-mode-btn.active { background: var(--bsp-accent); color: #fff; } /* Extra-small buttons */ .bsp-btn-xs { padding: 4px 9px; font-size: 10px; font-weight: 600; border-radius: 6px; white-space: nowrap; } .bsp-btn-xs.active { background: var(--bsp-accent); color: #fff; border-color: var(--bsp-accent); } .bsp-input-sm { padding: 5px 10px; font-size: 12px; } /* ── Canvas body: sidebar + wrapper ─────────────────────────────────────────── */ .bsp-canvas-body { display: flex; flex: 1; /* height:0 + flex:1 forces the element to participate in flex sizing even inside a parent that has defined height via calc */ height: 0; min-height: 0; overflow: hidden; } /* ── Bookmark sidebar ───────────────────────────────────────────────────────── */ .bsp-canvas-sidebar { width: 180px; flex-shrink: 0; background: var(--bsp-surface); border-right: 1px solid var(--bsp-border); display: flex; flex-direction: column; overflow: hidden; transition: width .18s ease, min-width .18s ease, opacity .18s ease, border-color .18s ease; position: relative; z-index: 12; pointer-events: all !important; } .bsp-canvas-sidebar.is-collapsed { width: 0; min-width: 0; opacity: 0; border-right-color: transparent; } .bsp-canvas-sidebar-head { padding: 10px 12px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bsp-text-muted); border-bottom: 1px solid var(--bsp-border); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; } .bsp-bookmark-list { flex: 1; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; } .bsp-bookmark-empty { font-size: 11px; color: var(--bsp-text-dim); padding: 10px 8px; line-height: 1.5; } .bsp-bookmark-item { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); cursor: pointer; transition: all 0.15s; font-size: 12px; color: var(--bsp-text); } .bsp-bookmark-item:hover { border-color: var(--bsp-accent); background: rgba(123,92,240,0.12); } .bsp-bookmark-icon { flex-shrink: 0; font-size: 13px; } .bsp-bookmark-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; } .bsp-bookmark-del { background: none; border: none; color: var(--bsp-text-dim); cursor: pointer; font-size: 10px; padding: 2px 4px; border-radius: 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; } .bsp-bookmark-item:hover .bsp-bookmark-del { opacity: 1; } .bsp-bookmark-del:hover { background: rgba(255,80,80,0.2); color: #ff5050; } /* ── Sticky note (annotation) editor textarea ───────────────────────────────── */ .bsp-ann-editor { position: fixed; z-index: 9999; border-radius: 6px; padding: 6px 8px; font-family: 'Space Grotesk', sans-serif; resize: none; outline: none; box-shadow: 0 8px 32px rgba(0,0,0,0.5); } /* ── Spotlight overlay ──────────────────────────────────────────────────────── */ .bsp-spotlight-overlay { position: absolute; inset: 0; z-index: 500; background: rgba(5,5,12,0.88); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; transition: opacity 0.2s; } .bsp-spotlight-overlay.hidden { display: none; } .bsp-spotlight-overlay.visible { display: flex; } .bsp-spotlight-box { position: relative; display: flex; gap: 0; background: var(--bsp-surface); border: 1px solid var(--bsp-border-bright); border-radius: var(--bsp-radius-lg); overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,0.7); max-width: 86vw; max-height: 80vh; animation: bsp-spotlight-in 0.22s ease; } @keyframes bsp-spotlight-in { from{opacity:0;transform:scale(0.93)} to{opacity:1;transform:scale(1)} } .bsp-spotlight-img { max-width: 60vw; max-height: 78vh; object-fit: contain; background: #0a0a0f; display: block; } .bsp-spotlight-meta { width: 240px; padding: 24px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex-shrink: 0; } .bsp-spotlight-title { font-size: 15px; font-weight: 700; color: var(--bsp-text); } .bsp-spotlight-prompt { font-size: 12px; color: var(--bsp-text-muted); line-height: 1.5; flex: 1; } .bsp-spotlight-actions { display: flex; flex-direction: column; gap: 8px; } .bsp-spotlight-close { position: absolute; top: 12px; right: 12px; z-index: 10; background: rgba(255,255,255,0.1); border: 1px solid var(--bsp-border); color: var(--bsp-text); cursor: pointer; width: 30px; height: 30px; border-radius: 50%; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .bsp-spotlight-close:hover { background: rgba(255,80,80,0.3); border-color: #ff5050; } /* ── Canvas hint bar update ─────────────────────────────────────────────────── */ /* ── Canvas stats bar ───────────────────────────────────────────────────────── */ .bsp-canvas-stats { padding: 8px 16px; background: var(--bsp-surface); border-top: 1px solid var(--bsp-border); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; flex-shrink: 0; min-height: 36px; } /* ── New Image Toasts ───────────────────────────────────────────────────────── */ .bsp-new-image-toasts { position: fixed; bottom: 24px; right: 24px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .bsp-new-image-toast { display: flex; align-items: center; gap: 12px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-radius-lg); padding: 12px 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); pointer-events: all; animation: bsp-toast-in 0.3s ease; max-width: 320px; } @keyframes bsp-toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .bsp-toast-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: var(--bsp-radius-sm); flex-shrink: 0; } .bsp-toast-info { flex: 1; min-width: 0; } .bsp-toast-title { font-size: 12px; font-weight: 700; color: var(--bsp-accent); margin-bottom: 3px; } .bsp-toast-sub { font-size: 11px; color: var(--bsp-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-toast-close { background: none; border: none; color: var(--bsp-text-muted); cursor: pointer; font-size: 16px; padding: 0 4px; flex-shrink: 0; } .bsp-toast-close:hover { color: var(--bsp-text); } /* ── Cron Badge ─────────────────────────────────────────────────────────────── */ .bsp-cron-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; background: transparent; border-radius: 9px; font-size: 10px; font-weight: 700; color: transparent; transition: all 0.2s; } .bsp-cron-badge.has-items { background: var(--bsp-accent); color: #fff; } /* ── Brand Windows container ────────────────────────────────────────────────── */ #bsp-brand-windows { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } #bsp-brand-windows .bsp-brand-window { pointer-events: all; } /* ── Dynamic reference images grid ─────────────────────────────────────────── */ .bsp-brand-refs-extra { margin-top: 14px; } .bsp-refs-extra-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; font-weight: 600; color: var(--bsp-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .bsp-refs-count { font-size: 10px; color: var(--bsp-accent); margin-left: auto; } .bsp-refs-dynamic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } .bsp-ref-slot-img { position: relative; aspect-ratio: 1; overflow: hidden; padding: 0; } .bsp-ref-slot-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--bsp-radius-sm); display: block; } .bsp-ref-slot-delete { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6); border: none; color: #fff; width: 18px; height: 18px; border-radius: 50%; font-size: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.15s; } .bsp-ref-slot-img:hover .bsp-ref-slot-delete { opacity: 1; } .bsp-ref-slot-add { font-size: 22px; color: var(--bsp-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 60px; } .bsp-ref-slot:has(.bsp-ref-slot-add):hover { border-color: var(--bsp-accent); background: var(--bsp-surface3); } .bsp-ref-empty { font-size: 11px; color: var(--bsp-text-dim); padding: 12px 0; grid-column: 1/-1; text-align: center; } /* ── Admin menu toggle button ───────────────────────────────────────────────── */ .bsp-btn-sm { padding: 4px 10px; font-size: 11px; } /* ══════════════════════════════════════════════════════════════════════════════ BRAND STUDIO PRO — v3.1 IMPROVEMENTS ══════════════════════════════════════════════════════════════════════════════ */ /* ── Brand Card: richer layout ───────────────────────────────────────────────── */ .bsp-brand-card-header { position: relative; } .bsp-brand-card-industry-badge { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); color: #fff; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 3px 8px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.15); max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsp-brand-card-tagline { font-size: 11px; color: var(--bsp-accent2); font-style: italic; margin-bottom: 5px; line-height: 1.4; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .bsp-brand-card-color-label { font-size: 9px; font-family: 'DM Mono', monospace; color: var(--bsp-muted); margin-left: 4px; align-self: center; } .bsp-brand-card-social { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; } .bsp-brand-card-website { font-size: 10px; color: var(--bsp-accent2); text-decoration: none; display: block; margin-bottom: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.15s; } .bsp-brand-card-website:hover { color: #00ffcc; } .bsp-brand-card-stats { display: flex; gap: 14px; padding-top: 4px; } .bsp-brand-stat { display: flex; flex-direction: column; align-items: flex-start; font-size: 10px; color: var(--bsp-muted); } .bsp-brand-stat strong { font-size: 18px; font-weight: 700; color: var(--bsp-text); font-family: 'DM Mono', monospace; line-height: 1; } .bsp-brand-card-actions { justify-content: flex-start; gap: 5px; } /* ── Brand card reference image strip ── */ .bsp-brand-card-ref-strip { display: flex; align-items: center; gap: 5px; margin: 10px 0 6px; padding: 6px 8px; flex-wrap: nowrap; overflow-x: auto; background: rgba(34,197,94,.04); border: 1px solid rgba(34,197,94,.12); border-radius: 8px; min-height: 52px; } .bsp-brand-card-ref-strip::-webkit-scrollbar { height: 3px; } .bsp-brand-card-ref-strip::-webkit-scrollbar-thumb { background: rgba(34,197,94,.3); border-radius: 2px; } .bsp-brand-card-ref-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 7px; border: 2px solid rgba(34,197,94,.25); flex-shrink: 0; transition: transform .15s, border-color .15s, box-shadow .15s; cursor: default; } .bsp-brand-card-ref-thumb:hover { transform: scale(1.15); border-color: rgba(34,197,94,.65); box-shadow: 0 0 0 3px rgba(34,197,94,.15); z-index: 2; } .bsp-brand-card-ref-more { font-size: 11px; font-weight: 700; color: rgba(34,197,94,.7); background: rgba(34,197,94,.07); border: 1px dashed rgba(34,197,94,.3); border-radius: 7px; padding: 0 8px; height: 44px; display: flex; align-items: center; flex-shrink: 0; } .bsp-brand-card-ref-empty { min-height: 44px; display: flex; align-items: center; } .bsp-brand-card-ref-empty span { font-size: 11px; color: rgba(255,255,255,.2); } .bsp-brand-card-media-badge { font-size: 11px; color: rgba(167,139,250,.85); background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.25); border-radius: 6px; padding: 2px 7px; display: inline-flex; gap: 5px; margin-bottom: 5px; flex-wrap: wrap; font-weight: 600; } /* ── Video tab image refs strip ── */ .bsp-video-img-refs-strip { display: flex; align-items: flex-end; gap: 10px; flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px 6px; min-height: 76px; background: rgba(34,197,94,.04); border: 1px solid rgba(34,197,94,.14); border-radius: 10px; } .bsp-video-img-refs-strip::-webkit-scrollbar { height: 4px; } .bsp-video-img-refs-strip::-webkit-scrollbar-thumb { background: rgba(34,197,94,.3); border-radius: 2px; } .bsp-video-img-ref-thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; cursor: default; } .bsp-video-img-ref-thumb img { width: 58px; height: 58px; object-fit: cover; border-radius: 9px; border: 2px solid rgba(34,197,94,.3); transition: transform .15s, border-color .15s, box-shadow .15s; } .bsp-video-img-ref-thumb:hover img { transform: scale(1.12); border-color: rgba(34,197,94,.7); box-shadow: 0 0 0 4px rgba(34,197,94,.12); } .bsp-video-img-ref-label { font-size: 9px; font-weight: 700; color: rgba(134,239,172,.8); font-family: 'DM Mono', monospace; letter-spacing: .3px; } .bsp-video-img-ref-title { font-size: 9px; color: rgba(255,255,255,.35); max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .bsp-video-img-ref-more { width: 58px; height: 58px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(34,197,94,.07); border: 1px dashed rgba(134,239,172,.3); font-size: 13px; font-weight: 700; color: rgba(134,239,172,.5); } /* ── Brands stats strip ──────────────────────────────────────────────────────── */ .bsp-brands-stats-strip { display: flex; gap: 20px; padding: 10px 0 18px; border-bottom: 1px solid var(--bsp-border); margin-bottom: 20px; flex-wrap: wrap; flex-shrink: 0; } .bsp-brands-stat-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-r); } .bsp-brands-stat-icon { font-size: 20px; } .bsp-brands-stat-label { font-size: 10px; color: var(--bsp-muted); text-transform: uppercase; letter-spacing: 0.8px; } .bsp-brands-stat-value { font-size: 18px; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--bsp-text); } /* ── Sidebar improvements ────────────────────────────────────────────────────── */ .bsp-brand-sidebar-meta { display: flex; flex-direction: column; flex: 1; min-width: 0; } .bsp-brand-sidebar-industry { font-size: 9px; color: var(--bsp-muted); text-transform: uppercase; letter-spacing: 0.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsp-sidebar-shortcuts { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bsp-border); display: flex; flex-direction: column; gap: 4px; } .bsp-kbd-hint { font-size: 10px; color: var(--bsp-muted); display: flex; align-items: center; gap: 4px; } kbd { display: inline-block; padding: 1px 5px; border: 1px solid var(--bsp-border2); border-bottom-width: 2px; border-radius: 4px; font-size: 9px; font-family: 'DM Mono', monospace; color: var(--bsp-text); background: var(--bsp-surface3); line-height: 1.4; } /* ── Generate: progress bar ──────────────────────────────────────────────────── */ .bsp-gen-progress-wrap { width: 80%; max-width: 280px; height: 4px; background: var(--bsp-surface3); border-radius: 2px; margin: 0 auto 14px; overflow: hidden; } .bsp-gen-progress-bar { height: 100%; width: 0%; border-radius: 2px; background: linear-gradient(90deg, var(--bsp-accent), var(--bsp-accent2)); transition: width 0.6s ease; display: none; } /* ── Generate: result meta badges ───────────────────────────────────────────── */ .bsp-result-meta { padding: 8px 12px; display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--bsp-border); background: var(--bsp-surface3); flex-wrap: wrap; flex-shrink: 0; } .bsp-result-badge { padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; color: white; text-transform: uppercase; letter-spacing: 0.5px; } .bsp-result-badge-outline { padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 600; color: var(--bsp-text); text-transform: uppercase; letter-spacing: 0.5px; border: 1px solid var(--bsp-border2); background: transparent; } /* ── Notifications: icon + improved layout ───────────────────────────────────── */ .bsp-notification { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--bsp-r-sm); font-size: 13px; font-weight: 600; color: white; min-width: 260px; max-width: 380px; animation: bsp-notif-in 0.25s ease; box-shadow: var(--bsp-shadow); } .bsp-notif-icon { font-size: 14px; flex-shrink: 0; } .bsp-notif-msg { flex: 1; } .bsp-notification.warning { background: #B8860B; } /* ── History: improved item layout ──────────────────────────────────────────── */ .bsp-hist-title-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; } .bsp-hist-res-tag { font-size: 9px; font-family: 'DM Mono', monospace; color: var(--bsp-muted); background: var(--bsp-surface3); border: 1px solid var(--bsp-border); padding: 2px 6px; border-radius: 4px; } .bsp-hist-no-prompt { color: var(--bsp-dim); font-size: 12px; } .bsp-history-item { grid-template-columns: 70px 1fr auto; } .bsp-hist-thumb { width: 70px; height: 70px; border-radius: var(--bsp-r-sm); cursor: pointer; transition: transform 0.15s; } .bsp-hist-thumb:hover { transform: scale(1.06); } /* ── Library: group filter row ───────────────────────────────────────────────── */ .bsp-library-controls { flex-wrap: wrap; } /* ── Canvas toolbar: Sync Brand button ───────────────────────────────────────── */ #bsp-canvas-nav-btn { color: var(--bsp-accent2); border-color: rgba(0,245,200,0.35); } #bsp-canvas-nav-btn:hover { background: rgba(0,245,200,0.12); } /* ── Brand Modal: slightly taller textarea ───────────────────────────────────── */ #bsp-brand-notes { min-height: 150px; } #bsp-brand-audience { min-height: 60px; } /* ── Social tags in brand cards ─────────────────────────────────────────────── */ .bsp-social-tag { font-size: 10px; padding: 2px 7px; border-radius: 8px; background: var(--bsp-surface3); color: var(--bsp-muted); border: 1px solid var(--bsp-border); white-space: nowrap; overflow: hidden; max-width: 90px; text-overflow: ellipsis; } /* ── Prompt card: hover glow ─────────────────────────────────────────────────── */ .bsp-prompt-card:hover { box-shadow: 0 4px 20px rgba(123,92,240,0.12); } /* ── Generate: category hint styling improvement ─────────────────────────────── */ .bsp-category-hint { font-size: 11px; font-weight: 600; color: var(--bsp-accent2); display: flex; align-items: center; gap: 6px; } /* ── History stats / export toolbar ─────────────────────────────────────────── */ #bsp-hist-export-btn, #bsp-hist-stats-btn { align-self: center; } /* ── Empty state: improved ───────────────────────────────────────────────────── */ .bsp-empty-state { animation: bsp-fade-in 0.3s ease; } @keyframes bsp-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ── View header: sticky on scroll ──────────────────────────────────────────── */ #bsp-view-brands .bsp-view-header, #bsp-view-library .bsp-view-header, #bsp-view-history .bsp-view-header, #bsp-view-prompts .bsp-view-header, #bsp-view-documents .bsp-view-header { position: sticky; top: 0; z-index: 10; background: var(--bsp-bg); padding-bottom: 16px; } /* ── Asset card: bigger images ───────────────────────────────────────────────── */ .bsp-library-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; } .bsp-asset-img-wrap { aspect-ratio: 4/3; } /* ── Brand card: actions button group polish ─────────────────────────────────── */ .bsp-brand-card-actions .bsp-btn-sm { font-size: 10px; padding: 4px 8px; } .bsp-brand-card-actions .bsp-btn-primary { flex: 1; justify-content: center; } /* ── Topbar: active brand highlight ─────────────────────────────────────────── */ .bsp-active-brand-display { padding: 6px 14px; background: var(--bsp-surface3); border: 1px solid var(--bsp-border2); border-radius: var(--bsp-r-sm); gap: 10px; font-size: 14px; font-weight: 600; min-width: 140px; } /* ── Generate: prompt textarea larger ───────────────────────────────────────── */ #bsp-gen-prompt { min-height: 120px; } .bsp-canvas-float-rail{position:absolute;top:14px;left:14px;z-index:14;display:flex;flex-direction:column;gap:8px;background:rgba(12,14,24,.82);backdrop-filter:blur(10px);padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:16px} .bsp-canvas-float-rail.compact .bsp-btn:not(:first-child){display:none} .bsp-canvas-media-panel,.bsp-canvas-task-panel,.bsp-canvas-stage{position:absolute;z-index:13;background:rgba(10,12,20,.96);border:1px solid rgba(255,255,255,.08);border-radius:18px;box-shadow:0 20px 40px rgba(0,0,0,.35)} .bsp-canvas-media-panel{top:18px;right:18px;width:320px;max-height:70%;overflow:auto;padding:14px} .bsp-canvas-task-panel{bottom:18px;right:18px;width:320px;max-height:56%;overflow:auto;padding:14px} .bsp-canvas-stage{left:50%;bottom:20px;transform:translateX(-50%);width:min(760px,82%);padding:14px} .bsp-canvas-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;color:#fff} .bsp-canvas-stage-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .bsp-canvas-stage.pinned{box-shadow:0 0 0 1px rgba(96,165,250,.45),0 24px 50px rgba(0,0,0,.42)} .bsp-canvas-stage-body video,.bsp-canvas-stage-body audio,.bsp-canvas-stage-body img{display:block} .bsp-canvas-stage-caption{margin-top:12px;color:rgba(255,255,255,.72);font-size:12px;line-height:1.5} .bsp-canvas-audio-hero{height:180px;border-radius:16px;background:linear-gradient(135deg,#0ea5e9,#22c55e);display:flex;align-items:center;justify-content:center;font-size:64px;margin-bottom:16px} .bsp-canvas-stage-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .bsp-canvas-stage-chip{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.84);font-size:11px;letter-spacing:.02em} .bsp-play-card-shell{border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;background:rgba(16,18,28,.92);cursor:pointer} .bsp-play-card-media{height:148px;background:#0f1118;display:flex;align-items:center;justify-content:center} .bsp-play-card-media img{width:100%;height:100%;object-fit:cover} .bsp-media-thumb-placeholder{font-size:42px;color:#fff} .bsp-play-card-info{padding:12px} .bsp-play-card-type{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8ee29a;margin-bottom:6px} .bsp-play-card-title{font-weight:700;color:#fff;margin-bottom:4px} .bsp-play-card-meta{font-size:12px;color:rgba(255,255,255,.58)} .bsp-playground-preview{min-height:220px;border:1px dashed rgba(255,255,255,.12);border-radius:18px;padding:18px;color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px} .bsp-playground-list{display:flex!important;flex-direction:column;gap:12px} .bsp-playground-list .bsp-play-card-shell{display:grid;grid-template-columns:180px 1fr} .bsp-playground-list .bsp-play-card-media{height:100%} .bsp-inline-form{display:flex;gap:8px;align-items:center;margin:8px 0;flex-wrap:wrap} .bsp-brand-task-list{display:flex;flex-direction:column;gap:8px} .bsp-task-row{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04)} .bsp-task-row.done{opacity:.65} .bsp-task-copy{display:flex;flex-direction:column;gap:3px;flex:1;color:#fff} .bsp-task-copy span{font-size:12px;color:rgba(255,255,255,.58)} .bsp-task-toggle,.bsp-task-delete{background:none;border:none;color:#fff;cursor:pointer} .bsp-ref-slot-meta{position:absolute;left:8px;right:8px;bottom:8px;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);border-radius:10px;padding:6px 8px;color:#fff;font-size:11px;display:flex;flex-direction:column} .bsp-ref-slot-edit{cursor:pointer;position:relative} .bsp-email-preview{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;background:rgba(255,255,255,.03);color:#fff;min-height:120px} .bsp-email-preview-head{font-size:12px;color:rgba(255,255,255,.7);margin-bottom:10px} .bsp-email-preview-body{line-height:1.65} .bsp-email-preview-foot{margin-top:12px;font-size:12px;color:rgba(255,255,255,.55)} .bsp-email-meta-note{margin-top:8px;font-size:12px;color:rgba(255,255,255,.56)} /* ════════════════════════════════════════════════════════════════════════════ v3.10 – New Playground, Music, Reference Image, Canvas Additions ════════════════════════════════════════════════════════════════════════════ */ /* ── Playground tabs ────────────────────────────────────────────────────── */ .bsp-playground-tabs { display: flex; gap: 6px; padding: 14px 18px 0; border-bottom: 1px solid var(--bsp-border2); margin-bottom: 0; } .bsp-play-tab { padding: 8px 18px; font-size: 13px; font-weight: 600; border: none; background: none; cursor: pointer; color: var(--bsp-muted); border-bottom: 3px solid transparent; transition: color .15s, border-color .15s; } .bsp-play-tab:hover { color: var(--bsp-text); } .bsp-play-tab.active { color: var(--bsp-primary); border-bottom-color: var(--bsp-primary); } .bsp-play-tab-content { display: none; } .bsp-play-tab-content.active { display: block; } /* ── Playground layout ──────────────────────────────────────────────────── */ .bsp-playground-layout { align-items: flex-start; } .bsp-playground-preview-wrap { position: relative; } .bsp-preview-placeholder { color: var(--bsp-muted); font-size: 13px; text-align: center; padding: 40px 20px; } .bsp-preview-actions { position: absolute; bottom: 10px; right: 10px; display: flex; gap: 6px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); border-radius: 10px; padding: 6px 10px; } .bsp-library-grid-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; font-size: 12px; } /* ── Section head (Seedance / Suno headers) ─────────────────────────────── */ .bsp-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .bsp-section-icon { font-size: 18px; } .bsp-badge { font-size: 10px; font-weight: 700; letter-spacing: .06em; background: var(--bsp-primary); color: #fff; padding: 2px 7px; border-radius: 20px; text-transform: uppercase; } /* ── Field helpers ──────────────────────────────────────────────────────── */ .bsp-field-group { display: flex; flex-direction: column; gap: 4px; } .bsp-field-full { grid-column: 1 / -1; } .bsp-label-xs { font-size: 11px; font-weight: 600; color: var(--bsp-muted); text-transform: uppercase; letter-spacing: .05em; } .bsp-hint { font-size: 11px; color: var(--bsp-muted); font-weight: 400; margin-left: 6px; } .bsp-mt-sm { margin-top: 12px; } .bsp-mt-xs { margin-top: 8px; } .bsp-hidden { display: none !important; } .bsp-muted { color: var(--bsp-muted); } .bsp-textarea-sm { min-height: 56px; font-size: 12px; } .bsp-btn-full { width: 100%; justify-content: center; } .bsp-toggle-label { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; } /* ── Music advanced controls ────────────────────────────────────────────── */ .bsp-advanced-details { border: 1px solid var(--bsp-border2); border-radius: 10px; padding: 10px 14px; } .bsp-advanced-details summary { cursor: pointer; font-size: 12px; color: var(--bsp-muted); list-style: none; } .bsp-advanced-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 10px; } .bsp-range { width: 100%; accent-color: var(--bsp-primary); } .bsp-range-val { font-size: 11px; color: var(--bsp-primary); font-weight: 700; } /* ── Task status strip ──────────────────────────────────────────────────── */ .bsp-task-status { margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-size: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--bsp-border2); color: var(--bsp-text); word-break: break-all; } .bsp-status-error { border-color: var(--bsp-error, #ef4444) !important; color: var(--bsp-error, #ef4444) !important; } /* ── Reference image modal – extended layout ────────────────────────────── */ .bsp-ref-meta-layout { display: grid; grid-template-columns: 200px 1fr; gap: 20px; } .bsp-ref-meta-preview-col { display: flex; flex-direction: column; gap: 12px; } .bsp-ref-meta-fields-col { display: flex; flex-direction: column; gap: 10px; } .bsp-media-preview-lg { width: 100%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--bsp-surface3); } .bsp-media-preview-lg img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 620px) { .bsp-ref-meta-layout { grid-template-columns: 1fr; } .bsp-media-preview-lg { max-width: 180px; } } /* ── Canvas float rail – improved ──────────────────────────────────────── */ .bsp-canvas-float-rail { position: absolute; top: 14px; left: 14px; z-index: 14; display: flex; flex-direction: column; gap: 6px; background: rgba(10,12,22,.88); backdrop-filter: blur(14px); padding: 10px 8px; border: 1px solid rgba(255,255,255,.10); border-radius: 18px; box-shadow: 0 8px 32px rgba(0,0,0,.4); transition: transform .2s; pointer-events: all !important; } .bsp-canvas-float-rail:hover { transform: translateX(2px); } .bsp-canvas-float-rail .bsp-btn { white-space: nowrap; } .bsp-canvas-float-rail.compact .bsp-btn:not(:first-child) { display: none; } #bsp-app.bsp-layout-wide .bsp-canvas-stage { width: min(1040px, 92%); } #bsp-app.bsp-layout-wide .bsp-canvas-media-panel, #bsp-app.bsp-layout-wide .bsp-canvas-task-panel { width: 380px; } #bsp-node-canvas, #bsp-node-canvas.bsp-canvas-touch-enabled { touch-action: none; z-index: 1; } .bsp-canvas-wrapper { isolation: isolate; } .bsp-canvas-float-rail, .bsp-canvas-float-rail .bsp-btn, #bsp-canvas-voice-btn, #bsp-voice-btn { pointer-events: all !important; touch-action: manipulation; } .bsp-canvas-float-rail { z-index: 40 !important; } .bsp-canvas-float-rail .bsp-btn { position: relative; z-index: 41; } #bsp-canvas-voice-btn, #bsp-voice-btn, #bsp-voice-bubble { cursor: pointer; } .bsp-voice-panel { z-index: 100060 !important; right: 100px !important; pointer-events: all !important; } #bsp-voice-bubble { position: fixed !important; right: 24px !important; bottom: 90px !important; left: auto !important; top: auto !important; display: flex !important; visibility: visible !important; opacity: 1 !important; z-index: 100050 !important; pointer-events: all !important; touch-action: manipulation !important; isolation: isolate; transform: translateZ(0); -webkit-tap-highlight-color: transparent; } #bsp-voice-bubble, #bsp-voice-bubble * { pointer-events: all !important; } #bsp-voice-bubble { display: none !important; } #bsp-voice-standalone-root, #bsp-voice-standalone-root * { pointer-events: none !important; } #bsp-voice-standalone-root .bsp-voice-widget-shell, #bsp-voice-standalone-root .bsp-voice-widget-shell * { pointer-events: auto !important; } #bsp-voice-standalone-btn, #bsp-voice-standalone-btn * { pointer-events: all !important; } .bsp-canvas-media-panel, .bsp-canvas-task-panel, .bsp-canvas-stage { z-index: 35; } @media (pointer: coarse) { .bsp-topbar-right .bsp-btn, .bsp-canvas-toolbar .bsp-btn, .bsp-canvas-float-rail .bsp-btn, .bsp-canvas-stage-toolbar .bsp-btn { min-height: 42px; padding: 8px 12px; } .bsp-canvas-toolbar { gap: 10px; } .bsp-canvas-toolbar-right, .bsp-canvas-toolbar-left { gap: 8px; } .bsp-canvas-float-rail { padding: 12px 10px; gap: 8px; } .bsp-canvas-stage { width: min(900px, 96%); } .bsp-canvas-media-panel, .bsp-canvas-task-panel { width: min(92vw, 360px); } } .bsp-canvas-toolbar, .bsp-canvas-toolbar .bsp-btn, .bsp-canvas-toolbar .bsp-select, .bsp-canvas-toolbar .bsp-input, .bsp-canvas-media-panel, .bsp-canvas-task-panel, .bsp-canvas-stage, .bsp-canvas-panel-head, .bsp-canvas-stage-toolbar, #bsp-canvas-sidebar-reopen, .bsp-command-directory-panel, #bsp-command-modal .bsp-modal, #bsp-command-modal .bsp-input, #bsp-command-modal .bsp-voice-command-chip, #bsp-command-modal .bsp-command-prompt-card, #bsp-view-time-trigger, .bsp-tt-panel, .bsp-tt-node, .bsp-tt-tool, .bsp-tt-template-card, .bsp-tt-workflow-row, #bsp-tt-canvas-stage, #bsp-tt-canvas-stage *, /* Voice widget – action buttons and mic must always be clickable */ .bsp-voice-actions, .bsp-va-btn, .bsp-va-grid, #bsp-voice-panel, #bsp-voice-panel *, #bsp-voice-mic-btn, #bsp-voice-close, #bsp-voice-apply-prompt, #bsp-voice-reset-prompt, .bsp-voice-command-chip { pointer-events: all !important; } #bsp-canvas-sidebar-reopen { position: absolute; top: 14px; left: 14px; z-index: 15; } /* ─── COMMAND DIRECTORY MODAL ───────────────────────────────────────────── */ #bsp-command-modal .bsp-modal { max-width: 1180px; } .bsp-command-directory-layout { display:grid; grid-template-columns:1.3fr 1fr; gap:18px; margin-top:14px; } .bsp-command-directory-panel { background: linear-gradient(180deg, rgba(8,18,13,.96), rgba(5,10,8,.96)); border:1px solid rgba(134,239,172,.14); border-radius:16px; padding:16px; } .bsp-command-modal-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; max-height:480px; overflow:auto; } .bsp-command-prompt-grid { display:grid; gap:10px; max-height:480px; overflow:auto; } .bsp-command-prompt-card { background: rgba(255,255,255,.03); border:1px solid rgba(134,239,172,.14); color:#d4ffe1; border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:8px; text-align:left; cursor:pointer; } .bsp-command-prompt-card span { color:#8dc89c; font-size:12px; line-height:1.5; } /* ─── BRAND TIME TRIGGER ───────────────────────────────────────────────── */ #bsp-view-time-trigger { overflow:auto; } .bsp-tt-shell { display:grid; grid-template-columns:290px 1fr; gap:18px; min-height:780px; } .bsp-tt-sidebar, .bsp-tt-inspector { display:flex; flex-direction:column; gap:14px; } .bsp-tt-main { display:grid; grid-template-columns:minmax(0,1.25fr) 380px; gap:18px; min-height:780px; } #bsp-view-time-trigger.bsp-tt-focus-mode .bsp-tt-shell { grid-template-columns:1fr; } #bsp-view-time-trigger.bsp-tt-focus-mode .bsp-tt-sidebar { display:none; } #bsp-view-time-trigger.bsp-tt-focus-mode .bsp-tt-main { grid-template-columns:1fr; } #bsp-view-time-trigger.bsp-tt-panels-hidden .bsp-tt-inspector { display:none; } #bsp-view-time-trigger.bsp-tt-panels-hidden .bsp-tt-main { grid-template-columns:1fr; } .bsp-tt-panel { background: linear-gradient(180deg, rgba(8,18,13,.96), rgba(5,10,8,.96)); border:1px solid rgba(134,239,172,.14); border-radius:18px; padding:16px; box-shadow: 0 10px 28px rgba(0,0,0,.18); } .bsp-tt-panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; color:#d6ffe2; gap:10px; } .bsp-tt-panel-head span { color:#7eb48d; font-size:12px; } .bsp-tt-node-status { display:flex; align-items:center; min-height:34px; margin-bottom:12px; padding:8px 10px; border-radius:12px; border:1px solid rgba(134,239,172,.14); background:rgba(34,197,94,.08); color:#bff7cf; font-size:12px; } .bsp-tt-workflow-list, .bsp-tt-template-list, .bsp-tt-log-list { display:flex; flex-direction:column; gap:10px; } .bsp-tt-workflow-row, .bsp-tt-template-card, .bsp-tt-tool { width:100%; text-align:left; border-radius:14px; border:1px solid rgba(134,239,172,.14); background: rgba(255,255,255,.03); color:#d6ffe2; cursor:pointer; padding:12px 14px; } .bsp-tt-workflow-row.active { border-color:rgba(134,239,172,.42); box-shadow:0 0 0 1px rgba(134,239,172,.2) inset; } .bsp-tt-row-copy { display:flex; flex-direction:column; gap:4px; } .bsp-tt-row-copy span, .bsp-tt-template-card span { font-size:12px; color:#81bb92; line-height:1.45; } .bsp-tt-row-actions { display:flex; gap:8px; align-items:center; justify-content:space-between; margin-top:8px; } .bsp-tt-row-badge { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#abf7bf; } .bsp-tt-row-delete { color:#fca5a5; cursor:pointer; } .bsp-tt-toolbox { display:grid; grid-template-columns:1fr; gap:8px; } .bsp-tt-tool { font-weight:700; } .bsp-tt-tool[draggable="true"] { cursor: grab; } .bsp-tt-tool.is-dragging { opacity:.55; transform:scale(.985); } .bsp-tt-canvas-wrap { background: linear-gradient(180deg, rgba(8,18,13,.98), rgba(4,10,7,.98)); border:1px solid rgba(134,239,172,.16); border-radius:22px; padding:14px; min-height:780px; } .bsp-tt-canvas-topbar { display:flex; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; } .bsp-tt-chip-row { display:flex; gap:8px; flex-wrap:wrap; } .bsp-tt-chip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:6px 10px; background: rgba(34,197,94,.12); border:1px solid rgba(134,239,172,.14); color:#c6ffd5; font-size:11px; } #bsp-tt-canvas-stage { position:relative; min-height:700px; border-radius:18px; overflow:hidden; background: radial-gradient(circle at top left, rgba(34,197,94,.08), transparent 35%), linear-gradient(rgba(134,239,172,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(134,239,172,.05) 1px, transparent 1px), #07110d; background-size:auto, 28px 28px, 28px 28px, auto; touch-action:none; } .bsp-tt-canvas-stage.dragover { box-shadow: inset 0 0 0 2px rgba(134,239,172,.26); } .bsp-tt-edges { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; } .bsp-tt-edges path { stroke:rgba(134,239,172,.4); stroke-width:3; fill:none; stroke-linecap:round; } .bsp-tt-node-layer { position:absolute; inset:0; pointer-events:none; } .bsp-tt-node { position:absolute; width:190px; min-height:86px; border-radius:18px; padding:14px; background: linear-gradient(180deg, rgba(13,29,20,.98), rgba(7,16,11,.98)); border:1px solid rgba(134,239,172,.18); box-shadow:0 18px 30px rgba(0,0,0,.22); display:flex; gap:12px; cursor:grab; user-select:none; pointer-events:auto; touch-action:none; } .bsp-tt-node.dragging { box-shadow:0 24px 46px rgba(0,0,0,.34); border-color:rgba(134,239,172,.4); } .bsp-tt-node.active { border-color:rgba(190,242,100,.7); box-shadow:0 0 0 2px rgba(190,242,100,.18), 0 24px 46px rgba(0,0,0,.34); } .bsp-tt-node-icon { width:38px; height:38px; border-radius:12px; background:rgba(34,197,94,.12); display:flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto; } .bsp-tt-node-copy { display:flex; flex-direction:column; gap:5px; } .bsp-tt-node-copy strong { color:#d6ffe2; font-size:13px; } .bsp-tt-node-copy span { color:#82bc93; font-size:11px; line-height:1.4; } .bsp-tt-example { min-height:40px; display:flex; align-items:center; padding:10px 12px; border-radius:12px; background: rgba(34,197,94,.1); border:1px solid rgba(134,239,172,.14); color:#d4ffe0; font-size:12px; } .bsp-tt-weekdays { display:flex; flex-wrap:wrap; gap:8px; } .bsp-tt-weekdays label { display:flex; align-items:center; gap:6px; color:#d6ffe2; font-size:12px; } .bsp-tt-log-row { display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:12px; background: rgba(255,255,255,.03); border:1px solid rgba(134,239,172,.12); } .bsp-tt-log-row strong { color:#d5ffe0; font-size:12px; } .bsp-tt-log-row span { color:#8bc59b; font-size:12px; line-height:1.5; } .bsp-tt-log-row.fail { border-color:rgba(248,113,113,.2); } .bsp-empty-state { color:#80b991; font-size:12px; line-height:1.55; padding:12px 0; } @media (max-width: 1200px) { .bsp-tt-shell, .bsp-tt-main, .bsp-command-directory-layout { grid-template-columns:1fr; } } #bsp-app.bsp-layout-wide #bsp-view-time-trigger .bsp-tt-shell { grid-template-columns:250px minmax(0, 1fr); } #bsp-app.bsp-layout-wide #bsp-view-time-trigger .bsp-tt-main { grid-template-columns:minmax(0, 1.5fr) 420px; } #bsp-app.bsp-layout-wide #bsp-view-time-trigger .bsp-tt-canvas-wrap, #bsp-app.bsp-layout-wide #bsp-view-time-trigger .bsp-tt-panel { min-height: 840px; } #bsp-app.bsp-layout-wide #bsp-view-time-trigger #bsp-tt-canvas-stage { min-height: 760px; } /* ══════════════════════════════════════════════════════════════════════════════ NEW ELEMENTS v4.0 ══════════════════════════════════════════════════════════════════════════════ */ /* ── Media ID Badges ─────────────────────────────────────────────────────────── */ .bsp-play-card-media { position: relative; } .bsp-media-id-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.72); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 20px; pointer-events: none; font-family: 'JetBrains Mono', 'Fira Code', monospace; } /* ── Reference URL rows ──────────────────────────────────────────────────────── */ .bsp-ref-url-list { display: flex; flex-direction: column; gap: 6px; } .bsp-ref-url-row { display: flex; align-items: center; gap: 6px; } .bsp-ref-url-row .bsp-input { flex: 1; font-size: 12px; } .bsp-ref-id-badge { min-width: 44px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; background: var(--bsp-primary, #6c63ff); color: #fff; border-radius: 20px; padding: 3px 8px; font-family: 'JetBrains Mono', monospace; white-space: nowrap; } .bsp-ref-id-audio { background: #00b894; } .bsp-ref-url-clear, .bsp-wp-media-pick { flex-shrink: 0; min-width: 30px; padding: 4px 8px !important; font-size: 12px !important; } /* ── Prompt Enhancer button row ──────────────────────────────────────────────── */ #bsp-enhance-video-status, #bsp-enhance-music-status { font-size: 12px; opacity: 0.75; transition: opacity 0.3s; } .bsp-ml-xs { margin-left: 8px; } .bsp-mb-xs { margin-bottom: 6px; } /* ── Video Source picker row ─────────────────────────────────────────────────── */ #bsp-video-source-url { flex: 1; font-size: 12px; } /* ── Asset Manager View ──────────────────────────────────────────────────────── */ .bsp-view-subtitle { font-size: 13px; font-weight: 400; opacity: 0.55; margin-left: 10px; } .bsp-asset-manager-toolbar { display: flex; gap: 8px; align-items: center; } .bsp-asset-manager-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; padding: 20px; } .bsp-am-card { background: var(--bsp-surface, #1e1e2e); border: 1px solid var(--bsp-border, rgba(255,255,255,0.07)); border-radius: 14px; overflow: hidden; } .bsp-am-card-header { padding: 12px 16px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--bsp-border, rgba(255,255,255,0.07)); background: rgba(255,255,255,0.03); } .bsp-am-card-body { padding: 14px 16px; font-size: 13px; min-height: 80px; } .bsp-am-stat { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .bsp-am-stat label { font-size: 11px; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.06em; } .bsp-am-stat span { font-weight: 500; font-size: 12px; } .bsp-status-ok { color: #00b894; } .bsp-status-warn { color: #fdcb6e; } .bsp-am-job-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12px; } .bsp-am-job-id { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; background: rgba(108,99,255,0.15); color: var(--bsp-primary, #6c63ff); border-radius: 20px; padding: 2px 7px; min-width: 52px; text-align: center; } .bsp-am-job-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsp-am-job-status { font-size: 10px; opacity: 0.6; } /* ══════════════════════════════════════════════════════════════════════════════ LAYOUT + SCROLL + CLICK FIX — v4.0.1 ══════════════════════════════════════════════════════════════════════════════ Root causes fixed: 1. .bsp-generate-layout had overflow:hidden → panels couldn't scroll 2. .bsp-gen-panel had no explicit height → flex children collapsed to 0 3. .bsp-playground-layout had align-items:flex-start without height bounds 4. .bsp-view overflow-y:auto was correct but inner grid broke it 5. Overlays (toasts, canvas) blocking pointer events on underlying UI ══════════════════════════════════════════════════════════════════════════════ */ /* ── 1. View layer: fill remaining height, scroll the whole view ─────────────── */ .bsp-main { display: flex; flex-direction: column; height: 100vh; overflow: hidden; /* topbar stays fixed, views scroll internally */ } .bsp-view { flex: 1 1 0; min-height: 0; /* critical for flex children to shrink */ overflow-y: auto; overflow-x: hidden; display: none; flex-direction: column; padding: 24px 28px; -webkit-overflow-scrolling: touch; /* smooth on iOS */ } .bsp-view.active { display: flex; } /* ── 2. Two-column generate / playground layout: scroll the LEFT panel ───────── */ .bsp-generate-layout { display: grid; grid-template-columns: 420px 1fr; gap: 24px; flex: 1 1 0; min-height: 0; /* REMOVED overflow:hidden — was killing scroll */ overflow: visible; align-items: start; /* don't stretch columns to equal height */ } /* The left gen-panel: fills its grid cell, scrolls on its own */ .bsp-gen-panel { overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - 120px); /* topbar 60px + view padding 24px*2 */ padding-right: 8px; -webkit-overflow-scrolling: touch; } /* Right preview panel: also independently scrollable */ .bsp-gen-preview-panel { overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - 120px); -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 20px; } /* ── 3. Playground-specific layout overrides ─────────────────────────────────── */ .bsp-playground-layout { align-items: start; } /* Each playground tab content: make it scrollable */ .bsp-play-tab-content { overflow-y: auto; overflow-x: hidden; } /* ── 4. Media library grid inside playground: contained, scrollable ───────────── */ #bsp-playground-grid.bsp-library-grid { max-height: calc(100vh - 320px); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* ── 5. Pointer-event safety: overlays must NEVER block the main UI ───────────── */ /* Toast container: no pointer events on container, only on individual toasts */ .bsp-new-image-toasts { pointer-events: none !important; } .bsp-new-image-toast { pointer-events: all; } /* Canvas placeholder (empty div rendered after #bsp-app) must not block */ #bsp-canvas-ctx-placeholder { pointer-events: none !important; position: fixed; z-index: -1; /* sink it behind everything */ } /* Brand windows container: pointer-events:none so it never blocks the main layout */ #bsp-brand-windows { pointer-events: none; position: absolute; inset: 0; z-index: 100; } #bsp-brand-windows .bsp-brand-window { pointer-events: all; } /* ── 6. Email panel: keep it above everything, not blocking full-screen area ──── */ .bsp-email-panel { position: fixed; bottom: 24px; left: 24px; width: 380px; max-height: 86vh; overflow: hidden; /* clip to border-radius; tab-content scrolls internally */ z-index: 100080; } /* When hidden, zero out interaction entirely */ .bsp-email-panel.hidden { display: none !important; pointer-events: none !important; } /* ── 7. Modal overlays: only active ones should intercept clicks ──────────────── */ .bsp-modal-overlay.hidden { display: none !important; pointer-events: none !important; } .bsp-modal-overlay:not(.hidden) { pointer-events: all; } /* ── 8. Fix the topbar button hit targets ────────────────────────────────────── */ .bsp-topbar-right { display: flex; align-items: center; gap: 12px; position: relative; z-index: 10; /* ensure topbar buttons are above the view content */ } .bsp-topbar-right .bsp-btn { position: relative; z-index: 10; cursor: pointer; pointer-events: all !important; -webkit-user-select: none; user-select: none; } /* ── 9. Fix .bsp-topbar so it doesn't get buried by flex children ────────────── */ .bsp-topbar { flex-shrink: 0; position: relative; z-index: 20; } /* ── 10. Prompt/generate sections inside gen-panel: don't collapse ───────────── */ .bsp-gen-section { margin-bottom: 20px; } .bsp-gen-section:last-child { margin-bottom: 0; padding-bottom: 20px; } /* ── 11. Scrollbar styling: subtle, consistent ───────────────────────────────── */ .bsp-gen-panel::-webkit-scrollbar, .bsp-gen-preview-panel::-webkit-scrollbar, .bsp-view::-webkit-scrollbar, #bsp-playground-grid::-webkit-scrollbar { width: 5px; } .bsp-gen-panel::-webkit-scrollbar-track, .bsp-gen-preview-panel::-webkit-scrollbar-track, .bsp-view::-webkit-scrollbar-track, #bsp-playground-grid::-webkit-scrollbar-track { background: transparent; } .bsp-gen-panel::-webkit-scrollbar-thumb, .bsp-gen-preview-panel::-webkit-scrollbar-thumb, .bsp-view::-webkit-scrollbar-thumb, #bsp-playground-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; } .bsp-gen-panel::-webkit-scrollbar-thumb:hover, .bsp-gen-preview-panel::-webkit-scrollbar-thumb:hover, .bsp-view::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); } /* ── 12. Cron badge and status dot: must not block topbar buttons ────────────── */ .bsp-cron-badge { pointer-events: none; position: relative; z-index: 5; } /* ══════════════════════════════════════════════════════════════════════════════ WOOCOMMERCE PRODUCTS / SERVICES TAB — v4.0.3 Per-brand product catalogue: list, add, edit, delete WooCommerce products ══════════════════════════════════════════════════════════════════════════════ */ /* ── Tab panel container ────────────────────────────────────────────────────── */ #bm-products { display: flex; flex-direction: column; gap: 16px; } /* ── Toolbar ─────────────────────────────────────────────────────────────────── */ .bsp-products-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .bsp-products-store-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; } .bsp-products-store-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--bsp-border); background: rgba(255,255,255,0.03); color: var(--bsp-text); } .bsp-products-store-card span { font-size: 18px; } .bsp-products-store-card small { display: block; color: var(--bsp-text-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; } .bsp-products-store-card strong { display: block; font-size: 18px; margin-top: 2px; } .bsp-products-store-card.is-empty, .bsp-products-store-loading { padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--bsp-border2); color: var(--bsp-text-muted); background: rgba(255,255,255,0.02); } .bsp-products-toolbar .bsp-input { max-width: 220px; } .bsp-products-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; } .bsp-products-sidebar { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-r-lg); padding: 14px; position: sticky; top: 0; z-index: 3; pointer-events: all !important; } .bsp-products-sidebar * { pointer-events: all !important; } .bsp-products-sidebar-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .bsp-products-sidebar-head strong { font-size: 13px; color: var(--bsp-text); } .bsp-products-sidebar-head span { font-size: 11px; color: var(--bsp-text-muted); line-height: 1.5; } .bsp-products-grid-wrap { min-width: 0; } .bsp-woo-quick-search .bsp-woo-search-results { position: static; margin-top: 8px; max-height: 360px; pointer-events: all !important; } /* ── Products grid ───────────────────────────────────────────────────────────── */ .bsp-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; } /* ── Product card ────────────────────────────────────────────────────────────── */ .bsp-product-card { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-r-lg); overflow: hidden; display: flex; flex-direction: column; transition: all 0.2s; position: relative; } .bsp-product-card:hover { border-color: var(--bsp-border2); transform: translateY(-2px); box-shadow: var(--bsp-shadow); } /* Image/thumbnail area */ .bsp-product-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--bsp-surface3); display: flex; align-items: center; justify-content: center; font-size: 36px; flex-shrink: 0; } .bsp-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Status badge — sale / out-of-stock / etc. */ .bsp-product-status-badge { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 20px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #fff; pointer-events: none; } .bsp-product-status-badge.sale { background: var(--bsp-danger); } .bsp-product-status-badge.instock { background: var(--bsp-success); } .bsp-product-status-badge.outofstock { background: var(--bsp-muted); } .bsp-product-status-badge.draft { background: var(--bsp-warn); color: #000; } /* Body */ .bsp-product-card-body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; } .bsp-product-card-type { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bsp-text-dim); } .bsp-product-card-name { font-size: 14px; font-weight: 700; color: var(--bsp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsp-product-card-desc { font-size: 11px; color: var(--bsp-text-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bsp-product-card-price { font-size: 15px; font-weight: 700; color: var(--bsp-accent2); font-family: 'DM Mono', monospace; margin-top: 4px; } .bsp-product-card-price .bsp-price-regular { font-size: 11px; color: var(--bsp-muted); text-decoration: line-through; margin-left: 5px; } .bsp-product-card-sku { font-size: 10px; color: var(--bsp-text-dim); font-family: 'DM Mono', monospace; } /* Tags */ .bsp-product-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .bsp-product-tag { font-size: 9px; padding: 2px 7px; border-radius: 8px; background: var(--bsp-surface3); color: var(--bsp-muted); border: 1px solid var(--bsp-border); } /* Footer actions */ .bsp-product-card-footer { padding: 9px 14px; border-top: 1px solid var(--bsp-border); display: flex; gap: 6px; background: rgba(0,0,0,0.12); } .bsp-product-card-footer .bsp-btn { flex: 1; justify-content: center; font-size: 11px; } /* ── Product Edit / Add Modal ────────────────────────────────────────────────── */ #bsp-product-modal .bsp-modal { max-width: 680px; } .bsp-product-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .bsp-product-modal-grid .bsp-span2 { grid-column: span 2; } /* Image picker in product modal */ .bsp-product-img-picker { display: flex; flex-direction: column; gap: 8px; } .bsp-product-img-preview { width: 100%; height: 120px; background: var(--bsp-surface3); border: 1px dashed var(--bsp-border2); border-radius: var(--bsp-r-sm); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--bsp-text-muted); overflow: hidden; } .bsp-product-img-preview img { width: 100%; height: 100%; object-fit: cover; } .bsp-product-img-row { display: flex; gap: 8px; align-items: center; } .bsp-product-img-row .bsp-input { flex: 1; font-size: 12px; } /* Pricing row */ .bsp-price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Woo live link pill */ .bsp-woo-live-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--bsp-accent2); text-decoration: none; padding: 3px 9px; border: 1px solid rgba(0,245,200,0.3); border-radius: 20px; background: rgba(0,245,200,0.07); transition: all 0.15s; white-space: nowrap; } .bsp-woo-live-link:hover { background: rgba(0,245,200,0.15); color: #fff; } /* ── Products stats strip ────────────────────────────────────────────────────── */ .bsp-products-stats { display: flex; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--bsp-border); } .bsp-products-stat { display: flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: var(--bsp-r); font-size: 12px; } .bsp-products-stat strong { font-size: 16px; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--bsp-text); } /* ── Empty products state ────────────────────────────────────────────────────── */ .bsp-products-empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; color: var(--bsp-text-muted); } .bsp-products-empty-icon { font-size: 48px; margin-bottom: 14px; opacity: 0.35; } /* ══════════════════════════════════════════════════════════════════════════════ BRAND CARD — Products & Services Section (v5 new) ══════════════════════════════════════════════════════════════════════════════ */ /* Badge on card header */ .bsp-brand-card-ps-badge { position: absolute; top: 9px; left: 10px; background: rgba(245,158,11,0.88); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; letter-spacing: .04em; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.18); } /* Products section wrapper inside card body */ .bsp-brand-card-ps-section { margin: 10px 0 6px; padding: 9px 10px; background: rgba(245,158,11,0.07); border: 1px solid rgba(245,158,11,0.18); border-radius: 8px; } .bsp-brand-card-ps-section.bsp-brand-card-ps-empty { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.07); } .bsp-brand-card-ps-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; } .bsp-brand-card-ps-title { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(245,158,11,0.9); } .bsp-brand-card-ps-count { background: rgba(245,158,11,0.22); color: rgba(245,158,11,1); font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; } .bsp-brand-card-ps-pills { display: flex; flex-wrap: wrap; gap: 5px; } .bsp-brand-card-ps-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 3px 8px 3px 6px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); cursor: default; transition: background 0.12s; max-width: 160px; overflow: hidden; } .bsp-brand-card-ps-pill:hover { background: rgba(255,255,255,0.12); } .bsp-ps-pill-icon { font-size: 11px; flex-shrink: 0; } .bsp-ps-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsp-ps-pill-price { font-size: 9.5px; font-weight: 700; color: rgba(245,158,11,0.9); margin-left: 2px; flex-shrink: 0; } /* Type-specific accent colours for pills */ .bsp-ps-type-service { border-color: rgba(99,102,241,0.35); background: rgba(99,102,241,0.08); } .bsp-ps-type-subscription { border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); } .bsp-ps-type-digital { border-color: rgba(14,165,233,0.35); background: rgba(14,165,233,0.08); } .bsp-ps-type-bundle { border-color: rgba(236,72,153,0.35); background: rgba(236,72,153,0.08); } .bsp-brand-card-ps-more { font-size: 10px; color: rgba(255,255,255,0.45); padding: 3px 6px; align-self: center; } .bsp-brand-card-ps-add-hint { font-size: 11px; color: rgba(255,255,255,0.38); } .bsp-brand-card-ps-add-hint a { color: rgba(245,158,11,0.8); text-decoration: none; } .bsp-brand-card-ps-add-hint a:hover { color: rgba(245,158,11,1); text-decoration: underline; } /* Products stat in card footer gets amber accent */ .bsp-brand-stat.bsp-stat-products strong { color: #F59E0B; } /* Shop button accent colour in card actions */ .bsp-btn.bsp-btn-accent { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; border: none; } .bsp-btn.bsp-btn-accent:hover { background: linear-gradient(135deg, #FBBF24, #F59E0B); } /* Canvas stats — products pill */ .bsp-canvas-stat-pill.bsp-stat-pill-products { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.35); color: #F59E0B; } /* ══════════════════════════════════════════════════════════════════════════════ WOOCOMMERCE LIVE PRODUCT SEARCH — product modal (v5.1) ══════════════════════════════════════════════════════════════════════════════ */ .bsp-woo-search-wrap { position: relative; } .bsp-woo-search-input-row { display: flex; gap: 8px; align-items: center; } .bsp-woo-search-input-row .bsp-input { flex: 1; } /* Dropdown results panel */ .bsp-woo-search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #1a1a2e; border: 1px solid rgba(123,92,240,0.35); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); z-index: 9999; max-height: 320px; overflow-y: auto; padding: 6px; pointer-events: all !important; } .bsp-woo-search-results.hidden { display: none; } .bsp-woo-search-loading, .bsp-woo-search-empty { padding: 18px 14px; color: rgba(255,255,255,0.55); font-size: 12.5px; text-align: center; line-height: 1.5; } .bsp-woo-result-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; transition: background 0.12s; pointer-events: all !important; } .bsp-woo-result-item:hover { background: rgba(255,255,255,0.06); } .bsp-woo-result-img { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); font-size: 18px; } .bsp-woo-result-img img { width: 100%; height: 100%; object-fit: cover; } .bsp-woo-result-info { flex: 1; min-width: 0; } .bsp-woo-result-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-woo-result-meta { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; } .bsp-woo-result-sale { color: #F59E0B; font-weight: 700; } .bsp-woo-result-stock { font-size: 10.5px; padding: 1px 5px; border-radius: 8px; display: inline-block; margin-left: 4px; } .bsp-woo-result-stock.instock { background: rgba(16,185,129,0.18); color: #10B981; } .bsp-woo-result-stock.outofstock { background: rgba(239,68,68,0.18); color: #EF4444; } /* Linked product preview bar */ .bsp-woo-linked-preview { margin-top: 8px; padding: 9px 12px; background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.25); border-radius: 8px; font-size: 12.5px; color: rgba(255,255,255,0.88); } .bsp-woo-linked-preview.hidden { display: none; } .bsp-woo-linked-row { display: flex; align-items: center; gap: 10px; } .bsp-woo-linked-img { width: 36px; height: 36px; border-radius: 5px; object-fit: cover; flex-shrink: 0; } .bsp-woo-linked-row a { color: rgba(16,185,129,0.9); text-decoration: none; } .bsp-woo-linked-row a:hover { text-decoration: underline; } @media (max-width: 980px) { .bsp-products-layout { grid-template-columns: 1fr; } .bsp-products-sidebar { position: relative; } } /* ── Voice agent: pulse-attention on Generate button when waiting for confirmation ── */ .bsp-btn-pulse { animation: bsp-btn-pulse-anim 1.4s ease-in-out infinite !important; position: relative; z-index: 10; } @keyframes bsp-btn-pulse-anim { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7), 0 4px 16px rgba(34, 197, 94, 0.45); transform: scale(1); } 50% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0), 0 6px 22px rgba(34, 197, 94, 0.6); transform: scale(1.03); } } /* Field highlight when filled by voice agent */ .bsp-voice-filled { animation: bsp-voice-flash 1.6s ease-out; } @keyframes bsp-voice-flash { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); background-color: rgba(34, 197, 94, 0.08); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); background-color: transparent; } } /* ══════════════════════════════════════════════════════════ MOVEABLE MEDIA POPUP ══════════════════════════════════════════════════════════ */ .bsp-media-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 99990; backdrop-filter: blur(2px); } .bsp-media-popup { position: fixed; z-index: 99999; width: 560px; max-width: 96vw; background: var(--bsp-bg, #1a1a2e); border: 1px solid var(--bsp-border, rgba(255,255,255,.12)); border-radius: 16px; box-shadow: 0 32px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow .2s; } .bsp-media-popup-titlebar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(255,255,255,.04); cursor: grab; border-bottom: 1px solid var(--bsp-border, rgba(255,255,255,.1)); user-select: none; -webkit-user-select: none; } .bsp-media-popup-titlebar:active { cursor: grabbing; } .bsp-media-popup-title { font-weight: 700; font-size: 13px; color: var(--bsp-text, #e2e8f0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; } .bsp-media-popup-controls { display: flex; gap: 6px; } .bsp-media-popup-ctrl { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07); color: var(--bsp-text-muted, #94a3b8); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; font-weight: 700; transition: background .15s, color .15s; line-height: 1; } .bsp-media-popup-ctrl:hover { background: rgba(255,255,255,.14); color: #fff; } .bsp-media-popup-close:hover { background: rgba(239,68,68,.25); border-color: rgba(239,68,68,.5); color: #ef4444; } .bsp-media-popup-body { padding: 14px; overflow-y: auto; max-height: 500px; flex: 1; } .bsp-popup-audio-hero { text-align: center; font-size: 64px; padding: 20px 0 8px; } .bsp-popup-caption { margin-top: 10px; font-size: 11.5px; color: var(--bsp-text-muted, #94a3b8); line-height: 1.5; font-style: italic; padding: 8px; background: rgba(255,255,255,.04); border-radius: 8px; } .bsp-media-popup-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid var(--bsp-border, rgba(255,255,255,.08)); background: rgba(255,255,255,.02); gap: 10px; } .bsp-media-popup-meta { font-size: 11px; color: var(--bsp-text-muted, #94a3b8); } .bsp-media-popup-footer-actions { display: flex; gap: 6px; } /* ══════════════════════════════════════════════════════════ ACTIVE GENERATIONS PANEL ══════════════════════════════════════════════════════════ */ .bsp-generations-panel { position: fixed; bottom: 100px; right: 24px; z-index: 9998; width: 340px; max-width: 94vw; background: var(--bsp-bg, #1a1a2e); border: 1px solid var(--bsp-border, rgba(255,255,255,.12)); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.5); overflow: hidden; } .bsp-generations-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(255,255,255,.04); border-bottom: 1px solid var(--bsp-border, rgba(255,255,255,.1)); font-weight: 700; font-size: 12px; color: var(--bsp-text, #e2e8f0); } .bsp-generations-list { padding: 10px; max-height: 340px; overflow-y: auto; } .bsp-gen-empty { font-size: 12px; color: var(--bsp-text-muted, #94a3b8); text-align: center; padding: 12px; } .bsp-gen-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; } .bsp-gen-item:last-child { margin-bottom: 0; } .bsp-gen-item-label { font-weight: 600; font-size: 12px; color: var(--bsp-text, #e2e8f0); margin-bottom: 6px; } .bsp-gen-progress-bar { height: 4px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; margin-bottom: 5px; } .bsp-gen-progress-fill { height: 100%; background: linear-gradient(90deg, #7B5CF0, #5B3FD0); border-radius: 99px; transition: width .6s ease; } .bsp-gen-item-meta { font-size: 10.5px; color: var(--bsp-text-muted, #94a3b8); } .bsp-gen-item-meta code { background: rgba(255,255,255,.07); border-radius: 4px; padding: 1px 4px; } .bsp-gen-item-status { font-size: 11px; color: var(--bsp-text-muted, #94a3b8); margin-top: 4px; } .bsp-generations-fab { position: fixed; bottom: 26px; right: 24px; z-index: 9997; background: linear-gradient(135deg,#7B5CF0,#5B3FD0); color: #fff; border: none; border-radius: 99px; padding: 8px 16px; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 20px rgba(91,63,208,.45); display: flex; align-items: center; gap: 6px; transition: transform .15s; } .bsp-generations-fab:hover { transform: scale(1.06); } /* ══════════════════════════════════════════════════════════ VOICE AGENT MEDIA PANEL ══════════════════════════════════════════════════════════ */ .bsp-va-label-media { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #7B5CF0; margin: 4px 0 6px; padding: 0 2px; } .bsp-va-media-agent { background: rgba(123,92,240,.07); border: 1px solid rgba(123,92,240,.2); border-radius: 12px; padding: 10px 12px; margin-bottom: 4px; } .bsp-va-media-prompt { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: var(--bsp-text, #e2e8f0); font-size: 11.5px; padding: 7px 9px; resize: vertical; margin-bottom: 7px; outline: none; font-family: inherit; line-height: 1.4; box-sizing: border-box; } .bsp-va-media-prompt:focus { border-color: rgba(123,92,240,.5); } .bsp-va-media-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; align-items: center; } .bsp-va-media-row .bsp-select-sm, .bsp-va-media-row .bsp-input-sm { flex: 1; min-width: 80px; font-size: 11px; } .bsp-input-sm { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: var(--bsp-text, #e2e8f0); padding: 5px 8px; outline: none; font-family: inherit; font-size: 11px; } .bsp-toggle-label-sm { font-size: 10.5px; display: flex; align-items: center; gap: 4px; } .bsp-va-submit-btn { font-size: 11px !important; padding: 7px 12px !important; margin-top: 4px; background: linear-gradient(135deg,#7B5CF0,#5B3FD0) !important; border: none !important; border-radius: 8px !important; } .bsp-va-submit-btn:hover { opacity: .9; } .bsp-va-agent-status { margin-top: 7px; font-size: 10.5px; color: var(--bsp-text-muted, #94a3b8); background: rgba(0,0,0,.2); border-radius: 6px; padding: 6px 8px; max-height: 120px; overflow-y: auto; } .bsp-va-agent-status pre.bsp-va-json-preview { font-size: 9.5px; color: #a3e635; white-space: pre-wrap; word-break: break-all; margin: 0 0 4px; font-family: monospace; } /* Media card click cursor */ .bsp-play-card-shell { cursor: pointer; transition: transform .12s, box-shadow .12s; } .bsp-play-card-shell:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); } /* ══════════════════════════════════════════════════════════ MUSIC AGENT FULL PANEL ══════════════════════════════════════════════════════════ */ .bsp-va-music-full { padding: 12px !important; } .bsp-va-toggles { background: rgba(123,92,240,.1); border-radius: 8px; padding: 7px 10px !important; margin-bottom: 8px !important; } .bsp-va-toggle-highlight { color: #a78bfa !important; font-weight: 700 !important; } .bsp-va-toggle-highlight input { accent-color: #7B5CF0; } .bsp-va-field-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bsp-text-muted, #94a3b8); margin-bottom: 3px; } .bsp-va-mode-hint { font-weight: 400; text-transform: none; font-size: 9.5px; letter-spacing: 0; color: #a78bfa; margin-left: 4px; } .bsp-va-field-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bsp-va-field-wrap .bsp-input-sm, .bsp-va-field-wrap .bsp-select-sm { width: 100%; box-sizing: border-box; } /* Advanced sliders */ .bsp-va-advanced { margin: 6px 0; } .bsp-va-advanced-toggle { cursor: pointer; padding: 4px 0; list-style: none; display: flex; align-items: center; gap: 4px; } .bsp-va-advanced-toggle::marker { display: none; } .bsp-va-sliders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 6px; } .bsp-va-slider-row { display: flex; flex-direction: column; gap: 2px; } .bsp-va-slider-full { grid-column: 1 / -1; } .bsp-va-slider-wrap { display: flex; align-items: center; gap: 6px; } .bsp-va-slider-wrap .bsp-range { flex: 1; } .bsp-va-slider-wrap .bsp-range-val { font-size: 10px; font-weight: 700; color: #a78bfa; min-width: 28px; text-align: right; } /* Tab flash animation for visual navigation */ @keyframes bspTabFlash { 0% { background: rgba(123,92,240,.5); color: #fff; } 60% { background: rgba(123,92,240,.25); } 100% { background: transparent; } } .bsp-play-tab.bsp-tab-flash { animation: bspTabFlash .9s ease-out; } /* ══════════════════════════════════════════════════════════ VOICE COMMAND CENTRE (VCC) ══════════════════════════════════════════════════════════ */ .bsp-voice-command-centre { margin: 0 -4px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; } /* Search bar */ .bsp-vcc-search-wrap { display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 0 10px; margin: 0 4px 8px; } .bsp-vcc-search-icon { font-size: 12px; opacity: .6; } .bsp-vcc-search { flex: 1; background: none; border: none; outline: none; color: var(--bsp-text, #e2e8f0); font-size: 12px; padding: 7px 0; font-family: inherit; } .bsp-vcc-search::placeholder { color: rgba(255,255,255,.35); } .bsp-vcc-search-clear { background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer; font-size: 11px; padding: 2px 4px; border-radius: 4px; line-height: 1; } .bsp-vcc-search-clear:hover { color: #fff; background: rgba(255,255,255,.1); } /* Category tabs */ .bsp-vcc-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 4px 6px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 8px; } .bsp-vcc-tab { padding: 4px 9px; border-radius: 20px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); font-size: 10.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; } .bsp-vcc-tab:hover { background: rgba(255,255,255,.1); color: #fff; } .bsp-vcc-tab.active { background: linear-gradient(135deg,#7B5CF0,#5B3FD0); border-color: transparent; color: #fff; } /* Grid + chips */ .bsp-vcc-grid { max-height: 280px; overflow-y: auto; padding: 0 4px 4px; } .bsp-vcc-cat-head { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.4); padding: 8px 2px 4px; margin-top: 2px; } .bsp-vcc-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; } .bsp-vcc-chip { padding: 4px 9px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: rgba(255,255,255,.75); font-size: 11px; cursor: pointer; white-space: nowrap; transition: background .12s, transform .1s; } .bsp-vcc-chip:hover { background: rgba(255,255,255,.12); color: #fff; transform: translateY(-1px); } .bsp-vcc-chip:active { transform: scale(.96); } .bsp-vcc-chip-generate { border-color: rgba(123,92,240,.3); } .bsp-vcc-chip-generate:hover { background: rgba(123,92,240,.2); border-color: rgba(123,92,240,.5); } .bsp-vcc-chip-media { border-color: rgba(239,68,68,.25); } .bsp-vcc-chip-media:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); } .bsp-vcc-chip-canvas { border-color: rgba(34,197,94,.2); } .bsp-vcc-chip-canvas:hover { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.4); } .bsp-vcc-chip-voice { border-color: rgba(251,191,36,.25); } .bsp-vcc-chip-voice:hover { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.4); } .bsp-vcc-chip-brand { border-color: rgba(14,165,233,.25); } .bsp-vcc-chip-brand:hover { background: rgba(14,165,233,.12); border-color: rgba(14,165,233,.4); } .bsp-vcc-chip-docs { border-color: rgba(20,184,166,.25); } .bsp-vcc-chip-docs:hover { background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.4); } .bsp-vcc-chip-automation { border-color: rgba(249,115,22,.25); } .bsp-vcc-chip-automation:hover { background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.4); } .bsp-vcc-chip-nav { border-color: rgba(148,163,184,.2); } .bsp-vcc-chip-nav:hover { background: rgba(148,163,184,.1); } .bsp-vcc-count { font-size: 10px; color: rgba(255,255,255,.3); text-align: right; padding: 4px 6px 0; } .bsp-vcc-empty { font-size: 11.5px; color: rgba(255,255,255,.3); text-align: center; padding: 20px; } /* ══════════════════════════════════════════════════════════ VOICE QUICK ACTION SECTION TABS ══════════════════════════════════════════════════════════ */ .bsp-va-section-tabs { display: flex; gap: 3px; flex-wrap: wrap; margin: 10px 0 8px; border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 8px; } .bsp-va-stab { padding: 4px 9px; border-radius: 20px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); font-size: 10px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; } .bsp-va-stab:hover { background: rgba(255,255,255,.1); color: #fff; } .bsp-va-stab.active { background: rgba(123,92,240,.3); border-color: rgba(123,92,240,.5); color: #fff; } .bsp-va-section { display: none; } .bsp-va-section.active { display: block; } .bsp-va-sublabel { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.4); margin: 0 0 5px; padding: 0 2px; } /* Make va-grid chips slightly smaller but more dense */ .bsp-va-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; } .bsp-va-btn { padding: 5px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); font-size: 10.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .12s, transform .1s; } .bsp-va-btn:hover { background: rgba(255,255,255,.13); color: #fff; transform: translateY(-1px); } .bsp-va-btn:active { transform: scale(.96); } .bsp-va-btn-nav { border-color: rgba(148,163,184,.2); background: rgba(148,163,184,.06); } .bsp-va-btn-nav:hover { background: rgba(148,163,184,.14); } .bsp-va-btn-canvas { border-color: rgba(34,197,94,.2); background: rgba(34,197,94,.05); } .bsp-va-btn-canvas:hover { background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.4); } .bsp-va-btn-media { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.07); } .bsp-va-btn-media:hover { background: rgba(239,68,68,.16); } .bsp-va-btn-ai { border-color: rgba(123,92,240,.3); background: rgba(123,92,240,.07); } .bsp-va-btn-ai:hover { background: rgba(123,92,240,.18); } .bsp-va-btn-voice { border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.06); } .bsp-va-btn-voice:hover { background: rgba(251,191,36,.14); } .bsp-va-btn-auto { border-color: rgba(249,115,22,.25); background: rgba(249,115,22,.06); } .bsp-va-btn-auto:hover { background: rgba(249,115,22,.14); } .bsp-va-btn-batch { border-color: rgba(20,184,166,.25); background: rgba(20,184,166,.06); font-weight: 700; } .bsp-va-btn-batch:hover { background: rgba(20,184,166,.14); } /* ══════════════════════════════════════════════════════════ AUTO-ENHANCE INDICATOR ══════════════════════════════════════════════════════════ */ .bsp-auto-enhance-hint { font-size: 10px; color: rgba(123,92,240,.7); margin-top: 3px; display: flex; align-items: center; gap: 4px; font-style: italic; } .bsp-auto-enhance-status { font-size: 11px; font-weight: 600; color: #a78bfa; } .bsp-auto-enhance-status:not(:empty) { background: rgba(123,92,240,.12); border: 1px solid rgba(123,92,240,.25); border-radius: 6px; padding: 2px 8px; display: inline-block; } /* Spinning enhance indicator */ @keyframes bspEnhanceSpin { 0% { transform: rotate(0deg); opacity: 1; } 50% { transform: rotate(180deg); opacity: .6; } 100% { transform: rotate(360deg); opacity: 1; } } .bsp-enhance-spin { display: inline-block; animation: bspEnhanceSpin .8s linear infinite; } /* Enhance button active glow */ #bsp-enhance-music-prompt-btn, #bsp-enhance-video-prompt-btn, #bsp-enhance-image-prompt-btn { border-color: rgba(123,92,240,.4) !important; color: #a78bfa !important; background: rgba(123,92,240,.08) !important; transition: background .15s, border-color .15s, box-shadow .15s; } #bsp-enhance-music-prompt-btn:hover, #bsp-enhance-video-prompt-btn:hover, #bsp-enhance-image-prompt-btn:hover { background: rgba(123,92,240,.18) !important; box-shadow: 0 0 0 2px rgba(123,92,240,.2); } #bsp-enhance-music-prompt-btn:disabled, #bsp-enhance-video-prompt-btn:disabled, #bsp-enhance-image-prompt-btn:disabled { opacity: .75; } /* ══════════════════════════════════════════════════════════ SIDEBAR NAV — GROUPS, BACK/FORWARD, QUICK JUMP ══════════════════════════════════════════════════════════ */ /* Nav history row */ .bsp-nav-history-row { display: flex; align-items: center; gap: 4px; padding: 6px 10px 4px; border-bottom: 1px solid rgba(255,255,255,.06); } .bsp-nav-hist-btn { width: 24px; height: 24px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; line-height: 1; padding: 0; flex-shrink: 0; } .bsp-nav-hist-btn:not(:disabled):hover { background: rgba(255,255,255,.14); color: #fff; } .bsp-nav-hist-btn:disabled { opacity: .28; cursor: default; } .bsp-nav-crumb { flex: 1; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: .05em; } /* Quick jump trigger button */ .bsp-nav-quickjump { display: flex; align-items: center; gap: 6px; margin: 6px 10px 4px; padding: 6px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: rgba(255,255,255,.5); font-size: 11.5px; cursor: pointer; transition: background .15s, color .15s; width: calc(100% - 20px); text-align: left; } .bsp-nav-quickjump:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); } .bsp-nav-quickjump span { font-size: 14px; } .bsp-nav-quickjump kbd { margin-left: auto; font-size: 9px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: 4px; padding: 1px 5px; color: rgba(255,255,255,.4); font-family: monospace; } /* Nav group labels */ .bsp-nav-group-label { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.25); padding: 10px 14px 3px; } /* ══════════════════════════════════════════════════════════ QUICK JUMP PALETTE ══════════════════════════════════════════════════════════ */ .bsp-quickjump-palette { position: fixed; left: 220px; top: 80px; z-index: 99998; width: 420px; max-width: 92vw; background: var(--bsp-bg, #1a1a2e); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; box-shadow: 0 32px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.07); overflow: hidden; } .bsp-qj-search-wrap { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); } .bsp-qj-icon { font-size: 16px; opacity: .5; flex-shrink: 0; } .bsp-qj-input { flex: 1; background: none; border: none; outline: none; color: var(--bsp-text, #e2e8f0); font-size: 14px; font-family: inherit; } .bsp-qj-input::placeholder { color: rgba(255,255,255,.3); } .bsp-qj-esc { font-size: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 5px; padding: 2px 6px; color: rgba(255,255,255,.35); font-family: monospace; flex-shrink: 0; } .bsp-qj-results { max-height: 340px; overflow-y: auto; padding: 6px; } .bsp-qj-empty { font-size: 12px; color: rgba(255,255,255,.3); text-align: center; padding: 20px; } .bsp-qj-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; transition: background .1s; color: var(--bsp-text, #e2e8f0); } .bsp-qj-row:hover, .bsp-qj-row.bsp-qj-selected { background: rgba(123,92,240,.18); } .bsp-qj-row-icon { font-size: 16px; width: 24px; text-align: center; flex-shrink: 0; } .bsp-qj-row-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .bsp-qj-row-label { font-size: 13px; font-weight: 600; color: var(--bsp-text, #e2e8f0); } .bsp-qj-row-desc { font-size: 11px; color: rgba(255,255,255,.45); } .bsp-qj-row-type { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 20px; flex-shrink: 0; } .bsp-qj-type-page { background: rgba(123,92,240,.2); color: #a78bfa; } .bsp-qj-type-action { background: rgba(34,197,94,.15); color: #4ade80; } .bsp-qj-type-brand { background: rgba(14,165,233,.15); color: #38bdf8; } .bsp-qj-type-node { background: rgba(251,191,36,.15); color: #fbbf24; } .bsp-qj-footer { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid rgba(255,255,255,.06); font-size: 10.5px; color: rgba(255,255,255,.3); } .bsp-qj-footer kbd { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; padding: 0 4px; font-family: monospace; font-size: 9.5px; } /* ══════════════════════════════════════════════════════════ PROMPT LIBRARY — FULL REBUILD ══════════════════════════════════════════════════════════ */ /* Ref bar */ .bsp-prompt-refbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: rgba(123,92,240,.07); border: 1px solid rgba(123,92,240,.2); border-radius: 14px; padding: 12px 18px; margin-bottom: 14px; } .bsp-prompt-refbar-left { display: flex; align-items: center; gap: 12px; } .bsp-prompt-refbar-icon { font-size: 28px; } .bsp-prompt-refbar-copy strong { font-size: 13px; color: var(--bsp-text,#e2e8f0); } .bsp-prompt-refbar-copy p { font-size: 11.5px; color: rgba(255,255,255,.5); margin: 2px 0 0; } .bsp-prompt-refbar-copy em { color: #a78bfa; font-style: normal; font-weight: 700; } .bsp-prompt-refbar-jump { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bsp-prompt-refbar-jump .bsp-input-sm { width: 80px; } /* Controls bar */ .bsp-prompts-controls-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; } .bsp-prompts-sort-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .bsp-prompts-sort-label { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; } .bsp-sort-btn { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); cursor: pointer; transition: background .12s, color .12s; } .bsp-sort-btn:hover { background: rgba(255,255,255,.12); color: #fff; } .bsp-sort-btn.active { background: rgba(123,92,240,.25); border-color: rgba(123,92,240,.5); color: #a78bfa; } .bsp-prompts-view-row { display: flex; gap: 4px; } .bsp-view-toggle { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: rgba(255,255,255,.5); cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background .12s; } .bsp-view-toggle.active { background: rgba(123,92,240,.2); border-color: rgba(123,92,240,.4); color: #a78bfa; } /* Prompt grid */ .bsp-prompts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .bsp-prompts-grid.bsp-prompts-list-mode { grid-template-columns: 1fr; } /* Prompt card */ .bsp-prompt-card { background: var(--bsp-card-bg, rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px 15px; display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, box-shadow .15s, transform .12s; position: relative; } .bsp-prompt-card:hover { border-color: rgba(123,92,240,.3); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25); } .bsp-prompt-card-starred { border-color: rgba(251,191,36,.3) !important; } .bsp-prompt-card-type-video { border-left: 3px solid rgba(239,68,68,.4); } .bsp-prompt-card-type-music { border-left: 3px solid rgba(34,197,94,.4); } .bsp-prompt-card-type-image { border-left: 3px solid rgba(123,92,240,.4); } .bsp-prompt-card-type-multi { border-left: 3px solid rgba(59,130,246,.4); } .bsp-prompt-card-header { display: flex; align-items: center; gap: 8px; } .bsp-prompt-id-pill { flex-shrink: 0; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; } .bsp-prompt-id-pill strong { font-size: 12px; } .bsp-prompt-card-title { flex: 1; font-weight: 700; font-size: 13px; color: var(--bsp-text,#e2e8f0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-prompt-card-header-actions { flex-shrink: 0; } .bsp-prompt-star-btn { background: none; border: none; font-size: 16px; cursor: pointer; padding: 2px; opacity: .5; transition: opacity .12s, transform .12s; } .bsp-prompt-star-btn:hover, .bsp-prompt-star-btn.bsp-starred { opacity: 1; transform: scale(1.15); } .bsp-prompt-card-badges { display: flex; flex-wrap: wrap; gap: 4px; } .bsp-prompt-badge { font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 600; } .bsp-prompt-badge.cat { background: rgba(123,92,240,.15); color: #a78bfa; } .bsp-prompt-badge.subcat { background: rgba(14,165,233,.15); color: #38bdf8; } .bsp-prompt-badge.tag { background: rgba(255,255,255,.07); color: rgba(255,255,255,.55); } .bsp-prompt-alias-badge { font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 700; background: rgba(251,191,36,.12); color: #fbbf24; border: 1px solid rgba(251,191,36,.2); } .bsp-prompt-ref-badges { display: flex; gap: 5px; flex-wrap: wrap; } .bsp-prompt-ref-badge { font-size: 10px; padding: 2px 6px; border-radius: 6px; font-weight: 700; } .bsp-ref-img { background: rgba(123,92,240,.15); color: #a78bfa; } .bsp-ref-vid { background: rgba(239,68,68,.15); color: #f87171; } .bsp-ref-aud { background: rgba(34,197,94,.15); color: #4ade80; } .bsp-ref-txt { background: rgba(14,165,233,.15); color: #38bdf8; } .bsp-prompt-card-text { font-size: 11.5px; color: rgba(255,255,255,.55); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bsp-prompt-card-notes { font-size: 10.5px; color: rgba(255,255,255,.35); font-style: italic; } .bsp-prompt-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; } .bsp-prompt-use-count { font-size: 10.5px; color: rgba(255,255,255,.35); } .bsp-prompt-card-actions { display: flex; gap: 5px; } .bsp-prompt-highlighted { box-shadow: 0 0 0 3px rgba(123,92,240,.6) !important; border-color: #7B5CF0 !important; animation: bspPromptPulse .5s ease-out 2; } @keyframes bspPromptPulse { 0% { box-shadow: 0 0 0 3px rgba(123,92,240,.8); } 100% { box-shadow: 0 0 0 8px rgba(123,92,240,0); } } /* Modal overhaul */ .bsp-modal-xl { max-width: 900px; width: 92vw; } .bsp-prompt-modal-id-badge { font-size: 11px; background: rgba(123,92,240,.2); color: #a78bfa; border: 1px solid rgba(123,92,240,.3); border-radius: 20px; padding: 2px 10px; font-weight: 700; } .bsp-prompt-modal-body { display: grid; grid-template-columns: 1fr 340px; gap: 20px; max-height: 70vh; overflow-y: auto; } @media (max-width: 700px) { .bsp-prompt-modal-body { grid-template-columns: 1fr; } } .bsp-prompt-modal-col-refs { background: rgba(255,255,255,.03); border-left: 1px solid rgba(255,255,255,.07); padding-left: 16px; } .bsp-prompt-modal-row { display: flex; gap: 10px; flex-wrap: wrap; } .bsp-fg-sm { flex: 1; min-width: 100px; } .bsp-fg-md { flex: 1; min-width: 140px; } .bsp-fg-xs { flex: 0 0 80px; } /* Reference slots */ .bsp-prompt-refs-header { font-weight: 800; font-size: 12px; margin-bottom: 4px; color: var(--bsp-text,#e2e8f0); } .bsp-prompt-refs-hint { font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 12px; line-height: 1.4; } .bsp-prompt-ref-section { margin-bottom: 10px; } .bsp-prompt-ref-section-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.4); margin-bottom: 5px; } .bsp-prompt-ref-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; } .bsp-ref-token { font-size: 10px; font-family: monospace; background: rgba(123,92,240,.15); color: #a78bfa; border-radius: 5px; padding: 2px 6px; white-space: nowrap; font-weight: 700; } .bsp-ref-token-video { background: rgba(239,68,68,.15); color: #f87171; } .bsp-ref-token-audio { background: rgba(34,197,94,.15); color: #4ade80; } .bsp-prompt-ref-row .bsp-input-sm { flex: 1; } /* Preview */ .bsp-prompt-ref-preview { margin-top: 10px; } #bsp-prompt-ref-preview-body { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .bsp-ref-prev-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: rgba(255,255,255,.5); } .bsp-ref-prev-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); } .bsp-ref-prev-vid, .bsp-ref-prev-aud { font-size: 10px; } .bsp-ref-prev-icon { font-size: 22px; } /* ═══════════════════════════════════════════════════════════════ AUDIO PLAYER — robust multi-source player with fallback ═══════════════════════════════════════════════════════════════ */ .bsp-audio-player-wrap { background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.2); border-radius: 10px; padding: 10px 12px; } .bsp-audio-hero { font-size: 36px; text-align: center; margin-bottom: 4px; line-height: 1; } .bsp-audio-player-wrap audio { width: 100%; border-radius: 6px; margin-top: 2px; } .bsp-audio-play-hint { font-size: 11px; color: #a78bfa; text-align: center; padding: 4px 8px; background: rgba(167,139,250,.1); border-radius: 6px; margin-top: 4px; } .bsp-audio-urls { margin-top: 6px; font-size: 9px; color: #6b7280; word-break: break-all; } .bsp-audio-urls a { color: #60a5fa; text-decoration: none; } .bsp-audio-urls a:hover { text-decoration: underline; } /* ── History media items ── */ .bsp-history-item.bsp-hist-audio .bsp-hist-thumb-wrap, .bsp-history-item.bsp-hist-video .bsp-hist-thumb-wrap { min-height: 50px; } .bsp-hist-thumb-audio { font-size: 36px; text-align: center; padding: 8px; background: rgba(124,58,237,.1); border-radius: 8px; } .bsp-hist-thumb-video { font-size: 36px; text-align: center; padding: 8px; background: rgba(3,105,161,.1); border-radius: 8px; } .bsp-hist-media-preview { padding: 0 8px 8px; } .bsp-hist-audio-player audio { width: 100%; border-radius: 6px; } .bsp-hist-media-type-badge { font-size: 10px; padding: 1px 6px; border-radius: 10px; color: #fff; font-weight: 700; } /* ── Asset cards — audio & video ── */ .bsp-asset-card.bsp-asset-audio, .bsp-asset-card.bsp-asset-video { border: 1px solid rgba(124,58,237,.25); } .bsp-asset-audio-wrap audio { width: 100%; } .bsp-asset-video-wrap video { width: 100%; } .bsp-asset-type-pill { display: inline-block; } /* ── WP Save button on audio players ── */ .bsp-audio-wp-save { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); color: #4ade80 !important; } .bsp-audio-wp-save:hover { background: rgba(34,197,94,.15); } /* ═══════════════════════════════════════════════════════════════ DOCUMENT VIEW — AI Generator Panel + Voice Profiles + Cards ═══════════════════════════════════════════════════════════════ */ /* ── AI Generate Panel ── */ .bsp-doc-ai-panel { background: linear-gradient(135deg, #0f0f1a 0%, #1a0f2e 100%); border-radius: 16px; margin: 0 0 24px; border: 1px solid rgba(123,92,240,.3); overflow: hidden; } .bsp-doc-ai-panel-inner { padding: 28px 32px; } .bsp-doc-ai-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .bsp-doc-ai-panel-title { font-size: 18px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #a78bfa, #60a5fa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Doc type selector chips ── */ .bsp-doc-ai-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .bsp-doc-ai-type-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .15s; color: rgba(255,255,255,.7); font-size: 12px; font-weight: 600; } .bsp-doc-ai-type-btn:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-1px); } .bsp-doc-ai-type-btn.active { background: var(--type-color, #7b5cf0)22; border-color: var(--type-color, #7b5cf0); color: #fff; box-shadow: 0 0 12px var(--type-color, #7b5cf0)44; } .ai-type-icon { font-size: 16px; } .ai-type-label { font-size: 11px; } /* ── Voice profile grid ── */ .bsp-doc-ai-section { margin-bottom: 20px; } .bsp-doc-ai-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 10px; } .bsp-voice-profiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .bsp-voice-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .15s; color: rgba(255,255,255,.65); font-size: 12px; font-weight: 600; } .bsp-voice-btn:hover { background: rgba(255,255,255,.1); color: #fff; } .bsp-voice-btn.active { background: rgba(123,92,240,.25); border-color: #7b5cf0; color: #c4b5fd; } .voice-icon { font-size: 16px; } .voice-label { font-size: 11px; } .bsp-voice-desc { font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.6; padding: 8px 12px; background: rgba(255,255,255,.04); border-radius: 6px; border-left: 3px solid #7b5cf0; } /* ── AI form config area ── */ .bsp-doc-ai-config { } .bsp-doc-ai-textarea { width: 100%; min-height: 80px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: rgba(255,255,255,.85); font-size: 13px; padding: 12px; resize: vertical; } .bsp-doc-ai-textarea::placeholder { color: rgba(255,255,255,.25); } .bsp-doc-ai-row { display: flex; gap: 16px; align-items: flex-start; } .bsp-doc-ai-generate-btn { width: 100%; padding: 15px; font-size: 15px; font-weight: 800; letter-spacing: .5px; margin-top: 8px; background: linear-gradient(135deg, #7b5cf0, #3b82f6); border: none; } .bsp-doc-ai-generate-btn:hover { background: linear-gradient(135deg, #6d4fe0, #2563eb); } .bsp-doc-ai-status { margin-top: 12px; padding: 12px 16px; background: rgba(255,255,255,.06); border-radius: 8px; font-size: 13px; color: rgba(255,255,255,.75); display: flex; align-items: center; gap: 10px; } .bsp-doc-ai-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.2); border-top-color: #7b5cf0; border-radius: 50%; animation: bsp-spin .7s linear infinite; flex-shrink: 0; } @keyframes bsp-spin { to { transform: rotate(360deg); } } /* ── Doc cards ── */ .bsp-docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 8px 0 24px; } .bsp-doc-card { background: var(--bsp-card, #1e1e2e); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); transition: transform .15s, box-shadow .15s; } .bsp-doc-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.3); } .bsp-doc-card-header { padding: 20px; display: flex; align-items: center; justify-content: space-between; min-height: 64px; } .bsp-doc-card-icon { font-size: 28px; line-height: 1; } .bsp-doc-ai-badge { background: linear-gradient(135deg,#7b5cf0,#3b82f6); color:#fff; font-size:9px; font-weight:800; padding:2px 7px; border-radius:10px; letter-spacing:.5px; } .bsp-doc-voice-mini { font-size:16px; } .bsp-doc-sent-badge { background: rgba(34,197,94,.15); color:#4ade80; font-size:9px; font-weight:700; padding:2px 7px; border-radius:10px; } .bsp-doc-card-body { padding: 12px 16px; } .bsp-doc-card-type { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 4px; } .bsp-doc-card-title { font-size: 14px; font-weight: 700; color: var(--bsp-text, #e2e8f0); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-doc-card-meta { font-size: 11px; color: rgba(255,255,255,.35); } .bsp-doc-status-active { color: #4ade80; } .bsp-doc-status-draft { color: #f59e0b; } .bsp-doc-status-failed { color: #f87171; } .bsp-doc-card-actions { display: flex; gap: 6px; padding: 10px 16px 14px; border-top: 1px solid rgba(255,255,255,.06); } .bsp-doc-card-actions .bsp-btn { flex: 1; font-size: 11px; padding: 5px 8px; } /* ── Voice bar inside editor ── */ .bsp-doc-voice-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(123,92,240,.1); border-bottom: 1px solid rgba(123,92,240,.2); } .bsp-doc-voice-badge { background: rgba(123,92,240,.3); color: #c4b5fd; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 12px; } .bsp-doc-voice-hint { font-size: 11px; color: rgba(255,255,255,.4); } /* ── Doc type tabs scroll ── */ .bsp-doc-type-tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 16px; scrollbar-width: none; -ms-overflow-style: none; } .bsp-doc-type-tabs::-webkit-scrollbar { display: none; } .bsp-doc-type-tab { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); cursor: pointer; white-space: nowrap; transition: all .15s; } .bsp-doc-type-tab:hover { background: rgba(255,255,255,.1); color: #fff; } .bsp-doc-type-tab.active { background: var(--bsp-accent, #7b5cf0); border-color: var(--bsp-accent, #7b5cf0); color: #fff; } /* ── History doc entries ── */ .bsp-history-item[data-media-type="document"] .bsp-hist-thumb-wrap { background: rgba(123,92,240,.08); border-radius: 8px; display: flex; align-items: center; justify-content: center; min-width: 60px; font-size: 28px; } /* ═══════════════════════════════════════════════════════════════ LIBRARY TABS ═══════════════════════════════════════════════════════════════ */ .bsp-lib-tabs { display:flex; gap:6px; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:0; } .bsp-lib-tab { background:transparent; border:none; border-bottom:2px solid transparent; padding:10px 18px; font-size:13px; font-weight:600; color:rgba(255,255,255,.45); cursor:pointer; transition:all .15s; margin-bottom:-1px; border-radius:6px 6px 0 0; } .bsp-lib-tab:hover { color:rgba(255,255,255,.8); background:rgba(255,255,255,.05); } .bsp-lib-tab.active { color:#a78bfa; border-bottom-color:#7b5cf0; background:rgba(123,92,240,.08); } .bsp-lib-tab-panel { } /* ═══════════════════════════════════════════════════════════════ COLOR SYSTEM PANEL ═══════════════════════════════════════════════════════════════ */ .bsp-color-system-wrap { max-width:960px; } .bsp-cs-input-row { display:flex; gap:12px; align-items:center; margin-bottom:24px; flex-wrap:wrap; } .bsp-cs-picker-wrap { display:flex; align-items:center; gap:8px; } .bsp-cs-native-picker { width:52px; height:42px; border-radius:10px; border:2px solid rgba(255,255,255,.15); cursor:pointer; padding:2px; background:none; } .bsp-cs-hex { width:110px; font-family:monospace; font-size:15px; font-weight:700; letter-spacing:1px; } /* Code cards grid */ .bsp-cs-codes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; margin-bottom:28px; } .bsp-cs-code-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-left:3px solid var(--preview-color,#7b5cf0); border-radius:8px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; position:relative; transition:background .15s; } .bsp-cs-code-card:hover { background:rgba(255,255,255,.07); } .bsp-cs-code-label { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.35); } .bsp-cs-code-value { font-family:'Courier New',monospace; font-size:12px; color:#e2e8f0; word-break:break-all; line-height:1.4; padding-right:24px; } .bsp-cs-copy-btn { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08); border:none; color:rgba(255,255,255,.5); border-radius:4px; padding:3px 6px; cursor:pointer; font-size:11px; transition:all .15s; } .bsp-cs-copy-btn:hover { background:rgba(123,92,240,.4); color:#fff; } /* Palette generator */ .bsp-cs-palettes { margin-bottom:28px; } .bsp-cs-palette-header { margin-bottom:12px; } .bsp-cs-palette-tabs { display:flex; flex-wrap:wrap; gap:6px; } .bsp-cs-pal-tab { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:5px 12px; font-size:11px; font-weight:600; color:rgba(255,255,255,.5); cursor:pointer; transition:all .15s; } .bsp-cs-pal-tab:hover { color:#fff; background:rgba(255,255,255,.1); } .bsp-cs-pal-tab.active { background:#7b5cf0; border-color:#7b5cf0; color:#fff; } .bsp-cs-palette-swatches { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 10px; } .bsp-cs-swatch { width:60px; height:60px; border-radius:10px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; transition:transform .15s,box-shadow .15s; border:2px solid rgba(255,255,255,.1); } .bsp-cs-swatch:hover { transform:scale(1.12); box-shadow:0 4px 20px rgba(0,0,0,.4); z-index:2; } .bsp-cs-swatch-hex { font-size:8px; font-family:monospace; font-weight:700; opacity:.85; } .bsp-cs-swatch-use { position:absolute; top:2px; right:2px; background:rgba(0,0,0,.35); border:none; color:#fff; border-radius:3px; padding:1px 4px; font-size:9px; cursor:pointer; opacity:0; transition:opacity .15s; } .bsp-cs-swatch:hover .bsp-cs-swatch-use { opacity:1; } .bsp-cs-palette-codes { display:flex; flex-direction:column; gap:4px; } .bsp-cs-pal-code { display:flex; align-items:center; gap:10px; padding:7px 12px; background:rgba(255,255,255,.03); border-left:3px solid transparent; border-radius:0 6px 6px 0; } .bsp-cs-pal-dot { width:16px; height:16px; border-radius:3px; flex-shrink:0; } .bsp-cs-pal-code code { font-family:monospace; font-size:12px; color:#e2e8f0; min-width:80px; } .bsp-cs-pal-rgb { font-size:11px; color:rgba(255,255,255,.35); flex:1; } .bsp-cs-copy-inline { background:transparent; border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.4); padding:2px 6px; border-radius:4px; font-size:10px; cursor:pointer; } .bsp-cs-copy-inline:hover { color:#fff; border-color:rgba(255,255,255,.3); } /* Saved palettes */ .bsp-cs-saved { margin-bottom:28px; } .bsp-cs-saved-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:12px; font-weight:700; color:rgba(255,255,255,.5); letter-spacing:1px; text-transform:uppercase; } .bsp-cs-saved-list { display:flex; flex-direction:column; gap:8px; } .bsp-cs-saved-empty { font-size:12px; color:rgba(255,255,255,.25); padding:12px; text-align:center; } .bsp-cs-saved-item { background:rgba(255,255,255,.04); border-radius:8px; padding:12px 14px; display:flex; align-items:center; gap:14px; } .bsp-cs-saved-name { font-size:13px; font-weight:700; color:#e2e8f0; min-width:160px; } .bsp-cs-saved-swatches { display:flex; flex-wrap:wrap; gap:3px; flex:1; } .bsp-cs-saved-meta { font-size:10px; color:rgba(255,255,255,.3); white-space:nowrap; } .bsp-cs-saved-actions { display:flex; gap:4px; } /* Accessibility checker */ .bsp-cs-a11y { background:rgba(255,255,255,.03); border-radius:12px; padding:18px; border:1px solid rgba(255,255,255,.07); } .bsp-cs-a11y-header { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:14px; } .bsp-cs-a11y-row { display:flex; gap:14px; flex-wrap:wrap; } .bsp-cs-a11y-pair { display:flex; align-items:center; gap:8px; flex:1; min-width:180px; } .bsp-cs-a11y-preview { flex:1; padding:12px 16px; border-radius:8px; font-size:16px; font-weight:700; min-height:48px; display:flex; align-items:center; border:1px solid rgba(255,255,255,.1); } .bsp-cs-a11y-dark { } .bsp-cs-a11y-result { font-size:11px; min-width:120px; line-height:1.6; } .bsp-cs-brand-extras { margin:-16px 0 16px; } /* ═══════════════════════════════════════════════════════════════ TYPOGRAPHY PANEL ═══════════════════════════════════════════════════════════════ */ .bsp-typography-wrap { } .bsp-typo-header { display:flex; gap:12px; align-items:center; margin-bottom:24px; flex-wrap:wrap; } .bsp-typo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; } .bsp-typo-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:20px 18px; transition:border-color .15s,background .15s; } .bsp-typo-card:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.15); } .bsp-typo-card.bsp-typo-brand { border-color:#7b5cf0; background:rgba(123,92,240,.06); } .bsp-typo-preview { color:#fff; margin-bottom:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bsp-typo-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; } .bsp-typo-name { font-size:12px; font-weight:700; color:rgba(255,255,255,.6); flex:1; } .bsp-typo-brand-badge { background:#7b5cf0; color:#fff; font-size:9px; font-weight:800; padding:2px 7px; border-radius:10px; letter-spacing:.5px; } .bsp-typo-weights { color:rgba(255,255,255,.3); font-size:12px; } /* ═══════════════════════════════════════════════════════════════ CANVAS AUTO-LAYOUT DROPDOWN ═══════════════════════════════════════════════════════════════ */ .bsp-canvas-auto-wrap { position:relative; } .bsp-canvas-auto-trigger { background:linear-gradient(135deg,#7b5cf0,#3b82f6); color:#fff !important; border-color:#7b5cf0 !important; } .bsp-canvas-auto-menu { position:absolute; top:calc(100% + 6px); right:0; background:#1a1a2e; border:1px solid rgba(123,92,240,.35); border-radius:12px; padding:8px; min-width:240px; z-index:9999; box-shadow:0 12px 40px rgba(0,0,0,.5); } .bsp-auto-menu-section { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.3); padding:4px 10px 2px; margin-top:4px; } .bsp-auto-menu-section:first-child { margin-top:0; } .bsp-auto-menu-item { display:block; width:100%; text-align:left; background:transparent; border:none; color:rgba(255,255,255,.75); padding:8px 12px; border-radius:7px; font-size:12px; cursor:pointer; transition:all .12s; } .bsp-auto-menu-item:hover { background:rgba(123,92,240,.2); color:#fff; } .bsp-auto-menu-divider { height:1px; background:rgba(255,255,255,.07); margin:6px 4px; } /* ═══════════════════════════════════════════════════════════════ DOCUMENT TYPE PICKER MODAL ═══════════════════════════════════════════════════════════════ */ .bsp-dtp-modal { max-width: 780px; width: 95vw; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; } .bsp-dtp-modal .bsp-modal-header { flex-shrink: 0; } .bsp-dtp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 20px 24px; overflow-y: auto; flex: 1; } .bsp-dtp-card { background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.08); border-top: 3px solid var(--type-color, #7b5cf0); border-radius: 12px; padding: 18px 16px; cursor: pointer; transition: all .15s; text-align: center; } .bsp-dtp-card:hover { background: rgba(255,255,255,.09); border-color: var(--type-color, #7b5cf0); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.3); } .bsp-dtp-icon { font-size: 32px; line-height: 1; margin-bottom: 8px; } .bsp-dtp-label { font-size: 13px; font-weight: 800; color: #e2e8f0; margin-bottom: 4px; } .bsp-dtp-desc { font-size: 10px; color: rgba(255,255,255,.35); line-height: 1.5; } /* ═══════════════════════════════════════════════════════════════ TODO / KANBAN — Complete UI ═══════════════════════════════════════════════════════════════ */ .bsp-todo-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; position:relative; z-index:30; pointer-events:auto !important; } .bsp-todo-toolbar button, .bsp-todo-toolbar select, .bsp-todo-toolbar input, .bsp-todo-view-btn, .bsp-kanban-add-btn { pointer-events:auto !important; cursor:pointer; position:relative; z-index:31; } .bsp-todo-view-btns { display:flex; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,.1); } .bsp-todo-view-btn { background:rgba(255,255,255,.05); border:none; color:rgba(255,255,255,.5); padding:6px 12px; font-size:11px; font-weight:700; cursor:pointer; transition:all .15s; } .bsp-todo-view-btn:hover { background:rgba(255,255,255,.1); color:#fff; } .bsp-todo-view-btn.active { background:#7b5cf0; color:#fff; } /* Stats */ .bsp-todo-stats { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:10px 0 14px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:14px; } .bsp-todo-stat { text-align:center; padding:7px 11px; background:rgba(255,255,255,.04); border-radius:8px; min-width:52px; cursor:pointer; transition:background .15s; } .bsp-todo-stat:hover { background:rgba(255,255,255,.08); } .bsp-todo-stat-num { display:block; font-size:20px; font-weight:800; color:#e2e8f0; line-height:1; } .bsp-todo-stat-lbl { display:block; font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.3); margin-top:2px; } .bsp-todo-stat-inprog .bsp-todo-stat-num { color:#7B5CF0; } .bsp-todo-stat-review .bsp-todo-stat-num { color:#F59E0B; } .bsp-todo-stat-blocked .bsp-todo-stat-num { color:#EF4444; } .bsp-todo-stat-done .bsp-todo-stat-num { color:#22C55E; } .bsp-todo-stat-overdue .bsp-todo-stat-num { color:#F97316; } .bsp-todo-progress-wrap { display:flex; align-items:center; gap:8px; flex:1; min-width:120px; } .bsp-todo-progress-bar { flex:1; height:6px; background:rgba(255,255,255,.08); border-radius:3px; overflow:hidden; } .bsp-todo-progress-fill { height:100%; background:linear-gradient(90deg,#7b5cf0,#22c55e); border-radius:3px; transition:width .4s; } #bsp-todo-progress-pct { font-size:11px; font-weight:700; color:rgba(255,255,255,.4); white-space:nowrap; } /* Template + AI panels */ .bsp-todo-tpl-panel, .bsp-todo-ai-panel { background:linear-gradient(135deg,#0f0f1a,#1a0f2e); border-radius:14px; padding:18px 22px; margin-bottom:14px; border:1px solid rgba(123,92,240,.25); } .bsp-todo-tpl-header, .bsp-todo-ai-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; } .bsp-todo-tpl-title, .bsp-todo-ai-title { font-size:15px; font-weight:800; color:#a78bfa; } .bsp-todo-tpl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin-bottom:14px; } .bsp-todo-tpl-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-top:3px solid #7b5cf0; border-radius:10px; padding:14px; } .bsp-todo-tpl-icon { font-size:22px; margin-bottom:5px; } .bsp-todo-tpl-name { font-size:12px; font-weight:800; color:#e2e8f0; margin-bottom:3px; } .bsp-todo-tpl-desc { font-size:10px; color:rgba(255,255,255,.35); line-height:1.5; margin-bottom:5px; } .bsp-todo-tpl-count { font-size:9px; color:rgba(255,255,255,.25); font-weight:600; margin-bottom:4px; } .bsp-todo-tpl-footer { display:flex; gap:10px; align-items:center; padding-top:12px; border-top:1px solid rgba(255,255,255,.06); } .bsp-todo-ai-form { display:flex; flex-direction:column; gap:10px; } .bsp-todo-ai-goal-input { min-height:70px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:8px; color:rgba(255,255,255,.85); resize:vertical; padding:10px 12px; font-size:13px; font-family:inherit; } .bsp-todo-ai-goal-input::placeholder { color:rgba(255,255,255,.25); } /* Kanban */ .bsp-todo-kanban { display:flex; gap:12px; overflow-x:auto; padding-bottom:20px; min-height:55vh; } .bsp-kanban-col { flex:0 0 252px; min-width:252px; background:rgba(255,255,255,.03); border-radius:12px; padding:10px; border:1px solid rgba(255,255,255,.05); } .bsp-kanban-col-header { display:flex; align-items:center; gap:6px; padding:3px 0 9px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:8px; } .bsp-kanban-col-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; } .bsp-col-todo { background:#64748B; } .bsp-col-inprog { background:#7B5CF0; } .bsp-col-review { background:#F59E0B; } .bsp-col-blocked { background:#EF4444; } .bsp-col-done { background:#22C55E; } .bsp-kanban-col-title { font-size:12px; font-weight:800; color:rgba(255,255,255,.7); flex:1; } .bsp-kanban-col-count { background:rgba(255,255,255,.1); color:rgba(255,255,255,.5); font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; } .bsp-kanban-add-btn { background:transparent; border:none; color:rgba(255,255,255,.3); font-size:18px; cursor:pointer; padding:2px 6px; border-radius:6px; transition:all .15s; } .bsp-kanban-add-btn:hover { background:rgba(255,255,255,.1); color:#fff; } .bsp-kanban-cards { min-height:80px; display:flex; flex-direction:column; gap:8px; } .bsp-kanban-cards.bsp-drag-over { background:rgba(123,92,240,.12); border:1px dashed #7b5cf0; border-radius:8px; padding:4px; } .bsp-kanban-empty { font-size:11px; color:rgba(255,255,255,.15); text-align:center; padding:18px 0; border:1px dashed rgba(255,255,255,.07); border-radius:8px; } /* Task cards */ .bsp-kanban-card { background:rgba(255,255,255,.06); border-radius:10px; padding:12px; border-left:3px solid #7b5cf0; cursor:grab; transition:transform .15s,box-shadow .15s; border:1px solid rgba(255,255,255,.07); border-left-width:3px; user-select:none; } .bsp-kanban-card:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.25); background:rgba(255,255,255,.09); } .bsp-kanban-card.bsp-dragging { opacity:.5; cursor:grabbing; transform:rotate(2deg); } .bsp-card-done { opacity:.7; } .bsp-task-card-header { display:flex; align-items:center; gap:6px; margin-bottom:6px; } .bsp-task-card-pri { font-size:13px; } .bsp-task-card-project { font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,.3); background:rgba(255,255,255,.06); padding:2px 6px; border-radius:4px; } .bsp-task-card-assignee { font-size:10px; color:rgba(255,255,255,.35); } .bsp-task-card-due, .bsp-task-due { font-size:10px; color:rgba(255,255,255,.4); } .bsp-task-overdue { color:#F97316 !important; font-weight:700; } .bsp-task-due-soon { color:#F59E0B !important; font-weight:700; } .bsp-task-card-menu { background:transparent; border:none; color:rgba(255,255,255,.25); cursor:pointer; padding:3px 6px; border-radius:5px; font-size:10px; font-weight:700; transition:all .15s; margin-left:auto; text-transform:uppercase; letter-spacing:.04em; } .bsp-task-card-menu:hover { background:rgba(255,255,255,.1); color:#fff; } .bsp-task-card-title { font-size:13px; font-weight:700; color:#e2e8f0; line-height:1.4; margin-bottom:4px; white-space:normal; overflow:visible; word-break:break-word; } .bsp-task-done-title { opacity:.5; } .bsp-task-card-details { font-size:11px; color:rgba(255,255,255,.35); line-height:1.5; margin-bottom:6px; } .bsp-task-card-labels { display:flex; flex-wrap:wrap; gap:4px; margin:5px 0; } .bsp-task-label { font-size:9px; font-weight:700; padding:2px 6px; border-radius:4px; border:1px solid rgba(255,255,255,.15); letter-spacing:.3px; } .bsp-task-card-subprogress { display:flex; align-items:center; gap:6px; margin:5px 0; } .bsp-subtask-bar { flex:1; height:3px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; } .bsp-subtask-fill { height:100%; border-radius:2px; transition:width .3s; } .bsp-subtask-ratio { font-size:9px; color:rgba(255,255,255,.3); white-space:nowrap; } .bsp-task-time-row { display:flex; align-items:center; gap:8px; margin:4px 0; } .bsp-task-time-label { font-size:9px; color:rgba(255,255,255,.3); white-space:nowrap; } .bsp-task-time-bar { flex:1; height:3px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; } .bsp-task-card-footer { display:flex; gap:5px; margin-top:8px; padding-top:7px; border-top:1px solid rgba(255,255,255,.05); } .bsp-task-card-done-btn { flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.5); border-radius:6px; padding:4px 8px; font-size:10px; font-weight:700; cursor:pointer; transition:all .15s; } .bsp-task-card-done-btn:hover, .bsp-card-done-active { background:rgba(34,197,94,.15); color:#4ade80; border-color:rgba(34,197,94,.3); } .bsp-task-card-copy-btn, .bsp-task-card-delete-btn { background:transparent; border:none; color:rgba(255,255,255,.32); padding:4px 6px; border-radius:6px; cursor:pointer; font-size:10px; font-weight:700; transition:all .15s; } .bsp-task-card-copy-btn:hover { background:rgba(123,92,240,.15); color:#c4b5fd; } .bsp-task-card-delete-btn:hover { background:rgba(239,68,68,.15); color:#f87171; } /* List view */ .bsp-todo-list { display:flex; flex-direction:column; gap:14px; } .bsp-todo-list-project { background:rgba(255,255,255,.03); border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,.06); } .bsp-todo-list-project-header { display:flex; align-items:center; gap:10px; padding:10px 14px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.05); } .bsp-project-collapse-btn { background:transparent; border:none; color:rgba(255,255,255,.4); cursor:pointer; padding:2px 5px; font-size:12px; } .bsp-todo-list-project-name { font-size:13px; font-weight:800; color:#e2e8f0; flex:1; } .bsp-todo-list-project-count { font-size:10px; color:rgba(255,255,255,.35); } .bsp-todo-list-project-bar { width:70px; height:4px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; } .bsp-todo-list-project-pct { font-size:10px; font-weight:700; color:#22c55e; min-width:26px; } .bsp-todo-list-row { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.04); transition:background .12s; } .bsp-todo-list-row:last-child { border-bottom:none; } .bsp-todo-list-row:hover { background:rgba(255,255,255,.03); } .bsp-todo-list-row.bsp-list-done { opacity:.6; } .bsp-list-check { background:transparent; border:1px solid rgba(255,255,255,.15); border-radius:4px; padding:3px 5px; color:rgba(255,255,255,.4); cursor:pointer; font-size:13px; flex-shrink:0; transition:all .15s; margin-top:2px; } .bsp-list-check:hover { border-color:#22c55e; color:#22c55e; } .bsp-list-title-col { flex:1; min-width:0; } .bsp-list-title { font-size:13px; font-weight:700; color:#e2e8f0; margin-bottom:3px; white-space:normal; overflow:visible; word-break:break-word; } .bsp-list-details { font-size:11px; color:rgba(255,255,255,.35); line-height:1.5; margin-bottom:4px; } .bsp-list-subtasks-preview { font-size:11px; color:rgba(255,255,255,.3); margin-bottom:4px; } .bsp-list-expand-subs { color:#7b5cf0; text-decoration:none; font-size:10px; font-weight:700; } .bsp-list-subtask-list { margin-top:6px; border-left:2px solid rgba(123,92,240,.2); padding-left:10px; } .bsp-list-subtask-row { display:flex; align-items:center; gap:6px; padding:3px 0; font-size:12px; color:rgba(255,255,255,.5); } .bsp-subtask-toggle { background:transparent; border:none; color:inherit; cursor:pointer; font-size:13px; } .bsp-subtask-done { text-decoration:line-through; opacity:.5; } .bsp-list-meta-col { display:flex; flex-direction:column; gap:4px; align-items:flex-end; min-width:100px; } .bsp-list-priority,.bsp-list-status,.bsp-list-due,.bsp-list-est,.bsp-list-assignee { font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; background:rgba(255,255,255,.06); white-space:nowrap; } .bsp-list-actions { display:flex; flex-direction:column; gap:4px; flex-shrink:0; } /* Calendar */ .bsp-todo-cal-header { display:flex; align-items:center; justify-content:center; gap:14px; padding:10px 0 14px; } .bsp-todo-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; } .bsp-cal-day-header { font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.25); text-align:center; padding:5px 0; } .bsp-cal-cell { background:rgba(255,255,255,.03); border-radius:8px; padding:6px; min-height:78px; border:1px solid rgba(255,255,255,.05); } .bsp-cal-cell.bsp-cal-empty { background:transparent; border-color:transparent; } .bsp-cal-cell.bsp-cal-today { border-color:#7b5cf0; background:rgba(123,92,240,.06); } .bsp-cal-date { font-size:11px; font-weight:700; color:rgba(255,255,255,.4); margin-bottom:4px; } .bsp-cal-today-badge { display:inline-flex; align-items:center; justify-content:center; background:#7b5cf0; color:#fff; width:20px; height:20px; border-radius:50%; font-size:11px; } .bsp-cal-task-chip { font-size:10px; color:rgba(255,255,255,.65); padding:2px 5px; border-radius:3px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; transition:opacity .15s; } .bsp-cal-task-chip:hover { opacity:.8; } .bsp-cal-overdue-chip { border-left-color:#EF4444 !important; } .bsp-cal-more { font-size:9px; color:rgba(255,255,255,.25); padding-left:5px; } /* Task modal */ .bsp-task-modal-inner { max-width:820px; width:min(95vw, 820px); } .bsp-task-modal-body { padding:20px 24px; overflow-y:auto; max-height:74vh; display:flex; flex-direction:column; gap:14px; } .bsp-tmod-title { font-size:17px; font-weight:700; padding:11px 13px; background:rgba(255,255,255,.06); border-radius:8px; color:#e2e8f0; } .bsp-tmod-details { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:10px 12px; color:rgba(255,255,255,.75); font-size:13px; resize:vertical; min-height:118px; font-family:inherit; } .bsp-tmod-row { display:flex; gap:10px; flex-wrap:wrap; } .bsp-tmod-field { display:flex; flex-direction:column; gap:5px; flex:1; min-width:110px; } .bsp-tmod-field label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.35); } .bsp-subtask-edit-row { display:flex; align-items:center; gap:6px; padding:4px 0; } .bsp-subtask-edit-done { background:transparent; border:1px solid rgba(255,255,255,.2); border-radius:4px; padding:3px 5px; color:rgba(255,255,255,.5); cursor:pointer; font-size:12px; } .bsp-subtask-edit-del { background:transparent; border:none; color:rgba(255,255,255,.2); cursor:pointer; font-size:14px; padding:2px 5px; border-radius:4px; transition:all .15s; } .bsp-subtask-edit-del:hover { background:rgba(239,68,68,.15); color:#f87171; } .bsp-subtask-title-input { flex:1; } /* ═══════════════════════════════════════════════════════════════ BRAND CARD TASK PREVIEW ═══════════════════════════════════════════════════════════════ */ .bsp-brand-card-tasks-preview { padding:8px 14px 0; min-height:24px; } .bsp-card-tasks-loading { font-size:10px; color:rgba(255,255,255,.2); } .bsp-card-tasks-empty { font-size:10px; color:rgba(255,255,255,.3); } .bsp-card-tasks-link { color:var(--bsp-accent,#7b5cf0); text-decoration:none; font-size:10px; cursor:pointer; } .bsp-card-tasks-link:hover { text-decoration:underline; } .bsp-card-tasks-bar-row { display:flex; align-items:center; gap:6px; margin-bottom:4px; } .bsp-card-tasks-progress { flex:1; height:4px; background:rgba(255,255,255,.1); border-radius:2px; overflow:hidden; } .bsp-card-tasks-fill { height:100%; background:linear-gradient(90deg,#7b5cf0,#22c55e); border-radius:2px; transition:width .4s; } .bsp-card-tasks-pct { font-size:9px; font-weight:700; color:rgba(255,255,255,.4); } .bsp-card-tasks-meta { display:flex; align-items:center; gap:8px; font-size:10px; color:rgba(255,255,255,.4); margin-bottom:5px; flex-wrap:wrap; } .bsp-card-tasks-inprog { color:#a78bfa; } .bsp-card-tasks-overdue { color:#f97316; } .bsp-card-tasks-list { display:flex; flex-direction:column; gap:2px; padding-bottom:6px; } .bsp-card-task-row { display:flex; align-items:center; gap:5px; font-size:10px; } .bsp-card-task-pri { font-size:10px; flex-shrink:0; } .bsp-card-task-title { color:rgba(255,255,255,.6); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bsp-card-task-due { color:rgba(255,255,255,.3); font-size:9px; flex-shrink:0; } /* ═══════════════════════════════════════════════════════════════ VOICE-TO-DOCUMENT — v7.2.0 ═══════════════════════════════════════════════════════════════ */ /* AI button accent tints in doc modal header */ .bsp-btn-ai { background: rgba(123,92,240,.15) !important; border-color: rgba(123,92,240,.4) !important; color: #c4b5fd !important; } .bsp-btn-ai:hover { background: rgba(123,92,240,.3) !important; } .bsp-btn-voice { background: rgba(34,197,94,.1) !important; border-color: rgba(34,197,94,.35) !important; color: #86efac !important; } .bsp-btn-voice:hover { background: rgba(34,197,94,.2) !important; } /* Dictate button — recording state */ #bsp-dictate-indicator.active { color: #f87171 !important; animation: bsp-pulse 1.2s ease-in-out infinite; } @keyframes bsp-pulse { 0%,100% { opacity:1; } 50% { opacity:.55; } } /* Inline AI Generate panel (inside doc modal) */ .bsp-doc-modal-ai-panel { background: linear-gradient(135deg, rgba(123,92,240,.12) 0%, rgba(96,165,250,.08) 100%); border: 1px solid rgba(123,92,240,.3); border-radius: 10px; margin: 0 0 8px; overflow: hidden; } .bsp-doc-modal-ai-inner { padding: 14px 16px; } .bsp-doc-modal-ai-title { font-size: 13px; font-weight: 800; color: #c4b5fd; margin-bottom: 12px; letter-spacing: .3px; } .bsp-doc-modal-ai-row { display: flex; gap: 14px; flex-wrap: wrap; } .bsp-doc-modal-ai-section { display: flex; flex-direction: column; gap: 6px; min-width: 180px; } .bsp-doc-modal-ai-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,.4); } .bsp-doc-modal-ai-textarea { min-height: 70px; resize: vertical; font-size: 12px; } .bsp-doc-modal-ai-status { font-size: 11px; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.7); } .bsp-doc-modal-ai-status.running { color: #86efac; } .bsp-doc-modal-ai-status.error { color: #f87171; } /* Modal voice grid */ .bsp-modal-voice-grid { display: flex; flex-wrap: wrap; gap: 5px; } .bsp-modal-voice-btn { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 5px 9px; cursor: pointer; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); display: flex; align-items: center; gap: 4px; transition: all .15s; white-space: nowrap; } .bsp-modal-voice-btn:hover { background: rgba(255,255,255,.1); color: #fff; } .bsp-modal-voice-btn.active { background: rgba(123,92,240,.3); border-color: #7b5cf0; color: #c4b5fd; } .bsp-modal-voice-desc { font-size: 11px; color: rgba(255,255,255,.35); font-style: italic; margin-top: 3px; min-height: 16px; } /* Dictation panel */ .bsp-dictate-panel { display: flex; align-items: center; gap: 10px; padding: 5px 0 3px; border-bottom: 1px solid rgba(255,255,255,.05); margin-bottom: 4px; } .bsp-dictate-toggle-label { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(255,255,255,.5); cursor: pointer; } .bsp-dictate-toggle-label input[type=checkbox] { accent-color: #22c55e; width: 13px; height: 13px; } .bsp-dictate-status { font-size: 11px; color: rgba(255,255,255,.6); padding: 3px 8px; background: rgba(255,255,255,.04); border-radius: 5px; flex: 1; } /* Rewrite row */ .bsp-rewrite-row { display: flex; gap: 8px; align-items: center; padding: 5px 0 3px; border-bottom: 1px solid rgba(255,255,255,.05); margin-bottom: 4px; } .bsp-input-sm { font-size: 12px; padding: 6px 10px; height: 32px; } /* Doc card — AI badge, voice icon, brand dot */ .bsp-doc-ai-badge { display:inline-block; background:linear-gradient(135deg,rgba(123,92,240,.35),rgba(96,165,250,.3)); color:#c4b5fd; font-size:9px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; padding:1px 5px; border-radius:4px; margin-left:5px; vertical-align:middle; } .bsp-doc-voice-mini { font-size:13px; margin-left:4px; vertical-align:middle; } .bsp-doc-brand-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; vertical-align:middle; } .bsp-btn-xs { font-size:10px !important; padding:3px 8px !important; height:24px !important; min-height:unset !important; line-height:1 !important; } .bsp-doc-card { border-left: 3px solid var(--doc-color, #6366f1); } /* ═══════════════════════════════════════════════════════════════════════════ v7.3.0 — Brand Modal Overhaul ═══════════════════════════════════════════════════════════════════════════ */ /* ── Brand card: new elements ─────────────────────────────────────────────── */ .bsp-brand-card-banner { height:60px; background-size:cover; background-position:center; position:absolute; inset:0; border-radius:12px 12px 0 0; } .bsp-brand-card-face-hero { height:52px; overflow:hidden; background:var(--bsp-surface2); border-bottom:1px solid var(--bsp-border); } .bsp-brand-card-face-hero img { width:100%; height:100%; object-fit:cover; object-position:top; } .bsp-brand-card-archetype { position:absolute; top:8px; right:10px; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); color:rgba(255,255,255,.85); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; padding:2px 7px; border-radius:20px; } .bsp-brand-card-kws { display:flex; gap:4px; flex-wrap:wrap; margin:4px 0 8px; } .bsp-brand-card-kw { font-size:9px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:1px 6px; color:rgba(255,255,255,.5); } /* ── Brand modal body ─────────────────────────────────────────────────────── */ .bsp-brand-modal-body { padding: 0; display: flex; flex-direction: column; overflow: hidden; max-height: calc(90vh - 80px); } .bsp-brand-modal-body .bsp-tabs { padding: 0 20px; background: var(--bsp-surface2); border-bottom: 1px solid var(--bsp-border); flex-shrink: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .bsp-brand-modal-body .bsp-tabs::-webkit-scrollbar { display: none; } .bsp-brand-modal-body .bsp-tab-content { flex: 1; overflow-y: auto; padding: 20px; } .bsp-tab-pane { display: none; } .bsp-tab-pane.active { display: block; } /* ── Section titles ───────────────────────────────────────────────────────── */ .bsp-bm-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--bsp-muted); border-bottom: 1px solid var(--bsp-border); padding-bottom: 6px; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } /* ── Core images row ──────────────────────────────────────────────────────── */ .bsp-brand-core-images-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; } .bsp-brand-core-image-slot label { font-size: 11px; font-weight: 600; display: block; margin-bottom: 6px; color: var(--bsp-muted); } .bsp-media-picker-sm { width: 100%; height: 80px; background: var(--bsp-surface2); border: 1px dashed var(--bsp-border2); border-radius: 8px; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; } .bsp-media-preview-sm { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 20px; color: var(--bsp-muted); } .bsp-media-preview-sm small { font-size: 9px; } .bsp-media-picker-btns { display: flex; gap: 5px; margin-top: 5px; } .bsp-hint-text { font-size: 10px; color: var(--bsp-muted); margin-top: 4px; margin-bottom: 0; line-height: 1.4; } /* ── Reference image library ──────────────────────────────────────────────── */ .bsp-modal-refs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 10px; } .bsp-ref-item { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .bsp-ref-item-thumb-wrap { position: relative; width: 100%; padding-top: 72%; overflow: hidden; background: #111; } .bsp-ref-item-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-ref-item-delete { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.7); border: none; color: rgba(255,100,100,.9); border-radius: 50%; width: 20px; height: 20px; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; } .bsp-ref-item:hover .bsp-ref-item-delete { opacity: 1; } .bsp-ref-item-title-input, .bsp-ref-item-focus-input { font-size: 10px; background: transparent; border: none; border-top: 1px solid var(--bsp-border); padding: 5px 8px; color: var(--bsp-text); width: 100%; outline: none; } .bsp-ref-item-title-input { font-weight: 600; } .bsp-ref-item-title-input::placeholder, .bsp-ref-item-focus-input::placeholder { color: var(--bsp-muted); } .bsp-ref-empty { grid-column: 1/-1; font-size: 12px; color: var(--bsp-muted); padding: 14px 0; } .bsp-refs-count-badge { background: rgba(255,255,255,.07); border-radius: 20px; padding: 1px 8px; font-size: 10px; font-weight: 700; } /* ── URL paste row (refs & videos) ────────────────────────────────────────── */ .bsp-ref-url-paste-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding: 10px 12px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border2); border-radius: 8px; } .bsp-ref-url-paste-row.hidden { display: none; } /* ── Audio section ────────────────────────────────────────────────────────── */ .bsp-ref-audio-section { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: 10px; padding: 14px 16px; } .bsp-ref-audio-label { font-size: 11px; font-weight: 600; display: block; margin-bottom: 6px; } .bsp-audio-preview-wrap { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .bsp-audio-player { flex: 1; height: 32px; min-width: 0; } .bsp-audio-files-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .bsp-audio-file-item { display: flex; align-items: center; gap: 8px; background: var(--bsp-surface); border: 1px solid var(--bsp-border); border-radius: 7px; padding: 6px 10px; } .bsp-audio-file-icon { font-size: 14px; flex-shrink: 0; } .bsp-audio-file-label { flex: 1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-audio-file-player { width: 120px; height: 24px; flex-shrink: 0; } .bsp-audio-file-delete { flex-shrink: 0; } .bsp-hint-inline { font-size: 10px; color: var(--bsp-muted); font-weight: 400; text-transform: none; letter-spacing: 0; } /* ── Video ref grid ───────────────────────────────────────────────────────── */ .bsp-modal-video-refs-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .bsp-video-ref-item { display: flex; align-items: flex-start; gap: 10px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: 9px; padding: 10px 12px; position: relative; } .bsp-video-ref-thumb-wrap { width: 64px; height: 48px; border-radius: 6px; overflow: hidden; background: #111; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .bsp-video-ref-preview { width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-video-ref-yt-icon { font-size: 22px; } .bsp-video-ref-info { flex: 1; min-width: 0; } .bsp-video-ref-title { font-size: 12px; font-weight: 600; margin-bottom: 2px; } .bsp-video-ref-url { font-size: 10px; color: var(--bsp-muted); font-family: monospace; } .bsp-video-ref-notes { font-size: 10px; color: var(--bsp-muted); margin-top: 3px; } .bsp-video-ref-delete { position: absolute; top: 8px; right: 8px; } /* ── Color swatches ───────────────────────────────────────────────────────── */ .bsp-color-swatches-row { display: flex; gap: 16px; flex-wrap: wrap; } .bsp-color-swatch-group { display: flex; flex-direction: column; gap: 5px; } .bsp-color-swatch-group label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--bsp-muted); } .bsp-color-input { width: 110px; font-family: monospace; } .bsp-color-swatch-preview { width: 32px; height: 32px; border-radius: 6px; border: 2px solid rgba(255,255,255,.15); cursor: pointer; } /* ── Palette suggestions ──────────────────────────────────────────────────── */ .bsp-palette-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .bsp-palette-sug-btn { font-size: 11px; padding: 5px 10px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: 20px; cursor: pointer; color: var(--bsp-text); transition: border-color .15s, transform .12s; white-space: nowrap; } .bsp-palette-sug-btn:hover { border-color: var(--bsp-accent); transform: translateY(-1px); } /* ── Social grid ──────────────────────────────────────────────────────────── */ .bsp-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .bsp-bm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .bsp-bm-grid .bsp-span2 { grid-column: span 2; } /* ── History tab ──────────────────────────────────────────────────────────── */ .bsp-hist-stats-strip { display: flex; gap: 18px; font-size: 12px; color: var(--bsp-muted); margin-bottom: 12px; padding: 8px 12px; background: var(--bsp-surface2); border-radius: 8px; } .bsp-hist-stats-strip strong { color: var(--bsp-text); } .bsp-hist-grid { display: flex; flex-direction: column; gap: 8px; } .bsp-hist-item { display: flex; gap: 10px; align-items: flex-start; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: 9px; padding: 8px 12px; } .bsp-hist-thumb-wrap { width: 56px; height: 42px; border-radius: 6px; overflow: hidden; background: #111; flex-shrink: 0; } .bsp-hist-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-hist-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 18px; } .bsp-hist-meta { flex: 1; min-width: 0; } .bsp-hist-label { font-size: 11px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-hist-cat-badge { font-size: 9px; background: rgba(99,102,241,.3); color: #a5b4fc; padding: 1px 5px; border-radius: 4px; margin-right: 5px; font-weight: 700; text-transform: uppercase; } .bsp-hist-ts { font-size: 9px; color: var(--bsp-muted); display: block; } .bsp-hist-view-link { font-size: 10px; color: var(--bsp-accent); text-decoration: none; } .bsp-hist-view-link:hover { text-decoration: underline; } .bsp-brand-history-stats { margin-bottom: 6px; } /* ── Token chips (Notes tab) ──────────────────────────────────────────────── */ .bsp-notes-tokens-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .bsp-token-chip { font-size: 10px; font-family: monospace; background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.35); color: #a5b4fc; padding: 3px 9px; border-radius: 5px; cursor: pointer; transition: background .15s, transform .1s; user-select: none; } .bsp-token-chip:hover { background: rgba(99,102,241,.3); transform: translateY(-1px); } .bsp-token-chip:active { transform: translateY(0); } /* ── Modal footer: duplicate brand btn ────────────────────────────────────── */ #bsp-duplicate-brand-btn { margin-right: auto; } /* ── bsp-input-xs ─────────────────────────────────────────────────────────── */ .bsp-input-xs { font-size: 11px; padding: 4px 8px; height: 26px; } /* ══════════════════════════════════════════════════════════════════════════════ bsp-bc-v2 — Full-data brand card (v7.3.0) ══════════════════════════════════════════════════════════════════════════════ */ /* ── Card shell ────────────────────────────────────────────────────────────── */ .bsp-brand-card.bsp-bc-v2 { background: var(--bsp-surface); border: 1px solid var(--bsp-border); border-radius: 18px; overflow: visible; /* allow body scroll without clipping shadow */ display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; position: relative; min-height: 760px; } .bsp-brand-card.bsp-bc-v2:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,.5); border-color: rgba(99,102,241,.4); } /* Keep header/footer rounded corners despite overflow:visible on shell */ .bsp-brand-card.bsp-bc-v2 .bsp-bc-header { border-radius: 18px 18px 0 0; } .bsp-brand-card.bsp-bc-v2 .bsp-bc-actions-secondary { border-radius: 0 0 18px 18px; } /* ── Header banner ─────────────────────────────────────────────────────────── */ .bsp-bc-header { position: relative; height: 120px; overflow: hidden; flex-shrink: 0; } .bsp-bc-header-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.65) 100%); z-index: 1; } .bsp-bc-logo-wrap { position: absolute; bottom: 10px; left: 12px; z-index: 3; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.4); border: 2px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 22px; } .bsp-bc-logo-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-bc-face { position: absolute; bottom: 10px; left: 74px; z-index: 3; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,.3); background: rgba(0,0,0,.3); } .bsp-bc-face img { width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-bc-header-meta { position: absolute; bottom: 10px; left: 130px; right: 12px; z-index: 3; } .bsp-bc-name { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.2; text-shadow: 0 1px 4px rgba(0,0,0,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-bc-tagline { font-size: 10px; color: rgba(255,255,255,.75); font-style: italic; line-height: 1.3; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-bc-archetype-badge { position: absolute; top: 8px; right: 8px; z-index: 4; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: rgba(99,102,241,.85); color: #fff; padding: 3px 7px; border-radius: 20px; backdrop-filter: blur(4px); } .bsp-bc-industry-badge { position: absolute; top: 30px; right: 8px; z-index: 4; font-size: 9px; font-weight: 600; background: rgba(0,0,0,.55); color: rgba(255,255,255,.85); padding: 2px 7px; border-radius: 20px; backdrop-filter: blur(4px); } /* ── Color bar ─────────────────────────────────────────────────────────────── */ .bsp-bc-color-bar { display: flex; height: 6px; flex-shrink: 0; } .bsp-bc-color-seg { flex: 1; } .bsp-bc-color-codes { display: flex; gap: 6px; padding: 5px 12px 4px; background: var(--bsp-surface2); flex-shrink: 0; } .bsp-bc-color-chip { display: flex; align-items: center; gap: 5px; font-size: 10px; font-family: monospace; color: var(--bsp-muted); } .bsp-bc-color-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(255,255,255,.15); } /* ── Body ──────────────────────────────────────────────────────────────────── */ .bsp-bc-body { flex: 1; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 12px; /* Body expands to show all data — no max-height truncation */ overflow: visible; } /* Thin scrollbar for body if explicitly bounded */ .bsp-bc-body::-webkit-scrollbar { width: 3px; } .bsp-bc-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; } .bsp-bc-section-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--bsp-muted); margin-bottom: 4px; } /* ── Description / personality ─────────────────────────────────────────────── */ .bsp-bc-desc { font-size: 12px; color: var(--bsp-text); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .bsp-bc-personality { font-size: 11px; color: var(--bsp-muted); font-style: italic; line-height: 1.45; padding: 6px 10px; background: rgba(255,255,255,.04); border-left: 2px solid rgba(99,102,241,.4); border-radius: 0 6px 6px 0; } /* ── Keywords ──────────────────────────────────────────────────────────────── */ .bsp-bc-kws { display: flex; flex-wrap: wrap; gap: 4px; } .bsp-bc-kw { font-size: 10px; background: rgba(99,102,241,.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,.3); border-radius: 5px; padding: 2px 7px; line-height: 1.4; } /* ── Fonts ─────────────────────────────────────────────────────────────────── */ .bsp-bc-fonts { font-size: 11px; color: var(--bsp-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bsp-bc-font-pill { font-size: 10px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: 5px; padding: 2px 8px; color: var(--bsp-text); font-family: serif; } /* ── Reference images row ──────────────────────────────────────────────────── */ .bsp-bc-refs-row { display: flex; gap: 5px; flex-wrap: wrap; align-items: flex-start; } .bsp-bc-ref-thumb { width: 46px; height: 36px; border-radius: 7px; object-fit: cover; border: 1px solid var(--bsp-border); background: var(--bsp-surface2); display: block; flex-shrink: 0; } .bsp-bc-ref-more { width: 46px; height: 36px; border-radius: 7px; border: 1px solid var(--bsp-border); background: var(--bsp-surface2); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--bsp-muted); flex-shrink: 0; } .bsp-bc-ref-empty { font-size: 10px; color: var(--bsp-muted); font-style: italic; } /* ── Video refs — horizontal scroll strip (ALL videos, Seedance style) ─────── */ .bsp-bc-vid-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; /* custom scrollbar */ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; } .bsp-bc-vid-strip::-webkit-scrollbar { height: 3px; } .bsp-bc-vid-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; } .bsp-bc-vid-tile { flex-shrink: 0; width: 120px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; } .bsp-bc-vid-tile-img { width: 120px; height: 72px; border-radius: 9px; overflow: hidden; background: #111; border: 1px solid var(--bsp-border); position: relative; background-size: cover; background-position: center; transition: border-color .15s; } .bsp-bc-vid-tile:hover .bsp-bc-vid-tile-img { border-color: rgba(99,102,241,.6); } .bsp-bc-vid-tile-local { background: #0a0a0a; } .bsp-bc-vid-yt-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; background: rgba(0,0,0,.35); transition: background .15s; } .bsp-bc-vid-tile:hover .bsp-bc-vid-yt-play { background: rgba(99,102,241,.45); } .bsp-bc-vid-tile-title { font-size: 10px; color: var(--bsp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; line-height: 1.3; } /* ── Social handles ────────────────────────────────────────────────────────── */ .bsp-bc-social { display: flex; flex-wrap: wrap; gap: 5px; } .bsp-bc-social-tag { display: flex; align-items: center; gap: 4px; font-size: 10px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: 6px; padding: 3px 8px; color: var(--bsp-text); text-decoration: none; transition: border-color .15s; } .bsp-bc-social-tag:hover { border-color: var(--bsp-accent); } .bsp-bc-social-icon { font-size: 11px; line-height: 1; } /* ── Products row ──────────────────────────────────────────────────────────── */ .bsp-bc-products-row { display: flex; flex-wrap: wrap; gap: 4px; } .bsp-bc-product-pill { font-size: 10px; background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.25); border-radius: 5px; padding: 2px 8px; line-height: 1.4; } /* ── Media badges ──────────────────────────────────────────────────────────── */ .bsp-bc-media-badges { display: flex; flex-wrap: wrap; gap: 4px; } .bsp-bc-media-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.08); color: var(--bsp-muted); border: 1px solid var(--bsp-border); } .bsp-bc-media-badge.active { background: rgba(99,102,241,.2); color: #a5b4fc; border-color: rgba(99,102,241,.4); } /* ── Integration dots ──────────────────────────────────────────────────────── */ .bsp-bc-integrations { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .bsp-bc-int-dot { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--bsp-muted); } .bsp-bc-int-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--bsp-border); flex-shrink: 0; transition: background .2s; } .bsp-bc-int-dot.on::before { background: #10b981; box-shadow: 0 0 5px rgba(16,185,129,.5); } /* ── Stats bar ─────────────────────────────────────────────────────────────── */ .bsp-bc-stats-bar { display: flex; gap: 0; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: 10px; overflow: hidden; flex-shrink: 0; } .bsp-bc-stat { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-right: 1px solid var(--bsp-border); min-width: 0; } .bsp-bc-stat:last-child { border-right: none; } .bsp-bc-stat-val { font-size: 13px; font-weight: 800; color: var(--bsp-text); line-height: 1; } .bsp-bc-stat-lbl { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--bsp-muted); margin-top: 2px; text-align: center; } /* ── Website & contact ─────────────────────────────────────────────────────── */ .bsp-bc-website { font-size: 11px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .bsp-bc-website a { color: var(--bsp-accent); text-decoration: none; font-size: 11px; word-break: break-all; } .bsp-bc-website a:hover { text-decoration: underline; } .bsp-bc-contact { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--bsp-muted); } .bsp-bc-contact span { display: flex; align-items: center; gap: 4px; } .bsp-bc-workspace { display: flex; flex-wrap: wrap; gap: 6px; } .bsp-bc-workspace-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); color: var(--bsp-text); font-size: 10px; font-weight: 600; line-height: 1.2; } /* ── Audio reference indicator ─────────────────────────────────────────────── */ .bsp-bc-audio-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; background: rgba(245,158,11,.12); color: #fcd34d; border: 1px solid rgba(245,158,11,.25); border-radius: 5px; padding: 2px 8px; } /* ── Tasks preview ─────────────────────────────────────────────────────────── */ .bsp-bc-tasks-row { display: flex; flex-wrap: wrap; gap: 4px; } .bsp-bc-task-chip { font-size: 10px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: 5px; padding: 2px 8px; color: var(--bsp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; } /* ── Action rows ───────────────────────────────────────────────────────────── */ .bsp-bc-actions-primary { display: flex; gap: 6px; padding: 10px 14px 6px; border-top: 1px solid var(--bsp-border); flex-shrink: 0; } .bsp-bc-actions-primary .bsp-btn { flex: 1; font-size: 12px; padding: 7px 4px; min-width: 0; } .bsp-bc-actions-secondary { display: flex; gap: 4px; padding: 0 14px 14px; flex-wrap: wrap; flex-shrink: 0; } .bsp-bc-actions-secondary .bsp-btn { flex: 1; font-size: 10px; padding: 5px 4px; min-width: calc(33% - 4px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #bsp-brand-modal .bsp-modal { display: flex; flex-direction: column; max-height: 92vh; } .bsp-brand-modal-body { padding: 0; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: calc(92vh - 138px); overflow: hidden; } .bsp-brand-tab-nav { flex-shrink: 0; padding: 14px 20px 0; margin-bottom: 0; background: var(--bsp-surface); overflow-x: auto; scrollbar-width: none; } .bsp-brand-tab-nav::-webkit-scrollbar { display: none; } .bsp-brand-modal-body .bsp-tab-pane { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 24px 24px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .bsp-brand-modal-body .bsp-tab-pane.active { display: block; } .bsp-brand-window { min-height: 240px; } .bsp-brand-window-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* ── Responsive: 2-column on medium, 1-col on small ───────────────────────── */ @media (max-width: 900px) { #bsp-brands-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 580px) { #bsp-brands-grid { grid-template-columns: 1fr !important; } .bsp-bc-header { height: 100px; } } /* ── Stats bar element aliases (strong/span fallback) ─────────────────────── */ .bsp-bc-stat strong, .bsp-bc-stat-val { font-size: 13px; font-weight: 800; color: var(--bsp-text); line-height: 1; display: block; } .bsp-bc-stat span, .bsp-bc-stat-lbl { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--bsp-muted); margin-top: 2px; text-align: center; display: block; } /* ── bsp-bc-color-codes is now its own row below the bar ─────────────────── */ /* ── Integration dots (emoji icon) ────────────────────────────────────────── */ .bsp-bc-integrations span { font-size: 12px; cursor: default; } /* ── Todo template import row ─────────────────────────────────────────────── */ .bsp-todo-tpl-import-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0 4px; padding: 14px 16px; background: rgba(99,102,241,.07); border: 1px dashed rgba(99,102,241,.35); border-radius: 12px; } .bsp-todo-tpl-import-title { font-size: 13px; font-weight: 700; color: var(--bsp-text); margin-bottom: 4px; } .bsp-todo-tpl-import-desc { font-size: 11px; color: var(--bsp-muted); line-height: 1.5; } .bsp-todo-tpl-import-desc code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 4px; font-family: monospace; font-size: 10px; color: #a5b4fc; } .bsp-todo-tpl-import-desc .bsp-link { color: var(--bsp-accent); text-decoration: underline; cursor: pointer; } .bsp-todo-tpl-import-right { flex-shrink: 0; } /* ── Brand card responsive updates ───────────────────────────────────────────*/ @media (max-width: 1100px) { .bsp-brands-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; } } @media (max-width: 680px) { .bsp-brands-grid { grid-template-columns: 1fr !important; } } /* ══════════════════════════════════════════════════════════════════════════════ DASHBOARD — Full studio dashboard (v7.3.0) ══════════════════════════════════════════════════════════════════════════════ */ /* ── Dashboard header ─────────────────────────────────────────────────────── */ .bsp-dash-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 0; } .bsp-dash-title-group h2 { margin: 0; font-size: 20px; font-weight: 800; } .bsp-dash-subtitle { font-size: 11px; color: var(--bsp-muted); display: block; margin-top: 2px; } .bsp-dash-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ── KPI strip ─────────────────────────────────────────────────────────────── */ .bsp-dash-kpi-strip { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; } .bsp-dash-kpi { flex: 1; min-width: 100px; background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; position: relative; transition: border-color .15s, transform .15s; cursor: default; } .bsp-dash-kpi:hover { border-color: rgba(99,102,241,.4); transform: translateY(-1px); } .bsp-dash-kpi-icon { font-size: 16px; line-height: 1; margin-bottom: 2px; } .bsp-dash-kpi-val { font-size: 26px; font-weight: 900; color: var(--bsp-text); line-height: 1; } .bsp-dash-kpi-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--bsp-muted); } .bsp-dash-kpi-delta { font-size: 10px; color: var(--bsp-muted); margin-top: 2px; } .bsp-dash-kpi-overdue { color: #ef4444; font-weight: 700; } .bsp-dash-kpi.bsp-kpi-good { border-color: rgba(16,185,129,.35); } .bsp-dash-kpi.bsp-kpi-warn { border-color: rgba(245,158,11,.35); } .bsp-dash-kpi.bsp-kpi-bad { border-color: rgba(239,68,68,.35); } .bsp-dash-kpi.bsp-kpi-accent { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.3); } /* ── Main dashboard grid ───────────────────────────────────────────────────── */ .bsp-dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; align-items: start; } .bsp-dash-w-full { grid-column: 1 / -1; } .bsp-dash-w-2 { grid-column: span 2; } /* ── Widget shell ──────────────────────────────────────────────────────────── */ .bsp-dash-widget { background: var(--bsp-surface2); border: 1px solid var(--bsp-border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } .bsp-dash-widget-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; border-bottom: 1px solid var(--bsp-border); gap: 10px; flex-wrap: wrap; flex-shrink: 0; } .bsp-dash-widget-title { font-size: 13px; font-weight: 700; color: var(--bsp-text); white-space: nowrap; } .bsp-dash-widget-hint { font-size: 10px; color: var(--bsp-muted); font-style: italic; } .bsp-dash-widget-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .bsp-dash-empty { padding: 20px 16px; font-size: 12px; color: var(--bsp-muted); text-align: center; } .bsp-dash-loading { padding: 20px 16px; font-size: 12px; color: var(--bsp-muted); text-align: center; animation: bsp-pulse 1.2s infinite; } /* ── Brand tracking strip ──────────────────────────────────────────────────── */ .bsp-dash-brand-strip { display: flex; gap: 12px; padding: 14px 16px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; } .bsp-dash-brand-strip::-webkit-scrollbar { height: 4px; } .bsp-dash-brand-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; } .bsp-dash-brand-tile { flex-shrink: 0; width: 160px; background: var(--bsp-surface); border: 1px solid var(--bsp-border); border-radius: 14px; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; } .bsp-dash-brand-tile:hover { border-color: rgba(99,102,241,.5); transform: translateY(-2px); } .bsp-dash-bt-header { height: 52px; position: relative; display: flex; align-items: flex-end; padding: 0 10px 8px; justify-content: space-between; } .bsp-dash-bt-logo { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: rgba(0,0,0,.3); border: 2px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; } .bsp-dash-bt-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-dash-bt-initials { font-size: 16px; font-weight: 900; color: #fff; } .bsp-dash-bt-score { font-size: 11px; font-weight: 800; } .bsp-dash-bt-body { padding: 8px 10px 4px; } .bsp-dash-bt-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; } .bsp-dash-bt-stats { display: flex; gap: 8px; font-size: 10px; color: var(--bsp-muted); margin-bottom: 5px; } .bsp-dash-bt-progress { height: 3px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; margin-bottom: 4px; } .bsp-dash-bt-progress-fill { height: 100%; border-radius: 3px; transition: width .5s; } .bsp-dash-bt-last { font-size: 9px; color: var(--bsp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-dash-bt-actions { display: flex; gap: 4px; padding: 6px 10px 8px; } .bsp-dash-bt-actions .bsp-btn { flex: 1; font-size: 10px; padding: 3px 4px; } /* ── Activity bar chart ────────────────────────────────────────────────────── */ .bsp-dash-chart-wrap { padding: 12px 16px 0; flex: 1; } .bsp-dash-bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-bottom: 4px; } .bsp-dash-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; min-width: 0; } .bsp-dash-bar { width: 100%; background: linear-gradient(180deg, #6366f1 0%, #818cf8 100%); border-radius: 4px 4px 0 0; min-height: 3px; transition: height .4s ease; } .bsp-dash-bar-val { font-size: 8px; color: var(--bsp-muted); text-align: center; line-height: 1; } .bsp-dash-bar-lbl { font-size: 8px; color: var(--bsp-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .bsp-dash-chart-legend { display: flex; gap: 12px; flex-wrap: wrap; padding: 8px 16px 12px; font-size: 10px; color: var(--bsp-muted); } .bsp-dash-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: middle; } .bsp-dash-chart-range-btn { font-size: 10px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--bsp-border); background: transparent; color: var(--bsp-muted); cursor: pointer; } .bsp-dash-chart-range-btn.active { background: rgba(99,102,241,.2); border-color: rgba(99,102,241,.5); color: #a5b4fc; } /* ── Media donut ────────────────────────────────────────────────────────────── */ .bsp-dash-media-donut-wrap { display: flex; align-items: center; justify-content: center; padding: 16px 16px 10px; } .bsp-dash-donut { width: 110px; height: 110px; border-radius: 50%; background: conic-gradient(#6366f1 0% 100%); position: relative; display: flex; align-items: center; justify-content: center; } .bsp-dash-donut-hole { width: 68px; height: 68px; background: var(--bsp-surface2); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: var(--bsp-text); line-height: 1.1; } .bsp-dash-donut-hole small { font-size: 9px; font-weight: 500; color: var(--bsp-muted); } .bsp-dash-media-legend { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 6px; } .bsp-dash-media-leg-row { display: flex; align-items: center; gap: 6px; font-size: 11px; } .bsp-dash-leg-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .bsp-dash-leg-type { flex: 1; color: var(--bsp-text); text-transform: capitalize; } .bsp-dash-leg-cnt { font-weight: 700; color: var(--bsp-text); min-width: 28px; text-align: right; } .bsp-dash-leg-pct { font-size: 10px; color: var(--bsp-muted); min-width: 30px; text-align: right; } .bsp-dash-leg-bar { flex: 1; height: 3px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; } .bsp-dash-leg-bar-fill { height: 100%; border-radius: 3px; } /* ── Recent assets grid ─────────────────────────────────────────────────────── */ .bsp-dash-recent-assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; padding: 12px 14px; max-height: 320px; overflow-y: auto; } .bsp-dash-asset-tile { display: flex; flex-direction: column; gap: 4px; cursor: pointer; } .bsp-dash-asset-tile:hover .bsp-dash-asset-thumb { border-color: rgba(99,102,241,.5); } .bsp-dash-asset-thumb { aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: #111; border: 1px solid var(--bsp-border); position: relative; } .bsp-dash-asset-thumb-media { width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-dash-asset-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(0,0,0,.3); } .bsp-dash-asset-info { padding: 0 2px; } .bsp-dash-asset-title { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-dash-asset-brand { font-size: 9px; color: var(--bsp-muted); } /* ── Active tasks ───────────────────────────────────────────────────────────── */ .bsp-dash-tasks-list { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; max-height: 280px; overflow-y: auto; } .bsp-dash-task-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px; border-radius: 8px; background: var(--bsp-surface); border: 1px solid var(--bsp-border); transition: border-color .15s; } .bsp-dash-task-row.bsp-dash-task-overdue { border-color: rgba(239,68,68,.3); background: rgba(239,68,68,.04); } .bsp-dash-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; } .bsp-dash-task-info { flex: 1; min-width: 0; } .bsp-dash-task-title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-dash-task-meta { font-size: 10px; color: var(--bsp-muted); } .bsp-dash-task-pri { font-size: 9px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; flex-shrink: 0; } .bsp-dash-task-footer { padding: 8px 14px 12px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--bsp-border); } .bsp-dash-task-summary { flex: 1; } .bsp-dash-task-prog-row { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--bsp-muted); } .bsp-dash-task-prog-bar { flex: 1; height: 4px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; } .bsp-dash-task-prog-fill { height: 100%; background: #10b981; border-radius: 3px; transition: width .5s; } .bsp-dash-overdue-badge { font-size: 10px; color: #ef4444; font-weight: 700; margin-top: 3px; display: block; } /* ── Recent docs ─────────────────────────────────────────────────────────────── */ .bsp-dash-docs-list { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; max-height: 280px; overflow-y: auto; } .bsp-dash-doc-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; background: var(--bsp-surface); border: 1px solid var(--bsp-border); } .bsp-dash-doc-icon { font-size: 16px; flex-shrink: 0; } .bsp-dash-doc-info { flex: 1; min-width: 0; } .bsp-dash-doc-title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-dash-doc-meta { font-size: 10px; color: var(--bsp-muted); } /* ── Brand health ─────────────────────────────────────────────────────────── */ .bsp-dash-health-list { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; max-height: 360px; overflow-y: auto; } .bsp-dash-health-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; background: var(--bsp-surface); border: 1px solid var(--bsp-border); } .bsp-dash-health-brand { display: flex; align-items: center; gap: 7px; min-width: 120px; } .bsp-dash-health-logo { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; } .bsp-dash-health-initial { width: 24px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; } .bsp-dash-health-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; } .bsp-dash-health-bar-wrap { flex: 1; } .bsp-dash-health-bar { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; } .bsp-dash-health-fill { height: 100%; border-radius: 3px; transition: width .6s ease; } .bsp-dash-health-meta { display: flex; flex-direction: column; align-items: flex-end; min-width: 60px; } .bsp-dash-health-level { font-size: 9px; color: var(--bsp-muted); text-align: right; } /* ── Generation feed ─────────────────────────────────────────────────────────── */ .bsp-dash-gen-feed { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; max-height: 340px; overflow-y: auto; } .bsp-dash-gen-item { display: flex; gap: 10px; align-items: center; background: var(--bsp-surface); border: 1px solid var(--bsp-border); border-radius: 10px; padding: 8px 10px; } .bsp-dash-gen-thumb { width: 56px; height: 42px; border-radius: 8px; overflow: hidden; background: #111; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .bsp-dash-gen-thumb-media { width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-dash-gen-placeholder { font-size: 20px; } .bsp-dash-gen-meta { flex: 1; min-width: 0; } .bsp-dash-gen-prompt { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .bsp-dash-gen-info { font-size: 10px; color: var(--bsp-muted); } /* ── Media gallery (full-width) ─────────────────────────────────────────────── */ .bsp-dash-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 12px 14px; max-height: 340px; overflow-y: auto; } .bsp-dash-gallery-item { aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: #111; border: 1px solid var(--bsp-border); position: relative; cursor: pointer; transition: border-color .15s, transform .15s; } .bsp-dash-gallery-item:hover { border-color: rgba(99,102,241,.5); transform: scale(1.03); } .bsp-dash-gallery-media { width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-dash-gallery-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(0,0,0,.3); } .bsp-dash-gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, rgba(0,0,0,.75) 0%, transparent 100%); padding: 6px 7px 5px; display: flex; justify-content: space-between; align-items: flex-end; opacity: 0; transition: opacity .15s; } .bsp-dash-gallery-item:hover .bsp-dash-gallery-overlay { opacity: 1; } .bsp-dash-gallery-brand { font-size: 9px; color: rgba(255,255,255,.9); font-weight: 600; } .bsp-dash-gallery-type { font-size: 9px; color: rgba(255,255,255,.6); text-transform: capitalize; } .bsp-dash-gallery-audio { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--bsp-surface2); font-size: 24px; } .bsp-dash-gallery-audio-lbl { font-size: 9px; color: var(--bsp-muted); text-align: center; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* ── Quick actions grid ─────────────────────────────────────────────────────── */ .bsp-dash-quickactions-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; } .bsp-dash-qa-btn { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bsp-surface); border: 1px solid var(--bsp-border); border-radius: 12px; cursor: pointer; color: var(--bsp-text); font-size: 13px; font-weight: 600; transition: border-color .15s, background .15s, transform .12s; } .bsp-dash-qa-btn:hover { border-color: rgba(99,102,241,.5); background: rgba(99,102,241,.08); transform: translateY(-1px); } .bsp-dash-qa-icon { font-size: 18px; line-height: 1; flex-shrink: 0; } .bsp-dash-qa-label { flex: 1; white-space: nowrap; } .bsp-dash-qa-btn kbd { font-size: 9px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 4px; padding: 1px 5px; font-family: monospace; color: var(--bsp-muted); flex-shrink: 0; } /* ── Dashboard responsive ──────────────────────────────────────────────────── */ @media (max-width: 1200px) { .bsp-dash-grid { grid-template-columns: repeat(2, 1fr); } .bsp-dash-w-2 { grid-column: span 2; } } @media (max-width: 800px) { .bsp-dash-grid { grid-template-columns: 1fr; } .bsp-dash-w-2, .bsp-dash-w-full { grid-column: 1; } .bsp-dash-kpi { min-width: 80px; } .bsp-dash-kpi-val { font-size: 20px; } .bsp-dash-qa-btn { min-width: 100px; } } /* ═══════════════════════════════════════════════════════════════════════════ GEN JOB POOL — Floating tray badge, tray panel, job rows, result toasts ═══════════════════════════════════════════════════════════════════════════ */ /* ── Tray badge (floating button bottom-right) ───────────────────────────── */ .bsp-gen-tray-badge { position: fixed; bottom: 24px; right: 24px; z-index: 99990; display: flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; background: var(--bsp-accent, #6366f1); color: #fff; border: none; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 20px rgba(99,102,241,.45), 0 1px 4px rgba(0,0,0,.3); transition: transform .15s, box-shadow .15s, background .15s; user-select: none; white-space: nowrap; } .bsp-gen-tray-badge:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(99,102,241,.55), 0 2px 8px rgba(0,0,0,.35); background: #4f46e5; } .bsp-gen-tray-badge:active { transform: translateY(0); } .bsp-tray-badge-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(34,197,94,.3); } .bsp-tray-dot-run { background: #22c55e; animation: bsp-tray-pulse 1.4s ease-in-out infinite; } .bsp-tray-dot-q { background: #f59e0b; animation: bsp-tray-pulse 1.8s ease-in-out infinite; } @keyframes bsp-tray-pulse { 0%,100% { box-shadow: 0 0 0 2px rgba(34,197,94,.3); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,.0); } } #bsp-gen-queue-badge { /* legacy ID alias */ } /* ── Floating tray panel ─────────────────────────────────────────────────── */ #bsp-gen-jobs-tray, .bsp-gen-jobs-tray { position: fixed; bottom: 76px; right: 24px; z-index: 99989; width: 380px; max-width: calc(100vw - 48px); max-height: 520px; background: var(--bsp-surface, #1e1e2e); border: 1px solid var(--bsp-border, rgba(255,255,255,.1)); border-radius: 16px; box-shadow: 0 16px 56px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(12px) scale(.97); pointer-events: none; transition: opacity .2s ease, transform .2s ease; } #bsp-gen-jobs-tray.bsp-tray-open, .bsp-gen-jobs-tray.bsp-tray-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } /* Tray header */ .bsp-jobs-tray-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--bsp-border, rgba(255,255,255,.08)); flex-shrink: 0; background: rgba(255,255,255,.03); } .bsp-jobs-tray-title { font-size: 14px; font-weight: 700; color: var(--bsp-text, #e2e8f0); display: flex; align-items: center; gap: 8px; } .bsp-jobs-tray-title-icon { font-size: 16px; } .bsp-jobs-tray-controls { display: flex; align-items: center; gap: 6px; } .bsp-tray-ctrl-btn { background: none; border: 1px solid transparent; border-radius: 8px; color: var(--bsp-muted, #94a3b8); font-size: 11px; font-weight: 600; cursor: pointer; padding: 4px 8px; transition: background .12s, border-color .12s, color .12s; } .bsp-tray-ctrl-btn:hover { background: rgba(255,255,255,.06); border-color: var(--bsp-border, rgba(255,255,255,.1)); color: var(--bsp-text, #e2e8f0); } .bsp-tray-close-btn { width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; border-radius: 6px; } /* Tray scrollable list */ .bsp-jobs-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.3) transparent; } .bsp-jobs-list::-webkit-scrollbar { width: 4px; } .bsp-jobs-list::-webkit-scrollbar-track { background: transparent; } .bsp-jobs-list::-webkit-scrollbar-thumb { background: rgba(99,102,241,.3); border-radius: 2px; } /* Section header within list */ .bsp-jobs-section-hdr { padding: 6px 16px 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bsp-muted, #64748b); } /* Empty state */ .bsp-jobs-empty { padding: 36px 16px; text-align: center; color: var(--bsp-muted, #64748b); font-size: 13px; } .bsp-jobs-empty-icon { font-size: 28px; display: block; margin-bottom: 8px; } /* ── Individual job row ───────────────────────────────────────────────────── */ .bsp-job-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 10px; margin: 2px 6px; transition: background .12s; position: relative; } .bsp-job-row:hover { background: rgba(255,255,255,.04); } /* Status colour left border */ .bsp-job-row::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--bsp-muted, #64748b); } .bsp-job-status-running::before { background: #22c55e; } .bsp-job-status-queued::before { background: #f59e0b; } .bsp-job-status-done::before { background: #6366f1; } .bsp-job-status-failed::before { background: #ef4444; } /* Thumb column */ .bsp-job-thumb-col { flex-shrink: 0; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid var(--bsp-border, rgba(255,255,255,.08)); display: flex; align-items: center; justify-content: center; } .bsp-job-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-job-thumb-ph { font-size: 22px; line-height: 1; opacity: .5; } .bsp-job-status-running .bsp-job-thumb-ph { animation: bsp-spin 1.8s linear infinite; } @keyframes bsp-spin { to { transform: rotate(360deg); } } /* Info column */ .bsp-job-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .bsp-job-title { font-size: 12px; font-weight: 700; color: var(--bsp-text, #e2e8f0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-job-brand { font-size: 11px; color: var(--bsp-muted, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-job-prompt { font-size: 11px; color: var(--bsp-muted, #64748b); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; margin-top: 2px; } .bsp-job-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; } .bsp-job-status-lbl { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: .05em; } .bsp-job-status-running .bsp-job-status-lbl { background: rgba(34,197,94,.15); color: #22c55e; } .bsp-job-status-queued .bsp-job-status-lbl { background: rgba(245,158,11,.15); color: #f59e0b; } .bsp-job-status-done .bsp-job-status-lbl { background: rgba(99,102,241,.15); color: #818cf8; } .bsp-job-status-failed .bsp-job-status-lbl { background: rgba(239,68,68,.15); color: #f87171; } .bsp-job-elapsed { font-size: 10px; color: var(--bsp-muted, #64748b); font-variant-numeric: tabular-nums; } .bsp-job-primary-badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(99,102,241,.2); color: #a5b4fc; border: 1px solid rgba(99,102,241,.25); } /* Job action links */ .bsp-job-actions { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap; } .bsp-job-act-link { font-size: 11px; font-weight: 600; color: var(--bsp-accent, #6366f1); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; transition: color .12s; } .bsp-job-act-link:hover { color: #818cf8; } .bsp-job-act-link.danger { color: #f87171; } .bsp-job-act-link.danger:hover { color: #fca5a5; } /* ── Result toast stack (top-right) ──────────────────────────────────────── */ #bsp-gen-result-toasts, .bsp-gen-result-toasts { position: fixed; top: 64px; right: 20px; z-index: 99995; display: flex; flex-direction: column; gap: 10px; max-width: 340px; pointer-events: none; } .bsp-gen-result-toast { display: flex; gap: 12px; padding: 12px; background: var(--bsp-surface, #1e1e2e); border: 1px solid rgba(99,102,241,.3); border-left: 3px solid var(--bsp-accent, #6366f1); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3); pointer-events: all; opacity: 0; transform: translateX(24px); transition: opacity .25s ease, transform .25s ease; max-width: 340px; position: relative; overflow: hidden; } .bsp-gen-result-toast.bsp-toast-visible { opacity: 1; transform: translateX(0); } .bsp-gen-result-toast.bsp-toast-hiding { opacity: 0; transform: translateX(16px); } /* Toast shimmer background hint */ .bsp-gen-result-toast::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(99,102,241,.06) 0%, transparent 60%); pointer-events: none; } /* Toast thumbnail */ .bsp-grt-img-wrap { flex-shrink: 0; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid var(--bsp-border, rgba(255,255,255,.08)); display: flex; align-items: center; justify-content: center; } .bsp-grt-img { width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-grt-img-ph { font-size: 28px; line-height: 1; opacity: .4; } /* Toast text column */ .bsp-grt-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .bsp-grt-title { font-size: 13px; font-weight: 700; color: var(--bsp-text, #e2e8f0); line-height: 1.3; } .bsp-grt-brand { font-size: 11px; color: var(--bsp-accent, #6366f1); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-grt-prompt { font-size: 11px; color: var(--bsp-muted, #64748b); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; margin-top: 2px; } /* Toast action buttons */ .bsp-grt-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; } .bsp-grt-btn { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: background .12s, border-color .12s, transform .1s; white-space: nowrap; } .bsp-grt-btn:active { transform: scale(.96); } .bsp-grt-btn-save { background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.3); color: #a5b4fc; } .bsp-grt-btn-save:hover { background: rgba(99,102,241,.28); border-color: rgba(99,102,241,.5); } .bsp-grt-btn-dl { background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.25); color: #86efac; } .bsp-grt-btn-dl:hover { background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.4); } .bsp-grt-btn-view { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--bsp-muted, #94a3b8); } .bsp-grt-btn-view:hover { background: rgba(255,255,255,.1); color: var(--bsp-text, #e2e8f0); } .bsp-grt-btn-close { background: none; border: none; color: var(--bsp-muted, #64748b); font-size: 14px; width: 22px; height: 22px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 5px; position: absolute; top: 8px; right: 8px; cursor: pointer; transition: background .12s, color .12s; } .bsp-grt-btn-close:hover { background: rgba(255,255,255,.08); color: var(--bsp-text, #e2e8f0); } /* Toast progress bar (auto-dismiss countdown) */ .bsp-grt-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--bsp-accent, #6366f1); border-radius: 0 0 0 12px; opacity: .6; transition: width linear; } /* ── Toast failure variant ────────────────────────────────────────────────── */ .bsp-gen-result-toast.bsp-toast-fail { border-left-color: #ef4444; } .bsp-gen-result-toast.bsp-toast-fail .bsp-grt-title { color: #fca5a5; } /* ── Job pool tray mobile ─────────────────────────────────────────────────── */ @media (max-width: 600px) { #bsp-gen-jobs-tray, .bsp-gen-jobs-tray { right: 8px; left: 8px; width: auto; max-width: none; bottom: 72px; } .bsp-gen-tray-badge { right: 12px; bottom: 16px; } #bsp-gen-result-toasts, .bsp-gen-result-toasts { right: 8px; left: 8px; max-width: none; } .bsp-gen-result-toast { max-width: none; } } /* ═══════════════════════════════════════════════════════════════════════════ LIGHTBOX — Full-featured media viewer ═══════════════════════════════════════════════════════════════════════════ */ body.bsp-lbx-open { overflow: hidden; } #bsp-lightbox { position: fixed; inset: 0; z-index: 99998; display: flex; flex-direction: column; align-items: center; justify-content: center; } .bsp-lbx-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.92); backdrop-filter: blur(6px); } /* Stage */ .bsp-lbx-stage { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; flex: 1; min-height: 0; overflow: hidden; } .bsp-lbx-media-wrap { display: flex; align-items: center; justify-content: center; max-width: 92vw; max-height: calc(100vh - 160px); } .bsp-lbx-img { max-width: 92vw; max-height: calc(100vh - 160px); object-fit: contain; border-radius: 8px; display: block; user-select: none; transition: transform .12s ease; transform-origin: center center; } .bsp-lbx-video-el { max-width: 92vw; max-height: calc(100vh - 160px); border-radius: 8px; display: block; } /* Audio in lightbox */ .bsp-lbx-audio-player { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 48px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; } .bsp-lbx-audio-icon { font-size: 56px; animation: bsp-audio-pulse 2s ease-in-out infinite; } @keyframes bsp-audio-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .85; } } .bsp-lbx-audio-title { font-size: 18px; font-weight: 700; color: #e2e8f0; text-align: center; } .bsp-lbx-audio-el { width: 340px; max-width: 80vw; } /* Nav arrows */ .bsp-lbx-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 52px; height: 52px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, transform .15s; } .bsp-lbx-nav:hover { background: rgba(255,255,255,.22); } .bsp-lbx-prev { left: 16px; } .bsp-lbx-next { right: 16px; } /* Close button */ .bsp-lbx-close { position: absolute; top: 16px; right: 16px; z-index: 20; width: 40px; height: 40px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .bsp-lbx-close:hover { background: rgba(239,68,68,.5); } /* Info + actions bar */ .bsp-lbx-bar { position: relative; z-index: 5; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); gap: 12px; flex-shrink: 0; } .bsp-lbx-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; } .bsp-lbx-brand { font-size: 12px; font-weight: 700; color: #818cf8; white-space: nowrap; } .bsp-lbx-prompt { font-size: 12px; color: #94a3b8; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; } .bsp-lbx-counter { font-size: 11px; color: #64748b; white-space: nowrap; flex-shrink: 0; } .bsp-lbx-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .bsp-lbx-act-btn { height: 30px; min-width: 30px; padding: 0 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; color: #e2e8f0; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; text-decoration: none; } .bsp-lbx-act-btn:hover { background: rgba(99,102,241,.25); border-color: rgba(99,102,241,.4); color: #fff; } .bsp-lbx-dl { text-decoration: none; } /* Filmstrip */ .bsp-lbx-filmstrip { position: relative; z-index: 5; width: 100%; display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px; background: rgba(0,0,0,.7); flex-shrink: 0; scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.4) transparent; max-height: 80px; } .bsp-lbx-filmstrip::-webkit-scrollbar { height: 3px; } .bsp-lbx-filmstrip::-webkit-scrollbar-thumb { background: rgba(99,102,241,.4); border-radius: 2px; } .bsp-lbx-film-thumb { flex-shrink: 0; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.06); border: 2px solid transparent; cursor: pointer; transition: border-color .12s, transform .12s; display: flex; align-items: center; justify-content: center; font-size: 20px; } .bsp-lbx-film-thumb img { width: 100%; height: 100%; object-fit: cover; } .bsp-lbx-film-thumb:hover { border-color: rgba(99,102,241,.5); transform: scale(1.05); } .bsp-lbx-film-thumb.active { border-color: #6366f1; } /* ═══════════════════════════════════════════════════════════════════════════ FLOATING MEDIA PLAYER ═══════════════════════════════════════════════════════════════════════════ */ #bsp-media-player { position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%); z-index: 99980; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bsp-surface, #1e1e2e); border: 1px solid rgba(99,102,241,.3); border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.3); min-width: 460px; max-width: min(92vw, 600px); transition: opacity .2s, transform .2s; } .bsp-mplayer-hidden { opacity: 0 !important; pointer-events: none !important; transform: translateX(-50%) translateY(12px) !important; } .bsp-mplayer-thumb-col { width: 44px; height: 44px; border-radius: 8px; background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.2); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .bsp-mplayer-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .bsp-mplayer-title { font-size: 13px; font-weight: 700; color: var(--bsp-text, #e2e8f0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-mplayer-brand { font-size: 11px; color: var(--bsp-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-mplayer-progress-wrap { display: flex; align-items: center; gap: 6px; margin-top: 3px; } .bsp-mplayer-time { font-size: 10px; color: var(--bsp-muted, #64748b); font-variant-numeric: tabular-nums; min-width: 30px; text-align: center; } .bsp-mplayer-seek { flex: 1; height: 4px; accent-color: #6366f1; cursor: pointer; border-radius: 2px; } .bsp-mplayer-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .bsp-mplayer-btn { width: 32px; height: 32px; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--bsp-text, #e2e8f0); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; } .bsp-mplayer-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); } .bsp-mplayer-play { background: rgba(99,102,241,.2); border-color: rgba(99,102,241,.3); color: #a5b4fc; } .bsp-mplayer-play:hover { background: rgba(99,102,241,.35); } .bsp-mplayer-close-btn { color: var(--bsp-muted, #64748b); margin-left: 4px; } .bsp-mplayer-vol { width: 64px; height: 4px; accent-color: #6366f1; cursor: pointer; border-radius: 2px; } @media (max-width: 600px) { #bsp-media-player { min-width: 0; width: calc(100vw - 24px); bottom: 72px; } .bsp-mplayer-vol { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ DASHBOARD — Enhanced gallery ═══════════════════════════════════════════════════════════════════════════ */ /* Gallery grid view */ .bsp-dash-gallery-grid.bsp-gallery-view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .bsp-dash-gallery-grid.bsp-gallery-view-large { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .bsp-dash-gallery-item { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; } .bsp-gallery-view-large .bsp-dash-gallery-item { aspect-ratio: 4/3; } .bsp-dash-gallery-item:hover { transform: translateY(-3px) scale(1.01); border-color: rgba(99,102,241,.4); box-shadow: 0 8px 28px rgba(0,0,0,.4); } .bsp-dash-gallery-thumb { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .bsp-dash-gallery-media { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .bsp-dash-gallery-item:hover .bsp-dash-gallery-media { transform: scale(1.04); } /* Audio tile */ .bsp-dash-gallery-audio-tile { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(236,72,153,.1)); } .bsp-dash-gallery-audio-icon { font-size: 32px; animation: bsp-spin 4s linear infinite; } .bsp-dash-gallery-audio-name { font-size: 11px; color: #94a3b8; text-align: center; padding: 0 8px; max-lines: 2; overflow: hidden; } /* Video play btn */ .bsp-dash-gallery-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: rgba(0,0,0,.55); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff; pointer-events: none; transition: opacity .15s; } .bsp-dash-gallery-item:hover .bsp-dash-gallery-play-btn { opacity: 0; } /* Gallery hover overlay */ .bsp-dash-gallery-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 60%); opacity: 0; transition: opacity .2s; display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 8px 8px; gap: 4px; } .bsp-dash-gallery-item:hover .bsp-dash-gallery-overlay { opacity: 1; } .bsp-dash-gallery-ov-brand { font-size: 11px; font-weight: 700; color: #a5b4fc; line-height: 1.2; } .bsp-dash-gallery-ov-title { font-size: 10px; color: #94a3b8; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .bsp-dash-gallery-ov-btns { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; } .bsp-gal-ov-btn { font-size: 10px; font-weight: 600; padding: 3px 8px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.2); border-radius: 6px; color: #e2e8f0; cursor: pointer; transition: background .12s; text-decoration: none; white-space: nowrap; } .bsp-gal-ov-btn:hover { background: rgba(99,102,241,.5); border-color: rgba(99,102,241,.6); } /* Gallery view toggle buttons */ .bsp-dash-gallery-view-btn { width: 28px; height: 28px; background: none; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; color: var(--bsp-muted, #64748b); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; } .bsp-dash-gallery-view-btn.active, .bsp-dash-gallery-view-btn:hover { background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.3); color: #a5b4fc; } /* Gallery footer */ .bsp-dash-gallery-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 2px; } .bsp-dash-gallery-count { font-size: 11px; color: var(--bsp-muted, #64748b); } /* ── Generation feed (enhanced) ──────────────────────────────────────────── */ .bsp-dash-gen-feed { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.3) transparent; } .bsp-dash-gen-item { display: flex; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; transition: background .12s; border: 1px solid transparent; } .bsp-dash-gen-item:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.07); } .bsp-dash-gen-thumb { flex-shrink: 0; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; position: relative; } .bsp-dash-gen-thumb-media { width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-dash-gen-play-badge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.4); color: #fff; font-size: 14px; } .bsp-dash-gen-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .bsp-dash-gen-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #6366f1; } .bsp-dash-gen-prompt { font-size: 12px; color: var(--bsp-text, #e2e8f0); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.4; } .bsp-dash-gen-info { display: flex; gap: 6px; align-items: center; margin-top: 2px; } .bsp-dash-gen-brand { font-size: 10px; font-weight: 600; color: #818cf8; } .bsp-dash-gen-when { font-size: 10px; color: var(--bsp-muted, #64748b); } .bsp-dash-gen-actions { display: flex; gap: 8px; margin-top: 3px; } .bsp-dash-gen-group { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.02); overflow: hidden; } .bsp-dash-gen-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; font-weight: 700; color: rgba(255,255,255,.88); } .bsp-dash-gen-group-count { font-size: 10px; padding: 3px 8px; border-radius: 999px; background: rgba(99,102,241,.16); color: #c7d2fe; } .bsp-dash-gen-list { display: flex; flex-direction: column; gap: 8px; padding: 10px; } .bsp-dash-gen-audio-thumb { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(236,72,153,.28), rgba(99,102,241,.22)); color: #fdf2f8; font-size: 28px; } .bsp-link { color: #6366f1; font-size: 11px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; background: none; border: none; padding: 0; } .bsp-link:hover { color: #818cf8; } /* ═══════════════════════════════════════════════════════════════════════════ DASHBOARD — New widgets: Quick Generate, Palettes, Top Cats, Voice Log ═══════════════════════════════════════════════════════════════════════════ */ /* Quick Generate widget */ .bsp-dash-qgen-wrap { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; } .bsp-dash-qgen-row { display: flex; gap: 6px; flex-wrap: wrap; } .bsp-dash-qgen-brand, .bsp-dash-qgen-cat { flex: 1; min-width: 100px; } .bsp-dash-qgen-prompt { width: 100%; resize: vertical; min-height: 60px; font-size: 13px; padding: 8px 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: var(--bsp-text, #e2e8f0); line-height: 1.5; transition: border-color .15s; } .bsp-dash-qgen-prompt:focus { outline: none; border-color: rgba(99,102,241,.5); } .bsp-dash-qgen-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bsp-dash-qgen-status { font-size: 12px; color: var(--bsp-muted, #64748b); font-style: italic; } .bsp-dash-qgen-result { min-height: 0; transition: all .3s; } .bsp-dash-qgen-result img { width: 100%; border-radius: 8px; margin-top: 8px; border: 1px solid rgba(255,255,255,.1); } /* Brand color palettes */ .bsp-dash-palettes { display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.3) transparent; } .bsp-dash-palette-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; transition: background .12s, border-color .12s; } .bsp-dash-palette-row:hover { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.07); } .bsp-dash-palette-name { font-size: 12px; font-weight: 600; color: var(--bsp-text, #e2e8f0); min-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-dash-palette-chips { display: flex; gap: 4px; flex-shrink: 0; } .bsp-dash-palette-chip { width: 22px; height: 22px; border-radius: 5px; border: 1px solid rgba(255,255,255,.15); cursor: pointer; transition: transform .12s; flex-shrink: 0; } .bsp-dash-palette-chip:hover { transform: scale(1.25); } .bsp-dash-palette-codes { display: flex; gap: 4px; flex-wrap: wrap; } .bsp-dash-palette-codes code { font-size: 9px; color: var(--bsp-muted, #64748b); background: rgba(255,255,255,.05); border-radius: 4px; padding: 1px 4px; } /* Top categories */ .bsp-dash-top-cats { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; scrollbar-width: thin; } .bsp-dash-topcat-row { display: flex; align-items: center; gap: 8px; } .bsp-dash-topcat-label { font-size: 12px; color: var(--bsp-text, #e2e8f0); min-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-dash-topcat-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; } .bsp-dash-topcat-bar { height: 100%; background: linear-gradient(90deg, #6366f1, #818cf8); border-radius: 4px; transition: width .4s ease; } .bsp-dash-topcat-cnt { font-size: 12px; font-weight: 700; color: #6366f1; min-width: 28px; text-align: right; } /* Voice log */ .bsp-dash-voice-log { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(99,102,241,.3) transparent; } .bsp-vcl-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; border: 1px solid transparent; transition: background .1s; } .bsp-vcl-row:hover { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); } .bsp-vcl-ts { font-size: 10px; color: var(--bsp-muted, #64748b); font-variant-numeric: tabular-nums; min-width: 34px; flex-shrink: 0; } .bsp-vcl-cmd { flex: 1; font-size: 12px; color: var(--bsp-text, #e2e8f0); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bsp-vcl-result { font-size: 12px; flex-shrink: 0; } .bsp-vcl-ok { color: #22c55e; } .bsp-vcl-fail { color: #ef4444; } .bsp-vcl-main { display: flex; flex-direction: column; gap: 5px; width: 100%; min-width: 0; } .bsp-vcl-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bsp-vcl-body { font-size: 11px; color: rgba(255,255,255,.62); line-height: 1.45; white-space: normal; word-break: break-word; } .bsp-vcl-meta { display: flex; flex-wrap: wrap; gap: 6px; } .bsp-vcl-chip { font-size: 10px; border-radius: 999px; padding: 3px 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: rgba(255,255,255,.72); } /* ── Gen feed enhanced hover ──────────────────────────────────────────────── */ .bsp-dash-recent-assets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; } .bsp-dash-asset-tile { border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); cursor: pointer; transition: transform .15s, border-color .15s; position: relative; } .bsp-dash-asset-tile:hover { transform: scale(1.04); border-color: rgba(99,102,241,.4); } .bsp-dash-asset-thumb { width: 100%; height: 75%; overflow: hidden; } .bsp-dash-asset-thumb-media { width: 100%; height: 100%; object-fit: cover; display: block; } .bsp-dash-asset-info { padding: 3px 4px; } .bsp-dash-asset-title { font-size: 9px; font-weight: 600; color: var(--bsp-text, #e2e8f0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-dash-asset-brand { font-size: 9px; color: var(--bsp-muted, #64748b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-dash-asset-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 18px; } /* Player open button in header */ #bsp-dash-player-open-btn { gap: 4px; } /* ── Email Panel v2 — tabs, CC/BCC, char counter, token dropdown, log ─────── */ /* Tab bar (standalone) */ .bsp-email-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); flex-shrink: 0; } /* Tab buttons — used in handle bar */ .bsp-email-handle-btns { display: flex; align-items: center; gap: 3px; } .bsp-email-tab-btn { padding: 3px 9px; font-size: 11px; font-weight: 600; border-radius: 6px; border: 1px solid transparent; background: transparent; color: rgba(255,255,255,.5); cursor: pointer; transition: color .15s, background .15s, border-color .15s; white-space: nowrap; } .bsp-email-tab-btn:hover { color: rgba(255,255,255,.8); background: rgba(255,255,255,.07); } .bsp-email-tab-btn.active { color: var(--bsp-accent, #7B5CF0); background: rgba(123,92,240,.15); border-color: rgba(123,92,240,.35); } /* Handle layout */ .bsp-email-handle-left { display: flex; align-items: center; gap: 6px; overflow: hidden; } .bsp-email-panel-icon { font-size: 14px; flex-shrink: 0; } .bsp-email-panel-title { font-size: 12px; font-weight: 700; color: var(--bsp-text, #e2e8f0); white-space: nowrap; } .bsp-email-send-status { font-size: 10px; color: rgba(255,255,255,.45); white-space: nowrap; } /* Tab content panels */ .bsp-email-tab-content { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .bsp-email-tab-content.hidden { display: none !important; } /* Minimized state — CSS class approach avoids jQuery inline-style conflicts */ .bsp-email-panel.bsp-minimized .bsp-email-tab-content { display: none !important; } .bsp-email-panel.bsp-minimized .bsp-email-handle { border-radius: 0 0 14px 14px; } /* CC / BCC / Reply-To toggle buttons */ .bsp-email-toggle-btns { display: flex; gap: 4px; flex-wrap: wrap; } .bsp-email-toggle-btn { padding: 2px 8px; font-size: 10px; font-weight: 600; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: transparent; color: rgba(255,255,255,.55); cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } .bsp-email-toggle-btn:hover, .bsp-email-toggle-btn.active { background: rgba(123,92,240,.18); border-color: rgba(123,92,240,.4); color: #c4b5fd; } /* Hidden CC / BCC / Reply-To rows */ .bsp-email-cc-row, .bsp-email-bcc-row, .bsp-email-replyto-row { display: flex; flex-direction: column; gap: 4px; } .bsp-email-cc-row.hidden, .bsp-email-bcc-row.hidden, .bsp-email-replyto-row.hidden { display: none; } /* From row (brand + from name) */ .bsp-email-from-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .bsp-email-from-row .bsp-email-field { gap: 3px; } /* Input row (To field + spell button) */ .bsp-email-input-row { display: flex; gap: 6px; align-items: center; } .bsp-email-input-flex { flex: 1; min-width: 0; } /* Two-column row for brand + from-name */ .bsp-email-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Field wrapper: relative so token dropdown can anchor */ .bsp-email-field { position: relative; } /* Body header — label + tools inline */ .bsp-email-body-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .bsp-email-body-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .bsp-email-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--bsp-text-muted, rgba(255,255,255,.5)); } .bsp-email-req { color: #ef4444; } .bsp-email-field-btn { padding: 2px 7px; font-size: 10px; font-weight: 600; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(255,255,255,.6); cursor: pointer; transition: background .15s; } .bsp-email-field-btn:hover { background: rgba(123,92,240,.18); color: #c4b5fd; } /* Char counter */ .bsp-email-char-counter { font-size: 10px; color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Token dropdown */ .bsp-email-token-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--bsp-surface2, #1e2030); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.55); z-index: 999; max-height: 200px; overflow-y: auto; padding: 6px 0; } .bsp-email-token-dropdown.hidden { display: none; } .bsp-email-token-search-row { padding: 6px 10px 4px; } .bsp-email-token-list { padding: 0 4px; } .bsp-email-token-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; transition: background .12s; } .bsp-email-token-item:hover { background: rgba(123,92,240,.18); } .bsp-email-token-key { font-family: 'DM Mono', monospace; font-size: 11px; color: #a78bfa; white-space: nowrap; } .bsp-email-token-preview { font-size: 10px; color: rgba(255,255,255,.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 130px; text-align: right; } .bsp-email-token-empty { padding: 8px 12px; font-size: 11px; color: rgba(255,255,255,.35); } /* Primary/secondary action rows */ .bsp-email-actions-primary { display: flex; gap: 6px; flex-wrap: wrap; } .bsp-email-actions-primary .bsp-btn { font-size: 11px; } .bsp-email-actions-secondary { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bsp-email-actions-secondary .bsp-btn { font-size: 10px; } /* Sent log */ .bsp-email-log-header { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .bsp-email-log-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 300px; } .bsp-email-log-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; } .bsp-email-log-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .bsp-email-log-to { font-size: 12px; font-weight: 600; color: var(--bsp-text, #e2e8f0); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bsp-email-log-time { font-size: 10px; color: rgba(255,255,255,.4); white-space: nowrap; flex-shrink: 0; } .bsp-email-log-subject { font-size: 11px; color: rgba(255,255,255,.7); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bsp-email-log-cc { font-size: 10px; color: rgba(255,255,255,.45); } .bsp-email-log-status { font-size: 10px; font-weight: 700; } .bsp-email-log-ok { color: #22c55e; } .bsp-email-log-fail { color: #ef4444; } .bsp-email-log-empty { padding: 12px; font-size: 12px; color: rgba(255,255,255,.35); text-align: center; } /* Preview tab inner header */ .bsp-email-preview-header { display: flex; gap: 10px; font-size: 11px; color: rgba(255,255,255,.5); padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.07); flex-wrap: wrap; } /* Spell result */ .bsp-email-spelled { font-size: 12px; line-height: 1.7; padding: 6px 0; } /* Email textarea */ .bsp-email-textarea { resize: vertical; min-height: 130px; font-size: 12px; } /* ── Email Panel Width Modes ─────────────────────────────────────────────── */ .bsp-email-panel { width: 420px; } .bsp-email-panel.bsp-email-width-normal { width: 460px; } .bsp-email-panel.bsp-email-width-wide { width: 600px; } .bsp-email-panel.bsp-email-width-full { width: min(90vw, 800px); } .bsp-email-width-btn { padding: 2px 7px; font-size: 13px; font-weight: 700; border-radius: 5px; border: 1px solid rgba(255,255,255,.1); background: transparent; color: rgba(255,255,255,.4); cursor: pointer; transition: color .15s; } .bsp-email-width-btn:hover { color: rgba(255,255,255,.8); } /* ── Subject Score Bar ────────────────────────────────────────────────────── */ .bsp-email-subject-score { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; white-space: nowrap; } .bsp-score-good { color: #22c55e; background: rgba(34,197,94,.12); } .bsp-score-ok { color: #f59e0b; background: rgba(245,158,11,.12); } .bsp-score-weak { color: #ef4444; background: rgba(239,68,68,.12); } .bsp-email-subject-bar { height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; margin-top: 5px; overflow: hidden; } .bsp-email-subject-fill { height: 100%; background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #22c55e 100%); border-radius: 2px; transition: width .3s ease; width: 0; } /* ── Extras Row (CC/BCC toggles) ─────────────────────────────────────────── */ .bsp-email-extras-row { display: flex; gap: 4px; flex-wrap: wrap; } /* ── Bulk Recipients ─────────────────────────────────────────────────────── */ .bsp-email-bulk-info { font-size: 10px; color: rgba(255,255,255,.45); margin-top: 3px; } /* ── Formatting Toolbar ──────────────────────────────────────────────────── */ .bsp-email-fmt-bar { display: flex; align-items: center; gap: 3px; padding: 5px 8px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.07); border-radius: 8px; flex-wrap: wrap; } .bsp-email-fmt-btn { padding: 3px 7px; font-size: 11px; font-weight: 600; border-radius: 5px; border: 1px solid transparent; background: transparent; color: rgba(255,255,255,.55); cursor: pointer; transition: background .12s, color .12s; white-space: nowrap; } .bsp-email-fmt-btn:hover, .bsp-email-fmt-btn.active { background: rgba(123,92,240,.2); color: #c4b5fd; border-color: rgba(123,92,240,.3); } .bsp-email-fmt-sep { flex: 1; } /* ── Emoji Picker ────────────────────────────────────────────────────────── */ .bsp-email-emoji-picker { background: var(--bsp-surface2, #1e2030); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 8px 10px; font-size: 18px; line-height: 2; letter-spacing: 3px; cursor: pointer; } .bsp-email-emoji-picker.hidden { display: none; } /* ── AI Assist Panel ─────────────────────────────────────────────────────── */ .bsp-email-ai-panel { background: rgba(123,92,240,.07); border: 1px solid rgba(123,92,240,.2); border-radius: 10px; padding: 10px; } .bsp-email-ai-panel.hidden { display: none; } .bsp-email-ai-btns { display: flex; flex-wrap: wrap; gap: 5px; } .bsp-email-ai-status { margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.55); min-height: 16px; } .bsp-email-ai-loading { color: #a78bfa; } /* ── Meta Bar ────────────────────────────────────────────────────────────── */ .bsp-email-meta-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .bsp-email-read-time { font-size: 10px; color: rgba(255,255,255,.35); white-space: nowrap; } /* ── Signature Toggle Row ────────────────────────────────────────────────── */ .bsp-email-sig-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 7px; } .bsp-email-sig-check-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.65); cursor: pointer; } .bsp-email-check-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.65); cursor: pointer; } /* ── Advanced Options ────────────────────────────────────────────────────── */ .bsp-email-advanced {} .bsp-email-advanced-toggle { width: 100%; text-align: left; padding: 6px 8px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5); background: transparent; border: 1px solid rgba(255,255,255,.07); border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; } .bsp-email-advanced-toggle:hover { background: rgba(255,255,255,.04); color: rgba(255,255,255,.8); } .bsp-email-chevron { transition: transform .15s; display: inline-block; } .bsp-email-advanced-body { padding: 10px; border: 1px solid rgba(255,255,255,.07); border-top: none; border-radius: 0 0 8px 8px; display: flex; flex-direction: column; gap: 8px; } .bsp-email-advanced-body.hidden { display: none; } .bsp-email-adv-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .bsp-email-adv-row .bsp-email-field { flex: 1; min-width: 120px; } /* ── Hint text ───────────────────────────────────────────────────────────── */ .bsp-email-hint { font-size: 9px; font-weight: 400; color: rgba(255,255,255,.35); text-transform: none; letter-spacing: 0; } /* ── Signature Tab ───────────────────────────────────────────────────────── */ .bsp-email-sig-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .bsp-email-sig-actions { display: flex; gap: 6px; } .bsp-email-sig-fields { display: flex; flex-direction: column; gap: 8px; } .bsp-email-sig-preview-label { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } .bsp-email-sig-preview { background: #fff; border-radius: 10px; padding: 14px; min-height: 80px; color: #1e293b; font-size: 13px; margin-top: 6px; border: 1px solid rgba(255,255,255,.1); overflow-x: auto; } /* ── Preview Tab ─────────────────────────────────────────────────────────── */ .bsp-email-preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.07); flex-wrap: wrap; } .bsp-email-preview-meta { font-size: 11px; color: rgba(255,255,255,.5); display: flex; flex-direction: column; gap: 2px; } .bsp-email-preview-view-btns { display: flex; gap: 4px; align-items: center; } .bsp-email-preview-view-btn { padding: 3px 9px; font-size: 11px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1); background: transparent; color: rgba(255,255,255,.5); cursor: pointer; transition: all .12s; } .bsp-email-preview-view-btn.active { background: rgba(123,92,240,.18); border-color: rgba(123,92,240,.35); color: #c4b5fd; } .bsp-email-preview-wrap { margin-top: 8px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); } .bsp-email-preview-wrap[data-view="desktop"] .bsp-email-preview-iframe { width: 100%; height: 380px; } .bsp-email-preview-wrap[data-view="mobile"] .bsp-email-preview-iframe { width: 375px; height: 560px; display: block; margin: 0 auto; } .bsp-email-preview-iframe { border: none; background: #fff; } /* ── Schedule Tab ────────────────────────────────────────────────────────── */ .bsp-email-sched-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bsp-email-sched-summary { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.6; margin-top: 4px; } .bsp-email-sched-items { display: flex; flex-direction: column; gap: 6px; } .bsp-email-sched-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; } .bsp-email-sched-item-main { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .bsp-email-sched-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .bsp-email-sched-preset-btn { border: 1px solid rgba(123,92,240,.25); background: rgba(123,92,240,.08); color: #c4b5fd; border-radius: 999px; font-size: 11px; padding: 6px 10px; cursor: pointer; } .bsp-email-sched-preset-btn:hover { background: rgba(123,92,240,.16); border-color: rgba(123,92,240,.4); } /* ── Log Tab ─────────────────────────────────────────────────────────────── */ .bsp-email-log-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .bsp-email-log-header-btns { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; } .bsp-email-log-filters { display: flex; gap: 6px; align-items: center; margin-top: 6px; } .bsp-email-log-footer { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 4px; text-align: right; } .bsp-email-log-footer-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .bsp-email-log-brand { font-size: 10px; color: rgba(255,255,255,.4); } .bsp-email-log-list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; margin-top: 6px; } /* ── Media Picker & Attachments ──────────────────────────────────────────── */ .bsp-email-attachments-row { border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 7px; background: rgba(255,255,255,.02); position: relative; } .bsp-email-attach-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bsp-email-attach-btns { display: flex; gap: 5px; } .bsp-email-attach-url-row { display: flex; gap: 6px; align-items: center; } .bsp-email-attach-url-row.hidden { display: none; } /* Thumbnail strip */ .bsp-email-attach-strip { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; } .bsp-email-attach-item { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; position: relative; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 7px; padding: 4px; overflow: hidden; } .bsp-email-attach-thumb { width: 56px; height: 44px; object-fit: cover; border-radius: 4px; display: block; } .bsp-email-attach-icon { font-size: 22px; width: 56px; height: 44px; display: flex; align-items: center; justify-content: center; } .bsp-email-attach-name { font-size: 9px; color: rgba(255,255,255,.5); text-align: center; word-break: break-all; line-height: 1.2; max-height: 22px; overflow: hidden; } .bsp-email-attach-remove { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; background: rgba(239,68,68,.8); border: none; border-radius: 50%; color: #fff; font-size: 8px; font-weight: 700; cursor: pointer; line-height: 14px; padding: 0; text-align: center; } /* Media picker overlay */ .bsp-email-media-picker { position: absolute; left: 0; right: 0; top: 0; background: var(--bsp-surface2, #1e2030); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; box-shadow: 0 16px 48px rgba(0,0,0,.7); z-index: 9999; display: flex; flex-direction: column; max-height: 480px; } .bsp-email-media-picker.hidden { display: none; } .bsp-email-mp-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; flex-wrap: wrap; } .bsp-email-mp-filters { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; } .bsp-email-mp-close-btn { padding: 2px 8px; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; background: transparent; color: rgba(255,255,255,.6); cursor: pointer; font-size: 13px; flex-shrink: 0; transition: background .12s; } .bsp-email-mp-close-btn:hover { background: rgba(239,68,68,.2); color: #ef4444; } .bsp-email-mp-grid { flex: 1; overflow-y: auto; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 7px; align-content: start; } .bsp-email-mp-item { position: relative; border: 2px solid rgba(255,255,255,.08); border-radius: 8px; overflow: hidden; cursor: pointer; background: rgba(255,255,255,.04); transition: border-color .15s, transform .12s; } .bsp-email-mp-item:hover { border-color: rgba(123,92,240,.4); transform: scale(1.03); } .bsp-email-mp-item.bsp-mp-selected { border-color: #7B5CF0; background: rgba(123,92,240,.15); } .bsp-email-mp-thumb { width: 100%; height: 56px; object-fit: cover; display: block; } .bsp-email-mp-icon { width: 100%; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 24px; } .bsp-email-mp-name { font-size: 9px; color: rgba(255,255,255,.5); padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-email-mp-check { position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; background: #7B5CF0; border-radius: 50%; color: #fff; font-size: 9px; font-weight: 700; display: none; align-items: center; justify-content: center; line-height: 16px; text-align: center; } .bsp-email-mp-item.bsp-mp-selected .bsp-email-mp-check { display: flex; } .bsp-email-mp-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid rgba(255,255,255,.08); flex-shrink: 0; } .bsp-email-mp-count { font-size: 11px; color: rgba(255,255,255,.5); } /* Token category header */ .bsp-email-token-cat { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.3); padding: 5px 8px 2px; } /* ── Team Members View ────────────────────────────────────────────────────── */ .bsp-team-stats-row { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .bsp-team-stat { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px 22px; flex: 1; min-width: 120px; } .bsp-team-stat-num { font-size: 28px; font-weight: 800; color: #fff; line-height: 1; } .bsp-team-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.4); margin-top: 4px; } .bsp-team-role-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .bsp-team-role-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; color: #fff; } .bsp-team-role-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .8; } .bsp-team-table-wrap { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden; } .bsp-team-table { width: 100%; border-collapse: collapse; } .bsp-team-table th { padding: 11px 16px; font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; white-space: nowrap; } .bsp-team-table td { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; } .bsp-team-table tr:last-child td { border-bottom: none; } .bsp-team-table tr:hover td { background: rgba(255,255,255,.025); } .bsp-team-member-cell { display: flex; align-items: center; gap: 10px; } .bsp-team-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: rgba(123,92,240,.2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #7B5CF0; flex-shrink: 0; } .bsp-team-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .bsp-team-member-name { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.2; } .bsp-team-member-email { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 1px; } .bsp-team-role-sel { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #fff; font-size: 12px; font-weight: 600; padding: 5px 10px; cursor: pointer; outline: none; } .bsp-team-role-sel:focus { border-color: rgba(123,92,240,.5); } .bsp-team-brand-chips { display: flex; flex-wrap: wrap; gap: 4px; } .bsp-team-brand-chip { background: rgba(123,92,240,.15); border: 1px solid rgba(123,92,240,.3); color: rgba(123,92,240,.9); border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; } .bsp-team-brand-chip-all { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: rgba(16,185,129,.9); } .bsp-ts-active { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(16,185,129,.3); } .bsp-ts-pending { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); } .bsp-ts-revoked { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: rgba(239,68,68,.12); color: #f87171; border: 1px solid rgba(239,68,68,.25); } .bsp-team-actions { display: flex; gap: 6px; } .bsp-team-actions button { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: rgba(255,255,255,.6); font-size: 12px; padding: 5px 10px; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; } .bsp-team-actions button:hover { background: rgba(255,255,255,.12); color: #fff; } .bsp-team-actions .bsp-team-remove-btn:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.3); color: #f87171; } .bsp-team-login-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 24px; margin-top: 24px; } .bsp-team-login-card h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 4px; } .bsp-team-login-card > p { font-size: 12px; color: rgba(255,255,255,.4); margin: 0 0 16px; } .bsp-team-shortcode-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; } .bsp-team-shortcode-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(123,92,240,.12); border: 1px solid rgba(123,92,240,.3); border-radius: 8px; padding: 6px 12px; font-size: 12px; font-family: monospace; color: rgba(123,92,240,.9); cursor: pointer; } .bsp-team-shortcode-chip:hover { background: rgba(123,92,240,.2); } .bsp-team-shortcode-chip span { font-size: 10px; color: rgba(255,255,255,.35); font-family: inherit; } .bsp-team-login-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; } @media (max-width: 600px) { .bsp-team-login-fields { grid-template-columns: 1fr; } } /* invite modal brand checkboxes */ .bsp-team-brand-checks { display: flex; flex-direction: column; gap: 6px; max-height: 140px; overflow-y: auto; padding: 8px 0; } .bsp-team-brand-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.7); cursor: pointer; } .bsp-team-brand-check input[type=checkbox] { accent-color: #7B5CF0; width: 14px; height: 14px; } .bsp-team-empty { text-align: center; padding: 48px 20px; color: rgba(255,255,255,.3); font-size: 14px; } .bsp-team-empty-icon { font-size: 40px; margin-bottom: 10px; display: block; } .bsp-team-access-summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; } .bsp-team-access-name { font-size: 18px; font-weight: 700; color: #fff; } .bsp-team-access-meta { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 4px; } .bsp-team-access-section { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px; background: rgba(255,255,255,.03); margin-bottom: 14px; } .bsp-team-access-section-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .bsp-team-access-brand-list { max-height: 220px; } .bsp-team-access-create-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 72px; gap: 10px; } .bsp-team-access-create-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 800px) { .bsp-lbx-filmstrip { max-height: 60px; } .bsp-lbx-film-thumb { width: 44px; height: 44px; } .bsp-dash-gallery-grid.bsp-gallery-view-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .bsp-dash-gallery-grid.bsp-gallery-view-large { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .bsp-lbx-bar { flex-wrap: wrap; } .bsp-lbx-actions { flex-wrap: wrap; } .bsp-email-from-row { grid-template-columns: 1fr; } .bsp-email-actions-primary { flex-direction: column; } .bsp-team-access-summary { flex-direction: column; } .bsp-team-access-create-row { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════════ TOKEN WALLET — styles ══════════════════════════════════════════════════════════════════════════════ */ /* ── Sidebar mini-widget ──────────────────────────────────────────────────── */ .bsp-token-wallet-widget { display: flex; align-items: center; gap: 10px; cursor: pointer; background: linear-gradient(135deg, rgba(123,92,240,.18), rgba(16,185,129,.12)); border: 1px solid rgba(123,92,240,.35); border-radius: 12px; padding: 10px 12px; margin: 0 0 10px; transition: background .2s, border-color .2s; } .bsp-token-wallet-widget:hover { background: linear-gradient(135deg,rgba(123,92,240,.28),rgba(16,185,129,.2)); border-color: rgba(123,92,240,.6); } .bsp-tww-icon { font-size: 20px; flex-shrink: 0; } .bsp-tww-body { flex: 1; min-width: 0; } .bsp-tww-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--bsp-text-muted, #9ca3af); } .bsp-tww-balance { font-size: 13px; font-weight: 700; color: #c4b5fd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-tww-buy { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(123,92,240,.5); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; } .bsp-tww-buy:hover { background: #7b5cf0; } /* ── Token view layout ────────────────────────────────────────────────────── */ #bsp-view-tokens { padding-bottom: 60px; } .bsp-token-section-title { font-size: 16px; font-weight: 700; color: var(--bsp-text, #e5e7eb); margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); } .bsp-token-toolbar { display: flex; gap: 8px; } /* ── Balance hero ─────────────────────────────────────────────────────────── */ .bsp-token-hero { background: linear-gradient(135deg, rgba(123,92,240,.2), rgba(16,185,129,.1)); border: 1px solid rgba(123,92,240,.4); border-radius: 16px; padding: 28px 32px; margin-bottom: 28px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .bsp-token-hero-main { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; } .bsp-token-hero-icon { font-size: 48px; } .bsp-token-hero-balance { font-size: 46px; font-weight: 800; color: #c4b5fd; line-height: 1; font-variant-numeric: tabular-nums; } .bsp-token-hero-label { font-size: 13px; color: var(--bsp-text-muted, #9ca3af); margin-top: 4px; } .bsp-token-hero-stats { display: flex; gap: 20px; flex-wrap: wrap; flex: 1; justify-content: flex-end; } .bsp-token-stat-card { background: rgba(255,255,255,.05); border-radius: 10px; padding: 14px 20px; text-align: center; min-width: 110px; } .bsp-token-stat-val { font-size: 22px; font-weight: 700; color: #a5b4fc; } .bsp-token-stat-lbl { font-size: 11px; color: var(--bsp-text-muted, #9ca3af); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; } /* ── Cost grid ────────────────────────────────────────────────────────────── */ .bsp-token-costs-section { margin-bottom: 28px; } .bsp-token-costs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 12px; } .bsp-token-cost-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; font-size: 13px; } .bsp-token-cost-icon { font-size: 20px; flex-shrink: 0; } .bsp-token-cost-name { flex: 1; color: var(--bsp-text, #e5e7eb); } .bsp-token-cost-val { font-weight: 700; color: #fbbf24; } .bsp-token-cost-unit { font-size: 11px; color: var(--bsp-text-muted, #9ca3af); } /* ── Package cards ────────────────────────────────────────────────────────── */ .bsp-token-packages-section { margin-bottom: 28px; } .bsp-token-packages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 20px; } .bsp-token-pkg-loading { color: var(--bsp-text-muted, #9ca3af); padding: 20px 0; } .bsp-token-pkg-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; position: relative; transition: border-color .2s, transform .15s; } .bsp-token-pkg-card:hover { border-color: rgba(123,92,240,.6); transform: translateY(-2px); } .bsp-token-pkg-card.bsp-pkg-popular { border-color: rgba(251,191,36,.6); } .bsp-token-pkg-card.bsp-pkg-best { border-color: rgba(16,185,129,.6); } .bsp-pkg-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #fbbf24; color: #1a1a2e; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; } .bsp-pkg-best .bsp-pkg-badge { background: #10b981; color: #fff; } .bsp-pkg-name { font-size: 15px; font-weight: 700; color: var(--bsp-text, #e5e7eb); } .bsp-pkg-tokens { font-size: 32px; font-weight: 800; color: #c4b5fd; } .bsp-pkg-tokens-unit { font-size: 14px; font-weight: 500; color: var(--bsp-text-muted, #9ca3af); } .bsp-pkg-price { font-size: 22px; font-weight: 700; color: #a5b4fc; } .bsp-pkg-rate { font-size: 11px; color: var(--bsp-text-muted, #9ca3af); } .bsp-pkg-buy-btn { width: 100%; margin-top: 8px; text-align: center; text-decoration: none; } /* ── Transaction history ──────────────────────────────────────────────────── */ .bsp-token-history-section { margin-bottom: 32px; } .bsp-token-history-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .bsp-token-history-filters { display: flex; align-items: center; gap: 8px; } .bsp-token-hist-table-wrap { overflow-x: auto; } .bsp-token-hist-table { width: 100%; border-collapse: collapse; font-size: 13px; } .bsp-token-hist-table th, .bsp-token-hist-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); } .bsp-token-hist-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bsp-text-muted, #9ca3af); } .bsp-token-loading-row { text-align: center; color: var(--bsp-text-muted, #9ca3af); padding: 24px !important; } .bsp-tx-credit { color: #10b981; font-weight: 700; } .bsp-tx-debit { color: #f87171; font-weight: 700; } .bsp-tx-desc { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bsp-text-muted, #9ca3af); } .bsp-tx-date { color: var(--bsp-text-muted, #9ca3af); white-space: nowrap; } .bsp-tx-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; } .bsp-tx-badge-credit { background: rgba(16,185,129,.2); color: #10b981; } .bsp-tx-badge-debit { background: rgba(248,113,113,.15); color: #f87171; } /* ── Admin panel ──────────────────────────────────────────────────────────── */ .bsp-token-admin-panel { background: rgba(255,255,255,.025); border: 1px solid rgba(123,92,240,.3); border-radius: 14px; padding: 24px; margin-top: 32px; } .bsp-token-admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .bsp-token-admin-stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .bsp-token-admin-stat { background: rgba(255,255,255,.04); border-radius: 10px; padding: 14px 20px; text-align: center; flex: 1; min-width: 100px; } .bsp-token-admin-stat span { font-size: 22px; font-weight: 700; color: #a5b4fc; display: block; } .bsp-token-admin-stat small { font-size: 11px; color: var(--bsp-text-muted, #9ca3af); margin-top: 4px; display: block; text-transform: uppercase; } .bsp-token-admin-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; margin-bottom: 24px; } .bsp-token-admin-action-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 16px; } .bsp-token-admin-action-card h4 { font-size: 13px; font-weight: 700; margin: 0 0 12px; color: var(--bsp-text, #e5e7eb); } .bsp-token-admin-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .bsp-token-admin-hint { font-size: 12px; color: var(--bsp-text-muted, #9ca3af); margin: 0 0 12px; } .bsp-token-all-balances-wrap { margin-top: 8px; } .bsp-token-admin-subhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 600; font-size: 14px; } .bsp-search-sm .bsp-search-input { width: 200px; } .bsp-token-balances-table { width: 100%; border-collapse: collapse; font-size: 13px; } .bsp-token-balances-table th, .bsp-token-balances-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); } .bsp-token-balances-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--bsp-text-muted, #9ca3af); } .bsp-btn-xs { padding: 3px 8px; font-size: 11px; } /* ── Low-token modal ──────────────────────────────────────────────────────── */ .bsp-low-token-modal-box { background: var(--bsp-surface, #1e1e3a); border: 1px solid rgba(123,92,240,.5); border-radius: 18px; padding: 40px 32px; max-width: 380px; width: 90%; text-align: center; position: relative; } .bsp-ltm-icon { font-size: 52px; margin-bottom: 12px; } .bsp-ltm-title { font-size: 20px; font-weight: 700; margin: 0 0 12px; color: var(--bsp-text, #e5e7eb); } .bsp-ltm-body { font-size: 14px; color: var(--bsp-text-muted, #9ca3af); margin-bottom: 24px; line-height: 1.6; } .bsp-ltm-actions { display: flex; gap: 12px; justify-content: center; } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .bsp-token-hero { flex-direction: column; padding: 20px; } .bsp-token-hero-stats { justify-content: flex-start; } .bsp-token-hero-balance { font-size: 36px; } .bsp-token-packages-grid { grid-template-columns: 1fr; } .bsp-token-admin-actions { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════════ FULLSCREEN FRONT-END APP PAGE — isolate from any residual theme CSS ══════════════════════════════════════════════════════════════════════════════ */ /* When served in the standalone page-app.php template, these rules ensure the app occupies 100% of the viewport regardless of active theme. */ body.bsp-page-app { margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #0a0a18 !important; /* Kill any theme max-width constraints */ width: 100% !important; max-width: none !important; } body.bsp-page-app #bsp-app-root, body.bsp-page-app .bsp-app { width: 100vw !important; height: 100vh !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; } /* Hide every possible theme container */ body.bsp-page-app #page, body.bsp-page-app #main, body.bsp-page-app .site-header, body.bsp-page-app .site-footer, body.bsp-page-app .entry-header, body.bsp-page-app .entry-footer, body.bsp-page-app .wp-block-post-title, body.bsp-page-app .site-branding, body.bsp-page-app nav.main-navigation, body.bsp-page-app .navigation-branding { display: none !important; } /* GA Voice hands-free patch: keep the floating voice controls clickable in wp-admin and mobile. */ #bsp-voice-standalone-root { z-index: 2147483647 !important; touch-action: manipulation; } #bsp-voice-standalone-root .bsp-voice-widget-shell, #bsp-voice-standalone-root .bsp-voice-widget-shell *, #bsp-voice-float-stop, #bsp-voice-stop-btn, #bsp-voice-stop-session-btn { pointer-events: auto !important; touch-action: manipulation !important; -webkit-user-select: none; user-select: none; } @media (max-width: 782px) { #wpadminbar ~ #wpwrap #bsp-voice-standalone-root, #bsp-voice-standalone-root { right: max(12px, env(safe-area-inset-right, 0px) + 8px) !important; bottom: max(70px, env(safe-area-inset-bottom, 0px) + 16px) !important; transform: none !important; } #bsp-voice-panel { position: fixed !important; inset: max(48px, env(safe-area-inset-top, 0px) + 8px) 8px max(8px, env(safe-area-inset-bottom, 0px) + 8px) 8px !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; overflow: auto !important; } } /* BSP v12 email floating panel hard-fix: make the composer clickable, draggable, and mobile-safe. */ #bsp-email-panel.bsp-email-panel { position: fixed !important; z-index: 2147483000 !important; pointer-events: auto !important; touch-action: auto !important; isolation: isolate; } #bsp-email-panel.bsp-email-panel.hidden { display: none !important; pointer-events: none !important; } #bsp-email-panel .bsp-email-handle { pointer-events: auto !important; touch-action: none !important; cursor: grab !important; } #bsp-email-panel .bsp-email-handle-btns, #bsp-email-panel .bsp-email-handle-btns *, #bsp-email-panel button, #bsp-email-panel input, #bsp-email-panel select, #bsp-email-panel textarea, #bsp-email-panel a { pointer-events: auto !important; touch-action: manipulation !important; position: relative; z-index: 2; } #bsp-email-btn { pointer-events: auto !important; touch-action: manipulation !important; } #bsp-email-panel.bsp-minimized { height: auto !important; max-height: 58px !important; overflow: hidden !important; } @media (max-width: 782px) { #bsp-email-panel.bsp-email-panel { left: 10px !important; right: 10px !important; bottom: 10px !important; top: auto; width: auto !important; max-width: calc(100vw - 20px) !important; max-height: calc(100vh - 80px) !important; border-radius: 16px !important; } #bsp-email-panel .bsp-email-handle { padding: 10px 10px !important; gap: 6px !important; } #bsp-email-panel .bsp-email-handle-left { min-width: 0 !important; max-width: 38vw !important; } #bsp-email-panel .bsp-email-handle-btns { flex-wrap: nowrap !important; overflow-x: auto !important; max-width: 56vw !important; -webkit-overflow-scrolling: touch; } #bsp-email-panel .bsp-email-tab-btn { padding: 6px 8px !important; font-size: 10px !important; } } /* V14 all-brands HTML email controls */ #bsp-email-all-brands-btn{border-color:rgba(124,58,237,.55)!important;background:linear-gradient(135deg,rgba(124,58,237,.16),rgba(255,183,3,.12))!important;color:#fff!important;font-weight:800!important;} #bsp-email-save-viewable-btn,#bsp-email-send-html-btn{border-color:rgba(255,255,255,.18)!important;} #bsp-email-send-html-btn{background:rgba(16,185,129,.12)!important;color:#d1fae5!important;} #bsp-email-save-viewable-btn{background:rgba(59,130,246,.12)!important;color:#dbeafe!important;} /* v15: full-page Email Studio + canvas new-image window */ #bsp-view-email { overflow:auto; padding-bottom:32px; } .bsp-email-page-header { align-items:flex-start; gap:16px; } .bsp-email-page-host { min-height:calc(100vh - 190px); border:1px solid var(--bsp-border, rgba(255,255,255,.12)); border-radius:18px; background:rgba(8,10,18,.82); box-shadow:0 18px 60px rgba(0,0,0,.28); padding:14px; } .bsp-email-page-placeholder { padding:32px; color:var(--bsp-muted,#9aa4b2); } #bsp-email-panel.bsp-email-standalone { position:relative !important; inset:auto !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important; width:100% !important; max-width:none !important; height:auto !important; min-height:calc(100vh - 240px); max-height:none !important; transform:none !important; z-index:1 !important; display:flex !important; flex-direction:column; box-shadow:none !important; border:0 !important; background:transparent !important; } #bsp-email-panel.bsp-email-standalone .bsp-email-handle { cursor:default; position:sticky; top:0; z-index:5; border-radius:14px; } #bsp-email-panel.bsp-email-standalone .bsp-email-body { max-height:none !important; overflow:visible !important; } #bsp-email-panel.bsp-email-standalone .bsp-email-preview-wrap { min-height:520px; } #bsp-email-panel.bsp-email-standalone .bsp-email-preview-iframe { min-height:520px; } body.bsp-email-page-active #bsp-email-panel.bsp-email-standalone .bsp-email-minimize, body.bsp-email-page-active #bsp-email-panel.bsp-email-standalone #bsp-email-width-btn { display:none !important; } .bsp-canvas-new-images-window { position:fixed; right:22px; bottom:24px; width:min(420px, calc(100vw - 30px)); max-height:68vh; z-index:100080; border:1px solid rgba(255,255,255,.16); border-radius:18px; background:rgba(9,12,20,.96); box-shadow:0 22px 70px rgba(0,0,0,.44); overflow:hidden; backdrop-filter:blur(16px); } .bsp-canvas-new-images-window.hidden { display:none !important; } .bsp-cni-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.12); background:linear-gradient(135deg, rgba(123,92,240,.28), rgba(34,197,94,.14)); } .bsp-cni-head strong { display:block; font-size:14px; } #bsp-cni-count { display:block; font-size:11px; color:var(--bsp-muted,#a6adbb); margin-top:2px; } .bsp-cni-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; } .bsp-cni-body { max-height:56vh; overflow:auto; padding:10px; display:grid; gap:10px; } .bsp-cni-card { display:grid; grid-template-columns:92px 1fr; gap:10px; padding:10px; border:1px solid rgba(255,255,255,.10); border-radius:14px; background:rgba(255,255,255,.04); } .bsp-cni-card img { width:92px; height:92px; object-fit:cover; border-radius:12px; background:#111; } .bsp-cni-title { font-weight:800; font-size:13px; line-height:1.2; } .bsp-cni-sub { margin-top:4px; font-size:12px; color:var(--bsp-muted,#a6adbb); } .bsp-cni-btns { margin-top:10px; display:flex; gap:6px; flex-wrap:wrap; } .bsp-cni-on-canvas { right:24px; bottom:82px; } @media (max-width:782px){ .bsp-email-page-host { padding:8px; border-radius:12px; } #bsp-email-panel.bsp-email-standalone { min-height:auto; } .bsp-email-page-header .bsp-header-actions { width:100%; display:grid; grid-template-columns:1fr; } .bsp-canvas-new-images-window { right:10px; bottom:10px; width:calc(100vw - 20px); max-height:74vh; } .bsp-cni-card { grid-template-columns:76px 1fr; } .bsp-cni-card img { width:76px; height:76px; } } /* v16 loading fail-safe */ .bsp-email-page-host:empty::before { content:'Email Studio is ready. Use the Email button again if the composer is hidden.'; display:block; padding:28px; color:var(--bsp-muted,#9aa4b2); } .bsp-dash-loading, .bsp-card-tasks-loading { min-height:28px; } .bsp-card-tasks-empty { color:var(--bsp-muted,#9aa4b2); font-size:12px; padding:8px 0; } /* ======================================================================== BSP v18 Email Studio Rescue + Generation Viewer ====================================================================== */ #bsp-view-email.active { display:block !important; } .bsp-email-page-host { min-height: 520px; width:100%; } .bsp-email-studio-v18 { width:100%; max-width:1320px; margin:0 auto 28px; color:#f8fafc; } .bsp-email-v18-hero { display:flex; justify-content:space-between; gap:22px; align-items:center; padding:26px; border:1px solid rgba(139,92,246,.28); border-radius:24px; background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(49,46,129,.94)); box-shadow:0 24px 70px rgba(0,0,0,.28); margin-bottom:18px; } .bsp-email-v18-kicker { font-size:12px; text-transform:uppercase; letter-spacing:.16em; font-weight:900; color:#c4b5fd; margin-bottom:8px; } .bsp-email-v18-hero h2 { margin:0 0 8px; color:#fff; font-size:28px; letter-spacing:-.035em; } .bsp-email-v18-hero p { margin:0; color:#dbeafe; line-height:1.65; max-width:760px; } .bsp-email-v18-hero-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; } .bsp-email-v18-grid { display:grid; grid-template-columns:minmax(380px,.92fr) minmax(420px,1.08fr); gap:18px; align-items:stretch; } .bsp-email-v18-card { border:1px solid rgba(148,163,184,.22); border-radius:22px; background:rgba(15,23,42,.94); padding:20px; box-shadow:0 20px 55px rgba(0,0,0,.24); min-width:0; } .bsp-email-v18-card-title { font-weight:900; color:#fff; font-size:16px; margin-bottom:14px; } .bsp-email-v18-card label { display:block; margin:12px 0 6px; color:#cbd5e1; font-size:12px; text-transform:uppercase; letter-spacing:.11em; font-weight:800; } .bsp-email-v18-actions { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; } .bsp-email-v18-status { min-height:22px; color:#a7f3d0; font-size:13px; margin:10px 0; } .bsp-email-v18-textarea { width:100%; min-height:330px; resize:vertical; border-radius:16px; border:1px solid rgba(148,163,184,.26); background:#020617; color:#e2e8f0; padding:14px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px; line-height:1.55; box-sizing:border-box; } .bsp-email-v18-preview-card { min-height:560px; } .bsp-email-v18-preview { width:100%; height:560px; border:1px solid rgba(148,163,184,.26); border-radius:16px; background:#fff; } .bsp-email-standalone { position:relative !important; inset:auto !important; width:100% !important; max-width:1320px !important; min-height:420px; margin:18px auto 0 !important; z-index:1 !important; display:block !important; opacity:1 !important; pointer-events:auto !important; transform:none !important; } .bsp-email-standalone.hidden { display:block !important; } .bsp-email-standalone .bsp-email-body { max-height:none !important; } .bsp-v18-generation-window { position:fixed; right:22px; bottom:22px; width:min(920px,calc(100vw - 44px)); max-height:76vh; display:none; flex-direction:column; background:rgba(15,23,42,.98); color:#fff; border:1px solid rgba(139,92,246,.38); border-radius:24px; box-shadow:0 30px 90px rgba(0,0,0,.45); z-index:999999; overflow:hidden; } .bsp-v18-generation-window.is-open { display:flex; } .bsp-v18-gen-head { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 18px; background:linear-gradient(135deg,rgba(49,46,129,.96),rgba(124,58,237,.92)); border-bottom:1px solid rgba(255,255,255,.12); } .bsp-v18-gen-head strong { display:block; font-size:16px; } #bsp-v18-gen-sub { display:block; font-size:12px; color:#ddd6fe; margin-top:2px; } #bsp-v18-gen-close { border:0; background:rgba(255,255,255,.14); color:#fff; width:34px; height:34px; border-radius:999px; cursor:pointer; font-weight:900; } .bsp-v18-gen-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; padding:16px; overflow:auto; } .bsp-v18-gen-card { background:#020617; border:1px solid rgba(148,163,184,.24); border-radius:18px; overflow:hidden; } .bsp-v18-gen-card img,.bsp-v18-gen-card video { width:100%; aspect-ratio:1.15/1; object-fit:cover; display:block; background:#000; } .bsp-v18-gen-card audio { width:calc(100% - 18px); margin:18px 9px; } .bsp-v18-gen-meta { display:flex; justify-content:space-between; gap:8px; padding:10px 12px; color:#cbd5e1; font-size:12px; } .bsp-v18-gen-meta strong { color:#fff; } .bsp-v18-gen-actions { display:flex; gap:8px; padding:0 12px 12px; flex-wrap:wrap; } @media (max-width: 900px) { .bsp-email-v18-hero { flex-direction:column; align-items:flex-start; } .bsp-email-v18-grid { grid-template-columns:1fr; } .bsp-email-v18-preview { height:460px; } .bsp-v18-generation-window { right:10px; bottom:10px; width:calc(100vw - 20px); max-height:82vh; } } /* ======================================================================== BSP v19 Stable Standalone Email Studio ====================================================================== */ #bsp-view-email.active{display:block!important;visibility:visible!important;opacity:1!important;} #bsp-email-page-host{display:block!important;min-height:560px!important;position:relative!important;z-index:5!important;} .bsp-email-v19{width:100%;max-width:1380px;margin:0 auto 32px;color:#f8fafc;box-sizing:border-box;} .bsp-email-v19 *{box-sizing:border-box;} .bsp-email-v19-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:28px;border:1px solid rgba(139,92,246,.35);border-radius:26px;background:linear-gradient(135deg,#06111f 0%,#22145f 52%,#6d28d9 100%);box-shadow:0 30px 80px rgba(2,6,23,.38);margin-bottom:18px;} .bsp-email-v19-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:900;color:#c4b5fd;margin-bottom:8px;} .bsp-email-v19-hero h2{margin:0 0 8px;color:#fff;font-size:30px;line-height:1.08;letter-spacing:-.04em;} .bsp-email-v19-hero p{margin:0;color:#dbeafe;line-height:1.65;max-width:820px;} .bsp-email-v19-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0;} .bsp-email-v19-grid{display:grid;grid-template-columns:minmax(390px,.92fr) minmax(460px,1.08fr);gap:18px;align-items:stretch;} .bsp-email-v19-card{border:1px solid rgba(148,163,184,.24);border-radius:24px;background:rgba(15,23,42,.96);padding:20px;box-shadow:0 22px 60px rgba(0,0,0,.25);min-width:0;} .bsp-email-v19-card-title{font-size:16px;font-weight:900;color:#fff;margin-bottom:14px;} .bsp-email-v19-card label{display:block;margin:12px 0 6px;color:#cbd5e1;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:900;} .bsp-email-v19-textarea{width:100%;min-height:380px;resize:vertical;border-radius:16px;border:1px solid rgba(148,163,184,.28);background:#020617;color:#e2e8f0;padding:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.55;} .bsp-email-v19-status{min-height:24px;margin-top:10px;color:#a7f3d0;font-size:13px;line-height:1.5;} .bsp-email-v19-preview-card{min-height:620px;} .bsp-email-v19-preview{display:block;width:100%;height:590px;border:1px solid rgba(148,163,184,.28);border-radius:16px;background:#fff;} @media(max-width:980px){.bsp-email-v19-hero{flex-direction:column;align-items:flex-start}.bsp-email-v19-grid{grid-template-columns:1fr}.bsp-email-v19-preview{height:500px}.bsp-email-v19{padding:0 4px}.bsp-email-v19-hero,.bsp-email-v19-card{border-radius:18px;padding:16px}} /* v23: Mobile page uses the desktop admin voice engine; no second mobile voice agent. */ body.bsp-mobile-uses-desktop-voice #bsp-voice-standalone-root { display:block !important; } body.bsp-mobile-uses-desktop-voice .bsp-voice-panel { max-width:96vw; } /* v24: mobile desktop-voice page audio + scroll fix */ html.bsp-mobile-scroll-page, body.bsp-mobile-scroll-page, body.bsp-mobile-uses-desktop-voice, body.bsp-mobile-uses-desktop-voice #wpwrap, body.bsp-mobile-uses-desktop-voice #wpcontent, body.bsp-mobile-uses-desktop-voice #wpbody, body.bsp-mobile-uses-desktop-voice #wpbody-content { height:auto !important; min-height:100% !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; } body.bsp-mobile-uses-desktop-voice #bsp-app { height:auto !important; min-height:100vh !important; overflow:visible !important; } body.bsp-mobile-uses-desktop-voice #bsp-voice-audio { position:fixed; left:-9999px; bottom:0; width:1px; height:1px; opacity:.01; pointer-events:none; } body.bsp-mobile-uses-desktop-voice #bsp-mobile-audio-unlock { border-color:rgba(34,197,94,.45); color:#064e3b; background:#ecfdf5; } body.bsp-mobile-uses-desktop-voice #bsp-mobile-audio-unlock.hidden { display:none !important; } body.bsp-mobile-uses-desktop-voice .bsp-mobile-desktop-voice-panel { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* v25 — Canvas light-mode repair for desktop admin scripts */ #bsp-app.bsp-theme-light #bsp-view-canvas, #bsp-app.bsp-theme-light #bsp-view-canvas .bsp-view-header, #bsp-app.bsp-theme-light .bsp-canvas-toolbar, #bsp-app.bsp-theme-light .bsp-canvas-sidebar, #bsp-app.bsp-theme-light .bsp-canvas-wrapper { background: var(--bsp-surface) !important; color: var(--bsp-text) !important; border-color: var(--bsp-border) !important; } #bsp-app.bsp-theme-light .bsp-canvas-wrapper { background: linear-gradient(180deg,#f7fbf8,#eef4f0) !important; } #bsp-app.bsp-theme-light #bsp-node-canvas, #bsp-app.bsp-theme-light #bsp-minimap-canvas { background: #f7fbf8 !important; } #bsp-app.bsp-theme-light .bsp-canvas-float-rail { background: rgba(255,255,255,.92) !important; border-color: rgba(15,72,41,.16) !important; box-shadow: 0 12px 34px rgba(39,76,55,.16) !important; } #bsp-app.bsp-theme-light .bsp-canvas-media-panel, #bsp-app.bsp-theme-light .bsp-canvas-task-panel, #bsp-app.bsp-theme-light .bsp-canvas-stage { background: rgba(255,255,255,.96) !important; border-color: rgba(15,72,41,.14) !important; color: var(--bsp-text) !important; box-shadow: 0 18px 44px rgba(39,76,55,.14) !important; } #bsp-app.bsp-theme-light .bsp-canvas-panel-head, #bsp-app.bsp-theme-light .bsp-play-card-title { color: var(--bsp-text) !important; } #bsp-app.bsp-theme-light .bsp-canvas-stage-caption, #bsp-app.bsp-theme-light .bsp-play-card-meta, #bsp-app.bsp-theme-light .bsp-canvas-stage-chip { color: var(--bsp-muted) !important; } #bsp-app.bsp-theme-light .bsp-play-card-shell { background: #ffffff !important; border-color: rgba(15,72,41,.14) !important; } #bsp-app.bsp-theme-light .bsp-play-card-media { background: #eef4f0 !important; } /* ======================================================================== BSP v26 Clean Standalone Email Studio ======================================================================== */ #bsp-view-email.active { display:block !important; } #bsp-email-page-host { min-height: 620px !important; width: 100% !important; display:block !important; position:relative !important; z-index: 4 !important; } .bsp-v26-email { --v26-card: rgba(15,23,42,.84); --v26-line: rgba(148,163,184,.20); --v26-text: #f8fafc; --v26-muted: #aeb8c8; color: var(--v26-text); display:flex; flex-direction:column; gap:18px; } body.bsp-theme-light .bsp-v26-email, body.light-mode .bsp-v26-email, .bsp-light .bsp-v26-email { --v26-card:#ffffff; --v26-line:#dbe3ef; --v26-text:#0f172a; --v26-muted:#64748b; } .bsp-v26-email-hero { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; padding:24px; border:1px solid var(--v26-line); border-radius:24px; background:linear-gradient(135deg,rgba(124,58,237,.95),rgba(17,24,39,.95)); box-shadow:0 24px 80px rgba(15,23,42,.25); color:#fff; } .bsp-v26-email-hero h2 { margin:5px 0 8px; font-size:28px; line-height:1.05; color:#fff; letter-spacing:-.04em; } .bsp-v26-email-hero p { margin:0; max-width:760px; color:#ede9fe; line-height:1.65; } .bsp-v26-kicker { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.18em; color:#ddd6fe; } .bsp-v26-hero-actions, .bsp-v26-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .bsp-v26-metrics { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:12px; } .bsp-v26-metrics > div { background:var(--v26-card); border:1px solid var(--v26-line); border-radius:18px; padding:16px; box-shadow:0 10px 35px rgba(15,23,42,.10); } .bsp-v26-metrics strong { display:block; font-size:24px; line-height:1; color:var(--v26-text); } .bsp-v26-metrics span { display:block; margin-top:6px; font-size:12px; color:var(--v26-muted); font-weight:700; } .bsp-v26-grid { display:grid; grid-template-columns:minmax(360px, .95fr) minmax(420px, 1.05fr); gap:18px; align-items:start; } .bsp-v26-card { background:var(--v26-card); border:1px solid var(--v26-line); border-radius:22px; padding:18px; box-shadow:0 16px 55px rgba(15,23,42,.14); color:var(--v26-text); } .bsp-v26-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:14px; } .bsp-v26-card h3 { margin:0 0 4px; color:var(--v26-text); font-size:18px; } .bsp-v26-card p { margin:0; color:var(--v26-muted); font-size:13px; line-height:1.55; } .bsp-v26-composer label { display:block; margin:12px 0 6px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--v26-muted); } .bsp-v26-textarea { width:100%; min-height:420px; resize:vertical; border-radius:16px; border:1px solid var(--v26-line); background:rgba(2,6,23,.38); color:var(--v26-text); padding:14px; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:12px; line-height:1.55; } body.bsp-theme-light .bsp-v26-textarea, body.light-mode .bsp-v26-textarea, .bsp-light .bsp-v26-textarea { background:#f8fafc; color:#0f172a; } .bsp-v26-preview { width:100%; min-height:620px; border:1px solid var(--v26-line); border-radius:18px; background:#fff; } .bsp-v26-status { margin-top:12px; padding:12px 14px; border-radius:14px; background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.25); color:#bfdbfe; font-weight:700; font-size:13px; } .bsp-v26-status[data-type="success"]{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.28); color:#86efac; } .bsp-v26-status[data-type="error"]{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.30); color:#fecaca; } body.bsp-theme-light .bsp-v26-status, body.light-mode .bsp-v26-status, .bsp-light .bsp-v26-status { color:#1d4ed8; } body.bsp-theme-light .bsp-v26-status[data-type="success"], body.light-mode .bsp-v26-status[data-type="success"], .bsp-light .bsp-v26-status[data-type="success"] { color:#047857; } body.bsp-theme-light .bsp-v26-status[data-type="error"], body.light-mode .bsp-v26-status[data-type="error"], .bsp-light .bsp-v26-status[data-type="error"] { color:#b91c1c; } .bsp-v26-help { margin-top:12px; padding:12px 14px; border-radius:14px; background:rgba(124,58,237,.10); border:1px solid rgba(124,58,237,.22); color:var(--v26-muted); line-height:1.6; } .bsp-v26-log { display:flex; flex-direction:column; gap:8px; } .bsp-v26-log-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:12px 0; border-bottom:1px solid var(--v26-line); color:var(--v26-text); } .bsp-v26-log-row span { color:var(--v26-muted); font-size:12px; } .bsp-v26-log-row em { font-style:normal; font-size:11px; font-weight:900; text-transform:uppercase; padding:4px 8px; border-radius:999px; background:rgba(148,163,184,.15); color:var(--v26-muted); } .bsp-v26-log-row em.ok { background:rgba(34,197,94,.14); color:#22c55e; } .bsp-v26-log-row em.bad { background:rgba(239,68,68,.14); color:#ef4444; } .bsp-v26-generation-window { position:fixed; right:22px; bottom:22px; width:min(680px, calc(100vw - 44px)); max-height:82vh; display:none; flex-direction:column; z-index:999999; border-radius:22px; overflow:hidden; border:1px solid rgba(148,163,184,.28); background:rgba(15,23,42,.96); color:#fff; box-shadow:0 30px 100px rgba(0,0,0,.38); } .bsp-v26-generation-window.is-open { display:flex; } .bsp-v26-gen-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid rgba(148,163,184,.22); background:linear-gradient(135deg,rgba(124,58,237,.32),rgba(15,23,42,.96)); } .bsp-v26-gen-head span { display:block; color:#cbd5e1; font-size:12px; margin-top:3px; } #bsp-v26-gen-close { border:0; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; width:34px; height:34px; cursor:pointer; } .bsp-v26-gen-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; padding:14px; overflow:auto; } .bsp-v26-gen-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:16px; overflow:hidden; } .bsp-v26-gen-card img, .bsp-v26-gen-card video { width:100%; height:160px; object-fit:cover; display:block; background:#000; } .bsp-v26-gen-card audio { width:100%; display:block; margin:18px 0; } .bsp-v26-gen-meta { padding:10px 12px; display:flex; justify-content:space-between; gap:8px; color:#e2e8f0; } .bsp-v26-gen-meta span { color:#94a3b8; font-size:12px; } .bsp-v26-gen-actions { display:flex; gap:8px; padding:0 12px 12px; flex-wrap:wrap; } @media (max-width: 980px) { .bsp-v26-email-hero { flex-direction:column; } .bsp-v26-grid { grid-template-columns:1fr; } .bsp-v26-metrics { grid-template-columns:repeat(2,1fr); } .bsp-v26-preview { min-height:520px; } } @media (max-width: 640px) { .bsp-v26-metrics { grid-template-columns:1fr; } .bsp-v26-textarea { min-height:320px; } .bsp-v26-email-hero { padding:18px; border-radius:18px; } .bsp-v26-email-hero h2 { font-size:24px; } } /* BSP v27 Stable Email Studio */ body.bsp-email-studio-route #bsp-view-email { display:block !important; } #bsp-view-email.active { overflow:visible !important; } .bsp-email-page-host { min-height: 320px; width:100%; } .bsp-v27-email { display:flex; flex-direction:column; gap:18px; padding: 8px 0 42px; max-width: 1500px; } .bsp-v27-hero { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px; border:1px solid var(--bsp-border,#e5e7eb); border-radius:24px; background:linear-gradient(135deg,rgba(124,58,237,.12),rgba(37,99,235,.08)), var(--bsp-panel,#fff); box-shadow:0 16px 40px rgba(15,23,42,.08); } .bsp-v27-hero h2 { margin:6px 0 8px; font-size:28px; line-height:1.1; color:var(--bsp-text,#111827); } .bsp-v27-hero p { margin:0; max-width:820px; color:var(--bsp-muted,#64748b); line-height:1.65; } .bsp-v27-kicker { font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:900; color:#7c3aed; } .bsp-v27-hero-actions, .bsp-v27-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .bsp-v27-metrics { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:12px; } .bsp-v27-metrics > div { padding:18px; border:1px solid var(--bsp-border,#e5e7eb); border-radius:18px; background:var(--bsp-panel,#fff); box-shadow:0 8px 24px rgba(15,23,42,.06); } .bsp-v27-metrics strong { display:block; font-size:28px; line-height:1; color:var(--bsp-text,#111827); } .bsp-v27-metrics span { display:block; margin-top:6px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--bsp-muted,#64748b); } .bsp-v27-workflow { display:flex; flex-wrap:wrap; gap:10px; } .bsp-v27-workflow span { padding:10px 14px; border-radius:999px; background:#eef2ff; color:#3730a3; font-size:12px; font-weight:800; border:1px solid #c7d2fe; } .bsp-v27-grid { display:grid; grid-template-columns:minmax(420px,1.1fr) minmax(360px,.9fr); gap:18px; align-items:start; } .bsp-v27-card { background:var(--bsp-panel,#fff); border:1px solid var(--bsp-border,#e5e7eb); border-radius:22px; padding:20px; box-shadow:0 14px 34px rgba(15,23,42,.08); } .bsp-v27-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; } .bsp-v27-card h3 { margin:0; font-size:19px; color:var(--bsp-text,#111827); } .bsp-v27-card p { margin:4px 0 0; color:var(--bsp-muted,#64748b); line-height:1.5; } .bsp-v27-card label { display:block; margin:12px 0 7px; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--bsp-muted,#64748b); } .bsp-v27-textarea { width:100%; min-height:430px; resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px; line-height:1.55; border:1px solid var(--bsp-border,#e5e7eb); border-radius:16px; padding:14px; background:var(--bsp-input,#fff); color:var(--bsp-text,#111827); } .bsp-v27-preview { width:100%; min-height:600px; border:1px solid var(--bsp-border,#e5e7eb); border-radius:18px; background:#fff; } .bsp-v27-status { margin-top:12px; padding:12px 14px; border-radius:14px; background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; font-weight:700; } .bsp-v27-status[data-type="success"] { background:#ecfdf5; color:#047857; border-color:#a7f3d0; } .bsp-v27-status[data-type="error"] { background:#fef2f2; color:#b91c1c; border-color:#fecaca; } .bsp-v27-status[data-type="warning"] { background:#fffbeb; color:#92400e; border-color:#fde68a; } .bsp-v27-help { padding:16px 18px; border:1px dashed #a78bfa; border-radius:18px; background:#f5f3ff; color:#4c1d95; line-height:1.65; } .bsp-v27-log { margin-top:14px; display:flex; flex-direction:column; gap:8px; max-height:260px; overflow:auto; } .bsp-v27-log-row { display:grid; grid-template-columns:1fr auto; gap:8px; padding:10px 12px; border-radius:12px; background:rgba(148,163,184,.10); color:var(--bsp-text,#111827); } .bsp-v27-log-row span { grid-column:1 / -1; color:var(--bsp-muted,#64748b); font-size:12px; } .bsp-v27-log-row em { font-style:normal; font-weight:900; text-transform:uppercase; font-size:11px; } .bsp-v27-log-row em.ok { color:#047857; } .bsp-v27-log-row em.bad { color:#b91c1c; } .bsp-v27-generation-window { position:fixed; right:22px; bottom:22px; width:min(720px,calc(100vw - 44px)); max-height:75vh; overflow:auto; z-index:100050; display:none; background:var(--bsp-panel,#fff); border:1px solid var(--bsp-border,#e5e7eb); border-radius:22px; box-shadow:0 24px 90px rgba(0,0,0,.25); } .bsp-v27-generation-window.is-open { display:block; } .bsp-v27-gen-head { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:var(--bsp-panel,#fff); border-bottom:1px solid var(--bsp-border,#e5e7eb); } .bsp-v27-gen-head span { display:block; font-size:12px; color:var(--bsp-muted,#64748b); } #bsp-v27-gen-close { border:0; background:transparent; cursor:pointer; font-size:18px; color:var(--bsp-text,#111827); } .bsp-v27-gen-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; padding:14px; } .bsp-v27-gen-card { border:1px solid var(--bsp-border,#e5e7eb); border-radius:16px; overflow:hidden; background:var(--bsp-panel,#fff); } .bsp-v27-gen-card img,.bsp-v27-gen-card video { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:#0f172a; } .bsp-v27-gen-card audio { width:100%; margin:16px 0; } .bsp-v27-gen-meta { padding:10px 12px; display:flex; justify-content:space-between; gap:8px; color:var(--bsp-text,#111827); } .bsp-v27-gen-meta span { color:var(--bsp-muted,#64748b); font-size:12px; } .bsp-v27-gen-actions { display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 12px; } @media (max-width: 960px) { .bsp-v27-hero { flex-direction:column; } .bsp-v27-grid { grid-template-columns:1fr; } .bsp-v27-metrics { grid-template-columns:repeat(2,minmax(130px,1fr)); } .bsp-v27-preview { min-height:420px; } } @media (max-width: 600px) { .bsp-v27-metrics { grid-template-columns:1fr; } .bsp-v27-card { padding:14px; } .bsp-v27-textarea { min-height:320px; } } /* ────────────────────────────────────────────────────────────────────────────── AI Brand GPT v28 overall polish: stable Email Studio, mobile scroll, light canvas ─────────────────────────────────────────────────────────────────────────── */ .bsp-v28-email-studio{display:block;padding:0 0 30px;color:var(--bsp-text,#f8fafc)} .bsp-v28-hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:26px;border:1px solid rgba(123,92,240,.28);border-radius:24px;background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(79,70,229,.24));box-shadow:0 22px 70px rgba(15,23,42,.22);margin-bottom:16px} .bsp-v28-hero p{margin:0 0 6px;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:#c4b5fd;font-weight:900}.bsp-v28-hero h2{margin:0;font-size:30px;letter-spacing:-.04em;color:#fff}.bsp-v28-hero span{display:block;margin-top:8px;color:rgba(255,255,255,.72);line-height:1.6}.bsp-v28-hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.bsp-v28-status{padding:14px 16px;border:1px solid rgba(148,163,184,.25);border-radius:16px;background:rgba(15,23,42,.38);color:#cbd5e1;margin-bottom:16px}.bsp-v28-status.is-success{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.32);color:#a7f3d0}.bsp-v28-status.is-error{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.32);color:#fecaca}.bsp-v28-status.is-warning{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.32);color:#fde68a} .bsp-v28-metrics{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px;margin-bottom:16px}.bsp-v28-metric{padding:16px;border:1px solid rgba(148,163,184,.25);border-radius:18px;background:rgba(15,23,42,.38)}.bsp-v28-metric span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#94a3b8;font-weight:900}.bsp-v28-metric strong{display:block;margin-top:6px;font-size:28px;line-height:1;color:#fff}.bsp-v28-metric em{display:block;margin-top:7px;font-size:12px;color:#94a3b8;font-style:normal} .bsp-v28-grid{display:grid;grid-template-columns:minmax(420px,1fr) minmax(420px,1fr);gap:16px}.bsp-v28-panel{border:1px solid rgba(148,163,184,.25);border-radius:22px;background:rgba(15,23,42,.38);padding:18px;box-shadow:0 14px 38px rgba(15,23,42,.18)}.bsp-v28-wide{margin-top:16px}.bsp-v28-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.bsp-v28-panel-head h3{margin:0;color:#fff;font-size:18px}.bsp-v28-panel-head span{font-size:12px;color:#94a3b8;line-height:1.5}.bsp-v28-panel label{display:block;margin:12px 0 6px;font-size:12px;color:#cbd5e1;font-weight:800;text-transform:uppercase;letter-spacing:.1em}.bsp-v28-html{width:100%;min-height:380px;border-radius:16px;border:1px solid rgba(148,163,184,.35);background:rgba(2,6,23,.74);color:#e5e7eb;padding:14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px;line-height:1.55;resize:vertical}.bsp-v28-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}.bsp-v28-preview{width:100%;height:520px;border:1px solid rgba(148,163,184,.3);border-radius:18px;background:#fff}.bsp-v28-subgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.bsp-v28-subgrid h4{margin:0 0 8px;color:#fff}.bsp-v28-list,.bsp-v28-log,.bsp-v28-table-wrap{max-height:360px;overflow:auto;border:1px solid rgba(148,163,184,.22);border-radius:16px;padding:10px;background:rgba(2,6,23,.28)}.bsp-v28-list-row,.bsp-v28-log-row{padding:10px;border-bottom:1px solid rgba(148,163,184,.16);display:block}.bsp-v28-list-row:last-child,.bsp-v28-log-row:last-child{border-bottom:0}.bsp-v28-list-row b,.bsp-v28-log-row b{display:block;color:#fff}.bsp-v28-list-row span,.bsp-v28-log-row span{display:block;margin-top:4px;color:#94a3b8;font-size:12px;line-height:1.5}.bsp-v28-log-row em{display:inline-block;margin-top:7px;padding:3px 8px;border-radius:999px;background:rgba(148,163,184,.18);color:#cbd5e1;font-size:11px;font-style:normal;text-transform:uppercase;font-weight:900}.bsp-v28-log-row em.ok{background:rgba(16,185,129,.16);color:#a7f3d0}.bsp-v28-log-row em.bad{background:rgba(239,68,68,.16);color:#fecaca}.bsp-v28-columns{display:grid;grid-template-columns:2fr 1fr;gap:14px}.bsp-v28-table-wrap table{width:100%;border-collapse:collapse}.bsp-v28-table-wrap th,.bsp-v28-table-wrap td{padding:10px;border-bottom:1px solid rgba(148,163,184,.16);text-align:left;color:#e5e7eb;font-size:12px}.bsp-v28-table-wrap th{color:#a5b4fc;text-transform:uppercase;letter-spacing:.1em;font-size:10px}.bsp-v28-table-wrap small{display:block;color:#94a3b8;margin-top:3px}.bsp-v28-notices{position:fixed;right:18px;bottom:18px;z-index:999999;display:grid;gap:10px;max-width:min(420px,calc(100vw - 36px))}.bsp-v28-notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:#111827;color:#e5e7eb;box-shadow:0 14px 40px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12)}.bsp-v28-notice strong{font-size:11px;color:#a5b4fc}.bsp-v28-notice span{line-height:1.45}.bsp-v28-notice button{margin-left:auto;background:transparent;border:0;color:#fff;cursor:pointer}.bsp-v28-generation-viewer{position:fixed;right:20px;bottom:20px;width:min(720px,calc(100vw - 40px));max-height:min(720px,calc(100vh - 90px));z-index:999998;background:#0f172a;border:1px solid rgba(148,163,184,.3);border-radius:22px;box-shadow:0 30px 90px rgba(0,0,0,.45);display:none;overflow:hidden}.bsp-v28-generation-viewer.is-open{display:block}.bsp-v28-gen-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(148,163,184,.22);color:#fff}.bsp-v28-gen-head span{display:block;font-size:12px;color:#94a3b8}.bsp-v28-gen-head button{border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:10px;width:32px;height:32px;cursor:pointer}.bsp-v28-gen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px;max-height:610px;overflow:auto}.bsp-v28-gen-card{background:#111827;border:1px solid rgba(148,163,184,.22);border-radius:18px;padding:10px}.bsp-v28-gen-card img,.bsp-v28-gen-card video{width:100%;display:block;border-radius:14px;background:#020617;max-height:270px;object-fit:contain}.bsp-v28-gen-card audio{width:100%;margin-top:12px}.bsp-v28-gen-meta{display:flex;justify-content:space-between;gap:12px;margin:10px 0;color:#e5e7eb}.bsp-v28-gen-meta span{color:#94a3b8;font-size:12px}.bsp-v28-gen-actions{display:flex;gap:8px;flex-wrap:wrap}.bsp-view#bsp-view-email.active{display:block!important;overflow:visible!important}.bsp-email-page-host{min-height:420px}.bsp-email-page-placeholder{padding:20px;border:1px dashed rgba(148,163,184,.35);border-radius:18px;color:#94a3b8} body.admin-color-light #bsp-view-canvas,body.bsp-theme-light #bsp-view-canvas,.bsp-theme-light #bsp-view-canvas{background:#f8fafc!important;color:#0f172a!important}body.admin-color-light .bsp-canvas-wrapper,body.bsp-theme-light .bsp-canvas-wrapper,.bsp-theme-light .bsp-canvas-wrapper{background:linear-gradient(180deg,#ffffff,#f1f5f9)!important;border-color:#dbe3ef!important}body.admin-color-light .bsp-canvas-toolbar,body.admin-color-light .bsp-canvas-panel,body.admin-color-light .bsp-canvas-sidebar,body.admin-color-light .bsp-canvas-stage,body.bsp-theme-light .bsp-canvas-toolbar,body.bsp-theme-light .bsp-canvas-panel,body.bsp-theme-light .bsp-canvas-sidebar,body.bsp-theme-light .bsp-canvas-stage,.bsp-theme-light .bsp-canvas-toolbar,.bsp-theme-light .bsp-canvas-panel,.bsp-theme-light .bsp-canvas-sidebar,.bsp-theme-light .bsp-canvas-stage{background:#ffffff!important;color:#0f172a!important;border-color:#dbe3ef!important;box-shadow:0 16px 42px rgba(15,23,42,.08)!important}body.admin-color-light .bsp-canvas-toolbar *,body.bsp-theme-light .bsp-canvas-toolbar *,.bsp-theme-light .bsp-canvas-toolbar *{color:inherit}body.admin-color-light #bsp-node-canvas,body.bsp-theme-light #bsp-node-canvas,.bsp-theme-light #bsp-node-canvas{background:#ffffff!important} @media(max-width:980px){.bsp-v28-hero{display:block}.bsp-v28-hero-actions{justify-content:flex-start;margin-top:16px}.bsp-v28-metrics{grid-template-columns:repeat(2,minmax(120px,1fr))}.bsp-v28-grid,.bsp-v28-columns{grid-template-columns:1fr}.bsp-v28-preview{height:440px}.bsp-v28-gen-grid{grid-template-columns:1fr}} @media(max-width:782px){html.wp-toolbar,html.wp-toolbar body{overflow:auto!important;height:auto!important}.bsp-app,.bsp-main,.bsp-content,.bsp-view.active{overflow:visible!important;min-height:auto!important}.bsp-v28-email-studio{padding-bottom:80px}.bsp-v28-hero h2{font-size:24px}.bsp-v28-metrics{grid-template-columns:1fr 1fr}.bsp-v28-html{min-height:300px}.bsp-v28-generation-viewer{right:10px;bottom:10px;width:calc(100vw - 20px);max-height:calc(100vh - 30px)}} /* ── v8.2 BrandCoins meter + provider usage metrics ─────────────────────── */ .bsp-brandcoin-meter-section{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:18px;margin:18px 0 22px} .bsp-brandcoin-meter-card,.bsp-brandcoin-upsell-card,.bsp-brandcoin-usage-section{background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(17,24,39,.86));border:1px solid rgba(134,239,172,.16);border-radius:22px;padding:22px;box-shadow:0 20px 48px rgba(0,0,0,.22)} .bsp-bcm-head,.bsp-bcm-foot{display:flex;justify-content:space-between;align-items:center;gap:14px} .bsp-bcm-head h3,.bsp-brandcoin-upsell-card h3{margin:0;color:#fff;font-size:18px;font-weight:900} .bsp-bcm-head p,.bsp-brandcoin-upsell-card p{margin:6px 0 0;color:rgba(226,232,240,.66);line-height:1.55} #bsp-bcm-status{color:#86efac;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.24);border-radius:999px;padding:7px 11px;white-space:nowrap} .bsp-bcm-bar{height:18px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:18px 0;box-shadow:inset 0 1px 4px rgba(0,0,0,.4)} .bsp-bcm-bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#22c55e,#7c3aed);transition:width .25s ease} .bsp-bcm-foot{font-size:12px;color:rgba(226,232,240,.7)} .bsp-brandcoin-upsell-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center} .bsp-brandcoin-provider-grid{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:12px;margin-top:12px} .bsp-brandcoin-usage-section{margin:0 0 22px} @media(max-width:1100px){.bsp-brandcoin-meter-section{grid-template-columns:1fr}.bsp-brandcoin-provider-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.bsp-bcm-head,.bsp-bcm-foot{align-items:flex-start;flex-direction:column}.bsp-brandcoin-provider-grid{grid-template-columns:1fr}} /* v8.3 Brand Wallet voice command upgrade */ .bsp-brand-wallet-voice-section{ display:grid; grid-template-columns:minmax(260px,.75fr) minmax(340px,1.25fr); gap:18px; align-items:stretch; margin:0 0 22px; padding:22px; border-radius:22px; border:1px solid rgba(134,239,172,.18); background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(124,58,237,.16)); box-shadow:0 20px 48px rgba(0,0,0,.18); } .bsp-brand-wallet-voice-copy h3{margin:0 0 8px;color:var(--bsp-text,#fff);font-size:18px;font-weight:900} .bsp-brand-wallet-voice-copy p{margin:0;color:var(--bsp-text-muted,#9ca3af);line-height:1.55;font-size:13px} .bsp-brand-wallet-voice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .bsp-brand-wallet-cmd{ min-height:44px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.18); color:var(--bsp-text,#fff); font-weight:800; font-size:12px; cursor:pointer; transition:.16s ease; } .bsp-brand-wallet-cmd:hover{border-color:rgba(134,239,172,.5);transform:translateY(-1px);background:rgba(16,185,129,.16)} .bsp-vcc-chip-wallet{border-color:rgba(251,191,36,.28)!important;background:rgba(251,191,36,.09)!important;color:#fde68a!important} @media(max-width:900px){.bsp-brand-wallet-voice-section{grid-template-columns:1fr}.bsp-brand-wallet-voice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){.bsp-brand-wallet-voice-grid{grid-template-columns:1fr}} /* v8.5 Voice Command Library Expansion */ .bsp-command-directory-layout-v85{grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr)} .bsp-command-directory-side{display:grid;gap:14px;align-content:start} .bsp-command-pack-grid{display:grid;gap:10px;max-height:255px;overflow:auto} .bsp-command-pack-card{width:100%;text-align:left;border:1px solid rgba(251,191,36,.20);background:linear-gradient(135deg,rgba(251,191,36,.08),rgba(34,197,94,.06));border-radius:15px;color:#f8fafc;padding:13px;cursor:pointer;display:flex;flex-direction:column;gap:7px;transition:.16s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} .bsp-command-pack-card:hover{transform:translateY(-1px);border-color:rgba(251,191,36,.42);background:linear-gradient(135deg,rgba(251,191,36,.14),rgba(34,197,94,.10))} .bsp-command-pack-card strong{font-size:13px;color:#fff}.bsp-command-pack-card span{font-size:11.5px;line-height:1.45;color:#cbd5e1}.bsp-command-pack-card em{font-style:normal;font-size:10.5px;color:#fde68a;background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.16);border-radius:999px;padding:5px 8px;align-self:flex-start}.bsp-vcc-chip-asset,.bsp-vcc-chip-todo{border-color:rgba(168,85,247,.22)}.bsp-vcc-chip-asset:hover,.bsp-vcc-chip-todo:hover{background:rgba(168,85,247,.12)} @media(max-width:900px){.bsp-command-directory-layout-v85{grid-template-columns:1fr}.bsp-command-pack-grid{max-height:360px}}