/* ============================================================================
   Clear Cited — persistent Feedback affordance (Wave 179 P2; design from the
   W178 design-system import). A subtle right-edge tab + compact dialog. Uses
   host brand tokens (--brand, --ink, --line, …) with safe fallbacks. Include
   feedback.css + feedback.js on every page. Accessible, keyboard-operable,
   clamped so it never overlaps the footer.
   ============================================================================ */

/* ---- right-edge tab ---- */
.ccfb-tab{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:90;
  display:inline-flex; align-items:center; gap:8px;
  writing-mode:vertical-rl;
  padding:16px 9px 18px;
  background:var(--brand,#1f6feb); color:var(--on-brand,#fff);
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.02em;
  border:0; border-radius:10px 0 0 10px;
  box-shadow:0 6px 20px rgba(15,23,32,.16);
  cursor:pointer;
  transition:padding-right .2s ease, background .2s ease;
}
.ccfb-tab:hover{ padding-right:13px; background:var(--brand-strong,#1a5fd0); }
.ccfb-tab:focus-visible{ outline:3px solid var(--ring,rgba(31,111,235,.4)); outline-offset:2px; }
.ccfb-tab .ccfb-tab-ico{ writing-mode:horizontal-tb; font-size:14px; line-height:1; }
.ccfb-tab[aria-expanded="true"]{ opacity:0; pointer-events:none; }   /* hide while panel open */

/* ---- panel ---- */
.ccfb-panel{
  position:fixed; right:16px; z-index:95;
  width:360px; max-width:calc(100vw - 32px);
  background:var(--surface,#fff);
  border:1px solid var(--line,#e4ebf2);
  border-radius:14px;
  box-shadow:0 24px 60px rgba(15,23,32,.22);
  font-family:inherit;
  opacity:0; visibility:hidden; transform:translateY(8px) scale(.99);
  transform-origin:bottom right;
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.ccfb-panel.open{ opacity:1; visibility:visible; transform:none; }

.ccfb-head{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; padding:15px 16px 12px; border-bottom:1px solid var(--line,#e4ebf2); }
.ccfb-title{ margin:0; font-size:15px; font-weight:700; color:var(--ink,#0f1720); letter-spacing:-.01em; }
.ccfb-sub{ margin:2px 0 0; font-size:12px; color:var(--muted,#5b6b7a); line-height:1.45; }
.ccfb-x{ flex:0 0 auto; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; color:var(--faint,#8593a0); border-radius:8px; font-size:16px; cursor:pointer; }
.ccfb-x:hover{ background:var(--soft,#f4f7fb); color:var(--ink,#0f1720); }
.ccfb-x:focus-visible{ outline:2px solid var(--brand,#1f6feb); outline-offset:1px; }

.ccfb-body{ padding:14px 16px 16px; max-height:min(66vh,560px); overflow-y:auto; }
.ccfb-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.ccfb-field{ margin:0 0 12px; }
.ccfb-row{ display:grid; grid-template-columns:110px 1fr; gap:10px; }
.ccfb-label{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--ink,#0f1720); margin:0 0 5px; }
.ccfb-opt{ font-weight:500; color:var(--faint,#8593a0); }
.ccfb-textarea, .ccfb-input{
  width:100%; box-sizing:border-box; font:inherit; font-size:13px; color:var(--ink,#0f1720);
  background:#fff; border:1px solid var(--line-2,#d3dde9); border-radius:9px;
  padding:9px 11px; resize:vertical; transition:border-color .15s ease, box-shadow .15s ease;
}
.ccfb-textarea{ min-height:84px; line-height:1.5; }
.ccfb-textarea:focus, .ccfb-input:focus{ outline:none; border-color:var(--brand,#1f6feb);
  box-shadow:0 0 0 3px var(--ring,rgba(31,111,235,.18)); }
.ccfb-textarea::placeholder, .ccfb-input::placeholder{ color:var(--faint,#8593a0); }

/* type tags (bug / broken link / copy / praise) */
.ccfb-kinds{ display:flex; flex-wrap:wrap; gap:6px; }
.ccfb-kind{ position:relative; }
.ccfb-kind input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.ccfb-kind span{ display:inline-flex; align-items:center; font-size:12px; font-weight:600;
  color:var(--muted,#5b6b7a); background:var(--soft,#f4f7fb); border:1px solid var(--line-2,#d3dde9);
  border-radius:999px; padding:5px 11px; }
.ccfb-kind input:checked + span{ color:var(--brand,#1f6feb); background:var(--brand-faint,#f4f8ff);
  border-color:var(--brand,#1f6feb); }
.ccfb-kind input:focus-visible + span{ outline:2px solid var(--brand,#1f6feb); outline-offset:1px; }

/* screenshot attach */
.ccfb-attach{ display:flex; align-items:center; gap:10px; }
.ccfb-attach-btn{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--ink,#0f1720); background:var(--soft,#f4f7fb); border:1px solid var(--line-2,#d3dde9);
  border-radius:8px; padding:8px 11px; cursor:pointer; }
.ccfb-attach-btn:hover{ border-color:var(--brand,#1f6feb); color:var(--brand,#1f6feb); }
.ccfb-attach-btn:focus-within{ outline:2px solid var(--brand,#1f6feb); outline-offset:1px; }
.ccfb-attach input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.ccfb-thumb{ display:none; align-items:center; gap:8px; font-size:12px; color:var(--muted,#5b6b7a); }
.ccfb-thumb img{ width:34px; height:34px; object-fit:cover; border-radius:6px; border:1px solid var(--line,#e4ebf2); }
.ccfb-thumb.show{ display:inline-flex; }
.ccfb-thumb button{ border:0; background:transparent; color:var(--faint,#8593a0); cursor:pointer; font-size:14px; padding:2px; }
.ccfb-thumb button:hover{ color:var(--danger,#c23b3b); }

/* auto-captured context — read-only */
.ccfb-ctx{ margin-top:4px; border:1px solid var(--line,#e4ebf2); border-radius:10px; background:var(--soft,#f4f7fb); overflow:hidden; }
.ccfb-ctx-head{ display:flex; align-items:center; gap:7px; padding:8px 11px; border-bottom:1px solid var(--line,#e4ebf2);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--faint,#8593a0); }
.ccfb-ctx-head .ccfb-lock{ color:var(--muted,#5b6b7a); font-size:12px; }
.ccfb-ctx dl{ margin:0; padding:8px 11px 10px; display:grid; grid-template-columns:auto 1fr; gap:4px 12px; }
.ccfb-ctx dt{ font-size:11px; color:var(--faint,#8593a0); white-space:nowrap; }
.ccfb-ctx dd{ margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:11px; color:var(--muted,#5b6b7a);
  text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ccfb-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; }
.ccfb-hint{ font-size:11px; color:var(--faint,#8593a0); }
.ccfb-send{ font:inherit; font-size:13px; font-weight:600; color:var(--on-brand,#fff);
  background:var(--brand,#1f6feb); border:1px solid transparent; border-radius:9px; padding:9px 16px; cursor:pointer; }
.ccfb-send:hover{ background:var(--brand-strong,#1a5fd0); }
.ccfb-send:focus-visible{ outline:3px solid var(--ring,rgba(31,111,235,.4)); outline-offset:2px; }
.ccfb-send:disabled{ opacity:.5; cursor:not-allowed; }
.ccfb-err{ margin:10px 0 0; font-size:12px; color:var(--danger,#c23b3b); }
.ccfb-err a{ color:inherit; text-decoration:underline; }

/* success state */
.ccfb-done{ display:none; flex-direction:column; align-items:center; text-align:center; padding:34px 22px 30px; }
.ccfb-done.show{ display:flex; }
.ccfb-done .ccfb-check{ width:46px; height:46px; border-radius:50%; background:var(--brand,#1f6feb);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:12px; }
.ccfb-done h3{ margin:0 0 4px; font-size:16px; color:var(--ink,#0f1720); }
.ccfb-done p{ margin:0; font-size:13px; color:var(--muted,#5b6b7a); }

@media (max-width:520px){
  .ccfb-panel{ right:8px; left:8px; width:auto; bottom:8px !important; top:auto !important; transform-origin:bottom center; }
  .ccfb-row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .ccfb-tab, .ccfb-panel{ transition:none; }
}
@media print{
  .ccfb-tab, .ccfb-panel{ display:none !important; }
}