/* Photos / GIFs / stickers: preview tray, buttons, picker, display. Shared by the Trader Space and AT Messenger (fallback colours so it works on both pages). */
/* ── Attachments in comments / replies: photo, GIF, sticker (attach.js) ── */
.nfp-cm .nfp-cf.nfa-form{flex-wrap:wrap;align-items:center;}
.nfa-form > input:not([type=file]){flex:1 1 140px;min-width:0;}
.nfa-btns{display:inline-flex;gap:2px;align-items:center;}
.nfa-b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:none;border:0;color:var(--at-muted,#8fb0cc);cursor:pointer;padding:0;}
.nfa-b:hover,.nfa-b:focus-visible{background:rgba(0,213,242,.14);color:var(--at-cyan,#00d5f2);outline:none;}
.nfa-b[hidden]{display:none;}
.nfa-tray{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;}
.nfa-tray[hidden]{display:none;}
.nfa-msg{flex:1 1 100%;font-size:12px;color:#ffb4b4;}
.nfa-th{position:relative;width:68px;height:68px;border-radius:10px;overflow:hidden;background:rgba(2,11,22,.6);border:1px solid var(--at-border,rgba(56,164,226,.30));display:grid;place-items:center;}
.nfa-th img{width:100%;height:100%;object-fit:cover;display:block;}
.nfa-gt{width:auto;min-width:68px;max-width:120px;}
.nfa-gt img{object-fit:contain;}
.nfa-ph{color:var(--at-muted,#8fb0cc);}
.nfa-tag{position:absolute;left:4px;bottom:4px;font-size:9px;font-weight:700;letter-spacing:.04em;background:rgba(0,0,0,.65);color:#fff;border-radius:4px;padding:1px 4px;}
.nfa-rm{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;}
/* shown inside a comment */
.nfa-att{margin:4px 0 2px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:100%;}
.nfa-ph-g{display:grid;gap:3px;max-width:260px;width:100%;border-radius:12px;overflow:hidden;}
.nfa-ph-g.n1{grid-template-columns:1fr;}
.nfa-ph-g.n2,.nfa-ph-g.n3,.nfa-ph-g.n4{grid-template-columns:1fr 1fr;}
.nfa-pi{display:block;padding:0;border:0;background:#071a30;cursor:zoom-in;line-height:0;}
.nfa-ph-g.n1 .nfa-pi img{width:100%;height:auto;max-height:300px;object-fit:cover;display:block;}
.nfa-ph-g:not(.n1) .nfa-pi{aspect-ratio:1/1;}
.nfa-ph-g:not(.n1) .nfa-pi img{width:100%;height:100%;object-fit:cover;display:block;}
.nfa-ph-g.n3 .nfa-pi:first-child{grid-column:1/-1;aspect-ratio:2/1;}
.nfa-gf img{display:block;max-width:min(240px,100%);height:auto;max-height:260px;border-radius:12px;}
.nfa-sk img{display:block;max-width:min(150px,100%);height:auto;max-height:150px;}
.nfp-replies .nfa-ph-g{max-width:210px;}
.nfa-lb{position:fixed;inset:0;z-index:6000;background:rgba(2,8,16,.92);display:grid;place-items:center;}
.nfa-lb[hidden]{display:none;}
.nfa-lb img{max-width:94vw;max-height:90vh;object-fit:contain;border-radius:6px;}
.nfa-lx{position:absolute;top:12px;right:16px;font-size:30px;line-height:1;background:none;border:0;color:#fff;cursor:pointer;}
.nfa-ln{position:absolute;top:50%;transform:translateY(-50%);font-size:38px;background:rgba(255,255,255,.12);border:0;color:#fff;width:44px;height:64px;border-radius:10px;cursor:pointer;}
.nfa-ln.p{left:10px;}.nfa-ln.n{right:10px;}.nfa-ln[hidden]{display:none;}
/* the picker */
.nfa-pk{position:fixed;z-index:5600;display:flex;flex-direction:column;background:#0b2340;border:1px solid var(--at-border-strong,rgba(56,164,226,.45));border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden;}
.nfa-pk[hidden]{display:none;}
.nfa-pk-h{display:flex;gap:8px;padding:10px 10px 6px;}
.nfa-q{flex:1;min-width:0;background:rgba(2,11,22,.55);border:1px solid var(--at-border,rgba(56,164,226,.30));border-radius:999px;padding:8px 14px;color:var(--at-text,#e6f1fb);font:400 14px inherit;font-family:inherit;}
.nfa-q:focus{outline:2px solid rgba(0,213,242,.55);border-color:transparent;}
.nfa-pk-x{width:34px;height:34px;border-radius:50%;border:0;background:none;color:var(--at-muted,#8fb0cc);cursor:pointer;display:grid;place-items:center;}
.nfa-tabs{display:flex;gap:6px;padding:0 10px 6px;}
.nfa-tabs button{flex:1;padding:6px 0;border-radius:999px;border:1px solid var(--at-border,rgba(56,164,226,.30));background:none;color:var(--at-muted,#8fb0cc);font-weight:600;font-size:13px;cursor:pointer;}
.nfa-tabs button.on{background:rgba(0,213,242,.16);color:var(--at-cyan,#00d5f2);border-color:rgba(0,213,242,.5);}
.nfa-chips{display:flex;gap:6px;overflow-x:auto;padding:0 10px 6px;scrollbar-width:none;}
.nfa-chips::-webkit-scrollbar{display:none;}
.nfa-chips button{flex:none;padding:4px 10px;border-radius:999px;border:1px solid var(--at-border,rgba(56,164,226,.30));background:rgba(2,11,22,.4);color:var(--at-text,#e6f1fb);font-size:12px;cursor:pointer;}
.nfa-lbl{padding:0 12px 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--at-muted,#8fb0cc);}
.nfa-grid{flex:1;min-height:120px;overflow-y:auto;overscroll-behavior:contain;padding:0 10px 6px;-webkit-overflow-scrolling:touch;}
.nfa-cols{display:flex;gap:6px;align-items:flex-start;}
.nfa-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.nfa-i{display:block;width:100%;margin:0;padding:0;border:0;border-radius:10px;overflow:hidden;background:rgba(2,11,22,.6);cursor:pointer;line-height:0;min-height:44px;}
.nfa-i img{width:100%;height:auto;display:block;}
.nfa-i:focus-visible{outline:2px solid var(--at-cyan,#00d5f2);}
.nfa-st{text-align:center;padding:4px 12px;font-size:13px;color:var(--at-muted,#8fb0cc);}
.nfa-st p{margin:4px 0;}
.nfa-retry{margin:4px 0 6px;padding:6px 14px;border-radius:999px;border:1px solid var(--at-border,rgba(56,164,226,.30));background:rgba(0,213,242,.12);color:var(--at-text,#e6f1fb);cursor:pointer;}
.nfa-sp{display:inline-block;width:18px;height:18px;border:2px solid rgba(0,213,242,.25);border-top-color:var(--at-cyan,#00d5f2);border-radius:50%;animation:nfb-spin .8s linear infinite;}
.nfa-pw{padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));text-align:center;font-size:11px;color:var(--at-muted,#8fb0cc);border-top:1px solid var(--at-border,rgba(56,164,226,.30));}
.nfa-pw b{color:#fff;letter-spacing:.04em;}
@media (max-width:640px){
  .nfa-pk.sheet{left:0;right:0;bottom:0;top:auto;width:auto;height:62vh;max-height:calc(100dvh - 70px);border-radius:18px 18px 0 0;}
  .nfa-q{font-size:16px;}
  .nfa-b{width:32px;height:32px;}
  .nfa-form > input:not([type=file]){flex:1 1 60px;}
  .nfa-form .nfp-btn{padding:8px 12px;}
  .nfa-btns{gap:0;}
  .nfa-ph-g{max-width:230px;}
}
/* the "+" menu used by Messenger and the floating chat window */
.nfa-pm{position:fixed;z-index:5700;min-width:190px;padding:6px;background:#0b2340;border:1px solid var(--at-border-strong,rgba(56,164,226,.45));border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.55);}
.nfa-pm button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-radius:9px;padding:9px 12px;color:var(--at-text,#e6f1fb);font-size:14px;cursor:pointer;}
.nfa-pm button:hover,.nfa-pm button:focus-visible{background:rgba(0,213,242,.16);outline:none;}
.nfa-pm svg{color:var(--at-cyan,#00d5f2);flex:none;}
.nfa-lb{touch-action:none;overscroll-behavior:contain;}
.nfa-lb img{touch-action:none;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none;}


/* long-press sheet (phones) */
.nfa-lp,.nfa-lp *:not(input):not(textarea){-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important;}
.nfa-lp-on{position:relative;z-index:5810;pointer-events:none;transform:scale(1.02);filter:drop-shadow(0 5px 10px rgba(0,0,0,.42));transition:transform .14s ease-out;}
.nfa-sh,.nfa-sh *,html.nfa-shn,html.nfa-shn *{-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important;}
.nfa-sh{position:fixed;inset:0;z-index:5800;}
.nfa-sh-hit{position:fixed;z-index:5805;}

.nfa-sh-bk{position:absolute;inset:0;background:rgba(2,10,22,.58);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);}
.nfa-sh-rx,.nfa-sh-mn{position:fixed;z-index:5820;background:#0b2340;border:1px solid var(--at-border-strong,rgba(56,164,226,.45));box-shadow:0 14px 40px rgba(0,0,0,.55);animation:nfaSh .14s ease-out;}
.nfa-sh-rx{display:flex;gap:2px;padding:6px 8px;border-radius:30px;}
.nfa-sh-rx button{width:42px;height:42px;font-size:26px;line-height:1;background:none;border:0;border-radius:50%;cursor:pointer;padding:0;}
.nfa-sh-rx button.on{background:rgba(0,213,242,.22);}
.nfa-sh-mn{min-width:210px;padding:6px;border-radius:16px;}
.nfa-sh-mn button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:13px 14px;color:var(--at-text,#e6f1fb);font-size:16px;cursor:pointer;}
.nfa-sh-mn button:active{background:rgba(0,213,242,.16);}
.nfa-sh-mn button svg{width:20px;height:20px;flex:none;color:var(--at-cyan,#00d5f2);}
.nfa-sh-mn button.dg,.nfa-sh-mn button.dg svg{color:#ff6b7d;}
@keyframes nfaSh{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* message bubbles: a very light raised (embossed) look, like the Bubbles page */
body .msg-bubble,#atdock .atd-b,.nfs-m{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 3px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.24);text-shadow:0 1px 1px rgba(0,0,0,.28);}
#atdock .atd-m.me .atd-b{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 3px rgba(0,30,110,.35),0 3px 10px rgba(0,100,255,.32);}

/* swipe a message to the right to reply (phones) */
.nfa-sw .atd-m,.nfa-sw .nfs-m{touch-action:pan-y;}
.nfa-swing{transition:none!important;}
.nfa-swarm{filter:brightness(1.12);}