
/* dropdown เลือก AI แบบมีมิติ */
#apiDock .apdd{position:relative}
#apiDock .apdd>select{display:none}
#apiDock .apdd-b{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:9px 14px 9px 10px;cursor:pointer;color:#f6f2ea;font:inherit;font-size:15px;font-weight:700;text-align:left;border-radius:14px;border:1px solid rgba(255,255,255,.1);
 background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -3px 0 rgba(0,0,0,.35) inset,0 6px 14px rgba(0,0,0,.4);transition:transform .12s,border-color .15s,box-shadow .15s}
#apiDock .apdd-b:hover{border-color:rgba(255,200,58,.4);transform:translateY(-1px)}
#apiDock .apdd-b:active{transform:translateY(1px);box-shadow:0 3px 8px rgba(0,0,0,.5) inset}
#apiDock .apdd-b:focus-visible,#apiDock .apdd.open .apdd-b{outline:0;border-color:rgba(255,200,58,.7);box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 -3px 0 rgba(0,0,0,.35) inset,0 0 0 4px rgba(255,200,58,.18)}
#apiDock .apdd-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#apiDock .apdd-cv{flex:none;font-style:normal;font-size:13px;color:#ffc83a;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
#apiDock .apdd.open .apdd-cv{transform:rotate(180deg)}
#apiDock .apdd-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;font-size:15px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);
 background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 55%),var(--c,#777);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(0,0,0,.25) inset,0 4px 10px rgba(0,0,0,.4)}
#apiDock .apdd-l{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 8px);max-height:330px;overflow-y:auto;padding:6px;border-radius:18px;scrollbar-width:thin;scrollbar-color:#4a423a transparent;
 background:radial-gradient(120% 70px at 85% 0,rgba(255,200,58,.12),transparent 70%),linear-gradient(180deg,rgba(58,50,44,.97),rgba(26,22,19,.99));border:1px solid rgba(255,255,255,.12);
 box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 0 0 1px rgba(0,0,0,.5),0 4px 8px rgba(0,0,0,.35),0 18px 36px rgba(0,0,0,.55),0 36px 70px rgba(0,0,0,.5);transform-origin:top center;animation:apddIn .2s cubic-bezier(.2,.9,.3,1.1)}
#apiDock .apdd-l[hidden]{display:none}
@keyframes apddIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
#apiDock .apdd-o{display:flex;align-items:center;gap:12px;padding:8px 10px;margin:2px 0;border-radius:12px;cursor:pointer;color:#e8e1d5;border:1px solid transparent;outline:0;transition:background .15s,border-color .15s,transform .15s}
#apiDock .apdd-o:hover,#apiDock .apdd-o:focus{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:rgba(255,255,255,.1);transform:translateX(3px)}
#apiDock .apdd-o.on{background:linear-gradient(180deg,rgba(255,200,58,.2),rgba(255,200,58,.07));border-color:rgba(255,200,58,.35)}
#apiDock .apdd-x{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
#apiDock .apdd-x b{font-size:14.5px;font-weight:700;color:#fff}
#apiDock .apdd-x small{font-size:11.5px;color:#9d9285;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#apiDock .apdd-k{flex:none;font-style:normal;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;color:#7be39a;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.32)}
#apiDock .apdd-ck{flex:none;width:18px;font-style:normal;font-weight:800;color:#ffc83a;opacity:0}
#apiDock .apdd-o.on .apdd-ck{opacity:1}
@media(prefers-reduced-motion:reduce){#apiDock .apdd-l{animation:none}#apiDock .apdd-b,#apiDock .apdd-o,#apiDock .apdd-cv{transition:none}}
