/* ══════════════════════════════════════════════════════════════════
   0-INTEL RAG Widget v3.0 — "Void" Monochrome Redesign
   Source of truth: UI_SYSTEM.md + RAG_REDESIGN_MASTER_PLAN.md
   ══════════════════════════════════════════════════════════════════ */

/* v3.12.0: E2B-токены + @font-face (Tier-1, общий с SPA). @import ОБЯЗАН быть первым
   правилом. Абсолютный путь резолвится через nginx-фасад на rag-service (same-origin,
   без CORS). Виджет уже грузит свой JS с origin rag-service → новой связности нет. */
@import url('/rag-shared/styles/tokens.css?v=3.19.3');

/* ── 1. Design Tokens (E2B → tokens.css) ───────────────────────── */

#rag-widget {
  /* === Backgrounds (E2B) === */
  --color-bg-deep: var(--e2b-bg-deep);
  --color-bg-primary: var(--e2b-bg-primary);
  --color-bg-secondary: var(--e2b-bg-secondary);
  --color-bg-tertiary: var(--e2b-bg-tertiary);
  --color-bg-elevated: var(--e2b-bg-elevated);

  /* === Borders (E2B stroke; focus = orange) === */
  --color-border: var(--e2b-stroke);
  --color-border-subtle: var(--e2b-stroke-subtle);
  --color-border-hover: var(--e2b-stroke-hover);
  --color-border-focus: var(--e2b-accent);

  /* === Text (E2B) === */
  --color-text-primary: var(--e2b-fg);
  --color-text-secondary: var(--e2b-fg-secondary);
  --color-text-muted: var(--e2b-fg-tertiary);
  --color-text-ghost: var(--e2b-fg-quad);

  /* === Accent (E2B orange) === */
  --color-accent: var(--e2b-accent);
  --color-accent-soft: var(--e2b-accent-alpha);
  --color-on-accent: #0a0a0a;

  /* === Status === */
  --color-success: var(--e2b-positive);
  --color-error: var(--e2b-negative);

  /* === Special === */
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-shadow: rgba(0, 0, 0, 0.5);

  /* === Typography (E2B: UI = mono; проза = sans) === */
  --font-sans: var(--e2b-font-mono);
  --font-mono: var(--e2b-font-mono);
  --font-prose: var(--e2b-font-sans);
  --text-2xs: 0.625rem;
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.84375rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.5rem;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* === Spacing === */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* === Status (extra) === */
  /* v3.14.1 (E2B-WARNING-DEADTOKEN-01): unused public alias removed (YAGNI);
     --e2b-warning stays in tokens.css (used by the status-dot box-shadow below). */

  /* === Radii (E2B sharp: 0/3/6px) === */
  --radius-sm: var(--e2b-radius-sm);
  --radius-md: var(--e2b-radius-md);
  --radius-lg: var(--e2b-radius-md);
  --radius-xl: var(--e2b-radius-md);
  --radius-2xl: var(--e2b-radius-md);
  --radius-3xl: var(--e2b-radius-md);
  --radius-full: var(--e2b-radius-full);

  /* === Shadows (glow = orange ring) === */
  --shadow-sm: 0 1px 2px var(--color-shadow);
  --shadow-md: 0 4px 12px var(--color-shadow);
  --shadow-lg: 0 12px 32px var(--color-shadow);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 3px var(--e2b-accent-alpha);

  /* === Transitions (E2B easing) === */
  --ease-default: var(--e2b-ease);
  --ease-spring: var(--e2b-ease-spring);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: var(--e2b-ease-out);
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-slow: 300ms; /* E2B slow=300ms */
  --duration-panel: 300ms;

  /* === Z-Index === */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sidebar: 200;
  --z-overlay: 300;
  --z-widget: 10000;
  --z-widget-panel: 10001;

  /* === Root === */
  position: fixed;
  bottom: 80px;
  right: 24px;
  z-index: var(--z-widget);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: var(--leading-normal);
}

/* ── 2. Keyframes (RAG_DESIGN_CONCEPT.md §3 + COMPONENTS_CSS.md) ─ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes panelOpen {
  0% { opacity: 0; transform: scale(0.3); }
  60% { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes panelClose {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes waveLoading {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30% { transform: translateY(-4px); opacity: 1; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes blurReveal {
  to { filter: blur(0); opacity: 1; }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(100%); }
}
@keyframes fabPulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.3); }
  70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
@keyframes contentSwitch {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── 3. FAB Button (Master Plan §2.1) ──────────────────────────── */

.rag-fab {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: all var(--duration-normal) var(--ease-default);
  user-select: none;
  touch-action: none;
  position: relative;
}
.rag-fab:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-border-hover);
  transform: scale(1.05);
  color: var(--color-text-primary);
}
.rag-fab:active {
  transform: scale(0.95);
  transition-duration: var(--duration-fast);
}
.rag-fab svg { width: 20px; height: 20px; }
.rag-fab-active, .rag-fab--open {
  background: var(--color-bg-secondary);
}

/* FAB icon morph */
.rag-fab__icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 300ms var(--ease-default), opacity 200ms ease;
}
.rag-fab--open .rag-fab__icon--chat {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}
.rag-fab--open .rag-fab__icon--close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.rag-fab__icon--close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}

/* FAB notification pulse */
.rag-fab--pulse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-full);
  animation: fabPulse 2s ease-out 2;
}

/* ── 4. Panel (Master Plan §2.2) ───────────────────────────────── */

.rag-panel {
  position: absolute;
  bottom: 60px;
  right: 0;
  width: 400px;
  height: 560px;
  max-height: calc(100vh - 140px);  /* Never exceed viewport minus FAB + safe area */
  /* v3.5.16 BUG-UI-004: CSS-level clamp — JS panelW uses stale window.innerWidth */
  /* without resize-triggered re-render. !important beats inline `width` from */
  /* `panelStyle` when the window has shrunk below the JS-computed popup width. */
  max-width: calc(100vw - 32px) !important;
  background: var(--color-bg-deep);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  z-index: var(--z-widget-panel);
}
.rag-hidden { display: none !important; }
.rag-panel-opening, .rag-panel--opening {
  animation: panelOpen var(--duration-panel) var(--ease-spring) both;
  transform-origin: bottom right;
}
.rag-panel-closing, .rag-panel--closing {
  animation: panelClose 180ms var(--ease-in) both;
  transform-origin: bottom right;
}

/* ── 5. Panel Header (Master Plan §2.3) ────────────────────────── */

.rag-panel-header, .rag-panel__header {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-deep);
  cursor: default;  /* v3.35.0 B1: панель статична, не перетаскивается */
  user-select: none;
  flex-shrink: 0;
}
.rag-panel-header:active { cursor: default; }
.rag-panel-dragging .rag-panel-header { cursor: default; }
#rag-widget.rag-mode-sidebar .rag-panel-header { cursor: default; }

.rag-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.rag-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
}

/* Status dot */
.rag-status-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-text-primary);
  flex-shrink: 0;
  animation: pulse 2s infinite;
}
.rag-status-dot--offline {
  background: var(--color-error);
  animation: none;
}

.rag-panel-title, .rag-panel__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 6. Header Buttons — Icon-only ghost (COMPONENTS_CSS.md) ──── */

