/* ============================================================
   AgentEdge — app-native.css
   A thin, ADDITIVE layer that makes any AgentEdge page feel like
   an installed native app rather than a web page. Theme-agnostic:
   builds on the cockpit tokens (--bbc-*) when present, with safe
   fallbacks so it also behaves on legacy light pages.

   Load AFTER bizbot-cockpit.css + agentedge-cockpit.css.
   Pairs with /js/app-native.js (toasts, transitions, offline).
   ============================================================ */

:root{
  --an-accent:#4F9CD9;
  --an-ok:#10B981;
  --an-warn:#F5B100;
  --an-err:#FF4F5E;
  --an-toast-bg:#0E1320;
  --an-toast-border:rgba(255,255,255,.10);
  --an-toast-text:#E7EEF7;
  --an-ease:cubic-bezier(.22,.61,.36,1);
}
body.cockpit{
  --an-accent:var(--bbc-accent,#4F9CD9);
  --an-toast-bg:var(--bbc-card,#0E1320);
  --an-toast-border:var(--bbc-border-2,rgba(255,255,255,.12));
  --an-toast-text:var(--bbc-text,#E7EEF7);
}

/* ── 1. Kill the "web page" feel ─────────────────────────────
   No text selection on chrome, no blue tap flash, no callout,
   no pull-to-refresh / rubber-band overscroll on the shell.    */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  overscroll-behavior-y:none;
}
/* default: UI chrome is not selectable … */
.sidebar, .topbar, .mobile-nav, .nav-item, .btn, .btn-sm, .ck-btn,
button, .tool-tag, .stat-label, label, .badge, .user-pill,
.nav-section-label, .section-title, .list-card-title{
  -webkit-user-select:none; user-select:none;
}
/* … but real content + form fields stay selectable */
input, textarea, select, [contenteditable],
p, .tool-desc, .list-item-name, .stat-value, .ck-table td,
.selectable, [data-selectable]{
  -webkit-user-select:text; user-select:text;
}

/* ── 2. Momentum + quiet scrollbars everywhere (not just .cockpit) ── */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:9px; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); }
*::-webkit-scrollbar-track{ background:transparent; }
.an-scroll, .content, .main{ -webkit-overflow-scrolling:touch; }

/* ── 3. Tactile press micro-interactions ──────────────────── */
.btn, .btn-sm, .ck-btn, .welcome-cta, .fb-cta, .alert-btn,
.tool-card, .nav-item, .user-pill, button:not(:disabled),
[data-press]{
  transition:transform .12s var(--an-ease), box-shadow .16s var(--an-ease),
             background .16s var(--an-ease), border-color .16s var(--an-ease), opacity .16s;
}
.btn:active, .btn-sm:active, .ck-btn:active, .welcome-cta:active,
.fb-cta:active, button:not(:disabled):active, [data-press]:active{
  transform:translateY(1px) scale(.985);
}
.tool-card:active, .nav-item:active, .user-pill:active{ transform:scale(.99); }
@media (hover:hover){
  .tool-card{ transition:transform .18s var(--an-ease), box-shadow .18s var(--an-ease), border-color .18s; }
}

/* ── 4. Page transitions (no white flash, app-style fade) ──── */
@keyframes anFadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.an-enter .main, .an-enter main, .an-enter .login-right, .an-enter .auth-shell,
.an-enter .app-shell{
  animation:anFadeIn .34s var(--an-ease) both;
}
body.an-leaving{ opacity:0; transition:opacity .16s ease; }

/* top progress bar shown during navigation / async work */
#an-progress{
  position:fixed; top:0; left:0; height:2.5px; width:0;
  background:linear-gradient(90deg,var(--an-accent),#7CC4FF);
  box-shadow:0 0 10px var(--an-accent);
  z-index:99999; opacity:0; pointer-events:none;
  transition:width .2s var(--an-ease), opacity .25s;
}
#an-progress.go{ opacity:1; }

