/* KTM Voyage CRM — the feedback button and its panel [QFB-UI].
   Owned by public/js/core/feedback.js; nothing else emits these class names.

   EVERY colour, radius, shadow and spacing step here is a token from tokens.css.
   Not one literal hex value, so light and dark are the same stylesheet and a
   theme switch repaints this the way it repaints everything else.

   The pill lives in the bottom-right corner, which is already crowded: the toast
   stack sits there (base.css .toasts), the bulk bar floats along the bottom edge
   (components.css .bulkbar) and on a phone the tab bar owns the last 56px
   (ui.js tabbarHtml). Three rules below move the pill out of the way of each of
   them, driven by :has() rather than by JavaScript watching the DOM — the
   browser already knows what is on screen, and a MutationObserver that re-checks
   on every table render to reposition one button is a lot of machinery for
   something CSS answers for free. The app's own stylesheets already use :has()
   for the collapsed sidebar (base.css .shell:has(.side.rail)).

   ONE RULE REACHES OUTSIDE THIS COMPONENT: .toasts is nudged up while the pill
   is mounted, because both want the same 20px corner and a toast that hides
   behind a button is a message nobody reads. It is scoped to body.fbk-on, a
   class only feedback.js sets, so it exists exactly as long as the pill does —
   never on the login screen, never while printing. */

:root{
  --fbk-size:46px;          /* the collapsed pill: also its tap target */
  --fbk-gap:20px;           /* distance to the screen edge — matches .toasts */
  --fbk-shift:0px;          /* raised by the rules below when something is in the way */
}

/* ================================================================
   THE PILL
   ================================================================ */

.fbk-fab{
  position:fixed;
  right:var(--fbk-gap);
  bottom:calc(var(--fbk-gap) + var(--fbk-shift) + env(safe-area-inset-bottom));
  z-index:calc(var(--z-drop) + 5);
  display:inline-flex;
  align-items:center;
  gap:0;
  height:var(--fbk-size);
  min-width:var(--fbk-size);
  max-width:var(--fbk-size);
  padding:0;
  border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);
  border-radius:999px;
  background:var(--surface-3);
  color:var(--accent-text);
  font:inherit;
  font-size:13.5px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--shadow-drop);
  transition:max-width .22s cubic-bezier(.22,.8,.3,1),background-color .16s ease,
    color .16s ease,border-color .16s ease,box-shadow .16s ease,opacity .16s ease,transform .16s ease;
}

.fbk-fab .fbk-fab-ic{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--fbk-size);
  height:var(--fbk-size);
}
.fbk-fab .fbk-fab-ic svg{width:19px;height:19px}

/* The label is always in the DOM (a screen reader reads it, and the pill keeps
   its name); it is the WIDTH that is animated, not the text. */
.fbk-fab .fbk-fab-lbl{
  flex:0 0 auto;
  padding-right:18px;
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .18s ease,transform .18s ease;
}

