/* Settlo Bots — styles used only by bots.html and bots-admin.html */
:root { --sb-green:#1D9E75; --sb-green-dark:#0F6E56; --sb-card:#121212; --sb-card-2:#181818; --sb-line:#242424; --sb-muted:#9a9a9a; }
.sb-wrap { max-width:1180px; margin:0 auto; padding:0 1.5rem; }
.sb-hero { padding:5rem 0 3rem; text-align:center; position:relative; overflow:hidden; }
.sb-hero::before { content:""; position:absolute; inset:-40% 20% auto; height:420px; background:radial-gradient(circle, rgba(29,158,117,.25), transparent 65%); pointer-events:none; }
.sb-badge { display:inline-block; padding:.35rem .9rem; border:1px solid rgba(29,158,117,.4); border-radius:999px; color:var(--sb-green); font-size:.8rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.sb-hero h1 { font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.1; margin:1.2rem auto .9rem; max-width:820px; letter-spacing:-1px; position:relative; }
.sb-hero h1 span { color:var(--sb-green); }
.sb-hero p { color:var(--sb-muted); max-width:620px; margin:0 auto; font-size:1.08rem; position:relative; }
.sb-hero-actions { display:flex; gap:.8rem; justify-content:center; margin-top:2rem; flex-wrap:wrap; position:relative; }
.sb-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.8rem 1.4rem; border-radius:10px; font-weight:600; font-size:.95rem; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .15s, background .2s, border-color .2s; font-family:inherit; }
.sb-btn:hover { transform:translateY(-1px); }
.sb-btn:disabled { opacity:.6; cursor:wait; }
.sb-btn-primary { background:var(--sb-green); color:#fff; }
.sb-btn-primary:hover { background:var(--sb-green-dark); }
.sb-btn-ghost { background:transparent; color:#fff; border-color:var(--sb-line); }
.sb-btn-ghost:hover { border-color:var(--sb-green); }
.sb-btn-danger { background:transparent; color:#ff7a6b; border-color:rgba(255,122,107,.35); }
.sb-btn-sm { padding:.45rem .8rem; font-size:.82rem; border-radius:8px; }
.sb-section { padding:3.5rem 0; }
.sb-section h2 { font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.5rem; letter-spacing:-.5px; }
.sb-sub { color:var(--sb-muted); margin-bottom:2rem; }
.sb-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.sb-card { background:var(--sb-card); border:1px solid var(--sb-line); border-radius:16px; padding:1.5rem; display:flex; flex-direction:column; gap:.7rem; transition:border-color .2s, transform .2s; cursor:pointer; }
.sb-card:hover, .sb-card.active { border-color:var(--bot-accent, var(--sb-green)); transform:translateY(-3px); }
.sb-card-icon { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; font-size:1.6rem; background:color-mix(in srgb, var(--bot-accent, #1D9E75) 18%, transparent); }
.sb-card-type { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bot-accent, var(--sb-green)); font-weight:700; }
.sb-card h3 { font-size:1.25rem; }
.sb-card p { color:var(--sb-muted); font-size:.92rem; flex:1; }
.sb-card-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.sb-demo { display:grid; grid-template-columns:1fr 1.2fr; gap:2rem; align-items:start; }
.sb-demo-info ul { list-style:none; display:grid; gap:.8rem; margin-top:1.2rem; }
.sb-demo-info li { display:flex; gap:.7rem; color:#ddd; }
.sb-demo-info li::before { content:"✓"; color:var(--sb-green); font-weight:700; }
.sb-chat { background:var(--sb-card); border:1px solid var(--sb-line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; height:560px; box-shadow:0 30px 80px -30px rgba(29,158,117,.35); }
.sb-chat-head { display:flex; align-items:center; gap:.8rem; padding:1rem 1.2rem; background:var(--bot-accent, var(--sb-green)); color:#fff; }
.sb-chat-head .ic { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.2); display:grid; place-items:center; font-size:1.3rem; }
.sb-chat-head b { display:block; }
.sb-chat-head small { opacity:.85; font-size:.78rem; }
.sb-chat-body { flex:1; overflow-y:auto; padding:1.2rem; display:flex; flex-direction:column; gap:.6rem; }
.sb-msg { max-width:82%; padding:.65rem .95rem; border-radius:14px; font-size:.93rem; line-height:1.45; white-space:pre-wrap; animation:sbIn .25s ease; }
.sb-msg.bot { background:var(--sb-card-2); border:1px solid var(--sb-line); align-self:flex-start; border-bottom-left-radius:4px; }
.sb-msg.user { background:var(--bot-accent, var(--sb-green)); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.sb-typing { align-self:flex-start; color:var(--sb-muted); font-size:.85rem; padding:.3rem .4rem; }
@keyframes sbIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.sb-chips { display:flex; gap:.4rem; flex-wrap:wrap; padding:0 1.2rem .8rem; }
.sb-chip { background:transparent; border:1px solid var(--sb-line); color:#ddd; border-radius:999px; padding:.35rem .8rem; font-size:.8rem; cursor:pointer; font-family:inherit; }
.sb-chip:hover { border-color:var(--bot-accent, var(--sb-green)); color:#fff; }
.sb-chat-form { display:flex; gap:.5rem; padding:.9rem; border-top:1px solid var(--sb-line); }
.sb-input, .sb-textarea, .sb-select { width:100%; background:#0d0d0d; border:1px solid var(--sb-line); color:#fff; border-radius:10px; padding:.7rem .9rem; font-family:inherit; font-size:.93rem; outline:none; }
.sb-input:focus, .sb-textarea:focus, .sb-select:focus { border-color:var(--sb-green); }
.sb-textarea { resize:vertical; min-height:70px; }
.sb-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.sb-step { border:1px solid var(--sb-line); border-radius:14px; padding:1.3rem; background:var(--sb-card); }
.sb-step b { color:var(--sb-green); font-size:1.6rem; display:block; margin-bottom:.3rem; }
.sb-step p { color:var(--sb-muted); font-size:.92rem; }
.sb-cta { text-align:center; border:1px solid rgba(29,158,117,.35); border-radius:20px; padding:3rem 1.5rem; background:linear-gradient(135deg, rgba(29,158,117,.14), rgba(15,110,86,.05)); }
.sb-cta p { color:var(--sb-muted); margin:.5rem 0 1.5rem; }
.sb-foot { text-align:center; color:var(--sb-muted); font-size:.85rem; padding:2.5rem 0; border-top:1px solid var(--sb-line); margin-top:3rem; }
.sb-foot a { color:var(--sb-muted); margin:0 .5rem; }
.sb-admin { padding:2.5rem 0 4rem; }
.sb-auth { max-width:400px; margin:3rem auto; background:var(--sb-card); border:1px solid var(--sb-line); border-radius:18px; padding:2rem; display:grid; gap:.9rem; }
[hidden] { display:none !important; }
.sb-auth h1 { font-size:1.5rem; }
.sb-note { font-size:.85rem; color:var(--sb-muted); }
.sb-alert { font-size:.88rem; padding:.7rem .9rem; border-radius:10px; background:rgba(255,122,107,.1); color:#ffb0a6; border:1px solid rgba(255,122,107,.3); }
.sb-alert.ok { background:rgba(29,158,117,.1); color:#8fe3c6; border-color:rgba(29,158,117,.35); }
.sb-link { background:none; border:none; color:var(--sb-green); cursor:pointer; font-family:inherit; font-size:.88rem; padding:0; }
.sb-admin-top { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.sb-admin-top h1 { font-size:1.8rem; }
.sb-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.sb-stat { background:var(--sb-card); border:1px solid var(--sb-line); border-radius:14px; padding:1.1rem 1.2rem; }
.sb-stat small { color:var(--sb-muted); font-size:.8rem; }
.sb-stat b { display:block; font-size:1.8rem; color:var(--sb-green); }
.sb-layout { display:grid; grid-template-columns:260px 1fr; gap:1.2rem; align-items:start; }
.sb-side { background:var(--sb-card); border:1px solid var(--sb-line); border-radius:14px; padding:.6rem; display:grid; gap:.3rem; }
.sb-side-item { display:flex; align-items:center; gap:.6rem; padding:.7rem; border-radius:10px; cursor:pointer; background:none; border:1px solid transparent; color:#fff; text-align:left; font-family:inherit; font-size:.92rem; }
.sb-side-item:hover { background:var(--sb-card-2); }
.sb-side-item.active { border-color:var(--sb-green); background:rgba(29,158,117,.08); }
.sb-side-item small { color:var(--sb-muted); display:block; font-size:.75rem; }
.sb-off { opacity:.5; }
.sb-panel { background:var(--sb-card); border:1px solid var(--sb-line); border-radius:14px; padding:1.4rem; margin-bottom:1.2rem; }
.sb-panel h2 { font-size:1.15rem; margin-bottom:1rem; display:flex; justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.sb-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.sb-field { display:grid; gap:.35rem; }
.sb-field.full { grid-column:1 / -1; }
.sb-field label { font-size:.8rem; color:var(--sb-muted); font-weight:600; }
.sb-row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.sb-qa { border:1px solid var(--sb-line); border-radius:12px; padding:1rem; display:grid; gap:.6rem; background:#0e0e0e; margin-bottom:.8rem; }
.sb-qa-head { display:flex; justify-content:space-between; align-items:center; color:var(--sb-muted); font-size:.8rem; }
.sb-empty { color:var(--sb-muted); text-align:center; padding:1.5rem; }
@media (max-width:860px) { .sb-demo, .sb-layout { grid-template-columns:1fr; } .sb-form-grid { grid-template-columns:1fr; } .sb-chat { height:500px; } }