.rag-header-btn, .rag-btn--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: var(--space-2);
  min-height: 32px;
  min-width: 32px;
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  flex-shrink: 0;
}
.rag-header-btn:hover, .rag-btn--icon:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}
.rag-header-btn:active, .rag-btn--icon:active {
  transform: scale(0.95);
  transition-duration: var(--duration-fast);
}
.rag-header-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}
.rag-header-btn svg { width: 18px; height: 18px; }
.rag-close-btn { font-size: 18px; }

/* Voice Agent entry in widget header (v3.20.0) — filled-accent, deliberately
   more prominent than the muted .rag-header-btn icons and the composer voice mic. */
.rag-voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  margin-right: 2px;
  padding: var(--space-2);
  background: var(--color-accent);
  color: var(--color-on-accent, #0a0a0a);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  transition: filter var(--duration-normal) var(--ease-default), transform var(--duration-fast) var(--ease-default);
}
.rag-voice-btn:hover { filter: brightness(1.1); box-shadow: 0 2px 10px var(--color-accent-soft); }
.rag-voice-btn:active { transform: scale(0.95); }
.rag-voice-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.rag-voice-btn svg { width: 18px; height: 18px; display: block; }

/* ── 7. Dropdown Menu (COMPONENTS_CSS.md + Master Plan §2.3) ──── */

.rag-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  min-width: 200px;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-1);
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-lg);
  animation: fadeInDown var(--duration-normal) var(--ease-out) forwards;
}
.rag-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
}
.rag-dropdown__item:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}
.rag-dropdown__sep, .rag-dropdown__separator {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-1) var(--space-2);
}
.rag-dropdown__item svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── 8. Back to Chat Button (Master Plan §2.4) ────────────────── */

.rag-back-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: color var(--duration-normal) var(--ease-default);
  font-family: var(--font-sans);
  flex-shrink: 0;
}
.rag-back-btn:hover { color: var(--color-text-primary); }

/* ── 9. Panel Body + Content ───────────────────────────────────── */

.rag-panel-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.rag-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  animation: contentSwitch 200ms var(--ease-out) both;
}

/* ── 10. Conversation Sidebar — Overlay (Master Plan §2.5) ────── */

.rag-conv-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  height: 100%;
  background: var(--color-bg-primary);
  border-right: 1px solid var(--color-border-subtle);
  z-index: var(--z-sidebar);
  transform: translateX(-100%);
  transition: transform var(--duration-slow) var(--ease-default);
  display: flex;
  flex-direction: column;
}
.rag-conv-sidebar-open, .rag-conv-sidebar--open {
  transform: translateX(0);
}

/* Backdrop */
.rag-conv-sidebar__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  z-index: calc(var(--z-sidebar) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-default);
}
.rag-conv-sidebar-open ~ .rag-conv-sidebar__backdrop,
.rag-conv-sidebar--open ~ .rag-conv-sidebar__backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Sidebar header */
.rag-conv-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}

/* Search */
.rag-conv-search, .rag-conv-search-wrap {
  margin: var(--space-2) var(--space-3);
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  gap: var(--space-2);
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}
.rag-conv-search:focus-within {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-glow);
}
.rag-conv-search input, .rag-conv-search-wrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}
.rag-conv-search input::placeholder { color: var(--color-text-muted); }

/* Conversation list */
.rag-conv-list { flex: 1; overflow-y: auto; }
/* v3.34.2: пустое состояние центрируется во всю высоту (паритет с rag-ui.css). */
.rag-conv-list:has(.rag-conv-empty) { display: flex; align-items: center; justify-content: center; }

/* New Chat button — dashed (COMPONENTS_CSS.md .rag-btn--dashed) */
.rag-conv-new-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  font-family: var(--font-sans);
}
.rag-conv-new-btn:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-hover);
}

/* Conversation item (COMPONENTS_CSS.md) */
.rag-conv-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-2) var(--space-3);
  margin: 0 var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-default);
  position: relative;
}
.rag-conv-item:hover { background: var(--color-bg-tertiary); }
.rag-conv-active, .rag-conv-item--active {
  background: var(--color-bg-elevated);
}
.rag-conv-active::before, .rag-conv-item--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--space-1);
  bottom: var(--space-1);
  width: 2px;
  background: var(--color-text-primary);
  border-radius: 1px;
}
.rag-conv-title {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rag-conv-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.rag-conv-time { color: var(--color-text-muted); }
.rag-conv-delete {
  background: none;
  border: none;
  color: var(--color-text-ghost);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default), color var(--duration-normal);
  padding: 0;
  margin-left: auto;
}
.rag-conv-item:hover .rag-conv-delete { opacity: 1; }
.rag-conv-delete:hover { color: var(--color-text-primary); }

/* Date group header */
.rag-conv-date-group { padding: 0; }
.rag-conv-date-header {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-3) var(--space-1);
}
.rag-conv-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Legacy classes (kept for backward compat with components) */
.rag-conv-item-top { display: flex; align-items: center; gap: var(--space-1); }
.rag-conv-item-bottom { display: flex; align-items: center; gap: var(--space-2); }
.rag-conv-type-bar { display: none; }
.rag-conv-type-badge, .rag-conv-badge { display: none; }
.rag-badge-agent, .rag-badge-rag, .rag-badge-support { display: none; }
.rag-conv-unread {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--color-text-primary); flex-shrink: 0;
}

/* ── 11. Chat Body (Master Plan §2.6) ──────────────────────────── */

.rag-chat-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  background: var(--color-bg-deep);
}

/* Scrollbar (UI_SYSTEM.md) */
.rag-chat-body, .rag-conv-list, .rag-support-messages {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
.rag-chat-body::-webkit-scrollbar { width: 4px; }
.rag-chat-body::-webkit-scrollbar-track { background: transparent; }
.rag-chat-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.rag-chat-body::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }

/* v3.6.0: Drag-drop overlay — full panel coverage with animated border + icon */
.rag-drop-active {
  position: relative;
}
.rag-drop-zone {
  position: absolute;
  inset: 0;
  border: 2.5px dashed var(--color-accent, #ff8800);
  border-radius: var(--radius-lg);
  background: rgba(59, 130, 246, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  z-index: 50;
  pointer-events: none;
  animation: dropZonePulse 1.2s ease-in-out infinite alternate, fadeIn 150ms ease both;
  backdrop-filter: blur(2px);
}
@keyframes dropZonePulse {
  from { border-color: var(--color-accent, #ff8800); background: var(--color-accent-soft); }
  to   { border-color: var(--color-text-primary, #e5e7eb); background: rgba(59, 130, 246, 0.12); }
}
.rag-drop-zone-icon { opacity: 0.6; }
.rag-drop-zone-text { font-size: var(--text-base, 14px); font-weight: 500; color: var(--color-text-secondary); }
.rag-drop-zone-hint { font-size: var(--text-xs, 11px); color: var(--color-text-muted); }

/* v3.6.0: File pill progress bar */
.rag-file-pill { position: relative; overflow: hidden; }
.rag-file-progress {
  position: absolute; bottom: 0; left: 0; height: 2px;
  background: var(--color-accent, #ff8800);
  transition: width 200ms ease;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.rag-file-pill.rag-file-uploading { opacity: 0.85; }
.rag-file-pill.rag-file-uploading .rag-file-progress {
  animation: shimmer 1.5s ease-in-out infinite;
  width: 100% !important;
  background: linear-gradient(90deg, var(--color-accent, #ff8800) 0%, transparent 50%, var(--color-accent, #ff8800) 100%);
  background-size: 200% 100%;
}
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

/* v3.6.0: File pill thumbnail */
.rag-file-thumb { width: 24px; height: 24px; object-fit: cover; border-radius: var(--radius-xs, 3px); flex-shrink: 0; }

/* v3.6.0: Attachment cards in chat messages */
.rag-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rag-attachment-card {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: var(--radius-md, 8px);
  background: var(--color-surface); border: 1px solid var(--color-border);
  font-size: 12px; color: var(--color-text-secondary);
  max-width: 220px; overflow: hidden; cursor: default;
  transition: border-color 150ms;
}
.rag-attachment-card:hover { border-color: var(--color-border-hover); }
.rag-attachment-card img {
  width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-xs, 3px);
  flex-shrink: 0; cursor: pointer;
}
.rag-attachment-meta { min-width: 0; }
.rag-attachment-name { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-primary); }
.rag-attachment-size { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; }

/* v3.6.0: Image lightbox */
.rag-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out; animation: fadeIn 200ms ease both;
}
.rag-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
.rag-lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}

/* v3.6.0: Inline error toast (replaces alert()) */
.rag-file-toast {
  padding: 6px 12px; border-radius: var(--radius-md);
  font-size: var(--text-xs); margin-bottom: var(--space-2);
  animation: fadeIn 200ms ease both;
}
.rag-file-toast-error { background: rgba(239,68,68,0.12); color: var(--color-error); border: 1px solid rgba(239,68,68,0.2); }
.rag-file-toast-info { background: var(--color-accent-soft); color: var(--color-accent, #ff8800); border: 1px solid var(--color-accent-soft); }

/* ── 12. Empty State / Welcome (Master Plan §2.6 + RAG_DESIGN_CONCEPT §3.3) */

.rag-welcome, .rag-greeting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--space-8);
  text-align: center;
}
.rag-greeting .rag-status-dot, .rag-welcome__dot {
  width: 12px; height: 12px; border-radius: var(--radius-full);
  background: var(--color-text-primary);
  animation: pulse 2s infinite;
}
.rag-welcome__title, .rag-greeting-text {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-4);
}
.rag-greeting-sub, .rag-welcome__subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
  max-width: 280px;
}

/* Quick action cards (Master Plan §2.6) */
.rag-welcome__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-6);
  max-width: 320px;
}
.rag-welcome__action {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  font-family: var(--font-sans);
  text-align: left;
}
.rag-welcome__action:hover {
  border-color: var(--color-border);
  transform: translateY(-1px);
  color: var(--color-text-primary);
}

/* BlurText animation (RAG_DESIGN_CONCEPT §3.3)
 * v2.45.7: explicit no-motion variant from JS + media-query global override */
.rag-blur-text--no-motion span { filter: none !important; opacity: 1 !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rag-blur-text span { filter: none !important; opacity: 1 !important; animation: none !important; }
}
.rag-blur-text span {
  display: inline-block;
  filter: blur(8px);
  opacity: 0;
  animation: blurReveal 0.6s var(--ease-out) forwards;
}

/* Staggered list animation */
.rag-stagger > * {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeInUp 0.4s var(--ease-out) forwards;
}
.rag-stagger > :nth-child(1) { animation-delay: 0ms; }
.rag-stagger > :nth-child(2) { animation-delay: 100ms; }
.rag-stagger > :nth-child(3) { animation-delay: 200ms; }
.rag-stagger > :nth-child(4) { animation-delay: 300ms; }
.rag-stagger > :nth-child(5) { animation-delay: 400ms; }
.rag-stagger > :nth-child(6) { animation-delay: 500ms; }

/* Scroll-to-bottom (Master Plan §2.6) */
.rag-scroll-bottom, .rag-scroll-to-bottom {
  position: sticky;
  bottom: var(--space-4);
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  color: var(--color-text-muted);
  transition: all var(--duration-normal) var(--ease-default);
  animation: fadeInUp var(--duration-normal) var(--ease-out) both;
}
.rag-scroll-bottom:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

/* ── 13. Messages (Master Plan §2.7 + COMPONENTS_CSS.md) ──────── */

.rag-message {
  padding: var(--space-2) var(--space-4);
  animation: fadeInUp var(--duration-slow) var(--ease-default) forwards;
  position: relative;
}

/* User message — bubble right (Master Plan §2.7) */
.rag-message-user, .rag-message--user {
  display: flex;
  justify-content: flex-end;
}
.rag-message-user .rag-message-content,
.rag-message--user .rag-message__bubble {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-3xl) var(--radius-3xl) var(--radius-sm) var(--radius-3xl);
  padding: var(--space-3) var(--space-4);
  max-width: 82%;
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* Bot message — flat with left border (Master Plan §2.7) */
.rag-message-bot, .rag-message--bot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.rag-message-bot .rag-message-body,
.rag-message--bot .rag-message__body {
  border-left: 2px solid var(--color-border) !important;
  padding-left: var(--space-4) !important;
  max-width: 90%;
}
/* Ensure bot border visible in all states including streaming */
#rag-widget .rag-message-bot > .rag-message-body {
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-4);
}
/* v3.14.2 (T-01): base message-body must be a flex column so a short user bubble
   doesn't collapse to min-content. Parity with rag-ui.css:344 — without it the
   shrink-wrapped block body + content max-width:82% break short words char-by-char
   ("Привет" → "При"/"вет"). */
.rag-message-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rag-message-content, .rag-message__content {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.rag-msg-agent { }

/* Bot label */
.rag-message__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

/* Avatar (legacy classes) */
.rag-avatar, .rag-bot-avatar { display: none; } /* Avatars removed in v3 — label replaces them */
.rag-avatar-bot { display: none; }
.rag-bot-avatar-lg { display: none; }

/* Streaming cursor (Master Plan §2.7) */
.rag-streaming::after, .rag-message__cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--color-text-primary);
  margin-left: 2px;
  animation: blink 1s step-end infinite;
  vertical-align: text-bottom;
}
.rag-streaming::after { content: ''; }

/* Message timestamp */
.rag-message-time { font-size: var(--text-xs); color: var(--color-text-ghost); margin-top: var(--space-1); }
.rag-message-sources { margin-top: var(--space-3); }

/* ── 14. Action Bar — hover reveal (Master Plan §2.7 + COMPONENTS_CSS.md) */

.rag-message-footer, .rag-message__actions {
  display: flex;
  align-items: center;
  gap: var(--space-0-5);
  margin-top: var(--space-2);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.rag-message:hover .rag-message-footer,
.rag-message:hover .rag-message__actions,
.rag-message__actions--visible {
  opacity: 1;
}
.rag-footer-right { display: flex; align-items: center; gap: var(--space-0-5); }
.rag-message__actions-divider {
  width: 1px;
  height: 14px;
  background: var(--color-border);
  margin: 0 var(--space-1);
}

/* Copy + Feedback buttons (COMPONENTS_CSS.md) */
.rag-copy-btn, .rag-feedback-btn, .rag-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 28px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  font-family: var(--font-sans);
}
.rag-copy-btn:hover, .rag-feedback-btn:hover, .rag-action-btn:hover {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
}
.rag-copy-btn:active, .rag-feedback-btn:active { transform: scale(0.93); transition-duration: var(--duration-fast); }
.rag-copy-btn svg, .rag-feedback-btn svg { width: 14px; height: 14px; }
.rag-feedback { display: flex; gap: var(--space-0-5); }
.rag-feedback-up, .rag-feedback-down { }
.rag-feedback-sent { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; }
.rag-feedback-btn--active-up { color: var(--color-success); }
.rag-feedback-btn--active-down { color: var(--color-error); }