.fbk-fab:hover,
.fbk-fab:focus-visible,
.fbk-fab.is-first{
  max-width:280px;
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.fbk-fab:hover .fbk-fab-lbl,
.fbk-fab:focus-visible .fbk-fab-lbl,
.fbk-fab.is-first .fbk-fab-lbl{opacity:1;transform:none}

.fbk-fab:hover{box-shadow:var(--shadow-3);transform:translateY(-1px)}
.fbk-fab:active{transform:translateY(0);box-shadow:var(--shadow-2)}
.fbk-fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* First visit only. feedback.js holds this class for seven seconds, once ever —
   the pill says its name and then behaves. */
.fbk-fab.is-first{animation:fbkintro .5s cubic-bezier(.22,.8,.3,1)}
@keyframes fbkintro{from{transform:translateY(10px) scale(.9);opacity:0}to{transform:none;opacity:1}}

/* ---------- getting out of the way ---------- */

/* A dialog, a drawer or the command palette is open: the pill has nothing to
   add and must not float on top of the panel the user is reading. */
body.modal-open .fbk-fab{opacity:0;transform:scale(.92);pointer-events:none}

/* The phone tab bar owns the bottom edge (56px + the home indicator). */
body:has(#tabbar:not([hidden])) .fbk-fab{--fbk-shift:62px}

/* The bulk bar floats along the bottom while rows are ticked. On a wide screen
   it is a centred pill, so stepping up one row is enough. */
body:has(.bulkbar:not(.bulkbar-static)) .fbk-fab{--fbk-shift:70px}

/* The toast stack starts above the pill instead of behind it. See the header. */
body.fbk-on .toasts{bottom:calc(var(--fbk-gap) + var(--fbk-size) + 12px)}
body.fbk-on:has(#tabbar:not([hidden])) .toasts{bottom:calc(var(--fbk-gap) + var(--fbk-size) + 74px)}

/* Never on paper. print.css already hides .no-print; repeated here so this
   component still behaves if it is ever loaded without that stylesheet. */
@media print{.fbk-fab{display:none!important}}

/* ================================================================
   THE PANEL
   ================================================================ */

.fbk-drawer .drawer-body{padding-bottom:var(--sp-6)}

.fbk-form{margin:0}

.fbk-intro{
  margin:0 0 var(--sp-5);
  color:var(--text-muted);
  font-size:13.5px;
  line-height:1.6;
  max-width:60ch;
}

.fbk-sec{margin:0 0 var(--sp-5)}
.fbk-sec:last-of-type{margin-bottom:var(--sp-4)}

.fbk-lbl{
  margin:0 0 var(--sp-2);
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text-muted);
}

.fbk-note{
  margin:var(--sp-2) 0 0;
  color:var(--text-faint);
  font-size:12px;
  line-height:1.55;
}

/* ---------- the two choice controls ----------
   The sliding gold indicator is switched off for both. It can only be drawn
   correctly when every button is the same width and one line high, and these
   labels are neither: "Something is wrong" next to "An idea", and the same four
   options again in Dutch and in Macedonian, where "Не можам да продолжам" is
   twice the length of "Ми пречи". Letting the text WRAP and colouring the
   chosen button directly survives all three languages; a slider would clip
   them (.seg has overflow:hidden) in exactly the language the office works in. */

.fbk-seg{
  width:100%;
  overflow:visible;
  gap:4px;
}
.fbk-seg::before{display:none}

.fbk-seg button{
  flex:1 1 0;
  justify-content:flex-start;
  min-height:46px;
  padding:9px 12px;
  white-space:normal;
  text-align:left;
  line-height:1.35;
  border:1px solid transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.fbk-seg button:hover{background:var(--hover);color:var(--text)}
.fbk-seg button.on{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
  box-shadow:var(--shadow-1);
}
.fbk-seg button.on:hover{background:var(--accent-2);color:var(--accent-ink)}
.fbk-seg button .sg-ic{flex:0 0 auto;margin-right:8px}

/* ---------- the opening choice: three big buttons, nothing preselected ----
   Not .seg: ui.js segmented() resolves an unknown value to index 0, so it can
   render "the first one" but never "none yet" — and "none yet" is the whole
   point. All three reports of 19-08 arrived on the factory setting, which made
   the field say nothing. A large, obviously unpressed target asks a question;
   a control that already looks answered does not. */

.fbk-start{display:grid;gap:6px}

.fbk-start-b{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:52px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-weight:600;
  text-align:left;
  line-height:1.35;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.fbk-start-b:hover{background:var(--hover);border-color:var(--border-strong)}
.fbk-start-b:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.fbk-start-b.on{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
  box-shadow:var(--shadow-1);
}
.fbk-start-b .fbk-start-ic{display:flex;flex:0 0 auto}
.fbk-start-t{flex:1 1 auto}

/* The fourth option is smaller on purpose: saying something nice is welcome,
   but it is not one of the three things somebody opens this panel to do. */
.fbk-start-min{
  display:inline-flex;
  align-items:center;
  gap:6px;
  align-self:start;
  margin-top:2px;
  padding:6px 10px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  background:none;
  color:var(--text-muted);
  font:inherit;
  font-size:13px;
  cursor:pointer;
}
.fbk-start-min:hover{background:var(--hover);color:var(--text)}
.fbk-start-min:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.fbk-start-min.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- urgency: same reasoning, smaller targets ---------- */

.fbk-urg{display:flex;flex-wrap:wrap;gap:6px}
.fbk-urg-b{
  flex:1 1 auto;
  min-height:40px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:13px;
  line-height:1.35;
  cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.fbk-urg-b:hover{background:var(--hover);border-color:var(--border-strong)}
.fbk-urg-b:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.fbk-urg-b.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- where you came from ---------- */

.fbk-where{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 var(--sp-4);
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  color:var(--text-muted);
  font-size:12px;
  line-height:1.5;
}
.fbk-where-ic{display:flex;align-self:center;flex:0 0 auto;color:var(--text-faint)}
.fbk-where-prev{flex:1 1 100%;color:var(--text-faint)}

/* ---------- the labelled questions ---------- */

.fbk-qs .field + .field{margin-top:var(--sp-3)}
.fbk-opt{font-weight:400;color:var(--text-faint);font-size:11px}
.fbk-auto{margin-left:6px;font-weight:400;color:var(--text-faint);font-size:11px}

/* ---------- the reference, ready to copy ---------- */

.fbk-done-ref{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:var(--sp-3);
}
.fbk-ref-txt{color:var(--text-muted);font-size:12px}
.fbk-ref-copy{flex:0 0 auto}

/* Four options do not fit across a 480px panel in any of the three languages,
   so they are a 2x2 block: four large, obvious targets instead of four clipped
   ones. This is the client's "big buttons, plain language" rule, applied. */
.fbk-kinds .seg{display:grid;grid-template-columns:1fr 1fr}

.fbk-sev{
  padding:var(--sp-4);
  border:1px solid var(--accent-line);
  border-radius:var(--radius);
  background:var(--surface-accent);
  animation:fbkfade .18s ease-out;
}
.fbk-sev .fbk-lbl{color:var(--accent-text-strong)}
@keyframes fbkfade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- text fields ---------- */

/* Error on the left, counter on the right, on one line under the field. The
   error grows; the counter never moves, so it does not jump while typing. */
.fbk-below{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--sp-3);
  margin-top:5px;
  min-height:16px;
}
.fbk-below .fbk-err{flex:1 1 auto;margin:0}
.fbk-below .fbk-err[hidden]{display:none}

.fbk-count{
  flex:0 0 auto;
  margin-left:auto;
  color:var(--text-faint);
  font-size:11.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.fbk-count.is-warn{color:var(--opt)}

.fbk-form textarea{min-height:150px;line-height:1.6}
.fbk-form textarea::placeholder{line-height:1.6}

/* ---------- the draft note ---------- */

.fbk-draft{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex-wrap:wrap;
  margin:0 0 var(--sp-4);
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  color:var(--text-muted);
  font-size:12.5px;
}
.fbk-draft-ic{display:inline-flex;color:var(--text-faint)}
.fbk-draft-x{
  margin-left:auto;
  padding:3px 8px;
  min-height:28px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  color:var(--text-muted);
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}
.fbk-draft-x:hover{border-color:var(--accent);color:var(--text-head)}

/* ---------- the failure banner ---------- */

.fbk-alert{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  margin:0 0 var(--sp-4);
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);
  border-left-width:4px;
  border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--bad) 10%,transparent);
  color:var(--text);
  font-size:13px;
  line-height:1.55;
  animation:fbkfade .18s ease-out;
}
.fbk-alert[hidden]{display:none}
.fbk-alert-ic{flex:0 0 auto;color:var(--bad-text);margin-top:1px}
.fbk-alert-txt{min-width:0}
.fbk-alert-t{display:block;color:var(--bad-text);margin-bottom:2px}

/* ---------- the drop zone ---------- */

.fbk-drop{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  padding:var(--sp-5) var(--sp-4);
  border:2px dashed var(--border-strong);
  border-radius:var(--radius);
  background:var(--surface-2);
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease,background-color .15s ease;
}
.fbk-drop:hover{border-color:var(--accent);background:var(--surface-accent)}
.fbk-drop-ic{color:var(--text-faint)}
.fbk-drop:hover .fbk-drop-ic{color:var(--accent-text)}
.fbk-drop-t{font-size:13.5px;color:var(--text)}
.fbk-drop-s{
  max-width:44ch;
  color:var(--text-faint);
  font-size:12px;
  line-height:1.5;
}
.fbk-drop-btn{margin-top:var(--sp-2)}

/* Dragging over it. The overlay covers the instructions rather than sitting
   next to them, so the zone says one thing at a time. */
.fbk-drop-over{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:calc(var(--radius) - 2px);
  background:var(--surface-accent);
  color:var(--accent-text-strong);
  font-size:14px;
  font-weight:700;
}
.fbk-drop.is-over{border-color:var(--accent);border-style:solid;background:var(--surface-accent)}
.fbk-drop.is-over .fbk-drop-over{display:flex}

/* Six files is the ceiling; the zone says so by going quiet instead of by
   throwing an error the moment a seventh is dropped. */
.fbk-drop.is-full{opacity:.55}

/* ---------- the attached files ---------- */

.fbk-files{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  margin:var(--sp-3) 0 0;
  padding:0;
  list-style:none;
}
.fbk-files:empty{margin:0}

.fbk-file{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  animation:fbkfade .16s ease-out;
}
.fbk-file.is-reading{opacity:.6}

.fbk-file-thumb{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-2);
  color:var(--text-faint);
}
.fbk-file-img{width:100%;height:100%;object-fit:cover;display:block}

.fbk-file-txt{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:1px}
.fbk-file-name{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.fbk-file-meta{color:var(--text-faint);font-size:11.5px;font-variant-numeric:tabular-nums}

.fbk-file-x{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border:none;
  border-radius:var(--radius-sm);
  background:none;
  color:var(--text-faint);
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}
.fbk-file-x:hover{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad-text)}
.fbk-file-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.fbk-files-n{margin-top:var(--sp-2);font-variant-numeric:tabular-nums}
.fbk-files-n[hidden]{display:none}

/* ---------- "what we send along" ---------- */

.fbk-ctx{
  margin:var(--sp-5) 0 0;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface-2);
  overflow:hidden;
}
.fbk-ctx-sum{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding:11px 14px;
  font-size:12.5px;
  font-weight:700;
  color:var(--text-muted);
  cursor:pointer;
  list-style:none;
}
.fbk-ctx-sum::-webkit-details-marker{display:none}
.fbk-ctx-sum:hover{color:var(--text-head)}
.fbk-ctx-sum:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fbk-ctx-ic{display:inline-flex;color:var(--text-faint)}
.fbk-ctx-chev{margin-left:auto;display:inline-flex;color:var(--text-faint);transition:transform .18s ease}
.fbk-ctx[open] .fbk-ctx-chev{transform:rotate(180deg)}

