/* enterprise-main.css — Enterprise SPA base layout & design tokens
   Visual language: matches individual studio — warm ivory · terra accent · soft shadows
   Dark mode: full [data-theme="dark"] support mirroring main.css */

/* ── Design tokens — light (default) ─────────────────────────────────────── */
:root {
  --ent-bg: #f7f6f3;
  --ent-content-bg: #ffffff;
  --ent-surface: #ffffff;
  --ent-surface2: #f5f4f1;
  --ent-border: rgba(0, 0, 0, 0.06);
  --ent-border2: rgba(0, 0, 0, 0.08);
  --ent-text: #131314;
  --ent-text2: #555249;
  --ent-text3: #8a857a;

  --ent-accent: var(--ent-brand, #d97757);
  --ent-btn-bg: #1a1a1c;
  --ent-btn-hover: #2a2a2e;
  --ent-btn-text: #fff;
  --ent-accent-lt: rgba(217, 119, 87, 0.1);

  --ent-danger: #ef4444;
  --ent-warning: #f59e0b;
  --ent-success: #10b981;

  --ent-sidebar-w: 172px;
  --ent-radius: 12px;
  --ent-radius-sm: 8px;
  --ent-radius-xl: 24px;

  --ent-font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --ent-shadow-xs: 0 1px 2px rgba(19, 19, 20, 0.05);
  --ent-shadow-sm: 0 1px 3px rgba(19, 19, 20, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --ent-shadow-md: 0 4px 16px rgba(19, 19, 20, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --ent-shadow-lg: 0 12px 40px rgba(19, 19, 20, 0.08), 0 2px 8px rgba(19, 19, 20, 0.04);
  --ent-shadow-xl: 0 24px 60px rgba(19, 19, 20, 0.1), 0 4px 12px rgba(19, 19, 20, 0.04);

  --ent-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ent-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Design tokens — dark mode ────────────────────────────────────────────── */
[data-theme='dark'] {
  --ent-bg: #111110;
  --ent-content-bg: #111110;
  --ent-surface: #1c1b19;
  --ent-surface2: #252420;
  --ent-border: transparent;
  --ent-border2: rgba(255, 255, 255, 0.1);
  --ent-text: #f2f0eb;
  --ent-text2: #b8b4ad;
  --ent-text3: #7a766e;

  --ent-accent: var(--ent-brand, #e07c58);
  --ent-accent-lt: rgba(224, 124, 88, 0.12);

  --ent-shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.55);
  --ent-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.07);
  --ent-shadow-md: 0 4px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --ent-shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.65), 0 2px 8px rgba(0, 0, 0, 0.4);
  --ent-shadow-xl: 0 24px 72px rgba(0, 0, 0, 0.75), 0 4px 16px rgba(0, 0, 0, 0.45);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Scrollbar — match enterprise theme ─────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}
[data-theme='dark'] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}
[data-theme='dark'] * {
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

html {
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--ent-font);
  color: var(--ent-text);
  background: var(--ent-bg);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  overscroll-behavior: none;
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.hidden {
  display: none !important;
}
.flex {
  display: flex;
}
.gap-8 {
  gap: 8px;
}
.gap-12 {
  gap: 12px;
}
.gap-16 {
  gap: 16px;
}
.align-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.text-sm {
  font-size: 12px;
}
.text-muted {
  color: var(--ent-text3);
}
.text-accent {
  color: #d97757;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Responsive utility classes ───────────────────────────────────────────── */
.ent-show-mobile {
  display: none;
}
.ent-th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ent-text3);
}

/* ── Member stat inline (shown on mobile only next to status) ─────────────── */
.ent-member-stat-inline {
  display: none;
  font-size: 12px;
  color: var(--ent-text3);
  margin-left: 8px;
}

/* ── Slug row (Workspace URL) ─────────────────────────────────────────────── */
.ent-slug-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Admin heading in Members card ────────────────────────────────────────── */
.ent-admin-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
[data-theme='dark'] .ent-admin-heading {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.ent-admin-heading-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ent-text2, rgba(255, 255, 255, 0.6));
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 20px;
}
.ent-admin-heading-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ent-text);
}

/* ── Credits card (sidebar, admin only) — clean neutral card */
/* On mobile — sidebar credits card shows only action buttons. The full
   credits/seats breakdown is on the Billing page; sidebar stays compact. */
@media (max-width: 640px) {
  .ent-credits-card .ent-credits-plan-label,
  .ent-credits-card .ent-credits-top,
  .ent-credits-card .ent-credits-seats {
    display: none !important;
  }
  .ent-credits-card {
    padding: 12px 14px !important;
  }
}

.ent-credits-card {
  margin: 0 6px 10px;
  padding: 14px 16px 12px;
  border-radius: 14px;
  background: var(--ent-surface);
  border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.08));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  color: var(--ent-text);
}
.ent-credits-card::before {
  content: none;
}
.ent-credits-card .ent-credits-count {
  color: var(--ent-text);
}
.ent-credits-card .ent-credits-label {
  color: var(--ent-text3);
}
.ent-credits-card .ent-credits-seats-count {
  color: var(--ent-text);
}
.ent-credits-card .ent-credits-seats-label {
  color: var(--ent-text3);
}
.ent-credits-card .ent-credits-seats {
  border-top-color: var(--ent-border);
}
[data-theme='dark'] .ent-credits-card {
  background: var(--ent-surface);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.ent-credits-loading {
  height: 36px;
}
.ent-credits-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}
.ent-credits-count {
  font-size: 32px;
  font-weight: 800;
  color: var(--ent-text);
  letter-spacing: -0.03em;
  line-height: 1;
}
[data-theme='dark'] .ent-credits-count {
  color: var(--ent-text);
  text-shadow: none;
}
.ent-credits-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ent-text3);
}
[data-theme='dark'] .ent-credits-label {
  color: var(--ent-text3);
}
.ent-credits-plan-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ent-text2);
  margin-bottom: 6px;
  text-align: center;
}
.ent-credits-seats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme='dark'] .ent-credits-seats {
  border-top-color: rgba(255, 255, 255, 0.06);
}
.ent-credits-seats-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--ent-text);
}
.ent-credits-seats-label {
  font-size: 10px;
  color: var(--ent-text3);
  font-weight: 500;
}
[data-theme='dark'] .ent-credits-seats-label {
  color: var(--ent-text3);
}
.ent-credits-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: #111;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ent-font);
  letter-spacing: 0.02em;
  transition: all 0.18s ease;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
}
.ent-credits-btn:hover {
  background: #222;
}
.ent-credits-btn:active {
  transform: scale(0.97);
}
.ent-seats-btn {
  margin-top: 6px;
  background: #111;
  color: #fff;
  border: none;
}
.ent-seats-btn:hover {
  background: #222;
  color: #fff;
}
/* Universal contrast rule — dark theme: WHITE bg + BLACK text.
   !important so Electron desktop or stale cached CSS can't break it. */
[data-theme='dark'] .ent-credits-btn {
  background: #f5f5f5 !important;
  color: #111 !important;
}
[data-theme='dark'] .ent-credits-btn:hover {
  background: #e5e5e5 !important;
  color: #111 !important;
}
[data-theme='dark'] .ent-credits-btn * {
  color: #111 !important;
}
[data-theme='dark'] .ent-seats-btn {
  background: #f5f5f5 !important;
  color: #111 !important;
}
[data-theme='dark'] .ent-seats-btn:hover {
  color: #111 !important;
}
[data-theme='dark'] .ent-seats-btn * {
  color: #111 !important;
}
[data-theme='dark'] .ent-seats-btn:hover {
  background: #e5e5e5;
}
/* Low credits */
.ent-credits-low .ent-credits-count {
  color: #92700a;
}
[data-theme='dark'] .ent-credits-low .ent-credits-count {
  color: #c9a64a;
  text-shadow: none;
}
/* Zero credits */
.ent-credits-zero .ent-credits-count {
  color: #b04040;
}
[data-theme='dark'] .ent-credits-zero .ent-credits-count {
  color: #c07070;
  text-shadow: none;
}
/* Zero-credits state communicates urgency through the count color above —
 * the CTA buttons stay full-contrast (black in light, white in dark) so the
 * call-to-action is never softer than the rest of the surface. */
/* Unlimited */
.ent-credits-unlimited .ent-credits-count {
  font-size: 24px;
}

/* ── App shell — supports both #ent-shell (JS) and legacy #ent-app-shell ─── */
#ent-shell,
#ent-app-shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
#ent-sidebar {
  width: var(--ent-sidebar-w);
  flex-shrink: 0;
  background: var(--ent-bg);
  border-right: 1px solid var(--ent-border2, rgba(0, 0, 0, 0.07));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  transition: width 0.25s ease, min-width 0.25s ease;
}
#ent-sidebar::-webkit-scrollbar {
  display: none;
}

[data-theme='dark'] #ent-sidebar {
  background: rgba(0, 0, 0, 0.12);
  border-right-color: rgba(255, 255, 255, 0.06);
}

/* ── Desktop (Electron) — frosted glass sidebar + main ────────────────────── */
body.is-electron #ent-shell,
body.is-electron #ent-app-shell {
  height: calc(100vh - 36px);
  -webkit-app-region: no-drag;
}
body.is-electron #ent-login-screen {
  /* Account for 36px titlebar; match the base rule's fixed height so
     overflow-y:auto kicks in and tall forms scroll instead of clipping */
  height: calc(100vh - 36px);
  -webkit-app-region: no-drag;
}
body.is-electron #ent-app {
  -webkit-app-region: no-drag;
  background: var(--ent-bg) !important;
  min-height: 100vh;
}
body.is-electron #ent-login-form-wrap {
  background: var(--ent-bg) !important;
}
body.is-electron #ent-sidebar {
  background: rgba(250, 250, 250, 0.92);
  border-right-color: rgba(0, 0, 0, 0.1);
}
[data-theme='dark'] body.is-electron #ent-sidebar {
  background: rgba(18, 18, 24, 0.92);
  border-right-color: rgba(255, 255, 255, 0.1);
}
body.is-electron #ent-main {
  background: var(--ent-bg) !important;
}
body.is-electron #ent-tab-content {
  background: var(--ent-bg) !important;
}
body.is-electron #ent-login-screen {
  background: rgba(10, 10, 20, 0.92);
}
/* The 36px titlebar is position:fixed at top:0 — it floats ABOVE flow,
   so it does NOT take vertical space on its own. Body needs explicit
   padding-top to push #ent-shell + sticky .ent-tab-header below it.
   Previous comment said "titlebar handles its own space" — wrong, that
   was the bug: sticky tab header was rendering at y=0 under the titlebar. */
body.is-electron {
  padding-top: 36px;
}
/* Studio content gutters — leave ≥12% breathing room on both sides so the
   page doesn't stretch wall-to-wall in a wide Electron window. min(...)
   keeps narrow windows readable instead of clamping to a tiny strip. */
body.is-electron #ent-tab-content {
  padding-left: 12vw;
  padding-right: 12vw;
}

/* ── Electron desktop — animated gradient border (Gemini-style) ──────────
 * Visible only inside the Electron desktop app (body.is-electron). Creates
 * a 2px conic-gradient border that slowly rotates around the window edge.
 * The border sits ABOVE all content (z:9999) but below the titlebar so it
 * frames the window without intercepting clicks (pointer-events:none). */
@property --ent-border-rot {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes ent-electron-border-rotate {
  to { --ent-border-rot: 360deg; }
}
body.is-electron::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 14px;
  padding: 2px;
  background: conic-gradient(
    from var(--ent-border-rot),
    rgba(217, 119, 87, 0.0) 0deg,
    rgba(217, 119, 87, 0.85) 60deg,
    rgba(176, 95, 222, 0.85) 130deg,
    rgba(94, 178, 255, 0.85) 200deg,
    rgba(217, 119, 87, 0.85) 290deg,
    rgba(217, 119, 87, 0.0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: ent-electron-border-rotate 8s linear infinite;
}
/* Fallback for browsers without @property support — show a static
   subtle terra glow instead of breaking. */
@supports not (background: conic-gradient(from var(--unsupported-test), red, blue)) {
  body.is-electron::before {
    background: linear-gradient(
      135deg,
      rgba(217, 119, 87, 0.35),
      rgba(176, 95, 222, 0.25),
      rgba(94, 178, 255, 0.25),
      rgba(217, 119, 87, 0.35)
    );
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.is-electron::before {
    animation: none;
  }
}

/* ── Sidebar header ───────────────────────────────────────────────────────── */
/* Sidebar header — gives the brand "WISPHERFLOW ENTERPRISE / VIA WISPHERFLOW"
 * visible top breathing room from the viewport edge. iOS safe-area inset
 * keeps it clear of the notch on phones; the increased min-height also
 * prevents the 2-line stack from looking compressed. */
/* Sidebar header — same height as .ent-tab-header (64px) so the
 * border-bottom forms ONE continuous horizontal line across the
 * window with the main content's sticky header. position: sticky
 * pins the header at top:0 within the sidebar's scroll container,
 * matching the main tab header's sticky behavior — content slides
 * underneath it on scroll. */
.ent-sidebar-header {
  padding: 0 18px;
  padding-top: env(safe-area-inset-top, 0);
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  min-height: 64px;
  flex-shrink: 0;
  box-sizing: border-box;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ent-bg, #fff);
  border-bottom: 1px solid var(--ent-border2);
}
[data-theme='dark'] .ent-sidebar-header {
  background: var(--ent-bg, #111110);
}

/* ── Workspace picker (Option F — GitHub Org / Datadog account pattern) ───
 * Round avatar with green presence dot + workspace name + plan/role
 * inline + dropdown caret. Replaces the old stacked "WISPHERFLOW ENTERPRISE /
 * via WISPHERFLOW" treatment. */
.ent-ws-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.ent-ws-pick:hover {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme='dark'] .ent-ws-pick:hover {
  background: rgba(255, 255, 255, 0.04);
}
.ent-ws-pick[aria-expanded='true'] {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme='dark'] .ent-ws-pick[aria-expanded='true'] {
  background: rgba(255, 255, 255, 0.06);
}
.ent-ws-pick[aria-expanded='true'] .ent-ws-caret {
  transform: rotate(180deg);
}

/* Profile peek dropdown — anchored under the workspace pick.
 * Shows the signed-in user's name, email, and role label.
 * Hidden by default; toggled via .ent-ws-menu--open. */
.ent-ws-menu {
  position: absolute;
  top: calc(100% - 8px);
  left: 14px;
  right: 14px;
  z-index: 50;
  background: var(--ent-bg, #fff);
  border: 1px solid var(--ent-border, rgba(0, 0, 0, 0.1));
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  display: none;
  flex-direction: column;
  gap: 4px;
}
[data-theme='dark'] .ent-ws-menu {
  background: var(--ent-bg, #1a1a18);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.ent-ws-menu.ent-ws-menu--open {
  display: flex;
}
.ent-ws-menu-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ent-text);
  line-height: 1.3;
}
.ent-ws-menu-email {
  font-size: 11.5px;
  color: var(--ent-text3);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ent-ws-menu-role-row {
  display: flex;
  margin-top: 6px;
}
.ent-ws-menu-role {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(217, 119, 87, 0.12);
  color: #c8623d;
}
[data-theme='dark'] .ent-ws-menu-role {
  background: rgba(217, 119, 87, 0.18);
  color: #ec9c7d;
}
.ent-ws-menu-role.ent-role-admin {
  background: rgba(217, 119, 87, 0.14);
  color: #c8623d;
}
[data-theme='dark'] .ent-ws-menu-role.ent-role-admin {
  background: rgba(217, 119, 87, 0.22);
  color: #ec9c7d;
}
.ent-ws-menu-role.ent-role-member {
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
}
[data-theme='dark'] .ent-ws-menu-role.ent-role-member {
  background: rgba(129, 140, 248, 0.18);
  color: #a5b4fc;
}

/* Inline action inside the profile peek (e.g. "Change profile picture"). */
.ent-ws-menu-action {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--ent-border, rgba(0, 0, 0, 0.1));
  background: transparent;
  color: var(--ent-text2);
  font: inherit;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.ent-ws-menu-action:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ent-text);
  border-color: var(--ent-border, rgba(0, 0, 0, 0.18));
}
[data-theme='dark'] .ent-ws-menu-action {
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme='dark'] .ent-ws-menu-action:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}
.ent-ws-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ent-accent, #d97757);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  position: relative;
  background-size: cover;
  background-position: center;
  text-transform: uppercase;
}

.ent-ws-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.ent-ws-org {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ent-text);
  line-height: 1.2;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ent-ws-caret {
  color: var(--ent-text3);
  flex-shrink: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}
.ent-ws-pick:hover .ent-ws-caret {
  color: var(--ent-text);
}

/* ── Theme toggle button ──────────────────────────────────────────────────── */
.ent-theme-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none;
  outline: none;
  border-radius: var(--ent-radius-sm);
  cursor: pointer;
  color: var(--ent-text3);
  flex-shrink: 0;
  transition:
    color 0.18s ease,
    background 0.18s ease;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.ent-theme-btn:hover {
  background: rgba(217, 119, 87, 0.1) !important;
  color: #d97757;
}
[data-theme='dark'] .ent-theme-btn:hover {
  background: rgba(224, 124, 88, 0.12) !important;
  color: #e07c58;
}

/* Sun shown in light, moon shown in dark */
.ent-theme-moon {
  display: none;
}
[data-theme='dark'] .ent-theme-sun {
  display: none;
}
[data-theme='dark'] .ent-theme-moon {
  display: block;
}

/* ── Role badge ───────────────────────────────────────────────────────────── */
.ent-role-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-top: 6px;
  background: rgba(217, 119, 87, 0.1);
  color: #d97757;
}
.ent-role-badge.admin {
  background: rgba(217, 119, 87, 0.12);
  color: #c96840;
}
[data-theme='dark'] .ent-role-badge.admin {
  background: rgba(217, 119, 87, 0.15);
  color: #e8916f;
}

/* ── Nav items ──────────────────────────────────────────────────────────────
 * Pattern A — single-scroll sidebar (Linear / Vercel / Notion / Stripe pattern).
 * The OLD layout used flex:1 + overflow-y:auto on .ent-nav, which created a
 * SECOND scroll region inside #ent-sidebar (which itself scrolls). On medium
 * window heights, .ent-nav consumed ~200px of slack space AFTER the last item,
 * producing an awkward white gap between "Billing" and the credits card.
 *
 * New behaviour:
 *  - flex-shrink:0 on both .ent-nav and .ent-sidebar-footer so they keep their
 *    natural content height
 *  - margin-top:auto on .ent-sidebar-footer pushes it to the bottom ONLY when
 *    there's slack space (tall windows). On short windows margin-top:auto
 *    resolves to 0 and the footer stacks naturally below the nav.
 *  - The whole #ent-sidebar scrolls as ONE surface when total content
 *    exceeds the viewport — no nested scroll, no awkward gap. */
.ent-nav {
  flex-shrink: 0;
  padding: 6px 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
}

.ent-nav-section-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ent-text3);
  padding: 10px 12px 4px;
  font-weight: 600;
}

.ent-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: var(--ent-radius-xl);
  color: var(--ent-text2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  position: relative;
  overflow: hidden;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transform: translateX(0);
  list-style: none;
  font-family: var(--ent-font);
}

/* Sliding terra bar — hardcoded, not per-company accent */
.ent-nav-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--ent-text2, rgba(255, 255, 255, 0.6));
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
  transition:
    height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease;
  opacity: 0;
}

.ent-nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ent-text);
}
.ent-nav-item:hover::before {
  height: 60%;
  opacity: 1;
}
.ent-nav-item:hover svg {
  color: var(--ent-text);
}
.ent-nav-item:active {
  opacity: 0.8;
}

.ent-nav-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ent-text);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(217, 119, 87, 0.1);
}
.ent-nav-item.active::before {
  height: 60%;
  opacity: 1;
}
.ent-nav-item.active svg {
  color: var(--ent-text);
}

.ent-nav-item svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  transition: color 0.25s ease;
}

/* Dark mode nav */
[data-theme='dark'] .ent-nav-item {
  color: var(--ent-text2);
}
[data-theme='dark'] .ent-nav-item:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ent-text);
}
[data-theme='dark'] .ent-nav-item:hover svg {
  color: var(--ent-text);
}
[data-theme='dark'] .ent-nav-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ent-text);
  box-shadow: none;
}
[data-theme='dark'] .ent-nav-item.active svg {
  color: var(--ent-text);
}
[data-theme='dark'] .ent-nav-item.active::before {
  background: var(--ent-text2);
}

/* ── Sidebar section title (MANAGE header) ───────────────────────────────── */
.ent-nav-section-title {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ent-text3);
  padding: 14px 12px 6px;
  margin: 6px 8px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  list-style: none;
  opacity: 0.5;
  user-select: none;
}
[data-theme='dark'] .ent-nav-section-title {
  border-top-color: rgba(255, 255, 255, 0.07);
}

/* Atlas AI nav item — same styling as other nav items (no special override) */