/* ── 15. Sources — Collapsible (Master Plan §2.7) ─────────────── */

.rag-sources {
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-default),
              opacity var(--duration-slow) var(--ease-default);
}
.rag-sources--collapsed { max-height: 0; opacity: 0; }
.rag-sources--expanded { max-height: 300px; opacity: 1; }
.rag-sources__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--duration-normal) var(--ease-default);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
}
.rag-sources__toggle:hover {
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}
.rag-sources strong { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-muted); }
.rag-sources ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-direction: column; gap: var(--space-1); }
.rag-sources li, .rag-source {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-normal) var(--ease-default);
}
.rag-sources li:hover, .rag-source:hover { border-color: var(--color-border); }
.rag-sources a {
  font-size: var(--text-xs);
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-text-ghost);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--duration-normal);
}
.rag-sources a:hover { text-decoration-color: var(--color-text-primary); }
.rag-source-icon { display: inline-flex; flex-shrink: 0; }
.rag-source-text { color: var(--color-text-muted); font-size: var(--text-xs); }
.rag-score { font-size: var(--text-2xs); color: var(--color-text-ghost); font-family: var(--font-mono); }
.rag-confidence-badge { display: none; } /* Hidden by default in v3 */

/* ── 16. Input Area (Master Plan §2.9 + COMPONENTS_CSS.md) ────── */

#rag-widget .rag-input-area {
  flex-shrink: 0;
  padding: 0 var(--space-3) var(--space-3);
}

/* Chat input internal layout */
.rag-chat-input {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.rag-chat-input__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-2) var(--space-2);
}
.rag-chat-input__textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  padding: var(--space-3);
  max-height: calc(var(--text-base) * var(--leading-normal) * 5 + var(--space-3) * 2);
  overflow-y: auto;
}
.rag-chat-input__textarea::placeholder { color: var(--color-text-muted); }

/* Chat input container (COMPONENTS_CSS.md .rag-chat-input) */
.rag-input-card, #rag-widget .rag-input-row {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  padding: var(--space-1);
  transition: border-color var(--duration-normal) var(--ease-default),
              box-shadow var(--duration-normal) var(--ease-default);
}
.rag-input-card:focus-within, #rag-widget .rag-input-row:focus-within {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-glow);
}

/* Textarea — no focus outline (card handles focus-within highlight) */
.rag-input, .rag-chat-input__textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none !important;
  resize: none;
  box-shadow: none !important;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  padding: var(--space-3);
  max-height: calc(var(--text-base) * var(--leading-normal) * 5 + var(--space-3) * 2);
  overflow-y: auto;
}
.rag-input::placeholder { color: var(--color-text-muted); }

/* Input actions row */
.rag-input-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-2) var(--space-2);
}

/* Send button — white circle (Master Plan §2.9) */
.rag-send-btn, .rag-chat-input__send {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--color-bg-deep);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-normal) var(--ease-default);
  flex-shrink: 0;
}
.rag-send-btn:disabled { opacity: 0.3; cursor: default; }
.rag-send-btn:not(:disabled):hover { transform: scale(1.05); }
.rag-send-btn:not(:disabled):active { transform: scale(0.95); }
.rag-send-btn svg { width: 14px; height: 14px; }

/* Stop button — outline circle with square (Master Plan §2.9) */
.rag-stop-btn, .rag-chat-input__stop {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 2px solid var(--color-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-normal) var(--ease-default);
  flex-shrink: 0;
  animation: fadeIn var(--duration-normal) var(--ease-spring) both;
}
.rag-stop-btn::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--color-accent);
  border-radius: 2px;
}
.rag-stop-btn svg { display: none; } /* Use ::after instead */

/* Attach button (Master Plan §2.9) */
.rag-attach-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--duration-normal) var(--ease-default);
  flex-shrink: 0;
}
.rag-attach-btn:hover { color: var(--color-text-secondary); }
.rag-attach-btn svg { width: 18px; height: 18px; }

/* Quick-action document button (scan to type+container to 1C) */
.rag-doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 6px; }
.rag-doc-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; cursor: pointer; }
.rag-doc-hint { font-size: 0.74rem; opacity: 0.6; }
.rag-doc-template-select {
  flex: 1; min-width: 160px; box-sizing: border-box; padding: 6px 9px; border-radius: var(--radius-md);
  background: var(--color-bg-elevated); color: var(--color-text); border: 1px solid var(--color-border); font: inherit;
}

/* v3.27.0: сегмент-контрол режима поиска (Обычный / 🌐 Интернет / 🔬 Исследование) */
.rag-mode-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0 8px; }
.rag-mode-btn {
  display: inline-flex; align-items: center; cursor: pointer;
  padding: 5px 11px; font: inherit; font-size: 0.8rem; line-height: 1.2;
  color: var(--color-text); opacity: 0.72;
  background: var(--color-bg-elevated); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); transition: color .15s, opacity .15s, border-color .15s, background .15s;
}
.rag-mode-btn:hover { opacity: 1; border-color: var(--color-accent); }
.rag-mode-btn.is-active {
  opacity: 1; font-weight: 600; color: var(--color-on-accent, #0a0a0a);
  background: var(--color-accent); border-color: var(--color-accent);
}
.rag-mode-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.rag-mode-ico { display: inline-flex; align-items: center; margin-right: 5px; }
.rag-mode-ico svg { display: block; }
.rag-mode-hint { font-size: 0.72rem; opacity: 0.65; margin-left: 2px; }

/* v3.27.1: персистентные шаги поиска + результат шага */
.rag-msg-steps { margin: 2px 0 8px; }
.rag-msg-steps-sum { cursor: pointer; color: var(--color-text-muted); font-size: 0.76rem; user-select: none; list-style: none; padding: 2px 0; font-family: var(--font-mono); }
.rag-msg-steps-sum::-webkit-details-marker { display: none; }
.rag-msg-steps-sum::before { content: '▸ '; }
.rag-msg-steps[open] .rag-msg-steps-sum::before { content: '▾ '; }
.rag-msg-steps-line { margin-top: 4px; padding-left: 2px; }
.rag-tl-result { font-size: 0.72rem; color: var(--color-text-muted); margin-left: 6px; font-family: var(--font-mono); opacity: 0.9; }

/* Voice button (Master Plan §2.9) */
.rag-record-btn, .rag-voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  flex-shrink: 0;
  position: relative;
}
.rag-record-btn:hover { color: var(--color-text-secondary); }
.rag-recording, .rag-voice-btn--recording {
  background: var(--color-error) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--radius-md);
}
.rag-record-btn svg { width: 18px; height: 18px; }

