:root {
  --primary: #10a37f;
  --primary-hover: #1a7f64;
  --primary-light: #e6f7f3;
  --primary-border: #a3e6d5;
  --accent-purple: #7c3aed;
  --accent-purple-hover: #6d28d9;
  --accent-purple-light: #f3e8ff;
  --accent-purple-border: #d8b4fe;
  --accent-blue: #2563eb;
  --accent-blue-hover: #1d4ed8;
  --accent-blue-light: #eff6ff;
  --accent-blue-border: #bfdbfe;
  --accent-amber: #d97706;
  --accent-amber-light: #fffbeb;
  --accent-amber-border: #fde68a;
  --accent-cyan: #0891b2;
  --accent-cyan-light: #ecfeff;
  --accent-cyan-border: #a5f3fc;
  --success: #10b981;
  --success-hover: #059669;
  --success-light: #ecfdf5;
  --success-border: #a7f3d0;
  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-light: #fffbeb;
  --warning-border: #fde68a;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-light: #fef2f2;
  --danger-border: #fecaca;
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-sub: #f1f5f9;
  --bg-chat-bot: #ffffff;
  --bg-chat-user: #10a37f;
  --bg-dark-editor: #0f172a;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --border: #cbd5e1;
  --border-light: #e2e8f0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 9999px;
  --font-main: 'Cairo', 'Tajawal', system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --font-code: 'Fira Code', Consolas, Monaco, 'Courier New', monospace;
  --font-size-title: clamp(16px, 1.5vw, 24px);
  --font-size-subtitle: clamp(12px, 1vw, 15px);
  --font-size-body: clamp(13px, 0.95vw, 15px);
  --font-size-small: clamp(11px, 0.8vw, 13px);
  --font-size-card-val: clamp(22px, 2.2vw, 34px);
  --header-height: 64px;
  --z-base: 1;
  --z-card: 2;
  --z-sticky: 100;
  --z-bottom-nav: 2000;
  --z-pwa-banner: 4000;
  --z-modal-backdrop: 5000;
  --z-modal-content: 5001;
  --z-toast: 9000;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: none !important;
  animation: none !important;
  scroll-behavior: auto !important;
}
html,
body {
  direction: rtl !important;
  text-align: right !important;
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-main);
  font-weight: 500;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden !important; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-pill);
}
i.fa-solid,
i.fa-brands,
i.fa-regular {
  display: inline-block;
  vertical-align: middle;
}
.app-icon-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 100%;
  max-height: 100%;
  display: block;
}
.m7q2x9k4v8p1z6r3t5n0w8c2y4h6d9s {
  position: fixed;
  top: 12px;
  right: 50%;
  transform: translateX(50%);
  width: calc(100% - 24px);
  max-width: 680px;
  background: #ffffff;
  border: 1.5px solid var(--primary-border);
  border-radius: var(--radius-xl);
  padding: 10px 16px;
  z-index: var(--z-pwa-banner);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.m7q2x9k4v8p1z6r3t5n0w8c2y4h6d9s-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.b8n3x7m5q1r9v4k6t2z0p8w5c3y7h1f {
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--primary-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
}
.r4v9k2m7x1q6z3n8p5w0t4c9y2h7d6a {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.r4v9k2m7x1q6z3n8p5w0t4c9y2h7d6a strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}
.r4v9k2m7x1q6z3n8p5w0t4c9y2h7d6a span {
  font-size: 11px;
  color: var(--text-muted);
}
.t6m1q8x3v9k4z7r2n5p0w6c8y3h1d9s {
  display: flex;
  align-items: center;
  gap: 8px;
}
.c9x4m7q2v8n1k5z3r6p0w9t4y7h2d8f {
  background: var(--primary);
  color: #ffffff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.c9x4m7q2v8n1k5z3r6p0w9t4y7h2d8f:hover {
  background: var(--primary-hover);
}
.p3k8v1m6x9q4r7z2n5w0c8t3y6h1d9a {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}
.a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6 {
  width: 100vw;
  height: 100vh;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.b1c2d3e4f5g6h7i8j9k0l1m2n3o4p5q6 {
  width: 100%;
  max-width: 1800px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}
.c1d2e3f4g5h6i7j8k9l0m1n2o3p4q5r6 {
  height: var(--header-height);
  min-height: var(--header-height);
  background: #ffffff;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 0 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.d1e2f3g4h5i6j7k8l9m0n1o2p3q4r5s6 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: space-between;
}
.e1f2g3h4i5j6k7l8m9n0o1p2q3r4s5t6 {
  width: 42px;
  height: 42px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
}
.f1g2h3i4j5k6l7m8n9o0p1q2r3s4t5u6 h1 {
  font-size: var(--font-size-title);
  color: var(--text-main);
  line-height: 1.1;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ai-badge-pro {
  font-size: 11px;
  font-weight: 800;
  background: var(--accent-purple-light);
  color: var(--accent-purple);
  border: 1px solid var(--accent-purple-border);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.header-model-selector-wrapper {
  margin-left: 10px;
  flex-shrink: 0;
}
.model-select-dropdown {
  background: var(--bg-card-sub);
  border: 1.5px solid var(--border-light);
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  outline: none;
}
.model-select-dropdown:focus {
  border-color: var(--primary);
  background: #ffffff;
}
.wallet-header-badge-container {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}
.header-asset-select {
  background: var(--bg-card-sub);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-pill);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-main);
  cursor: pointer;
  outline: none;
}
.k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6 {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-small);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.k1l2m3n4o5p6q7r8s9t0u1v2w3x4y5z6.l1m2n3o4p5q6r7s8t9u0v1w2x3y4z5a6 {
  background: var(--primary-light);
  color: var(--primary);
  border: 1.5px solid var(--primary-border);
}
.u1v2w3x4y5z6a7b8c9d0e1f2g3h4i5j6.full-width-layout {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.a3b4c5d6e7f8g9h0i1j2k3l4m5n6o7p8 {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8 {
  display: none;
  flex-direction: column;
  height: 100%;
  width: 100%;
  min-height: 0;
  overflow-y: auto; 
}
.c3d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8.a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7 {
  display: flex;
}
#pane_home_dashboard {
  padding: 16px;
  gap: 20px;
}
.home-hub-welcome-banner {
  background: #ffffff;
  border: 1.5px solid var(--primary-border);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.home-banner-graphic {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #ffffff;
  padding: 4px;
  border: 1px solid var(--border-light);
}
.home-banner-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.home-banner-text h2 {
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 900;
  color: var(--text-main);
}
.home-banner-text p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.home-quick-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.home-stat-chip {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.home-stat-chip:hover {
  border-color: var(--primary-border);
  background: var(--primary-light);
}
.home-stat-chip i {
  font-size: 20px;
}
.home-stat-chip div {
  display: flex;
  flex-direction: column;
}
.home-stat-chip span {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
}
.home-stat-chip strong {
  font-size: 13px;
  color: var(--text-main);
  font-weight: 900;
}
.home-modules-launch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.module-launch-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.module-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.module-card-content h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
}
.module-card-content p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}
.module-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  padding-top: 10px;
  border-top: 1px dashed var(--border-light);
}
.home-bottom-sections-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-top: 4px;
}
.home-recent-chats-panel,
.home-quick-tools-panel {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-main);
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 10px;
}
.home-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.quick-tools-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quick-tool-btn {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-card-sub);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  font-family: var(--font-main);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
.quick-tool-btn:hover {
  background: #ffffff;
  border-color: var(--primary-border);
  color: var(--primary);
}
#pane_khadija_chat {
  overflow: hidden !important;
}
.chat-layout-split-wrapper {
  display: flex;
  gap: 14px;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.chat-main-container {
  flex: 1;
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden; 
  position: relative;
}
.chat-main-container.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}
.chat-top-bar {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  flex-shrink: 0;
  z-index: 10;
  gap: 10px;
  flex-wrap: wrap;
}
.chat-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-right: auto;
}
.btn-chat-tool {
  background: var(--bg-card-sub);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  padding: 6px 10px;
  height: 34px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
}
.btn-chat-tool:hover {
  color: var(--primary);
  border-color: var(--primary-border);
}
.btn-chat-tool.active {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary-border);
}
.tool-toggle-search.active {
  background: var(--accent-blue-light);
  color: var(--accent-blue);
  border-color: var(--accent-blue-border);
}
.multi-agent-status-bar {
  background: #0f172a;
  color: #f8fafc;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.agent-step {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0.5;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.agent-step.active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
}
.step-researcher.active { color: #38bdf8; }
.step-coder.active { color: #34d399; }
.step-auditor.active { color: #f43f5e; }
.arrow-divider {
  font-size: 10px;
  color: #64748b;
}
.chat-messages-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto; 
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
}
.khadija-welcome-screen {
  margin: auto;
  max-width: 680px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 30px 10px;
}
.welcome-icon {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.khadija-welcome-screen h2 {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-main);
}
.khadija-welcome-screen p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
}
.prompt-suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 16px;
}
.prompt-card {
  background: var(--bg-card-sub);
  border: 1px solid var(--border-light);
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: right;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-main);
}
.prompt-card:hover {
  border-color: var(--primary-border);
  background: var(--primary-light);
}
.prompt-card span {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.5;
}
.chat-message-row {
  display: flex;
  gap: 12px;
  max-width: 92%;
  align-items: flex-start;
}
.chat-message-row.user-msg-row {
  margin-left: auto;
  flex-direction: row-reverse;
}
.chat-message-row.bot-msg-row {
  margin-right: auto;
}
.msg-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.user-msg-row .msg-avatar {
  background: var(--accent-purple-light);
  color: var(--accent-purple);
  border: 1px solid var(--accent-purple-border);
}
.bot-msg-row .msg-avatar {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-border);
}
.msg-bubble-content {
  background: var(--bg-chat-bot);
  border: 1px solid var(--border-light);
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-main);
  word-break: break-word;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.user-msg-row .msg-bubble-content {
  background: var(--primary);
  color: #ffffff;
  border: none;
  border-radius: 16px 16px 2px 16px;
}
.bot-msg-row .msg-bubble-content {
  border-radius: 16px 16px 16px 2px;
}
.thinking-block {
  background: var(--accent-amber-light);
  border: 1px solid var(--accent-amber-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--accent-amber);
}
.thinking-block summary {
  cursor: pointer;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}
