/* ── HELP BUBBLE ───────────────────────────────────────
   Always-there issue reporter, bottom right. Tokens only (branddesign.md):
   neutral surfaces, ink primary action, accent reserved for the focus ring.
   Sits below .modal-overlay (z-index 100) on purpose — an open modal should
   cover it, not fight it. */

#help-fab-root {
  position: fixed; right: var(--s-5); z-index: 90;
  /* --fab-lift is set by fabPlace() to the measured height of whatever
     composer is on screen, so the bubble rides above Team Chat's and Slate
     AI's send buttons instead of sitting on top of them. 0 everywhere else. */
  bottom: calc(var(--s-5) + var(--fab-lift, 0px));
  transition: bottom var(--t-base) var(--ease);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3);
  font-family: var(--ff-sans);
}

/* Closed state is deliberately quiet: a hairline chip on the page surface,
   muted icon, the same soft lift a card gets. It should read as part of the
   app rather than a widget bolted on top of it. */
.fab-btn {
  width: 38px; height: 38px; border-radius: var(--r-pill);
  border: 1px solid var(--b1); background: var(--bg2); color: var(--t3);
  display: grid; place-items: center; padding: 0;
  box-shadow: var(--shadow-sm);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              transform var(--t-fast) var(--ease);
}
.fab-btn:hover  { background: var(--bg3); color: var(--tx); border-color: var(--b2); box-shadow: var(--shadow-md); }
.fab-btn:active { transform: scale(.97); }
.fab-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-line); }
.fab-btn svg { width: 17px; height: 17px; display: block; grid-area: 1 / 1; }

/* The mark swaps to a close glyph while the panel is open, so the same target
   dismisses it — no hunting for a second control. */
.fab-btn .fab-ic-x { opacity: 0; transform: rotate(-30deg); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
.fab-btn .fab-ic-q { opacity: 1; transition: opacity var(--t-base) var(--ease); }
body.fab-open .fab-btn .fab-ic-x { opacity: 1; transform: none; }
body.fab-open .fab-btn .fab-ic-q { opacity: 0; }
body.fab-open .fab-btn { background: var(--bg3); color: var(--tx); border-color: var(--b2); }

/* ── panel ─────────────────────────────────────────── */
.fab-pop {
  width: min(360px, calc(100vw - var(--s-8)));
  background: var(--bg2); border: 1px solid var(--b1); border-radius: var(--r-6);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: fab-in var(--t-slow) var(--ease-out);
}
@keyframes fab-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fab-pop { animation: none; }
  .fab-btn { transition: none; }
}

.fab-pop-hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.fab-pop-t { font-size: var(--fs-15); font-weight: 600; color: var(--tx); letter-spacing: -.01em; }
.fab-pop-d { font-size: var(--fs-13); color: var(--t3); margin-top: var(--s-1); line-height: var(--lh-normal); }
.fab-x {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--r-2);
  border: 1px solid transparent; background: none; color: var(--t3);
  display: grid; place-items: center;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.fab-x:hover { background: var(--bg3); color: var(--tx); }
.fab-x svg { width: 14px; height: 14px; }

.fab-form { padding: 0 var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }

.fab-field { display: flex; flex-direction: column; gap: var(--s-2); }
/* Labels, not placeholder-only fields — the placeholder disappears the moment
   someone starts typing, which is exactly when they want to check what the
   field was asking for. */
.fab-label {
  font-size: var(--fs-12); font-weight: 500; color: var(--t2);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
}
.fab-count { font-family: var(--ff-mono); font-size: var(--fs-10); color: var(--t4); font-variant-numeric: tabular-nums; }

.fab-input, .fab-textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--b2); border-radius: var(--r-3);
  background: var(--bg); color: var(--tx);
  font-family: inherit; font-size: var(--fs-14); font-weight: 400; line-height: var(--lh-normal);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.fab-textarea { resize: vertical; min-height: 92px; }
.fab-input::placeholder, .fab-textarea::placeholder { color: var(--t4); }
/* The signature focus: accent border + 3px ring. */
.fab-input:focus, .fab-textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-line);
}

/* ── attachment ────────────────────────────────────── */
.fab-attach[hidden] { display: none; }
.fab-attach {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2); border: 1px solid var(--b1); border-radius: var(--r-3); background: var(--bg);
}
.fab-thumb {
  width: 46px; height: 30px; object-fit: cover; flex: 0 0 auto;
  border-radius: var(--r-1); border: 1px solid var(--b1); background: var(--bg3);
}
.fab-attach-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fab-attach-name {
  font-size: var(--fs-12); font-weight: 500; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fab-attach-size { font-family: var(--ff-mono); font-size: var(--fs-10); color: var(--t4); }

.fab-tools { display: flex; gap: var(--s-2); }
/* Secondary buttons per the recipe: bg2 surface, b2 border, bg3 on hover. */
.fab-tool {
  flex: 1; height: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 12px; border: 1px solid var(--b2); border-radius: var(--r-2);
  background: var(--bg2); color: var(--tx);
  font-family: inherit; font-size: var(--fs-13); font-weight: 500; white-space: nowrap;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.fab-tool:hover:not(:disabled)  { background: var(--bg3); border-color: var(--b3); }
.fab-tool:active:not(:disabled) { transform: scale(.98); }
.fab-tool:disabled { opacity: .45; cursor: default; }
.fab-tool:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-line); }
.fab-tool svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--t2); }

.fab-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-top: var(--s-4); border-top: 1px solid var(--b1);
}
.fab-link {
  border: none; background: none; padding: 0;
  font-family: inherit; font-size: var(--fs-12); font-weight: 500; color: var(--t3);
  transition: color var(--t-base) var(--ease);
}
.fab-link:hover { color: var(--tx); }

/* Ink primary — never accent. */
.fab-send {
  height: 36px; padding: 0 var(--s-4); border: none; border-radius: var(--r-2);
  background: var(--fill, var(--tx)); color: var(--fill-ink);
  font-family: inherit; font-size: var(--fs-13); font-weight: 500;
  transition: background var(--t-base) var(--ease), opacity var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.fab-send:hover:not(:disabled)  { background: var(--t2); }
.fab-send:active:not(:disabled) { transform: scale(.98); }
.fab-send:disabled { opacity: .45; cursor: default; }
.fab-send:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent-line); }

/* ── sent state ────────────────────────────────────── */
.fab-done { padding: 0 var(--s-5) var(--s-5); text-align: center; }
.fab-done-ic {
  width: 44px; height: 44px; margin: 0 auto var(--s-3);
  border-radius: var(--r-pill); background: var(--bg3); color: var(--t2);
  display: grid; place-items: center;
}
.fab-done-ic svg { width: 20px; height: 20px; }
.fab-done-t { font-size: var(--fs-14); font-weight: 600; color: var(--tx); }
.fab-done-d { font-size: var(--fs-13); color: var(--t3); margin-top: var(--s-1); line-height: var(--lh-normal); }
.fab-done-actions { display: flex; gap: var(--s-2); justify-content: center; margin-top: var(--s-4); }

/* On a phone the bubble would sit on the bottom nav (60px, z-index 400), and a
   360px panel would overhang — lift it clear and dock the panel to the edges. */
@media (max-width: 640px) {
  #help-fab-root { right: var(--s-4); bottom: calc(76px + var(--fab-lift, 0px)); }
  .fab-pop { width: calc(100vw - var(--s-7)); }
}