/* ServCall visual layer — aligned with Bolt OS slate/indigo design language. */

:root {
    color-scheme: light;
    --sc-bg: #f1f5f9;
    --sc-bg-accent: #eef2ff;
    --sc-surface: #ffffff;
    --sc-surface-raised: #ffffff;
    --sc-surface-soft: #f8fafc;
    --sc-surface-hover: #f1f5f9;
    --sc-text: #0f172a;
    --sc-text-soft: #475569;
    --sc-text-muted: #64748b;
    --sc-border: #e2e8f0;
    --sc-border-strong: #cbd5e1;
    --sc-primary: #4f46e5;
    --sc-primary-hover: #4338ca;
    --sc-primary-soft: #eef2ff;
    --sc-primary-text: #3730a3;
    --sc-success: #059669;
    --sc-success-soft: #ecfdf5;
    --sc-warning: #d97706;
    --sc-danger: #dc2626;
    --sc-shadow: 0 12px 32px rgba(15, 23, 42, .10);
    --sc-shadow-soft: 0 2px 8px rgba(15, 23, 42, .06);
    --sc-radius: 12px;
    --sc-radius-sm: 8px;
}

html[data-sc-theme="dark"] {
    color-scheme: dark;
    --sc-bg: #0b1120;
    --sc-bg-accent: #111827;
    --sc-surface: #111827;
    --sc-surface-raised: #172033;
    --sc-surface-soft: #0f172a;
    --sc-surface-hover: #1e293b;
    --sc-text: #e2e8f0;
    --sc-text-soft: #cbd5e1;
    --sc-text-muted: #94a3b8;
    --sc-border: #263348;
    --sc-border-strong: #334155;
    --sc-primary: #818cf8;
    --sc-primary-hover: #a5b4fc;
    --sc-primary-soft: rgba(99, 102, 241, .16);
    --sc-primary-text: #c7d2fe;
    --sc-success: #34d399;
    --sc-success-soft: rgba(16, 185, 129, .14);
    --sc-warning: #fbbf24;
    --sc-danger: #f87171;
    --sc-shadow: 0 18px 46px rgba(0, 0, 0, .35);
    --sc-shadow-soft: 0 4px 12px rgba(0, 0, 0, .22);
}

html,
body {
    background: var(--sc-bg) !important;
    color: var(--sc-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    content: "";
    background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--sc-primary) 11%, transparent), transparent 32%),
        radial-gradient(circle at 88% 92%, color-mix(in srgb, #8b5cf6 8%, transparent), transparent 30%),
        var(--sc-bg);
}

html[data-sc-theme] .pageContainer {
    background: var(--sc-surface) !important;
    box-shadow: var(--sc-shadow) !important;
}

html[data-sc-theme] .leftContentTable,
html[data-sc-theme] .rightContent,
html[data-sc-theme] .streamSection,
html[data-sc-theme] .profileContainer,
html[data-sc-theme] .highlightSection,
html[data-sc-theme] .callRecording,
html[data-sc-theme] .UiWindow,
html[data-sc-theme] .UiWindowField {
    border-color: var(--sc-border) !important;
    background-color: var(--sc-surface) !important;
    color: var(--sc-text) !important;
}

html[data-sc-theme] .profileContainer {
    border-bottom: 1px solid var(--sc-border) !important;
}

html[data-sc-theme] .streamSectionBackground,
html[data-sc-theme] .wallpaperBackground {
    background-color: var(--sc-surface-soft) !important;
    background-image:
        radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--sc-primary) 8%, transparent), transparent 28%),
        linear-gradient(145deg, var(--sc-surface-soft), var(--sc-bg-accent)) !important;
}

html[data-sc-theme] .sectionBorderBottom { border-bottom-color: var(--sc-border) !important; }
html[data-sc-theme] .sectionBorderTop { border-top-color: var(--sc-border) !important; }
html[data-sc-theme] .hrline { background: var(--sc-border) !important; }