.thinking-content {
  margin-top: 8px;
  line-height: 1.5;
  color: var(--text-main);
  font-family: var(--font-code);
  font-size: 11px;
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
}
.artifact-card-embed {
  background: #ffffff;
  border: 1.5px solid var(--accent-purple-border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin: 6px 0;
}
.artifact-card-embed:hover {
  background: var(--accent-purple-light);
}
.artifact-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 13px;
  color: var(--accent-purple);
}
.msg-bubble-content pre {
  background: #0f172a;
  color: #f8fafc;
  padding: 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-code);
  font-size: 12px;
  overflow-x: auto;
  margin: 10px 0;
  direction: ltr;
  text-align: left;
}
.msg-bubble-content code {
  font-family: var(--font-code);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}
.user-msg-row .msg-bubble-content code {
  background: rgba(255, 255, 255, 0.2);
}
.search-grounding-box {
  background: var(--accent-blue-light);
  border: 1px solid var(--accent-blue-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin-top: 8px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.grounding-title {
  font-weight: 800;
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  gap: 6px;
}
.grounding-sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.search-source-pill {
  background: #ffffff;
  border: 1px solid var(--accent-blue-border);
  color: var(--accent-blue-hover);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.search-source-pill:hover {
  background: var(--accent-blue);
  color: #ffffff;
}
.msg-attachments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.msg-image-attachment {
  max-width: 220px;
  max-height: 180px;
  border-radius: var(--radius-md);
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--border-light);
}
.msg-file-attachment {
  padding: 6px 12px;
  background: var(--bg-card-sub);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: var(--font-code);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chat-input-wrapper {
  padding: 12px 20px;
  background: #ffffff;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0; 
}
.attachments-preview-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-card-sub);
  border: 1px dashed var(--primary-border);
  border-radius: var(--radius-md);
  max-height: 100px;
  overflow-y: auto;
}
.attachment-preview-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
}
.attachment-preview-item img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
}
.btn-remove-attachment {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  font-size: 14px;
  margin-right: 4px;
}
.chat-input-controls-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-muted);
}
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
.chat-tools-indicators {
  display: flex;
  gap: 6px;
}
.indicator-chip {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.search-chip { background: var(--accent-blue-light); color: var(--accent-blue); border: 1px solid var(--accent-blue-border); }
.research-chip { background: var(--accent-cyan-light); color: var(--accent-cyan); border: 1px solid var(--accent-cyan-border); }
.reasoning-chip { background: var(--accent-purple-light); color: var(--accent-purple); border: 1px solid var(--accent-purple-border); }
.webgpu-chip { background: #f1f5f9; color: #0f172a; border: 1px solid #cbd5e1; }
.voice-chip { background: var(--danger-light); color: var(--danger); border: 1px solid var(--danger-border); }
.chat-textarea-container {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-main);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 8px 12px;
}
.chat-textarea-container:focus-within {
  border-color: var(--primary);
}
.input-actions-left {
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-attach-action {
  background: none;
  border: none;
  color: var(--text-muted);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.btn-attach-action:hover {
  background: var(--primary-light);
  color: var(--primary);
}
.btn-attach-action.recording {
  color: var(--danger);
  background: var(--danger-light);
}
.chat-textarea-container textarea {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--text-main);
  resize: none;
  max-height: 120px;
  line-height: 1.5;
}
.btn-send-chat {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.btn-send-chat:hover {
  background: var(--primary-hover);
}
.btn-send-chat:disabled {
  background: var(--border);
  cursor: not-allowed;
}
.canvas-artifacts-panel {
  width: 50%;
  min-width: 420px;
  background: var(--bg-card);
  border: 1.5px solid var(--accent-purple-border);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.canvas-header {
  padding: 12px 18px;
  background: var(--accent-purple-light);
  border-bottom: 1px solid var(--accent-purple-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.canvas-title-wrapper {
  font-weight: 900;
  font-size: 14px;
  color: var(--accent-purple);
  display: flex;
  align-items: center;
  gap: 8px;
}
.canvas-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.btn-canvas-action {
  background: #ffffff;
  border: 1px solid var(--accent-purple-border);
  color: var(--accent-purple);
  padding: 5px 10px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-canvas-action:hover {
  background: var(--accent-purple);
  color: #ffffff;
}
.btn-close-canvas {
  font-size: 18px;
  padding: 2px 8px;
}
.canvas-file-tabs-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #0f172a;
  padding: 6px 12px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.canvas-file-tab {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  color: #94a3b8;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.canvas-file-tab.active {
  background: #1e293b;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}
.btn-add-file-tab {
  background: none;
  border: none;
  color: #94a3b8;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
}
.btn-add-file-tab:hover {
  color: #ffffff;
}
.canvas-tabs-bar {
  display: flex;
  background: var(--bg-card-sub);
  border-bottom: 1px solid var(--border-light);
  padding: 4px 12px;
  gap: 6px;
  flex-shrink: 0;
  overflow-x: auto;
}
.canvas-tab-btn {
  background: none;
  border: none;
  padding: 8px 14px;
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.canvas-tab-btn.active {
  background: #ffffff;
  color: var(--accent-purple);
}
.canvas-body-container {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #0f172a;
  min-height: 0;
}
.canvas-tab-content {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.monaco-editor-host {
  width: 100%;
  height: 100%;
  min-height: 300px;
}
.canvas-code-textarea {
  width: 100%;
  height: 100%;
  background: #0f172a;
  color: #f8fafc;
  font-family: var(--font-code);
  font-size: 13px;
  line-height: 1.6;
  border: none;
  outline: none;
  padding: 16px;
  resize: none;
  direction: ltr;
  text-align: left;
}
.canvas-preview-view iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #ffffff;
}
.canvas-visual-view {
  background: #f8fafc;
  display: flex;
  flex-direction: column;
}
.visual-builder-toolbar {
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  flex-wrap: wrap;
}
.btn-visual-add {
  background: var(--bg-card-sub);
  border: 1px solid var(--border-light);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}
.btn-visual-add:hover {
  background: var(--accent-purple-light);
  color: var(--accent-purple);
}
.visual-builder-canvas {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  min-height: 300px;
  background: #ffffff;
  border: 2px dashed var(--border-light);
  margin: 14px;
  border-radius: var(--radius-lg);
  position: relative;
}
.draggable-element {
  padding: 10px 14px;
  margin-bottom: 10px;
  border: 1px dashed var(--accent-purple-border);
  border-radius: var(--radius-md);
  cursor: move;
  background: var(--accent-purple-light);
  position: relative;
}
.draggable-element:hover {
  border-color: var(--accent-purple);
}
.canvas-python-view {
  background: #020617;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #38bdf8;
}
.pyodide-status-pill,
.serverless-status-banner {
  padding: 8px 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: #38bdf8;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pyodide-console {
  background: #0f172a;
  border: 1px solid #1e293b;
  padding: 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-code);
  font-size: 12px;
  color: #f8fafc;
  min-height: 120px;
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
}
.pyodide-plots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.pyodide-plots-grid img {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid #334155;
}
.canvas-console-view {
  background: #020617;
  padding: 12px;
  font-family: var(--font-code);
  font-size: 12px;
}
.console-logs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.console-log-item {
  padding: 4px 8px;
  border-radius: 4px;
}
.log-info { color: #38bdf8; }
.log-error { color: #f87171; background: rgba(239, 68, 68, 0.1); }
.log-warn { color: #fbbf24; }
.node-workflow-board {
  position: relative;
  width: 100%;
  height: 520px;
  background: #0b1329;
  border: 1.5px solid var(--accent-purple-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.workflow-grid-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.node-elements-layer {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: auto;
}
.workflow-node-card {
  position: absolute;
  width: 260px;
  background: rgba(30, 41, 59, 0.95);
  border: 1.5px solid var(--accent-purple);
  border-radius: var(--radius-lg);
  padding: 14px;
  color: #ffffff;
  cursor: grab;
  z-index: 10;
}
.workflow-node-card:active {
  cursor: grabbing;
}
.workflow-node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
  margin-bottom: 10px;
  font-weight: 800;
  font-size: 13px;
  color: var(--accent-purple-border);
}
.workflow-node-body {
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.workflow-node-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  font-weight: 800;
}
.node-badge-research { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }
.node-badge-coder { background: rgba(52, 211, 153, 0.2); color: #34d399; }
.node-badge-oracle { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.workflow-controls {
  display: flex;
  gap: 8px;
}
.voice-live-orb-container {
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.voice-live-orb {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary) 0%, var(--primary-hover) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 42px;
}
.voice-live-orb.listening {
  background: radial-gradient(circle, #ef4444 0%, #dc2626 100%);
}
.voice-live-orb.speaking {
  background: radial-gradient(circle, #7c3aed 0%, #6d28d9 100%);
}
.voice-stream-status-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 16px;
}
.projects-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 12px;
}
.project-card-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  background: var(--bg-card-sub);
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-xl);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.project-card-empty i {
  font-size: 32px;
  color: var(--border);
}
.d3e4f5g6h7i8j9k0l1m2n3o4p5q6r7s8 {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: clamp(14px, 1.8vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.f3g4h5i6j7k8l9m0n1o2p3q4r5s6t7u8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--bg-main);
  padding-bottom: 10px;
}
.g3h4i5j6k7l8m9n0o1p2q3r4s5t6u7v8 {
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 900;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}
.j3k4l5m6n7o8p9q0r1s2t3u4v5w6x7y8 {
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.6;
}
.e3f4g5h6i7j8k9l0m1n2o3p4q5r6s7t8 {
  background: var(--bg-card-sub);
}
.k3l4m5n6o7p8q9r0s1t2u3v4w5x6y7z8 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.l3m4n5o6p7q8r9s0t1u2v3w4x5y6z7a8 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.l3m4n5o6p7q8r9s0t1u2v3w4x5y6z7a8 label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.m3n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.o3p4q5r6s7t8u9v0w1x2y3z4a5b6c7d8 {
  background: var(--bg-card);
  border: 1.5px solid var(--border-light);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.o3p4q5r6s7t8u9v0w1x2y3z4a5b6c7d8:hover {
  border-color: var(--primary-border);
  color: var(--primary);
}
#n3o4p5q6r7s8t9u0v1w2x3y4z5a6b7c8 {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-code);
  font-size: 12px;
  background: #ffffff;
  color: var(--primary);
  font-weight: 700;
  outline: none;
}
.q3r4s5t6u7v8w9x0y1z2a3b4c5d6e7f8 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.r3s4t5u6v7w8x9y0z1a2b3c4d5e6f7g8 {
  padding: 20px;
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
}
.s3t4u5v6w7x8y9z0a1b2c3d4e5f6g7h8 {
  background: var(--primary-light);
  border-color: var(--primary-border);
}
.b4c5d6e7f8g9h0i1j2k3l4m5n6o7p8q9 {
  background: var(--accent-amber-light);
  border-color: var(--accent-amber-border);
}
.t3u4v5w6x7y8z9a0b1c2d3e4f5g6h7i8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.u3v4w5x6y7z8a9b0c1d2e3f4g5h6i7j8 {
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}
.w3x4y5z6a7b8c9d0e1f2g3h4i5j6k7l8 {
  font-size: var(--font-size-card-val);
  font-weight: 900;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.y3z4a5b6c7d8e9f0g1h2i3j4k5l6m7n8 {
  font-size: var(--font-size-small);
  color: var(--text-muted);
}
.c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9 {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-card);
  color: var(--accent-amber);
}
.j5k6l7m8n9o0p1q2r3s4t5u6v7w8x9y0 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.l5m6n7o8p9q0r1s2t3u4v5w6x7y8z9a0 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.m5n6o7p8q9r0s1t2u3v4w5x6y7z8a9b0 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.m5n6o7p8q9r0s1t2u3v4w5x6y7z8a9b0 label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}
.x4y5z6a7b8c9d0e1f2g3h4i5j6k7l8m9,
.z4a5b6c7d8e9f0g1h2i3j4k5l6m7n8o9 {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 13px;
  background: #ffffff;
  color: var(--text-main);
  outline: none;
}
.x4y5z6a7b8c9d0e1f2g3h4i5j6k7l8m9:focus {
  border-color: var(--primary);
}
.o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9d0 {
  font-size: 18px;
  font-weight: 900;
  color: var(--primary);
  font-family: var(--font-code);
}
.s5t6u7v8w9x0y1z2a3b4c5d6e7f8g9h0 {
  font-family: var(--font-code);
  font-size: 12px;
}
.t5u6v7w8x9y0z1a2b3c4d5e6f7g8h9i0 {
  padding: 14px;
  background: var(--bg-card-sub);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}
.u5v6w7x8y9z0a1b2c3d4e5f6g7h8i9j0 {
  display: flex;
  align-items: center;
}
.v5w6x7y8z9a0b1c2d3e4f5g6h7i8j9k0 {
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.v5w6x7y8z9a0b1c2d3e4f5g6h7i8j9k0 input {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
}
.y5z6a7b8c9d0e1f2g3h4i5j6k7l8m9n0 {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.a6b7c8d9e0f1g2h3i4j5k6l7m8n9o0p1 {
  gap: 8px;
}
.b6c7d8e9f0g1h2i3j4k5l6m7n8o9p0q1 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c6d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1 {
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.d6e7f8g9h0i1j2k3l4m5n6o7p8q9r0s1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.q5r6s7t8u9v0w1x2y3z4a5b6c7d8e9f0 {
  margin-top: 10px;
}
.i6j7k8l9m0n1o2p3q4r5s6t7u8v9w0x1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-md);
}
.j6k7l8m9n0o1p2q3r4s5t6u7v8w9x0y1 {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.j6k7l8m9n0o1p2q3r4s5t6u7v8w9x0y1 strong {
  font-family: var(--font-code);
  font-size: 16px;
  color: var(--primary);
}
.l6m7n8o9p0q1r2s3t4u5v6w7x8y9z0a1 strong {
  color: var(--text-muted);
}
.m6n7o8p9q0r1s2t3u4v5w6x7y8z9a0b1 {
  background: var(--primary);
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  border-radius: var(--radius-lg);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.m6n7o8p9q0r1s2t3u4v5w6x7y8z9a0b1:hover {
  background: var(--primary-hover);
}
.n6o7p8q9r0s1t2u3v4w5x6y7z8a9b0c1 {
  width: 100%;
}
.q6r7s8t9u0v1w2x3y4z5a6b7c8d9e0f1 {
  background: var(--bg-card-sub);
  padding: 12px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.q6r7s8t9u0v1w2x3y4z5a6b7c8d9e0f1 label {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.s6t7u8v9w0x1y2z3a4b5c6d7e8f9g0h1 {
  display: flex;
  gap: 8px;
}
#t6u7v8w9x0y1z2a3b4c5d6e7f8g9h0i1 {
  flex: 1;
  padding: 8px 12px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-code);
  font-size: 11px;
  background: #ffffff;
}
.v6w7x8y9z0a1b2c3d4e5f6g7h8i9j0k1 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.y6z7a8b9c0d1e2f3g4h5i6j7k8l9m0n1 {
  font-family: var(--font-code);
  font-size: 12px;
  resize: vertical;
  min-height: 80px;
}
.b7c8d9e0f1g2h3i4j5k6l7m8n9o0p1q2 {
  background: var(--accent-purple);
  color: #ffffff;
  border: none;
  padding: 12px 20px;
  border-radius: var(--radius-lg);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.b7c8d9e0f1g2h3i4j5k6l7m8n9o0p1q2:hover {
  background: var(--accent-purple-hover);
}
.d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1s2 {
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
}
.f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2 {
  background: var(--success-light);
  border: 1.5px solid var(--success-border);
  padding: 16px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.f7g8h9i0j1k2l3m4n5o6p7q8r9s0t1u2 h4 {
  font-size: 14px;
  font-weight: 900;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 8px;
}
.h7i8j9k0l1m2n3o4p5q6r7s8t9u0v1w2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.i7j8k9l0m1n2o3p4q5r6s7t8u9v0w1x2 {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.i7j8k9l0m1n2o3p4q5r6s7t8u9v0w1x2 strong {
  font-weight: 800;
  font-family: var(--font-code);
}
.n7o8p9q0r1s2t3u4v5w6x7y8z9a0b1c2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.p7q8r9s0t1u2v3w4x5y6z7a8b9c0d1e2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.p4q5r6s7t8u9v0w1x2y3z4a5b6c7d8e9 {
  padding: 30px;
  text-align: center;
  background: var(--bg-card-sub);
  border: 1.5px dashed var(--border-light);
  border-radius: var(--radius-xl);
  color: var(--text-muted);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.p4q5r6s7t8u9v0w1x2y3z4a5b6c7d8e9 i {
  font-size: 24px;
}
.q4r5s6t7u8v9w0x1y2z3a4b5c6d7e8f9 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.t4u5v6w7x8y9z0a1b2c3d4e5f6g7h8i9 {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.u4v5w6x7y8z9a0b1c2d3e4f5g6h7i8j9 {
  flex: 1;
  min-width: 180px;
}
.d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
}
.f5g6h7i8j9k0l1m2n3o4p5q6r7s8t9u0 {
  background: none;
  border: none;
  color: var(--primary);
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.m4n5o6p7q8r9s0t1u2v3w4x5y6z7a8b9 {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border-light);
}
.n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9 {
  width: 100%;
  border-collapse: collapse;
  text-align: right;
  direction: rtl;
  font-size: 13px;
  min-width: 520px;
}
.n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9 th {
  color: var(--text-main);
  font-weight: 800;
  font-size: 12px;
  padding: 12px 14px;
  border-bottom: 1.5px solid var(--border-light);
  background: var(--bg-card-sub);
}
.n4o5p6q7r8s9t0u1v2w3x4y5z6a7b8c9 td {
  padding: 12px 14px;
  background: var(--bg-card);
  color: var(--text-main);
  border-bottom: 1px solid var(--border-light);
}
.a7k2m9x4p6v1n8q3r5t7y2w9c4h6j8 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.z4m7x1q9v3k8r5t2p6d0h7w4c1b9n8l {
  margin-top: 10px;
}
.r7s8t9u0v1w2x3y4z5a6b7c8d9e0f1g2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#s7t8u9v0w1x2y3z4a5b6c7d8e9f0g1h2 {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-code);
  font-size: 12px;
  background: #ffffff;
  color: var(--primary);
  font-weight: 700;
  outline: none;
}
.h6q3m8x1v9k4r7t2p5d0w8c6z1b9n4l {
  background: var(--bg-card-sub);
  border: 1.5px solid var(--border-light);
  padding: 18px;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.b4q8x2m7n5k1v9r3t6y4p8c2w7h5j9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.b4q8x2m7n5k1v9r3t6y4p8c2w7h5j9 h4 {
  font-size: 14px;
  font-weight: 900;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}
.c9v3k7x1m8q4n6r2t9y5p3w8h4j7a6 {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--border-light);
  color: var(--text-muted);
}
.c9v3k7x1m8q4n6r2t9y5p3w8h4j7a6.active {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid var(--success-border);
}
.d2m8q5x9v4k7n1r6t3y8p5c9w2h4j7 {
  display: flex;
  gap: 10px;
}
.x7y8z9a0b1c2d3e4f5g6h7i8j9k0l1m2 {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid var(--danger-border);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.w5m9x2q7v1k8r4t6p3n0d7h9c2z5b8l {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.65);
  z-index: var(--z-modal-backdrop);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}
.w5m9x2q7v1k8r4t6p3n0d7h9c2z5b8l > div {
  background: #ffffff;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 440px;
}
.lightbox-content-box {
  max-width: 800px !important;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.lightbox-header {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
}
.lightbox-body {
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000;
  overflow: hidden;
}
.lightbox-body img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
}
.h3q8m1x7v4k9r2t6p5d0w8c3z7b1n9l {
  background: var(--bg-card-sub);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-light);
}
.h3q8m1x7v4k9r2t6p5d0w8c3z7b1n9l h3 {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}
.s9x3k7m1q8v4r6t2p5d0h9w3c7z1b8l {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
}
.h3n7v5k9q2m6x4r8t1y7p3c5w9j2a6 {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.k4m9x1q7v3r8t5p2n6d0h4w9c7z1b8l {
  padding: 14px 20px;
  background: var(--bg-main);
  border-top: 1px solid var(--border-light);
  display: flex;
  gap: 10px;
}
.q6v2m9x4k7r1t8p3n5d0h6w2c9z4b8l {
  position: relative;
}
#c7m2x9q4v8k1r6t3p5n0d7h2w9b4l8z {
  text-align: center;
  font-family: var(--font-code);
  font-size: 24px;
  letter-spacing: 8px;
}
.b7q3m9x1v8k4r6t2p5d0h9w3c7z1n8l {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.f4m9k2x7q1v6z3n8r5w0p4c9y2h7t6a {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border);
}
.f4m9k2x7q1v6z3n8r5w0p4c9y2h7t6a.filled {
  background: var(--primary);
}
.i7m2x8q4v9k3n5r1t6y8p4c7w2h9j5 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  direction: ltr;
}
.m8q3x7v1k9r4t6p2n5d0h8w3c7z1b6l {
  padding: 12px;
  font-family: var(--font-code);
  font-size: 18px;
  font-weight: 800;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-light);
  background: var(--bg-card);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m8q3x7v1k9r4t6p2n5d0h8w3c7z1b6l:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary-border);
}
.m8q3x7v1k9r4t6p2n5d0h8w3c7z1b6l.action-btn {
  font-size: 13px;
  font-family: var(--font-main);
  background: var(--bg-card-sub);
}
.r8x2m7q4v1k9t5p3n6d0h8w2c7z4b1l {
  padding: 10px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}
.k9l0m1n2o3p4q5r6s7t8u9v0w1x2y3z4 {
  position: fixed;
  bottom: clamp(12px, 2vw, 24px);
  left: clamp(12px, 2vw, 24px);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
  pointer-events: none;
}
.q4m8x2v7k1r9t5p3n6d0h8w4c7z2b9l {
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 62px;
  background: #ffffff;
  border-top: 1px solid var(--border-light);
  z-index: var(--z-bottom-nav);
  padding: 4px;
}
.x7q2m9v4k1r8t5p3n6d0h7w2c9z4b8l {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.p6m3x9q2v8k1r5t7n4d0h6w9c2z8b1l {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: 1;
  height: 100%;
  color: var(--text-muted);
  cursor: pointer;
}
.p6m3x9q2v8k1r5t7n4d0h6w9c2z8b1l.a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7 {
  color: var(--primary);
  font-weight: 800;
}
.p6m3x9q2v8k1r5t7n4d0h6w9c2z8b1l i {
  font-size: 16px;
}
.p6m3x9q2v8k1r5t7n4d0h6w9c2z8b1l span {
  font-size: 10px;
}
.onboarding-modal-card {
  background: #ffffff !important;
  border: 1.5px solid var(--primary-border) !important;
  border-radius: var(--radius-xl) !important;
  width: 100% !important;
  max-width: 620px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.onboarding-header {
  padding: 16px 22px;
  background: var(--bg-card-sub);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.onboarding-logo-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 15px;
  color: var(--text-main);
}
.onboarding-app-logo {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px;
}
.onboarding-step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}
.step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--border-light);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-dot.active {
  background: var(--primary);
  color: #ffffff;
}
.step-dot.completed {
  background: var(--primary-light);
  color: var(--primary);
  border: 1.5px solid var(--primary-border);
}
.onboarding-body-wrapper {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.onboarding-step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.onboarding-hero-icon {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: var(--primary-light);
  color: var(--primary);
  border: 1.5px solid var(--primary-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.onboarding-step-content h2 {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 900;
  color: var(--text-main);
  margin: 0;
}
.onboarding-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 500px;
}
.onboarding-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  text-align: right;
  margin-top: 8px;
}
.onboarding-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card-sub);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}
.onboarding-feature-item i {
  font-size: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}
.onboarding-feature-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.onboarding-feature-item strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
}
.onboarding-feature-item span {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.onboarding-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 8px;
}
.onboarding-mini-card {
  background: #ffffff;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  gap: 6px;
}
.onboarding-mini-card:hover {
  border-color: var(--primary-border);
}
.onboarding-mini-card i {
  font-size: 22px;
}
.onboarding-mini-card h4 {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  margin: 2px 0 0 0;
}
.onboarding-mini-card span {
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.4;
}
.onboarding-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: right;
  margin-top: 8px;
}
.onboarding-input-group label {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}
.onboarding-preference-toggles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: right;
  margin-top: 6px;
}
.onboarding-footer {
  padding: 16px 22px;
  background: var(--bg-card-sub);
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
@media (max-width: 1024px) {
  body {
    padding-bottom: 68px;
  }
  .q4m8x2v7k1r9t5p3n6d0h8w4c7z2b9l {
    display: block;
  }
  .chat-layout-split-wrapper {
    flex-direction: column;
  }
  .canvas-artifacts-panel {
    width: 100%;
    min-width: 0;
    height: 450px;
  }
  .home-bottom-sections-wrapper {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6 {
    padding: 6px;
  }
  .c1d2e3f4g5h6i7j8k9l0m1n2o3p4q5r6 {
    border-radius: var(--radius-lg);
    padding: 8px 12px;
  }
  .home-hub-welcome-banner {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }
  .home-quick-stats {
    justify-content: center;
  }
  .q3r4s5t6u7v8w9x0y1z2a3b4c5d6e7f8 {
    grid-template-columns: 1fr;
  }
  .chat-message-row {
    max-width: 96%;
  }
  .header-model-selector-wrapper {
    width: 100%;
    margin-top: 4px;
  }
  .model-select-dropdown {
    width: 100%;
  }
  .onboarding-body-wrapper {
    padding: 16px;
  }
  .onboarding-hero-icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
  .onboarding-cards-grid {
    grid-template-columns: 1fr;
  }
}