/* ═══════════════════════════════════════════════════════════════════ VOICE — компоненты поверх style.css (style.css = точная копия construction: токены, кнопки, поля-карточки, модалки, тосты). Здесь ТОЛЬКО то, чего в construction нет, и строго на его токенах: высота контролов 46px, радиус 16px (rounded-4), рамка #dee2e6, тень 0 0 8px rgba(0,0,0,.06), шрифт Inter, основной #0066ff. ═══════════════════════════════════════════════════════════════════ */ :root { /* Каркас страницы: шапка, контент и подвал — одинаковые карточки одной ширины */ --vc-shell: 700px; --vc-gap: 16px; --vc-gutter: 12px; --vc-bar-h: 56px; --vc-control-h: 46px; --vc-radius: 16px; --vc-topbtn: 40px; /* кнопки шапки (баланс, язык, меню…); от него же — отступы кнопок окна языка */ --vc-composer-radius: 24px; /* поле ввода чата */ --vc-border: #dee2e6; --vc-shadow: 0 0 8px rgba(0, 0, 0, 0.06); --vc-press-bg: #eef1f5; /* фон кнопки В МОМЕНТ НАЖАТИЯ (эффектов наведения в проекте нет) */ --vc-primary-soft: #e8f1ff; --vc-primary-strong: #0b5ed7; --vc-success-soft: #e6f4ea; --vc-success-strong: #1a7f37; --vc-warn-soft: #fff3e0; --vc-warn-strong: #b45309; --vc-danger-soft: #fdecec; --vc-danger-strong: #b02a37; } /* ── Общие ──────────────────────────────────────────────────────── */ .mw-560 { max-width: 560px; } .min-w-0 { min-width: 0; } /* Кнопки счёта: в строку, не помещаются — каждая на свою строку */ /* «Настройки счёта» в окне пользователя: строка-кнопка (иконка, подпись, баланс, стрелка) */ .btn-soft.user-account-btn { height: 46px; padding: 0 14px; gap: 12px; text-align: left; } /* Вопрос перед зачислением денег — в окне счёта */ .user-confirm { padding: 12px 14px; border-radius: 12px; background: var(--vc-warn-soft); color: var(--vc-warn-strong); font-size: 14px; font-weight: 500; } .page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .page-head h1 { font-size: 1.5rem; font-weight: 400; margin: 0; } .back-link { font-size: 20px; line-height: 1; color: var(--color-text-muted); text-decoration: none; flex-shrink: 0; } .back-link:active { color: var(--color-text); } .section-title { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--color-text-light); margin: 20px 0 8px; } .form-hint { font-size: 12px; color: var(--color-text-light); padding: 0 16px 10px; } .dropdown-menu-voice { border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1); padding: 6px; min-width: 200px; } .dropdown-menu-voice .dropdown-item { padding: 8px 16px; border-radius: 10px; } .dropdown-menu-voice .dropdown-item.text-danger { color: var(--color-danger); } /* Не выше экрана: длинное меню (админ с раскрытыми разделами) прокручивается внутри */ .dropdown-menu-voice { max-height: calc(100dvh - 90px); overflow-y: auto; } /* ── Каркас: каждая страница — одно окно на всю высоту экрана ──────── Сверху — шапка-меню (.app-topbar), ниже — содержимое: у чата лента и поле ввода, у остальных страниц .app-body с прокруткой внутри окна. */ .page-main { padding: calc(var(--vc-gap) + env(safe-area-inset-top, 0px)) 0 var(--vc-gap); } .page-main > .container { padding-left: var(--vc-gutter); padding-right: var(--vc-gutter); } .app-window { display: flex; flex-direction: column; max-width: var(--vc-shell); margin: 0 auto; height: calc(100dvh - var(--vc-gap) * 2 - env(safe-area-inset-top, 0px)); min-height: 300px; /* Как в чатах ИИ: окно без рамки, тени и своего фона — содержимое прямо на странице, по одной линии с шапкой; прокручивается лента/тело внутри (min-height: 0) */ background: transparent; border: 0; border-radius: 0; box-shadow: none; } .app-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 0; } /* Шапка окна = меню сайта: логотип слева, кнопки-иконки справа */ .app-topbar { flex-shrink: 0; display: flex; align-items: center; gap: 8px; min-height: var(--vc-bar-h); padding: 7px 0; border-bottom: 1px solid var(--color-border); /* линия-разделитель под шапкой */ } .app-brand { /* Inter Light — шрифт сайта (Oswald не применялся: общее правило «* { font-family }»); толщина орбит знака подобрана под толщину этих букв (topbar.php) */ font-family: var(--font-family); font-weight: 300; font-size: 21px; letter-spacing: 1px; color: #1a1a2e; white-space: nowrap; text-decoration: none; text-transform: uppercase; min-width: 0; overflow: hidden; } .app-brand:hover, .app-brand:focus { color: #1a1a2e; } /* Знак — орбиты атома перед названием, по высоте — чуть больше заглавных букв */ .app-brand { display: inline-flex; align-items: center; } .app-brand .brand-mark { width: 1.15em; height: 1.15em; flex-shrink: 0; margin-right: .3em; } .app-topbar .conn-dot { flex-shrink: 0; } .app-topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; } .app-topbar-actions > .dropdown { display: flex; } /* без строчного «хвоста» под кнопкой меню */ /* Значок меню (три линии разной длины) */ .menu-lines { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 20px; } .menu-lines::before, .menu-lines::after, .menu-lines > span { content: ''; display: block; height: 2px; border-radius: 2px; background: #4a4a5a; } .menu-lines::before { width: 20px; } .menu-lines > span { width: 14px; } .menu-lines::after { width: 17px; } /* Чекбокс согласия — цвет бренда */ .consent-check { padding-left: 1.75em; } .consent-check .form-check-input { margin-left: -1.75em; width: 1.15em; height: 1.15em; cursor: pointer; } .consent-check .form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); } .consent-check .form-check-input:focus { box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.15); border-color: var(--color-primary); } .consent-check .form-check-label { color: var(--color-text-muted); line-height: 1.45; cursor: pointer; } /* Кнопка-пилюля второго уровня (как .role-seg construction) */ .btn-soft { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--vc-control-h); padding: 0 16px; border-radius: var(--vc-radius); border: 1px solid var(--vc-border); box-shadow: var(--vc-shadow); background: #fff; color: var(--color-text); font-size: 15px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color .15s ease; } .btn-soft:active { background: var(--vc-press-bg); color: var(--color-text); } .btn-soft:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25); } .btn-soft:disabled { opacity: .5; cursor: not-allowed; } .btn-soft > i { font-size: 16px; line-height: 1; } /* Статусы (пастельные бейджи construction) */ .status-badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; padding: 2px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.5; } .status-badge.is-active, .status-badge.is-done { background: var(--vc-success-soft); color: var(--vc-success-strong); } .status-badge.is-closed, .status-badge.is-expired, .status-badge.is-new { background: var(--vc-warn-soft); color: var(--vc-warn-strong); } .status-badge.is-cancelled { background: #f0f3f7; color: #4a5568; } .status-badge.is-neutral { background: #f0f3f7; color: #4a5568; } .code-badge { display: inline-flex; align-items: center; background: var(--vc-primary-soft); color: var(--color-text); font-weight: 400; font-size: 13px; letter-spacing: .3px; border-radius: 8px; padding: 2px 8px; flex-shrink: 0; white-space: nowrap; } /* ── Окно чата: шапка внутри окна (заголовок слева, иконки действий справа) ── */ .conn-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .conn-dot.is-on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .15); } .conn-dot.is-off { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .15); } /* ── Чат: лента сообщений и поле ввода внутри окна страницы ───────── */ .chat-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 0; display: flex; flex-direction: column; gap: 16px; } /* Иконка-кнопка — тот же вид, что у кнопок проекта (кнопка отправки, пилюли): белый фон, серая рамка #dee2e6, тень 0 0 8px rgba(0,0,0,.06), радиус 16px */ .icon-btn { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--vc-border); border-radius: var(--vc-radius); background: #fff; box-shadow: var(--vc-shadow); color: var(--color-text); font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .15s ease; } .icon-btn:active { background: var(--vc-press-bg); } .icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25); } .icon-btn:disabled { opacity: .5; cursor: not-allowed; } .icon-btn > i { line-height: 1; } .app-topbar .icon-btn { width: var(--vc-topbtn); height: var(--vc-topbtn); } /* Компактная строка-уведомление под шапкой окна (подтверждение e-mail) */ .chat-notice { flex-shrink: 0; display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-top: 12px; border-radius: 12px; background: var(--vc-primary-soft); color: var(--vc-primary-strong); font-size: 13px; line-height: 1.45; border: 1px solid #d6e6ff; } .chat-notice > i { font-size: 16px; line-height: 1.3; flex-shrink: 0; } .chat-notice .btn-link-inline { background: none; border: 0; padding: 0; color: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; } /* Сообщения — как в чате Claude: крупный читаемый шрифт; ответ ассистента — обычный текст на всю ширину (без пузыря и значка), реплика человека — светлый пузырь справа */ .chat-msg { display: flex; } .chat-msg.is-mine { justify-content: flex-end; } .chat-bubble { font-size: 16px; line-height: 1.6; color: var(--color-text); white-space: pre-wrap; word-break: break-word; } .chat-msg.is-mine .chat-bubble { max-width: 85%; padding: 10px 16px; border-radius: 20px; background: #f1f2f4; } .chat-msg.is-agent .chat-bubble { max-width: 100%; padding: 0 2px; } /* Логические абзацы ответа ассистента — с отступом примерно в строку между ними */ .chat-p { margin: 0 0 .75em; } .chat-p:last-child { margin-bottom: 0; } .chat-meta { font-size: 12px; color: var(--color-text-light); margin-top: -10px; padding-left: 2px; } .chat-meta.is-notice { color: var(--vc-warn-strong); } .quick-replies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; } .quick-reply { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1; background: var(--vc-primary-soft); color: var(--vc-primary-strong); transition: background-color .15s ease; } .quick-reply:active { background: #d6e6ff; } .quick-reply.is-secondary { background: #fff; color: var(--color-text); border-color: var(--vc-border); } .quick-reply.is-secondary:active { background: var(--vc-press-bg); } .quick-reply:disabled { opacity: .5; cursor: default; } .typing-dots { display: inline-flex; gap: 3px; padding: 4px 0; } .typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-light); animation: vcTyping 1.2s ease-in-out infinite; } .typing-dots span:nth-child(2) { animation-delay: .15s; } .typing-dots span:nth-child(3) { animation-delay: .3s; } @keyframes vcTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } } /* «Уменьшение движения» в системе: общее правило гасит все анимации — точки застывали, и было непонятно, что ассистент думает. Оставляем мягкое мерцание без подпрыгивания */ @keyframes vcTypingFade { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .typing-dots span { animation: vcTypingFade 1.4s ease-in-out infinite !important; } .typing-dots span:nth-child(2) { animation-delay: .2s !important; } .typing-dots span:nth-child(3) { animation-delay: .4s !important; } } .chat-compose { flex-shrink: 0; padding: 0; } /* сверху — отступ ленты (16px), снизу — отступ страницы */ /* Поле ввода как в Claude: одна скруглённая рамка; сверху текст на всю ширину (растёт до 180px, дальше — прокрутка внутри), внизу справа — микрофон и отправка */ .composer { background: #fff; border: 1px solid var(--vc-border); border-radius: var(--vc-composer-radius); box-shadow: var(--vc-shadow); cursor: text; transition: border-color .15s ease; } .composer:focus-within { border-color: #c5cfdb; } .composer-input { display: block; width: 100%; min-height: 40px; max-height: 180px; padding: 14px 16px 4px; border: 0; outline: 0; resize: none; overflow-y: hidden; background: transparent; box-shadow: none; font-size: 16px; line-height: 22px; color: var(--color-text); /* 16px — iOS не увеличивает страницу */ } .composer-input::placeholder { color: var(--color-text-light); } .composer-bar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 4px 8px 8px; cursor: default; } .composer-btn { width: 36px; height: 36px; flex-shrink: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--color-text); font-size: 18px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } .composer-btn > i { line-height: 1; } .composer-btn:active { background: var(--vc-press-bg); } /* Отправка: бледная, пока поле пустое; синий круг — когда есть текст */ .composer-send { background: #e9edf2; color: #fff; } .composer-send.is-ready { background: var(--color-primary); } .composer-send.is-ready:active { background: #0a53be; } .composer-send:disabled { opacity: .55; cursor: default; } /* Микрофон: идёт запись — красный значок и пульсирующее кольцо */ .chat-mic-btn.is-listening { color: var(--color-danger); background: rgba(220, 53, 69, .08); animation: vcMicPulse 1.4s ease-out infinite; } .chat-mic-btn.is-busy { opacity: .5; cursor: progress; } /* запись распознаётся */ @keyframes vcMicPulse { 0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, .35); } 100% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); } } .tts-state { font-size: 12px; color: var(--color-text-light); } .tts-state.is-on { color: var(--vc-success-strong); font-weight: 600; } /* Гостевая главная — без прокрутки на любом экране: значок, заголовок, текст, «Войти» и ссылки видны целиком, рисунок занимает оставшееся место (пропорции сохраняются; не выше половины экрана) */ .chat-guest { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; text-align: center; padding: 0 0 12px; } .chat-guest > :not(.chat-guest-art) { flex-shrink: 0; } .chat-guest-art { flex: 1 1 0; min-height: 90px; max-height: 50dvh; display: flex; justify-content: center; margin-bottom: 12px; user-select: none; pointer-events: none; } .chat-guest-art img { display: block; width: 100%; height: 100%; object-fit: contain; } .chat-guest-icon { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px; background: var(--vc-primary-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 28px; } .chat-guest h2, .chat-guest-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; } /* Подзаголовок гостевой главной — мелкий серый текст под заголовком */ .chat-guest-sub { font-size: 13px; line-height: 1.5; color: var(--color-text-muted); max-width: 400px; margin: 0 auto 20px; padding: 0 16px; } .chat-guest-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 16px; font-size: 13px; } .chat-guest-links a { color: var(--color-text-muted); } /* ── Публичные страницы объявлений (поиск) ───────────────────────── */ .pub-crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--color-text-light); margin-bottom: 10px; } .pub-crumbs a { color: var(--color-text-muted); text-decoration: none; } .pub-h1 { font-size: 1.4rem; font-weight: 600; line-height: 1.3; margin: 0 0 6px; } .pub-item { text-decoration: none; color: inherit; align-items: flex-start; } .pub-item:active { background: var(--vc-press-bg); } .pub-item > .bi { margin-top: 2px; } .pub-item-title { display: block; font-weight: 600; font-size: 14px; } .pub-item-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; color: var(--color-text); margin: 2px 0; } .pub-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 0; } .pub-pager .quick-reply { text-decoration: none; } .pub-links { display: flex; flex-wrap: wrap; gap: 8px; } .pub-links .quick-reply { text-decoration: none; gap: 6px; } .pub-cta { text-align: center; margin: 24px 0 8px; padding: 18px 16px; background: #f6f8fa; border-radius: var(--vc-radius); } .pub-cta p { font-size: 13px; color: var(--color-text-muted); margin: 0 auto 12px; max-width: 460px; } .seo-steps { font-size: 14px; line-height: 1.6; padding-left: 20px; color: var(--color-text); } .seo-steps li + li { margin-top: 6px; } .pub-facts { margin: 0; } .pub-facts .pub-fact { display: block; } .pub-fact dt { font-size: 12px; font-weight: 400; color: var(--color-text-light); margin: 0 0 2px; } .pub-fact dd { font-size: 15px; margin: 0; overflow-wrap: anywhere; } .pub-lead { font-size: 15px; line-height: 1.6; color: var(--color-text-muted); margin: 6px 0 8px; } .pub-cta-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 12px; font-size: 13px; } .pub-cta-links a { color: var(--color-text-muted); } .pub-text { font-size: 15px; line-height: 1.6; white-space: pre-line; margin: 12px 0 16px; } .pub-gone { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; margin: 10px 0; border-radius: 12px; background: var(--vc-warn-soft); color: var(--vc-warn-strong); font-size: 14px; } .chat-guest p { font-size: 14px; color: var(--color-text-muted); margin-bottom: 20px; } .chat-guest .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .chat-guest .actions > * { min-width: 160px; } .chat-guest-privacy { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--color-text-muted); } /* ── Модалки (шапка bg-cal — как construction) ─────────────────── */ .list-card { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 16px; margin-bottom: 8px; background: #fff; border: 1px solid var(--vc-border); border-radius: var(--vc-radius); box-shadow: var(--vc-shadow); cursor: pointer; transition: background-color .15s ease; } .list-card:last-child { margin-bottom: 0; } .list-card:active { background: var(--vc-press-bg); } .list-card-text { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-card-chev { color: #b6bfca; font-size: 13px; flex-shrink: 0; } .detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; } .ad-detail-desc { font-size: 15px; line-height: 1.55; color: var(--color-text); padding: 4px 2px 12px; word-break: break-word; white-space: pre-wrap; } .ad-detail-meta { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--color-border); padding-top: 12px; font-size: 14px; } .ad-detail-meta a { color: var(--vc-primary-strong); font-weight: 400; text-decoration: none; } /* Поля объявления: подпись слева, значение справа (на узких — подпись над значением) */ .ad-phone { font-size: 15px; margin-bottom: 6px; } .ad-phone a { text-decoration: none; } .ad-page-link { font-size: 14px; margin-bottom: 6px; } .chat-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; } .ad-detail-meta .muted { color: var(--color-text-muted); font-size: 13px; } .empty-state { text-align: center; padding: 24px 8px; font-size: 14px; color: var(--color-text-muted); } /* Баланс */ .balance-hero { text-align: center; padding: 8px 0 4px; } .balance-hero-label { font-size: 14px; color: var(--color-text-muted); margin-bottom: 2px; } .balance-hero-value { font-size: 2.25rem; font-weight: 700; line-height: 1.15; color: var(--color-text); } .balance-hero-turns { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; } .tariff-note { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); background: #f6f8fa; border-radius: 12px; padding: 8px 12px; } .row-list { background: #fff; border: 1px solid var(--vc-border); border-radius: var(--vc-radius); box-shadow: var(--vc-shadow); padding: 4px 0; } .row-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; } .row-item + .row-item { border-top: 1px solid var(--color-border); } .row-item-main { flex: 1 1 auto; min-width: 0; font-size: 14px; } .row-item-sub { font-size: 12px; color: var(--color-text-light); } .row-item-side { flex: 0 0 auto; text-align: right; display: flex; align-items: center; gap: 8px; } .amount { font-weight: 600; font-size: 14px; white-space: nowrap; } .amount.is-plus { color: var(--vc-success-strong); } .amount.is-minus { color: #4a5568; } .preset-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 12px; } /* Админка */ .admin-request { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 16px; } .admin-request + .admin-request { border-top: 1px solid var(--color-border); } .admin-request-main { flex: 1 1 220px; min-width: 0; } .admin-request-name { font-weight: 600; font-size: 15px; } .admin-request-sub { font-size: 13px; color: var(--color-text-muted); } .admin-request-actions { display: flex; gap: 8px; } .admin-request-actions .auth-submit { height: 40px; padding: 0 18px; font-size: 14px; } /* Главная админки: разделы карточками — иконка по центру, подпись под ней. Шесть разделов — по три в ряд (два ровных ряда); на самых узких экранах — по два (три ровных ряда) */ /* по три в ряд; неполный последний ряд — по центру */ .admin-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; --cols: 3; } .admin-cards > .admin-card { flex: 0 0 calc((100% - (var(--cols) - 1) * 10px) / var(--cols)); } @media (max-width: 359.98px) { .admin-cards { --cols: 2; } } .admin-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 104px; padding: 16px 8px 14px; text-align: center; text-decoration: none; color: var(--color-text); background: #fff; border: 1px solid var(--vc-border); border-radius: var(--vc-radius); box-shadow: var(--vc-shadow); } .admin-card:hover { color: var(--color-text); border-color: #d5dae1; } .admin-card:active { background: var(--vc-press-bg); } .admin-card .bi { font-size: 26px; line-height: 1; color: #4a4a5a; } .admin-card-label { font-size: 13px; line-height: 1.25; font-weight: 500; overflow-wrap: anywhere; } .admin-card-count { position: absolute; top: 8px; right: 8px; } @media (min-width: 576px) { .admin-cards { gap: 14px; } .admin-cards > .admin-card { flex-basis: calc((100% - (var(--cols) - 1) * 14px) / var(--cols)); } .admin-card { min-height: 118px; } .admin-card .bi { font-size: 30px; } .admin-card-label { font-size: 14px; } } /* Разделы админки — те же «пилюли», что быстрые ответы чата */ .admin-tabs { display: flex; flex-wrap: wrap; gap: 8px; } .admin-tabs .quick-reply { text-decoration: none; gap: 6px; } .admin-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--vc-warn-soft); color: var(--vc-warn-strong); font-size: 12px; font-weight: 600; } /* Строка списка — кнопка (открывает правку) */ .row-item-btn { width: 100%; border: 0; background: transparent; text-align: left; color: inherit; } .row-item-btn:active { background: var(--vc-press-bg); } /* Поле внутри карточки-поля (.auth-field): скругляет карточка, а не само поле. Общее правило style.css «.modal input.form-control { border-radius: 16px }» у поля без отступов (высота ~22px) обрезало курсор и первую букву у левого края — виден был кусочек «(». */ .auth-field .form-control, .auth-field .form-select, .modal .auth-field input.form-control, .modal .auth-field select.form-select { border-radius: 0 !important; } .modal .auth-field select.form-select { height: auto; } /* Телефон (partials/phone_field.php): страна и номер — два поля в одну строку */ .phone-row { display: flex; gap: 8px; } .phone-code-card { flex: 0 0 auto; } .phone-number-card { flex: 1 1 auto; min-width: 0; } .phone-code-box { position: relative; width: 124px; gap: 6px; } .phone-code-view { flex: 1 1 auto; font-size: 15px; font-weight: 500; color: #1a1a2e; white-space: nowrap; font-variant-numeric: tabular-nums; } .phone-code-caret { font-size: 13px; color: #343a40; -webkit-text-stroke: .7px currentColor; } /* Настоящий список — прозрачный, на всю карточку: открывается как обычно, текст не виден */ .phone-code { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; font-size: 16px; } .phone-number { font-variant-numeric: tabular-nums; letter-spacing: .3px; } .dict-field { margin-bottom: 10px; } /* Админка ассистента: тексты инструкций — моноширинно, с переносами */ .agent-pre { white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.55; background: #f6f8fa; border: 1px solid var(--vc-border); border-radius: 12px; padding: 12px 14px; max-height: 60vh; overflow-y: auto; color: var(--color-text); } .modal .btn-link-inline { background: none; border: 0; padding: 0; color: var(--color-primary); text-decoration: underline; cursor: pointer; } .agent-editor { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; border-radius: 12px; min-height: 280px; } .agent-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; } .agent-setting + .agent-setting { border-top: 1px solid var(--color-border); } .agent-setting-text { min-width: 0; font-size: 14px; } /* Строка с длинным описанием: выбор — под текстом, на всю ширину */ .agent-setting-stack { flex-direction: column; align-items: stretch; gap: 8px; } .agent-setting-stack .form-select { border-radius: 12px; font-size: 14px; } .agent-set-num { width: 96px; flex-shrink: 0; border-radius: 12px; } .agent-q-col { flex: 0 0 64px; text-align: right; font-size: 14px; } .agent-quality-head .agent-q-col { font-size: 12px; color: var(--color-text-muted); } .dict-label { display: block; font-size: 12px; color: var(--color-text-muted); margin: 0 0 4px 4px; } /* Политика конфиденциальности / страницы с текстом */ .prose { font-size: 15px; line-height: 1.65; color: var(--color-text); } .prose h2 { font-size: 1.05rem; font-weight: 600; margin: 24px 0 8px; } .prose p, .prose ul { margin-bottom: 12px; } .prose ul { padding-left: 20px; } /* Ошибки */ .error-page { text-align: center; padding: 48px 16px; } .error-page-icon { width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 16px; background: #f6f8fa; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; font-size: 30px; } .error-page h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 8px; } .error-page p { font-size: 15px; color: var(--color-text-muted); margin-bottom: 20px; } .error-detail { font-size: 12px; color: var(--color-danger); white-space: pre-wrap; text-align: left; max-width: 640px; margin: 0 auto 20px; } /* Меню-переключатель (seg_nav() в helpers.php) — один на весь сайт: серая дорожка, активный пункт — белая пилюля с тенью; высота пункта — как у кнопок шапки (--vc-topbtn); пунктов много — прокрутка вбок без полосы; мало — растягиваются на всю ширину */ .seg-nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: 16px; border-radius: 999px; } .seg-nav::-webkit-scrollbar { display: none; } .seg-nav-track { display: flex; width: max-content; min-width: 100%; gap: 2px; padding: 4px; border-radius: 999px; background: #e9ebef; } .seg-nav-item { flex: 1 0 auto; text-align: center; white-space: nowrap; text-decoration: none; padding: calc((var(--vc-topbtn) - 17px) / 2) 18px; line-height: 17px; border-radius: 999px; font-size: 15px; font-weight: 600; color: #6b7280; transition: background-color .15s ease, color .15s ease; } /* Счётчик у пункта — как счётчики разделов админки (.admin-tab-count) */ .seg-nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin: -2px 0 -2px 6px; padding: 0 6px; border-radius: 999px; background: var(--vc-warn-soft); color: var(--vc-warn-strong); font-size: 12px; font-weight: 600; vertical-align: middle; } /* Пункт один — своей ширины слева, дорожка дальше пустая: видно, что это меню с одной вкладкой */ .seg-nav-item:only-child { flex: 0 0 auto; } .seg-nav-item:hover, .seg-nav-item:focus-visible { color: #1a1a2e; } .seg-nav-item:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.25); } .seg-nav-item.is-active { background: #fff; color: #1a1a2e; box-shadow: 0 1px 3px rgba(16, 24, 40, .14), 0 1px 2px rgba(16, 24, 40, .06); } @media (max-width: 419.98px) { .seg-nav-item { padding-left: 14px; padding-right: 14px; font-size: 14px; } } /* «ИИ и речь» → обзор: строка состояния — слева что, справа цветная метка; строка — ссылка */ .status-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--color-text); text-decoration: none; } .status-row + .status-row { border-top: 1px solid var(--color-border); } a.status-row:hover, a.status-row:focus-visible { color: var(--color-text); background: #f7f8fa; } a.status-row:active { background: var(--vc-press-bg); } .status-row-text { flex: 1 1 auto; min-width: 0; } .status-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; } .status-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .status-pill.is-on { background: #e7f6ec; color: #18794e; } .status-pill.is-off { background: #eef0f3; color: #6b7280; } .status-pill.is-bad { background: #fdecec; color: #c62828; } /* «Сборка»: места инструкции, зависящие от языка ответа */ .agent-lang-part { background: #fff3c4; color: inherit; font: inherit; padding: 0 2px; border-radius: 3px; } /* ── Адаптив ────────────────────────────────────────────────────── */ @media (max-width: 575.98px) { .page-head h1 { font-size: 1.25rem; } .app-body { padding: 16px 0; } .icon-btn { width: 38px; height: 38px; font-size: 17px; } :root { --vc-topbtn: 38px; } .chat-notice { padding: 8px 12px; } .chat-scroll { padding: 14px 0; } .composer-input { padding: 12px 14px 2px; } .balance-hero-value { font-size: 1.875rem; } .row-item { padding: 10px 12px; gap: 8px; } .admin-request-actions { width: 100%; } .admin-request-actions .auth-submit { flex: 1 1 0; } } /* Узкие экраны: логотип и до пяти кнопок шапки — в одну строку */ @media (max-width: 419.98px) { .app-topbar { gap: 6px; } .app-topbar .app-topbar-actions { gap: 5px; } :root { --vc-topbtn: 36px; } .app-topbar .icon-btn { font-size: 17px; } .app-brand { font-size: 19px; } } @media (max-width: 359.98px) { .app-topbar .app-topbar-actions { gap: 4px; } :root { --vc-topbtn: 33px; } .app-topbar .icon-btn { font-size: 16px; } .app-brand { font-size: 17px; letter-spacing: 0; } } /* ═══════════════════════════════════════════════════════════════════ Без эффектов наведения: кнопки меняют вид ТОЛЬКО в момент нажатия и возвращаются к исходному, когда кнопку отпускают. (Заодно на телефонах не «залипает» hover после касания.) Базовые :hover из style.css (копия construction) здесь нейтрализуются — сам style.css не правим, чтобы он оставался общим с construction. ═══════════════════════════════════════════════════════════════════ */ .auth-submit:hover { background: var(--color-primary); color: #fff; } .auth-submit:active { background: #0a53be; } .auth-submit-danger:hover { background: var(--color-danger); } .auth-submit-danger:active { background: #bb2d3b; } .auth-submit-success:hover { background: var(--color-success); } .auth-submit-success:active { background: #218838; } .navbar-glass .nav-link:hover { background: transparent !important; color: #4a4a5a !important; } .navbar-glass .nav-link:active { background: rgba(0, 0, 0, 0.06) !important; } .navbar-glass .navbar-toggler:hover { background: rgba(0, 0, 0, 0.04); } .navbar-glass .navbar-toggler:active { background: rgba(0, 0, 0, 0.1); } .dropdown-item:hover, .dropdown-item:focus { background: transparent; color: var(--color-text); } .dropdown-item:active { background: var(--vc-press-bg); color: var(--color-text); } /* Окно выбора языка: варианты — как кнопка языка в шапке (.icon-btn): белый фон, рамка, тень, скругление 16px; выбранный — синяя рамка и текст */ #languageModal .lang-option { background: #fff; color: var(--color-text); border: 1px solid var(--vc-border); border-radius: var(--vc-radius); box-shadow: var(--vc-shadow); font-size: 14px; transition: background-color .15s ease; /* внутренние отступы — как у кнопок шапки: строка 17px (как иконка), сверху и снизу (высота кнопки шапки − рамки − 17) / 2 — на телефоне 8,5px, высота та же 36px */ min-height: 0; line-height: 17px; padding: calc((var(--vc-topbtn) - 19px) / 2) 8px; } #languageModal .lang-option:hover { background: #fff; color: var(--color-text); } #languageModal .lang-option:active { background: var(--vc-press-bg); color: var(--color-text); } #languageModal .lang-option.active, #languageModal .lang-option.active:hover { background: #fff; color: var(--color-primary); border-color: var(--color-primary); font-weight: 600; } #languageModal .lang-option.active:active { background: var(--vc-press-bg); } .lang-badge:hover { background: #f0f3f7; color: #5f6b7a; } .lang-badge.active:hover { background: #e2e6ec; color: #1a1a2e; } .lang-badge:not(.active):active { background: #e6eaf0; } .wt-view-btn:not(.active):active { background: var(--vc-press-bg); } .chat-send-btn:active { background: var(--vc-press-bg) !important; } .btn-close:hover { opacity: var(--bs-btn-close-opacity); } .btn-close:active { opacity: var(--bs-btn-close-hover-opacity); } /* Таблица данных для администратора под ответом ассистента: заголовок, прокрутка вбок на узком экране */ .data-card { width: 100%; max-width: 100%; border: 1px solid var(--color-border); border-radius: 14px; background: #fff; overflow: hidden; } .data-title { padding: 10px 14px 8px; font-size: 14px; font-weight: 600; color: #1a1a2e; } .data-scroll { overflow-x: auto; max-height: 420px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .data-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; } .data-table th, .data-table td { padding: 7px 12px; text-align: left; white-space: nowrap; border-top: 1px solid var(--color-border); vertical-align: top; } .data-table th { position: sticky; top: 0; background: #f6f7f9; font-weight: 600; color: #5b6573; font-size: 12px; } .data-table td { color: #1a1a2e; max-width: 320px; overflow: hidden; text-overflow: ellipsis; user-select: text; } .data-caption { padding: 7px 14px 9px; font-size: 12px; color: #8a94a1; border-top: 1px solid var(--color-border); } /* Страница чата и всех окон — белая: окно без своего фона (как в чатах ИИ) */ body { background: #fff; } /* Иконки меню — один размер: у всех место 16px, глиф по центру строки. Глифы шрифта нарисованы по-разному: у большинства бо́льшая сторона 16px, у «человечка» и «волны» — 12–13px (выглядели мельче) — им крупнее шрифт, чтобы бо́льшая сторона тоже была 16px */ .dropdown-menu-voice .dropdown-item > .bi { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 24px; vertical-align: top; line-height: 1; /* 24px — высота строки пункта */ } .dropdown-menu-voice .dropdown-item > .bi::before { vertical-align: 0; } .dropdown-menu-voice .dropdown-item > .bi-person { font-size: 21.3px; } .dropdown-menu-voice .dropdown-item > .bi-soundwave { font-size: 19.7px; } /* Поле с вводом в окне (partials/modal_field.php): строка как обычное поле формы */ .mfield { position: relative; } .mfield-trigger { display: block; text-align: left; background: #fff; color: inherit; cursor: pointer; } .mfield-trigger:focus-visible { outline: 0; border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1) !important; } .mfield-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; color: #1a1a2e; font-variant-numeric: tabular-nums; } .mfield-text.is-empty { color: #8a94a1; font-weight: 400; } .mfield-caret { flex-shrink: 0; font-size: 13px; color: #343a40; -webkit-text-stroke: .7px currentColor; } /* Значение для формы: невидимо, но проверяется браузером («обязательно») */ .mfield-value { position: absolute; left: 16px; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; } .mfield.is-invalid .mfield-trigger, .card.is-invalid { border-color: var(--color-danger) !important; } /* Список (