/* Airene — Pixel-flavored tokens */
:root {
  /* Pixel 2.4 aliases. Product-specific blue names remain for migration only. */
  --mk-blue-50: var(--pxl-color-background-brand-selected);
  --mk-blue-100: color-mix(in srgb, var(--primary-soft) 84%, var(--primary));
  --mk-blue-200: color-mix(in srgb, var(--primary-soft) 68%, var(--primary));
  --mk-blue-300: color-mix(in srgb, var(--primary-soft) 46%, var(--primary));
  --mk-blue-400: color-mix(in srgb, var(--primary-soft) 24%, var(--primary));
  --mk-blue-500: var(--pxl-color-background-brand-bold);
  --mk-blue-600: var(--mk-color-primary-hover);
  --mk-blue-700: color-mix(in srgb, var(--primary) 76%, black);
  --mk-blue-800: color-mix(in srgb, var(--primary) 62%, black);
  --mk-blue-900: color-mix(in srgb, var(--primary) 48%, black);

  /* Product-local neutral aliases kept for migration; values live in design-tokens. */
  --mk-n-0:  var(--mk-neutral-0);
  --mk-n-25: var(--mk-neutral-25);
  --mk-n-50: var(--mk-neutral-50);
  --mk-n-100: var(--mk-neutral-100);
  --mk-n-150: var(--mk-neutral-150);
  --mk-n-200: var(--mk-neutral-200);
  --mk-n-300: var(--mk-neutral-300);
  --mk-n-400: var(--mk-neutral-400);
  --mk-n-500: var(--mk-neutral-500);
  --mk-n-600: var(--mk-neutral-600);
  --mk-n-700: var(--mk-neutral-700);
  --mk-n-800: var(--mk-neutral-800);
  --mk-n-900: var(--mk-neutral-900);
  --mk-n-950: var(--mk-neutral-950);

  /* Status */
  --mk-success: var(--pxl-color-background-success-bold);
  --mk-success-bg: var(--mk-color-success-soft);
  --mk-warning: var(--pxl-color-background-warning-bold);
  --mk-warning-bg: var(--mk-color-warning-soft);
  --mk-danger:  var(--pxl-color-background-danger-bold);
  --mk-danger-bg: var(--mk-color-danger-soft);

  /* Per-agent accents */
  --ag-ap: var(--mk-agent-ap);
  --ag-ap-bg: var(--mk-agent-ap-bg);
  --ag-ar: var(--mk-agent-ar);
  --ag-ar-bg: var(--mk-agent-ar-bg);
  --ag-sales: var(--mk-agent-sales);
  --ag-sales-bg: var(--mk-agent-sales-bg);
  --ag-cash: var(--mk-agent-cash);
  --ag-cash-bg: var(--mk-agent-cash-bg);
  --ag-inv: var(--mk-agent-inventory);
  --ag-inv-bg: var(--mk-agent-inventory-bg);
  --ag-rep: var(--mk-agent-reporting);
  --ag-rep-bg: var(--mk-agent-reporting-bg);
  --ag-studio: var(--mk-agent-studio);
  --ag-studio-bg: var(--mk-agent-studio-bg);
  --ag-airene: var(--mk-agent-airene);
  --ag-airene-bg: var(--mk-agent-airene-bg);
  --ag-payroll: var(--mk-agent-payroll);
  --ag-payroll-bg: var(--mk-agent-payroll-bg);
  --ag-workforce: var(--mk-agent-workforce);
  --ag-workforce-bg: var(--mk-agent-workforce-bg);
  --ag-talent: var(--mk-agent-talent);
  --ag-talent-bg: var(--mk-agent-talent-bg);
  --ag-hr: var(--mk-agent-hr);
  --ag-hr-bg: var(--mk-agent-hr-bg);

  /* Cowork-only chrome aliases; canonical surface/border/text vars come from design-tokens. */
  --chrome-bg: var(--surface-2);
  --chrome-border: var(--border);

  /* Spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;

  /* Radii */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 22px; --r-full: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 3px 10px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 12px 34px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);

  /* Density */
  --row-h: 36px;
  --pad-y: 10px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Shared microinteraction aliases. Keep these mapped to design-tokens so
     Cowork, Docs, and Sheets use one motion contract. */
  --motion-instant: var(--mk-motion-instant, 80ms cubic-bezier(0.2, 0, 0, 1));
  --motion-fast: var(--mk-motion-fast, 120ms cubic-bezier(0.2, 0, 0, 1));
  --motion-standard: var(--mk-motion-standard, 160ms cubic-bezier(0.2, 0, 0, 1));
  --motion-soft: var(--mk-motion-soft, 180ms cubic-bezier(0.16, 1, 0.3, 1));
  --focus-ring: var(--mk-focus-ring, 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent));
  --focus-ring-tight: var(--mk-focus-ring-tight, 0 0 0 2px color-mix(in srgb, var(--primary) 24%, transparent));
  --shadow-popover: var(--mk-shadow-popover, 0 14px 34px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.08));
}

[data-density="compact"] {
  --row-h: 30px;
  --pad-y: 6px;
  --s-3: 10px;
  --s-4: 12px;
}

[data-theme="dark"] {
  --bg: #0c0f15;
  --surface: #131822;
  --surface-2: #181e2a;
  --surface-3: #1f2737;
  --chrome-bg: #131822;
  --chrome-border: #232b3b;
  --rail-bg: var(--chrome-bg);
  --rail-border: var(--chrome-border);
  --border: #232b3b;
  --border-strong: #2c3650;
  --text: #e7ecf4;
  --text-secondary: #adb6c6;
  --text-tertiary: #7c8597;
  --text-inverse: #0a0d12;
  --primary: #6f8fff;
  --primary-hover: #8aa4ff;
  --primary-soft: #1a2342;

  --mk-success-bg: #0f2a1c;
  --mk-warning-bg: #2c2110;
  --mk-danger-bg: #2c1715;

  --ag-ap-bg: #1d1c3b;
  --ag-ar-bg: #0a2a26;
  --ag-sales-bg: #321414;
  --ag-cash-bg: #2c2010;
  --ag-inv-bg: #1e293b;
  --ag-rep-bg: #2a1740;
  --ag-studio-bg: #2a1424;
  --ag-airene-bg: #16223e;
  --ag-payroll-bg: #0a2a1f;
  --ag-workforce-bg: #0f2f2c;
  --ag-talent-bg: #241445;
  --ag-hr-bg: #152540;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  --shadow-md: 0 2px 6px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
html, body, #root {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior-x: none;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-tertiary); }

/* App shell */
.app {
  display: grid;
  grid-template-columns: minmax(0, var(--rail-w, var(--mk-product-sidebar-w, 244px))) minmax(0, 1fr);
  width: 100%;
  max-width: 100dvw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--chrome-bg);
}
/* Keep shell width changes immediate. Animating grid columns here can leave
   Chrome holding the old expanded column after collapsing the rail. */
/* During a drag, the App component sets --rail-w-drag on :root each
   mousemove. Use it directly (no React re-render) for snappy feedback. */
.app[data-resizing="true"] {
  grid-template-columns: var(--rail-w-drag, var(--rail-w, var(--mk-product-sidebar-w, 244px))) 1fr;
}
.app[data-collapsed="true"] {
  --rail-w: var(--mk-product-sidebar-collapsed-w, 52px);
  grid-template-columns: var(--mk-product-sidebar-collapsed-w, 52px) minmax(0, 1fr);
}
.app[data-home="true"] {
  --rail-w: 0px;
  grid-template-columns: minmax(0, 1fr);
}
.app[data-home="true"][data-resizing="true"] {
  grid-template-columns: minmax(0, 1fr);
}

/* The mobile drawer backdrop is always present in the React tree. Keep it
   out of the desktop grid; otherwise it becomes the first grid item and
   shifts the sidebar/main content into the wrong cells. */
.mobile-rail-backdrop { display: none; }

/* Three-tier responsive layout for the sidebar:
     ≤ 768px      drawer / hidden by default; hamburger reveals overlay
     769–1024px   visible as a compact icon rail
     > 1024px     full sidebar; user can collapse to icons
   The narrow tier gives back the "minimize" state that the original
   single-breakpoint setup didn't have — on a tablet portrait or narrow
   laptop window you get a compact icon strip instead of being forced
   into either-fully-hidden or fully-open.

   Mobile drawer block — only fires below 768px (phones in portrait). */
