/* «Входящие» в раскладке экрана правила: диалоги | переписка с ответом | телефон Instagram. Поля, тумблеры, лист, помощник — из rule.css.
   Свои сообщения тоном данных, ваши — инверсией ink, собеседник — тоном well; статусы тихие словом с точкой. */
.inb { padding-bottom: 28px; }
.ib__hd { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 4px 0 16px; }
.ib__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .ib__grid { grid-template-columns: 300px minmax(0, 1fr); height: max(520px, calc(100dvh - 244px)); } }
@media (min-width: 1100px) { .ib__grid { grid-template-columns: 340px minmax(0, 1fr); } }

/* список */
.ib__list { display: flex; flex-direction: column; min-height: 0; border-radius: var(--r-row); background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.find { display: flex; align-items: center; gap: 8px; margin: 12px 12px 4px; padding: 0 12px; border-radius: var(--r-row); background: var(--fld); border: 1px solid var(--fld-line); color: var(--ink2); }
.find:focus-within { outline: 2px solid var(--ink); border-color: transparent; background: var(--panel); }
.find input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; color: var(--ink); font: 400 15px var(--font); outline: none; }
.find input::placeholder { color: var(--ink2); }
.rows { list-style: none; margin: 0; padding: 4px 8px 8px; overflow: auto; flex: 1; }
.row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px; border-radius: var(--r-row); text-decoration: none; transition: background-color var(--t-fast) var(--ease); }
.row:hover { background: var(--ctl); }
.row[aria-current] { background: var(--well); }
.row:focus-visible { outline-offset: -2px; border-radius: var(--r-row); }
.av { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--data-fill); color: var(--data-text); font-size: 16px; font-weight: 500; }
.row__b { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row__b b { font-weight: 400; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__b small, .conv__who small { color: var(--ink2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row[aria-current] .row__b small, .row[aria-current] .row__m small { color: var(--ink2-onmuted); }
.row__m { flex: none; display: grid; justify-items: end; gap: 4px; }
.row__m small { color: var(--ink2); font-size: 12px; }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink2); white-space: nowrap; }
.st--fail { color: var(--err); font-weight: 500; }
.empty { padding: 24px 12px; color: var(--ink2); font-size: 14px; text-align: center; }

/* переписка */
.conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: var(--r-row); background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.conv__empty { margin: auto; color: var(--ink2); }
.conv__hd { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.conv__who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.conv__who b { font-weight: 500; font-size: 16px; }
.conv__who a { color: var(--data-text); text-decoration: none; }
.conv__who a:hover { text-decoration: underline; text-underline-offset: 3px; }
.conv__back { display: none; }
.conv__view { margin: 0 16px 8px; align-self: flex-start; }
.conv__body { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.conv__chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
/* телефон Instagram с этой же перепиской; переключатель экранов под ним не сжимается; масштаб --pz задаёт js по высоте колонки */
.conv__ig { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 12px; min-height: 0; padding: 16px; background: var(--well); overflow: hidden; --pz: .85; }
.conv__ig .pv__ph { align-self: center; min-height: 0; }
.conv__ig .seg { flex: none; overflow: visible; }
@media (min-width: 1280px) { .conv__body { grid-template-columns: minmax(0, 1fr) 320px; } .conv__view { display: none; } }
@media (max-width: 1279px) { .conv__body[data-view=chat] .conv__ig, .conv__body[data-view=ig] .conv__chat { display: none; } }

.feed { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 8px 16px 16px; }
.ev { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--r-row); background: var(--ctl); max-width: 560px; }
.ev img { flex: none; width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.ev__i { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--panel); color: var(--ink2); }
.ev__i svg { width: 18px; height: 18px; }
.ev small, .msg small { display: block; color: var(--ink2); font-size: 12px; }
.ev p { font-size: 15px; }
.note { align-self: center; max-width: 46ch; color: var(--ink2); font-size: 13px; text-align: center; }
.note--fail { color: var(--err); font-weight: 500; }
.note a { color: inherit; text-underline-offset: 3px; }
.msg { display: grid; gap: 4px; justify-items: start; max-width: min(72%, 460px); }
.msg__b { display: grid; gap: 8px; padding: 10px 14px; border-radius: 16px; background: var(--well); }
.msg__b p { font-size: 15px; line-height: 1.4; }
.msg--me { align-self: flex-end; justify-items: end; }
.msg--me .msg__b { background: var(--data-fill); }
/* кнопка, которую бот прислал, — запись в истории, а не действие: тихая строка */
.msg__sent { color: var(--ink2-onmuted); font-size: 13px; }
.msg__file { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--panel); font-size: 14px; }
.msg__file svg { width: 18px; height: 18px; }

/* ответ, заметка, пауза и метки */
.msg__b p, .memo p { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg__fail { color: var(--err); font-weight: 500; }
.row__p { color: var(--ink2); font-size: 12px; }
.memo { display: flex; align-items: flex-start; gap: 8px; max-width: 560px; padding: 10px 4px 10px 12px; border-radius: var(--r-row); background: var(--band); }
.memo > div { flex: 1; min-width: 0; }
.memo small { display: block; color: var(--ink2-onmuted); font-size: 12px; }
.memo p { font-size: 15px; }
.memo .ib { flex: none; border: 0; background: transparent; color: var(--ink2); }
.memo .ib:hover { background: var(--ctl-hover); color: var(--ink); }
.memo .btn { flex: none; background: var(--panel); }
.conv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 16px 12px; }
.conv__meta .btn svg { width: 16px; height: 16px; }
.conv__meta .btn[data-on] { background: var(--data-fill); color: var(--data-text); }
.pz { position: relative; }
.menu { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; display: grid; min-width: 210px; padding: 6px; border-radius: var(--r-card); background: var(--band); box-shadow: var(--tab-shadow); }
.menu[hidden] { display: none; }
.menu--up { top: auto; bottom: calc(100% + 6px); }
.menu:not([hidden]) { animation: menu-in 180ms var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .menu:not([hidden]) { animation: menu-fade 80ms linear; } @keyframes menu-fade { from { opacity: 0; } } }
.menu button { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-row); background: transparent; color: var(--ink); font: 500 14px var(--font); text-align: left; }
.menu button:hover, .menu button:focus-visible { background: var(--ctl-hover); }
.menu button[data-pz="0"] { color: var(--data-text); }
.tag__in { width: 150px; min-height: 40px; }
.conv__err { margin: 0 16px 8px; }
.cmp { flex: none; display: grid; gap: 8px; padding: 8px 16px 16px; }
.cmp__row { display: flex; align-items: flex-end; gap: 8px; }
textarea.cmp__ta { flex: 1; min-width: 0; min-height: 44px; max-height: 140px; resize: none; overflow-y: auto; }
.cmp__ta:disabled { background: var(--ctl); color: var(--ink2-onmuted); cursor: not-allowed; }
.cmp__go { flex: none; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: var(--ink); color: var(--panel); }
.cmp__go:hover { background: var(--ink2-onmuted); }
.cmp__go:disabled { background: var(--well); color: var(--ink2-onmuted); cursor: default; }
.cmp__go svg { width: 18px; height: 18px; }
.cmp__foot { display: flex; justify-content: space-between; gap: 12px; }
.cmp__hint, .cmp__cnt { color: var(--ink2); font-size: 13px; line-height: 1.4; }
.cmp__cnt { flex: none; }
.cmp .err { margin: 0; }

/* помощник предлагает ответ; ответ человека */
.say--sug { max-width: none; margin: 0 16px 10px; padding: 10px 12px; border-radius: var(--r-row); background: var(--well); }
.say--sug p { flex: 1; min-width: 0; }
.say--sug small { display: block; color: var(--ink2-onmuted); font-size: 12px; }
.say--sug .btn { flex: none; background: var(--panel); }

/* узкий экран: список; переписка — листом во всю высоту */
@media (max-width: 899px) {
  .ib__grid > .conv { display: none; }
  .ib__list { border: 0; background: transparent; overflow: visible; }
  .find { margin: 0 0 8px; }
  .rows { padding: 0; overflow: visible; }
  .row { padding: 10px 4px; }
  .sheet--full { height: 92dvh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); overflow: hidden; }
  .sheet--full .conv { flex: 1; border: 0; border-radius: 0; background: transparent; }
  .sheet--full .conv__hd { padding: 4px 0 10px; }
  .sheet--full .conv__view { margin-left: 0; margin-right: 0; }
  .sheet--full .feed { padding-left: 0; padding-right: 0; }
  .conv__back { display: inline-grid; flex: none; width: 44px; height: 44px; border: 0; background: var(--ctl); }
  .msg { max-width: 84%; }
  .sheet--full .conv__meta, .sheet--full .conv__err, .sheet--full .cmp { padding-left: 0; padding-right: 0; }
  .sheet--full .conv__err { margin-left: 0; margin-right: 0; }
  .cmp .seg button { min-height: 44px; }
  .say--sug { flex-wrap: wrap; }
  .say--sug .btn { flex: 1 0 100%; }
  .conv__ig { border-radius: var(--r-row); }
}
@media (max-width: 599px) { .ib__hd .seg { width: 100%; } .ib__hd .seg button { flex: 1; justify-content: center; } }