/* ── 5. Toasts ─────────────────────────────────────────────── */
#an-toasts{
  position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  z-index:99998; display:flex; flex-direction:column; gap:10px;
  width:min(420px, calc(100vw - 32px)); pointer-events:none;
}
@media (min-width:768px){ #an-toasts{ left:auto; right:24px; bottom:24px; transform:none; align-items:flex-end; } }
.an-toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:12px;
  background:var(--an-toast-bg); color:var(--an-toast-text);
  border:1px solid var(--an-toast-border);
  border-left:3px solid var(--an-accent);
  border-radius:12px; padding:13px 16px;
  font:600 13.5px/1.45 var(--bbc-sans,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  box-shadow:0 16px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transform:translateY(14px); opacity:0;
  transition:transform .32s var(--an-ease), opacity .28s var(--an-ease);
}
.an-toast.in{ transform:none; opacity:1; }
.an-toast.out{ transform:translateY(8px) scale(.98); opacity:0; }
.an-toast .an-ic{ font-size:17px; line-height:1; flex:none; }
.an-toast .an-msg{ flex:1; min-width:0; }
.an-toast .an-x{
  flex:none; background:none; border:none; color:inherit; opacity:.5;
  font-size:18px; cursor:pointer; padding:0 2px; line-height:1;
}
.an-toast .an-x:hover{ opacity:1; }
.an-toast.ok{ border-left-color:var(--an-ok); }
.an-toast.ok .an-ic{ color:var(--an-ok); }
.an-toast.err{ border-left-color:var(--an-err); }
.an-toast.err .an-ic{ color:var(--an-err); }
.an-toast.warn{ border-left-color:var(--an-warn); }
.an-toast.warn .an-ic{ color:var(--an-warn); }
.an-toast .an-act{
  flex:none; background:none; border:none; color:var(--an-accent);
  font:700 12.5px/1 inherit; cursor:pointer; text-transform:uppercase; letter-spacing:.04em;
}

/* ── 6. Skeleton loaders ───────────────────────────────────── */
@keyframes anShimmer{ 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
.an-sk{
  display:block; border-radius:8px;
  background:linear-gradient(90deg,
    rgba(255,255,255,.05) 25%, rgba(255,255,255,.11) 37%, rgba(255,255,255,.05) 63%);
  background-size:200% 100%;
  animation:anShimmer 1.3s ease-in-out infinite;
}
.an-sk.line{ height:12px; margin:7px 0; }
.an-sk.line.sm{ height:10px; width:55%; }
.an-sk.line.lg{ height:18px; width:75%; }
.an-sk.block{ height:64px; }
.an-sk.avatar{ width:44px; height:44px; border-radius:50%; }

/* ── 7. Designed empty / error states ──────────────────────── */
.an-state{
  text-align:center; padding:40px 24px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--bbc-muted,#8A98AC);
}
.an-state .an-state-ic{
  font-size:34px; width:64px; height:64px; border-radius:18px;
  display:flex; align-items:center; justify-content:center; margin-bottom:6px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
}
.an-state h4{ font-size:15px; font-weight:800; color:var(--bbc-text,#E7EEF7); margin:0; }
.an-state p{ font-size:13px; line-height:1.55; max-width:340px; margin:0; }
.an-state .an-state-cta{
  margin-top:10px; display:inline-flex; align-items:center; gap:6px;
  background:var(--an-accent); color:#04121d; font-weight:800; font-size:13px;
  padding:10px 18px; border-radius:10px; text-decoration:none; border:none; cursor:pointer;
}

/* ── 8. Offline / connection banner ────────────────────────── */
#an-offline{
  position:fixed; left:50%; top:calc(10px + env(safe-area-inset-top,0px));
  transform:translateX(-50%) translateY(-140%);
  z-index:99997; display:flex; align-items:center; gap:9px;
  background:#2A1518; color:#FFD8DC; border:1px solid rgba(255,79,94,.4);
  border-radius:999px; padding:8px 16px; font-size:12.5px; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .4s var(--an-ease);
}
#an-offline.show{ transform:translateX(-50%) translateY(0); }
#an-offline.online{ background:#0E2A1C; color:#B8F2D4; border-color:rgba(16,185,129,.4); }

/* ── 9. Inputs feel native (no iOS zoom, soft focus ring) ──── */
@media (max-width:767px){
  input:not([type=checkbox]):not([type=radio]),
  textarea, select{ font-size:16px !important; }
}
input, textarea, select, button{ font-family:inherit; }

/* Placeholders were too dim on dark ("grey on black") — lift for legibility */
.cockpit ::placeholder{ color:#7C8BA0 !important; opacity:1; }
/* Email / tel / number / search inputs default to their intrinsic size when a
   page only styled input[type=text]; normalize them to full-width app fields. */
.cockpit input[type="email"],.cockpit input[type="tel"],.cockpit input[type="number"],
.cockpit input[type="url"],.cockpit input[type="search"]{ width:100%; }

/* ── 10. Reduced-motion respect ────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .an-enter .main, .an-enter main, .an-enter .login-right, .an-enter .auth-shell,
  .an-enter .app-shell, .an-sk, .an-toast, #an-offline, body.an-leaving{
    animation:none !important; transition:none !important;
  }
}