/* Navigation: desktop keeps the side panel + top tabs; tablet gets an agent drawer; phone gets a real
   bottom bar with a big centre Spotter button and a menu sheet. Loaded last so it overrides styles.css. */

.top-title,.menu-btn,.back-dash,.sheet,.sheet-scrim{display:none}
.agbtn{display:none;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:999px;border:1px solid var(--line2);background:var(--s2);color:var(--txt);font-weight:600;font-size:13px;width:auto}
.agbtn .orb{width:28px;height:28px;box-shadow:none}

/* ---------- tablet: agent lives in a drawer, opened by a labelled pill ---------- */
@media (max-width:1050px) and (min-width:701px){
  .app:not(.am) .agbtn{display:inline-flex}
}

/* ---------- phone ---------- */
@media (max-width:700px){
  .top{padding:8px 10px 8px 12px;gap:8px;min-height:56px}
  .top .logo img{width:30px;height:30px}
  .top .logo span,.top .tabs,.top #modeSeg,.top #langBtn,.top #meAv{display:none}
  .app .top .agbtn{display:none!important} /* tablet-only; phones use the centre Spotter button */
  .top-title{display:block;flex:1;min-width:0;font-weight:700;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top .sp{display:none}
  .top .ic{width:44px;height:44px;border-radius:14px}
  .menu-btn{display:grid}
  .menu-btn svg{width:22px;height:22px}

  /* bottom bar in BOTH modes */
  .app .bottom{display:flex;position:absolute;inset-inline:0;bottom:0;height:calc(66px + env(safe-area-inset-bottom));padding:0 4px env(safe-area-inset-bottom);background:#0b0d12f5;border-top:1px solid var(--line);align-items:stretch;justify-content:space-around;z-index:9;backdrop-filter:blur(14px)}
  .bottom button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;color:var(--txt2);position:relative;padding:0;min-width:60px;flex:1}
  .bottom button i{font-style:normal;font-size:21px;line-height:1}
  .bottom button.on{color:var(--gold)}
  .bottom button.on::after{content:"";position:absolute;top:0;width:24px;height:3px;border-radius:0 0 3px 3px;background:var(--gold)}
  .bottom button .badge{position:absolute;top:8px;inset-inline-end:10px;padding:0 5px;line-height:15px}
  .bottom .cap{flex:0 0 76px;min-width:76px;margin-top:-22px;gap:4px}
  .bottom .cap .orb{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE08A,var(--gold) 45%,#8a6a10);box-shadow:0 8px 24px #ffc83766,0 0 0 5px var(--bg);display:grid;place-items:center;transition:transform .15s}
  .bottom .cap .orb::before{content:"✨";font-size:22px}
  .bottom .cap:active .orb{transform:scale(.94)}
  .bottom .cap small{font-size:10.5px;color:var(--gold);font-weight:700}
  .bottom .cap.on .orb{background:var(--s2);box-shadow:0 0 0 2px var(--gold),0 0 0 7px var(--bg)}
  .bottom .cap.on .orb::before{content:"▦";color:var(--gold);font-size:20px}
  .bottom .cap.on::after{display:none}

  /* agent mode fills the screen, with a header and a way back */
  .app.am .ag-h{display:flex;padding:8px 12px;border-bottom:1px solid var(--line)}
  .app.am .ag-h .x{display:none}
  .app.am .back-dash{display:grid}
  .app.am .agent{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .app.am .compose{margin-bottom:10px}
  .content{padding:14px 14px calc(90px + env(safe-area-inset-bottom))}
  .content.flush{padding:0 0 calc(70px + env(safe-area-inset-bottom))}
  .app:not(.am) .agent{display:none}  /* phone never uses the drawer: the centre button switches mode */

  /* bigger touch targets */
  .btn{min-height:40px}.btn.sm{min-height:34px}
  .ic{min-width:40px;min-height:40px}
  .compose .ic{width:40px;height:40px}
  .filters button,.seg button{min-height:36px}

  /* menu sheet */
  .sheet-scrim{position:fixed;inset:0;background:#000a;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s}
  .sheet{display:block;position:fixed;inset-inline:0;bottom:0;z-index:21;background:var(--s1);border:1px solid var(--line2);border-bottom:0;border-radius:22px 22px 0 0;padding:8px 14px calc(16px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .28s cubic-bezier(.2,.8,.2,1);max-height:88dvh;overflow:auto}
  .app.menu .sheet{transform:none}
  .app.menu .sheet-scrim{display:block;opacity:1;pointer-events:auto}
  .sheet-handle{width:44px;height:5px;border-radius:3px;background:var(--line2);margin:4px auto 12px}
  .sheet-me{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .sheet-me .av{width:40px;height:40px;font-size:15px}
  .sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .sheet-grid button{position:relative;border:1px solid var(--line);background:var(--s2);border-radius:14px;padding:12px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;color:var(--txt)}
  .sheet-grid button i{font-style:normal;font-size:24px;line-height:1}
  .sheet-grid button.on{border-color:var(--gold);background:var(--gold-s);color:var(--gold)}
  .sheet-grid .badge{position:absolute;top:6px;inset-inline-end:6px}
  .sheet-row{display:flex;gap:8px;margin-top:12px}
  .sheet-row .btn{flex:1;justify-content:center;min-height:46px}
  .sheet-row .btn svg{width:18px;height:18px}
}
@media (max-width:360px){.sheet-grid{grid-template-columns:repeat(3,1fr)}.bottom button{min-width:52px;font-size:10px}}

/* Agent quick-reply buttons */
.opts{display:flex;flex-direction:column;align-items:flex-start;gap:6px;align-self:flex-start;max-width:88%}
.opts button{border:1px solid var(--gold);background:var(--gold-s);color:var(--gold);border-radius:12px;padding:8px 14px;font-size:13px;font-weight:600;text-align:start;cursor:pointer}
.opts button:hover{background:var(--gold);color:#111}

/* Calls to action sit at the start (left in English, right in Arabic), under their heading */
h2 .btn,h2>button{float:none!important;display:flex;width:fit-content;margin:10px 0 0;font-size:13px}
.crew-hero,.ib-head,.home-head{flex-direction:column;align-items:flex-start}
.card>.btn,.card>a.btn{margin-inline-end:auto}
.rep{color:var(--mute);cursor:pointer;text-decoration:none}.rep:hover{color:#F87171}

/* In-place refresh: no entry animations on swap; a small pop on values that change */
.no-anim *{animation:none!important}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18);color:#7dd3fc}100%{transform:scale(1)}}
.bump{display:inline-block;animation:bump .35s ease}
.tbar i{transition:width .35s ease}