/* 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 */ } /* 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; } #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-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; } .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-surface3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--bsp-border-bright); } /* 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: 64px; height: 64px; } .bsp-voice-standalone-btn { position: absolute; inset: 0; width: 64px; height: 64px; 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); } .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); } } /* Small "live" badge that appears on the floating button when panel is minimized */ .bsp-voice-bg-badge { position: absolute; top: -4px; right: -4px; 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; } .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-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-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); } /* ─── 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-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-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; } .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-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; /* Cards are naturally as tall as their content — no forced height */ } .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: 12px 14px 6px; display: flex; flex-direction: column; gap: 10px; /* 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; /* Show full description — no truncation */ } .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; } /* ── 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; } /* ── 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, #bsp-gen-jobs-tray.open, .bsp-gen-jobs-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; } /* ══════════════════════════════════════════════════════════════════════════════ v7.8.2 MOBILE OVERLAY HARDENING + CANVAS-FIRST MEDIA FLOW Keeps the mobile workspace usable by moving nav to a bottom rail, preventing hidden overlays from stealing taps, and making media panels full-width sheets. ══════════════════════════════════════════════════════════════════════════════ */ .bsp-media-popup-overlay.hidden, .bsp-media-popup.hidden, .bsp-generations-panel.hidden, #bsp-generations-panel.hidden, #bsp-gen-jobs-tray:not(.open):not(.bsp-tray-open) { pointer-events: none !important; } #bsp-new-image-toasts, #bsp-gen-result-toasts { pointer-events: none !important; } #bsp-new-image-toasts > *, #bsp-gen-result-toasts > * { pointer-events: auto !important; } @media (max-width: 768px) { html, body { width: 100% !important; max-width: 100% !important; overflow: hidden !important; overscroll-behavior: none; } #bsp-app { inset: 0 !important; margin: 0 !important; width: 100dvw !important; height: 100dvh !important; min-height: 100dvh !important; display: block !important; overflow: hidden !important; } .bsp-main { position: absolute !important; inset: 0 0 68px 0 !important; width: 100% !important; height: auto !important; min-width: 0 !important; overflow: hidden !important; } .bsp-sidebar { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 100070 !important; width: 100% !important; height: 68px !important; min-height: 68px !important; border-right: 0 !important; border-top: 1px solid var(--bsp-border2) !important; background: rgba(7,17,13,.98) !important; backdrop-filter: blur(18px) !important; display: block !important; overflow: hidden !important; padding: 0 !important; } .bsp-sidebar-logo, .bsp-brand-list, .bsp-sidebar-footer, .bsp-nav-history-row, .bsp-nav-quickjump, .bsp-nav-group-label { display: none !important; } .bsp-sidebar-nav { height: 68px !important; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .bsp-sidebar-nav::-webkit-scrollbar { display: none; } .bsp-nav-item { flex: 0 0 auto !important; min-width: 64px !important; max-width: 78px !important; height: 52px !important; padding: 6px 8px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 3px !important; text-align: center !important; font-size: 10px !important; line-height: 1.05 !important; white-space: normal !important; scroll-snap-align: center; touch-action: manipulation; } .bsp-nav-icon { width: auto !important; font-size: 16px !important; line-height: 1 !important; } .bsp-topbar { min-height: 58px !important; height: auto !important; padding: 7px 10px !important; gap: 8px !important; align-items: stretch !important; flex-wrap: wrap !important; z-index: 60 !important; } .bsp-topbar-left, .bsp-topbar-right { width: 100% !important; max-width: 100% !important; gap: 6px !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; } .bsp-topbar-right { justify-content: flex-start !important; padding-bottom: 2px !important; } .bsp-topbar-right .bsp-btn, .bsp-topbar-left .bsp-btn { min-height: 38px !important; min-width: max-content !important; padding: 7px 10px !important; font-size: 12px !important; } .bsp-api-status, .bsp-cron-badge { display: none !important; } .bsp-view { padding: 14px 12px 18px !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; } .bsp-view-header, .bsp-dash-header, .bsp-canvas-toolbar, .bsp-canvas-toolbar-left, .bsp-canvas-toolbar-right, .bsp-dash-header-actions { flex-wrap: wrap !important; gap: 8px !important; } .bsp-generate-layout, .bsp-playground-layout, .bsp-dash-grid, .bsp-features-grid, .bsp-token-admin-actions, .bsp-products-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 14px !important; } .bsp-gen-panel, .bsp-gen-preview-panel, .bsp-play-tab-content, #bsp-playground-grid.bsp-library-grid { max-height: none !important; overflow: visible !important; padding-right: 0 !important; } #bsp-view-canvas.active { height: calc(100dvh - 126px) !important; max-height: calc(100dvh - 126px) !important; } .bsp-canvas-toolbar { max-height: 118px !important; overflow-y: auto !important; padding: 8px !important; } .bsp-canvas-wrapper { min-height: 360px !important; border-radius: 12px !important; } .bsp-canvas-float-rail { top: auto !important; left: 8px !important; right: 8px !important; bottom: 8px !important; z-index: 45 !important; flex-direction: row !important; overflow-x: auto !important; border-radius: 14px !important; } .bsp-canvas-stage, .bsp-canvas-media-panel, .bsp-canvas-task-panel, .bsp-media-popup, #bsp-gen-jobs-tray, .bsp-gen-jobs-tray, .bsp-generations-panel { position: fixed !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; bottom: calc(76px + env(safe-area-inset-bottom)) !important; max-height: min(72dvh, 620px) !important; z-index: 100090 !important; border-radius: 18px !important; } .bsp-canvas-stage { top: auto !important; } .bsp-media-popup-body, .bsp-canvas-stage-body, .bsp-canvas-media-list, .bsp-generations-list, .bsp-jobs-list { max-height: calc(72dvh - 96px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } .bsp-media-popup-overlay, .bsp-modal-overlay:not(.hidden) { z-index: 100080 !important; } #bsp-gen-queue-badge, .bsp-gen-tray-badge, #bsp-voice-bubble, #bsp-voice-standalone-btn { bottom: calc(84px + env(safe-area-inset-bottom)) !important; right: 12px !important; z-index: 100100 !important; } #bsp-gen-result-toasts, .bsp-notifications { top: 8px !important; right: 8px !important; left: 8px !important; max-width: none !important; z-index: 100110 !important; } .bsp-gen-result-toast, .bsp-notification { width: 100% !important; max-width: none !important; } textarea.bsp-textarea, input.bsp-input, select.bsp-select { font-size: 16px !important; /* stops iOS zoom */ } } /* ────────────────────────────────────────────────────────────── v7.8.3 Import Hub + To-Do button stability ────────────────────────────────────────────────────────────── */ .bsp-importhub-toolbar, .bsp-importhub-quick, .bsp-importhub-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .bsp-importhub-toolbar .bsp-brand-picker { max-width:min(560px,100%); } .bsp-importhub-hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr); gap:18px; align-items:center; margin:14px 0 18px; padding:22px; border:1px solid rgba(123,92,240,.22); border-radius:20px; background: radial-gradient(circle at 15% 10%, rgba(123,92,240,.20), transparent 34%), radial-gradient(circle at 85% 30%, rgba(14,165,233,.16), transparent 32%), rgba(255,255,255,.035); box-shadow:0 20px 60px rgba(0,0,0,.18); } .bsp-importhub-kicker { color:#a78bfa; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; } .bsp-importhub-hero h3 { margin:0 0 8px; font-size:24px; line-height:1.1; } .bsp-importhub-hero p { margin:0; max-width:780px; color:rgba(255,255,255,.62); line-height:1.55; } .bsp-importhub-quick { justify-content:flex-end; } .bsp-importhub-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; } .bsp-importhub-card { min-height:210px; padding:18px; border:1px solid rgba(255,255,255,.09); border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow:0 16px 45px rgba(0,0,0,.16); } .bsp-importhub-card h3 { margin:8px 0 7px; font-size:16px; } .bsp-importhub-card p { margin:0 0 14px; color:rgba(255,255,255,.56); font-size:12px; line-height:1.55; } .bsp-importhub-card code { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.07); border-radius:6px; padding:1px 5px; color:#bfdbfe; } .bsp-importhub-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:rgba(123,92,240,.16); border:1px solid rgba(123,92,240,.26); font-size:20px; } .bsp-todo-tpl-add-btn[disabled] { opacity:.58; cursor:progress !important; pointer-events:none; } @media (max-width: 780px) { .bsp-importhub-hero { grid-template-columns:1fr !important; padding:16px !important; } .bsp-importhub-quick, .bsp-importhub-toolbar, .bsp-importhub-actions { justify-content:flex-start !important; } .bsp-importhub-quick .bsp-btn, .bsp-importhub-actions .bsp-btn { flex:1 1 140px; } .bsp-importhub-grid { grid-template-columns:1fr !important; } .bsp-todo-tpl-footer, .bsp-todo-tpl-import-row { flex-direction:column !important; align-items:stretch !important; } .bsp-todo-tpl-import-right { display:flex; gap:8px; flex-wrap:wrap; } } /* ── v7.8.6 Expanded Brand/Asset Checklist Template Library ─────────────── */ .bsp-todo-tpl-tools { display:flex; flex-direction:column; gap:10px; margin:0 0 14px; padding:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:12px; } .bsp-todo-tpl-search-wrap { display:flex; align-items:center; gap:8px; } .bsp-todo-tpl-search-wrap span { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:rgba(123,92,240,.16); color:#c4b5fd; } .bsp-todo-tpl-search-wrap input { flex:1; min-width:180px; } .bsp-todo-tpl-filters { display:flex; flex-wrap:wrap; gap:6px; } .bsp-todo-tpl-filter { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.045); color:rgba(255,255,255,.72); border-radius:999px; padding:6px 9px; font-size:11px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; } .bsp-todo-tpl-filter span { color:rgba(255,255,255,.45); font-size:10px; } .bsp-todo-tpl-filter.active { border-color:rgba(167,139,250,.55); background:rgba(123,92,240,.22); color:#fff; } .bsp-todo-tpl-card { min-height:185px; display:flex; flex-direction:column; } .bsp-todo-tpl-card .bsp-todo-tpl-add-btn { margin-top:auto !important; } .bsp-todo-tpl-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:6px; } .bsp-todo-tpl-group { font-size:9px; line-height:1; padding:5px 6px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.55); white-space:nowrap; } .bsp-todo-tpl-empty { grid-column:1/-1; padding:18px; border:1px dashed rgba(255,255,255,.16); border-radius:12px; color:rgba(255,255,255,.62); text-align:center; } @media (max-width: 780px) { .bsp-todo-tpl-grid { grid-template-columns:1fr !important; } .bsp-todo-tpl-tools { position:sticky; top:0; z-index:3; backdrop-filter:blur(14px); } .bsp-todo-tpl-filter { flex:1 1 auto; justify-content:center; } } /* ── v7.8.6 Email Studio Standalone Page ───────────────────────────────────── */ #bsp-view-email.active { display: flex; flex-direction: column; height: calc(100dvh - 74px); overflow: hidden; } .bsp-email-page-header { align-items: flex-start; gap: 16px; flex-shrink: 0; } .bsp-email-page-subtitle { margin: 6px 0 0; color: var(--bsp-text-muted, rgba(255,255,255,.58)); font-size: 12px; line-height: 1.5; max-width: 840px; } .bsp-email-page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .bsp-email-panel.bsp-email-page { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; max-width: none !important; max-height: none !important; height: 100%; min-height: 0; border-radius: 22px; z-index: 1; overflow: hidden; box-shadow: 0 18px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04); background: radial-gradient(circle at top right, rgba(123,92,240,.18), transparent 38%), linear-gradient(180deg, rgba(7,17,13,.98), rgba(4,10,7,.99)); } .bsp-email-panel.bsp-email-page .bsp-email-handle { cursor: default; touch-action: auto; padding: 14px 18px; background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(123,92,240,.16)); } .bsp-email-panel.bsp-email-page .bsp-email-width-btn, .bsp-email-panel.bsp-email-page #bsp-email-minimize, .bsp-email-panel.bsp-email-page #bsp-email-close-btn { display: none !important; } .bsp-email-panel.bsp-email-page .bsp-email-tab-content { padding: 18px; overflow-y: auto; min-height: 0; } .bsp-email-page-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); scrollbar-width: thin; flex-shrink: 0; } .bsp-email-tool-btn { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.055); color: rgba(255,255,255,.78); border-radius: 999px; padding: 7px 12px; white-space: nowrap; font-size: 11px; font-weight: 700; cursor: pointer; transition: transform .15s, background .15s, border-color .15s; } .bsp-email-tool-btn:hover { transform: translateY(-1px); background: rgba(123,92,240,.18); border-color: rgba(167,139,250,.38); } .bsp-email-page-insights { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.16); flex-shrink: 0; } .bsp-email-insight-card { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.045); border-radius: 14px; padding: 10px 12px; min-width: 0; } .bsp-email-insight-label { display: block; font-size: 9px; letter-spacing: .9px; text-transform: uppercase; color: rgba(255,255,255,.42); margin-bottom: 4px; } .bsp-email-insight-card strong { display: block; font-size: 18px; color: #dfffe9; line-height: 1; } #bsp-email-kpi-ready[data-ready="ready"] { color: #86efac; } #bsp-email-kpi-ready[data-ready="needs-qa"] { color: #fbbf24; } .bsp-email-campaign-header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; background: rgba(255,255,255,.045); } .bsp-email-campaign-help { margin: 5px 0 0; font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.5; } .bsp-email-campaign-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; } .bsp-email-campaign-actions { display: flex; gap: 8px; flex-wrap: wrap; } .bsp-email-campaign-output { min-height: 340px; font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.55; } .bsp-email-campaign-note { border: 1px solid rgba(34,197,94,.18); background: rgba(34,197,94,.08); color: rgba(220,255,230,.8); border-radius: 12px; padding: 10px 12px; font-size: 12px; } .bsp-email-panel.bsp-email-page .bsp-email-two-col, .bsp-email-panel.bsp-email-page .bsp-email-adv-row { grid-template-columns: repeat(2, minmax(0,1fr)); } .bsp-email-panel.bsp-email-page .bsp-email-textarea { min-height: 260px; } .bsp-email-panel.bsp-email-page-compact .bsp-email-page-insights { grid-template-columns: repeat(3, minmax(0,1fr)); } @media (max-width: 1100px) { .bsp-email-page-insights { grid-template-columns: repeat(3, minmax(0,1fr)); } .bsp-email-campaign-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 768px) { #bsp-view-email.active { height: calc(100dvh - 92px) !important; padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important; } .bsp-email-page-header-actions { justify-content: flex-start; width: 100%; } .bsp-email-panel.bsp-email-page { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: 100% !important; max-height: none !important; border-radius: 16px !important; z-index: 1 !important; } .bsp-email-panel.bsp-email-page .bsp-email-handle { flex-direction: column; align-items: stretch; gap: 9px; } .bsp-email-handle-btns { overflow-x: auto; padding-bottom: 2px; } .bsp-email-page-toolbar { padding: 9px 10px; } .bsp-email-page-insights { grid-template-columns: repeat(2, minmax(0,1fr)) !important; padding: 9px 10px; } .bsp-email-insight-wide { grid-column: span 2; } .bsp-email-panel.bsp-email-page .bsp-email-two-col, .bsp-email-panel.bsp-email-page .bsp-email-adv-row, .bsp-email-campaign-grid { grid-template-columns: 1fr !important; } .bsp-email-campaign-header { flex-direction: column; } .bsp-email-panel.bsp-email-page .bsp-email-tab-content { padding: 12px; } .bsp-email-panel.bsp-email-page .bsp-email-textarea { min-height: 220px; } } /* ── v7.8.6 Full Email Studio Expansion ───────────────────────────────────── */ .bsp-email-page-insights { grid-template-columns: repeat(8, minmax(100px, 1fr)); } .bsp-email-pro-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:14px; background:linear-gradient(135deg, rgba(123,92,240,.12), rgba(34,197,94,.08)); margin-bottom:12px; } .bsp-email-pro-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .bsp-email-pro-output { min-height:280px; font-family:'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height:1.55; } .bsp-email-qa-score-row { display:grid; grid-template-columns:220px 1fr; gap:12px; margin-bottom:12px; } .bsp-email-score-ring { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:180px; border-radius:22px; border:1px solid rgba(34,197,94,.22); background:radial-gradient(circle at center, rgba(34,197,94,.22), rgba(255,255,255,.035) 64%); box-shadow: inset 0 0 38px rgba(34,197,94,.08); } .bsp-email-score-ring strong { font-size:38px; color:#bbf7d0; line-height:1; } .bsp-email-score-ring span { color:rgba(255,255,255,.55); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-top:8px; } .bsp-email-qa-list { display:grid; gap:8px; } .bsp-email-qa-item { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:10px 12px; background:rgba(255,255,255,.04); color:rgba(255,255,255,.78); font-size:12px; line-height:1.45; } .bsp-email-qa-item.good { border-color:rgba(34,197,94,.28); background:rgba(34,197,94,.07); } .bsp-email-qa-item.warn { border-color:rgba(251,191,36,.28); background:rgba(251,191,36,.07); } .bsp-email-qa-item.bad { border-color:rgba(248,113,113,.26); background:rgba(248,113,113,.07); } .bsp-email-qa-badge { font-size:10px; font-weight:800; border-radius:999px; padding:3px 7px; background:rgba(255,255,255,.08); white-space:nowrap; } .bsp-email-asset-grid, .bsp-email-analytics-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-bottom:12px; } .bsp-email-mini-card { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.045); border-radius:16px; padding:13px; min-height:86px; } .bsp-email-mini-card strong { display:block; color:#dfffe9; font-size:18px; margin-bottom:5px; } .bsp-email-mini-card span { display:block; color:rgba(255,255,255,.55); font-size:12px; line-height:1.45; } .bsp-email-flow-board { display:flex; align-items:stretch; gap:8px; overflow-x:auto; padding:8px 0 14px; margin-bottom:8px; } .bsp-email-flow-node { min-width:155px; border:1px solid rgba(123,92,240,.22); background:linear-gradient(180deg, rgba(123,92,240,.14), rgba(255,255,255,.04)); border-radius:16px; padding:14px; color:#f5f3ff; font-weight:800; text-align:center; } .bsp-email-flow-node small { display:block; color:rgba(255,255,255,.52); font-weight:600; margin-top:5px; line-height:1.35; } .bsp-email-flow-arrow { display:flex; align-items:center; color:rgba(255,255,255,.32); font-size:22px; } .bsp-email-pro-toast { position:fixed; right:20px; bottom:22px; z-index:999999; max-width:360px; background:rgba(8,13,10,.96); color:#eaffef; border:1px solid rgba(34,197,94,.28); border-radius:16px; padding:12px 14px; box-shadow:0 18px 60px rgba(0,0,0,.45); font-size:12px; line-height:1.45; } @media (max-width: 1200px) { .bsp-email-page-insights { grid-template-columns: repeat(4, minmax(0,1fr)); } .bsp-email-asset-grid, .bsp-email-analytics-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width: 768px) { .bsp-email-pro-head { flex-direction:column; } .bsp-email-pro-actions { justify-content:flex-start; width:100%; } .bsp-email-qa-score-row { grid-template-columns:1fr; } .bsp-email-score-ring { min-height:130px; } .bsp-email-asset-grid, .bsp-email-analytics-grid { grid-template-columns:1fr; } .bsp-email-page-insights { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .bsp-email-pro-toast { left:12px; right:12px; bottom:calc(88px + env(safe-area-inset-bottom)); max-width:none; } } /* v7.8.8 — reliable Email Studio + Brand To-Do taps */ .bsp-email-tool-btn, .bsp-email-tab-btn, .bsp-todo-tpl-add-btn, #bsp-todo-checklist-btn, #bsp-todo-ai-btn, #bsp-todo-new-btn { pointer-events: auto !important; touch-action: manipulation; -webkit-tap-highlight-color: rgba(123,92,240,.25); } .bsp-todo-tpl-add-btn.is-busy, .bsp-email-tool-btn.is-busy { opacity: .72; cursor: wait !important; } .bsp-email-qa-item { display:flex; justify-content:space-between; gap:12px; padding:9px 10px; border:1px solid rgba(255,255,255,.1); border-radius:12px; margin-bottom:8px; background:rgba(15,23,42,.72); } .bsp-email-qa-item.ok { border-color:rgba(34,197,94,.35); } .bsp-email-qa-item.fix { border-color:rgba(249,115,22,.45); } @media (max-width: 782px) { .bsp-email-page-toolbar { position:relative; z-index:20; } .bsp-email-handle-btns { overflow-x:auto; -webkit-overflow-scrolling:touch; } .bsp-todo-tpl-card { position:relative; z-index:2; } .bsp-todo-tpl-panel { position:relative; z-index:30; } } /* v7.8.8 — Brand To-Do template button reliability */ #bsp-todo-checklist-btn, #bsp-todo-tpl-close, .bsp-todo-tpl-filter, .bsp-todo-tpl-add-btn { pointer-events: auto !important; cursor: pointer !important; touch-action: manipulation; position: relative; z-index: 80; } #bsp-todo-tpl-panel:not(.hidden) { display: block !important; pointer-events: auto !important; position: relative; z-index: 70; } #bsp-todo-tpl-grid, #bsp-todo-tpl-tools, .bsp-todo-tpl-card { pointer-events: auto !important; } .bsp-todo-tpl-add-btn.is-busy, .bsp-todo-tpl-add-btn[disabled] { pointer-events: none !important; opacity: .72; } /* ═══════════════════════════════════════════════════════════════════════════════ v7.8.9 Brand To-Do Project Management upgrade ═══════════════════════════════════════════════════════════════════════════════ */ .bsp-todo-search-wrap{display:flex;align-items:center;gap:6px;min-width:220px;background:rgba(15,23,42,.72);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:0 9px;height:36px} .bsp-todo-search-wrap span{opacity:.55}.bsp-todo-search-wrap .bsp-input{border:0!important;background:transparent!important;height:32px!important;padding:0!important;box-shadow:none!important} .bsp-todo-pm-suite{margin:14px 0 16px;padding:16px;border:1px solid rgba(124,92,240,.25);border-radius:20px;background:linear-gradient(135deg,rgba(15,23,42,.86),rgba(30,41,59,.68));box-shadow:0 18px 50px rgba(0,0,0,.22)} .bsp-todo-pm-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:12px}.bsp-todo-pm-head h3{margin:0 0 4px;font-size:17px}.bsp-todo-pm-head p{margin:0;color:rgba(255,255,255,.58);font-size:12px;max-width:780px}.bsp-todo-pm-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .bsp-todo-pm-kpis{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:10px;margin:12px 0}.bsp-todo-pm-kpi{padding:12px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1)}.bsp-todo-pm-kpi span{display:block;font-size:11px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.06em}.bsp-todo-pm-kpi strong{display:block;font-size:24px;line-height:1.2;margin:2px 0}.bsp-todo-pm-kpi small{color:rgba(255,255,255,.5);font-size:11px} .bsp-todo-pm-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.bsp-todo-pm-tab{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:rgba(255,255,255,.76);border-radius:999px;padding:7px 12px;font-size:12px;cursor:pointer}.bsp-todo-pm-tab.active{background:#7B5CF0;border-color:#7B5CF0;color:#fff;box-shadow:0 0 0 3px rgba(123,92,240,.18)} .bsp-todo-pm-panel{min-height:70px}.bsp-todo-pm-grid{display:grid;grid-template-columns:1.3fr 1fr .9fr;gap:12px}.bsp-todo-pm-card,.bsp-todo-project-summary-card{border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(2,6,23,.35);padding:14px}.bsp-todo-pm-card h4,.bsp-todo-project-summary-card h4{margin:0 0 10px}.bsp-todo-project-mini{display:grid;grid-template-columns:1fr 120px 40px;gap:10px;align-items:center;margin:8px 0}.bsp-todo-project-mini strong{display:block}.bsp-todo-project-mini span{font-size:11px;color:rgba(255,255,255,.5)}.bsp-mini-bar{height:8px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}.bsp-mini-bar i{display:block;height:100%;background:linear-gradient(90deg,#7B5CF0,#22C55E);border-radius:999px}.bsp-todo-next-actions{margin:0;padding-left:18px}.bsp-todo-next-actions li{margin:7px 0}.bsp-todo-next-actions .danger{color:#fca5a5}.bsp-todo-next-actions .warn{color:#fcd34d}.bsp-todo-next-actions .ok{color:#86efac}.bsp-todo-pm-quick{display:flex;gap:8px;flex-wrap:wrap} .bsp-todo-bulk-bar{position:sticky;top:10px;z-index:40;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0;padding:10px;border-radius:14px;background:rgba(17,24,39,.96);border:1px solid rgba(123,92,240,.35);box-shadow:0 12px 35px rgba(0,0,0,.25)}.bsp-todo-bulk-card-check,.bsp-todo-bulk-list-check{display:inline-flex;align-items:center;justify-content:center;margin-right:6px}.bsp-todo-bulk-check{width:16px;height:16px;accent-color:#7B5CF0}.bsp-todo-list-row .bsp-todo-bulk-list-check{align-self:flex-start;margin-top:3px} .bsp-todo-project-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.bsp-todo-project-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.bsp-todo-project-card-metrics{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.bsp-todo-project-card-metrics span{font-size:11px;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.08)}.bsp-todo-project-summary-card p{font-size:12px;color:rgba(255,255,255,.58);min-height:32px} .bsp-todo-workload-list{display:grid;gap:10px}.bsp-todo-workload-row{display:grid;grid-template-columns:minmax(160px,260px) 1fr;gap:14px;align-items:center;padding:10px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.bsp-todo-workload-row strong{display:block}.bsp-todo-workload-row span{font-size:11px;color:rgba(255,255,255,.55)} .bsp-todo-risk-list{display:grid;gap:8px}.bsp-todo-risk-row{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:12px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.18)}.bsp-risk-dot{width:10px;height:10px;border-radius:50%}.bsp-todo-risk-row strong{display:block}.bsp-todo-risk-row small{display:block;color:rgba(255,255,255,.55);margin-top:2px}.bsp-todo-risk-empty{padding:18px;border-radius:14px;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:#86efac} .bsp-todo-report-box{min-height:360px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:pre;line-height:1.55}.bsp-todo-pm-report-actions{display:flex;gap:8px;margin-top:8px}.bsp-todo-bulk-help p,.bsp-muted{color:rgba(255,255,255,.56)} .bsp-todo-timeline{padding:10px 0}.bsp-todo-timeline-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.bsp-todo-timeline-row{display:grid;grid-template-columns:110px 24px 1fr;gap:8px;align-items:stretch}.bsp-todo-timeline-date{font-size:12px;color:rgba(255,255,255,.62);padding-top:14px;text-align:right}.bsp-todo-timeline-rail{position:relative;display:flex;justify-content:center}.bsp-todo-timeline-rail:before{content:"";position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,.1)}.bsp-todo-timeline-rail span{position:relative;z-index:1;width:12px;height:12px;border-radius:50%;margin-top:16px;box-shadow:0 0 0 4px rgba(255,255,255,.06)}.bsp-todo-timeline-card{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);margin-bottom:8px}.bsp-todo-timeline-card strong{display:block}.bsp-todo-timeline-card small{display:block;color:rgba(255,255,255,.55);margin-top:3px}.bsp-todo-timeline-row.overdue .bsp-todo-timeline-card{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}.bsp-todo-timeline-row.today .bsp-todo-timeline-card{border-color:rgba(250,204,21,.35);background:rgba(250,204,21,.07)} .bsp-project-plan-box{max-width:780px}.bsp-plan-preview{display:grid;gap:8px;max-height:260px;overflow:auto;margin-top:12px;padding:10px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.bsp-plan-preview div{display:flex;justify-content:space-between;gap:12px;padding:8px;border-radius:10px;background:rgba(15,23,42,.45)}.bsp-plan-preview span{font-size:11px;color:rgba(255,255,255,.55)} @media(max-width:1200px){.bsp-todo-pm-kpis{grid-template-columns:repeat(3,1fr)}.bsp-todo-pm-grid{grid-template-columns:1fr}.bsp-todo-pm-head{flex-direction:column}.bsp-todo-search-wrap{min-width:100%;width:100%}} @media(max-width:700px){.bsp-todo-pm-kpis{grid-template-columns:repeat(2,1fr)}.bsp-todo-project-mini{grid-template-columns:1fr}.bsp-todo-workload-row{grid-template-columns:1fr}.bsp-todo-timeline-row{grid-template-columns:82px 18px 1fr}.bsp-todo-timeline-date{font-size:10px}.bsp-todo-bulk-bar{top:0}.bsp-plan-preview div{flex-direction:column}.bsp-todo-pm-actions{width:100%}.bsp-todo-pm-actions .bsp-btn{flex:1}} /* ============================================================================ v7.9.1 — Brand Wallet in-page token checkout upgrade Keeps users inside Brand Wallet while buying WooCommerce token packages. ============================================================================ */ .bsp-token-section-headline{ display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px; padding:16px;border:1px solid rgba(148,163,184,.22);border-radius:18px; background:linear-gradient(135deg,rgba(15,23,42,.92),rgba(30,41,59,.82)); box-shadow:0 18px 44px rgba(0,0,0,.22); } .bsp-token-section-headline .bsp-token-section-title{margin:0 0 6px} .bsp-token-section-help{margin:0;color:#a7b4c8;font-size:13px;line-height:1.55;max-width:760px} .bsp-token-package-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .bsp-wallet-pulse{animation:bspWalletPulse .85s ease-out 1} @keyframes bspWalletPulse{0%{box-shadow:0 0 0 0 rgba(123,92,240,.45)}100%{box-shadow:0 0 0 24px rgba(123,92,240,0)}} .bsp-token-pkg-card{position:relative;overflow:hidden;isolation:isolate} .bsp-token-pkg-card:before{content:"";position:absolute;inset:-1px;z-index:-1;background:radial-gradient(circle at top right,rgba(123,92,240,.22),transparent 38%),radial-gradient(circle at bottom left,rgba(16,185,129,.16),transparent 36%);opacity:.9} .bsp-pkg-capacity{display:grid;grid-template-columns:1fr;gap:5px;margin:12px 0;padding:10px;border-radius:12px;background:rgba(15,23,42,.5);border:1px solid rgba(148,163,184,.14);font-size:12px;color:#cbd5e1} .bsp-pkg-capacity span{display:flex;justify-content:space-between;gap:10px} .bsp-pkg-status{display:inline-flex;align-items:center;gap:6px;margin:2px 0 12px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;border:1px solid rgba(148,163,184,.18)} .bsp-pkg-status.is-ready{color:#86efac;background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.28)} .bsp-pkg-status.needs-sync{color:#fde68a;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.28)} .bsp-token-pkg-card .bsp-pkg-buy-btn,.bsp-token-pkg-card .bsp-pkg-preview-btn{width:100%;justify-content:center;margin-top:8px;position:relative;z-index:3;pointer-events:auto} .bsp-token-checkout-panel{margin-top:20px;border:1px solid rgba(123,92,240,.35);border-radius:22px;background:linear-gradient(145deg,rgba(8,13,28,.98),rgba(15,23,42,.96));box-shadow:0 26px 80px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.03) inset;overflow:hidden} .bsp-token-checkout-panel.is-open{display:block!important} .bsp-token-checkout-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:18px 20px;border-bottom:1px solid rgba(148,163,184,.18);background:linear-gradient(90deg,rgba(123,92,240,.18),rgba(16,185,129,.09),transparent)} .bsp-token-checkout-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#a78bfa;font-weight:900;margin-bottom:5px} .bsp-token-checkout-head h3{margin:0 0 4px;font-size:21px;color:#f8fafc} .bsp-token-checkout-head p{margin:0;color:#a7b4c8;font-size:13px;line-height:1.4} .bsp-token-checkout-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .bsp-token-checkout-summary{padding:14px 20px;border-bottom:1px solid rgba(148,163,184,.12)} .bsp-token-checkout-card{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:10px} .bsp-token-checkout-card>div{padding:12px;border:1px solid rgba(148,163,184,.15);border-radius:14px;background:rgba(15,23,42,.62)} .bsp-token-checkout-card strong{display:block;color:#fff;font-size:15px}.bsp-token-checkout-card small{display:block;color:#94a3b8;font-size:11px;margin-top:3px} .bsp-token-checkout-status{margin:14px 20px;padding:12px 14px;border-radius:13px;background:rgba(59,130,246,.11);border:1px solid rgba(59,130,246,.25);color:#bfdbfe;font-size:13px;font-weight:700} .bsp-token-checkout-status.is-success{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.25);color:#bbf7d0}.bsp-token-checkout-status.is-error{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:#fecaca} .bsp-token-checkout-frame-wrap{height:min(760px,78vh);margin:0 20px 20px;border:1px solid rgba(148,163,184,.2);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 16px 44px rgba(0,0,0,.35)} #bsp-token-checkout-frame{width:100%;height:100%;border:0;background:#fff} .bsp-token-checkout-fallback{padding:0 20px 20px;color:#94a3b8;font-size:12px;line-height:1.45} .bsp-link-button{border:0;background:transparent;color:#c4b5fd;font-weight:800;text-decoration:underline;cursor:pointer;padding:0 2px} @media (max-width: 860px){.bsp-token-section-headline,.bsp-token-checkout-head{flex-direction:column}.bsp-token-package-tools,.bsp-token-checkout-actions{width:100%;justify-content:flex-start}.bsp-token-checkout-card{grid-template-columns:1fr 1fr}.bsp-token-checkout-card>div:first-child{grid-column:1/-1}.bsp-token-checkout-frame-wrap{height:72vh;margin-left:12px;margin-right:12px}.bsp-token-checkout-summary{padding:12px}.bsp-token-checkout-status{margin:12px}.bsp-token-checkout-fallback{padding:0 12px 14px}} @media (max-width: 560px){.bsp-token-checkout-card{grid-template-columns:1fr}.bsp-token-pkg-card .bsp-btn{min-height:44px}.bsp-token-checkout-head{padding:15px}.bsp-token-section-headline{padding:14px}} /* v7.9.1 — Canvas button reliability/mobile overlay safety */ #bsp-view-canvas button, #bsp-view-canvas .bsp-btn, #bsp-view-canvas .bsp-canvas-mode-btn, #bsp-view-canvas .bsp-auto-menu-item, #bsp-canvas-float-rail button, #bsp-canvas-stage button, #bsp-canvas-media-panel button, #bsp-canvas-task-panel button { pointer-events: auto !important; touch-action: manipulation; -webkit-tap-highlight-color: rgba(255,255,255,.14); } #bsp-view-canvas .hidden, #bsp-view-canvas [hidden] { pointer-events: none !important; } #bsp-canvas-auto-menu:not(.hidden), #bsp-canvas-media-panel:not(.hidden), #bsp-canvas-task-panel:not(.hidden), #bsp-canvas-stage:not(.hidden), #bsp-canvas-sidebar:not(.is-collapsed) { pointer-events: auto !important; z-index: 60; } #bsp-canvas-auto-wrap { position: relative; z-index: 80; } #bsp-canvas-auto-menu { z-index: 90; } #bsp-canvas-float-rail { z-index: 70; pointer-events: auto !important; } @media (max-width: 782px) { #bsp-view-canvas .bsp-canvas-toolbar, #bsp-view-canvas .bsp-canvas-toolbar-left, #bsp-view-canvas .bsp-canvas-toolbar-right, #bsp-canvas-float-rail { gap: 6px; flex-wrap: wrap; } #bsp-view-canvas .bsp-btn-xs, #bsp-view-canvas .bsp-canvas-mode-btn { min-height: 36px; padding: 7px 10px; } #bsp-canvas-media-panel, #bsp-canvas-task-panel, #bsp-canvas-stage { max-width: calc(100vw - 24px); } } /* ═══════════════════════════════════════════════════════════════════════════════ v7.9.3 WooCommerce CRUD Command Center ═══════════════════════════════════════════════════════════════════════════════ */ #bsp-view-commerce { overflow: auto; } .bsp-commerce-header { align-items: flex-start; gap: 16px; } .bsp-commerce-subtitle { color: rgba(255,255,255,.62); margin: 6px 0 0; max-width: 920px; line-height: 1.55; } .bsp-commerce-header-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .bsp-commerce-shell { display:flex; flex-direction:column; gap:14px; padding-bottom:42px; } .bsp-commerce-alert { border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:12px 14px; background:rgba(255,255,255,.06); color:#fff; } .bsp-commerce-alert.warning { border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.12); } .bsp-commerce-alert.error { border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.12); } .bsp-commerce-kpis { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; } .bsp-commerce-kpi { border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:16px; background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); box-shadow:0 16px 40px rgba(0,0,0,.18); } .bsp-commerce-kpi span { display:block; color:rgba(255,255,255,.6); font-size:12px; text-transform:uppercase; letter-spacing:.06em; } .bsp-commerce-kpi strong { display:block; font-size:26px; margin:5px 0 2px; color:#fff; } .bsp-commerce-kpi small { color:rgba(255,255,255,.45); } .bsp-commerce-tabs { position:sticky; top:0; z-index:12; display:flex; gap:8px; overflow-x:auto; padding:10px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(8,9,26,.88); backdrop-filter: blur(18px); } .bsp-commerce-tab { white-space:nowrap; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.055); color:rgba(255,255,255,.72); border-radius:999px; padding:10px 14px; font-weight:800; cursor:pointer; } .bsp-commerce-tab.active, .bsp-commerce-tab:hover { background:linear-gradient(135deg,#1DB88C,#7B5CF0); color:#fff; border-color:transparent; } .bsp-commerce-panel { display:none; } .bsp-commerce-panel.active { display:block; animation:bspFadeUp .18s ease; } .bsp-commerce-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .bsp-commerce-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .bsp-commerce-split { display:grid; grid-template-columns:minmax(340px,.85fr) minmax(520px,1.25fr); gap:14px; align-items:start; } .bsp-commerce-card { border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:18px; background:rgba(255,255,255,.055); box-shadow:0 18px 44px rgba(0,0,0,.18); color:#fff; } .bsp-commerce-card h3 { margin:0 0 12px; font-size:17px; } .bsp-commerce-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; } .bsp-commerce-inline-tools { display:flex; gap:8px; flex-wrap:wrap; align-items:center; justify-content:flex-end; } .bsp-commerce-fast-actions { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; } .bsp-commerce-note { color:rgba(255,255,255,.58); line-height:1.5; font-size:13px; margin-top:10px; } .bsp-commerce-summary-row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08); } .bsp-commerce-summary-row span { color:rgba(255,255,255,.55); } .bsp-commerce-summary-row strong { color:#fff; text-align:right; } .bsp-commerce-mini-card, .bsp-commerce-pro-card, .bsp-commerce-list-card { text-align:left; border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:14px; background:rgba(255,255,255,.045); color:#fff; display:flex; flex-direction:column; gap:6px; } button.bsp-commerce-mini-card { cursor:pointer; width:100%; } button.bsp-commerce-mini-card:hover { transform:translateY(-1px); border-color:rgba(29,184,140,.45); background:rgba(29,184,140,.1); } .bsp-commerce-mini-card span, .bsp-commerce-pro-card span, .bsp-commerce-list-card span, .bsp-commerce-list-card small { color:rgba(255,255,255,.58); line-height:1.45; } .bsp-commerce-pro-card.is-on { border-color:rgba(29,184,140,.45); background:rgba(29,184,140,.1); } .bsp-commerce-pro-card.is-off { opacity:.82; } .bsp-commerce-form-card label { display:flex; flex-direction:column; gap:6px; color:rgba(255,255,255,.72); font-size:12px; font-weight:800; } .bsp-commerce-check-row { display:flex; gap:14px; flex-wrap:wrap; margin:12px 0; } .bsp-commerce-check-row label { flex-direction:row; align-items:center; color:rgba(255,255,255,.7); } .bsp-commerce-form-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; } .bsp-commerce-table-wrap { overflow:auto; max-height:680px; border-radius:14px; border:1px solid rgba(255,255,255,.08); } .bsp-commerce-table { width:100%; border-collapse:collapse; min-width:760px; } .bsp-commerce-table th, .bsp-commerce-table td { padding:11px 12px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:middle; } .bsp-commerce-table th { text-align:left; color:rgba(255,255,255,.55); font-size:11px; text-transform:uppercase; letter-spacing:.06em; background:rgba(255,255,255,.035); position:sticky; top:0; } .bsp-commerce-table td strong { display:block; color:#fff; } .bsp-commerce-table td small { display:block; color:rgba(255,255,255,.48); margin-top:3px; } .bsp-commerce-status { display:inline-flex; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.78); font-size:11px; font-weight:800; } .bsp-commerce-sale { color:#34d399; font-weight:900; } .bsp-commerce-sales-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; } .bsp-commerce-sales-metrics div { border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:12px; background:rgba(255,255,255,.04); } .bsp-commerce-sales-metrics span { display:block; color:rgba(255,255,255,.52); font-size:12px; } .bsp-commerce-sales-metrics strong { display:block; color:#fff; font-size:20px; margin-top:4px; } .bsp-commerce-daily-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .bsp-commerce-daily { border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px; background:rgba(255,255,255,.035); } .bsp-commerce-daily span, .bsp-commerce-daily small { display:block; color:rgba(255,255,255,.5); font-size:12px; } .bsp-commerce-daily strong { color:#fff; display:block; margin:3px 0; } .bsp-commerce-list-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .bsp-commerce-list-card.is-good { border-color:rgba(29,184,140,.38); background:rgba(29,184,140,.1); } .bsp-commerce-voice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .bsp-commerce-voice-cmd { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05); color:#fff; border-radius:14px; padding:12px; text-align:left; cursor:pointer; font-weight:800; } .bsp-commerce-voice-cmd:hover { border-color:rgba(123,92,240,.55); background:rgba(123,92,240,.16); } @media (max-width: 1180px) { .bsp-commerce-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .bsp-commerce-grid-2,.bsp-commerce-grid-3,.bsp-commerce-split { grid-template-columns:1fr; } .bsp-commerce-voice-grid,.bsp-commerce-list-cards,.bsp-commerce-daily-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 720px) { .bsp-commerce-header { flex-direction:column; } .bsp-commerce-header-actions { justify-content:flex-start; } .bsp-commerce-kpis,.bsp-commerce-voice-grid,.bsp-commerce-list-cards,.bsp-commerce-sales-metrics,.bsp-commerce-daily-grid { grid-template-columns:1fr; } .bsp-commerce-tabs { border-radius:14px; padding:8px; } .bsp-commerce-tab { padding:9px 11px; } .bsp-commerce-card { padding:14px; } .bsp-commerce-table { min-width:680px; } } /* v7.9.4 — Expanded Voice Control Command Center */ .bsp-voice-control-card { position:relative; overflow:hidden; } .bsp-voice-control-card:before { content:''; position:absolute; inset:-40% -20% auto auto; width:420px; height:420px; background:radial-gradient(circle, rgba(123,92,240,.18), transparent 65%); pointer-events:none; } .bsp-v794-voice-toolbar { display:grid; grid-template-columns:minmax(220px,1fr) 220px auto; gap:12px; align-items:end; margin:14px 0; } .bsp-v794-voice-search-wrap { display:flex; flex-direction:column; gap:6px; font-weight:800; color:rgba(255,255,255,.82); } .bsp-v794-voice-mode-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:10px 0 12px; } .bsp-v794-voice-mode-grid label { border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); border-radius:14px; padding:10px 12px; display:flex; gap:8px; align-items:center; font-weight:750; color:rgba(255,255,255,.86); } .bsp-v794-voice-quick { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 12px; } .bsp-v794-voice-chip { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#fff; border-radius:999px; padding:8px 12px; cursor:pointer; font-weight:900; } .bsp-v794-voice-chip.active, .bsp-v794-voice-chip:hover { background:rgba(123,92,240,.22); border-color:rgba(123,92,240,.6); } .bsp-v794-voice-status { border:1px solid rgba(20,184,166,.28); background:rgba(20,184,166,.08); color:#d7fffb; border-radius:16px; padding:10px 12px; margin:8px 0 14px; font-weight:800; } .bsp-v794-command-grid { align-items:stretch; } .bsp-v794-command-group { grid-column:1/-1; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); border-radius:18px; padding:12px; } .bsp-v794-command-group h4 { margin:0 0 10px; color:#fff; font-size:14px; letter-spacing:.02em; } .bsp-v794-command-buttons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .bsp-commerce-voice-cmd.bsp-v794-voice-command { display:flex; flex-direction:column; gap:5px; min-height:74px; } .bsp-commerce-voice-cmd.bsp-v794-voice-command strong { font-size:13px; line-height:1.2; } .bsp-commerce-voice-cmd.bsp-v794-voice-command small { color:rgba(255,255,255,.62); font-size:11px; line-height:1.25; } @media (max-width:1180px){ .bsp-v794-voice-toolbar{grid-template-columns:1fr 1fr;} .bsp-v794-voice-toolbar #bsp-v794-run-typed-command{grid-column:1/-1;} .bsp-v794-voice-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .bsp-v794-command-buttons{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:720px){ .bsp-v794-voice-toolbar,.bsp-v794-voice-mode-grid,.bsp-v794-command-buttons{grid-template-columns:1fr;} .bsp-v794-voice-chip{flex:1 1 auto;} } /* v7.9.5 — Brand Store rebrand + product/service command strip */ .bsp-brand-store-layer-strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0 18px; } .bsp-brand-store-layer-strip button{ appearance:none; border:1px solid rgba(255,255,255,.12); background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.025)); color:inherit; border-radius:18px; padding:14px; text-align:left; cursor:pointer; box-shadow:0 14px 35px rgba(0,0,0,.22); transition:transform .18s ease,border-color .18s ease,background .18s ease; } .bsp-brand-store-layer-strip button:hover{transform:translateY(-2px);border-color:rgba(125,255,156,.42);background:linear-gradient(135deg,rgba(125,255,156,.10),rgba(255,255,255,.035));} .bsp-brand-store-layer-strip strong{display:block;font-size:13px;margin-bottom:5px;letter-spacing:.01em;} .bsp-brand-store-layer-strip span{display:block;font-size:11px;line-height:1.45;opacity:.72;} #bsp-view-commerce .bsp-commerce-tab[data-commerce-tab="products"]::after{content:"Catalog";margin-left:6px;font-size:9px;opacity:.55;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:1px 5px;} #bsp-view-commerce .bsp-commerce-tab[data-commerce-tab="orders"]::after{content:"Desk";margin-left:6px;font-size:9px;opacity:.55;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:1px 5px;} #bsp-view-commerce .bsp-commerce-tab[data-commerce-tab="coupons"]::after{content:"Vault";margin-left:6px;font-size:9px;opacity:.55;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:1px 5px;} @media(max-width:980px){.bsp-brand-store-layer-strip{grid-template-columns:1fr 1fr}.bsp-brand-store-layer-strip button{padding:12px}} @media(max-width:640px){.bsp-brand-store-layer-strip{grid-template-columns:1fr}.bsp-view-header.bsp-commerce-header{gap:12px}.bsp-commerce-header-actions{display:grid;grid-template-columns:1fr;gap:8px;width:100%}} /* ═══════════════════════════════════════════════════════════════════════════════ v7.9.6 — Brand Blog / WordPress CRUD Command Center ═══════════════════════════════════════════════════════════════════════════════ */ #bsp-view-blog { overflow:auto; } .bsp-blog-header { align-items:flex-start; gap:18px; } .bsp-blog-header .bsp-view-subtitle { display:block; margin-top:4px; opacity:.78; font-size:13px; font-weight:600; } .bsp-blog-subtitle { max-width:1100px; margin:.35rem 0 0; color:var(--bsp-muted,#9ca3af); line-height:1.45; } .bsp-blog-header-actions, .bsp-blog-inline-tools, .bsp-blog-editor-actions, .bsp-blog-voice-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .bsp-blog-shell { display:flex; flex-direction:column; gap:14px; padding-bottom:40px; } .bsp-blog-alert { border:1px solid rgba(148,163,184,.35); border-radius:14px; padding:10px 12px; background:rgba(15,23,42,.92); color:#fff; } .bsp-blog-alert.success { border-color:rgba(34,197,94,.5); } .bsp-blog-alert.error { border-color:rgba(239,68,68,.5); } .bsp-blog-alert.warning { border-color:rgba(245,158,11,.55); } .bsp-blog-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; } .bsp-blog-kpi { background:linear-gradient(135deg,rgba(15,23,42,.95),rgba(30,41,59,.78)); border:1px solid rgba(148,163,184,.18); border-radius:18px; padding:14px; box-shadow:0 14px 40px rgba(0,0,0,.16); } .bsp-blog-kpi span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--bsp-muted,#94a3b8); } .bsp-blog-kpi strong { display:block; font-size:26px; margin:4px 0; color:#fff; } .bsp-blog-kpi small { color:var(--bsp-muted,#94a3b8); } .bsp-blog-tabs { display:flex; gap:8px; overflow:auto; padding:8px; border:1px solid rgba(148,163,184,.18); background:rgba(2,6,23,.55); border-radius:18px; position:sticky; top:0; z-index:7; backdrop-filter:blur(12px); } .bsp-blog-tab { border:1px solid rgba(148,163,184,.22); background:rgba(15,23,42,.72); color:#e5e7eb; border-radius:999px; padding:10px 13px; font-weight:800; white-space:nowrap; cursor:pointer; } .bsp-blog-tab.active { background:linear-gradient(135deg,#22c55e,#14b8a6); color:#04111d; border-color:transparent; box-shadow:0 10px 28px rgba(20,184,166,.26); } .bsp-blog-panel { display:none; } .bsp-blog-panel.active { display:block; } .bsp-blog-grid-2 { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; } .bsp-blog-card { background:rgba(15,23,42,.82); border:1px solid rgba(148,163,184,.2); border-radius:20px; padding:16px; color:#e5e7eb; box-shadow:0 18px 50px rgba(0,0,0,.18); } .bsp-blog-card h3 { margin-top:0; } .bsp-blog-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; } .bsp-blog-action-grid, .bsp-blog-helper-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .bsp-blog-action-grid button, .bsp-blog-helper-grid button, .bsp-blog-voice-cmd { text-align:left; border:1px solid rgba(148,163,184,.22); border-radius:16px; background:rgba(2,6,23,.4); color:#e5e7eb; padding:12px; cursor:pointer; transition:.18s ease; } .bsp-blog-action-grid button:hover, .bsp-blog-helper-grid button:hover, .bsp-blog-voice-cmd:hover { transform:translateY(-1px); border-color:rgba(34,197,94,.55); background:rgba(34,197,94,.09); } .bsp-blog-action-grid strong, .bsp-blog-voice-cmd strong { display:block; } .bsp-blog-action-grid span, .bsp-blog-voice-cmd small { display:block; color:var(--bsp-muted,#94a3b8); margin-top:5px; line-height:1.35; } .bsp-blog-table-wrap, .bsp-blog-list-cards { display:flex; flex-direction:column; gap:10px; } .bsp-blog-row, .bsp-blog-term-row, .bsp-blog-comment-row { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; border:1px solid rgba(148,163,184,.16); border-radius:16px; padding:12px; background:rgba(2,6,23,.38); } .bsp-blog-term-row, .bsp-blog-comment-row { grid-template-columns:minmax(0,1fr) auto; } .bsp-blog-row-main strong, .bsp-blog-term-row strong, .bsp-blog-comment-row strong { color:#fff; } .bsp-blog-row-main small, .bsp-blog-term-row small, .bsp-blog-comment-row small { display:block; color:var(--bsp-muted,#94a3b8); margin-top:3px; } .bsp-blog-row-main p, .bsp-blog-term-row p, .bsp-blog-comment-row p { margin:.45rem 0 0; color:#cbd5e1; font-size:13px; line-height:1.35; } .bsp-blog-row-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; } .bsp-blog-select { padding-top:4px; } .bsp-blog-status { display:inline-flex; border-radius:999px; padding:2px 7px; font-size:10px; text-transform:uppercase; letter-spacing:.06em; background:rgba(148,163,184,.18); color:#cbd5e1; } .bsp-blog-status.publish { background:rgba(34,197,94,.18); color:#86efac; } .bsp-blog-status.draft { background:rgba(251,191,36,.16); color:#fde68a; } .bsp-blog-status.future { background:rgba(59,130,246,.18); color:#bfdbfe; } .bsp-blog-status.trash { background:rgba(239,68,68,.16); color:#fecaca; } .bsp-blog-content-editor { min-height:360px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; line-height:1.45; } .bsp-blog-editor-grid { grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); } .bsp-blog-note { color:var(--bsp-muted,#94a3b8); font-size:13px; line-height:1.45; } .bsp-blog-summary-list { display:flex; flex-direction:column; gap:8px; color:#cbd5e1; } .bsp-blog-summary-list .ok { color:#86efac; } .bsp-blog-summary-list .warn { color:#fcd34d; } .bsp-blog-media-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .bsp-blog-media-card { border:1px solid rgba(148,163,184,.17); border-radius:16px; background:rgba(2,6,23,.38); padding:10px; display:flex; flex-direction:column; gap:7px; min-height:190px; } .bsp-blog-media-card img { width:100%; height:120px; object-fit:cover; border-radius:12px; background:#020617; } .bsp-blog-file-icon { height:120px; display:grid; place-items:center; border-radius:12px; background:rgba(148,163,184,.12); font-size:34px; } .bsp-blog-media-card strong { font-size:13px; color:#fff; } .bsp-blog-media-card small { color:var(--bsp-muted,#94a3b8); } .bsp-blog-voice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; } .bsp-blog-voice-modes { display:flex; gap:12px; flex-wrap:wrap; padding:10px; border:1px solid rgba(148,163,184,.15); border-radius:14px; background:rgba(2,6,23,.33); } .bsp-blog-voice-status { margin-top:10px; padding:10px 12px; border-radius:14px; background:rgba(34,197,94,.09); border:1px solid rgba(34,197,94,.18); color:#bbf7d0; } @media (max-width:1200px){ .bsp-blog-kpis{grid-template-columns:repeat(3,minmax(0,1fr));}.bsp-blog-media-grid{grid-template-columns:repeat(3,minmax(0,1fr));}.bsp-blog-voice-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.bsp-blog-editor-grid{grid-template-columns:1fr;} } @media (max-width:760px){ .bsp-blog-header{display:block}.bsp-blog-header-actions{margin-top:12px}.bsp-blog-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}.bsp-blog-grid-2,.bsp-blog-action-grid,.bsp-blog-helper-grid{grid-template-columns:1fr}.bsp-blog-row,.bsp-blog-term-row,.bsp-blog-comment-row{grid-template-columns:1fr}.bsp-blog-row-actions{justify-content:flex-start}.bsp-blog-media-grid,.bsp-blog-voice-grid{grid-template-columns:1fr}.bsp-blog-tabs{position:relative;top:auto}.bsp-blog-content-editor{min-height:280px;} } /* v7.9.7 — Realtime API Tool Calling Command Center */ #bsp-view-realtime { padding-bottom: 80px; } .bsp-realtime-header { align-items: flex-start; gap: 18px; } .bsp-realtime-subtitle { max-width: 920px; color: var(--bsp-muted, #9aa4b2); margin-top: 8px; line-height: 1.55; } .bsp-realtime-header-actions, .bsp-realtime-output-actions, .bsp-realtime-toolbar, .bsp-realtime-command-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; } .bsp-realtime-command-bar { margin:16px 0; padding:12px; border:1px solid rgba(120,130,255,.24); border-radius:16px; background:rgba(15,23,42,.55); } .bsp-realtime-command-bar .bsp-input { flex:1; min-width:280px; } .bsp-realtime-status-grid { display:grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap:12px; margin:16px 0; } .bsp-realtime-kpi { padding:16px; border:1px solid rgba(148,163,184,.18); border-radius:18px; background:linear-gradient(135deg, rgba(30,41,59,.82), rgba(15,23,42,.72)); box-shadow:0 18px 45px rgba(0,0,0,.18); } .bsp-realtime-kpi span { display:block; font-size:12px; color:#94a3b8; text-transform:uppercase; letter-spacing:.08em; } .bsp-realtime-kpi strong { display:block; font-size:26px; line-height:1.2; margin:6px 0; color:#fff; } .bsp-realtime-kpi small { color:#8ea0b8; } .bsp-realtime-tabs { display:flex; gap:8px; overflow:auto; padding:8px 0 12px; border-bottom:1px solid rgba(148,163,184,.16); margin-bottom:14px; } .bsp-realtime-tab { border:1px solid rgba(148,163,184,.22); background:rgba(15,23,42,.72); color:#dbeafe; padding:10px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; font-weight:700; } .bsp-realtime-tab.active { background:linear-gradient(135deg, rgba(59,130,246,.95), rgba(168,85,247,.9)); border-color:rgba(255,255,255,.25); color:#fff; box-shadow:0 10px 26px rgba(59,130,246,.25); } .bsp-realtime-panel { display:none; } .bsp-realtime-panel.active { display:block; } .bsp-realtime-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:12px; margin-top:14px; } .bsp-realtime-card { border:1px solid rgba(148,163,184,.18); border-radius:18px; padding:15px; background:rgba(15,23,42,.72); color:#dbeafe; position:relative; overflow:hidden; } .bsp-realtime-card:before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, #38bdf8, #a855f7, #22c55e); opacity:.8; } .bsp-realtime-card.wide { grid-column: 1 / -1; } .bsp-realtime-card h3 { margin:3px 0 8px; font-size:15px; color:#fff; } .bsp-realtime-card p { color:#a8b3c7; line-height:1.45; margin:0 0 10px; } .bsp-realtime-badges { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px; } .bsp-realtime-badge { font-size:11px; border:1px solid rgba(148,163,184,.24); color:#bfdbfe; border-radius:999px; padding:3px 7px; background:rgba(30,41,59,.7); } .bsp-realtime-card-actions { display:flex; flex-wrap:wrap; gap:7px; } .bsp-realtime-card-actions .bsp-btn { padding:6px 9px; font-size:12px; } .bsp-realtime-prompt-builder { display:grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap:10px; margin:12px 0; } .bsp-realtime-prompt-builder label { color:#cbd5e1; font-size:12px; font-weight:700; } .bsp-realtime-output { margin:10px 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .bsp-realtime-log { max-height:360px; overflow:auto; padding:12px; background:#020617; border:1px solid rgba(148,163,184,.16); border-radius:14px; color:#cbd5e1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; } .bsp-realtime-log div { padding:6px 0; border-bottom:1px dashed rgba(148,163,184,.12); } .bsp-realtime-recipe-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:12px; margin-top:12px; } .bsp-realtime-recipe { padding:14px; border-radius:16px; border:1px solid rgba(148,163,184,.18); background:rgba(30,41,59,.65); } .bsp-realtime-recipe strong { display:block; color:#fff; margin-bottom:6px; } .bsp-realtime-recipe code { display:block; white-space:pre-wrap; color:#bae6fd; font-size:12px; line-height:1.45; } @media (max-width: 900px) { .bsp-realtime-status-grid, .bsp-realtime-prompt-builder { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .bsp-realtime-status-grid, .bsp-realtime-prompt-builder { grid-template-columns: 1fr; } .bsp-realtime-header-actions .bsp-btn, .bsp-realtime-command-bar .bsp-btn { width:100%; justify-content:center; } .bsp-realtime-grid { grid-template-columns:1fr; } } /* ═══════════════════════════════════════════════════════════════════════════════ v7.9.8 — Brand Management HQ + Mobile Operator Features ═══════════════════════════════════════════════════════════════════════════════ */ #bsp-view-brand-hq { overflow:auto; padding-bottom:90px; } .bsp-brandhq-header { align-items:flex-start; gap:18px; } .bsp-brandhq-subtitle { margin:8px 0 0; max-width:980px; color:rgba(255,255,255,.64); line-height:1.55; } .bsp-brandhq-header-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .bsp-brandhq-shell { display:flex; flex-direction:column; gap:14px; } .bsp-brandhq-hero { display:flex; justify-content:space-between; gap:18px; align-items:stretch; border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:18px; background:radial-gradient(circle at 0 0,rgba(29,184,140,.22),transparent 36%),linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035)); box-shadow:0 24px 70px rgba(0,0,0,.24); color:#fff; } .bsp-brandhq-hero-main { display:flex; gap:16px; align-items:center; min-width:0; } .bsp-brandhq-avatar { width:74px; height:74px; border-radius:22px; display:grid; place-items:center; flex:0 0 auto; background:linear-gradient(135deg,#1DB88C,#7B5CF0); box-shadow:0 16px 36px rgba(0,0,0,.28); overflow:hidden; font-size:28px; font-weight:900; } .bsp-brandhq-avatar img { width:100%; height:100%; object-fit:cover; } .bsp-brandhq-hero h3 { margin:0 0 4px; font-size:28px; line-height:1.1; } .bsp-brandhq-hero p { margin:0; color:rgba(255,255,255,.68); line-height:1.45; } .bsp-brandhq-pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; } .bsp-brandhq-pills span { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); color:rgba(255,255,255,.86); border-radius:999px; padding:6px 9px; font-size:12px; font-weight:800; } .bsp-brandhq-score-card { min-width:190px; border-radius:20px; padding:16px; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.1); } .bsp-brandhq-score-card span { display:block; color:rgba(255,255,255,.62); text-transform:uppercase; letter-spacing:.07em; font-size:11px; font-weight:900; } .bsp-brandhq-score-card strong { display:block; font-size:42px; line-height:1; margin:8px 0 3px; } .bsp-brandhq-score-card small { color:rgba(255,255,255,.55); } .bsp-brandhq-tabs { position:sticky; top:0; z-index:18; display:flex; gap:8px; overflow-x:auto; padding:10px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(7,11,22,.9); backdrop-filter:blur(18px); } .bsp-brandhq-tab { white-space:nowrap; cursor:pointer; border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:10px 14px; color:rgba(255,255,255,.72); background:rgba(255,255,255,.055); font-weight:900; } .bsp-brandhq-tab.active,.bsp-brandhq-tab:hover { background:linear-gradient(135deg,#1DB88C,#7B5CF0); color:#fff; border-color:transparent; } .bsp-brandhq-panel { display:none; } .bsp-brandhq-panel.active { display:block; animation:bspFadeUp .2s ease; } .bsp-brandhq-kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; } .bsp-brandhq-kpi,.bsp-brandhq-card { border:1px solid rgba(255,255,255,.1); border-radius:20px; background:rgba(255,255,255,.055); box-shadow:0 18px 44px rgba(0,0,0,.18); color:#fff; } .bsp-brandhq-kpi { padding:15px; } .bsp-brandhq-kpi span { display:block; color:rgba(255,255,255,.58); font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:900; } .bsp-brandhq-kpi strong { display:block; font-size:26px; line-height:1.1; margin-top:6px; } .bsp-brandhq-kpi small { color:rgba(255,255,255,.48); } .bsp-brandhq-card { padding:18px; } .bsp-brandhq-card h3 { margin:0 0 12px; font-size:17px; } .bsp-brandhq-card p { color:rgba(255,255,255,.65); line-height:1.5; } .bsp-brandhq-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .bsp-brandhq-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .bsp-brandhq-data-list { display:grid; gap:8px; } .bsp-brandhq-data-list div,.bsp-brandhq-style-box div { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); } .bsp-brandhq-data-list b,.bsp-brandhq-style-box b { color:rgba(255,255,255,.58); font-size:12px; text-transform:uppercase; letter-spacing:.05em; } .bsp-brandhq-data-list span,.bsp-brandhq-style-box span { text-align:right; color:#fff; } .bsp-brandhq-style-box { display:grid; gap:8px; } .bsp-brandhq-color-row { display:flex !important; align-items:center; justify-content:flex-start !important; gap:8px !important; } .bsp-brandhq-color-swatch { width:22px; height:22px; border-radius:8px; border:1px solid rgba(255,255,255,.25); } .bsp-brandhq-action-list { display:grid; gap:8px; } .bsp-brandhq-action-list button,.bsp-brandhq-command-grid button { width:100%; text-align:left; border:1px solid rgba(255,255,255,.12); border-radius:16px; color:#fff; background:rgba(255,255,255,.06); padding:12px 13px; cursor:pointer; font-weight:800; } .bsp-brandhq-action-list button:hover,.bsp-brandhq-command-grid button:hover { background:rgba(29,184,140,.18); border-color:rgba(29,184,140,.35); } .bsp-brandhq-command-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .bsp-brandhq-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .bsp-brandhq-asset-card { min-height:135px; } .bsp-brandhq-asset-card strong { display:block; font-size:26px; margin:10px 0 4px; } .bsp-brandhq-asset-card small { color:rgba(255,255,255,.52); } .bsp-brandhq-channel-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .bsp-brandhq-channel { padding:12px; border-radius:16px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.055); display:flex; justify-content:space-between; gap:8px; } .bsp-brandhq-channel.is-ready { border-color:rgba(29,184,140,.32); background:rgba(29,184,140,.1); } .bsp-brandhq-checklist { display:grid; gap:9px; } .bsp-brandhq-check { display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border-radius:15px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.76); } .bsp-brandhq-check.is-good { border-color:rgba(29,184,140,.32); color:#fff; } .bsp-brandhq-check .bsp-brandhq-check-icon { width:22px; height:22px; border-radius:999px; display:grid; place-items:center; background:rgba(239,68,68,.18); color:#fecaca; flex:0 0 auto; font-size:12px; font-weight:900; } .bsp-brandhq-check.is-good .bsp-brandhq-check-icon { background:rgba(29,184,140,.2); color:#9ff5da; } .bsp-brandhq-voice-list { display:grid; gap:7px; max-height:360px; overflow:auto; } .bsp-brandhq-voice-list code { display:block; white-space:normal; border:1px solid rgba(255,255,255,.1); border-radius:13px; padding:10px; background:rgba(0,0,0,.18); color:#d7fff1; } .bsp-brandhq-result { margin-top:12px; border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:12px; min-height:44px; background:rgba(0,0,0,.2); color:rgba(255,255,255,.72); } .bsp-brandhq-mobile-dock { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:100120; display:none; gap:8px; padding:10px; border-radius:22px; background:rgba(6,9,18,.94); border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 50px rgba(0,0,0,.38); backdrop-filter:blur(18px); } .bsp-brandhq-mobile-dock.is-open { display:flex; } .bsp-brandhq-mobile-dock button { min-width:50px; min-height:46px; border:1px solid rgba(255,255,255,.1); border-radius:15px; color:#fff; background:rgba(255,255,255,.07); font-weight:900; cursor:pointer; } .bsp-brandhq-mobile-dock button:hover { background:linear-gradient(135deg,#1DB88C,#7B5CF0); } body.bsp-brandhq-compact .bsp-brand-card, body.bsp-brandhq-compact .bsp-dash-widget, body.bsp-brandhq-compact .bsp-brandhq-card { border-radius:16px !important; } body.bsp-brandhq-compact .bsp-brand-card .bsp-bc-desc, body.bsp-brandhq-compact .bsp-bc-personality { max-height:46px; overflow:hidden; } body.bsp-brandhq-mobile-mode .bsp-topbar { position:sticky; top:0; z-index:100000; backdrop-filter:blur(16px); } body.bsp-brandhq-mobile-mode #bsp-active-brand-name { max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width: 1100px) { .bsp-brandhq-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } .bsp-brandhq-grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width: 782px) { #bsp-view-brand-hq { padding:10px 10px 120px !important; } .bsp-brandhq-header { display:block; } .bsp-brandhq-header-actions { margin-top:12px; justify-content:flex-start; } .bsp-brandhq-header-actions > * { flex:1 1 45%; min-height:42px; } .bsp-brandhq-hero { display:block; padding:14px; border-radius:20px; } .bsp-brandhq-hero-main { align-items:flex-start; } .bsp-brandhq-avatar { width:58px; height:58px; border-radius:18px; } .bsp-brandhq-hero h3 { font-size:21px; } .bsp-brandhq-score-card { margin-top:12px; min-width:0; } .bsp-brandhq-tabs { margin-left:-4px; margin-right:-4px; border-radius:16px; padding:8px; } .bsp-brandhq-tab { padding:10px 12px; min-height:42px; } .bsp-brandhq-kpis,.bsp-brandhq-grid-2,.bsp-brandhq-grid-3,.bsp-brandhq-channel-grid,.bsp-brandhq-command-grid { grid-template-columns:1fr; } .bsp-brandhq-card { padding:14px; border-radius:17px; } .bsp-brandhq-mobile-dock { display:flex; width:calc(100vw - 18px); overflow-x:auto; bottom:76px; justify-content:flex-start; border-radius:18px; } .bsp-brandhq-mobile-dock button { flex:0 0 auto; min-width:58px; } body.bsp-brandhq-mobile-mode .bsp-view-header { gap:10px; } body.bsp-brandhq-mobile-mode .bsp-btn, body.bsp-brandhq-mobile-mode button { touch-action:manipulation; } body.bsp-brandhq-mobile-mode .bsp-modal { max-height:calc(100dvh - 22px); overflow:auto; } body.bsp-brandhq-mobile-mode .bsp-brands-toolbar { overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px; } body.bsp-brandhq-mobile-mode .bsp-brands-toolbar > * { flex:0 0 auto; } } /* ═══════════════════════════════════════════════════════════════════════════════ v7.10.0 — Brand Card Scroll Fix + Expanded Brand Cards ═══════════════════════════════════════════════════════════════════════════════ */ .bsp-dash-command-hero{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; margin:14px 18px 12px; padding:18px; border:1px solid rgba(124,92,255,.28); border-radius:22px; background: radial-gradient(circle at 12% 12%, rgba(124,92,255,.24), transparent 34%), radial-gradient(circle at 82% 18%, rgba(16,185,129,.14), transparent 30%), linear-gradient(135deg, rgba(15,23,42,.96), rgba(17,24,39,.86)); box-shadow:0 18px 60px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); position:relative; overflow:hidden; } .bsp-dash-command-hero:before{ content:""; position:absolute; inset:-2px; background:linear-gradient(115deg, transparent, rgba(255,255,255,.08), transparent); transform:translateX(-70%); animation:bspDashSweep 9s linear infinite; pointer-events:none; } @keyframes bspDashSweep{0%{transform:translateX(-75%)}55%,100%{transform:translateX(75%)}} .bsp-dash-hero-main,.bsp-dash-hero-actions{position:relative;z-index:1} .bsp-dash-hero-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#a78bfa;font-weight:800;margin-bottom:5px} .bsp-dash-command-hero h3{margin:0 0 6px;font-size:26px;line-height:1.05;color:#fff;letter-spacing:-.04em} .bsp-dash-command-hero p{margin:0;color:rgba(226,232,240,.76);font-size:13px;max-width:780px} .bsp-dash-hero-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px} .bsp-dash-mode-pill{ border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#e5e7eb; border-radius:999px; padding:7px 11px; font-size:11px; font-weight:800; cursor:pointer; } .bsp-dash-mode-pill.active{background:linear-gradient(135deg,#7c3aed,#2563eb);border-color:rgba(255,255,255,.28);box-shadow:0 8px 26px rgba(99,102,241,.28)} .bsp-dash-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:310px} .bsp-dash-mini-kpi-strip{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:0 18px 14px; } .bsp-dash-mini-kpi{ border:1px solid var(--bsp-border); border-radius:16px; padding:12px 14px; background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)); min-height:80px; position:relative; overflow:hidden; } .bsp-dash-mini-kpi:after{content:"";position:absolute;right:-18px;top:-18px;width:58px;height:58px;border-radius:50%;background:rgba(124,92,255,.11)} .bsp-dash-mini-kpi span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--bsp-muted);font-weight:800} .bsp-dash-mini-kpi strong{display:block;font-size:24px;color:var(--bsp-text);line-height:1.1;margin:5px 0 2px} .bsp-dash-mini-kpi small{display:block;color:var(--bsp-muted);font-size:11px} .bsp-dash-command-grid{display:grid;grid-template-columns:1.15fr .75fr 1.25fr 1.2fr;gap:12px;padding:14px} .bsp-dash-command-card{ border:1px solid var(--bsp-border); border-radius:16px; background:rgba(255,255,255,.035); padding:14px; min-height:142px; } .bsp-dash-command-label{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:var(--bsp-muted);font-weight:900;margin-bottom:8px} .bsp-dash-command-value{font-size:20px;font-weight:900;line-height:1.15;color:var(--bsp-text);letter-spacing:-.03em} .bsp-dash-command-note{font-size:12px;color:var(--bsp-muted);margin-top:8px;line-height:1.35} .bsp-dash-score-ring{ --dash-score:0%; width:92px;height:92px;border-radius:50%; display:flex;align-items:center;justify-content:center; margin:0 auto; background:conic-gradient(#6366f1 var(--dash-score),rgba(255,255,255,.09) 0); position:relative; } .bsp-dash-score-ring:before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--bsp-card,#111827);border:1px solid var(--bsp-border)} .bsp-dash-score-ring span{position:relative;z-index:1;font-size:20px;font-weight:950;color:#fff} .bsp-dash-score-ring.is-good{background:conic-gradient(#10b981 var(--dash-score),rgba(255,255,255,.09) 0)} .bsp-dash-score-ring.is-warn{background:conic-gradient(#f59e0b var(--dash-score),rgba(255,255,255,.09) 0)} .bsp-dash-score-ring.is-bad{background:conic-gradient(#ef4444 var(--dash-score),rgba(255,255,255,.09) 0)} .bsp-dash-recommendations{display:flex;flex-direction:column;gap:7px;max-height:150px;overflow:auto} .bsp-dash-rec-row{ display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:8px;align-items:center; width:100%;text-align:left;border:1px solid var(--bsp-border);border-radius:12px;background:var(--bsp-surface);color:var(--bsp-text);padding:8px;cursor:pointer; } .bsp-dash-rec-row:hover{border-color:rgba(124,92,255,.5);background:rgba(124,92,255,.08)} .bsp-dash-rec-row span{font-size:10px;color:var(--bsp-muted);font-weight:900} .bsp-dash-rec-row strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bsp-dash-rec-row em{font-style:normal;font-size:9px;text-transform:uppercase;color:#a78bfa;font-weight:900} .bsp-dash-command-runner{display:flex;gap:7px} .bsp-dash-command-runner .bsp-input{min-width:0;flex:1} .bsp-dash-command-result{font-size:11px;color:var(--bsp-muted);margin-top:8px;line-height:1.35} .bsp-dash-pulse-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:14px} .bsp-dash-pulse-card{ min-height:104px;text-align:left;border:1px solid var(--bsp-border);border-radius:15px;background:var(--bsp-surface);color:var(--bsp-text);padding:12px;display:flex;flex-direction:column;gap:4px;cursor:pointer;position:relative;overflow:hidden; } .bsp-dash-pulse-card:after{content:"";position:absolute;right:-16px;bottom:-18px;width:58px;height:58px;border-radius:50%;background:rgba(99,102,241,.10)} .bsp-dash-pulse-card:hover{border-color:rgba(99,102,241,.5);transform:translateY(-1px)} .bsp-dash-pulse-icon{font-size:18px} .bsp-dash-pulse-card strong{font-size:22px;line-height:1;font-weight:950;color:#fff} .bsp-dash-pulse-card span:not(.bsp-dash-pulse-icon){font-size:12px;font-weight:800;color:var(--bsp-text)} .bsp-dash-pulse-card small{font-size:10px;color:var(--bsp-muted);line-height:1.25} .bsp-dash-workstream-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px} .bsp-dash-workstream-grid button{ border:1px solid var(--bsp-border);border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));color:var(--bsp-text);padding:14px;text-align:left;cursor:pointer;min-height:94px; } .bsp-dash-workstream-grid button:hover{border-color:rgba(16,185,129,.48);background:rgba(16,185,129,.07);transform:translateY(-1px)} .bsp-dash-workstream-grid strong{display:block;font-size:14px;margin-bottom:5px} .bsp-dash-workstream-grid span{display:block;color:var(--bsp-muted);font-size:11px;line-height:1.35} [data-bsp-dash-mode="creative"] .bsp-dash-command-hero{border-color:rgba(236,72,153,.32);background:radial-gradient(circle at 12% 12%, rgba(236,72,153,.23), transparent 34%),linear-gradient(135deg,rgba(20,13,36,.96),rgba(17,24,39,.86))} [data-bsp-dash-mode="commerce"] .bsp-dash-command-hero{border-color:rgba(16,185,129,.32);background:radial-gradient(circle at 12% 12%, rgba(16,185,129,.2), transparent 34%),linear-gradient(135deg,rgba(5,28,24,.96),rgba(17,24,39,.86))} [data-bsp-dash-mode="content"] .bsp-dash-command-hero{border-color:rgba(59,130,246,.32);background:radial-gradient(circle at 12% 12%, rgba(59,130,246,.2), transparent 34%),linear-gradient(135deg,rgba(8,22,45,.96),rgba(17,24,39,.86))} [data-bsp-dash-mode="mobile"] .bsp-dash-command-hero{border-color:rgba(245,158,11,.35);background:radial-gradient(circle at 12% 12%, rgba(245,158,11,.19), transparent 34%),linear-gradient(135deg,rgba(38,22,6,.96),rgba(17,24,39,.86))} @media (max-width: 1280px){ .bsp-dash-command-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .bsp-dash-workstream-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width: 900px){ .bsp-dash-command-hero{grid-template-columns:1fr;margin:10px;padding:15px;border-radius:18px} .bsp-dash-hero-actions{grid-template-columns:1fr 1fr;min-width:0} .bsp-dash-mini-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 10px 12px} .bsp-dash-command-grid{grid-template-columns:1fr;padding:10px} .bsp-dash-pulse-grid{grid-template-columns:1fr 1fr;padding:10px} .bsp-dash-workstream-grid{grid-template-columns:1fr;padding:10px} .bsp-dash-command-hero h3{font-size:22px} } @media (max-width: 520px){ .bsp-dash-mini-kpi-strip{grid-template-columns:1fr 1fr;gap:8px} .bsp-dash-mini-kpi{padding:10px;min-height:72px} .bsp-dash-mini-kpi strong{font-size:20px} .bsp-dash-hero-actions{grid-template-columns:1fr} .bsp-dash-pulse-grid{grid-template-columns:1fr} .bsp-dash-command-runner{flex-direction:column} .bsp-dash-mode-pill{flex:1;text-align:center} } /* ══════════════════════════════════════════════════════════════════════════════ v7.10.0 — Brand Card Scroll Fix + Expanded Brand Cards ══════════════════════════════════════════════════════════════════════════════ */ #bsp-view-brands { min-height: 0 !important; height: auto; overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 140px !important; scroll-padding-bottom: 160px; overscroll-behavior: contain; } #bsp-view-brands .bsp-view-header, #bsp-view-brands .bsp-brands-stats-strip { flex: 0 0 auto; } #bsp-view-brands .bsp-brands-grid, #bsp-brands-grid { width: 100%; flex: 0 0 auto !important; min-height: min-content; padding-bottom: 160px; overflow: visible !important; align-items: start; } .bsp-brand-card.bsp-bc-v2 { display: flex; flex-direction: column; min-width: 0; max-height: none; overflow: hidden; contain: layout paint; } .bsp-brand-card.bsp-bc-v2 .bsp-bc-body { min-height: 0; max-height: clamp(360px, 52vh, 620px); overflow-y: auto !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 16px; } .bsp-brand-card.bsp-bc-v2.bsp-card-expanded .bsp-bc-body { max-height: none !important; overflow-y: visible !important; } .bsp-brand-card.bsp-bc-v2.bsp-card-expanded { grid-column: span 1; box-shadow: 0 22px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(134,239,172,.20); } .bsp-brand-card.bsp-bc-v2 .bsp-bc-body::-webkit-scrollbar { width: 7px; } .bsp-brand-card.bsp-bc-v2 .bsp-bc-body::-webkit-scrollbar-track { background: rgba(255,255,255,.035); border-radius: 999px; } .bsp-brand-card.bsp-bc-v2 .bsp-bc-body::-webkit-scrollbar-thumb { background: rgba(134,239,172,.35); border-radius: 999px; } .bsp-brand-card.bsp-bc-v2 .bsp-bc-body::-webkit-scrollbar-thumb:hover { background: rgba(134,239,172,.55); } .bsp-bc-readiness-row { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 10px; align-items: center; margin: 12px 0; padding: 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); } .bsp-bc-readiness-row.ready { border-color: rgba(34,197,94,.28); box-shadow: inset 0 0 0 1px rgba(34,197,94,.06); } .bsp-bc-readiness-row.building { border-color: rgba(250,204,21,.25); } .bsp-bc-readiness-row.setup { border-color: rgba(248,113,113,.22); } .bsp-bc-score-ring { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(circle at 50% 45%, rgba(134,239,172,.20), rgba(34,197,94,.05)); border: 1px solid rgba(134,239,172,.25); } .bsp-bc-score-ring strong { font: 800 16px/1 'DM Mono', monospace; color: var(--bsp-text); } .bsp-bc-score-ring span { font: 700 8px/1 'DM Mono', monospace; color: var(--bsp-muted); } .bsp-bc-readiness-title { font-size: 11px; font-weight: 800; letter-spacing: .35px; text-transform: uppercase; color: var(--bsp-text); } .bsp-bc-readiness-copy small { display:block; margin-top: 5px; font-size: 10px; color: var(--bsp-muted); line-height: 1.3; } .bsp-bc-readiness-bar { height: 6px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.07); } .bsp-bc-readiness-bar i { display:block; height:100%; border-radius:999px; background: linear-gradient(90deg, var(--bsp-accent), var(--bsp-accent2)); } .bsp-bc-ops-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; margin: 10px 0; } .bsp-bc-ops-grid span { min-width: 0; padding: 7px 8px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.04); font-size: 10px; font-weight: 700; color: rgba(233,255,241,.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-bc-missing-wrap { margin: 10px 0; padding: 9px 10px; border-radius: 12px; background: rgba(251,191,36,.055); border: 1px dashed rgba(251,191,36,.20); } .bsp-bc-missing-wrap.is-complete { background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.22); } .bsp-bc-mini-title { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: rgba(255,255,255,.55); margin-bottom: 6px; } .bsp-bc-missing-pills { display:flex; flex-wrap:wrap; gap: 5px; } .bsp-bc-missing-pills span { display:inline-flex; align-items:center; max-width: 100%; padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: 9px; color: rgba(255,255,255,.76); font-weight: 700; } .bsp-bc-info-line { margin: 8px 0; padding: 8px 9px; border-radius: 11px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); } .bsp-bc-info-line strong { display:block; margin-bottom: 3px; font-size: 9px; text-transform: uppercase; letter-spacing: .55px; color: var(--bsp-accent2); } .bsp-bc-info-line span { display:block; font-size: 10.5px; line-height: 1.45; color: rgba(233,255,241,.72); } .bsp-card-more-btn { font-weight: 800 !important; } @media (min-width: 1440px) { #bsp-brands-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } .bsp-brand-card.bsp-bc-v2.bsp-card-expanded { grid-column: span 2; } } @media (max-width: 780px) { #bsp-view-brands { height: calc(100dvh - 60px) !important; padding: 14px 14px 180px !important; } #bsp-view-brands .bsp-view-header { gap: 12px; align-items: stretch; } #bsp-view-brands .bsp-view-header, #bsp-view-brands .bsp-brands-toolbar { flex-direction: column; } #bsp-brands-grid { padding-bottom: 220px; } .bsp-brand-card.bsp-bc-v2 .bsp-bc-body { max-height: 56dvh; } .bsp-brand-card.bsp-bc-v2.bsp-card-expanded .bsp-bc-body { max-height: none !important; } .bsp-bc-ops-grid { grid-template-columns: 1fr 1fr; } .bsp-bc-actions-secondary .bsp-btn { min-width: calc(50% - 4px); } } /* ══════════════════════════════════════════════════════════════════════════════ v7.10.1 — Brand Cards Real Scroll + Deeper Card Data Fixes trapped card scrolling by making the full Brand Cards page scroll first. Compact internal card scrolling is now optional via the toolbar toggle. ══════════════════════════════════════════════════════════════════════════════ */ #bsp-view-brands.active { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: scroll !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: auto !important; scroll-behavior: smooth; padding-bottom: max(180px, calc(140px + env(safe-area-inset-bottom))) !important; } #bsp-view-brands .bsp-view-header, #bsp-view-brands .bsp-brands-stats-strip, #bsp-view-brands .bsp-brands-toolbar { position: relative; z-index: 2; flex: 0 0 auto !important; } #bsp-brands-grid.bsp-brands-grid { flex: 0 0 auto !important; min-height: auto !important; height: auto !important; overflow: visible !important; align-items: start !important; padding-bottom: max(240px, calc(190px + env(safe-area-inset-bottom))) !important; } .bsp-brand-card.bsp-bc-v2 { height: auto !important; max-height: none !important; overflow: visible !important; isolation: isolate; touch-action: pan-y; } .bsp-brand-card.bsp-bc-v2 .bsp-bc-body { max-height: none !important; height: auto !important; overflow: visible !important; overscroll-behavior-y: auto !important; touch-action: pan-y; } body.bsp-brand-card-compact-scroll .bsp-brand-card.bsp-bc-v2 { overflow: hidden !important; } body.bsp-brand-card-compact-scroll .bsp-brand-card.bsp-bc-v2 .bsp-bc-body { max-height: clamp(440px, 58vh, 720px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: auto !important; } #bsp-brand-card-scroll-mode-btn, #bsp-brand-card-expand-all-btn { white-space: nowrap; } .bsp-brand-card.bsp-bc-v2.bsp-card-expanded { overflow: visible !important; z-index: 1; } .bsp-bc-meta-row { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 10px; } .bsp-bc-meta-row span { display:inline-flex; align-items:center; min-height:22px; padding:3px 7px; border-radius:999px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.07); color:rgba(233,255,241,.66); font-size:9px; font-weight:800; letter-spacing:.25px; } .bsp-bc-data-vault { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:9px 0; } .bsp-bc-data-vault span { min-width:0; padding:8px 5px; border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.075); text-align:center; } .bsp-bc-data-vault strong { display:block; font-size:15px; line-height:1; color:#fff; font-family:'DM Mono',monospace; } .bsp-bc-data-vault small { display:block; margin-top:4px; color:rgba(255,255,255,.52); font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.45px; } .bsp-bc-lanes { margin:10px 0; padding:10px; border:1px solid rgba(255,255,255,.075); border-radius:14px; background:rgba(255,255,255,.032); } .bsp-bc-lane { display:grid; grid-template-columns:86px 38px 1fr; gap:8px; align-items:center; margin:7px 0; } .bsp-bc-lane span { font-size:10px; color:rgba(233,255,241,.78); font-weight:850; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bsp-bc-lane b { font-size:10px; color:#86efac; font-family:'DM Mono',monospace; text-align:right; } .bsp-bc-lane i { display:block; height:6px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; } .bsp-bc-lane i em { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--bsp-accent),var(--bsp-accent2)); } .bsp-bc-contact-deep, .bsp-bc-next-actions, .bsp-bc-prompt-chips { margin:9px 0; padding:10px; border:1px solid rgba(255,255,255,.07); border-radius:13px; background:rgba(255,255,255,.03); } .bsp-bc-contact-deep { display:flex; flex-wrap:wrap; gap:6px; } .bsp-bc-contact-deep .bsp-bc-mini-title, .bsp-bc-next-actions .bsp-bc-mini-title, .bsp-bc-prompt-chips .bsp-bc-mini-title { width:100%; } .bsp-bc-contact-deep span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:4px 7px; border-radius:999px; background:rgba(59,130,246,.09); border:1px solid rgba(59,130,246,.16); color:rgba(219,234,254,.86); font-size:9.5px; font-weight:750; } .bsp-bc-next-actions { display:flex; flex-direction:column; gap:5px; } .bsp-bc-next-actions span { display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:10px; background:rgba(251,191,36,.055); border:1px solid rgba(251,191,36,.11); color:rgba(255,251,235,.82); font-size:10px; font-weight:780; } .bsp-bc-next-actions b { display:inline-flex; width:17px; height:17px; align-items:center; justify-content:center; border-radius:50%; background:rgba(251,191,36,.14); color:#fde68a; font-size:9px; flex:0 0 auto; } .bsp-bc-prompt-chips { display:flex; flex-wrap:wrap; gap:6px; } .bsp-bc-prompt-chips button { border:1px solid rgba(134,239,172,.18); border-radius:999px; background:rgba(34,197,94,.075); color:rgba(220,252,231,.9); padding:5px 8px; font-size:9.5px; font-weight:850; cursor:pointer; touch-action:manipulation; } .bsp-bc-prompt-chips button:hover { background:rgba(34,197,94,.14); border-color:rgba(134,239,172,.34); } .bsp-bc-actions-secondary { flex-wrap:wrap !important; align-items:center; } .bsp-bc-actions-secondary .bsp-btn-xs { min-height:28px; } @media (max-width: 780px) { #bsp-view-brands.active { height: auto !important; max-height: none !important; padding: 12px 10px max(220px, calc(190px + env(safe-area-inset-bottom))) !important; } #bsp-view-brands .bsp-view-header { position: sticky; top: 0; background: linear-gradient(180deg, rgba(6,18,14,.98), rgba(6,18,14,.9)); backdrop-filter: blur(14px); padding: 8px 0; margin-bottom: 12px; } #bsp-view-brands .bsp-brands-toolbar { display:grid !important; grid-template-columns:1fr 1fr; width:100%; } #bsp-view-brands .bsp-brands-toolbar .bsp-search-input, #bsp-view-brands .bsp-brands-toolbar .bsp-sort-select { grid-column:span 2; width:100%; } #bsp-view-brands .bsp-brands-toolbar .bsp-btn { width:100%; min-height:40px; justify-content:center; } #bsp-brands-grid.bsp-brands-grid { grid-template-columns:1fr !important; gap:14px; padding-bottom: max(260px, calc(220px + env(safe-area-inset-bottom))) !important; } .bsp-bc-data-vault { grid-template-columns:repeat(2,minmax(0,1fr)); } .bsp-bc-lane { grid-template-columns:78px 34px 1fr; } .bsp-bc-actions-secondary .bsp-btn-xs { min-width:calc(50% - 5px); } } /* ══════════════════════════════════════════════════════════════════════════════ v7.10.2 — Hard Brand Cards scroll fix + bigger management card data ══════════════════════════════════════════════════════════════════════════════ */ #bsp-app #bsp-view-brands.active { display: block !important; flex: 1 1 0 !important; min-height: 0 !important; height: calc(100dvh - 60px) !important; max-height: calc(100dvh - 60px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; overscroll-behavior-y: contain !important; padding-bottom: max(260px, calc(220px + env(safe-area-inset-bottom))) !important; scrollbar-gutter: stable both-edges; } #bsp-app #bsp-view-brands.active .bsp-view-header, #bsp-app #bsp-view-brands.active .bsp-brands-stats-strip, #bsp-app #bsp-view-brands.active .bsp-brands-toolbar, #bsp-app #bsp-view-brands.active #bsp-brands-grid { flex: none !important; } #bsp-app #bsp-view-brands.active #bsp-brands-grid.bsp-brands-grid { display: grid !important; height: auto !important; min-height: max-content !important; max-height: none !important; overflow: visible !important; padding-bottom: max(340px, calc(300px + env(safe-area-inset-bottom))) !important; align-items: start !important; contain: none !important; } #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2, #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 .bsp-bc-body { height: auto !important; max-height: none !important; overflow: visible !important; overscroll-behavior-y: auto !important; touch-action: pan-y !important; contain: none !important; } #bsp-app body.bsp-brand-card-compact-scroll #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2, body.bsp-brand-card-compact-scroll #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 { overflow: hidden !important; } body.bsp-brand-card-compact-scroll #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 .bsp-bc-body { max-height: clamp(460px, 62dvh, 760px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } .bsp-bc-extra-shell { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 2px 0 4px; } .bsp-bc-deep-panel { border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018)); padding: 10px; } .bsp-bc-connection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .bsp-bc-connection-grid span { min-width: 0; display: grid; grid-template-columns: 18px minmax(0,1fr); grid-template-rows: auto auto; gap: 1px 6px; padding: 7px 8px; border-radius: 11px; border: 1px solid rgba(255,255,255,.075); background: rgba(255,255,255,.035); } .bsp-bc-connection-grid span b { grid-row: span 2; font-size: 12px; color: #86efac; } .bsp-bc-connection-grid span em { font-style: normal; font-size: 10px; font-weight: 850; color: rgba(233,255,241,.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-bc-connection-grid span small { font-size: 8.5px; color: rgba(233,255,241,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-bc-connection-grid span.is-missing b, .bsp-bc-governance-list span.is-missing b { color: rgba(251,191,36,.85); } .bsp-bc-channel-stack, .bsp-bc-governance-list { display: flex; gap: 5px; flex-wrap: wrap; } .bsp-bc-channel-stack span, .bsp-bc-governance-list span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 5px 7px; border-radius: 999px; border: 1px solid rgba(134,239,172,.13); background: rgba(34,197,94,.055); color: rgba(220,252,231,.88); font-size: 9.5px; font-weight: 800; } .bsp-bc-channel-stack span.is-missing, .bsp-bc-governance-list span.is-missing { background: rgba(251,191,36,.045); border-color: rgba(251,191,36,.12); color: rgba(254,243,199,.75); } .bsp-bc-offer-stack { display: grid; gap: 6px; } .bsp-bc-offer-stack span:not(.is-empty) { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(255,255,255,.032); } .bsp-bc-offer-stack b { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(134,239,172,.11); color: #86efac; font-size: 9px; } .bsp-bc-offer-stack em { min-width: 0; font-style: normal; font-size: 10.5px; font-weight: 850; color: rgba(233,255,241,.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bsp-bc-offer-stack small { color: rgba(233,255,241,.52); font-size: 9px; white-space: nowrap; } .bsp-bc-offer-stack .is-empty { display: block; padding: 9px; border-radius: 10px; background: rgba(251,191,36,.045); border: 1px dashed rgba(251,191,36,.16); color: rgba(254,243,199,.72); font-size: 10px; line-height: 1.4; } .bsp-bc-asset-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .bsp-bc-asset-stack span { min-width: 0; text-align: center; padding: 8px 5px; border-radius: 11px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.03); } .bsp-bc-asset-stack strong { display:block; font-size: 14px; color:#fff; font-family:'DM Mono', monospace; line-height:1; } .bsp-bc-asset-stack small { display:block; margin-top:4px; font-size:8px; text-transform:uppercase; letter-spacing:.35px; color:rgba(255,255,255,.52); } .bsp-bc-command-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; border-radius: 13px; background: rgba(134,239,172,.045); border: 1px solid rgba(134,239,172,.10); } .bsp-bc-command-strip button { border: 1px solid rgba(134,239,172,.18); background: rgba(34,197,94,.08); color: rgba(220,252,231,.9); border-radius: 999px; padding: 6px 9px; font-size: 9.5px; font-weight: 900; cursor: pointer; min-height: 28px; touch-action: manipulation; } .bsp-bc-command-strip button:hover { background: rgba(34,197,94,.16); } #bsp-brand-card-top-btn, #bsp-brand-card-bottom-btn { min-width: 74px; } @media (min-width: 1280px) { .bsp-brand-card.bsp-bc-v2.bsp-card-expanded .bsp-bc-extra-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bsp-brand-card.bsp-bc-v2.bsp-card-expanded .bsp-bc-extra-shell .bsp-bc-deep-panel:last-child { grid-column: 1 / -1; } } @media (max-width: 780px) { #bsp-app #bsp-view-brands.active { height: calc(100dvh - 60px) !important; max-height: calc(100dvh - 60px) !important; padding-left: 10px !important; padding-right: 10px !important; padding-bottom: max(340px, calc(300px + env(safe-area-inset-bottom))) !important; } #bsp-view-brands.active .bsp-view-header { top: 0; z-index: 30; } #bsp-brand-card-top-btn, #bsp-brand-card-bottom-btn { min-width: 0; } .bsp-bc-connection-grid { grid-template-columns: 1fr; } .bsp-bc-asset-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bsp-bc-command-strip button { flex: 1 1 calc(33.333% - 6px); } } /* ══════════════════════════════════════════════════════════════════════════════ v7.10.3 — Brand Cards scroll hard unlock + richer cards The scroll owner is #bsp-app .bsp-main while Brand Cards is active. This fixes installs where #bsp-view-brands was scrollable but trapped inside the fixed app. ══════════════════════════════════════════════════════════════════════════════ */ body.bsp-brand-cards-open, body.bsp-brand-cards-open html { overflow: hidden !important; overscroll-behavior: none !important; } body.bsp-brand-cards-open #bsp-app { overflow: hidden !important; touch-action: pan-y !important; } body.bsp-brand-cards-open #bsp-app .bsp-main { overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; touch-action: pan-y !important; min-height: 0 !important; scroll-behavior: smooth; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active { display: block !important; position: relative !important; height: auto !important; min-height: auto !important; max-height: none !important; overflow: visible !important; padding-bottom: max(420px, calc(360px + env(safe-area-inset-bottom))) !important; contain: none !important; touch-action: pan-y !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active #bsp-brands-grid.bsp-brands-grid { display: grid !important; height: auto !important; min-height: max-content !important; max-height: none !important; overflow: visible !important; contain: none !important; padding-bottom: max(500px, calc(430px + env(safe-area-inset-bottom))) !important; touch-action: pan-y !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 .bsp-bc-body { overflow: visible !important; height: auto !important; max-height: none !important; contain: none !important; touch-action: pan-y !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-view-header { position: sticky !important; top: 0 !important; z-index: 50 !important; padding-top: 10px !important; padding-bottom: 10px !important; background: linear-gradient(180deg, rgba(3,8,6,.98), rgba(3,8,6,.88)) !important; backdrop-filter: blur(16px) !important; } .bsp-brand-card-scroll-sentinel { grid-column: 1 / -1; display: block !important; min-height: 320px !important; height: 320px !important; pointer-events: none !important; } .bsp-bc-strategy-panel, .bsp-bc-revenue-panel, .bsp-bc-ops-panel { border-color: rgba(134,239,172,.12) !important; } .bsp-bc-strategy-line { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.055); } .bsp-bc-strategy-line:last-child { border-bottom: 0; } .bsp-bc-strategy-line strong { color: rgba(134,239,172,.86); font-size: 9px; text-transform: uppercase; letter-spacing: .5px; line-height: 1.35; } .bsp-bc-strategy-line span { color: rgba(233,255,241,.72); font-size: 10.5px; line-height: 1.42; } .bsp-bc-offer-headline { padding: 8px 9px; border-radius: 11px; background: rgba(34,197,94,.07); border: 1px solid rgba(134,239,172,.12); color: rgba(240,253,244,.9); font-size: 11px; line-height: 1.35; font-weight: 800; } .bsp-bc-money-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; } .bsp-bc-money-grid span { padding: 8px 5px; text-align: center; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); } .bsp-bc-money-grid strong { display:block; font-family:'DM Mono',monospace; color:#fff; font-size: 15px; line-height: 1; } .bsp-bc-money-grid small { display:block; margin-top:4px; color:rgba(255,255,255,.52); font-size:8px; text-transform:uppercase; letter-spacing:.35px; font-weight:900; } .bsp-bc-launch-checks { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:6px; } .bsp-bc-launch-checks span { display:flex; align-items:center; gap:6px; padding:7px 8px; border-radius:10px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.07); color:rgba(233,255,241,.74); font-size:10px; font-weight:800; } .bsp-bc-launch-checks span.is-ready { background:rgba(34,197,94,.07); border-color:rgba(34,197,94,.16); color:rgba(220,252,231,.9); } .bsp-bc-launch-checks span.is-missing { background:rgba(251,191,36,.045); border-color:rgba(251,191,36,.12); color:rgba(254,243,199,.8); } .bsp-bc-launch-checks b { flex:0 0 auto; color:#86efac; } @media (max-width: 768px) { body.bsp-brand-cards-open #bsp-app .bsp-main { position: absolute !important; inset: 0 0 68px 0 !important; height: auto !important; max-height: none !important; padding-bottom: 0 !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active { padding: 10px 10px max(470px, calc(410px + env(safe-area-inset-bottom))) !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-view-header { top: 0 !important; margin-left: -2px; margin-right: -2px; } .bsp-brand-card-scroll-sentinel { min-height: 420px !important; height: 420px !important; } .bsp-bc-strategy-line { grid-template-columns: 1fr; gap: 3px; } .bsp-bc-money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bsp-bc-launch-checks { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════════ v7.10.4 — Brand Cards TRUE scroll panel fix Problem: older patches alternated between scrolling .bsp-main and scrolling #bsp-view-brands. On some installs that leaves the page open but frozen. Final model: Brand Cards becomes its own absolute scroll panel under the topbar. ══════════════════════════════════════════════════════════════════════════════ */ html.bsp-brand-cards-open, body.bsp-brand-cards-open { height: 100% !important; overflow: hidden !important; overscroll-behavior: none !important; } body.bsp-brand-cards-open #bsp-app { height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; } body.bsp-brand-cards-open #bsp-app .bsp-main { position: relative !important; display: block !important; height: 100dvh !important; min-height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; touch-action: none !important; } body.bsp-brand-cards-open #bsp-app .bsp-topbar { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 60px !important; z-index: 250 !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active { position: absolute !important; top: 60px !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 40 !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow-y: scroll !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; touch-action: pan-y !important; contain: none !important; scrollbar-gutter: stable !important; padding: 22px 28px max(700px, calc(620px + env(safe-area-inset-bottom))) !important; scroll-behavior: smooth !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-view-header { position: sticky !important; top: 0 !important; z-index: 80 !important; margin: -22px -28px 18px !important; padding: 18px 28px 14px !important; background: linear-gradient(180deg, rgba(3,8,6,.99), rgba(3,8,6,.92)) !important; border-bottom: 1px solid rgba(134,239,172,.10) !important; backdrop-filter: blur(18px) !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brands-stats-strip, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brands-toolbar { position: relative !important; z-index: 12 !important; flex: none !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active #bsp-brands-grid.bsp-brands-grid { display: grid !important; width: 100% !important; height: auto !important; min-height: max-content !important; max-height: none !important; overflow: visible !important; contain: none !important; align-items: start !important; padding-bottom: max(760px, calc(680px + env(safe-area-inset-bottom))) !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 .bsp-bc-body, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-bc-body, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-bc-extra-shell { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; contain: none !important; touch-action: pan-y !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card { pointer-events: auto !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card-scroll-sentinel { grid-column: 1 / -1 !important; display: block !important; min-height: 720px !important; height: 720px !important; pointer-events: none !important; } body.bsp-brand-cards-open #bsp-brand-card-unlock-btn { display: inline-flex !important; } #bsp-brand-card-unlock-btn { display: none; white-space: nowrap; } .bsp-brand-scroll-status-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(134,239,172,.18); background: rgba(134,239,172,.07); color: rgba(233,255,241,.82); border-radius: 999px; padding: 7px 10px; font-size: 11px; font-weight: 700; letter-spacing: .2px; } .bsp-brand-scroll-status-pill b { color: #86efac; font-weight: 800; } @media (max-width: 768px) { body.bsp-brand-cards-open #bsp-app .bsp-main { position: relative !important; inset: auto !important; height: 100dvh !important; max-height: 100dvh !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active { top: 60px !important; padding: 12px 10px max(780px, calc(700px + env(safe-area-inset-bottom))) !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-view-header { margin: -12px -10px 12px !important; padding: 12px 10px !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active #bsp-brands-grid.bsp-brands-grid { grid-template-columns: 1fr !important; padding-bottom: max(860px, calc(780px + env(safe-area-inset-bottom))) !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card-scroll-sentinel { min-height: 860px !important; height: 860px !important; } } /* ═══════════════════════════════════════════════════════════════════════════ v7.10.5 — Fast scroll fix for Brand Cards + Brand Edit modal tabs ═══════════════════════════════════════════════════════════════════════════ */ html.bsp-brand-cards-open, body.bsp-brand-cards-open { height: auto !important; overflow: auto !important; overscroll-behavior: auto !important; } body.bsp-brand-cards-open #bsp-app { height: auto !important; min-height: 100dvh !important; max-height: none !important; overflow: visible !important; } body.bsp-brand-cards-open #bsp-app .bsp-main { position: relative !important; display: block !important; height: 100dvh !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; overscroll-behavior-y: contain !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; display: block !important; width: 100% !important; height: auto !important; min-height: max-content !important; max-height: none !important; overflow: visible !important; padding: 22px 28px max(720px, calc(640px + env(safe-area-inset-bottom))) !important; contain: none !important; touch-action: pan-y !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-view-header { position: sticky !important; top: 0 !important; z-index: 90 !important; margin: -22px -28px 18px !important; padding: 18px 28px 14px !important; background: linear-gradient(180deg, rgba(3,8,6,.99), rgba(3,8,6,.92)) !important; backdrop-filter: blur(16px) !important; border-bottom: 1px solid rgba(134,239,172,.12) !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active #bsp-brands-grid.bsp-brands-grid { display: grid !important; height: auto !important; min-height: max-content !important; max-height: none !important; overflow: visible !important; contain: none !important; padding-bottom: max(760px, calc(690px + env(safe-area-inset-bottom))) !important; touch-action: pan-y !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 .bsp-bc-body, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-bc-body, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-bc-extra-shell { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; contain: none !important; touch-action: pan-y !important; } body.bsp-brand-cards-open #bsp-brand-card-unlock-btn { display: inline-flex !important; } #bsp-brand-card-unlock-btn { white-space: nowrap; } .bsp-brand-scroll-status-pill-v7105 { border-color: rgba(96,165,250,.24) !important; background: rgba(96,165,250,.08) !important; color: rgba(219,234,254,.9) !important; } .bsp-brand-card-scroll-sentinel { grid-column: 1 / -1 !important; display: block !important; min-height: 680px !important; height: 680px !important; pointer-events: none !important; } /* Brand edit modal: the active tab pane is now the scroll container. */ #bsp-brand-modal:not(.hidden) { display: flex !important; align-items: stretch !important; justify-content: center !important; overflow: hidden !important; padding: 12px !important; } #bsp-brand-modal .bsp-modal-brand-edit { width: min(1180px, calc(100vw - 24px)) !important; max-width: 1180px !important; height: calc(100dvh - 24px) !important; max-height: calc(100dvh - 24px) !important; min-height: 0 !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; overflow: hidden !important; } #bsp-brand-modal .bsp-modal-header, #bsp-brand-modal .bsp-modal-footer { flex: 0 0 auto !important; position: relative !important; z-index: 20 !important; background: var(--bsp-surface) !important; } #bsp-brand-modal .bsp-brand-modal-body { padding: 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; overflow: hidden !important; } #bsp-brand-modal .bsp-brand-tab-nav, #bsp-brand-modal .bsp-tab-nav.bsp-brand-tab-nav { margin: 0 !important; padding: 10px 14px 8px !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; white-space: nowrap !important; background: var(--bsp-surface2) !important; border-bottom: 1px solid var(--bsp-border) !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-x !important; scrollbar-width: thin !important; } #bsp-brand-modal .bsp-brand-tab-nav .bsp-tab-btn { flex: 0 0 auto !important; min-height: 38px !important; border-radius: 999px !important; border: 1px solid transparent !important; margin: 0 !important; padding: 9px 13px !important; } #bsp-brand-modal .bsp-brand-tab-nav .bsp-tab-btn.active { border-color: rgba(134,239,172,.28) !important; background: rgba(134,239,172,.08) !important; } #bsp-brand-modal .bsp-tab-pane { display: none !important; } #bsp-brand-modal .bsp-tab-pane.active { display: block !important; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; touch-action: pan-y !important; overscroll-behavior-y: contain !important; padding: 18px 22px 150px !important; } #bsp-brand-modal .bsp-bm-grid { align-items: start !important; } #bsp-brand-modal-scroll-top, #bsp-brand-modal-scroll-bottom { display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; } body.bsp-brand-modal-open { overscroll-behavior: contain !important; } @media (max-width: 768px) { body.bsp-brand-cards-open #bsp-app .bsp-main { height: 100dvh !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active { padding: 12px 10px max(760px, calc(690px + env(safe-area-inset-bottom))) !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-view-header { margin: -12px -10px 12px !important; padding: 12px 10px !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active #bsp-brands-grid.bsp-brands-grid { grid-template-columns: 1fr !important; padding-bottom: max(820px, calc(760px + env(safe-area-inset-bottom))) !important; } .bsp-brand-card-scroll-sentinel { min-height: 780px !important; height: 780px !important; } #bsp-brand-modal:not(.hidden) { padding: 0 !important; align-items: stretch !important; } #bsp-brand-modal .bsp-modal-brand-edit { width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; } #bsp-brand-modal .bsp-modal-header { padding: 12px 12px 10px !important; gap: 8px !important; } #bsp-brand-modal .bsp-modal-header h3 { font-size: 14px !important; } #bsp-brand-modal .bsp-brand-tab-nav, #bsp-brand-modal .bsp-tab-nav.bsp-brand-tab-nav { padding: 8px 10px !important; gap: 6px !important; } #bsp-brand-modal .bsp-tab-pane.active { padding: 14px 12px 170px !important; } #bsp-brand-modal .bsp-bm-grid, #bsp-brand-modal .bsp-social-grid, #bsp-brand-modal .bsp-modal-grid { grid-template-columns: 1fr !important; } #bsp-brand-modal .bsp-span2 { grid-column: auto !important; } #bsp-brand-modal .bsp-modal-footer { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) !important; gap: 8px !important; flex-wrap: wrap !important; } } /* v7.10.7 — Integration Hub expanded providers + mapping lab */ #bsp-view-integrations { padding-bottom: 120px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .bsp-integrations-header { align-items: flex-start; gap: 16px; } .bsp-integrations-subtitle { max-width: 980px; margin: 6px 0 0; color: var(--bsp-muted, #64748b); line-height: 1.5; } .bsp-integrations-header-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } .bsp-integrations-kpi-grid { display:grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap:12px; margin:16px 0; } .bsp-integrations-kpi { background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.92)); border:1px solid rgba(148,163,184,.24); border-radius:18px; padding:16px; color:#fff; box-shadow:0 18px 45px rgba(15,23,42,.14); } .bsp-integrations-kpi span { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#cbd5e1; } .bsp-integrations-kpi strong { display:block; font-size:28px; margin:4px 0; } .bsp-integrations-kpi small { color:#94a3b8; } .bsp-integrations-control-bar { display:grid; grid-template-columns: 1.4fr 1fr 1fr .55fr auto auto; gap:10px; align-items:end; background:rgba(248,250,252,.94); border:1px solid rgba(148,163,184,.28); border-radius:18px; padding:14px; margin-bottom:14px; } .bsp-integrations-control-bar label { font-size:12px; font-weight:800; color:#334155; text-transform:uppercase; letter-spacing:.04em; } .bsp-integrations-tabs { display:flex; gap:8px; overflow-x:auto; padding:8px; border:1px solid rgba(148,163,184,.26); border-radius:18px; background:rgba(255,255,255,.92); margin-bottom:14px; position:sticky; top:0; z-index:12; } .bsp-integrations-tab { border:1px solid rgba(148,163,184,.26); background:#fff; color:#0f172a; border-radius:999px; padding:9px 13px; font-weight:800; white-space:nowrap; cursor:pointer; } .bsp-integrations-tab.active { background:#111827; color:#fff; border-color:#111827; box-shadow:0 10px 26px rgba(15,23,42,.18); } .bsp-integrations-panel { display:none; } .bsp-integrations-panel.active { display:block; } .bsp-integrations-provider-grid { display:grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap:12px; margin-bottom:14px; } .bsp-integrations-provider-card { text-align:left; border:1px solid rgba(148,163,184,.25); background:#fff; border-radius:20px; padding:16px; cursor:pointer; min-height:180px; display:flex; flex-direction:column; gap:9px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .bsp-integrations-provider-card:hover { transform:translateY(-2px); box-shadow:0 16px 38px rgba(15,23,42,.12); border-color:rgba(59,130,246,.35); } .bsp-integrations-provider-card.connected { border-color:rgba(34,197,94,.45); box-shadow:0 16px 36px rgba(34,197,94,.09); } .bsp-int-provider-icon { width:46px; height:46px; border-radius:16px; display:grid; place-items:center; background:color-mix(in srgb, var(--bsp-int-color, #38bdf8) 15%, white); font-size:24px; } .bsp-integrations-provider-card strong { font-size:18px; color:#0f172a; } .bsp-integrations-provider-card small { color:#64748b; line-height:1.4; } .bsp-integrations-provider-card em { margin-top:auto; font-style:normal; font-size:12px; font-weight:800; color:#0369a1; } .bsp-integrations-grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:14px; } .bsp-integrations-card { background:#fff; border:1px solid rgba(148,163,184,.25); border-radius:20px; padding:18px; box-shadow:0 14px 35px rgba(15,23,42,.06); } .bsp-integrations-card.wide { width:100%; } .bsp-integrations-card h3 { margin:0 0 8px; color:#0f172a; } .bsp-integrations-card p { color:#64748b; line-height:1.5; } .bsp-integrations-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .bsp-integrations-steps { margin:10px 0 0 18px; color:#334155; line-height:1.7; } .bsp-integrations-chip-grid, .bsp-int-supported { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; } .bsp-integrations-chip-grid span, .bsp-int-supported span { background:#f1f5f9; border:1px solid rgba(148,163,184,.22); border-radius:999px; padding:7px 10px; font-size:12px; color:#334155; } .bsp-int-form-grid { display:grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap:12px; margin:14px 0; } .bsp-int-form-grid label { font-size:12px; font-weight:800; color:#334155; text-transform:uppercase; letter-spacing:.04em; } .bsp-int-secret-saved { display:block; margin-top:4px; color:#16a34a; text-transform:none; letter-spacing:0; font-weight:700; } .bsp-int-form-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; } .bsp-int-provider-status { margin-top:10px; padding:10px 12px; border-radius:12px; background:#f8fafc; color:#475569; border:1px solid rgba(148,163,184,.24); } .bsp-integrations-record-list { display:grid; gap:10px; max-height: min(68vh, 820px); overflow:auto; -webkit-overflow-scrolling:touch; padding-right:4px; } .bsp-integrations-record { border:1px solid rgba(148,163,184,.24); border-radius:16px; padding:13px; background:#fff; display:grid; gap:8px; } .bsp-integrations-record strong { color:#0f172a; } .bsp-integrations-record small { display:block; color:#64748b; margin-top:3px; } .bsp-int-record-meta { display:flex; gap:8px; flex-wrap:wrap; } .bsp-int-record-meta span { background:#eff6ff; color:#1d4ed8; border-radius:999px; padding:5px 8px; font-size:12px; font-weight:700; } .bsp-integrations-record pre { white-space:pre-wrap; overflow:auto; max-height:300px; background:#0f172a; color:#e2e8f0; border-radius:12px; padding:12px; } .bsp-integrations-mapping-list { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; } .bsp-integrations-mapping-list div { background:#f8fafc; border:1px solid rgba(148,163,184,.22); border-radius:14px; padding:10px; } .bsp-integrations-mapping-list strong { display:block; color:#0f172a; } .bsp-integrations-mapping-list small { color:#64748b; } .bsp-integrations-voice-bar { display:grid; grid-template-columns:1fr auto auto; gap:10px; align-items:center; } .bsp-integrations-voice-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:14px; } .bsp-integrations-voice-cmd { text-align:left; border:1px solid rgba(148,163,184,.25); background:#f8fafc; border-radius:14px; padding:10px; cursor:pointer; font-weight:800; color:#334155; } .bsp-integrations-voice-cmd:hover { background:#eef2ff; border-color:#818cf8; } .bsp-integrations-log-wrap { margin-top:16px; background:#0f172a; color:#e2e8f0; border-radius:20px; padding:16px; } .bsp-integrations-log-wrap h3 { margin:0 0 10px; color:#fff; } .bsp-integrations-log { display:grid; gap:7px; max-height:180px; overflow:auto; font-size:12px; } .bsp-integrations-log strong { color:#93c5fd; } @media (max-width: 1100px) { .bsp-integrations-kpi-grid, .bsp-integrations-provider-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .bsp-integrations-control-bar { grid-template-columns: 1fr 1fr; } .bsp-integrations-grid-2 { grid-template-columns: 1fr; } .bsp-integrations-voice-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 720px) { #bsp-view-integrations { padding: 12px 10px 150px; } .bsp-integrations-header { display:block; } .bsp-integrations-header-actions { justify-content:flex-start; margin-top:10px; } .bsp-integrations-kpi-grid, .bsp-integrations-provider-grid, .bsp-int-form-grid, .bsp-integrations-mapping-list, .bsp-integrations-voice-grid { grid-template-columns: 1fr; } .bsp-integrations-control-bar { grid-template-columns: 1fr; position:relative; } .bsp-integrations-tabs { top:0; padding:6px; border-radius:14px; } .bsp-integrations-tab { padding:8px 10px; } .bsp-integrations-voice-bar { grid-template-columns:1fr; } } /* v7.10.7 — deeper Integration Hub + field mapping lab */ #bsp-view-integrations .bsp-integrations-tabs{overflow-x:auto;scrollbar-width:thin;gap:8px;align-items:center;padding-bottom:8px} #bsp-view-integrations .bsp-integrations-tab{white-space:nowrap;min-height:38px} .bsp-integrations-mapping-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 16px;padding:12px;border:1px solid rgba(148,163,184,.25);border-radius:18px;background:rgba(15,23,42,.04)} .bsp-int-mapping-lab .bsp-integrations-card{align-self:start} .bsp-integrations-mapping-list.enhanced{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;max-height:none;overflow:visible} .bsp-int-map-row{display:flex!important;flex-direction:column;gap:7px;padding:10px;border:1px solid rgba(148,163,184,.22);border-radius:14px;background:rgba(255,255,255,.04)} .bsp-int-map-row span{display:flex;align-items:center;justify-content:space-between;gap:8px} .bsp-int-map-row small{opacity:.68;font-size:11px} .bsp-int-source-chip{border:1px solid rgba(148,163,184,.28);background:rgba(255,255,255,.08);border-radius:999px;padding:7px 10px;cursor:pointer;font-size:12px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bsp-int-source-chip:hover{transform:translateY(-1px);border-color:rgba(124,58,237,.55)} #bsp-int-transform-preview pre,.bsp-integrations-record pre{max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word;border-radius:12px;padding:10px;background:rgba(15,23,42,.78);color:#e5e7eb} #bsp-view-integrations .bsp-integrations-provider-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} #bsp-view-integrations .bsp-integrations-provider-card small{min-height:54px} @media (max-width: 760px){ #bsp-view-integrations .bsp-section-header{position:relative;top:auto} .bsp-integrations-control-bar{grid-template-columns:1fr!important;align-items:stretch} .bsp-integrations-mapping-toolbar{position:sticky;top:0;z-index:12;background:rgba(248,250,252,.96);backdrop-filter:blur(12px)} .bsp-integrations-mapping-list.enhanced{grid-template-columns:1fr} .bsp-int-source-chip{width:100%;text-align:left} } /* ═══════════════════════════════════════════════════════════════════════════════ v7.10.9 — New User Onboarding + First Brand Walkthrough ═══════════════════════════════════════════════════════════════════════════════ */ #bsp-view-onboarding { overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:130px; } .bsp-onboarding-header { gap:18px; align-items:flex-start; flex-wrap:wrap; } .bsp-onboarding-header-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .bsp-onboarding-shell { display:flex; flex-direction:column; gap:22px; } .bsp-onboarding-hero { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr); gap:18px; align-items:stretch; } .bsp-onboarding-hero-copy, .bsp-onboarding-status-card, .bsp-onboarding-panel, .bsp-onboarding-step, .bsp-onboarding-module, .bsp-onboarding-window-item, .bsp-empty-state.bsp-onboarding-empty { background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(30,41,59,.92)); border:1px solid rgba(148,163,184,.24); border-radius:22px; box-shadow:0 20px 60px rgba(2,6,23,.25); } .bsp-onboarding-hero-copy { padding:28px; position:relative; overflow:hidden; } .bsp-onboarding-hero-copy:before { content:""; position:absolute; inset:-80px -40px auto auto; width:280px; height:280px; border-radius:999px; background:radial-gradient(circle,rgba(99,102,241,.35),transparent 65%); pointer-events:none; } .bsp-onboarding-kicker { display:inline-flex; padding:7px 10px; border-radius:999px; background:rgba(99,102,241,.18); color:#c7d2fe; border:1px solid rgba(129,140,248,.35); font-size:11px; font-weight:800; letter-spacing:.08em; } .bsp-onboarding-hero h3 { margin:14px 0 8px; font-size:30px; line-height:1.05; color:#fff; max-width:780px; } .bsp-onboarding-hero p { color:#cbd5e1; max-width:860px; font-size:14px; line-height:1.65; } .bsp-onboarding-progress-wrap { margin:22px 0 0; } .bsp-onboarding-progress-label { display:flex; justify-content:space-between; font-size:12px; color:#e2e8f0; margin-bottom:8px; gap:12px; } .bsp-onboarding-progress { height:11px; border-radius:999px; background:rgba(148,163,184,.15); overflow:hidden; border:1px solid rgba(148,163,184,.22); } .bsp-onboarding-progress span { display:block; height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#22c55e,#38bdf8,#818cf8); transition:width .35s ease; } .bsp-onboarding-hero-actions { margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; } .bsp-onboarding-status-card { padding:22px; } .bsp-onboarding-status-title { font-weight:900; color:#fff; margin-bottom:12px; } .bsp-onboarding-status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:14px; } .bsp-onboarding-status-grid div { background:rgba(15,23,42,.75); border:1px solid rgba(148,163,184,.22); border-radius:16px; padding:14px; } .bsp-onboarding-status-grid strong { display:block; color:#fff; font-size:19px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .bsp-onboarding-status-grid span { display:block; color:#94a3b8; font-size:11px; margin-top:5px; } .bsp-btn-block { width:100%; justify-content:center; } .bsp-onboarding-section-head { display:flex; justify-content:space-between; align-items:end; gap:16px; flex-wrap:wrap; margin-top:2px; } .bsp-onboarding-section-head h3 { margin:0; font-size:18px; } .bsp-onboarding-section-head span { color:var(--bsp-text-muted); font-size:13px; } .bsp-onboarding-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .bsp-onboarding-step { padding:16px; position:relative; min-height:190px; cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; } .bsp-onboarding-step:hover { transform:translateY(-2px); border-color:rgba(99,102,241,.55); box-shadow:0 22px 55px rgba(30,64,175,.22); } .bsp-onboarding-step.is-done { border-color:rgba(34,197,94,.6); } .bsp-onboarding-step-num { width:34px; height:34px; border-radius:13px; display:inline-grid; place-items:center; background:rgba(99,102,241,.22); color:#e0e7ff; font-weight:900; border:1px solid rgba(129,140,248,.35); } .bsp-onboarding-step.is-done .bsp-onboarding-step-num { background:rgba(34,197,94,.18); color:#bbf7d0; border-color:rgba(34,197,94,.4); } .bsp-onboarding-step h4 { margin:12px 0 8px; color:#fff; font-size:15px; } .bsp-onboarding-step p { margin:0; color:#cbd5e1; font-size:12.5px; line-height:1.5; } .bsp-onboarding-step-actions { margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; } .bsp-onboarding-step-actions button { font-size:11px; padding:7px 9px; border-radius:10px; } .bsp-onboarding-modules { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; } .bsp-onboarding-module { padding:18px; } .bsp-onboarding-module-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; } .bsp-onboarding-module-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:14px; background:rgba(56,189,248,.18); } .bsp-onboarding-module h4 { margin:0; color:#fff; font-size:15px; } .bsp-onboarding-module p { color:#cbd5e1; font-size:12.5px; line-height:1.55; min-height:56px; } .bsp-onboarding-module-list { display:flex; gap:7px; flex-wrap:wrap; margin:12px 0; } .bsp-onboarding-module-list span { font-size:11px; padding:5px 8px; border-radius:999px; background:rgba(148,163,184,.14); color:#cbd5e1; border:1px solid rgba(148,163,184,.18); } .bsp-onboarding-two-col { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; } .bsp-onboarding-panel { padding:18px; } .bsp-onboarding-panel-title { font-weight:900; color:#fff; margin-bottom:12px; } .bsp-onboarding-window-list { display:grid; gap:10px; } .bsp-onboarding-window-item { padding:13px; display:flex; justify-content:space-between; gap:10px; align-items:center; } .bsp-onboarding-window-main strong { display:block; color:#fff; font-size:13px; } .bsp-onboarding-window-main span { display:block; color:#94a3b8; font-size:12px; margin-top:3px; } .bsp-onboarding-panel-actions { display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; } #bsp-onboard-export-box { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; } .bsp-onboarding-empty { padding:26px !important; max-width:1040px; margin:10px auto 80px; width:100%; } .bsp-onboarding-empty-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; } .bsp-onboarding-empty-card { background:rgba(15,23,42,.74); border:1px solid rgba(148,163,184,.20); border-radius:18px; padding:15px; text-align:left; } .bsp-onboarding-empty-card strong { display:block; color:#fff; margin-bottom:6px; } .bsp-onboarding-empty-card span { display:block; color:#cbd5e1; font-size:12px; line-height:1.45; } .bsp-onboarding-empty-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; } .bsp-onboard-coach.hidden { display:none !important; } .bsp-onboard-coach { position:fixed; inset:0; z-index:100000; pointer-events:none; } .bsp-onboard-coach-dim { position:absolute; inset:0; background:rgba(2,6,23,.58); backdrop-filter:blur(2px); pointer-events:auto; } .bsp-onboard-coach-ring { position:absolute; border:3px solid #38bdf8; border-radius:18px; box-shadow:0 0 0 8px rgba(56,189,248,.18),0 0 45px rgba(56,189,248,.52); transition:all .22s ease; pointer-events:none; } .bsp-onboard-coach-card { position:absolute; width:min(390px,calc(100vw - 28px)); background:#0f172a; border:1px solid rgba(148,163,184,.28); box-shadow:0 25px 80px rgba(0,0,0,.48); border-radius:22px; padding:18px; color:#e2e8f0; pointer-events:auto; } .bsp-onboard-coach-top { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#93c5fd; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.08em; } .bsp-onboard-coach-close { border:0; background:rgba(148,163,184,.12); color:#e2e8f0; border-radius:999px; width:32px; height:32px; cursor:pointer; } .bsp-onboard-coach-card h3 { margin:12px 0 8px; color:#fff; font-size:20px; } .bsp-onboard-coach-card p { margin:0; color:#cbd5e1; line-height:1.55; font-size:13px; } .bsp-onboard-coach-actions { display:flex; justify-content:space-between; gap:10px; margin-top:16px; } .bsp-onboarding-pulse-target { animation:bspOnboardPulse 1.15s ease-in-out infinite alternate; } @keyframes bspOnboardPulse { from { box-shadow:0 0 0 0 rgba(56,189,248,.35); } to { box-shadow:0 0 0 10px rgba(56,189,248,0); } } .bsp-onboard-mobile-dock { position:fixed; left:10px; right:10px; bottom:10px; z-index:99980; display:none; gap:8px; background:rgba(15,23,42,.92); border:1px solid rgba(148,163,184,.24); border-radius:18px; padding:8px; box-shadow:0 16px 50px rgba(2,6,23,.4); overflow-x:auto; } .bsp-onboard-mobile-dock button { white-space:nowrap; } @media (max-width:1180px){ .bsp-onboarding-steps{grid-template-columns:repeat(2,minmax(0,1fr));}.bsp-onboarding-modules{grid-template-columns:repeat(2,minmax(0,1fr));}.bsp-onboarding-hero{grid-template-columns:1fr;} } @media (max-width:720px){ #bsp-view-onboarding{padding:16px 12px 120px!important;} .bsp-onboarding-header-actions{width:100%;justify-content:stretch}.bsp-onboarding-header-actions .bsp-btn{flex:1 1 140px}.bsp-onboarding-hero-copy{padding:20px}.bsp-onboarding-hero h3{font-size:24px}.bsp-onboarding-steps,.bsp-onboarding-modules,.bsp-onboarding-two-col,.bsp-onboarding-empty-grid{grid-template-columns:1fr}.bsp-onboarding-status-grid{grid-template-columns:1fr 1fr}.bsp-onboard-mobile-dock{display:flex}.bsp-onboard-coach-ring{display:none}.bsp-onboard-coach-card{left:14px!important;right:14px!important;bottom:82px!important;top:auto!important;width:auto;} } /* ═══════════════════════════════════════════════════════════════════════════════ v7.10.9 — Existing-brand onboarding + extension lab ═══════════════════════════════════════════════════════════════════════════════ */ .bsp-onboard-existing-status{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:12px 14px;border-radius:16px;background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(20,184,166,.14));border:1px solid rgba(96,165,250,.28);box-shadow:0 18px 44px rgba(15,23,42,.18)} .bsp-onboard-existing-status strong{color:#fff;font-weight:950;font-size:13px;text-transform:uppercase;letter-spacing:.04em}.bsp-onboard-existing-status span{color:#cbd5e1;font-size:12px;line-height:1.4;text-align:right} .bsp-onboarding-extension-lab{display:flex;flex-direction:column;gap:16px}.bsp-onboard-lab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}.bsp-onboard-lab-panel{background:rgba(15,23,42,.78);border:1px solid rgba(148,163,184,.20);border-radius:22px;padding:18px;box-shadow:0 24px 70px rgba(15,23,42,.28)} .bsp-onboard-muted{margin:0 0 14px;color:#94a3b8;font-size:12.5px;line-height:1.55}.bsp-feature-window-list{display:grid;gap:10px;max-height:720px;overflow:auto;padding-right:4px;-webkit-overflow-scrolling:touch}.bsp-feature-window-step{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px;border-radius:18px;border:1px solid rgba(148,163,184,.18);background:rgba(2,6,23,.48)} .bsp-feature-window-num{width:34px;height:34px;border-radius:13px;display:grid;place-items:center;background:rgba(99,102,241,.18);border:1px solid rgba(129,140,248,.32);color:#e0e7ff;font-weight:950}.bsp-feature-window-main strong{display:block;color:#fff;font-size:13px}.bsp-feature-window-main span{display:block;color:#94a3b8;font-size:12px;line-height:1.4;margin-top:3px}.bsp-feature-window-checks{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.bsp-feature-window-checks b{font-size:10.5px;font-weight:800;color:#bfdbfe;background:rgba(59,130,246,.12);border:1px solid rgba(96,165,250,.20);border-radius:999px;padding:4px 7px} .bsp-onboard-pack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bsp-onboard-pack-card{background:rgba(2,6,23,.48);border:1px solid rgba(148,163,184,.18);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:190px}.bsp-onboard-pack-top{display:flex;align-items:center;gap:10px}.bsp-onboard-pack-top span{width:34px;height:34px;border-radius:13px;display:grid;place-items:center;background:rgba(20,184,166,.15);border:1px solid rgba(45,212,191,.22)}.bsp-onboard-pack-top strong{color:#fff;font-size:13px}.bsp-onboard-pack-card p{margin:0;color:#cbd5e1;font-size:12px;line-height:1.5;flex:1}.bsp-onboard-pack-tags{display:flex;gap:6px;flex-wrap:wrap}.bsp-onboard-pack-tags em{font-style:normal;font-size:10.5px;color:#d8b4fe;background:rgba(147,51,234,.13);border:1px solid rgba(192,132,252,.20);border-radius:999px;padding:4px 7px}.bsp-onboard-pack-actions{display:flex;gap:8px;flex-wrap:wrap}.bsp-onboard-custom-builder{margin-top:14px;padding:14px;border-radius:18px;background:rgba(15,23,42,.76);border:1px dashed rgba(148,163,184,.28);display:grid;gap:9px}.bsp-onboard-custom-builder h4{margin:0;color:#fff;font-size:14px}.bsp-onboarding-resume-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(37,99,235,.12));border:1px solid rgba(251,191,36,.28);box-shadow:0 18px 50px rgba(15,23,42,.22)}.bsp-onboarding-resume-banner strong{display:block;color:#fff}.bsp-onboarding-resume-banner span{display:block;color:#cbd5e1;font-size:12px;margin-top:3px}.bsp-onboarding-resume-banner>div{min-width:0;flex:1}.bsp-onboarding-resume-banner .bsp-btn{white-space:nowrap} @media (max-width:1180px){.bsp-onboard-lab-grid{grid-template-columns:1fr}.bsp-onboard-pack-grid{grid-template-columns:1fr 1fr}} @media (max-width:720px){.bsp-onboard-existing-status,.bsp-onboarding-resume-banner{align-items:stretch;flex-direction:column}.bsp-onboard-existing-status span{text-align:left}.bsp-feature-window-step{grid-template-columns:34px minmax(0,1fr);align-items:start}.bsp-feature-window-step .bsp-btn{grid-column:1 / -1;width:100%}.bsp-onboard-pack-grid{grid-template-columns:1fr}.bsp-onboard-lab-panel{padding:14px;border-radius:18px}.bsp-feature-window-list{max-height:none;overflow:visible}.bsp-onboarding-resume-banner .bsp-btn{width:100%}} /* ═══════════════════════════════════════════════════════════════════════════════ v7.11.0 — Onboarding Pro Engine UI ═══════════════════════════════════════════════════════════════════════════════ */ .bsp-onboarding-pro-suite{margin:18px 0 120px;display:flex;flex-direction:column;gap:18px}.bsp-op-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:18px;border-radius:28px;padding:24px;background:radial-gradient(circle at 20% 10%,rgba(56,189,248,.28),transparent 34%),linear-gradient(135deg,rgba(15,23,42,.96),rgba(30,41,59,.82));border:1px solid rgba(125,211,252,.24);box-shadow:0 30px 90px rgba(2,6,23,.34)}.bsp-op-hero:after{content:"";position:absolute;right:-90px;top:-110px;width:260px;height:260px;border-radius:999px;background:rgba(99,102,241,.18);filter:blur(6px)}.bsp-op-hero>*{position:relative;z-index:1}.bsp-op-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;padding:6px 10px;border-radius:999px;background:rgba(45,212,191,.13);border:1px solid rgba(45,212,191,.22);color:#99f6e4;font-size:11px;font-weight:950;letter-spacing:.08em}.bsp-op-hero h3{margin:0 0 8px;color:#fff;font-size:26px;letter-spacing:-.04em;line-height:1.08}.bsp-op-hero p{margin:0;color:#cbd5e1;max-width:860px;line-height:1.55}.bsp-op-hero-score{min-width:190px;text-align:center;border-radius:24px;padding:18px;background:rgba(2,6,23,.46);border:1px solid rgba(148,163,184,.18)}.bsp-op-hero-score strong{display:block;color:#fff;font-size:42px;line-height:1}.bsp-op-hero-score span{display:block;color:#bfdbfe;font-size:12px;margin:8px 0 12px}.bsp-op-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:16px}.bsp-op-panel{border-radius:24px;padding:18px;background:rgba(15,23,42,.82);border:1px solid rgba(148,163,184,.20);box-shadow:0 24px 70px rgba(2,6,23,.22)}.bsp-op-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.bsp-op-panel-head h4,.bsp-op-section-head h4{margin:0;color:#fff;font-size:16px}.bsp-op-panel-head span,.bsp-op-section-head span{color:#94a3b8;font-size:12px}.bsp-op-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bsp-op-form-grid label{display:flex;flex-direction:column;gap:6px;color:#cbd5e1;font-size:12px;font-weight:800}.bsp-op-span2{grid-column:1/-1}.bsp-op-persona-preview{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:12px;border-radius:16px;background:rgba(2,6,23,.42);border:1px solid rgba(148,163,184,.16)}.bsp-op-persona-preview span{color:#94a3b8;font-size:12px}.bsp-op-persona-preview b{color:#fff}.bsp-onboard-mini-chip{border:1px solid rgba(96,165,250,.24);background:rgba(37,99,235,.13);color:#dbeafe;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:850;cursor:pointer;margin:2px}.bsp-op-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.bsp-op-kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.bsp-op-kpi-grid div{padding:12px;border-radius:16px;background:rgba(2,6,23,.45);border:1px solid rgba(148,163,184,.16);text-align:center}.bsp-op-kpi-grid strong{display:block;color:#fff;font-size:22px}.bsp-op-kpi-grid span{font-size:11px;color:#94a3b8}.bsp-op-step-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}.bsp-op-step-lanes button{display:flex;align-items:center;gap:7px;border:1px solid rgba(148,163,184,.18);background:rgba(2,6,23,.36);color:#cbd5e1;border-radius:14px;padding:9px 10px;text-transform:capitalize;font-size:12px;font-weight:850;cursor:pointer}.bsp-op-step-lanes button.done{background:rgba(34,197,94,.14);border-color:rgba(74,222,128,.30);color:#bbf7d0}.bsp-op-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:8px 0 -2px}.bsp-op-window-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.bsp-op-window-card,.bsp-op-module-card{border-radius:20px;padding:14px;background:rgba(15,23,42,.78);border:1px solid rgba(148,163,184,.18);box-shadow:0 18px 50px rgba(2,6,23,.18)}.bsp-op-window-head,.bsp-op-module-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}.bsp-op-window-head>span,.bsp-op-module-top>span{width:36px;height:36px;border-radius:14px;display:grid;place-items:center;background:rgba(14,165,233,.15);border:1px solid rgba(125,211,252,.20);font-size:17px}.bsp-op-window-head strong,.bsp-op-module-top strong{color:#fff;font-size:13px;line-height:1.2}.bsp-op-status{margin-left:auto;border-radius:999px;padding:4px 7px;font-size:10px;font-weight:950;border:1px solid rgba(148,163,184,.16)}.bsp-op-status.is-done{color:#bbf7d0;background:rgba(34,197,94,.15);border-color:rgba(74,222,128,.26)}.bsp-op-status.is-open{color:#fde68a;background:rgba(245,158,11,.12);border-color:rgba(251,191,36,.22)}.bsp-op-window-card p,.bsp-op-module-card p{margin:0;color:#94a3b8;font-size:12px;line-height:1.45}.bsp-op-window-actions,.bsp-op-module-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.bsp-op-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.bsp-op-module-card.is-built{border-color:rgba(74,222,128,.30);box-shadow:0 0 0 1px rgba(34,197,94,.1) inset}.bsp-op-module-top em{display:block;color:#94a3b8;font-size:11px;font-style:normal;margin-top:2px}.bsp-op-module-card ol{margin:12px 0 0;padding-left:18px;color:#cbd5e1;font-size:12px;line-height:1.55}.bsp-op-qa-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bsp-op-qa-list div{display:flex;align-items:center;gap:9px;border-radius:14px;padding:10px;background:rgba(2,6,23,.42);border:1px solid rgba(148,163,184,.14)}.bsp-op-qa-list span{width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:rgba(148,163,184,.12);color:#dbeafe}.bsp-op-qa-list strong{color:#e2e8f0;font-size:12px}.bsp-op-profile-panel .bsp-input,.bsp-op-profile-panel .bsp-select,.bsp-op-profile-panel .bsp-textarea{min-height:42px}@media(max-width:1240px){.bsp-op-grid{grid-template-columns:1fr}.bsp-op-window-grid,.bsp-op-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.bsp-onboarding-pro-suite{margin-bottom:150px}.bsp-op-hero{flex-direction:column;align-items:stretch;border-radius:22px;padding:18px}.bsp-op-hero h3{font-size:22px}.bsp-op-hero-score{width:100%}.bsp-op-form-grid,.bsp-op-window-grid,.bsp-op-module-grid,.bsp-op-qa-list{grid-template-columns:1fr}.bsp-op-kpi-grid,.bsp-op-step-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}.bsp-op-panel{padding:14px;border-radius:20px}.bsp-op-section-head{align-items:flex-start;flex-direction:column}.bsp-op-persona-preview{align-items:stretch;flex-direction:column}.bsp-op-actions .bsp-btn{flex:1 1 150px}} /* ══════════════════════════════════════════════════════════════════════════════ v7.11.1 — Compact Brand Cards, visible brand-list scrolling, brighter UI ══════════════════════════════════════════════════════════════════════════════ */ :root { --bsp-bg: #08150f; --bsp-surface: #10261b; --bsp-surface2: #153222; --bsp-surface3: #1b422c; --bsp-surface4: #24583a; --bsp-border: rgba(134,239,172,.18); --bsp-border2: rgba(134,239,172,.34); --bsp-text: #f3fff7; --bsp-muted: #a7d9b6; --bsp-dim: #6da982; --bsp-shadow: 0 12px 34px rgba(0,0,0,.32); } html, body, #bsp-app { background: var(--bsp-bg) !important; } #bsp-app { color: var(--bsp-text); } .bsp-sidebar, .bsp-topbar, .bsp-modal, .bsp-card, .bsp-panel { border-color: var(--bsp-border) !important; } .bsp-input, .bsp-select, .bsp-textarea { background: #173727 !important; border-color: rgba(167,243,208,.24) !important; color: #f4fff8 !important; } .bsp-input::placeholder, .bsp-textarea::placeholder { color: #8fc4a1 !important; } .bsp-btn-outline, .bsp-btn-ghost { background: rgba(255,255,255,.045); border-color: rgba(167,243,208,.22) !important; color: #eafff0 !important; } .bsp-btn-outline:hover, .bsp-btn-ghost:hover { background: rgba(134,239,172,.12) !important; } /* Left rail: navigation and brand list remain visible and scroll independently. */ #bsp-app .bsp-sidebar { height: 100dvh !important; overflow: hidden !important; background: linear-gradient(180deg, #10291c 0%, #0c2016 100%) !important; box-shadow: 14px 0 34px rgba(0,0,0,.16); } #bsp-app .bsp-sidebar-logo { flex: 0 0 auto; background: rgba(255,255,255,.025); } #bsp-app .bsp-sidebar-nav { flex: 0 1 43%; min-height: 180px; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(134,239,172,.65) rgba(255,255,255,.05); } #bsp-app .bsp-brand-list { flex: 1 1 280px !important; min-height: 180px !important; overflow: hidden !important; border-top: 1px solid rgba(134,239,172,.16); background: rgba(255,255,255,.025); } #bsp-app #bsp-brands-sidebar { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; overflow-x: hidden !important; padding: 2px 3px 18px 0; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: rgba(134,239,172,.78) rgba(255,255,255,.055); } #bsp-app .bsp-sidebar-footer { flex: 0 0 auto; max-height: 190px; overflow-y: auto; background: rgba(0,0,0,.12); } #bsp-app .bsp-sidebar-nav::-webkit-scrollbar, #bsp-app #bsp-brands-sidebar::-webkit-scrollbar, #bsp-app .bsp-sidebar-footer::-webkit-scrollbar { width: 10px; } #bsp-app .bsp-sidebar-nav::-webkit-scrollbar-track, #bsp-app #bsp-brands-sidebar::-webkit-scrollbar-track, #bsp-app .bsp-sidebar-footer::-webkit-scrollbar-track { background: rgba(255,255,255,.045); border-radius: 999px; } #bsp-app .bsp-sidebar-nav::-webkit-scrollbar-thumb, #bsp-app #bsp-brands-sidebar::-webkit-scrollbar-thumb, #bsp-app .bsp-sidebar-footer::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #86efac, #22c55e); border: 2px solid #10261b; border-radius: 999px; } #bsp-app .bsp-brand-sidebar-item { min-height: 42px; color: #dffbea; } #bsp-app .bsp-brand-sidebar-item:hover { background: rgba(134,239,172,.11); } #bsp-app .bsp-brand-sidebar-item.active { background: rgba(34,197,94,.19); border-color: rgba(134,239,172,.45); box-shadow: inset 4px 0 0 #86efac, 0 5px 14px rgba(0,0,0,.16); } #bsp-app .bsp-brand-list-header { color: #baf7cb; } #bsp-app .bsp-brand-list-search { background: #173727; border-color: rgba(134,239,172,.26); } /* Brands page: one obvious scroll panel; remove legacy giant spacers and traps. */ html.bsp-brand-cards-open, body.bsp-brand-cards-open { height: 100% !important; overflow: hidden !important; } body.bsp-brand-cards-open #bsp-app { height: 100dvh !important; overflow: hidden !important; } body.bsp-brand-cards-open #bsp-app .bsp-main { display: flex !important; flex-direction: column !important; height: 100dvh !important; min-height: 0 !important; max-height: 100dvh !important; overflow: hidden !important; touch-action: auto !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active { position: relative !important; inset: auto !important; flex: 1 1 auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-y: contain !important; touch-action: pan-y !important; contain: none !important; padding: 18px 22px 90px !important; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: rgba(134,239,172,.82) rgba(255,255,255,.05); } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active::-webkit-scrollbar { width: 12px; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active::-webkit-scrollbar-track { background: rgba(255,255,255,.045); } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #86efac, #22c55e); border: 3px solid #10261b; border-radius: 999px; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-view-header { position: sticky !important; top: 0 !important; z-index: 90 !important; margin: -18px -22px 14px !important; padding: 16px 22px 13px !important; background: linear-gradient(180deg, rgba(16,38,27,.99), rgba(16,38,27,.94)) !important; border-bottom: 1px solid rgba(134,239,172,.22) !important; backdrop-filter: blur(16px) !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active #bsp-brands-grid.bsp-brands-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important; gap: 14px !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding: 0 0 40px !important; contain: none !important; align-items: start !important; } .bsp-brand-card-scroll-sentinel { display: none !important; min-height: 0 !important; height: 0 !important; } #bsp-brand-card-unlock-btn, .bsp-brand-scroll-status-pill, #bsp-brand-card-scroll-mode-btn { display: none !important; } /* Compact cards: everything stays inside the card; More opens a contained detail scroller. */ body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; max-height: 610px !important; overflow: hidden !important; contain: layout paint !important; border-radius: 16px !important; border: 1px solid rgba(134,239,172,.22) !important; background: linear-gradient(180deg, #153322 0%, #10261b 100%) !important; box-shadow: 0 12px 30px rgba(0,0,0,.23) !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2:hover { transform: translateY(-2px); border-color: rgba(134,239,172,.52) !important; box-shadow: 0 18px 38px rgba(0,0,0,.30), 0 0 0 1px rgba(134,239,172,.10) !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 .bsp-bc-header { height: 92px !important; min-height: 92px !important; flex: 0 0 92px !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 .bsp-bc-logo-wrap { width: 44px !important; height: 44px !important; bottom: 9px !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 .bsp-bc-face { width: 38px !important; height: 38px !important; left: 64px !important; bottom: 10px !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 .bsp-bc-header-meta { left: 112px !important; bottom: 10px !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 .bsp-bc-color-codes { padding: 4px 10px !important; gap: 4px !important; background: rgba(0,0,0,.12) !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 .bsp-bc-body { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; max-height: 352px !important; overflow: hidden !important; padding: 10px 12px 12px !important; gap: 7px !important; contain: content !important; touch-action: pan-y !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2.bsp-card-expanded { max-height: min(86dvh, 920px) !important; grid-column: span 1 !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2.bsp-card-expanded .bsp-bc-body { max-height: min(66dvh, 690px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; scrollbar-gutter: stable; scrollbar-width: auto; scrollbar-color: rgba(134,239,172,.82) rgba(255,255,255,.05); } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2.bsp-card-expanded .bsp-bc-body::-webkit-scrollbar { width: 10px; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2.bsp-card-expanded .bsp-bc-body::-webkit-scrollbar-track { background: rgba(255,255,255,.045); border-radius:999px; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2.bsp-card-expanded .bsp-bc-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #86efac, #22c55e); border: 2px solid #153322; border-radius: 999px; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-bc-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.42; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-card-expanded .bsp-bc-desc { display: block; overflow: visible; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-bc-actions-primary, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-bc-actions-secondary { flex: 0 0 auto !important; padding: 7px 10px !important; gap: 5px !important; background: rgba(5,18,12,.96) !important; border-color: rgba(134,239,172,.15) !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-bc-actions-secondary .bsp-btn { min-height: 28px !important; padding: 5px 7px !important; font-size: 10px !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-card-more-btn { background: rgba(34,197,94,.19) !important; border-color: rgba(134,239,172,.44) !important; color: #eafff0 !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-bc-deep-panel, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-bc-info-line, body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-bc-readiness-row { background: rgba(255,255,255,.045) !important; border-color: rgba(167,243,208,.14) !important; } @media (max-width: 900px) { #bsp-app .bsp-sidebar-nav { flex-basis: 38%; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active { padding: 12px 10px 90px !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-view-header { margin: -12px -10px 12px !important; padding: 12px 10px !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active #bsp-brands-grid.bsp-brands-grid { grid-template-columns: 1fr !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 { max-height: 590px !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-bc-v2 .bsp-bc-body { max-height: 336px !important; } } @media (max-width: 768px) { #bsp-app .bsp-sidebar { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; height: 68px !important; min-height: 68px !important; display: block !important; overflow: hidden !important; border-right: 0 !important; border-top: 1px solid var(--bsp-border2) !important; padding: 0 !important; } #bsp-app .bsp-sidebar-logo, #bsp-app .bsp-brand-list, #bsp-app .bsp-sidebar-footer, #bsp-app .bsp-nav-history-row, #bsp-app .bsp-nav-quickjump, #bsp-app .bsp-nav-group-label { display: none !important; } #bsp-app .bsp-sidebar-nav { height: 68px !important; min-height: 68px !important; padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; } #bsp-app .bsp-sidebar-nav::-webkit-scrollbar { display: none !important; } body.bsp-brand-cards-open #bsp-app .bsp-main { position: absolute !important; inset: 0 0 68px 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ v7.11.2 — Summary-only brand cards, complete editor overview, node arrows ═══════════════════════════════════════════════════════════════════════════════ */ body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active #bsp-brands-grid.bsp-brands-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; align-items: stretch !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-brand-summary-card { display:flex !important; flex-direction:column !important; height:auto !important; min-height:0 !important; max-height:none !important; overflow:hidden !important; contain:layout paint !important; background:linear-gradient(180deg,#173a28 0%,#10281c 100%) !important; border:1px solid rgba(134,239,172,.28) !important; border-radius:18px !important; } .bsp-brand-summary-hero{position:relative;min-height:108px;padding:16px;display:flex;align-items:flex-end;gap:12px;overflow:hidden;color:#fff} .bsp-brand-summary-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,12,8,.06),rgba(3,12,8,.64));pointer-events:none} .bsp-brand-summary-logo{position:relative;z-index:1;width:54px;height:54px;flex:0 0 54px;border-radius:15px;display:grid;place-items:center;overflow:hidden;background:rgba(255,255,255,.94);border:2px solid rgba(255,255,255,.72);box-shadow:0 10px 28px rgba(0,0,0,.3);color:#123524;font-weight:950;font-size:22px} .bsp-brand-summary-logo img{width:100%;height:100%;object-fit:cover} .bsp-brand-summary-title{position:relative;z-index:1;min-width:0;flex:1}.bsp-brand-summary-title h3{margin:0;color:#fff;font-size:18px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bsp-brand-summary-title p{margin:5px 0 0;color:rgba(255,255,255,.88);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bsp-brand-summary-status{position:absolute;z-index:2;top:12px;right:12px;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.02em;background:rgba(4,18,11,.78);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)} .bsp-brand-summary-status.readiness-high{color:#bbf7d0}.bsp-brand-summary-status.readiness-mid{color:#fde68a}.bsp-brand-summary-status.readiness-low{color:#fecaca} .bsp-brand-summary-colors{display:grid;grid-template-columns:repeat(3,1fr);height:7px}.bsp-brand-summary-colors span{display:block} body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-summary-card .bsp-brand-summary-body{display:flex!important;flex-direction:column!important;gap:10px!important;flex:1 1 auto!important;min-height:0!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:13px 14px!important;contain:none!important} .bsp-brand-summary-meta{display:flex;gap:6px;flex-wrap:wrap}.bsp-brand-summary-meta span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(167,243,208,.14);font-size:10px;color:#d1fae5} .bsp-brand-summary-description{margin:0;color:#d7eee0;font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px} .bsp-brand-summary-progress{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px}.bsp-brand-summary-progress>div:first-child{display:flex;align-items:baseline;gap:5px}.bsp-brand-summary-progress strong{font-size:15px;color:#fff}.bsp-brand-summary-progress span{font-size:10px;color:#9fd5ae}.bsp-brand-summary-progress-track{height:7px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(167,243,208,.12)}.bsp-brand-summary-progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22c55e,#86efac)} .bsp-brand-summary-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.bsp-brand-summary-metrics div{padding:8px 5px;text-align:center;border-radius:11px;background:rgba(255,255,255,.045);border:1px solid rgba(167,243,208,.12)}.bsp-brand-summary-metrics strong{display:block;color:#fff;font-size:14px}.bsp-brand-summary-metrics span{display:block;margin-top:2px;color:#91c7a0;font-size:9px;text-transform:uppercase;letter-spacing:.045em} .bsp-brand-summary-footnote{display:flex;justify-content:space-between;gap:8px;color:#a8d8b5;font-size:10px}.bsp-brand-summary-footnote span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bsp-brand-summary-actions,.bsp-brand-summary-actions-secondary{display:flex;gap:6px;padding:9px 11px;background:rgba(4,17,10,.9);border-top:1px solid rgba(134,239,172,.13)}.bsp-brand-summary-actions .bsp-btn{flex:1 1 auto;justify-content:center;min-width:0}.bsp-brand-summary-actions .bsp-edit-all-brand-btn{flex:1.5 1 auto}.bsp-brand-summary-actions-secondary{padding-top:7px;padding-bottom:8px;justify-content:flex-end;flex-wrap:wrap}.bsp-brand-summary-actions-secondary .bsp-btn{font-size:9.5px;padding:4px 7px;min-height:26px} #bsp-brand-card-expand-all-btn,#bsp-brand-card-top-btn,#bsp-brand-card-bottom-btn,#bsp-brand-card-scroll-mode-btn{display:none!important} /* Editor overview: every piece of card information now lives inside Edit Brand. */ .bsp-brand-editor-overview{display:flex;flex-direction:column;gap:14px;padding-bottom:20px} .bsp-editor-overview-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px;border-radius:20px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-secondary));color:#fff;box-shadow:0 18px 42px rgba(0,0,0,.24)} .bsp-editor-overview-logo{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;overflow:hidden;background:#fff;color:#123524;font-size:25px;font-weight:950;border:2px solid rgba(255,255,255,.7)}.bsp-editor-overview-logo img{width:100%;height:100%;object-fit:cover} .bsp-editor-overview-heading{min-width:0}.bsp-editor-overview-heading>span{display:block;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.75)}.bsp-editor-overview-heading h3{margin:4px 0 3px;color:#fff;font-size:22px}.bsp-editor-overview-heading p{margin:0;color:rgba(255,255,255,.88);font-size:12px}.bsp-editor-overview-heading em{color:rgba(255,255,255,.72)} .bsp-editor-overview-score{text-align:right}.bsp-editor-overview-score strong{display:block;font-size:28px;color:#fff}.bsp-editor-overview-score span{display:block;font-size:10px;color:rgba(255,255,255,.8)} .bsp-editor-overview-progress{height:9px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(167,243,208,.16)}.bsp-editor-overview-progress i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#86efac);border-radius:inherit} .bsp-editor-overview-notice{padding:11px 13px;border-radius:13px;background:rgba(34,197,94,.10);border:1px solid rgba(134,239,172,.22);color:#d9fbe3;font-size:12px;line-height:1.45} .bsp-editor-overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bsp-editor-overview-section{min-width:0;padding:14px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(167,243,208,.13)}.bsp-editor-overview-section header{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.bsp-editor-overview-section header strong{color:#f0fff4;font-size:13px}.bsp-editor-overview-section header button{border:1px solid rgba(134,239,172,.28);background:rgba(34,197,94,.12);color:#d9fbe3;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:800;cursor:pointer}.bsp-editor-overview-section header button:hover{background:rgba(34,197,94,.24)} .bsp-editor-overview-section dl{margin:0;display:grid;gap:7px}.bsp-editor-overview-section dl>div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:9px;align-items:start}.bsp-editor-overview-section dt{color:#8fc79e;font-size:10px;text-transform:uppercase;letter-spacing:.04em}.bsp-editor-overview-section dd{margin:0;color:#e5f8eb;font-size:11px;line-height:1.4;overflow-wrap:anywhere}.bsp-editor-overview-section em{color:#789f84}.bsp-editor-overview-section>p{margin:0;color:#cfe9d6;font-size:11.5px;line-height:1.5} .bsp-editor-overview-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:11px}.bsp-editor-overview-swatches span{min-height:44px;padding:7px;border-radius:10px;display:flex;align-items:flex-end;color:#fff;font-size:9px;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.85);overflow:hidden} .bsp-editor-overview-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.bsp-editor-overview-kpis span{padding:9px 5px;text-align:center;border-radius:11px;background:rgba(0,0,0,.15);color:#9fd5ae;font-size:9px}.bsp-editor-overview-kpis b{display:block;color:#fff;font-size:16px;margin-bottom:2px}.bsp-editor-overview-connection-list{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.bsp-editor-overview-connection-list span{padding:5px 8px;border-radius:999px;background:rgba(34,197,94,.12);border:1px solid rgba(134,239,172,.2);color:#bbf7d0;font-size:10px} .bsp-editor-overview-checklist{display:flex;gap:7px;flex-wrap:wrap}.bsp-editor-overview-checklist span{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;font-size:10px;border:1px solid}.bsp-editor-overview-checklist .is-done{color:#bbf7d0;background:rgba(34,197,94,.1);border-color:rgba(134,239,172,.22)}.bsp-editor-overview-checklist .is-open{color:#fde68a;background:rgba(245,158,11,.08);border-color:rgba(253,230,138,.18)} /* Prominent, fixed left/right node navigation on Brand GPT. */ .bsp-canvas-node-navigator{position:absolute;left:50%;bottom:18px;z-index:45;transform:translateX(-50%);display:grid;grid-template-columns:50px minmax(180px,330px) 50px;align-items:center;gap:8px;padding:8px;border-radius:18px;background:rgba(9,31,20,.94);border:1px solid rgba(134,239,172,.32);box-shadow:0 18px 50px rgba(0,0,0,.42);backdrop-filter:blur(14px)} .bsp-canvas-node-arrow{width:50px;height:50px;border-radius:14px;border:1px solid rgba(134,239,172,.45);background:linear-gradient(180deg,#2e7d49,#1f6037);color:#fff;font-size:25px;font-weight:900;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .16s ease,filter .16s ease}.bsp-canvas-node-arrow:hover{transform:translateY(-2px);filter:brightness(1.15)}.bsp-canvas-node-arrow:active{transform:translateY(0) scale(.96)}.bsp-canvas-node-arrow:disabled{opacity:.38;cursor:not-allowed;transform:none} .bsp-canvas-node-nav-status{min-width:0;text-align:center;padding:0 7px}.bsp-canvas-node-nav-status span{display:block;color:#91c7a0;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}.bsp-canvas-node-nav-status strong{display:block;margin-top:4px;color:#fff;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bsp-canvas-node-navigator.is-moving{animation:bspNodeNavigatorPulse .42s ease}@keyframes bspNodeNavigatorPulse{0%{box-shadow:0 18px 50px rgba(0,0,0,.42)}45%{box-shadow:0 18px 58px rgba(34,197,94,.34),0 0 0 4px rgba(134,239,172,.13)}100%{box-shadow:0 18px 50px rgba(0,0,0,.42)}} @media(max-width:760px){ .bsp-brand-summary-actions{display:grid;grid-template-columns:1fr 1fr}.bsp-brand-summary-actions .bsp-edit-all-brand-btn{grid-column:1/-1}.bsp-brand-summary-metrics{grid-template-columns:repeat(2,1fr)} .bsp-editor-overview-grid{grid-template-columns:1fr}.bsp-editor-overview-hero{grid-template-columns:auto minmax(0,1fr)}.bsp-editor-overview-score{grid-column:1/-1;text-align:left;display:flex;align-items:baseline;gap:8px}.bsp-editor-overview-kpis{grid-template-columns:repeat(2,1fr)} .bsp-canvas-node-navigator{bottom:12px;grid-template-columns:46px minmax(120px,1fr) 46px;width:calc(100% - 24px);max-width:470px}.bsp-canvas-node-arrow{width:46px;height:46px}.bsp-canvas-node-nav-status strong{font-size:10px} } /* ══════════════════════════════════════════════════════════════════════════════ v7.11.3 — Brand Cards horizontal rail + reliable left/right navigation Final overrides intentionally supersede the older vertical grid repair layers. ══════════════════════════════════════════════════════════════════════════════ */ body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active { overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 88px !important; } #bsp-view-brands .bsp-brand-carousel-controls { display: grid; grid-template-columns: 54px minmax(0,1fr) 54px; align-items: center; gap: 10px; margin: 12px 0 10px; padding: 9px 11px; border: 1px solid rgba(134,239,172,.24); border-radius: 18px; background: linear-gradient(180deg, rgba(29,66,45,.96), rgba(17,43,29,.96)); box-shadow: 0 12px 28px rgba(0,0,0,.22); } #bsp-view-brands .bsp-brand-carousel-arrow { width: 54px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(134,239,172,.46); border-radius: 14px; background: linear-gradient(180deg,#3a9659,#236b3e); color: #fff; font-size: 31px; line-height: 1; font-weight: 900; cursor: pointer; box-shadow: 0 8px 18px rgba(0,0,0,.24); transition: transform .16s ease, filter .16s ease, opacity .16s ease; } #bsp-view-brands .bsp-brand-carousel-arrow:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.14); } #bsp-view-brands .bsp-brand-carousel-arrow:active:not(:disabled) { transform: scale(.96); } #bsp-view-brands .bsp-brand-carousel-arrow:disabled { opacity: .32; cursor: not-allowed; box-shadow: none; } #bsp-view-brands .bsp-brand-carousel-status { min-width: 0; text-align: center; } #bsp-view-brands .bsp-brand-carousel-status strong { display:block; color:#f0fff4; font-size:13px; } #bsp-view-brands .bsp-brand-carousel-status span { display:block; margin-top:3px; color:#a9d9b6; font-size:10px; line-height:1.35; } #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport { position: relative; width: 100%; min-width: 0; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; touch-action: pan-x pinch-zoom !important; padding: 3px 2px 18px; scrollbar-width: auto; scrollbar-color: rgba(134,239,172,.94) rgba(255,255,255,.06); outline: none; } #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport:focus-visible { box-shadow: 0 0 0 3px rgba(134,239,172,.18); border-radius: 16px; } #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport::-webkit-scrollbar { height: 14px; } #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport::-webkit-scrollbar-track { background: rgba(255,255,255,.055); border-radius: 999px; margin-inline: 4px; } #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport::-webkit-scrollbar-thumb { background: linear-gradient(90deg,#86efac,#22c55e); border: 3px solid #10261b; border-radius: 999px; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active #bsp-brands-grid.bsp-brands-grid, #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport #bsp-brands-grid.bsp-brands-grid { display: flex !important; flex-flow: row nowrap !important; align-items: stretch !important; gap: 14px !important; width: max-content !important; min-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding: 0 4px 3px !important; contain: none !important; touch-action: pan-x pinch-zoom !important; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-brand-summary-card, #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport .bsp-brand-card.bsp-brand-summary-card { flex: 0 0 clamp(292px, 31vw, 372px) !important; width: clamp(292px, 31vw, 372px) !important; min-width: 292px !important; max-width: 372px !important; height: auto !important; min-height: 430px !important; max-height: none !important; overflow: hidden !important; scroll-snap-align: start; scroll-snap-stop: always; } #bsp-app #bsp-view-brands.active .bsp-brand-summary-card.is-carousel-current { border-color: rgba(134,239,172,.68) !important; box-shadow: 0 18px 42px rgba(0,0,0,.31), 0 0 0 2px rgba(134,239,172,.12) !important; } #bsp-app #bsp-view-brands.active .bsp-brand-card-scroll-sentinel { display:none !important; width:0 !important; flex:0 0 0 !important; } @media (max-width: 900px) { #bsp-view-brands .bsp-brand-carousel-controls { grid-template-columns: 48px minmax(0,1fr) 48px; } #bsp-view-brands .bsp-brand-carousel-arrow { width:48px;height:46px; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-brand-summary-card, #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport .bsp-brand-card.bsp-brand-summary-card { flex-basis: min(82vw, 350px) !important; width: min(82vw, 350px) !important; } } @media (max-width: 620px) { #bsp-view-brands .bsp-brand-carousel-controls { margin-top:8px; padding:7px; gap:7px; } #bsp-view-brands .bsp-brand-carousel-status span { display:none; } body.bsp-brand-cards-open #bsp-app #bsp-view-brands.active .bsp-brand-card.bsp-brand-summary-card, #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport .bsp-brand-card.bsp-brand-summary-card { flex-basis: calc(100vw - 48px) !important; width: calc(100vw - 48px) !important; min-width: 272px !important; } } /* v7.11.3 — Drive + Sheets workspace panel inside Brand Editor. */ .bsp-brand-google-workspace-box{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border-radius:15px;background:linear-gradient(135deg,rgba(34,197,94,.13),rgba(59,130,246,.10));border:1px solid rgba(134,239,172,.25)} .bsp-brand-google-workspace-box>div:first-child{min-width:0}.bsp-brand-google-workspace-box strong{display:block;color:#f0fff4;font-size:13px}.bsp-brand-google-workspace-box span{display:block;margin-top:4px;color:#afdcbc;font-size:11px;line-height:1.45} .bsp-brand-google-workspace-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;flex:0 0 auto} @media(max-width:720px){.bsp-brand-google-workspace-box{align-items:stretch;flex-direction:column}.bsp-brand-google-workspace-actions{justify-content:flex-start}.bsp-brand-google-workspace-actions .bsp-btn{flex:1 1 auto;justify-content:center}} /* v7.11.3 — extra card-rail usability: sticky controls and desktop grab scrolling. */ #bsp-view-brands .bsp-brand-carousel-controls{position:sticky;top:0;z-index:18;backdrop-filter:blur(12px)} #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport{cursor:grab} #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport.is-grab-ready, #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport.is-grabbing{cursor:grabbing;scroll-snap-type:none!important;user-select:none} #bsp-app #bsp-view-brands.active .bsp-brand-carousel-viewport.is-grabbing *{pointer-events:none!important}