/* ========================================================================== AI Продажи — Admin Design System -------------------------------------------------------------------------- Слой поверх Bootstrap 5 + Tabler. Ничего из Bootstrap/Tabler не дублируем — только: (1) design tokens, (2) кастомные компоненты админки (сайдбар, топбар, карточки статистики, чат-транскрипт, badge-soft-*, воронка стадий), (3) адаптивность (mobile-first breakpoints, off-canvas сайдбар). Как добавлять новые стили — см. docs/UI_UX_GUIDE.md, раздел «Правила CSS». ========================================================================== */ /* ----------------------------------------------------------------------- 1. DESIGN TOKENS Меняются здесь и только здесь. Никогда не хардкодить hex/px в шаблонах или новых компонентах — только через var(--...). ----------------------------------------------------------------------- */ :root { /* --- Цвет: фирменный "signal blue" (доверие/B2B) + тёплый coral-accent для прогресса по воронке и CTA. Coral используется точечно. --- */ --color-primary-50: #eef3fc; --color-primary-100: #d7e3f8; --color-primary-300: #7ca3e6; --color-primary-500: #2451b8; --color-primary-600: #1e429c; --color-primary-700: #183480; --color-accent-400: #ff9466; --color-accent-500: #ff7a45; --color-accent-600: #e8622d; --color-success-50: #e9f8f0; --color-success-500: #1aa260; --color-warning-50: #fdf3d9; --color-warning-500: #c98a06; --color-danger-50: #fbe9eb; --color-danger-500: #d8323f; --color-info-50: #e7f3fb; --color-info-500: #2f7dbd; /* Нейтральная шкала (slate) */ --ink-900: #0f1729; --ink-800: #1c2536; --ink-700: #2c3648; --ink-500: #5b6675; --ink-400: #8993a4; --ink-300: #c1c9d4; --ink-200: #e1e5ea; --ink-100: #eef1f5; --ink-50: #f7f8fa; --surface: #ffffff; /* Типографика */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Геометрия */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.06); --shadow-md: 0 4px 16px rgba(15, 23, 41, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 41, 0.12); /* Раскладка */ --sidebar-w: 260px; --sidebar-w-collapsed: 76px; --topbar-h: 64px; --content-max-w: 1320px; --transition-fast: 150ms ease; --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1); } /* ----------------------------------------------------------------------- 2. БАЗА ----------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; /* Баг: без этого свойства ширина viewport меняется каждый раз, когда вертикальный скроллбар появляется/исчезает — на коротких страницах .app-main получает чуть БОЛЬШЕ ширины, чем на длинных (где скроллбар "съедает" ~15-17px). Плюс Bootstrap при открытии любого offcanvas/modal сам временно убирает скроллбар (overflow:hidden на body) и компенсирует это padding-right на — .sidebar (position:fixed, ширина в px) этот padding не видит и не двигается, а .topbar/.app-main (обычный flow-контент внутри body) — видят и подрезаются. Отсюда "хедер и main сжимаются, разделение с сайдбаром" при появлении/скрытии скроллбара. scrollbar-gutter: stable — резервирует место под скроллбар ВСЕГДА, скроллбар есть на странице или нет, поэтому ширина контента больше не прыгает ни между страницами, ни при открытии панели. Поддержка — все актуальные браузеры (Chrome/Edge 94+, Firefox 97+, Safari 18.2+). */ scrollbar-gutter: stable; } /* Бутстрап при открытии любого modal/offcanvas сам вычисляет ширину скроллбара (window.innerWidth - document.documentElement.clientWidth) и ставит инлайновый padding-right на , чтобы контент не "прыгал" при исчезновении скроллбара. Но раз html { scrollbar-gutter: stable } уже резервирует эту полосу НАВСЕГДА (скроллбар виден он или нет), эта разница почти всегда 0 — а бутстрап всё равно накидывает padding-right поверх уже зарезервированного места. .sidebar (position:fixed) этот padding не видит, а .topbar/.page-content (обычный flow) — видят, отсюда "хедер везде с лишним отступом справа", которое появляется/исчезает вместе с любой офканвас-панелью (#editPanel используется почти на каждой странице: боты, шаблоны, прайс-лист, база знаний...). Компенсация от бутстрапа больше не нужна — обнуляем её. */ body.modal-open { padding-right: 0 !important; } body { font-family: var(--font-ui); color: var(--ink-800); background: var(--ink-50); font-size: 14.5px; line-height: 1.5; } code, .font-mono { font-family: var(--font-mono); font-size: 0.86em; } /* Видимый focus-ring для клавиатурной навигации (a11y) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .nav-link:focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ----------------------------------------------------------------------- 3. APP SHELL (сайдбар + топбар + контент) Mobile-first: по умолчанию сайдбар — off-canvas drawer. На >=992px превращается в постоянную колонку. ----------------------------------------------------------------------- */ .app-shell { min-height: 100vh; display: block; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: min(84vw, 300px); background: var(--ink-900); color: var(--ink-200); display: flex; flex-direction: column; padding: 16px 12px 20px; z-index: 1050; transform: translateX(-100%); transition: transform var(--transition-base); overflow-y: auto; } .sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-lg); } /* Затемнение фона при открытом мобильном сайдбаре */ .sidebar-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 41, 0.45); z-index: 1040; opacity: 0; pointer-events: none; transition: opacity var(--transition-base); } .sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; } .sidebar-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; color: #fff; padding: 6px 10px 18px; letter-spacing: -0.01em; } .sidebar-brand i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary-500), var(--color-accent-500)); font-size: 1.05rem; } .sidebar-close-btn { display: none; position: absolute; top: 14px; right: 14px; background: transparent; border: none; color: var(--ink-300); font-size: 1.25rem; } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; } .sidebar .nav-link { display: flex; align-items: center; gap: 10px; color: var(--ink-300); padding: 9px 12px; border-radius: var(--radius-sm); font-size: 0.89rem; font-weight: 500; transition: background var(--transition-fast), color var(--transition-fast); } .sidebar .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; opacity: 0.9; } .sidebar .nav-link:hover { background: rgba(255,255,255,0.06); color: #fff; } .sidebar .nav-link.active { background: var(--color-primary-500); color: #fff; } .sidebar-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); } .sidebar-section-title { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-400); padding: 0 12px 6px; } /* --- Основная область --- */ .app-main { min-height: 100vh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 1030; height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--ink-200); } .sidebar-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--ink-200); background: var(--surface); color: var(--ink-700); font-size: 1.1rem; } .topbar-title { font-weight: 700; font-size: 1.05rem; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-content { flex: 1; padding: 18px 16px 40px; max-width: var(--content-max-w); width: 100%; margin: 0 auto; } /* Десктоп: сайдбар постоянно виден, контент сдвинут */ @media (min-width: 992px) { .sidebar { transform: none; width: var(--sidebar-w); box-shadow: none; } .sidebar-backdrop { display: none; } .app-main { margin-left: var(--sidebar-w); } .sidebar-toggle-btn { display: none; } .page-content { padding: 24px 28px 48px; } } /* ----------------------------------------------------------------------- 4. AUTH (страница логина) ----------------------------------------------------------------------- */ .auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 20% 20%, var(--color-primary-700), var(--ink-900) 65%); padding: 20px; } .auth-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 32px 28px; } /* ----------------------------------------------------------------------- 5. КАРТОЧКИ / СТАТИСТИКА ----------------------------------------------------------------------- */ .card { border: 1px solid var(--ink-200); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .card-title { color: var(--ink-900); font-weight: 600; } .stat-card { border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--surface); padding: 16px 18px; height: 100%; } .stat-card .stat-label { font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500); } .stat-value { font-size: 1.7rem; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------------- 6. BADGES — мягкие статусные бейджи ----------------------------------------------------------------------- */ .badge-soft-success, .badge-soft-danger, .badge-soft-warning, .badge-soft-secondary { font-weight: 600; font-size: 0.72rem; padding: 4px 9px; border-radius: 999px; } .badge-soft-success { background: var(--color-success-50); color: var(--color-success-500); } .badge-soft-danger { background: var(--color-danger-50); color: var(--color-danger-500); } .badge-soft-warning { background: var(--color-warning-50); color: var(--color-warning-500); } .badge-soft-secondary{ background: var(--ink-100); color: var(--ink-500); } /* ----------------------------------------------------------------------- 7. ВОРОНКА / ПУТЬ ПО СТАДИЯМ (stage-path) Фирменный элемент продукта: точки-стадии соединены линией-градиентом primary -> accent, отражая продвижение клиента по воронке продаж. ----------------------------------------------------------------------- */ .stage-path { display: flex; align-items: center; flex-wrap: wrap; gap: 0; } .stage-path .stage-step { display: flex; align-items: center; font-size: 0.78rem; font-weight: 600; color: var(--ink-500); white-space: nowrap; } .stage-path .stage-step::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-300); margin-right: 6px; flex-shrink: 0; } .stage-path .stage-step.is-done::before { background: var(--color-primary-500); } .stage-path .stage-step.is-current { color: var(--ink-900); } .stage-path .stage-step.is-current::before { background: var(--color-accent-500); box-shadow: 0 0 0 3px var(--color-accent-400, #ff9466)33; } .stage-path .stage-connector { width: 20px; height: 2px; background: var(--ink-200); margin: 0 8px; } .stage-path .stage-connector.is-done { background: var(--color-primary-300); } /* ----------------------------------------------------------------------- 8. ЧАТ-ТРАНСКРИПТ (история диалогов) ----------------------------------------------------------------------- */ .chat-thread { display: flex; flex-direction: column; gap: 10px; /* padding: 4px 0; */ } .chat-turn { display: flex; } .chat-turn.is-user { justify-content: flex-end; } .chat-bubble { max-width: min(78%, 520px); padding: 9px 13px; border-radius: var(--radius-md); font-size: 0.88rem; line-height: 1.45; word-break: break-word; } .chat-bubble-bot { background: var(--ink-100); color: var(--ink-800); border-bottom-left-radius: 4px; } .chat-bubble-user { background: var(--color-primary-500); color: #fff; border-bottom-right-radius: 4px; } .chat-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .session-card .chat-thread { max-height: 60vh; overflow-y: auto; } .session-card .chat-turn { flex-direction: column; align-items: stretch; gap: 6px; } .session-card { border: 1px solid var(--ink-200); border-radius: var(--radius-md); transition: box-shadow var(--transition-fast), border-color var(--transition-fast); } .session-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-primary-300); } .detail-block { background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: var(--radius-sm); padding: 10px 12px; } .toggle-details-btn { font-size: 0.8rem; } .bot-functions { display: inline-block; } .btn-bot-functions-toggle { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px dashed var(--ink-300); border-radius: 999px; padding: 2px 10px; font-size: 0.72rem; font-weight: 600; color: var(--ink-500); cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast); } .btn-bot-functions-toggle:hover, .btn-bot-functions-toggle.is-expanded { border-color: var(--color-primary-300); color: var(--color-primary-600); background: var(--color-primary-50); } .btn-bot-functions-toggle .bot-functions-chevron { font-size: 0.85em; transition: transform var(--transition-fast); } .bot-functions-body { display: inline-block; min-width: 220px; max-width: 420px; background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: var(--radius-sm); } #toggle-all-details-btn { white-space: nowrap; } /* ----------------------------------------------------------------------- 9. ТАБЛИЦЫ / ПАГИНАЦИЯ — точечные правки поверх Tabler ----------------------------------------------------------------------- */ .table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500); font-weight: 700; border-bottom-width: 1px; } .pagination .page-link { color: var(--ink-700); } .pagination .page-item.active .page-link { background: var(--color-primary-500); border-color: var(--color-primary-500); } /* ----------------------------------------------------------------------- 10. АДАПТИВНЫЕ УТИЛИТЫ ДЛЯ ТАБЛИЦ НА МОБИЛЬНЫХ Правило: любая широкая таблица оборачивается в .table-responsive в шаблоне. Дополнительно смягчаем паддинги на мобильных. ----------------------------------------------------------------------- */ @media (max-width: 767.98px) { .card-body { padding: 14px; } .stat-value { font-size: 1.4rem; } .table th, .table td { padding: 0.5rem 0.6rem; font-size: 0.85rem; } .chat-bubble { max-width: 88%; } } /* ----------------------------------------------------------------------- 11. КНОПКИ — скругления/веса в тон общей геометрии ----------------------------------------------------------------------- */ .btn { border-radius: var(--radius-sm); font-weight: 600; font-size: 0.86rem; } .btn-primary { background: var(--color-primary-500); border-color: var(--color-primary-500); } .btn-primary:hover { background: var(--color-primary-600); border-color: var(--color-primary-600); } /* ----------------------------------------------------------------------- 12. FLASH-СООБЩЕНИЯ ----------------------------------------------------------------------- */ .alert { border-radius: var(--radius-md); border: 1px solid transparent; } /* ----------------------------------------------------------------------- 13. TAB-NAV — горизонтальное под-меню внутри раздела Используется там, где раньше плодили бы отдельные страницы: "Компании" (Компании/Пользователи/Удалённые), карточка ассистента (Инструкции/Воронка/ Настройки), и т.д. См. partials/_tabs.html и docs/UI_UX_GUIDE.md. ----------------------------------------------------------------------- */ .tab-nav { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--ink-200); margin-bottom: 18px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; } .tab-nav::-webkit-scrollbar { display: none; } .tab-nav .tab-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: 0.86rem; font-weight: 600; color: var(--ink-500); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--transition-fast), border-color var(--transition-fast); } .tab-nav .tab-nav-link:hover { color: var(--ink-800); } .tab-nav .tab-nav-link.active { color: var(--color-primary-500); border-bottom-color: var(--color-primary-500); } .tab-nav .tab-nav-link i { font-size: 1rem; } /* Вложенные под-разделы (например, вкладки внутри редактора ассистента) визуально чуть легче — меньше отступы, без нижней границы всего блока */ .tab-nav.tab-nav-sub { border-bottom: none; gap: 8px; } .tab-nav.tab-nav-sub .tab-nav-link { padding: 7px 12px; border-radius: var(--radius-sm); border-bottom: none; background: var(--ink-50); } .tab-nav.tab-nav-sub .tab-nav-link.active { background: var(--color-primary-500); color: #fff; } /* === Slide-in панель редактирования (offcanvas), единая для форм добавления/редактирования === */ .edit-panel { width: min(70vw, 720px) !important; } @media (max-width: 768px) { .edit-panel { width: 100vw !important; } } /* ----------------------------------------------------------------------- 9. ЕДИНАЯ ЛЕНТА «ЧАТ» — унифицированный инбокс по всем каналам/ботам (см. admin_live_chat.py). Продолжает нумерацию существующих секций (последняя была §8 «ЧАТ-ТРАНСКРИПТ» — см. выше). Использует только уже объявленные в :root токены, новых hex/px-хардкодов нет (см. §1 docs/UI_UX_GUIDE.md «Золотое правило»). ----------------------------------------------------------------------- */ /* Ограничивает всю область «Чат» высотой окна, чтобы обе колонки росли вместе, а не по высоте самого длинного списка/переписки. Значение topbar высоты — переиспользуйте существующую переменную из :root, если она уже объявлена (например --topbar-height); ниже — безопасный fallback на случай, если такой переменной ещё нет. */ .chat-layout { height: calc(100vh - var(--topbar-height, 64px) - 2rem); min-height: 420px; } .chat-layout-col { height: 100%; min-height: 0; /* обязательно для Firefox/Safari: без этого flex-item не сжимается ниже контента */ } .chat-layout-col > .chat-panel { height: 100%; } .chat-bubble-operator { background: var(--color-accent-50, var(--ink-100)); color: var(--ink-800); border-bottom-right-radius: 4px; } .chat-turn.is-user .chat-bubble-operator { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: 4px; } /* Индикатор "печатает" — класс .typing-dots использовался в шаблоне живого чата, но не был объявлен в app.css (пузырь показывался пустым). */ .typing-dots { display: inline-flex; gap: 4px; align-items: center; } .typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-400); animation: aichat-admin-typing 1s infinite; } .typing-dots span:nth-child(2) { animation-delay: .15s; } .typing-dots span:nth-child(3) { animation-delay: .3s; } @keyframes aichat-admin-typing { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } } /* Presence-точка (онлайн/офлайн клиента сайта) в списке диалогов и в шапке открытого диалога — см. ws_hub.py mark_online/is_online. */ .presence-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .presence-dot.is-online { background: var(--color-success-500); box-shadow: 0 0 0 2px var(--color-success-50); } .presence-dot.is-offline { background: var(--ink-300); } /* Бейдж непрочитанных сообщений клиента (см. list_live_sessions_for_company — считается как "сообщения клиента после последнего ответа бота/ оператора", без отдельной таблицы read-состояний). */ .badge-unread { min-width: 20px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } /* Карточка диалога в единой ленте — кликабельна целиком (role="button"), более плотные внутренние отступы на мобильном (p-2 в шаблоне), выравнивание правого столбца (статус/бейдж/время). */ .session-card[role="button"] { cursor: pointer; } .session-card .badge-soft-success, .session-card .badge-soft-warning { font-size: 0.72rem; white-space: nowrap; } .session-card.is-active { border-color: var(--color-primary-500); background: var(--color-primary-50); box-shadow: 0 0 0 1px var(--color-primary-500) inset; } /* Ссылка «Чат» в сайдбаре — общий непрочитанный счётчик по компании (см. app.js pollUnreadChatBadge). Компактная точка поверх иконки, а не полноразмерный badge, чтобы не расширять пункт меню. */ .nav-link .chat-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger-500); margin-left: 6px; vertical-align: middle; } /* ----------------------------------------------------------------------- 10. ЧАТ-ПАНЕЛЬ (Фаза 2) — карточка с собственным скроллом для списка диалогов и для ленты сообщений. Обе колонки одной высоты, шапка/футер ленты — sticky, сама переписка скроллится независимо от списка слева. ----------------------------------------------------------------------- */ .chat-panel { background: var(--surface); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: calc(100vh - 230px); min-height: 460px; overflow: hidden; } .chat-panel-scroll { flex: 1 1 auto; overflow-y: auto; padding: 12px; } .chat-panel-header { padding: 12px 16px; border-bottom: 1px solid var(--ink-200); background: var(--surface); flex-shrink: 0; } .chat-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 16px; background: var(--ink-50); } .chat-panel-footer { padding: 10px 12px; border-top: 1px solid var(--ink-200); background: var(--surface); flex-shrink: 0; } .chat-panel-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--ink-400); text-align: center; padding: 24px; } /* Разделитель дат в ленте */ .chat-date-sep { position: relative; text-align: center; margin: 14px 0 10px; font-size: 0.72rem; color: var(--ink-400); } .chat-date-sep::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ink-200); } .chat-date-sep span { position: relative; z-index: 1; background: var(--ink-50); padding: 0 10px; } /* Дата/время внутри пузыря */ .chat-bubble-meta { display: block; margin-top: 4px; font-size: 0.68rem; line-height: 1; text-align: right; } .chat-bubble-bot .chat-bubble-meta, .chat-bubble-operator .chat-bubble-meta { color: var(--ink-500); } .chat-bubble-user .chat-bubble-meta { color: rgba(255, 255, 255, 0.8); } /* Композер */ .chat-composer textarea { border-radius: var(--radius-lg); resize: none; } .chat-composer .btn { border-radius: 50%; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } @media (max-width: 991.98px) { .chat-panel { height: calc(100vh - 280px); min-height: 380px; } } /* --- ДОПОЛНЕНИЕ К app.css — новая секция «Плашка баланса» (.balance-strip) --- */ .balance-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 0.9rem 1.25rem; margin-bottom: 1rem; border-radius: var(--radius, var(--bs-border-radius-lg, 0.75rem)); background: var(--bs-body-bg, #fff); border: 1px solid var(--bs-border-color, #e6e8ec); box-shadow: var(--shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.05)); text-decoration: none; color: inherit; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .balance-strip:hover, .balance-strip:focus-visible { text-decoration: none; color: inherit; border-color: var(--bs-primary, #206bc4); box-shadow: var(--shadow, 0 4px 12px rgba(16, 24, 40, 0.08)); } /* Состояние "агент остановлен" — та же смысловая тревога, что и badge-soft-danger, но на всей плашке, чтобы бросалось в глаза сразу, без необходимости читать текст статуса. */ .balance-strip.is-blocked { border-color: var(--bs-danger-border-subtle, #f1c2c2); background: var(--bs-danger-bg-subtle, #fdf2f2); } .balance-strip-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.5rem; min-width: 0; } .balance-strip-item { display: flex; flex-direction: column; gap: 0.15rem; } .balance-strip-label { font-size: 0.75rem; color: var(--bs-secondary-color, #6c7a91); text-transform: uppercase; letter-spacing: 0.02em; } .balance-strip-value { font-size: 1.15rem; font-weight: 600; color: var(--bs-body-color, #172033); } .balance-strip-item-bonus .balance-strip-value { color: var(--bs-warning-text-emphasis, #a15c00); } .balance-strip-status { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .balance-strip-chevron { color: var(--bs-secondary-color, #6c7a91); }