/* «Підключення ШІ»: панелі кроків — кнопка й згода, пошук, оформлення, результати, картинка з чату, контроль */
.cn{position:absolute;inset:44px 14px 14px;display:grid;gap:12px;align-content:start}
.cn .tabs{flex-wrap:wrap}
.cnb{display:flex;gap:10px;align-items:center}
.cnb .btn{padding:9px 12px 9px 14px;font-size:14px}
.cst{display:inline-flex;gap:8px;align-items:center;font-size:13.5px;color:var(--c-dg);opacity:0}
.cst::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c-dg);box-shadow:0 0 10px var(--c-dg)}
.cons{display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--menu);border:1px solid var(--line2);box-shadow:var(--shadow);opacity:0}
.cons .hd{display:flex;gap:10px;align-items:center;font-weight:700}
.cons .hd svg{width:26px;height:26px}
.cons label{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink2)}
.cons label i{flex:none;width:16px;height:16px;border-radius:4px;background:var(--c);margin-top:2px}
.cons label small{display:block;color:var(--ink3);font-size:12px}
.cons .acc{display:flex;gap:6px}
.cons .acc span{padding:6px 10px;border-radius:8px;border:1px solid var(--line2);font-size:12.5px;color:var(--ink2)}
.cons .acc span.on{border-color:var(--c);color:var(--ink);background:color-mix(in srgb,var(--c) 12%,transparent)}
.cons .ok{justify-self:end;padding:8px 14px;border-radius:9px;background:var(--c);color:var(--ev-ink);font-weight:700;font-size:13.5px}

.srch{position:absolute;inset:44px 14px 14px;display:grid;gap:10px;align-content:start}
.srch .msg{max-width:90%}
.srch .ans2{opacity:0}
.srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.srcs span{display:inline-flex;gap:6px;align-items:center;padding:4px 9px;border-radius:7px;border:1px solid var(--line2);background:var(--card);font-size:12px;color:var(--ink);opacity:0}
.srcs span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--rc)}

.bld{position:absolute;inset:44px 14px 14px;display:grid;gap:10px;align-content:start;border-radius:12px;overflow:hidden}
.bld>*{opacity:0}
.bld .cov{display:block;width:100%;height:96px;border-radius:12px}
.bld .ttl{display:flex;gap:10px;align-items:center;font:800 21px/1.1 var(--f-disp);letter-spacing:-.03em}
.bld .ttl span{width:34px;height:34px;padding:7px;border-radius:9px;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}
.bld .ttl svg{width:100%;height:100%}
.tgl{display:grid;gap:4px;font-size:13px;color:var(--ink2)}
.tgl b{display:flex;gap:7px;align-items:center;color:var(--ink);font-weight:600}
.tgl b::before{content:"";width:0;height:0;border-left:6px solid var(--ink3);border-top:4px solid transparent;border-bottom:4px solid transparent;transform:rotate(90deg)}
.tgl span{padding-left:16px}

.res4{position:absolute;inset:44px 14px 14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-content:start}
.res4 .msg{grid-column:1/-1;justify-self:end;max-width:90%}
.rc{display:grid;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--line2);background:var(--card-in);opacity:0}
.rc b{position:relative;display:flex;gap:8px;align-items:center;font-size:13.5px}
.rc b::before{content:"";flex:none;width:18px;height:18px;border-radius:5px;background:var(--rc)}
.rc b::after{content:"";position:absolute;left:6.5px;top:50%;margin-top:-6px;width:5px;height:9px;border:solid var(--ev-ink);border-width:0 2px 2px 0;transform:rotate(45deg)} /* галочка без символів-емодзі */
.rc small{color:var(--ink3);font-size:12px}
.rc svg{width:100%;height:46px}

.slt{position:absolute;inset:44px 14px 14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:14px;align-content:start}
.slt .msg{align-self:start}
.slot{position:relative;height:200px;border-radius:12px;border:2px dashed var(--line2);display:grid;place-items:center;text-align:center;font-size:13px;color:var(--ink3);overflow:hidden}
.slot .img{position:absolute;inset:0;background:radial-gradient(70% 80% at 30% 30%,color-mix(in srgb,var(--c-ai) 70%,transparent),transparent),radial-gradient(60% 70% at 80% 70%,color-mix(in srgb,var(--c-db) 70%,transparent),transparent),var(--bg3);opacity:0}
.slot .lbl{position:relative}
.drag{position:absolute;width:110px;height:76px;border-radius:9px;background:radial-gradient(70% 80% at 30% 30%,color-mix(in srgb,var(--c-ai) 70%,transparent),transparent),radial-gradient(60% 70% at 80% 70%,color-mix(in srgb,var(--c-db) 70%,transparent),transparent),var(--bg3);border:1px solid var(--line2);box-shadow:var(--shadow);opacity:0;left:40px;top:150px}
.slt figcaption{grid-column:2;font-size:12.5px;color:var(--ink3);margin-top:-6px}

.ctl{position:absolute;inset:44px 14px 14px;display:grid;gap:12px;align-content:start}
.ctl .card{display:grid;gap:10px;box-shadow:none}
.crow{display:flex;gap:10px;align-items:center;font-size:13.5px}
.crow .tile{flex:none;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font:700 13px var(--f-body);background:var(--c);color:var(--ev-ink)}
.crow small{display:block;color:var(--ink3);font-size:12px}
.crow .rv{margin-left:auto;padding:6px 11px;border-radius:8px;border:1px solid var(--line2);font-size:12.5px;color:var(--ink2)}
.crow .st2{margin-left:auto;font-size:12.5px;color:var(--c-dg)}
.vh{display:grid;gap:5px;font-size:12.5px;color:var(--ink2)}
.vh div{display:flex;gap:8px;align-items:center;padding:6px 9px;border-radius:7px;background:var(--card-in)}
.vh div i{width:8px;height:8px;border-radius:2px;background:var(--rc)}
@media (max-width:640px),(pointer:coarse) and (max-width:1100px){.cons label small{display:none}.res4{grid-template-columns:1fr}.slt{grid-template-columns:1fr}.slt figcaption{grid-column:1}}