/* Bug reports (public/bugs.js, public/owner-bugs.js). Colours are app.css's
   tokens, so both themes and a room's brand apply; logical properties only,
   so Arabic and English mirror. */

/* ── Ways in ── */
.bug-top svg{display:block}
.bug-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-block-end:14px}
.bug-bar [hidden],.bug-viewer[hidden],.bug-detail[hidden]{display:none}
.bug-viewer{color:var(--muted);font-size:13.5px}
.bug-demo{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-block-start:16px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--r);color:var(--ink-2);font-size:14px}
.bug-demo svg{flex:none;color:var(--muted)}
.bug-demo span{flex:1;min-inline-size:12ch}
.bug-bar .btn svg,.bug-demo .btn svg{flex:none}

/* ── The list ── */
.bug-list{display:grid;gap:10px}
.bug-empty{color:var(--muted);font-size:14px;margin:0}
.bug.card{padding:0;overflow:hidden}
.bug-head{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ref title tags" "ref meta tags";gap:2px 12px;align-items:center;inline-size:100%;padding:14px 16px;border:0;background:none;color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.bug-head:hover{background:var(--hover)}
.bug-head:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.bug-ref{grid-area:ref;font-family:var(--font-mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.bug-title{grid-area:title;font-weight:600;font-size:15px;overflow-wrap:anywhere}
.bug-meta{grid-area:meta;color:var(--muted);font-size:12.5px}
.bug-tags{grid-area:tags;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.bug-sev,.bug-st{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600;line-height:1.6;white-space:nowrap;background:var(--tint);color:var(--ink-3)}
.sev-critical{background:var(--bad);color:var(--on-tone)}
.sev-high{background:var(--bad-bg);color:var(--bad)}
.sev-medium{background:var(--warn-bg);color:var(--warn)}
.sev-low{background:var(--tint);color:var(--ink-3)}
.st-new{background:var(--info-bg);color:var(--info)}
.st-triaged{background:var(--warn-bg);color:var(--warn)}
.st-fixed,.st-verified{background:var(--ok-bg);color:var(--ok)}
.st-closed{background:var(--tint);color:var(--muted)}
.bug-detail{padding:0 16px 16px;border-block-start:1px solid var(--line)}
.bug-dl{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:8px 16px;margin:14px 0 0;font-size:14px}
.bug-dl dt{color:var(--muted);font-size:13px}
.bug-dl dd{margin:0;min-inline-size:0;overflow-wrap:anywhere}
.bug-dl ol{margin:0;padding-inline-start:20px;line-height:1.7}
.bug-dl a{color:var(--accent-ink);overflow-wrap:anywhere}
.bug-pre{margin:0;white-space:pre-wrap;line-height:1.7}
.bug-flist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.bug-fdl{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:14px;cursor:pointer;text-align:start}
.bug-fdl svg{flex:none;inline-size:18px;block-size:18px}
.bug-fsize{color:var(--faint);font-size:12px}
.bug-h4{font-size:13.5px;margin:16px 0 6px}
.bug-hist{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:13px}
.bug-hist li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.bug-hist time{color:var(--faint);font-variant-numeric:tabular-nums}
.bug-hist q{flex-basis:100%;quotes:none;color:var(--ink-2);padding-inline-start:10px;border-inline-start:2px solid var(--line-2)}
.bug-acts{display:grid;gap:10px;margin-block-start:14px;padding-block-start:14px;border-block-start:1px dashed var(--line-2)}
.bug-acts>.btn{justify-self:start}
.bug-reopen summary{cursor:pointer;font-size:14px;color:var(--ink-2)}
.bug-reopen[open]{display:grid;gap:8px}
.bug-reopen .btn{justify-self:start}

/* ── The dialog ── */
html.bug-lock{overflow:hidden}
.bug-modal{z-index:80;overflow:auto}
.bug-card{inline-size:min(680px,100%);max-block-size:calc(100dvh - 32px);overflow:auto;padding:22px 24px 24px;overscroll-behavior:contain}
.bug-dlg-top{display:flex;align-items:center;gap:10px}
.bug-dlg-top h3{display:flex;align-items:center;gap:8px;flex:1;margin:0;outline:0}
.bug-dlg-top h3 svg{flex:none;color:var(--muted)}
.bug-x{display:grid;place-items:center;flex:none;inline-size:36px;block-size:36px;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}
.bug-x:hover{background:var(--tint);color:var(--ink)}
.bug-x:focus-visible,.bug-sev-opt input:focus-visible+span,.bug-pick:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.bug-steps{margin:4px 0 14px;color:var(--muted);font-size:13px}
.bug-form{display:grid;gap:6px}
.bug-form[aria-busy=true]{cursor:progress}
.bug-lbl{display:block;margin-block-start:8px;font-weight:600;font-size:14px;color:var(--ink-2)}
.bug-hint{margin:0;color:var(--muted);font-size:12.5px;line-height:1.6}
.bug-err{margin:4px 0 0;color:var(--bad);font-size:13.5px;min-block-size:1px}
.bug-err:empty{display:none}
.bug-actions{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:12px}
.bug-actions .btn svg{flex:none}
.bug-discard{margin-inline-start:auto;color:var(--muted)}
.bug-ai-note{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--tint);font-size:14px;line-height:1.7}
.bug-ai-note svg{flex:none;margin-block-start:3px;color:var(--accent-ink)}
.bug-ai-note p{margin:0}
.bug-files-box{display:grid;gap:8px;margin-block-start:10px;padding:12px;border:1px dashed var(--line-2);border-radius:var(--r);transition:border-color .2s,background .2s}
.bug-files-box.dropping{border-color:var(--ink);background:var(--hover)}
.bug-pick{position:relative;justify-self:start;cursor:pointer;border-color:var(--line-2)}
.bug-pick input{position:absolute;inset:0;opacity:0;inline-size:100%;block-size:100%;cursor:pointer}
.bug-files{display:grid;gap:6px}
.bug-files:empty{display:none}
.bug-file{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:13px;min-inline-size:0}
.bug-file img{inline-size:40px;block-size:40px;object-fit:cover;border-radius:8px;background:var(--tint);flex:none}
.bug-file .ficon{display:grid;place-items:center;flex:none;inline-size:40px;block-size:40px;border-radius:8px;background:var(--tint);color:var(--muted)}
.bug-fname{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bug-fmeta{display:grid;gap:3px;flex:1;min-inline-size:0}
.bug-file .bar{display:block;block-size:4px;border-radius:99px;background:var(--tint);overflow:hidden}
.bug-file .bar i{display:block;block-size:100%;background:var(--primary);transition:inline-size .2s}
.bug-file.failed{border-color:var(--bad);background:var(--bad-bg)}
.bug-file.failed .bug-fsize{color:var(--bad)}
.bug-ctx{margin-block-start:8px;font-size:13px;color:var(--ink-2)}
.bug-ctx summary{cursor:pointer;color:var(--muted)}
.bug-ctx dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0 0}
.bug-ctx dt{color:var(--muted)}
.bug-ctx dd{margin:0;overflow-wrap:anywhere;text-align:start}
.bug-sevs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
.bug-sevs legend{padding:0;margin-block-end:6px}
.bug-sev-opt{position:relative;display:block;cursor:pointer}
.bug-sev-opt input{position:absolute;opacity:0;inline-size:1px;block-size:1px}
.bug-sev-opt span{display:grid;gap:4px;block-size:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--field);transition:border-color .2s,box-shadow .2s}
.bug-sev-opt small{color:var(--muted);font-size:12.5px;line-height:1.5}
.bug-sev-opt .bug-sev{justify-self:start}
.bug-sev-opt input:checked+span{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bug-done{display:grid;justify-items:center;gap:8px;padding:18px 4px 4px;text-align:center;outline:0}
.bug-done-ic{display:grid;place-items:center;inline-size:56px;block-size:56px;border-radius:50%;background:var(--ok-bg);color:var(--ok)}
.bug-done h4{margin:4px 0 0;font-family:var(--font-display);font-size:19px}
.bug-done p{margin:0;color:var(--ink-2);max-inline-size:44ch;line-height:1.7}
.bug-done .bug-actions{justify-content:center}

/* Phones: the dialog is the whole screen, controls a thumb's size. */
@media (max-width:640px){
  .bug-modal{padding:0;place-items:stretch}
  .bug-card{inline-size:100%;max-block-size:none;min-block-size:100dvh;border-radius:0;padding:16px 16px calc(20px + env(safe-area-inset-bottom))}
  .bug-actions .btn{flex:1 1 100%;block-size:46px}
  .bug-discard{margin-inline-start:0}
  .bug-sevs{grid-template-columns:1fr}
  .bug-head{grid-template-columns:auto 1fr;grid-template-areas:"ref tags" "title title" "meta meta";padding:12px 14px}
  .bug-tags{justify-content:flex-start}
  .bug-dl{grid-template-columns:1fr;gap:2px}
  .bug-dl dd{margin-block-end:8px}
  .bug-demo .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.bug-files-box,.bug-sev-opt span,.bug-file .bar i{transition:none}}
@media print{.bug-modal,.bug-top,.bug-demo,.bug-bar,.bug-acts{display:none}}

/* ── Owner page ── */
.own-bugs .row{margin:6px 0 10px}
.own-bug-detail td{background:var(--paper)}
.own-bug-detail .bug-dl{margin-block-start:4px}
.own-bug-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-block-start:12px}
.own-bug-form textarea{flex:1 1 260px;min-block-size:36px;padding:8px 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--field);color:var(--ink);font:inherit;font-size:13.5px}
.own-bug-form label{display:inline-flex;align-items:center;gap:6px;font-size:13px}