@media (max-width: 768px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
    width: 100dvw;
    max-width: 100dvw;
    min-width: 0;
  }
  /* Rail placement is defined again after the base `.rail` block below.
     Keeping that final override later in the file prevents desktop rail
     defaults from leaking into the phone grid by source order. */

  /* Backdrop behind the open mobile rail. Tapping it (handler in app.jsx)
     closes the drawer — without this, opening the menu effectively
     blocked the chat surface because there was no obvious "dismiss"
     affordance. Sits one z-index below the rail (50) so the rail is
     interactive while the backdrop catches taps on the rest of the
     viewport. */
  .app[data-mobile-rail="true"] .mobile-rail-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: calc(var(--z-popover) - 41);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: backdrop-fade-in 0.18s ease-out;
  }
  @keyframes backdrop-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Bump tap targets — rail items are ~32px on desktop, too small for
     fingers. 44px is the iOS HIG minimum. */
  .app[data-mobile-rail="true"] .mk-product-sidebar-item,
  .app[data-mobile-rail="true"] .mk-product-sidebar-action-row {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 14.5px;
  }

  .rail-resize { display: none !important; }

  .rail-mobile-account {
    display: block;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--border);
  }

  .rail-mobile-account .mk-product-sidebar-section-label {
    padding-left: 2px;
    padding-right: 2px;
  }

  .rail-mobile-account .account-switcher {
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-content: flex-start;
    border-color: var(--border);
    background: var(--surface-2);
  }

  .rail-mobile-account .account-label {
    flex: 1;
  }

  .rail-mobile-account .account-menu {
    left: 0;
    right: 0;
    min-width: 0;
    max-height: min(420px, 50dvh);
    overflow-y: auto;
  }
}

/* Middle tier: tablet portrait + narrow laptop windows. Sidebar stays
   visible as an icon-only rail. Above 1024px the user-chosen state
   (collapsed or expanded) is honored as usual; below 768px the drawer
   pattern kicks in. */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Force the icon-strip width regardless of the user's `sidebarCollapsed`
     setting or saved drag width. This must set the grid column directly:
     App writes the expanded width as an inline CSS var, and inline vars
     otherwise beat this media-query tier. */
  .app { grid-template-columns: var(--mk-product-sidebar-collapsed-w, 52px) minmax(0, 1fr); }
  /* Hide labels the same way the desktop collapsed state does, so the
     rail header / nav items / user card all render in icon-only mode
     even when `data-collapsed` is false. Mirrors the data-collapsed
     rules above. */
  .mk-product-sidebar-title,
  .mk-product-shell-mark,
  .mk-product-switcher,
  .mk-product-sidebar-section-label,
  .mk-product-sidebar-item-label,
  .mk-product-sidebar-item-badge,
  .mk-product-sidebar-action-row-label,
  .mk-product-sidebar-action-row-trailing,
  .mk-product-sidebar-user-meta,
  .mk-product-sidebar-user-action,
  .mk-product-sidebar-search {
    display: none !important;
  }
  /* Center icons within the now-narrow rail. */
  .mk-product-sidebar-item,
  .mk-product-sidebar-action-row {
    justify-content: center;
    padding: 8px 0;
  }
  /* Account switcher in the topbar is fine, but the user card at the
     bottom of the rail should also collapse to just the avatar. */
  .mk-product-sidebar-user {
    justify-content: center;
    padding: 8px;
  }
}

@media (max-width: 768px) {
  /* Chat input: pin to the bottom of the viewport with safe-area
     inset so it doesn't get cut off behind the iOS home-indicator
     bar / Android nav-pill. Also bumps the touch padding so the
     send button is a comfortable tap. Targets the `chat-composer`
     wrapper className added in chat-surface.jsx. */
  .chat-composer {
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    width: 100%;
    max-width: 100dvw;
    overflow: hidden;
  }

  .chat-wrap,
  .chat-composer > div {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .composer-tools-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .composer-settings-trigger span {
    max-width: 84px;
  }

  .composer-suggestions {
    order: 2;
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .composer-options {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .composer-options {
    justify-content: flex-start !important;
    margin-left: 0 !important;
  }

  .composer-suggestions .pill {
    max-width: 100%;
    min-height: 28px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }

  /* Message bubbles: the inline `maxWidth: 70%` from the desktop
     design wastes a lot of horizontal space on a phone, especially
     for the user's own messages (right-aligned, so the empty space
     sits on the left). Push to 90vw on mobile so the bubble actually
     uses the screen width. !important required to beat the inline
     style. */
  .user-bubble {
    max-width: 90vw !important;
  }
}

/* --- Sidebar / Rail --- */
.rail {
  min-width: 0;
}

.user-message,
.user-message-row {
  width: 100%;
}
.user-bubble {
  overflow-wrap: break-word;
}
.message-actions {
  opacity: .86;
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
.message-actions-bottom {
  margin-top: 9px;
}
.message-docs-actions {
  position: relative;
}
.btn.ghost.message-action-btn {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  width: 31px;
  height: 31px;
  padding: 0;
  border-radius: 8px;
}
.btn.ghost.message-action-btn[data-state="busy"] {
  cursor: progress;
}
.btn.ghost.message-action-btn[data-state="success"] {
  color: var(--mk-success);
  background: var(--mk-success-bg);
  border-color: transparent;
}
.action-spin-dot {
  width: 12px;
  height: 12px;
  border-width: 1.6px;
}
.message-action-logo {
  display: block;
  object-fit: contain;
  border-radius: 4px;
}
.message-docs-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
    z-index: var(--z-popover);
  width: 238px;
  padding: 5px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-popover);
  animation: pop-in var(--motion-standard) both;
}
.message-docs-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.message-docs-menu button:hover {
  background: var(--surface-2);
}
.message-docs-menu button:active {
  transform: scale(var(--mk-interaction-press-scale, 0.985));
}
.message-docs-menu button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-tight);
}
.agent-message:hover .message-actions,
.message-actions:focus-within {
  opacity: 1;
}
@media (hover: none) {
  .message-actions {
    opacity: 1;
  }
}

.docs-block-picker {
  width: min(680px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
}
.docs-block-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.docs-block-picker-head span {
  display: block;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.docs-block-picker-head h2 {
  margin: 3px 0 0;
  font-size: 17px;
  line-height: 1.25;
}
.docs-block-picker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.docs-block-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  padding: 12px 18px;
}
.docs-block-option {
  display: grid;
  grid-template-columns: 18px 72px 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    transform var(--motion-fast);
}
.docs-block-option:hover,
.docs-block-option.selected {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  background: color-mix(in srgb, var(--primary-soft) 54%, var(--surface));
}
.docs-block-option:active {
  transform: scale(var(--mk-interaction-press-scale, 0.985));
}
.docs-block-option input {
  margin-top: 2px;
}
.docs-block-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.docs-block-content {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.docs-block-content strong,
.docs-block-content em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.docs-block-content strong {
  font-size: 13px;
  line-height: 1.3;
}
.docs-block-content em {
  color: var(--text-secondary);
  font-size: 12px;
  font-style: normal;
}
.docs-block-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--border);
}
@media (max-width: 640px) {
  .docs-block-option {
    grid-template-columns: 18px 1fr;
  }
  .docs-block-kind {
    display: none;
  }
  .docs-block-picker-actions {
    flex-wrap: wrap;
  }
  .docs-block-picker-actions .btn {
    flex: 1 1 160px;
  }
}

.chat-composer {
  position: relative;
  background:
    linear-gradient(
      to top,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 94%, transparent) 64%,
      transparent 100%
    );
}
.composer-shell-wrap {
  width: min(760px, 100%);
  margin: 0 auto;
  position: relative;
}
.composer-floating-form {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  box-shadow:
    0 18px 48px rgba(15, 23, 42, 0.10),
    0 4px 12px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition:
    border-color var(--motion-fast),
    box-shadow var(--motion-fast),
    transform var(--motion-fast);
}
.composer-floating-form:focus-within {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--border-strong));
  box-shadow:
    0 20px 52px rgba(15, 23, 42, 0.12),
    0 5px 14px rgba(15, 23, 42, 0.08),
    var(--focus-ring-tight);
}
.composer-floating-form.disabled {
  opacity: 0.64;
}
.composer-tools-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  min-height: 28px;
}
.composer-connect-btn {
  flex: 0 0 auto;
}
.composer-settings-anchor {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}
.composer-settings-trigger span {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.composer-settings-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 6px);
  width: min(320px, calc(100vw - 32px));
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-popover);
  z-index: var(--z-popover);
  animation: pop-in var(--motion-standard) both;
}
.composer-setting-field {
  display: grid;
  gap: 6px;
}
.composer-setting-field span,
.composer-setting-check strong {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
}
.composer-setting-field select {
  height: 32px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: 0 8px;
  outline: none;
}
.composer-setting-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-secondary);
}
.composer-setting-check input {
  margin: 2px 0 0;
  accent-color: var(--primary);
}
.composer-setting-check span {
  display: grid;
  gap: 2px;
}
.composer-setting-check em {
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}
.composer-suggestions {
  flex: 1 1 320px;
  flex-wrap: wrap;
  min-width: 0;
}
.composer-suggestions .pill {
  cursor: pointer;
  font-size: 11.5px;
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}
.composer-suggestions .pill:hover {
  color: var(--text);
  border-color: var(--border-strong);
  transform: translateY(var(--mk-interaction-lift-y, -1px));
}
.composer-suggestions .pill:active {
  transform: translateY(0) scale(var(--mk-interaction-press-scale, 0.985));
}
.composer-input-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 9px 10px 9px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.composer-textarea {
  flex: 1;
  min-width: 0;
  min-height: 28px;
  max-height: 140px;
  padding: 4px 2px;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--text);
  font: 14px/1.5 var(--font-sans);
}
.composer-textarea::placeholder {
  color: var(--text-tertiary);
}