.fbk-ctx-in{padding:0 14px 12px}
.fbk-ctx-dl{
  display:grid;
  grid-template-columns:minmax(90px,auto) 1fr;
  gap:4px var(--sp-3);
  margin:0 0 var(--sp-2);
  font-size:12px;
  line-height:1.5;
}
.fbk-ctx-dl dt{color:var(--text-faint);font-weight:700}
.fbk-ctx-dl dd{margin:0;color:var(--text-muted);overflow-wrap:anywhere}

/* ---------- the footer ---------- */

.fbk-drawer .drawer-foot .fnote{max-width:30ch;line-height:1.4}
.fbk-send-s{display:none}

/* ---------- the receipt ---------- */

.fbk-done{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:var(--sp-7) var(--sp-4) var(--sp-6);
  animation:fbkdone .28s cubic-bezier(.22,.8,.3,1);
}
@keyframes fbkdone{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.fbk-done-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:76px;
  height:76px;
  margin-bottom:var(--sp-4);
  border-radius:50%;
  background:color-mix(in srgb,var(--ok) 14%,transparent);
  color:var(--ok);
}
.fbk-done-t{margin:0 0 var(--sp-2);font-size:21px;color:var(--text-head)}
.fbk-done-b{margin:0;max-width:44ch;color:var(--text-muted);font-size:14px;line-height:1.6}
.fbk-done-n{
  margin:var(--sp-4) 0 0;
  max-width:46ch;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface-2);
  color:var(--text-muted);
  font-size:12.5px;
  line-height:1.55;
}
.fbk-done-ref{
  margin:var(--sp-4) 0 0;
  color:var(--text-faint);
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* components.css already turns the drawer into a bottom sheet at 768px. */
@media(max-width:768px){
  .fbk-drawer .drawer-body{padding-bottom:var(--sp-5)}
  .fbk-drop{padding:var(--sp-4) var(--sp-3)}
  .fbk-form textarea{min-height:130px}
}

@media(max-width:560px){
  /* Reporting a problem on a phone is a task, not a peek at a panel: the sheet
     takes the whole screen so the message box is not a four-line slot above
     the keyboard. */
  .fbk-drawer,
  .fbk-drawer.drawer-wide{
    top:0;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    border-top:none;
  }
  .fbk-drawer .drawer-head{padding-top:calc(var(--sp-4) + env(safe-area-inset-top))}
  .fbk-drawer .drawer-head::before{display:none}

  /* One column for both choices: at 390px a 2x2 grid of wrapped sentences is
     four ambiguous blocks, a list is four unmistakable ones. */
  .fbk-kinds .seg,
  .fbk-sev .seg{display:grid;grid-template-columns:1fr}
  .fbk-seg button{min-height:48px}

  .fbk-send-l{display:none}
  .fbk-send-s{display:inline}
  .fbk-drawer .drawer-foot .fnote{max-width:none;font-size:11.5px}
  .fbk-ctx-dl{grid-template-columns:1fr;gap:0 0}
  .fbk-ctx-dl dt{margin-top:6px}
  .fbk-done{padding:var(--sp-6) var(--sp-2) var(--sp-5)}
  .fbk-done-ic{width:64px;height:64px}
  .fbk-done-t{font-size:19px}

  /* On a phone the pill is the icon alone — a label that expands on hover has
     no meaning without a mouse, and the corner is the scarcest space there is. */
  .fbk-fab{--fbk-gap:14px}
  .fbk-fab:hover,.fbk-fab:focus-visible{max-width:var(--fbk-size)}
  .fbk-fab:hover .fbk-fab-lbl,.fbk-fab:focus-visible .fbk-fab-lbl{opacity:0}
  .fbk-fab.is-first{max-width:280px}
  .fbk-fab.is-first .fbk-fab-lbl{opacity:1;transform:none}
}

/* While rows are selected the bulk bar is a full-width block at the bottom of a
   phone screen, and its height depends on how many actions the page offers.
   Guessing that height would put the pill on top of a button that moves money;
   standing down until the selection is cleared is the honest answer. */
@media(max-width:768px){
  body:has(.bulkbar:not(.bulkbar-static)) .fbk-fab{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
}

/* ---------- touch ---------- */
@media(pointer:coarse){
  .fbk-fab{--fbk-size:52px}
  .fbk-file-x{width:44px;height:44px}
  .fbk-seg button{min-height:50px}
  .fbk-ctx-sum{padding:14px}
  .fbk-draft-x{min-height:36px}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .fbk-fab,
  .fbk-fab .fbk-fab-lbl,
  .fbk-ctx-chev{transition:none!important}
  .fbk-fab.is-first,
  .fbk-sev,
  .fbk-alert,
  .fbk-file,
  .fbk-done{animation:none!important}
  .fbk-fab:hover{transform:none}
}

/* ---------- print ---------- */
@media print{
  .fbk-fab,
  .fbk-drawer,
  .fbk-drawer + .drawer-scrim,
  .drawer-scrim{display:none!important}
}