/* Char counter */
.rag-char-counter { font-size: var(--text-2xs); color: var(--color-text-muted); text-align: right; padding: var(--space-1) var(--space-3) 0; }
.rag-char-warning { color: var(--color-error); }
.rag-char-limit { color: var(--color-error); font-weight: var(--weight-medium); }

/* File indicator (COMPONENTS_CSS.md) */
.rag-file-indicator, .rag-files {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) 0;
}
.rag-file-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  animation: fadeIn var(--duration-normal) var(--ease-spring) forwards;
}
.rag-file-thumb { width: 20px; height: 20px; border-radius: var(--radius-sm); object-fit: cover; }
.rag-file-emoji { font-size: 14px; }
.rag-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.rag-file-remove {
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color var(--duration-normal) var(--ease-default);
  background: none;
  border: none;
  padding: 0;
}
.rag-file-remove:hover { color: var(--color-text-primary); }
.rag-file-input { display: none; }

/* ── 17. Agent Timeline (Claude Code-style) ───── */

.rag-timeline {
  padding: var(--space-3) var(--space-4);
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.rag-tl-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}
.rag-tl-pulse {
  width: 6px; height: 6px; border-radius: var(--radius-full);
  background: var(--color-accent);
  animation: pulse 1.5s infinite;
}
.rag-tl-timer {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.7;
}
.rag-tl-line {
  position: relative;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border-subtle, #27272a);
}
.rag-tl-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 0;
  opacity: 0;
  animation: fadeInUp var(--duration-slow, 250ms) var(--ease-default, ease) forwards;
}
.rag-tl-dot {
  position: absolute;
  left: calc(-1 * var(--space-4) - 6px);
  width: 10px; height: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-primary, #09090b);
  z-index: 1;
}
.rag-tl-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.rag-tl-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
  opacity: 0.7;
}
.rag-tl-label {
  font-size: var(--text-xs, 12px);
  color: var(--color-text-secondary, #a1a1aa);
  white-space: nowrap;
}
.rag-tl-preview {
  font-size: 11px;
  color: var(--color-text-muted, #71717a);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  opacity: 0.6;
}
.rag-tl-error .rag-tl-label { color: var(--color-error); }
.rag-tl-placeholder {
  animation: pulse 1.5s ease-in-out infinite;
}
.rag-tl-placeholder .rag-tl-label {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Keep old class names as aliases for backward compat */
.rag-agent-process { display: contents; }
.rag-agent-steps { display: contents; }
.rag-agent-step { display: contents; }
.rag-step-thinking-live, .rag-agent-thinking {
  padding: var(--space-2) 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}
.rag-thinking-content { }

/* ── 18. Typing / Loading (COMPONENTS_CSS.md) ──────────────────── */

.rag-typing, .rag-loading-dots {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  padding: var(--space-2) 0;
}
.rag-typing span, .rag-loading-dots__dot {
  width: 4px; height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-text-ghost);
  animation: waveLoading 1.2s ease-in-out infinite;
}
.rag-typing span:nth-child(2) { animation-delay: 150ms; }
.rag-typing span:nth-child(3) { animation-delay: 300ms; }

/* Skeleton */
.rag-skeleton, .rag-msg__skeleton-line {
  background: linear-gradient(90deg,
    var(--color-bg-primary) 25%,
    var(--color-bg-secondary) 50%,
    var(--color-bg-primary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

/* Spinner */
.rag-spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text-primary);
  border-radius: var(--radius-full);
  animation: spin 0.6s linear infinite;
}

/* ── 19. History Panel (Master Plan §3.7-like, adapted for widget) */

.rag-history-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.rag-history-filters {
  display: flex; gap: var(--space-2); padding: var(--space-3);
}
.rag-history-filter, .rag-filter {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  font-family: var(--font-sans);
}
.rag-history-filter:hover { border-color: var(--color-border-hover); }
.rag-filter-active, .rag-filter--active {
  background: var(--color-accent);
  color: var(--color-bg-deep);
  border-color: transparent;
}
.rag-history-actions { margin-left: auto; }
.rag-history-clear {
  background: none; border: none; color: var(--color-text-muted);
  font-size: var(--text-xs); cursor: pointer; font-family: var(--font-sans);
}
.rag-history-search-wrap { padding: 0 var(--space-3) var(--space-2); }
.rag-history-search {
  width: 100%; padding: var(--space-2) var(--space-3);
  min-height: 36px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--duration-normal) var(--ease-default);
}
.rag-history-search:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-glow); }
.rag-history-search::placeholder { color: var(--color-text-muted); }
.rag-history-list { flex: 1; overflow-y: auto; padding: 0 var(--space-2); }
.rag-history-date-group { }
.rag-history-date-header {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em;
  padding: var(--space-3) var(--space-1) var(--space-1);
}
.rag-history-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-normal) var(--ease-default);
}
.rag-history-item:hover { background: var(--color-bg-tertiary); }
.rag-history-query { flex: 1; font-size: var(--text-sm); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: var(--space-2); }
.rag-history-badge {
  display: inline-flex; align-items: center;
  padding: var(--space-0-5) var(--space-2);
  font-size: var(--text-2xs); font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}
.rag-history-meta { display: flex; align-items: center; gap: var(--space-2); }
.rag-history-time { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rag-history-delete {
  opacity: 0; color: var(--color-text-muted); cursor: pointer; background: none; border: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.rag-history-item:hover .rag-history-delete { opacity: 1; }
.rag-history-delete:hover { color: var(--color-error); }
.rag-history-empty { padding: var(--space-8); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ── 20. Support Panel ─────────────────────────────────────────── */

.rag-support-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.rag-support-create { padding: var(--space-8) var(--space-4); text-align: center; display: flex; flex-direction: column; gap: var(--space-3); align-items: center; }
.rag-support-subject {
  width: 100%; padding: var(--space-2) var(--space-3); min-height: 36px;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); font-size: var(--text-base);
  color: var(--color-text-primary); outline: none; font-family: var(--font-sans);
  transition: border-color var(--duration-normal); }
.rag-support-subject:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-glow); }
.rag-support-submit {
  padding: var(--space-2) var(--space-5);
  background: var(--color-accent); color: var(--color-bg-deep); border: none;
  border-radius: var(--radius-md); font-size: var(--text-sm);
  cursor: pointer; font-family: var(--font-sans); transition: opacity var(--duration-normal); }
.rag-support-submit:hover { opacity: 0.9; }
.rag-support-submit:disabled { opacity: 0.3; }
.rag-support-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); }
.rag-support-status { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.rag-support-dot { width: 6px; height: 6px; border-radius: var(--radius-full); }
.rag-dot-open { background: var(--color-success); }
.rag-dot-closed { background: var(--color-text-muted); }
.rag-support-actions { display: flex; gap: var(--space-1); }
.rag-support-close-btn, .rag-support-new-btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border); background: none;
  border-radius: var(--radius-md); font-size: var(--text-xs);
  cursor: pointer; color: var(--color-text-secondary); font-family: var(--font-sans);
  transition: all var(--duration-normal); }
