/* ============================================================
   QUANTA OS — 2026 ULTRA-PREMIUM LAYER
   Loads last. Wins every specificity battle.
   Design language: ambient intelligence, glass depth, earned motion.
   Inspired by: Arc, Linear, Claude.ai, Vercel v0, Perplexity.
   Six upgrades: aurora bg · film grain · premium chat · view
   transitions · glass panels · micro-motion system.
   Brand: periwinkle #6e8bff · mint #36d1c4 · near-black #08090d
   ============================================================ */

/* ── 0. Fira Code for numbers / data (design system recommendation) ── */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap');

:root {
  /* 2026 depth tokens */
  --q26-bg:          #08090d;
  --q26-bg-raised:   #0d0e13;
  --q26-bg-float:    #111318;
  --q26-glass:       rgba(255, 255, 255, 0.035);
  --q26-glass-border: rgba(255, 255, 255, 0.07);
  --q26-glass-hover: rgba(255, 255, 255, 0.055);
  --q26-accent:      #6e8bff;
  --q26-mint:        #36d1c4;
  --q26-glow-accent: 0 0 0 1px rgba(110, 139, 255, 0.35), 0 0 20px rgba(110, 139, 255, 0.18);
  --q26-glow-mint:   0 0 0 1px rgba(54, 209, 196, 0.35), 0 0 20px rgba(54, 209, 196, 0.15);
  --q26-radius:      14px;
  --q26-radius-sm:   9px;
  --q26-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --q26-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --q26-mono:        'Fira Code', 'JetBrains Mono', monospace;
  --q26-grain-opacity: 0.025;
}

/* ── 1. AURORA AMBIENT BACKGROUND ─────────────────────────────────── */
/* position:relative on body creates stacking context so z-index:-1 on
   ::before/::after stays behind body content without lifting every child. */
body.qos-active,
body[data-qos-theme="dark"].qos-active {
  background-color: var(--q26-bg) !important;
  background-image: none !important;
  position: relative;
  isolation: isolate;
}

body.qos-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 15% -5%,  rgba(110, 139, 255, 0.09) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 90%  5%,  rgba(54, 209, 196, 0.07)  0%, transparent 50%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(110, 139, 255, 0.05) 0%, transparent 55%);
  animation: q26-aurora 18s ease-in-out infinite alternate;
}

@keyframes q26-aurora {
  0%   { opacity: 0.7; transform: scale(1)    rotate(0deg);   }
  33%  { opacity: 1.0; transform: scale(1.04) rotate(0.3deg); }
  66%  { opacity: 0.8; transform: scale(0.98) rotate(-0.2deg);}
  100% { opacity: 1.0; transform: scale(1.02) rotate(0.1deg); }
}

/* ── 2. FILM GRAIN OVERLAY ────────────────────────────────────────── */
body.qos-active::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--q26-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

/* Content needs no explicit z-index — overlays are below body stacking context.
   Only modals/toasts need explicit z-index to stack above normal content. */
.qos-modal, .qos-toast-stack, #qos-palette-overlay {
  position: relative;
  z-index: 2;
}

/* ── 3. GLASS MORPHISM PANELS ─────────────────────────────────────── */
/* No backdrop-filter on cards — it creates a compositing layer per card
   and is extremely expensive in WebKit. Solid semi-opaque bg achieves
   the same visual depth without the GPU cost. */
