/* suite-shell.css — Design 102 Phase 1 + 2b: the persistent App Suite rail.
   A fixed left rail (desktop) / bottom bar (mobile ≤640px) with a scrollable app switcher
   (.suite-rail-apps) + a pinned tools dock (.suite-rail-tools) holding the shared ⌘K search
   trigger + the notifications bell. Token-only colours with fallbacks for the hub-vs-runtime
   token-name differences. `body.has-suite-rail` is only set when the rail mounts, so absent the
   shell the page layout is unchanged (back-compat). */

.suite-rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 64px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border-right: 1px solid var(--color-border, #e2e5ec);
}
body.has-suite-rail { padding-left: 64px; }

.suite-rail-apps {
  flex: 1 1 auto;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 0;
}
.suite-rail-tools {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--color-border, #e2e5ec);
}

.suite-rail-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 56px; padding: 7px 0;
  border-radius: 10px;
  color: var(--color-text-muted, #5b6472);
  text-decoration: none;
  flex: 0 0 auto;
}
.suite-rail-item:hover { background: color-mix(in srgb, var(--color-accent, #6366f1) 10%, transparent); color: var(--color-text, #1a1d24); }
.suite-rail-item.is-active { color: var(--color-accent, #6366f1); }
.suite-rail-item:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent, #6366f1) 35%, transparent); }

.suite-rail-ic {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  background: var(--color-surface-2, color-mix(in srgb, var(--color-text, #1a1d24) 8%, transparent));
  color: inherit;
}
.suite-rail-item.is-active .suite-rail-ic {
  background: var(--color-accent, #6366f1);
  color: var(--color-on-accent, var(--color-text-on-accent, #fff));
}
.suite-rail-new .suite-rail-ic { background: transparent; border: 1px dashed var(--color-border, #e2e5ec); font-size: 18px; }
.suite-rail-label {
  font-size: 9px; line-height: 1.1;
  max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Phase 2b — the docked shared tools are forced COMPACT in the rail (the search trigger's pill +
   "Search ⌘K" label never fit a 64px rail; the notifications bell is already 38px). */
.suite-rail-tools .sp-trigger {
  width: 38px; height: 38px; padding: 0; gap: 0;
  border-radius: 10px; justify-content: center;
}
.suite-rail-tools .sp-trigger-label, .suite-rail-tools .sp-trigger-kbd { display: none; }
.suite-rail-tools .sp-trigger-icon { font-size: 18px; }
/* the relocated per-surface theme toggle + user menu, sized to match the docked tools */
.suite-rail-tools #themeToggle, .suite-rail-tools #ar-theme-toggle {
  width: 38px; height: 38px; padding: 0; margin: 0; flex: 0 0 auto;
}
.suite-rail-tools #userButton { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }

/* Mobile — a fixed bottom bar (the 094 PWA pattern): the app switcher scrolls horizontally,
   the tools dock is pinned to the right end. */
@media (max-width: 640px) {
  .suite-rail {
    top: auto; right: 0; bottom: 0; left: 0;
    width: auto; height: 54px;
    flex-direction: row;
    border-right: none; border-top: 1px solid var(--color-border, #e2e5ec);
  }
  body.has-suite-rail { padding-left: 0; padding-bottom: 54px; }
  .suite-rail-apps {
    flex: 1 1 auto;
    overflow-x: auto; overflow-y: hidden;
    flex-direction: row;
    padding: 0 8px; gap: 2px;
  }
  .suite-rail-tools {
    flex-direction: row;
    border-top: none; border-left: 1px solid var(--color-border, #e2e5ec);
    padding: 0 8px; gap: 6px;
  }
  .suite-rail-item { width: auto; min-width: 50px; padding: 5px 8px; }
}