/* ── Nav badge (pending count) ────────────────────────────────────────────── */
.ent-badge,
.ent-nav-badge {
  margin-left: auto;
  background: var(--ent-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  line-height: 1;
}

.ent-nav-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.05);
  margin: 6px 0;
}
[data-theme='dark'] .ent-nav-divider {
  background: rgba(255, 255, 255, 0.06);
}

/* ── Sidebar footer ───────────────────────────────────────────────────────── */
/* Footer flows naturally after the nav — no margin-top:auto float that
 * collides with nav items when the viewport is short. The whole sidebar
 * scrolls as one continuous column (header → nav → credits → account →
 * settings → utility → sign out). flex-shrink:0 keeps the footer block
 * intact so it can scroll into view as a single unit. */
.ent-sidebar-footer {
  padding: 14px 8px 18px;
  border-top: 1px solid var(--ent-border);
  /* margin-top:auto pins the footer to the bottom of #ent-sidebar when
   * there's vertical slack (tall windows). On short windows it resolves
   * to 0 and the footer flows naturally after the nav — the entire
   * sidebar then scrolls as one continuous surface. Replaces the old
   * flex:1 nav + fixed margin-top:12px which produced a SECOND scroll
   * region and a visible gap between Billing and the credits card on
   * medium-height browser windows. */
  margin-top: auto;
  flex-shrink: 0;
}

/* Generic .ent-avatar — used in admin members list, analytics rows, etc.
 * Workspace-header avatar uses .ent-ws-avatar instead. */
.ent-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ent-text2, rgba(255, 255, 255, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Sign out — clean nav row, no background, no border */
.ent-signout-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent !important;
  border: none;
  outline: none;
  color: var(--ent-text3);
  font-size: 11.5px;
  font-weight: 500;
  padding: 8px 12px;
  margin-top: 4px;
  border-radius: var(--ent-radius-sm);
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
  font-family: var(--ent-font);
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}
.ent-signout-nav svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}
.ent-signout-nav span {
  line-height: 1;
}
.ent-signout-nav:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  color: #dc2626;
}
.ent-signout-nav:hover svg {
  color: #dc2626;
}
[data-theme='dark'] .ent-signout-nav:hover {
  background: rgba(248, 113, 113, 0.1) !important;
  color: #f87171;
}
[data-theme='dark'] .ent-signout-nav:hover svg {
  color: #f87171;
}

/* ── Main content area ────────────────────────────────────────────────────── */
#ent-main {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--ent-content-bg);
}
/* Tab content must participate in flex height for Atlas 100% height to work */
/* #ent-tab-content is the scroll container — content scrolls inside it
   while .ent-tab-header sticks to the top via position: sticky */
#ent-tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: block;
}

.ent-tab-header {
  padding: 0 36px;
  border-bottom: 1px solid var(--ent-border2);
  background: var(--ent-content-bg);
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  height: 64px;
  min-height: 64px;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.ent-tab-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ent-text);
  /* No vertical padding — the parent .ent-tab-header is align-items:center,
   * so any padding here unbalances the title's optical centering against
   * the right-side action buttons (theme + bell). */
  padding: 0;
  margin: 0;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}

.ent-tab-body {
  padding: 24px 36px;
  flex: 1;
}

/* Atlas AI header: model dropdown + toggle grouped inline */
.ent-atlas-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 0;
  flex: 1;
}
.ent-atlas-title-row .ent-tab-title {
  padding-bottom: 0;
  flex: none;
}

/* ── Filter bar — chip design ─────────────────────────────────────────────── */
#ent-approvals-list {
  padding: 0 36px;
}

/* Approval card (used/denied/all filters) */
.ent-approval-card {
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 10px;
}
.ent-approval-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}
.ent-approval-member {
  font-weight: 600;
  font-size: 14px;
}
.ent-approval-meta {
  font-size: 12px;
  color: var(--ent-text3);
  margin-top: 2px;
}
.ent-approval-note {
  font-size: 11.5px;
  color: var(--ent-text3);
  font-style: italic;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ent-approval-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 767px) {
  .ent-approval-card {
    padding: 14px 16px;
  }
  .ent-approval-card-header {
    flex-direction: column;
    gap: 6px;
  }
  .ent-approval-actions {
    width: 100%;
  }
  .ent-approval-actions .ent-btn-sm {
    flex: 1;
    text-align: center;
  }
}

/* Approval stats grid */
.ent-approval-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 12px 36px 20px;
}
.ent-stat-card {
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  background: var(--ent-surface, #fafaf9);
  border: 1px solid var(--ent-border2, rgba(0, 0, 0, 0.07));
}
.ent-stat-num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
.ent-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ent-text3);
  margin-top: 6px;
}

/* Pending approval card */
.ent-pending-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 12px;
}
.ent-pc-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ent-pc-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a4a4e, #2a2a2e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}
.ent-pc-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}
.ent-pc-meta {
  font-size: 12px;
  color: var(--ent-text3);
}
.ent-pc-details {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ent-pc-time {
  font-size: 11.5px;
  color: var(--ent-text3);
}
.ent-pc-ago {
  font-size: 11px;
  color: var(--ent-text3);
}
.ent-pc-notes {
  font-size: 11.5px;
  color: var(--ent-text3);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ent-pc-actions {
  display: flex;
  gap: 8px;
}
.ent-pc-approve {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: #059669;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ent-pc-approve:hover {
  opacity: 0.85;
}
.ent-pc-deny {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid #ef4444;
  background: transparent;
  color: #ef4444;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ent-pc-deny:hover {
  opacity: 0.85;
}

/* Desktop: actions float right */
@media (min-width: 768px) {
  .ent-pending-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .ent-pc-header {
    flex: 1;
    min-width: 200px;
  }
  .ent-pc-details {
    flex: 1;
    min-width: 200px;
  }
  .ent-pc-actions {
    flex-shrink: 0;
    margin-left: auto;
  }
}
/* Mobile: 2x2 stats grid, stacked cards, full-width buttons */
@media (max-width: 767px) {
  .ent-approval-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin: 12px 16px 16px !important;
  }
  .ent-approval-stats .ent-stat-card {
    padding: 16px 12px !important;
  }
  .ent-approval-stats .ent-stat-num {
    font-size: 24px !important;
  }
  .ent-approval-stats .ent-stat-label {
    font-size: 10px !important;
  }
  #ent-approvals-list {
    padding: 0 16px;
  }
  .ent-pending-card {
    padding: 14px 16px;
  }
  .ent-pc-actions {
    width: 100%;
  }
  .ent-pc-approve,
  .ent-pc-deny {
    flex: 1;
    text-align: center;
    padding: 10px;
  }
}

.ent-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 36px 16px;
  background: var(--ent-content-bg);
  flex-wrap: wrap;
}

.ent-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--ent-radius-xl);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--ent-surface);
  color: var(--ent-text2);
  font-family: var(--ent-font);
  transition:
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  box-shadow: var(--ent-shadow-xs);
  white-space: nowrap;
}
.ent-filter-btn:hover {
  border-color: rgba(217, 119, 87, 0.35);
  color: var(--ent-text);
  background: rgba(217, 119, 87, 0.06);
}
.ent-filter-btn.active {
  background: #d97757;
  color: #fff;
  border-color: #d97757;
  box-shadow: 0 2px 8px rgba(217, 119, 87, 0.3);
  font-weight: 600;
}
.ent-filter-btn svg {
  opacity: 0.7;
}
.ent-filter-btn.active svg {
  opacity: 1;
  color: #fff;
}

.ent-filter-count {
  background: rgba(255, 255, 255, 0.3);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}
.ent-filter-btn:not(.active) .ent-filter-count {
  background: rgba(0, 0, 0, 0.07);
  color: var(--ent-text3);
}
[data-theme='dark'] .ent-filter-btn {
  background: var(--ent-surface);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--ent-text2);
}
[data-theme='dark'] .ent-filter-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--ent-text);
}
[data-theme='dark'] .ent-filter-btn.active {
  background: #d97757;
  border-color: #d97757;
}

/* ── Login screen scroll — themed thin scrollbar on the page scroll ──────── */
#ent-login-screen::-webkit-scrollbar {
  width: 6px;
}
#ent-login-screen::-webkit-scrollbar-track {
  background: transparent;
}
#ent-login-screen::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
#ent-login-screen::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}
#ent-login-screen {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

/* ── Login screen — futuristic dark field ─────────────────────────────────── */
#ent-login-screen {
  /* 100dvh follows the visual viewport on mobile — when the soft
   * keyboard opens, the height shrinks and the safe-centered form
   * re-flows to fit in the remaining space. Without this, a 100vh
   * screen stays the full physical viewport and the form gets pushed
   * above the keyboard, clipping the title. iOS 15.4+ / Android Chrome
   * 108+ support dvh; older browsers fall back to vh below. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  /* safe center: behaves like center when content fits, falls back to
     flex-start when content is taller so the top stays reachable and the
     whole screen can scroll — prevents org-picker rows from being clipped
     and keeps the title visible when the keyboard opens. */
  align-items: safe center;
  justify-content: center;
  padding: 24px;
  /* Buffer when the browser auto-scrolls a focused input into view —
   * prevents the title from sliding above the visual viewport edge. */
  scroll-padding-top: 80px;
  scroll-padding-bottom: 24px;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  /* Solid dark base — triangle grid is drawn on the canvas layer */
  background: #0a0908;
}

/* Triangle tessellation canvas — fills the login screen, sits behind the card.
   position:fixed so the background stays put while the login content scrolls. */
#ent-login-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}
.ent-login-card {
  width: 100%;
  max-width: 400px;
  background: rgba(250, 249, 240, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 40px;
  box-shadow:
    0 32px 80px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
/* Thin top-edge glow */
.ent-login-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 119, 87, 0.5), transparent);
  pointer-events: none;
}
[data-theme='dark'] .ent-login-card {
  background: rgba(20, 19, 17, 0.96);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Back link — floats top-left of the full screen */
.ent-login-back-link {
  position: fixed;
  top: 24px;
  left: 28px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.28);
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: color 0.2s;
}
.ent-login-back-link:hover {
  color: rgba(255, 255, 255, 0.6);
}
.ent-login-back-link svg {
  flex-shrink: 0;
}
/* Desktop: hide separate back link — chevron is in the logo */
body.is-electron .ent-login-back-link {
  display: none;
}
/* Animated back button inline with logo — desktop only */
.ent-logo-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  outline: none;
  cursor: pointer;
  padding: 0;
  margin: 0 8px 0 0;
  color: rgba(255, 255, 255, 0.45);
  vertical-align: middle;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}
.ent-logo-back:hover {
  color: #d97757;
  border-color: rgba(217, 119, 87, 0.25);
  transform: translateX(-2px);
}
.ent-logo-back:active {
  transform: translateX(-2px);
}
.ent-logo-back svg {
  transition: transform 0.25s ease;
}
.ent-logo-back:hover svg {
  transform: translateX(-2px);
}

/* Full-screen form wrapper — no card, no bg, no border */
#ent-login-form-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 360px;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Wordmark */
.ent-login-brand {
  display: flex;
  align-items: center;
  margin-bottom: 36px;
}
.ent-login-logo {
  display: flex;
  align-items: center;
  font-size: 30px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
}

/* Headline & subtitle */
.ent-login-title {
  font-size: 28px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 10px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.ent-login-subtitle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  margin: 0 0 40px;
  line-height: 1.5;
}

/* Field wrapper — spacing between inputs */
.ent-field-wrap {
  margin-bottom: 32px;
}

/* Google-style wrong-password shake */
@keyframes ent-shake {
  0% {
    transform: translateX(0);
  }
  12% {
    transform: translateX(-8px);
  }
  25% {
    transform: translateX(7px);
  }
  37% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(5px);
  }
  62% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(2px);
  }
  87% {
    transform: translateX(-1px);
  }
  100% {
    transform: translateX(0);
  }
}
.ent-field-shake {
  animation: ent-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.ent-field-shake .ent-input-line {
  border-bottom-color: rgba(255, 90, 80, 0.75);
  box-shadow: 0 1px 0 0 rgba(255, 90, 80, 0.4);
}

/* Underline-only input */
.ent-input-line {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  color: #ffffff;
  font-size: 16px;
  font-family: var(--ent-font);
  padding: 10px 0 12px;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  caret-color: #d97757;
}
.ent-input-line::placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.ent-input-line:focus {
  border-bottom-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 0 0 rgba(217, 119, 87, 0.45);
}

/* Full-width CTA button — sharp, black, tool-like */
.ent-login-submit-btn {
  width: 100%;
  box-sizing: border-box;
  background: #111110;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--ent-font);
  letter-spacing: 0.2px;
  padding: 15px 20px;
  cursor: pointer;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    border-color 0.15s;
  display: block;
  text-align: center;
  margin-bottom: 0;
}
.ent-login-submit-btn:hover:not(:disabled) {
  background: #1c1a17;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}
.ent-login-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Email chip shown on password step */
.ent-login-email-chip {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.38);
  margin: 0 0 24px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Role badge — shown after identify */
.ent-login-role-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 20px;
  line-height: 1;
}
.ent-login-role-admin {
  background: rgba(217, 119, 87, 0.15);
  color: #e8916f;
}
.ent-login-role-member {
  background: rgba(100, 116, 139, 0.15);
  color: #94a3b8;
}

.ent-login-company-logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: contain;
}
.ent-login-wispherflow-logo {
  font-size: 18px;
  font-weight: 800;
  color: var(--ent-text);
  letter-spacing: -0.4px;
}
.ent-login-wispherflow-logo span {
  color: #d97757;
}
.ent-login-divider {
  font-size: 14px;
  color: var(--ent-text3);
  margin: 0 2px;
}
.ent-login-heading {
  font-size: 22px;
  font-weight: 700;
  color: var(--ent-text);
  margin-bottom: 6px;
}
.ent-login-sub {
  font-size: 13px;
  color: var(--ent-text3);
  margin-bottom: 28px;
}

.ent-login-company-context {
  font-size: 12px;
  color: var(--ent-text2);
  background: var(--ent-surface2);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--ent-radius-sm);
  padding: 8px 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-theme='dark'] .ent-login-company-context {
  border-color: rgba(255, 255, 255, 0.08);
}

/* ── Form elements ────────────────────────────────────────────────────────── */
.ent-form-group {
  margin-bottom: 20px;
}
.ent-form-group:last-child {
  margin-bottom: 0;
}
.ent-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ent-text2);
  margin-bottom: 6px;
}

.ent-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--ent-surface2);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--ent-radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  color: var(--ent-text);
  font-family: var(--ent-font);
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  appearance: none;
  display: block;
}
.ent-input:focus {
  border-color: #d97757;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.12);
}
.ent-input::placeholder {
  color: var(--ent-text3);
}
/* Select dropdowns — dark theme compatible */
select.ent-input {
  appearance: auto;
  cursor: pointer;
}
select.ent-input option {
  background: var(--ent-bg, #fff);
  color: var(--ent-text, #111);
  padding: 8px 12px;
}
select.ent-input option:checked,
select.ent-input option:hover {
  background: var(--ent-accent, #d97757);
  color: #fff;
}
[data-theme='dark'] select.ent-input option {
  background: var(--ent-surface);
  color: var(--ent-text);
}
[data-theme='dark'] select.ent-input option:checked {
  background: var(--ent-accent, #d97757);
  color: #fff;
}
/* Override browser autofill yellow background */
.ent-input:-webkit-autofill,
.ent-input:-webkit-autofill:hover,
.ent-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px var(--ent-surface2, #1a1a1c) inset !important;
  -webkit-text-fill-color: var(--ent-text, #fff) !important;
  transition: background-color 5000s ease-in-out 0s;
}
.ent-input-line:-webkit-autofill,
.ent-input-line:-webkit-autofill:hover,
.ent-input-line:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px var(--ent-bg, #0e0e0f) inset !important;
  -webkit-text-fill-color: var(--ent-text, #fff) !important;
  transition: background-color 5000s ease-in-out 0s;
}
/* Hide number input spinners (up/down arrows) */
input[type='number'].ent-input::-webkit-inner-spin-button,
input[type='number'].ent-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'].ent-input {
  -moz-appearance: textfield;
}
[data-theme='dark'] .ent-input {
  background: var(--ent-surface2);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme='dark'] .ent-input:focus {
  box-shadow: 0 0 0 3px rgba(224, 124, 88, 0.18);
}

/* ── Session request modal — 2-step ─────────────────────────────────────── */
/* ── Session draft card — horizontal margin so it doesn't touch sidebar
   on desktop or screen edge on mobile */
.ent-draft-card {
  background: var(--ent-surface);
  border: 1.5px dashed rgba(217, 119, 87, 0.35);
  border-radius: var(--ent-radius);
  padding: 16px 18px;
  margin: 16px 24px;
  box-sizing: border-box;
  max-width: calc(100% - 48px);
}
@media (max-width: 600px) {
  .ent-draft-card {
    margin: 12px 16px !important;
    max-width: calc(100% - 32px) !important;
    width: auto !important;
  }
}
[data-theme='dark'] .ent-draft-card {
  border-color: rgba(217, 119, 87, 0.25);
}
.ent-draft-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ent-draft-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d97757;
  background: rgba(217, 119, 87, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}
.ent-draft-time {
  font-size: 11px;
  color: var(--ent-text3);
}
.ent-draft-company {
  font-size: 14px;
  font-weight: 600;
  color: var(--ent-text);
}
.ent-draft-role {
  font-size: 12px;
  color: var(--ent-text3);
  margin-top: 2px;
}
.ent-draft-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.ent-slot-step-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #d97757;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 20px 0;
  display: block;
}

/* ── Custom select dropdowns (replaces native <select>) ─────────────────── */
.ent-csel-wrap {
  position: relative;
  display: block;
}
.ent-csel-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  color: var(--ent-text3);
}
.ent-csel-trigger.ent-csel-has-val {
  color: var(--ent-text);
}
.ent-csel-trigger:focus {
  outline: none;
  border-color: #d97757;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.12);
}
.ent-csel-trigger svg {
  flex-shrink: 0;
  opacity: 0.5;
  transition: transform 0.2s;
}
.ent-csel-wrap.open .ent-csel-trigger svg {
  transform: rotate(180deg);
}
.ent-csel-menu {
  display: none;
  margin-top: 4px;
  width: 100%;
  background: var(--ent-surface);
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}
[data-theme='dark'] .ent-csel-menu {
  background: var(--ent-surface);
  border-color: var(--ent-border2);
}
.ent-csel-wrap.open .ent-csel-menu {
  display: block;
}
.ent-csel-opt {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ent-text2);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
  font-family: var(--ent-font);
}
.ent-csel-opt:hover,
.ent-csel-opt:focus {
  background: var(--ent-surface2);
  color: var(--ent-text);
  outline: none;
}
.ent-csel-opt.ent-csel-selected {
  color: #d97757;
  font-weight: 600;
}
.ent-csel-placeholder {
  color: var(--ent-text3);
  font-style: italic;
}
.ent-csel-divider {
  height: 1px;
  background: var(--ent-border);
  margin: 4px 0;
}
.ent-csel-upload {
  color: #d97757;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ent-csel-upload:hover {
  background: rgba(217, 119, 87, 0.08);
}

/* ── Custom date/time picker ────────────────────────────────────────────── */
.ent-dt-wrap {
  position: relative;
  display: block;
}
.ent-dt-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  color: var(--ent-text3);
}
.ent-dt-trigger.ent-dt-has-val {
  color: var(--ent-text);
}
.ent-dt-trigger:focus {
  outline: none;
  border-color: #d97757;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.12);
}
.ent-dt-picker {
  display: none;
  margin-top: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  background: var(--ent-surface);
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  padding: 14px;
}
.ent-dt-picker.ent-dt-open {
  display: block;
}
[data-theme='dark'] .ent-dt-picker {
  background: var(--ent-surface);
  border-color: var(--ent-border2);
}

/* Quick-pick custom dropdown wrapper — hidden on desktop, shown on mobile.
   Uses the shared .ent-csel-* dropdown styles for enterprise look. */
.ent-dt-quickpicks-csel {
  display: none;
  margin-bottom: 12px;
}
.ent-dt-quickpicks-csel .ent-csel-trigger {
  height: 40px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius-sm);
  background: var(--ent-surface2);
}
@media (max-width: 600px) {
  .ent-dt-quickpicks { display: none !important; }
  .ent-dt-quickpicks-csel { display: block !important; }
}

