@import '@radix-ui/themes/styles.css';
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Extralight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ClashGrotesk';
  src: url('/fonts/clash-grotesk/ClashGrotesk-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========================
   Custom Accent Color Scale
   Base color: #047857 (Emerald)
   ======================== */

/* Light Mode */
:root, .light, .light-theme {
  --effects-translucent: rgba(255, 255, 255, 0.8);
  --tokens-colors-surface: rgba(139, 139, 139, 0.084);
  --accent-surface: rgba(18, 249, 157, 0.04);
  --white-to-dark: rgba(0, 0, 0, 0.074);
  --emerald-1: #f5fefb;
  --emerald-2: #edfdf8;
  --emerald-3: #d4f7eb;
  --emerald-4: #bbf0dd;
  --emerald-5: #9fe7cd;
  --emerald-6: #7edabb;
  --emerald-7: #53c9a4;
  --emerald-8: #12b589;
  --emerald-9: #047857;
  --emerald-10: #10674C;
  --emerald-11: #035e44;
  --emerald-12: #0f3d2c;

  /* Alpha variants  */
  --emerald-a1: rgba(4, 120, 87, 0.024);
  --emerald-a2: rgba(4, 120, 87, 0.06);
  --emerald-a3: rgba(4, 120, 87, 0.13);
  --emerald-a4: rgba(4, 120, 87, 0.22);
  --emerald-a5: rgba(4, 120, 87, 0.32);
  --emerald-a6: rgba(4, 120, 87, 0.44);
  --emerald-a7: rgba(4, 120, 87, 0.58);
  --emerald-a8: rgba(4, 120, 87, 0.76);
  --emerald-a9: rgba(4, 120, 87, 1);
  --emerald-a10: rgba(16, 103, 76, 1);
  --emerald-a11: rgba(3, 94, 68, 1);
  --emerald-a12: rgba(15, 61, 44, 1);
  --emerald-contrast: #ffffff;
  --emerald-surface: rgba(245, 254, 251, 0.8);
  --emerald-indicator: #047857;
  --emerald-track: #047857;

  --page-background: #dcdcdc;
  --file-icon-fill: #ffffff;
}

/* Dark Mode */
.dark, .dark-theme,
[data-is-root-theme="true"].dark,
:root[class~="dark"] {
  --effects-translucent: rgba(29, 29, 33, 0.70);
  --tokens-colors-surface: rgba(0, 0, 0, 0.25);
  --accent-surface: rgba(18, 249, 157, 0.04);
  --white-to-dark: rgba(0, 0, 0, 0.25);
  --emerald-1: #0d1512;
  --emerald-2: #0f1f1a;
  --emerald-3: #0c3126;
  --emerald-4: #063f31;
  --emerald-5: #084A35;
  --emerald-6: #145c49;
  --emerald-7: #1e6d58;
  --emerald-8: #268169;
  --emerald-9: #047857;
  --emerald-10: #17906c;
  --emerald-11: #3dd9a0;
  --emerald-12: #EEEEEE;

  /* Alpha variants */
  --emerald-a1: rgba(0, 222, 69, 0.02);
  --emerald-a2: rgba(0, 255, 168, 0.06);
  --emerald-a3: rgba(0, 255, 162, 0.07); /* Figma Accent Alpha/3 = #00ffa212 */
  --emerald-a4: rgba(0, 255, 170, 0.21);
  --emerald-a5: rgba(0, 255, 176, 0.27);
  --emerald-a6: rgba(32, 255, 187, 0.33);
  --emerald-a7: rgba(53, 255, 196, 0.41);
  --emerald-a8: rgba(66, 255, 203, 0.49);
  --emerald-a9: rgba(4, 120, 87, 1);
  --emerald-a10: rgba(80, 255, 208, 0.56);
  --emerald-a11: rgba(136, 254, 206, 0.79); /* Figma Accent Alpha/11 = #88fececa */
  --emerald-a12: rgba(184, 255, 240, 0.94);

  --emerald-contrast: #ffffff;
  --emerald-surface: rgba(12, 49, 38, 0.5);
  --emerald-indicator: #3dd9a0;
  --emerald-track: #3dd9a0;

  --page-background: #111113;
  --file-icon-fill: #212225;
}

/* Map custom emerald to accent variables */
.radix-themes[data-accent-color="emerald"] {
  --accent-1: var(--emerald-1);
  --accent-2: var(--emerald-2);
  --accent-3: var(--emerald-3);
  --accent-4: var(--emerald-4);
  --accent-5: var(--emerald-5);
  --accent-6: var(--emerald-6);
  --accent-7: var(--emerald-7);
  --accent-8: var(--emerald-8);
  --accent-9: var(--emerald-9);
  --accent-10: var(--emerald-10);
  --accent-11: var(--emerald-11);
  --accent-12: var(--emerald-12);

  --accent-a1: var(--emerald-a1);
  --accent-a2: var(--emerald-a2);
  --accent-a3: var(--emerald-a3);
  --accent-a4: var(--emerald-a4);
  --accent-a5: var(--emerald-a5);
  --accent-a6: var(--emerald-a6);
  --accent-a7: var(--emerald-a7);
  --accent-a8: var(--emerald-a8);
  --accent-a9: var(--emerald-a9);
  --accent-a10: var(--emerald-a10);
  --accent-a11: var(--emerald-a11);
  --accent-a12: var(--emerald-a12);

  --accent-contrast: var(--emerald-contrast);
  --accent-surface: var(--emerald-surface);
  --accent-indicator: var(--emerald-indicator);
  --accent-track: var(--emerald-track);
}

/* ========================
   Chat Mode Color System
   Uses Radix built-in color scales which auto-switch for light/dark.
   ======================== */

.radix-themes {
  /* Chat Mode (iris) */
  --mode-chat-bg: var(--iris-a3);
  --mode-chat-fg: var(--iris-11);
  --mode-chat-icon: var(--iris-11);
  --mode-chat-active-bg: var(--iris-3);
  --mode-chat-active-toggle: var(--iris-9);

  /* Search Mode (emerald/accent — same palette, visually distinct layout) */
  --mode-search-bg: var(--accent-a3);
  --mode-search-fg: var(--accent-a11);
  --mode-search-icon: var(--accent-a11);
  --mode-search-active-bg: var(--accent-3);
  --mode-search-toggle: var(--accent-9);

  /* Web Search Mode (orange) */
  --mode-web-search-bg: var(--orange-a4);
  --mode-web-search-fg: var(--orange-11);
  --mode-web-search-icon: var(--orange-11);
  --mode-web-search-active-bg: var(--orange-3);
  --mode-web-search-toggle: var(--orange-9);

  /* Image Creation Mode (blue) */
  --mode-image-bg: var(--blue-3);
  --mode-image-fg: var(--blue-11);
  --mode-image-icon: var(--blue-9);
  --mode-image-active-bg: var(--blue-3);
  --mode-image-toggle: var(--blue-9);

  /* Agent Mode (green) */
  --mode-agent-bg: var(--green-a3);
  --mode-agent-fg: var(--green-11);
  --mode-agent-icon: var(--green-11);
  --mode-agent-active-bg: var(--green-3);
  --mode-agent-toggle: var(--green-9);

  /* Agent builder — neutral panel chrome (matches Radix gray scale; no accent tint) */
  --agent-flow-node-border: var(--gray-7);
  --agent-flow-node-header-bg: var(--gray-2);
  --agent-flow-card-shadow: 0 0 0 1px var(--gray-a5), 0 2px 10px var(--gray-a4);
  --agent-flow-card-shadow-selected: 0 0 0 1px var(--gray-11), 0 4px 16px var(--gray-a5);
  --agent-flow-canvas-bg: var(--gray-2);
  --agent-flow-canvas-dot: color-mix(in srgb, var(--gray-11) 7%, transparent);
  --agent-flow-edge: var(--gray-10);
  --agent-flow-edge-emphasis: var(--gray-12);
  --agent-flow-handle-border: var(--gray-10);
  --agent-flow-selection-bg: color-mix(in srgb, var(--accent-9) 12%, transparent);
  --agent-flow-selection-border: 1px dashed var(--accent-9);
  --agent-flow-hover-surface: var(--gray-a4);
  --agent-flow-section-header-bg: var(--gray-3);
  /* Solid stripes so tool lists do not show the canvas through alternating rows */
  --agent-flow-zebra-row: var(--gray-3);
  /* Readable copy + wells (Radix soft badges use accent-a11 on accent-a3 — needs strong fg) */
  --agent-flow-text: var(--gray-12);
  --agent-flow-text-muted: var(--gray-11);
  --agent-flow-well-bg: var(--gray-1);
  --agent-flow-well-border: var(--gray-6);
}

.radix-themes.dark {
  --agent-flow-node-border: var(--gray-7);
  --agent-flow-node-header-bg: var(--gray-3);
  --agent-flow-card-shadow: 0 0 0 1px var(--gray-a7), 0 2px 14px rgba(0, 0, 0, 0.45);
  --agent-flow-card-shadow-selected: 0 0 0 1px var(--gray-11), 0 4px 22px rgba(0, 0, 0, 0.55);
  --agent-flow-canvas-bg: color-mix(in srgb, var(--gray-1) 88%, black);
  --agent-flow-canvas-dot: color-mix(in srgb, var(--gray-11) 11%, transparent);
  --agent-flow-edge: var(--gray-9);
  --agent-flow-edge-emphasis: var(--gray-11);
  --agent-flow-handle-border: var(--gray-8);
  --agent-flow-selection-bg: color-mix(in srgb, var(--accent-9) 16%, transparent);
  --agent-flow-selection-border: 1px dashed var(--accent-10);
  --agent-flow-hover-surface: var(--gray-a5);
  --agent-flow-zebra-row: var(--gray-4);
  /* Slightly lifted from panel (often also gray-2) so copy reads clearly */
  --agent-flow-well-bg: var(--gray-3);
  --agent-flow-well-border: var(--gray-7);
}

/* ========================
   Shadow Definitions
   ======================== */

:root {
  /* Radix UI Shadow Scale */
  --shadow-1: 0 0 0 1px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-3: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-4: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  --shadow-5: 0 8px 16px 0 rgba(0, 0, 0, 0.12);
  --shadow-6: 0 0 0 1px rgba(0, 0, 51, 0.06), 0 12px 60px 0 rgba(0, 0, 0, 0.15), 0 16px 64px 0 rgba(0, 0, 85, 0.02), 0 16px 36px -20px rgba(0, 6, 46, 0.2);
}

/* ========================
   Base Styles
   ======================== */

/* ========================
   Base Styles
   ======================== */

body {
  font-family: 'Manrope', sans-serif;
  margin: 0;
  overflow: hidden;
}



/* Override Radix DropdownMenu item hover background */
.radix-themes [role="menuitem"][data-highlighted] {
  background-color: var(--olive-6) !important;
}

/* Red hover for destructive (delete) menu items */
.radix-themes [role="menuitem"][data-accent-color="red"][data-highlighted] {
  background-color: var(--red-3) !important;
}
.rt-DropdownMenuViewport {
  padding: 4px !important;
  border-radius: 3px !important;
  gap: 4px !important;
  backdrop-filter: blur(25px) !important;
}

/* Multi-line agent strategy options: Radix menu items default to a fixed single-line height */
.radix-themes .rt-DropdownMenuItem[data-agent-strategy-row] {
  height: auto !important;
  min-height: var(--space-6);
  align-items: flex-start !important;
}

/* Override Radix Themes default font and cursors */
.radix-themes {
  --default-font-family: 'Manrope', sans-serif;

  /* Override Radix Themes cursor tokens to use pointer for interactive elements */
  --cursor-button: pointer !important;
  --cursor-checkbox: pointer !important;
  --cursor-disabled: default !important;
  --cursor-link: pointer !important;
  --cursor-menu-item: pointer !important;
  --cursor-radio: pointer !important;
  --cursor-slider-thumb: grab !important;
  --cursor-slider-thumb-active: grabbing !important;
  --cursor-switch: pointer !important;
}

/* ========================
   Custom Tabs Styling
   ======================== */

/* Add custom bottom border indicator for active tab */
.radix-themes .rt-TabsTrigger[data-state="active"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent-8);
}