.qos-card, .qos-panel,
.qos-stat-card,
.qi-mc-mini-panel, .qi-meet-prep-card, .qi-cicd-card,
.qi-meet-side-card, .qi-meet-hero, .qi-int-row,
.qi-dlog-insight-card, .qi-dlog-upcoming-card {
  background: rgba(14, 16, 22, 0.72) !important;
  border: 1px solid var(--q26-glass-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 16px -8px rgba(0, 0, 0, 0.5) !important;
  transition:
    border-color 0.15s var(--q26-ease),
    box-shadow 0.15s var(--q26-ease),
    background 0.15s var(--q26-ease) !important;
}
.qos-card:hover, .qos-panel:hover,
.qos-stat-card:hover,
.qi-meet-prep-card:hover, .qi-cicd-card:hover,
.qi-meet-side-card:hover, .qi-dlog-insight-card:hover {
  background: rgba(18, 20, 28, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 20px -8px rgba(0, 0, 0, 0.55) !important;
  transform: none !important;
}

/* ── 4. SIDEBAR — glass, quieter active state ─────────────────────── */
#qos-sidebar, .qos-sidebar {
  background: rgba(8, 9, 13, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.qos-nav-item {
  transition:
    background 0.15s var(--q26-ease),
    color 0.15s var(--q26-ease) !important;
}
.qos-nav-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
.qos-nav-item.is-active,
.qos-nav-item[aria-current="page"],
.qos-nav-item.active {
  background: rgba(110, 139, 255, 0.1) !important;
  color: #fff !important;
}
/* Glowing left rail on active item */
.qos-nav-item.is-active::before,
.qos-nav-item[aria-current="page"]::before,
.qos-nav-item.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 18% !important;
  width: 2px !important; height: 64% !important;
  border-radius: 2px !important;
  background: linear-gradient(180deg, var(--q26-accent), var(--q26-mint)) !important;
  box-shadow: 0 0 8px rgba(110, 139, 255, 0.7) !important;
  transform: none !important;
}

/* ── 5. TOPBAR ────────────────────────────────────────────────────── */
.qos-topbar {
  background: rgba(8, 9, 13, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ── 6. CHAT — 2026 premium redesign ─────────────────────────────── */

/* Chat container */
.qi-chat-shell {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.qi-chat-main {
  background: transparent !important;
}

/* Chat sidebar (conversations list) */
.qi-chat-sidebar {
  background: rgba(10, 11, 16, 0.75) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* New Conversation button */
.qi-sidebar-new-btn,
button[data-action="new-conversation"],
.qi-new-conv-btn {
  background: rgba(110, 139, 255, 0.12) !important;
  border: 1px solid rgba(110, 139, 255, 0.3) !important;
  color: #c5ceff !important;
  border-radius: var(--q26-radius-sm) !important;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
}
.qi-sidebar-new-btn:hover,
button[data-action="new-conversation"]:hover,
.qi-new-conv-btn:hover {
  background: rgba(110, 139, 255, 0.2) !important;
  border-color: rgba(110, 139, 255, 0.5) !important;
  box-shadow: var(--q26-glow-accent) !important;
}

/* Conversation list items */
.qi-conv-item, .qi-sidebar-item, .qi-chats-item {
  border-radius: 8px !important;
  transition: background 0.12s !important;
}
.qi-conv-item:hover, .qi-sidebar-item:hover, .qi-chats-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}
.qi-conv-item.is-active, .qi-sidebar-item.is-active, .qi-chats-item.is-active {
  background: rgba(110, 139, 255, 0.1) !important;
  border-left: 2px solid var(--q26-accent) !important;
}

/* Message canvas */
.qi-chat-canvas .qi-messages {
  padding: 16px 20px 8px !important;
  gap: 4px !important;
  display: flex;
  flex-direction: column;
}

/* ── User message bubble ── */
.qi-msg-user,
.qi-message.is-user,
[data-role="user"] {
  align-self: flex-end !important;
  max-width: 78% !important;
}
.qi-msg-user .qi-msg-body,
.qi-message.is-user .qi-msg-content,
[data-role="user"] .qi-msg-body {
  background: linear-gradient(135deg, rgba(110, 139, 255, 0.22), rgba(110, 139, 255, 0.14)) !important;
  border: 1px solid rgba(110, 139, 255, 0.3) !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 10px 14px !important;
  color: #e8ecff !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  box-shadow: 0 2px 16px -6px rgba(110, 139, 255, 0.3) !important;
}

/* ── Assistant message ── */
.qi-msg-assistant,
.qi-message.is-assistant,
[data-role="assistant"] {
  align-self: flex-start !important;
  max-width: 88% !important;
}
.qi-msg-assistant .qi-msg-body,
.qi-message.is-assistant .qi-msg-content,
[data-role="assistant"] .qi-msg-body {
  background: transparent !important;
  border: none !important;
  padding: 2px 0 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #d4d8e8 !important;
}

/* Assistant orb / avatar */
.qi-msg-assistant .qi-msg-avatar,
[data-role="assistant"] .qi-msg-avatar {
  width: 26px !important; height: 26px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--q26-accent), var(--q26-mint)) !important;
  box-shadow: 0 0 12px rgba(110, 139, 255, 0.45) !important;
  flex-shrink: 0 !important;
}

/* Message entrance animation */
.qi-msg-user, .qi-msg-assistant,
.qi-message.is-user, .qi-message.is-assistant,
[data-role="user"], [data-role="assistant"] {
  animation: q26-msg-in 0.22s var(--q26-ease) both;
}
@keyframes q26-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Code blocks inside messages */
.qi-msg-body pre, .qi-msg-content pre,
[data-role="assistant"] pre {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-family: var(--q26-mono) !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  overflow-x: auto !important;
  margin: 8px 0 !important;
}
.qi-msg-body code:not(pre code), .qi-msg-content code:not(pre code),
[data-role="assistant"] code:not(pre code) {
  background: rgba(110, 139, 255, 0.12) !important;
  border: 1px solid rgba(110, 139, 255, 0.2) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-family: var(--q26-mono) !important;
  font-size: 0.88em !important;
  color: #b4c2ff !important;
}

/* ── Composer / input dock ── */
.qi-chat-dock {
  background: linear-gradient(180deg, transparent, rgba(8, 9, 13, 0.98) 40%) !important;
  border-top: none !important;
  padding: 8px 20px 16px !important;
}

.qi-embedded .qi-composer,
.qos-chat-composer .qi-composer {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 16px !important;
  padding: 12px 14px 10px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 32px -12px rgba(0, 0, 0, 0.5) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
.qi-embedded .qi-composer:focus-within,
.qos-chat-composer .qi-composer:focus-within {
  border-color: rgba(110, 139, 255, 0.35) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(110, 139, 255, 0.08),
    0 8px 32px -12px rgba(0, 0, 0, 0.5) !important;
}

.qi-embedded .qi-composer textarea,
.qos-chat-composer .qi-composer textarea {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #e2e6f3 !important;
}
.qi-embedded .qi-composer textarea::placeholder,
.qos-chat-composer .qi-composer textarea::placeholder {
  color: rgba(160, 170, 200, 0.45) !important;
}

/* Send button glow */
.qi-btn-send {
  background: linear-gradient(135deg, var(--q26-mint), var(--q26-accent)) !important;
  box-shadow: 0 4px 16px -6px rgba(54, 209, 196, 0.5) !important;
  border: none !important;
  transition: box-shadow 0.15s, filter 0.15s !important;
}
.qi-btn-send:hover {
  box-shadow: 0 6px 22px -6px rgba(54, 209, 196, 0.7) !important;
  filter: brightness(1.08) !important;
}

/* Pipeline stepper */
.qi-pipe-step {
  font-size: 10.5px !important;
  font-weight: 640 !important;
  letter-spacing: 0.04em !important;
  border-radius: 6px !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}
.qi-pipe-step.is-on {
  background: linear-gradient(135deg, var(--q26-accent), var(--q26-mint)) !important;
  color: #07080c !important;
  border-color: transparent !important;
  box-shadow: 0 2px 12px -3px rgba(110, 139, 255, 0.5) !important;
}

/* Welcome screen */
.qi-welcome-copy h2 {
  font-size: 26px !important;
  font-weight: 680 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(135deg, #ffffff 0%, #c8d0ff 50%, var(--q26-mint) 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Welcome prompt chips */
.qi-chat-prompt, .qi-chat-prompt-btn,
[data-chat-prompt] {
  background: rgba(14, 16, 22, 0.65) !important;
  border: 1px solid var(--q26-glass-border) !important;
  border-radius: 10px !important;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
}
.qi-chat-prompt:hover, .qi-chat-prompt-btn:hover,
[data-chat-prompt]:hover {
  background: var(--q26-glass-hover) !important;
  border-color: rgba(110, 139, 255, 0.3) !important;
  box-shadow: var(--q26-glow-accent) !important;
}

/* ── 7. VIEW TRANSITIONS ──────────────────────────────────────────── */
.qos-view {
  animation: q26-view-in 0.22s var(--q26-ease) both;
}
@keyframes q26-view-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ── 8. METRIC CARDS — numeric font ──────────────────────────────── */
.qos-stat-card__value,
.qds-stat__value,
.qi-mc-stat-value,
.qi-inbox-stat-value,
.qi-perf-metric-value {
  font-family: var(--q26-mono) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.03em !important;
}

/* ── 9. STATUS DOTS — animated glow pulse ─────────────────────────── */
@keyframes q26-pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%       { box-shadow: 0 0 0 4px rgba(0,0,0,0); }
}
.qos-chip.ok::before, .qos-status-dot.ok,
.qds-badge--ok::before {
  animation: q26-pulse 2.4s ease-in-out infinite !important;
}
.qos-chip.crit::before, .qos-status-dot.crit,
.qds-badge--crit::before {
  animation: q26-pulse 1.6s ease-in-out infinite !important;
}

/* ── 10. PREMIUM BUTTONS ─────────────────────────────────────────── */
.qos-btn-primary, .qos-btn.primary, .qds-action-btn.primary {
  background: linear-gradient(135deg, var(--q26-accent), var(--q26-mint)) !important;
  color: #05080f !important;
  border: none !important;
  font-weight: 620 !important;
  box-shadow: 0 6px 20px -8px rgba(110, 139, 255, 0.55) !important;
  transition: box-shadow 0.2s, filter 0.15s !important;
}
.qos-btn-primary:hover, .qos-btn.primary:hover, .qds-action-btn.primary:hover {
  filter: brightness(1.06) !important;
  box-shadow: 0 10px 28px -8px rgba(110, 139, 255, 0.7) !important;
  transform: none !important;
}

/* ── 11. HOME PAGE — ambient section heads ────────────────────────── */
.qos-home-head h1 {
  background: linear-gradient(135deg, #ffffff 0%, #c8d0ff 60%, var(--q26-mint) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 32px !important;
  font-weight: 720 !important;
  letter-spacing: -0.035em !important;
}

/* ── 12. MODALS / OVERLAYS ───────────────────────────────────────── */
.qos-modal,
.qos-dialog,
[role="dialog"] {
  background: rgba(10, 11, 15, 0.88) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: var(--q26-radius) !important;
  box-shadow: 0 32px 80px -20px rgba(0, 0, 0, 0.8) !important;
}

/* ── 13. CONTEXT PANEL ───────────────────────────────────────────── */
.qos-context-panel,
#qos-context {
  background: rgba(8, 9, 13, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ── 14. SCOPE BADGE ──────────────────────────────────────────────── */
.qi-composer-scope {
  background: rgba(54, 209, 196, 0.08) !important;
  border: 1px solid rgba(54, 209, 196, 0.22) !important;
  color: #5ce8de !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

/* ── 15. TOAST ────────────────────────────────────────────────────── */
.qos-toast {
  background: rgba(13, 14, 19, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: var(--q26-radius-sm) !important;
  box-shadow: 0 12px 40px -10px rgba(0, 0, 0, 0.6) !important;
  animation: q26-toast-in 0.22s var(--q26-ease-spring) both !important;
}
@keyframes q26-toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ── 16. SCROLLBARS — invisible until hover ───────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(110, 139, 255, 0.15) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(110, 139, 255, 0.15);
  border-radius: 99px;
  transition: background 0.2s;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 139, 255, 0.4);
}

/* ── 17. LOADING SKELETON ────────────────────────────────────────── */
@keyframes q26-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.qos-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 75%
  ) !important;
  background-size: 800px 100% !important;
  animation: q26-shimmer 1.6s infinite linear !important;
  border-radius: 6px !important;
  border: none !important;
  color: transparent !important;
}

/* ── 18a. KNOWLEDGE PAGE ─────────────────────────────────────────── */
.qi-know-banner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 12px !important;
}
.qi-know-banner-left {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  flex: 1 !important;
}
.qi-know-stat {
  font-size: 13px !important;
  color: rgba(180, 190, 220, 0.7) !important;
  font-family: var(--q26-mono) !important;
}
.qi-know-stat b {
  color: #d4daf5 !important;
  font-weight: 600 !important;
}
.qi-know-search-row {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}
.qi-know-results {
  margin-bottom: 16px !important;
}
.qi-know-hit {
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
}
.qi-know-hit-src {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--q26-accent) !important;
  margin-bottom: 6px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.qi-know-hit-score {
  font-weight: 400 !important;
  color: rgba(160, 170, 200, 0.55) !important;
  font-family: var(--q26-mono) !important;
  font-size: 10.5px !important;
}
.qi-know-hit-text {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(200, 210, 240, 0.75) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ── 18. INTEGRATION TILES ───────────────────────────────────────── */
.qi-int-row {
  transition: background 0.18s, border-color 0.18s !important;
}
.qi-int-row:hover {
  background: var(--q26-glass-hover) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.qi-int-connected .qi-int-status-dot {
  animation: q26-pulse 2.8s ease-in-out infinite;
}

/* ── 19. TABLE ROWS ───────────────────────────────────────────────── */
.qi-inbox-row:hover, .qi-appr-row:hover, .qi-task-row:hover,
.qi-pr-row:hover, .qi-dlog-row:hover, .qi-mc-exec-row:hover,
.qi-repo-row:hover, .qi-cicd-row:hover {
  background: rgba(110, 139, 255, 0.05) !important;
  box-shadow: inset 2px 0 0 rgba(110, 139, 255, 0.45) !important;
  transition: background 0.12s, box-shadow 0.12s !important;
}

/* ── 20. FOCUS RING — unified premium ────────────────────────────── */
:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--q26-bg), 0 0 0 4px rgba(110, 139, 255, 0.45) !important;
}

/* ── 21. EMPTY STATE ICONS ────────────────────────────────────────── */
.qos-empty-ic {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 12px !important;
  border-radius: 14px !important;
  background: rgba(110, 139, 255, 0.07) !important;
  border: 1px solid rgba(110, 139, 255, 0.15) !important;
  font-size: 22px !important;
  color: rgba(160, 170, 200, 0.55) !important;
}

/* ── 22. CODE EDITOR — full layout ───────────────────────────────── */
.qos-editor-view {
  padding: 0 20px 16px !important;
  max-width: none !important;
}

.qos-editor-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.qos-editor-topbar-title {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.qos-editor-topbar-name {
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
  color: var(--q26-text) !important;
}

.qos-editor-topbar-sub {
  font-size: 12px !important;
  color: rgba(160, 170, 200, 0.55) !important;
}

.qos-editor-shell {
  display: flex !important;
  height: calc(100vh - 96px) !important;
  min-height: 520px !important;
  gap: 0 !important;
  overflow: hidden !important;
  border-radius: var(--q26-radius) !important;
  border: 1px solid var(--q26-glass-border) !important;
  background: rgba(8, 9, 13, 0.92) !important;
}

.qos-editor-left {
  width: 220px !important;
  min-width: 180px !important;
  max-width: 280px !important;
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.qos-editor-tree-head {
  padding: 10px 12px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.qos-editor-tree-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(160, 170, 200, 0.4) !important;
}

.qos-editor-tree-root {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--q26-text) !important;
  letter-spacing: -0.01em !important;
}

.qos-editor-breadcrumb {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  font-size: 11px !important;
  color: rgba(160, 170, 200, 0.55) !important;
}

.qe-crumb {
  cursor: pointer !important;
  color: var(--q26-accent) !important;
  transition: opacity 0.1s !important;
}
.qe-crumb:hover { opacity: 0.75 !important; }
.qe-crumb-sep { color: rgba(255,255,255,0.2) !important; }

.qos-editor-tree-list {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 4px 6px 8px !important;
}

.qos-editor-tree-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 6px 8px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: rgba(210, 218, 240, 0.82) !important;
  font-size: 12px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.12s, border-color 0.12s !important;
}

.qos-editor-tree-row:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

.qos-editor-tree-row.is-active {
  background: rgba(110, 139, 255, 0.12) !important;
  border-color: rgba(110, 139, 255, 0.28) !important;
  color: #fff !important;
}

.qos-editor-tree-row.is-dir .qos-editor-tree-badge {
  color: rgba(110, 139, 255, 0.85) !important;
}

.qos-editor-tree-badge {
  flex-shrink: 0 !important;
  width: 22px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: rgba(160, 170, 200, 0.7) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

.qos-editor-tree-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.qos-editor-tree-empty {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 12px 10px !important;
  font-size: 11px !important;
  color: rgba(160, 170, 200, 0.55) !important;
}

.qos-editor-tree-empty strong {
  font-size: 12px !important;
  color: rgba(210, 218, 240, 0.85) !important;
}

.qos-editor-tree-empty.is-err strong {
  color: #ff8a8a !important;
}

.qos-editor-welcome.is-hidden {
  display: none !important;
}

.qos-editor-lnum.is-hidden,
.qos-editor-area.is-hidden {
  display: none !important;
}

.qos-editor-welcome {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  pointer-events: none !important;
  color: rgba(160, 170, 200, 0.55) !important;
}

.qos-editor-welcome-ic {
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  background: rgba(110, 139, 255, 0.08) !important;
  border: 1px solid rgba(110, 139, 255, 0.18) !important;
  color: rgba(160, 170, 200, 0.75) !important;
  margin-bottom: 4px !important;
}

.qos-editor-welcome h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: rgba(210, 218, 240, 0.9) !important;
}

.qos-editor-welcome p {
  margin: 0 !important;
  font-size: 12px !important;
  max-width: 280px !important;
  line-height: 1.45 !important;
}

.qos-editor-right {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

.qos-editor-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 14px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  flex-shrink: 0 !important;
}

.qos-editor-tab {
  flex: 1 !important;
  font-size: 12px !important;
  font-family: var(--q26-mono) !important;
  color: rgba(200, 210, 240, 0.7) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.qos-editor-body {
  position: relative !important;
  flex: 1 !important;
  display: flex !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

.qos-editor-lnum {
  width: 44px !important;
  flex-shrink: 0 !important;
  padding: 12px 6px 12px 0 !important;
  font-family: var(--q26-mono) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.18) !important;
  text-align: right !important;
  border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
  overflow: hidden !important;
  user-select: none !important;
  background: rgba(6, 7, 10, 0.5) !important;
  margin: 0 !important;
}

.qos-editor-area {
  flex: 1 !important;
  resize: none !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-family: var(--q26-mono) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: #d4daf5 !important;
  padding: 12px 16px !important;
  tab-size: 4 !important;
  overflow: auto !important;
  white-space: pre !important;
  box-shadow: none !important;
}
.qos-editor-area:focus { box-shadow: none !important; }

/* Terminal pane */
.qos-editor-pane {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.qos-editor-term-pane {
  height: 200px !important;
  min-height: 120px !important;
  flex-shrink: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(5, 6, 9, 0.6) !important;
}

.qos-editor-term-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  flex-shrink: 0 !important;
  font-size: 11px !important;
  color: rgba(160, 170, 200, 0.5) !important;
}
.qos-editor-term-head .qos-swarm-terminal-dots {
  margin: 0 !important;
}

.qos-editor-term-out {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 6px 12px !important;
  font-family: var(--q26-mono) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

.qos-editor-term-input-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
  flex-shrink: 0 !important;
}

.qos-editor-term-prompt {
  color: var(--q26-mint) !important;
  font-family: var(--q26-mono) !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.qos-editor-term-input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: #d4daf5 !important;
  font-family: var(--q26-mono) !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
}
.qos-editor-term-input::placeholder { color: rgba(160, 170, 200, 0.3) !important; }

/* ── AI Panel (code-editor view right column) ─────────────────────── */
.qos-editor-ai-panel {
  width: 320px !important;
  min-width: 260px !important;
  max-width: 380px !important;
  flex-shrink: 0 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: rgba(6, 8, 14, 0.85) !important;
}

.qos-editor-ai-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 14px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  flex-shrink: 0 !important;
}

.qos-editor-ai-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(110, 139, 255, 0.7) !important;
}

.qos-editor-ai-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.qos-editor-ai-msg {
  font-size: 13px !important;
  line-height: 1.55 !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  max-width: 100% !important;
  word-break: break-word !important;
}

.qos-editor-ai-msg--user {
  background: rgba(110, 139, 255, 0.15) !important;
  color: #d4daf5 !important;
  border: 1px solid rgba(110, 139, 255, 0.2) !important;
  align-self: flex-end !important;
}

.qos-editor-ai-msg--assistant {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #c8d0e8 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  align-self: flex-start !important;
}

.qos-editor-ai-msg--error {
  background: rgba(255, 80, 80, 0.08) !important;
  border-color: rgba(255, 80, 80, 0.2) !important;
  color: #ff9a9a !important;
}

.qos-editor-ai-msg pre.qos-editor-ai-code {
  background: rgba(0, 0, 0, 0.4) !important;
  border-radius: 6px !important;
  padding: 8px 10px !important;
  margin: 6px 0 !important;
  font-size: 11.5px !important;
  font-family: var(--q26-mono) !important;
  overflow-x: auto !important;
  white-space: pre !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.qos-editor-ai-msg code {
  background: rgba(0, 0, 0, 0.35) !important;
  border-radius: 4px !important;
  padding: 1px 6px !important;
  font-family: var(--q26-mono) !important;
  font-size: 11.5px !important;
}

.qos-editor-ai-input-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 14px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  flex-shrink: 0 !important;
}

.qos-editor-ai-input {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  color: #d4daf5 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  padding: 8px 10px !important;
  resize: none !important;
  outline: none !important;
  font-family: inherit !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s !important;
}
.qos-editor-ai-input:focus { border-color: rgba(110, 139, 255, 0.4) !important; box-shadow: 0 0 0 2px rgba(110, 139, 255, 0.08) !important; }
.qos-editor-ai-input::placeholder { color: rgba(160, 170, 200, 0.3) !important; }

/* ── Chat — math, code blocks, inline terminal ───────────────────── */
.qi-assist-body .katex { font-size: 1.05em; }
.qi-assist-body .katex-display {
  margin: 10px 0 !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: rgba(110, 139, 255, 0.06) !important;
  border: 1px solid rgba(110, 139, 255, 0.12) !important;
  overflow-x: auto !important;
}

.qi-inline-code {
  font-family: var(--q26-mono) !important;
  font-size: 0.92em !important;
  padding: 1px 6px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #c8d0f0 !important;
}

.qi-code-wrap {
  margin: 10px 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(110, 139, 255, 0.16) !important;
  background: rgba(6, 8, 12, 0.85) !important;
  overflow: hidden !important;
}

.qi-code-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(110, 139, 255, 0.05) !important;
}

.qi-code-lang {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(160, 170, 200, 0.65) !important;
}

.qi-code-block {
  margin: 0 !important;
  padding: 10px 12px !important;
  font-family: var(--q26-mono) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #d4daf5 !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
}

.qi-term-block {
  margin: 10px 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(78, 201, 168, 0.22) !important;
  background: rgba(4, 8, 7, 0.92) !important;
  overflow: hidden !important;
}

.qi-term-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  border-bottom: 1px solid rgba(78, 201, 168, 0.12) !important;
  background: rgba(78, 201, 168, 0.06) !important;
}

.qi-term-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--q26-mint) !important;
}