.composer-command-popup {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 4px);
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-popover);
  z-index: var(--z-popover);
  animation: pop-in var(--motion-standard) both;
}
.composer-command-header {
  padding: 6px 9px 4px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}
.composer-command-item {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition:
    background-color var(--motion-fast),
    transform var(--motion-fast);
}
.composer-command-item:hover,
.composer-command-item.active {
  background: var(--primary-soft);
}
.composer-command-item:active {
  transform: scale(var(--mk-interaction-press-scale, 0.985));
}
.composer-command-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--primary);
}
.composer-command-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.composer-command-copy strong {
  font-size: 12.5px;
}
.composer-command-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
  font-size: 11.5px;
  white-space: nowrap;
}

.answer-selection-menu {
  position: absolute;
  z-index: var(--z-popover);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-popover);
  transform: translate(-50%, 0);
  animation: selection-pop-in var(--motion-standard) both;
}
.answer-selection-menu button {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  transition:
    background-color var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}
.answer-selection-menu button:hover {
  background: var(--surface-2);
  color: var(--text);
}
.answer-selection-menu button:active {
  transform: scale(var(--mk-interaction-press-scale, 0.985));
}

.chat-status-strip {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, var(--bg));
  color: var(--text-secondary);
  font-size: 12px;
  flex-shrink: 0;
}
.chat-status-strip strong {
  color: var(--text);
  font-size: 12.5px;
}
.chat-status-strip button {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 650;
}
.chat-status-strip button:hover {
  color: var(--text);
  background: var(--surface-2);
}
.chat-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--text-tertiary);
  flex: 0 0 auto;
}
.chat-status-strip.success .chat-status-dot { background: var(--mk-success); }
.chat-status-strip.brand .chat-status-dot {
  background: var(--primary);
  animation: pulse 1.2s ease-in-out infinite;
}
.chat-status-strip.warning .chat-status-dot { background: var(--mk-warning); }

.chat-skeleton {
  display: grid;
  gap: 14px;
  padding: 8px 0;
}
.chat-skeleton-row {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.chat-skeleton-row::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), transparent);
  animation: skeleton-shimmer 1.35s infinite;
}
.chat-skeleton-row.user {
  width: min(420px, 70%);
  height: 42px;
  justify-self: end;
  background: var(--primary-soft);
}
.chat-skeleton-row.agent {
  display: grid;
  gap: 8px;
  width: min(560px, 82%);
  padding: 12px;
}
.chat-skeleton-row.agent span {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-3);
}
.chat-skeleton-row.agent span:nth-child(2) { width: 86%; }
.chat-skeleton-row.agent span:nth-child(3) { width: 62%; }
@keyframes skeleton-shimmer {
  to { transform: translateX(100%); }
}

.cowork-brand-mark,
.login-product-mark {
  display: grid;
  place-items: center;
  flex: none;
}
.cowork-brand-mark {
  width: 28px;
  height: 28px;
}
.cowork-brand-mark img,
.login-product-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.login-product-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  filter: drop-shadow(0 10px 22px rgba(101, 37, 245, .22));
}

.empty-chat-logo {
  width: 124px;
  height: 124px;
  display: grid;
  place-items: center;
}
.empty-chat-logo img {
  width: 124px;
  height: 124px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(74, 28, 190, .16));
}
.connection-scope-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: min(560px, 100%);
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-secondary);
  box-shadow: var(--shadow-sm);
}
.connection-scope-summary.compact {
  padding: 5px 7px;
  gap: 7px;
  box-shadow: none;
  background: var(--surface-2);
}
.connection-scope-summary.empty {
  border-style: dashed;
  color: var(--text-tertiary);
}
.connection-scope-icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary);
}
.connection-scope-summary.compact .connection-scope-icon {
  width: 22px;
  height: 22px;
}
.connection-scope-copy {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}
.connection-scope-copy small {
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 650;
}
.connection-scope-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}
.connection-scope-summary:not(.compact) .connection-scope-copy strong {
  font-size: 13px;
}
.connection-scope-products {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.connection-scope-products em {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--mk-success-bg);
  color: var(--mk-success);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
}

/* Drag handle state lives in product-shell; Cowork only owns drag feedback. */
.rail { position: relative; }
.app[data-resizing="true"] .rail-resize {
  background: linear-gradient(to right, transparent 1px, var(--primary) 2px, var(--primary) 4px, transparent 5px);
}
.app[data-resizing="true"] { cursor: col-resize; user-select: none; }
.app[data-resizing="true"] * { user-select: none !important; }

/* Final mobile rail placement lives after the base `.rail` rules so
   desktop defaults cannot re-enable the sidebar as a normal grid row. */
@media (max-width: 768px) {
  .app .rail {
    display: none;
  }

  .app[data-mobile-rail="true"] .rail {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-popover) - 40);
    width: 100dvw;
    max-width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
  }
}

.rail-conv {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; overflow-y: auto; padding-bottom: 10px;
  min-width: 0;
}
.rail-conv-more {
  display: grid;
  gap: 6px;
  padding: 7px 8px 4px;
}
.rail-conv-more-meta {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 600;
}
.rail-conv-more .btn {
  width: 100%;
  justify-content: center;
  padding: 5px 8px;
  font-size: 11.5px;
}

.rail-mobile-account {
  display: none;
}

/* User menu popup attached to the bottom user pill */
.user-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px; right: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08));
  padding: 4px;
  z-index: var(--z-popover);
  display: flex; flex-direction: column; gap: 1px;
}
.user-menu .menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px; color: var(--text);
  background: transparent; border: none; cursor: pointer; width: 100%;
  text-align: left;
}
.user-menu .menu-item:hover { background: var(--surface-3); }
.user-menu .menu-item.danger { color: var(--mk-danger); }
.user-menu .menu-section-label {
  padding: 7px 10px 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.user-menu .menu-divider {
  height: 1px; background: var(--border); margin: 4px 0;
}
.mk-product-sidebar[data-collapsed="true"] .mk-product-sidebar-user .user-menu {
  left: calc(100% + 8px);
  right: auto;
  bottom: 0;
  width: 220px;
}

.role-menu-item {
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.role-menu-item:hover {
  background: var(--surface-3);
  color: var(--text);
}

.role-menu-item .label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Conversation context menu (rename + archive) */
.conv-menu {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08));
  padding: 4px; z-index: var(--z-popover);
  min-width: 160px;
}
.conv-menu .menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12.5px; color: var(--text);
  background: transparent; border: none; cursor: pointer; width: 100%;
  text-align: left;
}
.conv-menu .menu-item:hover { background: var(--surface-3); }
.conv-menu .menu-item.danger { color: var(--mk-danger); }
.avatar {
  width: 30px; height: 30px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
  color: white;
}
/* --- Top bar --- */
.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
/* <main> landmark wrapping the routed page. Transparent passthrough that
   mirrors .main's flex column so the chat surface (height:100%) and other
   pages fill the space below the topbar exactly as before. */
.main-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  height: 52px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--chrome-border);
  background: #f8fafc;
  background: var(--chrome-bg, #f8fafc);
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}
[data-theme="dark"] .topbar {
  background: #131822;
  background: var(--chrome-bg, #131822);
}
.topbar .ttl { font-weight: 600; font-size: 15px; letter-spacing: 0; }
.topbar .crumb { color: var(--text-tertiary); font-size: 13px; }
.topbar .spacer { flex: 1; }
.topbar .topbar-menu,
.topbar .topbar-mobile-title,
.topbar .topbar-new-chat {
  display: none;
}
.topbar-desktop-account {
  min-width: 0;
}
.topbar-desktop-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .topbar {
    height: 56px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 8px;
  }

  .topbar .topbar-menu,
  .topbar .topbar-new-chat {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 0;
  }

  .topbar .topbar-mobile-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.15;
  }

  .topbar .topbar-mobile-logo {
    width: 30px;
    height: 30px;
  }

  .topbar-mobile-copy {
    display: block;
    min-width: 0;
  }

  .topbar-mobile-title strong,
  .topbar-mobile-title small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-mobile-title strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
  }

  .topbar-mobile-title small {
    margin-top: 3px;
    font-size: 11px;
    color: var(--text-tertiary);
  }

  .topbar-desktop-account,
  .topbar-desktop-actions,
  .topbar .spacer {
    display: none;
  }
}
.tabs { display: flex; gap: 2px; }
.tab {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary);
  background: transparent; border: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { background: var(--surface-3); color: var(--text); }
.tab.active { background: var(--primary-soft); color: var(--primary); }

