/* ==========================================================================
   EKHO — Suggest Change feedback layer (styles)

   Extracted from public/index.html (public/index.html on main still carries
   its own inline copy, unchanged). Namespaced to #fb-* / .fb-* throughout,
   with a fallback value on every custom property so this file renders
   correctly with none of the host page's CSS loaded (see fb-btn/fb-row
   below for the two host classes the original relied on).
   ========================================================================== */

#fb-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: var(--violet, #441273); color: #fff;
  font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: 11px; letter-spacing: .06em;
  padding: 6px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
#fb-bar[hidden] { display: none; }
#fb-bar b { font-weight: 600; }

/* The way in. Deliberately quiet — present on every screen, including the
   landing and claim pages, and it takes itself away once feedback mode opens.

   issue #12 root cause #1: Netlify's own site-badge iframe (#nl-badge-frame,
   which this page never creates and must not try to remove -- it's injected
   by the deploy, outside this HTML entirely) sits bottom-right at
   z-index 2147483645 on every deployed page, covering whatever's under it.
   Moved to the bottom-LEFT (the badge is always bottom-right) and given a
   z-index one higher than the badge's own, so the pill and the screen-level
   button below are never covered regardless of which corner a future badge
   configuration ends up in. */
#fb-enter {
  position: fixed; left: 16px; bottom: 16px; z-index: 2147483646;
  font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: 10.5px; letter-spacing: .04em;
  color: var(--ink-3, #7e7590);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--hair, #2b2138); border-radius: 999px;
  padding: 6px 13px;
  box-shadow: 0 2px 10px -4px rgba(13, 13, 22, .3);
  backdrop-filter: blur(4px);
  transition: color .15s, border-color .15s, transform .15s;
}
#fb-enter:hover { color: var(--accent, #96a0ff); border-color: var(--peri, #707bfb); transform: translateY(-1px); }
#fb-enter:focus-visible { outline: 2px solid var(--violet, #441273); outline-offset: 2px; }
#fb-enter[hidden] { display: none; }

/* The fan side has a fixed player across the bottom; lift the pill clear of it
   so it never sits on top of the ownership readout. (Dead in v2 -- #view-fan
   doesn't exist there -- kept for the original prototype's own layout, which
   this same file's classes/IDs are still named to match.) */
#view-fan:not([hidden]) ~ #fb-enter { bottom: 84px; }

/* issue #12: the guaranteed screen-level entry point, always present (not
   gated behind ENTER_BUTTON like the pill above), visible only while
   actively annotating -- same corner, same elevated z-index, stacked just
   above the pill. */
