/* ════════════════════════════════════════════════════════════════════
   Myyzamchy Legal IDE — "TRIBUNAL"
   ───────────────────────────────────────────────────────────────────
   Dark-first legal command center.
   Obsidian + Electric Sapphire + Champagne Authority
   Inspiration: Linear · Cursor · Vercel · Harvey AI · NYT Magazine
   ───────────────────────────────────────────────────────────────────
   Typography
     Display : Instrument Serif        (italic editorial, gravitas)
     Body    : Geist                   (geometric precision)
     Mono    : Geist Mono              (technical, refined)
     Long    : Newsreader              (paragraphs, NPA documents)
   ───────────────────────────────────────────────────────────────────
   Все имена классов и CSS-переменных сохранены 1:1 с предыдущей
   версией — функциональность React/Quill/TipTap не нарушена.
   ════════════════════════════════════════════════════════════════════ */

/* ════ RESET & BASE ════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{width:100%;height:100%;overflow:hidden}
body{
  font-family:'Geist','Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:13.5px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.011em;
  font-feature-settings:"ss01","ss03","cv11","liga","calt","kern";
  font-optical-sizing:auto;
  background:var(--bg-editor);
  color:var(--text);
  text-rendering:optimizeLegibility;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ════ DESIGN TOKENS — LIGHT (PROFESSIONAL DEFAULT) ═══════════════════
   Светлый профессиональный интерфейс как на скриншоте.
   Чистый, светлый, с бирюзовыми акцентами.
   ════════════════════════════════════════════════════════════════════ */
:root{
  /* REQUIRED PALETTE TOKENS — Canva Indigo brand
     Основа: #5C66DE (нейтральный indigo-blue, спокойнее старого #7C5CFF)
     Вторичный: #8C9CCE (мягкий cornflower — для secondary CTA, бейджей,
     второстепенной графики). HSL: первый 234°/65%/62%, второй 225°/41%/68% */
  --primary: #5C66DE;
  --primary-hover: #4951C9;
  --secondary: #8C9CCE;          /* мягкий cornflower */
  --secondary-hover: #7889BD;
  --bg-app: #FFFFFF;             /* основная зона документа — чистый белый */
  --bg-panel: #F9FAFB;            /* sidebar, чат, тулбары — мягкий нейтральный */
  --bg-input: #FFFFFF;
  --text-main: #111827;
  --text-muted: #5B6171;          /* контраст 5.4:1 (WCAG AA) */
  --border-color: #E5E7EB;
  --shadow-color: rgba(17, 24, 39, 0.04);

  /* Surfaces — mapped to new tokens */
  --bg-editor: var(--bg-app);
  --bg-bar: var(--bg-panel);
  --border: var(--border-color);
  --hover: #EEF0FB;               /* нежно-indigo ховер (десатурированнее старого) */
  --workspace-bg: var(--bg-app);

  /* Ink — mapped to new tokens */
  --text: var(--text-main);
  --muted: var(--text-muted);

  /* Accent — Indigo (Canva-grade) */
  --accent: var(--primary);
  --accent2: var(--primary-hover);
  --accent-dim: rgba(92, 102, 222, 0.08);
  --accent-glow: rgba(92, 102, 222, 0.20);
  --accent-soft: #EEF0FB;
  --accent-edge: #C9CFF3;
  --accent-strong: var(--primary-hover);

  --link: var(--primary);
  --link-bg: #EEF0FB;

  /* Status — solid + pastel soft pair (для бейджей как на скрине) */
  --gold:#D4A54C;
  --green:#10B981;      --green-soft:#D1FAE5;    --green-ink:#065F46;
  --orange:#F59E0B;     --orange-soft:#FEF3C7;   --orange-ink:#92400E;
  --red:#EF4444;        --red-soft:#FEE2E2;      --red-ink:#991B1B;
  --info:#3B82F6;       --info-soft:#DBEAFE;     --info-ink:#1E40AF;

  /* Premium layered shadows — depth without weight */
  --shadow-inset:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.2);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.02);
  --shadow: 0 2px 10px rgba(0,0,0,.03);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.04);
  --shadow-glow:
    0 0 0 1px var(--accent-edge),
    0 8px 32px var(--accent-glow);

  /* Typography stacks */
  --font-display:'Instrument Serif',Georgia,serif;
  --font-body:'Geist','Inter',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  --font-long:'Newsreader','Times New Roman',Times,serif;
  /* Alias: половина JSX использует var(--font-sans) — токен раньше не
     существовал, текст падал на дефолтный serif. Сделан как алиас на --font-body. */
  --font-sans:var(--font-body);

  /* Motion */
  --ease:cubic-bezier(.22,.7,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-snap:cubic-bezier(.4,0,.2,1);

  /* ════ SEMANTIC TOKEN SYSTEM ══════════════════════════════════════
     Disciplined design system — replaces inline magic numbers.
     ══════════════════════════════════════════════════════════════════ */

  /* Spacing — 4-point grid + half-steps для плотных мест.
     Полу-токены (-h) покрывают 6/10/14, без них в плотном UI приходилось бы
     ломать сетку на полу-шаг. Использовать -h только когда полная сетка не подходит. */
  --s-half:2px;
  --s-1:4px;
  --s-1h:6px;
  --s-2:8px;
  --s-2h:10px;
  --s-3:12px;
  --s-3h:14px;
  --s-4:16px;
  --s-5:20px;
  --s-6:24px;
  --s-8:32px;
  --s-10:40px;
  --s-12:48px;
  --s-16:64px;

  /* Radii — sharper, architectural */
  --radius-xs:4px;
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* Type scale — поднята на +1px для читабельности боковых панелей */
  --text-2xs:10px;        /* badges, tabular nums */
  --text-xs:11px;         /* captions, kbd hints */
  --text-sm:13px;         /* secondary UI */
  --text-base:14px;       /* body UI */
  --text-md:15px;         /* primary body */
  --text-lg:16px;         /* large body, primary CTA */
  --text-xl:18px;         /* section heading inline */
  --text-2xl:22px;        /* modal titles */
  --text-3xl:28px;        /* hero greetings */

  /* Icon scale — 4 канонических размера. Inline `sz={N}` приводить к ним. */
  --icon-xs:12px;         /* inline в типографике */
  --icon-sm:14px;         /* кнопки тулбара, чипы */
  --icon-md:16px;         /* основные иконочные кнопки */
  --icon-lg:20px;         /* hero, CTA */

  /* Line-height scale */
  --lh-tight:1.15;        /* headings */
  --lh-snug:1.35;         /* sub-heading */
  --lh-normal:1.55;       /* UI body */
  --lh-relaxed:1.75;      /* long-form */

  /* Font weight scale */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* Z-index layers — disciplined scale */
  --z-base:1;
  --z-sticky:5;
  --z-dropdown:100;
  --z-floating:200;       /* floating bars (improve, agent) */
  --z-overlay:500;
  --z-modal:1500;
  --z-modal-overlay:1800;
  --z-toast:2000;
  --z-tooltip:3000;
  --z-trim:99998;         /* top brand line */

  /* Surface tokens — high-level semantic */
  --on-accent:#FFFFFF;        /* text on crimson buttons */
  --paper:#FDFCF7;            /* document paper, light always */
  --on-paper:#0A0C12;         /* text on paper */

  /* Decorative gradients — Canva Indigo signature */
  --grad-accent:linear-gradient(135deg,#6E78E5 0%,#5C66DE 50%,#4951C9 100%);
  --grad-accent-soft:linear-gradient(135deg,rgba(92,102,222,.10) 0%,rgba(73,81,201,.10) 100%);
  --grad-accent-dual:linear-gradient(135deg,#5C66DE 0%,#8C9CCE 100%); /* primary→secondary */
  --grad-text:linear-gradient(135deg,#1F2937 0%,#5C66DE 60%,#4951C9 100%);
  --grad-text-soft:linear-gradient(135deg,#EEF0FB 0%,#5C66DE 100%);

  /* Ambient mesh — мягкие indigo-blue облака */
  --grad-mesh:
    radial-gradient(ellipse 50% 40% at 18% 12%,rgba(92,102,222,.08),transparent 60%),
    radial-gradient(ellipse 45% 35% at 82% 88%,rgba(140,156,206,.10),transparent 60%),
    radial-gradient(ellipse 30% 25% at 50% 50%,rgba(73,81,201,.04),transparent 70%);

  /* Glass overlays — neutral ink-tinted */
  --glass-bg:rgba(17,24,39,.72);
  --glass-bg-strong:rgba(17,24,39,.88);
  --glass-border:rgba(255,255,255,.08);

  /* Dotted pattern (legal grid feel) */
  --pattern-dot:radial-gradient(circle at 1px 1px,rgba(255,255,255,.04) 1px,transparent 0);
}

/* ════ DESIGN TOKENS — DARK (SUPPORT ONLY) ═══════════════════════════
   Тёмная тема минимально поддерживается, но по умолчанию светлая.
   ════════════════════════════════════════════════════════════════════ */
.dk{
  --bg-app: #0B0F17;
  --bg-panel: #141925;
  --bg-input: #0B0F17;
  --text-main: #F3F4F6;
  --text-muted: #9CA3AF;
  --border-color: #1F2937;
  --primary: #7B82E5;             /* осветлён для контраста на тёмном */
  --primary-hover: #9098E8;
  --secondary: #A8B4DC;
  --secondary-hover: #BCC5E5;
  --shadow-color: rgba(0, 0, 0, 0.5);

  /* Legacy mapping */
  --bg-editor: var(--bg-app);
  --bg-bar: var(--bg-panel);
  --border: var(--border-color);
  --hover: rgba(123, 130, 229, 0.10);
  --workspace-bg: var(--bg-app);
  --text: var(--text-main);
  --muted: var(--text-muted);

  --accent: var(--primary);
  --accent2: var(--primary-hover);
  --accent-dim: rgba(123, 130, 229, 0.16);
  --accent-glow: rgba(123, 130, 229, 0.28);
  --accent-soft: rgba(123, 130, 229, 0.10);
  --accent-edge: rgba(123, 130, 229, 0.32);
  --accent-strong: #9098E8;
  --link: #9098E8;
  --link-bg: rgba(123, 130, 229, 0.12);
  --gold: #D4A54C;
  --green:#34D399;     --green-soft:rgba(52,211,153,.14);   --green-ink:#A7F3D0;
  --orange:#FBBF24;    --orange-soft:rgba(251,191,36,.14);  --orange-ink:#FDE68A;
  --red:#F87171;       --red-soft:rgba(248,113,113,.14);    --red-ink:#FECACA;
  --info:#60A5FA;      --info-soft:rgba(96,165,250,.14);    --info-ink:#BFDBFE;
  --shadow-inset:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.04),inset 0 -1px 0 rgba(0,0,0,.4);
  --shadow-xs:0 1px 2px rgba(0,0,0,.45);
  --shadow:0 2px 6px rgba(0,0,0,.35),0 8px 28px rgba(0,0,0,.35),0 0 0 .5px rgba(255,255,255,.04);
  --shadow-lg:0 4px 16px rgba(0,0,0,.5),0 22px 64px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.05);
  --shadow-glow:0 0 0 1px var(--accent-edge),0 8px 32px var(--accent-glow);
  --grad-accent:linear-gradient(135deg,#9098E8 0%,#7B82E5 50%,#5C66DE 100%);
  --grad-accent-dual:linear-gradient(135deg,#7B82E5 0%,#A8B4DC 100%);
  --grad-text:linear-gradient(135deg,#F3F4F6 0%,#9098E8 60%,#F3F4F6 100%);
  --grad-text-soft:linear-gradient(135deg,#F3F4F6 0%,#9098E8 100%);
  --grad-mesh:radial-gradient(ellipse 50% 40% at 18% 12%,rgba(123,130,229,.14),transparent 60%),radial-gradient(ellipse 45% 35% at 82% 88%,rgba(168,180,220,.12),transparent 60%);
  --glass-bg:rgba(20,25,37,.78);
  --glass-bg-strong:rgba(20,25,37,.92);
  --glass-border:rgba(255,255,255,.08);
  --pattern-dot:radial-gradient(circle at 1px 1px,rgba(255,255,255,.03) 1px,transparent 0);
}

/* ════ DARK MODE EXPLICIT FIXES ════════════════════════════════════════ */
/* Aggressive override for TipTap (ProseMirror) and Document Paper */
body.dk .document-paper,
body.dk .ProseMirror,
body.dk .ProseMirror *,
body.dark-mode .document-paper,
body.dark-mode .ProseMirror,
body.dark-mode .ProseMirror * {
  color: var(--text-main) !important;
  background-color: transparent !important;
}

/* Aggressive override for NPA Viewer (Minjust API content) */
body.dk .npa-content-academic,
body.dk .npa-content-academic *:not(a),
body.dark-mode .npa-content-academic,
body.dark-mode .npa-content-academic *:not(a) {
  color: var(--text-main) !important;
  background-color: transparent !important;
}

/* Force links color in NPA Viewer */
body.dk .npa-content-academic a,
body.dark-mode .npa-content-academic a {
  color: var(--primary) !important;
}

/* Legacy fixes */
body.dk .docengine-page,
body.dk .docengine-prose,
body.dark-mode .docengine-page,
body.dark-mode .docengine-prose {
  color: var(--text-main) !important;
}

/* Maintain muted color for deleted text even in dark mode */
body.dk .agent-pending-delete,
body.dk .agent-pending-delete * {
  color: var(--text-muted) !important;
}

/* Premium logo visibility for Dark Mode (Force White + Soft Glow) */
body.dk .myz-brand-logo img,
body.dark-mode .myz-brand-logo img,
body.dk .chat-logo img,
body.dark-mode .chat-logo img {
  /* Step 1: Remove white background via SVG chroma-key */
  /* Step 2: Force everything to black via brightness(0) */
  /* Step 3: Invert black to white via invert(1) */
  filter: url('#logo-chroma') brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.15)) !important;
  background-color: transparent !important;
  opacity: 0.98;
}


/* iOS-style Icon treatment for Welcome Screen logo in Dark Mode */
body.dk .welcome-screen-logo-container,
body.dark-mode .welcome-screen-logo-container {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 24px !important;
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px);
  padding: 8px; /* Breathing room for the icon */
}

body.dk .welcome-screen-logo-container img,
body.dark-mode .welcome-screen-logo-container img {
  filter: url('#logo-chroma') brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.2)) !important;
  transform: scale(1.1) !important; /* Slightly smaller to fit with padding */
}

/* For SVG logos if any — use text color or white */
body.dk .myz-brand-logo svg path,
body.dark-mode .myz-brand-logo svg path {
  fill: #ffffff !important;
}




/* ════ GRADIENT TEXT — display utility ═══════════════════════════════ */
.gt,.dk .gt{
  background:var(--grad-text);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ════ HEADINGS — Instrument Serif italic for editorial gravitas ══════ */
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:400;
  letter-spacing:-.025em;
  line-height:1.05;
}
h1 em,h2 em,h3 em,.display em,.display-italic{
  font-style:italic;
}

/* ════ AMBIENT BACKGROUND — static mesh (SKILL §7 motion-meaning) ═══
   Static gradient mesh for atmosphere; no animation.
   Compositor-cheap, no continuous repaint.
   ══════════════════════════════════════════════════════════════════════ */
#root{position:relative;isolation:isolate}
#root::before{
  content:'';position:fixed;inset:-12%;z-index:-2;
  background:var(--grad-mesh),var(--bg-editor);
  filter:blur(60px) saturate(1.1);
  opacity:.78;
  pointer-events:none;
}
#root::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--pattern-dot);
  background-size:24px 24px;
  opacity:.55;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 100%);
}

/* ════ TOP TRIM — static brand signature (animation removed for calm) ══ */
body::before{
  content:'';
  position:fixed;top:0;left:0;right:0;height:3px;
  z-index:99998;pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--accent) 15%,
    var(--accent2) 50%,
    var(--accent) 85%,
    transparent 100%);
  opacity:1;
}

/* ════ SELECTION & CARET ══════════════════════════════════════════════ */
input,textarea,[contenteditable="true"]{caret-color:var(--accent)}
::selection{background:rgba(0,139,139,.20);color:var(--text)}

/* ════ A11Y UTILITIES ════════════════════════════════════════════════ */
.myz-sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* When focused (e.g. skip-link), reveal */
.myz-sr-only:focus,.myz-sr-only:focus-within{
  position:fixed !important;
  top:8px;left:8px;
  width:auto;height:auto;
  clip:auto;
  padding:8px 14px;
  background:var(--accent);color:var(--on-accent);
  border-radius:var(--radius-sm);
  z-index:var(--z-tooltip);
  text-decoration:none;
}

/* ════ COLLAPSED-PANE TAB — for hiding/showing NPA or AI Chat ═════════
   Тонкая кликабельная полоска вверху/внизу свёрнутой секции.
   Показывает имя свёрнутой панели + chevron, по клику разворачивает.
   ══════════════════════════════════════════════════════════════════════ */
.myz-pane-tab{
  display:flex;align-items:center;justify-content:center;gap:8px;
  flex-shrink:0;
  width:100%;
  height:30px;
  padding:0 14px;
  background:linear-gradient(180deg,var(--bg-bar),var(--bg-panel));
  border:none;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  font-family:var(--font-body);
  font-size:11px;font-weight:600;
  color:var(--muted);
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:background .18s var(--ease),color .18s var(--ease),box-shadow .2s var(--ease);
  position:relative;
}
.myz-pane-tab:hover{
  background:var(--accent-dim);
  color:var(--accent-strong);
  box-shadow:inset 0 0 0 1px var(--accent-edge);
}
.myz-pane-tab:active{transform:translateY(0.5px)}
.myz-pane-tab .myz-pane-tab-chev{
  margin-left:4px;
  font-size:10px;
  color:var(--accent);
  font-family:var(--font-mono);
  transition:transform .2s var(--ease);
}
.myz-pane-tab:hover .myz-pane-tab-chev{transform:translateY(-1px)}
/* When tab appears below content (chat-collapsed state), border is on top */
#rp .myz-pane-tab:last-child{
  border-bottom:none;
  border-top:1px solid var(--border);
}