html[data-sc-theme] .buddy,
html[data-sc-theme] .buddySelected,
html[data-sc-theme] .buddyActiveCall,
html[data-sc-theme] .buddyActiveCallHollding {
    height: 44px;
    margin: 3px 5px 5px;
    padding: 8px;
    border: 1px solid transparent !important;
    border-radius: var(--sc-radius-sm) !important;
    color: var(--sc-text) !important;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

html[data-sc-theme] .buddy:hover {
    background: var(--sc-surface-hover) !important;
    border-color: var(--sc-border) !important;
}

html[data-sc-theme] .buddySelected {
    border-color: color-mix(in srgb, var(--sc-primary) 28%, var(--sc-border)) !important;
    border-left: 3px solid var(--sc-primary) !important;
    background: var(--sc-primary-soft) !important;
    box-shadow: var(--sc-shadow-soft);
}

html[data-sc-theme] .buddyActiveCall {
    border-color: color-mix(in srgb, var(--sc-success) 34%, var(--sc-border)) !important;
    border-left: 3px solid var(--sc-success) !important;
    background: var(--sc-success-soft) !important;
}

html[data-sc-theme] .buddyActiveCallHollding {
    border-left: 3px solid var(--sc-warning) !important;
    background: var(--sc-surface-hover) !important;
}

html[data-sc-theme] .buddyIcon,
html[data-sc-theme] .buddyIconSmall,
html[data-sc-theme] .lineIcon {
    border-color: var(--sc-surface) !important;
    background-color: var(--sc-border-strong) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .16) !important;
}

html[data-sc-theme] .contactNameText { color: var(--sc-text) !important; font-weight: 600; }
html[data-sc-theme] .presenceText,
html[data-sc-theme] .contactDate,
html[data-sc-theme] .messageDate,
html[data-sc-theme] .sc-inline-status,
html[data-sc-theme] .sc-inline-route,
html[data-sc-theme] .sc-inline-media-item { color: var(--sc-text-muted) !important; }

html[data-sc-theme] .searchClean {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--sc-border) !important;
    border-radius: var(--sc-radius-sm) !important;
    background: var(--sc-surface-soft) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
}

html[data-sc-theme] .searchClean::before,
html[data-sc-theme] .searchClean input { color: var(--sc-text-muted) !important; }

html[data-sc-theme] input,
html[data-sc-theme] textarea,
html[data-sc-theme] select,
html[data-sc-theme] .UiInputText,
html[data-sc-theme] .chatMessage,
html[data-sc-theme] .sc-inline-text {
    border: 1px solid var(--sc-border) !important;
    border-radius: var(--sc-radius-sm) !important;
    outline: none !important;
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

html[data-sc-theme] input:focus,
html[data-sc-theme] textarea:focus,
html[data-sc-theme] select:focus,
html[data-sc-theme] .UiInputText:focus,
html[data-sc-theme] .sc-inline-text:focus {
    border-color: var(--sc-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-primary) 16%, transparent) !important;
}

html[data-sc-theme] button,
html[data-sc-theme] .UiButtonBar button,
html[data-sc-theme] .UiWindowButtonBar button {
    border-radius: var(--sc-radius-sm) !important;
    font-family: inherit !important;
    box-shadow: none;
}

html[data-sc-theme] .roundButtons {
    border: 1px solid transparent !important;
    color: var(--sc-primary) !important;
    transition: .16s ease;
}

html[data-sc-theme] .roundButtons:hover {
    border-color: var(--sc-border) !important;
    background: var(--sc-surface-hover) !important;
    color: var(--sc-primary-hover) !important;
}

html[data-sc-theme] .dialTextInput {
    border-bottom: 1px solid var(--sc-border-strong) !important;
    color: var(--sc-text) !important;
}

html[data-sc-theme] .dialButtons {
    border: 1px solid var(--sc-border) !important;
    background: var(--sc-surface-raised) !important;
    color: var(--sc-text) !important;
    box-shadow: var(--sc-shadow-soft);
}