.rag-support-close-btn:hover, .rag-support-new-btn:hover { border-color: var(--color-border-hover); color: var(--color-text-primary); }
.rag-support-messages { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.rag-support-msg { font-size: var(--text-sm); }
.rag-support-msg-client { text-align: right; }
.rag-support-msg-agent { text-align: left; }
.rag-support-msg-system { text-align: center; color: var(--color-text-muted); font-style: italic; font-size: var(--text-xs); }
.rag-support-msg-content { display: inline-block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); max-width: 85%; }
.rag-support-msg-client .rag-support-msg-content { background: var(--color-bg-secondary); color: var(--color-text-primary); }
.rag-support-msg-agent .rag-support-msg-content { background: var(--color-bg-primary); color: var(--color-text-secondary); border: 1px solid var(--color-border-subtle); }
.rag-support-msg-time { font-size: var(--text-2xs); color: var(--color-text-ghost); margin-top: 2px; }
.rag-support-input-area { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border-subtle); display: flex; gap: var(--space-2); }
.rag-support-input {
  flex: 1; padding: var(--space-2) var(--space-3); min-height: 36px;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); font-size: var(--text-sm);
  color: var(--color-text-primary); outline: none; font-family: var(--font-sans); }
.rag-support-input:focus { border-color: var(--color-border-focus); }
.rag-support-send {
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent); color: var(--color-bg-deep); border: none;
  border-radius: var(--radius-md); font-size: var(--text-sm); cursor: pointer; font-family: var(--font-sans); }
.rag-support-send:disabled { opacity: 0.3; }

/* ── 21. Bitrix Admin ──────────────────────────────────────────── */

.rag-bitrix-container { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.rag-bitrix-status { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.rag-bitrix-dot { width: 6px; height: 6px; border-radius: var(--radius-full); }
.rag-dot-connected { background: var(--color-success); }
.rag-dot-disconnected { background: var(--color-text-muted); }
.rag-bitrix-refresh { background: none; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-1) var(--space-2); cursor: pointer; color: var(--color-text-muted); font-family: var(--font-sans); transition: all var(--duration-normal); }
.rag-bitrix-refresh:hover { border-color: var(--color-border-hover); color: var(--color-text-secondary); }
.rag-bitrix-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.rag-bitrix-stat {
  padding: var(--space-4); border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg); text-align: center; }
.rag-bitrix-stat strong { font-size: var(--text-xl); font-weight: 700; display: block; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.rag-bitrix-stat span { font-size: var(--text-2xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rag-bitrix-config { display: flex; flex-direction: column; gap: var(--space-2); }
.rag-bitrix-config h4 { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-primary); margin: 0; }
.rag-bitrix-config label { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); color: var(--color-text-muted); }
.rag-bitrix-input {
  padding: var(--space-2) var(--space-3); min-height: 36px;
  background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); font-size: var(--text-sm);
  color: var(--color-text-primary); outline: none; font-family: var(--font-sans); }
.rag-bitrix-input:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-glow); }
.rag-bitrix-save, .rag-bitrix-actions button, .rag-admin-action {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); min-height: 36px;
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: transparent; color: var(--color-text-secondary); cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default); }
.rag-bitrix-save:hover, .rag-admin-action:hover {
  background: var(--color-accent); color: var(--color-bg-deep); border-color: transparent; }
.rag-admin-action:active { transform: scale(0.97); }
.rag-bitrix-actions { display: flex; gap: var(--space-2); }

/* ── 22. Code Blocks (RAG_DESIGN_CONCEPT §7) ──────────────────── */

.rag-message-content code:not(pre code) {
  background: var(--color-bg-secondary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-text-primary);
}
.rag-message-content pre {
  background: #0d0d0f;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  margin: var(--space-3) 0;
  position: relative;
}
.rag-message-content pre code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  background: none;
  padding: 0;
}
/* QA 2026-06-22: code blocks were hardcoded dark (#0d0d0f) → black + unreadable in the
   light theme. Light-theme widget gets a light code surface + near-black text (parity
   with rag-ui.css). Dark E2B terminal stays in dark mode. */
#rag-widget.rag-light .rag-message-content pre { background: #f4f4f5; border-color: #e3e3e6; }
#rag-widget.rag-light .rag-message-content pre code { color: var(--color-text-primary); }
.rag-copy-code-btn, .rag-code-copy {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  opacity: 0;
  transition: opacity var(--duration-normal);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  cursor: pointer;
  font-family: var(--font-sans);
}
pre:hover .rag-copy-code-btn, pre:hover .rag-code-copy { opacity: 1; }
.rag-copy-code-btn:hover { background: rgba(255,255,255,0.15); color: var(--color-text-primary); }

/* Markdown (RAG_DESIGN_CONCEPT §8) */
.rag-message-content h1, .rag-message-content h2, .rag-message-content h3 {
  color: var(--color-text-primary); margin: var(--space-4) 0 var(--space-2); font-weight: var(--weight-semibold);
}
.rag-message-content h1 { font-size: 1.1em; }
.rag-message-content h2 { font-size: 1.05em; }
.rag-message-content h3 { font-size: 1em; }
.rag-message-content p { margin: var(--space-2) 0; }
.rag-message-content ul, .rag-message-content ol { padding-left: var(--space-6); margin: var(--space-2) 0; }
.rag-message-content li { margin: var(--space-1) 0; }
.rag-message-content blockquote {
  border-left: 2px solid var(--color-border-hover);
  padding-left: var(--space-3); color: var(--color-text-muted); margin: var(--space-3) 0;
}
.rag-message-content a {
  color: var(--color-text-primary); text-decoration: underline;
  text-decoration-color: var(--color-text-ghost); text-underline-offset: 2px;
  transition: text-decoration-color var(--duration-normal);
}
.rag-message-content a:hover { text-decoration-color: var(--color-text-primary); }
.rag-table-wrap { overflow-x: auto; margin: var(--space-3) 0; }
.rag-message-content table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.rag-message-content th, .rag-message-content td { border: 1px solid var(--color-border-subtle); padding: var(--space-2) var(--space-3); text-align: left; }
.rag-message-content th { background: var(--color-bg-primary); font-weight: var(--weight-medium); color: var(--color-text-primary); }
.rag-message-content hr { border: none; border-top: 1px solid var(--color-border-subtle); margin: var(--space-4) 0; }

/* ── 23. Resize Handle ─────────────────────────────────────────── */

.rag-resize-handle { position: absolute; z-index: 10; opacity: 0; transition: opacity var(--duration-normal); }
.rag-panel:hover .rag-resize-handle, .rag-resizing .rag-resize-handle { opacity: 1; }
/* v3.8.7-fix7 W2: 8-direction resize handles (was single SE corner only).
   Edges are thin bands inset between the corners; corners are 14px squares
   with higher z-index so they win pointer hit-testing at the overlap.
   (deploy mirror of wikijs-custom/client/static/rag/rag-widget.css) */