/* ════ DOCUMENT TABS — refined IDE-style ═════════════════════════════
   Close × появляется только на hover или у активного таба.
   ══════════════════════════════════════════════════════════════════════ */
.myz-tab .myz-tab-close{opacity:0;transform:scale(.85);transition:opacity .15s var(--ease),transform .15s var(--ease)}
.myz-tab:hover .myz-tab-close,
.myz-tab[data-active="true"] .myz-tab-close{opacity:1;transform:scale(1)}
.myz-tab:hover{background:var(--hover) !important}
.myz-tab[data-active="true"]:hover{background:var(--bg-editor) !important}

/* ════ BRAND LOGO — Kyrgyz tunduk emblem ═══════════════════════════════
   Белый фон PNG удаляется SVG color-matrix фильтром (#logo-chroma):
     alpha = 1 - green_channel
     белый (g=1) → alpha 0 (прозрачно)
     красный (g=0) → alpha 1 (видно)
   Работает в любом stacking-context, не конфликтует с drop-shadow glow.
   ══════════════════════════════════════════════════════════════════════ */
.myz-brand-logo{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border-radius:0;
}
.myz-brand-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  pointer-events:none;
  transform:scale(1.30);
  transform-origin:center;
}
/* Точный цвет через SVG flood-фильтр — заменил неточный hue-rotate стек.
   Цвет совпадает с --primary до пикселя. */
body:not(.dk) .myz-brand-logo img{ filter:url('#logo-recolor-light'); }
.dk .myz-brand-logo img{ filter:url('#logo-recolor-dark'); }
/* Модификатор: лого в белом, для использования на индиго-фоне кнопки */
.myz-brand-logo.on-accent img,
body:not(.dk) .myz-brand-logo.on-accent img,
.dk .myz-brand-logo.on-accent img{ filter:url('#logo-recolor-white'); }

/* ════ NOISE TEXTURE — sub-perceptual film grain ══════════════════════ */
.grain::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body:not(.dk) .grain::after{opacity:.025;mix-blend-mode:multiply}

/* ════ THEME TRANSITION ═══════════════════════════════════════════════ */
.tt,.tt *{transition:background .42s var(--ease),color .42s var(--ease),border-color .42s var(--ease),box-shadow .42s var(--ease) !important}

/* ════════════════════════════════════════════════════════════════════
   BUTTON SYSTEM — Linear/Cursor-grade precision
   ════════════════════════════════════════════════════════════════════ */
.btn{
  position:relative;overflow:hidden;cursor:pointer;
  font-family:var(--font-body);
  font-feature-settings:"ss01","cv11";
  transition:
    background .2s var(--ease),
    color .2s var(--ease),
    border-color .2s var(--ease),
    box-shadow .26s var(--ease),
    transform .14s var(--ease-spring),
    filter .2s var(--ease);
  user-select:none;will-change:transform;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.96)!important;transition-duration:.08s}

/* Layered hover wash */
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 60%);
  opacity:0;border-radius:inherit;
  transition:opacity .22s var(--ease);
  pointer-events:none;
}
.btn:hover::after{opacity:1}

/* Sapphire ring on hover */
.btn::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(0,0,0,0);
  transition:box-shadow .26s var(--ease);
  pointer-events:none;
}
.btn:hover::before{box-shadow:0 0 0 1px var(--accent-edge),0 0 24px var(--accent-glow)}

/* ════════════════════════════════════════════════════════════════════
   UNIVERSAL FOCUS-VISIBLE — единый кольцевой индикатор для клавиатуры
   Применяется ТОЛЬКО при keyboard-навигации (не на :focus от клика).
   Убирает дикий разнобой: где-то 3px ring, где-то ничего, где-то inline.
   ════════════════════════════════════════════════════════════════════ */
:where(button, [role="button"], a, input, textarea, select, summary, [tabindex]):focus{
  outline:none;
}
:where(button, [role="button"], a, input, textarea, select, summary, [tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
  box-shadow:0 0 0 4px var(--accent-dim);
}
/* Inputs и textarea — лучше через border + soft glow, чтобы не было двойной обводки */
:where(input, textarea, select):focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}

/* ════════════════════════════════════════════════════════════════════
   MIN TOUCH-TARGET — гарантия 24×24px у иконочных кнопок
   WCAG 2.5.8 (Level AA) рекомендует ≥24px. Не ломает существующие размеры
   крупнее, но подтягивает мелочь (close, collapse и пр.).
   ════════════════════════════════════════════════════════════════════ */
button:not(.tb-btn):not(.tb-color):not([data-no-touch-target]),
[role="button"]:not([data-no-touch-target]){
  min-width:24px;
  min-height:24px;
}

/* ════ KEYFRAMES ══════════════════════════════════════════════════════ */
@keyframes dot{0%,80%,100%{transform:scale(.4);opacity:.4}40%{transform:scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes toastIn{from{opacity:0;transform:translateX(100%) scale(.9)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateX(100%)}}
@keyframes glow-pulse{0%,100%{opacity:.55;box-shadow:0 0 6px var(--accent-glow)}50%{opacity:1;box-shadow:0 0 24px var(--accent-glow),0 0 40px var(--accent-glow)}}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 3px rgba(248,113,113,.22),0 0 0 0 rgba(248,113,113,.45)}50%{box-shadow:0 0 0 6px rgba(248,113,113,.32),0 0 0 14px rgba(248,113,113,0)}}
@keyframes float-in{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes badge-pop{0%{transform:scale(0) rotate(-10deg)}60%{transform:scale(1.32) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
@keyframes gradient-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(120deg)}}
@keyframes ring-pulse{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.85);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes meshDrift{
  0%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(2%,-1%) rotate(.5deg)}
  66%{transform:translate(-1%,2%) rotate(-.4deg)}
  100%{transform:translate(1%,1%) rotate(.3deg)}
}
@keyframes liftIn{from{opacity:0;transform:translateY(10px) scale(.97);filter:blur(3px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes glintBar{0%{transform:translateX(-120%) skewX(-20deg);opacity:0}40%{opacity:.7}100%{transform:translateX(220%) skewX(-20deg);opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes borderGlow{0%,100%{border-color:var(--accent-edge)}50%{border-color:var(--accent)}}
@keyframes float-orb{
  0%,100%{transform:translate(0,0) scale(1);opacity:.4}
  50%{transform:translate(20px,-30px) scale(1.1);opacity:.6}
}

.mic-listening{position:relative}
.mic-listening::after{
  content:'';position:absolute;top:-2px;right:-2px;
  width:11px;height:11px;border-radius:50%;
  background:var(--red);
  border:2px solid var(--bg-editor);
  box-shadow:0 0 10px rgba(248,113,113,.65);
  animation:dot 1s infinite;
}

/* ════ SCROLLBAR — minimal sapphire ═══════════════════════════════════ */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:6px;
  border:2.5px solid transparent;
  background-clip:padding-box;
  transition:background .2s var(--ease);
}
::-webkit-scrollbar-thumb:hover{
  background:var(--accent);
  background-clip:padding-box;
}
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

/* ════ UTILITIES ══════════════════════════════════════════════════════ */
.spell-err{
  background-image:linear-gradient(to right,var(--red) 50%,transparent 50%);
  background-size:4px 1.5px;background-position:0 100%;background-repeat:repeat-x;padding-bottom:1px;
}

/* Floating bar — premium glass, static border (no animation per SKILL §7) */
.flt-bar{
  animation:liftIn .26s var(--ease-out);
  background:var(--glass-bg-strong);
  border:1px solid var(--accent-edge);
  border-radius:999px;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px var(--accent-edge),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  padding:4px;
}

.nbadge{animation:badge-pop .35s var(--ease-spring)}

/* ════════════════════════════════════════════════════════════════════
   CHAT MARKDOWN — editorial typography + technical precision
   ════════════════════════════════════════════════════════════════════ */
.ai-md{
  font-size:13.5px;line-height:1.72;color:var(--text);
  word-break:break-word;
  font-family:var(--font-body);
  font-feature-settings:"ss01","cv11","kern","liga";
}
.ai-md h1,.ai-md h2,.ai-md h3,.ai-md h4{
  margin:18px 0 8px;
  font-family:var(--font-display);
  font-weight:400;
  font-style:italic;
  color:var(--text);
  line-height:1.15;letter-spacing:-.02em;
}
.ai-md h1{font-size:24px}
.ai-md h2{font-size:20px}
.ai-md h3{font-size:17px}
.ai-md h4{
  font-size:13px;font-style:normal;font-weight:600;
  font-family:var(--font-body);
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin-top:14px;
}
.ai-md p{margin:5px 0 9px}
.ai-md ul,.ai-md ol{margin:6px 0 10px;padding-left:22px}
.ai-md li{margin:3px 0}
.ai-md li::marker{color:var(--accent)}
.ai-md strong{color:var(--text);font-weight:600;letter-spacing:-.005em}
.ai-md em{font-style:italic;color:var(--muted);font-family:var(--font-display);font-size:1.05em}
.ai-md code{
  font-family:var(--font-mono);font-size:11.5px;
  background:var(--accent-soft);
  border:1px solid var(--accent-edge);
  border-radius:5px;padding:1.5px 6px;color:var(--link);
  font-weight:500;
}
.ai-md pre{
  background:var(--bg-bar);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;overflow-x:auto;margin:12px 0;
  font-family:var(--font-mono);font-size:11.5px;line-height:1.6;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),var(--shadow-xs);
  position:relative;
}
.ai-md pre::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--grad-accent);
  border-radius:var(--radius) 0 0 var(--radius);
  opacity:.5;
}
.ai-md pre code{background:transparent;border:none;padding:0;color:inherit;font-size:inherit}
.ai-md blockquote{
  border-left:2px solid var(--accent);
  padding:10px 18px;margin:12px 0;
  background:linear-gradient(90deg,var(--accent-dim),transparent 75%);
  border-radius:0 var(--radius) var(--radius) 0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:15px;line-height:1.6;
  color:var(--text);
}
.ai-md a{
  color:var(--link);
  text-decoration:underline;
  text-decoration-color:var(--accent2);
  text-underline-offset:3px;
  text-decoration-thickness:1.5px;
  transition:all .15s var(--ease);
}
.ai-md a:hover{text-decoration-color:var(--accent);color:var(--accent-strong)}
.ai-md hr{
  border:none;border-top:1px solid var(--border);margin:18px 0;
  position:relative;
}
.ai-md hr::after{
  content:'§';position:absolute;left:50%;top:-11px;transform:translateX(-50%);
  background:var(--bg-panel);
  padding:0 10px;
  font-family:var(--font-display);font-style:italic;
  color:var(--accent2);font-size:14px;
}
.ai-md mark,.ai-md .legal-cite{
  background:var(--link-bg);color:var(--link);
  border-radius:4px;padding:1px 6px;font-weight:600;
  box-shadow:inset 0 0 0 1px var(--accent-edge);
  font-family:var(--font-mono);font-size:.92em;
}
.ai-md table{
  width:100%;border-collapse:separate;border-spacing:0;margin:12px 0;font-size:12.5px;
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-xs);
}
.ai-md th,.ai-md td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:8px 12px;text-align:left}
.ai-md th:last-child,.ai-md td:last-child{border-right:none}
.ai-md tr:last-child td{border-bottom:none}
.ai-md th{
  background:var(--bg-bar);
  font-family:var(--font-body);
  font-weight:600;color:var(--muted);
  text-transform:uppercase;font-size:10.5px;letter-spacing:.08em;
}

/* ════════════════════════════════════════════════════════════════════
   ARTICLE MODAL — glass with rotating sapphire border
   ════════════════════════════════════════════════════════════════════ */
.art-modal-overlay{
  position:fixed;inset:0;z-index:2500;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.45),rgba(0,0,0,.85));
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .22s var(--ease-out);
}
.art-modal{
  width:600px;max-width:92vw;max-height:80vh;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px var(--accent-edge),
    inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;flex-direction:column;overflow:hidden;
  animation:liftIn .28s var(--ease-out);
  backdrop-filter:blur(28px) saturate(1.4);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  position:relative;
}
.art-modal::before{
  content:'';position:absolute;inset:-1px;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,var(--accent-edge),transparent 50%,var(--accent2) 100%);
  opacity:.2;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;-webkit-mask-composite:xor;
  padding:1px;
}
.art-modal-head{
  padding:20px 24px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,var(--accent-soft),transparent);
  font-family:var(--font-display);
  font-size:18px;font-style:italic;letter-spacing:-.015em;
}
.art-modal-body{
  flex:1;overflow-y:auto;padding:22px 26px;
  font-family:var(--font-long);
  font-size:14.5px;line-height:1.8;
  color:var(--text);white-space:pre-wrap;
}
.art-modal-foot{
  padding:14px 22px;
  border-top:1px solid var(--border);
  display:flex;gap:8px;justify-content:flex-end;
  background:var(--bg-bar);
}

/* ════════════════════════════════════════════════════════════════════
   INLINE CITATIONS — clickable [1] [2] в AI-ответе. Скролл + подсветка
   соответствующего источника в SourceList. Журналистский паттерн.
   ════════════════════════════════════════════════════════════════════ */
.cite-chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px;
  padding:0 var(--s-1);
  margin:0 1px;
  font-size:var(--text-2xs);
  font-weight:600;
  font-family:var(--font-mono);
  color:var(--accent-strong);
  background:var(--accent-soft);
  border:1px solid var(--accent-edge);
  border-radius:var(--radius-pill);
  cursor:pointer;
  vertical-align:baseline;
  position:relative; top:-1px;
  line-height:1;
  transition:background .15s, border-color .15s, transform .12s;
  user-select:none;
}
.cite-chip:hover{
  background:var(--accent-dim);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.cite-chip:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* Целевой источник, после клика по [N], подсвечивается на 2 сек */
.src-item.is-cite-target,
.source-item-rich.is-cite-target{
  animation: citeFlash 2s ease;
}
@keyframes citeFlash{
  0%   { box-shadow: 0 0 0 0 var(--accent), 0 0 0 0 var(--accent-glow); background: var(--accent-soft); }
  60%  { box-shadow: 0 0 0 2px var(--accent), 0 0 24px var(--accent-glow); background: var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; background: inherit; }
}

/* ════════════════════════════════════════════════════════════════════
   MESSAGE SKELETON — shimmer-плейсхолдер пока ждём первый SSE-чанк.
   Заменяет три прыгающие точки на современный loading-shape (формы
   будущего ответа: 3 строки разной ширины, как ритм абзаца).
   ════════════════════════════════════════════════════════════════════ */
.msg-skel{
  display:flex; flex-direction:column; gap:var(--s-2);
  padding:var(--s-3) var(--s-3h);
  background:var(--bg-editor);
  border:1px solid var(--border);
  border-radius:14px 14px 14px 2px;
  margin-bottom:var(--s-1h);
  animation:fadeIn .2s ease;
  font-family:var(--font-sans);
}
.msg-skel-head{
  display:flex; align-items:center; gap:var(--s-2);
  font-size:var(--text-xs); color:var(--muted);
  margin-bottom:var(--s-half);
}
.msg-skel-line{
  height:10px;
  border-radius:var(--radius-xs);
  background:linear-gradient(90deg,
    var(--hover) 0%,
    var(--bg-panel) 50%,
    var(--hover) 100%);
  background-size:200% 100%;
  animation:msgShimmer 1.4s infinite linear;
}
@keyframes msgShimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}
.msg-skel-stop{
  margin-left:auto;
  font-size:var(--text-2xs);
  color:var(--muted);
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:var(--s-half) var(--s-1h);
  cursor:pointer;
  font-family:var(--font-sans);
}
.msg-skel-stop:hover{ color:var(--text); border-color:var(--text); }

/* ════════════════════════════════════════════════════════════════════
   THINKING BOX — коллапсируемый stepper "мыслей" агента (Anthropic-style).
   Минималистичный, без ярких заливок: прозрачный фон, светлая граница,
   аккуратная типографика, плавные анимации. См. ThinkingBox в IDE-чате.
   ════════════════════════════════════════════════════════════════════ */
.think-box{
  margin: var(--s-1) 0 var(--s-2h);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  overflow: hidden;
  font-family: var(--font-sans);
}
.think-header{
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; padding: var(--s-2) var(--s-2h);
  background: transparent;
  border: none; outline: none;
  text-align: left; cursor: pointer;
  color: var(--text-muted);
  font-size: var(--text-sm); font-weight: 500;
  letter-spacing: -0.005em;
  transition: background-color .15s, color .15s;
}
.think-header:hover{ background: var(--hover); color: var(--text-main); }
.think-header:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }
.think-header-icon{
  width: var(--icon-md); height: var(--icon-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); flex-shrink: 0;
}
.think-header-text{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.think-header-chev{
  width: var(--icon-sm); height: var(--icon-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); flex-shrink: 0;
}
.think-header-stop{
  font-size: var(--text-2xs); padding: var(--s-half) var(--s-1h);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  cursor: pointer; user-select: none;
  margin-left: var(--s-1);
  transition: color .15s, border-color .15s;
}
.think-header-stop:hover{ color: var(--text-main); border-color: var(--text-main); }

.think-body-wrap{ overflow: hidden; }
.think-body{
  padding: var(--s-1) var(--s-3) var(--s-2h) var(--s-3h);
  display: flex; flex-direction: column; gap: var(--s-1);
  border-top: 1px solid var(--border-color);
}
.think-step{
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-half) 0;
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--text-main);
  animation: thinkStepIn .22s ease both;
}
@keyframes thinkStepIn{
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.think-step-icon{
  width: var(--icon-md); height: var(--icon-md);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--text-muted);
}
.think-step-content{
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1;
}
.think-step-text{
  font-size: var(--text-sm);
  color: var(--text-main);
  overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.think-step-text-strike{
  text-decoration: line-through;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1px;
  color: var(--text-muted);
}
.think-step-reason{
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-muted);
  opacity: .85;
  margin-top: 1px;
}
.think-step-loading .think-step-text{ color: var(--text-muted); }
.think-step-success .think-step-icon{ color: var(--green); }
.think-step-warning .think-step-icon{ color: var(--orange); }
.think-step-error   .think-step-icon{ color: var(--red); }