/* Quick-pick shortcut chips */
.ent-dt-quickpicks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme='dark'] .ent-dt-quickpicks {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
.ent-dt-qp-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid rgba(217, 119, 87, 0.2);
  border-radius: 20px;
  background: rgba(217, 119, 87, 0.06);
  color: #c8683e;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ent-font);
  white-space: nowrap;
  transition: all 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.ent-dt-qp-btn:hover {
  background: rgba(217, 119, 87, 0.14);
  border-color: rgba(217, 119, 87, 0.35);
  color: #b45520;
}
.ent-dt-qp-btn:active {
  transform: scale(0.96);
}
[data-theme='dark'] .ent-dt-qp-btn {
  background: rgba(217, 119, 87, 0.1);
  border-color: rgba(217, 119, 87, 0.18);
  color: #e8a87c;
}
[data-theme='dark'] .ent-dt-qp-btn:hover {
  background: rgba(217, 119, 87, 0.2);
  border-color: rgba(217, 119, 87, 0.35);
  color: #f0b898;
}

/* Header */
.ent-dt-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ent-dt-myr {
  font-size: 13px;
  font-weight: 600;
  color: var(--ent-text);
}
.ent-dt-nav {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 16px;
  color: var(--ent-text2);
  border-radius: 4px;
  transition:
    background 0.15s,
    color 0.15s;
}
.ent-dt-nav:hover {
  background: var(--ent-surface2);
  color: var(--ent-text);
}
/* Weekday header cells — live INSIDE .ent-dt-grid so they share columns.
   Use the SAME flex centering as .ent-dt-day so contents align identically. */
.ent-dt-wkday {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ent-text3);
  padding: 3px 0 6px;
  margin: 0;
  text-transform: uppercase;
  box-sizing: border-box;
}
/* Legacy .ent-dt-wk kept inert in case other callers still use it */
.ent-dt-wk {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.ent-dt-wk span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ent-text3);
  padding: 3px 0;
}
/* Day grid */
.ent-dt-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
}
.ent-dt-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 12px;
  color: var(--ent-text2);
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: inherit;
  border-radius: 6px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    background 0.12s,
    color 0.12s;
}
.ent-dt-day:hover {
  background: var(--ent-surface2);
  color: var(--ent-text);
}
.ent-dt-empty {
  cursor: default;
}
.ent-dt-past {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}
.ent-dt-today {
  color: #d97757;
  font-weight: 700;
}
.ent-dt-sel {
  background: #d97757 !important;
  color: #fff !important;
  font-weight: 600;
}
/* Divider */
.ent-dt-div {
  height: 1px;
  background: var(--ent-border);
  margin: 10px 0;
}
/* Time row */
.ent-dt-trow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.ent-dt-tinp {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  height: 40px;
  box-sizing: border-box;
  text-align: center;
  background: var(--ent-surface2);
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius-sm);
  padding: 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ent-text);
  font-family: var(--ent-font);
  outline: none;
  -moz-appearance: textfield;
}
.ent-dt-tinp::-webkit-inner-spin-button,
.ent-dt-tinp::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.ent-dt-tinp:focus {
  border-color: #d97757;
  box-shadow: 0 0 0 2px rgba(217, 119, 87, 0.14);
}
.ent-dt-tsep {
  font-size: 15px;
  font-weight: 700;
  color: var(--ent-text2);
}
.ent-dt-ampm {
  margin-left: 4px;
  width: 60px;
  min-width: 60px;
  max-width: 60px;
  height: 40px;
  box-sizing: border-box;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  background: var(--ent-surface2);
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius-sm);
  color: var(--ent-text2);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.ent-dt-ampm:hover {
  background: #d97757;
  color: #fff;
  border-color: #d97757;
}
/* Footer */
.ent-dt-ftr {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ent-dt-clear {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--ent-text3);
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}
.ent-dt-clear:hover {
  color: var(--ent-text2);
}
.ent-dt-ok {
  padding: 7px 20px;
  background: #d97757;
  color: #fff;
  border: none;
  border-radius: var(--ent-radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ent-font);
  transition: background 0.15s;
}
.ent-dt-ok:hover {
  background: #c96a48;
}
@keyframes ent-dt-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(5px);
  }
  80% {
    transform: translateX(-3px);
  }
}

/* Password show/hide toggle — flexbox layout (no transform anchoring).
   Wrap is a horizontal flex container; input fills remaining width; toggle
   button is pinned to the right via top:0/bottom:0 + margin:auto. Nothing
   depends on wrap height staying stable across type toggles, focus rings,
   or mobile font-size overrides. Matches consumer .input-pw-eye in
   apps/web/index.html for parity. */
.pw-wrap {
  position: relative;
  display: flex !important;
  align-items: stretch;
  height: 48px !important;
  width: 100%;
}
.pw-wrap .ent-input,
.pw-wrap .ent-input-line {
  flex: 1 1 auto;
  min-width: 0;
  height: 100% !important;
  padding-right: 40px;
  box-sizing: border-box;
  line-height: 1.4;
}
.pw-toggle-btn {
  position: absolute;
  right: 10px;
  top: 0; bottom: 0;
  margin: auto 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--ent-text3);
  transition: color 0.15s;
  flex-shrink: 0;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.pw-toggle-btn:active { transform: none; }
.pw-toggle-btn:hover {
  color: var(--ent-text2);
}
.pw-toggle-btn svg {
  display: block;
  width: 16px;
  height: 16px;
}

.ent-textarea {
  width: 100%;
  background: var(--ent-surface2);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--ent-radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ent-text);
  font-family: var(--ent-font);
  outline: none;
  resize: vertical;
  min-height: 90px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.ent-textarea:focus {
  border-color: #d97757;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.12);
}
[data-theme='dark'] .ent-textarea {
  background: var(--ent-surface2);
  border-color: rgba(255, 255, 255, 0.1);
}

.ent-select {
  width: 100%;
  background: var(--ent-surface2);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--ent-radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--ent-text);
  font-family: var(--ent-font);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239C9680' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.ent-select:focus {
  border-color: #d97757;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.12);
}
[data-theme='dark'] .ent-select {
  background-color: var(--ent-surface2);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ── Buttons — Photonic Interface ─────────────────────────────────────────── */
/* Base structural styles applied to .ent-btn AND all stand-alone variant classes
   (buttons in JS use ent-btn-primary alone, never ent-btn + ent-btn-primary) */
.ent-btn,
.ent-btn-primary,
.ent-btn-secondary,
.ent-btn-danger,
.ent-btn--ghost-danger,
.ent-btn-outline {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: var(--ent-radius-sm);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.018em;
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--ent-font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform 0.22s var(--ent-spring),
    box-shadow 0.22s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    opacity 0.15s ease;
}
.ent-btn:disabled,
.ent-btn-primary:disabled,
.ent-btn-secondary:disabled,
.ent-btn-danger:disabled,
.ent-btn--ghost-danger:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}
.ent-btn:disabled:hover,
.ent-btn-primary:disabled:hover,
.ent-btn-secondary:disabled:hover,
.ent-btn-danger:disabled:hover {
  transform: none !important;
  box-shadow: inherit !important;
}
.ent-btn:focus-visible,
.ent-btn-primary:focus-visible,
.ent-btn-secondary:focus-visible,
.ent-btn-danger:focus-visible {
  outline: 2px solid rgba(217, 119, 87, 0.7);
  outline-offset: 3px;
}

/* ── Practice button — secondary solid, matches Request Session shape ───── */
.ent-btn-outline {
  background: var(--ent-surface2);
  color: var(--ent-text);
  border: 1px solid var(--ent-border2);
}
.ent-btn-outline:hover {
  border-color: var(--ent-text3);
  transform: translateY(-1px);
}
.ent-btn-outline:active {
  transform: scale(0.97);
}
.ent-btn-outline svg {
  color: var(--ent-text3);
}
[data-theme='dark'] .ent-btn-outline {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--ent-text2);
}
[data-theme='dark'] .ent-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ent-text);
}
[data-theme='dark'] .ent-btn-outline svg {
  color: var(--ent-text3);
}

/* ── Sessions header actions — Practice + Request side by side ──────────── */
.ent-sessions-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Primary — Terra Refined ──────────────────────────────────────────────── */
/* Uses the theme's own terra accent — deep gradient so it reads as crafted,
   not flat. Darker mid-tones prevent it from dominating the view. */
.ent-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: var(--ent-radius-sm) var(--ent-radius-sm) 0 0;
  pointer-events: none;
  z-index: 1;
}
.ent-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 68%
  );
  transform: translateX(-140%);
  transition: transform 0.6s ease;
  z-index: 2;
  pointer-events: none;
}
.ent-btn-primary:hover:not(:disabled)::after {
  transform: translateX(140%);
}

.ent-btn-primary {
  background: #1a1a1c;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
[data-theme='light'] .ent-btn-primary {
  background: #111113;
  border-color: rgba(0, 0, 0, 0.1);
}
.ent-btn-primary:hover:not(:disabled) {
  background: #2a2a2e;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}
/* Professional press — no animation, subtle feedback */
.ent-btn-primary:active:not(:disabled) {
  opacity: 0.85;
}

/* ── Secondary — Crystalline Glass ───────────────────────────────────────── */
.ent-btn-secondary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(246, 242, 238, 0.95) 100%);
  border: 1px solid rgba(0, 0, 0, 0.11);
  color: var(--ent-text2);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.04);
}
.ent-btn-secondary:hover:not(:disabled) {
  border-color: var(--ent-text3);
  color: var(--ent-text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.ent-btn-secondary:active:not(:disabled) {
  opacity: 0.85;
}
[data-theme='dark'] .ent-btn-secondary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.082) 0%, rgba(255, 255, 255, 0.048) 100%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  color: var(--ent-text2);
  backdrop-filter: blur(12px) saturate(1.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
[data-theme='dark'] .ent-btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--ent-text);
  box-shadow:
    0 0 22px rgba(217, 119, 87, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(217, 119, 87, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
[data-theme='dark'] .ent-btn-secondary:active:not(:disabled) {
  opacity: 0.85;
}

/* ── Danger — Crimson Plasma Edge ────────────────────────────────────────── */
.ent-btn-danger {
  background: rgba(239, 68, 68, 0.07);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.ent-btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.13);
  border-color: rgba(239, 68, 68, 0.58);
  transform: translateY(-1px);
  box-shadow:
    0 0 20px rgba(239, 68, 68, 0.26),
    0 5px 14px rgba(0, 0, 0, 0.14),
    0 0 0 1px rgba(239, 68, 68, 0.22);
}
.ent-btn-danger:active:not(:disabled) {
  transform: translateY(0);
}

/* ── Ghost Danger — Plasma Outline ───────────────────────────────────────── */
.ent-btn--ghost-danger {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.32);
  color: #ef4444;
  box-shadow:
    0 0 0 1px rgba(239, 68, 68, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.08);
}
.ent-btn--ghost-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.58);
  transform: translateY(-1px);
  box-shadow:
    0 0 22px rgba(239, 68, 68, 0.26),
    0 5px 14px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(239, 68, 68, 0.22);
}
.ent-btn--ghost-danger:active:not(:disabled) {
  transform: translateY(0);
}

/* ── Sizes & utilities ────────────────────────────────────────────────────── */
.ent-btn-sm {
  padding: 6px 14px;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.ent-btn-full {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.ent-btn-icon {
  padding: 7px;
}

/* ── Login-card buttons ─────────────────────────────────────────────────── */
.ent-login-card button.ent-btn-primary,
.ent-login-card button.ent-btn-secondary {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--ent-font);
  border-radius: var(--ent-radius-sm);
  cursor: pointer;
  transition:
    background 0.18s,
    box-shadow 0.18s,
    opacity 0.15s;
  margin-top: 12px;
  letter-spacing: 0.1px;
}
/* Black futuristic primary button */
.ent-login-card button.ent-btn-primary {
  background: #111110;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.ent-login-card button.ent-btn-primary:hover:not(:disabled) {
  background: #1c1b18;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  opacity: 1;
}
.ent-login-card button.ent-btn-secondary {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--ent-text2);
  box-shadow: none;
  margin-top: 8px;
}
.ent-login-card button.ent-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.07);
  color: var(--ent-text);
}
[data-theme='dark'] .ent-login-card button.ent-btn-primary {
  background: #e8e6df;
  color: #111110;
  border-color: rgba(255, 255, 255, 0.05);
}
[data-theme='dark'] .ent-login-card button.ent-btn-primary:hover:not(:disabled) {
  background: #f2f0eb;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
[data-theme='dark'] .ent-login-card button.ent-btn-secondary {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--ent-text2);
}
[data-theme='dark'] .ent-login-card button.ent-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.ent-login-step-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 20px;
  font-family: var(--ent-font);
  transition: color 0.15s;
  letter-spacing: 0.2px;
}
.ent-login-step-back:hover {
  color: rgba(255, 255, 255, 0.65);
}

.ent-forgot-link {
  display: block;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.28);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 18px;
  font-family: var(--ent-font);
  letter-spacing: 0.2px;
  transition: color 0.15s;
}
.ent-forgot-link:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* ── Forgot password confirmation state ───────────────────────────────────── */
.ent-forgot-confirm {
  padding: 8px 0 4px;
  animation: ent-confirm-fade 0.3s ease both;
}
@keyframes ent-confirm-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ent-forgot-confirm-icon {
  margin-bottom: 20px;
  opacity: 0.7;
}
.ent-forgot-confirm-title {
  font-size: 20px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}
.ent-forgot-confirm-body {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.38);
  line-height: 1.6;
  margin: 0 0 32px;
}
.ent-forgot-domain {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}
.ent-forgot-back-btn {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.38);
  font-size: 12px;
  font-family: var(--ent-font);
  letter-spacing: 0.2px;
  padding: 0 0 2px;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.ent-forgot-back-btn:hover {
  color: rgba(255, 255, 255, 0.7);
  border-bottom-color: rgba(255, 255, 255, 0.4);
}

/* ── Error / success messages ─────────────────────────────────────────────── */
.ent-error-msg,
.ent-form-error {
  font-size: 12px;
  color: #ff6b6b;
  margin-top: 12px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  letter-spacing: 0.1px;
}
.ent-success-msg {
  background: rgba(16, 185, 129, 0.07);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--ent-radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: #059669;
  margin-bottom: 14px;
}
.ent-warn-msg,
.ent-form-warn {
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: var(--ent-radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  color: #b45309;
  margin-bottom: 14px;
}

/* ── CSS class aliases — bridge JS-rendered classes to CSS definitions ──────
   Board audit (2026-03-12) found these class name mismatches in enterprise-app.js */
/* Form labels */
.ent-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ent-text2);
  margin-bottom: 8px;
}
/* Two-column form row */
.ent-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Modal header chrome */
.ent-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--ent-border2);
  flex-shrink: 0;
}
.ent-modal-header h3,
.ent-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ent-text);
  margin: 0;
}
/* Modal body */
.ent-modal-body {
  padding: 20px 24px;
}
/* Modal footer */
.ent-modal-footer {
  padding: 14px 24px 20px;
}
.ent-modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--ent-radius-sm);
  color: var(--ent-text3);
  font-size: 18px;
  line-height: 1;
  transition:
    background 0.15s,
    color 0.15s;
}
.ent-modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ent-text);
}
[data-theme='dark'] .ent-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
}
/* Toast — js uses ent-toast, define both names */
.ent-toast,
.ent-notif-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  padding: 12px 18px;
  border-radius: var(--ent-radius);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  box-shadow: var(--ent-shadow-lg);
  max-width: 340px;
  animation: entToastIn 0.3s var(--ent-ease);
  pointer-events: none;
}
@keyframes entToastIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.ent-toast-success,
.ent-notif-toast-success {
  background: #111110;
}
.ent-toast-error,
.ent-notif-toast-error {
  background: #dc2626;
}
.ent-toast-info,
.ent-notif-toast-info {
  background: #111110;
}

/* ── Atlas ring animation keyframes (same as individual studio) ───────────── */
.atlas-ring {
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  opacity: 0;
}
.atlas-r1 {
  animation: atlas-r1-anim 6s ease-in-out infinite;
}
.atlas-r2 {
  animation: atlas-r2-anim 6s ease-in-out infinite;
}
.atlas-r3 {
  animation: atlas-r3-anim 6s ease-in-out infinite;
}
@keyframes atlas-r1-anim {
  0% {
    stroke-dashoffset: 44;
    opacity: 0;
  }
  3% {
    opacity: 0.7;
  }
  17% {
    stroke-dashoffset: 0;
    opacity: 0.7;
  }
  75% {
    stroke-dashoffset: 0;
    opacity: 0.35;
  }
  90% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 44;
    opacity: 0;
  }
}
@keyframes atlas-r2-anim {
  0%,
  17% {
    stroke-dashoffset: 44;
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  33% {
    stroke-dashoffset: 0;
    opacity: 0.7;
  }
  80% {
    stroke-dashoffset: 0;
    opacity: 0.35;
  }
  93% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 44;
    opacity: 0;
  }
}
@keyframes atlas-r3-anim {
  0%,
  33% {
    stroke-dashoffset: 44;
    opacity: 0;
  }
  36% {
    opacity: 0.7;
  }
  50% {
    stroke-dashoffset: 0;
    opacity: 0.7;
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 0.35;
  }
  96% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 44;
    opacity: 0;
  }
}
/* Welcome atom: each ellipse draws in one after another, stays visible */
.ent-atlas-welcome-atom .atlas-r1 {
  animation: atlasWelcomeR1 1.2s ease-out forwards;
}
.ent-atlas-welcome-atom .atlas-r2 {
  animation: atlasWelcomeR2 1.2s ease-out 0.35s forwards;
}
.ent-atlas-welcome-atom .atlas-r3 {
  animation: atlasWelcomeR3 1.2s ease-out 0.7s forwards;
}
@keyframes atlasWelcomeR1 {
  0% {
    stroke-dashoffset: 44;
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.55;
  }
}
@keyframes atlasWelcomeR2 {
  0% {
    stroke-dashoffset: 44;
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.55;
  }
}
@keyframes atlasWelcomeR3 {
  0% {
    stroke-dashoffset: 44;
    opacity: 0;
  }
  15% {
    opacity: 0.8;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.55;
  }
}
@keyframes atlasWelcomeIn {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  40% {
    opacity: 1;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .atlas-ring {
    stroke-dashoffset: 0;
    opacity: 0.35;
    animation: none;
  }
}

/* ── Atlas AI chat tab ────────────────────────────────────────────────────── */
.ent-atlas-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* History toggle — right edge of tab header, title stays left */
.ent-atlas-hdr-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ent-text3);
  transition:
    background 0.15s,
    color 0.15s;
  flex-shrink: 0;
}
.ent-atlas-hdr-btn:hover {
  background: var(--ent-accent-lt);
  color: #d97757;
}
.ent-atlas-hdr-btn.ent-atlas-hdr-active {
  background: var(--ent-accent-lt);
  color: #d97757;
}

/* Panel divider line slides right when history is open, left when closed */
.ent-panel-div {
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
/* open  → line shifts right (4.5 px = 6 SVG units at 0.75 scale) */
.ent-atlas-hdr-active .ent-panel-div {
  transform: translateX(4.5px);
}
/* closed → line rests at left — smooth return */
.ent-atlas-hdr-btn:not(.ent-atlas-hdr-active) .ent-panel-div {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .ent-panel-div {
    transition: none;
  }
}

/* Flex row: history panel + chat main */
.ent-atlas-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  background: var(--ent-surface);
  border-radius: var(--ent-radius);
  overflow: hidden;
  box-shadow: var(--ent-shadow-sm);
}

/* Collapsible history panel */
.ent-atlas-history-panel {
  width: 192px;
  min-width: 192px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ent-border2);
  overflow: hidden;
  flex-shrink: 0;
  transition:
    width 0.24s var(--ent-ease),
    min-width 0.24s var(--ent-ease),
    opacity 0.18s ease;
}
.ent-atlas-hist-hidden {
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0 !important;
}

/* New chat button — top of history panel */
.ent-atlas-history-top {
  padding: 10px 10px 2px;
  flex-shrink: 0;
}
.ent-atlas-hist-new-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--ent-border2);
  background: var(--ent-surface2);
  font-family: var(--ent-font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ent-text2);
  cursor: pointer;
  transition:
    background 0.14s,
    border-color 0.14s,
    color 0.14s;
  white-space: nowrap;
}
.ent-atlas-hist-new-btn:hover {
  background: var(--ent-accent-lt);
  border-color: rgba(217, 119, 87, 0.25);
  color: #d97757;
}

.ent-atlas-history-header {
  padding: 12px 14px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ent-text3);
  flex-shrink: 0;
  white-space: nowrap;
}

.ent-atlas-history-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.07) transparent;
}

.ent-atlas-history-empty {
  padding: 20px 8px;
  text-align: center;
  font-size: 12px;
  color: var(--ent-text3);
  line-height: 1.6;
}

.ent-atlas-history-item {
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--ent-text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background 0.14s,
    color 0.14s;
  margin-bottom: 1px;
}
.ent-atlas-history-item:hover {
  background: var(--ent-accent-lt);
  color: var(--ent-text);
}
.ent-atlas-hist-active {
  background: var(--ent-accent-lt) !important;
  color: #d97757 !important;
  font-weight: 600;
}

