/* Avilo Furniture — In-app Scan (BRIEF-v3 Loop 2, L5): the scan icon in the search box and the camera sheet. */

/* Search box: the scan icon sits at the right; the clear × moves left of it while there is text. */
.search .sbox .scanbtn{right:1px;color:var(--ink)}
.search .sbox .scanbtn .i{position:static;transform:none;width:22px;height:22px;color:inherit}
.search .sbox.has-scan #qClear{right:45px}
.search .sbox.has-scan input{padding-right:50px}
.search .sbox.has-scan input:not(:placeholder-shown){padding-right:92px}
/* Phones (round 8 fix): the one-row header leaves the search box ~150–200 px, so while there is text the camera button
   steps aside and the × takes its place — the typed words keep ~100 px instead of ~20. Clear the text to scan. */
@media (max-width:599px){
  .search .sbox.has-scan input:not(:placeholder-shown){padding-right:50px}
  .search .sbox.has-scan input:not(:placeholder-shown)~.scanbtn{display:none}
  .search .sbox.has-scan input:not(:placeholder-shown)~#qClear{right:1px}
}

/* Camera sheet */
.scan-sheet .bd{padding:12px 16px 20px}
.scan{display:flex;flex-direction:column;gap:12px}
.scan-modes{display:flex;gap:8px}
.scan-modes .chip{flex:1;justify-content:center;min-height:48px;font-weight:600}
.scan-cam{position:relative;width:100%;aspect-ratio:3/4;max-height:min(56dvh,460px);border-radius:var(--r-lg);overflow:hidden;background:#0b0b0c;margin:0 auto}
.scan-cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b0b0c}
.scan-cam.off video{display:none}
.scan-frame{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.scan-frame i{position:absolute;width:30px;height:30px;border:4px solid #fff;filter:drop-shadow(0 0 3px rgba(0,0,0,.5))}
.scan-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:12px}
.scan-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:12px}
.scan-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:12px}
.scan-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:12px}
.scan-frame b{position:absolute;left:8%;right:8%;top:50%;height:2px;border-radius:2px;background:#fff;opacity:.75;animation:scanline 2.2s ease-in-out infinite}
@keyframes scanline{0%,100%{transform:translateY(-70px)}50%{transform:translateY(70px)}}
@media (prefers-reduced-motion:reduce){.scan-frame b{animation:none}}
.scan-cam-msg{position:absolute;left:12px;right:12px;bottom:12px;margin:0;padding:10px 14px;border-radius:var(--r-sm);background:rgba(0,0,0,.62);color:#fff;font-size:14px;line-height:1.4;text-align:center}
/* No camera (blocked / missing): a small note instead of the black viewfinder, so the type-the-number field stays in view. */
.scan-cam.off{aspect-ratio:auto;max-height:none;background:var(--surface-2);border:1.5px dashed var(--line)}
.scan-cam.off .scan-frame,.scan-cam.off+.scan-hint{display:none}
.scan-cam.off .scan-cam-msg{position:static;background:transparent;color:var(--ink);text-align:left;padding:14px 16px;font-size:14.5px}
.scan-torch{position:absolute;right:10px;top:10px;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:var(--r-pill);background:rgba(0,0,0,.55);color:#fff;font:600 14px var(--font)}
.scan-torch.on{background:#fff;color:#111}
.scan-hint{margin:0;text-align:center;font-weight:600;font-size:15.5px}
.scan-res-box:empty{display:none}
.scan-res{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:var(--r-sm);background:var(--surface-2)}
.scan-res>.i{flex:none;margin-top:2px}
.scan-res>img{flex:none;width:64px;height:56px;border-radius:8px;object-fit:cover}
.scan-res>div{flex:1;min-width:0}
.scan-res b{display:block;font-size:15.5px}
.scan-res small{display:block;color:var(--muted);margin-top:2px}
.scan-res p{margin:4px 0 0;font-size:14px;color:var(--ink-2)}
.scan-res.warn{background:var(--danger-soft)}
.scan-res.warn>.i{color:var(--danger)}
.scan-res-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.scan-res-btns .btn{flex:1;min-width:130px}
.scan-spin{flex:none;width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--ink);animation:scanspin .8s linear infinite}
@keyframes scanspin{to{transform:rotate(360deg)}}
.scan-type{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.scan-type .field{flex:1 1 180px;margin:0}
.scan-type input{font-size:20px;font-weight:600;letter-spacing:.5px}
.scan-type .btn{flex:none}
.scan-type .subtle{flex-basis:100%;margin:0;font-size:13px}
/* R15-1 #18: the word "Scan" under the scan icon */
.search .sbox .scanbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:1}
.search .sbox .scanbtn .i{width:19px;height:19px}
.search .sbox .scanbtn .scanword{font-size:9.5px;font-weight:700;letter-spacing:.02em;margin-top:1px}