/* ════════════════════════════════════════════════════════════════════
   DEEP ANALYSIS REPORT — премиум-отчёт мульти-агентного анализа
   Раскладывает результат Senior Partner на 4 интерактивные вкладки:
   Аудит и Риски / Стратегия / Проекты / Симулятор.
   Минималистичный, без перегруза — все секции на токенах.
   ════════════════════════════════════════════════════════════════════ */
.deep-report{
  margin: var(--s-2) 0 var(--s-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-app);
  font-family: var(--font-sans);
  overflow: hidden;
}

.deep-report-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2h) var(--s-3);
  background: linear-gradient(180deg, var(--bg-panel), transparent);
  border-bottom: 1px solid var(--border-color);
}
.deep-report-title{
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.005em;
}
.deep-report-doctype{
  font-weight: 400; color: var(--text-muted); font-size: var(--text-xs);
}
.deep-report-persp{
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-half) var(--s-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.deep-report-persp-good{ background: var(--green-soft);  color: var(--green-ink, var(--green)); }
.deep-report-persp-warn{ background: var(--red-soft);    color: var(--red-ink, var(--red)); }
.deep-report-persp-info{ background: var(--info-soft);   color: var(--info-ink, var(--info)); }

/* ───── Tabs ───── */
.deep-tabs{
  display: flex; flex-wrap: wrap; gap: var(--s-half);
  padding: var(--s-1h) var(--s-2h);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-panel);
}
.deep-tab{
  display: inline-flex; align-items: center; gap: var(--s-1h);
  padding: var(--s-1) var(--s-2h);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.005em;
  transition: background .15s, color .15s, border-color .15s;
}
.deep-tab:hover{ color: var(--text-main); background: var(--hover); }
.deep-tab.is-active{
  background: var(--bg-app);
  border-color: var(--border-color);
  color: var(--text-main);
  font-weight: 600;
  box-shadow: 0 1px 2px var(--shadow-color);
}
.deep-tab-count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 var(--s-1);
  font-size: var(--text-2xs); font-weight: 700;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.deep-tab.is-active .deep-tab-count{
  background: var(--primary);
  color: #fff;
}

/* ───── Tab body ───── */
.deep-tab-body{
  padding: var(--s-3) var(--s-3h);
  animation: fadeIn .18s ease;
}
.deep-empty{
  padding: var(--s-4) var(--s-2);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-style: italic;
}

/* ───── Cards & sections ───── */
.deep-sect-list{ display: flex; flex-direction: column; gap: var(--s-3); }
.deep-card{
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}
.deep-card-head{
  display: flex; align-items: center; gap: var(--s-1h);
  padding: var(--s-2) var(--s-2h);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}
.deep-card-body{
  padding: var(--s-2h);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--text-main);
}
.deep-card-body p:first-child{ margin-top: 0; }
.deep-card-body p:last-child{ margin-bottom: 0; }
.deep-card-actions{
  margin-left: auto;
  display: inline-flex; gap: var(--s-1h);
}
.deep-btn-mini{
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-half) var(--s-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-app);
  color: var(--text-muted);
  font-size: var(--text-2xs);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  text-transform: none;
  letter-spacing: 0;
}
.deep-btn-mini:hover{ color: var(--text-main); border-color: var(--text-main); }
.deep-btn-primary{
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.deep-btn-primary:hover{ background: var(--primary-hover); color: #fff; border-color: var(--primary-hover); }

.deep-card-verdict{ border-left: 3px solid var(--accent); }
.deep-card-summary{ border-left: 3px solid var(--green); }
.deep-card-draft{ border-left: 3px solid var(--orange); }
.deep-draft-body{
  max-height: 420px; overflow-y: auto;
  font-family: var(--font-long), Georgia, serif;
  line-height: var(--lh-relaxed);
  white-space: pre-wrap;
}

/* ───── Section (group of rows) ───── */
.deep-sect{
  display: flex; flex-direction: column; gap: var(--s-1h);
}
.deep-sect-title{
  display: inline-flex; align-items: center; gap: var(--s-1h);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 var(--s-half);
}
.deep-sect-count{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; padding: 0 var(--s-1); height: 16px;
  font-size: 9.5px; font-weight: 700;
  background: var(--border-color);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}

.deep-rows{ display: flex; flex-direction: column; gap: var(--s-1h); }
.deep-row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2h);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color .15s;
}
.deep-row:hover{ border-color: var(--accent-edge); }
.deep-row-badge{
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-half) var(--s-1h);
  border-radius: var(--radius-pill);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  align-self: flex-start;
  white-space: nowrap;
  flex-shrink: 0;
}
.deep-row-body{ display: flex; flex-direction: column; gap: var(--s-half); min-width: 0; }
.deep-row-title{
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.005em;
}
.deep-row-text{ font-size: var(--text-sm); color: var(--text-main); line-height: var(--lh-snug); }
.deep-row-quote{
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
  border-left: 2px solid var(--border-color);
  padding-left: var(--s-2);
}
.deep-row-sugg{
  display: inline-flex; align-items: flex-start; gap: var(--s-1);
  font-size: var(--text-xs);
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: var(--s-1) var(--s-1h);
  border-radius: var(--radius-xs);
  line-height: var(--lh-snug);
}
.deep-row-sugg svg{ margin-top: 1px; flex-shrink: 0; }
.deep-row-meta{ font-size: var(--text-xs); color: var(--text-muted); }