html[data-sc-theme] .dialButtons:hover {
    border-color: color-mix(in srgb, var(--sc-primary) 35%, var(--sc-border)) !important;
    background: var(--sc-primary-soft) !important;
    color: var(--sc-primary-text) !important;
}

html[data-sc-theme] .dialButtonsDial,
html[data-sc-theme] .answerButton {
    background: var(--sc-success) !important;
    color: #fff !important;
}

html[data-sc-theme] .hangupButton,
html[data-sc-theme] .rejectButton {
    background: var(--sc-danger) !important;
    color: #fff !important;
}

html[data-sc-theme] .UiTextHeading {
    padding: 10px 2px 8px;
    border-bottom: 1px solid var(--sc-border) !important;
    color: var(--sc-text) !important;
    font-family: inherit !important;
    font-weight: 650;
}

html[data-sc-theme] .UiTextHeadingIcon {
    border-radius: 6px;
    background: var(--sc-primary) !important;
    color: #fff !important;
}

html[data-sc-theme] .UiButtonBar button,
html[data-sc-theme] .UiWindowButtonBar button {
    border: 1px solid var(--sc-primary) !important;
    background: var(--sc-primary) !important;
    color: #fff !important;
    font-weight: 650;
}

html[data-sc-theme] .UiButtonBar button:hover,
html[data-sc-theme] .UiWindowButtonBar button:hover {
    border-color: var(--sc-primary-hover) !important;
    background: var(--sc-primary-hover) !important;
}

html[data-sc-theme] .ui-widget,
html[data-sc-theme] .ui-widget input,
html[data-sc-theme] .ui-widget button,
html[data-sc-theme] .ui-widget select,
html[data-sc-theme] .ui-widget textarea {
    font-family: inherit !important;
}

html[data-sc-theme] .ui-dialog {
    overflow: hidden;
    border: 1px solid var(--sc-border-strong) !important;
    border-radius: var(--sc-radius) !important;
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
    box-shadow: var(--sc-shadow) !important;
}

html[data-sc-theme] .ui-dialog .ui-dialog-titlebar {
    border: 0 !important;
    border-bottom: 1px solid var(--sc-border) !important;
    border-radius: 0 !important;
    background: var(--sc-surface-soft) !important;
    color: var(--sc-text) !important;
}

html[data-sc-theme] .ui-dialog .ui-dialog-content,
html[data-sc-theme] .ui-dialog .ui-dialog-buttonpane {
    border-color: var(--sc-border) !important;
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
}

html[data-sc-theme] .ui-dialog .ui-button {
    border: 1px solid var(--sc-border-strong) !important;
    border-radius: var(--sc-radius-sm) !important;
    background: var(--sc-surface-raised) !important;
    color: var(--sc-text) !important;
}

html[data-sc-theme] .ui-widget-overlay {
    background: rgba(15, 23, 42, .58) !important;
    opacity: 1 !important;
    backdrop-filter: blur(2px);
}