/* Ensure trigger has relative positioning for absolute ::after */
.radix-themes .rt-TabsTrigger {
  position: relative;
}

/* ========================
   Custom SegmentedControl Styling
   ======================== */

/* Selected item background using page background color */
.radix-themes .rt-SegmentedControlItem[data-state="on"] {
  background-color: var(--page-background) !important;
  border-radius: 4px !important;
  border: 1px solid var(--slate-a4) !important;
}

/* ========================
   Custom Checkbox Styling
   ======================== */
.radix-themes .rt-BaseCheckboxRoot[data-state="checked"]::before,
.radix-themes .rt-BaseCheckboxRoot[data-state="indeterminate"]::before {
  background-color: var(--accent-9) !important;
}

/* ========================
   Custom Dialog Styling
   ======================== */
.radix-themes .rt-DialogContent {
  box-shadow: 0 16px 36px -20px var(--Colors-Neutral-Neutral-Alpha-7, rgba(217, 237, 255, 0.25)),
    0 16px 64px 0 var(--Colors-Neutral-Neutral-Alpha-2, rgba(216, 244, 246, 0.04)),
    0 12px 60px 0 var(--Overlays-Black-Alpha-3, rgba(0, 0, 0, 0.15)) !important;
}

/* Service account dialog: Radix wraps content in .rt-DialogScroll (overflow auto) — we scroll inside
   .service-account-confirm-dialog__body only; disable outer scroll to avoid double scrollbars. */