.deep-row-counter{
  grid-template-columns: 1fr;
  gap: var(--s-1h);
}
.deep-counter-threat,
.deep-counter-norm{
  display: flex; gap: var(--s-1h);
  font-size: var(--text-sm);
  align-items: baseline;
}
.deep-counter-label{
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.deep-counter-threat{ color: var(--red-ink, var(--red)); }
.deep-counter-norm{ color: var(--green-ink, var(--green)); }

.deep-row-mentor .deep-row-title{ font-style: italic; }

/* ───── Heatmap (Strategy) ───── */
.deep-heatmap{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-1h);
}
.deep-heat-cell{
  display: inline-flex; align-items: center; gap: var(--s-1h);
  padding: var(--s-1h) var(--s-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: default;
  transition: transform .12s, box-shadow .12s;
  overflow: hidden;
}
.deep-heat-cell:hover{
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--shadow-color);
}
.deep-heat-dot{
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.deep-heat-num{
  font-family: var(--font-mono); font-weight: 700;
  font-size: var(--text-2xs); white-space: nowrap;
  opacity: .8;
}
.deep-heat-heading{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  letter-spacing: -0.005em;
}
.deep-heat-detail{
  display: inline-flex; align-items: flex-start; gap: var(--s-1h);
  margin-top: var(--s-1h);
  padding: var(--s-1h) var(--s-2);
  font-size: var(--text-sm);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  line-height: var(--lh-snug);
  animation: fadeIn .14s ease;
}
.deep-heat-detail svg{ margin-top: 2px; flex-shrink: 0; }
.deep-heat-legend{
  display: flex; flex-wrap: wrap; gap: var(--s-2h);
  margin-top: var(--s-2);
  padding-top: var(--s-1h);
  border-top: 1px dashed var(--border-color);
  font-size: var(--text-2xs);
  color: var(--text-muted);
}
.deep-heat-legend-item{
  display: inline-flex; align-items: center; gap: var(--s-1);
  letter-spacing: -0.005em;
}

/* ════════════════════════════════════════════════════════════════════
   SEGMENT REPORT — проверка пунктов документа на соответствие закону КР
   Гибридный pipeline: помимо ConfidenceBadge (статьи) показывает разбор
   каждого пункта/раздела. Раскрываемая структура с цитатой, применимыми
   нормами и рекомендациями.
   ════════════════════════════════════════════════════════════════════ */
.segrep-wrap{
  margin: var(--s-2) 0 var(--s-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-sans);
  overflow: hidden;
}
.segrep-header{
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; padding: var(--s-2) var(--s-2h);
  background: transparent;
  border: none; outline: none;
  text-align: left; cursor: pointer;
  color: var(--text-main);
  font-size: var(--text-sm); font-weight: 600;
  letter-spacing: -0.005em;
  transition: background-color .15s, color .15s;
}
.segrep-header:hover{ background: var(--hover); }
.segrep-header-icon{
  width: var(--icon-md); height: var(--icon-md);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.segrep-header-text{ flex: 1; min-width: 0; }
.segrep-chev{
  width: var(--icon-sm); height: var(--icon-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); flex-shrink: 0;
}
.segrep-body{
  border-top: 1px solid var(--border-color);
  padding: var(--s-2h) var(--s-2h) var(--s-3);
}
.segrep-summary{
  display: flex; flex-wrap: wrap; gap: var(--s-1h);
  margin-bottom: var(--s-2h);
}
.segrep-pill{
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-half) var(--s-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: -0.005em;
}

.segrep-list{
  display: flex; flex-direction: column;
  gap: var(--s-1h);
}
.segrep-item{
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-app);
  overflow: hidden;
  transition: border-color .15s;
}
.segrep-item:hover{ border-color: var(--accent-edge); }
.segrep-item-violation{ border-color: var(--red-soft); }
.segrep-item-risk{      border-color: var(--orange-soft); }
.segrep-item-violation:hover{ border-color: var(--red); }
.segrep-item-risk:hover{ border-color: var(--orange); }

.segrep-item-head{
  display: grid;
  grid-template-columns: 22px 50px 1fr auto 14px;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: var(--s-2) var(--s-2h);
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-main);
  transition: background .12s;
}
.segrep-item-head:hover{ background: var(--hover); }
.segrep-item-status{
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.segrep-item-num{
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}
.segrep-item-heading{
  font-weight: 600;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.segrep-item-finding{
  color: var(--text-muted);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
  margin-left: var(--s-2);
}
.segrep-item-chev{
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}

.segrep-item-body{
  padding: 0 var(--s-2h) var(--s-2h) calc(22px + var(--s-2) + var(--s-2h));
  display: flex; flex-direction: column;
  gap: var(--s-2);
  animation: fadeIn .18s ease;
}
.segrep-item-quote{
  border-left: 3px solid var(--accent-edge);
  padding: var(--s-1) var(--s-2h);
  background: var(--bg-panel);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
.segrep-item-quote-label,
.segrep-item-articles-label{
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-1);
}
.segrep-item-quote-text{
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
  color: var(--text-main);
  font-style: italic;
}
.segrep-item-articles{
  display: flex; flex-direction: column; gap: var(--s-half);
}
.segrep-item-article{
  display: flex; align-items: baseline; gap: var(--s-1h);
  font-size: var(--text-sm);
  color: var(--text-main);
}
.segrep-item-article-num{
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}
.segrep-item-article-title{
  color: var(--text-main);
}
.segrep-item-suggestion{
  display: flex; align-items: flex-start; gap: var(--s-1h);
  padding: var(--s-1h) var(--s-2h);
  background: var(--accent-soft);
  border-radius: var(--radius-xs);
  font-size: var(--text-sm);
  color: var(--accent-strong);
  line-height: var(--lh-snug);
}
.segrep-item-suggestion svg{ margin-top: 2px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════════════
   CONFIDENCE BADGE — индикатор уверенности RAG-проверки документа
   Шлётся из /api/analyze-document после parallel verifiers.
   ════════════════════════════════════════════════════════════════════ */
.confidence-wrap{ margin-bottom:var(--s-2); font-family:var(--font-sans); }
.confidence-badge{
  display:inline-flex;align-items:center;gap:var(--s-1h);
  padding:var(--s-1h) var(--s-2h);border-radius:var(--radius-sm);
  font-size:var(--text-sm);font-weight:600;
  border:1px solid transparent;
  letter-spacing:-0.005em;
  cursor:pointer; user-select:none;
  transition:filter 0.15s;
}
.confidence-badge:hover{ filter:brightness(1.03); }
.confidence-badge:focus-visible{ outline:2px solid currentColor; outline-offset:1px; }
.confidence-badge .confidence-stats{
  font-weight:500;opacity:.75;font-variant-numeric:tabular-nums;
  margin-left:var(--s-1);padding-left:var(--s-2);border-left:1px solid currentColor;
}
.confidence-badge .confidence-toggle{
  display:inline-flex;align-items:center;gap:var(--s-half);
  margin-left:var(--s-1h);padding-left:var(--s-2);
  border-left:1px solid currentColor;
  font-weight:500;opacity:.7;font-size:var(--text-2xs);
  text-transform:uppercase;letter-spacing:.04em;
}
/* Пастельные пары: soft фон + ink тёмный текст для читабельности на светлом */
.confidence-high{
  background:var(--green-soft);
  color:var(--green-ink, var(--green));
  border-color:transparent;
}
.confidence-medium{
  background:var(--orange-soft);
  color:var(--orange-ink, var(--orange));
  border-color:transparent;
}
.confidence-low{
  background:var(--red-soft);
  color:var(--red-ink, var(--red));
  border-color:transparent;
}

/* Раскрывающийся блок деталей */
.confidence-details{
  margin-top:var(--s-1h);
  padding:var(--s-2) var(--s-2h);
  background:var(--bg-app);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:var(--text-xs);
  line-height:var(--lh-normal);
  animation:fadeInScale .15s ease;
}
.confidence-details-group{ margin-bottom:var(--s-2h); }
.confidence-details-group:last-child{ margin-bottom:0; }
.confidence-details-group-title{
  font-weight:600;
  margin-bottom:var(--s-1h);
  color:var(--muted);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:var(--text-2xs);
  display:inline-flex;
  align-items:center;
  gap:var(--s-1h);
}
.confidence-article-row{
  display:grid;
  grid-template-columns:var(--icon-sm) auto 1fr auto;
  gap:var(--s-1h);align-items:baseline;
  padding:var(--s-half) 0;
  font-size:var(--text-xs);
  border-bottom:1px dashed transparent;
}
.confidence-article-row:hover{ border-bottom-color:var(--border); }
.confidence-article-icon{ font-size:var(--text-2xs); line-height:1; }
.confidence-article-ref{
  font-weight:600;color:var(--text);
  font-family:var(--font-mono);
  font-size:var(--text-2xs);
  white-space:nowrap;
}
.confidence-article-reason{
  color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;
  line-height:var(--lh-snug);
}
.confidence-article-score{
  font-family:var(--font-mono);
  font-size:var(--text-2xs);
  color:var(--muted);
  white-space:nowrap;
  opacity:.7;
}

/* ════════════════════════════════════════════════════════════════════
   SOURCE LIST — расширенные карточки источников с metadata
   Заменяет старые chip-badges (.src-badge) в renderAi.
   ════════════════════════════════════════════════════════════════════ */
.msg-sources{
  margin-top:10px;
  padding-top:8px;
  border-top:1px dashed var(--border);
}
.msg-sources-title{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;color:var(--muted);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:6px;
}
.msg-sources-title .msg-sources-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:16px;padding:0 5px;
  border-radius:8px;background:var(--link-bg);color:var(--link);
  font-size:10px;font-weight:700;letter-spacing:0;
  text-transform:none;
}
.msg-sources-list{
  display:flex;flex-direction:column;gap:5px;
}
.src-item{
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg-panel);
  overflow:hidden;
  transition:border-color .12s ease, background .12s ease;
}
.src-item:hover{ border-color:var(--accent-edge); }
.src-item.is-open{
  background:var(--bg-app);
  border-color:var(--link-dim);
}
.src-item-header{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;
  cursor:pointer;user-select:none;
  font-size:11px;color:var(--text);
  line-height:1.3;
  transition:background .12s ease;
}
.src-item-header:hover{ background:var(--hover); }
.src-item-icon{
  flex-shrink:0;display:inline-flex;align-items:center;
  opacity:.8;
}
.src-item-title{
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.src-item-npa{ font-weight:600;color:var(--text); }
.src-item-art{ color:var(--muted);font-weight:500; }
.src-item-chev{
  flex-shrink:0;display:inline-flex;align-items:center;
  opacity:.55;
}
.src-item.is-open .src-item-chev{ opacity:.9; }
.src-item-preview{
  padding:0 8px 7px 24px;
  font-size:10.5px;line-height:1.45;
  color:var(--muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
  white-space:normal;
}
.src-item-body{
  padding:8px 10px 10px 24px;
  border-top:1px solid var(--border);
  background:var(--bg-app);
  animation:src-fade .14s ease;
}
@keyframes src-fade{ from{opacity:0;} to{opacity:1;} }
.src-item-text{
  font-family:var(--font-long, 'Newsreader', Georgia, serif);
  font-size:12px;line-height:1.6;
  color:var(--text);
  white-space:pre-wrap;word-break:break-word;
}
.src-item-action{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:8px;padding:3px 8px;
  background:transparent;
  border:1px solid var(--accent-edge);
  border-radius:4px;
  color:var(--accent);
  font-size:10.5px;font-weight:500;
  cursor:pointer;font-family:inherit;
  transition:background .12s ease;
}
.src-item-action:hover{ background:var(--accent-dim); }

/* ════════════════════════════════════════════════════════════════════
   SOURCE BADGE — refined sapphire chip (legacy, для совместимости)
   ════════════════════════════════════════════════════════════════════ */
.src-badge{
  font-size:11px;color:var(--link);
  background:var(--link-bg);
  border:1px solid var(--accent-edge);
  border-radius:999px;padding:3px 10px 3px 8px;
  cursor:pointer;
  transition:all .2s var(--ease);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  display:inline-flex;align-items:center;gap:5px;
  font-weight:500;
  font-family:var(--font-mono);
  letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.src-badge::before{
  content:'§';color:var(--accent2);font-family:var(--font-display);font-style:italic;
  font-size:13px;line-height:0;font-weight:600;
}
.src-badge:hover{
  background:var(--accent-dim);
  border-color:var(--accent);
  color:var(--accent-strong);
  box-shadow:0 0 0 3px var(--accent-soft),0 6px 18px var(--accent-glow);
  transform:translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════════
   ACTION BUTTONS (chat) — Linear-style ghost buttons
   ════════════════════════════════════════════════════════════════════ */
.ai-actions{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
.ai-act-btn{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;
  border:1px solid var(--accent-edge);
  border-radius:8px;
  background:var(--accent-soft);
  cursor:pointer;
  color:var(--primary);font-size:11px;
  font-family:var(--font-body);font-weight:500;
  letter-spacing:-.005em;
  transition:all .18s var(--ease);
  box-shadow:var(--shadow-inset);
}
.ai-act-btn:hover{
  background:var(--hover);
  color:var(--primary-hover);
  border-color:var(--primary);
  transform:translateY(-1px);
  box-shadow:var(--shadow-inset),0 4px 12px var(--accent-glow);
}

/* ════════════════════════════════════════════════════════════════════
   EDITOR WORKSPACE — paper page over dark workspace
   Документ всегда на светлой бумаге (как Word/Google Docs в dark mode)
   чтобы импортированные DOCX (color:#000, white tables) оставались
   читаемыми. Воркспейс вокруг — тёмный.
   ════════════════════════════════════════════════════════════════════ */

/* Editor host — dark workspace canvas around the paper */
.myz-editor{
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,var(--accent-soft),transparent 70%),
    var(--bg-editor);
  position:relative;
  isolation:isolate;
}
.myz-editor::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:var(--pattern-dot);background-size:20px 20px;opacity:.4;
  z-index:0;
}

/* ════ QUILL TOOLBAR — modern segmented control ═══════════════════════
   Sticky glass bar with grouped formats, refined buttons, sapphire
   active states. Lifted off the page with shadow for depth.
   ══════════════════════════════════════════════════════════════════════ */
.ql-toolbar.ql-snow{
  background:var(--bg-panel);
  border:none !important;
  border-bottom:1px solid var(--border) !important;
  padding:9px 14px !important;
  position:sticky;top:0;z-index:11;
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.08);
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
}

/* Quill renders format groups inside <span class="ql-formats">.
   Style each group as a segmented capsule. */
.ql-toolbar.ql-snow .ql-formats{
  display:inline-flex;align-items:center;gap:2px;
  padding:2px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:9px;
  margin-right:6px !important;
  box-shadow:var(--shadow-xs);
  position:relative;
}
.ql-toolbar.ql-snow .ql-formats:hover{
  border-color:var(--accent-edge);
}

/* Quill toolbar buttons — refined pill style */
.ql-snow.ql-toolbar button{
  width:30px;height:28px;
  padding:0 !important;
  border:1px solid transparent !important;
  border-radius:6px !important;
  background:transparent !important;
  display:inline-flex !important;
  align-items:center;justify-content:center;
  transition:
    background .15s var(--ease),
    color .15s var(--ease),
    transform .12s var(--ease-spring),
    box-shadow .2s var(--ease);
  position:relative;
  cursor:pointer;
}
.ql-snow.ql-toolbar button:hover{
  background:var(--hover) !important;
  transform:translateY(-0.5px);
}
.ql-snow.ql-toolbar button.ql-active{
  background:var(--accent-dim) !important;
  border-color:var(--accent-edge) !important;
  box-shadow:inset 0 0 0 1px var(--accent-edge),0 2px 6px var(--accent-glow);
}
.ql-snow.ql-toolbar button:active{transform:scale(.92)}

/* SVG strokes/fills — themed */
.ql-snow .ql-stroke{
  stroke:var(--muted) !important;
  stroke-width:1.8 !important;
  transition:stroke .15s var(--ease);
}
.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{
  fill:var(--muted) !important;
  transition:fill .15s var(--ease);
}
.ql-snow.ql-toolbar button:hover .ql-stroke{stroke:var(--text) !important}
.ql-snow.ql-toolbar button:hover .ql-fill{fill:var(--text) !important}
.ql-snow.ql-toolbar button.ql-active .ql-stroke{stroke:var(--accent-strong) !important}
.ql-snow.ql-toolbar button.ql-active .ql-fill{fill:var(--accent-strong) !important}

/* Pickers (font / size / heading / color) — refined */
.ql-snow .ql-picker{
  color:var(--text) !important;
  font-family:var(--font-body) !important;
  font-size:12px !important;
  font-weight:500;
  height:28px !important;
  letter-spacing:-.005em;
}
.ql-snow .ql-picker-label{
  border:1px solid transparent !important;
  border-radius:7px !important;
  padding:4px 22px 4px 9px !important;
  display:inline-flex !important;align-items:center;
  background:transparent;
  transition:all .15s var(--ease);
}
.ql-snow .ql-picker-label::before{
  color:var(--text) !important;
  line-height:1.6 !important;
}
.ql-snow .ql-picker-label:hover{
  background:var(--hover);
  border-color:var(--border) !important;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label,
.ql-snow .ql-picker-label.ql-active{
  background:var(--accent-dim) !important;
  border-color:var(--accent-edge) !important;
  color:var(--accent-strong) !important;
  box-shadow:inset 0 0 0 1px var(--accent-edge);
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label::before,
.ql-snow .ql-picker-label.ql-active::before{color:var(--accent-strong) !important}
.ql-snow .ql-picker-label svg .ql-stroke{stroke:var(--muted) !important;stroke-width:2 !important}
.ql-snow .ql-picker-label:hover svg .ql-stroke{stroke:var(--text) !important}

/* Picker dropdowns — premium glass menu */
.ql-snow .ql-picker-options{
  background:var(--bg-panel) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-lg),0 0 0 1px var(--accent-edge) !important;
  padding:6px !important;margin-top:6px;
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  animation:fadeInScale .15s var(--ease-out);
}
.ql-snow .ql-picker-item{
  border-radius:6px !important;
  padding:6px 10px !important;
  transition:all .12s var(--ease);
  color:var(--text) !important;
  font-size:12.5px;
}
.ql-snow .ql-picker-item::before{color:var(--text) !important}
.ql-snow .ql-picker-item:hover{
  background:var(--accent-dim) !important;
  color:var(--accent-strong) !important;
}
.ql-snow .ql-picker-item:hover::before{color:var(--accent-strong) !important}
.ql-snow .ql-picker-item.ql-selected{
  background:var(--accent-dim) !important;
  color:var(--accent-strong) !important;
  font-weight:600;
}
.ql-snow .ql-picker-item.ql-selected::before{color:var(--accent-strong) !important}

/* Color picker swatches */
.ql-snow .ql-color-picker .ql-picker-options,
.ql-snow .ql-background .ql-picker-options{padding:5px !important;width:170px !important}
.ql-snow .ql-color-picker .ql-picker-item{
  width:18px !important;height:18px !important;
  border-radius:4px !important;
  margin:1px !important;
  border:1px solid var(--border) !important;
  padding:0 !important;
  transition:transform .15s var(--ease-spring),box-shadow .15s var(--ease);
}
.ql-snow .ql-color-picker .ql-picker-item:hover{
  transform:scale(1.18);
  border-color:var(--accent) !important;
  box-shadow:0 0 0 2px var(--accent-soft);
}

/* Tooltip (link editor) */
.ql-snow .ql-tooltip{
  background:var(--bg-panel) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-lg),0 0 0 1px var(--accent-edge) !important;
  color:var(--text) !important;z-index:1000;
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  padding:8px 12px !important;
  font-family:var(--font-body) !important;
  white-space:normal;
}
.ql-snow .ql-tooltip::before{color:var(--muted) !important}
.ql-snow .ql-tooltip input[type=text]{
  background:var(--bg-bar) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  border-radius:6px !important;
  padding:6px 10px !important;
  font-family:var(--font-body) !important;
  font-size:12px;
  outline:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.ql-snow .ql-tooltip input[type=text]:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-soft);
}
.ql-snow .ql-tooltip a.ql-action,.ql-snow .ql-tooltip a.ql-remove{
  color:var(--accent) !important;
  font-weight:500;
  margin-left:10px;
}
.ql-snow .ql-tooltip a.ql-action::after{color:var(--accent) !important;border-color:var(--border) !important}
.ql-snow .ql-tooltip a.ql-remove::before{color:var(--red) !important}
.ql-snow .ql-tooltip a:hover{color:var(--accent-strong) !important}

/* ════ EDITOR PAGE — paper canvas (always light, like Word/Docs) ═════
   В тёмном режиме страница остаётся бумажной чтобы импортированные
   DOCX оставались читаемыми (Word inline color:#000 viewport).
   ══════════════════════════════════════════════════════════════════════ */
.ql-container.ql-snow{
  border:none !important;
  flex:1;overflow-y:auto;
  background:transparent !important;
  font-family:var(--font-long);
  display:flex;justify-content:center;
  padding:32px 24px 80px;
  position:relative;
}
.ql-editor{
  width:100%;max-width:860px;
  min-height:calc(100% - 80px);
  background:#FFFFFF !important;
  color:#0A0C12 !important;
  font-family:var(--font-long);
  font-size:15px;line-height:1.75;
  padding:64px 80px 80px !important;
  caret-color:var(--accent);
  border-radius:4px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.08),
    0 4px 16px rgba(0,0,0,.10),
    0 24px 64px rgba(0,0,0,.18);
  position:relative;
  font-feature-settings:"kern","liga","onum";
  hyphens:auto;
}
.dk .ql-editor{
  box-shadow:
    0 1px 3px rgba(0,0,0,.5),
    0 8px 32px rgba(0,0,0,.45),
    0 24px 72px rgba(0,0,0,.55);
}
/* Subtle paper edge highlight */
.ql-editor::before{
  content:'';position:absolute;inset:0;
  border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* Paper typography defaults — readable, classic legal */
.ql-editor p{margin:0 0 .5em}
.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4{
  font-family:'Times New Roman',Times,serif;
  color:#0A0C12;
  letter-spacing:-.005em;
}
.ql-editor h1{font-size:1.6em;font-weight:700;margin:.7em 0 .3em}
.ql-editor h2{font-size:1.35em;font-weight:700;margin:.6em 0 .3em}
.ql-editor h3{font-size:1.15em;font-weight:700;margin:.5em 0 .25em}
.ql-editor blockquote{
  border-left:3px solid var(--accent);
  margin:.6em 0;padding:.2em 1em;
  color:#3a3f4a;font-style:italic;
  background:rgba(0,139,139,.06);
}
.ql-editor a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ql-editor table{border-collapse:collapse;margin:.6em 0;width:100%}
.ql-editor table td,.ql-editor table th{
  border:1px solid #C5D5DC;
  padding:6px 10px;vertical-align:top;
}
.ql-editor table th{background:#E8F3F1;font-weight:700;text-align:left}

/* Empty state placeholder */
.ql-editor.ql-blank::before{
  color:#9A9586 !important;
  font-style:italic;
  font-family:var(--font-display) !important;
  font-size:1.05em;
  left:80px !important;right:80px !important;top:64px !important;
}

/* Selection inside paper editor — readable on light bg */
.ql-editor ::selection{background:rgba(0,139,139,.20);color:#0A0C12}

/* Quill font / size pickers */
.ql-font-times-new-roman{font-family:'Times New Roman',Times,serif}
.ql-font-arial{font-family:Arial,Helvetica,sans-serif}
.ql-font-georgia{font-family:Georgia,'Palatino Linotype',serif}
.ql-font-verdana{font-family:Verdana,Geneva,sans-serif}
.ql-font-courier-new{font-family:'Courier New',Courier,monospace}
.ql-font-sans-serif{font-family:sans-serif}
.ql-font-serif{font-family:serif}
.ql-font-monospace{font-family:monospace}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times-new-roman"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times-new-roman"]::before{content:'Times New Roman';font-family:'Times New Roman',serif}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before{content:'Arial';font-family:Arial,sans-serif}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before{content:'Georgia';font-family:Georgia,serif}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before{content:'Verdana';font-family:Verdana,sans-serif}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier-new"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier-new"]::before{content:'Courier New';font-family:'Courier New',monospace}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before{content:'Sans Serif';font-family:sans-serif}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before{content:'Serif';font-family:serif}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before{content:'Monospace';font-family:monospace}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'14'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before{content:'10'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11px"]::before{content:'11'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before{content:'12'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="13px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="13px"]::before{content:'13'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before{content:'14'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before{content:'16'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before{content:'18'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before{content:'20'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before{content:'22'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before{content:'24'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before{content:'28'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before{content:'32'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before{content:'36'}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before{content:'48'}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before{font-size:10px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11px"]::before{font-size:11px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before{font-size:12px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="13px"]::before{font-size:13px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before{font-size:14px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before{font-size:16px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before{font-size:18px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before{font-size:20px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before{font-size:22px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before{font-size:24px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before{font-size:28px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before{font-size:28px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before{font-size:28px}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before{font-size:28px}

.ql-snow .ql-picker.ql-font{width:150px}
.ql-snow .ql-picker.ql-size{width:60px}

@media print{
  body *{visibility:hidden}
  .ql-editor,.ql-editor *{visibility:visible}
  .ql-editor{position:absolute;left:0;top:0;width:100%;padding:0;margin:0;background:#fff !important;color:#000 !important}
}

/* ════════════════════════════════════════════════════════════════════
   AGENT PENDING EDITS — refined inline diff (Cursor-style)
   ════════════════════════════════════════════════════════════════════ */
.agent-pending-insert{
  background:linear-gradient(180deg,rgba(60,203,142,.20),rgba(60,203,142,.08));
  border-bottom:2px solid var(--green);
  border-radius:3px;
  padding:1px 3px;
  box-shadow:0 0 0 1px rgba(60,203,142,.24),0 2px 8px rgba(60,203,142,.20);
  animation:agentGlowIn .42s var(--ease-out);
}
.agent-pending-delete{
  background:rgba(248,113,113,.13);
  text-decoration:line-through;
  text-decoration-color:var(--red);
  text-decoration-thickness:2px;
  color:var(--muted);
  padding:1px 3px;
  border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(248,113,113,.20);
}
@keyframes agentGlowIn{
  0%{background-color:rgba(60,203,142,.50);box-shadow:0 0 28px rgba(60,203,142,.7)}
  100%{background-color:transparent;box-shadow:0 0 0 1px rgba(60,203,142,.24),0 2px 8px rgba(60,203,142,.20)}
}

/* ════════════════════════════════════════════════════════════════════
   AGENT FLOATING BAR — glass capsule with rotating gradient border
   ════════════════════════════════════════════════════════════════════ */
.agent-floating-bar{
  position:fixed;z-index:200;
  display:flex;align-items:center;gap:7px;
  padding:6px 8px;
  background:var(--bg-panel);
  border:1px solid var(--accent-edge);
  border-radius:999px;
  box-shadow:
    0 16px 48px rgba(0,0,0,.3),
    0 0 0 4px var(--accent-dim),
    0 0 32px var(--accent-glow);
  animation:liftIn .24s var(--ease-out);
  font-family:var(--font-body);
  backdrop-filter:blur(28px) saturate(1.5);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);
}
.agent-floating-bar .lbl{
  font-size:10.5px;font-weight:600;color:var(--accent);
  padding:0 10px;letter-spacing:.08em;text-transform:uppercase;
  font-family:var(--font-mono);
}
.agent-floating-bar .btn-accept{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;border:none;border-radius:999px;
  background:var(--grad-accent);
  color:#fff;font-size:12px;font-weight:600;cursor:pointer;
  box-shadow:
    0 4px 14px var(--accent-glow),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.18);
  font-family:inherit;
  letter-spacing:-.005em;
  transition:all .2s var(--ease);
}
.agent-floating-bar .btn-accept::before{
  content:'';position:absolute;top:0;left:-50%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  animation:glintBar 3s var(--ease-out) infinite;
}
.agent-floating-bar .btn-accept:hover{
  transform:translateY(-1px) scale(1.02);
  filter:brightness(1.10);
  box-shadow:0 6px 22px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.40);
}
.agent-floating-bar .btn-reject{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;border:1px solid var(--border);border-radius:999px;
  background:transparent;color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;
  font-family:inherit;
  letter-spacing:-.005em;
  transition:all .2s var(--ease);
}
.agent-floating-bar .btn-reject:hover{background:var(--hover);color:var(--text);border-color:var(--muted)}
.agent-floating-bar .kbd{
  font-size:9.5px;font-family:var(--font-mono);
  opacity:.65;margin-left:5px;padding:1.5px 5px;
  border:1px solid currentColor;border-radius:4px;
  letter-spacing:.04em;font-weight:500;
}

/* ════════════════════════════════════════════════════════════════════
   DOCX ORIGINAL PREVIEW
   ════════════════════════════════════════════════════════════════════ */
.docx-original{display:flex;flex-direction:column;align-items:center;gap:18px;color:#000;padding:8px 0}
.docx-original .docx-wrapper{background:transparent !important;padding:0 !important}
.docx-original section.docx{
  background:#fff;
  box-shadow:0 2px 14px rgba(0,0,0,.18),0 22px 50px rgba(0,0,0,.12);
  margin:0 auto;color:#000;border-radius:2px;
}
.docx-original *{color:#000;background-color:transparent}
.docx-original table{border-collapse:collapse}
.docx-original img{max-width:100%;height:auto}

/* ════════════════════════════════════════════════════════════════════
   ICON SYSTEM
   ════════════════════════════════════════════════════════════════════ */
.ico{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:filter .28s var(--ease),transform .22s var(--ease-spring);
}
.ico svg{width:100%;height:100%}
.ico-glow{filter:drop-shadow(0 0 8px var(--accent-glow))}
.ico-grad svg path,.ico-grad svg circle,.ico-grad svg polyline,.ico-grad svg line{stroke:url(#grad-ico);transition:stroke .3s var(--ease)}
.ico-duo svg path{stroke:var(--ico-color);fill:var(--ico-fill,transparent)}
.ico-fill svg path{fill:var(--ico-color);stroke:none}
.btn:hover .ico{transform:scale(1.08)}
.btn:active .ico{transform:scale(.94)}

/* ════════════════════════════════════════════════════════════════════
   EMOJI SYSTEM — refined bubbles
   ════════════════════════════════════════════════════════════════════ */
.emoji{display:inline-flex;align-items:center;justify-content:center;position:relative;line-height:1;transition:transform .28s var(--ease-spring)}
.emoji:hover{transform:scale(1.20) rotate(-6deg)}
.emoji-bubble{
  background:var(--emoji-bg,linear-gradient(135deg,var(--accent-dim),var(--accent-soft)));
  border-radius:14px;padding:8px 12px;font-size:20px;
  box-shadow:
    inset 0 -2px 5px rgba(0,0,0,.18),
    0 2px 6px rgba(0,0,0,.30),
    0 0 0 1px var(--accent-edge),
    inset 0 1px 0 rgba(255,255,255,.10);
}
.emoji-lg{font-size:48px;filter:drop-shadow(0 4px 16px rgba(0,0,0,.4))}
.emoji-glow{filter:drop-shadow(0 0 18px var(--accent-glow)) drop-shadow(0 0 36px var(--accent-glow))}
/* breathe animation removed — SKILL §7: motion-meaning required, decorative only kills attention */
.emoji-float{/* motion-meaning: only animate on actual interaction, not idle */}

/* ════ STATUS DOT ════════════════════════════════════════════════════ */
.status-dot{position:relative;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.status-dot::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:1px solid currentColor;opacity:0;animation:ring-pulse 2.4s var(--ease-out) infinite}
.status-green{background:var(--green);color:var(--green);box-shadow:0 0 8px rgba(40,167,69,.4)}

/* ════════════════════════════════════════════════════════════════════
   GRADIENT BADGE — champagne sigil
   ════════════════════════════════════════════════════════════════════ */
.grad-badge{
  background:linear-gradient(135deg,var(--accent2),#F2D89F 50%,#E5C87E);
  color:#1A1108;font-size:9.5px;font-weight:700;
  padding:2.5px 9px;border-radius:6px;letter-spacing:.08em;
  text-transform:uppercase;
  font-family:var(--font-mono);
  box-shadow:
    0 1px 5px rgba(229,200,126,.40),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
.grad-badge-shimmer{
  background:linear-gradient(110deg,var(--accent2),#F2D89F,#E5C87E,#F2D89F,var(--accent2));
  background-size:200% 100%;
  animation:shimmer 3s linear infinite;
}

/* ════════════════════════════════════════════════════════════════════
   AVATAR — static signet ring (animation removed for calm UI)
   Spin only via .is-thinking class when AI is generating (motion-meaning)
   ════════════════════════════════════════════════════════════════════ */
.avatar-ring{
  position:relative;padding:2.5px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--accent),var(--accent-strong),var(--accent2),var(--accent-strong),var(--accent));
  box-shadow:0 0 14px var(--accent-glow);
}
.avatar-ring.is-thinking{animation:gradient-spin 6s linear infinite}
.avatar-ring::after{content:'';position:absolute;inset:2.5px;border-radius:50%;background:var(--bg-bar)}
.avatar-ring>div{position:relative;z-index:1}

/* ════ SPARKLE — decorative only, kept static (no animation per SKILL §7) */
.sparkle-wrap{position:relative;display:inline-flex}
.sparkle-wrap::before,.sparkle-wrap::after{
  content:'✦';position:absolute;font-size:8px;color:var(--accent2);
  pointer-events:none;opacity:.65;
  filter:drop-shadow(0 0 4px var(--accent-glow));
}
.sparkle-wrap::after{top:2px;right:-10px;font-size:6px}
.sparkle-wrap::before{top:-6px;left:-8px}

/* ════════════════════════════════════════════════════════════════════
   NPA Viewer — official document, paper background even in dark mode
   ════════════════════════════════════════════════════════════════════ */
.npa-viewer-content{
  font-family:var(--font-long);
  font-size:14.5px;line-height:1.65;
  text-align:justify;color:#1a1a1a;
  padding:18px 24px;
  hyphens:auto;
  background:#fefefb;
}
.npa-viewer-content p{text-indent:1.25cm;margin-top:0;margin-bottom:6px}
.npa-viewer-content h3{
  text-align:center;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  margin-top:18px;margin-bottom:14px;
  letter-spacing:-.015em;
}

/* ════════════════════════════════════════════════════════════════════
   COMMAND PALETTE / CHIP — used in /tour, suggestions, mode pickers
   ════════════════════════════════════════════════════════════════════ */
.cmd-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:8px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  background:var(--bg-bar);
  border:1px solid var(--border);
  color:var(--muted);
  transition:all .18s var(--ease);
  letter-spacing:-.01em;
}
.cmd-chip:hover{
  background:var(--accent-dim);
  border-color:var(--accent);
  color:var(--accent-strong);
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .myz-menubar-spacer{display:none !important}
  .myz-editor-toolbar .myz-btn-label{display:none}
  .myz-chat-input-suggestions{display:none}
  .myz-statusbar{padding:4px 10px !important;font-size:10.5px !important}
  .myz-statusbar .sb-detail{display:none}
  .ql-editor{padding:24px 20px !important}
}
@media (max-width:900px) and (pointer:coarse){
  button,.btn{min-height:44px}
  .tb-btn{min-width:44px !important;min-height:44px !important}
  select,.tb-sel{min-height:44px;font-size:13px}
  .ai-act-btn{min-height:36px;padding:7px 12px}
}
@media (max-width:480px){
  .docengine-toolbar .tb-sel-font{min-width:70px;font-size:10px}
  .docengine-toolbar .tb-sel-size{min-width:42px}
  .docengine-toolbar .tb-sel-lh{min-width:38px}
}

/* ════════════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════════════
   DOCENGINE (TipTap) — premium document workspace
   Toolbar / Filebar / Ruler / A4 page / Status bar / Zoom
   Tribunal aesthetic: glass surfaces, sapphire accents, paper page.
   ════════════════════════════════════════════════════════════════════
   ════════════════════════════════════════════════════════════════════ */

/* Document page sizing — variables required by React layout */
:root{
  --doc-zoom:1;
  --doc-page-width:210mm;
  --doc-page-min-h:297mm;
  --doc-pad-top:20mm;
  --doc-pad-right:15mm;
  --doc-pad-bottom:20mm;
  --doc-pad-left:30mm;
  --doc-pages:1;
}

/* App shell — flexible, fills parent (sits between left/right panels) */
.docengine-app{
  width:100%;height:100%;
  flex:1;
  min-width:0;        /* allow flex item to shrink below content size */
  display:flex;flex-direction:column;
  background:var(--bg-editor);
  color:var(--text);
  overflow:hidden;
}
/* All inner editor flex containers must allow shrinking */
.docengine-app > *,
.docengine-shell,
.docengine-canvas,
.docengine-toolbar,
.docengine-filebar,
.docengine-statusbar,
.docengine-header,
.docengine-ruler{min-width:0}

/* ════ HEADER ════════════════════════════════════════════════════════ */
.docengine-header{
  flex-shrink:0;
  display:flex;align-items:center;gap:14px;
  padding:11px 22px;
  background:var(--bg-bar);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  z-index:10;position:relative;
  box-shadow:0 1px 0 rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.08);
}
.docengine-header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--accent-edge) 30%,var(--accent-edge) 70%,transparent 100%);
  pointer-events:none;
}

.docengine-brand{display:flex;align-items:center;gap:12px}

.docengine-logo{
  width:36px;height:36px;border-radius:10px;
  background:var(--grad-accent);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:400;font-size:19px;font-style:italic;
  letter-spacing:-.02em;
  box-shadow:
    0 4px 14px var(--accent-glow),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.18);
  position:relative;
}
.docengine-logo::after{
  content:'';position:absolute;inset:1px;border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 50%);
  pointer-events:none;
}

.docengine-title{
  font-family:var(--font-display);
  font-size:17px;font-weight:400;font-style:italic;
  line-height:1.1;letter-spacing:-.02em;
  color:var(--text);
}
.docengine-subtitle{
  font-size:9.5px;color:var(--muted);margin-top:3px;
  font-family:var(--font-mono);
  letter-spacing:.12em;text-transform:uppercase;
  font-weight:500;
}

.docengine-stage{
  display:flex;align-items:center;gap:8px;
  padding:5px 13px;
  background:var(--accent-dim);
  border:1px solid var(--accent-edge);
  border-radius:999px;
  font-size:10.5px;color:var(--accent-strong);
  font-family:var(--font-mono);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
}
.docengine-stage .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent2);
  box-shadow:0 0 10px var(--accent-glow);
  animation:pulse 2.4s ease-in-out infinite;
}

.docengine-theme-btn{
  width:36px;height:36px;border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg-bar);
  color:var(--muted);
  cursor:pointer;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:all .18s var(--ease);
  box-shadow:var(--shadow-inset);
}
.docengine-theme-btn:hover{
  background:var(--accent-dim);
  color:var(--accent-strong);
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 4px 14px var(--accent-glow);
}

/* ════ FILE BAR ══════════════════════════════════════════════════════ */
.docengine-filebar{
  flex-shrink:0;
  display:flex;align-items:center;gap:7px;
  padding:9px 16px;
  background:var(--bg-bar);
  border-bottom:1px solid var(--border);
  z-index:10;position:relative;
}

.fb-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;height:32px;
  border:1px solid var(--border);
  background:var(--bg-panel);
  color:var(--text);
  font-family:var(--font-body);
  font-size:12px;font-weight:500;letter-spacing:-.005em;
  border-radius:8px;
  cursor:pointer;
  transition:all .15s var(--ease);
  box-shadow:var(--shadow-inset);
}
.fb-btn:hover:not(:disabled){
  background:var(--hover);
  border-color:var(--accent-edge);
  color:var(--accent-strong);
  transform:translateY(-1px);
  box-shadow:var(--shadow-inset),0 4px 12px var(--accent-glow);
}
.fb-btn:disabled{opacity:.42;cursor:not-allowed}
.fb-btn:active:not(:disabled){transform:translateY(0) scale(.97)}

.fb-btn-primary{
  background:var(--grad-accent);
  border-color:transparent;
  color:#fff;font-weight:600;
  box-shadow:
    0 3px 12px var(--accent-glow),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.16);
  position:relative;overflow:hidden;
}
.fb-btn-primary::before{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transition:transform 1.4s var(--ease);
  pointer-events:none;
}
.fb-btn-primary:hover:not(:disabled){
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 5px 20px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.40);
}
.fb-btn-primary:hover:not(:disabled)::before{transform:translateX(280%)}
.fb-ico{font-size:14px;line-height:1}

.fb-filename{
  display:inline-flex;align-items:center;gap:7px;
  margin-left:12px;padding:6px 14px;height:32px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:8px;
  font-family:var(--font-mono);font-size:11.5px;
  color:var(--muted);
  max-width:320px;
  box-shadow:var(--shadow-inset);
  letter-spacing:-.01em;
}
.fb-fn-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-dirty{
  color:var(--accent2);font-size:14px;line-height:1;
  animation:pulse 1.6s infinite;
  text-shadow:0 0 8px var(--accent-glow);
}
.fb-status{
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  color:var(--orange);
  padding:5px 11px;
  border:1px solid var(--orange);
  background:rgba(245,158,91,.10);
  border-radius:6px;
  letter-spacing:.06em;text-transform:uppercase;
  opacity:.9;
}

/* ════ TOAST ═════════════════════════════════════════════════════════ */
.docengine-toast{
  position:fixed;bottom:64px;left:50%;transform:translateX(-50%);
  z-index:9999;
  padding:12px 22px;
  background:var(--bg-panel);
  color:var(--text);
  border:1px solid var(--accent);
  border-radius:14px;
  box-shadow:
    0 12px 40px rgba(0,0,0,.3),
    0 0 0 4px var(--accent-dim),
    var(--shadow-inset);
  font-family:var(--font-body);
  font-size:13px;font-weight:500;letter-spacing:-.005em;
  animation:toastIn .28s var(--ease-out);
  pointer-events:none;
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
}
@keyframes toastIn{
  from{opacity:0;transform:translate(-50%,14px)}
  to{opacity:1;transform:translate(-50%,0)}
}

/* ════ TOOLBAR — sticky glass with grouped controls ══════════════════ */
.docengine-toolbar{
  flex-shrink:0;
  display:flex;align-items:center;gap:1px;
  padding:6px 14px;
  background:var(--bg-panel);
  border-bottom:1px solid var(--border-color);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  flex-wrap:nowrap;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;
  z-index:9;position:relative;
  min-height:42px;height:42px;
}
.docengine-toolbar::-webkit-scrollbar{height:4px}
.docengine-toolbar::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}
.docengine-toolbar::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.docengine-toolbar > *{flex-shrink:0}
.docengine-toolbar.disabled{opacity:.35;pointer-events:none}

.tb-btn{
  min-width:32px;height:32px;
  padding:0 9px;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;
  background:transparent;
  color:var(--text-main);
  font-size:13px;font-weight:500;letter-spacing:-.005em;
  font-family:var(--font-body);
  cursor:pointer;border-radius:8px;
  transition:all .15s var(--ease);
  user-select:none;
}
.tb-btn:hover:not(:disabled){
  background:var(--hover);
  color:var(--text-main);
}
.tb-btn.active{
  background:var(--accent-dim);
  border-color:var(--accent-edge);
  color:var(--accent-strong);
  font-weight:700;
  box-shadow:inset 0 0 0 1px var(--accent-edge),0 2px 8px var(--accent-glow);
}
.tb-btn.accent{
  background:var(--grad-accent);
  color:#fff;font-weight:600;
  box-shadow:0 3px 10px var(--accent-glow);
}
.tb-btn:disabled{opacity:.32;cursor:not-allowed}
.tb-btn:active:not(:disabled){transform:scale(.94)}

.tb-sep{
  width:1px;height:20px;
  background:var(--border-color);
  margin:0 8px;align-self:center;
}

.tb-sel{
  height:32px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text-main);
  border-radius:7px;padding:0 10px;
  font-family:var(--font-body);font-size:12px;font-weight:500;
  cursor:pointer;outline:none;margin:0 2px;
  transition:all .15s var(--ease);
}
.tb-sel{
  box-shadow:var(--shadow-inset);
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(-45deg,transparent 50%,var(--muted) 50%);
  background-position:calc(100% - 11px) 14px,calc(100% - 7px) 14px;
  background-size:4px 4px;
  background-repeat:no-repeat;
  padding-right:24px;
}
.tb-sel:hover{
  border-color:var(--accent-edge);
  color:var(--accent-strong);
}
.tb-sel:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.tb-sel-font{min-width:140px}
.tb-sel-size{min-width:62px}
.tb-sel-lh{min-width:62px}
.tb-sel option{background:var(--bg-panel);color:var(--text);font-family:var(--font-body)}

