/* components.css - popup, wire-panel, toast, error, loading, ads */
.leaflet-popup-content-wrapper { background:var(--surface) !important; border:1px solid var(--border2) !important; border-radius:10px !important; box-shadow:0 12px 48px var(--shadow) !important; padding:0 !important; }
.leaflet-popup-tip { background:var(--surface) !important; }
.leaflet-popup-content { margin:0 !important; width:280px !important; }
.leaflet-popup-close-button { color:var(--text3) !important; font-size:18px !important; top:7px !important; right:9px !important; }
.pu-img { width:100%; height:110px; object-fit:cover; border-radius:10px 10px 0 0; display:block; filter:brightness(.9); }
.pu-nimg { width:100%; height:50px; background:var(--surface2); border-radius:10px 10px 0 0; display:flex; align-items:center; justify-content:center; font-size:22px; }
.pu-body { padding:12px 13px 13px; }
.pu-badge { font-family:var(--font-mono); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; padding:2px 6px; border-radius:3px; display:inline-block; margin-bottom:7px; }
.pb-breaking { background:rgba(248,81,73,.15); color:#ff7b72; }
.pb-urgent { background:rgba(227,179,65,.15); color:#e3b341; }
.pb-info { background:rgba(63,185,80,.15); color:#56d364; }
.pb-regular { background:rgba(88,166,255,.12); color:#79c0ff; }
.pu-title { font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--white); line-height:1.35; margin-bottom:5px; }
.pu-meta { display:flex; gap:6px; font-size:10px; color:var(--text3); font-family:var(--font-mono); margin-bottom:8px; }
.pu-desc { font-size:11px; color:var(--text2); line-height:1.55; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pu-link { display:inline-flex; align-items:center; gap:4px; background:rgba(240,180,41,.1); border:1px solid rgba(240,180,41,.22); border-radius:4px; color:var(--accent); font-family:var(--font-mono); font-size:9px; letter-spacing:1px; padding:4px 9px; text-decoration:none; transition:all .2s; }
.pu-link:hover { background:rgba(240,180,41,.2); color:#fff; }
#wire-panel { width:300px; background:var(--surface); border-left:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; z-index:600; overflow:hidden; transition:width .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1), background .3s, border-color .3s; }
#wire-panel.collapsed { width:0; border-left-width:0; }
#wire-handle { position:absolute; top:50%; right:0; transform:translateY(-50%); width:22px; height:56px; background:var(--surface); border:1px solid var(--border2); border-right:none; border-radius:6px 0 0 6px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:601; transition:background .2s, right .3s cubic-bezier(.4,0,.2,1); color:var(--text3); font-size:11px; }
#wire-handle:hover { background:var(--surface2); color:var(--accent); }
#wire-panel.collapsed #wire-handle { right:-22px; border-right:1px solid var(--border2); border-radius:6px 0 0 6px; }
#wire-outer { position:relative; display:flex; flex-shrink:0; }
#wire-header { padding:10px 13px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; flex-shrink:0; white-space:nowrap; overflow:hidden; }
#wire-title { font-family:var(--font-mono); font-size:10px; letter-spacing:2px; color:var(--accent); flex:1; }
.wire-filters { display:flex; gap:4px; padding:7px 13px; border-bottom:1px solid var(--border); flex-shrink:0; flex-wrap:wrap; overflow:hidden; }
.wf { font-family:var(--font-mono); font-size:9px; letter-spacing:.8px; padding:2px 7px; border-radius:20px; border:1px solid var(--border2); background:none; color:var(--text3); cursor:pointer; transition:all .15s; text-transform:uppercase; white-space:nowrap; }
.wf:hover { color:var(--text2); }
.wf.on-all { background:rgba(240,180,41,.1); border-color:rgba(240,180,41,.3); color:var(--accent); }
.wf.on-breaking { background:rgba(248,81,73,.1); border-color:rgba(248,81,73,.3); color:var(--red); }
.wf.on-urgent { background:rgba(227,179,65,.1); border-color:rgba(227,179,65,.3); color:var(--yellow); }
.wf.on-info { background:rgba(63,185,80,.1); border-color:rgba(63,185,80,.3); color:var(--green); }
.wf.on-world { background:rgba(240,136,62,.12); border-color:rgba(240,136,62,.35); color:var(--orange); }
#wire-list { flex:1; overflow-y:auto; }
#wire-list::-webkit-scrollbar { width:3px; }
#wire-list::-webkit-scrollbar-thumb { background:var(--border2); }
.wi { padding:9px 13px; border-bottom:1px solid rgba(128,128,128,.06); cursor:pointer; transition:background .15s; display:flex; gap:9px; align-items:flex-start; }
.wi:hover { background:rgba(128,128,128,.05); }
.wi.active { background:rgba(240,180,41,.06); border-left:2px solid var(--accent); }
.wi-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; margin-top:4px; }
.wi-body { flex:1; min-width:0; }
.wi-title { font-size:12px; font-weight:500; color:var(--text); line-height:1.35; margin-bottom:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wi-meta { display:flex; align-items:center; gap:4px; font-size:9px; color:var(--text3); font-family:var(--font-mono); }
.wi-loc { background:rgba(128,128,128,.08); padding:1px 5px; border-radius:3px; }
#ad-sidebar-slot { margin:10px 12px; padding:8px; border:1px solid var(--border); border-radius:8px; background:var(--surface2); transition:background .3s,border-color .3s; }
.ad-slot-label { font-family:var(--font-mono); font-size:8px; letter-spacing:2px; color:var(--text3); text-transform:uppercase; text-align:center; margin-bottom:6px; }
.pu-ad-slot { margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,0.08); text-align:center; }
.pu-ad-label { font-family:var(--font-mono); font-size:8px; letter-spacing:2px; color:var(--text3); text-transform:uppercase; margin-bottom:6px; }
#toast-zone { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:3000; display:flex; flex-direction:column; gap:5px; pointer-events:none; min-width:260px; }
.toast { background:var(--surface2); border:1px solid var(--border2); border-radius:7px; padding:8px 13px; font-size:12px; color:var(--text); display:flex; align-items:center; gap:7px; box-shadow:0 4px 20px var(--shadow); animation:toastIn .25s ease; pointer-events:auto; }
@keyframes toastIn { from{opacity:0;transform:translateY(-7px)} to{opacity:1;transform:translateY(0)} }
.toast.out { animation:toastOut .3s ease forwards; }
@keyframes toastOut { to{opacity:0;transform:translateY(-7px)} }
.toast.error { border-left:3px solid var(--red); }
.toast.success { border-left:3px solid var(--green); }
.toast.warn { border-left:3px solid var(--yellow); }
.toast.info { border-left:3px solid var(--blue); }
#error-bar { display:none; position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:2500; background:rgba(248,81,73,.12); border:1px solid rgba(248,81,73,.32); border-radius:8px; padding:10px 13px; font-size:10px; color:#ffb4ae; font-family:var(--font-mono); letter-spacing:.5px; text-align:left; max-width:min(520px,calc(100vw - 24px)); line-height:1.45; box-shadow:0 8px 30px var(--shadow); }
#error-bar strong { color:#ff7b72; display:block; margin-bottom:3px; }
#error-bar button { margin-top:7px; border:1px solid rgba(248,81,73,.35); background:rgba(248,81,73,.12); color:#ffb4ae; border-radius:5px; padding:4px 8px; font-family:var(--font-mono); font-size:9px; cursor:pointer; letter-spacing:.8px; }
#error-bar button:hover { background:rgba(248,81,73,.2); }
#loading { position:absolute; inset:0; background:var(--overlay); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2000; gap:12px; transition:opacity .4s; backdrop-filter:blur(4px); }
#loading.hidden { opacity:0; pointer-events:none; }
.ld-spin { width:34px; height:34px; border:2px solid var(--border2); border-top-color:var(--accent); border-radius:50%; animation:iconSpin .9s linear infinite; }
.ld-txt { font-family:var(--font-mono); font-size:10px; color:var(--text3); letter-spacing:2px; text-transform:uppercase; }