/* Structural layer of the visual styles (Ajuda > Preferências). Not re-tinted:
   colors written here are final. Every rule is scoped to html[data-style], so the
   default experience (no attribute) is untouched. */

/* ---------- Preview thumbnails on the Preferences page ---------- */
.style-preview{position:relative;display:flex;gap:8px;height:148px;padding:10px;background:var(--pv-bg);border-bottom:1px solid var(--pv-line);overflow:hidden}
.pv-side{display:flex;flex-direction:column;gap:6px;width:30%;padding:9px 8px;border-radius:9px;background:var(--pv-side);border:1px solid var(--pv-line)}
.pv-side img{width:17px;height:20px;object-fit:contain;margin-bottom:5px}
.pv-side i,.pv-main i{display:block}
.pv-side i{height:6px;border-radius:3px;background:var(--pv-side-ink);opacity:.3}
.pv-side i.on{opacity:1}
.pv-main{flex:1;display:flex;flex-direction:column;gap:7px;padding:4px 2px 0;min-width:0}
.pv-h{width:58%;height:10px;border-radius:3px;background:var(--pv-ink)}
.pv-p{width:80%;height:6px;border-radius:3px;background:var(--pv-ink);opacity:.35}
.pv-btn{width:38%;height:15px;border-radius:5px;background:var(--pv-accent)}
.pv-cards{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pv-cards i{border-radius:6px;background:var(--pv-card);border:1px solid var(--pv-line)}
.style-card[data-style-id="padrao"] .pv-side{border-color:transparent}
.style-card[data-style-id="floresta"] .pv-side{border:0;border-radius:11px}
.style-card[data-style-id="floresta"] .pv-btn{border-radius:99px}
.style-card[data-style-id="floresta"] .pv-cards i{border-radius:10px}
.style-card[data-style-id="oceano"] .pv-main{padding-inline:12%}
.style-card[data-style-id="oceano"] .pv-side{width:24%;gap:4px}
.style-card[data-style-id="oceano"] .pv-side i{height:5px}
.style-card[data-style-id="aurora"] .style-preview{background:radial-gradient(120% 90% at 100% 0,#d6339e55,transparent 60%),radial-gradient(90% 80% at 0 100%,#3f6bff55,transparent 60%),#150d24}
.style-card[data-style-id="aurora"] .pv-side{margin:4px 0;border-radius:14px;background:rgba(40,26,66,.62);border-color:rgba(200,170,255,.18)}
.style-card[data-style-id="aurora"] .pv-cards i{background:rgba(50,34,82,.55);border-color:rgba(200,170,255,.16)}
.style-card[data-style-id="aurora"] .pv-btn{background:linear-gradient(135deg,#6f5cff,#d03bb0)}
.style-card[data-style-id="ipe"] .pv-main{gap:6px}
.style-card[data-style-id="ipe"] .pv-h{height:13px}
.style-card[data-style-id="ipe"] .pv-btn{border-radius:99px;width:34%}
.style-card[data-style-id="ipe"] .pv-cards i,.style-card[data-style-id="ipe"] .pv-side{border-radius:14px}
.style-card[data-style-id="grafite"] .style-preview{flex-direction:row-reverse}
.style-card[data-style-id="grafite"] .pv-side,.style-card[data-style-id="grafite"] .pv-cards i,.style-card[data-style-id="grafite"] .pv-btn{border-radius:1px}
.style-card[data-style-id="contraste"] .pv-cards i,.style-card[data-style-id="contraste"] .pv-side{border:2px solid var(--pv-ink)}

/* ---------- Shared: typography ---------- */
html[data-style] #businessApp,html[data-style] #businessApp *:not(svg):not(svg *),html[data-style] body>dialog,html[data-style] body>dialog *{font-family:var(--style-font)!important}
html[data-style] #businessApp :is(h1,h2){font-family:var(--style-display)!important}
html[data-style] #businessApp :is(.domain-badge,.privacy-badge,.shared-badge){white-space:nowrap}

/* ---------- Floresta: deep green sidebar, pill buttons, soft serif titles ---------- */
html[data-style="floresta"]:not([data-theme="dark"]) #businessApp .b-sidebar{background:#10281c!important;scrollbar-color:#2c5a43 transparent}
html[data-style="floresta"]:not([data-theme="dark"]) #businessApp .b-sidebar :is(button,summary,span,b,small,em,i,a,p,label,div,time):not(.avatar):not(.sidebar-new-chat):not(.sidebar-new-chat *){color:#c4dccd!important;border-color:#23473a!important}
html[data-style="floresta"]:not([data-theme="dark"]) #businessApp .b-sidebar :is(.nav-section>summary,.nav-section-title){color:#8fd6ae!important}
html[data-style="floresta"]:not([data-theme="dark"]) #businessApp .b-sidebar .nav-section>summary:before{background:#6fd49c!important}
html[data-style="floresta"]:not([data-theme="dark"]) #businessApp .b-sidebar :is(button,summary,a):not(.company-logo):not(.sidebar-new-chat):hover{background:#183a2b!important;color:#fff!important}
html[data-style="floresta"]:not([data-theme="dark"]) #businessApp .b-sidebar :is(button,a).active,html[data-style="floresta"]:not([data-theme="dark"]) #businessApp .b-sidebar .active>summary{background:#21513a!important;color:#fff!important}
html[data-style="floresta"]:not([data-theme="dark"]) #businessApp .b-sidebar .sidebar-theme-toggle{background:#183a2b!important;border:1px solid #2c5a43!important;color:#d8ece0!important}
html[data-style="floresta"]:not([data-theme="dark"]) #businessApp .b-sidebar .sidebar-new-chat,html[data-style="floresta"]:not([data-theme="dark"]) #businessApp .b-sidebar .sidebar-new-chat *{background:#6fd49c!important;color:#0b2217!important}
html[data-style="floresta"]:not([data-theme="dark"]) #businessApp .b-sidebar em{background:#2c5a43!important;color:#eaf7ef!important}
html[data-style="floresta"] #businessApp :is(.primary,.page-head>button,.workspace-actions button,.style-apply,.chat-new-button,.chat-favorite-button,.connect-action,.security-grid article>button,.connector-grid article>button,.hub-agent-catalog button,.support-next>button,.sidebar-new-chat){border-radius:999px!important}
html[data-style="floresta"] #businessApp .b-sidebar :is(nav button[data-bview],.sidebar-group>summary,.sidebar-chat-link){border-radius:999px!important}
html[data-style="floresta"] #businessApp :is(.space-card,.workspace-grid>article,.workspace-list,.kpi-grid article,.budget-grid>article,.admin-grid>article,.usage-charts>article,.team-admin,.company-profile-form,.flow-list>article,.flow-summary article,.kanban-column,.kanban-card,.connector-grid article,.security-grid article,.data-table,.studio-catalog article,.support-conversation,.support-next,.profile-form,.profile-options,.profile-summary,.training-hero,.budget-hero,.style-card,.hub-agent-catalog article,.agent-value article,.agent-test-panel,.agent-purchase){border-radius:22px!important}
html[data-style="floresta"] #businessApp :is(.composer,.corp-composer,.channel-compose){border-radius:26px!important}
html[data-style="floresta"] #businessApp .b-main :is(h1,h2){font-weight:600!important;letter-spacing:-.015em!important}

/* ---------- Oceano: compact navigation, centered reading width ---------- */
@media(min-width:801px){html[data-style="oceano"] .app.business{grid-template-columns:238px minmax(0,1fr)!important}}
html[data-style="oceano"] #businessApp .b-sidebar{border-right:1px solid var(--line)!important}
html[data-style="oceano"] #businessApp .b-sidebar :is(nav button[data-bview],.sidebar-group>summary){min-height:35px!important;padding-block:7px!important;font-size:13px!important;border-radius:8px!important}
html[data-style="oceano"] #businessApp .b-sidebar .nav-section>summary{min-height:34px!important;padding-block:8px!important}
html[data-style="oceano"] #businessApp .b-sidebar .nav-section>summary:before{width:7px!important;height:7px!important;border-radius:50%!important}
html[data-style="oceano"] #businessApp :is(.page,.workspace-page,.shared-library,.support-page){padding-inline:max(28px,calc((100% - 1180px) / 2))!important}
html[data-style="oceano"] #businessApp .b-main .page-head{padding-bottom:18px!important;border-bottom:1px solid var(--line)!important}
html[data-style="oceano"] #businessApp .b-main .page-head h1{font-size:26px!important;letter-spacing:-.03em!important}
html[data-style="oceano"] #businessApp :is(.space-card,.workspace-grid>article,.workspace-list,.kpi-grid article,.budget-grid>article,.admin-grid>article,.usage-charts>article,.team-admin,.company-profile-form,.flow-list>article,.flow-summary article,.kanban-column,.kanban-card,.connector-grid article,.security-grid article,.data-table,.studio-catalog article,.support-conversation,.support-next,.profile-form,.profile-options,.profile-summary,.training-hero,.budget-hero,.style-card,.hub-agent-catalog article,.agent-value article,.agent-test-panel,.agent-purchase){border-radius:12px!important;border:1px solid var(--line)!important}
html[data-style="oceano"] #businessApp :is(.primary,.page-head>button,.workspace-actions button,.style-apply,.chat-new-button,.chat-favorite-button,.connect-action,.hub-agent-catalog button){border-radius:8px!important}

/* ---------- Aurora: aurora backdrop, floating glass sidebar and panels ---------- */
html[data-style="aurora"][data-theme="dark"]{--dark-bg:transparent;--dark-shell:rgba(28,17,48,.74);--dark-surface:rgba(46,29,78,.46);--dark-raised:rgba(72,46,118,.52);--dark-hover:rgba(110,72,176,.45);--dark-line:rgba(206,178,255,.17);--line:rgba(206,178,255,.17)}
html[data-style="aurora"][data-theme="dark"] #businessApp{background:radial-gradient(1100px 700px at 88% -12%,rgba(214,51,158,.34),transparent 62%),radial-gradient(900px 640px at 4% 108%,rgba(58,110,255,.32),transparent 60%),radial-gradient(760px 520px at 55% 45%,rgba(132,70,236,.2),transparent 70%),#110a1d!important}
html[data-style="aurora"]:not([data-theme="dark"]) #businessApp{background:radial-gradient(1100px 700px at 88% -12%,rgba(214,51,158,.11),transparent 62%),radial-gradient(900px 640px at 4% 108%,rgba(58,110,255,.11),transparent 60%),#fdfcff!important}
html[data-style="aurora"]:not([data-theme="dark"]) #businessApp :is(.b-main,.bview,.channel-layout,.channel-chat,.corp-chat,.workspace-page,.shared-library){background:transparent!important}
html[data-style="aurora"]:not([data-theme="dark"]) #businessApp .b-sidebar{background:rgba(255,255,255,.58)!important;border:1px solid rgba(255,255,255,.85)!important}
html[data-style="aurora"]:not([data-theme="dark"]) #businessApp :is(.space-card,.workspace-grid>article,.workspace-list,.kpi-grid article,.budget-grid>article,.admin-grid>article,.usage-charts>article,.team-admin,.company-profile-form,.flow-list>article,.flow-summary article,.kanban-column,.kanban-card,.connector-grid article,.security-grid article,.data-table,.studio-catalog article,.support-conversation,.support-next,.profile-form,.profile-options,.profile-summary,.style-card,.agent-value article,.agent-test-panel,.agent-purchase,.composer,.corp-composer){background:rgba(255,255,255,.64)!important;border-color:rgba(255,255,255,.9)!important}
html[data-style="aurora"] #businessApp .b-sidebar,html[data-style="aurora"] #businessApp :is(.space-card,.style-card,.composer,.corp-composer,.kanban-column){backdrop-filter:blur(18px) saturate(1.25)}
html[data-style="aurora"][data-theme="dark"] #businessApp .b-sidebar{border:1px solid rgba(206,178,255,.16)!important}
html[data-style="aurora"][data-theme="dark"] #businessApp .sidebar-chat-link>span:first-child{color:#a99bc4!important}
@media(min-width:801px){html[data-style="aurora"] #businessApp .b-sidebar{margin:12px 0 12px 12px;border-radius:22px}}
html[data-style="aurora"] #businessApp :is(.space-card,.workspace-grid>article,.workspace-list,.kpi-grid article,.budget-grid>article,.admin-grid>article,.usage-charts>article,.kanban-column,.kanban-card,.connector-grid article,.security-grid article,.data-table,.studio-catalog article,.style-card,.support-conversation,.profile-form,.profile-options){border-radius:18px!important}
html[data-style="aurora"] #businessApp .primary,html[data-style="aurora"] #businessApp .style-card.is-current .style-apply,html[data-style="aurora"] #businessApp .corp-messages article.user-msg{background:linear-gradient(135deg,#6f5cff,#c23bd0)!important;border-color:transparent!important;box-shadow:0 8px 22px rgba(170,70,230,.3)!important}
html[data-style="aurora"] #businessApp :is(.primary,.page-head>button,.workspace-actions button,.style-apply,.chat-new-button,.chat-favorite-button){border-radius:12px!important}

/* ---------- Ipê: airy, generous radii, header actions under the title ---------- */
html[data-style="ipe"]:not([data-theme="dark"]) #businessApp .b-sidebar{background:#fef8fa!important}
html[data-style="ipe"] #businessApp :is(.space-card,.workspace-grid>article,.workspace-list,.kpi-grid article,.budget-grid>article,.admin-grid>article,.usage-charts>article,.team-admin,.company-profile-form,.flow-list>article,.flow-summary article,.kanban-column,.kanban-card,.connector-grid article,.security-grid article,.data-table,.studio-catalog article,.support-conversation,.support-next,.profile-form,.profile-options,.profile-summary,.training-hero,.budget-hero,.style-card,.hub-agent-catalog article,.agent-value article,.agent-test-panel,.agent-purchase){border-radius:26px!important}
html[data-style="ipe"] #businessApp :is(.primary,.page-head>button,.workspace-actions button,.style-apply,.chat-new-button,.chat-favorite-button,.connect-action,.security-grid article>button,.connector-grid article>button,.hub-agent-catalog button,.support-next>button,.sidebar-new-chat){border-radius:999px!important}
html[data-style="ipe"] #businessApp .b-sidebar :is(nav button[data-bview],.sidebar-group>summary,.sidebar-chat-link){border-radius:999px!important}
@media(min-width:801px){
 html[data-style="ipe"] #businessApp .b-main :is(.page-head,.workspace-head){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:16px!important}
 html[data-style="ipe"] #businessApp .b-main .page-head h1,html[data-style="ipe"] #businessApp .workspace-head h1{font-size:36px!important;font-weight:800!important;letter-spacing:-.035em!important}
}
html[data-style="ipe"] #businessApp :is(.composer,.corp-composer,.channel-compose){border-radius:28px!important}
html[data-style="ipe"] #businessApp .corp-messages article{border-radius:22px!important}

/* ---------- Grafite: monochrome, square corners, navigation on the right ---------- */
@media(min-width:801px){
 html[data-style="grafite"] .app.business{grid-template-columns:minmax(0,1fr) 256px!important}
 html[data-style="grafite"] .business .b-sidebar{grid-column:2!important;border-left:1px solid var(--line)!important}
 html[data-style="grafite"] .business .b-main{grid-column:1!important}
}
html[data-style="grafite"] #businessApp *:not(.avatar):not(.avatar-more):not(.profile-photo):not(svg):not(svg *),html[data-style="grafite"] body>dialog{border-radius:2px!important;box-shadow:none!important}
html[data-style="grafite"] #businessApp :is(.space-card,.workspace-grid>article,.workspace-list,.kpi-grid article,.budget-grid>article,.admin-grid>article,.usage-charts>article,.team-admin,.company-profile-form,.flow-list>article,.flow-summary article,.kanban-column,.kanban-card,.connector-grid article,.security-grid article,.data-table,.studio-catalog article,.support-conversation,.support-next,.profile-form,.profile-options,.profile-summary,.style-card,.agent-value article,.agent-test-panel,.agent-purchase){border:1px solid var(--line)!important}
html[data-style="grafite"] #businessApp .b-main :is(h1,h2){letter-spacing:-.02em!important;font-weight:600!important}
html[data-style="grafite"]:not([data-theme="dark"]) #businessApp :is(.primary,.sidebar-new-chat,.style-card.is-current .style-apply,.corp-messages article.user-msg){background:#1b1b1b!important;border-color:#1b1b1b!important;color:#fff!important}
html[data-style="grafite"]:not([data-theme="dark"]) #businessApp :is(.sidebar-new-chat,.corp-messages article.user-msg) *{color:#fff!important}
html[data-style="grafite"]:not([data-theme="dark"]) #businessApp .b-sidebar :is(.nav-section>summary,.nav-section-title){color:#1b1b1b!important}
html[data-style="grafite"]:not([data-theme="dark"]) #businessApp .b-sidebar .nav-section>summary:before{background:#1b1b1b!important}
html[data-style="grafite"]:not([data-theme="dark"]) #businessApp .b-sidebar nav button.active{background:#ececec!important;color:#111!important}
html[data-style="grafite"][data-theme="dark"] #businessApp :is(.primary,.sidebar-new-chat,.style-card.is-current .style-apply,.corp-messages article.user-msg){background:#ececec!important;border-color:#ececec!important;color:#111!important}
html[data-style="grafite"][data-theme="dark"] #businessApp :is(.sidebar-new-chat,.corp-messages article.user-msg) *{color:#111!important}
html[data-style="grafite"][data-theme="dark"] #businessApp .b-sidebar :is(.nav-section>summary,.nav-section-title){color:#f2f2f2!important}
html[data-style="grafite"][data-theme="dark"] #businessApp .b-sidebar .nav-section>summary:before{background:#f2f2f2!important}
html[data-style="grafite"][data-theme="dark"] #businessApp .b-sidebar nav button.active{background:#2c2c2c!important;color:#fff!important}

/* ---------- Alto contraste: strong borders, underlined links, visible focus ---------- */
html[data-style="contraste"] #businessApp .b-sidebar :is(nav button[data-bview],.sidebar-group>summary){font-size:15px!important}
html[data-style="contraste"] #businessApp :is(p,li){font-size:max(14px,1em)!important;line-height:1.6}
html[data-style="contraste"] #businessApp :is(small,time,.style-traits li){font-size:13px!important}
html[data-style="contraste"] #businessApp :is(.space-card,.workspace-grid>article,.workspace-list,.kpi-grid article,.budget-grid>article,.admin-grid>article,.usage-charts>article,.team-admin,.company-profile-form,.flow-list>article,.flow-summary article,.kanban-column,.kanban-card,.connector-grid article,.security-grid article,.data-table,.studio-catalog article,.support-conversation,.support-next,.profile-form,.profile-options,.profile-summary,.style-card,.agent-value article,.agent-test-panel,.agent-purchase,.composer,.corp-composer){border:2px solid var(--line)!important;box-shadow:none!important}
html[data-style="contraste"] #businessApp :is(a,.text-action,.space-card>header button:not(.primary),.continue-card header button){text-decoration:underline!important;text-underline-offset:3px}
html[data-style="contraste"] #businessApp :focus-visible,html[data-style="contraste"] body>dialog :focus-visible{outline:3px solid #000!important;outline-offset:2px!important;box-shadow:0 0 0 6px #ffd400!important}
html[data-style="contraste"][data-theme="dark"] #businessApp :focus-visible,html[data-style="contraste"][data-theme="dark"] body>dialog :focus-visible{outline-color:#fff!important}
html[data-style="contraste"] #businessApp .b-sidebar nav button.active{background:#004cc3!important;color:#fff!important}
html[data-style="contraste"][data-theme="dark"] #businessApp .b-sidebar nav button.active{background:#b6d3ff!important;color:#000!important}
html[data-style="contraste"] #businessApp .b-sidebar nav button.active *{color:inherit!important}
html[data-style="contraste"]:not([data-theme="dark"]) #businessApp :is(.budget-hero span,.budget-hero small,.hub-agent-catalog .hub-agent-icon,.hub-agent-catalog p,.agent-card-price small,.company-profile-intro>span,.company-profile-intro p,.training-hero>div>span,.training-hero p,.training-hero small,.training-hero aside span),html[data-style="contraste"]:not([data-theme="dark"]) .toast small{color:#f1f5f9!important}
html[data-style="contraste"] #businessApp .avatar{background-color:#1e293b!important;color:#fff!important}
html[data-style="contraste"][data-theme="dark"] #businessApp .hub-agent-catalog button{color:#0b3d91!important}
html[data-style="contraste"][data-theme="dark"] #businessApp :is(.training-hero button,.training-action){color:#062a26!important}
html[data-style="contraste"][data-theme="dark"] #businessApp :is(.workspace-tabs i,.support-next>button:disabled,.security-grid article>span){background:#1e293b!important;color:#f1f5f9!important}
html[data-style="contraste"][data-theme="dark"] #businessApp :is(.people-table article>em,.agent-state.contracted,.secure,.connector-grid .connected){background:#0f3325!important;border-color:#1f6b4d!important;color:#b7f5d6!important}
html[data-style="contraste"]:not([data-theme="dark"]) #businessApp .studio-catalog header>em{color:#14532d!important}
html[data-style="contraste"]:not([data-theme="dark"]) #businessApp .security-grid article>span{color:#134e4a!important}

/* =========================================================================
   Disposição (Preferências): layout options independent of the style.
   Absent attribute = the shipped layout. Desktop only; mobile keeps the drawer.
   ========================================================================= */
html[data-nav]{--nav-panel:#fff;--nav-hover:var(--soft,#eaf2ff)}
html[data-nav][data-theme="dark"]{--nav-panel:var(--dark-shell);--nav-hover:var(--dark-hover)}
html[data-nav][data-style="floresta"]:not([data-theme="dark"]){--nav-panel:#10281c;--nav-hover:#1f4d37}
html[data-nav][data-style="aurora"]:not([data-theme="dark"]){--nav-panel:rgba(255,255,255,.95)}
html[data-nav][data-style="aurora"][data-theme="dark"]{--nav-panel:rgba(30,19,50,.97)}

@media(min-width:801px){
 /* ---- Menu no topo: the sidebar becomes a bar; each section is a dropdown ---- */
 html[data-nav="topo"] .app.business{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important}
 html[data-nav="topo"] .business .b-sidebar{grid-column:1!important;grid-row:1!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:18px!important;height:auto!important;padding:8px 22px!important;overflow:visible!important;border-right:0!important;border-left:0!important;border-bottom:1px solid var(--line)!important;position:relative!important;z-index:30}
 html[data-nav="topo"] .business .b-main{grid-column:1!important;grid-row:2!important;height:auto!important;min-height:0!important}
 html[data-nav="topo"] #businessApp .b-sidebar>header{display:flex!important;align-items:center!important;gap:10px!important;padding:0!important;flex:none}
 html[data-nav="topo"] #businessApp .b-sidebar .company-logo{width:112px!important}
 html[data-nav="topo"] #businessApp .b-sidebar>nav{display:flex!important;flex-direction:row!important;align-items:center;gap:4px;flex:1;min-width:0}
 html[data-nav="topo"] #businessApp .b-sidebar .nav-section{position:relative;margin:0!important;border:0!important}
 html[data-nav="topo"] #businessApp .b-sidebar .nav-section>summary{min-height:38px!important;padding:8px 12px!important;border-radius:9px!important;white-space:nowrap;gap:6px!important}
 html[data-nav="topo"] #businessApp .b-sidebar .nav-section>summary:before{display:none!important}
 html[data-nav="topo"] #businessApp .b-sidebar .nav-section>summary .group-chevron{transform:rotate(90deg)!important}
 html[data-nav="topo"] #businessApp .b-sidebar .nav-section[open]>summary{background:var(--nav-hover)!important}
 html[data-nav="topo"] #businessApp .b-sidebar .nav-section-content{position:absolute!important;top:calc(100% + 10px);left:0;width:300px;max-height:min(72vh,600px);overflow:auto;padding:10px!important;border-radius:14px!important;background:var(--nav-panel)!important;border:1px solid var(--line)!important;box-shadow:0 18px 50px rgba(15,23,42,.2)!important;z-index:80}
 html[data-nav="topo"][data-style="aurora"] #businessApp .b-sidebar{margin:12px 12px 0!important;border-radius:18px!important}
 html[data-nav="topo"][data-style="aurora"] #businessApp .b-sidebar .nav-section-content{backdrop-filter:blur(20px)}
 html[data-nav="topo"][data-style="contraste"] #businessApp .b-sidebar .nav-section-content{border-width:2px!important}

 /* ---- Menu recolhido: icon rail that expands over the content ---- */
 html[data-nav="recolhida"] .app.business{grid-template-columns:76px minmax(0,1fr)!important}
 html[data-nav="recolhida"][data-style="grafite"] .app.business{grid-template-columns:minmax(0,1fr) 76px!important}
 html[data-nav="recolhida"] #businessApp .b-sidebar{overflow-x:hidden!important;padding-inline:10px!important;width:76px!important;transition:width .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease!important}
 html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar{scrollbar-width:none}
 html[data-nav="recolhida"][data-nav-over] #businessApp .b-sidebar{position:fixed!important;top:0;bottom:0;left:0;z-index:70}
 html[data-nav="recolhida"][data-nav-labels] #businessApp .b-sidebar{padding-inline:12px!important}
 html[data-nav="recolhida"][data-nav-open] #businessApp .b-sidebar{width:264px!important;box-shadow:14px 0 44px rgba(15,23,42,.2)!important}
 html[data-nav="recolhida"][data-style="grafite"][data-nav-over] #businessApp .b-sidebar{left:auto;right:0}
 html[data-nav="recolhida"][data-style="grafite"][data-nav-open] #businessApp .b-sidebar{box-shadow:-14px 0 44px rgba(15,23,42,.2)!important}
 /* No Aurora a barra tem margem de 12px: fechada, cabe na coluna de 76px. */
 html[data-nav="recolhida"][data-style="aurora"] #businessApp .b-sidebar{width:64px!important}
 html[data-nav="recolhida"][data-style="aurora"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar>:is(header,nav,footer,.org-switcher){width:44px!important}
 html[data-nav="recolhida"][data-style="aurora"][data-nav-open] #businessApp .b-sidebar{width:252px!important}
 html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar>header{display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important;padding:0 0 12px!important}
 html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar .company-logo,html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar .company-logo img{width:33px!important;max-width:33px!important}
 html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar .company-logo img{object-fit:cover!important;object-position:0 50%!important}
 html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar .nav-section{margin:4px 0 0!important;border-top:0!important}
 html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar .nav-section>summary{font-size:0!important;min-height:0!important;padding:12px 0 6px!important;justify-content:center!important}
 html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar .nav-section>summary>*{display:none!important}
 html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar .nav-section>summary:before{width:24px!important;height:2px!important}
 html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar :is(nav button[data-bview],.sidebar-group>summary){font-size:0!important;justify-content:center!important;gap:0!important;padding:10px 0!important;min-height:42px!important}
 html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar :is(nav button[data-bview] em,.sidebar-group>summary>:not(svg),.sidebar-group>:not(summary)){display:none!important}
 html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar .sidebar-new-chat:before{font-size:24px!important}

 /* Os botoes do topo: retrair (menu lateral) e fixar (menu recolhido e aberto). */
 html:not([data-nav]) #businessApp .b-sidebar #themeToggle{display:none!important}
 html:not([data-nav]) #businessApp .b-sidebar #navCollapse{display:inline-flex!important}
 html[data-nav="recolhida"][data-nav-labels] #businessApp .b-sidebar #navPin{display:inline-flex!important}
 /* Recolhido e aberto ha quatro coisas no topo (logo, modo escuro, fixar, sino): uma coluna a mais, e o logo fica so com a marca, como no menu fechado -- assim ele nao muda de tamanho ao abrir. */
 html[data-nav="recolhida"][data-nav-labels] #businessApp .b-sidebar>header{grid-template-columns:minmax(0,1fr) auto auto auto!important}
 html[data-nav="recolhida"][data-nav-labels] #businessApp .b-sidebar .company-logo,html[data-nav="recolhida"][data-nav-labels] #businessApp .b-sidebar .company-logo img{width:33px!important;max-width:33px!important;justify-self:start}
 html[data-nav="recolhida"][data-nav-labels] #businessApp .b-sidebar .company-logo img{object-fit:cover!important;object-position:0 50%!important}
 /* Aberto (e abrindo, e recolhendo) o conteudo tem largura fixa: a barra corta, em vez de o texto requebrar a cada quadro. */
 html[data-nav="recolhida"][data-nav-labels] #businessApp .b-sidebar>:is(header,nav,footer,.org-switcher){min-width:228px;box-sizing:border-box}
 /* Recolhendo, o conteudo some; trocado o desenho, os icones reaparecem. */
 html[data-nav="recolhida"][data-nav-closing] #businessApp .b-sidebar{transition-duration:.16s!important}
 html[data-nav="recolhida"][data-nav-closing] #businessApp .b-sidebar>*{animation:krewia-nav-rail .16s ease both}
 @keyframes krewia-nav-rail{from{opacity:.15}to{opacity:1}}
 /* Recolhida, o conteudo tem a largura da barra fechada: os icones ja ficam no lugar final enquanto a barra ainda desliza. */
 html[data-nav="recolhida"]:not([data-nav-labels]):not(.nav-nunca) #businessApp .b-sidebar>:is(header,nav,footer,.org-switcher){width:56px!important;min-width:0!important;box-sizing:border-box}
 @media(prefers-reduced-motion:reduce){html[data-nav="recolhida"] #businessApp .b-sidebar,html[data-nav="recolhida"] #businessApp .b-sidebar>*{transition:none!important;animation:none!important}}

 /* Floating button clears the navigation when Grafite puts it on the right. */
 html[data-fab][data-style="grafite"]:not([data-nav]) #businessApp .krewia-fab{right:284px}
 html[data-fab][data-style="grafite"][data-nav="recolhida"] #businessApp .krewia-fab{right:104px}
}

/* ---- Cards em lista: agent catalogs as rows (documents use the page's own toggle) ---- */
html[data-cards="lista"] #businessApp :is(.hub-agent-catalog,.studio-catalog){grid-template-columns:1fr!important;gap:10px!important}
html[data-cards="lista"] #businessApp .hub-agent-catalog article{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto minmax(150px,auto);grid-template-areas:"icon head price action" "icon title price action" "icon desc price action";column-gap:20px;row-gap:3px;align-items:center;padding:16px 22px!important;min-height:0!important}
html[data-cards="lista"] #businessApp .hub-agent-catalog article>header{grid-area:head;justify-content:flex-start!important;gap:8px}
html[data-cards="lista"] #businessApp .hub-agent-catalog .hub-agent-icon{grid-area:icon;margin:0!important;font-size:26px!important;text-align:center}
html[data-cards="lista"] #businessApp .hub-agent-catalog h3{grid-area:title;margin:2px 0 0!important}
html[data-cards="lista"] #businessApp .hub-agent-catalog p{grid-area:desc;margin:0!important;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
html[data-cards="lista"] #businessApp .hub-agent-catalog .agent-card-price{grid-area:price;margin:0!important;flex-direction:column;align-items:flex-end!important;text-align:right;gap:2px!important}
html[data-cards="lista"] #businessApp .hub-agent-catalog article>button{grid-area:action;margin:0!important;width:auto!important;padding-inline:18px!important}
@media(max-width:900px){
 html[data-cards="lista"] #businessApp .hub-agent-catalog article{grid-template-columns:36px minmax(0,1fr);grid-template-areas:"icon head" "icon title" "icon desc" "icon price" "icon action"}
 html[data-cards="lista"] #businessApp .hub-agent-catalog .agent-card-price{align-items:flex-start!important;text-align:left;flex-direction:row}
 html[data-cards="lista"] #businessApp .hub-agent-catalog article>button{justify-self:start}
}