/* Color picker */
.tb-color{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;cursor:pointer;
  border-radius:8px;border:1px solid transparent;
  flex-direction:column;gap:1px;padding:3px 0 0;
  transition:all .15s var(--ease);
}
.tb-color:hover{
  background:var(--hover);
  border-color:var(--border);
}
.tb-color input[type="color"]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:none;
}
.tb-color-letter{
  font-weight:700;font-size:13px;line-height:1;
  font-family:var(--font-display);font-style:italic;
  color:var(--text);pointer-events:none;
}
.tb-color-bar{
  width:18px;height:4px;border-radius:2px;
  border:1px solid rgba(0,0,0,.22);
  pointer-events:none;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}

/* ════════════════════════════════════════════════════════════════════
   RULER — slim refined measure, Word / GDocs style
   ──────────────────────────────────────────────────────────────────
   Высота 22px (тонкая, незаметная), но с большой hitbox-зоной
   на маркерах для стабильного перетаскивания.
   ──────────────────────────────────────────────────────────────────── */
.docengine-ruler{
  flex-shrink:0;height:20px;
  background:var(--bg-app);
  border-bottom:1px solid var(--border-color);
  display:flex;justify-content:center;align-items:stretch;
  z-index:8;position:relative;
  user-select:none;overflow:visible;
}

.ruler-track{
  position:relative;height:100%;
  background:#FFFFFF;
  box-shadow:
    inset 0 -1px 0 rgba(11,18,32,.10),
    inset 0 1px 0 rgba(255,255,255,.7),
    0 0 0 1px rgba(11,18,32,.06);
}
.dk .ruler-track{
  background:var(--bg-input);
  box-shadow:
    inset 0 -1px 0 rgba(11,18,32,.18),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 1px rgba(11,18,32,.20);
}

/* Margin zones — clear darker gray (Word-style) */
.ruler-margin-zone{
  position:absolute;top:0;bottom:0;
  background:rgba(11,18,32,.10);
  pointer-events:none;
}
.dk .ruler-margin-zone{background:rgba(11,18,32,.16)}

/* Tick marks — slim & clean */
.ruler-tick{
  position:absolute;width:1px;pointer-events:none;
}
.ruler-tick.major{
  top:3px;bottom:4px;
  background:rgba(11,18,32,.45);
}
.ruler-tick.half{
  top:7px;bottom:8px;
  background:rgba(11,18,32,.26);
}

.ruler-tick-num{
  position:absolute;top:4px;left:3px;
  font-family:var(--font-mono);
  font-size:8px;font-weight:600;
  color:rgba(11,18,32,.65);
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum","ss01";
}

