/* ---------- Friends overlay, QR scanner, big-QR dialog, add-friend buttons on a profile ----------
     Reuses the shared shell (.fullscreen-overlay from main.css, .ep-bar/.ep-body/.ep-title from
     exam.css, .btn/.btn-black/.btn-outline from auth.css) — only what is specific to these
     screens is defined here. Colors/sizes come from the same :root tokens as everything else. */
  #friends-overlay, #qr-scanner-overlay{background:var(--paper); display:flex; flex-direction:column;}
  #friends-panel{flex:1; display:flex; flex-direction:column; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;}

  .fr-search-row{display:flex; gap:10px; align-items:stretch;}
  .fr-search-box{flex:1; min-width:0; position:relative;}
  .fr-search-icon{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); display:flex; pointer-events:none;}
  .fr-search-box input{
    width:100%; box-sizing:border-box; border:2px solid var(--line); background:var(--card); border-radius:999px;
    padding:13px 16px 13px 42px; font:inherit; font-size:var(--fs-md); color:var(--ink); outline:none;
  }
  .fr-search-box input:focus{border-color:var(--black);}
  .fr-scan-btn{width:auto; flex:none; padding:0 18px; white-space:nowrap; font-size:var(--fs-base);}

  .fr-section-title{margin:22px 2px 8px; font-weight:800; font-size:var(--fs-base); color:var(--ink); display:flex; align-items:center; gap:8px;}
  .fr-count{background:var(--yellow); color:var(--black); border-radius:999px; padding:1px 9px; font-size:var(--fs-xs); font-weight:800;}
  .fr-note{margin:14px 2px; color:var(--muted); font-size:var(--fs-sm); line-height:1.6;}
  .fr-list{display:flex; flex-direction:column; gap:8px;}
  .fr-row{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:10px 12px;}
  .fr-row-main{flex:1; min-width:0; display:flex; align-items:center; gap:12px; background:none; border:none; padding:0; text-align:left; font:inherit; color:inherit; cursor:pointer;}
  .fr-avatar{width:42px; height:42px; border-radius:50%; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none; color:var(--muted);}
  .fr-avatar img{width:100%; height:100%; object-fit:cover;}
  .fr-row-text{min-width:0; display:flex; flex-direction:column;}
  .fr-row-name{font-weight:800; font-size:var(--fs-base); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .fr-row-sub{font-size:var(--fs-xs); color:var(--muted); font-family:'Courier New', monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .fr-row-actions{display:flex; gap:6px; flex:none; align-items:center;}
  .fr-act{width:auto; padding:7px 14px; font-size:var(--fs-sm);}
  .fr-badge{font-size:var(--fs-xs); font-weight:700; color:var(--muted); display:inline-flex; align-items:center; gap:4px; white-space:nowrap;}
  .fr-badge-ok{color:var(--black);}
  @media (max-width:380px){
    .fr-row{flex-wrap:wrap;}
    .fr-row-actions{width:100%; justify-content:flex-end;}
  }

  /* badge on the account panel's "เพื่อน" button: friend requests waiting for an answer */
  .pf-badge{background:var(--coral); color:#fff; border-radius:999px; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; font-size:var(--fs-2xs); font-weight:800; display:inline-flex; align-items:center; justify-content:center; margin-left:2px;}
  .pf-badge[hidden]{display:none;}

  /* add-friend controls under the follow button on someone's profile */
  .pubp-friend-add{margin-top:10px;}
  .pubp-friend-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px;}
  .pubp-friend-state{flex:1 1 100%; font-size:var(--fs-sm); font-weight:700; color:var(--ink); display:flex; align-items:center; gap:6px;}
  .pubp-friend-small{width:auto; padding:7px 14px; font-size:var(--fs-sm);}

  /* camera scanner */
  .qrs-body{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; align-items:center; gap:14px; padding:16px 20px 40px; box-sizing:border-box;}
  .qrs-stage{position:relative; width:100%; max-width:420px; aspect-ratio:1/1; background:#000; border-radius:20px; overflow:hidden;}
  .qrs-stage video{width:100%; height:100%; object-fit:cover; display:block;}
  .qrs-frame{position:absolute; inset:14%; border:3px solid var(--yellow); border-radius:18px; box-shadow:0 0 0 999px rgba(0,0,0,0.38); pointer-events:none;}
  .qrs-hint{font-size:var(--fs-sm); font-weight:600; color:var(--ink); text-align:center; line-height:1.6; max-width:420px;}
  .qrs-pick{width:auto; max-width:420px; padding:10px 18px; font-size:var(--fs-sm); cursor:pointer;}

  /* tap a card's small QR → large version */
  .card-qr-modal{position:fixed; inset:0; z-index:2600; background:rgba(18,18,18,0.62); display:flex; align-items:center; justify-content:center; padding:20px;}
  .card-qr-modal-box{background:#fff; border-radius:24px; padding:22px 22px 18px; width:100%; max-width:340px; text-align:center; box-shadow:0 24px 60px -20px rgba(0,0,0,0.5);}
  .card-qr-modal-box img{width:100%; max-width:260px; height:auto; image-rendering:pixelated; display:block; margin:0 auto; border:10px solid #fff; box-sizing:border-box;}
  .card-qr-modal-no{margin-top:6px; font-family:'Courier New', monospace; font-weight:800; font-size:var(--fs-xl, 20px); letter-spacing:0.12em; color:var(--ink);}
  .card-qr-modal-name{margin-top:2px; font-weight:700; font-size:var(--fs-base); color:var(--ink);}
  .card-qr-modal-hint{margin:10px 0 14px; font-size:var(--fs-xs); color:var(--muted); line-height:1.5;}