.rag-rh-n  { top: -3px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.rag-rh-s  { bottom: -3px; left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
.rag-rh-e  { right: -3px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.rag-rh-w  { left: -3px; top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
.rag-rh-ne { top: -3px; right: -3px; width: 14px; height: 14px; cursor: nesw-resize; z-index: 11; }
.rag-rh-nw { top: -3px; left: -3px; width: 14px; height: 14px; cursor: nwse-resize; z-index: 11; }
.rag-rh-se { bottom: -3px; right: -3px; width: 14px; height: 14px; cursor: nwse-resize; z-index: 11; }
.rag-rh-sw { bottom: -3px; left: -3px; width: 14px; height: 14px; cursor: nesw-resize; z-index: 11; }
#rag-widget.rag-mode-sidebar .rag-resize-handle { left: 0; top: 0; bottom: 0; right: auto; width: 6px; height: auto; cursor: ew-resize; }
.rag-resizing .rag-panel, .rag-panel-dragging .rag-panel { transition: none !important; }

/* ── 24. Sidebar Mode ──────────────────────────────────────────── */

#rag-widget.rag-mode-sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: auto; z-index: 9999; }
#rag-widget.rag-mode-sidebar .rag-fab { display: none; }
#rag-widget.rag-mode-sidebar .rag-panel {
  top: auto; bottom: auto; right: auto; left: auto;
  position: relative; height: 100vh; max-height: 100vh; width: 380px;
  border-radius: 0; border-left: 1px solid var(--color-border);
  box-shadow: -4px 0 16px rgba(0,0,0,0.3);
}

/* Sidebar header — ALWAYS visible with full controls */
#rag-widget.rag-mode-sidebar .rag-panel-header {
  cursor: default;
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
}

/* ── 25. Tabs (legacy classes — hidden in v3, navigation via dropdown) */

.rag-tabs { display: none; }
.rag-tab, .rag-tab-active, .rag-tab--active { display: none; }
.rag-tabs__indicator { display: none; }
.rag-tab-buttons, .rag-tab-btn { display: none; }

/* ── 26. Light Theme (UI_SYSTEM.md) ────────────────────────────── */

#rag-widget.rag-light {
  --color-bg-deep: var(--e2b-l-bg-deep);
  --color-bg-primary: var(--e2b-l-bg-primary);
  --color-bg-secondary: var(--e2b-l-bg-secondary);
  --color-bg-tertiary: var(--e2b-l-bg-tertiary);
  --color-bg-elevated: var(--e2b-l-bg-elevated);
  --color-border: var(--e2b-l-stroke);
  --color-border-subtle: var(--e2b-l-stroke-subtle);
  --color-border-hover: var(--e2b-l-stroke-hover);
  --color-border-focus: var(--e2b-l-accent);
  --color-text-primary: var(--e2b-l-fg);
  --color-text-secondary: var(--e2b-l-fg-secondary);
  --color-text-muted: var(--e2b-l-fg-tertiary);
  --color-text-ghost: var(--e2b-l-fg-quad);
  --color-accent: var(--e2b-l-accent);
  --color-accent-soft: var(--e2b-accent-alpha);
  --color-on-accent: #0a0a0a;        /* v3.14.1 (WIDGET-CSS-03): тёмный текст на #e56f00 ≈ 6.3:1 (WCAG AA) */
  --color-overlay: rgba(0, 0, 0, 0.3);
  --color-shadow: rgba(0, 0, 0, 0.12);
}

/* ══ 26b. E2B v3.12.0 — сигнатурные детали (терминальная эстетика) ════════════
   Только CSS поверх токенов. Грид-фон, traffic-light точки, оранжевый курсор,
   ASCII-лоадер, corner-marker карточки, ghost-кнопки, проза в IBM Plex Sans. ── */

/* v3.15.1 (F2): сетка за текстом убрана — узкий popup (~400px), текст идёт почти во
   всю ширину, поэтому горизонтальный центр-fade как в SPA здесь неприменим (заказчик:
   плоский фон). Оставлено лёгкое верхнее свечение для характера (обе темы — через токены). */
.rag-chat-body {
  background-color: var(--color-bg-deep);
  background-image: radial-gradient(ellipse 620px 340px at 50% -12%, var(--color-bg-primary), transparent 72%);
  background-size: auto;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Traffic-light точки в шапке панели (терминальное окно). Scoped — не задевает greeting-точку. */
.rag-panel-header .rag-status-dot {
  background: var(--e2b-negative);
  margin-right: 24px;
  box-shadow: 11px 0 0 var(--e2b-warning), 22px 0 0 var(--e2b-positive);
  animation: none;
}
.rag-panel-header .rag-status-dot--offline {
  background: var(--e2b-negative);
  box-shadow: 11px 0 0 var(--color-text-ghost), 22px 0 0 var(--color-text-ghost);
}

/* Проза ответа — IBM Plex Sans; UI/код/инпут — mono */
.rag-message-content { font-family: var(--font-prose); }

/* Мигающий каретка-курсор — оранжевый */
.rag-streaming::after { background: var(--color-accent); }

/* Лейбл бота: моно, аптренд; ◉ — оранжевый */
.rag-message__label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.rag-label-mark { color: var(--color-accent); font-family: var(--font-mono), "Segoe UI Symbol", "Noto Sans Symbols2", "Apple Symbols"; }

/* Текст на оранжевой кнопке — контрастный */
.rag-send-btn, .rag-send, .rag-support-submit, .rag-support-send, .rag-filter-active { color: var(--color-on-accent) !important; }

/* ASCII-лоадер: прячем точки, рисуем спиннер | / — \ */
.rag-typing { font-family: var(--font-mono); color: var(--color-accent); font-size: var(--text-md); line-height: 1; }
.rag-typing span { display: none; }
.rag-typing::after { content: "|"; animation: e2bSlash 1.2s steps(1) infinite; }
@keyframes e2bSlash { 0%{content:"|"} 25%{content:"/"} 50%{content:"—"} 75%{content:"\\"} 100%{content:"|"} }

/* Corner-marker карточки — оранжевые уголки */
.rag-input-card, .rag-welcome, .rag-bitrix-stat { position: relative; }
.rag-input-card::before, .rag-input-card::after {
  content: ""; position: absolute; width: 6px; height: 6px;
  border: 0 solid var(--color-accent); opacity: 0.55; pointer-events: none;
}
.rag-input-card::before { top: -1px; left: -1px;  border-top-width: 1px; border-left-width: 1px; }
.rag-input-card::after  { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; }

/* Ghost-кнопки: hover → оранжевая рамка/текст */
.rag-history-filter:hover, .rag-support-close-btn:hover, .rag-support-new-btn:hover,
.rag-bitrix-refresh:hover, .rag-conv-new:hover, .rag-back-btn:hover {
  border-color: var(--color-accent); color: var(--color-accent);
}

/* Pill-бейджи / счётчики — моноширинные */
.rag-history-badge, .rag-score, .rag-char-counter, .rag-tl-timer { font-family: var(--font-mono); }

/* EmptyState (inline → классы; общий компонент) */
.rag-welcome-dot { width: 12px; height: 12px; border-radius: var(--radius-full); background: var(--color-accent); animation: pulse 2s infinite; margin-bottom: var(--space-4); box-shadow: 0 0 12px var(--color-accent); }
.rag-welcome-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-primary); font-family: var(--font-mono); }
.rag-welcome-sub { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; max-width: 300px; text-align: center; }
.rag-welcome-sub-line { margin: 0; }
.rag-welcome-sub-hint { margin: var(--space-2) 0 0; color: var(--color-text-ghost); }
.rag-welcome-kbd { color: var(--color-accent); font-family: var(--font-mono); }

/* ══ 26c. E2B v3.12.1 — motion-pass (терминальное движение) ═══════════════════ */

/* Агент работает: точка → ASCII-квадрат-спиннер ◰◳◲◱.
   v3.14.1 (E2B-GLYPH-01): явный symbol-фолбэк — глифы U+25F0-3 вне subset'а Plex. */
