/* The Node AI Platform Layer */
.node-ai-helpdesk { position: fixed; right: 22px; bottom: 22px; z-index: 22000; font-family: inherit; }
.node-ai-fab { position: relative; display:flex; align-items:center; gap:.55rem; border:0; border-radius:999px; padding:.85rem 1.05rem; color:#fff; background:linear-gradient(135deg,#0f172a,#4f46e5 56%,#06b6d4); box-shadow:0 22px 50px rgba(15,23,42,.28); cursor:pointer; font-weight:800; letter-spacing:.01em; overflow:hidden; }
.node-ai-fab i { filter: drop-shadow(0 2px 5px rgba(0,0,0,.18)); }
.node-ai-fab-pulse { position:absolute; inset:-2px; border-radius:999px; background:linear-gradient(135deg,rgba(79,70,229,.28),rgba(6,182,212,.26)); animation: nodeAiPulse 2.6s ease infinite; }
.node-ai-fab > *:not(.node-ai-fab-pulse) { position:relative; }
@keyframes nodeAiPulse { 0%,100%{ transform:scale(1); opacity:.45;} 50%{ transform:scale(1.08); opacity:.12;} }
.node-ai-panel { position:absolute; right:0; bottom:64px; width:min(420px, calc(100vw - 28px)); max-height:min(680px, calc(100vh - 110px)); display:none; flex-direction:column; background:rgba(255,255,255,.98); border:1px solid rgba(226,232,240,.95); border-radius:28px; box-shadow:0 28px 90px rgba(15,23,42,.30); overflow:hidden; backdrop-filter: blur(14px); transform-origin:bottom right; }
.node-ai-helpdesk.is-open .node-ai-panel { display:flex; animation: nodeAiPanelIn .22s ease both; }
@keyframes nodeAiPanelIn { from { opacity:0; transform:translateY(16px) scale(.96); } to { opacity:1; transform:none; } }
.node-ai-panel-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.1rem; background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff; }
.node-ai-panel-header strong { display:block; font-size:1rem; }
.node-ai-panel-header small { display:block; color:#cbd5e1; font-size:.78rem; margin-top:.1rem; }
.node-ai-panel-header button { width:34px; height:34px; border:0; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; }
.node-ai-quick-actions { display:flex; gap:.45rem; padding:.75rem; overflow:auto; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.node-ai-quick-actions button, .node-ai-suggestions a, .node-ai-suggestions button { border:1px solid #dbeafe; background:#eff6ff; color:#1d4ed8; border-radius:999px; padding:.45rem .7rem; font-size:.78rem; font-weight:800; text-decoration:none; cursor:pointer; white-space:nowrap; }
.node-ai-messages { padding:1rem; overflow:auto; display:grid; gap:.75rem; min-height:260px; max-height:390px; background:linear-gradient(180deg,#ffffff,#f8fafc); }
.node-ai-message { max-width:88%; padding:.75rem .85rem; border-radius:18px; box-shadow:0 8px 20px rgba(15,23,42,.06); }
.node-ai-message p { margin:0; line-height:1.5; font-size:.92rem; }
.node-ai-message.assistant { justify-self:start; background:#fff; border:1px solid #e2e8f0; color:#0f172a; border-bottom-left-radius:6px; }
.node-ai-message.visitor { justify-self:end; background:linear-gradient(135deg,#4f46e5,#06b6d4); color:#fff; border-bottom-right-radius:6px; }
.node-ai-message.error { border-color:#fecaca; background:#fff1f2; color:#991b1b; }
.node-ai-message.thinking { opacity:.72; }
.node-ai-suggestions { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.65rem; }
.node-ai-form { display:grid; grid-template-columns:1fr auto; gap:.55rem; padding:.8rem; border-top:1px solid #e2e8f0; background:#fff; }
.node-ai-form input { width:100%; border:1px solid #cbd5e1; border-radius:16px; padding:.75rem .85rem; outline:none; }
.node-ai-form input:focus { border-color:#4f46e5; box-shadow:0 0 0 4px rgba(79,70,229,.11); }
.node-ai-form button { width:46px; border:0; border-radius:16px; background:#0f172a; color:#fff; cursor:pointer; }
.node-ai-handoff { display:none; grid-template-columns:repeat(3,1fr); gap:.45rem; padding:.75rem; background:#f8fafc; border-top:1px solid #e2e8f0; }
.node-ai-handoff.is-visible, .node-ai-helpdesk.is-open .node-ai-handoff { display:grid; }
.node-ai-handoff-link { display:flex; align-items:center; justify-content:center; gap:.4rem; border:1px solid #e2e8f0; border-radius:14px; padding:.55rem; color:#334155; background:#fff; text-decoration:none; font-size:.8rem; font-weight:800; }
.node-ai-handoff-link:hover { color:#4f46e5; border-color:#c7d2fe; }

.node-ai-studio-page { padding:2.2rem 0 4rem; }
.node-ai-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:1.5rem; align-items:stretch; margin-bottom:1.5rem; }
.node-ai-hero-main, .node-ai-hero-side, .node-ai-studio-card, .node-ai-result-card { border:1px solid rgba(226,232,240,.95); border-radius:28px; background:rgba(255,255,255,.96); box-shadow:0 18px 50px rgba(15,23,42,.08); }
.node-ai-hero-main { padding:2rem; background:linear-gradient(135deg,#0f172a,#312e81 52%,#0e7490); color:#fff; position:relative; overflow:hidden; }
.node-ai-hero-main::after { content:''; position:absolute; width:260px; height:260px; right:-90px; top:-80px; border-radius:50%; background:rgba(255,255,255,.12); filter:blur(3px); }
.node-ai-kicker { display:inline-flex; gap:.45rem; align-items:center; padding:.35rem .65rem; border-radius:999px; background:rgba(255,255,255,.13); color:#e0f2fe; font-weight:800; font-size:.82rem; margin-bottom:1rem; }
.node-ai-hero-main h1 { font-size:clamp(2.2rem,5vw,4rem); line-height:.95; margin:.2rem 0 1rem; letter-spacing:-.055em; }
.node-ai-hero-main p { color:#dbeafe; max-width:720px; line-height:1.65; }
.node-ai-hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.3rem; }
.node-ai-hero-side { padding:1.35rem; display:grid; gap:.8rem; }
.node-ai-mini-stat { display:flex; align-items:center; gap:.8rem; padding:.9rem; border-radius:20px; background:linear-gradient(135deg,#f8fafc,#eef2ff); }
.node-ai-mini-stat i { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; color:#4f46e5; background:#fff; box-shadow:0 8px 20px rgba(79,70,229,.12); }
.node-ai-mini-stat strong { display:block; color:#0f172a; }
.node-ai-mini-stat span { display:block; color:#64748b; font-size:.86rem; margin-top:.1rem; }
.node-ai-builder-grid { display:grid; grid-template-columns:330px 1fr; gap:1.25rem; align-items:start; }
.node-ai-studio-card { padding:1.25rem; }
.node-ai-type-grid { display:grid; gap:.65rem; }
.node-ai-type-card { display:flex; align-items:flex-start; gap:.75rem; width:100%; border:1px solid #e2e8f0; background:#fff; border-radius:18px; padding:.8rem; text-align:left; cursor:pointer; transition:.18s ease; }
.node-ai-type-card:hover, .node-ai-type-card.active { border-color:#a5b4fc; background:#eef2ff; transform:translateY(-1px); }
.node-ai-type-card i { color:#4f46e5; margin-top:.15rem; }
.node-ai-type-card strong { display:block; color:#0f172a; }
.node-ai-type-card span { color:#64748b; font-size:.82rem; line-height:1.35; }
.node-ai-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.node-ai-form-grid .full { grid-column:1 / -1; }
.node-ai-studio-card label { display:grid; gap:.35rem; font-weight:800; color:#0f172a; font-size:.9rem; }
.node-ai-studio-card input, .node-ai-studio-card select, .node-ai-studio-card textarea { border:1px solid #cbd5e1; border-radius:16px; padding:.75rem .85rem; font:inherit; }
.node-ai-studio-card textarea { min-height:170px; resize:vertical; }
.node-ai-result-card { padding:1.25rem; margin-top:1rem; }
.node-ai-result-toolbar { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-bottom:.8rem; }
.node-ai-output { white-space:pre-wrap; overflow:auto; max-height:560px; background:#0f172a; color:#e2e8f0; border-radius:18px; padding:1rem; font-size:.86rem; line-height:1.55; }
.node-ai-page-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:.85rem; margin:1rem 0 1.4rem; }
.node-ai-page-strip a { display:flex; align-items:center; gap:.6rem; padding:.8rem .9rem; border-radius:18px; background:#fff; border:1px solid #e2e8f0; text-decoration:none; color:#334155; font-weight:800; box-shadow:0 10px 26px rgba(15,23,42,.05); }
.node-ai-page-strip a:hover { color:#4f46e5; border-color:#c7d2fe; transform:translateY(-1px); }

@media (max-width: 980px) { .node-ai-hero, .node-ai-builder-grid { grid-template-columns:1fr; } .node-ai-page-strip { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px) { .node-ai-helpdesk { right:14px; bottom:14px; } .node-ai-fab span:not(.node-ai-fab-pulse) { display:none; } .node-ai-fab { width:56px; height:56px; justify-content:center; padding:0; } .node-ai-panel { bottom:68px; } .node-ai-form-grid, .node-ai-page-strip, .node-ai-handoff { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce) { .node-ai-fab-pulse, .node-ai-helpdesk.is-open .node-ai-panel { animation:none !important; } }