.qi-term-cmd {
  padding: 8px 12px 4px !important;
  font-family: var(--q26-mono) !important;
  font-size: 12px !important;
  color: var(--q26-mint) !important;
}

.qi-term-out {
  max-height: 280px !important;
  overflow-y: auto !important;
  padding: 0 12px 10px !important;
  font-family: var(--q26-mono) !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}

.qi-term-line.qi-term-stdout { color: #d4daf5 !important; }
.qi-term-line.qi-term-err { color: #ff9a9a !important; }
.qi-term-line.qi-term-ok { color: var(--q26-mint) !important; opacity: 0.85 !important; }

/* ── Editor polish — Quanta chrome ─────────────────────────────────── */
.qos-editor-view {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(110, 139, 255, 0.08), transparent 60%),
    transparent !important;
}

.qos-editor-topbar-name::before {
  content: "◆" !important;
  display: inline-block !important;
  margin-right: 8px !important;
  color: var(--q26-accent) !important;
  font-size: 12px !important;
  opacity: 0.9 !important;
}

.qos-editor-welcome-ic {
  background: linear-gradient(135deg, rgba(110, 139, 255, 0.14), rgba(78, 201, 168, 0.08)) !important;
  border-color: rgba(110, 139, 255, 0.28) !important;
  color: var(--q26-accent) !important;
  box-shadow: 0 8px 24px rgba(110, 139, 255, 0.12) !important;
}

/* ── Unified Workspace (editor + builder + chat) ───────────────────── */
.qos-workspace-view {
  padding: 0 16px 16px !important;
  gap: 10px !important;
}

.qos-ws-topbar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(110, 139, 255, 0.12) !important;
  background: linear-gradient(135deg, rgba(14, 16, 24, 0.96), rgba(8, 10, 16, 0.92)) !important;
  margin-bottom: 10px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

.qos-ws-topbar .qos-editor-topbar-title {
  flex: 0 0 auto !important;
  min-width: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.qos-ws-modes {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(110, 139, 255, 0.14) !important;
  background: rgba(0, 0, 0, 0.35) !important;
}

.qos-ws-mode {
  border: none !important;
  background: transparent !important;
  color: rgba(180, 190, 210, 0.75) !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background 0.12s, color 0.12s !important;
}

.qos-ws-mode.is-active {
  color: #eef1ff !important;
  background: linear-gradient(135deg, rgba(110, 139, 255, 0.28), rgba(78, 201, 168, 0.18)) !important;
  box-shadow: inset 0 0 0 1px rgba(110, 139, 255, 0.22) !important;
}

.qos-ws-command.is-hidden { display: none !important; }

.qos-workspace-view.is-build-mode .qos-ws-command { display: flex !important; }

.qos-ws-welcome {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 32px 24px !important;
  text-align: center !important;
}

.qos-ws-welcome h3 {
  margin: 0 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
}

.qos-ws-welcome-lead {
  margin: 0 !important;
  max-width: 420px !important;
  color: rgba(160, 170, 200, 0.72) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.qos-ws-welcome-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: min(640px, 100%) !important;
  margin-top: 8px !important;
}

.qos-ws-welcome-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding: 14px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(110, 139, 255, 0.16) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)) !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: border-color 0.12s, transform 0.1s !important;
}

