/* Primary Modern Scrollbar - Based on Chat Interface Standard */
.modern-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
  padding-right: 4px;
}

.modern-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.modern-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.modern-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

.modern-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(128, 128, 128, 0.2);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 20px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.modern-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(128, 128, 128, 0.5);
  border: 1px solid transparent;
  background-clip: padding-box;
  border-radius: 4px;
}

/* Dark theme specific scrollbar styling - using .dark class */
.dark .modern-scrollbar,
.dark.modern-scrollbar {
  scrollbar-color: rgba(200, 200, 200, 0.4) transparent;
}

.dark .modern-scrollbar::-webkit-scrollbar-thumb,
.dark.modern-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(200, 200, 200, 0.3);
}

.dark .modern-scrollbar::-webkit-scrollbar-thumb:hover,
.dark.modern-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(200, 200, 200, 0.6);
  border: 1px solid transparent;
}

/* Also support media query for system preference */
@media (prefers-color-scheme: dark) {
  .modern-scrollbar {
    scrollbar-color: rgba(200, 200, 200, 0.4) transparent;
  }

  .modern-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(200, 200, 200, 0.3);
  }

  .modern-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(200, 200, 200, 0.6);
    border: 1px solid transparent;
  }
}

/* Textarea-specific styling to maintain consistency */
textarea.modern-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

textarea.modern-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(128, 128, 128, 0.2);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

textarea.modern-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(128, 128, 128, 0.5);
  border: 1px solid transparent;
  background-clip: padding-box;
  border-radius: 4px;
}

/* Dark theme for textarea - using .dark class */
.dark textarea.modern-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(200, 200, 200, 0.3);
}

.dark textarea.modern-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(200, 200, 200, 0.6);
  border: 1px solid transparent;
}

/* Also support media query for system preference */
@media (prefers-color-scheme: dark) {
  textarea.modern-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(200, 200, 200, 0.3);
  }

  textarea.modern-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(200, 200, 200, 0.6);
    border: 1px solid transparent;
  }
}
/* Tree Node Styling with Visual Hierarchy Lines */

.tree-node-item {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
}

.tree-node-item:hover {
  background-color: var(--secondary-hover-color) !important;
}

.tree-node-item.selected {
  background-color: var(--active-color) !important;
}

/* Tree lines container */
.tree-lines {
  display: flex;
  align-items: stretch;
  height: 32px;
  flex-shrink: 0;
}

/* Individual tree line segments */
.tree-line-segment {
  position: relative;
  flex-shrink: 0;
}

/* Tree connector for current level */
.tree-connector {
  position: relative;
  flex-shrink: 0;
}

/* Vertical lines */
.tree-line-vertical {
  pointer-events: none;
}

/* Horizontal lines */
.tree-line-horizontal {
  pointer-events: none;
}

/* Corner lines for last child */
.tree-line-corner {
  pointer-events: none;
}

/* Children container */
.tree-children {
  display: flex;
  flex-direction: column;
}

/* Smooth transitions for expand/collapse */
.tree-node-item button {
  transition: transform 0.2s ease;
}

.tree-node-item button:hover {
  opacity: 0.7;
}

/* Ensure proper spacing and alignment */
.tree-node-item > * {
  flex-shrink: 0;
}

.tree-node-item > span:first-of-type {
  flex-shrink: 1;
  min-width: 0;
}

.upload-container {
  width: 100%;
  height: 100%;
}

.upload-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  padding: 1rem;
}

/* Removed tacky animations */

.copy-tick {
  display: block;
}

.tick-check {
  stroke: currentColor;
  fill: none;
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: tick-draw 420ms ease-out forwards, tick-pop 400ms ease-out;
}

@keyframes tick-pop {
  0% { opacity: 0; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.06); }
  60% { transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes tick-draw {
  0% { stroke-dashoffset: 36; }
  100% { stroke-dashoffset: 0; }
}

/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	text-shadow: 0 1px white;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #f5f2f0;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #999;
}

.token.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #905;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #690;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #9a6e3a;
	/* This background color was intended by the author of this theme. */
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #07a;
}

.token.function,
.token.class-name {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}
/* Prism theme overrides to integrate with Quible theme variables */

/* Make code background inherit the surrounding card background */
pre[class*="language-"],
code[class*="language-"] {
  background: transparent !important;
  color: var(--text-color) !important;
  text-shadow: none !important;
}

/* Fix comments styling and ensure no pill-like backgrounds leak in */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: rgba(var(--text-color-rgb), 0.55) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Ensure inline code tokens never overlay */
code[class*="language-"] .token {
  background: transparent !important;
}

/* Improve selection visibility inside code blocks */
pre[class*="language-"] ::-moz-selection {
  background: rgba(var(--text-color-rgb), 0.2) !important;
}
pre[class*="language-"] ::selection,
pre[class*="language-"] ::-moz-selection {
  background: rgba(var(--text-color-rgb), 0.2) !important;
}

/* Keep line-height consistent to avoid overlap */
pre[class*="language-"] {
  line-height: 1.5 !important;
}

/* Enhanced JSON syntax highlighting ONLY for ConformML JSON viewer in dark mode */
[data-theme="dark"] .conformml-json-viewer .token.property {
  color: #79C0FF !important; /* Bright blue - GitHub dark theme inspired */
}

[data-theme="dark"] .conformml-json-viewer .token.string {
  color: #A5D6A7 !important; /* Bright green */
}

[data-theme="dark"] .conformml-json-viewer .token.number {
  color: #79C0FF !important; /* Bright blue for numbers */
}

[data-theme="dark"] .conformml-json-viewer .token.boolean,
[data-theme="dark"] .conformml-json-viewer .token.null {
  color: #79C0FF !important; /* Bright blue */
}

[data-theme="dark"] .conformml-json-viewer .token.punctuation {
  color: #C9D1D9 !important; /* Light gray for readability */
}

[data-theme="dark"] .conformml-json-viewer .token.operator {
  color: #FF7B72 !important; /* Coral for operators */
}


.model-viewer-container {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  transition: height 0.1s ease-out;
}

.model-viewer {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

/* Resize handle styles */
.model-viewer-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  background-color: transparent;
  z-index: 2;
}

.model-viewer-resize-handle::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--border-color, #e2e8f0);
  border-radius: 2px;
  transition: background-color 0.2s;
}

