/* Экран «Мессенджер» (.ms-): список открытых линий как в Битриксе и чат. Цвета — токены base.css. */

.ms-screen,
.ms-chat,
.ms-viewer {
  --ms-on: #fff; /* значок/текст на залитой кнопке и на чёрном фоне просмотра фото — в обеих темах белый */
  --ms-viewer-bg: rgba(0, 0, 0, 0.92);
}
/* Подписи авторов (ИИ, робот, с телефона) — цвет пузыря, но темнее/светлее: контраст с фоном пузыря ≥ 4.5:1 в обеих темах.
   .ms-rs — шторка оценки ответа ИИ (она в слое поверх, вне .ms-chat). */
.ms-chat,
.ms-rs {
  --ms-ai-ink: #5b3fb8;
  --ms-robot-ink: #2b7a3d;
  --ms-phone-ink: #8a5a00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ms-chat,
  :root:not([data-theme='light']) .ms-rs {
    --ms-ai-ink: #c5b3ff;
    --ms-robot-ink: #8fd19e;
    --ms-phone-ink: #f0b44c;
  }
}
:root[data-theme='dark'] .ms-chat,
:root[data-theme='dark'] .ms-rs {
  --ms-ai-ink: #c5b3ff;
  --ms-robot-ink: #8fd19e;
  --ms-phone-ink: #f0b44c;
}

/* ---------- список ---------- */
.ms-top .topbar-row { gap: 0; }
.ms-logo { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--ms-on); display: grid; place-items: center; flex: none; margin-right: 10px; }
.ms-search { margin: 4px 0 0; height: 44px; }
.ms-search input { height: 42px; }
/* Свой крестик 44 px вместо мелкого системного */
.ms-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.ms-search-x { width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; color: var(--text-3); flex: none; }
.ms-chips { padding-top: 12px; }
/* Чипы папок на вид 36 px, а нажимаются полосой 44 px (невидимый запас сверху и снизу) */
.ms-chips .chip::before { content: ''; position: absolute; inset: -6px -5px; }
/* Выбранный бренд — отдельной строкой под папками: виден целиком и сбрасывается одним касанием */
.ms-fbar { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 8px; padding-left: 12px; border-radius: 10px; background: var(--primary-soft); color: var(--text-2); font-size: 15px; }
.ms-fbar > svg.ic { color: var(--link); flex: none; }
.ms-fbar b { font-weight: 600; color: var(--text); }
.ms-fbar-x { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; color: var(--link); font-size: 15px; }
.ms-fbar-x:active { opacity: 0.6; }

.ms-scroll { background: var(--surface); }
.ms-list { padding-bottom: 24px; }
.ms-group { padding: 12px 16px 4px; font-size: 15px; color: var(--text-3); }