.radix-themes .rt-DialogScroll:has(.service-account-confirm-dialog) {
  overflow: visible !important;
  align-items: center;
  justify-content: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
    max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  max-height: 100dvh;
}

.radix-themes .rt-DialogScrollPadding:has(.service-account-confirm-dialog) {
  overflow: visible !important;
  max-height: none !important;
}

/* ========================
   Cursor Utilities
   ======================== */

/* Ensure all interactive elements have pointer cursor */
button,
[role="button"],
a,
[role="link"],
[role="menuitem"],
[role="tab"],
input[type="button"],
input[type="submit"],
input[type="reset"],
summary {
  cursor: pointer;
}

/* ========================
   Scrollbar Utilities
   ======================== */

/* Hide scrollbar for Chrome, Safari, and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge, and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Always-visible, themed scrollbar used by the upload data dialog so users
   can clearly see when more files/folders are available below the fold
   (macOS overlay scrollbars would otherwise stay hidden until the user
   actively scrolls, making overflow invisible). */
.upload-scroll-area {
  scrollbar-width: thin;
  scrollbar-color: var(--slate-8) var(--olive-3);
}
.upload-scroll-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  -webkit-appearance: none;
}
.upload-scroll-area::-webkit-scrollbar-track {
  background: var(--olive-3);
  border-radius: 8px;
  margin: 2px 0;
}
.upload-scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--slate-8);
  border-radius: 8px;
  border: 2px solid var(--olive-3);
  background-clip: padding-box;
  min-height: 32px;
}
.upload-scroll-area::-webkit-scrollbar-thumb:hover {
  background-color: var(--slate-10);
  background-clip: padding-box;
}