/* Chat main — right side of the layout */
.ent-atlas-chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Messages area — shared by welcome + active views */
.ent-atlas-messages-area {
  flex: 1;
  overflow-y: auto;
  padding: 24px 24px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.08) transparent;
}
.ent-atlas-welcome-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Welcome screen */
.ent-atlas-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  width: 100%;
}
.ent-atlas-welcome-icon {
  margin-bottom: 14px;
  color: #d97757;
  animation: atlasWelcomeIn 0.6s ease-out;
}
.ent-atlas-welcome-icon svg {
  width: 44px;
  height: 44px;
}
.ent-atlas-welcome h2 {
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 700;
  color: var(--ent-text);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.ent-atlas-welcome-sub {
  font-size: 15px;
  color: var(--ent-text3);
  margin-bottom: 0;
  line-height: 1.5;
}

/* Suggestion chips — live below input bar */
.ent-atlas-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
  max-width: 720px;
  margin: 10px auto 0;
}
.ent-atlas-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--ent-border2);
  border-radius: 100px;
  background: transparent;
  font-family: var(--ent-font);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ent-text2);
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  white-space: nowrap;
  line-height: 1.4;
}
.ent-atlas-chip svg {
  flex-shrink: 0;
  opacity: 0.5;
}
.ent-atlas-chip:hover {
  background: var(--ent-surface2);
  color: var(--ent-text);
  border-color: var(--ent-border);
}
.ent-atlas-chip:hover svg {
  opacity: 1;
}

/* Messages list */
.ent-atlas-messages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}
@keyframes atlasMsgIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ent-atlas-msg {
  font-size: 13.5px;
  line-height: 1.75;
  animation: atlasMsgIn 0.35s var(--ent-ease);
  word-wrap: break-word;
}
.ent-atlas-msg p {
  margin: 0;
}

/* User message row: [action icons LEFT] [bubble RIGHT] */
.ent-atlas-msg--user {
  align-self: flex-end;
  max-width: 80%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
}
/* Consumer shared classes applied inside enterprise message rows */
.ent-atlas-msg--user:hover .atlas-user-actions { opacity: 1; }
.ent-atlas-msg--user.atlas-msg-editing { flex-direction: column; align-items: flex-end; }
.ent-atlas-msg--user.atlas-msg-editing .ent-atlas-user-bubble {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--ent-radius-md, 8px);
}
.ent-atlas-user-bubble {
  background: var(--ent-surface2);
  color: var(--ent-text);
  border: 1px solid var(--ent-border2);
  padding: 10px 16px;
  border-radius: var(--ent-radius-xl) var(--ent-radius-xl) 4px var(--ent-radius-xl);
}
[data-theme='dark'] .ent-atlas-user-bubble {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.08);
}
.ent-atlas-user-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.ent-atlas-msg--user:hover .ent-atlas-user-actions {
  opacity: 1;
}
.ent-atlas-user-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--ent-text3);
  cursor: pointer;
  transition: color 0.15s ease;
}
.ent-atlas-user-action-btn:hover {
  color: var(--ent-text);
}

/* AI message: no bubble, terra label header (matches individual .ai-label) */
.ent-atlas-msg--ai {
  align-self: flex-start;
  max-width: 100%;
  color: var(--ent-text);
  padding: 4px 0;
}
.ent-ai-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #d97757;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ent-ai-label svg {
  flex-shrink: 0;
}
.ent-ai-content {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ent-text);
  white-space: pre-line;
}
.ent-atlas-thinking-dot {
  color: var(--ent-text3);
  font-style: italic;
  animation: entAtlasPulse 1.4s ease-in-out infinite;
}

/* AI response action toolbar — always visible */
.ent-ai-msg-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 10px;
}
.ent-ai-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--canvas-400);
  cursor: pointer;
  transition: all 0.15s ease;
}
.ent-ai-action-btn:hover {
  color: var(--canvas-700);
}
.ent-ai-action-btn.ent-action-active {
  color: #d97757;
}
.ent-ai-action-btn svg {
  flex-shrink: 0;
}
@keyframes entAtlasPulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.9;
  }
}

/* Input bar — pill style matching individual studio */
.ent-atlas-input-bar {
  flex-shrink: 0;
  padding: 12px 24px;
  background: transparent;
}
.ent-atlas-compose {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 6px;
  background: var(--ent-surface2);
  border-radius: 100px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition:
    box-shadow 0.22s ease,
    background 0.22s ease;
}
.ent-atlas-compose:focus-within {
  background: var(--ent-surface);
  box-shadow:
    0 0 0 1.5px #d97757,
    0 0 0 5px rgba(217, 119, 87, 0.1),
    0 0 18px rgba(217, 119, 87, 0.07),
    var(--ent-shadow-sm);
}
[data-theme='dark'] .ent-atlas-compose {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}
[data-theme='dark'] .ent-atlas-compose:focus-within {
  box-shadow:
    0 0 0 1.5px #d97757,
    0 0 0 4px rgba(224, 124, 88, 0.12);
}
.ent-atlas-compose-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--ent-font);
  font-size: 14px;
  color: var(--ent-text);
  padding: 9px 8px;
  outline: none;
  min-width: 0;
}
.ent-atlas-compose-input::placeholder {
  color: var(--ent-text3);
}
/* Circular send button matching individual studio */
.ent-atlas-send-btn {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  max-width: 34px;
  max-height: 34px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--ent-text, #111110);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  padding: 0;
  transition:
    background 0.15s,
    transform 0.1s;
}
.ent-atlas-send-btn svg {
  overflow: visible;
}
.ent-atlas-send-btn:hover:not(:disabled) {
  background: #2a2926;
  transform: scale(1.05);
}
.ent-atlas-send-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}
[data-theme='dark'] .ent-atlas-send-btn {
  background: rgba(242, 240, 235, 0.9);
  color: #111110;
}
[data-theme='dark'] .ent-atlas-send-btn:hover:not(:disabled) {
  background: #f2f0eb;
}
/* L3 FIX: Dark mode scrollbar overrides for enterprise panels */
[data-theme='dark'] .ent-atlas-history-list {
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}
[data-theme='dark'] .ent-atlas-messages-area {
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* ── Atlas model dropdown ─────────────────────────────────────────────────── */
.ent-atlas-model-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--ent-border);
  border-radius: 20px;
  background: var(--ent-surface);
  color: var(--ent-text2);
  font-family: var(--ent-font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.ent-atlas-model-btn:hover {
  background: var(--ent-surface2);
  border-color: var(--ent-border2);
}
.ent-atlas-model-icon {
  display: flex;
  align-items: center;
  width: 16px;
  height: 16px;
  color: var(--ent-accent, #d97757);
}
.ent-atlas-model-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: var(--ent-surface, #1a1a1e);
  border: 1px solid var(--ent-border);
  border-radius: 12px;
  padding: 4px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.ent-atlas-model-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: var(--ent-font);
  transition: background 0.12s;
}
.ent-atlas-model-opt:hover {
  background: var(--ent-surface2);
}
.ent-atlas-model-opt.active {
  background: var(--ent-accent, #d97757);
}
.ent-atlas-model-opt.active div {
  color: #fff !important;
}
.ent-atlas-model-opt-icon {
  display: flex;
  align-items: center;
  width: 16px;
  height: 16px;
  color: var(--ent-text3);
  flex-shrink: 0;
}
.ent-atlas-model-opt.active .ent-atlas-model-opt-icon {
  color: #fff;
}

/* ── Session request — collapsed model dropdown ──────────────────────────
   Replaces the previous 9-card grid. Collapsed by default so the modal
   height matches Steps 1/2 (no re-center shift when moving to Step 3).
   Click the trigger → menu expands; click an option → selection + auto-close. */
.ent-req-model-dropdown {
  position: relative;
}
.ent-req-model-trigger {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid var(--ent-border2);
  border-radius: 10px;
  background: var(--ent-surface);
  cursor: pointer;
  text-align: left;
  font-family: var(--ent-font);
  transition:
    border-color 0.15s,
    background 0.15s;
}
.ent-req-model-trigger:hover {
  border-color: var(--ent-accent);
  background: var(--ent-surface2);
}
.ent-req-model-dropdown.open .ent-req-model-trigger {
  border-color: var(--ent-accent);
  background: rgba(217, 119, 87, 0.04);
}
.ent-req-model-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ent-text3);
  transition: transform 0.15s;
  pointer-events: none;
}
.ent-req-model-dropdown.open .ent-req-model-caret {
  transform: translateY(-50%) rotate(180deg);
}
.ent-req-model-menu {
  /* position:fixed so the menu escapes any overflow:hidden / overflow:auto
   * on the modal body or wizard container. Coords are set by JS at open
   * time from the trigger's getBoundingClientRect, and flipped upward if
   * there's no room below. Previously this was position:absolute, which
   * got clipped by the modal at the bottom of the viewport. */
  position: fixed;
  z-index: 10000;
  background: var(--ent-surface);
  border: 1px solid var(--ent-border2);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 4px;
  max-height: 320px;
  overflow-y: auto;
  display: none;
}
.ent-req-model-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--ent-font);
  transition: background 0.12s;
}
.ent-req-model-option:hover {
  background: var(--ent-surface2);
}
.ent-req-model-option.selected {
  background: rgba(217, 119, 87, 0.08);
  border-color: rgba(217, 119, 87, 0.3);
}
.ent-req-model-option + .ent-req-model-option {
  margin-top: 2px;
}
.ent-req-model-icon {
  display: flex;
  align-items: center;
  width: 16px;
  height: 16px;
  color: var(--ent-accent);
  flex-shrink: 0;
}
.ent-req-model-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.ent-req-model-name {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ent-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-req-model-desc {
  font-size: 10.5px;
  color: var(--ent-text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ent-req-model-tag {
  position: absolute;
  top: 5px;
  right: 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 5px;
}
.ent-tag-fast {
  background: var(--ent-surface2);
  color: var(--ent-text3);
}
.ent-tag-quality {
  background: rgba(217, 119, 87, 0.08);
  color: var(--ent-accent);
}
.ent-tag-coding {
  background: rgba(59, 130, 246, 0.08);
  color: #3b82f6;
}
.ent-tag-reasoning {
  background: rgba(139, 92, 246, 0.08);
  color: #8b5cf6;
}
.ent-tag-free {
  background: rgba(16, 163, 127, 0.08);
  color: #10a37f;
}

/* ── Atlas action buttons (attach / voice) ───────────────────────────────── */
.ent-atlas-action-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--ent-text3);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.ent-atlas-action-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ent-text2);
}
.ent-atlas-input-hint {
  text-align: center;
  font-size: 11px;
  color: var(--ent-text3);
  margin-top: 6px;
  opacity: 0.6;
}

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.ent-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.ent-stat-card {
  background: var(--ent-surface);
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius);
  padding: 18px 20px;
  box-shadow: none;
}
.ent-stat-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--ent-text);
  line-height: 1;
  margin-bottom: 6px;
}
.ent-stat-label {
  font-size: 12px;
  color: var(--ent-text2);
  font-weight: 500;
}

/* ── Cards & sections ─────────────────────────────────────────────────────── */
.ent-card {
  background: var(--ent-surface);
  border: none;
  border-radius: var(--ent-radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--ent-shadow-sm);
}
.ent-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ent-text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
[data-theme='dark'] .ent-section-title {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.ent-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
[data-theme='dark'] .ent-section-header-row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.ent-section-header-row .ent-section-title {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
/* ── Tables ───────────────────────────────────────────────────────────────── */
.ent-table-wrap {
  overflow-x: auto;
}
.ent-table {
  width: 100%;
  border-collapse: collapse;
}
.ent-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ent-text3);
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  white-space: nowrap;
}
.ent-table td {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ent-text2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}
.ent-table tr:last-child td {
  border-bottom: none;
}
.ent-table tr:hover td {
  background: rgba(217, 119, 87, 0.04);
}
.ent-table tr.expandable {
  cursor: pointer;
}
[data-theme='dark'] .ent-table th {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .ent-table td {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .ent-table tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Status badges ────────────────────────────────────────────────────────── */
.ent-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.ent-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ent-status-pending {
  color: #b45309;
  background: rgba(245, 158, 11, 0.1);
}
.ent-status-approved {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
}
.ent-status-denied {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.1);
}
.ent-status-used {
  color: #9c9680;
  background: rgba(0, 0, 0, 0.04);
}
.ent-status-expired {
  color: #9c9680;
  background: rgba(0, 0, 0, 0.04);
}
/* Live session indicators */
.ent-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #059669;
  display: inline-block;
  animation: entLivePulse 1.5s ease-in-out infinite;
}
@keyframes entLivePulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0);
  }
}
.ent-row-live {
  background: rgba(5, 150, 105, 0.03);
}
.ent-status-in_progress {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
}
.ent-status-in_progress::before {
  background: #059669;
}
/* Resume (in_progress session) — solid terra orange with bright white play
 * icon. Matches the brand's "live/ongoing" signal (answer card borders,
 * auto-answer chip, Buy Now secondary). Replaces the old soft-green tint
 * that faded into the row background and read as "disabled" next to the
 * vivid red End button. */
.ent-icon-btn-live {
  box-sizing: border-box !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  background: #d97757 !important;
  color: #ffffff !important;
  border: 1px solid #d97757 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(217, 119, 87, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
.ent-icon-btn-live:hover {
  background: #c46849 !important;
  border-color: #c46849 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(217, 119, 87, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}
/* v1.0.406 — reverted to solid red emergency-stop. User decision: the
 * loud red is the correct affordance for End. */
.ent-icon-btn-end {
  box-sizing: border-box !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  background: #dc2626 !important;
  color: #fff !important;
  border: 1px solid #dc2626 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25) !important;
}
.ent-icon-btn-end:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4) !important;
}

.ent-status-active {
  color: #6b8f71;
  background: rgba(107, 143, 113, 0.1);
}
.ent-status-invited {
  color: #8b8578;
  background: rgba(139, 133, 120, 0.1);
}
.ent-status-suspended {
  color: #9c7c6c;
  background: rgba(156, 124, 108, 0.1);
}
[data-theme='dark'] .ent-status-used,
[data-theme='dark'] .ent-status-expired {
  background: rgba(255, 255, 255, 0.07);
}

/* ── Resume Preview ───────────────────────────────────────────────────────── */
@keyframes entRpOverlayIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes entRpSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes entRpSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
}
@keyframes entRpSpin {
  to {
    transform: rotate(360deg);
  }
}

