/* Chromes de navegação (parte 2) — trilho (nrail), abas inferiores (nbn),
 * pílula (npill), dock (ndock) e paleta de comandos (ncmd), portados 1:1
 * do protótipo Seletor de Variantes (bundle 8cd72241). */

/* ── trilho (clique na logo expande/recolhe) ─────────────── */
.nrail{ position:relative; z-index:2; flex:0 0 66px; min-width:0; display:flex; background:var(--surface);
  border-right:1px solid var(--border); flex-direction:column; padding:12px 0; transition:flex-basis .42s var(--ease-emphasized); }
.nrail.is-exp{ flex-basis:214px; }
.shell-nrail{ min-height:100vh; }
.nrail__nav{ position:relative; display:flex; flex-direction:column; gap:4px; width:100%; padding:0 10px; }
.nrail__thumb{ position:absolute; left:0; top:0; width:0; height:0; z-index:0; background:var(--primary-bg); border-radius:12px;
  transition:transform .42s var(--ease-spring), width .42s var(--ease-spring), height .3s var(--ease-spring); }
.nrail__row{ position:relative; z-index:1; display:flex; align-items:center; gap:12px; height:44px; width:100%; padding:0 12px;
  justify-content:flex-start; border:0; background:transparent; color:color-mix(in srgb, var(--text-muted) 68%, var(--text));
  font:inherit; font-size:13px; font-weight:500; cursor:pointer; border-radius:12px; white-space:nowrap;
  transition:background .2s, color .2s; text-decoration:none; }
.nrail__row svg{ flex:none; }
.nrail__row:hover{ color:var(--text); background:var(--surface-hover); }
.nrail__logo{ margin-bottom:6px; }
.nrail__logo .logo{ gap:12px; }
.nrail__a.is-on{ color:var(--primary-text); }
.nrail__a.is-on:hover{ background:transparent; }
.nrail__lb{ opacity:0; white-space:nowrap; transition:opacity .25s; }
.nrail:not(.is-exp) .nrail__lb{ visibility:hidden; }
.nrail.is-exp .nrail__lb{ opacity:1; visibility:visible; transition-delay:.14s; }
.nrail__a .tip{ position:absolute; left:50px; top:50%; transform:translateY(-50%) translateX(-5px); background:var(--text); color:var(--bg);
  font-family:var(--font-sans); font-size:11px; font-weight:600; padding:4px 9px; border-radius:7px; white-space:nowrap; opacity:0;
  pointer-events:none; transition:opacity .16s, transform .16s; z-index:6; }
.nrail__a .tip::before{ content:""; position:absolute; left:-4px; top:50%; transform:translateY(-50%) rotate(45deg); width:7px; height:7px;
  background:var(--text); border-radius:1px; }
.nrail:not(.is-exp) .nrail__a:hover .tip{ opacity:1; transform:translateY(-50%) translateX(0); }

/* ── abas inferiores ─────────────────────────────────────── */
.nbn__bar{ position:relative; display:flex; align-items:center; justify-content:center; min-height:60px; padding:8px 14px;
  background:var(--surface); border-top:1px solid var(--border); }
.shell-nbn{ position:sticky; bottom:0; z-index:30; }
.nbn__brand{ position:absolute; left:16px; top:50%; transform:translateY(-50%); }
.nbn__tabs{ position:relative; display:flex; align-items:center; gap:4px; }
.nbn__thumb{ position:absolute; top:0; bottom:0; left:0; width:0; z-index:0; background:var(--primary-bg); border-radius:12px;
  transition:transform .42s var(--ease-spring), width .42s var(--ease-spring); }
.nbn__a{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  width:64px; height:48px; border:0; background:transparent; color:color-mix(in srgb, var(--text-muted) 68%, var(--text));
  font:inherit; cursor:pointer; border-radius:12px; transition:color .25s; text-decoration:none; }
.nbn__a svg{ width:22px; height:22px; transition:transform .28s var(--ease-spring); }
.nbn__a:hover{ color:var(--text); }
.nbn__a.is-on{ color:var(--primary-text); }
.nbn__a.is-on svg{ transform:scale(1.16) translateY(-1px); }
.nbn__lb{ font-size:10px; font-weight:600; line-height:1; opacity:0; transition:opacity .25s; }
.nbn__a.is-on .nbn__lb{ opacity:1; }

