/* StreakoBot dashboard — sidebar shell + tabbed panels. */
.db{display:flex;min-height:100vh;background:var(--paper-dim);}
/* ---------------- sidebar ---------------- */
.db-side{width:246px;flex:none;background:#0b0b0c;color:#fff;padding:20px 14px;
display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.db-side .brand{padding:8px 10px 24px;color:#fff;}
.db-nav{display:flex;flex-direction:column;gap:2px;}
.db-link{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;
font-size:14px;color:#c2c2c4;cursor:pointer;border:none;background:none;
font-family:var(--sans);text-align:left;width:100%;transition:.12s ease;}
.db-link:hover{background:#1e1e21;color:#fff;}
.db-link.on{background:#fff;color:#0b0b0c;font-weight:600;}
.db-link i{width:6px;height:6px;border-radius:1px;background:currentColor;
transform:rotate(45deg);opacity:.7;flex:none;}
.db-link.locked{opacity:.4;cursor:not-allowed;}
.db-link .lk{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;}
.db-foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);
font-size:12.5px;color:#98989c;}
.db-foot strong{color:#fff;display:block;margin-top:3px;}
.db-foot a{display:inline-block;margin-top:10px;color:#98989c;text-decoration:underline;cursor:pointer;}
/* ---------------- main ---------------- */
.db-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.db-top{height:66px;background:var(--white);border-bottom:1px solid var(--line);
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:0 28px;position:sticky;top:0;z-index:10;}
.db-top h1{font-size:17px;font-weight:600;}
.db-chip{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
border:1px solid var(--gray-200);padding:5px 10px;border-radius:6px;color:var(--gray-500);}
.db-body{padding:26px 28px 60px;flex:1;}
.db-pane{display:none;}
.db-pane.on{display:block;}
/* ---------------- pieces ---------------- */
.db-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.db-stat{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:18px 20px;
box-shadow:0 1px 2px rgba(0,0,0,.03),0 10px 22px -16px rgba(0,0,0,.14);}
.db-stat .k{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;
color:var(--gray-500);margin-bottom:9px;}
.db-stat .v{font-size:25px;font-weight:600;line-height:1.15;}
.db-stat .d{font-size:12.5px;color:var(--gray-500);margin-top:5px;}
.db-card{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:22px;
margin-bottom:18px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 10px 24px -18px rgba(0,0,0,.14);}
.db-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
margin-bottom:16px;flex-wrap:wrap;}
.db-card-head h2{font-size:15.5px;font-weight:600;}
.db-card-head p{font-size:13px;color:var(--gray-500);margin:5px 0 0;max-width:60ch;}
.db-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.db-table th{text-align:left;font-family:var(--mono);font-size:10px;text-transform:uppercase;
letter-spacing:.06em;color:var(--gray-500);padding:9px 10px;
border-bottom:1px solid var(--line);font-weight:400;}
.db-table td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere;max-width:220px;}
.db-table tr:last-child td{border-bottom:none;}
.db-pill{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.04em;
padding:3px 8px;border-radius:5px;background:var(--gray-100);color:var(--gray-500);
white-space:nowrap;display:inline-block;}
.db-pill.ok{background:#e9efe6;color:#3b5a2f;}
.db-pill.wait{background:#f3ede1;color:#7a5a1e;}
.db-pill.off{background:#f0e6e6;color:#7a2f2f;}
.db-btn{font-family:var(--sans);font-size:13px;font-weight:500;padding:9px 17px;border-radius:9px;
border:1px solid var(--gray-200);background:var(--white);color:var(--ink-900);cursor:pointer;
transition:.12s ease;}
.db-btn:hover{border-color:var(--ink-700);}
.db-btn.dark{background:var(--black);color:var(--white);border-color:var(--black);}
.db-btn.dark:hover{background:var(--ink-800);}
.db-btn:disabled{opacity:.45;cursor:not-allowed;}
.db-btn.quiet{border-color:transparent;color:var(--gray-500);padding:9px 10px;}
.db-btn.quiet:hover{color:var(--ink-900);}
.db-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.db-empty{border:1px dashed var(--gray-200);border-radius:11px;padding:30px 22px;text-align:center;}
.db-empty p{color:var(--gray-500);font-size:14px;margin:0;}
.db-empty strong{display:block;font-size:15px;color:var(--ink-900);margin-bottom:6px;}
.db-code{font-family:var(--mono);font-size:11.5px;line-height:1.6;background:#141416;color:#e8e8e8;
padding:15px;border-radius:10px;overflow-x:auto;white-space:pre-wrap;word-break:break-all;
margin:0 0 12px;}
.db-alert{background:#f6ebeb;border-left:3px solid #8c3a3a;color:#6d2b2b;font-size:13.5px;
padding:11px 15px;border-radius:8px;margin-bottom:16px;}
.db-ok{background:#e9efe6;border-left:3px solid #3b5a2f;color:#33502a;font-size:13.5px;
padding:11px 15px;border-radius:8px;margin-bottom:16px;}
/* connection cards */
.db-conns{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.db-conn{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:20px;
display:flex;flex-direction:column;gap:11px;transition:.15s ease;}
.db-conn.dim{opacity:.42;}
.db-conn-ico{width:40px;height:40px;border-radius:11px;background:var(--ink-900);flex:none;
display:flex;align-items:center;justify-content:center;}
.db-conn-ico svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;}
.db-conn h3{font-size:15px;}
.db-conn p{font-size:13px;color:var(--gray-500);margin:0;flex:1;}
/* forms inside panes */
.db-field{margin-bottom:18px;max-width:460px;}
.db-field label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.07em;
text-transform:uppercase;color:var(--gray-500);margin-bottom:7px;}
.db-field input,.db-field select,.db-field textarea{width:100%;padding:12px 14px;font-size:14.5px;
font-family:var(--sans);color:var(--ink-900);background:var(--white);
border:1px solid var(--gray-200);border-radius:9px;}
.db-field input:focus,.db-field select:focus,.db-field textarea:focus{
outline:none;border-color:var(--black);box-shadow:0 0 0 3px rgba(0,0,0,.06);}
.db-field .err{color:#8c3a3a;font-size:12.5px;margin:6px 0 0;}
.db-hint{font-size:12.5px;color:var(--gray-400);margin:6px 0 0;}
.db-split{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start;}
/* The settings column is far taller than the preview, so the preview rides
down with it: it stays in view while you scroll through the fields, which
is the whole point of a live preview. 86px clears the 66px sticky top bar
plus a little air. Sticky needs align-items:start above, otherwise the
grid item stretches and there is nothing for it to slide within. */
.db-preview{position:sticky;top:86px;}
/* how-to steps */
.db-step{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:18px 0;
border-bottom:1px solid var(--line);}
.db-step:last-child{border-bottom:none;}
.db-step .n{font-family:var(--mono);font-size:11px;color:var(--gray-400);padding-top:2px;}
.db-step h4{font-size:14.5px;margin-bottom:6px;}
.db-step p{font-size:13.5px;color:var(--gray-500);margin:0;}
@media (max-width:1080px){
.db-stats{grid-template-columns:1fr 1fr;}
.db-conns{grid-template-columns:1fr;}
.db-split{grid-template-columns:1fr;}
/* One column: the preview sits below the fields, so pinning it would
strand it off screen. */
.db-preview{position:static;}
}
@media (max-width:820px){
.db-side{width:70px;padding:16px 10px;}
.db-side .label{display:none;}
.db-side .brand{padding:6px;justify-content:center;}
.db-link{justify-content:center;padding:11px 8px;}
.db-link .lk{display:none;}
.db-foot{font-size:0;}
.db-body{padding:20px 16px 50px;}
.db-top{padding:0 16px;}
}
@media (max-width:560px){
.db-stats{grid-template-columns:1fr;}
}
/* transcript viewer overlay */
.db-overlay{position:fixed;inset:0;background:rgba(11,11,12,.5);z-index:200;
display:flex;align-items:center;justify-content:center;padding:20px;}
.db-overlay[hidden]{display:none;}
.db-modal{background:var(--white);border-radius:16px;width:100%;max-width:480px;
max-height:80vh;display:flex;flex-direction:column;overflow:hidden;
box-shadow:0 30px 70px -20px rgba(0,0,0,.5);}
.db-modal-head{display:flex;align-items:center;justify-content:space-between;
padding:16px 18px;border-bottom:1px solid var(--line);flex:none;}
.db-modal-head strong{display:block;font-size:15px;margin-bottom:4px;}
.db-modal-body{padding:16px;overflow-y:auto;display:flex;flex-direction:column;
gap:10px;background:var(--paper-dim);flex:1;}
.db-link-btn{background:none;border:none;color:var(--gray-500);cursor:pointer;
font-size:13px;text-decoration:underline;padding:0;font-family:var(--sans);}
.db-link-btn:hover{color:var(--ink-900);}
/* phone-width bottom nav: flips the sidebar into a fixed bottom bar with
real text labels, since the sidebar's icon is purely decorative (an
identical small diamond on every item) and can't distinguish sections
on its own at icon-only sizes. */
@media (max-width:640px){
.db{flex-direction:column;}
.db-main{padding-bottom:64px;}
.db-side{
position:fixed; left:0; right:0; bottom:0; top:auto;
width:100%; height:auto;
padding:0;
z-index:100;
border-top:1px solid rgba(255,255,255,.12);
}
.db-side .brand, .db-side .db-foot{display:none;}
.db-nav{
flex-direction:row;
gap:0;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
.db-link{
flex-direction:column;
flex:none;
width:auto;
min-width:74px;
gap:2px;
padding:9px 6px 7px;
justify-content:center;
text-align:center;
}
.db-link .label:not(.lk){display:block;font-size:10px;line-height:1.2;}
.db-link .lk{display:none;}
.db-link i{
width:20px;height:20px;
background:none;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-position:center; mask-position:center;
background-color:currentColor;
opacity:1; transform:none;
}
.db-link[data-tab="overview"] i{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%223%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3Crect%20x%3D%2213%22%20y%3D%2213%22%20width%3D%228%22%20height%3D%228%22%2F%3E%3C%2Fsvg%3E");}
.db-link[data-tab="documents"] i{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%202h9l5%205v15H5z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14%202v5h5z%22%2F%3E%3Crect%20x%3D%227.5%22%20y%3D%2211%22%20width%3D%229%22%20height%3D%221.6%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%227.5%22%20y%3D%2215%22%20width%3D%229%22%20height%3D%221.6%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M5%202h9l5%205v15H5z%22%2F%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M14%202v5h5z%22%2F%3E%3Crect%20x%3D%227.5%22%20y%3D%2211%22%20width%3D%229%22%20height%3D%221.6%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%227.5%22%20y%3D%2215%22%20width%3D%229%22%20height%3D%221.6%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");}
.db-link[data-tab="leads"] i{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224.2%22%2F%3E%3Cpath%20d%3D%22M4%2021c0-4.4%203.6-7.5%208-7.5s8%203.1%208%207.5z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224.2%22%2F%3E%3Cpath%20d%3D%22M4%2021c0-4.4%203.6-7.5%208-7.5s8%203.1%208%207.5z%22%2F%3E%3C%2Fsvg%3E");}
.db-link[data-tab="conversations"] i{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%204h18v12H8l-5%205z%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%204h18v12H8l-5%205z%22%2F%3E%3C%2Fsvg%3E");}
.db-link[data-tab="bot"] i{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2220%22%20height%3D%223%22%20rx%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227.5%22%20r%3D%222.6%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%223%22%20rx%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2215.5%22%20r%3D%222.6%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2220%22%20height%3D%223%22%20rx%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227.5%22%20r%3D%222.6%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%2220%22%20height%3D%223%22%20rx%3D%221.5%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2215.5%22%20r%3D%222.6%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");}
.db-link[data-tab="howto"] i{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Crect%20x%3D%2210.8%22%20y%3D%2210%22%20width%3D%222.4%22%20height%3D%227%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%2210.8%22%20y%3D%226%22%20width%3D%222.4%22%20height%3D%222.4%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Crect%20x%3D%2210.8%22%20y%3D%2210%22%20width%3D%222.4%22%20height%3D%227%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%2210.8%22%20y%3D%226%22%20width%3D%222.4%22%20height%3D%222.4%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");}
.db-link[data-tab="billing"] i{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%2220%22%20height%3D%223%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%2215%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%222%22%20y%3D%225%22%20width%3D%2220%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%229%22%20width%3D%2220%22%20height%3D%223%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%2215%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");}
}
/* ============================================================
Brand refresh — reskin only.
Gradient accents on chrome; no parallax, no tilt, no reveals. A
leads table and a billing pane are working surfaces, so nothing
here is scroll-linked.
Deliberately NOT touched: the 640px bottom-nav block above, its
per-tab mask icons, and .db-table's overflow-wrap/max-width. Those
were specific fixes — the rules below only add colour on top.
============================================================ */
/* brand: the real lockup artwork on the wide rail, icon alone once the rail
collapses to 70px.
This previously rebuilt the wordmark as HTML text (STREAKO BOT),
which rendered in the UI font rather than the lockup's own typeface, so
the dashboard's brand did not match the marketing site, the signup flow
or the legal pages. All five surfaces now show the same artwork.
The white variant is used because the rail is #0b0b0c. It is a separate
file, not a CSS filter: the dark and white lockups measure identically
(content 1332x279 on a 2000px canvas), so the shared .lockup ratios
apply to both and no inversion is needed. */
.db-side .brand{gap:10px;}
.db-side .lockup.logo-mark{--lh:30px;}
.db-side .db-lockup{--lh:30px;}
.db-side .db-mark{display:none;}
/* active nav item carries the gradient. The bottom-nav mask icons paint
with background-color:currentColor, so setting colour to white here
keeps them legible against it. */
.db-link.on{background:var(--grad);color:#fff;}
.db-link.on i{opacity:1;}
/* primary action + status pills */
.db-btn.dark{background:var(--grad);border-color:transparent;color:#fff;}
.db-btn.dark:hover{background:var(--grad);filter:saturate(1.15) brightness(1.04);}
.db-pill.ok{background:var(--grad-soft);color:#8a2436;}
/* card grounds stay white so they lift off the blush page ground */
.db{background:var(--paper-dim);}
@media (max-width:820px){
.db-side .brand-text{display:none;}
/* the full lockup cannot fit a 70px rail; fall back to the icon */
.db-side .db-lockup{display:none;}
.db-side .db-mark{display:block;}
}
/* ============================================================
Install help modal, opened from the connection card.
Reuses .db-overlay / .db-modal wholesale — only the per-platform
sections inside .db-modal-body are new. .db-modal-body is already a
flex column with a gap, so these just need their own box.
============================================================ */
.db-install-step{background:var(--white);border:1px solid var(--line);
border-radius:11px;padding:14px 16px;}
.db-install-step h4{font-size:14px;margin:0 0 6px;}
.db-install-step p{font-size:13px;color:var(--gray-500);margin:0;line-height:1.55;}
/* Screenshots are optional. The ![]()
carries an onerror that hides it, so
until a real file lands in frontend/img/install/ the section is text only
and nothing broken is shown. No placeholder graphic is used. */
.db-install-shot{display:block;width:100%;height:auto;margin-top:10px;
border:1px solid var(--line);border-radius:8px;}
/* Labelled rows in the Payment method card. Label left, value right, so
status and dates line up instead of running together as prose. */
.db-kv{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.db-kv:last-of-type{border-bottom:none;}
.db-kv-k{color:var(--gray-500);}
.db-kv-v{font-weight:500;text-align:right;}
/* Preview avatar. Mirrors what the widget does: the business's own logo
shown whole, on whichever backing they picked, or the StreakoAI mark on
the brand gradient when no logo is uploaded. */
.pv-avatar{width:30px;height:30px;border-radius:8px;flex:none;overflow:hidden;
display:flex;align-items:center;justify-content:center;}
.pv-avatar img{width:100%;height:100%;object-fit:contain;display:block;}
.pv-avatar.pv-fallback{border-radius:50%;background:var(--grad);}
.pv-bg-white{background:#fff;padding:3px;}
.pv-bg-black{background:#0b0b0c;padding:3px;}
.pv-bg-gradient{background:var(--grad);padding:3px;}