.qos-ws-welcome-card:hover {
  border-color: rgba(110, 139, 255, 0.35) !important;
  transform: translateY(-1px) !important;
}

.qos-ws-welcome-card b { font-size: 13px !important; }
.qos-ws-welcome-card span { font-size: 11px !important; color: rgba(160, 170, 200, 0.65) !important; }

@media (max-width: 720px) {
  .qos-ws-welcome-grid { grid-template-columns: 1fr !important; }
}

.qos-ws-topbar .qos-editor-topbar-name::before {
  content: none !important;
}

.qos-ws-command {
  flex: 1 1 320px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 6px 8px 6px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(110, 139, 255, 0.18) !important;
  background: rgba(0, 0, 0, 0.35) !important;
}

.qos-ws-badges {
  display: flex !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
}

.qos-ws-badge {
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(180, 190, 210, 0.85) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

.qos-ws-badge.is-live {
  color: #6ee7b7 !important;
  border-color: rgba(78, 201, 168, 0.35) !important;
  background: rgba(78, 201, 168, 0.1) !important;
}

.qos-ws-build-input {
  flex: 1 !important;
  min-width: 0 !important;
  border: none !important;
  background: transparent !important;
  color: #eef1ff !important;
  font: inherit !important;
  font-size: 13px !important;
  padding: 6px 4px !important;
  outline: none !important;
}

.qos-ws-build-input::placeholder { color: rgba(160, 170, 200, 0.45) !important; }

.qos-ws-build-btn {
  flex-shrink: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #5b7cff 0%, #4ec9a8 100%) !important;
  border: none !important;
  color: #0a0c10 !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  padding: 8px 16px !important;
  box-shadow: 0 4px 16px rgba(78, 201, 168, 0.25) !important;
  transition: opacity 0.15s, transform 0.1s !important;
}

.qos-ws-build-btn:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  opacity: 0.95 !important;
}

