/* ════════════════════════════════════════════════════════════════
   FEEDBACK — the modal behind the clock-strip button. (2026-08-28)

   Its own file rather than more shell.css because it is inert until someone
   presses the button: feedback.js builds the DOM on first open, so on every
   page view that never uses it this costs one small stylesheet and nothing
   else.

   ⚠ EVERY CLASS IS dl-fb-* AND EVERY RULE IS SCOPED UNDER .dl-fb. Sheets here
   are global to the studio — a bare `.chip` or `.thumb` from a "small" feature
   restyles somebody else's tool three panes away.

   Grammar borrowed from .dl-modal in shell.css (same scrim, same card, same
   radius and shadow) so this reads as part of the studio rather than a bolt-on;
   the geometry differs because that card is a 420px alert and this is a form.
   ════════════════════════════════════════════════════════════════ */

.dl-fb{position:fixed;inset:0;z-index:99998;display:none;align-items:center;justify-content:center;
       padding:20px;background:rgba(15,20,35,.55);backdrop-filter:blur(2px)}
.dl-fb.open{display:flex}

.dl-fb-card{position:relative;display:flex;flex-direction:column;width:100%;max-width:520px;
            max-height:calc(100vh - 40px);background:#fff;border:1px solid #e6e9f0;border-radius:16px;
            box-shadow:0 30px 70px rgba(0,0,0,.32);animation:dlFbPop .16s ease}
@keyframes dlFbPop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dl-fb-card{animation:none}}

