/* ============================================================================ PandoraBot Dashboard Shell v1 — sidebar navigation, health cards, docked live preview, visual standardization. Loaded on top of the inline page styles; activates only when dashboard.js adds .pbd-shell to . ============================================================================ */ /* ---- Sidebar ------------------------------------------------------------ */ body.pbd-shell { padding-left: 224px; } #pbd-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 208px; z-index: 50; display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; /* the page styles ALL nav elements white+!important for its top bar */ background: var(--sb-ink) !important; border-bottom: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow-y: auto; } #pbd-sidebar .pbd-brand { color: #fff; font-weight: 700; font-size: 15px; padding: 4px 10px 14px; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; } #pbd-sidebar .pbd-brand img { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 22px; } #pbd-sidebar .pbd-group-title { color: rgba(255, 255, 255, 0.38); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 10px 4px; } #pbd-sidebar .pbd-nav-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: rgba(255, 255, 255, 0.68); font-size: 13px; font-weight: 500; box-shadow: none; text-align: left; cursor: pointer; transition: background 0.12s ease; } #pbd-sidebar .pbd-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; transform: none; } #pbd-sidebar .pbd-nav-item.active { background: rgba(255, 255, 255, 0.09); color: #fff; box-shadow: inset 3px 0 0 var(--sb-coral); } #pbd-sidebar .pbd-nav-ico { width: 18px; text-align: center; flex: 0 0 18px; } /* ---- Content area: managed cards hidden unless active group ------------- */ body.pbd-shell .card[data-pbd-group] { display: none; } body.pbd-shell .card[data-pbd-group].pbd-visible { display: block; } body.pbd-shell #onboarding-banner { display: none; } body.pbd-shell #onboarding-banner.pbd-visible { display: block; } /* Sections always expanded inside a focused page — chevrons are noise */ body.pbd-shell .card.pbd-visible .section-collapsible { cursor: default; } body.pbd-shell .card.pbd-visible .section-collapsible .chevron, body.pbd-shell .card.pbd-visible .sec-summary { display: none !important; } /* ---- Standardized card + heading language ------------------------------- */ body.pbd-shell .card { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); box-shadow: var(--sb-shadow-sm); padding: 22px; } body.pbd-shell .card > h2 { font-size: 15px; font-weight: 600; color: var(--sb-ink); } /* ---- Health cards (Overview) -------------------------------------------- */ #pbd-health { display: none; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 20px; } #pbd-health.pbd-visible { display: grid; } .pbd-hcard { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 6px; } .pbd-hcard .pbd-hrow { display: flex; align-items: center; gap: 8px; } .pbd-hdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; } .pbd-hdot.ok { background: var(--sb-success); } .pbd-hdot.warn { background: var(--sb-warning); } .pbd-hdot.error { background: var(--sb-danger); } .pbd-hdot.off { background: var(--sb-border-strong); } .pbd-hcard .pbd-hlabel { font-weight: 600; font-size: 13.5px; color: var(--sb-ink); } .pbd-hcard .pbd-hdetail { font-size: 12px; color: var(--sb-text-secondary); line-height: 1.45; word-break: break-word; } .pbd-hcard .pbd-htest { align-self: flex-start; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--sb-ink-soft); background: #fff; border: 1px solid var(--sb-border-strong); border-radius: var(--sb-radius-sm); padding: 4px 10px; cursor: pointer; } .pbd-hcard .pbd-htest:hover { background: var(--sb-surface-hover); } /* ---- Docked persistent preview (wide screens) ---------------------------- */ @media (min-width: 1200px) { body.pbd-shell.pbd-preview-docked { padding-right: 384px; } body.pbd-shell.pbd-preview-docked #pb-preview-drawer { transform: none !important; top: 0; right: 0; bottom: 0; width: 372px; border-left: 1px solid var(--sb-border); box-shadow: none; } body.pbd-shell.pbd-preview-docked #pb-preview-drawer .pb-prev-btn[title="Close"] { display: none; } } /* ---- Narrow screens: sidebar becomes a top chip strip -------------------- */ @media (max-width: 1023px) { body.pbd-shell { padding-left: 0; } #pbd-sidebar { position: sticky; top: 0; width: auto; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 10px; gap: 6px; } #pbd-sidebar .pbd-brand, #pbd-sidebar .pbd-group-title { display: none; } #pbd-sidebar .pbd-nav-item { white-space: nowrap; width: auto; } } /* Old horizontal section-pill nav is redundant with the sidebar */ body.pbd-shell #sec-nav { display: none !important; } /* Section-specific tips + quick-default chips under the page header */ #pbd-tips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 20px; } .pbd-tip { font-size: 12px; color: var(--sb-text-secondary); background: var(--sb-surface-muted); border: 1px solid var(--sb-border); border-radius: 9px; padding: 6px 11px; line-height: 1.45; } .pbd-tip-action { color: var(--sb-coral); background: var(--sb-coral-soft); border-color: var(--sb-coral-muted); font-weight: 600; cursor: pointer; } .pbd-tip-action:hover { background: #FFE4E6; } /* unsaved-changes badge in the preview header */ #pbd-dirty { display: none; font-size: 11px; font-weight: 600; color: var(--sb-warning); background: var(--sb-warning-soft); border: 1px solid #F3E2B8; border-radius: 999px; padding: 3px 8px; margin-right: 8px; white-space: nowrap; } #pbd-dirty.show { display: inline-block; } /* ============================================================================ Feature hero cards — summary + illustration, form hidden behind Configure ============================================================================ */ body.pbd-shell .pbd-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; margin-bottom: 6px; } @media (max-width: 900px) { body.pbd-shell .pbd-hero { grid-template-columns: 1fr; } } .pbd-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px; box-shadow: none; } .pbd-badge-on { background: var(--sb-success-soft); color: var(--sb-success); } .pbd-badge-off { background: var(--sb-surface-muted); color: var(--sb-text-muted); } .pbd-hero-desc { font-size: 13.5px; color: var(--sb-ink-soft); margin: 0 0 10px; line-height: 1.55; } .pbd-hero-bullets { margin: 0 0 14px; padding: 0; list-style: none; } .pbd-hero-bullets li { font-size: 12.5px; color: var(--sb-text-secondary); padding: 3px 0 3px 22px; position: relative; } .pbd-hero-bullets li::before { content: '✓'; position: absolute; left: 2px; color: var(--sb-success); font-weight: 700; } .pbd-configure { font-size: 12.5px; font-weight: 600; color: var(--sb-ink-soft); background: #fff; border: 1px solid var(--sb-border-strong); border-radius: var(--sb-radius-sm); padding: 8px 16px; cursor: pointer; box-shadow: none; } .pbd-configure:hover { border-color: var(--sb-border-strong); background: var(--sb-surface-hover); } body.pbd-shell .pbd-config-body { display: none; margin-top: 14px; border-top: 1px dashed var(--sb-border); padding-top: 14px; } body.pbd-shell .pbd-config-body.open { display: block; } /* Illustrations — skeleton mockups */ .pbd-illo { background: var(--sb-surface-muted); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); padding: 16px; min-height: 130px; display: flex; flex-direction: column; gap: 8px; justify-content: center; } .pbd-illo-dark { background: var(--sb-ink-soft); border-color: var(--sb-ink-soft); align-items: center; } .pbd-sk { height: 9px; border-radius: 5px; background: var(--sb-border); } .pbd-sk-w60 { width: 60%; } .pbd-sk-w40 { width: 40%; } .pbd-illo-price { font-size: 17px; font-weight: 700; color: var(--sb-ink); } .pbd-illo-bubble { background: var(--sb-coral-soft); color: var(--sb-ink); font-size: 12.5px; font-weight: 600; border-radius: var(--sb-radius-md); padding: 8px 12px; align-self: flex-start; } .pbd-illo-chips { display: flex; gap: 6px; flex-wrap: wrap; } .pbd-illo-chips span { background: #fff; border: 1px solid var(--sb-border-strong); color: var(--sb-ink-soft); font-size: 11.5px; font-weight: 600; border-radius: 8px; padding: 4px 10px; } .pbd-illo-popup { background: #fff; border-radius: var(--sb-radius-md); padding: 14px 16px; border: 1px solid var(--sb-border); box-shadow: var(--sb-shadow-sm); font-size: 13px; color: var(--sb-ink); display: flex; flex-direction: column; gap: 8px; } .pbd-illo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; } .pbd-illo-grid div { background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); font-size: 11px; font-weight: 600; color: var(--sb-ink-soft); padding: 10px 4px; line-height: 1.7; } .pbd-illo-flow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--sb-text-secondary); } .pbd-illo-flow span { background: #fff; border: 1px solid var(--sb-border); border-radius: 8px; padding: 5px 9px; font-size: 11.5px; font-weight: 600; color: var(--sb-ink-soft); } /* split-card illustration extras */ .pbd-illo-coupon { background: var(--sb-warning-soft) !important; border-color: #F3E2B8 !important; color: var(--sb-warning) !important; font-weight: 700 !important; } .pbd-illo-code { background: var(--sb-ink); color: #C7F0DA; font-family: monospace; font-size: 11px; border-radius: 8px; padding: 10px 12px; word-break: break-all; line-height: 1.5; } /* ============================================================================ Sticky save bar + completeness strip + assistant-type card polish ============================================================================ */ #pbd-savebar { position: fixed; /* below the 64px top nav — at nav height it covered View Bot / Logout */ top: 74px; right: 20px; z-index: 60; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); padding: 5px 6px 5px 14px; box-shadow: 0 4px 14px rgba(17, 19, 47, 0.08); } #pbd-savebar:has(#pbd-save-state:empty) { padding-left: 6px; } body.pbd-shell.pbd-preview-docked #pbd-savebar { right: 400px; } #pbd-save-state { font-size: 12px; font-weight: 600; } #pbd-save-state.dirty { color: var(--sb-warning); } #pbd-save-state.saved { color: var(--sb-success); } #pbd-save-state.failed { color: var(--sb-danger); } #pbd-save-btn { background: var(--sb-coral); color: #fff; font-size: 13px; font-weight: 600; border: 1px solid var(--sb-coral); border-radius: var(--sb-radius-sm); padding: 8px 18px; cursor: pointer; box-shadow: none; } #pbd-save-btn:hover { background: var(--sb-coral-hover); border-color: var(--sb-coral-hover); } #pbd-save-btn:disabled { opacity: 0.6; cursor: default; } #pbd-progress { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .pbd-prog-chip { font-size: 12px; font-weight: 600; color: var(--sb-text-secondary); background: var(--sb-surface-muted); border: 1px solid var(--sb-border); border-radius: 999px; padding: 4px 11px; } .pbd-prog-chip.done { color: var(--sb-success); background: var(--sb-success-soft); border-color: #CBEBD9; } /* Assistant type cards: clearer selected state with a check badge */ body.pbd-shell .sel-card { position: relative; } body.pbd-shell .sel-card.active::after { content: '✓'; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; display: grid; place-items: center; background: var(--sb-coral); color: #fff; font-size: 13px; font-weight: 700; border-radius: 50%; box-shadow: none; } /* channel card illustrations */ .pbd-illo-social { display: flex; gap: 10px; justify-content: center; } .pbd-illo-social span { flex: 0 0 74px; text-align: center; border-radius: 12px; padding: 10px 4px; font-size: 11px; font-weight: 600; color: var(--sb-ink-soft); line-height: 1.9; border: 1px solid var(--sb-border); } .pbd-illo-order { background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); padding: 12px 14px; font-size: 12.5px; color: var(--sb-ink-soft); line-height: 1.7; align-self: center; min-width: 190px; } .pbd-illo-track { display: flex; gap: 4px; margin-top: 8px; } .pbd-illo-track i { flex: 1; height: 5px; border-radius: 3px; background: var(--sb-border); } .pbd-illo-track i.on { background: var(--sb-success); } /* completeness chips belong to the Business page (and Overview) only */ #pbd-progress { display: none; } body[data-pbd-group="essentials"] #pbd-progress, body[data-pbd-group="overview"] #pbd-progress { display: flex; } /* business-section illustrations */ .pbd-illo-botcard { background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); padding: 14px; min-width: 210px; align-self: center; } .pbd-illo-botrow { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sb-ink); } .pbd-illo-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft, var(--sb-coral-soft)); display: grid; place-items: center; font-size: 15px; } /* cart integration 5-step explainer chart */ .pbd-cartflow { display: flex; align-items: flex-start; gap: 4px; justify-content: center; } .pbd-cf-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; } .pbd-cf-ico { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--sb-surface-muted); border: 1px solid var(--sb-border-strong); display: grid; place-items: center; font-size: 19px; } .pbd-cf-ico i { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--sb-ink); color: #fff; font-size: 10px; font-weight: 700; font-style: normal; display: grid; place-items: center; } .pbd-cf-step span { font-size: 10.5px; font-weight: 600; color: var(--sb-ink-soft); text-align: center; line-height: 1.3; } .pbd-cf-arrow { color: var(--sb-border-strong); font-weight: 700; margin-top: 14px; } .pbd-cf-note { margin-top: 12px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--sb-text-secondary); background: var(--sb-surface-muted); border: 1px solid var(--sb-border); border-radius: 9px; padding: 7px 10px; } /* ============================================================================ Install on your Site — method cards ============================================================================ */ #pbd-install { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } #pbd-install:not(.pbd-visible) { display: none !important; } .pbd-inst-card { background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 12px; } .pbd-inst-head { display: flex; gap: 12px; align-items: flex-start; } .pbd-inst-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: var(--sb-radius-md); display: grid; place-items: center; font-size: 19px; } .pbd-inst-head h3 { font-size: 14.5px; font-weight: 700; color: var(--sb-ink); margin: 0 0 3px; } .pbd-inst-head p { font-size: 12px; color: var(--sb-text-secondary); margin: 0; line-height: 1.5; } .pbd-inst-code { background: var(--sb-surface-muted); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); padding: 12px; font-family: ui-monospace, monospace; font-size: 11px; line-height: 1.55; color: var(--sb-ink-soft); white-space: pre-wrap; word-break: break-all; max-height: 170px; overflow-y: auto; margin: 0; flex: 1; } .pbd-inst-actions { display: flex; gap: 8px; } .pbd-copy { font-size: 12px; font-weight: 600; color: var(--sb-ink-soft); background: #fff; border: 1px solid var(--sb-border-strong); border-radius: var(--sb-radius-sm); padding: 7px 12px; cursor: pointer; box-shadow: none; } .pbd-copy:hover { background: var(--sb-surface-hover); } /* the dark original stays as data source but never shows */ body.pbd-shell .card.pbd-install-hidden { display: none !important; } /* custom-domain block promoted to a light card */ .pbd-domain-card details { border: 0; background: transparent !important; padding: 0 !important; margin-top: 4px; } .pbd-domain-card summary { display: none; } /* primary bubble card: snippet left, deploy steps right */ .pbd-bubble-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: stretch; } @media (max-width: 900px) { .pbd-bubble-grid { grid-template-columns: 1fr; } } .pbd-deploysteps { display: flex; flex-direction: column; gap: 14px; } .pbd-ds-step { display: flex; gap: 12px; align-items: flex-start; } .pbd-ds-step b { display: block; font-size: 13px; color: var(--sb-ink); } .pbd-ds-step span { font-size: 12px; color: var(--sb-text-secondary); line-height: 1.5; } .pbd-ds-step .pbd-cf-ico { flex: 0 0 40px; width: 40px; height: 40px; font-size: 17px; } /* "More ways to install" — collapsed by default */ #pbd-more-install summary { list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--sb-ink-soft); background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg); padding: 14px 18px; } #pbd-more-install summary span { font-weight: 500; color: var(--sb-text-muted); font-size: 12px; margin-left: 10px; } #pbd-more-install summary:hover { border-color: var(--sb-border-strong); } #pbd-more-install[open] summary { margin-bottom: 14px; } #pbd-more-install #pbd-install { display: grid !important; /* beats the legacy #pbd-install:not(.pbd-visible) rule */ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* ============================================================================ SalesBot refresh v2 — calm, flat, consistent. Tokens + scoped overrides. Order: tokens → base → sidebar → nav/header → cards → panels → type → inputs → buttons → selection → badges → shadows/radii → onboarding → preview → custom-domain → responsive. `!important` is used ONLY to neutralize inline style="" attributes, JS-written element styles, or existing !important rules in the page's inline