.qos-ws-build-btn.is-busy,
.qos-ws-build-btn:disabled {
  opacity: 0.55 !important;
  pointer-events: none !important;
  transform: none !important;
}

.qos-ws-shell {
  min-height: calc(100vh - 180px) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  height: calc(100vh - 130px) !important;
  box-shadow:
    0 0 0 1px rgba(110, 139, 255, 0.08),
    0 24px 64px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.qos-workspace-view .qos-ws-sidebar {
  width: var(--qos-ws-sidebar-w, 240px) !important;
  min-width: 160px !important;
  max-width: 420px !important;
  background: rgba(6, 7, 10, 0.55) !important;
}

.qos-workspace-view .qos-ws-chat {
  width: var(--qos-ws-chat-w, 320px) !important;
  min-width: 240px !important;
  max-width: 520px !important;
  border-left: 1px solid rgba(110, 139, 255, 0.1) !important;
  background: rgba(7, 8, 12, 0.65) !important;
}

.qos-ws-resize {
  flex-shrink: 0 !important;
  background: transparent !important;
  transition: background 0.12s !important;
  z-index: 2 !important;
}
.qos-ws-resize-col {
  width: 5px !important;
  cursor: col-resize !important;
}
.qos-ws-resize-row {
  height: 5px !important;
  cursor: row-resize !important;
  flex-shrink: 0 !important;
}
.qos-ws-resize:hover,
body.qos-resizing .qos-ws-resize {
  background: rgba(110, 139, 255, 0.35) !important;
}

.qos-workspace-view .qos-editor-area,
.qos-workspace-view .qos-editor-lnum {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  tab-size: 2 !important;
}

.qos-ws-chat-fab {
  display: none !important;
  position: fixed !important;
  right: 20px !important;
  bottom: 24px !important;
  z-index: 120 !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(110, 139, 255, 0.35) !important;
  background: linear-gradient(135deg, rgba(110, 139, 255, 0.35), rgba(78, 201, 168, 0.2)) !important;
  color: #eef1ff !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

.qos-ws-chat-backdrop {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 110 !important;
  background: rgba(0, 0, 0, 0.45) !important;
}

.qos-ws-center {
  background: rgba(6, 7, 10, 0.4) !important;
  border-left: 1px solid rgba(110, 139, 255, 0.06) !important;
  border-right: 1px solid rgba(110, 139, 255, 0.06) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.qos-ws-center .qos-editor-pane {
  flex: 1 1 auto !important;
  min-height: 180px !important;
  border-bottom: none !important;
}

.qos-ws-center .qos-editor-head {
  background: rgba(8, 9, 13, 0.5) !important;
  border-bottom: 1px solid rgba(110, 139, 255, 0.08) !important;
  padding: 8px 12px !important;
}

.qos-ws-center .qos-editor-term-pane {
  height: var(--qos-ws-term-h, 34%) !important;
  min-height: 140px !important;
  max-height: 320px !important;
  border-top: 1px solid rgba(78, 201, 168, 0.15) !important;
  background: rgba(3, 5, 8, 0.85) !important;
  box-shadow: inset 0 1px 0 rgba(78, 201, 168, 0.06) !important;
}

.qos-ws-term-head {
  justify-content: space-between !important;
  padding: 6px 12px !important;
  min-height: 28px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

.qos-ws-term-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(78, 201, 168, 0.75) !important;
}

.qos-ws-center .qos-editor-term-out {
  background: transparent !important;
}

.qos-ws-center .qos-editor-term-out .qos-swarm-log {
  padding: 2px 0 !important;
  font-family: var(--q26-mono) !important;
  font-size: 11.5px !important;
  color: rgba(200, 210, 230, 0.85) !important;
}

.qos-ws-center .qos-editor-term-out .qos-swarm-log.is-err { color: #ff9a9a !important; }
.qos-ws-center .qos-editor-term-out .qos-swarm-log.is-ok { color: var(--q26-mint) !important; }
.qos-ws-center .qos-editor-term-out .qos-swarm-log.is-warn { color: #f5c542 !important; }
.qos-ws-center .qos-editor-term-out .qos-swarm-log.is-action { color: #6ee7b7 !important; }
.qos-ws-center .qos-editor-term-out .qos-swarm-log.is-info { color: rgba(160, 170, 200, 0.7) !important; }

.qos-ws-tree-tabs {
  display: flex !important;
  gap: 4px !important;
  padding: 8px 8px 0 !important;
}

.qos-ws-tree-tab {
  flex: 1 !important;
  appearance: none !important;
  border: 1px solid transparent !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 8px 10px !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: rgba(160, 170, 200, 0.7) !important;
  background: transparent !important;
  cursor: pointer !important;
}

.qos-ws-tree-tab.is-active {
  color: #c8d4ff !important;
  border-color: rgba(110, 139, 255, 0.2) !important;
  background: rgba(110, 139, 255, 0.08) !important;
}

.qos-ws-sidebar {
  width: 260px !important;
  min-width: 220px !important;
  border-right: 1px solid rgba(110, 139, 255, 0.08) !important;
}

.qos-ws-main {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.qos-ws-chat {
  width: min(340px, 32vw) !important;
  min-width: 280px !important;
  display: flex !important;
  flex-direction: column !important;
}

.qos-editor-tree-list.is-hidden,
.qos-editor-breadcrumb.is-hidden,
.qos-editor-tree-root.is-hidden {
  display: none !important;
}

.qos-ws-chat .qos-editor-ai-head {
  background: rgba(8, 9, 13, 0.6) !important;
  border-bottom: 1px solid rgba(110, 139, 255, 0.1) !important;
}

.qos-ws-chat .qos-editor-ai-title {
  color: rgba(200, 210, 240, 0.85) !important;
  letter-spacing: 0.06em !important;
}

@media (max-width: 1100px) {
  .qos-ws-chat {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(92vw, 400px) !important;
    max-width: none !important;
    z-index: 115 !important;
    transform: translateX(105%) !important;
    transition: transform 0.2s ease !important;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5) !important;
  }
  .qos-workspace-view.is-chat-open .qos-ws-chat {
    transform: translateX(0) !important;
  }
  .qos-workspace-view.is-chat-open .qos-ws-chat-backdrop {
    display: block !important;
  }
  .qos-ws-chat-fab { display: inline-flex !important; align-items: center !important; }
  .qos-ws-resize-col:last-of-type { display: none !important; }
  .qos-ws-command { flex-basis: 100% !important; order: 3 !important; }
}

/* ── Reduced motion: disable all q26 animations ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.qos-active::before { animation: none !important; }
  .qos-view { animation: none !important; }
  .qi-msg-user, .qi-msg-assistant,
  .qi-message.is-user, .qi-message.is-assistant,
  [data-role="user"], [data-role="assistant"] { animation: none !important; }
  .qos-toast { animation: none !important; }
  .qos-skeleton { animation: none !important; }
  .qos-chip.ok::before, .qos-chip.crit::before { animation: none !important; }
  body.qos-active::after { display: none !important; }
}