/* Team members list scrollbar (used in team create/edit panels). */
.team-member-scroll-area {
  scrollbar-width: thin;
  scrollbar-color: var(--slate-8) var(--olive-3);
}
.team-member-scroll-area::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  -webkit-appearance: none;
}
.team-member-scroll-area::-webkit-scrollbar-track {
  background: var(--olive-3);
  border-radius: 8px;
  margin: 2px 0;
}
.team-member-scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--slate-8);
  border-radius: 8px;
  border: 2px solid var(--olive-3);
  background-clip: padding-box;
  min-height: 32px;
}
.team-member-scroll-area::-webkit-scrollbar-thumb:hover {
  background-color: var(--slate-10);
  background-clip: padding-box;
}

.kb-search-input::placeholder {
  color: var(--gray-10);
}

.collections-search-input::placeholder {
  color: var(--slate-a9);
}

/* ========================
   Markdown Content Fixes
   ======================== */

/* Reduce spacing for paragraphs inside list items when followed by other elements */
li > p {
  margin-bottom: var(--space-1) !important;
}

/* Remove extra margin from last child in list items */
li > *:last-child {
  margin-bottom: 0 !important;
}

/* Ensure blockquotes in lists have proper spacing */
li > blockquote {
  margin-top: var(--space-2) !important;
}

/* ========================
   Animations
   ======================== */

@keyframes slideInFromRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

@keyframes shimmer-sweep {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes generatingShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.generating-shimmer {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.generating-shimmer-base {
  color: var(--accent-a11);
}

.generating-shimmer-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent 35%,
    var(--accent-12) 50%,
    transparent 65%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: generatingShimmer 1.5s linear infinite;
  pointer-events: none;
}

@keyframes msgActionsIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ========================
   Sidebar title typing animation
   Plays once when a new conversation title is revealed after generation.
   ======================== */

@keyframes typing-reveal {
  from { width: 0; }
  to   { width: 100%; }
}

.title-typing-animation {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing-reveal 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ========================
   Mobile Bottom Sheet Animations
   ======================== */

@keyframes mobileSheetSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes mobileSheetBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ========================
   Landscape Block Overlay
   Shown on small screens in landscape to prompt users to rotate to portrait.
   Pure CSS — no JS or React state required.
   ======================== */

@media screen and (orientation: landscape) and (max-width: 900px) {
  .landscape-block-overlay {
    display: flex !important;
  }
}

.landscape-block-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--color-background);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
  text-align: center;
}