.ent-rp-overlay {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: entRpOverlayIn 0.2s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ent-rp-overlay.closing {
  animation: entRpOverlayIn 0.2s ease reverse forwards;
}
.ent-rp-modal {
  width: min(92vw, 900px);
  height: min(88vh, 820px);
  background: var(--ent-bg, #fff);
  border-radius: 16px;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: entRpSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ent-rp-overlay.closing .ent-rp-modal {
  animation: entRpSlideOut 0.2s ease forwards;
}

.ent-rp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ent-border, #eee);
  background: var(--ent-bg, #fff);
  flex-shrink: 0;
  gap: 12px;
}
.ent-rp-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.ent-rp-toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ent-rp-file-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--ent-surface, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ent-accent, #d97757);
  flex-shrink: 0;
}
.ent-rp-format {
  font-size: 11px;
  color: var(--ent-text3, #999);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}
.ent-rp-tool-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ent-text2, #666);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.ent-rp-tool-btn:hover {
  background: var(--ent-surface, #f0f0f0);
  color: var(--ent-text, #111);
}
.ent-rp-close-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
.ent-rp-sep {
  width: 1px;
  height: 20px;
  background: var(--ent-border, #e5e5e5);
  margin: 0 4px;
}
.ent-rp-zoom-label {
  font-size: 11px;
  color: var(--ent-text3, #999);
  min-width: 36px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.ent-rp-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--ent-surface, #f5f5f4);
  position: relative;
}
.ent-rp-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.ent-rp-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ent-border, #ddd);
  border-top-color: var(--ent-accent, #d97757);
  border-radius: 50%;
  animation: entRpSpin 0.8s linear infinite;
}
.ent-rp-loading-text {
  font-size: 13px;
  color: var(--ent-text3, #999);
}
.ent-rp-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 100%;
}

/* Document styling — theme-aware */
.ent-rp-html-doc {
  background: var(--ent-bg, #fff);
  color: var(--ent-text, #1a1a1a);
  padding: 40px 48px;
  border-radius: 4px;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  max-width: 800px;
  width: 100%;
  font-size: 14px;
  line-height: 1.65;
  word-break: break-word;
  overflow-x: auto;
  box-sizing: border-box;
  transition: transform 0.15s ease;
}
.ent-rp-html-doc h1 {
  font-size: 22px;
  margin: 0 0 8px;
}
.ent-rp-html-doc h2 {
  font-size: 18px;
  margin: 16px 0 6px;
}
.ent-rp-html-doc h3 {
  font-size: 15px;
  margin: 14px 0 4px;
}
.ent-rp-html-doc p {
  margin: 6px 0;
}
.ent-rp-html-doc ul,
.ent-rp-html-doc ol {
  padding-left: 24px;
  margin: 6px 0;
}
.ent-rp-html-doc table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
}
.ent-rp-html-doc td,
.ent-rp-html-doc th {
  border: 1px solid var(--ent-border, #ddd);
  padding: 6px 10px;
  font-size: 13px;
}
.ent-rp-html-doc a {
  color: var(--ent-accent, #d97757);
}

.ent-rp-text-doc {
  background: var(--ent-bg, #fff);
  color: var(--ent-text, #1a1a1a);
  padding: 40px 48px;
  border-radius: 4px;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  max-width: 800px;
  width: 100%;
  font-size: 13.5px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  transition: transform 0.15s ease;
}

.ent-rp-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 24px;
  color: var(--ent-text3, #999);
  text-align: center;
  font-size: 14px;
}

/* Dark theme overrides */
[data-theme='dark'] .ent-rp-modal {
  background: var(--ent-bg);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .ent-rp-toolbar {
  background: var(--ent-bg);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .ent-rp-file-icon {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .ent-rp-body {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme='dark'] .ent-rp-tool-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .ent-rp-sep {
  background: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .ent-rp-html-doc,
[data-theme='dark'] .ent-rp-text-doc {
  background: var(--ent-bg);
  color: var(--ent-text);
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .ent-rp-html-doc td,
[data-theme='dark'] .ent-rp-html-doc th {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Mobile responsive */
@media (max-width: 640px) {
  .ent-rp-modal {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  .ent-rp-toolbar {
    padding: 10px 12px;
  }
  .ent-rp-content {
    padding: 12px;
  }
  .ent-rp-html-doc,
  .ent-rp-text-doc {
    padding: 20px 16px;
  }
}

/* ── Modals ───────────────────────────────────────────────────────────────── */
.ent-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(19, 19, 20, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-theme='dark'] .ent-modal-overlay {
  background: rgba(0, 0, 0, 0.65);
}

.ent-modal {
  background: var(--ent-surface);
  border: none;
  border-radius: 20px;
  padding: 28px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--ent-shadow-xl);
  animation: ent-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ent-modal-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ent-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ent-text);
  margin-bottom: 20px;
}
.ent-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}
.ent-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 24px;
  flex-wrap: wrap;
}
.ent-modal-footer .ent-btn-secondary,
.ent-modal-footer .ent-btn-primary,
.ent-modal-footer .ent-btn-danger {
  flex: 1 1 auto;
  min-width: 80px;
}
@media (max-width: 480px) {
  .ent-modal-footer {
    flex-direction: column;
  }
  .ent-modal-footer .ent-btn-secondary,
  .ent-modal-footer .ent-btn-primary,
  .ent-modal-footer .ent-btn-danger {
    width: 100%;
    flex: none;
  }
}

/* ── Sign-out confirmation modal ─────────────────────────────────────────── */
.ent-signout-modal {
  max-width: 380px;
  text-align: center;
  padding: 32px 28px 28px;
}
.ent-signout-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(217, 119, 87, 0.1);
  border: 1px solid rgba(217, 119, 87, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: #c8683e;
}
.ent-signout-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ent-text);
  margin: 0 0 10px;
}
.ent-signout-body {
  font-size: 13.5px;
  color: var(--ent-text2);
  line-height: 1.55;
  margin: 0 0 4px;
}
.ent-signout-body strong {
  color: var(--ent-text);
  font-weight: 600;
}
.ent-signout-modal .ent-modal-actions {
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}
.ent-btn-signout-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 22px;
  border-radius: var(--ent-radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition:
    opacity 0.15s,
    transform 0.1s;
  background: linear-gradient(135deg, #c8683e 0%, #8e3b1a 100%);
  color: #fff;
  letter-spacing: 0.01em;
}
.ent-btn-signout-confirm:hover {
  opacity: 0.88;
}
.ent-btn-signout-confirm:active {
  transform: scale(0.97);
}

/* ── Notification toast ───────────────────────────────────────────────────── */
.ent-notif-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--ent-surface);
  border: none;
  border-radius: var(--ent-radius);
  padding: 14px 18px;
  max-width: 340px;
  box-shadow: var(--ent-shadow-lg);
  z-index: 2000;
  font-size: 13px;
  color: var(--ent-text2);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  animation: ent-toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ent-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.ent-notif-toast strong {
  color: var(--ent-text);
}

/* ── Window pill ──────────────────────────────────────────────────────────── */
.ent-window-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  color: #059669;
  font-weight: 600;
}
.ent-window-pill.locked {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--ent-text3);
}

/* ── Empty states ─────────────────────────────────────────────────────────── */
.ent-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ent-text3);
}
.ent-empty svg {
  opacity: 0.25;
  margin-bottom: 12px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.ent-empty p {
  font-size: 13px;
}

/* ── Analytics tab layout ────────────────────────────────────────────────── */
#ent-period-sel {
  padding: 16px 28px 8px;
}
#ent-summary-cards {
  padding: 0 28px 8px;
}
#ent-members-wrap {
  padding: 0 28px 28px;
}

/* ── Period selector ──────────────────────────────────────────────────────── */
.ent-period-tabs {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--ent-radius-sm);
  overflow: hidden;
}
[data-theme='dark'] .ent-period-tabs {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}
.ent-period-tab {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ent-text3);
  cursor: pointer;
  transition:
    background 0.12s,
    color 0.12s;
}
.ent-period-tab.active {
  background: #d97757;
  color: #fff;
}
.ent-period-tab:hover:not(.active) {
  color: var(--ent-text2);
}

/* ── Live session: ticker collapse btn ──────────────────────────────────────
   The answers panel has a white background (live-panel rule). The collapse
   button's default color is white (for the dark frosted-glass ticker in
   consumer), so it's invisible here. Force dark ink so it's always visible. */
#live-ticker-strip .ticker-collapse-btn,
#live-ticker-strip .ticker-clear-btn {
  color: rgba(0, 0, 0, 0.4) !important;
}
#live-ticker-strip .ticker-collapse-btn:hover,
#live-ticker-strip .ticker-clear-btn:hover {
  color: var(--terra, #d97757) !important;
}
[data-theme='dark'] #live-ticker-strip .ticker-collapse-btn,
[data-theme='dark'] #live-ticker-strip .ticker-clear-btn {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ── Expand panel ─────────────────────────────────────────────────────────── */
.ent-expand-panel {
  background: var(--ent-surface2);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 16px 20px;
}
[data-theme='dark'] .ent-expand-panel {
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* ── Settings toggle ──────────────────────────────────────────────────────── */
.ent-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.ent-toggle-row:last-child {
  border-bottom: none;
}
[data-theme='dark'] .ent-toggle-row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.ent-toggle-info strong {
  font-size: 13px;
  color: var(--ent-text);
}
.ent-toggle-info p {
  font-size: 12px;
  color: var(--ent-text3);
  margin-top: 2px;
}

.ent-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.ent-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ent-toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.14);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s;
}
.ent-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.ent-toggle input:checked + .ent-toggle-slider {
  background: #d97757;
}
.ent-toggle input:checked + .ent-toggle-slider::before {
  transform: translateX(18px);
}
[data-theme='dark'] .ent-toggle-slider {
  background: rgba(255, 255, 255, 0.18);
}

/* KB toggle glow pulse — only on the Knowledge Base toggle */
.ent-kb-toggle-wrap .ent-toggle-slider {
  box-shadow: 0 0 0 3px rgba(217,119,87,0.18), 0 0 8px rgba(217,119,87,0.25);
  animation: ent-kb-pulse 2s ease-in-out infinite;
}
.ent-kb-toggle-wrap input:checked + .ent-toggle-slider {
  box-shadow: none;
  animation: none;
}
@keyframes ent-kb-pulse {
  0%,100% { box-shadow: 0 0 0 2px rgba(217,119,87,0.15), 0 0 6px rgba(217,119,87,0.2); }
  50%      { box-shadow: 0 0 0 4px rgba(217,119,87,0.28), 0 0 12px rgba(217,119,87,0.38); }
}

/* ── Notification preferences (Settings → Personal) ──────────────────────── */
.ent-notif-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.ent-notif-pref-row:last-of-type {
  border-bottom: none;
}
[data-theme='dark'] .ent-notif-pref-row {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.ent-notif-pref-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ent-notif-pref-label {
  font-size: 13px;
  color: var(--ent-text);
  font-weight: 500;
}
.ent-notif-pref-desc {
  font-size: 12px;
  color: var(--ent-text3);
}

/* ── Settings pill buttons (Session Defaults / Answer Preferences) ─────────── */
.ent-pill-btn {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background: transparent;
  color: var(--ent-text);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.ent-pill-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ent-pill-btn.active {
  background: #131314;
  border-color: #131314;
  color: #ffffff;
}
[data-theme='dark'] .ent-pill-btn {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--ent-text);
}
[data-theme='dark'] .ent-pill-btn:hover {
  background: rgba(255, 255, 255, 0.07);
}
[data-theme='dark'] .ent-pill-btn.active {
  background: #f2f0eb;
  border-color: #f2f0eb;
  color: #131314;
}

/* ── Range slider (Speech Recognition) ─────────────────────────────────────── */
.ent-range {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.12);
  outline: none;
  cursor: pointer;
}
.ent-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #131314;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
[data-theme='dark'] .ent-range {
  background: rgba(255, 255, 255, 0.15);
}
[data-theme='dark'] .ent-range::-webkit-slider-thumb {
  background: #f2f0eb;
}

/* ── Notification panel inline ────────────────────────────────────────────── */
.ent-notif-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.1s;
  cursor: pointer;
}
/* Approve/Deny action buttons inside notification items */
.ent-notif-actions {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.ent-notif-action-btn {
  padding: 5px 14px;
  border: none;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ent-notif-action-btn:hover {
  opacity: 0.85;
}
.ent-notif-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ent-notif-approve {
  background: #059669;
  color: #fff;
}
.ent-notif-deny {
  background: transparent;
  border: 1px solid #ef4444;
  color: #ef4444;
}
.ent-notif-deny:hover {
  background: rgba(239, 68, 68, 0.08);
}
.ent-notif-done {
  font-size: 11.5px;
  font-weight: 600;
  color: #059669;
}
.ent-notif-done-deny {
  color: #ef4444;
}
.ent-notif-item:hover {
  background: rgba(217, 119, 87, 0.04);
}
.ent-notif-item.unread {
  background: rgba(217, 119, 87, 0.05);
}
[data-theme='dark'] .ent-notif-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.ent-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d97757;
  flex-shrink: 0;
  margin-top: 4px;
}
.ent-notif-dot.read {
  background: transparent;
}
.ent-notif-text strong {
  font-size: 13px;
  color: var(--ent-text);
  display: block;
}
.ent-notif-text span {
  font-size: 12px;
  color: var(--ent-text3);
}

/* ── Missing CSS classes (FIX-03 board report) ────────────────────────── */

/* Policy tab sub-section headings */
.ent-policy-section {
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.ent-policy-section:last-of-type {
  border-bottom: none;
}
[data-theme='dark'] .ent-policy-section {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.ent-policy-section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ent-text2);
  margin-bottom: 10px;
}

/* Settings: constrain form cards to readable width on large screens */
#ent-settings-content .ent-card {
  max-width: 680px;
}

/* Policy number input rows */
.ent-number-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.ent-number-input-row:last-child {
  border-bottom: none;
}
[data-theme='dark'] .ent-number-input-row {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
.ent-number-input-label {
  font-size: 13px;
  color: var(--ent-text2);
  flex: 1;
  line-height: 1.4;
}

/* Custom stepper — replaces browser number spinners */
.ent-stepper {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: 1px solid var(--ent-border2);
  border-radius: var(--ent-radius-sm);
  overflow: hidden;
  background: var(--ent-surface);
}
.ent-stepper-btn {
  width: 32px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 17px;
  font-weight: 300;
  line-height: 1;
  color: var(--ent-text2);
  cursor: pointer;
  transition:
    background 0.13s,
    color 0.13s;
  flex-shrink: 0;
  user-select: none;
}
.ent-stepper-btn:hover {
  background: var(--ent-accent-lt);
  color: #d97757;
}
.ent-stepper-btn:active {
  background: rgba(217, 119, 87, 0.18);
}
.ent-stepper-input {
  width: 52px;
  height: 34px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--ent-border2);
  border-right: 1px solid var(--ent-border2);
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--ent-font);
  color: var(--ent-text);
  outline: none;
  padding: 0;
  -moz-appearance: textfield;
}
.ent-stepper-input::-webkit-inner-spin-button,
.ent-stepper-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
[data-theme='dark'] .ent-stepper {
  border-color: rgba(255, 255, 255, 0.1);
  background: var(--ent-surface2);
}
[data-theme='dark'] .ent-stepper-input {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Hours + minutes dual stepper layout */
.ent-hm-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ent-hm-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--ent-text3);
  letter-spacing: 0.02em;
  min-width: 14px;
}

/* Company color picker row */
.ent-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.ent-color-preview {
  width: 32px;
  height: 32px;
  border-radius: var(--ent-radius-sm);
  border: 1px solid var(--ent-border);
  flex-shrink: 0;
}

/* Billing plan stat grid */
.ent-perf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 12px 0 16px;
}
.ent-perf-item {
  padding: 14px 16px;
  background: var(--ent-surface2);
  border-radius: var(--ent-radius-sm);
  border: 1px solid var(--ent-border);
}
.ent-perf-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ent-text);
  line-height: 1.2;
}
.ent-perf-label {
  font-size: 11px;
  color: var(--ent-text3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Resume table (member Resumes tab) ───────────────────────────────────── */
.ent-resume-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ent-resume-table thead th {
  padding: 9px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--ent-text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--ent-border2);
}
.ent-resume-row td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--ent-border2);
  color: var(--ent-text);
  vertical-align: middle;
}
.ent-resume-row:last-child td {
  border-bottom: none;
}
.ent-resume-row:hover td {
  background: var(--ent-surface2);
}
.ent-resume-nick {
  font-weight: 600;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ent-resume-file {
  color: var(--ent-text2);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ent-resume-size,
.ent-resume-date {
  color: var(--ent-text3);
  white-space: nowrap;
}
.ent-resume-fmt {
  display: inline-flex;
  padding: 2px 7px;
  background: var(--ent-surface2);
  border: 1px solid var(--ent-border2);
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ent-text2);
  letter-spacing: 0.04em;
}
.ent-resume-actions {
  display: flex;
  gap: 6px;
}
.ent-resume-empty {
  padding: 40px 0;
  display: flex;
  justify-content: center;
}
.ent-resume-drop-zone {
  border: 2px dashed var(--ent-border2);
  border-radius: var(--ent-radius);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition:
    border-color 0.15s,
    background 0.15s;
  cursor: pointer;
  min-width: 320px;
}
.ent-resume-drop-zone:hover,
.ent-resume-drop-zone.drag-over {
  border-color: var(--ent-accent);
  background: var(--ent-accent-lt);
}
.ent-resume-drop-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ent-text);
  margin-bottom: 6px;
}
.ent-resume-drop-sub {
  font-size: 12.5px;
  color: var(--ent-text3);
}

/* Resume action icon buttons */
.ent-resume-dl-btn,
.ent-resume-rename-btn,
.ent-resume-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 7px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ent-text3);
  font-size: 12px;
  transition:
    background 0.15s,
    color 0.15s;
}
.ent-resume-dl-btn:hover {
  color: var(--ent-accent);
  background: rgba(var(--ent-accent-rgb, 99, 102, 241), 0.1);
}
.ent-resume-rename-btn:hover {
  color: var(--ent-text);
  background: var(--ent-surface2);
}
.ent-resume-delete-btn:hover {
  color: var(--ent-danger);
  background: rgba(239, 68, 68, 0.1);
}
.ent-resume-delete-btn {
  color: var(--ent-text3);
}

/* Billing cancel banner */
.ent-cancel-banner {
  padding: 12px 16px;
  border-left: 3px solid var(--ent-text3, rgba(255, 255, 255, 0.3));
  background: rgba(255, 255, 255, 0.03);
  border-radius: 0 var(--ent-radius-sm) var(--ent-radius-sm) 0;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
  color: var(--ent-text2);
}
.ent-cancel-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ent-text2, rgba(255, 255, 255, 0.6));
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
}

/* Billing danger zone */
.ent-danger-zone {
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--ent-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--ent-radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
.ent-danger-zone-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ent-text3, rgba(255, 255, 255, 0.35));
  margin: 0 0 8px;
}

/* Billing upgrade nudge */
.ent-upgrade-nudge {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(217, 119, 87, 0.25);
  border-radius: var(--ent-radius-sm);
  background: rgba(217, 119, 87, 0.05);
}

/* Seat warning text */
.ent-seat-warning {
  font-size: 12px;
  margin: 6px 0 0;
  color: #b45309;
}
.ent-seat-warning.full {
  color: #dc2626;
}

/* Team action separator */
.ent-action-sep {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--ent-border);
  margin: 0 4px;
  vertical-align: middle;
}

/* Cancellation flow modal classes */
.ent-plan-summary-card {
  padding: 14px 16px;
  background: var(--ent-surface2);
  border-radius: var(--ent-radius-sm);
  border: 1px solid var(--ent-border);
  margin-bottom: 16px;
}
.ent-plan-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ent-text);
}
.ent-plan-meta {
  font-size: 12px;
  color: var(--ent-text3);
  margin-top: 3px;
}
.ent-period-end-notice {
  font-size: 13px;
  color: var(--ent-text3);
  margin: 10px 0 0;
  line-height: 1.5;
}
.ent-retention-card {
  padding: 16px;
  background: rgba(217, 119, 87, 0.06);
  border: 1px solid rgba(217, 119, 87, 0.2);
  border-radius: var(--ent-radius-sm);
  margin-bottom: 16px;
}
.ent-retention-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #d97757;
  margin-bottom: 6px;
}

/* ── Cancel-flow buttons — Photonic variants ─────────────────────────────── */
.ent-btn--filled-primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 22px;
  border-radius: var(--ent-radius-sm);
  background: #1a1a1c;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.018em;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  font-family: var(--ent-font);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  text-shadow: none;
  transition:
    transform 0.22s var(--ent-spring),
    box-shadow 0.22s ease,
    opacity 0.15s;
}
.ent-btn--filled-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.ent-btn--filled-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 30%,
    rgba(255, 255, 255, 0.26) 46%,
    rgba(255, 255, 255, 0.08) 54%,
    transparent 68%
  );
  transform: translateX(-140%);
  transition: transform 0.55s ease;
  z-index: 2;
  pointer-events: none;
}
.ent-btn--filled-primary:hover:not(:disabled)::after {
  transform: translateX(140%);
}
.ent-btn--filled-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(155, 60, 20, 0.55),
    0 10px 30px rgba(217, 119, 87, 0.6),
    0 0 50px rgba(217, 119, 87, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.ent-btn--filled-primary:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

.ent-btn--confirm-cancel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 22px;
  border-radius: var(--ent-radius-sm);
  background: linear-gradient(150deg, #f87171 0%, #dc2626 45%, #b91c1c 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.018em;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  font-family: var(--ent-font);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(170, 25, 25, 0.5),
    0 4px 16px rgba(220, 38, 38, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.22s var(--ent-spring),
    box-shadow 0.22s ease,
    opacity 0.15s;
}
.ent-btn--confirm-cancel:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(170, 25, 25, 0.58),
    0 10px 28px rgba(220, 38, 38, 0.58),
    0 0 46px rgba(220, 38, 38, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ent-btn--confirm-cancel:disabled {
  opacity: 0.36;
  cursor: not-allowed;
}

#ent-settings-tabs {
  padding: 0 28px;
}
#ent-settings-tabs .ent-drill-tab.active {
  color: var(--ent-text);
  border-bottom-color: var(--ent-text2);
}
#ent-settings-content {
  padding: 20px 28px 28px;
}

/* ── Sidebar footer actions (theme + guide row) ──────────────────────────── */
.ent-sidebar-footer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  margin-bottom: 2px;
}

/* ── Top-right global actions (theme + bell) — INJECTED into every
   .ent-tab-header via JS MutationObserver. Sits naturally at the end of
   the flex row so it never collides with page-specific action buttons. */
.ent-tab-header .ent-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  flex-shrink: 0;
}
.ent-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ent-top-action-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none !important;
  background: transparent !important;
  color: var(--ent-text2);
  padding: 0;
  margin: 0;
  border-radius: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}
.ent-top-action-btn:hover {
  background: transparent !important;
  color: var(--ent-text);
}
.ent-top-action-btn:focus,
.ent-top-action-btn:focus-visible {
  outline: none;
  background: transparent !important;
}
#ent-main {
  position: relative;
}
/* Hide on mobile — mobile has its own header with bell, theme moves there */
@media (max-width: 640px) {
  .ent-top-actions {
    display: none !important;
  }
}
/* Hide sidebar theme toggle on desktop too — moved to top-right */
@media (min-width: 641px) {
  #ent-theme-btn,
  .ent-sidebar-footer-actions {
    display: none !important;
  }
}

/* ── Notifications bell button — plain icon, no card/box ─────────────────── */
.ent-notif-bell-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent !important;
  border: none;
  color: var(--ent-text3);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s,
    color 0.15s;
  -webkit-appearance: none;
  appearance: none;
}
.ent-notif-bell-btn:hover {
  background: var(--ent-surface2);
  color: var(--ent-text);
}
.ent-notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--ent-surface);
}

/* ── Getting Started — full-width sidebar nav item. Uses the same
 * .ent-nav-item base styles (icon + label, full-width pill on hover)
 * but with a slightly muted color so it reads as a tertiary action,
 * sitting visually between Settings and Sign Out in the footer. */
.ent-guide-nav-btn {
  color: var(--ent-text2, #c8c8c8);
  font-weight: 500;
}
.ent-guide-nav-btn svg {
  flex-shrink: 0;
  opacity: 0.85;
}
.ent-guide-nav-btn:hover {
  color: var(--ent-text);
}
.ent-guide-nav-btn:hover svg {
  opacity: 1;
}

/* ── Guide help button (question mark icon) ──────────────────────────────── */
.ent-guide-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ent-radius-sm);
  background: transparent !important;
  border: none;
  outline: none;
  color: var(--ent-text3);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    color 0.15s,
    background 0.15s;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}
.ent-guide-btn:hover {
  background: rgba(217, 119, 87, 0.1) !important;
  color: var(--ent-text);
}
[data-theme='dark'] .ent-guide-btn:hover {
  background: rgba(224, 124, 88, 0.12) !important;
  color: #e07c58;
}

/* ── Notifications panel ─────────────────────────────────────────────────── */

/* Notification overlay — z-index above the mobile header (z:600) so the
   drawer covers the entire viewport including the top header bar */
.ent-notif-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  z-index: 700;
  transition:
    background 320ms ease,
    backdrop-filter 320ms ease;
}
.ent-notif-overlay.open {
  display: block;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px) saturate(0.8);
}

/* Notification right drawer */
.ent-notif-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
}
/* Desktop (Electron): offset below the 36px injected titlebar so the panel
 * header isn't swallowed by it. */
body.is-electron .ent-notif-panel {
  top: 36px;
}
.ent-notif-panel {
  display: flex;
  flex-direction: column;
  background: var(--ent-surface);
  border-left: 1px solid var(--ent-border);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.18);
  z-index: 701; /* above mobile header (z:600) and overlay (z:700) */
  /* hidden: off-screen right */
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.55, 0, 1, 0.45);
  pointer-events: none;
  visibility: hidden;
}
.ent-notif-panel.ent-notif-open {
  transform: translateX(0);
  transition: transform 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: auto;
  visibility: visible;
}
/* Match consumer style — wider drawer, refined header layout */
.ent-notif-panel { width: 320px; }
.ent-notif-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ent-text);
}
.ent-notif-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ent-notif-clear-all-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--ent-text2);
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.ent-notif-clear-all-btn:hover {
  color: #d97757;
  background: rgba(217, 119, 87, 0.08);
}
.ent-notif-close-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  color: var(--ent-text3);
  transition: color 0.15s, background 0.15s;
}
.ent-notif-close-btn:hover {
  background: var(--ent-surface2);
  color: var(--ent-text);
}
/* Empty state — bell icon centered in panel body */
.ent-notif-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 24px;
  text-align: center;
}
.ent-notif-empty-icon {
  color: var(--ent-text3);
  opacity: 0.5;
}
.ent-notif-empty-text {
  font-size: 13px;
  color: var(--ent-text3);
  margin: 0;
}
@media (max-width: 480px) {
  .ent-notif-panel { width: 88vw; max-width: 360px; }
}
.ent-notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--ent-border);
  font-size: 14px;
  font-weight: 700;
  color: var(--ent-text);
  flex-shrink: 0;
}
.ent-notif-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  border-radius: 7px;
  cursor: pointer;
  color: var(--ent-text3);
  transition:
    background 0.15s,
    color 0.15s;
}
.ent-notif-close-btn:hover {
  background: var(--ent-surface2);
  color: var(--ent-text);
}