.connections-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.connections-tab {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}
.connections-tab:hover {
  background: var(--surface-3);
  color: var(--text);
}
.connections-tab.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
@media (max-width: 560px) {
  .connections-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .connections-tab {
    justify-content: center;
  }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  min-height: 32px;
  padding: 0 12px; border-radius: 7px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13px; font-weight: 650;
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    box-shadow var(--motion-fast),
    transform var(--motion-instant);
}
.btn:hover { background: var(--surface-3); }
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn:active { transform: translateY(var(--mk-interaction-press-y, 1px)) scale(var(--mk-interaction-press-scale, 0.985)); }
.btn.primary {
  background: var(--primary); color: white; border-color: transparent;
  box-shadow: 0 1px 2px rgba(43, 87, 220, .25), inset 0 1px 0 rgba(255,255,255,.12);
}
.btn.primary:hover { background: var(--primary-hover); }
.btn.danger {
  background: var(--mk-danger); color: white; border-color: transparent;
}
.btn.danger:hover { filter: brightness(.94); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); }
.btn.sm { min-height: 28px; padding: 0 10px; font-size: 12px; border-radius: 7px; }
.btn.icon { width: 30px; height: 30px; min-height: 30px; padding: 0; }
@media (max-width: 768px) {
  .topbar .topbar-menu.btn.icon,
  .topbar .topbar-new-chat.btn.icon {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }
}
.btn:disabled {
  opacity: .62;
  cursor: not-allowed;
  transform: none;
}
.btn[aria-busy="true"] {
  cursor: progress;
}

.form-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--text);
}

.form-field > input,
.form-field > textarea,
.form-field > select {
  margin-bottom: 0 !important;
}

.form-dirty-dot {
  margin-left: 6px;
  color: var(--mk-warning);
  font-size: 11px;
  font-weight: 650;
}

.form-field-message {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.form-field-message.error {
  color: var(--mk-danger);
}

.form-field.success .form-field-message {
  color: var(--mk-success);
}

.form-field.validating .form-field-message::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 999px;
  background: currentColor;
  display: inline-block;
  animation: docs-status-pulse var(--mk-motion-skeleton, 1150ms) ease-in-out infinite;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Keyboard skip link — hidden off-screen until focused, then slides in as
   the first tab stop so keyboard users can jump past the sidebar/topbar. */
.skip-link {
  position: fixed;
  top: -120px;
  left: 12px;
  z-index: var(--z-toast, 1000);
  padding: 10px 16px;
  border-radius: var(--r-md, 8px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 24px rgba(10, 13, 18, .22);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: top .16s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(37, 99, 235, .4)), 0 8px 24px rgba(10, 13, 18, .22);
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  display: inline-block;
  animation: cowork-spin var(--mk-motion-spinner, 700ms) linear infinite;
}
.spinner.sm {
  width: 13px;
  height: 13px;
}
@keyframes cowork-spin { to { transform: rotate(360deg); } }

.loading-state {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-secondary);
  font-size: 13px;
}
.loading-state.compact {
  min-height: 24px;
  gap: 7px;
  font-size: 12px;
}

.skeleton {
  display: grid;
  gap: 8px;
}
.skeleton-line {
  display: block;
  height: 12px;
  width: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--border) 50%, var(--surface-3) 100%);
  background-size: 200% 100%;
  animation: cowork-skeleton var(--mk-motion-skeleton, 1.15s) ease-in-out infinite;
}
@keyframes cowork-skeleton {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.empty-state {
  min-height: 96px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 22px;
  color: var(--text-secondary);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.empty-state-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--primary);
  background: var(--primary-soft);
}
.empty-state-copy {
  display: grid;
  gap: 3px;
  max-width: 440px;
  font-size: 13px;
  line-height: 1.45;
}
.empty-state-copy strong {
  color: var(--text);
  font-size: 14px;
}
.empty-state-actions {
  margin-top: 4px;
}

/* Shared overlays */
.popover-scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-popover) - 1);
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(10, 13, 18, .56);
}
.confirm-dialog {
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 18px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: 0 22px 60px rgba(0,0,0,.24);
}
.confirm-dialog-ui {
  width: min(520px, calc(100vw - 32px));
}
.confirm-dialog-content {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
}
.confirm-dialog-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--primary);
  background: var(--primary-soft);
}
.confirm-dialog-icon.warning {
  color: var(--mk-warning);
  background: var(--mk-warning-bg);
}
.confirm-dialog-icon.danger {
  color: var(--mk-danger);
  background: var(--mk-danger-bg);
}
.confirm-dialog-body h2 {
  margin: 0 0 6px;
  font-size: 16px;
}
.confirm-dialog-body p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}
.confirm-dialog-details {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}
.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(520px, calc(100vw - 40px));
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--mk-shadow-toast, 0 14px 34px rgba(0,0,0,.18));
  font-size: 13px;
  animation: toast-in var(--motion-soft) both;
}
.toast.success {
  border-color: transparent;
  color: var(--mk-success);
  background: var(--mk-success-bg);
}
.toast.danger {
  border-color: transparent;
  color: var(--mk-danger);
  background: var(--mk-danger-bg);
}
.action-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}
.action-notice.danger {
  border-color: transparent;
  background: var(--mk-danger-bg);
  color: var(--mk-danger);
}
.action-notice.warning {
  border-color: transparent;
  background: var(--mk-warning-bg);
  color: var(--mk-warning);
}
.action-notice.success {
  border-color: transparent;
  background: var(--mk-success-bg);
  color: var(--mk-success);
}
.action-notice-icon {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.56);
  flex: 0 0 auto;
}
.action-notice-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.4;
}
.action-notice-copy strong {
  color: currentColor;
  font-size: 13px;
  font-weight: 750;
}
.action-notice-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}
.page-notice {
  margin-bottom: 16px;
}
.page-notice.compact {
  margin-bottom: 10px;
  padding: 8px 10px;
  box-shadow: none;
}
.page-notice.compact .action-notice-icon {
  width: 22px;
  height: 22px;
}
.table-empty-state {
  margin: 14px;
  min-height: 128px;
}
.compact-empty-state {
  min-height: 86px;
  padding: 16px;
}
.compact-empty-state .empty-state-icon {
  width: 28px;
  height: 28px;
}
.mk-ui-dialog-footer .confirm-dialog-actions {
  margin-top: 0;
}
@media (max-width: 560px) {
  .confirm-dialog {
    grid-template-columns: 1fr;
  }
  .confirm-dialog-content {
    grid-template-columns: 1fr;
  }
  .confirm-dialog-actions {
    flex-direction: column-reverse;
  }
  .confirm-dialog-actions .btn,
  .confirm-dialog-actions .mk-ui-button {
    width: 100%;
  }
  .toast {
    right: 12px;
    bottom: 12px;
    max-width: calc(100vw - 24px);
  }
  .action-notice {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .action-notice-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Pills / badges */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--surface-3); color: var(--text-secondary);
  border: 1px solid var(--border);
  transition:
    background-color var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast),
    transform var(--motion-fast);
}
.pill.success { background: var(--mk-success-bg); color: var(--mk-success); border-color: transparent; }
.pill.warning { background: var(--mk-warning-bg); color: var(--mk-warning); border-color: transparent; }
.pill.danger  { background: var(--mk-danger-bg); color: var(--mk-danger); border-color: transparent; }
.pill.primary { background: var(--primary-soft); color: var(--primary); border-color: transparent; }

/* Inbox approvals */
.inbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
}
.inbox-row-check {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  cursor: pointer;
  accent-color: var(--text);
  flex: 0 0 auto;
}
.inbox-row-main {
  flex: 1;
  min-width: 0;
}
.inbox-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}
.inbox-title-row > strong {
  min-width: min(100%, 280px);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.approval-rule-pill {
  padding: 2px 7px;
  font-size: 10px;
  cursor: help;
}
.approval-meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 9px;
  margin-top: 4px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.35;
}
.approval-meta-line span::before {
  content: "·";
  margin-right: 9px;
  color: var(--border-strong);
}
.approval-meta-line code {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}
.inbox-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 10px;
  margin-top: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}
.inbox-context-grid div {
  min-width: 0;
}
.inbox-context-grid span {
  display: block;
  margin-bottom: 2px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
}
.inbox-context-grid strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.inbox-review-note {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.4;
}
.inbox-review-note.important {
  color: var(--mk-warning);
}
.inbox-row-actions {
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .inbox-row {
    display: grid;
    grid-template-columns: auto 1fr;
  }
  .inbox-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.approval-icon {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  color: var(--mk-warning);
  background: var(--mk-warning-bg);
}
.approval-icon.primary {
  color: var(--primary);
  background: var(--primary-soft);
}
.approval-strip-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-left: 3px solid var(--mk-warning);
}
.approval-strip-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.approval-strip-title {
  min-width: min(100%, 260px);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.approval-expiry {
  color: var(--text-tertiary);
  font-size: 11.5px;
  white-space: nowrap;
}
.approval-strip-note,
.approval-strip-list {
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.4;
}
.approval-strip-note {
  padding-left: 36px;
}
.approval-strip-list {
  padding-left: 36px;
  overflow-wrap: anywhere;
}
.approval-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px 10px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.approval-context-grid.compact {
  margin-left: 36px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  padding: 8px 9px;
}
.approval-context-grid span {
  display: block;
  margin-bottom: 2px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0;
}
.approval-context-grid strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}
.approval-detail-panel {
  display: grid;
  gap: 10px;
  margin-left: 36px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.approval-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.approval-detail-head div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.approval-detail-head strong {
  color: var(--text);
  font-size: 12.5px;
}
.approval-detail-head span {
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.4;
}
.approval-detail-head code,
.approval-detail-foot code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}
.approval-detail-grid {
  padding: 0;
  background: transparent;
}
.approval-detail-foot,
.approval-detail-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--text-tertiary);
  font-size: 11.5px;
}
.approval-detail-foot strong {
  color: var(--text-secondary);
  font-weight: 650;
}
.approval-detail-items {
  display: grid;
  gap: 5px;
  padding-top: 2px;
}
.approval-detail-items div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.approval-detail-items span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .approval-strip-note,
  .approval-strip-list,
  .approval-context-grid.compact,
  .approval-detail-panel {
    margin-left: 0;
    padding-left: 0;
  }
  .approval-detail-panel {
    padding: 10px;
  }
  .approval-detail-head {
    display: grid;
  }
}

