/* wordfilter.css
   Personal "content masking" filter (not moderation).
   Modes:
   - off: no DOM changes
   - on: replace matches with an opaque mask chip
   - spoiler: hide word, reveal on hover/focus
*/

:root {
  --wf-mask-bg: #7b7b7b;      /* neutral gray */
  --wf-mask-fg: #d9d9d9;      /* light gray */
  --wf-mask-border: rgba(0,0,0,0.25);
  --wf-radius: 6px;
  --wf-pad-y: 0.05em;
  --wf-pad-x: 0.35em;
  --wf-gap: 0.10em;
}

.wf-modal { display: none; }
.wf-modal.wf-open { display: block; }

.wf-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
}

.wf-modal-card{
  position: fixed;
  z-index: 1001;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100% - 24px));
  background: #0b1220;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.6);
}

.wf-modal-header{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.wf-modal-title{
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

.wf-modal-close{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 18px;
}

.wf-modal-body{
  padding: 14px;
  color: rgba(255,255,255,0.85);
}

.wf-modal-help{
  margin: 0 0 10px 0;
  opacity: 0.9;
  font-size: 0.95rem;
}

.wf-modal-textarea{
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.9);
  border-radius: 10px;
  padding: 10px;
  resize: vertical;
}

.wf-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top: 12px;
}

.wf-btn{
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 800;
}

.wf-btn-primary{
  background: rgba(37, 99, 235, 0.85);
  border-color: rgba(37, 99, 235, 0.95);
}


/* Base wrapper inserted around masked words */
.wf-token {
  display: inline-block;
  border-radius: var(--wf-radius);
  border: 1px solid var(--wf-mask-border);
  line-height: 1.2;
  vertical-align: baseline;
  margin: 0 var(--wf-gap);
  white-space: pre-wrap;
}

/* ON mode: the content is replaced with a generic label */
.wf-token.wf-on {
  background: var(--wf-mask-bg);
  color: var(--wf-mask-fg);
  padding: var(--wf-pad-y) var(--wf-pad-x);
  font-weight: 600;
  letter-spacing: 0.02em;
  user-select: none;
}

/* Make the mask look consistent even in pills */
.wf-token.wf-on.wf-in-pill {
  padding: 0.05em 0.45em;
  font-weight: 700;
}

/* SPOILER mode: hide the real word until hover/focus */
.wf-token.wf-spoiler {
  position: relative;
  background: var(--wf-mask-bg);
  color: transparent;               /* hides text */
  padding: var(--wf-pad-y) var(--wf-pad-x);
  user-select: none;
}

/* Provide a visible "covered" look */
.wf-token.wf-spoiler::after {
  content: "spoiler";
  color: var(--wf-mask-fg);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Reveal on hover/focus (keyboard accessible) */
.wf-token.wf-spoiler:hover,
.wf-token.wf-spoiler:focus {
  color: #111;                      /* reveal text */
  background: #e6e6e6;
  outline: none;
  user-select: text;
}

.wf-token.wf-spoiler:hover::after,
.wf-token.wf-spoiler:focus::after {
  content: "";
}

/* If the token is inside a pill, keep it compact */
.wf-token.wf-spoiler.wf-in-pill {
  padding: 0.05em 0.45em;
}

/* Optional: slightly reduce visual clutter inside tight tag pills */
.tag-pill .wf-token {
  margin: 0 0.05em;
}

/* Optional: small UI for a 3-way toggle if you add one */
.wf-toggle {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 14px;
}

.wf-toggle button {
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  color: #eee;
  border-radius: 10px;
  padding: 4px 10px;
  cursor: pointer;
}

.wf-toggle button[aria-pressed="true"] {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
}

/* Injected top bar under header */
.wf-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px 0 12px;
}

.wf-toggle-label {
  margin-right: 6px;
  opacity: 0.9;
}

.wf-toggle-host{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin-top: 6px;
  margin-bottom: 6px;
}