:root{
  --bg:#080b11;--bg-grad:radial-gradient(1100px 600px at 50% -15%,rgba(59,130,246,.10),transparent 70%);
  --surface:rgba(255,255,255,.035);--surface2:rgba(255,255,255,.06);--hair:rgba(255,255,255,.07);
  --txt:#eef2f8;--mut:#8c99ad;--mut2:#5c6b82;
  --accent:#4f8cff;--accent2:#7aa9ff;
  --person:#ff6b6e;--vehicle:#ffb648;--animal:#3ddc84;--package:#b89cff;--other:#8c99ad;
  --ok:#3ddc84;--red:#ff5a5d;
  --shadow:0 12px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* Lock the page so it can't be dragged side-to-side (the whole screen was panning horizontally on
   iOS). overflow-x:hidden clips any stray overflow; overscroll-behavior-x:none kills the horizontal
   rubber-band. Vertical scroll + the horizontal chip scrollers (their own overflow-x) still work. */
html{overflow-x:hidden;width:100%;max-width:100%;overscroll-behavior-x:none}
/* NOTE: no background-attachment:fixed here — the fixed gradient is drawn by body::before instead.
   background-attachment:fixed causes bad scroll JANK on desktop Safari (iOS ignores it); this keeps
   scrolling smooth everywhere while the gradient still shows via the fixed ::before layer. */
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--txt);overscroll-behavior-x:none;overflow-x:hidden;width:100%;max-width:100%;-webkit-font-smoothing:antialiased}
.screen{min-height:100vh;min-height:100dvh}
.hidden{display:none!important}
.sec-title{color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:1.8px;font-weight:600;margin:6px 2px 12px}

/* login */
#login{display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:350px;background:var(--surface);border:1px solid var(--hair);border-radius:26px;padding:42px 28px;text-align:center;box-shadow:var(--shadow);backdrop-filter:blur(20px)}
.logo{font-size:56px}
.login-card h1{font-size:24px;margin-top:12px;letter-spacing:5px;font-weight:800}
.login-card .sub{color:var(--mut);font-size:11.5px;margin-bottom:28px;text-transform:uppercase;letter-spacing:2.5px}
.login-card input{width:100%;padding:15px;margin-bottom:12px;background:rgba(0,0,0,.25);border:1px solid var(--hair);border-radius:14px;color:var(--txt);font-size:16px}
.login-card input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,140,255,.15)}
.login-card button{width:100%;padding:15px;background:linear-gradient(180deg,var(--accent2),var(--accent));color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:700;margin-top:6px;box-shadow:0 8px 24px rgba(79,140,255,.35)}
.err{color:var(--red);font-size:13px;margin-top:12px;min-height:16px}