/* ── MARKERS — wide hitbox, refined visual ─────────────────────────── */
.ruler-marker{
  position:absolute;top:0;bottom:0;
  width:14px;cursor:ew-resize;z-index:5;
  transform:translateX(-50%);
  display:flex;flex-direction:column;
  justify-content:space-between;align-items:center;
  padding:0;
  touch-action:none;
}
/* Generous invisible hitbox — easier to grab without overflow:hidden cutoff */
.ruler-marker::after{
  content:'';position:absolute;inset:-4px -7px;
}
.ruler-marker:hover .m-arrow,
.ruler-marker.dragging .m-arrow{
  color:var(--accent);
  filter:drop-shadow(0 0 6px var(--accent-glow));
}
.m-arrow{
  font-size:9px;line-height:1;
  color:rgba(11,18,32,.55);
  transition:color .12s var(--ease),filter .12s var(--ease);
  pointer-events:none;
}
.m-arrow.up{margin-top:0}
.m-arrow.down{margin-bottom:0}

/* Text indent marker */
.ruler-text-indent{
  width:12px;cursor:grab;z-index:6;
  touch-action:none;
}
.ruler-text-indent::after{
  content:'';position:absolute;inset:-3px -5px;
}
.ruler-text-indent .ti-tri{
  display:block;margin-top:0;
  font-size:10px;line-height:1;
  color:rgba(11,18,32,.55);
  transition:color .12s var(--ease),filter .12s var(--ease);
  pointer-events:none;
}
.ruler-text-indent:hover .ti-tri,
.ruler-text-indent.dragging .ti-tri{
  color:var(--accent);
  filter:drop-shadow(0 0 6px var(--accent-glow));
}
.ruler-text-indent.dragging{cursor:grabbing}

/* ════ CANVAS — workspace with paper ═════════════════════════════════
   Canvas позволяет горизонтальный скролл когда страница шире контейнера
   (например, когда расширяются ИИ/НПА панели). Page остаётся центрированной
   когда место есть, и не обрезается когда место кончается.
   ══════════════════════════════════════════════════════════════════════ */
.docengine-shell{
  flex:1;display:flex;flex-direction:column;
  min-height:0;min-width:0;
  background:var(--bg-editor);
}
.docengine-canvas{
  flex:1;
  overflow-x:auto;overflow-y:auto;
  min-width:0;
  background:var(--bg-app);
  display:flex;justify-content:center;align-items:flex-start;
  padding:40px 0;
  position:relative;
  scrollbar-gutter:stable;
}
/* Custom scrollbars for canvas */
.docengine-canvas::-webkit-scrollbar{width:10px;height:10px}
.docengine-canvas::-webkit-scrollbar-track{background:transparent}
.docengine-canvas::-webkit-scrollbar-thumb{
  background:var(--border);border-radius:6px;
  border:2.5px solid transparent;background-clip:padding-box;
}
.docengine-canvas::-webkit-scrollbar-thumb:hover{background:var(--accent);background-clip:padding-box}

/* A4 page — paper, always light */
.docengine-page-wrapper{
  width:calc(var(--doc-page-width) * var(--doc-zoom));
  height:calc(var(--doc-page-min-h) * var(--doc-pages) * var(--doc-zoom));
  flex-shrink:0;position:relative;
}
.docengine-page{
  width:var(--doc-page-width);
  max-width:850px;
  margin:0 auto;
  min-height:1100px;
  background:var(--bg-panel);color:var(--text-main);
  box-shadow:0 2px 12px var(--shadow-color);
  padding:80px 96px;
  box-sizing:border-box;position:relative;
  border:1px solid var(--border-color);
  border-radius:2px;
  outline:none;
  transform:scale(var(--doc-zoom));
  transform-origin:top center;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.dk .docengine-page{
  box-shadow:0 2px 12px rgba(0,0,0,.5);
}
.docengine-editor-mount{
  outline:none;min-height:100%;position:relative;z-index:2;
}

/* ════════════════════════════════════════════════════════════════════
   PAGE BREAK — Word / Google Docs style: real visible paper gap
   ──────────────────────────────────────────────────────────────────
   Над контентом рисуется непрозрачная полоса цвета workspace,
   которая визуально разделяет страницу на два листа. По краям полосы
   — тонкие тени, имитирующие низ верхнего листа и верх нижнего.
   ──────────────────────────────────────────────────────────────────── */

.docengine-page-overlay{position:absolute;inset:0;pointer-events:none;z-index:3}

/* Hide the legacy "конец страницы N" text label */
.page-break-label{display:none !important}

/* ════════════════════════════════════════════════════════════════════
   PAGE BREAK — minimal hairline marker (Word print-preview style)
   ──────────────────────────────────────────────────────────────────
   ВАЖНО: TipTap не паги­ни­рует контент — текст течёт непрерывно.
   Толстая «бумажная щель» физически перекрывает текст, который
   в настоящей пагинированной системе был бы в нижнем/верхнем
   margin листов. Поэтому используем **тонкий маркер**, не блок.
   ──────────────────────────────────────────────────────────────────── */
.page-break{
  position:absolute;
  left:0;right:0;
  height:0;                          /* zero box, only border visible */
  pointer-events:none;
  z-index:5;
  border-top:1px dashed rgba(11,18,32,.22);
  /* No background, no shadow — does not cover any text */
}
.dk .page-break{
  border-top-color:rgba(255,255,255,.14);
}

/* Hide all auxiliary decoration to prevent overlap */
.page-break::before,.page-break::after{display:none}
.page-edge{display:none}
.page-break-label{display:none !important}

/* ════ PAGE NUMBERS — elegant left-margin label, like Word print preview
   Не "СТРАНИЦА 1" жирным капсом, а тонкая курсивная нумерация
   в полях, едва заметная.
   ══════════════════════════════════════════════════════════════════════ */
.page-num{
  position:absolute;left:-36mm;width:28mm;
  text-align:right;
  font-family:var(--font-mono);
  font-size:10px;font-weight:500;
  color:var(--muted);
  opacity:.55;                     /* Bumped — readable but subtle */
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1;
  transition:opacity .25s var(--ease);
}
.page-num strong{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:15px;                  /* Bigger, contrast with mono context */
  color:var(--accent);
  letter-spacing:-.015em;
  text-transform:none;
  margin:0 2px;
  vertical-align:-1px;
}
.docengine-page:hover .page-num{opacity:.85}

@media (max-width:1100px){
  .page-num{
    left:6mm;width:auto;text-align:left;
    opacity:.55;
  }
}

/* ════ PAPER GRAIN — sub-perceptual texture on document pages ═════════
   Sub-perceptual fractal noise — придаёт ощущение настоящей бумаги
   без визуального шума.
   ══════════════════════════════════════════════════════════════════════ */
.docengine-page::after,
.ql-editor::after{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.025;
  mix-blend-mode:multiply;
  z-index:0;
}

/* ════ MARGIN GUIDES (subtle on focus) ═══════════════════════════════ */
.docengine-margin-guides{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  border-left:1px dashed transparent;
  border-right:1px dashed transparent;
  border-top:1px dashed transparent;
  border-bottom:1px dashed transparent;
  margin:var(--doc-pad-top) var(--doc-pad-right) var(--doc-pad-bottom) var(--doc-pad-left);
  border-color:rgba(11,18,32,.04);
  transition:border-color .25s;
}
.docengine-page:focus-within .docengine-margin-guides{border-color:rgba(59,130,246,.15)}

/* ════ PROSEMIRROR (TipTap) — editorial document typography ══════════ */
.docengine-prose{
  outline:none;
  font-family:'Times New Roman',Times,serif;
  font-size:12pt;line-height:1.65;color:#0A0C12;
  caret-color:var(--accent);
  min-height:240mm;
  font-feature-settings:"kern","liga","calt";
}
.docengine-prose:focus{outline:none}
.docengine-prose p{margin:0 0 6pt;min-height:1em}
.docengine-prose h1{
  font-family:var(--font-display);font-style:italic;
  font-size:26pt;font-weight:400;
  margin:18pt 0 10pt;line-height:1.15;
  letter-spacing:-.025em;color:#0A0C12;
}
.docengine-prose h2{
  font-family:var(--font-display);font-style:italic;
  font-size:20pt;font-weight:400;
  margin:14pt 0 8pt;line-height:1.22;
  letter-spacing:-.022em;
}
.docengine-prose h3{
  font-family:'Times New Roman',Times,serif;
  font-size:14pt;font-weight:700;
  margin:12pt 0 6pt;line-height:1.32;
  letter-spacing:-.01em;
}
.docengine-prose h4{
  font-family:'Times New Roman',Times,serif;
  font-size:12pt;font-weight:700;
  margin:10pt 0 4pt;
}
.docengine-prose strong{font-weight:700}
.docengine-prose em{font-style:italic}
.docengine-prose u{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
.docengine-prose s{text-decoration:line-through;text-decoration-thickness:1.5px}
.docengine-prose blockquote{
  border-left:3px solid var(--accent);
  padding:6pt 16pt;margin:10pt 0;
  color:#3a3f4a;font-style:italic;
  background:linear-gradient(90deg,rgba(0,139,139,.06),transparent);
}
.docengine-prose ul,.docengine-prose ol{margin:6pt 0 6pt 24pt;padding:0}
.docengine-prose li{margin:2pt 0}
.docengine-prose li > p{margin:0}
.docengine-prose li::marker{color:var(--accent)}
.docengine-prose code{
  font-family:var(--font-mono);font-size:11pt;
  background:rgba(0,139,139,.08);
  border:1px solid rgba(0,139,139,.16);
  padding:1px 5px;border-radius:4px;
  color:var(--accent);
}
.docengine-prose pre{
  background:#E8F3F1;
  border:1px solid rgba(0,139,139,.08);
  padding:10pt 14pt;border-radius:6px;
  font-family:var(--font-mono);font-size:11pt;
  margin:8pt 0;overflow-x:auto;
}
.docengine-prose hr{
  border:none;border-top:1px solid #C5D5DC;
  margin:14pt 0;position:relative;
}
.docengine-prose hr::after{
  content:'§';position:absolute;left:50%;top:-10pt;transform:translateX(-50%);
  background:#FFFFFF;padding:0 8pt;
  font-family:var(--font-display);font-style:italic;
  color:var(--accent2);font-size:12pt;
}
.docengine-prose a{
  color:var(--accent);text-decoration:underline;
  text-decoration-color:var(--accent2);
  text-underline-offset:2px;text-decoration-thickness:1.5px;
}
.docengine-prose a:hover{text-decoration-color:var(--accent)}
.docengine-prose img{
  max-width:100%;height:auto;display:block;
  margin:10pt 0;border-radius:3px;
  box-shadow:0 1px 4px rgba(11,18,32,.10);
}

/* Tables */
.docengine-prose table.docengine-table,
.docengine-prose table{
  border-collapse:collapse;margin:10pt 0;
  table-layout:fixed;width:100%;overflow:hidden;
}
.docengine-prose td,.docengine-prose th{
  border:1px solid #C5D5DC;
  padding:5pt 9pt;vertical-align:top;
  position:relative;min-width:30pt;
}
.docengine-prose th{
  background:#E8F3F1;
  font-family:var(--font-body);
  font-weight:700;font-size:10pt;
  letter-spacing:.04em;text-transform:uppercase;
  text-align:left;
}
.docengine-prose .selectedCell::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,139,139,.12);pointer-events:none;
}
.docengine-prose .column-resize-handle{
  position:absolute;right:-2px;top:0;bottom:0;
  width:4px;background:var(--accent);
  cursor:col-resize;pointer-events:auto;
}

/* Placeholder */
.docengine-prose p.is-editor-empty:first-child::before{
  content:attr(data-placeholder);
  color:#9A9586;pointer-events:none;
  float:left;height:0;font-style:italic;
  font-family:var(--font-display);
}

/* ════ STATUS BAR — overflow-safe, zoom always pinned right ══════════ */
.docengine-statusbar{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;gap:13px;
  padding:8px 16px;
  background:var(--bg-panel);
  border-top:1px solid var(--border-color);
  font-family:var(--font-sans);
  font-size:12px;font-weight:400;
  color:var(--text-muted);
  z-index:5;
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  /* Allow horizontal overflow with scroll instead of clipping */
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  white-space:nowrap;
  min-height:38px;
}
.docengine-statusbar::-webkit-scrollbar{height:4px}
.docengine-statusbar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.docengine-statusbar::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.docengine-statusbar > *{flex-shrink:0}

.docengine-statusbar .sep{
  opacity:.6;color:var(--accent2);
  font-size:8px;
  margin:0 -2px;            /* tighten visual rhythm */
  display:inline-block;
  transform:translateY(-1px);
}
/* Hide low-priority status items as bar narrows */
@media (max-width:1200px){
  .docengine-statusbar .sb-detail{display:none}
}
.docengine-statusbar .st-ok{color:var(--green);font-weight:700}
.docengine-statusbar .st-pending{
  color:var(--orange);font-weight:700;
  animation:pulse 1.5s infinite;
}

/* ════ ZOOM CONTROLS — pinned to right, never shrinks ════════════════ */
.docengine-zoom{
  display:inline-flex;align-items:center;
  border:1px solid var(--border);
  border-radius:8px;overflow:hidden;
  margin-left:auto;          /* push to right */
  background:var(--bg-panel);
  box-shadow:var(--shadow-inset);
  flex-shrink:0;             /* never shrink — zoom must remain visible */
  position:sticky;right:0;   /* stay visible while statusbar scrolls */
  z-index:2;
}
.docengine-zoom button{
  border:none;background:transparent;
  color:var(--muted);
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  padding:5px 11px;cursor:pointer;
  transition:all .15s var(--ease);
  border-right:1px solid var(--border);
  letter-spacing:.04em;
  position:relative;
  flex-shrink:0;
}
.docengine-zoom button:last-child{border-right:none}
.docengine-zoom button:hover{
  background:var(--hover);
  color:var(--text);
}
.docengine-zoom button.active{
  background:var(--grad-accent);
  color:#fff;font-weight:700;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.12);
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}
.docengine-zoom-display{
  font-family:var(--font-mono);
  font-size:11px;font-weight:700;
  color:var(--accent-strong);
  margin:0 8px;min-width:42px;text-align:center;
  letter-spacing:-.01em;
  padding:3px 7px;
  background:var(--accent-dim);
  border-radius:5px;
  border:1px solid var(--accent-edge);
  flex-shrink:0;
  position:sticky;right:0;
}


/* ════ DOCENGINE MOBILE ══════════════════════════════════════════════ */
@media (max-width:900px){
  .docengine-page-wrapper{width:100% !important;height:auto !important;min-height:0}
  .docengine-page{
    width:100%;min-height:0;
    padding:20px 22px;box-shadow:none;
    border-radius:0;transform:none !important;
  }
  .docengine-canvas{padding:0;background:var(--bg-panel);background-image:none}
  .docengine-header{padding:9px 13px;gap:8px}
  .docengine-stage,.docengine-zoom,.docengine-zoom-display{display:none}
  .docengine-page-overlay,.docengine-margin-guides,.docengine-ruler{display:none}
  .docengine-toolbar,.docengine-filebar{
    overflow-x:auto;flex-wrap:nowrap;padding:6px 10px;
  }
  .docengine-filebar .fb-filename{display:none}
  .docengine-filebar .fb-btn span:not(.fb-ico){display:none}
}
@media (max-width:900px) and (pointer:coarse){
  .fb-btn{min-height:44px;padding:9px 14px}
  .tb-btn{min-width:44px !important;min-height:44px !important}
  .tb-sel{min-height:44px;font-size:13px}
  .docengine-theme-btn{width:44px;height:44px}
  .tb-color{width:44px;height:44px}
  .docengine-zoom button{min-height:44px;padding:8px 14px;font-size:12px}
}