/* head */
.dl-fb-head{display:flex;align-items:center;gap:11px;padding:20px 22px 0}
.dl-fb-ico{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;
           background:#eef3fe;color:#1159da}
.dl-fb-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dl-fb-titles{min-width:0}
.dl-fb-title{margin:0;font-size:16px;font-weight:800;color:#1a2233;letter-spacing:-.01em}
.dl-fb-sub{margin:2px 0 0;font-size:12px;line-height:1.45;color:#6b7488}
.dl-fb-x{position:absolute;top:10px;right:10px;width:32px;height:32px;display:grid;place-items:center;
         border:0;border-radius:9px;background:transparent;color:#7a8398;font-size:21px;line-height:1;cursor:pointer}
.dl-fb-x:hover{background:#f1f3f7;color:#475063}
.dl-fb-x:focus-visible{outline:2px solid #1159da;outline-offset:2px}

/* body scrolls, the actions bar does not — on a short laptop window the Send
   button must stay reachable without hunting for it */
.dl-fb-body{flex:1 1 auto;overflow-y:auto;padding:16px 22px 4px}

.dl-fb-lbl{display:block;font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
           color:#7a8398;margin:0 0 7px}

/* kind chips */
.dl-fb-kinds{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 15px}
.dl-fb-kind{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:1px solid #dde3ec;
            border-radius:10px;background:#fff;font:inherit;font-size:12.5px;font-weight:700;color:#48526a;cursor:pointer;
            transition:background .14s,border-color .14s,color .14s}
.dl-fb-kind:hover{background:#f4f7fc;border-color:#c6d2e6}
.dl-fb-kind[aria-pressed="true"]{background:#eef3fe;border-color:#1159da;color:#1159da}
.dl-fb-kind:focus-visible{outline:2px solid #1159da;outline-offset:2px}
.dl-fb-kind svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* message */
/* 🔴 margin:0 IS LOAD-BEARING. A site-level agency sheet puts
   `margin:7px 15px 0 0` on every textarea/input, and this file loads after it —
   MEASURED: that 15px right margin pushed .dl-fb-body's scrollWidth 15px past
   its clientWidth and drew a horizontal scrollbar across the form. Nothing in
   this file's own rules is wrong; a global sheet reached in. Same class of trap
   as any shared-class leak — check the COMPUTED style, not the source. */
.dl-fb-ta{display:block;width:100%;min-height:118px;max-height:40vh;resize:vertical;margin:0;padding:11px 13px;
          border:1px solid #dde3ec;border-radius:11px;background:#fff;color:#1a2233;
          font:inherit;font-size:13.5px;line-height:1.55;box-sizing:border-box}
.dl-fb-ta::placeholder{color:#9aa3b5}
/* 🔴 SCOPED UNDER .dl-fb SO IT OUTRANKS THE AGENCY SHEET. style.css carries
   `textarea:focus, input[type="text"]:focus, … input[type="email"]:focus
   { box-shadow:none; outline:none }`. A bare `textarea:focus` is only (0,1,1)
   so this rule would win either way today — but the same list beat the reply-to
   input at (0,2,1) vs (0,2,0) and left it with NO focus state, not even a
   fallback outline. That box is gone; the scoping stays, because the next
   control added here would walk into the identical trap. */
.dl-fb .dl-fb-ta:focus{outline:none;border-color:#1159da;box-shadow:0 0 0 3px rgba(17,89,218,.13)}
.dl-fb-count{margin:6px 0 0;font-size:11.5px;color:#8b93a5;text-align:right;font-variant-numeric:tabular-nums}
.dl-fb-count.is-over{color:#c0392b;font-weight:700}

/* attachments */
.dl-fb-drop{margin:15px 0 0;padding:13px;border:1.5px dashed #d3dbe8;border-radius:12px;background:#fafbfd;
            text-align:center;transition:border-color .14s,background .14s}
.dl-fb-drop.is-over{border-color:#1159da;background:#eef3fe}
.dl-fb-drop-txt{margin:0;font-size:12.5px;line-height:1.5;color:#6b7488}
.dl-fb-pick{font:inherit;font-size:12.5px;font-weight:800;color:#1159da;background:none;border:0;padding:0;
            cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.dl-fb-pick:focus-visible{outline:2px solid #1159da;outline-offset:2px;border-radius:3px}
.dl-fb-hint{margin:5px 0 0;font-size:11px;color:#9aa3b5}

.dl-fb-thumbs{display:flex;flex-wrap:wrap;gap:9px;margin:11px 0 0}
.dl-fb-thumb{position:relative;width:74px;height:74px;border:1px solid #dde3ec;border-radius:10px;overflow:hidden;background:#f4f6fa}
.dl-fb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dl-fb-thumb-x{position:absolute;top:3px;right:3px;width:20px;height:20px;display:grid;place-items:center;
               border:0;border-radius:50%;background:rgba(16,23,37,.78);color:#fff;font-size:13px;line-height:1;cursor:pointer}
.dl-fb-thumb-x:hover{background:#c0392b}
.dl-fb-thumb-x:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.dl-fb-thumb-sz{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;background:rgba(16,23,37,.7);color:#fff;
                font-size:9.5px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}

/* The bot door. NOT display:none — a bot that skips hidden fields would skip
   the trap too — but the canonical clip-based hide rather than left:-9999px.
   ⚠ MEASURED: the off-screen version pushed .dl-fb-body's scrollWidth 15px past
   its clientWidth and put a horizontal scrollbar across the form, because an
   absolutely-positioned descendant still joins the scroll container's overflow
   region. Clipping to a 1px box cannot. */
.dl-fb-trap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;
            clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;pointer-events:none}

/* status + actions */
.dl-fb-note{margin:14px 0 0;padding:9px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;display:none}
.dl-fb-note.show{display:block}
.dl-fb-note.is-err{background:#fdecec;border:1px solid #f3c9c9;color:#a5322a}
.dl-fb-note.is-ok{background:#eaf7ef;border:1px solid #c3e6d0;color:#1f6b40}

.dl-fb-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
            padding:16px 22px 20px;border-top:1px solid #eef1f6;margin-top:16px}
.dl-fb-to{font-size:11.5px;color:#8b93a5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-fb-acts{display:flex;gap:9px;flex:none}
.dl-fb-btn{height:38px;padding:0 16px;border-radius:10px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;
           border:1px solid #dde3ec;background:#fff;color:#3a4458;transition:.15s}
.dl-fb-btn:hover{background:#f2f5fa}
.dl-fb-btn:focus-visible{outline:2px solid #1159da;outline-offset:2px}
.dl-fb-send{background:linear-gradient(135deg,#1159da,#0d3f9e);border-color:transparent;color:#fff}
.dl-fb-send:hover{background:linear-gradient(135deg,#1159da,#0d3f9e);filter:brightness(1.08)}
.dl-fb-send[disabled]{opacity:.6;cursor:default;filter:none}

/* ── DARK ─────────────────────────────────────────────────────────────────
   Written here rather than in dark-2026.css because this whole feature is one
   file; keeping the two halves apart is how a control ends up with a light
   background nobody notices until a customer does. */
html.dark .dl-fb{background:rgba(4,7,12,.66)}
html.dark .dl-fb-card{background:#12161c;border-color:#2a2f3a;box-shadow:0 30px 70px rgba(0,0,0,.6)}
html.dark .dl-fb-ico{background:#16233c;color:#7fa8ff}
html.dark .dl-fb-title{color:#e8edf6}
html.dark .dl-fb-sub,html.dark .dl-fb-hint,html.dark .dl-fb-to{color:#8d97a9}
html.dark .dl-fb-lbl{color:#8d97a9}
html.dark .dl-fb-x{color:#8d97a9}
html.dark .dl-fb-x:hover{background:#1c222c;color:#dbe3ef}
html.dark .dl-fb-kind{background:#171c24;border-color:#2a3140;color:#c3cbd9}
html.dark .dl-fb-kind:hover{background:#1d2430;border-color:#3a4354}
html.dark .dl-fb-kind[aria-pressed="true"]{background:#16233c;border-color:#4b7fe0;color:#8db4ff}
html.dark .dl-fb-ta{background:#171c24;border-color:#2a3140;color:#e8edf6}
html.dark .dl-fb-ta::placeholder{color:#6d788a}
html.dark .dl-fb .dl-fb-ta:focus{border-color:#4b7fe0;box-shadow:0 0 0 3px rgba(75,127,224,.2)}
html.dark .dl-fb-count{color:#7d8798}
html.dark .dl-fb-count.is-over{color:#ff8f84}
html.dark .dl-fb-drop{background:#151a21;border-color:#2f3746}
html.dark .dl-fb-drop.is-over{background:#16233c;border-color:#4b7fe0}
html.dark .dl-fb-drop-txt{color:#98a2b3}
html.dark .dl-fb-pick{color:#8db4ff}
html.dark .dl-fb-thumb{background:#1a1f28;border-color:#2a3140}
html.dark .dl-fb-note.is-err{background:#2a1618;border-color:#5a2a2c;color:#ff9d94}
html.dark .dl-fb-note.is-ok{background:#12241a;border-color:#2c5540;color:#7fd8a4}
html.dark .dl-fb-foot{border-top-color:#242a34}
html.dark .dl-fb-btn{background:#171c24;border-color:#2a3140;color:#c3cbd9}
html.dark .dl-fb-btn:hover{background:#1d2430}
html.dark .dl-fb-send{background:linear-gradient(135deg,#2f6fe4,#1b4bb0);border-color:transparent;color:#fff}

@media (max-width:560px){
  .dl-fb{padding:12px}
  .dl-fb-card{max-height:calc(100vh - 24px)}
  .dl-fb-head{padding:18px 18px 0}
  .dl-fb-body{padding:14px 18px 4px}
  .dl-fb-foot{padding:14px 18px 16px;flex-wrap:wrap}
  .dl-fb-to{flex-basis:100%;order:2}
  .dl-fb-acts{margin-left:auto}
}

/* the help half of the rail's one "Help & feedback" door (2026-09-07e) */
.dl-fb-guide {
  display: inline-block; margin-top: 6px; padding: 0;
  background: none; border: 0; font: inherit; font-size: 12.5px; font-weight: 600;
  color: #4f46e5; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-align: left;
}
.dl-fb-guide:hover { color: #3730a3; }
.dl-fb-guide:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; border-radius: 4px; }
html.dark .dl-fb-guide { color: #a5b4fc; }
html.dark .dl-fb-guide:hover { color: #c7d2fe; }