/* header */
header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:15px 18px;padding-top:max(15px,env(safe-area-inset-top));background:rgba(8,11,17,.7);backdrop-filter:blur(20px);border-bottom:1px solid var(--hair);z-index:20}
.brand{font-weight:800;font-size:16px;letter-spacing:2.5px;display:flex;align-items:center;gap:8px}
.brand-ico{font-size:18px}
.hdr-right{display:flex;gap:9px;align-items:center}
.live-pill{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:1px;color:var(--ok);background:rgba(61,220,132,.12);border:1px solid rgba(61,220,132,.22);padding:6px 11px;border-radius:30px}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.icon-btn{background:var(--surface2);border:1px solid var(--hair);color:var(--txt);min-width:38px;height:38px;padding:0 11px;border-radius:13px;font-size:15px;transition:.15s}
.icon-btn:active{transform:scale(.92)}
.banner{margin:12px 18px;padding:12px 15px;border-radius:14px;font-size:13px;background:rgba(61,220,132,.1);border:1px solid rgba(61,220,132,.2);color:#a9ecc4}
.view{padding:16px 18px 100px}

/* AI summary hero */
.ai-hero{position:relative;border-radius:24px;padding:22px;margin-bottom:16px;overflow:hidden;
  background:linear-gradient(135deg,rgba(79,140,255,.16),rgba(122,169,255,.04));border:1px solid rgba(79,140,255,.18)}
.ai-hero.alert{background:linear-gradient(135deg,rgba(255,90,93,.18),rgba(255,90,93,.04));border-color:rgba(255,90,93,.28)}
/* OUTAGE/DEGRADED state for the Security Summary — amber, matched to #outageBanner so the
   family reads it as "system issue, not an alarm". NEVER shows alongside "all clear" text. */
.ai-hero.degraded{background:linear-gradient(135deg,rgba(249,168,37,.16),rgba(249,168,37,.04));border-color:rgba(249,168,37,.32)}
.ai-hero.degraded .ah-badge{color:#fdba74;background:rgba(249,168,37,.16)}
.ai-hero.degraded .ah-status{color:#fdba74}
.ai-hero.degraded .ah-text{color:#f7d8a8;font-weight:500}
/* tappable sentence in the security summary → opens that event's clip */
.sum-link{text-decoration:underline;text-decoration-color:rgba(122,169,255,.55);text-underline-offset:2px;color:#cfe0ff;cursor:pointer}
.sum-link:active{color:#fff;text-decoration-color:#7aa9ff}
.ai-hero .ah-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ah-badge{font-size:10px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent2);background:rgba(79,140,255,.15);padding:5px 10px;border-radius:20px}
.ai-hero.alert .ah-badge{color:var(--red);background:rgba(255,90,93,.15)}
.ah-status{font-size:13px;font-weight:700;color:var(--mut);margin-left:auto}
.ah-text{font-size:15.5px;line-height:1.55;font-weight:450}
.ah-skeleton{height:14px;background:linear-gradient(90deg,var(--surface),var(--surface2),var(--surface));background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:7px;margin:7px 0}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* stat pills (less boxy — soft glowing tiles) */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px}
.stat-card{background:var(--surface);border:1px solid var(--hair);border-radius:20px;padding:16px 12px;text-align:center;position:relative;transition:.2s}
.stat-card:active{transform:scale(.97)}
.stat-card[role="button"]{cursor:pointer}
.stat-card .sc-ico{font-size:21px;filter:saturate(1.2)}
.stat-card .sc-n{font-size:28px;font-weight:800;margin-top:5px;line-height:1}
.stat-card .sc-l{color:var(--mut);font-size:11px;margin-top:5px;text-transform:uppercase;letter-spacing:.6px}
.stat-card{overflow:hidden}
.stat-card.person::after,.stat-card.vehicle::after,.stat-card.animal::after{content:"";position:absolute;left:18%;right:18%;bottom:10px;height:3px;border-radius:3px}
.stat-card.person::after{background:var(--person)}
.stat-card.vehicle::after{background:var(--vehicle)}
.stat-card.animal::after{background:var(--animal)}
.stat-card{padding-bottom:20px}

/* panels — softer */
.panel{background:var(--surface);border:1px solid var(--hair);border-radius:22px;padding:16px;margin-bottom:16px}
.panel-h{color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:1.6px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between}
.panel-h.pad{padding:16px 18px 6px;margin:0}

/* chart — sleek gradient bars. barwrap is full-height so (a) bar % heights
   resolve against a real track and never overflow into the stat cards, and
   (b) the whole column is a tap target, not just the colored bar. */
.chart{display:flex;align-items:stretch;gap:6px;height:112px;overflow:hidden}
.barwrap{flex:1;height:112px;display:flex;flex-direction:column;align-items:center;cursor:pointer;min-width:0}
body.easy .chart,body.easy .barwrap{height:132px}
.bartrack{flex:1;width:100%;display:flex;align-items:flex-end;min-height:0;overflow:hidden}
.barwrap .bar{width:100%;background:linear-gradient(180deg,var(--accent2),rgba(79,140,255,.3));border-radius:6px 6px 2px 2px;min-height:4px;transition:height .4s,opacity .15s}
.barwrap:active .bar{opacity:.6}
.bar.empty{background:var(--surface2)}
.bar.has{box-shadow:0 0 12px rgba(79,140,255,.5)}
.barlbl{height:16px;line-height:16px;font-size:9px;color:var(--mut2);flex-shrink:0;text-align:center}

/* event rows — softer, no hard borders */
.evrow{display:flex;align-items:center;gap:12px;padding:11px;border-radius:16px;cursor:pointer;transition:.15s}
.evrow:active{background:var(--surface2)}
.evrow+.evrow{margin-top:4px}
.evrow .thumb{width:78px;height:56px;border-radius:12px;background:var(--surface2) center/cover no-repeat;flex-shrink:0}
.evrow .thumb.noimg{display:flex;align-items:center;justify-content:center;font-size:18px}
.ev-main{flex:1;min-width:0}
.ev-cam{font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}
.ev-desc{color:var(--mut);font-size:12.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-time{color:var(--mut2);font-size:11px;flex-shrink:0;white-space:nowrap}
.cat-ico{font-size:14px}
.feed{display:flex;flex-direction:column;gap:10px}
.feed .evrow{background:var(--surface);border:1px solid var(--hair)}
.feed .evrow .thumb{width:104px;height:70px}

.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:4px}
.chip.person{background:rgba(255,107,110,.16);color:var(--person)}
.chip.vehicle{background:rgba(255,182,72,.16);color:var(--vehicle)}
.chip.animal{background:rgba(61,220,132,.16);color:var(--animal)}
.chip.package{background:rgba(184,156,255,.16);color:var(--package)}
/* intel signal chips — shown on event detail when the AI description reveals known vehicle / repeat visitor / suspicious behaviour */
.intel-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.intel-chip{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px;cursor:help;display:inline-flex;align-items:center;gap:4px}
.intel-chip.iv{background:rgba(255,182,72,.18);color:#f5b942}   /* amber — known vehicle */
.intel-chip.ir{background:rgba(80,160,255,.18);color:#60b0ff}   /* blue — repeat visitor */
.intel-chip.is{background:rgba(255,80,80,.18);color:#ff6060}    /* red — suspicious */

/* search */
.search-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.search-row{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:3px 6px 3px 12px}
.search-ico{font-size:14px;opacity:.7}
.search-row input{flex:1;background:none;border:none;color:var(--txt);font-size:15px;padding:10px 0;outline:none}
.search-go{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#fff;border:none;border-radius:11px;padding:9px 14px;font-size:13px;font-weight:700;flex-shrink:0}
.search-dates{display:flex;align-items:stretch;gap:8px}
.datef{flex:1;display:flex;flex-direction:column;gap:1px;background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:6px 11px;min-width:0}
.datef-lbl{font-size:9px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent2)}
.datef input[type=date]{background:none;border:none;color:var(--txt);font-size:14px;outline:none;min-width:0;width:100%;color-scheme:dark}
.search-dates .fchip{align-self:center}

.filter-row{display:flex;gap:9px;margin-bottom:14px;overflow-x:auto}
.fchip{white-space:nowrap;font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:30px;background:var(--surface);border:1px solid var(--hair);color:var(--mut);transition:.15s}
.fchip.active{background:linear-gradient(180deg,var(--accent2),var(--accent));border-color:transparent;color:#fff}

/* cameras */
.cam-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding:0 18px}
.cam-tile{position:relative;background:var(--surface);border:1px solid var(--hair);border-radius:20px;overflow:hidden;transition:.2s}
.cam-tile:active{transform:scale(.98)}
.cam-tile img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface2)}
.cam-tile .noimg-ph{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--mut);font-size:12px;background:var(--surface2)}
.cam-live{position:absolute;top:9px;left:9px;font-size:9px;font-weight:800;letter-spacing:.5px;color:#fff;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);padding:4px 8px;border-radius:8px;display:flex;align-items:center;gap:4px}
.cam-live .live-dot{width:5px;height:5px}
.cam-tile-info{padding:11px 13px}
.cam-tile-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cam-tile-sub{color:var(--mut);font-size:11px;margin-top:3px}
/* 7-day battery sparkline inside camera tile footer */
.cam-tile-spark{margin-top:5px;line-height:0;height:14px}.cam-tile-spark:empty{height:0;margin-top:0}
.cam-spark-svg{display:block}
.tile-cat{position:absolute;top:9px;right:9px;font-size:15px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.8))}

.empty{text-align:center;padding:80px 24px;color:var(--mut)}
.empty-ico{width:68px;height:68px;margin:0 auto 18px;border-radius:50%;background:rgba(61,220,132,.12);color:var(--ok);display:flex;align-items:center;justify-content:center;font-size:30px}

/* tabbar */
.tabbar{position:fixed;bottom:0;left:0;right:0;display:flex;background:rgba(8,11,17,.78);backdrop-filter:blur(20px);border-top:1px solid var(--hair);padding-bottom:env(safe-area-inset-bottom);z-index:20}
.tab{flex:1;background:none;border:none;color:var(--mut);padding:11px 0 13px;font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:4px;transition:.15s}
.tab span{font-size:19px}
.tab.active{color:var(--accent2)}

/* chat FAB + panel — glowing, pulsing "intelligent" orb */
.fab{position:fixed;right:18px;bottom:118px;width:58px;height:58px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;font-size:24px;z-index:30;transition:transform .2s;animation:fabPulse 2.6s ease-in-out infinite}
.fab::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));filter:blur(10px);opacity:.55;z-index:-1;animation:fabGlow 2.6s ease-in-out infinite}
.fab:active{transform:scale(.9)}
@keyframes fabPulse{0%,100%{box-shadow:0 8px 26px rgba(79,140,255,.45),0 0 0 0 rgba(79,140,255,.5)}50%{box-shadow:0 8px 30px rgba(79,140,255,.6),0 0 0 12px rgba(79,140,255,0)}}
@keyframes fabGlow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.8;transform:scale(1.12)}}
.chat{position:fixed;inset:0;background:rgba(8,11,17,.6);backdrop-filter:blur(8px);z-index:70;display:flex;flex-direction:column;justify-content:flex-end}
.chat-sheet{background:var(--bg);background-image:var(--bg-grad);border-top-left-radius:26px;border-top-right-radius:26px;border-top:1px solid var(--hair);max-height:85vh;display:flex;flex-direction:column;box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.chat-head{display:flex;align-items:center;gap:10px;padding:18px;border-bottom:1px solid var(--hair)}
.chat-head .ai-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));display:flex;align-items:center;justify-content:center;font-size:18px}
.chat-head h3{font-size:16px}.chat-head p{font-size:11px;color:var(--mut)}
.chat-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:200px}
.msg{max-width:82%;padding:11px 14px;border-radius:18px;font-size:14px;line-height:1.45}
.msg.user{align-self:flex-end;background:linear-gradient(180deg,var(--accent2),var(--accent));color:#fff;border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start;background:var(--surface2);border:1px solid var(--hair);border-bottom-left-radius:5px}
.chat-suggest{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 12px;align-items:center}
.sug-label{width:100%;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut2);margin-bottom:2px}
.sug{font-size:13px;padding:9px 14px;border-radius:20px;background:var(--surface2);border:1px solid var(--hair);color:var(--txt);transition:.15s}
.sug:active{transform:scale(.96);border-color:var(--accent)}
.chat-input{display:flex;gap:9px;padding:14px 16px;padding-bottom:max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--hair)}
.chat-input input{flex:1;padding:13px 16px;border-radius:24px;background:var(--surface2);border:1px solid var(--hair);color:var(--txt);font-size:15px}
.chat-input input:focus{outline:none;border-color:var(--accent)}
.chat-input button{width:46px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;font-size:17px}

