/* Commenta 2.5.76 — Vue + Nuxt UI application overhaul
   Loaded last on purpose: isolates the new app shell from legacy layout rules. */
:root{
  --cn-shell-sidebar:264px;
  --cn-shell-sidebar-compact:84px;
  --cn-app-max:1680px;
  --cn-social-logo:34px;
  --cn-social-logo-small:18px;
  --cn-control-h:44px;
  --cn-surface-radius:16px;
  --cn-surface-border:#e7e9ee;
  --cn-surface-bg:#fff;
  --cn-page-bg:#f7f8fa;
  --cn-focus:0 0 0 4px color-mix(in srgb,var(--ui-primary,#8b1d58) 11%,transparent);
}

/* ---- App shell: hard reset of every legacy width/grid/padding rule ---- */
html,body.cn-app-body,#cn-app,#cn-vue-app{width:100%!important;max-width:none!important;min-width:0!important}
body.cn-app-body{overflow-x:hidden!important;background:var(--cn-page-bg)!important}
body.cn-app-body .cn-vue-shell{
  width:100%!important;max-width:none!important;min-width:0!important;
  min-height:100vh!important;margin:0!important;padding:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) var(--cn-shell-sidebar)!important;
  grid-template-areas:"main side"!important;
  direction:ltr!important;
  gap:0!important;
}
body.cn-app-body .cn-vue-shell>.cn-side{
  grid-area:side!important;grid-column:auto!important;grid-row:auto!important;
  position:sticky!important;right:auto!important;left:auto!important;top:0!important;
  width:var(--cn-shell-sidebar)!important;max-width:var(--cn-shell-sidebar)!important;
  min-width:0!important;height:100vh!important;margin:0!important;
  padding:16px 12px!important;direction:rtl!important;
  overflow:hidden auto!important;
}
body.cn-app-body .cn-vue-shell>.cn-main{
  grid-area:main!important;grid-column:auto!important;grid-row:auto!important;
  width:100%!important;max-width:none!important;min-width:0!important;
  margin:0!important;padding:0!important;direction:rtl!important;
  overflow:clip visible!important;
}
body.cn-app-body .cn-vue-shell .cn-top{width:100%!important;max-width:none!important;margin:0!important}
body.cn-app-body .cn-vue-shell .cn-content{
  width:100%!important;max-width:var(--cn-app-max)!important;min-width:0!important;
  margin:0 auto!important;padding:26px clamp(20px,2.2vw,38px) 58px!important;
}
body.cn-app-body .cn-vue-shell .cn-app-footer{max-width:var(--cn-app-max)!important;width:100%!important;margin-inline:auto!important}

/* Never let old responsive shell padding reserve a ghost column. */
@media (max-width:1280px) and (min-width:1025px){
  body.cn-app-body .cn-vue-shell{
    grid-template-columns:minmax(0,1fr) var(--cn-shell-sidebar-compact)!important;
    padding:0!important;margin:0!important;
  }
  body.cn-app-body .cn-vue-shell>.cn-side{width:var(--cn-shell-sidebar-compact)!important;max-width:var(--cn-shell-sidebar-compact)!important;padding:14px 8px!important}
  body.cn-app-body .cn-vue-shell>.cn-side .cn-vue-brand-copy,
  body.cn-app-body .cn-vue-shell>.cn-side .cn-nav button>span:not(:first-child),
  body.cn-app-body .cn-vue-shell>.cn-side .cn-profile>span,
  body.cn-app-body .cn-vue-shell>.cn-side .cn-usage-mini>div:first-child{display:none!important}
  body.cn-app-body .cn-vue-shell>.cn-side .cn-brand,
  body.cn-app-body .cn-vue-shell>.cn-side .cn-nav button,
  body.cn-app-body .cn-vue-shell>.cn-side .cn-profile{justify-content:center!important}
  body.cn-app-body .cn-vue-shell>.cn-side .cn-nav button{padding-inline:0!important}
}
@media (max-width:1024px){
  body.cn-app-body .cn-vue-shell{display:block!important;width:100%!important;padding:0 0 82px!important}
  body.cn-app-body .cn-vue-shell>.cn-side{display:none!important}
  body.cn-app-body .cn-vue-shell>.cn-main{width:100%!important;margin:0!important;padding:0!important}
  body.cn-app-body .cn-vue-shell .cn-content{padding:18px 14px 96px!important}
}

/* ---- One social-logo system everywhere ---- */
body.cn-app-body .cn-channel-svg:not(.mini-icon):not(.badge-icon),
body.cn-app-body .cn-channel-fallback:not(.mini-icon):not(.badge-icon),
body.cn-app-body .cn-connect-brand-icon,
body.cn-app-body .cn-builder-switch-icon,
body.cn-app-body .cn-flow-account-icon>.cn-channel-svg,
body.cn-app-body .cn-studio-account-channel-icon,
body.cn-app-body img[src*="/assets/icons/channels/instagram"],
body.cn-app-body img[src*="/assets/icons/channels/telegram"],
body.cn-app-body img[src*="/assets/icons/channels/bale-brand"]{
  width:var(--cn-social-logo)!important;height:var(--cn-social-logo)!important;
  min-width:var(--cn-social-logo)!important;max-width:var(--cn-social-logo)!important;
  min-height:var(--cn-social-logo)!important;max-height:var(--cn-social-logo)!important;
  display:block!important;object-fit:contain!important;object-position:center!important;
  padding:0!important;margin:0!important;border-radius:10px!important;transform:none!important;
}
body.cn-app-body .cn-channel-svg.mini-icon,
body.cn-app-body .cn-channel-svg.badge-icon,
body.cn-app-body .cn-avatar-channel .cn-channel-svg,
body.cn-app-body .cn-channel-badge .cn-channel-svg{
  width:var(--cn-social-logo-small)!important;height:var(--cn-social-logo-small)!important;
  min-width:var(--cn-social-logo-small)!important;max-width:var(--cn-social-logo-small)!important;
  min-height:var(--cn-social-logo-small)!important;max-height:var(--cn-social-logo-small)!important;
  object-fit:contain!important;padding:0!important;margin:0!important;border-radius:5px!important;
}
/* Profile/account photos get a fixed box too, never provider-native dimensions. */
body.cn-app-body .cn-account-avatar,
body.cn-app-body .cn-account-avatar>img,
body.cn-app-body .cn-flow-account-icon,
body.cn-app-body .cn-flow-account-icon>img,
body.cn-app-body .cn-studio-account-avatar,
body.cn-app-body .cn-studio-account-avatar>img,
body.cn-app-body .cn-channel-picker-card .cn-channel-logo,
body.cn-app-body .cn-channel-picker-card .cn-channel-logo>img{
  width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;
  min-height:42px!important;max-height:42px!important;object-fit:cover!important;overflow:hidden!important;border-radius:12px!important;
}
/* Absolute guardrail: network icon files can never explode a page. */
body.cn-app-body img[src*="assets/icons/channels/"]{max-width:var(--cn-social-logo)!important;max-height:var(--cn-social-logo)!important}

/* ---- Nuxt UI-like page primitives used consistently by every legacy view ---- */
body.cn-app-body .cn-card,
body.cn-app-body .cn-table-card,
body.cn-app-body .cn-info-box,
body.cn-app-body .cn-channel-center-hero,
body.cn-app-body .cn-channel-connected-section,
body.cn-app-body .cn-commerce-verify,
body.cn-app-body .cn-studio-section,
body.cn-app-body .cn-growth-panel{
  border:1px solid var(--cn-surface-border)!important;border-radius:var(--cn-surface-radius)!important;
  background:var(--cn-surface-bg)!important;box-shadow:0 1px 2px rgba(16,24,40,.035),0 8px 28px rgba(16,24,40,.035)!important;
}
body.cn-app-body .cn-card:hover{border-color:#dfe3e9!important}
body.cn-app-body .cn-table-card{overflow:auto!important}
body.cn-app-body .cn-table{width:100%!important;min-width:720px!important;border-spacing:0!important}
body.cn-app-body .cn-table thead{position:sticky!important;top:0!important;z-index:2!important;background:#f8f9fb!important}
body.cn-app-body .cn-table th{height:44px!important;font-size:11px!important;text-transform:none!important;color:#667085!important}
body.cn-app-body .cn-table td{height:56px!important;color:#344054!important}

/* Forms / fields: one size across Studio, Growth, Settings, Flow inspector and dialogs. */
body.cn-app-body :is(.cn-content,.cn-modal,.cn-inspector,.cn-builder) input:not([type=checkbox]):not([type=radio]),
body.cn-app-body :is(.cn-content,.cn-modal,.cn-inspector,.cn-builder) select{
  min-height:var(--cn-control-h)!important;height:var(--cn-control-h)!important;padding:0 13px!important;
  border:1px solid #d8dce3!important;border-radius:11px!important;background:#fff!important;
  box-shadow:0 1px 2px rgba(16,24,40,.025)!important;color:#101828!important;
}
body.cn-app-body :is(.cn-content,.cn-modal,.cn-inspector,.cn-builder) textarea{
  width:100%!important;min-height:116px!important;padding:12px 13px!important;border:1px solid #d8dce3!important;border-radius:11px!important;
  background:#fff!important;color:#101828!important;line-height:1.9!important;box-shadow:0 1px 2px rgba(16,24,40,.025)!important;
}
body.cn-app-body :is(.cn-content,.cn-modal,.cn-inspector,.cn-builder) :is(input,textarea,select):focus{
  border-color:color-mix(in srgb,var(--ui-primary,#8b1d58) 55%,#d8dce3)!important;box-shadow:var(--cn-focus)!important;outline:0!important;
}
body.cn-app-body :is(.cn-content,.cn-modal,.cn-inspector,.cn-builder) label{font-size:12px!important;font-weight:700!important;color:#344054!important;gap:7px!important}

/* Channels: commercial cards, not giant provider logos. */
body.cn-app-body .cn-channel-picker-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:14px!important}
body.cn-app-body .cn-connected-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
body.cn-app-body .cn-channel-picker-card{min-height:112px!important;padding:16px!important;display:flex!important;align-items:center!important;gap:12px!important}
body.cn-app-body .cn-channel-account-card{min-height:190px!important;padding:18px!important;gap:12px!important}
body.cn-app-body .cn-channel-account-card .cn-account-row{min-height:52px!important;padding:7px 9px!important}
body.cn-app-body .cn-channel-account-card .cn-account-meta{padding:10px 12px!important;border-radius:11px!important;background:#f8f9fb!important}

/* Shop: strong grid and guaranteed image containment. */
body.cn-app-body .cn-product-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))!important;gap:16px!important;align-items:stretch!important}
body.cn-app-body .cn-product-card{min-width:0!important;max-width:none!important;border-radius:17px!important;overflow:hidden!important}
body.cn-app-body .cn-product-image{width:100%!important;height:220px!important;min-height:220px!important;max-height:220px!important;overflow:hidden!important;position:relative!important;background:linear-gradient(145deg,#f3f5f8,#eef1f5)!important}
body.cn-app-body .cn-product-image img,
body.cn-app-body .cn-product-image .cn-lazy-product-img{width:100%!important;height:100%!important;min-width:0!important;max-width:100%!important;min-height:0!important;max-height:220px!important;object-fit:cover!important;object-position:center!important}
body.cn-app-body .cn-product-copy{min-height:172px!important;padding:14px!important}
body.cn-app-body .cn-product-actions{padding:10px 14px 14px!important}

/* Studio: primary editor owns the canvas; sidebar can never steal ~30%. */
body.cn-app-body :is(.cn-studio-compose,.cn-studio-compose-grid,.cn-studio-layout,.cn-studio-composer-grid){
  width:100%!important;max-width:none!important;display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(280px,320px)!important;grid-template-areas:"main side"!important;
  gap:18px!important;align-items:start!important;direction:ltr!important;
}
body.cn-app-body :is(.cn-studio-compose-main,.cn-studio-main,.cn-studio-composer,.cn-studio-editor-card){grid-area:main!important;min-width:0!important;direction:rtl!important}
body.cn-app-body :is(.cn-studio-compose-side,.cn-studio-sidebar,.cn-studio-publish,.cn-studio-publish-card){grid-area:side!important;min-width:0!important;direction:rtl!important;position:sticky!important;top:94px!important}
body.cn-app-body .cn-studio-head{padding:12px 14px!important}
body.cn-app-body .cn-studio-section{padding:18px!important}
body.cn-app-body .cn-studio-media-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important;gap:10px!important}
body.cn-app-body .cn-studio-media-preview{aspect-ratio:1/1!important;height:auto!important;min-height:130px!important}
body.cn-app-body .cn-studio-media-preview :is(img,video){width:100%!important;height:100%!important;max-height:none!important;object-fit:cover!important}

/* Inbox: deterministic split, no phantom width. */
body.cn-app-body .cn-ig-inbox{width:100%!important;grid-template-columns:minmax(300px,350px) minmax(0,1fr)!important}
body.cn-app-body .cn-chat-layout{grid-template-columns:minmax(0,1fr) minmax(220px,270px)!important}
body.cn-app-body .cn-conv{grid-template-columns:42px minmax(0,1fr) auto!important}
body.cn-app-body .cn-conv :is(.cn-avatar,.cn-avatar img){width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important;object-fit:cover!important}

/* Route change motion – short enough to feel faster, not decorative. */
#cn-view-root{min-width:0!important;will-change:opacity,transform}
#cn-view-root.cn-route-enter{animation:cn-view-enter .16s cubic-bezier(.2,.8,.2,1)}
@keyframes cn-view-enter{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}

/* Professional route loader */
.cn-vue-route-progress{height:3px!important;background:rgba(139,29,88,.06)!important}
.cn-vue-route-progress::after{width:28%!important;animation-duration:.58s!important}
.cn-vue-route-screen{background:rgba(247,248,250,.42)!important;backdrop-filter:blur(3px) saturate(1.08)!important}
.cn-vue-route-card{min-width:230px!important;padding:13px 16px!important;border-radius:14px!important;background:rgba(255,255,255,.96)!important;border:1px solid #e7e9ee!important;box-shadow:0 18px 46px rgba(16,24,40,.12)!important}
.cn-vue-route-spinner{width:21px!important;height:21px!important;border-width:2.5px!important}

@media(max-width:1280px){
  body.cn-app-body .cn-channel-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.cn-app-body :is(.cn-studio-compose,.cn-studio-compose-grid,.cn-studio-layout,.cn-studio-composer-grid){grid-template-columns:minmax(0,1fr) 290px!important}
}
@media(max-width:1024px){
  body.cn-app-body .cn-channel-picker-grid,body.cn-app-body .cn-connected-channel-grid{grid-template-columns:1fr!important}
  body.cn-app-body :is(.cn-studio-compose,.cn-studio-compose-grid,.cn-studio-layout,.cn-studio-composer-grid){display:block!important;direction:rtl!important}
  body.cn-app-body :is(.cn-studio-compose-side,.cn-studio-sidebar,.cn-studio-publish,.cn-studio-publish-card){position:static!important;margin-top:14px!important}
  body.cn-app-body .cn-ig-inbox{grid-template-columns:320px minmax(0,1fr)!important}
  body.cn-app-body .cn-chat-layout{grid-template-columns:1fr!important}
}
@media(max-width:720px){
  :root{--cn-social-logo:30px;--cn-control-h:43px}
  body.cn-app-body .cn-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body.cn-app-body .cn-product-image{height:160px!important;min-height:160px!important;max-height:160px!important}
  body.cn-app-body .cn-product-image img,body.cn-app-body .cn-product-image .cn-lazy-product-img{max-height:160px!important}
  body.cn-app-body .cn-ig-inbox{display:block!important}
}
@media(max-width:480px){body.cn-app-body .cn-product-grid{grid-template-columns:1fr!important}body.cn-app-body .cn-product-image{height:220px!important;max-height:220px!important}}


/* ========================================================================
   Commenta 2.5.77 — deterministic desktop shell + Flow Builder workstation
   ======================================================================== */
:root{--cn-shell-sidebar:248px;--cn-builder-library:300px;--cn-builder-inspector:336px}

/* Desktop shell is deliberately not CSS-grid anymore. The navigation rail is
   fixed and the application canvas owns every remaining pixel. This avoids
   legacy RTL grid-column rules creating a phantom/ghost column. */
@media (min-width:1025px){
  body.cn-app-body .cn-vue-shell{display:block!important;position:relative!important;direction:rtl!important;width:100vw!important;max-width:100vw!important;min-height:100vh!important;overflow:visible!important}
  body.cn-app-body .cn-vue-shell>.cn-side{
    display:flex!important;position:fixed!important;inset-block:0!important;right:0!important;left:auto!important;
    width:var(--cn-shell-sidebar)!important;min-width:var(--cn-shell-sidebar)!important;max-width:var(--cn-shell-sidebar)!important;
    height:100vh!important;margin:0!important;padding:16px 12px!important;z-index:80!important;direction:rtl!important;
    overflow-x:hidden!important;overflow-y:auto!important;background:rgba(255,255,255,.98)!important;border-left:1px solid #eaecf0!important
  }
  body.cn-app-body .cn-vue-shell>.cn-main{
    display:block!important;position:relative!important;right:auto!important;left:auto!important;
    margin:0 var(--cn-shell-sidebar) 0 0!important;padding:0!important;
    width:calc(100vw - var(--cn-shell-sidebar))!important;max-width:calc(100vw - var(--cn-shell-sidebar))!important;min-width:0!important;
    direction:rtl!important;overflow:visible!important
  }
  body.cn-app-body .cn-vue-shell .cn-top{width:100%!important;max-width:none!important;margin:0!important;padding-inline:28px!important}
  body.cn-app-body .cn-vue-shell .cn-content{width:100%!important;max-width:none!important;margin:0!important;padding:24px 28px 58px!important}
  body.cn-app-body .cn-vue-shell .cn-app-footer{width:100%!important;max-width:none!important;margin:0!important;padding-inline:28px!important}
}
@media (min-width:1025px) and (max-width:1180px){:root{--cn-shell-sidebar:220px}}

/* Builder becomes a proper three-pane workstation on desktop:
   block library / infinite canvas / inspector. No collapsed 76px text spill. */
@media (min-width:901px){
  body.builder-open{overflow:hidden!important}
  body.builder-open .cn-builder{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:10020!important;background:#f6f7f9!important;overflow:hidden!important}
  body.builder-open .cn-builder-top{height:74px!important;min-height:74px!important;padding:0 20px!important;background:rgba(255,255,255,.98)!important;border-bottom:1px solid #e7e9ee!important;box-shadow:0 1px 6px rgba(16,24,40,.04)!important}
  body.builder-open .cn-builder-work,
  body.builder-open .cn-builder-work.palette-expanded{
    display:grid!important;grid-template-columns:var(--cn-builder-library) minmax(0,1fr) var(--cn-builder-inspector)!important;
    grid-template-rows:minmax(0,1fr)!important;direction:ltr!important;width:100vw!important;height:calc(100vh - 74px)!important;min-height:0!important;overflow:hidden!important
  }
  body.builder-open .cn-node-palette,
  body.builder-open .cn-node-palette.expanded{
    grid-column:1!important;grid-row:1!important;position:relative!important;inset:auto!important;
    width:var(--cn-builder-library)!important;min-width:var(--cn-builder-library)!important;max-width:var(--cn-builder-library)!important;height:100%!important;
    display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:7px!important;padding:14px 12px 20px!important;
    overflow-x:hidden!important;overflow-y:auto!important;direction:rtl!important;background:#fff!important;border-left:0!important;border-right:1px solid #e8eaee!important;
    box-shadow:6px 0 20px rgba(16,24,40,.025)!important;scrollbar-width:thin!important
  }
  body.builder-open .cn-node-palette>.cn-palette-toggle{display:none!important}
  body.builder-open .cn-node-palette>span{display:block!important;text-align:right!important;padding:4px 7px 3px!important;margin:0!important;font-size:10px!important;font-weight:850!important;color:#98a2b3!important;letter-spacing:.02em!important}
  body.builder-open .cn-node-palette>.cn-palette-item,
  body.builder-open .cn-node-palette>.cn-palette-help,
  body.builder-open .cn-node-palette.expanded>.cn-palette-item,
  body.builder-open .cn-node-palette.expanded>.cn-palette-help{
    flex:0 0 auto!important;width:100%!important;max-width:none!important;min-width:0!important;height:auto!important;min-height:62px!important;margin:0!important;padding:10px 11px!important;
    display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:10px!important;row-gap:2px!important;
    align-items:center!important;justify-items:stretch!important;text-align:right!important;border:1px solid #edf0f3!important;border-radius:13px!important;background:#fff!important;color:#344054!important;box-shadow:none!important;overflow:hidden!important
  }
  body.builder-open .cn-node-palette>.cn-palette-item:hover,
  body.builder-open .cn-node-palette>.cn-palette-help:hover{background:#fbf8fa!important;border-color:#e7d5df!important;transform:none!important}
  body.builder-open .cn-node-palette .cn-palette-item-icon,
  body.builder-open .cn-node-palette .cn-palette-help>.cn-icon{grid-column:1!important;grid-row:1/3!important;width:38px!important;height:38px!important;display:grid!important;place-items:center!important;border-radius:10px!important;background:#f7f3f6!important;color:var(--ui-primary)!important;margin:0!important}
  body.builder-open .cn-node-palette .cn-palette-item-icon svg,
  body.builder-open .cn-node-palette .cn-palette-help>.cn-icon{width:19px!important;height:19px!important}
  body.builder-open .cn-node-palette>.cn-palette-item em,
  body.builder-open .cn-node-palette>.cn-palette-help em,
  body.builder-open .cn-node-palette.expanded>.cn-palette-item em,
  body.builder-open .cn-node-palette.expanded>.cn-palette-help em{
    grid-column:2!important;grid-row:1!important;display:block!important;position:static!important;inset:auto!important;transform:none!important;
    width:auto!important;max-width:100%!important;margin:0!important;padding:0!important;background:transparent!important;color:#1d2939!important;
    font-size:12px!important;font-weight:850!important;line-height:1.55!important;white-space:normal!important;text-align:right!important;overflow:visible!important
  }
  body.builder-open .cn-node-palette>.cn-palette-item small,
  body.builder-open .cn-node-palette>.cn-palette-help small,
  body.builder-open .cn-node-palette.expanded>.cn-palette-item small,
  body.builder-open .cn-node-palette.expanded>.cn-palette-help small{
    grid-column:2!important;grid-row:2!important;display:block!important;min-width:0!important;margin:0!important;color:#98a2b3!important;font-size:9.5px!important;line-height:1.55!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:right!important
  }
  body.builder-open .cn-node-palette .cn-builder-help{display:block!important;margin:6px 0 0!important;padding:12px!important;border-radius:12px!important;background:#faf7f9!important;border:1px solid #f0e5eb!important;direction:rtl!important}
  body.builder-open .cn-canvas-wrap{grid-column:2!important;grid-row:1!important;position:relative!important;width:100%!important;min-width:0!important;height:100%!important;overflow:auto!important;direction:rtl!important;background:#f6f7f9!important;padding-bottom:0!important}
  body.builder-open .cn-inspector{grid-column:3!important;grid-row:1!important;position:relative!important;inset:auto!important;width:var(--cn-builder-inspector)!important;min-width:var(--cn-builder-inspector)!important;max-width:var(--cn-builder-inspector)!important;height:100%!important;overflow:auto!important;direction:rtl!important;background:#fff!important;border-right:1px solid #e8eaee!important;padding:18px!important}
  body.builder-open .cn-canvas-help{margin:12px 14px 0!important;max-width:850px!important}
  body.builder-open .cn-zoom{left:18px!important;right:auto!important;bottom:18px!important}
}
@media (min-width:901px) and (max-width:1180px){:root{--cn-builder-library:260px;--cn-builder-inspector:300px}}

/* Dedicated Flow-builder loading layer. It is independent from the SPA shell,
   so it remains visible while Flow + variables + commerce data are fetched. */
.cn-flow-builder-loader{position:fixed;inset:0;z-index:2147483100;display:grid;place-items:center;padding:22px;background:rgba(247,248,250,.86);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,visibility .14s ease}
.cn-flow-builder-loader.show{opacity:1;visibility:visible;pointer-events:auto}
.cn-flow-builder-loader-card{width:min(420px,calc(100vw - 32px));padding:24px;border:1px solid rgba(231,233,238,.96);border-radius:20px;background:#fff;box-shadow:0 28px 80px rgba(16,24,40,.14);display:grid;gap:14px;text-align:right;direction:rtl}
.cn-flow-builder-loader-head{display:flex;align-items:center;gap:13px}.cn-flow-builder-loader-head>span{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#f8edf3,#f4e9ff);display:grid;place-items:center;position:relative}.cn-flow-builder-loader-head>span:after{content:"";width:19px;height:19px;border:2px solid #dfc7d4;border-top-color:var(--ui-primary,#8b1d58);border-radius:50%;animation:cnspin .72s linear infinite}.cn-flow-builder-loader-head b{display:block;color:#101828;font-size:15px}.cn-flow-builder-loader-head small{display:block;margin-top:3px;color:#667085;font-size:10.5px}.cn-flow-builder-loader-track{height:5px;border-radius:999px;background:#f0e8ed;overflow:hidden}.cn-flow-builder-loader-track i{display:block;width:38%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ui-primary,#8b1d58),var(--ui-primary-2,#e30068));animation:cnFlowLoader 1s ease-in-out infinite}@keyframes cnFlowLoader{0%{transform:translateX(190%)}100%{transform:translateX(-290%)}}.cn-flow-builder-loader-steps{display:flex;gap:7px;flex-wrap:wrap}.cn-flow-builder-loader-steps span{padding:6px 9px;border-radius:999px;background:#f8f9fb;color:#98a2b3;font-size:9px;font-weight:750}.cn-flow-builder-loader-steps span.active{background:#f8edf3;color:var(--ui-primary,#8b1d58)}


/* ========================================================================
   Commenta 2.5.78 — zero-ghost desktop shell + content-aware Flow canvas
   ======================================================================== */
:root{--cn-shell-sidebar:248px}
@media (min-width:1025px){
  html,body.cn-app-body,#cn-app,#cn-vue-app{width:100%!important;max-width:100%!important;min-width:0!important}
  body.cn-app-body .cn-vue-shell{
    display:flex!important;flex-direction:row!important;align-items:stretch!important;direction:rtl!important;
    width:100%!important;max-width:100%!important;min-width:0!important;min-height:100vh!important;
    margin:0!important;padding:0!important;gap:0!important;overflow:visible!important
  }
  body.cn-app-body .cn-vue-shell>.cn-side{
    order:0!important;position:sticky!important;top:0!important;right:auto!important;left:auto!important;inset:auto!important;
    flex:0 0 var(--cn-shell-sidebar)!important;width:var(--cn-shell-sidebar)!important;min-width:var(--cn-shell-sidebar)!important;max-width:var(--cn-shell-sidebar)!important;
    height:100vh!important;margin:0!important;align-self:flex-start!important;z-index:80!important
  }
  body.cn-app-body .cn-vue-shell>.cn-main{
    order:1!important;position:relative!important;inset:auto!important;
    flex:1 1 0%!important;width:0!important;min-width:0!important;max-width:none!important;
    margin:0!important;padding:0!important;overflow:visible!important;direction:rtl!important
  }
  body.cn-app-body .cn-vue-shell>.cn-main>.cn-top,
  body.cn-app-body .cn-vue-shell>.cn-main>.cn-content,
  body.cn-app-body .cn-vue-shell>.cn-main>.cn-app-footer{
    width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important
  }
  body.cn-app-body .cn-vue-shell>.cn-main>.cn-content{padding-inline:clamp(20px,2vw,34px)!important}
}
@media (min-width:1025px) and (max-width:1180px){:root{--cn-shell-sidebar:220px}}

/* Flow Builder scroll coordinates are always LTR. Node/inspector copy remains RTL. */
@media (min-width:901px){
  body.builder-open .cn-canvas-wrap{
    direction:ltr!important;overflow-x:auto!important;overflow-y:auto!important;overscroll-behavior:contain!important;
    scrollbar-gutter:stable both-edges!important
  }
  body.builder-open .cn-canvas{transform-origin:0 0!important;min-width:100%!important;min-height:100%!important}
  body.builder-open .cn-node{direction:rtl!important}
  body.builder-open .cn-canvas-help{direction:rtl!important;text-align:right!important}
}

/* 2.5.78 final desktop guarantees */
@media (min-width:1025px){
  body.cn-app-body .cn-vue-shell{display:flex!important;flex-flow:row nowrap!important;direction:rtl!important}
  body.cn-app-body .cn-vue-shell>.cn-side{position:sticky!important;top:0!important;flex:0 0 var(--cn-shell-sidebar)!important}
  body.cn-app-body .cn-vue-shell>.cn-main{flex:1 1 0%!important;width:0!important;min-width:0!important;margin:0!important;max-width:none!important}
  body.cn-app-body .cn-vue-shell>.cn-main #cn-view-root{width:100%!important;max-width:none!important;margin:0!important}
  body.cn-app-body .cn-vue-shell>.cn-main :is(.cn-stats,.cn-home-grid,.cn-card-grid,.cn-table-card,.cn-settings,.cn-shop-page,.cn-growth-page){max-width:none!important}
}
@media (min-width:901px){
  body.builder-open .cn-builder-work,
  body.builder-open .cn-builder-work.palette-expanded{position:relative!important;grid-template-columns:var(--cn-builder-library) minmax(0,1fr)!important}
  body.builder-open .cn-node-palette,
  body.builder-open .cn-node-palette.expanded{grid-column:1!important}
  body.builder-open .cn-canvas-wrap{grid-column:2!important;direction:ltr!important;scroll-behavior:auto!important}
  body.builder-open .cn-inspector{
    display:none!important;position:absolute!important;grid-column:auto!important;right:0!important;left:auto!important;top:0!important;bottom:0!important;
    width:var(--cn-builder-inspector)!important;min-width:var(--cn-builder-inspector)!important;max-width:var(--cn-builder-inspector)!important;
    height:100%!important;z-index:35!important;border-right:1px solid #e8eaee!important;border-left:0!important;
    box-shadow:-16px 0 42px rgba(16,24,40,.08)!important
  }
  body.builder-open .cn-builder.has-selection .cn-inspector{display:block!important}
  body.builder-open .cn-builder:not(.has-selection) .cn-canvas-wrap{padding-right:0!important}
  body.builder-open .cn-canvas{width:auto;max-width:none!important}
}


/* ========================================================================
   Commenta 2.5.79 — viewport shell lock + platform inbox + clean social badges
   ======================================================================== */
/* Remove the tiny duplicated/overlay social glyphs that could clip on cards. */
body.cn-app-body .cn-avatar-channel,
body.cn-app-body .cn-studio-account-mini-icon,
body.cn-app-body .cn-mini-platform-overlay{display:none!important}

/* Desktop viewport is now deterministic: the Vue mount owns the viewport,
   sidebar owns the right rail, main owns every remaining pixel. */
@media (min-width:1025px){
  html,body.cn-app-body{width:100%!important;height:100%!important;min-height:100%!important;overflow:hidden!important}
  body.cn-app-body #cn-app,
  body.cn-app-body #cn-vue-app,
  body.cn-app-body #cn-vue-app>div{position:fixed!important;inset:0!important;width:auto!important;height:auto!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
  body.cn-app-body .cn-vue-shell{position:absolute!important;inset:0!important;display:block!important;width:auto!important;height:auto!important;max-width:none!important;min-width:0!important;margin:0!important;padding:0!important;overflow:hidden!important;direction:rtl!important;background:var(--ui-bg,#f7f8fa)!important}
  body.cn-app-body .cn-vue-shell>.cn-side{position:absolute!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:var(--cn-shell-sidebar)!important;min-width:var(--cn-shell-sidebar)!important;max-width:var(--cn-shell-sidebar)!important;height:auto!important;margin:0!important;overflow-y:auto!important;overflow-x:hidden!important}
  body.cn-app-body .cn-vue-shell>.cn-main{position:absolute!important;top:0!important;bottom:0!important;left:0!important;right:var(--cn-shell-sidebar)!important;width:auto!important;max-width:none!important;min-width:0!important;height:auto!important;margin:0!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;direction:rtl!important;overscroll-behavior:contain!important;scrollbar-gutter:auto!important}
  body.cn-app-body .cn-vue-shell>.cn-main>.cn-top,
  body.cn-app-body .cn-vue-shell>.cn-main>.cn-content,
  body.cn-app-body .cn-vue-shell>.cn-main>.cn-app-footer{width:100%!important;max-width:none!important;min-width:0!important;margin-inline:0!important}
  body.cn-app-body .cn-vue-shell>.cn-main>.cn-content{overflow:visible!important}
}
@media (max-width:1024px){
  body.cn-app-body #cn-app,body.cn-app-body #cn-vue-app,body.cn-app-body #cn-vue-app>div{width:100%!important;max-width:none!important;min-width:0!important}
}

/* Messenger-first Inbox */
body.cn-app-body .cn-inbox-page{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;min-width:0}
body.cn-app-body .cn-inbox-platform-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:6px;border:1px solid #e9ecf2;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(16,24,40,.035)}
body.cn-app-body .cn-inbox-platform-tabs button{appearance:none;border:1px solid transparent;background:transparent;min-height:54px;border-radius:12px;padding:8px 12px;display:flex;align-items:center;justify-content:center;gap:8px;color:#667085;font-weight:800;cursor:pointer;transition:.15s ease}
body.cn-app-body .cn-inbox-platform-tabs button:hover{background:#f8f9fb;color:#344054}
body.cn-app-body .cn-inbox-platform-tabs button.active{background:linear-gradient(135deg,var(--primary-soft,#f7edf3),#fff);border-color:var(--primary-line,#ead6e1);color:var(--primary,#8b1d58);box-shadow:0 6px 18px rgba(16,24,40,.05)}
body.cn-app-body .cn-inbox-platform-logo{width:28px;height:28px;display:grid;place-items:center;flex:0 0 28px}
body.cn-app-body .cn-inbox-platform-logo .cn-channel-svg{width:24px!important;height:24px!important;max-width:24px!important;max-height:24px!important;display:block!important;object-fit:contain!important}
body.cn-app-body .cn-inbox-page>.cn-ig-inbox{min-height:0;margin:0!important}
body.cn-app-body .cn-inbox-disconnected{min-height:420px;border:1px dashed #dfe3eb;border-radius:20px;background:linear-gradient(180deg,#fff,#fafbfc);display:grid;place-items:center;align-content:center;justify-items:center;gap:14px;text-align:center;padding:42px 24px;box-shadow:0 10px 30px rgba(16,24,40,.03)}
body.cn-app-body .cn-inbox-disconnected-logo{width:64px;height:64px;border-radius:18px;background:#f7f8fb;border:1px solid #eceff4;display:grid;place-items:center}
body.cn-app-body .cn-inbox-disconnected-logo .cn-channel-svg{width:38px!important;height:38px!important;max-width:38px!important;max-height:38px!important;object-fit:contain!important}
body.cn-app-body .cn-inbox-disconnected>div{max-width:520px;display:grid;gap:7px}
body.cn-app-body .cn-inbox-disconnected b{font-size:18px;color:#1d2939}
body.cn-app-body .cn-inbox-disconnected p{margin:0;color:#667085;font-size:12px;line-height:1.9}
body.cn-app-body .cn-inbox-disconnected .cn-btn{min-width:190px}
body.cn-app-body .cn-chat-placeholder-platform{width:46px;height:46px;border-radius:15px;background:#f7f8fb;border:1px solid #eceff4;display:grid;place-items:center;margin:2px auto 0}
body.cn-app-body .cn-chat-placeholder-platform .cn-channel-svg{width:28px!important;height:28px!important;max-width:28px!important;max-height:28px!important;object-fit:contain!important}
/* Conversation cards get one clean platform label only — no second icon. */
body.cn-app-body .cn-conv .cn-channel-mini{gap:0!important}
body.cn-app-body .cn-conv .cn-channel-mini>.cn-channel-svg,
body.cn-app-body .cn-conv .cn-channel-mini>img{display:none!important}

@media(max-width:720px){
  body.cn-app-body .cn-inbox-page{gap:8px}
  body.cn-app-body .cn-inbox-platform-tabs{gap:5px;padding:5px;border-radius:14px}
  body.cn-app-body .cn-inbox-platform-tabs button{min-height:48px;padding:6px 8px;font-size:11px;gap:6px}
  body.cn-app-body .cn-inbox-platform-logo{width:24px;height:24px;flex-basis:24px}
  body.cn-app-body .cn-inbox-platform-logo .cn-channel-svg{width:21px!important;height:21px!important;max-width:21px!important;max-height:21px!important}
  body.cn-app-body .cn-inbox-disconnected{min-height:300px;padding:28px 16px;border-radius:18px}
  body.cn-app-body .cn-inbox-disconnected b{font-size:15px}
}

/* ========================================================================
   Commenta 2.5.80 — Flow inline branching, builder action polish, shell hard lock
   ======================================================================== */
@media (min-width:1025px){
  html,body.cn-app-body{margin:0!important;padding:0!important;inline-size:100%!important;max-inline-size:100%!important;overflow:hidden!important}
  body.cn-app-body #cn-app,body.cn-app-body #cn-vue-app,body.cn-app-body #cn-vue-app>div{inset:0!important;right:0!important;left:0!important;inline-size:auto!important;max-inline-size:none!important}
  body.cn-app-body .cn-vue-shell{inset:0!important;right:0!important;left:0!important;inline-size:auto!important;max-inline-size:none!important}
  body.cn-app-body .cn-vue-shell>.cn-main{left:0!important;right:var(--cn-shell-sidebar)!important;inline-size:auto!important;max-inline-size:none!important;margin:0!important}
  body.cn-app-body .cn-vue-shell>.cn-side{right:0!important;left:auto!important;margin:0!important}
}

/* Social switch: label and down-arrow always stay on the same line. */
body.builder-open .cn-builder-social-switch{pointer-events:auto!important;user-select:none!important}
body.builder-open .cn-builder-social-change{display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:5px!important;white-space:nowrap!important;line-height:1!important;min-width:max-content!important}
body.builder-open .cn-builder-social-change span{display:inline!important;white-space:nowrap!important}
body.builder-open .cn-builder-social-change svg{display:block!important;transform:none!important;flex:0 0 auto!important}

/* Fast and explicit save state. */
body.builder-open .cn-builder-actions .cn-btn.is-loading{position:relative!important;opacity:.8!important;cursor:wait!important;padding-inline-start:34px!important}
body.builder-open .cn-builder-actions .cn-btn.is-loading:before{content:"";position:absolute;inset-inline-start:12px;top:50%;width:13px;height:13px;margin-top:-7px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:cn-builder-save-spin .65s linear infinite}
@keyframes cn-builder-save-spin{to{transform:rotate(360deg)}}

/* Visual editor for Inline Keyboard -> Flow target actions. */
.cn-inline-flow-editor{display:grid;gap:10px;margin:10px 0 14px;padding:12px;border:1px solid #e7eaf0;border-radius:16px;background:linear-gradient(180deg,#fff,#fafbfc)}
.cn-inline-flow-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cn-inline-flow-head>div{display:grid;gap:2px;min-width:0}.cn-inline-flow-head b{font-size:11px;color:#344054}.cn-inline-flow-head small{font-size:9px;color:#98a2b3;line-height:1.7}
.cn-inline-flow-list{display:grid;gap:8px}.cn-inline-flow-row{display:grid;grid-template-columns:minmax(92px,.8fr) minmax(130px,1.2fr) 34px;gap:7px;align-items:center}
.cn-inline-flow-row input,.cn-inline-flow-row select{width:100%;min-width:0;height:38px;border:1px solid #dfe3ea;border-radius:10px;background:#fff;padding:0 10px;font:700 10px/1.2 inherit;color:#344054}
.cn-inline-flow-row input:focus,.cn-inline-flow-row select:focus{outline:0;border-color:var(--primary,#8b1d58);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary,#8b1d58) 10%,transparent)}
.cn-inline-flow-row .cn-icon-btn{width:34px;height:34px;display:grid;place-items:center;color:#d92d20;background:#fff4f2;border:1px solid #fee4e2}
.cn-inline-flow-empty{padding:13px;border:1px dashed #d9dee8;border-radius:12px;text-align:center;color:#98a2b3;font-size:10px;background:#fff}
@media(max-width:760px){.cn-inline-flow-row{grid-template-columns:1fr 1fr 32px}.cn-inline-flow-head{align-items:flex-start}.cn-inline-flow-head .cn-btn{flex:0 0 auto}}

/* Inbox: never render a second platform glyph over/inside contact cards. */
body.cn-app-body .cn-ig-inbox .cn-avatar-channel,
body.cn-app-body .cn-ig-inbox .cn-channel-mini .cn-channel-svg,
body.cn-app-body .cn-ig-inbox .cn-channel-mini img,
body.cn-app-body .cn-ig-inbox .cn-mini-platform-overlay,
body.cn-app-body .cn-ig-inbox .cn-studio-account-mini-icon{display:none!important}

/* Builder dialogs must render above the full-screen Builder surface. */
body.builder-open .cn-modal-wrap{z-index:10250!important}
body.builder-open .cn-context-menu{z-index:10300!important}

/* ========================================================================
   Commenta 2.5.92 — Flow builder action spacing, icon actions & mobile parity
   ======================================================================== */
body.builder-open .cn-builder-actions .cn-btn,
body.builder-open .cn-inspector-actions .cn-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  white-space:nowrap!important;
}
body.builder-open .cn-builder-actions .cn-btn .cn-icon,
body.builder-open .cn-inspector-actions .cn-btn .cn-icon{
  flex:0 0 auto!important;
}
body.builder-open .cn-builder-actions .cn-btn>span,
body.builder-open .cn-inspector-actions .cn-btn>span{
  display:inline-block!important;
  min-width:0!important;
}

/* Inspector destructive/close actions have intentionally different semantics. */
body.builder-open .cn-inspector-actions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:12px!important;
  margin:2px 0 16px!important;
  align-items:stretch!important;
}
body.builder-open .cn-inspector-actions.single{grid-template-columns:1fr!important}
body.builder-open .cn-inspector-actions .cn-btn{
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  padding:9px 10px!important;
  border-radius:13px!important;
  font-size:11px!important;
  font-weight:850!important;
  box-shadow:none!important;
}
body.builder-open .cn-inspector-close-action{
  color:#315b8a!important;
  background:#f1f6fc!important;
  border:1px solid #dbe8f5!important;
}
body.builder-open .cn-inspector-close-action:hover{
  color:#234c7a!important;
  background:#e8f1fb!important;
  border-color:#cbdff2!important;
}
body.builder-open .cn-inspector-delete-action{
  color:#b42318!important;
  background:#fff1f1!important;
  border:1px solid #ffd5d2!important;
}
body.builder-open .cn-inspector-delete-action:hover{
  color:#912018!important;
  background:#ffe7e5!important;
  border-color:#ffc5c0!important;
}

@media (min-width:901px){
  body.builder-open .cn-builder-top{
    height:86px!important;
    min-height:86px!important;
    display:grid!important;
    grid-template-columns:minmax(260px,.9fr) minmax(360px,1.15fr) minmax(360px,.95fr)!important;
    align-items:center!important;
    column-gap:28px!important;
    padding:0 26px!important;
  }
  body.builder-open .cn-builder-work,
  body.builder-open .cn-builder-work.palette-expanded{
    height:calc(100vh - 86px)!important;
  }
  body.builder-open .cn-builder-left{
    min-width:0!important;
    gap:12px!important;
  }
  body.builder-open .cn-builder-left>div{min-width:0!important}
  body.builder-open .cn-builder-left input{
    width:min(100%,300px)!important;
    max-width:300px!important;
  }
  body.builder-open .cn-builder-center{
    min-width:0!important;
    justify-content:center!important;
    gap:13px!important;
    flex-wrap:nowrap!important;
  }
  body.builder-open .cn-builder-center .cn-builder-social-switch{
    min-width:320px!important;
    width:100%!important;
    max-width:430px!important;
    flex:1 1 360px!important;
    min-height:58px!important;
    padding:7px 10px!important;
  }
  body.builder-open .cn-builder-center .cn-trigger-pill{
    flex:0 0 auto!important;
    min-height:38px!important;
    padding-inline:12px!important;
  }
  body.builder-open .cn-builder-actions{
    min-width:0!important;
    width:100%!important;
    justify-content:flex-start!important;
    gap:12px!important;
    flex-wrap:nowrap!important;
  }
  body.builder-open .cn-builder-actions .cn-btn{
    min-height:46px!important;
    height:46px!important;
    padding:0 16px!important;
    border-radius:14px!important;
    font-size:12px!important;
    font-weight:850!important;
    line-height:1!important;
  }
  body.builder-open .cn-builder-save-btn{
    min-width:124px!important;
    background:#fff!important;
    border:1px solid #dfe3ea!important;
    color:#344054!important;
  }
  body.builder-open .cn-builder-save-btn:hover{
    background:#f8fafc!important;
    border-color:#cfd5df!important;
  }
  body.builder-open .cn-builder-publish-btn{min-width:212px!important}
}

@media (min-width:901px) and (max-width:1220px){
  body.builder-open .cn-builder-top{
    grid-template-columns:minmax(220px,.75fr) minmax(310px,1fr) minmax(330px,.9fr)!important;
    column-gap:18px!important;
    padding-inline:18px!important;
  }
  body.builder-open .cn-builder-center .cn-builder-social-switch{min-width:285px!important}
  body.builder-open .cn-builder-publish-btn{min-width:188px!important;padding-inline:12px!important}
  body.builder-open .cn-builder-save-btn{min-width:108px!important}
}

@media (max-width:760px){
  body.builder-open .cn-builder-top{
    height:auto!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
    padding:10px 11px 12px!important;
  }
  body.builder-open .cn-builder-left,
  body.builder-open .cn-builder-center,
  body.builder-open .cn-builder-actions{
    width:100%!important;
    min-width:0!important;
  }
  body.builder-open .cn-builder-center{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    flex-wrap:nowrap!important;
  }
  body.builder-open .cn-builder-center .cn-builder-social-switch{
    display:grid!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    min-height:50px!important;
  }
  body.builder-open .cn-builder-center .cn-trigger-pill{
    flex:0 0 auto!important;
    max-width:34%!important;
    min-height:36px!important;
    padding-inline:9px!important;
    font-size:9.5px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body.builder-open .cn-builder-actions{
    display:grid!important;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)!important;
    gap:8px!important;
  }
  body.builder-open .cn-builder-actions .cn-btn,
  body.builder-open .cn-builder-actions .cn-btn:first-child{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    padding:8px 9px!important;
    border-radius:13px!important;
    font-size:10.5px!important;
    font-weight:850!important;
  }
  body.builder-open .cn-builder-actions .cn-btn>span{
    white-space:normal!important;
    line-height:1.35!important;
    text-align:center!important;
  }
  body.builder-open .cn-builder-save-btn{
    background:#fff!important;
    color:#344054!important;
    border:1px solid #dfe3ea!important;
  }
  body.builder-open .cn-builder-work,
  body.builder-open .cn-builder-work.palette-expanded{
    height:calc(100dvh - 184px)!important;
  }
  body.builder-open .cn-inspector-actions{
    position:sticky!important;
    top:0!important;
    z-index:4!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:9px!important;
    margin:0 0 12px!important;
    padding:0 0 9px!important;
    background:linear-gradient(180deg,#fff 82%,rgba(255,255,255,.94))!important;
  }
  body.builder-open .cn-inspector-actions.single{grid-template-columns:1fr!important}
  body.builder-open .cn-inspector-actions .cn-btn{
    display:inline-flex!important;
    min-height:44px!important;
    padding:8px 9px!important;
    border-radius:13px!important;
    font-size:11px!important;
  }
}

@media (max-width:420px){
  body.builder-open .cn-builder-top{padding-inline:8px!important}
  body.builder-open .cn-builder-actions{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)!important}
  body.builder-open .cn-builder-actions .cn-btn{font-size:10px!important;padding-inline:6px!important;gap:5px!important}
  body.builder-open .cn-builder-actions .cn-btn .cn-icon{width:15px!important;height:15px!important}
  body.builder-open .cn-builder-work,
  body.builder-open .cn-builder-work.palette-expanded{height:calc(100dvh - 188px)!important}
}


/* ========================================================================
   Commenta 2.5.98 — Inbox platform isolation + social tab alignment
   ======================================================================== */
body.cn-app-body .cn-inbox-platform-tabs button{
  display:grid!important;
  grid-template-columns:32px max-content!important;
  align-items:center!important;
  justify-content:center!important;
  justify-items:center!important;
  column-gap:9px!important;
  min-width:0!important;
  line-height:1!important;
  direction:ltr!important;
}
body.cn-app-body .cn-inbox-platform-tabs .cn-inbox-platform-logo{
  width:32px!important;height:32px!important;min-width:32px!important;max-width:32px!important;
  display:grid!important;place-items:center!important;margin:0!important;padding:0!important;
}
body.cn-app-body .cn-inbox-platform-tabs .cn-inbox-platform-logo .cn-channel-svg{
  width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;
  min-height:28px!important;max-height:28px!important;margin:0!important;padding:0!important;
  object-fit:contain!important;object-position:center!important;transform:none!important;
}
body.cn-app-body .cn-inbox-platform-tabs .cn-inbox-platform-label{
  display:flex!important;align-items:center!important;justify-content:center!important;
  min-height:32px!important;margin:0!important;padding:0!important;white-space:nowrap!important;
  line-height:32px!important;font-weight:850!important;direction:auto!important;text-align:center!important;
}
@media(max-width:720px){
  body.cn-app-body .cn-inbox-platform-tabs button{
    grid-template-columns:28px max-content!important;column-gap:6px!important;padding:6px 7px!important;
  }
  body.cn-app-body .cn-inbox-platform-tabs .cn-inbox-platform-logo{
    width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;
  }
  body.cn-app-body .cn-inbox-platform-tabs .cn-inbox-platform-logo .cn-channel-svg{
    width:25px!important;height:25px!important;min-width:25px!important;max-width:25px!important;
    min-height:25px!important;max-height:25px!important;
  }
  body.cn-app-body .cn-inbox-platform-tabs .cn-inbox-platform-label{
    min-height:28px!important;line-height:28px!important;font-size:11px!important;
  }
}


/* v2.6.2 — hard viewport containment hotfix.
   Keep the page itself at exactly the viewport width; wide tables/canvases scroll inside their own containers. */
html:has(body.cn-app-body),body.cn-app-body{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
body.cn-app-body #cn-app,body.cn-app-body #cn-vue-app,body.cn-app-body .cn-vue-shell,body.cn-app-body .cn-vue-shell>.cn-main,body.cn-app-body #cn-view-root,body.cn-app-body .cn-content{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important}
body.cn-app-body #cn-app,body.cn-app-body #cn-vue-app,body.cn-app-body .cn-vue-shell,body.cn-app-body .cn-vue-shell>.cn-main{overflow-x:hidden!important}
body.cn-app-body .cn-content>*{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
body.cn-app-body :is(.cn-card,.cn-banner,.cn-info-box,.cn-current-plan,.cn-settings,.cn-settings-grid,.cn-card-grid,.cn-home-grid,.cn-stats,.cn-shop-page,.cn-growth-page,.cn-ai-view,.cn-ai-panel,.cn-ai-card,.cn-studio-page,.cn-channel-center,.cn-connected-channel-grid,.cn-channel-picker-grid){min-width:0!important;max-width:100%!important}
body.cn-app-body :is(.cn-table-card,.cn-table-wrap,.cn-studio-best-table){width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
body.cn-app-body :is(img,picture,video,canvas,svg){max-width:100%;height:auto}
@media(max-width:1024px){
  body.cn-app-body .cn-vue-shell{display:block!important;padding-inline:0!important;margin-inline:0!important}
  body.cn-app-body .cn-vue-shell>.cn-main{margin-inline:0!important;padding-inline:0!important}
  body.cn-app-body .cn-vue-shell .cn-content{width:100%!important;max-width:100%!important;padding-left:12px!important;padding-right:12px!important;margin-inline:0!important;overflow-x:hidden!important}
  body.cn-app-body .cn-vue-shell .cn-top{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;box-sizing:border-box!important}
  body.cn-app-body :is(.cn-top-actions,.cn-toolbar,.cn-toolbar-actions,.cn-settings-title,.cn-shop-head,.cn-banner-action){min-width:0!important;max-width:100%!important}
  body.cn-app-body .cn-banner .cn-btn{min-width:0!important;max-width:100%!important}
  body.cn-app-body .cn-modal-wrap{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}
}