index.css

@import "tailwindcss";
@import "@mdxeditor/editor/style.css";

/* Bundled icon-only fallback so terminals show Nerd Font glyphs (powerline,
   devicons, etc.) regardless of which base font the user picks. The font is
   referenced near the end of the fontFamily fallback chain composed by
   composeFontFamilyStack() in infrastructure/config/cjkFonts.ts — base text
   comes from the user's chosen font, missing PUA glyphs fall through to
   this face.

   Source: https://github.com/ryanoasis/nerd-fonts (NerdFontsSymbolsOnly,
   v3.4.0). License: MIT — see public/fonts/SymbolsNerdFont-LICENSE.txt. */
@font-face {
  font-family: "Symbols Nerd Font Mono";
  /* Absolute path resolves against the document origin in both dev
     (http://localhost:5173) and packaged (app://netcatty), regardless of
     where the bundled CSS file ends up. A relative ./fonts/... would be
     resolved against dist/assets/index-*.css in production and 404. */
  src: url("/fonts/SymbolsNerdFontMono-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* Bundled true-monospace CJK fallback. macOS ships only proportional CJK
   fonts (PingFang, Hiragino) whose glyphs aren't designed to fit a
   terminal's 2x cell grid — see #931. Sarasa Mono SC (Iosevka + Source
   Han Sans, OFL-1.1) is a 2:1 metrically-correct CJK monospace and
   becomes the per-OS default + per-Latin-font recommended pairing in
   cjkFonts.ts. Subsetted woff2 (~4.8 MB) covers ASCII, CJK Unified
   Ideographs (main block), Hiragana/Katakana, common punctuation and
   symbols; rarer Ext-A/B characters fall through to the system fallback
   stack.

   Source: https://github.com/be5invis/Sarasa-Gothic (v1.0.37, OFL-1.1).
   License: see public/fonts/SarasaMono-LICENSE.txt. */
@font-face {
  font-family: "Sarasa Mono SC";
  src: url("/fonts/SarasaMonoSC-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Bundled flag-emoji subset of Noto Color Emoji (COLR, ~820 KB). Windows
   system fonts omit flag glyphs and show ISO country codes (HK, US, …)
   instead of 🇭🇰 🇺🇸 — see #1604. unicode-range limits this face to
   regional-indicator codepoints so spaces and Latin text stay on the UI
   sans stack.

   Source: subset of https://github.com/googlefonts/noto-emoji (flagsonly).
   License: OFL-1.1 — see public/fonts/NotoColorEmojiFlags-LICENSE.txt. */
@font-face {
  font-family: "Noto Color Emoji Flags";
  src: url("/fonts/noto-color-emoji-flags.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF;
}

/* ============================================
   Tailwind CSS v4 Theme Configuration
   ============================================ */
@theme {
  /* Default border color - ensures 'border' class uses theme color instead of currentColor */
  --default-border-color: var(--color-border);

  /* Colors - mapped from CSS variables */
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  /* Border Radius */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* Fonts */
  --font-sans: "Mona Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Animations */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-fade-in: fade-in 0.2s ease-out;

  @keyframes accordion-down {
    from {
      height: 0;
    }

    to {
      height: var(--radix-collapsible-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-collapsible-content-height);
    }

    to {
      height: 0;
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

}

/* Windows: bundled flag font ahead of Mona Sans so host
   labels render flag icons instead of ISO country codes (#1589, #1604). */
html.platform-win32 {
  --font-sans: "Noto Color Emoji Flags", "Mona Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

@keyframes top-tab-enter {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.top-tab-enter {
  animation: top-tab-enter 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes netcatty-lazy-fade-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.netcatty-lazy-fade-in {
  animation: netcatty-lazy-fade-in 160ms ease-out both;
}

.settings-window button:not(:disabled),
.settings-window [role="button"]:not([aria-disabled="true"]),
.settings-window [role="switch"]:not([aria-disabled="true"]),
.settings-window [data-slot="tabs-trigger"]:not([data-disabled]),
.settings-window [data-slot="select-trigger"]:not([data-disabled]) {
  cursor: pointer;
}

@keyframes settings-search-highlight {
  0% {
    background-color: hsl(var(--primary) / 0.22);
    box-shadow: 0 0 0 1px hsl(var(--primary) / 0.35);
  }
  100% {
    background-color: transparent;
    box-shadow: 0 0 0 1px transparent;
  }
}

.settings-search-highlight {
  animation: settings-search-highlight 1.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .settings-search-highlight {
    animation: none;
    background-color: hsl(var(--primary) / 0.14);
    box-shadow: 0 0 0 1px hsl(var(--primary) / 0.28);
  }
}

.top-tab-root-label {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  max-width: 4.5rem;
  /* Avoid line-height:1 clipping CJK under overflow:hidden on h-7 tabs. */
  line-height: 1.25rem;
  opacity: 1;
  transition:
    max-width 220ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 220ms ease,
    margin 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.top-tab-root-label-compact {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
}

.top-tab-host-tree-toggle-slot {
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  transition:
    width 220ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 220ms ease;
  width: 0;
  opacity: 0;
}

.top-tab-host-tree-toggle-slot[data-visible='true'] {
  width: 1.75rem;
  opacity: 1;
}

.top-tab-host-tree-gutter {
  pointer-events: none;
}

.top-tab-host-tree-gutter-exit {
  transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.terminal-topbar {
  container-type: inline-size;
}

.terminal-title-cluster {
  min-width: 8rem;
}

@container (max-width: 760px) {
  .terminal-server-stats {
    display: none;
  }
}

@container (max-width: 420px) {
  .terminal-title-cluster {
    min-width: 0;
  }
}

/*
 * System Manager sub-tab bar.
 * Icon-only is toggled by JS when labeled tabs actually overflow the bar
 * (class --icon-only). Horizontal scroll remains for extreme narrow widths.
 */
.system-manager-tab-bar {
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.system-manager-tab-bar::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.system-manager-tab {
  flex-shrink: 0;
  white-space: nowrap;
}

.system-manager-tab-bar--icon-only .system-manager-tab-label {
  display: none;
}

.system-manager-tab-bar--icon-only .system-manager-tab {
  gap: 0;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.host-tree-notes-scroll {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.28) transparent;
}

.host-tree-notes-scroll::-webkit-scrollbar {
  width: 8px;
}

.host-tree-notes-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.host-tree-notes-scroll::-webkit-scrollbar-thumb {
  min-height: 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  background-color: hsl(var(--muted-foreground) / 0.18);
  background-clip: content-box;
}

.host-tree-notes-scroll:hover::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.36);
}

.vault-drop-indicator-row {
  position: relative;
}

[data-vault-reorder-grid="true"] {
  will-change: transform;
  transition-property: opacity, box-shadow, border-color, background-color;
  transition-duration: 150ms;
}

[data-vault-reorder-dragging="true"] {
  opacity: 0.45;
}

.vault-drop-indicator-row::before,
.vault-drop-indicator-row::after {
  content: "";
  position: absolute;
  left: var(--vault-drop-indicator-left, 0.5rem);
  right: var(--vault-drop-indicator-right, 0.5rem);
  z-index: 30;
  height: 2px;
  border-radius: 999px;
  background: hsl(var(--primary));
  box-shadow: 0 0 0 1px hsl(var(--background)), 0 0 12px hsl(var(--primary) / 0.36);
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0.96);
  transition: opacity 90ms ease, transform 140ms cubic-bezier(0.2, 0, 0, 1);
}

.vault-drop-indicator-row::before {
  top: -1px;
}

.vault-drop-indicator-row::after {
  bottom: -1px;
}

.vault-drop-indicator-row[data-vault-drop-axis="x"]::before,
.vault-drop-indicator-row[data-vault-drop-axis="x"]::after {
  top: var(--vault-drop-indicator-top, 0.5rem);
  bottom: var(--vault-drop-indicator-bottom, 0.5rem);
  left: auto;
  right: auto;
  width: 2px;
  height: auto;
  transform: scaleY(0.96);
}

.vault-drop-indicator-row[data-vault-drop-axis="x"]::before {
  left: -1px;
}

.vault-drop-indicator-row[data-vault-drop-axis="x"]::after {
  right: -1px;
}

.vault-drop-indicator-row[data-vault-drop-position="before"]::before,
.vault-drop-indicator-row[data-vault-drop-position="after"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.vault-drop-indicator-row[data-vault-drop-axis="x"][data-vault-drop-position="before"]::before,
.vault-drop-indicator-row[data-vault-drop-axis="x"][data-vault-drop-position="after"]::after {
  transform: scaleY(1);
}

.vault-drop-indicator-row[data-vault-drop-position="inside"] {
  outline: 1px solid hsl(var(--primary) / 0.55);
  outline-offset: -1px;
  background-color: hsl(var(--primary) / 0.08);
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.35;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes split-panel-enter {
  0% {
    width: 0;
    min-width: 0;
    opacity: 0;
  }
  55% {
    opacity: 0.88;
  }
  100% {
    width: var(--aside-inline-width);
    min-width: var(--aside-inline-width);
    opacity: 1;
  }
}

.split-panel-enter {
  animation: split-panel-enter 220ms cubic-bezier(0.24, 0.84, 0.32, 1) both;
  will-change: width, opacity;
}

/* Security-key prompts use the same tokens as the shared dialog. Motion stays
   local to this flow and preserves the dialog's centered transform. */
@keyframes fido-dialog-enter {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fido-dialog-exit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(4px) scale(0.98); }
}
@keyframes fido-field-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fido-ring-expand {
  0% { opacity: 0; transform: scale(0.65); }
  25% { opacity: 0.65; }
  100% { opacity: 0; transform: scale(1.15); }
}
@keyframes fido-breathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.fido-prompt-dialog[data-state="open"] {
  animation: fido-dialog-enter 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.fido-prompt-dialog[data-state="closed"] {
  animation: fido-dialog-exit 140ms ease-in both;
}
.fido-prompt-overlay[data-state="open"] {
  animation: fade-in 180ms ease-out both;
}
.fido-prompt-overlay[data-state="closed"] {
  animation: fade-in 140ms ease-in reverse both;
}
.fido-prompt-stage, .fido-field-stage {
  animation: fido-field-enter 180ms ease-out both;
}
.fido-touch-ring {
  animation: fido-ring-expand 2.4s ease-out infinite;
}
.fido-touch-ring-delayed { animation-delay: 1.2s; }
.fido-status-dot { animation: fido-breathe 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .fido-prompt-dialog, .fido-prompt-overlay, .fido-prompt-stage,
  .fido-field-stage, .fido-touch-ring, .fido-status-dot,
  .fido-prompt-dialog .animate-spin,
  .fido-key-options [role="switch"], .fido-key-options [role="switch"] span {
    animation: none !important;
    transition: none !important;
  }
  .fido-touch-ring { display: none; }
}

:root {
  color-scheme: light;
}

/* Global default border color - ensures 'border' class always uses theme color */
*,
*::before,
*::after {
  border-color: hsl(var(--border));
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Tray overlay window: opaque body would show as square tips outside CSS radius (#2505). */
html.tray-window,
html.tray-window body,
html.tray-window #root {
  background: transparent !important;
  background-color: transparent !important;
}

html.tray-window .splash-screen {
  display: none !important;
  background: transparent !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme-transition],
html[data-theme-transition] *,
html[data-theme-transition] *::before,
html[data-theme-transition] *::after {
  transition-property: background-color, color, border-color, outline-color, fill, stroke, text-decoration-color;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-inactive-app-surface],
[data-inactive-app-surface] *,
[data-inactive-app-surface] *::before,
[data-inactive-app-surface] *::after {
  transition: none !important;
}

[data-app-surface-transition-suppressed],
[data-app-surface-transition-suppressed] *,
[data-app-surface-transition-suppressed] *::before,
[data-app-surface-transition-suppressed] *::after {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .netcatty-lazy-fade-in {
    animation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms;
  }

  html[data-theme-transition],
  html[data-theme-transition] *,
  html[data-theme-transition] *::before,
  html[data-theme-transition] *::after {
    transition-duration: 0.01ms;
  }
}

.dark {
  color-scheme: dark;
}

.dark body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.netcatty-shell {
  position: relative;
  background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--background)) 60%, hsl(var(--background) / 0.9) 100%);
}

/* Slim down xterm 6.0 VS Code scrollbar — wide hit area, thin visual slider */
.xterm .xterm-scrollable-element > .scrollbar.vertical {
  width: 12px !important;
}
.xterm .xterm-scrollable-element > .scrollbar.vertical > .slider {
  width: 6px !important;
  border-radius: 3px;
  left: 3px !important;
}

/* Keep focused IME helper text from making the terminal content drift sideways. */
.xterm,
.xterm .xterm-screen,
.xterm .xterm-viewport,
.xterm .xterm-scrollable-element {
  overflow-x: hidden !important;
}

@supports (overflow: clip) {
  .xterm,
  .xterm .xterm-screen,
  .xterm .xterm-viewport,
  .xterm .xterm-scrollable-element {
    overflow-x: clip !important;
  }
}

.xterm-container[data-font-smoothing="true"],
.xterm-container[data-font-smoothing="true"] .xterm,
.xterm-container[data-font-smoothing="true"] .xterm-screen,
.xterm-container[data-font-smoothing="true"] .xterm-rows {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.thinking-shimmer {
  background: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 40%,
    rgba(255, 255, 255, 0.6) 50%,
    currentColor 60%,
    currentColor 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: thinking-shimmer 1.5s ease-in-out infinite;
}

@keyframes thinking-shimmer {
  0% {
    background-position: 100% center;
  }
  100% {
    background-position: -100% center;
  }
}

@keyframes progress-shimmer {
  0% {
    transform: translateX(-200%);
  }

  100% {
    transform: translateX(200%);
  }
}

.glass-panel {
  background: hsl(var(--secondary) / 0.95);
  border: 1px solid hsl(var(--border) / 0.8);
  box-shadow: 0 14px 40px hsl(var(--foreground) / 0.12);
}

.soft-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.8);
  box-shadow: 0 4px 12px hsl(var(--foreground) / 0.06);
}

@keyframes session-activity-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.18;
  }
}

.session-activity-dot {
  animation: session-activity-breathe 1.4s ease-in-out infinite;
}

@keyframes coding-cli-icon-pulse {
  0%, 100% {
    opacity: 0.72;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.coding-cli-icon-busy {
  animation: coding-cli-icon-pulse 1.1s ease-in-out infinite;
}

.coding-cli-icon-waiting {
  animation: coding-cli-icon-pulse 1.6s ease-in-out infinite;
}

.card-highlight {
  position: relative;
  overflow: hidden;
}

.card-highlight::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(500px circle at 20% 20%, hsl(var(--primary) / 0.18), transparent 55%);
  opacity: 0;
  transition: opacity 180ms ease;
}

.card-highlight:hover::before {
  opacity: 1;
}

.elevate {
  transition: transform 140ms ease, border-color 140ms ease;
}

.elevate:hover {
  transform: translateY(-2px);
}

::selection {
  background: hsl(var(--primary) / 0.22);
  color: hsl(var(--foreground));
}

/* Port Forwarding Traffic Animation */
@keyframes traffic-flow {
  0% {
    stroke-dashoffset: 24;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes traffic-flow-reverse {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: 24;
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}



.traffic-line {
  stroke-dasharray: 8 4;
  animation: traffic-flow 0.8s linear infinite;
}

.traffic-line-reverse {
  stroke-dasharray: 8 4;
  animation: traffic-flow-reverse 0.8s linear infinite;
}

.traffic-glow {
  animation: pulse-glow 1.5s ease-in-out infinite;
}

/* Custom titlebar drag regions for Electron */
.app-drag {
  -webkit-app-region: drag;
  app-region: drag;
  user-select: none;
  -webkit-user-select: none;
}

.app-no-drag {
  -webkit-app-region: no-drag;
  app-region: no-drag;
  user-select: auto;
  -webkit-user-select: auto;
}

.app-no-drag * {
  -webkit-app-region: no-drag;
  app-region: no-drag;
  user-select: auto;
  -webkit-user-select: auto;
}

/* Window controls: icons sit in the h-7 tab row; hover fills the full h-9 title bar */
[data-section="top-tabs"] .window-control-btn {
  position: relative;
  z-index: 0;
  display: flex;
  height: 1.75rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  color: var(--top-tabs-muted, hsl(var(--muted-foreground)));
  transition: color 150ms ease;
}

[data-section="top-tabs"] .window-control-btn::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(1.75rem - 2.25rem);
  z-index: -1;
  background: transparent;
  transition: background-color 150ms ease;
}

[data-section="top-tabs"] .window-control-btn:hover::before {
  background: hsl(var(--foreground) / 0.1);
}

[data-section="top-tabs"] .window-control-btn--close:hover {
  color: white;
}

[data-section="top-tabs"] .window-control-btn--close:hover::before {
  background: rgb(239 68 68);
}

[data-section="top-tabs"] .top-tab-utility-btn:hover,
[data-section="top-tabs"] .top-tab-utility-btn[data-state="open"] {
  background-color: hsl(var(--foreground) / 0.1);
  color: var(--top-tabs-muted, hsl(var(--muted-foreground)));
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.workspace-pane {
  outline: none;
  overflow: visible;
}

/* Focus-mode terminal list sidebar (split view uses terminal-split-pane). */
[data-section="terminal-workspace-sidebar"] {
  border-right: var(--terminal-workspace-sidebar-border, none);
}

/* Dim terminal text in unfocused workspace panes (default) */
.workspace-pane:not(:focus-within) .xterm-screen {
  opacity: 0.82;
}
/* Keep current pane fully visible while its context menu / popover is open;
   focus moves to the menu portal and would otherwise drop :focus-within. */
.workspace-pane[data-menu-open] .xterm-screen {
  opacity: 1;
}
/* Border-style focus indicator (opt-in via data attribute) */
[data-workspace-focus="border"] .workspace-pane:not(:focus-within) .xterm-screen {
  opacity: 1;
}
[data-workspace-focus="border"] .workspace-pane::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 120ms ease;
  z-index: 40;
}
[data-workspace-focus="border"] .workspace-pane:focus-within::after {
  border-color: hsl(var(--primary));
}

/* ── Streamdown code block overrides ── */
[data-streamdown="code-block"] {
  position: relative !important;
  border-radius: 10px !important;
  background: hsl(var(--muted) / 0.5) !important;
  overflow: hidden !important;
  margin: 6px 0 !important;
  padding: 0 !important;
  border: none !important;
  gap: 0 !important;
}

[data-streamdown="code-block-header"] {
  height: auto !important;
  padding: 4px 12px 0 !important;
  font-size: 11px !important;
}

[data-streamdown="code-block-header"] span {
  margin-left: 0 !important;
}

[data-streamdown="code-block"] > div:has(> [data-streamdown="code-block-actions"]) {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  z-index: 10 !important;
  display: flex !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  pointer-events: none !important;
}

[data-streamdown="code-block-actions"] {
  position: static !important;
  border: none !important;
  background: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  gap: 2px !important;
  opacity: 0;
  transition: opacity 0.15s;
}

[data-streamdown="code-block"]:hover [data-streamdown="code-block-actions"] {
  opacity: 1;
}

[data-streamdown="code-block-actions"] button {
  padding: 4px !important;
  border-radius: 4px;
}

[data-streamdown="code-block-body"] {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  font-size: 0 !important; /* collapse whitespace text nodes */
}

[data-streamdown="code-block-body"] pre {
  font-size: 12px !important; /* restore in pre */
}

[data-streamdown="code-block"] pre {
  display: block !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 12px 10px !important;
  width: max-content !important;
  min-width: 100% !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  white-space: pre !important;
}

/* Streamdown table overrides */
.ai-chat-message-content[data-role="assistant"] [data-streamdown="table-wrapper"] {
  gap: 4px !important;
  padding: 4px 8px 8px !important;
}

.ai-chat-message-content[data-role="assistant"] [data-streamdown="table-wrapper"] > div:first-child > button,
.ai-chat-message-content[data-role="assistant"] [data-streamdown="table-wrapper"] > div:first-child > div > button {
  padding: 3px !important;
}

.netcatty-mdx-editor {
  container-type: inline-size;
  /* MDX linkDialog uses position:fixed anchors with coords adjusted whenever
   * getFixedContainingBlock sees container-type. Browsers do not treat
   * container-type alone as a fixed CB, so unadjusted viewport coords + those
   * offsets park the preview toolbar over the notes tree. A zero transform
   * makes the fixed CB real so the adjustment matches. */
  transform: translateZ(0);
  min-width: 0;
  --basePageBg: hsl(var(--background));
  --baseBase: hsl(var(--background));
  --baseBgSubtle: hsl(var(--secondary) / 0.45);
  --baseBg: hsl(var(--secondary) / 0.7);
  --baseBgHover: hsl(var(--secondary));
  --baseBgActive: hsl(var(--secondary));
  --baseLine: hsl(var(--border) / 0.45);
  --baseBorder: hsl(var(--border) / 0.6);
  --baseBorderHover: hsl(var(--border));
  --baseSolid: hsl(var(--muted-foreground));
  --baseText: hsl(var(--muted-foreground));
  --baseTextContrast: hsl(var(--foreground));
  --accentText: hsl(var(--primary));
  --accentSolid: hsl(var(--primary));
  --accentSolidHover: hsl(var(--primary) / 0.9);
  background: transparent;
  color: hsl(var(--foreground));
}

.netcatty-note-preview-empty {
  min-height: calc(100vh - 15rem);
  color: hsl(var(--muted-foreground));
  font-size: 14px;
  line-height: 1.75;
}

.netcatty-mdx-editor,
.netcatty-mdx-editor .mdxeditor-root-contenteditable {
  min-height: 100%;
  overflow: visible;
}

.mdxeditor-popup-container.netcatty-mdx-editor {
  position: fixed;
  inset: 0;
  z-index: 200000;
  min-height: 0;
  overflow: visible;
  pointer-events: none;
}

.mdxeditor-popup-container.netcatty-mdx-editor [data-radix-popper-content-wrapper],
.mdxeditor-popup-container.netcatty-mdx-editor [role="dialog"],
.mdxeditor-popup-container.netcatty-mdx-editor [class*="_tableColumnEditorPopoverContent_"] {
  pointer-events: auto;
}

/*
 * Image edit / insert dialog (MDX ImageDialog via Radix).
 * Match Netcatty popover / form tokens instead of stock MDX chrome.
 */
.netcatty-mdx-editor [class*="_dialogOverlay_"] {
  background: hsl(var(--background) / 0.55) !important;
  backdrop-filter: blur(2px);
  opacity: 1 !important;
  z-index: 200100 !important;
}

.netcatty-mdx-editor [class*="_dialogContent_"],
.netcatty-mdx-editor [class*="_largeDialogContent_"] {
  min-width: min(22rem, calc(100vw - 2rem));
  max-width: min(26rem, calc(100vw - 2rem));
  padding: 1rem 1.1rem 0.9rem !important;
  gap: 0.65rem !important;
  align-items: stretch !important;
  flex-direction: column !important;
  border: 1px solid hsl(var(--border) / 0.7) !important;
  border-radius: 0.75rem !important;
  background: hsl(var(--popover)) !important;
  color: hsl(var(--popover-foreground)) !important;
  box-shadow:
    0 0 0 1px hsl(var(--border) / 0.35),
    0 12px 40px hsl(0 0% 0% / 0.28) !important;
  filter: none !important;
  z-index: 200110 !important;
  font-size: 13px !important;
}

.netcatty-mdx-editor [class*="_dialogContent_"] > h2,
.netcatty-mdx-editor [class*="_largeDialogContent_"] > h2 {
  margin: 0 0 0.15rem !important;
  padding: 0 !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground)) !important;
  line-height: 1.3 !important;
}

.netcatty-mdx-editor form[class*="_multiFieldForm_"] {
  padding: 0.15rem 0 0 !important;
  gap: 0.75rem !important;
}

.netcatty-mdx-editor form[class*="_multiFieldForm_"] [class*="_formField_"] {
  gap: 0.35rem !important;
}

.netcatty-mdx-editor form[class*="_multiFieldForm_"] [class*="_formField_"] > label {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  color: hsl(var(--muted-foreground)) !important;
  line-height: 1.3 !important;
}

.netcatty-mdx-editor [class*="_textInput_"],
.netcatty-mdx-editor [class*="_downshiftInput_"],
.netcatty-mdx-editor [class*="_dialogInput_"] {
  width: 100% !important;
  min-height: 2.1rem !important;
  box-sizing: border-box !important;
  padding: 0.4rem 0.65rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid hsl(var(--border) / 0.75) !important;
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  box-shadow: none !important;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.netcatty-mdx-editor [class*="_textInput_"]:focus,
.netcatty-mdx-editor [class*="_downshiftInput_"]:focus,
.netcatty-mdx-editor [class*="_dialogInput_"]:focus,
.netcatty-mdx-editor [class*="_downshiftInputWrapper_"]:focus-within {
  outline: none !important;
  border-color: hsl(var(--primary) / 0.65) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18) !important;
}

.netcatty-mdx-editor [class*="_downshiftInputWrapper_"] {
  width: 100% !important;
  border-radius: 0.5rem !important;
  border: 1px solid hsl(var(--border) / 0.75) !important;
  background: hsl(var(--background)) !important;
  overflow: hidden;
}

.netcatty-mdx-editor [class*="_downshiftInputWrapper_"] [class*="_downshiftInput_"] {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.netcatty-mdx-editor [class*="_downshiftInputWrapper_"]:focus-within {
  border-color: hsl(var(--primary) / 0.65) !important;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18) !important;
}

.netcatty-mdx-editor [class*="_imageDimensionsContainer_"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem !important;
}

.netcatty-mdx-editor [class*="_imageDimensionsContainer_"] [class*="_formField_"] {
  min-width: 0;
}

/* Action row at the bottom of the form */
.netcatty-mdx-editor form[class*="_multiFieldForm_"] > div:last-child {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-top: 0.35rem !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid hsl(var(--border) / 0.55);
}

.netcatty-mdx-editor [class*="_primaryButton_"],
.netcatty-mdx-editor [class*="_secondaryButton_"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2rem !important;
  padding: 0.35rem 0.85rem !important;
  border-radius: 0.5rem !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.netcatty-mdx-editor [class*="_primaryButton_"] {
  border: 1px solid hsl(var(--primary) / 0.35) !important;
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

.netcatty-mdx-editor [class*="_primaryButton_"]:hover {
  background: hsl(var(--primary) / 0.9) !important;
}

.netcatty-mdx-editor [class*="_secondaryButton_"] {
  border: 1px solid hsl(var(--border) / 0.8) !important;
  background: hsl(var(--secondary) / 0.55) !important;
  color: hsl(var(--foreground)) !important;
}

.netcatty-mdx-editor [class*="_secondaryButton_"]:hover {
  background: hsl(var(--secondary)) !important;
}

/* Hide empty "Upload an image" file field chrome when handler is null (hidden input only). */
.netcatty-mdx-editor form[class*="_multiFieldForm_"] input[type="file"] {
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.netcatty-mdx-content {
  min-height: calc(100vh - 15rem);
  padding: 0;
  color: hsl(var(--foreground) / 0.9);
  /* Note body follows the UI font (Settings > Appearance > Interface Font);
     the note font tool only controls code block / inline code fonts. */
  font-family: var(--font-sans);
  font-size: var(--note-font-size, 15px);
  line-height: 1.75;
  outline: none;
}

.netcatty-mdx-content:focus {
  outline: none;
}

.netcatty-mdx-content p {
  margin: 0.55rem 0;
}

.netcatty-mdx-content[contenteditable="true"] > p:first-child {
  min-height: 1.85em;
}

.netcatty-mdx-editor .mdxeditor-root-contenteditable > .netcatty-mdx-content:not([contenteditable]) {
  top: 0;
  padding: 0 !important;
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
}

.netcatty-mdx-editor .mdxeditor-root-contenteditable > .netcatty-mdx-content:not([contenteditable]) p {
  margin: 0;
}

.netcatty-mdx-content h1,
.netcatty-mdx-content h2,
.netcatty-mdx-content h3 {
  color: hsl(var(--foreground));
  font-weight: 650;
  letter-spacing: 0;
}

.netcatty-mdx-content h1 {
  margin: 1.1rem 0 0.7rem;
  font-size: 1.7rem;
  line-height: 1.2;
}

.netcatty-mdx-content h2 {
  margin: 1rem 0 0.6rem;
  font-size: 1.3rem;
  line-height: 1.25;
}

.netcatty-mdx-content h3 {
  margin: 0.85rem 0 0.5rem;
  font-size: 1.05rem;
  line-height: 1.35;
}

.netcatty-mdx-content ul,
.netcatty-mdx-content ol {
  margin: 0.55rem 0;
  padding-left: 1.35rem;
}

.netcatty-mdx-content ul {
  list-style-type: disc;
}

.netcatty-mdx-content ul ul {
  list-style-type: circle;
}

.netcatty-mdx-content ul ul ul {
  list-style-type: square;
}

.netcatty-mdx-content ol {
  list-style-type: decimal;
}

.netcatty-mdx-content ol ol {
  list-style-type: lower-alpha;
}

.netcatty-mdx-content ol ol ol {
  list-style-type: lower-roman;
}

.netcatty-mdx-content li {
  margin: 0.25rem 0;
}

/*
 * GFM task lists (Lexical CheckListPlugin): default MDX styles pin the checkbox
 * at top:0, which sits high against our 1.75 line-height. Re-center the box with
 * the first text line, keep a solid hit target, and drop the hanging negative
 * margin so label text lines up cleanly with the control.
 */
.netcatty-mdx-content ul:has(> li[role="checkbox"]),
.netcatty-mdx-content ul:has(> li[aria-checked]),
.netcatty-mdx-content ul:has(> li[class*="_listItemChecked_"]),
.netcatty-mdx-content ul:has(> li[class*="_listItemUnchecked_"]) {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0.15rem;
  margin-left: 0;
}

.netcatty-mdx-content li[role="checkbox"],
.netcatty-mdx-content li[aria-checked] {
  position: relative;
  list-style: none;
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
  padding-left: 1.75rem !important;
  padding-right: 0 !important;
  min-height: 1.75em;
  line-height: 1.75;
  cursor: default;
}

.netcatty-mdx-content li[role="checkbox"]::before,
.netcatty-mdx-content li[aria-checked]::before {
  content: "" !important;
  box-sizing: border-box !important;
  position: absolute !important;
  /* Vertically center 1rem box in a 1.75em line: (1.75em - 1rem) / 2 */
  top: calc((1.75em - 1rem) / 2) !important;
  left: 0 !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  display: block !important;
  background-size: cover !important;
  border-radius: 3px !important;
}

.netcatty-mdx-content li[aria-checked="false"]::before,
.netcatty-mdx-content li[role="checkbox"][aria-checked="false"]::before {
  border: 1px solid hsl(var(--border)) !important;
  background-color: transparent !important;
}

.netcatty-mdx-content li[aria-checked="true"]::before {
  border: 1px solid hsl(var(--primary) / 0.7) !important;
  background-color: hsl(var(--primary)) !important;
}

/* Checkmark glyph (MDX draws this with ::after) */
.netcatty-mdx-content li[aria-checked="true"]::after {
  top: calc((1.75em - 1rem) / 2 + 0.1rem) !important;
  left: 0.35rem !important;
  width: 0.28rem !important;
  height: 0.55rem !important;
  cursor: pointer !important;
}

/* Preview is readOnly — still show pointer on the control so it feels clickable. */
.netcatty-mdx-editor--preview .netcatty-mdx-content li[role="checkbox"],
.netcatty-mdx-editor--preview .netcatty-mdx-content li[aria-checked] {
  cursor: default;
}

.netcatty-mdx-editor--preview .netcatty-mdx-content li[role="checkbox"]::before,
.netcatty-mdx-editor--preview .netcatty-mdx-content li[aria-checked]::before,
.netcatty-mdx-editor--preview .netcatty-mdx-content li[aria-checked="true"]::after {
  cursor: pointer !important;
}

.netcatty-mdx-content code {
  border-radius: 4px;
  background: hsl(var(--secondary) / 0.8);
  padding: 0.12rem 0.3rem;
  font-family: var(--note-font-family, var(--font-mono));
  font-size: var(--note-code-font-size, 0.88em);
}

.netcatty-mdx-content pre {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.netcatty-mdx-editor [class*="_codeMirrorWrapper_"] {
  position: relative !important;
  min-height: 2rem !important;
  margin: 0.35rem 0 0.65rem;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
}

.netcatty-note-code-copy {
  position: absolute !important;
  top: 0.2rem !important;
  right: 0.15rem !important;
  z-index: 40 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.45rem !important;
  height: 1.45rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  box-shadow: none !important;
  opacity: 0;
  cursor: pointer !important;
  transition: opacity 0.15s, color 0.15s, background-color 0.15s;
}

.netcatty-mdx-editor [class*="_codeMirrorWrapper_"]:hover .netcatty-note-code-copy,
.netcatty-mdx-editor .cm-editor:hover ~ .netcatty-note-code-copy,
.netcatty-mdx-editor pre:hover .netcatty-note-code-copy,
.netcatty-mdx-content pre:hover .netcatty-note-code-copy,
.netcatty-mdx-editor--preview .netcatty-note-code-copy,
.netcatty-note-code-copy[data-copied="true"],
.netcatty-note-code-copy:focus-visible {
  opacity: 0.85 !important;
  pointer-events: auto !important;
}

.netcatty-note-code-copy:hover,
.netcatty-mdx-editor--preview .netcatty-note-code-copy:hover {
  opacity: 1 !important;
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--foreground)) !important;
}

.netcatty-note-code-copy[data-copied="true"] {
  color: hsl(var(--foreground)) !important;
}

.netcatty-mdx-editor .cm-editor,
.netcatty-mdx-editor .cm-content,
.netcatty-mdx-editor [class*="_codeMirrorWrapper_"],
.netcatty-mdx-editor pre,
.netcatty-mdx-editor code,
.netcatty-mdx-editor [class*="_code_"],
.netcatty-mdx-editor [class*="code_"],
.netcatty-mdx-editor kbd,
.netcatty-mdx-editor samp,
.netcatty-mdx-content pre,
.netcatty-mdx-content code,
.netcatty-mdx-content [class*="_code_"],
.netcatty-mdx-content [class*="code_"],
.netcatty-mdx-content kbd,
.netcatty-mdx-content samp,
.netcatty-source-editor,
.netcatty-source-editor textarea {
  font-family: var(--note-font-family, var(--font-mono)) !important;
}

.netcatty-mdx-editor .cm-editor,
.netcatty-mdx-editor .cm-content,
.netcatty-mdx-editor pre,
.netcatty-mdx-content pre,
.netcatty-source-editor textarea {
  font-size: var(--note-code-font-size, 13px) !important;
}

.netcatty-mdx-editor [class*="_codeMirrorWrapper_"]:has([data-language="latex"]),
.netcatty-mdx-editor [class*="_codeMirrorWrapper_"]:has([data-language="tex"]) {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.netcatty-math-formula-preview {
  display: flex;
  align-items: center;
  justify-content: safe center;
  padding: 0.55rem 0;
  margin: 0.4rem 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  font-size: 1.45em;
  color: hsl(var(--foreground));
  overflow-x: auto;
  max-width: 100%;
  user-select: text;
  min-height: 2.25rem;
}

.netcatty-math-formula-preview .katex-display {
  flex: 0 0 auto;
  margin: 0;
}

.netcatty-math-formula-preview .katex {
  font-size: 1em;
  color: inherit;
}

.netcatty-math-formula-preview .katex-mathml math {
  flex: 0 0 auto;
}

.netcatty-math-reading-mode .cm-editor {
  display: none !important;
}

.netcatty-math-reading-mode {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0.4rem 0 !important;
}

.netcatty-math-reading-mode .netcatty-math-formula-preview {
  margin: 0;
  background: transparent;
}

.netcatty-math-reading-mode > .netcatty-note-code-copy {
  display: none !important;
}

.netcatty-mdx-editor:not(.netcatty-mdx-editor--preview) [class*="_codeMirrorWrapper_"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0.25rem 0 0.55rem;
  border-radius: 0;
  background: transparent !important;
  overflow: visible !important;
}

.netcatty-mdx-editor:not(.netcatty-mdx-editor--preview) .netcatty-mdx-content p:has(+ [class*="_codeMirrorWrapper_"]) {
  margin-bottom: 0.2rem;
}

.netcatty-mdx-editor:not(.netcatty-mdx-editor--preview) [class*="_codeMirrorWrapper_"] .cm-editor {
  min-height: 2rem !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.netcatty-mdx-editor:not(.netcatty-mdx-editor--preview) [class*="_codeMirrorWrapper_"] .cm-content {
  padding: 0 !important;
}

.netcatty-mdx-editor:not(.netcatty-mdx-editor--preview) [class*="_codeMirrorWrapper_"] .cm-scroller {
  padding-right: 4.8rem !important;
  min-height: 2.2rem !important;
}

.netcatty-mdx-editor:not(.netcatty-mdx-editor--preview) [class*="_codeMirrorToolbar_"] {
  position: absolute !important;
  top: 0.35rem !important;
  right: 0.35rem !important;
  z-index: 30 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 0.25rem !important;
  padding: 0.2rem 0.25rem !important;
  margin: 0 !important;
  width: auto !important;
  border-radius: 6px !important;
  background: hsl(var(--background) / 0.94) !important;
  border: 1px solid hsl(var(--border) / 0.65) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease !important;
}

.netcatty-mdx-editor:not(.netcatty-mdx-editor--preview) [class*="_codeMirrorWrapper_"]:hover [class*="_codeMirrorToolbar_"],
.netcatty-mdx-editor:not(.netcatty-mdx-editor--preview) [class*="_codeMirrorWrapper_"]:focus-within [class*="_codeMirrorToolbar_"],
.netcatty-mdx-editor:not(.netcatty-mdx-editor--preview) [class*="_codeMirrorToolbar_"]:has([data-state="open"]) {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Language selector trigger in toolbar */
/* Align the TooltipWrap span wrapper so the language select sits level with action buttons */
.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] [class*="_tooltipTrigger_"] {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  line-height: 1 !important;
}

.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] [class*="_toolbarCodeBlockLanguageSelectTrigger_"],
.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] [class*="_selectTrigger_"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 1.45rem !important;
  min-height: 1.45rem !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 0.45rem !important;
  margin: 0 !important;
  gap: 0.25rem !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: hsl(var(--muted) / 0.7) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] [class*="_toolbarCodeBlockLanguageSelectTrigger_"]:hover,
.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] [class*="_selectTrigger_"]:hover {
  background: hsl(var(--secondary)) !important;
}

.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] [class*="_selectTrigger_"] [data-radix-select-value],
.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] [class*="_selectTrigger_"] > span:first-child {
  flex: 0 0 auto;
  overflow: visible;
  max-width: none;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] [class*="_selectDropdownArrow_"] svg,
.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] [class*="_toolbarCodeBlockLanguageSelectTrigger_"] svg,
.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] [class*="_selectTrigger_"] svg {
  width: 10px !important;
  height: 10px !important;
  flex-shrink: 0;
  opacity: 0.75;
}

/* Base style for all action buttons (Delete & Copy) in toolbar */
.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] button:not([class*="_selectTrigger_"]):not([class*="_toolbarCodeBlockLanguageSelectTrigger_"]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 1.4rem !important;
  min-height: 1.4rem !important;
  max-height: 1.4rem !important;
  width: 1.4rem !important;
  min-width: 1.4rem !important;
  max-width: 1.4rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

/* Delete Button specific hover */
.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] button:not([class*="_selectTrigger_"]):not([class*="_toolbarCodeBlockLanguageSelectTrigger_"]):not(.netcatty-note-code-copy):hover {
  background: hsl(var(--destructive) / 0.15) !important;
  color: hsl(var(--destructive)) !important;
}

/* Copy Button inside toolbar */
.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] .netcatty-note-code-copy {
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] .netcatty-note-code-copy:hover {
  background: hsl(160 84% 39% / 0.15) !important;
  color: hsl(160 84% 39%) !important;
}

.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] button svg {
  width: 10px !important;
  height: 10px !important;
}