.conv__none { display: grid; justify-items: start; gap: 12px; padding: 16px; color: var(--ink2); }
.conv__none .conv__back { display: none; }
@media (max-width: 899px) { .conv__none .conv__back { display: inline-grid; } }
.conv__hd .btn { flex: none; }
@media (max-width: 599px) { .conv__who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv__who #who { overflow: visible; white-space: normal; } } /* ссылки правил — цели 44 px, строка переносится вместо многоточия */

/* десктоп ≥900 в окне: сетка берёт остаток высоты, список и лента прокручиваются внутри своих панелей */
@media (min-width: 900px) {
  body[data-fit] .ib__hd { flex: none; }
  body[data-fit] .ib__grid { flex: 1; min-height: 0; height: auto; grid-template-rows: minmax(0, 1fr); }
  body[data-fit] .rows { padding: 4px 8px 8px; }
}
.cmp .seg { justify-self: start; }

/* фильтры диалогов (сегмент из app.css), строка: непрочитанный весом и тихой точкой, метки, ожидание */
.ib__flt { position: relative; flex: none; margin: 12px 12px 0; }
body[data-fit] .ib__flt { scrollbar-width: none; }
.ib__flt button { min-height: 36px; padding: 0 6px; }
/* семь фильтров не помещаются в один ряд на 390: ряд переносится строкой, а не уезжает за край */
.ib__flt { flex-wrap: wrap; overflow: visible; border-radius: 26px; }
@media (max-width: 899px) { .ib__flt { margin: 0 0 8px; } .ib__flt button { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .seg .n[data-roll] > span { animation: none; } }
.row--un .row__b b { font-weight: 500; }
.row--un .row__b small:not(.row__t) { color: var(--ink); font-weight: 500; }
.row__b .row__t { font-size: 12px; }
.row__tm { display: inline-flex; align-items: center; gap: 6px; }
.row__d { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.row__s { color: var(--ink2); font-size: 12px; }
.empty { display: grid; justify-items: center; gap: 12px; }
.conv__close { margin-left: auto; }

/* тост с «Отменить»: плавающий слой над экраном, прячется целиком (hidden) */
.toast { position: fixed; z-index: 60; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 4px 4px 4px 16px; border-radius: var(--r-row); background: var(--ink); color: var(--panel); font-size: 14px; box-shadow: var(--tab-shadow);
  opacity: 0; transform: translate(-50%, 8px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); }
.toast[hidden] { display: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast span { white-space: nowrap; }
.toast .btn { flex: none; background: transparent; color: var(--panel); }
.toast .btn:hover { background: var(--ink2-onmuted); }
@media (max-width: 899px) { .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .toast { transform: translate(-50%, 0); transition: opacity 80ms linear; } }

/* прочитать всё, быстрые ответы: список над полем, лист «Настроить» (меню и лист — из компонентов выше и rule.css) */
.btn[hidden], .ib[hidden], .seg[hidden], .qr[hidden] { display: none; }
.ib__hd .btn svg { width: 16px; height: 16px; }
.cmp__rw { position: relative; }
.cmp__qr { flex: none; width: 44px; height: 44px; border: 0; background: var(--ctl); color: var(--ink2-onmuted); }
.cmp__qr:hover, .cmp__qr[aria-expanded=true] { background: var(--ctl-hover); color: var(--ink); }
.qr { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(100% + 8px); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 4px; max-height: min(340px, 48dvh); padding: 6px; border-radius: var(--r-card); background: var(--band); box-shadow: var(--tab-shadow); overflow: hidden; }
.qr:not([hidden]) { animation: menu-in 180ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .qr:not([hidden]) { animation: menu-fade 80ms linear; } }
.qr__f { background: var(--panel); }
.qr__l { display: grid; align-content: start; overflow: auto; overscroll-behavior: contain; }
.qr__o { display: grid; gap: 2px; justify-items: start; min-height: 52px; padding: 8px 12px; border: 0; border-radius: var(--r-row); background: transparent; color: var(--ink); font: 400 14px var(--font); text-align: left; transition: background-color var(--t-fast) var(--ease); }
.qr__o b { max-width: 100%; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr__o small { max-width: 100%; color: var(--ink2-onmuted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr__o:hover, .qr__o[aria-selected=true] { background: var(--ctl-hover); }
.qr__o--m { min-height: 44px; align-content: center; font-weight: 500; }
.qr__n { display: grid; justify-items: start; gap: 10px; padding: 10px 12px; color: var(--ink2-onmuted); font-size: 14px; }
.qm { padding-top: 12px; }
.qm__f { display: grid; gap: 4px; padding: 12px; border-radius: var(--r-row); background: var(--well); }
.qm__f .lbl { margin: 4px 0; font-size: 14px; }
.qm__f textarea.fld { min-height: 112px; resize: vertical; }
.qm__acts { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.qm__acts .cta { min-height: 48px; padding: 0 20px; }
.qm__acts .btn { min-height: 48px; }
#qmErr { margin: 4px 0 0; }
@media (max-width: 899px) { .qr { max-height: min(300px, 42dvh); } }
.qm__f .btn { background: var(--panel); }
.qm__f .btn:hover { background: var(--ctl-hover); }

/* ответственный: тихая строка в диалоге списка, кнопка в панели рядом с паузой; наблюдателю вместо композера одна фраза */
.row__a { color: var(--ink2); }
.conv__st { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r-row); background: var(--well); color: var(--ink2-onmuted); font-size: 13px; }
.cmp--ro { display: block; padding: 12px 16px 16px; color: var(--ink2-onmuted); font-size: 14px; }
.conv__meta [data-assign] { max-width: 100%; }
.conv__meta [data-assign] span, .conv__meta [data-assign] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }