/* Floating feedback button (js/feedback-fab.js). Own prefix, fbfab, so it
   borrows nothing from any page stylesheet and nothing borrows from it.
   Bottom right on every width and page, clear of the sidebar rail and the
   phone bottom bar (css/glass.css lifts it above that on a phone the same
   way it lifts .edash-toast).

   Surface tokens (--mat-thick / --mat-filter-thick / --glass-edge /
   --mat-hi / --mat-shadow-3) are read from css/glass.css, the same recipe
   master/header/header.css uses for .hd-profile-menu -- never edited here
   (glass.css is owned by the glass core stream). This file is linked
   BEFORE css/glass.css in index.html, so glass.css's accessibility gates
   (reduced transparency, increased contrast, forced colours, no
   backdrop-filter support) apply to these tokens the same as everywhere
   else without this file doing anything special for them.

   Ink/accent tokens (--primary / --muted / --accent / --page-bg) are the
   ordinary site tokens from css/global.css's :root, re-pointed for dark
   theme by css/glass.css's own :root[data-theme="dark"] block -- the
   same pair every other page stylesheet reads. Every var() here carries
   a literal fallback so scripts/check-css-tokens.py's no-fallback read
   check does not need to reason about this file at all. */

.fbfab {
  position: fixed;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  font-family: inherit;
}

.fbfab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 12px;
  border-radius: var(--r-chip);
  border: 1px solid var(--glass-edge, rgba(37, 52, 63, .14));
  cursor: pointer;
  background: var(--mat-thick, rgba(255, 255, 255, .94));
  color: var(--primary, #0F6A71);
  font: 600 13px/1 inherit;
  letter-spacing: .02em;
  box-shadow: inset 0 1px 0 var(--mat-hi, rgba(255, 255, 255, .92)), var(--mat-shadow-2, 0 4px 16px rgba(11, 79, 84, .14));
  -webkit-backdrop-filter: var(--mat-filter-thick, blur(24px) saturate(1.4));
          backdrop-filter: var(--mat-filter-thick, blur(24px) saturate(1.4));
  transition: transform 160ms cubic-bezier(.2, .7, .2, 1);
}
.fbfab-btn:hover { transform: translateY(-1px); }
.fbfab-btn:active { transform: scale(.97); }
.fbfab-btn svg { width: 18px; height: 18px; pointer-events: none; }

.fbfab-panel {
  position: absolute;
  right: 0;
  bottom: 52px;
  width: min(400px, calc(100vw - 28px - env(safe-area-inset-right, 0px)));
  max-height: min(78vh, 680px);
  overflow: auto;
  border-radius: var(--r-card);
  background: var(--mat-thick, rgba(255, 255, 255, .94));
  border: 1px solid var(--glass-edge, rgba(37, 52, 63, .14));
  box-shadow: inset 0 1px 0 var(--mat-hi, rgba(255, 255, 255, .92)), var(--mat-shadow-3, 0 2px 6px rgba(11, 79, 84, .10), 0 24px 48px -12px rgba(11, 79, 84, .32));
  -webkit-backdrop-filter: var(--mat-filter-thick, blur(24px) saturate(1.4));
          backdrop-filter: var(--mat-filter-thick, blur(24px) saturate(1.4));
  padding: 14px 14px 12px;
  color: var(--ink, #1a2a36);
  animation: fbfab-pop 160ms cubic-bezier(.2, .7, .2, 1);
}
@keyframes fbfab-pop { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
.fbfab-panel[hidden] { display: none; }

.fbfab h3 {
  margin: 0 0 8px;
  font-size: var(--type-body-size);
  font-weight: 700;
  color: var(--primary, #0F6A71);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fbfab h3 .fbfab-x {
  background: none; border: 0; color: var(--muted, #7C8B8D); cursor: pointer; font: inherit; font-size: var(--type-label-size);
}

.fbfab .lab {
  display: block;
  margin: 10px 0 4px;
  font-size: var(--type-label-size);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #7C8B8D);
}
.fbfab .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fbfab .chip {
  border: 1px solid var(--glass-edge, rgba(37, 52, 63, .18));
  background: var(--page-bg, #F4F7F7);
  color: var(--ink, #1a2a36);
  border-radius: var(--r-card);
  padding: 6px 10px;
  font: 500 12px/1 inherit;
  cursor: pointer;
}
.fbfab .chip.on { background: var(--primary, #0F6A71); color: #fff; border-color: var(--primary, #0F6A71); }

.fbfab textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 110px;
  margin-top: 10px;
  font: 500 13px/1.45 inherit;
  padding: 10px 12px;
  border: 1px solid var(--glass-edge, rgba(37, 52, 63, .18));
  border-radius: var(--r-ctl);
  resize: vertical;
  background: var(--page-bg, #F4F7F7);
  color: var(--ink, #1a2a36);
}
.fbfab textarea::placeholder { color: var(--muted, #7C8B8D); opacity: 1; }
.fbfab textarea:focus-visible,
.fbfab .chip:focus-visible,
.fbfab .tool:focus-visible,
.fbfab .send:focus-visible,
.fbfab .link:focus-visible,
.fbfab-btn:focus-visible {
  outline: 2px solid var(--primary, #0F6A71);
  outline-offset: 2px;
}

.fbfab .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.fbfab .tool {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--glass-edge, rgba(37, 52, 63, .18));
  background: var(--page-bg, #F4F7F7);
  color: var(--primary, #0F6A71);
  border-radius: var(--r-ctl); padding: 7px 10px;
  font: 600 12px/1 inherit; cursor: pointer;
}
.fbfab .tool.on { background: var(--primary, #0F6A71); color: #fff; }

.fbfab .picked {
  margin: 6px 0 0; padding: 6px 8px;
  border-left: 3px solid var(--accent, #FA891A);
  background: var(--page-bg, #F4F7F7);
  font-size: var(--type-label-size); line-height: 1.4; word-break: break-all;
  color: var(--muted, #7C8B8D);
}
.fbfab .picked b { color: var(--ink, #1a2a36); }
.fbfab .picked button { float: right; background: none; border: 0; color: var(--muted, #7C8B8D); cursor: pointer; font-size: var(--type-label-size); }

.fbfab .shot { margin-top: 6px; max-width: 100%; max-height: 120px; border: 1px solid var(--glass-edge, rgba(37, 52, 63, .14)); border-radius: var(--r-ctl); display: block; }

.fbfab .send {
  margin-top: 12px; width: 100%; min-height: 44px;
  border: 0; border-radius: var(--r-ctl);
  background: var(--primary, #0F6A71); color: #fff;
  font: 700 13px inherit; letter-spacing: .04em; cursor: pointer;
}
.fbfab .send:disabled { opacity: .55; cursor: default; }

.fbfab .state { margin: 8px 0 0; font-size: var(--type-label-size); min-height: 1.2em; color: var(--muted, #7C8B8D); }
.fbfab .state.ok { color: #17753F; }
.fbfab .state.err { color: #B3412E; }
.fbfab .state .link { background: none; border: 0; padding: 0; color: var(--primary, #0F6A71); text-decoration: underline; cursor: pointer; font-weight: 600; font-size: var(--type-button-size); font-family: inherit; }

.fbfab-hl {
  position: fixed; pointer-events: none; z-index: 70;
  border: 2px solid var(--accent, #FA891A); border-radius: var(--r-ctl);
  box-shadow: 0 0 0 4000px rgba(15, 106, 113, .08);
  transition: all 60ms;
}
.fbfab-hint {
  position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 100;
  background: var(--primary, #0F6A71); color: #fff;
  padding: 8px 14px; border-radius: var(--r-ctl); font-weight: 600; font-size: var(--type-button-size); font-family: inherit;
}
body.fbfab-picking, body.fbfab-picking * { cursor: crosshair !important; }

@media (max-width: 640px) {
  .fbfab-panel {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 82vh; border-radius: var(--r-card) var(--r-card) 0 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .fbfab.open .fbfab-btn { display: none; }
}
@media (max-width: 480px) {
  .fbfab-btn span { display: none; }
  .fbfab-btn { padding: 0 13px; }
}
@media print { .fbfab { display: none; } }