/* ================================================================
   GLOBAL RESET & BASE
   ================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-family:'Inter',system-ui,-apple-system,sans-serif;font-feature-settings:'cv01','cv03','cv04','cv11';
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;line-height:1.5;scroll-behavior:smooth}
body{background:var(--sys-bg);color:var(--sys-text);font-size:var(--ref-font-base);
  font-weight:var(--sys-font-wt);overflow-x:hidden;overscroll-behavior-y:none;
  min-height:100vh;min-height:100dvh;visibility:hidden;
  -webkit-tap-highlight-color:transparent;user-select:none}
body.ts-ready{visibility:visible}
button{border:none;background:none;font:inherit;color:inherit;cursor:pointer;
  outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible{box-shadow:var(--sys-focus);border-radius:var(--ref-radius-sm)}
input,textarea,select{font:inherit;color:inherit;border:none;outline:none;
  background:none;-webkit-tap-highlight-color:transparent}
input:focus-visible,textarea:focus-visible,select:focus-visible{box-shadow:var(--sys-focus)}
a{color:var(--sys-brand);text-decoration:none}
h1,h2,h3,h4,h5,h6{font-weight:var(--sys-font-wt-sb);line-height:1.25}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;
  animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---- CSS fallback if JS fails ---- */
@keyframes ts-unhide{to{visibility:visible}}
body{animation:ts-unhide 0s 3s forwards}

/* ================================================================
   LAYOUT — Views
   ================================================================ */
.view{display:none;width:100%;min-height:100vh;min-height:100dvh}
.view.active{display:flex;flex-direction:column;
  /* v2.10.0 fix: Explicit height creates a "definite main size" so flex:1
     children (sub-views) resolve their height correctly. Without this,
     iOS Safari treats the available space as infinite (WebKit Bug #137730)
     and overflow-y:auto on sub-views never triggers a scrollbar.
     min-height retained as fallback for edge cases. */
  height:100vh;height:100dvh}
#view-login.active{display:flex;align-items:center;justify-content:center}
#view-main{padding-bottom:calc(49px + env(safe-area-inset-bottom,0px));
  transition:transform .35s cubic-bezier(.32,.72,0,1),opacity .35s ease}
.sub-view{display:none;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:var(--ref-space-4);padding-top:calc(env(safe-area-inset-top,0px) + var(--ref-space-3))}
.sub-view.active{display:block}

/* ================================================================
   LOGIN
   ================================================================ */
#view-login{background:linear-gradient(145deg,var(--ref-brand-600) 0%,var(--ref-brand-900) 50%,var(--ref-brand-950) 100%);
  padding:var(--ref-space-4)}
.login-card{background:var(--sys-surface);border-radius:var(--ref-radius-2xl);
  padding:var(--ref-space-8) var(--ref-space-6);width:100%;max-width:380px;
  box-shadow:var(--sys-shadow-xl)}
.login-logo{text-align:center;margin-bottom:var(--ref-space-6)}
.login-logo .logo-mark{width:56px;height:56px;background:var(--ref-brand-500);
  border-radius:var(--ref-radius-lg);display:inline-flex;align-items:center;
  justify-content:center;color:#fff;margin-bottom:var(--ref-space-3)}
.login-logo h1{font-size:var(--ref-font-xl);font-weight:var(--sys-font-wt-b);letter-spacing:-.02em}
.login-logo p{font-size:var(--ref-font-sm);color:var(--sys-text-sec);margin-top:var(--ref-space-1)}
.login-version{font-size:var(--ref-font-xs);color:var(--sys-text-ter);text-align:center;margin-top:var(--ref-space-4)}
.fg{margin-bottom:var(--ref-space-4)}
.fg label{display:block;font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md);
  color:var(--sys-text-sec);margin-bottom:var(--ref-space-1)}
.fg input,.fg select{width:100%;padding:var(--ref-space-3) var(--ref-space-4);
  border:1.5px solid var(--sys-border);border-radius:var(--ref-radius-md);
  background:var(--sys-bg);font-size:var(--ref-font-base);min-height:52px;
  transition:border-color var(--ref-dur-fast) var(--ref-ease)}
.fg input:focus,.fg select:focus{border-color:var(--sys-brand)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ref-space-2);
  padding:var(--ref-space-3) var(--ref-space-5);border-radius:var(--ref-radius-md);
  font-size:var(--ref-font-base);font-weight:var(--sys-font-wt-md);min-height:52px;
  transition:all var(--ref-dur-fast) var(--ref-ease);cursor:pointer}
.btn-brand{background:var(--sys-brand);color:var(--sys-text-brand);width:100%}
.btn-brand:hover{background:var(--sys-brand-hover)}
.btn-brand:active{background:var(--sys-brand-dark);transform:scale(.98)}
.btn-outline{border:1.5px solid var(--sys-border);color:var(--sys-text);background:var(--sys-surface)}
.btn-outline:hover{border-color:var(--sys-brand);color:var(--sys-brand)}
.btn-sm{min-height:36px;padding:var(--ref-space-2) var(--ref-space-3);font-size:var(--ref-font-sm);
  border-radius:var(--ref-radius-sm)}