.model-viewer-resize-handle:hover::after,
.model-viewer-resize-handle:active::after {
  background-color: var(--text-color, #333);
}

/* Loading overlay */
.model-viewer-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.model-viewer-loading-content {
  text-align: center;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.model-viewer-loading-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid var(--primary-color, #4299e1);
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.model-viewer-loading-text {
  font-size: 14px;
  color: var(--text-color, #333);
  margin-bottom: 8px;
}

.model-viewer-loading-progress {
  font-size: 12px;
  color: var(--text-secondary-color, #666);
  font-weight: bold;
}

/* Error message */
.model-viewer-error {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 3;
}

.model-viewer-error-content {
  background-color: white;
  border: 1px solid #e74c3c;
  border-radius: 6px;
  padding: 15px;
  display: flex;
  align-items: center;
  max-width: 80%;
}

.model-viewer-error-icon {
  font-size: 24px;
  margin-right: 10px;
}

.model-viewer-error-text {
  color: #e74c3c;
  font-size: 14px;
}

/* Popout button */
.model-viewer-popout-button {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333333;
}

.model-viewer-popout-button svg {
  stroke: currentColor;
}

.model-viewer-popout-button:hover {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Secondary controls toolbar */
.model-viewer-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 6px;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 2;
  transition: opacity 0.2s ease;
  opacity: 0.9;
}

.model-viewer-controls:hover {
  opacity: 1;
}

.model-viewer-control-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background-color: white;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-color, #333);
  font-size: 12px;
  transition: background-color 0.2s;
}

.model-viewer-control-button:hover {
  background-color: var(--hover-color, #f7fafc);
}

.model-viewer-control-button svg {
  width: 14px;
  height: 14px;
}

/* End of model-viewer-control-button */

/* --- Default Toolbar Hiding --- */
/* Apply these hiding rules by default to ANY viewer toolbar */
.adsk-toolbar, 
.adsk-viewing-toolbar,
.adsk-viewing-viewer .toolbar, /* Keep targeting nested versions too */
.adsk-viewing-viewer .light-theme > .toolbar,
[data-testid="toolbar"],
.forgeviewer-toolbar {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important; /* Keep absolute to prevent layout shifts when hidden */
  z-index: -9999 !important; /* Ensure it's behind */
}

/* Force hide other specific viewer elements ONLY in embedded viewer (non-popout) */
.embedded-viewer .adsk-viewing-viewer .propertiespanel,
.embedded-viewer .adsk-viewing-viewer .viewcubeui,
.embedded-viewer .adsk-viewing-viewer .viewcube {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  z-index: -9999 !important;
}

/* --- Toolbar Force Show Override --- */
/* This rule applies when handleToolbar(show=true) adds the class */
.adsk-toolbar.force-show-toolbar,
.adsk-viewing-toolbar.force-show-toolbar {
  display: block !important; /* Override display: none */
  visibility: visible !important; /* Override visibility: hidden */
  opacity: 1 !important; /* Override opacity: 0 */
  position: absolute !important; /* Keep absolute positioning */
  bottom: 15px !important;      /* Position from the bottom */
  left: 50% !important;         /* Center horizontally */
  transform: translateX(-50%) !important; /* Adjust for centering */
  z-index: 3 !important; /* Bring it to the front */
}

/* Ensure common internal toolbar controls are also shown when parent has force-show-toolbar */
.force-show-toolbar .adsk-toolbar-control-grouping,
.force-show-toolbar .adsk-toolbar-button {
  display: inline-block !important; /* or flex, etc. */
  visibility: visible !important;
  opacity: 1 !important;
}

/* --- End Toolbar Section --- */

/* --- Viewer Background --- */
/* Force white background throughout the viewer */
.adsk-viewing-viewer {
  background-color: #ffffff !important;
}

/* Canvas background */
canvas.adsk-viewing-viewer {
  background-color: #ffffff !important;
}

/* --- Properties Panel --- */
.model-viewer-properties-panel {
  /* Attempt to optimize rendering during native resize */
  will-change: transform, opacity;
  /* Keep native resize enabled as per user request */
  resize: both; /* Or vertical/horizontal if preferred */
  overflow: auto; /* Needed for native resize */
}

/* Force white background throughout the viewer */
.adsk-viewing-viewer {
  background-color: #ffffff !important;
}

/* Canvas background */
canvas.adsk-viewing-viewer {
  background-color: #ffffff !important;
}

/* End of toolbar force-show section */


/* --- Properties Panel --- */
/* Re-introduce a basic rule for the properties panel to disable native resize */
.model-viewer-properties-panel {
  /* If other essential default styles for positioning/overflow were removed from CSS 
     and are only inline, this rule might primarily just be for the resize property. 
     The inline styles in ModelViewer.tsx will handle its base appearance. */
  resize: none !important; 
}

/* <<< NEW STYLES FOR CREATE ISSUE PANEL AND BUTTON >>> */

.model-viewer-toolbar-buttons {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3; /* Ensure it's above viewer but potentially below modals */
  display: flex;
  gap: 8px; /* Space between buttons */
}

/* Style for the new Create Issue button (can share some with popout button) */
.model-viewer-create-issue-button {
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333333;
}

.model-viewer-create-issue-button svg {
  stroke: currentColor;
}

.model-viewer-create-issue-button:hover {
  background-color: #e0e0e0;
}

/* Basic styles for the CreateIssuePanel */
.create-issue-panel {
  position: absolute;
  top: 10px; /* Add margin from top */
  right: 10px; /* Add margin from right */
  /* width: 350px; */ /* Width is now controlled by state in the component */
  max-width: 90%; /* Prevent panel from becoming too wide */
  min-width: 250px; /* Consistent with JS logic */
  height: calc(100% - 20px); /* Add margin from bottom (10px top + 10px bottom) */
  background-color: rgba(255, 255, 255, 0.95); /* Slightly more opaque */
  border: 1px solid #bbb;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 15px;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 10; /* Ensure it's above viewer but below modals generally */
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: width 0.1s ease-out; /* Smooth width transition (optional) */
}

.create-issue-panel .resize-handle-left {
  position: absolute;
  left: -5px; /* Position handle slightly outside the panel border */
  top: 0;
  width: 10px; /* Make it easier to grab */
  height: 100%;
  cursor: ew-resize;
  z-index: 11; /* Above panel content slightly */
  /* background-color: rgba(0,0,255,0.1); */ /* Optional: for debugging handle position */
}

.create-issue-panel h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.1rem;
  color: var(--text-color);
}

.create-issue-panel .form-step h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
}

.create-issue-panel .form-group {
  margin-bottom: 12px;
}

.create-issue-panel label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
}

.create-issue-panel input[type="text"],
.create-issue-panel input[type="date"],
.create-issue-panel textarea,
.create-issue-panel select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border-color, #ccc);
  border-radius: 4px;
  background-color: var(--input-background, white);
  color: var(--text-color);
  box-sizing: border-box;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
}

.create-issue-panel textarea {
  min-height: 80px;
  resize: vertical;
  font-family: 'Inter', sans-serif;
}

.create-issue-panel button {
  padding: 8px 12px;
  border: 1px solid var(--border-color, #ccc);
  border-radius: 4px;
  background-color: var(--secondary-button-background, #f0f0f0);
  color: var(--text-color);
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-right: 8px; /* Spacing for multiple buttons */
}

.create-issue-panel button:hover {
  background-color: var(--secondary-hover-color, #e0e0e0);
}

.create-issue-panel button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.create-issue-panel button[type="submit"] { /* If you add type=submit */
  background-color: var(--primary-color, #007bff);
  color: white;
}

.create-issue-panel button[type="submit"]:hover {
  background-color: var(--primary-hover-color, #0056b3);
}

/* Ensure .modern-scrollbar styles from AdminConsoleTab.css are available or define them here if needed */
/* For simplicity, assuming .modern-scrollbar class will be applied and styles are global or imported */

/* <<< NEW: Light Theme for Create Issue Panel >>> */
.create-issue-panel-light-theme {
  background-color: var(--background-color); /* Light theme background */
  color: var(--text-color); /* Light theme text color */
  border: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 15px;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.create-issue-panel-light-theme h3,
.create-issue-panel-light-theme h4 {
  color: var(--text-color);
  margin-bottom: 10px;
}

.create-issue-panel-light-theme label {
  color: var(--text-color-secondary, #666);
  display: block;
  margin-bottom: 5px;
  font-size: 0.9rem;
}

.create-issue-panel-light-theme input[type="text"],
.create-issue-panel-light-theme input[type="date"],
.create-issue-panel-light-theme textarea,
.create-issue-panel-light-theme select {
  background-color: var(--input-background);
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.9rem;
  outline: none;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.create-issue-panel-light-theme input[type="text"]:hover,
.create-issue-panel-light-theme input[type="date"]:hover,
.create-issue-panel-light-theme textarea:hover,
.create-issue-panel-light-theme select:hover {
  background-color: var(--hover-color);
}

.create-issue-panel-light-theme input[type="text"]:focus,
.create-issue-panel-light-theme input[type="date"]:focus,
.create-issue-panel-light-theme textarea:focus,
.create-issue-panel-light-theme select:focus {
  border-color: var(--border-color); /* Keep neutral border to avoid blue/orange glow */
  outline: none;
  box-shadow: none;
}

/* Placeholder text should be theme-aware for readability */
.create-issue-panel-light-theme input::-moz-placeholder, .create-issue-panel-light-theme textarea::-moz-placeholder {
  color: rgba(var(--text-color-rgb, 255,255,255), 0.6);
}
.create-issue-panel-light-theme input::placeholder,
.create-issue-panel-light-theme textarea::placeholder {
  color: rgba(var(--text-color-rgb, 255,255,255), 0.6);
}

/* Suppress global :focus-visible outline inside this panel */
.create-issue-panel-light-theme *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.create-issue-panel-light-theme button {
  background-color: #007bff; /* Primary button color - consider a CSS var if available */
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.create-issue-panel-light-theme button:hover {
  background-color: #0056b3; /* Darker shade for hover */
}

.create-issue-panel-light-theme button:disabled {
  background-color: var(--active-color); /* Use a theme variable for disabled state */
  color: var(--text-color-secondary);
  cursor: not-allowed;
}

.create-issue-panel-light-theme .form-step-indicator span.active {
  background-color: #007bff;
  color: white;
}

.create-issue-panel-light-theme .form-step-indicator span {
  background-color: var(--input-background); /* Lighter background for non-active steps */
  color: var(--text-color);
}

.create-issue-panel-light-theme .location-coordinates span {
  color: #28a745; /* Green for coordinates, consider a theme variable if appropriate */
  font-weight: bold;
}

.create-issue-panel-light-theme .error-message {
  color: var(--error-text);
  background-color: var(--error-background);
  padding: 8px;
  border-radius: 4px;
  font-size: 0.85rem;
  margin-top: 5px;
}

/* Ensure the resize handle is styled appropriately if not already */
.create-issue-panel-light-theme .resize-handle-left {
  /* Styles from previous implementation, ensure they work with light theme */
  width: 8px;
  position: absolute;
  top: 0;
  left: -4px; /* Position slightly outside for easier grabbing */
  height: 100%;
  cursor: col-resize;
  z-index: 20;
}

/* --- Styles for Model Viewer Toolbar (in ChatInterface.tsx) --- */
/* This wrapper is applied in ChatInterface.tsx to center the toolbar */
.model-viewer-toolbar-wrapper {
  width: 85%; /* Matches the model viewer's container width */
  margin: 0 auto; /* Centers the toolbar */
  /* border: 1px dashed red; /* For debugging alignment */
}

.model-viewer-external-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* <<< ADDED to align buttons to the right */
  padding-top: 1rem;    /* 16px */
  padding-bottom: 0.5rem; /* 8px */
  /* The toolbar wrapper handles horizontal centering and width constraint. */
  /* Spacing for buttons is handled by button margins. */
  /* border-bottom: 1px solid var(--border-color, #e0e0e0); /* Example border */
  margin-bottom: 0.25rem; /* Space below toolbar before viewer */
}

.model-viewer-toolbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem; /* <<< CHANGED from 0.25rem to match ChatHistory buttons */
  margin-left: 0.125rem; /* <<< CHANGED from 0.5rem to 0.25rem (4px) */
  border-radius: 0.375rem; /* 6px, like rounded-md */
  background-color: transparent !important; /* Explicitly transparent */
  border: 1px solid transparent; /* Consistent border */
  cursor: pointer;
  color: var(--text-color); /* <<< CHANGED from --text-primary */
  stroke: var(--text-color); /* <<< CHANGED from --text-primary */
  transition: background-color 0.15s ease-in-out;
}

.model-viewer-toolbar-button:hover {
  background-color: var(--surface-secondary, #f0f0f0) !important; /* Theme-aware hover */
}

.model-viewer-toolbar-button:active {
  background-color: var(--surface-tertiary, #e0e0e0) !important; /* Theme-aware active */
}

/* Lucide icons are typically controlled by the 'size' prop in React.
   This ensures the SVG itself respects that size. */
.model-viewer-toolbar-button svg { display: inline-block; }
/* --- End Model Viewer Toolbar Styles --- */


/* --- Refined Styles for CreateIssuePanel.tsx Buttons (within its light theme) --- */
/* These styles should apply to buttons inside .create-issue-panel-light-theme */
/* The existing .create-issue-panel-light-theme button styles seemed to make buttons blue. */
/* This will override that to be transparent with borders, matching the user request. */

.create-issue-panel-light-theme button,
.create-issue-panel-light-theme input[type="button"], /* Target input buttons as well */
.create-issue-panel-light-theme input[type="submit"] { /* Target submit inputs */
  background-color: transparent !important;
  border: 1px solid #d1d5db !important; /* Light theme border (e.g., cool-gray-300) */
  color: var(--text-color) !important;             /* Theme-aware text color */
  padding: 0.4rem 0.8rem; /* Adjusted padding for a good feel */
  border-radius: 0.375rem; /* 6px, like rounded-md */
  cursor: pointer;
  font-size: 0.875rem; /* 14px, text-sm */
  line-height: 1.25;   /* For vertical text centering */
  margin-top: 0.5rem;  /* Space above button */
  margin-right: 0.5rem;/* Space to the right if buttons are inline */
  transition: background-color 0.15s ease-in-out;
  min-height: 2rem;    /* 32px, ensure decent clickable height */
  min-width: auto;     /* Allow button to size to its content + padding */
  text-align: center;
}

.create-issue-panel-light-theme button:hover,
.create-issue-panel-light-theme input[type="button"]:hover,
.create-issue-panel-light-theme input[type="submit"]:hover {
  background-color: var(--secondary-hover-color) !important; /* Use secondary hover for gray background */
}

.create-issue-panel-light-theme button:disabled,
.create-issue-panel-light-theme input[type="button"]:disabled,
.create-issue-panel-light-theme input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: transparent !important; /* Keep transparent even when disabled */
  border-color: #e5e7eb !important; /* Slightly lighter border for disabled state */
  color: #9ca3af !important; /* Muted text color for disabled state */
}

/* Ensure SVGs within panel buttons also pick up text color for stroke */
.create-issue-panel-light-theme button svg {
  stroke: currentColor; /* Make SVG stroke use the button's text color */
  width: 1em;  /* General size for inline SVGs if not from Lucide */
  height: 1em;
  vertical-align: middle; /* Better alignment with text */
  margin-right: 0.25em; /* Space between icon and text if both are present */
}

/* Remove margin from the last button in a group to prevent double spacing */
.create-issue-panel-light-theme .form-group button:last-child,
.create-issue-panel-light-theme .form-step button:last-child {
    margin-right: 0;
}
/* --- End CreateIssuePanel Button Styles --- */ 

/* Hide Autodesk/Forge built-in loading splash/spinner */
.adsk-viewing-viewer .adsk-loading-indicator,
.adsk-viewing-viewer .loading-indicator,
.adsk-viewing-viewer .progress,
.adsk-viewing-viewer .spinner,
.adsk-loading-indicator,
.adsk-loading-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Also hide the "Powered by Autodesk" message area inside progress if present */
.adsk-viewing-viewer .progress .message {
  display: none !important;
} .issue-details-panel {
  position: absolute;
  top: 0;
  right: 10px;
  height: 100%;
  background-color: var(--background-color);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  /* Prevent the panel from affecting the WebGL canvas compositing */
  isolation: isolate;
  contain: layout paint;
  backface-visibility: hidden;
}

/* Remove legacy explicit light theme class; colors come from CSS variables */

.resize-handle-left {
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  cursor: col-resize;
  background-color: transparent;
  transition: background-color 0.2s;
}

.resize-handle-left:hover {
  background-color: var(--hover-color);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  /* Match chat input background */
  background-color: var(--chat-interface-default-backgrounds);
  color: var(--text-color);
}

.panel-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
}

.panel-header-buttons {
  display: flex;
  gap: 0;
  min-width: 80px; /* Reserve space for both buttons to prevent header shrinking */
  justify-content: flex-end;
}

.edit-button,
.close-button {
  color: var(--text-color);
  border: 1px solid transparent !important;
  border-radius: 6px;
}

/* Ensure edit icon orientation matches rename icon elsewhere */
.edit-button svg {
  display: block;
}

.close-button {
  color: var(--text-color);
  font-size: 16px;
}

/* Override any hover classes and use secondary hover for header buttons */
.issue-details-panel .panel-header .edit-button:hover,
.issue-details-panel .panel-header .close-button:hover {
  background-color: var(--secondary-hover-color) !important;
  border-color: transparent !important;
}

.panel-content {
  padding: 0;
  overflow-y: auto;
  flex: 1;
}

.section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.section h4 {
  margin: 0 0 16px 0;
  font-size: 1em;
  font-weight: 600;
  color: var(--text-color-secondary, #666);
  letter-spacing: 0.5px;
}

.issue-field {
  margin-bottom: 12px;
}

.issue-field:last-child {
  margin-bottom: 0;
}

.issue-field label {
  display: block;
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text-color-secondary, #666);
  font-size: 12px;
}

.field-value {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-color);
}

.field-value.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 12px;
  text-transform: capitalize;
}

/* Remove the old non-custom status color */
.field-value.status-badge:not(.custom) {
  background-color: var(--active-color);
  color: var(--text-color);
}

/* Status-specific colors matching ACC colors */
.field-value.status-badge.open {
  background-color: rgba(255, 152, 0, 0.1); /* Orange with 10% opacity */
  color: #FF9800;
}

.field-value.status-badge.closed {
  background-color: rgba(158, 158, 158, 0.1); /* Grey with 10% opacity */
  color: #9E9E9E;
}

.field-value.status-badge.pending {
  background-color: rgba(33, 150, 243, 0.1); /* Blue with 10% opacity */
  color: #0769b8;
}

.field-value.status-badge.completed {
  background-color: rgba(158, 158, 158, 0.1); /* Grey with 10% opacity */
  color: #9E9E9E;
}

.field-value.status-badge.in-review,
.field-value.status-badge.in_review {  /* Add support for both formats */
  background-color: rgba(156, 39, 176, 0.1); /* Purple with 10% opacity */
  color: #9C27B0;
}

.field-value.status-badge.overdue {
  background-color: rgba(244, 67, 54, 0.1); /* Red with 10% opacity */
  color: #F44336;
}

.field-value.description {
  white-space: pre-wrap;
  color: var(--text-color-secondary, #666);
  background-color: var(--input-background);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
}

.field-value.coordinates {
  font-family: monospace;
  background-color: var(--input-background);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-color-secondary, #444);
}

/* Comments section */
.issue-details-panel .comments-list {
  margin-top: 8px;
}

.issue-details-panel .comment {
  background-color: var(--input-background);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
}

.issue-details-panel .comment:last-child {
  margin-bottom: 0;
}

.issue-details-panel .comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.issue-details-panel .comment-author {
  font-weight: 500;
  color: var(--text-color);
  font-size: 13px;
}

.issue-details-panel .comment-date {
  color: var(--text-color-secondary, #666);
  font-size: 12px;
}

.issue-details-panel .comment-content {
  color: var(--text-color-secondary, #444);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.issue-details-panel .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  /* Ensure header inherits chat input background for consistency */
  background-color: var(--chat-interface-default-backgrounds);
  border-bottom: 1px solid var(--border-color);
}

.issue-details-panel .panel-header h3 {
  margin: 0;
  font-size: 1rem; /* keep consistent with earlier rule */
  font-weight: 600;
  color: var(--text-color);
}

.issue-details-panel .close-button {
  background: none;
  border: none;
  font-size: 16px; /* smaller icon size */
  font-weight: 600;
  cursor: pointer;
  color: var(--text-color);
  padding: 0 5px;
}

.issue-details-panel .close-button:hover {
  /* Use standard hover tint, avoid blue text */
  background-color: var(--hover-color) !important;
  color: var(--text-color);
}

.issue-details-panel .panel-content {
  padding: 15px;
  overflow-y: auto;
  flex-grow: 1;
}

.issue-details-panel .detail-item {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border-color-light, #dddddd);
}

.issue-details-panel .detail-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.issue-details-panel .detail-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary-color, #555555);
  margin-bottom: 2px;
}

.issue-details-panel .detail-value {
  font-size: 14px;
  word-wrap: break-word;
  white-space: pre-wrap; /* Preserve line breaks in description etc. */
}

.issue-details-panel .custom-attributes h4,
.issue-details-panel .pushpin-location h4 {
  font-size: 14px;
  margin-top: 15px;
  margin-bottom: 8px;
  color: var(--text-color, #333333);
  border-bottom: 1px solid var(--border-color, #cccccc);
  padding-bottom: 5px;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-weight: 500;
  display: inline-block;
  text-transform: capitalize;
}

.status-badge.open {
  background-color: #ff9800;
  color: white;
}

.status-badge.closed {
  background-color: #4caf50;
  color: white;
}

.status-badge.pending {
  background-color: #2196f3;
  color: white;
}

.status-badge.completed {
  background-color: #4caf50;
  color: white;
}

.status-badge.in-review {
  background-color: #9c27b0;
  color: white;
} .edit-issue-panel {
  padding: 1rem;
  background: var(--background-color);
  color: var(--text-color);
}

.edit-issue-panel-loading,
.edit-issue-panel-error {
  padding: 2rem;
  text-align: center;
}

.edit-issue-panel-error {
  color: var(--error-text);
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field label {
  font-weight: 500;
  color: var(--text-color) !important;
}

.form-field input[type="text"],
.form-field input[type="date"],
.form-field select,
.form-field textarea {
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  background-color: var(--input-background);
  color: var(--text-color) !important;
  font-family: 'Inter', sans-serif;
}

.form-field input[type="text"]:focus,
.form-field input[type="date"]:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--border-color);
  box-shadow: none;
}

.form-field textarea {
  resize: vertical;
  min-height: 100px;
  font-family: 'Inter', sans-serif;
}

/* Theme-aware checkbox styling */
.form-field input[type="checkbox"] {
  margin-right: 0.5rem;
  width: 16px;
  height: 16px;
  accent-color: var(--text-color);
  cursor: pointer;
}

/* Custom checkbox styling for better theme support */
.form-field input[type="checkbox"]:not(:checked) {
  background-color: transparent;
  border: 1px solid var(--border-color);
}

.form-field input[type="checkbox"]:checked {
  background-color: var(--text-color);
  border: 1px solid var(--text-color);
}

.edit-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.edit-form-actions button,
.edit-issue-panel button,
.edit-issue-panel input[type="button"],
.edit-issue-panel input[type="submit"] {
  background-color: transparent !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-color) !important;
  padding: 0.4rem 0.8rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  transition: background-color 0.15s ease-in-out;
  min-height: 2rem;
  min-width: auto;
  text-align: center;
}

.edit-form-actions button:hover,
.edit-issue-panel button:hover,
.edit-issue-panel input[type="button"]:hover,
.edit-issue-panel input[type="submit"]:hover {
  background-color: var(--hover-color) !important;
}

.edit-form-actions button:disabled,
.edit-issue-panel button:disabled,
.edit-issue-panel input[type="button"]:disabled,
.edit-issue-panel input[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

/* Ensure SVGs within panel buttons also pick up text color for stroke */
.edit-form-actions button svg,
.edit-issue-panel button svg {
  stroke: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-right: 0.25em;
}

/* Remove margin from the last button in a group to prevent double spacing */
.edit-form-actions button:last-child,
.edit-issue-panel .form-group button:last-child {
  margin-right: 0;
}

/* Remove old button styles that might conflict */
.cancel-button,
.save-button {
  background-color: transparent !important;
}

.cancel-button:hover:not(:disabled),
.save-button:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
}

/* Add styles for required fields: single themed asterisk */
.form-field input[required] + .error,
.form-field select[required] + .error { display: none; }

.form-field label[for="title"]::after,
.form-field label[for="status"]::after,
.form-field label[for="issueType"]::after,
.form-field label[for="issueSubtype"]::after {
  content: " *";
  color: var(--text-color);
}/* APS Model Viewer Streaming Dots Animation - Enhanced for Smoothness */
.streaming-dot {
  border-radius: 50%;
  transform-origin: center;
  will-change: transform, opacity;
  animation: streamingFlow cubic-bezier(0.4, 0.0, 0.6, 1.0) infinite;
  
  /* Hardware acceleration optimizations */
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
  
  /* Anti-aliasing and smoothness optimizations */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

@keyframes streamingFlow {
  0% {
    transform: scale(0.3) translateZ(0);
    opacity: 0;
  }
  5% {
    transform: scale(0.5) translateZ(0);
    opacity: 0.2;
  }
  10% {
    transform: scale(0.8) translateZ(0);
    opacity: 0.5;
  }
  15% {
    transform: scale(1.2) translateZ(0);
    opacity: 0.7;
  }
  20% {
    transform: scale(1.6) translateZ(0);
    opacity: 0.9;
  }
  25% {
    transform: scale(1.9) translateZ(0);
    opacity: 0.95;
  }
  30% {
    transform: scale(2.2) translateZ(0);
    opacity: 1;
  }
  35% {
    transform: scale(1.9) translateZ(0);
    opacity: 0.95;
  }
  40% {
    transform: scale(1.6) translateZ(0);
    opacity: 0.9;
  }
  45% {
    transform: scale(1.2) translateZ(0);
    opacity: 0.7;
  }
  50% {
    transform: scale(0.8) translateZ(0);
    opacity: 0.5;
  }
  55% {
    transform: scale(0.5) translateZ(0);
    opacity: 0.2;
  }
  60% {
    transform: scale(0.3) translateZ(0);
    opacity: 0;
  }
  100% {
    transform: scale(0.3) translateZ(0);
    opacity: 0;
  }
} .chain-of-thought-container {
  background: rgba(248, 249, 250, 0.3);
  border: 1px solid rgba(222, 226, 230, 0.4);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  animation: slideDown 0.3s ease-out;
}

.chain-of-thought-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 500;
  color: var(--text-secondary-color, #424d57);
}

.thinking-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thinking-icon.thinking {
  animation: pulse 1.5s ease-in-out infinite;
}

.thinking-title {
  color: var(--text-color, #1f2937);
  font-size: 13px;
  opacity: 0.8;
}

.thinking-duration {
  margin-left: auto;
  color: var(--text-secondary-color, #4b5563);
  font-size: 11px;
  font-family: 'Courier New', monospace;
  opacity: 0.7;
}

.chain-of-thought-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.thought-item {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px;
  border-left: 2px solid rgba(108, 117, 125, 0.3);
  animation: fadeIn 0.3s ease-out;
}

.thought-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.thought-agent {
  font-weight: 600;
  color: #6c757d;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

.thought-progress {
  font-size: 10px;
  color: #868e96;
  background: #f8f9fa;
  padding: 2px 8px;
  border-radius: 10px;
  opacity: 0.7;
}

.thought-text {
  color: #868e96;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  opacity: 0.85;
}

.tool-execution {
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 10px 12px;
  animation: fadeIn 0.3s ease-out;
}

.tool-execution-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tool-icon {
  font-size: 16px;
  animation: flash 1s ease-in-out infinite;
}

.tool-text {
  color: #856404;
  font-size: 13px;
  font-weight: 500;
}

/* Collapsed state */
.chain-of-thought-collapsed {
  background: rgba(248, 249, 250, 0.2);
  border: 1px solid rgba(222, 226, 230, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.chain-of-thought-collapsed:hover {
  background: rgba(233, 236, 239, 0.3);
  border-color: rgba(173, 181, 189, 0.4);
}

.thinking-icon.collapsed {
  font-size: 16px;
  opacity: 0.7;
}

.thinking-summary {
  color: #6c757d;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
}

.expand-hint {
  margin-left: auto;
  color: #868e96;
  font-size: 10px;
  font-style: italic;
  opacity: 0.7;
}

/* Shared inline chain-of-thought label styles */
.chain-of-thought-label {
  color: var(--text-secondary-color, #4b5563);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  font-style: normal;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.chain-of-thought-label--collapsed {
  opacity: 0.82;
}

.chain-of-thought-label--expanded {
  opacity: 1;
}

.chain-of-thought-label--muted {
  opacity: 0.78;
}

.chain-of-thought-label-wave {
  animation: cot-thought-pulse 1.6s ease-in-out infinite;
}

@keyframes cot-thought-pulse {
  0%, 100% {
    opacity: 0.58;
  }
  50% {
    opacity: 1;
  }
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

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

:root[data-theme='dark'] .chain-of-thought-container,
:root[data-theme='dark'] .chain-of-thought-collapsed {
  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
  border-color: #4a5568;
}

:root[data-theme='dark'] .thinking-title,
:root[data-theme='dark'] .thinking-summary {
  color: #e2e8f0;
}

:root[data-theme='dark'] .thinking-duration,
:root[data-theme='dark'] .thought-progress {
  color: #a0aec0;
  background: #2d3748;
}

:root[data-theme='dark'] .thought-item {
  background: #1a202c;
  border-left-color: #4299e1;
}

:root[data-theme='dark'] .thought-agent {
  color: #63b3ed;
}

:root[data-theme='dark'] .thought-text {
  color: #e2e8f0;
}

:root[data-theme='dark'] .tool-execution {
  background: #744210;
  border-color: #d69e2e;
}

:root[data-theme='dark'] .tool-text {
  color: #fbd38d;
}

:root[data-theme='dark'] .expand-hint {
  color: #a0aec0;
}

:root[data-theme='dark'] .chain-of-thought-collapsed:hover {
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
  border-color: #718096;
}

:root[data-theme='dark'] .chain-of-thought-label {
  color: rgba(226, 232, 240, 0.85);
}



/* Drag-and-drop animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.popup-viewer-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--background-color, #f9fafb);
  color: var(--text-color, #111827);
}

.popup-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background-color: var(--sidebar-background, #f3f4f6);
  border-bottom: 1px solid var(--border-color, #d1d5db);
  height: 48px;
  flex-shrink: 0;
}

.popup-viewer-title {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80%;
}

.popup-viewer-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: var(--text-color, #111827);
}

.popup-viewer-close-button:hover {
  background-color: var(--hover-color, rgba(0, 0, 0, 0.05));
}

.popup-viewer-content {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* Loading state */
.popup-viewer-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color, #f9fafb);
}

.popup-viewer-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: var(--primary-color, #3b82f6);
  animation: popup-viewer-spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes popup-viewer-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.popup-viewer-loading-text {
  font-size: 14px;
  color: var(--text-color, #111827);
}

/* Error state */
.popup-viewer-error {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color, #f9fafb);
  padding: 24px;
  text-align: center;
}

.popup-viewer-error-icon {
  font-size: 32px;
  margin-bottom: 16px;
}

.popup-viewer-error-text {
  font-size: 14px;
  color: var(--error-color, #ef4444);
  max-width: 400px;
} #root {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--background-color);
  will-change: background-color;
  transform: translateZ(0);
  backface-visibility: hidden;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--background-color);
  will-change: background-color;
  transform: translateZ(0);
  backface-visibility: hidden;
}

html {
  background: var(--background-color);
  border-radius: 8px;
  will-change: background-color;
  transform: translateZ(0);
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
/* Import cross-platform button styles FIRST - @import must be at the top */
/* 
 * Cross-platform button styling utilities with consistent hover effects
 * Ensures consistent button appearance and interactions across Windows, macOS, and Linux
 * 
 * USAGE GUIDE:
 * ============
 * 
 * 1. BASIC BUTTON STRUCTURE:
 *    Always start with "btn-base" class, then add variant and size classes:
 *    <button className="btn-base btn-primary">Primary Button</button>
 *    <button className="btn-base btn-secondary btn-small">Small Secondary</button>
 * 
 * 2. BUTTON VARIANTS:
 *    - btn-primary: Main action buttons (highlighted)
 *    - btn-secondary: Secondary action buttons (transparent with border)
 *    - btn-danger: Destructive actions (red text/border)
 *    - btn-danger-filled: Filled destructive buttons
 *    - btn-transparent: Generic transparent buttons
 * 
 * 3. SIZE VARIANTS:
 *    - Default: 40px height (no additional class needed)
 *    - btn-small: 36px height
 *    - btn-compact: 32px height
 *    - btn-modal: 36px height (optimized for modals)
 * 
 * 4. SPECIALIZED BUTTONS:
 *    - btn-circle: Small circular buttons (18px, for delete/close icons)
 *    - btn-circle-large: Large circular buttons (32px, for main actions)
 *    - btn-add-files: Pre-styled for file upload actions
 *    - btn-icon / btn-icon-small: Square icon-only buttons
 * 
 * 5. HOVER EFFECT UTILITIES (based on background color):
 *    PRIMARY HOVER (--hover-color): For absolute white backgrounds
 *    - Use for elements on --background, --sidebar-background, --chat-background (#ffffff)
 *    - hover-standard, hover-enhanced, hover-accent, hover-scale, hover-subtle
 *    
 *    SECONDARY HOVER (--secondary-hover-color): For darker white/gray backgrounds  
 *    - Use for elements on --input-background, --chat-history-background, --chat-interface-default-backgrounds
 *    - hover-secondary-standard, dropdown-hover-item-secondary, dropdown-settings-item
 * 
 * 6. COMPONENT UTILITIES:
 *    - file-item: Container for file items with auto-hover for delete buttons
 *    - delete-btn: Hidden by default, shown on parent hover
 *    - btn-dropdown-item: For dropdown menu items on white backgrounds (button elements)
 *    - dropdown-hover-item: For dropdown items on white backgrounds (any element) 
 *    - dropdown-hover-item-secondary: For dropdown items on gray backgrounds
 *    - dropdown-settings-item: For settings modal items on gray backgrounds
 * 
 * 7. EXAMPLES:
 *    White background: <button className="btn-base btn-transparent">Save</button>
 *    Gray background: <button className="btn-base btn-transparent hover-secondary-standard">Cancel</button>
 *    White dropdown: <div className="dropdown-hover-item">Theme Option</div>
 *    Gray dropdown: <div className="dropdown-hover-item-secondary">Settings Option</div>
 * 
 * HOVER COLOR RULES:
 * - WHITE BACKGROUNDS (#ffffff): Use --hover-color (primary hover)
 * - GRAY BACKGROUNDS (#f7f7f7, #F3F4F6, #F7F9FB): Use --secondary-hover-color (secondary hover)
 * - NEVER use inline backgroundColor styles - let CSS classes handle all styling
 * - NEVER use onMouseEnter/onMouseLeave for hover effects - use CSS :hover instead
 * - All buttons are transparent with visible background tint on hover that matches their container
 * 
 * All buttons automatically handle disabled states, accessibility, and reduced motion preferences.
 */
.btn-base {
  /* Reset all platform-specific button styles */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Box model consistency */
  box-sizing: border-box;

  /* Layout consistency */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Typography consistency */
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text-color);

  /* Spacing consistency */
  padding: 0.75rem 1.5rem;
  border-radius: 6px;

  /* CRITICAL: Ensure complete transparency and browser default override */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid transparent;
  box-shadow: none !important;

  /* Interaction consistency */
  cursor: pointer;
  outline: none;
  white-space: nowrap;

  /* Animation consistency */
  transition: all 0.2s ease;

  /* Prevent text selection */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
/* ===== HOVER EFFECT VARIANTS ===== */
/* PRIMARY HOVER: For absolute white backgrounds (#ffffff) */
.hover-standard:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border-color: var(--border-color);
}
/* Enhanced hover: background + subtle lift */
.hover-enhanced:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border-color: var(--border-color);
  transform: translateY(-1px);
}
/* Accent hover: for active/primary buttons */
.hover-accent:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  transform: translateY(-1px);
}
/* Scale hover: for icon buttons and interactive elements */
.hover-scale:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border-color: var(--border-color);
  transform: scale(1.05);
}
/* Subtle hover: minimal but visible effect */
.hover-subtle:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
}
/* SECONDARY HOVER: For darker white/gray backgrounds (#f7f7f7, #F3F4F6, #F7F9FB) */
.hover-secondary-standard:hover:not(:disabled) {
  background-color: var(--secondary-hover-color) !important;
  border-color: var(--border-color);
}
.hover-secondary-enhanced:hover:not(:disabled) {
  background-color: var(--secondary-hover-color) !important;
  border-color: var(--border-color);
  transform: translateY(-1px);
}
.hover-secondary-subtle:hover:not(:disabled) {
  background-color: var(--secondary-hover-color) !important;
}
/* ===== BUTTON VARIANTS WITH PRIMARY HOVER (for white backgrounds) ===== */
.btn-base:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary {
  min-height: 40px;
  height: 40px;
  background-color: transparent;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border-color: var(--border-color);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-secondary {
  min-height: 40px;
  height: 40px;
  background-color: transparent;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border-color: var(--border-color);
}
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-danger {
  min-height: 40px;
  height: 40px;
  background-color: transparent;
  color: var(--error-text);
  border: 1px solid var(--error-text);
}
.btn-danger:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border-color: var(--border-color);
}
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-danger-filled {
  min-height: 40px;
  height: 40px;
  background-color: var(--error-background);
  color: var(--error-text);
  border: 1px solid var(--error-text);
}
.btn-danger-filled:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border-color: var(--border-color);
}
.btn-danger-filled:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Small button variants */
.btn-small {
  min-height: 36px;
  height: 36px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
}
/* Compact button variants */
.btn-compact {
  min-height: 32px;
  height: 32px;
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
}
/* Icon button variants */
.btn-icon {
  min-width: 40px;
  width: 40px;
  padding: 0.5rem;
  border: 1px solid transparent !important;
}
.btn-icon:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border-color: var(--border-color);
}
.btn-icon-small {
  min-width: 32px;
  width: 32px;
  min-height: 32px;
  height: 32px;
  padding: 0.375rem;
  border: 1px solid transparent !important;
}
.btn-icon-small:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border-color: var(--border-color);
}
/* Ensure secondary hover utilities override the default icon hover color for contrast on gray backgrounds */
.btn-icon-small.hover-secondary-standard:hover:not(:disabled) {
  background-color: var(--secondary-hover-color) !important;
}
.btn-icon-small.selected {
  background-color: transparent;
  border: 1px solid var(--border-color);
}
/* Loading state */
.btn-loading {
  position: relative;
  pointer-events: none;
}
.btn-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: btn-spin 1s linear infinite;
}
@keyframes btn-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Focus states for accessibility */
.btn-base:focus-visible {
  outline: 2px solid var(--active-color);
  outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-base {
    border-width: 2px;
  }
}
/* ===== SPECIALIZED BUTTON CLASSES ===== */
/* Circular icon button (for delete buttons, send buttons, etc.) */
.btn-circle {
  min-width: 18px;
  width: 18px;
  min-height: 18px;
  height: 18px;
  border-radius: 50%;
  padding: 0;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.btn-circle:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border: 1px solid var(--border-color);
  transform: scale(1.05);
}
/* Large circular button */
.btn-circle-large {
  min-width: 32px;
  width: 32px;
  min-height: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 0.5rem;
  border: none;
}
.btn-circle-large:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border: 1px solid var(--border-color);
  transform: scale(1.1);
}
/* Add files button */
.btn-add-files {
  min-height: 36px;
  height: 36px;
  padding: 0.5rem 1rem;
  background-color: transparent;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  font-weight: 500;
  gap: 0.5rem;
}
.btn-add-files:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border-color: var(--border-color);
}
/* Transparent button (commonly used pattern) */
.btn-transparent {
  background-color: transparent;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}
.btn-transparent:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  border-color: var(--border-color);
}
/* Modal action buttons */
.btn-modal {
  min-height: 36px;
  height: 36px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
}
/* File item hover containers */
.file-item {
  position: relative;
  padding: 1rem;
  background-color: var(--chat-background);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.2s ease;
  overflow: visible;
}
.file-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.file-item:hover .delete-btn {
  opacity: 1;
  visibility: visible;
}
/* Keep delete button visible when hovering over it directly */
.delete-btn:hover {
  opacity: 1 !important;
  visibility: visible !important;
}
/* Maintain parent hover state when delete button is hovered - for modern browsers */
.file-item:has(.delete-btn:hover) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Alternative approach: ensure delete button area is within parent bounds */
.delete-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 15;
  /* Ensure button stays connected to parent for hover detection */
  margin: 0;
  border: none;
}
/* Dropdown item button */
.btn-dropdown-item {
  width: 100%;
  padding: 0.75rem;
  background-color: transparent;
  color: var(--text-color);
  border: 1px solid transparent;
  border-radius: 8px;
  text-align: left;
  justify-content: flex-start !important; /* Force left alignment over btn-base centering */
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-dropdown-item:hover:not(:disabled) {
  background-color: var(--hover-color) !important;
  /* Match thread hover: no visible border */
  border-color: transparent !important;
}
.btn-dropdown-item.drag-over {
  background-color: var(--hover-color) !important;
  /* Keep highlight without border during drag */
  border-color: transparent !important;
}
.btn-dropdown-item.selected {
  /* Align selected state with thread selection (no border) */
  background-color: var(--active-color) !important;
  border-color: transparent !important;
  font-weight: 600;
}
/* While renaming a project item, keep visual stable and disable hover changes */
.btn-dropdown-item.renaming,
.btn-dropdown-item.renaming:hover {
  background-color: var(--active-color) !important; /* match selected/thread rename look */
  border-color: transparent !important;
}
/* Project list item: ensure 8px border radius on hover/selected */
.project-item .btn-dropdown-item:hover,
.project-item .btn-dropdown-item.selected,
.project-item .thread-selected {
  border-radius: 8px;
}
/* Reusable dropdown item class for consistent hover effects */
.dropdown-hover-item {
  width: calc(100% - 0.5rem); /* Account for margin to maintain equal gaps */
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-color);
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  margin: 0.125rem 0.25rem; /* Equal gaps on all sides */
  font-weight: 400; /* Normal font weight */
}
.dropdown-hover-item:hover {
  background-color: var(--hover-color) !important;
}
/* Secondary dropdown hover for non-white backgrounds */
.dropdown-hover-item-secondary {
  width: calc(100% - 0.5rem); /* Account for margin to maintain equal gaps */
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-color);
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  margin: 0.125rem 0.25rem; /* Equal gaps on all sides */
  font-weight: 400; /* Normal font weight */
  font-family: inherit; /* Ensure consistent font */
  font-size: 0.8rem; /* Match button text size */
}
.dropdown-hover-item-secondary:hover {
  background-color: var(--secondary-hover-color) !important;
}
/* Active/selected state for dropdown items */
.dropdown-hover-item.selected,
.dropdown-hover-item-secondary.selected,
.dropdown-hover-item-secondary[data-state='checked'] {
  background-color: var(--active-color) !important;
  font-weight: 500; /* Slightly bolder but not too heavy */
}
/* Small rename action buttons (tick/cross) for secondary backgrounds */
.btn-rename-action {
  background: rgba(0, 0, 0, 0.05); /* Subtle background for better visibility */
  border: 1px solid rgba(0, 0, 0, 0.1); /* Light border for definition */
  padding: 0.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151; /* Darker color for better contrast */
  border-radius: 4px;
  transition: all 0.2s ease;
}
.btn-rename-action:hover {
  background-color: var(--active-color) !important; /* Use active color for strong contrast */
  border-color: var(--border-color) !important;
  transform: scale(1.05);
}
/* Dark theme specific styling for better contrast in dark mode */
@media (prefers-color-scheme: dark) {
  .btn-rename-action {
    background: rgba(255, 255, 255, 0.1); /* Light background for dark mode */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Light border for dark mode */
    color: #d1d5db; /* Light gray text for dark mode */
  }

  .btn-rename-action:hover {
    background-color: #4b5563 !important; /* Lighter gray for dark mode visibility */
  }
}
/* Settings modal dropdown item styling */
.dropdown-settings-item {
  width: calc(100% - 0.5rem); /* Account for margin */
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-color);
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  margin: 0.125rem 0.25rem; /* Equal gaps on all sides */
  border-bottom: 1px solid var(--border-color);
  font-weight: 400; /* Normal font weight */
}
.dropdown-settings-item:last-child {
  border-bottom: none;
}
.dropdown-settings-item:hover {
  background-color: var(--secondary-hover-color) !important;
}
.dropdown-settings-item.selected {
  background-color: var(--active-color) !important;
  font-weight: 500; /* Slightly bolder but not too heavy */
}
/* Chat box circular button with scale hover effect */
.btn-chat-circle {
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  padding: 4px;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 0.2s ease;
  color: var(--text-color) !important;
}
.btn-chat-circle:hover:not(:disabled) {
  background-color: var(--secondary-hover-color) !important;
  transform: scale(1.1);
}
.btn-chat-circle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: transparent !important;
}
/* Stop stream button - always visible black circle with white icon */
.btn-chat-circle.btn-stop-stream {
  background-color: black !important;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.btn-chat-circle.btn-stop-stream:hover:not(:disabled) {
  background-color: black !important;
  transform: none;
}
/* Recording active state - clear visual indicator when dictation is active */
/* Uses --active-color (same as dropdown selected states) for theme-aware styling */
.btn-chat-circle.btn-recording-active {
  background: var(--active-color) !important;
  background-color: var(--active-color) !important;
  color: var(--text-color) !important;
  animation: recording-pulse 0.8s ease-in-out infinite;
}
.btn-chat-circle.btn-recording-active:hover:not(:disabled) {
  background: var(--active-color) !important;
  background-color: var(--active-color) !important;
  transform: scale(1.05);
}
/* Theme-aware pulse animation using secondary hover color */
@keyframes recording-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0px var(--secondary-hover-color);
  }
  50% {
    box-shadow: 0 0 0 6px var(--secondary-hover-color);
  }
}
/* Sound wave animation - scales based on audio level */
.btn-chat-circle.btn-recording-active[data-audio-level='low'] {
  animation: recording-pulse-low 0.8s ease-in-out infinite;
}
.btn-chat-circle.btn-recording-active[data-audio-level='medium'] {
  animation: recording-pulse-medium 0.8s ease-in-out infinite;
}
.btn-chat-circle.btn-recording-active[data-audio-level='high'] {
  animation: recording-pulse-high 0.8s ease-in-out infinite;
}
@keyframes recording-pulse-low {
  0%,
  100% {
    box-shadow: 0 0 0 2px var(--secondary-hover-color);
  }
  50% {
    box-shadow: 0 0 0 4px var(--secondary-hover-color);
  }
}
@keyframes recording-pulse-medium {
  0%,
  100% {
    box-shadow: 0 0 0 3px var(--secondary-hover-color);
  }
  50% {
    box-shadow: 0 0 0 7px var(--secondary-hover-color);
  }
}
@keyframes recording-pulse-high {
  0%,
  100% {
    box-shadow: 0 0 0 4px var(--secondary-hover-color);
  }
  50% {
    box-shadow: 0 0 0 10px var(--secondary-hover-color);
  }
}
/* Transcribing state - no pulse, uses consistent loading-spinner pattern */
/* The Loader2 icon inside will have the loading-spinner class for spin animation */
.btn-chat-circle.btn-transcribing {
  background-color: transparent !important;
  color: var(--text-color) !important;
  cursor: wait;
}
.btn-chat-circle.btn-transcribing:hover:not(:disabled) {
  background-color: var(--secondary-hover-color) !important;
  transform: none;
}
/* Modal button with border and hover effect for white backgrounds */
.btn-modal-hover {
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
  font-weight: 500;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
}
.btn-modal-hover:hover:not(:disabled) {
  background-color: var(--hover-color);
}
.btn-modal-hover:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* Modal button with border and hover effect for gray backgrounds */
.btn-modal-hover-secondary {
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
  font-weight: 500;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  color: var(--text-color);
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
}
.btn-modal-hover-secondary:hover:not(:disabled) {
  background-color: var(--secondary-hover-color) !important;
}
.btn-modal-hover-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* ===== DROPDOWN TRIGGER AND HEADER UTILITIES (BORDERLESS) ===== */
/* Borderless trigger for dropdowns on white backgrounds */
.dropdown-trigger {
  padding: 0.4rem 0.75rem;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  min-width: 140px;
  justify-content: space-between;
}
.dropdown-trigger:hover:not(:disabled),
.dropdown-trigger.is-open {
  background-color: var(--hover-color) !important;
}
/* Borderless trigger for dropdowns on gray backgrounds */
.dropdown-trigger-secondary {
  padding: 0.4rem 0.75rem;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 4px;
  color: var(--text-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  min-width: 140px;
  justify-content: space-between;
}
.dropdown-trigger-secondary:hover:not(:disabled),
.dropdown-trigger-secondary.is-open {
  background-color: var(--secondary-hover-color) !important;
}
/* Non-interactive section header inside dropdown menus */
.dropdown-header {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-color);
  /* First letter uppercase, rest lowercase */
  text-transform: lowercase;
  letter-spacing: normal;
  margin: 0.125rem 0.25rem;
}
.dropdown-header::first-letter {
  text-transform: uppercase;
}
/* Preserve original casing when needed (e.g., provider names like OpenAI, xAI) */
.dropdown-header.no-transform {
  text-transform: none;
}
.dropdown-header.no-transform::first-letter {
  text-transform: none;
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .btn-base,
  .btn-circle,
  .btn-circle-large,
  .file-item,
  .delete-btn,
  .btn-dropdown-item,
  .dropdown-hover-item {
    transition: none;
  }

  .hover-enhanced:hover:not(:disabled),
  .hover-accent:hover:not(:disabled),
  .hover-scale:hover:not(:disabled),
  .btn-circle:hover:not(:disabled),
  .btn-circle-large:hover:not(:disabled) {
    transform: none;
  }
}
/* Tailwind directives */
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: hsl(var(--gray-200)); /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: hsl(var(--gray-400)); /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: hsl(var(--gray-400)); /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
:root {
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 0%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 0%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 97%;
    --secondary-foreground: 0 0% 0%;
    --muted: 0 0% 97%;
    --muted-foreground: 0 0% 45%;
    --accent: 0 0% 97%;
    --accent-foreground: 0 0% 0%;
    --destructive: 357 78% 39%; /* #AD1922 */
    --destructive-foreground: 357 78% 39% / 0.2; /* #E21E2E/20 */
    --destructive-hover: 355 67% 90%; /* #f9d2d5 - pink hover bg */
    --success: 142 71% 45%; /* #22C55E - green */
    --success-foreground: 0 0% 100%;
    --success-hover: 142 60% 90%; /* Light green hover bg */
    --border: var(--gray-100);
    --input: 0 0% 97%;
    --ring: 0 0% 0%;
    --radius: 0.5rem;

    /* Gray scale for buttons and UI elements */
    --gray-50: 0 0% 97%; /* #F8F8F8 */
    --gray-100: 0 0% 92%; /* #EBEBEB */
    --gray-200: 0 0% 90%; /* #E6E6E6 */
    --gray-300: 0 0% 83%; /* #D4D4D4 */
    --gray-400: 0 0% 64%; /* #A3A3A3 */
    --gray-500: 0 0% 45%; /* #737373 */
    --gray-600: 0 0% 32%; /* #525252 */
    --gray-700: 0 0% 25%; /* #404040 */
    --gray-800: 0 0% 15%; /* #262626 */
    --gray-900: 0 0% 9%; /* #171717 */

    /* Tag colors for categorization badges - Light mode (pastel) */
    --tag-pink: #f6d7e7;
    --tag-sand: #f3dec4;
    --tag-mint: #c7e5c8;
    --tag-sky: #a5d9f3;
    --tag-slate: #bbc8e6;
    --tag-rose: #f2ccd5;
    --tag-gray: #d4d4d4;

    /* Sidebar colors - Light mode */
    --sidebar-profile: 195 18% 35%; /* #496169 */
    --sidebar-background: 0 0% 99; /* Very subtle gray tint (muted/50) */
    --sidebar-label: 0 0% 46%; /* #757575 */
    --sidebar-hover: 0 0% 97%;
    --sidebar-active: 0 0% 92%; /* black/10 */
  }
.dark {
    --background: 0, 0%, 10%;
    --foreground: 0 0% 100%; /* Pure white */
    --card: 0 0% 13%;
    --card-foreground: 0 0% 100%;
    --popover: 0 0% 13%;
    --popover-foreground: 0 0% 100%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 13%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 20%;
    --muted-foreground: 0 0% 97%;
    --accent: 0 0% 13%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 72% 63%; /* Lighter red for dark mode visibility */
    --destructive-foreground: 0 72% 63% / 0.25; /* Adjusted for dark mode */
    --destructive-hover: 0 50% 20%; /* Darker red hover for dark mode */
    --success: 142 76% 55%; /* Lighter green for dark mode visibility */
    --success-foreground: 0 0% 100%;
    --success-hover: 142 50% 20%; /* Dark green hover for dark mode */
    --border: var(--gray-800);
    --input: 0 0% 13%;
    --ring: 0 0% 100%;

    /* Tag colors for categorization badges - Dark mode (more saturated for visibility) */
    --tag-pink: #d4a5bc;
    --tag-sand: #c9b08a;
    --tag-mint: #8fc990;
    --tag-sky: #6bb8d9;
    --tag-slate: #8a9fc4;
    --tag-rose: #d4a0ae;
    --tag-gray: #a0a0a0;

    /* Sidebar colors - Dark mode */
    --sidebar-profile: 195 18% 35%; /* #496169 */
    --sidebar-background: var(--background);
    --sidebar-label: 0 0% 60%; /* #999 */
    --sidebar-hover: 0 0% 100% / 0.05; /* white/5 */
    --sidebar-active: 0 0% 100% / 0.1; /* white/10 */
  }
.\!container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}
@media (min-width: 1400px) {
  .\!container {
    max-width: 1400px !important;
  }
  .container {
    max-width: 1400px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.bottom-2\.5 {
  bottom: 0.625rem;
}
.bottom-4 {
  bottom: 1rem;
}
.left-0 {
  left: 0px;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-1\/4 {
  top: 25%;
}
.top-2 {
  top: 0.5rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.top-3 {
  top: 0.75rem;
}
.top-\[50\%\] {
  top: 50%;
}
.isolate {
  isolation: isolate;
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.-my-2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-6 {
  margin-left: 1.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-20 {
  margin-right: 5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mr-8 {
  margin-right: 2rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-auto {
  margin-top: auto;
}
.box-border {
  box-sizing: border-box;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.\!inline {
  display: inline !important;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-auto {
  aspect-ratio: auto;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-10 {
  width: 2.5rem;
  height: 2.5rem;
}
.size-12 {
  width: 3rem;
  height: 3rem;
}
.size-16 {
  width: 4rem;
  height: 4rem;
}
.size-2 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-2\.5 {
  width: 0.625rem;
  height: 0.625rem;
}
.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}
.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}
.size-4 {
  width: 1rem;
  height: 1rem;
}
.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-8 {
  width: 2rem;
  height: 2rem;
}
.size-\[--cell-size\] {
  width: var(--cell-size);
  height: var(--cell-size);
}
.h-1 {
  height: 0.25rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[--cell-size\] {
  height: var(--cell-size);
}
.h-\[10px\] {
  height: 10px;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-16 {
  max-height: 4rem;
}
.max-h-48 {
  max-height: 12rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-9 {
  max-height: 2.25rem;
}
.max-h-\[--radix-select-content-available-height\] {
  max-height: var(--radix-select-content-available-height);
}
.max-h-\[105px\] {
  max-height: 105px;
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.max-h-dialog {
  max-height: 90vh;
}
.max-h-screen {
  max-height: 100vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-20 {
  min-height: 5rem;
}
.min-h-6 {
  min-height: 1.5rem;
}
.min-h-8 {
  min-height: 2rem;
}
.min-h-\[32px\] {
  min-height: 32px;
}
.min-h-\[36px\] {
  min-height: 36px;
}
.min-h-\[46px\] {
  min-height: 46px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.25rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/6 {
  width: 16.666667%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/5 {
  width: 40%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-72 {
  width: 18rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[--cell-size\] {
  width: var(--cell-size);
}
.w-\[--radix-popover-trigger-width\] {
  width: var(--radix-popover-trigger-width);
}
.w-\[10px\] {
  width: 10px;
}
.w-\[1px\] {
  width: 1px;
}
.w-\[220px\] {
  width: 220px;
}
.w-\[275px\] {
  width: 275px;
}
.w-\[calc\(330px-16px\)\] {
  width: calc(330px - 16px);
}
.w-\[var\(--radix-select-trigger-width\)\] {
  width: var(--radix-select-trigger-width);
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.w-screen {
  width: 100vw;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-24 {
  min-width: 6rem;
}
.min-w-30 {
  min-width: 7.5rem;
}
.min-w-32 {
  min-width: 8rem;
}
.min-w-40 {
  min-width: 10rem;
}
.min-w-\[--cell-size\] {
  min-width: var(--cell-size);
}
.min-w-\[60px\] {
  min-width: 60px;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.min-w-fit {
  min-width: -moz-fit-content;
  min-width: fit-content;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-56 {
  max-width: 14rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-64 {
  max-width: 16rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-72 {
  max-width: 18rem;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-\[--radix-dropdown-menu-content-transform-origin\] {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
.origin-\[--radix-popover-content-transform-origin\] {
  transform-origin: var(--radix-popover-content-transform-origin);
}
.origin-\[--radix-select-content-transform-origin\] {
  transform-origin: var(--radix-select-content-transform-origin);
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90 {
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-75 {
  --tw-scale-x: .75;
  --tw-scale-y: .75;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-grab {
  cursor: grab;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-text {
  cursor: text;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.list-disc {
  list-style-type: disc;
}
.auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.place-content-center {
  place-content: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.gap-0 {
  gap: 0px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-border > :not([hidden]) ~ :not([hidden]) {
  border-color: hsl(var(--border));
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-balance {
  text-wrap: balance;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[6px\] {
  border-radius: 6px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
  border-radius: 0px;
}
.rounded-sm {
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-md {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.rounded-r-md {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-\[1\.5px\] {
  border-width: 1.5px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.border-\[--color-border\] {
  border-color: var(--color-border);
}
.border-border {
  border-color: hsl(var(--border));
}
.border-border\/50 {
  border-color: hsl(var(--border) / 0.5);
}
.border-destructive {
  border-color: hsl(var(--destructive));
}
.border-destructive\/50 {
  border-color: hsl(var(--destructive) / 0.5);
}
.border-input {
  border-color: hsl(var(--input));
}
.border-muted-foreground {
  border-color: hsl(var(--muted-foreground));
}
.border-muted-foreground\/20 {
  border-color: hsl(var(--muted-foreground) / 0.2);
}
.border-primary {
  border-color: hsl(var(--primary));
}
.border-transparent {
  border-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-primary {
  border-top-color: hsl(var(--primary));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[--color-bg\] {
  background-color: var(--color-bg);
}
.bg-\[hsl\(var\(--gray-100\)\)\] {
  background-color: hsl(var(--gray-100));
}
.bg-\[var\(--chat-background\)\] {
  background-color: var(--chat-background);
}
.bg-accent {
  background-color: hsl(var(--accent));
}
.bg-accent\/50 {
  background-color: hsl(var(--accent) / 0.5);
}
.bg-app {
  background-color: var(--background-color);
}
.bg-background {
  background-color: hsl(var(--background));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-black\/\[0\.06\] {
  background-color: rgb(0 0 0 / 0.06);
}
.bg-border {
  background-color: hsl(var(--border));
}
.bg-card {
  background-color: hsl(var(--card));
}
.bg-destructive {
  background-color: hsl(var(--destructive));
}
.bg-destructive-hover {
  background-color: hsl(var(--destructive-hover));
}
.bg-destructive\/10 {
  background-color: hsl(var(--destructive) / 0.1);
}
.bg-green-500\/10 {
  background-color: rgb(34 197 94 / 0.1);
}
.bg-input {
  background-color: hsl(var(--input));
}
.bg-muted {
  background-color: hsl(var(--muted));
}
.bg-muted-foreground {
  background-color: hsl(var(--muted-foreground));
}
.bg-muted-foreground\/30 {
  background-color: hsl(var(--muted-foreground) / 0.3);
}
.bg-muted\/20 {
  background-color: hsl(var(--muted) / 0.2);
}
.bg-muted\/50 {
  background-color: hsl(var(--muted) / 0.5);
}
.bg-popover {
  background-color: hsl(var(--popover));
}
.bg-primary\/10 {
  background-color: hsl(var(--primary) / 0.1);
}
.bg-red-500\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-secondary {
  background-color: hsl(var(--secondary));
}
.bg-sidebar-active {
  background-color: hsl(var(--sidebar-active));
}
.bg-sidebar-background {
  background-color: hsl(var(--sidebar-background));
}
.bg-sidebar-profile {
  background-color: hsl(var(--sidebar-profile));
}
.bg-tag-gray {
  background-color: var(--tag-gray);
}
.bg-tag-mint {
  background-color: var(--tag-mint);
}
.bg-tag-pink {
  background-color: var(--tag-pink);
}
.bg-tag-rose {
  background-color: var(--tag-rose);
}
.bg-tag-sand {
  background-color: var(--tag-sand);
}
.bg-tag-sky {
  background-color: var(--tag-sky);
}
.bg-tag-slate {
  background-color: var(--tag-slate);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.from-gray-50 {
  --tw-gradient-from: hsl(var(--gray-50)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--gray-50) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-gray-100 {
  --tw-gradient-to: hsl(var(--gray-100)) var(--tw-gradient-to-position);
}
.fill-current {
  fill: currentColor;
}
.fill-foreground {
  fill: hsl(var(--foreground));
}
.fill-yellow-500 {
  fill: #eab308;
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.p-\[1px\] {
  padding: 1px;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-12 {
  padding-left: 3rem;
  padding-right: 3rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[--cell-size\] {
  padding-left: var(--cell-size);
  padding-right: var(--cell-size);
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-6 {
  padding-left: 1.5rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-0\.5 {
  padding-right: 0.125rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-8 {
  padding-top: 2rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.align-middle {
  vertical-align: middle;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-2xs {
  font-size: 0.625rem;
  line-height: 0.75rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-\[0\.9375rem\] {
  font-size: 0.9375rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-sm\/relaxed {
  font-size: 0.875rem;
  line-height: 1.625;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-none {
  line-height: 1;
}
.leading-normal {
  line-height: 1.5;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-accent-foreground {
  color: hsl(var(--accent-foreground));
}
.text-app-foreground {
  color: var(--text-color);
}
.text-card-foreground {
  color: hsl(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  color: hsl(var(--destructive));
}
.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}
.text-foreground {
  color: hsl(var(--foreground));
}
.text-foreground\/50 {
  color: hsl(var(--foreground) / 0.5);
}
.text-foreground\/80 {
  color: hsl(var(--foreground) / 0.8);
}
.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}
.text-muted-foreground\/60 {
  color: hsl(var(--muted-foreground) / 0.6);
}
.text-neutral-400 {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
}
.text-neutral-500 {
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity, 1));
}
.text-popover-foreground {
  color: hsl(var(--popover-foreground));
}
.text-primary {
  color: hsl(var(--primary));
}
.text-primary-foreground {
  color: hsl(var(--primary-foreground));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-secondary-foreground {
  color: hsl(var(--secondary-foreground));
}
.text-sidebar-label {
  color: hsl(var(--sidebar-label));
}
.text-success {
  color: hsl(var(--success));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.\!opacity-100 {
  opacity: 1 !important;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-90 {
  opacity: 0.9;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-border {
  --tw-ring-color: hsl(var(--border));
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-sm {
  --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-100 {
  transition-duration: 100ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-100 {
  animation-duration: 100ms;
}
.duration-150 {
  animation-duration: 150ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.ease-in {
  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}
.\[--cell-size\:2rem\] {
  --cell-size: 2rem;
}
/* Screen reader only - hides content visually but keeps it accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/* Tab styling with theme variables */
[data-state='active'] {
  /* background-color: var(--hover-color) !important; */
  color: var(--text-color) !important;
  /* border: 1px solid var(--border-color) !important; */
  box-shadow: none !important;
}
/* shadcn/ui CSS variables */
:root {
  /* Light theme (default) - legacy CSS variables */
  --primary-color: #2563eb;
  --toggle-active-color: #2563eb;
  --secondary-color: #1e40af;
  --background-color: #ffffff;
  --text-color: #1f2937;
  --text-color-rgb: 31, 41, 55;
  --text-color-secondary: #666666;
  --chat-background: #ffffff;
  --chat-history-background: #f7f7f7;
  --input-background: #f3f4f6;
  --border-color: #e5e7eb;
  --hover-color: #f3f4f6;
  --secondary-hover-color: #e2e4e8;
  --active-color: rgba(209, 213, 219, 0.3);
  --icon-filter: invert(0);
  --error-background: #ff6b6b20;
  --error-text: #ff6b6b;
  --loading-background: rgba(229, 231, 235, 0.8);
  --chat-interface-default-backgrounds: #f7f9fb;

  /* Notification colors - kept for legacy compatibility */
  --toast-info-bg: rgba(0, 0, 0, 0.85);
  --toast-error-bg: rgba(173, 25, 34, 0.85);
  --notification-info-bg: rgba(0, 0, 0, 0.85);
  --notification-error-bg: rgba(173, 25, 34, 0.85);
}
/* Dark theme - uses .dark class on <html> for Tailwind dark: utilities */
.dark {
  --primary-color: #cccccc;
  --toggle-active-color: #cccccc;
  --secondary-color: #60a5fa;
  --background-color: #1a1a1a;
  --text-color: #ffffff;
  --text-color-rgb: 243, 244, 246;
  --text-color-secondary: #999999;
  --chat-background: #222222;
  --chat-history-background: #1a1a1a;
  --input-background: #2d2d2d;
  --border-color: #404040;
  --hover-color: #333333;
  --secondary-hover-color: #333333;
  --active-color: rgba(107, 114, 128, 0.3);
  --icon-filter: invert(1);
  --error-background: #ff6b6b20;
  --error-text: #ff6b6b;
  --loading-background: rgba(45, 45, 45, 0.8);
  --chat-interface-default-backgrounds: #2d2d2d;

  /* Notification colors - kept for legacy compatibility */
  --toast-info-bg: rgba(255, 255, 255, 0.15);
  --toast-error-bg: rgba(226, 30, 46, 0.85);
  --notification-info-bg: rgba(255, 255, 255, 0.15);
  --notification-error-bg: rgba(226, 30, 46, 0.85);
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: var(--background-color);
}
body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  border-radius: 8px;
  color: var(--text-color);
  background: var(--background-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: background-color;
  transform: translateZ(0);
}
/* Main Window Styles */
.main-window {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--background-color);
}
/* Add this new style for the app container */
#root {
  border-radius: 8px;
  overflow: hidden;
  height: 100vh;
  background-color: var(--background-color);
  will-change: background-color;
  transform: translateZ(0);
}
/* Ensure titlebar corners match */
.titlebar {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}
.main-window header {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.assistants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem;
}
.assistant-card {
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.assistant-card:hover {
  background-color: var(--hover-color);
  transform: translateY(-2px);
}
/* Popup Window Styles */
.popup-window {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.popup-window header {
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}
.message {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  max-width: 80%;
}
.message.user {
  background-color: var(--primary-color);
  color: white;
  margin-left: auto;
}
.message.assistant {
  background-color: var(--hover-color);
  margin-right: auto;
}
.input-area {
  padding: 1rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 0.5rem;
}
.input-area input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  background-color: var(--background-color);
  color: var(--text-color);
}
/* Animation keyframes for smooth transitions */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px); /* Slight movement for smoother animation */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideUpFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
    visibility: hidden;
  }
}
@keyframes expandCollapse {
  0% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0);
  }
}
/* Exit animation for project threads */
@keyframes collapseAnimation {
  0% {
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
  }
}
/* Spin animation for loading indicators */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* Apply smooth transitions to all interactive elements */
button,
a,
input,
select,
.thread-item,
.project-item {
  transition: all 0.3s ease;
  backface-visibility: hidden; /* Prevent flickering */
  transform: translateZ(0); /* Force GPU acceleration */
}
/* Thread selection styles */
.thread-selected {
  background-color: var(--active-color) !important;
  font-weight: bold;
}
/* Add hardware-accelerated styles for containers */
.project-threads {
  transform-origin: top;
  will-change: max-height, opacity, transform;
  backface-visibility: hidden;
  transform: translateZ(0); /* Force GPU acceleration */
}
/* Reduce layout thrashing by preventing reflow during animations */
.prevent-reflow {
  contain: layout style;
}
/* Prevent layout shifts during animations */
.will-change-transform {
  will-change: transform;
  transform: translateZ(0);
}
.will-change-opacity {
  will-change: opacity;
  transform: translateZ(0);
}
/* Optimize rendering for thread containers */
.thread-container {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* Prevent unnecessary repaints during scrolling */
.modern-scrollbar {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* Improve performance for fixed position elements */
.fixed-position {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* Window resize performance optimizations */
html,
body,
#root {
  /* Ensure consistent background coverage during resize */
  min-height: 100vh;
}
/* Prevent background flashing during window operations */
* {
  box-sizing: border-box;
}
/* Additional hardware acceleration for main containers */
.main-window,
.popup-window,
.chat-area,
.messages {
  will-change: auto;
}
/* Optimize scrolling performance */
.messages,
.modern-scrollbar {
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
}
/* Global focus outline to match toolbar buttons */
:focus-visible {
  outline: 2px solid var(--active-color);
  outline-offset: 2px;
}
/* Firefox keyboard focus fallback */
:-moz-focusring {
  outline: 2px solid var(--active-color);
  outline-offset: 2px;
}
/* Prevent clipped focus rings in ChatHistory lists */
.project-item .btn-base:focus-visible,
.project-threads button:focus-visible {
  outline-offset: -2px; /* draw inside to avoid overflow clipping on edges */
}
/* Thread items: use inset box-shadow to avoid any clipping */
.project-threads button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--active-color);
}
/* Firefox fallback for thread items */
.project-threads button:-moz-focusring {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--active-color);
}
/* Orphan and project threads via thread-category container */
.thread-category button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--active-color);
}
.thread-category button:-moz-focusring {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--active-color);
}
/* Date input styling with purple accents */
input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}
input[type='date']:focus {
  outline: none;
  border-color: var(--active-color) !important;
  box-shadow: inset 0 0 0 2px var(--active-color);
}
input[type='date']::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
input[type='date']::-webkit-datetime-edit-text {
  color: var(--text-color);
  padding: 0 0.2em;
}
input[type='date']::-webkit-datetime-edit-month-field,
input[type='date']::-webkit-datetime-edit-day-field,
input[type='date']::-webkit-datetime-edit-year-field {
  color: var(--text-color);
}
input[type='date']::-webkit-datetime-edit-month-field:focus,
input[type='date']::-webkit-datetime-edit-day-field:focus,
input[type='date']::-webkit-datetime-edit-year-field:focus {
  background-color: var(--active-color);
  color: var(--text-color);
  border-radius: 2px;
}
input[type='date']::-webkit-calendar-picker-indicator:hover {
  filter: invert(0.5);
}
/* Remove focus outline from Recharts */
.recharts-wrapper,
.recharts-surface,
.recharts-wrapper *:focus,
.recharts-surface *:focus {
  outline: none !important;
}
.recharts-legend-item {
  cursor: pointer !important;
}
/* Calendar styling - shadcn/ui */
[data-slot='calendar'] {
  --cell-size: 2rem !important;
  background-color: var(--chat-background) !important;
  padding: 0.75rem;
  font-family: Inter, system-ui, sans-serif;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
}
/* Remove all shadows and most borders */
[data-slot='calendar'] *,
[data-slot='calendar'] button {
  box-shadow: none !important;
}
[data-slot='calendar'] button {
  border: none !important;
}
/* Calendar header wrapper - position everything on one line */
[data-slot='calendar'] [class*='caption'] {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0.75rem !important;
  width: 100% !important;
  height: 2rem !important;
  padding: 0 !important;
}
/* Navigation container - hide it since we're using custom buttons */
[data-slot='calendar'] nav {
  display: none !important;
}
/* Remove focus outline from input fields */
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='search']:focus,
textarea:focus,
input:focus {
  outline: none !important;
  box-shadow: none !important;
}
/* Ensure placeholder text starts at the left */
input::-moz-placeholder, textarea::-moz-placeholder {
  text-align: left;
  padding-left: 0;
}
input::placeholder,
textarea::placeholder {
  text-align: left;
  padding-left: 0;
}
/* Navigation buttons - enable pointer events */
[data-slot='calendar'] [class*='button_previous'],
[data-slot='calendar'] [class*='button_next'] {
  width: 1.5rem !important;
  height: 1.5rem !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: auto !important;
  font-size: 1.2rem !important;
  margin: 0 !important;
}
[data-slot='calendar'] [class*='button_previous']:hover,
[data-slot='calendar'] [class*='button_next']:hover {
  background-color: var(--hover-color) !important;
}
/* Month/Year caption - center between arrows */
[data-slot='calendar'] [class*='caption_label'] {
  color: var(--text-color) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  z-index: 1 !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Hide dropdowns container if it exists */
[data-slot='calendar'] [class*='caption_dropdowns'] {
  display: none !important;
}
/* Day headers (Su Mo Tu etc) - smaller */
[data-slot='calendar'] [class*='weekday'] {
  color: var(--text-color-secondary) !important;
  font-size: 0.75rem !important;
}
/* Month/Year dropdown selects */
[data-slot='calendar'] select {
  background-color: transparent !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 4px !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  cursor: pointer !important;
  margin: 0 0.25rem !important;
}
[data-slot='calendar'] select:hover {
  background-color: var(--hover-color) !important;
}
[data-slot='calendar'] select:focus {
  outline: none !important;
  border-color: var(--active-color) !important;
}
/* Day buttons - square boxes in a grid */
[data-slot='calendar'] button[data-day] {
  background-color: transparent !important;
  color: var(--text-color) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: var(--cell-size) !important;
  height: var(--cell-size) !important;
  min-width: var(--cell-size) !important;
  min-height: var(--cell-size) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.875rem !important;
}
/* Hover - simple background change */
[data-slot='calendar']
  button:hover:not([data-selected]):not([aria-disabled='true']):not([data-range-start]):not(
    [data-range-end]
  ):not([data-range-middle]) {
  background-color: var(--hover-color) !important;
}
/* Range selection - middle dates */
[data-slot='calendar'] button[data-range-middle='true'] {
  background-color: var(--hover-color) !important;
  color: var(--text-color) !important;
  border-radius: 0 !important;
}
/* Range selection - start date */
[data-slot='calendar'] button[data-range-start='true'] {
  background-color: var(--active-color) !important;
  color: var(--text-color) !important;
  font-weight: 500 !important;
  border-radius: 8px 0 0 8px !important;
}
/* Range selection - end date */
[data-slot='calendar'] button[data-range-end='true'] {
  background-color: var(--active-color) !important;
  color: var(--text-color) !important;
  font-weight: 500 !important;
  border-radius: 0 8px 8px 0 !important;
}
/* Single selected date (not part of a range) */
[data-slot='calendar'] button[data-selected-single='true'] {
  background-color: var(--active-color) !important;
  color: var(--text-color) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}
/* Today's date */
[data-slot='calendar']
  button[class*='today']:not([data-selected='true']):not([data-range-start]):not([data-range-end]) {
  background-color: var(--secondary-hover-color) !important;
  color: var(--text-color) !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
}
/* Disabled/outside dates */
[data-slot='calendar'] button[aria-disabled='true'],
[data-slot='calendar'] button[class*='outside'] {
  color: var(--text-color-secondary) !important;
  opacity: 0.3;
}
/* Navigation arrows */
[data-slot='calendar'] [class*='button_previous'],
[data-slot='calendar'] [class*='button_next'] {
  background-color: transparent !important;
  color: var(--text-color) !important;
}
[data-slot='calendar'] [class*='button_previous']:hover,
[data-slot='calendar'] [class*='button_next']:hover {
  background-color: var(--hover-color) !important;
}
/* Switch (Slider) Styling for Knowledge Base Sharing */
button[role='switch'] {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  border: none;
  outline: none !important;
  padding: 2px;
}
button[role='switch'] > span {
  pointer-events: none;
  display: block;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
  margin: 0;
  transform: translateX(0);
}
button[role='switch'][data-state='checked'] > span {
  transform: translateX(20px);
}
button[role='switch'][data-state='unchecked'] > span {
  transform: translateX(0);
}
/* Sharing Modal Dropdown Item Hover Effects */
.sharing-modal-dropdown-item {
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  cursor: pointer;
  background-color: transparent;
  color: var(--text-color);
  border-radius: 4px;
  transition: background-color 0.15s;
}
.sharing-modal-dropdown-item:hover {
  background-color: var(--hover-color);
}
.sharing-modal-dropdown-item:focus {
  background-color: var(--hover-color);
  outline: none;
}
/* Alert Dialog Overlay - Ensure modals are visible */
[data-radix-dialog-overlay],
[data-radix-alert-dialog-overlay] {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  z-index: 9998 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Hide default Dialog close button when using custom one */
.hide-dialog-close .dialog-close-button {
  display: none !important;
}
.loading-spinner {
  animation: spin 1s linear infinite;
}
/* Admin table column resize handle */
.admin-resize-handle {
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: -6px;
  width: 14px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  z-index: 15;
  touch-action: none;
}
.admin-resize-handle::before {
  content: '';
  width: 2px;
  height: 100%;
  border-radius: 999px;
  background-color: var(--border-color);
  transition: all 0.2s ease;
}
.admin-resize-handle:hover::before,
.admin-resize-handle--active::before {
  width: 3px;
  background-color: var(--text-color);
  box-shadow: 0 0 4px rgba(var(--text-color-rgb), 0.3);
}
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:text-foreground::file-selector-button {
  color: hsl(var(--foreground));
}
.placeholder\:text-muted-foreground::-moz-placeholder {
  color: hsl(var(--muted-foreground));
}
.placeholder\:text-muted-foreground::placeholder {
  color: hsl(var(--muted-foreground));
}
.placeholder\:text-muted-foreground\/60::-moz-placeholder {
  color: hsl(var(--muted-foreground) / 0.6);
}
.placeholder\:text-muted-foreground\/60::placeholder {
  color: hsl(var(--muted-foreground) / 0.6);
}
.last\:mt-0:last-child {
  margin-top: 0px;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.hover\:cursor-default:hover {
  cursor: default;
}
.hover\:bg-accent:hover {
  background-color: hsl(var(--accent));
}
.hover\:bg-black\/80:hover {
  background-color: rgb(0 0 0 / 0.8);
}
.hover\:bg-black\/\[0\.02\]:hover {
  background-color: rgb(0 0 0 / 0.02);
}
.hover\:bg-destructive-hover:hover {
  background-color: hsl(var(--destructive-hover));
}
.hover\:bg-destructive\/80:hover {
  background-color: hsl(var(--destructive) / 0.8);
}
.hover\:bg-gray-200:hover {
  background-color: hsl(var(--gray-200));
}
.hover\:bg-gray-50:hover {
  background-color: hsl(var(--gray-50));
}
.hover\:bg-muted:hover {
  background-color: hsl(var(--muted));
}
.hover\:bg-muted\/50:hover {
  background-color: hsl(var(--muted) / 0.5);
}
.hover\:bg-red-500\/20:hover {
  background-color: rgb(239 68 68 / 0.2);
}
.hover\:bg-secondary:hover {
  background-color: hsl(var(--secondary));
}
.hover\:bg-secondary\/80:hover {
  background-color: hsl(var(--secondary) / 0.8);
}
.hover\:bg-sidebar-hover:hover {
  background-color: hsl(var(--sidebar-hover));
}
.hover\:bg-transparent:hover {
  background-color: transparent;
}
.hover\:bg-white\/\[0\.02\]:hover {
  background-color: rgb(255 255 255 / 0.02);
}
.hover\:text-accent-foreground:hover {
  color: hsl(var(--accent-foreground));
}
.hover\:text-foreground:hover {
  color: hsl(var(--foreground));
}
.hover\:text-muted-foreground:hover {
  color: hsl(var(--muted-foreground));
}
.hover\:text-primary:hover {
  color: hsl(var(--primary));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:opacity-80:hover {
  opacity: 0.8;
}
.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:bg-accent:focus {
  background-color: hsl(var(--accent));
}
.focus\:bg-destructive-hover:focus {
  background-color: hsl(var(--destructive-hover));
}
.focus\:bg-destructive\/10:focus {
  background-color: hsl(var(--destructive) / 0.1);
}
.focus\:bg-gray-200:focus {
  background-color: hsl(var(--gray-200));
}
.focus\:text-accent-foreground:focus {
  color: hsl(var(--accent-foreground));
}
.focus\:text-destructive:focus {
  color: hsl(var(--destructive));
}
.focus\:opacity-100:focus {
  opacity: 1;
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-0:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-0:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}
.focus-visible\:ring-offset-0:focus-visible {
  --tw-ring-offset-width: 0px;
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}
.active\:bg-black\/\[0\.06\]:active {
  background-color: rgb(0 0 0 / 0.06);
}
.active\:bg-red-500\/20:active {
  background-color: rgb(239 68 68 / 0.2);
}
.active\:bg-white\/\[0\.04\]:active {
  background-color: rgb(255 255 255 / 0.04);
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
  border-color: hsl(var(--muted) / 0.4);
}
.group.destructive .group-\[\.destructive\]\:text-destructive\/50 {
  color: hsl(var(--destructive) / 0.5);
}
.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
  border-color: hsl(var(--destructive) / 0.3);
}
.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
  background-color: hsl(var(--destructive));
}
.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
  color: hsl(var(--destructive-foreground));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
  --tw-ring-color: hsl(var(--destructive));
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}
.has-\[\>\[data-slot\=field\]\]\:w-full:has(>[data-slot=field]) {
  width: 100%;
}
.has-\[\>\[data-slot\=field\]\]\:flex-col:has(>[data-slot=field]) {
  flex-direction: column;
}
.has-\[\>\[data-slot\=field-content\]\]\:items-start:has(>[data-slot=field-content]) {
  align-items: flex-start;
}
.has-\[\>\[data-slot\=checkbox-group\]\]\:gap-3:has(>[data-slot=checkbox-group]) {
  gap: 0.75rem;
}
.has-\[\>\[data-slot\=radio-group\]\]\:gap-3:has(>[data-slot=radio-group]) {
  gap: 0.75rem;
}
.has-\[\>\[data-slot\=field\]\]\:rounded-md:has(>[data-slot=field]) {
  border-radius: calc(var(--radius) - 2px);
}
.has-\[\>\[data-slot\=field\]\]\:border:has(>[data-slot=field]) {
  border-width: 1px;
}
.group\/field:has([data-orientation=horizontal]) .group-has-\[\[data-orientation\=horizontal\]\]\/field\:text-balance {
  text-wrap: balance;
}
.aria-disabled\:opacity-50[aria-disabled="true"] {
  opacity: 0.5;
}
.aria-selected\:text-muted-foreground[aria-selected="true"] {
  color: hsl(var(--muted-foreground));
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[slot\=checkbox-group\]\:gap-3[data-slot="checkbox-group"] {
  gap: 0.75rem;
}
.data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"] {
  border-radius: 0px;
}
.data-\[range-start\=true\]\:rounded-md[data-range-start="true"] {
  border-radius: calc(var(--radius) - 2px);
}
.data-\[selected\=true\]\:rounded-none[data-selected="true"] {
  border-radius: 0px;
}
.data-\[state\=active\]\:border-border[data-state="active"] {
  border-color: hsl(var(--border));
}
.data-\[highlighted\]\:bg-accent[data-highlighted] {
  background-color: hsl(var(--accent));
}
.data-\[selected\=\'true\'\]\:bg-accent[data-selected='true'] {
  background-color: hsl(var(--accent));
}
.data-\[state\=checked\]\:bg-foreground\/50[data-state="checked"] {
  background-color: hsl(var(--foreground) / 0.5);
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(var(--primary));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(var(--accent));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: hsl(var(--muted));
}
.data-\[state\=unchecked\]\:bg-muted-foreground\/30[data-state="unchecked"] {
  background-color: hsl(var(--muted-foreground) / 0.3);
}
.data-\[variant\=label\]\:text-sm[data-variant="label"] {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.data-\[variant\=legend\]\:text-base[data-variant="legend"] {
  font-size: 1rem;
  line-height: 1.5rem;
}
.data-\[highlighted\]\:text-accent-foreground[data-highlighted] {
  color: hsl(var(--accent-foreground));
}
.data-\[invalid\=true\]\:text-destructive[data-invalid="true"] {
  color: hsl(var(--destructive));
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: hsl(var(--accent-foreground));
}
.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(var(--foreground));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(var(--primary-foreground));
}
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
  transition-property: none;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
  --tw-exit-opacity: 0.8;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}
.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}
.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.disabled\:data-\[state\=unchecked\]\:bg-muted-foreground\/20[data-state="unchecked"]:disabled {
  background-color: hsl(var(--muted-foreground) / 0.2);
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative {
  position: relative;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10 {
  z-index: 10;
}
.group\/field-group[data-variant="outline"] .group-data-\[variant\=outline\]\/field-group\:-mb-2 {
  margin-bottom: -0.5rem;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring {
  border-color: hsl(var(--ring));
}
.group\/field[data-disabled="true"] .group-data-\[disabled\=true\]\/field\:opacity-50 {
  opacity: 0.5;
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\] {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50 {
  --tw-ring-color: hsl(var(--ring) / 0.5);
}
.dark\:border:is(.dark *) {
  border-width: 1px;
}
.dark\:border-destructive:is(.dark *) {
  border-color: hsl(var(--destructive));
}
.dark\:border-gray-600:is(.dark *) {
  border-color: hsl(var(--gray-600));
}
.dark\:border-muted:is(.dark *) {
  border-color: hsl(var(--muted));
}
.dark\:border-tag-gray:is(.dark *) {
  border-color: var(--tag-gray);
}
.dark\:border-tag-mint:is(.dark *) {
  border-color: var(--tag-mint);
}
.dark\:border-tag-pink:is(.dark *) {
  border-color: var(--tag-pink);
}
.dark\:border-tag-rose:is(.dark *) {
  border-color: var(--tag-rose);
}
.dark\:border-tag-sand:is(.dark *) {
  border-color: var(--tag-sand);
}
.dark\:border-tag-sky:is(.dark *) {
  border-color: var(--tag-sky);
}
.dark\:border-tag-slate:is(.dark *) {
  border-color: var(--tag-slate);
}
.dark\:bg-\[hsl\(var\(--gray-700\)\)\]:is(.dark *) {
  background-color: hsl(var(--gray-700));
}
.dark\:bg-background:is(.dark *) {
  background-color: hsl(var(--background));
}
.dark\:bg-gray-800:is(.dark *) {
  background-color: hsl(var(--gray-800));
}
.dark\:bg-muted\/40:is(.dark *) {
  background-color: hsl(var(--muted) / 0.4);
}
.dark\:bg-transparent:is(.dark *) {
  background-color: transparent;
}
.dark\:bg-white:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.dark\:from-gray-900:is(.dark *) {
  --tw-gradient-from: hsl(var(--gray-900)) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(var(--gray-900) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.dark\:to-gray-800:is(.dark *) {
  --tw-gradient-to: hsl(var(--gray-800)) var(--tw-gradient-to-position);
}
.dark\:text-black:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.dark\:text-destructive:is(.dark *) {
  color: hsl(var(--destructive));
}
.dark\:text-foreground:is(.dark *) {
  color: hsl(var(--foreground));
}
.dark\:text-gray-200:is(.dark *) {
  color: hsl(var(--gray-200));
}
.dark\:text-gray-400:is(.dark *) {
  color: hsl(var(--gray-400));
}
.dark\:text-tag-gray:is(.dark *) {
  color: var(--tag-gray);
}
.dark\:text-tag-mint:is(.dark *) {
  color: var(--tag-mint);
}
.dark\:text-tag-pink:is(.dark *) {
  color: var(--tag-pink);
}
.dark\:text-tag-rose:is(.dark *) {
  color: var(--tag-rose);
}
.dark\:text-tag-sand:is(.dark *) {
  color: var(--tag-sand);
}
.dark\:text-tag-sky:is(.dark *) {
  color: var(--tag-sky);
}
.dark\:text-tag-slate:is(.dark *) {
  color: var(--tag-slate);
}
.dark\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:opacity-50:is(.dark *) {
  opacity: 0.5;
}
.dark\:invert:is(.dark *) {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.dark\:placeholder\:text-muted:is(.dark *)::-moz-placeholder {
  color: hsl(var(--muted));
}
.dark\:placeholder\:text-muted:is(.dark *)::placeholder {
  color: hsl(var(--muted));
}
.dark\:hover\:bg-destructive-hover:hover:is(.dark *) {
  background-color: hsl(var(--destructive-hover));
}
.dark\:hover\:bg-gray-700:hover:is(.dark *) {
  background-color: hsl(var(--gray-700));
}
.dark\:hover\:bg-muted:hover:is(.dark *) {
  background-color: hsl(var(--muted));
}
.dark\:hover\:bg-muted\/50:hover:is(.dark *) {
  background-color: hsl(var(--muted) / 0.5);
}
.dark\:hover\:bg-muted\/60:hover:is(.dark *) {
  background-color: hsl(var(--muted) / 0.6);
}
.dark\:hover\:bg-white\/80:hover:is(.dark *) {
  background-color: rgb(255 255 255 / 0.8);
}
.dark\:focus\:bg-gray-700:focus:is(.dark *) {
  background-color: hsl(var(--gray-700));
}
@media (min-width: 640px) {
  .sm\:bottom-0 {
    bottom: 0px;
  }
  .sm\:right-0 {
    right: 0px;
  }
  .sm\:top-auto {
    top: auto;
  }
  .sm\:mt-0 {
    margin-top: 0px;
  }
  .sm\:max-w-md {
    max-width: 28rem;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:flex-col {
    flex-direction: column;
  }
  .sm\:justify-end {
    justify-content: flex-end;
  }
  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }
  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }
  .sm\:rounded-lg {
    border-radius: var(--radius);
  }
  .sm\:text-left {
    text-align: left;
  }
  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}
@media (min-width: 768px) {
  .md\:max-w-\[420px\] {
    max-width: 420px;
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:p-12 {
    padding: 3rem;
  }
  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button {
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}
.\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button {
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\>\*\]\:w-full>* {
  width: 100%;
}
.\[\&\>\.sr-only\]\:w-auto>.sr-only {
  width: auto;
}
.\[\&\>\[data-slot\=field-group\]\]\:gap-4>[data-slot=field-group] {
  gap: 1rem;
}
.\[\&\>\[data-slot\=field-label\]\]\:flex-auto>[data-slot=field-label] {
  flex: 1 1 auto;
}
.\[\&\>\[data-slot\=field\]\]\:p-4>[data-slot=field] {
  padding: 1rem;
}
.\[\&\>a\:hover\]\:text-primary>a:hover {
  color: hsl(var(--primary));
}
.\[\&\>a\]\:underline>a {
  text-decoration-line: underline;
}
.\[\&\>a\]\:underline-offset-4>a {
  text-underline-offset: 4px;
}
.\[\&\>span\]\:line-clamp-1>span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\[\&\>span\]\:text-xs>span {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&\>span\]\:opacity-70>span {
  opacity: 0.7;
}
.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>svg\]\:absolute>svg {
  position: absolute;
}
.\[\&\>svg\]\:left-4>svg {
  left: 1rem;
}
.\[\&\>svg\]\:top-4>svg {
  top: 1rem;
}
.\[\&\>svg\]\:size-3\.5>svg {
  width: 0.875rem;
  height: 0.875rem;
}
.\[\&\>svg\]\:h-2\.5>svg {
  height: 0.625rem;
}
.\[\&\>svg\]\:h-3>svg {
  height: 0.75rem;
}
.\[\&\>svg\]\:w-2\.5>svg {
  width: 0.625rem;
}
.\[\&\>svg\]\:w-3>svg {
  width: 0.75rem;
}
.\[\&\>svg\]\:text-destructive>svg {
  color: hsl(var(--destructive));
}
.\[\&\>svg\]\:text-foreground>svg {
  color: hsl(var(--foreground));
}
.\[\&\>svg\]\:text-muted-foreground>svg {
  color: hsl(var(--muted-foreground));
}
.\[\&\>svg\~\*\]\:pl-7>svg~* {
  padding-left: 1.75rem;
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}
.\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text {
  fill: hsl(var(--muted-foreground));
}
.\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke='#ccc'] {
  stroke: hsl(var(--border) / 0.5);
}
.\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor {
  stroke: hsl(var(--border));
}
.\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\.recharts-layer\]\:outline-none .recharts-layer {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc'] {
  stroke: hsl(var(--border));
}
.\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector {
  fill: hsl(var(--muted));
}
.\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor {
  fill: hsl(var(--muted));
}
.\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc'] {
  stroke: hsl(var(--border));
}
.\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff'] {
  stroke: transparent;
}
.\[\&_\.recharts-sector\]\:outline-none .recharts-sector {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.\[\&_\.recharts-surface\]\:outline-none .recharts-surface {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  color: hsl(var(--muted-foreground));
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}
.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6 svg:not([class*='size-']) {
  width: 1.5rem;
  height: 1.5rem;
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}
.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}
[data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
[data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent {
  background-color: transparent;
}
[data-variant=legend]+.\[\[data-variant\=legend\]\+\&\]\:-mt-1\.5 {
  margin-top: -0.375rem;
}