/* ==========================================================================
   Vibers v0.17 — the team chat with the "Vibs" (the agents' little characters),
   light + dark. Default agent colours here; each viber can recolour/rename them
   (Agentes vibs) → /agents/theme.css overrides these classes.
   ========================================================================== */

.sf-agent-strategy { --agent: #eab308; --agent-2: #713f12; --agent-soft: rgba(234, 179, 8, .16); }
.sf-agent-design { --agent: #ec4899; --agent-2: #831843; --agent-soft: rgba(236, 72, 153, .16); }
.sf-agent-code { --agent: #22c55e; --agent-2: #0e5227; --agent-soft: rgba(34, 197, 94, .16); }
.sf-agent-marketing { --agent: #f97316; --agent-2: #7c2d12; --agent-soft: rgba(249, 115, 22, .16); }
.sf-agent-support { --agent: #14b8a6; --agent-2: #084d46; --agent-soft: rgba(20, 184, 166, .16); }
.sf-agent-sales { --agent: #a855f7; --agent-2: #462467; --agent-soft: rgba(168, 85, 247, .16); }
.sf-agent-finance { --agent: #0ea5e9; --agent-2: #0c4a6e; --agent-soft: rgba(14, 165, 233, .16); }
.sf-agent-designer { --agent: #d946ef; --agent-2: #5b1a63; --agent-soft: rgba(217, 70, 239, .16); }

/* ---------- The Vib: rounded square + two tilted pill eyes ---------- */
.sf-vib { --s: 40px; position: relative; display: inline-block; flex: 0 0 auto; width: var(--s); height: var(--s); border-radius: 30%;
    background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--agent) 72%, #fff), var(--agent) 58%, color-mix(in srgb, var(--agent) 78%, #000));
    box-shadow: inset 0 calc(var(--s) * -.07) 0 rgba(0, 0, 0, .16), 0 calc(var(--s) * .12) calc(var(--s) * .3) color-mix(in srgb, var(--agent) 32%, transparent); }
.sf-vib-eyes { position: absolute; inset: 0; }
.sf-vib-eye { position: absolute; top: 31%; width: 12%; height: 32%; border-radius: 99px; background: #fff; transform: rotate(-16deg); transform-origin: 50% 50%; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.sf-vib-eye:nth-child(1) { left: 33%; }
.sf-vib-eye:nth-child(2) { left: 55%; }
.sf-vib-dots { position: absolute; right: -14%; top: -18%; display: none; gap: 2px; padding: 3px 5px; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.sf-vib-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--agent); animation: sf-cdot 1.2s infinite ease-in-out; }
.sf-vib-dots i:nth-child(2) { animation-delay: .15s; }
.sf-vib-dots i:nth-child(3) { animation-delay: .3s; }

/* Alive (team panel, Agentes vibs page): look around, blink and hop now and then */
.sf-vib.is-live { animation: sf-vib-hop 7s ease-in-out infinite; }
.sf-vib.is-live .sf-vib-eyes { animation: sf-vib-look 9s ease-in-out infinite; }
.sf-vib.is-live .sf-vib-eye { animation: sf-vib-blink 4.6s infinite; }
.sf-agent-design .sf-vib.is-live, .sf-agent-design.sf-vib.is-live { animation-delay: -2.2s; }
.sf-agent-code .sf-vib.is-live, .sf-agent-code.sf-vib.is-live { animation-delay: -4.1s; }
.sf-agent-marketing .sf-vib.is-live, .sf-agent-marketing.sf-vib.is-live { animation-delay: -5.6s; }
.sf-agent-design .sf-vib.is-live .sf-vib-eyes { animation-delay: -3s; }
.sf-agent-code .sf-vib.is-live .sf-vib-eyes { animation-delay: -6s; }
.sf-agent-marketing .sf-vib.is-live .sf-vib-eyes { animation-delay: -1.5s; }
.sf-agent-code .sf-vib.is-live .sf-vib-eye { animation-delay: -1.7s; }
.sf-agent-marketing .sf-vib.is-live .sf-vib-eye { animation-delay: -3.1s; }
@keyframes sf-vib-hop { 0%, 82%, 100% { transform: translateY(0) scale(1); } 86% { transform: translateY(0) scale(1.07, .9); } 91% { transform: translateY(-24%) scale(.95, 1.06); } 96% { transform: translateY(0) scale(1.05, .95); } }
@keyframes sf-vib-look { 0%, 26% { transform: translateX(0); } 32%, 48% { transform: translateX(-13%); } 54%, 70% { transform: translateX(12%) translateY(-3%); } 76%, 100% { transform: translateX(0); } }
@keyframes sf-vib-blink { 0%, 91%, 100% { transform: rotate(-16deg) scaleY(1); } 94% { transform: rotate(-16deg) scaleY(.08); } }

/* States */
.sf-vib.is-thinking .sf-vib-dots, .sf-vib.is-typing .sf-vib-dots { display: inline-flex; }
.sf-vib.is-thinking .sf-vib-eyes { animation: none; transform: translate(8%, -12%); }
.sf-vib.is-typing { animation: sf-vib-bob .7s ease-in-out infinite; }
.sf-vib.is-typing .sf-vib-eyes { animation: sf-vib-dart .9s ease-in-out infinite; }
@keyframes sf-vib-bob { 50% { transform: translateY(-6%); } }
@keyframes sf-vib-dart { 0%, 100% { transform: translateX(-10%); } 50% { transform: translateX(10%); } }
/* Speaking: smaller eyes and floating */
.sf-vib.is-speaking { animation: sf-vib-float 1.8s ease-in-out infinite; box-shadow: inset 0 calc(var(--s) * -.07) 0 rgba(0, 0, 0, .16), 0 0 0 calc(var(--s) * .06) var(--agent-soft), 0 calc(var(--s) * .3) calc(var(--s) * .4) color-mix(in srgb, var(--agent) 40%, transparent); }
.sf-vib.is-speaking .sf-vib-eyes { animation: none; }
.sf-vib.is-speaking .sf-vib-eye { height: 15%; top: 39%; animation: sf-vib-talk .35s ease-in-out infinite alternate; }
@keyframes sf-vib-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14%) rotate(2deg); } }
@keyframes sf-vib-talk { from { transform: rotate(-16deg) scaleY(.75); } to { transform: rotate(-16deg) scaleY(1.15); } }
.sf-vib.is-sleeping { animation: none; filter: saturate(.55); opacity: .8; }
.sf-vib.is-sleeping .sf-vib-eyes { animation: none; }
.sf-vib.is-sleeping .sf-vib-eye { height: 5%; top: 46%; animation: none; }

/* ---------- Page (light by default, dark when the theme is dark) ---------- */
body.sf-chat-page { --cx-text: #1f1633; --cx-muted: #6b6485; --cx-line: rgba(124, 58, 237, .18); --cx-surface: rgba(255, 255, 255, .78); --cx-input: #fff; --cx-dot: rgba(124, 58, 237, .09);
    background: radial-gradient(900px 600px at 85% 0%, rgba(167, 139, 250, .28), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(236, 72, 153, .10), transparent 60%), linear-gradient(180deg, #faf8ff, #f1ecfd);
    background-attachment: fixed; }
:root[data-theme="dark"] body.sf-chat-page { --cx-text: #f4f0ff; --cx-muted: rgba(233, 227, 255, .6); --cx-line: rgba(167, 139, 250, .25); --cx-surface: rgba(18, 10, 40, .75); --cx-input: rgba(18, 10, 40, .8); --cx-dot: rgba(167, 139, 250, .10);
    background: radial-gradient(900px 600px at 85% 0%, rgba(124, 58, 237, .28), transparent 60%), radial-gradient(800px 600px at 0% 100%, rgba(91, 33, 182, .22), transparent 60%), linear-gradient(180deg, #0a0918, #0d0a1f);
    background-attachment: fixed; }
body.sf-chat-page .sf-main { background-image: radial-gradient(var(--cx-dot) 1px, transparent 1px); background-size: 22px 22px; }
body.sf-chat-page .sf-topbar { background: transparent; }
body.sf-chat-page .sf-content { padding-top: .25rem; padding-bottom: .75rem; }

/* Top bar: back + small editable title */
.sf-topbar-edit { display: flex; align-items: center; gap: .6rem; position: relative; min-width: 0; flex: 0 1 470px; }
.sf-topbar-edit .sf-topbar-back { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--cx-line, var(--sf-border)); display: grid; place-items: center; color: var(--cx-text, var(--sf-ink)); flex: 0 0 auto; }
.sf-chatx-title { width: 100%; min-width: 0; border: 1px solid transparent; background: transparent; border-radius: 10px; padding: .2rem 1.8rem .2rem .4rem; font-size: 1.05rem; font-weight: 800; color: var(--cx-text, var(--sf-ink)); text-overflow: ellipsis; }
.sf-chatx-title:hover { border-color: var(--cx-line, var(--sf-border)); }
.sf-chatx-title:focus { outline: none; border-color: #a78bfa; background: rgba(124, 58, 237, .08); }
.sf-chatx-title::placeholder { color: var(--cx-muted, var(--sf-muted)); }
.sf-chatx-title-pen { flex: 0 0 auto; margin-left: -1.75rem; color: var(--cx-muted, var(--sf-muted)); font-size: .78rem; pointer-events: none; }

/* Tools (credits, voice, chat ↔ carousel) */
.sf-chatx-tools { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }
.sf-chatx-main > .sf-chatx-tools { position: absolute; top: 0; right: 0; z-index: 3; }
.sf-chatx-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem; border-radius: 99px; background: rgba(124, 58, 237, .12); border: 1px solid var(--cx-line); color: var(--sf-violet); font-size: .78rem; font-weight: 700; text-decoration: none; }
:root[data-theme="dark"] .sf-chatx-chip { color: #d8ccff; }
.sf-chatx-iconbtn { position: relative; width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--cx-line); background: var(--cx-surface); color: var(--sf-violet); margin: 0; cursor: pointer; text-decoration: none; }
:root[data-theme="dark"] .sf-chatx-iconbtn { color: #d8ccff; }
.sf-chatx-iconbtn:hover { background: rgba(124, 58, 237, .2); }
.sf-chatx-iconbtn input { position: absolute; opacity: 0; pointer-events: none; }
/* The project menu (all the modals): a fork icon on the gradient, so it stands out from the other buttons */
.sf-chatx-iconbtn.sf-chatx-menubtn { background: radial-gradient(circle at 35% 30%, #a78bfa, #7c3aed 70%); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(124, 58, 237, .35); } /* same purple as the radio dock */
.sf-chatx-iconbtn.sf-chatx-menubtn:hover, .sf-chatx-iconbtn.sf-chatx-menubtn[aria-expanded="true"] { filter: brightness(1.12); background: radial-gradient(circle at 35% 30%, #a78bfa, #7c3aed 70%); }
.sf-fork-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); } /* lying on its side */
.sf-chatx-iconbtn:has(input:checked) { background: var(--sf-grad); color: #fff; border-color: transparent; }
.sf-viewtoggle { display: inline-flex; padding: 3px; border-radius: 99px; border: 1px solid var(--cx-line); background: var(--cx-surface); }
.sf-viewtoggle a { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 99px; color: var(--cx-muted); font-size: .8rem; font-weight: 700; text-decoration: none; }
.sf-viewtoggle a[aria-current="page"] { background: var(--sf-grad); color: #fff; }

/* ---------- Layout ---------- */
.sf-chatx { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 1.5rem; height: calc(100vh - 92px); min-height: 520px; color: var(--cx-text); }
.sf-chatx-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* ---------- Stream ---------- */
.sf-chatx-stream { flex: 1 1 auto; overflow-y: auto; padding: 2.75rem .5rem 1rem; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--cx-line) transparent; }
.sf-chatx-msgs, .sf-chatx-live { max-width: 900px; margin: 0 auto; }
/* "See earlier messages": the chat opens on its last lines */
.sf-chatx-older { display: block; margin: 0 auto .75rem; padding: .35rem .9rem; border: 1px solid var(--cx-line); border-radius: 999px; background: transparent; color: inherit; font-size: .8rem; opacity: .85; cursor: pointer; }
.sf-chatx-older:hover { opacity: 1; }
.sf-chatx-older[hidden] { display: none; }
.sf-chatx-older:disabled { cursor: progress; opacity: .6; }
.sf-chatx-hello { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1rem; }
.sf-chatx-hello[hidden] { display: none; }
.sf-chatx-hello h1 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 800; margin: 0 0 .6rem; background: linear-gradient(90deg, #7c3aed, #db2777, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; transition: opacity .4s ease, transform .4s ease; }
:root[data-theme="dark"] .sf-chatx-hello h1 { background-image: linear-gradient(90deg, #c4b5fd, #f0abfc, #a78bfa); }
.sf-chatx-hello h1.is-out { opacity: 0; transform: translateY(8px); }
.sf-chatx-hello p { color: var(--cx-muted); max-width: 540px; }
.sf-chatx-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.1rem; max-width: 680px; }
.sf-chatx-idea { border: 1px solid var(--cx-line); background: var(--cx-surface); color: var(--cx-text); border-radius: 99px; padding: .45rem .95rem; font-size: .86rem; }
.sf-chatx-idea:hover { border-color: #a78bfa; }

/* ---------- Messages ---------- */
.sf-cmsg { display: flex; gap: .85rem; margin: 0 0 1.3rem; align-items: flex-start; animation: sf-cmsg-in .3s ease-out; }
@keyframes sf-cmsg-in { from { opacity: 0; transform: translateY(8px); } }
.sf-cmsg > .sf-vib { --s: 38px; margin-top: 1.6rem; }
.sf-cmsg-body { flex: 1 1 auto; max-width: 780px; min-width: 0; }
.sf-cmsg-name { display: flex; align-items: baseline; gap: .6rem; font-size: .92rem; font-weight: 800; color: var(--cx-text); margin: 0 0 .4rem .8rem; }
.sf-cmsg-name small { color: var(--cx-muted); font-weight: 500; font-size: .76rem; }
.sf-cmsg-bubble { position: relative; color: var(--cx-text); font-size: .96rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; padding: .9rem 1.15rem; border-radius: 6px 20px 20px 20px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--agent) 15%, #fff), color-mix(in srgb, var(--agent) 6%, #fff));
    border: 1px solid color-mix(in srgb, var(--agent) 40%, transparent); box-shadow: 0 8px 24px color-mix(in srgb, var(--agent) 10%, transparent); }
:root[data-theme="dark"] .sf-cmsg-bubble { color: #f4f0ff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--agent) 42%, #12082a), color-mix(in srgb, var(--agent-2) 60%, #0d0820));
    border-color: color-mix(in srgb, var(--agent) 65%, transparent); box-shadow: 0 12px 34px color-mix(in srgb, var(--agent) 18%, transparent); }
.sf-cmsg-bubble a { color: inherit; text-decoration: underline; }
.sf-cmsg-bubble .sf-mention { font-weight: 800; color: color-mix(in srgb, var(--agent) 80%, #000); }
:root[data-theme="dark"] .sf-cmsg-bubble .sf-mention { color: color-mix(in srgb, var(--agent) 55%, #fff); }
.sf-cmsg-bubble img { display: block; max-width: 100%; border-radius: 14px; margin-top: .7rem; cursor: zoom-in; border: 1px solid var(--cx-line); }
.sf-cmsg-tools { display: flex; gap: .35rem; margin: .3rem 0 0 .6rem; }
.sf-cmsg-tools button { border: 0; background: transparent; color: var(--cx-muted); font-size: .78rem; padding: .1rem .4rem; border-radius: 8px; }
.sf-cmsg-tools button:hover { color: var(--cx-text); background: var(--agent-soft); }
/* v1.50 reply and delete under each line (clear on hover; always on touch screens) */
.sf-cmsg-tools .sf-cmsg-tool { opacity: .45; transition: opacity .15s; }
.sf-cmsg:hover .sf-cmsg-tool, .sf-cmsg-tool:focus-visible, .sf-cmsg-tool.is-armed { opacity: 1; }
@media (hover: none) { .sf-cmsg-tools .sf-cmsg-tool { opacity: .8; } }
.sf-cmsg-tools .sf-cmsg-tool.is-delete:hover, .sf-cmsg-tools .sf-cmsg-tool.is-armed { color: #e11d48; background: rgba(225, 29, 72, .1); }
.sf-cmsg-quote { display: flex; flex-direction: column; gap: .1rem; margin: -.15rem 0 .55rem; padding: .35rem .65rem; border-left: 3px solid var(--agent, #8b5cf6);
    border-radius: 8px; background: rgba(124, 58, 237, .08); font-size: .82rem; line-height: 1.35; white-space: normal; cursor: pointer; max-width: 100%; }
.sf-cmsg-quote strong { font-size: .76rem; color: var(--agent, #7c3aed); }
.sf-cmsg-quote span { opacity: .8; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sf-cmsg.is-user .sf-cmsg-quote { background: rgba(255, 255, 255, .16); border-left-color: rgba(255, 255, 255, .8); }
.sf-cmsg.is-user .sf-cmsg-quote strong { color: #fff; }
.sf-cmsg.is-flash .sf-cmsg-bubble { animation: sf-flash 1.4s ease; }
/* v1.51 icons only; the thumbs-up opens the four reactions; the chips under the bubble */
.sf-cmsg-tools { align-items: center; }
.sf-cmsg-tools .sf-cmsg-tool { font-size: .9rem; line-height: 1; padding: .3rem .4rem; }
.sf-cmsg-tools .sf-cmsg-tool.is-listen { opacity: .75; }
.sf-cmsg-tool.is-armed span { font-size: .75rem; margin-left: .25rem; }
.sf-react { position: relative; display: inline-flex; }
.sf-react-pick { position: absolute; bottom: calc(100% + 6px); left: -6px; display: flex; gap: .15rem; padding: .3rem .4rem; border-radius: 999px; background: #fff;
    box-shadow: 0 10px 30px rgba(20, 10, 50, .22); border: 1px solid rgba(124, 58, 237, .15); opacity: 0; transform: translateY(6px) scale(.9); pointer-events: none; transition: opacity .15s, transform .15s; z-index: 30; }
:root[data-theme="dark"] .sf-react-pick { background: #1e1838; border-color: rgba(167, 139, 250, .25); }
.sf-react.is-open .sf-react-pick { opacity: 1; transform: none; pointer-events: auto; }
.sf-cmsg.is-user .sf-react-pick { left: auto; right: -6px; }
.sf-react-opt { border: 0; background: transparent; font-size: 1.35rem; line-height: 1; padding: .15rem .2rem; border-radius: 50%; transition: transform .12s; }
.sf-cmsg-tools .sf-react-opt:hover { transform: translateY(-3px) scale(1.25); background: transparent; }
.sf-cmsg-reacts { display: flex; flex-wrap: wrap; gap: .3rem; margin: -.55rem 0 0 .8rem; position: relative; z-index: 1; }
.sf-cmsg.is-user .sf-cmsg-reacts { margin: -.55rem .8rem 0 0; justify-content: flex-end; }
.sf-react-chip { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .45rem; border-radius: 999px; font-size: .82rem; line-height: 1.4;
    background: #fff; border: 1px solid rgba(124, 58, 237, .18); box-shadow: 0 2px 8px rgba(20, 10, 50, .1); cursor: default; }
:root[data-theme="dark"] .sf-react-chip { background: #1e1838; border-color: rgba(167, 139, 250, .28); }
.sf-react-chip.is-mine { border-color: #8b5cf6; background: rgba(139, 92, 246, .14); }
.sf-react-chip.is-vib { border-color: var(--agent, #8b5cf6); }
.sf-react-n { font-size: .72rem; font-weight: 600; opacity: .8; }
@keyframes sf-flash { 0%, 60% { box-shadow: 0 0 0 3px rgba(139, 92, 246, .55); } 100% { box-shadow: none; } }
.sf-chatx-replybar { display: flex; align-items: center; gap: .6rem; margin: 0 .25rem .45rem; padding: .45rem .7rem; border-left: 3px solid var(--agent, #8b5cf6);
    border-radius: 10px; background: var(--agent-soft, rgba(124, 58, 237, .1)); font-size: .85rem; }
.sf-chatx-replybar > i { color: var(--agent, #7c3aed); }
.sf-chatx-replytext { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sf-chatx-replytext strong { font-size: .78rem; color: var(--agent, #7c3aed); }
.sf-chatx-replytext span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }
.sf-chatx-replyx { border: 0; background: transparent; color: var(--cx-muted); padding: .15rem .35rem; border-radius: 6px; }
.sf-chatx-replyx:hover { color: var(--cx-text); background: rgba(0, 0, 0, .06); }
/* The viber's own messages: no icon, just the bubble on the right */
.sf-cmsg.is-user { justify-content: flex-end; }
.sf-cmsg.is-user .sf-cmsg-body { display: flex; flex-direction: column; align-items: flex-end; }
.sf-cmsg.is-user .sf-cmsg-name { margin: 0 .8rem .4rem 0; }
.sf-cmsg.is-user .sf-cmsg-bubble { background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fff; border: 0; border-radius: 20px 6px 20px 20px; box-shadow: 0 8px 24px rgba(124, 58, 237, .25); }
.sf-cnote { text-align: center; color: var(--cx-muted); font-size: .8rem; margin: .2rem 0 1.2rem; }
.sf-cnote span { background: var(--cx-surface); border: 1px solid var(--cx-line); padding: .25rem .8rem; border-radius: 99px; }
.sf-cnote.is-error span { background: rgba(239, 68, 68, .12); border-color: rgba(239, 68, 68, .35); color: #dc2626; }
:root[data-theme="dark"] .sf-cnote.is-error span { color: #fecaca; }

/* Rich cards inside bubbles */
.sf-ccard { margin-top: .85rem; border-radius: 16px; padding: .9rem 1rem; font-size: .88rem; white-space: normal; background: color-mix(in srgb, var(--cx-input) 70%, transparent); border: 1px solid color-mix(in srgb, var(--agent) 45%, transparent); }
:root[data-theme="dark"] .sf-ccard { background: rgba(10, 6, 30, .35); }
.sf-ccard h4 { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--agent) 80%, #000); margin: .5rem 0 .3rem; }
:root[data-theme="dark"] .sf-ccard h4 { color: #f0abfc; }
.sf-ccard h4:first-child { margin-top: 0; }
.sf-ccard ul { margin: 0; padding-left: 1.1rem; }
.sf-ccard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.sf-ccard-actions small { color: var(--cx-muted); }
.sf-cpotential { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; }
.sf-cscore { font-size: 2.6rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #a855f7, #ec4899); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sf-cscore small { font-size: 1rem; }
.sf-ccard .sf-annual { margin: .7rem 0 .2rem; background: rgba(124, 58, 237, .14); }
.sf-cscope { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sf-cscope > div { border-radius: 12px; padding: .55rem .7rem; }
.sf-cscope .is-in { background: rgba(34, 197, 94, .14); }
.sf-cscope .is-out { background: rgba(239, 68, 68, .12); }
.sf-cscope .is-in h4 { color: #16a34a; }
.sf-cscope .is-out h4 { color: #dc2626; }
:root[data-theme="dark"] .sf-cscope .is-in h4 { color: #86efac; }
:root[data-theme="dark"] .sf-cscope .is-out h4 { color: #fca5a5; }
.sf-cpreview { display: inline-flex; align-items: center; gap: .4rem; margin-top: .75rem; }
.sf-cfile { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; }

/* Typing row */
.sf-cdots { display: inline-flex; gap: 5px; padding: .25rem 0; }
.sf-cdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--agent); opacity: .5; animation: sf-cdot 1.2s infinite ease-in-out; }
:root[data-theme="dark"] .sf-cdots i { background: #fff; }
.sf-cdots i:nth-child(2) { animation-delay: .15s; }
.sf-cdots i:nth-child(3) { animation-delay: .3s; }
@keyframes sf-cdot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } }
/* Stop button on a working vib's bubble (chat and office) */
.sf-cstop { display: inline-flex; align-items: center; gap: .2rem; margin-left: .5rem; padding: .05rem .5rem; border: 1px solid rgba(214, 69, 69, .45);
    border-radius: 999px; background: rgba(214, 69, 69, .08); color: #c53030; font-size: .72rem; font-weight: 600; line-height: 1.5; cursor: pointer; vertical-align: middle; }
.sf-cstop:hover, .sf-cstop:focus-visible { background: #d64545; border-color: #d64545; color: #fff; }
.sf-cstop:disabled { opacity: .5; cursor: default; background: transparent; color: inherit; }
.sf-cstop .bi { font-size: .7rem; }
:root[data-theme="dark"] .sf-cstop { color: #fca5a5; border-color: rgba(252, 165, 165, .45); background: rgba(252, 165, 165, .08); }
:root[data-theme="dark"] .sf-cstop:hover { background: #d64545; color: #fff; }
.sf-clive-step { display: block; font-size: .8rem; color: var(--cx-muted); margin-top: .2rem; }
.sf-clive-log { list-style: none; margin: .35rem 0 0; padding: 0; font-size: .8rem; color: var(--cx-muted); }
.sf-clive-log li { display: flex; gap: .35rem; align-items: baseline; padding: .1rem 0; line-height: 1.35; }
.sf-clive-log li i { flex: none; font-size: .85rem; }
.sf-clive-log li.is-done i { color: #22a06b; }
.sf-clive-log li.is-error i { color: #d64545; }
.sf-clive-log li.is-running { color: inherit; font-weight: 600; }
.sf-clive-log li span { overflow-wrap: anywhere; }

/* Approve / start */
.sf-chatx-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; padding: .4rem 1rem .7rem; }
.sf-chatx-actions[hidden] { display: none; }
.sf-chatx-actions small { color: var(--cx-muted); }

/* ---------- Composer: pill (with the coloured name of who you talk to) + voice + send ---------- */
.sf-chatx-composer { display: flex; align-items: center; justify-content: center; gap: .9rem; padding: .3rem .5rem .2rem; }
.sf-chatx-box { flex: 0 1 660px; display: flex; align-items: center; gap: .5rem; min-height: 54px; padding: .35rem 1rem .35rem .5rem; border-radius: 99px; background: var(--cx-input); border: 1.5px solid rgba(139, 92, 246, .45); box-shadow: 0 8px 28px rgba(124, 58, 237, .12); }
.sf-chatx-box:focus-within { border-color: #8b5cf6; box-shadow: 0 0 0 4px rgba(124, 58, 237, .14), 0 8px 30px rgba(124, 58, 237, .2); }
.sf-chatx-clip { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #8b5cf6; font-size: 1.15rem; display: grid; place-items: center; }
.sf-chatx-clip:hover { background: rgba(124, 58, 237, .12); }
.sf-chatx-target-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 800; padding: .25rem .65rem .25rem .3rem; border-radius: 99px; background: var(--agent); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--agent) 35%, transparent); }
.sf-chatx-target-pill .sf-vib { --s: 20px; box-shadow: none; background: rgba(255, 255, 255, .25); }
.sf-chatx-target-pill .sf-vib-eye { width: 13%; }
.sf-chatx-box textarea { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; resize: none; outline: none; color: var(--cx-text); font-size: 1rem; line-height: 1.45; max-height: 160px; padding: .45rem 0; }
.sf-chatx-box textarea::placeholder { color: var(--cx-muted); }
.sf-chatx-cost { flex: 0 0 auto; color: var(--cx-muted); font-size: .72rem; white-space: nowrap; }
.sf-chatx-mic, .sf-chatx-send { flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center; font-size: 1.3rem; border: 0; }
.sf-chatx-mic { border-radius: 50%; background: var(--cx-input); color: #8b5cf6; border: 1.5px solid rgba(139, 92, 246, .5); box-shadow: 0 6px 20px rgba(124, 58, 237, .15); }
.sf-chatx-voice { margin: 0; cursor: pointer; position: relative; }
.sf-chatx-voice input { position: absolute; opacity: 0; pointer-events: none; }
.sf-chatx-voice:has(input:checked) { background: var(--sf-grad); color: #fff; border-color: transparent; }
.sf-chatx-voice:has(input:focus-visible) { outline: 2px solid #8b5cf6; outline-offset: 2px; }
.sf-chatx-mic.is-on { background: #ef4444; color: #fff; border-color: #ef4444; animation: sf-mic-pulse 1.2s infinite; }
@keyframes sf-mic-pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); } 100% { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); } }
.sf-chatx-send { border-radius: 18px; background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; box-shadow: 0 10px 26px rgba(124, 58, 237, .4); }
.sf-chatx-send:disabled { opacity: .5; }

/* ---------- Team (right): Vibs a bit bigger and alive ---------- */
.sf-chatx-team { display: flex; flex-direction: column; justify-content: center; gap: 1.25rem; min-height: 0; overflow-y: auto; padding: .5rem 0; }
.sf-agent-card { display: flex; flex-direction: column; align-items: center; gap: .45rem; border: 0; background: transparent; padding: .3rem; border-radius: 18px; color: var(--cx-text); }
.sf-agent-card .sf-vib { --s: 64px; }
.sf-agent-card:hover { background: var(--agent-soft); }
.sf-agent-card.is-target { background: var(--agent-soft); box-shadow: inset 0 0 0 2px var(--agent); }
.sf-agent-label { display: flex; flex-direction: column; align-items: center; line-height: 1.2; text-align: center; }
.sf-agent-label b { font-size: .92rem; }
.sf-agent-label small { color: var(--cx-muted); font-size: .72rem; }
.sf-agent-state { font-style: normal; font-size: .66rem; font-weight: 700; padding: .05rem .45rem; border-radius: 99px; background: var(--agent-soft); color: color-mix(in srgb, var(--agent) 70%, var(--cx-text)); }


/* ---------- Smaller screens ---------- */
@media (max-width: 991.98px) {
    .sf-chatx { grid-template-columns: 1fr; height: auto; }
    .sf-chatx-team { order: -1; flex-direction: row; justify-content: center; overflow-x: auto; gap: .6rem; }
    .sf-agent-card .sf-vib { --s: 44px; }
    .sf-agent-state, .sf-agent-label small { display: none; }
    .sf-chatx-main { height: calc(100vh - 230px); min-height: 460px; }
    .sf-chatx-mic, .sf-chatx-send { width: 48px; height: 48px; }
}

/* ---------- Carousel page with the same top as the chat ---------- */
.sf-carousel-tools { display: flex; justify-content: flex-end; margin: -.2rem 0 .8rem; }

/* ---------- "Agentes vibs" page ---------- */
.sf-vib-card { position: relative; height: 100%; padding: 1.25rem 1.1rem 1.2rem; border-radius: 24px; background: var(--sf-card); border: 1px solid var(--sf-border); box-shadow: var(--sf-shadow); transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; }
.sf-vib-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 150px; background: radial-gradient(160px 110px at 50% 75%, var(--agent-soft), transparent 70%); pointer-events: none; }
.sf-vib-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px color-mix(in srgb, var(--agent) 22%, transparent); }
.sf-vib-stage { position: relative; height: 140px; display: grid; place-items: center; }
.sf-vib-stage .sf-vib { --s: 96px; z-index: 1; }
.sf-vib-card:hover .sf-vib { animation-duration: 2.4s; }
.sf-vib-shadow { position: absolute; bottom: 10px; width: 70px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--agent) 30%, transparent); filter: blur(4px); animation: sf-vib-shadow 7s ease-in-out infinite; }
@keyframes sf-vib-shadow { 0%, 82%, 100% { transform: scale(1); opacity: .8; } 91% { transform: scale(.6); opacity: .4; } }
.sf-vib-role { position: relative; text-align: center; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--agent); margin: .2rem 0 .8rem; }
.sf-vib-name { font-weight: 800; text-align: center; }
.sf-swatches { display: flex; flex-wrap: wrap; gap: .4rem; }
.sf-swatch { position: relative; margin: 0; cursor: pointer; }
.sf-swatch input { position: absolute; opacity: 0; }
.sf-swatch span { display: block; width: 26px; height: 26px; border-radius: 9px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); transition: transform .15s; }
.sf-swatch input:checked + span { transform: scale(1.12); box-shadow: 0 0 0 2px var(--sf-card), 0 0 0 4px var(--sf-ink); }
.sf-swatch input:focus-visible + span { outline: 2px solid #8b5cf6; outline-offset: 3px; }
.sf-swatch-0 span { background: #8b5cf6; } .sf-swatch-1 span { background: #ec4899; } .sf-swatch-2 span { background: #3b82f6; }
.sf-swatch-3 span { background: #f97316; } .sf-swatch-4 span { background: #22c55e; } .sf-swatch-5 span { background: #14b8a6; }
.sf-swatch-6 span { background: #eab308; } .sf-swatch-7 span { background: #ef4444; } .sf-swatch-8 span { background: #a855f7; }
.sf-swatch-9 span { background: #64748b; }

/* ---------- Composer: agent names coloured inside the input (mirror behind a transparent textarea) ---------- */
.sf-chatx-field { position: relative; flex: 1 1 auto; min-width: 0; display: grid; }
.sf-chatx-field > * { grid-area: 1 / 1; }
.sf-chatx-box .sf-chatx-field textarea, .sf-chatx-mirror { font-family: inherit; font-size: 1rem; font-weight: 400; letter-spacing: normal; line-height: 1.45; padding: .45rem 0; margin: 0; border: 0; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; tab-size: 4; }
.sf-chatx-mirror { pointer-events: none; overflow: hidden; max-height: 160px; color: var(--cx-text); }
.sf-chatx-box .sf-chatx-field textarea { position: relative; z-index: 1; width: 100%; color: transparent; caret-color: var(--cx-text); scrollbar-width: none; }
.sf-chatx-box .sf-chatx-field textarea::-webkit-scrollbar { display: none; }
.sf-chatx-box .sf-chatx-field textarea::selection { background: rgba(139, 92, 246, .3); color: transparent; }
.sf-chatx-mirror .sf-mention { color: color-mix(in srgb, var(--agent) 82%, #000); background: var(--agent-soft); border-radius: 5px; box-shadow: 0 0 0 2px var(--agent-soft); }
:root[data-theme="dark"] .sf-chatx-mirror .sf-mention { color: color-mix(in srgb, var(--agent) 60%, #fff); }
.sf-agent-state:empty { display: none; }
.sf-cmsg.is-old { animation: none; }
.sf-cmsg.is-pending .sf-cmsg-bubble { opacity: .65; }
.sf-cmsg.is-failed .sf-cmsg-bubble { opacity: .5; text-decoration: line-through; }
.sf-cmsg-queue { font-style: italic; }
/* ---------- Status badge next to the title (chat + carousel) ---------- */
.sf-topbar-status { flex: 0 0 auto; display: inline-flex; align-items: center; margin-left: .35rem; }
.sf-topbar-status .badge, .sf-topbar-status > * { font-size: .72rem; }

/* ---------- Carousel: agent buttons with Vibs; cards with the agent's colour ---------- */
.sf-carousel-dots button { padding: .25rem .85rem .25rem .3rem; gap: .5rem; }
.sf-carousel-dots button .sf-vib { --s: 30px; }
.sf-dot-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.sf-dot-label b { font-size: .85rem; color: var(--sf-ink); }
.sf-dot-label small { font-size: .68rem; color: var(--sf-muted); font-weight: 600; }
.sf-carousel-dots button.is-current { border-color: var(--agent); box-shadow: 0 0 0 3px var(--agent-soft); background: var(--agent-soft); }
.sf-carousel-dots button.is-active .sf-vib { animation-duration: 2.2s; }
.sf-chat[class*="sf-agent-"] { position: relative; border: 2px solid var(--agent); box-shadow: 0 14px 36px color-mix(in srgb, var(--agent) 16%, transparent); }
.sf-chat > .sf-chat-ext { position: absolute; top: .6rem; right: .8rem; z-index: 2; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--sf-card); border: 1px solid var(--sf-border); }
.sf-chat > .sf-chat-ext.d-none { display: none; }
.sf-chat .sf-msg .sf-vib.sf-msg-avatar { --s: 30px; width: var(--s); height: var(--s); border-radius: 30%;
    background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--agent) 72%, #fff), var(--agent) 58%, color-mix(in srgb, var(--agent) 78%, #000)); color: transparent; }
.sf-chat .sf-msg.is-agent .sf-msg-bubble { background: var(--agent-soft); border: 1px solid color-mix(in srgb, var(--agent) 24%, transparent); border-radius: 16px 16px 16px 4px; }
.sf-chat .sf-msg.is-agent .sf-msg-meta { color: color-mix(in srgb, var(--agent) 75%, var(--sf-ink)); }
:root[data-theme="dark"] .sf-chat .sf-msg.is-agent .sf-msg-bubble { background: color-mix(in srgb, var(--agent) 16%, #140c2a); }
:root[data-theme="dark"] .sf-chat .sf-msg.is-agent .sf-msg-meta { color: color-mix(in srgb, var(--agent) 55%, #fff); }

/* ---------- Always-on microphone ---------- */
.sf-chatx-wake.is-on { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); animation: sf-wake-pulse 2s ease-in-out infinite; }
@keyframes sf-wake-pulse { 50% { box-shadow: 0 0 0 9px rgba(34, 197, 94, .05); } }
.sf-agent-card.is-listening .sf-vib { box-shadow: 0 0 0 4px var(--agent-soft), 0 0 0 7px color-mix(in srgb, var(--agent) 45%, transparent); }
.sf-agent-card.is-listening .sf-vib .sf-vib-eye { height: 38%; }
.sf-chatx-menu { min-width: 220px; border-radius: 14px; }

/* ---------- Agent messages as formatted text (chat + carousel) ---------- */
.sf-rt { white-space: normal; }
.sf-rt p { margin: 0 0 .55rem; }
.sf-rt > :last-child { margin-bottom: 0; }
.sf-rt-list { margin: .15rem 0 .65rem; padding-left: 1.25rem; }
.sf-rt-list li { margin: .18rem 0; padding-left: .15rem; }
.sf-rt-list li::marker { color: var(--agent, #8b5cf6); font-weight: 800; }
.sf-rt strong { font-weight: 800; color: color-mix(in srgb, var(--agent, #7c3aed) 70%, currentColor); }
.sf-rt-code, .sf-rt-file { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84em; padding: .08rem .4rem; border-radius: 6px; background: color-mix(in srgb, var(--agent, #8b5cf6) 14%, transparent); color: color-mix(in srgb, var(--agent, #7c3aed) 80%, currentColor); white-space: nowrap; }
.sf-rt-warn { padding: .45rem .7rem; border-radius: 10px; background: rgba(245, 158, 11, .12); border-left: 3px solid #f59e0b; }
.sf-rt-ok { display: inline-block; padding: .2rem .65rem; border-radius: 99px; background: rgba(34, 197, 94, .14); color: #15803d; font-weight: 700; font-size: .88em; }
:root[data-theme="dark"] .sf-rt-ok { color: #86efac; }
.sf-msg-text.sf-rt { white-space: normal; }

/* ---------- Revenue goal in the Project Manager's analysis ---------- */
.sf-goal { display: flex; align-items: center; gap: .75rem; margin: .7rem 0; padding: .7rem .9rem; border-radius: 14px; background: linear-gradient(135deg, rgba(34, 197, 94, .16), rgba(139, 92, 246, .14)); border: 1px solid rgba(34, 197, 94, .35); }
.sf-goal > i { font-size: 1.4rem; color: #16a34a; }
.sf-goal small { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #15803d; }
.sf-goal b { font-size: 1.02rem; }
:root[data-theme="dark"] .sf-goal small, :root[data-theme="dark"] .sf-goal > i { color: #86efac; }

/* ---------- "Ver preview" at the top + list of changes ---------- */
.sf-topbar-preview { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem; padding: .32rem .75rem; border-radius: 99px; font-size: .82rem; font-weight: 700; text-decoration: none; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 6px 16px rgba(124, 58, 237, .3); white-space: nowrap; }
.sf-topbar-preview:hover { color: #fff; filter: brightness(1.08); }
.sf-topbar-preview[hidden] { display: none; }
.sf-chatx-listbtn.is-on { background: #8b5cf6; color: #fff; border-color: #8b5cf6; }
.sf-chatx-list { width: 100%; max-width: 760px; margin: 0 auto .5rem; align-self: center; padding: .8rem .9rem; border-radius: 18px; background: var(--cx-input); border: 1.5px solid rgba(139, 92, 246, .35); box-shadow: 0 10px 30px rgba(124, 58, 237, .14); color: var(--cx-text); }
.sf-chatx-list-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.sf-chatx-list-items { margin: 0 0 .6rem; padding-left: 1.4rem; max-height: 220px; overflow-y: auto; }
.sf-chatx-list-items li { margin: .25rem 0; }
.sf-chatx-list-items li::marker { color: #8b5cf6; font-weight: 800; }
.sf-chatx-list-items li > * { vertical-align: middle; }
.sf-chatx-list-items input { display: inline-block; width: calc(100% - 2.6rem); }
:root[data-theme="dark"] body.sf-chat-page .sf-chatx-list .form-control, :root[data-theme="dark"] body.sf-chat-page .sf-chatx-list .form-select { background: rgba(255, 255, 255, .06); color: #f4f0ff; border-color: rgba(167, 139, 250, .3); }
@media (max-width: 767.98px) { .sf-topbar-preview span { display: none; } }

/* ---------- Tasks given to a vib ---------- */
.sf-task-agent { display: inline-flex; align-items: center; gap: .4rem; margin: .35rem 0 .2rem; padding: .2rem .6rem .2rem .25rem; border-radius: 99px; background: var(--agent-soft); font-size: .78rem; }
.sf-task-agent .sf-vib { --s: 20px; }
.sf-task-agent small { color: var(--sf-muted); font-weight: 600; }
.sf-task-agent.is-failed small { color: #dc2626; }
.sf-task-agent.is-done small { color: #16a34a; }
.sf-task-result { margin-top: .3rem; font-size: .82rem; }
.sf-task-result summary { cursor: pointer; font-weight: 700; color: var(--sf-primary); }
.sf-task-result p { margin: .35rem 0 0; white-space: normal; }

/* Development's sub-agents inside its bubble */
.sf-cteam { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem; margin-top: .6rem; }
.sf-cteam-box { --tier: #3b82f6; border-radius: 12px; background: #0d0b16; color: #ddd8ef; border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent); overflow: hidden; min-width: 0; }
.sf-cteam-box.tier-simple { --tier: #22c55e; }
.sf-cteam-box.tier-medium { --tier: #3b82f6; }
.sf-cteam-box.tier-complex { --tier: #f97316; }
.sf-cteam.is-live .sf-cteam-box.is-running { box-shadow: 0 0 0 1px var(--tier), 0 6px 18px color-mix(in srgb, var(--tier) 28%, transparent); }
.sf-cteam-head { display: flex; align-items: center; gap: .4rem; padding: .4rem .6rem; font-size: .78rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.sf-cteam-head b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-cteam-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #6b7280; }
.sf-cteam-box.is-running .sf-cteam-dot { background: var(--tier); box-shadow: 0 0 6px var(--tier); }
.sf-cteam-box.is-done .sf-cteam-dot { background: #22c55e; }
.sf-cteam-box.is-failed .sf-cteam-dot { background: #ef4444; }
.sf-cteam-model { margin-left: auto; flex: none; font-size: .66rem; font-weight: 700; padding: .05rem .4rem; border-radius: 5px; color: var(--tier); border: 1px solid color-mix(in srgb, var(--tier) 55%, transparent); }
.sf-cteam-lines { padding: .4rem .6rem; font: .7rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; max-height: 7.5rem; overflow: hidden; }
.sf-cteam-line { overflow-wrap: anywhere; color: #b9b2d4; }
.sf-cteam-line.is-text { color: #f1edff; }
.sf-cteam-line.is-done { color: #4ade80; }
.sf-cteam-line.is-error { color: #f87171; }

/* Split chat: agents on top of the chat, chat on the left, live preview on the right */
.sf-chatx.sf-chatx-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1rem; }
.sf-chatx-team.sf-chatx-team-top { flex: none; flex-direction: row; justify-content: center; align-items: flex-start; gap: 1.1rem; padding: .2rem 0 0; overflow: visible; }
.sf-chatx-team-top .sf-agent-card { transform: scale(.8); transform-origin: top center; margin-bottom: -.9rem; }
.sf-chatx-split .sf-chatx-stream { padding-top: 1rem; }
.sf-chatx-preview { display: flex; flex-direction: column; min-height: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--cx-line); background: #15121f; box-shadow: 0 12px 34px rgba(10, 6, 24, .18); }
.sf-chatx-preview .sf-qb-wait { gap: .5rem; text-align: center; padding: 1rem; }
.sf-chatx-preview .sf-qb-wait i { font-size: 2rem; opacity: .5; }
@media (max-width: 991.98px) {
    .sf-chatx.sf-chatx-split { grid-template-columns: 1fr; height: auto; }
    .sf-chatx-preview { height: 70vh; }
}
.sf-chatx-split .sf-chatx-main > .sf-chatx-tools { position: static; padding-bottom: .2rem; }

/* Carousel view: the agents' chats on the left, the live preview on the right */
.sf-carousel-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1rem; align-items: stretch; }
.sf-carousel-preview { position: relative; min-height: 560px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(124, 58, 237, .18); background: #faf8ff; display: flex; flex-direction: column; }
.sf-carousel-preview .sf-browser { flex: 1 1 auto; display: flex; flex-direction: column; margin: 0; height: 100%; border-radius: 0; }
.sf-carousel-preview .sf-browser.d-none { display: none !important; }
.sf-carousel-preview .sf-browser-viewport { flex: 1 1 auto; min-height: 0; height: auto; }
.sf-carousel-preview .sf-browser-viewport iframe { width: 100%; height: 100%; min-height: 520px; border: 0; }
.sf-carousel-preview-wait { margin: auto; text-align: center; color: #6b6485; padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.sf-carousel-preview-wait i { font-size: 2rem; opacity: .5; }
.sf-carousel-preview .sf-browser:not(.d-none) ~ .sf-carousel-preview-wait { display: none; }
@media (max-width: 991.98px) { .sf-carousel-split { grid-template-columns: 1fr; } .sf-carousel-preview { min-height: 60vh; } }
.sf-carousel-split .sf-chats.is-carousel .sf-chat { flex-basis: 90%; }
.sf-carousel-preview .sf-browser-viewport { position: relative; overflow: hidden; aspect-ratio: auto; }
.sf-carousel-preview .sf-browser-viewport iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Preview: browser or phone size */
.sf-device { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, .08); margin-left: auto; flex: 0 0 auto; }
.sf-device button { border: 0; background: transparent; color: inherit; opacity: .6; padding: .15rem .45rem; border-radius: 6px; line-height: 1; font-size: .85rem; cursor: pointer; }
.sf-device button:hover { opacity: 1; }
.sf-device button.active { background: rgba(124, 58, 237, .85); color: #fff; opacity: 1; }
.sf-carousel-preview .sf-device { background: rgba(124, 58, 237, .1); }
.sf-chatx-preview .sf-device + .sf-qb-live { margin-left: 0; }
[data-device-box].is-mobile .sf-qb-frame, [data-device-box].is-mobile .sf-browser-viewport { background: #e9e5f5; }
[data-device-box].is-mobile .sf-qb-frame iframe, [data-device-box].is-mobile .sf-browser-viewport iframe {
    left: 50% !important; right: auto !important; width: 390px !important; max-width: calc(100% - 24px) !important;
    top: 12px !important; bottom: 12px !important; height: calc(100% - 24px) !important; inset: auto; transform: translateX(-50%) !important;
    border-radius: 26px; border: 8px solid #1d1929 !important; box-shadow: 0 14px 40px rgba(10, 6, 24, .25); background: #fff;
}

/* Browser view: the site is drawn at desktop width (1280px) and scaled down to fit the pane. */
[data-device-box]:not(.is-mobile) .sf-qb-frame iframe.sf-desk, [data-device-box]:not(.is-mobile) .sf-browser-viewport iframe.sf-desk { right: auto; bottom: auto; transform-origin: 0 0; }

.sf-cteam-tokens { margin-top: .4rem; font-size: .72rem; opacity: .7; }
.sf-cteam-total { grid-column: 1 / -1; font-size: .78rem; font-weight: 600; opacity: .8; text-align: right; }

/* Chat header: the agents as animated pills (like the carousel) on the top left, the tools on the right */
.sf-chatx-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding-bottom: .35rem; }
.sf-chatx-head > .sf-chatx-tools { position: static; padding: 0; margin-left: auto; }
.sf-chatx-team.sf-chatx-team-top { justify-content: flex-start; align-items: center; gap: .4rem; padding: 0; flex-wrap: wrap; }
.sf-chatx-team-top .sf-agent-card { transform: none; margin: 0; flex-direction: row; gap: .45rem; padding: .22rem .8rem .22rem .26rem; border-radius: 999px;
    border: 1px solid var(--cx-line); background: color-mix(in srgb, var(--agent) 8%, transparent); transition: border-color .2s, box-shadow .2s, background .2s; }
.sf-chatx-team-top .sf-agent-card:hover { border-color: var(--agent); }
.sf-chatx-team-top .sf-agent-card.is-target { box-shadow: 0 0 0 3px var(--agent-soft); border-color: var(--agent); background: var(--agent-soft); }
.sf-chatx-team-top .sf-agent-card .sf-vib { --s: 32px; }
.sf-chatx-team-top .sf-agent-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
.sf-chatx-team-top .sf-agent-label b { font-size: .8rem; }
.sf-chatx-team-top .sf-agent-label small { font-size: .68rem; opacity: .7; }
.sf-chatx-team-top .sf-agent-state { position: absolute; }
@media (max-width: 575.98px) { .sf-chatx-team-top .sf-agent-label small { display: none; } .sf-chatx-head { justify-content: center; } }
.sf-chatx-head { flex-wrap: nowrap; }
.sf-chatx-head > .sf-chatx-team-top { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.sf-chatx-head > .sf-chatx-tools { flex: none; }
.sf-chatx-head .sf-viewtoggle a span { display: none; }
@media (max-width: 575.98px) { .sf-chatx-head { flex-wrap: wrap; } }
/* Chat header vibs: no coloured pill, bigger, nothing clipped while they hop */
.sf-chatx-head > .sf-chatx-team-top { overflow: visible; padding-top: .6rem; gap: .9rem; }
.sf-chatx-team-top .sf-agent-card { background: transparent; border-color: transparent; padding: .1rem .3rem; }
.sf-chatx-team-top .sf-agent-card:hover, .sf-chatx-team-top .sf-agent-card.is-target { background: transparent; box-shadow: none; border-color: transparent; }
.sf-chatx-team-top .sf-agent-card.is-target .sf-agent-label b { color: var(--agent); }
.sf-chatx-team-top .sf-agent-card .sf-vib { --s: 46px; }
.sf-chatx-team-top .sf-agent-label b { font-size: .86rem; }
.sf-chatx-team-top .sf-agent-label small { font-size: .72rem; }

.sf-onboarding-link { font-weight: 700; color: var(--agent, #7c3aed); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* Checklist tasks with an unsent draft: a dot on its button */
.sf-chatx-listbtn { position: relative; }
.sf-chatx-listbtn.has-draft::after { content: ""; position: absolute; top: 6px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 2px var(--cx-bg, #fff); }
.sf-chatx-list-hint { font-size: .72rem; opacity: .65; margin-right: auto; align-self: center; }

/* Carousel: the vibs look exactly like the chat ones (no pill, bigger, nothing clipped while they hop) */
.sf-view-bar .sf-carousel-dots { overflow: visible; padding-top: .6rem; gap: .9rem; }
.sf-view-bar .sf-carousel-dots button, .sf-view-bar .sf-carousel-dots button.is-current { border-color: transparent; background: transparent; box-shadow: none; padding: .1rem .3rem; gap: .45rem; border-radius: 12px; }
.sf-view-bar .sf-carousel-dots button .sf-vib { --s: 46px; }
.sf-view-bar .sf-carousel-dots button.is-current .sf-dot-label b { color: var(--agent); }
.sf-view-bar .sf-carousel-dots .sf-dot-label b { font-size: .86rem; }
.sf-view-bar .sf-carousel-dots .sf-dot-label small { font-size: .72rem; }

/* Development's finished team: one accordion item per sub-agent */
.sf-cteam-acc { display: grid; gap: .45rem; margin-top: .6rem; }
.sf-cteam-item { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(10, 8, 20, .28); overflow: hidden; }
:root[data-theme="light"] .sf-carousel-split .sf-cteam-item, .sf-msg-bubble .sf-cteam-item { border-color: rgba(124, 58, 237, .18); background: rgba(124, 58, 237, .05); }
.sf-cteam-item > summary { list-style: none; display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; cursor: pointer; font-size: .86rem; }
.sf-cteam-item > summary::-webkit-details-marker { display: none; }
.sf-cteam-item > summary b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-cteam-item .sf-cteam-model { flex: none; }
.sf-cteam-tk { margin-left: auto; opacity: .65; font-size: .72rem; white-space: nowrap; }
.sf-cteam-chev { flex: none; transition: transform .2s; opacity: .7; }
.sf-cteam-tk + .sf-cteam-chev { margin-left: .2rem; }
.sf-cteam-model + .sf-cteam-chev { margin-left: auto; }
.sf-cteam-item[open] .sf-cteam-chev { transform: rotate(180deg); }
.sf-cteam-report { padding: 0 .85rem .75rem 1.95rem; font-size: .86rem; line-height: 1.55; }
.sf-cteam-report p { margin: 0 0 .5rem; }
.sf-cteam-report ul { margin: 0 0 .5rem; padding-left: 1.1rem; }
.sf-cteam-acc .sf-cteam-total { text-align: right; font-size: .76rem; font-weight: 600; opacity: .8; }

/* Checklist tasks: tasks with sub-tasks, a microphone inside each field */
.sf-chatx-list-items { padding-left: 1.4rem; counter-reset: task; }
.sf-list-task { margin-bottom: .35rem; counter-increment: task; }
.sf-list-row { display: flex; align-items: center; gap: .25rem; }
.sf-list-field { position: relative; flex: 1 1 auto; min-width: 0; }
.sf-list-field.has-mic .form-control { padding-right: 2.1rem; }
.sf-list-mic { position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 0; display: grid; place-items: center; background: transparent; color: inherit; opacity: .6; font-size: .9rem; }
.sf-list-mic:hover { opacity: 1; background: rgba(124, 58, 237, .14); }
.sf-list-mic.is-on { opacity: 1; color: #fff; background: #ef4444; animation: sf-mic-pulse 1.2s infinite; }
.sf-list-addsub { font-size: .75rem; white-space: nowrap; text-decoration: none; padding: .15rem .35rem; opacity: .8; }
.sf-list-addsub:hover { opacity: 1; }
.sf-list-subs { list-style: none; counter-reset: sub; padding-left: 2rem; margin: .3rem 0 0; display: grid; gap: .3rem; }
.sf-list-sub { position: relative; }
.sf-list-sub::before { counter-increment: sub; content: counter(task) "." counter(sub) "."; position: absolute; left: -1.9rem; top: 50%; transform: translateY(-50%); font-size: .7rem; opacity: .55; }
.sf-list-subs:empty { display: none; }
/* Light theme: the sub-agents' accordion is light too */
:root:not([data-theme="dark"]) .sf-cteam-item { background: rgba(255, 255, 255, .75); border-color: rgba(124, 58, 237, .16); color: #1f1b33; }
:root:not([data-theme="dark"]) .sf-cteam-item[open] { background: #fff; box-shadow: 0 6px 18px rgba(76, 29, 149, .08); }
:root:not([data-theme="dark"]) .sf-cteam-item > summary:hover { background: rgba(124, 58, 237, .05); }
:root:not([data-theme="dark"]) .sf-cteam-item .sf-cteam-tk { color: #6b6785; opacity: 1; }
/* Header vibs: no "pensando…" text over the avatar (the message already shows it); the vib's own animation stays */
.sf-chatx-team-top .sf-agent-state { display: none !important; }

/* Grid view: one screen per agent (own messages + own box) and the preview as the fourth screen */
.sf-content:has(.sf-chatx.is-grid) { max-width: none; }
.sf-chatx.sf-chatx-split.is-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 1.25fr); }
.is-grid .sf-chatx-team-top, .is-grid .sf-chatx-stream, .is-grid .sf-chatx-composer, .is-grid .sf-chatx-list { display: none !important; }
.is-grid .sf-chatx-head { justify-content: flex-end; }
.sf-gridx { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: .5rem; }
.sf-gridx-col { display: flex; flex-direction: column; min-height: 0; border-radius: 16px; border: 1px solid var(--cx-line); background: var(--cx-surface); overflow: hidden; }
.sf-gridx-head { display: flex; align-items: center; gap: .6rem; padding: .65rem .8rem; border-bottom: 1px solid var(--cx-line); }
.sf-gridx-head .sf-vib { width: 36px; height: 36px; flex: 0 0 auto; }
.sf-gridx-label { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sf-gridx-label b { font-size: .95rem; }
.sf-gridx-label small { color: var(--cx-muted); font-size: .75rem; }
.sf-gridx-state { margin-left: auto; font-style: normal; font-size: .72rem; color: var(--sf-violet); font-weight: 700; }
.sf-gridx-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .75rem .6rem; scrollbar-width: thin; scrollbar-color: var(--cx-line) transparent; }
.sf-gridx-body .sf-cmsg { max-width: 100%; }
.sf-gridx-body .sf-cmsg .sf-vib { display: none; }
.sf-gridx-hint { text-align: center; color: var(--cx-muted); padding: 2rem .75rem; font-size: .9rem; }
.sf-gridx-form { display: flex; align-items: flex-end; gap: .45rem; padding: .55rem; border-top: 1px solid var(--cx-line); }
.sf-gridx-form textarea { flex: 1 1 auto; resize: none; min-height: 40px; max-height: 140px; border-radius: 14px; border: 1px solid var(--cx-line); background: var(--cx-input); color: var(--cx-text); padding: .55rem .75rem; font-size: .88rem; }
.sf-gridx-form .sf-chatx-send { width: 40px; height: 40px; flex: 0 0 auto; }
@media (max-width: 1199.98px) {
    .sf-chatx.sf-chatx-split.is-grid { grid-template-columns: 1fr; height: auto; }
    .sf-gridx { grid-template-columns: 1fr; }
    .sf-gridx-col { height: 60vh; }
    .is-grid .sf-chatx-preview { height: 70vh; }
}

/* Guided onboarding: one question per slide, over the new project's page */
.sf-onboarding-link { background: none; border: 0; padding: 0; color: var(--sf-violet); font-weight: 700; text-decoration: underline; cursor: pointer; }
.sf-guided { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(10, 6, 24, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sf-guided[hidden] { display: none; }
.sf-guided-box { width: min(860px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto; border-radius: 22px; padding: 1.4rem 1.5rem 1.2rem; background: var(--sf-card, #fff); color: var(--sf-ink, #1f1633);
    border: 1px solid rgba(124, 58, 237, .25); box-shadow: 0 30px 80px rgba(10, 6, 24, .4); transform: translateY(14px) scale(.98); opacity: 0; transition: transform .25s, opacity .25s; }
.sf-guided.is-open .sf-guided-box { transform: none; opacity: 1; }
:root[data-theme="dark"] .sf-guided-box { background: #160f2e; color: #f4f0ff; }
:root[data-theme="dark"] .sf-guided .btn-close { filter: invert(1); }
.sf-guided-head { display: flex; align-items: center; gap: 1rem; }
.sf-guided-head h2 { font-size: 1.15rem; font-weight: 800; margin: 0; }
.sf-guided-head .btn-close { margin-left: auto; }
.sf-guided-progress { height: 6px; border-radius: 99px; background: rgba(124, 58, 237, .14); margin: 1rem 0 .35rem; overflow: hidden; }
.sf-guided-progress i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #7c3aed, #db2777); transition: width .3s; }
.sf-guided-count { color: var(--sf-muted, #6b6485); font-weight: 600; }
.sf-guided-slides { min-height: 320px; padding-top: .9rem; }
.sf-guided-slide.is-in { animation: sf-guided-in .28s ease; }
@keyframes sf-guided-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.sf-guided-slide h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .9rem; line-height: 1.4; }
.sf-guided-name { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .9rem 1rem; border-radius: 14px; border: 1px dashed rgba(124, 58, 237, .4); margin-bottom: .5rem; }
.sf-guided-name b { font-size: 1.2rem; }
.sf-guided-name .btn { margin-left: auto; }
.sf-guided-slide [data-field="name"] { margin-bottom: .5rem; }
.sf-guided-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.sf-guided-kinds .sf-kind-card { padding: .8rem .5rem; }
.sf-guided-error { color: #dc2626; font-weight: 600; margin: .5rem 0 0; }
.sf-guided-nav { display: flex; gap: .6rem; margin-top: 1.1rem; }
body.sf-guided-on { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .sf-guided-box, .sf-guided-slide.is-in { transition: none; animation: none; } }

/* Project tools: reference files, numbers ("Power BI"), the project's task board (modals in every view + own page) */
.sf-files-drop { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border: 2px dashed rgba(124, 58, 237, .35); border-radius: 16px; cursor: pointer; margin: 0; transition: background .2s, border-color .2s; }
.sf-files-drop:hover, .sf-files-drop.is-over { background: rgba(124, 58, 237, .07); border-color: #7c3aed; }
.sf-files-drop > i { font-size: 1.8rem; color: var(--sf-violet, #7c3aed); }
.sf-files-drop span { display: flex; flex-direction: column; }
.sf-files-drop small { color: var(--sf-muted, #6b6485); }
.sf-files-progress { position: relative; height: 26px; margin-top: .8rem; border-radius: 99px; background: rgba(124, 58, 237, .12); overflow: hidden; }
.sf-files-progress i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #7c3aed, #db2777); transition: width .2s; }
.sf-files-progress small { position: relative; display: block; padding: 0 .8rem; line-height: 26px; font-weight: 600; color: #fff; mix-blend-mode: difference; }
.sf-files-error { color: #dc2626; font-weight: 600; margin: .6rem 0 0; }
.sf-files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin-top: 1rem; }
.sf-files-empty { grid-column: 1 / -1; text-align: center; color: var(--sf-muted, #6b6485); padding: 2rem 0; margin: 0; }
.sf-file { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .5rem; border: 1px solid rgba(124, 58, 237, .18); border-radius: 14px; min-width: 0; }
.sf-file-open { height: 110px; border: 0; border-radius: 10px; background: rgba(124, 58, 237, .08); display: grid; place-items: center; overflow: hidden; padding: 0; cursor: zoom-in; }
.sf-file-open img { width: 100%; height: 100%; object-fit: cover; }
.sf-file-open i { font-size: 2.4rem; color: var(--sf-violet, #7c3aed); }
.sf-file b { font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-file small { color: var(--sf-muted, #6b6485); font-size: .72rem; }
.sf-file-tools { position: absolute; top: .9rem; right: .9rem; display: flex; gap: .3rem; opacity: 0; transition: opacity .2s; }
.sf-file:hover .sf-file-tools, .sf-file:focus-within .sf-file-tools { opacity: 1; }
.sf-file-tools a, .sf-file-tools button { width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(13, 10, 28, .75); color: #fff; }
.sf-file-tools button:hover { background: #dc2626; }
.sf-files-viewer { margin-top: 1rem; }
.sf-files-viewer img, .sf-files-viewer video { display: block; max-width: 100%; max-height: 65vh; margin: 0 auto; border-radius: 12px; }
.sf-files-viewer iframe { width: 100%; height: 65vh; border: 1px solid rgba(124, 58, 237, .2); border-radius: 12px; background: #fff; }
.sf-files-viewer audio { width: 100%; }

.sf-metrics-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.sf-metric { padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid rgba(124, 58, 237, .16); background: var(--cx-surface, rgba(255, 255, 255, .8)); }
.sf-metric span { display: flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 700; color: var(--sf-muted, #6b6485); }
.sf-metric span i { width: 10px; height: 10px; border-radius: 50%; }
.sf-metric b { display: block; font-size: 2rem; font-weight: 800; line-height: 1.2; margin-top: .25rem; }
.sf-metric small { display: block; font-size: .72rem; color: var(--sf-muted, #6b6485); margin-top: .15rem; }
.sf-metric-visitors span i { background: #7c3aed; } .sf-metric-users span i { background: #22c55e; }
.sf-metric-active span i { background: #3b82f6; } .sf-metric-payments span i { background: #f59e0b; }
.sf-metrics-chart { margin-top: 1rem; padding: .6rem .4rem .2rem; border-radius: 16px; border: 1px solid rgba(124, 58, 237, .16); }
.sf-metrics-chart svg { display: block; width: 100%; height: auto; }
.sf-chart-grid { stroke: rgba(124, 58, 237, .12); stroke-width: 1; }
.sf-chart-label { fill: currentColor; opacity: .55; font-size: 12px; }
.sf-chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; padding: .4rem 0 .5rem; font-size: .8rem; font-weight: 600; }
.sf-chart-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.sf-chart-legend i { width: 14px; height: 4px; border-radius: 4px; }
.sf-metrics-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; color: var(--sf-muted, #6b6485); font-size: .8rem; }
.sf-metrics-live { color: #16a34a; font-weight: 700; }
.sf-metrics-live i { font-size: .55rem; animation: sf-live-blink 1.6s infinite; }
@keyframes sf-live-blink { 50% { opacity: .2; } }
@media (max-width: 767.98px) { .sf-metrics-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-metric b { font-size: 1.5rem; } }

/* Otto's Gráfico Financeiro */
.sf-finance-ranges { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; margin-bottom: 1rem; border-radius: 999px; border: 1px solid rgba(124, 58, 237, .16); }
.sf-finance-ranges button { border: 0; background: transparent; color: inherit; font-size: .82rem; font-weight: 700; padding: .35rem .85rem; border-radius: 999px; opacity: .7; }
.sf-finance-ranges button:hover { opacity: 1; }
.sf-finance-ranges button.is-on { background: #7c3aed; color: #fff; opacity: 1; }
.sf-finance-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-metric-received span i { background: #16a34a; } .sf-metric-count span i { background: #3b82f6; } .sf-metric-avg span i { background: #f59e0b; }
.sf-finance-chart { transition: opacity .15s; }
.sf-finance-chart.is-loading { opacity: .5; }
.sf-finance-chart .sf-chart-grid.is-base { stroke: rgba(124, 58, 237, .35); }
.sf-finance-hit { fill: transparent; }
.sf-finance-bar:hover .sf-finance-hit { fill: rgba(124, 58, 237, .07); }
.sf-finance-fill { fill: #16a34a; }
.sf-finance-bar:hover .sf-finance-fill { fill: #15803d; }
[data-finance-source].is-empty { color: inherit; font-weight: 600; }
@media (max-width: 575.98px) { .sf-finance-cards { grid-template-columns: 1fr; } }

.sf-tasks-dialog { max-width: min(1400px, 96vw); }
.sf-tasks-frame { display: block; width: 100%; height: 78vh; border: 0; border-radius: 0 0 18px 18px; }
body.sf-embed { background: transparent; }
.sf-embed-main { padding: 1rem 1.2rem 1.5rem; }
.sf-embed .sf-page-head { margin-bottom: 1rem; }
.sf-embed .sf-board-col { min-width: min(360px, 100%); }
:root[data-theme="dark"] .sf-metric, :root[data-theme="dark"] .sf-metrics-chart { background: rgba(18, 10, 40, .55); border-color: rgba(167, 139, 250, .25); }

/* A vib calling the viber (half an hour with nobody working): it hops and glows until clicked */
.sf-agent-card.is-calling .sf-vib, .sf-gridx-head.is-calling .sf-vib { animation: sf-vib-call 0.9s ease-in-out infinite; box-shadow: 0 0 0 4px rgba(251, 191, 36, .55), 0 0 22px rgba(251, 191, 36, .7); }
.sf-agent-card.is-calling, .sf-gridx-head.is-calling { cursor: pointer; }
.sf-agent-card.is-calling::after { content: "!"; position: absolute; top: -6px; left: 30px; width: 18px; height: 18px; border-radius: 50%; background: #f59e0b; color: #1f1b33; font-weight: 800; font-size: .75rem; display: grid; place-items: center; }
.sf-agent-card { position: relative; }
@keyframes sf-vib-call { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-9px) scale(1.04, .96); } 60% { transform: translateY(0) scale(1.06, .92); } }
@media (prefers-reduced-motion: reduce) { .sf-agent-card.is-calling .sf-vib, .sf-gridx-head.is-calling .sf-vib { animation: none; } }
.sf-files-text { max-height: 65vh; overflow: auto; margin: 0; padding: 1rem; border-radius: 12px; background: rgba(13, 10, 28, .06); border: 1px solid rgba(124, 58, 237, .2); white-space: pre-wrap; word-break: break-word; font-size: .85rem; }
:root[data-theme="dark"] .sf-files-text { background: rgba(255, 255, 255, .04); color: #ece9f5; }
.sf-project-actions .sf-project-bi { grid-column: 1 / -1; } /* "Ver Power BI": full width under Preview / Edit */

/* "Ocultar identificação da empresa": the project's name, preview and links hidden (screen sharing, recordings) */
.sf-hide-brand-on { display: none; }
.sf-hide-brand .sf-hide-brand-on { display: inline; }
.sf-hide-brand .sf-hide-brand-off { display: none; }
.sf-hide-brand .sf-chatx-title, .sf-hide-brand .sf-project-title, .sf-hide-brand .sf-project-desc, .sf-hide-brand .sf-page-sub,
.sf-hide-brand [data-chat-preview-url], .sf-hide-brand .sf-qb-url, .sf-hide-brand .sf-browser-url, .sf-hide-brand .sf-board-col h2,
.sf-hide-brand .sf-files-grid b { filter: blur(7px); user-select: none; pointer-events: none; }
.sf-hide-brand .sf-chatx-preview iframe, .sf-hide-brand .sf-browser-viewport iframe, .sf-hide-brand .sf-carousel-preview iframe,
.sf-hide-brand .sf-files-grid img, .sf-hide-brand .sf-files-viewer { filter: blur(22px); }
.sf-hide-brand [data-chat-preview-open], .sf-hide-brand .sf-qb-open, .sf-hide-brand a[href^="http"][target="_blank"]:not(.btn-close) { visibility: hidden; }
.sf-hide-brand .sf-cmsg-bubble a[href*="preview."], .sf-hide-brand .sf-cmsg-bubble a[href^="http"] { filter: blur(6px); pointer-events: none; }

/* Plans: what the viber uses of their plan (codes, storage) */
.sf-plan-usage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.sf-plan-usage > div { padding: .9rem 1.1rem; border-radius: 16px; border: 1px solid rgba(124, 58, 237, .18); background: var(--sf-card, #fff); display: grid; grid-template-columns: 1fr auto; gap: .35rem .8rem; align-items: center; }
.sf-plan-usage span { font-weight: 600; color: var(--sf-muted, #6b6485); }
.sf-plan-usage progress { grid-column: 1 / -1; width: 100%; height: 8px; border: 0; border-radius: 99px; overflow: hidden; background: rgba(124, 58, 237, .12); appearance: none; }
.sf-plan-usage progress::-webkit-progress-bar { background: rgba(124, 58, 237, .12); }
.sf-plan-usage progress::-webkit-progress-value { background: linear-gradient(90deg, #7c3aed, #db2777); border-radius: 99px; }
.sf-plan-usage progress::-moz-progress-bar { background: linear-gradient(90deg, #7c3aed, #db2777); }
:root[data-theme="dark"] .sf-plan-usage > div { background: rgba(18, 10, 40, .55); }
@media (max-width: 575.98px) { .sf-plan-usage { grid-template-columns: 1fr; } }

/* Home: the vibs are alive (analyse, test, suggest — and build with the viber's go) */
.sf-alive-band { position: relative; overflow: hidden; border-radius: 0; background-color: #fff;
    background-image: radial-gradient(ellipse at 15% 0%, rgba(124, 58, 237, .14), transparent 55%), radial-gradient(ellipse at 90% 100%, rgba(34, 197, 94, .1), transparent 50%); }
.sf-alive-head { max-width: 760px; }
.sf-alive-pulse { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; margin-right: .5rem; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: sf-alive-ping 1.8s infinite; vertical-align: middle; }
@keyframes sf-alive-ping { 70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.sf-alive-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.sf-alive-card { position: relative; padding: 1.4rem; border-radius: 22px; background: var(--sf-card, #fff); border: 1px solid color-mix(in srgb, var(--agent, #7c3aed) 30%, transparent);
    box-shadow: 0 18px 40px rgba(10, 6, 24, .08); transition: transform .25s, box-shadow .25s; }
.sf-alive-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px color-mix(in srgb, var(--agent, #7c3aed) 22%, transparent); }
.sf-alive-top { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.sf-alive-top .sf-vib { width: 54px; height: 54px; flex: 0 0 auto; }
.sf-alive-top b { display: block; font-size: 1.05rem; }
.sf-alive-top small { color: var(--sf-muted, #6b6485); }
.sf-alive-icon { margin-left: auto; font-size: 1.4rem; color: var(--agent, #7c3aed); }
.sf-alive-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: .4rem; }
.sf-alive-card p { color: var(--sf-muted, #6b6485); margin-bottom: 1rem; }
.sf-alive-say { display: flex; gap: .55rem; padding: .75rem .9rem; border-radius: 14px; background: var(--agent-soft, rgba(124, 58, 237, .1)); font-size: .88rem; font-style: italic; }
.sf-alive-say i { color: var(--agent, #7c3aed); flex: 0 0 auto; margin-top: .1rem; }
.sf-alive-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 2rem 0 0; counter-reset: none; }
.sf-alive-steps li { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; border-radius: 16px; border: 1px dashed rgba(124, 58, 237, .35); }
.sf-alive-step-icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #7c3aed, #db2777); color: #fff; font-size: 1.1rem; }
.sf-alive-steps b { display: block; }
.sf-alive-steps small { color: var(--sf-muted, #6b6485); }
.sf-alive-note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 1.4rem 0 0; font-weight: 600; text-align: center; }
.sf-alive-note i { color: #22c55e; font-size: 1.2rem; }
:root[data-theme="dark"] .sf-alive-card { background: rgba(18, 10, 40, .6); }
@media (max-width: 991.98px) { .sf-alive-grid { grid-template-columns: 1fr; } .sf-alive-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .sf-alive-steps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sf-alive-pulse { animation: none; } .sf-alive-card { transition: none; } }

/* Plans with limits (home + /planos) */
.sf-home-plan-limits { margin: .6rem 0 .4rem; padding: .7rem .85rem; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(167, 139, 250, .2); display: grid; gap: .4rem; }
.sf-home-plan-limits li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: rgba(255, 255, 255, .85); }
.sf-home-plan-limits li i { color: #a78bfa; font-size: 1.05rem; }
.sf-home-plan-limits b { color: #fff; }
.sf-home-plan-features { margin: 0 0 1.1rem; display: grid; gap: .35rem; }
.sf-home-plan-features li { display: flex; gap: .5rem; font-size: .88rem; color: rgba(255, 255, 255, .75); }
.sf-home-plan-features li i { color: #34d399; }
.sf-link-light { color: #c4b5fd; font-weight: 600; text-decoration: none; }
.sf-link-light:hover { color: #fff; }
:root[data-theme="light"] .sf-home-plan-limits { background: var(--sf-soft); border-color: rgba(124, 58, 237, .18); }
:root[data-theme="light"] .sf-home-plan-limits li { color: var(--sf-body); }
:root[data-theme="light"] .sf-home-plan-limits li i { color: var(--sf-primary); }
:root[data-theme="light"] .sf-home-plan-limits b { color: var(--sf-ink); }
:root[data-theme="light"] .sf-home-plan-features li { color: var(--sf-body); }
:root[data-theme="light"] .sf-home-plan-features li i { color: #059669; }
:root[data-theme="light"] .sf-link-light { color: var(--sf-primary); }
:root[data-theme="light"] .sf-link-light:hover { color: var(--sf-primary-600); }
.sf-pricing-hero { padding-top: 3.5rem; }
.sf-pricing-faq .sf-faq { max-width: 760px; display: grid; gap: .7rem; }
.sf-faq-item { background: var(--sf-card); border: 1px solid var(--sf-border); border-radius: 16px; padding: 1rem 1.2rem; }
.sf-faq-item summary { cursor: pointer; font-weight: 700; color: var(--sf-ink); }
.sf-faq-item p { margin: .6rem 0 0; color: var(--sf-muted); }

/* Why a subscription, not an API */
.sf-sub-points { display: grid; gap: .85rem; margin: 1.2rem 0 0; }
.sf-sub-points li { display: flex; gap: .8rem; align-items: flex-start; }
.sf-sub-points li > i { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--sf-soft, #f1ebff); color: var(--sf-primary); font-size: 1.1rem; }
.sf-sub-points b { display: block; color: var(--sf-ink); }
.sf-sub-points small { color: var(--sf-muted); }
.sf-sub-compare { padding: 1.4rem; border-radius: 24px; background: var(--sf-card); border: 1px solid var(--sf-border); box-shadow: 0 24px 60px rgba(76, 29, 149, .12); display: grid; gap: .6rem; }
.sf-sub-side { border-radius: 18px; padding: 1.1rem 1.2rem; display: grid; gap: .25rem; }
.sf-sub-side.is-api { background: rgba(239, 68, 68, .07); border: 1px solid rgba(239, 68, 68, .25); }
.sf-sub-side.is-plan { background: rgba(16, 185, 129, .08); border: 1px solid rgba(16, 185, 129, .35); }
.sf-sub-tag { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: .4rem; }
.is-api .sf-sub-tag { color: #dc2626; }
.is-plan .sf-sub-tag { color: #059669; }
.sf-sub-value { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; color: var(--sf-ink); line-height: 1.1; }
.is-api .sf-sub-value { text-decoration: line-through; text-decoration-color: rgba(220, 38, 38, .6); }
.sf-sub-side small { color: var(--sf-muted); }
.sf-sub-arrow { text-align: center; color: var(--sf-primary); font-size: 1.3rem; line-height: 1; }
.sf-sub-note { margin: .3rem 0 0; font-size: .78rem; color: var(--sf-muted); display: flex; gap: .4rem; }

/* Own domain + automatic HTTPS strip */
.sf-dom-strip { padding: 3rem 0 3.5rem; }
.sf-dom-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; padding: 1.2rem 1.4rem; border-radius: 22px; background: linear-gradient(135deg, rgba(16, 185, 129, .1), rgba(124, 58, 237, .08)); border: 1px solid rgba(16, 185, 129, .3); }
.sf-dom-lead { display: flex; align-items: center; gap: 1rem; flex: 1 1 340px; }
.sf-dom-lead b { display: block; font-size: 1.1rem; color: var(--sf-ink); }
.sf-dom-lead small { color: var(--sf-muted); }
.sf-dom-lock { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #10b981; color: #fff; font-size: 1.5rem; box-shadow: 0 10px 24px rgba(16, 185, 129, .35); }
.sf-dom-steps { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.sf-dom-steps li { display: flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; background: var(--sf-card); border: 1px solid var(--sf-border); font-size: .85rem; font-weight: 600; color: var(--sf-ink); }
.sf-dom-steps li i { color: #10b981; }

/* First-visit tour */
.sf-tour-ring { position: fixed; z-index: 2000; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 3px #a78bfa, 0 0 0 9999px rgba(10, 6, 24, .5); transition: top .25s, left .25s, width .25s, height .25s; }
.sf-tour { position: fixed; z-index: 2001; width: min(320px, calc(100vw - 24px)); padding: 1rem 1.1rem .8rem; border-radius: 16px; background: var(--sf-card); color: var(--sf-ink); border: 1px solid var(--sf-border); box-shadow: 0 24px 60px rgba(10, 6, 24, .35); transition: top .25s, left .25s; }
.sf-tour::before { content: ""; position: absolute; width: 14px; height: 14px; background: inherit; border: inherit; transform: rotate(45deg); }
.sf-tour[data-side="below"]::before { top: -8px; left: calc(var(--tour-arrow, 24px) - 7px); border-right: 0; border-bottom: 0; }
.sf-tour[data-side="above"]::before { bottom: -8px; left: calc(var(--tour-arrow, 24px) - 7px); border-left: 0; border-top: 0; }
.sf-tour[data-side="right"]::before { left: -8px; top: calc(var(--tour-arrow, 24px) - 7px); border-top: 0; border-right: 0; }
.sf-tour[data-side="inside"]::before { display: none; }
.sf-tour-text { margin: 0 0 .8rem; font-size: .95rem; line-height: 1.45; }
.sf-tour-foot { display: flex; align-items: center; gap: .6rem; }
.sf-tour-count { font-size: .78rem; color: var(--sf-muted); margin-right: auto; }
.sf-tour-skip { background: none; border: 0; padding: 0; font-size: .82rem; color: var(--sf-muted); }
.sf-tour-skip:hover { color: var(--sf-ink); }
@media (prefers-reduced-motion: reduce) { .sf-tour-ring, .sf-tour { transition: none; } }
.sf-game-tag.is-tool.is-tour { opacity: 1; } /* the tour shows the tool names that normally appear on hover */

/* The vibs' initiative: the viber answers the Tech lead with a click */
.sf-init-ask { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .6rem; padding: .6rem .8rem; border-radius: 16px; background: var(--sf-card); border: 1px solid color-mix(in srgb, var(--agent, #7c3aed) 45%, transparent); box-shadow: 0 10px 28px rgba(10, 6, 24, .14); animation: sfInitIn .25s ease-out; }
.sf-init-ask b { margin-right: auto; font-size: .85rem; color: var(--agent, var(--sf-primary)); }
.is-game .sf-init-ask { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); width: min(560px, calc(100% - 32px)); z-index: 6; pointer-events: auto; margin: 0; }
@keyframes sfInitIn { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .sf-init-ask { animation: none; } }

/* Conectar IA: the one-command install */
.sf-engine-auto { position: relative; border: 2px solid rgba(124, 58, 237, .35); }
.sf-engine-auto-badge { position: absolute; top: -11px; right: 18px; padding: .15rem .6rem; border-radius: 999px; background: var(--sf-grad); color: #fff; font-size: .72rem; font-weight: 700; }
.sf-engine-auto-ai { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.sf-engine-auto-ai .sf-wiz-choice { cursor: pointer; margin: 0; }
.sf-engine-auto-ai .sf-wiz-choice:has(input:checked) { border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, .18); }
.sf-engine-auto-ai .sf-wiz-choice:has(input:focus-visible) { outline: 2px solid var(--sf-primary); outline-offset: 2px; }
.sf-engine-auto-os { margin-top: 1rem; }
.sf-engine-auto-os h3 { font-size: 1rem; font-weight: 800; display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; }
.sf-engine-auto-os h3 span { font-weight: 600; color: var(--sf-muted); }
.sf-engine-auto-does { margin-top: 1.2rem; padding: .9rem 1rem; border-radius: 14px; background: var(--sf-soft); }
.sf-engine-auto-does ul { margin: .5rem 0; display: grid; gap: .3rem; }
.sf-engine-auto-does li { display: flex; gap: .5rem; font-size: .9rem; }
.sf-engine-auto-does li i { color: #059669; }
:root[data-theme="dark"] .sf-engine-auto-does { background: rgba(124, 58, 237, .12); }
.sf-engine-manual > summary { cursor: pointer; font-weight: 700; color: var(--sf-muted); padding: .4rem 0 .8rem; list-style: none; }
.sf-engine-manual > summary::-webkit-details-marker { display: none; }
.sf-engine-manual > summary:hover { color: var(--sf-primary); }
@media (max-width: 575.98px) { .sf-engine-auto-ai { grid-template-columns: 1fr; } }

/* Tasks: formatted description (editor + card) */
.sf-rte { border: 1px solid var(--sf-border); border-radius: 12px; background: var(--sf-card); overflow: hidden; }
.sf-rte:focus-within { border-color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.sf-rte-bar { display: flex; flex-wrap: wrap; gap: .15rem; padding: .35rem; border-bottom: 1px solid var(--sf-border); background: var(--sf-soft); }
.sf-rte-bar button, .sf-rte-img { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--sf-body); cursor: pointer; margin: 0; }
.sf-rte-bar button:hover, .sf-rte-img:hover { background: rgba(124, 58, 237, .12); color: var(--sf-primary); }
.sf-rte-area { min-height: 160px; max-height: 420px; overflow-y: auto; padding: .75rem .9rem; outline: none; line-height: 1.55; }
.sf-rte-area.is-empty::before { content: attr(data-placeholder); color: var(--sf-muted); pointer-events: none; }
.sf-rte-area img, .sf-task-rich img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: .4rem 0; }
.sf-rte-area blockquote, .sf-task-rich blockquote { border-left: 3px solid var(--sf-primary); padding-left: .7rem; margin: .4rem 0; color: var(--sf-muted); }
.sf-rte-area h3, .sf-task-rich h3 { font-size: 1.05rem; font-weight: 800; margin: .5rem 0 .3rem; }
.sf-rte-area p, .sf-task-rich p { margin: 0 0 .45rem; }
.sf-task-rich { position: relative; max-height: 190px; overflow: hidden; font-size: .88rem; color: var(--sf-body); margin: .3rem 0 .5rem; }
.sf-task-rich::after { content: ""; position: absolute; inset: auto 0 0; height: 36px; background: linear-gradient(transparent, var(--sf-card)); pointer-events: none; }
.sf-task-rich ul, .sf-task-rich ol { padding-left: 1.2rem; margin: 0 0 .45rem; }
:root[data-theme="dark"] .sf-rte-bar { background: rgba(124, 58, 237, .12); }

/* Rotinas: post-its (modal) and the editor (modal + the Tech lead's card in the chat) */
.sf-routines-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .9rem; }
.sf-routines-empty { color: var(--sf-muted); margin: 0; }
.sf-postit { position: relative; padding: .85rem .9rem 1rem; border-radius: 4px 4px 18px 4px; color: #2a2238; box-shadow: 0 10px 22px rgba(10, 6, 24, .16); display: grid; gap: .25rem; transform: rotate(-1deg); }
.sf-postit:nth-child(even) { transform: rotate(1.2deg); }
.sf-postit::before { content: ""; position: absolute; top: -7px; left: 50%; width: 46px; height: 14px; margin-left: -23px; background: rgba(255, 255, 255, .55); border-radius: 3px; }
.sf-postit-0 { background: #fde68a; } .sf-postit-1 { background: #fbcfe8; } .sf-postit-2 { background: #bfdbfe; } .sf-postit-3 { background: #bbf7d0; } .sf-postit-4 { background: #fed7aa; }
.sf-postit-head { display: flex; gap: .45rem; align-items: flex-start; }
.sf-postit-head i { font-size: 1.05rem; margin-top: .05rem; }
.sf-postit-head b { font-size: .95rem; line-height: 1.25; }
.sf-postit-every { font-weight: 700; font-size: .82rem; }
.sf-postit small { font-size: .74rem; color: #4b4560; }
.sf-routine-rows { display: grid; gap: .45rem; }
.sf-routine-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .35rem .4rem; border-radius: 12px; background: var(--sf-soft); }
.sf-routine-row > i { color: var(--sf-primary); width: 22px; text-align: center; }
.sf-routine-name { flex: 1 1 200px; min-width: 0; }
.sf-routine-when { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; margin-left: auto; }
.sf-routine-n { width: 70px; flex: 0 0 auto; }
.sf-routine-unit { width: 110px; flex: 0 0 auto; }
:root[data-theme="dark"] .sf-routine-row { background: rgba(124, 58, 237, .12); }
.sf-routine-every { font-size: .8rem; color: var(--sf-muted); }
.sf-routine-x { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--sf-muted); }
.sf-routine-x:hover { background: rgba(239, 68, 68, .12); color: #dc2626; }
.sf-routine-pick { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .8rem 0 .5rem; }
.sf-routine-pick-label { font-size: .8rem; color: var(--sf-muted); font-weight: 700; }
.sf-routine-chip { border: 1px dashed rgba(124, 58, 237, .45); background: transparent; color: var(--sf-primary); border-radius: 999px; padding: .2rem .65rem; font-size: .8rem; font-weight: 600; display: inline-flex; gap: .3rem; align-items: center; }
.sf-routine-chip:hover { background: var(--sf-soft); }
.sf-routine-custom { margin-top: .3rem; }
.sf-routine-mode { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; font-size: .85rem; font-weight: 600; }
.sf-routine-mode .form-select { width: auto; }
.sf-routine-offer { margin: .8rem 0; padding: 1rem; border-radius: 18px; background: var(--sf-card); border: 1px solid color-mix(in srgb, var(--agent, #eab308) 45%, transparent); box-shadow: 0 12px 30px rgba(10, 6, 24, .12); }
.sf-routine-offer-head b { color: var(--agent, var(--sf-primary)); font-size: .85rem; }
.sf-routine-offer-head p { margin: .2rem 0 .8rem; }
.sf-routine-offer-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.is-game .sf-routine-offer { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); width: min(680px, calc(100% - 32px)); max-height: calc(100% - 120px); overflow-y: auto; z-index: 7; margin: 0; pointer-events: auto; }

/* Tasks: open a card (the whole description; images to save) */
.sf-task-open { all: unset; cursor: pointer; }
.sf-task-open:hover, .sf-task-open:focus-visible { color: var(--sf-primary); text-decoration: underline; }
.sf-task-rich { cursor: pointer; }
.sf-task-full { line-height: 1.6; color: var(--sf-body); }
.sf-task-full img { max-width: 100%; height: auto; border-radius: 12px; display: block; margin: .6rem 0 .3rem; box-shadow: 0 8px 24px rgba(10, 6, 24, .12); }
.sf-task-full h3 { font-size: 1.1rem; font-weight: 800; margin: 1rem 0 .4rem; color: var(--sf-ink); }
.sf-task-full blockquote { border-left: 3px solid var(--sf-primary); padding-left: .8rem; color: var(--sf-muted); }
.sf-task-img-save { margin-bottom: .8rem; }

/* Marketing's art in the chat */
.sf-cart { margin: 0 0 .7rem; display: grid; gap: .45rem; justify-items: start; }
.sf-cart img { max-width: min(100%, 360px); height: auto; border-radius: 12px; box-shadow: 0 8px 22px rgba(10, 6, 24, .18); }
.sf-cart > a { display: block; max-width: min(100%, 380px); max-height: 560px; overflow-y: auto; border-radius: 12px; } /* a tall full-page layout scrolls inside the card */
.sf-cart > a img { display: block; max-width: 100%; }
/* Luna's post draft in the chat: picture, caption, approve / adjust (in the Game view: a small picture and the start of the text) */
.sf-cpost-caption { margin: 0 0 .5rem; font-size: .88rem; white-space: pre-wrap; word-break: break-word; }
.sf-cpost-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.is-game .sf-cpost .sf-cart img, .is-game .sf-cpost .sf-cart > a { max-width: 160px; }
.is-game .sf-cpost .sf-cart > .btn { display: none; }
.is-game .sf-cpost-caption { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }

/* Sharing a code: invites and the codes shared with me */
.sf-invite-page { display: grid; place-items: center; min-height: 60vh; }
.sf-invite-card { max-width: 520px; text-align: center; padding: 2rem 1.6rem; }
.sf-invite-icon { width: 54px; height: 54px; border-radius: 16px; display: inline-grid; place-items: center; background: var(--sf-soft); color: var(--sf-primary); font-size: 1.5rem; margin-bottom: .8rem; flex: 0 0 auto; }
.sf-invite-icon.is-gone { color: #dc2626; background: rgba(239, 68, 68, .1); }
.sf-invite-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: .9rem 1rem; margin-bottom: 1rem; border-radius: 16px; background: var(--sf-card); border: 1px solid rgba(124, 58, 237, .35); box-shadow: 0 8px 22px rgba(10, 6, 24, .08); }
.sf-invite-banner .sf-invite-icon { margin: 0; width: 42px; height: 42px; font-size: 1.15rem; }
.sf-invite-banner b { display: block; }
.sf-invite-banner small { color: var(--sf-muted); }
.sf-shared-code { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 16px; background: var(--sf-card); border: 1px solid var(--sf-border); text-decoration: none; color: var(--sf-ink); }
.sf-shared-code:hover { border-color: var(--sf-primary); color: var(--sf-ink); }
.sf-shared-code b { display: block; }
.sf-shared-code small { color: var(--sf-muted); }

/* People of a shared code: their colour (same palette as the vibs) */
.sf-pcolor-0 { --agent: #8b5cf6; --agent-2: #3a2667; --agent-soft: rgba(139, 92, 246, .16); }
.sf-pcolor-1 { --agent: #ec4899; --agent-2: #631e40; --agent-soft: rgba(236, 72, 153, .16); }
.sf-pcolor-2 { --agent: #3b82f6; --agent-2: #183667; --agent-soft: rgba(59, 130, 246, .16); }
.sf-pcolor-3 { --agent: #f97316; --agent-2: #683009; --agent-soft: rgba(249, 115, 22, .16); }
.sf-pcolor-4 { --agent: #22c55e; --agent-2: #0e5227; --agent-soft: rgba(34, 197, 94, .16); }
.sf-pcolor-5 { --agent: #14b8a6; --agent-2: #084d45; --agent-soft: rgba(20, 184, 166, .16); }
.sf-pcolor-6 { --agent: #eab308; --agent-2: #624b03; --agent-soft: rgba(234, 179, 8, .16); }
.sf-pcolor-7 { --agent: #ef4444; --agent-2: #641c1c; --agent-soft: rgba(239, 68, 68, .16); }
.sf-pcolor-8 { --agent: #a855f7; --agent-2: #462367; --agent-soft: rgba(168, 85, 247, .16); }
.sf-pcolor-9 { --agent: #64748b; --agent-2: #2a303a; --agent-soft: rgba(100, 116, 139, .16); }

/* Share modal: invite form + the people */
.sf-members-colors { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .2rem; }
.sf-members-colors button { width: 30px; height: 30px; border-radius: 10px; border: 2px solid transparent; background: var(--agent); box-shadow: 0 0 0 1px var(--sf-border); }
.sf-members-colors button[aria-checked="true"] { border-color: var(--sf-card); box-shadow: 0 0 0 2px var(--agent); }
.sf-members-link { margin-top: .8rem; padding: .7rem .8rem; border-radius: 12px; background: var(--sf-soft); }
.sf-members-head { font-size: .95rem; font-weight: 700; margin: 1.3rem 0 .6rem; }
.sf-members-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.sf-members-list li { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 1px solid var(--sf-border); border-radius: 12px; background: var(--sf-card); }
.sf-members-list .sf-person-dot { width: 34px; height: 34px; border-radius: 11px; background: var(--agent); color: #fff; display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; overflow: hidden; }
.sf-person-dot img { width: 100%; height: 100%; object-fit: cover; }
.sf-members-list b { display: block; font-size: .9rem; }
.sf-members-list small { color: var(--sf-muted); }
.sf-members-list .badge { background: var(--agent-soft); color: var(--agent); font-weight: 600; }
.sf-members-list .is-pending { opacity: .7; }
.sf-members-empty { color: var(--sf-muted); font-size: .9rem; }

/* People in the chat: cards next to the vibs, their lines */
.sf-person-card .sf-person-face { width: 34px; height: 34px; border-radius: 12px; background: var(--agent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .95rem; overflow: hidden; flex: 0 0 auto; }
.sf-person-card .sf-person-face img { width: 100%; height: 100%; object-fit: cover; }
.sf-person-card.is-online .sf-person-face { box-shadow: 0 0 0 2px var(--sf-card), 0 0 0 4px #22c55e; }
.sf-cmsg.is-person .sf-person-face { width: 34px; height: 34px; border-radius: 12px; background: var(--agent); color: #fff; display: grid; place-items: center; font-weight: 800; overflow: hidden; flex: 0 0 auto; }
.sf-cmsg.is-person .sf-person-face img { width: 100%; height: 100%; object-fit: cover; }
.sf-cmsg.is-person .sf-cmsg-bubble { border-left: 3px solid var(--agent); }
.sf-chatx-readonly { padding: .8rem 1rem; border-radius: 14px; background: var(--sf-soft); color: var(--sf-muted); font-size: .9rem; text-align: center; }

/* Tasks: a card given to a person of the code; a shared code's column */
.sf-task-person { display: flex; align-items: center; gap: .45rem; margin-top: .5rem; padding: .3rem .5rem; border-radius: 10px; background: var(--agent-soft); font-size: .8rem; }
.sf-task-person span { width: 22px; height: 22px; border-radius: 7px; background: var(--agent); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .72rem; }
.sf-task-person small { color: var(--sf-muted); margin-left: auto; }
.sf-board-shared { color: var(--sf-primary); }

/* The setup wizard (share → routines → approval → the suggested routines) */
.sf-wizard-bar { height: 4px; background: var(--sf-soft); }
.sf-wizard-bar i { display: block; height: 100%; width: 25%; background: var(--sf-primary); transition: width .3s ease; }
.sf-wizard h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: .3rem; }
.sf-wchoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .7rem; margin-top: .8rem; }
.sf-wchoice { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: 1rem; border-radius: 16px; border: 1.5px solid var(--sf-border); background: var(--sf-card); color: var(--sf-ink); text-align: left; }
.sf-wchoice i { font-size: 1.4rem; color: var(--sf-primary); }
.sf-wchoice small { color: var(--sf-muted); }
.sf-wchoice:hover, .sf-wchoice[aria-pressed="true"] { border-color: var(--sf-primary); background: var(--sf-soft); }
.sf-routine-who { max-width: 200px; flex: 0 1 200px; }
.sf-postit-who { font-weight: 700; }

/* v0.54 "Meus codes": a card per virtual office (the project's colours on top, one button) */
.sf-office-card { padding-top: 0; overflow: hidden; }
.sf-office-band { height: 64px; margin: 0 -1.35rem; background: linear-gradient(120deg, var(--sf-primary), #c026d3); display: flex; align-items: flex-end; justify-content: flex-end; gap: .35rem; padding: .6rem 1rem; }
.sf-office-dot { width: 18px; height: 18px; border-radius: 6px; border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.sf-office-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem; color: var(--sf-primary); background: var(--sf-card); border: 1px solid var(--sf-border); box-shadow: 0 8px 20px rgba(18, 13, 36, .12); margin-top: -36px; flex: 0 0 auto; }
.sf-office-enter { margin-top: auto; width: 100%; }
.sf-user-menu .sf-theme-seg button.active { background: var(--sf-card); color: var(--sf-primary); box-shadow: 0 1px 4px rgba(18, 13, 36, .12); }
.sf-modules-intro { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.4rem; margin-bottom: 1.5rem; border-radius: 20px; background: var(--sf-soft); }
.sf-modules-intro > i { font-size: 1.8rem; color: var(--sf-primary); }
.sf-modules-intro h2 { font-size: 1.05rem; font-weight: 800; margin-bottom: .35rem; }
.sf-modules-intro p { margin: 0 0 .4rem; color: var(--sf-muted); }
.sf-modules-intro p:last-child { margin-bottom: 0; }

/* v0.54 inside a code: no side menu (the button by the logo opens it over the office), floating header, full page */
html.sf-in-code .sf-sidebar { display: none; }
@media (min-width: 992px) {
    html.sf-in-code .sf-sidebar { display: block; position: fixed; left: 12px; top: 64px; bottom: 12px; height: auto; width: 272px; z-index: 1070; border-radius: 22px;
        border: 1px solid var(--sf-border); box-shadow: 0 24px 60px rgba(10, 6, 24, .3); transform: translateX(calc(-100% - 24px)); transition: transform .22s ease; overflow-y: auto;
        background: var(--sf-card); backdrop-filter: blur(16px); }
    html.sf-in-code.sf-code-nav-open .sf-sidebar { transform: none; }
    html.sf-in-code .sf-sidebar .sf-sidebar-head { display: none !important; }
    html.sf-in-code .sf-sidebar .sf-sidebar-inner { padding-top: 1rem; }
}
@media (max-width: 991.98px) { html.sf-in-code .sf-sidebar.offcanvas-lg { display: flex; } }
html.sf-in-code .sf-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1060; padding: 10px 14px; background: transparent !important; backdrop-filter: none; pointer-events: none; }
html.sf-in-code .sf-topbar > * { pointer-events: auto; }
html.sf-in-code .sf-topbar .sf-topbar-title { background: transparent; border: 0; box-shadow: none; padding: .2rem .4rem; flex: 0 1 auto; max-width: min(340px, 42vw); }
html.sf-in-code .sf-topbar .sf-chatx-title { font-size: 1rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
html.sf-in-code .sf-topbar .sf-user { background: var(--cx-surface, rgba(255, 255, 255, .85)); border: 1px solid var(--cx-line, var(--sf-border)); border-radius: 18px; padding: .3rem .6rem; backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(10, 6, 24, .14); }
.sf-code-brand { display: flex; align-items: center; gap: .4rem; padding: .3rem; border-radius: 16px; background: #120a28; box-shadow: 0 8px 24px rgba(10, 6, 24, .25); }
.sf-code-brand a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.sf-code-brand a:hover { background: rgba(255, 255, 255, .22); }
.sf-code-brand button { width: 38px; height: 38px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1.25rem; display: grid; place-items: center; }
.sf-code-brand button:hover, html.sf-in-code-nav-open .sf-code-brand button { background: rgba(255, 255, 255, .22); }
html.sf-in-code .sf-content { padding: 64px 1rem .75rem; max-width: none; }
html.sf-in-code .sf-content:has(.sf-chatx.is-game) { padding: 0; }
html.sf-in-code .sf-chatx.is-game { height: 100vh; min-height: 0; border-radius: 0; }
html.sf-in-code .is-game .sf-chatx-head { top: 72px; right: 64px; }
html.sf-in-code .is-game .sf-game-corner { top: 72px; }

/* v0.54 the team picker (guided onboarding, ⋯ → Equipe) */
.sf-team-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; }
.sf-team-card { position: relative; display: flex; align-items: center; gap: .6rem; padding: .75rem; border-radius: 16px; border: 1.5px solid var(--sf-border); background: var(--sf-card); cursor: pointer; }
.sf-team-card input { position: absolute; opacity: 0; pointer-events: none; }
.sf-team-card .sf-vib { width: 38px; height: 36px; flex: 0 0 auto; }
.sf-team-text b { display: block; font-size: .92rem; }
.sf-team-text small { color: var(--sf-muted); }
.sf-team-text .sf-team-does { display: block; margin-top: .2rem; font-style: normal; font-size: .76rem; line-height: 1.3; color: var(--sf-muted); }
.sf-team-check { position: absolute; top: .55rem; right: .6rem; color: var(--agent, var(--sf-primary)); opacity: 0; font-size: 1.1rem; }
.sf-team-text { flex: 1 1 auto; min-width: 0; padding-right: 1.1rem; }
.sf-team-card:has(input:checked) { border-color: var(--agent, var(--sf-primary)); background: var(--agent-soft, var(--sf-soft)); }
.sf-team-card:has(input:checked) .sf-team-check { opacity: 1; }
.sf-team-card.is-required { cursor: default; }
.sf-guided-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.sf-guided-modes .sf-kind-card { padding: 1rem; }
.sf-guided-modes .sf-kind-card small { color: var(--sf-muted); }

/* v0.54 Vibers Radio in the office (modal) */
.sf-radio-frame { display: block; width: 100%; height: min(72vh, 640px); border: 0; border-radius: 0 0 18px 18px; }

/* v0.54 recurring tasks */
.sf-task-recur { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; color: var(--sf-primary); background: var(--sf-soft); border-radius: 999px; padding: .1rem .5rem; }

/* v0.56 the docks (bottom right): the pomodoro (red ball, its time) and the radio (purple ball); the pomodoro opens above them */
.sf-docks { display: none; }
html.sf-in-code .sf-docks { display: flex; position: fixed; right: 16px; bottom: 16px; z-index: 1065; gap: .6rem; align-items: center; }
.sf-dock { position: relative; width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; box-shadow: 0 10px 26px rgba(10, 6, 24, .4); transition: transform .15s ease; }
.sf-dock:hover { transform: translateY(-2px); }
.sf-dock-pomo { background: radial-gradient(circle at 35% 30%, #f87171, #dc2626 70%); }
.sf-dock-pomo b { font-size: .8rem; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.sf-dock-tomato { position: absolute; top: -6px; left: -4px; font-size: .9rem; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.sf-dock-pomo.is-running { animation: sf-dock-pulse 1.6s ease-in-out infinite; }
.sf-dock-pomo.is-break { background: radial-gradient(circle at 35% 30%, #4ade80, #16a34a 70%); }
.sf-dock-radio { background: radial-gradient(circle at 35% 30%, #a78bfa, #7c3aed 70%); }
/* the bars (columns, like a chart): still when silent, dancing while the radio plays (.sf-eq: kept moving even with reduced motion, as before) */
.sf-dock-radio .sf-dock-eq { display: none; gap: 3px; align-items: flex-end; height: 20px; }
.sf-dock-radio .sf-dock-note { font-size: 1.2rem; }
.sf-dock-radio.is-playing .sf-dock-note { display: none; }
.sf-dock-radio.is-playing .sf-dock-eq { display: flex; }
.sf-dock-radio .sf-dock-eq i { display: block; width: 4px; background: #fff; border-radius: 2px; animation: none; }
.sf-dock-radio .sf-dock-eq i:nth-child(1) { height: 40%; } .sf-dock-radio .sf-dock-eq i:nth-child(2) { height: 75%; } .sf-dock-radio .sf-dock-eq i:nth-child(3) { height: 100%; }
.sf-dock-radio .sf-dock-eq i:nth-child(4) { height: 60%; } .sf-dock-radio .sf-dock-eq i:nth-child(5) { height: 30%; }
.sf-dock-radio.is-playing { animation: sf-dock-pulse 1.2s ease-in-out infinite; }
.sf-dock-radio.is-playing .sf-dock-eq i { animation: sf-dock-eq .9s ease-in-out infinite; }
.sf-dock-radio.is-playing .sf-dock-eq i:nth-child(2) { animation-delay: .15s; } .sf-dock-radio.is-playing .sf-dock-eq i:nth-child(3) { animation-delay: .3s; }
.sf-dock-radio.is-playing .sf-dock-eq i:nth-child(4) { animation-delay: .45s; } .sf-dock-radio.is-playing .sf-dock-eq i:nth-child(5) { animation-delay: .6s; }
@keyframes sf-dock-pulse { 0%, 100% { box-shadow: 0 10px 26px rgba(10, 6, 24, .4), 0 0 0 0 rgba(255, 255, 255, .35); } 50% { box-shadow: 0 10px 26px rgba(10, 6, 24, .4), 0 0 0 8px rgba(255, 255, 255, 0); } }
@keyframes sf-dock-eq { 0%, 100% { height: 20%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .sf-dock-pomo.is-running, .sf-dock-radio.is-playing { animation: none; } }
html.sf-in-code .sf-pomo { right: 16px; bottom: 80px; top: auto; }
html.sf-in-code .is-game .sf-chatx-composer, html.sf-in-code .sf-chatx-composer { margin-right: 130px; }
/* the project's tasks inside the office's modal: the columns grow and the modal scrolls */
.sf-embed .sf-board-col { max-height: none; }

/* v0.58 the pomodoro's task: one of my tasks to focus on, ticked done from here */
.sf-pomo-pick { display: flex; gap: .4rem; align-items: center; padding: .55rem .9rem 0; }
.sf-pomo-pick select { flex: 1; min-width: 0; }
.sf-pomo.is-min .sf-pomo-pick { display: none; }

/* v0.60 inside a code: the logo box and every button up top light in the light theme (dark in the dark one), square-rounded, in one row */
.sf-code-brand { background: var(--cx-surface, rgba(255, 255, 255, .85)); border: 1px solid var(--cx-line, var(--sf-border)); backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(10, 6, 24, .14); }
.sf-code-brand a { width: auto; padding: 0 .6rem; background: transparent; }
.sf-code-brand a:hover { background: rgba(124, 58, 237, .1); }
.sf-code-brand a img { height: 22px; width: auto; }
.sf-code-brand .sf-code-logo-dark, :root[data-theme="dark"] .sf-code-brand .sf-code-logo-light { display: none; }
:root[data-theme="dark"] .sf-code-brand .sf-code-logo-dark { display: block; }
.sf-code-brand button { background: transparent; color: var(--sf-violet); }
:root[data-theme="dark"] .sf-code-brand button { color: #fff; }
.sf-code-brand button:hover, html.sf-code-nav-open .sf-code-brand button { background: rgba(124, 58, 237, .14); }
.sf-code-tools { display: flex; align-items: center; gap: .45rem; }
.sf-code-tools .sf-chatx-tools { gap: .45rem; flex-wrap: nowrap; }
.sf-code-tools .sf-viewtoggle { height: 40px; align-items: center; border-radius: 12px; backdrop-filter: blur(12px); }
.sf-code-tools .sf-viewtoggle a { height: 32px; padding: 0 .7rem; border-radius: 9px; }
.sf-code-tools .sf-viewtoggle a span { display: none; }
.sf-code-tools .sf-chatx-iconbtn { width: 40px; height: 40px; border-radius: 12px; backdrop-filter: blur(12px); }
.sf-code-tools .sf-game-corner { position: static; }
.sf-code-tools .sf-game-fs { background: var(--cx-surface); border: 1px solid var(--cx-line); color: var(--sf-violet); box-shadow: none; backdrop-filter: blur(12px); }
:root[data-theme="dark"] .sf-code-tools .sf-game-fs { color: #d8ccff; }
.sf-code-tools .sf-game-fs:hover { background: rgba(124, 58, 237, .2); }
html.sf-in-code .sf-code-tools .sf-docks { position: static; display: flex; gap: .45rem; }
.sf-code-tools .sf-dock { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 6px 16px rgba(10, 6, 24, .2); }
.sf-code-tools .sf-dock-pomo { width: auto; min-width: 40px; padding: 0 .6rem; }
.sf-code-tools .sf-dock-radio .sf-dock-note { font-size: 1.05rem; }
.sf-code-tools .sf-dock-radio .sf-dock-eq { height: 16px; }
.sf-code-tools .sf-dock:hover { transform: translateY(-1px); }
html.sf-in-code .sf-pomo { top: 64px; bottom: auto; }
html.sf-in-code .is-game .sf-chatx-composer, html.sf-in-code .sf-chatx-composer { margin-right: 0; }
@media (max-width: 767.98px) { .sf-code-brand a img { height: 18px; } .sf-code-tools .sf-viewtoggle { display: none; } }

/* v0.61 solid like the other modals and the user's dropdown: the checklist of tasks and the menu opened inside a code */
.sf-chatx-list { background: var(--sf-card); backdrop-filter: none; }
html.sf-in-code .sf-sidebar { background: var(--sf-card) !important; backdrop-filter: none !important; }

/* v0.62 the codes' cards: a taller band in the code's colours with its site inside (a window with margins, the hero),
   the type's icon below it (no box), the status and the date right after the name */
.sf-office-band { position: relative; height: 196px; padding: 26px 28px 0; align-items: stretch; justify-content: stretch; }
.sf-office-dots { position: absolute; top: 6px; right: 10px; display: flex; gap: .3rem; }
.sf-office-dots .sf-office-dot { width: 14px; height: 14px; border-radius: 5px; }
.sf-office-shot { position: relative; flex: 1; overflow: hidden; border-radius: 12px 12px 0 0; background: #fff; box-shadow: 0 -2px 24px rgba(10, 6, 24, .28); }
.sf-office-shot iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform-origin: 0 0; transform: scale(.36); pointer-events: none; }
.sf-office-shot-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.6rem; color: rgba(124, 58, 237, .35); background: var(--sf-soft); }
.sf-office-icon { width: auto; height: auto; margin-top: .1rem; background: none; border: 0; box-shadow: none; border-radius: 0; font-size: 1.7rem; }
.sf-office-head { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; min-width: 0; }
.sf-office-head .sf-project-title { margin: 0; }
.sf-office-card .sf-project-desc { margin-top: .4rem; }

/* v0.65 the chat: "Todos" + one agent at a time (only its conversation), the guests as vibs in their colour,
   the team row across the top (the preview starts below it) */
.sf-cmsg.is-filtered { display: none !important; }
.sf-chatx-team-top .sf-agent-card.is-active .sf-agent-label b { color: var(--agent, var(--sf-primary)); }
.sf-chatx-team-top .sf-agent-card.is-active .sf-vib, .sf-chatx-team-top .sf-agent-card.is-active .sf-all-icon { box-shadow: 0 0 0 3px var(--cx-surface), 0 0 0 5px var(--agent, #8b5cf6); }
.sf-all-icon { --agent: #8b5cf6; width: 46px; height: 46px; border-radius: 30%; display: grid; place-items: center; flex: 0 0 auto; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.sf-agent-all { --agent: #8b5cf6; }
.sf-chatx-split:not(.is-game):not(.is-grid) .sf-chatx-preview { margin-top: 64px; }
.sf-chatx-split:not(.is-game) .sf-chatx-head { position: relative; z-index: 5; }
@media (max-width: 991.98px) { .sf-chatx-split:not(.is-game):not(.is-grid) .sf-chatx-preview { margin-top: 0; } }

/* v0.69 tasks: the period's "done", Management's follow-up, everything in the task's window */
.sf-task-period, .sf-task-followed { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; border-radius: 999px; padding: .1rem .5rem; }
.sf-task-period { color: #15803d; background: rgba(34, 197, 94, .12); }
.sf-task-followed { color: #b45309; background: rgba(245, 158, 11, .14); }
.sf-task-nodesc { color: var(--sf-muted); font-style: italic; margin-bottom: .75rem; }
.sf-task-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem .9rem; margin: .5rem 0 0; padding-top: .75rem; border-top: 1px solid var(--sf-border); }
.sf-task-facts > div { min-width: 0; }
.sf-task-facts dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sf-muted); }
.sf-task-facts dd { margin: 0; font-weight: 600; }
#taskViewModal .sf-task-result { margin-top: .9rem; }

/* v0.70 the checklist's fields grow; the Server (the site's files, a small editor) */
.sf-chatx-list-items textarea.sf-list-text { resize: vertical; min-height: 34px; line-height: 1.35; overflow-y: auto; }
.sf-server-wrap { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; height: min(64vh, 620px); }
.sf-server-side { display: flex; flex-direction: column; gap: .5rem; min-height: 0; }
.sf-server-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; border: 1px solid var(--sf-border); border-radius: 12px; }
.sf-server-file { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .35rem .6rem; font-size: .8rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-server-file:hover { background: var(--sf-soft); }
.sf-server-file.is-on { background: var(--sf-soft); color: var(--sf-primary); font-weight: 700; }
.sf-server-file.is-binary { opacity: .5; cursor: default; }
.sf-server-empty { padding: .8rem; color: var(--sf-muted); font-size: .85rem; }
.sf-server-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; gap: .5rem; }
.sf-server-bar { display: flex; align-items: center; gap: .6rem; min-height: 32px; }
.sf-server-bar code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-server-bar small { color: var(--sf-muted); }
.sf-server-editor { flex: 1; width: 100%; resize: none; border: 1px solid var(--sf-border); border-radius: 12px; padding: .75rem; font: .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: #0f0c1d; color: #e9e3ff; tab-size: 4; white-space: pre; }
.sf-server-editor[readonly] { opacity: .85; }
.sf-server-pick { margin: auto; color: var(--sf-muted); }
@media (max-width: 767.98px) { .sf-server-wrap { grid-template-columns: 1fr; height: auto; } .sf-server-list { max-height: 30vh; } .sf-server-editor { min-height: 50vh; } }

/* v0.71 Mídias: the upload card sits with the files */
.sf-files-grid .sf-file-add { flex-direction: column; justify-content: center; gap: .4rem; min-height: 160px; padding: .8rem; text-align: center; }
.sf-files-grid .sf-file-add b { color: var(--sf-violet, #7c3aed); font-size: .9rem; }
.sf-files-grid { margin-top: 0; }

/* v0.74 the tasks board's filters */
.sf-task-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: -.25rem 0 1rem; }
.sf-task-filters .sf-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--sf-soft); }
.sf-task-filters .sf-seg button { border: 0; background: none; padding: .3rem .75rem; border-radius: 9px; font-size: .82rem; font-weight: 600; color: var(--sf-muted); }
.sf-task-filters .sf-seg button.active { background: var(--sf-card); color: var(--sf-primary); box-shadow: 0 1px 4px rgba(18, 13, 36, .12); }
.sf-task-filters select { width: auto; min-width: 190px; }
.sf-task-filters input[type="search"] { width: 220px; }
.sf-task-filter-count { color: var(--sf-muted); font-weight: 600; }
.sf-task.is-filtered { display: none !important; }
.sf-board-list.is-none .sf-board-empty { display: block; }
@media (max-width: 575.98px) { .sf-task-filters select, .sf-task-filters input[type="search"] { width: 100%; } }

/* v0.75 the project's tasks in the office: one bar (Tarefas · filters · counts · new task), the modal's close button over it */
#tasksModal .modal-content { position: relative; }
.sf-tasks-close { position: absolute; top: 1.15rem; right: 1.1rem; z-index: 2; }
.sf-task-filters.is-bar { margin: 0 0 1rem; padding: 0 2.6rem .9rem 0; border-bottom: 1px solid var(--sf-border); }
.sf-task-bar-title { display: flex; align-items: center; margin: 0 .4rem 0 0; font-size: 1.15rem; font-weight: 700; }
.sf-task-bar-end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

/* v0.76 a project's tasks in the office: four columns side by side (To do · In progress · Done · Recurring) */
.sf-board.is-stages .sf-board-col { flex: 1 1 0; min-width: 250px; }
.sf-board-dot.is-stage-todo { background: #8b5cf6; }
.sf-board-dot.is-stage-doing { background: #f59e0b; }
.sf-board-dot.is-stage-done { background: #22c55e; }
.sf-board-dot.is-stage-recur { background: #0ea5e9; }
/* Guided onboarding: "Sim, tenho tudo" — the briefing slides */
.sf-guided-slide textarea { resize: vertical; }
:root[data-theme="dark"] .sf-guided .sf-drop { background: rgba(255, 255, 255, .04); border-color: rgba(167, 139, 250, .35); }
:root[data-theme="dark"] .sf-guided .sf-drop b { color: #f4f0ff; }

/* Leo's Leads table (the book on his desk) */
.sf-leads-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.sf-leads-bar .form-control { max-width: 280px; }
.sf-leads-bar .form-select { max-width: 200px; }
/* v1.09 the Comercial modal: tabs (Pesquisas with the map, Fluxos, Leads = the pipeline) and small modals over it */
.sf-cm-tabs { display: flex; gap: .35rem; margin: .9rem 0 .8rem; border-bottom: 1px solid var(--sf-border); overflow-x: auto; }
.sf-cm-tab { border: 0; background: transparent; color: var(--sf-muted); font-weight: 700; padding: .5rem .9rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.sf-cm-tab:hover { color: var(--sf-ink, inherit); }
.sf-cm-tab.is-on { color: var(--sf-primary); border-bottom-color: var(--sf-primary); }
.sf-cm-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .9rem; margin-bottom: .9rem; }
.sf-cm-map { height: 260px; border-radius: 12px; border: 1px solid var(--sf-border); background: var(--sf-soft); z-index: 0; }
.sf-cm-ask { display: flex; flex-direction: column; justify-content: center; gap: .55rem; padding: 1rem; border-radius: 12px; background: var(--sf-soft); }
.sf-cm-hint { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.sf-cm-form { display: flex; gap: .4rem; }
.sf-cm-photo { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; flex: none; }
.sf-cm-name { font-weight: 700; cursor: pointer; }
.sf-cm-name:hover { color: var(--sf-primary); }
.sf-cm-added { font-size: .76rem; font-weight: 700; color: #16a34a; white-space: nowrap; }
.sf-leads-table tr.is-added td { background: rgba(22, 163, 74, .05); }
.sf-cm-panehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.sf-cm-panehead p { flex: 1 1 320px; }
.sf-cm-flows { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; }
.sf-cm-flow { border: 1px solid var(--sf-border); border-radius: 12px; padding: .8rem .9rem; background: var(--sf-card, #fff); display: flex; flex-direction: column; gap: .4rem; }
.sf-cm-flowhead { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.sf-cm-flowsteps { margin: 0; padding-left: 1.1rem; font-size: .82rem; color: var(--sf-muted); }
.sf-cm-flowsteps li { margin-bottom: .15rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sf-cm-flowtools { display: flex; gap: .3rem; margin-top: auto; }
.sf-cm-board { --sf-cols: 4; display: grid; grid-template-columns: repeat(var(--sf-cols), minmax(200px, 1fr)); gap: .7rem; overflow-x: auto; padding-bottom: .3rem; }
.sf-cm-col { background: var(--sf-soft); border-radius: 12px; padding: .6rem; min-height: 220px; display: flex; flex-direction: column; border: 2px dashed transparent; transition: border-color .15s; }
.sf-cm-col.is-over { border-color: var(--sf-primary); }
.sf-cm-colhead { display: flex; justify-content: space-between; align-items: center; padding: .1rem .2rem .5rem; font-size: .85rem; }
.sf-cm-col.is-new .sf-cm-colhead b { color: #7c3aed; }
.sf-cm-col.is-contacted .sf-cm-colhead b { color: #0ea5e9; }
.sf-cm-col.is-negotiating .sf-cm-colhead b { color: #f59e0b; }
.sf-cm-col.is-won .sf-cm-colhead b { color: #16a34a; }
.sf-cm-col.is-lost .sf-cm-colhead b { color: #ef4444; }
.sf-cm-n { font-size: .74rem; font-weight: 700; padding: .05rem .5rem; border-radius: 99px; background: var(--sf-card, #fff); }
.sf-cm-cards { display: flex; flex-direction: column; gap: .5rem; flex: 1; max-height: 52vh; overflow-y: auto; }
.sf-cm-none { color: var(--sf-muted); font-size: .8rem; text-align: center; margin: 1rem 0; }
.sf-cm-card { background: var(--sf-card, #fff); border: 1px solid var(--sf-border); border-radius: 10px; padding: .55rem .65rem; cursor: grab; font-size: .82rem; display: flex; flex-direction: column; gap: .15rem; }
.sf-cm-card:hover, .sf-cm-card:focus-visible { border-color: var(--sf-primary); outline: 0; }
.sf-cm-card.is-dragging { opacity: .45; }
.sf-cm-cardtop { display: flex; align-items: center; gap: .45rem; position: relative; }
.sf-cm-cardtop b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-cm-cardtop .sf-wa-dot { position: static; margin-left: auto; }
.sf-cm-chip { align-self: flex-start; margin-top: .2rem; font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 99px; background: rgba(124, 58, 237, .12); color: #6d28d9; }
#leadsModal .modal-content { position: relative; }
.sf-cm-overlay { position: absolute; inset: 0; z-index: 8; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 2.5rem 1rem 1.5rem; background: rgba(10, 6, 24, .55); backdrop-filter: blur(2px); border-radius: inherit; }
.sf-cm-overlay[hidden] { display: none; }
.sf-cm-box { position: relative; width: min(640px, 100%); flex: none; background: var(--sf-card, #fff); border: 1px solid var(--sf-border); border-radius: 16px; padding: 1rem 1.1rem 1.1rem; box-shadow: 0 24px 60px rgba(10, 6, 24, .45); }
.sf-cm-box.is-small { width: min(440px, 100%); }
.sf-cm-box.is-wide { width: min(720px, 100%); }
.sf-cm-boxhead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.sf-cm-boxhead h3 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.sf-cm-boxfoot { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .8rem; }
.sf-cm-choice { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: .7rem; }
.sf-cm-choice .btn { padding: .7rem; font-weight: 700; }
.sf-cm-choice .btn.is-on { border-color: var(--sf-primary); color: var(--sf-primary); box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.sf-cm-steps { display: flex; flex-direction: column; gap: .5rem; }
.sf-cm-step { border: 1px solid var(--sf-border); border-radius: 12px; padding: .5rem .6rem .6rem; background: var(--sf-soft); }
.sf-cm-step.is-dragging { opacity: .45; }
.sf-cm-stephead { display: flex; align-items: center; gap: .4rem; margin-bottom: .35rem; font-size: .8rem; }
.sf-cm-grip { cursor: grab; color: var(--sf-muted); font-size: 1rem; }
.sf-cm-field { display: flex; flex-direction: column; gap: .2rem; font-size: .76rem; font-weight: 700; color: var(--sf-muted); }
.sf-cm-field input.is-saved { border-color: #22c55e; }
.sf-cm-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem; margin: .8rem 0; }
.sf-cm-leadtop { display: flex; gap: .8rem; align-items: flex-start; }
.sf-cm-leadphoto { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; flex: none; }
.sf-cm-links { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.sf-cm-sub { font-size: .85rem; font-weight: 800; margin: .6rem 0 .4rem; }
:root[data-theme="dark"] .sf-cm-chip { background: rgba(167, 139, 250, .18); color: #c4b5fd; }
:root[data-theme="dark"] .sf-leads-table tr.is-added td { background: rgba(34, 197, 94, .08); }
@media (max-width: 760px) {
    .sf-cm-top { grid-template-columns: 1fr; }
    .sf-cm-map { height: 210px; }
    .sf-cm-board { grid-template-columns: repeat(var(--sf-cols), minmax(210px, 80vw)); }
}
.sf-leads-busy { color: var(--sf-primary); font-size: .85rem; font-weight: 600; }
.sf-leads-empty { color: var(--sf-muted); padding: 1.5rem 0; text-align: center; }
.sf-leads-wrap { overflow: auto; max-height: min(64vh, 640px); border: 1px solid var(--sf-border); border-radius: 12px; }
.sf-leads-table { margin: 0; font-size: .82rem; }
.sf-leads-table th { position: sticky; top: 0; z-index: 1; background: var(--sf-soft); white-space: nowrap; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.sf-leads-table td { vertical-align: middle; position: relative; min-width: 120px; }
.sf-leads-table td.sf-leads-tools, .sf-leads-table th.sf-leads-tools { min-width: 0; white-space: nowrap; text-align: right; }
.sf-leads-cell { width: 100%; border: 1px solid transparent; background: transparent; color: inherit; border-radius: 6px; padding: .15rem .35rem; }
.sf-leads-cell:hover, .sf-leads-cell:focus { border-color: var(--sf-border); background: var(--sf-soft); outline: 0; }
.sf-leads-cell.is-saved { border-color: #22c55e; }
.sf-leads-link { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); font-size: .75rem; }
.sf-leads-st { min-width: 140px; font-weight: 600; }
.sf-leads-st.is-new { color: #7c3aed; }
.sf-leads-st.is-contacted { color: #0ea5e9; }
.sf-leads-st.is-negotiating { color: #f59e0b; }
.sf-leads-st.is-won { color: #22c55e; }
.sf-leads-st.is-lost { color: #ef4444; }

/* Luna's posting calendar (Marketing): the month slides sideways; a post opens like on Instagram */
.sf-mkt-plan { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; font-size: .84rem; padding: .55rem .75rem; border: 1px solid var(--sf-border); border-radius: 12px; background: var(--sf-soft); margin-bottom: .75rem; }
.sf-mkt-topic { flex-basis: 100%; font-size: .8rem; }
.sf-mkt-swatches { display: inline-flex; gap: .25rem; }
.sf-mkt-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--sf-border); }
.sf-mkt-net { display: inline-flex; align-items: center; gap: .15rem; font-weight: 600; margin-right: .35rem; }
.sf-mkt-noplan { color: var(--sf-muted); padding: .75rem 1rem; border: 1px dashed var(--sf-border); border-radius: 12px; text-align: center; }
.sf-mkt-nav { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.sf-mkt-month { font-size: 1.1rem; font-weight: 700; margin: 0; min-width: 11rem; text-align: center; }
.sf-mkt-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sf-border); background: var(--sf-card, #fff); color: inherit; display: inline-flex; align-items: center; justify-content: center; }
.sf-mkt-arrow:hover { background: var(--sf-soft); }
.sf-mkt-viewport { overflow: hidden; touch-action: pan-y; }
.sf-mkt-week, .sf-mkt-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.sf-mkt-week span { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sf-muted); text-align: center; padding: .25rem 0; font-weight: 600; }
.sf-mkt-grid.is-from-right { animation: sf-mkt-in-right .32s ease-out; }
.sf-mkt-grid.is-from-left { animation: sf-mkt-in-left .32s ease-out; }
@keyframes sf-mkt-in-right { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sf-mkt-in-left { from { transform: translateX(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
.sf-mkt-day { min-height: 92px; border: 1px solid var(--sf-border); border-radius: 10px; padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sf-mkt-day.is-out { border-color: transparent; }
.sf-mkt-day.is-past { opacity: .65; }
.sf-mkt-day.is-today { border-color: var(--sf-primary); box-shadow: inset 0 0 0 1px var(--sf-primary); }
.sf-mkt-num { font-size: .75rem; font-weight: 700; color: var(--sf-muted); }
.sf-mkt-day.is-today .sf-mkt-num { color: var(--sf-primary); }
.sf-mkt-chip { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; border: 0; border-radius: 7px; padding: 2px 4px; font-size: .72rem; text-align: left; background: var(--sf-soft); color: inherit; }
.sf-mkt-chip:hover, .sf-mkt-chip:focus-visible { outline: 2px solid var(--sf-primary); outline-offset: -1px; }
.sf-mkt-thumb { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; flex: none; }
.sf-mkt-time { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-mkt-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex: none; background: #f59e0b; }
.sf-mkt-chip.is-created .sf-mkt-dot { background: #0ea5e9; }
.sf-mkt-chip.is-posted .sf-mkt-dot { background: #22c55e; }
.sf-mkt-chip.is-publishing .sf-mkt-dot { background: #a855f7; }
.sf-mkt-chip.is-failed .sf-mkt-dot { background: #ef4444; }
.sf-mkt-grid[data-empty]:not([data-empty=""])::after { content: attr(data-empty); grid-column: 1 / -1; text-align: center; color: var(--sf-muted); font-size: .85rem; padding: .5rem 0 0; }
.sf-mkt-badge { margin-left: auto; font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: #fef3c7; color: #92400e; }
.sf-mkt-badge.is-created { background: #e0f2fe; color: #075985; }
.sf-mkt-badge.is-posted { background: #dcfce7; color: #166534; }
.sf-mkt-badge.is-publishing { background: #f3e8ff; color: #6b21a8; }
.sf-mkt-badge.is-failed { background: #fee2e2; color: #991b1b; }
.sf-mkt-failed { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; padding: .5rem .75rem; font-size: .85rem; color: #b91c1c; }
.sf-mkt-auto { margin-bottom: .75rem; }
/* a post opens in a small modal over the calendar */
#marketingModal .modal-content { position: relative; }
.sf-mkt-detail { position: absolute; inset: 0; z-index: 6; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 1.5rem 1rem; background: rgba(10, 6, 24, .55); backdrop-filter: blur(2px); border-radius: inherit; scrollbar-width: none; }
.sf-mkt-detail::-webkit-scrollbar { display: none; }
.sf-mkt-detail .sf-ig-media { max-height: min(48vh, 420px); }
.sf-mkt-form { width: min(560px, 100%); }
.sf-mkt-detail .sf-mkt-form.sf-ig { padding: 1rem 1.1rem; }
.sf-mkt-formtitle { font-size: 1.05rem; font-weight: 800; margin: 0 2rem .8rem 0; }
.sf-mkt-nets { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-weight: 400; color: var(--sf-ink, inherit); }
.sf-pill-pop .sf-mkt-plan { margin: 0; padding: .45rem .55rem; }
.sf-mkt-detail[hidden] { display: none; }
.sf-mkt-detail .sf-ig { position: relative; width: min(470px, 100%); flex: none; box-shadow: 0 24px 60px rgba(10, 6, 24, .45); }
.sf-ig-close { position: absolute; top: .7rem; right: .7rem; z-index: 2; background-color: var(--sf-card, #fff); border-radius: 50%; padding: .45rem; opacity: .9; }
.sf-mkt-detail .sf-ig-head { padding-right: 3rem; }
.sf-ig { max-width: 470px; margin: 0 auto; border: 1px solid var(--sf-border); border-radius: 14px; overflow: hidden; background: var(--sf-card, #fff); }
.sf-ig-head { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; }
.sf-ig-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff;
    background: linear-gradient(45deg, #f59e0b, #ec4899 55%, #8b5cf6); box-shadow: 0 0 0 2px var(--sf-card, #fff), 0 0 0 4px #ec4899; flex: none; }
.sf-ig-who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sf-ig-who small { color: var(--sf-muted); }
.sf-ig-media { background: #111; aspect-ratio: 1 / 1; max-height: min(62vh, 470px); display: flex; align-items: center; justify-content: center; }
.sf-ig-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sf-ig-placeholder { color: #e5e7eb; padding: 2rem; text-align: center; font-size: 1.05rem; font-weight: 700; }
.sf-ig-actions { display: flex; gap: .9rem; padding: .55rem .75rem .25rem; font-size: 1.3rem; }
.sf-ig-caption { padding: 0 .75rem .6rem; font-size: .88rem; white-space: pre-wrap; word-break: break-word; }
.sf-ig-tools { display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem .75rem; border-top: 1px solid var(--sf-border); }
:root[data-theme="dark"] .sf-mkt-badge { background: rgba(245, 158, 11, .18); color: #fcd34d; }
:root[data-theme="dark"] .sf-mkt-badge.is-created { background: rgba(14, 165, 233, .18); color: #7dd3fc; }
:root[data-theme="dark"] .sf-mkt-badge.is-posted { background: rgba(34, 197, 94, .18); color: #86efac; }
:root[data-theme="dark"] .sf-mkt-badge.is-publishing { background: rgba(168, 85, 247, .2); color: #d8b4fe; }
:root[data-theme="dark"] .sf-mkt-badge.is-failed { background: rgba(239, 68, 68, .2); color: #fca5a5; }
:root[data-theme="dark"] .sf-mkt-failed { color: #fca5a5; }
@media (max-width: 575.98px) {
    .sf-mkt-day { min-height: 64px; padding: 2px; }
    .sf-mkt-time { display: none; }
    .sf-mkt-chip { justify-content: center; padding: 2px; }
    .sf-mkt-dot { margin-left: 0; }
    .sf-mkt-month { min-width: 0; font-size: 1rem; }
}

/* v0.77 phones inside a code: the title gets the top row; the radio, the pomodoro, the speaker, chat/game, the menu and full screen
   open as a drop-down from one button; the team scrolls sideways; the message box gets the row with Send, the other buttons go below */
.sf-code-more { display: none; }
@media (max-width: 767.98px) {
    html.sf-in-code .sf-topbar { padding: 8px 10px; gap: .35rem; }
    html.sf-in-code .sf-topbar > .ms-auto { gap: .35rem !important; flex: none; }
    .sf-code-brand { gap: .1rem; padding: .2rem; border-radius: 14px; }
    .sf-code-brand a { padding: 0 .4rem; height: 36px; }
    .sf-code-brand button { width: 34px; height: 36px; }
    html.sf-in-code .sf-topbar .sf-topbar-title { flex: 1 1 auto; min-width: 0; max-width: none; padding: 0; gap: .25rem; }
    html.sf-in-code .sf-topbar .sf-topbar-back { width: 32px; height: 32px; flex: none; }
    html.sf-in-code .sf-topbar .sf-chatx-title { min-width: 0; padding-right: 0; }
    html.sf-in-code .sf-topbar .sf-chatx-title-pen, html.sf-in-code .sf-topbar .sf-topbar-status, html.sf-in-code .sf-topbar .sf-topbar-preview { display: none; }
    html.sf-in-code .sf-topbar .sf-user { padding: .2rem; border-radius: 14px; }
    html.sf-in-code .sf-topbar .sf-user > .bi-chevron-down { display: none; }
    .sf-code-more { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--cx-line, var(--sf-border));
        background: var(--cx-surface, rgba(255, 255, 255, .85)); color: var(--sf-violet); font-size: 1.05rem; backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(10, 6, 24, .14); }
    :root[data-theme="dark"] .sf-code-more { color: #d8ccff; }
    html.sf-code-tools-open .sf-code-more { background: #7c3aed; border-color: #7c3aed; color: #fff; }
    .sf-code-tools { display: none; position: fixed; top: 60px; right: 10px; z-index: 1066; max-width: calc(100vw - 20px); flex-wrap: wrap; justify-content: flex-end; padding: .5rem;
        border-radius: 16px; background: var(--sf-card); border: 1px solid var(--sf-border); box-shadow: 0 18px 44px rgba(10, 6, 24, .28); }
    html.sf-code-tools-open .sf-code-tools { display: flex; }
    .sf-code-tools .sf-chatx-tools { flex-wrap: wrap; justify-content: flex-end; }
    .sf-code-tools .sf-viewtoggle { display: inline-flex; }
    html.sf-in-code .sf-pomo { top: 60px; left: 10px; right: 10px; width: auto; }

    /* the team: one row that scrolls sideways, nothing cut at the edges */
    html.sf-in-code .sf-chatx-head { padding-bottom: .25rem; }
    html.sf-in-code .sf-chatx-head > .sf-chatx-team-top { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; gap: .35rem; padding: .35rem .2rem .3rem; border-bottom: 0; scrollbar-width: none; }
    html.sf-in-code .sf-chatx-head > .sf-chatx-team-top::-webkit-scrollbar { display: none; }
    html.sf-in-code .sf-chatx-team-top .sf-agent-card { flex: none; min-width: 0; flex-direction: column; gap: .2rem; padding: .1rem .15rem; }
    html.sf-in-code .sf-chatx-team-top .sf-agent-card .sf-vib, html.sf-in-code .sf-chatx-team-top .sf-all-icon { --s: 38px; width: 38px; height: 38px; }
    html.sf-in-code .sf-chatx-team-top .sf-all-icon { font-size: 1.05rem; }
    html.sf-in-code .sf-chatx-team-top .sf-agent-label { align-items: center; }
    html.sf-in-code .sf-chatx-team-top .sf-agent-label b { display: block; font-size: .72rem; }
    html.sf-in-code .sf-chatx-team-top .sf-agent-label small { display: none; }

    /* the composer: the box and Send side by side, the other buttons in a row of small ones below */
    html.sf-in-code .sf-chatx-composer { flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .45rem; padding: .3rem 0 .1rem; }
    html.sf-in-code .sf-chatx-box { order: 0; flex: 1 1 0; min-width: 0; min-height: 48px; padding: .2rem .7rem .2rem .2rem; gap: .2rem; border-radius: 22px; }
    html.sf-in-code .sf-chatx-clip { width: 36px; height: 36px; font-size: 1.05rem; }
    html.sf-in-code .sf-chatx-box textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html.sf-in-code .sf-chatx-send { order: 1; width: 48px; height: 48px; border-radius: 16px; font-size: 1.1rem; }
    html.sf-in-code .sf-chatx-composer > .sf-chatx-mic { order: 2; width: 38px; height: 38px; font-size: 1rem; box-shadow: none; }
    html.sf-in-code .sf-chatx-composer::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }
    html.sf-in-code .sf-chatx-composer:not(:has(> .sf-chatx-mic:not([hidden])))::after { display: none; }
    html.sf-in-code .is-game .sf-chatx-composer { bottom: 10px; width: calc(100% - 16px); padding: .45rem; border-radius: 22px; }
    html.sf-in-code .is-game .sf-chatx-list { bottom: 128px; }
    html.sf-in-code .is-game.show-log .sf-chatx-stream { left: 8px; right: 8px; width: auto; top: 64px; bottom: 136px; }
}

/* v0.78 phones, the office: the map takes the whole height (game.js slides it sideways under a finger), the composer sits at the bottom */
@media (max-width: 767.98px) {
    html.sf-in-code .is-game .sf-chatx-main { height: auto; min-height: 0; }
    .is-game .sf-game-canvas canvas { touch-action: none; }
}

/* v1.00 the project menu is a wide grid (icon, title, a short line): first the team's agents, named by their role, then the project */
.sf-chatx-iconbtn.sf-chatx-menubtn .bi { font-size: 1.05rem; line-height: 1; }
.dropdown-menu.sf-grid-menu { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 90px); overflow-y: auto; padding: .7rem; border-radius: 18px; background: var(--sf-card); border: 1px solid var(--sf-border); box-shadow: 0 18px 48px rgba(10, 6, 24, .22); }
.sf-grid-menu-label { margin: .15rem .35rem .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sf-muted); }
.sf-grid-menu-tiles + .sf-grid-menu-label { margin-top: .8rem; }
.sf-grid-menu-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.sf-grid-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-width: 0; padding: .7rem .75rem; border: 1px solid var(--sf-border); border-radius: 14px; background: transparent; color: var(--sf-ink); text-align: left; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.sf-grid-tile:hover, .sf-grid-tile:focus-visible { background: rgba(124, 58, 237, .08); border-color: rgba(124, 58, 237, .35); color: var(--sf-ink); transform: translateY(-1px); }
.sf-grid-tile > .bi { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: .3rem; border-radius: 10px; font-size: 1.05rem; color: #fff; background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.sf-grid-tile b { font-size: .88rem; line-height: 1.2; }
.sf-grid-tile small { font-size: .74rem; line-height: 1.25; color: var(--sf-muted); }
@media (max-width: 575.98px) { .sf-grid-menu-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* v1.00 inside a code, everything up top is one family: solid white (the card colour in the dark theme), the same 44px height,
   the same corners, border and shadow, violet icons; the title gets its box too, the radio and the pomodoro lose their own colours */
html.sf-in-code .sf-topbar { --tb-bg: #fff; --tb-line: rgba(124, 58, 237, .16); --tb-ink: #7c3aed; --tb-shadow: 0 6px 18px rgba(10, 6, 24, .12); --tb-h: 44px; }
:root[data-theme="dark"].sf-in-code .sf-topbar { --tb-bg: #151123; --tb-line: rgba(167, 139, 250, .25); --tb-ink: #d8ccff; --tb-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
html.sf-in-code .sf-code-brand, html.sf-in-code .sf-topbar .sf-topbar-title, html.sf-in-code .sf-topbar .sf-user, html.sf-in-code .sf-code-more,
html.sf-in-code .sf-code-tools .sf-chatx-iconbtn, html.sf-in-code .sf-code-tools .sf-chatx-iconbtn.sf-chatx-menubtn, html.sf-in-code .sf-code-tools .sf-game-fs,
html.sf-in-code .sf-code-tools .sf-dock, html.sf-in-code .sf-code-tools .sf-dock-pomo.is-break, html.sf-in-code .sf-code-tools .sf-viewtoggle {
    height: var(--tb-h); border-radius: 14px; border: 1px solid var(--tb-line); background: var(--tb-bg); color: var(--tb-ink); box-shadow: var(--tb-shadow); backdrop-filter: none; filter: none; }
html.sf-in-code .sf-code-tools .sf-chatx-iconbtn, html.sf-in-code .sf-code-tools .sf-game-fs, html.sf-in-code .sf-code-tools .sf-dock, html.sf-in-code .sf-code-more { width: var(--tb-h); }
html.sf-in-code .sf-code-tools .sf-dock-pomo { width: auto; min-width: var(--tb-h); padding: 0 .7rem; }
html.sf-in-code .sf-code-tools .sf-chatx-iconbtn:hover, html.sf-in-code .sf-code-tools .sf-chatx-iconbtn.sf-chatx-menubtn:hover, html.sf-in-code .sf-code-tools .sf-chatx-menubtn[aria-expanded="true"],
html.sf-in-code .sf-code-tools .sf-game-fs:hover, html.sf-in-code .sf-code-tools .sf-dock:hover, html.sf-in-code .sf-topbar .sf-user:hover, html.sf-in-code .sf-topbar .sf-user[aria-expanded="true"] {
    background: var(--tb-bg); border-color: rgba(124, 58, 237, .5); color: var(--tb-ink); filter: none; transform: none; }
html.sf-in-code .sf-code-tools .sf-chatx-iconbtn:has(input:checked) { background: var(--sf-grad); border-color: transparent; color: #fff; }
html.sf-in-code .sf-code-tools .sf-dock-radio .sf-dock-eq i { background: var(--tb-ink); }
html.sf-in-code .sf-code-tools .sf-dock-pomo.is-running b { color: #dc2626; }
html.sf-in-code .sf-code-tools .sf-dock-pomo.is-break b { color: #16a34a; }
html.sf-in-code .sf-code-tools .sf-dock-pomo.is-running, html.sf-in-code .sf-code-tools .sf-dock-radio.is-playing { animation: none; }
html.sf-in-code .sf-code-tools .sf-viewtoggle { padding: 4px; }
html.sf-in-code .sf-code-tools .sf-viewtoggle a { height: 100%; border-radius: 10px; }
html.sf-in-code .sf-code-brand { padding: 0 .3rem; }
html.sf-in-code .sf-code-brand a, html.sf-in-code .sf-code-brand button { height: 34px; }
html.sf-in-code .sf-code-brand button { color: var(--tb-ink); }
html.sf-in-code .sf-topbar .sf-topbar-title { padding: 0 .5rem 0 .3rem; }
html.sf-in-code .sf-topbar .sf-topbar-back { width: 34px; height: 34px; border: 0; background: transparent; color: var(--tb-ink); }
html.sf-in-code .sf-topbar .sf-topbar-back:hover { background: rgba(124, 58, 237, .1); }
html.sf-in-code .sf-topbar .sf-chatx-title { text-shadow: none; color: var(--sf-ink); }
html.sf-in-code .sf-topbar .sf-user { padding: 0 .7rem 0 .35rem; gap: .55rem; }
html.sf-in-code .sf-topbar .sf-user .sf-avatar { width: 34px; height: 34px; }
html.sf-in-code .sf-topbar .sf-user b, html.sf-in-code .sf-topbar .sf-user small { line-height: 1.15; }
html.sf-in-code .sf-topbar .sf-user b { color: var(--sf-ink); }
@media (max-width: 767.98px) {
    html.sf-in-code .sf-topbar { --tb-h: 40px; }
    html.sf-in-code .sf-topbar .sf-topbar-title { padding: 0 .4rem 0 .2rem; }
    html.sf-in-code .sf-topbar .sf-topbar-back { width: 30px; height: 30px; }
    html.sf-in-code .sf-topbar .sf-user { padding: 0 .2rem; }
    html.sf-in-code .sf-topbar .sf-user .sf-avatar { width: 32px; height: 32px; }
    html.sf-in-code .sf-code-tools .sf-viewtoggle { display: inline-flex; }
}

/* v1.01 the first time a project opens: each vib introduces itself (the box to write or talk waits), then how to talk */
.sf-chatx.is-intro .sf-chatx-composer > *:not(.sf-chatx-box) { opacity: .45; }
.sf-chatx.is-intro .sf-chatx-composer button, .sf-chatx.is-intro .sf-chatx-composer label { cursor: not-allowed; }
.sf-chatx.is-intro .sf-chatx-box textarea::placeholder { color: #8b5cf6; font-weight: 600; opacity: 1; }
.sf-talk-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.sf-talk-opt { width: 100%; text-align: left; padding: 1rem; color: inherit; }
.sf-talk-opt i { font-size: 1.5rem; color: #8b5cf6; }
.sf-talk-opt small { color: var(--sf-muted); }
.sf-talk-opt:hover, .sf-talk-opt.is-on { border-color: #8b5cf6; box-shadow: 0 6px 20px rgba(124, 58, 237, .15); }
@media (max-width: 575.98px) { .sf-talk-opts { grid-template-columns: 1fr; } }
.sf-modal-sub { margin-left: .45rem; font-size: .78rem; font-weight: 500; color: var(--sf-muted); }

/* v1.04 Leo on WhatsApp (the Leads book): the extension's state, the messages waiting for the OK, each lead's conversation */
.sf-wa { border: 1px solid var(--sf-border); border-radius: 12px; padding: .6rem .75rem; margin-bottom: .75rem; background: var(--sf-soft); }
.sf-wa-top, .sf-wa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.sf-wa-actions { margin-top: .5rem; }
.sf-wa-actions:empty { display: none; }
.sf-wa-ext { font-weight: 600; font-size: .85rem; color: var(--sf-muted); }
.sf-wa-ext.is-on { color: #16a34a; }
.sf-wa-ext.is-off { color: #f59e0b; }
.sf-wa-meta { font-size: .8rem; color: var(--sf-muted); }
.sf-wa-auto { margin: 0 0 0 auto; font-size: .82rem; }
.sf-wa-code { font-size: 1rem; font-weight: 700; letter-spacing: .06em; margin-left: .35rem; }
.sf-engine-ext-code { margin-top: .4rem; }
.sf-engine-ext-code .sf-wa-code { font-size: 1.25rem; margin-left: 0; user-select: all; }
.sf-wa-btn { position: relative; color: #16a34a; }
.sf-wa-btn .sf-wa-dot { position: absolute; top: 0; right: 0; min-width: 1rem; height: 1rem; padding: 0 .25rem; border-radius: 1rem; background: #f59e0b; color: #fff; font-size: .62rem; line-height: 1rem; font-weight: 700; }
.sf-wa-btn.is-none { color: var(--sf-muted); opacity: .45; }
.sf-wa-row > td { background: var(--sf-soft); padding: .6rem .8rem; }
.sf-wa-chat { display: flex; flex-direction: column; gap: .45rem; max-width: 640px; }
.sf-wa-msg { align-self: flex-start; max-width: 85%; padding: .45rem .65rem; border-radius: 10px; background: var(--sf-card, #fff); border: 1px solid var(--sf-border); white-space: pre-wrap; font-size: .84rem; }
.sf-wa-msg.is-out { align-self: flex-end; background: #dcfce7; border-color: #bbf7d0; color: #14532d; }
.sf-wa-msg.is-draft, .sf-wa-msg.is-failed { background: #fff7ed; border-color: #fed7aa; color: #7c2d12; }
.sf-wa-msg textarea { width: 100%; min-width: min(480px, 70vw); min-height: 6rem; border: 1px solid #fed7aa; border-radius: 8px; padding: .35rem .5rem; font-size: .84rem; background: #fff; color: #1f2937; }
.sf-wa-state { display: block; margin-top: .25rem; font-size: .7rem; opacity: .75; }
.sf-wa-tools { display: flex; gap: .4rem; margin-top: .35rem; justify-content: flex-end; }

/* v1.10 the Comercial header in one line (title, tabs, count, the Navegador dos vibs pill, close) */
.sf-cm-head { gap: .4rem .8rem; flex-wrap: wrap; align-items: center; }
.sf-cm-head .modal-title { margin: 0; white-space: nowrap; }
.sf-cm-head .sf-cm-tabs { margin: 0; border-bottom: 0; }
.sf-cm-head .sf-cm-tab { padding: .35rem .7rem; border-bottom-width: 2px; }
.sf-cm-count { white-space: nowrap; }
/* the pill and its balloon (on hover, or opened by a click) — Comercial and Marketing */
.sf-pill { position: relative; }
.sf-pill-btn { border: 1px solid var(--sf-border); background: var(--sf-soft); border-radius: 99px; padding: .25rem .7rem; font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; color: inherit; }
.sf-pill-btn .sf-wa-ext { font-size: .8rem; }
.sf-pill-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(340px, 86vw); padding: .8rem .9rem; border-radius: 14px; background: var(--sf-card, #fff); border: 1px solid var(--sf-border); box-shadow: 0 18px 44px rgba(10, 6, 24, .28); display: none; flex-direction: column; gap: .5rem; font-size: .84rem; }
.sf-pill-pop::before { content: ""; position: absolute; right: 22px; top: -7px; width: 12px; height: 12px; transform: rotate(45deg); background: inherit; border-left: 1px solid var(--sf-border); border-top: 1px solid var(--sf-border); }
.sf-pill:hover .sf-pill-pop, .sf-pill:focus-within .sf-pill-pop, .sf-pill.is-open .sf-pill-pop { display: flex; }
.sf-pill-pop .sf-wa-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
/* the flows: objectives side by side, an arrow to the next */
.sf-cm-flowline { display: flex; align-items: stretch; gap: .35rem; overflow-x: auto; padding-bottom: .25rem; }
.sf-cm-mini { flex: 0 0 150px; border: 1px solid var(--sf-border); border-radius: 10px; padding: .4rem .5rem; background: var(--sf-soft); font-size: .76rem; display: flex; flex-direction: column; gap: .15rem; }
.sf-cm-mini span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--sf-muted); }
.sf-cm-arrow { align-self: center; color: var(--sf-primary); font-size: 1.1rem; flex: none; }
.sf-cm-steps { flex-direction: row; gap: 2.1rem; overflow-x: auto; padding: .2rem .1rem .6rem; }
.sf-cm-step { flex: 0 0 230px; position: relative; }
.sf-cm-step + .sf-cm-step::before { content: "\2192"; position: absolute; left: -1.65rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; font-weight: 800; color: var(--sf-primary); }
.sf-cm-choice.is-three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .sf-cm-choice.is-three { grid-template-columns: 1fr; } }
/* every modal of a code stays over the floating top bar, and fits the screen (nothing hidden under the buttons) */
html.sf-in-code .modal { --bs-modal-zindex: 1085; }
html.sf-in-code .modal-backdrop { --bs-backdrop-zindex: 1080; }
html.sf-in-code #leadsModal .modal-content, html.sf-in-code #marketingModal .modal-content { max-height: calc(100vh - 2rem); }
html.sf-in-code #leadsModal .modal-body, html.sf-in-code #marketingModal .modal-body { overflow-y: auto; }

/* v1.11 search results: the address cut short, a yellow star, a photo that grows */
.sf-cm-url { display: inline-flex; align-items: center; max-width: 210px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }
.sf-cm-rating { white-space: nowrap; }
.sf-cm-rating .bi-star-fill { color: #f59e0b; }
.sf-cm-photo.is-zoom { cursor: zoom-in; }
.sf-cm-box.is-photo { width: min(720px, 100%); }
.sf-cm-zoom { display: block; width: 100%; max-height: 72vh; object-fit: contain; border-radius: 12px; background: var(--sf-soft); }
/* each flow takes the whole width */
.sf-cm-flows { grid-template-columns: 1fr; }
.sf-cm-mini { flex: 1 0 170px; }
/* more room between the fields of the small modals */
.sf-cm-box .sf-cm-fields { gap: .8rem 1rem; margin: .6rem 0 1rem; }
.sf-cm-box .sf-cm-choice { margin: .7rem 0 .9rem; }
.sf-cm-box .sf-cm-choicebox > * + * { margin-top: .6rem; }
/* v1.21 Contatos: one card per contact, "Adicionar ao funil" on each */
.sf-cm-contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.sf-cm-contact { border: 1px solid var(--sf-border); border-radius: 12px; padding: .7rem .8rem; background: var(--sf-card, #fff); }
.sf-cm-contactname { all: unset; cursor: pointer; font-weight: 700; display: block; }
.sf-cm-contactname:hover, .sf-cm-contactname:focus-visible { text-decoration: underline; }
/* v1.20 the message and, beside it, "Pedir sugestão ao Leo" (one under the other on a phone) */
.sf-cm-msgcols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: .75rem; align-items: start; }
.sf-cm-suggest { padding: .6rem; border-radius: .6rem; background: rgba(124, 58, 237, .08); border: 1px dashed rgba(124, 58, 237, .35); }
@media (max-width: 575.98px) { .sf-cm-msgcols { grid-template-columns: 1fr; } }
/* a small modal over another one: on the whole screen, never cut by the size of the one below */
.sf-cm-overlay, .sf-mkt-detail { position: fixed; inset: 0; z-index: 1095; border-radius: 0; }
/* v1.11 a post over the calendar: its picture full width, the actions in a menu by the close button */
.sf-mkt-detail .sf-ig-media { aspect-ratio: auto; max-height: none; background: transparent; display: block; }
.sf-mkt-detail .sf-ig-media img { width: 100%; height: auto; object-fit: initial; }
.sf-ig-more { position: absolute; top: .7rem; right: 3.1rem; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--sf-border); background: var(--sf-card, #fff); color: inherit; display: grid; place-items: center; }
.sf-mkt-detail .sf-ig-head { padding-right: 5.5rem; }
.sf-ig-menu { position: absolute; top: 3.2rem; right: .7rem; z-index: 3; width: min(300px, calc(100% - 1.4rem)); flex-direction: column; align-items: stretch; background: var(--sf-card, #fff); border: 1px solid var(--sf-border); border-radius: 12px; box-shadow: 0 18px 44px rgba(10, 6, 24, .3); }
.sf-ig-menu:not([hidden]) { display: flex; }
.sf-ig-menu .btn-group { flex-wrap: wrap; }
/* v1.12 the post's menu: statuses as small coloured pills on top, then one action per line, delete last */
.sf-ig-menu { padding: .45rem; gap: .15rem; }
.sf-ig-statuses { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem .35rem .55rem; border-bottom: 1px solid var(--sf-border); margin-bottom: .25rem; }
.sf-ig-statuses .sf-mkt-badge { border: 0; cursor: pointer; opacity: .55; }
.sf-ig-statuses .sf-mkt-badge.is-current { opacity: 1; box-shadow: 0 0 0 2px currentColor; }
.sf-mkt-badge.is-draft, .sf-mkt-badge.is-pending { background: #f1f5f9; color: #475569; }
.sf-ig-item { display: flex; align-items: center; gap: .55rem; width: 100%; border: 0; background: transparent; color: inherit; padding: .45rem .6rem; border-radius: 8px; font-size: .86rem; text-align: left; }
.sf-ig-item:hover, .sf-ig-item:focus-visible { background: var(--sf-soft); outline: 0; }
.sf-ig-item.is-danger { color: #dc2626; margin-top: .2rem; border-top: 1px solid var(--sf-border); border-radius: 0 0 8px 8px; }
/* v1.12 the pick column of the search results */
.sf-leads-table td.sf-cm-pick, .sf-leads-table th.sf-cm-pick { min-width: 0; width: 34px; text-align: center; }

/* v1.24 the Comercial tabs: their number in a bubble floating on each; the install modal over another modal */
.sf-cm-tab { position: relative; }
.sf-cm-head .sf-cm-tabs { padding: 10px 8px 0 0; margin-top: -10px; } /* room for the bubbles (the row scrolls sideways) */
.sf-cm-badge { position: absolute; top: -9px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--sf-primary, #6d28d9); color: #fff; font-size: .68rem; font-weight: 700; line-height: 19px; text-align: center; box-shadow: 0 2px 6px rgba(10, 6, 24, .25); pointer-events: none; }
.sf-cm-badge[hidden] { display: none; }
#browserInstallModal { z-index: 1075; }
.modal-backdrop.sf-backdrop-over { z-index: 1070; }
/* v1.24 the onboarding's welcome screen: the vibs bobbing in, then the questions */
.sf-guided-box { padding: 1.8rem 2rem 1.5rem; }
.sf-guided-welcome { display: none; text-align: center; padding: .4rem 0 .2rem; }
.sf-guided.is-welcome .sf-guided-welcome { display: block; animation: sf-guided-in .35s ease; }
.sf-guided.is-welcome .sf-guided-progress, .sf-guided.is-welcome .sf-guided-count, .sf-guided.is-welcome .sf-guided-slides,
.sf-guided.is-welcome .sf-guided-nav, .sf-guided.is-welcome .sf-guided-error { display: none !important; }
.sf-guided-welcome h3 { font-size: 1.6rem; font-weight: 800; margin: .4rem 0 .6rem; }
.sf-guided-welcome > p { max-width: 560px; margin: 0 auto .9rem; color: var(--sf-muted, #6b6485); }
.sf-welcome-vibs { position: relative; height: 120px; display: flex; align-items: flex-end; justify-content: center; gap: 14px; }
.sf-welcome-vib { position: relative; width: 52px; height: 58px; border-radius: 16px 16px 12px 12px; background: var(--c); box-shadow: 0 10px 22px color-mix(in srgb, var(--c) 40%, transparent);
    display: flex; align-items: center; justify-content: center; gap: 9px; opacity: 0; animation: sf-vib-in .6s var(--d) cubic-bezier(.3, 1.6, .5, 1) forwards, sf-vib-bob 2.4s calc(var(--d) + .6s) ease-in-out infinite; }
.sf-welcome-vib i { width: 7px; height: 13px; border-radius: 4px; background: #fff; animation: sf-vib-blink 4s calc(var(--d) * 3) infinite; }
.sf-welcome-spark { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; background: #f5c542; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: sf-spark 2.6s var(--d) ease-in-out infinite; opacity: 0; }
@keyframes sf-vib-in { from { opacity: 0; transform: translateY(40px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes sf-vib-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes sf-vib-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes sf-spark { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(90deg); } }
.sf-welcome-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; max-width: 620px; margin: 0 auto 1rem; text-align: left; }
.sf-welcome-cards > div { padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--sf-border, rgba(124, 58, 237, .2)); background: rgba(124, 58, 237, .05); display: flex; flex-direction: column; gap: .2rem; }
.sf-welcome-cards i { font-size: 1.3rem; color: #7c3aed; }
.sf-welcome-cards small { color: var(--sf-muted, #6b6485); }
.sf-welcome-tip { max-width: 620px; margin: 0 auto 1.2rem; padding: .7rem .9rem; border-radius: 12px; background: rgba(22, 163, 74, .08); font-size: .88rem; text-align: left; }
@media (max-width: 575.98px) { .sf-welcome-cards { grid-template-columns: 1fr; } .sf-guided-box { padding: 1.2rem 1rem 1rem; } .sf-welcome-vib { width: 40px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .sf-welcome-vib, .sf-welcome-vib i, .sf-welcome-spark { animation: none; opacity: 1; } }
/* v1.30 Under a vib's plan or summary: "Combinado", or tell it what to adjust */
.sf-confirm { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin-top: .5rem; }
.sf-confirm-adjust { border: 0; background: none; padding: 0; font-size: .82rem; color: var(--bs-secondary-color, #6b7280); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.sf-confirm-adjust:hover { color: var(--agent, #7c3aed); }
.sf-cmsg-bubble:has(> .sf-liked) { position: relative; margin-bottom: .7rem; }
.sf-liked { position: absolute; right: 10px; bottom: -14px; width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .25); color: var(--agent, #7c3aed); font-size: .8rem; animation: sf-like-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sf-like-pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sf-liked { animation: none; } }

/* v1.32 the account of each network in the editorial calendar */
.sf-mkt-acc { font-weight: 400; color: var(--bs-secondary-color, #6b7280); margin-left: .25rem; }
.sf-mkt-accin { display: inline-block; width: 11rem; margin-left: .4rem; padding: .1rem .4rem; }

/* v1.32 Dados do projeto (Comercial) */
.sf-sd { flex-direction: column; align-items: flex-start; gap: .25rem; }
.sf-sd-line { display: inline-flex; align-items: center; word-break: break-all; }

/* v1.35 Conectores: cards with how the vibs reach the viber's sites (the menu, the TV in the Assistant's room), and the pills of the Comercial and Marketing */
.sf-conn-intro { color: var(--sf-muted); font-size: .9rem; margin-bottom: 1rem; }
.sf-conn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .85rem; }
.sf-conn-card { display: flex; flex-direction: column; gap: .55rem; text-align: left; padding: 1rem; border: 1px solid var(--sf-border); border-radius: 16px; background: var(--sf-card, transparent); color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sf-conn-card:hover, .sf-conn-card:focus-visible { border-color: #8b5cf6; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(124, 58, 237, .15); }
.sf-conn-top { display: flex; align-items: center; gap: .7rem; }
.sf-conn-icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.25rem; color: #7c3aed; background: #fff; border: 1px solid rgba(15, 23, 42, .1); border-radius: 12px; }
.sf-conn-head { display: flex; flex-direction: column; min-width: 0; }
.sf-conn-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-conn-kind { align-self: flex-start; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .05rem .5rem; border-radius: 999px; background: rgba(124, 58, 237, .12); color: #7c3aed; }
.sf-conn-contact .sf-conn-kind { background: rgba(34, 197, 94, .14); color: #15803d; }
.sf-conn-posts .sf-conn-kind { background: rgba(249, 115, 22, .14); color: #c2410c; }
.sf-conn-access { font-size: .85rem; color: var(--sf-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.sf-conn-by { font-size: .75rem; color: var(--sf-muted); margin-top: auto; }
.sf-conn-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; color: var(--sf-muted); padding: 2rem 1rem; }
.sf-conn-empty .bi { font-size: 2rem; color: #8b5cf6; }
.sf-conn-help { display: block; color: var(--sf-muted); margin-top: .4rem; }
.sf-conn-foot { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.sf-conn-chips { display: flex; flex-direction: column; align-items: stretch; gap: .35rem; min-width: 220px; }
.sf-conn-chip { display: flex; align-items: center; text-align: left; padding: .4rem .65rem; border: 1px solid var(--sf-border); border-radius: 10px; background: transparent; color: inherit; font-size: .85rem; }
.sf-conn-chip:hover, .sf-conn-chip:focus-visible { border-color: #8b5cf6; color: #7c3aed; }
.sf-conn-chip .bi { color: #7c3aed; }
[data-connectors-pill] .sf-pill-btn { position: relative; }

/* v1.38 the office's zoom: + / − / the whole office, on the right above the composer */
.sf-game-zoom { position: absolute; right: 16px; bottom: 120px; z-index: 6; display: flex; flex-direction: column; gap: 6px; }
.sf-game-zoom button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--cx-line, rgba(255, 255, 255, .12)); background: var(--cx-surface, rgba(17, 18, 36, .86)); color: var(--sf-violet, #8b5cf6); backdrop-filter: blur(12px); cursor: pointer; }
.sf-game-zoom button:hover { background: rgba(124, 58, 237, .2); }
/* v1.45 the camera turned (or inside the office): the live page hides; ⤢ brings the front back */
.sf-chatx-preview.is-turned, .sf-game-tag.is-turned { opacity: 0 !important; pointer-events: none !important; }
:root[data-theme="dark"] .sf-game-zoom button { color: #d8ccff; }
/* v1.53 My tasks: one card per project (its board on its own page, /tasks/{slug}); the "Rascunhos" column */
.sf-board-dot.is-stage-draft { background: #9ca3af; }
.sf-task-back { display: inline-flex; align-items: center; font-size: .85rem; font-weight: 600; color: var(--sf-muted); text-decoration: none; margin-bottom: .25rem; }
.sf-task-back:hover { color: var(--sf-primary); }
.sf-task-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .9rem; }
.sf-task-project { display: flex; flex-direction: column; gap: .8rem; min-width: 0; padding: 1rem 1.1rem; border: 1px solid var(--sf-border); border-radius: 16px; background: var(--sf-card); color: var(--sf-ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.sf-task-project:hover { border-color: var(--sf-primary); box-shadow: 0 6px 18px rgba(18, 13, 36, .1); transform: translateY(-1px); color: var(--sf-ink); }
.sf-task-project b { flex: 1; min-width: 0; font-size: .98rem; font-weight: 800; }
.sf-task-project > .bi-people { color: var(--sf-muted); }
.sf-task-project-go { color: var(--sf-muted); }
/* v1.54 the numbers of each column on a project's card; a status dot per column (red late, yellow today, green on time); fold a column */
.sf-task-project-top { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.sf-task-project-line { font-size: .86rem; font-weight: 600; color: var(--sf-muted); padding-left: calc(10px + .6rem); }
.sf-task-project-line.is-late { color: #ef4444; }
.sf-task-project-line.is-today { color: #ca8a04; }
.sf-task-project-line.is-ok { color: #16a34a; }
:root[data-theme="dark"] .sf-task-project-line.is-today { color: #facc15; }
:root[data-theme="dark"] .sf-task-project-line.is-ok { color: #4ade80; }
.sf-status-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); cursor: help; }
.sf-status-dot.is-today { background: #facc15; box-shadow: 0 0 0 3px rgba(250, 204, 21, .22); }
.sf-status-dot.is-late { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .2); }
.sf-board-fold { border: 0; background: none; padding: 0 .1rem; color: var(--sf-muted); line-height: 1; }
.sf-board-fold:hover { color: var(--sf-primary); }
.sf-board.is-stages .sf-board-col.is-folded { flex: 0 0 52px; min-width: 52px; padding: .75rem .35rem; }
.sf-board-col.is-folded .sf-board-list, .sf-board-col.is-folded .sf-board-add { display: none; }
.sf-board-col.is-folded .sf-board-head { flex-direction: column; padding: .2rem 0; gap: .6rem; }
.sf-board-col.is-folded .sf-board-fold { order: -1; }
.sf-board-col.is-folded .sf-board-head h2 { writing-mode: vertical-rl; flex: 0 0 auto; overflow: visible; white-space: nowrap; }