/*
* Boei Customer Panel stylesheet
* Drop-in styles for the Customer Panel iframe integration.
*
* Usage:
*
*
*
*
*
* Boei passes these query params to your page:
* email — the customer's email
* thread — the Boei inbox thread id
* token — shared secret (check against the value from Boei settings)
* theme — "light" or "dark" (mirror this as data-theme on )
*
* See the Customer Panel section in Boei settings for a full HTML example
* showing sections, collapsible groups, icons, links, badges, and buttons.
*/
:root {
--boei-bg: #f8f9fa;
--boei-fg: #212529;
--boei-fg-muted: #6c757d;
--boei-border: #e9ecef;
--boei-surface: #ffffff;
--boei-accent: #0d6efd;
--boei-link: #0d6efd;
--boei-radius: 6px;
--boei-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[data-theme="dark"] {
--boei-bg: #1f2428;
--boei-fg: #e8eaed;
--boei-fg-muted: #9aa0a6;
--boei-border: #2d3338;
--boei-surface: #272c30;
--boei-accent: #4d9fff;
--boei-link: #6eb4ff;
}
html, body {
margin: 0;
padding: 0;
}
.boei-panel {
font-family: var(--boei-font);
font-size: 13px;
line-height: 1.45;
color: var(--boei-fg);
background: var(--boei-bg);
padding: 12px;
box-sizing: border-box;
}
.boei-panel *, .boei-panel *::before, .boei-panel *::after {
box-sizing: border-box;
}
.boei-panel a {
color: var(--boei-link);
text-decoration: none;
}
.boei-panel a:hover {
text-decoration: underline;
}
/* --- Sections / groups --- */
.boei-section {
background: var(--boei-surface);
border: 1px solid var(--boei-border);
border-radius: var(--boei-radius);
margin-bottom: 10px;
overflow: hidden;
}
.boei-section-title {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
font-weight: 600;
font-size: 13px;
color: var(--boei-fg);
border-bottom: 1px solid var(--boei-border);
cursor: default;
user-select: none;
}
/* Collapsible sections: use */
details.boei-section > summary {
list-style: none;
cursor: pointer;
}
details.boei-section > summary::-webkit-details-marker {
display: none;
}
details.boei-section > summary.boei-section-title::after {
content: "▾";
margin-left: auto;
color: var(--boei-fg-muted);
font-size: 10px;
transition: transform 0.15s ease;
}
details.boei-section[open] > summary.boei-section-title::after {
transform: rotate(180deg);
}
.boei-section-body {
padding: 6px 0;
}
/* --- Rows (key-value pairs) --- */
.boei-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding: 6px 12px;
font-size: 13px;
}
.boei-row + .boei-row {
border-top: 1px solid var(--boei-border);
}
.boei-row-label {
color: var(--boei-fg-muted);
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
}
.boei-row-value {
color: var(--boei-fg);
text-align: right;
word-break: break-word;
font-weight: 500;
}
/* --- Icon helper (inline SVG or icon-font) --- */
.boei-icon {
width: 14px;
height: 14px;
display: inline-block;
flex-shrink: 0;
vertical-align: -2px;
color: var(--boei-fg-muted);
}
/* --- Badges --- */
.boei-badge {
display: inline-block;
padding: 1px 7px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
background: var(--boei-border);
color: var(--boei-fg);
}
.boei-badge-success { background: #d4edda; color: #155724; }
.boei-badge-warning { background: #fff3cd; color: #856404; }
.boei-badge-danger { background: #f8d7da; color: #721c24; }
.boei-badge-info { background: #d1ecf1; color: #0c5460; }
[data-theme="dark"] .boei-badge-success { background: #1f3b2a; color: #8dd9a4; }
[data-theme="dark"] .boei-badge-warning { background: #3b321a; color: #f2cf73; }
[data-theme="dark"] .boei-badge-danger { background: #3b1f23; color: #f1a1aa; }
[data-theme="dark"] .boei-badge-info { background: #1a323b; color: #8cc7d6; }
/* --- Buttons --- */
.boei-button {
display: inline-block;
padding: 4px 10px;
border-radius: var(--boei-radius);
border: 1px solid var(--boei-border);
background: var(--boei-surface);
color: var(--boei-fg);
font-size: 12px;
font-family: inherit;
cursor: pointer;
text-decoration: none;
}
.boei-button:hover {
border-color: var(--boei-accent);
color: var(--boei-accent);
text-decoration: none;
}
/* --- Empty state --- */
.boei-empty {
text-align: center;
color: var(--boei-fg-muted);
padding: 20px 10px;
font-size: 12px;
}
/* --- Auto-resize helper ---
* Include this script snippet in your page so the iframe auto-fits its content:
*
*
*/