/* ToolBaz Quick Bar — lightweight search + category widget
   Same visual language/tokens as the homepage tools directory,
   but only the styles this small widget actually needs. */

.tbzqb {
  --c-bg:        #ffffff;
  --c-bg-2:      #f8fafc;
  --c-surface:   #ffffff;
  --c-surface-2: #f1f5f9;
  --c-border:    #e2e8f0;
  --c-text:      #0f172a;
  --c-muted:     #64748b;
  --c-muted-2:   #94a3b8;
  --c-indigo:    #6366f1;
  --c-cyan:      #0ea5e9;
  --c-grad:      linear-gradient(135deg, #7c3aed 0%, #6366f1 55%, #0ea5e9 100%);
  --c-grad-soft: linear-gradient(135deg, rgba(99,102,241,.08) 0%, rgba(14,165,233,.06) 100%);
  --r-chip:      999px;
  --r-input:     12px;
  --shadow-sm:   0 1px 4px rgba(15,23,42,.06), 0 4px 16px rgba(15,23,42,.06);
  --blur-glass:  saturate(160%) blur(16px);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  position: relative;
  max-width: 1400px;
  margin: 0 auto 26px;
  color: var(--c-text);
}
.tbzqb *, .tbzqb *::before, .tbzqb *::after { box-sizing: border-box; }
.tbzqb a { color: inherit; text-decoration: none; }

/* ── Controls bar ─────────────────────────────────────────── */
.tbzqb-controls {
  position: sticky;
  top: 10px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: var(--blur-glass);
  -webkit-backdrop-filter: var(--blur-glass);
  border: 1px solid var(--c-border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.tbzqb-search { position: relative; }
.tbzqb-search__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--c-muted); pointer-events: none;
}
.tbzqb-search__input {
  width: 100%; padding: 12px 42px 12px 42px;
  font-size: 14px; font-family: inherit;
  color: var(--c-text); background: var(--c-bg-2);
  border: 1px solid var(--c-border); border-radius: var(--r-input);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.tbzqb-search__input::placeholder { color: var(--c-muted-2); }
.tbzqb-search__input:focus {
  border-color: var(--c-indigo);
  box-shadow: 0 0 0 3px rgba(99,102,241,.14);
}
.tbzqb-search__clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; display: grid; place-items: center;
  font-size: 17px; line-height: 1; color: var(--c-muted-2);
  background: transparent; border: none; cursor: pointer; border-radius: 50%;
  padding: 0;
}
.tbzqb-search__clear:hover { background: var(--c-surface-2); color: var(--c-text); }

.tbzqb-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tbzqb-filters::-webkit-scrollbar { display: none; }

.tbzqb-chip {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 7px 13px;
  font-size: 12.5px; font-weight: 600; font-family: inherit;
  color: var(--c-muted);
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: var(--r-chip); cursor: pointer;
  transition: color .18s, background .18s, border-color .18s, box-shadow .18s, transform .14s;
  -webkit-user-select: none; user-select: none;
}
.tbzqb-chip:hover { color: var(--c-text); border-color: #c4b5fd; background: rgba(99,102,241,.05); transform: translateY(-1px); }
.tbzqb-chip--active {
  color: #fff; background: var(--c-grad); border-color: transparent;
  box-shadow: 0 3px 14px rgba(99,102,241,.28);
}
.tbzqb-chip--active:hover { transform: translateY(-1px); }

.tbzqb-chip__count {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 17px; padding: 0 5px;
  font-size: 10.5px; font-weight: 700; border-radius: 999px;
}
.tbzqb-chip:not(.tbzqb-chip--active) .tbzqb-chip__count { color: var(--c-indigo); background: rgba(99,102,241,.1); }
.tbzqb-chip--active .tbzqb-chip__count { color: var(--c-indigo); background: rgba(255,255,255,.9); }

/* ── Result panel — collapses upward into the bar & disappears ──── */
.tbzqb-panel {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .22s ease, transform .28s ease, margin-top .32s ease;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 16px;
}
.tbzqb-panel.is-open {
  max-height: 460px;
  opacity: 1;
  margin-top: 12px;
  transform: translateY(0);
  overflow-y: auto;
  box-shadow: var(--shadow-sm);
}

.tbzqb-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--c-border);
  position: sticky; top: 0; background: var(--c-surface); z-index: 1;
}
.tbzqb-panel__count { font-size: 12.5px; color: var(--c-muted); }
.tbzqb-panel__count strong { color: var(--c-text); }
.tbzqb-panel__close {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: var(--c-muted);
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: 999px; padding: 5px 11px; cursor: pointer;
  transition: color .18s, border-color .18s;
}
.tbzqb-panel__close:hover { color: var(--c-text); border-color: #c4b5fd; }

.tbzqb-panel__list { display: flex; flex-direction: column; padding: 6px; }

.tbzqb-result {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: 12px;
  transition: background .15s;
}
.tbzqb-result:hover { background: var(--c-surface-2); }
.tbzqb-result__icon {
  display: grid; place-items: center; width: 36px; height: 36px; font-size: 17px; flex-shrink: 0;
  background: var(--c-grad-soft); border: 1px solid rgba(99,102,241,.12); border-radius: 10px;
}
.tbzqb-result__body { flex: 1; min-width: 0; }
.tbzqb-result__title { display: block; font-size: 13.5px; font-weight: 700; color: var(--c-text); letter-spacing: -.01em; }
.tbzqb-result__desc {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--c-muted);
}
.tbzqb-result__arrow { color: var(--c-cyan); flex-shrink: 0; transition: transform .18s; }
.tbzqb-result:hover .tbzqb-result__arrow { transform: translateX(3px); }

.tbzqb-panel__empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--c-muted); margin: 0; }

@media (max-width: 640px) {
  .tbzqb-controls { padding: 10px; top: 6px; }
  .tbzqb-result__desc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tbzqb-panel { transition: none; }
}