/* CrmHub24 Bot konstruktori — yangi dizayn (2026-10-19). Faqat ko'rinish: Drawflow, blok turlari, ma'lumot sxemasi o'zgarmagan.
   crm.html'da BARCHA qatlamlardan keyin ulanadi. Ranglar CRM tokenlaridan (mavzuga o'zi moslashadi). */

/* ---- Yuqori panel ---- */
.bot-editor-overlay{background:var(--bg-main)}
.bot-editor-topbar{min-height:58px;padding:0 18px;gap:14px;background:var(--bg-panel);border-bottom:1px solid var(--border-dark2)}
.bot-editor-topbar input#bot-editor-name{font-size:15px;font-weight:600;color:var(--text-main);padding:7px 10px;border-radius:9px;width:260px;max-width:34vw}
.bot-editor-save-status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-dim)}
.bot-editor-save-status:not(:empty)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green,#2f9e6e)}

/* ---- Chap panel: bloklar kutubxonasi ---- */
.bot-palette{width:262px;padding:14px;background:var(--bg-panel);border-right:1px solid var(--border-dark2)}
.bot-search{width:100%;margin-bottom:6px;padding:9px 12px;border-radius:10px;border:1px solid var(--border-dark2);background:var(--bg-main);color:var(--text-main);font:inherit;font-size:13px}
.bot-search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bot-palette-group-label{margin:16px 2px 6px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.bot-pal-item{display:flex;align-items:center;gap:11px;padding:8px;border-radius:11px;border:1px solid transparent;cursor:grab}
.bot-pal-item:hover{background:var(--bg-main);border-color:var(--border-dark2)}
.bot-pal-text b{display:block;font-size:13px;font-weight:550;color:var(--text-main);line-height:1.25}
.bot-pal-text small{display:block;margin-top:1px;font-size:11.5px;line-height:1.3;color:var(--text-dim)}
.bot-ic{flex:none;width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;background:var(--bic,#3b82c4);color:#fff}
.bot-ic svg{width:16px;height:16px}
.bot-tpl-list{display:grid;gap:8px}
.bot-tpl{text-align:left;border:1px solid var(--border-dark2);background:var(--bg-main);border-radius:12px;padding:10px 12px;color:var(--text-main);cursor:pointer;font:inherit}
.bot-tpl:hover{border-color:var(--accent)}
.bot-tpl b{display:block;font-size:13px;font-weight:600}
.bot-tpl small{display:block;margin-top:2px;font-size:11.5px;color:var(--text-dim);line-height:1.3}

/* ---- Kanvas ---- */
.drawflow{background-color:var(--bg-main)}
.drawflow .drawflow-node{width:240px;padding:0;border-radius:15px;background:var(--bg-panel);border:1px solid var(--border-dark2);box-shadow:0 1px 2px rgba(0,0,0,.14),0 8px 22px -14px rgba(0,0,0,.5);color:var(--text-main)}
.drawflow .drawflow-node:hover{border-color:var(--text-dim)}
.drawflow .drawflow-node.selected{background:var(--bg-panel);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),0 8px 22px -14px rgba(0,0,0,.5)}
.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}
.bot-node-head{display:flex;align-items:center;gap:11px;padding:11px 13px 9px}
.bot-node-title b{display:block;font-size:13.5px;font-weight:600;color:var(--text-main);line-height:1.25}
.bot-node-title small{display:block;font-size:11px;color:var(--text-dim)}
.bot-node-body{padding:0 13px 11px}
.bot-bubble{background:var(--accent-soft);color:var(--text-main);border-radius:12px 12px 12px 4px;padding:8px 10px;font-size:12.5px;line-height:1.4;max-height:76px;overflow:hidden;word-break:break-word}
.bot-bubble em{color:var(--text-dim);font-style:normal}
.bot-var{display:inline-block;background:rgba(59,130,196,.22);color:var(--accent-text,var(--accent));border-radius:5px;padding:0 5px;font-size:11.5px}
.bot-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.bot-pills span{border:1px solid var(--border-dark2);border-radius:999px;padding:2px 9px;font-size:11.5px;color:var(--accent-text,var(--accent))}
.bot-node-note{font-size:12.5px;color:var(--text-dim);line-height:1.35;word-break:break-word}
.bot-node-note b{color:var(--text-main);font-weight:600}
.bot-node-outputs{border-top:1px solid var(--border-dark2);padding:4px 0}
.bot-node-output-row{height:28px;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:0 14px 0 12px;font-size:12px;color:var(--text-dim)}
.bot-add{width:22px;height:22px;border-radius:50%;border:1.5px dashed var(--text-dim);background:var(--bg-panel);color:var(--text-dim);display:grid;place-items:center;font-size:15px;line-height:1;padding:0;cursor:pointer}
.bot-add:hover{border-color:var(--accent);border-style:solid;color:var(--accent)}
/* Ulanish nuqtalari: kirish — sarlavha tekisligida, chiqishlar — pastki qatorlar bilan bir chiziqda */
.drawflow .drawflow-node .inputs{position:absolute;left:0;top:19px;width:0}
.drawflow .drawflow-node .outputs{position:absolute;right:0;bottom:4px;width:0;display:flex;flex-direction:column;align-items:flex-start}
.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{width:12px;height:12px;background:var(--bg-panel);border:2px solid var(--accent);position:relative;margin:0;z-index:2}
.drawflow .drawflow-node .input{left:-6px;top:0}
.drawflow .drawflow-node .output{right:6px;margin:8px 0 8px}
.drawflow .drawflow-node .input:hover,.drawflow .drawflow-node .output:hover{background:var(--accent)}
.drawflow .connection .main-path{stroke:var(--text-dim);stroke-width:2px;opacity:.75}
.drawflow .connection .main-path:hover{stroke:var(--accent);opacity:1}

/* ---- Tayyor shablonlar (bo'sh kanvasda) ---- */
.bot-tpl-empty{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;z-index:5}
.bot-tpl-card{pointer-events:auto;width:min(620px,92%);background:var(--bg-panel);border:1px solid var(--border-dark2);border-radius:18px;padding:22px 24px;box-shadow:0 18px 50px -20px rgba(0,0,0,.6);margin-top:140px}
.bot-tpl-card h3{margin:0 0 4px;font-size:17px;color:var(--text-main)}
.bot-tpl-card p{margin:0 0 16px;font-size:13px;color:var(--text-dim);line-height:1.45}
.bot-tpl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}

