/* ng-autobar.css — NGAutoBar: reusable auto-hiding sub-toolbar (2026-09-07).
   Companion to ng-autobar.js — read the header there for the why and for the
   "wrap a widget box with this" recipe.

   The contract is three class names, so any host can opt in:
     .ngab-host      the container (gets .ngab-open / .ngab-pinned / .ngab-empty)
     .ngab-tray      the collapsible strip of options
     .ngab-handle    the always-visible "⋯" affordance

   Unpinned the tray is position:absolute — revealing it costs ZERO layout, so
   the caret and the message list cannot shift. Pinned it becomes static and
   takes real space, which is what "lock it open" should mean. */

.ngab-host { position: relative; }

/* ---------------------------------------------------------- the handle --- */
.ngab-handle {
  flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  margin: 0 2px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line2, rgba(120,200,255,.18));
  border-radius: 999px;
  color: var(--t3, #6f849a);
  font: 700 13px/1 var(--fm, ui-monospace, monospace);
  letter-spacing: 0;
  cursor: pointer;
  position: relative;   /* above .composer::before gradient for hit-testing */
  transition: color var(--tm, .14s) var(--ease, ease),
              border-color var(--tm, .14s) var(--ease, ease),
              background var(--tm, .14s) var(--ease, ease);
}
.ngab-handle:hover,
.ngab-handle:focus-visible {
  color: var(--x-cyan, #00e5ff);
  border-color: color-mix(in srgb, var(--x-cyan, #00e5ff) 50%, transparent);
  background: color-mix(in srgb, var(--x-cyan, #00e5ff) 10%, transparent);
  outline: none;
}
.ngab-host.ngab-open > .ngab-handle {
  color: var(--x-cyan, #00e5ff);
  border-color: color-mix(in srgb, var(--x-cyan, #00e5ff) 45%, transparent);
}
.ngab-handle[hidden] { display: none !important; }

/* Touch: 26px is under the 44px target, so pad the hit area without changing
   the painted size or the flex metrics. */
@media (pointer: coarse) {
  .ngab-handle::after {
    content: ""; position: absolute; inset: -9px; border-radius: 999px;
  }
}

/* ------------------------------------------------------------ the tray --- */
.ngab-tray {
  position: absolute;
  left: 0; right: 0;
  z-index: 12;                       /* under the emoji/GIF popovers (60+) */
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--r1, 8px);
  border: 1px solid var(--line, rgba(120,200,255,.12));
  background: color-mix(in srgb, var(--s1, #060d1a) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 8px 26px rgba(0,0,0,.34);

  /* collapsed: out of sight AND out of the tab order (visibility, not opacity) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms var(--ease, ease),
              transform 160ms var(--ease, ease),
              visibility 0s linear 160ms;
}
.ngab-tray.ngab-above { bottom: calc(100% + 8px); transform: translateY(4px); }
.ngab-tray.ngab-below { top:    calc(100% + 8px); transform: translateY(-4px); }

.ngab-host.ngab-open > .ngab-tray {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s, 0s, 0s;
}

.ngab-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; }

/* ------------------------------------------------------------- the pin --- */
.ngab-pin {
  flex: none; margin-left: auto;
  width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line2, rgba(120,200,255,.18));
  border-radius: 6px;
  font-size: 11px; line-height: 1;
  cursor: pointer;
  opacity: .5;
  filter: grayscale(1);
  transition: opacity var(--tm, .14s) var(--ease, ease), filter var(--tm, .14s) var(--ease, ease);
}
.ngab-pin:hover { opacity: .9; }
.ngab-pin.on {
  opacity: 1; filter: none;
  border-color: color-mix(in srgb, var(--x-cyan, #00e5ff) 55%, transparent);
  background: color-mix(in srgb, var(--x-cyan, #00e5ff) 12%, transparent);
}

/* ----------------------------------------------------------- pinned in --- */
/* The one deliberate layout change. Tray joins the flow as a full-width row
   above everything else in the host (order for flex hosts, DOM order — it is
   inserted first — for block hosts). */
.ngab-host.ngab-pinned > .ngab-tray {
  position: static;
  order: -3;
  flex: 0 0 100%;
  width: 100%;
  margin: 0 0 6px;
  transform: none;
  box-shadow: none;
  background: color-mix(in srgb, var(--s1, #060d1a) 45%, transparent);
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* Nothing to hide -> no chrome at all. */
.ngab-host.ngab-empty > .ngab-tray { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ngab-tray { transition: opacity 1ms linear, visibility 0s; transform: none !important; }
}

/* ------------------------------------------ composer-specific polish ----- */
/* Now that seven chips have left the row, let the text field actually breathe:
   it is the widest thing in the composer instead of a thin strip between
   chips. Only the chip pressure changed, so this is a minimum, not a width. */
#composer.ngab-host .composer-input { flex: 1 1 420px; min-width: 220px; }
#composer .ngab-tray .chip,
#composer .ngab-tray .ngx-attach-btn,
#composer .ngab-tray button { flex: none; }