/* Quick review (js/quick-review.js): a draft clip's panel on Drafts. Beside the cards on a wide screen (the page makes
   room), over them on smaller ones, the whole screen on a phone. Below the ⋮ menu (60), above the selection bar (40). */
.qr{position:fixed;top:0;right:0;bottom:0;z-index:45;width:400px;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line-2);box-shadow:-18px 0 44px rgba(0,0,0,.22);animation:qr-in .25s var(--ease) both}
.qr[hidden],.qr-shade[hidden]{display:none}
@keyframes qr-in{from{transform:translateX(24px);opacity:0}}
@media (prefers-reduced-motion:reduce){ .qr{animation:none} }
.qr-head{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 18px;border-bottom:1px solid var(--line)}
.qr-head>.ms{font-size:21px;color:var(--muted)}
.qr-head h2{flex:1;margin:0;font-size:1.02rem}
.qr-body{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.qr-media{position:relative;flex:none;aspect-ratio:1/1;max-height:46vh;border-radius:14px;overflow:hidden;background:#0b0b10}
.qr-blur{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(18px) brightness(.5)}
.qr-media video{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.qr-busy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(10,10,14,.7);color:#fff;font-size:.86rem}
.qr-busy[hidden]{display:none}
.qr-titlerow{display:flex;align-items:flex-start;gap:10px}
.qr-titlerow h3{flex:1;min-width:0;margin:0;font-size:1.12rem;line-height:1.3;overflow-wrap:anywhere}
.qr-len{flex:none;font:600 .74rem/1 var(--mono);padding:5px 7px;border-radius:7px;background:var(--raised);color:var(--ink);margin-top:2px}
.qr-from{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--muted);min-width:0}
.qr-from .ms{font-size:17px;flex:none;color:var(--faint)}
.qr-from span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qr-status{display:flex;flex-wrap:wrap;gap:6px}
.qr-plat{display:inline-flex;align-items:center;gap:5px;font:600 .72rem/1 var(--sans);padding:5px 8px;border-radius:7px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.qr-plat .ms{font-size:15px}.qr-plat .ms.yt{color:#e5484d}.qr-plat .ms.ig{color:#d6336c}
.qr-plat.bad{color:var(--bad);border-color:var(--bad-soft);background:var(--bad-soft)}
.qr-edit{display:flex;flex-direction:column;gap:12px}
.qr-sec{padding-top:12px;border-top:1px solid var(--line)}
.qr-sec .looks{margin-top:0}
.qr-wait{margin:0;color:var(--muted);font-size:.86rem}
.qr-ai{padding:12px 14px;border-radius:12px;border:1px dashed var(--line-2);background:var(--raised)}
.qr-ai-head{display:flex;align-items:center;gap:8px}
.qr-ai-head .ms{font-size:18px;color:var(--primary-text)}
.qr-ai-head b{flex:1;font-size:.9rem}
.qr-ai p{margin:6px 0 0;font-size:.8rem;color:var(--muted);line-height:1.4}
.qr-foot{flex:none;display:grid;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--line);background:var(--panel)}
.qr-foot .primary,.qr-foot .ghost{justify-content:center;gap:8px;width:100%}
.qr-foot-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qr-foot a[aria-disabled=true]{opacity:.5;pointer-events:none}
/* the open clip's card */
.clip.qr-on{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
/* wide screens: the page makes room for the panel; smaller: a shade behind it */
.qr-shade{position:fixed;inset:0;z-index:44;background:rgba(8,10,18,.5)}
@media (min-width:1280px){
  body.qr-open .main{padding-right:calc(400px + clamp(16px,2.5vw,32px))}
  .qr-shade{display:none}
  body.qr-open .cl-dock{left:calc(50% - 200px)}
}
@media (max-width:560px){
  .qr{width:100%;border-left:0}
  .qr-body{padding:14px 16px}
  .qr-foot{padding:10px 16px 14px}
}
.qr-foot a.ghost,.qr-foot a.ghost:hover{color:var(--ink);text-decoration:none}
/* Save / Cancel: shows while something is changed (nothing is saved before) */
.qr-save{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-radius:12px;background:var(--cap-soft)}
.qr-save[hidden]{display:none}
.qr-save>span{flex:1;min-width:0;font-size:.82rem;font-weight:600}
.qr-save .ghost,.qr-save .primary{width:auto;padding:8px 14px;gap:6px}
.qr-save .ms{font-size:18px}
/* while there are unsaved changes, Save is the one red button */
.qr.dirty #qrEditBtn{background:none;color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
/* Short / Thumbnail switch over the player (js/short-details.js sdView) */
.qr-thumb{position:relative;display:block;width:100%;height:100%;object-fit:contain}
.qr-thumb[hidden],.qr-media video[hidden],.qr-view[hidden]{display:none}
.qr-view,.ed-view{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:2;display:flex;gap:2px;padding:3px;border-radius:10px;background:rgba(10,10,14,.62);backdrop-filter:blur(6px)}
.qr-view button,.ed-view button{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:rgba(255,255,255,.75);font:inherit;font-size:.78rem;font-weight:600;padding:5px 10px;border-radius:7px;cursor:pointer}
.qr-view .ms,.ed-view .ms{font-size:16px}
.qr-view button[aria-pressed=true],.ed-view button[aria-pressed=true]{background:rgba(255,255,255,.18);color:#fff}
.qr-view button:focus-visible,.ed-view button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.sd-hint{display:block;margin-top:6px;font-size:.76rem;color:var(--warn);font-weight:600}
.sd-hint[hidden]{display:none}
/* the thumbnail's text and Try again (js/short-details.js) */
.sd-tt{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.sd-tt .small-lab{margin:0}
.sd-tt input{font-size:.88rem;padding:8px 10px}
.sd-tt .sd-l2{font-weight:700}
.sd-again-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.sd-again-row small{font-size:.76rem;color:var(--muted)}
.sd-again{gap:6px}
.sd-again .ms{font-size:17px}
.sd-again[aria-pressed=true]{border-color:var(--primary);color:var(--primary-text);background:var(--primary-soft)}