/* ════ DOCENGINE PRINT ═══════════════════════════════════════════════ */
@media print{
  @page{size:A4;margin:20mm 15mm 20mm 30mm}
  html,body{background:#fff !important;overflow:visible !important;height:auto !important}
  .docengine-app{height:auto !important;overflow:visible !important}
  .docengine-header,.docengine-filebar,.docengine-toolbar,
  .docengine-ruler,.docengine-statusbar,.docengine-toast,
  .docengine-page-overlay,.docengine-margin-guides{display:none !important}
  .docengine-shell{background:#fff !important}
  .docengine-canvas{
    background:#fff !important;background-image:none !important;
    overflow:visible !important;padding:0 !important;display:block !important;
  }
  .docengine-page-wrapper{width:100% !important;height:auto !important;transform:none !important}
  .docengine-page{
    width:100% !important;min-height:0 !important;
    padding:0 !important;box-shadow:none !important;
    border-radius:0 !important;transform:none !important;
    background:#fff !important;color:#000 !important;
  }
  .docengine-prose{color:#000 !important;background:#fff !important}
  .docengine-prose *{color:inherit}
  .docengine-prose h1,.docengine-prose h2,.docengine-prose h3{break-after:avoid;page-break-after:avoid}
  .docengine-prose table,.docengine-prose img,.docengine-prose blockquote{break-inside:avoid;page-break-inside:avoid}
  .docengine-prose p{orphans:2;widows:2}
}

/* ════════════════════════════════════════════════════════════════════
   FOCUS RINGS — high-contrast, accessible
   ════════════════════════════════════════════════════════════════════ */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
button:focus-visible,.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--accent-soft),0 0 0 1.5px var(--accent);
}

/* ════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  #root::before,body::before{animation:none}
  .flt-bar::before{animation:none;display:none}
  .avatar-ring{animation:none}
}

/* ── ТЕЛЕМЕТРИЯ: левая выдвижная панель + таб-кнопка ──────────────
   Раньше виджет был плавающим в правом нижнем углу. Теперь —
   ag-left-drawer (панель шириной 320px, выезжает слева),
   ag-left-tab   (узкая «вкладка» с пиктограммой и таймером, видна всегда),
   ag-panel      (содержимое — собственно карточка со статами),
   ag-drawer-backdrop (полупрозрачный слой для клика-вне).               */

/* Таб-кнопка на левом краю экрана — единственное, что видно когда drawer закрыт */
.ag-left-tab{
  position:fixed; left:0; top:50%;
  transform:translateY(-50%);
  z-index:9998;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:14px 8px 14px 6px;
  background:linear-gradient(180deg, rgba(92,102,222,.95), rgba(72,82,200,.95));
  color:#fff; border:none;
  border-radius:0 12px 12px 0;
  box-shadow:0 4px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05);
  cursor:pointer;
  font-family:var(--font-sans);
  font-size:11px; font-weight:600;
  letter-spacing:.04em;
  writing-mode:vertical-rl;
  transform-origin:left center;
  transition:transform .22s ease, padding .22s ease, background .2s;
}
.ag-left-tab:hover{
  padding-left:10px;
  background:linear-gradient(180deg, rgba(102,112,232,1), rgba(82,92,210,1));
}
.ag-left-tab.open{
  transform:translateY(-50%) translateX(320px);
}
.ag-left-tab.pulsing{
  animation:agTabPulse 1.6s ease-in-out infinite;
}
@keyframes agTabPulse{
  0%, 100%{ box-shadow:0 4px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05); }
  50%     { box-shadow:0 4px 22px rgba(92,102,222,.9), 0 0 0 2px rgba(92,102,222,.6); }
}
.ag-left-tab .ag-tab-ico{
  writing-mode:horizontal-tb;
  font-size:16px; line-height:1;
}
.ag-left-tab .ag-tab-text{
  white-space:nowrap;
  text-transform:uppercase;
}
.ag-left-tab .ag-tab-badge{
  writing-mode:horizontal-tb;
  background:rgba(0,0,0,.35); color:#fff;
  border-radius:8px;
  padding:2px 7px;
  font-family:var(--font-mono);
  font-size:10px; font-weight:700;
  letter-spacing:0;
  border:1px solid rgba(255,255,255,.18);
}
.ag-left-tab .ag-tab-badge.live{
  background:#10b981; color:#fff;
  border-color:#0e9c70;
  animation:agBadgeBlink 1s ease-in-out infinite;
}
.ag-left-tab .ag-tab-badge small{ font-size:8px; margin-left:1px; opacity:.85; }
@keyframes agBadgeBlink{
  0%, 100%{ opacity:1; }
  50%     { opacity:.65; }
}

/* Сам drawer — едет из левого края */
.ag-left-drawer{
  position:fixed; left:0; top:0;
  width:320px; height:100vh;
  z-index:9997;
  background:rgba(11,17,32,.96);
  border-right:1px solid rgba(92,102,222,.35);
  box-shadow:6px 0 26px rgba(0,0,0,.5);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transform:translateX(-100%);
  transition:transform .26s cubic-bezier(.4,.0,.2,1);
  overflow-y:auto; overflow-x:hidden;
  padding:14px 14px 28px 14px;
}
.ag-left-drawer.open{ transform:translateX(0); }
.ag-left-drawer::-webkit-scrollbar{ width:6px; }
.ag-left-drawer::-webkit-scrollbar-thumb{ background:rgba(92,102,222,.4); border-radius:3px; }

/* Полупрозрачный backdrop для клика-вне */
.ag-drawer-backdrop{
  position:fixed; inset:0;
  z-index:9996;
  background:rgba(0,0,0,.35);
  animation:agFadeBg .18s ease;
}
@keyframes agFadeBg{ from{ opacity:0; } to{ opacity:1; } }

/* ── ag-panel: содержимое (карточка статистики) ─────────────────── */
.ag-panel{
  background:transparent;
  color:#e2e8f0;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.45;
  animation:agFadeIn .22s ease;
}
@keyframes agFadeIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:translateY(0); } }
.ag-panel .ag-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px; padding-bottom:8px;
  border-bottom:1px dashed rgba(92,102,222,.4);
}
.ag-panel .ag-head-title{
  color:#a3a9ff; font-weight:700; font-size:13px; letter-spacing:.01em;
}
.ag-panel .ag-btn{
  width:22px; height:22px; padding:0; border:none; border-radius:5px;
  background:rgba(92,102,222,.18); color:#cbd5e1; cursor:pointer;
  font-size:12px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.ag-panel .ag-btn:hover{ background:#5c66de; color:#fff; }
.ag-panel .ag-row{
  display:flex; justify-content:space-between; gap:16px; margin-bottom:4px;
  color:#cbd5e1;
}
.ag-panel .ag-row > span:last-child{ color:#f1f5f9; font-weight:500; }
.ag-panel .ag-total{
  margin-top:10px; padding-top:8px;
  border-top:1px dashed rgba(92,102,222,.4);
  color:#10b981; font-weight:700; font-size:13px;
}
.ag-panel .ag-total > span:last-child{ color:#10b981; }

/* ── Блок таймеров запроса ──────────────────────────────────────── */
.ag-panel .ag-timer-block{
  background:linear-gradient(140deg, rgba(92,102,222,.10), rgba(92,102,222,.03));
  border:1px solid rgba(92,102,222,.30);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:12px;
}
.ag-panel .ag-timer-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:5px;
}
.ag-panel .ag-timer-row:last-child{ margin-bottom:0; }
.ag-panel .ag-timer-label{
  display:inline-flex; align-items:center; gap:6px;
  color:#cbd5e1; font-size:11px; font-weight:500;
}
.ag-panel .ag-timer-ico{ font-size:13px; }
.ag-panel .ag-timer-val{
  color:#f1f5f9; font-family:var(--font-mono); font-weight:700; font-size:15px;
  letter-spacing:.01em;
}
.ag-panel .ag-timer-val.live{
  color:#10b981;
  text-shadow:0 0 12px rgba(16,185,129,.6);
}
.ag-panel .ag-timer-val.secondary{ color:#94a3b8; font-size:13px; font-weight:600; }
.ag-panel .ag-timer-val small{ font-size:10px; font-weight:500; opacity:.75; margin-left:2px; }
.ag-panel .ag-timer-meta{
  margin-top:6px; padding-top:6px;
  border-top:1px dashed rgba(92,102,222,.25);
  color:#64748b; font-size:10px;
}
.ag-panel .ag-live-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#10b981; margin-left:4px;
  box-shadow:0 0 8px rgba(16,185,129,.85);
  animation:agLiveDot 1s ease-in-out infinite;
}
@keyframes agLiveDot{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%     { opacity:.4; transform:scale(.75); }
}

/* Пустое состояние (нет ни таймеров, ни статистики) */
.ag-empty{
  padding:30px 14px;
  text-align:center;
  color:#94a3b8;
  font-family:var(--font-sans);
}
.ag-empty .ag-empty-ico{ font-size:38px; opacity:.6; margin-bottom:10px; }
.ag-empty .ag-empty-title{
  color:#cbd5e1; font-weight:600; font-size:14px; margin-bottom:6px;
}
.ag-empty .ag-empty-hint{
  font-size:11.5px; line-height:1.5;
}

/* Per-model breakdown */
.ag-panel .ag-breakdown-toggle{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:8px; padding:6px 10px; cursor:pointer;
  background:rgba(92,102,222,.10); border-radius:7px;
  color:#cbd5e1; font-size:11.5px; font-weight:600;
  transition:background .15s;
  user-select:none;
}
.ag-panel .ag-breakdown-toggle:hover{ background:rgba(92,102,222,.20); }
.ag-panel .ag-breakdown{
  margin-top:4px; margin-bottom:6px;
  padding:4px 0;
  display:flex; flex-direction:column; gap:5px;
}
.ag-panel .ag-model-row{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:5px 7px; border-radius:5px;
  background:rgba(15,23,42,.55);
  border-left:2px solid rgba(92,102,222,.4);
}
.ag-panel .ag-model-name{
  display:flex; align-items:center; gap:6px;
  color:#e2e8f0; font-size:10.5px; font-weight:500;
  min-width:0; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ag-panel .ag-tier-badge{
  color:#fff; padding:1px 5px; border-radius:3px;
  font-size:8.5px; font-weight:700; letter-spacing:.02em;
  white-space:nowrap; flex-shrink:0;
}
.ag-panel .ag-model-stats{
  display:flex; flex-direction:column; align-items:flex-end; gap:1px;
  font-size:10px; color:#94a3b8;
}
.ag-panel .ag-model-cost{
  color:#10b981; font-weight:700; font-size:11px;
}

@media (max-width:640px){
  .ag-left-drawer{ width:88vw; }
  .ag-left-tab.open{ transform:translateY(-50%) translateX(88vw); }
  .ag-panel{ font-size:11px; }
  .ag-panel .ag-tier-badge{ font-size:8px; padding:1px 4px; }
  .ag-panel .ag-model-name{ font-size:10px; }
}

/* ── Статус-иконки пунктов юридического заключения ───────────────────
   Заменяют эмодзи-кружки 🔴/🟡/🔵/🟢 в начале заголовков «Замечания по
   пунктам». Вставляются renderMarkdown() через STATUS_ICONS. */
.ag-stat-ico{
  display:inline-block;
  width:1.05em; height:1.05em;
  vertical-align:-0.16em;
  margin-right:.38em;
  flex-shrink:0;
}
.ai-md h1 .ag-stat-ico,
.ai-md h2 .ag-stat-ico,
.ai-md h3 .ag-stat-ico,
.ai-md h4 .ag-stat-ico{ vertical-align:-0.12em; }

/* ── Сравнение редакций (CompareMode) ────────────────────────────────
   UI семантического сравнения двух версий документа.
   Цвета цельны: красный — риск, жёлтый — сущ. изменение, зелёный — добавлено,
   серый — удалено, нейтральный — стилистика. */
.cmp-root{ display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-1); }
.cmp-intro{ text-align:center; padding:var(--s-2) 0 var(--s-1); }
.cmp-title{ font-family:var(--font-display); font-size:var(--text-xl); margin:0 0 var(--s-1); color:var(--text); font-weight:500; letter-spacing:-.01em; }
.cmp-sub{ color:var(--muted); font-size:var(--text-sm); margin:0 auto; max-width:540px; line-height:1.5; }

.cmp-inputs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.cmp-input-col{ display:flex; flex-direction:column; gap:var(--s-1); }
.cmp-input-head{ display:flex; justify-content:space-between; align-items:center; }
.cmp-input-label{ font-weight:600; font-size:var(--text-sm); color:var(--text); }
.cmp-input-meta{ font-size:11px; color:var(--muted); font-family:var(--font-mono); }
.cmp-textarea{
  min-height:220px; max-height:380px; resize:vertical;
  padding:var(--s-2); font-family:var(--font-mono); font-size:12.5px; line-height:1.55;
  background:var(--bg-app); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  transition:border-color .15s, box-shadow .15s;
}
.cmp-textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-dim); }
.cmp-input-foot{ display:flex; gap:var(--s-1); align-items:center; }
.cmp-file-btn{
  display:inline-block; padding:6px 12px; font-size:12px;
  border:1px solid var(--border); border-radius:var(--radius-xs);
  cursor:pointer; background:var(--bg-panel); color:var(--text);
  transition:border-color .15s, color .15s;
}
.cmp-file-btn:hover{ border-color:var(--accent); color:var(--accent-strong); }
.cmp-clear-btn{
  padding:6px 12px; font-size:12px;
  border:1px solid var(--border); border-radius:var(--radius-xs);
  cursor:pointer; background:transparent; color:var(--muted);
}
.cmp-clear-btn:hover{ color:var(--text); border-color:var(--text-muted); }

.cmp-actions{ display:flex; align-items:center; gap:var(--s-2); justify-content:center; padding:var(--s-2) 0; flex-wrap:wrap; }
.cmp-run-btn{
  padding:11px 28px;
  background:linear-gradient(135deg,var(--accent),var(--accent-strong));
  color:#fff; border:none; border-radius:var(--radius-pill);
  font-weight:700; font-size:14px; letter-spacing:.01em; cursor:pointer;
  box-shadow:0 2px 12px var(--accent-glow);
  transition:transform .15s, box-shadow .15s, opacity .15s;
}
.cmp-run-btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 4px 18px var(--accent-glow); }
.cmp-run-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.cmp-hint{ font-size:11.5px; color:var(--muted); }

.cmp-toolbar{ display:flex; gap:var(--s-2); align-items:center; flex-wrap:wrap; padding:var(--s-1) 0; }
.cmp-new-btn{
  padding:7px 14px; font-size:12px;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:transparent; color:var(--text); cursor:pointer;
  transition:border-color .15s, color .15s;
}
.cmp-new-btn:hover{ border-color:var(--accent); color:var(--accent-strong); }
.cmp-stop-btn{
  padding:7px 14px; font-size:12px;
  border:1px solid #e5484d; border-radius:var(--radius-sm);
  background:transparent; color:#e5484d; cursor:pointer;
  transition:background .15s;
}
.cmp-stop-btn:hover{ background:rgba(229,72,77,.10); }
.cmp-stats{ font-size:12px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; align-items:center; }
.cmp-stats b{ color:var(--text); }

