:root {
  /* --- Каноническая палитра (CRM / SaaS) --- */
  --bg-main: #f5f7fa;
  --bg-panel: #ffffff;
  --bg-chat: #e5ddd5;
  --text-main: #1f2937;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;

  /* --- Расширенные поверхности и текст --- */
  --text-strong: #0b1220;
  --text-on-accent: #ffffff;
  --bg-work: #e8edf0;
  --bg-muted: #eef2f5;
  --bg-nav: #f4faf7;
  --bg-elevated: #ffffff;
  --bg-placeholder: #fafcfc;
  --bg-avatar: #e8ecef;
  --topbar-icon-bg: #f8fafc;
  --topbar-icon-hover-bg: var(--accent-soft);
  --btn-hover-border: rgba(74, 124, 98, 0.32);
  --shadow-ambient: rgba(15, 23, 42, 0.07);
  --shadow-ambient-lg: rgba(15, 23, 42, 0.11);
  --shadow-green-tint: rgba(42, 95, 72, 0.07);
  --shadow-chat: rgba(42, 95, 72, 0.08);
  --overlay-backdrop: rgba(15, 23, 42, 0.32);
  --link-blue: #2b95e8;
  --link-blue-600: #2481cc;
  --danger: #b42318;
  --danger-text: #8b1a1a;
  --online-dot: #3cb371;
  --focus-ring: rgba(46, 90, 62, 0.55);

  /* Чат: холст и оверлеи поверх тайла */
  --chat-canvas-top: #efe8df;
  --chat-canvas-mid: var(--bg-chat);
  --chat-canvas-bottom: #cec4b8;
  --chat-canvas-base: #d8cfc4;
  --chat-canvas-hi: var(--chat-canvas-top);
  --chat-canvas-lo: var(--chat-canvas-bottom);
  --chat-bg-image: url("/assets/chat-bg.svg");
  --chat-pattern-overlay: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.38) 0%,
    rgba(255, 255, 255, 0.12) 48%,
    rgba(0, 0, 0, 0.04) 100%
  );
  --chat-after-overlay:
    radial-gradient(ellipse 95% 45% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 52%),
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(0, 0, 0, 0.06), transparent 55%);
  --chat-empty-color: rgba(90, 108, 100, 0.82);

  --bubble-shadow-in:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 1px 2px rgba(46, 90, 62, 0.07),
    0 5px 14px rgba(46, 90, 62, 0.06);
  --bubble-shadow-out:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 1px 2px rgba(42, 88, 58, 0.09),
    0 5px 16px rgba(42, 88, 58, 0.07);

  --msg-text-in: #1f2937;
  --msg-text-out: #132018;
  --msg-time-in: #8aa399;
  --msg-time-out: #6f9a82;
  --msg-ticks-sent: #9aa8a0;
  --msg-ticks-read: #34a4e8;
  --msg-name-out: rgba(198, 190, 218, 0.85);

  --msg-fwd-avatar-bg: linear-gradient(145deg, #f0fdf4, #e8f5ee);
  --msg-fwd-avatar-wrap-bg: linear-gradient(145deg, rgba(232, 242, 236, 0.95), rgba(220, 232, 226, 0.98));
  --msg-fwd-avatar-wrap-ring: rgba(74, 124, 98, 0.12);
  --msg-fwd-avatar-ph: #4d7c62;
  --msg-fwd-label: #5b9a7a;
  --msg-fwd-name: #2f6b4e;
  --msg-fwd-name-out: #25603f;
  --msg-native-fwd-bg: #ffffff;
  --msg-native-fwd-bg-out: #ecfdf5;
  --msg-native-fwd-line: rgba(0, 0, 0, 0.06);
  --msg-reply-text: #374151;
  --msg-fwd-quote-bg: rgba(17, 24, 39, 0.05);
  --msg-fwd-quote-text: #6b7280;
  --msg-forward-meta: #6a8f7e;
  --msg-forward-label: #5a9a82;
  --msg-forward-name: #3d7a5c;
  --msg-forward-name-out: #2f6b4e;

  /* Инфо-панель чата (glass) */
  --info-panel-bg: linear-gradient(168deg, rgba(255, 255, 255, 0.86), rgba(228, 241, 252, 0.72));
  --info-panel-head-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(232, 244, 255, 0.35));
  --info-panel-participants-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(225, 242, 255, 0.22));
  --info-panel-close-hover: rgba(51, 167, 255, 0.12);

  /* Шапка переписки */
  --tg-head-border: rgba(0, 0, 0, 0.06);
  --tg-head-inset: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
  --tg-head-icon: #6a7a72;
  --tg-head-icon-hover-bg: rgba(0, 0, 0, 0.05);
  --tg-head-avatar-bg: linear-gradient(145deg, #e8f2ec, #d4e8dc);

  /* Скроллбар чата */
  --scrollbar-thumb: linear-gradient(180deg, rgba(88, 130, 108, 0.38), rgba(62, 98, 78, 0.48));
  --scrollbar-track-border: rgba(255, 255, 255, 0.55);

  --input-bg: var(--bg-placeholder);
  --input-bg-readonly: #f0f5f2;
  --input-focus-border: rgba(74, 143, 111, 0.45);
  --input-focus-ring: rgba(74, 143, 111, 0.12);
  --chat-search-bar-bg: #f3f6f4;
  --chat-search-border: rgba(0, 0, 0, 0.06);
  --chat-search-input-border: rgba(0, 0, 0, 0.08);
  --chat-pinned-label: #6b5a9e;
  --chat-pinned-unpin-bg: rgba(255, 255, 255, 0.65);
  --chat-date-pill-text: #ffffff;
  --chat-date-pill-bg: rgba(58, 92, 72, 0.34);
  --select-ring-bg: rgba(255, 255, 255, 0.92);
  --select-ring-border: rgba(0, 0, 0, 0.12);
  --select-check-mark: #ffffff;

  --composer-float-bg: #ffffff;
  --composer-float-border: rgba(0, 0, 0, 0.07);
  --composer-float-shadow:
    0 10px 32px rgba(0, 0, 0, 0.1),
    0 3px 10px rgba(42, 95, 72, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.98) inset;
  --composer-float-focus-shadow: 0 6px 22px rgba(42, 95, 72, 0.14), 0 0 0 2px rgba(74, 143, 111, 0.1);
  --composer-field-bg: rgba(244, 247, 245, 0.65);
  --composer-field-focus-bg: rgba(255, 255, 255, 0.9);
  --composer-icon-muted: #7a8f84;
  --composer-emoji-hover-bg: rgba(74, 143, 111, 0.08);
  --chat-pending-bg: #fafdfb;
  --chat-pending-border-messenger: rgba(255, 255, 255, 0.12);
  --chat-upload-gradient: linear-gradient(180deg, #eef6f1, #fafdfb);
  --pending-chip-btn-bg: rgba(255, 255, 255, 0.7);
  --voice-rec-time: #6a2a26;
  --voice-rec-cancel-bg: #ffffff;
  --voice-rec-cancel-text: #7a3028;
  --voice-rec-hint: #7a4a44;
  --emoji-pop-bg: rgba(255, 255, 255, 0.98);
  --emoji-pop-border: rgba(0, 0, 0, 0.08);
  --emoji-pop-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  --emoji-pop-tabs-border: rgba(0, 0, 0, 0.06);
  --chat-edit-modal-bg: #ffffff;
  --chat-edit-modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  --chat-edit-input-border: rgba(0, 0, 0, 0.1);
  --chat-edit-btn-secondary: #f4f7f5;
  --chat-hint-bg: #fafdfb;
  --lightbox-close-fg: #ffffff;
  --scroll-down-bg: #ffffff;
  --scroll-down-hover: #f4f7f5;
  --scroll-down-fg: #5a6b62;
  --forward-modal-bg: #ffffff;
  --forward-modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);

  /* Акцент CRM */
  --accent: #4a8f6f;
  --accent-soft: rgba(74, 143, 111, 0.14);
  --bubble-in: #f6fffa;
  --bubble-out: #bfe6cf;
  --bubble-out-border: rgba(74, 143, 111, 0.35);
  --font: "DM Sans", system-ui, sans-serif;
  --radius-bubble: 14px;
  --composer-h: 56px;
  --composer-action-btn: 56px;
  --composer-action-blue: #2788cf;
  --topbar-h: 52px;
  --crm-nav-w: 268px;
  --messenger-sidebar-drag-min: 200px;
  --messenger-sidebar-drag-max: 480px;
  --chat-shell-max: 1580px;
  --chat-shell-vw-cap: 80vw;
  --team-sidebar-w: 320px;
  --tg-bg: #e6ebe8;
  --tg-bg-depth: #dce5df;
  --tg-bubble-in: #ffffff;
  --tg-bubble-out: #daf5d4;
  --tg-bubble-border-in: rgba(0, 0, 0, 0.06);
  --tg-bubble-border-out: rgba(40, 120, 65, 0.22);
  --chat-col-max: 608px;
  --chat-col-pad-x: clamp(0.65rem, 2.4vw, 1.35rem);
  --chat-composer-bottom-gap: 1.1rem;
  --chat-composer-float-lift: 0.65rem;
  /** Нижняя мобильная панель: 0 на десктопе, на узком экране задаётся в `@media (max-width: 960px)`. */
  --mobile-tabbar-stack: 0px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --visual-viewport-height: 100dvh;
  --keyboard-inset: 0px;
  --chat-scroll-pad-bottom: calc(var(--chat-composer-float-lift) + 0.55rem);
  --chat-selection-scroll-extra: 0px;
  --msg-select-check-fill: #2a8fd8;
  --msg-select-check-fill-top: #4db4f5;
  --msg-select-slot-w: 28px;
  --unread-badge-bg: #34a4e8;
  --unread-badge-text: #ffffff;
  --ui-glass-fill: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(225, 242, 255, 0.48));
  --ui-glass-fill-strong: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(218, 236, 255, 0.62));
  --ui-glass-fill-soft: linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(225, 242, 255, 0.3));
  --ui-glass-border: rgba(51, 167, 255, 0.28);
  --ui-glass-border-soft: rgba(51, 167, 255, 0.2);
  --ui-glass-shadow-inset:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 2px 0 rgba(255, 255, 255, 0.35) inset;
  --ui-glass-shadow-outer: 0 6px 22px rgba(30, 120, 200, 0.1);
  --ui-glass-shadow-pop: 0 12px 32px rgba(30, 110, 185, 0.14);
  --ui-glass-blur: 14px;
  --voice-in-btn: #2481cc;
  --voice-out-btn: #60ab5d;
  --voice-in-wave-muted: #b4c5d4;
  --voice-out-wave-muted: rgba(46, 112, 62, 0.42);
  --tg-head-h: 58px;
  --tg-radius-bubble: 19px;
  --tg-radius-tail: 4px;
  --motion-fast: 0.16s;
  --motion-normal: 0.22s;
  --motion-slow: 0.34s;
  --ease-out-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.18, 0.82, 0.22, 1);

  /* Совместимость со старыми именами в стилях */
  --text: var(--text-main);
  --muted: var(--text-secondary);
  --surface: var(--bg-panel);
  --border: var(--border-color);
  --body-bg: var(--bg-main);
  --bg: var(--bg-muted);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg-main: #0f172a;
  --bg-panel: #1e293b;
  --bg-chat: #0b141a;
  --text-main: #e2e8f0;
  --text-secondary: #94a3b8;
  --border-color: #334155;

  --text-strong: #f8fafc;
  --text-on-accent: #f8fafc;
  --bg-work: #111c2e;
  --bg-muted: #172033;
  --bg-nav: #0f172a;
  --bg-elevated: #1e293b;
  --bg-placeholder: #1a2438;
  --bg-avatar: #1a2438;
  --topbar-icon-bg: rgba(148, 163, 184, 0.1);
  --topbar-icon-hover-bg: rgba(56, 189, 248, 0.14);
  --btn-hover-border: rgba(148, 163, 184, 0.45);
  --shadow-ambient: rgba(0, 0, 0, 0.45);
  --shadow-ambient-lg: rgba(0, 0, 0, 0.55);
  --shadow-green-tint: rgba(0, 0, 0, 0.35);
  --shadow-chat: rgba(0, 0, 0, 0.45);
  --overlay-backdrop: rgba(0, 0, 0, 0.55);
  --link-blue: #38bdf8;
  --link-blue-600: #7dd3fc;
  --danger: #f87171;
  --danger-text: #fecaca;
  --online-dot: #4ade80;
  --focus-ring: rgba(56, 189, 248, 0.45);

  --chat-canvas-top: #0f1a24;
  --chat-canvas-mid: #0b141a;
  --chat-canvas-bottom: #060a0e;
  --chat-canvas-base: #0a1219;
  --chat-pattern-overlay: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.82) 0%,
    rgba(15, 23, 42, 0.45) 45%,
    rgba(0, 0, 0, 0.35) 100%
  );
  --chat-after-overlay:
    radial-gradient(ellipse 95% 45% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 52%),
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(0, 0, 0, 0.45), transparent 55%);
  --chat-empty-color: rgba(148, 163, 184, 0.75);

  --bubble-shadow-in:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 2px 10px rgba(0, 0, 0, 0.35);
  --bubble-shadow-out:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 4px 16px rgba(0, 0, 0, 0.38);

  --msg-text-in: #e2e8f0;
  --msg-text-out: #f8fafc;
  --msg-time-in: #94a3b8;
  --msg-time-out: #bae6fd;
  --msg-ticks-sent: #94a3b8;
  --msg-ticks-read: #38bdf8;
  --msg-name-out: rgba(186, 230, 253, 0.88);

  --msg-fwd-avatar-bg: linear-gradient(145deg, #1a2e24, #142820);
  --msg-fwd-avatar-wrap-bg: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
  --msg-fwd-avatar-wrap-ring: rgba(148, 163, 184, 0.18);
  --msg-fwd-avatar-ph: #7abf96;
  --msg-fwd-label: #86c9a6;
  --msg-fwd-name: #b8e6c8;
  --msg-fwd-name-out: #bae6fd;
  --msg-native-fwd-bg: var(--tg-bubble-in);
  --msg-native-fwd-bg-out: var(--tg-bubble-out);
  --msg-native-fwd-line: rgba(255, 255, 255, 0.08);
  --msg-reply-text: #cbd5e1;
  --msg-fwd-quote-bg: rgba(0, 0, 0, 0.28);
  --msg-fwd-quote-text: #94a3b8;
  --msg-forward-meta: #94a3b8;
  --msg-forward-label: #86c9a6;
  --msg-forward-name: #b8e6c8;
  --msg-forward-name-out: #bae6fd;

  --info-panel-bg: linear-gradient(168deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.92));
  --info-panel-head-bg: linear-gradient(180deg, rgba(51, 65, 85, 0.55), rgba(30, 41, 59, 0.35));
  --info-panel-participants-bg: linear-gradient(180deg, rgba(30, 41, 59, 0.5), rgba(15, 23, 42, 0.35));
  --info-panel-close-hover: rgba(56, 189, 248, 0.16);

  --tg-head-border: rgba(255, 255, 255, 0.08);
  --tg-head-inset: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --tg-head-icon: #94a3b8;
  --tg-head-icon-hover-bg: rgba(255, 255, 255, 0.06);
  --tg-head-avatar-bg: linear-gradient(145deg, #1e293b, #0f172a);

  --scrollbar-thumb: linear-gradient(180deg, rgba(100, 130, 160, 0.45), rgba(60, 90, 120, 0.55));
  --scrollbar-track-border: rgba(15, 23, 42, 0.4);

  --input-bg: #1a2438;
  --input-bg-readonly: #0f172a;
  --input-focus-border: rgba(56, 189, 248, 0.55);
  --input-focus-ring: rgba(56, 189, 248, 0.18);
  --chat-search-bar-bg: #111c2e;
  --chat-search-border: rgba(255, 255, 255, 0.08);
  --chat-search-input-border: rgba(255, 255, 255, 0.1);
  --chat-pinned-label: #c4b5fd;
  --chat-pinned-unpin-bg: rgba(30, 41, 59, 0.65);
  --chat-date-pill-text: #f8fafc;
  --chat-date-pill-bg: rgba(15, 23, 42, 0.55);
  --select-ring-bg: rgba(30, 41, 59, 0.92);
  --select-ring-border: rgba(255, 255, 255, 0.12);
  --select-check-mark: #ffffff;

  --composer-float-bg: #1e293b;
  --composer-float-border: rgba(255, 255, 255, 0.1);
  --composer-float-shadow:
    0 12px 36px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.05) inset;
  --composer-float-focus-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(56, 189, 248, 0.2);
  --composer-field-bg: rgba(15, 23, 42, 0.45);
  --composer-field-focus-bg: rgba(15, 23, 42, 0.65);
  --composer-icon-muted: #94a3b8;
  --composer-emoji-hover-bg: rgba(56, 189, 248, 0.12);
  --chat-pending-bg: #111c2e;
  --chat-pending-border-messenger: rgba(255, 255, 255, 0.1);
  --chat-upload-gradient: linear-gradient(180deg, #111c2e, #0f172a);
  --pending-chip-btn-bg: rgba(30, 41, 59, 0.85);
  --voice-rec-time: #fecaca;
  --voice-rec-cancel-bg: #1e293b;
  --voice-rec-cancel-text: #fecaca;
  --voice-rec-hint: #fca5a5;
  --emoji-pop-bg: rgba(30, 41, 59, 0.98);
  --emoji-pop-border: rgba(255, 255, 255, 0.1);
  --emoji-pop-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  --emoji-pop-tabs-border: rgba(255, 255, 255, 0.08);
  --chat-edit-modal-bg: #1e293b;
  --chat-edit-modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  --chat-edit-input-border: rgba(255, 255, 255, 0.12);
  --chat-edit-btn-secondary: #172033;
  --chat-hint-bg: #111c2e;
  --lightbox-close-fg: #f8fafc;
  --scroll-down-bg: #1e293b;
  --scroll-down-hover: #172033;
  --scroll-down-fg: #94a3b8;
  --forward-modal-bg: #1e293b;
  --forward-modal-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);

  --accent: #5cb88a;
  --accent-soft: rgba(92, 184, 138, 0.2);
  --bubble-in: #1e293b;
  --bubble-out: #1e3a5f;
  --bubble-out-border: rgba(56, 189, 248, 0.35);
  --composer-action-blue: #38bdf8;
  --tg-bg: #1e293b;
  --tg-bg-depth: #0f172a;
  --tg-bubble-in: #1e2a35;
  --tg-bubble-out: #2b5278;
  --tg-bubble-border-in: rgba(255, 255, 255, 0.08);
  --tg-bubble-border-out: rgba(56, 189, 248, 0.45);
  --msg-select-check-fill: #38bdf8;
  --msg-select-check-fill-top: #7dd3fc;
  --unread-badge-bg: #38bdf8;
  --unread-badge-text: #0f172a;
  --ui-glass-fill: linear-gradient(145deg, rgba(30, 41, 59, 0.92), rgba(15, 23, 42, 0.88));
  --ui-glass-fill-strong: linear-gradient(145deg, rgba(51, 65, 85, 0.95), rgba(30, 41, 59, 0.9));
  --ui-glass-fill-soft: linear-gradient(145deg, rgba(30, 41, 59, 0.75), rgba(15, 23, 42, 0.72));
  --ui-glass-border: rgba(56, 189, 248, 0.22);
  --ui-glass-border-soft: rgba(56, 189, 248, 0.14);
  --ui-glass-shadow-inset: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --ui-glass-shadow-outer: 0 8px 28px rgba(0, 0, 0, 0.4);
  --ui-glass-shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.5);
  --voice-in-btn: #38bdf8;
  --voice-out-btn: #6ee7b7;
  --voice-in-wave-muted: #64748b;
  --voice-out-wave-muted: rgba(110, 231, 183, 0.45);

  --text: var(--text-main);
  --muted: var(--text-secondary);
  --surface: var(--bg-panel);
  --border: var(--border-color);
  --body-bg: var(--bg-main);
  --bg: var(--bg-muted);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  background: var(--body-bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  margin-left: auto;
}

.topbar__notify-wrap {
  position: relative;
  flex-shrink: 0;
}

.topbar-notify-pop {
  position: fixed;
  left: 0;
  top: 0;
  width: min(22rem, calc(100vw - 1.25rem));
  max-width: 22rem;
  max-height: min(70vh, 22rem);
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  z-index: 12050;
  box-sizing: border-box;
}

/* Иначе `display: flex` выше перебивает стиль [hidden] браузера — плашка видна сразу при загрузке. */
.topbar-notify-pop[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.topbar-notify-pop__body {
  max-height: min(65vh, 20rem);
  overflow-y: auto;
}

.topbar-notify-pop__block + .topbar-notify-pop__block {
  border-top: 1px solid var(--border);
}

.topbar-notify-pop__subhead {
  padding: 0.4rem 0.85rem 0.55rem;
  border-bottom: 1px solid var(--border);
}

.topbar-notify-pop__head-alert {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #b91c1c;
  animation: topbar-notify-head-pulse 1.1s ease-in-out infinite;
}

[data-theme="dark"] .topbar-notify-pop__head-alert {
  color: #f87171;
}

.topbar-notify-pop__head-signed-ready {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #15803d;
  animation: topbar-notify-signed-ready-pulse 1.15s ease-in-out infinite;
}

[data-theme="dark"] .topbar-notify-pop__head-signed-ready {
  color: #4ade80;
}

@keyframes topbar-notify-head-pulse {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.55;
    filter: brightness(1.15);
  }
}

@keyframes topbar-notify-signed-ready-pulse {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.58;
    filter: brightness(1.12);
  }
}

@keyframes contract-notify-new-dot-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.25);
    box-shadow: 0 0 0 0.24rem rgba(220, 38, 38, 0);
  }
}

.contract-notify-new-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.38rem;
  border-radius: 999px;
  background: #dc2626;
  vertical-align: middle;
  animation: contract-notify-new-dot-pulse 1.15s ease-in-out infinite;
  cursor: pointer;
}

.contract-notify-new-dot:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 3px;
}

.topbar-notify-pop__list {
  overflow-y: auto;
  padding: 0.25rem 0;
}

.topbar-notify-pop__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.85rem;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.topbar-notify-pop__item-main {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.topbar-notify-pop__item-date {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--muted);
}

.topbar-notify-pop__item-date--new {
  color: #dc2626;
  font-weight: 700;
}

.contract-change-info-pop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.38);
}

.contract-change-info-pop__card {
  width: min(92vw, 28rem);
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.contract-change-info-pop__title {
  margin: 0 0 0.65rem;
  color: var(--text-strong);
  font-size: 1rem;
}

.contract-change-info-pop__text {
  margin-bottom: 1rem;
  white-space: pre-wrap;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
}

.contract-change-info-pop__close {
  width: 100%;
}

.topbar-notify-pop__item:hover {
  background: var(--topbar-icon-hover-bg);
}

.topbar-notify-pop__empty {
  margin: 0;
  padding: 0.75rem 0.85rem;
  font-size: 0.86rem;
  color: var(--muted);
}

/* Колокольчик админа: только «на согласовании» — красный; только «подписан к отгрузке» — зелёный; оба — чередование. */
.topbar__cabinet-btn--pending-alert-red {
  animation: topbar-notify-pulse-red 1.15s ease-in-out infinite;
  border-color: rgba(220, 38, 38, 0.55);
  color: #dc2626;
}

.topbar__cabinet-btn--pending-alert-red .topbar__cabinet-ic {
  color: #dc2626;
}

.topbar__cabinet-btn--pending-alert-red:hover {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

@keyframes topbar-notify-pulse-red {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
  }
}

.topbar__cabinet-btn--pending-alert-green {
  animation: topbar-notify-pulse-green 1.15s ease-in-out infinite;
  border-color: rgba(22, 163, 74, 0.55);
  color: #16a34a;
}

.topbar__cabinet-btn--pending-alert-green .topbar__cabinet-ic {
  color: #16a34a;
}

.topbar__cabinet-btn--pending-alert-green:hover {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
}

@keyframes topbar-notify-pulse-green {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.35);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
  }
}

@keyframes topbar-notify-bell-both {
  0%,
  45% {
    border-color: rgba(220, 38, 38, 0.58);
    color: #dc2626;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.32);
  }
  22% {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
  }
  50%,
  95% {
    border-color: rgba(22, 163, 74, 0.58);
    color: #16a34a;
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.32);
  }
  72% {
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
  }
  100% {
    border-color: rgba(220, 38, 38, 0.58);
    color: #dc2626;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.32);
  }
}

@keyframes topbar-notify-bell-both-dark {
  0%,
  45% {
    border-color: rgba(248, 113, 113, 0.55);
    color: #f87171;
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.28);
  }
  22% {
    box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.1);
  }
  50%,
  95% {
    border-color: rgba(74, 222, 128, 0.55);
    color: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.28);
  }
  72% {
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.1);
  }
  100% {
    border-color: rgba(248, 113, 113, 0.55);
    color: #f87171;
    box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.28);
  }
}

.topbar__cabinet-btn--pending-alert-both {
  animation: topbar-notify-bell-both 2.2s ease-in-out infinite;
}

.topbar__cabinet-btn--pending-alert-both .topbar__cabinet-ic {
  color: inherit;
}

.topbar__cabinet-btn--pending-alert-both:hover {
  background: rgba(148, 163, 184, 0.1);
}

[data-theme="dark"] .topbar__cabinet-btn--pending-alert-red {
  border-color: rgba(248, 113, 113, 0.55);
  color: #f87171;
}

[data-theme="dark"] .topbar__cabinet-btn--pending-alert-red .topbar__cabinet-ic {
  color: #f87171;
}

[data-theme="dark"] .topbar__cabinet-btn--pending-alert-green {
  border-color: rgba(74, 222, 128, 0.5);
  color: #4ade80;
}

[data-theme="dark"] .topbar__cabinet-btn--pending-alert-green .topbar__cabinet-ic {
  color: #4ade80;
}

[data-theme="dark"] .topbar__cabinet-btn--pending-alert-both {
  animation: topbar-notify-bell-both-dark 2.2s ease-in-out infinite;
}

.topbar__theme-toggle .topbar__theme-toggle__sun {
  display: none;
}

[data-theme="dark"] .topbar__theme-toggle .topbar__theme-toggle__moon {
  display: none;
}

[data-theme="dark"] .topbar__theme-toggle .topbar__theme-toggle__sun {
  display: flex;
}

.topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.5rem 0.85rem;
  min-height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar__center {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

/* Горизонтальное меню разделов в шапке: пункты, переехавшие из меню «три точки». */
.topbar-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  -webkit-overflow-scrolling: touch;
}

.topbar-nav[hidden] {
  display: none !important;
}

.topbar-nav::-webkit-scrollbar {
  height: 4px;
}

.topbar-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.topbar-nav__list {
  list-style: none;
  /* Центрируем пункты в свободном месте между логотипом и блоком действий.
     Именно auto-отступы, а не justify-content: center: в прокручиваемом
     контейнере центрирование делает начало списка недостижимым при переполнении,
     а auto-отступы в этом случае сами схлопываются в ноль. */
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.topbar-nav__list > li[hidden] {
  display: none !important;
}

.topbar-nav .crm-nav__item {
  width: auto;
  margin-bottom: 0;
  gap: 0.4rem;
  padding: 0.42rem 0.6rem;
  border-radius: 9px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.topbar-nav .crm-nav__ic svg {
  width: 17px;
  height: 17px;
}

.topbar-nav .crm-nav__label {
  flex: 0 0 auto;
}

.topbar-nav .crm-nav__item--active {
  background: var(--accent-soft);
  box-shadow: none;
  color: var(--accent);
}

@media (max-width: 1280px) {
  .topbar-nav .crm-nav__item {
    padding: 0.42rem 0.45rem;
  }

  .topbar-nav .crm-nav__ic {
    display: none;
  }
}

/* Плашка статусов договоров — по центру экрана. */
.admin-contract-screen-banner {
  position: fixed;
  inset: 0;
  z-index: 1085;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
  box-sizing: border-box;
}

.admin-contract-screen-banner[hidden] {
  display: none !important;
}

.admin-contract-screen-banner__panel {
  display: grid;
  grid-template-columns: minmax(0, 26rem);
  gap: 0.75rem;
  align-items: start;
  justify-content: center;
  max-width: min(92vw, 26rem);
  pointer-events: auto;
  will-change: transform;
}

.admin-contract-screen-banner__block--pending {
  grid-column: 1 / -1;
}

.admin-contract-screen-banner__block--delivered {
  grid-column: 1;
}

.admin-contract-screen-banner__block--signed {
  grid-column: 1;
}

.admin-contract-screen-banner__block--changes,
.admin-contract-screen-banner__block--pending,
.admin-contract-screen-banner__block--signed,
.admin-contract-screen-banner__block--delivered {
  grid-column: 1;
}

.admin-contract-screen-banner__panel--dragging .admin-contract-screen-banner__block {
  cursor: grabbing;
}

.admin-contract-screen-banner__block {
  position: relative;
  margin: 0;
  padding: 2rem 1.25rem 1rem;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  cursor: grab;
  touch-action: none;
}

.admin-contract-screen-banner__block :is(button, .admin-contract-screen-banner__link, label, input) {
  cursor: pointer;
  touch-action: auto;
}

.admin-contract-screen-banner__mute {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  user-select: none;
}

.admin-contract-screen-banner__mute-input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: currentColor;
}

.admin-contract-screen-banner__block[hidden] {
  display: none !important;
}

.admin-contract-screen-banner__block--pending {
  border: 2px solid rgba(185, 28, 28, 0.55);
  background: rgba(254, 226, 226, 0.97);
  color: #991b1b;
  animation: admin-contract-screen-banner-pulse-red 1.15s ease-in-out infinite;
}

.admin-contract-screen-banner__block--signed {
  border: 2px solid rgba(21, 128, 61, 0.55);
  background: rgba(220, 252, 231, 0.97);
  color: #166534;
  animation: admin-contract-screen-banner-pulse-green 1.15s ease-in-out infinite;
}

.admin-contract-screen-banner__block--delivered {
  border: 2px solid rgba(22, 163, 74, 0.58);
  background: rgba(240, 253, 244, 0.97);
  color: #15803d;
  animation: admin-contract-screen-banner-pulse-delivered 1.15s ease-in-out infinite;
}

.admin-contract-screen-banner__block--agreed {
  border: 2px solid rgba(29, 78, 216, 0.5);
  background: rgba(219, 234, 254, 0.97);
  color: #1d4ed8;
  animation: admin-contract-screen-banner-pulse-blue 1.15s ease-in-out infinite;
}

.admin-contract-screen-banner__block--transit {
  border: 2px solid rgba(14, 116, 144, 0.5);
  background: rgba(207, 250, 254, 0.97);
  color: #0e7490;
  animation: admin-contract-screen-banner-pulse-cyan 1.15s ease-in-out infinite;
}

.admin-contract-screen-banner__block--changes {
  border: 2px solid rgba(124, 58, 237, 0.5);
  background: rgba(237, 233, 254, 0.97);
  color: #6d28d9;
  animation: admin-contract-screen-banner-pulse-purple 1.15s ease-in-out infinite;
}

.admin-contract-screen-banner__head {
  margin: 0 0 0.65rem;
  padding-right: 1.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.92;
}

.admin-contract-screen-banner__list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: stretch;
}

.admin-contract-screen-banner__row {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem 0.65rem;
  align-items: center;
}

.admin-contract-screen-banner__close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
  pointer-events: auto;
}

.admin-contract-screen-banner__close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.95);
}

.admin-contract-screen-banner__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.admin-contract-screen-banner__new-text {
  color: #dc2626;
  font-size: 0.82em;
  font-weight: 700;
  text-decoration: none;
}

.admin-contract-screen-banner__status-text {
  font-size: 0.78em;
  font-weight: 700;
  opacity: 0.78;
  text-decoration: none;
}

.admin-contract-screen-banner__date {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.admin-contract-screen-banner__date--new {
  color: #dc2626;
  font-weight: 800;
}

.admin-contract-screen-banner__comment {
  grid-column: 1 / -1;
  display: block;
  margin-top: -0.15rem;
  padding: 0.4rem 0.6rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.42);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: pre-wrap;
  text-align: left;
  overflow-wrap: anywhere;
}

.admin-contract-screen-banner__row-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 2.1rem;
  height: 2.1rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #020617;
  cursor: pointer;
}

.admin-contract-screen-banner__row-remove svg {
  display: block;
  flex: 0 0 auto;
}

.admin-contract-screen-banner__row-remove:hover {
  background: rgba(255, 255, 255, 0.75);
  color: #dc2626;
}

.admin-contract-screen-banner__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.admin-contract-screen-banner__pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85rem;
  height: 1.7rem;
  padding: 0 0.45rem;
  border: 1px solid currentColor;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: inherit;
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.admin-contract-screen-banner__pager-btn:hover:not(:disabled) {
  background: #fff;
}

.admin-contract-screen-banner__pager-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.admin-contract-screen-banner__pager-label {
  min-width: 3.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.admin-contract-screen-banner__pager-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.7rem;
  margin-left: 0.2rem;
  padding: 0 0.6rem;
  border: 1px solid rgba(21, 128, 61, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.admin-contract-screen-banner__pager-clear:hover {
  background: #fff;
  border-color: #16a34a;
}

.admin-contract-screen-banner__block--pending .admin-contract-screen-banner__link:hover {
  background: #fff;
  border-color: #b91c1c;
}

.admin-contract-screen-banner__block--signed .admin-contract-screen-banner__link:hover {
  background: #fff;
  border-color: #15803d;
}

.admin-contract-screen-banner__block--delivered .admin-contract-screen-banner__link:hover {
  background: #fff;
  border-color: #16a34a;
}

.admin-contract-screen-banner__block--agreed .admin-contract-screen-banner__link:hover {
  background: #fff;
  border-color: #1d4ed8;
}

.admin-contract-screen-banner__block--transit .admin-contract-screen-banner__link:hover {
  background: #fff;
  border-color: #0e7490;
}

.admin-contract-screen-banner__block--changes .admin-contract-screen-banner__link:hover {
  background: #fff;
  border-color: #7c3aed;
}

[data-theme="dark"] .admin-contract-screen-banner__block--pending {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(127, 29, 29, 0.92);
  color: #fecaca;
}

[data-theme="dark"] .admin-contract-screen-banner__block--signed {
  border-color: rgba(74, 222, 128, 0.5);
  background: rgba(20, 83, 45, 0.92);
  color: #bbf7d0;
}

[data-theme="dark"] .admin-contract-screen-banner__block--delivered {
  border-color: rgba(74, 222, 128, 0.58);
  background: rgba(22, 101, 52, 0.92);
  color: #dcfce7;
}

[data-theme="dark"] .admin-contract-screen-banner__block--agreed {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(30, 64, 175, 0.9);
  color: #bfdbfe;
}

[data-theme="dark"] .admin-contract-screen-banner__block--transit {
  border-color: rgba(34, 211, 238, 0.5);
  background: rgba(21, 94, 117, 0.9);
  color: #cffafe;
}

[data-theme="dark"] .admin-contract-screen-banner__block--changes {
  border-color: rgba(167, 139, 250, 0.55);
  background: rgba(76, 29, 149, 0.9);
  color: #ddd6fe;
}

[data-theme="dark"] .admin-contract-screen-banner__link {
  background: rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .admin-contract-screen-banner__close {
  background: rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .admin-contract-screen-banner__close:hover {
  background: rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .admin-contract-screen-banner__row-remove {
  border-color: #f8fafc;
  background: rgba(0, 0, 0, 0.28);
  color: #f8fafc;
}

[data-theme="dark"] .admin-contract-screen-banner__pager-clear {
  border-color: rgba(187, 247, 208, 0.55);
  background: rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .admin-contract-screen-banner__comment {
  background: rgba(0, 0, 0, 0.22);
}

@keyframes admin-contract-screen-banner-pulse-red {
  0%,
  100% {
    box-shadow: 0 8px 28px rgba(185, 28, 28, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 12px 36px rgba(185, 28, 28, 0.35);
    transform: scale(1.015);
  }
}

@keyframes admin-contract-screen-banner-pulse-green {
  0%,
  100% {
    box-shadow: 0 8px 28px rgba(21, 128, 61, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 12px 36px rgba(21, 128, 61, 0.32);
    transform: scale(1.015);
  }
}

@keyframes admin-contract-screen-banner-pulse-delivered {
  0%,
  100% {
    box-shadow: 0 8px 28px rgba(22, 163, 74, 0.2);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 12px 36px rgba(22, 163, 74, 0.34);
    transform: scale(1.015);
  }
}

@keyframes admin-contract-screen-banner-pulse-blue {
  0%,
  100% {
    box-shadow: 0 8px 28px rgba(29, 78, 216, 0.18);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 12px 36px rgba(29, 78, 216, 0.3);
    transform: scale(1.015);
  }
}

@keyframes admin-contract-screen-banner-pulse-cyan {
  0%,
  100% {
    box-shadow: 0 8px 28px rgba(14, 116, 144, 0.18);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 12px 36px rgba(14, 116, 144, 0.3);
    transform: scale(1.015);
  }
}

@keyframes admin-contract-screen-banner-pulse-purple {
  0%,
  100% {
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.18);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 10px 34px rgba(124, 58, 237, 0.28);
    transform: scale(1.015);
  }
}

@media (max-width: 430px) {
  .admin-contract-screen-banner__panel {
    grid-template-columns: minmax(0, 1fr);
    max-width: min(94vw, 22rem);
  }

  .admin-contract-screen-banner__block--pending,
  .admin-contract-screen-banner__block--signed,
  .admin-contract-screen-banner__block--delivered,
  .admin-contract-screen-banner__block--changes {
    grid-column: 1;
  }

  .admin-contract-screen-banner__link {
    font-size: 0.95rem;
  }
}

.topbar__logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--topbar-icon-bg);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.topbar__logout-btn:hover {
  border-color: var(--btn-hover-border);
  background: var(--topbar-icon-hover-bg);
  color: var(--danger-text);
}

.topbar__cabinet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--topbar-icon-bg);
  font: inherit;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.topbar__cabinet-btn:hover {
  border-color: var(--btn-hover-border);
  background: var(--topbar-icon-hover-bg);
}

.topbar__cabinet-ic {
  display: flex;
  color: var(--muted);
}

.topbar__cabinet-btn:hover .topbar__cabinet-ic {
  color: var(--accent);
}

.topbar__icon-btn--crm-menu {
  display: none;
}

@media (max-width: 960px) {
  /* Боковое меню разделов — через «Ещё» в нижней панели. */
  .topbar__icon-btn--crm-menu {
    display: none !important;
  }
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--text);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1.2;
}

.topbar__brand-logo {
  display: block;
  height: 2.15rem;
  width: auto;
  max-width: min(13.5rem, 52vw);
}

[data-theme="dark"] .topbar__brand {
  background: #fff;
  border-radius: 8px;
  padding: 0.18rem 0.45rem;
}

.topbar__brand:hover {
  opacity: 0.88;
}

.topbar__brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.topbar__tab-nav {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.topbar__tab {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.45rem 0.65rem;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.topbar__tab:hover {
  color: var(--text);
  background: rgba(74, 124, 98, 0.06);
}

.topbar__tab + .topbar__tab {
  border-left: 1px solid var(--border);
}

.topbar__tab--active {
  background: var(--accent-soft);
  color: var(--text);
}

.topbar__icon-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}

.topbar__icon-btn:hover {
  color: var(--text);
  border-color: var(--btn-hover-border);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
}

.crm-nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--topbar-h);
  z-index: 65;
  background: var(--overlay-backdrop);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.crm-nav-backdrop[hidden] {
  display: none !important;
}

.crm-nav {
  width: var(--crm-nav-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-nav);
  border-right: 1px solid var(--border);
  min-height: 0;
}

.crm-nav__head {
  padding: 0.95rem 1.05rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.crm-nav__list {
  list-style: none;
  margin: 0;
  padding: 0.3rem 0.55rem 0.85rem;
  flex: 1;
  overflow-y: auto;
}

.crm-nav__foot {
  margin-top: auto;
  padding: 0.35rem 0.55rem 0.85rem;
  border-top: 1px solid var(--border);
}

.crm-nav__hidden-anchor {
  position: relative;
}

.crm-nav__more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.62rem 0.72rem;
  border: none;
  border-radius: 11px;
  background: transparent;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}

.crm-nav__more-btn:hover,
.crm-nav__more-btn.is-open {
  background: rgba(74, 124, 98, 0.08);
}

.crm-nav__more-btn--active,
.crm-nav__more-btn.crm-nav__more-btn--active {
  background: var(--surface);
  box-shadow: 0 1px 3px var(--shadow-green-tint);
  color: var(--accent);
}

.crm-nav__more-btn--active .crm-nav__ic,
.crm-nav__more-btn.crm-nav__more-btn--active .crm-nav__ic {
  color: var(--accent);
}

.crm-nav__hidden-menu {
  list-style: none;
  margin: 0;
  padding: 0.35rem;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 0.35rem);
  z-index: 5;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.crm-nav__hidden-menu[hidden] {
  display: none !important;
}

.crm-nav__hidden-menu .crm-nav__item {
  margin-bottom: 0.15rem;
}

.crm-nav__hidden-menu .crm-nav__item:last-child {
  margin-bottom: 0;
}

.crm-nav__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.62rem 0.72rem;
  margin-bottom: 0.22rem;
  border: none;
  border-radius: 11px;
  background: transparent;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}

.crm-nav__item:hover {
  background: rgba(74, 124, 98, 0.08);
}

.crm-nav__item--active {
  background: var(--surface);
  box-shadow: 0 1px 3px var(--shadow-green-tint);
  color: var(--accent);
}

.crm-nav__ic {
  display: flex;
  color: var(--muted);
  flex-shrink: 0;
}

.crm-nav__ic svg {
  width: 22px;
  height: 22px;
}

.crm-nav__item--active .crm-nav__ic {
  color: var(--accent);
}

.crm-nav__label {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.crm-nav__chat-pulse,
.crm-nav__samples-pulse {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff7a6a 0%, #e53935 55%, #c62828 100%);
  box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.55);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.crm-nav__chat-pulse.is-active,
.crm-nav__samples-pulse.is-active {
  opacity: 1;
  transform: scale(1);
  animation: crm-nav-chat-pulse-ring 1.6s ease-out infinite;
}

.crm-nav__logs-alert-dot {
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #dc2626;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
  animation: crm-nav-logs-alert-pulse 1.25s ease-out infinite;
}

.crm-nav__logs-alert-dot[hidden] {
  display: none !important;
}

@keyframes crm-nav-logs-alert-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55);
  }
  70% {
    box-shadow: 0 0 0 0.45rem rgba(220, 38, 38, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-nav__chat-pulse.is-active,
  .crm-nav__samples-pulse.is-active,
  .crm-nav__logs-alert-dot {
    animation: none;
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.35);
  }
}

@keyframes crm-nav-chat-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.55);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(229, 57, 53, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
  }
}

.crm-nav__unread {
  flex-shrink: 0;
  min-width: 1.2rem;
  height: 1.2rem;
  min-height: 1.2rem;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--unread-badge-bg);
  color: var(--unread-badge-text);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.2rem;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(20, 100, 170, 0.35);
}

.crm-nav__unread[hidden] {
  display: none !important;
}

.crm-work {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.65rem 0.85rem 0.75rem;
  background: var(--bg-work);
  position: relative;
}

.crm-boot-loader {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 40;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  background: var(--bg-work);
  pointer-events: none;
}

html.crm-booting .crm-boot-loader {
  display: flex;
}

html.crm-booting .crm-section,
html.crm-booting #section-chat,
html.crm-booting #section-chat.crm-section--active {
  visibility: hidden !important;
}

.crm-boot-loader[hidden] {
  display: none !important;
}

.crm-boot-loader__ring {
  width: 2.6rem;
  height: 2.6rem;
  border: 3px solid color-mix(in srgb, var(--accent, #2f7d5c) 22%, transparent);
  border-top-color: var(--accent, #2f7d5c);
  border-radius: 50%;
  animation: crm-boot-spin 0.75s linear infinite;
}

@keyframes crm-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crm-boot-loader__ring {
    animation: none;
    border-top-color: color-mix(in srgb, var(--accent, #2f7d5c) 22%, transparent);
    border-right-color: var(--accent, #2f7d5c);
  }
}

.crm-section {
  display: none;
  flex: 1;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
}

/* Стили раздела ещё грузятся (js/crm-section-styles.js) — не показываем полуфабрикат. */
.crm-section--styles-pending {
  visibility: hidden;
}

.crm-section--active {
  display: flex;
  animation: crm-section-enter var(--motion-normal) var(--ease-out-premium) both;
}

@keyframes crm-section-enter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Главная: спокойный экран в стиле CRM, не лендинг */
.crm-section--home {
  flex: 1;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #c8cdce;
}

.crm-work:has(#section-home.crm-section--active) {
  background: #c8cdce;
}

.crm-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: auto;
  padding: 1.25rem 1.5rem 2rem;
  text-align: center;
}

.crm-home__logo {
  width: min(32rem, 86vw);
  max-width: 560px;
  height: auto;
  display: block;
}

.crm-home__title {
  margin: 0;
  max-width: none;
  font-size: clamp(0.7rem, 1.45vw, 0.88rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: #5a6570;
  white-space: nowrap;
}

@media (max-width: 400px) {
  .crm-home__title {
    white-space: normal;
    font-size: 0.82rem;
    max-width: min(22rem, 92vw);
  }
}

/* Раздел «Чат»: центрированная двухколоночная композиция как в Telegram Web */
.crm-section--chat {
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.chat-shell {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: min(var(--chat-shell-max), var(--chat-shell-vw-cap));
  margin-inline: auto;
  padding-inline: clamp(0.35rem, 1.4vw, 1.1rem);
  max-height: calc(100dvh - var(--topbar-h) - 1.35rem);
}

.chat-shell > .messenger {
  flex: 1 1 auto;
  min-height: 0;
}

.crm-panel {
  flex: 1;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  box-shadow: 0 8px 28px var(--shadow-ambient);
  max-width: 920px;
}

.crm-panel__title {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.crm-panel__lead {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.crm-placeholder {
  padding: 1.5rem 1.25rem;
  border-radius: 12px;
  border: 1px dashed var(--btn-hover-border);
  background: var(--bg-placeholder);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

#section-samples.crm-section {
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 1rem;
  -webkit-overflow-scrolling: touch;
}

.samples-field .documents-input {
  width: 100%;
  box-sizing: border-box;
  color: var(--text-strong);
  font-weight: 500;
}

.samples-field .documents-input[readonly] {
  background: var(--bg-placeholder);
  color: var(--muted);
}

.samples-tariff:hover,
.samples-tariff:focus-visible,
.samples-tariff.is-active {
  border-color: #16a34a;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.14);
  outline: none;
}

.samples-tariff.is-active::after {
  content: "Выбран";
  margin-top: auto;
  color: #16a34a;
  font-size: 0.78rem;
  font-weight: 800;
}

.samples-point-tools .documents-input {
  flex: 1 1 240px;
}

.samples-point:hover,
.samples-point:focus-visible,
.samples-point.is-active {
  border-color: #16a34a;
  background: rgba(34, 197, 94, 0.1);
  outline: none;
}

.samples-map-pin:hover,
.samples-map-pin:focus-visible,
.samples-map-pin.is-active {
  width: 1.35rem;
  height: 1.35rem;
  margin: -0.675rem 0 0 -0.675rem;
  background: #0ea5e9;
  outline: none;
}



@media (max-width: 700px) {

  .samples-actions .documents-btn {
    flex: 1 1 100%;
  }
}

.nomenclature-search-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-strong);
}

.nomenclature-search-input {
  flex: 1 1 200px;
  min-width: 160px;
  max-width: 400px;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-strong);
  font: inherit;
  font-size: 0.9rem;
}

.nomenclature-search-input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.nomenclature-detail-error {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--danger-text);
}

.nomenclature-table__th--article {
  width: 4.5rem;
  max-width: 5rem;
  padding-left: 0.45rem;
  padding-right: 0.35rem;
  box-sizing: border-box;
}

.nomenclature-table__th--price {
  width: 1%;
  padding-right: 0.2rem;
}

.nomenclature-table__th--price-disc {
  width: 1%;
  padding-left: 0.15rem;
}

.nomenclature-table tbody tr.is-selected {
  background: var(--bg-placeholder);
}

.nomenclature-table__cell--mono {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 500;
}

.nomenclature-table__cell--article {
  width: 4.5rem;
  max-width: 5rem;
  padding-left: 0.45rem;
  padding-right: 0.35rem;
  box-sizing: border-box;
}

.nomenclature-table__cell--product-type {
  font-size: 0.84rem;
  color: var(--muted);
  max-width: 10rem;
}

.nomenclature-table__cell--name {
  min-width: 8rem;
}

.nomenclature-table__cell--price {
  padding-right: 0.2rem;
}

.nomenclature-table__cell--price-disc {
  padding-left: 0.15rem;
}

.nomenclature-table__cell--collection {
  font-size: 0.84rem;
  color: var(--muted);
  max-width: 14rem;
}

.nomenclature-table__link {
  font-weight: 500;
  color: var(--text-strong);
  text-decoration: underline;
}

.nomenclature-table__muted {
  color: var(--muted);
  font-size: 0.84rem;
}

.crm-panel--catalogs {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}





@keyframes catalogs-spin {
  to {
    transform: rotate(360deg);
  }
}

#section-stocks.crm-section {
  width: 100%;
  align-self: stretch;
}

.stocks-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.stocks-status {
  padding: 0.32rem 0.55rem;
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.2;
}

body.modal-open {
  overflow: hidden;
}

.brik-draggable-popup {
  cursor: grab;
  touch-action: none;
}

.brik-draggable-popup :is(button, a, input, select, textarea, label, iframe, [contenteditable="true"]) {
  cursor: auto;
}

.brik-draggable-popup--dragging,
.brik-draggable-popup--dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

.contracts-view--shipment-modal:has(.brik-draggable-popup--dragging),
#section-drivers .drivers-hub-form-layer:has(.brik-draggable-popup--dragging) {
  overflow: hidden !important;
}

#section-drivers .drivers-hub-form-layer:has(.drivers-simple-delivery-panel.brik-draggable-popup),
#section-drivers .drivers-hub-form-layer__sheet:has(.drivers-simple-delivery-panel.brik-draggable-popup) {
  overflow: visible !important;
}

.stocks-edit-row .stocks-text-input,
.stocks-edit-row .stocks-input,
.stocks-inline-add-row .stocks-text-input,
.stocks-inline-add-row .stocks-input,
.stocks-edit-row .documents-input,
.stocks-inline-add-row .documents-input {
  width: 100%;
  min-width: 0;
  padding: 0.22rem 0.35rem;
  font-size: inherit;
}



/* --- Договоры и сметы --- */
#section-contracts.crm-section {
  width: 100%;
  align-self: stretch;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

#section-old-contracts.crm-section {
  width: 100%;
  align-self: stretch;
  flex: 1;
  min-height: 0;
  min-width: 0;
}

.old-contracts-head .documents-title {
  margin: 0 0 0.25rem;
}

.old-contracts-search__field .documents-input {
  width: 100%;
}



/* Редактор: единственная зона вертикальной прокрутки (body { overflow: hidden }) */
#contracts-view-editor.contracts-view {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 0.2rem;
}

.crm-panel--documents {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* Таблица договоров: прокрутка только в #contracts-list, не на всей панели */
#section-contracts #contracts-view-list.contracts-view {
  overflow: hidden;
}

#section-contracts #contracts-view-list > .documents-title {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  line-height: 1.2;
}

.contracts-controls {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
  flex-shrink: 0;
}

#section-contracts .contracts-controls .documents-toolbar--contracts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0;
}

#section-contracts .documents-toolbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

#section-contracts .contracts-controls .documents-toolbar__filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem 0.4rem;
  flex: 0 1 auto;
  margin-left: auto;
  min-width: 0;
  order: 3;
  justify-content: flex-end;
}

#section-contracts #contracts-search.documents-input--search {
  flex: 0 1 9rem;
  min-width: 6.75rem;
  max-width: 12rem;
  padding: 0.32rem 0.5rem;
  font-size: 0.84rem;
}

#section-contracts .contracts-controls .documents-input,
#section-contracts .contracts-controls .documents-select,
#section-contracts .contracts-controls .documents-reset-filters-btn {
  padding: 0.32rem 0.45rem;
  font-size: 0.82rem;
}

#section-contracts .documents-select--responsible,
#section-contracts .documents-select--region,
#section-contracts .documents-select--sort {
  min-width: 5.75rem;
  max-width: 8.25rem;
}

#section-contracts .documents-input--period-date {
  min-width: 7.2rem;
  max-width: 7.7rem;
}

#section-contracts .documents-date-period--compact {
  gap: 0;
}

#section-contracts .documents-date-period-sep {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1;
  flex-shrink: 0;
}

#section-contracts .contracts-controls .documents-contracts-filter-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  margin: 0;
  width: 100%;
}

#section-contracts .contracts-controls .documents-contracts-filters {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

#section-contracts .contracts-controls .documents-contracts-status-wrap {
  flex: 0 0 auto;
  min-width: 0;
  order: 2;
}

#section-contracts .contracts-controls .documents-contracts-view-tabs-wrap {
  order: 1;
  flex: 0 0 auto;
  padding: 1px;
}

#section-contracts .documents-contracts-filters__grid--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}

#section-contracts .documents-contracts-filters__grid--inline #contracts-filter-status {
  grid-column: unset;
  grid-row: unset;
  min-width: 8.5rem;
  max-width: 11.5rem;
  width: auto;
}

#section-contracts .documents-contracts-filters__grid--inline .documents-contracts-filters__label--checkbox {
  grid-column: unset;
  grid-row: unset;
  font-size: 0.8rem;
  gap: 0.35rem;
}

#section-contracts .contracts-controls .documents-view-tab {
  padding: 0.28rem 0.58rem;
  font-size: 0.8rem;
}

#section-contracts .contracts-controls .documents-btn--primary {
  padding: 0.35rem 0.65rem;
  font-size: 0.84rem;
}

#section-contracts .contracts-controls .documents-icon-btn {
  width: 2.1rem;
  height: 2.1rem;
}

.contracts-editor-readonly-notice {
  margin: 0.35rem 0 0;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: rgba(100, 116, 139, 0.12);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.contracts-editor-modal--readonly .contracts-editor-modal__head .documents-editor-meta input,
.contracts-editor-modal--readonly .contracts-editor-modal__head .documents-editor-meta select,
.contracts-editor-modal--readonly .contracts-editor-modal__head .documents-editor-meta textarea {
  cursor: not-allowed;
}

.contracts-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.contracts-view[hidden] {
  display: none !important;
}

.contracts-view--preview {
  overflow: auto;
}

.documents-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.5rem;
}

.documents-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.9rem;
}

#section-contracts #contracts-view-list > .documents-toolbar:not(.documents-toolbar--contracts) {
  justify-content: flex-start;
  margin-bottom: 30px;
}

#section-contracts #contracts-view-list > .documents-toolbar:not(.documents-toolbar--contracts) > .documents-toolbar__filters {
  margin-left: auto;
}

.documents-icon-btn {
  width: 2.35rem;
  height: 2.35rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.documents-icon-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.documents-icon-btn:hover {
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
  transform: translateY(-1px);
}

.documents-icon-btn--delivery {
  color: #4a8f6f;
  background: rgba(74, 143, 111, 0.1);
  border-color: rgba(74, 143, 111, 0.24);
}

.documents-icon-btn--import {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.09);
  border-color: rgba(37, 99, 235, 0.22);
}

.documents-page-size {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
}

.documents-contracts-filters {
  margin: 0 0 0.65rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-muted);
  box-sizing: border-box;
}

.documents-contracts-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.65rem;
  margin: 0 0 30px;
}

.documents-contracts-filter-row > .documents-contracts-filters {
  margin: 0;
}

.documents-contracts-status-wrap {
  flex: 1 1 34rem;
}

.documents-contracts-view-tabs-wrap {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.documents-pagination-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.documents-total-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-right: auto;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.documents-total-count[hidden] {
  display: none;
}

.documents-total-count__value {
  color: var(--text-strong);
  font-size: 1rem;
  font-weight: 800;
}

.documents-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.documents-pagination[hidden] {
  display: none;
}

.documents-pagination__info {
  margin-right: 0.2rem;
}

.documents-pagination__btn {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-strong);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.38rem 0.75rem;
  cursor: pointer;
}

.documents-pagination__btn:hover:not(:disabled) {
  background: var(--bg-muted);
}

.documents-pagination__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.documents-contracts-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
}

.documents-contracts-view-tabs-wrap .documents-contracts-view-tabs {
  margin: 0;
}

.documents-view-tab {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-muted);
  color: var(--muted);
  cursor: pointer;
}

.documents-view-tab:hover {
  color: var(--text);
  border-color: var(--accent, #2563eb);
}

.documents-view-tab--active {
  color: var(--text);
  background: var(--bg);
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 1px var(--accent, #2563eb);
}

/** Подпись «Статус» в первой строке; select и чекбокс во второй — по центру друг относительно друга */
.documents-contracts-filters__grid {
  display: grid;
  grid-template-columns: minmax(11rem, max-content) minmax(14rem, max-content) minmax(18rem, max-content);
  grid-template-rows: auto auto;
  column-gap: 1rem;
  row-gap: 0.35rem;
  align-items: center;
}

.documents-contracts-filters__label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0;
  min-width: 0;
}

.documents-contracts-filters__label .documents-input,
.documents-contracts-filters__label .documents-select {
  min-width: 6.5rem;
  max-width: 100%;
}

.documents-contracts-filters__label--status {
  grid-column: 1;
  grid-row: 1;
}

.documents-contracts-filters__label--checkbox {
  display: flex;
  flex-direction: row;
  align-items: center;
  grid-row: 2;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  margin: 0;
  min-width: max-content;
  white-space: nowrap;
}

.documents-contracts-filters__label--checkbox:nth-of-type(2) {
  grid-column: 2;
}

.documents-contracts-filters__label--checkbox:nth-of-type(3) {
  grid-column: 3;
}

.documents-contracts-filters__label--checkbox input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--accent, #2563eb);
}

.documents-contracts-filters__group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.45rem 0.65rem;
}

#contracts-filter-status {
  grid-column: 1;
  grid-row: 2;
  min-width: 11rem;
  width: 100%;
  max-width: 100%;
  align-self: center;
  justify-self: start;
}

@media (max-width: 36rem) {
  .documents-contracts-filters__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    row-gap: 0.45rem;
  }

  .documents-contracts-filters__label--status {
    grid-column: 1;
    grid-row: 1;
  }

  #contracts-filter-status {
    grid-column: 1;
    grid-row: 2;
  }

  .documents-contracts-filters__label--checkbox {
    grid-column: 1;
    grid-row: 3;
  }

  .documents-contracts-filters__label--checkbox:nth-of-type(3) {
    grid-column: 1;
    grid-row: 4;
  }
}

.documents-title {
  margin-top: 0;
}

.documents-input,
.documents-select,
.documents-textarea {
  font: inherit;
  font-size: 0.9rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  background: var(--surface);
  color: var(--text-strong);
}

.documents-input:focus,
.documents-select:focus,
.documents-textarea:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.documents-input--search {
  min-width: 24rem;
  max-width: min(34rem, 100%);
}

.documents-period-caption {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}

.documents-date-period {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.86rem;
}

.documents-input--period-date {
  min-width: 9.5rem;
  max-width: 10.5rem;
}

.documents-reset-filters-btn {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  background: var(--surface);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.documents-reset-filters-btn:hover {
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
}

.delivery-calc-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px))
    max(1rem, env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
}

.delivery-calc-modal[hidden] {
  display: none;
}

.delivery-calc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}

.delivery-calc-modal__panel {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 2rem));
  height: min(760px, calc(100vh - 2rem));
  height: min(760px, calc(100dvh - 2rem));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.32);
}

.delivery-calc-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg, var(--surface));
}

.delivery-calc-modal__title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.delivery-calc-modal__title-wrap h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.delivery-calc-modal__icon {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 10px;
  color: #4a8f6f;
  background: rgba(74, 143, 111, 0.12);
}

.delivery-calc-modal__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.delivery-calc-modal__close {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.delivery-calc-modal__close:hover {
  color: var(--text);
  border-color: var(--accent, #2563eb);
}

.delivery-calc-modal__frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #f4f6f8;
}

.documents-select--region {
  min-width: 12rem;
  max-width: min(18rem, 100%);
}

.documents-select--responsible {
  min-width: 13.5rem;
  max-width: min(20rem, 100%);
}

.documents-select--sm {
  padding: 0.28rem 0.45rem;
  font-size: 0.85rem;
}

.documents-input--sm {
  padding: 0.28rem 0.45rem;
  font-size: 0.85rem;
  max-width: 11rem;
}

.documents-input--contract-date {
  min-width: 9.25rem;
  max-width: 15rem;
}

.documents-select--contract-status {
  max-width: min(28rem, 100%);
}

.documents-editor-meta--transit {
  margin-top: -0.35rem;
}

.contracts-editor-modal__head .documents-editor-meta--transit {
  margin-top: 0;
}

/* Иначе `.documents-editor-meta { display: flex }` перебивает атрибут hidden у того же тега. */
#contracts-transit-fields[hidden],
.documents-editor-meta.documents-editor-meta--transit[hidden] {
  display: none !important;
}

.documents-contracts-table-host {
  --contracts-table-row-divider: #cbd5e1;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  margin-top: 0.35rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elevated);
  box-shadow: 0 2px 10px var(--shadow-ambient);
  /* Не воспринимать контейнер как редактируемый — иначе клики по «пустому» месту дают мигающий карет */
  user-select: none;
  -webkit-user-modify: read-only;
}

html[data-theme="dark"] .documents-contracts-table-host {
  --contracts-table-row-divider: #475569;
}

.contracts-editor-modal {
  --contracts-modal-pad-t: max(0.65rem, env(safe-area-inset-top, 0px));
  --contracts-modal-pad-b: max(0.65rem, env(safe-area-inset-bottom, 0px));
  --contracts-modal-pad-x: max(0.65rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  /* Доступная высота под панель (один источник правды для max-height и flex) */
  --contracts-modal-inner-h: calc(100vh - var(--contracts-modal-pad-t) - var(--contracts-modal-pad-b));
  --contracts-modal-inner-h: calc(100dvh - var(--contracts-modal-pad-t) - var(--contracts-modal-pad-b));
  --contracts-modal-inner-h: calc(100svh - var(--contracts-modal-pad-t) - var(--contracts-modal-pad-b));
  /* Внешняя рамка всего попапа (шапка + контент + футер), заметная на светлом фоне листа */
  --contracts-modal-panel-ring-w: 2px;
  --contracts-modal-panel-ring: #64748b;
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  flex-direction: row;
  /* row: центр по горизонтали, по вертикали тянем панель на доступную высоту — иначе align-items:center даёт высоту по контенту и обрезает низ за пределами экрана */
  align-items: stretch;
  justify-content: center;
  min-height: 0;
  padding: var(--contracts-modal-pad-t) var(--contracts-modal-pad-x) var(--contracts-modal-pad-b);
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.contracts-editor-modal[hidden] {
  display: none !important;
}

.contracts-editor-modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  border: none;
  padding: 0;
  background: rgba(15, 23, 42, 0.52);
  cursor: pointer;
}

.contracts-editor-modal__close {
  position: absolute;
  top: max(0.35rem, env(safe-area-inset-top, 0px));
  right: max(0.35rem, env(safe-area-inset-right, 0px));
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  margin: 0;
  padding: 0;
  gap: 0;
  line-height: 0;
  font-size: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-modify: read-only;
  caret-color: transparent;
}

.contracts-editor-modal__close:hover {
  background: var(--bg-muted);
  color: var(--text-strong);
}

.contracts-editor-modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.contracts-editor-modal__close-icon {
  display: block;
  flex-shrink: 0;
}

.contracts-editor-modal__panel {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100vw - 2 * var(--contracts-modal-pad-x)));
  max-width: 100%;
  min-height: 0;
  margin: 0;
  flex: 0 1 auto;
  /* Высота = доступная зона оверлея (stretch по cross-axis); max-height дублирует предел для движков без полной поддержки min() */
  height: min(var(--contracts-modal-inner-h), 100%);
  max-height: var(--contracts-modal-inner-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  border: var(--contracts-modal-panel-ring-w) solid var(--contracts-modal-panel-ring);
  background: var(--bg-elevated);
  box-shadow: 0 28px 96px rgba(0, 0, 0, 0.42);
  box-sizing: border-box;
}

.contracts-editor-modal--draggable-preview {
  z-index: 1400;
  pointer-events: none;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.contracts-editor-modal--draggable-preview .contracts-editor-modal__backdrop {
  background: transparent;
  pointer-events: none;
}

.contracts-editor-modal--draggable-preview .contracts-editor-modal__panel {
  width: min(860px, calc(100vw - 2rem));
  height: min(86vh, calc(100vh - 2rem));
  max-height: min(86vh, calc(100vh - 2rem));
  transform: translate(var(--contracts-editor-drag-x, 0), var(--contracts-editor-drag-y, 0));
  cursor: grab;
  pointer-events: auto;
}

.contracts-editor-modal--draggable-preview /* Шапка договора: компактная карточка — строка действий, поля, комментарии, файлы. */
.contracts-editor-modal__head {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.contracts-editor-modal__head-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.6rem 3rem 0.6rem 1rem;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
}

.contracts-editor-modal__head-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.contracts-editor-modal__head-num {
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contracts-editor-modal__head-meta {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contracts-editor-modal__head-main {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-left: auto;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}

.contracts-editor-modal__status-label {
  margin: 0;
}

.contracts-editor-modal__status-label .documents-select {
  width: 9.4rem;
  height: 2rem;
  font-size: 0.81rem;
}

.contracts-editor-modal__head-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

button.contracts-editor-modal__head-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2rem;
  padding: 0 0.75rem;
  font-size: 0.81rem;
  white-space: nowrap;
}

.contracts-editor-modal__head-btn-icon {
  display: block;
  flex-shrink: 0;
}

/* Поля статуса: оплата на выгрузке (согласование) и водитель + дата («в пути»). */
.contracts-editor-modal__head-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 1rem;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
}

/* Пустая секция не должна занимать место и рисовать полосу. */
.contracts-editor-modal__head-fields:not(:has(> :not([hidden]))) {
  display: none;
}

.contracts-editor-modal__head-field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
  font-weight: 400;
}

.contracts-editor-modal__head-field[hidden] {
  display: none !important;
}

.contracts-editor-modal__head-field-label {
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--muted);
}

.contracts-editor-modal__head-field .documents-input {
  width: 100%;
  height: 2.15rem;
  font-size: 0.81rem;
  box-sizing: border-box;
}

/* Обёртка «в пути» раскрывается в общую сетку полей. */
.contracts-editor-modal__head-transit,
.contracts-editor-modal__head-transit.documents-editor-meta {
  display: contents;
  margin: 0;
  padding: 0;
  border: 0;
}

.contracts-editor-modal__head-transit[hidden] {
  display: none !important;
}

/* Комментарии + сумма: одна строка — руководитель, водитель, оплата на выгрузке. */
.contracts-editor-modal__agreement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  grid-template-areas:
    "prior prior prior"
    "manager driver pay"
    "hint hint hint"
    "photos photos photos";
  align-items: start;
  gap: 0.55rem 0.75rem;
  width: 100%;
  padding: 0.55rem 1rem;
  margin: 0;
  border-top: 0;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.contracts-editor-modal__agreement-row[hidden] {
  display: none !important;
}

.contracts-editor-modal__agreement-row .contracts-comment-prior {
  grid-area: prior;
}

.contracts-editor-modal__agreement-field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
  font-weight: 400;
}

.contracts-editor-modal__agreement-field:has(#contracts-f-manager-comment-manager) {
  grid-area: manager;
}

.contracts-editor-modal__agreement-field:has(#contracts-f-manager-comment-driver) {
  grid-area: driver;
}

.contracts-editor-modal__agreement-field[hidden] {
  display: none !important;
}

/* Сумма: место ровно под 5 знаков, ширину колонки задаёт подпись над полем. */
.contracts-editor-modal__agreement-field--pay {
  grid-area: pay;
  min-width: 0;
}

.contracts-editor-modal__agreement-field--pay .contracts-editor-modal__agreement-label {
  white-space: nowrap;
}

.contracts-editor-modal__agreement-pay-input {
  width: 100%;
  min-width: 5.4rem;
  max-width: 100%;
  height: 2.15rem;
  font-size: 0.81rem;
  box-sizing: border-box;
}

.contracts-editor-modal__agreement-label {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--muted);
}

.contracts-editor-modal__agreement-textarea {
  width: 100%;
  height: 2.15rem;
  min-height: 2.15rem;
  max-width: 100%;
  font-size: 0.81rem;
  line-height: 1.35;
  resize: vertical;
  box-sizing: border-box;
}

.contracts-editor-modal__agreement-textarea:read-only {
  background: var(--bg-muted);
  color: var(--text-strong);
}

.contracts-editor-modal__agreement-hint {
  grid-area: hint;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

.contracts-agreement-photos {
  grid-area: photos;
}

/* Файлы: компактные чипы. */
.contracts-editor-modal__head-signed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.6rem 1rem;
  margin: 0;
  border-top: 0;
  font-size: 0.78rem;
  color: var(--muted);
  box-sizing: border-box;
}

.contracts-editor-modal__head-signed-caption {
  font-size: 0.75rem;
  color: var(--muted);
  margin-right: 0.15rem;
}

.contracts-editor-modal__head-signed-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.contracts-editor-modal__head-signed-file {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.75rem;
  line-height: 1.2;
  background: var(--bg-elevated);
}

.contracts-editor-modal__head-signed-icon {
  display: block;
  flex-shrink: 0;
  color: var(--muted);
}

.contracts-editor-modal__head-signed-file .documents-link {
  text-decoration: none;
  white-space: nowrap;
}

.contracts-editor-modal__head-signed-file .documents-link:hover {
  text-decoration: underline;
}

.contracts-editor-modal__head-signed-filename {
  font-size: 0.75rem;
  color: var(--muted);
  word-break: break-word;
}

/* Кнопка добавления файла — в один ряд с чипами. */
#contracts-signed-contract-btn.documents-btn {
  height: 1.75rem;
  padding: 0 0.6rem;
  font-size: 0.75rem;
}

button.contracts-editor-modal__head-signed-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  min-width: 0;
  min-height: 0;
  margin: 0 0 0 0.1rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
}

button.contracts-editor-modal__head-signed-remove:hover {
  background: var(--bg-muted);
  color: var(--text-strong);
}

.contracts-editor-modal__head-signed-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
}

.contracts-editor-modal__head-signed-oral {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text);
  cursor: pointer;
}

.contracts-editor-modal__head-signed-oral input {
  margin: 0;
}

.contracts-editor-modal__head-signed-status {
  font-size: 0.78rem;
  color: var(--muted);
  flex: 1 1 100%;
}

/* display:flex на этих блоках иначе перебивает скрытие по атрибуту hidden */
.contracts-editor-modal__head-signed[hidden],
.contracts-editor-modal__head-signed-link[hidden],
.contracts-editor-modal__head-signed-upload[hidden] {
  display: none !important;
}

/* Плашка «только просмотр» дописывается в конец шапки — задаём ей поля секции. */
.contracts-editor-modal__head > .contracts-editor-readonly-notice {
  margin: 0;
  padding: 0.45rem 1rem;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}

.contracts-editor-modal__head > .contracts-editor-readonly-notice[hidden] {
  display: none !important;
}

/* Крестик закрытия попадает в строку действий шапки. */
.contracts-editor-modal__close {
  top: 0.72rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
}

@media (max-width: 900px) {
  .contracts-editor-modal__head-top {
    flex-wrap: wrap;
    padding-right: 2.6rem;
  }

  .contracts-editor-modal__head-main {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .contracts-editor-modal__head-fields,
  .contracts-editor-modal__agreement-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .contracts-editor-modal__agreement-row {
    grid-template-areas:
      "prior"
      "manager"
      "driver"
      "pay"
      "hint"
      "photos";
  }
}

.contracts-signed-contract-view-modal__panel {
  max-width: min(92vw, 52rem);
  width: min(92vw, 52rem);
}

.contracts-signed-contract-view-modal__frame-wrap {
  width: 100%;
  min-height: 12rem;
  max-height: min(72vh, 40rem);
  margin: 0 0 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-muted);
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contracts-signed-contract-view-modal__frame {
  display: block;
  width: 100%;
  height: min(72vh, 40rem);
  min-height: 12rem;
  border: none;
  background: var(--surface);
}

.contracts-signed-contract-view-modal__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(72vh, 40rem);
  margin: 0 auto;
  object-fit: contain;
}

.contracts-delete-confirm.contracts-signed-contract-view-modal .contracts-delete-confirm__panel {
  max-width: min(92vw, 52rem);
  width: min(92vw, 52rem);
}

.contracts-signed-contract-view-modal__row {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contracts-signed-contract-view-modal__open-tab {
  font-size: 0.88rem;
}

.documents-contracts-num-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
}

.documents-contracts-num-cell .documents-contracts-doc-link-btn {
  flex: 1;
  min-width: 0;
}

.documents-contracts-signed-check-dot {
  border: 0;
  padding: 0;
  margin: 0 0.15rem 0 0;
}

.documents-contracts-num-responsible {
  margin-top: 0.22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.documents-contracts-signed-contract-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  box-sizing: border-box;
}

.documents-contracts-signed-contract-btn:hover {
  border-color: var(--btn-hover-border);
  color: var(--text-strong);
  background: var(--bg-muted);
}

.documents-contracts-signed-contract-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.documents-contracts-signed-contract-btn svg {
  display: block;
  width: 14px;
  height: 14px;
}

.contracts-editor-modal__status-label {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.contracts-agreement-photos {
  grid-area: photos;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "photo-label"
    "photo-hint"
    "photo-grid";
  align-items: start;
  gap: 0.35rem;
  margin-top: 0;
}

.contracts-agreement-photos[hidden] {
  display: none !important;
}

.contracts-agreement-photos__head {
  display: contents;
}

#contracts-agreement-photos-label {
  grid-area: photo-label;
}

#contracts-agreement-photos-hint {
  grid-area: photo-hint;
}

#contracts-agreement-photos-add-btn.documents-btn {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  padding: 0;
  border: 2px solid var(--contracts-table-row-divider, var(--border));
  border-radius: 14px;
  background: var(--surface);
  color: var(--text-strong);
  font-size: 2rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}

#contracts-agreement-photos-add-btn.documents-btn[hidden] {
  display: none !important;
}

.contracts-agreement-photos__grid {
  grid-area: photo-grid;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contracts-agreement-photos__item {
  position: relative;
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--contracts-table-row-divider, var(--border));
  background: var(--bg-muted);
  padding: 0;
  cursor: pointer;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.contracts-agreement-photos__item:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 2px 8px var(--shadow-ambient);
}

.contracts-agreement-photos__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contracts-agreement-photos__remove {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.35rem;
  padding: 0.12rem 0.35rem;
  border: none;
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
}

.contracts-agreement-photos__remove:hover {
  background: #b91c1c;
}

.documents-contracts-agreement-photos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.35rem;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.12);
}

.contracts-editor-modal__head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.contracts-editor-modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.75rem 1rem 1rem;
  box-sizing: border-box;
}

.contracts-editor-modal__foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  min-height: 2.75rem;
  padding: 0.55rem 1rem 0.6rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .contracts-editor-modal__head-top {
    flex-direction: column;
    align-items: stretch;
  }

  .contracts-editor-modal__head-main {
    flex-basis: auto;
    width: 100%;
    justify-content: flex-start;
  }

  .contracts-editor-modal__head-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .contracts-editor-modal__head-transit {
    flex-direction: column;
    align-items: stretch;
  }

  .contracts-editor-modal__head-transit .documents-inline-label {
    width: 100%;
  }

  .contracts-editor-modal__head-signed {
    flex-direction: column;
    align-items: stretch;
  }

  .contracts-editor-modal__head-signed-upload {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Календарь выбора даты (договор, дата в пути) — поверх модалки договора */
.contracts-ru-date-picker {
  width: min(288px, calc(100vw - 1.25rem));
  padding: 0.45rem 0.5rem 0.55rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
  box-sizing: border-box;
  font-family: var(--font);
  font-size: 0.88rem;
  color: var(--text-main);
}

.contracts-ru-date-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.contracts-ru-date-picker__title {
  flex: 1;
  text-align: center;
  font-weight: 650;
  font-size: 0.9rem;
  color: var(--text-strong);
  text-transform: capitalize;
}

.contracts-ru-date-picker__nav {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-muted);
  color: var(--text-main);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.contracts-ru-date-picker__nav:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.contracts-ru-date-picker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.1rem;
  margin-bottom: 0.2rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.contracts-ru-date-picker__wd {
  padding: 0.15rem 0;
}

.contracts-ru-date-picker__grid {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.contracts-ru-date-picker__row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.12rem;
}

.contracts-ru-date-picker__pad {
  min-height: 2rem;
}

.contracts-ru-date-picker__day {
  min-height: 2rem;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
}

.contracts-ru-date-picker__day:hover {
  background: var(--accent-soft);
  border-color: rgba(74, 143, 111, 0.25);
}

.contracts-ru-date-picker__day--today {
  border-color: var(--border);
  background: var(--bg-muted);
}

.contracts-ru-date-picker__day--selected {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}

.contracts-ru-date-picker__day--selected:hover {
  filter: brightness(1.05);
  color: var(--text-on-accent);
}

.documents-contracts-table-wrap {
  /* Ширина по содержимому таблицы; горизонтальная прокрутка — на .documents-contracts-table-host */
  width: max-content;
  min-width: 100%;
  overflow: visible;
  user-select: none;
  -webkit-user-modify: read-only;
}

.documents-contracts-table {
  width: max-content;
  min-width: max(100%, 72rem);
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0 5px;
  font-size: 0.875rem;
  line-height: 1.35;
  user-select: text;
  -webkit-user-modify: read-only;
}

.documents-contracts-table th,
.documents-contracts-table td {
  padding: 0.58rem 0.7rem;
  vertical-align: middle;
  box-sizing: border-box;
  user-select: text;
}

.documents-contracts-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-muted);
  border-bottom: 2px solid var(--contracts-table-row-divider, var(--border));
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  hyphens: auto;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.documents-contracts-table tbody td {
  border-top: 1px solid var(--border);
  border-bottom: 2px solid var(--contracts-table-row-divider, var(--border));
  background: var(--bg-elevated);
}

.documents-contracts-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bg-muted) 32%, var(--bg-elevated));
}

html[data-theme="dark"] .documents-contracts-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--bg-muted) 24%, var(--bg-elevated));
}

.documents-contracts-table thead tr:first-child th:first-child {
  border-top-left-radius: 10px;
}

.documents-contracts-table thead tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

.documents-contracts-table tbody tr:hover td {
  background: color-mix(in srgb, var(--bg-muted) 72%, var(--bg-elevated));
  border-bottom-color: color-mix(in srgb, var(--contracts-table-row-divider, var(--border)) 65%, var(--accent) 35%);
}

.documents-contracts-col--num {
  text-align: center;
  white-space: nowrap;
  min-width: 14.5rem;
  max-width: min(22rem, 42vw);
  padding-left: 0.85rem;
  padding-right: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.documents-contracts-col--status {
  text-align: center;
  white-space: normal;
  min-width: 9.5rem;
  max-width: min(18rem, 40vw);
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.documents-contracts-col--manager {
  text-align: center;
  white-space: nowrap;
  min-width: 8.75rem;
  max-width: 13rem;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.documents-contracts-col--sum {
  text-align: center;
  white-space: nowrap;
  min-width: 7.25rem;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.documents-contracts-col--transit-driver {
  text-align: center;
  white-space: normal;
  min-width: 8.5rem;
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.documents-contracts-driver-phones {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  line-height: 1.25;
}

.documents-contracts-driver-phones__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  white-space: nowrap;
}

.documents-contracts-col--transit-eta {
  text-align: center;
  white-space: normal;
  min-width: 8rem;
  max-width: 9.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.8rem;
}

.documents-contracts-table thead .documents-contracts-col--transit-eta {
  white-space: normal;
}

.documents-contracts-delivery-dates {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.12rem;
  line-height: 1.15;
  white-space: nowrap;
}

.documents-contracts-delivery-dates__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.documents-contracts-delivery-dates__row--fact {
  color: inherit;
  font-weight: inherit;
}

.documents-contracts-delivery-date-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  min-width: 0;
  color: inherit;
  font: inherit;
  line-height: 1.25;
}

.documents-contracts-delivery-date-edit__label {
  flex: 0 0 auto;
}

.documents-contracts-delivery-date-edit__input {
  width: 5.7rem;
  min-width: 0;
  padding: 0.08rem 0.12rem;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.2;
}

.documents-contracts-delivery-date-edit__input:hover,
.documents-contracts-delivery-date-edit__input:focus {
  border-color: var(--border);
  background: var(--bg);
  outline: none;
}

.documents-contracts-col--actions {
  text-align: center;
  white-space: nowrap;
  width: 10rem;
  min-width: 10rem;
  max-width: 10rem;
  padding: 0.35rem 0.25rem;
  vertical-align: middle;
}

.documents-contracts-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    color 0.12s ease,
    background 0.12s ease;
}

.documents-contracts-delete-btn:hover {
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.12);
}

.documents-contracts-delete-btn--danger {
  color: #b91c1c;
}

.documents-contracts-delete-btn--danger:hover {
  color: #7f1d1d;
  background: rgba(185, 28, 28, 0.18);
}

.documents-contracts-reserve-btn {
  color: #64748b;
}

.documents-contracts-reserve-btn:hover {
  color: #334155;
  background: rgba(100, 116, 139, 0.12);
}

.documents-contracts-reserve-btn--active {
  color: #28724f;
}

.documents-contracts-reserve-btn--active:hover {
  color: #14532d;
  background: rgba(74, 143, 111, 0.14);
}

.contracts-dispatch-modal__panel { width: min(620px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 28px)); overflow: auto; text-align: left; }
.contracts-dispatch-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* margin-right: auto прижимает переключатель к заголовку, иначе space-between
   развесил бы его посередине между заголовком и крестиком. */
.contracts-dispatch-simple {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    margin-right: auto;
    font-size: 13px;
    color: #475569;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.contracts-dispatch-simple input { margin: 0; cursor: pointer; }
.contracts-dispatch-modal__close { border: 0; background: transparent; color: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
.contracts-dispatch-current { margin-top: 10px; overflow: hidden; color: var(--text-muted, #475569); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.contracts-dispatch-order { margin: 14px 0 18px; overflow-x: auto; }
.contracts-dispatch-order table { width: 100%; border-collapse: collapse; font-size: 13px; }
.contracts-dispatch-order th, .contracts-dispatch-order td { padding: 8px 10px; border: 1px solid rgba(127,127,127,.28); text-align: left; vertical-align: top; }
.contracts-dispatch-order th:last-child, .contracts-dispatch-order td:last-child { width: 90px; text-align: right; white-space: nowrap; }
.contracts-dispatch-order td[data-dispatch-name-cell] { cursor: text; }
.contracts-dispatch-order td[data-dispatch-name-cell]:hover { background: rgba(127, 127, 127, .06); }
.contracts-dispatch-order td[data-dispatch-name-cell]:focus {
    outline: 2px solid #2f7d5f;
    outline-offset: -2px;
    background: #fff;
}
.contracts-dispatch-field { display: grid; gap: 6px; margin-top: 13px; font-weight: 700; }
.contracts-dispatch-field select { font-weight: 400; }
.contracts-dispatch-warehouse-email-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; }
.contracts-dispatch-field--compact { width: max-content; max-width: 100%; }
.contracts-dispatch-field--compact select { width: auto; min-width: 9rem; max-width: 100%; }
.contracts-dispatch-messenger-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 24px; }
.contracts-dispatch-recipients { display: flex; flex-wrap: wrap; gap: 10px 24px; padding-bottom: 9px; }
.contracts-dispatch-recipients[hidden] { display: none; }
.contracts-dispatch-recipient { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.contracts-dispatch-recipient[hidden] { display: none; }
.contracts-dispatch-recipient input { width: 18px; height: 18px; }
@media (max-width: 700px) { .contracts-dispatch-messenger-row { align-items: stretch; flex-direction: column; } .contracts-dispatch-recipients { padding-bottom: 0; } }
@media (max-width: 700px) { .contracts-dispatch-warehouse-email-row { grid-template-columns: 1fr; gap: 0; } }
.contracts-dispatch-date-field { width: max-content; max-width: 100%; }
.contracts-dispatch-date-control { display: flex; align-items: stretch; gap: 7px; }
.contracts-dispatch-date-control input { width: 10rem; }
.contracts-dispatch-date-btn { display: inline-grid; width: 42px; min-height: 42px; place-items: center; border: 1px solid rgba(127,127,127,.35); border-radius: 9px; background: var(--surface, #fff); color: inherit; cursor: pointer; }
.contracts-dispatch-date-btn:disabled { cursor: default; opacity: .5; }
.contracts-dispatch-comment textarea { min-height: 58px; resize: vertical; font: inherit; font-weight: 400; line-height: 1.4; }
.contracts-dispatch-check { display: flex; align-items: center; gap: 9px; margin-top: 16px; cursor: pointer; }
.contracts-dispatch-check input { width: 18px; height: 18px; }
.contracts-dispatch-status { min-height: 20px; margin: 12px 0 0; color: var(--danger, #b91c1c); font-size: 13px; }
.contracts-dispatch-modal__actions { margin-top: 8px; }
.contracts-dispatch-result-view { padding-top: 18px; }
.contracts-dispatch-result-list { display: grid; gap: 10px; }
.contracts-dispatch-result-row { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 10px 13px; border: 1px solid rgba(127,127,127,.25); border-radius: 10px; }
.contracts-dispatch-result-row__icon { display: inline-grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border-radius: 50%; }
.contracts-dispatch-result-row--pending .contracts-dispatch-result-row__icon { border: 3px solid rgba(37,99,235,.2); border-top-color: #2563eb; animation: contracts-dispatch-spin .75s linear infinite; }
.contracts-dispatch-result-row--success .contracts-dispatch-result-row__icon { background: #16a34a; color: #fff; }
.contracts-dispatch-result-row--error .contracts-dispatch-result-row__icon { background: #dc2626; color: #fff; }
.contracts-dispatch-result-row__body { display: grid; gap: 2px; }
.contracts-dispatch-result-row__label { font-weight: 700; }
.contracts-dispatch-result-row__detail { color: var(--text-muted, #64748b); font-size: 13px; }
@keyframes contracts-dispatch-spin { to { transform: rotate(360deg); } }
.documents-contracts-dispatch-btn { color: #2563eb; }
.documents-contracts-dispatch-btn:hover { color: #1d4ed8; background: rgba(37, 99, 235, .1); }

@media (min-width: 961px) {
  .contracts-dispatch-modal .contracts-dispatch-modal__panel {
    width: min(1080px, calc(100vw - 80px));
    max-width: none;
  }
}

.documents-contracts-driver-btn {
  color: #4a8f6f;
}

.documents-contracts-driver-btn:hover {
  color: #28724f;
  background: rgba(74, 143, 111, 0.14);
}

.documents-contracts-delete-btn:focus:not(:focus-visible) {
  outline: none;
}

.documents-contracts-delete-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.documents-contracts-table .documents-btn:focus:not(:focus-visible) {
  outline: none;
}

.documents-contracts-col--comment {
  text-align: left;
  vertical-align: top;
  min-width: 10.5rem;
  max-width: min(20rem, 36vw);
  padding: 0.45rem 0.55rem;
}

.documents-contracts-comment-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
}

.documents-contracts-comment-cell__text {
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text-strong);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  word-break: break-word;
}

.documents-contracts-comment-cell__pay {
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--accent-strong);
}

.documents-contracts-comment-cell__text--empty {
  color: var(--muted);
}

.documents-contracts-comment-cell__text--followup {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.contracts-comment-prior {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.15rem;
}

.contracts-comment-prior__item {
  font-size: 0.84rem;
  line-height: 1.35;
  color: var(--text-strong);
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: var(--bg-muted);
  white-space: pre-wrap;
  word-break: break-word;
}

.contracts-comment-prior__audience {
  display: inline-flex;
  align-items: center;
  margin-right: 0.45rem;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: rgba(74, 143, 111, 0.12);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.contracts-comment-prior__item--followup {
  margin-top: 0.1rem;
}

.contracts-comment-prior__row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.contracts-comment-prior__row--followup {
  margin-top: 0.1rem;
}

.contracts-comment-prior__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.contracts-comment-prior__edit,
.contracts-comment-prior__delete {
  font-size: 0.78rem;
  padding: 0.22rem 0.45rem;
}

.contracts-comment-prior__delete {
  color: var(--danger, #b42318);
  border-color: color-mix(in srgb, var(--danger, #b42318) 35%, var(--border));
}

.contracts-comment-modal .contracts-comment-prior {
  margin-bottom: 0.55rem;
}

.documents-contracts-comment-btn {
  align-self: flex-start;
  font-size: 0.78rem;
  padding: 0.28rem 0.5rem;
  white-space: nowrap;
}

.documents-contracts-claims-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.documents-contracts-claims-btn {
  margin-top: 0;
}

.documents-contracts-claims-thumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
  margin-top: 0;
  padding-top: 0.28rem;
}

.documents-contracts-claims-item {
  position: relative;
  flex: 0 0 auto;
}

.documents-contracts-claims-remove {
  position: absolute;
  top: -0.38rem;
  right: -0.38rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.82rem;
  height: 0.82rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #c62828;
  color: #fff;
  box-shadow: 0 0 0 1.5px #fff;
  cursor: pointer;
}

.documents-contracts-claims-remove svg {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
}

.documents-contracts-claims-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
}

.documents-contracts-claims-thumb svg {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
}

.documents-contracts-claims-thumb__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.documents-contracts-claims-thumb--image {
  border: 1px solid var(--border);
  background: var(--bg-muted);
}

.contracts-claim-modal__file-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.7rem;
}

.contracts-claim-modal__filename {
  min-width: 0;
  font-size: 0.82rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contracts-claim-text-modal__body {
  margin: 0 0 0.8rem;
  max-height: min(24rem, 60vh);
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-strong);
}

.documents-contracts-col--address {
  text-align: left;
  white-space: normal;
  max-width: min(18rem, 38vw);
  min-width: 11rem;
  width: auto;
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}

.documents-contracts-table__addr {
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: pre-wrap;
}

.documents-contracts-address-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.32rem;
  min-width: 0;
}

.documents-contracts-address-cell__warehouse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.documents-contracts-address-cell__warehouse-select {
  min-width: 7.8rem;
  max-width: 100%;
}

.documents-contracts-address-cell__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}

.documents-contracts-address-cell__boxes {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.documents-contracts-col--status .documents-card__status {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}

.documents-contracts-status-since {
  margin-top: 0.28rem;
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--muted);
  white-space: normal;
}

.documents-contracts-status-photos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.35rem;
}

.documents-contracts-status-photos__thumb {
  flex: 0 0 auto;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  margin: 0;
  border: 1px solid var(--contracts-table-row-divider, var(--border));
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-muted);
  cursor: pointer;
}

.documents-contracts-status-photos__thumb:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 2px 6px var(--shadow-ambient);
}

.documents-contracts-status-photos__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.documents-contracts-table__num {
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* Кнопка вместо focusable <td> — иначе в Chromium при фокусе мигает текстовый карет */
.documents-contracts-doc-link-btn {
  font: inherit;
  font-weight: inherit;
  font-variant-numeric: inherit;
  line-height: inherit;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.documents-contracts-col--num .documents-contracts-doc-link-btn {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.documents-contracts-col--manager .documents-contracts-doc-link-btn {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  text-align: center;
}

.documents-contracts-table__num--clickable {
  cursor: pointer;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
}

.documents-contracts-table__num--clickable:hover {
  color: var(--text-strong);
  text-decoration-color: var(--accent);
}

/* Клик мышью не должен оставлять «полоску» фокуса как у текстового курсора */
.documents-contracts-table__num--clickable:focus:not(:focus-visible) {
  outline: none;
}

.documents-contracts-table__num--clickable:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

.documents-contracts-table__sum {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.documents-contracts-table__actions {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.documents-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-strong);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-modify: read-only;
  caret-color: transparent;
}

.documents-btn--loading {
  cursor: wait;
}

.documents-btn--loading::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  flex: 0 0 auto;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  opacity: 0.9;
  animation: brik-btn-spin 0.75s linear infinite;
}

.documents-btn--icon.documents-btn--loading::before {
  margin: 0;
}

@keyframes brik-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

a.documents-btn {
  text-decoration: none;
  color: inherit;
}

.documents-btn--primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--text-on-accent);
}

.documents-btn__plus {
  width: 1.15rem;
  height: 1.15rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: currentColor;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

.documents-btn--secondary {
  background: var(--bg-muted);
}

.documents-btn--ghost {
  background: transparent;
}

.documents-btn--danger {
  background: rgba(185, 28, 28, 0.12);
  border-color: rgba(185, 28, 28, 0.35);
  color: #b91c1c;
}

.documents-btn--danger:hover {
  background: rgba(185, 28, 28, 0.18);
}

.documents-btn--sm {
  padding: 0.28rem 0.55rem;
  font-size: 0.8rem;
}

.documents-btn--icon {
  padding: 0.2rem 0.45rem;
  min-width: 2rem;
  font-size: 1.1rem;
  line-height: 1;
}

.chat-test-sms-btn {
  min-height: 2.35rem;
  padding: 0.45rem 0.72rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.chat-test-sms-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.chat-test-sms-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.chat-test-sms-modal[hidden] {
  display: none !important;
}

.chat-test-sms-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.42);
  cursor: pointer;
}

.chat-test-sms-modal__panel {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(480px, 100%);
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
}

.chat-test-sms-modal__head,
.chat-test-sms-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.chat-test-sms-modal__title {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
}

.chat-test-sms-modal__close {
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-muted);
  color: var(--text);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.chat-test-sms-modal__field {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.chat-test-sms-modal__text {
  min-height: 6rem;
  resize: vertical;
}

.chat-test-sms-modal__error {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(185, 28, 28, 0.28);
  border-radius: 12px;
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
  font-size: 0.86rem;
  line-height: 1.35;
}

/* ——— Сметы ——— */
#section-estimates.crm-section {
  width: 100%;
  align-self: stretch;
  flex: 1;
  min-height: 0;
  min-width: 0;
}







/* ——— Закупки ——— */
#section-powers-of-attorney.crm-section {
  width: 100%;
  align-self: stretch;
}

.powers-panel {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  align-self: stretch;
  gap: 1rem;
  overflow: auto;
  padding-top: 1.35rem;
}

.powers-head,
.powers-card__head,
.powers-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.powers-card {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(25, 53, 40, 0.08);
}

.powers-panel > .powers-card + .powers-card,
.powers-panel > .powers-card + .powers-grid,
.powers-panel > .powers-card + .powers-panes {
  margin-top: 1.25rem;
}



.powers-card__title {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}

.powers-subhead {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.powers-card__actions--under-title {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.powers-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  margin-top: 0.85rem;
}

.powers-pagination[hidden] {
  display: none;
}

.powers-history-toolbar .powers-search-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 32rem;
}

.powers-card__actions .documents-btn svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

.powers-card__actions .documents-btn[hidden] {
  display: none;
}

.powers-card__actions .powers-supplier-edit-action {
  min-width: 2.05rem;
  width: 2.05rem;
  height: 2.05rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.powers-card__actions .powers-supplier-edit-action[hidden] {
  display: none;
}

.powers-card__actions .documents-btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.powers-table-wrap {
  margin-top: 0.85rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.powers-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  background: var(--surface);
}

.powers-table--registry tr.is-editing td {
  background: rgba(74, 124, 98, 0.05);
}

/* ——— Выставить счет ——— */
#section-issue-invoice.crm-section {
  width: 100%;
  align-self: stretch;
}

.invoices-panel .documents-input:disabled {
  opacity: 0.72;
  cursor: default;
  background: var(--bg-placeholder, #f3f4f6);
  color: var(--muted);
}

.invoices-onec-status {
  margin: 0 0 0.85rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(234, 179, 8, 0.35);
  border-radius: 12px;
  background: rgba(254, 249, 195, 0.55);
  color: var(--text);
  font-size: 0.85rem;
}

.invoices-onec-status[hidden] {
  display: none;
}

.invoices-contract-combo {
  position: relative;
}

.invoices-contract-results {
  position: absolute;
  z-index: 40;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 100%;
  width: max(100%, 22rem);
  max-width: min(32rem, calc(100vw - 2rem));
  max-height: 18rem;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
  padding: 0.35rem;
}

.invoices-contract-results[hidden] {
  display: none;
}

.invoices-contract-results__item {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  font: inherit;
}

.invoices-contract-results__item:hover,
.invoices-contract-results__item:focus-visible,
.invoices-contract-results__item.is-active {
  background: rgba(74, 143, 111, 0.11);
  outline: none;
}

.invoices-contract-results__empty {
  color: var(--muted);
  font-size: 0.82rem;
  padding: 0.55rem 0.65rem;
}

.invoices-registry-table.is-busy {
  pointer-events: none;
}

.invoices-registry-busy__spinner {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 2px solid var(--accent, #4a8f6f);
  border-right-color: transparent;
  border-radius: 999px;
  animation: brik-btn-spin 0.75s linear infinite;
}

#bill-registry-delete.documents-btn--loading:disabled {
  opacity: 1;
  cursor: wait;
}

.invoices-amount {
  font-weight: 650;
  white-space: nowrap;
}

.invoices-actions-cell,
.powers-table--bills td:nth-child(8) {
  white-space: nowrap;
}

.invoices-badge {
  display: inline-block;
  padding: 0.14rem 0.5rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 650;
}

.invoices-badge--sent {
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
}

.invoices-badge--error {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.invoices-badge--skipped {
  background: rgba(148, 163, 184, 0.2);
  color: var(--muted);
}

.invoices-retry-btn {
  margin-left: 0.4rem;
}

/* Кнопка УПД в реестре счетов: до формирования — обычная, после — с зелёной галочкой. */
/* Действия в строке реестра: текстовая кнопка и иконки одной высоты. */
/*
 * Ячейку действий флексом не делаем: у `.powers-table td` стоит height: 1px
 * (трюк для растягивания вложенных блоков), и флекс-контейнер из-за него
 * съезжает вверх относительно строки. Кнопки выравниваем как inline-элементы.
 */
.invoices-actions-cell {
  text-align: right;
}

.invoices-actions-cell .documents-btn {
  vertical-align: middle;
}

/*
 * Высота иконок собирается из тех же слагаемых, что у «Скачать PDF»: те же
 * вертикальные отступы .documents-btn--sm плюс размер значка вместо строки текста.
 */
.invoices-upd-btn,
.invoices-eye-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  padding: 0.28rem;
  line-height: 0;
}

.invoices-eye-btn {
  margin-right: 0.35rem;
}

.invoices-upd-btn {
  margin-left: 0.35rem;
}

.invoices-upd-btn svg,
.invoices-eye-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Просмотр счёта: окно шире обычного, внутри — тот же PDF, что скачивается. */
.bill-modal .bill-modal__box--wide {
  width: min(72rem, 96vw);
  max-height: 94vh;
  padding: 0.8rem 0.9rem 0.7rem;
}

.bill-modal .bill-modal__box--wide .bill-modal__body {
  display: block;
}

.bill-preview__frame {
  width: 100%;
  height: min(78vh, 52rem);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-muted);
}

/* Пока PDF собирается, окно уже открыто — в нём крутится ожидание. */
.bill-preview__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: min(78vh, 52rem);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: 0.86rem;
}

.bill-preview__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent, #4a7c62);
  border-radius: 50%;
  animation: bill-preview-spin 0.9s linear infinite;
}

@keyframes bill-preview-spin {
  to {
    transform: rotate(360deg);
  }
}


.invoices-upd-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

.invoices-upd-btn.is-ready {
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.1);
}

/* Модалка раздела «Выставить счет»: одна задача на окно — УПД, реквизиты, карточка контрагента. */
.bill-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.bill-modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-backdrop);
}

.bill-modal__box {
  position: relative;
  width: min(28rem, 100%);
  max-height: 90vh;
  overflow: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 24px 60px var(--shadow-ambient-lg);
  padding: 1rem 1.1rem 0.9rem;
}

.bill-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.bill-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--text-strong);
}

.bill-modal__close {
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0 0.2rem;
}

.bill-modal__close:hover {
  color: var(--text-main);
}

.bill-modal__body {
  display: grid;
  gap: 0.5rem;
}

.bill-modal__line {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-main);
}

.bill-modal__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.bill-modal__hint--warn {
  color: #b45309;
}

.bill-modal__field {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}

.bill-modal__email {
  margin-top: 0.35rem;
}

.bill-modal__status {
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.bill-modal__status.is-error {
  color: #b91c1c;
}

.bill-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

/* Реестр контрагентов: длинные адреса не должны растягивать таблицу. */
.powers-table--counterparties td {
  vertical-align: top;
}

.bill-counterparties__name {
  font-weight: 600;
}

.bill-counterparties__address {
  max-width: 24rem;
  white-space: normal;
}

.bill-counterparties__status {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.bill-counterparties__action {
  padding-inline: 0.45rem;
}

.bill-counterparties__action + .bill-counterparties__action {
  margin-left: 0.3rem;
}

.bill-counterparties__action svg {
  width: 16px;
  height: 16px;
  display: block;
}

.bill-modal__upload {
  width: 100%;
  justify-content: center;
  margin-top: 0.2rem;
}

/* Поиск и список контрагентов — одно поле: строка ввода, под ней сразу варианты. */
.bill-combo {
  position: relative;
}

.bill-combo__list {
  margin-top: 0.35rem;
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-panel);
}

.bill-combo__item {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text-main);
}

.bill-combo__item:last-child {
  border-bottom: 0;
}

.bill-combo__item:hover,
.bill-combo__item.is-active {
  background: var(--bg-muted);
}

.bill-combo__name {
  font-size: 0.86rem;
  font-weight: 600;
}

.bill-combo__meta {
  font-size: 0.76rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bill-combo__empty {
  margin: 0;
  padding: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* Кнопка выбора товара в ячейке «Товар»: открывает тот же мастер, что в договоре. */
.bill-sheet__col-name {
  position: relative;
}

.bill-sheet__nom-pick {
  position: absolute;
  right: 3px;
  top: 3px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  cursor: pointer;
  opacity: 0.65;
}

.bill-sheet__nom-pick:hover,
.bill-sheet__col-name:focus-within .bill-sheet__nom-pick {
  opacity: 1;
  color: var(--text-main);
  border-color: var(--btn-hover-border);
}

.bill-sheet__nom-pick svg {
  width: 13px;
  height: 13px;
  display: block;
}

/* Место под кнопку, чтобы длинное наименование не заезжало под неё. */
.bill-sheet__inp--name {
  padding-right: 26px;
}

.bill-sheet__buyer-file.is-dragover #bill-buyer-fill-from-file,
#bill-buyer-fill-from-file.is-dragover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-muted));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent);
}

.bill-sheet__buyer-file.is-recognizing .bill-sheet__buyer-file-spinner {
  display: inline-block;
}

.bill-sheet__buyer-file-status.is-busy {
  color: #4b5563;
}

.bill-sheet__buyer-file-status.is-error {
  color: #b91c1c;
}

.bill-sheet__buyer-file-status.is-ok {
  color: #047857;
}

.bill-sheet__inp--cell {
  width: 100%;
  border-bottom-color: transparent;
}

.bill-sheet__inp--cell:hover {
  border-bottom-color: #cbd5f5;
}

select.bill-sheet__inp--cell {
  cursor: pointer;
  min-width: 0;
}

.bill-sheet__inp--name {
  display: block;
  resize: none;
  overflow: hidden;
  min-height: 1.35em;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.bill-sheet__items td.bill-sheet__col-price .bill-sheet__inp--cell,
.bill-sheet__items td.bill-sheet__col-qty .bill-sheet__inp--cell {
  text-align: right;
}

.bill-sheet__sum-cell {
  text-align: right;
  white-space: nowrap;
}

.bill-sheet__row-del {
  padding: 0 0.25rem;
  border: none;
  background: transparent;
  color: #b91c1c;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.bill-sheet--pdf-export .bill-no-print {
  display: none !important;
}

.bill-sheet-wrap--pdf-export {
  overflow: visible;
}

.bill-sheet--pdf-export {
  min-height: 0;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.bill-sheet--pdf-export .bill-sheet__bank-with-qr {
  flex-wrap: nowrap;
}

.bill-sheet--pdf-export .bill-sheet__payment-qr {
  width: 84px;
  height: 84px;
}

.bill-sheet--pdf-export .bill-sheet__stamp {
  display: block;
  width: min(190px, 94%);
  height: auto;
  max-height: 42mm;
  aspect-ratio: 386 / 308;
  object-fit: contain;
  top: auto;
  bottom: 0;
  transform: translate(-50%, 48%);
  transform-origin: center center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.bill-sheet--pdf-export .bill-sheet__inp {
  border-color: transparent;
  border-bottom-color: transparent;
  background: transparent;
}

.bill-sheet--pdf-export select.bill-sheet__inp {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 0.25rem;
}



.powers-table th,
.powers-table td {
  padding: 0.58rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.powers-table td {
  height: 1px;
}

.powers-table__action-group .documents-btn + .documents-btn {
  margin-left: 0;
}

.powers-table th {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(74, 124, 98, 0.08);
}

.powers-table tbody tr:last-child td {
  border-bottom: 0;
}

.powers-table tbody tr.is-selected td {
  background: rgba(74, 124, 98, 0.1);
}

.powers-table__actions--center .documents-btn {
  margin-top: 0;
}

.powers-table__actions .documents-btn + .documents-btn {
  margin-left: 0.35rem;
}

.powers-search-input {
  width: min(100%, 24rem);
}

.powers-search-input--inline {
  width: min(18rem, 36vw);
  min-height: 2.05rem;
}

.powers-driver-ai .documents-btn {
  justify-self: flex-start;
}

.powers-route-rate .documents-input {
  width: min(100%, 24rem);
}

.powers-route-actions .documents-btn {
  width: auto;
  min-width: 8.5rem;
}

.powers-supplier-products > .documents-btn,
.powers-supplier-send-request {
  width: max-content;
  max-width: max-content;
  flex: 0 0 auto;
  align-self: flex-start;
  white-space: nowrap;
}



.documents-btn--icon svg {
  width: 1rem;
  height: 1rem;
  display: block;
  flex: 0 0 auto;
}

.powers-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.86rem;
  color: var(--muted);
}



.powers-error {
  margin: 0;
}

@media (max-width: 860px) {
  .powers-head,
  .powers-card__head {
    align-items: stretch;
    flex-direction: column;
  }

  .powers-card__actions,
  .powers-card__actions--bottom {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.documents-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-top: 0.25rem;
}

.documents-empty {
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.documents-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: var(--bg-elevated);
  box-shadow: 0 2px 10px var(--shadow-ambient);
}

.documents-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.documents-card__type {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.documents-card__status {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}

.documents-card__status--draft {
  background: var(--bg-muted);
  color: var(--muted);
}

.documents-card__status--ready {
  background: rgba(74, 143, 111, 0.15);
  color: var(--accent);
}

.documents-card__status--pending-agreement {
  background: rgba(217, 119, 6, 0.14);
  color: #b45309;
}

.documents-card__status--rejected-agreement {
  background: rgba(220, 38, 38, 0.14);
  color: #b91c1c;
}

.documents-card__status--agreed {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

.documents-card__status--signed-ready {
  background: rgba(234, 179, 8, 0.18);
  color: #a16207;
}

.documents-card__status--in-transit {
  background: rgba(6, 182, 212, 0.14);
  color: #0e7490;
}

.documents-card__status--paid-unloaded {
  background: rgba(22, 163, 74, 0.14);
  color: #15803d;
}

.documents-card__status--paid-not-unloaded {
  background: linear-gradient(
    90deg,
    rgba(22, 163, 74, 0.22) 0%,
    rgba(22, 163, 74, 0.22) 50%,
    rgba(220, 38, 38, 0.2) 50%,
    rgba(220, 38, 38, 0.2) 100%
  );
  color: #1f2937;
}

.documents-card__status--unloaded-not-paid {
  background: rgba(220, 38, 38, 0.16);
  color: #b91c1c;
}

.documents-card__status--return {
  background: rgba(107, 114, 128, 0.16);
  color: #4b5563;
}

.documents-card__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-strong);
}

.documents-card__meta {
  font-size: 0.84rem;
  color: var(--muted);
  margin: 0.2rem 0 0.35rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.documents-card__sum {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-strong);
}

.documents-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.contracts-delete-confirm {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

/* Просмотр вложений поверх редактора договора (оба на body) */
.contracts-signed-contract-view-modal.contracts-delete-confirm {
  z-index: 12600;
}

.contracts-delete-confirm[hidden] {
  display: none !important;
}

.contracts-delete-confirm__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: var(--overlay-backdrop);
  cursor: pointer;
}

.contracts-delete-confirm__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 22rem;
  padding: 1.1rem 1.15rem 1rem;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px var(--shadow-ambient);
}

.contracts-delete-confirm__title {
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-strong);
}

.contracts-delete-confirm__msg {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}

.contracts-delete-confirm__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.contracts-delete-confirm__danger {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.35);
}

.contracts-comment-modal__panel {
  max-width: 30rem;
}

.contracts-comment-modal__label {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
}

.contracts-comment-modal__pay,
.contracts-comment-modal__audience {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-strong);
}

.contracts-comment-modal__pay-input {
  max-width: 9rem;
}

.contracts-comment-modal__audience {
  align-items: flex-start;
  flex-direction: column;
  gap: 0.35rem;
}

.contracts-comment-modal__audience-select {
  width: 100%;
}

.contracts-comment-modal__textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-base);
  color: var(--text-strong);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.4;
  resize: vertical;
  min-height: 5.5rem;
}

.contracts-comment-modal__textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.contracts-comment-modal__row {
  margin-top: 0.15rem;
}

.contracts-ati-launch-modal__panel {
  padding: 0;
  max-width: 32rem;
}

.contracts-ati-launch-modal .contracts-delete-confirm__backdrop {
  z-index: 0;
}

.contracts-ati-launch-modal__panel.drivers-merge-modal__panel {
  position: relative;
  z-index: 1;
}

.contracts-ati-launch-type {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0;
  padding: 0.75rem 0.85rem 0;
  border: 0;
}

.contracts-ati-launch-type__legend {
  grid-column: 1 / -1;
  margin: 0 0 0.1rem;
  padding: 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 650;
}

.contracts-ati-launch-type__option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: #fff;
  color: var(--text-main);
  font-size: 0.86rem;
  cursor: pointer;
}

.contracts-ati-launch-type__option:hover {
  border-color: var(--btn-hover-border);
  background: rgba(74, 124, 98, 0.06);
}

.contracts-ati-launch-type__option input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--accent);
}

.contracts-ati-launch-search {
  display: block;
  padding: 0.6rem 0.85rem 0;
}

.contracts-ati-launch-search .documents-input {
  width: 100%;
}

.contracts-ati-launch-search__hint {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.contracts-stock-reserve-modal__panel {
  max-width: 28rem;
}

.contracts-stock-reserve-modal__hint {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.contracts-stock-reserve-modal__row {
  gap: 0.45rem;
}

.contracts-stock-reserve-result-modal__panel {
  max-width: 34rem;
}

.contracts-stock-reserve-result-modal__body {
  display: grid;
  gap: 0.75rem;
  margin: 0.2rem 0 1rem;
}

.contracts-stock-reserve-result-modal__status {
  margin: 0;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.4;
}

.contracts-stock-reserve-result-modal__status--success {
  background: rgba(74, 143, 111, 0.13);
  color: #28724f;
}

.contracts-stock-reserve-result-modal__status--warning {
  background: rgba(217, 119, 6, 0.13);
  color: #a16207;
}

.contracts-stock-reserve-result-modal__status--danger {
  background: rgba(185, 28, 28, 0.12);
  color: #b91c1c;
}

.contracts-stock-reserve-result-modal__block {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-muted);
  padding: 0.7rem 0.8rem;
}

.contracts-stock-reserve-result-modal__subtitle {
  margin: 0 0 0.45rem;
  color: var(--text-strong);
  font-size: 0.9rem;
  font-weight: 700;
}

.contracts-stock-reserve-result-modal__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}

.contracts-stock-reserve-result-modal__item {
  position: relative;
  padding-left: 1rem;
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.45;
}

.contracts-stock-reserve-result-modal__item::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.55em;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: var(--muted);
}

.contracts-stock-reserve-result-modal__item--success::before {
  background: #28724f;
}

.contracts-stock-reserve-result-modal__item--danger::before {
  background: #b91c1c;
}

.contracts-stock-reserve-result-modal__row {
  margin-top: 0.25rem;
}

.documents-editor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.documents-editor-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.documents-editor-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  margin: 0 0 0.85rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.documents-editor-meta__sep {
  opacity: 0.45;
}

.documents-inline-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.documents-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 0.65rem 0.85rem;
  margin-bottom: 1rem;
}

#factory-payments-form .documents-actions {
  margin-top: 1rem;
}

.factory-history {
  margin-top: 1.75rem;
}

.factory-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
}

.factory-history__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

.factory-history__table-wrap {
  margin-top: 0.85rem;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.factory-history__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--surface);
  table-layout: fixed;
}

.factory-history__table th,
.factory-history__table td {
  padding: 0.58rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.factory-history__table th {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(74, 124, 98, 0.08);
}

.factory-history__table tbody tr:last-child td {
  border-bottom: 0;
}

.factory-history__table th:nth-child(1),
.factory-history__table td:nth-child(1) {
  width: 14%;
}

.factory-history__table th:nth-child(2),
.factory-history__table td:nth-child(2),
.factory-history__table th:nth-child(3),
.factory-history__table td:nth-child(3) {
  width: 18%;
}

.factory-history__date {
  white-space: nowrap;
}

.factory-history__text {
  white-space: pre-wrap;
  max-height: 8.5em;
  overflow-y: auto;
}

.factory-history__text--missing {
  color: var(--muted);
}

.documents-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.documents-field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.documents-field--wide {
  grid-column: 1 / -1;
}

.documents-block {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-placeholder);
}

.documents-block__title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-strong);
}

.documents-invoice-static {
  margin: 0;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-strong);
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  max-height: min(42vh, 320px);
  overflow: auto;
}

.documents-items-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.5rem 0 0.45rem;
}

.documents-items-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.documents-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.65rem;
}

.documents-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.documents-items-table th,
.documents-items-table td {
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.documents-items-table th {
  background: var(--bg-muted);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.documents-items-table tbody tr:last-child td {
  border-bottom: none;
}

.documents-input--table {
  width: 100%;
  min-width: 0;
  padding: 0.28rem 0.4rem;
  font-size: 0.84rem;
}

.documents-col-num {
  width: 2rem;
  text-align: center;
  color: var(--muted);
}

.documents-col-actions {
  width: 2.5rem;
  text-align: center;
}

.documents-items-empty td {
  padding: 0.75rem;
  color: var(--muted);
  text-align: center;
}

.documents-total-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.35rem;
  margin-bottom: 1rem;
  padding: 0.35rem 0;
}

.documents-total-label {
  font-size: 0.9rem;
  color: var(--muted);
}

.documents-total-value {
  font-size: 1.15rem;
  color: var(--text-strong);
}

.documents-total-currency {
  font-weight: 600;
  color: var(--text-strong);
}

.documents-error {
  color: var(--danger-text);
  font-size: 0.88rem;
  margin-top: 0.5rem;
}

.documents-error--info {
  color: #1e3a5f;
  border: 1px solid #9db8e0;
  background: #eef4ff;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
}

.documents-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--overlay-backdrop);
}

.documents-modal-overlay[hidden] {
  display: none !important;
}

.documents-modal {
  width: min(100%, 380px);
  padding: 1.15rem 1.25rem;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px var(--shadow-ambient-lg);
}

.documents-modal--wide {
  width: min(100%, 520px);
  max-height: min(80vh, 640px);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.documents-modal__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-strong);
}

.documents-modal__lead {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.documents-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.documents-nom-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-height: 360px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.documents-nom-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}

.documents-nom-row:hover {
  background: var(--bg-muted);
}

.documents-nom-row__art {
  flex: 0 0 4.5rem;
  font-weight: 600;
  color: var(--text-strong);
}

.documents-nom-row__name {
  flex: 1 1 auto;
  color: var(--text-strong);
}

.documents-nom-row__price {
  flex: 0 0 auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.documents-nom-empty {
  margin: 0;
  padding: 0.75rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.documents-preview-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.documents-print-sheet {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.documents-print__doc {
  color: var(--text-strong);
  font-size: 0.9rem;
  line-height: 1.45;
}

.documents-print__header h1 {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
}

.documents-print__invoice-title {
  margin: 0.55rem 0 0.25rem;
  font-size: 1rem;
  line-height: 1.35;
}

.documents-print__sub {
  margin: 0.75rem 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.documents-print__block {
  margin: 0.75rem 0;
}

.documents-print__block h2 {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.95rem;
}

.documents-print__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.75rem 0;
  font-size: 0.82rem;
}

.documents-print__table th,
.documents-print__table td {
  border: 1px solid var(--border);
  padding: 0.3rem 0.4rem;
}

.documents-print__table th {
  background: var(--bg-muted);
}

.documents-print__total {
  font-size: 1rem;
  margin: 0.5rem 0;
}

.documents-print__pre {
  white-space: pre-wrap;
  font-family: inherit;
  margin: 0;
}

.documents-print__sign {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ——— Договор-счёт WYSIWYG ——— */
.invoice-wysiwyg-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 1rem;
  max-width: 100%;
}

.invoice-doc-sheet {
  --inv-ink: #141820;
  --inv-muted: #5a5f5c;
  --inv-soft: #8a8f8c;
  /* едва уловимый тёплый «зелёно-серый», почти нейтральный */
  --inv-border: #d6dad8;
  --inv-border-mid: #bcc2be;
  --inv-surface: #f3f5f4;
  --inv-surface-2: #ecefed;
  --inv-accent: #166534;
  --inv-accent-line: #22a35c;
  --inv-accent-soft: #eef3f0;
  width: 210mm;
  max-width: 100%;
  min-height: 297mm;
  box-sizing: border-box;
  padding: 13mm 15mm 15mm;
  margin: 0 auto;
  background: #fff;
  color: var(--inv-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 10pt;
  line-height: 1.42;
  font-feature-settings: "tnum" 1;
  box-shadow: 0 2px 28px rgba(28, 32, 30, 0.055), 0 0 0 1px rgba(28, 32, 30, 0.032);
  border: 1px solid var(--inv-border);
}

.invoice-doc__header {
  margin: 0 0 0.5rem;
}

.invoice-doc__brand-strip {
  padding: 0.35rem 0 0.65rem;
  border-bottom: 1px solid var(--inv-border);
  box-shadow: 0 3px 0 0 var(--inv-accent-line);
}

.invoice-doc__brand-center {
  text-align: center;
  margin: 0;
}

.invoice-doc__logo-wrap {
  display: flex;
  justify-content: center;
  line-height: 0;
}

.invoice-doc__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: min(208px, 92%);
  max-height: 54px;
  object-fit: contain;
}

.invoice-doc__tagline {
  margin: 0.45rem 0 0;
  padding: 0;
  font-size: 6.75pt;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--inv-muted);
  line-height: 1.35;
}

.invoice-doc__bank {
  width: 100%;
  max-width: 34rem;
  min-width: 0;
  border-collapse: collapse;
  font-size: 8.65pt;
  table-layout: fixed;
  color: var(--inv-ink);
  border: 1px solid var(--inv-border-mid);
  border-radius: 2px;
  overflow: hidden;
}

.invoice-doc__bank th,
.invoice-doc__bank td {
  border: 1px solid var(--inv-border);
  padding: 0.28rem 0.42rem;
  vertical-align: top;
}

.invoice-doc__bank tbody tr:not(:last-child) td:first-child {
  width: 26%;
  background: var(--inv-surface);
  color: var(--inv-muted);
  font-weight: 600;
  font-size: 8.1pt;
}

.invoice-doc__bank tbody tr:last-child td {
  background: var(--inv-surface-2);
  font-weight: 600;
  font-size: 8.35pt;
}

.invoice-doc__doc-title-wrap {
  margin: 0.55rem 0 0.5rem;
  padding: 0 0 0.45rem;
  border-bottom: 1px solid var(--inv-border);
}

.invoice-doc__doc-title {
  text-align: center;
  font-size: 12pt;
  font-weight: 750;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.45;
  color: var(--inv-ink);
}

.invoice-doc__bank-wrap {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin: 0 0 0.55rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.invoice-doc__bank-with-qr {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem 0.95rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.invoice-doc__bank-table-wrap {
  flex: 1 1 14rem;
  min-width: 0;
  max-width: 34rem;
  display: flex;
  justify-content: center;
}

.invoice-doc__bank-table-wrap .invoice-doc__bank {
  width: 100%;
}

.invoice-doc__bank-qr {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  text-align: center;
  padding: 0.12rem 0.08rem;
  align-self: center;
}

.invoice-doc__bank-qr-caption {
  font-size: 7.5pt;
  font-weight: 600;
  line-height: 1.2;
  max-width: 6rem;
  color: var(--inv-muted);
}

.invoice-doc__title-ot {
  font-weight: 650;
  color: var(--inv-muted);
}

.invoice-doc__title-date {
  font-weight: 700;
  min-width: 7.5rem;
  max-width: min(11rem, 48vw);
  text-align: center;
  color: var(--inv-ink);
}

.invoice-doc__doc-title-gap {
  display: inline-block;
  width: 0.35rem;
}

.invoice-doc__totals-block {
  display: grid;
  /* фиксированная правая колонка — суммы и «₽» по одной вертикали */
  grid-template-columns: minmax(0, 1fr) 7.35rem;
  column-gap: 0.75rem;
  row-gap: 0.28rem;
  justify-content: end;
  justify-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin: 0.5rem 0 0.85rem auto;
  padding: 0.55rem 0.85rem 0.55rem 1rem;
  border: 1px solid var(--inv-border);
  border-left: 3px solid var(--inv-accent-line);
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--inv-accent-soft) 0%, #f6f7f6 38%);
  font-size: 9.75pt;
  box-sizing: border-box;
}

.invoice-doc__totals-label {
  text-align: right;
  font-weight: 600;
  justify-self: end;
  color: var(--inv-muted);
  min-width: 0;
}

.invoice-doc__totals-label--grand {
  font-size: 10.5pt;
  padding-top: 0.12rem;
  color: var(--inv-ink);
}

.invoice-doc__totals-label--grand strong {
  font-weight: 750;
}

.invoice-doc__totals-value {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--inv-ink);
  box-sizing: border-box;
}

.invoice-doc__totals-value--grand {
  font-size: 12.5pt;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--inv-ink);
}

.invoice-doc__totals-rub {
  font-weight: inherit;
}

.invoice-doc__terms {
  font-size: 8.45pt;
  line-height: 1.42;
  margin: 0.5rem 0 0.6rem;
  padding: 0.55rem 0.65rem 0.55rem 0.75rem;
  border: 1px solid var(--inv-border);
  border-left: 3px solid var(--inv-border-mid);
  border-radius: 0 4px 4px 0;
  background: var(--inv-surface);
  color: var(--inv-ink);
}

.invoice-doc__terms p {
  margin: 0.22rem 0;
}

.invoice-doc__terms strong {
  color: var(--inv-ink);
  font-weight: 700;
}

.invoice-doc__terms a {
  color: #0b4a8f;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 74, 143, 0.28);
}

.invoice-doc__terms a:hover {
  border-bottom-color: #0b4a8f;
}

/* Линия подписи в других местах документа (не блок .signature-row) */
.invoice-doc__signature-line-wrap {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.invoice-doc__signature-line {
  display: block;
  width: 100%;
  height: 0.95em;
  border-bottom: 1px solid var(--inv-border-mid);
  box-sizing: border-box;
}

.invoice-doc__signature-label {
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 9pt;
  line-height: 1.3;
  font-weight: 600;
}

.invoice-doc__signature-label--buyer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.06rem;
  font-weight: 700;
  font-style: italic;
}

.invoice-doc__signature-slash {
  flex: 0 0 auto;
  font-weight: 700;
  font-style: normal;
}

.invoice-doc__inp {
  font: inherit;
  color: var(--inv-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--inv-border-mid);
  padding: 0 0.12rem 0.06rem;
  min-width: 2.5em;
  max-width: 100%;
  box-sizing: border-box;
}

.invoice-doc__inp:focus {
  outline: 1px solid #2a6;
  outline-offset: 1px;
}

.invoice-doc__inp--title {
  font-weight: 750;
  text-align: center;
  min-width: 3rem;
  max-width: 6.5rem;
  border-bottom-color: var(--inv-border-mid);
}

.invoice-doc__inp--date {
  font-weight: 700;
  border-bottom-color: var(--inv-border-mid);
}

.invoice-doc__supplier-line {
  margin: 0.45rem 0;
  padding: 0.35rem 0.45rem;
  font-size: 9pt;
  line-height: 1.4;
  color: var(--inv-ink);
  background: var(--inv-surface);
  border: 1px solid var(--inv-border);
  border-radius: 3px;
}

.invoice-doc__buyer-short {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  margin: 0.4rem 0 0.55rem;
  padding: 0.35rem 0.45rem;
  font-size: 10pt;
  background: #fff;
  border: 1px solid var(--inv-border);
  border-radius: 3px;
}

.invoice-doc__buyer-short-label {
  flex: 0 0 auto;
}

.invoice-doc__inp--buyer {
  flex: 1 1 14rem;
  min-width: 10rem;
  max-width: 100%;
  /* как у расшифровки подписи в подвале — жирное имя */
  font-weight: 600;
  font-style: normal;
}

/* Таблица сметы + компактная кнопка «+» (не в PDF — см. .invoice-doc--pdf-export) */
.invoice-doc__table-with-add {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.55rem 0 0.7rem;
}

.invoice-doc__table-with-add .invoice-doc__table-wrap {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.invoice-doc__add-item-btn {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 1.65rem;
  min-width: 1.65rem;
  height: 1.65rem;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 0;
  font-size: 0;
  border-radius: 50%;
  border: 1px solid rgba(20, 108, 62, 0.55);
  background: #198754;
  color: #fff;
  box-shadow: none;
}

.invoice-doc__add-item-icon {
  display: block;
  flex-shrink: 0;
}

.invoice-doc__add-item-btn:hover {
  background: #157347;
  border-color: rgba(20, 108, 62, 0.75);
  color: #fff;
}

.invoice-doc__add-estimate-btn {
  background: #e7f5ec;
  color: #24513c;
}

.invoice-doc__add-estimate-btn:hover {
  background: #d3eddd;
  color: #24513c;
}

.invoice-doc__add-item-btn:focus-visible {
  outline: 2px solid #20c997;
  outline-offset: 2px;
}

.invoice-doc__table-wrap {
  margin: 0.55rem 0 0.7rem;
  overflow-x: auto;
  border-radius: 3px;
  border: 1px solid var(--inv-border);
  overflow: hidden;
}

.invoice-doc__items {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 9pt;
  color: var(--inv-ink);
}

.invoice-doc__items th,
.invoice-doc__items td {
  border: 1px solid var(--inv-border);
  padding: 0.38rem 0.32rem 0.38rem 0.52rem;
  vertical-align: middle;
}

.invoice-doc__items th {
  font-weight: 650;
  text-align: center;
  font-size: 7.85pt;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--inv-muted);
  background: linear-gradient(180deg, #f5f7f6 0%, #eef0ee 100%);
  border-bottom: 1px solid var(--inv-border-mid);
}

.invoice-doc__items tbody tr td {
  background: #ffffff;
}

.invoice-doc__col-drag {
  width: 2.6%;
  min-width: 1.35rem;
  text-align: center;
  vertical-align: middle;
  padding: 0.1rem 0.05rem !important;
  user-select: none;
}

.invoice-doc__drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1.35rem;
  cursor: grab;
  touch-action: none;
  color: var(--inv-muted);
  font-size: 0.85rem;
  line-height: 1;
  border-radius: 2px;
}

.invoice-doc__drag-handle:active {
  cursor: grabbing;
}

.invoice-doc__tr--dragging {
  opacity: 0.55;
}

/* Не вешать pointer-events:none на <tr> — в Chrome это сразу снимает pointer capture с ручки.
   Отключаем только «тело» строки, чтобы под курсором оставались другие строки. */
.invoice-doc__tr--dragging > td:not(.invoice-doc__col-drag) {
  pointer-events: none;
}

.invoice-doc__tr--drag-over {
  outline: 2px solid #0b4a8f;
  outline-offset: -2px;
  background: #f0f6fc !important;
}

body.invoice-doc--wysiwyg-pointer-drag {
  cursor: grabbing !important;
}

.invoice-doc__col-num {
  width: 3.6%;
  min-width: 1.6rem;
  text-align: center;
}

.invoice-doc__col-product {
  width: 50.8%;
  min-width: 0;
  word-wrap: break-word;
  text-align: left;
}

.invoice-doc__col-qty {
  width: 11%;
  min-width: 0;
  text-align: center;
}

.invoice-doc__col-unit {
  width: 5%;
  min-width: 0;
  text-align: center;
  font-size: 8.5pt;
  padding-left: 0.1rem !important;
  padding-right: 0.1rem !important;
}

.invoice-doc__col-price {
  width: 10%;
  min-width: 0;
  text-align: center;
}

.invoice-doc__col-sum {
  width: 13%;
  min-width: 0;
  text-align: center;
}

.invoice-doc__col-act {
  position: relative;
  width: 5%;
  min-width: 2rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid var(--inv-border);
  background: #ffffff;
  /* Общий padding таблицы асимметричен (больше слева) — здесь симметрично, чтобы × был по центру */
  padding: 0.38rem 0.3rem !important;
}

.invoice-doc__row-act-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0;
}

/* Удаление строки: только символ ×, без рамки кнопки */
.invoice-doc__row-del-btn.documents-btn,
.invoice-doc__row-del-btn.documents-btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: none;
  background: transparent;
  border-radius: 4px;
  padding: 0.12rem;
  min-width: 0;
  font-size: 1.28rem;
  font-weight: 300;
  line-height: 1;
  color: var(--inv-muted);
}

.invoice-doc__row-del-btn:hover {
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.07);
}

.invoice-doc__row-del-btn:focus-visible {
  outline: 2px solid var(--inv-accent-line);
  outline-offset: 1px;
}

.invoice-doc__pick-btn {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  font: inherit;
  font-size: 8pt;
  line-height: 1.28;
  padding: 0.22rem 0.3rem;
  border: 1px solid var(--inv-border);
  border-radius: 3px;
  background: #fff;
  color: var(--inv-ink);
  cursor: pointer;
  word-break: break-word;
  white-space: normal;
  overflow: visible;
}

.invoice-doc__pick-btn:hover {
  border-color: var(--inv-accent-line);
  background: var(--inv-accent-soft);
}

.invoice-doc__pick-btn:disabled,
.invoice-doc__pick-btn.invoice-doc__pick-btn--muted {
  color: #777;
  cursor: not-allowed;
  background: #f0f1f0;
}

.invoice-doc__money-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 100%;
  margin-left: 0.14rem;
}

.invoice-doc__money-inp {
  width: 3rem;
  max-width: 65%;
  min-width: 0;
  text-align: center;
  border: none;
  border-bottom: 1px dotted var(--inv-border-mid);
  font: inherit;
  font-size: 8.5pt;
  background: transparent;
  color: var(--inv-ink);
}

.invoice-doc__rub {
  font-size: 8.5pt;
  flex-shrink: 0;
}

.invoice-doc__items input[data-field="qty"] {
  width: 100%;
  text-align: center;
  border: none;
  border-bottom: 1px dotted var(--inv-border-mid);
  font: inherit;
  background: transparent;
  color: var(--inv-ink);
}

.invoice-doc__items input[data-field="sum"] {
  width: 4rem;
  max-width: 82%;
  min-width: 0;
  text-align: center;
  border: none;
  font: inherit;
  font-size: 8.5pt;
  background: transparent;
  color: #111;
}

/* Важно: без [hidden] правило display:flex перебивает скрытие по атрибуту hidden в браузере. */
.invoice-cell-picker-pop[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.invoice-cell-picker-pop:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: auto;
  visibility: visible;
}

.invoice-cell-picker-pop__panel {
  width: min(420px, 100%);
  max-height: min(72vh, 520px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  color: var(--text-strong, #111);
  border-radius: 12px;
  border: 1px solid var(--border, #ccc);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.invoice-cell-picker-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border, #ddd);
  font-weight: 600;
  font-size: 0.9rem;
}

.invoice-cell-picker-pop__close {
  border: none;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #666);
}

.invoice-cell-picker-pop__list {
  overflow-y: auto;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.invoice-cell-picker-pop__opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border, #ddd);
  background: var(--bg-placeholder, #f8f8f8);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.3;
  cursor: pointer;
  color: inherit;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}

.invoice-cell-picker-pop__opt:hover {
  border-color: #2a6;
  background: #f0fff4;
}

.invoice-cell-picker-pop__back {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.5rem;
  margin-bottom: 0.15rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted, #666);
  cursor: pointer;
  text-decoration: underline;
}

.invoice-cell-picker-pop__back:hover {
  color: var(--text-strong, #111);
}

.invoice-doc__total-row {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0.35rem 0 0.75rem;
  font-size: 11pt;
}

.invoice-doc__total-value {
  font-weight: 700;
}

.invoice-doc__footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem 0.85rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--inv-border);
  align-items: stretch;
  min-width: 0;
}

@media (max-width: 720px) {
  .invoice-doc__footer-grid {
    grid-template-columns: 1fr;
  }
}

.invoice-doc__footer-col {
  font-size: 8.5pt;
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.invoice-doc__footer-col--supplier {
  padding-right: 0.25rem;
  overflow: visible;
}

.invoice-doc__footer-col--buyer {
  min-height: 0;
}

.invoice-doc__footer-buyer-fields {
  flex: 1 1 auto;
  min-height: 0;
}

.invoice-doc__footer-buyer-fields p {
  margin: 0.16rem 0;
}

#inv-w-passport-row[hidden] {
  display: none !important;
}

.invoice-doc__footer-buyer-fields--saas .invoice-doc__party-card__heading {
  margin-bottom: 0.45rem;
}

.invoice-doc__footer-party-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  padding: 12px 14px;
  background: var(--inv-surface);
  border: 1px solid var(--inv-border);
  border-radius: 12px;
  overflow: visible;
}

.invoice-doc__party-card__heading {
  margin: 0;
  font-size: 8.35pt;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inv-ink);
}

.invoice-doc__pre-static--party {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
}

.invoice-doc__qr-saas__section-label {
  margin: 0;
  font-size: 7.45pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6f8f7a;
}

.signature-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.22rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: auto;
  margin-bottom: 0;
  padding: 5px 8px;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  background: #fff;
  border: 1px solid var(--inv-border);
  border-radius: 6px;
  font-size: 8.85pt;
  line-height: 1.22;
  color: var(--inv-ink);
}

/* Одинаковая компактная минимальная высота белых полей подписи */
.invoice-doc__footer-party-card > .signature-row {
  min-height: 4.6rem;
}

.signature-line {
  width: 100%;
  min-height: 0.85rem;
  box-sizing: border-box;
  border-bottom: 1px solid var(--inv-border);
}

.invoice-doc__footer-col--supplier .invoice-doc__footer-party-card {
  position: relative;
  overflow: visible;
}

.invoice-doc__footer-col--supplier .invoice-doc__supplier-panel {
  position: relative;
  z-index: 0;
}

.signature-below {
  width: 100%;
  min-width: 0;
  text-align: center;
}

/* Печать поверх «Подпись» и ФИО — не увеличивает высоту блока */
.invoice-doc__footer-col--supplier .signature-below {
  position: relative;
  padding: 0.15rem 0 0.55rem;
}

.signature-caption {
  font-size: 8pt;
  font-weight: 500;
  line-height: 1.25;
  color: var(--inv-soft);
  user-select: none;
  margin: 0 0 0.12rem;
}

.signature-name {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-align: center;
}

.signature-name > span {
  display: inline-block;
  max-width: 100%;
  color: var(--inv-ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* Линия под ФИО поставщика — как нижняя граница поля подписи покупателя (.invoice-doc__inp--buyer-sign-saas). */
.signature-name--supplier-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 0;
}

/* Печать поверх подписи: <img> с полным разрешением файла — html2canvas даёт заметно чётче, чем background-image. */
.invoice-doc__footer-col--supplier .signature-below > .invoice-doc__stamp {
  position: absolute;
  left: 50%;
  top: calc(50% - 68px);
  transform: translate(-50%, -52%);
  transform-origin: center center;
  display: block;
  width: min(168px, 92%);
  height: auto;
  max-height: min(168px, 52vw);
  aspect-ratio: 386 / 308;
  margin: 0;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center center;
  z-index: 2;
  opacity: 1;
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
  cursor: default !important;
  image-rendering: auto;
}

.invoice-doc__footer-col--supplier .signature-caption,
.invoice-doc__footer-col--supplier .signature-name--supplier-sign {
  position: relative;
  z-index: 1;
}

.signature-name--supplier-sign .signature-name-line {
  width: 100%;
  max-width: min(22rem, 100%);
  height: 0;
  margin: 0.14rem 0 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--inv-border);
  box-sizing: border-box;
}

.signature-name--buyer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.signature-name--buyer > span {
  display: block;
  flex: 0 0 auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  color: var(--inv-ink);
  font-weight: 600;
}

.invoice-doc__inp--buyer-sign-saas {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(22rem, 100%);
  width: auto;
  text-align: center;
  font: inherit;
  font-weight: 600;
  font-style: normal;
  font-size: inherit;
  color: var(--inv-ink);
  border: none !important;
  border-bottom: 1px solid var(--inv-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none;
  padding: 0.06rem 0.12rem 0.14rem !important;
  margin: 0;
  line-height: inherit;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-doc__inp--buyer-sign-saas:focus {
  outline: 1px solid var(--inv-border-mid);
  outline-offset: 2px;
  border-radius: 2px;
}

.invoice-doc__inp--buyer-sign-saas::placeholder {
  color: var(--inv-soft);
  font-weight: 500;
}

.invoice-doc__supplier-panel {
  max-width: 28rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  flex: 0 1 auto;
  min-height: 0;
}

.invoice-doc__footer-party-card .invoice-doc__supplier-panel {
  margin: 0;
  max-width: none;
  text-align: left;
}

.invoice-doc__footer-party-card .invoice-doc__muted {
  display: block;
  margin-bottom: 0.06rem;
  font-weight: 700;
  font-size: 8pt;
  color: var(--inv-ink);
}

.invoice-doc__payment-qr {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
  image-rendering: crisp-edges;
}

.invoice-doc__pre-static {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 8.45pt;
  line-height: 1.38;
  text-align: left;
  color: var(--inv-ink);
  padding: 0.45rem 0.5rem;
  background: var(--inv-surface);
  border: 1px solid var(--inv-border);
  border-radius: 3px;
}

.invoice-doc__muted {
  color: var(--inv-muted);
  font-size: 8.35pt;
  font-weight: 500;
}

.invoice-doc__inp--block {
  display: block;
  width: 100%;
  margin-top: 0.1rem;
  border-bottom: 1px solid var(--inv-border);
}

textarea.invoice-doc__inp--block.invoice-doc__inp--address {
  min-height: calc(2 * 1.35em + 0.2rem);
  line-height: 1.35;
  padding: 0.1rem 0.12rem 0.14rem;
  resize: vertical;
  overflow-wrap: break-word;
  word-wrap: break-word;
  overflow-x: hidden;
  white-space: pre-wrap;
  vertical-align: top;
}

.invoice-doc__address-pdf {
  display: none;
}

.invoice-doc__address-field {
  position: relative;
}

.invoice-doc__address-suggest {
  display: grid;
  gap: 0.28rem;
  margin-top: 0.22rem;
  padding: 0.34rem;
  border: 1px solid #dbeafe;
  border-radius: 0.45rem;
  background: #eff6ff;
  box-shadow: 0 0.45rem 1rem rgba(37, 99, 235, 0.12);
}

.invoice-doc__address-suggest[hidden] {
  display: none !important;
}

.invoice-doc__address-suggest .m-contract-address-suggest__item {
  display: grid;
  gap: 0.08rem;
  width: 100%;
  border: 0;
  border-radius: 0.32rem;
  padding: 0.38rem 0.44rem;
  background: #fff;
  color: var(--inv-ink);
  font: inherit;
  text-align: left;
}

.invoice-doc__address-suggest .m-contract-address-suggest__item strong {
  font-weight: 700;
}

.invoice-doc__address-suggest .m-contract-address-suggest__item small,
.invoice-doc__address-suggest-status {
  color: #64748b;
  font-size: 7.3pt;
  line-height: 1.25;
}

.invoice-doc__address-suggest-status {
  display: block;
  margin-top: 0.18rem;
}

.invoice-doc__address-suggest-status.m-contract-address-suggest__hint--error {
  color: #b91c1c;
}

.invoice-doc__textarea {
  display: block;
  width: 100%;
  margin-top: 0.15rem;
  font: inherit;
  font-size: 8.5pt;
  border: 1px solid #ccc;
  padding: 0.2rem;
  resize: vertical;
  min-height: 2.2rem;
  box-sizing: border-box;
}

.invoice-doc__mirror {
  font-weight: 600;
}

.invoice-doc__bottom-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 0.55rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--inv-border);
}

.invoice-doc__bottom-row--install-qr {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.38rem;
  margin-top: 0.42rem;
  padding-top: 0.5rem;
  border-top-color: #d7f0df;
}

.invoice-doc__qr-saas__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.78rem;
  width: 100%;
  min-width: 0;
}

.invoice-doc__qr-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.78rem;
  margin: 0;
  padding: 14px 17px;
  background: #f4fbf6;
  border: 1px solid #d7f0df;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.035);
  box-sizing: border-box;
}

.invoice-doc__qr-card__frame-wrap {
  flex: 0 0 auto;
}

.invoice-doc__qr-card__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #fff;
  border: 1px dashed #bfe6c9;
  border-radius: 9px;
  box-sizing: border-box;
}

.invoice-doc__install-qr-img {
  display: block;
  width: 100px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
  margin: 0;
  object-fit: contain;
  image-rendering: crisp-edges;
}

.invoice-doc__qr-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0;
}

.invoice-doc__qr-card__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.42rem;
}

.invoice-doc__qr-card__badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.48rem;
  height: 1.48rem;
  border-radius: 50%;
  background: #3bb273;
  color: #fff;
  font-size: 9.1pt;
  font-weight: 700;
  line-height: 1;
}

.invoice-doc__qr-card__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 8.55pt;
  font-weight: 700;
  line-height: 1.24;
  color: #174a32;
  letter-spacing: 0.028em;
  text-transform: uppercase;
  text-wrap: balance;
}

.invoice-doc__qr-card__desc {
  margin: 0.26rem 0 0;
  padding-left: calc(1.48rem + 0.42rem);
  font-size: 10.75px;
  line-height: 1.32;
  font-weight: 500;
  color: #6f8f7a;
}

@media (max-width: 720px) {
  .invoice-doc__qr-saas__grid {
    grid-template-columns: 1fr;
  }

  .signature-row {
    gap: 0.26rem;
    padding: 7px 9px;
    font-size: 8.5pt;
  }

  .signature-caption {
    font-size: 7.5pt;
  }

  .signature-line {
    min-height: 1.15rem;
  }

  .invoice-doc__qr-card__desc {
    padding-left: 0;
  }
}

/* PDF / печать: скрыть колонки перетаскивания и действий со строками */
.invoice-doc-sheet.invoice-doc--pdf-export .invoice-doc__col-drag {
  display: none !important;
}

.invoice-doc-sheet.invoice-doc--pdf-export .invoice-doc__col-act {
  display: none !important;
}

/*
 * Экспорт PDF (класс вешается на время html2pdf): одна страница A4,
 * печатная область ~190×277 мм при полях PDF 10 мм. Крупнее шрифт — читаемее в PDF и при печати.
 */
#contracts-invoice-pdf-root.invoice-doc--pdf-export.invoice-doc-sheet {
  width: 194mm;
  max-width: 194mm;
  min-height: 276mm;
  height: auto;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 2mm 4mm 3mm;
  box-shadow: none;
  border: 1px solid transparent;
  box-sizing: border-box;
  overflow: visible;
  font-size: 10.5pt;
  line-height: 1.28;
}

/* Не помечаем длинные блоки как «нельзя резать» — иначе html2pdf ужимает весь лист под одну страницу. */
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__header,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__brand-strip,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__doc-title-wrap,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__doc-title,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__bank-wrap,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__supplier-line,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__buyer-short,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__totals-block,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__footer-party-card,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__bank-with-qr,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__bank-qr,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .signature-row,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__qr-card {
  break-inside: avoid;
  page-break-inside: avoid;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__table-with-add,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__table-wrap,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__terms,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__footer-grid,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__bottom-row {
  break-inside: auto;
  page-break-inside: auto;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__items,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__items tbody {
  break-inside: auto;
  page-break-inside: auto;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__items thead {
  break-inside: avoid;
  page-break-inside: avoid;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__items tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__header {
  margin: 0 0 0.12rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__brand-strip {
  padding: 0.2rem 0 0.4rem;
  box-shadow: 0 2px 0 0 var(--inv-accent-line);
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__doc-title-wrap {
  margin: 0.28rem 0 0.32rem;
  padding: 0 0 0.28rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__supplier-line,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__buyer-short {
  padding: 0.22rem 0.32rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__pre-static {
  padding: 0.28rem 0.35rem;
  font-size: 8.5pt;
  line-height: 1.22;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__pre-static--party {
  padding: 0;
  font-size: 8.1pt;
  line-height: 1.18;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__install-qr-img {
  width: 88px;
  max-width: 100%;
  height: auto;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__footer-party-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.26rem 0.32rem 0.3rem;
  background: var(--inv-surface);
  border: 1px solid var(--inv-border);
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__party-card__heading {
  font-size: 8.35pt;
  margin-bottom: 0.22rem;
  color: var(--inv-ink);
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__footer-buyer-fields {
  flex: 1 1 auto;
  min-height: 0;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .signature-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.14rem;
  margin-top: auto;
  padding: 0.18rem 0.24rem;
  min-height: 4.75rem;
  background: #fff;
  border: 1px solid var(--inv-border);
  border-radius: 4px;
  box-shadow: none;
  font-size: 8.75pt;
  color: var(--inv-ink);
  overflow: visible;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .signature-line {
  min-height: 0.72rem;
  border-bottom-color: var(--inv-border);
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .signature-caption {
  font-size: 7.75pt;
  color: var(--inv-soft);
  margin-bottom: 0.06rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .signature-name {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 8.75pt;
  font-weight: 600;
  line-height: 1.2;
  color: var(--inv-ink);
  max-width: 100%;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .signature-name > span,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__inp--buyer-sign-saas {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--inv-ink);
  -webkit-text-fill-color: var(--inv-ink);
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .signature-name--supplier-sign .signature-name-line {
  max-width: min(16rem, calc(100% - 1.5rem));
  margin-top: 0.1rem;
  border-bottom: 1px solid var(--inv-border);
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__qr-card {
  align-items: center;
  padding: 0.42rem 0.56rem;
  gap: 0.46rem;
  background: #f4fbf6;
  border-radius: 11px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__qr-card__frame {
  padding: 6px;
  border-radius: 8px;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__qr-card__badge {
  width: 1.44rem;
  height: 1.44rem;
  font-size: 8.7pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__qr-saas__grid {
  gap: 0.32rem 0.5rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export textarea.invoice-doc__inp--address {
  display: none !important;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__address-pdf {
  display: block;
  width: 100%;
  min-height: 2.5em;
  margin-top: 0.1rem;
  padding: 0.08rem 0.1rem;
  box-sizing: border-box;
  border-bottom: 1px solid var(--inv-border);
  color: var(--inv-ink);
  font: inherit;
  line-height: 1.22;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__tagline {
  margin-top: 0.1rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__add-item-btn {
  display: none !important;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__table-with-add {
  margin: 0.18rem 0 0.26rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__table-wrap {
  margin: 0;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__items {
  font-size: 9.4pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__items th,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__items td {
  padding: 0.1rem 0.18rem;
  line-height: 1.22;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__totals-block {
  grid-template-columns: minmax(0, 1fr) 6.9rem;
  justify-items: stretch;
  margin: 0.08rem 0 0.16rem auto;
  padding: 0.26rem 0.42rem 0.26rem 0.5rem;
  row-gap: 0.08rem;
  font-size: 9.75pt;
  border: 1px solid var(--inv-border);
  border-left: 3px solid var(--inv-accent-line);
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #e8f4ed 0%, #f6f7f6 42%);
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__totals-value--grand {
  font-size: 11.75pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__terms {
  margin: 0.08rem 0 0.1rem;
  padding: 0.26rem 0.38rem 0.26rem 0.45rem;
  font-size: 8.35pt;
  line-height: 1.18;
  border: 1px solid var(--inv-border);
  border-left: 3px solid var(--inv-border-mid);
  border-radius: 0 3px 3px 0;
  background: var(--inv-surface);
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__terms p {
  margin: 0.03rem 0;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__footer-grid {
  margin-top: 0.08rem;
  padding-top: 0.22rem;
  gap: 0.14rem 0.26rem;
  align-items: stretch;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__supplier-panel {
  max-width: none;
  gap: 0.1rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export
  .invoice-doc__footer-col--supplier
  .signature-below
  > .invoice-doc__stamp {
  top: calc(50% - 68px);
  bottom: auto;
  display: block;
  width: min(190px, 94%);
  height: auto;
  max-height: 42mm;
  aspect-ratio: 386 / 308;
  object-fit: contain;
  transform: translate(-50%, -52%);
  transform-origin: center center;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export
  .invoice-doc__footer-col--supplier
  .signature-caption,
#contracts-invoice-pdf-root.invoice-doc--pdf-export
  .invoice-doc__footer-col--supplier
  .signature-name--supplier-sign {
  position: relative;
  z-index: 1;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__inp--buyer-sign-saas {
  border-bottom: 1px solid var(--inv-border) !important;
  max-width: min(16rem, calc(100% - 1.5rem));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none !important;
}

/* PDF: таблица товаров — без внутренних «input»-рамок, только границы ячеек */
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__pick-btn {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0.04rem 0 !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: default;
  color: inherit;
  text-align: left;
  font: inherit;
  font-size: inherit;
  line-height: 1.2;
  width: 100%;
  max-width: 100%;
  pointer-events: none;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__pick-btn--muted {
  background: transparent !important;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__money-inp,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__items input[data-field="qty"],
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__items input[data-field="sum"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  padding: 0.08rem 0 !important;
  margin: 0 !important;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__items input[data-field="qty"]::-webkit-outer-spin-button,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__items input[data-field="qty"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__items input[type="number"][data-field="qty"] {
  -moz-appearance: textfield;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__money-cell {
  gap: 0.12rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__supplier-line,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__buyer-short {
  margin: 0.2rem 0 0.28rem;
  padding: 0.2rem 0.3rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__bank td,
#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__bank th {
  padding: 0.12rem 0.22rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__bank {
  font-size: 9pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__footer-buyer-fields p {
  margin: 0.04rem 0;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__footer-party-card .invoice-doc__muted {
  font-size: 8pt;
  color: var(--inv-ink);
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__bank-qr-caption {
  font-size: 7.35pt;
  max-width: 4.75rem;
  line-height: 1.15;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__payment-qr {
  width: 80px;
  height: 80px;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__bottom-row {
  margin-top: auto;
  padding-top: 0.52rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__qr-card__title {
  font-size: 7.8pt;
  line-height: 1.18;
  letter-spacing: 0.02em;
  font-weight: 700;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__qr-card__desc {
  font-size: 7.15pt;
  line-height: 1.22;
  margin-top: 0.16rem !important;
  padding-left: calc(1.44rem + 0.42rem);
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__bottom-row--install-qr {
  gap: 0.28rem;
  margin-top: auto;
  padding-top: 0.56rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__doc-title {
  margin: 0;
  font-size: 11.25pt;
  line-height: 1.35;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__bank-wrap {
  margin: 0 0 0.2rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__logo {
  max-width: 170px;
  max-height: 48px;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__muted {
  font-size: 9pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export .invoice-doc__footer-col {
  font-size: 9pt;
  overflow: visible;
}

/* 5+ строк товаров: ужимаем таблицу и отступы, чтобы лист помещался на одну страницу A4 */
#contracts-invoice-pdf-root.invoice-doc--pdf-export.invoice-doc--pdf-export-dense.invoice-doc-sheet {
  font-size: 9.75pt;
  line-height: 1.22;
  padding: 1.5mm 3.5mm 2mm;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__brand-strip {
  padding: 0.12rem 0 0.28rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__doc-title-wrap {
  margin: 0.18rem 0 0.22rem;
  padding: 0 0 0.18rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__doc-title {
  font-size: 10.5pt;
  line-height: 1.28;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__bank-wrap {
  margin: 0 0 0.12rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__bank td,
#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__bank th {
  padding: 0.08rem 0.16rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__bank {
  font-size: 8.35pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__payment-qr {
  width: 72px;
  height: 72px;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__logo {
  max-width: 156px;
  max-height: 42px;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__supplier-line,
#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__buyer-short {
  margin: 0.12rem 0 0.16rem;
  padding: 0.14rem 0.24rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__table-with-add {
  margin: 0.1rem 0 0.14rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__items {
  font-size: 8.15pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__items th,
#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__items td {
  padding: 0.05rem 0.12rem;
  line-height: 1.14;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export.invoice-doc--pdf-export-dense .invoice-doc__items tr {
  break-inside: auto;
  page-break-inside: auto;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__pick-btn {
  font-size: 7.35pt;
  line-height: 1.12;
  padding: 0.02rem 0 !important;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__money-inp,
#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__items input[data-field="qty"],
#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__items input[data-field="sum"] {
  padding: 0.04rem 0 !important;
  font-size: 8pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__rub {
  font-size: 8pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__totals-block {
  margin: 0.05rem 0 0.1rem auto;
  padding: 0.18rem 0.34rem 0.18rem 0.42rem;
  font-size: 9pt;
  row-gap: 0.05rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__totals-value--grand {
  font-size: 10.75pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__terms {
  margin: 0.05rem 0 0.06rem;
  padding: 0.18rem 0.3rem 0.18rem 0.36rem;
  font-size: 7.85pt;
  line-height: 1.14;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__terms p {
  margin: 0.02rem 0;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__footer-grid {
  margin-top: 0.05rem;
  padding-top: 0.14rem;
  gap: 0.1rem 0.2rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__footer-party-card {
  padding: 0.18rem 0.24rem 0.22rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .signature-row {
  min-height: 3.65rem;
  padding: 0.12rem 0.18rem;
  gap: 0.1rem;
  font-size: 8.15pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .signature-caption {
  font-size: 7.25pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__pre-static {
  font-size: 7.95pt;
  line-height: 1.16;
  padding: 0.2rem 0.28rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__pre-static--party {
  font-size: 7.65pt;
  line-height: 1.14;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__bottom-row--install-qr {
  gap: 0.2rem;
  margin-top: auto;
  padding-top: 0.36rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__qr-saas__section-label {
  font-size: 7.35pt;
  line-height: 1.12;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__qr-saas__grid {
  gap: 0.22rem 0.36rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__qr-card {
  gap: 0.34rem;
  padding: 0.3rem 0.42rem;
  border-radius: 9px;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__qr-card__frame {
  padding: 5px;
  border-radius: 6px;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__qr-card__badge {
  width: 1.24rem;
  height: 1.24rem;
  font-size: 7.6pt;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__qr-card__head {
  gap: 0.24rem;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__qr-card__title {
  font-size: 6.95pt;
  line-height: 1.13;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__qr-card__desc {
  font-size: 6.5pt;
  line-height: 1.14;
  margin-top: 0.08rem !important;
  padding-left: calc(1.12rem + 0.22rem);
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense .invoice-doc__install-qr-img {
  width: 72px;
}

#contracts-invoice-pdf-root.invoice-doc--pdf-export-dense
  .invoice-doc__footer-col--supplier
  .signature-below
  > .invoice-doc__stamp {
  max-height: 36mm;
}

@media print {
  @page {
    size: A4;
    margin: 8mm;
  }

  body {
    margin: 0 !important;
    padding: 0 !important;
  }

  body * {
    visibility: hidden;
  }
  #contracts-view-preview,
  #contracts-view-preview * {
    visibility: visible;
  }
  #contracts-view-preview {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  #contracts-preview-sheet {
    border: none;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #contracts-invoice-pdf-root .invoice-doc__col-drag {
    display: none !important;
  }

  #contracts-invoice-pdf-root .invoice-doc__col-act {
    display: none !important;
  }
  #contracts-invoice-pdf-root.invoice-doc-sheet {
    width: 210mm;
    max-width: 100%;
    min-height: 297mm;
    box-sizing: border-box;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  #contracts-invoice-pdf-root .invoice-doc__footer-grid {
    align-items: stretch;
  }

  #contracts-invoice-pdf-root .invoice-doc__footer-col--buyer {
    min-height: 0;
  }

  /* Печать из браузера: те же «чистые» ячейки, что и в PDF */
  #contracts-invoice-pdf-root .invoice-doc__pick-btn {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.08rem 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  #contracts-invoice-pdf-root .invoice-doc__pick-btn--muted {
    background: transparent !important;
  }

  #contracts-invoice-pdf-root .invoice-doc__money-inp,
  #contracts-invoice-pdf-root .invoice-doc__items input[data-field="qty"],
  #contracts-invoice-pdf-root .invoice-doc__items input[data-field="sum"] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }
}

.messenger {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 28px var(--shadow-ambient);
  overflow: hidden;
  position: relative;
  /* Ширина списка чатов; при перетаскивании границы задаётся из JS (localStorage) */
  --messenger-sidebar-w: 252px;
}

.chat-video-call-btn {
  color: var(--accent);
}

.chat-video-call-btn[hidden] {
  display: none !important;
}

.chat-call__btn.is-off {
  background: rgba(148, 163, 184, 0.28);
  color: rgba(255, 255, 255, 0.78);
}



.messenger__center {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.messenger__backdrop {
  position: fixed;
  inset: 0;
  top: var(--topbar-h);
  z-index: 55;
  background: var(--overlay-backdrop);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.messenger__backdrop[hidden] {
  display: none !important;
}

.messenger--info-open .chat-info-panel {
  width: min(340px, min(92vw, 32%));
  border-left: 1px solid var(--ui-glass-border);
  opacity: 1;
  pointer-events: auto;
}

.chat-info-panel {
  flex-shrink: 0;
  width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition:
    width var(--motion-normal) var(--ease-out-premium),
    opacity var(--motion-fast) var(--ease-out-premium);
  background: var(--info-panel-bg);
  box-shadow: var(--ui-glass-shadow-inset), -6px 0 24px var(--shadow-ambient);
  backdrop-filter: blur(var(--ui-glass-blur));
  -webkit-backdrop-filter: blur(var(--ui-glass-blur));
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-info-panel__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--ui-glass-border-soft);
  background: var(--info-panel-head-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.chat-info-panel__title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}

.chat-info-panel__close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.chat-info-panel__close:hover {
  background: var(--info-panel-close-hover);
  color: var(--text);
}

.chat-info-participants-wrap {
  flex-shrink: 0;
  padding: 0.35rem 0.75rem 0.5rem;
  border-bottom: 1px solid var(--ui-glass-border-soft);
  background: var(--info-panel-participants-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.chat-info-block--participants {
  margin-bottom: 0;
}

.chat-info-participants {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: min(42vh, 320px);
  overflow-y: auto;
  padding-right: 0.1rem;
}

.chat-info-tabs {
  flex-shrink: 0;
  display: flex;
  border-bottom: 1px solid var(--ui-glass-border-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(230, 242, 255, 0.32));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0 0.35rem;
  gap: 0.15rem;
}

.chat-info-tab {
  flex: 1;
  margin: 0;
  padding: 0.5rem 0.25rem;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-radius: 0;
}

.chat-info-tab:hover {
  color: var(--text);
}

.chat-info-tab--active {
  color: #2b95e8;
  border-bottom-color: rgba(51, 167, 255, 0.55);
}

.chat-info-tab-pane[hidden] {
  display: none !important;
}

.chat-info-tab-pane {
  padding-top: 0.35rem;
}

.chat-info-panel__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.65rem 0.75rem 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(225, 242, 255, 0.12));
}

.chat-info-block {
  margin-bottom: 1rem;
}

.chat-info-block__title {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.chat-info-empty {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.35rem 0;
}

.chat-info-empty[hidden] {
  display: none;
}

.chat-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.chat-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  top: var(--topbar-h);
  z-index: 200;
  background: rgba(32, 56, 44, 0.25);
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.drawer-backdrop[hidden] {
  display: none !important;
}

.cabinet-drawer {
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  z-index: 210;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
}

.cabinet-drawer[hidden] {
  display: none !important;
}

.cabinet-drawer__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.cabinet-drawer__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
}

.cabinet-drawer__close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

.cabinet-drawer__close:hover {
  background: rgba(74, 124, 98, 0.1);
  color: var(--text);
}

.cabinet-drawer__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 1rem 1rem;
}

@media (max-width: 960px) {
  .crm-nav-backdrop:not([hidden]) {
    display: block;
    z-index: 2090;
  }

  .crm-nav {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2100;
    width: min(var(--crm-nav-w), 88vw);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
  }

  .crm-nav.is-open {
    transform: translateX(0);
  }
}

.team-sidebar {
  flex: 0 0 var(--messenger-sidebar-w);
  width: var(--messenger-sidebar-w);
  max-width: 100%;
  flex-shrink: 0;
  background: var(--surface);
  z-index: 45;
  border-right: 1px solid var(--border);
}

/* Разделитель список чатов ↔ переписка (только широкий макет) */
.messenger__splitter {
  flex: 0 0 8px;
  width: 8px;
  align-self: stretch;
  position: relative;
  z-index: 46;
  margin: 0 -3px;
  padding: 0 3px;
  box-sizing: content-box;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  background: transparent;
}

.messenger__splitter::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  bottom: 10px;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, width 0.15s ease;
}

.messenger__splitter:hover::after,
.messenger__splitter:focus-visible::after {
  background: rgba(74, 124, 98, 0.22);
}

.messenger__splitter:focus-visible {
  outline: none;
}

.messenger__splitter:focus-visible::after {
  box-shadow: 0 0 0 2px rgba(74, 143, 111, 0.25);
}

.messenger__splitter.messenger__splitter--active::after {
  background: rgba(74, 124, 98, 0.38);
}

.team-sidebar__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.team-sidebar__general {
  --sidebar-pill-sweep-ms: 0.44s;
  --sidebar-pill-sweep-ease: cubic-bezier(0.22, 1, 0.32, 1);
  --sidebar-chat-pill-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.62rem;
  width: 100%;
  margin: 0;
  padding: 0.48rem 0.78rem;
  border: 1px solid rgba(74, 124, 98, 0.14);
  border-radius: var(--sidebar-chat-pill-radius);
  background: rgba(255, 255, 255, 0.22);
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color 0.22s var(--sidebar-pill-sweep-ease),
    background 0.22s var(--sidebar-pill-sweep-ease);
}

/* Реальный span вместо ::before — надёжная анимация внутри <button> (ЛС). */
.team-sidebar__general .sidebar-chat-sweep-fill,
.team-roster-item .sidebar-chat-sweep-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(120, 198, 255, 0.5), rgba(52, 152, 234, 0.58));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--sidebar-pill-sweep-ms) var(--sidebar-pill-sweep-ease);
  pointer-events: none;
  z-index: 0;
  display: block;
}

.team-sidebar__general-main,
.team-sidebar__general-aside {
  position: relative;
  z-index: 1;
}

.team-sidebar__general:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.34);
  border-color: rgba(74, 124, 98, 0.18);
}

.team-sidebar__general.is-active {
  border-color: rgba(52, 152, 234, 0.38);
  background: rgba(255, 255, 255, 0.18);
}

.team-sidebar__general.is-active .sidebar-chat-sweep-fill {
  transform: scaleX(1);
  will-change: transform;
}

.team-sidebar__general-main {
  display: flex;
  align-items: center;
  gap: 0.82rem;
  flex: 1;
  min-width: 0;
}

.team-sidebar__badge {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--unread-badge-bg);
  color: var(--unread-badge-text);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(20, 100, 170, 0.35);
}

.team-sidebar__badge[hidden] {
  display: none !important;
}

.team-sidebar__general-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(74, 143, 111, 0.12);
  color: var(--accent);
  font-weight: 500;
  font-size: 1.18rem;
}

.team-sidebar__general-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 11px;
}

.team-sidebar__general-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.team-sidebar__general-title {
  font-size: 1.14rem;
  font-weight: 400;
  color: var(--text);
}

.team-sidebar__general-preview {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.team-sidebar__general-aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  min-width: 2.5rem;
}

.team-sidebar__time {
  font-size: 0.82rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: #8aa399;
}

.team-sidebar__section-title {
  padding: 0.58rem 0.88rem 0.42rem;
  font-size: 0.88rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.team-sidebar__section-title--list-head {
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  padding: 0.75rem 1rem 0.45rem;
  border-bottom: 1px solid var(--border);
}

.team-sidebar__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.3rem 0.45rem 0.65rem;
}

.team-sidebar__scroll--chats {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  padding-top: 0.35rem;
}

.team-sidebar__roster-dm {
  flex: 1;
  min-height: 0;
}

/* Сайдбар: превью с токенами / сеткой пикера — Apple PNG, компактно и по вертикали с текстом */
.team-sidebar__general-preview .tg-emoji-inline.tg-emoji--sidebar-preview,
.team-roster-item__preview .tg-emoji-inline.tg-emoji--sidebar-preview {
  display: inline-block;
  width: 18px;
  height: 18px;
  max-width: none;
  object-fit: contain;
  object-position: center center;
  vertical-align: -0.18em;
  margin: 0 0.06em;
  line-height: 1;
}

.team-sidebar__general-preview.sidebar-preview--emoji-only,
.team-roster-item__preview.sidebar-preview--emoji-only {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}

.team-sidebar__general-preview.sidebar-preview--emoji-only {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.team-roster-item__preview.sidebar-preview--emoji-only {
  -webkit-line-clamp: unset;
  display: flex;
  overflow: hidden;
  max-height: 3.2em;
}

.team-sidebar__general-preview.sidebar-preview--emoji-only .tg-emoji-inline.tg-emoji--sidebar-preview,
.team-roster-item__preview.sidebar-preview--emoji-only .tg-emoji-inline.tg-emoji--sidebar-preview {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0 0.05em;
}

.team-sidebar__general-preview.sidebar-preview--emoji-single .tg-emoji-inline.tg-emoji--sidebar-preview,
.team-roster-item__preview.sidebar-preview--emoji-single .tg-emoji-inline.tg-emoji--sidebar-preview {
  width: 22px;
  height: 22px;
}

.team-roster-item:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.34);
  border-color: rgba(74, 124, 98, 0.18);
}

.team-roster-item.is-active {
  border-color: rgba(52, 152, 234, 0.38);
  background: rgba(255, 255, 255, 0.18);
}

.team-roster-item.is-active .sidebar-chat-sweep-fill {
  transform: scaleX(1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .team-sidebar__general .sidebar-chat-sweep-fill,
  .team-roster-item .sidebar-chat-sweep-fill {
    transition: none;
    will-change: auto;
  }
}

@media (max-width: 900px) {
  .chat-shell {
    max-width: 100%;
    width: 100%;
    padding-inline: 0;
    max-height: none;
  }

  .team-sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    flex: none;
    width: min(var(--team-sidebar-w), min(92vw, var(--messenger-sidebar-drag-max)));
    max-width: 92vw;
    z-index: 80;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 6px 0 28px rgba(0, 0, 0, 0.1);
  }

  .team-sidebar.is-open {
    transform: translateX(0);
  }

  .messenger__splitter {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
 * Тёмная тема: список чатов (контраст, glass, активный ряд)
 * -------------------------------------------------------------------------- */
[data-theme="dark"] .team-sidebar {
  --chat-bg: #0f172a;
  --chat-card: rgba(255, 255, 255, 0.04);
  --chat-card-hover: rgba(255, 255, 255, 0.08);
  --chat-card-active: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --chat-card-active-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
  --sidebar-chat-pill-radius: 14px;
  --sidebar-row-border: rgba(255, 255, 255, 0.06);
  --sidebar-avatar-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .team-sidebar {
  background: linear-gradient(180deg, var(--chat-bg) 0%, #020617 100%);
  border-right-color: rgba(148, 163, 184, 0.12);
}

[data-theme="dark"] .team-sidebar__inner {
  background: transparent;
}

[data-theme="dark"] .team-sidebar__section-title--list-head {
  padding: 0.7rem 1rem 0.5rem;
  background: rgba(2, 6, 23, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-main);
}

[data-theme="dark"] .team-sidebar__scroll {
  background: transparent;
}

[data-theme="dark"] .team-sidebar__scroll--chats {
  gap: 8px;
  padding: 0.5rem 0.55rem 0.75rem;
}

[data-theme="dark"] .team-sidebar__general,
[data-theme="dark"] .team-roster-item {
  --sidebar-chat-pill-radius: 14px;
  padding: 10px 12px;
  border-radius: var(--sidebar-chat-pill-radius);
  border: 1px solid var(--sidebar-row-border);
  background: var(--chat-card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

[data-theme="dark"] .team-sidebar__general:hover:not(.is-active),
[data-theme="dark"] .team-roster-item:hover:not(.is-active) {
  background: var(--chat-card-hover);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .team-sidebar__general.is-active,
[data-theme="dark"] .team-roster-item.is-active {
  background: var(--chat-card-active);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--chat-card-active-shadow);
}

[data-theme="dark"] .team-sidebar__general.is-active .sidebar-chat-sweep-fill,
[data-theme="dark"] .team-roster-item.is-active .sidebar-chat-sweep-fill {
  opacity: 0;
  transform: scaleX(0);
}

[data-theme="dark"] .team-sidebar__general-title,
[data-theme="dark"] .team-roster-item__name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  color: #ffffff;
}

[data-theme="dark"] .team-sidebar__general-preview,
[data-theme="dark"] .team-roster-item__preview {
  font-size: 13px;
  color: var(--text-secondary);
}

[data-theme="dark"] .team-sidebar__time,
[data-theme="dark"] .team-roster-item__time {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.7;
}

[data-theme="dark"] .team-sidebar__general.is-active .team-sidebar__general-title,
[data-theme="dark"] .team-sidebar__general.is-active .team-sidebar__general-preview,
[data-theme="dark"] .team-sidebar__general.is-active .team-sidebar__time,
[data-theme="dark"] .team-roster-item.is-active .team-roster-item__name,
[data-theme="dark"] .team-roster-item.is-active .team-roster-item__preview,
[data-theme="dark"] .team-roster-item.is-active .team-roster-item__time,
[data-theme="dark"] .team-roster-item.is-active .team-roster-item__status {
  color: #ffffff;
  opacity: 1;
}

[data-theme="dark"] .team-sidebar__general.is-active .team-sidebar__general-preview:not(.team-sidebar__general-preview--typing),
[data-theme="dark"] .team-roster-item.is-active .team-roster-item__preview:not(.team-roster-item__preview--typing) {
  color: rgba(255, 255, 255, 0.92);
}

[data-theme="dark"] .team-sidebar__general.is-active .team-sidebar__time,
[data-theme="dark"] .team-roster-item.is-active .team-roster-item__time {
  color: rgba(255, 255, 255, 0.9);
  opacity: 0.85;
}

[data-theme="dark"] .team-sidebar__general.is-active .team-sidebar__general-preview--typing,
[data-theme="dark"] .team-roster-item.is-active .team-roster-item__preview--typing {
  color: rgba(255, 255, 255, 0.96);
}

[data-theme="dark"] .team-roster-item.is-active .team-roster-item__status--online {
  color: rgba(255, 255, 255, 0.95);
}

[data-theme="dark"] .team-sidebar__general-icon {
  border-radius: 50%;
  box-shadow: var(--sidebar-avatar-shadow);
  background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .team-sidebar__general-icon img {
  border-radius: 50%;
}

[data-theme="dark"] .team-sidebar__badge,
[data-theme="dark"] .team-roster-item__badge {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .team-sidebar__general.is-active .team-sidebar__badge,
[data-theme="dark"] .team-roster-item.is-active .team-roster-item__badge {
  background: rgba(255, 255, 255, 0.95);
  color: #2563eb;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .team-sidebar__general,
  [data-theme="dark"] .team-roster-item {
    transition-duration: 0.01ms;
  }
}

.cabinet {
  width: 100%;
  max-width: 100%;
  margin: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px var(--shadow-ambient);
  padding: 1.1rem 1.15rem 1.2rem;
}

.cabinet__title {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.cabinet__photo-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.cabinet__avatar-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--bg-avatar);
}

.cabinet__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cabinet__avatar-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 500;
  color: var(--muted);
  background: linear-gradient(145deg, var(--accent-soft), var(--bg-muted));
  user-select: none;
}

.cabinet__avatar-wrap--has-photo .cabinet__avatar-ph {
  display: none;
}

.cabinet__photo-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
}

.cabinet__form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.cabinet__label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  margin-top: 0.35rem;
}

.cabinet__label:first-of-type {
  margin-top: 0;
}

.cabinet__input {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--input-bg);
  width: 100%;
  max-width: 320px;
}

.cabinet__input:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.cabinet__input--readonly {
  background: var(--input-bg-readonly);
  color: var(--muted);
  cursor: default;
}

.cabinet__hint {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
  max-width: 420px;
}

.cabinet__error {
  min-height: 1.15rem;
  margin: 0.25rem 0 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--danger);
}

.cabinet__btn {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.cabinet__btn--ghost {
  color: var(--muted);
  background: transparent;
  border-color: var(--border);
}

.cabinet__btn--ghost:hover {
  color: var(--text);
  border-color: var(--btn-hover-border);
}

.cabinet__btn--primary {
  margin-top: 0.35rem;
  color: var(--text-on-accent);
  background: var(--accent);
  border-color: var(--accent);
  align-self: flex-start;
}

.cabinet__btn--primary:hover {
  filter: brightness(1.05);
}

.cabinet__btn--primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cabinet__logout {
  align-self: flex-start;
  margin-top: 1.15rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.cabinet__logout:hover {
  color: var(--text);
  border-color: var(--btn-hover-border);
}

.chat {
  position: relative;
  width: 100%;
  max-width: 720px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px var(--shadow-chat);
  overflow: hidden;
}

.messenger__center .chat {
  /* До первого кадра измерения (композер × scroll). JS перезаписывает по #chat-composer-dock × #chat-scroll. */
  --chat-bottom-scroll-padding: 26px;
  width: 100%;
  max-width: none;
  min-width: 0;
  height: 100%;
  flex: 1;
  min-height: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--chat-canvas-mid);
  background-image: var(--chat-pattern-overlay), var(--chat-bg-image);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  background-position: 0 0, center center;
}

/* Лёгкие блики поверх фоновой картинки */
.messenger__center .chat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--chat-after-overlay);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
}

.messenger__center .chat > *:not(.chat-emoji-pop):not(.chat-edit-backdrop) {
  position: relative;
  z-index: 1;
}

.messenger__center .chat > .chat__toast {
  position: absolute;
  z-index: 1300;
}

.tg-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-height: var(--tg-head-h);
  padding: 0.42rem 0.55rem 0.42rem 0.5rem;
  border-bottom: 1px solid var(--tg-head-border);
  background: var(--surface);
  box-shadow: var(--tg-head-inset);
}

.tg-head__icon-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--tg-head-icon);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tg-head__icon-btn svg {
  width: 24px;
  height: 24px;
}

.tg-head__icon-btn:hover {
  background: var(--tg-head-icon-hover-bg);
  color: var(--text);
}

.tg-head__icon-btn--accent {
  color: var(--accent);
}

#chat-info-btn.tg-head__icon-btn--accent {
  color: #34a4e8;
}

#chat-info-btn.tg-head__icon-btn--accent:hover {
  color: #2a93d4;
  background: rgba(52, 164, 232, 0.1);
}

#chat-info-btn .tg-head__svg--more {
  display: none;
}

#chat-info-btn .tg-head__svg--info {
  display: block;
}

.chat__back {
  display: none;
}

.chat__back.is-visible {
  display: flex;
}

@media (min-width: 901px) {
  .chat__back.is-visible {
    display: none;
  }

  .chat__team-menu {
    display: none !important;
  }
}

.chat .chat__team-menu.topbar__icon-btn {
  display: flex;
}

.tg-head__identity {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.tg-head__avatar {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tg-head-avatar-bg);
  border: none;
  box-shadow: none;
}

.tg-head__avatar-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--accent);
}

.tg-head__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tg-head__avatar-img:not([hidden]) ~ .tg-head__avatar-ph {
  display: none;
}

.tg-head__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin: 0;
  padding: 0.25rem 0.35rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}

.tg-head__titles:hover {
  background: rgba(0, 0, 0, 0.04);
}

.tg-head__title {
  font-size: 1.06rem;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tg-head__subtitle {
  font-size: 0.84rem;
  color: #6a7a72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.tg-head__tools {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.05rem;
}

.chat__search-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem var(--chat-col-pad-x);
  border-bottom: 1px solid var(--chat-search-border);
  background: var(--chat-search-bar-bg);
}

.chat__search-bar[hidden] {
  display: none !important;
}

.chat__search-input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--chat-search-input-border);
  border-radius: 10px;
  font: inherit;
  font-size: 0.88rem;
  background: var(--bg-elevated);
  color: var(--text);
  outline: none;
}

.chat__search-input:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 2px var(--input-focus-ring);
}

.chat__search-next {
  flex-shrink: 0;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text);
}

.chat__search-next:hover {
  background: var(--accent-soft);
}

.chat__pinned {
  flex-shrink: 0;
  border-bottom: 1px solid var(--chat-search-border);
  background: linear-gradient(90deg, rgba(138, 99, 210, 0.12), rgba(138, 99, 210, 0.04));
}

.chat__pinned[hidden] {
  display: none !important;
}

.chat__pinned-inner {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem var(--chat-col-pad-x);
  min-height: 42px;
  max-width: var(--chat-col-max);
  margin: 0 auto;
  width: 100%;
}

.chat__pinned-label {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--chat-pinned-label);
}

.chat__pinned-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat__pinned-text:hover {
  text-decoration: underline;
}

.chat__pinned-unpin {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--chat-pinned-unpin-bg);
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.chat__pinned-unpin:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.chat__scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(90, 130, 108, 0.38) rgba(0, 0, 0, 0.06);
  background-color: transparent;
  isolation: isolate;
}

.chat__scroll.chat__scroll--list-enter > .chat__scroll-body {
  animation: chat-scroll-list-enter var(--motion-normal) var(--ease-out-premium) both;
}

@keyframes chat-scroll-list-enter {
  from {
    opacity: 0.55;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chat__scroll::-webkit-scrollbar {
  width: 6px;
}

.chat__scroll::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 6px;
  border: 2px solid var(--scrollbar-track-border);
}

/* Слой-плейсхолдер (фон рисуется на .chat__scroll-body — тянется на всю высоту переписки) */
.chat__scroll-pattern {
  display: none;
}

.chat__scroll-body {
  position: relative;
  z-index: 1;
  padding: 0.65rem var(--chat-col-pad-x) 1.1rem;
  min-height: 100%;
  /* Короткий чат: пузыри у нижней кромки (у окна ввода), а не «под шапкой» */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: var(--chat-canvas-mid);
  background-image: var(--chat-pattern-overlay), var(--chat-bg-image);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, cover;
  background-position: 0 0, center center;
}

/* Раньше — тайл «каракули»; фон теперь на .chat__scroll-body */
.chat__scroll-body::before {
  display: none;
}

.chat__scroll-body > * {
  position: relative;
  z-index: 1;
}

/* Лента чата в кэше при переключении: остаётся в DOM (не fragment), чтобы img/video не перезагружались */
.chat__scroll-body > .chat__list-cache-host {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
  visibility: hidden;
  contain: strict;
  z-index: 0;
}

.messenger__center .chat .chat__scroll-body {
  background: transparent;
  padding-bottom: calc(var(--chat-bottom-scroll-padding) + var(--chat-selection-scroll-extra));
}

.messenger__center .chat .chat__scroll-body::before {
  display: none;
}

/* Пузыри: лёгкая тень в духе Telegram Desktop */
.chat__scroll .msg__bubble {
  box-shadow: var(--bubble-shadow-in);
}

.chat__scroll .msg--out .msg__bubble {
  box-shadow: var(--bubble-shadow-out);
}

.chat__scroll .msg__bubble--bare-emoji {
  box-shadow: none !important;
}

.chat__scroll .msg--out .msg__bubble > .msg__name {
  color: var(--msg-name-out);
}

.chat__empty {
  flex-shrink: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 2rem 1rem;
}

.chat__scroll .chat__empty {
  color: var(--chat-empty-color);
  text-shadow: 0 1px 10px var(--shadow-ambient-lg);
  font-size: 0.98rem;
}

.chat__empty[hidden] {
  display: none;
}

.chat__list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  max-width: var(--chat-col-max);
  min-width: 0;
  margin: 0 auto;
  width: 100%;
}

.chat__list[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {

  .chat__bottom-switch > .chat__composer-dock,
  .chat__bottom-switch > .chat__selection-dock {
    transition: none !important;
  }

  .messenger__center .chat .chat__scroll-body {
    transition: none !important;
  }

  .chat__toast,
  .chat__toast.chat__toast--in,
  .chat__toast.chat__toast--out {
    transition: none !important;
    opacity: 1 !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  .chat__scroll.chat__scroll--list-enter > .chat__scroll-body {
    animation: none !important;
  }

  .crm-section--active {
    animation: none !important;
  }
}

/* Удаление: «испарение» строки (плавное размытие + лёгкий подъём) */
@keyframes msg-evaporate-out {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
  45% {
    opacity: 0.88;
    filter: blur(4px);
    transform: translateY(-4px) scale(0.99);
  }
  100% {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(-14px) scale(0.93);
  }
}

/* Исходящее после отправки: короткий micro-settle как в Telegram (почти на месте). */
@keyframes msg-send-enter {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* Optimistic send: анимация только колонки пузыря — аватар вне transform/opacity, без лишнего repaint img. */
.chat__list .msg > .msg__row > .msg__body.message-enter {
  opacity: 0;
  transform: translateY(12px) scale(0.98);
}

.chat__list .msg > .msg__row > .msg__body.message-enter-active {
  opacity: 1;
  transform: none;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .chat__list .msg > .msg__row > .msg__body.message-enter,
  .chat__list .msg > .msg__row > .msg__body.message-enter-active {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Emoji в сообщениях: короткий pop-in только при классе .tg-emoji--enter-* (ставит chat.js). */
@keyframes tg-emoji-enter-mixed {
  0% {
    opacity: 0;
    transform: scale(0.78);
  }
  58% {
    opacity: 1;
    transform: scale(1.06);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes tg-emoji-enter-only {
  0% {
    opacity: 0;
    transform: scale(0.74) translateY(3px);
  }
  52% {
    opacity: 1;
    transform: scale(1.09) translateY(0);
  }
  76% {
    transform: scale(0.98) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes tg-emoji-composer-enter {
  0% {
    opacity: 0;
    transform: scale(0.68);
  }
  62% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes chat-emoji-pop-btn-press {
  0% {
    transform: scale(1);
  }
  48% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes msg-reaction-pill-enter {
  0% {
    opacity: 0;
    transform: scale(0.88);
  }
  58% {
    opacity: 1;
    transform: scale(1.04);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}



@keyframes msgReactionCssBurst {
  0% {
    transform: scale(0.65) translateY(12px);
    opacity: 0;
    filter: blur(1px);
  }
  18% {
    opacity: 1;
    filter: none;
  }
  55% {
    transform: scale(1.12) translateY(-10px);
    opacity: 1;
  }
  100% {
    transform: scale(1) translateY(-22px);
    opacity: 0;
  }
}

.chat__scroll.chat__scroll--file-drag-over {
  outline: 2px dashed rgba(96, 171, 93, 0.75);
  outline-offset: -4px;
  background-color: rgba(96, 171, 93, 0.07);
}

.chat__scroll .msg__voice {
  background: transparent;
  border: none;
  box-shadow: none;
}

.chat__scroll .msg--out .msg__voice {
  background: transparent;
  border: none;
}

.chat__pending {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.45rem var(--chat-col-pad-x) 0;
  border-top: 1px solid var(--border);
  background: var(--chat-pending-bg);
  max-width: var(--chat-col-max);
  margin: 0 auto;
  width: 100%;
}

.messenger__center .chat .chat__pending {
  background: transparent;
  border-top-color: var(--chat-pending-border-messenger);
}

.chat__pending[hidden] {
  display: none;
}

.pending-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.28rem 0.48rem 0.28rem 0.58rem;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--accent-soft);
  border-radius: 999px;
  border: 1px solid rgba(74, 143, 111, 0.25);
}

.pending-chip button {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--pending-chip-btn-bg);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.pending-chip button:hover {
  color: var(--text);
}

.pending-chip__text {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
  flex: 1;
}

.pending-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-chip__size {
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.chat__upload-status {
  flex-shrink: 0;
  padding: 0.5rem var(--chat-col-pad-x) 0.55rem;
  border-top: 1px solid var(--border);
  background: var(--chat-upload-gradient);
}

.messenger__center .chat .chat__upload-status {
  background: transparent;
  border-top-color: var(--chat-pending-border-messenger);
}

.chat__upload-status[hidden] {
  display: none !important;
}

.chat__upload-status__inner {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: var(--chat-col-max);
  margin: 0 auto;
  width: 100%;
}

.chat__upload-cancel {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  margin: -0.06rem 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.chat__upload-cancel:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text);
}

.chat__upload-cancel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chat__upload-spinner {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.12rem;
  border: 2px solid rgba(74, 143, 111, 0.22);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: chat-upload-spin 0.75s linear infinite;
}

@keyframes chat-upload-spin {
  to {
    transform: rotate(360deg);
  }
}

.chat__upload-status__copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.chat__upload-line1 {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}

.chat__upload-line2 {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.35;
}

.chat__upload-bar {
  margin-top: 0.45rem;
  height: 3px;
  border-radius: 3px;
  background: rgba(74, 124, 98, 0.12);
  overflow: hidden;
}

.chat__upload-bar__fill {
  width: 0%;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.18s ease-out;
}

@keyframes chat-upload-bar-slide {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(320%);
  }
}

.chat__toast {
  position: absolute;
  top: calc(var(--tg-head-h) + 0.45rem);
  bottom: auto;
  left: 50%;
  right: auto;
  z-index: 1300;
  box-sizing: border-box;
  width: max-content;
  max-width: min(92vw, 280px);
  min-width: 0;
  padding: 0.42rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: rgba(31, 45, 38, 0.92);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow:
    0 4px 20px rgba(32, 56, 44, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.05);
  pointer-events: none;
  transform: translate3d(-50%, -8px, 0);
  opacity: 0;
  transition:
    opacity var(--motion-normal) var(--ease-out-premium),
    transform var(--motion-normal) var(--ease-out-premium);
}

.chat__toast[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

.chat__toast.chat__toast--in {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

.chat__toast.chat__toast--out {
  opacity: 0;
  transform: translate3d(-50%, -6px, 0);
  transition:
    opacity var(--motion-fast) var(--ease-out-premium),
    transform var(--motion-fast) var(--ease-out-premium);
}

/* Одна нижняя зона: композер ⟷ панель выбора (Telegram-style). */
.chat__bottom-switch {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  flex-shrink: 0;
  width: 100%;
  position: relative;
}

.chat__bottom-switch > .chat__composer-dock,
.chat__bottom-switch > .chat__selection-dock {
  grid-area: 1 / 1;
  align-self: end;
  width: 100%;
}

.chat__bottom-switch > .chat__composer-dock {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.32, 1),
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.chat__bottom-switch > .chat__selection-dock {
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0.4rem var(--chat-col-pad-x) calc(var(--chat-composer-bottom-gap) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
  max-height: none;
  min-height: 0;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.32, 1),
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.28s;
}

.chat__bottom-switch > .chat__selection-dock > * {
  pointer-events: auto;
}

.chat:not(.chat--selection-dock-open) .chat__bottom-switch > .chat__selection-dock {
  pointer-events: none;
}

.chat.chat--selection-dock-open .chat__bottom-switch > .chat__composer-dock {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.32, 1),
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.28s;
}

.chat.chat--selection-dock-open .chat__bottom-switch > .chat__selection-dock {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: none;
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.32, 1),
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

.messenger__center .chat .chat__bottom-switch > .chat__selection-dock {
  padding-top: 0.18rem;
  padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
  background: transparent;
}

.messenger__center .chat .chat__bottom-switch {
  transform: translateY(calc(-1 * var(--chat-composer-float-lift)));
}

/* Тот же ряд, что у композера: «поле» (flex:1) + отступ под Send + колонка микрофона — плашка по центру белого поля */
.chat__selection-rail {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  width: 100%;
  max-width: var(--chat-col-max);
}

.chat__selection-mirror-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.chat__selection-mirror-row {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
}

.chat__selection-bar-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat__selection-send-spacer {
  flex-shrink: 0;
  width: var(--composer-action-btn);
  height: var(--composer-action-btn);
  pointer-events: none;
  visibility: hidden;
}

.chat__selection-side-spacer {
  flex-shrink: 0;
  width: var(--composer-action-btn);
  min-height: var(--composer-action-btn);
  pointer-events: none;
  visibility: hidden;
}

.chat__selection-pill {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  width: fit-content;
  min-height: 48px;
  padding: 0.35rem 0.55rem 0.35rem 0.42rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Без backdrop-filter: при входной анимации opacity/transform блюр даёт заметный лаг отрисовки. */
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(228, 243, 255, 0.92));
  border-radius: 26px;
  border: 1px solid var(--ui-glass-border);
  box-shadow: var(--ui-glass-shadow-inset), var(--ui-glass-shadow-pop);
  contain: layout paint;
}

.chat__selection-dock.chat__selection-dock--open .chat__selection-pill {
  animation: chat-selection-pill-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes chat-selection-pill-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.99);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.chat__selection-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #5f6368;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.12s ease;
}

.chat__selection-close:hover {
  background: rgba(51, 167, 255, 0.12);
  color: #202124;
}

.chat__selection-close:active {
  transform: scale(0.94);
}

.chat__selection-count {
  flex: 1;
  min-width: 0;
  padding: 0 0.35rem 0 0.15rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #3c4043;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat__selection-actions {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  flex-wrap: nowrap;
  flex-shrink: 0;
  padding-left: 0.15rem;
}

.chat__selection-action {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.42rem 0.65rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #3c4043;
  background: transparent;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.chat__selection-action:hover {
  background: rgba(51, 167, 255, 0.1);
}

.chat__selection-action--danger {
  color: #e53935;
}

.chat__selection-action--danger:hover {
  background: rgba(229, 57, 53, 0.09);
  color: #d32f2f;
}

.chat__selection-action--danger:disabled {
  opacity: 0.38;
  cursor: default;
}

.chat__selection-action--danger:disabled:hover {
  background: transparent;
}

.chat__selection-action:disabled {
  opacity: 0.38;
  cursor: default;
}

.chat__selection-action:disabled:hover {
  background: transparent;
}

.chat__selection-ic {
  flex-shrink: 0;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .chat__selection-dock.chat__selection-dock--open .chat__selection-pill {
    animation: none !important;
  }
}

.chat__composer-dock {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  padding: 0.4rem var(--chat-col-pad-x) calc(var(--chat-composer-bottom-gap) + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(244, 247, 245, 0.55));
  border-top: none;
}

.chat__composer-edge-spacer {
  flex: 1 1 0;
  min-width: 0;
}

.chat__composer-edge-spacer--trail {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.messenger__center .chat .chat__composer-dock {
  background: transparent;
  padding-top: 0.18rem;
  padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
}

.messenger__center .chat .chat__composer-dock > * {
  transform: none;
}

.chat__composer-rail {
  display: flex;
  flex: 0 1 var(--chat-col-max);
  max-width: var(--chat-col-max);
  width: 100%;
  align-items: center;
  gap: 0.48rem;
}

.chat__composer-float-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.chat__composer-stack {
  position: relative;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 2;
}

.chat__reply-bar,
.chat__composer-stack,
.chat__composer-row {
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.chat__composer-row {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  min-width: 0;
}

.chat__reply-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.38rem 0.55rem 0.38rem 0.65rem;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(74, 143, 111, 0.12), rgba(74, 143, 111, 0.05));
  border: 1px solid rgba(74, 143, 111, 0.22);
  font-size: 0.82rem;
}

.chat__reply-bar[hidden] {
  display: none !important;
}

.chat__reply-bar__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.chat__reply-bar__cap {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.chat__reply-bar__text {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat__reply-bar__close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.chat__reply-bar__close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text);
}

.chat__typing-indicator {
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 0.32rem;
  display: flex;
  align-items: center;
  gap: 0.32rem;
  box-sizing: border-box;
  width: max-content;
  max-width: 25%;
  min-width: 0;
  min-height: 1.55rem;
  padding: 0.42rem 0.72rem 0.45rem 0.78rem;
  z-index: 3;
  border-radius: 14px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.3;
  color: #2b95e8;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  background: var(--ui-glass-fill);
  border: 1px solid var(--ui-glass-border);
  box-shadow: var(--ui-glass-shadow-inset), var(--ui-glass-shadow-outer);
  backdrop-filter: blur(var(--ui-glass-blur));
  -webkit-backdrop-filter: blur(var(--ui-glass-blur));
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.22s ease,
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.chat__typing-indicator[hidden] {
  display: none !important;
}

.chat__typing-indicator__text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat__typing-indicator__dots {
  display: inline-flex;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 0.28em;
  height: 1.15em;
  padding-bottom: 0.06em;
  color: #33a7ff;
}

.chat__typing-indicator__dot {
  display: block;
  width: 0.55em;
  height: 0.55em;
  min-width: 5px;
  min-height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0.08em 0.22em rgba(51, 167, 255, 0.45);
  transform-origin: 50% 100%;
  animation: chat-typing-dot-wave 0.52s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.chat__typing-indicator__dot:nth-child(2) {
  animation-delay: 0.11s;
}

.chat__typing-indicator__dot:nth-child(3) {
  animation-delay: 0.22s;
}

@keyframes chat-typing-dot-wave {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.42;
  }
  40% {
    transform: translateY(-0.55em) scale(1.18);
    opacity: 1;
  }
  70% {
    transform: translateY(-0.12em) scale(0.92);
    opacity: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat__typing-indicator {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .chat__typing-indicator__dot {
    animation: none;
    opacity: 0.82;
    transform: none;
  }
}

.tg-composer-float {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.22rem;
  padding: 0.38rem 0.48rem 0.38rem 0.52rem;
  background: var(--composer-float-bg);
  border-radius: 28px;
  border: 1px solid var(--composer-float-border);
  box-shadow: var(--composer-float-shadow);
  transition: box-shadow 0.2s ease, border-color 0.15s ease;
}

.tg-composer-float:focus-within {
  border-color: var(--btn-hover-border);
  box-shadow: var(--composer-float-focus-shadow);
}

.tg-composer-float__emoji,
.tg-composer-float__attach {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--composer-icon-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, transform 0.12s ease;
}

.tg-composer-float__emoji svg,
.tg-composer-float__attach svg {
  width: 24px;
  height: 24px;
}

.tg-composer-float__emoji:hover,
.tg-composer-float__attach:hover {
  color: var(--accent);
  background: var(--composer-emoji-hover-bg);
}

.tg-composer-float__field {
  flex: 1;
  min-width: 0;
  border-radius: 20px;
  background: var(--composer-field-bg);
  transition: background 0.15s;
}

.tg-composer-float:focus-within .tg-composer-float__field {
  background: var(--composer-field-focus-bg);
}

.tg-composer-float__input {
  display: block;
  width: 100%;
  max-height: 148px;
  margin: 0;
  padding: 0.58rem 0.72rem;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.48;
  color: var(--text);
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  field-sizing: content;
  min-height: 46px;
}

.tg-composer-float__input--rich {
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
  cursor: text;
}

.tg-composer-float__input--rich.is-composer-empty:before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
}

.tg-composer-float__input--rich:focus.is-composer-empty:before {
  content: "";
  display: none;
}

.tg-composer-float__input--rich .tg-emoji--composer {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: -0.28em;
  margin: 0 0.05em;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}

@supports not (field-sizing: content) {
  .tg-composer-float__input {
    min-height: 46px;
    max-height: 148px;
  }
}

.tg-composer-float__send {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--composer-action-btn);
  height: var(--composer-action-btn);
  padding: 0;
  border: none;
  border-radius: 50%;
  color: var(--text-on-accent);
  background: var(--composer-action-blue);
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(32, 115, 185, 0.44);
  transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s;
}

.tg-composer-float__send svg {
  width: 26px;
  height: 26px;
}

.tg-composer-float__send:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.tg-composer-float__send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.chat__composer-side {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}

/* Фиксированная колонка: кнопка «вниз» не меняет ширину рельса при появлении/скрытии */
.chat__scroll-down-slot {
  width: 46px;
  height: var(--composer-action-btn);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat__scroll-down {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--scroll-down-bg);
  color: var(--scroll-down-fg);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity var(--motion-normal) var(--ease-out-premium),
    transform var(--motion-normal) var(--ease-out-premium),
    background var(--motion-fast) ease;
}

.chat__scroll-down.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.chat__scroll-down:hover {
  background: var(--scroll-down-hover);
  color: var(--accent);
}

.chat__scroll-down svg {
  width: 24px;
  height: 24px;
}

.chat__voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--composer-action-btn);
  height: var(--composer-action-btn);
  border: none;
  border-radius: 50%;
  color: var(--text-on-accent);
  background: var(--composer-action-blue);
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(32, 115, 185, 0.44);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.chat__voice-btn svg {
  width: 26px;
  height: 26px;
}

.chat__voice-btn:hover {
  transform: scale(1.03);
}

.chat__voice-btn.is-recording {
  animation: chat-voice-pulse 1.1s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.35);
}

@keyframes chat-voice-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(180, 35, 24, 0.35);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(180, 35, 24, 0);
  }
}

.chat-emoji-pop {
  position: fixed;
  z-index: 1400;
  width: min(320px, calc(100vw - 24px));
  max-height: min(280px, 42vh);
  overflow: auto;
  padding: 0.45rem;
  background: var(--emoji-pop-bg);
  border-radius: 16px;
  border: 1px solid var(--emoji-pop-border);
  box-shadow: var(--emoji-pop-shadow);
}

.chat-emoji-pop[hidden] {
  display: none;
}

.chat-emoji-pop__tab.is-active {
  background: rgba(74, 124, 98, 0.12);
  color: var(--text);
}

.forward-modal {
  position: fixed;
  inset: 0;
  z-index: 1550;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.forward-modal[hidden] {
  display: none !important;
}

.forward-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
}

.forward-modal__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  max-height: min(72vh, 520px);
  overflow: auto;
  padding: 1rem 1.05rem 0.85rem;
  background: var(--forward-modal-bg);
  border-radius: 16px;
  box-shadow: var(--forward-modal-shadow);
}

.forward-modal__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
}

.forward-modal__hint {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--muted);
}

.forward-modal__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.forward-modal__opt {
  display: block;
  width: 100%;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fafdfb;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.forward-modal__opt:hover {
  background: var(--accent-soft);
  border-color: rgba(74, 124, 98, 0.35);
}

.forward-modal__cancel {
  display: block;
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.5rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
}

.forward-modal__cancel:hover {
  color: var(--text);
}

/* Подтверждение удаления сообщений (стиль близкий к Telegram, тёмная карточка) */
.chat-delete-confirm {
  position: fixed;
  inset: 0;
  z-index: 1560;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.chat-delete-confirm[hidden] {
  display: none !important;
}

.chat-delete-confirm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(3px);
}

.chat-delete-confirm__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  padding: 1.1rem 1.15rem 1rem;
  border-radius: 14px;
  background: #2c2c2e;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.chat-delete-confirm__title {
  margin: 0 0 0.55rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.96);
  font-family: inherit;
}

.chat-delete-confirm__text {
  margin: 0 0 1.15rem;
  font-size: 0.94rem;
  line-height: 1.45;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
}

.chat-delete-confirm__actions {
  display: flex;
  flex-direction: row;
  gap: 0.55rem;
}

.chat-delete-confirm__btn {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0.5rem 0.65rem;
  border: none;
  border-radius: 11px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, opacity 0.12s ease, transform 0.1s ease;
}

.chat-delete-confirm__btn:active {
  transform: scale(0.98);
}

.chat-delete-confirm__btn:not(.chat-delete-confirm__btn--yes) {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.92);
}

.chat-delete-confirm__btn:not(.chat-delete-confirm__btn--yes):hover {
  background: rgba(255, 255, 255, 0.14);
}

.chat-delete-confirm__btn--yes {
  background: rgba(255, 69, 58, 0.22);
  color: #ff6961;
}

.chat-delete-confirm__btn--yes:hover {
  background: rgba(255, 69, 58, 0.32);
}

@media (max-width: 380px) {
  .chat-delete-confirm__actions {
    flex-direction: column;
  }

  .chat-delete-confirm__btn {
    width: 100%;
  }
}

.chat-edit-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
}

.chat-edit-backdrop[hidden] {
  display: none;
}

.chat-edit-modal {
  width: 100%;
  max-width: 420px;
  padding: 1rem 1.1rem;
  background: var(--chat-edit-modal-bg);
  color: var(--text);
  border-radius: 16px;
  box-shadow: var(--chat-edit-modal-shadow);
}

.chat-edit-modal__title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 500;
}

.chat-edit-modal__input {
  width: 100%;
  min-height: 120px;
  margin: 0 0 0.85rem;
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.92rem;
  border: 1px solid var(--chat-edit-input-border);
  border-radius: 12px;
  background: var(--input-bg);
  color: var(--text);
  resize: vertical;
}

.chat-edit-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.chat-edit-modal__btn {
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid var(--chat-edit-input-border);
  background: var(--chat-edit-btn-secondary);
  cursor: pointer;
}

.chat-edit-modal__btn--primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--text-on-accent);
}

/* --------------------------------------------------------------------------
 * Мессенджер (чат + сайдбар): Inter и типографика ближе к Telegram Web
 * -------------------------------------------------------------------------- */
.messenger {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.messenger .chat__list {
  gap: 6px;
}

.messenger .chat__day-block {
  gap: 6px;
}

.messenger .msg__bubble-inner {
  padding: 0.32rem 0.46rem 0.3rem 0.52rem;
}

.messenger .msg--out .msg__bubble-inner {
  padding-left: 0.46rem;
  padding-right: 0.52rem;
}

.messenger .msg__text {
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--msg-text-in);
}

.messenger .msg--out .msg__text {
  color: var(--msg-text-out);
}

.messenger .msg__bubble > .msg__name {
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.messenger .msg__forward-head__avatar-wrap {
  background: var(--msg-fwd-avatar-bg);
  box-shadow: 0 0 0 1px var(--msg-fwd-avatar-wrap-ring);
}

.messenger .msg__forward-head__avatar-ph {
  color: var(--msg-fwd-avatar-ph);
}

.messenger .msg__forward-head__label {
  font-size: 11px;
  font-weight: 500;
  color: var(--msg-fwd-label);
}

.messenger .msg__forward-head__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--msg-fwd-name);
}

.messenger .msg--out .msg__forward-head__name {
  color: var(--msg-fwd-name-out);
}

.messenger .msg__bubble--native-photo.msg__bubble--has-forward > .msg__forward-head {
  background: var(--msg-native-fwd-bg);
  box-shadow: 0 1px 0 var(--msg-native-fwd-line);
}

.messenger .msg--out .msg__bubble--native-photo.msg__bubble--has-forward > .msg__forward-head {
  background: var(--msg-native-fwd-bg-out);
}

.messenger .msg__bubble--native-photo.msg__bubble--has-forward > .msg__name {
  background: var(--msg-native-fwd-bg);
}

.messenger .msg--out .msg__bubble--native-photo.msg__bubble--has-forward > .msg__name {
  background: var(--msg-native-fwd-bg-out);
}

.messenger .msg__forward-quote {
  background: var(--msg-fwd-quote-bg);
}

.messenger .msg__forward-quote__text {
  color: var(--msg-fwd-quote-text);
}

.messenger .msg__time {
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.messenger .msg__reply-to__name {
  font-size: 0.8125rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.messenger .msg__reply-to__text {
  font-size: 0.875rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--msg-reply-text);
}

.messenger .msg--out .msg__reply-to__text {
  color: var(--msg-reply-text);
}

.messenger .msg__caption-wrap .msg__text {
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--msg-text-in);
}

.messenger .msg__text .tg-emoji-inline {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  object-position: center center;
  margin: 0 0.1em;
}

.messenger .msg__text--emoji-only .tg-emoji-inline {
  width: 38px;
  height: 38px;
  margin: 0 0.14em;
}

.messenger .msg__text--emoji-single .tg-emoji-inline {
  width: 44px;
  height: 44px;
  margin: 0 0.16em;
}

.messenger .msg__bubble--bare-emoji .msg__text--emoji-only .tg-emoji-inline {
  width: 76px;
  height: 76px;
}

.messenger .msg__bubble--bare-emoji .msg__text--emoji-single .tg-emoji-inline {
  width: 88px;
  height: 88px;
}

.messenger .msg__text:has(.tg-emoji-inline) {
  line-height: 1.52;
}

.messenger .msg--out .msg__caption-wrap .msg__text {
  color: var(--msg-text-out);
}

.messenger .tg-head__title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-main);
}

.messenger .tg-head__subtitle {
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}

.messenger .tg-head__titles {
  font-family: inherit;
}

.messenger .team-sidebar__general-title {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--text-main);
}

.messenger .team-sidebar__general-preview {
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}

.messenger .team-sidebar__general-preview--typing,
.messenger .team-roster-item__preview--typing {
  color: var(--link-blue);
  font-weight: 500;
}

.messenger .team-sidebar__time {
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}

.messenger .team-sidebar__section-title {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.messenger .team-sidebar__section-title--list-head {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-main);
  border-bottom-color: var(--border-color);
}

.messenger .team-roster-item__name {
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--text-main);
}

.messenger .team-roster-item__preview {
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}

/* Тёмная тема: имена в сайдбаре (перебивает типографику .messenger выше) */
[data-theme="dark"] .messenger .team-sidebar__general-title,
[data-theme="dark"] .messenger .team-roster-item__name {
  color: #ffffff;
}

.messenger .team-roster-item__status {
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
}

.messenger .tg-composer-float__input {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #1f2937;
}

.messenger .tg-composer-float__input--rich.is-composer-empty:before {
  color: #9ca3af;
}

.messenger .tg-composer-float__input--rich .tg-emoji--composer {
  width: 20px;
  height: 20px;
  vertical-align: -0.26em;
}

.messenger .chat__search-input {
  font-family: inherit;
  font-size: 0.875rem;
  letter-spacing: -0.01em;
}

.messenger .chat__pinned-label {
  letter-spacing: 0.04em;
}

.messenger .chat__pinned-text {
  font-size: 0.8125rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.messenger .msg__file {
  font-size: 0.875rem;
  letter-spacing: -0.01em;
  color: #1f2937;
}

.messenger .msg--out .msg__file {
  color: #163d26;
}

.messenger .chat__empty {
  font-size: 0.9375rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.messenger .chat__upload-line1,
.messenger .chat__upload-line2 {
  letter-spacing: -0.01em;
}

.messenger .chat__reply-bar__cap,
.messenger .chat__reply-bar__text {
  letter-spacing: -0.01em;
}

.messenger .pending-chip {
  letter-spacing: -0.01em;
}

.messenger .chat__hint {
  font-size: 0.75rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

@media (max-width: 520px) {
  .topbar__brand {
    font-size: 1.12rem;
  }

  .topbar__tab {
    font-size: 0.72rem;
    padding: 0.4rem 0.5rem;
  }
}

/* --- Перевозки (модуль после договора) --- */
.contracts-view--shipment {
  max-width: 56rem;
  margin: 0 auto;
  padding: 0.75rem 0 1.5rem;
}

.contracts-view--ati-form {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  --shipment-card-border: rgba(15, 23, 42, 0.08);
  --shipment-card-bg: #ffffff;
  --shipment-input-bg: #ffffff;
  --shipment-input-border: rgba(15, 23, 42, 0.1);
  --shipment-input-border-hover: rgba(74, 143, 111, 0.35);
  --shipment-pill-bg: rgba(74, 143, 111, 0.1);
  --shipment-pill-border: rgba(74, 143, 111, 0.22);
}

.contracts-view--shipment-modal {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: none;
  margin: 0;
  padding: 2rem 2.5rem;
  background: rgba(15, 23, 42, 0.44);
  box-sizing: border-box;
  overflow: hidden;
}

.contracts-view--shipment-modal[hidden] {
  display: none !important;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-shell {
  width: min(1480px, calc(100vw - 4rem));
  max-width: 1480px;
  max-height: none;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 14px;
  background: var(--bg-base, #f4f6f5);
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.32);
  overflow-x: hidden;
  overflow-y: visible;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-layout {
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-card {
  padding-left: 28px;
  padding-right: 28px;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-card {
  padding-left: 22px;
  padding-right: 22px;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-form-close {
  top: 2px;
  right: 2px;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-sticky-head__inner {
  padding-right: 3.4rem;
}

/* Compact desktop modal for запуск ATI из списка договоров. */
.contracts-view--shipment-modal {
  padding: 20px 28px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: shipment-modal-fade-in 0.14s ease-out;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-shell {
  display: flex;
  flex-direction: column;
  width: min(1040px, calc(100vw - 56px));
  max-width: 1040px;
  height: auto;
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 18px;
  background: #f8faf9;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: shipment-modal-pop-in 0.16s ease-out;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-sticky-top {
  position: sticky;
  top: 0;
  z-index: 12;
  flex: 0 0 auto;
  background: #f8faf9;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.1);
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-sticky-head {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  padding: 10px 22px 4px;
  border-bottom: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-sticky-head__inner {
  position: relative;
  display: block;
  max-width: none;
  min-height: 0;
  padding: 0 36px 0 0;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-sticky-head__toolbar {
  display: none;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-toolbar__left {
  position: static;
  gap: 8px;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-page__header {
  width: min(620px, 100%);
  margin: 0;
  align-items: flex-start;
  text-align: left;
  gap: 3px;
  min-width: 0;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-page__title {
  margin: 0;
  color: #13231a;
  font-size: 0.92rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-contracts-strip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  border-bottom: none;
  background: transparent;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-contracts-strip[hidden] {
  display: none !important;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  align-items: center;
  gap: 16px;
  padding: 0 22px 10px;
  box-sizing: border-box;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-top-actions .ati-form-sticky-head__toolbar {
  width: auto;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-contracts-strip .documents-btn {
  align-self: flex-start;
  width: auto;
  max-width: 100%;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-contract-ref-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 2px 0;
  overflow-x: hidden;
  overflow-y: visible;
  text-align: left;
  -webkit-overflow-scrolling: touch;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-contract-ref-item {
  flex: 0 0 auto;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-contract-ref-item__num {
  margin: 0 0 0.18rem;
  color: rgba(15, 23, 42, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-contract-ref-item__comment {
  margin: 0;
  color: rgba(15, 23, 42, 0.72);
  font-size: 0.74rem;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-contract-ref-item__comment-label {
  font-weight: 600;
  color: rgba(15, 23, 42, 0.58);
}

.contracts-view--ati-form .shipment-form-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 999px;
  background: rgba(254, 242, 242, 0.72);
  color: #dc2626;
  line-height: 0;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(127, 29, 29, 0.08);
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.14s ease;
}

.contracts-view--ati-form .shipment-form-close__icon {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  pointer-events: none;
}

.contracts-view--ati-form .shipment-form-close:hover {
  border-color: rgba(220, 38, 38, 0.45);
  background: #fee2e2;
  color: #b91c1c;
  box-shadow: 0 5px 14px rgba(220, 38, 38, 0.18);
  transform: translateY(-1px);
}

.contracts-view--ati-form .shipment-form-close:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.16);
}

.contracts-view--ati-form.contracts-view--shipment-modal .documents-btn {
  min-height: 30px;
  padding: 0.36rem 0.6rem;
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.1;
  transition:
    border-color 0.14s ease,
    background 0.14s ease,
    box-shadow 0.14s ease;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-save-note {
  min-height: 30px;
  padding: 0.25rem 0.5rem;
  font-size: 0.74rem;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
  flex: 0 0 auto;
  padding: 12px 22px 16px;
  overflow: visible;
  background: #f8faf9;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-layout__main {
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow: visible;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-card {
  margin-bottom: 0;
  padding: 10px 12px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-card:hover {
  border-color: rgba(74, 143, 111, 0.18);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045);
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-card__head--route,
.contracts-view--ati-form.contracts-view--shipment-modal .shipment-card__head--when,
.contracts-view--ati-form.contracts-view--shipment-modal .shipment-cargo-card__head,
.contracts-view--ati-form.contracts-view--shipment-modal .shipment-truck-card__head,
.contracts-view--ati-form.contracts-view--shipment-modal .shipment-pay-card__head,
.contracts-view--ati-form.contracts-view--shipment-modal .shipment-ati-contacts-card__head {
  margin-bottom: 6px;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-card__title {
  gap: 7px;
  margin: 0;
  color: #17241d;
  font-size: 0.86rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-card__title::before {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  border-color: rgba(74, 143, 111, 0.14);
  background-color: rgba(74, 143, 111, 0.07);
  background-size: 13px 13px;
  opacity: 0.86;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-card__title::after {
  content: "";
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-grid {
  gap: 7px 9px;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-route-flow {
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 8px;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-route-flow__arrow {
  width: 24px;
  height: 24px;
  margin-top: 18px;
  border-radius: 999px;
  background: rgba(74, 143, 111, 0.07);
  color: rgba(45, 104, 76, 0.72);
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-field,
.contracts-view--ati-form.contracts-view--shipment-modal .shipment-when-saas__item {
  gap: 3px;
  color: rgba(15, 23, 42, 0.58);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.2;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-when-saas__row {
  gap: 7px;
}

.contracts-view--ati-form.contracts-view--shipment-modal input.documents-input:not([type="checkbox"]):not([type="radio"]),
.contracts-view--ati-form.contracts-view--shipment-modal select.documents-input,
.contracts-view--ati-form.contracts-view--shipment-modal .documents-select {
  min-height: 32px;
  max-height: 36px;
  padding: 0.38rem 0.55rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.025) inset;
  color: #15231b;
  font-size: 0.78rem;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease;
}

.contracts-view--ati-form.contracts-view--shipment-modal textarea.documents-input,
.contracts-view--ati-form.contracts-view--shipment-modal textarea.shipment-textarea,
.contracts-view--ati-form.contracts-view--shipment-modal .shipment-unloading-addr {
  min-height: 42px;
  max-height: none;
  padding: 0.42rem 0.55rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.025) inset;
  color: #15231b;
  font-size: 0.78rem;
  line-height: 1.25;
}

.contracts-view--ati-form.contracts-view--shipment-modal input.documents-input:hover,
.contracts-view--ati-form.contracts-view--shipment-modal select.documents-input:hover,
.contracts-view--ati-form.contracts-view--shipment-modal textarea.documents-input:hover {
  border-color: rgba(74, 143, 111, 0.26);
}

.contracts-view--ati-form.contracts-view--shipment-modal input.documents-input:focus,
.contracts-view--ati-form.contracts-view--shipment-modal select.documents-input:focus,
.contracts-view--ati-form.contracts-view--shipment-modal textarea.documents-input:focus {
  border-color: rgba(74, 143, 111, 0.5);
  box-shadow: 0 0 0 3px rgba(74, 143, 111, 0.11);
  outline: none;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-cargo-ati-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0 0 6px;
  padding: 6px 8px;
  border: 1px solid rgba(74, 143, 111, 0.1);
  border-radius: 12px;
  background: rgba(74, 143, 111, 0.04);
  color: rgba(15, 23, 42, 0.72);
  font-size: 0.72rem;
  line-height: 1.24;
  overflow: hidden;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-cargo-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-cargo-quick .shipment-field {
  padding: 7px;
  border: 1px solid rgba(15, 23, 42, 0.075);
  border-radius: 10px;
  background: #fbfdfc;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-cargo-quick .documents-input {
  margin-top: 1px;
  font-size: 0.8rem;
  font-weight: 650;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-comment-card__textarea {
  min-height: 42px;
  max-height: none;
  overflow-y: hidden;
  resize: none;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-cargo-card__toggle.documents-btn,
.contracts-view--ati-form.contracts-view--shipment-modal .shipment-truck-card__toggle.documents-btn,
.contracts-view--ati-form.contracts-view--shipment-modal .shipment-pay-card__toggle.documents-btn,
.contracts-view--ati-form.contracts-view--shipment-modal .shipment-ati-contacts-card__toggle.documents-btn {
  min-height: 28px;
  padding: 0.32rem 0.56rem;
  border-radius: 999px;
  font-size: 0.72rem;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-layout__aside {
  position: static;
  width: 260px;
  min-width: 0;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 13px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.055);
}

.contracts-view--ati-form .ati-form-layout__aside .shipment-card--aside {
  width: 100%;
  margin: 0;
  padding: 0.65rem;
  box-sizing: border-box;
  border-radius: 12px;
}

.contracts-view--ati-form .ati-form-layout__aside .shipment-card--aside .shipment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
}

.contracts-view--ati-form .ati-form-layout__aside .shipment-card--aside .shipment-card__title {
  font-size: 0.82rem;
}

.contracts-view--ati-form .ati-form-layout__aside .shipment-card--aside .shipment-field {
  font-size: 0.72rem;
}

.contracts-view--ati-form .ati-form-layout__aside .shipment-card--aside input.documents-input:not([type="checkbox"]):not([type="radio"]),
.contracts-view--ati-form .ati-form-layout__aside .shipment-card--aside select.documents-input {
  min-height: 32px;
}

.contracts-view--ati-form .ati-form-layout__aside .shipment-card--aside textarea.documents-input {
  min-height: 46px;
}

.contracts-view--ati-form .ati-form-layout__aside .shipment-comment-card__textarea {
  min-height: 56px;
  max-height: none;
  overflow-y: hidden;
  resize: none;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-card {
  display: none;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-card__title {
  margin-bottom: 4px;
  color: rgba(15, 23, 42, 0.86);
  font-size: 0.74rem;
  font-weight: 700;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-card__head {
  margin-bottom: 0.25rem;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-card__refresh {
  min-height: 28px;
  padding: 0.3rem 0.48rem;
  font-size: 0.7rem;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-dl dt {
  padding: 5px 0 1px;
  border-top-color: rgba(15, 23, 42, 0.055);
  color: rgba(100, 116, 139, 0.72);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-dd {
  padding-bottom: 1px;
  color: rgba(15, 23, 42, 0.76);
  font-size: 0.7rem;
  line-height: 1.2;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-dd--lead {
  color: #13231a;
  font-size: 0.82rem;
  font-weight: 730;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-ati-checklist {
  margin: 0;
  font-size: 0.7rem;
  line-height: 1.2;
}

.contracts-view--ati-form.contracts-view--shipment-modal #shipment-ati-publish.ati-summary-publish-action {
  position: static;
  min-height: 38px;
  margin-top: 0;
  border-radius: 10px;
  background: #3f8f68 !important;
  box-shadow: 0 10px 22px rgba(47, 115, 85, 0.2);
  font-size: 0.78rem;
  font-weight: 760;
}

.contracts-view--ati-form.contracts-view--shipment-modal #shipment-ati-publish.ati-summary-publish-action:not(:disabled):hover {
  background: #34785a !important;
  box-shadow: 0 12px 26px rgba(47, 115, 85, 0.25);
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-post-publish-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  margin-top: 7px;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-post-publish-actions .documents-btn {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 720;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-delivery-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-delivery-actions .documents-btn {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 720;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-summary-delivery-actions .documents-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@keyframes shipment-modal-fade-in {
  from {
    background: rgba(15, 23, 42, 0);
  }
  to {
    background: rgba(15, 23, 42, 0.45);
  }
}

@keyframes shipment-modal-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 1080px) {
  .contracts-view--ati-form.contracts-view--shipment-modal .ati-form-layout {
    grid-template-columns: 1fr;
  }

  .contracts-view--ati-form.contracts-view--shipment-modal .ati-form-layout__aside {
    width: auto;
  }

  .contracts-view--ati-form.contracts-view--shipment-modal .ati-form-top-row,
  .contracts-view--ati-form .ati-form-top-row {
    grid-template-columns: 1fr;
  }

  .contracts-view--ati-form.contracts-view--shipment-modal .ati-form-top-actions,
  .contracts-view--ati-form .ati-form-top-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .contracts-view--shipment-modal {
    padding: 16px;
  }

  .contracts-view--ati-form.contracts-view--shipment-modal .ati-form-shell {
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
  }

  .contracts-view--ati-form.contracts-view--shipment-modal .ati-form-page__header {
    text-align: left;
    align-items: flex-start;
  }

  .contracts-view--ati-form.contracts-view--shipment-modal .shipment-cargo-quick,
  .contracts-view--ati-form.contracts-view--shipment-modal .shipment-route-flow {
    grid-template-columns: 1fr;
  }
}

.contracts-view--ati-form .ati-form-shell {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  overflow-x: hidden;
}

.contracts-view--ati-form .ati-form-sticky-top {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 -1rem 1rem;
  background: var(--bg-base, #f4f6f5);
  border-bottom: 1px solid rgba(74, 143, 111, 0.14);
}

.contracts-view--ati-form .ati-form-sticky-head {
  position: relative;
  margin: 0;
  padding: 0.35rem 1rem 0.25rem;
  background: transparent;
  border-bottom: none;
}

.contracts-view--ati-form .ati-form-sticky-head__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  max-width: 1180px;
  margin: 0 auto;
  min-height: 2.7rem;
  padding: 0 2.4rem 0 0;
}

.contracts-view--ati-form .ati-form-sticky-head__toolbar {
  width: 100%;
  margin-bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.75rem;
}

.contracts-view--ati-form .shipment-toolbar__left,
.contracts-view--ati-form .shipment-toolbar__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contracts-view--ati-form .shipment-save-note {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(74, 143, 111, 0.12);
  color: #2f6b4e;
  font-size: 0.82rem;
  font-weight: 650;
  white-space: nowrap;
}

.contracts-view--ati-form .shipment-save-note[hidden] {
  display: none !important;
}

.contracts-view--ati-form .shipment-toolbar__left {
  position: static;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 23rem;
}

.contracts-view--ati-form .shipment-toolbar__left .documents-btn {
  min-height: 2rem;
  padding: 0.42rem 0.62rem;
  border-radius: 9px;
  font-size: 0.78rem;
  line-height: 1.05;
  white-space: nowrap;
}

.contracts-view--ati-form .ati-form-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  align-items: center;
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1rem 0.85rem;
  box-sizing: border-box;
}

.contracts-view--ati-form .ati-form-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  min-width: 0;
}

.contracts-view--ati-form .ati-form-top-actions .ati-form-sticky-head__toolbar {
  width: auto;
}

.contracts-view--ati-form .shipment-toolbar__right {
  position: absolute;
  top: 0;
  right: 3rem;
}

#shipment-ati-publish {
  min-height: 3.25rem;
  width: 100%;
  padding: 0.82rem 1.15rem;
  border-color: rgba(74, 143, 111, 0.38);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 1rem;
  font-weight: 750;
  box-shadow: 0 8px 18px rgba(74, 143, 111, 0.24);
}

#shipment-ati-publish:not(:disabled):hover {
  background: var(--accent-strong);
  border-color: rgba(74, 143, 111, 0.55);
  color: var(--text-on-accent);
}

.contracts-view--ati-form .ati-form-page__header {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
  align-items: flex-start;
  text-align: left;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-sticky-head__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-sticky-head__toolbar {
  display: flex;
  width: 100%;
  margin-bottom: 0;
  justify-content: flex-start;
}

.contracts-view--ati-form.contracts-view--shipment-modal .ati-form-page__header {
  width: 100%;
  margin: 0;
  align-items: flex-start;
  text-align: left;
}

.contracts-view--ati-form .shipment-contract-ref,
.contracts-view--ati-form .shipment-contract-ref-list {
  margin: 0;
}

.ati-form-contracts-strip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0;
  border-bottom: none;
  background: transparent;
}

.ati-form-contracts-strip[hidden] {
  display: none !important;
}

.ati-form-contracts-strip .documents-btn {
  align-self: flex-start;
  width: auto;
  max-width: max-content;
}

#shipment-ati-view-contract {
  align-self: center;
}

.contracts-view--ati-form .shipment-contract-ref-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
  max-height: min(36vh, 280px);
  overflow-y: auto;
  text-align: left;
  -webkit-overflow-scrolling: touch;
}

.contracts-view--ati-form .shipment-contract-ref-item {
  flex: 0 0 auto;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.contracts-view--ati-form .shipment-contract-ref-item__num {
  margin: 0 0 0.3rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.3;
}

.contracts-view--ati-form .shipment-contract-ref-item__comment {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-secondary);
  white-space: normal;
  word-break: break-word;
}

.contracts-view--ati-form .shipment-contract-ref-item__comment-label {
  font-weight: 600;
}

.activity-logs-table__row--signed-check td {
  background: rgba(254, 226, 226, 0.55);
}

.activity-logs-table__row--signed-check .activity-logs-table__action {
  color: #b91c1c;
}

.activity-logs-table__time {
  white-space: nowrap;
  color: var(--text-muted, #64748b);
}

.activity-logs-table__user {
  font-weight: 700;
}

.activity-logs-table__details {
  white-space: pre-line;
}

.activity-logs-table__phone,
.activity-logs-table__payload {
  display: block;
  margin-top: 0.2rem;
  color: var(--text-muted, #64748b);
  font-size: 0.78rem;
}

.activity-logs-table__action {
  font-weight: 700;
}

.marketplace-analytics-head .crm-panel__title {
  color: inherit;
}

.marketplace-analytics-head .crm-panel__lead {
  max-width: 48rem;
  margin-bottom: 0;
  color: rgba(226, 232, 240, 0.84);
}

.marketplace-analytics-badge {
  flex: 0 0 auto;
  padding: 0.34rem 0.75rem;
  border: 1px solid rgba(226, 232, 240, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(248, 250, 252, 0.92);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}





.finance-head .crm-panel__title {
  color: inherit;
  font-size: clamp(1.35rem, 1.9vw, 2rem);
  font-weight: 800;
}

.finance-head .crm-panel__lead {
  max-width: 42rem;
  margin-bottom: 0;
  color: rgba(226, 232, 240, 0.82);
}

.finance-actions .documents-btn {
  min-height: 2.45rem;
  border: 0;
  background: #f8fafc;
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
}

.finance-field .documents-input {
  min-height: 2.45rem;
  border-color: rgba(148, 163, 184, 0.34);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.finance-field input[type="number"].documents-input {
  padding-right: 2.1rem;
}

.finance-field--auto .documents-input {
  border-color: rgba(14, 165, 233, 0.34);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(255, 255, 255, 0.94));
  color: #075985;
  font-weight: 800;
}

.finance-field .documents-input:focus {
  border-color: rgba(20, 184, 166, 0.72);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.14);
}



@media (max-width: 760px) {

  .finance-actions,
  .finance-actions .finance-field,
  .finance-actions .documents-btn,
  .finance-save-row .documents-btn {
    width: 100%;
  }
}

.contracts-view--ati-form .ati-form-layout__main {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.contracts-view--ati-form .shipment-card {
  margin-bottom: 0;
  border-radius: 12px;
  padding: 17px 18px 18px;
  border: 1px solid rgba(74, 143, 111, 0.2);
  box-shadow:
    0 1px 0 rgba(74, 143, 111, 0.08),
    0 6px 16px rgba(15, 23, 42, 0.035);
  background: #ffffff;
}

.contracts-view--ati-form .shipment-card:hover {
  border-color: rgba(74, 143, 111, 0.34);
}

.contracts-view--ati-form .ati-summary-card {
  margin-bottom: 0;
  border-radius: 12px;
  padding: 16px;
  background: #f9fbfa;
  border: 1px solid #e6f0ec;
  box-shadow: none;
}

.contracts-view--ati-form .ati-summary-card__title {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-strong);
}

.contracts-view--ati-form .ati-summary-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.contracts-view--ati-form .ati-summary-card__head .ati-summary-card__title {
  margin-bottom: 0;
}

.contracts-view--ati-form .ati-summary-card__refresh {
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
}

.contracts-view--ati-form .ati-summary-card--publish-check .shipment-ati-checklist {
  padding-left: 1rem;
}

.contracts-view--ati-form .ati-summary-dl {
  gap: 0;
  font-size: 0.8rem;
}

.contracts-view--ati-form .ati-summary-dl dt {
  padding: 10px 0 2px;
  border-top: 1px solid #e6f0ec;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(15, 23, 42, 0.42);
}

.contracts-view--ati-form .ati-summary-dl dt:first-of-type {
  border-top: none;
  padding-top: 0;
}

.contracts-view--ati-form .ati-summary-dd {
  margin: 0;
  padding: 0 0 4px;
  line-height: 1.35;
  word-break: break-word;
}

.contracts-view--ati-form .ati-summary-dd--lead {
  font-size: 1.08rem;
  font-weight: 650;
  color: var(--text-strong);
  padding-bottom: 8px;
}

.contracts-view--ati-form .ati-summary-dd--muted {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.contracts-view--ati-form .shipment-route-flow {
  display: grid;
  grid-template-columns: minmax(18rem, 1.25fr) auto minmax(18rem, 1fr);
  gap: 12px 10px;
  align-items: start;
}

.contracts-view--ati-form .shipment-route-flow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(74, 143, 111, 0.72);
  margin-top: 1.75rem;
}

/* Полный текст адреса погрузки: native select обрезает длинную подпись в закрытом состоянии. */
.shipment-loading-warehouse-readout {
  display: block;
  margin: 0.4rem 0 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-main);
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.shipment-loading-warehouse-readout[hidden] {
  display: none !important;
}

.contracts-view--ati-form.contracts-view--shipment-modal .shipment-loading-warehouse-readout {
  margin-top: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(15, 23, 42, 0.075);
  border-radius: 10px;
  background: rgba(74, 143, 111, 0.045);
  color: rgba(15, 23, 42, 0.72);
  font-size: 0.74rem;
  line-height: 1.28;
}

@keyframes brik-field-attention-pulse {
  0%,
  100% {
    border-color: rgba(220, 38, 38, 0.78) !important;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.18);
  }
  50% {
    border-color: rgba(185, 28, 28, 1) !important;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.28);
  }
}

@keyframes brik-card-attention-pulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.38);
  }
  50% {
    box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.88);
  }
}

#contracts-view-shipment .brik-field-attention textarea.documents-input,
#contracts-view-shipment .brik-field-attention select.documents-input,
#contracts-view-shipment .brik-field-attention input.documents-input:not([type="checkbox"]):not([type="radio"]) {
  animation: brik-field-attention-pulse 1.2s ease-in-out infinite;
}

#contracts-view-shipment .brik-field-attention-card {
  animation: brik-card-attention-pulse 1.35s ease-in-out infinite;
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px rgba(220, 38, 38, 0.45);
}

.contracts-view--ati-form .shipment-card__head--route,
.contracts-view--ati-form .shipment-card__head--when {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.contracts-view--ati-form .shipment-card__head--route .shipment-card__title,
.contracts-view--ati-form .shipment-card__head--when .shipment-card__title {
  margin-bottom: 0;
}

.contracts-view--ati-form .shipment-grid {
  gap: 10px 12px;
}

.contracts-view--ati-form .shipment-cargo-quick {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0.35rem;
}

.contracts-view--ati-form input.documents-input:not([type="checkbox"]):not([type="radio"]),
.contracts-view--ati-form select.documents-input,
.contracts-view--ati-form .documents-select {
  min-height: 36px;
  max-height: 40px;
  box-sizing: border-box;
}

.contracts-view--ati-form textarea.documents-input,
.contracts-view--ati-form textarea.shipment-textarea,
.contracts-view--ati-form .shipment-unloading-addr {
  min-height: 2.6rem;
  max-height: 5.25rem;
  resize: vertical;
  box-sizing: border-box;
}

.contracts-view--ati-form .shipment-unloading-addr {
  max-height: none;
  overflow-y: hidden;
  resize: none;
}

#shipment-loading-order-row[hidden],
#dr-loading-order-row[hidden] {
  display: none !important;
}

.contracts-view--ati-form .shipment-cargo-card__toggle.documents-btn,
.contracts-view--ati-form .shipment-truck-card__toggle.documents-btn,
.contracts-view--ati-form .shipment-pay-card__toggle.documents-btn,
.contracts-view--ati-form .shipment-ati-contacts-card__toggle.documents-btn {
  background: transparent;
  border-color: transparent;
  color: var(--accent);
  border-radius: 8px;
  font-weight: 500;
  box-shadow: none;
}

.contracts-view--ati-form .shipment-cargo-card__toggle.documents-btn:hover,
.contracts-view--ati-form .shipment-truck-card__toggle.documents-btn:hover,
.contracts-view--ati-form .shipment-pay-card__toggle.documents-btn:hover,
.contracts-view--ati-form .shipment-ati-contacts-card__toggle.documents-btn:hover {
  background: rgba(74, 143, 111, 0.08);
  border-color: rgba(74, 143, 111, 0.12);
}

@media (max-width: 900px) {
  .contracts-view--ati-form .shipment-route-flow {
    grid-template-columns: 1fr;
  }

  .contracts-view--ati-form .shipment-route-flow__arrow {
    margin: 0;
    transform: rotate(90deg);
  }
}

@media (max-width: 720px) {
  .contracts-view--ati-form .shipment-cargo-quick {
    grid-template-columns: 1fr;
  }
}

.contracts-view--ati-form .shipment-table-wrap {
  border-color: var(--shipment-card-border);
  background: #ffffff;
}

.contracts-view--ati-form .shipment-table th {
  background: rgba(15, 23, 42, 0.03);
}

.contracts-view--ati-form input.documents-input,
.contracts-view--ati-form select.documents-input,
.contracts-view--ati-form textarea.documents-input,
.contracts-view--ati-form .documents-select,
.contracts-view--ati-form .documents-textarea {
  background: var(--shipment-input-bg);
  border-color: var(--shipment-input-border);
}

.contracts-view--ati-form input.documents-input:hover,
.contracts-view--ati-form select.documents-input:hover,
.contracts-view--ati-form textarea.documents-input:hover,
.contracts-view--ati-form .documents-select:hover,
.contracts-view--ati-form .documents-textarea:hover {
  border-color: var(--shipment-input-border-hover);
}

.contracts-view--ati-form input.documents-input[readonly],
.contracts-view--ati-form textarea.documents-input[readonly] {
  background: rgba(15, 23, 42, 0.02);
}

/* Пилюли-кнопки как на макете (Заполнить/Очистить/Развернуть). */
.contracts-view--ati-form .ati-form-page__actions .documents-btn--secondary {
  background: var(--shipment-pill-bg);
  border-color: var(--shipment-pill-border);
  color: var(--accent);
  border-radius: 999px;
}

.contracts-view--ati-form .ati-form-page__actions .documents-btn--secondary:hover {
  border-color: rgba(74, 143, 111, 0.32);
  background: rgba(74, 143, 111, 0.14);
}

/* Кружки-иконки слева у заголовков карточек (как на макете). */
.contracts-view--ati-form .shipment-card__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.contracts-view--ati-form .shipment-card__title::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 999px;
  flex: 0 0 22px;
  background: rgba(74, 143, 111, 0.12);
  border: 1px solid rgba(74, 143, 111, 0.18);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

/* Иконки (inline SVG via data URI). */
.contracts-view--ati-form #shipment-block-route::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a8f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7a2 2 0 1 0 0.001 0Z'/%3E%3Cpath d='M18 17a2 2 0 1 0 0.001 0Z'/%3E%3Cpath d='M7.8 7.6 16.2 16.4'/%3E%3Cpath d='M13 7h5v5'/%3E%3C/svg%3E");
}

.contracts-view--ati-form #shipment-block-dates::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a8f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3Cpath d='M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01'/%3E%3C/svg%3E");
}

.contracts-view--ati-form #shipment-block-cargo::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a8f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z'/%3E%3Cpath d='M3.3 7.3 12 12l8.7-4.7'/%3E%3Cpath d='M12 22V12'/%3E%3C/svg%3E");
}

.contracts-view--ati-form #shipment-block-truck::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a8f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17h4V6H3v11h2'/%3E%3Cpath d='M14 9h4l3 3v5h-2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
}

.contracts-view--ati-form #shipment-block-pay::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a8f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1v22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7H15a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}

.contracts-view--ati-form #shipment-block-comment::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a8f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a4 4 0 0 1-4 4H8l-5 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/%3E%3Cpath d='M7 8h10M7 12h7'/%3E%3C/svg%3E");
}

.contracts-view--ati-form #shipment-block-ati-contacts::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a8f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-4.35-6-10a6 6 0 1 1 12 0c0 5.65-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2'/%3E%3C/svg%3E");
}

.contracts-view--ati-form #shipment-block-ati-toolbar::before,
.contracts-view--ati-form #shipment-block-b::before,
.contracts-view--ati-form #shipment-block-check::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a8f6f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3C/svg%3E");
}

.ati-form-page__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  text-align: center;
  margin-bottom: 1rem;
}

.ati-form-page__title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.ati-form-page__actions,
.ati-form-page__contract-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Выбор договора при нескольких привязках к перевозке ATI */
.shipment-contract-pick-modal {
  position: fixed;
  inset: 0;
  z-index: 2650;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.shipment-contract-pick-modal[hidden] {
  display: none !important;
}

.shipment-contract-pick-modal__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: var(--overlay-backdrop, rgba(15, 23, 42, 0.45));
  cursor: pointer;
}

.shipment-contract-pick-modal__panel {
  position: relative;
  z-index: 1;
  width: min(26rem, 100%);
  padding: 1rem 1.1rem 1.05rem;
  background: var(--bg-panel, #fff);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.shipment-contract-pick-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.shipment-contract-pick-modal__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 650;
}

.shipment-contract-pick-modal__close {
  border: none;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
}

.shipment-contract-pick-modal__hint {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.shipment-contract-pick-modal__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--text-secondary);
}

.shipment-contract-pick-modal__select {
  width: 100%;
  max-width: none;
  margin-bottom: 0.85rem;
}

.shipment-contract-pick-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.ati-form-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .ati-form-layout {
    grid-template-columns: minmax(0, 7fr) minmax(240px, 3fr);
    align-items: start;
    gap: 1.5rem;
  }
}

.ati-form-layout__main {
  min-width: 0;
}

.ati-form-layout__aside {
  position: sticky;
  top: 20px;
}

.contracts-view--ati-form .ati-form-layout__aside {
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.contracts-view--ati-form .ati-summary-publish-action {
  margin-top: 0.15rem;
  justify-content: center;
  text-align: center;
}

.contracts-view--ati-form .ati-summary-post-publish-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.55rem;
}

.contracts-view--ati-form .ati-summary-post-publish-actions .documents-btn {
  width: 100%;
  justify-content: center;
}

.contracts-view--ati-form #shipment-ati-publish.ati-summary-publish-action,
.contracts-view--ati-form #shipment-ati-publish.ati-summary-publish-action:hover,
.contracts-view--ati-form #shipment-ati-publish.ati-summary-publish-action:active,
.contracts-view--ati-form #shipment-ati-publish.ati-summary-publish-action:focus,
.contracts-view--ati-form #shipment-ati-publish.ati-summary-publish-action:focus-visible,
.contracts-view--ati-form #shipment-ati-publish.ati-summary-publish-action:disabled {
  border-color: rgba(74, 143, 111, 0.42) !important;
  background: var(--accent) !important;
  color: var(--text-on-accent) !important;
  opacity: 1;
  -webkit-appearance: none;
  appearance: none;
}

.contracts-view--ati-form #shipment-ati-publish.ati-summary-publish-action:disabled {
  cursor: not-allowed;
}

.contracts-view--ati-form .ati-summary-lifecycle {
  align-self: center;
  margin: 0.45rem 0 0;
}

.ati-summary-card {
  border: 1px solid var(--documents-border, #d8dde6);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  background: var(--documents-panel-bg, #fff);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ati-summary-card__title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
}

.ati-summary-dl {
  margin: 0;
  display: grid;
  gap: 0.5rem 0.75rem;
  font-size: 0.88rem;
}

.ati-summary-dl dt {
  margin: 0;
  font-weight: 600;
  color: var(--documents-muted, #5c6370);
}

.ati-summary-dl dd {
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
}

.shipment-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.shipment-contract-ref {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  color: var(--text-secondary);
}

.shipment-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 2px var(--shadow-ambient);
}

.shipment-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.shipment-card__title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.02em;
}

.shipment-card__head .shipment-card__title {
  margin-bottom: 0;
}

.shipment-hint {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.shipment-hint code {
  font-size: 0.78rem;
}

.shipment-hint--warn {
  color: #92400e;
}

.shipment-subhead {
  margin: 0.75rem 0 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-strong);
}

.shipment-ro-dl {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: 0.35rem 1rem;
  margin: 0;
  font-size: 0.875rem;
}

.shipment-ro-dl dt {
  margin: 0;
  color: var(--text-secondary);
}

.shipment-ro-dl dd {
  margin: 0;
  color: var(--text-main);
}

.shipment-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.shipment-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.shipment-ati-checklist {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-main);
}

.shipment-ati-checklist__ok {
  color: var(--text-secondary);
}

.shipment-ati-checklist__bad {
  color: var(--danger-text);
  font-weight: 500;
}

#shipment-ati-publish.shipment-ati-publish--invalid {
  opacity: 0.55;
}

.shipment-publish-success {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.shipment-publish-success__title {
  margin: 0 0 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-strong);
}

.shipment-publish-success__pre {
  margin: 0.25rem 0 0;
  padding: 0.5rem;
  max-height: 10rem;
  overflow: auto;
  font-size: 0.75rem;
  line-height: 1.4;
  background: var(--bg-muted);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

.shipment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.65rem;
}

.shipment-kv {
  margin: 0.35rem 0;
  font-size: 0.875rem;
  color: var(--text-main);
}

.shipment-kv__k {
  color: var(--text-secondary);
  margin-right: 0.35rem;
}

.shipment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem;
}

@media (max-width: 720px) {
  .shipment-grid {
    grid-template-columns: 1fr;
  }
}

.shipment-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.shipment-field--wide {
  grid-column: 1 / -1;
}

/* Маршрут: полная ширина строки; select и textarea одной ширины внутри колонки */
section[aria-labelledby="shipment-block-route"] .shipment-field--wide select.documents-input,
section[aria-labelledby="shipment-block-route"] .shipment-field--wide textarea.shipment-unloading-addr {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

section[aria-labelledby="shipment-block-route"] #shipment-f-loading-warehouse {
  min-width: 0;
  text-overflow: clip;
}

/* —— «Когда»: компактный SaaS-ряд (верстка + стили, id полей без изменений) —— */
.shipment-when-card {
  padding: 16px 18px 14px;
}

.shipment-when-card > .shipment-card__title {
  margin: 0 0 0.35rem;
  letter-spacing: -0.02em;
}

.shipment-when-card__hint {
  margin: 0 0 10px;
  max-width: 42rem;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 400;
  color: var(--text-secondary);
  opacity: 0.6;
}

.shipment-when-saas {
  margin: 0;
  padding: 0;
}

.shipment-when-saas__row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  min-height: 0;
}

.shipment-when-saas__item {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

.shipment-when-saas__item--days {
  gap: 6px;
}

.shipment-when-saas__lbl {
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.shipment-when-saas__plus {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1;
  user-select: none;
  opacity: 0.85;
}

.shipment-when-saas__ctrl {
  box-sizing: border-box;
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 0.8125rem;
  line-height: 1.2;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-strong);
}

.shipment-when-saas select.shipment-when-saas__ctrl {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 26px;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1.5L6 6l5-4.5' stroke='%2394a3b8' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.shipment-when-saas__ctrl--status {
  width: 200px;
  max-width: 220px;
  min-width: 0;
}

.shipment-when-saas__ctrl--date {
  width: 150px;
  max-width: 160px;
}

.shipment-when-saas__ctrl--days {
  width: 72px;
  max-width: 80px;
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.shipment-when-saas__ctrl--days::-webkit-outer-spin-button,
.shipment-when-saas__ctrl--days::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.shipment-when-saas__archive {
  flex: 1 1 120px;
  margin: 0;
  min-width: 0;
  align-self: center;
  text-align: right;
  font-size: 0.7rem;
  line-height: 1.35;
  font-weight: 400;
  color: var(--text-secondary);
  opacity: 0.55;
}

@media (max-width: 720px) {
  .shipment-when-saas__archive {
    flex-basis: 100%;
    text-align: left;
  }
}

.shipment-when-saas .shipment-when-saas__ctrl:focus,
.shipment-when-saas .shipment-when-saas__ctrl:focus-visible {
  outline: none;
  border-color: rgba(100, 116, 139, 0.55);
  box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
}

.shipment-field--narrow {
  max-width: 10rem;
}

.shipment-field--when-plus {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
}

.shipment-field__when-plus-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

.shipment-field__when-plus-label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.shipment-field__inline-prefix {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 0.15rem;
  align-self: center;
}

.shipment-field__suffix {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.shipment-field__error {
  font-size: 0.78rem;
  color: var(--documents-danger, #b42318);
  margin-top: 0.2rem;
}

.shipment-cargo-card__head,
.shipment-truck-card__head,
.shipment-pay-card__head,
.shipment-ati-contacts-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin: 0 0 0.35rem;
}

.shipment-cargo-card__title,
.shipment-truck-card__title,
.shipment-pay-card__title,
.shipment-ati-contacts-card__title {
  margin: 0;
}

.shipment-cargo-card__toggle,
.shipment-truck-card__toggle,
.shipment-pay-card__toggle,
.shipment-ati-contacts-card__toggle {
  flex-shrink: 0;
}

.shipment-cargo-card .shipment-cargo-ati-line {
  margin: 0 0 0.45rem;
}

.shipment-cargo-card__body,
.shipment-truck-card__body,
.shipment-pay-card__body,
.shipment-ati-contacts-card__body {
  padding: 0;
}

.shipment-pay-card__stripe {
  margin: 0;
  padding: 0;
}

.shipment-comment-card__title {
  margin: 0 0 0.5rem;
}

.shipment-comment-card__textarea {
  width: 100%;
  box-sizing: border-box;
  display: block;
}

.shipment-cargo-ati-line {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-main);
}

.shipment-cargo-ati-lines-detail {
  margin: 0 0 0.65rem 1.1rem;
  padding: 0;
  list-style: disc;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.shipment-subhead--dim {
  margin: 0.25rem 0 0;
}

.shipment-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shipment-field.shipment-field--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.shipment-field__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--documents-muted, #5c6370);
}

.shipment-readonly-addr {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--documents-border, #d8dde6);
  border-radius: 6px;
  background: var(--documents-input-bg, #f7f8fa);
  font-size: 0.95rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

textarea.shipment-unloading-addr {
  width: 100%;
  box-sizing: border-box;
  min-height: 3.25rem;
}

textarea.shipment-unloading-addr--unresolved {
  border-color: #d97706;
  background: #fffbeb;
}

textarea.shipment-unloading-addr--unresolved:focus {
  border-color: #b45309;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}

.shipment-unloading-resolve-panel {
  grid-column: 1 / -1;
  margin-top: -0.15rem;
}

.shipment-unloading-resolve-panel .shipment-field.shipment-field--row {
  margin-bottom: 0.15rem;
}

.shipment-unloading-resolve-panel .shipment-field--row .documents-btn {
  flex: 0 0 auto;
  width: auto;
}

.shipment-unloading-resolve-ai {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.shipment-unloading-resolve-ai[hidden] {
  display: none !important;
}

.shipment-unloading-resolve-ai__icon {
  font-size: 0.95em;
  line-height: 1;
}

.shipment-unloading-resolve-ai.is-loading .shipment-unloading-resolve-ai__icon {
  display: none;
}

/* ATI отказался распознать адрес — подсказываем, что дальше жать AI. */
.shipment-unloading-resolve-ai.is-suggested,
button.shipment-unloading-stop__ai.is-suggested {
  border-color: var(--accent, #4a8f6f);
  color: var(--accent, #4a8f6f);
  font-weight: 600;
}

button.shipment-unloading-stop__ai {
  white-space: nowrap;
}

.shipment-unloading-resolve-ai__spinner {
  display: none;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: brik-btn-spin 0.7s linear infinite;
}

.shipment-unloading-resolve-ai.is-loading {
  cursor: wait;
}

.shipment-unloading-resolve-ai.is-loading .shipment-unloading-resolve-ai__spinner {
  display: inline-block;
}

.drivers-registry-table td.documents-contracts-table__addr {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Подсказка калькулятора в форме заявки без договора. */
.shipment-registry-price-hint {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

.shipment-registry-price-hint[hidden] {
  display: none !important;
}

.shipment-field--registry-area[hidden] {
  display: none !important;
}

/* ---------- Отложенная публикация на ATI ---------- */

.ati-schedule {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.ati-schedule[hidden] {
  display: none !important;
}

button.ati-schedule__open {
  width: 100%;
  justify-content: center;
}

.ati-schedule__line {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--documents-muted, #6b7280);
}

.ati-schedule__line--pending {
  color: #0b6b3f;
  font-weight: 600;
}

.ati-schedule__line--failed {
  color: #b42318;
}

.ati-schedule__panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem;
  border: 1px solid var(--border-color, #d7dee7);
  border-radius: 10px;
  background: var(--bg-muted, #f6f8fa);
}

.ati-schedule__panel[hidden] {
  display: none !important;
}

.ati-schedule__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--documents-muted, #6b7280);
}

input.ati-schedule__input {
  width: 100%;
  min-height: 2.3rem;
}

.ati-schedule__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ati-schedule__quick button {
  padding: 0.25rem 0.5rem;
  font-size: 0.78rem;
}

.ati-schedule__row {
  display: flex;
  gap: 0.4rem;
}

.ati-schedule__row button {
  flex: 1 1 0;
  justify-content: center;
}

.ati-schedule__error {
  margin: 0;
  font-size: 0.8rem;
  color: #b42318;
}

.ati-schedule__error[hidden] {
  display: none !important;
}

button.ati-schedule__cancel {
  align-self: flex-start;
  padding: 0.2rem 0.35rem;
  font-size: 0.78rem;
}

button.ati-schedule__cancel[hidden] {
  display: none !important;
}

button.shipment-unloading-settlement-map {
  white-space: nowrap;
}

.shipment-unloading-settlement-choices {
  grid-column: 1 / -1;
  margin-top: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(217, 119, 6, 0.35);
  border-radius: 10px;
  background: #fffbeb;
}

.shipment-unloading-settlement-choices__title {
  margin: 0 0 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #92400e;
}

.shipment-unloading-settlement-choices__list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

button.shipment-unloading-settlement-choice {
  width: 100%;
  text-align: left;
  white-space: normal;
  line-height: 1.35;
  justify-content: flex-start;
}

.shipment-hint--muted {
  color: var(--documents-muted, #6b7280);
  font-size: 0.82rem;
}

.shipment-unloading-status {
  margin: 0.25rem 0 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.shipment-textarea {
  min-height: 2.75rem;
  resize: vertical;
}

.shipment-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-placeholder);
}

.shipment-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.shipment-table th,
.shipment-table td {
  padding: 0.5rem 0.65rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.shipment-table th {
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-muted);
  white-space: nowrap;
}

.shipment-table tbody tr:last-child td {
  border-bottom: none;
}

.shipment-table .documents-btn {
  font-size: 0.75rem;
  padding: 0.28rem 0.55rem;
}

.shipment-preview-wrap {
  margin-top: 0.85rem;
  padding: 1rem;
  border: 1px dashed var(--border-color);
  border-radius: 8px;
  background: var(--bg-placeholder);
  max-height: 22rem;
  overflow: auto;
}

.shipment-supply-sheet {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 210mm;
  padding: 12mm;
  background: #fff;
  color: #111827;
  font-size: 11pt;
  line-height: 1.45;
  box-sizing: border-box;
}

.shipment-supply-sheet--pdf {
  left: 0;
  top: 0;
}

.shipment-supply-doc {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.shipment-supply-doc__title {
  margin: 0 0 0.35rem;
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
}

.shipment-supply-doc__meta {
  margin: 0 0 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #4b5563;
}

.shipment-supply-doc h2 {
  margin: 1rem 0 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.2rem;
}

.shipment-supply-doc p {
  margin: 0.35rem 0;
}

.shipment-supply-pre {
  margin: 0.35rem 0 0.5rem;
  padding: 0.5rem 0.65rem;
  background: #f9fafb;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.shipment-supply-sign {
  margin-top: 2rem;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e7eb;
  font-size: 0.85rem;
  color: #6b7280;
}

.shipment-lifecycle {
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  display: inline-block;
  letter-spacing: -0.01em;
}

.shipment-lifecycle--draft {
  background: var(--bg-muted);
  color: var(--text-secondary);
}

.shipment-lifecycle--ready {
  background: rgba(43, 149, 232, 0.12);
  color: var(--link-blue-600);
}

.shipment-lifecycle--published {
  background: rgba(46, 90, 62, 0.12);
  color: #2f6b4e;
}

.shipment-lifecycle--carrier {
  background: rgba(124, 58, 237, 0.1);
  color: #5b21b6;
}

.shipment-lifecycle--archived {
  background: rgba(107, 114, 128, 0.15);
  color: #4b5563;
}

.shipment-row--archive {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color);
}

.shipment-details-ati {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-color);
}

.shipment-details-ati__summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-strong);
  list-style: none;
}

.shipment-details-ati__summary::-webkit-details-marker {
  display: none;
}

.shipment-details-ati__summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--text-secondary);
}

.shipment-details-ati[open] .shipment-details-ati__summary::before {
  transform: rotate(90deg);
}

.shipment-grid--advanced {
  margin-top: 0.75rem;
}

.shipment-adv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-strong);
}

.shipment-adv-head__title {
  flex: 1 1 auto;
  min-width: 0;
}

.shipment-adv-head__flag {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.shipment-adv-check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  user-select: none;
}

.shipment-adv-check input {
  margin: 0;
  flex-shrink: 0;
}

.shipment-ati-fixed-mode {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.55rem 0.75rem 0.6rem;
  background: var(--bg-muted);
}

.shipment-ati-fixed-mode__k {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.shipment-ati-fixed-mode__val {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.35;
}

.shipment-ati-fixed-mode__hint {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-secondary);
}

.shipment-publish-blockers {
  margin: 0.35rem 0 0.65rem;
  padding-left: 1.2rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--danger-text);
}

.shipment-publish-warnings {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #92400e;
}

.shipment-cargo-math-hint {
  grid-column: 1 / -1;
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--danger-text);
}

.shipment-loading-custom {
  margin-top: 0.4rem;
}

input.documents-input[readonly],
textarea.documents-input[readonly] {
  background: var(--bg-muted);
  color: var(--text-secondary);
}

/* ——— Заявка на доставку ——— */
.contracts-view--delivery {
  position: fixed;
  inset: 0;
  z-index: 1350;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 24px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.45);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.delivery-request-toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0.65rem 3rem 0.65rem 0.8rem;
  box-sizing: border-box;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  background: #f8faf9;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.delivery-request-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.delivery-request-close {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dc2626;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease;
}

.delivery-request-close:hover {
  color: #b91c1c;
}

.delivery-request-saved {
  width: min(1180px, 100%);
  margin: 0 auto 0.5rem;
  font-size: 0.875rem;
  color: var(--accent, #2f6b4e);
}

#delivery-request-error.documents-error {
  width: min(1180px, 100%);
  margin: 0.5rem auto;
  box-sizing: border-box;
}

.delivery-request-doc {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0.65rem 0.75rem;
  max-height: none;
  padding: 0.85rem;
  box-sizing: border-box;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-top: none;
  border-radius: 0 0 18px 18px;
  background: #f8faf9;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
}

.delivery-request-doc__head {
  grid-column: 1 / -1;
  order: 0;
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(74, 143, 111, 0.34);
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(74, 143, 111, 0.06),
    0 4px 14px rgba(15, 23, 42, 0.045);
}

.delivery-request-doc__title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-strong);
}

.delivery-request-doc__meta {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.delivery-request-head-fields {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) minmax(8rem, 12rem);
  gap: 0.5rem 0.75rem;
  align-items: end;
  margin-top: 0.65rem;
}

.delivery-request-head-fields .documents-input {
  min-height: 34px;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.delivery-request-section {
  margin-top: 0;
  padding: 0.8rem 0.9rem 0.9rem;
  border: 1px solid rgba(74, 143, 111, 0.42);
  border-radius: 14px;
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(74, 143, 111, 0.08),
    0 6px 18px rgba(15, 23, 42, 0.055);
}

.delivery-request-section:hover {
  border-color: rgba(74, 143, 111, 0.58);
}

.delivery-request-section--cust {
  display: none;
}

.delivery-request-section--load,
.delivery-request-section--unload {
  align-self: stretch;
}

.delivery-request-section--load {
  order: 1;
}

.delivery-request-section--unload {
  order: 2;
}

.delivery-request-section--cargo {
  order: 3;
}

.delivery-request-section--pay {
  order: 4;
}

.delivery-request-section--driver {
  grid-column: 1 / -1;
  order: 5;
}

.delivery-request-section--wide {
  grid-column: 1 / -1;
}

.delivery-request-section__title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-strong);
}

.delivery-request-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.85rem;
}

.delivery-request-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.delivery-request-field__label {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.delivery-request-field--wide {
  grid-column: 1 / -1;
}

.delivery-request-field--hidden {
  display: none;
}

.delivery-request-section--driver .delivery-request-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.delivery-request-field--driver-name,
.delivery-request-field--driver-phone,
.delivery-request-field--driver-passport {
  grid-column: 1;
}

.delivery-request-field--driver-license {
  grid-column: 2;
  grid-row: 2;
}

.delivery-request-textarea {
  min-height: 3rem;
  resize: vertical;
}

.contracts-view--delivery .documents-input,
.contracts-view--delivery select.documents-input,
.contracts-view--delivery textarea.documents-input {
  border-color: rgba(74, 143, 111, 0.18);
  border-radius: 9px;
  background: #ffffff;
  color: var(--text-strong);
}

.contracts-view--delivery .documents-input:focus,
.contracts-view--delivery select.documents-input:focus,
.contracts-view--delivery textarea.documents-input:focus {
  border-color: rgba(74, 143, 111, 0.55);
  box-shadow: 0 0 0 3px rgba(74, 143, 111, 0.12);
  outline: none;
}

@media (max-width: 900px) {
  .delivery-request-doc,
  .delivery-request-grid {
    grid-template-columns: 1fr;
  }

  .delivery-request-head-fields {
    grid-template-columns: 1fr;
  }

  .delivery-request-section--wide,
  .delivery-request-field--wide {
    grid-column: 1 / -1;
  }
}

.delivery-request-sign-hint {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.delivery-request-docs-hint {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.delivery-request-file-input {
  font-size: 0.8125rem;
  max-width: 100%;
}

.delivery-request-docs-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.4rem 0 0.5rem;
}

.delivery-request-docs-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  background: var(--bg-muted);
  font-size: 0.8125rem;
}

.delivery-request-docs-item__name {
  flex: 1 1 8rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
}

.delivery-request-docs-item__meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.delivery-request-docs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.delivery-request-docs-status {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.delivery-request-paste-block {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-subtle, #e2e8f0);
}

.delivery-request-docs-actions--after-paste {
  margin-top: 0.35rem;
}

.documents-input--auto-filled {
  box-shadow: inset 3px 0 0 0 rgba(47, 107, 78, 0.55);
}

.documents-input--auto-low {
  box-shadow: inset 3px 0 0 0 rgba(196, 120, 0, 0.85);
  background: rgba(196, 120, 0, 0.06);
}

.dr-ocr-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.dr-ocr-modal[hidden] {
  display: none !important;
}

.dr-ocr-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.dr-ocr-modal__card {
  position: relative;
  z-index: 1;
  width: min(36rem, 100%);
  max-height: min(90vh, 40rem);
  overflow: auto;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.dr-ocr-modal__card h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.dr-ocr-modal__note {
  margin: 0 0 0.65rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.dr-ocr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.dr-ocr-table th,
.dr-ocr-table td {
  border-bottom: 1px solid var(--border-color);
  padding: 0.4rem 0.35rem;
  text-align: left;
  vertical-align: top;
}

.dr-ocr-table th:first-child,
.dr-ocr-table td:first-child {
  width: 2rem;
}

.dr-ocr-table input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

.dr-ocr-conf {
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.dr-ocr-conf--low {
  color: #b45309;
  font-weight: 600;
}

.dr-ocr-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
  margin-top: 0.75rem;
}

.contracts-ati-views-default-host {
  display: contents;
}

#section-drivers .crm-panel--documents.drivers-hub-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

body.contracts-editor-floating-preview-open #section-drivers .drivers-hub-form-layer:not([hidden]),
body.contracts-editor-floating-preview-open #section-drivers .drivers-hub-form-layer--contract-preview {
  background: transparent !important;
  pointer-events: auto;
}

.drivers-view-table-root .documents-contracts-table-host {
  flex: 0 1 auto;
  min-height: 0;
}

.drivers-hub-toolbar.documents-toolbar {
  margin-bottom: 0.2rem;
}

.drivers-archive-switch__btn.is-active {
  background: #4a8f6f;
  color: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}

/* Клик по фону вокруг таблицы не ставит карет как в поле ввода */
#section-drivers .drivers-view-table-root > .documents-toolbar,
#section-drivers .drivers-view-table-root > .documents-title,
#section-drivers .drivers-view-table-root > .crm-panel__lead,
#section-drivers .drivers-view-table-root > .drivers-hub-hint,
#section-drivers .drivers-view-table-root > .drivers-list-tools,
#section-drivers .drivers-view-table-root > .documents-empty {
  user-select: none;
}

#section-contracts #contracts-view-list > .contracts-controls,
#section-contracts #contracts-view-list > .documents-title,
#section-contracts #contracts-view-list > .documents-empty {
  user-select: none;
}

#drivers-unified-requests-list .documents-contracts-col--drivers-cargo {
  text-align: left;
  white-space: normal;
  max-width: min(28rem, 46vw);
  min-width: 10rem;
  line-height: 1.35;
  vertical-align: middle;
}

button.documents-contracts-delete-btn.drivers-unified-inline-delete--inactive:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
  color: var(--muted);
}

button.documents-contracts-delete-btn.drivers-unified-inline-delete--inactive:disabled:hover {
  color: var(--muted);
  background: transparent;
}

.drivers-detail-panel__surface.drivers-merge-modal__panel {
  width: 100%;
  max-width: none;
  max-height: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#section-drivers.crm-section--drivers-hub .drivers-view-table-root > .drivers-hub-toolbar.documents-toolbar {
  justify-content: center;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
}

#section-drivers.crm-section--drivers-hub .drivers-view-table-root > .documents-title,
#section-drivers.crm-section--drivers-hub .drivers-view-table-root > .crm-panel__lead,
#section-drivers.crm-section--drivers-hub .drivers-view-table-root > .drivers-hub-hint {
  text-align: center;
  max-width: 38rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#section-drivers.crm-section--drivers-hub .drivers-view-table-root > .documents-contracts-table-host,
#section-drivers.crm-section--drivers-hub .drivers-view-table-root > .documents-empty {
  width: 100%;
  max-width: min(76rem, 100%);
  margin-inline: auto;
}

.drivers-simple-delivery-panel .drivers-merge-modal__head {
  padding: 0.8rem var(--drivers-simple-delivery-pad-x);
}

.drivers-simple-delivery-panel .drivers-merge-modal__hint {
  padding: 0.55rem var(--drivers-simple-delivery-pad-x) 0;
}

.drivers-simple-delivery-panel .drivers-merge-list {
  flex: 0 0 auto;
  min-height: 4.5rem;
  max-height: 10rem;
  overflow-y: auto;
  padding-inline: var(--drivers-simple-delivery-pad-x);
}

.drivers-simple-delivery-panel .drivers-merge-modal__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex: 0 0 auto;
  flex-wrap: wrap;
  padding: 0.85rem var(--drivers-simple-delivery-pad-x);
}

#section-drivers.crm-section--drivers-hub .drivers-hub-root--detail-open #contracts-view-delivery.contracts-view--delivery {
  max-width: none;
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
}

#section-drivers.crm-section--drivers-hub
  .drivers-hub-root--detail-open
  #contracts-view-delivery.contracts-view--delivery
  .delivery-request-toolbar {
  position: sticky;
  top: 0;
  z-index: 120;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0.65rem 3rem 0.65rem 0.8rem;
}

#section-drivers.crm-section--drivers-hub .drivers-hub-root--detail-open #contracts-view-shipment.contracts-view--shipment {
  max-width: 100%;
  width: 100%;
  margin-inline: auto;
  padding-inline: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

#section-drivers.crm-section--drivers-hub .drivers-hub-root--detail-open #contracts-view-shipment.contracts-view--ati-form {
  max-width: 100%;
  width: 100%;
}

#section-drivers.crm-section--drivers-hub
  .drivers-hub-root--detail-open
  #contracts-view-shipment.contracts-view--ati-form
  .ati-form-shell {
  max-width: none;
}

#section-drivers.crm-section--drivers-hub
  .drivers-hub-root--detail-open
  #contracts-view-shipment.contracts-view--ati-form
  .ati-form-sticky-top,
#section-drivers.crm-section--drivers-hub
  .drivers-hub-root--detail-open
  #contracts-view-shipment.contracts-view--ati-form
  .ati-form-sticky-head {
  margin-left: 0;
  margin-right: 0;
}

#section-drivers.crm-section--drivers-hub .shipment-toolbar,
#section-drivers.crm-section--drivers-hub .delivery-request-toolbar {
  justify-content: center;
}

#section-drivers.crm-section--drivers-hub .ati-form-page__header {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#section-drivers.crm-section--drivers-hub .ati-form-page__actions {
  justify-content: center;
}

#section-drivers.crm-section--drivers-hub .ati-form-contracts-strip,
#section-drivers.crm-section--drivers-hub .shipment-contract-ref,
#section-drivers.crm-section--drivers-hub .shipment-contract-ref-list,
#section-drivers.crm-section--drivers-hub .shipment-lifecycle {
  text-align: center;
}

#section-drivers.crm-section--drivers-hub .shipment-contract-ref-list {
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

#section-drivers.crm-section--drivers-hub .shipment-contract-ref-item {
  text-align: left;
  max-width: min(660px, 100%);
  width: 100%;
}

#section-drivers.crm-section--drivers-hub .ati-form-contracts-strip .documents-btn {
  width: min(660px, 100%);
}

#section-drivers.crm-section--drivers-hub #contracts-shipment-error.documents-error {
  text-align: center;
}

#section-drivers.crm-section--drivers-hub #delivery-request-error.documents-error {
  text-align: center;
}

#section-drivers.crm-section--drivers-hub .delivery-request-saved {
  text-align: center;
}

#section-drivers.crm-section--drivers-hub .delivery-request-doc__head {
  text-align: center;
}

#section-drivers.crm-section--drivers-hub .drivers-merge-modal__actions {
  justify-content: center;
}



.drivers-merge-modal__panel {
  width: min(32rem, 100%);
  max-height: min(80vh, 36rem);
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border-radius: 10px;
  box-shadow: 0 12px 40px var(--shadow-ambient-lg);
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.drivers-merge-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-muted);
}

.drivers-merge-modal__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
}

.drivers-merge-modal__close {
  border: none;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-modify: read-only;
}

.drivers-merge-modal__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-main);
}

.drivers-merge-modal__hint {
  margin: 0;
  padding: 0.65rem 0.85rem 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.drivers-merge-search .documents-input {
  width: 100%;
}

.drivers-merge-list {
  flex: 1;
  overflow: auto;
  padding: 0.65rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.drivers-merge-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-muted);
}

.shipment-unloading-stops {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.6rem;
  border: 1px dashed var(--inv-border-mid, #c5cbc7);
  border-radius: 6px;
  background: #fafcfb;
}

.shipment-unloading-stops__lead {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.shipment-unloading-stops__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shipment-unloading-stop {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.35rem 0.25rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

.shipment-unloading-stop--primary {
  background: #f0f6fc;
  border-color: rgba(11, 74, 143, 0.2);
}

.shipment-unloading-stop__drag {
  flex-shrink: 0;
  width: 1.35rem;
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.2;
}

.shipment-unloading-stop__n {
  flex-shrink: 0;
  width: 1.5rem;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.shipment-unloading-stop__addr {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.35;
}

.shipment-unloading-stop__meta {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--text-secondary);
  max-width: 6.5rem;
  text-align: right;
}

.shipment-unloading-stop--over {
  outline: 2px solid #0b4a8f;
  outline-offset: -2px;
}

.shipment-unloading-stop--dragging {
  opacity: 0.55;
}

.shipment-unloading-stop--dragging > span:not(.shipment-unloading-stop__drag) {
  pointer-events: none;
}

body.shipment-stops--pointer-drag {
  cursor: grabbing !important;
}

/* =============================================================================
 * Мобильный PWA: нижняя навигация, safe-area, отступ под композер чата (≤960px)
 * ============================================================================= */

.mobile-tabbar {
  display: none;
}

@media (max-width: 960px) {
  :root {
    /* Высота нижней панели (без safe-area — env добавляется в padding отдельно). */
    --mobile-tabbar-stack: 3.35rem;
  }

  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    box-sizing: border-box;
    align-items: stretch;
    justify-content: center;
    padding: 0.28rem 0.2rem env(safe-area-inset-bottom, 0px);
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
  }

  .mobile-tabbar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    width: 100%;
    max-width: 28rem;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.12rem;
  }

  .mobile-tabbar__list > li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: center;
  }

  .mobile-tabbar__list > li[hidden] {
    display: none !important;
  }

  .mobile-tabbar__btn {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    min-width: 0;
    max-width: 5.5rem;
    margin: 0;
    padding: 0.35rem 0.2rem;
    border: none;
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-tabbar__btn:active {
    background: var(--bg-muted);
    color: var(--text-strong);
  }

  .mobile-tabbar__btn--active {
    color: var(--accent);
    background: var(--accent-soft);
  }

  .mobile-tabbar__ic {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  .mobile-tabbar__txt {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .crm-work {
    padding-bottom: calc(var(--mobile-tabbar-stack) + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
  }

  .chat-shell {
    max-height: calc(100dvh - var(--topbar-h) - var(--mobile-tabbar-stack) - 0.35rem);
    max-height: calc(100svh - var(--topbar-h) - var(--mobile-tabbar-stack) - 0.35rem);
  }

  .chat__composer-dock {
    padding-bottom: calc(
      var(--chat-composer-bottom-gap) + var(--mobile-tabbar-stack) + env(safe-area-inset-bottom, 0px)
    ) !important;
  }

  .messenger__center .chat .chat__composer-dock {
    padding-bottom: calc(0.55rem + var(--mobile-tabbar-stack) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .chat__bottom-switch > .chat__selection-dock {
    padding-bottom: calc(0.4rem + var(--mobile-tabbar-stack) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .messenger__center .chat .chat__bottom-switch > .chat__selection-dock {
    padding-bottom: calc(0.55rem + var(--mobile-tabbar-stack) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .chat__toast {
    top: calc(var(--tg-head-h) + 0.35rem + env(safe-area-inset-top, 0px));
    bottom: auto;
  }

  .topbar {
    padding-left: max(0.85rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.85rem, env(safe-area-inset-right, 0px));
    padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
  }

  .crm-panel--documents {
    overflow-x: hidden;
  }

  .documents-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #section-contracts #contracts-view-list > .documents-toolbar > .documents-toolbar__filters {
    margin-left: 0;
  }

  .documents-btn {
    min-height: 44px;
    padding-inline: 0.85rem;
  }

  .documents-input,
  .documents-select {
    min-height: 44px;
  }
}

@media (max-width: 430px) {
  body {
    font-size: 16px;
  }

  .topbar__brand {
    font-size: 1.05rem;
  }

  .topbar__brand-logo {
    height: 1.85rem;
    max-width: min(11rem, 46vw);
  }

  .topbar__cabinet-btn {
    width: 42px;
    height: 42px;
  }

  .crm-panel {
    padding: 0.85rem 0.75rem;
    border-radius: 12px;
  }
}

@media (display-mode: standalone) {
  .topbar {
    padding-top: max(0.55rem, env(safe-area-inset-top, 0px));
  }
}

/* Mobile/PWA overrides: keep desktop rules intact and tighten phone ergonomics. */
.push-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.55rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(47, 125, 92, 0.2);
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--text-strong);
  font-size: 0.88rem;
}

.push-banner[hidden] {
  display: none !important;
}

.push-banner__text {
  min-width: 0;
  line-height: 1.35;
}

.push-banner__btn {
  min-height: 44px;
  flex: 0 0 auto;
  border: none;
  border-radius: 12px;
  padding: 0 0.85rem;
  background: var(--accent);
  color: var(--text-on-accent);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.push-banner__btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.fixed-bottom,
.mobile-bottom-nav,
.chat-input-bar {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  input,
  select,
  textarea,
  button,
  [role="button"],
  .documents-btn,
  .documents-icon-btn,
  .clients-btn,
  .shipment-btn,
  .ati-btn {
    min-height: 44px;
  }

  input,
  select,
  textarea,
  .tg-composer-float__input {
    font-size: 16px;
  }

  .crm-section,
  .crm-panel,
  .documents-view,
  .clients-view,
  .drivers-hub,
  .shipment-board,
  .ati-board {
    max-width: 100%;
    min-width: 0;
  }

  .documents-contracts-table-host,
  .nomenclature-table-wrap,
  .stocks-table-wrap,
  .clients-table-wrap,
  .shipments-table-wrap,
  .ati-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .documents-contracts-table-host table,
  .nomenclature-table,
  .stocks-table,
  .clients-table,
  .shipments-table,
  .ati-table {
    min-width: 720px;
  }

  .delivery-calc-modal,
  .contracts-editor-modal,
  .forward-modal,
  .chat-edit-backdrop,
  .chat-delete-confirm,
  .shipment-contract-pick-modal {
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  }

  .delivery-calc-modal__panel,
  .contracts-editor-modal__panel,
  .forward-modal__panel,
  .chat-edit-modal,
  .chat-delete-confirm__panel,
  .shipment-contract-pick-modal__panel,
  .cabinet__drawer {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  .push-banner {
    margin-inline: 0.55rem;
  }
}

@media (max-width: 430px) {
  :root {
    --topbar-h: 56px;
    --team-sidebar-w: 100vw;
  }

  .topbar {
    min-height: var(--topbar-h);
  }

  .topbar__center {
    min-width: 0;
  }

  .app-shell {
    min-width: 0;
  }

  .chat-shell {
    padding-inline: 0;
    max-width: 100%;
    max-height: calc(var(--visual-viewport-height) - var(--topbar-h) - var(--mobile-tabbar-stack));
  }

  .push-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin: 0 0.5rem 0.5rem;
    font-size: 0.86rem;
  }

  .push-banner__btn {
    width: 100%;
  }

  .messenger {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .team-sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .team-sidebar__general,
  .team-member {
    min-height: 64px;
  }

  .messenger__center .chat {
    height: 100%;
    max-height: none;
  }

  .tg-head__title {
    font-size: 0.98rem;
  }

  .tg-head__subtitle,
  .team-sidebar__general-preview {
    font-size: 0.78rem;
  }

  .chat__scroll {
    overscroll-behavior: contain;
  }

  .chat__composer-row {
    gap: 0.4rem;
  }

  body:not(.chat-conversation-open) .messenger__center .chat .chat__composer-dock {
    transform: translateY(calc(-1 * var(--keyboard-inset)));
  }

  .tg-composer-float__emoji,
  .tg-composer-float__attach,
  .tg-composer-float__send,
  .chat__voice-btn,
  .chat__scroll-down,
  .tg-head__icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .mobile-tabbar {
    padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 390px) {
  .mobile-tabbar__txt {
    font-size: 0.62rem;
  }

  .mobile-tabbar__btn {
    padding-inline: 0.1rem;
  }

  .crm-panel {
    padding-inline: 0.65rem;
  }
}

@media (max-width: 360px) {
  .topbar__brand {
    font-size: 0.96rem;
  }

  .topbar__actions {
    gap: 0.25rem;
  }

  .topbar__cabinet-btn,
  .topbar__icon-btn {
    width: 40px;
    min-width: 40px;
  }

  .mobile-tabbar__ic svg {
    width: 20px;
    height: 20px;
  }
}

/* Mobile app mode: on phones the CRM is chat-only; desktop navigation remains unchanged. */
@media (max-width: 960px) {
  :root {
    --topbar-h: 0px;
    --mobile-tabbar-stack: 0px;
    --chat-composer-bottom-gap: 0.55rem;
    --chat-composer-float-lift: 0px;
  }

  html,
  body {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .topbar,
  .crm-nav,
  .crm-nav-backdrop,
  .mobile-tabbar {
    display: none !important;
  }

  .app-shell,
  .crm-work,
  #section-chat,
  #section-chat.crm-section--chat,
  .chat-shell,
  .chat-shell > .messenger,
  .messenger,
  .messenger__center,
  .messenger__center .chat {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
  }

  .app-shell {
    flex: 1 1 auto;
    height: 100dvh;
    height: var(--visual-viewport-height, 100dvh);
  }

  .crm-work {
    padding: 0 !important;
    background: var(--chat-canvas-mid);
    overflow: hidden;
  }

  /* Только десктопный app-shell на телефоне — не мобильный /mobile.html эмбед. */
  .app-shell .crm-section:not(#section-chat) {
    display: none !important;
  }

  html.m-app #m-embed-host .crm-section.crm-section--active:not([hidden]),
  html.m-embed-open #m-embed-host .crm-section.crm-section--active:not([hidden]) {
    display: flex !important;
    visibility: visible !important;
  }

  #section-chat,
  #section-chat.crm-section--active {
    display: flex !important;
    animation: none !important;
  }

  .chat-shell {
    max-width: none;
    max-height: none !important;
    margin: 0;
    padding: 0;
  }

  .messenger {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .messenger__backdrop {
    top: 0;
  }

  .team-sidebar {
    top: 0;
    bottom: 0;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .tg-head {
    padding-top: calc(0.42rem + env(safe-area-inset-top, 0px));
  }

  .chat__scroll {
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body:not(.chat-conversation-open) .chat__composer-dock,
  body:not(.chat-conversation-open) .messenger__center .chat .chat__composer-dock {
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateY(calc(-1 * var(--keyboard-inset))) !important;
  }

  .chat__bottom-switch > .chat__selection-dock,
  .messenger__center .chat .chat__bottom-switch > .chat__selection-dock {
    padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  .chat__toast {
    top: calc(var(--tg-head-h) + 0.35rem + env(safe-area-inset-top, 0px));
    bottom: auto;
  }

  /* Открытый диалог на телефоне/планшете: лента и композер на всю ширину экрана (как в Telegram). */
  body.chat-conversation-open .chat__list,
  body.chat-conversation-open .messenger__center .chat .chat__list {
    max-width: none;
    width: 100%;
    margin: 0;
  }

  body.chat-conversation-open .chat__pending,
  body.chat-conversation-open .messenger__center .chat .chat__pending {
    max-width: none;
    margin: 0;
    padding-left: max(0.45rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.45rem, env(safe-area-inset-right, 0px));
  }

  body.chat-conversation-open .chat__pinned-inner,
  body.chat-conversation-open .messenger__center .chat .chat__pinned-inner {
    max-width: none;
    margin: 0;
    padding-left: max(0.45rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.45rem, env(safe-area-inset-right, 0px));
  }

  body.chat-conversation-open .chat__upload-status__inner,
  body.chat-conversation-open .messenger__center .chat .chat__upload-status__inner {
    max-width: none;
    margin: 0;
  }

  body.chat-conversation-open .chat__composer-rail,
  body.chat-conversation-open .messenger__center .chat .chat__composer-rail {
    flex: 1 1 auto;
    max-width: none;
  }

  body.chat-conversation-open .chat__selection-rail,
  body.chat-conversation-open .messenger__center .chat .chat__selection-rail {
    max-width: none;
  }

  body.chat-conversation-open .chat__scroll-body,
  body.chat-conversation-open .messenger__center .chat .chat__scroll-body {
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  }
}

/* Mobile chat is a regular flex layout: header, scroll, composer. */
@media (max-width: 768px) {

  body.chat-conversation-open .mobile-tabbar {
    display: none;
  }

  body.chat-conversation-open .app-shell,
  body.chat-conversation-open .crm-work,
  body.chat-conversation-open #section-chat,
  body.chat-conversation-open .chat-shell,
  body.chat-conversation-open .messenger,
  body.chat-conversation-open .messenger__center {
    width: 100%;
    min-height: 0;
    height: var(--visual-viewport-height, 100dvh);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.chat-conversation-open .messenger__center .chat {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: var(--visual-viewport-height, 100dvh);
    min-height: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: #dff4d2;
    background-image:
      linear-gradient(135deg, rgba(239, 249, 211, 0.72), rgba(143, 219, 150, 0.48) 44%, rgba(53, 185, 147, 0.52)),
      var(--chat-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: soft-light, normal;
  }

  body.chat-conversation-open .chat::after,
  body.chat-conversation-open .chat__scroll-pattern,
  body.chat-conversation-open .chat__bottom-switch::before,
  body.chat-conversation-open .chat__bottom-switch::after,
  body.chat-conversation-open .chat__composer-dock::before,
  body.chat-conversation-open .chat__composer-dock::after {
    content: none;
    display: none;
  }

  body.chat-conversation-open .tg-head {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    box-sizing: border-box;
    min-height: calc(48px + env(safe-area-inset-top, 0px));
    padding: calc(env(safe-area-inset-top, 0px) + 4px) max(6px, env(safe-area-inset-right, 0px)) 4px max(6px, env(safe-area-inset-left, 0px));
    border: 0;
    border-bottom: 1px solid #d9d9d9;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  /* В ЛС как в Telegram Web: слева только «назад», без гамбургера. */
  body.chat-conversation-open section.chat.chat--channel-dm .chat__team-menu {
    display: none !important;
  }

  body.chat-conversation-open .chat__team-menu {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
  }

  body.chat-conversation-open .chat__back.is-visible {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
  }

  body.chat-conversation-open .tg-head__tools {
    display: flex;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-items: center;
    gap: 0;
    margin-left: auto;
  }

  body.chat-conversation-open #chat-search-toggle {
    display: none !important;
  }

  body.chat-conversation-open #chat-info-btn .tg-head__svg--info {
    display: none !important;
  }

  body.chat-conversation-open #chat-info-btn .tg-head__svg--more {
    display: block !important;
  }

  body.chat-conversation-open #chat-info-btn.tg-head__icon-btn--accent {
    color: #707579;
  }

  body.chat-conversation-open #chat-info-btn.tg-head__icon-btn--accent:hover {
    color: #000000;
    background: rgba(0, 0, 0, 0.05);
  }

  body.chat-conversation-open .tg-head__identity {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
  }

  body.chat-conversation-open .tg-head__titles {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 4px 8px 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: left;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.chat-conversation-open .tg-head__titles:hover {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
  }

  body.chat-conversation-open .tg-head__title {
    font-size: 17px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #000000;
  }

  body.chat-conversation-open .tg-head__subtitle {
    font-size: 14px;
    line-height: 1.15;
    color: #707579;
  }

  body.chat-conversation-open .tg-head__icon-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #707579;
  }

  body.chat-conversation-open .tg-head__icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000000;
  }

  body.chat-conversation-open .tg-head__avatar {
    flex: 0 0 auto;
    align-self: center;
    width: 37px;
    min-width: 37px;
    height: 37px;
    border-radius: 50%;
    background: #ebebeb;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.chat-conversation-open .chat__scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body.chat-conversation-open .chat__scroll::-webkit-scrollbar {
    display: none;
  }

  body.chat-conversation-open .chat__scroll-body,
  body.chat-conversation-open .messenger__center .chat .chat__scroll-body {
    min-height: 100%;
    margin: 0;
    padding-top: 10px;
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(10px + var(--chat-bottom-scroll-padding, 26px) + var(--chat-selection-scroll-extra, 0px));
    background: transparent;
    justify-content: flex-end;
    box-sizing: border-box;
  }

  body.chat-conversation-open .chat__typing-indicator {
    max-width: min(360px, 92vw);
  }

  body.chat-conversation-open .chat__bottom-switch,
  body.chat-conversation-open .messenger__center .chat .chat__bottom-switch {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: end;
    background: transparent;
    transform: none;
  }

  body.chat-conversation-open .chat__composer-dock,
  body.chat-conversation-open .messenger__center .chat .chat__composer-dock {
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)) !important;
    background: #ffffff !important;
    border-top: 1px solid #e7e7e7;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    transform: none;
  }

  body.chat-conversation-open .chat__composer-edge-spacer {
    display: none;
  }

  body.chat-conversation-open .chat__composer-rail {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 0;
  }

  body.chat-conversation-open .chat__composer-row {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    min-width: 0;
    gap: var(--chat-mobile-gap);
  }

  body.chat-conversation-open .chat__composer-float-wrap,
  body.chat-conversation-open .chat__composer-stack {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    width: auto;
  }

  body.chat-conversation-open .tg-composer-float {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-width: 0;
    gap: var(--chat-mobile-gap);
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.chat-conversation-open .tg-composer-float__field {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--chat-mobile-action);
    max-height: 118px;
    display: flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.chat-conversation-open .tg-composer-float__send {
    flex: 0 0 var(--chat-mobile-action);
    align-self: center;
  }

  body.chat-conversation-open .chat__composer-side {
    flex: 0 0 var(--chat-mobile-action);
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
  }

  body.chat-conversation-open .chat__composer-dock:not(.chat__composer-dock--has-text):not(.chat__composer-dock--has-pending) .tg-composer-float__send,
  body.chat-conversation-open .chat__composer-dock--has-text .chat__composer-side,
  body.chat-conversation-open .chat__composer-dock--has-pending .chat__composer-side {
    display: none;
  }

  body.chat-conversation-open .tg-composer-float__attach,
  body.chat-conversation-open .tg-composer-float__send,
  body.chat-conversation-open .chat__voice-btn {
    width: var(--chat-mobile-action);
    min-width: var(--chat-mobile-action);
    height: var(--chat-mobile-action);
    min-height: var(--chat-mobile-action);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: #8e8e93;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.chat-conversation-open .tg-composer-float__attach:hover,
  body.chat-conversation-open .tg-composer-float__send:hover,
  body.chat-conversation-open .chat__voice-btn:hover {
    color: #707579;
    background: rgba(0, 0, 0, 0.04);
  }

  body.chat-conversation-open .tg-composer-float__input {
    flex: 1 1 auto;
    min-height: 44px;
    max-height: 94px;
    padding: 10px 0;
    overflow-y: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-size: 17px;
    line-height: 22px;
    color: #000000;
  }

  body.chat-conversation-open .tg-composer-float__emoji {
    position: relative;
    flex: 0 0 var(--chat-mobile-action);
    align-self: center;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: var(--chat-mobile-action);
    min-width: var(--chat-mobile-action);
    height: var(--chat-mobile-action);
    min-height: var(--chat-mobile-action);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #8e8e93;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  body.chat-conversation-open .tg-composer-float__emoji:hover {
    color: #707579;
    background: rgba(0, 0, 0, 0.04);
  }

  body.chat-conversation-open .tg-composer-float__input--rich.is-composer-empty::before {
    color: #8e8e93;
  }

  body.chat-conversation-open .tg-composer-float__emoji,
  body.chat-conversation-open .tg-composer-float__attach,
  body.chat-conversation-open .tg-composer-float__send,
  body.chat-conversation-open .chat__voice-btn {
    touch-action: manipulation;
  }
}

/* =============================================================================
 * Мобильный CRM: договоры, клиенты и др. поверх режима «только чат» (≤960px).
 * Перекрывает правила «chat-only» за счёт большей специфичности (последний блок).
 * ============================================================================= */
@media (max-width: 960px) {
  body.mobile-ws-contracts,
  body.mobile-ws-clients,
  body.mobile-ws-drivers,
  body.mobile-ws-samples,
  body.mobile-ws-stocks,
  body.mobile-ws-chat:not(.chat-conversation-open) {
    --mobile-tabbar-stack: 3.35rem;
  }

  body.mobile-ws-chat.chat-conversation-open {
    --mobile-tabbar-stack: 0px;
  }

  body.mobile-ws-contracts .mobile-tabbar,
  body.mobile-ws-clients .mobile-tabbar,
  body.mobile-ws-drivers .mobile-tabbar,
  body.mobile-ws-samples .mobile-tabbar,
  body.mobile-ws-stocks .mobile-tabbar,
  body.mobile-ws-chat:not(.chat-conversation-open) .mobile-tabbar {
    display: flex !important;
  }

  body.mobile-ws-chat.chat-conversation-open .mobile-tabbar {
    display: none !important;
  }

  body.mobile-ws-contracts #section-chat:not(.crm-section--active),
  body.mobile-ws-clients #section-chat:not(.crm-section--active),
  body.mobile-ws-drivers #section-chat:not(.crm-section--active),
  body.mobile-ws-samples #section-chat:not(.crm-section--active),
  body.mobile-ws-stocks #section-chat:not(.crm-section--active) {
    display: none !important;
  }

  body.mobile-ws-contracts .crm-work,
  body.mobile-ws-clients .crm-work,
  body.mobile-ws-drivers .crm-work,
  body.mobile-ws-samples .crm-work,
  body.mobile-ws-stocks .crm-work {
    box-sizing: border-box;
    height: calc(var(--visual-viewport-height, 100dvh) - var(--mobile-tabbar-stack));
    max-height: calc(var(--visual-viewport-height, 100dvh) - var(--mobile-tabbar-stack));
    padding: 0 !important;
    overflow: hidden;
    background: var(--surface, #f6f7f8);
  }

  body.mobile-ws-drivers #section-drivers .drivers-hub-form-layer:not([hidden]) {
    z-index: 2100;
    inset: 0 0 var(--mobile-tabbar-stack, 3.35rem) 0;
    -webkit-user-modify: unset;
    pointer-events: auto;
  }

  body.mobile-ws-drivers .drivers-hub-toolbar__actions {
    flex-direction: column;
    width: 100%;
  }

  body.mobile-ws-drivers .drivers-hub-toolbar__actions .documents-btn,
  body.mobile-ws-drivers .drivers-merge-modal__actions .documents-btn,
  body.mobile-ws-drivers #dr-save,
  body.mobile-ws-drivers #shipment-ati-publish {
    width: 100%;
    min-height: 44px;
    pointer-events: auto;
    touch-action: manipulation;
  }

  body.mobile-ws-drivers .drivers-merge-modal__actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    flex-direction: column;
    background: var(--bg-panel, #f8faf9);
  }

  body.mobile-ws-drivers #contracts-view-delivery.contracts-view--delivery {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0.45rem;
    background: var(--bg-panel, #f8faf9);
  }

  body.mobile-ws-contracts #section-contracts.crm-section--active,
  body.mobile-ws-clients #section-clients.crm-section--active,
  body.mobile-ws-drivers #section-drivers.crm-section--active,
  body.mobile-ws-samples #section-samples.crm-section--active,
  body.mobile-ws-stocks #section-stocks.crm-section--active {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    animation: none !important;
  }

  body.mobile-ws-contracts #section-contracts .crm-panel--documents {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0.55rem 0.5rem 0.25rem;
    max-width: none;
  }

  body.mobile-ws-contracts #contracts-view-list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 0.35rem;
  }

  body.mobile-ws-contracts #contracts-view-list > .contracts-controls {
    flex: 0 0 auto;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
  }

  body.mobile-ws-contracts #contracts-view-list .documents-toolbar--contracts {
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  body.mobile-ws-contracts #contracts-view-list .documents-toolbar__filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    width: 100%;
    margin: 0;
  }

  body.mobile-ws-contracts #contracts-view-list #contracts-search {
    grid-column: 1 / -1;
    max-width: none;
  }

  body.mobile-ws-contracts #contracts-view-list .documents-date-period-sep {
    display: none;
  }

  body.mobile-ws-contracts #contracts-view-list .documents-contracts-filter-row {
    flex: 0 0 auto;
  }

  body.mobile-ws-contracts #contracts-view-list > .documents-title {
    flex: 0 0 auto;
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
  }

  body.mobile-ws-contracts #contracts-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-table-wrap {
    margin: 0;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-table {
    border: 0;
    border-spacing: 0;
    width: 100%;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-table tbody tr {
    display: block;
    margin-bottom: 0.85rem;
    padding: 0.6rem 0.65rem;
    border: 2px solid var(--contracts-table-row-divider, var(--border, #cbd5e1));
    border-radius: 14px;
    background: var(--bg-elevated, #fff);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--bg-muted, #f3f4f6) 35%, var(--bg-elevated, #fff));
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-table tbody td {
    display: block;
    width: 100% !important;
    max-width: none !important;
    border: none;
    background: transparent;
    padding: 0.28rem 0;
    text-align: left !important;
    white-space: normal !important;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-col--num::before {
    content: "Договор | Ответственный";
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted, #6b7280);
    margin-bottom: 0.12rem;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-col--status::before {
    content: "Статус";
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted, #6b7280);
    margin-bottom: 0.12rem;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-col--manager::before {
    content: "Ответственный";
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted, #6b7280);
    margin-bottom: 0.12rem;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-col--sum::before {
    content: "Сумма";
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted, #6b7280);
    margin-bottom: 0.12rem;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-col--address::before {
    content: "Доставка";
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted, #6b7280);
    margin-bottom: 0.12rem;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-col--comment::before {
    content: "Комментарий";
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted, #6b7280);
    margin-bottom: 0.12rem;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-col--transit-driver::before {
    content: "Водитель";
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted, #6b7280);
    margin-bottom: 0.12rem;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-col--transit-eta::before {
    content: "Планируемая дата доставки";
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted, #6b7280);
    margin-bottom: 0.12rem;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-col--actions::before {
    content: "Действия";
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted, #6b7280);
    margin-bottom: 0.25rem;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
  }

  body.mobile-ws-contracts #contracts-list .documents-contracts-delete-btn {
    min-width: 44px;
    min-height: 44px;
  }

  body.mobile-ws-contracts #contracts-view-list .documents-pagination-row {
    flex: 0 0 auto;
    padding-bottom: 0.15rem;
  }

  body.mobile-ws-contracts .contracts-editor-modal__head-main {
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  body.mobile-ws-contracts .contracts-editor-modal__head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
    width: 100%;
  }

  body.mobile-ws-clients #section-clients .crm-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin: 0;
    max-width: none;
  }
}

/* Глобальная плашка подтверждения (сохранение, согласование и т.д.) */
.brik-status-toast {
  position: fixed;
  top: max(1.25rem, env(safe-area-inset-top, 0px));
  left: 50%;
  bottom: auto;
  z-index: 13000;
  box-sizing: border-box;
  max-width: min(92vw, 28rem);
  padding: 0.62rem 1.2rem;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  border-radius: 999px;
  pointer-events: none;
  transform: translate3d(-50%, -18px, 0) scale(0.98);
  opacity: 0;
  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.brik-status-toast.brik-status-toast--success {
  color: #14532d;
  background: rgba(240, 253, 244, 0.98);
  border: 2px solid #4ade80;
  box-shadow:
    0 8px 28px rgba(34, 197, 94, 0.22),
    0 2px 10px rgba(15, 23, 42, 0.08);
}

.brik-status-toast.brik-status-toast--neutral {
  color: rgba(15, 23, 42, 0.92);
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.14),
    0 2px 10px rgba(15, 23, 42, 0.08);
}

.brik-status-toast.brik-status-toast--error {
  color: #7f1d1d;
  background: rgba(254, 242, 242, 0.98);
  border: 2px solid #f87171;
  box-shadow:
    0 18px 44px rgba(127, 29, 29, 0.18),
    0 2px 10px rgba(15, 23, 42, 0.08);
}

.brik-status-toast[hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

.brik-status-toast.brik-status-toast--in {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

.brik-status-toast.brik-status-toast--out {
  opacity: 0;
  transform: translate3d(-50%, -10px, 0) scale(0.98);
}

html[data-theme="dark"] .brik-status-toast.brik-status-toast--success {
  color: #bbf7d0;
  background: rgba(20, 83, 45, 0.94);
  border-color: #22c55e;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(74, 222, 128, 0.25);
}

html[data-theme="dark"] .brik-status-toast.brik-status-toast--neutral {
  color: rgba(248, 250, 252, 0.95);
  background: rgba(30, 41, 59, 0.96);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .brik-status-toast.brik-status-toast--error {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.94);
  border-color: #ef4444;
  box-shadow:
    0 18px 44px rgba(127, 29, 29, 0.34),
    0 0 0 1px rgba(248, 113, 113, 0.2);
}

/* Раздел статистики */
#section-statistics.crm-section {
  width: 100%;
  align-self: stretch;
}

.statistics-product-search__field .documents-input {
  width: 100%;
}

.statistics-product-search__input-row .documents-input {
  min-width: 0;
}

.statistics-product-search__input-row .documents-btn {
  flex-shrink: 0;
}



@media (max-width: 560px) {

  .statistics-filters,
  .statistics-filter,
  .statistics-sales-chart__filters,
  .statistics-sales-chart__filters .documents-input,
  .statistics-product-search__input-row,
  .statistics-product-search__input-row .documents-btn,
  .statistics-filters .documents-btn {
    width: 100%;
  }
}

/* День рождения сотрудника — крупное уведомление для админов. */
.employee-birthday-banner {
  position: fixed;
  inset: 0;
  z-index: 1095;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-sizing: border-box;
}

.employee-birthday-banner[hidden] {
  display: none !important;
}

.employee-birthday-banner__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay-backdrop);
  backdrop-filter: blur(4px);
}

.employee-birthday-banner__panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 28rem);
  padding: 2.5rem 2rem 2rem;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(165deg, #fff7ed 0%, #fef3c7 42%, #ecfdf5 100%);
  border: 2px solid rgba(47, 125, 92, 0.35);
  box-shadow:
    0 24px 64px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  color: #0f172a;
}

[data-theme="dark"] .employee-birthday-banner__panel {
  background: linear-gradient(165deg, #422006 0%, #1e3a2f 55%, #0f172a 100%);
  border-color: rgba(74, 222, 128, 0.35);
  color: #f8fafc;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.employee-birthday-banner__emoji {
  margin: 0 0 0.5rem;
  font-size: clamp(3.5rem, 12vw, 4.5rem);
  line-height: 1;
}

.employee-birthday-banner__title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.employee-birthday-banner__names {
  margin: 0 0 0.65rem;
  font-size: clamp(1.75rem, 7vw, 2.35rem);
  font-weight: 800;
  line-height: 1.15;
  color: #166534;
}

[data-theme="dark"] .employee-birthday-banner__names {
  color: #4ade80;
}

.employee-birthday-banner__hint {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  color: var(--text-secondary);
}

.employee-birthday-banner__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 10rem;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: #2f7d5c;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(47, 125, 92, 0.35);
}

.employee-birthday-banner__btn:hover {
  background: #276b4f;
}

.employee-birthday-banner__btn:focus-visible {
  outline: 2px solid #2f7d5c;
  outline-offset: 3px;
}

/* --- Раздел «Тест»: расслабляющие мини-игры --- */
.crm-panel--test-games {
  width: min(100%, 1180px);
  min-height: calc(100dvh - 2rem);
  margin: 0 auto;
  padding: clamp(1rem, 2.4vw, 1.5rem);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(74, 143, 111, 0.16), transparent 34rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 242, 0.92));
}

.test-games-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.test-games-score {
  display: grid;
  min-width: 7rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(74, 143, 111, 0.18);
  border-radius: 18px;
  text-align: center;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 30px rgba(42, 95, 72, 0.08);
}

.test-games-score strong {
  color: var(--accent);
  font-size: 1.75rem;
  line-height: 1;
}

.test-games-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 1rem;
}

.test-games-picker {
  display: grid;
  gap: 0.75rem;
  align-content: start;
}

.test-game-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 20px;
  font: inherit;
  text-align: left;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  transition:
    transform var(--motion-fast) var(--ease-out-premium),
    border-color var(--motion-fast) var(--ease-out-premium),
    box-shadow var(--motion-fast) var(--ease-out-premium);
}

.test-game-card:hover,
.test-game-card--active {
  transform: translateY(-1px);
  border-color: rgba(74, 143, 111, 0.44);
  box-shadow: 0 14px 28px rgba(42, 95, 72, 0.12);
}

.test-game-card--active {
  background: linear-gradient(145deg, #f0fdf4, #ffffff);
}

.test-game-card__emoji {
  display: inline-grid;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border-radius: 14px;
  color: #ffffff;
  background: linear-gradient(145deg, #4a8f6f, #2f6b4e);
  font-weight: 900;
}

.test-game-card__body {
  display: grid;
  gap: 0.2rem;
}

.test-game-card__body strong {
  color: var(--text-strong);
  font-size: 1rem;
}

.test-game-card__body small {
  color: var(--text-secondary);
  line-height: 1.35;
}

.test-game-stage {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.test-game-stage__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.test-game-stage__top h3 {
  margin: 0 0 0.25rem;
  color: var(--text-strong);
  font-size: 1.25rem;
}

.test-game-stage__top p {
  margin: 0;
  color: var(--text-secondary);
}

.test-game-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.test-game-canvas-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: #102016;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 18px 42px rgba(15, 23, 42, 0.18);
}

#test-game-canvas {
  display: block;
  width: 100%;
  max-height: min(58vh, 520px);
  aspect-ratio: 14 / 9;
}

.test-game-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.35rem;
  padding: 1.25rem;
  text-align: center;
  color: #ffffff;
  background: rgba(9, 25, 17, 0.62);
  backdrop-filter: blur(3px);
}

.test-game-overlay[hidden] {
  display: none !important;
}

.test-game-overlay strong {
  font-size: clamp(1.2rem, 3vw, 1.75rem);
}

.test-game-overlay span {
  color: rgba(255, 255, 255, 0.78);
}

.test-game-mobile-controls {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.test-game-mobile-controls button {
  min-height: 2.7rem;
  border: 1px solid rgba(74, 143, 111, 0.24);
  border-radius: 14px;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--accent);
  background: #ffffff;
}

@media (max-width: 900px) {
  .test-games-head,
  .test-game-stage__top {
    display: grid;
  }

  .test-games-layout {
    grid-template-columns: 1fr;
  }

  .test-games-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .test-game-card {
    align-items: flex-start;
  }

  .test-game-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .crm-panel--test-games {
    min-height: auto;
    border-radius: 0;
  }

  .test-games-picker {
    grid-template-columns: 1fr;
  }

  .test-games-score {
    width: 100%;
    box-sizing: border-box;
  }

  .test-game-stage {
    padding: 0.75rem;
  }

  .test-game-actions .documents-btn {
    flex: 1 1 auto;
  }

  .test-game-mobile-controls {
    display: grid;
  }
}

.calc-table input.documents-input {
  padding: 0.3rem 0.45rem;
}

.calc-inline-field .documents-input,
.calc-inline-field select.documents-input {
  font-weight: 500;
  color: var(--text);
}

.documents-btn--ghost {
  background: transparent;
}

.documents-status--success {
  color: var(--accent);
}



/* ——— Банк идей новых продуктов ——— */
#section-ideas.crm-section {
  width: 100%;
  align-self: stretch;
  overflow: hidden;
}

.ideas-field__heading .documents-btn {
  flex: 0 0 auto;
  padding: 7px 11px;
  font-size: 12px;
}

.ideas-ai-improve.is-loading {
  cursor: wait;
}

.ideas-ai-improve.is-loading .ideas-ai-improve__spinner {
  display: inline-block;
}

.ideas-ai-status.is-success {
  color: var(--accent);
}

.ideas-ai-status.is-error {
  background: color-mix(in srgb, #c62828 8%, var(--surface));
  color: #b42318;
}

.ideas-field .is-ai-updated {
  border-color: color-mix(in srgb, var(--accent) 75%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ideas-image-upload:hover,
.ideas-image-upload:focus-visible,
.ideas-image-upload.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface, var(--bg-panel)));
  outline: none;
}

.ideas-image-upload.is-dragover {
  transform: scale(1.005);
}

.ideas-image-upload.is-busy {
  cursor: wait;
  opacity: 0.72;
}

.ideas-image-status.is-error {
  color: #b91c1c;
}

.ideas-image-status.is-success {
  color: var(--accent);
}





#section-cdek-returns.crm-section {
  width: 100%;
  align-self: stretch;
}

.cdek-return-approvals-head .crm-panel__title {
  margin: 0;
}

.cdek-return-approvals-head .documents-btn {
  flex: 0 0 auto;
}

#cdek-return-approvals-form-toggle.documents-btn--primary {
  font-weight: 700;
  padding: 0.42rem 1rem;
}

.cdek-return-approvals-field input.documents-input,
.cdek-return-approvals-field select.documents-select {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--cdek-ra-control-h);
  min-height: var(--cdek-ra-control-h);
  max-height: var(--cdek-ra-control-h);
  margin: 0;
  padding: 0 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: calc(var(--cdek-ra-control-h) - 2px);
}

.cdek-return-approvals-field input.documents-input[readonly],
.cdek-return-approvals-field input.documents-input:disabled {
  height: var(--cdek-ra-control-h);
  min-height: var(--cdek-ra-control-h);
  max-height: var(--cdek-ra-control-h);
  padding: 0 0.7rem;
}

.cdek-return-approvals-field input[type="date"].documents-input {
  appearance: none;
  -webkit-appearance: none;
}

.cdek-return-approvals-field input[type="date"].documents-input::-webkit-datetime-edit,
.cdek-return-approvals-field input[type="date"].documents-input::-webkit-datetime-edit-fields-wrapper,
.cdek-return-approvals-field input[type="date"].documents-input::-webkit-datetime-edit-text,
.cdek-return-approvals-field input[type="date"].documents-input::-webkit-datetime-edit-month-field,
.cdek-return-approvals-field input[type="date"].documents-input::-webkit-datetime-edit-day-field,
.cdek-return-approvals-field input[type="date"].documents-input::-webkit-datetime-edit-year-field {
  padding: 0;
  line-height: calc(var(--cdek-ra-control-h) - 2px);
}

.cdek-return-approvals-field input[type="date"].documents-input::-webkit-calendar-picker-indicator {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 0 0 0.25rem;
  cursor: pointer;
}

.cdek-return-approvals-field select.documents-select {
  display: block;
}

.cdek-return-approvals-field textarea.documents-input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 4.4rem;
  max-height: none;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.35;
}

.cdek-return-approvals-field--manager input.documents-input {
  width: auto;
  min-width: 10ch;
  max-width: 14rem;
}

.cdek-return-approvals-combo__item:hover,
.cdek-return-approvals-combo__item.is-active {
  background: rgba(74, 143, 111, 0.12);
}

.cdek-return-approvals-attach.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface, var(--bg-panel)));
}

.cdek-return-approvals-gallery.is-single .cdek-return-approvals-gallery__nav {
  display: none;
}







/* ——— Реквизиты: вёрстка из rekvizity.html, классы с префиксом requisites- ——— */
#section-requisites.crm-section {
  --requisites-ink: #101720;
  --requisites-ink-2: #39434f;
  --requisites-muted: #77828f;
  --requisites-card: #ffffff;
  --requisites-rule: #e2e7ed;
  --requisites-blue: #23528f;
  --requisites-blue-deep: #17385f;
  --requisites-teal: #17b3be;
  --requisites-ok: #1f8a5b;
  --requisites-radius: 14px;
  --requisites-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --requisites-sans: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  width: 100%;
  align-self: stretch;
  color: var(--requisites-ink);
  font-family: var(--requisites-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] #section-requisites.crm-section {
  --requisites-ink: #e8eef5;
  --requisites-ink-2: #c5ced8;
  --requisites-muted: #8b96a3;
  --requisites-card: #1a2330;
  --requisites-rule: #2c3848;
  --requisites-blue: #7eb0e8;
  --requisites-blue-deep: #9bc2f0;
  --requisites-teal: #2ad0d9;
  --requisites-ok: #3dba7a;
}

#section-requisites .powers-head {
  align-items: flex-end;
  margin-bottom: 22px;
}

#section-requisites .powers-head .crm-panel__title {
  margin: 0;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--requisites-ink);
}

#section-requisites .powers-head .crm-panel__lead {
  max-width: 46ch;
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--requisites-muted);
}

#section-requisites .powers-card.requisites-entity,
#section-requisites .powers-card.requisites-site {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--requisites-rule);
  border-radius: var(--requisites-radius);
  background: var(--requisites-card);
  box-shadow: 0 1px 2px rgba(16, 23, 32, 0.04);
}

#section-requisites .powers-card.requisites-entity {
  margin-bottom: 34px;
}

#section-requisites .powers-card__head {
  align-items: flex-start;
  margin-bottom: 0;
}

#section-requisites .powers-card__actions {
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
}

#section-requisites .powers-card__head .documents-btn--icon,
#section-requisites .requisites-geo .documents-btn--icon {
  min-width: 2.05rem;
  width: 2.05rem;
  height: 2.05rem;
  padding: 0;
  flex-shrink: 0;
}

#section-requisites .powers-card__head .documents-btn--icon.documents-btn--loading svg {
  display: none;
}

#section-requisites .powers-card.is-editing {
  --requisites-edit-gap: 14px;
  overflow: visible;
}

#section-requisites .powers-card.is-editing .requisites-row {
  cursor: default;
}

#section-requisites .powers-card.is-editing .requisites-row:hover,
#section-requisites .powers-card.is-editing .requisites-row.is-done {
  background: none;
}

#section-requisites .powers-card.is-editing .requisites-row::before,
#section-requisites .powers-card.is-editing .requisites-hint {
  display: none;
}

#section-requisites .powers-card.is-editing .requisites-bar,
#section-requisites .powers-card.is-editing .requisites-ticks,
#section-requisites .powers-card.is-editing .requisites-hours-note {
  display: none;
}

#section-requisites .powers-card.is-editing .powers-card__actions {
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
  justify-content: flex-end;
  max-width: 100%;
}

#section-requisites .powers-card.is-editing .powers-card__actions .requisites-chip {
  margin-right: 2px;
}

#section-requisites .requisites-site.is-editing {
  gap: var(--requisites-edit-gap);
}

#section-requisites .requisites-site.is-editing .requisites-site-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow actions"
    "name name"
    "addr addr";
  align-items: center;
  gap: var(--requisites-edit-gap) 16px;
  margin-bottom: 0;
  padding: 20px 22px 0;
}

#section-requisites .requisites-site.is-editing .requisites-site-intro {
  display: contents;
}

#section-requisites .requisites-site.is-editing .requisites-site-eyebrow {
  grid-area: eyebrow;
  align-self: center;
  margin: 0;
}

#section-requisites .requisites-site.is-editing .requisites-site-top > .powers-card__actions {
  grid-area: actions;
}

#section-requisites .requisites-site.is-editing .requisites-site-name {
  grid-area: name;
  margin: 0;
}

#section-requisites .requisites-site.is-editing .requisites-address,
#section-requisites .requisites-site.is-editing .requisites-site-addr {
  grid-area: addr;
  margin: 0;
}

#section-requisites .requisites-site.is-editing .requisites-people,
#section-requisites .requisites-site.is-editing .requisites-tel,
#section-requisites .requisites-site.is-editing .requisites-hours,
#section-requisites .requisites-site.is-editing .requisites-geo {
  margin: 0 22px;
}

#section-requisites .requisites-site.is-editing .requisites-hours {
  padding-top: 0;
  border-top: 0;
}

#section-requisites .powers-card.is-editing .requisites-hours-top {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 0;
}

#section-requisites .powers-card.is-editing .requisites-hours-label {
  font-size: 12px;
  font-weight: 600;
}

#section-requisites .powers-card.is-editing .requisites-hours-val {
  display: block;
  width: 100%;
  min-width: 0;
}

#section-requisites .powers-card.is-editing .requisites-hours-val .requisites-input--area {
  min-height: 3.2em;
}

#section-requisites .requisites-site.is-editing .requisites-geo.requisites-edit-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
  margin-bottom: 18px;
}

#section-requisites .requisites-site.is-editing .requisites-geo .requisites-edit-label {
  grid-column: 1 / -1;
}

#section-requisites .requisites-site.is-editing .requisites-geo .requisites-input {
  grid-column: 1;
  height: 2.25rem;
  min-height: 2.25rem;
  padding: 6px 10px;
}

#section-requisites .requisites-site.is-editing .requisites-geo .documents-btn--icon {
  grid-column: 2;
  align-self: center;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
}

#section-requisites .requisites-entity.is-editing .requisites-entity-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "actions actions"
    "name name"
    "sub sub";
  align-items: center;
  gap: 12px 16px;
}

#section-requisites .requisites-entity.is-editing .requisites-entity-intro {
  display: contents;
}

#section-requisites .requisites-entity.is-editing .requisites-entity-name {
  grid-area: name;
  margin: 0;
}

#section-requisites .requisites-entity.is-editing .requisites-entity-sub {
  grid-area: sub;
  margin: 0;
}

#section-requisites .requisites-entity.is-editing .requisites-entity-top > .powers-card__actions {
  grid-area: actions;
  width: 100%;
}

#section-requisites .requisites-entity.is-editing .powers-card__actions .requisites-chip {
  margin-right: auto;
}

#section-requisites .requisites-entity.is-editing .requisites-col {
  display: flex;
  flex-direction: column;
  gap: var(--requisites-edit-gap);
}

#section-requisites .requisites-entity.is-editing .requisites-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  margin-left: 0;
  padding: 0;
}

#section-requisites .requisites-entity.is-editing .requisites-k {
  white-space: normal;
}

#section-requisites .requisites-entity.is-editing .requisites-contacts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--requisites-edit-gap) 24px;
  align-items: start;
}

#section-requisites .requisites-entity.is-editing .requisites-contacts > [data-requisites-field] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

#section-requisites .requisites-entity.is-editing .requisites-contacts .requisites-k {
  margin-right: 0;
}

.requisites-entity-name,
#section-requisites .requisites-entity-name.powers-card__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--requisites-ink);
}

.requisites-row:hover::before,
.requisites-row.is-done::before {
  opacity: 1;
}

.requisites-row.is-done {
  background: #eff8f3;
}

[data-theme="dark"] .requisites-row.is-done {
  background: rgba(61, 186, 122, 0.12);
}

.requisites-row:hover .requisites-hint,
.requisites-row:focus-visible .requisites-hint,
.requisites-row.is-done .requisites-hint {
  opacity: 1;
}

.requisites-row.is-done .requisites-hint {
  color: var(--requisites-ok);
}

.requisites-bank-qr__actions .documents-btn {
  min-height: 34px;
  padding: 6px 11px;
  font-size: 12.5px;
  text-decoration: none;
}

.requisites-sites-title,
#section-requisites .powers-subhead.requisites-sites-title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--requisites-muted);
}

.requisites-site-name,
#section-requisites .requisites-site-name.powers-card__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--requisites-ink);
}

@media (max-width: 900px) {
  #section-requisites .powers-head .crm-panel__title {
    font-size: 24px;
  }

  #section-requisites .requisites-entity.is-editing .requisites-contacts {
    grid-template-columns: 1fr;
  }
}



@media (max-width: 640px) {
  #section-requisites .powers-card__actions {
    width: auto;
    flex-shrink: 0;
  }

  #section-requisites .requisites-site.is-editing .requisites-site-top {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "actions"
      "name"
      "addr";
  }

  #section-requisites .requisites-site.is-editing .requisites-site-top > .powers-card__actions {
    justify-content: flex-start;
  }
}



#section-settlements .settlements-parties__head,
#section-settlements .settlements-items__head,
#section-settlements .settlements-party-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

#section-settlements .settlements-parties__head h3,
#section-settlements .settlements-party-card__head h3,
#section-settlements .settlements-items__head h4 {
  margin: 0;
  font-size: 1rem;
}

#section-settlements .settlements-party {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.6rem;
  width: 100%;
  padding: 0.7rem 0.75rem;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.03);
  text-align: left;
  cursor: pointer;
}

#section-settlements .settlements-party strong {
  grid-column: 1;
}

#section-settlements .settlements-party__meta {
  grid-column: 1;
  color: var(--muted, #64748b);
  font-size: 0.78rem;
}

#section-settlements .settlements-party__sum {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 0.82rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

#section-settlements .settlements-party__sum.is-plus {
  color: #047857;
}

#section-settlements .settlements-party__sum.is-minus {
  color: #b45309;
}

#section-settlements .settlements-party.is-active {
  border-color: rgba(74, 124, 98, 0.45);
  background: rgba(74, 124, 98, 0.1);
}

#section-settlements .settlements-party-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

#section-settlements .settlements-mini-stat {
  padding: 0.55rem 0.65rem;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.04);
}

#section-settlements .settlements-mini-stat span {
  display: block;
  color: var(--muted, #64748b);
  font-size: 0.75rem;
}

#section-settlements .settlements-mini-stat strong {
  display: block;
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}

#section-settlements .settlements-mini-stat--plus strong {
  color: #047857;
}

#section-settlements .settlements-mini-stat--minus strong {
  color: #b45309;
}

#section-settlements .settlements-party-card__note {
  margin: 0.7rem 0 0;
  color: var(--muted, #64748b);
}

#section-settlements .settlements-order {
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

#section-settlements .settlements-order__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}

#section-settlements .settlements-order__top h3 {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.98rem;
}

#section-settlements .settlements-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  font-size: 0.74rem;
}

#section-settlements .settlements-chip--open {
  background: rgba(234, 179, 8, 0.2);
}

#section-settlements .settlements-chip--partial {
  background: rgba(249, 115, 22, 0.18);
}

#section-settlements .settlements-chip--closed {
  background: rgba(16, 185, 129, 0.18);
}

#section-settlements .settlements-chip--cancelled {
  background: rgba(148, 163, 184, 0.28);
}

#section-settlements .settlements-order__mid {
  margin: 0.4rem 0 0.65rem;
  color: var(--muted, #64748b);
  font-size: 0.86rem;
}

#section-settlements .settlements-order__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

#section-settlements .settlements-order__foot strong {
  font-variant-numeric: tabular-nums;
}

#section-settlements .settlements-money,
#section-settlements [data-item-sum] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#section-settlements .settlements-history p,
#section-settlements .settlements-muted {
  margin: 0.2rem 0;
}

@media (max-width: 980px) {
  #section-settlements .settlements-kpis,
  #section-settlements .settlements-workspace,
  #section-settlements .settlements-toolbar,
  #section-settlements .settlements-form,
  #section-settlements .settlements-party-card__stats {
    grid-template-columns: minmax(0, 1fr);
  }
}
.sample-shipments-tools .documents-input {
  width: min(620px, 100%);
}
@keyframes samples-loading-spin { to { transform: rotate(360deg); } }
/* Шесть колонок должны помещаться на 15" без горизонтальной прокрутки, поэтому
   у этой таблицы нет общего для раздела min-width: 860px, а ширины колонок
   заданы долями. Раскладка только для десктопа — на телефоне строки становятся
   карточками, и любая ширина у ячейки ломает их. */

.samples-barcode-modal__actions .documents-btn { text-decoration: none; }

@media (max-width: 720px) {
  .samples-head .documents-btn { width: 100%; }
  .powers-pagination { flex-wrap: wrap; gap: 6px; }
}