/* ── pílula flutuante ────────────────────────────────────── */
.npill{ display:inline-flex; align-items:center; gap:8px; background:var(--surface-elevated); border:1px solid var(--border);
  border-radius:var(--radius-full); padding:7px 12px 7px 8px; box-shadow:var(--shadow-lg); }
.npill__brand{ display:flex; align-items:center; padding:0 6px; }
.npill__links{ position:relative; display:flex; gap:2px; }
.npill__thumb{ position:absolute; top:0; bottom:0; left:0; width:0; z-index:0; background:var(--primary); border-radius:var(--radius-full);
  box-shadow:var(--shadow-sm); transition:transform .42s var(--ease-spring), width .42s var(--ease-spring); }
.npill__a{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 15px; border:0; cursor:pointer;
  border-radius:var(--radius-full); background:transparent; color:color-mix(in srgb, var(--text-muted) 68%, var(--text));
  font-family:var(--font-sans); font-size:13px; font-weight:500; white-space:nowrap; text-decoration:none;
  transition:color .2s; }
.npill__a svg{ width:16px; height:16px; }
.npill__a:hover{ color:var(--text); }
.npill__a.is-on{ color:var(--on-primary); }
.npill__div{ width:1px; height:22px; background:var(--border); margin:0 4px; }

/* ── dock flutuante (montanha no contorno ao ampliar) ────── */
.ndock{ position:relative; display:inline-flex; align-items:flex-end; gap:8px; background:var(--surface-elevated); border:1px solid var(--border);
  border-radius:16px; padding:11px 16px 13px; box-shadow:var(--shadow-lg); transition:border-top-right-radius .2s var(--ease-out) .3s; }
.ndock__brand{ height:44px; display:flex; align-items:center; padding:0 4px 0 2px; }
.ndock__sep{ width:1px; height:30px; background:var(--border); align-self:center; }
.ndock__a{ position:relative; display:grid; place-items:center; width:44px; height:44px; border:0; background:transparent;
  color:color-mix(in srgb, var(--text-muted) 68%, var(--text)); cursor:pointer; border-radius:13px; font:inherit;
  transition:color .2s; text-decoration:none; }
.ndock__a svg{ position:relative; z-index:2; width:26px; height:26px; transition:transform .42s var(--ease-spring); transform-origin:center bottom; }
.ndock__a:hover, .ndock__a.is-on{ color:var(--primary-text); }
.ndock__a:hover svg, .ndock__a.is-on svg{ transform:translateY(-22px) scale(1.36); }
.ndock__a::before{ content:""; position:absolute; z-index:1; left:50%; bottom:53px; width:64px; height:26px;
  transform:translateX(-50%) scaleY(0); transform-origin:bottom center; background:var(--surface-elevated);
  border:1px solid var(--border); border-bottom:0; border-radius:50% 50% 0 0 / 100% 100% 0 0; pointer-events:none;
  will-change:transform; backface-visibility:hidden; transition:transform .42s var(--ease-out); }
.ndock__a:hover::before, .ndock__a.is-on::before{ transform:translateX(-50%) scaleY(1); }
.ndock:has(.ndock__a:last-child:hover), .ndock:has(.ndock__a:last-child.is-on){ border-top-right-radius:0; transition:border-top-right-radius 0s linear 0s; }
.ndock__a:last-child::before{ left:calc(50% - 1px); width:78px; border-radius:50% 16px 0 0 / 100% 16px 0 0; transform:translateX(-50%) scaleY(0); }
.ndock__a:last-child:hover::before, .ndock__a:last-child.is-on::before{ transform:translateX(-50%) scaleY(1); }
.ndock__name{ position:absolute; z-index:3; bottom:3px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:600;
  color:var(--primary-text); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s; }