.cmp-steps{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  padding:9px 12px; background:var(--bg-app);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:12px;
}
.cmp-step{ display:inline-flex; align-items:center; gap:6px; color:var(--muted); }
.cmp-step-dot{ width:7px; height:7px; border-radius:50%; background:#94a3b8; flex-shrink:0; }
.cmp-step--loading .cmp-step-dot{ background:#3b82f6; animation:cmpPulse 1s infinite; }
.cmp-step--success .cmp-step-dot{ background:#30a46c; }
.cmp-step--warning .cmp-step-dot{ background:#f5a623; }
.cmp-step--error   .cmp-step-dot{ background:#e5484d; }
.cmp-step--success .cmp-step-text,
.cmp-step--warning .cmp-step-text,
.cmp-step--error   .cmp-step-text{ color:var(--text); }
@keyframes cmpPulse{ 0%,100%{opacity:1} 50%{opacity:.4} }

.cmp-summary{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-app); padding:var(--s-2) var(--s-2h);
}
.cmp-summary-head{ font-weight:700; font-size:13px; color:var(--accent-strong); margin-bottom:6px; letter-spacing:.03em; text-transform:uppercase; }
.cmp-summary-body{ font-size:13.5px; line-height:1.6; color:var(--text); }
.cmp-summary-body > :first-child{ margin-top:0; }
.cmp-summary-body > :last-child{ margin-bottom:0; }

/* 2026-05-31 UX-rework: Executive Summary — главный блок выдачи.
   Крупнее, ярче рамка, больше воздуха внутри. Юрист видит вывод
   Финального Судьи без скролла. */
.cmp-summary.ad-summary-prominent{
  padding: var(--s-3) var(--s-4);
  background: var(--bg-panel);
  border: 1px solid var(--accent-soft, var(--border));
  border-left: 3px solid var(--accent, #10b981);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ad-summary-prominent .cmp-summary-head{
  font-size: 14px;
  margin-bottom: 10px;
}
.ad-summary-prominent .cmp-summary-body{
  font-size: 14.5px;
  line-height: 1.65;
}
.ad-summary-prominent .cmp-summary-body h1,
.ad-summary-prominent .cmp-summary-body h2,
.ad-summary-prominent .cmp-summary-body h3{
  font-size: 15px; margin-top: 14px; margin-bottom: 6px; color: var(--text); font-weight: 700;
}
.ad-summary-prominent .cmp-summary-body p{ margin: 6px 0; }
.ad-summary-prominent .cmp-summary-body ul,
.ad-summary-prominent .cmp-summary-body ol{ margin: 6px 0; padding-left: 22px; }

.cmp-error{
  padding:10px 14px; background:#fce8e8;
  border:1px solid #e5484d; border-radius:var(--radius-sm);
  color:#9b1c1c; font-size:13px;
}
.cmp-empty{ padding:30px; text-align:center; color:var(--muted); font-size:13px; }

/* Side-by-side: две колонки одинаковой ширины */
.cmp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.cmp-grid-head{
  font-weight:700; font-size:11px; padding:6px 10px;
  color:var(--muted); letter-spacing:.08em; text-transform:uppercase;
  border-bottom:1px solid var(--border);
}
.cmp-side{
  padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer;
  transition:transform .12s, box-shadow .12s, border-color .12s;
  font-size:12.5px; line-height:1.5; border:1px solid transparent;
  position:relative;
}
.cmp-side:hover{ transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.cmp-pair-num{ font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-bottom:5px; letter-spacing:.02em; }
.cmp-pair-text{ white-space:pre-wrap; word-break:break-word; }
.cmp-pair-empty{ color:var(--muted); font-style:italic; padding:8px 0; }
.cmp-pair--active{ box-shadow:0 0 0 2px var(--accent); }

/* Цветовая подсветка категорий (light theme) */
.cmp-pair--risk{        background:#fef0f0; border-color:#fda4a4; }
.cmp-pair--substantial{ background:#fff8e6; border-color:#fbd373; }
.cmp-pair--added{       background:#eafbf2; border-color:#7ed4a4; }
.cmp-pair--removed{     background:#f1f1f3; border-color:#c4c4cc; opacity:.85; }
.cmp-pair--stable{      background:var(--bg-app); border-color:var(--border); }

.cmp-risk-card{
  margin-top:10px; padding:8px 11px;
  background:rgba(229,72,77,.10);
  border-left:3px solid #e5484d;
  border-radius:0 var(--radius-xs) var(--radius-xs) 0;
  font-size:12px; color:#9b1c1c;
}
.cmp-risk-head{ font-weight:700; margin-bottom:3px; }
.cmp-risk-body{ line-height:1.45; }

/* Dark mode adjustments */
body.dk .cmp-pair--risk{        background:rgba(229,72,77,.12); border-color:#e5484d; }
body.dk .cmp-pair--substantial{ background:rgba(245,166,35,.10); border-color:#f5a623; }
body.dk .cmp-pair--added{       background:rgba(48,164,108,.10); border-color:#30a46c; }
body.dk .cmp-pair--removed{     background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); }
body.dk .cmp-error{ background:rgba(229,72,77,.10); color:#fda4a4; border-color:rgba(229,72,77,.4); }
body.dk .cmp-risk-card{ background:rgba(229,72,77,.16); color:#fda4a4; }

/* Адаптив: на узком экране — колонки одна под другой */
@media (max-width:900px){
  .cmp-inputs{ grid-template-columns:1fr; }
  .cmp-grid{ grid-template-columns:1fr; }
  .cmp-grid-head--old{ margin-top:0; }
  .cmp-grid-head--new{ margin-top:12px; }
}

/* ── Проверка документа (Document-Grounded Analysis Pipeline) ──────── */
.analyze-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-family: var(--font-sans);
}
.analyze-row {
  border-bottom: 1px solid var(--border);
  transition: background-color 0.15s var(--ease);
  cursor: pointer;
}
.analyze-row:last-child {
  border-bottom: none;
}
.analyze-row:hover {
  background: var(--hover);
}
.analyze-row.expanded {
  background: rgba(92, 102, 222, 0.04);
}
body.dk .analyze-row.expanded {
  background: rgba(92, 102, 222, 0.12);
}
.analyze-cell {
  padding: 8px 12px;
  line-height: 1.3;
  font-size: 13px;
  color: var(--text);
  vertical-align: middle;
}
.analyze-cell-icon {
  width: 24px;
  text-align: center;
  font-size: 14px;
}
.analyze-cell-num {
  font-weight: 600;
  white-space: nowrap;
  width: 80px;
  color: var(--text-main);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.analyze-cell-verdict {
  color: var(--text-muted);
}
.analyze-accordion-content {
  display: none;
  padding: 12px 12px 12px 48px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
body.dk .analyze-accordion-content {
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
}
.analyze-row.expanded + .analyze-accordion-content {
  display: block;
  animation: agFadeIn 0.2s var(--ease);
}
.analyze-accordion-title {
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Бейдж индекса правовой чистоты */
.purity-index-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  margin-bottom: 16px;
}
.purity-index-badge.green {
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.05);
}
.purity-index-badge.orange {
  color: #f5a623;
  border-color: rgba(245, 166, 35, 0.4);
  background: rgba(245, 166, 35, 0.05);
}
.purity-index-badge.red {
  color: #e5484d;
  border-color: rgba(229, 72, 77, 0.4);
  background: rgba(229, 72, 77, 0.05);
}

/* ═══════════ ANALYZE DOCS MODE (2026-05-30) ═══════════
   Drag&Drop вкладка "Анализ Документов" — заменяет CompareMode.
   1 файл → /api/analyze-document. 2 файла → /api/compare. */
.ad-root{ display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-1); animation:fadeIn .25s ease; }

/* ── Двух-колоночная зона drop slots ───────────────────────────── */
.ad-slots{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3);
  margin-top:var(--s-2);
}
.ad-slot{
  position:relative; min-height:180px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:var(--s-3); gap:var(--s-1h);
  background:var(--bg-app); border:2px dashed var(--border);
  border-radius:var(--radius);
  cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.ad-slot:hover{ border-color:var(--accent); background:var(--accent-dim); }
.ad-slot--drag{
  border-color:var(--accent); background:var(--accent-dim);
  transform:scale(1.01); box-shadow:0 4px 18px var(--accent-glow);
}
.ad-slot--loading{ cursor:wait; border-style:solid; border-color:var(--accent); background:var(--accent-dim); }
.ad-slot--ready{
  cursor:default; border-style:solid; border-color:var(--accent);
  background:linear-gradient(135deg, var(--accent-dim), var(--bg-panel));
}
.ad-slot--error{ cursor:pointer; border-style:solid; border-color:#e5484d; background:rgba(229,72,77,.06); }

.ad-slot-empty,
.ad-slot-state{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-1);
  width:100%; max-width:240px;
}
.ad-slot-icon{ display:inline-flex; align-items:center; justify-content:center; }
.ad-slot-label{ font-family:var(--font-sans); font-weight:600; font-size:var(--text-sm); color:var(--text); }
.ad-slot-hint{ font-size:var(--text-xs); color:var(--muted); line-height:1.4; }
.ad-slot-name{
  font-family:var(--font-sans); font-weight:600; font-size:var(--text-sm); color:var(--text);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ad-slot-meta{ font-size:var(--text-xs); color:var(--muted); font-family:var(--font-mono); }
.ad-slot-spin{ display:inline-flex; animation:spin 1s linear infinite; color:var(--accent); }
.ad-slot-remove{
  position:absolute; top:8px; right:8px;
  width:22px; height:22px; padding:0;
  border:none; background:transparent; color:var(--muted);
  border-radius:var(--radius-sm); cursor:pointer;
  font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:color .15s, background .15s;
}
.ad-slot-remove:hover{ background:rgba(229,72,77,.12); color:#e5484d; }

/* ── Индикатор активного режима (audit/compare/none) ──────────── */
.ad-mode-banner{
  padding:var(--s-2) var(--s-3);
  border-radius:var(--radius-sm);
  font-size:var(--text-sm); font-family:var(--font-sans);
  text-align:center;
  border:1px solid var(--border);
  background:var(--bg-app); color:var(--muted);
  transition:background .15s, color .15s, border-color .15s;
}
.ad-mode-banner--audit{
  background:var(--accent-dim); color:var(--accent-strong, var(--accent));
  border-color:var(--accent);
}
.ad-mode-banner--compare{
  background:rgba(245,166,35,.08); color:#f5a623;
  border-color:rgba(245,166,35,.4);
}

/* ── Toolbar в running/done ────────────────────────────────────── */
.ad-purity-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:rgba(16,185,129,.08); color:#10b981;
  border:1px solid rgba(16,185,129,.3);
  font-size:var(--text-sm); font-family:var(--font-sans);
}

/* 2026-06-01: кнопка открытия Debug-архива (постоянная, в toolbar) */
.ad-trace-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:6px;
  background: var(--bg-panel); color: var(--text);
  border: 1px solid var(--border);
  font-size: var(--text-sm); font-family: var(--font-sans);
  text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.ad-trace-btn:hover{
  background: var(--hover);
  border-color: var(--accent, #10b981);
  color: var(--accent, #10b981);
}
.ad-trace-btn:active{ transform: translateY(1px); }
/* IDLE-вариант: справа от заголовка "Анализ документов", чуть мельче */
.ad-trace-btn--idle{
  font-size: 12.5px;
  padding: 3px 10px;
  margin-top: 6px;
  align-self: flex-start;
}

/* ── 2026-06-01: TraceArchiveModal — Debug-архив ─────────────────── */
.trace-modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: traceFadeIn .12s ease;
}
@keyframes traceFadeIn{ from{opacity:0;} to{opacity:1;} }

.trace-modal{
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%; max-width: 920px;
  max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  font-family: var(--font-sans);
  overflow: hidden;
  animation: traceSlideIn .18s ease;
}
@keyframes traceSlideIn{
  from{ transform: translateY(8px); opacity: 0; }
  to  { transform: translateY(0);    opacity: 1; }
}

.trace-modal-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-app);
}
.trace-modal-title{
  font-size: 15px; font-weight: 700; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
}
.trace-modal-count{
  font-size: 11px; font-family: var(--font-mono);
  color: var(--muted);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 10px;
}
.trace-modal-actions{ display: flex; align-items: center; gap: 8px; }
.trace-modal-refresh{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: var(--bg-panel); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer; font-size: 12.5px;
  font-family: var(--font-sans);
  transition: background .12s, border-color .12s;
}
.trace-modal-refresh:hover:not(:disabled){
  background: var(--hover);
  border-color: var(--accent, #10b981);
}
.trace-modal-refresh:disabled{ opacity: 0.6; cursor: default; }
.trace-modal-close{
  background: transparent; border: none;
  color: var(--muted);
  font-size: 18px; line-height: 1;
  width: 28px; height: 28px;
  border-radius: 4px; cursor: pointer;
  transition: background .12s, color .12s;
}
.trace-modal-close:hover{ background: var(--hover); color: var(--text); }

.trace-modal-toolbar{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border);
}
.trace-modal-filter{
  flex: 1;
  padding: 6px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 12.5px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color .12s;
}
.trace-modal-filter:focus{ border-color: var(--accent, #10b981); }
.trace-modal-hint{
  font-size: 11px; color: var(--muted);
  white-space: nowrap;
}

.trace-modal-body{
  flex: 1; overflow-y: auto;
  padding: 0;
}

.trace-modal-empty,
.trace-modal-error{
  padding: 24px 18px; text-align: center;
  color: var(--muted); font-size: 13px;
}
.trace-modal-error{ color: #e5484d; }

.trace-modal-table{
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-family: var(--font-sans);
  font-size: 12.5px;
  table-layout: fixed;
}
.trace-modal-table thead th{
  position: sticky; top: 0;
  text-align: left;
  padding: 8px 12px;
  background: var(--bg-app);
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
}
.trace-modal-table tbody td{
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
}
.trace-modal-table tbody tr:last-child td{ border-bottom: none; }
.trace-modal-table tbody tr:hover{ background: var(--hover); }

.trace-cell-date{
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap;
}
.trace-cell-name{
  font-family: var(--font-mono);
  font-size: 11.5px;
  word-break: break-all;
}
.trace-cell-size{
  font-family: var(--font-mono);
  font-size: 11.5px; color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.trace-cell-dl{ text-align: center; }
.trace-dl-link{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  text-decoration: none;
  font-size: 11.5px;
  transition: background .12s, border-color .12s, color .12s;
}
.trace-dl-link:hover{
  background: var(--hover);
  border-color: var(--accent, #10b981);
  color: var(--accent, #10b981);
}

/* ── Audit-таблица (Triage + Ищейки результаты) ───────────────── */
/* 2026-05-31 UX-rework: компактные строки, 2 колонки вместо 3,
   справа стек "вердикт сверху / обоснование снизу". Никаких лишних
   пустот: vertical-align top + reset table-layout. */
.ad-table-wrap{ width:100%; overflow-x:auto; }
.ad-table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-family:var(--font-sans); font-size:var(--text-sm);
  background:var(--bg-panel);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  overflow:hidden;
  table-layout: fixed;     /* фикс: ширины колонок строго по th, не растягиваются под контент */
}
.ad-table thead th{
  text-align:left; padding:var(--s-2) var(--s-2h);
  font-weight:600; color:var(--muted); font-size:var(--text-xs);
  text-transform:uppercase; letter-spacing:.04em;
  background:var(--bg-app); border-bottom:1px solid var(--border);
}
.ad-table tbody td{
  padding:var(--s-2) var(--s-2h); vertical-align:top;
  border-bottom:1px solid var(--border);
  line-height:1.5;
  height: auto;             /* фикс: явно убираем любую унаследованную min-height */
}
.ad-table tbody tr{ height: auto; }
.ad-table tbody tr:last-child td{ border-bottom:none; }

/* Компактный вариант (для accordion-разбора) — меньше padding */
.ad-table--compact tbody td{ padding: 8px 10px; line-height: 1.45; }
.ad-table--compact thead th{ padding: 8px 10px; }

.ad-cell-num{ font-family:var(--font-mono); font-size:12px; color:var(--muted); white-space:nowrap; word-break: break-word; }

/* Новый стек в правой колонке: вердикт сверху, обоснование снизу */
.ad-cell-content{ display: flex; flex-direction: column; gap: 4px; }
.ad-verdict{ font-weight:600; color: var(--text); font-size: var(--text-sm); line-height: 1.4; }
.ad-rationale{ color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* Цветовая кодировка строк */
.ad-row--ok{ background:transparent; }
.ad-row--warning{ background:rgba(245,166,35,.04); }
.ad-row--warning .ad-verdict{ color:#c87f15; }
.ad-row--critical{ background:rgba(229,72,77,.05); }
.ad-row--critical .ad-verdict{ color:#e5484d; }

/* Legacy-классы (для compare-view и старых рендеров) — оставлены для совместимости */
.ad-cell-verdict{ font-weight:600; }
.ad-cell-rationale{ color:var(--muted); }
.ad-row--warning .ad-cell-verdict{ color:#f5a623; }
.ad-row--critical .ad-cell-verdict{ color:#e5484d; }
.ad-step-reason{ color:var(--muted); font-size:11px; margin-left:6px; }

/* ── Sources block (использованные нормы НПА) ────────────────── */
.ad-sources{
  padding:var(--s-2h) var(--s-3);
  background:var(--bg-panel); border:1px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:var(--text-sm);
}
.ad-sources-head{ font-weight:600; color:var(--text); margin-bottom:var(--s-1h); }
.ad-sources-list{ margin:0; padding:8px 0 8px 22px; color:var(--muted); font-size: 12.5px; }
.ad-sources-list li{ margin:3px 0; }

/* ── 2026-05-31: Accordion <details>/<summary> для свёрнутых блоков ── */
.ad-details{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-panel);
  overflow: hidden;
  transition: border-color .15s;
}
.ad-details[open]{ border-color: var(--accent-soft, var(--border)); }
.ad-details > summary.ad-details-summary{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--bg-app);
  user-select: none;
  list-style: none;
  transition: background .12s;
}
.ad-details > summary.ad-details-summary::-webkit-details-marker{ display: none; }
.ad-details > summary.ad-details-summary::marker{ content: ''; }
.ad-details > summary.ad-details-summary:hover{ background: var(--hover); }
.ad-details-icon{ font-size: 14px; }
.ad-details-title{ font-weight: 600; }
.ad-details-count{
  font-size: 11px; font-family: var(--font-mono);
  color: var(--muted);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: 2px;
}
.ad-details-hint{
  font-size: 11px; color: var(--muted);
  margin-left: auto;
  font-style: italic;
}
.ad-details-chevron{
  font-size: 12px; color: var(--muted);
  transition: transform .18s ease;
  margin-left: 4px;
}
.ad-details[open] > summary .ad-details-chevron{ transform: rotate(180deg); }
.ad-details[open] > summary{ border-bottom: 1px solid var(--border); }

/* Если accordion свёрнут — hint виден; если открыт — скрываем */
.ad-details[open] > summary .ad-details-hint{ display: none; }

/* Minor вариант — для секции "Использованные нормы" */
.ad-details--minor > summary.ad-details-summary{ font-size: 12.5px; padding: 8px 12px; }
.ad-details--minor .ad-sources-list{ padding: 8px 16px 10px 32px; }

/* Внутреннее тело accordion: seg-чипы сверху, таблица снизу */
.ad-details-body{
  display: flex; flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2);
}
/* Чипы прогресса внутри accordion — отличаются от верхней панели:
   меньше шрифт, плотнее, фон под цвет accordion-body */
.ad-seg-steps{
  padding: 8px 10px;
  background: var(--bg-app);
  font-size: 11.5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  max-height: 200px; overflow-y: auto;   /* много сегментов → скроллим внутри */
}
.ad-seg-steps .cmp-step{ font-size: 11.5px; }
.ad-seg-steps .cmp-step-text{ font-size: 11.5px; }

/* Live-индикатор в summary accordion'а пока идёт стрим */
.ad-details-live{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: #10b981; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  margin-left: 4px;
}
.ad-details-live-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: #10b981;
  animation: adLivePulse 1.1s infinite ease-in-out;
}
@keyframes adLivePulse{
  0%,100%{ opacity: 0.4; transform: scale(0.85); }
  50%   { opacity: 1;   transform: scale(1.15); }
}

/* ── Telemetry badges (Live: время / токены / стоимость / calls) ─ */
/* 2026-05-30: возвращаем счётчики после рефакторинга под drag&drop.
   Минималистичный фирменный стиль: тонкий border-muted, font-mono,
   accent-glow на hover. .ad-tele-badge--live пульсирует пока stream идёт. */
.ad-tele-row{
  display:inline-flex; align-items:center; gap:var(--s-1h);
  margin-left:auto; flex-wrap:wrap;
}
.ad-tele-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-panel);
  font-family:var(--font-mono); font-size:11px; line-height:1;
  color:var(--text); font-weight:500;
  white-space:nowrap;
  transition:border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.ad-tele-badge:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-dim);
}
.ad-tele-badge--live{
  border-color:var(--accent);
  background:var(--accent-dim);
  color:var(--accent-strong, var(--accent));
  animation:ad-tele-pulse 1.4s ease-in-out infinite;
}
.ad-tele-badge--cost{
  color:#10b981;
  border-color:rgba(16,185,129,.3);
  background:rgba(16,185,129,.05);
}
.ad-tele-badge--cost:hover{
  border-color:#10b981;
  box-shadow:0 0 0 2px rgba(16,185,129,.15);
}
.ad-tele-badge--ghost{
  color:var(--muted);
  background:transparent;
}
.ad-tele-ico{ font-size:11px; opacity:.85; }
.ad-tele-val{ font-weight:600; letter-spacing:.01em; }
.ad-tele-unit{ color:var(--muted); font-size:10px; font-weight:500; }
.ad-tele-sep{ color:var(--muted); opacity:.6; padding:0 1px; }

@keyframes ad-tele-pulse{
  0%, 100% { box-shadow:0 0 0 0 var(--accent-dim); }
  50%      { box-shadow:0 0 0 4px var(--accent-dim); }
}

/* ── Mobile / narrow panel adapt ─────────────────────────────── */
@media (max-width: 720px){
  .ad-slots{ grid-template-columns:1fr; }
  .ad-tele-row{ width:100%; margin-left:0; margin-top:var(--s-1h); }
  .ad-tele-badge{ font-size:10px; padding:2px 7px; }
}