/* ─── Workspace settings ─────────────────────────────────────────────────── */
.workspace-page {
  display: block;
}

.workspace-page .card,
.workspace-page .workspace-panel,
.workspace-tab-shell {
  min-width: 0;
}

.workspace-settings-panel {
  display: grid;
  gap: 16px;
}

.workspace-panel,
.workspace-hero,
.workspace-tab-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.workspace-panel-icon,
.workspace-hero-icon,
.workspace-safety-icon,
.workspace-concept-number {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.workspace-label {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 650;
}

.workspace-count,
.workspace-role-text {
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.workspace-help-text {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.4;
}
.workspace-help-text.danger {
  color: var(--mk-danger);
}

.workspace-alert {
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 16px;
  font-weight: 550;
}

.workspace-alert.danger {
  background: var(--mk-danger-bg);
  color: var(--mk-danger);
}

.workspace-alert.success {
  background: var(--mk-success-bg);
  color: var(--mk-success);
}

.workspace-panel {
  overflow: hidden;
}

.workspace-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border);
}

.workspace-panel-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-secondary);
}

.workspace-panel-subtitle {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 4px;
}

.workspace-panel-body {
  padding: 16px;
}

.workspace-empty-state {
  color: var(--text-tertiary);
  font-size: 13px;
  line-height: 1.45;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.workspace-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  align-items: flex-start;
}

.workspace-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.workspace-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.workspace-hero-picker {
  display: grid;
  gap: 5px;
  min-width: min(360px, 100%);
  max-width: 460px;
}

.workspace-hero-picker select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  font-weight: 750;
  padding: 5px 34px 5px 9px;
  outline: none;
}

.workspace-hero-picker select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.workspace-hero-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--surface-3);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.workspace-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.45;
  margin-top: 5px;
}

.workspace-tabs {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}

.workspace-tab-shell {
  overflow: hidden;
}

.workspace-tab-content {
  display: grid;
  gap: 0;
  background: var(--surface);
}

.workspace-tab-content > .workspace-panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.workspace-tab-content > .workspace-panel + .workspace-panel {
  border-top: 1px solid var(--border);
}

.workspace-tab-content > .workspace-access-browser {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.workspace-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
  min-height: 40px;
  padding: 8px 11px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-weight: 700;
  text-align: left;
}

.workspace-tab:last-child {
  border-right: 0;
}

.workspace-tab.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--text);
}

.workspace-tab span:not(.workspace-tab-meta) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-tab-meta {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.workspace-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.workspace-summary-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 12px;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.workspace-summary-item:last-child {
  border-right: 0;
}

.workspace-summary-item span {
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 650;
}

.workspace-summary-item strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1;
}

.workspace-hero-stats,
.workspace-safety-grid,
.workspace-concept-strip,
.workspace-split {
  display: grid;
  gap: 10px;
}

.workspace-hero-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workspace-stat {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.workspace-stat-value {
  font-weight: 750;
  font-size: 18px;
  line-height: 1.1;
}

.workspace-stat-label {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.25;
  margin-top: 5px;
}

.workspace-safety-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.workspace-safety-tile,
.workspace-concept-step {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 13px;
}

.workspace-safety-tile.success {
  border-color: var(--border);
}

.workspace-safety-tile.warning {
  border-color: var(--border);
}

.workspace-safety-icon,
.workspace-concept-number {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-secondary);
  font-weight: 800;
  font-size: 12px;
}

.workspace-safety-title {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.workspace-safety-copy {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
}

.workspace-concept-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workspace-concept-step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.workspace-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.workspace-matrix {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.workspace-matrix th,
.workspace-matrix td {
  padding: 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
  font-size: 13px;
}

.workspace-matrix th {
  background: var(--surface-2);
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.workspace-matrix tr:last-child td {
  border-bottom: none;
}

.workspace-matrix-note {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.35;
}

.workspace-role-editor {
  display: grid;
  gap: 5px;
  justify-items: start;
}

.workspace-member-identity {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.workspace-member-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  text-align: left;
}

.workspace-member-button:not(:disabled):hover .workspace-member-name {
  color: var(--primary);
}

.workspace-member-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.workspace-member-button:disabled {
  cursor: default;
}

.workspace-member-profile {
  display: grid;
  gap: 14px;
}

.workspace-member-profile-card {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.workspace-member-profile-grid {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: start;
}

.workspace-member-company-list,
.workspace-profile-choice-list {
  display: grid;
  gap: 0;
  padding: 6px;
}

.workspace-member-company-row,
.workspace-profile-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  width: 100%;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  text-align: left;
}

.workspace-member-company-row + .workspace-member-company-row,
.workspace-profile-choice + .workspace-profile-choice {
  margin-top: 4px;
}

.workspace-member-company-row.active,
.workspace-profile-choice.active {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
}

.workspace-member-company-row strong,
.workspace-profile-choice strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  line-height: 1.3;
}

.workspace-member-company-row span span,
.workspace-profile-choice span span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
}

.workspace-member-company-row em {
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
  white-space: nowrap;
}

.workspace-profile-choice {
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
}

.workspace-profile-choice input {
  margin: 2px 0 0;
}

.workspace-member-name {
  display: block;
  color: var(--text);
  font-weight: 650;
  font-size: 13px;
}

.workspace-member-profile-actions,
.workspace-member-profile-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.workspace-member-profile-actions {
  justify-content: flex-end;
}

.workspace-member-profile-footer {
  padding: 0 2px;
}

.workspace-member-username {
  display: block;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
  margin-top: 2px;
}

.workspace-avatar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 0;
  background: var(--avatar-bg, var(--primary));
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  box-shadow: none;
}

.workspace-muted-text {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
}

.workspace-lines {
  display: grid;
  gap: 6px;
}

.workspace-line {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.workspace-line strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.workspace-line span {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
}

.workspace-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.workspace-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 10px;
  align-items: end;
  margin-bottom: 16px;
}

.workspace-form-grid.drawer-form {
  margin-bottom: 0;
}

.workspace-profile-form {
  display: grid;
  gap: 14px;
}

.workspace-profile-form .workspace-form-grid {
  margin-bottom: 0;
}

.workspace-section-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.workspace-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.workspace-access-editor-grid {
  display: grid;
  grid-template-columns: minmax(150px, .72fr) minmax(190px, .92fr) minmax(320px, 1.55fr);
  gap: 10px;
  align-items: start;
}

.workspace-access-pane {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.workspace-access-pane-head {
  padding: 10px 11px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.workspace-access-pane-head h3 {
  font-size: 13px;
  line-height: 1.3;
}

.workspace-access-pane-head span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
}

.workspace-compact-check-list {
  display: grid;
  gap: 0;
  padding: 6px;
}

.workspace-compact-check-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
  padding: 8px 7px;
  color: var(--text-secondary);
  font-size: 12px;
}

.workspace-compact-check-row + .workspace-compact-check-row {
  border-top: 1px solid var(--border);
}

.workspace-compact-check-row input {
  margin: 2px 0 0;
}

.workspace-compact-check-row strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

.workspace-compact-check-row span span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
}

.workspace-compact-check-row.capability {
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 7px;
}

.workspace-compact-check-row.locked {
  background: var(--surface-2);
}

.workspace-compact-check-row em {
  align-self: start;
  margin-top: 1px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-style: normal;
  line-height: 1.2;
  white-space: nowrap;
}

.workspace-capability-scroll {
  max-height: min(48vh, 520px);
  overflow: auto;
}

.workspace-compact-product {
  border-bottom: 1px solid var(--border);
}

.workspace-compact-product:last-child {
  border-bottom: 0;
}

.workspace-compact-product h4 {
  margin: 0;
  padding: 8px 12px 3px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.workspace-compact-product .workspace-compact-check-list {
  padding-top: 3px;
}

.workspace-capability-module-list {
  display: grid;
  gap: 8px;
  padding: 6px 8px 10px;
}

.workspace-capability-module {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}

.workspace-capability-module-head {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.workspace-capability-module-head strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.workspace-capability-module-head span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
}

.workspace-capability-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workspace-capability-lane {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  border-right: 1px solid var(--border);
}

.workspace-capability-lane:last-child {
  border-right: 0;
}

.workspace-capability-lane input {
  margin: 2px 0 0;
}

.workspace-capability-lane strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
}

.workspace-capability-lane span span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.35;
}

.workspace-capability-lane em {
  display: inline-block;
  width: fit-content;
  margin-top: 5px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-style: normal;
  line-height: 1.2;
}