.ndock__a.is-on .ndock__name{ opacity:1; }
.ndock__tip{ position:absolute; z-index:4; bottom:calc(100% + 30px); left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg);
  font-family:var(--font-sans); font-size:11px; font-weight:600; padding:4px 9px; border-radius:7px; white-space:nowrap; opacity:0;
  pointer-events:none; transition:opacity .15s; }
.ndock__a:hover .ndock__tip{ opacity:1; }
.ndock__a.is-on .ndock__tip{ display:none; }

/* ── barra + paleta de comandos ──────────────────────────── */
.shell-cmdbar{ align-items:center; gap:14px; height:52px; padding:0 18px; background:var(--surface); border-bottom:1px solid var(--border); }
.hostcmd-trig{ flex:1; max-width:430px; display:flex; align-items:center; gap:9px; height:34px; padding:0 12px; cursor:text;
  background:var(--surface-sunken); border:1px solid var(--border); border-radius:9px; color:var(--text-subtle);
  font-family:var(--font-sans); font-size:13px; transition:border-color var(--duration-fast) var(--ease-standard); }
.hostcmd-trig:hover{ border-color:var(--border-strong); }
.ncmd__kbd{ margin-left:auto; font-family:var(--font-mono); font-size:10px; border:1px solid var(--border); border-radius:5px;
  padding:2px 6px; color:var(--text-subtle); background:var(--surface); }
.shell-cmdscrim{ position:fixed; inset:0; z-index:60; background:var(--overlay-scrim); backdrop-filter:blur(var(--overlay-blur));
  display:flex; align-items:flex-start; justify-content:center; padding-top:90px; }
.ncmd{ width:min(540px, 88%); background:var(--surface-elevated); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-xl); overflow:hidden; animation:cmd-in .32s var(--ease-emphasized); }
@keyframes cmd-in{ from{ transform:translateY(-10px) scale(.97); } to{ transform:none; } }
@media (prefers-reduced-motion: reduce){ .ncmd{ animation:none; } }
.ncmd__search{ display:flex; align-items:center; gap:11px; padding:12px 14px; border-bottom:1px solid var(--border); }
.ncmd__search input{ flex:1; border:0; background:transparent; font:inherit; font-size:14px; color:var(--text); outline:none; }
.ncmd__lbl{ font-family:var(--font-display); font-size:9px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-subtle); padding:11px 14px 4px; }
.ncmd__list{ padding:4px; display:flex; flex-direction:column; gap:1px; max-height:220px; overflow:auto; }
.ncmd__a{ display:flex; align-items:center; gap:11px; padding:8px 10px; border:0; background:transparent; border-radius:9px; cursor:pointer;
  color:var(--text); font:inherit; font-size:13px; text-align:left; transition:background .12s; text-decoration:none; }
.ncmd__a:hover, .ncmd__a.is-on{ background:var(--surface-hover); }
.ncmd__ic{ width:30px; height:30px; border-radius:8px; background:var(--surface-sunken); display:grid; place-items:center;
  color:var(--text-muted); flex:none; }
.ncmd__a.is-on .ncmd__ic{ background:var(--primary-bg); color:var(--primary-text); }
.ncmd__empty{ padding:20px 12px; text-align:center; font-size:12.5px; color:var(--text-subtle); }

/* ── visibilidade dos chromes por modo — ÚLTIMO bloco da cascata:
   precisa vencer as bases (.nsb/.nrail/.nbn__bar têm display próprio
   para os demos da tela de Configuração de design) ─────────── */
.shell .shell-nsb, .shell .shell-nrail, .shell .shell-ntop-host, .shell .shell-cmdbar,
.shell .shell-pill-host, .shell .shell-nbn, .shell .shell-dock-host{ display:none; }
[data-nav="side"] .shell .shell-nsb{ display:flex; }
[data-nav="rail"] .shell .shell-nrail{ display:flex; }
[data-nav="top"] .shell .shell-ntop-host{ display:block; }
[data-nav="cmd"] .shell .shell-cmdbar{ display:flex; }
[data-nav="pill"] .shell .shell-pill-host{ display:flex; }
[data-nav="tabs"] .shell .shell-nbn{ display:flex; }
[data-nav="dock"] .shell .shell-dock-host{ display:flex; }