.btn-icon{width:48px;height:48px;min-height:48px;border-radius:var(--ref-radius-md);
  display:inline-flex;align-items:center;justify-content:center}
.btn-icon:hover{background:var(--sys-brand-light)}

/* ================================================================
   GREETING ROW
   ================================================================ */
.greeting-row{padding:var(--ref-space-2) 0 var(--ref-space-1)}
.greeting-row h2{font-size:var(--ref-font-xl);font-weight:var(--sys-font-wt-b);
  letter-spacing:-.02em;color:var(--sys-text);margin:0;line-height:1.2}

/* ================================================================
   DASHBOARD SEARCH TRIGGER
   ================================================================ */
.dash-search-trigger{display:flex;align-items:center;gap:var(--ref-space-2);
  width:100%;padding:var(--ref-space-3) var(--ref-space-4);
  background:var(--sys-surface);border:1.5px solid var(--sys-border);
  border-radius:var(--ref-radius-full);min-height:48px;
  color:var(--sys-text-ter);font-size:var(--ref-font-base);
  margin-bottom:var(--ref-space-3);
  transition:border-color var(--ref-dur-fast) var(--ref-ease),
  box-shadow var(--ref-dur-fast) var(--ref-ease)}
.dash-search-trigger:hover{border-color:var(--sys-brand);box-shadow:var(--sys-shadow-sm)}
.dash-search-trigger:active{transform:scale(.99)}
.dash-search-trigger svg{flex-shrink:0}
.dash-search-trigger span{flex:1;text-align:left}

/* ================================================================
   QUICK STATS ROW
   ================================================================ */
.quick-stats{display:flex;gap:var(--ref-space-3);overflow-x:auto;padding:var(--ref-space-3) 0;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.quick-stats::-webkit-scrollbar{display:none}
.stat-pill{flex:0 0 auto;display:flex;align-items:center;gap:var(--ref-space-2);
  padding:var(--ref-space-2) var(--ref-space-4);background:var(--sys-surface);
  border:1px solid var(--sys-border);border-radius:var(--ref-radius-full);
  box-shadow:var(--sys-shadow-sm);white-space:nowrap;min-height:44px}
.stat-pill .stat-icon{width:24px;height:24px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.stat-pill .stat-icon svg{width:14px;height:14px}
.stat-pill .stat-val{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-sb)}
.stat-pill .stat-label{font-size:var(--ref-font-xs);color:var(--sys-text-sec)}

/* ================================================================
   SEARCH BAR (inline — hidden by default, kept for compatibility)
   ================================================================ */
.search-wrap{position:relative;margin-bottom:var(--ref-space-3)}
.search-bar{display:flex;align-items:center;gap:var(--ref-space-2);
  background:var(--sys-surface);border:1.5px solid var(--sys-border);
  border-radius:var(--ref-radius-full);padding:0 var(--ref-space-4);
  min-height:52px;transition:border-color var(--ref-dur-fast) var(--ref-ease),
  box-shadow var(--ref-dur-fast) var(--ref-ease)}
.search-bar:focus-within{border-color:var(--sys-brand);box-shadow:var(--sys-shadow-md)}
.search-bar svg{color:var(--sys-text-ter);flex-shrink:0;width:18px;height:18px}
.search-bar input{flex:1;background:none;font-size:var(--ref-font-base);
  color:var(--sys-text);min-height:50px;user-select:text}
.search-bar input::placeholder{color:var(--sys-text-ter)}
.search-results{position:absolute;top:calc(100% + 4px);left:0;right:0;
  background:var(--sys-surface);border:1px solid var(--sys-border);
  border-radius:var(--ref-radius-lg);box-shadow:var(--sys-shadow-lg);
  max-height:320px;overflow-y:auto;z-index:90;display:none}
.search-results.show{display:block}
.search-item{display:flex;align-items:center;gap:var(--ref-space-3);
  padding:var(--ref-space-3) var(--ref-space-4);cursor:pointer;
  transition:background var(--ref-dur-fast) var(--ref-ease)}
.search-item:hover{background:var(--sys-bg-alt)}
.search-item .si-icon{width:36px;height:36px;border-radius:var(--ref-radius-sm);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.search-item .si-text{flex:1;min-width:0}
.search-item .si-name{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md)}
.search-item .si-hint{font-size:var(--ref-font-xs);color:var(--sys-text-ter);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-item .si-slash{font-size:var(--ref-font-xs);color:var(--sys-text-ter);
  font-family:monospace;background:var(--sys-bg-alt);padding:2px 6px;
  border-radius:var(--ref-radius-xs);flex-shrink:0}

/* ================================================================
   RECENTLY USED
   ================================================================ */
.section-label{font-size:var(--ref-font-xs);font-weight:var(--sys-font-wt-sb);
  color:var(--sys-text-ter);text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:var(--ref-space-2);padding-left:var(--ref-space-1)}
.recent-row{display:flex;gap:var(--ref-space-3);overflow-x:auto;padding-bottom:var(--ref-space-3);
  scrollbar-width:none}
.recent-row::-webkit-scrollbar{display:none}
.recent-chip{flex:0 0 auto;display:flex;align-items:center;gap:var(--ref-space-2);
  padding:var(--ref-space-2) var(--ref-space-4) var(--ref-space-2) var(--ref-space-2);
  background:var(--sys-surface);border:1px solid var(--sys-border);
  border-radius:var(--ref-radius-full);cursor:pointer;min-height:48px;
  transition:all var(--ref-dur-fast) var(--ref-ease)}
.recent-chip:hover{border-color:var(--sys-brand);background:var(--sys-brand-light)}
.recent-chip:active{transform:scale(.97)}
.recent-chip .rc-icon{width:32px;height:32px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.recent-chip .rc-icon svg{width:16px;height:16px}
.recent-chip .rc-name{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md);
  white-space:nowrap}

/* ================================================================
   APP GRID
   ================================================================ */
.cat-section{margin-bottom:var(--ref-space-5)}
.cat-label{font-size:var(--ref-font-xs);font-weight:var(--sys-font-wt-sb);
  color:var(--sys-text-ter);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:var(--ref-space-3);padding-left:var(--ref-space-1);
  display:flex;align-items:center;gap:var(--ref-space-2)}
.cat-label .cat-dot{width:8px;height:8px;border-radius:50%}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ref-space-4)}
@media(min-width:400px){.app-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:600px){.app-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:900px){.app-grid{grid-template-columns:repeat(6,1fr)}}
.app-ic{display:flex;flex-direction:column;align-items:center;gap:var(--ref-space-2);
  padding:var(--ref-space-2);cursor:pointer;border-radius:var(--ref-radius-md);
  transition:transform var(--ref-dur-fast) var(--ref-ease)}