html[data-sc-theme] .theirChatMessageText,
html[data-sc-theme] .ourChatMessageText,
html[data-sc-theme] .sc-timeline-entry {
    border: 1px solid var(--sc-border);
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

html[data-sc-theme] .theirChatMessageText {
    background: var(--sc-surface) !important;
    color: var(--sc-text) !important;
}

html[data-sc-theme] .ourChatMessageText {
    border-color: color-mix(in srgb, var(--sc-primary) 22%, var(--sc-border));
    background: var(--sc-primary-soft) !important;
    color: var(--sc-primary-text) !important;
}

html[data-sc-theme] .sc-sms-label,
html[data-sc-theme] .sc-inline-route strong,
html[data-sc-theme] .hiddenBuddiesText,
html[data-sc-theme] .sc-inline-media a { color: var(--sc-primary) !important; }

html[data-sc-theme] .sc-sms-host > .sc-inline-composer {
    border-top-color: var(--sc-border) !important;
    background: color-mix(in srgb, var(--sc-surface) 94%, transparent) !important;
    backdrop-filter: blur(12px);
}

html[data-sc-theme] audio.sc-call-recording {
    border-radius: 999px;
    background: var(--sc-surface-soft);
}

html[data-sc-theme] .sc-call-operator-answered { color: var(--sc-success) !important; }
html[data-sc-theme] .sc-call-operator-busy,
html[data-sc-theme] .sc-call-operator-busy_offered,
html[data-sc-theme] .sc-call-operator-busy_no_answer,
html[data-sc-theme] .sc-call-operator-no_answer { color: var(--sc-warning) !important; }

html[data-sc-theme] .sc-contact-phone-copy {
    color: var(--sc-text-muted) !important;
}

html[data-sc-theme] .sc-contact-phone-copy:hover,
html[data-sc-theme] .sc-contact-phone-copy:focus-visible {
    background: var(--sc-primary-soft) !important;
    color: var(--sc-primary-text) !important;
}

html[data-sc-theme] .sc-contact-phone-copy.copied {
    background: var(--sc-success-soft) !important;
    color: var(--sc-success) !important;
}

html[data-sc-theme] .cleanScroller,
html[data-sc-theme] .scroller {
    scrollbar-color: var(--sc-border-strong) transparent;
}

html[data-sc-theme] .cleanScroller::-webkit-scrollbar-thumb,
html[data-sc-theme] .scroller::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--sc-border-strong);
}

.sc-theme-toggle {
    position: fixed;
    z-index: 95;
    top: 10px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 5px 9px 5px 6px;
    border: 1px solid color-mix(in srgb, var(--sc-border-strong) 78%, transparent);
    border-radius: 999px !important;
    background: color-mix(in srgb, var(--sc-surface) 86%, transparent);
    color: var(--sc-text-soft);
    box-shadow: var(--sc-shadow-soft);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.sc-theme-toggle:hover {
    transform: translateY(-1px);
    border-color: var(--sc-primary);
    background: var(--sc-surface-raised);
}

.sc-theme-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--sc-primary), #8b5cf6);
    color: #fff;
    font-size: 13px;
    box-shadow: 0 3px 9px color-mix(in srgb, var(--sc-primary) 32%, transparent);
}

.sc-theme-toggle__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    .sc-theme-toggle { right: 7px; top: 7px; padding-right: 6px; }
    .sc-theme-toggle__label { display: none; }
    html[data-sc-theme] .buddy,
    html[data-sc-theme] .buddySelected,
    html[data-sc-theme] .buddyActiveCall,
    html[data-sc-theme] .buddyActiveCallHollding { margin-right: 2px; margin-left: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-theme-toggle,
    html[data-sc-theme] .buddy { transition: none; }
}

/* Встроенный режим (iframe кабинета Bolt OS, класс ставит index.html).
   Настройки Audio & Video решено держать у IT (владелец 08/19/2026): во встроенном телефоне
   секция скрыта, работают устройства по умолчанию; отдельно открытый телефон
   (web-phone.servcall.me своим окном) сохраняет её для операторов. */
html.sc-embedded div.UiTextHeading[onclick*="Audio_Video_Html"],
html.sc-embedded #Audio_Video_Html {
  display: none !important;
}

/* Внешность во встроенном режиме = ТОЛЬКО аватар (владелец 08/19/2026: «внешность — это аватар»).
   Должность, телефоны и почта — учётные данные, их место в карточке сотрудника (IT/HR), а не в
   телефоне: поля скрыты вместе с подписями. Значения при этом не теряются — Save пишет то, что
   уже хранится, скрытие только визуальное. */
