/* qj-mobile (2026-11-13, mobile upgrade Worker 2): share button / toast /
   reading progress bar / ask bottom-sheet snap states. Loaded site-wide
   (own templates via qjf_shared_css, article/sub pages via wp_enqueue). */

/* ---------- reading progress (item 2): 2-3px brand-blue bar, top:0 so it
   sits above the sticky header instead of fighting it. ---------- */
.qj-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;pointer-events:none;background:transparent}
.qj-progress-fill{height:100%;background:#1C60F3;transform:scaleX(0);transform-origin:0 50%}
.qj-progress-native .qj-progress-fill{animation:qj-progress-fill linear both;animation-timeline:scroll();transform:none}
@keyframes qj-progress-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){.qj-progress{display:none}}

/* ---------- share (item 1) ---------- */
.qj-share-btn{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 14px;border:1px solid #B9CCF5;border-radius:999px;background:#EEF3FE;color:#1C60F3;font-size:14px;cursor:pointer}
.qj-share-btn svg{flex:none}
.qj-share-btn:active{transform:scale(.96)}
.qj-share-row{display:flex;justify-content:flex-end;margin:16px 0 0}
.qj-card-share{position:absolute;top:14px;right:66px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#1C60F3;font-size:20px;line-height:1;box-shadow:0 2px 8px rgba(20,40,80,.20);cursor:pointer;padding:0}
.qj-card-share:active{transform:scale(.88)}
.qj-toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,16px);z-index:10005;max-width:calc(100vw - 48px);padding:11px 16px;border-radius:999px;background:rgba(22,26,35,.92);color:#FFF;font-size:14px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;text-align:center}
.qj-toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- ask bottom sheet (item 3): snap states, mobile only.
   Desktop keeps the centred card; the sheet logic in ask.js only runs
   under max-width:640px. Drag handle is hidden on desktop. ---------- */
.qj-ask-sheet-handle{display:none}
@media (max-width:640px){
.qj-ask-sheet-handle{display:flex;align-items:center;justify-content:center;flex:none;width:100%;height:28px;padding:0;border:0;background:transparent;cursor:grab;touch-action:none}
.qj-ask-sheet-handle:active{cursor:grabbing}
.qj-ask-sheet-handle span{width:40px;height:5px;border-radius:999px;background:#C9D2DE}
.qj-ask-chat[data-qj-sheet]{height:var(--qj-sheet-h,62dvh);max-height:92dvh;transition:height .25s ease}
.qj-ask-chat[data-qj-dragging]{transition:none}
.qj-ask-chat[data-qj-sheet="peek"]{--qj-sheet-h:40dvh}
.qj-ask-chat[data-qj-sheet="half"]{--qj-sheet-h:62dvh}
.qj-ask-chat[data-qj-sheet="full"]{--qj-sheet-h:88dvh}
.qj-ask-chat[data-qj-sheet="peek"] .qj-ask-chat-msgs{min-height:0}
.qj-ask-chat[data-qj-sheet="peek"] .qj-ask-chat-hot{display:none}
}