.app-ic:hover{transform:translateY(-2px)}
.app-ic:active{transform:scale(.92)}
.app-ic .ic{width:68px;height:68px;border-radius:var(--ref-radius-lg);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:var(--sys-shadow-sm);transition:box-shadow var(--ref-dur-fast) var(--ref-ease)}
.app-ic:hover .ic{box-shadow:var(--sys-shadow-md)}
.app-ic .ic svg{width:30px;height:30px;stroke-width:var(--sys-icon-wt)}
.app-ic .nm{font-size:var(--ref-font-xs);font-weight:var(--sys-font-wt-md);
  text-align:center;color:var(--sys-text-sec);line-height:1.2;
  max-width:80px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Staggered App Grid Animations ---- */
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.app-ic{opacity:0;animation:fadeSlideUp var(--ref-dur-norm) var(--ref-ease-out) forwards}
.app-ic:nth-child(1){animation-delay:30ms}.app-ic:nth-child(2){animation-delay:60ms}
.app-ic:nth-child(3){animation-delay:90ms}.app-ic:nth-child(4){animation-delay:120ms}
.app-ic:nth-child(5){animation-delay:150ms}.app-ic:nth-child(6){animation-delay:180ms}
.app-ic:nth-child(7){animation-delay:210ms}.app-ic:nth-child(8){animation-delay:240ms}

/* ---- Large Action Cards (role-adaptive ≤4 apps) ---- */
.app-grid-hero{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ref-space-4);
  margin-bottom:var(--ref-space-5)}
.action-card{display:flex;align-items:center;gap:var(--ref-space-4);
  padding:var(--ref-space-5);background:var(--sys-surface);
  border:1px solid var(--sys-border);border-radius:var(--ref-radius-xl);
  cursor:pointer;min-height:88px;
  box-shadow:var(--sys-shadow-sm);
  transition:all var(--ref-dur-fast) var(--ref-ease);
  opacity:0;animation:fadeSlideUp var(--ref-dur-norm) var(--ref-ease-out) forwards}
.action-card:hover{box-shadow:var(--sys-shadow-md);transform:translateY(-2px)}
.action-card:active{transform:scale(.97)}
.action-card:nth-child(1){animation-delay:30ms}.action-card:nth-child(2){animation-delay:90ms}
.action-card:nth-child(3){animation-delay:150ms}.action-card:nth-child(4){animation-delay:210ms}
.action-card .ac-icon{width:56px;height:56px;border-radius:var(--ref-radius-lg);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.action-card .ac-icon svg{width:28px;height:28px;stroke-width:var(--sys-icon-wt)}
.action-card .ac-text{flex:1;min-width:0}
.action-card .ac-name{font-size:var(--ref-font-md);font-weight:var(--sys-font-wt-sb)}
.action-card .ac-desc{font-size:var(--ref-font-sm);color:var(--sys-text-sec);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* ---- View Fade Animation ---- */
@keyframes viewFadeIn{from{opacity:0}to{opacity:1}}
.sub-view.active{animation:viewFadeIn var(--ref-dur-norm) var(--ref-ease)}

/* ================================================================
   KPI METRIC GRID (v2.8.0 — Owner / Admin / Mfg views)
   ================================================================ */
.kpi-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--ref-space-3);padding:var(--ref-space-2) 0;margin-bottom:var(--ref-space-3)}
.kpi-card{
  background:var(--sys-surface);border:1px solid var(--sys-border);
  border-radius:var(--ref-radius-lg);padding:var(--ref-space-3) var(--ref-space-4);
  display:flex;flex-direction:column;gap:2px;min-height:72px;
  box-shadow:var(--sys-shadow-sm);transition:box-shadow var(--ref-dur-fast) var(--ref-ease)}
