/* KeyBar — the Termius-class accessory bar. The .agkeys row = [.kb-scroll (scrolls)] + [.kb-gear]. */

.kb-scroll{
  flex:1;min-width:0;display:flex;gap:6px;align-items:center;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:1px;
}
.kb-scroll::-webkit-scrollbar{display:none}

.kbtn{
  flex:0 0 auto;position:relative;min-width:42px;height:38px;padding:0 11px;
  display:inline-flex;align-items:center;justify-content:center;
  font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.01em;
  background:rgba(255,255,255,.055);border:1px solid var(--line,#26262e);border-radius:9px;
  color:var(--text,#e7eef0);cursor:pointer;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:none;transition:background .1s,border-color .1s,transform .05s;
}
.kbtn.wide{min-width:0}
.kbtn:active{background:rgba(47,212,190,.28);transform:translateY(1px)}
.kbtn-lab{pointer-events:none}

/* Sticky modifiers: armed (one-shot) glows, locked shows a solid ring. */
.kbtn.mod{color:var(--muted,#8fa3a8)}
.kbtn.mod.armed{background:rgba(47,212,190,.18);border-color:#2fd4be;color:#2fd4be;box-shadow:0 0 0 1px rgba(47,212,190,.35)}
.kbtn.mod.locked{background:#0f9d8f;border-color:#0f9d8f;color:#04110f;box-shadow:0 0 0 2px rgba(15,157,143,.35)}
.kbtn.mod.locked::after{content:"•";position:absolute;top:2px;right:5px;font-size:9px;opacity:.7}

.kb-gear{
  flex:0 0 auto;width:38px;height:38px;margin-left:2px;font-size:16px;line-height:1;
  background:transparent;border:1px solid transparent;border-radius:9px;color:var(--muted,#8fa3a8);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.kb-gear:hover{color:var(--text,#e7eef0);border-color:var(--line,#26262e)}
.kb-gear.on{color:#2fd4be;border-color:#2fd4be;background:rgba(47,212,190,.12)}

/* Remove badge + add button appear only in edit mode. */
.kb-x{
  position:absolute;top:-6px;right:-6px;width:17px;height:17px;display:none;
  align-items:center;justify-content:center;font-size:12px;line-height:1;
  background:#ef4444;color:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.agkeys.editing .kb-x{display:inline-flex}
.agkeys.editing .kbtn{animation:kb-wiggle .5s ease-in-out infinite}
.agkeys.editing .kbtn.dragging{animation:none;opacity:.9;transform:translateY(-3px) scale(1.04);
  box-shadow:0 8px 20px rgba(0,0,0,.5);border-color:#2fd4be;z-index:2}
.kb-add{min-width:38px;color:#2fd4be;border-style:dashed;font-size:18px;animation:none!important}
@keyframes kb-wiggle{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}

/* The ⌨ toggle in the terminal bar. */
.agkbtoggle{
  flex:0 0 auto;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;background:transparent;border:1px solid var(--line,#26262e);border-radius:7px;
  color:var(--muted,#8fa3a8);cursor:pointer;-webkit-tap-highlight-color:transparent;margin-left:6px;
}
.agkbtoggle:hover{color:var(--text,#e7eef0)}
.agkbtoggle.active{color:#2fd4be;border-color:#2fd4be;background:rgba(47,212,190,.12)}
@media (max-width:720px){ .agkbtoggle{display:none} } /* mobile shows the bar automatically on attach */

/* Customize palette (reuses .agmodal-back / .agmodal from agents.css). */
.kb-pal{width:min(460px,94vw);max-height:82vh;overflow-y:auto}
.kb-pal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.kb-pal-head h3{margin:0}
.kb-tag{font:600 10px/1 ui-monospace,Menlo,monospace;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted,#8fa3a8);margin:14px 2px 7px}
.kb-presets .kb-tag{margin-top:4px}
.kb-grp-row,.kb-presets{display:flex;flex-wrap:wrap;gap:7px}
.kb-chip{
  padding:7px 12px;font:600 13px/1 ui-monospace,Menlo,monospace;
  background:rgba(255,255,255,.05);border:1px solid var(--line,#26262e);border-radius:8px;
  color:var(--text,#e7eef0);cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.kb-chip:hover{border-color:#2fd4be}
.kb-chip.added{background:rgba(47,212,190,.16);border-color:#2fd4be;color:#2fd4be}
.kb-chip.added::before{content:"✓ "}
.kb-opt{display:flex;align-items:center;gap:8px;margin:18px 2px 6px;font-size:13px;color:var(--muted,#8fa3a8)}
.kb-reset{margin-top:6px;width:100%;justify-content:center}