html.sc-embedded div.UiText:has(+ div > #Configure_Profile_TitleDesc),
html.sc-embedded div:has(> #Configure_Profile_TitleDesc),
html.sc-embedded div.UiText:has(+ div > #Configure_Profile_Mobile),
html.sc-embedded div:has(> #Configure_Profile_Mobile),
html.sc-embedded div.UiText:has(+ div > #Configure_Profile_Email),
html.sc-embedded div:has(> #Configure_Profile_Email),
html.sc-embedded div.UiText:has(+ div > #Configure_Profile_Number1),
html.sc-embedded div:has(> #Configure_Profile_Number1),
html.sc-embedded div.UiText:has(+ div > #Configure_Profile_Number2),
html.sc-embedded div:has(> #Configure_Profile_Number2) {
  display: none !important;
}

/* Встроенный режим: верх телефона без «заполнения» (владелец 08/19/2026 — «фоточки и всё это
   заполнение, ну нафига»). Прячем свой аватар, кнопку добавления контакта, шестерёнку настроек
   (после чисток в ней оставалась одна «Внешность») и переключатель темы. Остаются: кнопка
   набора, точка регистрации и список контактов. Отдельно открытый web-phone не тронут. */
html.sc-embedded #UserProfilePic,
html.sc-embedded #BtnAddSomeone,
html.sc-embedded #SettingsMenu,
html.sc-embedded .sc-theme-toggle {
  display: none !important;
}
/* Шапка «имя + Online» внутри телефона уходит: то же самое кабинет пишет строкой рядом со словом
   Phone (владелец 08/19/2026), а здесь она занимала верх рамки. НО не весь ряд: в нём живёт
   кнопка набора (#BtnFreeDial) — единственный путь обратно к клавишам из списка контактов.
   Прячем именно имя, статус и аватар, ряд оставляем и ужимаем по содержимому. */
/* Полоса шапки убрана ЦЕЛИКОМ (владелец 08/19/2026: «эта информация уже выведена возле надписи
   Phone»). Возврат к клавишам не потерян: его взяла на себя кнопка Recent & SMS (работает в обе
   стороны) и плавающая кнопка над списком контактов — см. servcall-theme.js. */
html.sc-embedded .profileContainer,
html.sc-embedded #UserProfile {
  display: none !important;
}

/* Плавающий возврат к набору: виден только когда открыт список контактов. */
html.sc-embedded .sc-back-to-dialpad {
  /* fixed, а не absolute: у контейнера списка нет своего позиционирования, и абсолютная кнопка
     уезжала за видимую часть (проверено 08/19/2026). Внутри рамки fixed считается от неё же. */
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 0;
  font-size: 20px;
  background: var(--sc-primary) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .18);
  z-index: 5;
}
/* НЕ трогать высоту td.streamSection: 50 px — несущая величина этой табличной раскладки, при
   height:auto верхняя секция растягивается на пол-экрана и дайлпад уезжает вниз (проверено
   08/19/2026). Узкая полоса сверху — цена, которую платим за кнопку возврата к набору. */

/* ДАЙЛПАД КАК У ТЕЛЕФОНА (владелец 08/19/2026, референс — родная звонилка iPhone: «кнопки
   мелкие, сделай крупнее, в нашем стиле»). Крупные круглые клавиши, цифра во весь рост, буквы
   подписью под ней, зелёная круглая кнопка вызова. Только во встроенном режиме: у отдельно
   открытого телефона операторов ширина окна другая и трогать её незачем.
   Размер задан через clamp() — на узком телефоне клавиши не вылезают за рамку, на широком
   экране не разъезжаются в гигантские блины. */
html.sc-embedded .dialButtons {
  width: clamp(64px, 19vw, 86px) !important;
  height: clamp(64px, 19vw, 86px) !important;
  border-radius: 999px !important;
  font-size: clamp(26px, 7vw, 34px) !important;
  font-weight: 400 !important;
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 !important;
  border: 0 !important;
  /* Клавиша должна ЧИТАТЬСЯ на фоне панели: в тёмной теме это чуть более светлый круг (как у
     телефона), в светлой — серый круг с тонким контуром, иначе он сливается с белым фоном. */
  background: var(--sc-surface-hover) !important;
  box-shadow: inset 0 0 0 1px var(--sc-border) !important;
  transition: transform .08s ease, background .12s ease;
}
html[data-sc-theme="dark"].sc-embedded .dialButtons {
  background: var(--sc-surface-raised) !important;
  box-shadow: none !important;
}
/* Кнопка вызова — исключение из правила выше: у него специфичность выше, и без этой строки
   зелёный круг в тёмной теме становился такой же серой клавишей, как цифры. */
html[data-sc-theme="dark"].sc-embedded .dialButtonsDial {
  background: var(--sc-success) !important;
  color: #fff !important;
}
html.sc-embedded .dialButtons:active {
  transform: scale(.94);
  background: var(--sc-primary-soft) !important;
}
/* Разметка внутри клавиши: у Browser Phone цифра лежит в <div>, буквы в <span> с жёсткими
   line-height/margin из phone.css — их и переопределяем, иначе цифра съезжает вверх. */
html.sc-embedded .dialButtons div {
  font-size: clamp(26px, 7vw, 34px) !important;
  line-height: 1 !important;
  margin: 0 !important;
}
html.sc-embedded .dialButtons span {
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .12em;
  color: var(--sc-text-muted) !important;
  margin: 0 !important;
}
/* Кнопка вызова — крупный зелёный круг, как на телефоне. */
html.sc-embedded .dialButtonsDial {
  width: clamp(66px, 20vw, 88px) !important;
  height: clamp(66px, 20vw, 88px) !important;
  font-size: clamp(24px, 6vw, 30px) !important;
  background: var(--sc-success) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--sc-success) 35%, transparent) !important;
}
html.sc-embedded .dialButtonsDial:hover { background: var(--sc-success) !important; color: #fff !important; }
/* Поле набора — крупная строка номера над клавишами, без рамки-инпута. */
html.sc-embedded .dialTextInput {
  width: min(78%, 320px) !important;
  height: 48px !important;
  font-size: 28px !important;
  text-align: center;
  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  letter-spacing: .04em;
}

/* «Recent & SMS» — третья кнопка в ряду с вызовом и видео (владелец 08/19/2026). Не зелёная:
   зелёный в телефоне означает «начать разговор», и красить им переход к списку — врать цветом. */
html.sc-embedded .sc-recent-sms {
  width: clamp(66px, 20vw, 88px) !important;
  height: clamp(66px, 20vw, 88px) !important;
  margin-right: 20px;
  font-size: clamp(22px, 5.5vw, 28px) !important;
  background: var(--sc-primary-soft) !important;
  color: var(--sc-primary) !important;
  box-shadow: none !important;
}
html[data-sc-theme="dark"].sc-embedded .sc-recent-sms {
  background: var(--sc-surface-raised) !important;
  color: var(--sc-primary) !important;
}

/* ВЫСОТУ td.streamSection НЕ ТРОГАТЬ. Пробовали дважды 08/19/2026: и height:auto, и height:0
   растягивают верхнюю секцию на пол-экрана и увозят клавиши вниз — в этой табличной раскладке
   50 px несущие. Пустая полоска сверху остаётся; она пустая, но дешевле сломанного экрана. */

/* Подпись «+» под нулём: она же — обещание, что удержание введёт плюс. */
html.sc-embedded .sc-plus-hint {
  font-size: 13px !important;
  letter-spacing: 0 !important;
  color: var(--sc-text-soft) !important;
}

/* Кнопка стирания (⌫) справа от номера. В телефоне она есть, но показывается только по событию
   ввода с клавиатуры — а при наборе клавишами дайлпада value меняется программно, событие не
   возникает, и кнопки человек не видит (владелец 08/19/2026). Во встроенном режиме показываем
   всегда: пустое поле стирать не больно, а искать кнопку в момент опечатки — больно. */
html.sc-embedded #dialDeleteKey {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  margin-left: 6px;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 20px !important;
  background: var(--sc-surface-hover) !important;
  color: var(--sc-text-soft) !important;
  vertical-align: middle;
}
html.sc-embedded #dialDeleteKey:hover {
  background: var(--sc-primary-soft) !important;
  color: var(--sc-primary) !important;
}
/* Поле номера ужимаем, чтобы кнопка встала рядом, а не переносилась на свою строку. */
html.sc-embedded .dialTextInput {
  width: min(62%, 240px) !important;
}