.kpi-card:hover{box-shadow:var(--sys-shadow-md)}
.kpi-card.kpi-primary{
  padding:var(--ref-space-4) var(--ref-space-5);min-height:96px}
.kpi-card.kpi-action{cursor:pointer}
.kpi-card.kpi-action:hover{border-color:var(--sys-brand);background:var(--sys-brand-light)}
.kpi-card.kpi-action:active{transform:scale(.97)}
.kpi-label{
  font-size:var(--ref-font-xs);font-weight:var(--sys-font-wt-md);
  color:var(--sys-text-sec);text-transform:uppercase;letter-spacing:.04em}
.kpi-value{
  font-size:var(--ref-font-xl);font-weight:var(--sys-font-wt-b);
  color:var(--sys-text);line-height:1.1}
.kpi-card.kpi-primary .kpi-value{font-size:var(--ref-font-2xl)}
.kpi-sub{font-size:var(--ref-font-xs);color:var(--sys-text-ter);margin-top:2px}
.kpi-icon{display:flex;align-items:center;margin-bottom:2px}
.kpi-icon svg{width:20px;height:20px;stroke-width:var(--sys-icon-wt)}
/* KPI loading shimmer & loaded flash */
.kpi-loading{
  background:linear-gradient(90deg,var(--sys-bg-alt) 25%,var(--sys-border) 50%,var(--sys-bg-alt) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;
  border-radius:var(--ref-radius-xs);color:transparent!important;
  min-width:40px;min-height:1.1em}
@keyframes kpiFadeIn{from{opacity:.3}to{opacity:1}}
.kpi-loaded{animation:kpiFadeIn .3s ease forwards}
/* Responsive: 4-col on wider screens, primary cards span 2 */
@media(min-width:600px){
  .kpi-grid{grid-template-columns:repeat(4,1fr)}
  .kpi-card.kpi-primary{grid-column:span 2}}
@media(min-width:900px){
  .kpi-grid:not(.kpi-grid-compact){grid-template-columns:repeat(4,1fr)}}

/* ---- Sunlight overrides ---- */
[data-theme="sunlight"] .action-card{border:2.5px solid #000;box-shadow:none}
[data-theme="sunlight"] .app-ic .ic{border:2.5px solid #000;box-shadow:none}
[data-theme="sunlight"] .stat-pill{border:2px solid #000;box-shadow:none}
[data-theme="sunlight"] .kpi-card{border:2.5px solid #000;box-shadow:none}
[data-theme="sunlight"] .kpi-card.kpi-primary{border-width:3px}
[data-theme="sunlight"] .recent-chip{border:2px solid #000}
[data-theme="sunlight"] .search-bar{border:2px solid #000}
[data-theme="sunlight"] .dash-search-trigger{border:2px solid #000}
[data-theme="sunlight"] .bnav{border-top:2px solid #000}

/* ================================================================
   BOTTOM SHEET (App Interaction Panel — legacy, kept for plugins)
   ================================================================ */
.sheet-overlay{position:fixed;inset:0;background:var(--sys-overlay);z-index:200;
  opacity:0;pointer-events:none;transition:opacity var(--ref-dur-norm) var(--ref-ease)}
.sheet-overlay.show{opacity:1;pointer-events:auto}
.bottom-sheet{position:fixed;bottom:0;left:0;right:0;z-index:210;
  background:var(--sys-surface);border-radius:var(--ref-radius-2xl) var(--ref-radius-2xl) 0 0;
  box-shadow:var(--sys-shadow-xl);transform:translateY(100%);
  transition:transform var(--ref-dur-slow) var(--ref-ease-spring);
  max-height:92dvh;display:flex;flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom,0)}
.bottom-sheet.show{transform:translateY(0)}
.sheet-handle{width:36px;height:4px;background:var(--sys-border-strong);
  border-radius:var(--ref-radius-full);margin:var(--ref-space-3) auto var(--ref-space-2);flex-shrink:0}
.sheet-header{display:flex;align-items:center;gap:var(--ref-space-3);
  padding:0 var(--ref-space-5) var(--ref-space-4);border-bottom:1px solid var(--sys-border)}
.sheet-header .sh-icon{width:44px;height:44px;border-radius:var(--ref-radius-md);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.sheet-header .sh-icon svg{width:22px;height:22px;stroke-width:var(--sys-icon-wt)}
.sheet-header .sh-info{flex:1;min-width:0}
.sheet-header .sh-title{font-size:var(--ref-font-lg);font-weight:var(--sys-font-wt-sb)}
.sheet-header .sh-desc{font-size:var(--ref-font-sm);color:var(--sys-text-sec)}
.sheet-header .sh-close{color:var(--sys-text-ter)}
.sheet-body{flex:1;overflow-y:auto;padding:var(--ref-space-4) var(--ref-space-5);
  -webkit-overflow-scrolling:touch}
.sheet-body .fg{margin-bottom:var(--ref-space-4)}
.sheet-body .fg label{display:block;font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md);
  color:var(--sys-text-sec);margin-bottom:var(--ref-space-1)}
.sheet-body .fg input,.sheet-body .fg select,.sheet-body .fg textarea{width:100%;
  padding:var(--ref-space-3) var(--ref-space-4);border:1.5px solid var(--sys-border);
  border-radius:var(--ref-radius-md);background:var(--sys-bg);font-size:var(--ref-font-base);
  min-height:52px;transition:border-color var(--ref-dur-fast) var(--ref-ease)}
.sheet-body .fg input:focus,.sheet-body .fg select:focus,.sheet-body .fg textarea:focus{
  border-color:var(--sys-brand)}
.sheet-body .fg textarea{min-height:80px;resize:vertical}
.sheet-footer{padding:var(--ref-space-4) var(--ref-space-5);border-top:1px solid var(--sys-border);
  display:flex;gap:var(--ref-space-3)}
.sheet-footer .btn{flex:1}

/* ---- Output area ---- */
.output-area{margin-top:var(--ref-space-4);padding:var(--ref-space-4);
  background:var(--sys-bg-alt);border-radius:var(--ref-radius-md);
  border-left:3px solid var(--sys-success);font-size:var(--ref-font-sm);
  font-family:'Inter',monospace;line-height:1.65;white-space:pre-wrap;
  word-break:break-word;display:none;color:var(--sys-text)}
.output-area.visible{display:block}
.output-area.loading{border-left-color:var(--sys-brand)}

/* Shimmer */
.shimmer{background:linear-gradient(90deg,var(--sys-bg-alt) 25%,var(--sys-border) 50%,var(--sys-bg-alt) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--ref-radius-sm);
  height:14px;margin:var(--ref-space-2) 0}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ================================================================
   BOTTOM NAVIGATION (3-item: Dashboard | Logo | Chat)
   ================================================================ */
.bnav{position:fixed;bottom:0;left:0;right:0;z-index:150;
  background:var(--sys-surface-blur);backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--sys-border);
  padding-bottom:env(safe-area-inset-bottom,0);
  display:flex;align-items:center;justify-content:center;height:49px;
  transition:transform .35s cubic-bezier(.32,.72,0,1)}

/* Left + Right nav items (Apps, Chat) */
.ni{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;flex:1;min-height:44px;color:var(--sys-text-ter);
  transition:color var(--ref-dur-fast) var(--ref-ease);position:relative;padding:4px 0}
.ni svg{width:22px;height:22px;stroke-width:var(--sys-icon-wt);
  transition:all var(--ref-dur-fast) var(--ref-ease)}
.ni .ni-label{font-size:var(--ref-font-xs);font-weight:var(--sys-font-wt-md)}
.ni.active{color:var(--sys-brand)}
.ni.active svg{stroke-width:calc(var(--sys-icon-wt) + .5)}
.ni.active::before{content:'';position:absolute;top:4px;width:36px;height:28px;
  background:var(--sys-brand-light);border-radius:var(--ref-radius-full);z-index:-1}

/* Center logo button */
.bnav-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:4px var(--ref-space-4);height:100%;cursor:pointer;
  transition:opacity var(--ref-dur-fast) var(--ref-ease)}
.bnav-logo:hover{opacity:.8}
.bnav-logo:active{transform:scale(.95)}
.bnav-logo img{max-width:100px;max-height:36px;width:auto;height:auto;object-fit:contain}
.bnav-logo-text{font-size:var(--ref-font-lg);font-weight:var(--sys-font-wt-b);
  color:var(--sys-brand);letter-spacing:-.02em}

/* Settings-active state: highlight logo when settings view is open */
.bnav-logo.settings-active{opacity:1;position:relative}
.bnav-logo.settings-active::after{content:'';position:absolute;bottom:2px;
  width:24px;height:3px;background:var(--sys-brand);border-radius:var(--ref-radius-full)}

/* FAB (Floating Action Button) — REMOVED v2.6.3 */

/* ================================================================
   SETTINGS
   ================================================================ */
.profile-card{background:var(--sys-surface);border:1px solid var(--sys-border);
  border-radius:var(--ref-radius-lg);padding:var(--ref-space-5);
  display:flex;align-items:center;gap:var(--ref-space-4);margin-bottom:var(--ref-space-5)}
.profile-avatar{width:54px;height:54px;border-radius:50%;background:var(--sys-brand);
  display:flex;align-items:center;justify-content:center;color:var(--sys-text-brand);
  font-size:var(--ref-font-xl);font-weight:var(--sys-font-wt-b);flex-shrink:0}
.profile-info h3{font-size:var(--ref-font-lg);font-weight:var(--sys-font-wt-sb)}
.profile-info p{font-size:var(--ref-font-sm);color:var(--sys-text-sec)}
.settings-section{margin-bottom:var(--ref-space-5)}
.settings-section h4{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-sb);
  color:var(--sys-text-ter);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:var(--ref-space-3)}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ref-space-3)}
.theme-btn{padding:var(--ref-space-3);border:2px solid var(--sys-border);
  border-radius:var(--ref-radius-md);text-align:center;min-height:56px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  transition:all var(--ref-dur-fast) var(--ref-ease);font-size:var(--ref-font-xs);
  font-weight:var(--sys-font-wt-md)}
.theme-btn:hover{border-color:var(--sys-brand)}
.theme-btn.active{border-color:var(--sys-brand);background:var(--sys-brand-light);
  color:var(--sys-brand)}
.theme-btn .tb-preview{width:28px;height:28px;border-radius:50%;border:2px solid var(--sys-border)}
.settings-row{display:flex;align-items:center;justify-content:space-between;
  padding:var(--ref-space-4);background:var(--sys-surface);
  border:1px solid var(--sys-border);border-radius:var(--ref-radius-md);
  margin-bottom:var(--ref-space-2);min-height:56px}
.settings-row .sr-left{display:flex;align-items:center;gap:var(--ref-space-3)}
.settings-row .sr-left svg{color:var(--sys-text-sec);width:20px;height:20px}
.settings-row .sr-label{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md)}
.settings-row .sr-right{font-size:var(--ref-font-sm);color:var(--sys-text-sec)}
.status-badge{display:inline-flex;align-items:center;gap:var(--ref-space-1);
  padding:var(--ref-space-1) var(--ref-space-3);border-radius:var(--ref-radius-full);
  font-size:var(--ref-font-xs);font-weight:var(--sys-font-wt-md)}
.status-badge.online{background:rgba(16,185,129,.12);color:var(--ref-green-600)}
.status-badge.offline{background:rgba(239,68,68,.12);color:var(--ref-red-600)}
.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

/* ================================================================
   TOAST
   ================================================================ */
.toast-container{position:fixed;top:calc(env(safe-area-inset-top,0) + 16px);
  left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;
  gap:var(--ref-space-2);pointer-events:none;width:calc(100% - 32px);max-width:400px}
.toast{background:var(--sys-surface-raised);color:var(--sys-text);
  padding:var(--ref-space-3) var(--ref-space-4);border-radius:var(--ref-radius-md);
  box-shadow:var(--sys-shadow-lg);border:1px solid var(--sys-border);
  font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md);
  display:flex;align-items:center;gap:var(--ref-space-2);
  transform:translateY(-20px);opacity:0;pointer-events:auto;
  animation:toastIn var(--ref-dur-norm) var(--ref-ease) forwards}
@keyframes toastIn{to{transform:translateY(0);opacity:1}}
.toast.out{animation:toastOut var(--ref-dur-norm) var(--ref-ease) forwards}
@keyframes toastOut{to{transform:translateY(-20px);opacity:0}}

/* ================================================================
   COMMAND PALETTE (Spotlight)
   ================================================================ */
.cmd-overlay{position:fixed;inset:0;background:var(--sys-overlay);z-index:250;
  display:none;align-items:flex-start;justify-content:center;padding-top:80px}
.cmd-overlay.show{display:flex}
.cmd-box{background:var(--sys-surface);border-radius:var(--ref-radius-xl);
  box-shadow:var(--sys-shadow-xl);width:calc(100% - 32px);max-width:480px;
  overflow:hidden}
.cmd-input-wrap{display:flex;align-items:center;gap:var(--ref-space-3);
  padding:var(--ref-space-4);border-bottom:1px solid var(--sys-border)}
.cmd-input-wrap svg{color:var(--sys-text-ter);flex-shrink:0}
.cmd-input-wrap input{flex:1;font-size:var(--ref-font-lg);background:none;user-select:text}
.cmd-results{max-height:360px;overflow-y:auto}
.cmd-item{display:flex;align-items:center;gap:var(--ref-space-3);
  padding:var(--ref-space-3) var(--ref-space-4);cursor:pointer;
  transition:background var(--ref-dur-fast) var(--ref-ease)}
.cmd-item:hover,.cmd-item.focused{background:var(--sys-brand-light)}
.cmd-item .ci-icon{width:36px;height:36px;border-radius:var(--ref-radius-sm);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.cmd-item .ci-icon svg{width:18px;height:18px}
.cmd-item .ci-text{flex:1}
.cmd-item .ci-name{font-size:var(--ref-font-sm);font-weight:var(--sys-font-wt-md)}
.cmd-item .ci-desc{font-size:var(--ref-font-xs);color:var(--sys-text-ter)}
.cmd-item .ci-shortcut{font-size:var(--ref-font-xs);color:var(--sys-text-ter);
  font-family:monospace;background:var(--sys-bg-alt);padding:2px 8px;
  border-radius:var(--ref-radius-xs);flex-shrink:0}
.cmd-empty{padding:var(--ref-space-8);text-align:center;color:var(--sys-text-ter);
  font-size:var(--ref-font-sm)}

/* ================================================================
   BUG REPORT — Moved to bug-reporter.css (v2.7.0)
   ================================================================ */

/* ================================================================
   SUNLIGHT MODE SPECIFIC
   ================================================================ */
[data-theme="sunlight"] .bottom-sheet{border:2px solid #000;border-bottom:none}
[data-theme="sunlight"] .profile-card{border:2px solid #000}
[data-theme="sunlight"] .settings-row{border:2px solid #000}
[data-theme="sunlight"] .theme-btn{border:2px solid #000}
[data-theme="sunlight"] .toast{border:2px solid #000}


/* ================================================================
   DASHBOARD WIDGETS (v2.0)
   ================================================================ */
.dash-widget-zone{
  display:flex;flex-direction:column;gap:var(--ref-space-4);
  margin-bottom:var(--ref-space-5);
}
.dash-widget-container{
  background:var(--sys-surface);border:1px solid var(--sys-border);
  border-radius:var(--ref-radius-xl);overflow:hidden;
  box-shadow:var(--sys-shadow-sm);
}
.dash-widget-header{
  display:flex;align-items:center;gap:var(--ref-space-3);
  padding:var(--ref-space-3) var(--ref-space-4);
  border-bottom:1px solid var(--sys-border);background:var(--sys-bg-alt);
}
.dash-widget-header .dw-icon{
  width:32px;height:32px;border-radius:var(--ref-radius-sm);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}
.dash-widget-header .dw-icon svg{width:18px;height:18px}
.dash-widget-header .dw-title{
  font-size:var(--ref-font-md);font-weight:var(--sys-font-wt-sb);margin:0;
}
.dash-widget-body{padding:var(--ref-space-4)}

/* Sunlight overrides for widgets */
[data-theme="sunlight"] .dash-widget-container{
  border:2px solid #000;box-shadow:none;
}
[data-theme="sunlight"] .dash-widget-header{
  border-bottom:2px solid #000;background:#fff;
}

/* ================================================================
   FULL-SCREEN APP VIEWPORT
   ================================================================ */
.app-viewport{position:fixed;inset:0;z-index:200;background:var(--sys-bg);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.32,.72,0,1);
  will-change:transform;
  pointer-events:none}
.app-viewport.active{transform:translateY(0);pointer-events:auto}

/* ---- App Header (compact) ---- */
.app-header{display:flex;align-items:center;gap:var(--ref-space-2);
  padding:env(safe-area-inset-top,0) var(--ref-space-3) 0;
  min-height:56px;background:var(--sys-surface);
  border-bottom:1px solid var(--sys-border);flex-shrink:0}
.app-back{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--ref-radius-md);color:var(--sys-brand)}
.app-back:hover{background:var(--sys-brand-light)}
.app-header-info{display:flex;align-items:center;gap:var(--ref-space-2);flex:1;min-width:0}
.app-header-icon{width:28px;height:28px;border-radius:var(--ref-radius-sm);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.app-header-icon svg{width:16px;height:16px}
.app-header-title{font-size:var(--ref-font-md);font-weight:var(--sys-font-wt-sb);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-header-actions{display:flex;align-items:center;gap:var(--ref-space-1)}

/* ---- App Body ---- */
.app-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.app-body.has-iframe{overflow:hidden}
.app-body iframe{width:100%;height:100%;border:none;display:block}

/* ---- Loading & Error states ---- */
.app-loading{display:flex;align-items:center;justify-content:center;height:200px;
  color:var(--sys-text-sec)}
.app-loading-spinner{width:28px;height:28px;border:3px solid var(--sys-border);
  border-top-color:var(--sys-brand);border-radius:50%;animation:appSpin .7s linear infinite}
@keyframes appSpin{to{transform:rotate(360deg)}}
.app-error{padding:var(--ref-space-6);text-align:center;color:var(--sys-text-sec);
  font-size:var(--ref-font-sm)}

/* ---- Chrome transitions when app is active ---- */
body.app-active .bnav{transform:translateY(100%);pointer-events:none}
body.app-active #view-main{pointer-events:none}

/* ---- Sunlight overrides for viewport ---- */
[data-theme="sunlight"] .app-header{border-bottom:2px solid #000}

/* ================================================================
   DESKTOP RESPONSIVE BREAKPOINTS
   ================================================================ */
@media(min-width: 768px) {
  /* Bottom nav becomes left sidebar */
  .bnav {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;            /* ← UNSET mobile right:0 */
    width: 80px;
    height: 100%;           /* ← Explicit full height (not auto) */
    height: 100dvh;         /* ← Modern override for dynamic viewport */
    flex-direction: column;
    justify-content: flex-start;
    padding-top: var(--ref-space-4);
    padding-bottom: var(--ref-space-2);
    border-top: none;
    border-right: 1px solid var(--sys-border);
    transition: transform .35s cubic-bezier(.32,.72,0,1);
    overflow-y: auto;       /* ← Scrollable if content overflows */
    overflow-x: hidden;
  }
  .ni {
    flex: none;
    width: 100%;
    min-height: 72px;
  }
  /* Logo in sidebar: sits between Dashboard and Chat */
  .bnav-logo {
    width: 100%;
    padding: var(--ref-space-4) var(--ref-space-2);
    justify-content: center;
  }
  .bnav-logo img {
    max-width: 64px;
    max-height: 32px;
  }
  .bnav-logo.settings-active::after {
    bottom: auto;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
  }

  #view-main {
    padding-bottom: 0;
    padding-left: 80px;
  }

  /* App viewport: scale-up animation on desktop (more native feel) */
  .app-viewport {
    transform: scale(0.96);
    opacity: 0;
    transition: transform .25s cubic-bezier(.32,.72,0,1), opacity .2s ease;
  }
  .app-viewport.active {
    transform: scale(1);
    opacity: 1;
  }

  /* Hide sidebar when app is active (slide left on desktop) */
  body.app-active .bnav {
    transform: translateX(-100%);
  }
}

@media(min-width: 1024px) {
  .app-grid {
    grid-template-columns: repeat(8, 1fr);
  }
  .cmd-overlay {
    padding-top: 120px;
  }
}

/* v2.13.0: App Authorizations + Nutshell modal (company-wide) */
.ts-app-auth-card { margin-bottom: var(--ref-space-4, 16px); }
.ts-app-auth-card .ts-auth-hint {
  font-size: var(--ref-font-xs, 13px);
  color: var(--sys-text-sec);
  margin: var(--ref-space-1, 4px) 0 var(--ref-space-3, 12px);
  line-height: 1.45;
}
.ts-app-auth-card .btn.is-loading { opacity: .7; cursor: wait; }
.ts-app-auth-card .ts-auth-divider {
  height: 1px;
  background: var(--sys-border);
  margin: var(--ref-space-4, 16px) 0;
}
.ts-app-auth-card .ts-auth-scope {
  font-size: var(--ref-font-xs, 12px);
  font-weight: 400;
  color: var(--sys-text-sec);
  margin-left: 6px;
}

/* Nutshell modal */
.ts-ns-overlay {
  position: fixed; inset: 0;
  background: var(--sys-overlay, rgba(0,0,0,.45));
  display: flex; align-items: center; justify-content: center;
  padding: var(--ref-space-4, 16px);
  z-index: 9998;
  opacity: 0;
  transition: opacity var(--ref-dur-norm, 250ms) var(--ref-ease, cubic-bezier(.4,0,.2,1));
}
.ts-ns-overlay.show { opacity: 1; }
.ts-ns-modal {
  background: var(--sys-surface);
  color: var(--sys-text);
  border: 1px solid var(--sys-border);
  border-radius: var(--ref-radius-lg, 16px);
  box-shadow: var(--sys-shadow-xl);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
}
.ts-ns-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ref-space-4, 16px);
  border-bottom: 1px solid var(--sys-border);
}
.ts-ns-header h3 {
  margin: 0;
  font-size: var(--ref-font-md, 19px);
  font-weight: var(--sys-font-wt-sb, 600);
  display: flex; align-items: center; gap: 8px;
}
.ts-ns-body {
  padding: var(--ref-space-4, 16px);
  display: flex; flex-direction: column; gap: var(--ref-space-3, 12px);
}
.ts-ns-label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: var(--ref-font-sm, 15px);
  font-weight: var(--sys-font-wt-md, 500);
}
.ts-ns-label input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sys-border-strong);
  border-radius: var(--ref-radius-sm, 8px);
  background: var(--sys-surface);
  color: var(--sys-text);
  font-size: var(--ref-font-base, 17px);
  box-sizing: border-box;
}
.ts-ns-label input:focus {
  outline: none;
  box-shadow: var(--sys-focus);
  border-color: var(--sys-brand);
}
.ts-ns-hint {
  font-size: var(--ref-font-xs, 13px);
  color: var(--sys-text-sec);
  margin: 0;
  line-height: 1.45;
}
.ts-ns-error {
  background: rgba(239,68,68,.1);
  color: var(--sys-error);
  border: 1px solid var(--sys-error);
  border-radius: var(--ref-radius-sm, 8px);
  padding: 10px 12px;
  font-size: var(--ref-font-xs, 13px);
}
.ts-ns-footer {
  padding: var(--ref-space-4, 16px);
  border-top: 1px solid var(--sys-border);
  display: flex; justify-content: flex-end; gap: var(--ref-space-2, 8px);
}
.ts-ns-footer .btn.is-loading { opacity: .7; cursor: wait; }