/* ChatPipe Easy Mode — default, non-technical presentation.
   Keeps every feature + the visual builders; hides raw-technical surfaces
   (SQL/JS editors, SDK/embed code, advanced tuning, git/data-source config). */

/* ── The Easy/Advanced toggle pill ── */
/* Compact pill pinned to the TOP-center (only shown on builder/workflow/agent
   pages — the main app puts this toggle inside Settings). Kept clear of the
   bottom-corner language toggle so nothing overlaps. */
#cp-mode-toggle{
  position:fixed; z-index:2147483646; top:8px; left:50%; transform:translateX(-50%);
  background:#8B5CF6; color:#fff; border:0; border-radius:100px;
  padding:6px 14px; font:700 12px/1 "IBM Plex Sans Arabic",system-ui,Segoe UI,sans-serif;
  cursor:pointer; box-shadow:0 4px 14px rgba(139,92,246,.35); transition:filter .2s; opacity:.92;
}
#cp-mode-toggle:hover{ filter:brightness(1.08); opacity:1; }
#cp-mode-toggle::before{ content:"✨ "; }

/* ── Easy mode: hide raw-technical surfaces ── */
/* App settings: hide SDK/embed + advanced (data sources, git sync, SSO) tabs + panels */
.mode-easy [data-settings-tab="embed"],
.mode-easy [data-settings-tab="advanced"],
.mode-easy #settings-tab-embed,
.mode-easy #settings-tab-advanced { display:none !important; }

/* Visual builder: hide the raw query/code (SQL/JS) editor + the state/modules dev tabs.
   The visual canvas, components, pages, AI-generate, publish all stay. */
.mode-easy .bottom-panel { display:none !important; }
.mode-easy [onclick*="switchLeftTab('state'"],
.mode-easy [onclick*="switchLeftTab('modules'"] { display:none !important; }

/* Agent builder: hide advanced tuning (temperature/top-p/max-tokens) + raw evals.
   Model choice, plain-language instructions, tools, and the test chat all stay. */
.mode-easy #btnEvals,
.mode-easy [onclick*="openModal('evalModal')"],
.mode-easy .inspector-advanced,
.mode-easy .cp-adv { display:none !important; }

/* Workflow editor: hide the raw code/expression editors inside a node's config.
   The visual canvas, palette, connections, run, and schedule all stay. */
.mode-easy .cp-code-config { display:none !important; }

/* Friendlier touch: a little more breathing room on primary actions */
.mode-easy .cta-btn, .mode-easy .btn-primary { letter-spacing:.2px; }

/* RTL fix: the ChatPipe wordmark is Latin — keep its SVG LTR and unclipped so
   Arabic (dir=rtl) never scrolls the viewport and cuts it to "…ipe". */
.auth-logo svg, .sidebar-logo svg, .welcome-state svg, svg.msg-logo {
  direction: ltr !important;
  overflow: visible !important;
}

/* A small "Easy mode" hint chip that easy-mode.js may insert */
.cp-easy-hint{
  background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.25);
  color:#6D28D9; border-radius:12px; padding:10px 14px; font-size:13px; margin:12px 0;
}