/* MOROK-SB-1105: чат поддержки (SmartBTN, Mia) в стиле «Глаз».
   Фон почти чёрный, текст тёплый белый, акцент янтарный; подписи — IBM Plex Mono в разрядку, как на сайте.
   Всё внутри #smartbtn_widget_view / значка виджета, на страницу не влияет. Цвета дублируют настройки проекта в SmartBTN
   (ops/smartbtn/build-config.py): здесь — только то, что настройками не задаётся (шрифты, пузыри, поле ввода, рамки). */
#smartbtn_widget_view {
  --m-bg: #0c0c0d; --m-bg2: #141416; --m-bg3: #1d1d20; --m-ink: #ece7e3; --m-mute: #a29c95;
  --m-line: rgba(236, 231, 227, .14); --m-line2: rgba(236, 231, 227, .26); --m-acc: #f2b84b; --m-acc-ink: #17120a;
  --m-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --m-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
#smartbtn_widget_view,
#smartbtn_widget_view .new_smartbtn_widget_view_width { font-family: var(--m-sans) !important; }
/* окно — сам #smartbtn_widget_view (.new_smartbtn_widget_view): прямые углы с малым скруглением, как пиксельные кнопки сайта */
#smartbtn_widget_view.new_smartbtn_widget_view, #smartbtn_widget_view .new_smartbtn_widget_view_width {
  background: var(--m-bg) !important; border: 1px solid var(--m-line2) !important; border-radius: 6px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(242, 184, 75, .06) !important; overflow: hidden;
}
/* шапка: MOROK моно в разрядку, подпись — мелкая моно-строка */
#smartbtn_widget_view .new_smartbtn_widget_view__header {
  background: var(--m-bg2) !important; border-bottom: 1px solid var(--m-line) !important; border-radius: 0 !important;
}
#smartbtn_widget_view .smartbtn-chat-main__container-head__title {
  font: 600 13px/1.3 var(--m-mono) !important; letter-spacing: .32em !important; text-transform: uppercase; color: var(--m-ink) !important;
}
#smartbtn_widget_view .smartbtn-chat-main__container-head__text {
  font: 500 10.5px/1.4 var(--m-mono) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--m-mute) !important;
}
#smartbtn_widget_view .smartbtn-chat-main__container-head-operators-one-operator-name {
  font: 500 10px/1.3 var(--m-mono) !important; letter-spacing: .14em !important; text-transform: uppercase; color: var(--m-mute) !important;
}
#smartbtn_widget_view .smartbtn-chat-main__container-head-operators-one-operator-img {
  background-color: var(--m-bg) !important; background-size: cover !important; border: 1px solid var(--m-line2) !important;
}
#smartbtn_widget_view .smartbtn-chat-main__container-head-operators-one-operator-status-online { background: var(--m-acc) !important; }
#smartbtn_widget_view .new_smartbtn_widget_view__close svg path,
#smartbtn_widget_view .smartbtn-widget-chat-menu__toggle { color: var(--m-ink) !important; fill: currentColor; stroke: currentColor; }
/* тело и сообщения */
#smartbtn_widget_view .new_smartbtn_widget_chat__messages,
#smartbtn_widget_view .smartbtn-chat-main__container-chat { background: var(--m-bg) !important; }
#smartbtn_widget_view .new_smartbtn_widget_operator-message__message,
#smartbtn_widget_view .new_smartbtn_widget_operator-message_greeting .new_smartbtn_widget_operator-message__message {
  background: var(--m-bg3) !important; background-image: none !important; color: var(--m-ink) !important;
  border: 1px solid var(--m-line) !important; border-radius: 2px 12px 12px 12px !important;
  font: 400 14.5px/1.5 var(--m-sans) !important; letter-spacing: -.003em !important;
}
#smartbtn_widget_view .new_smartbtn_widget_operator-message__message a { color: var(--m-acc) !important; }
#smartbtn_widget_view [class*="client-message__message"] {
  background: var(--m-acc) !important; background-image: none !important; color: var(--m-acc-ink) !important;
  border: 0 !important; border-radius: 12px 2px 12px 12px !important; font: 500 14.5px/1.5 var(--m-sans) !important;
}
#smartbtn_widget_view [class*="message__time"], #smartbtn_widget_view [class*="message__info"] {
  font-family: var(--m-mono) !important; letter-spacing: .08em !important; color: var(--m-mute) !important;
}
/* быстрые вопросы — моно-кнопки с тонкой рамкой */
#smartbtn_widget_view .smartbtn-widget-quick-phrase {
  background: transparent !important; color: var(--m-ink) !important; border: 1px solid var(--m-line2) !important;
  border-radius: 3px !important; box-shadow: none !important;
  font: 500 11px/1.3 var(--m-mono) !important; letter-spacing: .08em !important; text-transform: uppercase; padding: 8px 10px !important;
}
#smartbtn_widget_view .smartbtn-widget-quick-phrase:hover { border-color: var(--m-acc) !important; color: var(--m-acc) !important; transform: none !important; }
#smartbtn_widget_view .smartbtn-widget-quick-phrase:focus-visible { outline: 2px solid var(--m-acc) !important; outline-offset: 2px; }
/* поле ввода: тёмная полоса, янтарная кнопка отправки */
#smartbtn_widget_view .smartbtn-chat-main__container-socials-and-post-message-new-message {
  background: var(--m-bg2) !important; background-image: none !important; border-top: 1px solid var(--m-line) !important;
}
#smartbtn_widget_view .new_smartbtn_widget_message-area__textarea {
  background: var(--m-bg3) !important; color: var(--m-ink) !important; border: 1px solid var(--m-line) !important;
  border-radius: 3px !important; font: 400 16px/1.4 var(--m-sans) !important; caret-color: var(--m-acc);
}
#smartbtn_widget_view .new_smartbtn_widget_message-area__textarea::placeholder { color: var(--m-mute) !important; opacity: 1; }
#smartbtn_widget_view .new_smartbtn_widget_message-area__textarea:focus { border-color: var(--m-acc) !important; outline: none !important; }
#smartbtn_widget_view .new_smartbtn_widget_message-area__send-btn { background: var(--m-acc) !important; border-radius: 3px !important; }
#smartbtn_widget_view .new_smartbtn_widget_message-area__send-btn svg path { fill: var(--m-acc-ink) !important; }
#smartbtn_widget_view .smartbtn-chat-main__container-socials-and-post-message-new-message-svg svg path { fill: var(--m-mute) !important; }
/* значок: глаз на чёрном, тонкое янтарное кольцо */
[data-smartbtn-device-profile-launcher] {
  background-color: var(--m-bg, #0c0c0d) !important; border: 0 !important;
  box-shadow: 0 0 0 1px rgba(242, 184, 75, .55), 0 10px 28px rgba(0, 0, 0, .55) !important;
}

/* открытое мобильное меню — значок и язычок прячем, у меню свои кнопки внизу */
html.menu-open [data-smartbtn-device-profile-launcher] { visibility: hidden !important; }

/* ——— вход в чат: узкая полоска «ЧАТ» у правого края (assets/smartbtn.js, MOROK-20261105-CHAT-STRIP) ———
   Круглый значок виджета не показываем. Полоска поверх всего на странице и в кабинете, вёрстку не сдвигает.
   Кнопка #morok-chat-tab — прозрачная зона нажатия у края; внутри .mct-panel 44 px шириной, в покое сдвинута вправо
   так, что видна только полоска 20 px. При наведении/фокусе панель выезжает (transform) — видна надпись. */
[data-smartbtn-device-profile-launcher] { visibility: hidden !important; pointer-events: none !important; }
#morok-chat-tab {
  position: fixed; right: 0; bottom: 20px; z-index: 2147483000; width: 24px; height: 72px; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: pointer; overflow: visible; -webkit-tap-highlight-color: transparent;
}
#morok-chat-tab[hidden] { display: none; }
.mct-panel {
  position: absolute; top: 0; right: 0; width: 44px; height: 100%; display: block;
  background: #f2b84b; color: #17120a;
  /* пиксельные углы, как у .btn сайта (site.css: clip-path var(--pxc), шаг var(--px)), но ступеньки только с открытой
     (левой) стороны — у края экрана углы прямые */
  clip-path: polygon(0 calc(var(--px, 4px) * 2), var(--px, 4px) calc(var(--px, 4px) * 2), var(--px, 4px) var(--px, 4px), calc(var(--px, 4px) * 2) var(--px, 4px), calc(var(--px, 4px) * 2) 0,
    100% 0, 100% 100%,
    calc(var(--px, 4px) * 2) 100%, calc(var(--px, 4px) * 2) calc(100% - var(--px, 4px)), var(--px, 4px) calc(100% - var(--px, 4px)), var(--px, 4px) calc(100% - var(--px, 4px) * 2), 0 calc(100% - var(--px, 4px) * 2));
  transform: translateX(24px); transition: transform .18s ease-out; will-change: transform; pointer-events: none;
}
.mct-full, .mct-mini { position: absolute; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; line-height: 1; white-space: nowrap; }
.mct-full { left: 17px; font-size: 10px; letter-spacing: .22em; opacity: 0; transition: opacity .12s ease-out; }
.mct-mini { left: 5px; font-size: 9.5px; letter-spacing: .22em; transition: opacity .12s ease-out; }
/* мышь и трекпад: зона нажатия 32 px — левее оверлейной полосы прокрутки macOS (~15 px); раскрывается при наведении */
@media (hover: hover) and (pointer: fine) {
  #morok-chat-tab { width: 32px; }
  #morok-chat-tab:hover, #morok-chat-tab:focus-visible { width: 44px; }
  #morok-chat-tab:hover .mct-panel, #morok-chat-tab:focus-visible .mct-panel { transform: translateX(0); }
  #morok-chat-tab:hover .mct-full, #morok-chat-tab:focus-visible .mct-full { opacity: 1; }
  #morok-chat-tab:hover .mct-mini, #morok-chat-tab:focus-visible .mct-mini { opacity: 0; }
  #morok-chat-tab:hover .mct-panel { background: #ffc860; }
}
#morok-chat-tab:focus-visible { outline: none; }
#morok-chat-tab:focus-visible .mct-panel { box-shadow: inset 0 0 0 2px #17120a; transform: translateX(0); }
#morok-chat-tab:focus-visible .mct-full { opacity: 1; }
#morok-chat-tab:focus-visible .mct-mini { opacity: 0; }
html.menu-open #morok-chat-tab { display: none; }
@media (max-width: 1023px) { body:has(#shell:not([hidden])) #morok-chat-tab { bottom: calc(84px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .mct-panel, .mct-full, .mct-mini { transition: none; } }