.ent-notif-panel-body {
  flex: 1;
  overflow-y: auto;
  max-height: none;
}
.ent-notif-empty {
  font-size: 13px;
  color: var(--ent-text3);
  padding: 24px 16px;
  text-align: center;
}
/* Individual notification item */
.ent-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ent-border2);
  transition: background 0.15s;
}
.ent-notif-item:hover {
  background: var(--ent-surface2);
}
.ent-notif-item-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ent-accent);
  flex-shrink: 0;
  margin-top: 5px;
}
.ent-notif-item-body {
  flex: 1;
  min-width: 0;
}
.ent-notif-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ent-text);
  line-height: 1.4;
}
.ent-notif-item-time {
  font-size: 11px;
  color: var(--ent-text3);
  margin-top: 2px;
}
.ent-notif-item-dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border: none;
  background: none;
  border-radius: 5px;
  cursor: pointer;
  color: var(--ent-text3);
  font-size: 14px;
  line-height: 1;
  transition:
    background 0.15s,
    color 0.15s;
  margin-top: 1px;
}
.ent-notif-item-dismiss:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--ent-danger);
}

/* Panel footer */
.ent-notif-panel-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--ent-border);
  flex-shrink: 0;
}
.ent-notif-clear-all-btn {
  width: 100%;
  padding: 9px;
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--ent-radius-sm);
  background: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ent-danger);
  transition: background 0.15s;
}
.ent-notif-clear-all-btn:hover {
  background: rgba(239, 68, 68, 0.08);
}

/* Sidebar overlay (mobile drawer backdrop) */
.ent-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  z-index: 498;
  transition:
    background 320ms ease,
    backdrop-filter 320ms ease;
}
.ent-sidebar-overlay.open {
  display: block;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px) saturate(0.8);
}

/* Mobile header — hidden on desktop */
.ent-mobile-header {
  display: none;
}
[data-theme='dark'] .ent-mobile-header {
  background: var(--ent-surface);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Sidebar close btn — hidden on desktop, shown on mobile via media query */
.ent-sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ent-text3);
  flex-shrink: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.ent-sidebar-close-btn:hover {
  background: var(--ent-surface2);
  color: var(--ent-text);
}

/* Mobile Atlas history toggle — hidden on desktop, shown/hidden via JS on mobile */
.ent-mob-atlas-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ent-text2);
  flex-shrink: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.ent-mob-atlas-toggle:hover,
.ent-mob-atlas-toggle.ent-atlas-hdr-active {
  color: var(--ent-accent);
  background: var(--ent-accent-lt);
}

/* ── Atlas AI Markdown styles ────────────────────────────────────────────── */
.ent-ai-code-block {
  background: var(--ent-surface2);
  border: 1px solid var(--ent-border);
  border-radius: var(--ent-radius-sm);
  padding: 12px 14px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  margin: 8px 0;
  white-space: pre;
}
.ent-ai-inline-code {
  background: var(--ent-surface2);
  border: 1px solid var(--ent-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
}
.ent-ai-h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ent-text);
  margin: 12px 0 4px;
}
.ent-ai-h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ent-text);
  margin: 10px 0 4px;
}
.ent-ai-list {
  padding-left: 18px;
  margin: 6px 0;
}
.ent-ai-list li {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 2px;
}

/* ── Cancel modal done state ─────────────────────────────────────────────── */
.ent-cancel-done {
  text-align: center;
  padding: 16px 0;
}

/* ── Mobile bottom nav ───────────────────────────────────────────────────── */
.ent-bottom-nav {
  display: none;
}

/* ── Atlas immersive mode — desktop ─────────────────────────────────────── */
@media (min-width: 768px) {
  /* Collapse sidebar to icon rail */
  body.ent-atlas-active #ent-sidebar {
    width: 48px;
    min-width: 48px;
    overflow: hidden;
  }
  body.ent-atlas-active #ent-sidebar .ent-sidebar-header,
  body.ent-atlas-active #ent-sidebar .ent-sidebar-footer {
    display: none !important;
  }
  body.ent-atlas-active #ent-sidebar .ent-nav-section-title {
    display: none !important;
  }
  body.ent-atlas-active #ent-sidebar .ent-nav {
    padding: 8px 4px;
  }
  body.ent-atlas-active #ent-sidebar .ent-nav-item {
    padding: 10px 0;
    justify-content: center;
    gap: 0;
    font-size: 0;
  }
  body.ent-atlas-active #ent-sidebar .ent-nav-item svg {
    width: 18px;
    height: 18px;
    font-size: initial;
  }
  /* Atlas content fills full height */
  body.ent-atlas-active #ent-main {
    overflow: hidden;
  }
  body.ent-atlas-active #ent-tab-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }
  body.ent-atlas-active .ent-atlas-wrap {
    flex: 1;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  /* Strip card appearance — blend with page background */
  body.ent-atlas-active .ent-atlas-layout {
    flex: 1;
    min-height: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    border: none;
  }
  body.ent-atlas-active .ent-tab-header {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom-color: var(--ent-border2) !important;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Practice Free CTA on the admin's Approvals header is hidden on
   * mobile — the admin's primary mobile job is reviewing approvals,
   * not running practice sessions. The member's Sessions tab keeps
   * its Practice Free button (different element id, not affected). */
  #ent-practice-btn-admin {
    display: none !important;
  }

  /* ── Layout ─────────────────────────────────────────────────────────── */
  :root {
    --ent-sidebar-w: 0px;
  }

  /* Main shell stacks vertically on mobile */
  #ent-shell {
    flex-direction: column;
  }

  /* Sidebar becomes a fixed left drawer — solid background on mobile */
  #ent-sidebar {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 340ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 499;
    overflow-y: auto;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.18);
    background: var(--ent-bg) !important;
  }
  #ent-sidebar.mob-open {
    transform: translateX(0);
  }

  /* Main content fills full width — fix scroll cutoff */
  #ent-main {
    padding-top: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Shell must allow content to scroll properly */
  #ent-shell {
    height: 100vh;
    height: 100dvh; /* dynamic viewport for mobile browsers */
    overflow: hidden;
  }
  /* Tab content must not constrain scroll */
  #ent-tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
  }
  /* Atlas tab needs overflow:hidden so its own internal scroll works */
  #ent-tab-content.ent-atlas-active {
    overflow: hidden;
  }
  /* Tab body needs bottom padding for safe scrolling */
  .ent-tab-body {
    padding-bottom: 32px !important;
  }

  /* ── Atlas chat: fill viewport, input bar flush to bottom ────── */
  .ent-atlas-wrap {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }
  /* On atlas tab — TOP BAR + chat area = ONE single color throughout.
     Strip surface backgrounds, borders, shadows, and dividers so the entire
     atlas page reads as one flat color (the page body color). */
  body.ent-atlas-active .ent-tab-header,
  body.ent-atlas-active .ent-atlas-model-btn,
  body.ent-atlas-active .ent-atlas-hdr-btn,
  body.ent-atlas-active .ent-atlas-layout,
  body.ent-atlas-active .ent-atlas-wrap,
  body.ent-atlas-active #ent-tab-content {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  body.ent-atlas-active .ent-tab-header {
    border-bottom: none !important;
  }
  body.ent-atlas-active .ent-atlas-layout {
    border-radius: 0 !important;
  }
  /* Compact modal — pull content up to the top, no wasted whitespace */
  .ent-modal {
    padding: 12px 14px !important;
  }
  .ent-modal-header {
    padding: 6px 0 10px !important;
  }
  .ent-modal-title {
    margin-bottom: 10px !important;
  }
  .ent-modal-body {
    padding: 8px 0 0 !important;
  }
  /* STEP 1 OF 3 label — sits flush below modal header divider, no big gap */
  .ent-slot-step-lbl {
    margin: 4px 0 14px 0 !important;
  }
  /* Compact button stack — minimal gap between Next and Cancel */
  .ent-modal-body {
    padding: 8px 0 0 !important;
  }
  .ent-modal-footer {
    margin-top: 0 !important;
    padding: 0 !important;
    gap: 6px !important;
    border-top: none !important;
  }
  /* Kill the 16px inline margin on Next/step buttons that JS injects */
  .ent-modal-body #ent-step1-next,
  .ent-modal-body #ent-step2-next,
  .ent-modal-body #ent-step3-submit,
  #ent-step1-next,
  #ent-step2-next,
  #ent-step3-submit {
    margin-top: 0 !important;
    margin-bottom: 6px !important;
  }
  /* Step container divs — no bottom margin/padding */
  #ent-step1, #ent-step2, #ent-step3 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Date picker on mobile */
  .ent-dt-picker {
    padding: 14px !important;
  }
  /* Force date cells to be PERFECT SQUARES on mobile.
     Lock every dimension axis so nothing in flex/grid/aspect-ratio can stretch. */
  .ent-dt-day {
    aspect-ratio: unset !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex: 0 0 36px !important;
    justify-self: center !important;
    align-self: center !important;
    line-height: 1 !important;
  }
  /* Time inputs, AM/PM button — IDENTICAL box model, all 3 same size.
     Add -webkit-appearance:none to neutralize iOS Safari's button intrinsic
     min-width which otherwise ignores explicit width on buttons. */
  .ent-dt-tinp,
  .ent-dt-ampm,
  button.ent-dt-ampm {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: var(--ent-radius-sm) !important;
    border: 1px solid var(--ent-border) !important;
    background: var(--ent-surface2) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    flex: 0 0 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-family: var(--ent-font) !important;
    color: var(--ent-text) !important;
  }
  /* Spacing between time elements via the row's gap, not margin on AM/PM */
  .ent-dt-trow {
    gap: 6px !important;
  }
  .ent-dt-ok {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 18px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .ent-dt-clear {
    font-size: 11.5px !important;
  }
  .ent-dt-ftr {
    align-items: center !important;
  }
  .ent-atlas-layout {
    flex: 1 !important;
    min-height: 0 !important;
    position: relative;
    overflow: hidden;
  }
  .ent-atlas-chat-main {
    min-height: 0 !important;
  }
  .ent-atlas-input-bar {
    padding: 8px 12px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  }
  /* History panel — overlay drawer on mobile (slides over chat, not push) */
  .ent-atlas-history-panel {
    position: absolute !important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 90;
    width: 260px !important;
    min-width: 260px !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    opacity: 1 !important;
    background: var(--ent-bg);
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
  }
  .ent-atlas-history-panel:not(.ent-atlas-hist-hidden) {
    transform: translateX(0) !important;
  }

  /* ── Mobile sticky header — sits ABOVE the sidebar drawer ────────── */
  .ent-mobile-header {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 16px 0 12px;
    background: var(--ent-surface);
    border-bottom: 1px solid var(--ent-border);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 600; /* above sidebar (499) and overlay (498) */
    gap: 10px;
    flex-shrink: 0;
  }
  /* push content below the fixed header */
  #ent-shell {
    padding-top: 56px;
  }

  /* Hamburger button */
  .ent-mob-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--ent-text);
    padding: 8px;
    flex-shrink: 0;
    transition: background 0.15s;
  }
  .ent-mob-menu-btn:hover {
    background: var(--ent-surface2);
  }

  /* Hamburger lines */
  .ent-mob-menu-btn .hb-line {
    display: block;
    width: 18px;
    height: 1.75px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: center;
    transition:
      transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 200ms ease,
      width 200ms ease;
  }
  /* Morph to ✕ when sidebar open */
  .ent-mob-menu-btn.is-open .hb-top {
    transform: rotate(45deg) translate(4.5px, 4.5px);
  }
  .ent-mob-menu-btn.is-open .hb-mid {
    opacity: 0;
    width: 0;
  }
  .ent-mob-menu-btn.is-open .hb-bot {
    transform: rotate(-45deg) translate(4.5px, -4.5px);
  }

  /* Company name */
  .ent-mob-brand {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--ent-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    letter-spacing: -0.2px;
  }

  /* Bell in mobile header — plain icon, no card/box background */
  .ent-mobile-header .ent-notif-bell-btn {
    width: 38px;
    height: 38px;
    border: none !important;
    border-radius: 8px;
    background: transparent !important;
    flex-shrink: 0;
  }
  .ent-mobile-header .ent-notif-bell-btn:hover {
    background: transparent !important;
  }
  /* Hide sidebar theme toggle on mobile — moved to header */
  #ent-theme-btn {
    display: none !important;
  }
  /* Theme toggle in mobile header */
  .ent-mob-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--ent-text2);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
  }
  .ent-mob-icon-btn:hover {
    background: transparent !important;
  }

  /* Show close ✕ button inside sidebar on mobile */
  .ent-sidebar-close-btn {
    display: flex;
  }

  /* ── Mobile sidebar — match individual studio font sizes & spacing ─── */
  #ent-sidebar {
    width: 270px;
  }
  /* Mobile sidebar nav items — 15px label / 20px icon so every row
   * (Approvals → Billing → Settings → Sign Out) reads at the same
   * visual weight. */
  .ent-nav-item {
    font-size: 15px;
    padding: 10px 16px;
    gap: 12px;
  }
  .ent-nav-item svg {
    width: 20px;
    height: 20px;
  }
  .ent-nav-section-title {
    font-size: 10px;
    padding: 14px 16px 4px;
  }
  .ent-signout-nav {
    font-size: 15px;
    padding: 10px 16px;
    gap: 12px;
  }
  .ent-signout-nav svg {
    width: 20px;
    height: 20px;
  }
  .ent-sidebar-footer-actions {
    padding: 2px 10px;
    gap: 8px;
  }
  .ent-theme-btn {
    width: 34px;
    height: 34px;
  }
  .ent-guide-btn {
    width: 34px;
    height: 34px;
  }
  .ent-guide-btn svg,
  .ent-theme-btn svg {
    width: 18px;
    height: 18px;
  }
  .ent-sidebar-footer {
    padding: 10px 10px 16px;
  }
  /* ── Mobile credits card: collapsed mode (admin sidebar) ─────────────
   * On phones the credits card was eating ~140px of sidebar height with
   * stats most users glance at, not act on. Hide the TEAM PLAN label,
   * the big credits count, and the seats line — keep only the two
   * action buttons (+ Add Credits / + Add Seats). The full breakdown
   * still lives one tap away in the Billing tab.
   *
   * Net win: sidebar nav (Approvals → Billing) and the buttons all fit
   * in the visible viewport without scroll on a 6.7" phone in portrait. */
  .ent-credits-card {
    margin: 4px 6px 8px;
    padding: 8px 10px;
    border-radius: 12px;
    box-shadow: none;
  }
  .ent-credits-card .ent-credits-plan-label,
  .ent-credits-card .ent-credits-top,
  .ent-credits-card .ent-credits-seats,
  .ent-credits-card .ent-credits-loading {
    display: none;
  }
  .ent-credits-card .ent-credits-btn {
    margin-top: 0;
    padding: 9px 12px;
    font-size: 12.5px;
  }
  .ent-credits-card .ent-credits-btn + .ent-credits-btn {
    margin-top: 6px;
  }
  .ent-notif-bell-btn {
    width: 34px;
    height: 34px;
  }

  /* Hide sidebar bell on mobile — mobile header already has one */
  #ent-notif-btn {
    display: none !important;
  }

  /* Sidebar header needs space for the close btn — and on mobile the
   * thin divider line under the header (above the first nav item) is
   * removed per design feedback. The visual gap between header and nav
   * is enough; the line was redundant chrome. Same change applies to
   * both admin and member because both use this drawer. */
  #ent-sidebar .ent-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none !important;
    padding-bottom: 8px;
    min-height: 64px;
  }
  /* Tighten the gap above the first nav item so Sessions sits closer
   * to the brand row instead of floating in the middle of the drawer. */
  #ent-sidebar .ent-nav {
    padding-top: 4px;
  }

  /* ── Notification panel on mobile: full-height right drawer, slightly narrower */
  .ent-notif-panel {
    width: min(300px, 88vw);
  }

  /* ══════════════════════════════════════════════════════════════════
       ENTERPRISE MOBILE REDESIGN — matches individual studio quality
       ══════════════════════════════════════════════════════════════════ */

  /* ── Global mobile typography ─────────────────────────────────── */
  .ent-tab-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    padding-bottom: 6px;
    flex: 0 0 100%;
  }

  /* ── Content spacing — generous mobile padding ────────────────── */
  .ent-tab-body {
    padding: 20px 16px 24px;
  }
  .ent-tab-header {
    padding: 16px 16px 0;
    position: relative;
    border-bottom: none;
    flex-wrap: wrap;
    height: auto;
    min-height: auto;
  }
  /* Sessions header: title full-width, Practice left + Request right */
  .ent-sessions-header-actions {
    width: 100%;
    display: flex;
    gap: 8px;
    order: 3;
    padding-bottom: 12px;
  }
  .ent-sessions-header-actions .ent-btn-outline,
  .ent-sessions-header-actions .ent-btn-primary {
    flex: 1;
    font-size: 12px !important;
    padding: 9px 10px !important;
  }
  .ent-filter-bar {
    padding: 12px 16px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }
  #ent-settings-content {
    padding: 20px 16px 28px;
  }
  #ent-period-sel {
    padding: 14px 16px 8px;
  }
  #ent-summary-cards {
    padding: 0 16px 8px;
  }
  #ent-members-wrap {
    padding: 0 16px 24px;
  }

  /* Bottom nav — retired, hidden */
  .ent-bottom-nav {
    display: none;
  }

  /* ── Cards — rounded, elevated, proper mobile feel ────────────── */
  .ent-card {
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow:
      0 2px 12px rgba(0, 0, 0, 0.06),
      0 0 0 1px rgba(0, 0, 0, 0.03);
  }
  [data-theme='dark'] .ent-card {
    box-shadow:
      0 2px 14px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .ent-section-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  /* ── Stat cards — 2-col grid, polished ────────────────────────── */
  .ent-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }
  .ent-stat-card {
    border-radius: 14px;
    padding: 16px 14px;
    box-shadow:
      0 2px 10px rgba(0, 0, 0, 0.05),
      0 0 0 1px rgba(0, 0, 0, 0.03);
  }
  [data-theme='dark'] .ent-stat-card {
    box-shadow:
      0 2px 12px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .ent-stat-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .ent-stat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* ── Analytics period tabs — full-width pill bar ──────────────── */
  .ent-period-tabs {
    display: flex;
    width: 100%;
    border-radius: 10px;
  }
  .ent-period-tab {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    font-size: 13px;
    border-radius: 8px;
  }

  /* ── Analytics member table → card layout ─────────────────────── */
  .ent-table-wrap {
    overflow-x: visible;
  }
  .ent-table {
    display: block;
  }
  .ent-table thead {
    display: none;
  }
  .ent-table tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ent-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    background: var(--ent-surface);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow:
      0 1px 6px rgba(0, 0, 0, 0.04),
      0 0 0 1px rgba(0, 0, 0, 0.03);
  }
  [data-theme='dark'] .ent-table tr {
    box-shadow:
      0 1px 8px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .ent-table tr:hover td {
    background: transparent;
  }
  .ent-table td {
    padding: 0;
    border: none;
    font-size: 14px;
  }
  /* First cell (name) — full width, bold */
  .ent-table td:first-child {
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    color: var(--ent-text);
  }
  /* Remaining cells inline */
  .ent-table td:not(:first-child) {
    font-size: 13px;
    color: var(--ent-text3);
  }

  /* ── Members page — card-based member rows ────────────────────── */
  .ent-member-row,
  .ent-team-member-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    margin-bottom: 8px;
    background: var(--ent-surface);
    box-shadow:
      0 1px 6px rgba(0, 0, 0, 0.04),
      0 0 0 1px rgba(0, 0, 0, 0.03);
    border: none !important;
  }
  [data-theme='dark'] .ent-member-row,
  [data-theme='dark'] .ent-team-member-row {
    box-shadow:
      0 1px 8px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  /* Member info takes full width on first row */
  .ent-member-info,
  .ent-team-member-info {
    width: 100% !important;
    flex: none !important;
  }
  .ent-member-name {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  .ent-member-email {
    font-size: 13px !important;
  }
  /* Action buttons wrap to next row, horizontally scrollable */
  .ent-member-actions,
  .ent-team-member-actions {
    width: 100% !important;
    flex: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--ent-border) !important;
    margin-top: 4px !important;
  }
  .ent-member-actions .ent-btn-sm,
  .ent-team-member-actions .ent-btn-sm,
  .ent-member-actions button,
  .ent-team-member-actions button {
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    min-height: 34px !important;
    white-space: nowrap !important;
  }
  /* Invite button — full width, prominent */
  .ent-btn-invite,
  #ent-invite-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    justify-content: center !important;
  }
  /* Seat info text */
  .ent-seats-info {
    font-size: 14px !important;
  }

  /* ── Rules / Policy page — fix text wrapping & stepper layout ── */
  .ent-policy-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ent-text3);
    margin-bottom: 12px;
  }
  .ent-toggle-row {
    padding: 16px 0;
    gap: 16px;
  }
  .ent-toggle-info strong {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  .ent-toggle-info p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-top: 4px !important;
  }
  .ent-toggle {
    width: 48px !important;
    height: 28px !important;
  }
  .ent-toggle-slider::before {
    width: 22px !important;
    height: 22px !important;
  }
  .ent-toggle input:checked + .ent-toggle-slider::before {
    transform: translateX(20px) !important;
  }
  /* Number input rows — stack label above stepper on narrow screens */
  .ent-number-input-row {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0;
  }
  .ent-number-input-label {
    font-size: 14px !important;
    line-height: 1.45 !important;
    flex: 1 1 100% !important;
    min-width: 0;
  }
  /* Stepper — bigger touch targets */
  .ent-stepper {
    border-radius: 10px;
  }
  .ent-stepper-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
  }
  .ent-stepper-input {
    width: 48px !important;
    height: 40px !important;
    font-size: 15px !important;
  }
  .ent-hm-unit {
    font-size: 14px !important;
  }
  .ent-hm-stepper {
    gap: 8px !important;
  }

  /* ── Settings page — tabs, forms, inputs ──────────────────────── */
  #ent-settings-tabs {
    padding: 0 16px;
    gap: 0;
  }
  /* Settings tab labels (Personal, Billing, Legal) — larger on mobile */
  .ent-drill-tab {
    font-size: 15px !important;
    padding: 12px 18px !important;
    font-weight: 600 !important;
  }
  .ent-form-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
  }
  .ent-input {
    font-size: 16px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    min-height: 48px !important;
  }
  .ent-input:focus {
    box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15) !important;
  }
  /* Settings card width — full on mobile */
  #ent-settings-content .ent-card {
    max-width: 100% !important;
  }
  /* Notification preferences — bigger touch targets */
  .ent-notif-pref-row {
    padding: 14px 0;
  }
  .ent-notif-pref-label {
    font-size: 15px !important;
  }
  .ent-notif-pref-desc {
    font-size: 13px !important;
  }

  /* ── Workspace page — form layout ─────────────────────────────── */
  .ent-color-row {
    gap: 12px !important;
  }
  .ent-color-preview {
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
  }

  /* ── Billing page — plan stats ────────────────────────────────── */
  .ent-perf-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .ent-perf-item {
    padding: 14px !important;
    border-radius: 12px !important;
  }
  .ent-perf-value {
    font-size: 20px !important;
    font-weight: 800 !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
  }
  .ent-perf-label {
    font-size: 10px !important;
  }
  .ent-danger-zone {
    border-radius: 12px !important;
    padding: 16px !important;
  }
  .ent-upgrade-nudge {
    border-radius: 12px !important;
    padding: 16px !important;
  }

  /* ── Buttons — bigger touch targets ───────────────────────────── */
  .ent-btn-primary {
    min-height: 48px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
  }
  .ent-btn-secondary {
    min-height: 44px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    padding: 10px 18px !important;
  }
  .ent-btn-sm {
    min-height: 36px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    padding: 7px 14px !important;
  }
  .ent-btn-danger {
    min-height: 44px !important;
    border-radius: 10px !important;
  }

  /* ── Status badges — slightly larger on mobile ────────────────── */
  .ent-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
  }

  /* ── Session cards — stack on mobile ─────────────────────────── */
  .ent-slot-card {
    padding: 14px 16px !important;
    border-radius: 14px !important;
  }
  .ent-slot-card-top {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .ent-slot-company {
    font-size: 16px !important;
  }
  .ent-slot-role {
    font-size: 13px !important;
  }
  .ent-slot-time {
    text-align: left !important;
    white-space: normal !important;
    font-size: 13px !important;
  }
  .ent-slot-window {
    gap: 6px !important;
  }
  .ent-slot-window .ent-btn-sm {
    flex: 1 !important;
    text-align: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }
  /* Session request modal form — proper spacing */
  .ent-slot-step-lbl {
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }
  /* Custom select triggers — full width, proper height */
  .ent-csel-trigger,
  .ent-dt-trigger {
    min-height: 48px !important;
    font-size: 15px !important;
  }

  /* ── Modals — full-width, vertically centered on mobile ──────── */
  .ent-modal-overlay {
    padding: 16px;
    align-items: center;
  }
  .ent-signout-overlay {
    align-items: center;
  }
  .ent-modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
    margin: 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .ent-signout-modal {
    width: auto !important;
    max-width: 380px !important;
    border-radius: 20px !important;
  }
  .ent-modal-header {
    padding: 18px 18px 14px !important;
  }
  .ent-modal-body {
    padding: 16px 18px 18px !important;
  }
  .ent-modal-footer {
    padding: 14px 18px 18px !important;
  }

  /* ── Empty states ─────────────────────────────────────────────── */
  .ent-empty {
    padding: 40px 20px;
  }
  .ent-empty p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* ── Filter chips — wrap nicely ───────────────────────────────── */
  .ent-filter-chip {
    font-size: 13px !important;
    padding: 7px 14px !important;
    border-radius: 20px !important;
    min-height: 36px !important;
  }

  /* ── Approvals tab — session cards ────────────────────────────── */
  .ent-approval-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    margin-bottom: 8px !important;
    background: var(--ent-surface) !important;
    box-shadow:
      0 1px 6px rgba(0, 0, 0, 0.04),
      0 0 0 1px rgba(0, 0, 0, 0.03) !important;
    border: none !important;
  }
  [data-theme='dark'] .ent-approval-row {
    box-shadow:
      0 1px 8px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  }
  .ent-approval-actions {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }
  .ent-approval-actions button {
    flex: 1 !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  /* ── Notification panel — full-screen on mobile ───────────────── */
  .ent-notif-panel {
    width: min(320px, 90vw);
  }

  /* ── Export CSV button — compact ──────────────────────────────── */
  .ent-export-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
  }

  /* ── Password fields — prevent iOS zoom ───────────────────────── */
  .pw-wrap .ent-input {
    font-size: 16px !important;
  }

  /* === Resume Cards on Mobile === */
  .ent-resume-table {
    display: block;
  }
  .ent-resume-table thead {
    display: none;
  }
  .ent-resume-table tbody {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .ent-resume-row {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      'file  date'
      'nick  nick'
      'acts  acts';
    align-items: baseline;
    background: var(--ent-surface);
    border: none;
    border-radius: 14px;
    padding: 14px 16px 10px;
    box-shadow:
      0 1px 6px rgba(0, 0, 0, 0.04),
      0 0 0 1px rgba(0, 0, 0, 0.03);
    gap: 0;
  }
  [data-theme='dark'] .ent-resume-row {
    box-shadow:
      0 1px 8px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .ent-resume-row:hover td {
    background: transparent;
  }

  .ent-resume-nick,
  .ent-resume-file,
  .ent-resume-size,
  .ent-resume-date,
  .ent-resume-fmt,
  .ent-resume-actions {
    padding: 0;
    border: none;
    white-space: normal;
    max-width: 100%;
    overflow: visible;
  }
  .ent-resume-file {
    grid-area: file;
    font-size: 14px;
    font-weight: 600;
    color: var(--ent-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 10px;
    align-self: center;
  }
  .ent-resume-date {
    grid-area: date;
    display: block;
    font-size: 12px;
    color: var(--ent-text3);
    white-space: nowrap;
    align-self: center;
  }
  .ent-resume-date::before {
    content: none;
  }
  .ent-resume-nick {
    grid-area: nick;
    display: block;
    font-size: 12px;
    color: var(--ent-text3);
    font-weight: 400;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ent-resume-fmt,
  .ent-resume-size {
    display: none !important;
  }
  .ent-resume-actions {
    grid-area: acts;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ent-border);
    display: flex !important;
    justify-content: space-around;
    gap: 6px;
  }
  .ent-resume-dl-btn,
  .ent-resume-rename-btn,
  .ent-resume-delete-btn {
    flex: 1;
    height: 38px;
    min-width: 0;
    border-radius: 10px;
    font-size: 12px;
    padding: 0 6px;
  }
  .ent-resume-dl-btn .ent-btn-label,
  .ent-resume-rename-btn .ent-btn-label,
  .ent-resume-delete-btn .ent-btn-label {
    display: none;
  }

  /* Atlas history toggle */
  .ent-mob-atlas-toggle {
    display: flex;
  }

  /* Sidebar bell redundant */
  #ent-notif-btn {
    display: none !important;
  }

  /* ── Responsive utilities ─────────────────────────────────────── */
  .ent-hide-mobile {
    display: none !important;
  }
  .ent-show-mobile {
    display: inline !important;
  }
  .ent-member-stat-inline {
    display: inline !important;
  }

  /* ── Workspace slug row — domain wraps, input + copy stay inline ── */
  .ent-slug-row {
    flex-wrap: wrap;
    gap: 8px;
  }
  .ent-slug-row #ent-slug-domain {
    flex: 0 0 100%;
  }
  .ent-slug-row .ent-input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  .ent-slug-row #ent-slug-copy {
    flex-shrink: 0 !important;
    width: auto !important;
  }
  .ent-slug-row #ent-slug-save {
    flex: 0 0 100%;
  }

  /* ── Analytics member row — 2-row card layout per member ────── */
  /* Hide the desktop table header on mobile */
  .ent-member-header {
    display: none !important;
  }

  .ent-member-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 16px;
    gap: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin: 0 4px;
  }
  .ent-member-row.expandable {
    margin: 6px 8px;
    border-radius: 10px;
    border-bottom: none;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
  }
  [data-theme='dark'] .ent-member-row {
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }
  .ent-member-row:last-child {
    border-bottom: none;
  }

  /* Row 1: avatar + name/email — full width */
  .ent-member-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
  }
  .ent-member-identity .ent-avatar {
    flex-shrink: 0;
  }
  .ent-member-identity .ent-member-name {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3;
  }
  .ent-member-identity .ent-member-email {
    font-size: 12px !important;
    color: var(--ent-text3);
    line-height: 1.3;
  }

  /* Row 2: status + session count — left-aligned below name */
  .ent-member-row > div:last-child {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 38px; /* align with text after avatar (28px avatar + 10px gap) */
  }
  .ent-member-stat-inline {
    display: inline !important;
    font-size: 12px;
    color: var(--ent-text3);
  }

  /* ── Approvals filter — stable layout, no overflow clipping ──── */
  .ent-filter-bar {
    position: relative;
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding: 10px 16px 12px 16px !important;
    gap: 6px !important;
  }
  .ent-filter-bar::after {
    display: none;
  }
  .ent-filter-btn {
    flex-shrink: 0 !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    min-height: 36px !important;
  }

  /* ── Approvals list — proper spacing below filter bar ─────────── */
  #ent-approvals-list {
    padding: 0 16px 16px;
  }
  #ent-approvals-list .ent-approval-card:first-child,
  #ent-approvals-list .ent-pending-card:first-child {
    margin-top: 4px;
  }

  /* ── Reduced motion ───────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    #ent-sidebar {
      transition: none;
    }
    .ent-mob-menu-btn .hb-line {
      transition: none;
    }
  }
}

/* ── Enterprise Getting Started guide ────────────────────────────────── */
.ent-guide {
  margin-bottom: 18px;
  border: 1px solid var(--canvas-200, #e5e2d8);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card, #fff);
}
.ent-guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--canvas-100, #f0f0e8);
}
.ent-guide-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary, #1a1a1a);
}
.ent-guide-title svg {
  color: var(--text-muted, #888);
  flex-shrink: 0;
}
.ent-guide-dismiss {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted, #888);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.ent-guide-dismiss:hover {
  color: var(--text-primary, #1a1a1a);
}
.ent-guide-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px;
}
.ent-guide-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-primary, #faf9f0);
  border: 1px solid var(--canvas-150, #e8e5dc);
  border-radius: 8px;
}
.ent-guide-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--canvas-400, #999);
  flex-shrink: 0;
  margin-top: 1px;
}
.ent-guide-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ent-guide-text strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
}
.ent-guide-text span {
  font-size: 11.5px;
  color: var(--text-muted, #888);
  line-height: 1.4;
}
.ent-guide-text span strong {
  font-size: inherit;
  color: var(--text-primary, #1a1a1a);
}
[data-theme='dark'] .ent-guide {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
[data-theme='dark'] .ent-guide-header {
  border-bottom-color: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .ent-guide-step {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
@media (max-width: 600px) {
  .ent-guide-steps {
    grid-template-columns: 1fr;
  }
}

/* ── Enterprise feedback stars — hover fill ──────────────────────────────── */
.ent-sfb-star {
  transition:
    color 0.15s ease,
    transform 0.2s ease !important;
}
.ent-sfb-star:hover {
  transform: scale(1.2);
}
.ent-sfb-star svg path {
  transition: fill 0.15s ease;
}
#ent-sfb-stars:hover .ent-sfb-star {
  color: #d97757 !important;
}
#ent-sfb-stars:hover .ent-sfb-star svg path {
  fill: #d97757;
}
#ent-sfb-stars .ent-sfb-star:hover ~ .ent-sfb-star {
  color: var(--ent-text3) !important;
}
#ent-sfb-stars .ent-sfb-star:hover ~ .ent-sfb-star svg path {
  fill: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * COLLAPSED-WINDOW TITLEBAR GLOW — Gemini chatbar style
 *
 * When the enterprise desktop window is collapsed to just the 36px titlebar,
 * wrap it in a traveling conic-gradient glow so the strip stays visually
 * findable. The Electron main process already reserves GLOW_PAD=10px above
 * and below the strip for the bloom to bleed into, and the window has
 * setContentProtection(true) so the glow is invisible to screen capture.
 *
 * Active only when body.window-collapsed is set by enterprise-app.js via
 * electronAPI.onCollapseChanged.
 * ───────────────────────────────────────────────────────────────────────── */
@property --ent-glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes entGlowSpin {
  to {
    --ent-glow-angle: 360deg;
  }
}
body.window-collapsed #ent-electron-titlebar {
  position: fixed;
  top: 10px;
  overflow: visible;
  border-radius: 6px;
}
body.window-collapsed {
  background: transparent !important;
}
body.window-collapsed #ent-shell,
body.window-collapsed #ent-app-shell,
body.window-collapsed #ent-login-screen {
  visibility: hidden;
}
body.window-collapsed #ent-electron-titlebar {
  visibility: visible;
}
body.window-collapsed #ent-electron-titlebar::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--ent-glow-angle, 0deg),
    #4285f4 0%,
    #9b72ff 25%,
    #ff5fa2 50%,
    #00d4ff 75%,
    #4285f4 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: entGlowSpin 3s linear infinite;
  pointer-events: none;
}
body.window-collapsed #ent-electron-titlebar::after {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: -2;
  border-radius: 10px;
  background: conic-gradient(
    from var(--ent-glow-angle, 0deg),
    rgba(66, 133, 244, 0.55) 0%,
    rgba(155, 114, 255, 0.55) 25%,
    rgba(255, 95, 162, 0.55) 50%,
    rgba(0, 212, 255, 0.55) 75%,
    rgba(66, 133, 244, 0.55) 100%
  );
  filter: blur(10px);
  opacity: 0.7;
  animation: entGlowSpin 3s linear infinite;
  pointer-events: none;
}