/* detail */
.detail{position:fixed;inset:0;background:var(--bg);background-image:var(--bg-grad);z-index:60;overflow-y:auto}
.detail-top{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;padding-top:max(14px,env(safe-area-inset-top));background:rgba(8,11,17,.7);backdrop-filter:blur(20px);border-bottom:1px solid var(--hair);font-weight:700}
.detail-top .icon-btn{font-size:20px}
.detail-body{padding:18px;padding-bottom:40px}
.detail-body>img{width:100%;border-radius:18px;background:var(--surface2);aspect-ratio:16/9;object-fit:cover}
.detail-body>video{width:100%;border-radius:18px;background:#000;aspect-ratio:16/9;object-fit:contain;display:block}
.dbtn.busy{opacity:.6;pointer-events:none}
#detailMeta{margin:16px 0}
.dm-desc{font-size:15px;line-height:1.5}
.dm-action,.dm-time{color:var(--mut);font-size:13px;margin-top:8px;line-height:1.5}
.detail-actions{display:flex;gap:9px;margin:12px 0 4px}
.dbtn{flex:1;padding:13px;background:var(--surface2);border:1px solid var(--hair);color:var(--txt);border-radius:14px;font-size:13px;font-weight:700}
.dbtn:active{transform:scale(.96)}
.dbtn.primary{background:linear-gradient(180deg,var(--accent2),var(--accent));border-color:transparent;color:#fff}
.dbtn.busy{opacity:.6;pointer-events:none}
.dbtn:disabled{pointer-events:none;box-shadow:none}
/* "you're already watching live" — the Live button becomes a non-tappable red status pill, not a CTA */
.dbtn.islive{background:rgba(255,90,93,.16);border:1px solid rgba(255,90,93,.45);color:#ff9092;box-shadow:none}
.media-wrap{position:relative;width:100%;background:#000;border-radius:18px;overflow:hidden}
.media-wrap>img,.media-wrap>video{display:block;width:100%;max-height:min(52vh,460px);object-fit:contain;background:#000}
.detail-batt{font-size:12px;font-weight:700;color:var(--mut);min-width:34px;text-align:right}
.spin{display:inline-block;width:12px;height:12px;border:2px solid var(--hair);border-top-color:var(--accent2);border-radius:50%;animation:rot .8s linear infinite;vertical-align:-1px}
@keyframes rot{to{transform:rotate(360deg)}}

/* battery badges */
.batt{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--surface2);border:1px solid var(--hair);color:var(--mut)}
.batt.ok{color:var(--ok)} .batt.mid{color:var(--vehicle)} .batt.low{color:var(--red)}
.cam-batt{position:absolute;top:9px;right:9px;font-size:10px;font-weight:800;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);padding:3px 7px;border-radius:8px}
.cam-batt:empty{display:none}

/* bell hint + pulse */
.icon-btn.pulse{animation:bell 1.4s ease-in-out infinite;box-shadow:0 0 0 0 rgba(79,140,255,.5)}
@keyframes bell{0%,100%{box-shadow:0 0 0 0 rgba(79,140,255,.45)}50%{box-shadow:0 0 0 7px rgba(79,140,255,0)}}
.bell-hint{position:fixed;top:58px;right:54px;z-index:50;background:var(--accent);color:#fff;font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:12px;box-shadow:var(--shadow)}
.bell-hint::after{content:"";position:absolute;top:-6px;right:18px;border:6px solid transparent;border-bottom-color:var(--accent);border-top:0}

/* onboarding sheet */
.onboard{position:fixed;inset:0;z-index:90;background:rgba(8,11,17,.66);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center}
.onboard-sheet{width:100%;max-width:520px;background:var(--bg);background-image:var(--bg-grad);border:1px solid var(--hair);border-top-left-radius:26px;border-top-right-radius:26px;padding:22px 20px;padding-bottom:max(22px,env(safe-area-inset-bottom));max-height:92vh;overflow-y:auto;box-shadow:0 -20px 60px rgba(0,0,0,.5)}
.ob-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.ob-logo{font-size:26px}.ob-head h2{flex:1;font-size:20px;letter-spacing:.5px}
.ob-sub{color:var(--mut);font-size:13.5px;margin-bottom:18px}
.ob-step{display:flex;gap:13px;background:var(--surface);border:1px solid var(--hair);border-radius:18px;padding:15px;margin-bottom:12px}
.ob-num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.ob-body h3{font-size:15.5px;margin-bottom:5px}
.ob-body p{color:var(--mut);font-size:13.5px;line-height:1.55;margin-bottom:6px}
.ob-body b{color:var(--txt)}
.ob-os{background:rgba(0,0,0,.22);border-radius:10px;padding:8px 10px;margin:6px 0!important}
.ob-note{font-size:12px!important;color:var(--mut2)!important}
.kbd{display:inline-block;background:var(--surface2);border:1px solid var(--hair);border-radius:6px;padding:0 5px;font-size:12px}
.ob-body .dbtn{margin-top:8px;flex:none;width:100%}
#obDone{width:100%;margin-top:6px}

/* notification level cards */
.nlvl{display:block;width:100%;text-align:left;font:inherit;background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:14px;margin-bottom:10px;cursor:pointer;transition:.15s}
.nlvl:active{transform:scale(.99)}
.nlvl.on{border-color:var(--accent);box-shadow:0 0 0 2px rgba(79,140,255,.25);background:rgba(79,140,255,.08)}
.nlvl-t{font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px}
.nlvl-chk{color:var(--accent2)}
.nlvl-d{color:var(--mut);font-size:12.5px;line-height:1.5;margin-top:4px}

/* new-activity pill — replaces the old blanket auto-reload */
.new-pill{position:fixed;top:62px;left:50%;transform:translateX(-50%);z-index:70;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:700;letter-spacing:.2px;box-shadow:0 8px 24px rgba(0,0,0,.45);cursor:pointer;animation:pillIn .25s ease}
.new-pill.hidden{display:none}
@keyframes pillIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* pill repositioned to bottom so it never covers the header/back button */
.new-pill{top:auto;bottom:90px;background:linear-gradient(135deg,#2563eb,#1d4ed8)}
/* SD/HD quality toggle in the player */
.qual-tgl{display:inline-block;margin-top:10px;background:rgba(255,255,255,.08);color:#9fb0c3;border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer}

/* pull-to-refresh indicator */
.ptr{position:fixed;top:20px;left:50%;margin-left:-19px;z-index:66;width:38px;height:38px;border-radius:50%;background:#16202e;display:flex;align-items:center;justify-content:center;color:#7fa8ff;font-size:20px;opacity:0;box-shadow:0 4px 16px rgba(0,0,0,.45);pointer-events:none;transition:opacity .12s}
.ptr.ready{background:#2563eb;color:#fff}
.ptr.spin span{display:inline-block;animation:ptrspin .8s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}

/* iOS fix: background-attachment:fixed + backdrop-filter make position:fixed elements (tab bar,
   FAB) detach and float mid-screen during momentum scroll. Use a fixed pseudo-bg instead, and
   promote the bars to their own compositor layer so they stay pinned. */
body{background-attachment:scroll}
body::before{content:"";position:fixed;inset:0;background:var(--bg-grad);z-index:-1;pointer-events:none}
/* NOTE: do NOT put transform/will-change on .tabbar/.fab — on iOS a transform on a position:fixed
   element makes it DETACH and drift up the page during momentum scroll (the tab bar "unsnapping").
   backdrop-filter already composites them; no GPU hack needed. */

/* change-password section in settings */
.pw-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.pw-title{font-size:11.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.pw-section input{width:100%;padding:12px 14px;margin-bottom:9px;border-radius:12px;border:1px solid var(--hair);background:var(--surface);color:var(--txt);font-size:15px;box-sizing:border-box}
.pw-msg{font-size:13px;margin-top:6px;min-height:16px}
.pw-msg.ok{color:#46d39a}.pw-msg.err{color:#ff6b6e}

/* plain-language quality label + inline explainers + help guide */
.qt-sub{color:#8b97a8;font-weight:500}
.info-dot{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:7px;border-radius:50%;border:1px solid var(--hair);background:transparent;color:var(--mut);font-size:11px;font-weight:700;cursor:pointer;vertical-align:middle;padding:0;line-height:1}
.info-dot:active{transform:scale(.9)}
.ob-guide{margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.ob-guide h3{font-size:15px;margin:0 0 12px}
.ob-guide .gp{font-size:13.5px;line-height:1.5;color:var(--mut);margin-bottom:11px}
.ob-guide .gp b{color:var(--txt);font-weight:600}

/* "on/near property" freshness header */
.scene-head{display:flex;align-items:center;gap:4px;margin:2px 2px 10px}
.scene-lbl{font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut)}
.scene-fresh{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut)}
.scene-fresh span[class^="dot-"]{width:8px;height:8px;border-radius:50%;display:inline-block}
.scene-fresh .dot-live{background:#46d39a;box-shadow:0 0 6px #46d39a;animation:pulseDot 1.6s infinite}
.scene-fresh .dot-recent{background:#e0b341}
.scene-fresh .dot-quiet{background:#5a6573}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.4}}

/* refined new-activity pill (sleeker, no text wrap) */
.new-pill{position:fixed;left:50%;bottom:calc(80px + env(safe-area-inset-bottom));top:auto;transform:translateX(-50%);z-index:70;display:inline-flex;align-items:center;gap:11px;white-space:nowrap;max-width:92vw;background:rgba(37,99,235,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:9px 17px 9px 14px;box-shadow:0 12px 32px rgba(37,99,235,.5),0 2px 10px rgba(0,0,0,.4);cursor:pointer;animation:pillIn .32s cubic-bezier(.2,.85,.25,1)}
.new-pill .np-ico{font-size:18px;line-height:1}
.new-pill .np-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.18;text-align:left}
.new-pill .np-txt b{font-size:13.5px;font-weight:700}
.new-pill .np-cta{font-size:11px;font-weight:500;opacity:.82}
.new-pill:active{transform:translate(-50%,0) scale(.96)}
@keyframes pillIn{from{opacity:0;transform:translate(-50%,14px) scale(.95)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* show 2 lines of description (was truncated to 1) */
.ev-desc{white-space:normal !important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
/* cleaner search + date filter */
.search-dates{display:flex;align-items:center;gap:8px;margin-top:10px}
.datef{flex:1;display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:7px 12px}
.datef-lbl{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--accent2)}
.datef input[type=date]{background:transparent;border:none;color:var(--txt);font-size:13px;width:100%;min-height:18px}
.search-dates .fchip{align-self:stretch}

/* chat clip cards (tappable → opens the event/clip) */
.chat-cards{display:flex;flex-direction:column;gap:8px;margin:4px 0 2px;align-self:flex-start;max-width:92%}
.cc{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--hair);border-radius:14px;padding:8px;cursor:pointer;text-align:left;width:100%}
.cc:active{transform:scale(.98)}
.cc-thumb{width:64px;height:44px;border-radius:9px;background:#0c1118;background-size:cover;background-position:center;flex:none;position:relative;display:flex;align-items:center;justify-content:center}
.cc-play{color:#fff;font-size:14px;text-shadow:0 1px 4px rgba(0,0,0,.85)}
.cc-meta{min-width:0;flex:1}
.cc-cam{font-size:12.5px;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-t{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* System status panel */
.hbanner{font-size:13.5px;font-weight:700;padding:8px 10px;border-radius:10px;margin-bottom:8px}
.hbanner.ok{background:rgba(34,197,94,.14);color:#34d399}
.hbanner.bad{background:rgba(245,158,11,.16);color:#fbbf24}
.hrow{display:flex;align-items:center;gap:9px;padding:7px 2px;border-top:1px solid var(--line,rgba(255,255,255,.06))}
.hrow:first-of-type{border-top:none}
.hdot{width:9px;height:9px;border-radius:50%;flex:none}
.hdot.ok{background:#34d399;box-shadow:0 0 6px rgba(52,211,153,.6)}
.hdot.bad{background:#f87171;box-shadow:0 0 6px rgba(248,113,113,.6)}
.hdot.amber{background:#e0b341;box-shadow:0 0 6px rgba(224,179,65,.55)}
.hname{flex:1;font-size:13.5px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hval{font-size:12.5px;color:var(--mut)}

/* Teach-the-AI correction box */
.correct-box{margin-top:14px;padding:10px;border:1px dashed var(--line,rgba(255,255,255,.12));border-radius:12px}
.cb-h{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.cb-btns{display:flex;flex-wrap:wrap;gap:7px}
.cbtn{font-size:12.5px;padding:7px 11px;border-radius:20px;border:1px solid var(--line,rgba(255,255,255,.14));background:var(--card2,rgba(255,255,255,.04));color:var(--txt);cursor:pointer}
.cbtn:active{background:rgba(255,255,255,.12)}

/* Chat mic (voice input) */
#chatMic{background:transparent;border:none;font-size:20px;padding:0 6px;cursor:pointer;line-height:1}
#chatMic.listening{animation:micpulse 1s ease-in-out infinite}
@keyframes micpulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}

/* PTZ controls */
.ptz-pad{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0 2px;padding:10px 14px;background:var(--card2,rgba(255,255,255,.04));border-radius:14px}
.ptz-dpad{position:relative;width:118px;height:78px;flex:none}
.ptz-dpad .ptz-btn{position:absolute;width:36px;height:36px;border-radius:10px}
.ptz-dpad .up{top:0;left:41px}
.ptz-dpad .down{bottom:0;left:41px}
.ptz-dpad .left{top:21px;left:0}
.ptz-dpad .right{top:21px;right:0}
.ptz-mid{position:absolute;top:26px;left:45px;font-size:10px;color:var(--mut);font-weight:700}
.ptz-zoom{display:flex;align-items:center;gap:10px}
.ptz-zlbl{font-size:11px;color:var(--mut);font-weight:700}
.ptz-btn{background:rgba(255,255,255,.08);border:1px solid var(--line,rgba(255,255,255,.14));color:var(--txt);font-size:17px;line-height:1;border-radius:12px;width:42px;height:42px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ptz-btn:active{background:var(--accent,#3b82f6);transform:scale(.94)}

/* PTZ pad v2 — sleeker, with gesture hint */
.ptz-pad{display:block;margin:12px 0 2px;padding:12px 14px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line,rgba(255,255,255,.08));border-radius:16px}
.ptz-hint{font-size:11.5px;color:var(--mut2,#8a93a6);text-align:center;margin-bottom:11px;font-weight:600}
.ptz-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ptz-btn{background:rgba(255,255,255,.07);border:1px solid var(--line,rgba(255,255,255,.12));color:var(--txt);font-size:16px;border-radius:13px;width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .08s,background .12s}
.ptz-btn:active{background:var(--accent,#3b82f6);transform:scale(.9)}
.ptz-mid{position:absolute;top:27px;left:43px;font-size:9px;color:var(--mut);font-weight:800;letter-spacing:.05em}

/* PTZ pad v3 — bigger touch targets, press-and-hold friendly */
.ptz-btn{width:52px;height:52px;font-size:18px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ptz-dpad{position:relative;width:160px;height:112px;flex:none}
.ptz-dpad .ptz-btn{position:absolute;width:50px;height:50px}
.ptz-dpad .up{top:0;left:55px}
.ptz-dpad .down{bottom:0;left:55px}
.ptz-dpad .left{top:31px;left:0}
.ptz-dpad .right{top:31px;right:0}
.ptz-mid{position:absolute;top:38px;left:58px;font-size:9px;color:var(--mut);font-weight:800;letter-spacing:.04em}
.ptz-btn:active{background:var(--accent,#3b82f6);transform:scale(.92)}

/* center the MOVE label between the arrows */
.ptz-mid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:9px;color:var(--mut);font-weight:800;letter-spacing:.04em;pointer-events:none}

/* ===== SYSTEM OUTAGE banner — reassures family this is NOT an account lockout ===== */
.outage{position:sticky;top:0;left:0;right:0;z-index:50;margin:0;padding:max(14px,env(safe-area-inset-top,0px)) 44px 14px 16px;
  background:linear-gradient(180deg,#3a2410,#2a1908);border-bottom:1px solid rgba(245,158,11,.45);
  color:#ffe9c7;font-size:13.5px;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:outageIn .25s ease}
.outage.hidden{display:none}
@keyframes outageIn{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
.outage .o-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:#fdba74;margin-bottom:4px}
.outage .o-title .o-ico{font-size:18px;line-height:1}
.outage .o-reassure{font-weight:700;color:#fff;display:block;margin:2px 0 4px}
.outage .o-sub{color:#f7d8a8}
.outage .o-countdown{display:block;margin-top:8px;font-size:12px;font-weight:700;color:rgba(255,255,255,.72)}
.outage .o-last{display:block;margin-top:6px;font-size:12px;color:#e9bd86;opacity:.9}
/* close (✕) button on the outage banner — sits below the status bar, right side */
.outage .o-close{position:absolute;top:max(10px,calc(env(safe-area-inset-top,0px) - 2px));right:10px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:15px;line-height:30px;text-align:center;padding:0;cursor:pointer;z-index:1}
/* hub self-help button: appears after ≥10 min of reconnect (hub down, cameras ok) */
.o-hub-help{display:block;margin-top:10px;width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);color:inherit;border-radius:10px;padding:7px 14px;font-size:14px;text-align:left;cursor:pointer}
.o-hub-help:active{opacity:.7}
/* ring pulse on the hub ⟳ button in System Status when highlighted from the outage banner */
@keyframes hubRing{0%,100%{box-shadow:0 0 0 0 rgba(79,140,255,.6)}50%{box-shadow:0 0 0 8px rgba(79,140,255,0)}}
.hub-ring{animation:hubRing .75s ease-out 3;background:rgba(79,140,255,.12)!important;border-color:rgba(79,140,255,.5)!important}

/* ============ Wave 1 (v58) honesty surfaces ============ */
/* tiered outage-banner severities (named component, calibrated color) */
.outage.red{background:linear-gradient(180deg,rgba(255,90,93,.20),rgba(255,90,93,.10));border-bottom:1px solid rgba(255,90,93,.42)}
.outage.red .o-title{color:#ff8d8f}
.outage.red .o-sub{color:#f6c9c9}
.outage.amber{background:linear-gradient(180deg,#3a2410,#2a1908);border-bottom:1px solid rgba(245,158,11,.45)}
.outage.ok-flash{background:linear-gradient(180deg,rgba(61,220,132,.18),rgba(61,220,132,.08));border-bottom:1px solid rgba(61,220,132,.36)}
.outage.ok-flash .o-title{color:#5ee8a0}
.outage.ok-flash .o-sub{color:#bdebcf}
/* persistent home-safety status strip — present on EVERY tab */
.status-strip{display:flex;align-items:center;gap:9px;width:calc(100% - 36px);margin:10px 18px 0;padding:9px 14px;border-radius:12px;font-size:13.5px;font-weight:700;border:1px solid transparent;background:rgba(255,255,255,.04);color:var(--txt);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.status-strip .ss-ico{font-size:13px;line-height:1}
.status-strip.ok{background:rgba(61,220,132,.10);border-color:rgba(61,220,132,.22);color:#a9ecc4}
.status-strip.warn{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.3);color:#fbbf24}
.status-strip.down{background:rgba(255,90,93,.15);border-color:rgba(255,90,93,.38);color:#ff8d8f}
/* "install / enable alerts" nag */
.alert-nag{display:flex;align-items:center;gap:11px;margin:10px 18px 0;padding:11px 14px;border-radius:12px;background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.32);cursor:pointer}
.alert-nag.hidden{display:none}
.alert-nag .an-ico{font-size:18px}
.alert-nag .an-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.alert-nag .an-txt b{font-size:13.5px;color:#fde7c0}
.alert-nag .an-sub{font-size:12px;color:#f3cf94;margin-top:1px}
.alert-nag .an-cta{font-size:13px;font-weight:800;color:#fbbf24;white-space:nowrap}
.alert-nag .an-x{margin-left:6px;flex:0 0 auto;width:26px;height:26px;border:none;border-radius:50%;background:rgba(255,255,255,.08);color:#f3cf94;font-size:12px;line-height:1;cursor:pointer}
.alert-nag .an-x:active{background:rgba(255,255,255,.16)}
/* the LIVE + battery pills sit in opposite top corners of a camera tile — cap width so they never collide */
.cam-live{max-width:44%;overflow:hidden}
.cam-batt{max-width:52%;overflow:hidden;white-space:nowrap}
/* "What's New" — a prominent teaser card (was a buried plain button at the very bottom) */
.whatsnew-card{display:flex;align-items:center;gap:13px;width:100%;margin-top:16px;padding:15px 16px;border:1px solid rgba(79,140,255,.28);border-radius:18px;background:linear-gradient(135deg,rgba(79,140,255,.15),rgba(124,92,255,.10));text-align:left;cursor:pointer;transition:transform .16s,border-color .16s}
.whatsnew-card:hover{border-color:rgba(79,140,255,.5)}
.whatsnew-card:active{transform:scale(.99)}
.whatsnew-card .wn-ico{font-size:22px;flex:0 0 auto}
.whatsnew-card .wn-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.whatsnew-card .wn-title{font-weight:800;font-size:14.5px;color:#e8eefc;display:flex;align-items:center;gap:7px}
.whatsnew-card .wn-sub{font-size:12.5px;color:#9fb2d4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.whatsnew-card .wn-arrow{font-size:22px;color:#7aa9ff;flex:0 0 auto}
.whatsnew-card .wn-dot{width:8px;height:8px;border-radius:50%;background:#4f8cff;box-shadow:0 0 0 3px rgba(79,140,255,.25)}
/* ---- Desktop / wide screens: this is a phone-first PWA. Instead of stretching cards edge-to-edge,
   center everything in a phone-width column, and guarantee the page scrolls. ---- */
/* ---- Narrow phones: condense the header so the brand + LIVE + 5 icons all fit (was overflowing) ---- */
@media (max-width:480px){
  header{padding:11px 12px;padding-top:max(11px,env(safe-area-inset-top))}
  .brand{font-size:12.5px;letter-spacing:.4px;gap:5px}
  .brand-ico{font-size:15px}
  .hdr-right{gap:5px}
  .live-pill{font-size:0;padding:7px;gap:0}
  .live-pill .live-dot{width:8px;height:8px}
  .icon-btn{min-width:31px;height:31px;padding:0 6px;font-size:14px;border-radius:10px}
}
/* ---- Small laptop windows (700–899px): clean centered column ---- */
@media (min-width:700px) and (max-width:899px){
  html{overflow-y:scroll;height:auto}
  body{overflow-y:visible;height:auto;min-height:100%}
  #app.screen,#login.screen{max-width:640px;margin-left:auto;margin-right:auto;min-height:auto}
  .tabbar{left:0;right:0;max-width:640px;margin-left:auto;margin-right:auto}
  .fab{right:max(18px,calc(50% - 302px))}
  body::before{background-attachment:scroll}
}
/* ---- Real desktop (≥900px): a WIDE layout that uses the screen, not a phone column. The dashboard
   stays a readable card column, but Activity goes 2-up and Cameras 3-up so the width is actually used. ---- */
@media (min-width:900px){
  html{overflow-y:scroll;height:auto}            /* always-on scrollbar track = stable, Safari-safe scroll */
  body{overflow-y:visible;height:auto;min-height:100%}
  #app.screen,#login.screen{max-width:1120px;margin-left:auto;margin-right:auto;min-height:auto;padding:0}
  header{max-width:1120px;margin-left:auto;margin-right:auto}
  .tabbar{left:0;right:0;max-width:1120px;margin-left:auto;margin-right:auto}
  .fab{right:max(24px,calc(50% - 536px))}
  body::before{background-attachment:scroll}
  /* dashboard cards look bad stretched to 1120px → keep them a readable centered column */
  #view-dashboard{max-width:820px;margin-left:auto;margin-right:auto}
  /* Activity + Cameras USE the width */
  #view-activity .feed{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
  /* day headers + the "new since you left" divider + empty-state must span BOTH columns, not sit as a lone cell */
  #view-activity .feed .day-head,#view-activity .feed .new-divider,#view-activity .feed .hour-empty,#view-activity .feed .rec-day-row{grid-column:1 / -1}
  /* 4 cameras look balanced 2×2 (bigger tiles), not an awkward 3 + 1 */
  .cam-grid{grid-template-columns:repeat(2,1fr);gap:16px;max-width:980px;margin:0 auto;padding:0 18px}
  /* CHAT = a centered modal on desktop, not a sparse full-width mobile bottom-sheet */
  .chat{justify-content:center;align-items:center;padding:24px}
  .chat-sheet{width:680px;max-width:680px;max-height:82vh;border-radius:24px;border:1px solid var(--hair);box-shadow:0 30px 90px rgba(0,0,0,.6)}
  .chat-msgs{min-height:320px}
  .chat-suggest{padding-left:18px;padding-right:18px}
  /* the ✦ chat button hugs the dashboard column on desktop (not the far viewport edge) */
  #view-dashboard~.fab,.fab{right:max(24px,calc(50% - 536px))}
}
/* AI-degraded ("unconfirmed") badge on event rows */
.ai-deg{display:inline-block;margin-left:7px;font-size:10.5px;font-weight:700;color:#fbbf24;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.3);padding:1px 7px;border-radius:20px;vertical-align:middle}
.rel-reason{display:inline-block;margin-left:7px;font-size:10.5px;font-weight:700;color:#9fc0ff;background:rgba(79,140,255,.16);border:1px solid rgba(79,140,255,.32);padding:1px 7px;border-radius:20px;vertical-align:middle;white-space:nowrap}
.evrow.degraded{border-left:2px solid rgba(245,158,11,.5)}
/* stale camera-tile sub (last sighting is old — not a live frame) */
.cam-tile-sub.stale{color:#fbbf24}
/* persistent, dismissible error card for actionable failures */
.err-card{position:fixed;left:14px;right:14px;bottom:calc(80px + env(safe-area-inset-bottom,0px));z-index:300;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(30,16,16,.97);border:1px solid rgba(255,90,93,.45);box-shadow:0 10px 30px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.err-card.hidden{display:none}
.err-card .ec-ico{font-size:17px}
.err-card .ec-txt{flex:1;font-size:13px;color:#ffd9d9;line-height:1.35}
.err-card .ec-retry{background:var(--red);color:#fff;border:none;border-radius:10px;padding:8px 13px;font-size:13px;font-weight:700;white-space:nowrap}
.err-card .ec-x{background:transparent;border:none;color:var(--mut);font-size:16px;padding:4px 6px}
/* teach-via-chat: the hint under the "Tell Sentinel about this" button + the "learned" confirmation bubble */
.teach-hint{font-size:12px;color:var(--mut);margin-top:8px;line-height:1.4;text-align:center}
.msg.learned{background:rgba(61,220,132,.14)!important;color:#a9ecc4!important;border:1px solid rgba(61,220,132,.3)}
/* info overlay (tap an ⓘ): centered card with text + read-aloud + close — replaces the fleeting top toast */
.info-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,11,17,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.info-modal.hidden{display:none}
.info-modal .im-card{position:relative;max-width:380px;width:100%;background:var(--surface,#121826);border:1px solid var(--hair,rgba(255,255,255,.1));border-radius:18px;padding:28px 20px 18px;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.info-modal .im-x{position:absolute;top:9px;right:9px;width:30px;height:30px;border-radius:50%;border:none;background:rgba(255,255,255,.1);color:var(--txt,#eef2f8);font-size:15px}
.info-modal .im-body{color:var(--txt,#eef2f8);font-size:15px;line-height:1.5}
.info-modal .im-read{margin-top:16px;width:100%;padding:11px;border:none;border-radius:12px;background:rgba(79,140,255,.15);color:var(--accent2,#7aa9ff);font-size:14px;font-weight:700}

/* ---- Settings: language + Easy View controls ---- */
.set-section{margin:14px 0 6px}
.set-label{color:var(--mut);font-size:11.5px;text-transform:uppercase;letter-spacing:1.4px;font-weight:600;margin-bottom:9px}
.set-hint{color:var(--mut2);font-size:12px;margin-top:7px;line-height:1.4}
.lang-sel,.easy-toggle{display:flex;gap:10px}
.lang-opt,.easy-opt{flex:1;padding:13px 12px;background:var(--surface2,rgba(255,255,255,.04));border:1px solid var(--hair);border-radius:14px;color:var(--txt);font-size:15px;font-weight:600;text-align:center;transition:.15s}
.lang-opt.on,.easy-opt.on{border-color:var(--accent2);background:rgba(79,140,255,.14);color:#fff}
.nlvl-chk{color:var(--ok,#3ddc84);font-weight:800}

/* ---- Easy View: larger text + higher contrast for at-a-glance reading ---- */
body.easy{--mut:#c2ccdb;--mut2:#9aa8bd}
body.easy .ah-text{font-size:18.5px;line-height:1.6}
body.easy .ss-txt{font-size:15px;font-weight:700}
body.easy .ev-cam{font-size:16px}
body.easy .ev-desc{font-size:14px}
body.easy .stat-card .sc-n{font-size:32px}
body.easy .stat-card .sc-l{font-size:12.5px}
body.easy .tab{font-size:12px}
body.easy .dbtn,body.easy .lang-opt,body.easy .easy-opt{font-size:16.5px}
body.easy .nlvl-t{font-size:16px}
body.easy .nlvl-d{font-size:13.5px}
body.easy .im-body{font-size:18px;line-height:1.6}

/* ---- Activity day-group headers ---- */
.day-head{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:1.4px;font-weight:700;
  margin:18px 2px 8px;padding-bottom:6px;border-bottom:1px solid var(--hair);position:sticky;top:0;
  background:linear-gradient(180deg,var(--bg) 70%,transparent);z-index:1}
.day-head:first-child{margin-top:4px}
body.easy .day-head{font-size:13px}

/* ---- day rollup chip + per-camera filter + saved-search presets ---- */
.day-head{display:flex;align-items:center;justify-content:space-between}
.day-roll{font-size:10.5px;color:var(--mut2);letter-spacing:.3px;font-weight:600;text-transform:none}
.rec-day-row{margin-bottom:14px}   /* recordings mode: day picker spacing */
.cam-filter{margin-top:2px;opacity:.95}
.cam-filter .fchip{font-size:12px}
.search-presets{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:10px}
.sp-lbl{font-size:11px;color:var(--mut2);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.sp-chip{font-size:12.5px;padding:7px 11px;border-radius:20px;background:rgba(79,140,255,.10);
  border:1px solid rgba(79,140,255,.22);color:var(--txt);font-weight:600}
.sp-chip:active{background:rgba(79,140,255,.2)}
.sp-n{display:inline-block;margin-left:5px;min-width:16px;padding:0 5px;border-radius:9px;background:rgba(79,140,255,.28);color:#dce8ff;font-size:11px;font-weight:800;text-align:center}
body.easy .sp-chip,body.easy .cam-filter .fchip{font-size:14px}

/* ---- solar / charging outlook row in system status ---- */
.solar-row{align-items:flex-start!important;gap:8px;background:rgba(255,200,60,.07);border:1px solid rgba(255,200,60,.18);border-radius:12px;padding:10px 12px;margin-top:6px}
.solar-ico{font-size:16px;flex-shrink:0}
.solar-note{font-size:13px;color:#f1e3b8;line-height:1.45}
.solar-fc{display:block;color:var(--mut);font-size:11.5px;margin-top:4px;letter-spacing:.3px}

/* ---- "What things mean" legend ---- */
.ob-legend{margin-top:20px;border-top:1px solid var(--hair);padding-top:16px}
.ob-legend h3{display:flex;align-items:center;gap:8px}
.lg-row{display:flex;align-items:center;gap:12px;padding:7px 2px;font-size:14px;color:var(--txt)}
.lg-k{flex-shrink:0;min-width:54px;font-weight:700;font-size:15px}
.legend-read{margin-top:12px}
body.easy .lg-row{font-size:16px}
body.easy .solar-note{font-size:15px}
.solar-pred{display:block;color:#f1e3b8;font-size:12.5px;margin-top:6px;padding-top:6px;border-top:1px dashed rgba(255,200,60,.2);line-height:1.4}
.solar-pred.warn{color:#f59e0b}   /* amber when battery already critical or trending there (pred_status=warn) */
body.easy .solar-pred{font-size:14px}

/* ---- "new since you left": tab badge + feed divider ---- */
.tab{position:relative}
.tab-badge{position:absolute;top:2px;left:50%;margin-left:4px;min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--red,#ff5a5d);color:#fff;font-size:10.5px;font-weight:800;line-height:17px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.tab-badge.hidden{display:none}
.new-divider{display:flex;align-items:center;gap:10px;margin:14px 2px 8px;color:var(--accent2,#7fa8ff);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px}
.new-divider::before,.new-divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(127,168,255,.4),transparent)}

/* ---- LIVE / RECORDING mode badge in the detail header ---- */
.detail-mode{font-size:10.5px;font-weight:800;letter-spacing:.6px;padding:3px 9px;border-radius:20px;margin-left:8px;white-space:nowrap}
.detail-mode.hidden{display:none}
.detail-mode.live{background:rgba(255,90,93,.16);border:1px solid rgba(255,90,93,.4);color:#ff8a8c;animation:livePulse 1.8s ease-in-out infinite}
.detail-mode.rec{background:rgba(79,140,255,.16);border:1px solid rgba(79,140,255,.4);color:#9fc0ff}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ---- Roadmap / "What's New & Coming" board ---- */
.rm-board{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.rm-col-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;letter-spacing:.3px;margin-bottom:9px}
.rm-count{font-size:11px;font-weight:700;color:var(--mut);background:rgba(255,255,255,.06);border-radius:20px;padding:1px 8px}
.rm-card{background:var(--surface2,rgba(255,255,255,.04));border:1px solid var(--hair);border-radius:12px;padding:11px 13px;margin-bottom:9px;border-left:3px solid var(--mut2)}
.rm-col.shipped .rm-card{border-left-color:#3ddc84}
.rm-col.building .rm-card{border-left-color:#4f8cff}
.rm-col.soon .rm-card{border-left-color:#ffb03a}
.rm-col.future .rm-card{border-left-color:#b07cff}
.rm-t{font-size:14px;font-weight:700;line-height:1.3}
.rm-d{font-size:12.5px;color:var(--mut);margin-top:4px;line-height:1.4}
.rm-updated{color:var(--mut2);font-size:11.5px;text-align:center;margin-top:14px}
body.easy .rm-t{font-size:16px}body.easy .rm-d{font-size:14px}

/* ---- 🐾 pet / potty tracker card ---- */
.pets-card{display:flex;align-items:center;gap:13px;background:linear-gradient(180deg,rgba(61,220,132,.08),rgba(61,220,132,.03));border:1px solid rgba(61,220,132,.2);border-radius:16px;padding:13px 15px;margin:14px 0 2px}
.pets-ico{font-size:24px;flex-shrink:0}
.pets-t{font-size:15px;font-weight:700}
.pets-d{font-size:12.5px;color:var(--mut);margin-top:2px}
body.easy .pets-t{font-size:17px}body.easy .pets-d{font-size:14px}

/* roadmap board must sit ABOVE the Settings sheet it's opened from */
#roadmap{z-index:95}
.rm-date{font-size:11px;color:var(--ok,#3ddc84);font-weight:700;margin-top:6px}
/* Shipped column: full history grouped under date headers, scrollable instead of a flat 8 */
.rm-col.shipped .rm-scroll{max-height:60vh;overflow-y:auto;padding-right:4px;-webkit-overflow-scrolling:touch}
.rm-date-h{position:sticky;top:0;background:var(--bg,#080b11);z-index:1;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--ok,#3ddc84);padding:10px 2px 7px}
.rm-date-h .rm-date-n{color:var(--mut2);font-weight:600}
/* 💡 idea backlog column — the big pool of future ideas */
.rm-col.backlog .rm-card{border-left-color:#ffd24a}
/* 🌱 lawn mow-tracker card — same shape as pets, warm-green tint */
.lawn-card{background:linear-gradient(180deg,rgba(120,200,80,.10),rgba(120,200,80,.03));border-color:rgba(120,200,80,.22)}
.lawn-area{margin-top:3px;line-height:1.45}
.lawn-hint{margin-top:6px}
.lawn-mow{margin-left:6px;font-size:11px;font-weight:700;color:#8fd3a0;background:rgba(95,211,163,.14);border:1px solid rgba(95,211,163,.3);border-radius:20px;padding:2px 9px;cursor:pointer;vertical-align:middle}
.lawn-mow:disabled{opacity:.7;color:#8fd3a0}
/* growth bar — days-since-mow filling from "just cut" toward "time to mow" (replaced the noisy sparkline) */
.lawn-growth{display:flex;align-items:center;gap:6px;margin-top:6px;max-width:240px}
.lg-end{font-size:9px;color:var(--mut);white-space:nowrap;flex:none}
.lawn-bar{flex:1;height:6px;background:rgba(255,255,255,.09);border-radius:4px;overflow:hidden}
.lawn-bar-fill{height:100%;border-radius:4px;transition:width .4s ease}
/* 📍 Family check-in card — blue tint to distinguish from the green pets/lawn cards */
.fam-card{background:linear-gradient(180deg,rgba(79,140,255,.10),rgba(79,140,255,.03));border:1px solid rgba(79,140,255,.22);border-radius:16px;padding:13px 15px;margin:14px 0 2px}
.fam-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.fam-title{font-size:15px;font-weight:700}
.fam-btns{display:flex;gap:8px}
.fam-checkin,.fam-sos{font-size:12px;font-weight:700;border-radius:20px;padding:4px 12px;cursor:pointer}
.fam-checkin{background:rgba(79,140,255,.18);border:1px solid rgba(79,140,255,.38);color:var(--txt)}
.fam-sos{background:rgba(220,50,50,.18);border:1px solid rgba(220,50,50,.38);color:#ff7070}
.fam-nudge{background:rgba(79,140,255,.1);border:1px solid rgba(79,140,255,.28);border-radius:14px;padding:14px 15px;margin-bottom:12px}
.fam-nudge-txt{font-size:13.5px;color:var(--txt);line-height:1.45;margin-bottom:11px}
.fam-nudge-btn{width:100%;background:var(--accent);border:none;color:#08111f;padding:12px;border-radius:11px;font-weight:800;font-size:14px;cursor:pointer}
.fam-nudge-btn:active{transform:translateY(1px)}
.fam-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.fam-row:last-child{border-bottom:none}
.fam-av{width:32px;height:32px;border-radius:50%;background:rgba(79,140,255,.25);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.fam-main{flex:1;min-width:0}
.fam-name{font-size:14px;font-weight:600}
.fam-sub{font-size:12px;color:var(--mut);margin-top:1px}
.fam-map{font-size:12px;color:#6ea8fe;white-space:nowrap}
.fam-empty{color:var(--mut);font-size:13px;padding:4px 0}
body.easy .fam-title{font-size:17px}body.easy .fam-name{font-size:16px}body.easy .fam-sub{font-size:14px}
/* clear, friendly empty state when you tap an hour bar with no activity */
.hour-empty{text-align:center;color:var(--mut);font-size:14.5px;line-height:1.5;padding:34px 18px}
body.easy .hour-empty{font-size:16.5px}
#dashRoadmap{background:rgba(79,140,255,.12);border:1px solid rgba(79,140,255,.28);color:#cfe0ff}

.cov-inst{font-size:12px;opacity:.85;margin-left:2px}