.workspace-capability-lane.write em {
  color: #9f1239;
  border-color: #fecdd3;
  background: #fff1f2;
}

.workspace-capability-lane.propose em {
  color: #92400e;
  border-color: #fde68a;
  background: #fffbeb;
}

.workspace-capability-lane.locked,
.workspace-capability-lane.surface-blocked {
  background: var(--surface-2);
}

.workspace-capability-lane.surface-blocked {
  opacity: .65;
}

.workspace-tool-preview {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.workspace-access-pane-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.workspace-access-pane-summary div {
  min-width: 0;
  padding: 8px;
  border-right: 1px solid var(--border);
}

.workspace-access-pane-summary div:last-child {
  border-right: 0;
}

.workspace-access-pane-summary strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
}

.workspace-access-pane-summary span {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 10.5px;
  line-height: 1.25;
}

.workspace-checkbox-stack {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.workspace-checkbox-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 9px 10px;
  color: var(--text-secondary);
  font-size: 13px;
}

.workspace-checkbox-row input {
  margin: 2px 0 0;
}

.workspace-checkbox-row strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.workspace-checkbox-row span span {
  display: block;
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 2px;
}

.workspace-capability-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 12px;
  margin-top: 8px;
}

.workspace-capability-group {
  min-width: 0;
}

.workspace-capability-group h3 {
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.workspace-form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.workspace-danger-zone .workspace-panel-head {
  border-bottom: 0;
}

.workspace-danger-zone .workspace-panel-body {
  padding-top: 0;
}

.workspace-danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0 0;
  border-top: 1px solid var(--border);
}

.workspace-danger-row strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.workspace-danger-row span {
  display: block;
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 2px;
}

.workspace-delete-confirm {
  display: grid;
  gap: 14px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.workspace-delete-confirm p {
  margin: 0;
}

.workspace-delete-list {
  margin: 0;
  padding-left: 18px;
}

.workspace-delete-list li + li {
  margin-top: 6px;
}

.workspace-inline-note {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.workspace-inline-note strong {
  display: block;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 3px;
}

.workspace-access-browser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
  gap: 14px;
  align-items: start;
}

.workspace-access-index,
.workspace-profile-detail {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.workspace-access-index-head,
.workspace-profile-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border);
}

.workspace-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}

.workspace-profile-stats .workspace-stat {
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}

.workspace-profile-stats .workspace-stat:last-child {
  border-right: 0;
}

.workspace-profile-filter {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.workspace-profile-list {
  display: grid;
}

.workspace-profile-row {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(190px, .85fr) 92px 128px;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-align: left;
}

.workspace-profile-row:last-child {
  border-bottom: 0;
}

.workspace-profile-row:hover {
  background: var(--surface-2);
}

.workspace-profile-row.active {
  background: var(--surface-2);
  box-shadow: inset 3px 0 0 var(--text-secondary);
}

.workspace-profile-row-main,
.workspace-profile-row-main strong,
.workspace-profile-row-main span,
.workspace-profile-row-access,
.workspace-profile-row-meta {
  min-width: 0;
}

.workspace-profile-row-main strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.3;
}

.workspace-profile-row-main span,
.workspace-profile-row-access,
.workspace-profile-row-meta {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.35;
}

.workspace-profile-row-main span {
  display: block;
  margin-top: 3px;
}

.workspace-profile-detail {
  position: sticky;
  top: 14px;
}

.workspace-profile-detail-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.workspace-profile-detail-section {
  display: grid;
  gap: 10px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--border);
}

.workspace-profile-detail-section:last-child {
  border-bottom: 0;
}

.workspace-profile-detail-section h3 {
  font-size: 13px;
}

.workspace-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.workspace-definition-list {
  display: grid;
  gap: 9px;
}

.workspace-definition-list > div {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.workspace-definition-list span {
  color: var(--text-tertiary);
  font-size: 11px;
  line-height: 1.4;
}

.workspace-definition-list strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.4;
}

.workspace-definition-count {
  cursor: default;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  width: max-content;
}

.workspace-definition-list em {
  display: block;
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.workspace-danger-action {
  color: var(--mk-danger);
}

.workspace-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  justify-content: flex-end;
  background: rgba(17, 24, 39, .22);
}

.workspace-drawer {
  width: min(100vw, 960px);
  height: 100vh;
  min-width: 0;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -18px 0 48px rgba(15, 23, 42, .12);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.workspace-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.workspace-drawer-body {
  overflow: auto;
  padding: 18px;
}

.workspace-form-grid.compact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.workspace-form-grid.member-setup {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.workspace-form-wide {
  grid-column: 1 / -1;
}

.workspace-member-setup-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.workspace-member-setup-shell .workspace-form-grid {
  margin-bottom: 0;
}

.workspace-member-assurance {
  border-left: 3px solid var(--mk-success);
  padding-left: 13px;
}

.workspace-member-assurance-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 750;
}

.workspace-member-assurance-copy {
  color: var(--text-tertiary);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 6px;
}

.workspace-member-assurance-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.workspace-member-assurance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 12px;
}

.workspace-list-block {
  display: grid;
  gap: 0;
}

.workspace-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  min-width: 0;
}

.workspace-row:first-child {
  border-top: none;
}

.workspace-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}

.workspace-row-actions.compact {
  justify-content: flex-start;
  margin-left: 0;
}

.workspace-details {
  margin-bottom: 16px;
}

.workspace-details summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 12px;
}

.workspace-details .workspace-form-grid {
  margin-top: 12px;
}

.workspace-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-security-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 11px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.workspace-security-note.safe {
  border-color: var(--border);
  background: var(--surface-2);
}

@media (max-width: 1000px) {
  .workspace-page {
    grid-template-columns: 1fr;
  }

  .workspace-hero,
  .workspace-access-grid,
  .workspace-access-editor-grid,
  .workspace-access-browser,
  .workspace-safety-grid,
  .workspace-concept-strip,
  .workspace-summary-grid,
  .workspace-member-profile-card,
  .workspace-member-profile-grid,
  .workspace-member-setup-shell,
  .workspace-split {
    grid-template-columns: 1fr;
  }

  .workspace-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-profile-detail {
    position: static;
  }

  .workspace-capability-lanes {
    grid-template-columns: 1fr;
  }

  .workspace-capability-lane {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .workspace-capability-lane:last-child {
    border-bottom: 0;
  }

  .workspace-summary-item {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .workspace-summary-item:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 560px) {
  .workspace-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-hero-actions {
    justify-content: flex-start;
  }

  .workspace-hero-picker {
    min-width: 0;
    max-width: none;
  }

  .workspace-hero-stats {
    grid-template-columns: 1fr;
  }

  .workspace-tabs {
    flex-direction: column;
  }

  .workspace-tab {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .workspace-tab:last-child {
    border-bottom: 0;
  }

  .workspace-danger-row {
    align-items: stretch;
    flex-direction: column;
  }

  .workspace-profile-stats,
  .workspace-profile-row,
  .workspace-definition-list > div {
    grid-template-columns: 1fr;
  }

  .workspace-profile-stats .workspace-stat {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .workspace-profile-stats .workspace-stat:last-child {
    border-bottom: 0;
  }

  .workspace-panel-head,
  .workspace-row,
  .workspace-access-index-head,
  .workspace-profile-detail-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .workspace-row-actions {
    justify-content: flex-start;
    margin-left: 0;
  }
}

/* Headings */
h1,h2,h3,h4 { margin: 0; letter-spacing: 0; color: var(--text); }
h1 { font-size: 22px; font-weight: 600; letter-spacing: 0; }
h2 { font-size: 18px; font-weight: 600; }
h3 { font-size: 15px; font-weight: 600; }
.muted { color: var(--text-tertiary); }
.kbd {
  display: inline-flex; align-items: center; padding: 1px 5px;
  border: 1px solid var(--border-strong); border-bottom-width: 2px;
  border-radius: 4px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-secondary); background: var(--surface);
}

/* Agent glyph */
.agent-glyph {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px; letter-spacing: 0;
  flex-shrink: 0;
  color: white;
}
.agent-glyph.lg { width: 36px; height: 36px; font-size: 13px; border-radius: 10px; }
.agent-glyph.sm { width: 22px; height: 22px; font-size: 10px; border-radius: 6px; }

/* Agent chip (token style) */
.agent-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: 12px; font-weight: 600;
  border: 1px solid transparent;
}
.agent-chip .agent-glyph.sm { width: 18px; height: 18px; border-radius: 999px; font-size: 9px; }

.product-mark {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--product-color, var(--primary)) 14%, var(--surface));
  color: var(--product-color, var(--primary));
  border: 1px solid color-mix(in srgb, var(--product-color, var(--primary)) 24%, var(--border));
}
.product-mark.lg {
  width: 40px;
  height: 40px;
}
.product-scope-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.roadmap-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  opacity: .72;
  border-style: dashed;
}

/* utility */
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.flex-1 { flex: 1; min-width: 0; }
.hide-sm { }
@media (max-width: 720px) {
  .hide-sm { display: none !important; }
}

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp var(--motion-soft) both; }