#fb-screen-btn {
  position: fixed; left: 16px; bottom: 54px; z-index: 2147483646;
  display: none; align-items: center;
  font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: 10.5px; letter-spacing: .04em;
  color: var(--on-accent, #0b0713);
  background: var(--peri, #707bfb);
  border: 1px solid var(--violet, #441273); border-radius: 999px;
  padding: 6px 13px;
  box-shadow: 0 2px 10px -4px rgba(13, 13, 22, .3);
  cursor: pointer;
}
body.fb-live #fb-screen-btn { display: inline-flex; }
#fb-screen-btn:hover { transform: translateY(-1px); }
#fb-screen-btn:focus-visible { outline: 2px solid var(--violet, #441273); outline-offset: 2px; }

@media (max-width: 860px) {
  #fb-enter { left: 10px; bottom: 10px; }
  #fb-screen-btn { left: 10px; bottom: 46px; }
  #view-fan:not([hidden]) ~ #fb-enter { bottom: 78px; }
}
#fb-bar .fb-spacer { flex: 1; }
#fb-bar button {
  border: 1px solid rgba(255,255,255,.55); background: transparent; color: #fff;
  border-radius: 999px; padding: 2px 10px; font-family: inherit; font-size: 10px; letter-spacing: .06em;
}
#fb-bar button:hover { background: rgba(255,255,255,.16); }
#fb-bar button.fb-live { background: var(--peri, #707bfb); color: #000; border-color: #000; font-weight: 600; }
#fb-bar button:disabled { opacity: .5; cursor: default; }
#fb-bar button:disabled:hover { background: transparent; }
#fb-save.fb-dirty { background: #ffd166; color: #000; border-color: #000; font-weight: 600; opacity: 1; }
.fb-t-pending { background: var(--warn-bg, #2c2413); color: var(--warn, #e0b054); }
#fb-unlock { display: inline-flex; align-items: center; gap: 6px; }
#fb-unlock[hidden] { display: none; }
#fb-unlock input {
  font-family: inherit; font-size: 10px; letter-spacing: .06em;
  border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  background: rgba(255,255,255,.12); color: #fff; padding: 2px 10px; width: 130px;
}
#fb-unlock input::placeholder { color: rgba(255,255,255,.6); }
#fb-unlock input:focus-visible { outline: 2px solid var(--peri, #707bfb); outline-offset: 1px; }
#fb-unlock-msg { font-size: 9.5px; color: #ffd166; }
body.fb-admin { padding-top: 30px; }
body.fb-admin .pt-side { top: 30px; height: calc(100vh - 30px); }

/* Annotatable targets, only while actively annotating. issue #12: extended
   from [data-fb] alone to all three identity attributes (explicit
   data-ekho-id, legacy data-fb, and fb-autoid.js's automatic
   data-ekho-auto) -- every one of them is a valid pick. */
body.fb-live [data-fb],
body.fb-live [data-ekho-id],
body.fb-live [data-ekho-auto] { cursor: crosshair; outline: 1px dashed rgba(112,123,251,.75); outline-offset: 2px; }

/* issue #12: "only the innermost hovered element outlined" -- native :hover
   cascades to every matching ancestor at once, so the single current pick
   is tracked in JS (fb-layer.js's mousemove listener) and marked with this
   class instead of relying on :hover here. */
body.fb-live .fb-hover-target { outline: 2px solid var(--peri, #707bfb) !important; background: rgba(112,123,251,.07); }

[data-fb].fb-has, [data-ekho-id].fb-has, [data-ekho-auto].fb-has { outline: 2px solid var(--violet, #441273) !important; outline-offset: 2px; }
[data-fb].fb-flash, [data-ekho-id].fb-flash, [data-ekho-auto].fb-flash { animation: fb-flash 1.1s ease-out; }
@keyframes fb-flash {
  0%, 100% { background: transparent; }
  25% { background: rgba(112,123,251,.42); }
}

/* Composer popover. */
#fb-composer {
  font-family: var(--f-ui, "Poppins", "Segoe UI", system-ui, sans-serif); line-height: 1.55; color: var(--ink, #f2effa);
  position: fixed; z-index: 960; width: 330px; max-width: calc(100vw - 24px);
  background: var(--surface, #16101f); border: 1px solid var(--line, #f2effa); border-radius: 12px;
  box-shadow: 0 20px 44px -12px rgba(68,18,115,.42);
  padding: 13px 15px; display: flex; flex-direction: column; gap: 9px;
}
#fb-composer[hidden] { display: none; }
#fb-composer .fb-anchor { font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: 10px; color: var(--accent, #96a0ff); word-break: break-all; }
#fb-composer .fb-label { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
#fb-composer textarea {
  font: inherit; font-size: 13px; min-height: 78px; resize: vertical;
  border: 1.5px solid var(--hair, #2b2138); border-radius: 8px; padding: 7px 9px; color: var(--ink, #f2effa); background: var(--surface, #16101f);
}
#fb-composer textarea:focus-visible, #fb-composer input:focus-visible { outline: 2px solid var(--peri, #707bfb); outline-offset: 1px; }
#fb-composer input {
  font: inherit; font-size: 12.5px;
  border: 1.5px solid var(--hair, #2b2138); border-radius: 8px; padding: 6px 9px; color: var(--ink, #f2effa); background: var(--surface, #16101f);
}
.fb-types { display: flex; gap: 6px; }
.fb-types button {
  flex: 1; border: 1.5px solid var(--hair, #2b2138); background: var(--surface, #16101f); border-radius: 999px;
  padding: 4px 8px; font-size: 11px; font-weight: 600; color: var(--ink-3, #7e7590);
}
.fb-types button[aria-pressed="true"] { border-color: var(--black, #000000); background: var(--black, #000000); color: #fff; }

/* Side panel. */
#fb-panel {
  font-family: var(--f-ui, "Poppins", "Segoe UI", system-ui, sans-serif); line-height: 1.55; color: var(--ink, #f2effa);
  position: fixed; z-index: 940; top: 30px; right: 0; bottom: 0; width: 340px; max-width: 100vw;
  background: var(--surface, #16101f); border-left: 1.5px solid var(--line, #f2effa);
  display: flex; flex-direction: column;
  box-shadow: -14px 0 34px -20px rgba(68,18,115,.5);
}
#fb-panel[hidden] { display: none; }
#fb-panel header { padding: 13px 15px; border-bottom: 1px solid var(--hair, #2b2138); display: flex; align-items: center; gap: 10px; }
#fb-panel header h2 { font-size: 14px; font-weight: 600; flex: 1; }
#fb-panel header button { border: 0; background: none; font-size: 17px; line-height: 1; color: var(--ink-3, #7e7590); padding: 0 2px; }
.fb-filters { display: flex; gap: 6px; padding: 10px 15px; border-bottom: 1px solid var(--hair, #2b2138); }
.fb-filters button {
  border: 1.5px solid var(--hair, #2b2138); background: var(--surface, #16101f); border-radius: 999px;
  padding: 3px 11px; font-size: 11px; font-weight: 600; color: var(--ink-3, #7e7590);
}
.fb-filters button[aria-pressed="true"] { border-color: var(--black, #000000); background: var(--black, #000000); color: #fff; }
#fb-list { flex: 1; overflow-y: auto; padding: 6px 0; }

/* Scope, find-and-replace, and review verdicts. */
#fb-composer .fb-anchor {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted;
}
#fb-composer .fb-anchor.is-global { text-decoration: line-through; opacity: .55; }
#fb-composer .fb-scopes { display: flex; gap: 4px; margin: 6px 0 2px; }
#fb-composer .fb-scopes button {
  flex: 1; padding: 4px 6px; border-radius: 10px; border: 1px solid var(--hair, #2b2138);
  background: var(--surface, #16101f); font-size: 10.5px; font-weight: 600; color: var(--ink-3, #7e7590);
}
#fb-composer .fb-scopes button[aria-pressed="true"] {
  border-color: var(--peri, #707bfb); background: var(--wash, #1c1533); color: var(--accent, #96a0ff);
}
#fb-c-replace { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
#fb-c-replace input { font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: 11.5px; }
#fb-c-replace[hidden] { display: none; }

.fb-t-scope { background: #ede4fb; color: #5b2ea6; }
.fb-where-wide { font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: 10px; color: var(--ink-3, #7e7590); padding: 2px 0; }
.fb-replace {
  font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: 10.5px; margin: 4px 0;
  color: var(--ink-2, #b3aac6); word-break: break-word;
}
.fb-replace code { background: var(--sunken, #1f1729); padding: 1px 4px; border-radius: 3px; }

.fb-note.is-rejected { opacity: .62; }
.fb-note.is-rejected .fb-text { text-decoration: line-through; }
.fb-verdict {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--hair, #2b2138);
  font-size: 10.5px; color: var(--ink-3, #7e7590);
}
.fb-verdict.is-rejected { color: var(--bad, #e0715f); }
.fb-verdict.is-accepted { color: var(--good, #4ecf9a); }
.fb-verdict-default { font-style: italic; }
.fb-why { flex: 1 1 100%; color: var(--ink-2, #b3aac6); font-style: italic; }
.fb-undo {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--hair, #2b2138); background: var(--surface, #16101f);
  font-size: 10px; font-weight: 600; color: var(--ink-2, #b3aac6);
}
.fb-screen-h { font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3, #7e7590); padding: 12px 15px 4px; }
.fb-note { padding: 9px 15px; border-bottom: 1px solid var(--hair, #2b2138); display: flex; flex-direction: column; gap: 4px; }
.fb-note:hover { background: var(--wash, #1c1533); }
.fb-note-top { display: flex; align-items: center; gap: 6px; }
.fb-note-top .fb-t { font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: 8.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 2px 5px; border-radius: 3px; }
.fb-t-change { background: var(--wash, #1c1533); color: var(--accent, #96a0ff); }
.fb-t-bug { background: var(--bad-bg, #2e1a17); color: var(--bad, #e0715f); }
.fb-t-question { background: var(--warn-bg, #2c2413); color: var(--warn, #e0b054); }
.fb-note-top .fb-spacer { flex: 1; }
.fb-note-top button { border: 0; background: none; color: var(--ink-3, #7e7590); font-size: 14px; line-height: 1; padding: 0 2px; }
.fb-note-top button:hover { color: var(--bad, #e0715f); }
.fb-note .fb-where { font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: 9.5px; color: var(--denim, #565ab9); cursor: pointer; text-align: left; border: 0; background: none; padding: 0; word-break: break-all; }
.fb-note .fb-where:hover { text-decoration: underline; }
.fb-note .fb-text { font-size: 12.5px; color: var(--ink, #f2effa); line-height: 1.5; white-space: pre-wrap; }
.fb-note .fb-by { font-size: 10.5px; color: var(--ink-3, #7e7590); }
.fb-empty { padding: 24px 15px; font-size: 12.5px; color: var(--ink-3, #7e7590); font-style: italic; line-height: 1.6; }
#fb-panel footer { border-top: 1px solid var(--hair, #2b2138); padding: 11px 15px; display: flex; flex-direction: column; gap: 7px; }
#fb-panel footer .fb-row { gap: 6px; }
#fb-panel footer button {
  border: 1px solid var(--line, #f2effa); background: var(--peri, #707bfb); color: #000;
  border-radius: 999px; padding: 5px 11px; font-size: 11.5px; font-weight: 600;
}
#fb-panel footer button.fb-ghost { background: transparent; }
#fb-panel footer button.fb-danger { background: transparent; border-color: var(--bad, #e0715f); color: var(--bad, #e0715f); }
#fb-panel footer .fb-hint { font-family: var(--f-mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-size: 9px; line-height: 1.6; color: var(--ink-3, #7e7590); }

@media (max-width: 860px) {
  #fb-panel { top: auto; left: 0; height: 62vh; width: 100%; border-left: 0; border-top: 1.5px solid var(--line, #f2effa); }
}


/* ==========================================================================
   Namespaced button + row primitives.

   The original relied on the host prototype's shared `.btn`/`.btn-ghost`/
   `.btn-solid`/`.btn-sm`/`.row` classes for the composer's Cancel/Save
   buttons and layout rows. Those are host design-system classes this layer
   should not assume exist, so they're reproduced here under fb-* names
   (fb-layer.js emits these class names instead of the originals).
   ========================================================================== */

.fb-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line, #f2effa); border-radius: 3px;
  padding: 11px 20px; font-size: 14px; font-weight: 600;
  background: none; color: var(--ink, #f2effa); white-space: nowrap;
  font-family: var(--f-ui, "Poppins", "Segoe UI", system-ui, sans-serif);
  cursor: pointer;
}
.fb-btn-solid { background: var(--fill, #96a0ff); border-color: var(--fill, #96a0ff); color: var(--on-fill, #0b0713); }
.fb-btn-ghost { background: transparent; color: var(--ink-2, #b3aac6); border-color: var(--hair, #2b2138); }
.fb-btn-sm { padding: 7px 13px; font-size: 12px; }
.fb-btn:hover { transform: translateY(-1px); }
.fb-btn:focus-visible { outline: 2px solid var(--violet, #441273); outline-offset: 2px; }