.rag-tl-pulse {
  width: auto; height: auto; background: none !important; border-radius: 0;
  box-shadow: none; animation: none;
  font-family: var(--font-mono), "Segoe UI Symbol", "Noto Sans Symbols2", "Apple Symbols"; color: var(--color-accent);
  font-size: var(--text-sm); line-height: 1;
}
.rag-tl-pulse::after { content: "◰"; animation: e2bSquare 0.8s steps(1) infinite; }
@keyframes e2bSquare { 0%{content:"◰"} 25%{content:"◳"} 50%{content:"◲"} 75%{content:"◱"} 100%{content:"◰"} }

/* shiny-text «Агент работает…» + placeholder */
.rag-tl-status, .rag-tl-placeholder .rag-tl-label {
  background: linear-gradient(90deg, var(--color-text-muted) 0%, var(--color-text-muted) 40%, var(--color-accent) 50%, var(--color-text-muted) 60%, var(--color-text-muted) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: e2bShine 2.5s linear infinite;
  font-style: normal;
}
@keyframes e2bShine { 0% { background-position: 200% center; } 100% { background-position: -200% center; } }
.rag-tl-placeholder { animation: none; }

/* Spring-вход шагов и сообщений (E2B .16,1,.3,1) */
.rag-tl-step { animation-timing-function: var(--ease-spring); }
.rag-message { animation-timing-function: var(--ease-spring); }

@media (prefers-reduced-motion: reduce) {
  .rag-tl-pulse::after { animation: none !important; }
  .rag-tl-status, .rag-tl-placeholder .rag-tl-label {
    animation: none !important; -webkit-text-fill-color: var(--color-text-muted); color: var(--color-text-muted);
  }
}

/* ── 27. Responsive (Master Plan §6) ───────────────────────────── */
/* v3.5.16 BUG-UI-004: mobile panel is positioned RELATIVE TO VIEWPORT via */
/* `position: fixed`, not relative to #rag-widget. The widget itself is */
/* fixed at `right: 24px` and 0-width at rest — positioning the panel */
/* relative to it anchors the panel's left edge to the FAB, pushing the */
/* right edge off-screen. Fixed-to-viewport breaks this inheritance. */

@media (max-width: 768px) {
  .rag-panel {
    position: fixed !important;
    /* v3.5.16 BUG-UI-004 followup: do NOT reset max-width — the base rule's */
    /* clamp `max-width: calc(100vw - 32px) !important` is our last line of */
    /* defense when inline `width` from panelStyle is stale. Explicit width */
    /* and max-width together guarantee final computed width <= viewport - 16. */
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    height: calc(100vh - 80px) !important;
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
    bottom: 0 !important;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
  }
  .rag-fab { width: 44px; height: 44px; }
  .rag-message__actions { opacity: 0.6; }
  .rag-message:hover .rag-message__actions { opacity: 1; }
  /* v3.25.2-m1 (mobile polish): тач-таргеты ≥44px (хедер + композер) */
  #rag-widget .rag-header-btn, #rag-widget .rag-btn--icon, #rag-widget .rag-back-btn,
  #rag-widget .rag-send-btn, #rag-widget .rag-stop-btn,
  #rag-widget .rag-attach-btn, #rag-widget .rag-record-btn { min-width: 44px; min-height: 44px; }
  /* поля ввода ≥16px (анти-зум iOS) */
  #rag-widget .rag-input, #rag-widget .rag-chat-input__textarea { font-size: 16px; }
  /* ресайз-хэндлы и col-resize сплита не нужны (панель = полноэкранный лист) */
  #rag-widget .rag-resize-handle, #rag-widget .rag-split-handle { display: none !important; }
}
@media (max-width: 480px) {
  /* mobile QA 2026-07-01 (D-04): #rag-widget .rag-panel (1,1,0) перебивает базовый
     .rag-panel max-width: calc(100vw - 32px) → реально full-width лист на телефоне */
  #rag-widget .rag-panel {
    position: fixed !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100vh - 60px) !important;
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
  }
}

/* ── 28. Accessibility (COMPONENTS_CSS.md) ─────────────────────── */

/* v2.45.6: use accent color (theme-aware) instead of hardcoded white — invisible on light theme */
:focus-visible { outline: 2px solid var(--color-accent, #ff8800); outline-offset: 2px; }
/* v3.5.16 BUG-UI-007: defense-in-depth for programmatic .focus() — Chromium */
/* :focus-visible only activates on keyboard navigation, so screen-reader users */
/* using Tab see the indicator but scripts/ATs calling .focus() would not. */
/* Scope the fallback to widget's interactive shell to avoid polluting Wiki.js. */
/* v3.5.16 BUG-UI-007 (round 2): use box-shadow for focus indicator — */
/* some widget buttons have UA-override quirks that zero `outline-width` */
/* even when our `outline` shorthand sets style=solid. Box-shadow ring */
/* is universally reliable and AT-tools accept it as a focus indicator. */
/* We keep both outline AND box-shadow for defense-in-depth. */
#rag-widget .rag-send-btn:focus,
#rag-widget .rag-stop-btn:focus,
#rag-widget .rag-attach-btn:focus,
#rag-widget .rag-record-btn:focus,
#rag-widget .rag-fab:focus,
#rag-widget .rag-header-btn:focus,
#rag-widget .rag-feedback-up:focus,
#rag-widget .rag-feedback-down:focus,
#rag-widget .rag-copy-btn:focus {
  outline: 2px solid var(--color-accent, #ff8800) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--color-accent, #ff8800) !important;
}
.rag-sr-only, .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}
.rag-send-btn, .rag-stop-btn, .rag-attach-btn, .rag-record-btn, .rag-fab { min-width: 36px; min-height: 36px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Theme transition (RAG_DESIGN_CONCEPT §10) */
#rag-widget {
  transition: background-color 0.3s var(--ease-default), color 0.3s var(--ease-default);
}

/* v2.45.7: print stylesheet — hide widget chrome from printed pages */
@media print {
  #rag-widget,
  #rag-widget *,
  .rag-fab,
  .rag-panel,
  #rag-widget-error { display: none !important; }
}

/* ── Долгосрочные задачи (v3.13.0) ───────────────────────────────── */
.rag-message-autorun { border-left: 2px solid var(--color-accent, #ff8800); }
.rag-autorun-plaque {
  display: inline-block; margin-bottom: 6px; padding: 3px 10px;
  font-size: 0.78rem; border-radius: 6px;
  background: var(--rag-task-bg, var(--color-accent-soft));
  color: var(--color-accent, var(--color-accent, #ff8800)); border: 1px solid var(--color-accent);
}
.uh-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: var(--radius-md); background: var(--color-error); color: #fff;
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 600;
}
.uh-tasks-btn { position: relative; }

/* v3.35.0 — иконки E2B (общий набор): монохромные SVG, currentColor */
#rag-widget .rag-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; }
#rag-widget .rag-ico svg { display: block; }
#rag-widget button .rag-ico, #rag-widget a .rag-ico, #rag-widget label .rag-ico { vertical-align: middle; }
#rag-widget .rag-run-ok, #rag-widget .rag-run-fail { display: inline-flex; align-items: center; vertical-align: middle; }