@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes selection-pop-in {
  from { opacity: 0; transform: translate(-50%, -4px) scale(0.98); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes docs-row-highlight {
  0% { background: color-mix(in srgb, var(--primary-soft) 78%, var(--surface)); }
  100% { background: var(--surface); }
}

@keyframes docs-row-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

@keyframes docs-status-pulse {
  0%, 100% { opacity: .45; transform: scale(.82); }
  45% { opacity: 1; transform: scale(1); }
}

@keyframes md-table-cell-copied {
  0% { background: color-mix(in srgb, var(--mk-success) 18%, var(--surface)); }
  100% { background: transparent; }
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pulse-dot { animation: pulse 1.2s ease-in-out infinite; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  display: inline-block;
  animation: spin var(--mk-motion-spinner, .7s) linear infinite;
  flex-shrink: 0;
}

@keyframes shimmer {
  0% { background-position: 0 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, var(--surface-3) 0%, var(--border) 50%, var(--surface-3) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
  border-radius: 6px;
}

/* Mono number */
.num { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

/* ─── Users & agent grants table ───────────────────────────────────────── */
.grants-table {
  overflow-x: auto;
}

.grants-row {
  display: grid;
  /* user · 11 toggle columns · fixed actions column. Pinning the last
     column to a fixed width (instead of `auto`) ensures the toggle
     columns are the same width in BOTH the header and the data row —
     `auto` gave us 0px in the header and ~110px in the row, which
     skewed the toggles off their column labels. The specialist
     agents are AP, AR, Sales, Cash, Inventory, Reporting, Studio,
     Payroll, Workforce, Talent, HR — see
     admin-page.jsx `shortCodes`. Update both lists when adding agents. */
  grid-template-columns:
    minmax(200px, 1.4fr) repeat(11, minmax(70px, 1fr)) 116px;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  min-width: 1120px;
}
.grants-row:last-child { border-bottom: none; }

.grants-head {
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0;
  padding-top: 11px;
  padding-bottom: 11px;
}

.grants-col-header {
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

.grants-toggle-cell {
  display: flex; align-items: center; justify-content: center;
}

/* ─── Documents page ───────────────────────────────────────────────────── */
.docs-table-card {
  overflow: hidden;
}
.docs-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 68px 92px minmax(92px, auto);
  align-items: center;
  gap: 10px;
  /* 16px horizontal padding matches the inbox + memory card rows so a
     user comparing the three pages doesn't see a 2px right-shift on
     Documents. The vertical 12px is the conventional row height the
     other list surfaces use. */
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition:
    background-color var(--motion-fast),
    box-shadow var(--motion-fast);
}
.docs-row:not(.docs-head):hover {
  background: color-mix(in srgb, var(--primary-soft) 18%, var(--surface));
}
.docs-row-recent {
  animation: docs-row-highlight var(--mk-motion-toast, 2800ms) ease-out both;
}
.docs-row[data-sync-state="saving"],
.docs-row[data-sync-state="syncing"],
.docs-row[data-sync-state="retrying"] {
  box-shadow: inset 2px 0 0 var(--primary);
}
.docs-row[data-sync-state="saving"]::after,
.docs-row[data-sync-state="syncing"]::after,
.docs-row[data-sync-state="retrying"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 8%, transparent), transparent);
  animation: docs-row-sweep var(--mk-motion-skeleton, 1150ms) ease-in-out infinite;
  pointer-events: none;
}
.docs-row[data-sync-state="error"] {
  box-shadow: inset 2px 0 0 var(--mk-danger);
}
.docs-row > * {
  min-width: 0;
}
.docs-row:last-child { border-bottom: none; }
.docs-head {
  background: var(--rail-bg);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0;
}
.docs-doccell {
  align-items: center;
  min-width: 0;
}
.docs-docmain {
  min-width: 0;
  max-width: 100%;
}
.docs-title {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.docs-title-button {
  width: 100%;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  cursor: text;
}
.docs-title-button:hover .docs-title,
.docs-title-button:focus-visible .docs-title {
  color: var(--text);
}
.docs-title-button .docs-title {
  min-width: 0;
}
.docs-title-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 5px;
}
.docs-title-edit-icon {
  flex: 0 0 auto;
  color: var(--text-tertiary);
  opacity: 0;
  transition: opacity var(--motion-fast), color var(--motion-fast);
}
.docs-row:hover .docs-title-edit-icon,
.docs-title-button:focus-visible .docs-title-edit-icon {
  opacity: 1;
}
.docs-meta {
  display: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  margin-top: 2px;
}
.docs-row-status {
  margin-top: 4px;
  min-width: 0;
}
.docs-inline-save-status {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.3;
}
.docs-inline-save-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  flex: none;
}
.docs-inline-save-status.saving,
.docs-inline-save-status.syncing,
.docs-inline-save-status.retrying {
  color: var(--primary);
}
.docs-inline-save-status.saving .docs-inline-save-status-dot,
.docs-inline-save-status.syncing .docs-inline-save-status-dot,
.docs-inline-save-status.retrying .docs-inline-save-status-dot {
  animation: docs-status-pulse var(--mk-motion-skeleton, 1150ms) ease-in-out infinite;
}
.docs-inline-save-status.saved {
  color: var(--mk-success);
}
.docs-inline-save-status.error {
  color: var(--mk-danger);
}
.docs-inline-save-status-detail {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  opacity: .86;
}
.docs-inline-save-status button {
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.docs-inline-save-status button:hover {
  background: var(--primary-soft);
}
.docs-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: max-content;
  gap: 4px;
}
.docs-action-btn {
  width: 28px;
  height: 28px;
  min-height: 28px;
  border-radius: 7px;
}
.docs-action-btn[data-state="busy"] {
  color: var(--primary);
  cursor: progress;
}
.docs-product-logo {
  display: block;
  object-fit: contain;
  border-radius: 5px;
}
.docs-pdf-logo {
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  background: #e53935;
  color: #fff;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
}
.docs-pdf-logo::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 6px solid rgba(255, 255, 255, .88);
  border-left: 6px solid rgba(140, 0, 0, .22);
  border-bottom-left-radius: 2px;
}
.docs-file-icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.docs-file-icon-chart {
  color: #111827;
  background: #fff;
}
.docs-file-icon-generic {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: var(--mk-blue-200);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0;
}
.docs-delete-btn {
  color: var(--mk-danger);
}
.docs-delete-btn:hover {
  color: var(--mk-danger);
  background: var(--mk-danger-bg);
}
.generated-artifact-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--mk-blue-200);
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0;
}
.generated-artifact-icon.compact {
  width: 36px;
  height: 36px;
}
@media (max-width: 720px) {
  .docs-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 11px 12px;
  }
  .docs-meta {
    display: block;
  }
  .docs-actions {
    gap: 4px;
  }
  .docs-action-btn {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }
}

/* Dense audit-style tables */
.dense-table {
  overflow-x: auto !important;
}
.dense-table-row {
  min-width: 920px;
}
@media (max-width: 720px) {
  .dense-filter-grid,
  .audit-filter-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .dense-filter-grid > :first-child,
  .audit-filter-grid > :first-child {
    grid-column: 1 / -1;
  }
  .grants-row {
    min-width: 1120px;
  }
}

/* ─── Account switcher in the topbar ───────────────────────────────────── */
.account-switcher {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 36px;
  padding: 4px 10px 4px 6px;
  background: transparent; border: 1px solid transparent;
  border-radius: 7px;
  font-family: inherit; cursor: pointer;
  color: var(--text);
  max-width: 360px;
}
.account-switcher:hover { background: var(--surface-3); }
.account-mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; flex-shrink: 0;
}
.account-label {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
  line-height: 1.2;
}
.account-label strong { font-weight: 600; font-size: 13.5px; }
.account-label small { font-size: 11px; }

.account-menu {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08));
  padding: 4px;
  z-index: var(--z-popover);
  display: flex; flex-direction: column; gap: 1px;
  min-width: 280px;
}
.account-menu .menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px; color: var(--text);
  background: transparent; border: none; cursor: pointer; width: 100%;
  text-align: left;
}
.account-menu .menu-item:hover { background: var(--surface-3); }
.account-menu .menu-item.active { background: var(--primary-soft); color: var(--primary); }
.account-menu .menu-divider {
  height: 1px; background: var(--border); margin: 4px 0;
}