.netcatty-mdx-editor:not(.netcatty-mdx-editor--preview) [class*="_codeMirrorWrapper_"]:has([class*="_codeMirrorToolbar_"]) > .netcatty-note-code-copy {
  display: none !important;
}

.netcatty-mdx-editor--preview [class*="_codeMirrorToolbar_"] {
  display: none !important;
}

.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] [class*="_toolbarCodeBlockLanguageSelectTrigger_"] span {
  font-size: inherit !important;
  line-height: inherit !important;
}

.netcatty-mdx-editor [class*="_toolbarCodeBlockLanguageSelectContent_"],
.netcatty-mdx-editor [class*="_codeMirrorToolbar_"] [class*="_selectContainer_"] {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  max-height: 12rem;
  overflow-x: visible !important;
  overflow-y: auto;
  font-size: 11px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0.15rem 0 !important;
  border: 1px solid hsl(var(--border) / 0.7) !important;
  border-radius: 6px !important;
  background: hsl(var(--popover)) !important;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.22) !important;
  filter: none !important;
}

.netcatty-mdx-editor [class*="_toolbarCodeBlockLanguageSelectContent_"] [data-radix-select-viewport] {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  padding: 0 !important;
}

.netcatty-mdx-editor [class*="_toolbarCodeBlockLanguageSelectContent_"] [class*="_selectItem_"] {
  font-size: 11px !important;
  line-height: 1.25 !important;
  padding: 0.28rem 0.45rem !important;
  min-height: 0 !important;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.netcatty-mdx-editor [class*="_toolbarCodeBlockLanguageSelectContent_"] [class*="_selectItem_"] [data-radix-select-item-text] {
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.netcatty-mdx-editor [class*="_toolbarCodeBlockLanguageSelectContent_"] {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  font-size: 11px !important;
  max-height: 12rem;
  overflow-y: auto;
}

.netcatty-mdx-editor [class*="_toolbarCodeBlockLanguageSelectContent_"] [class*="_selectItem_"] {
  font-size: 11px !important;
  padding: 0.28rem 0.45rem !important;
  min-height: 0 !important;
}

.netcatty-mdx-editor .cm-editor {
  --note-code-token-muted: hsl(var(--muted-foreground) / 0.9);
  --note-code-token-keyword: color-mix(in oklab, hsl(var(--primary)) 82%, hsl(var(--foreground)));
  --note-code-token-name: color-mix(in oklab, hsl(var(--primary)) 50%, hsl(var(--foreground)));
  --note-code-token-value: color-mix(in oklab, hsl(var(--primary)) 38%, hsl(var(--foreground)));
  --note-code-token-string: color-mix(in oklab, hsl(var(--primary)) 24%, hsl(var(--foreground)));
  overflow: hidden;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: hsl(var(--foreground) / 0.9) !important;
  font-family: var(--font-mono);
  font-size: 13px !important;
}

.netcatty-mdx-editor .cm-scroller {
  background: transparent !important;
  color: hsl(var(--foreground) / 0.9) !important;
  font-family: var(--font-mono);
}

.netcatty-mdx-editor .cm-content {
  background: transparent !important;
  color: hsl(var(--foreground) / 0.9) !important;
  font-family: var(--font-mono);
  padding: 0 !important;
}

.netcatty-mdx-editor .cm-line {
  color: inherit !important;
  line-height: 1.45 !important;
}

.netcatty-mdx-editor .cm-content .netcatty-code-token-muted {
  color: var(--note-code-token-muted) !important;
}

.netcatty-mdx-editor .cm-content .netcatty-code-token-keyword {
  color: var(--note-code-token-keyword) !important;
}

.netcatty-mdx-editor .cm-content .netcatty-code-token-name,
.netcatty-mdx-editor .cm-content .netcatty-code-token-variable,
.netcatty-mdx-editor .cm-content .netcatty-code-token-type,
.netcatty-mdx-editor .cm-content .netcatty-code-token-property {
  color: var(--note-code-token-name) !important;
}

.netcatty-mdx-editor .cm-content .netcatty-code-token-value {
  color: var(--note-code-token-value) !important;
}

.netcatty-mdx-editor .cm-content .netcatty-code-token-string {
  color: var(--note-code-token-string) !important;
}

.netcatty-mdx-editor .cm-content .netcatty-code-token-link {
  color: hsl(var(--primary)) !important;
  text-decoration: underline;
}

.netcatty-mdx-editor .cm-content .netcatty-code-token-heading,
.netcatty-mdx-editor .cm-content .netcatty-code-token-strong {
  font-weight: 600;
}

.netcatty-mdx-editor .cm-content .netcatty-code-token-emphasis {
  font-style: italic;
}

.netcatty-mdx-editor .cm-content .netcatty-code-token-invalid {
  color: hsl(var(--destructive)) !important;
}

.netcatty-mdx-editor .cm-gutters {
  border-right: 1px solid hsl(var(--border) / 0.35) !important;
  background: transparent !important;
  color: hsl(var(--muted-foreground) / 0.75) !important;
  font-family: var(--font-mono);
  font-size: 13px !important;
  line-height: 1.45 !important;
  padding: 0 !important;
}

.netcatty-mdx-editor .cm-gutterElement {
  font-size: 13px !important;
  line-height: 1.45 !important;
}

.netcatty-mdx-editor .cm-lineNumbers .cm-gutterElement {
  padding: 0 0.45rem 0 0.55rem !important;
}

.netcatty-mdx-editor .cm-activeLine,
.netcatty-mdx-editor .cm-activeLineGutter {
  background: transparent !important;
}

.netcatty-mdx-editor .cm-editor:focus-within .cm-activeLine,
.netcatty-mdx-editor .cm-editor:focus-within .cm-activeLineGutter {
  background: hsl(var(--primary) / 0.08) !important;
}

.netcatty-mdx-editor .cm-selectionBackground {
  background: hsl(var(--primary) / 0.22) !important;
}

.netcatty-mdx-editor .cm-cursor {
  border-left-color: hsl(var(--foreground)) !important;
}

.netcatty-mdx-content blockquote {
  margin: 0.7rem 0;
  border-left: 2px solid hsl(var(--border));
  padding-left: 0.85rem;
  color: hsl(var(--muted-foreground));
}

.netcatty-mdx-content hr {
  margin: 1.35rem 0;
  border-color: hsl(var(--border) / 0.45);
}

.netcatty-mdx-content table:not([class*="_tableEditor_"]) {
  margin: 0.9rem 0;
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  border: 1px solid hsl(var(--border));
}

.netcatty-mdx-content table:not([class*="_tableEditor_"]) th,
.netcatty-mdx-content table:not([class*="_tableEditor_"]) td {
  border: 1px solid hsl(var(--border) / 0.45);
  padding: 0.42rem 0.65rem;
  text-align: left;
  vertical-align: top;
}

.netcatty-mdx-content table:not([class*="_tableEditor_"]) th {
  font-weight: 650;
}

/*
 * Note images: source keeps width/height (HTML attrs for MDX / aspect ratio).
 * Display: max-width caps screenshots to the pane; height:auto keeps ratio
 * when width is known or unconstrained. Do NOT force height:auto on height-only
 * images (e.g. <img height="24">) — that would ignore the presentational size.
 * Do NOT force width:auto — that would ignore a 128px logo preference.
 */
.netcatty-mdx-content img,
.netcatty-mdx-editor [class*="_imageWrapper_"] img,
.netcatty-mdx-editor img {
  max-width: 100% !important;
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.375rem;
}

/* Width-only (or no size): keep aspect ratio via height:auto. */
.netcatty-mdx-content img:not([height]),
.netcatty-mdx-content img[width],
.netcatty-mdx-editor [class*="_imageWrapper_"] img:not([height]),
.netcatty-mdx-editor [class*="_imageWrapper_"] img[width],
.netcatty-mdx-editor img:not([height]),
.netcatty-mdx-editor img[width] {
  height: auto !important;
}

/* Height-only: keep aspect ratio via width:auto (do not force height:auto above). */
.netcatty-mdx-content img[height]:not([width]),
.netcatty-mdx-editor [class*="_imageWrapper_"] img[height]:not([width]),
.netcatty-mdx-editor img[height]:not([width]) {
  width: auto !important;
  max-width: 100% !important;
}

/* Cap MDX image chrome when ImageNode bakes large pixel widths into styles. */
.netcatty-mdx-editor [class*="_imageWrapper_"],
.netcatty-mdx-editor [class*="_imageContainer_"],
.netcatty-mdx-editor [class*="_imageControlWrapper_"] {
  max-width: 100% !important;
  height: auto !important;
  overflow: visible !important;
  box-sizing: border-box;
}

/*
 * Small icon rows (README distro wall, width≤96): flow horizontally.
 * JS sets data-note-img-size="sm" (see annotateNoteImageSizes) so we avoid a
 * combinatorial :has(img[width="N"]) matrix that thrashes style recalc on
 * badge walls. Large screenshots stay block + full-width capped above.
 */
.netcatty-mdx-content img[data-note-img-size="sm"],
.netcatty-mdx-editor img[data-note-img-size="sm"] {
  display: inline-block !important;
  margin: 0.35rem 0.4rem !important;
  vertical-align: middle;
  border-radius: 0.25rem;
}

.netcatty-mdx-editor [data-editor-block-type="image"][data-note-img-size="sm"],
.netcatty-mdx-editor [class*="_imageWrapper_"][data-note-img-size="sm"] {
  display: inline-block !important;
  vertical-align: middle;
  margin: 0.2rem 0.15rem !important;
  max-width: none !important;
  width: auto !important;
}

/* Lone image paragraph marked sm by JS — keep it in the icon row. */
.netcatty-mdx-content p[data-note-img-size="sm"],
.netcatty-mdx-editor p[data-note-img-size="sm"] {
  display: inline !important;
  margin: 0 !important;
}

/* Image chrome stays out of the image until the image is hovered or focused. */
.netcatty-mdx-editor [data-editor-block-type="image"] [class*="_editImageToolbar_"],
.netcatty-mdx-editor [class*="_imageWrapper_"] [class*="_editImageToolbar_"] {
  top: 0.375rem;
  right: 0.375rem;
  gap: 0.0625rem;
  padding: 0.125rem;
  opacity: 0;
  pointer-events: none;
  border: 1px solid hsl(var(--border) / 0.8);
  border-radius: 0.375rem;
  background: hsl(var(--background) / 0.96);
  box-shadow: 0 2px 8px hsl(var(--foreground) / 0.12);
  transition: opacity 120ms ease;
}

.netcatty-mdx-editor [data-editor-block-type="image"] [class*="_editImageToolbar_"] button,
.netcatty-mdx-editor [class*="_imageWrapper_"] [class*="_editImageToolbar_"] button {
  display: inline-flex;
  width: 1.375rem;
  height: 1.375rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
}

.netcatty-mdx-editor [data-editor-block-type="image"] [class*="_editImageToolbar_"] button svg,
.netcatty-mdx-editor [class*="_imageWrapper_"] [class*="_editImageToolbar_"] button svg {
  width: 0.875rem;
  height: 0.875rem;
}

.netcatty-mdx-editor [data-editor-block-type="image"] [class*="_editImageToolbar_"] button:hover,
.netcatty-mdx-editor [class*="_imageWrapper_"] [class*="_editImageToolbar_"] button:hover {
  background: hsl(var(--secondary) / 0.75);
}

.netcatty-mdx-editor [data-editor-block-type="image"]:hover [class*="_editImageToolbar_"],
.netcatty-mdx-editor [data-editor-block-type="image"]:focus-within [class*="_editImageToolbar_"],
.netcatty-mdx-editor [class*="_imageWrapper_"]:hover [class*="_editImageToolbar_"],
.netcatty-mdx-editor [class*="_imageWrapper_"]:focus-within [class*="_editImageToolbar_"] {
  opacity: 1;
  pointer-events: auto;
}

/*
 * Preserve README-style center alignment from paste (MDX edit path).
 * (<div align="center"> / align=center / text-align:center).
 */
.netcatty-mdx-content [align="center"],
.netcatty-mdx-editor [align="center"],
.netcatty-mdx-content [style*="text-align:center"],
.netcatty-mdx-content [style*="text-align: center"],
.netcatty-mdx-editor [style*="text-align:center"],
.netcatty-mdx-editor [style*="text-align: center"] {
  text-align: center !important;
}

.netcatty-mdx-content [align="center"] img,
.netcatty-mdx-editor [align="center"] img,
.netcatty-mdx-content [align="center"] [class*="_imageWrapper_"],
.netcatty-mdx-editor [align="center"] [class*="_imageWrapper_"],
.netcatty-mdx-content [align="center"] [data-editor-block-type="image"],
.netcatty-mdx-editor [align="center"] [data-editor-block-type="image"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Badge / shield images inside links: keep inline so rows stay horizontal. */
.netcatty-mdx-content a img,
.netcatty-mdx-editor a img,
.netcatty-mdx-content a [class*="_imageWrapper_"],
.netcatty-mdx-editor a [class*="_imageWrapper_"],
.netcatty-mdx-content a [data-editor-block-type="image"],
.netcatty-mdx-editor a [data-editor-block-type="image"] {
  display: inline-block !important;
  margin: 0.25rem 0.35rem !important;
  vertical-align: middle;
  max-width: 100% !important;
  height: auto !important;
}

.netcatty-mdx-content a:has(img),
.netcatty-mdx-editor a:has(img),
.netcatty-mdx-content a:has([data-editor-block-type="image"]),
.netcatty-mdx-editor a:has([data-editor-block-type="image"]) {
  display: inline-block !important;
  text-decoration: none !important;
  vertical-align: middle;
  margin: 0.15rem 0.25rem;
}

.netcatty-mdx-content a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.netcatty-mdx-content a[data-netcatty-host-link="true"] {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28em;
}

.netcatty-mdx-content a[data-netcatty-host-link="true"]::before {
  content: "";
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  flex: 0 0 auto;
  background-color: currentColor;
  transform: translateY(0.12em);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='10' x='4' y='5' rx='2'/%3E%3Cpath d='M12 15v4'/%3E%3Cpath d='M8 19h8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='10' x='4' y='5' rx='2'/%3E%3Cpath d='M12 15v4'/%3E%3Cpath d='M8 19h8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dark .netcatty-mdx-content table:not([class*="_tableEditor_"]) {
  border-color: hsl(var(--foreground) / 0.32);
}

.dark .netcatty-mdx-content table:not([class*="_tableEditor_"]) th,
.dark .netcatty-mdx-content table:not([class*="_tableEditor_"]) td {
  border-color: hsl(var(--foreground) / 0.18);
}

.netcatty-mdx-editor [class*="_tableColumnEditorTrigger_"],
.netcatty-mdx-editor [class*="_tableRowEditorTrigger_"],
.netcatty-mdx-editor [class*="_addRowButton_"],
.netcatty-mdx-editor [class*="_addColumnButton_"],
.netcatty-mdx-editor [class*="_tableColumnEditorToolbar_"] button {
  cursor: pointer !important;
}

.netcatty-mdx-editor [class*="_tableColumnEditorPopoverContent_"] {
  z-index: 80;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
}

.netcatty-mdx-editor [data-radix-popper-content-wrapper] {
  z-index: 90 !important;
}

.netcatty-mdx-editor [class*="_tableEditor_"] > tbody > tr > td:not([class*="_toolCell_"]),
.netcatty-mdx-editor [class*="_tableEditor_"] > tbody > tr > th:not([class*="_toolCell_"]):not([data-tool-cell="true"]) {
  border-color: hsl(var(--border)) !important;
}

.dark .netcatty-mdx-editor [class*="_tableEditor_"] > tbody > tr > td:not([class*="_toolCell_"]),
.dark .netcatty-mdx-editor [class*="_tableEditor_"] > tbody > tr > th:not([class*="_toolCell_"]):not([data-tool-cell="true"]) {
  border-color: hsl(var(--foreground) / 0.3) !important;
}

/* Terminal appearance runtime (--nc-term-* injected by useThemeRuntime) */
[data-terminal-appearance-root] {
  --terminal-sidepanel-bg: var(--nc-term-panel-bg, var(--background));
  --terminal-sidepanel-fg: var(--nc-term-panel-fg, var(--foreground));
  --terminal-sidepanel-accent: var(--nc-term-cursor, var(--accent));
  --terminal-sidepanel-muted: var(--nc-term-panel-muted, var(--muted-foreground));
  --terminal-sidepanel-border: var(--nc-term-panel-border, var(--border));
  --terminal-panel-bg: var(--nc-term-panel-bg, var(--background));
  --terminal-panel-fg: var(--nc-term-panel-fg, var(--foreground));
  --terminal-panel-muted: var(--nc-term-panel-muted, var(--muted-foreground));
  --terminal-panel-border: var(--nc-term-panel-border, var(--border));
  --terminal-panel-hover: var(--nc-term-panel-hover, var(--accent));
  --terminal-panel-active: var(--nc-term-panel-active, var(--accent));
  --terminal-host-tree-bg: var(--nc-term-host-tree-bg, var(--background));
  --terminal-host-tree-fg: var(--nc-term-host-tree-fg, var(--foreground));
  --terminal-host-tree-muted: var(--nc-term-host-tree-muted, var(--muted-foreground));
  --terminal-host-tree-separator: var(--nc-term-host-tree-separator, var(--border));
  --terminal-host-tree-hover-bg: var(--nc-term-host-tree-hover-bg, transparent);
  --terminal-host-tree-active-bg: var(--nc-term-host-tree-active-bg, transparent);
  --terminal-host-tree-drop-bg: var(--nc-term-host-tree-drop-bg, transparent);
  --terminal-host-tree-folder-fg: var(--nc-term-host-tree-folder-fg, var(--foreground));
}

/* Monitoring's single-row header follows the available pane width. */
@container monitor-main (max-width: 760px) {
  .monitor-header-action-label { display: none; }
}