.ms-row { display: flex; align-items: center; gap: 12px; padding-left: 14px; color: var(--text); background: var(--surface); transition: background 120ms; }
.ms-row:active { background: var(--surface-2); }
.ms-row.on { background: var(--primary-soft); }
.ms-av { position: relative; flex: none; display: inline-grid; }
.ms-av .ch-ic { right: -3px; bottom: -3px; }
.ms-meta { flex: 1; min-width: 0; padding: 9px 14px 10px 0; border-bottom: 0.5px solid var(--line); }
.ms-row:last-child .ms-meta { border-bottom: 0; }
.ms-l1 { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.ms-wait { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex: none; }
.ms-name { flex: 0 1 auto; min-width: 0; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Канал занимает только остаток строки после имени — имя не режется ради названия канала */
.ms-ch { flex: 1 1 0; min-width: 0; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-date { padding-left: 4px; flex: none; font-size: 13px; color: var(--text-3); }
/* Превью всегда занимает 2 строки (как в Битриксе): все строки списка одной высоты */
.ms-l2 { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; }
.ms-prev { flex: 1; min-width: 0; min-height: 38px; font-size: 15px; line-height: 19px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ms-pwho { color: var(--text-2); }
.ms-none { color: var(--text-4); }
.ms-unread { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--primary); color: var(--ms-on); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.ms-closed { flex: none; font-size: 12px; color: var(--text-4); }
.ms-more { display: grid; place-items: center; min-height: 64px; }
.ms-more .btn { height: 44px; }

.ms-spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--primary); animation: spin 700ms linear infinite; display: inline-block; }
.ms-spin.light { border-color: color-mix(in srgb, var(--ms-on) 35%, transparent); border-top-color: var(--ms-on); }

/* ---------- чат ---------- */
.ms-chat .detail-body { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; background: var(--chat-bg); }
.ms-chat-col { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--chat-bg); }

.ms-hlink { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 12px; color: var(--text); }
.ms-hlink[role='link'] { cursor: pointer; transition: opacity 120ms; }
.ms-hlink[role='link']:active { opacity: 0.6; }
.ms-hav { position: relative; flex: none; display: inline-grid; }
.ms-hav .ch-ic { right: -4px; bottom: -4px; }
.ms-htext { display: flex; flex-direction: column; min-width: 0; }
.ms-hname { font-size: 17px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-hsub { display: flex; gap: 6px; font-size: 13px; color: var(--text-3); white-space: nowrap; min-width: 0; }
.ms-phone { flex: none; }

.ms-hch { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.ms-deal { flex: none; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 4px 0 12px; background: var(--surface); border-bottom: 0.5px solid var(--line); }
.ms-deal-link { flex: 1; min-width: 0; min-height: 52px; display: flex; align-items: center; gap: 10px; color: var(--text); }
.ms-deal-link:active { opacity: 0.7; }
.ms-deal-ic { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--surface-3); color: var(--text-3); }
.ms-deal-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ms-deal-name { font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-deal-sub { font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-deal-go { color: var(--text-4); display: grid; flex: none; }
.ms-deal.none { gap: 8px; padding: 6px 12px; }
.ms-deal-btn { flex: 1; min-width: 0; min-height: 44px; border-radius: 10px; background: var(--surface-2); color: var(--link); font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.ms-deal-btn:active { background: var(--surface-3); }

.ms-feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.ms-msgs { display: flex; flex-direction: column; gap: 4px; padding: 6px 10px 12px; }
.ms-older { display: grid; place-items: center; min-height: 48px; }
.ms-start { align-self: center; font-size: 13px; color: var(--text-4); padding: 8px 0 2px; }
.ms-day { align-self: center; margin: 8px 0 4px; scroll-margin-top: 64px; }
.ms-day span { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 13px; color: var(--text-2); background: color-mix(in srgb, var(--surface) 82%, transparent); }

.ms-msg { position: relative; max-width: min(82%, 560px); padding: 7px 10px 5px 12px; border-radius: 16px; font-size: 16px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--shadow-card); }
.ms-msg.in { align-self: flex-start; background: var(--bubble-in); border-bottom-left-radius: 6px; }
.ms-msg.out { align-self: flex-end; background: var(--bubble-out); border-bottom-right-radius: 6px; }
.ms-msg.out.robot { background: var(--bubble-robot); }
.ms-msg.out.ai { background: var(--bubble-ai); }
.ms-msg.out.phone { background: var(--bubble-phone); }
.ms-msg.note { align-self: center; max-width: min(92%, 600px); background: var(--bubble-note); border: 1px dashed color-mix(in srgb, var(--warning-text) 45%, transparent); }
.ms-who { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--link); margin-bottom: 2px; white-space: nowrap; }
.ms-who-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ms-who .av { width: 16px; height: 16px; font-size: 8px; font-weight: 700; }
.ms-who > svg.ic { flex: none; }
.ms-msg.robot .ms-who { color: var(--ms-robot-ink); }
.ms-msg.ai .ms-who { color: var(--ms-ai-ink); }
.ms-msg.phone .ms-who { color: var(--ms-phone-ink); }
.ms-msg.note .ms-who { color: var(--warning-text); }
/* «ИИ», «не отправлено» — маленькая плашка цвета подписи; «с телефона» — обычным начертанием рядом с именем */
.ms-badge { flex: none; padding: 0 5px; border-radius: 6px; font-size: 11px; line-height: 15px; font-weight: 700; letter-spacing: 0.02em; background: color-mix(in srgb, currentColor 14%, transparent); }
.ms-tag { flex: none; font-weight: 500; }
.ms-spark { stroke-width: 2; }

/* Черновик ИИ «ИИ предложил бы»: пунктирный «призрак» без тени — видно, что клиент его не получал */
.ms-msg.ms-ghost { background: color-mix(in srgb, var(--bubble-ai) 40%, transparent); border: 1.5px dashed color-mix(in srgb, var(--ms-ai-ink) 50%, transparent); box-shadow: none; color: var(--text-2); }
.ms-ghost .ms-who { color: var(--ms-ai-ink); }
.ms-ghost .ms-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-ghost.open .ms-text { display: block; }
.ms-ghost.long { cursor: pointer; }
.ms-ghost.long:active { opacity: 0.75; }
/* Время и модель черновика — --text-2: на полупрозрачном фиолетовом «призраке» --text-3/--text-4 давали 3:1 и 1,8:1 */
.ms-ghost .ms-mt { justify-content: flex-start; color: var(--text-2); }
.ms-ghost-more { color: var(--ms-ai-ink); font-weight: 600; }
.ms-model { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

/* 👍 / 👎 под ответом ИИ: спокойные серые, пока не оценено; поставленная оценка — в цвете */
.ms-rv { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: min(82%, 560px); margin: 0 2px 6px; }
.ms-rv-row { display: flex; gap: 6px; }
.ms-rv-b { position: relative; min-width: 44px; height: 28px; padding: 0 10px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text-3); font-size: 13px; line-height: 1; transition: background 120ms, border-color 120ms, transform 100ms var(--ease-out); }
/* Нажимается полосой 44 px: невидимый запас сверху и снизу */
.ms-rv-b::before { content: ''; position: absolute; inset: -8px -3px; }
.ms-rv-b:active { transform: scale(0.94); }
.ms-rv-e { font-size: 15px; filter: grayscale(1); opacity: 0.7; transition: filter 120ms, opacity 120ms; }
.ms-rv-b.on .ms-rv-e { filter: none; opacity: 1; }
.ms-rv-b.up.on { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 55%, transparent); color: var(--ms-robot-ink); }
.ms-rv-b.down.on { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger-text); }
.ms-rv-n { font-weight: 600; }
.ms-rv-note { max-width: 100%; padding: 6px 10px; border-radius: 12px; border-left: 3px solid var(--ms-ai-ink); background: var(--surface); color: var(--text-2); font-size: 14px; line-height: 1.35; text-align: left; }
/* Обрезка — на внутреннем блоке: у самой кнопки четвёртая строка выглядывала в нижний отступ */
.ms-rv-nt { white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ms-rv-nl { font-weight: 600; color: var(--ms-ai-ink); }

/* Строка «Все · ИИ · Люди · Роботы» под сделкой: фильтр ленты, она же легенда цветов */
.ms-ab { flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 12px; background: var(--surface); border-bottom: 0.5px solid var(--line); }
/* Фильтры — во всю свою ширину, сводка забирает остаток и переносится второй строкой; прокрутка — только на совсем узком экране */
.ms-ab-chips { flex: 0 1 auto; min-width: 0; display: flex; gap: 5px; overflow-x: auto; padding: 7px 2px; scrollbar-width: none; }
.ms-ab-chips::-webkit-scrollbar { display: none; }
/* Поля 8 px и зазор 6 px — четыре фильтра и сводка «ИИ: 128 ответов, 12 👎» помещаются в 390 px без обрезки «Роботы» */
.ms-ab-chip { height: 30px; padding: 0 8px; border-radius: 15px; font-size: 14px; gap: 5px; }
.ms-ab-chip::before { inset: -7px -2px; }
.ms-ab-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ms-ab-dot.ai { background: var(--ms-ai-ink); }
.ms-ab-dot.people { background: var(--link); }
.ms-ab-dot.robots { background: var(--ms-robot-ink); }
/* Сводка берёт только остаток строки (основа 0) и переносится второй строкой; фильтры не ужимаются, пока она
   не дошла до своего min-content (с flex-shrink фильтры теряли часть ширины при любой нехватке — «Роботы» обрезались) */
.ms-ab-sum { flex: 1 1 0; min-width: min-content; margin-left: auto; font-size: 12px; line-height: 15px; color: var(--text-3); text-align: right; }

/* Шторка «Оценка ответа ИИ» */
.ms-rs { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.ms-rs-quote { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bubble-ai); color: var(--text); font-size: 15px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 9.5em; overflow-y: auto; }
.ms-rs-quote > svg.ic { flex: none; margin-top: 3px; color: var(--ms-ai-ink); }
.ms-rs-rate { display: flex; gap: 8px; }
.ms-rs-opt { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); font-size: 16px; }
.ms-rs-opt.up.on { background: var(--success-soft); border: 1.5px solid var(--success); color: var(--text); }
.ms-rs-opt.down.on { background: var(--danger-soft); border: 1.5px solid var(--danger); color: var(--text); }
.ms-rs-l { margin-top: 4px; font-size: 13px; color: var(--text-3); }
.ms-rs textarea { width: 100%; min-height: 96px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px; line-height: 1.4; resize: none; outline: none; }
.ms-rs textarea:focus { border-color: var(--primary); }
.ms-rs-hint { font-size: 13px; color: var(--text-3); }
.ms-rs-del { align-self: flex-start; min-height: 44px; padding: 0 2px; color: var(--danger-text); font-size: 15px; }
.ms-text a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.ms-mt { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; line-height: 14px; color: var(--text-3); white-space: nowrap; }
.ms-st { display: inline-flex; align-items: center; }
.ms-st.read { color: var(--primary); }
.ms-st2 { display: inline-flex; margin-left: -8px; }
.ms-st.test { font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; padding: 0 4px; border: 1px solid var(--line-2); border-radius: 4px; line-height: 13px; }
.ms-st.fail { color: var(--danger-text); gap: 2px; }
.ms-sys { align-self: center; max-width: 92%; margin: 4px 0; padding: 4px 10px; border-radius: 10px; font-size: 13px; text-align: center; color: var(--text-3); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.ms-sys-t { margin-left: 6px; font-size: 11px; color: var(--text-4); }

.ms-atts { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0 -4px 4px -6px; }
.ms-img { display: block; border-radius: 12px; overflow: hidden; max-width: 260px; background: var(--surface-3); }
.ms-img img { display: block; max-width: 100%; max-height: 320px; object-fit: cover; }
.ms-img.wait { width: 200px; height: 140px; display: grid; place-items: center; }
.ms-file { display: flex; align-items: center; gap: 10px; min-height: 48px; max-width: 260px; padding: 6px 10px 6px 6px; border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); white-space: normal; }
.ms-file.off { opacity: 0.6; }
.ms-file-ic { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--primary); color: var(--ms-on); }
.ms-file-t { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.25; }
.ms-file-s { font-size: 12px; color: var(--text-3); }