/* ============================================================================
 * Enterprise Billing tab — wraps consumer-style .plan-hero / .plan-usage-card
 * markup with org-specific layout helpers (2-card usage row, tables, hint).
 * The card visuals themselves come from packages/ui/components.css; only the
 * tables, the hint footer, and the responsive grid live here.
 *
 * Color rules (per design directive — no terra anywhere on this page):
 *   - All buttons (primary + secondary): black bg / white fg in light,
 *     white bg / black fg in dark. Single mono palette.
 *   - All accent colors (used count, remaining count, progress bar, hint
 *     link, member avatar, paid pill, period pill) → mono greyscale.
 *   - Plan-hero terra gradient backdrop → neutral.
 *   - Status pulse (Active green) stays — that's a status signal, not brand.
 * ========================================================================== */
/* Page shell — single padded wrapper so the title H1 and every card share
 * matching gutters on all sides. Nothing kisses the sidebar border on the
 * left, the viewport border on the right, or the top edge of the content
 * area. */
.ent-billing-shell {
  box-sizing: border-box;
  padding: 24px 24px 32px;
  max-width: 100%;
  overflow-x: hidden;
}
@media (max-width: 768px) {
  .ent-billing-shell {
    padding: 18px 16px 28px;
  }
}

.ent-billing-page {
  padding-top: 4px;
  overflow-x: hidden;
  max-width: 100%;
}

/* Heading + body share the same gutter so the H1 lines up with card edges */
.ent-billing-page,
body .ent-billing-page + .tab-header,
body .tab-content > .tab-header,
body .tab-content > .tab-body {
  box-sizing: border-box;
}

/* Strip the terra radial backdrop from the plan-hero card */
.ent-billing-page .plan-hero::before {
  display: none;
}

/* ── Buttons: mono, softer dark (not pure black) and slim text ────────────
 * Pure #0a0a0a was reading too "bright" / heavy next to the cream surface.
 * Stepping down to #2a2a2a softens the contrast, and font-weight: 500
 * (medium) replaces 600 so the labels read slim + straight, not chunky. */
.ent-billing-page .plan-hero-manage-btn,
.ent-billing-page .plan-hero-cancel-btn,
.ent-billing-page .plan-hero-renew-btn {
  background: #2a2a2a;
  color: #ffffff;
  border: 1px solid #2a2a2a;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: none;
}
.ent-billing-page .plan-hero-manage-btn:hover,
.ent-billing-page .plan-hero-cancel-btn:hover,
.ent-billing-page .plan-hero-renew-btn:hover {
  background: #3a3a3a;
  color: #ffffff;
  border-color: #3a3a3a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
[data-theme='dark'] .ent-billing-page .plan-hero-manage-btn,
[data-theme='dark'] .ent-billing-page .plan-hero-cancel-btn,
[data-theme='dark'] .ent-billing-page .plan-hero-renew-btn {
  background: #ededed;
  color: #2a2a2a;
  border-color: #ededed;
  font-weight: 500;
}
[data-theme='dark'] .ent-billing-page .plan-hero-manage-btn:hover,
[data-theme='dark'] .ent-billing-page .plan-hero-cancel-btn:hover,
[data-theme='dark'] .ent-billing-page .plan-hero-renew-btn:hover {
  background: #dddddd;
  color: #1a1a1a;
  border-color: #dddddd;
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
}

/* ── Stats: drop terra/green, use foreground text color ─────────────────── */
.ent-billing-page .plan-usage-num-highlight,
.ent-billing-page .plan-usage-num-green {
  color: var(--canvas-900) !important;
}
[data-theme='dark'] .ent-billing-page .plan-usage-num-highlight,
[data-theme='dark'] .ent-billing-page .plan-usage-num-green {
  color: var(--canvas-900) !important;
}

/* ── Progress bars: mono ────────────────────────────────────────────────── */
.ent-billing-page .plan-usage-bar {
  background: #0a0a0a !important;
}
[data-theme='dark'] .ent-billing-page .plan-usage-bar {
  background: #f5f5f5 !important;
}

/* ── Member-row mini progress fill: mono ────────────────────────────────── */
.ent-billing-progress-fill {
  background: #0a0a0a !important;
}
[data-theme='dark'] .ent-billing-progress-fill {
  background: #f5f5f5 !important;
}

/* ── Member avatar circle: mono grey, not terra tint ────────────────────── */
.ent-billing-avatar {
  background: var(--canvas-100);
  color: var(--canvas-900);
}
[data-theme='dark'] .ent-billing-avatar {
  background: var(--canvas-200);
  color: var(--canvas-900);
}

/* ── Paid status pill: mono grey ────────────────────────────────────────── */
.ent-billing-pill-paid {
  background: var(--canvas-100);
  color: var(--canvas-900);
}
[data-theme='dark'] .ent-billing-pill-paid {
  background: var(--canvas-200);
  color: var(--canvas-900);
}

/* ── Hint footer link: mono, underlined ─────────────────────────────────── */
.ent-billing-hint-link {
  color: var(--canvas-900);
  border-bottom: 1px solid var(--canvas-300);
}
.ent-billing-hint-link:hover {
  color: var(--canvas-900);
  border-bottom-color: var(--canvas-900);
}

/* ── "This billing period" label: never wrap, always single line ────────── */
.ent-billing-page .plan-usage-period {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Period dropdown pill — clickable filter trigger with chevron arrow.
 * Tells the user "I'm a dropdown" without using terra/accent colors:
 * subtle 1px border, hover-darken, chevron rotates 180deg when open. */
.ent-billing-period-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--canvas-200);
  border-radius: 999px;
  background: var(--canvas-50);
  color: var(--canvas-700, var(--canvas-900));
  font-size: 11.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1;
}
.ent-billing-period-pill:hover {
  background: var(--canvas-100);
  border-color: var(--canvas-300);
}
.ent-billing-period-pill-chev {
  flex-shrink: 0;
  color: var(--canvas-400);
  transition: transform 0.18s ease;
}
.ent-billing-period-pill.open .ent-billing-period-pill-chev {
  transform: rotate(180deg);
}
.ent-billing-period-pill.open {
  background: var(--canvas-100);
  border-color: var(--canvas-400);
}
[data-theme='dark'] .ent-billing-period-pill {
  background: var(--canvas-100);
  border-color: var(--canvas-200);
}
[data-theme='dark'] .ent-billing-period-pill:hover,
[data-theme='dark'] .ent-billing-period-pill.open {
  background: var(--canvas-200);
  border-color: var(--canvas-400);
}