@keyframes chatWidgetExpandIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ========================
   Agent builder (React Flow) — neutral canvas, matches dashboard panels
   ======================== */

.agent-builder-flow {
  background: var(--agent-flow-canvas-bg);
  font-family: Manrope, var(--default-font-family), sans-serif;
  color: var(--agent-flow-text);
  -webkit-font-smoothing: antialiased;
}

/* In-canvas connection preview + marquee selection — follow theme (not xyflow light defaults). */
.agent-builder-flow .react-flow {
  --xy-connectionline-stroke: var(--agent-flow-edge-emphasis);
  --xy-connectionline-stroke-width: 1.5;
}

.agent-builder-flow .react-flow__selection,
.agent-builder-flow .react-flow__nodesselection-rect {
  background: var(--agent-flow-selection-bg) !important;
  border: var(--agent-flow-selection-border) !important;
}

/* React Flow inner wrappers do not inherit from the outer Box; force readable fg on the graph. */
.agent-builder-flow .react-flow,
.agent-builder-flow .react-flow__viewport,
.agent-builder-flow .react-flow__renderer,
.agent-builder-flow .react-flow__node {
  color: var(--agent-flow-text);
}

.agent-builder-flow .flow-node-card,
.agent-builder-flow .flow-node-surface {
  color: var(--agent-flow-text);
}

/* Gray soft badges: bump to accent-12 for contrast on accent-a3 fill */
.agent-builder-flow .flow-node-card .rt-Badge.rt-variant-soft[data-accent-color='gray'] {
  color: var(--gray-12);
}

/* Agent core connection chips (custom surfaces; reinforce fg in nested transform context) */
.agent-builder-flow .agent-core-connection-chip {
  color: var(--agent-flow-text);
}

.agent-builder-flow .agent-core-connection-chip .rt-Text {
  color: var(--agent-flow-text);
}

/* Let connection handles sit outside the node box (they use negative inset); avoid clipping */
.agent-builder-flow .react-flow__node {
  overflow: visible !important;
}

.agent-builder-flow .react-flow__node > * {
  overflow: visible !important;
}

.agent-builder-flow .react-flow__node .react-flow__handle {
  opacity: 1;
  pointer-events: all;
}

.agent-builder-flow .react-flow__handle.agent-builder-node-handle {
  border: 1.5px solid var(--agent-flow-handle-border) !important;
}

.agent-builder-flow .react-flow__handle.agent-builder-node-handle:hover {
  border-color: var(--gray-11) !important;
  box-shadow:
    0 0 0 1px var(--color-panel-solid),
    0 0 0 3px var(--gray-a5),
    0 1px 2px var(--gray-a6) !important;
}

/* Handle: connected state — subtle fill, slightly stronger border */
.agent-builder-flow .react-flow__handle.agent-builder-node-handle[data-connected="true"] {
  background: var(--gray-a3) !important;
  border-color: var(--gray-9) !important;
}

/* Delete control on generic flow nodes: hidden until hover/focus within the card */
.agent-builder-flow .flow-node-card .flow-node-delete {
  opacity: 0;
  transition: opacity 0.15s ease;
  display: inline-flex;
  flex-shrink: 0;
}

.agent-builder-flow .flow-node-card:hover .flow-node-delete,
.agent-builder-flow .flow-node-card:focus-within .flow-node-delete {
  opacity: 1;
}

.agent-builder-flow .flow-node-surface {
  transition:
    box-shadow 0.18s ease,
    border-color 0.18s ease;
  /* Opaque stacking context — avoids translucent Radix panel tokens bleeding the graph through */
  isolation: isolate;
  background-color: var(--color-panel-solid);
}

/* Dragged node above siblings so edges and other nodes do not paint over the card */
.agent-builder-flow .react-flow__node.draggable.dragging {
  z-index: 50 !important;
}

/* Toolset “add tools” control: visible on any row / well (soft ghost buttons were nearly invisible) */
.agent-builder-flow .toolset-flow-add-tools.rt-IconButton {
  background-color: var(--gray-3);
  color: var(--agent-flow-text);
  box-shadow: inset 0 0 0 1px var(--gray-7);
}

.agent-builder-flow .toolset-flow-add-tools.rt-IconButton:hover {
  background-color: var(--gray-4);
}