.ms-viewer { position: fixed; inset: 0; z-index: 70; background: var(--ms-viewer-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: fade-in 160ms var(--ease-out); }
.ms-viewer img { max-width: 100%; max-height: calc(100% - 120px); object-fit: contain; }
.ms-viewer-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 4px; padding: calc(var(--safe-top) + 6px) 8px 6px 16px; color: var(--ms-on); font-size: 15px; }
.ms-viewer-bar .icon-btn { color: var(--ms-on); }

.ms-bar { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--surface); border-top: 0.5px solid var(--line); font-size: 15px; color: var(--text-2); }
.ms-bar .btn { height: 44px; }
.ms-bar.closed { color: var(--text-3); }

.ms-compose { flex: none; background: var(--surface); border-top: 0.5px solid var(--line-2); padding-bottom: var(--safe-bottom); }
.ms-notebar { display: flex; align-items: center; gap: 8px; padding: 0 2px 0 14px; min-height: 44px; font-size: 14px; background: var(--warning-soft); color: var(--warning-text); }
.ms-nb-x { width: 44px; height: 44px; display: grid; place-items: center; flex: none; color: var(--warning-text); }
.ms-files { display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px 0; scrollbar-width: none; }
.ms-files::-webkit-scrollbar { display: none; }
.ms-fchip { flex: none; display: flex; align-items: center; gap: 8px; max-width: 230px; padding: 4px 0 4px 4px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface-2); }
.ms-fchip img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.ms-fchip-t { display: flex; flex-direction: column; min-width: 0; font-size: 13px; line-height: 1.25; }
.ms-fchip button { width: 40px; height: 44px; display: grid; place-items: center; color: var(--text-3); flex: none; }
.ms-input { display: flex; align-items: flex-end; gap: 2px; padding: 6px 8px; }
.ms-ib { position: relative; width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: var(--text-3); cursor: pointer; transition: background 120ms, color 120ms; }
.ms-ib:active { background: var(--surface-3); }
.ms-ib.on { color: var(--warning-text); background: var(--warning-soft); }
.ms-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ms-input textarea { flex: 1; min-width: 0; min-height: 40px; max-height: 140px; margin: 2px 4px 2px 2px; padding: 9px 14px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--surface-2); color: var(--text); font-size: 16px; line-height: 20px; resize: none; outline: none; }
.ms-input textarea:focus { border-color: var(--primary); }
.ms-compose.is-note textarea { background: var(--bubble-note); border-color: color-mix(in srgb, var(--warning-text) 50%, transparent); }
.ms-send { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--primary); color: var(--ms-on); transition: background 120ms, transform 100ms var(--ease-out); }
.ms-send:active { transform: scale(0.92); }
.ms-send.note { background: var(--warning-text); color: var(--surface); }
.ms-send.off { background: var(--line-2); color: var(--surface); cursor: default; }
.ms-send.off:active { transform: none; }