/* The dropdown menu itself — fixed-positioned, light card with options */
.ent-billing-period-menu {
  background: var(--bg-card, var(--white, #fff));
  border: 1px solid var(--canvas-200);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 4px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: entBillPeriodMenuIn 0.15s ease-out;
}
@keyframes entBillPeriodMenuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ent-billing-period-menu-item {
  background: transparent;
  border: none;
  text-align: left;
  padding: 8px 12px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--canvas-900);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.ent-billing-period-menu-item:hover {
  background: var(--canvas-100);
}
.ent-billing-period-menu-item.selected {
  background: var(--canvas-100);
  font-weight: 600;
}
[data-theme='dark'] .ent-billing-period-menu {
  background: var(--canvas-100);
  border-color: var(--canvas-300);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
[data-theme='dark'] .ent-billing-period-menu-item {
  color: var(--canvas-900);
}
[data-theme='dark'] .ent-billing-period-menu-item:hover,
[data-theme='dark'] .ent-billing-period-menu-item.selected {
  background: var(--canvas-200);
}
/* Header layout: title + period vertically centered with matching min-height
   so Pooled Credits (pill button) and Seats (plain span) stat rows align */
.ent-billing-panel .plan-usage-header {
  flex-wrap: nowrap;
  gap: 12px;
  align-items: center;
  min-height: 32px;
}
.ent-billing-panel .plan-usage-period:not(.ent-billing-period-pill) {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: 11.5px;
  color: var(--canvas-600);
}
.ent-billing-panel .plan-usage-header > div:first-child {
  flex: 1;
  min-width: 0;
}

/* 2-card usage row (Pooled Credits + Seats). Stacks on tablet and below. */
.ent-billing-usage-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  .ent-billing-usage-row {
    grid-template-columns: 1fr;
  }
}

/* Card itself must be a flex column so the action row can push to the bottom
   via margin-top:auto — guarantees both side-by-side cards have their action
   buttons at the SAME Y position regardless of content above */
.ent-billing-usage-row .plan-usage-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Lock stats / progress bar / footer to fixed min-heights so rows align
   horizontally between the two side-by-side cards (Pooled Credits ↔ Seats) */
.ent-billing-usage-row .plan-usage-stats {
  min-height: 56px;
  align-items: center;
}
.ent-billing-usage-row .plan-usage-bar-wrap {
  min-height: 6px;
  margin-top: 12px;
}
.ent-billing-usage-row .plan-usage-footer {
  min-height: 18px;
  margin-top: 10px;
}
/* Action buttons inside .plan-usage-card (Add Credits / View Usage etc.) */
.ent-billing-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.ent-billing-card-actions .plan-hero-manage-btn,
.ent-billing-card-actions .plan-hero-cancel-btn {
  flex: 1;
  width: auto;
  padding: 8px 14px;
}

/* Transaction & Member panels — same .plan-usage-card shell, just with
 * a slightly larger header that has a sub-line under the title.
 * margin-bottom adds breathing room between stacked panels so they don't
 * sit flush against each other (Transaction History → Credit Consumption
 * → hint footer). */
.ent-billing-panel {
  margin-bottom: 24px;
}
.ent-billing-panel .plan-usage-header {
  align-items: flex-start;
  margin-bottom: 14px;
}
.ent-billing-panel-sub {
  font-size: 12.5px;
  color: var(--canvas-400);
  margin-top: 3px;
}
.ent-billing-panel-btn {
  width: auto;
  padding: 6px 12px;
  font-size: 12.5px;
  white-space: nowrap;
}

/* Table inside .plan-usage-card — clean zebra rows, small font, no heavy
 * borders. Reads as a continuation of the card, not a separate widget.
 *
 * No horizontal overflow ever: instead of a scrollbar, the table
 * progressively hides low-priority columns at narrower widths, then at
 * the smallest breakpoint collapses each row into a stacked mini-card
 * (using data-label attributes if present, or just compacted columns).
 * Cleaner UX — the user never has to push a row sideways to see data. */
.ent-billing-tbl-wrap {
  margin: 0;
  overflow: hidden;
}
.ent-billing-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: inherit;
  table-layout: auto;
}
.ent-billing-tbl thead th {
  text-align: left;
  padding: 10px 20px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--canvas-400);
  background: var(--canvas-50);
  border-top: 1px solid var(--canvas-200);
  border-bottom: 1px solid var(--canvas-200);
}
.ent-billing-tbl tbody td {
  padding: 12px 20px;
  color: var(--canvas-900);
  border-bottom: 1px solid var(--canvas-100);
  vertical-align: middle;
}
.ent-billing-tbl tbody tr:last-child td {
  border-bottom: none;
}
.ent-billing-tbl tbody tr:hover td {
  background: var(--canvas-50);
}
.ent-billing-td-dim {
  color: var(--canvas-400);
}
.ent-billing-td-mono {
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--canvas-400);
}
.ent-billing-td-detail {
  font-size: 11px;
  color: var(--canvas-400);
  margin-top: 2px;
}
.ent-billing-tbl-empty {
  text-align: center;
  padding: 32px;
  color: var(--canvas-400);
}

/* ── Responsive table: progressively drop columns, then card-stack ───────
 *
 * Transaction History columns: 1=Date, 2=Description, 3=Amount, 4=Status, 5=Receipt
 * Member Consumption columns:  1=Member, 2=Sessions, 3=Credits, 4=% of Pool, 5=Last Session
 *
 * @ ≤ 900px (tablet): hide column 5 (Receipt / Last Session) — least useful.
 * @ ≤ 700px (small tablet): also hide column 4 (Status / % of Pool).
 * @ ≤ 540px (phone): collapse to card-stack — each row becomes a stacked
 *   mini-card with column labels inline. No horizontal scroll, ever.
 */
@media (max-width: 900px) {
  .ent-billing-tbl thead th:nth-child(5),
  .ent-billing-tbl tbody td:nth-child(5) {
    display: none;
  }
}
@media (max-width: 700px) {
  .ent-billing-tbl thead th:nth-child(4),
  .ent-billing-tbl tbody td:nth-child(4) {
    display: none;
  }
}
@media (max-width: 540px) {
  /* Card-stack mode: each row becomes a vertical block with all columns
   * shown, separated by thin lines. Headers are hidden — labels surface
   * via ::before on each cell using the column header text. */
  .ent-billing-tbl thead {
    display: none;
  }
  .ent-billing-tbl,
  .ent-billing-tbl tbody,
  .ent-billing-tbl tr,
  .ent-billing-tbl td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .ent-billing-tbl tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--canvas-200);
  }
  .ent-billing-tbl tr:last-child {
    border-bottom: none;
  }
  .ent-billing-tbl td {
    padding: 4px 0;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }
  /* All columns visible again in stack mode — undo the desktop hide */
  .ent-billing-tbl tbody td:nth-child(4),
  .ent-billing-tbl tbody td:nth-child(5) {
    display: flex;
  }
  /* First cell (Member / Date) gets stronger emphasis as the row anchor.
   * Stacks label above value with a clear gap so "DATE" never butts up
   * against the date text. */
  .ent-billing-tbl tbody td:first-child {
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--canvas-200);
    margin-bottom: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    justify-content: flex-start;
  }
  /* Inline label for non-first cells, sourced from the data-label attribute
   * the JS now sets on each <td> for stack mode. */
  .ent-billing-tbl tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--canvas-400);
    margin-right: 12px;
    flex-shrink: 0;
  }
  /* In the stacked first-cell, the label sits above the value. Drop the
   * inline margin-right and let it read as a small label header. */
  .ent-billing-tbl tbody td:first-child[data-label]::before {
    margin-right: 0;
  }
  /* Long Stripe checkout-session ids and other monospaced cells must not
   * overflow the row — wrap aggressively and right-align so they collapse
   * gracefully on narrow viewports. */
  .ent-billing-tbl tbody td.ent-billing-td-mono {
    overflow-wrap: anywhere;
    word-break: break-all;
    text-align: right;
    min-width: 0;
    font-size: 11px;
    max-width: 60%;
  }
  /* Empty-state row (single colspan=5 cell) keeps its centered look */
  .ent-billing-tbl-empty {
    display: block !important;
    padding: 24px 16px;
  }
  [data-theme='dark'] .ent-billing-tbl tr {
    border-bottom-color: var(--canvas-200);
  }
}

[data-theme='dark'] .ent-billing-tbl thead th {
  background: var(--canvas-100);
  border-color: var(--canvas-200);
  color: var(--canvas-500);
}
[data-theme='dark'] .ent-billing-tbl tbody td {
  border-bottom-color: var(--canvas-200);
}
[data-theme='dark'] .ent-billing-tbl tbody tr:hover td {
  background: var(--canvas-100);
}

/* Status pill (Paid / Pending) inside transactions table */
.ent-billing-pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--canvas-100);
  color: var(--canvas-500);
}
.ent-billing-pill-paid {
  background: #e8f5e9;
  color: #1b5e20;
}
[data-theme='dark'] .ent-billing-pill-paid {
  background: rgba(34, 197, 94, 0.15);
  color: #66bb6a;
}

/* Member row — avatar + name + email */
.ent-billing-member-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ent-billing-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(217, 119, 87, 0.12);
  color: var(--terra);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.ent-billing-member-email {
  font-size: 11.5px;
  color: var(--canvas-400);
}

/* % of Pool progress bar */
.ent-billing-progress-mini {
  width: 90px;
  height: 5px;
  background: var(--canvas-100);
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.ent-billing-progress-fill {
  display: block;
  height: 100%;
  background: var(--terra);
}

/* Footer hint ("Need a different plan?") — extra top breathing room so it
 * doesn't sit flush against the previous panel. */
.ent-billing-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--canvas-50);
  border: 1px solid var(--canvas-200);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--canvas-500);
  margin-top: 8px;
  margin-bottom: 24px;
}
.ent-billing-hint svg {
  color: var(--canvas-400);
  flex-shrink: 0;
}
.ent-billing-hint-link {
  color: var(--canvas-900);
  font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid var(--canvas-300);
  transition: color 0.15s, border-color 0.15s;
}
.ent-billing-hint-link:hover {
  color: var(--canvas-900);
  border-bottom-color: var(--canvas-900);
}
[data-theme='dark'] .ent-billing-hint {
  background: var(--canvas-100);
  border-color: var(--canvas-200);
}

/* ============================================================================
 * Unified modern close-button pattern (enterprise).
 *
 * Same pattern as the consumer studio (see packages/ui/components.css):
 * transparent hit area, no card, no border, micro-scale on hover, press-in
 * on click. No rotate spin. Applies to every modal / drawer / popover X
 * in the enterprise admin and member surfaces.
 *
 * Selectors covered:
 *   .ent-modal-close        — generic ent-modal X (top-right of overlays)
 *   .ent-rp-close-btn       — resume-preview close
 *   .ent-notif-close-btn    — notifications drawer close
 *   .ent-sidebar-close-btn  — mobile sidebar drawer close
 *   .ep-modal-close         — enterprise-pricing modal close
 *   .bv2-modal-close        — billing/Add Credits/Members/Cancel modal X
 *                             (also styled inline in _injectBillingV2CSS)
 * ========================================================================== */
.ent-modal-close,
.ent-rp-close-btn,
.ent-notif-close-btn,
.ent-sidebar-close-btn,
.ep-modal-close,
.bv2-modal-close {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition:
    transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 180ms ease,
    opacity 180ms ease !important;
  transform: scale(1) !important;
}
.ent-modal-close:hover,
.ent-rp-close-btn:hover,
.ent-notif-close-btn:hover,
.ent-sidebar-close-btn:hover,
.ep-modal-close:hover,
.bv2-modal-close:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.12) !important;
  color: var(--ent-text, #18181b) !important;
}
.ent-modal-close:active,
.ent-rp-close-btn:active,
.ent-notif-close-btn:active,
.ent-sidebar-close-btn:active,
.ep-modal-close:active,
.bv2-modal-close:active {
  transform: scale(0.92) !important;
  transition-duration: 80ms !important;
}
[data-theme='dark'] .ent-modal-close:hover,
[data-theme='dark'] .ent-rp-close-btn:hover,
[data-theme='dark'] .ent-notif-close-btn:hover,
[data-theme='dark'] .ent-sidebar-close-btn:hover,
[data-theme='dark'] .ep-modal-close:hover,
[data-theme='dark'] .bv2-modal-close:hover {
  color: var(--ent-text, #fafafa) !important;
}

/* ── Billing v2 page header — uses .ent-tab-header for theme+bell injection
 * (the global MutationObserver only fires on .ent-tab-header), but the
 * billing page wants a richer two-line title (h1 + subtitle) that does not
 * fit in the rigid 64px height the rest of the app uses. Relax the height
 * and align the actions to the start of the title block. */
.ent-tab-header.bv2-tab-header {
  height: auto;
  min-height: 64px;
  padding: 16px 24px;
  align-items: center;
  gap: 16px;
}
.bv2-tab-header-title {
  flex: 1;
  min-width: 0;
}
.bv2-tab-header-title h1 {
  margin: 0 0 2px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ent-text);
}
.bv2-tab-header-title p {
  margin: 0;
  font-size: 13px;
  color: var(--ent-text3);
  line-height: 1.4;
}
@media (max-width: 540px) {
  .ent-tab-header.bv2-tab-header {
    padding: 14px 16px;
    flex-wrap: wrap;
  }
  .bv2-tab-header-title h1 {
    font-size: 18px;
  }
  .bv2-tab-header-title p {
    font-size: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
 * MOBILE BROWSER PATCH BLOCK (Apr 2026)
 * Phone-portrait + landscape fixes for the Billing & Credits page and its
 * modals. Scoped to <=767px so desktop is untouched. Per Google web.dev
 * mobile guidance: 48px tap targets, touch-action manipulation, no zoom-on-
 * focus inputs, hover/touch parity, scrollable modal bodies.
 * ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* E. bv2-modal must scroll on mobile — desktop uses overflow:visible to
   * let dropdowns escape, but on phones the content gets clipped below the
   * fold (View Usage Breakdown, Add Credits). Force scroll container. */
  .bv2-modal {
    max-height: 92vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .bv2-modal--wide {
    max-width: 100% !important;
    width: calc(100vw - 24px) !important;
  }
  .bv2-modal-overlay {
    padding: 12px !important;
    /* Centered, but content scrolls inside .bv2-modal — never anchor at
     * top because that pins the modal to the address bar even when its
     * content is short. */
    align-items: center !important;
  }

  /* J. Team Members modal header — let it wrap so "Team Members" title
   * doesn't compete with "+ Invite member" + close X. */
  .bv2-mw-head {
    flex-wrap: wrap !important;
    padding: 16px 18px 14px !important;
    gap: 10px !important;
  }
  .bv2-mw-head > div:first-child {
    min-width: 0;
    flex: 1 1 100%;
  }
  .bv2-mw-head h2 {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  .bv2-mw-head p {
    font-size: 12px !important;
  }
  .bv2-mw-head-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 100% !important;
    justify-content: space-between !important;
    flex-shrink: 1 !important;
  }
  .bv2-mw-body {
    padding: 16px 18px !important;
    max-height: none !important;
  }

  /* I. Members preview row — collapse 5-column grid into a labelled card
   * stack. Each cell becomes a labelled row (label above value) so the
   * full "ACTIVE"/"MEMBER" pills fit and avatars don't get squished. */
  .bv2-mem-row {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
    gap: 8px !important;
    border-bottom: 1px solid var(--ent-border, rgba(0, 0, 0, 0.08)) !important;
  }
  .bv2-mem-row.header {
    display: none !important;
  }
  .bv2-mem-row > *:not(.bv2-member-cell) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 4px 0 4px 44px;
  }
  .bv2-mem-row > *:not(.bv2-member-cell)::before {
    content: attr(data-label);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ent-text3, #888);
    min-width: 96px;
    flex-shrink: 0;
  }
  .bv2-member-cell {
    align-items: center !important;
  }
  .bv2-pill {
    align-self: flex-start;
  }

  /* K. Add Credits modal — promo column collapses to a top banner with
   * border-bottom (not -right) and reset radius. Reduce promo padding so
   * the modal fits a phone viewport. */
  .bv2-ac-modal {
    grid-template-columns: 1fr !important;
  }
  .bv2-ac-promo {
    padding: 20px 18px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ent-border, rgba(0, 0, 0, 0.08)) !important;
    border-radius: 18px 18px 0 0 !important;
  }
  .bv2-ac-checkout {
    padding: 18px !important;
  }
  .bv2-pack-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* H. Billing panel header — let "Download invoices" wrap below the
   * title on narrow viewports instead of crowding the heading. */
  .ent-billing-panel .plan-usage-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .ent-billing-panel .plan-usage-header > h2,
  .ent-billing-panel .plan-usage-header > h3 {
    flex: 1 1 100%;
  }
  .ent-billing-panel-btn {
    flex-shrink: 0;
  }

  /* L. Tap targets — 48px minimum for primary actions per Google MD3.
   * Period pill bumps to a tappable size. */
  .plan-hero-manage-btn,
  .plan-hero-cancel-btn,
  .plan-hero-renew-btn,
  .ent-billing-card-actions .plan-hero-cancel-btn,
  .ent-btn-primary,
  .ent-btn,
  .bv2-btn,
  .bv2-btn-primary {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .ent-billing-card-actions {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .ent-billing-card-actions > * {
    flex: 1 1 100%;
  }
  .ent-billing-period-pill {
    min-height: 36px;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
  }
  .bv2-modal-close,
  .ent-modal-close {
    min-width: 40px;
    min-height: 40px;
  }

  /* M+N. Touch-action manipulation removes the 300ms iOS tap delay on
   * billing-page tappables; tap-highlight uses a soft brand tint instead
   * of the default blue flash. */
  button,
  .ent-btn,
  .bv2-btn,
  .bv2-btn-primary,
  .plan-hero-manage-btn,
  .plan-hero-cancel-btn,
  .plan-hero-renew-btn,
  .ent-billing-period-pill,
  .ent-billing-panel-btn,
  [role='button'],
  a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(217, 119, 87, 0.18);
  }

  /* P. Inputs + textareas inside enterprise UI — iOS Safari zooms when
   * the focused input's font-size is below 16px. Force 16px on mobile. */
  input[type='text'],
  input[type='email'],
  input[type='number'],
  input[type='tel'],
  input[type='password'],
  input[type='search'],
  input[type='url'],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Safety net — guarantee the Cancel-modal "Team (5 seats)" alert card
   * always has breathing room from the modal header divider, regardless
   * of whether the body padding rule applies. */
  .ent-plan-summary-card {
    margin-top: 8px;
  }
}

/* O. Hover-only affordances must not stick on touch devices. Wrap
 * decorative hovers behind a hover-capable media query so phones don't
 * get sticky-hover state on first tap. */
@media (hover: none) {
  .bv2-table tbody tr:hover,
  .bv2-pack:hover,
  .bv2-ub-bar:hover,
  .bv2-dr-day:hover,
  .ent-org-card:hover {
    background: inherit;
    transform: none;
    box-shadow: none;
  }
}

/* ── Enterprise inline-edit (Gemini-style: Cancel + Update below bubble) */
.ent-atlas-msg--user.ent-msg-editing {
  flex-direction: column;
  align-items: flex-end;
}
.ent-atlas-msg--user.ent-msg-editing .ent-atlas-user-bubble {
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--ent-radius-md, 8px);
}
.ent-inline-edit-ta {
  width: 100%;
  min-height: 56px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ent-text);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  resize: none;
  box-sizing: border-box;
  display: block;
}
.ent-inline-edit-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  margin-top: 6px;
}
.ent-inline-edit-btn {
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.4;
}
.ent-inline-edit-cancel {
  background: transparent;
  border: 1px solid var(--ent-border2);
  color: var(--ent-text3);
}
.ent-inline-edit-cancel:hover {
  background: var(--ent-surface2);
}
.ent-inline-edit-send {
  background: #d97757;
  border: none;
  color: #fff;
}
.ent-inline-edit-send:hover {
  opacity: 0.88;
}

/* KB card — URL input row + Add button + upload zone */
.ent-kb-url-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ent-kb-url-add-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #d97757 0%, #b05fde 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(217,119,87,0.25);
  transition: opacity 0.15s;
}
.ent-kb-url-add-btn:hover { opacity: 0.88; }
.ent-kb-upload-zone {
  border: 1.5px dashed var(--ent-border2, #e0e0e0);
  border-radius: 7px;
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--ent-text2, #666);
  transition: border-color 0.15s;
}
.ent-kb-upload-zone:hover { border-color: #d97757; color: #d97757; }
[data-theme='dark'] .ent-kb-upload-zone {
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.45);
}

/* Atlas chips — mobile 2×2 grid below greeting */
@media (max-width: 767px) {
  .ent-atlas-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    width: 100%;
    max-width: 100%;
    margin: 16px 0 0;
  }
  .ent-atlas-chip {
    white-space: normal;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    padding: 8px 10px;
  }
}