/* ---- "+" tanlovi (popover) ---- */
.bot-pop{position:fixed;z-index:130;width:280px;max-height:460px;overflow:auto;background:var(--bg-panel);border:1px solid var(--border-dark2);border-radius:14px;padding:6px 8px 10px;box-shadow:0 18px 44px rgba(0,0,0,.45)}
.bot-pop .bot-pal-item{cursor:pointer}

/* ---- O'ng panel: sozlamalar ---- */
.bot-settings-panel{display:block;width:372px;padding:0;background:var(--bg-panel);border-left:1px solid var(--border-dark2);overflow:auto}
.bot-ph{display:flex;align-items:center;gap:12px;padding:16px 18px 12px}
.bot-ph h4{margin:0;font-size:15px;color:var(--text-main)}
.bot-ph small{display:block;margin-top:1px;font-size:12px;color:var(--text-dim);line-height:1.3}
.bot-sec{padding:12px 18px 14px;border-top:1px solid var(--border-dark2)}
.bot-sec-title{margin-bottom:8px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.bot-sec input[type=text],.bot-sec input[type=number],.bot-sec select,.bot-sec textarea{width:100%;padding:9px 11px;border-radius:10px;border:1px solid var(--border-dark2)!important;background:var(--bg-main)!important;color:var(--text-main);font:inherit;font-size:13.5px}
.bot-sec textarea{min-height:104px;resize:vertical;line-height:1.45}
.bot-sec input:focus,.bot-sec select:focus,.bot-sec textarea:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)}
.bot-sec .field-label{margin:10px 0 5px}
.bot-hint{margin-top:8px;font-size:12px;line-height:1.45;color:var(--text-dim)}
.bot-chips{display:flex;flex-wrap:wrap;gap:6px}
.bot-chip{border:1px solid var(--border-dark2);background:var(--bg-main);color:var(--text-main);border-radius:999px;padding:3px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.bot-chip:hover{border-color:var(--accent);color:var(--accent)}
.bot-chip.own{border-style:dashed}
.bot-btn-list-row{display:flex;gap:8px;margin-bottom:8px}
.bot-btn-list-row input{flex:1}
.bot-x{width:36px;border:1px solid var(--border-dark2);background:transparent;color:var(--text-dim);border-radius:10px;font-size:18px;cursor:pointer}
.bot-x:hover{color:var(--text-main);border-color:var(--text-dim)}
.bot-addbtn{width:100%}
.bot-tg{background:var(--bg-main);border-radius:14px;padding:13px}
.bot-tg-who{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:11.5px;color:var(--text-dim)}
.bot-tg-who i{width:18px;height:18px;border-radius:50%;background:var(--accent);display:inline-block}
.bot-tg-bubble{max-width:94%;background:var(--accent-soft);color:var(--text-main);border-radius:14px 14px 14px 4px;padding:10px 12px;font-size:13.5px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.bot-tg-bubble em{color:var(--text-dim);font-style:normal}
.bot-tg-kb{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.bot-tg-kb span{flex:1 1 auto;text-align:center;border:1px solid var(--border-dark2);background:var(--bg-panel);border-radius:10px;padding:7px 10px;font-size:13px;font-weight:500;color:var(--accent-text,var(--accent))}
.bot-del{width:100%;color:var(--red,#d9534f)}
.bot-check{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13px;color:var(--text-main)}
.bot-check li{display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.bot-check .ok{color:var(--green,#2f9e6e);font-weight:700}
.bot-check .warn{color:var(--amber,#d08a2e);font-weight:700}
.bot-publish-warnings{margin:0}

@media(max-width:1100px){.bot-palette{width:220px}.bot-settings-panel{width:320px}}