/* Шторка «Сделка для чата» */
.ms-dp { min-height: 60px; }
.ms-dp.on { color: var(--link); }
.ms-dp-off { color: var(--danger-text); min-height: 52px; }

/* Ошибка при открытом чате — над полем ввода, а не поверх последних сообщений (класс ставит ui.js Toast:
   body:has(.ms-chat) заставлял WebKit перепроверять стили на каждое изменение страницы) */
.toast.over-chat { bottom: calc(var(--safe-bottom) + 132px); }

/* Совместимость: эти классы ещё используют другие экраны (comm.js, menu.js, deal.js, robots.js). */
.chat-av { position: relative; flex: none; display: inline-grid; place-items: center; align-self: flex-start; }
.msg { padding: 8px 12px 6px; border-radius: 16px; font-size: 16px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bubble-in); }
.msg.out { background: var(--bubble-out); }
.msg.out.robot { background: var(--bubble-robot); }

@media (hover: hover) and (pointer: fine) {
  .ms-row:hover { background: var(--surface-2); }
  .ms-row.on:hover { background: var(--primary-soft); }
  .ms-deal-btn:hover { background: var(--surface-3); }
  .ms-ib:hover { color: var(--text-2); background: var(--surface-2); }
  .ms-send:not(.off):hover { background: var(--primary-press); }
  .ms-img:hover img { opacity: 0.92; }
  .ms-deal-link:hover .ms-deal-name { color: var(--link); }
  .ms-rv-b:not(.on):hover { background: var(--surface-2); }
  .ms-rv-b:hover .ms-rv-e { opacity: 1; }
  .ms-rv-note:hover { background: var(--surface-2); }
  .ms-ghost.long:hover { border-color: var(--ms-ai-ink); }
  .ms-hlink[role='link']:hover .ms-hname { color: var(--link); }
  .ms-fbar-x:hover { opacity: 0.8; }
}

@media (min-width: 1024px) {
  .ms-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px 1fr; }
  .ms-col { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface); }
  .ms-col .ms-screen { background: var(--surface); }
  .ms-col .topbar { padding: 14px 16px 4px; background: var(--surface); }
  .ms-col .topbar-title { font-size: 22px; }
  .ms-pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--chat-bg); }
  .ms-pane > .empty { margin: auto; }
  .ms-embedded { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .ms-embedded > .empty { margin: auto; }
  .ms-ehead { flex: none; display: flex; align-items: center; gap: 4px; min-height: 64px; padding: 8px 12px 8px 20px; background: var(--surface); border-bottom: 0.5px solid var(--line); }
  .ms-embedded .ms-compose { padding-bottom: 0; }
  .ms-embedded .ms-msgs, .ms-chat .ms-msgs { padding: 8px 24px 16px; }
  .ms-hname { font-size: 18px; }
  .detail.ms-chat { width: min(760px, calc(100vw - 120px)); }
  .toast.over-chat { bottom: 96px; }
}