. Visual on-brand, theme-aware. */
.joinos-bell-wrap { position: relative; }
#joinos-bell-btn {
position: relative; background: none; border: none; cursor: pointer;
font-size: 16px; line-height: 1; color: var(--fg); padding: 6px; border-radius: 8px;
transition: background var(--ease);
}
#joinos-bell-btn:hover { background: var(--faint); }
#joinos-bell-badge {
display: none; position: absolute; top: -1px; right: -1px;
min-width: 15px; height: 15px; padding: 0 3px; border-radius: 99px;
background: #e05a2a; color: #fff; font-family: var(--j);
font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
}
#joinos-bell-badge.show { display: block; }
#joinos-bell-drop {
display: none; position: absolute; top: calc(100% + 8px); right: 0;
width: min(340px, 92vw); max-height: 70vh; overflow-y: auto; z-index: 1000;
background: var(--s); border: 1px solid var(--rule); border-radius: var(--radius);
box-shadow: var(--shadow); font-family: var(--j);
}
#joinos-bell-drop.open { display: block; animation: joinosDropIn .16s ease; }
@keyframes joinosDropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
#joinos-bell-drop .bell-head {
display: flex; align-items: center; gap: 6px; padding: 11px 13px;
border-bottom: 1px solid var(--rule); font-size: 12px; font-weight: 600; color: var(--fg);
position: sticky; top: 0; background: var(--s);
}
#joinos-bell-drop .bell-mark {
margin-left: auto; background: none; border: 1px solid var(--rule); border-radius: 5px;
color: var(--muted); cursor: pointer; font-size: 11px; padding: 2px 7px;
}
#joinos-bell-drop .bell-mark:hover { color: var(--fg); background: var(--faint); }
#joinos-bell-compose { display: none; flex-direction: column; gap: 6px; padding: 11px 13px; border-bottom: 1px solid var(--rule); }
#joinos-bell-compose .txt {
width: 100%; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm);
color: var(--fg); font-family: var(--j); font-size: 12px; padding: 8px 10px; outline: none;
}
#joinos-bell-compose textarea.txt { min-height: 52px; resize: vertical; }
#joinos-bell-compose .tier-btn {
background: var(--fg); color: var(--bg); border: none; border-radius: var(--radius-sm);
font-family: var(--j); font-size: 12px; font-weight: 600; padding: 7px 14px; cursor: pointer;
}
#joinos-bell-drop .bell-item { padding: 11px 13px; border-bottom: 1px solid var(--rule); display: flex; gap: 9px; }
#joinos-bell-drop .bell-item:last-child { border-bottom: none; }
#joinos-bell-drop .bell-item.unread { background: linear-gradient(90deg, rgba(245,244,240,.05), transparent); }
[data-theme="light"] #joinos-bell-drop .bell-item.unread { background: linear-gradient(90deg, rgba(10,10,10,.04), transparent); }
#joinos-bell-drop .bell-emoji { font-size: 16px; line-height: 1.3; flex-shrink: 0; }
#joinos-bell-drop .bell-body { min-width: 0; flex: 1; }
#joinos-bell-drop .bell-t { font-size: 12.5px; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 6px; }
#joinos-bell-drop .bell-new {
font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
background: var(--fg); color: var(--bg); border-radius: 8px; padding: 1px 5px;
}
#joinos-bell-drop .bell-d { font-size: 9.5px; color: var(--muted); margin-top: 1px; }
#joinos-bell-drop .bell-x { font-size: 12px; line-height: 1.5; color: var(--fg); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }
#joinos-bell-drop .bell-del { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 11px; align-self: flex-start; margin-top: 4px; }
#joinos-bell-drop .bell-del:hover { color: #e05a2a; }
/* ── LAUNCHER DE APPS (waffle 3×3) — montado por /brand/join-os.js ────────────
Markup injetado em
. Pula entre os produtos JOIN',
no estilo do app-switcher do Google. Theme-aware, mesmo visual do sino. */
/* Fallbacks (var(--x, …)) deixam o launcher funcionar tanto nos apps do /brand
(que têm --s/--radius/--shadow/--ease) quanto nos apps antigos (que usam
--surface e não definem raio/sombra) — sem precisar tocar no tema de cada um. */
.joinos-launcher-wrap { position: relative; }
#joinos-launcher-btn {
background: none; border: none; cursor: pointer; color: var(--fg, #f5f4f0);
padding: 6px; border-radius: 8px; line-height: 0; transition: background var(--ease, .25s ease);
}
#joinos-launcher-btn:hover { background: var(--faint, rgba(128,128,128,.18)); }
#joinos-launcher-btn svg { width: 20px; height: 20px; display: block; }
#joinos-launcher-drop {
display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 1000;
width: 300px; max-width: 92vw; padding: 10px;
background: var(--s, var(--surface, #141414));
border: 1px solid var(--rule, rgba(128,128,128,.2)); border-radius: var(--radius, 14px);
box-shadow: var(--shadow, 0 8px 40px rgba(0,0,0,.4)); font-family: var(--j, system-ui, sans-serif);
}
#joinos-launcher-drop.open { display: block; animation: joinosDropIn .16s ease; }
.joinos-launcher-head {
font-size: 11px; font-weight: 600; color: var(--muted, rgba(128,128,128,.7));
text-transform: uppercase; letter-spacing: .08em; padding: 4px 6px 8px;
}
.joinos-launcher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.joinos-launcher-tile {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 12px 6px; border-radius: var(--radius-sm, 10px); text-decoration: none;
color: var(--fg, #f5f4f0); transition: background var(--ease, .25s ease);
}
.joinos-launcher-tile:hover { background: var(--faint, rgba(128,128,128,.18)); }
.joinos-launcher-tile.current { background: var(--faint, rgba(128,128,128,.18)); outline: 1px solid var(--rule, rgba(128,128,128,.2)); }
.joinos-launcher-ic { font-size: 22px; line-height: 1; }
.joinos-launcher-nm { font-size: 11px; text-align: center; line-height: 1.2; }
/* ── PRESENÇA LIVE (avatares de quem está online) — montado por join-os.js ──── */
.joinos-presence { display: flex; align-items: center; }
.joinos-pre-av, .joinos-pre-more {
width: 26px; height: 26px; border-radius: 50%; margin-left: -7px; flex: none;
border: 2px solid var(--bg, #0a0a0a); display: flex; align-items: center; justify-content: center;
font-family: var(--j, system-ui, sans-serif); font-size: 10px; font-weight: 600; color: #fff;
position: relative; overflow: hidden;
}
.joinos-presence > :first-child { margin-left: 0; }
.joinos-pre-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.joinos-pre-more { background: var(--s, var(--surface, #1a1a1a)); color: var(--muted, #999); font-size: 9px; }
/* ── Launcher: link de admin "gerenciar acessos" + modal (Edge Function app-access) ── */
.joinos-launcher-manage {
width: 100%; margin-top: 8px; padding: 8px; border: 1px solid var(--rule, rgba(128,128,128,.2));
border-radius: var(--radius-sm, 10px); background: none; cursor: pointer;
color: var(--muted, #999); font-family: var(--j, sans-serif); font-size: 11px;
}
.joinos-launcher-manage:hover { color: var(--fg, #fff); background: var(--faint, rgba(128,128,128,.15)); }
.joinos-aa-bg { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 20px; }
.joinos-aa {
width: min(380px, 96vw); max-height: 88vh; overflow: auto; padding: 20px;
background: var(--s, var(--surface, #141414)); border: 1px solid var(--rule, rgba(128,128,128,.2));
border-radius: var(--radius, 14px); box-shadow: var(--shadow, 0 8px 40px rgba(0,0,0,.5));
font-family: var(--j, sans-serif); color: var(--fg, #f5f4f0);
}
.joinos-aa-h { font-size: 15px; font-weight: 600; }
.joinos-aa-sub { font-size: 11.5px; color: var(--muted, #999); margin: 4px 0 12px; line-height: 1.4; }
.joinos-aa-row { display: flex; gap: 6px; margin-bottom: 12px; }
.joinos-aa-in { flex: 1; padding: 9px 10px; border: 1px solid var(--rule, rgba(128,128,128,.2)); border-radius: var(--radius-sm, 10px); background: var(--bg, #0a0a0a); color: var(--fg, #fff); font-family: var(--j, sans-serif); font-size: 13px; }
.joinos-aa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.joinos-aa-chk { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 7px 8px; border: 1px solid var(--rule, rgba(128,128,128,.2)); border-radius: 8px; cursor: pointer; }
.joinos-aa-msg { min-height: 16px; font-size: 11.5px; color: var(--muted, #999); margin: 10px 0; }
.joinos-aa-foot { display: flex; gap: 8px; justify-content: flex-end; }
.joinos-aa-btn, .joinos-aa-btn2 { padding: 9px 16px; border-radius: var(--radius-sm, 10px); font-family: var(--j, sans-serif); font-size: 13px; font-weight: 600; cursor: pointer; }
.joinos-aa-btn { background: var(--fg, #f5f4f0); color: var(--bg, #0a0a0a); border: none; }
.joinos-aa-btn2 { background: none; color: var(--fg, #fff); border: 1px solid var(--rule, rgba(128,128,128,.2)); }
/* ── FEEDBACK & NPS (💬) — montado por join-os.js ──────────────────────────── */
.joinos-fb-wrap { position: relative; }
#joinos-fb-btn { background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; color: var(--fg, #fff); padding: 6px; border-radius: 8px; transition: background var(--ease, .25s ease); }
#joinos-fb-btn:hover { background: var(--faint, rgba(128,128,128,.18)); }
#joinos-fb-drop {
display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000;
width: min(300px, 92vw); padding: 14px;
background: var(--s, var(--surface, #141414)); border: 1px solid var(--rule, rgba(128,128,128,.2));
border-radius: var(--radius, 14px); box-shadow: var(--shadow, 0 8px 40px rgba(0,0,0,.5)); font-family: var(--j, sans-serif);
}
#joinos-fb-drop.open { display: block; animation: joinosDropIn .16s ease; }
.joinos-fb-head { font-size: 13px; font-weight: 600; color: var(--fg, #fff); }
.joinos-fb-q { font-size: 11.5px; color: var(--muted, #999); margin: 8px 0 6px; }
.joinos-fb-nps { display: flex; flex-wrap: wrap; gap: 4px; }
.joinos-fb-n { flex: 1 0 auto; min-width: 22px; padding: 5px 0; font-size: 11px; cursor: pointer; border-radius: 6px; border: 1px solid var(--rule, rgba(128,128,128,.2)); background: none; color: var(--fg, #fff); font-family: var(--j, sans-serif); }
.joinos-fb-n:hover { background: var(--faint, rgba(128,128,128,.18)); }
.joinos-fb-n.on { background: var(--fg, #f5f4f0); color: var(--bg, #0a0a0a); border-color: var(--fg, #f5f4f0); }
.joinos-fb-kind { display: flex; gap: 6px; margin: 10px 0 8px; }
.joinos-fb-k { flex: 1; padding: 7px; font-size: 11px; cursor: pointer; border-radius: 8px; border: 1px solid var(--rule, rgba(128,128,128,.2)); background: none; color: var(--muted, #999); font-family: var(--j, sans-serif); }
.joinos-fb-k.on { color: var(--fg, #fff); border-color: var(--fg, #fff); }
.joinos-fb-ta { width: 100%; min-height: 56px; resize: vertical; padding: 9px 10px; border-radius: var(--radius-sm, 10px); border: 1px solid var(--rule, rgba(128,128,128,.2)); background: var(--bg, #0a0a0a); color: var(--fg, #fff); font-family: var(--j, sans-serif); font-size: 12.5px; }
.joinos-fb-send { width: 100%; margin-top: 8px; padding: 9px; border: none; border-radius: var(--radius-sm, 10px); background: var(--fg, #f5f4f0); color: var(--bg, #0a0a0a); font-family: var(--j, sans-serif); font-size: 13px; font-weight: 600; cursor: pointer; }
.joinos-fb-msg { min-height: 15px; font-size: 11px; color: var(--muted, #999); margin-top: 7px; text-align: center; }
/* ── BARRA DE LOADING (topo) — montada por join-os.js ──────────────────────── */
#joinos-loadbar {
position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 9999;
background: transparent; overflow: hidden; opacity: 0; pointer-events: none;
transition: opacity .25s ease;
}
#joinos-loadbar.on { opacity: 1; }
#joinos-loadbar::before {
content: ""; position: absolute; top: 0; height: 100%; width: 40%; left: -40%;
background: linear-gradient(90deg, transparent, var(--signal, #7C6BFF), transparent);
animation: joinosLoadSlide 1.1s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes joinosLoadSlide { 0% { left: -45%; } 100% { left: 100%; } }
/* Divisor opcional "ou e-mail" */
.auth-sep {
display: flex; align-items: center; gap: 12px;
width: 100%; color: var(--faint); font-size: 12px; margin: 4px 0;
}
.auth-sep::before, .auth-sep::after {
content: ""; flex: 1; height: 1px; background: var(--rule);
}
/* ── SHELL POR JORNADA (macro-arquitetura §13) — montado por JoinOS.initShell ──
Moldura única: sidebar por jornada + topbar (brand switcher + ⌘K) + conteúdo.
Theme-aware via vars de /brand/tokens.css (--bg/--fg/--muted/--rule/--j/--signal). */
.joinos-shell { display: flex; height: 100vh; overflow: hidden; font-family: var(--j, system-ui, sans-serif); color: var(--fg, #f5f4f0); background: var(--bg, #0a0a0a); }
.joinos-shell.nav-collapsed .joinos-shell-side { display: none; }
.joinos-shell-side { width: 238px; flex-shrink: 0; box-sizing: border-box; border-right: 1px solid var(--rule, rgba(128,128,128,.2)); padding: 14px 10px 18px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.joinos-shell-brand { display: flex; align-items: center; gap: 9px; padding: 2px 6px 8px; }
.joinos-shell-bwrap { position: relative; flex: 1; min-width: 0; }
.joinos-shell-bsw { width: 100%; display: flex; align-items: center; gap: 7px; padding: 5px 7px; background: none; border: 1px solid var(--rule, rgba(128,128,128,.2)); border-radius: 9px; color: var(--fg, #fff); font-family: inherit; font-size: 12.5px; cursor: pointer; }
.joinos-shell-bsw:hover { background: var(--faint, rgba(128,128,128,.12)); }
.joinos-shell-bdot { width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px; background: var(--signal, #7C6BFF); color: #fff; font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.joinos-shell-bnm { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.joinos-shell-cv { color: var(--muted, #999); font-size: 10px; }
.joinos-shell-bdrop { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: var(--s, var(--surface, #141414)); border: 1px solid var(--rule, rgba(128,128,128,.2)); border-radius: 10px; padding: 5px; box-shadow: var(--shadow, 0 8px 40px rgba(0,0,0,.5)); }
.joinos-shell-bdrop.open { display: block; }
.joinos-shell-bopt { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: none; border: 0; border-radius: 7px; color: var(--fg, #fff); font-family: inherit; font-size: 12.5px; cursor: pointer; }
.joinos-shell-bopt:hover { background: var(--faint, rgba(128,128,128,.14)); }
.joinos-shell-k { display: flex; align-items: center; gap: 8px; margin: 0 6px 6px; padding: 7px 9px; background: var(--faint, rgba(128,128,128,.1)); border: 1px solid var(--rule, rgba(128,128,128,.18)); border-radius: 9px; color: var(--muted, #999); font-family: inherit; font-size: 12px; cursor: pointer; }
.joinos-shell-k:hover { border-color: var(--fg, #fff); color: var(--fg, #fff); }
.joinos-shell-kq { flex: 1; text-align: left; }
.joinos-shell-k kbd { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; padding: 1px 5px; border: 1px solid var(--rule, rgba(128,128,128,.3)); border-radius: 5px; }
.joinos-shell-nav { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; }
.joinos-shell-grp { width: 100%; display: flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted, #888); padding: 13px 10px 4px; transition: color .12s ease; }
.joinos-shell-grp:hover { color: var(--fg, #fff); }
.joinos-shell-grpcv { margin-left: auto; font-size: 9px; opacity: .5; transition: transform .16s ease, opacity .12s ease; }
.joinos-shell-grp:hover .joinos-shell-grpcv { opacity: 1; }
.joinos-shell-grpwrap.collapsed .joinos-shell-grpcv { transform: rotate(-90deg); }
.joinos-shell-grpitems { overflow: hidden; }
.joinos-shell-grpwrap.collapsed .joinos-shell-grpitems { display: none; }
.joinos-shell-it { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; color: var(--muted, #aaa); text-decoration: none; font-size: 13px; cursor: pointer; transition: opacity .12s ease; }
.joinos-shell-it.dim, .joinos-shell-subit.dim { opacity: .4; }
.joinos-shell-it.dim:hover, .joinos-shell-subit.dim:hover { opacity: .8; }
.joinos-shell-it.dim.on, .joinos-shell-subit.dim.on { opacity: 1; }
.joinos-shell-it:hover { background: var(--faint, rgba(128,128,128,.12)); color: var(--fg, #fff); }
.joinos-shell-it.on { background: var(--faint, rgba(128,128,128,.16)); color: var(--fg, #fff); }
.joinos-shell-it.on .joinos-shell-lb { font-weight: 600; }
.joinos-shell-ith { color: var(--fg, #f0f0f0); margin-bottom: 2px; }
.joinos-shell-ic { width: 18px; flex-shrink: 0; text-align: center; font-size: 14px; }
.joinos-shell-lb { flex: 1; }
.joinos-shell-soon { font-size: 9px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted, #888); border: 1px solid var(--rule, rgba(128,128,128,.25)); border-radius: 5px; padding: 1px 4px; }
.joinos-shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.joinos-shell-top { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--rule, rgba(128,128,128,.2)); flex-shrink: 0; }
.joinos-shell-burger { display: inline-flex; align-items: center; background: none; border: 0; color: var(--muted, #999); font-size: 18px; cursor: pointer; padding: 0 4px; }
.joinos-shell-burger:hover { color: var(--fg, #fff); }
.joinos-shell-side { transition: none; }
.joinos-shell-crumb { flex: 1; font-size: 13px; color: var(--muted, #aaa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.joinos-shell-crumb b { color: var(--fg, #fff); font-weight: 600; }
.joinos-shell-sep { color: var(--muted, #777); margin: 0 7px; }
.joinos-shell-actions { display: flex; align-items: center; gap: 10px; }
.joinos-shell-content { flex: 1; min-height: 0; overflow: auto; position: relative; }
.joinos-shell-frame { width: 100%; height: 100%; border: 0; display: block; }
/* command palette ⌘K */
.joinos-k-bg { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.45); padding-top: 12vh; justify-content: center; }
.joinos-k-bg.on { display: flex; }
.joinos-k { width: min(560px, 92vw); height: max-content; max-height: 60vh; display: flex; flex-direction: column; background: var(--s, var(--surface, #161616)); border: 1px solid var(--rule, rgba(128,128,128,.25)); border-radius: 14px; box-shadow: var(--shadow, 0 12px 50px rgba(0,0,0,.6)); overflow: hidden; }
.joinos-k-in { padding: 15px 18px; background: none; border: 0; border-bottom: 1px solid var(--rule, rgba(128,128,128,.2)); color: var(--fg, #fff); font-family: var(--j, sans-serif); font-size: 15px; outline: none; }
.joinos-k-list { overflow-y: auto; padding: 6px; }
.joinos-k-row { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--fg, #eee); }
.joinos-k-row.on { background: var(--signal, #7C6BFF); color: #fff; }
.joinos-k-ic { width: 18px; text-align: center; flex-shrink: 0; }
.joinos-k-lb { flex: 1; }
.joinos-k-sp { font-size: 11px; color: var(--muted, #999); }
.joinos-k-row.on .joinos-k-sp { color: rgba(255,255,255,.8); }
.joinos-k-empty { padding: 22px; text-align: center; color: var(--muted, #999); font-size: 13px; }
@media (max-width: 760px) {
.joinos-shell-side { position: fixed; z-index: 50; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s ease; background: var(--bg, #0a0a0a); width: 270px; }
.joinos-shell.nav-open .joinos-shell-side { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,.6); }
.joinos-shell-burger { display: block; }
}
/* shell — subtítulo no item, frame, placeholder e página de fase */
.joinos-shell-subt { display: block; font-size: 10.5px; color: var(--muted, #888); margin-top: 1px; }
.joinos-shell-frwrap { position: relative; height: 100%; overflow: hidden; }
.joinos-shell-frnote { position: absolute; top: 8px; right: 12px; z-index: 5; font-size: 11px; color: var(--muted, #999); background: var(--s, rgba(20,20,20,.85)); border: 1px solid var(--rule, rgba(128,128,128,.2)); border-radius: 7px; padding: 3px 8px; }
.joinos-shell-soonpg { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; min-height: 420px; padding: 40px; }
.joinos-shell-soonpg .ic { font-size: 40px; margin-bottom: 14px; }
.joinos-shell-soonpg h2 { font-family: var(--os, var(--j)); font-size: 24px; margin: 0 0 6px; color: var(--fg, #fff); }
.joinos-shell-soonpg .tag { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted, #888); border: 1px solid var(--rule, rgba(128,128,128,.25)); border-radius: 6px; padding: 2px 8px; margin-bottom: 16px; }
.joinos-shell-soonpg p { color: var(--muted, #aaa); font-size: 14px; max-width: 440px; line-height: 1.6; margin: 0; }
/* protótipo fictício (demo) — tela existe, sinalizada como demo */
.joinos-shell-demopg { padding: 30px clamp(18px, 4vw, 44px); max-width: 760px; }
.joinos-shell-demopg .dh { display: flex; align-items: center; gap: 13px; }
.joinos-shell-demopg .dico { font-size: 24px; width: 30px; text-align: center; opacity: .85; }
.joinos-shell-demopg .dtag { display: inline-block; font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: var(--signal, #7C6BFF); border: 1px solid var(--signal, #7C6BFF); border-radius: 6px; padding: 2px 8px; }
.joinos-shell-demopg h2 { font-family: var(--os, var(--j)); font-size: clamp(20px, 3vw, 26px); margin: 7px 0 0; color: var(--fg, #fff); font-weight: 500; }
.joinos-shell-demopg .dd { color: var(--muted, #999); font-size: 14px; line-height: 1.6; margin: 14px 0 0; max-width: 560px; }
.joinos-shell-demopg .dkpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 24px 0 18px; }
.joinos-shell-demopg .dk { border: 1px solid var(--rule, rgba(128,128,128,.16)); border-radius: 13px; padding: 13px 15px; }
.joinos-shell-demopg .dkk { font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted, #888); }
.joinos-shell-demopg .dkv { font-family: var(--os, var(--j)); font-size: 24px; color: var(--fg, #eee); margin-top: 5px; }
.joinos-shell-demopg .dkv span { font-size: 12px; color: var(--muted, #999); margin-left: 3px; }
.joinos-shell-demopg .dchart { border: 1px solid var(--rule, rgba(128,128,128,.16)); border-radius: 14px; padding: 16px; }
.joinos-shell-demopg .dnote { margin-top: 16px; font-size: 12.5px; color: var(--muted, #888); border-left: 2px solid var(--signal, #7C6BFF); padding-left: 12px; line-height: 1.55; }
.joinos-shell-phase { padding: 28px clamp(18px, 4vw, 44px); max-width: 920px; }
.joinos-shell-phase .ph-h h2 { font-family: var(--os, var(--j)); font-size: clamp(21px, 3vw, 27px); margin: 0 0 4px; color: var(--fg, #fff); }
.joinos-shell-phase .ph-h p { color: var(--muted, #999); font-size: 14px; margin: 0 0 22px; }
.joinos-shell-phase .ph-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.joinos-shell-phase .ph-card { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px; border: 1px solid var(--rule, rgba(128,128,128,.16)); border-radius: 13px; text-decoration: none; color: var(--fg, #eee); cursor: pointer; }
.joinos-shell-phase .ph-card:hover { border-color: var(--fg, #fff); }
.joinos-shell-phase .ph-card.demo { opacity: .5; }
.joinos-shell-phase .ph-card.demo:hover { opacity: 1; }
.joinos-shell-phase .ph-ic { font-size: 20px; width: 24px; flex-shrink: 0; text-align: center; }
.joinos-shell-phase .ph-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.joinos-shell-phase .ph-t { font-size: 14.5px; font-weight: 600; }
.joinos-shell-phase .ph-bdg { font-size: 9px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted, #888); border: 1px solid var(--rule, rgba(128,128,128,.25)); border-radius: 5px; padding: 1px 4px; font-weight: 400; vertical-align: middle; }
.joinos-shell-phase .ph-d { font-size: 12px; color: var(--muted, #999); line-height: 1.45; }
/* embed: o app MANTÉM a própria navbar dentro do shell (metodologia, atualizações, PT/EN
do produto). Some só o wordmark JOIN' duplicado — a marca já está no topo do shell. */
html.joinos-embed #gnav .joinos-logo,
html.joinos-embed #gnav .joinos,
html.joinos-embed #gnav .wordmark,
html.joinos-embed #gnav #avChip,
html.joinos-embed #gnav #bellBtn,
html.joinos-embed #gnav .lang-toggle,
html.joinos-embed #gnav .tgl,
html.joinos-embed #gnav [onclick*="toggleTheme"],
html.joinos-embed #gnav [onclick*="toggleLang"] { display: none !important; }
.joinos-shell-frnote.demo { color: var(--signal, #7C6BFF); border-color: var(--signal, #7C6BFF); }
.joinos-shell-phase .ph-bdg.ph-demo { color: var(--signal, #7C6BFF); border-color: var(--signal, #7C6BFF); }
/* shell — workspace com abas internas (ex.: Criação = Genome+Engine+Scripter num lugar só) */
.joinos-ws { display: flex; flex-direction: column; height: 100%; }
.joinos-ws-bar { display: flex; gap: 2px; padding: 8px 14px 0; border-bottom: 1px solid var(--rule, rgba(128,128,128,.2)); flex-shrink: 0; overflow-x: auto; }
.joinos-ws-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; font-size: 12.5px; color: var(--muted, #999); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; }
.joinos-ws-tab:hover { color: var(--fg, #fff); }
.joinos-ws-tab.on { color: var(--fg, #fff); border-bottom-color: var(--fg, #fff); font-weight: 600; }
.joinos-ws-body { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.joinos-ws-frame { width: 100%; height: 100%; border: 0; display: block; }
/* shell — sidebar accordion (toggles) + topbar features */
.joinos-shell-item { display: flex; flex-direction: column; }
.joinos-shell-chev { margin-left: auto; font-size: 11px; color: var(--muted, #888); cursor: pointer; padding: 5px 7px; margin-right: -7px; border-radius: 6px; transition: transform .15s ease, background .12s ease, color .12s ease; }
.joinos-shell-chev:hover { color: var(--fg, #fff); background: var(--faint, rgba(128,128,128,.18)); }
.joinos-shell-item.open > .joinos-shell-it .joinos-shell-chev { transform: rotate(90deg); }
.joinos-shell-subwrap { display: none; flex-direction: column; gap: 1px; margin: 1px 0 5px 25px; padding-left: 7px; border-left: 1px solid var(--rule, rgba(128,128,128,.18)); }
.joinos-shell-item.open .joinos-shell-subwrap { display: flex; }
.joinos-shell-subit { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 7px; color: var(--muted, #aaa); text-decoration: none; font-size: 12px; cursor: pointer; }
.joinos-shell-subit:hover { color: var(--fg, #fff); background: var(--faint, rgba(128,128,128,.1)); }
.joinos-shell-subit.on { color: var(--fg, #fff); background: var(--faint, rgba(128,128,128,.16)); font-weight: 600; }
.joinos-shell-subic { font-size: 12px; width: 14px; text-align: center; flex-shrink: 0; }
.joinos-shell-actions { display: flex; align-items: center; gap: 8px; }
.joinos-shell-actions > div { display: flex; align-items: center; }
.joinos-shell-tgl { background: none; border: 0; color: var(--muted, #999); font-size: 16px; cursor: pointer; padding: 2px 4px; line-height: 1; }
.joinos-shell-tgl:hover { color: var(--fg, #fff); }
/* shell — módulo de documentos (upload → render → editar) */
.joinos-doc { display: flex; height: 100%; min-height: 0; }
.joinos-doc-side { width: 260px; flex-shrink: 0; border-right: 1px solid var(--rule, rgba(128,128,128,.2)); display: flex; flex-direction: column; min-height: 0; }
.joinos-doc-drop { margin: 14px; padding: 18px 14px; border: 1.5px dashed var(--rule, rgba(128,128,128,.3)); border-radius: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 12px; color: var(--muted, #999); cursor: pointer; }
.joinos-doc-drop:hover, .joinos-doc-drop.over { border-color: var(--signal, #7C6BFF); color: var(--fg, #fff); background: var(--faint, rgba(124,107,255,.08)); }
.joinos-doc-drop .jd-ic { font-size: 22px; }
.joinos-doc-list { flex: 1; overflow-y: auto; padding: 0 8px 12px; min-height: 0; }
.joinos-doc-emptylist { padding: 16px; font-size: 12px; color: var(--muted, #888); text-align: center; }
.joinos-doc-item { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 10px; margin-bottom: 3px; background: none; border: 0; border-radius: 9px; color: var(--fg, #eee); cursor: pointer; text-align: left; font-family: var(--j, sans-serif); }
.joinos-doc-item:hover { background: var(--faint, rgba(128,128,128,.1)); }
.joinos-doc-item.on { background: var(--faint, rgba(128,128,128,.18)); }
.jd-it-ic { font-size: 16px; flex-shrink: 0; }
.jd-it-tx { display: flex; flex-direction: column; min-width: 0; }
.jd-it-t { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jd-it-d { font-size: 10.5px; color: var(--muted, #888); }
.joinos-doc-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.joinos-doc-edit { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--rule, rgba(128,128,128,.15)); flex-wrap: wrap; }
.joinos-doc-in { flex: 1; min-width: 140px; font-family: var(--j, sans-serif); font-size: 14px; background: var(--bg, #0a0a0a); color: var(--fg, #fff); border: 1px solid var(--rule, rgba(128,128,128,.25)); border-radius: 8px; padding: 8px 11px; }
.joinos-doc-btn { font-family: var(--j, sans-serif); font-size: 12.5px; padding: 8px 14px; border-radius: 8px; border: 0; background: var(--fg, #f5f4f0); color: var(--bg, #0a0a0a); font-weight: 600; cursor: pointer; }
.joinos-doc-btn.ghost { background: none; border: 1px solid var(--rule, rgba(128,128,128,.3)); color: var(--fg, #fff); font-weight: 400; }
.joinos-doc-btn.danger { background: none; border: 1px solid var(--rule, rgba(128,128,128,.3)); color: var(--danger, #E24B4A); font-weight: 400; }
.joinos-doc-btn.ghost:hover, .joinos-doc-btn.danger:hover { border-color: currentColor; }
.joinos-doc-msg { font-size: 12px; color: var(--muted, #999); }
.joinos-doc-view { flex: 1; min-height: 0; background: var(--bg, #0a0a0a); }
.joinos-doc-frame { width: 100%; height: 100%; border: 0; display: block; }
.joinos-doc-imgwrap { width: 100%; height: 100%; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 16px; box-sizing: border-box; }
.joinos-doc-imgwrap img { max-width: 100%; border-radius: 8px; }
.joinos-doc-notes { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; border: 0; border-top: 1px solid var(--rule, rgba(128,128,128,.15)); background: var(--bg, #0a0a0a); color: var(--fg, #fff); font-family: var(--j, sans-serif); font-size: 13px; padding: 12px 16px; }
.joinos-doc-blank { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 8px; color: var(--muted, #999); text-align: center; padding: 30px; }
.joinos-doc-blank .jd-ic-lg { font-size: 44px; opacity: .7; }
.joinos-doc-blank .jd-muted { font-size: 12px; }
@media (max-width: 720px) { .joinos-doc { flex-direction: column; } .joinos-doc-side { width: auto; border-right: 0; border-bottom: 1px solid var(--rule, rgba(128,128,128,.2)); } }
/* shell — bloco de notas do time (drawer no topbar) */
.joinos-notes-wrap { position: relative; }
#joinos-notes-btn { background: none; border: 0; color: var(--muted, #999); font-size: 15px; cursor: pointer; padding: 2px 4px; line-height: 1; }
#joinos-notes-btn:hover { color: var(--fg, #fff); }
#joinos-notes-drop { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: min(320px, 90vw); padding: 14px; background: var(--s, var(--surface, #141414)); border: 1px solid var(--rule, rgba(128,128,128,.2)); border-radius: var(--radius, 14px); box-shadow: var(--shadow, 0 8px 40px rgba(0,0,0,.5)); }
#joinos-notes-drop.open { display: block; }
.joinos-notes-h { font-size: 13px; font-weight: 600; color: var(--fg, #fff); margin-bottom: 8px; }
.joinos-notes-ta { width: 100%; box-sizing: border-box; min-height: 160px; resize: vertical; padding: 10px 11px; border-radius: var(--radius-sm, 10px); border: 1px solid var(--rule, rgba(128,128,128,.2)); background: var(--bg, #0a0a0a); color: var(--fg, #fff); font-family: var(--j, sans-serif); font-size: 13px; line-height: 1.5; }
.joinos-notes-msg { min-height: 14px; font-size: 11px; color: var(--muted, #999); margin-top: 6px; text-align: right; }
/* shell — ✦ assistente global (conversacional) */
.joinos-as-wrap { position: relative; }
#joinos-as-btn { background: none; border: 0; color: var(--signal, #7C6BFF); font-size: 17px; cursor: pointer; padding: 2px 5px; line-height: 1; }
#joinos-as-btn:hover { filter: brightness(1.2); }
#joinos-as-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; width: min(390px, 92vw); height: 70vh; max-height: 540px; flex-direction: column; background: var(--s, var(--surface, #141414)); border: 1px solid var(--rule, rgba(128,128,128,.2)); border-radius: 14px; box-shadow: var(--shadow, 0 12px 50px rgba(0,0,0,.55)); overflow: hidden; }
#joinos-as-panel.open { display: flex; }
.joinos-as-h { padding: 13px 15px; border-bottom: 1px solid var(--rule, rgba(128,128,128,.18)); font-size: 13px; font-weight: 600; color: var(--fg, #fff); flex-shrink: 0; }
.joinos-as-ctx { font-weight: 400; color: var(--muted, #999); font-size: 12px; }
.joinos-as-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.joinos-as-m { font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; max-width: 88%; padding: 9px 12px; border-radius: 12px; }
.joinos-as-m.u { align-self: flex-end; background: var(--signal, #7C6BFF); color: #fff; }
.joinos-as-m.b { align-self: flex-start; background: var(--faint, rgba(128,128,128,.14)); color: var(--fg, #eee); }
.joinos-as-c { display: flex; gap: 8px; padding: 11px; border-top: 1px solid var(--rule, rgba(128,128,128,.18)); flex-shrink: 0; }
.joinos-as-c input { flex: 1; background: var(--bg, #0a0a0a); color: var(--fg, #fff); border: 1px solid var(--rule, rgba(128,128,128,.25)); border-radius: 10px; padding: 10px 12px; font-family: var(--j, sans-serif); font-size: 13.5px; outline: none; }
.joinos-as-c button { width: 38px; flex-shrink: 0; border: 0; border-radius: 10px; background: var(--fg, #f5f4f0); color: var(--bg, #0a0a0a); font-size: 16px; cursor: pointer; }
.joinos-shell-lang { font-size: 12px; font-weight: 600; letter-spacing: .3px; }
/* shell — assinatura de alertas (§15): botão no topbar + modal dos 4 eixos */
.joinos-al-wrap { display: inline-flex; }
#joinos-al-btn { background: none; border: 0; color: var(--muted, #999); font-size: 16px; cursor: pointer; padding: 4px 5px; line-height: 1; }
#joinos-al-btn:hover { color: var(--signal, #7C6BFF); }
.joinos-al-emo { font-size: 15px; line-height: 1; display: inline-block; }
/* per-widget: chip 📥 que aparece no hover de qualquer [data-joinos-alert] */
.joinos-al-chip { position: absolute; top: 6px; right: 6px; z-index: 6; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px; background: rgba(124, 107, 255, .12); color: inherit; cursor: pointer; font-size: 13px; line-height: 1; opacity: 0; transition: opacity .15s, background .15s; }
[data-joinos-alert]:hover > .joinos-al-chip, .joinos-al-chip:focus-visible { opacity: 1; }
.joinos-al-chip:hover { background: rgba(124, 107, 255, .28); }
.joinos-al-bg { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 20px; }
.joinos-al { width: min(460px, 94vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--s, var(--surface, #161616)); border: 1px solid var(--rule, rgba(128,128,128,.25)); border-radius: 16px; box-shadow: var(--shadow, 0 16px 60px rgba(0,0,0,.6)); overflow: hidden; font-family: var(--j, sans-serif); }
.joinos-al-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rule, rgba(128,128,128,.2)); font-size: 14px; font-weight: 600; color: var(--fg, #fff); }
.joinos-al-tabs { margin-left: auto; display: flex; gap: 4px; }
.joinos-al-tab { background: none; border: 0; color: var(--muted, #999); font-family: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.joinos-al-tab.on { background: var(--faint, rgba(128,128,128,.16)); color: var(--fg, #fff); }
.joinos-al-x { background: none; border: 0; color: var(--muted, #999); font-size: 15px; cursor: pointer; padding: 4px; }
.joinos-al-body { padding: 14px 16px; overflow-y: auto; }
.joinos-al-f { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.joinos-al-lb { font-size: 11.5px; color: var(--muted, #aaa); }
.joinos-al-in { width: 100%; box-sizing: border-box; font-family: var(--j, sans-serif); font-size: 13.5px; background: var(--bg, #0a0a0a); color: var(--fg, #fff); border: 1px solid var(--rule, rgba(128,128,128,.25)); border-radius: 9px; padding: 9px 11px; outline: none; }
.joinos-al-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.joinos-al-row2 .joinos-al-f { margin-bottom: 12px; }
.joinos-al-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.joinos-al-msg { flex: 1; font-size: 12px; color: var(--muted, #999); }
.joinos-al-save { background: var(--fg, #f5f4f0); color: var(--bg, #0a0a0a); border: 0; border-radius: 9px; font-family: var(--j, sans-serif); font-size: 13px; font-weight: 600; padding: 9px 16px; cursor: pointer; }
.joinos-al-item { padding: 11px 12px; border: 1px solid var(--rule, rgba(128,128,128,.18)); border-radius: 11px; margin-bottom: 8px; }
.joinos-al-item.off { opacity: .55; }
.joinos-al-it-t { font-size: 13px; font-weight: 600; color: var(--fg, #fff); }
.joinos-al-it-d { font-size: 11.5px; color: var(--muted, #999); margin-top: 2px; }
.joinos-al-it-x { display: flex; gap: 8px; margin-top: 8px; }
.joinos-al-it-x button { background: none; border: 1px solid var(--rule, rgba(128,128,128,.3)); color: var(--muted, #bbb); border-radius: 7px; font-family: var(--j, sans-serif); font-size: 11.5px; padding: 4px 10px; cursor: pointer; }
.joinos-al-it-x button:hover { color: var(--fg, #fff); border-color: var(--fg, #fff); }
.joinos-al-empty, .joinos-al-loading { padding: 24px; text-align: center; color: var(--muted, #999); font-size: 13px; }