.radix-themes.dark .agent-builder-flow .toolset-flow-add-tools.rt-IconButton {
  background-color: var(--gray-4);
  box-shadow: inset 0 0 0 1px var(--gray-8);
}

.radix-themes.dark .agent-builder-flow .toolset-flow-add-tools.rt-IconButton:hover {
  background-color: var(--gray-5);
}

/* Per-row remove: soft red on translucent rows was hard to see */
.agent-builder-flow .toolset-flow-remove-tool.rt-IconButton {
  background-color: var(--gray-3);
  box-shadow: inset 0 0 0 1px var(--gray-7);
  color: var(--red-11);
}

.agent-builder-flow .toolset-flow-remove-tool.rt-IconButton:hover {
  background-color: var(--red-3);
  box-shadow: inset 0 0 0 1px var(--red-7);
  color: var(--red-12);
}

.radix-themes.dark .agent-builder-flow .toolset-flow-remove-tool.rt-IconButton {
  background-color: var(--gray-4);
  color: var(--red-11);
}

.radix-themes.dark .agent-builder-flow .toolset-flow-remove-tool.rt-IconButton:hover {
  background-color: var(--red-4);
}

.agent-builder-flow .react-flow__controls {
  border-radius: var(--radius-3);
  border: 1px solid var(--agent-flow-node-border);
  box-shadow: var(--agent-flow-card-shadow);
  background: var(--color-panel-solid);
  overflow: hidden;
}

.agent-builder-flow .react-flow__controls-button {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--agent-flow-node-border);
  background: var(--color-panel-solid);
  color: var(--gray-11);
  transition: background-color 0.12s ease, color 0.12s ease;
}

.agent-builder-flow .react-flow__controls-button:last-child {
  border-bottom: none;
}

.agent-builder-flow .react-flow__controls-button:hover {
  background: var(--gray-3);
  color: var(--gray-12);
}

.radix-themes.dark .agent-builder-flow .react-flow__controls-button:hover {
  background: var(--gray-4);
}

.agent-builder-draggable-row {
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

/* Same hover/active treatment as chat `SidebarItem` */
.agent-builder-draggable-row:not(.agent-builder-draggable-row--disabled):hover {
  background-color: var(--olive-3);
  border-color: var(--olive-4);
  box-shadow: none;
}

.agent-builder-draggable-row--disabled {
  cursor: not-allowed;
}

.agent-builder-palette-nest {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin-left: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--olive-4);
}

.agent-builder-toolsets-search.rt-TextFieldRoot.rt-variant-surface {
  --text-field-focus-color: var(--olive-9);
  width: 100%;
  min-width: 0;
  background-color: var(--olive-2) !important;
  background-clip: border-box;
  box-shadow: inset 0 0 0 1px var(--olive-4) !important;
  border-radius: var(--radius-2);
  transition:
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.agent-builder-toolsets-search.rt-TextFieldRoot.rt-variant-surface:focus-within {
  box-shadow:
    inset 0 0 0 1px var(--olive-6),
    0 0 0 2px color-mix(in srgb, var(--olive-9) 18%, transparent) !important;
}

.agent-builder-toolsets-search .rt-TextFieldInput::placeholder {
  color: var(--slate-11);
}

.agent-builder-toolsets-search.rt-TextFieldRoot:has(.rt-TextFieldInput:disabled) {
  opacity: 0.65;
  cursor: not-allowed;
}

.agent-builder-section-header {
  min-height: 40px;
  padding: 6px 6px 6px 10px;
  margin-left: -4px;
  margin-right: -4px;
  border-radius: var(--radius-2);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.agent-builder-section-header:hover {
  background-color: var(--olive-3);
  border-color: var(--olive-4);
}

.agent-builder-sidebar-category-row {
  border: 1px solid transparent;
  background: transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.agent-builder-sidebar-category-row:hover {
  background-color: var(--olive-3);
  border-color: var(--olive-4);
}

.service-account-confirm-dialog__body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--space-2) 2px var(--space-1) 0;
  margin-top: var(--space-2);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/*
 * Radix Tooltip hover must hit the Trigger element. Disabled native controls do not
 * bubble pointer events; letting the wrapper receive hover fixes tooltips on locked fields.
 */
.ph-disabled-field-tooltip-wrap input:disabled,
.ph-disabled-field-tooltip-wrap textarea:disabled,
.ph-disabled-field-tooltip-wrap select:disabled,
.ph-disabled-field-tooltip-wrap button:disabled,
.ph-disabled-field-tooltip-wrap [data-disabled] {
  pointer-events: none !important;
}