/* ─── Markdown body in agent bubbles ───────────────────────────────────── */
.md-body > :first-child { margin-top: 0; }
.md-body > :last-child  { margin-bottom: 0; }
.md-body p { margin: 0 0 8px 0; }
.md-body strong { font-weight: 600; }
.md-body em { font-style: italic; }
.md-body ul, .md-body ol { margin: 6px 0 8px 0; padding-left: 22px; }
.md-body li { margin: 2px 0; }
.md-body li > p { margin: 0; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4 {
  font-weight: 600; margin: 14px 0 6px 0; line-height: 1.3;
}
.md-body h1 { font-size: 17px; }
.md-body h2 { font-size: 15px; }
.md-body h3 { font-size: 14px; }
.md-body h4 { font-size: 13px; }
.md-body code {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--surface-2);
  padding: 1px 5px; border-radius: 4px;
}
.md-body pre {
  font-family: var(--font-mono); font-size: 12.5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px;
  overflow-x: auto; margin: 8px 0;
}
.md-body pre code { background: transparent; padding: 0; border-radius: 0; }
.md-body blockquote {
  margin: 6px 0 10px 0; padding: 4px 12px;
  border-left: 3px solid var(--border-strong);
  color: var(--text-secondary);
}
.md-body a { color: var(--primary); text-decoration: underline; }
.md-body a:hover { color: var(--mk-blue-700); }
.md-body hr {
  border: 0; border-top: 1px solid var(--border);
  margin: 12px 0;
}
.md-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  margin: 8px 0;
  border-radius: 8px;
  position: relative;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.md-table-wrap::-webkit-scrollbar {
  display: none;
}
.md-body table {
  border-collapse: collapse; margin: 8px 0; font-size: 13px;
}
.md-table-wrap table {
  margin: 0;
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}
.md-table-copy-btn {
  position: sticky;
  top: 6px;
  right: 6px;
  float: right;
  z-index: 2;
  min-width: 42px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text-secondary);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--motion-fast),
    color var(--motion-fast),
    border-color var(--motion-fast),
    background var(--motion-fast),
    transform var(--motion-fast);
}
.md-table-copy-btn::before { content: "Copy"; }
.md-table-copy-btn[data-state="copying"]::before { content: "..."; }
.md-table-copy-btn[data-state="copied"]::before { content: "Copied"; }
.md-table-copy-btn[data-state="error"]::before { content: "Retry"; }
.md-table-wrap:hover .md-table-copy-btn,
.md-table-copy-btn:focus-visible,
.md-table-copy-btn[data-state="copying"],
.md-table-copy-btn[data-state="copied"],
.md-table-copy-btn[data-state="error"] {
  opacity: 1;
  pointer-events: auto;
}
.md-table-copy-btn:hover,
.md-table-copy-btn:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface);
  outline: none;
}
.md-table-copy-btn:active:not(:disabled) {
  transform: translateY(var(--mk-interaction-press-y, 1px)) scale(var(--mk-interaction-press-scale, 0.985));
}
.md-table-copy-btn[data-state="copied"] {
  color: var(--mk-success);
  border-color: var(--mk-success);
}
.md-table-copy-btn[data-state="error"] {
  color: var(--mk-danger);
  border-color: var(--mk-danger);
}
@media (hover: none) {
  .md-table-copy-btn {
    opacity: .92;
    pointer-events: auto;
  }
}
.md-body th, .md-body td {
  border: 1px solid var(--border);
  padding: 6px 10px; text-align: left;
  overflow-wrap: normal;
  word-break: normal;
}
.md-body tbody tr:hover td {
  background: color-mix(in srgb, var(--primary-soft) 18%, transparent);
}
.md-table-copied td {
  animation: md-table-cell-copied 900ms ease-out both;
}
.md-body th.md-num, .md-body td.md-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-width: 112px;
  white-space: nowrap;
}
.md-body th { background: var(--surface-2); font-weight: 600; }

.answer-sources {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  min-width: 0;
}

.answer-sources-label {
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
}

.answer-source-pill {
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 220px);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 10.5px;
  line-height: 1.35;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.answer-source-pill:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.chart-pack {
  padding: 14px;
  display: grid;
  gap: 14px;
  overflow: hidden;
}

.chart-pack-single {
  gap: 0;
}

.chart-pack-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.chart-pack-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  min-width: fit-content;
}

.chart-pack-single > .chart-pack-actions {
  margin-bottom: 10px;
}

.chart-pack-error {
  color: var(--mk-danger);
  font-size: 11.5px;
  line-height: 1.3;
}

.chart-pack-sheets-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(15, 157, 88, 0.12);
  color: #0b7f46;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.chart-pack-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.chart-pack-summary {
  max-width: 680px;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.chart-panel,
.chart-simulator {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.chart-panel {
  position: relative;
}

.chart-panel-flat {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.chart-panel-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: flex;
  gap: 4px;
  opacity: .82;
  transition: opacity .15s ease;
}

.chart-panel:hover .chart-panel-actions,
.chart-panel:focus-within .chart-panel-actions {
  opacity: 1;
}

.chart-action-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text-secondary);
  box-shadow: 0 5px 14px rgba(31, 37, 48, .08);
  cursor: pointer;
}

.chart-action-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--surface);
}

.chart-canvas,
.chart-empty {
  width: 100%;
  min-height: 260px;
}

.recharts-canvas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 12px 8px;
}

.chart-native-head {
  flex: 0 0 auto;
  min-width: 0;
}

.chart-native-title {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.chart-native-subtitle {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11.5px;
  line-height: 1.35;
}

.chart-native-body {
  flex: 1 1 auto;
  min-height: 0;
}

.chart-tooltip {
  min-width: 150px;
  padding: 8px 9px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(31, 37, 48, .14);
  color: var(--text);
  font-size: 11.5px;
}

.chart-tooltip-title {
  margin-bottom: 5px;
  color: var(--text-secondary);
  font-weight: 600;
}

.chart-tooltip-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 7px;
  align-items: center;
}

.chart-tooltip-row span {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.chart-tooltip-row em {
  color: var(--text-tertiary);
  font-style: normal;
}

.chart-tooltip-row strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chart-empty {
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--surface-2);
  color: var(--text-tertiary);
  font-size: 12px;
  text-align: center;
}

.chart-panel-foot {
  display: grid;
  gap: 4px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 11.5px;
  color: var(--text-secondary);
}

.chart-panel-foot span {
  font-size: 10.5px;
  color: var(--text-tertiary);
  font-weight: 700;
  text-transform: uppercase;
}

.chart-panel-foot strong {
  color: var(--text);
  font-weight: 600;
}

.chart-panel-foot em {
  color: var(--text-tertiary);
  font-style: normal;
}

.chart-panel-foot .chart-export-status {
  color: var(--primary);
  font-weight: 600;
}

.chart-simulator {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

.chart-simulator-controls {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 14px;
  border-right: 1px solid var(--border);
  background: var(--surface-2);
}

.chart-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 10px;
  align-items: center;
  font-size: 12px;
  color: var(--text-secondary);
}

.chart-control strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.chart-control input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--primary);
}

.chart-sim-result {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.chart-sim-result span {
  color: var(--text-tertiary);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
}

.chart-sim-result strong {
  color: var(--text);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
  .chart-pack-head,
  .chart-simulator {
    display: grid;
  }
  .chart-panel-actions {
    opacity: 1;
  }
  .chart-simulator-controls {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

.home-page {
  width: 100%;
}

.home-apps {
  margin-bottom: 22px;
}

.home-section-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.home-section-head h2 {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
}

.home-app-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-app-tile {
  min-height: 78px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.home-app-tile:hover,
.home-app-tile:focus-visible {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  outline: none;
}

.home-app-tile > svg {
  justify-self: end;
  color: var(--text-secondary);
}

.home-app-logo,
.home-item-icon {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  overflow: hidden;
  flex: 0 0 auto;
}

.home-app-logo img,
.home-item-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.home-app-copy,
.home-item-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.home-app-copy strong,
.home-item-copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--text);
}

.home-app-copy small,
.home-item-copy small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
}

.home-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr);
  gap: 20px;
  align-items: start;
}

.home-work-section {
  min-width: 0;
}

.home-work-section.favorites .home-section-head {
  padding-right: 2px;
}

.home-filter-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  margin-left: auto;
  white-space: nowrap;
}

.home-filter-tabs button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.home-filter-tabs button:hover {
  background: var(--surface);
  color: var(--text);
}

.home-filter-tabs button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

.home-item-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.home-item-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}

.home-item-row:last-child {
  border-bottom: 0;
}

.home-item-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.home-item-main:hover,
.home-item-main:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.home-item-main:disabled {
  cursor: progress;
  opacity: .72;
}

.home-favorite-button {
  width: 38px;
  min-height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
}

.home-favorite-button:hover,
.home-favorite-button:focus-visible {
  background: var(--surface-2);
  color: var(--primary);
  outline: none;
}

.home-favorite-button.is-favorite {
  color: var(--primary);
}

.home-favorite-button.is-favorite svg {
  fill: currentColor;
}

.home-empty.empty-state {
  min-height: 124px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

@media (max-width: 1080px) {
  .home-work-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 16px;
  }
}

@media (max-width: 960px) {
  .home-app-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-work-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

@media (max-width: 720px) {
  .home-page {
    padding-bottom: 8px;
  }

  .home-apps {
    margin-bottom: 20px;
  }

  .home-app-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .home-app-tile {
    min-height: 66px;
    grid-template-columns: 36px minmax(0, 1fr) 18px;
    padding: 11px 12px;
  }

  .home-section-head {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
  }

  .home-filter-tabs {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: auto;
  }

  .home-filter-tabs button {
    min-width: 0;
    padding: 0 6px;
  }

  .home-item-row {
    min-height: 56px;
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .home-item-main {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 10px;
  }

  .home-favorite-button {
    width: 42px;
  }
}

@media (max-width: 380px) {
  .home-filter-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}